feat(master): init

+VITE_API_HOST=https://hi-sing-service-dev.hikoon.com
+
+VITE_OSS_ACCESS_KEY=LTAI4GKtcA6yTV6wnapivq7Y
+VITE_OSS_ACCESS_SECRET=QPEt0HPEuRe7wIk2wZNtKPF6L0xMmQ
+VITE_OSS_BUCKET=hisin-dev
+VITE_OSS_REGION=oss-cn-beijing
+VITE_OSS_HOST=https://hi-sing-cdn-dev.hikoon.com
+VITE_OSS_ENDPOINT=https://hisin-dev.oss-cn-beijing.aliyuncs.com
+VITE_SHOW_LOGIN_ACCOUNT=true

+/*.json
+/*.js
+dist
\ No newline at end of file

+const path = require('path');
+
+module.exports = {
+  root: true,
+  parser: 'vue-eslint-parser',
+  parserOptions: {
+    // Parser that checks the content of the <script> tag
+    parser: '@typescript-eslint/parser',
+    sourceType: 'module',
+    ecmaVersion: 2020,
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  env: {
+    browser: true,
+    node: true,
+  },
+  plugins: ['@typescript-eslint'],
+  extends: [
+    // Airbnb JavaScript Style Guide https://github.com/airbnb/javascript
+    'airbnb-base',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:import/recommended',
+    'plugin:import/typescript',
+    'plugin:vue/vue3-recommended',
+    'plugin:prettier/recommended',
+  ],
+  settings: {
+    'import/resolver': {
+      typescript: {
+        project: path.resolve(__dirname, './tsconfig.json'),
+      },
+    },
+  },
+  globals: {
+    defineProps: 'readonly',
+    defineEmits: 'readonly',
+    defineExpose: 'readonly',
+    defineModel: 'readonly',
+    withDefaults: 'readonly',
+  },
+  rules: {
+    'prettier/prettier': 1,
+    'import/order': 0,
+    // Vue: Recommended rules to be closed or modify
+    'vue/require-default-prop': 0,
+    'vue/singleline-html-element-content-newline': 0,
+    'vue/max-attributes-per-line': 0,
+    // Vue: Add extra rules
+    'vue/custom-event-name-casing': [2, 'camelCase'],
+    'vue/no-v-text': 1,
+    'vue/padding-line-between-blocks': 1,
+    'vue/require-direct-export': 1,
+    'vue/multi-word-component-names': 0,
+    // Allow @ts-ignore comment
+    '@typescript-eslint/ban-ts-comment': 0,
+    '@typescript-eslint/no-unused-vars': 1,
+    '@typescript-eslint/no-empty-function': 1,
+    '@typescript-eslint/no-explicit-any': 0,
+    '@typescript-eslint/no-implicit-any': 0,
+    'camelcase': 'off',
+    'max-classes-per-file': 'off',
+    '@typescript-eslint/camelcase': 0,
+    'import/extensions': [
+      2,
+      'ignorePackages',
+      {
+        js: 'never',
+        jsx: 'never',
+        ts: 'never',
+        tsx: 'never',
+      },
+    ],
+    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
+    'no-param-reassign': 0,
+    'no-return-assign': 0,
+    'no-shadow': 0,
+    'prefer-regex-literals': 0,
+    'import/no-extraneous-dependencies': 0,
+    'class-methods-use-this': 0,
+  },
+};

+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+/node_modules
+/dist
+/dist-ssr
+.idea/*
+yarn.lock
+.env.production
+components.d.ts

+/dist/*
+/node_modules/**
+
+**/*.svg
+**/*.sh

+module.exports = {
+  tabWidth: 2,
+  semi: true,
+  printWidth: 140,
+  singleQuote: true,
+  quoteProps: 'consistent',
+  htmlWhitespaceSensitivity: 'strict',
+  vueIndentScriptAndStyle: true,
+};

+module.exports = {
+  extends: [
+    'stylelint-config-standard',
+    'stylelint-config-rational-order',
+    'stylelint-config-prettier',
+  ],
+  defaultSeverity: 'warning',
+  plugins: ['stylelint-order'],
+  rules: {
+    'at-rule-no-unknown': [
+      true,
+      {
+        ignoreAtRules: ['plugin'],
+      },
+    ],
+    'rule-empty-line-before': [
+      'always',
+      {
+        except: ['after-single-line-comment', 'first-nested'],
+      },
+    ],
+    'selector-pseudo-class-no-unknown': [
+      true,
+      {
+        ignorePseudoClasses: ['deep'],
+      },
+    ],
+  },
+};

+module.exports = {
+  plugins: ['@vue/babel-plugin-jsx'],
+};

+module.exports = {
+  extends: ['@commitlint/config-conventional'],
+};

+!.gitignore

+/**
+ * If you use the template method for development, you can use the unplugin-vue-components plugin to enable on-demand loading support.
+ * 按需引入
+ * https://github.com/antfu/unplugin-vue-components
+ * https://arco.design/vue/docs/start
+ * Although the Pro project is full of imported components, this plugin will be used by default.
+ * 虽然Pro项目中是全量引入组件，但此插件会默认使用。
+ */
+// eslint-disable-next-line import/no-unresolved
+import Components from "unplugin-vue-components/vite";
+// eslint-disable-next-line import/no-unresolved
+import { ArcoResolver } from "unplugin-vue-components/resolvers";
+
+export default function configArcoResolverPlugin() {
+  return Components({
+    dirs: [], // Avoid parsing src/components.  避免解析到src/components
+    deep: false,
+    resolvers: [ArcoResolver()],
+  });
+}

+/**
+ * Used to package and output gzip. Note that this does not work properly in Vite, the specific reason is still being investigated
+ * gzip压缩
+ * https://github.com/anncwb/vite-plugin-compression
+ */
+import type { Plugin } from 'vite';
+import compressPlugin from 'vite-plugin-compression';
+
+export default function configCompressPlugin(
+  compress: 'gzip' | 'brotli',
+  deleteOriginFile = false
+): Plugin | Plugin[] {
+  const plugins: Plugin[] = [];
+
+  if (compress === 'gzip') {
+    plugins.push(
+      compressPlugin({
+        ext: '.gz',
+        deleteOriginFile,
+      })
+    );
+  }
+
+  if (compress === 'brotli') {
+    plugins.push(
+      compressPlugin({
+        ext: '.br',
+        algorithm: 'brotliCompress',
+        deleteOriginFile,
+      })
+    );
+  }
+  return plugins;
+}

+/**
+ * Image resource files used to compress the output of the production environment
+ * 图片压缩
+ * https://github.com/anncwb/vite-plugin-imagemin
+ */
+import viteImagemin from 'vite-plugin-imagemin';
+
+export default function configImageminPlugin() {
+  const imageminPlugin = viteImagemin({
+    gifsicle: {
+      optimizationLevel: 7,
+      interlaced: false,
+    },
+    optipng: {
+      optimizationLevel: 7,
+    },
+    mozjpeg: {
+      quality: 20,
+    },
+    pngquant: {
+      quality: [0.8, 0.9],
+      speed: 4,
+    },
+    svgo: {
+      plugins: [
+        {
+          name: 'removeViewBox',
+        },
+        {
+          name: 'removeEmptyAttrs',
+          active: false,
+        },
+      ],
+    },
+  });
+  return imageminPlugin;
+}

+/**
+ * Introduces component library styles on demand.
+ * 按需引入组件库样式
+ * https://github.com/anncwb/vite-plugin-style-import
+ */
+
+import styleImport from 'vite-plugin-style-import';
+
+export default function configStyleImportPlugin() {
+  return styleImport({
+    libs: [
+      {
+        libraryName: '@arco-design/web-vue',
+        esModule: true,
+        resolveStyle: (name) => {
+          // The use of this part of the component must depend on the parent, so it can be ignored directly.
+          // 这部分组件的使用必须依赖父级，所以直接忽略即可。
+          const ignoreList = [
+            'button-group',
+            'config-provider',
+            'anchor-link',
+            'sub-menu',
+            'menu-item',
+            'menu-item-group',
+            'breadcrumb-item',
+            'form-item',
+            'step',
+            'card-grid',
+            'card-meta',
+            'collapse-panel',
+            'collapse-item',
+            'descriptions-item',
+            'list-item',
+            'list-item-meta',
+            'table-column',
+            'table-column-group',
+            'tab-pane',
+            'tab-content',
+            'timeline-item',
+            'tree-node',
+            'skeleton-line',
+            'skeleton-shape',
+            'grid-item',
+            'carousel-item',
+            'doption',
+            'option',
+            'optgroup',
+            'icon',
+          ];
+          // List of components that need to map imported styles
+          // 需要映射引入样式的组件列表
+          const replaceList = {
+            'typography-text': 'typography',
+            'typography-title': 'typography',
+            'typography-paragraph': 'typography',
+            'typography-link': 'typography',
+            'dropdown-button': 'dropdown',
+            'input-password': 'input',
+            'input-search': 'input',
+            'input-group': 'input',
+            'radio-group': 'radio',
+            'checkbox-group': 'checkbox',
+            'layout-sider': 'layout',
+            'layout-content': 'layout',
+            'layout-footer': 'layout',
+            'layout-header': 'layout',
+            'month-picker': 'date-picker',
+            'range-picker': 'date-picker',
+            'row': 'grid', // 'grid/row.less'
+            'col': 'grid', // 'grid/col.less'
+            'avatar-group': 'avatar',
+            'image-preview': 'image',
+            'image-preview-group': 'image',
+          };
+          if (ignoreList.includes(name)) return '';
+
+          if (name === 'use-form-item') {
+            return `@arco-design/web-vue/es/_hooks/use-form-item.js`;
+          }
+
+          // eslint-disable-next-line no-prototype-builtins
+          // return replaceList.hasOwnProperty(name)
+          //   ? // @ts-ignore
+          //     `@arco-design/web-vue/es/${replaceList[name]}/style/css.js`
+          //   : `@arco-design/web-vue/es/${name}/style/css.js`;
+
+          // less
+          // eslint-disable-next-line no-prototype-builtins
+          return replaceList.hasOwnProperty(name)
+            ? // @ts-ignore
+              `@arco-design/web-vue/es/${replaceList[name]}/style/css.js`
+            : `@arco-design/web-vue/es/${name}/style/index.js`;
+        },
+      },
+    ],
+  });
+}

+/**
+ * Generation packaging analysis
+ * 生成打包分析
+ */
+import visualizer from 'rollup-plugin-visualizer';
+import { isReportMode } from '../utils';
+
+export default function configVisualizerPlugin() {
+  if (isReportMode()) {
+    return visualizer({
+      filename: './node_modules/.cache/visualizer/stats.html',
+      open: true,
+      gzipSize: true,
+      brotliSize: true,
+    });
+  }
+  return [];
+}

+/**
+ * Whether to generate package preview
+ * 是否生成打包报告
+ */
+export default {};
+
+export function isReportMode(): boolean {
+  return process.env.REPORT === 'true';
+}

+import vue from '@vitejs/plugin-vue';
+import vueJsx from '@vitejs/plugin-vue-jsx';
+import { resolve } from 'path';
+import { defineConfig } from 'vite';
+import svgLoader from 'vite-svg-loader';
+import vueSetupExtend from 'vite-plugin-vue-setup-extend';
+
+export default defineConfig({
+  plugins: [vue({ script: { defineModel: true } }), vueJsx(), svgLoader({ svgoConfig: {} }), vueSetupExtend()],
+  resolve: {
+    alias: [
+      {
+        find: '@',
+        replacement: resolve(__dirname, '../src'),
+      },
+      {
+        find: 'assets',
+        replacement: resolve(__dirname, '../src/assets'),
+      },
+      {
+        find: 'vue-i18n',
+        replacement: 'vue-i18n/dist/vue-i18n.cjs.js', // Resolve the i18n warning issue
+      },
+      {
+        find: 'vue',
+        replacement: 'vue/dist/vue.esm-bundler.js', // compile template
+      },
+    ],
+    extensions: ['.ts', '.js'],
+  },
+  build: {
+    rollupOptions: {
+      external: [],
+    },
+  },
+  define: {
+    'process.env': {},
+    '__VUE_PROD_HYDRATION_MISMATCH_DETAILS__': false,
+  },
+  css: {
+    preprocessorOptions: {
+      less: {
+        modifyVars: {
+          hack: `true; @import (reference) "${resolve('src/assets/style/breakpoint.less')}";`,
+        },
+        javascriptEnabled: true,
+      },
+    },
+  },
+});

+import { loadEnv, mergeConfig } from 'vite';
+import baseConfig from './vite.config.base';
+import configCompressPlugin from './plugin/compress';
+import configVisualizerPlugin from './plugin/visualizer';
+import configArcoResolverPlugin from './plugin/arcoResolver';
+import configStyleImportPlugin from './plugin/styleImport';
+import configImageminPlugin from './plugin/imagemin';
+import VitePluginOss from 'vite-plugin-oss';
+
+const config = loadEnv('production', '');
+
+const ossPath = `vendor/admin/asset${new Date()
+  .toLocaleString('zh')
+  .slice(0, 20)
+  .replace(/[\s/:]/g, '')}`;
+export default mergeConfig(
+  {
+    mode: 'production',
+    base: config.VITE_OSS_HOST,
+    server: {
+      https: true,
+    },
+    plugins: [
+      configCompressPlugin('gzip'),
+      configVisualizerPlugin(),
+      configArcoResolverPlugin(),
+      configStyleImportPlugin(),
+      configImageminPlugin(),
+      VitePluginOss({
+        from: `./dist/${ossPath}/**`,
+        accessKeyId: config.VITE_OSS_ACCESS_KEY,
+        accessKeySecret: config.VITE_OSS_ACCESS_SECRET,
+        bucket: config.VITE_OSS_BUCKET,
+        region: config.VITE_OSS_REGION,
+        quitWpOnError: true,
+        deleteOrigin: true,
+        deleteEmptyDir: true,
+      }),
+    ],
+    build: {
+      assetsDir: ossPath,
+      rollupOptions: {
+        output: {
+          manualChunks: {
+            arco: ['@arco-design/web-vue'],
+            chart: ['echarts', 'vue-echarts'],
+            vue: ['vue', 'vue-router', 'pinia', '@vueuse/core', 'vue-i18n'],
+          },
+        },
+      },
+      chunkSizeWarningLimit: 2000,
+    },
+  },
+  baseConfig
+);

+import { mergeConfig } from 'vite';
+import eslint from 'vite-plugin-eslint';
+import baseConfig from './vite.config.base';
+
+export default mergeConfig(
+  {
+    mode: 'development',
+    server: {
+      open: true,
+      https: true,
+      fs: {
+        strict: true,
+      },
+    },
+    plugins: [
+      eslint({
+        cache: false,
+        include: ['src/**/*.ts', 'src/**/*.tsx', 'src/**/*.vue'],
+        exclude: ['node_modules'],
+      }),
+    ],
+    define: {
+      __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: true,
+    },
+  },
+  baseConfig
+);

+import { mergeConfig } from 'vite';
+import baseConfig from './vite.config.base';
+import configCompressPlugin from './plugin/compress';
+import configVisualizerPlugin from './plugin/visualizer';
+import configArcoResolverPlugin from './plugin/arcoResolver';
+import configStyleImportPlugin from './plugin/styleImport';
+import configImageminPlugin from './plugin/imagemin';
+
+export default mergeConfig(
+  {
+    mode: 'production',
+    server: {
+      https: true,
+    },
+    plugins: [
+      configCompressPlugin('gzip'),
+      configVisualizerPlugin(),
+      configArcoResolverPlugin(),
+      configStyleImportPlugin(),
+      configImageminPlugin(),
+    ],
+    build: {
+      rollupOptions: {
+        output: {
+          manualChunks: {
+            arco: ['@arco-design/web-vue'],
+            chart: ['echarts', 'vue-echarts'],
+            vue: ['vue', 'vue-router', 'pinia', '@vueuse/core', 'vue-i18n'],
+          },
+        },
+      },
+      chunkSizeWarningLimit: 2000,
+    },
+  },
+  baseConfig
+);

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8"/>
+    <link rel="shortcut icon" type="image/x-icon" href="https://hising-cdn.hikoon.com/file/20231201/nyaagyzd92c1701419974050pv0hv2xlsme.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <meta name="referrer" content="no-referrer"/>
+    <title>海星试唱</title>
+</head>
+<body>
+<div id="app"></div>
+<script type="module" src="/src/main.ts"></script>
+</body>
+</html>

+{
+  "name": "arco-design-pro-vue",
+  "description": "Arco Design Pro for Vue",
+  "version": "1.0.0",
+  "private": true,
+  "author": "ArcoDesign Team",
+  "license": "MIT",
+  "scripts": {
+    "dev": "vite --config ./config/vite.config.dev.ts",
+    "build": "vue-tsc --noEmit && vite build --config ./config/vite.config.prod.ts",
+    "build:cdn": "vue-tsc --noEmit && vite build --config ./config/vite.config.cdn.ts",
+    "report": "cross-env REPORT=true npm run build",
+    "preview": "npm run build && vite preview --host",
+    "type:check": "vue-tsc --noEmit --skipLibCheck",
+    "lint-staged": "npx lint-staged",
+    "prepare": "husky install"
+  },
+  "lint-staged": {
+    "*.{js,ts,jsx,tsx}": [
+      "prettier --write",
+      "eslint --fix"
+    ],
+    "*.vue": [
+      "stylelint --fix",
+      "prettier --write",
+      "eslint --fix"
+    ],
+    "*.{less,css}": [
+      "stylelint --fix",
+      "prettier --write"
+    ]
+  },
+  "dependencies": {
+    "@arco-design/web-vue": "^2.53.3",
+    "@microsoft/fetch-event-source": "^2.0.1",
+    "@vueuse/core": "^7.3.0",
+    "@vueuse/router": "^10.1.2",
+    "@wangeditor/editor": "^5.1.23",
+    "@wangeditor/editor-for-vue": "^5.1.12",
+    "ali-oss": "^6.17.1",
+    "arco-design-pro-vue": "^2.5.10",
+    "axios": "^1.6.5",
+    "dayjs": "^1.11.2",
+    "echarts": "^5.2.2",
+    "file-saver": "^2.0.5",
+    "js-file-download": "^0.4.12",
+    "lodash": "^4.17.21",
+    "mitt": "^3.0.0",
+    "nanoid": "^3.3.4",
+    "nprogress": "^0.2.0",
+    "pinia": "^2.0.9",
+    "query-string": "^7.0.1",
+    "rabbit-lyrics": "^2.1.1",
+    "vite-plugin-vue-setup-extend": "^0.4.0",
+    "vue": "^3.3.11",
+    "vue-echarts": "^6.0.0",
+    "vue-i18n": "^9.2.0-beta.17",
+    "vue-router": "^4.0.14",
+    "vue3-colorpicker": "^2.3.0",
+    "vue3-video-play": "1.3.1-beta.6"
+  },
+  "devDependencies": {
+    "@arco-design/web-vue": "^2.0.0-beta.7",
+    "@commitlint/cli": "^11.0.0",
+    "@commitlint/config-conventional": "^12.0.1",
+    "@types/ali-oss": "^6.16.3",
+    "@types/file-saver": "^2.0.5",
+    "@types/lodash": "^4.14.177",
+    "@types/nprogress": "^0.2.0",
+    "@typescript-eslint/eslint-plugin": "^5.10.0",
+    "@typescript-eslint/parser": "^5.10.0",
+    "@vitejs/plugin-vue": "^1.9.4",
+    "@vitejs/plugin-vue-jsx": "^1.2.0",
+    "@vue/babel-plugin-jsx": "^1.1.1",
+    "cross-env": "^7.0.3",
+    "eslint": "8.22.0",
+    "eslint-config-airbnb-base": "^14.2.1",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-import-resolver-typescript": "^2.4.0",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-vue": "^8.3.0",
+    "husky": "^7.0.4",
+    "less": "^4.1.2",
+    "lint-staged": "^11.2.6",
+    "prettier": "^2.2.1",
+    "rollup-plugin-visualizer": "^5.6.0",
+    "stylelint": "^13.8.0",
+    "stylelint-config-prettier": "^8.0.2",
+    "stylelint-config-rational-order": "^0.1.2",
+    "stylelint-config-standard": "^20.0.0",
+    "stylelint-order": "^4.1.0",
+    "typescript": "^4.4.4",
+    "unplugin-vue-components": "^0.19.3",
+    "vite": "^2.6.4",
+    "vite-plugin-compression": "^0.5.1",
+    "vite-plugin-eslint": "^1.3.0",
+    "vite-plugin-imagemin": "^0.6.1",
+    "vite-plugin-oss": "^1.2.13",
+    "vite-plugin-style-import": "1.4.1",
+    "vite-svg-loader": "^3.1.0",
+    "vue-tsc": "^0.34.15"
+  },
+  "resolutions": {
+    "bin-wrapper": "npm:bin-wrapper-china",
+    "rollup": "^2.56.3",
+    "gifsicle": "5.2.0"
+  },
+  "peerDependencies": {
+    "@arco-design/web-vue": ">=2.0.0-beta.7",
+    "snabbdom": "^3.5.1"
+  },
+  "volta": {
+    "node": "18.3.0",
+    "yarn": "1.22.19"
+  }
+}
\ No newline at end of file

