style: format code

.eslintrc.js

@@ -5,18 +5,39 @@ module.exports = {
   },
   extends: [
     'plugin:vue/vue3-essential',
+    'plugin:vue/vue3-strongly-recommended',
+
     'eslint:recommended',
     '@vue/typescript/recommended',
     '@vue/prettier',
-    '@vue/prettier/@typescript-eslint'
+    '@vue/prettier/@typescript-eslint',
+    'plugin:vue/vue3-recommended'
   ],
   parserOptions: {
-    ecmaVersion: 2020
+    ecmaVersion: 2020,
+    ecmaFeatures: {
+      jsx: true
+    }
   },
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    '@typescript-eslint/no-var-requires': 0
+    '@typescript-eslint/no-var-requires': 0,
+    'vue/html-self-closing': [
+      'error',
+      {
+        html: {
+          component: 'always'
+        }
+      }
+    ],
+    'vue/require-explicit-emits': [
+      'error',
+      {
+        allowProps: true
+      }
+    ],
+    'vue/one-component-per-file': 'off'
   },
   overrides: [
     {

.vscode/settings.json

@@ -8,15 +8,8 @@
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
   },
-  "eslint.validate": [
-    "javascript",
-    "typescript",
-    "typescriptreact"
-  ],
-  "prettier.disableLanguages": [
-    "json",
-    "md"
-  ],
+  "eslint.validate": ["javascript", "typescript", "typescriptreact", "vue"],
+  "prettier.disableLanguages": ["json", "md"],
   "typescript.tsdk": "node_modules\\typescript\\lib",
   "stylelint.enable": true,
   "[less]": {

README.md

@@ -14,7 +14,7 @@
 
 ### PR 说明
 
-以 next 分支为默认分支，请基于 next 创建自己的分支，在提交之前请同步 next 分支，尽量避免代码冲突。
+以 next 分支为默认分支，请基于 next 分支 fock 自己的仓库，在提交之前请同步 next 分支，尽量避免代码冲突。
 
 在基本架构完成之后我会创建一些基本的编码规则和提交规则，也欢迎大家参与进来一起制定。
 
@@ -63,45 +63,13 @@
 
 更多规则参考[https://github.com/conventional-changelog/commitlint](https://github.com/conventional-changelog/commitlint)
 
-### 快速 PR
-
-规则：
-
-- 目录原则：
-  - 辅助线文件夹默认导出为 `index.ts` ，所有界面相关的 `code` 放置在 `pages` 下。
-  - `script`: 打包部署脚本
-  - `src`：
-    - `app` 项目运行主要文件夹。
-    - `interface` 主要编写类型推断 code 。
-    - `theme` 存放主题相关的配置，使用 `index.ts` 进行主题切换。
-    - `router` 主要用于配置前端页面路由。
-    - `utils` 用于编写公共无副作用函数。
-    - `components` 为页面可重用组件，主要从 `pages` 中抽离可复用的代码或 UI 组件。
-    - `modules` 文件夹是收集索有 `pages` 下的 store ，有效的分离 store ，以页面的角度分离 store。
-    - 其它文件暂不做说明。
-- 代码规范：
-  - 暂无
-
-相关链接：
-
-- [NeteaseCloudMusicApi](https://github.com/Binaryify/NeteaseCloudMusicApi)
-- [vuejs](https://v3.vuejs.org/)
-- [commitlint](https://commitlint.js.org/#/)
-- [vue-cli](https://cli.vuejs.org/zh/)
-- [prettier](https://prettier.io/)
-- [webpack-chain](https://github.com/neutrinojs/webpack-chain#getting-started)
-- [storybook](https://github.com/storybookjs/storybook/tree/next/app/vue)
-- [vue-cli-plugin-electron-builder](https://github.com/nklayman/vue-cli-plugin-electron-builder)
-- [vue-cli jsx](https://github.com/vuejs/jsx-next/blob/dev/packages/babel-plugin-jsx/README-zh_CN.md)
-- [nativescript vue 3 issues](https://github.com/nativescript-vue/nativescript-vue/issues/583)
-
 ### Electron
 
-在开发的同时会快速兼容 Electron 。所谓的快速就是调用很少的 API 实现 PC 端的功能，比如放大、缩小、通知、音乐拖放上传。
+在开发的同时会快速兼容 Electron 。所谓的快速就是调用很少的 API 实现 PC 端的功能，比如放大、缩小、通知、歌词、音乐拖放上传。
 
 ### ~~在线 API [NeteaseCloudMusicApi](https://music.linkorg.club/)~~
 
-### `vue3.x`已发布，音乐项目正在搭建基本架构
+### `vue3.x`已发布，音乐项目已完成基本架构
 
 目前会利用闲暇时间进行重构，如果你也想参与进来，可以发邮件或在[这里](https://github.com/Linkontoask/radishes/issues/6)告诉我
 
@@ -123,3 +91,17 @@
 3、运行项目
   在主目录下运行 yarn dev
 ```
+
+相关链接：
+
+- [NeteaseCloudMusicApi](https://github.com/Binaryify/NeteaseCloudMusicApi)
+- [vuejs](https://v3.vuejs.org/)
+- [commitlint](https://commitlint.js.org/#/)
+- [vue-cli](https://cli.vuejs.org/zh/)
+- [prettier](https://prettier.io/)
+- [webpack-chain](https://github.com/neutrinojs/webpack-chain#getting-started)
+- [storybook](https://github.com/storybookjs/storybook/tree/next/app/vue)
+- [vue-cli-plugin-electron-builder](https://github.com/nklayman/vue-cli-plugin-electron-builder)
+- [vue-cli jsx](https://github.com/vuejs/jsx-next/blob/dev/packages/babel-plugin-jsx/README-zh_CN.md)
+- [nativescript vue 3 issues](https://github.com/nativescript-vue/nativescript-vue/issues/583)
+- [browser module](https://philipwalton.com/articles/deploying-es2015-code-in-production-today/)

package.json

@@ -80,7 +80,6 @@
     "less-loader": "^5.0.0",
     "lint-staged": "^9.5.0",
     "lodash": "^4.17.20",
-    "plain-draggable": "^2.5.12",
     "prettier": "^1.19.1",
     "react-is": "^16.13.1",
     "scriptjs": "^2.5.9",

src/components-global/icon/main/index.tsx

@@ -21,7 +21,8 @@ export default defineComponent({
       default: 24
     },
     height: {
-      type: Number as PropType<number>
+      type: Number as PropType<number>,
+      default: 24
     }
   },
   setup(props) {

src/components/error-boundary/index.tsx

@@ -4,7 +4,8 @@ import {
   defineComponent,
   nextTick,
   ref,
-  reactive
+  reactive,
+  PropType
 } from 'vue'
 import './index.less'
 
@@ -46,7 +47,16 @@ export function errorHandle(app: App): void {
 }
 
 export const RuntimeErrorComponent = defineComponent({
-  props: ['title', 'message'],
+  props: {
+    title: {
+      type: String as PropType<string>,
+      required: true
+    },
+    message: {
+      type: Object as PropType<RuntimeErrorComponentProps>,
+      required: true
+    }
+  },
   render(this: RuntimeErrorComponentProps & ComponentOptions) {
     const { title, message } = this.$props
     return (
@@ -61,6 +71,9 @@ export const RuntimeErrorComponent = defineComponent({
 
 export const ErrorBoundary = defineComponent<Options>({
   name: 'ErrorBoundary',
+  components: {
+    RuntimeErrorComponent
+  },
   setup() {
     const error = ref(false)
     const runtimeProps = reactive({})
@@ -69,9 +82,6 @@ export const ErrorBoundary = defineComponent<Options>({
       runtimeProps
     }
   },
-  components: {
-    RuntimeErrorComponent
-  },
   methods: {
     handleError(
       this: This,

src/components/process-bar/block.tsx

@@ -10,14 +10,15 @@ export const BufferBlock = defineComponent({
   name: 'BufferBlock',
   props: {
     block: {
-      type: Array as PropType<Block[]>
+      type: Array as PropType<Block[]>,
+      required: true
     }
   },
   setup(props) {
     const { block } = toRefs(props)
     return () => (
       <div class="buffer-block">
-        {block?.value?.map(b => (
+        {block.value?.map(b => (
           <div style={{ left: b.left + '%', width: b.width + '%' }}></div>
         ))}
       </div>

src/components/process-bar/index.tsx

@@ -10,7 +10,7 @@ import {
 import classnames from 'classnames'
 import { BufferBlock, Block } from '@/components/process-bar/block'
 import { useDrag } from '@/hooks/index'
-import { on, toFixed } from '@/utils/index'
+import { on, toFixed, noop } from '@/utils/index'
 import './index.less'
 
 const prefix = 'progress'
@@ -22,33 +22,37 @@ interface Slots {
 
 export const ProgressBar = defineComponent({
   name: 'ProgressBar',
-  emits: ['update:draging'],
   props: {
     canDrage: {
       type: Boolean as PropType<boolean>,
       required: true
     },
-    onChange: {
-      type: Function as PropType<(x: number, w: number) => void>
+    showTooltip: {
+      type: Boolean as PropType<boolean>,
+      default: true
     },
     current: {
       type: Number as PropType<number>,
       default: 0
     },
-    onCurrent: {
-      type: Function as PropType<(v: number) => void>
-    },
     draging: {
-      type: Boolean as PropType<boolean>
+      type: Boolean as PropType<boolean>,
+      default: false
     },
     block: {
-      type: Array as PropType<Block[]>
+      type: Array as PropType<Block[]>,
+      default: []
     },
-    showTooltip: {
-      type: Boolean as PropType<boolean>,
-      default: true
+    onChange: {
+      type: Function as PropType<(x: number, w: number) => void>,
+      default: noop
+    },
+    onCurrent: {
+      type: Function as PropType<(v: number) => void>,
+      default: noop
     }
   },
+  emits: ['update:draging'],
   setup(props, context) {
     const {
       canDrage,

src/components/swiper/index.tsx

@@ -23,7 +23,8 @@ export const Swiper = defineComponent({
       required: true
     },
     running: {
-      type: Boolean as PropType<boolean>
+      type: Boolean as PropType<boolean>,
+      default: false
     }
   },
   setup(props) {
@@ -54,7 +55,7 @@ export const Swiper = defineComponent({
     })
 
     watchEffect(() => {
-      if (running?.value) {
+      if (running.value) {
         startInternal()
       } else {
         stopInternal()

src/electron/event/ipc-main/index.ts

@@ -1,4 +1,4 @@
-import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import { ipcMain, IpcMainEvent, BrowserWindow, screen } from 'electron'
 import { Action, LyriceAction, UpdateType } from '../action-types'
 
@@ -63,7 +63,7 @@ export const onIpcMainEvent = (win: BrowserWindow) => {
       event: IpcMainEvent,
       arg: {
         type: UpdateType
-        payload: any
+        payload: unknown
       }
     ) => {
       syrice && syrice.webContents.send(LyriceAction.LYRICE_UPDATE_RENDER, arg)

src/electron/event/ipc-renderer/index.ts

@@ -8,7 +8,7 @@ and then process some things that the main process can handle (for example, chan
 import { ipcRenderer } from 'electron'
 import { Action, LyriceAction, UpdateType } from '../action-types'
 
-type Message = any
+type Message = unknown
 type ActionType = Action | LyriceAction | UpdateType
 
 export function sendAsyncIpcRendererEvent(
@@ -27,5 +27,5 @@ export function sendSyncIpcRendererEvent(
 
 export interface IpcRenderer {
   sendAsyncIpcRendererEvent: (action: ActionType, ...message: Message[]) => void
-  sendSyncIpcRendererEvent: <T>(action: ActionType, ...message: Message) => T
+  sendSyncIpcRendererEvent: <T>(action: ActionType, ...message: Message[]) => T
 }

src/electron/main.ts

@@ -55,10 +55,6 @@ function createWindow() {
     win = null
   })
 
-  win.on('unresponsive', (e: any) => {
-    console.log(e)
-  })
-
   eventInit(win)
 }
 

src/layout/container.tsx

@@ -19,7 +19,6 @@ import {
   Mutations
 } from '@/pages/find-new-music/children/recommend/module'
 import { Platform } from '@/config/build'
-import { on } from '@/utils'
 import './container.less'
 
 const { VUE_APP_PLATFORM } = window as ENV

src/pages/footer/component/lyrice-flash/browser-lyrice.tsx

@@ -16,7 +16,7 @@ import './index.less'
 
 const { VUE_APP_PLATFORM } = window as ENV
 
-export const ipcUpdateLyrice = (type: UpdateType, payload?: any) => {
+export const ipcUpdateLyrice = (type: UpdateType, payload?: unknown) => {
   importIpc().then(event => {
     event.sendAsyncIpcRendererEvent(LyriceAction.LYRICE_UPDATE, {
       type: type,

src/pages/footer/component/lyrice-flash/electron-lyrice.tsx

@@ -44,25 +44,25 @@ export default defineComponent({
         event,
         arg: {
           type: UpdateType
-          payload: any
+          payload: unknown
         }
       ) => {
         const { type, payload } = arg
         if (payload === undefined) return
         switch (type) {
           case UpdateType.UPDATE_INDEX:
-            postData.index = payload
+            postData.index = payload as PostData['index']
             break
           case UpdateType.UPDATE_LYRICE:
-            if (payload.length) {
-              postData.lyrice = payload
+            if ((payload as PostData['lyrice']).length !== 0) {
+              postData.lyrice = payload as PostData['lyrice']
             }
             break
           case UpdateType.UPDATE_MAGIC:
-            postData.flashMagic = payload
+            postData.flashMagic = payload as PostData['flashMagic']
             break
           case UpdateType.UPDATE_PLAYING:
-            postData.playing = payload
+            postData.playing = payload as PostData['playing']
             break
           default:
             break