Init

+#VITE_API_URL=https://service.hising.orb.local
+VITE_API_URL=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": 'off',
+    // '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,
+    "vue/first-attribute-linebreak": ["error", {
+      "singleline": "ignore",
+      "multiline": "ignore"
+    }]
+  },
+};

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

+/dist/*
+.local
+.output.js
+/node_modules/**
+
+**/*.svg

+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',
+    'stylelint-config-recommended-vue',
+  ],
+  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'],
+};

+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+import '@vue/runtime-core'
+
+export {}
+
+declare module '@vue/runtime-core' {
+  export interface GlobalComponents {
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+  }
+}

+/**
+ * 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项目中是全量引入组件，但此插件会默认使用。
+ */
+import Components from 'unplugin-vue-components/vite';
+import { ArcoResolver } from 'unplugin-vue-components/resolvers';
+
+export default function configArcoResolverPlugin() {
+  const arcoResolverPlugin = Components({
+    dirs: [], // Avoid parsing src/components.  避免解析到src/components
+    deep: false,
+    resolvers: [ArcoResolver()],
+  });
+  return arcoResolverPlugin;
+}

+/**
+ * Theme import
+ * 样式按需引入
+ * https://github.com/arco-design/arco-plugins/blob/main/packages/plugin-vite-vue/README.md
+ * https://arco.design/vue/docs/start
+ */
+import { vitePluginForArco } from '@arco-plugins/vite-vue';
+
+export default function configArcoStyleImportPlugin() {
+  const arcoResolverPlugin = vitePluginForArco({});
+  return arcoResolverPlugin;
+}