+<template>
+  <a-config-provider size="small">
+    <router-view />
+  </a-config-provider>
+</template>
+
+<script lang="ts" setup></script>

+<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5.37754 16.9795L12.7498 9.43027C14.7163 7.41663 17.9428 7.37837 19.9564 9.34482C19.9852 9.37297 20.0137 9.40145 20.0418 9.43027L20.1221 9.51243C22.1049 11.5429 22.1049 14.7847 20.1221 16.8152L12.7498 24.3644C10.7834 26.378 7.55686 26.4163 5.54322 24.4498C5.5144 24.4217 5.48592 24.3932 5.45777 24.3644L5.37754 24.2822C3.39468 22.2518 3.39468 19.0099 5.37754 16.9795Z" fill="#12D2AC"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.0479 9.43034L27.3399 16.8974C29.3674 18.9735 29.3674 22.2883 27.3399 24.3644C25.3735 26.3781 22.147 26.4163 20.1333 24.4499C20.1045 24.4217 20.076 24.3933 20.0479 24.3644L12.7558 16.8974C10.7284 14.8213 10.7284 11.5065 12.7558 9.43034C14.7223 7.4167 17.9488 7.37844 19.9624 9.34489C19.9912 9.37304 20.0197 9.40152 20.0479 9.43034Z" fill="#307AF2"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.1321 9.52163L23.6851 13.1599L16.3931 20.627L9.10103 13.1599L12.6541 9.52163C14.6707 7.45664 17.9794 7.4174 20.0444 9.434C20.074 9.46286 20.1032 9.49207 20.1321 9.52163Z" fill="#0057FE"/>
+</g>
+<defs>
+<clipPath id="clip0">
+<rect width="26" height="19" fill="white" transform="translate(3.5 7)"/>
+</clipPath>
+</defs>
+</svg>

+// ==============breakpoint============
+
+// Extra small screen / phone
+@screen-xs: 480px;
+
+// Small screen / tablet
+@screen-sm: 576px;
+
+// Medium screen / desktop
+@screen-md: 768px;
+
+// Large screen / wide desktop
+@screen-lg: 992px;
+
+// Extra large screen / full hd
+@screen-xl: 1200px;
+
+// Extra extra large screen / large desktop
+@screen-xxl: 1600px;

+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  font-size: 14px;
+  background-color: var(--color-bg-1);
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+}
+
+.echarts-tooltip-diy {
+  background: linear-gradient(304.17deg,
+    rgba(253, 254, 255, 0.6) -6.04%,
+  rgba(244, 247, 252, 0.6) 85.2%) !important;
+  border: none !important;
+
+  /* Note: backdrop-filter has minimal browser support */
+
+  border-radius: 6px !important;
+  backdrop-filter: blur(10px) !important;
+
+  .content-panel {
+    display: flex;
+    justify-content: space-between;
+    width: auto;
+    height: 32px;
+    margin-bottom: 4px;
+    padding: 0 9px;
+    line-height: 32px;
+    background: rgba(255, 255, 255, 0.8);
+    border-radius: 4px;
+    box-shadow: 6px 0 20px rgba(34, 87, 188, 0.1);
+  }
+
+  .tooltip-title {
+    margin: 0 0 10px 0;
+  }
+
+  p {
+    margin: 0;
+  }
+
+  .tooltip-title,
+  .tooltip-value {
+    display: flex;
+    align-items: center;
+    color: #1d2129;
+    font-weight: bold;
+    font-size: 13px;
+    line-height: 15px;
+    text-align: right;
+  }
+
+  .tooltip-value {
+    margin-left: 10px;
+  }
+
+  .tooltip-item-icon {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    margin-right: 8px;
+    border-radius: 50%;
+  }
+}
+
+.general-card {
+  border: none;
+  border-radius: 4px;
+
+  > .arco-card-header {
+    border: none;
+
+    > .arco-card-header-title {
+      font-size: 14px;
+      color: var(--color-text-2);
+    }
+  }
+
+  > .arco-card-body {
+    padding: 0 20px 20px 20px;
+  }
+}
+
+.split-line {
+  border-color: rgb(var(--gray-2));
+}
+
+.arco-table-cell {
+  .circle {
+    display: inline-block;
+    width: 6px;
+    height: 6px;
+    margin-right: 4px;
+    background-color: rgb(var(--blue-6));
+    border-radius: 50%;
+
+    &.pass {
+      background-color: rgb(var(--green-6));
+    }
+
+    &.warn {
+      background-color: rgb(var(--yellow-6));
+    }
+
+    &.err {
+      background-color: rgb(var(--red-6));
+    }
+  }
+}
+
+.mt-20 {
+  margin-top: 20px;
+}
+
+.mb-0 {
+  margin-bottom: 0 !important;
+}
+
+.mb-8 {
+  margin-bottom: 8px !important;
+}
+
+.color-grey {
+  color: rgba(44, 44, 44, 0.5)
+}
+
+.justify-center {
+  justify-content: center !important;
+}
+
+
+.retry {
+  width: 860px !important;
+
+  div.arco-modal-header {
+    border-bottom: unset !important;
+  }
+
+  div.arco-modal-body {
+    padding: 0 24px 20px;
+  }
+}
+
+
+.link-hover:hover {
+  cursor: pointer !important;
+}

+<template>
+  <audio
+    v-if="url"
+    v-bind="$attrs"
+    :id="uuid"
+    ref="audioRef"
+    :src="url"
+    class="player"
+    controls
+    controlsList="nodownload noplaybackrate"
+    @play="onPay"
+  />
+</template>
+
+<script lang="ts" setup>
+  import { nanoid } from 'nanoid';
+  // import FileSaver from 'file-saver';
+  import { computed, ref } from 'vue';
+
+  const audioRef = ref({});
+
+  defineProps<{ url: string }>();
+
+  const uuid = computed(() => {
+    return `audio-${nanoid()}`;
+  });
+
+  const onPay = (e: any) => {
+    const audios = document.getElementsByTagName('audio');
+    [].forEach.call(audios, (i: HTMLAudioElement) => i !== e.target && i.pause());
+  };
+
+  const getRef = (): HTMLAudioElement => {
+    return audioRef.value as HTMLAudioElement;
+  };
+
+  defineExpose({ getRef });
+</script>
+
+<style lang="less" scoped>
+  .player {
+    height: 30px;
+    width: 100%;
+    outline: none;
+    display: flex;
+  }
+
+  audio {
+    &::-webkit-media-controls-volume-control-container {
+      display: none !important;
+    }
+
+    &::-webkit-media-controls-rewind-button {
+      display: none !important;
+    }
+  }
+</style>

+<template>
+  <Upload :accept="accept" :custom-request="onUpload" :on-before-upload="onBeforeUpload" :file-list="[]" :show-file-list="false">
+    <template #upload-button>
+      <Avatar :shape="shape" :size="size" trigger-type="mask">
+        <div v-if="!modelValue" class="no-avatar">
+          <icon-plus />
+        </div>
+        <img v-else :src="modelValue" style="width: 100%; height: 100%" alt="" />
+        <template #trigger-icon>
+          <icon-camera />
+        </template>
+      </Avatar>
+    </template>
+  </Upload>
+</template>
+
+<script lang="ts" setup>
+  import useOss from '@/hooks/oss';
+  import { IconCamera, IconPlus } from '@arco-design/web-vue/es/icon';
+  import { Avatar, Message, Upload, UploadRequest, useFormItem } from '@arco-design/web-vue';
+  import { computed, toRefs } from 'vue';
+
+  const props = withDefaults(
+    defineProps<{
+      modelValue?: string;
+      size?: number;
+      shape?: 'circle' | 'square';
+      accept?: string;
+      limit?: number;
+    }>(),
+    {
+      modelValue: '',
+      size: 80,
+      shape: 'circle',
+      accept: 'image/*',
+      limit: 5,
+    }
+  );
+
+  const { shape } = toRefs(props);
+
+  const borderRadius = computed(() => (shape.value === 'square' ? 'unset' : 'var(--border-radius-circle)'));
+
+  const { eventHandlers } = useFormItem();
+
+  const emits = defineEmits(['update:modelValue']);
+
+  const { upload } = useOss();
+
+  const onBeforeUpload = (file: File) => {
+    if (file.size > props.limit * 1024 * 1024) {
+      Message.warning(`${file.name} 文件超过${props.limit}MB，无法上传`);
+      return Promise.resolve(false);
+    }
+
+    return Promise.resolve(file);
+  };
+
+  const onUpload = (option: any): UploadRequest => {
+    const { fileItem } = option;
+
+    if (fileItem.file) {
+      upload(fileItem.file, 'image').then((res) => {
+        emits('update:modelValue', res?.url || '');
+        eventHandlers.value?.onChange?.();
+      });
+    }
+
+    return {};
+  };
+</script>
+
+<style lang="less" scoped>
+  :deep(.arco-avatar-text) {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    display: inline-block;
+    border-radius: v-bind(borderRadius);
+  }
+
+  .arco-avatar-image {
+    transform: unset !important;
+  }
+
+  .no-avatar {
+    top: 0;
+    left: 0;
+    display: flex;
+    position: absolute;
+    align-content: center;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+  }
+</style>

+<template>
+  <a-breadcrumb class="container-breadcrumb">
+    <a-breadcrumb-item>
+      <icon-apps />
+    </a-breadcrumb-item>
+    <a-breadcrumb-item v-for="item in items" :key="item.name">
+      <router-link v-if="getRouteMeta(item)?.isRedirect" :to="{ name: item }">
+        {{ getRouteName(item) }}
+      </router-link>
+      <span v-else> {{ getRouteName(item) }}</span>
+    </a-breadcrumb-item>
+  </a-breadcrumb>
+</template>
+
+<script lang="ts" setup>
+  import { IconApps } from '@arco-design/web-vue/es/icon';
+  import { computed } from 'vue';
+  import { RouteMeta, RouteRecordNormalized, useRouter } from 'vue-router';
+  import { useAppStore } from '@/store';
+  import { storeToRefs } from 'pinia';
+
+  defineProps<{ items: string[] }>();
+
+  const router = useRouter();
+  const appStore = useAppStore();
+
+  const { appMenu } = storeToRefs(appStore);
+
+  const routes = computed(() => {
+    return router.getRoutes() as RouteRecordNormalized[];
+  });
+
+  const getRoute = (name: any) => {
+    return routes.value.find((el) => el.name === name);
+  };
+
+  const getRouteMeta = (name: any): RouteMeta | undefined => {
+    return getRoute(name)?.meta;
+  };
+
+  const getRouteName = (name: any) => {
+    return getRouteMeta(name)?.title || appMenu.value.find((item) => item.name === name)?.label || '';
+  };
+</script>
+
+<style lang="less" scoped>
+  .container-breadcrumb {
+    margin: 16px 0;
+
+    :deep(.arco-breadcrumb-item) {
+      color: rgb(var(--gray-6));
+
+      &:last-child {
+        color: rgb(var(--gray-8));
+      }
+    }
+  }
+</style>

+<template>
+  <VCharts v-if="renderChart" :option="options" :autoresize="autoresize" :style="{ width, height }" />
+</template>
+
+<script lang="ts">
+  import { computed, defineComponent, nextTick, ref } from 'vue';
+  import VCharts from 'vue-echarts';
+  import { useAppStore } from '@/store';
+
+  export default defineComponent({
+    components: {
+      VCharts,
+    },
+    props: {
+      options: {
+        type: Object,
+        default() {
+          return {};
+        },
+      },
+      autoresize: {
+        type: Boolean,
+        default: true,
+      },
+      width: {
+        type: String,
+        default: '100%',
+      },
+      height: {
+        type: String,
+        default: '100%',
+      },
+    },
+    setup() {
+      const appStore = useAppStore();
+      const theme = computed(() => {
+        if (appStore.theme === 'dark') return 'dark';
+        return '';
+      });
+      const renderChart = ref(false);
+      // wait container expand
+      nextTick(() => {
+        renderChart.value = true;
+      });
+      return {
+        theme,
+        renderChart,
+      };
+    },
+  });
+</script>
+
+<style scoped lang="less"></style>

+<template>
+  <a-button :loading="loading" @click="onClick">
+    <template #icon>
+      <icon-download />
+    </template>
+    {{ label }}
+  </a-button>
+</template>
+
+<script lang="ts" setup>
+  import { IconDownload } from '@arco-design/web-vue/es/icon';
+  import useLoading from '@/hooks/loading';
+
+  const props = withDefaults(defineProps<{ label?: string; onDownload: () => Promise<void> }>(), { label: '导出' });
+
+  const { loading, setLoading } = useLoading(false);
+
+  const onClick = () => {
+    setLoading(true);
+    props.onDownload().finally(() => setLoading(false));
+  };
+</script>
+
+<style scoped></style>

+<script setup lang="ts">
+  import TableColumn from '@/components/filter/table-column.vue';
+  import { Layout, LayoutSider, LayoutContent, Image, Form, FormItem, TypographyText, TableData } from '@arco-design/web-vue';
+  import { isString, isUndefined } from '@/utils/is';
+  import { get } from 'lodash';
+
+  const props = withDefaults(
+    defineProps<{
+      title?: string;
+      dataIndex?: string;
+      row?: string;
+      coverIndex?: string;
+      nameIndex?: string;
+      subIndex?: string;
+      tagIndex?: string;
+      projectIndex?: string;
+      userIndex?: string;
+      hideSubTitle?: boolean;
+    }>(),
+    {
+      coverIndex: 'cover',
+      nameIndex: 'song_name',
+      subIndex: 'sub_title',
+      tagIndex: 'tags',
+      projectIndex: 'project',
+      userIndex: 'user',
+    }
+  );
+
+  const getRow = (record: TableData): TableData | undefined => {
+    if (isUndefined(props.row)) {
+      return record;
+    }
+
+    if (isString(props.row)) {
+      return get(record, props.row);
+    }
+
+    return props.row;
+  };
+
+  const getRowColumn = (record: TableData, key: string) => getRow(record)?.[key];
+</script>
+
+<template>
+  <TableColumn v-bind="$attrs" :title="title" :data-index="dataIndex">
+    <template #default="{ record }">
+      <Layout>
+        <LayoutSider :width="104" class="left">
+          <Image show-loader :height="100" :width="100" fit="cover" :src="getRowColumn(record, coverIndex)" />
+        </LayoutSider>
+        <LayoutContent>
+          <Form auto-label-width label-align="left" :model="record" style="height: 100%; justify-content: space-between">
+            <FormItem label="歌曲名称" :show-colon="true" row-class="mb-0">
+              <TypographyText :ellipsis="{ rows: 1, showTooltip: true }">
+                {{ getRowColumn(record, nameIndex) }}
+              </TypographyText>
+            </FormItem>
+            <FormItem v-if="!hideSubTitle" label="推荐语" :show-colon="true" row-class="mb-0">
+              <TypographyText :ellipsis="{ rows: 1, showTooltip: true }">
+                {{ getRowColumn(record, subIndex) }}
+              </TypographyText>
+            </FormItem>
+            <FormItem label="歌曲标签" :show-colon="true" row-class="mb-0">
+              <TypographyText :ellipsis="{ rows: 1, showTooltip: true }">
+                {{
+                  getRowColumn(record, tagIndex)
+                    .map((item: any) => item.name)
+                    .join('、')
+                }}
+              </TypographyText>
+            </FormItem>
+            <FormItem v-if="getRowColumn(record, projectIndex)" label="关联厂牌" :show-colon="true" row-class="mb-0">
+              <TypographyText :ellipsis="{ rows: 1, showTooltip: true }">
+                {{ getRowColumn(record, projectIndex)?.name }}
+              </TypographyText>
+            </FormItem>
+            <FormItem v-else label="关联用户" :show-colon="true" row-class="mb-0">
+              <TypographyText :ellipsis="{ rows: 1, showTooltip: true }">
+                {{ getRowColumn(record, userIndex)?.nick_name }}
+              </TypographyText>
+            </FormItem>
+          </Form>
+        </LayoutContent>
+      </Layout>
+    </template>
+  </TableColumn>
+</template>
+
+<style lang="less" scoped>
+  :deep(.arco-typography) {
+    margin-bottom: 0;
+    width: 100%;
+    text-align: left;
+  }
+
+  .left {
+    margin-top: 5px;
+    box-shadow: unset;
+    margin-right: 5px;
+  }
+</style>

