diff --git a/README.md b/README.md index b02c38a1..fca88e8e 100644 --- a/README.md +++ b/README.md @@ -124,3 +124,4 @@ yarn bootstrap - [nativescript-vue](https://github.com/nativescript-vue/nativescript-vue) - [browser module](https://philipwalton.com/articles/deploying-es2015-code-in-production-today/) - [dayjs](https://day.js.org/docs/zh-CN/installation/installation) +- [lerna](https://github.com/lerna/lerna) diff --git a/package.json b/package.json index 9868248e..08ffb55d 100644 --- a/package.json +++ b/package.json @@ -22,6 +22,7 @@ "postuninstall": "electron-builder install-app-deps", "log": "conventional-changelog -p eslint -i CHANGELOG.md -s -r 0", "electron:generate-icons": "electron-icon-builder --input=./public/icon.png --output=build --flatten", + "svgo": "svgo -f ./src/assets/svg", "storybook": "start-storybook -p 6006" }, "gitHooks": { @@ -70,6 +71,7 @@ "@types/md5": "^2.2.1", "@types/mocha": "^5.2.4", "@types/scriptjs": "^0.0.2", + "@types/file-saver": "^2.0.1", "@typescript-eslint/eslint-plugin": "^2.33.0", "@typescript-eslint/parser": "^2.33.0", "@vue/cli-plugin-babel": "~4.5.0", @@ -105,6 +107,7 @@ "http-proxy-middleware": "^1.0.6", "husky": "^4.3.0", "lerna": "^3.22.1", + "file-saver": "^2.0.5", "less": "^3.0.4", "less-loader": "^5.0.0", "lint-staged": "^9.5.0", @@ -113,6 +116,7 @@ "react-is": "^16.13.1", "scriptjs": "^2.5.9", "spectron": "^12.0.0", + "svgo": "^1.3.2", "stylelint": "^13.7.2", "stylelint-config-prettier": "^8.0.2", "stylelint-config-recess-order": "^2.3.0", diff --git a/packages/unblock/package.json b/packages/unblock/package.json index 6a5cda0b..796da0f7 100644 --- a/packages/unblock/package.json +++ b/packages/unblock/package.json @@ -26,9 +26,9 @@ "access": "public" }, "devDependencies": { - "jest": "^26.6.3", "@babel/core": "^7.12.9", "@babel/preset-env": "^7.12.7", - "babel-jest": "^26.6.3" + "babel-jest": "^26.6.3", + "jest": "^26.6.3" } } diff --git a/src/assets/svg/vinyl.svg b/src/assets/svg/vinyl.svg new file mode 100644 index 00000000..6329c9ab --- /dev/null +++ b/src/assets/svg/vinyl.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components-global/icon/main/index.tsx b/src/components-global/icon/main/index.tsx index 330d12ce..3fe146bf 100644 --- a/src/components-global/icon/main/index.tsx +++ b/src/components-global/icon/main/index.tsx @@ -23,24 +23,26 @@ export default defineComponent({ // eslint-disable-next-line vue/require-default-prop height: { type: Number as PropType + }, + className: { + type: String as PropType, + default: '' } }, setup(props) { - const { icon, color, height, size } = toRefs(props) + const { icon, color, height, size, className } = toRefs(props) return () => ( - <> - - + ) } }) diff --git a/src/components/secondary-list/index.tsx b/src/components/secondary-list/index.tsx index fbf74b4b..b34626aa 100644 --- a/src/components/secondary-list/index.tsx +++ b/src/components/secondary-list/index.tsx @@ -3,18 +3,39 @@ import { Secondary } from '@/layout/secondary/secondary' import { Image } from '@/components/image/index' import { MoreThen } from '@/components/more-then/index' import { Table } from '@/components/table' -import { FormatSource, ListFormat } from '@/interface/index' -import { formatTime, noop } from '@/utils/index' +import { FormatSource, ListFormat, SongsBase } from '@/interface/index' +import { formatTime, noop, download } from '@/utils/index' +import { getSongUrl } from '@/api/index' import { RouterLink, useRouter } from 'vue-router' import dayjs from 'dayjs' import './index.less' const columns = [ { - width: 80, + width: 40, align: 'center', customRender: ({ index }: { index: number }) => ( -
{++index < 10 ? '0' + index : index}
+
{++index < 10 ? '0' + index : index}
+ ) + }, + { + width: 70, + align: 'center', + customRender: ({ text }: { text: ListFormat }) => ( +
+ + + + { + const url = await getSongUrl(text.id) + download(url[0].url, text.name) + }} + > + + +
) }, { diff --git a/src/iconfont/index.ts b/src/iconfont/index.ts index b9d4f943..d420d17b 100644 --- a/src/iconfont/index.ts +++ b/src/iconfont/index.ts @@ -1,7 +1,7 @@ import $script from 'scriptjs' import { noop } from '@/utils/index' -const ICONFONT_URL = 'font_2132275_ybsarqqzpm' +const ICONFONT_URL = 'font_2132275_vy63016frs8' // repair electron packaging '//' protocol problem $script(`https://at.alicdn.com/t/${ICONFONT_URL}.js`, noop) diff --git a/src/pages/footer/components/lyrice-embed/index.less b/src/pages/footer/components/lyrice-embed/index.less index 76397c83..a2dc218d 100644 --- a/src/pages/footer/components/lyrice-embed/index.less +++ b/src/pages/footer/components/lyrice-embed/index.less @@ -1,39 +1,80 @@ @import '~@/theme/index.less'; @prefix: ~'song-details'; +@keyframes playing { + 100% { + transform: rotate(360deg); + } +} + .@{prefix} { - display: flex; - align-items: center; width: 100%; height: 100%; padding: 0 40px; background-color: #fafafa; + &-center { + display: flex; + align-items: center; + width: 800px; + height: 100%; + margin: 0 auto; + } &-left { - width: 30%; + min-width: 270px; height: 100%; - margin-right: 8%; - margin-left: 14%; - &-pic { + margin-top: 100px; + margin-right: 80px; + div&-pic { display: flex; align-items: center; justify-content: center; - width: 386px; + width: 270px; max-width: 100%; - height: 386px; - > div { - width: 270px; - height: 270px; - background-size: contain; + height: 270px; + background-color: transparent !important; + background-image: url('~@/assets/svg/vinyl.svg'); + animation: playing 10s linear infinite; + &--playing { + animation-play-state: running; + } + &--pause { + animation-play-state: paused; + } + img { + position: inherit; + width: 60%; + height: 60%; border-radius: 50%; } } + &-extra { + display: flex; + align-items: center; + justify-content: center; + margin-top: 20px; + button.button-is-circle { + margin-right: 20px; + background-color: var(--background-darken); + &:hover { + background-color: var(--background-darken-hover); + } + } + } } &-right { + display: flex; flex: 1; + flex-direction: column; height: 100%; + &--title { + padding: 0 10px; + margin-top: 30px; + margin-bottom: 20px; + font-size: 24px; + } &--lyrice { + flex: 1; width: 76%; - height: 100%; overflow: hidden; &-contanier { padding: calc(50% + 50px) 10px; diff --git a/src/pages/footer/components/lyrice-embed/index.tsx b/src/pages/footer/components/lyrice-embed/index.tsx index 68e379e1..07e38560 100644 --- a/src/pages/footer/components/lyrice-embed/index.tsx +++ b/src/pages/footer/components/lyrice-embed/index.tsx @@ -11,17 +11,18 @@ import { onMounted, onBeforeUnmount } from 'vue' -import { on, off } from '@/utils/index' -import { uesModuleStore } from '@/hooks/index' -import { TeleportToAny } from '@/components/teleport-layout/index' import { NAMESPACED as LayoutNamespace, State as LayoutState, Size } from '@/layout/module' +import { on, off, download } from '@/utils/index' +import { uesModuleStore } from '@/hooks/index' +import { TeleportToAny } from '@/components/teleport-layout/index' import { NAMESPACED, FooterState, Getter } from '../../module' -import classnams from 'classnames' import { debounce } from 'lodash' +import { Image } from '@/components/image' +import classnams from 'classnames' import './index.less' const prefix = 'song-details' @@ -50,10 +51,9 @@ export const PlayLyrice = defineComponent({ const { screenSize } = toRefs(LayoutModule.useState()) const lyrice = computed(() => useGetter('musicLyrics')) - const { currentTime } = toRefs(useState()) + const state = useState() const url = computed(() => { - const state = useState() return state.music?.al.picUrl }) @@ -61,9 +61,9 @@ export const PlayLyrice = defineComponent({ const len = lyrice.value.length return ( lyrice.value.findIndex((value, index) => { - return currentTime.value >= value.time && len - 1 === index + return state.currentTime >= value.time && len - 1 === index ? true - : currentTime.value < lyrice.value[index + 1]?.time + : state.currentTime < lyrice.value[index + 1]?.time }) || 0 ) }) @@ -87,6 +87,12 @@ export const PlayLyrice = defineComponent({ } }, 100) + const handleDownload = () => { + if (state.music) { + download(state.music.url, state.music.name) + } + } + onMounted(() => { on(window, 'resize', resize) }) @@ -106,36 +112,51 @@ export const PlayLyrice = defineComponent({ onAfterLeave={() => (transition.value = false)} >
-
-
-
+
+
+ +
+ + + + + + +
-
-
-
-
-
- (disabled.value = true)} - onStop={() => (disabled.value = false)} - > -
    - {lyrice.value.map((item, i) => ( -
    - {item.lyric} -
    - ))} -
- +
+
+ {state.music?.name} +
+
+ (disabled.value = true)} + onStop={() => (disabled.value = false)} + > +
    + {lyrice.value.map((item, i) => ( +
    + {item.lyric} +
    + ))} +
+ +
diff --git a/src/pages/footer/components/music-controller/index.tsx b/src/pages/footer/components/music-controller/index.tsx index b1b9d1b8..2eb1887e 100644 --- a/src/pages/footer/components/music-controller/index.tsx +++ b/src/pages/footer/components/music-controller/index.tsx @@ -215,7 +215,7 @@ export const MusicControl = defineComponent({