+/**
+ * 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;
+}

+/**
+ * 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 { resolve } from 'path';
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import vueJsx from '@vitejs/plugin-vue-jsx';
+import svgLoader from 'vite-svg-loader';
+import configArcoStyleImportPlugin from './plugin/arcoStyleImport';
+
+export default defineConfig({
+  plugins: [vue(), vueJsx(), svgLoader({ svgoConfig: {} }), configArcoStyleImportPlugin()],
+  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'],
+  },
+  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 configImageminPlugin from "./plugin/imagemin";
+import VitePluginOss from "vite-plugin-oss";
+
+const config = loadEnv("production", "");
+
+const ossPath = `vendor/user/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(),
+      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,
+      fs: {
+        strict: false,
+      },
+    },
+    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 configImageminPlugin from './plugin/imagemin';
+
+export default mergeConfig(
+  {
+    mode: 'production',
+    server: {
+      https: true,
+    },
+    plugins: [configCompressPlugin('gzip'), configVisualizerPlugin(), configArcoResolverPlugin(), 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": "vue-tsc --noEmit && 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"
+  },
+  "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.44.7",
+    "@vueuse/core": "^7.3.0",
+    "arco-design-pro-vue": "^2.7.2",
+    "axios": "^1.6.0",
+    "dayjs": "^1.11.5",
+    "echarts": "^5.4.0",
+    "lodash-es": "^4.17.21",
+    "mitt": "^3.0.0",
+    "nprogress": "^0.2.0",
+    "pinia": "^2.0.23",
+    "query-string": "^8.0.3",
+    "sortablejs": "^1.15.0",
+    "vue": "^3.3.11",
+    "vue-echarts": "^6.2.3",
+    "vue-i18n": "^9.2.2",
+    "vue-router": "^4.0.14",
+    "ali-oss": "^6.17.1",
+    "file-saver": "^2.0.5",
+    "rabbit-lyrics": "^2.1.1"
+  },
+  "devDependencies": {
+    "@types/ali-oss": "^6.16.3",
+    "@types/file-saver": "^2.0.5",
+    "@arco-plugins/vite-vue": "^1.4.5",
+    "@commitlint/cli": "^17.1.2",
+    "@commitlint/config-conventional": "^17.1.0",
+    "@types/lodash": "^4.14.186",
+    "@types/lodash-es": "^4.17.12",
+    "@types/nprogress": "^0.2.0",
+    "@types/sortablejs": "^1.15.0",
+    "@typescript-eslint/eslint-plugin": "^5.40.0",
+    "@typescript-eslint/parser": "^5.40.0",
+    "@vitejs/plugin-vue": "^3.1.2",
+    "@vitejs/plugin-vue-jsx": "^2.0.1",
+    "@vue/babel-plugin-jsx": "^1.1.1",
+    "@vueuse/router": "^10.3.0",
+    "consola": "^2.15.3",
+    "cross-env": "^7.0.3",
+    "eslint": "^8.25.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-import-resolver-typescript": "^3.5.1",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-vue": "^9.6.0",
+    "less": "^4.1.3",
+    "lint-staged": "^13.0.3",
+    "postcss-html": "^1.5.0",
+    "prettier": "^2.7.1",
+    "rollup": "^3.9.1",
+    "rollup-plugin-visualizer": "^5.8.2",
+    "stylelint": "^14.13.0",
+    "stylelint-config-prettier": "^9.0.3",
+    "stylelint-config-rational-order": "^0.1.2",
+    "stylelint-config-standard": "^29.0.0",
+    "stylelint-order": "^5.0.0",
+    "typescript": "^4.8.4",
+    "unplugin-vue-components": "^0.24.1",
+    "vite": "^3.2.5",
+    "vite-plugin-compression": "^0.5.1",
+    "vite-plugin-eslint": "^1.8.1",
+    "vite-plugin-imagemin": "^0.6.1",
+    "vite-plugin-oss": "^1.2.13",
+    "vite-svg-loader": "^3.6.0",
+    "vue-tsc": "^1.0.14"
+  },
+  "engines": {
+    "node": ">=14.0.0"
+  },
+  "resolutions": {
+    "bin-wrapper": "npm:bin-wrapper-china", 
+    "rollup": "^2.56.3",
+    "gifsicle": "5.2.0"
+  },
+  "volta": { 
+    "node": "18.3.0",
+    "yarn": "1.22.19"
+  }
+}

+<template>
+  <a-config-provider size="small">
+    <router-view />
+  </a-config-provider>
+</template>

+// eslint-disable-next-line max-classes-per-file
+import { AnyObject, QueryForParams, ServiceResponse } from '@/types/global';
+import axios from 'axios';
+import { ActivityApply } from '@/types/activity-apply';
+import { Activity, ActivityViewUser } from '@/types/activity';
+
+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 async get(params: QueryForParams): Promise<ServiceResponse<Activity[]>> {
+    return axios.get('/activities', { params });
+  }
+
+  static async show(id: number, params?: QueryForParams): Promise<Activity> {
+    return axios.get(`/activities/${id}`, { params }).then((res) => Promise.resolve(res.data));
+  }
+
+  static async changeStatus(id: number, data: AnyObject) {
+    return axios.put<Activity>(`/activities/${id}/change-status`, data).then((res) => Promise.resolve(res.data));
+  }
+
+  static async update(id: number, data: AnyObject): Promise<Activity> {
+    return axios.put(`/activities/${id}`, data).then((res) => Promise.resolve(res.data));
+  }
+
+  static async destroy(id: number) {
+    return axios.delete(`/activities/${id}`).then((res) => Promise.resolve(res.data));
+  }
+
+  static async getManageUser(activityId: number, params: QueryForParams): Promise<any> {
+    return axios.get(`/audition/activities/${activityId}/managers`, { params });
+  }
+
+  static async createManage(data: AnyObject): Promise<any> {
+    return axios.post('/audition/activity-managers', data).then((res) => Promise.resolve(res.data));
+  }
+
+  static async updateManage(id: number, data: AnyObject): Promise<any> {
+    return axios.put(`/audition/activity-managers/${id}`, data).then((res) => Promise.resolve(res.data));
+  }
+
+  static async deleteManage(id: number): Promise<any> {
+    return axios.delete(`/audition/activity-managers/${id}`).then((res) => Promise.resolve(res.data));
+  }
+
+  static async getViewUser(activityId: number, params: QueryForParams): Promise<ServiceResponse<ActivityViewUser[]>> {
+    return axios.get(`/activities/${activityId}/views`, { params });
+  }
+
+  static async getLikeUser(activityId: number, params: QueryForParams): Promise<ServiceResponse<ActivityViewUser[]>> {
+    return axios.get(`/activities/${activityId}/collects`, { params });
+  }
+}
+
+export class useApply {
+  static auditStatusOption = [
+    { 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) {
+    return axios.post('/activities', data).then((res) => Promise.resolve(res.data));
+  }
+
+  static async update(id: number, data: AnyObject) {
+    return axios.put(`audition/applies/${id}`, data).then((res) => Promise.resolve(res.data));
+  }
+
+  static async destroy(id: number) {
+    return axios.delete(`/audition/applies/${id}`);
+  }
+}
+

+import axios from "axios";
+import { AuthorizedState } from "@/store/modules/authorized/type";
+import FileSaver from "file-saver";
+
+export default class useAuthApi {
+  static async info() {
+    return axios
+      .get<{
+        user: AuthorizedState;
+        permissions: string[];
+        menus: string[];
+        can_create_demo: number
+      }>("auth/info")
+      .then((res) => Promise.resolve(res.data));
+  }
+
+  static changePwd(data: { password: string; password_confirmation: string }) {
+    return axios.put("auth/change-pwd", data);
+  }
+
+  static async downloadFile(url: string, fileName: string) {
+    // ?response-content-type=Blob
+    FileSaver.saveAs(`${url}`, fileName + url.substring(url.lastIndexOf(".")));
+  }
+}

+import axios from 'axios';
+import type { TableData } from '@arco-design/web-vue/es/table/interface';
+
+export interface ContentDataRecord {
+  x: string;
+  y: number;
+}
+
+export function queryContentData() {
+  return axios.get<ContentDataRecord[]>('/api/content-data');
+}
+
+export interface PopularRecord {
+  key: number;
+  clickNumber: string;
+  title: string;
+  increases: number;
+}
+
+export function queryPopularList(params: { type: string }) {
+  return axios.get<TableData[]>('/api/popular/list', { params });
+}

+import axios from 'axios';
+import type { AxiosRequestConfig, AxiosResponse } from 'axios';
+import { Message } from '@arco-design/web-vue';
+import { getToken } from '@/utils/auth';
+
+export interface HttpResponse<T = unknown> {
+  status: 'success' | 'fail' | 'error';
+  msg: string;
+  code: number;
+  data: T;
+}
+
+export interface ServiceResponse<T = unknown> extends HttpResponse<T> {
+  meta: { current: number; limit: number; total: number };
+}
+
+if (import.meta.env.VITE_API_URL) {
+  axios.defaults.baseURL = import.meta.env.VITE_API_URL;
+}
+
+axios.interceptors.request.use(
+  // @ts-ignore
+  (config: AxiosRequestConfig) => {
+    if (!config.url?.startsWith('/provider')) {
+      config.baseURL = `${config.baseURL}/user`;
+    }
+
+    const token = getToken();
+    if (token) {
+      if (!config.headers) {
+        config.headers = {};
+      }
+      config.headers.Authorization = `Bearer ${token}`;
+    }
+    return config;
+  },
+  (error) => {
+    // do something
+    return Promise.reject(error);
+  }
+);
+// add response interceptors
+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);
+  },
+  (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 axios from 'axios';
+
+export interface MessageRecord {
+  id: number;
+  type: string;
+  title: string;
+  subTitle: string;
+  avatar?: string;
+  content: string;
+  time: string;
+  status: 0 | 1;
+  messageType?: number;
+}
+export type MessageListType = MessageRecord[];
+
+export function queryMessageList() {
+  return axios.post<MessageListType>('/api/message/list');
+}
+
+interface MessageStatus {
+  ids: number[];
+}
+
+export function setMessageStatus(data: MessageStatus) {
+  return axios.post<MessageListType>('/api/message/read', data);
+}
+
+export interface ChatRecord {
+  id: number;
+  username: string;
+  content: string;
+  time: string;
+  isCollect: boolean;
+}
+
+export function queryChatList() {
+  return axios.post<ChatRecord[]>('/api/chat/list');
+}

+import { AnyObject } from '@/types/global';
+import axios from 'axios';
+
+export default class useProviderApi {
+  static sms(type: string, phone: string, area?: string) {
+    return axios.post('/provider/sms', { type, phone, area, platform: 'user' });
+  }
+
+  static async area() {
+    return axios.get('/provider/area');
+  }
+
+  static async config(params?: AnyObject) {
+    return axios.get('/provider/configs', { params })
+  }
+
+  static async login(type: 'phone' | 'email', data: object) {
+    return axios.post<{ access_token: string; refresh_token: string; nick_name: string }>('/provider/login', {
+      platform: 'user',
+      type,
+      ...data,
+    });
+  }
+}

+import { QueryForParams } from '@/types/global';
+import axios from 'axios';
+
+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 async manageSongs(id: number, params?: QueryForParams) {
+    return axios.get(`users/${id}/manage-songs`, { params });
+  }
+}

+<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;
+  backdrop-filter: blur(10px) !important;
+  /* Note: backdrop-filter has minimal browser support */
+
+  border-radius: 6px !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 {
+    font-size: 13px;
+    line-height: 15px;
+    display: flex;
+    align-items: center;
+    text-align: right;
+    color: #1d2129;
+    font-weight: bold;
+  }
+
+  .tooltip-value {
+    margin-left: 10px;
+  }
+
+  .tooltip-item-icon {
+    display: inline-block;
+    margin-right: 8px;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+  }
+}
+
+.general-card {
+  border-radius: 4px;
+  border: none;
+
+  &>.arco-card-header {
+    height: auto;
+    padding: 10px 20px 0 20px;
+    border: none;
+
+    &>.arco-card-header-title {
+      font-size: 15px;
+    }
+  }
+
+  &>.arco-card-body {
+    padding: 0 20px 20px 20px;
+  }
+}
+
+.split-line {
+  border-color: rgb(var(--gray-2));
+}
+
+.arco-table-cell {
+  .circle {
+    display: inline-block;
+    margin-right: 4px;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background-color: rgb(var(--blue-6));
+
+    &.pass {
+      background-color: rgb(var(--green-6));
+    }
+
+    &.warn {
+      background-color: rgb(var(--yellow-6));
+    }
+
+    &.err {
+      background-color: rgb(var(--red-6));
+    }
+  }
+}
+
+.mt-0 {
+  margin-bottom: 0;
+}
+
+.mt-20 {
+  margin-top: 20px;
+}
+
+.mb-0 {
+  margin-bottom: 0;
+}
+
+.color-grey {
+  color: rgba(44, 44, 44, 0.5)
+}
+
+.justify-center {
+  justify-content: center !important;
+}
+
+
+.retry {
+  div.arco-modal-header {
+    border-bottom: unset !important;
+  }
+
+  div.arco-modal-body {
+    padding: 0 24px 20px;
+  }
+}
+
+.link-hover:hover {
+  cursor: pointer !important;
+}
\ No newline at end of file