+<script setup lang="ts">
+  import { Avatar } from '@arco-design/web-vue';
+  import TableColumn from '@/components/filter/table-column.vue';
+  import { get } from 'lodash';
+
+  const props = defineProps<{ title?: string; dataIndex?: string; width?: number }>();
+
+  const getValue = (record: object) => {
+    return get(record, props.dataIndex || '', '');
+  };
+</script>
+
+<template>
+  <TableColumn v-bind="$attrs" :title="title" :data-index="dataIndex" :width="width || 60" :tooltip="false">
+    <template #default="{ record }">
+      <Avatar :size="40" shape="circle" :image-url="getValue(record)" />
+    </template>
+  </TableColumn>
+</template>
+
+<style scoped lang="less"></style>

+<script setup lang="ts">
+  import { get } from 'lodash';
+  import TableColumn from '@/components/filter/table-column.vue';
+  import dayjs from 'dayjs';
+
+  withDefaults(defineProps<{ title?: string; dataIndex?: string; split?: boolean }>(), { split: true });
+  const getValue = (record: object, path: string) => {
+    return get(record, path, '');
+  };
+</script>
+
+<template>
+  <TableColumn v-bind="$attrs" :title="title" :data-index="dataIndex">
+    <template #default="{ record }">
+      <template v-if="dataIndex && !getValue(record, dataIndex)">
+        <span style="color: rgba(0, 0, 0, 0.3)">无</span>
+      </template>
+      <template v-else-if="split">
+        <div>{{ dayjs(getValue(record, dataIndex))?.format('YYYY-MM-DD') || '' }}</div>
+        <div>{{ dayjs(getValue(record, dataIndex))?.format('HH:mm:ss') || '' }}</div>
+      </template>
+      <template v-else>{{ getValue(record, dataIndex) }}</template>
+    </template>
+  </TableColumn>
+</template>
+
+<style scoped lang="less"></style>

+<script setup lang="ts">
+  import { Option } from '@/types/global';
+  import { eq, get } from 'lodash';
+  import TableColumn from '@/components/filter/table-column.vue';
+
+  const props = defineProps<{ title?: string; dataIndex?: string; option: Option[]; darkValue?: string | number }>();
+
+  const getValue = (record: object) => {
+    return get(record, props.dataIndex || '', '');
+  };
+</script>
+
+<template>
+  <TableColumn v-bind="$attrs" :title="title" :data-index="dataIndex">
+    <template #default="{ record }">
+      <template v-if="darkValue !== undefined && eq(getValue(record), darkValue)">
+        <span style="color: rgba(44, 44, 44, 0.5)"> {{ option.find((item) => item.value === getValue(record))?.label || '未知' }}</span>
+      </template>
+      <template v-else> {{ option.find((item) => item.value === getValue(record))?.label || '未知' }}</template>
+    </template>
+  </TableColumn>
+</template>
+
+<style scoped lang="less"></style>

+<script setup lang="ts">
+  import TableColumn from '@/components/filter/table-column.vue';
+  import { Link } from '@arco-design/web-vue';
+  import { AnyObject } from '@/types/global';
+
+  defineProps<{
+    title?: string;
+    dataIndex?: string;
+    linkStyle?: object;
+    formatter: (record: AnyObject) => string;
+    to: (record: AnyObject) => void;
+  }>();
+</script>
+
+<template>
+  <TableColumn v-bind="$attrs" :title="title" :data-index="dataIndex">
+    <template #default="{ record }">
+      <Link v-if="!!formatter(record)" class="link" :style="linkStyle" :hoverable="false" @click.stop="to(record)">
+        {{ formatter(record) }}
+      </Link>
+      <span v-else style="color: rgba(44, 44, 44, 0.5)">无</span>
+    </template>
+  </TableColumn>
+</template>
+
+<style scoped lang="less">
+  .link:hover {
+    cursor: pointer;
+  }
+</style>

+<script setup lang="ts">
+  import { eq, get } from 'lodash';
+  import TableColumn from '@/components/filter/table-column.vue';
+
+  const props = withDefaults(
+    defineProps<{ title?: string; dataIndex?: string; darkValue?: string | number; prefix?: string; suffix?: string }>(),
+    { prefix: '', suffix: '' }
+  );
+  const getValue = (record: object) => {
+    return get(record, props.dataIndex || '', '');
+  };
+</script>
+
+<template>
+  <TableColumn v-bind="$attrs" :title="title" :data-index="dataIndex">
+    <template #default="{ record }">
+      <template v-if="darkValue !== undefined && eq(getValue(record), darkValue)">
+        <span style="color: rgba(44, 44, 44, 0.5)">{{ `${prefix} 0 ${suffix}` }}</span>
+      </template>
+      <template v-else> {{ `${prefix} ${getValue(record)} ${suffix}` }} </template>
+    </template>
+  </TableColumn>
+</template>
+
+<style scoped lang="less"></style>

+<script setup lang="ts">
+  import { get } from 'lodash';
+  import TableColumn from '@/components/filter/table-column.vue';
+
+  defineProps<{ title?: string; dataIndex?: string; areaIndex?: string }>();
+
+  const getValue = (record: object, path: string) => {
+    return get(record, path, '');
+  };
+</script>
+
+<template>
+  <TableColumn v-bind="$attrs" :title="title" :data-index="dataIndex">
+    <template #default="{ record }"> {{ `(+${getValue(record, areaIndex)}) ${getValue(record, dataIndex)}` }}</template>
+  </TableColumn>
+</template>
+
+<style scoped lang="less"></style>

+<script setup lang="ts">
+  import { GridItem, FormItem } from '@arco-design/web-vue';
+</script>
+
+<template>
+  <GridItem>
+    <FormItem class="form-item" row-class="mb-0" v-bind="$attrs" :show-colon="true">
+      <slot />
+    </FormItem>
+  </GridItem>
+</template>
+
+<style scoped lang="less">
+  .form-item {
+    :deep(.arco-picker) {
+      width: 100%;
+    }
+  }
+</style>

+<script setup lang="ts">
+  import { AnyObject } from '@/types/global';
+  import { Layout, LayoutContent, LayoutSider, Form, Space, Grid } from '@arco-design/web-vue';
+  import IconButton from '@/components/icon-button/index.vue';
+
+  type PropType = {
+    model?: AnyObject;
+    loading?: boolean;
+    searchLabel?: string;
+    searchIcon?: string;
+    resetLabel?: string;
+    resetIcon?: string;
+    hideSearch?: boolean;
+    hideReset?: boolean;
+    inline?: boolean;
+    split?: number;
+    size?: 'mini' | 'small' | 'medium' | 'large';
+    hideDivider?: boolean;
+  };
+
+  const props = withDefaults(defineProps<PropType>(), {
+    loading: false,
+    searchLabel: '搜索',
+    searchIcon: 'search',
+    resetLabel: '重置',
+    resetIcon: 'refresh',
+    hideSearch: false,
+    hideReset: false,
+    hideDivider: false,
+    inline: false,
+    split: 3,
+    size: 'small',
+  });
+  defineEmits<{ (e?: 'search'): void; (e?: 'reset'): void }>();
+
+  const layoutStyle = { marginBottom: '12px' };
+  const layoutRightStyle = props.hideSearch && props.hideReset ? {} : { borderLeft: '1px solid var(--color-neutral-3)' };
+
+  if (!props.hideDivider) {
+    Object.assign(layoutStyle, { paddingBottom: '12px', borderBottom: '1px solid var(--color-neutral-3)' });
+  }
+</script>
+
+<template>
+  <Layout :style="layoutStyle">
+    <LayoutContent>
+      <Form auto-label-width :model="model" label-align="right" :size="size">
+        <Grid :cols="split as number" :col-gap="12" :row-gap="12">
+          <slot :size="size" />
+        </Grid>
+      </Form>
+    </LayoutContent>
+    <LayoutSider class="right" :style="layoutRightStyle">
+      <Space :size="12" :direction="inline ? 'horizontal' : 'vertical'">
+        <IconButton
+          v-if="!hideSearch"
+          :size="size"
+          :icon="searchIcon"
+          :label="searchLabel"
+          type="primary"
+          :loading="loading"
+          @click="$emit('search')"
+        />
+        <IconButton v-if="!hideReset" :size="size" :icon="resetIcon" :label="resetLabel" @click="$emit('reset')" />
+        <slot name="button" />
+      </Space>
+    </LayoutSider>
+  </Layout>
+</template>
+
+<style scoped lang="less">
+  .right {
+    border-left: 1px solid var(--color-neutral-3);
+    margin-left: 12px;
+    padding-left: 12px;
+    box-shadow: unset;
+    width: auto !important;
+  }
+</style>

+<script setup lang="ts">
+  import { Space } from '@arco-design/web-vue';
+  import TableColumn from '@/components/filter/table-column.vue';
+
+  withDefaults(defineProps<{ title?: string; dataIndex?: string; direction?: 'vertical' | 'horizontal' }>(), {
+    direction: 'horizontal',
+  });
+</script>
+
+<template>
+  <TableColumn v-bind="$attrs" :title="title" :data-index="dataIndex" :tooltip="false">
+    <template #default="{ record, rowIndex }">
+      <Space :direction="direction" fill>
+        <slot name="default" :record="record" :index="rowIndex" />
+      </Space>
+    </template>
+  </TableColumn>
+</template>
+
+<style scoped lang="less"></style>

+<script setup lang="ts">
+  import TableColumn from '@/components/filter/table-column.vue';
+
+  const props = withDefaults(
+    defineProps<{
+      title?: string;
+    }>(),
+    {}
+  );
+</script>
+
+<template>
+  <TableColumn v-bind="$attrs" :title="title">
+    <template #default="{ record }">
+      <div class="box">
+        <a-image height="60" fit="fill" :src="record.icon" />
+      </div>
+    </template>
+  </TableColumn>
+</template>
+
+<style scoped lang="less">
+  .box {
+    height: 60px;
+  }
+</style>

+<script setup lang="ts">
+  import TableColumn from '@/components/filter/table-column.vue';
+
+  const props = withDefaults(
+    defineProps<{
+      title?: string;
+    }>(),
+    {}
+  );
+
+  const getIcon = (record): string => {
+    return record.frame?.url;
+  };
+
+  const getBorder = (record): string => {
+    return record.frame?.color;
+  };
+</script>
+
+<template>
+  <TableColumn v-bind="$attrs" :title="title">
+    <template #default="{ record }">
+      <div v-if="record.frame" class="box" :style="{ border: `2px solid ${getBorder(record)}` }">
+        <div class="iconBox">
+          <a-image height="22" fit="fill" style="margin-top: -2px" :src="getIcon(record)" />
+        </div>
+      </div>
+      <div v-else class="boxNull">无</div>
+    </template>
+  </TableColumn>
+</template>
+
+<style scoped lang="less">
+  .box {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    background-color: #f2f3f5;
+    position: relative;
+
+    .iconBox {
+      display: flex;
+      align-items: center;
+      height: 22px;
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      z-index: 1;
+      overflow: hidden;
+    }
+  }
+
+  .boxNull {
+    width: 50px;
+    height: 50px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+</style>

+<script setup lang="ts">
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  import { TableColumn, TableData, TableSortable } from '@arco-design/web-vue';
+
+  type PropType = { title?: string; dataIndex?: string; tooltip?: boolean; ellipsis?: boolean; hasSort?: boolean };
+
+  const sortable = { sortDirections: ['ascend', 'descend'], sorter: true, defaultSortOrder: '' } as TableSortable;
+
+  withDefaults(defineProps<PropType>(), { tooltip: true, hasSort: false });
+</script>
+
+<template>
+  <TableColumn
+    v-bind="$attrs"
+    :title="title"
+    :data-index="dataIndex"
+    :tooltip="tooltip as boolean"
+    :ellipsis="ellipsis || tooltip as boolean"
+    :sortable="hasSort ? sortable : undefined as any"
+  >
+    <template v-if="$slots.default" #cell="{ record, rowIndex }: { record: TableData, rowIndex: number }">
+      <slot name="default" :record="record" :index="rowIndex" />
+    </template>
+  </TableColumn>
+</template>
+
+<style scoped lang="less"></style>

+<script setup lang="ts">
+  import { computed, ref } from 'vue';
+  import usePagination from '@/hooks/pagination';
+  import { Table, Row, Col } from '@arco-design/web-vue';
+  import { AnyObject, sizeType } from '@/types/global';
+
+  type PropType = {
+    loading?: boolean;
+    rowKey?: string;
+    hoverType?: string;
+    hidePage?: boolean;
+    simplePage?: boolean;
+    pageSize?: number;
+    size?: sizeType;
+    onQuery: (params?: AnyObject) => Promise<any>;
+  };
+
+  defineEmits<{
+    (e: 'rowSort', dataIndex: string, direction: string): void;
+  }>();
+
+  const props = withDefaults(defineProps<PropType>(), { loading: false, rowKey: 'id', size: 'small', pageSize: 20 });
+  const { pagination, setPage, setPageSize, setTotal } = usePagination({
+    simple: props.simplePage,
+    size: props.size,
+    pageSize: props.pageSize,
+  });
+  const list = ref<any[]>([]);
+  const tableRef = ref();
+
+  const pageQueryParams = computed(() => {
+    return props.hidePage ? {} : { page: pagination.value.current, pageSize: pagination.value.pageSize };
+  });
+
+  const hoverType = computed(() => props.hoverType || 'default');
+
+  const onFetch = () =>
+    props.onQuery(pageQueryParams.value).then(({ data, meta }) => {
+      list.value = data;
+      setPage(props.hidePage ? 1 : meta.current);
+      setTotal(props.hidePage ? data.length : meta.total);
+      setPageSize(props.hidePage ? pagination.value.pageSize : meta.limit);
+    });
+
+  const onPageChange = (page: number) => {
+    setPage(page || 1);
+    onFetch();
+  };
+
+  const onSizeChange = (size: number) => {
+    setPageSize(size);
+    setPage(1);
+    onFetch();
+  };
+
+  const onPush = (row: unknown) => {
+    list.value.unshift(row);
+    // eslint-disable-next-line no-plusplus
+    ++pagination.value.total;
+  };
+
+  const onRemove = (index: number) => {
+    list.value.splice(index, 1);
+    // eslint-disable-next-line no-plusplus
+    --pagination.value.total;
+  };
+
+  const resetSort = () => tableRef.value?.clearSorters();
+
+  const getPagination = () => pagination.value;
+
+  const getCount = () => pagination.value.total;
+
+  const getList = () => list.value;
+
+  const formatSortType = (type: string): string => type?.replace('end', '') ?? '';
+
+  defineExpose({ onFetch, onPageChange, onSizeChange, resetSort, getCount, getPagination, getList, onPush, onRemove });
+</script>
+
+<template>
+  <Row justify="space-between" align="center">
+    <Col class="table-tool-item" :span="16" style="text-align: left">
+      <slot name="tool" :size="size" />
+    </Col>
+    <Col class="table-tool-item" :span="8" style="text-align: right">
+      <slot name="tool-right" :size="size" />
+    </Col>
+  </Row>
+  <Table
+    ref="tableRef"
+    v-bind="$attrs"
+    :row-key="rowKey as string"
+    :loading="loading as boolean"
+    :size="size as sizeType"
+    :data="list"
+    :pagination="hidePage ? false : pagination"
+    :bordered="false"
+    :table-layout-fixed="true"
+    @page-change="onPageChange"
+    @page-size-change="onSizeChange"
+    @sorter-change="(dataIndex:string, direction:string) => $emit('rowSort', dataIndex, formatSortType(direction))"
+  >
+    <template #columns>
+      <slot />
+    </template>
+  </Table>
+</template>
+
+<style lang="less" scoped>
+  :deep(.arco-table-cell) {
+    padding: 5px 8px !important;
+
+    :hover {
+      cursor: v-bind(hoverType);
+    }
+
+    & > .arco-table-td-content .arco-btn-size-small {
+      padding: 5px !important;
+    }
+  }
+
+  :deep(.table-tool-item) {
+    > * {
+      margin-bottom: 12px !important;
+    }
+  }
+</style>

+<script setup lang="ts">
+  import { eq, get } from 'lodash';
+  import TableColumn from '@/components/filter/table-column.vue';
+
+  const props = defineProps<{ title?: string; dataIndex?: string }>();
+
+  const getValue = (record: object) => {
+    return get(record, props.dataIndex || '', '');
+  };
+</script>
+
+<template>
+  <TableColumn v-bind="$attrs" :title="title" :data-index="dataIndex">
+    <template #default="{ record }">
+      <span v-if="eq(getValue(record), 1)">音乐人</span>
+      <span v-else-if="[2, 3].includes(Number(getValue(record)))">经纪人</span>
+      <span v-else style="color: rgba(44, 44, 44, 0.5)">未认证</span>
+    </template>
+  </TableColumn>
+</template>
+
+<style scoped lang="less"></style>

+<script setup lang="ts">
+  import { Avatar, Link } from '@arco-design/web-vue';
+  import TableColumn from '@/components/filter/table-column.vue';
+  import { User } from '@/utils/model';
+  import { isString, isUndefined } from '@/utils/is';
+  import openNewTab from '@/utils/route-blank';
+  import { get } from 'lodash';
+  import { useRouter } from 'vue-router';
+
+  const props = withDefaults(
+    defineProps<{
+      title?: string;
+      dataIndex?: string;
+      user?: string | Pick<User, 'id' | 'nick_name' | 'real_name' | 'identity'>;
+      showHref?: boolean;
+      showRealName?: boolean;
+      showAvatar?: boolean;
+      darkValue?: string;
+      nickIndex?: string;
+      realIndex?: string;
+      avatarIndex?: string;
+      roleIndex?: string;
+      linkStyle?: object;
+      prefix?: string;
+    }>(),
+    {
+      dataIndex: 'id',
+      nickIndex: 'nick_name',
+      realIndex: 'real_name',
+      avatarIndex: 'avatar',
+      roleIndex: 'identity',
+      prefix: '',
+    }
+  );
+
+  const router = useRouter();
+
+  const getUser = (record: object): Pick<User, 'id' | 'nick_name' | 'real_name' | 'identity'> | undefined => {
+    if (isUndefined(props.user)) {
+      return record as User;
+    }
+
+    if (isString(props.user)) {
+      return get(record, props.user);
+    }
+
+    return get(props, 'user') as User;
+  };
+
+  const getName = (record: object): string => {
+    const user = getUser(record);
+
+    if (!user) {
+      return '';
+    }
+
+    if (props.showRealName) {
+      return `${props.prefix}${get(user, props.nickIndex, '')}(${get(user, props.realIndex)})`;
+    }
+
+    return props.prefix + get(user, props.nickIndex, '');
+  };
+
+  const onHref = (record: object) => {
+    const user = getUser(record);
+    const key = get(record, props.dataIndex);
+    const identity = get(user, props.roleIndex);
+
+    if (identity === 1) {
+      // return router.push({ name: 'user-singer-show', params: { id: key } });
+      openNewTab(router, 'user-singer-show', { id: key });
+    }
+    if ([2, 3].includes(Number(identity))) {
+      // return router.push({ name: 'user-business-show', params: { id: key } });
+      openNewTab(router, 'user-business-show', { id: key });
+    }
+    // return router.push({ name: 'user-register-show', params: { id: key } });
+    openNewTab(router, 'user-register-show', { id: key });
+  };
+</script>
+
+<template>
+  <TableColumn v-bind="$attrs" :title="title" :data-index="dataIndex">
+    <template #default="{ record }">
+      <template v-if="darkValue !== undefined && getName(record) === darkValue">
+        <span style="color: rgba(44, 44, 44, 0.5)">无</span>
+      </template>
+      <template v-else>
+        <Avatar v-if="showAvatar" style="margin-right: 8px" :size="34" shape="circle" :image-url="getUser(record)?.[avatarIndex]" />
+        <Link v-if="showHref" class="link-hover" :style="linkStyle" :hoverable="false" @click.stop="onHref(record)">
+          {{ getName(record) }}
+        </Link>
+        <template v-else>{{ getName(record) }}</template>
+      </template>
+    </template>
+  </TableColumn>
+</template>
+
+<style scoped lang="less"></style>

+<template>
+  <Button v-bind="$attrs" :type="type" :status="status" @click="() => emits('click')">
+    <template v-if="icon && iconAlign === 'left'" #icon>
+      <component :is="Icon[iconName]" />
+    </template>
+    {{ label }}
+    <component :is="Icon[iconName]" v-if="icon && iconAlign === 'right'" :size="$attrs['size'] || 'small'" style="margin-left: 6px" />
+  </Button>
+</template>
+
+<script lang="ts" setup>
+  import { Button } from '@arco-design/web-vue';
+  import * as Icon from '@arco-design/web-vue/es/icon';
+  import { computed } from 'vue';
+  import { camelCase, upperFirst } from 'lodash';
+
+  const props = withDefaults(
+    defineProps<{
+      label?: string;
+      icon?: string;
+      iconAlign?: 'left' | 'right';
+      type?: 'primary' | 'secondary' | 'outline' | 'dashed' | 'text';
+      shape?: 'square' | 'round' | 'circle';
+      status?: 'normal' | 'warning' | 'success' | 'danger';
+    }>(),
+    {
+      iconAlign: 'left',
+      type: 'secondary',
+      shape: 'square',
+      status: 'normal',
+    }
+  );
+
+  const emits = defineEmits(['click']);
+
+  const iconName = computed(() => upperFirst(camelCase(`icon-${props.icon}`)));
+</script>
+
+<style scoped></style>

+<template>
+  <Upload :accept="accept" :custom-request="onUpload" :file-list="[]" :show-file-list="false">
+    <template #upload-button>
+      <div class="arco-upload-list-item">
+        <Image
+          v-if="modelValue"
+          :style="{ minHeight }"
+          :width="width"
+          :height="height"
+          :preview="false"
+          :src="modelValue"
+          :fit="fit"
+          show-loader
+        />
+        <div v-else :style="style" class="arco-upload-picture-card">
+          <div class="arco-upload-picture-card-text">
+            <IconPlus />
+          </div>
+        </div>
+      </div>
+    </template>
+  </Upload>
+</template>
+
+<script lang="ts" setup>
+  import useOss from '@/hooks/oss';
+  import { computed } from 'vue';
+  import { IconPlus } from '@arco-design/web-vue/es/icon';
+  import { UploadRequest, useFormItem, Upload, Image } from '@arco-design/web-vue';
+
+  type PropType = {
+    modelValue?: string;
+    accept?: string;
+    width?: number | string;
+    height?: number | string;
+    minHeight?: string;
+    fit?: 'none' | 'contain' | 'cover' | 'fill' | 'scale-down' | undefined;
+  };
+
+  const props = withDefaults(defineProps<PropType>(), {
+    modelValue: '',
+    accept: 'image/*',
+    width: 80,
+    height: 'auto',
+    minHeight: '100%',
+    fit: 'cover',
+  });
+
+  const emits = defineEmits(['update:modelValue']);
+  const { eventHandlers } = useFormItem();
+
+  const style = computed(() => {
+    return {
+      width: `${props.width}px`,
+      height: props.height.constructor === String ? 'auto' : `${props.height}px`,
+      maxWidth: '100%',
+      maxHeight: '100%',
+      minHeight: '80px',
+    };
+  });
+
+  const { upload } = useOss();
+
+  const onUpload = (option: any): UploadRequest => {
+    const { fileItem } = option;
+
+    if (fileItem.file) {
+      upload(fileItem.file, 'image').then((res) => {
+        emits('update:modelValue', res?.url || '');
+        eventHandlers.value?.onChange?.();
+      });
+    }
+
+    return {};
+  };
+</script>
+
+<style lang="less" scoped>
+  :deep(.arco-avatar-text) {
+    width: 100%;
+    height: 100%;
+  }
+
+  :deep(.arco-upload-list-item) {
+    margin-top: 0 !important;
+  }
+
+  .no-avatar {
+    position: absolute;
+    display: flex;
+    align-content: center;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+  }
+</style>

+import { App } from 'vue';
+import { use } from 'echarts/core';
+import { CanvasRenderer } from 'echarts/renderers';
+import { BarChart, LineChart, PieChart, RadarChart } from 'echarts/charts';
+import { DataZoomComponent, GraphicComponent, GridComponent, LegendComponent, TooltipComponent } from 'echarts/components';
+import Chart from './chart/index.vue';
+import Breadcrumb from './breadcrumb/index.vue';
+import AvatarUpload from './avatar-upload/index.vue';
+import InputUpload from './input-upload/index.vue';
+import ImageUpload from './image-upload/index.vue';
+import ExportButton from './export-button/index.vue';
+import IconButton from './icon-button/index.vue';
+import AudioPlayer from './audio-player/index.vue';
+import ProjectSelect from './project-select/index.vue';
+import UserLink from './user-link/index.vue';
+import TagSelect from './tag-select/index.vue';
+import UserSelect from './user-select/index.vue';
+import PermissionSelect from './permission-select/index.vue';
+import FilterSearch from './filter/search.vue';
+import FilterSearchItem from './filter/search-item.vue';
+import FilterTable from './filter/table.vue';
+import FilterTableColumn from './filter/table-column.vue';
+import PageView from './page-view/index.vue';
+
+// import SvgIcon from './svg-icon/index.vue';
+
+// Manually introduce ECharts modules to reduce packing size
+
+use([
+  CanvasRenderer,
+  BarChart,
+  LineChart,
+  PieChart,
+  RadarChart,
+  GridComponent,
+  TooltipComponent,
+  LegendComponent,
+  DataZoomComponent,
+  GraphicComponent,
+]);
+
+export default {
+  install(Vue: App) {
+    Vue.component('Chart', Chart);
+    Vue.component('Breadcrumb', Breadcrumb);
+    Vue.component('AvatarUpload', AvatarUpload);
+    Vue.component('InputUpload', InputUpload);
+    Vue.component('ImageUpload', ImageUpload);
+    Vue.component('ExportButton', ExportButton);
+    Vue.component('IconButton', IconButton);
+    Vue.component('AudioPlayer', AudioPlayer);
+    Vue.component('ProjectSelect', ProjectSelect);
+    Vue.component('UserLink', UserLink);
+    Vue.component('TagSelect', TagSelect);
+    Vue.component('UserSelect', UserSelect);
+    Vue.component('PermissionSelect', PermissionSelect);
+    Vue.component('FilterSearch', FilterSearch);
+    Vue.component('FilterSearchItem', FilterSearchItem);
+    Vue.component('FilterTable', FilterTable);
+    Vue.component('FilterTableColumn', FilterTableColumn);
+    Vue.component('PageView', PageView);
+    // Vue.component('SvgIcon', SvgIcon);
+  },
+};

+<template>
+  <Upload
+    v-bind="$attrs"
+    :on-before-upload="onBeforeUpload"
+    :custom-request="onUpload"
+    :file-list="[]"
+    :show-file-list="false"
+    style="width: 100%"
+  >
+    <template #upload-button>
+      <Input :model-value="modelValue" :readonly="true" :placeholder="placeholder">
+        <template #suffix>
+          <Progress v-if="loading" :percent="percent" size="mini" />
+          <IconUpload v-else />
+        </template>
+      </Input>
+    </template>
+  </Upload>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { IconUpload } from '@arco-design/web-vue/es/icon';
+  import useLoading from '@/hooks/loading';
+  import useOss from '@/hooks/oss';
+  import { Input, Message, Progress, Upload, UploadRequest, useFormItem } from '@arco-design/web-vue';
+  import { startsWith } from 'lodash';
+
+  type FileType = { name: string; url: string; size: number; type: string; width?: number; height?: number; duration?: number };
+
+  const props = defineProps({
+    modelValue: { type: String, default: '' },
+    prefix: { type: String, default: 'file' },
+    limit: { type: Number, default: 0 },
+    placeholder: { type: String, default: '请选择' },
+  });
+
+  const emits = defineEmits<{
+    (e: 'update:modelValue', value: string): void;
+    (e: 'success', value: FileType): void;
+    (e: 'choose-file', value: File): void;
+  }>();
+  const { eventHandlers } = useFormItem();
+
+  const { loading, setLoading } = useLoading(false);
+  const { upload } = useOss();
+  const percent = ref<number>(0);
+
+  const onBeforeUpload = (file: File & { width?: number; height?: number; duration?: number }) => {
+    if (props.limit !== 0 && file.size > props.limit * 1024 * 1024) {
+      Message.warning(`${file.name} 文件超过${props.limit}MB，无法上传`);
+      return Promise.resolve(false);
+    }
+
+    if (startsWith(file.type, 'image/')) {
+      const imgObj = new Image();
+      imgObj.src = URL.createObjectURL(file);
+      imgObj.onload = () => {
+        file.width = imgObj.width;
+        file.height = imgObj.height;
+      };
+    }
+
+    if (startsWith(file.type, 'audio/') || startsWith(file.type, 'video/')) {
+      const audioElement = new Audio(URL.createObjectURL(file));
+      audioElement.addEventListener('loadedmetadata', () => {
+        file.duration = audioElement.duration * 1000;
+      });
+    }
+
+    return Promise.resolve(file);
+  };
+
+  const onProgress = (p: number) => {
+    percent.value = p;
+  };
+
+  const onUpload = (option: any): UploadRequest => {
+    const { fileItem } = option;
+
+    if (fileItem.file) {
+      setLoading(true);
+      // eslint-disable-next-line vue/custom-event-name-casing
+      emits('choose-file', fileItem.file as File);
+      upload(fileItem.file, props.prefix, onProgress)
+        .then((res) => {
+          emits('update:modelValue', res?.url || '');
+          eventHandlers.value?.onChange?.();
+          fileItem.percent = 100;
+          fileItem.url = res?.url || '';
+          fileItem.status = 'done';
+          emits('success', {
+            name: fileItem.name,
+            url: fileItem.url,
+            size: fileItem.file.size,
+            type: fileItem.file.type,
+            width: fileItem.file.width || 0,
+            height: fileItem.file.height || 0,
+            duration: fileItem.file.duration || 0,
+          });
+        })
+        .finally(() => {
+          setLoading(false);
+        });
+    }
+
+    return {};
+  };
+</script>
+
+<style lang="less" scoped>
+  ::v-deep(.arco-input-append) {
+    padding: 0;
+  }
+</style>

+<script setup lang="ts">
+  withDefaults(defineProps<{ hasCard?: boolean; hasBread?: boolean; loading?: boolean }>(), {
+    loading: false,
+  });
+</script>
+
+<template>
+  <div class="container">
+    <breadcrumb v-if="hasBread && $route.meta?.breadcrumb" :items="$route.meta?.breadcrumb" />
+    <a-spin style="width: 100%" :loading="loading as boolean" dot>
+      <a-card v-if="hasCard" :bordered="false" v-bind="$attrs">
+        <slot />
+      </a-card>
+      <slot v-else />
+    </a-spin>
+  </div>
+</template>
+
+<style scoped lang="less">
+  .container {
+    padding: 0 30px 20px 20px;
+  }
+</style>

+<template>
+  <TreeSelect
+    :model-value="modelValue"
+    :data="permissionData"
+    :field-names="fieldName"
+    :placeholder="placeholder"
+    :allow-clear="allowClear"
+    :allow-search="allowSearch"
+    :tree-props="treeProp"
+    :filter-tree-node="onFilter"
+    :fallback-option="false"
+    :path-mode="true"
+    @update:model-value="onUpdate"
+  />
+</template>
+
+<script lang="ts" setup>
+  import { TreeNodeData, TreeSelect } from '@arco-design/web-vue';
+  import { computed, toRefs } from 'vue';
+  import { SystemPermission } from '@/types/system-permission';
+  import { isUndefined } from '@/utils/is';
+  import { useAppStore } from '@/store';
+  import { storeToRefs } from 'pinia';
+  import { arrayToTree } from '@/utils';
+  import { AnyObject } from '@/types/global';
+
+  type PropType = {
+    modelValue?: number | string | number[];
+    guard?: 'Admin' | 'Manage' | '';
+    allowClear?: boolean;
+    allowSearch?: boolean;
+    placeholder?: string;
+  };
+
+  const props = withDefaults(defineProps<PropType>(), {
+    allowClear: false,
+    allowSearch: false,
+    placeholder: '请选择',
+    modelValue: '',
+    guard: '',
+  });
+
+  const { guard } = toRefs(props);
+
+  const emits = defineEmits<{ (e: 'update:modelValue', value: number | string): void }>();
+  const fieldName = { key: 'name', title: 'label', children: 'children', icon: 'icm' };
+  const treeProp = { virtualListProps: { height: 300 } };
+  const appStore = useAppStore();
+  const { permissions } = storeToRefs(appStore);
+
+  const onUpdate = (val: number | string | undefined) => emits('update:modelValue', isUndefined(val) ? '' : val);
+  const onFilter = (searchKey: string, nodeData: SystemPermission) => nodeData.label.indexOf(searchKey) > -1;
+
+  const permissionData = computed(() => {
+    const list = permissions?.value?.filter((item) => item.type === 'Menu' && item.guard === guard.value) as AnyObject[];
+    return arrayToTree(list) as TreeNodeData[];
+  });
+</script>
+
+<style scoped></style>

+<template>
+  <Select
+    v-bind="$attrs"
+    v-model="formValue"
+    :options="options"
+    :fallback-option="false"
+    :field-names="{ value: 'id', label: 'name' }"
+    :placeholder="placeholder"
+    :allow-search="true"
+  />
+</template>
+
+<script lang="ts" setup>
+  import { Select } from '@arco-design/web-vue';
+  import { useSelectionStore } from '@/store';
+  import { useVModels } from '@vueuse/core';
+  import { storeToRefs } from 'pinia';
+  import { computed } from 'vue';
+  import { filter } from 'lodash';
+
+  type propType = { modelValue?: number | string | number[]; placeholder?: string; filtrate?: (value: any) => boolean };
+
+  const props = withDefaults(defineProps<propType>(), {
+    filtrate: () => true,
+    placeholder: '请选择',
+  });
+  const emits = defineEmits(['update:modelValue', 'update:loading']);
+
+  const { getProjectOptions } = storeToRefs(useSelectionStore());
+
+  const options = computed(() => filter(getProjectOptions.value, props.filtrate));
+
+  const { modelValue: formValue } = useVModels(props, emits);
+</script>
+
+<style lang="less" scoped></style>

+<template>
+  <a-button v-if="type === 'Button'" type="text" size="small" :disabled="disabled as boolean" @click="onClick">
+    <slot>详情</slot>
+  </a-button>
+  <a-link v-else class="link" :disabled="disabled as boolean" :hoverable="false" @click="onClick">
+    <a-typography-text
+      type="primary"
+      :disabled="disabled"
+      style="margin-bottom: 0 !important"
+      :ellipsis="{ rows: 1, showTooltip: showTooltip }"
+    >
+      <slot>详情</slot>
+    </a-typography-text>
+  </a-link>
+</template>
+
+<script lang="ts" setup>
+  import { RouteParamsRaw, useRouter } from 'vue-router';
+  import { AnyObject } from '@/types/global';
+
+  const props = withDefaults(
+    defineProps<{
+      name?: string;
+      params?: AnyObject;
+      type?: 'Button' | 'link';
+      showTooltip?: boolean;
+      disabled?: boolean;
+    }>(),
+    {
+      name: '',
+      type: 'Button',
+      params: undefined,
+      showTooltip: true,
+      disabled: false,
+    }
+  );
+
+  const router = useRouter();
+  const onClick = () => {
+    router.push({
+      name: props.name,
+      params: (props.params as RouteParamsRaw) || {},
+    });
+  };
+</script>
+
+<style lang="less" scoped>
+  .link {
+    width: 100%;
+    padding: 1px 0;
+    display: block !important;
+  }
+
+  .link:hover {
+    cursor: pointer;
+  }
+</style>

+<template>
+  <Select
+    v-bind="$attrs"
+    v-model="formValue"
+    :options="activityTagOptions"
+    :fallback-option="false"
+    :placeholder="placeholder"
+    :field-names="{ value: 'id', label: 'name' }"
+    @exceed-limit="onTagExceedLimitError"
+  />
+</template>
+
+<script lang="ts" setup>
+  import { Message, Select } from '@arco-design/web-vue';
+  import { computed, onMounted } from 'vue';
+  import { useSelectionStore } from '@/store';
+  import { isArray } from '@/utils/is';
+  import { useVModels } from '@vueuse/core';
+
+  type propType = { modelValue?: number | string | number[]; placeholder?: string; limitErrorMsg?: string };
+  const props = withDefaults(defineProps<propType>(), { placeholder: '请选择', limitErrorMsg: '超出最大选中数' });
+  const emits = defineEmits(['update:modelValue', 'update:loading']);
+
+  const { modelValue: formValue } = useVModels(props, emits);
+
+  const { activityTagOptions } = useSelectionStore();
+
+  const tagIds = computed(() => activityTagOptions.map((item) => item.id));
+
+  const onTagExceedLimitError = () => Message.warning({ content: props.limitErrorMsg, duration: 1500 });
+
+  onMounted(() => {
+    if (isArray(props.modelValue)) {
+      emits('update:modelValue', props.modelValue.filter((item: number) => tagIds.value?.indexOf(item) !== -1) || []);
+    }
+  });
+</script>
+
+<style scoped></style>

+<template>
+  <Link v-if="user" :hoverable="false" class="link" @click.stop="onClick">
+    <TypographyParagraph type="primary" class="name" :ellipsis="{ rows: 1, showTooltip }">
+      <slot>{{ fullName }}</slot>
+    </TypographyParagraph>
+  </Link>
+</template>
+
+<script lang="ts" setup>
+  import { computed, toRefs } from 'vue';
+  import { useRouter } from 'vue-router';
+  import { BaseUser } from '@/utils/model';
+  import { Link, TypographyParagraph } from '@arco-design/web-vue';
+
+  type PropType = { user?: BaseUser; showTooltip?: boolean };
+
+  const props = withDefaults(defineProps<PropType>(), { showTooltip: true });
+  const { user } = toRefs(props);
+  const router = useRouter();
+
+  const fullName = computed(() => `${user?.value?.nick_name}`);
+
+  const onClick = () => {
+    if (user?.value?.identity === 1) {
+      return router.push({ name: 'user-singer-show', params: { id: user?.value?.id } });
+    }
+    if ([2, 3].includes(Number(user?.value?.identity))) {
+      return router.push({ name: 'user-business-show', params: { id: user?.value?.id } });
+    }
+    return router.push({ name: 'user-register-show', params: { id: user?.value?.id } });
+  };
+</script>
+
+<style lang="less" scoped>
+  .link {
+    display: block !important;
+    width: 100%;
+    padding: 1px 0;
+
+    .name {
+      margin-bottom: 0 !important;
+      min-width: 26px;
+      width: 100%;
+    }
+
+    :hover {
+      cursor: pointer !important;
+    }
+  }
+</style>

+<template>
+  <!--    :virtual-list-props="{ height: 240 }"-->
+
+  <Select
+    v-bind="$attrs"
+    v-model="formValue"
+    :fallback-option="false"
+    :field-names="{ value: 'id', label: 'nick_name' }"
+    :options="options"
+    :placeholder="placeholder"
+    :virtual-list-props="{ height: '240px' }"
+    @exceed-limit="onExceedLimitError"
+  >
+    <template #option="{ data }">
+      <Avatar v-if="hasAvatar" :size="28" :image-url="data.avatar" style="margin-right: 8px" />
+      <span>{{ `${data.nick_name}（${data.real_name}）` }}</span>
+    </template>
+  </Select>
+</template>
+
+<script lang="ts" setup>
+  import { Avatar, Message, Select } from '@arco-design/web-vue';
+
+  import { useSelectionStore } from '@/store';
+  import { storeToRefs } from 'pinia';
+  import { useVModels } from '@vueuse/core';
+  import { computed } from 'vue';
+  import { filter } from 'lodash';
+
+  type PropType = {
+    modelValue?: number | string | number[];
+    placeholder?: string;
+    limitErrorMsg?: string;
+    hasAvatar?: boolean;
+    filtrate?: (value: any) => boolean;
+  };
+  const { getUserOptions } = storeToRefs(useSelectionStore());
+
+  const props = withDefaults(defineProps<PropType>(), {
+    placeholder: '请选择',
+    limitErrorMsg: '超出最大选中数',
+    hasAvatar: true,
+    filtrate: () => true,
+  });
+  const emits = defineEmits(['update:modelValue', 'update:loading']);
+
+  const options = computed(() => filter(getUserOptions.value, props.filtrate));
+  const { modelValue: formValue } = useVModels(props, emits);
+
+  const onExceedLimitError = () => Message.warning({ content: props.limitErrorMsg, duration: 1500 });
+</script>
+
+<style scoped></style>

+import { App } from 'vue';
+import permission from './permission';
+
+export default {
+  install(Vue: App) {
+    Vue.directive('permission', permission);
+  },
+};

+import { DirectiveBinding } from 'vue';
+import { useAuthorizedStore } from '@/store';
+
+function checkPermission(el: HTMLElement, binding: DirectiveBinding) {
+  const { value } = binding;
+  const userStore = useAuthorizedStore();
+  const { permissions } = userStore;
+  if (Array.isArray(value)) {
+    if (value.length > 0) {
+      const hasPermission = value.filter((item: string) => permissions.includes(item));
+      if (hasPermission.length === 0 && el.parentNode) {
+        if (el.parentNode.childElementCount === 1) {
+          // @ts-ignore
+          el.parentNode.remove();
+        } else {
+          el.parentNode.removeChild(el);
+        }
+      }
+    }
+  } else {
+    throw new Error(`need roles! Like v-permission="['admin','user']"`);
+  }
+}
+
+export default {
+  mounted(el: HTMLElement, binding: DirectiveBinding) {
+    checkPermission(el, binding);
+  },
+  updated(el: HTMLElement, binding: DirectiveBinding) {
+    checkPermission(el, binding);
+  },
+};

+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import { DefineComponent } from 'vue';
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}