+<template>
+  <audio v-if="url" :id="uuid" :src="url" class="player" controls controlsList="nodownload noplaybackrate" @play="onPay" />
+</template>
+
+<script lang="ts" setup>
+import { nanoid } from 'nanoid';
+import { computed } from 'vue';
+
+defineProps<{ url: string; name: string }>();
+
+const uuid = computed(() => `audio-${nanoid()}`);
+
+const onPay = (e: any) => {
+  const audios = document.getElementsByTagName('audio');
+  [].forEach.call(audios, (i: HTMLAudioElement) => i !== e.target && i.pause());
+};
+</script>
+
+<style lang="less" scoped>
+.player {
+  height: 30px;
+  width: 100%;
+}
+</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">
+      <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 { defineComponent, ref, computed, nextTick } 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 { get } from 'lodash';
+import { isString, isUndefined } from '@/utils';
+
+const props = withDefaults(
+  defineProps<{
+    title?: string;
+    dataIndex?: string;
+    row?: string;
+    coverIndex?: string;
+    nameIndex?: string;
+    subIndex?: string;
+    tagIndex?: string;
+    projectIndex?: string;
+    hideSubTitle?: boolean;
+  }>(),
+  {
+    coverIndex: 'cover',
+    nameIndex: 'song_name',
+    subIndex: 'sub_title',
+    tagIndex: 'tags',
+    projectIndex: '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 label="关联用户" :show-colon="true" row-class="mb-0">
+              <TypographyText :ellipsis="{ rows: 1, showTooltip: true }">
+                {{ getRowColumn(record, projectIndex)?.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, TableColumn } from '@arco-design/web-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">
+    <template #cell="{ record }">
+      <Avatar :size="40" shape="circle">
+        <img alt="" :src="getValue(record)" :width="40" :height="40" />
+      </Avatar>
+    </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 { Options } from '@/types/global';
+import { eq, get } from 'lodash';
+import TableColumn from '@/components/filter/table-column.vue';
+
+const props = defineProps<{ title?: string; dataIndex?: string; option: Options[]; 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 { get } from 'lodash';
+import TableColumn from '@/components/filter/table-column.vue';
+
+const props = defineProps<{ title?: string; dataIndex?: string; nickIndex?: string; realIndex?: string }>();
+
+const fullName = (record: object) => {
+  let name = '';
+
+  if (props.nickIndex && get(record, props.nickIndex, '')) {
+    name += get(record, props.nickIndex, '');
+  }
+
+  if (props.realIndex && get(record, props.realIndex)) {
+    name += `(${get(record, props.realIndex, '')})`;
+  }
+
+  return name;
+};
+</script>
+
+<template>
+  <TableColumn v-bind="$attrs" :title="title" :data-index="dataIndex">
+    <template #default="{ record }"> {{ fullName(record) }}</template>
+  </TableColumn>
+</template>
+
+<style scoped lang="less"></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";
+
+withDefaults(defineProps<{ title?: string; dataIndex: string; areaIndex?: string }>(), {
+  areaIndex: "area_code"
+});
+
+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, TableData } 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 }: { record: TableData, rowIndex?: number }">
+      <Space :direction="direction" fill>
+        <slot name="default" :record="record" :index="rowIndex" />
+      </Space>
+    </template>
+  </TableColumn>
+</template>
+
+<style scoped lang="less"></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 { Col, Row, Table } from '@arco-design/web-vue';
+import { AnyObject, sizeType } from '@/types/global';
+import usePagination from '@/hooks/pagination';
+
+type PropType = {
+  loading?: boolean;
+  rowKey?: string;
+  hoverType?: string;
+  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 { 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(meta.current);
+    setTotal(meta.total);
+    setPageSize(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 getCount = () => pagination.value.total;
+
+const formatSortType = (type: string): string => type?.replace('end', '') ?? '';
+
+defineExpose({ onFetch, onPageChange, onSizeChange, resetSort, getCount, onPush, onRemove });
+</script>
+
+<template>
+  <Row justify="space-between" align="center">
+    <Col flex="1" class="table-tool-item" style="text-align: left">
+    <slot name="tool" :size="size" />
+    </Col>
+    <Col flex="auto" class="table-tool-item" 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="pagination" :bordered="false" :table-layout-fixed="true" @page-change="onPageChange"
+    @page-size-change="onSizeChange"
+    @sorter-change="(dataIndex, direction) => $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 TableColumn from '@/components/filter/table-column.vue';
+import { Avatar } from '@arco-design/web-vue';
+
+import { get } from 'lodash';
+import { User } from '@/types/user';
+import { isString, isUndefined } from '@/utils';
+
+const props = withDefaults(
+  defineProps<{
+    title?: string;
+    dataIndex?: string;
+    user?: string | Pick<User, 'id' | 'nick_name' | 'real_name' | 'identity'>;
+    showHref?: boolean;
+    showAvatar?: boolean;
+    showRealName?: boolean;
+    darkValue?: string;
+    nickIndex?: string;
+    realIndex?: string;
+    avatarIndex?: string;
+    roleIndex?: string;
+    linkStyle?: object;
+  }>(),
+  {
+    dataIndex: 'id',
+    nickIndex: 'nick_name',
+    realIndex: 'real_name',
+    avatarIndex: 'avatar',
+    roleIndex: 'identity',
+  }
+);
+
+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 `${get(user, props.nickIndex, '')}(${get(user, props.realIndex)})`;
+  }
+
+  return get(user, props.nickIndex, '');
+};
+</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]" />
+        {{ getName(record) }}
+      </template>
+    </template>
+  </TableColumn>
+</template>
+
+<style scoped lang="less"></style>

+<template>
+  <Button v-bind="$attrs" :size="size" :type="type" :loading="loading" :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'" 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<{
+    loading?: boolean;
+    label?: string;
+    icon?: string;
+    iconAlign?: 'left' | 'right';
+    type?: 'primary' | 'secondary' | 'outline' | 'dashed' | 'text';
+    shape?: 'square' | 'round' | 'circle';
+    status?: 'normal' | 'warning' | 'success' | 'danger';
+    size?: 'mini' | 'small' | 'medium' | 'large';
+  }>(),
+  {
+    loading: false,
+    iconAlign: 'left',
+    type: 'secondary',
+    shape: 'square',
+    status: 'normal',
+    size: 'small',
+  }
+);
+
+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 { GridComponent, TooltipComponent, LegendComponent, DataZoomComponent, GraphicComponent } from 'echarts/components';
+import AudioPlayer from '@/components/audio-player/index.vue';
+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 RouterButton from './router-button/index.vue';
+import ExportButton from './export-button/index.vue';
+import IconButton from './icon-button/index.vue';
+import TagSelect from './tag-select/index.vue';
+import UserSelect from './user-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';
+
+// 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('RouterButton', RouterButton);
+    Vue.component('ExportButton', ExportButton);
+    Vue.component('IconButton', IconButton);
+    Vue.component('AudioPlayer', AudioPlayer);
+    Vue.component('TagSelect', TagSelect);
+    Vue.component('UserSelect', UserSelect);
+    Vue.component('FilterSearch', FilterSearch);
+    Vue.component('FilterSearchItem', FilterSearchItem);
+    Vue.component('FilterTable', FilterTable);
+    Vue.component('FilterTableColumn', FilterTableColumn);
+    Vue.component('PageView', PageView);
+  },
+};