+import { computed } from 'vue';
+import { EChartsOption } from 'echarts';
+import { useAppStore } from '@/store';
+
+// for code hints
+// import { SeriesOption } from 'echarts';
+// Because there are so many configuration items, this provides a relatively convenient code hint.
+// When using vue, pay attention to the reactive issues. It is necessary to ensure that corresponding functions can be triggered, Typescript does not report errors, and code writing is convenient.
+interface optionsFn {
+  (isDark: boolean): EChartsOption;
+}
+
+export default function useChartOption(sourceOption: optionsFn) {
+  const appStore = useAppStore();
+  const isDark = computed(() => {
+    return appStore.theme === 'dark';
+  });
+  // echarts support https://echarts.apache.org/zh/theme-builder.html
+  // It's not used here
+  // TODO echarts themes
+  const chartOption = computed<EChartsOption>(() => {
+    return sourceOption(isDark.value);
+  });
+  return {
+    chartOption,
+  };
+}

+import { ref } from 'vue';
+
+export default function useLoading(initValue = false) {
+  const loading = ref(initValue);
+  const setLoading = (value: boolean) => {
+    loading.value = value;
+  };
+  const toggle = () => {
+    loading.value = !loading.value;
+  };
+  return {
+    loading,
+    setLoading,
+    toggle,
+  };
+}

+import OSS from 'ali-oss';
+import { Message } from '@arco-design/web-vue';
+
+let ossClient: OSS;
+
+const createOssClient = () => {
+  if (!ossClient) {
+    ossClient = new OSS({
+      accessKeyId: import.meta.env.VITE_OSS_ACCESS_KEY,
+      accessKeySecret: import.meta.env.VITE_OSS_ACCESS_SECRET,
+      bucket: import.meta.env.VITE_OSS_BUCKET,
+      region: import.meta.env.VITE_OSS_REGION,
+      endpoint: import.meta.env.VITE_OSS_ENDPOINT,
+      cname: true,
+      timeout: 90000,
+    });
+  }
+
+  return ossClient;
+};
+
+export default function useOss() {
+  const getFileName = () => {
+    function rx() {
+      return Math.random().toString(36).substring(2);
+    }
+
+    return `${rx()}${new Date().getTime()}${rx()}`;
+  };
+
+  const getFileDir = () => {
+    return new Date().toISOString().slice(0, 10).replace(/-/g, '');
+  };
+
+  const getFileType = (file: File) => {
+    return file.name?.split('.')?.pop()?.toLowerCase();
+  };
+
+  const getHost = () => {
+    if (import.meta.env.VITE_OSS_HOST && import.meta.env.VITE_OSS_HOST.length !== 0) {
+      return import.meta.env.VITE_OSS_HOST;
+    }
+
+    return import.meta.env.VITE_OSS_ENDPOINT;
+  };
+
+  return {
+    ossClient,
+    async upload(
+      file: File,
+      prefix = 'file',
+      onProgress?: (percent: number) => void
+    ): Promise<{ url: string; name: string; response: unknown }> {
+      return createOssClient()
+        .multipartUpload(`${prefix}/${getFileDir()}/${getFileName()}.${getFileType(file)}`, file, {
+          progress: onProgress,
+          partSize: 5 * 1024 * 1024,
+        })
+        .then((res) => {
+          return Promise.resolve({ response: res.res, url: `${getHost()}/${res.name}`, name: `${getFileName()}.${getFileType(file)}` });
+        })
+        .catch(() => {
+          Message.error({ content: '上传失败' });
+          // eslint-disable-next-line prefer-promise-reject-errors
+          return Promise.reject(false);
+        });
+    },
+  };
+}

+import { ref } from 'vue';
+import { Pagination } from '@/types/global';
+
+interface Config {
+  pageSize?: number;
+  showTotal?: boolean;
+  showPageSize?: boolean;
+  size?: 'mini' | 'small' | 'medium' | 'large';
+  simple?: boolean;
+  hideOnSinglePage?: boolean;
+}
+
+export default function usePagination(config: Config = {}) {
+  const defaultPagination = {
+    total: 0,
+    current: 1,
+    pageSize: config.pageSize ?? 20,
+    pageSizeOptions: [config.pageSize ?? 20, (config.pageSize ?? 20) * 2, (config.pageSize ?? 20) * 3, (config.pageSize ?? 20) * 5],
+    showTotal: config.showTotal ?? true,
+    showPageSize: config.showPageSize ?? true,
+    size: config.size ?? 'medium',
+    simple: config.simple ?? false,
+    hideOnSinglePage: config.hideOnSinglePage ?? false,
+  };
+
+  const pagination = ref<Pagination>(defaultPagination);
+
+  // eslint-disable-next-line no-return-assign
+  const setPage = (page: number) => (pagination.value.current = page);
+  // eslint-disable-next-line no-return-assign
+  const setPageSize = (size: number) => (pagination.value.pageSize = size);
+  // eslint-disable-next-line no-return-assign
+  const setTotal = (total: number) => (pagination.value.total = total);
+  // eslint-disable-next-line no-return-assign
+  const resetPagination = () => (pagination.value = defaultPagination);
+
+  const incrementTotal = (increment = 1) => setTotal(pagination.value.total + increment);
+
+  const decrementTotal = (increment = 1) => setTotal(pagination.value.total - increment);
+
+  return {
+    pagination,
+    setPage,
+    setPageSize,
+    setTotal,
+    resetPagination,
+    incrementTotal,
+    decrementTotal,
+  };
+}

+import { RouteLocationNormalized, RouteRecordRaw } from 'vue-router';
+import { useAuthorizedStore } from '@/store';
+
+export default function usePermission() {
+  const userStore = useAuthorizedStore();
+
+  return {
+    accessRouter(route: RouteLocationNormalized | RouteRecordRaw) {
+      return (
+        !route.meta?.requiresAuth ||
+        !route.meta?.roles ||
+        route.meta?.roles?.includes('*') ||
+        userStore.permissions?.filter((item) => route.meta?.roles?.includes(item))?.length !== 0
+      );
+    },
+    checkPermission(binding: string[] | string): boolean {
+      const userStore = useAuthorizedStore();
+      const { permissions } = userStore;
+
+      if (Array.isArray(binding) && binding.length > 0) {
+        const hasPermission = binding.filter((item: string) => permissions.includes(item));
+        return hasPermission.length !== 0;
+      }
+      return permissions.includes(binding as string);
+    },
+    // You can add any rules you want
+  };
+}

+import { onMounted, onBeforeMount, onBeforeUnmount } from 'vue';
+import { useDebounceFn } from '@vueuse/core';
+import { useAppStore } from '@/store';
+import { addEventListen, removeEventListen } from '@/utils/event';
+
+const WIDTH = 992; // https://arco.design/vue/component/grid#responsivevalue
+
+function queryDevice() {
+  const rect = document.body.getBoundingClientRect();
+  return rect.width - 1 < WIDTH;
+}
+
+export default function useResponsive(immediate?: boolean) {
+  const appStore = useAppStore();
+  function resizeHandler() {
+    if (!document.hidden) {
+      const isMobile = queryDevice();
+      appStore.toggleDevice(isMobile ? 'mobile' : 'desktop');
+      appStore.toggleMenu(isMobile);
+    }
+  }
+  const debounceFn = useDebounceFn(resizeHandler, 100);
+  onMounted(() => {
+    if (immediate) debounceFn();
+  });
+  onBeforeMount(() => {
+    addEventListen(window, 'resize', debounceFn);
+  });
+  onBeforeUnmount(() => {
+    removeEventListen(window, 'resize', debounceFn);
+  });
+}

+import { computed } from 'vue';
+import { useAppStore } from '@/store';
+
+export default function useThemes() {
+  const appStore = useAppStore();
+  const isDark = computed(() => {
+    return appStore.theme === 'dark';
+  });
+  return {
+    isDark,
+  };
+}

+import { createVNode, h, ref } from 'vue';
+import { FormInstance } from '@arco-design/web-vue/es/form';
+import { Form, FormItem, InputPassword, Message, Modal } from '@arco-design/web-vue';
+import useAuthApi from '@/http/auth';
+
+export default function useUser() {
+  const getRoleLabel = (role?: 'Singer' | 'Business') => {
+    switch (role) {
+      case 'Business':
+        return '推荐人';
+      case 'Singer':
+        return '歌手';
+      default:
+        return '未知';
+    }
+  };
+
+  const getSexLabel = (sex: string | number) => {
+    switch (sex) {
+      case 0:
+        return '保密';
+      case 1:
+        return '男';
+      case 2:
+        return '女';
+      default:
+        return '未知';
+    }
+  };
+
+  // eslint-disable-next-line no-shadow
+  const resetPwd = () => {
+    const pwdRef = ref<FormInstance>();
+    const pwdVal = ref({ password: '', password_confirmation: '' });
+    const pwdRules = {
+      password: [{ required: true, message: '请输入密码' }],
+      password_confirmation: [{ required: true, message: '请输入密码' }],
+    };
+
+    const createPwdVNode = (label: string, field: 'password' | 'password_confirmation') =>
+      createVNode(
+        FormItem,
+        { label, field, rowClass: field === 'password_confirmation' ? 'mb-0' : '' },
+        {
+          default: () =>
+            h(InputPassword, {
+              'modelValue': pwdVal.value[field],
+              // eslint-disable-next-line no-return-assign
+              'onUpdate:modelValue': (val?: string) => (pwdVal.value[field] = val || ''),
+            }),
+        }
+      );
+
+    return Modal.open({
+      title: '设置密码',
+      content: () =>
+        h(
+          Form,
+          { ref: pwdRef, model: pwdVal, rules: pwdRules, autoLabelWidth: true },
+          { default: () => [createPwdVNode('新密码', 'password'), createPwdVNode('确认密码', 'password_confirmation')] }
+        ),
+      closable: false,
+      maskClosable: false,
+      escToClose: false,
+      // eslint-disable-next-line no-shadow
+      onBeforeOk: (done: (closed: boolean) => void) => {
+        useAuthApi
+          .changePwd(pwdVal.value)
+          .then(() => {
+            Message.success('更新成功');
+            done(true);
+          })
+          .catch(() => {
+            done(false);
+          });
+      },
+      onClose: () => {
+        pwdVal.value = { password: '', password_confirmation: '' };
+      },
+    });
+  };
+
+  return {
+    getRoleLabel,
+    getSexLabel,
+    resetPwd,
+  };
+}

+import { AnyObject, Option, QueryForParams, ServiceResponse } from '@/types/global';
+
+import { Tag } from '@/types/tag';
+import axios from 'axios';
+
+export default class useTagApi {
+  static typeOption = [
+    { label: '歌曲标签', value: 1 },
+    { label: '身份标签', value: 2 },
+    { label: '声音标签', value: 3 },
+    { label: '认证标签', value: 4 },
+  ];
+
+  static showOption = [
+    { label: '显示', value: 1 },
+    { label: '隐藏', value: 0 },
+  ];
+
+  static filterOption = [
+    { label: '允许', value: 1 },
+    { label: '禁止', value: 0 },
+  ];
+
+  static certifyPermissionOption = [
+    { label: '听', value: 1 },
+    { label: '唱', value: 2 },
+  ];
+
+  static async get(params?: QueryForParams): Promise<ServiceResponse<Tag[]>> {
+    return axios.get('system/tags', { params });
+  }
+
+  static async create(data: AnyObject): Promise<Tag> {
+    return axios.post('system/tags', data).then((res) => Promise.resolve(res.data));
+  }
+
+  static async show(id: number, params?: QueryForParams): Promise<Tag> {
+    return axios.get(`system/tags/${id}`, { params }).then((res) => Promise.resolve(res.data));
+  }
+
+  static async update(id: number, data: AnyObject): Promise<Tag> {
+    return axios.put(`system/tags/${id}`, data).then((res) => Promise.resolve(res.data));
+  }
+
+  static async destroy(id: number) {
+    return axios.delete(`system/tags/${id}`).then((res) => Promise.resolve(res.data));
+  }
+
+  static async getOption(params?: QueryForParams): Promise<Option[]> {
+    return useTagApi.get({ ...params, fetchType: 'all' }).then(({ data }) =>
+      data?.map((item) => {
+        return { value: item.id, label: item.name };
+      })
+    );
+  }
+}