+<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">
+      <a-card v-if="hasCard" :bordered="false">
+        <slot />
+      </a-card>
+      <slot v-else />
+    </a-spin>
+  </div>
+</template>
+
+<style scoped lang="less">
+.container {
+  padding: 0 30px 20px 20px;
+}
+</style>

+<template>
+  <a-button v-if="type === 'Button'" type="text" size="small" @click="onClick">
+    <slot>详情</slot>
+  </a-button>
+  <a-link v-else class="link" :hoverable="false" @click="onClick">
+    <a-typography-text type="primary" :style="textStyle" :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;
+  }>(),
+  {
+    name: '',
+    type: 'Button',
+    params: undefined,
+    showTooltip: true,
+  }
+);
+
+const textStyle = { marginBottom: 0 };
+
+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;
+}
+</style>

+<template>
+  <Select
+    v-bind="$attrs"
+    v-model="value"
+    :options="options"
+    :fallback-option="false"
+    :placeholder="placeholder"
+    :virtual-list-props="{ height: 200 }"
+    :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 { Tag } from '@/types/tag';
+import { storeToRefs } from 'pinia';
+import { useSelectionStore } from '@/store';
+import { isArray } from '@arco-design/web-vue/es/_utils/is';
+
+interface propType {
+  modelValue?: number | string | number[];
+  placeholder?: string;
+}
+
+const props = withDefaults(defineProps<propType>(), { placeholder: '请选择' });
+const emits = defineEmits<{ (e: 'update:modelValue', value: unknown): void }>();
+
+const onTagExceedLimitError = () => Message.warning({ content: '关联标签最多选中3个', duration: 1500 });
+
+const value = computed({
+  get: () => props.modelValue,
+  set: (val) => emits('update:modelValue', val),
+});
+
+const { getTagOptions } = storeToRefs(useSelectionStore());
+const options = computed(() => getTagOptions.value.filter((item: Tag) => item.type === 1));
+
+const tagIds = computed(() => options.value?.map((item: Tag) => item.id));
+
+onMounted(() => {
+  if (isArray(props.modelValue)) {
+    value.value = props.modelValue?.filter((item: number) => tagIds.value?.indexOf(item) !== -1) || [];
+  }
+});
+</script>
+
+<style scoped></style>

+<script setup lang="ts">
+import { ref } from 'vue';
+
+import { Select } from '@arco-design/web-vue';
+import { useSelectionStore } from '@/store';
+import { storeToRefs } from 'pinia';
+
+const { getUserOptions } = storeToRefs(useSelectionStore());
+
+const loading = ref<boolean>(false);
+const fieldName = { value: 'id', label: 'nick_name' };
+</script>
+
+<template>
+  <Select
+    v-bind="$attrs"
+    placeholder="请选择"
+    :loading="loading"
+    :multiple="true"
+    :options="getUserOptions"
+    :field-names="fieldName"
+    :allow-search="true"
+    :virtual-list-props="{ height: 200 }"
+  />
+</template>
+
+<style scoped lang="less"></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;
+}
+interface ImportMetaEnv {
+  readonly VITE_API_BASE_URL: string;
+}

+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: string,
+      onProgress?: (percent: number) => void
+    ): Promise<{ url: string; name: string; response: unknown }> {
+      return createOssClient()
+        .multipartUpload(`${prefix}/${getFileDir()}/${getFileName()}.${getFileType(file)}`, file, { progress: onProgress })
+        .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 { ref, UnwrapRef } from 'vue';
+import { AxiosResponse } from 'axios';
+import { HttpResponse } from '@/api/interceptor';
+import useLoading from './loading';
+
+// use to fetch list
+// Don't use async function. It doesn't work in async function.
+// Use the bind function to add parameters
+// example: useRequest(api.bind(null, {}))
+
+export default function useRequest<T>(
+  api: () => Promise<AxiosResponse<HttpResponse>>,
+  defaultValue = [] as unknown as T,
+  isLoading = true
+) {
+  const { loading, setLoading } = useLoading(isLoading);
+  const response = ref<T>(defaultValue);
+  api()
+    .then((res) => {
+      response.value = res.data as unknown as UnwrapRef<T>;
+    })
+    .finally(() => {
+      setLoading(false);
+    });
+  return { loading, response };
+}

+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 { ref } from 'vue';
+
+export default function useVisible(initValue = false) {
+  const visible = ref(initValue);
+  const setVisible = (value: boolean) => {
+    visible.value = value;
+  };
+  const toggle = () => {
+    visible.value = !visible.value;
+  };
+  return {
+    visible,
+    setVisible,
+    toggle,
+  };
+}

+<script lang="tsx">
+import { compile, computed, defineComponent, h, ref, watch } from "vue";
+
+import { RouteRecordRaw, useRoute, useRouter } from "vue-router";
+import { useAppStore } from "@/store";
+import usePermission from "@/hooks/permission";
+import { last, orderBy } from "lodash";
+import { storeToRefs } from "pinia";
+
+export default defineComponent({
+  emit: ["collapse"],
+  setup() {
+    const appStore = useAppStore();
+    const permission = usePermission();
+    const router = useRouter();
+    const route = useRoute();
+
+    const { appMenu } = storeToRefs(appStore);
+
+    const collapsed = ref(false);
+    const selectedKey = ref<string[]>([]);
+    const openKey = ref<string[]>([]);
+
+    const goto = (item: RouteRecordRaw) => router.push({ name: item.name });
+
+    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);
+    });
+
+    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) => {
+            // This is demo, modify nodes as needed
+            const icon = element?.meta?.icon ? `<${element?.meta?.icon}/>` : ``;
+            let r;
+
+            if (element && element.children && element.children.length !== 0) {
+              r = (
+                <a-sub-menu key={element?.name} title={element.meta?.title} v-slots={{ icon: () => h(compile(icon)) }}>
+                  {element?.children?.map((elem) => {
+                    return (
+                      <a-menu-item key={elem.name} onClick={() => goto(elem)}>
+                        {elem.meta?.title}
+                        {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
+        auto-open={false}
+        v-model:selected-keys={selectedKey.value}
+        v-model:open-keys={openKey.value}
+        auto-open-selected={true}
+        auto-scroll-into-view={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;
+    }
+  }
+}
+</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 } 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-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 usePermission from "@/hooks/permission";
+import Menu from "@/layout/components/menu.vue";
+import Navbar from "@/layout/components/navbar.vue";
+
+export default defineComponent({
+  // eslint-disable-next-line vue/no-reserved-component-names
+  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 store from './store';
+import router from './router';
+import directive from './directive';
+import App from './App.vue';
+
+import '@/assets/style/global.less';
+import '@/api/interceptor';
+
+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');

+import { createRouter, createWebHistory, LocationQueryRaw } from 'vue-router';
+import NProgress from 'nprogress'; // progress bar
+import 'nprogress/nprogress.css';
+
+import usePermission from '@/hooks/permission';
+import { clearToken, isLogin } from '@/utils/auth';
+import PageLayout from '@/layout/index.vue';
+
+import { useAuthorizedStore } from '@/store';
+import appRoutes from './modules';
+
+NProgress.configure({ showSpinner: false }); // NProgress Configuration
+
+const router = createRouter({
+  history: createWebHistory(),
+  routes: [
+    {
+      path: '/login',
+      name: 'login',
+      component: () => import('@/views/login/index.vue'),
+      meta: {
+        title: '登陆',
+        requiresAuth: false,
+      },
+    },
+    {
+      name: 'root',
+      path: '/',
+      component: PageLayout,
+      redirect: '/demos',
+      children: appRoutes,
+    },
+    {
+      path: '/:pathMatch(.*)*',
+      name: 'notFound',
+      redirect: '/exception/404',
+      meta: {
+        requiresAuth: true,
+      },
+    },
+  ],
+  scrollBehavior() {
+    return { top: 0 };
+  },
+});
+
+router.beforeEach(async (to, from, next) => {
+  NProgress.start();
+  const authorizedStore = useAuthorizedStore();
+
+  if (from.name !== undefined) {
+    to.meta.from = from.name;
+  }
+
+  async function crossroads() {
+    const Permission = usePermission();
+
+    if (Permission.accessRouter(to)) {
+      next();
+    } else {
+      next({ name: 'exception-403' });
+    }
+    NProgress.done();
+  }
+
+  if (isLogin()) {
+    if (authorizedStore.permissions.length) {
+      await crossroads();
+    } else {
+      try {
+        await authorizedStore.syncInfo();
+        await crossroads();
+      } catch (error) {
+        clearToken();
+        next({ name: 'login', query: { path: to.path } as LocationQueryRaw });
+        NProgress.done();
+      }
+    }
+  } else {
+    if (to.name === 'login') {
+      next();
+      NProgress.done();
+      return;
+    }
+
+    if (to.name === 'root') {
+      next({ name: 'login' });
+    } else {
+      next({ name: 'login', query: { path: to.path } as LocationQueryRaw });
+    }
+    NProgress.done();
+  }
+});
+
+router.afterEach(async (to) => {
+  sessionStorage.setItem(
+    'route',
+    to.meta?.breadcrumb?.toString() ||
+      to.matched
+        ?.slice(1)
+        .map((item) => item.name)
+        .toString() ||
+      'dashboard'
+  );
+});
+
+export default router;

+export default [
+  {
+    path: "demos",
+    name: "audition-demo",
+    component: () => import("@/views/demo/index.vue"),
+    meta: {
+      title: "Demo管理",
+      icon: "icon-dashboard",
+      requiresAuth: true,
+      hideInMenu: false,
+      isRedirect: true,
+      roles: ["*"],
+      breadcrumb: ["audition-demo"],
+      reload: true
+    }
+  },
+  {
+    path: "demos/:id(\\d+)",
+    name: "audition-demo-show",
+    component: () => import("@/views/demo-show/index.vue"),
+    meta: {
+      title: "详情",
+      requiresAuth: false,
+      hideInMenu: true,
+      reload: true,
+      menuSelectKey: "audition-demo",
+      roles: ["*"],
+      breadcrumb: ["audition-demo", "audition-demo-show"]
+    }
+  }
+];

+export default {
+  path: 'exception',
+  name: 'exception',
+  component: () => import('@/views/exception/index.vue'),
+  meta: {
+    title: '异常页',
+    requiresAuth: true,
+    icon: 'icon-exclamation-circle',
+    hideInMenu: true,
+  },
+  children: [
+    {
+      path: '403',
+      name: 'exception-403',
+      component: () => import('@/views/exception/403/index.vue'),
+      meta: {
+        title: '403',
+        requiresAuth: true,
+        roles: ['*'],
+      },
+    },
+    {
+      path: '404',
+      name: 'exception-404',
+      component: () => import('@/views/exception/404/index.vue'),
+      meta: {
+        title: '404',
+        requiresAuth: true,
+        roles: ['*'],
+        hideInMenu: true,
+      },
+    },
+    {
+      path: '500',
+      name: 'exception-500',
+      component: () => import('@/views/exception/500/index.vue'),
+      meta: {
+        title: '500',
+        requiresAuth: true,
+        roles: ['*'],
+      },
+    },
+  ],
+};

+import Exception from "./exception";
+import Demo from "./demo";
+
+export default [...Demo, Exception];

+import 'vue-router';
+
+declare module 'vue-router' {
+  interface RouteMeta {
+    // options
+    roles?: string[];
+    // every route must declare
+    requiresAuth: boolean; // need login
+    icon?: string;
+    // menu select key
+    menuSelectKey?: string;
+    hideInMenu?: boolean;
+    isRedirect?: boolean;
+    title?: string;
+    order?: number;
+    breadcrumb?: string[];
+  }
+}

+import { createPinia } from 'pinia';
+import useAppStore from './modules/app';
+// eslint-disable-next-line import/no-cycle
+import useAuthorizedStore from './modules/authorized';
+
+import useSelectionStore from '@/store/modules/selection';
+
+const pinia = createPinia();
+
+export { useAppStore, useSelectionStore, useAuthorizedStore };
+export default pinia;
+

+import { defineStore } from 'pinia';
+import type { RouteRecordNormalized } from 'vue-router';
+import { AppState } from './types';
+
+const useAppStore = defineStore('app', {
+  state: (): AppState => ({
+    theme: 'light',
+    colorWeak: false,
+    navbar: true,
+    menu: true,
+    topMenu: false,
+    hideMenu: false,
+    menuCollapse: false,
+    footer: true,
+    themeColor: '#165DFF',
+    menuWidth: 220,
+    globalSettings: false,
+    device: 'desktop',
+    tabBar: false,
+    permissions: [],
+  }),
+
+  getters: {
+    appCurrentSetting(state: AppState): AppState {
+      return { ...state };
+    },
+    appDevice(state: AppState) {
+      return state.device;
+    },
+    appAsyncMenus(state: AppState): RouteRecordNormalized[] {
+      return state.serverMenu as unknown as RouteRecordNormalized[];
+    },
+    appMenu(state: AppState) {
+      return state.permissions?.filter((item) => item.type === 'Menu') || [];
+    },
+  },
+
+  actions: {
+    // Update app settings
+    updateSettings(partial: Partial<AppState>) {
+      // @ts-ignore-next-line
+      this.$patch(partial);
+    },
+
+    // Change theme color
+    toggleTheme(dark: boolean) {
+      if (dark) {
+        this.theme = 'dark';
+        document.body.setAttribute('arco-theme', 'dark');
+      } else {
+        this.theme = 'light';
+        document.body.removeAttribute('arco-theme');
+      }
+    },
+    toggleDevice(device: string) {
+      this.device = device;
+    },
+    toggleMenu(value: boolean) {
+      this.hideMenu = value;
+    },
+    setPermissions(permissions = []) {
+      this.$patch({ permissions });
+    },
+  },
+});
+
+export default useAppStore;

+export interface SystemPermission {
+  id: number;
+  name: string;
+  type: 'Menu' | 'Button';
+  label: string;
+  icon: string;
+  parent_id: number;
+  weight: number;
+  parent?: SystemPermission;
+  children?: SystemPermission[];
+  created_at: string;
+  updated_at: string;
+}
+
+export interface AppState {
+  theme: string;
+  colorWeak: boolean;
+  navbar: boolean;
+  menu: boolean;
+  topMenu: boolean;
+  hideMenu: boolean;
+  menuCollapse: boolean;
+  themeColor: string;
+  menuWidth: number;
+  globalSettings: boolean;
+  device: string;
+  permissions: SystemPermission[];
+  [key: string]: unknown;
+}

+import { defineStore } from "pinia";
+import { clearToken } from "@/utils/auth";
+import useAuthApi from "@/api/auth";
+import { AuthorizedState } from "./type";
+import { Message } from "@arco-design/web-vue";
+import { removeRouteListener } from "@/utils/route-listener";
+// eslint-disable-next-line import/no-cycle
+import { useAppStore } from "@/store";
+
+const useAuthorizedStore = defineStore("authorized", {
+  state: (): AuthorizedState => ({
+    id: undefined,
+    nick_name: undefined,
+    avatar: undefined,
+    permissions: [],
+    can_create_demo: 0
+  }),
+  getters: {
+    authorizedInfo(state: AuthorizedState): AuthorizedState {
+      return { ...state };
+    },
+    getKey(state: AuthorizedState): number {
+      return state.id || 0;
+    },
+    isCreateDemo(state: AuthorizedState) {
+      return state.can_create_demo;
+    }
+  },
+  actions: {
+    setInfo(partial: Partial<AuthorizedState>) {
+      // @ts-ignore
+      this.$patch(partial);
+    },
+    async syncInfo() {
+      const { user, permissions, menus, can_create_demo } = await useAuthApi.info();
+      this.setInfo({ ...user, can_create_demo, permissions });
+      useAppStore().setPermissions(menus as any);
+    },
+    async logout() {
+      this.$reset();
+      clearToken();
+      removeRouteListener();
+      window.location.reload();
+      Message.success("登出成功");
+    },
+
+    async syncToken() {
+      // TODO
+      // const { data } = await refreshToken();
+      // setToken(data.access_token);
+    }
+  }
+});
+
+export default useAuthorizedStore;

+export interface AuthorizedState {
+  id?: number;
+  nick_name?: string;
+  avatar?: string;
+  permissions: string[];
+
+  [key: string]: unknown;
+}

+import { defineStore } from 'pinia';
+import { Selection } from '@/store/modules/selection/type';
+import { AnyObject } from '@/types/global';
+import { SystemConfig } from '@/types/system-config';
+import axios from 'axios';
+import { Tag } from '@/types/tag';
+
+const useSelectionStore = defineStore('selection', {
+  state: (): Selection => ({
+    user: [],
+    project: [],
+    tag: [],
+    config: [],
+  }),
+  getters: {
+    getUserOptions(state) {
+      return state.user;
+    },
+    getTagOptions(state) {
+      return state.tag;
+    },
+    projectOptions(state) {
+      return state.project;
+    },
+    lyricTool(state): string {
+      return state.config.find((item) => item.identifier === 'activity_lyric_tool')?.content || '';
+    },
+    activityLang(state): SystemConfig | undefined {
+      return state.config.find((item) => item.identifier === 'activity_lang');
+    },
+    activityLangOptions(state): SystemConfig[] {
+      return state.config.filter((item) => item.parent_id === this.activityLang?.id);
+    },
+    activitySpeed(state): SystemConfig | undefined {
+      return state.config.find((item) => item.identifier === 'activity_speed');
+    },
+    activitySpeedOptions(state): SystemConfig[] {
+      return state.config.filter((item) => item.parent_id === this.activitySpeed?.id);
+    },
+    activitySex(state): SystemConfig | undefined {
+      return state.config.find((item) => item.identifier === 'activity_sex');
+    },
+    activitySexOptions(state): SystemConfig[] {
+      return state.config.filter((item) => item.parent_id === this.activitySex?.id);
+    },
+    activityTagOptions(state): Pick<Tag, 'id' | 'name' | 'type'>[] {
+      return state.tag.filter((item) => item.type === 1);
+    },
+    activityAudioAccept(state): string {
+      return state.config.find((item) => item.identifier === 'activity_audio_accept')?.content || 'audio/*';
+    },
+    activityTrackAccept(state): string {
+      return state.config.find((item) => item.identifier === 'activity_track_accept')?.content || '*';
+    },
+    appleDemoCover(state): string {
+      return state.config.find((item) => item.identifier === 'activity_demo_cover')?.content || '';
+    },
+  },
+  actions: {
+    queryUser(params?: AnyObject) {
+      axios.get('/provider/users', { params }).then(({ data }) => {
+        this.user = data;
+      });
+    },
+    queryTag(params?: AnyObject) {
+      axios.get('/provider/tags',{ params }).then(({ data }) => {
+        this.tag = data;
+      });
+    },
+    queryConfig(params?: AnyObject) {
+      axios.get('/provider/configs', { params }).then(({ data }) => {
+        this.config = data;
+      });
+    },
+  },
+});
+
+export default useSelectionStore;

+import { User } from '@/types/user';
+import { Project } from '@/types/project';
+import { Tag } from '@/types/tag';
+import { SystemConfig } from '@/types/system-config';
+
+export interface Selection {
+  user: User[];
+  project: Project[];
+  tag: Tag[];
+  config: SystemConfig[];
+}

+import { Project } from '@/types/project';
+import { Tag } from '@/types/tag';
+import { User } from '@/types/user';
+
+export interface ActivityExpand {
+  tag_ids: number[];
+  lyricist: { ids: number[]; supplement: string[] };
+  composer: { ids: number[]; supplement: string[] };
+  arranger: { ids: number[]; supplement: string[] };
+  guide_source: { name: string; url: string; size: number };
+  karaoke_source: { name: string; url: string; size: number };
+  track_source: { name: string; url: string; size: number };
+}
+
+export interface ActivityApplyRecord {
+  id: number;
+  created_at: string;
+  audit_msg: string;
+}
+
+export interface ActivityApply {
+  id: number;
+  cover: string;
+  song_name: string;
+  sub_title?: string;
+  lang: string[];
+  speed: string;
+  lyric: string;
+  clip_lyric: string;
+  sex: string;
+  project_id: number;
+  estimate_release_at: string;
+  audit_status: number;
+  expand: ActivityExpand;
+  project?: Project;
+  tags?: Tag[];
+  user?: User;
+  apply_records?: ActivityApplyRecord[];
+}
+
+export type ActivityApplyFormStep1 = Pick<ActivityApply, 'cover' | 'song_name' | 'sub_title' | 'lang' | 'speed'> &
+  Pick<ActivityExpand, 'tag_ids'>;
+
+export type ActivityApplyFormStep2 = Pick<ActivityApply, 'project_id' | 'sex' | 'estimate_release_at'> &
+  Pick<ActivityExpand, 'lyricist' | 'composer' | 'arranger'>;
+
+export type ActivityApplyFormStep3 = Pick<ActivityApply, 'song_name' | 'lyric' | 'clip_lyric'> &
+  Pick<ActivityExpand, 'guide_source' | 'karaoke_source' | 'track_source'>;
+
+export type ActivityApplyForm = ActivityApplyFormStep1 & ActivityApplyFormStep2 & ActivityApplyFormStep3;

+import { Project } from '@/types/project';
+import { Tag } from '@/types/tag';
+import { FileStatus } from '@arco-design/web-vue/es/upload/interfaces';
+import { User } from '@/types/user';
+import { ActivityExpand } from '@/types/activity-apply';
+
+export type ActivityMaterialType = 'GuideDinging' | 'Accompany';
+export type ActivityMaterialTone = -3 | -2 | -1 | 0 | 1 | 2 | 3;
+
+export interface ActivityMaterialOption {
+  type: ActivityMaterialType;
+  tone: ActivityMaterialTone;
+  label: string;
+}
+
+export interface ActivityMaterial {
+  id: string;
+  type: ActivityMaterialType;
+  url: string;
+  name: string;
+  tone: ActivityMaterialTone;
+  file?: File;
+  percent?: number;
+  status?: FileStatus;
+  response?: string;
+  created_at?: string;
+}
+
+export interface ActivitySendLink {
+  type: string;
+  url: string;
+}
+
+export interface ActivityRecommendIntro {
+  id: number;
+  content: string;
+}
+
+export interface ActivityApplyRecord {
+  id: number;
+  audit_user_id: number;
+  audit_msg: string;
+  created_at?: string;
+  updated_at?: string;
+}
+
+export interface Activity {
+  id: number;
+  song_name: string;
+  song_type?: number;
+  sub_title: string;
+  cover: string;
+  user_id: number;
+  project_id: number;
+  guide: string;
+  karaoke: string;
+  guide_source?: string;
+  karaoke_source?: string;
+  lyric: string;
+  clip_lyric: string;
+  weight: number;
+  audit_status: number;
+  status: number;
+  match_at: string;
+  created_at: string;
+  updated_at: string;
+  submit_works_count?: number;
+  views_count?: number;
+  collections_count?: number;
+  is_official?: number;
+  send_url?: ActivitySendLink[];
+  user?: Pick<User, 'id' | 'nick_name' | 'real_name' | 'role'>;
+  project?: Project;
+  tags?: Tag[];
+  materials?: ActivityMaterial[];
+  recommend_intros?: ActivityRecommendIntro[];
+  apply_records?: ActivityApplyRecord[];
+  estimate_release_at: string;
+  expand?: ActivityExpand;
+  links?: User[];
+}
+
+export type ActivityViewUser = Pick<User, 'id' | 'avatar' | 'nick_name' | 'real_name' | 'sex' | 'role'> & {
+  listen_count: number;
+  collection_count: number;
+  submit_work: number;
+  last_listen_at: number;
+};

+// eslint-disable-next-line import/no-cycle
+import { User } from '@/types/user';
+
+export interface Admin extends User {
+  creator?: User;
+  role?: 'ProjectUser' | 'SystemUser' | 'Admin';
+  company: string;
+  activities_count?: number;
+  singers_count?: number;
+  submit_activities_count?: number;
+  accept_activities_count?: number;
+  checked_activities_count?: number;
+}

+import { CallbackDataParams } from 'echarts/types/dist/shared';
+
+export interface ToolTipFormatterParams extends CallbackDataParams {
+  axisDim: string;
+  axisIndex: number;
+  axisType: string;
+  axisId: string;
+  axisValue: string;
+  axisValueLabel: string;
+}

+export interface AnyObject {
+  [key: string]: unknown;
+}
+
+export interface Options {
+  value: unknown;
+  label: string;
+}
+
+export interface MoreRowValue<T = object> {
+  type: string;
+  row: T;
+  index?: number;
+}
+
+export interface QueryForParams {
+  [key: string]: unknown;
+
+  sortBy?: string;
+  sortType?: 'desc' | 'asc' | '';
+}
+
+export interface QueryForPaginationParams extends QueryForParams {
+  page?: number;
+  pageSize?: number;
+}
+
+export type sizeType = 'mini' | 'small' | 'medium' | 'large';
+
+export interface AttributeData {
+  [key: string]: unknown;
+}
+
+export interface Pagination {
+  current: number;
+  pageSize: number;
+  total: number;
+  showTotal?: boolean;
+  showPageSize?: boolean;
+  pageSizeOptions?: number[];
+}
+
+export type SortType = 'descend' | 'ascend' | '' | string;
+
+export interface Sort {
+  column: string;
+  type: SortType | string;
+}
+
+export interface GeneralChart {
+  xAxis: string[];
+  data: Array<{ name: string; value: number[] }>;
+}
+
+export interface HttpResponse<T = unknown> {
+  status: 'success' | 'fail' | 'error';
+  msg: string;
+  code: number;
+  data: T;
+}
+
+export interface ServiceResponse<T = unknown> extends HttpResponse<T> {
+  meta: { current: number; limit: number; total: number };
+}

+export interface MockParams {
+  url: string;
+  type: string;
+  body: string;
+}

+// eslint-disable-next-line import/no-cycle
+import { Admin } from '@/types/admin';
+import { User } from '@/types/user';
+
+export interface Project {
+  id: number;
+  name: string;
+  user?: Admin;
+  master?: User;
+  status: number;
+  created_at?: string;
+  updated_at?: string;
+  up_count?: number;
+  down_count?: number;
+  finish_count?: number;
+  is_promote?: number;
+  is_official?: number;
+
+  is_can_apply?: number;
+  is_can_manage?: number;
+  is_can_demo_apply?: number;
+
+  head_cover: string;
+  cover: string;
+  intro: string;
+  managers_count?: number;
+  activities_count?: number;
+  send_count?: number;
+  managers?: Admin[];
+}

+export interface SystemConfig {
+  id: number;
+  parent_id: number;
+  name: string;
+  content: string;
+  remark: string;
+  identifier: string;
+  children?: SystemConfig[];
+}

+// eslint-disable-next-line import/no-cycle
+import { Admin } from '@/types/admin';
+
+export interface Tag {
+  id: number;
+  name: string;
+  type: number;
+  created_at: string;
+  updated_at: string;
+  user?: Admin;
+}