+// eslint-disable-next-line max-classes-per-file
+import { AnyObject, AttributeData, QueryForParams, ServiceResponse } from '@/types/global';
+import { Activity, ActivityApplyRecord, ActivityViewUser } from '@/types/activity';
+import useUserApi from '@/http/user';
+import axios, { AxiosRequestConfig } from 'axios';
+import { UserManageActivity } from '@/utils/model';
+import { ActivityApply } from '@/types/activity-apply';
+import FileSaver from 'file-saver';
+import { ActivityWork } from '@/types/activity-work';
+
+export default class useActivityApi {
+  static statusOption = [
+    { label: '处理中', value: 0 },
+    { label: '已上架', value: 1 },
+    { label: '已下架', value: 2 },
+    { label: '已匹配', value: 3 },
+    { label: '已发行', value: 5 },
+    { label: '处理失败', value: 4 },
+  ];
+
+  static weightOption = [
+    { label: '无', value: 0 },
+    { label: '低', value: 30 },
+    { label: '中', value: 60 },
+    { label: '高', value: 90 },
+  ];
+
+  static workSingTypeOption = [
+    { label: '自主上传', value: 1 },
+    { label: '唱整首', value: 2 },
+    { label: '唱片段', value: 3 },
+  ];
+
+  static workSingStatusOption = [
+    { label: '待采纳', value: 0 },
+    { label: '已确认', value: 1 },
+    { label: '不合适', value: 2 },
+    { label: '未采纳', value: 3 },
+    { label: '其他', value: 4 },
+  ];
+
+  static songTypeOption = [
+    { label: '歌曲', value: 1 },
+    { label: 'Demo', value: 2 },
+  ];
+
+  static get(params?: QueryForParams): Promise<ServiceResponse<Activity[]>> {
+    return axios.get('audition/activities', { params });
+  }
+
+  static async getExport(fileName: string, params?: QueryForParams) {
+    const config = { params: { ...params, fetchType: 'excel' }, timeout: 60000, responseType: 'blob' } as AxiosRequestConfig;
+    return axios.get('audition/activities', config).then(({ data }) => FileSaver.saveAs(data, `${fileName}.xlsx`));
+  }
+
+  static async create(data: AttributeData): Promise<Activity> {
+    return axios.post('audition/activities', data).then((res) => Promise.resolve(res.data));
+  }
+
+  static async update(id: number, data: AttributeData): Promise<Activity> {
+    return axios.put(`audition/activities/${id}`, data).then((res) => Promise.resolve(res.data));
+  }
+
+  static async changeStatus(id: number, data: AttributeData) {
+    return axios.put<Activity>(`audition/activities/${id}/change-status`, data);
+  }
+
+  static async notify(id: number, data: AttributeData) {
+    return axios.post<Activity>(`audition/activities/${id}/notify`, data);
+  }
+
+  static async show(id: number, params?: QueryForParams): Promise<Activity> {
+    return axios.get(`/audition/activities/${id}`, { params }).then((res) => Promise.resolve(res.data));
+  }
+
+  static async destroy(id: number) {
+    return axios.delete(`/audition/activities/${id}`).then((res) => Promise.resolve(res.data));
+  }
+
+  static async viewUsers(activityId: number, params?: QueryForParams): Promise<ServiceResponse<ActivityViewUser[]>> {
+    return axios.get(`/audition/activities/${activityId}/views`, { params });
+  }
+
+  static async likeUsers(activityId: number, params?: QueryForParams): Promise<ServiceResponse<ActivityViewUser[]>> {
+    return axios.get(`/audition/activities/${activityId}/likes`, { params });
+  }
+
+  static async manageUsers(activityId: number, params?: QueryForParams): Promise<ServiceResponse<UserManageActivity[]>> {
+    return axios.get(`/audition/activities/${activityId}/managers`, { params });
+  }
+
+  static async submitUser(activityId: number, params?: QueryForParams): Promise<ServiceResponse<ActivityWork[]>> {
+    return axios.get(`/audition/activities/${activityId}/submits`, { params });
+  }
+
+  static async getSubmitUserExport(activityId: number, fileName: string, params: QueryForParams) {
+    const config = { params: { ...params, fetchType: 'excel' }, timeout: 60000, responseType: 'blob' } as AxiosRequestConfig;
+    return axios.get(`/audition/activities/${activityId}/submits`, config).then(({ data }) => FileSaver.saveAs(data, `${fileName}.xlsx`));
+  }
+
+  static async changeUserShare(activityId: number, data: AttributeData) {
+    return axios.put<Activity>(`/audition/activities/${activityId}/change-user-share`, data);
+  }
+
+  static async matchUser(activityId: number, params?: QueryForParams): Promise<ServiceResponse<ActivityWork[]>> {
+    return axios.get(`/audition/activities/${activityId}/matches`, { params });
+  }
+}
+
+export class useApplyApi {
+  static statusOption = [
+    { label: '审核不通过', value: 2 },
+    { label: '待审核', value: 0 },
+  ];
+
+  static async get(params?: QueryForParams): Promise<ServiceResponse<ActivityApply[]>> {
+    return axios.get('audition/applies', { params });
+  }
+
+  static async create(data: AnyObject): Promise<ActivityApply> {
+    return axios.post(`audition/applies`, data).then((res) => Promise.resolve(res.data));
+  }
+
+  static async audit(id: number, data: AttributeData) {
+    return axios.put(`audition/applies/${id}/audit`, data);
+  }
+
+  static async update(id: number, data: AttributeData) {
+    return axios.put(`audition/applies/${id}`, data);
+  }
+
+  static async record(id: number, params?: QueryForParams): Promise<ServiceResponse<ActivityApplyRecord[]>> {
+    return axios.get(`audition/applies/${id}/records`, { params });
+  }
+
+  static async destroy(id: number) {
+    return axios.delete(`audition/applies/${id}`);
+  }
+}
+
+export class useManagerApi {
+  static statusOption = useUserApi.statusOption;
+
+  static sexOption = useUserApi.sexOption;
+
+  static officialStatusOption = useUserApi.officialStatusOption;
+
+  static permissionOption = [
+    { label: '查看试唱', value: 'view' },
+    { label: '查看报价', value: 'price' },
+    { label: '回复结果', value: 'audit' },
+  ];
+
+  static get(params: QueryForParams): Promise<ServiceResponse<UserManageActivity[]>> {
+    return axios.get('audition/activity-managers', { params });
+  }
+
+  static async create(data: AnyObject) {
+    return axios.post('audition/activity-managers', data).then((res) => Promise.resolve(res.data));
+  }
+
+  static async update(id: number, data: AnyObject) {
+    return axios.put(`audition/activity-managers/${id}`, data).then((res) => Promise.resolve(res.data));
+  }
+
+  static async destroy(id: number) {
+    return axios.delete(`audition/activity-managers/${id}`).then((res) => Promise.resolve(res.data));
+  }
+}
+
+export class useReListApi {
+  static get(params?: QueryForParams): Promise<ServiceResponse> {
+    return axios.get(`audition/activity-relist-records`, { params });
+  }
+
+  static async getExport(fileName: string, params?: QueryForParams) {
+    const config = { params: { ...params, fetchType: 'excel' }, timeout: 60000, responseType: 'blob' } as AxiosRequestConfig;
+    return axios.get('audition/activity-relist-records', config).then(({ data }) => FileSaver.saveAs(data, `${fileName}.xlsx`));
+  }
+}
+
+export class useWorkApi {
+  static get(params?: QueryForParams): Promise<ServiceResponse<ActivityWork[]>> {
+    return axios.put(`audition/activity-works`, { params });
+  }
+
+  static changeStatus(workId: number, data: AttributeData) {
+    return axios.put(`audition/activity-works/${workId}/change-status`, data);
+  }
+}

+import { AuthorizedState } from '@/store/modules/authorized/type';
+import FileSaver from 'file-saver';
+import axios from 'axios';
+
+interface LoginData {
+  type: 'email' | 'phone';
+  email?: string;
+  password?: string;
+  phone?: string;
+  code?: string;
+  area?: string;
+}
+
+export async function downloadFile(url: string, fileName: string) {
+  FileSaver.saveAs(`${url}`, fileName + url.substring(url.lastIndexOf('.')));
+
+  // ?response-content-type=Blob
+}
+
+export default class useAuthApi {
+  static async login(data: LoginData) {
+    return axios
+      .post<{ access_token: string; refresh_token: string; nick_name: string }>('login', data)
+      .then((res) => Promise.resolve(res.data));
+  }
+
+  static async info() {
+    return axios.get<{ user: AuthorizedState; permissions: string[] }>('auth/info').then((res) => Promise.resolve(res.data));
+  }
+
+  static changePwd(data: { password: string; password_confirmation: string }) {
+    return axios.put('auth/change-pwd', data);
+  }
+}

+import { AnyObject, QueryForParams, ServiceResponse } from '@/types/global';
+import { Banner } from '@/utils/model';
+import axios from 'axios';
+
+export default class useBannerApi {
+  static roleOption = [
+    { value: 'UnLogin', label: '未登录' },
+    { value: 'Visitor', label: '游客' },
+    { value: 'Singer', label: '音乐人' },
+    { value: 'Business', label: '经纪人' },
+    { value: 'Project', label: '厂牌管理员' },
+    { value: 'System', label: '平台管理员' },
+  ];
+
+  static statusOption = [
+    { value: 0, label: '下架' },
+    { value: 1, label: '上架' },
+  ];
+
+  static scopeOption = [{ value: 1, label: '首页banner' }];
+
+  static typeOption = [
+    { value: 1, label: '普通' },
+    { value: 2, label: '外链' },
+    { value: 3, label: '交互' },
+    { value: 4, label: '自定义H5' },
+  ];
+
+  static get(params?: QueryForParams): Promise<ServiceResponse<Banner[]>> {
+    return axios.get('system/banners', { params });
+  }
+
+  static async create(data: AnyObject): Promise<Banner> {
+    return axios.post('system/banners', data).then((res) => Promise.resolve(res.data));
+  }
+
+  static async update(id: number, data: AnyObject): Promise<Banner> {
+    return axios.put(`system/banners/${id}`, data).then((res) => Promise.resolve(res.data));
+  }
+
+  static async changeStatus(id: number, data: { status: number }) {
+    return axios.put(`system/banners/${id}/change-status`, data);
+  }
+
+  static async destroy(id: number) {
+    return axios.delete(`system/banners/${id}`).then((res) => Promise.resolve(res.data));
+  }
+}

+import { AnyObject, QueryForPaginationParams, QueryForParams, ServiceResponse } from '@/types/global';
+import { User } from '@/utils/model';
+import axios, { AxiosRequestConfig } from 'axios';
+import FileSaver from 'file-saver';
+
+export default class useBrokerApi {}
+
+export interface BrokerUserConfigItem {
+  user_id: number;
+  user?: User;
+  identifier: '';
+  singer_count: 0;
+  status: 0 | 1;
+}
+
+export interface BrokerUserConfig {
+  id: number;
+  title: string;
+  begin_at: string;
+  end_at: string;
+  push_type: number;
+  push_at: string;
+  user_id: number;
+  user?: User;
+  items?: BrokerUserConfigItem[];
+}
+
+export class useUserConfigApi {
+  static get(params?: QueryForParams | QueryForPaginationParams): Promise<ServiceResponse<BrokerUserConfig[]>> {
+    return axios.get('system/broker/user-configs', { params });
+  }
+
+  static async create(data: AnyObject): Promise<BrokerUserConfig> {
+    return axios.post('system/broker/user-configs', data).then((res) => Promise.resolve(res.data));
+  }
+
+  static async createLevel(id: number, data: AnyObject) {
+    return axios.post(`system/broker/user-configs/${id}/level`, data).then((res) => Promise.resolve(res.data));
+  }
+
+  static async show(id: number): Promise<BrokerUserConfig> {
+    return axios.get(`system/broker/user-configs/${id}`).then((res) => Promise.resolve(res.data));
+  }
+
+  static async update(id: number, data: AnyObject): Promise<BrokerUserConfig> {
+    return axios.put(`system/broker/user-configs/${id}`, data).then((res) => Promise.resolve(res.data));
+  }
+
+  static async destroy(id: number) {
+    return axios.delete(`system/broker/user-configs/${id}`).then((res) => Promise.resolve(res.data));
+  }
+}
+
+export interface BrokerPushConfig {
+  id: number;
+  identifier: string;
+  title: string;
+  intro: string;
+  match_title: string;
+  match_intro: string;
+  user_id: number;
+  user?: User;
+}
+
+export class usePushConfigApi {
+  static get(params?: QueryForParams | QueryForPaginationParams): Promise<ServiceResponse<BrokerPushConfig[]>> {
+    return axios.get('system/broker/push-configs', { params });
+  }
+
+  static async create(data: AnyObject): Promise<BrokerPushConfig> {
+    return axios.post('system/broker/push-configs', data).then((res) => Promise.resolve(res.data));
+  }
+
+  static async update(id: number, data: AnyObject): Promise<BrokerPushConfig> {
+    return axios.put(`system/broker/push-configs/${id}`, data).then((res) => Promise.resolve(res.data));
+  }
+
+  static async destroy(id: number) {
+    return axios.delete(`system/broker/push-configs/${id}`).then((res) => Promise.resolve(res.data));
+  }
+}
+
+export class usePushMatchRecordApi {
+  static get(params?: QueryForParams | QueryForPaginationParams): Promise<ServiceResponse> {
+    return axios.get('system/broker/push-match-records', { params });
+  }
+
+  static async getExport(fileName: string, params?: QueryForParams) {
+    const config = { params: { ...params, fetchType: 'excel' }, timeout: 60000, responseType: 'blob' } as AxiosRequestConfig;
+    return axios.get('system/broker/push-match-records', config).then(({ data }) => FileSaver.saveAs(data, `${fileName}.xlsx`));
+  }
+
+  static async rollback(recordId: number) {
+    return axios.post(`system/broker/push-match-records/${recordId}/rollback`);
+  }
+
+  static async send(recordId: number) {
+    return axios.post(`system/broker/push-match-records/${recordId}/send`);
+  }
+}
+
+export interface BrokerPushLevel {
+  id: number;
+  user_id: number;
+  title: string;
+  is_alert: 1 | 0;
+  begin_at: string;
+  end_at: string;
+  publish_at: string;
+  status: number;
+}
+
+export class usePushLevelRecordApi {
+  static statusOption = [
+    { value: 0, label: '待发送' },
+    { value: 1, label: '处理中' },
+    { value: 2, label: '已发送' },
+    { value: 3, label: '已撤销' },
+    { value: -1, label: '发送失败' },
+  ];
+
+  static async get(params?: QueryForParams | QueryForPaginationParams): Promise<ServiceResponse<BrokerPushLevel[]>> {
+    return axios.get('system/broker/push-level-records', { params });
+  }
+
+  static async update(id: number, data: AnyObject): Promise<BrokerPushLevel> {
+    return axios.put(`system/broker/push-level-records/${id}`, data).then((res) => Promise.resolve(res.data));
+  }
+
+  static async send(id: number) {
+    return axios.post(`system/broker/push-level-records/${id}/send`).then((res) => Promise.resolve(res.data));
+  }
+
+  static async rollback(id: number) {
+    return axios.post(`system/broker/push-level-records/${id}/rollback`).then((res) => Promise.resolve(res.data));
+  }
+
+  static async destroy(id: number) {
+    return axios.delete(`system/broker/push-level-records/${id}`).then((res) => Promise.resolve(res.data));
+  }
+
+  static getChildren(id: number, params?: QueryForParams | QueryForPaginationParams) {
+    return axios.get(`system/broker/push-level-records/${id}/children`, { params });
+  }
+}

+import { AttributeData, Option, QueryForPaginationParams, QueryForParams, ServiceResponse } from '@/types/global';
+import { SystemConfig } from '@/types/system-config';
+import axios from 'axios';
+import { first } from 'lodash';
+
+export default class useConfigApi {
+  static statusOptions = [
+    { label: '启用', value: 1 },
+    { label: '禁用', value: 0 },
+  ];
+
+  static contentOptions = [
+    { label: '无内容', value: 'none' },
+    {
+      label: '文本内容',
+      value: 'string',
+      children: [
+        { label: '短文本', value: 'input' },
+        { label: '长文本', value: 'textarea' },
+      ],
+    },
+    {
+      label: '上传链接',
+      value: 'upload',
+      children: [
+        { label: '图片链接', value: 'image' },
+        { label: '视频链接', value: 'video' },
+        { label: '音频链接', value: 'audio' },
+        { label: '文件链接', value: 'file' },
+      ],
+    },
+  ];
+
+  static get(params?: QueryForParams | QueryForPaginationParams): Promise<ServiceResponse<SystemConfig[]>> {
+    return axios.get('system/configs', { params });
+  }
+
+  static async create(data: AttributeData) {
+    return axios.post('system/configs', data).then((res) => Promise.resolve(res.data));
+  }
+
+  static async update(id: number, data: AttributeData) {
+    return axios.put(`system/configs/${id}`, data).then((res) => Promise.resolve(res.data));
+  }
+
+  static async changeStatus(id: number, status: number) {
+    return axios.put(`system/configs/${id}/change-status`, { status });
+  }
+
+  static async getOne(params?: QueryForParams): Promise<SystemConfig | undefined> {
+    return useConfigApi.get({ ...params, parent_id: '', fetchType: 'all' }).then(({ data }) => first(data));
+  }
+
+  static async getOption(params?: QueryForParams): Promise<Option[]> {
+    return useConfigApi.get({ parent_id: '', ...params, fetchType: 'all' }).then(({ data }) =>
+      data?.map((item) => {
+        return {
+          value: item.identifier,
+          label: item.name,
+        };
+      })
+    );
+  }
+}

+import { QueryForParams, ServiceResponse } from '@/types/global';
+import axios, { AxiosRequestConfig } from 'axios';
+import FileSaver from 'file-saver';
+
+export default class useDashboardApi {
+  static userCertify() {
+    return axios.get('dashboard/user-certify').then((res) => Promise.resolve(res.data));
+  }
+
+  static userTotal() {
+    return axios.get('dashboard/user-total').then((res) => Promise.resolve(res.data));
+  }
+
+  static userSkill() {
+    return axios.get('dashboard/user-skill').then((res) => Promise.resolve(res.data));
+  }
+
+  static userStyle() {
+    return axios.get('dashboard/user-style').then((res) => Promise.resolve(res.data));
+  }
+
+  static activityTotal() {
+    return axios.get('dashboard/activity-total').then((res) => Promise.resolve(res.data));
+  }
+
+  static activityStyle() {
+    return axios.get('dashboard/activity-style').then((res) => Promise.resolve(res.data));
+  }
+
+  static activityLike() {
+    return axios.get('dashboard/activity-like').then((res) => Promise.resolve(res.data));
+  }
+
+  static activityListen() {
+    return axios.get('dashboard/activity-listen').then((res) => Promise.resolve(res.data));
+  }
+
+  static overview(params?: QueryForParams) {
+    return axios.get('dashboard/overview', { params }).then((res) => Promise.resolve(res.data));
+  }
+
+  static getOverviewExport(fileName: string, params?: QueryForParams) {
+    const config = { params: { ...params, fetchType: 'excel' }, timeout: 60000, responseType: 'blob' } as AxiosRequestConfig;
+    return axios.get('dashboard/overview', config).then(({ data }) => FileSaver.saveAs(data, `${fileName}.xlsx`));
+  }
+
+  static submitWork(params?: QueryForParams): Promise<ServiceResponse> {
+    return axios.get('dashboard/submit-work', { params });
+  }
+
+  static getSubmitWorkExport(fileName: string, params?: QueryForParams) {
+    const config = { params: { ...params, fetchType: 'excel' }, timeout: 60000, responseType: 'blob' } as AxiosRequestConfig;
+    return axios.get('dashboard/submit-work', config).then(({ data }) => FileSaver.saveAs(data, `${fileName}.xlsx`));
+  }
+}

+import axios, { AxiosRequestConfig, AxiosResponse } from 'axios';
+import { Message } from '@arco-design/web-vue';
+import { clearToken, getRefreshToken, getToken } from '@/utils/auth';
+import { ServiceResponse } from '@/types/global';
+
+const isRefreshing = false;
+
+if (import.meta.env.VITE_API_HOST) {
+  axios.defaults.baseURL = import.meta.env.VITE_API_HOST;
+  axios.defaults.timeout = 30000;
+}
+
+axios.interceptors.request.use(
+  // @ts-ignore
+  (config: AxiosRequestConfig) => {
+    if (!config.url?.startsWith('/provider')) {
+      config.baseURL = `${config.baseURL}/admin`;
+    }
+    const token = isRefreshing ? getRefreshToken() : getToken();
+    if (token) {
+      config.headers = {
+        Accept: 'application/json',
+        ...config.headers,
+        Authorization: `Bearer ${token}`,
+        Route: sessionStorage.getItem('route') || 'dashboard',
+      };
+    }
+    if (config.params) {
+      Object.keys(config.params).forEach((key) => {
+        if (config.params[key] === undefined) {
+          delete config.params[key];
+        }
+      });
+    }
+
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
+);
+
+axios.interceptors.response.use(
+  // @ts-ignore
+  async (response: AxiosResponse<ServiceResponse>): Promise<ServiceResponse | unknown> => {
+    if (response.data instanceof Blob) {
+      return Promise.resolve(response);
+    }
+
+    return Promise.resolve(response.data);
+  },
+  async (error) => {
+    if (error.response.status === 401) {
+      clearToken();
+      window.location.reload();
+      Message.warning({ id: 'token_lose', content: '登陆信息已失效，请重新登陆...' });
+    } else {
+      Message.error({
+        id: 'service_error',
+        content: error.response.data.msg || error.msg || 'Request Error',
+        duration: 5 * 1000,
+      });
+    }
+
+    return Promise.reject(error);
+  }
+);

+import { QueryForParams, ServiceResponse } from '@/types/global';
+import { SystemRole } from '@/types/system-role';
+import axios from 'axios';
+
+export default class useOperationLog {
+  static async get(params?: QueryForParams): Promise<ServiceResponse<SystemRole[]>> {
+    return axios.get('system/operation-logs', { params });
+  }
+}

+import { AnyObject, QueryForParams, ServiceResponse } from '@/types/global';
+import { Banner } from '@/utils/model';
+import axios from 'axios';
+
+export default class useMaterialApi {
+  static typeOption = [
+    { value: 1, label: '用户主页背景' },
+    { value: 2, label: '厂牌主页背景' },
+    { value: 3, label: '音视频封面' },
+  ];
+
+  static get(params?: QueryForParams): Promise<ServiceResponse> {
+    return axios.get('system/materials', { params });
+  }
+
+  static async create(data: AnyObject) {
+    return axios.post(`system/materials`, data).then((res) => Promise.resolve(res.data));
+  }
+
+  static async update(id: number, data: AnyObject): Promise<Banner> {
+    return axios.put(`system/materials/${id}`, data).then((res) => Promise.resolve(res.data));
+  }
+
+  static async destroy(id: number) {
+    return axios.delete(`system/materials/${id}`).then((res) => Promise.resolve(res.data));
+  }
+}

+import { AttributeData, QueryForParams, ServiceResponse } from '@/types/global';
+
+// eslint-disable-next-line import/no-cycle
+import { Notification } from '@/utils/model';
+import axios from 'axios';
+
+export default class useNotificationApi {
+  static typeOption = [
+    { value: 1, label: '文本' },
+    { value: 2, label: '图文' },
+  ];
+
+  static alertOption = [
+    { value: 1, label: '弹出' },
+    { value: 0, label: '不弹出' },
+  ];
+
+  static statusOption = [
+    { value: 0, label: '待发送' },
+    { value: 1, label: '处理中' },
+    { value: 2, label: '已发送' },
+    { value: -1, label: '发送失败' },
+    { value: -2, label: '取消发送' },
+    { value: 3, label: '已撤销' },
+  ];
+
+  static publishTypeOption = [
+    { value: 1, label: '立即发送' },
+    { value: 2, label: '定时发送' },
+  ];
+
+  static linkTypeOption = [
+    { value: 'none', label: '无' },
+    { value: 'user', label: '用户' },
+    { value: 'activity', label: '歌曲' },
+    { value: 'project', label: '厂牌' },
+    { value: 'rich', label: '自定义H5页面' },
+  ];
+
+  static get(params?: QueryForParams): Promise<ServiceResponse<Notification[]>> {
+    return axios.get('system/notification', { params });
+  }
+
+  static async create(data?: AttributeData): Promise<Notification> {
+    return axios.post('system/notification', data).then((res) => Promise.resolve(res.data));
+  }
+
+  static async show(id: number): Promise<Notification> {
+    return axios.get(`system/notification/${id}`).then((res) => Promise.resolve(res.data));
+  }
+
+  static async update(id: number, data = {}): Promise<Notification> {
+    return axios.put(`system/notification/${id}`, data).then((res) => Promise.resolve(res.data));
+  }
+
+  static async user(id: number, params?: QueryForParams) {
+    return axios.get(`system/notification/${id}/users`, { params });
+  }
+
+  static async send(id: number): Promise<unknown> {
+    return axios.put(`system/notification/${id}/send`).then((res) => Promise.resolve(res.data));
+  }
+
+  static async cancel(id: number): Promise<unknown> {
+    return axios.put(`system/notification/${id}/cancel`).then((res) => Promise.resolve(res.data));
+  }
+
+  static async rollback(id: number): Promise<unknown> {
+    return axios.put(`system/notification/${id}/rollback`).then((res) => Promise.resolve(res.data));
+  }
+}

+import { AttributeData, QueryForParams, ServiceResponse } from '@/types/global';
+
+import axios, { AxiosRequestConfig } from 'axios';
+import FileSaver from 'file-saver';
+import { Project, User, UserDynamics } from '@/utils/model';
+
+type ProjectList = Project & {
+  activity_count: number;
+  activity_up_count: number;
+  activity_match_count: number;
+  activity_down_count: number;
+  activity_send_count: number;
+  manage_count: number;
+};
+
+export default class useProjectApi {
+  static promoteStatusOption = [
+    { label: '否', value: 0 },
+    { label: '是', value: 1 },
+  ];
+
+  static publicStatusOption = [
+    { label: '否', value: 1 },
+    { label: '是', value: 0 },
+  ];
+
+  static applyStatusOption = [
+    { label: '否', value: 0 },
+    { label: '是', value: 1 },
+  ];
+
+  static manageStatusOption = [
+    { label: '否', value: 0 },
+    { label: '是', value: 1 },
+  ];
+
+  static statusOption = [
+    { label: '启用', value: 1 },
+    { label: '禁用', value: 0 },
+  ];
+
+  static get(params?: QueryForParams): Promise<ServiceResponse<ProjectList[]>> {
+    return axios.get('audition/projects', { params });
+  }
+
+  static async getExport(fileName: string, params?: QueryForParams) {
+    const config = { params: { ...params, fetchType: 'excel' }, timeout: 60000, responseType: 'blob' } as AxiosRequestConfig;
+    return axios.get('audition/projects', config).then(({ data }) => FileSaver.saveAs(data, `${fileName}.xlsx`));
+  }
+
+  static async create(data: Omit<Project, 'id'>): Promise<Project> {
+    return axios.post('audition/projects', data).then((res) => Promise.resolve(res.data));
+  }
+
+  static async show(id: number): Promise<Project> {
+    return axios.get(`/audition/projects/${id}`).then((res) => Promise.resolve(res.data));
+  }
+
+  static async update(id: number, data: AttributeData): Promise<Project> {
+    return axios.put(`audition/projects/${id}`, data).then((res) => Promise.resolve(res.data));
+  }
+
+  static async changeStatus(id: number, status: 1 | 0) {
+    return axios.put(`audition/projects/${id}/change-status`, { status });
+  }
+
+  static destroy(id: number) {
+    return axios.delete(`audition/projects/${id}`);
+  }
+
+  static manageUsers(projectId: number, params?: QueryForParams): Promise<ServiceResponse<User[]>> {
+    return axios.get(`/audition/projects/${projectId}/managers`, { params });
+  }
+
+  static memberUsers(projectId: number, params?: QueryForParams): Promise<ServiceResponse<User[]>> {
+    return axios.get(`/audition/projects/${projectId}/members`, { params });
+  }
+
+  static outManageUsers(projectId: number, params?: QueryForParams): Promise<ServiceResponse<User[]>> {
+    return axios.get(`/audition/projects/${projectId}/out-managers`, { params });
+  }
+
+  static destroyOutManageUsers(projectId: number, data = {}) {
+    return axios.post(`/audition/projects/${projectId}/out-managers`, data);
+  }
+
+  static dynamics(id: number, params?: QueryForParams): Promise<ServiceResponse<UserDynamics[]>> {
+    return axios.get(`/audition/projects/${id}/dynamics`, { params });
+  }
+}
+
+export class useManagerApi {
+  static async create(data: { user_id: number; project_id: number }): Promise<Project> {
+    return axios.post('audition/project-managers', data).then((res) => Promise.resolve(res.data));
+  }
+
+  static destroy(id: number) {
+    return axios.delete(`audition/project-managers/${id}`);
+  }
+}

+import axios from 'axios';
+
+type LoginData = { access_token: string; refresh_token: string; nick_name: string };
+
+export default class useProviderApi {
+  static async area() {
+    return axios.get('/provider/area');
+  }
+
+  static sms(type: string, phone: string, area?: string) {
+    return axios.post('/provider/sms', { type, phone, area, platform: 'admin', scope: 1 });
+  }
+
+  static async login(type: 'phone' | 'email', data: object) {
+    return axios.post<LoginData>('/provider/login', { platform: 'admin', scope: 1, type, ...data });
+  }
+}

+import { AnyObject, QueryForParams } from '@/types/global';
+
+import { Tag } from '@/types/tag';
+import axios from 'axios';
+
+export default class useReportApi {
+  static typeOption = [{ value: 3, label: '聊天' }];
+
+  static statusOption = [
+    { value: 0, label: '未处理' },
+    { value: 1, label: '已处理' },
+  ];
+
+  static async get(params?: QueryForParams) {
+    return axios.get('system/reports', { params });
+  }
+
+  static async update(id: number, data: AnyObject): Promise<Tag> {
+    return axios.put(`system/reports/${id}`, data).then((res) => Promise.resolve(res.data));
+  }
+}

+import { AnyObject, QueryForParams, ServiceResponse } from '@/types/global';
+
+import { SystemRole } from '@/types/system-role';
+import { SystemPermission } from '@/types/system-permission';
+import axios from 'axios';
+
+export default class useRoleApi {
+  static statusOption = [
+    { value: 1, label: '启用' },
+    { value: 0, label: '禁用' },
+  ];
+
+  static async get(params?: QueryForParams): Promise<ServiceResponse<SystemRole[]>> {
+    return axios.get('system/roles', { params });
+  }
+
+  static async create(data: AnyObject): Promise<SystemRole> {
+    return axios.post('system/roles', data).then((res) => Promise.resolve(res.data));
+  }
+
+  static async update(id: number, data: AnyObject): Promise<SystemRole> {
+    return axios.put(`system/roles/${id}`, data).then((res) => Promise.resolve(res.data));
+  }
+
+  static async changeStatus(id: number, status: number) {
+    return axios.put(`system/roles/${id}/change-status`, { status });
+  }
+
+  static async changePermission(id: number, permission: number[]) {
+    return axios.put(`system/roles/${id}/change-permission`, { permission });
+  }
+
+  static async destroy(id: number) {
+    return axios.delete(`system/roles/${id}`).then((res) => Promise.resolve(res.data));
+  }
+}
+
+export class usePermissionApi {
+  static async get(params?: QueryForParams): Promise<ServiceResponse<SystemPermission[]>> {
+    return axios.get('system/permissions', { params });
+  }
+}

+import { AnyObject, QueryForParams, ServiceResponse } from '@/types/global';
+
+import { Tag } from '@/types/star-tags';
+import axios from 'axios';
+
+export default class useTagApi {
+  static frameOption = [
+    { label: '需要边框', value: 1 },
+    { label: '不需要边框', value: 2 },
+  ];
+
+  static indexFilterOption = [
+    { label: '首页可筛选', value: 1 },
+    { label: '首页不可筛选', value: 0 },
+  ];
+
+  static statusOption = [
+    { label: '开启', value: 1 },
+    { label: '禁用', value: 0 },
+  ];
+
+  static async get(params?: QueryForParams): Promise<ServiceResponse<Tag[]>> {
+    return axios.get('system/user_tags', { params });
+  }
+
+  static async create(data: AnyObject): Promise<Tag> {
+    return axios.post('system/user_tags', data).then((res) => Promise.resolve(res.data));
+  }
+
+  static async update(id: number, data: AnyObject): Promise<Tag> {
+    return axios.put(`system/user_tags/${id}`, data).then((res) => Promise.resolve(res.data));
+  }
+
+  static async destroy(id: number) {
+    return axios.delete(`system/user_tags/${id}`).then((res) => Promise.resolve(res.data));
+  }
+}

+import { AttributeData, QueryForParams, ServiceResponse } from '@/types/global';
+
+import { Activity } from '@/types/activity';
+import axios, { AxiosRequestConfig } from 'axios';
+import { User, UserCertify, UserDynamics, UserManageActivity, UserMember, UserSubmitActivity } from '@/utils/model';
+import FileSaver from 'file-saver';
+
+export default class useUserApi {
+  static statusOption = [
+    { label: '启用', value: 1 },
+    { label: '禁用', value: 0 },
+    { label: '注销', value: 2 },
+  ];
+
+  static officialStatusOption = [
+    { label: '已关注', value: 1 },
+    { label: '未关注', value: 0 },
+  ];
+
+  static sexOption = [
+    { label: '男', value: 1 },
+    { label: '女', value: 2 },
+    { label: '无', value: 0 },
+  ];
+
+  static scopeOption = [
+    { label: '无权限', value: 0 },
+    { label: '平台管理员', value: 1 },
+    { label: '厂牌管理员', value: 2 },
+  ];
+
+  static get(params?: QueryForParams, config = {}): Promise<ServiceResponse<User[]>> {
+    return axios.get(`user`, { params, ...config });
+  }
+
+  static async show(id: number, params?: QueryForParams): Promise<User> {
+    return axios.get(`user/${id}`, { params }).then((res) => Promise.resolve(res.data));
+  }
+
+  static async update(id: number, data: AttributeData): Promise<User> {
+    return axios.put(`user/${id}`, data).then((res) => Promise.resolve(res.data));
+  }
+
+  static destroy(id: number) {
+    return axios.delete(`user/${id}`);
+  }
+
+  static changeStatus(id: number, status: 1 | 0) {
+    return axios.put(`user/${id}/change-status`, { status });
+  }
+
+  static changePwd(id: number, data: { password: string; password_confirmation: string }) {
+    return axios.put(`user/${id}/change-pwd`, data);
+  }
+
+  static listenSongs(id: number, params?: QueryForParams): Promise<ServiceResponse<Activity[]>> {
+    return axios.get(`user/${id}/listen-songs`, { params });
+  }
+
+  static likeSongs(id: number, params?: QueryForParams): Promise<ServiceResponse<Activity[]>> {
+    return axios.get(`user/${id}/like-songs`, { params });
+  }
+
+  static manageSongs(id: number, params?: QueryForParams): Promise<ServiceResponse<UserManageActivity[]>> {
+    return axios.get(`user/${id}/manage-songs`, { params });
+  }
+
+  static submitSongs(id: number, params?: QueryForParams): Promise<ServiceResponse<UserSubmitActivity[]>> {
+    return axios.get(`user/${id}/submit-songs`, { params });
+  }
+
+  static singers(id: number, params?: QueryForParams): Promise<ServiceResponse<User[]>> {
+    return axios.get(`user/${id}/singers`, { params });
+  }
+
+  static dynamics(id: number, params?: QueryForParams): Promise<ServiceResponse<UserDynamics[]>> {
+    return axios.get(`user/${id}/dynamics`, { params });
+  }
+}
+
+export class useCertifyApi {
+  static sexOption = useUserApi.sexOption;
+
+  static statusOption = [
+    { label: '待审核', value: 0 },
+    { label: '通过', value: 1 },
+    { label: '拒绝', value: 2 },
+  ];
+
+  // eslint-disable-next-line class-methods-use-this
+  static get(params?: QueryForParams): Promise<ServiceResponse<UserCertify[]>> {
+    return axios.get('user/certifies', { params });
+  }
+
+  static async update(id: number, data: { status: number; reason: string }): Promise<UserCertify> {
+    return axios.put(`user/certifies/${id}`, data).then((res) => Promise.resolve(res.data));
+  }
+}
+
+export class useRegisterApi extends useUserApi {
+  static get(params?: QueryForParams): Promise<ServiceResponse<User[]>> {
+    return axios.get('user/registers', { params });
+  }
+
+  static async getExport(fileName: string, params?: QueryForParams) {
+    const config = { params: { ...params, fetchType: 'excel' }, timeout: 60000, responseType: 'blob' } as AxiosRequestConfig;
+    return axios.get('user/registers', config).then(({ data }) => FileSaver.saveAs(data, `${fileName}.xlsx`));
+  }
+}
+
+export class useSingerApi extends useUserApi {
+  static get(params?: QueryForParams): Promise<ServiceResponse<User[]>> {
+    return axios.get('user/singers', { params });
+  }
+
+  static async getExport(fileName: string, params?: QueryForParams) {
+    const config = { params: { ...params, fetchType: 'excel' }, timeout: 60000, responseType: 'blob' } as AxiosRequestConfig;
+    return axios.get('user/singers', config).then(({ data }) => FileSaver.saveAs(data, `${fileName}.xlsx`));
+  }
+}
+
+export class useBusinessApi extends useUserApi {
+  static get(params?: QueryForParams): Promise<ServiceResponse<User[]>> {
+    return axios.get('user/business', { params });
+  }
+
+  static async getExport(fileName: string, params?: QueryForParams) {
+    const config = { params: { ...params, fetchType: 'excel' }, timeout: 60000, responseType: 'blob' } as AxiosRequestConfig;
+    return axios.get('user/business', config).then(({ data }) => FileSaver.saveAs(data, `${fileName}.xlsx`));
+  }
+}
+
+export class useMemberApi {
+  static get(userId: number, params?: QueryForParams): Promise<ServiceResponse<UserMember[]>> {
+    return axios.get(`user/${userId}/members`, { params });
+  }
+
+  static destroy(userId: number) {
+    return axios.delete(`user/${userId}/members`);
+  }
+}

+import { AttributeData, QueryForParams, ServiceResponse } from '@/types/global';
+
+import { AppVersion } from '@/types/app-version';
+import axios from 'axios';
+
+export default class useVersionApi {
+  static systemOption = [
+    { label: 'Android', value: 'android' },
+    { label: 'IOS', value: 'ios' },
+  ];
+
+  static forceOption = [
+    { label: '是', value: 1 },
+    { label: '否', value: 0 },
+  ];
+
+  static get(params?: QueryForParams): Promise<ServiceResponse<AppVersion[]>> {
+    return axios.get('system/versions', { params });
+  }
+
+  static async create(data: AttributeData) {
+    return axios.post('system/versions', data).then((res) => Promise.resolve(res.data));
+  }
+
+  static async update(id: number, data: AttributeData) {
+    return axios.put(`system/versions/${id}`, data).then((res) => Promise.resolve(res.data));
+  }
+
+  static async destroy(id: number) {
+    return axios.delete(`system/versions/${id}`).then((res) => Promise.resolve(res.data));
+  }
+}

+<script lang="tsx">
+  import { compile, computed, defineComponent, h, ref, watch } from 'vue';
+
+  import { RouteRecordRaw, useRoute, useRouter } from 'vue-router';
+  import { useAppStore, useAuthorizedStore } from '@/store';
+  import usePermission from '@/hooks/permission';
+  import { last, orderBy } from 'lodash';
+  import { storeToRefs } from 'pinia';
+  import { useIntervalFn } from '@vueuse/core';
+
+  export default defineComponent({
+    emit: ['collapse'],
+    setup() {
+      const appStore = useAppStore();
+      const permission = usePermission();
+      const authorizedStore = useAuthorizedStore();
+      const router = useRouter();
+      const route = useRoute();
+
+      const { appMenu } = storeToRefs(appStore);
+      const { auditUserCount, auditActivityCount, activityApplyFailCount, permissions } = storeToRefs(authorizedStore);
+      const collapsed = ref(false);
+
+      const formatBadgeNum = (num: number) => {
+        return num <= 99 ? num : '99+';
+      };
+
+      const userBadge = computed((): number => {
+        let count = 0;
+        if (permissions.value?.includes('user-certify')) {
+          count += auditUserCount.value as number;
+        }
+        return count;
+      });
+
+      const auditionBadge = computed((): number => {
+        let count = 0;
+        if (permissions.value?.includes('audition-activity-audit')) {
+          count += auditActivityCount.value as number;
+        }
+        if (permissions.value?.includes('audition-activity-apply')) {
+          count += activityApplyFailCount.value as number;
+        }
+        return count;
+      });
+
+      useIntervalFn(() => {
+        authorizedStore.syncAuditUser();
+        authorizedStore.syncAuditActivity();
+      }, 30000);
+
+      const syncServicePermission = (item: RouteRecordRaw) => {
+        if (item.meta) {
+          const serverConfig = appMenu.value.find((menu) => item.name === menu.name);
+          item.meta.title = serverConfig?.label || item.meta?.title || '';
+          item.meta.order = serverConfig?.weight || item.meta?.order || 0;
+          item.meta.icon = serverConfig?.icon || item.meta?.icon || '';
+        }
+        item.children?.map((child) => syncServicePermission(child));
+        return item;
+      };
+
+      const appRoute = computed((): RouteRecordRaw[] => {
+        return router
+          .getRoutes()
+          .find((el) => el.name === 'root')
+          ?.children.filter((element) => element.meta?.hideInMenu !== true)
+          .map((item: RouteRecordRaw) => syncServicePermission(item)) as RouteRecordRaw[];
+      });
+
+      const menuTree = computed((): RouteRecordRaw[] => {
+        function travel(_routes: RouteRecordRaw[], layer: number) {
+          if (!_routes) return null;
+          const collector: any = orderBy(_routes, 'meta.order', 'desc').map((element) => {
+            // no access
+            if (!permission.accessRouter(element)) {
+              return null;
+            }
+
+            // leaf node
+            if (!element.children) {
+              return element;
+            }
+
+            // route filter hideInMenu true
+            element.children = element.children.filter((x) => x.meta?.hideInMenu !== true);
+
+            // Associated child node
+            const subItem = travel(element.children, layer);
+            if (subItem.length) {
+              element.children = subItem;
+              return element;
+            }
+            // the else logic
+            if (layer > 1) {
+              element.children = subItem;
+              return element;
+            }
+
+            if (element.meta?.hideInMenu === false) {
+              return element;
+            }
+
+            return null;
+          });
+
+          return collector.filter(Boolean);
+        }
+
+        return travel(appRoute.value, 0);
+      });
+
+      // In this case only two levels of menus are available
+      // You can expand as needed
+
+      const selectedKey = ref<string[]>([]);
+      const openKey = ref<string[]>([]);
+
+      const goto = (item: RouteRecordRaw) => {
+        router.push({ name: item.name });
+      };
+      watch(
+        route,
+        (newVal) => {
+          if (newVal.meta.requiresAuth) {
+            const key = newVal.meta.hideInMenu ? last(newVal.matched)?.meta?.menuSelectKey : last(newVal.matched)?.name;
+            selectedKey.value = [key as string];
+            openKey.value = newVal.meta.breadcrumb || [];
+          }
+        },
+        { immediate: true }
+      );
+      watch(
+        () => appStore.menuCollapse,
+        (newVal) => {
+          collapsed.value = newVal;
+        },
+        { immediate: true }
+      );
+      const setCollapse = (val: boolean) => appStore.updateSettings({ menuCollapse: val });
+
+      const renderSubMenu = () => {
+        function travel(_route: RouteRecordRaw[], nodes = []) {
+          if (_route) {
+            _route.forEach((element) => {
+              let icon = element?.meta?.icon ? `<${element?.meta?.icon}/>` : ``;
+              let title = `<span>${element.meta?.title}</span>`;
+
+              if (element?.name === 'user' && userBadge.value !== 0) {
+                if (icon && collapsed.value) {
+                  icon = `<a-badge :count="${userBadge.value}" :offset="[2, -2]" dot>${icon}</a-badge>`;
+                }
+                title += `<span class="menu-number">${formatBadgeNum(userBadge.value)}</span>`;
+              }
+              if (element?.name === 'audition' && auditionBadge.value !== 0) {
+                if (icon && collapsed.value) {
+                  icon = `<a-badge :count="${auditionBadge.value}" :offset="[4, -2]" dot>${icon}</a-badge>`;
+                }
+                title += `<span class="menu-number">${formatBadgeNum(auditionBadge.value)}</span>`;
+              }
+
+              let r;
+
+              if (element && element.children) {
+                r = (
+                  <a-sub-menu key={element?.name} v-slots={{ icon: () => h(compile(icon)), title: () => h(compile(title)) }}>
+                    {element?.children?.map((elem) => {
+                      return (
+                        <a-menu-item key={elem.name} onClick={() => goto(elem)}>
+                          <span>{elem.meta?.title}</span>
+                          {elem.name === 'user-certify' && auditUserCount.value !== 0 ? (
+                            <span class="menu-number">{formatBadgeNum(auditUserCount.value as number)}</span>
+                          ) : (
+                            ''
+                          )}
+                          {elem.name === 'audition-activity-audit' && auditActivityCount.value !== 0 ? (
+                            <span class="menu-number">{formatBadgeNum(auditActivityCount.value as number)}</span>
+                          ) : (
+                            ''
+                          )}
+                          {elem.name === 'audition-activity-apply' && activityApplyFailCount.value !== 0 ? (
+                            <span class="menu-number">{formatBadgeNum(activityApplyFailCount.value as number)}</span>
+                          ) : (
+                            ''
+                          )}
+                          {travel(elem.children ?? [])}
+                        </a-menu-item>
+                      );
+                    })}
+                  </a-sub-menu>
+                );
+              } else {
+                r = (
+                  <a-menu-item key={element.name} v-slots={{ icon: () => h(compile(icon)) }} onClick={() => goto(element)}>
+                    {element.meta?.title}
+                  </a-menu-item>
+                );
+              }
+              nodes.push(r as never);
+            });
+          }
+          return nodes;
+        }
+
+        return travel(menuTree.value);
+      };
+
+      return () => (
+        <a-menu
+          v-model:collapsed={collapsed.value}
+          show-collapse-button
+          v-model:selected-keys={selectedKey.value}
+          v-model:open-keys={openKey.value}
+          auto-open-selected={true}
+          level-indent={34}
+          style={{ height: '100%' }}
+          onCollapse={setCollapse}
+        >
+          {renderSubMenu()}
+        </a-menu>
+      );
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  :deep(.arco-menu-inner) {
+    .arco-menu-inline-header {
+      display: flex;
+      align-items: center;
+    }
+
+    .arco-icon {
+      &:not(.arco-icon-down) {
+        font-size: 18px;
+      }
+    }
+  }
+
+  .menu-number {
+    background-color: red;
+    color: #fff;
+    margin-left: 12px;
+    padding: 0 6px;
+    border-radius: 8px;
+    font-size: 12px;
+    font-weight: 500;
+  }
+</style>

+<template>
+  <div class="navbar">
+    <div class="left-side">
+      <a-space>
+        <img alt="logo" src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/dfdba5317c0c20ce20e64fac803d52bc.svg~tplv-49unhts6dw-image.image" />
+        <a-typography-title :heading="5" :style="{ margin: 0, fontSize: '18px' }"> 海星试唱</a-typography-title>
+      </a-space>
+    </div>
+    <ul class="right-side">
+      <!--      <li>-->
+      <!--        <toggle-theme-button />-->
+      <!--      </li>-->
+      <!--      <li>-->
+      <!--        <a-tooltip :content="$t('settings.navbar.alerts')">-->
+      <!--          <div class="message-box-trigger">-->
+      <!--            <a-badge :count="9" dot>-->
+      <!--              <a-button-->
+      <!--                :shape="'circle'"-->
+      <!--                class="nav-btn"-->
+      <!--                type="outline"-->
+      <!--                @click="setPopoverVisible"-->
+      <!--              >-->
+      <!--                <icon-notification />-->
+      <!--              </a-button>-->
+      <!--            </a-badge>-->
+      <!--          </div>-->
+      <!--        </a-tooltip>-->
+      <!--        <a-popover-->
+      <!--          :arrow-style="{ display: 'none' }"-->
+      <!--          :content-style="{ padding: 0, minWidth: '400px' }"-->
+      <!--          content-class="message-popover"-->
+      <!--          trigger="click"-->
+      <!--        >-->
+      <!--          <div ref="refBtn" class="ref-btn"></div>-->
+      <!--          <template #content>-->
+      <!--            <message-box />-->
+      <!--          </template>-->
+      <!--        </a-popover>-->
+      <!--      </li>-->
+      <li>
+        <a-dropdown trigger="hover">
+          <a-space align="center">
+            <a-avatar v-if="avatar" :size="32" :image-url="avatar" />
+            <div :style="{ color: theme === 'dark' ? 'white' : 'black', lineHeight: '32px' }">
+              <span>{{ name }}</span>
+              <icon-down />
+            </div>
+          </a-space>
+          <template #content>
+            <!--            <a-doption>-->
+            <!--              <a-space @click="switchRoles">-->
+            <!--                <icon-tag />-->
+            <!--                <span>-->
+            <!--                  {{ $t('messageBox.switchRoles') }}-->
+            <!--                </span>-->
+            <!--              </a-space>-->
+            <!--            </a-doption>-->
+            <a-doption>
+              <a-space @click="handleChangePwd">
+                <icon-lock />
+                <span>修改密码</span>
+              </a-space>
+            </a-doption>
+            <a-doption>
+              <a-space @click="handleLogout">
+                <icon-export />
+                <span> 退出登录 </span>
+              </a-space>
+            </a-doption>
+          </template>
+        </a-dropdown>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { computed } from 'vue';
+  import { useAppStore, useAuthorizedStore } from '@/store';
+  import useUser from '@/hooks/user';
+  // import ToggleThemeButton from '@/layout/components/toggle-theme-button.vue';
+  import { IconDown, IconExport, IconLock } from '@arco-design/web-vue/es/icon';
+
+  const appStore = useAppStore();
+  const authorized = useAuthorizedStore();
+
+  const avatar = computed(() => {
+    return authorized.avatar;
+  });
+
+  const name = computed(() => {
+    return authorized.nick_name;
+  });
+
+  const { theme } = appStore;
+
+  // const theme = computed(() => {
+  //   return appStore.theme;
+  // });
+
+  // const setVisible = () => {
+  //   appStore.updateSettings({ globalSettings: true });
+  // };
+  // const refBtn = ref();
+  // const triggerBtn = ref();
+  // const setPopoverVisible = () => {
+  //   const event = new MouseEvent('click', {
+  //     view: window,
+  //     bubbles: true,
+  //     cancelable: true,
+  //   });
+  //   refBtn.value.dispatchEvent(event);
+  // };
+  const handleLogout = () => authorized.logout();
+
+  const handleChangePwd = () => useUser().resetPwd();
+  // const setDropDownVisible = () => {
+  //   const event = new MouseEvent('click', {
+  //     view: window,
+  //     bubbles: true,
+  //     cancelable: true,
+  //   });
+  //   triggerBtn.value.dispatchEvent(event);
+  // };
+</script>
+
+<style lang="less" scoped>
+  .navbar {
+    display: flex;
+    justify-content: space-between;
+    height: 100%;
+    background-color: var(--color-bg-2);
+    border-bottom: 1px solid var(--color-border);
+  }
+
+  .left-side {
+    display: flex;
+    align-items: center;
+    padding-left: 20px;
+  }
+
+  .right-side {
+    display: flex;
+    padding-right: 10px;
+    list-style: none;
+
+    :deep(.locale-select) {
+      border-radius: 20px;
+    }
+
+    li {
+      display: flex;
+      align-items: center;
+      padding: 0 10px;
+    }
+
+    a {
+      color: var(--color-text-1);
+      text-decoration: none;
+    }
+
+    .nav-btn {
+      border-color: rgb(var(--gray-2));
+      color: rgb(var(--gray-8));
+      font-size: 16px;
+    }
+
+    .trigger-btn,
+    .ref-btn {
+      position: absolute;
+      bottom: 14px;
+    }
+
+    .trigger-btn {
+      margin-left: 14px;
+    }
+  }
+</style>
+
+<style lang="less">
+  .message-popover {
+    .arco-popover-content {
+      margin-top: 0;
+    }
+  }
+
+  .arco-dropdown-open .arco-icon-down {
+    transform: rotate(180deg);
+  }
+</style>

+<template>
+  <a-tooltip :content="theme === 'light' ? '切换为暗黑模式' : '切换为亮色模式'">
+    <a-button :shape="'circle'" class="nav-btn" type="outline" @click="() => onChange()">
+      <template #icon>
+        <icon-moon-fill v-if="theme === 'dark'" />
+        <icon-sun-fill v-else />
+      </template>
+    </a-button>
+  </a-tooltip>
+</template>
+
+<script lang="ts">
+  import { computed, defineComponent } from 'vue';
+  import { useAppStore } from '@/store';
+  import { useDark, useToggle } from '@vueuse/core';
+
+  import { IconMoonFill, IconSunFill } from '@arco-design/web-vue/es/icon';
+
+  export default defineComponent({
+    name: 'ToggleThemeButton',
+    components: {
+      IconSunFill,
+      IconMoonFill,
+    },
+    setup() {
+      const appStore = useAppStore();
+
+      const theme = computed(() => {
+        return appStore.theme;
+      });
+
+      const isDark = useDark({
+        selector: 'body',
+        attribute: 'arco-theme',
+        valueDark: 'dark',
+        valueLight: 'light',
+        storageKey: 'arco-theme',
+        onChanged(dark: boolean) {
+          appStore.toggleTheme(dark);
+        },
+      });
+      const onChange = useToggle(isDark);
+
+      return {
+        theme,
+        onChange,
+      };
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  .nav-btn {
+    border-color: rgb(var(--gray-2));
+    color: rgb(var(--gray-8));
+    font-size: 16px;
+  }
+
+  .trigger-btn,
+  .ref-btn {
+    position: absolute;
+    bottom: 14px;
+  }
+
+  .trigger-btn {
+    margin-left: 14px;
+  }
+</style>

+<template>
+  <a-layout class="layout">
+    <div class="layout-navbar">
+      <Navbar />
+    </div>
+    <a-layout>
+      <a-layout>
+        <a-layout-sider
+          v-if="menu"
+          :breakpoint="'xl'"
+          :collapsed="collapse"
+          :collapsible="true"
+          :hide-trigger="true"
+          :style="{ paddingTop: '60px' }"
+          :width="menuWidth"
+          class="layout-sider"
+          @collapse="setCollapsed"
+        >
+          <div class="menu-wrapper">
+            <Menu />
+          </div>
+        </a-layout-sider>
+        <a-layout :style="paddingStyle" class="layout-content">
+          <a-layout-content>
+            <router-view />
+          </a-layout-content>
+        </a-layout>
+      </a-layout>
+    </a-layout>
+  </a-layout>
+</template>
+
+<script lang="ts">
+  import { computed, defineComponent, watch } from 'vue';
+  import { useRoute, useRouter } from 'vue-router';
+  import { useAppStore, useAuthorizedStore } from '@/store';
+  import Menu from '@/layout/components/menu.vue';
+  import usePermission from '@/hooks/permission';
+  import Navbar from '@/layout/components/navbar.vue';
+
+  export default defineComponent({
+    components: {
+      Navbar,
+      Menu,
+    },
+    setup() {
+      const appStore = useAppStore();
+      const authorizedStore = useAuthorizedStore();
+      const router = useRouter();
+      const route = useRoute();
+      const permission = usePermission();
+      const navbarHeight = `60px`;
+      const menu = computed(() => appStore.menu);
+      const menuWidth = computed(() => {
+        return appStore.menuCollapse ? 48 : appStore.menuWidth;
+      });
+      const collapse = computed(() => {
+        return appStore.menuCollapse;
+      });
+      const paddingStyle = computed(() => {
+        const paddingLeft = menu.value ? { paddingLeft: `${menuWidth.value}px` } : {};
+        const paddingTop = { paddingTop: navbarHeight };
+        return { ...paddingLeft, ...paddingTop };
+      });
+      const setCollapsed = (val: boolean) => {
+        appStore.updateSettings({ menuCollapse: val });
+      };
+      watch(
+        () => authorizedStore.permissions,
+        (roleValue) => {
+          if (roleValue && !permission.accessRouter(route)) router.push({ name: 'notFound' });
+        }
+      );
+      return {
+        menu,
+        menuWidth,
+        paddingStyle,
+        collapse,
+        setCollapsed,
+      };
+    },
+  });
+</script>
+
+<style lang="less" scoped>
+  @nav-size-height: 60px;
+  @layout-max-width: 1100px;
+
+  .layout {
+    width: 100%;
+    height: 100%;
+  }
+
+  .layout-navbar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 100;
+    width: 100%;
+    min-width: @layout-max-width;
+    height: @nav-size-height;
+  }
+
+  .layout-sider {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 99;
+    height: 100%;
+
+    &::after {
+      position: absolute;
+      top: 0;
+      right: -1px;
+      display: block;
+      width: 1px;
+      height: 100%;
+      background-color: var(--color-border);
+      content: '';
+    }
+
+    > :deep(.arco-layout-sider-children) {
+      overflow-y: hidden;
+    }
+  }
+
+  .menu-wrapper {
+    height: 100%;
+    overflow: auto;
+    overflow-x: hidden;
+
+    :deep(.arco-menu) {
+      ::-webkit-scrollbar {
+        width: 12px;
+        height: 4px;
+      }
+
+      ::-webkit-scrollbar-thumb {
+        border: 4px solid transparent;
+        background-clip: padding-box;
+        border-radius: 7px;
+        background-color: var(--color-text-4);
+      }
+
+      ::-webkit-scrollbar-thumb:hover {
+        background-color: var(--color-text-3);
+      }
+    }
+  }
+
+  .layout-content {
+    min-width: @layout-max-width;
+    min-height: 100vh;
+    overflow-y: hidden;
+    background-color: var(--color-fill-2);
+    transition: padding-left 0.2s;
+  }
+</style>

+import { createApp } from 'vue';
+import ArcoVue from '@arco-design/web-vue';
+import ArcoVueIcon from '@arco-design/web-vue/es/icon';
+import globalComponents from '@/components';
+import directive from './directive';
+import App from './App.vue';
+import '@arco-design/web-vue/dist/arco.css';
+import '@/assets/style/global.less';
+import 'vue3-colorpicker/style.css';
+import '@/http/interceptor';
+
+import store from './store';
+
+import router from './router';
+
+const app = createApp(App);
+
+app.use(ArcoVue, {});
+app.use(ArcoVueIcon);
+
+app.use(store);
+app.use(router);
+app.use(globalComponents);
+app.use(directive);
+
+app.mount('#app');