feat(master): init

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

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

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

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

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

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

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

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

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

+!.gitignore

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

+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: 'dashboard',
+      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: 'audition',
+  name: 'audition',
+  component: () => import('@/views/audition/index.vue'),
+  meta: {
+    requiresAuth: true,
+    roles: ['*'],
+  },
+  children: [
+    {
+      path: 'projects',
+      name: 'audition-project',
+      component: () => import('@/views/audition/project/index.vue'),
+      meta: {
+        requiresAuth: true,
+        hideInMenu: false,
+        isRedirect: true,
+        roles: ['audition-project'],
+        breadcrumb: ['audition', 'audition-project'],
+        reload: true,
+      },
+    },
+    {
+      path: 'projects/:id(\\d+)',
+      name: 'audition-project-show',
+      component: () => import('@/views/audition/project-show/index.vue'),
+      meta: {
+        title: '详情',
+        requiresAuth: true,
+        hideInMenu: true,
+        menuSelectKey: 'audition-project',
+        roles: ['audition-project-show'],
+        breadcrumb: ['audition', 'audition-project', 'audition-project-show'],
+        reload: true,
+      },
+    },
+    {
+      path: 'activity-apply',
+      name: 'audition-activity-apply',
+      component: () => import('@/views/audition/activity-apply/index.vue'),
+      meta: {
+        requiresAuth: true,
+        hideInMenu: false,
+        isRedirect: true,
+        roles: ['audition-activity-apply'],
+        breadcrumb: ['audition', 'audition-activity-apply'],
+        reload: true,
+      },
+    },
+    {
+      path: 'activity-audit',
+      name: 'audition-activity-audit',
+      component: () => import('@/views/audition/activity-audit/index.vue'),
+      meta: {
+        requiresAuth: true,
+        hideInMenu: false,
+        isRedirect: true,
+        roles: ['audition-activity-audit'],
+        breadcrumb: ['audition', 'audition-activity-audit'],
+        reload: true,
+      },
+    },
+    {
+      path: 'activity-relist-log',
+      name: 'audition-activity-relist-log',
+      component: () => import('@/views/audition/activity-relist-log/index.vue'),
+      meta: {
+        requiresAuth: true,
+        hideInMenu: false,
+        isRedirect: true,
+        roles: ['audition-activity-relist-log'],
+        breadcrumb: ['audition', 'audition-activity-relist-log'],
+        reload: true,
+      },
+    },
+    {
+      path: 'activities',
+      name: 'audition-activity',
+      component: () => import('@/views/audition/activity/index.vue'),
+      meta: {
+        requiresAuth: true,
+        hideInMenu: false,
+        isRedirect: true,
+        roles: ['audition-activity'],
+        breadcrumb: ['audition', 'audition-activity'],
+        reload: true,
+      },
+    },
+    {
+      path: 'activities/:id(\\d+)',
+      name: 'audition-activity-show',
+      component: () => import('@/views/audition/activity-show/index.vue'),
+      meta: {
+        title: '详情',
+        requiresAuth: true,
+        hideInMenu: true,
+        menuSelectKey: 'audition-activity',
+        roles: ['audition-activity'],
+        breadcrumb: ['audition', 'audition-activity', 'audition-activity-show'],
+        reload: true,
+      },
+    },
+    {
+      path: 'demos',
+      name: 'audition-demo',
+      component: () => import('@/views/audition/demo/index.vue'),
+      meta: {
+        requiresAuth: true,
+        hideInMenu: false,
+        isRedirect: true,
+        roles: ['audition-demo'],
+        breadcrumb: ['audition', 'audition-demo'],
+        reload: true,
+      },
+    },
+    {
+      path: 'demos/:id(\\d+)',
+      name: 'audition-demo-show',
+      component: () => import('@/views/audition/demo-show/index.vue'),
+      meta: {
+        title: '详情',
+        requiresAuth: true,
+        hideInMenu: true,
+        menuSelectKey: 'audition-demo',
+        roles: ['audition-demo'],
+        breadcrumb: ['audition', 'audition-demo', 'audition-demo-show'],
+        reload: true,
+      },
+    },
+  ],
+};

+export default {
+  path: 'dashboard',
+  name: 'dashboard',
+  component: () => import('@/views/dashboard/index.vue'),
+  meta: {
+    title: '信息概览',
+    requiresAuth: true,
+    icon: 'icon-dashboard',
+    roles: ['*'],
+    order: 99999999,
+    breadcrumb: ['dashboard'],
+  },
+};

+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 Dashboard from './dashboard';
+
+import Exception from './exception';
+import User from './user';
+import Operation from './operation';
+import Audition from './audition';
+import System from './system';
+
+export default [Dashboard, Exception, User, Operation, Audition, System];

+export default {
+  path: 'operation',
+  name: 'operation',
+  component: () => import('@/views/operation/index.vue'),
+  meta: {
+    requiresAuth: true,
+    roles: ['*'],
+  },
+  children: [
+    {
+      path: 'banners',
+      name: 'operation-banner',
+      component: () => import('@/views/operation/banner/index.vue'),
+      meta: {
+        requiresAuth: true,
+        hideInMenu: false,
+        isRedirect: true,
+        reload: true,
+        roles: ['operation-banner'],
+        breadcrumb: ['operation', 'operation-banner'],
+      },
+    },
+    {
+      path: 'notification',
+      name: 'operation-notification',
+      component: () => import('@/views/operation/notification/index.vue'),
+      meta: {
+        requiresAuth: true,
+        hideInMenu: false,
+        isRedirect: true,
+        reload: true,
+        roles: ['operation-notification'],
+        breadcrumb: ['operation', 'operation-notification'],
+      },
+    },
+    {
+      path: 'notification',
+      name: 'operation-notification-create',
+      component: () => import('@/views/operation/notification/create.vue'),
+      meta: {
+        title: '创建',
+        requiresAuth: true,
+        hideInMenu: true,
+        reload: true,
+        isRedirect: true,
+        menuSelectKey: 'operation-notification',
+        roles: ['operation-notification-create'],
+        breadcrumb: ['operation', 'operation-notification'],
+      },
+    },
+    {
+      path: 'notification/:id(\\d+)',
+      name: 'operation-notification-show',
+      component: () => import('@/views/operation/notification/show.vue'),
+      meta: {
+        title: '详情',
+        requiresAuth: true,
+        hideInMenu: true,
+        reload: true,
+        isRedirect: true,
+        menuSelectKey: 'operation-notification',
+        roles: ['operation-notification-show'],
+        breadcrumb: ['operation', 'operation-notification', 'operation-notification-show'],
+      },
+    },
+    {
+      path: 'notification/:id(\\d+)/edit',
+      name: 'operation-notification-update',
+      component: () => import('@/views/operation/notification/update.vue'),
+      meta: {
+        title: '详情',
+        requiresAuth: true,
+        hideInMenu: true,
+        reload: true,
+        isRedirect: true,
+        menuSelectKey: 'operation-notification',
+        roles: ['operation-notification-edit'],
+        breadcrumb: ['operation', 'operation-notification', 'operation-notification-update'],
+      },
+    },
+    {
+      path: 'broker',
+      name: 'operation-broker',
+      component: () => import('@/views/operation/broker/index.vue'),
+      meta: {
+        requiresAuth: true,
+        hideInMenu: false,
+        isRedirect: true,
+        reload: true,
+        roles: ['operation-broker'],
+        breadcrumb: ['operation', 'operation-broker'],
+      },
+    },
+  ],
+};

+export default {
+  path: 'system',
+  name: 'system',
+  component: () => import('@/views/system/index.vue'),
+  meta: {
+    requiresAuth: true,
+    roles: ['*'],
+  },
+  children: [
+    {
+      path: 'tags',
+      name: 'system-tag',
+      component: () => import('@/views/system/tag/index.vue'),
+      meta: {
+        requiresAuth: true,
+        hideInMenu: false,
+        roles: ['system-tag'],
+        breadcrumb: ['system', 'system-tag'],
+      },
+    },
+    {
+      path: 'star-tags',
+      name: 'system-star-tag',
+      component: () => import('@/views/system/star-tag/index.vue'),
+      meta: {
+        requiresAuth: true,
+        hideInMenu: false,
+        roles: ['system-star-tag'],
+        breadcrumb: ['system', 'system-star-tag'],
+      },
+    },
+    {
+      path: 'configs',
+      name: 'system-config',
+      component: () => import('@/views/system/config/index.vue'),
+      meta: {
+        requiresAuth: true,
+        hideInMenu: false,
+        roles: ['system-config'],
+        breadcrumb: ['system', 'system-config'],
+      },
+    },
+    {
+      path: 'materials',
+      name: 'system-material',
+      component: () => import('@/views/system/material/index.vue'),
+      meta: {
+        requiresAuth: true,
+        hideInMenu: false,
+        roles: ['system-material'],
+        breadcrumb: ['system', 'system-material'],
+      },
+    },
+    {
+      path: 'roles',
+      name: 'system-role',
+      component: () => import('@/views/system/role/index.vue'),
+      meta: {
+        requiresAuth: true,
+        hideInMenu: false,
+        roles: ['system-role'],
+        breadcrumb: ['system', 'system-role'],
+      },
+    },
+    {
+      path: 'versions',
+      name: 'system-version',
+      component: () => import('@/views/system/version/index.vue'),
+      meta: {
+        requiresAuth: true,
+        hideInMenu: false,
+        roles: ['system-version'],
+        breadcrumb: ['system', 'system-version'],
+      },
+    },
+    {
+      path: 'customer',
+      name: 'system-customer',
+      component: () => import('@/views/system/customer/index.vue'),
+      meta: {
+        requiresAuth: true,
+        hideInMenu: false,
+        isRedirect: true,
+        roles: ['system-customer'],
+        breadcrumb: ['system', 'system-customer'],
+      },
+    },
+    {
+      path: 'logs',
+      name: 'system-log',
+      component: () => import('@/views/system/logs/index.vue'),
+      meta: {
+        requiresAuth: true,
+        hideInMenu: false,
+        roles: ['system-log'],
+        breadcrumb: ['system', 'system-log'],
+      },
+    },
+    {
+      path: 'reports',
+      name: 'system-report',
+      component: () => import('@/views/system/report/index.vue'),
+      meta: {
+        requiresAuth: true,
+        hideInMenu: false,
+        roles: ['system-report'],
+        breadcrumb: ['system', 'system-report'],
+      },
+    },
+  ],
+};

+export default {
+  path: 'user',
+  name: 'user',
+  component: () => import('@/views/user/index.vue'),
+  meta: {
+    requiresAuth: true,
+    roles: ['*'],
+  },
+  children: [
+    {
+      path: 'registers',
+      name: 'user-register',
+      component: () => import('@/views/user/register/index.vue'),
+      meta: {
+        requiresAuth: true,
+        hideInMenu: false,
+        isRedirect: true,
+        roles: ['user-register'],
+        breadcrumb: ['user', 'user-register'],
+        reload: true,
+      },
+    },
+    {
+      path: 'registers/:id(\\d+)',
+      name: 'user-register-show',
+      component: () => import('@/views/user/info/index.vue'),
+      meta: {
+        title: '详情',
+        requiresAuth: true,
+        hideInMenu: true,
+        menuSelectKey: 'user-register',
+        roles: ['user-register-show'],
+        breadcrumb: ['user', 'user-register', 'user-register-show'],
+      },
+    },
+    {
+      path: 'certify',
+      name: 'user-certify',
+      component: () => import('@/views/user/certify/index.vue'),
+      meta: {
+        requiresAuth: true,
+        hideInMenu: false,
+        isRedirect: true,
+        roles: ['user-certify'],
+        breadcrumb: ['user', 'user-certify'],
+        reload: true,
+      },
+    },
+    {
+      path: 'singers',
+      name: 'user-singer',
+      component: () => import('@/views/user/singer/index.vue'),
+      meta: {
+        requiresAuth: true,
+        hideInMenu: false,
+        isRedirect: true,
+        roles: ['user-singer'],
+        breadcrumb: ['user', 'user-singer'],
+        reload: true,
+      },
+    },
+    {
+      path: 'singers/:id(\\d+)',
+      name: 'user-singer-show',
+      component: () => import('@/views/user/info/index.vue'),
+      meta: {
+        title: '详情',
+        requiresAuth: true,
+        hideInMenu: true,
+        menuSelectKey: 'user-singer',
+        roles: ['user-singer-show'],
+        breadcrumb: ['user', 'user-singer', 'user-singer-show'],
+      },
+    },
+    {
+      path: 'business',
+      name: 'user-business',
+      component: () => import('@/views/user/business/index.vue'),
+      meta: {
+        requiresAuth: true,
+        hideInMenu: false,
+        isRedirect: true,
+        reload: true,
+        roles: ['user-business'],
+        breadcrumb: ['user', 'user-business'],
+      },
+    },
+    {
+      path: 'business/:id(\\d+)',
+      name: 'user-business-show',
+      component: () => import('@/views/user/info/index.vue'),
+      meta: {
+        title: '详情',
+        requiresAuth: true,
+        hideInMenu: true,
+        menuSelectKey: 'user-business',
+        roles: ['user-business-show'],
+        breadcrumb: ['user', 'user-business', 'user-business-show'],
+      },
+    },
+  ],
+};

+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 { QueryForPaginationParams, Sort } from '@/types/global';
+
+export function getSort(state: any): Sort {
+  return state.sort;
+}
+
+export function getQuery(state: any): QueryForPaginationParams {
+  const { current, pageSize } = state.pagination;
+  const { column, type } = state.sort;
+
+  return {
+    ...state.filter,
+    page: current,
+    pageSize,
+    sortBy: column,
+    sortType: type.replace('end', '') as 'desc' | 'asc',
+  };
+}

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

+import { defineStore } from 'pinia';
+import { AppState } from './types';
+import { usePermissionApi } from '@/http/role';
+import { SystemPermission } from '@/types/system-permission';
+
+const useAppStore = defineStore('app', {
+  state: (): AppState => ({
+    theme: 'light',
+    colorWeak: false,
+    navbar: true,
+    menu: true,
+    hideMenu: false,
+    menuCollapse: false,
+    footer: true,
+    themeColor: '#165DFF',
+    menuWidth: 210,
+    globalSettings: false,
+    device: 'desktop',
+    tabBar: false,
+    permissions: [],
+  }),
+
+  getters: {
+    appCurrentSetting(state: AppState): AppState {
+      return { ...state };
+    },
+    appDevice(state: AppState) {
+      return state.device;
+    },
+    appMenu(state: AppState): SystemPermission[] {
+      return state.permissions?.filter((item) => item.guard === 'Admin' && 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;
+    },
+    queryPermissionList() {
+      usePermissionApi
+        .get({
+          setColumn: ['id', 'parent_id', 'guard', 'name', 'label', 'icon', 'weight', 'type'],
+          fetchType: 'all',
+          sortBy: 'weight',
+          sortType: 'desc',
+        })
+        .then(({ data }) => (this.permissions = data));
+    },
+  },
+});
+
+export default useAppStore;

+import { SystemPermission } from '@/types/system-permission';
+
+export interface AppState {
+  theme: string;
+  navbar: boolean;
+  menu: boolean;
+  menuCollapse: boolean;
+  themeColor: string;
+  menuWidth: number;
+  globalSettings: boolean;
+  permissions?: SystemPermission[];
+
+  [key: string]: unknown;
+}

+import { defineStore } from 'pinia';
+import { clearToken } from '@/utils/auth';
+import useAuthApi from '@/http/auth';
+import { AuthorizedState } from './type';
+// eslint-disable-next-line import/no-cycle
+import { useAppStore } from '@/store';
+import { useCertifyApi } from '@/http/user';
+import { useApplyApi } from '@/http/activity';
+
+const useAuthorizedStore = defineStore('authorized', {
+  state: (): AuthorizedState => ({
+    id: undefined,
+    nick_name: undefined,
+    avatar: undefined,
+    permissions: [],
+    auditUserCount: 0,
+    auditActivityCount: 0,
+    activityApplyFailCount: 0,
+  }),
+  getters: {
+    authorizedInfo(state: AuthorizedState): AuthorizedState {
+      return { ...state };
+    },
+    getKey(state: AuthorizedState): number {
+      return state.id || 0;
+    },
+  },
+  actions: {
+    setInfo(partial: Partial<AuthorizedState>) {
+      // @ts-ignore
+      this.$patch(partial);
+    },
+    syncAuditUser() {
+      useCertifyApi.get({ status: 0, page: 1, pageSize: 1 }).then(({ meta }) => this.setInfo({ auditUserCount: meta.total }));
+    },
+    syncAuditActivity() {
+      useApplyApi
+        .get({ auditStatus: 0, songType: 1, page: 1, pageSize: 1 })
+        .then(({ meta }) => this.setInfo({ auditActivityCount: meta.total }));
+
+      useApplyApi
+        .get({ auditStatus: 2, songType: 1, createdForm: 1, page: 1, pageSize: 1 })
+        .then(({ meta }) => this.setInfo({ activityApplyFailCount: meta.total }));
+    },
+    async syncInfo() {
+      const { user, permissions } = await useAuthApi.info();
+      this.setInfo({ ...user, permissions });
+      useAppStore().queryPermissionList();
+      this.syncAuditUser();
+      this.syncAuditActivity();
+    },
+    logout() {
+      clearToken();
+      this.$reset();
+      window.location.reload();
+    },
+
+    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 { SystemConfig } from '@/types/system-config';
+import { Tag } from '@/types/tag';
+import { Project } from '@/types/project';
+import useProjectApi from '@/http/project';
+import useUserApi from '@/http/user';
+import useTagApi from '@/http/Tag';
+import useConfigApi from '@/http/config';
+import { User } from '@/utils/model';
+
+const useSelectionStore = defineStore('selection', {
+  state: (): Selection => ({ user: [], project: [], tag: [], config: [] }),
+  getters: {
+    getUserOptions(state): User[] {
+      return state.user;
+    },
+    getProjectOptions(state) {
+      return state.project;
+    },
+    getTagOptions(state) {
+      return state.tag;
+    },
+    projectOptions(state) {
+      return state.project;
+    },
+    getConfigOption(state) {
+      return state.config;
+    },
+    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);
+    },
+    activityMark(state): SystemConfig | undefined {
+      return state.config.find((item) => item.identifier === 'activity_mark');
+    },
+    activityMarkOptions(state): SystemConfig[] {
+      return state.config.filter((item) => item.parent_id === this.activityMark?.id);
+    },
+    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 || '*';
+    },
+    activityTagOptions(state): Pick<Tag, 'id' | 'name' | 'type'>[] {
+      return state.tag.filter((item) => item.type === 1);
+    },
+    activityProjectOptions(state): Pick<Project, 'id' | 'name'>[] {
+      return state.project;
+    },
+    activityAuditIds(state): string[] {
+      return state.config.find((item) => item.identifier === 'activity_audit_ids')?.content?.split(',') || [];
+    },
+    appleDemoCover(state): string {
+      return state.config.find((item) => item.identifier === 'activity_demo_cover')?.content || '';
+    },
+
+    userAuthTag(state) {
+      return state.tag.filter((item) => item.type === 4);
+    },
+  },
+  actions: {
+    queryUser() {
+      useUserApi
+        .get({ fetchType: 'all', setColumn: ['id', 'nick_name', 'real_name', 'avatar'], sortBy: 'id', sortType: 'desc' })
+        .then(({ data }) => {
+          this.user = data;
+        });
+    },
+    queryProject() {
+      useProjectApi
+        .get({ fetchType: 'all', setColumn: ['id', 'is_can_apply', 'is_can_demo_apply', 'name'], sortBy: 'id', sortType: 'desc' })
+        .then(({ data }) => {
+          this.project = data;
+        });
+    },
+    queryTag() {
+      useTagApi.get({ fetchType: 'all', setColumn: ['id', 'name', 'type'], sortBy: 'weight', sortType: 'desc' }).then(({ data }) => {
+        this.tag = data;
+      });
+    },
+    queryConfig() {
+      useConfigApi
+        .get({
+          fetchType: 'all',
+          parent_id: '',
+          setColumn: ['id', 'parent_id', 'name', 'identifier', 'content'],
+          sortBy: 'weight',
+          sortType: 'desc',
+        })
+        .then(({ data }) => {
+          this.config = data;
+        });
+    },
+    queryAll() {
+      this.queryConfig();
+      this.queryUser();
+      this.queryProject();
+      this.queryTag();
+    },
+  },
+});
+export default useSelectionStore;

+import { Project } from '@/types/project';
+import { Tag } from '@/types/tag';
+import { SystemConfig } from '@/types/system-config';
+import { User } from '@/utils/model';
+
+export interface Selection {
+  user: User[];
+  project: Pick<Project, 'id' | 'name'>[];
+  tag: Pick<Tag, 'id' | 'name' | 'type'>[];
+  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 };
+  push_type: ['tag', 'user'];
+  push_user: number[];
+}
+
+export interface ActivityApplyRecord {
+  id: number;
+  user: User;
+  created_at: string;
+  audit_msg: string;
+}
+
+export interface ActivityApply {
+  id: number;
+  cover: string;
+  song_name: string;
+  song_type: number;
+  sub_title?: string;
+  lang: string[];
+  speed: string;
+  is_official: number;
+  mark: string;
+  lyric: string;
+  clip_lyric: string;
+  sex: string;
+  project_id: number;
+  estimate_release_at: string;
+  audit_status: number;
+  record_count?: number;
+  is_push: number;
+  expand: ActivityExpand;
+  project?: Project;
+  tags?: Tag[];
+  user?: User;
+  out_side_manages?: { user_id: number; permission: string[] }[];
+  apply_records?: ActivityApplyRecord[];
+  last_record?: ActivityApplyRecord;
+  created_form: number;
+  weight: number;
+}
+
+export type ActivityApplyFormStep1 = Pick<
+  ActivityApply,
+  'cover' | 'song_name' | 'song_type' | 'sub_title' | 'lang' | 'speed' | 'weight'
+> & {
+  expand: Pick<ActivityExpand, 'tag_ids'>;
+};
+
+export type ActivityApplyFormStep2 = Pick<
+  ActivityApply,
+  'project_id' | 'sex' | 'estimate_release_at' | 'is_official' | 'mark' | 'out_side_manages'
+> & {
+  expand: Pick<ActivityExpand, 'lyricist' | 'composer' | 'arranger'>;
+};
+
+export type ActivityApplyFormStep3 = Pick<ActivityApply, 'song_name' | 'lyric' | 'clip_lyric'> & {
+  expand: Pick<ActivityExpand, 'guide_source' | 'karaoke_source' | 'track_source'>;
+};
+
+export type ActivityApplyFormStep4 = Pick<ActivityApply, 'is_push'> & {
+  expand: Pick<ActivityExpand, 'push_type' | 'push_user'>;
+};
+
+export type ActivityApplyForm = ActivityApplyFormStep1 & ActivityApplyFormStep2 & ActivityApplyFormStep3 & ActivityApplyFormStep4;

+import { Tag } from '@/types/tag';
+import { Project } from '@/types/project';
+
+export interface ActivityRegister {
+  id: number;
+  song_name: string;
+  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;
+  is_official: number;
+  is_recommend: number;
+  weight: number;
+  status: number;
+  created_at: string;
+  tags?: Tag[];
+  project?: Project;
+  record?: {
+    cover: string;
+    song_name: string;
+    sub_title: string;
+    tagIds: number[];
+    project_id: number;
+    guide: string;
+    karaoke: string;
+    lyric: string;
+    clip_lyric: string;
+  };
+}

+import { Activity } from '@/types/activity';
+import { Singer } from '@/types/singer';
+import { Business } from '@/types/business';
+
+export interface ActivityWork {
+  id: number;
+  demo_url: string;
+  version: number;
+  type: '' | 'Submit' | 'Save';
+  status: 0 | 1 | 2;
+  mode: 0 | 1;
+  sing_type: '' | 'Full' | 'Part';
+  activity_id: number;
+  activity_status: number;
+  user_id: number;
+  open_id: string;
+  user?: Singer;
+  activity?: Activity;
+  business?: Business;
+  submit_at: string;
+  created_at: string;
+  business_id: 0;
+  business_nick_name?: string;
+  business_real_name?: string;
+  business_role?: string;
+  children: [];
+
+  user_email: string;
+  user_nick_name: string;
+  user_real_name: string;
+  user_company: string;
+  user_province: string;
+  user_city: string;
+  user_rate: string;
+  user_role: string;
+
+  share_id?: number;
+  share_nick_name?: string;
+  share_real_name?: string;
+  share_role?: string;
+}

+import { Project } from '@/types/project';
+import { Tag } from '@/types/tag';
+import { Admin } from '@/types/admin';
+import { FileStatus } from '@arco-design/web-vue/es/upload/interfaces';
+import { User } from '@/types/user';
+
+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?: User;
+  audit_user_id: number;
+  audit_msg: string;
+  current?: {
+    cover: string;
+    song_name: string;
+    sub_title: string;
+    tagIds: number[];
+    project_id: number;
+    guide: string;
+    karaoke: string;
+    lyric: string;
+    clip_lyric: string;
+  };
+  created_at?: string;
+  updated_at?: string;
+}
+
+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 Activity {
+  id: number;
+  song_name: string;
+  sub_title: string;
+  cover: string;
+  user_id: number;
+  project_id: number;
+  guide: string;
+  guide_source?: string;
+  karaoke: string;
+  karaoke_source?: string;
+  lyric: string;
+  clip_lyric: string;
+  weight: number;
+  audit_status: number;
+  status: number;
+  created_at: string;
+  updated_at: string;
+  submit_works_count?: number;
+  views_count?: number;
+  collections_count?: number;
+  send_url?: ActivitySendLink[];
+  user?: Admin;
+  project?: Project;
+  tags?: Tag[];
+  materials?: ActivityMaterial[];
+  recommend_intros?: ActivityRecommendIntro[];
+  apply_records?: ActivityApplyRecord[];
+  is_push?: 0 | 1;
+  is_official?: 0 | 1;
+  is_recommend?: 0 | 1;
+  push_type?: number[];
+
+  listen_count?: number;
+  like_count?: number;
+  submit_count?: number;
+
+  estimate_release_at?: string;
+  expand?: ActivityExpand;
+  links?: User[];
+  publish_at: string;
+  lang: string[];
+  sex: string;
+}
+
+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;
+  company: string;
+  activities_count?: number;
+  singers_count?: number;
+  submit_activities_count?: number;
+  accept_activities_count?: number;
+  checked_activities_count?: number;
+}

+export interface AppVersion {
+  id: number;
+  os: string;
+  app_ver: string;
+  app_no: number;
+  url: string;
+  remark?: string;
+  is_force: 1 | 0;
+}

+import { User } from '@/types/user';
+
+export interface Business extends User {
+  singers_count?: number;
+  submit_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 Option {
+  value: unknown;
+  label: string;
+  disabled?: boolean;
+}
+
+export interface QueryForParams {
+  [key: string]: unknown;
+
+  setColumn?: string[];
+  setWith?: string | string[];
+  setSort?: string | string[];
+  querySelect?: string[];
+  withRelation?: string[];
+  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 QueryForPaginationRes<T = object> {
+  list: T[];
+  current: number;
+  pageSize: number;
+  total: number;
+}
+
+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 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 };
+}

+import { Admin } from '@/types/admin';
+
+export interface OperateLog {
+  id: number;
+  user?: Admin;
+  action: string;
+  content: string;
+  created_at: string;
+}

+// eslint-disable-next-line import/no-cycle
+import { Admin } from '@/types/admin';
+
+export interface Project {
+  id: number;
+  cover: string;
+  name: string;
+  intro: string;
+  user?: Admin;
+  status: number;
+  is_promote?: number;
+  is_public?: number;
+  created_at?: string;
+  updated_at?: string;
+  up_count?: number;
+  down_count?: number;
+  finish_count?: number;
+  managers_count?: number;
+  activities_count?: number;
+  send_count?: number;
+  managers?: Admin[];
+
+  activity_count?: number;
+  activity_up_count?: number;
+  activity_match_count?: number;
+  activity_down_count?: number;
+  activity_send_count?: number;
+  manage_count?: number;
+}

+import { Business } from '@/types/business';
+import { User } from '@/types/user';
+
+export interface Singer extends User {
+  business_id?: number;
+  business?: Business;
+  submit_activities_count?: number;
+  accept_activities_count?: number;
+}

+import { User } from '@/types/user';
+
+export interface Square {
+  title: string;
+  is_top: 0 | 1;
+  status: 0 | 1;
+  type?: number;
+  created_at?: string;
+  deleted_at?: string | null;
+  view_count?: number;
+  interact_count?: number;
+  user?: User;
+
+  attach_users?: [];
+  attach_activities?: [];
+  attach_images?: [];
+  attach_musics?: [];
+}
+
+export interface SquareImage {
+  id: number;
+  value: string;
+}
+
+export interface SquareComment {
+  id: number;
+  content: string;
+  created_at: string;
+}

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

+export interface SystemConfig {
+  id: number;
+  parent_id: number;
+  name: string;
+  content: string;
+  remark: string;
+  status: 1 | 0;
+  weight: number;
+  identifier: string;
+  children?: SystemConfig[];
+  expand: {
+    type: string;
+    [key: string]: unknown;
+  };
+}

+export interface SystemPermission {
+  id: number;
+  name: string;
+  guard: 'Admin' | 'Manage' | 'App';
+  type: 'Menu' | 'Button';
+  label: string;
+  icon?: string;
+  is_show_line?: 1 | 0;
+  parent_id: number;
+  weight: number;
+  parent?: SystemPermission;
+  children?: SystemPermission[];
+  created_at: string;
+  updated_at: string;
+}

+// eslint-disable-next-line import/no-cycle
+import { User } from '@/types/user';
+import { SystemPermission } from '@/types/system-permission';
+
+export interface SystemRole {
+  id: number;
+  name: string;
+  guard: '' | 'Admin' | 'Manage';
+  status: 0 | 1;
+  intro?: string;
+  user_id?: number;
+  user?: User;
+  permissions?: SystemPermission[];
+}

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

+import { User } from '@/types/user';
+
+export interface UserGroup {
+  id: number;
+  title: string;
+  intro: string;
+  user_id: number;
+  status: 0 | 1;
+  user?: User;
+  created_at: string;
+}

+import { User } from '@/types/user';
+import { AttributeData } from '@/types/global';
+
+export interface UserRegister {
+  id: number;
+  role: 'Singer' | 'Business';
+  nick_name: string;
+  real_name: string;
+  phone: string;
+  company: string;
+  remark: string;
+  sound: string;
+  referrer_id: number;
+  business_id: number;
+  admin_id: number;
+  examine_id: number;
+  status: 0 | 1 | 2;
+  audit_info: string;
+  examine_at: string;
+  audit_at: string;
+  admin?: User;
+  business?: User;
+}
+
+export interface UserRegisterAuditInfo extends AttributeData {
+  status: number;
+  business_id: number;
+  examine_info: string;
+}
+
+export interface UserRegisterRecord {
+  id: number;
+  admin_id: number;
+  examine_info: string;
+  updated_at: string;
+  admin?: User;
+}

+// eslint-disable-next-line import/no-cycle
+import { Project } from '@/types/project';
+
+// eslint-disable-next-line import/no-cycle
+import { Tag } from '@/types/tag';
+// eslint-disable-next-line import/no-cycle
+import { SystemRole } from '@/types/system-role';
+
+export interface User {
+  id: number;
+  business_id?: number;
+  open_id?: string;
+  avatar?: string;
+  nick_name: string;
+  real_name: string;
+  phone?: string;
+  email?: string;
+  intro?: string;
+  company?: string;
+  rate?: string;
+  province?: string;
+  city?: string;
+  sound?: string;
+  role?: 'Singer' | 'Business';
+  sex?: number;
+  scope?: number;
+  like_activities_count?: number;
+  status?: number;
+  official_status?: number;
+  audit_status?: number;
+  last_login?: string;
+  created_at?: string;
+  updated_at?: string;
+  projects?: Project[];
+  manage_projects?: Project[];
+  roles?: SystemRole[];
+  styles?: Tag[];
+  tags?: Tag[];
+  voices?: Tag[];
+  skills?: Tag[];
+  identities?: Tag[];
+  business?: User;
+  style_tags?: Tag[];
+  auth_tags?: Tag[];
+  identity: number;
+  area_code: string;
+}

+import RabbitLyrics from 'rabbit-lyrics';
+import parseLyrics from 'rabbit-lyrics/src/parseLyrics';
+
+// @ts-ignore
+export default class AudioSyncLyric extends RabbitLyrics {
+  public startTime = 0;
+
+  public setStartTime(time: number) {
+    this.startTime = time || 0;
+    this.render();
+    this.mediaElement.addEventListener('timeupdate', this.synchronize);
+  }
+
+  private render(): void {
+    // Add class names
+    this.lyricsElement.classList.add('rabbit-lyrics');
+    this.lyricsElement.classList.add(`rabbit-lyrics--${this.viewMode}`);
+    this.lyricsElement.classList.add(`rabbit-lyrics--${this.alignment}`);
+    this.lyricsElement.textContent = null;
+
+    // Render lyrics lines
+    this.lyricsLines = parseLyrics(this.lyrics).map((line) => {
+      const lineElement = document.createElement('div');
+      lineElement.className = 'rabbit-lyrics__line';
+      lineElement.addEventListener('click', () => {
+        this.mediaElement.currentTime = line.startsAt - this.startTime;
+        this.synchronize();
+      });
+      const lineContent = line.content.map((inline) => {
+        const inlineElement = document.createElement('span');
+        inlineElement.className = 'rabbit-lyrics__inline';
+        inlineElement.textContent = inline.content;
+        lineElement.append(inlineElement);
+        return { ...inline, element: inlineElement };
+      });
+      this.lyricsElement.append(lineElement);
+      return { ...line, content: lineContent, element: lineElement };
+    });
+    this.synchronize();
+  }
+
+  private synchronize = () => {
+    const time = this.startTime + this.mediaElement.currentTime;
+    let changed = false; // If here are active lines changed
+    const activeLines = this.lyricsLines.filter((line) => {
+      if (time >= line.startsAt && time < line.endsAt) {
+        // If line should be active
+        if (!line.element.classList.contains('rabbit-lyrics__line--active')) {
+          // If it hasn't been activated
+          changed = true;
+          line.element.classList.add('rabbit-lyrics__line--active');
+        }
+        line.content.forEach((inline) => {
+          if (time >= inline.startsAt) {
+            inline.element.classList.add('rabbit-lyrics__inline--active');
+          } else {
+            inline.element.classList.remove('rabbit-lyrics__inline--active');
+          }
+        });
+        return true;
+      }
+      // If line should be inactive
+      if (line.element.classList.contains('rabbit-lyrics__line--active')) {
+        // If it hasn't been deactivated
+        changed = true;
+        line.element.classList.remove('rabbit-lyrics__line--active');
+        line.content.forEach((inline) => {
+          inline.element.classList.remove('rabbit-lyrics__inline--active');
+        });
+      }
+      return false;
+    });
+
+    if (changed && activeLines.length > 0) {
+      // Calculate scroll top. Vertically align active lines in middle
+      const activeLinesOffsetTop =
+        (activeLines[0].element.offsetTop +
+          activeLines[activeLines.length - 1].element.offsetTop +
+          activeLines[activeLines.length - 1].element.offsetHeight) /
+        2;
+      this.lyricsElement.scrollTop = activeLinesOffsetTop - this.lyricsElement.clientHeight / 2;
+    }
+  };
+}

+const isLogin = () => {
+  return !!localStorage.getItem('access_token');
+};
+
+const getToken = () => {
+  return localStorage.getItem('access_token') || localStorage.getItem('refresh_token');
+};
+
+const setToken = (access_token: string, refresh_token: string) => {
+  localStorage.setItem('access_token', access_token);
+  localStorage.setItem('refresh_token', refresh_token);
+};
+
+const getRefreshToken = () => {
+  return localStorage.getItem('refresh_token');
+};
+
+const clearToken = () => {
+  localStorage.removeItem('access_token');
+  localStorage.removeItem('refresh_token');
+};
+
+export { isLogin, getToken, setToken, getRefreshToken, clearToken };

+import { AnyObject } from '@/types/global';
+import { createVNode, Ref, VNode } from 'vue';
+import { Form, FormItem, Input, InputNumber, Textarea, Modal, Select } from '@arco-design/web-vue';
+import InputUpload from '@/components/input-upload/index.vue';
+
+import { RenderContent } from '@arco-design/web-vue/es/_utils/types';
+import { ModalConfig } from '@arco-design/web-vue/es/modal/interface';
+import { set } from 'lodash';
+
+export function createModalVNode(content: RenderContent, props?: object & Omit<ModalConfig, 'content'>) {
+  return Modal.open({
+    content,
+    titleAlign: 'start',
+    closable: false,
+    escToClose: false,
+    maskClosable: false,
+    okButtonProps: { size: 'small' },
+    cancelButtonProps: { size: 'small' },
+    ...props,
+  });
+}
+
+export function createFormVNode(props?: AnyObject, children?: VNode | VNode[] | undefined): VNode {
+  return createVNode(Form, { autoLabelWidth: true, ...props }, () => children);
+}
+
+export function createFormItemVNode(props?: AnyObject, children?: string | VNode | VNode[]): VNode {
+  return createVNode(FormItem, { showColon: true, ...props }, () => children);
+}
+
+export function createSelectVNode(value: Ref, options: AnyObject[], props?: AnyObject): VNode {
+  return createVNode(Select, {
+    options,
+    'modelValue': value.value,
+    'placeholder': '请选择',
+    'onUpdate:modelValue': (val?: unknown) => set(value, 'value', val),
+    ...props,
+  });
+}
+
+export function createSelectionFormItemVNode(value: Ref, options: AnyObject[], itemProps?: AnyObject, props?: AnyObject): VNode {
+  return createFormItemVNode(itemProps, createSelectVNode(value, options, props));
+}
+
+export function createInputVNode(value: Ref, props?: AnyObject): VNode {
+  return createVNode(Input, {
+    'modelValue': value.value,
+    'placeholder': '请输入',
+    'onUpdate:modelValue': (val?: string) => set(value, 'value', val || ''),
+    ...props,
+  });
+}
+
+export function createInputFormItemVNode(value: Ref, itemProps?: AnyObject, props?: AnyObject): VNode {
+  return createFormItemVNode(itemProps, createInputVNode(value, props));
+}
+
+export function createInputNumberVNode(value: Ref, props?: AnyObject): VNode {
+  return createVNode(InputNumber, {
+    'modelValue': value.value,
+    'placeholder': '请输入',
+    'onUpdate:modelValue': (val?: string) => set(value, 'value', val || 0),
+    'min': 0,
+    'max': 255,
+    ...props,
+  });
+}
+
+export function createInputNumberFormItemVNode(value: Ref, itemProps?: AnyObject, props?: AnyObject): VNode {
+  return createFormItemVNode(itemProps, createInputNumberVNode(value, props));
+}
+
+export function createTextareaVNode(value: Ref, props?: AnyObject) {
+  return createVNode(Textarea, {
+    'modelValue': value.value,
+    'placeholder': '请输入',
+    'onUpdate:modelValue': (val?: string) => set(value, 'value', val || 0),
+    'max-length': 500,
+    'show-word-limit': true,
+    'auto-size': { minRows: 3, maxRows: 6 },
+    ...props,
+  });
+}
+
+export function createTextareaFormItemVNode(value: Ref, itemProps?: AnyObject, props?: AnyObject) {
+  return createFormItemVNode(itemProps, createTextareaVNode(value, props));
+}
+
+export function createInputUploadVNode(value: Ref, props?: AnyObject): VNode {
+  return createVNode(InputUpload, {
+    'modelValue': value.value,
+    'placeholder': '请选择',
+    'onUpdate:modelValue': (val?: string) => set(value, 'value', val || 0),
+    ...props,
+  });
+}
+
+export function createInputUploadFormItemVNode(value: Ref, itemProps?: AnyObject, props?: AnyObject): VNode {
+  return createFormItemVNode(itemProps, createInputUploadVNode(value, props));
+}

+export const isProduction = process.env.NODE_ENV === 'production';
+
+export const debug = !isProduction;
+
+export const defaultProjectCover = 'https://hisin.oss-cn-hangzhou.aliyuncs.com/tmp/project_cover.png';

+export function addEventListen(target: Window | HTMLElement, event: string, handler: EventListenerOrEventListenerObject, capture = false) {
+  if (target.addEventListener && typeof target.addEventListener === 'function') {
+    target.addEventListener(event, handler, capture);
+  }
+}
+
+export function removeEventListen(
+  target: Window | HTMLElement,
+  event: string,
+  handler: EventListenerOrEventListenerObject,
+  capture = false
+) {
+  if (target.removeEventListener && typeof target.removeEventListener === 'function') {
+    target.removeEventListener(event, handler, capture);
+  }
+}

+import { createVNode, VNode } from 'vue';
+import { Form, FormItem, Modal } from '@arco-design/web-vue';
+import { AnyObject } from '@/types/global';
+import { RenderContent } from '@arco-design/web-vue/es/_utils/types';
+import { ModalConfig } from '@arco-design/web-vue/es/modal/interface';
+import { compact, get } from 'lodash';
+
+type TargetContext = '_self' | '_parent' | '_blank' | '_top';
+
+export const openWindow = (url: string, opts?: { target?: TargetContext; [key: string]: any }) => {
+  const { target = '_blank', ...others } = opts || {};
+  window.open(
+    url,
+    target,
+    Object.entries(others)
+      .reduce((preValue: string[], curValue) => {
+        const [key, value] = curValue;
+        return [...preValue, `${key}=${value}`];
+      }, [])
+      .join(',')
+  );
+};
+
+export const regexUrl = new RegExp(
+  '^(?!mailto:)(?:(?:http|https|ftp)://)(?:\\S+(?::\\S*)?@)?(?:(?:(?:[1-9]\\d?|1\\d\\d|2[01]\\d|22[0-3])(?:\\.(?:1?\\d{1,2}|2[0-4]\\d|25[0-5])){2}(?:\\.(?:[0-9]\\d?|1\\d\\d|2[0-4]\\d|25[0-4]))|(?:(?:[a-z\\u00a1-\\uffff0-9]+-?)*[a-z\\u00a1-\\uffff0-9]+)(?:\\.(?:[a-z\\u00a1-\\uffff0-9]+-?)*[a-z\\u00a1-\\uffff0-9]+)*(?:\\.(?:[a-z\\u00a1-\\uffff]{2,})))|localhost)(?::\\d{2,5})?(?:(/|\\?|#)[^\\s]*)?$',
+  'i'
+);
+
+export const createFormVNode = (props: AnyObject, children: VNode | VNode[]) =>
+  createVNode(Form, { autoLabelWidth: true, ...props }, () => children);
+
+export const createFormItemVNode = (props: AnyObject, children: VNode | VNode[]) =>
+  createVNode(FormItem, props, { default: () => children });
+
+export const createModalVNode = (content: RenderContent, props: Omit<ModalConfig, 'content'>) =>
+  Modal.open({ content, closable: false, maskClosable: false, escToClose: false, ...props });
+
+export const arrayToTree = (list: any[], parentId: unknown = 0, config = {}) => {
+  const idKey = get(config, 'idKey', 'id');
+  const parentKey = get(config, 'parentKey', 'parent_id');
+  const childrenKey = get(config, 'childrenKey', 'children');
+  const removeEmpty = get(config, 'removeEmpty', false);
+
+  return list
+    .filter((item) => item[parentKey] === parentId)
+    .map((item) => {
+      item[childrenKey] = arrayToTree(list, item[idKey], config);
+      if (removeEmpty && item[childrenKey].length === 0) {
+        delete item[childrenKey];
+      }
+      return item;
+    });
+};
+
+export const findTreeParentIds = (nodeData: AnyObject[], parentId: any, config = {}): any[] => {
+  const ids: any[] = [];
+  const idKey = get(config, 'idKey', 'id');
+  const parentKey = get(config, 'parentKey', 'parent_id');
+
+  nodeData
+    ?.filter((item) => item[idKey] === parentId)
+    ?.forEach((item) => ids.push(item[idKey], ...findTreeParentIds(nodeData, item[parentKey])));
+
+  return ids;
+};
+
+export const findTreeChildIds = (nodeData: AnyObject[], nodeId: any, config = {}): any[] => {
+  const ids: any[] = [];
+  const idKey = get(config, 'idKey', 'id');
+  const parentKey = get(config, 'parentKey', 'parent_id');
+
+  nodeData
+    ?.filter((item) => item[parentKey] === nodeId)
+    ?.forEach((item) => ids.push(item[idKey], ...findTreeChildIds(nodeData, item[idKey])));
+
+  return ids;
+};
+
+export const bytesForHuman = (bytes: number, decimals = 2) => {
+  const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB'];
+
+  let i = 0;
+
+  // eslint-disable-next-line no-plusplus
+  for (i; bytes > 1024; i++) {
+    bytes /= 1024;
+  }
+
+  return `${parseFloat(bytes.toFixed(decimals))} ${units[i]}`;
+};
+
+export const audioBufferToWav = (audioBuffer: AudioBuffer, len: number) => {
+  const numOfChan = audioBuffer.numberOfChannels;
+  const length = len * numOfChan * 2 + 44;
+  const buffer = new ArrayBuffer(length);
+  const view = new DataView(buffer);
+  const channels: Float32Array[] = [];
+  let i: number;
+  let sample: number;
+  let offset = 0;
+  let pos = 0;
+
+  // write WAVE header
+  // eslint-disable-next-line no-use-before-define
+  setUint32(0x46464952); // "RIFF"
+  // eslint-disable-next-line no-use-before-define
+  setUint32(length - 8); // file length - 8
+  // eslint-disable-next-line no-use-before-define
+  setUint32(0x45564157); // "WAVE"
+
+  // eslint-disable-next-line no-use-before-define
+  setUint32(0x20746d66); // "fmt " chunk
+  // eslint-disable-next-line no-use-before-define
+  setUint32(16); // length = 16
+  // eslint-disable-next-line no-use-before-define
+  setUint16(1); // PCM (uncompressed)
+  // eslint-disable-next-line no-use-before-define
+  setUint16(numOfChan);
+  // eslint-disable-next-line no-use-before-define
+  setUint32(audioBuffer.sampleRate);
+  // eslint-disable-next-line no-use-before-define
+  setUint32(audioBuffer.sampleRate * 2 * numOfChan); // avg. bytes/sec
+  // eslint-disable-next-line no-use-before-define
+  setUint16(numOfChan * 2); // block-align
+  // eslint-disable-next-line no-use-before-define
+  setUint16(16); // 16-bit (hardcoded in this demo)
+
+  // eslint-disable-next-line no-use-before-define
+  setUint32(0x61746164); // "data" - chunk
+  // eslint-disable-next-line no-use-before-define
+  setUint32(length - pos - 4); // chunk length
+
+  // write interleaved data
+  // eslint-disable-next-line no-plusplus
+  for (i = 0; i < audioBuffer.numberOfChannels; i++) {
+    // @ts-ignore
+    channels.push(audioBuffer.getChannelData(i));
+  }
+
+  while (pos < length) {
+    // eslint-disable-next-line no-plusplus
+    for (i = 0; i < numOfChan; i++) {
+      // interleave channels
+      sample = Math.max(-1, Math.min(1, channels[i][offset])); // clamp
+      // eslint-disable-next-line no-bitwise
+      sample = (0.5 + sample < 0 ? sample * 32768 : sample * 32767) | 0; // scale to 16-bit signed int
+      view.setInt16(pos, sample, true); // write 16-bit sample
+      pos += 2;
+    }
+    // eslint-disable-next-line no-plusplus
+    offset++; // next source sample
+  }
+
+  // create Blob
+  return new Blob([buffer], { type: 'audio/wav' });
+
+  function setUint16(data: number) {
+    view.setUint16(pos, data, true);
+    pos += 2;
+  }
+
+  function setUint32(data: number) {
+    view.setUint32(pos, data, true);
+    pos += 4;
+  }
+};
+
+export const getLyricTimeArr = (lyric: string): string[] => {
+  const times: string[] = [];
+
+  lyric?.split('\n').forEach((item) => {
+    item = item.replace(/(^\s*)|(\s*$)/g, '');
+    times.push(item.substring(item.indexOf('[') + 1, item.indexOf(']')));
+  });
+
+  return compact(times);
+};
+
+export const promiseToBoolean = (callback: Promise<any> | undefined) => callback?.then(() => true).catch(() => false) || false;
+
+export default null;

+const opt = Object.prototype.toString;
+
+export function isArray(obj: any): obj is any[] {
+  return opt.call(obj) === '[object Array]';
+}
+
+export function isObject(obj: any): obj is { [key: string]: any } {
+  return opt.call(obj) === '[object Object]';
+}
+
+export function isString(obj: any): obj is string {
+  return opt.call(obj) === '[object String]';
+}
+
+export function isNumber(obj: any): obj is number {
+  return opt.call(obj) === '[object Number]' && obj === obj; // eslint-disable-line
+}
+
+export function isRegExp(obj: any) {
+  return opt.call(obj) === '[object RegExp]';
+}
+
+export function isFile(obj: any): obj is File {
+  return opt.call(obj) === '[object File]';
+}
+
+export function isBlob(obj: any): obj is Blob {
+  return opt.call(obj) === '[object Blob]';
+}
+
+export function isUndefined(obj: any): obj is undefined {
+  return obj === undefined;
+}
+
+export function isNull(obj: any): obj is null {
+  return obj === null;
+}
+
+export function isFunction(obj: any): obj is (...args: any[]) => any {
+  return typeof obj === 'function';
+}
+
+export function isEmptyObject(obj: any): boolean {
+  return isObject(obj) && Object.keys(obj).length === 0;
+}
+
+export function isExist(obj: any): boolean {
+  return obj || obj === 0;
+}
+
+export function isWindow(el: any): el is Window {
+  return el === window;
+}

+import { Tag } from '@/types/tag';
+import { SystemRole } from '@/types/system-role';
+import { Activity } from '@/types/activity';
+import { AnyObject } from '@/types/global';
+
+export interface BaseUser {
+  id: number;
+  avatar: string;
+  nick_name: string;
+  real_name: string;
+  identity: number;
+}
+
+export interface User extends BaseUser {
+  cover: string;
+  sex: number;
+  email: string;
+  lang: string;
+  area_code: string;
+  phone: string;
+  created_at: string;
+  scope: number;
+  demo_type: number;
+  user_tag_id: number;
+  official_status: number;
+  status: number;
+  company: string;
+  province: string;
+  city: string;
+  intro: string;
+
+  register_type?: number;
+  inviter?: any;
+  register_remark?: string;
+
+  business_singer_limit: number;
+
+  business?: BaseUser & { [K in keyof User]: User[K] };
+  auth_tags?: Pick<Tag, 'id' | 'name'>[];
+  style_tags?: Pick<Tag, 'id' | 'name'>[];
+
+  // eslint-disable-next-line no-use-before-define
+  projects?: Project[];
+  roles?: SystemRole[];
+  // eslint-disable-next-line no-use-before-define
+  manage_projects?: Project[];
+  opus?: Activity[];
+  expand?: {
+    recommend?: {
+      activity?: string;
+    };
+  };
+}
+
+export interface UserDynamics {
+  id: number;
+  type: 'image' | 'audio' | 'video';
+  intro: string;
+  properties: object;
+  is_top: number;
+  created_at: string;
+  updated_at: string;
+}
+
+export interface UserImageDynamics extends UserDynamics {
+  properties: {
+    url: string;
+    [key: string]: unknown;
+  };
+}
+
+export interface UserAudioDynamics extends UserDynamics {
+  properties: {
+    cover: {
+      url: string;
+      width: number;
+      height: number;
+    };
+    url: string;
+    [key: string]: unknown;
+  };
+}
+
+export interface UserManageActivity {
+  id: number;
+  user: Pick<
+    User,
+    | 'id'
+    | 'avatar'
+    | 'nick_name'
+    | 'real_name'
+    | 'area_code'
+    | 'phone'
+    | 'email'
+    | 'sex'
+    | 'status'
+    | 'register_type'
+    | 'official_status'
+    | 'inviter'
+    | 'register_remark'
+  >;
+  permission: string[];
+  activity_id: number;
+  activity_name: string;
+  activity_publish_at: string;
+  activity_status: string;
+}
+
+export interface UserSubmitActivity {
+  activity_cover: string;
+  activity_name: string;
+  activity_title: string;
+  activity_status: number;
+  status: number;
+  sing_type: string;
+  mode: number;
+  demo_url: string;
+  submit_at: string;
+  // eslint-disable-next-line no-use-before-define
+  project?: Project;
+  tags?: Tag[];
+}
+
+export interface UserSubmitPrice {
+  id: number;
+  value: {
+    year: string;
+    ratio: number;
+    amounts: number;
+    is_reward: 1 | 0;
+    is_dividend: 1 | 0;
+  };
+  is_deduct: 1 | 0;
+  is_talk: 1 | 0;
+  is_accept_address: 1 | 0;
+  address: {
+    name: string;
+    parent: {
+      name: string;
+    };
+  };
+}
+
+export interface UserMember {
+  id: number;
+  role: string;
+  is_top: number;
+  status: number;
+  member_id: number;
+  member: User;
+}
+
+interface UserCertifyRecord {
+  id: number;
+  status: number;
+  reason?: string;
+  operator_id: number;
+  operator?: BaseUser & { [K in keyof User]: User[K] };
+  updated_at: string;
+}
+
+export interface UserCertify {
+  id: number;
+  user_id: number;
+  user?: Pick<
+    User,
+    | 'id'
+    | 'avatar'
+    | 'nick_name'
+    | 'real_name'
+    | 'sex'
+    | 'identity'
+    | 'auth_tags'
+    | 'official_status'
+    | 'inviter'
+    | 'register_remark'
+    | 'register_type'
+  >;
+  nick_name: string;
+  register_type?: number;
+  inviter?: any;
+  register_remark?: string;
+  works: string;
+  reason?: string;
+  audio_info?: {
+    local?: string;
+    online?: string;
+  };
+  img: string[];
+  platform: string[];
+  tags: number[];
+  status: number;
+  records: UserCertifyRecord[];
+  created_at: string;
+}
+
+export interface BannerLink {
+  title: string;
+  cover: string;
+  content: string;
+  link_id: number;
+  link_type: 1 | 2 | 3;
+  link_name: string;
+  desc1: string;
+  desc2: string;
+  desc3: string;
+}
+
+export interface Banner {
+  id: number;
+  name: string;
+  cover: string;
+  type: number;
+  scope: number;
+  permission: string[];
+  content_picture: string;
+  content: BannerLink[];
+  status: number;
+  weight: number;
+}
+
+export interface Project {
+  id: number;
+  name: string;
+  cover: string;
+  head_cover: string;
+  intro: string;
+  master_id: number;
+  is_promote: number;
+  is_public: number;
+  is_can_apply: number;
+  is_can_manage: number;
+  is_can_demo_apply: number;
+  is_demo_audit: number;
+  status: number;
+
+  user?: BaseUser & { [K in keyof User]: User[K] };
+  master?: BaseUser & { [K in keyof User]: User[K] };
+
+  // eslint-disable-next-line no-use-before-define
+  managers: User[];
+
+  activity_count?: number;
+  activity_up_count?: number;
+  activity_match_count?: number;
+  activity_send_count?: number;
+
+  demo_count?: number;
+  demo_up_count?: number;
+}
+
+export interface Notification {
+  id: number;
+  title: string;
+  type: number;
+  content: string;
+  cover: string;
+  publish_type: number;
+  publish_at?: string;
+  publish_to: string[];
+  link_type: 'none' | 'user' | 'activity' | 'project' | 'rich';
+  link_id: number;
+  is_alert: number;
+  rich_content?: string;
+  status: number;
+
+  items_count?: number;
+}

+import { App, ComponentPublicInstance } from 'vue';
+import axios from 'axios';
+
+export default function handleError(Vue: App, baseUrl: string) {
+  if (!baseUrl) {
+    return;
+  }
+  Vue.config.errorHandler = (err: unknown, instance: ComponentPublicInstance | null, info: string) => {
+    // send error info
+    axios.post(`${baseUrl}/report-error`, {
+      err,
+      instance,
+      info,
+      // location: window.location.href,
+      // message: err.message,
+      // stack: err.stack,
+      // browserInfo: getBrowserInfo(),
+      // user info
+      // dom info
+      // url info
+      // ...
+    });
+  };
+}

+/**
+ * 跳转时，新打开标签页
+ */
+
+export default function openNewTab(router: any, name: string, params: object) {
+  const routeUrl = router.resolve({
+    name,
+    params,
+  });
+  window.open(routeUrl.href, '_blank');
+}

+/**
+ * Listening to routes alone would waste rendering performance. Use the publish-subscribe model for distribution management
+ * 单独监听路由会浪费渲染性能。使用发布订阅模式去进行分发管理。
+ */
+import mitt, { Handler } from 'mitt';
+import type { RouteLocationNormalized } from 'vue-router';
+
+const emitter = mitt();
+
+const key = Symbol('ROUTE_CHANGE');
+
+let latestRoute: RouteLocationNormalized;
+
+export function setRouteEmitter(to: RouteLocationNormalized) {
+  emitter.emit(key, to);
+  latestRoute = to;
+}
+
+export function listenerRouteChange(handler: (route: RouteLocationNormalized) => void, immediate = true) {
+  emitter.on(key, handler as Handler);
+  if (immediate && latestRoute) {
+    handler(latestRoute);
+  }
+}
+
+export function removeRouteListener() {
+  emitter.off(key);
+}

+<script setup lang="ts">
+  import { Space } from '@arco-design/web-vue';
+  import { computed, onMounted, ref } from 'vue';
+  import axios from 'axios';
+  import { audioBufferToWav } from '@/utils';
+  import AudioSyncLyric from '@/utils/audioSyncLyric';
+
+  const props = defineProps<{
+    src: string | File | ArrayBuffer;
+    lyric: string;
+    startWithLyric?: boolean;
+    startTime?: string;
+    endTime?: string;
+  }>();
+
+  const audioRef = ref();
+  const lyricRef = ref();
+
+  const source = ref();
+
+  const onPay = (e: any) => {
+    const audios = document.getElementsByTagName('audio');
+    [].forEach.call(audios, (i: HTMLAudioElement) => i !== e.target && i.pause());
+  };
+
+  const convertDurationToSeconds = (duration: string) => {
+    const timeArray = duration.split(':'); // 将时间字符串拆分为时、分、秒的数组
+
+    switch (timeArray.length) {
+      case 1:
+        return parseFloat(timeArray[0]);
+      case 2:
+        return parseInt(timeArray[0], 10) * 60 + parseFloat(timeArray[1]);
+      case 3:
+        return parseInt(timeArray[0], 10) * 3600 + parseInt(timeArray[1], 10) * 60 + parseFloat(timeArray[2]);
+      default:
+        return 0;
+    }
+  };
+
+  const startTime = computed((): number => convertDurationToSeconds(props.startTime ?? '00:00.00'));
+  const endTime = computed((): number | undefined => (props.endTime ? convertDurationToSeconds(props.endTime) : undefined));
+
+  const getResult = async (): Promise<ArrayBuffer> => {
+    if (props.src instanceof Blob) {
+      return props.src.arrayBuffer();
+    }
+    if (props.src instanceof ArrayBuffer) {
+      return Promise.resolve(props.src);
+    }
+
+    return axios
+      .get(`${props.src}?response-content-type=Blob`, { responseType: 'blob', timeout: 60000 })
+      .then(({ data }) => Promise.resolve(data.arrayBuffer()));
+  };
+
+  onMounted(async () => {
+    // eslint-disable-next-line no-new
+    new AudioSyncLyric(lyricRef.value, audioRef.value).setStartTime(startTime.value);
+    const result: ArrayBuffer = await getResult();
+
+    const audioCtx = new AudioContext();
+    const audioBuffer = await audioCtx.decodeAudioData(result);
+    const { numberOfChannels, sampleRate, duration } = audioBuffer;
+    const start = startTime.value; // 从第几秒开始复制
+    const end = endTime.value || duration; // 复制到第几秒结束
+
+    // eslint-disable-next-line no-bitwise
+    const startOffset = (start * sampleRate) >> 0; // 起始位置 = 开始时间 * 采样率
+    // eslint-disable-next-line no-bitwise
+    const endOffset = (end * sampleRate) >> 0; // 结束位置 = 结束时间 * 采样率
+    const frameCount = endOffset - startOffset; // 音频帧数/长度 = 结束位置 - 起始位置
+    const newAudioBuffer = audioCtx.createBuffer(numberOfChannels, frameCount, sampleRate);
+
+    // eslint-disable-next-line no-plusplus
+    for (let i = 0; i < numberOfChannels; i++) {
+      newAudioBuffer.getChannelData(i).set(audioBuffer.getChannelData(i).slice(startOffset, endOffset));
+    }
+
+    const blob = audioBufferToWav(newAudioBuffer, frameCount);
+    source.value = URL.createObjectURL(blob);
+  });
+</script>
+
+<template>
+  <Space direction="vertical" fill>
+    <audio ref="audioRef" :src="source" class="audio" controls controlsList="nodownload noplaybackrate" @play="onPay" />
+    <div ref="lyricRef" class="lyric">{{ lyric }}</div>
+  </Space>
+</template>
+
+<style scoped lang="less">
+  .audio {
+    height: 30px;
+    width: 100%;
+    outline: none;
+  }
+
+  .lyric {
+    border: none !important;
+    background-color: #f7f8fa;
+
+    :deep(.rabbit-lyrics__line) {
+      padding: 0.3em 1em !important;
+    }
+
+    :deep(.rabbit-lyrics__inline) {
+      color: #818181;
+    }
+
+    :deep(.rabbit-lyrics__inline.rabbit-lyrics__inline--active) {
+      font-size: 16px;
+      font-weight: 500;
+      color: black;
+    }
+  }
+</style>

+<template>
+  <Layout>
+    <Layout has-sider>
+      <LayoutSider :width="120" class="aside">
+        <Steps :current="currentStep" direction="vertical" :small="true">
+          <Step v-for="item in stepItems" :key="item.value">{{ item.label }}</Step>
+        </Steps>
+      </LayoutSider>
+      <LayoutContent class="main">
+        <component :is="currentContent" ref="formRef" v-model="formValue" :loading="loading" :filter-project="filterProject" />
+      </LayoutContent>
+    </Layout>
+    <LayoutFooter>
+      <Divider style="margin-top: 8px; margin-bottom: 20px" />
+      <Link :href="useSelectionStore().lyricTool" :hoverable="false" class="link-hover" icon>歌词制作工具</Link>
+      <Space style="float: right">
+        <IconButton v-show="currentStep !== 1" icon="left" label="上一步" @click="onPrev" />
+        <IconButton icon="right" icon-align="right" :loading="loading" :label="nextBtnLabel" @click="onNext" />
+      </Space>
+    </LayoutFooter>
+  </Layout>
+</template>
+
+<script setup lang="ts">
+  import { Layout, LayoutSider, LayoutContent, LayoutFooter, Step, Steps, Space, Divider, Link } from '@arco-design/web-vue';
+  import { computed, markRaw, ref } from 'vue';
+  import Step1FormContent from '@/views/audition/activity-apply/components/step1-form-content.vue';
+  import Step2FormContent from '@/views/audition/activity-apply/components/step2-form-content.vue';
+  import Step3FormContent from '@/views/audition/activity-apply/components/step3-form-content.vue';
+  import IconButton from '@/components/icon-button/index.vue';
+
+  import { useSelectionStore } from '@/store';
+
+  import { AnyObject } from '@/types/global';
+  import useLoading from '@/hooks/loading';
+  import { cloneDeep } from 'lodash';
+
+  const props = defineProps<{
+    initValue?: AnyObject;
+    filterProject?: (value: unknown) => boolean;
+    onSubmit: (data: AnyObject) => Promise<any>;
+  }>();
+
+  const { loading, setLoading } = useLoading(false);
+
+  const formRef = ref();
+  const formValue = ref({ ...cloneDeep(props.initValue) });
+
+  const stepItems = [
+    { value: 1, label: '基本信息', template: markRaw(Step1FormContent) },
+    { value: 2, label: '补充信息', template: markRaw(Step2FormContent) },
+    { value: 3, label: '上传文件', template: markRaw(Step3FormContent) },
+  ];
+
+  const currentStep = ref(1);
+  const currentContent = computed(() => stepItems.find((item) => item.value === currentStep.value)?.template);
+  const nextBtnLabel = computed(() => (currentStep.value === 3 ? '提交' : '下一步'));
+
+  const onPrev = (): void => {
+    currentStep.value = Math.max(1, currentStep.value - 1);
+  };
+
+  const onNext = () => {
+    formRef.value.onValid(async () => {
+      if (currentStep.value === stepItems.length) {
+        setLoading(true);
+        props.onSubmit(formValue.value).finally(() => setLoading(false));
+      }
+      currentStep.value = Math.min(stepItems.length, currentStep.value + 1);
+    });
+  };
+</script>
+
+<style scoped lang="less">
+  .aside {
+    box-shadow: unset !important;
+    border-right: 1px solid var(--color-border);
+    margin-right: 20px;
+    background-color: transparent;
+  }
+
+  .main {
+    min-width: 640px;
+  }
+</style>

+<script setup lang="ts">
+  import { Form, FormItem, Input, Message, Select } from '@arco-design/web-vue';
+  import { computed, ref } from 'vue';
+  import AvatarUpload from '@/components/avatar-upload/index.vue';
+  import TagSelect from '@/components/tag-select/index.vue';
+  import { FieldRule, FormInstance } from '@arco-design/web-vue/es/form';
+  import { useSelectionStore } from '@/store';
+  import { get, set } from 'lodash';
+  import { useVModels } from '@vueuse/core';
+  import ProjectSelect from '@/components/project-select/index.vue';
+
+  const props = withDefaults(defineProps<{ loading?: boolean; modelValue?: any; filterProject?: (value: any) => boolean }>(), {
+    filterProject: () => true,
+  });
+
+  const emits = defineEmits(['update:modelValue', 'update:loading']);
+
+  const formRef = ref<FormInstance>();
+  const { modelValue: formValue } = useVModels(props, emits);
+
+  const formRule = {
+    'cover': [{ type: 'string', required: true, message: '请上传活动封面' }],
+    'song_name': [{ type: 'string', required: true, message: '请输入歌曲名称' }],
+    'sub_title': [{ type: 'string', required: true, message: '请输入简介' }],
+    'expand.tag_ids': [
+      { type: 'array', required: true, message: '请选择关联标签' },
+      { type: 'array', maxLength: 3, message: '关联标签最多选中3个' },
+    ],
+    'lang': [
+      { type: 'string', required: true, message: '请选择语种' },
+      { type: 'array', maxLength: 2, message: '语种最多选中2个' },
+    ],
+    'speed': [{ type: 'string', required: true, message: '请选择语速' }],
+    'project_id': [{ type: 'number', min: 1, required: true, message: '请选择关联厂牌' }],
+  } as Record<string, FieldRule[]>;
+
+  const tagIds = computed({
+    get: () => get(formValue.value, 'expand.tag_ids', []),
+    set: (val) => set(formValue.value, 'expand.tag_ids', val),
+  });
+
+  const { activityLangOptions, activitySpeedOptions } = useSelectionStore();
+
+  const onTagExceedLimitError = (content: string, duration = 1000) => Message.warning({ content, duration });
+
+  defineExpose({
+    onValid: (callback?: () => void) => formRef.value?.validate((errors) => !errors && callback?.()),
+  });
+</script>
+
+<template>
+  <Form ref="formRef" :model="formValue" :rules="formRule" :auto-label-width="true" size="small">
+    <FormItem label="封面图片" field="cover" :show-colon="true">
+      <AvatarUpload v-model="formValue.cover" :size="100" shape="square" />
+    </FormItem>
+    <FormItem label="歌曲名称" field="song_name" :show-colon="true">
+      <Input v-model="formValue.song_name" :max-length="100" :show-word-limit="true" placeholder="请输入" />
+    </FormItem>
+    <FormItem label="曲风标签" field="expand.tag_ids" :show-colon="true">
+      <TagSelect v-model="tagIds" :multiple="true" :limit="3" placeholder="请选择" limit-error-msg="关联标签最多选中3个" />
+    </FormItem>
+    <FormItem label="歌曲语种" field="lang" :show-colon="true">
+      <Select
+        v-model="formValue.lang"
+        :options="activityLangOptions"
+        :limit="2"
+        :field-names="{ value: 'identifier', label: 'name' }"
+        :fallback-option="false"
+        :multiple="true"
+        placeholder="请选择"
+        @exceed-limit="onTagExceedLimitError('关联语种最多选中2个')"
+      />
+    </FormItem>
+    <FormItem label="歌曲速度" field="speed" :show-colon="true">
+      <Select
+        v-model="formValue.speed"
+        :options="activitySpeedOptions"
+        :field-names="{ value: 'identifier', label: 'name' }"
+        :fallback-option="false"
+        placeholder="请选择"
+      />
+    </FormItem>
+    <FormItem label="歌曲简介" field="sub_title" :show-colon="true">
+      <Input v-model.trim="formValue.sub_title" :max-length="20" :show-word-limit="true" placeholder="举例：影视OST歌曲，急寻歌手" />
+    </FormItem>
+    <FormItem label="关联厂牌" field="project_id" :show-colon="true">
+      <ProjectSelect v-model="formValue.project_id" :filtrate="filterProject" />
+    </FormItem>
+  </Form>
+</template>
+
+<style scoped lang="less"></style>

+<script setup lang="ts">
+  import { DatePicker, Form, FormItem, InputTag, Select } from '@arco-design/web-vue';
+  import UserSelect from '@/components/user-select/index.vue';
+
+  import { ref, computed } from 'vue';
+  import { FieldRule, FormInstance } from '@arco-design/web-vue/es/form';
+  import { useVModels } from '@vueuse/core';
+  import { useSelectionStore } from '@/store';
+  import { get, set } from 'lodash';
+  import { storeToRefs } from 'pinia';
+
+  const props = defineProps<{ loading?: boolean; modelValue?: any }>();
+  const emits = defineEmits(['update:modelValue', 'update:loading']);
+
+  const formRef = ref<FormInstance>();
+  const { modelValue: formValue } = useVModels(props, emits);
+
+  const { activitySexOptions } = storeToRefs(useSelectionStore());
+
+  const lyricistIds = computed({
+    get: () => get(formValue.value, 'expand.lyricist.ids', []),
+    set: (val) => set(formValue.value, 'expand.lyricist.ids', val),
+  });
+
+  const lyricistSupplement = computed({
+    get: () => get(formValue.value, 'expand.lyricist.supplement', []),
+    set: (val) => set(formValue.value, 'expand.lyricist.supplement', val),
+  });
+
+  const composerIds = computed({
+    get: () => get(formValue.value, 'expand.composer.ids', []),
+    set: (val) => set(formValue.value, 'expand.composer.ids', val),
+  });
+
+  const composerSupplement = computed({
+    get: () => get(formValue.value, 'expand.composer.supplement', []),
+    set: (val) => set(formValue.value, 'expand.composer.supplement', val),
+  });
+
+  const arrangerIds = computed({
+    get: () => get(formValue.value, 'expand.arranger.ids', []),
+    set: (val) => set(formValue.value, 'expand.arranger.ids', val),
+  });
+
+  const arrangerSupplement = computed({
+    get: () => get(formValue.value, 'expand.arranger.supplement', []),
+    set: (val) => set(formValue.value, 'expand.arranger.supplement', val),
+  });
+
+  const checkMaxUser = (value: any, cb: (error?: string) => void) => (value && value.length > 2 ? cb('最大选择2人') : {});
+
+  const checkNeedOne = (value: any, cb: (error?: string) => void, condition: boolean, message: string) => {
+    checkMaxUser(value, cb);
+    if (condition) {
+      cb(message);
+    }
+  };
+
+  const formRule = {
+    'sex': [{ required: true, message: '请选择性别要求' }],
+    'expand.lyricist.supplement': [
+      {
+        type: 'array',
+        validator: (value, cb) =>
+          checkNeedOne(
+            value,
+            cb,
+            lyricistIds.value.length === 0 && lyricistSupplement.value.length === 0,
+            '词作者(用户)或词作者(未注册)，必填一个'
+          ),
+      },
+    ],
+    'expand.composer.supplement': [
+      {
+        type: 'array',
+        validator: (value, cb) =>
+          checkNeedOne(
+            value,
+            cb,
+            composerIds.value.length === 0 && composerSupplement.value.length === 0,
+            '曲作者(用户)或曲作者(未注册)，必填一个'
+          ),
+      },
+    ],
+    'expand.arranger.supplement': [
+      {
+        type: 'array',
+        validator: (value, cb) =>
+          checkNeedOne(
+            value,
+            cb,
+            arrangerIds.value.length === 0 && arrangerSupplement.value.length === 0,
+            '编曲(用户)或编曲(未注册)，必填一个'
+          ),
+      },
+    ],
+    'estimate_release_at': [{ required: true, message: '请选择预计发布时间' }],
+  } as Record<string, FieldRule[]>;
+
+  defineExpose({
+    onValid: (callback?: () => void) => formRef.value?.validate((errors) => !errors && callback?.()),
+  });
+</script>
+
+<template>
+  <Form ref="formRef" :model="formValue" :rules="formRule" :auto-label-width="true" size="small">
+    <FormItem label="词作者(用户)" field="expand.lyricist.ids" :show-colon="true">
+      <UserSelect v-model="lyricistIds" placeholder="请选择用户" :multiple="true" :allow-search="true" :limit="2" />
+    </FormItem>
+    <FormItem label="词作者(未注册)" field="expand.lyricist.supplement" :show-colon="true">
+      <InputTag v-model="lyricistSupplement" placeholder="输入完成回车键分隔" :max-tag-count="2" :unique-value="true" />
+      <template #extra>
+        <div>注意：上方填1项即可，歌曲信息中【用户】可点击跳转用户主页，【未注册】仅显示；</div>
+      </template>
+    </FormItem>
+    <FormItem label="曲作者(用户)" field="expand.composer.ids" :show-colon="true">
+      <UserSelect v-model="composerIds" placeholder="请选择用户" :multiple="true" :allow-search="true" :limit="2" />
+    </FormItem>
+    <FormItem label="曲作者(未注册)" field="expand.composer.supplement" :show-colon="true">
+      <InputTag v-model="composerSupplement" placeholder="输入完成回车键分隔" :max-tag-count="2" :unique-value="true" />
+      <template #extra>
+        <div>注意：上方填1项即可，歌曲信息中【用户】可点击跳转用户主页，【未注册】仅显示；</div>
+      </template>
+    </FormItem>
+    <FormItem label="编曲(用户)" field="expand.arranger.ids" :show-colon="true">
+      <UserSelect v-model="arrangerIds" placeholder="请选择用户" :multiple="true" :allow-search="true" :limit="2" />
+    </FormItem>
+    <FormItem label="编曲(未注册)" field="expand.arranger.supplement" :show-colon="true">
+      <InputTag v-model="arrangerSupplement" placeholder="输入完成回车键分隔" :max-tag-count="2" :unique-value="true" />
+      <template #extra>
+        <div>注意：上方填1项即可，歌曲信息中【用户】可点击跳转用户主页，【未注册】仅显示；</div>
+      </template>
+    </FormItem>
+    <FormItem label="性别要求" field="sex" :show-colon="true">
+      <Select
+        v-model="formValue.sex"
+        :options="activitySexOptions"
+        :field-names="{ value: 'identifier', label: 'name' }"
+        :fallback-option="false"
+        placeholder="请选择"
+      />
+    </FormItem>
+    <FormItem label="预计发行日期" field="estimate_release_at" :show-colon="true">
+      <DatePicker
+        v-model="formValue.estimate_release_at"
+        placeholder="请选择"
+        style="width: 100%"
+        :show-now-btn="false"
+        :allow-clear="false"
+      />
+    </FormItem>
+  </Form>
+</template>
+
+<style scoped lang="less"></style>

+<script setup lang="ts">
+  import { ref, computed, createVNode } from 'vue';
+  import { FieldRule, FormInstance } from '@arco-design/web-vue/es/form';
+  import { useVModels } from '@vueuse/core';
+  import { Form, FormItem, Link, Textarea } from '@arco-design/web-vue';
+  import InputUpload from '@/components/input-upload/index.vue';
+  import { useSelectionStore } from '@/store';
+  import { first, get, last, set } from 'lodash';
+  import { bytesForHuman, getLyricTimeArr } from '@/utils';
+  import axios from 'axios';
+  import AudioPreview from '@/views/audition/activity-apply/components/audio-preview.vue';
+  import AudioPlayer from '@/components/audio-player/index.vue';
+  import { createModalVNode } from '@/utils/createVNode';
+  import { downloadFile } from '@/http/auth';
+
+  const props = defineProps<{ loading?: boolean; modelValue?: any }>();
+  const emits = defineEmits(['update:modelValue', 'update:loading']);
+
+  const formRef = ref<FormInstance>();
+  const { loading, modelValue: formValue } = useVModels(props, emits);
+
+  const guideSourceUrl = computed({
+    get: () => get(formValue.value, 'expand.guide_source.url', ''),
+    set: (val) => set(formValue.value, 'expand.guide_source.url', val),
+  });
+
+  const karaokeSourceUrl = computed({
+    get: () => get(formValue.value, 'expand.karaoke_source.url', ''),
+    set: (val) => set(formValue.value, 'expand.karaoke_source.url', val),
+  });
+
+  const trackSourceUrl = computed({
+    get: () => get(formValue.value, 'expand.track_source.url', ''),
+    set: (val) => set(formValue.value, 'expand.track_source.url', val),
+  });
+
+  const trackSourceName = computed(() => get(formValue.value, 'expand.track_source.name', ''));
+  const trackSourceSize = computed((): number => get(formValue.value, 'expand.track_source.size', 0));
+
+  const fullLyricTime = computed(() => getLyricTimeArr(formValue.value.lyric));
+  const clipLyricTime = computed(() => getLyricTimeArr(formValue.value.clip_lyric));
+  const checkClip = computed(
+    () => clipLyricTime.value.length !== 0 && fullLyricTime.value.toString().indexOf(clipLyricTime.value.toString()) !== -1
+  );
+
+  const onUpdateGuide = (file: { name: string; url: string; size: number }) => {
+    set(formValue.value, 'expand.guide_source', { name: file.name, url: file.url, size: file.size });
+  };
+
+  const onUpdateKaraoke = (file: { name: string; url: string; size: number }) => {
+    set(formValue.value, 'expand.karaoke_source', { name: file.name, url: file.url, size: file.size });
+  };
+
+  const onUpdateTrack = (file: { name: string; url: string; size: number }) => {
+    set(formValue.value, 'expand.track_source', { name: file.name, url: file.url, size: file.size });
+  };
+
+  const { activityAudioAccept, activityTrackAccept } = useSelectionStore();
+
+  const formRule = {
+    'expand.guide_source.url': [{ required: true, message: '请上传导唱文件' }],
+    'expand.karaoke_source.url': [{ required: true, message: '请上传伴奏文件' }],
+    'lyric': [
+      { type: 'string', required: true, message: '请填写歌词内容' },
+      {
+        type: 'string',
+        validator: (value: any, cb: (error?: string) => void) => (fullLyricTime.value.length === 0 ? cb('歌词文本格式不正确') : {}),
+      },
+    ],
+    'clip_lyric': [
+      { type: 'string', required: true, message: '请填写推荐歌词内容' },
+      { type: 'string', validator: (value: any, cb: (error?: string) => void) => (checkClip.value ? {} : cb('推荐片段不在歌词中')) },
+    ],
+  } as Record<string, FieldRule[]>;
+
+  const onDownload = (url: string, fileName: string) => downloadFile(url, `${formValue.value.song_name}(${fileName})`);
+
+  const onFormatLyric = (key: string) => {
+    formValue.value[key] = formValue.value[key]?.replace(/(\n[\s\t]*\r*\n)/g, '\n').replace(/^[\n\r\t]*|[\n\r\t]*$/g, '');
+  };
+
+  const guideFile = ref<File | undefined>();
+
+  const getGuideFile = async () => {
+    if (!guideFile.value) {
+      guideFile.value = await axios
+        .get(`${guideSourceUrl.value}`, { responseType: 'blob', timeout: 60000 })
+        .then(({ data }) => Promise.resolve(data));
+    }
+
+    return guideFile.value;
+  };
+
+  const onAudioPreview = async () => {
+    const src = await getGuideFile();
+    createModalVNode(() => createVNode(AudioPreview, { src, lyric: formValue.value.lyric }), {
+      title: '预览歌词-整首',
+      footer: false,
+      closable: true,
+    });
+  };
+
+  const onAudioClipPreview = async () => {
+    const src = await getGuideFile();
+    const startTime = first(clipLyricTime.value) as string;
+    const fullEndIndex = fullLyricTime.value.indexOf(last(clipLyricTime.value) as string);
+    const endTime = fullEndIndex === -1 ? undefined : fullLyricTime.value[fullEndIndex + 1] || undefined;
+
+    createModalVNode(() => createVNode(AudioPreview, { src, lyric: formValue.value.clip_lyric, startTime, endTime }), {
+      title: '预览歌词-片段',
+      footer: false,
+      closable: true,
+    });
+  };
+
+  defineExpose({
+    onValid: (callback?: () => void) => formRef.value?.validate((errors) => !errors && callback?.()),
+  });
+</script>
+
+<template>
+  <Form ref="formRef" :model="formValue" :rules="formRule" :auto-label-width="true" size="small">
+    <FormItem label="导唱文件(带伴奏)" field="expand.guide_source.url" :show-colon="true">
+      <InputUpload
+        v-model="guideSourceUrl"
+        :accept="activityAudioAccept"
+        :limit="100"
+        @success="onUpdateGuide"
+        @choose-file="(file:File) => (guideFile = file)"
+        @update:loading="(value:boolean) => (loading = value)"
+      />
+    </FormItem>
+    <FormItem v-if="guideSourceUrl">
+      <template #label>
+        <Link icon @click="onDownload(guideSourceUrl, '导唱文件')">下载导唱</Link>
+      </template>
+      <AudioPlayer name="导唱文件" :url="guideSourceUrl" />
+    </FormItem>
+    <FormItem label="伴奏文件" field="expand.karaoke_source.url" :show-colon="true">
+      <InputUpload
+        v-model="karaokeSourceUrl"
+        :accept="activityAudioAccept"
+        :limit="100"
+        @success="onUpdateKaraoke"
+        @update:loading="(value:boolean) => (loading = value)"
+      />
+    </FormItem>
+    <FormItem v-if="karaokeSourceUrl">
+      <template #label>
+        <Link icon @click="onDownload(karaokeSourceUrl, '伴奏文件')">下载伴奏</Link>
+      </template>
+      <AudioPlayer name="伴奏文件" :url="karaokeSourceUrl" />
+    </FormItem>
+    <FormItem label="分轨文件" :show-colon="true">
+      <InputUpload v-model="trackSourceUrl" :accept="activityTrackAccept" @success="onUpdateTrack" />
+    </FormItem>
+    <FormItem v-if="trackSourceUrl">
+      <template #label>
+        <Link icon @click="onDownload(karaokeSourceUrl, '分轨文件')">下载分轨文件</Link>
+      </template>
+      {{ trackSourceName }} {{ bytesForHuman(trackSourceSize) }}
+    </FormItem>
+    <FormItem class="lyric" label="歌词文本" field="lyric" :show-colon="true">
+      <Textarea
+        v-model="formValue.lyric"
+        :auto-size="{ minRows: 6, maxRows: 6 }"
+        placeholder="请粘贴带时间的lrc歌词文本至输入框"
+        @blur="() => onFormatLyric('lyric')"
+      />
+      <template #extra>
+        <Link :hoverable="false" :disabled="!guideSourceUrl || !formValue.lyric" @click="onAudioPreview()"> 预览歌词</Link>
+      </template>
+    </FormItem>
+    <FormItem class="lyric" label="片段歌词" field="clip_lyric" :show-colon="true">
+      <Textarea
+        v-model="formValue.clip_lyric"
+        :auto-size="{ minRows: 6, maxRows: 6 }"
+        placeholder="请粘贴带时间的lrc歌词文本至输入框"
+        @blur="() => onFormatLyric('clip_lyric')"
+      />
+      <template #extra>
+        <Link :hoverable="false" :disabled="!guideSourceUrl || !checkClip" @click="onAudioClipPreview()"> 预览歌词</Link>
+      </template>
+    </FormItem>
+  </Form>
+</template>
+
+<style scoped lang="less">
+  .lyric {
+    :deep(.arco-form-item-extra) {
+      width: 100%;
+      text-align: right;
+    }
+  }
+</style>

+<script setup lang="ts">
+  import { computed, createVNode, onMounted, ref } from 'vue';
+  import { AnyObject } from '@/types/global';
+  import useLoading from '@/hooks/loading';
+  import { useApplyApi } from '@/http/activity';
+  import { useAuthorizedStore, useSelectionStore } from '@/store';
+  import { createModalVNode } from '@/utils/createVNode';
+  import { Message, TableData, TabPane, Tabs } from '@arco-design/web-vue';
+  import { promiseToBoolean } from '@/utils';
+  import UserTableColumn from '@/components/filter/user-table-column.vue';
+  import EnumTableColumn from '@/components/filter/enum-table-column.vue';
+  import { tryOnMounted } from '@vueuse/core';
+  import SpaceTableColumn from '@/components/filter/space-table-column.vue';
+  import usePermission from '@/hooks/permission';
+  import DateTableColumn from '@/components/filter/date-table-column.vue';
+  import ActivityTableColumn from '@/components/filter/activity-table-column.vue';
+  import FormContent from '@/views/audition/activity-apply/components/form-content.vue';
+  import RecordTable from '@/views/audition/activity-audit/components/record-table.vue';
+
+  const { loading, setLoading } = useLoading(false);
+  const filter = ref<AnyObject>({});
+  const tableRef = ref();
+
+  const queryParams = computed(() => {
+    return {
+      ...filter.value,
+      createdForm: 1,
+      songType: 1,
+      setColumn: [
+        'id',
+        'song_name',
+        'cover',
+        'lang',
+        'speed',
+        'sub_title',
+        'sex',
+        'user_id',
+        'project_id',
+        'lyric',
+        'clip_lyric',
+        'expand',
+        'audit_status',
+        'created_at',
+        'estimate_release_at',
+      ],
+      setWith: [
+        'project:id,name',
+        'user:id,real_name,nick_name,role',
+        'tags:id,name',
+        'applyRecords:id,activity_id,current,audit_msg,created_at',
+      ],
+      setSort: ['-updated_at'],
+    };
+  });
+
+  const onQuery = async (params?: AnyObject) => {
+    setLoading(true);
+    return useApplyApi.get({ ...queryParams.value, ...params }).finally(() => setLoading(false));
+  };
+
+  const onSearch = () => tableRef.value?.onPageChange(1);
+
+  const onReset = () => {
+    filter.value = { songName: '', userName: '', projectName: '', tagName: '', auditStatus: '', createBetween: [] };
+    onSearch();
+  };
+
+  tryOnMounted(() => useSelectionStore().queryAll());
+
+  onMounted(() => {
+    onReset();
+    useAuthorizedStore().syncAuditActivity();
+  });
+
+  const onCreate = () => {
+    const dialog = createModalVNode(
+      () =>
+        createVNode(FormContent, {
+          onSubmit: (data: AnyObject) =>
+            useApplyApi.create(Object.assign(data, { song_type: 1 })).then(() => {
+              Message.success(`申请上架：${data.song_name}`);
+              tableRef.value?.onFetch();
+              dialog.close();
+            }),
+        }),
+      { title: '申请歌曲上架', footer: false, closable: true, width: 'auto' }
+    );
+  };
+
+  const onUpdate = (row: TableData) => {
+    const dialog = createModalVNode(
+      () =>
+        createVNode(Tabs, { type: 'rounded', size: 'mini' }, [
+          createVNode(TabPane, { title: '试唱歌曲上架', key: 'applyRef' }, () =>
+            createVNode(FormContent, {
+              initValue: row,
+              onSubmit: (data: AnyObject) =>
+                useApplyApi.update(row.id, Object.assign(data, { song_type: 1 })).then(() => {
+                  Message.success(`重新申请上架活动：${row.song_name}`);
+                  tableRef.value?.onFetch();
+                  useAuthorizedStore().syncAuditActivity();
+                  dialog.close();
+                }),
+            })
+          ),
+          createVNode(TabPane, { title: `审核驳回记录（${row.apply_records?.length || 0}）`, key: 'record' }, () =>
+            createVNode(RecordTable, { row })
+          ),
+        ]),
+      { title: '编辑歌曲', footer: false, closable: true, width: '860px' }
+    );
+  };
+
+  const onDelete = (row: TableData) =>
+    createModalVNode(`确认要将活动：${row.song_name} 删除吗？`, {
+      title: '删除操作',
+      onBeforeOk: () => promiseToBoolean(useApplyApi.destroy(row.id)),
+      onOk: () => tableRef.value?.onFetch(),
+    });
+</script>
+
+<template>
+  <page-view has-bread has-card>
+    <filter-search :model="filter" :loading="loading" @search="onSearch" @reset="onReset">
+      <filter-search-item field="song_name" label="歌曲名称">
+        <a-input v-model="filter.songName" :allow-clear="true" placeholder="请输入" />
+      </filter-search-item>
+      <filter-search-item field="projectName" label="厂牌名称">
+        <a-input v-model="filter.projectName" :allow-clear="true" placeholder="请输入" />
+      </filter-search-item>
+      <filter-search-item field="tagName" label="标签名称">
+        <a-input v-model="filter.tagName" :allow-clear="true" placeholder="请输入" />
+      </filter-search-item>
+      <filter-search-item field="userName" label="创建人">
+        <a-input v-model="filter.userName" :allow-clear="true" placeholder="请输入" />
+      </filter-search-item>
+      <filter-search-item field="createBetween" label="创建时间">
+        <a-range-picker v-model="filter.createBetween" :allow-clear="true" />
+      </filter-search-item>
+      <filter-search-item field="audit_status" label="状态">
+        <a-select v-model="filter.auditStatus" :options="useApplyApi.statusOption" placeholder="请选择" />
+      </filter-search-item>
+    </filter-search>
+    <filter-table ref="tableRef" :loading="loading" :on-query="onQuery">
+      <template #tool>
+        <a-button v-permission="['audition-activity-apply-create']" type="primary" @click="onCreate">试唱歌曲上架</a-button>
+      </template>
+      <activity-table-column :width="480" data-index="id" title="试唱歌曲" />
+      <user-table-column :width="160" data-index="user_id" user="user" title="创建人" show-href />
+      <date-table-column data-index="created_at" title="创建时间" :width="100" split />
+      <enum-table-column :width="100" data-index="audit_status" title="状态" :option="useApplyApi.statusOption" />
+      <space-table-column
+        v-if="usePermission().checkPermission(['audition-activity-apply-edit', 'audition-activity-apply-delete'])"
+        :width="80"
+        data-index="operations"
+        direction="vertical"
+        title="操作"
+      >
+        <template #default="{ record }">
+          <span v-if="record.audit_status === 0" style="color: rgba(44, 44, 44, 0.5)">无</span>
+          <a-link
+            v-if="record.audit_status === 2"
+            v-permission="['audition-activity-apply-edit']"
+            :hoverable="false"
+            class="link-hover"
+            @click="onUpdate(record)"
+          >
+            编辑
+          </a-link>
+          <a-link
+            v-if="record.audit_status === 2"
+            v-permission="['audition-activity-apply-delete']"
+            :hoverable="false"
+            class="link-hover"
+            @click="onDelete(record)"
+          >
+            删除
+          </a-link>
+        </template>
+      </space-table-column>
+    </filter-table>
+  </page-view>
+</template>
+
+<style scoped lang="less"></style>

+<template>
+  <Layout>
+    <Layout has-sider>
+      <LayoutSider :width="120" class="aside">
+        <Steps :current="currentStep" direction="vertical" :small="true">
+          <template v-for="item in stepItems">
+            <Step v-if="item.value <= maxStep" :key="item.value">{{ item.label }}</Step>
+          </template>
+        </Steps>
+      </LayoutSider>
+      <LayoutContent class="main">
+        <component
+          :is="currentContent"
+          ref="formRef"
+          v-model="formValue"
+          :loading="loading"
+          :disabled="disabled"
+          :hide-field="hideField"
+          :current-attribute="currentAttribute"
+          :last-attribute="lastAttribute"
+          :filter-project="filterProject"
+        />
+      </LayoutContent>
+    </Layout>
+    <LayoutFooter>
+      <Divider style="margin-top: 8px; margin-bottom: 20px" />
+      <Link :href="useSelectionStore().lyricTool" :hoverable="false" class="link-hover" icon>歌词制作工具</Link>
+      <Space style="float: right">
+        <IconButton v-show="currentStep !== 1" size="small" icon="left" label="上一步" @click="onPrev" />
+        <IconButton
+          v-if="!isAudit || (isAudit && currentStep !== maxStep)"
+          size="small"
+          icon="right"
+          icon-align="right"
+          :loading="loading"
+          :label="nextBtnLabel"
+          @click="onNext"
+        />
+
+        <template v-if="isAudit && currentStep === maxStep">
+          <IconButton size="small" type="primary" status="danger" icon="close" label="拒绝" :loading="loading" @click="onFail" />
+          <IconButton size="small" type="primary" status="success" icon="check" label="确认" :loading="loading" @click="onSuccess" />
+        </template>
+      </Space>
+    </LayoutFooter>
+  </Layout>
+</template>
+
+<script setup lang="ts">
+  import { Layout, LayoutSider, LayoutContent, LayoutFooter, Step, Steps, Space, Divider, Link } from '@arco-design/web-vue';
+  import { computed, createVNode, markRaw, ref } from 'vue';
+  import Step1FormContent from '@/views/audition/activity-audit/components/step1-form-content.vue';
+  import Step2FormContent from '@/views/audition/activity-audit/components/step2-form-content.vue';
+  import Step3FormContent from '@/views/audition/activity-audit/components/step3-form-content.vue';
+  import Step4FormContent from '@/views/audition/activity-audit/components/step4-form-content.vue';
+  import IconButton from '@/components/icon-button/index.vue';
+
+  import { useSelectionStore } from '@/store';
+
+  import { AnyObject } from '@/types/global';
+  import useLoading from '@/hooks/loading';
+  import { cloneDeep } from 'lodash';
+  import { createFormItemVNode, createInputVNode, createModalVNode } from '@/utils/createVNode';
+
+  const props = withDefaults(
+    defineProps<{
+      initValue?: AnyObject;
+      currentAttribute?: AnyObject;
+      lastAttribute?: AnyObject;
+      filterProject?: (value: unknown) => boolean;
+      maxStep?: number;
+      isAudit?: boolean;
+      disabled?: boolean;
+      submitText?: string;
+      submit: (data: AnyObject) => Promise<any>;
+      hideField?: string[];
+    }>(),
+    { maxStep: 4, isAudit: false, submitText: '提交' }
+  );
+
+  const { loading, setLoading } = useLoading(false);
+
+  const formRef = ref();
+  const formValue = ref({ ...cloneDeep(props.initValue) });
+
+  const stepItems = [
+    { value: 1, label: '基本信息', template: markRaw(Step1FormContent) },
+    { value: 2, label: '补充信息', template: markRaw(Step2FormContent) },
+    { value: 3, label: '上传文件', template: markRaw(Step3FormContent) },
+    { value: 4, label: '推送配置', template: markRaw(Step4FormContent) },
+  ];
+
+  const currentStep = ref(1);
+  const currentContent = computed(() => stepItems.find((item) => item.value === currentStep.value)?.template);
+  const nextBtnLabel = computed(() => (currentStep.value === props.maxStep ? props.submitText : '下一步'));
+
+  const onPrev = (): void => {
+    currentStep.value = Math.max(1, currentStep.value - 1);
+  };
+
+  const onNext = () => {
+    formRef.value.onValid(async () => {
+      if (currentStep.value === props.maxStep) {
+        setLoading(true);
+        props.submit(formValue.value).finally(() => setLoading(false));
+      }
+      currentStep.value = Math.min(props.maxStep, currentStep.value + 1);
+    });
+  };
+
+  const onFail = () => {
+    const formValue = ref<string>('');
+    const modelProp = { title: '审核不通过', footer: false, closable: true };
+    const buttonProp = { size: 'small', icon: 'message', type: 'primary', label: '提交', style: { marginLeft: '5px' } };
+
+    const dialog = createModalVNode(
+      () =>
+        createFormItemVNode({ hideLabel: true, rowClass: 'mb-0' }, [
+          createInputVNode(formValue, { size: 'small', maxLength: 100, showWordLimit: true, placeholder: '请输入拒绝理由' }),
+          createVNode(IconButton, {
+            ...buttonProp,
+            loading: loading.value,
+            disabled: formValue.value.length === 0,
+            onClick: () => {
+              setLoading(true);
+              props
+                .submit({ audit_status: 2, msg: formValue.value })
+                .then(() => dialog.close())
+                .finally(() => setLoading(false));
+            },
+          }),
+        ]),
+      modelProp
+    );
+  };
+
+  const onSuccess = () => {
+    setLoading(true);
+    props.submit({ ...formValue.value, audit_status: 1 }).finally(() => setLoading(false));
+  };
+</script>
+
+<style scoped lang="less">
+  .aside {
+    box-shadow: unset !important;
+    border-right: 1px solid var(--color-border);
+    margin-right: 20px;
+    background-color: transparent;
+  }
+
+  .main {
+    min-width: 640px;
+  }
+</style>

+<script setup lang="ts">
+  import { Tabs, TabPane } from '@arco-design/web-vue';
+  import RecordTable from '@/views/audition/activity-audit/components/record-table.vue';
+  import FormContent from '@/views/audition/activity-audit/components/form-content.vue';
+  import { ActivityApply, ActivityApplyForm } from '@/types/activity-apply';
+  import { Activity } from '@/types/activity';
+  import { AnyObject } from '@/types/global';
+
+  withDefaults(
+    defineProps<{
+      activeKey: string;
+      row: ActivityApply;
+      submitText?: string;
+      type?: 'view' | 'audit';
+      disabled?: boolean;
+      currentAttribute?: ActivityApplyForm;
+      lastAttribute?: ActivityApplyForm;
+      submit: (value: AnyObject) => Promise<any>;
+    }>(),
+    {
+      type: 'audit',
+    }
+  );
+</script>
+
+<template>
+  <Tabs :default-active-key="activeKey || 'audit'" type="rounded" size="mini" style="width: 800px">
+    <TabPane key="audit" title="试唱上架审核">
+      <FormContent
+        :init-value="row"
+        :current-attribute="currentAttribute"
+        :last-attribute="lastAttribute"
+        :submit-text="submitText"
+        :is-audit="type === 'audit'"
+        :disabled="type === 'view'"
+        :submit="submit"
+      />
+    </TabPane>
+    <TabPane key="record" :title="`审核驳回记录(${row.record_count})`">
+      <RecordTable :row="row as Activity" />
+    </TabPane>
+  </Tabs>
+</template>
+
+<style scoped lang="less"></style>

+<script setup lang="ts">
+  import { CheckboxGroup, Col, Row, Select } from '@arco-design/web-vue';
+  import { useSelectionStore } from '@/store';
+  import { computed } from 'vue';
+  import { findIndex, fromPairs } from 'lodash';
+
+  type ManageValue = { user_id: number; permission: string[] };
+
+  const props = withDefaults(defineProps<{ modelValue?: ManageValue[] }>(), { modelValue: () => [] });
+  const emits = defineEmits<{ (e: 'update:modelValue', value: ManageValue[]): void }>();
+
+  const { getUserOptions } = useSelectionStore();
+
+  const permissionOption = [
+    { label: '查看报价', value: 'price' },
+    { label: '回复结果', value: 'audit' },
+  ];
+
+  const formValue = computed({
+    get: () => props.modelValue as ManageValue[],
+    set: (val: ManageValue[]) => emits('update:modelValue', val),
+  });
+
+  const selectPermission = computed(() => {
+    return fromPairs(props.modelValue?.map((item) => [item.user_id, item.permission]));
+  });
+
+  const selectIds = computed({
+    get: () => props.modelValue?.map((item) => item.user_id) as number[],
+    set: (val: number[]) => {
+      emits(
+        'update:modelValue',
+        val.map((item) => {
+          const permission = selectPermission.value[item] || [];
+          if (!permission.includes('view')) {
+            permission.unshift('view');
+          }
+
+          return { user_id: item, permission };
+        })
+      );
+    },
+  });
+
+  const onClick = (e: Event, key: number) => {
+    if (!selectIds.value.includes(key)) {
+      selectIds.value = [...selectIds.value, key];
+    }
+    e.stopPropagation();
+  };
+
+  const onUpdatePermission = (key: number, val: string[]) => {
+    const index = findIndex(formValue.value, { user_id: key });
+    formValue.value?.splice(index, 1, { user_id: key, permission: val });
+  };
+</script>
+
+<template>
+  <Select
+    v-model="selectIds"
+    :options="getUserOptions"
+    :virtual-list-props="{ height: 240, fixedSize: true, buffer: 60 }"
+    :field-names="{ value: 'id', label: 'nick_name' }"
+    placeholder="请选择用户"
+    :fallback-option="false"
+    :multiple="true"
+  >
+    <template #option="{ data }">
+      <Row :wrap="false" :gutter="16" :justify="'space-between'">
+        <Col flex="auto">{{ data.nick_name }}</Col>
+        <Col flex="200px" @click="(e: Event) => onClick(e,data.id)">
+          <CheckboxGroup
+            class="p-checkbox"
+            :model-value="selectPermission[data.id]"
+            :options="permissionOption"
+            @update:model-value="(value:string[]) => onUpdatePermission(data.id, value)"
+          />
+        </Col>
+      </Row>
+    </template>
+  </Select>
+</template>
+
+<style scoped lang="less"></style>

+<template>
+  <FilterTable ref="tableRef" :loading="loading" :scroll="{ y: 540 }" :on-query="onQuery" :page-size="10">
+    <FilterTableColumn data-index="id" title="序号" :width="60">
+      <template #default="{ index }">{{ getIndexNumber(index) }}</template>
+    </FilterTableColumn>
+    <FilterTableColumn data-index="audit_user_id" title="操作人" :width="160">
+      <template #default="{ record }">
+        <template v-if="record.audit_user">
+          {{ `${record.audit_user.nick_name}(${record.audit_user.real_name})` }}
+        </template>
+      </template>
+    </FilterTableColumn>
+    <DateTableColumn data-index="updated_at" title="操作时间" :width="180" :split="false" />
+    <FilterTableColumn data-index="audit_msg" title="驳回说明" :width="400" />
+  </FilterTable>
+</template>
+
+<script lang="ts" setup>
+  import useLoading from '@/hooks/loading';
+  import { computed, onMounted, ref } from 'vue';
+  import { Activity } from '@/types/activity';
+  import { AnyObject } from '@/types/global';
+  import { useApplyApi } from '@/http/activity';
+  import FilterTable from '@/components/filter/table.vue';
+  import FilterTableColumn from '@/components/filter/table-column.vue';
+  import DateTableColumn from '@/components/filter/date-table-column.vue';
+
+  const { loading, setLoading } = useLoading(false);
+
+  const props = defineProps<{ row: Activity }>();
+  const tableRef = ref();
+
+  const onQuery = async (params: AnyObject) => {
+    setLoading(true);
+    return useApplyApi
+      .record(props.row.id, {
+        ...params,
+        setWith: ['auditUser:id,nick_name,real_name,role'],
+        setSort: ['-id'],
+      })
+      .finally(() => setLoading(false));
+  };
+
+  defineExpose({ total: computed(() => tableRef.value?.getCount()) });
+
+  const getIndexNumber = (rowIndex: number) => {
+    const pagination = tableRef.value?.getPagination();
+    return pagination.total - (pagination.current - 1) * pagination.pageSize - rowIndex;
+  };
+
+  // eslint-disable-next-line no-return-await
+  onMounted(() => tableRef.value?.onPageChange(1));
+</script>
+
+<style scoped></style>

+<script setup lang="ts">
+  import { Form, FormItem, Input, Message, Select } from '@arco-design/web-vue';
+  import { computed, ref } from 'vue';
+  import AvatarUpload from '@/components/avatar-upload/index.vue';
+  import TagSelect from '@/components/tag-select/index.vue';
+  import ProjectSelect from '@/components/project-select/index.vue';
+  import { FieldRule, FormInstance } from '@arco-design/web-vue/es/form';
+  import { useSelectionStore } from '@/store';
+  import { get, set } from 'lodash';
+  import { useVModels } from '@vueuse/core';
+  import useActivityApi from '@/http/activity';
+  import { isEqual, isEqualArray } from '@arco-design/web-vue/es/_utils/is-equal';
+  import { IconFile } from '@arco-design/web-vue/es/icon';
+
+  const props = withDefaults(
+    defineProps<{
+      loading?: boolean;
+      modelValue?: any;
+      currentAttribute?: any;
+      lastAttribute?: any;
+      hideField?: string[];
+      filterProject?: (value: any) => boolean;
+    }>(),
+    {
+      filterProject: () => true,
+    }
+  );
+
+  const emits = defineEmits(['update:modelValue', 'update:loading']);
+
+  const formRef = ref<FormInstance>();
+  const { modelValue: formValue } = useVModels(props, emits);
+
+  const formRule = {
+    'cover': [{ type: 'string', required: true, message: '请上传活动封面' }],
+    'song_name': [{ type: 'string', required: true, message: '请输入歌曲名称' }],
+    'sub_title': [{ type: 'string', required: true, message: '请输入简介' }],
+    'expand.tag_ids': [
+      { type: 'array', required: true, message: '请选择关联标签' },
+      { type: 'array', maxLength: 3, message: '关联标签最多选中3个' },
+    ],
+    'lang': [
+      { type: 'string', required: true, message: '请选择语种' },
+      { type: 'array', maxLength: 2, message: '语种最多选中2个' },
+    ],
+    'speed': [{ type: 'string', required: true, message: '请选择语速' }],
+    'project_id': [{ type: 'number', min: 1, required: true, message: '请选择关联厂牌' }],
+    'weight': [{ type: 'string', required: true, message: '请选择权重' }],
+  } as Record<string, FieldRule[]>;
+
+  const tagIds = computed({
+    get: () => get(formValue.value, 'expand.tag_ids', []),
+    set: (val) => set(formValue.value, 'expand.tag_ids', val),
+  });
+
+  const { activityLangOptions, activitySpeedOptions } = useSelectionStore();
+
+  const onTagExceedLimitError = (content: string, duration = 1000) => Message.warning({ content, duration });
+
+  defineExpose({
+    onValid: (callback?: () => void) => formRef.value?.validate((errors) => !errors && callback?.()),
+  });
+</script>
+
+<template>
+  <Form ref="formRef" :model="formValue" :rules="formRule" :auto-label-width="true" size="small">
+    <FormItem label="封面图片" field="cover" :show-colon="true">
+      <AvatarUpload v-model="formValue.cover" :size="100" shape="square" />
+      <span v-if="currentAttribute && lastAttribute" style="width: 20px; margin-left: 10px">
+        <IconFile v-show="!isEqual(currentAttribute.cover, lastAttribute.cover)" />
+      </span>
+    </FormItem>
+    <FormItem label="歌曲名称" field="song_name" :show-colon="true">
+      <Input v-model="formValue.song_name" :max-length="100" :show-word-limit="true" placeholder="请输入" />
+      <span v-if="currentAttribute && lastAttribute" style="width: 20px; margin-left: 10px">
+        <IconFile v-show="!isEqual(currentAttribute.song_name, lastAttribute.song_name)" />
+      </span>
+    </FormItem>
+    <FormItem label="曲风标签" field="expand.tag_ids" :show-colon="true">
+      <TagSelect v-model="tagIds" :multiple="true" :limit="3" placeholder="请选择" limit-error-msg="关联标签最多选中3个" />
+      <span v-if="currentAttribute && lastAttribute" style="width: 20px; margin-left: 10px">
+        <IconFile v-show="!isEqualArray(currentAttribute.expand?.tag_ids, lastAttribute.expand?.tag_ids)" />
+      </span>
+    </FormItem>
+    <FormItem label="歌曲语种" field="lang" :show-colon="true">
+      <Select
+        v-model="formValue.lang"
+        :options="activityLangOptions"
+        :limit="2"
+        :field-names="{ value: 'identifier', label: 'name' }"
+        :fallback-option="false"
+        :multiple="true"
+        placeholder="请选择"
+        @exceed-limit="onTagExceedLimitError('关联语种最多选中2个')"
+      />
+      <span v-if="currentAttribute && lastAttribute" style="width: 20px; margin-left: 10px">
+        <IconFile v-show="!isEqualArray(currentAttribute.lang as [], lastAttribute.lang as [])" />
+      </span>
+    </FormItem>
+    <FormItem label="歌曲速度" field="speed" :show-colon="true">
+      <Select
+        v-model="formValue.speed"
+        :options="activitySpeedOptions"
+        :field-names="{ value: 'identifier', label: 'name' }"
+        :fallback-option="false"
+        placeholder="请选择"
+      />
+      <span v-if="currentAttribute && lastAttribute" style="width: 20px; margin-left: 10px">
+        <IconFile v-show="!isEqual(currentAttribute.speed, lastAttribute.speed)" />
+      </span>
+    </FormItem>
+    <FormItem label="歌曲简介" field="sub_title" :show-colon="true">
+      <Input v-model.trim="formValue.sub_title" :max-length="20" :show-word-limit="true" placeholder="举例：影视OST歌曲，急寻歌手" />
+      <span v-if="currentAttribute && lastAttribute" style="width: 20px; margin-left: 10px">
+        <IconFile v-show="!isEqual(currentAttribute.sub_title, lastAttribute.sub_title)" />
+      </span>
+    </FormItem>
+    <FormItem v-if="!hideField?.includes('project_id')" label="关联厂牌" field="project_id" :show-colon="true">
+      <ProjectSelect v-model="formValue.project_id" :filtrate="filterProject" />
+      <span v-if="currentAttribute && lastAttribute" style="width: 20px; margin-left: 10px">
+        <IconFile v-show="!isEqual(currentAttribute.project_id, lastAttribute.project_id)" />
+      </span>
+    </FormItem>
+    <FormItem label="推荐权重" field="weight" :show-colon="true">
+      <Select v-model="formValue.weight" :options="useActivityApi.weightOption" placeholder="请选择" />
+      <span v-if="currentAttribute && lastAttribute" style="width: 20px; margin-left: 10px">
+        <IconFile v-show="!isEqual(currentAttribute.weight, lastAttribute.weight)" />
+      </span>
+    </FormItem>
+  </Form>
+</template>
+
+<style scoped lang="less"></style>

+<script setup lang="ts">
+  import { DatePicker, Form, FormItem, InputTag, Select } from '@arco-design/web-vue';
+  import UserSelect from '@/components/user-select/index.vue';
+  import OutManageSelect from '@/views/audition/activity-audit/components/out-manage-select.vue';
+
+  import { ref, computed } from 'vue';
+  import { FieldRule, FormInstance } from '@arco-design/web-vue/es/form';
+  import { useVModels } from '@vueuse/core';
+  import { useSelectionStore } from '@/store';
+  import { get, set } from 'lodash';
+  import { storeToRefs } from 'pinia';
+  import { isEqual, isEqualArray } from '@arco-design/web-vue/es/_utils/is-equal';
+  import { IconFile } from '@arco-design/web-vue/es/icon';
+
+  const props = defineProps<{ loading?: boolean; modelValue?: any; currentAttribute?: any; lastAttribute?: any }>();
+  const emits = defineEmits(['update:modelValue', 'update:loading']);
+
+  const formRef = ref<FormInstance>();
+  const { modelValue: formValue } = useVModels(props, emits);
+
+  const { activitySexOptions, activityMarkOptions } = storeToRefs(useSelectionStore());
+
+  const booleanOptions = [
+    { label: '否', value: 0 },
+    { label: '是', value: 1 },
+  ];
+
+  const lyricistIds = computed({
+    get: () => get(formValue.value, 'expand.lyricist.ids', []),
+    set: (val) => set(formValue.value, 'expand.lyricist.ids', val),
+  });
+
+  const lyricistSupplement = computed({
+    get: () => get(formValue.value, 'expand.lyricist.supplement', []),
+    set: (val) => set(formValue.value, 'expand.lyricist.supplement', val),
+  });
+
+  const composerIds = computed({
+    get: () => get(formValue.value, 'expand.composer.ids', []),
+    set: (val) => set(formValue.value, 'expand.composer.ids', val),
+  });
+
+  const composerSupplement = computed({
+    get: () => get(formValue.value, 'expand.composer.supplement', []),
+    set: (val) => set(formValue.value, 'expand.composer.supplement', val),
+  });
+
+  const arrangerIds = computed({
+    get: () => get(formValue.value, 'expand.arranger.ids', []),
+    set: (val) => set(formValue.value, 'expand.arranger.ids', val),
+  });
+
+  const arrangerSupplement = computed({
+    get: () => get(formValue.value, 'expand.arranger.supplement', []),
+    set: (val) => set(formValue.value, 'expand.arranger.supplement', val),
+  });
+
+  const checkMaxUser = (value: any, cb: (error?: string) => void) => (value && value.length > 2 ? cb('最大选择2人') : {});
+
+  const checkNeedOne = (value: any, cb: (error?: string) => void, condition: boolean, message: string) => {
+    checkMaxUser(value, cb);
+    if (condition) {
+      cb(message);
+    }
+  };
+
+  const formRule = {
+    'sex': [{ required: true, message: '请选择性别要求' }],
+    'expand.lyricist.supplement': [
+      {
+        type: 'array',
+        validator: (value, cb) =>
+          checkNeedOne(
+            value,
+            cb,
+            lyricistIds.value.length === 0 && lyricistSupplement.value.length === 0,
+            '词作者(用户)或词作者(未注册)，必填一个'
+          ),
+      },
+    ],
+    'expand.composer.supplement': [
+      {
+        type: 'array',
+        validator: (value, cb) =>
+          checkNeedOne(
+            value,
+            cb,
+            composerIds.value.length === 0 && composerSupplement.value.length === 0,
+            '曲作者(用户)或曲作者(未注册)，必填一个'
+          ),
+      },
+    ],
+    'expand.arranger.supplement': [
+      {
+        type: 'array',
+        validator: (value, cb) =>
+          checkNeedOne(
+            value,
+            cb,
+            arrangerIds.value.length === 0 && arrangerSupplement.value.length === 0,
+            '编曲(用户)或编曲(未注册)，必填一个'
+          ),
+      },
+    ],
+    'is_official': [{ required: true, message: '请选择是否有奖励标识' }],
+    'estimate_release_at': [{ required: true, message: '请选择预计发布时间' }],
+  } as Record<string, FieldRule[]>;
+
+  defineExpose({
+    onValid: (callback?: () => void) => formRef.value?.validate((errors) => !errors && callback?.()),
+  });
+</script>
+
+<template>
+  <Form ref="formRef" :model="formValue" :rules="formRule" :auto-label-width="true" size="small">
+    <FormItem label="词作者(用户)" field="expand.lyricist.ids" :show-colon="true">
+      <UserSelect v-model="lyricistIds" placeholder="请选择用户" :multiple="true" :allow-search="true" :limit="2" />
+      <span v-if="currentAttribute && lastAttribute" style="width: 20px; margin-left: 10px">
+        <IconFile v-show="!isEqualArray(currentAttribute.expand?.lyricist?.ids, lastAttribute.expand?.lyricist?.ids)" />
+      </span>
+    </FormItem>
+    <FormItem label="词作者(未注册)" field="expand.lyricist.supplement" :show-colon="true">
+      <InputTag v-model="lyricistSupplement" placeholder="输入完成回车键分隔" :max-tag-count="2" :unique-value="true" />
+      <span v-if="currentAttribute && lastAttribute" style="width: 20px; margin-left: 10px">
+        <IconFile v-show="!isEqualArray(currentAttribute.expand?.lyricist?.supplement, lastAttribute.expand?.lyricist?.supplement)" />
+      </span>
+      <template #extra>
+        <div>注意：上方填1项即可，歌曲信息中【用户】可点击跳转用户主页，【未注册】仅显示；</div>
+      </template>
+    </FormItem>
+    <FormItem label="曲作者(用户)" field="expand.composer.ids" :show-colon="true">
+      <UserSelect v-model="composerIds" placeholder="请选择用户" :multiple="true" :allow-search="true" :limit="2" />
+      <span v-if="currentAttribute && lastAttribute" style="width: 20px; margin-left: 10px">
+        <IconFile v-show="!isEqualArray(currentAttribute.expand?.composer?.ids, lastAttribute.expand?.composer?.ids)" />
+      </span>
+    </FormItem>
+    <FormItem label="曲作者(未注册)" field="expand.composer.supplement" :show-colon="true">
+      <InputTag v-model="composerSupplement" placeholder="输入完成回车键分隔" :max-tag-count="2" :unique-value="true" />
+      <span v-if="currentAttribute && lastAttribute" style="width: 20px; margin-left: 10px">
+        <IconFile v-show="!isEqualArray(currentAttribute.expand?.composer?.supplement, lastAttribute.expand?.composer?.supplement)" />
+      </span>
+      <template #extra>
+        <div>注意：上方填1项即可，歌曲信息中【用户】可点击跳转用户主页，【未注册】仅显示；</div>
+      </template>
+    </FormItem>
+    <FormItem label="编曲(用户)" field="expand.arranger.ids" :show-colon="true">
+      <UserSelect v-model="arrangerIds" placeholder="请选择用户" :multiple="true" :allow-search="true" :limit="2" />
+      <span v-if="currentAttribute && lastAttribute" style="width: 20px; margin-left: 10px">
+        <IconFile v-show="!isEqualArray(currentAttribute.expand?.arranger?.ids, lastAttribute.expand?.arranger?.ids)" />
+      </span>
+    </FormItem>
+    <FormItem label="编曲(未注册)" field="expand.arranger.supplement" :show-colon="true">
+      <InputTag v-model="arrangerSupplement" placeholder="输入完成回车键分隔" :max-tag-count="2" :unique-value="true" />
+      <span v-if="currentAttribute && lastAttribute" style="width: 20px; margin-left: 10px">
+        <IconFile v-show="!isEqualArray(currentAttribute.expand?.arranger?.supplement, lastAttribute.expand?.arranger?.supplement)" />
+      </span>
+      <template #extra>
+        <div>注意：上方填1项即可，歌曲信息中【用户】可点击跳转用户主页，【未注册】仅显示；</div>
+      </template>
+    </FormItem>
+    <FormItem label="奖励标识" field="is_official" :show-colon="true">
+      <Select v-model="formValue.is_official" :options="booleanOptions" placeholder="请选择" />
+      <span v-if="currentAttribute && lastAttribute" style="width: 20px; margin-left: 10px">
+        <IconFile v-show="!isEqual(currentAttribute.is_official, lastAttribute.is_official)" />
+      </span>
+    </FormItem>
+    <FormItem label="推荐角标" field="mark" :show-colon="true">
+      <Select
+        v-model="formValue.mark"
+        :options="activityMarkOptions"
+        :field-names="{ value: 'identifier', label: 'name' }"
+        :allow-clear="true"
+        placeholder="请选择"
+      />
+      <span v-if="currentAttribute && lastAttribute" style="width: 20px; margin-left: 10px">
+        <IconFile v-show="!isEqual(currentAttribute.mark, lastAttribute.mark)" />
+      </span>
+    </FormItem>
+    <FormItem label="性别要求" field="sex" :show-colon="true">
+      <Select
+        v-model="formValue.sex"
+        :options="activitySexOptions"
+        :field-names="{ value: 'identifier', label: 'name' }"
+        :fallback-option="false"
+        placeholder="请选择"
+      />
+      <span v-if="currentAttribute && lastAttribute" style="width: 20px; margin-left: 10px">
+        <IconFile v-show="!isEqual(currentAttribute.sex, lastAttribute.sex)" />
+      </span>
+    </FormItem>
+    <FormItem label="预计发行日期" field="estimate_release_at" :show-colon="true">
+      <DatePicker
+        v-model="formValue.estimate_release_at"
+        placeholder="请选择"
+        style="width: 100%"
+        :show-now-btn="false"
+        :allow-clear="false"
+      />
+      <span v-if="currentAttribute && lastAttribute" style="width: 20px; margin-left: 10px">
+        <IconFile v-show="!isEqual(currentAttribute.estimate_release_at, lastAttribute.estimate_release_at)" />
+      </span>
+    </FormItem>
+    <FormItem label="外部管理员" :show-colon="true">
+      <OutManageSelect v-model="formValue.out_side_manages" />
+      <span v-if="currentAttribute && lastAttribute" style="width: 20px; margin-left: 10px"> </span>
+    </FormItem>
+  </Form>
+</template>
+
+<style lang="less">
+  .arco-checkbox.arco-select-option-checkbox {
+    width: 100%;
+
+    .arco-checkbox-label {
+      width: 100%;
+    }
+  }
+</style>

+<script setup lang="ts">
+  import { ref, computed, createVNode } from 'vue';
+  import { FieldRule, FormInstance } from '@arco-design/web-vue/es/form';
+  import { useVModels } from '@vueuse/core';
+  import { Form, FormItem, Link, Textarea } from '@arco-design/web-vue';
+  import InputUpload from '@/components/input-upload/index.vue';
+  import { useSelectionStore } from '@/store';
+  import { first, get, last, set } from 'lodash';
+  import { bytesForHuman, getLyricTimeArr } from '@/utils';
+  import axios from 'axios';
+  import AudioPreview from '@/views/audition/activity-apply/components/audio-preview.vue';
+  import AudioPlayer from '@/components/audio-player/index.vue';
+  import { createModalVNode } from '@/utils/createVNode';
+  import { downloadFile } from '@/http/auth';
+  import { isEqual } from '@arco-design/web-vue/es/_utils/is-equal';
+  import { IconFile } from '@arco-design/web-vue/es/icon';
+
+  const props = defineProps<{ loading?: boolean; modelValue?: any; currentAttribute?: any; lastAttribute?: any }>();
+  const emits = defineEmits(['update:modelValue', 'update:loading']);
+
+  const formRef = ref<FormInstance>();
+  const { loading, modelValue: formValue } = useVModels(props, emits);
+
+  const guideSourceUrl = computed({
+    get: () => get(formValue.value, 'expand.guide_source.url', ''),
+    set: (val) => set(formValue.value, 'expand.guide_source.url', val),
+  });
+
+  const karaokeSourceUrl = computed({
+    get: () => get(formValue.value, 'expand.karaoke_source.url', ''),
+    set: (val) => set(formValue.value, 'expand.karaoke_source.url', val),
+  });
+
+  const trackSourceUrl = computed({
+    get: () => get(formValue.value, 'expand.track_source.url', ''),
+    set: (val) => set(formValue.value, 'expand.track_source.url', val),
+  });
+
+  const trackSourceName = computed(() => get(formValue.value, 'expand.track_source.name', ''));
+  const trackSourceSize = computed((): number => get(formValue.value, 'expand.track_source.size', 0));
+
+  const fullLyricTime = computed(() => getLyricTimeArr(formValue.value.lyric));
+  const clipLyricTime = computed(() => getLyricTimeArr(formValue.value.clip_lyric));
+  const checkClip = computed(
+    () => clipLyricTime.value.length !== 0 && fullLyricTime.value.toString().indexOf(clipLyricTime.value.toString()) !== -1
+  );
+
+  const onUpdateGuide = (file: { name: string; url: string; size: number }) => {
+    set(formValue.value, 'expand.guide_source', { name: file.name, url: file.url, size: file.size });
+  };
+
+  const onUpdateKaraoke = (file: { name: string; url: string; size: number }) => {
+    set(formValue.value, 'expand.karaoke_source', { name: file.name, url: file.url, size: file.size });
+  };
+
+  const onUpdateTrack = (file: { name: string; url: string; size: number }) => {
+    set(formValue.value, 'expand.track_source', { name: file.name, url: file.url, size: file.size });
+  };
+
+  const { activityAudioAccept, activityTrackAccept } = useSelectionStore();
+
+  const formRule = {
+    'expand.guide_source.url': [{ required: true, message: '请上传导唱文件' }],
+    'expand.karaoke_source.url': [{ required: true, message: '请上传伴奏文件' }],
+    'lyric': [
+      { type: 'string', required: true, message: '请填写歌词内容' },
+      {
+        type: 'string',
+        validator: (value: any, cb: (error?: string) => void) => (fullLyricTime.value.length === 0 ? cb('歌词文本格式不正确') : {}),
+      },
+    ],
+    'clip_lyric': [
+      { type: 'string', required: true, message: '请填写推荐歌词内容' },
+      { type: 'string', validator: (value: any, cb: (error?: string) => void) => (checkClip.value ? {} : cb('推荐片段不在歌词中')) },
+    ],
+  } as Record<string, FieldRule[]>;
+
+  const onDownload = (url: string, fileName: string) => downloadFile(url, `${formValue.value.song_name}(${fileName})`);
+
+  const onFormatLyric = (key: string) => {
+    formValue.value[key] = formValue.value[key]?.replace(/(\n[\s\t]*\r*\n)/g, '\n').replace(/^[\n\r\t]*|[\n\r\t]*$/g, '');
+  };
+
+  const guideFile = ref<File | undefined>();
+
+  const getGuideFile = async () => {
+    if (!guideFile.value) {
+      guideFile.value = await axios
+        .get(`${guideSourceUrl.value}`, { responseType: 'blob', timeout: 60000 })
+        .then(({ data }) => Promise.resolve(data));
+    }
+
+    return guideFile.value;
+  };
+
+  const onAudioPreview = async () => {
+    const src = await getGuideFile();
+    createModalVNode(() => createVNode(AudioPreview, { src, lyric: formValue.value.lyric }), {
+      title: '预览歌词-整首',
+      footer: false,
+      closable: true,
+    });
+  };
+
+  const onAudioClipPreview = async () => {
+    const src = await getGuideFile();
+    const startTime = first(clipLyricTime.value) as string;
+    const fullEndIndex = fullLyricTime.value.indexOf(last(clipLyricTime.value) as string);
+    const endTime = fullEndIndex === -1 ? undefined : fullLyricTime.value[fullEndIndex + 1] || undefined;
+
+    createModalVNode(() => createVNode(AudioPreview, { src, lyric: formValue.value.clip_lyric, startTime, endTime }), {
+      title: '预览歌词-片段',
+      footer: false,
+      closable: true,
+    });
+  };
+
+  defineExpose({
+    onValid: (callback?: () => void) => formRef.value?.validate((errors) => !errors && callback?.()),
+  });
+</script>
+
+<template>
+  <Form ref="formRef" :model="formValue" :rules="formRule" :auto-label-width="true" size="small">
+    <FormItem label="导唱文件(带伴奏)" field="expand.guide_source.url" :show-colon="true">
+      <InputUpload
+        v-model="guideSourceUrl"
+        :accept="activityAudioAccept"
+        :limit="100"
+        @success="onUpdateGuide"
+        @choose-file="(file:File) => (guideFile = file)"
+        @update:loading="(value:boolean) => (loading = value)"
+      />
+      <span v-if="currentAttribute && lastAttribute" style="width: 20px; margin-left: 10px">
+        <IconFile v-show="!isEqual(currentAttribute.expand?.guide_source?.url, lastAttribute.expand?.guide_source?.url)" />
+      </span>
+    </FormItem>
+    <FormItem v-if="guideSourceUrl">
+      <template #label>
+        <Link icon @click="onDownload(guideSourceUrl, '导唱文件')">下载导唱</Link>
+      </template>
+      <AudioPlayer name="导唱文件" :url="guideSourceUrl" />
+      <span v-if="currentAttribute && lastAttribute" style="width: 20px; margin-left: 10px"> </span>
+    </FormItem>
+    <FormItem label="伴奏文件" field="expand.karaoke_source.url" :show-colon="true">
+      <InputUpload
+        v-model="karaokeSourceUrl"
+        :accept="activityAudioAccept"
+        :limit="100"
+        @success="onUpdateKaraoke"
+        @update:loading="(value:boolean) => (loading = value)"
+      />
+      <span v-if="currentAttribute && lastAttribute" style="width: 20px; margin-left: 10px">
+        <IconFile v-show="!isEqual(currentAttribute.expand?.karaoke_source?.url, lastAttribute.expand?.karaoke_source?.url)" />
+      </span>
+    </FormItem>
+    <FormItem v-if="karaokeSourceUrl">
+      <template #label>
+        <Link icon @click="onDownload(karaokeSourceUrl, '伴奏文件')">下载伴奏</Link>
+      </template>
+      <AudioPlayer name="伴奏文件" :url="karaokeSourceUrl" />
+      <span v-if="currentAttribute && lastAttribute" style="width: 20px; margin-left: 10px"> </span>
+    </FormItem>
+    <FormItem label="分轨文件" :show-colon="true">
+      <InputUpload v-model="trackSourceUrl" :accept="activityTrackAccept" @success="onUpdateTrack" />
+      <span v-if="currentAttribute && lastAttribute" style="width: 20px; margin-left: 10px">
+        <IconFile v-show="!isEqual(currentAttribute.expand?.track_source?.url, lastAttribute.expand?.track_source?.url)" />
+      </span>
+    </FormItem>
+    <FormItem v-if="trackSourceUrl">
+      <template #label>
+        <Link icon @click="onDownload(karaokeSourceUrl, '分轨文件')">下载分轨文件</Link>
+      </template>
+      {{ trackSourceName }} {{ bytesForHuman(trackSourceSize) }}
+      <span v-if="currentAttribute && lastAttribute" style="width: 20px; margin-left: 10px"> </span>
+    </FormItem>
+    <FormItem class="lyric" label="歌词文本" field="lyric" :show-colon="true">
+      <Textarea
+        v-model="formValue.lyric"
+        :auto-size="{ minRows: 6, maxRows: 6 }"
+        placeholder="请粘贴带时间的lrc歌词文本至输入框"
+        @blur="() => onFormatLyric('lyric')"
+      />
+      <span v-if="currentAttribute && lastAttribute" style="width: 20px; margin-left: 10px">
+        <IconFile v-show="!isEqual(currentAttribute.lyric, lastAttribute.lyric)" />
+      </span>
+      <template #extra>
+        <Link :hoverable="false" :disabled="!guideSourceUrl || !formValue.lyric" @click="onAudioPreview()"> 预览歌词</Link>
+        <span v-if="currentAttribute && lastAttribute" style="width: 20px; margin-left: 30px"></span>
+      </template>
+    </FormItem>
+    <FormItem class="lyric" label="片段歌词" field="clip_lyric" :show-colon="true">
+      <Textarea
+        v-model="formValue.clip_lyric"
+        :auto-size="{ minRows: 6, maxRows: 6 }"
+        placeholder="请粘贴带时间的lrc歌词文本至输入框"
+        @blur="() => onFormatLyric('clip_lyric')"
+      />
+      <span v-if="currentAttribute && lastAttribute" style="width: 20px; margin-left: 10px">
+        <IconFile v-show="!isEqual(currentAttribute.clip_lyric, lastAttribute.clip_lyric)" />
+      </span>
+      <template #extra>
+        <Link :hoverable="false" :disabled="!guideSourceUrl || !checkClip" @click="onAudioClipPreview()"> 预览歌词</Link>
+        <span v-if="currentAttribute && lastAttribute" style="width: 20px; margin-left: 30px"> </span>
+      </template>
+    </FormItem>
+  </Form>
+</template>
+
+<style scoped lang="less">
+  .lyric {
+    :deep(.arco-form-item-extra) {
+      width: 100%;
+      text-align: right;
+    }
+  }
+</style>

+<script setup lang="ts">
+  import { CheckboxGroup, Form, FormItem, RadioGroup, Transfer } from '@arco-design/web-vue';
+  import { computed, ref } from 'vue';
+  import { FieldRule, FormInstance } from '@arco-design/web-vue/es/form';
+  import { get, set } from 'lodash';
+  import { useVModels } from '@vueuse/core';
+  import { AnyObject } from '@/types/global';
+  import { storeToRefs } from 'pinia';
+  import { useSelectionStore } from '@/store';
+
+  const props = withDefaults(
+    defineProps<{
+      loading?: boolean;
+      modelValue?: any;
+      currentAttribute?: AnyObject;
+      lastAttribute?: AnyObject;
+      filterProject?: (value: any) => boolean;
+      hideMode?: boolean;
+      disabledTag?: boolean;
+    }>(),
+    {
+      filterProject: () => true,
+      hideMode: false,
+      disabledTag: true,
+    }
+  );
+
+  const emits = defineEmits(['update:modelValue', 'update:loading']);
+
+  const formRef = ref<FormInstance>();
+  const { modelValue: formValue } = useVModels(props, emits);
+
+  const pushType = computed({
+    get: () => get(formValue.value, 'expand.push_type', ['tag']),
+    set: (val) => set(formValue.value, 'expand.push_type', val),
+  });
+
+  const pushUser = computed({
+    get: () => get(formValue.value, 'expand.push_user', []),
+    set: (val) => set(formValue.value, 'expand.push_user', val),
+  });
+
+  const formRule = {
+    'is_push': [{ required: true, message: '请选择是否推送' }],
+    'expand.push_type': [{ required: formValue.value.is_push === 1, message: '请选择推送方式' }],
+    'expand.push_user': [{ required: pushType.value.includes('user'), message: '请选择推送歌手' }],
+  } as Record<string, FieldRule[]>;
+
+  const isPushOptions = [
+    { label: '无推送', value: 0 },
+    { label: '有推送', value: 1 },
+  ];
+
+  const pushTypeOptions = [
+    { label: '智能推送(歌曲标签的用户)', value: 'tag', disabled: props.disabledTag },
+    { label: '定向推送', value: 'user' },
+  ];
+
+  defineExpose({
+    onValid: (callback?: () => void) => formRef.value?.validate((errors) => !errors && callback?.()),
+  });
+
+  const onChangeMode = (value: number) => {
+    pushType.value = value === 0 ? [] : ['tag'];
+    pushUser.value = [];
+  };
+
+  const { getUserOptions } = storeToRefs(useSelectionStore());
+
+  const userOptions = computed(() =>
+    getUserOptions.value.map((item) => {
+      return { value: item.id, label: item.nick_name };
+    })
+  );
+</script>
+
+<template>
+  <Form ref="formRef" :model="formValue" :rules="formRule" :auto-label-width="true" size="small">
+    <FormItem v-if="!hideMode" label="是否推送" :show-colon="true" field="is_push">
+      <RadioGroup v-model="formValue.is_push" :options="isPushOptions" @change="onChangeMode" />
+    </FormItem>
+    <FormItem v-if="formValue.is_push === 1" :show-colon="true" label="推送方式">
+      <CheckboxGroup v-model="pushType" :options="pushTypeOptions" />
+    </FormItem>
+    <FormItem v-if="formValue.is_push === 1 && pushType?.indexOf('user') !== -1" :show-colon="true" label="推送歌手" row-class="mb-0">
+      <Transfer
+        v-model="pushUser"
+        :data="userOptions"
+        size="mini"
+        :title="['用户列表', '推送用户']"
+        :show-search="true"
+        :one-way="true"
+        :source-input-search-props="{ placeholder: '请输入', size: 'mini' }"
+        :target-input-search-props="{ placeholder: '请输入', size: 'mini' }"
+      />
+      <!--      <UserSelect v-model="pushUser" multiple allow-search allow-clear />-->
+    </FormItem>
+  </Form>
+</template>
+
+<style scoped lang="less">
+  :deep(.arco-transfer-view) {
+    width: 240px;
+    height: 300px;
+  }
+</style>

+<script setup lang="ts">
+  import { computed, createVNode, onMounted, ref } from 'vue';
+
+  import useLoading from '@/hooks/loading';
+  import { AnyObject } from '@/types/global';
+
+  import ModalContent from '@/views/audition/activity-audit/components/modal-content.vue';
+
+  import { useAuthorizedStore, useSelectionStore } from '@/store';
+  import { Message, ModalReturn, TableData } from '@arco-design/web-vue';
+  import { tryOnMounted } from '@vueuse/core';
+  import { createModalVNode } from '@/utils/createVNode';
+  import { useApplyApi } from '@/http/activity';
+  import UserTableColumn from '@/components/filter/user-table-column.vue';
+  import EnumTableColumn from '@/components/filter/enum-table-column.vue';
+  import usePermission from '@/hooks/permission';
+  import SpaceTableColumn from '@/components/filter/space-table-column.vue';
+  import DateTableColumn from '@/components/filter/date-table-column.vue';
+  import ActivityTableColumn from '@/components/filter/activity-table-column.vue';
+
+  const tableRef = ref();
+
+  const { loading, setLoading } = useLoading(false);
+  const filter = ref<AnyObject>({});
+
+  const { get, audit, statusOption } = useApplyApi;
+
+  const dialog = ref<ModalReturn>();
+
+  const queryParams = computed(() => {
+    return {
+      ...filter.value,
+      songType: 1,
+      setColumn: [
+        'id',
+        'song_name',
+        'cover',
+        'lang',
+        'speed',
+        'sub_title',
+        'sex',
+        'user_id',
+        'project_id',
+        'send_url',
+        'send_url',
+        'lyric',
+        'clip_lyric',
+        'is_push',
+        'is_official',
+        'mark',
+        'expand',
+        'weight',
+        'status',
+        'estimate_release_at',
+        'created_at',
+      ],
+      setWith: [
+        'project:id,name',
+        'user:id,real_name,nick_name,role',
+        'tags:id,name',
+        'applyRecords:id,activity_id,current,audit_msg,created_at',
+      ],
+      setSort: ['-updated_at'],
+    };
+  });
+
+  const onQuery = async (params?: AnyObject) => {
+    setLoading(true);
+    return get({ ...queryParams.value, ...params }).finally(() => setLoading(false));
+  };
+
+  const onSearch = () => tableRef.value?.onPageChange(1);
+
+  const onReset = () => {
+    filter.value = { songName: '', userName: '', projectName: '', tagName: '', auditStatus: '', createBetween: [] };
+    onSearch();
+  };
+
+  const onAudit = (record: TableData) => {
+    dialog.value = createModalVNode(
+      () =>
+        createVNode(ModalContent, {
+          row: record,
+          activeKey: 'audit',
+          currentAttribute: record,
+          lastAttribute: record.last_record,
+          submit: (value: AnyObject) =>
+            audit(record.id, value).then(() => {
+              Message.success(`审核歌曲：${record?.song_name}`);
+              tableRef.value?.onFetch();
+              useAuthorizedStore().syncAuditActivity();
+              dialog.value?.close();
+            }),
+        }),
+      { titleAlign: 'center', title: '歌曲上架申请', modalClass: 'retry', footer: false, maskClosable: true }
+    );
+  };
+
+  const onView = (record: TableData) => {
+    dialog.value = createModalVNode(
+      () =>
+        createVNode(ModalContent, {
+          row: record,
+          submitText: '关闭',
+          activeKey: 'record',
+          type: 'view',
+          submit: () => Promise.resolve(dialog.value?.close()),
+        }),
+      { title: '歌曲上架申请', titleAlign: 'center', modalClass: 'retry', footer: false, maskClosable: true, escToClose: true }
+    );
+  };
+
+  tryOnMounted(async () => useSelectionStore().queryAll());
+
+  // eslint-disable-next-line no-return-assign
+  onMounted(() => {
+    onReset();
+    useAuthorizedStore().syncAuditActivity();
+  });
+</script>
+
+<template>
+  <page-view has-bread has-card>
+    <filter-search :model="filter" :loading="loading" @search="onSearch" @reset="onReset">
+      <filter-search-item field="song_name" label="歌曲名称">
+        <a-input v-model="filter.songName" :allow-clear="true" placeholder="请输入" />
+      </filter-search-item>
+      <filter-search-item field="projectName" label="厂牌名称">
+        <a-input v-model="filter.projectName" :allow-clear="true" placeholder="请输入" />
+      </filter-search-item>
+      <filter-search-item field="tagName" label="标签名称">
+        <a-input v-model="filter.tagName" :allow-clear="true" placeholder="请输入" />
+      </filter-search-item>
+      <filter-search-item field="userName" label="创建人">
+        <a-input v-model="filter.userName" :allow-clear="true" placeholder="请输入" />
+      </filter-search-item>
+      <filter-search-item field="createBetween" label="创建时间">
+        <a-range-picker v-model="filter.createBetween" :allow-clear="true" />
+      </filter-search-item>
+      <filter-search-item field="audit_status" label="状态">
+        <a-select v-model="filter.auditStatus" :options="statusOption" placeholder="请选择" />
+      </filter-search-item>
+    </filter-search>
+    <filter-table ref="tableRef" :loading="loading" :on-query="onQuery">
+      <activity-table-column :width="460" data-index="id" title="试唱歌曲" />
+      <user-table-column :width="160" data-index="user_id" user="user" title="创建人" show-href />
+      <a-table-column :width="120" data-index="apply_records" title="是否驳回过">
+        <template #cell="{ record }">
+          <span v-if="record.record_count !== 0">是</span>
+          <span v-else style="color: rgba(44, 44, 44, 0.5)">否</span>
+        </template>
+      </a-table-column>
+      <date-table-column data-index="created_at" title="创建时间" :width="100" split />
+      <enum-table-column data-index="audit_status" title="状态" :option="useApplyApi.statusOption" :width="120" />
+      <space-table-column
+        v-if="usePermission().checkPermission(['audition-activity-audit-audit', 'audition-activity-audit-log'])"
+        :width="120"
+        data-index="operations"
+        title="操作"
+        fixed="right"
+      >
+        <template #default="{ record }">
+          <a-link
+            v-if="record.audit_status === 0"
+            v-permission="['audition-activity-audit-audit']"
+            :hoverable="false"
+            class="link-hover"
+            @click="onAudit(record)"
+          >
+            审核
+          </a-link>
+          <a-link
+            v-if="record.audit_status === 2"
+            v-permission="['audition-activity-audit-log']"
+            :hoverable="false"
+            class="link-hover"
+            @click="onView(record)"
+          >
+            查看驳回信息
+          </a-link>
+        </template>
+      </space-table-column>
+    </filter-table>
+  </page-view>
+</template>
+
+<style scoped lang="less"></style>

+<script setup lang="ts">
+  import { computed, onMounted, ref } from 'vue';
+  import useLoading from '@/hooks/loading';
+
+  import LinkTableColumn from '@/components/filter/link-table-column.vue';
+  import { useReListApi } from '@/http/activity';
+  import { AnyObject, QueryForParams } from '@/types/global';
+  import UserTableColumn from '@/components/filter/user-table-column.vue';
+
+  const { loading, setLoading } = useLoading(false);
+  const filter = ref({ activityName: '', projectName: '', userName: '', brokerName: '', operatorName: '', createBetween: [] });
+  const tableRef = ref();
+
+  const queryParams = computed((): QueryForParams => {
+    return {
+      ...filter.value,
+      setWith: [
+        'activity:id,song_name',
+        'project:id,name',
+        'user:id,nick_name,identity',
+        'broker:id,nick_name,identity',
+        'operator:id,nick_name,identity',
+      ],
+      sortBy: 'id',
+      sortType: 'desc',
+    };
+  });
+
+  const onQuery = async (params: AnyObject) => {
+    setLoading(true);
+    return useReListApi.get({ ...queryParams.value, ...params }).finally(() => setLoading(false));
+  };
+
+  const onExport = () => useReListApi.getExport('重新上架记录', queryParams.value);
+
+  const onSearch = () => tableRef.value?.onPageChange(1);
+
+  const onReset = () => {
+    filter.value = { activityName: '', projectName: '', userName: '', brokerName: '', operatorName: '', createBetween: [] };
+    onSearch();
+  };
+
+  onMounted(() => onReset());
+</script>
+
+<template>
+  <page-view has-bread has-card>
+    <filter-search :loading="loading" :model="filter" @search="onSearch" @reset="onReset">
+      <filter-search-item label="歌曲名">
+        <a-input v-model="filter.activityName" placeholder="请输入" allow-clear />
+      </filter-search-item>
+      <filter-search-item label="歌曲厂牌">
+        <a-input v-model="filter.projectName" placeholder="请输入" allow-clear />
+      </filter-search-item>
+      <filter-search-item label="合作用户">
+        <a-input v-model="filter.userName" placeholder="请输入" allow-clear />
+      </filter-search-item>
+      <filter-search-item label="经纪人">
+        <a-input v-model="filter.brokerName" placeholder="请输入" allow-clear />
+      </filter-search-item>
+      <filter-search-item label="操作人">
+        <a-input v-model="filter.operatorName" placeholder="请输入" allow-clear />
+      </filter-search-item>
+      <filter-search-item label="操作时间">
+        <a-range-picker
+          v-model="filter.createBetween"
+          :time-picker-props="{ defaultValue: ['00:00:00', '23:59:59'] }"
+          :day-start-of-week="1"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          format="YYYY-MM-DD"
+        />
+      </filter-search-item>
+    </filter-search>
+    <filter-table ref="tableRef" :loading="loading" :on-query="onQuery">
+      <template #tool-right>
+        <export-button v-permission="['audition-activity-relist-log-export']" label="导出" :on-download="onExport" />
+      </template>
+      <link-table-column
+        data-index="activity_id"
+        title="歌曲名"
+        :width="200"
+        :formatter="(record:any) => record.activity?.song_name"
+        :to="(record:any) => $router?.push({ name: 'audition-activity-show', params: { id: record.activity_id } })"
+      />
+      <link-table-column
+        data-index="project"
+        title="歌曲厂牌"
+        :width="200"
+        :formatter="(record:any) => record.project?.name"
+        :to="(record:any) => $router?.push({ name: 'audition-project-show', params: { id: record.project_id } })"
+      />
+      <user-table-column data-index="user_id" title="合作用户" user="user" :show-href="true" :width="160" />
+      <user-table-column data-index="broker_id" title="经纪人" user="broker" :show-href="true" dark-value="" :width="160" />
+      <filter-table-column data-index="broker_level" title="经纪人分类" :width="200">
+        <template #default="{ record }: { record: { broker_level: string } }">
+          <span v-if="record.broker_level">{{ record.broker_level }}</span>
+          <span v-else style="color: rgba(44, 44, 44, 0.5)">无</span>
+        </template>
+      </filter-table-column>
+      <user-table-column data-index="operator_id" title="操作人" user="operator" :show-href="true" :width="160" />
+      <filter-table-column data-index="created_at" title="操作时间" :width="180" />
+    </filter-table>
+  </page-view>
+</template>
+
+<style scoped lang="less"></style>

+<script setup lang="ts">
+  import { Activity } from '@/types/activity';
+  import { computed } from 'vue';
+  import { User } from '@/types/user';
+  import UserTag from '@/views/audition/activity-show/components/user-tag.vue';
+  import { unionBy } from 'lodash';
+  import useActivityApi from '@/http/activity';
+
+  const props = defineProps<{ data: Activity }>();
+
+  const links = computed(() => {
+    return unionBy(props.data.links || [], 'id');
+  });
+
+  const inSideLyricist = computed(
+    (): User[] => links.value?.filter((item: User) => props.data.expand?.lyricist?.ids?.indexOf(item.id) !== -1) || []
+  );
+  const outSideLyricist = computed(() => props.data.expand?.lyricist?.supplement || []);
+
+  const inSideComposer = computed(
+    (): User[] => links.value?.filter((item: User) => props.data.expand?.composer?.ids?.indexOf(item.id) !== -1) || []
+  );
+  const outSideComposer = computed(() => props.data.expand?.composer?.supplement || []);
+
+  const inSideArranger = computed(
+    (): User[] => links.value?.filter((item: User) => props.data.expand?.arranger?.ids?.indexOf(item.id) !== -1) || []
+  );
+  const outSideArranger = computed(() => props.data.expand?.arranger?.supplement || []);
+
+  const { statusOption } = useActivityApi;
+</script>
+
+<template>
+  <a-card :bordered="false">
+    <a-form :model="data" auto-label-width label-align="left">
+      <a-layout>
+        <a-layout-sider :width="130" style="background: none; box-shadow: none; padding-top: 6px">
+          <a-image show-loader :height="130" :width="130" :src="data.cover" />
+        </a-layout-sider>
+        <a-layout-content style="margin-left: 16px">
+          <a-form-item :hide-label="true">
+            <div class="title">{{ data.song_name }}</div>
+            <a-tag v-for="item in data.tags" :key="item.id" size="small" style="margin-right: 5px">
+              {{ item.name }}
+            </a-tag>
+            <span style="font-size: 10px">
+              {{ statusOption.find((item) => item.value === data.status)?.label }}
+            </span>
+          </a-form-item>
+          <a-form-item
+            :label-col-style="{ flex: 0 }"
+            :wrapper-col-style="{ flex: 'unset', width: 'inherit' }"
+            :show-colon="true"
+            label="关联厂牌"
+          >
+            <div v-if="data.project">{{ data.project.name }}</div>
+            <div v-else>无</div>
+          </a-form-item>
+          <a-form-item hide-label>
+            <a-form-item :label-col-style="{ flex: 0 }" :show-colon="true" label="作词">
+              <user-tag v-for="item in inSideLyricist" :key="item.id" :user="item" style="margin-right: 5px" />
+              <user-tag v-for="item in outSideLyricist" :key="`lyricist-${item}`" :user="{ nick_name: item }" style="margin-right: 5px" />
+            </a-form-item>
+            <a-form-item :label-col-style="{ flex: 0 }" :show-colon="true" label="作曲">
+              <user-tag v-for="item in inSideComposer" :key="item.id" :user="item" style="margin-right: 5px" />
+              <user-tag v-for="item in outSideComposer" :key="`lyricist-${item}`" :user="{ nick_name: item }" style="margin-right: 5px" />
+            </a-form-item>
+            <a-form-item :label-col-style="{ flex: 0 }" :show-colon="true" label="编曲">
+              <user-tag v-for="item in inSideArranger" :key="item.id" :user="item" style="margin-right: 5px" />
+              <user-tag v-for="item in outSideArranger" :key="`lyricist-${item}`" :user="{ nick_name: item }" style="margin-right: 5px" />
+            </a-form-item>
+          </a-form-item>
+          <a-form-item hide-label>
+            <a-form-item :label-col-style="{ flex: 0 }" :show-colon="true" label="创建信息">
+              <span v-if="data.user" style="margin-right: 8px">{{ data.user.nick_name }}</span>
+              <span style="margin-right: 8px">{{ data.created_at }} </span>
+            </a-form-item>
+            <a-form-item :label-col-style="{ flex: 0 }" :show-colon="true" label="预计发行时间">
+              {{ data.estimate_release_at }}
+            </a-form-item>
+            <a-form-item :label-col-style="{ flex: 0 }"> </a-form-item>
+          </a-form-item>
+          <a-form-item label="推荐语" :show-colon="true" :label-col-style="{ flex: 0 }">
+            <a-typography-paragraph
+              style="margin-bottom: 0; width: 100%; color: var(--color-text-2)"
+              :ellipsis="{ rows: 1, showTooltip: true }"
+            >
+              {{ data.sub_title }}
+            </a-typography-paragraph>
+          </a-form-item>
+        </a-layout-content>
+      </a-layout>
+    </a-form>
+  </a-card>
+</template>
+
+<style lang="less" scoped>
+  .arco-form-item {
+    margin-bottom: 0;
+  }
+
+  .arco-form-item-label-col {
+    flex: 0;
+  }
+
+  .title {
+    font-size: 16px;
+    font-weight: bold;
+    margin-right: 8px;
+  }
+
+  .right {
+    margin: 0 20px;
+    min-width: 600px;
+  }
+</style>

+<script setup lang="ts">
+  import { onMounted, ref } from 'vue';
+  import useLoading from '@/hooks/loading';
+  import useActivityApi from '@/http/activity';
+
+  import { Input, Select } from '@arco-design/web-vue';
+  import UserTableColumn from '@/components/filter/user-table-column.vue';
+  import EnumTableColumn from '@/components/filter/enum-table-column.vue';
+  import UserIdentityTableColumn from '@/components/filter/user-identity-table-column.vue';
+  import NumberTableColumn from '@/components/filter/number-table-column.vue';
+
+  const props = defineProps<{ activityId: number; queryHook?: () => void }>();
+
+  const { loading, setLoading } = useLoading(false);
+  const filter = ref({ nick_name: '', real_name: '', sex: '', identity: '', scope: '' });
+  const tableRef = ref();
+
+  const { likeUsers } = useActivityApi;
+
+  const sexOptions = [
+    { value: 1, label: '男' },
+    { value: 2, label: '女' },
+    { value: 0, label: '无' },
+  ];
+
+  const roleOptions = [
+    { value: '0', label: '未认证 ' },
+    { value: '1,3', label: '音乐人' },
+    { value: '2,3', label: '经纪人' },
+  ];
+
+  const scopeOptions = [
+    { value: 0, label: '无' },
+    { value: 1, label: '平台管理员' },
+    { value: 2, label: '厂牌管理员' },
+  ];
+
+  const onQuery = async (params: any) => {
+    setLoading(true);
+    props.queryHook?.();
+    return likeUsers(props.activityId, {
+      ...filter.value,
+      identity: filter.value?.identity.split(',').filter(Number) || '',
+      ...params,
+      sortBy: 'last_listen_at',
+      sortType: 'desc',
+    }).finally(() => {
+      setLoading(false);
+    });
+  };
+
+  const onSearch = () => tableRef.value?.onPageChange(1);
+
+  const onReset = () => {
+    filter.value = { nick_name: '', real_name: '', sex: '', identity: '', scope: '' };
+    onSearch();
+  };
+
+  onMounted(() => onReset());
+</script>
+
+<template>
+  <FilterSearch :loading="loading" :model="filter" @search="onSearch" @reset="onReset">
+    <FilterSearchItem label="用户艺名">
+      <Input v-model="filter.nick_name" placeholder="请输入" />
+    </FilterSearchItem>
+    <FilterSearchItem label="性别">
+      <Select v-model="filter.sex" :options="sexOptions" placeholder="请选择" allow-clear />
+    </FilterSearchItem>
+    <FilterSearchItem label="身份">
+      <Select v-model="filter.identity" :options="roleOptions" placeholder="请选择" allow-clear />
+    </FilterSearchItem>
+    <FilterSearchItem label="权限">
+      <Select v-model="filter.scope" :options="scopeOptions" placeholder="请选择" allow-clear />
+    </FilterSearchItem>
+  </FilterSearch>
+  <FilterTable ref="tableRef" :loading="loading" :on-query="onQuery">
+    <UserTableColumn title="用户艺名" data-index="id" :width="260" show-href show-avatar />
+    <EnumTableColumn title="性别" data-index="sex" :width="100" :option="sexOptions" :dark-value="0" />
+    <UserIdentityTableColumn title="身份" data-index="identity" :width="100" />
+    <EnumTableColumn title="权限" data-index="scope" :width="120" :option="scopeOptions" :dark-value="0" />
+    <NumberTableColumn title="试听歌曲数量" data-index="listen_count" :width="120" :dark-value="0" />
+    <NumberTableColumn title="收藏歌曲数量" data-index="collection_count" :width="120" :dark-value="0" />
+    <NumberTableColumn title="试唱歌曲数量" data-index="submit_work" :width="120" :dark-value="0" />
+    <FilterTableColumn title="最后试听时间" data-index="last_listen_at" :width="180" />
+  </FilterTable>
+</template>
+
+<style scoped lang="less"></style>

+<script setup lang="ts">
+  import { ref, onMounted } from 'vue';
+  import FilterSearch from '@/components/filter/search.vue';
+  import FilterSearchItem from '@/components/filter/search-item.vue';
+  import FilterTable from '@/components/filter/table.vue';
+  import { Input, Divider, TableColumn } from '@arco-design/web-vue';
+  import { AnyObject } from '@/types/global';
+  import PhoneTableColumn from '@/components/filter/phone-table-column.vue';
+  import useLoading from '@/hooks/loading';
+  import useUserApi from '@/http/user';
+
+  const props = defineProps<{ activityId: number }>();
+  const filter = ref({ nick_name: '', real_name: '', emailLike: '', phoneLike: '', status: 1 });
+  const tableRef = ref<InstanceType<typeof FilterTable>>();
+
+  const { loading, setLoading } = useLoading(false);
+  const selectedKeys = ref([]);
+
+  const onQuery = (params?: AnyObject) => {
+    setLoading(true);
+
+    return useUserApi
+      .get({
+        exclude_manage_activity: props.activityId,
+        ...filter.value,
+        ...params,
+        sortBy: 'id',
+        sortType: 'desc',
+      })
+      .finally(() => setLoading(false));
+  };
+
+  const onSearch = () => tableRef.value?.onPageChange(1);
+  const onReset = () => {
+    filter.value = { nick_name: '', real_name: '', emailLike: '', phoneLike: '', status: 1 };
+    onSearch();
+  };
+
+  defineExpose({ selectedKeys });
+
+  onMounted(() => onReset());
+</script>
+
+<template>
+  <FilterSearch :loading="loading" :model="filter" size="small" @search="onSearch" @reset="onReset">
+    <FilterSearchItem field="nick_name" label="用户艺名">
+      <Input v-model="filter.nick_name" allow-clear placeholder="请输入" />
+    </FilterSearchItem>
+    <FilterSearchItem field="real_name" label="用户真名">
+      <Input v-model="filter.real_name" allow-clear placeholder="请输入" />
+    </FilterSearchItem>
+    <FilterSearchItem field="email" label="用户邮箱">
+      <Input v-model="filter.emailLike" allow-clear placeholder="请输入" />
+    </FilterSearchItem>
+    <FilterSearchItem field="phone" label="手机号码">
+      <Input v-model="filter.phoneLike" allow-clear placeholder="请输入" />
+    </FilterSearchItem>
+  </FilterSearch>
+  <Divider style="margin-top: 0" />
+  <FilterTable
+    ref="tableRef"
+    v-model:selectedKeys="selectedKeys"
+    size="small"
+    :loading="loading"
+    style="height: 360px"
+    :scroll="{ y: 360 }"
+    :row-selection="{ type: 'checkbox' }"
+    :on-query="onQuery"
+  >
+    <TableColumn title="用户艺名" data-index="nick_name" :width="160" :tooltip="true" :ellipsis="true" />
+    <TableColumn title="用户真名" data-index="real_name" :width="140" :tooltip="true" :ellipsis="true" />
+    <TableColumn title="用户邮箱" data-index="email" :width="140" :tooltip="true" :ellipsis="true" />
+    <PhoneTableColumn title="用户手机" data-index="phone" area-index="area_code" :width="140" :tooltip="true" :ellipsis="true" />
+  </FilterTable>
+</template>
+
+<style scoped lang="less"></style>

+<script setup lang="ts">
+  import useLoading from '@/hooks/loading';
+  import { createVNode, onMounted, ref } from 'vue';
+  import useActivityApi, { useManagerApi } from '@/http/activity';
+  import { AnyObject } from '@/types/global';
+  import PhoneTableColumn from '@/components/filter/phone-table-column.vue';
+  import EnumTableColumn from '@/components/filter/enum-table-column.vue';
+  import ManagerForm from '@/views/audition/activity-show/components/manager-form.vue';
+
+  import { createFormVNode, createModalVNode, createSelectionFormItemVNode, createSelectVNode } from '@/utils/createVNode';
+  import { Input, Select, Button, Link, Grid, GridItem, Message, TableData } from '@arco-design/web-vue';
+  import FilterTable from '@/components/filter/table.vue';
+  import UserTableColumn from '@/components/filter/user-table-column.vue';
+  import SpaceTableColumn from '@/components/filter/space-table-column.vue';
+  import usePermission from '@/hooks/permission';
+
+  const { loading, setLoading } = useLoading(false);
+  const { manageUsers } = useActivityApi;
+  const { statusOption, sexOption, officialStatusOption, permissionOption, create, update, destroy } = useManagerApi;
+
+  const props = defineProps<{ activityId: number; queryHook?: () => void }>();
+  const tableRef = ref();
+  const filter = ref<AnyObject>({});
+
+  const onQuery = async (params?: AnyObject) => {
+    setLoading(true);
+    props.queryHook?.();
+    return manageUsers(props.activityId, { ...filter.value, ...params, sortBy: 'user_id', sortType: 'desc' }).finally(() =>
+      setLoading(false)
+    );
+  };
+
+  const onSearch = () => tableRef.value?.onPageChange(1);
+  const onReset = () => {
+    filter.value = { nick_name: '', email: '', phone: '', permission: '', status: '' };
+    onSearch();
+  };
+
+  const onCreate = () => {
+    const formValue = ref<string[]>(['view']);
+    const creating = ref<boolean>(false);
+    const formRef = ref();
+
+    const modal = createModalVNode(() => createVNode(ManagerForm, { activityId: props.activityId, ref: formRef }), {
+      title: '新增外部管理用户',
+      titleAlign: 'center',
+      width: '1000px',
+      closable: true,
+      footer: () =>
+        createVNode(Grid, { cols: 6 }, () => [
+          createVNode(GridItem, { span: 2, style: { textAlign: 'left' } }, () =>
+            createSelectVNode(formValue, permissionOption, {
+              'multiple': true,
+              'onUpdate:modelValue': (val?: string[]) => {
+                if (!val?.includes('view')) {
+                  val?.unshift('view');
+                }
+                formValue.value = val || [];
+              },
+            })
+          ),
+          createVNode(GridItem, { offset: 3 }, () =>
+            createVNode(
+              Button,
+              {
+                type: 'primary',
+                loading: creating.value,
+                onClick: () => {
+                  if (formRef.value.selectedKeys.length === 0) {
+                    return Message.warning('请先选择添加用户');
+                  }
+                  creating.value = true;
+                  return create({ activity_id: props.activityId, user_ids: formRef.value.selectedKeys, permission: formValue.value })
+                    .then(() => {
+                      Message.success('添加成功');
+                      tableRef.value?.onFetch();
+                      modal.close();
+                    })
+                    .finally(() => {
+                      creating.value = false;
+                    });
+                },
+              },
+              () => '确认'
+            )
+          ),
+        ]),
+    });
+  };
+
+  const onUpdate = (record: TableData) => {
+    const formValue = ref<string[]>(record?.permission || ['view']);
+    return createModalVNode(
+      () =>
+        createFormVNode(
+          { layout: 'vertical', model: {} },
+          createSelectionFormItemVNode(
+            formValue,
+            permissionOption,
+            { label: '设置用户权限', rowClass: 'mb-0' },
+            {
+              'multiple': true,
+              'onUpdate:modelValue': (val?: string[]) => {
+                if (!val?.includes('view')) {
+                  val?.unshift('view');
+                }
+                formValue.value = val || [];
+              },
+            }
+          )
+        ),
+      {
+        title: '修改',
+        titleAlign: 'center',
+        onBeforeOk: (done: any) =>
+          update(record.id, { permission: formValue.value })
+            .then(() => {
+              Message.success('更新成功');
+              tableRef.value?.onFetch();
+              done(true);
+            })
+            .catch(() => done(false)),
+      }
+    );
+  };
+
+  const onDelete = (record: TableData) => {
+    createModalVNode(`确认取消用户：${record.user?.nick_name} 的外部管理员身份`, {
+      title: '删除操作',
+      onBeforeOk: (done: any) =>
+        destroy(record.id)
+          .then(() => {
+            Message.success('删除成功');
+            tableRef.value?.onFetch();
+            done(true);
+          })
+          .catch(() => done(false)),
+    });
+  };
+
+  const formatPermission = (permission: any[]) =>
+    permission
+      .map((item) => `[${permissionOption.find((option) => option.value === item)?.label}]` || '')
+      .filter((item) => item.length !== 0)
+      .join('');
+
+  onMounted(() => onReset());
+</script>
+
+<template>
+  <FilterSearch :model="filter" :loading="loading" @search="onSearch" @reset="onReset">
+    <FilterSearchItem field="nick_name" label="用户艺名">
+      <Input v-model="filter.nick_name" allow-clear placeholder="请输入" />
+    </FilterSearchItem>
+    <FilterSearchItem field="email" label="用户邮箱">
+      <Input v-model="filter.email" allow-clear placeholder="请输入" />
+    </FilterSearchItem>
+    <FilterSearchItem field="phone" label="用户手机">
+      <Input v-model="filter.phone" allow-clear placeholder="请输入" />
+    </FilterSearchItem>
+    <FilterSearchItem field="" label="外部权限">
+      <Select v-model="filter.permission" :options="permissionOption" allow-clear placeholder="请选择" />
+    </FilterSearchItem>
+    <FilterSearchItem field="status" label="状态">
+      <Select v-model="filter.status" :options="statusOption" allow-clear placeholder="请选择" />
+    </FilterSearchItem>
+  </FilterSearch>
+  <FilterTable ref="tableRef" :loading="loading" :on-query="onQuery">
+    <template #tool>
+      <IconButton v-permission="['audition-activity-show-out-manage-create']" icon="plus" label="新增" type="primary" @click="onCreate" />
+    </template>
+    <UserTableColumn title="用户艺名" data-index="user_id" user="user" :width="160" show-avatar />
+    <EnumTableColumn title="性别" data-index="user.sex" :option="sexOption" :dark-value="0" :width="70" />
+    <FilterTableColumn title="用户邮箱" data-index="user.email" :width="170" />
+    <PhoneTableColumn title="手机号码" data-index="user.phone" area-index="user.area_code" :width="160" />
+    <EnumTableColumn title="关注服务号" data-index="user.official_status" :option="officialStatusOption" :dark-value="0" :width="120" />
+    <FilterTableColumn title="外部权限" data-index="permission" :width="200">
+      <template #default="{ record }"> {{ formatPermission(record.permission) }}</template>
+    </FilterTableColumn>
+    <EnumTableColumn title="状态" data-index="user.status" :option="statusOption" :width="80" />
+    <SpaceTableColumn
+      v-if="usePermission().checkPermission(['audition-activity-show-out-manage-edit', 'audition-activity-show-out-manage-delete'])"
+      :width="120"
+      data-index="operations"
+      title="操作"
+      :tooltip="false"
+      :ellipsis="false"
+    >
+      <template #default="{ record }">
+        <Link v-permission="['audition-activity-show-out-manage-edit']" class="link-hover" :hoverable="false" @click="onUpdate(record)">
+          修改
+        </Link>
+        <Link v-permission="['audition-activity-show-out-manage-delete']" class="link-hover" :hoverable="false" @click="onDelete(record)">
+          取消管理
+        </Link>
+      </template>
+    </SpaceTableColumn>
+  </FilterTable>
+</template>
+
+<style scoped lang="less"></style>

+<script setup lang="ts">
+  import { AnyObject } from '@/types/global';
+  import useLoading from '@/hooks/loading';
+  import useActivityApi from '@/http/activity';
+  import { onMounted, ref } from 'vue';
+
+  import { TableColumn } from '@arco-design/web-vue';
+  import FilterTable from '@/components/filter/table.vue';
+  import UserTableColumn from '@/components/filter/user-table-column.vue';
+  import UserInfo from '@/views/audition/activity-show/components/user-info.vue';
+
+  const props = defineProps<{ activityId: number; queryHook?: () => void }>();
+
+  const { loading, setLoading } = useLoading(false);
+  const tableRef = ref();
+
+  const onQuery = async (params: AnyObject) => {
+    setLoading(true);
+    props.queryHook?.();
+    return useActivityApi
+      .matchUser(props.activityId, {
+        setColumn: ['id', 'submit_at', 'mode', 'demo_url', 'user_id', 'broker_id'],
+        setWith: ['user:id,avatar,nick_name,real_name,identity,email,province,city', 'broker:id,nick_name,identity'],
+        ...params,
+      })
+      .finally(() => setLoading(false));
+  };
+
+  onMounted(() => tableRef.value?.onPageChange());
+</script>
+
+<template>
+  <FilterTable ref="tableRef" :loading="loading" :on-query="onQuery">
+    <TableColumn :width="160" data-index="user_id " title="用户艺名">
+      <template #cell="{ record }">
+        <UserInfo v-if="record.user" :row="record.user" />
+      </template>
+    </TableColumn>
+    <UserTableColumn :width="140" data-index="broker_id" user="broker" title="队长" show-href />
+    <TableColumn :width="100" data-index="mode" title="试唱方式">
+      <template #cell="{ record }">{{ record.mode === 1 ? '自主上传' : '在线演唱' }}</template>
+    </TableColumn>
+    <TableColumn :width="180" data-index="submit_at" title="提交时间" />
+    <TableColumn :width="480" data-index="demo_url" title="Demo">
+      <template #cell="{ record }">
+        <audio-player :name="record.song_name" :url="record.demo_url" />
+      </template>
+    </TableColumn>
+  </FilterTable>
+</template>
+
+<style scoped lang="less"></style>

+<script setup lang="ts">
+  import { Modal, Textarea } from '@arco-design/web-vue';
+  import { computed, h } from 'vue';
+  import { ActivityExpand } from '@/types/activity-apply';
+  import { useAppStore } from '@/store';
+  import { downloadFile } from '@/http/auth';
+
+  type MaterialData = {
+    title: string;
+    type: string;
+    content: string;
+    name?: string;
+    size?: string;
+  };
+
+  const props = defineProps<{ data: { expand: ActivityExpand; lyric: string; song_name: string } }>();
+
+  const appStore = useAppStore();
+  const theme = computed(() => appStore.theme);
+
+  const lyricStyle = computed(() =>
+    theme.value === 'light' ? { border: 'none', backgroundColor: 'white' } : { border: 'none', backgroundColor: '#2a2a2b' }
+  );
+
+  const bytesForHuman = (bytes: number, decimals = 2) => {
+    const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB'];
+
+    let i = 0;
+
+    // eslint-disable-next-line no-plusplus
+    for (i; bytes > 1024; i++) {
+      bytes /= 1024;
+    }
+
+    return `${parseFloat(bytes.toFixed(decimals))} ${units[i]}`;
+  };
+
+  const onDownload = (record: MaterialData) => downloadFile(record.content, `${props.data.song_name}(${record.title})`);
+
+  const onViewLyric = (lyric: string) => {
+    Modal.open({
+      content: () => h(Textarea, { defaultValue: lyric, autoSize: { maxRows: 20 }, style: lyricStyle.value }),
+      footer: false,
+      closable: false,
+    });
+  };
+
+  const materials = computed((): MaterialData[] => {
+    return [
+      {
+        title: '导唱',
+        type: 'guide',
+        content: props.data.expand?.guide_source?.url || '',
+      },
+      {
+        title: '伴唱',
+        type: 'karaoke',
+        content: props.data.expand?.karaoke_source?.url || '',
+      },
+      {
+        title: '分轨文件',
+        type: 'track',
+        content: props.data.expand?.track_source?.url || '',
+        name: props.data.expand?.track_source?.name || '',
+        size: bytesForHuman(props.data.expand?.track_source?.size || 0),
+      },
+      { title: '歌词', type: 'Lyric', content: props.data.lyric },
+    ];
+  });
+</script>
+
+<template>
+  <a-table row-key="type" :data="materials" :bordered="false" :table-layout-fixed="true" :pagination="false">
+    <template #columns>
+      <a-table-column title="物料类型" align="center" data-index="title" :width="140" />
+      <a-table-column title="音频播放" data-index="content">
+        <template #cell="{ record }">
+          <template v-if="record.content">
+            <audio-player v-if="['guide', 'karaoke'].indexOf(record.type) !== -1" :name="record.type" :url="record.content" />
+            <div v-if="record.type === 'track'">{{ [record.name, record.size].join('，') }}</div>
+          </template>
+        </template>
+      </a-table-column>
+      <a-table-column title="操作" align="center" :width="200">
+        <template #cell="{ record }">
+          <template v-if="record.content">
+            <a-button v-if="record.type === 'Lyric'" type="primary" size="small" @click="onViewLyric(record.content)">查看</a-button>
+            <a-button v-else type="primary" size="small" @click="onDownload(record)">下载</a-button>
+          </template>
+        </template>
+      </a-table-column>
+    </template>
+  </a-table>
+</template>
+
+<style scoped lang="less"></style>

+<template>
+  <FilterSearch :loading="loading" :model="filter" :inline="true" @search="onSearch" @reset="onReset">
+    <FilterSearchItem label="用户艺名">
+      <Input v-model="filter.searchUser" allow-clear placeholder="请搜索" />
+    </FilterSearchItem>
+    <FilterSearchItem label="经纪人">
+      <Input v-model="filter.searchBusiness" allow-clear placeholder="请搜索" />
+    </FilterSearchItem>
+    <FilterSearchItem label="试唱方式">
+      <Select v-model="filter.mode" :options="modeOption" allow-clear placeholder="请筛选" />
+    </FilterSearchItem>
+    <template #button>
+      <ExportButton v-permission="['audition-activity-show-submit-user-export']" :on-download="onExport" />
+    </template>
+  </FilterSearch>
+  <FilterTable ref="tableRef" :loading="loading" :on-query="onQuery" :hide-expand-button-on-empty="true">
+    <TableColumn :width="160" data-index="user_id " title="用户艺名">
+      <template #cell="{ record }">
+        <UserInfo v-if="record.children && record.user" :row="record.user" />
+      </template>
+    </TableColumn>
+    <UserTableColumn :width="140" data-index="business_id" user="business" title="队长" dark-value="" show-href />
+    <TableColumn :width="100" data-index="mode" title="试唱方式">
+      <template #cell="{ record }">{{ record.mode === 1 ? '自主上传' : '在线演唱' }}</template>
+    </TableColumn>
+    <TableColumn v-if="usePermission().checkPermission('audition-activity-show-submit-user-view')" title="合作模式" :width="100">
+      <template #cell="{ record }">
+        <template v-if="record.price && record.children">
+          <Link class="link-hover" :hoverable="false" @click="onViewPrice(record.price)">查看报价</Link>
+        </template>
+      </template>
+    </TableColumn>
+    <TableColumn :width="100" data-index="version" title="提交版本">
+      <template #cell="{ record }">
+        <Link class="link-hover" :hoverable="false" icon @click="onDownload(record)">{{ `版本V${record.version}` }}</Link>
+      </template>
+    </TableColumn>
+    <TableColumn :width="460" data-index="demo_url" title="Demo">
+      <template #cell="{ record }">
+        <AudioPlayer :name="record.song_name" :url="record.demo_url" />
+      </template>
+    </TableColumn>
+    <SpaceTableColumn :width="130" fixed="right" title="操作">
+      <template #default="{ record }: { record: ActivityWork }">
+        <template v-if="record.children">
+          <Button v-if="record.status === 1" size="mini" type="primary" status="success">已确认合作</Button>
+          <Button v-else-if="record.status === 2" size="mini">试唱不合适</Button>
+          <Button v-else-if="record.status === 0 && [3, 5].indexOf(record.activity_status) !== -1" size="mini">未采纳</Button>
+          <template v-else-if="record.status === 0 && record.activity_status === 1">
+            <Space v-if="usePermission().checkPermission('audition-activity-show-submit-user-audit')">
+              <Button type="primary" size="mini" @click="onPass(record)">合作</Button>
+              <Button type="primary" status="danger" size="mini" @click="onUnPass(record)">不合适</Button>
+            </Space>
+            <Button v-else size="mini">试唱待确认</Button>
+          </template>
+          <Button v-else size="mini">其他</Button>
+        </template>
+      </template>
+    </SpaceTableColumn>
+  </FilterTable>
+</template>
+
+<script setup lang="ts">
+  import useLoading from '@/hooks/loading';
+  import { onMounted, ref, createVNode } from 'vue';
+  import useActivityApi, { useWorkApi } from '@/http/activity';
+  import { AnyObject, QueryForParams } from '@/types/global';
+  import { Input, Select, Space, Button, TableColumn, TableData, Link } from '@arco-design/web-vue';
+
+  import FilterSearch from '@/components/filter/search.vue';
+  import FilterSearchItem from '@/components/filter/search-item.vue';
+  import FilterTable from '@/components/filter/table.vue';
+  import UserTableColumn from '@/components/filter/user-table-column.vue';
+  import SpaceTableColumn from '@/components/filter/space-table-column.vue';
+  import UserInfo from '@/views/audition/activity-show/components/user-info.vue';
+  import AudioPlayer from '@/components/audio-player/index.vue';
+
+  import { createFormItemVNode, createFormVNode, createModalVNode } from '@/utils/createVNode';
+  import { downloadFile } from '@/http/auth';
+  import { UserSubmitPrice } from '@/utils/model';
+  import { promiseToBoolean } from '@/utils';
+  import { ActivityWork } from '@/types/activity-work';
+  import usePermission from '@/hooks/permission';
+
+  const props = defineProps<{ activityId: number; exportName?: string; queryHook?: () => void }>();
+  const emits = defineEmits<{ (e: 'matchWork', value: ActivityWork): void }>();
+
+  const { loading, setLoading } = useLoading(false);
+  const filter = ref<QueryForParams>({ searchUser: '', searchBusiness: '', mode: '' });
+  const tableRef = ref();
+
+  const { submitUser, getSubmitUserExport } = useActivityApi;
+
+  const modeOption = [
+    { value: 1, label: '自主上传' },
+    { value: 0, label: '在线演唱' },
+  ];
+
+  const onQuery = async (params: AnyObject) => {
+    setLoading(true);
+
+    props.queryHook?.();
+    return submitUser(props.activityId, {
+      ...filter.value,
+      ...params,
+      sortBy: 'id',
+      sortType: 'desc',
+    }).finally(() => {
+      setLoading(false);
+    });
+  };
+
+  const onSearch = () => tableRef.value?.onPageChange(1);
+
+  const onReset = () => {
+    filter.value = {
+      searchUser: '',
+      searchBusiness: '',
+      mode: '',
+      setColumn: [
+        'id',
+        'user_id',
+        'business_id',
+        'share_id',
+        'price_id',
+        'activity_id',
+        'activity_name',
+        'activity_status',
+        'project_id',
+        'submit_at',
+        'mode',
+        'type',
+        'status',
+        'created_at',
+        'demo_url',
+        'version',
+      ],
+      setWith: [
+        'user:id,avatar,nick_name,real_name,identity,email,province,city,company,rate',
+        'business:id,nick_name,identity',
+        'share:id,nick_name,identity',
+        'price:id,value,is_deduct,is_talk,is_accept_address,address_id',
+        'project:id,is_promote',
+        'children:id,user_id,activity_id,mode,version,demo_url',
+      ],
+    };
+    onSearch();
+  };
+
+  onMounted(() => onReset());
+
+  const onExport = async () => getSubmitUserExport(props.activityId, props.exportName as string, filter.value);
+
+  const onDownload = (row: TableData) => {
+    return downloadFile(row.demo_url, `${row.activity_name}-${row.user.nick_name}-V${row.version}`);
+  };
+
+  const onViewPrice = (price: UserSubmitPrice) => {
+    createModalVNode(
+      () =>
+        createFormVNode({ size: 'small', autoLabelWidth: true }, [
+          createFormItemVNode(
+            { label: '唱酬', showColon: true, rowClass: 'mb-0' },
+            price.value.is_reward ? `${price.value.amounts} 元` : '无'
+          ),
+          createFormItemVNode(
+            { label: '分成', showColon: true, rowClass: 'mb-0' },
+            price.value.is_dividend ? `${price.value.ratio}% | ${price.value.year} | ${price.is_deduct ? '抵扣' : '不抵扣'}` : '无'
+          ),
+          createFormItemVNode({ label: '价格是否可谈', showColon: true, rowClass: 'mb-0' }, price.is_talk ? '【可谈】' : '【不可谈】'),
+          createFormItemVNode(
+            { label: '录音地点', showColon: true, rowClass: 'mb-0' },
+            `${[price.address?.parent?.name, price.address?.name].join('/')}${
+              price.is_accept_address ? '【接受其他录音地点】' : '【不接受其他录音地点】'
+            }`
+          ),
+        ]),
+      { title: '用户报价', hideCancel: true, bodyStyle: { padding: '8px 20px' }, okText: '我知道了' }
+    );
+  };
+
+  const onPass = (row: TableData) => {
+    const itemStyle = { lineHeight: '28px', margin: '4px 0' };
+
+    return createModalVNode(
+      () =>
+        createVNode('ol', {}, [
+          createVNode('li', { style: itemStyle }, '此条Demo的状态将变更为合作状态'),
+          createVNode('li', { style: itemStyle }, `活动《${row.activity_name}》的状态变更为完成状态！`),
+        ]),
+      {
+        title: '确认合作',
+        bodyStyle: { padding: 0 },
+        onBeforeOk: () => promiseToBoolean(useWorkApi.changeStatus(row.id, { status: 1 })),
+        onOk: () => {
+          tableRef.value?.onFetch();
+          emits('matchWork', row as ActivityWork);
+        },
+      }
+    );
+  };
+
+  const onUnPass = (row: TableData) =>
+    createModalVNode(`请确认是否将用户：${row.user.nick_name} 提交的《版本V${row.version}》标记为不合适,并反馈给用户？`, {
+      title: '不适合标记',
+      onBeforeOk: () => promiseToBoolean(useWorkApi.changeStatus(row.id, { status: 2, remark: '' })),
+      onOk: () => tableRef.value?.onFetch(),
+    });
+</script>
+
+<style scoped lang="less">
+  .prop {
+    display: flex;
+    align-items: flex-start;
+  }
+
+  .prop-label {
+    font-weight: bold;
+    width: 80px;
+    text-align: right;
+  }
+
+  :deep(.arco-table-cell) {
+    padding: 5px 8px !important;
+
+    :hover {
+      cursor: pointer;
+    }
+
+    & > .arco-table-td-content .arco-btn-size-small {
+      padding: 5px !important;
+    }
+  }
+</style>

+<template>
+  <a-popover position="right">
+    <user-link :user="row as BaseUser" :show-tooltip="false" />
+    <template #content>
+      <p class="prop">
+        <span class="label">邮箱：</span>
+        <span>{{ row.email }}</span>
+      </p>
+      <p class="prop">
+        <span class="label">身份：</span>
+        <span>{{ roleLabel }}</span>
+      </p>
+      <p class="prop">
+        <span class="label">常居地：</span>
+        <span>
+          {{ [row.province, row.city].join('-') }}
+        </span>
+      </p>
+    </template>
+  </a-popover>
+</template>
+
+<script lang="ts" setup>
+  import { computed, toRefs } from 'vue';
+  import { User } from '@/types/user';
+  import { BaseUser } from '@/utils/model';
+
+  const props = defineProps<{
+    row: Pick<User, 'id' | 'nick_name' | 'real_name' | 'email' | 'province' | 'city' | 'company' | 'rate' | 'identity'>;
+  }>();
+  const { row } = toRefs(props);
+
+  const roleLabel = computed(() => {
+    if (row.value.identity === 1) {
+      return '音乐人';
+    }
+    if ([2, 3].includes(row.value.identity)) {
+      return '经纪人';
+    }
+
+    return '未认证';
+  });
+</script>
+
+<style lang="less" scoped>
+  .prop {
+    display: flex;
+    align-items: flex-start;
+
+    .label {
+      font-weight: bold;
+      width: 80px;
+    }
+  }
+</style>

+<script setup lang="ts">
+  import { computed, toRef } from 'vue';
+  import { IconRight } from '@arco-design/web-vue/es/icon';
+  import { useRouter } from 'vue-router';
+
+  const props = defineProps<{ user: { id?: number; nick_name: string; identity?: number } }>();
+
+  const user = toRef(props, 'user');
+
+  const cursor = computed(() => (props.user.id ? 'pointer' : 'default'));
+
+  const router = useRouter();
+  const toUserInfo = () => {
+    switch (user?.value?.identity) {
+      case 0:
+        router.push({ name: 'user-register-show', params: { id: user?.value?.id } });
+        break;
+      case 1:
+        router.push({ name: 'user-singer-show', params: { id: user?.value?.id } });
+        break;
+      case 2:
+      case 3:
+        router.push({ name: 'user-business-show', params: { id: user?.value?.id } });
+        break;
+      default:
+    }
+  };
+</script>
+
+<template>
+  <a-tag class="link" size="small" @click="toUserInfo">
+    <span>{{ user.nick_name }}</span>
+    <IconRight v-if="user.id" style="margin-left: 8px" />
+  </a-tag>
+</template>
+
+<style scoped lang="less">
+  .link:hover {
+    cursor: v-bind(cursor);
+  }
+</style>

+<script setup lang="ts">
+  import { onMounted, ref } from 'vue';
+  import useLoading from '@/hooks/loading';
+  import useActivityApi from '@/http/activity';
+
+  import { Input, Select } from '@arco-design/web-vue';
+  import UserTableColumn from '@/components/filter/user-table-column.vue';
+  import EnumTableColumn from '@/components/filter/enum-table-column.vue';
+  import UserIdentityTableColumn from '@/components/filter/user-identity-table-column.vue';
+  import NumberTableColumn from '@/components/filter/number-table-column.vue';
+  import { AnyObject } from '@/types/global';
+
+  const props = defineProps<{ activityId: number; queryHook?: () => void }>();
+
+  const { loading, setLoading } = useLoading(false);
+  const filter = ref<AnyObject>({});
+  const tableRef = ref();
+
+  const { viewUsers } = useActivityApi;
+
+  const sexOptions = [
+    { value: 1, label: '男' },
+    { value: 2, label: '女' },
+    { value: 0, label: '无' },
+  ];
+
+  const roleOptions = [
+    { value: '0', label: '未认证 ' },
+    { value: '1,3', label: '音乐人' },
+    { value: '2,3', label: '经纪人' },
+  ];
+
+  const scopeOptions = [
+    { value: 0, label: '无' },
+    { value: 1, label: '平台管理员' },
+    { value: 2, label: '厂牌管理员' },
+  ];
+
+  const onQuery = async (params: any) => {
+    setLoading(true);
+    props.queryHook?.();
+    return viewUsers(props.activityId, {
+      ...filter.value,
+      identity:
+        filter.value?.identity
+          ?.toString()
+          .split(',')
+          ?.filter((item) => item !== '') || '',
+      ...params,
+      sortBy: 'last_listen_at',
+      sortType: 'desc',
+    }).finally(() => {
+      setLoading(false);
+    });
+  };
+
+  const onSearch = () => tableRef.value?.onPageChange(1);
+
+  const onReset = () => {
+    filter.value = { nick_name: '', sex: '', identity: '', scope: '' };
+    onSearch();
+  };
+
+  onMounted(() => onReset());
+</script>
+
+<template>
+  <FilterSearch :loading="loading" :model="filter" @search="onSearch" @reset="onReset">
+    <FilterSearchItem label="用户艺名">
+      <Input v-model="filter.nick_name" placeholder="请输入" />
+    </FilterSearchItem>
+    <FilterSearchItem label="性别">
+      <Select v-model="filter.sex" :options="sexOptions" placeholder="请选择" allow-clear />
+    </FilterSearchItem>
+    <FilterSearchItem label="身份">
+      <Select v-model="filter.identity" :options="roleOptions" placeholder="请选择" allow-clear />
+    </FilterSearchItem>
+    <FilterSearchItem label="权限">
+      <Select v-model="filter.scope" :options="scopeOptions" placeholder="请选择" allow-clear />
+    </FilterSearchItem>
+  </FilterSearch>
+  <FilterTable ref="tableRef" :loading="loading" :on-query="onQuery">
+    <UserTableColumn title="用户艺名" data-index="id" :width="260" show-href show-avatar />
+    <EnumTableColumn title="性别" data-index="sex" :width="100" :option="sexOptions" :dark-value="0" />
+    <UserIdentityTableColumn title="身份" data-index="identity" :width="100" />
+    <EnumTableColumn title="权限" data-index="scope" :width="120" :option="scopeOptions" :dark-value="0" />
+    <NumberTableColumn title="试听歌曲数量" data-index="listen_count" :width="120" :dark-value="0" />
+    <NumberTableColumn title="收藏歌曲数量" data-index="collection_count" :width="120" :dark-value="0" />
+    <NumberTableColumn title="试唱歌曲数量" data-index="submit_work" :width="120" :dark-value="0" />
+    <FilterTableColumn title="最后试听时间" data-index="last_listen_at" :width="180" />
+  </FilterTable>
+</template>
+
+<style scoped lang="less"></style>

+<template>
+  <page-view has-bread>
+    <BasicCard :data="activity" :loading="!activity" />
+
+    <a-card v-if="tabKeys.length" :bordered="false" style="margin-top: 20px">
+      <a-tabs v-model:active-key="tabKey" :animation="true" :justify="true" :header-padding="false" type="rounded" size="small">
+        <a-tab-pane v-if="checkPermission('submit-user')" key="submit-user" :title="`参与试唱(${total.submit_total})`">
+          <submit-table
+            :activity-id="activityKey"
+            :export-name="activity.song_name"
+            :query-hook="syncSubmitCount"
+            @match-work="syncActivity"
+          />
+        </a-tab-pane>
+        <a-tab-pane v-if="checkPermission('match-user')" key="match-user" :title="`合作用户(${total.match_total})`">
+          <match-table :activity-id="activityKey" :query-hook="syncMatchCount" />
+        </a-tab-pane>
+        <a-tab-pane v-if="checkPermission('material')" key="material" title="物料列表">
+          <MaterialTable :data="activity" />
+        </a-tab-pane>
+        <a-tab-pane v-if="checkPermission('view-user')" key="view-user" :title="`试听用户(${total.view_total})`">
+          <view-user-table :activity-id="activityKey" :query-hook="syncViewCount" />
+        </a-tab-pane>
+        <a-tab-pane v-if="checkPermission('like-user')" key="like-user" :title="`收藏用户(${total.like_total})`">
+          <like-user-table :activity-id="activityKey" :query-hook="syncLikeCount" />
+        </a-tab-pane>
+        <a-tab-pane v-if="checkPermission('out-manage')" key="out-manage" :title="`外部管理员(${total.manager_total})`">
+          <manager-table :activity-id="activityKey" :query-hook="syncManagerCount" />
+        </a-tab-pane>
+        <a-tab-pane v-if="checkPermission('operation-log')" key="operation-log" title="操作日志">
+          <operation-table :filter="{ activity_id: activityKey }" :has-search="false" :show-guard="false" />
+        </a-tab-pane>
+      </a-tabs>
+    </a-card>
+  </page-view>
+</template>
+
+<script lang="ts" setup>
+  import { onBeforeRouteLeave, useRoute, useRouter } from 'vue-router';
+  import { computed, onMounted, ref } from 'vue';
+  import { useRouteQuery } from '@vueuse/router';
+  import useActivityApi from '@/http/activity';
+
+  import BasicCard from '@/views/audition/activity-show/components/basic-card.vue';
+  import MaterialTable from '@/views/audition/activity-show/components/material-table.vue';
+  import SubmitTable from '@/views/audition/activity-show/components/submit-table.vue';
+  import MatchTable from '@/views/audition/activity-show/components/match-table.vue';
+  import OperationTable from '@/views/system/logs/components/query-table.vue';
+  import ViewUserTable from '@/views/audition/activity-show/components/view-user-table.vue';
+  import LikeUserTable from '@/views/audition/activity-show/components/like-user-table.vue';
+  import ManagerTable from '@/views/audition/activity-show/components/manager-table.vue';
+  import { isArray } from '@/utils/is';
+  import usePermission from '@/hooks/permission';
+
+  const routeName = useRoute()?.name as string;
+
+  const checkPermission = (permission: string | string[]): boolean => {
+    return usePermission().checkPermission(
+      isArray(permission) ? permission.map((item) => `${routeName}-${item}`) : `${routeName}-${permission}`
+    );
+  };
+
+  const tabKeys = computed((): string[] =>
+    ['submit-user', 'match-user', 'material', 'view-user', 'like-user', 'out-manage', 'operation-log'].filter((item) =>
+      checkPermission(item)
+    )
+  );
+
+  const tabKey = useRouteQuery('tabKey', tabKeys.value[0] || '');
+
+  const activityKey = Number(useRoute().params?.id);
+
+  const activity = ref<any>({});
+
+  const total = ref({ submit_total: 0, match_total: 0, view_total: 0, like_total: 0, manager_total: 0 });
+
+  const syncSubmitCount = () =>
+    useActivityApi.submitUser(activityKey, { pageSize: 1, limit: 1 }).then(({ meta }) => (total.value.submit_total = meta.total));
+
+  const syncMatchCount = () =>
+    useActivityApi.matchUser(activityKey, { pageSize: 1, limit: 1 }).then(({ meta }) => (total.value.match_total = meta.total));
+
+  const syncViewCount = () =>
+    useActivityApi.viewUsers(activityKey, { pageSize: 1, limit: 1 }).then(({ meta }) => (total.value.view_total = meta.total));
+
+  const syncLikeCount = () =>
+    useActivityApi.likeUsers(activityKey, { pageSize: 1, limit: 1 }).then(({ meta }) => (total.value.like_total = meta.total));
+
+  const syncManagerCount = () =>
+    useActivityApi.manageUsers(activityKey, { pageSize: 1, limit: 1 }).then(({ meta }) => (total.value.manager_total = meta.total));
+
+  const syncActivity = () =>
+    useActivityApi
+      .show(activityKey, {
+        songType: 1,
+        setWith: [
+          'project:id,name,is_promote,is_can_manage',
+          'tags:id,name',
+          'user:id,nick_name,real_name,identity',
+          'links:id,nick_name,identity',
+        ],
+        setColumn: [
+          'id',
+          'song_name',
+          'cover',
+          'sub_title',
+          'lyric',
+          'clip_lyric',
+          'expand',
+          'status',
+          'estimate_release_at',
+          'created_at',
+          'song_type',
+          'project_id',
+          'user_id',
+        ],
+      })
+      .then((data) => {
+        activity.value = data;
+      });
+
+  const router = useRouter();
+  onMounted(() => syncActivity().catch(() => router.replace({ name: 'exception-404' })));
+
+  onBeforeRouteLeave((to, from) => {
+    if (from.meta.from === to.name) {
+      to.meta.reload = false;
+    }
+  });
+</script>
+
+<style scoped></style>

+<template>
+  <page-view has-bread has-card>
+    <filter-search :model="filter" :loading="loading" @search="onSearch" @reset="onReset">
+      <filter-search-item label="歌曲名称" field="song_name">
+        <a-input v-model="filter.songName" allow-clear placeholder="请输入搜索歌曲名称" />
+      </filter-search-item>
+      <filter-search-item v-if="!hideSearchItem?.includes('projectName')" label="厂牌名称" field="projectName">
+        <a-input v-model="filter.projectName" allow-clear placeholder="请输入搜索厂牌名称" />
+      </filter-search-item>
+      <filter-search-item label="标签名称" field="tagName">
+        <a-input v-model="filter.tagName" allow-clear placeholder="请输入搜索标签名称" />
+      </filter-search-item>
+      <!--      <filter-search-item label="推荐权重" field="weight">-->
+      <!--        <a-select v-model="filter.weight" :options="weightOption" allow-clear multiple placeholder="请输入" />-->
+      <!--      </filter-search-item>-->
+      <filter-search-item label="状态" field="status">
+        <a-select v-model="filter.status" :options="statusOption" allow-clear multiple placeholder="请选择搜索状态" />
+      </filter-search-item>
+      <filter-search-item label="创建时间" field="createBetween">
+        <a-range-picker v-model="filter.createBetween" show-time :time-picker-props="{ defaultValue: ['00:00:00', '23:59:59'] }" />
+      </filter-search-item>
+    </filter-search>
+    <filter-table ref="tableRef" :loading="loading" :on-query="onQuery" @row-sort="onSort">
+      <template #tool>
+        <icon-button v-if="checkPermission('create')" icon="plus" label="新增" type="primary" @click="onCreate" />
+      </template>
+      <template #tool-right>
+        <export-button v-if="checkPermission('export')" :on-download="onExport" />
+      </template>
+      <activity-table-column data-index="id" title="试唱歌曲" :width="410" />
+      <number-table-column data-index="view_count" title="试听人数" :dark-value="0" :width="104" has-sort />
+      <number-table-column data-index="like_count" title="收藏人数" :dark-value="0" :width="104" has-sort />
+      <number-table-column data-index="submit_work_count" title="提交人数" :dark-value="0" :width="104" has-sort />
+      <!--      <enum-table-column data-index="weight" :option="weightOption" title="推荐权重" :dark-value="0" :width="100" has-sort />-->
+      <date-table-column data-index="created_at" title="创建时间" :width="100" split has-sort />
+      <date-table-column data-index="audit_at" title="通过时间" :width="100" split has-sort />
+      <date-table-column data-index="match_at" title="确认时间" :width="100" split has-sort />
+      <number-table-column data-index="match_day" title="匹配时间" :width="100" :dark-value="0" suffix="天" has-sort />
+      <enum-table-column data-index="status" title="状态" :option="statusOption" :width="80" has-sort />
+      <space-table-column v-if="hasPermission" :width="80" data-index="operations" fixed="right" title="操作" direction="vertical">
+        <template #default="{ record }">
+          <a-link v-if="checkPermission('show')" class="link-hover" :hoverable="false" @click="onShow(record)"> 查看 </a-link>
+
+          <a-link v-if="record.status === 1 && checkPermission('status')" class="link-hover" :hoverable="false" @click="onDown(record)">
+            下架
+          </a-link>
+          <a-link v-if="record.status === 2 && checkPermission('status')" class="link-hover" :hoverable="false" @click="onUp(record, 'up')">
+            上架
+          </a-link>
+          <a-link
+            v-if="record.status !== 0 && record.status !== 5 && checkPermission('edit')"
+            class="link-hover"
+            :hoverable="false"
+            @click="onUpdate(record)"
+          >
+            编辑
+          </a-link>
+          <a-link
+            v-if="record.status === 3 && checkPermission('status')"
+            class="link-hover"
+            :hoverable="false"
+            @click="onUp(record, 'reUp')"
+          >
+            重新上架
+          </a-link>
+          <a-link v-if="record.status === 3 && checkPermission('status')" class="link-hover" :hoverable="false" @click="onSend(record)">
+            发行
+          </a-link>
+          <a-link v-if="record.status === 5 && checkPermission('edit')" class="link-hover" :hoverable="false" @click="onSend(record)">
+            编辑发行
+          </a-link>
+          <a-link v-if="record.status === 1 && checkPermission('push')" class="link-hover" :hoverable="false" @click="onNotify(record)">
+            推送
+          </a-link>
+          <!--            <delete-button v-if="record.status === 2" :index="rowIndex" :on-delete="() => onDelete(record.id)" :row="record" />-->
+        </template>
+      </space-table-column>
+    </filter-table>
+  </page-view>
+</template>
+
+<script lang="ts" setup>
+  import { createVNode, onMounted, ref, computed } from 'vue';
+  import { Message, TableData } from '@arco-design/web-vue';
+  import { tryOnMounted } from '@vueuse/core';
+  import useActivityApi from '@/http/activity';
+  import { AnyObject, AttributeData } from '@/types/global';
+  import useLoading from '@/hooks/loading';
+  import NumberTableColumn from '@/components/filter/number-table-column.vue';
+  import EnumTableColumn from '@/components/filter/enum-table-column.vue';
+  import SpaceTableColumn from '@/components/filter/space-table-column.vue';
+  import DateTableColumn from '@/components/filter/date-table-column.vue';
+  import ActivityTableColumn from '@/components/filter/activity-table-column.vue';
+  import FormContent from '@/views/audition/activity-audit/components/form-content.vue';
+  import NotifyContent from '@/views/audition/activity-audit/components/step4-form-content.vue';
+
+  import { createFormVNode, createInputFormItemVNode, createInputVNode, createModalVNode } from '@/utils/createVNode';
+  import { useSelectionStore } from '@/store';
+  import { promiseToBoolean } from '@/utils';
+  import openNewTab from '@/utils/route-blank';
+  import { useRoute, useRouter } from 'vue-router';
+  import { isArray } from '@/utils/is';
+  import usePermission from '@/hooks/permission';
+
+  const router = useRouter();
+
+  const checkPermission = (permission: string | string[]): boolean => {
+    let routeName = useRoute().name as string;
+    routeName = routeName === 'audition-activity' ? routeName : `${routeName}-activity`;
+    permission = isArray(permission) ? permission.map((item) => `${routeName}-${item}`) : `${routeName}-${permission}`;
+    return usePermission().checkPermission(permission);
+  };
+  const hasPermission = computed(() => checkPermission(['show', 'status', 'edit', 'push']));
+
+  const props = defineProps<{
+    initFilter?: AttributeData;
+    hideSearchItem?: string[];
+    exportName?: string;
+    createProp?: { initValue?: object; hideField?: string[] };
+    queryHook?: () => void;
+  }>();
+
+  const { statusOption, get, getExport, create, update, notify, changeStatus } = useActivityApi;
+
+  const tableRef = ref();
+  const { loading, setLoading } = useLoading(false);
+  const filter = ref<AttributeData>({});
+
+  const onQuery = async (params?: AnyObject) => {
+    setLoading(true);
+    props.queryHook?.();
+    return get({
+      createdForm: [0, 1],
+      ...filter.value,
+      ...params,
+      setColumn: [
+        'id',
+        'song_name',
+        'cover',
+        'lang',
+        'speed',
+        'sub_title',
+        'sex',
+        'user_id',
+        'project_id',
+        'send_url',
+        'match_day',
+        'send_url',
+        'lyric',
+        'clip_lyric',
+        'is_push',
+        'is_official',
+        'mark',
+        'expand',
+        'weight',
+        'status',
+        'estimate_release_at',
+        'audit_at',
+        'created_at',
+        'match_at',
+        'match_day',
+      ],
+      setWith: [
+        'project:id,name',
+        'user:id,real_name,nick_name,identity',
+        'tags:id,name',
+        'outSideManages:id,user_id,activity_id,permission',
+      ],
+      setWithCount: ['viewUsers as view_count', 'collectionUsers as like_count', 'submitUsers as submit_work_count'],
+    }).finally(() => setLoading(false));
+  };
+
+  const onSort = (column: string, type: string) => {
+    filter.value.setSort = type ? [(type === 'desc' ? '-' : '') + column, '-id'] : ['-audit_at', '-id'];
+    tableRef.value?.onFetch();
+  };
+
+  const onSearch = () => tableRef.value?.onPageChange(1);
+
+  const onReset = () => {
+    filter.value = {
+      songType: 1,
+      songName: '',
+      projectName: '',
+      weight: [],
+      tagName: '',
+      status: [],
+      createBetween: [],
+      ...props.initFilter,
+      setSort: ['-audit_at'],
+    };
+    tableRef.value?.resetSort();
+    onSearch();
+  };
+
+  onMounted(() => onReset());
+  tryOnMounted(async () => useSelectionStore().queryAll());
+
+  const onExport = () => getExport(props.exportName || '试唱', filter.value);
+  const onShow = (record: TableData) => openNewTab(router, 'audition-activity-show', { id: record.id });
+
+  const onCreate = () => {
+    const formVal = { is_push: 1, created_form: 1, song_type: 1, ...props.createProp?.initValue };
+    const dialog = createModalVNode(
+      () =>
+        createVNode(FormContent, {
+          initValue: formVal,
+          hideField: props.createProp?.hideField,
+          submit: (value: AttributeData) =>
+            create(value).then((data) => {
+              Message.success(`添加活动：${data.song_name}`);
+              tableRef.value?.onFetch();
+              dialog.close();
+            }),
+        }),
+      {
+        title: '创建活动',
+        titleAlign: 'center',
+        width: 'auto',
+        closable: true,
+        footer: false,
+      }
+    );
+  };
+
+  const onUpdate = (record: TableData) => {
+    const dialog = createModalVNode(
+      () =>
+        createVNode(FormContent, {
+          maxStep: 3,
+          initValue: record,
+          submit: (value: AttributeData) =>
+            update(record.id, Object.assign(value, { song_type: 1 })).then((data) => {
+              Message.success(`编辑歌曲：${data.song_name}`);
+              tableRef.value?.onFetch();
+              dialog.close?.();
+            }),
+        }),
+      {
+        title: '编辑歌曲',
+        titleAlign: 'center',
+        width: 'auto',
+        closable: true,
+        footer: false,
+      }
+    );
+  };
+
+  const onDown = (record: TableData) => {
+    const msg = ref<string>('');
+
+    createModalVNode(
+      () =>
+        createInputVNode(msg, {
+          'placeholder': '请输入下架原因',
+          'maxLength': 20,
+          'show-word-limit': true,
+        }),
+      {
+        title: '变更状态',
+        titleAlign: 'start',
+        okText: '下架',
+        onBeforeOk: () => promiseToBoolean(changeStatus(record.id, { status: 'down', msg: msg.value })),
+        onOk: () => tableRef.value?.onFetch(),
+      }
+    );
+  };
+
+  const onUp = (record: TableData, status: 'up' | 'reUp') => {
+    createModalVNode(`请确认是否上架活动：${record.song_name}`, {
+      title: '变更状态',
+      titleAlign: 'start',
+      okText: '上架',
+      onBeforeOk: () => promiseToBoolean(changeStatus(record.id, { status })),
+      onOk: () => tableRef.value?.onFetch(),
+    });
+  };
+
+  const onSend = (record: TableData) => {
+    const link = ref(record.send_url?.[0]?.url || '');
+
+    createModalVNode(
+      () =>
+        createFormVNode({ model: link }, [
+          createVNode(
+            'div',
+            { style: { fontFamily: 'PingFangSC-Regular, serif', paddingBottom: '16px', color: '#696969' } },
+            '将歌曲发行平台的url链接回填，会展示在App或小程序应用端。将会给您带来更多播放量 ~'
+          ),
+          createInputFormItemVNode(link, { label: 'QQ音乐或酷狗平台链接', rowClass: 'mb-0', required: true }, { size: 'small' }),
+        ]),
+      {
+        title: link.value.length === 0 ? '发行' : '编辑发行',
+        titleAlign: 'start',
+        width: 'auto',
+        onBeforeOk: () => promiseToBoolean(changeStatus(record.id, { status: 'send', link: link.value })),
+        onOk: () => tableRef.value?.onFetch(),
+      }
+    );
+  };
+
+  const onNotify = (record: TableData) => {
+    const { loading: submitLoading, setLoading } = useLoading(false);
+    const formValue = ref({ is_push: 1, expand: { push_type: [], push_user: [] } });
+    const formRef = ref();
+
+    createModalVNode(
+      () =>
+        createVNode(NotifyContent, {
+          ref: formRef,
+          modelValue: formValue.value,
+          loading: submitLoading.value,
+          hideMode: true,
+          disabledTag: false,
+        }),
+      {
+        title: '推送',
+        titleAlign: 'start',
+        width: '680px',
+        onBeforeOk: () => {
+          return formRef.value?.onValid(() => {
+            setLoading(true);
+            notify(record.id, formValue.value.expand).finally(() => setLoading(false));
+          });
+        },
+      }
+    );
+  };
+</script>
+
+<style scoped></style>

+<script setup lang="ts">
+  import { useSelectionStore } from '@/store';
+
+  import { Layout, LayoutSider, LayoutContent, LayoutFooter, Step, Steps, Space, Divider, Link } from '@arco-design/web-vue';
+  import Step1FormContent from '@/views/audition/demo-apply/components/step1-form-content.vue';
+  import Step2FormContent from '@/views/audition/demo-apply/components/step2-form-content.vue';
+  import Step3FormContent from '@/views/audition/demo-apply/components/step3-form-content.vue';
+  import IconButton from '@/components/icon-button/index.vue';
+
+  import { AnyObject } from '@/types/global';
+  import useLoading from '@/hooks/loading';
+  import { computed, markRaw, ref } from 'vue';
+  import { cloneDeep } from 'lodash';
+
+  const props = defineProps<{
+    initValue: AnyObject;
+    filterProject?: (value: unknown) => boolean;
+    onSubmit: (data: AnyObject) => Promise<any>;
+  }>();
+
+  const { loading, setLoading } = useLoading(false);
+  const formRef = ref();
+  const formValue = ref({ ...cloneDeep(props.initValue) });
+
+  const stepItems = [
+    { value: 1, label: '基本信息', template: markRaw(Step1FormContent) },
+    { value: 2, label: '补充信息', template: markRaw(Step2FormContent) },
+    { value: 3, label: '上传文件', template: markRaw(Step3FormContent) },
+  ];
+
+  const currentStep = ref(1);
+  const currentContent = computed(() => stepItems.find((item) => item.value === currentStep.value)?.template);
+  const nextBtnLabel = computed(() => (currentStep.value === 3 ? '提交' : '下一步'));
+
+  const onPrev = (): void => {
+    currentStep.value = Math.max(1, currentStep.value - 1);
+  };
+
+  const onNext = () => {
+    formRef.value.onValid(async () => {
+      if (currentStep.value === stepItems.length) {
+        setLoading(true);
+        props.onSubmit(formValue.value).finally(() => setLoading(false));
+      }
+      currentStep.value = Math.min(stepItems.length, currentStep.value + 1);
+    });
+  };
+</script>
+
+<template>
+  <Layout>
+    <Layout has-sider>
+      <LayoutSider :width="120" class="aside">
+        <Steps :current="currentStep" direction="vertical" :small="true">
+          <Step v-for="item in stepItems" :key="item.value">{{ item.label }}</Step>
+        </Steps>
+      </LayoutSider>
+      <LayoutContent class="main">
+        <component :is="currentContent" ref="formRef" v-model="formValue" v-model:loading="loading" :filter-project="filterProject" />
+      </LayoutContent>
+    </Layout>
+    <LayoutFooter>
+      <Divider style="margin-top: 8px; margin-bottom: 20px" />
+      <Link :href="useSelectionStore().lyricTool" :hoverable="false" class="link-hover" icon>歌词制作工具</Link>
+      <Space style="float: right">
+        <IconButton v-show="currentStep !== 1" icon="left" label="上一步" @click="onPrev" />
+        <IconButton icon="right" icon-align="right" :loading="loading" :label="nextBtnLabel" @click="onNext" />
+      </Space>
+    </LayoutFooter>
+  </Layout>
+</template>
+
+<style scoped lang="less">
+  .aside {
+    box-shadow: unset !important;
+    border-right: 1px solid var(--color-border);
+    margin-right: 20px;
+    background-color: transparent;
+  }
+
+  .main {
+    min-width: 640px;
+  }
+</style>

+<script setup lang="ts">
+  import { Form, FormItem, Input } from '@arco-design/web-vue';
+  import { computed, ref } from 'vue';
+  import AvatarUpload from '@/components/avatar-upload/index.vue';
+  import TagSelect from '@/components/tag-select/index.vue';
+  import { FieldRule, FormInstance } from '@arco-design/web-vue/es/form';
+  import { get, set } from 'lodash';
+  import { useVModels } from '@vueuse/core';
+  import ProjectSelect from '@/components/project-select/index.vue';
+
+  const props = withDefaults(defineProps<{ loading?: boolean; modelValue?: any; filterProject?: (value: any) => boolean }>(), {
+    filterProject: () => true,
+  });
+
+  const emits = defineEmits(['update:modelValue', 'update:loading']);
+
+  const formRef = ref<FormInstance>();
+  const { modelValue: formValue } = useVModels(props, emits);
+
+  const formRule = {
+    'cover': [{ type: 'string', required: true, message: '请上传活动封面' }],
+    'song_name': [{ type: 'string', required: true, message: '请输入歌曲名称' }],
+    'expand.tag_ids': [
+      { type: 'array', required: false, message: '请选择关联标签' },
+      { type: 'array', maxLength: 3, message: '关联标签最多选中3个' },
+    ],
+    'project_id': [{ type: 'number', min: 1, required: true, message: '请选择关联厂牌' }],
+  } as Record<string, FieldRule[]>;
+
+  const tagIds = computed({
+    get: () => get('expand.tag_ids', []),
+    set: (val) => set(formValue.value, 'expand.tag_ids', val),
+  });
+
+  defineExpose({
+    onValid: (callback?: () => void) => formRef.value?.validate((errors) => !errors && callback?.()),
+  });
+</script>
+
+<template>
+  <Form ref="formRef" :model="formValue" :rules="formRule" :auto-label-width="true" size="small">
+    <FormItem label="封面图片 " field="cover" :show-colon="true">
+      <AvatarUpload v-model="formValue.cover" :size="100" shape="square" />
+    </FormItem>
+    <FormItem label="歌曲名称" field="song_name" :show-colon="true">
+      <Input v-model="formValue.song_name" :max-length="100" :show-word-limit="true" placeholder="请输入" />
+    </FormItem>
+    <FormItem label="曲风标签" field="expand.tag_ids" :show-colon="true">
+      <TagSelect v-model="tagIds" :multiple="true" :limit="3" placeholder="请选择" limit-error-msg="关联标签最多选中3个" />
+    </FormItem>
+    <FormItem v-if="formValue.created_form !== 2" label="关联厂牌" field="project_id" :show-colon="true">
+      <ProjectSelect v-model="formValue.project_id" :filtrate="filterProject" />
+    </FormItem>
+  </Form>
+</template>
+
+<style scoped lang="less"></style>

+<script setup lang="ts">
+  import { Form, FormItem, InputTag } from '@arco-design/web-vue';
+  import UserSelect from '@/components/user-select/index.vue';
+
+  import { ref, computed } from 'vue';
+  import { FieldRule, FormInstance } from '@arco-design/web-vue/es/form';
+  import { useVModels } from '@vueuse/core';
+  import { get, set } from 'lodash';
+
+  const props = defineProps<{ loading?: boolean; modelValue?: any }>();
+  const emits = defineEmits(['update:modelValue', 'update:loading']);
+
+  const formRef = ref<FormInstance>();
+  const { modelValue: formValue } = useVModels(props, emits);
+
+  const lyricistIds = computed({
+    get: () => get(formValue.value, 'expand.lyricist.ids', []),
+    set: (val) => set(formValue.value, 'expand.lyricist.ids', val),
+  });
+
+  const lyricistSupplement = computed({
+    get: () => get(formValue.value, 'expand.lyricist.supplement', []),
+    set: (val) => set(formValue.value, 'expand.lyricist.supplement', val),
+  });
+
+  const composerIds = computed({
+    get: () => get(formValue.value, 'expand.composer.ids', []),
+    set: (val) => set(formValue.value, 'expand.composer.ids', val),
+  });
+
+  const composerSupplement = computed({
+    get: () => get(formValue.value, 'expand.composer.supplement', []),
+    set: (val) => set(formValue.value, 'expand.composer.supplement', val),
+  });
+
+  const checkMaxUser = (value: any, cb: (error?: string) => void) => (value && value.length > 2 ? cb('最大选择2人') : false);
+
+  const formRule = {
+    'expand.lyricist.supplement': [{ type: 'array', validator: (value, cb) => checkMaxUser(value, cb) }],
+    'expand.composer.supplement': [{ type: 'array', validator: (value, cb) => checkMaxUser(value, cb) }],
+    'estimate_release_at': [{ required: true, message: '请选择预计发布时间' }],
+  } as Record<string, FieldRule[]>;
+
+  defineExpose({
+    onValid: (callback?: () => void) => formRef.value?.validate((errors) => !errors && callback?.()),
+  });
+</script>
+
+<template>
+  <Form ref="formRef" :model="formValue" :rules="formRule" :auto-label-width="true" size="small">
+    <FormItem label="词作者(用户)" field="expand.lyricist.ids" :show-colon="true">
+      <UserSelect v-model="lyricistIds" placeholder="请选择用户" :multiple="true" :allow-search="true" :limit="2" />
+    </FormItem>
+    <FormItem label="词作者(未注册)" field="expand.lyricist.supplement" :show-colon="true">
+      <InputTag v-model="lyricistSupplement" placeholder="输入完成回车键分隔" :max-tag-count="2" :unique-value="true" />
+      <template #extra>
+        <div>注意：上方填1项即可，歌曲信息中【用户】可点击跳转用户主页，【未注册】仅显示；</div>
+      </template>
+    </FormItem>
+    <FormItem label="曲作者(用户)" field="expand.composer.ids" :show-colon="true">
+      <UserSelect v-model="composerIds" placeholder="请选择用户" :multiple="true" :allow-search="true" :limit="2" />
+    </FormItem>
+    <FormItem label="曲作者(未注册)" field="expand.composer.supplement" :show-colon="true">
+      <InputTag v-model="composerSupplement" placeholder="输入完成回车键分隔" :max-tag-count="2" :unique-value="true" />
+      <template #extra>
+        <div>注意：上方填1项即可，歌曲信息中【用户】可点击跳转用户主页，【未注册】仅显示；</div>
+      </template>
+    </FormItem>
+  </Form>
+</template>
+
+<style scoped lang="less"></style>

+<script setup lang="ts">
+  import { ref, computed } from 'vue';
+  import { FieldRule, FormInstance } from '@arco-design/web-vue/es/form';
+  import { useVModels } from '@vueuse/core';
+  import { Form, FormItem, Link, Textarea, TypographyText } from '@arco-design/web-vue';
+  import InputUpload from '@/components/input-upload/index.vue';
+  import { useSelectionStore } from '@/store';
+  import { get, set } from 'lodash';
+  // import axios from 'axios';
+  // import AudioPreview from '@/views/audition/activity-apply/components/audio-preview.vue';
+  import AudioPlayer from '@/components/audio-player/index.vue';
+  // import { createModalVNode } from '@/utils/createVNode';
+  import { downloadFile } from '@/http/auth';
+
+  const props = defineProps<{ loading?: boolean; modelValue?: any }>();
+  const emits = defineEmits(['update:modelValue', 'update:loading']);
+
+  const formRef = ref<FormInstance>();
+  const { loading, modelValue: formValue } = useVModels(props, emits);
+
+  const guideSourceUrl = computed({
+    get: () => get(formValue.value, 'expand.guide_source.url', ''),
+    set: (val) => set(formValue.value, 'expand.guide_source.url', val),
+  });
+
+  const karaokeSourceUrl = computed({
+    get: () => get(formValue.value, 'expand.karaoke_source.url', ''),
+    set: (val) => set(formValue.value, 'expand.karaoke_source.url', val),
+  });
+
+  const onUpdateGuide = (file: { name: string; url: string; size: number }) => {
+    set(formValue.value, 'expand.guide_source', { name: file.name, url: file.url, size: file.size });
+  };
+
+  const onUpdateKaraoke = (file: { name: string; url: string; size: number }) => {
+    set(formValue.value, 'expand.karaoke_source', { name: file.name, url: file.url, size: file.size });
+  };
+
+  const { activityAudioAccept } = useSelectionStore();
+
+  const formRule = {
+    'expand.guide_source.url': [{ required: true, message: '请上传导唱文件' }],
+    'expand.karaoke_source.url': [{ required: false, message: '请上传伴奏文件' }],
+    'lyric': [{ type: 'string', required: true, message: '请填写歌词内容' }],
+    'clip_lyric': [{ type: 'string', required: true, message: '请填写推荐歌词内容' }],
+  } as Record<string, FieldRule[]>;
+
+  const onDownload = (url: string, fileName: string) => downloadFile(url, `${formValue.value.song_name}(${fileName})`);
+
+  const onFormatLyric = (key: string) => {
+    formValue.value[key] = formValue.value[key].replace(/(\n[\s\t]*\r*\n)/g, '\n').replace(/^[\n\r\t]*|[\n\r\t]*$/g, '');
+  };
+
+  const guideFile = ref<File | undefined>();
+
+  // const getGuideFile = async () => {
+  //   if (!guideFile.value) {
+  //     guideFile.value = await axios
+  //       .get(`${guideSourceUrl.value}`, { responseType: 'blob', timeout: 60000 })
+  //       .then(({ data }) => Promise.resolve(data));
+  //   }
+
+  //   return guideFile.value;
+  // };
+
+  // const onAudioPreview = async () => {
+  //   const src = await getGuideFile();
+  //   createModalVNode(() => createVNode(AudioPreview, { src, lyric: formValue.value.lyric }), {
+  //     title: '预览歌词-整首',
+  //     footer: false,
+  //     closable: true,
+  //   });
+  // };
+
+  defineExpose({
+    onValid: (callback?: () => void) => formRef.value?.validate((errors) => !errors && callback?.()),
+  });
+</script>
+
+<template>
+  <Form ref="formRef" :model="formValue" :rules="formRule" :auto-label-width="true" size="small">
+    <FormItem label="音频文件" field="expand.guide_source.url" :show-colon="true">
+      <InputUpload
+        v-model="guideSourceUrl"
+        :accept="activityAudioAccept"
+        :limit="100"
+        @success="onUpdateGuide"
+        @choose-file="(file: any) => (guideFile = file)"
+        @update:loading="(value: boolean) => (loading = value)"
+      />
+    </FormItem>
+    <FormItem v-if="guideSourceUrl">
+      <template #label>
+        <Link icon @click="onDownload(guideSourceUrl, '音频文件')">下载音频</Link>
+      </template>
+      <AudioPlayer name="音频文件" :url="guideSourceUrl" />
+    </FormItem>
+    <FormItem label="伴奏文件" field="expand.karaoke_source.url" :show-colon="true">
+      <InputUpload
+        v-model="karaokeSourceUrl"
+        :accept="activityAudioAccept"
+        :limit="100"
+        @success="onUpdateKaraoke"
+        @update:loading="(value: boolean) => (loading = value)"
+      />
+    </FormItem>
+    <FormItem v-if="karaokeSourceUrl">
+      <template #label>
+        <Link icon @click="onDownload(karaokeSourceUrl, '伴奏文件')">下载伴奏</Link>
+      </template>
+      <AudioPlayer name="伴奏文件" :url="karaokeSourceUrl" />
+    </FormItem>
+    <FormItem class="lyric" label="歌词文本" field="lyric" :show-colon="true">
+      <Textarea
+        v-model="formValue.lyric"
+        :auto-size="{ minRows: 6, maxRows: 6 }"
+        placeholder="请粘贴带时间的lrc歌词文本至输入框"
+        @blur="() => onFormatLyric('lyric')"
+      />
+      <!-- <template #extra>
+        <Link :hoverable="false" :disabled="!guideSourceUrl || !formValue.lyric" @click="onAudioPreview"> 预览歌词</Link>
+      </template> -->
+    </FormItem>
+    <TypographyText type="danger" style="font-size: 13px">
+      注意：demo上架后，存在于您的厂牌私库。需要在App应用内，您的厂牌主页下，进行1对1分享给对方试听
+    </TypographyText>
+  </Form>
+</template>
+
+<style scoped lang="less">
+  .lyric {
+    :deep(.arco-form-item-extra) {
+      width: 100%;
+      text-align: right;
+    }
+  }
+</style>

+<script setup lang="ts">
+  import useLoading from '@/hooks/loading';
+  import { ref } from 'vue';
+  import { AnyObject } from '@/types/global';
+  import { useApplyApi } from '@/http/activity';
+
+  const { loading } = useLoading(false);
+  const filter = ref<AnyObject>({});
+  const tableRef = ref();
+
+  const onSearch = () => tableRef.value?.onPageChange(1);
+
+  const onReset = () => {
+    filter.value = { songName: '', userName: '', projectName: '', tagName: '', auditStatus: '', createBetween: [] };
+    onSearch();
+  };
+</script>
+
+<template>
+  <page-view has-card has-bread>
+    <filter-search :model="filter" :loading="loading" @search="onSearch" @reset="onReset">
+      <filter-search-item field="song_name" label="歌曲名称">
+        <a-input v-model="filter.songName" :allow-clear="true" placeholder="请输入" />
+      </filter-search-item>
+      <filter-search-item field="projectName" label="厂牌名称">
+        <a-input v-model="filter.projectName" :allow-clear="true" placeholder="请输入" />
+      </filter-search-item>
+      <filter-search-item field="tagName" label="标签名称">
+        <a-input v-model="filter.tagName" :allow-clear="true" placeholder="请输入" />
+      </filter-search-item>
+      <filter-search-item field="userName" label="创建人">
+        <a-input v-model="filter.userName" :allow-clear="true" placeholder="请输入" />
+      </filter-search-item>
+      <filter-search-item field="createBetween" label="创建时间">
+        <a-range-picker v-model="filter.createBetween" :allow-clear="true" />
+      </filter-search-item>
+      <filter-search-item field="audit_status" label="状态">
+        <a-select v-model="filter.auditStatus" :options="useApplyApi.statusOption" placeholder="请选择" />
+      </filter-search-item>
+    </filter-search>
+  </page-view>
+</template>
+
+<style scoped lang="less"></style>

+<script setup lang="ts">
+  import { Activity } from '@/types/activity';
+  import { computed } from 'vue';
+  import { User } from '@/types/user';
+  import UserTag from '@/views/audition/activity-show/components/user-tag.vue';
+  import { unionBy } from 'lodash';
+  import useActivityApi from '@/http/activity';
+
+  const props = defineProps<{ data: Activity; loading?: boolean }>();
+
+  const links = computed(() => {
+    return unionBy(props.data.links || [], 'id');
+  });
+
+  const inSideLyricist = computed(
+    (): User[] => links.value?.filter((item: User) => props.data.expand?.lyricist?.ids?.indexOf(item.id) !== -1) || []
+  );
+  const outSideLyricist = computed(() => props.data.expand?.lyricist?.supplement || []);
+
+  const inSideComposer = computed(
+    (): User[] => links.value?.filter((item: User) => props.data.expand?.composer?.ids?.indexOf(item.id) !== -1) || []
+  );
+  const outSideComposer = computed(() => props.data.expand?.composer?.supplement || []);
+
+  const project = computed(() => props.data.project);
+</script>
+
+<template>
+  <a-spin :loading="loading as boolean" style="width: 100%">
+    <a-card :bordered="false">
+      <a-form auto-label-width label-align="left">
+        <a-layout>
+          <a-layout-sider :width="130" style="background: none; box-shadow: none; padding-top: 6px">
+            <a-image show-loader :height="130" :width="130" :src="data.cover" />
+          </a-layout-sider>
+          <a-layout-content style="margin-left: 16px">
+            <a-form-item :hide-label="true">
+              <div class="title">{{ data.song_name }}</div>
+              <a-tag v-for="item in data.tags" :key="item.id" size="small" style="margin-right: 5px">
+                {{ item.name }}
+              </a-tag>
+              <span style="font-size: 10px">
+                {{ useActivityApi.statusOption.find((item) => item.value === data.status)?.label }}
+              </span>
+            </a-form-item>
+            <a-grid :cols="3" :col-gap="12" :row-gap="0">
+              <a-grid-item :span="3">
+                <a-form-item
+                  :label-col-style="{ flex: 0 }"
+                  :wrapper-col-style="{ flex: 'unset', width: 'inherit' }"
+                  :show-colon="true"
+                  :label="project ? '关联厂牌' : '关联用户'"
+                >
+                  <div v-if="project">{{ data.project.name }}</div>
+                  <div v-else> {{ data.user?.nick_name }}</div>
+                </a-form-item>
+              </a-grid-item>
+              <a-grid-item :span="1">
+                <a-form-item :label-col-style="{ flex: 0 }" :show-colon="true" label="作词">
+                  <user-tag v-for="item in inSideLyricist" :key="item.id" :user="{ nick_name: item.nick_name }" style="margin-right: 5px" />
+                  <user-tag
+                    v-for="item in outSideLyricist"
+                    :key="`lyricist-${item}`"
+                    :user="{ nick_name: item }"
+                    style="margin-right: 5px"
+                  />
+                </a-form-item>
+              </a-grid-item>
+              <a-grid-item :span="1">
+                <a-form-item :label-col-style="{ flex: 0 }" :show-colon="true" label="作曲">
+                  <user-tag v-for="item in inSideComposer" :key="item.id" :user="{ nick_name: item.nick_name }" style="margin-right: 5px" />
+                  <user-tag
+                    v-for="item in outSideComposer"
+                    :key="`lyricist-${item}`"
+                    :user="{ nick_name: item }"
+                    style="margin-right: 5px"
+                  />
+                </a-form-item>
+              </a-grid-item>
+              <a-grid-item :span="3">
+                <a-form-item style="margin-bottom: 0 !important" :label-col-style="{ flex: 0 }" :show-colon="true" label="创建信息">
+                  <span v-if="data.user" style="margin-right: 8px">{{ data.user.nick_name }}</span>
+                  <span style="margin-right: 8px">{{ data.created_at }} </span>
+                </a-form-item>
+              </a-grid-item>
+            </a-grid>
+          </a-layout-content>
+        </a-layout>
+      </a-form>
+    </a-card>
+  </a-spin>
+</template>
+
+<style lang="less" scoped>
+  .arco-form-item {
+    margin-bottom: 10px;
+  }
+
+  .arco-form-item-label-col {
+    flex: 0;
+  }
+
+  .title {
+    font-size: 16px;
+    font-weight: bold;
+    margin-right: 8px;
+  }
+
+  .right {
+    margin: 0 20px;
+    min-width: 600px;
+  }
+</style>

+<script setup lang="ts">
+  import { Modal, Textarea } from '@arco-design/web-vue';
+  import { computed, h } from 'vue';
+  import { ActivityExpand } from '@/types/activity-apply';
+  import { useAppStore } from '@/store';
+  import { downloadFile } from '@/http/auth';
+
+  type MaterialData = {
+    title: string;
+    type: string;
+    content: string;
+    name?: string;
+    size?: string;
+  };
+
+  const props = defineProps<{ data: { expand: ActivityExpand; lyric: string; song_name: string }; hideTrack?: boolean }>();
+
+  const appStore = useAppStore();
+  const theme = computed(() => appStore.theme);
+
+  const lyricStyle = computed(() =>
+    theme.value === 'light' ? { border: 'none', backgroundColor: 'white' } : { border: 'none', backgroundColor: '#2a2a2b' }
+  );
+
+  const bytesForHuman = (bytes: number, decimals = 2) => {
+    const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB'];
+
+    let i = 0;
+
+    // eslint-disable-next-line no-plusplus
+    for (i; bytes > 1024; i++) {
+      bytes /= 1024;
+    }
+
+    return `${parseFloat(bytes.toFixed(decimals))} ${units[i]}`;
+  };
+
+  const onDownload = (record: MaterialData) => downloadFile(record.content, `${props.data.song_name}(${record.title})`);
+
+  const onViewLyric = (lyric: string) => {
+    Modal.open({
+      content: () => h(Textarea, { defaultValue: lyric, autoSize: { maxRows: 20 }, style: lyricStyle.value }),
+      footer: false,
+      closable: false,
+    });
+  };
+
+  const materials = computed((): MaterialData[] => {
+    return [
+      {
+        title: '音频',
+        type: 'guide',
+        name: props.data.expand?.guide_source?.name || '',
+        content: props.data.expand?.guide_source?.url || '',
+        size: bytesForHuman(props.data.expand?.guide_source?.size || 0),
+      },
+      {
+        title: '伴奏',
+        type: 'karaoke',
+        name: props.data.expand?.karaoke_source?.name || '',
+        content: props.data.expand?.karaoke_source?.url || '',
+        size: bytesForHuman(props.data.expand?.karaoke_source?.size || 0),
+      },
+      { title: '歌词', type: 'Lyric', content: props.data.lyric },
+    ];
+  });
+</script>
+
+<template>
+  <a-table row-key="type" :data="materials" :bordered="false" :table-layout-fixed="true" :pagination="false">
+    <template #columns>
+      <a-table-column title="物料类型" align="center" data-index="title" :width="140" />
+      <a-table-column title="音频播放" data-index="content">
+        <template #cell="{ record }">
+          <template v-if="record.content">
+            <audio-player v-if="['guide', 'karaoke'].indexOf(record.type) !== -1" :name="record.type" :url="record.content" />
+            <div v-if="record.type === 'track'">{{ [record.name, record.size].join('，') }}</div>
+          </template>
+        </template>
+      </a-table-column>
+      <a-table-column title="操作" align="center" :width="200">
+        <template #cell="{ record }">
+          <template v-if="record.content">
+            <a-button v-if="record.type === 'Lyric'" type="primary" size="small" @click="onViewLyric(record.content)">查看</a-button>
+            <a-button v-else type="primary" size="small" @click="onDownload(record)">下载</a-button>
+          </template>
+        </template>
+      </a-table-column>
+    </template>
+  </a-table>
+</template>
+
+<style scoped lang="less"></style>

+<script setup lang="ts">
+  import { useRoute, useRouter } from 'vue-router';
+  import { computed, onMounted, ref } from 'vue';
+  import useActivityApi from '@/http/activity';
+  import BasicCard from '@/views/audition/demo-show/components/basic-card.vue';
+  import MaterialTable from '@/views/audition/demo-show/components/material-table.vue';
+  import ViewUserTable from '@/views/audition/activity-show/components/view-user-table.vue';
+  import LikeUserTable from '@/views/audition/activity-show/components/like-user-table.vue';
+  import { useRouteQuery } from '@vueuse/router';
+  import usePermission from '@/hooks/permission';
+  import { isArray } from '@/utils/is';
+
+  const routeName = useRoute()?.name as string;
+  const checkPermission = (permission: string | string[]): boolean => {
+    return usePermission().checkPermission(
+      isArray(permission) ? permission.map((item) => `${routeName}-${item}`) : `${routeName}-${permission}`
+    );
+  };
+
+  const tabKeys = computed((): string[] => ['material', 'view-user', 'like-user'].filter((item) => checkPermission(item)));
+
+  const tabKey = useRouteQuery('tabKey', tabKeys.value[0] || '');
+
+  const activityKey = Number(useRoute().params?.id);
+
+  const activity = ref({});
+  const total = ref({ submit_total: 0, match_total: 0, view_total: 0, like_total: 0, manager_total: 0 });
+
+  const syncViewCount = () =>
+    useActivityApi.viewUsers(activityKey, { pageSize: 1, limit: 1 }).then(({ meta }) => (total.value.view_total = meta.total));
+
+  const syncLikeCount = () =>
+    useActivityApi.likeUsers(activityKey, { pageSize: 1, limit: 1 }).then(({ meta }) => (total.value.like_total = meta.total));
+
+  const router = useRouter();
+  onMounted(async () => {
+    await useActivityApi
+      .show(activityKey, {
+        songType: 2,
+        setWith: [
+          'project:id,name,is_promote,is_can_manage',
+          'tags:id,name',
+          'user:id,nick_name,real_name,identity',
+          'links:id,nick_name,identity',
+        ],
+        setColumn: ['id', 'song_name', 'cover', 'lyric', 'expand', 'status', 'created_at', 'song_type', 'project_id', 'user_id'],
+      })
+      .then((data) => {
+        activity.value = data;
+      })
+      .catch(() => router.replace({ name: 'exception-404' }));
+  });
+</script>
+
+<template>
+  <page-view has-bread>
+    <basic-card :loading="!activity" :data="activity" />
+
+    <a-card v-if="tabKeys.length" :bordered="false" style="margin-top: 20px">
+      <a-tabs v-model:active-key="tabKey" :animation="true" :justify="true" :header-padding="false" type="rounded" size="small">
+        <a-tab-pane v-if="checkPermission('material')" key="material" title="物料列表">
+          <MaterialTable :data="activity" />
+        </a-tab-pane>
+        <a-tab-pane v-if="checkPermission('view-user')" key="view-user" :title="`试听用户(${total.view_total})`">
+          <view-user-table :activity-id="activityKey" :query-hook="syncViewCount" />
+        </a-tab-pane>
+        <a-tab-pane v-if="checkPermission('like-user')" key="like-user" :title="`收藏用户(${total.like_total})`">
+          <like-user-table :activity-id="activityKey" :query-hook="syncLikeCount" />
+        </a-tab-pane>
+      </a-tabs>
+    </a-card>
+  </page-view>
+</template>
+
+<style lang="less" scoped>
+  textarea.arco-textarea::-webkit-scrollbar {
+    display: none;
+  }
+</style>

+<script setup lang="ts">
+  import { computed, createVNode, onMounted, ref } from 'vue';
+  import useLoading from '@/hooks/loading';
+  import { AnyObject, AttributeData, QueryForParams } from '@/types/global';
+  import { useRoute, useRouter } from 'vue-router';
+  import { isArray } from '@/utils/is';
+  import usePermission from '@/hooks/permission';
+  import useActivityApi, { useApplyApi } from '@/http/activity';
+  import NumberTableColumn from '@/components/filter/number-table-column.vue';
+  import ActivityTableColumn from '@/components/filter/activity-table-column.vue';
+  import DateTableColumn from '@/components/filter/date-table-column.vue';
+  import EnumTableColumn from '@/components/filter/enum-table-column.vue';
+  import SpaceTableColumn from '@/components/filter/space-table-column.vue';
+  import ActivityForm from '@/views/audition/demo-apply/components/form-content.vue';
+  import { Message, TableData } from '@arco-design/web-vue';
+  import { createInputVNode, createModalVNode } from '@/utils/createVNode';
+  import { promiseToBoolean } from '@/utils';
+  import openNewTab from '@/utils/route-blank';
+  import { useSelectionStore } from '@/store';
+  import { Project } from '@/utils/model';
+  import { tryOnMounted } from '@vueuse/core';
+  import { split } from 'lodash';
+
+  const router = useRouter();
+
+  const checkPermission = (permission: string | string[]): boolean => {
+    let routeName = useRoute().name as string;
+    routeName = routeName === 'audition-demo' ? routeName : `${routeName}-demo`;
+    permission = isArray(permission) ? permission.map((item) => `${routeName}-${item}`) : `${routeName}-${permission}`;
+    return usePermission().checkPermission(permission);
+  };
+  const hasPermission = computed(() => checkPermission(['show', 'status', 'edit']));
+
+  const { statusOption, get, getExport, update, changeStatus } = useActivityApi;
+
+  const platformOption = [
+    { label: '厂牌Demo', value: '0,1' },
+    { label: '个人Demo', value: '2' },
+  ];
+
+  const tableRef = ref();
+  const { loading, setLoading } = useLoading(false);
+  const filter = ref<QueryForParams>({});
+
+  const props = withDefaults(
+    defineProps<{
+      initFilter?: AttributeData;
+      hideSearchItem?: string[];
+      hideColumnItem?: string[];
+      exportName?: string;
+      createProp?: object;
+      queryHook?: () => void;
+    }>(),
+    {
+      hideSearchItem: ['createBetween'] as any,
+    }
+  );
+
+  const onQuery = async (params?: AnyObject) => {
+    setLoading(true);
+    props.queryHook?.();
+    return get({
+      ...filter.value,
+      ...params,
+      createdForm: filter.value.createdForm ? split(filter.value.createdForm as string, ',') : [],
+      setColumn: [
+        'id',
+        'song_name',
+        'cover',
+        'lang',
+        'speed',
+        'sub_title',
+        'sex',
+        'user_id',
+        'project_id',
+        'send_url',
+        'match_day',
+        'send_url',
+        'lyric',
+        'clip_lyric',
+        'is_push',
+        'is_official',
+        'mark',
+        'expand',
+        'weight',
+        'status',
+        'estimate_release_at',
+        'audit_at',
+        'created_at',
+        'created_form',
+        'match_at',
+        'match_day',
+      ],
+      setWith: [
+        'project:id,name',
+        'user:id,real_name,nick_name,identity',
+        'tags:id,name',
+        'outSideManages:id,user_id,activity_id,permission',
+      ],
+      setWithCount: ['viewUsers as view_count', 'collectionUsers as like_count'],
+    }).finally(() => setLoading(false));
+  };
+
+  const onSort = (column: string, type: string) => {
+    filter.value.setSort = type ? [(type === 'desc' ? '-' : '') + column, '-id'] : ['-audit_at', '-id'];
+    tableRef.value?.onFetch();
+  };
+
+  const onSearch = () => tableRef.value?.onPageChange(1);
+
+  const onReset = () => {
+    filter.value = {
+      songName: '',
+      projectName: '',
+      tagName: '',
+      userName: '',
+      createdForm: '',
+      status: [],
+      createBetween: [],
+      ...props.initFilter,
+      songType: 2,
+      setSort: ['-audit_at'],
+    };
+    tableRef.value?.resetSort();
+    onSearch();
+  };
+
+  onMounted(() => onReset());
+  tryOnMounted(async () => useSelectionStore().queryAll());
+
+  const onExport = () =>
+    getExport(props.exportName || 'Demo', {
+      ...filter.value,
+      createdForm: filter.value.createdForm ? split(filter.value.createdForm as string, ',') : [],
+    });
+  const onShow = (record: TableData) => openNewTab(router, 'audition-demo-show', { id: record.id });
+
+  const onDown = (record: TableData) => {
+    const msg = ref<string>('');
+
+    createModalVNode(() => createInputVNode(msg, { 'placeholder': '请输入下架原因', 'maxLength': 20, 'show-word-limit': true }), {
+      title: '变更状态',
+      titleAlign: 'start',
+      okText: '下架',
+      onBeforeOk: () => promiseToBoolean(changeStatus(record.id, { status: 'down', msg: msg.value })),
+      onOk: () => tableRef.value?.onFetch(),
+    });
+  };
+
+  const onUp = (record: TableData, status: 'up' | 'reUp') => {
+    createModalVNode(`请确认是否上架Demo：${record.song_name}`, {
+      title: '变更状态',
+      titleAlign: 'start',
+      okText: '上架',
+      onBeforeOk: () => promiseToBoolean(changeStatus(record.id, { status })),
+      onOk: () => tableRef.value?.onFetch(),
+    });
+  };
+  const onCreate = () => {
+    const dialog = createModalVNode(
+      () =>
+        createVNode(ActivityForm, {
+          initValue: { song_type: 2, cover: useSelectionStore().appleDemoCover, created_form: 1, is_push: 0, expand: { push_type: [] } },
+          filterProject: (value: Project) => value.is_can_demo_apply === 1,
+          onSubmit: (data: AnyObject) =>
+            useApplyApi.create(data).then(() => {
+              Message.success(`申请上架Demo：${data.song_name}`);
+              tableRef.value?.onFetch();
+              dialog.close();
+            }),
+        }),
+      { title: '创建Demo', footer: false, closable: true, width: 'auto' }
+    );
+  };
+
+  const onUpdate = (record: TableData) => {
+    const dialog = createModalVNode(
+      () =>
+        createVNode(ActivityForm, {
+          initValue: record,
+          filterProject: (value: Project) => value.is_can_demo_apply === 1 || value.id === record.project_id,
+          onSubmit: (attribute: AnyObject) =>
+            update(record.id, Object.assign(attribute, { song_type: 2 })).then(() => {
+              Message.success(`编辑Demo：${record.song_name}`);
+              tableRef.value?.onFetch();
+              dialog.close();
+            }),
+        }),
+      { title: '编辑Demo', footer: false, width: 'auto', closable: true }
+    );
+  };
+
+  const onDelete = (row: TableData) =>
+    createModalVNode(`确认要将Demo：${row.song_name} 删除吗？`, {
+      title: '删除操作',
+      onBeforeOk: () => promiseToBoolean(useActivityApi.destroy(row.id)),
+      onOk: () => tableRef.value?.onFetch(),
+    });
+</script>
+
+<template>
+  <page-view has-bread has-card>
+    <filter-search :model="filter" :loading="loading" @search="onSearch" @reset="onReset">
+      <filter-search-item label="歌曲名称" field="song_name">
+        <a-input v-model="filter.songName" allow-clear placeholder="请输入" />
+      </filter-search-item>
+      <filter-search-item v-if="!hideSearchItem?.includes('projectName')" label="厂牌名称" field="projectName">
+        <a-input v-model="filter.projectName" allow-clear placeholder="请输入" />
+      </filter-search-item>
+      <filter-search-item v-if="!hideSearchItem?.includes('userName')" label="用户名称" field="userName">
+        <a-input v-model="filter.userName" allow-clear placeholder="请输入" />
+      </filter-search-item>
+      <filter-search-item v-if="!hideSearchItem?.includes('createdForm')" label="关联类别" field="createdForm">
+        <a-select v-model="filter.createdForm" :options="platformOption" allow-clear placeholder="请选择" />
+      </filter-search-item>
+      <filter-search-item label="标签名称" field="tagName">
+        <a-input v-model="filter.tagName" allow-clear placeholder="请输入" />
+      </filter-search-item>
+      <filter-search-item label="状态" field="status">
+        <a-select v-model="filter.status" :options="statusOption" allow-clear multiple placeholder="请选择" />
+      </filter-search-item>
+      <filter-search-item v-if="!hideSearchItem?.includes('createBetween')" label="创建时间" field="createBetween">
+        <a-range-picker v-model="filter.createBetween" show-time :time-picker-props="{ defaultValue: ['00:00:00', '23:59:59'] }" />
+      </filter-search-item>
+    </filter-search>
+    <filter-table ref="tableRef" :loading="loading" :on-query="onQuery" @row-sort="onSort">
+      <template #tool>
+        <icon-button v-if="checkPermission('create')" icon="plus" label="新增" type="primary" @click="onCreate" />
+      </template>
+      <template #tool-right>
+        <export-button v-if="checkPermission('export')" :on-download="onExport" />
+      </template>
+      <activity-table-column data-index="id" title="试唱歌曲" :width="420" hide-sub-title />
+      <number-table-column data-index="view_count" title="试听人数" :dark-value="0" :width="110" has-sort />
+      <number-table-column data-index="like_count" title="收藏人数" :dark-value="0" :width="110" has-sort />
+      <date-table-column data-index="created_at" title="创建时间" :width="100" split has-sort />
+      <enum-table-column data-index="status" title="状态" :option="statusOption" :width="80" has-sort />
+      <space-table-column v-if="hasPermission" :width="80" data-index="operations" fixed="right" title="操作" direction="vertical">
+        <template #default="{ record }">
+          <a-link v-if="checkPermission('show')" class="link-hover" :hoverable="false" @click="onShow(record)"> 查看 </a-link>
+          <a-link
+            v-if="record.status !== 0 && record.status !== 5 && checkPermission('edit')"
+            class="link-hover"
+            :hoverable="false"
+            @click="onUpdate(record)"
+          >
+            编辑
+          </a-link>
+          <a-link v-if="record.status === 1 && checkPermission('status')" class="link-hover" :hoverable="false" @click="onDown(record)">
+            下架
+          </a-link>
+          <a-link v-if="record.status === 2 && checkPermission('status')" class="link-hover" :hoverable="false" @click="onUp(record, 'up')">
+            上架
+          </a-link>
+          <a-link v-if="record.status === 2 && checkPermission('delete')" class="link-hover" :hoverable="false" @click="onDelete(record)">
+            删除
+          </a-link>
+        </template>
+      </space-table-column>
+    </filter-table>
+  </page-view>
+</template>
+
+<style scoped lang="less"></style>

+<template>
+  <router-view />
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="less" scoped>
+  .container {
+    padding: 0 30px 20px 20px;
+  }
+
+  .operations {
+    display: flex;
+  }
+</style>

+<script setup lang="ts">
+  import { Image, List, ListItem, ListItemMeta, TypographyParagraph } from '@arco-design/web-vue';
+  import AudioPlayer from '@/components/audio-player/index.vue';
+  import { onMounted, ref } from 'vue';
+  import usePagination from '@/hooks/pagination';
+  import { UserAudioDynamics } from '@/utils/model';
+  import useLoading from '@/hooks/loading';
+  import useProjectApi from '@/http/project';
+
+  const props = defineProps<{ projectKey: number }>();
+
+  const { loading, setLoading } = useLoading(false);
+  const { pagination, setPage, setTotal } = usePagination({ pageSize: 5, size: 'mini', showPageSize: false });
+  const source = ref<UserAudioDynamics[]>([]);
+
+  const onQuery = () => {
+    setLoading(true);
+    useProjectApi
+      .dynamics(props.projectKey, {
+        type: 'audio',
+        page: pagination.value.current,
+        pageSize: pagination.value.pageSize,
+        sortBy: 'is_top',
+        sortType: 'desc',
+      })
+      .then(({ data, meta }) => {
+        source.value = data as UserAudioDynamics[];
+        setPage(meta.current);
+        setTotal(meta.total);
+      })
+      .finally(() => setLoading(false));
+  };
+
+  onMounted(() => onQuery());
+</script>
+
+<template>
+  <List
+    :loading="loading"
+    :data="source"
+    :bordered="false"
+    :scrollbar="true"
+    :max-height="460"
+    :pagination-props="pagination"
+    @page-change="(page:number) => setPage(page) && onQuery()"
+  >
+    <template #item="{ item }">
+      <ListItem :key="item.id" style="padding: 4px 16px">
+        <ListItemMeta>
+          <template #avatar>
+            <Image :src="item.properties.cover.url" :width="60" :height="60" fit="fill" />
+          </template>
+          <template #title>
+            <TypographyParagraph :ellipsis="{ rows: 1, showTooltip: true }" style="margin-bottom: 10px; margin-top: 10px">
+              {{ item.intro }}
+            </TypographyParagraph>
+          </template>
+          <template #description>
+            <AudioPlayer :url="item.properties.url" style="width: 410px; height: 20px" />
+          </template>
+        </ListItemMeta>
+      </ListItem>
+    </template>
+  </List>
+</template>
+
+<style scoped lang="less">
+  :deep(.arco-list-pagination) {
+    margin-top: 10px !important;
+    margin-bottom: 10px !important;
+  }
+</style>

+<script setup lang="ts">
+  import { createVNode, ref, toRef } from 'vue';
+  import { createModalVNode } from '@/utils/createVNode';
+  import { Project } from '@/utils/model';
+  import ImageDynamics from '@/views/audition/project-show/components/image-dynamics.vue';
+  import AudioDynamics from '@/views/audition/project-show/components/audio-dynamics.vue';
+  import VideoDynamics from '@/views/audition/project-show/components/video-dynamics.vue';
+
+  const props = defineProps<{
+    project: Project & { image_dynamic_count: number; audio_dynamic_count: number; video_dynamic_count: number };
+  }>();
+  const project = toRef(props, 'project');
+  const coverVisible = ref(false);
+
+  const onViewImage = () =>
+    createModalVNode(() => createVNode(ImageDynamics, { projectKey: project.value.id }), {
+      title: '厂牌相册',
+      titleAlign: 'center',
+      closable: true,
+      footer: false,
+      escToClose: true,
+      width: '780px',
+    });
+
+  const onViewAudio = () =>
+    createModalVNode(() => createVNode(AudioDynamics, { projectKey: project.value.id }), {
+      title: '厂牌音频',
+      titleAlign: 'center',
+      closable: true,
+      footer: false,
+      escToClose: true,
+      bodyStyle: { padding: '0 !important' },
+      width: '540px',
+    });
+
+  const onViewVideo = () =>
+    createModalVNode(() => createVNode(VideoDynamics, { projectKey: project.value.id }), {
+      title: '厂牌视频',
+      titleAlign: 'center',
+      closable: true,
+      footer: false,
+      escToClose: true,
+      width: '780px',
+    });
+</script>
+
+<template>
+  <a-card :bordered="false">
+    <a-form :model="project" size="small" auto-label-width>
+      <a-row justify="start" align="start">
+        <a-col flex="130px" style="border-radius: 60px; overflow: hidden">
+          <a-image show-loader :height="130" :width="130" :src="project.cover" />
+        </a-col>
+        <a-col style="margin-left: 16px" flex="1">
+          <a-row :gutter="16" justify="space-between">
+            <a-col :span="20">
+              <a-form-item label="厂牌名称" :show-colon="true">{{ project.name }}</a-form-item>
+            </a-col>
+          </a-row>
+          <a-grid :cols="4" :col-gap="12" :row-gap="0">
+            <a-grid-item :span="1">
+              <a-form-item label="创建用户" :show-colon="true">
+                <user-link :user="project.user" />
+              </a-form-item>
+            </a-grid-item>
+            <a-grid-item :span="3">
+              <a-form-item label="主理人" :show-colon="true">
+                <user-link v-if="project.master" :user="project.master" />
+                <span v-else style="color: rgba(44, 44, 44, 0.5)">无</span>
+              </a-form-item>
+            </a-grid-item>
+            <a-grid-item :span="1">
+              <a-form-item label="试唱歌曲总数" :show-colon="true">
+                {{ project.activity_count || 0 }}
+              </a-form-item>
+            </a-grid-item>
+            <a-grid-item :span="1">
+              <a-form-item label="试唱进行中" :show-colon="true">
+                {{ project.activity_up_count || 0 }}
+              </a-form-item>
+            </a-grid-item>
+            <a-grid-item :span="1">
+              <a-form-item label="试唱已匹配" :show-colon="true">
+                {{ project.activity_match_count || 0 }}
+              </a-form-item>
+            </a-grid-item>
+            <a-grid-item :span="1">
+              <a-form-item label="歌曲已发行" :show-colon="true">
+                {{ project.activity_send_count || 0 }}
+              </a-form-item>
+            </a-grid-item>
+            <a-grid-item :span="1">
+              <a-form-item label="demo歌曲总数" :show-colon="true">
+                {{ project.demo_count || 0 }}
+              </a-form-item>
+            </a-grid-item>
+            <a-grid-item :span="3">
+              <a-form-item label="demo进行中" :show-colon="true">
+                {{ project.demo_up_count || 0 }}
+              </a-form-item>
+            </a-grid-item>
+            <a-grid-item>
+              <a-form-item label="头部封面" :show-colon="true">
+                <a-link v-if="project.head_cover" :hoverable="false" @click="coverVisible = !coverVisible">查看</a-link>
+                <span v-else style="color: rgba(44, 44, 44, 0.5)">无</span>
+              </a-form-item>
+            </a-grid-item>
+            <a-grid-item>
+              <a-form-item label="厂牌相册" :show-colon="true">
+                <a-link v-if="project.image_dynamic_count" :hoverable="false" @click="onViewImage">查看</a-link>
+                <span v-else style="color: rgba(44, 44, 44, 0.5)">无</span>
+              </a-form-item>
+            </a-grid-item>
+            <a-grid-item>
+              <a-form-item label="厂牌音频" :show-colon="true">
+                <a-link v-if="project.audio_dynamic_count" :hoverable="false" @click="onViewAudio">查看</a-link>
+                <span v-else style="color: rgba(44, 44, 44, 0.5)">无</span>
+              </a-form-item>
+            </a-grid-item>
+            <a-grid-item>
+              <a-form-item label="厂牌视频" :show-colon="true">
+                <a-link v-if="project.video_dynamic_count" :hoverable="false" @click="onViewVideo">查看</a-link>
+                <span v-else style="color: rgba(44, 44, 44, 0.5)">无</span>
+              </a-form-item>
+            </a-grid-item>
+          </a-grid>
+          <a-form-item label="厂牌简介" :show-colon="true">
+            <a-typography-paragraph
+              v-if="project.intro"
+              style="margin-bottom: 0"
+              type="secondary"
+              :ellipsis="{ rows: 2, showTooltip: true }"
+            >
+              {{ project.intro }}
+            </a-typography-paragraph>
+            <span v-else style="color: #cccccc">无</span>
+          </a-form-item>
+        </a-col>
+      </a-row>
+    </a-form>
+  </a-card>
+
+  <a-image-preview v-model:visible="coverVisible" :closable="false" :src="project.head_cover" :actions-layout="[]" />
+</template>
+
+<style scoped lang="less">
+  :deep(.arco-typography) {
+    text-align: left;
+    margin-bottom: 0;
+    width: 100%;
+  }
+
+  :deep(.arco-form-item) {
+    margin-bottom: 4px;
+  }
+
+  :deep(.arco-space-item) {
+    margin-bottom: 0 !important;
+  }
+</style>

+<script setup lang="ts">
+  import { Input, Link, Message } from '@arco-design/web-vue';
+  import { onMounted, ref } from 'vue';
+  import FilterSearch from '@/components/filter/search.vue';
+  import FilterSearchItem from '@/components/filter/search-item.vue';
+  import FilterTable from '@/components/filter/table.vue';
+  import FilterTableColumn from '@/components/filter/table-column.vue';
+  import PhoneTableColumn from '@/components/filter/phone-table-column.vue';
+  import EnumTableColumn from '@/components/filter/enum-table-column.vue';
+  import useLoading from '@/hooks/loading';
+  import { AnyObject } from '@/types/global';
+  import useUserApi from '@/http/user';
+  import { useManagerApi } from '@/http/project';
+  import { User } from '@/utils/model';
+
+  const props = defineProps<{ projectKey: number }>();
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const emits = defineEmits<{ (e: 'on-add', value: User): void }>();
+
+  const { loading, setLoading } = useLoading(false);
+  const { get, statusOption } = useUserApi;
+
+  const filter = ref({ nick_name: '', real_name: '', phone_like: '', email_like: '', status: [0, 1], scope: [0, 2] });
+  const tableRef = ref();
+
+  const onQuery = async (params?: AnyObject) => {
+    setLoading(true);
+    return get({ excludeManageProject: props.projectKey, ...filter.value, ...params }).finally(() => setLoading(false));
+  };
+
+  const onSearch = () => tableRef.value?.onPageChange(1);
+
+  const onReset = () => {
+    filter.value = { nick_name: '', real_name: '', phone_like: '', email_like: '', status: [0, 1], scope: [0, 2] };
+    onSearch();
+  };
+  const onCheck = (record: User) => {
+    setLoading(true);
+    useManagerApi.create({ project_id: props.projectKey, user_id: record.id }).then(() => {
+      Message.success(`添加管理员：${record.nick_name}`);
+      tableRef.value.onFetch();
+    });
+  };
+
+  onMounted(() => onReset());
+</script>
+
+<template>
+  <FilterSearch :model="filter" :loading="loading" @search="onSearch" @reset="onReset">
+    <FilterSearchItem label="用户艺名">
+      <Input v-model="filter.nick_name" allow-clear placeholder="请输入" />
+    </FilterSearchItem>
+    <FilterSearchItem label="用户真名">
+      <Input v-model="filter.real_name" allow-clear placeholder="请输入" />
+    </FilterSearchItem>
+    <FilterSearchItem label="用户邮箱">
+      <Input v-model="filter.email_like" allow-clear placeholder="请输入" />
+    </FilterSearchItem>
+    <FilterSearchItem label="手机号码">
+      <Input v-model="filter.phone_like" allow-clear placeholder="请输入" />
+    </FilterSearchItem>
+  </FilterSearch>
+  <FilterTable ref="tableRef" :loading="loading" :on-query="onQuery" size="small" style="height: 360px" :scroll="{ y: 360 }">
+    <FilterTableColumn title="用户艺名" data-index="nick_name" :width="200" :ellipsis="true" />
+    <FilterTableColumn title="用户真名" data-index="real_name" :width="160" :ellipsis="true" />
+    <FilterTableColumn title="用户邮箱" data-index="email" :width="160" :ellipsis="true" />
+    <PhoneTableColumn title="手机号码" data-index="phone" area-index="area_code" :width="160" :ellipsis="true" />
+    <EnumTableColumn title="状态" data-index="status" :option="statusOption" :dark-value="0" :width="100" />
+    <FilterTableColumn title="操作" :width="80">
+      <template #default="{ record }: { record: User }">
+        <Link class="link-hover" :hoverable="false" @click="onCheck(record)">添加</Link>
+      </template>
+    </FilterTableColumn>
+  </FilterTable>
+</template>
+
+<style scoped lang="less"></style>

+<script setup lang="ts">
+  import { ImagePreviewGroup, Grid, GridItem, Image, Pagination } from '@arco-design/web-vue';
+  import { onMounted, ref } from 'vue';
+  import usePagination from '@/hooks/pagination';
+  import { UserImageDynamics } from '@/utils/model';
+  import useProjectApi from '@/http/project';
+
+  const props = defineProps<{ projectKey: number }>();
+
+  const { pagination, setPage, setTotal } = usePagination({ pageSize: 12 });
+  const source = ref<UserImageDynamics[]>([]);
+
+  const onQuery = () =>
+    useProjectApi
+      .dynamics(props.projectKey, {
+        type: 'image',
+        page: pagination.value.current,
+        pageSize: pagination.value.pageSize,
+        sortBy: 'is_top',
+        sortType: 'desc',
+      })
+      .then(({ data, meta }) => {
+        source.value = data as UserImageDynamics[];
+        setPage(meta.current);
+        setTotal(meta.total);
+      });
+
+  onMounted(() => onQuery());
+</script>
+
+<template>
+  <ImagePreviewGroup>
+    <Grid :cols="6" :col-gap="12" :row-gap="16">
+      <GridItem v-for="item in source" :key="item.id">
+        <Image :src="item.properties.url" :width="120" :height="120" fit="scale-down" :show-loader="true" />
+      </GridItem>
+    </Grid>
+  </ImagePreviewGroup>
+  <Pagination
+    size="mini"
+    style="justify-content: flex-end; margin-top: 10px"
+    :current="pagination.current"
+    :total="pagination.total"
+    :page-size="pagination.pageSize"
+    :hide-on-single-page="true"
+    @change="(current:number) => setPage(current) && onQuery()"
+  />
+</template>
+
+<style scoped lang="less"></style>

+<script setup lang="ts">
+  import { h, onMounted, ref } from 'vue';
+  import { Card, Input, Select, Link, Message, TableData } from '@arco-design/web-vue';
+  import useLoading from '@/hooks/loading';
+  import { createModalVNode } from '@/utils/createVNode';
+  import { AnyObject } from '@/types/global';
+  import useProjectApi, { useManagerApi } from '@/http/project';
+  import UserTableColumn from '@/components/filter/user-table-column.vue';
+  import useUserApi from '@/http/user';
+  import EnumTableColumn from '@/components/filter/enum-table-column.vue';
+  import PhoneTableColumn from '@/components/filter/phone-table-column.vue';
+  import FilterSearch from '@/components/filter/search.vue';
+  import FilterSearchItem from '@/components/filter/search-item.vue';
+  import FilterTable from '@/components/filter/table.vue';
+  import FilterTableColumn from '@/components/filter/table-column.vue';
+  import FormContent from '@/views/audition/project-show/components/form-content.vue';
+  import usePermission from '@/hooks/permission';
+
+  const props = defineProps<{ projectKey: number; queryHook?: () => void }>();
+  const emits = defineEmits<{ (e: 'delete', id: number): void }>();
+
+  const { loading, setLoading } = useLoading(false);
+  const { sexOption, statusOption, officialStatusOption } = useUserApi;
+  const { manageUsers } = useProjectApi;
+
+  const filter = ref({ nick_name: '', sex: '', phone_like: '', email_like: '', status: '' });
+  const tableRef = ref();
+
+  const onSearch = () => tableRef.value?.onPageChange(1);
+
+  const onReset = () => {
+    filter.value = { nick_name: '', sex: '', phone_like: '', email_like: '', status: '' };
+    onSearch();
+  };
+
+  const onQuery = async (params: AnyObject) => {
+    setLoading(true);
+    props.queryHook?.();
+    return manageUsers(props.projectKey, { ...filter.value, ...params, sortBy: 'id', sortType: 'asc' }).finally(() => setLoading(false));
+  };
+
+  onMounted(() => onReset());
+
+  const onCreate = () => {
+    const formRef = ref();
+
+    createModalVNode(() => h(FormContent, { ref: formRef, projectKey: props.projectKey }), {
+      title: '新增管理员',
+      titleAlign: 'center',
+      width: '1000px',
+      closable: true,
+      footer: false,
+      onBeforeClose: () => tableRef.value?.onFetch(),
+    });
+  };
+
+  const onDelete = (row: TableData) => {
+    setLoading(true);
+    useManagerApi.destroy(row.pivot_id).then(() => {
+      Message.success(`移除管理员：${row.nick_name}`);
+      tableRef.value.onFetch();
+      emits('delete', row.id);
+    });
+  };
+</script>
+
+<template>
+  <Card :bordered="false">
+    <FilterSearch :model="filter" :loading="loading" @search="onSearch" @reset="onReset">
+      <FilterSearchItem label="用户艺名">
+        <Input v-model="filter.nick_name" allow-clear placeholder="请输入" />
+      </FilterSearchItem>
+      <FilterSearchItem label="性别">
+        <Select v-model="filter.sex" allow-clear placeholder="请选择" :options="sexOption" />
+      </FilterSearchItem>
+      <FilterSearchItem label="用户邮箱">
+        <Input v-model="filter.email_like" allow-clear placeholder="请输入" />
+      </FilterSearchItem>
+      <FilterSearchItem label="手机号码">
+        <Input v-model="filter.phone_like" allow-clear placeholder="请输入" />
+      </FilterSearchItem>
+      <FilterSearchItem label="状态">
+        <Select v-model="filter.status" allow-clear placeholder="请选择" :options="statusOption" />
+      </FilterSearchItem>
+    </FilterSearch>
+    <FilterTable ref="tableRef" :loading="loading" :on-query="onQuery">
+      <template #tool>
+        <IconButton v-permission="['audition-project-show-manage-create']" icon="plus" label="新增" type="primary" @click="onCreate" />
+      </template>
+      <UserTableColumn title="用户艺名" data-index="id" show-href show-avatar :width="260" />
+      <EnumTableColumn title="性别" data-index="sex" :option="sexOption" :dark-value="0" :width="100" />
+      <FilterTableColumn title="用户邮箱" data-index="email" :width="200" />
+      <PhoneTableColumn title="手机号码" data-index="phone" area-index="area_code" :width="200" />
+      <EnumTableColumn title="关注服务号" data-index="official_status" :option="officialStatusOption" :dark-value="0" :width="120" />
+      <EnumTableColumn title="状态" data-index="status" :option="statusOption" :dark-value="0" :width="100" />
+      <FilterTableColumn v-if="usePermission().checkPermission('audition-project-show-manage-delete')" title="操作" :width="100">
+        <template #default="{ record }">
+          <Link v-permission="['audition-project-show-manage-delete']" class="link-hover" :hoverable="false" @click="onDelete(record)">
+            删除
+          </Link>
+        </template>
+      </FilterTableColumn>
+    </FilterTable>
+  </Card>
+</template>
+
+<style scoped lang="less"></style>

+<script setup lang="ts">
+  import { Card, Input, Select } from '@arco-design/web-vue';
+  import { onMounted, ref } from 'vue';
+  import useLoading from '@/hooks/loading';
+  import useUserApi from '@/http/user';
+  import { AnyObject } from '@/types/global';
+  import useProjectApi from '@/http/project';
+  import FilterTable from '@/components/filter/table.vue';
+  import FilterSearch from '@/components/filter/search.vue';
+  import FilterSearchItem from '@/components/filter/search-item.vue';
+  import UserTableColumn from '@/components/filter/user-table-column.vue';
+  import EnumTableColumn from '@/components/filter/enum-table-column.vue';
+  import PhoneTableColumn from '@/components/filter/phone-table-column.vue';
+  import FilterTableColumn from '@/components/filter/table-column.vue';
+
+  const props = defineProps<{ projectKey: number; queryHook?: () => void }>();
+
+  const { loading, setLoading } = useLoading(false);
+  const { sexOption, officialStatusOption } = useUserApi;
+  const { memberUsers } = useProjectApi;
+
+  const filter = ref({ nick_name: '', sex: '', phone_like: '', email_like: '' });
+  const tableRef = ref();
+
+  const onSearch = () => tableRef.value?.onPageChange(1);
+
+  const onReset = () => {
+    filter.value = { nick_name: '', sex: '', phone_like: '', email_like: '' };
+    onSearch();
+  };
+
+  const onQuery = async (params: AnyObject) => {
+    setLoading(true);
+    props.queryHook?.();
+    return memberUsers(props.projectKey, { ...filter.value, ...params, sortBy: 'is_top', sortType: 'desc' }).finally(() =>
+      setLoading(false)
+    );
+  };
+
+  onMounted(() => onReset());
+</script>
+
+<template>
+  <Card :bordered="false">
+    <FilterSearch :model="filter" :loading="loading" @search="onSearch" @reset="onReset">
+      <FilterSearchItem label="用户艺名">
+        <Input v-model="filter.nick_name" allow-clear placeholder="请输入" />
+      </FilterSearchItem>
+      <FilterSearchItem label="性别">
+        <Select v-model="filter.sex" allow-clear placeholder="请选择" :options="sexOption" />
+      </FilterSearchItem>
+      <FilterSearchItem label="用户邮箱">
+        <Input v-model="filter.email_like" allow-clear placeholder="请输入" />
+      </FilterSearchItem>
+      <FilterSearchItem label="手机号码">
+        <Input v-model="filter.phone_like" allow-clear placeholder="请输入" />
+      </FilterSearchItem>
+    </FilterSearch>
+    <FilterTable ref="tableRef" :loading="loading" :on-query="onQuery">
+      <UserTableColumn title="用户艺名" data-index="id" nick-index="nick_name" show-href show-avatar :width="260" />
+      <EnumTableColumn title="性别" data-index="sex" :option="sexOption" :dark-value="0" :width="100" />
+      <FilterTableColumn title="用户邮箱" data-index="email" :width="200" />
+      <PhoneTableColumn title="手机号码" data-index="phone" area-index="area_code" :width="200" />
+      <EnumTableColumn title="关注服务号" data-index="official_status" :option="officialStatusOption" :dark-value="0" :width="120" />
+    </FilterTable>
+  </Card>
+</template>
+
+<style scoped lang="less"></style>

+<script setup lang="ts">
+  import { Link, Message, TableData } from '@arco-design/web-vue';
+  import { computed, onMounted, ref } from 'vue';
+  import FilterTable from '@/components/filter/table.vue';
+  import FilterTableColumn from '@/components/filter/table-column.vue';
+  import EnumTableColumn from '@/components/filter/enum-table-column.vue';
+  import SpaceTableColumn from '@/components/filter/space-table-column.vue';
+
+  import useLoading from '@/hooks/loading';
+  import { AnyObject } from '@/types/global';
+  import useUserApi from '@/http/user';
+  import useActivityApi, { useManagerApi } from '@/http/activity';
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  import { User, UserManageActivity } from '@/utils/model';
+  import { createFormVNode, createModalVNode, createSelectionFormItemVNode } from '@/utils/createVNode';
+  import usePermission from '@/hooks/permission';
+  import { promiseToBoolean } from '@/utils';
+
+  const props = defineProps<{ projectKey: number; user: User }>();
+
+  const { loading, setLoading } = useLoading(false);
+  const { permissionOption } = useManagerApi;
+  const { statusOption } = useActivityApi;
+
+  const tableRef = ref();
+
+  const onQuery = async (params: AnyObject) => {
+    setLoading(true);
+    return useUserApi.manageSongs(props.user.id, { project_id: props.projectKey, ...params }).finally(() => setLoading(false));
+  };
+
+  onMounted(() => tableRef.value?.onPageChange(1));
+
+  const label = computed(() => `${props.user.nick_name} 管理歌曲共：${tableRef.value?.getCount()} 首`);
+
+  const formatPermission = (permission: any[]) =>
+    permission
+      .map((item) => `[${permissionOption.find((option) => option.value === item)?.label}]` || '')
+      .filter((item) => item.length !== 0)
+      .join('');
+
+  const onUpdate = (record: TableData) => {
+    const formValue = ref<string[]>(record?.permission || ['view']);
+    return createModalVNode(
+      () =>
+        createFormVNode(
+          { layout: 'vertical', model: {} },
+          createSelectionFormItemVNode(
+            formValue,
+            permissionOption,
+            { label: '设置用户权限', rowClass: 'mb-0' },
+            {
+              'multiple': true,
+              'onUpdate:modelValue': (val?: string[]) => {
+                if (!val?.includes('view')) {
+                  val?.unshift('view');
+                }
+                formValue.value = val || [];
+              },
+            }
+          )
+        ),
+      {
+        title: '修改',
+        titleAlign: 'center',
+        onBeforeOk: () => promiseToBoolean(useManagerApi.update(record.id, { permission: formValue.value })),
+        onOk: () => {
+          Message.success('更新成功');
+          tableRef.value?.onFetch();
+        },
+      }
+    );
+  };
+
+  const onDelete = (record: TableData) => {
+    createModalVNode(`确认取消用户：${props.user?.nick_name} 的外部管理员身份`, {
+      title: '删除操作',
+      onBeforeOk: () => promiseToBoolean(useManagerApi.destroy(record.id)),
+      onOk: () => {
+        Message.success('删除成功');
+        tableRef.value?.onFetch();
+      },
+    });
+  };
+</script>
+
+<template>
+  <div style="margin-bottom: 10px">{{ label }}</div>
+  <FilterTable ref="tableRef" :loading="loading" :on-query="onQuery">
+    <FilterTableColumn title="厂牌名称" data-index="project.name" :width="120" />
+    <FilterTableColumn title="歌曲名称" data-index="activity_name" :width="160" />
+    <FilterTableColumn title="权限" data-index="permission" :width="240">
+      <template #default="{ record }: { record: UserManageActivity }">{{ formatPermission(record.permission) }}</template>
+    </FilterTableColumn>
+    <EnumTableColumn title="状态" data-index="activity_status" :width="100" :option="statusOption" />
+    <SpaceTableColumn
+      v-if="usePermission().checkPermission(['audition-project-show-out-manage-edit', 'audition-project-show-out-manage-delete'])"
+      title="操作"
+      :width="120"
+    >
+      <template #default="{ record }">
+        <Link v-permission="['audition-project-show-out-manage-edit']" class="link-hover" :hoverable="false" @click="onUpdate(record)">
+          修改
+        </Link>
+        <Link v-permission="['audition-project-show-out-manage-delete']" class="link-hover" :hoverable="false" @click="onDelete(record)">
+          取消管理
+        </Link>
+      </template>
+    </SpaceTableColumn>
+  </FilterTable>
+</template>
+
+<style scoped lang="less"></style>

+<script setup lang="ts">
+  import { Card, Input, Link, Message, Select, TableData } from '@arco-design/web-vue';
+  import { h, onMounted, ref } from 'vue';
+  import useLoading from '@/hooks/loading';
+  import FilterSearchItem from '@/components/filter/search-item.vue';
+  import FilterSearch from '@/components/filter/search.vue';
+  import useUserApi from '@/http/user';
+  import FilterTable from '@/components/filter/table.vue';
+  import { AnyObject } from '@/types/global';
+  import useProjectApi from '@/http/project';
+  import EnumTableColumn from '@/components/filter/enum-table-column.vue';
+  import UserTableColumn from '@/components/filter/user-table-column.vue';
+  import PhoneTableColumn from '@/components/filter/phone-table-column.vue';
+  import FilterTableColumn from '@/components/filter/table-column.vue';
+  import { User } from '@/utils/model';
+  import { createModalVNode } from '@/utils/createVNode';
+  import OutFormContent from '@/views/audition/project-show/components/out-form-content.vue';
+  import usePermission from '@/hooks/permission';
+
+  const props = defineProps<{ projectKey: number; queryHook?: () => void }>();
+
+  const { loading, setLoading } = useLoading(false);
+  const { sexOption, statusOption, officialStatusOption } = useUserApi;
+  const { outManageUsers, destroyOutManageUsers } = useProjectApi;
+
+  const filter = ref({ nick_name: '', sex: '', phone_like: '', email_like: '', status: '' });
+  const tableRef = ref();
+
+  const onSearch = () => tableRef.value?.onPageChange(1);
+
+  const onReset = () => {
+    filter.value = { nick_name: '', sex: '', phone_like: '', email_like: '', status: '' };
+    onSearch();
+  };
+
+  const onQuery = async (params: AnyObject) => {
+    setLoading(true);
+    props.queryHook?.();
+    return outManageUsers(props.projectKey, { ...filter.value, ...params, sortBy: 'id', sortType: 'asc' }).finally(() => setLoading(false));
+  };
+
+  onMounted(() => onReset());
+
+  const onView = (row: User) =>
+    createModalVNode(() => h(OutFormContent, { user: row, projectKey: props.projectKey }), {
+      title: '管理歌曲',
+      titleAlign: 'center',
+      footer: false,
+      closable: true,
+      width: '860px',
+      onClose: () => tableRef.value?.onFetch(),
+    });
+
+  const onDelete = (record: TableData) => {
+    createModalVNode(`取消用户：${record?.nick_name} 在此厂牌下的外部管理员身份`, {
+      title: '删除操作',
+      onBeforeOk: (done: any) =>
+        destroyOutManageUsers(props.projectKey, { user_id: record.id })
+          .then(() => {
+            Message.success('删除成功');
+            tableRef.value?.onFetch();
+            done(true);
+          })
+          .catch(() => done(false)),
+    });
+  };
+</script>
+
+<template>
+  <Card :bordered="false">
+    <FilterSearch :model="filter" :loading="loading" @search="onSearch" @reset="onReset">
+      <FilterSearchItem label="用户艺名">
+        <Input v-model="filter.nick_name" allow-clear placeholder="请输入" />
+      </FilterSearchItem>
+      <FilterSearchItem label="性别">
+        <Select v-model="filter.sex" allow-clear placeholder="请选择" :options="sexOption" />
+      </FilterSearchItem>
+      <FilterSearchItem label="用户邮箱">
+        <Input v-model="filter.email_like" allow-clear placeholder="请输入" />
+      </FilterSearchItem>
+      <FilterSearchItem label="手机号码">
+        <Input v-model="filter.phone_like" allow-clear placeholder="请输入" />
+      </FilterSearchItem>
+      <FilterSearchItem label="状态">
+        <Select v-model="filter.status" allow-clear placeholder="请选择" :options="statusOption" />
+      </FilterSearchItem>
+    </FilterSearch>
+    <FilterTable ref="tableRef" :loading="loading" :on-query="onQuery">
+      <UserTableColumn title="用户艺名" data-index="id" show-href show-avatar :width="260" />
+      <EnumTableColumn title="性别" data-index="sex" :option="sexOption" :dark-value="0" :width="80" />
+      <FilterTableColumn title="用户邮箱" data-index="email" :width="180" />
+      <PhoneTableColumn title="手机号码" data-index="phone" area-index="area_code" :width="160" />
+      <FilterTableColumn title="管理歌曲" :width="100">
+        <template #default="{ record }: { record: User & { activities_count: number[] } }">
+          <Link class="link-hover" :hoverable="false" @click="onView(record)">{{ record.activities_count }}首</Link>
+        </template>
+      </FilterTableColumn>
+      <EnumTableColumn title="关注服务号" data-index="official_status" :option="officialStatusOption" :dark-value="0" :width="120" />
+      <EnumTableColumn title="状态" data-index="status" :option="statusOption" :dark-value="0" :width="80" />
+      <FilterTableColumn v-if="usePermission().checkPermission('audition-project-show-out-manage-delete')" title="操作" :width="100">
+        <template #default="{ record }">
+          <Link v-permission="['audition-project-show-out-manage-delete']" class="link-hover" :hoverable="false" @click="onDelete(record)">
+            删除
+          </Link>
+        </template>
+      </FilterTableColumn>
+    </FilterTable>
+  </Card>
+</template>
+
+<style scoped lang="less"></style>

+<script setup lang="ts">
+  import { ImagePreviewGroup, Grid, GridItem, Image, Pagination } from '@arco-design/web-vue';
+  import { h, onMounted, ref } from 'vue';
+  import usePagination from '@/hooks/pagination';
+  import { UserAudioDynamics } from '@/utils/model';
+  import useProjectApi from '@/http/project';
+  import { createModalVNode } from '@/utils/createVNode';
+
+  import vue3videoPlay from 'vue3-video-play';
+  import 'vue3-video-play/dist/style.css';
+
+  const props = defineProps<{ projectKey: number }>();
+
+  const { pagination, setPage, setTotal } = usePagination({ pageSize: 12 });
+  const source = ref<UserAudioDynamics[]>([]);
+
+  const onQuery = () =>
+    useProjectApi
+      .dynamics(props.projectKey, {
+        type: 'video',
+        page: pagination.value.current,
+        pageSize: pagination.value.pageSize,
+        sortBy: 'is_top',
+        sortType: 'desc',
+      })
+      .then(({ data, meta }) => {
+        source.value = data as UserAudioDynamics[];
+        setPage(meta.current);
+        setTotal(meta.total);
+      });
+
+  onMounted(() => onQuery());
+
+  const onClick = (item: any) =>
+    createModalVNode(
+      () => h(vue3videoPlay, { src: item.properties.url, controlBtns: ['volume', 'speedRate', 'pip', 'pageFullScreen', 'fullScreen'] }),
+      {
+        width: 'auto',
+        modalStyle: { padding: '0 !important' },
+        simple: true,
+        footer: false,
+        maskClosable: true,
+        escToClose: true,
+      }
+    );
+</script>
+
+<template>
+  <ImagePreviewGroup>
+    <Grid :cols="6" :col-gap="12" :row-gap="16">
+      <GridItem v-for="item in source" :key="item.id">
+        <Image
+          :src="item.properties.cover.url"
+          :width="120"
+          :height="70"
+          fit="scale-down"
+          :show-loader="true"
+          :preview="false"
+          @click="onClick(item)"
+        />
+      </GridItem>
+    </Grid>
+  </ImagePreviewGroup>
+  <Pagination
+    size="mini"
+    style="justify-content: flex-end; margin-top: 10px"
+    :current="pagination.current"
+    :total="pagination.total"
+    :page-size="pagination.pageSize"
+    :hide-on-single-page="true"
+    @change="(current:number) => setPage(current) && onQuery()"
+  />
+</template>
+
+<style scoped lang="less"></style>

+declare module 'vue3-video-play';

+<template>
+  <page-view :loading="loading" has-bread>
+    <basic-card :project="project as any" />
+
+    <a-card v-if="tabKeys.length" :bordered="false" style="margin-top: 16px">
+      <a-tabs v-model:active-key="tabKey" type="rounded" :animation="true" size="small" :justify="true">
+        <a-tab-pane v-if="checkPermission('activity')" key="activity" :title="`歌曲列表(${count.activity})`">
+          <activity-card
+            style="padding: 0"
+            :has-bread="false"
+            :init-filter="{ status: '', project_id: projectKey }"
+            :create-prop="{ initValue: { project_id: projectKey }, hideField: ['project_id'] }"
+            :hide-search-item="['projectName', 'userName']"
+            :export-name="project.name"
+            :query-hook="() => syncActivityCount()"
+          />
+        </a-tab-pane>
+        <a-tab-pane v-if="checkPermission('demo')" key="demo" :title="`Demo列表(${count.demo})`">
+          <demo-card
+            style="padding: 0"
+            :has-bread="false"
+            :init-filter="{ status: '', project_id: projectKey }"
+            :create-prop="{ project_id: projectKey }"
+            :hide-search-item="['projectName', 'createdForm', 'userName']"
+            :export-name="project.name"
+            :query-hook="() => syncDemoCount()"
+          />
+        </a-tab-pane>
+        <a-tab-pane v-if="checkPermission('member')" key="member" :title="`厂牌成员(${count.member})`">
+          <member-table :project-key="projectKey" :query-hook="() => syncMemberCount()" />
+        </a-tab-pane>
+        <a-tab-pane v-if="checkPermission('manage')" key="manage" :title="`厂牌管理(${count.manager})`">
+          <manage-table :project-key="projectKey" :query-hook="() => syncManageCount()" @delete="onDeleteMaster" />
+        </a-tab-pane>
+        <a-tab-pane v-if="checkPermission('out-manage')" key="out-manage" :title="`外部管理(${count.out_manager})`">
+          <out-manage-table :project-key="projectKey" :query-hook="() => syncOutManageCount()" />
+        </a-tab-pane>
+      </a-tabs>
+    </a-card>
+  </page-view>
+</template>
+
+<script lang="ts" setup>
+  import { onBeforeRouteLeave, useRoute } from 'vue-router';
+  import { useRouteQuery } from '@vueuse/router';
+  import { computed, onMounted, ref } from 'vue';
+  import ActivityCard from '@/views/audition/activity/index.vue';
+  import DemoCard from '@/views/audition/demo/index.vue';
+  import BasicCard from '@/views/audition/project-show/components/basic-card.vue';
+  import useLoading from '@/hooks/loading';
+
+  import useProjectApi from '@/http/project';
+  import useActivityApi from '@/http/activity';
+  import ManageTable from '@/views/audition/project-show/components/manage-table.vue';
+  import OutManageTable from '@/views/audition/project-show/components/out-manage-table.vue';
+  import MemberTable from '@/views/audition/project-show/components/member-table.vue';
+  import usePermission from '@/hooks/permission';
+  import { isArray } from '@/utils/is';
+
+  const routeName = useRoute()?.name as string;
+  const checkPermission = (permission: string | string[]): boolean => {
+    permission = isArray(permission) ? permission.map((item) => `${routeName}-${item}`) : `${routeName}-${permission}`;
+    return usePermission().checkPermission(permission);
+  };
+
+  const tabKeys = computed((): string[] => {
+    return ['activity', 'demo', 'member', 'manage', 'out-manage'].filter((item) => checkPermission(item));
+  });
+
+  const tabKey = useRouteQuery('tabKey', tabKeys.value[0] || '');
+
+  const projectKey = Number(useRoute().params?.id);
+
+  const project = ref({ name: '', master_id: 0, master: undefined });
+
+  const { loading, setLoading } = useLoading(true);
+
+  const count = ref({ activity: 0, demo: 0, member: 0, manager: 0, out_manager: 0 });
+
+  const onDeleteMaster = (id: number) => {
+    if (project.value.master_id === id) {
+      project.value.master_id = 0;
+      project.value.master = undefined;
+    }
+  };
+
+  const syncActivityCount = () =>
+    useActivityApi
+      .get({ status: '', audit_status: 1, song_type: 1, project_id: projectKey, pageSize: 1 })
+      .then(({ meta }) => (count.value.activity = meta.total));
+
+  const syncDemoCount = () =>
+    useActivityApi
+      .get({ status: '', audit_status: 1, song_type: 2, project_id: projectKey, pageSize: 1 })
+      .then(({ meta }) => (count.value.demo = meta.total));
+
+  const syncManageCount = () =>
+    useProjectApi.manageUsers(projectKey, { pageSize: 1 }).then(({ meta }) => (count.value.manager = meta.total));
+
+  const syncMemberCount = () =>
+    useProjectApi.memberUsers(projectKey, { pageSize: 1 }).then(({ meta }) => (count.value.member = meta.total));
+
+  const syncOutManageCount = () =>
+    useProjectApi.outManageUsers(projectKey, { pageSize: 1 }).then(({ meta }) => (count.value.out_manager = meta.total));
+
+  onMounted(() => {
+    useProjectApi
+      .show(projectKey)
+      .then((data) => (project.value = data as any))
+      .finally(() => setLoading(false));
+  });
+
+  onBeforeRouteLeave((to, from) => {
+    if (from.meta.from === to.name) {
+      to.meta.reload = false;
+    }
+  });
+</script>

+<script setup lang="ts">
+  import { Form, FormItem, Input, Select, Textarea } from '@arco-design/web-vue';
+  import { computed, onBeforeMount, ref } from 'vue';
+  import { FieldRule, FormInstance } from '@arco-design/web-vue/es/form';
+  import AvatarUpload from '@/components/avatar-upload/index.vue';
+  import useProjectApi from '@/http/project';
+  import { Project, User } from '@/utils/model';
+  import { AnyObject } from '@/types/global';
+
+  const { publicStatusOption, applyStatusOption, manageStatusOption } = useProjectApi;
+
+  const props = defineProps<{
+    modelValue: AnyObject;
+    hideMaster?: boolean;
+    submit?: (value: AnyObject) => Promise<Project>;
+  }>();
+  const emits = defineEmits<{ (e: 'update:modelValue', value: AnyObject): void }>();
+
+  const formRef = ref<FormInstance>();
+
+  const formRule = {
+    cover: [{ required: true, message: '请上传厂牌图片' }],
+    name: [{ required: true, message: '请输入厂牌名称' }],
+    intro: [{ type: 'string', max: 100, message: '厂牌简介不能超过100字' }],
+    is_public: [{ required: true, message: '请确认是否仅显示自己创建的试唱歌曲' }],
+    is_can_apply: [{ required: true, message: '请确认是否允许提交歌曲上架' }],
+    is_can_manage: [{ required: true, message: '请确认是否允许自行添加外部成员' }],
+    is_can_demo_apply: [{ required: true, message: '请确认是否允许提交Demo上架' }],
+    is_demo_audit: [{ required: true, message: '请确认Demo上架是否需要审核' }],
+  } as Record<string, FieldRule[]>;
+
+  const formValue = computed({
+    get: () => props.modelValue,
+    set: (val) => emits('update:modelValue', val),
+  });
+
+  const onSubmit = async () => {
+    const error = await formRef.value?.validate();
+
+    return error ? Promise.reject(error) : props.submit?.(formValue.value);
+  };
+
+  const masterOption = ref<User[]>([]);
+
+  defineExpose({ onSubmit });
+
+  onBeforeMount(async () => {
+    if (props.modelValue?.id) {
+      await useProjectApi
+        .manageUsers(props.modelValue?.id as number, { fetchType: 'all', setColumn: ['id', 'nick_name'], status: 1 })
+        .then(({ data }) => {
+          masterOption.value = [{ id: 0, nick_name: '无' } as User, ...data];
+        });
+    }
+  });
+</script>
+
+<template>
+  <Form ref="formRef" layout="vertical" :model="formValue" :rules="formRule">
+    <FormItem hide-label content-class="justify-center" :wrapper-col-props="{ alignItems: 'center' }">
+      <AvatarUpload v-model="formValue.cover" :size="100" />
+    </FormItem>
+    <FormItem label="厂牌名称" field="name" show-colon>
+      <Input v-model.trim="formValue.name" placeholder="请输入" :max-length="30" show-word-limit />
+    </FormItem>
+    <FormItem hide-label row-class="mb-0">
+      <FormItem v-if="!hideMaster" label="主理人" field="master_id" row-class="formItemRow" show-colon>
+        <Select
+          v-model.number="formValue.master_id"
+          :field-names="{ value: 'id', label: 'nick_name' }"
+          :fallback-option="false"
+          :options="masterOption"
+          placeholder="请选择"
+        />
+      </FormItem>
+      <FormItem label="是否允许提交歌曲上架" field="is_can_apply" row-class="formItemRow" show-colon>
+        <Select v-model.number="formValue.is_can_apply" :options="applyStatusOption" placeholder="请选择" />
+      </FormItem>
+    </FormItem>
+    <FormItem hide-label row-class="mb-0">
+      <FormItem label="仅显示自己创建的试唱歌曲" field="is_public" row-class="formItemRow" show-colon>
+        <Select v-model.number="formValue.is_public" :options="publicStatusOption" placeholder="请选择" />
+      </FormItem>
+      <FormItem label="是否允许自行添加外部成员" field="is_can_manage" row-class="formItemRow" show-colon>
+        <Select v-model.number="formValue.is_can_manage" :options="manageStatusOption" placeholder="请选择" />
+      </FormItem>
+    </FormItem>
+    <FormItem hide-label row-class="mb-0">
+      <FormItem label="是否允许提交Demo上架" field="is_can_demo_apply" row-class="formItemRow" show-colon>
+        <Select v-model.number="formValue.is_can_demo_apply" :options="applyStatusOption" placeholder="请选择" />
+      </FormItem>
+      <!--      <FormItem label="Demo上架是否需要审核" field="is_demo_audit" row-class="formItemRow" show-colon>-->
+      <!--        <Select v-model.number="formValue.is_demo_audit" :options="applyStatusOption" placeholder="请选择" />-->
+      <!--      </FormItem>-->
+    </FormItem>
+    <FormItem label="厂牌简介" field="intro" row-class="mb-0" show-colon>
+      <Textarea v-model.trim="formValue.intro" :auto-size="{ maxRows: 4, minRows: 4 }" :max-length="50" show-word-limit />
+    </FormItem>
+  </Form>
+</template>
+
+<style scoped lang="less">
+  .formItemRow:not(:first-child) {
+    margin-left: 8px;
+  }
+</style>

+<script setup lang="ts">
+  import { Input, Message, Link, TableData } from '@arco-design/web-vue';
+
+  import { createVNode, onMounted, ref } from 'vue';
+  import { useRouter } from 'vue-router';
+  import { AnyObject } from '@/types/global';
+  import useLoading from '@/hooks/loading';
+  import useProjectApi from '@/http/project';
+  import { createModalVNode } from '@/utils/createVNode';
+  import { Project } from '@/utils/model';
+  import openNewTab from '@/utils/route-blank';
+  import NumberTableColumn from '@/components/filter/number-table-column.vue';
+  import FormContent from '@/views/audition/project/components/form-content.vue';
+  import UserTableColumn from '@/components/filter/user-table-column.vue';
+  import SpaceTableColumn from '@/components/filter/space-table-column.vue';
+  import usePermission from '@/hooks/permission';
+
+  const { get, create, update, destroy, getExport } = useProjectApi;
+  const { checkPermission } = usePermission();
+
+  const router = useRouter();
+
+  const filter = ref<AnyObject>({});
+  const tableRef = ref();
+  const { loading, setLoading } = useLoading(false);
+
+  const onQuery = async (params?: AnyObject) => {
+    setLoading(true);
+    return get({
+      ...filter.value,
+      setWith: ['master:id,nick_name,identity'],
+      setWithCount: ['activity_up', 'activity_match', 'activity_send', 'manage', 'member'],
+      ...params,
+    }).finally(() => setLoading(false));
+  };
+
+  const onSearch = () => tableRef.value?.onPageChange(1);
+
+  const onReset = () => {
+    filter.value = { name: '', masterName: '', status: '', isPromote: '', sortBy: 'id', sortType: 'desc' };
+    tableRef.value?.resetSort();
+    onSearch();
+  };
+
+  const onSort = (column: string, type: string) => {
+    filter.value.sortBy = type ? column : 'id';
+    filter.value.sortType = type || 'desc';
+    tableRef.value?.onFetch();
+  };
+
+  onMounted(() => onReset());
+
+  const onExport = () =>
+    getExport('厂牌', {
+      ...filter.value,
+      setWith: ['master:id,nick_name,identity'],
+      setWithCount: ['activity_up', 'activity_match', 'activity_send', 'manage', 'member'],
+    });
+
+  const onCreate = () => {
+    const formRef = ref();
+    const formValue = ref({ cover: '', name: '', intro: '', is_demo_audit: 0 });
+    createModalVNode(
+      () =>
+        createVNode(FormContent, {
+          'ref': formRef,
+          'hide-master': true,
+          'model-value': formValue.value,
+          'onUpdate:model-value': (val: any) => (formValue.value = val),
+          'submit': (value: Omit<Project, 'id'>) => create(value),
+        }),
+      {
+        title: '新增厂牌',
+        titleAlign: 'center',
+        onBeforeOk: (done: any) =>
+          formRef.value
+            ?.onSubmit()
+            .then(({ name }: Project) => {
+              tableRef.value.onFetch();
+              Message.success(`创建厂牌：${name}`);
+              done(true);
+            })
+            .catch(() => done(false)),
+      }
+    );
+  };
+
+  const onUpdate = (row: TableData) => {
+    const formRef = ref();
+    const formValue = ref({ ...row });
+    createModalVNode(
+      () =>
+        createVNode(FormContent, {
+          'ref': formRef,
+          'model-value': formValue.value,
+          'onUpdate:model-value': (val: any) => (formValue.value = val),
+          'submit': (value: Omit<Project, 'id'>) => update(row.id, value),
+        }),
+      {
+        title: '厂牌编辑',
+        titleAlign: 'center',
+        onBeforeOk: (done: any) =>
+          formRef.value
+            ?.onSubmit()
+            .then(({ name }: Project) => {
+              tableRef.value.onFetch();
+              Message.success(`更新厂牌：${name}`);
+              done(true);
+            })
+            .catch(() => done(false)),
+      }
+    );
+  };
+
+  const onDelete = (row: TableData) => {
+    createModalVNode('请确认是否删除此厂牌', {
+      title: '厂牌删除',
+      onBeforeOk: () =>
+        destroy(row.id)
+          .then(() => true)
+          .catch(() => false),
+      onOk: () => tableRef.value.onFetch(),
+    });
+  };
+
+  // const onShow = (record: TableData) => router.push({ name: 'audition-project-show', params: { id: record.id } });
+  const onShow = (record: TableData) => openNewTab(router, 'audition-project-show', { id: record.id });
+</script>
+
+<template>
+  <PageView has-card has-bread>
+    <FilterSearch :model="filter" :loading="loading" :inline="true" @search="onSearch" @reset="onReset">
+      <FilterSearchItem label="厂牌名称" field="name">
+        <Input v-model="filter.name" allow-clear placeholder="请输入" />
+      </FilterSearchItem>
+      <FilterSearchItem label="主理人" field="masterName">
+        <Input v-model="filter.masterName" allow-clear placeholder="请输入" />
+      </FilterSearchItem>
+    </FilterSearch>
+    <FilterTable ref="tableRef" :loading="loading" :on-query="onQuery" @row-sort="onSort">
+      <template #tool>
+        <IconButton v-permission="['audition-project-create']" type="primary" icon="plus" label="新增" @click="onCreate" />
+      </template>
+      <template #tool-right>
+        <ExportButton v-permission="['audition-project-export']" :on-download="onExport" />
+      </template>
+      <UserTableColumn title="厂牌名称" data-index="id" nick-index="name" avatar-index="cover" :width="240" show-avatar />
+      <UserTableColumn title="主理人" data-index="master_id" user="master" :width="160" show-href dark-value="" />
+      <NumberTableColumn title="厂牌管理员人数" data-index="manage_count" :dark-value="0" :width="120" has-sort />
+      <NumberTableColumn title="厂牌成员人数" data-index="member_count" :dark-value="0" :width="120" has-sort />
+      <NumberTableColumn title="上架歌曲数" data-index="activity_up_count" :dark-value="0" :width="110" has-sort />
+      <NumberTableColumn title="已匹配歌曲数" data-index="activity_match_count" :dark-value="0" :width="110" has-sort />
+      <NumberTableColumn title="已发行歌曲数" data-index="activity_send_count" :dark-value="0" :width="110" has-sort />
+      <SpaceTableColumn
+        v-if="checkPermission(['audition-project-show', 'audition-project-edit', 'audition-project-delete'])"
+        title="操作"
+        data-index="operation"
+        :width="120"
+      >
+        <template #default="{ record }">
+          <Link v-permission="['audition-project-show']" class="link-hover" :hoverable="false" @click="onShow(record)">查看</Link>
+          <Link v-permission="['audition-project-edit']" class="link-hover" :hoverable="false" @click="onUpdate(record)">编辑</Link>
+          <Link v-permission="['audition-project-delete']" class="link-hover" :hoverable="false" @click="onDelete(record)">删除</Link>
+        </template>
+      </SpaceTableColumn>
+    </FilterTable>
+  </PageView>
+</template>
+
+<style scoped lang="less"></style>

+<template>
+  <a-card>
+    <div class="content-wrap">
+      <div class="content">
+        <a-statistic :value="todayTotal" :value-from="0" animation show-group-separator title="今日用户收藏" />
+        <div class="desc">
+          <a-typography-text class="label" type="secondary"> 较昨日</a-typography-text>
+          <a-typography-text v-if="diffTotal < 0" type="success">
+            {{ diffTotal }}
+            <icon-arrow-fall />
+          </a-typography-text>
+          <a-typography-text v-else type="danger">
+            {{ diffTotal }}
+            <icon-arrow-rise />
+          </a-typography-text>
+        </div>
+      </div>
+      <div class="chart">
+        <Chart :option="chartOption" style="width: 100%" />
+      </div>
+    </div>
+  </a-card>
+</template>
+
+<script lang="ts" setup>
+  import useChartOption from '@/hooks/chart-option';
+  import { IconArrowFall, IconArrowRise } from '@arco-design/web-vue/es/icon';
+  import { computed, onMounted, ref } from 'vue';
+  import { subtract } from 'lodash';
+  import useDashboardApi from '@/http/dashboard';
+  import { ToolTipFormatterParams } from '@/types/echarts';
+
+  const record = ref<{ time: string[]; data: number[] }>({
+    time: [],
+    data: [],
+  });
+
+  const todayTotal = computed(() => {
+    return record.value.data[record.value.data.length - 1] || 0;
+  });
+  const diffTotal = computed(() => {
+    return subtract(record.value.data[record.value.data.length - 1], record.value.data[record.value.data.length - 2]) || 0;
+  });
+
+  const formatTooltip = (params: ToolTipFormatterParams[]) => {
+    const [firstElement] = params;
+    return `
+           <div class="content-panel">
+            <p>
+              <span style="background-color: ${firstElement.color}" class="tooltip-item-icon"></span>
+              <span>${firstElement.name}</span>
+            </p>
+            <span class="tooltip-value">${firstElement.value?.toLocaleString()}</span>
+          </div>`;
+  };
+
+  const { chartOption } = useChartOption(() => {
+    return {
+      grid: { left: 0, right: 0, top: 10, bottom: 5 },
+      xAxis: { type: 'category', show: false, boundaryGap: true, data: record.value.time },
+      yAxis: { show: false, type: 'value', scale: true },
+      tooltip: {
+        show: true,
+        trigger: 'axis',
+        formatter: (params) => formatTooltip(params as ToolTipFormatterParams[]),
+        className: 'echarts-tooltip-diy',
+      },
+      series: { data: record.value.data, type: 'line', showSymbol: false, smooth: true, lineStyle: { width: 3, color: '#165DFF' } },
+    };
+  });
+
+  onMounted(async () => {
+    record.value = await useDashboardApi.activityLike();
+  });
+</script>
+
+<style lang="less" scoped>
+  :deep(.arco-card) {
+    border-radius: 4px;
+  }
+
+  :deep(.arco-card-body) {
+    width: 100%;
+    height: 134px;
+    //padding: 0;
+  }
+
+  .content-wrap {
+    width: 100%;
+    //padding: 16px;
+    white-space: nowrap;
+  }
+
+  :deep(.content) {
+    float: left;
+    width: 108px;
+    height: 102px;
+  }
+
+  :deep(.arco-statistic) {
+    .arco-statistic-title {
+      font-size: 14px;
+      font-weight: bold;
+      white-space: nowrap;
+    }
+
+    .arco-statistic-content {
+      margin-top: 10px;
+    }
+  }
+
+  .chart {
+    float: right;
+    width: calc(100% - 108px);
+    height: 100px;
+    vertical-align: bottom;
+  }
+
+  .label {
+    padding-right: 8px;
+    font-size: 12px;
+  }
+</style>

+<template>
+  <a-card>
+    <div class="content-wrap">
+      <div class="content">
+        <a-statistic :value="todayTotal" :value-from="0" animation show-group-separator title="今日用户试听" />
+        <div class="desc">
+          <a-typography-text class="label" type="secondary"> 较昨日</a-typography-text>
+          <a-typography-text v-if="diffTotal < 0" type="success">
+            {{ diffTotal }}
+            <icon-arrow-fall />
+          </a-typography-text>
+          <a-typography-text v-else type="danger">
+            {{ diffTotal }}
+            <icon-arrow-rise />
+          </a-typography-text>
+        </div>
+      </div>
+      <div class="chart">
+        <Chart :option="chartOption" style="width: 100%" />
+      </div>
+    </div>
+  </a-card>
+</template>
+
+<script lang="ts" setup>
+  import useChartOption from '@/hooks/chart-option';
+  import { IconArrowFall, IconArrowRise } from '@arco-design/web-vue/es/icon';
+  import { computed, onMounted, ref } from 'vue';
+  import { subtract } from 'lodash';
+  import useDashboardApi from '@/http/dashboard';
+  import { ToolTipFormatterParams } from '@/types/echarts';
+
+  const record = ref<{ time: string[]; data: number[] }>({
+    time: [],
+    data: [],
+  });
+
+  const todayTotal = computed(() => {
+    return record.value.data[record.value.data.length - 1] || 0;
+  });
+  const diffTotal = computed(() => {
+    return subtract(record.value.data[record.value.data.length - 1], record.value.data[record.value.data.length - 2]) || 0;
+  });
+
+  const formatTooltip = (params: ToolTipFormatterParams[]) => {
+    const [firstElement] = params;
+    return `
+           <div class="content-panel">
+            <p>
+              <span style="background-color: ${firstElement.color}" class="tooltip-item-icon"></span>
+              <span>${firstElement.name}</span>
+            </p>
+            <span class="tooltip-value">${firstElement.value?.toLocaleString()}</span>
+          </div>`;
+  };
+
+  const { chartOption } = useChartOption(() => {
+    return {
+      grid: { left: 0, right: 0, top: 10, bottom: 5 },
+      xAxis: { type: 'category', show: false, boundaryGap: true, data: record.value.time },
+      yAxis: { show: false, type: 'value', scale: true },
+      tooltip: {
+        show: true,
+        trigger: 'axis',
+        formatter: (params) => formatTooltip(params as ToolTipFormatterParams[]),
+        className: 'echarts-tooltip-diy',
+      },
+      series: { data: record.value.data, type: 'line', showSymbol: false, smooth: true, lineStyle: { width: 3, color: '#165DFF' } },
+    };
+  });
+
+  onMounted(async () => {
+    record.value = await useDashboardApi.activityListen();
+  });
+</script>
+
+<style lang="less" scoped>
+  :deep(.arco-card) {
+    border-radius: 4px;
+  }
+
+  :deep(.arco-card-body) {
+    width: 100%;
+    height: 134px;
+    //padding: 0;
+  }
+
+  .content-wrap {
+    width: 100%;
+    //padding: 16px;
+    white-space: nowrap;
+  }
+
+  :deep(.content) {
+    float: left;
+    width: 108px;
+    height: 102px;
+  }
+
+  :deep(.arco-statistic) {
+    .arco-statistic-title {
+      font-size: 14px;
+      font-weight: bold;
+      white-space: nowrap;
+    }
+
+    .arco-statistic-content {
+      margin-top: 10px;
+    }
+  }
+
+  .chart {
+    float: right;
+    width: calc(100% - 108px);
+    height: 100px;
+    vertical-align: bottom;
+  }
+
+  .label {
+    padding-right: 8px;
+    font-size: 12px;
+  }
+</style>

+<template>
+  <a-card>
+    <div class="content-wrap">
+      <div class="content">
+        <div data-v-55251d00="" class="arco-statistic">
+          <div class="arco-statistic-title">上架歌曲曲风</div>
+          <div class="arco-statistic-content">
+            <div class="arco-statistic-value">
+              <span class="arco-statistic-value-integer"></span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="chart">
+        <Chart :option="chartOption" style="width: 100%" />
+      </div>
+    </div>
+  </a-card>
+</template>
+
+<script lang="ts" setup>
+  import useChartOption from '@/hooks/chart-option';
+  import { onMounted, ref } from 'vue';
+  import Chart from '@/components/chart/index.vue';
+
+  import useDashboardApi from '@/http/dashboard';
+  import { ToolTipFormatterParams } from '@/types/echarts';
+
+  type recordType = { value: number; name: string };
+
+  const record = ref<recordType[]>([]);
+
+  const { chartOption } = useChartOption(() => {
+    return {
+      grid: { left: 0, right: 0, top: 0, bottom: 0 },
+      label: { show: false },
+      tooltip: {
+        show: true,
+        trigger: 'item',
+        formatter(params) {
+          const item = params as ToolTipFormatterParams;
+
+          return `
+           <div class="content-panel">
+            <p>
+              <span style="background-color: ${item.color}" class="tooltip-item-icon"></span>
+              <span>${item.name}</span>
+            </p>
+            <span class="tooltip-value">${item.value?.toLocaleString()}</span>
+            <span class="tooltip-value">${item.percent?.toLocaleString()}%</span>
+          </div>`;
+        },
+        className: 'echarts-tooltip-diy',
+      },
+      series: [{ type: 'pie', radius: ['65%', '90%'], label: { show: false }, data: record.value }],
+    };
+  });
+
+  onMounted(async () => {
+    record.value = await useDashboardApi.activityStyle();
+  });
+</script>
+
+<style lang="less" scoped>
+  .echarts-tooltip-diy {
+    background: none !important;
+    border: none !important;
+  }
+
+  :deep(.arco-card) {
+    border-radius: 4px;
+  }
+
+  :deep(.arco-card-body) {
+    width: 100%;
+    height: 134px;
+  }
+
+  .content-wrap {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    white-space: nowrap;
+
+    .content {
+      width: 108px;
+
+      :deep(.arco-statistic) {
+        .arco-statistic-title {
+          font-size: 14px;
+          font-weight: bold;
+          white-space: nowrap;
+        }
+
+        .arco-statistic-content {
+          margin-top: 10px;
+        }
+      }
+    }
+
+    .chart {
+      width: calc(100% - 108px);
+      vertical-align: bottom;
+    }
+  }
+</style>

+<template>
+  <a-card>
+    <div class="content-wrap">
+      <div class="content">
+        <a-statistic :value="todayTotal" :value-from="0" animation show-group-separator title="上架的歌曲" />
+        <div class="desc">
+          <a-typography-text class="label" type="secondary"> 较昨日</a-typography-text>
+          <a-typography-text v-if="diffTotal < 0" type="success">
+            {{ diffTotal }}
+            <icon-arrow-fall />
+          </a-typography-text>
+          <a-typography-text v-else type="danger">
+            {{ diffTotal }}
+            <icon-arrow-rise />
+          </a-typography-text>
+        </div>
+      </div>
+      <div class="chart">
+        <Chart :option="chartOption" style="width: 100%" />
+      </div>
+    </div>
+  </a-card>
+</template>
+
+<script lang="ts" setup>
+  import useChartOption from '@/hooks/chart-option';
+  import { IconArrowFall, IconArrowRise } from '@arco-design/web-vue/es/icon';
+  import { computed, onMounted, ref } from 'vue';
+  import { subtract } from 'lodash';
+  import useDashboardApi from '@/http/dashboard';
+  import { ToolTipFormatterParams } from '@/types/echarts';
+
+  const record = ref<{ time: string[]; data: number[] }>({
+    time: [],
+    data: [],
+  });
+
+  const todayTotal = computed(() => {
+    return record.value.data[record.value.data.length - 1] || 0;
+  });
+  const diffTotal = computed(() => {
+    return subtract(record.value.data[record.value.data.length - 1], record.value.data[record.value.data.length - 2]) || 0;
+  });
+
+  const formatTooltip = (params: ToolTipFormatterParams[]) => {
+    const [firstElement] = params;
+    return `
+           <div class="content-panel">
+            <p>
+              <span style="background-color: ${firstElement.color}" class="tooltip-item-icon"></span>
+              <span>${firstElement.name}</span>
+            </p>
+            <span class="tooltip-value">${firstElement.value?.toLocaleString()}</span>
+          </div>`;
+  };
+
+  const { chartOption } = useChartOption(() => {
+    return {
+      grid: { left: 0, right: 0, top: 10, bottom: 5 },
+      xAxis: { type: 'category', show: false, boundaryGap: true, data: record.value.time },
+      yAxis: { show: false, type: 'value', scale: true },
+      tooltip: {
+        show: true,
+        trigger: 'axis',
+        formatter: (params) => formatTooltip(params as ToolTipFormatterParams[]),
+        className: 'echarts-tooltip-diy',
+      },
+      series: { data: record.value.data, type: 'line', showSymbol: false, smooth: true, lineStyle: { width: 3, color: '#165DFF' } },
+    };
+  });
+
+  onMounted(async () => {
+    record.value = await useDashboardApi.activityTotal();
+  });
+</script>
+
+<style lang="less" scoped>
+  :deep(.arco-card) {
+    border-radius: 4px;
+  }
+
+  :deep(.arco-card-body) {
+    width: 100%;
+    height: 134px;
+    //padding: 0;
+  }
+
+  .content-wrap {
+    width: 100%;
+    //padding: 16px;
+    white-space: nowrap;
+  }
+
+  :deep(.content) {
+    float: left;
+    width: 108px;
+    height: 102px;
+  }
+
+  :deep(.arco-statistic) {
+    .arco-statistic-title {
+      font-size: 14px;
+      font-weight: bold;
+      white-space: nowrap;
+    }
+
+    .arco-statistic-content {
+      margin-top: 10px;
+    }
+  }
+
+  .chart {
+    float: right;
+    width: calc(100% - 108px);
+    height: 100px;
+    vertical-align: bottom;
+  }
+
+  .label {
+    padding-right: 8px;
+    font-size: 12px;
+  }
+</style>

+<template>
+  <a-card :body-style="{ padding: '10px 20px 0 20px' }" :header-style="{ paddingBottom: 0 }" class="general-card" title="试听概览">
+    <template #extra>
+      <a-space size="12">
+        <export-button :on-download="onDownload" />
+        <a-range-picker
+          v-model="createBetween"
+          :allow-clear="false"
+          :disabled-date="disabledDate"
+          style="width: 260px"
+          value-format="YYYY-MM-DD"
+          @change="onFetch"
+          @select="onSelect"
+        />
+      </a-space>
+    </template>
+    <Chart :option="chartOption" height="328px" />
+  </a-card>
+</template>
+
+<script lang="ts" setup>
+  import Chart from '@/components/chart/index.vue';
+  import useChartOption from '@/hooks/chart-option';
+  import { ToolTipFormatterParams } from '@/types/echarts';
+  import { onMounted, ref } from 'vue';
+  import dayjs from 'dayjs';
+  import { sum } from 'lodash';
+  import useDashboardApi from '@/http/dashboard';
+
+  const createBetween = ref([dayjs().subtract(7, 'day').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')]);
+
+  const disabledDate = (current?: Date) => {
+    const date = createBetween.value;
+
+    if (date && date.length) {
+      return (
+        dayjs(current).isBefore(dayjs(date[0]).subtract(15, 'day')) ||
+        dayjs(current).isAfter(dayjs(date[0]).add(15, 'day')) ||
+        dayjs(current).isAfter(dayjs())
+      );
+    }
+    return dayjs(current).isAfter(dayjs());
+  };
+
+  const onSelect = (value: any[]) => {
+    createBetween.value = value;
+  };
+
+  const tooltipItemsHtmlString = (items: ToolTipFormatterParams[]) => {
+    return items
+      .reverse()
+      .map(
+        (el) => `<div class="content-panel">
+        <p>
+          <span style="background-color: ${el.color}" class="tooltip-item-icon"></span><span>${el.seriesName}</span>
+        </p>
+        <span class="tooltip-value">${el.value?.toLocaleString()}</span>
+      </div>`
+      )
+      .reverse()
+      .join('');
+  };
+
+  const record = ref<{
+    time: string[];
+    listen_user_count: number[];
+    listen_count: number[];
+    like_count: number[];
+    submit_count: number[];
+  }>({
+    time: [],
+    listen_user_count: [],
+    listen_count: [],
+    like_count: [],
+    submit_count: [],
+  });
+
+  const { chartOption } = useChartOption((isDark) => {
+    return {
+      grid: {
+        left: '40',
+        right: '40',
+        top: '40',
+        bottom: '40',
+      },
+      legend: {
+        top: 0,
+        right: 0,
+        bottom: 0,
+        icon: 'rect',
+        textStyle: {
+          color: '#4E5969',
+        },
+        formatter: (name) => {
+          switch (name) {
+            case '试听用户':
+              return `${name}(${sum(record.value.listen_user_count)})`;
+            case '试听次数':
+              return `${name}(${sum(record.value.listen_count)})`;
+            case '收藏次数':
+              return `${name}(${sum(record.value.like_count)})`;
+            case '提交作品':
+              return `${name}(${sum(record.value.submit_count)})`;
+            default:
+              return name;
+          }
+        },
+      },
+      tooltip: {
+        trigger: 'axis',
+        formatter(params) {
+          const [firstElement] = params as ToolTipFormatterParams[];
+          return `<div>
+            <p class="tooltip-title">${firstElement.axisValueLabel}</p>
+            ${tooltipItemsHtmlString(params as ToolTipFormatterParams[])}
+          </div>`;
+        },
+        className: 'echarts-tooltip-diy',
+      },
+      xAxis: [
+        {
+          type: 'category',
+          boundaryGap: true,
+          axisLine: {
+            lineStyle: { color: isDark ? '#3f3f3f' : '#A9AEB8' },
+          },
+          axisTick: {
+            show: true,
+            alignWithLabel: true,
+            lineStyle: { color: '#86909C' },
+          },
+          axisLabel: { color: '#86909C' },
+          data: record.value.time,
+        },
+      ],
+      yAxis: {
+        show: true,
+        type: 'value',
+        axisLabel: { color: '#86909C' },
+        splitLine: {
+          lineStyle: { color: isDark ? '#3F3F3F' : '#E5E6EB' },
+        },
+      },
+      series: [
+        {
+          name: '试听用户',
+          type: 'bar',
+          data: record.value.listen_user_count,
+          color: '#01629f',
+          seriesLayoutBy: 'row',
+          barWidth: 14,
+        },
+        {
+          name: '试听次数',
+          type: 'bar',
+          data: record.value.listen_count,
+          color: '#246EFF',
+          seriesLayoutBy: 'row',
+          barWidth: 14,
+        },
+        {
+          name: '收藏次数',
+          type: 'bar',
+          data: record.value.like_count,
+          color: '#00B2FF',
+          seriesLayoutBy: 'row',
+          barWidth: 14,
+        },
+        {
+          name: '提交作品',
+          type: 'bar',
+          data: record.value.submit_count,
+          color: '#81c0ff',
+          seriesLayoutBy: 'row',
+          barWidth: 14,
+        },
+      ],
+    };
+  });
+
+  const onFetch = async () => {
+    record.value = await useDashboardApi.overview({ createBetween: createBetween.value });
+  };
+
+  const onDownload = async () => useDashboardApi.getOverviewExport('活动数据', { createBetween: createBetween.value });
+
+  onMounted(() => onFetch());
+</script>
+
+<style lang="less" scoped>
+  .title {
+    line-height: normal;
+    font-weight: 500;
+    font-size: 16px;
+    color: var(--color-text-1);
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+</style>

+<template>
+  <a-card class="general-card" title="用户试唱" :header-style="{ paddingBottom: 0 }" :body-style="{ padding: '15px 20px 13px 20px' }">
+    <template #extra>
+      <a-space>
+        <a-range-picker
+          v-model="createBetween"
+          value-format="YYYY-MM-DD"
+          style="width: 260px"
+          :allow-clear="false"
+          :disabled-date="disabledDate"
+          @change="onSearch"
+        />
+        <export-button :on-download="onExport" />
+      </a-space>
+    </template>
+
+    <filter-table ref="tableRef" :loading="loading" :on-query="onQuery" size="mini">
+      <link-table-column
+        title="名称"
+        data-index="activity_name"
+        :link-style="{ fontSize: '12px' }"
+        :width="160"
+        :formatter="(item:TableData) => item.activity_name + ([3,5].includes(item.activity_status)? '（ 结束 ）' : '')"
+        :to="(item:TableData) => $router.push({ name:'audition-activity-show', params: { id: item.activity_id}  })"
+      />
+      <!--      <enum-table-column title="类型" data-index="activity_type" :width="60" :option="useActivityApi.songTypeOption" />-->
+      <link-table-column
+        title="厂牌"
+        data-index="project_id"
+        :link-style="{ fontSize: '12px' }"
+        :width="120"
+        :formatter="(item:TableData) => item.project?.name || ''"
+        :to="(item: TableData) => $router.push({ name: 'audition-project-show', params: { id: item.project_id } })"
+      />
+      <user-table-column
+        title="试唱用户"
+        data-index="user_id"
+        nick-index="user_nick_name"
+        :link-style="{ fontSize: '12px' }"
+        :width="120"
+        show-href
+      />
+      <filter-table-column title="身份" data-index="user_identify" :width="70">
+        <template #default="{ record }">
+          <span v-if="record.user_identity === 1">音乐人</span>
+          <span v-else-if="[2, 3].includes(record.user_identity)">经纪人</span>
+          <span v-else>未认证</span>
+        </template>
+      </filter-table-column>
+      <user-table-column
+        title="经纪人"
+        data-index="business_id"
+        user="business"
+        show-href
+        :width="110"
+        dark-value=""
+        :link-style="{ fontSize: '12px' }"
+      />
+      <filter-table-column title="试唱方式" data-index="mode" :width="80">
+        <template #default="{ record }">
+          <template v-if="record.mode === 1">自主上传</template>
+          <template v-else>{{ record.sing_type === 'Full' ? '唱整首' : '唱片段' }}</template>
+        </template>
+      </filter-table-column>
+      <link-table-column
+        v-if="usePermission().checkPermission('audition-activity-show-submit-user-view')"
+        title="合作模式"
+        data-index="price_id"
+        :link-style="{ fontSize: '12px' }"
+        :width="80"
+        :formatter="(item:TableData) => (item.price ? '查看报价' : '')"
+        :to="(item:TableData) =>onViewPrice(item.price) "
+      />
+      <filter-table-column title="提交时间" data-index="submit_at" :width="100">
+        <template #default="{ record }">
+          {{ dayjs(record.submit_at).format('MM/DD HH:mm') || '' }}
+        </template>
+      </filter-table-column>
+      <filter-table-column title="试唱音频" data-index="demo_url" :width="240">
+        <template #default="{ record }">
+          <audio-player :url="record.demo_url" :name="record.user_nick_name" />
+        </template>
+      </filter-table-column>
+      <a-table-column title="操作" data-index="operation" :width="120">
+        <template #cell="{ record }">
+          <a-button v-if="record.status === 1" size="mini" type="primary" status="success">已确认合作</a-button>
+          <a-button v-else-if="record.status === 2" size="mini">试唱不合适</a-button>
+          <a-button v-else-if="record.status === 0 && [3, 5].indexOf(record.activity_status) !== -1" size="mini">未采纳</a-button>
+          <template v-else-if="record.status === 0 && record.activity_status === 1">
+            <a-space v-if="usePermission().checkPermission('audition-activity-show-submit-user-audit')">
+              <a-button type="primary" size="mini" @click="onPass(record)">合作</a-button>
+              <a-button type="primary" status="danger" size="mini" @click="onNotPass(record)">不合适</a-button>
+            </a-space>
+            <a-button v-else size="mini">试唱待确认</a-button>
+          </template>
+          <a-button v-else size="mini">其他</a-button>
+        </template>
+      </a-table-column>
+    </filter-table>
+  </a-card>
+</template>
+
+<script lang="ts" setup>
+  import { computed, createVNode, onMounted, ref } from 'vue';
+  import dayjs from 'dayjs';
+  import useLoading from '@/hooks/loading';
+  import { Modal, TableData } from '@arco-design/web-vue';
+  import { createFormItemVNode, createFormVNode, createModalVNode } from '@/utils/createVNode';
+  import useDashboardApi from '@/http/dashboard';
+  import { AnyObject } from '@/types/global';
+  import FilterTable from '@/components/filter/table.vue';
+  import UserTableColumn from '@/components/filter/user-table-column.vue';
+  import LinkTableColumn from '@/components/filter/link-table-column.vue';
+  import { promiseToBoolean } from '@/utils';
+  import { useWorkApi } from '@/http/activity';
+  import usePermission from '@/hooks/permission';
+
+  const { loading, setLoading } = useLoading(false);
+  const { submitWork, getSubmitWorkExport } = useDashboardApi;
+
+  const createBetween = ref([dayjs().subtract(7, 'day').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')]);
+
+  const timeFilter = computed(() => {
+    return [`${createBetween.value[0]} 00:00:00`, `${createBetween.value[1]} 23:59:59`];
+  });
+
+  const tableRef = ref<typeof FilterTable>();
+
+  const onQuery = async (params: AnyObject) => {
+    setLoading(true);
+    return submitWork({ submitBetween: timeFilter.value, ...params, sortBy: 'submit_at', sortType: 'desc' }).finally(() =>
+      setLoading(false)
+    );
+  };
+
+  const onExport = () => getSubmitWorkExport('用户试唱', { submitBetween: timeFilter.value, sortBy: 'submit_at', sortType: 'desc' });
+
+  const onPass = (row: TableData) => {
+    const itemStyle = { lineHeight: '28px', margin: '4px 0' };
+
+    createModalVNode(
+      () =>
+        createVNode('ol', {}, [
+          createVNode('li', { style: itemStyle }, '此条Demo的状态将变更为合作状态'),
+          createVNode('li', { style: itemStyle }, `活动《${row.activity_name}》的状态变更为完成状态！`),
+        ]),
+      {
+        bodyStyle: { padding: 0 },
+        title: '确认合作',
+        onBeforeOk: () => promiseToBoolean(useWorkApi.changeStatus(row.id, { status: 1 })),
+        onOk: () => tableRef.value?.onFetch(),
+      }
+    );
+  };
+
+  const onNotPass = (row: TableData) => {
+    Modal.open({
+      title: '不合适标记',
+      content: `请确认是否将用户：${row.user_nick_name} 提交的试唱标记为不合适,并反馈给用户？`,
+      closable: false,
+      onBeforeOk: () => promiseToBoolean(useWorkApi.changeStatus(row.id, { status: 2, remark: '' })),
+      onOk: () => tableRef.value?.onFetch(),
+    });
+  };
+
+  const onViewPrice = (price: TableData) => {
+    createModalVNode(
+      () =>
+        createFormVNode({ size: 'small', model: price }, [
+          createFormItemVNode(
+            { label: '唱酬', showColon: true, rowClass: 'mb-0' },
+            price.value.is_reward ? `${price.value.amounts} 元` : '无'
+          ),
+          createFormItemVNode(
+            { label: '分成', showColon: true, rowClass: 'mb-0' },
+            price.value.is_dividend ? `${price.value.ratio}% | ${price.value.year} | ${price.is_deduct ? '抵扣' : '不抵扣'}` : '无'
+          ),
+          createFormItemVNode({ label: '价格是否可谈', showColon: true, rowClass: 'mb-0' }, price.is_talk ? '【可谈】' : '【不可谈】'),
+          createFormItemVNode(
+            { label: '录音地点', showColon: true, rowClass: 'mb-0' },
+            `${[price.address?.parent?.name, price.address?.name].join('/')}${
+              price.is_accept_address ? '【接受其他录音地点】' : '【不接受其他录音地点】'
+            }`
+          ),
+        ]),
+      {
+        title: '用户报价',
+        hideCancel: true,
+        okText: '我知道了',
+        bodyStyle: { padding: '8px 20px' },
+        width: '600px',
+      }
+    );
+  };
+
+  const disabledDate = (current?: Date) => dayjs(current).isAfter(dayjs()) || dayjs(current).isBefore(dayjs().subtract(30, 'day'));
+
+  const onSearch = () => tableRef.value?.onPageChange();
+
+  onMounted(async () => onSearch());
+</script>
+
+<style lang="less" scoped></style>

+s
+<template>
+  <a-card>
+    <div class="content-wrap">
+      <div class="content">
+        <a-statistic :value="todayTotal" :value-from="0" animation show-group-separator title="用户提交认证" />
+        <div class="desc">
+          <a-typography-text class="label" type="secondary"> 较昨日</a-typography-text>
+          <a-typography-text v-if="diffTotal < 0" type="success">
+            {{ diffTotal }}
+            <icon-arrow-fall />
+          </a-typography-text>
+          <a-typography-text v-else type="danger">
+            {{ diffTotal }}
+            <icon-arrow-rise />
+          </a-typography-text>
+        </div>
+      </div>
+      <div class="chart">
+        <Chart :option="registerChart" />
+      </div>
+    </div>
+  </a-card>
+</template>
+
+<script lang="ts" setup>
+  import useChartOption from '@/hooks/chart-option';
+  import { IconArrowFall, IconArrowRise } from '@arco-design/web-vue/es/icon';
+  import { computed, onMounted, ref } from 'vue';
+  import { subtract } from 'lodash';
+  import useDashboardApi from '@/http/dashboard';
+  import { ToolTipFormatterParams } from '@/types/echarts';
+
+  const record = ref<{ time: string[]; data: number[] }>({ time: [], data: [] });
+
+  const todayTotal = computed(() => {
+    return record.value.data[record.value.data.length - 1] || 0;
+  });
+  const diffTotal = computed(() => {
+    return subtract(record.value.data[record.value.data.length - 1], record.value.data[record.value.data.length - 2]) || 0;
+  });
+
+  const formatTooltip = (params: ToolTipFormatterParams[]) => {
+    const [firstElement] = params;
+    return `
+           <div class="content-panel">
+            <p>
+              <span style="background-color: ${firstElement.color}" class="tooltip-item-icon"></span>
+              <span>${firstElement.name}</span>
+            </p>
+            <span class="tooltip-value">${firstElement.value?.toLocaleString()}</span>
+          </div>`;
+  };
+
+  const { chartOption: registerChart } = useChartOption(() => {
+    return {
+      grid: { left: 0, right: 0, top: 10, bottom: 5 },
+      xAxis: { type: 'category', show: false, boundaryGap: true, data: record.value.time },
+      yAxis: { show: false, type: 'value', scale: true },
+      tooltip: {
+        show: true,
+        trigger: 'axis',
+        formatter: (params) => formatTooltip(params as ToolTipFormatterParams[]),
+        className: 'echarts-tooltip-diy',
+      },
+      series: { data: record.value.data, type: 'bar', barWidth: 8, itemStyle: { borderRadius: 2, color: '#165DFF' } },
+    };
+  });
+
+  onMounted(async () => {
+    record.value = await useDashboardApi.userCertify();
+  });
+</script>
+
+<style lang="less" scoped>
+  :deep(.arco-card) {
+    border-radius: 4px;
+  }
+
+  :deep(.arco-card-body) {
+    width: 100%;
+    height: 134px;
+    //padding: 0;
+  }
+
+  .content-wrap {
+    width: 100%;
+    //padding: 16px;
+    white-space: nowrap;
+  }
+
+  :deep(.content) {
+    float: left;
+    width: 108px;
+    height: 102px;
+  }
+
+  :deep(.arco-statistic) {
+    .arco-statistic-title {
+      font-size: 14px;
+      font-weight: bold;
+      white-space: nowrap;
+    }
+
+    .arco-statistic-content {
+      margin-top: 10px;
+    }
+  }
+
+  .chart {
+    float: right;
+    width: calc(100% - 108px);
+    //height: 90px;
+    vertical-align: bottom;
+  }
+
+  .label {
+    padding-right: 8px;
+    font-size: 12px;
+  }
+</style>

+<template>
+  <a-card>
+    <div class="content-wrap">
+      <div class="content">
+        <div data-v-55251d00="" class="arco-statistic">
+          <div class="arco-statistic-title">音乐人技能分布</div>
+          <div class="arco-statistic-content">
+            <div class="arco-statistic-value">
+              <span class="arco-statistic-value-integer"></span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="chart">
+        <Chart :option="chartOption" style="width: 100%" />
+      </div>
+    </div>
+  </a-card>
+</template>
+
+<script lang="ts" setup>
+  import useChartOption from '@/hooks/chart-option';
+  import { onMounted, ref } from 'vue';
+  import Chart from '@/components/chart/index.vue';
+
+  import useDashboardApi from '@/http/dashboard';
+  import { ToolTipFormatterParams } from '@/types/echarts';
+
+  type recordType = { value: number; name: string };
+
+  const record = ref<recordType[]>([]);
+
+  const { chartOption } = useChartOption(() => {
+    return {
+      grid: { left: 0, right: 0, top: 0, bottom: 0 },
+      label: { show: false },
+      tooltip: {
+        show: true,
+        trigger: 'item',
+        formatter(params) {
+          const item = params as ToolTipFormatterParams;
+
+          return `
+           <div class="content-panel">
+            <p>
+              <span style="background-color: ${item.color}" class="tooltip-item-icon"></span>
+              <span>${item.name}</span>
+            </p>
+            <span class="tooltip-value">${item.value?.toLocaleString()}</span>
+            <span class="tooltip-value">${item.percent?.toLocaleString()}%</span>
+          </div>`;
+        },
+        className: 'echarts-tooltip-diy',
+      },
+      series: [{ type: 'pie', radius: ['65%', '90%'], label: { show: false }, data: record.value }],
+    };
+  });
+
+  onMounted(async () => {
+    record.value = await useDashboardApi.userSkill();
+  });
+</script>
+
+<style lang="less" scoped>
+  .echarts-tooltip-diy {
+    background: none !important;
+    border: none !important;
+  }
+
+  :deep(.arco-card) {
+    border-radius: 4px;
+  }
+
+  :deep(.arco-card-body) {
+    width: 100%;
+    height: 134px;
+  }
+
+  .content-wrap {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    white-space: nowrap;
+
+    .content {
+      width: 108px;
+
+      :deep(.arco-statistic) {
+        .arco-statistic-title {
+          font-size: 14px;
+          font-weight: bold;
+          white-space: nowrap;
+        }
+
+        .arco-statistic-content {
+          margin-top: 10px;
+        }
+      }
+    }
+
+    .chart {
+      width: calc(100% - 108px);
+      vertical-align: bottom;
+    }
+  }
+</style>

+<template>
+  <a-card>
+    <div class="content-wrap">
+      <div class="content">
+        <div data-v-55251d00="" class="arco-statistic">
+          <div class="arco-statistic-title">歌手擅长曲风</div>
+          <div class="arco-statistic-content">
+            <div class="arco-statistic-value">
+              <span class="arco-statistic-value-integer"></span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="chart">
+        <Chart :option="chartOption" style="width: 100%" />
+      </div>
+    </div>
+  </a-card>
+</template>
+
+<script lang="ts" setup>
+  import useChartOption from '@/hooks/chart-option';
+  import { onMounted, ref } from 'vue';
+  import Chart from '@/components/chart/index.vue';
+
+  import useDashboardApi from '@/http/dashboard';
+  import { ToolTipFormatterParams } from '@/types/echarts';
+
+  type recordType = { value: number; name: string };
+
+  const record = ref<recordType[]>([]);
+
+  const { chartOption } = useChartOption(() => {
+    return {
+      grid: { left: 0, right: 0, top: 0, bottom: 0 },
+      label: { show: false },
+      tooltip: {
+        show: true,
+        trigger: 'item',
+        formatter(params) {
+          const item = params as ToolTipFormatterParams;
+          return `
+           <div class="content-panel">
+            <p>
+              <span style="background-color: ${item.color}" class="tooltip-item-icon"></span>
+              <span style="margin-right: 10px">${item.name}</span>
+            </p>
+            <span class="tooltip-value">${item.value?.toLocaleString()}</span>
+            <span class="tooltip-value">${item.percent?.toLocaleString()}%</span>
+          </div>`;
+        },
+        className: 'echarts-tooltip-diy',
+      },
+      series: [{ type: 'pie', radius: ['65%', '90%'], label: { show: false }, data: record.value }],
+    };
+  });
+
+  onMounted(async () => {
+    record.value = await useDashboardApi.userStyle();
+  });
+</script>
+
+<style lang="less" scoped>
+  .echarts-tooltip-diy {
+    background: none !important;
+    border: none !important;
+  }
+
+  :deep(.arco-card) {
+    border-radius: 4px;
+  }
+
+  :deep(.arco-card-body) {
+    width: 100%;
+    height: 134px;
+  }
+
+  .content-wrap {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    white-space: nowrap;
+
+    .content {
+      width: 108px;
+
+      :deep(.arco-statistic) {
+        .arco-statistic-title {
+          font-size: 14px;
+          font-weight: bold;
+          white-space: nowrap;
+        }
+
+        .arco-statistic-content {
+          margin-top: 10px;
+        }
+      }
+    }
+
+    .chart {
+      width: calc(100% - 108px);
+      vertical-align: bottom;
+    }
+  }
+</style>

+<template>
+  <a-card>
+    <div class="content-wrap">
+      <div class="content">
+        <div data-v-55251d00="" class="arco-statistic">
+          <div class="arco-statistic-title">用户概览</div>
+          <div class="arco-statistic-content">
+            <div class="arco-statistic-value">
+              <span class="arco-statistic-value-integer"></span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="chart">
+        <Chart :option="registerChart" style="width: 100%" />
+      </div>
+    </div>
+  </a-card>
+</template>
+
+<script lang="ts" setup>
+  import useChartOption from '@/hooks/chart-option';
+  import { onMounted, ref } from 'vue';
+  import useDashboardApi from '@/http/dashboard';
+  import { ToolTipFormatterParams } from '@/types/echarts';
+
+  const record = ref<{ type: string[]; data: number[] }>({ type: [], data: [] });
+
+  const formatTooltip = (params: ToolTipFormatterParams[]) => {
+    const [firstElement] = params;
+    return `<div class="content-panel">
+              <p>
+                <span style="background-color: ${firstElement.color}" class="tooltip-item-icon"></span>
+                <span>${firstElement.name}</span>
+              </p>
+              <span class="tooltip-value">${firstElement.value?.toLocaleString()}</span>
+            </div>`;
+  };
+
+  const { chartOption: registerChart } = useChartOption(() => {
+    return {
+      grid: { left: 0, right: 0, top: 10, bottom: 5 },
+      xAxis: { type: 'category', show: false, boundaryGap: true, data: record.value.type },
+      yAxis: { show: false, type: 'value', scale: true },
+      tooltip: {
+        show: true,
+        trigger: 'axis',
+        formatter: (params) => formatTooltip(params as ToolTipFormatterParams[]),
+        className: 'echarts-tooltip-diy',
+      },
+      series: { data: record.value.data, type: 'bar', barWidth: 16, itemStyle: { borderRadius: 2, color: '#165DFF' } },
+    };
+  });
+
+  onMounted(async () => {
+    record.value = await useDashboardApi.userTotal();
+  });
+</script>
+
+<style lang="less" scoped>
+  :deep(.arco-card) {
+    border-radius: 4px;
+  }
+
+  :deep(.arco-card-body) {
+    width: 100%;
+    height: 134px;
+  }
+
+  .content-wrap {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    white-space: nowrap;
+
+    .content {
+      width: 108px;
+
+      :deep(.arco-statistic) {
+        .arco-statistic-title {
+          font-size: 14px;
+          font-weight: bold;
+          white-space: nowrap;
+        }
+
+        .arco-statistic-content {
+          margin-top: 10px;
+        }
+      }
+    }
+
+    .chart {
+      width: calc(100% - 108px);
+      vertical-align: bottom;
+    }
+  }
+</style>

+<template>
+  <page-view has-bread>
+    <a-grid class="bot" :col-gap="12" :cols="24" :row-gap="12" style="margin-bottom: 16px">
+      <a-grid-item :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 6, xxl: 6 }">
+        <user-certify-card />
+      </a-grid-item>
+      <a-grid-item :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 6, xxl: 6 }">
+        <activity-total-card />
+      </a-grid-item>
+      <a-grid-item :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 6, xxl: 6 }">
+        <activity-listen-card />
+      </a-grid-item>
+      <a-grid-item :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 6, xxl: 6 }">
+        <activity-like-card />
+      </a-grid-item>
+      <a-grid-item :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 6, xxl: 6 }">
+        <activity-style-card />
+      </a-grid-item>
+      <a-grid-item :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 6, xxl: 6 }">
+        <user-style-card />
+      </a-grid-item>
+      <a-grid-item :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 6, xxl: 6 }">
+        <user-skill-card />
+      </a-grid-item>
+      <a-grid-item :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 6, xxl: 6 }">
+        <user-total-card />
+      </a-grid-item>
+    </a-grid>
+
+    <overview class="bot" />
+
+    <submit-work-panel class="bot" />
+  </page-view>
+</template>
+
+<script lang="ts" setup>
+  import Overview from '@/views/dashboard/components/overview.vue';
+  import SubmitWorkPanel from '@/views/dashboard/components/submit-work-panel.vue';
+  import ActivityLikeCard from '@/views/dashboard/components/activity-like-card.vue';
+  import UserCertifyCard from '@/views/dashboard/components/user-certify-card.vue';
+  import UserTotalCard from '@/views/dashboard/components/user-total-card.vue';
+  import UserSkillCard from '@/views/dashboard/components/user-skill-card.vue';
+  import UserStyleCard from '@/views/dashboard/components/user-style-card.vue';
+  import ActivityStyleCard from '@/views/dashboard/components/activity-style-card.vue';
+  import ActivityListenCard from '@/views/dashboard/components/activity-listen-card.vue';
+  import ActivityTotalCard from '@/views/dashboard/components/activity-total-card.vue';
+</script>
+
+<style lang="less" scoped>
+  .container {
+    padding: 0 30px 20px 20px;
+  }
+
+  .bot {
+    margin-bottom: 16px;
+  }
+</style>

+<template>
+  <div class="container">
+    <Breadcrumb :items="['exception', 'exception-403']" />
+    <div class="content">
+      <a-result class="result" status="403" subtitle="对不起，您没有访问该资源的权限" />
+      <a-button key="back" type="primary" @click="goBack"> 返回</a-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { useRouter } from 'vue-router';
+
+  const router = useRouter();
+
+  const goBack = () => router.back();
+</script>

+<template>
+  <div class="container">
+    <Breadcrumb :items="['exception', 'exception-404']" />
+    <div class="content">
+      <a-result class="result" status="404" subtitle="抱歉，页面不见了～"></a-result>
+      <div class="operation-row">
+        <!--        <a-button key="again" style="margin-right: 16px"> 重试</a-button>-->
+        <a-button key="back" type="primary" @click="goBack"> 返回</a-button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { useRouter } from 'vue-router';
+
+  const router = useRouter();
+
+  const goBack = () => router.back();
+</script>

+<template>
+  <div class="container">
+    <Breadcrumb :items="['exception', 'exception-500']" />
+    <div class="content">
+      <a-result class="result" status="500" subtitle="抱歉，服务器出了点问题～" />
+      <a-button key="back" type="primary" @click="goBack">返回</a-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { useRouter } from 'vue-router';
+
+  const router = useRouter();
+
+  const goBack = () => router.back();
+</script>
+
+<style lang="less" scoped></style>

+<template>
+  <router-view />
+</template>
+
+<script lang="ts">
+  import { defineComponent } from 'vue';
+
+  export default defineComponent({});
+</script>
+
+<style lang="less" scoped>
+  .container {
+    // position: relative;
+    // display: flex;
+    // flex-direction: column;
+    // align-items: center;
+    // justify-content: center;
+    // height: 100%;
+    // text-align: center;
+    // background-color: var(--color-bg-1);
+    padding: 0 30px 20px 20px;
+    height: calc(100% - 20px);
+
+    :deep(.content) {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      text-align: center;
+      background-color: var(--color-bg-1);
+      border-radius: 4px;
+    }
+  }
+</style>

+<template>
+  <a-form ref="fromRef" :model="userInfo" :rules="rules" class="login-form" layout="vertical">
+    <a-form-item field="email" hide-label>
+      <a-input v-model="userInfo.email" placeholder="请输入登陆邮箱">
+        <template #prefix>
+          <icon-user />
+        </template>
+      </a-input>
+    </a-form-item>
+    <a-form-item field="password" hide-label>
+      <a-input-password v-model="userInfo.password" allow-clear placeholder="请输入登陆密码">
+        <template #prefix>
+          <icon-lock />
+        </template>
+      </a-input-password>
+    </a-form-item>
+  </a-form>
+</template>
+
+<script lang="ts" setup>
+  import { IconLock, IconUser } from '@arco-design/web-vue/es/icon';
+  import { ref } from 'vue';
+  import { FormInstance } from '@arco-design/web-vue/es/form';
+  import { AttributeData } from '@/types/global';
+
+  const userInfo = ref({
+    email: import.meta.env.VITE_SHOW_LOGIN_ACCOUNT ? '1774507011@qq.com' : '',
+    password: import.meta.env.VITE_SHOW_LOGIN_ACCOUNT ? '112358ys' : '',
+  });
+
+  const rules = {
+    email: [{ required: true, message: '登陆邮箱不能为空' }],
+    password: [{ required: true, message: '密码不能为空' }],
+  };
+
+  const fromRef = ref<FormInstance>();
+  const onSubmit = (callback: (value: AttributeData) => void) => {
+    fromRef.value?.validate((errors) => !errors && callback(userInfo.value));
+  };
+
+  defineExpose({ onSubmit });
+</script>
+
+<style lang="less" scoped>
+  .login-form {
+    &-error-msg {
+      height: 32px;
+      color: rgb(var(--red-6));
+      line-height: 32px;
+    }
+
+    &-register-btn {
+      color: var(--color-text-3) !important;
+    }
+  }
+</style>

+<template>
+  <a-form v-model="formValue" class="login-form" size="small" auto-label-width>
+    <a-form-item show-colon label="找回方式" style="margin-bottom: 10px">
+      <a-radio-group v-model="apply" :options="applyType" />
+    </a-form-item>
+    <a-form-item v-if="apply === 1" show-colon label="手机号">
+      <a-input v-model="formValue.phone" max-length="14" placeholder="请输入" />
+    </a-form-item>
+    <a-form-item v-else show-colon label="邮箱">
+      <a-input v-model="email" placeholder="请输入" />
+    </a-form-item>
+    <a-form-item show-colon label="验证码">
+      <a-row :gutter="8">
+        <a-col :span="18">
+          <a-input v-model="formValue.code" max-length="6" placeholder="请输入" />
+        </a-col>
+        <a-col :span="6">
+          <a-button html-type="submit" type="primary">获取</a-button>
+        </a-col>
+      </a-row>
+    </a-form-item>
+    <div class="form-actions">
+      <a-link @click="type = 'login'">返回</a-link>
+      <a-button html-type="submit" type="primary">提交</a-button>
+    </div>
+  </a-form>
+</template>
+
+<script lang="ts" setup>
+  import { inject, ref } from 'vue';
+
+  const type = inject('type');
+
+  const apply = ref(1);
+  const applyType = ref([
+    { value: 1, label: '手机号' },
+    { value: 2, label: '邮箱' },
+  ]);
+
+  const email = ref('');
+
+  const formValue = ref({
+    phone: '',
+    code: '',
+  });
+</script>
+
+<style scoped>
+  .form-actions {
+    display: flex;
+    justify-content: space-between;
+  }
+</style>

+<template>
+  <a-form ref="fromRef" :model="userInfo" :rules="rules" class="login-form" layout="vertical">
+    <a-form-item field="phone" hide-label>
+      <a-select
+        v-model="userInfo.area"
+        style="flex: 100px; margin-right: 15px"
+        :options="areaOption"
+        :virtual-list-props="{ height: 200 }"
+      />
+      <a-input v-model="userInfo.phone" placeholder="请输入登陆手机号" :max-length="11">
+        <template #prefix>
+          <icon-phone />
+        </template>
+      </a-input>
+    </a-form-item>
+    <a-form-item show-colon hide-label>
+      <a-input v-model="userInfo.code" hide-button :max-length="6" placeholder="验证码" @input="formatCode">
+        <template #prefix>
+          <icon-message />
+        </template>
+        <template #suffix>
+          <a-link type="text" class="login-form-sms-btn" :disabled="countTime !== 0" @click="onSend()">
+            {{ countTime <= 0 ? '获取验证码' : countTime + 's' }}
+          </a-link>
+        </template>
+      </a-input>
+    </a-form-item>
+  </a-form>
+</template>
+
+<script lang="ts" setup>
+  import { IconMessage, IconPhone } from '@arco-design/web-vue/es/icon';
+  import { onMounted, ref } from 'vue';
+  import { useIntervalFn } from '@vueuse/core';
+  import { FormInstance } from '@arco-design/web-vue/es/form';
+  import { AttributeData } from '@/types/global';
+  import { Message } from '@arco-design/web-vue';
+  import useProviderApi from '@/http/provider';
+  import { map, union } from 'lodash';
+
+  const fromRef = ref<FormInstance>();
+  // const countTime = useStorage('smsTime', 0);
+  const countTime = ref(0);
+
+  const userInfo = ref({ area: '+86', phone: '', code: '' });
+
+  const areaOption = ref<string[]>([]);
+
+  onMounted(() => {
+    useProviderApi.area().then(({ data }) => (areaOption.value = union(map(data, (item) => item.identifier))));
+  });
+
+  const rules = {
+    phone: [{ required: true, message: '请输入手机号' }],
+    code: [{ required: true, message: '请输入验证码' }],
+  };
+
+  // eslint-disable-next-line no-return-assign
+  const { pause, resume } = useIntervalFn(() => (countTime.value <= 0 ? pause() : (countTime.value -= 1)), 1000);
+
+  const onSend = async () => {
+    if (countTime.value !== 0 || (await fromRef.value?.validateField('phone'))) {
+      return;
+    }
+
+    useProviderApi.sms('login', userInfo.value.phone, userInfo.value.area).then(() => {
+      Message.success('短信发送成功，请注意查收！');
+      countTime.value = 60;
+      resume();
+    });
+  };
+
+  const onSubmit = (callback: (value: AttributeData) => void) => {
+    fromRef.value?.validate((errors) => !errors && callback(userInfo.value));
+  };
+
+  const formatCode = (value: string) => {
+    userInfo.value.code = value.replace(/\D/g, '').slice(0, 6);
+  };
+
+  defineExpose({ onSubmit });
+</script>
+
+<style lang="less" scoped>
+  .login-form {
+    &-error-msg {
+      height: 32px;
+      color: rgb(var(--red-6));
+      line-height: 32px;
+    }
+
+    &-sms-btn {
+      padding-left: -12px;
+      font-size: 12px;
+    }
+  }
+</style>

+<template>
+  <div class="container">
+    <div class="banner">
+      <div class="banner-inner"></div>
+    </div>
+    <div class="content">
+      <div class="content-inner">
+        <div class="login-form-wrapper">
+          <div class="login-form-title">海星试唱</div>
+          <div class="login-form-sub-title">运营管理后台</div>
+          <a-card :bordered="true" :hoverable="true" :style="{ width: '360px' }">
+            <a-tabs v-model:active-key="loginType" :justify-="true" :animation="true">
+              <a-tab-pane key="email" title="邮箱登录">
+                <EmailForm ref="emailRef" />
+              </a-tab-pane>
+              <a-tab-pane key="phone" title="手机登录">
+                <PhoneForm ref="phoneRef" />
+              </a-tab-pane>
+            </a-tabs>
+            <div class="login-form-actions">
+              <!--              <a-link>忘记密码</a-link>-->
+              <a-button type="primary" :long="true" :loading="loading" @click="onLogin()"> 登录</a-button>
+            </div>
+          </a-card>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import EmailForm from '@/views/login/components/email-form.vue';
+  import PhoneForm from '@/views/login/components/phone-form.vue';
+
+  import { ref } from 'vue';
+  import { useRouter } from 'vue-router';
+  import { AttributeData } from '@/types/global';
+
+  import { setToken } from '@/utils/auth';
+  import { Message } from '@arco-design/web-vue';
+  import useLoading from '@/hooks/loading';
+  import useProviderApi from '@/http/provider';
+
+  const router = useRouter();
+  const { loading, setLoading } = useLoading(false);
+  const loginType = ref<'email' | 'phone'>('email');
+  const emailRef = ref<InstanceType<typeof EmailForm>>();
+  const phoneRef = ref<InstanceType<typeof PhoneForm>>();
+
+  const onSubmit = (value: AttributeData) => {
+    setLoading(true);
+    useProviderApi
+      .login(loginType.value, value)
+      .then(({ data }) => {
+        const { access_token, refresh_token, nick_name } = data;
+        setToken(access_token, refresh_token);
+        Message.success(`欢迎回来,管理员：${nick_name}`);
+        const { path } = router.currentRoute.value.query;
+        router.replace((path as string) || '/dashboard');
+      })
+      .finally(() => setLoading(false));
+  };
+
+  const onLogin = () => {
+    // eslint-disable-next-line default-case
+    switch (loginType.value) {
+      case 'email':
+        emailRef.value?.onSubmit(onSubmit);
+        break;
+      case 'phone':
+        phoneRef.value?.onSubmit(onSubmit);
+        break;
+    }
+  };
+</script>
+
+<style lang="less" scoped>
+  .container {
+    display: flex;
+    height: 100vh;
+
+    .banner {
+      width: 550px;
+    }
+
+    .content {
+      position: relative;
+      display: flex;
+      flex: 1;
+      align-items: center;
+      justify-content: center;
+      padding-bottom: 40px;
+
+      .login-form-wrapper {
+        width: 320px;
+      }
+
+      .login-form-title {
+        color: var(--color-text-1);
+        font-weight: 500;
+        font-size: 30px;
+        line-height: 46px;
+        text-align: center;
+      }
+
+      .login-form-sub-title {
+        color: var(--color-text-3);
+        font-size: 16px;
+        line-height: 24px;
+        text-align: center;
+        margin-bottom: 16px;
+      }
+
+      .login-form-actions {
+        display: flex;
+        justify-content: right;
+      }
+    }
+
+    .footer {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      width: 100%;
+    }
+  }
+
+  .logo {
+    position: fixed;
+    top: 24px;
+    left: 22px;
+    z-index: 1;
+    display: inline-flex;
+    align-items: center;
+
+    &-text {
+      margin-right: 4px;
+      margin-left: 4px;
+      color: var(--color-fill-1);
+      font-size: 20px;
+    }
+  }
+
+  .banner {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &-inner {
+      flex: 1;
+      height: 100%;
+      //background-image: url('/src/assets/images/bg.jpg');
+      background-image: url('https://spreadcdn.hikoon.com/default/bg.jpg');
+      background-size: cover;
+    }
+  }
+</style>

+<script setup lang="ts">
+  import { ref, onMounted } from 'vue';
+  import FilterTable from '@/components/filter/table.vue';
+  import FilterTableColumn from '@/components/filter/table-column.vue';
+
+  import useLoading from '@/hooks/loading';
+  import { AnyObject, Option } from '@/types/global';
+  import { Form, FormItem, Space, Input, Button, TableColumn } from '@arco-design/web-vue';
+  import useActivityApi from '@/http/activity';
+  import { Activity } from '@/types/activity';
+  import { cloneDeep, find, truncate, union } from 'lodash';
+  import dayjs from 'dayjs';
+  import useConfigApi from '@/http/config';
+
+  const { loading, setLoading } = useLoading(false);
+  const filter = ref({ songName: '', projectName: '' });
+  const tableRef = ref();
+
+  defineProps<{ userKey?: number }>();
+
+  const emits = defineEmits<{ (e: 'check', value: object): void; (e: 'checkRow', value: Activity): void }>();
+  const onQuery = async (params: AnyObject) => {
+    setLoading(true);
+    return useActivityApi
+      .get({ ...filter.value, audit_status: 1, status: [1, 3, 5], ...params, sortBy: 'id', sortType: 'desc' })
+      .finally(() => setLoading(false));
+  };
+
+  const onSearch = () => tableRef.value?.onPageChange(1);
+
+  const onReset = () => {
+    filter.value = { songName: '', projectName: '' };
+    onSearch();
+  };
+
+  const configOption = ref<Option[]>([]);
+  // const { activitySpeedOptions, activityLangOptions } = useSelectionStore();
+
+  onMounted(() => {
+    useConfigApi.getOption({ parentKey: ['activity_lang', 'activity_sex'] }).then((data) => {
+      configOption.value = data;
+    });
+
+    onReset();
+  });
+
+  const onSubmit = (row: Activity) => {
+    emits('checkRow', cloneDeep(row));
+
+    const lyricist: string[] = row.expand?.lyricist?.supplement || [];
+    row.links?.forEach((item) => row.expand?.lyricist?.ids?.includes(item.id) && lyricist.push(item.nick_name));
+    const composer: string[] = row.expand?.composer?.supplement || [];
+    row.links?.forEach((item) => row.expand?.composer?.ids?.includes(item.id) && composer.push(item.nick_name));
+    const arranger: string[] = row.expand?.arranger?.supplement || [];
+    row.links?.forEach((item) => row.expand?.arranger?.ids?.includes(item.id) && arranger.push(item.nick_name));
+
+    const tag: string[] = [];
+    row.tags?.forEach((item) => tag.push(item.name));
+    row.lang?.forEach((item) => tag.push(find(configOption.value, { value: item })?.label || ''));
+    tag.push(find(configOption.value, { value: row.sex })?.label || '');
+
+    emits('check', {
+      link_id: row.id,
+      link_name: row.song_name,
+      title: truncate(row.song_name, { length: 12 }),
+      cover: row.cover,
+      desc1: truncate(`出品：${row.project?.name}`, { length: 18 }),
+      desc2: truncate(`作词：${union(lyricist)?.join(' ')} 作曲：${union(composer)?.join(' ')} 编曲：${union(arranger)?.join(' ')}`, {
+        length: 18,
+      }),
+      desc3: truncate(`${tag?.join(' ')}\n预计发行时间：${dayjs(row.publish_at).format('YYYY年MM月DD日')}`, { length: 36 }),
+    });
+  };
+</script>
+
+<template>
+  <Form :model="filter" layout="inline" size="mini">
+    <FormItem label="歌曲名称" show-colon>
+      <Input v-model="filter.songName" allow-clear />
+    </FormItem>
+    <FormItem label="厂牌名称" show-colon>
+      <Input v-model="filter.projectName" allow-clear />
+    </FormItem>
+    <FormItem hide-label>
+      <Space>
+        <Button type="primary" @click="onSearch">搜索</Button>
+        <Button @click="onReset">重置</Button>
+      </Space>
+    </FormItem>
+  </Form>
+  <FilterTable
+    ref="tableRef"
+    size="mini"
+    :loading="loading"
+    :on-query="onQuery"
+    style="height: 300px; margin-top: 10px"
+    :scrollbar="true"
+    :scroll="{ y: 300 }"
+    :simple-page="true"
+  >
+    <FilterTableColumn data-index="song_name" title="歌曲名称" />
+    <FilterTableColumn data-index="project.name" title="厂牌名称" :width="200" />
+    <TableColumn title="操作" :width="80">
+      <template #cell="{ record }">
+        <Button size="mini" type="primary" @click="onSubmit(record)">
+          {{ record.id === userKey ? '更新' : '选择' }}
+        </Button>
+      </template>
+    </TableColumn>
+  </FilterTable>
+</template>
+
+<style scoped lang="less"></style>

+<script setup lang="ts">
+  import { Layout, LayoutContent, LayoutSider, Form, FormItem, Input, InputNumber, Select } from '@arco-design/web-vue';
+  import ImageUpload from '@/components/image-upload/index.vue';
+  import RoleSelect from '@/views/operation/banner/components/role-select.vue';
+  import { Banner } from '@/utils/model';
+  import useBannerApi from '@/http/bannner';
+  import { computed, ref, watch } from 'vue';
+  import { FormInstance } from '@arco-design/web-vue/es/form';
+  import { pick } from 'lodash';
+  import { AttributeData } from '@/types/global';
+  import { promiseToBoolean } from '@/utils';
+
+  type FormType = Pick<Banner, 'name' | 'scope' | 'weight' | 'permission' | 'type' | 'cover' | 'content_picture'>;
+
+  const props = defineProps<{ init?: AttributeData; http: (params?: object) => Promise<any> }>();
+
+  const { scopeOption, typeOption } = useBannerApi;
+
+  const formVal = ref<FormType>({
+    name: '',
+    scope: 1,
+    weight: 0,
+    permission: [],
+    type: 1,
+    cover: '',
+    content_picture: '',
+    ...pick(props.init, ['name', 'scope', 'weight', 'permission', 'type', 'cover', 'content_picture']),
+  });
+
+  const formRule = computed(() => {
+    return {
+      name: [{ required: true, message: '请输入名称' }],
+      scope: [{ required: true, message: '请选择展示位置' }],
+      weight: [{ required: true, message: '请输入权重' }],
+      permission: [{ required: true, message: '请选择浏览用户' }],
+      type: [{ required: true, message: '请选择类型' }],
+      cover: [{ required: true, message: '请选择封面' }],
+      content_picture: formVal.value.type === 1 ? [] : [{ required: true, message: '请输入链接地址' }],
+    };
+  });
+
+  const formRef = ref<FormInstance>();
+
+  watch(
+    () => formVal.value.type,
+    () => (formVal.value.content_picture = '')
+  );
+
+  const onSubmit = async (): Promise<boolean> => {
+    if (await formRef.value?.validate()) {
+      // eslint-disable-next-line prefer-promise-reject-errors
+      return Promise.reject(false);
+    }
+    return promiseToBoolean(props.http(formVal.value));
+  };
+
+  defineExpose({ onSubmit });
+</script>
+
+<template>
+  <Layout>
+    <LayoutContent class="content">
+      <Form ref="formRef" :model="formVal" :rules="formRule" auto-label-width>
+        <FormItem label="封面" field="cover" show-colon>
+          <ImageUpload v-model="formVal.cover" :width="500" :height="154" fit="contain" />
+        </FormItem>
+        <FormItem label="名称" field="name" show-colon>
+          <Input v-model="formVal.name" :max-length="30" show-word-limit placeholder="请输入" />
+        </FormItem>
+        <FormItem label="展示位置" field="scope" show-colon>
+          <Select v-model="formVal.scope" :options="scopeOption" placeholder="请选择" />
+        </FormItem>
+        <FormItem label="权重" field="weight" show-colon>
+          <InputNumber v-model="formVal.weight" :min="0" :max="200" placeholder="请输入" />
+        </FormItem>
+        <FormItem label="浏览用户" field="permission" show-colon>
+          <RoleSelect v-model="formVal.permission" :max-tag-count="3" style="height: 32px; width: 500px" />
+        </FormItem>
+        <FormItem label="类型" field="type" show-colon>
+          <Select v-model="formVal.type" :options="typeOption.filter((item) => [1, 2].includes(item.value))" placeholder="请选择" />
+        </FormItem>
+        <FormItem v-show="formVal.type === 2" label="详情" field="content_picture" show-colon row-class="mb-0">
+          <Input v-model="formVal.content_picture" placeholder="请输入" />
+        </FormItem>
+      </Form>
+    </LayoutContent>
+    <LayoutSider v-show="formVal.type === 1" class="side" :width="260">
+      <ImageUpload v-model="formVal.content_picture" :width="260" height="100%" min-height="414px" fit="fill" />
+    </LayoutSider>
+  </Layout>
+</template>
+
+<style scoped lang="less">
+  .side {
+    box-shadow: unset;
+    margin-left: 10px;
+    height: 414px;
+
+    :deep(.arco-upload-list-item) {
+      margin-top: 0 !important;
+
+      .arco-upload-picture-card {
+        height: 414px !important;
+      }
+    }
+  }
+</style>

+<script setup lang="ts">
+  import {
+    Col,
+    Form,
+    FormItem,
+    Input,
+    InputNumber,
+    Row,
+    Select,
+    Table,
+    TableColumn,
+    Avatar,
+    Link,
+    Space,
+    Button,
+    TableData,
+  } from '@arco-design/web-vue';
+  import { Banner, BannerLink } from '@/utils/model';
+  import { computed, createVNode, ref } from 'vue';
+  import useBannerApi from '@/http/bannner';
+  import ImageUpload from '@/components/image-upload/index.vue';
+  import { AnyObject } from '@/types/global';
+  import { FormInstance } from '@arco-design/web-vue/es/form';
+  import { createModalVNode } from '@/utils/createVNode';
+  import FormListItemContent from '@/views/operation/banner/components/form-list-item-content.vue';
+  import { cloneDeep, pick } from 'lodash';
+  import { promiseToBoolean } from '@/utils';
+  import RoleSelect from '@/views/operation/banner/components/role-select.vue';
+
+  type FormType = Pick<Banner, 'name' | 'scope' | 'weight' | 'permission' | 'type' | 'cover' | 'content'>;
+
+  const { scopeOption } = useBannerApi;
+
+  const props = defineProps<{ init?: AnyObject; http: (params?: object) => Promise<any> }>();
+
+  const formVal = ref<FormType>({
+    name: '',
+    scope: 1,
+    weight: 0,
+    permission: [],
+    type: 3,
+    cover: '',
+    content: [],
+    ...pick(props.init, ['name', 'scope', 'weight', 'permission ', 'type', 'cover', 'content']),
+  });
+
+  const formRule = computed(() => {
+    return {
+      name: [{ required: true, message: '请输入名称' }],
+      scope: [{ required: true, message: '请选择展示位置' }],
+      weight: [{ required: true, message: '请输入权重' }],
+      permission: [{ required: true, message: '请选择浏览用户' }],
+      type: [{ required: true, message: '请选择类型' }],
+      cover: [{ required: true, message: '请选择封面' }],
+      content: formVal.value.type === 1 ? [] : [{ required: true, message: '请输入链接地址' }],
+    };
+  });
+
+  const handleChange = (data: []) => {
+    formVal.value.content = data;
+  };
+
+  const onCreate = () => {
+    const formRef = ref();
+    createModalVNode(() => createVNode(FormListItemContent, { ref: formRef }), {
+      title: '新增',
+      titleAlign: 'center',
+      onBeforeOk: () => formRef.value?.onSubmit(),
+      onOk: () => formVal.value.content.push(formRef.value.getValue()),
+    });
+  };
+
+  const onUpdate = (row: BannerLink, index: number) => {
+    const formRef = ref();
+    createModalVNode(() => createVNode(FormListItemContent, { init: cloneDeep(row), ref: formRef }), {
+      title: '编辑',
+      titleAlign: 'center',
+      onBeforeOk: () => formRef.value?.onSubmit(),
+      onOk: () => formVal.value.content.splice(index, 1, formRef.value.getValue()),
+    });
+  };
+
+  const onDelete = (index: number) => {
+    formVal.value.content.splice(index, 1);
+  };
+
+  const formRef = ref<FormInstance>();
+
+  const onSubmit = async (): Promise<boolean> => {
+    if (await formRef.value?.validate()) {
+      // eslint-disable-next-line prefer-promise-reject-errors
+      return Promise.reject(false);
+    }
+    return promiseToBoolean(props.http(formVal.value));
+  };
+
+  defineExpose({ onSubmit });
+</script>
+
+<template>
+  <Form ref="formRef" style="width: 1100px" :model="formVal" :rules="formRule" auto-label-width label-align="right">
+    <Row :gutter="16">
+      <Col flex="auto">
+        <FormItem label="名称" field="name" show-colon row-class="form-item">
+          <Input v-model="formVal.name" :max-length="30" show-word-limit placeholder="请输入" />
+        </FormItem>
+        <FormItem label="展示位置" field="scope" show-colon row-class="form-item">
+          <Select v-model="formVal.scope" :options="scopeOption" placeholder="请选择" />
+        </FormItem>
+        <FormItem label="权重" field="weight" show-colon row-class="form-item">
+          <InputNumber v-model="formVal.weight" :min="0" :max="200" placeholder="请输入" />
+        </FormItem>
+        <FormItem label="浏览用户" field="permission" show-colon row-class="mb-0">
+          <RoleSelect v-model="formVal.permission" :max-tag-count="4" style="height: 32px" />
+        </FormItem>
+      </Col>
+      <Col flex="400px">
+        <FormItem label="封面" field="cover" row-class="mb-0" hide-label>
+          <ImageUpload v-model="formVal.cover" :width="380" :height="156" fit="fill" class="cover" />
+        </FormItem>
+      </Col>
+    </Row>
+  </Form>
+  <Row style="margin: 16px 0">
+    <Col :span="24">
+      <Space>
+        <Button type="primary" size="small" @click="onCreate">新增</Button>
+      </Space>
+    </Col>
+  </Row>
+  <Table
+    style="width: 1100px"
+    :bordered="true"
+    :data="formVal.content as TableData[]"
+    :show-header="false"
+    :pagination="false"
+    :draggable="{}"
+    @change="handleChange"
+  >
+    <template #columns>
+      <TableColumn data-index="cover" :width="50">
+        <template #cell="{ record }">
+          <Avatar :image-url="record.cover" fit="contain" shape="square" />
+        </template>
+      </TableColumn>
+      <TableColumn data-index="title" :width="200" />
+      <TableColumn data-index="content" :ellipsis="true" :tooltip="true" />
+      <TableColumn :width="100">
+        <template #cell="{ record, rowIndex }">
+          <Space>
+            <Link :hoverable="false" @click="onUpdate(record, rowIndex)">修改</Link>
+            <Link :hoverable="false" @click="onDelete(rowIndex)">删除</Link>
+          </Space>
+        </template>
+      </TableColumn>
+    </template>
+  </Table>
+</template>
+
+<style scoped lang="less">
+  .form-item {
+    margin-bottom: 10px !important;
+  }
+
+  :deep(.arco-upload-list-item) {
+    margin-top: 0 !important;
+  }
+</style>

+<script setup lang="ts">
+  import { Form, FormItem, Select, Input, Textarea } from '@arco-design/web-vue';
+  import { IconAttachment } from '@arco-design/web-vue/es/icon';
+  import { computed, createVNode, markRaw, ref, watch } from 'vue';
+  import { AnyObject } from '@/types/global';
+  import UserTable from '@/views/operation/banner/components/user-table.vue';
+  import { BannerLink } from '@/utils/model';
+  import { createModalVNode } from '@/utils/createVNode';
+  import ProjectTable from '@/views/operation/banner/components/project-table.vue';
+  import ActivityTable from '@/views/operation/banner/components/activity-table.vue';
+  import { FormInstance } from '@arco-design/web-vue/es/form';
+
+  const props = defineProps<{ init?: AnyObject }>();
+
+  const typeOption = [
+    { value: 1, label: '用户' },
+    { value: 2, label: '歌曲' },
+    { value: 3, label: '厂牌' },
+  ];
+
+  const formRef = ref<FormInstance>();
+
+  const formRule = {
+    link_type: [{ required: true, message: '请选择关联类型' }],
+    link_id: [{ type: 'number', min: 1, required: true, message: '请选择关联对象' }],
+    title: [{ required: true, message: '请输入名称' }],
+    content: [{ required: true, message: '请输入推荐语' }],
+  };
+
+  const formValue = ref<BannerLink>({
+    cover: '',
+    link_type: 1,
+    link_id: 0,
+    link_name: '',
+    title: '',
+    content: '',
+    desc1: '',
+    desc2: '',
+    desc3: '',
+    ...props.init,
+  });
+
+  watch(
+    () => formValue.value.link_type,
+    () => {
+      formValue.value.cover = '';
+      formValue.value.link_id = 0;
+      formValue.value.link_name = '';
+      formValue.value.title = '';
+      formValue.value.content = '';
+      formValue.value.desc1 = '';
+      formValue.value.desc2 = '';
+      formValue.value.desc3 = '';
+    }
+  );
+
+  const tableComponent = computed(() => {
+    switch (formValue.value.link_type) {
+      case 2:
+        return markRaw(ActivityTable);
+      case 3:
+        return markRaw(ProjectTable);
+      default:
+        return markRaw(UserTable);
+    }
+  });
+
+  const onChoose = () => {
+    const modal = ref();
+
+    modal.value = createModalVNode(
+      () =>
+        createVNode(tableComponent.value, {
+          userKey: formValue.value.link_id,
+          onCheck: (value: object) => {
+            Object.assign(formValue.value, value);
+            formRef.value?.clearValidate();
+            modal.value?.close();
+          },
+        }),
+      {
+        title: '关联对象',
+        titleAlign: 'center',
+        footer: false,
+        closable: true,
+        width: '760px',
+      }
+    );
+  };
+
+  const getValue = () => formValue.value;
+
+  const onSubmit = async (): Promise<boolean> => {
+    if (await formRef.value?.validate()) {
+      // eslint-disable-next-line prefer-promise-reject-errors
+      return Promise.reject(false);
+    }
+
+    return Promise.resolve(true);
+  };
+
+  defineExpose({ onSubmit, getValue });
+</script>
+
+<template>
+  <Form ref="formRef" :model="formValue" :rules="formRule">
+    <FormItem label="关联类型" field="link_type" show-colon>
+      <Select v-model="formValue.link_type" :options="typeOption" placeholder="请选择" />
+    </FormItem>
+    <FormItem label="关联对象" field="link_id" show-colon>
+      <Input :model-value="formValue.link_name" :readonly="true" placeholder="请选择" @focus="onChoose">
+        <template #suffix>
+          <IconAttachment />
+        </template>
+      </Input>
+    </FormItem>
+    <FormItem label="名称" field="title" show-colon>
+      <Input v-model="formValue.title" :max-length="12" placeholder="请输入" show-word-limit />
+    </FormItem>
+    <FormItem label="描述1" field="desc1" show-colon>
+      <Input v-model="formValue.desc1" :max-length="18" placeholder="请输入" show-word-limit />
+    </FormItem>
+    <FormItem label="描述2" field="desc2" show-colon>
+      <Input v-model="formValue.desc2" :max-length="18" placeholder="请输入" show-word-limit />
+    </FormItem>
+    <FormItem label="描述3" field="desc3" show-colon>
+      <Textarea v-model="formValue.desc3" :max-length="36" placeholder="请输入" :auto-size="{ minRows: 2, maxRows: 2 }" show-word-limit />
+    </FormItem>
+    <FormItem label="推荐语" field="content" show-colon row-class="mb-0">
+      <Textarea v-model="formValue.content" :max-length="36" placeholder="请输入" :auto-size="{ minRows: 2, maxRows: 2 }" show-word-limit />
+    </FormItem>
+  </Form>
+</template>
+
+<style scoped lang="less"></style>

+<script setup lang="ts">
+  import { Col, Form, FormItem, Input, InputNumber, Row, Select, Layout, LayoutContent, LayoutSider } from '@arco-design/web-vue';
+  import { onBeforeUnmount, ref, shallowRef } from 'vue';
+  import { FieldRule, FormInstance } from '@arco-design/web-vue/es/form';
+  import ImageUpload from '@/components/image-upload/index.vue';
+  import useBannerApi from '@/http/bannner';
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
+  import { Boot } from '@wangeditor/editor';
+  import '@/views/operation/notification/module';
+  import { AttributeData } from '@/types/global';
+  import { pick } from 'lodash';
+  import { promiseToBoolean } from '@/utils';
+  import RoleSelect from '@/views/operation/banner/components/role-select.vue';
+
+  const props = defineProps<{ init?: AttributeData; http: (params?: object) => Promise<any> }>();
+  const { scopeOption } = useBannerApi;
+
+  const formRef = ref<FormInstance>();
+  const editorRef = shallowRef();
+
+  Boot.setEditorConfig({ readOnly: false });
+
+  const onCreateEditor = (editor: unknown) => {
+    editorRef.value = editor;
+  };
+
+  onBeforeUnmount(() => {
+    const editor = editorRef.value;
+    if (editor == null) return;
+    editor.destroy();
+  });
+
+  const formVal = ref({
+    name: '',
+    scope: 1,
+    weight: 0,
+    permission: [],
+    type: 4,
+    cover: '',
+    content: '',
+    ...pick(props.init, ['name', 'scope', 'weight', 'permission', 'type', 'cover', 'content']),
+  });
+
+  const formRule = {
+    link_type: [{ required: true, message: '请选择关联类型' }],
+    link_id: [{ type: 'number', min: 1, required: true, message: '请选择关联对象' }],
+    title: [{ required: true, message: '请输入名称' }],
+    content: [{ required: true, message: '请输入推荐语' }],
+  } as Record<string, FieldRule[]>;
+
+  const onSubmit = async (): Promise<boolean> => {
+    if (await formRef.value?.validate()) {
+      // eslint-disable-next-line prefer-promise-reject-errors
+      return Promise.reject(false);
+    }
+    return promiseToBoolean(props.http(formVal.value));
+  };
+
+  defineExpose({ onSubmit });
+</script>
+
+<template>
+  <Form ref="formRef" :model="formVal" :rules="formRule" style="width: 1321px" auto-label-width label-align="right">
+    <Row :gutter="16">
+      <Col flex="auto">
+        <FormItem label="名称" field="name" show-colon row-class="form-item">
+          <Input v-model="formVal.name" :max-length="30" show-word-limit placeholder="请输入" />
+        </FormItem>
+        <FormItem label="展示位置" field="scope" show-colon row-class="form-item">
+          <Select v-model="formVal.scope" :options="scopeOption" placeholder="请选择" />
+        </FormItem>
+        <FormItem label="权重" field="weight" show-colon row-class="form-item">
+          <InputNumber v-model="formVal.weight" :min="0" :max="200" placeholder="请输入" />
+        </FormItem>
+        <FormItem label="浏览用户" field="permission" show-colon row-class="mb-0">
+          <RoleSelect v-model="formVal.permission" :max-tag-count="6" style="height: 32px" />
+        </FormItem>
+      </Col>
+      <Col flex="420px">
+        <FormItem label="封面" field="cover" row-class="mb-0" hide-label>
+          <ImageUpload v-model="formVal.cover" :width="380" :height="156" fit="fill" class="cover" />
+        </FormItem>
+      </Col>
+      <Col :span="24" style="margin-top: 16px; margin-bottom: -24px">
+        <Toolbar style="border-top: 1px solid #ccc; border-bottom: 1px solid #ccc" :editor="editorRef" />
+        <Layout>
+          <LayoutContent>
+            <Editor v-model="formVal.content" style="height: 400px" @on-created="onCreateEditor" />
+          </LayoutContent>
+          <LayoutSider class="rich" :width="420">
+            <!-- eslint-disable vue/no-v-html -->
+            <div class="content" v-html="formVal.content" />
+            <!--eslint-enable-->
+          </LayoutSider>
+        </Layout>
+      </Col>
+    </Row>
+  </Form>
+</template>
+
+<style scoped lang="less">
+  .form-item {
+    margin-bottom: 10px !important;
+  }
+
+  :deep(.arco-upload-list-item) {
+    margin-top: 0 !important;
+  }
+
+  .rich {
+    box-shadow: unset;
+    border-left: 1px solid #e8e8e8;
+
+    .content {
+      overflow-y: auto;
+      height: 400px;
+      padding: 0 10px;
+
+      :deep(img) {
+        height: auto !important;
+        max-width: 100%;
+        object-fit: contain;
+      }
+
+      :deep(video) {
+        max-width: 100%;
+        height: auto !important;
+        display: block;
+        margin: 0 auto;
+      }
+    }
+  }
+</style>

+<script setup lang="ts">
+  import { ref, onMounted } from 'vue';
+  import FilterTable from '@/components/filter/table.vue';
+  import FilterTableColumn from '@/components/filter/table-column.vue';
+  import NumberTableColumn from '@/components/filter/number-table-column.vue';
+
+  import useLoading from '@/hooks/loading';
+  import { AnyObject } from '@/types/global';
+  import { Form, FormItem, Space, Input, Button, TableColumn } from '@arco-design/web-vue';
+  import useProjectApi from '@/http/project';
+  import { Project } from '@/utils/model';
+  import { truncate } from 'lodash';
+
+  const { loading, setLoading } = useLoading(false);
+  const filter = ref({ name: '' });
+  const tableRef = ref();
+
+  defineProps<{ userKey?: number }>();
+
+  const emits = defineEmits<{ (e: 'check', value: object): void }>();
+  const onQuery = async (params: AnyObject) => {
+    setLoading(true);
+    return useProjectApi
+      .get({ ...filter.value, status: 1, setWithCount: ['activity_up'], ...params, sortBy: 'weight', sortType: 'desc' })
+      .finally(() => setLoading(false));
+  };
+
+  const onSearch = () => tableRef.value?.onPageChange(1);
+
+  const onReset = () => {
+    filter.value = { name: '' };
+    onSearch();
+  };
+
+  onMounted(() => onReset());
+
+  const onSubmit = (row: Project) => {
+    emits('check', {
+      link_id: row.id,
+      link_name: row.name,
+      title: truncate(row.name, { length: 12 }),
+      cover: row.cover,
+      desc1: '',
+      desc2: `上架歌曲：${row.activity_up_count}首`,
+      desc3: truncate(row.intro, { length: 36 }),
+    });
+  };
+</script>
+
+<template>
+  <Form :model="filter" layout="inline" size="mini">
+    <FormItem label="厂牌名称" show-colon>
+      <Input v-model="filter.name" allow-clear />
+    </FormItem>
+    <FormItem hide-label>
+      <Space>
+        <Button type="primary" @click="onSearch">搜索</Button>
+        <Button @click="onReset">重置</Button>
+      </Space>
+    </FormItem>
+  </Form>
+  <FilterTable
+    ref="tableRef"
+    size="mini"
+    :loading="loading"
+    :on-query="onQuery"
+    style="height: 300px; margin-top: 10px"
+    :scrollbar="true"
+    :scroll="{ y: 300 }"
+    :simple-page="true"
+  >
+    <FilterTableColumn data-index="name" title="厂牌名称" />
+    <NumberTableColumn data-index="activity_up_count" title="上架歌曲数" :width="100" />
+    <TableColumn title="操作" :width="80">
+      <template #cell="{ record }">
+        <Button size="mini" type="primary" @click="onSubmit(record)">
+          {{ record.id === userKey ? '更新' : '选择' }}
+        </Button>
+      </template>
+    </TableColumn>
+  </FilterTable>
+</template>
+
+<style scoped lang="less"></style>

+<script setup lang="ts">
+  import { computed, onMounted, ref } from 'vue';
+  import useTagApi from '@/http/Tag';
+  import { TreeNodeData, TreeSelect, Checkbox } from '@arco-design/web-vue';
+  import { pull, startsWith, truncate, reject, find } from 'lodash';
+
+  const formValue = defineModel<string[]>({ default: () => [] });
+  const parentKey = { broker: 'captain', manager: 'project' };
+
+  const handleExtCheckTrue = (key: string, parentKey: string) => {
+    if (!formValue.value.includes(key)) {
+      formValue.value.push(key);
+    }
+    pull(formValue.value, parentKey);
+  };
+
+  const handleExtCheckFalse = (key: string, parentKey: string) => {
+    pull(formValue.value, key);
+    if (!formValue.value.includes(parentKey)) {
+      formValue.value.push(parentKey);
+    }
+  };
+
+  const handleExtCheck = (key: string, value: boolean) =>
+    value ? handleExtCheckTrue(key, parentKey[key]) : handleExtCheckFalse(key, parentKey[key]);
+
+  const brokerValue = computed({
+    get: (): boolean => formValue.value.includes('broker'),
+    set: (value: boolean) => handleExtCheck('broker', value),
+  });
+
+  const managerValue = computed({
+    get: (): boolean => formValue.value.includes('manager'),
+    set: (value: boolean) => handleExtCheck('manager', value),
+  });
+
+  const treeValue = computed({
+    get: () => {
+      const values = formValue.value.filter((item) => !['broker', 'manager'].includes(item));
+
+      if (formValue.value.includes('broker') && !formValue.value.includes('captain')) {
+        values.push('captain');
+      }
+
+      if (formValue.value.includes('manager') && !formValue.value.includes('project')) {
+        values.push('project');
+      }
+
+      return values;
+    },
+    set: (value) => {
+      if (!value.includes('project')) {
+        pull(formValue.value, 'manager');
+      }
+
+      if (!value.includes('captain')) {
+        pull(formValue.value, 'broker');
+      }
+      const values = formValue.value?.filter((item) => ['broker', 'manager'].includes(item));
+
+      formValue.value = [...reject(value, (item) => values?.map((item) => parentKey[item]).includes(item)), ...values];
+    },
+  });
+
+  const userAuthTags = ref<TreeNodeData[]>([]);
+
+  const options = computed((): TreeNodeData[] => {
+    return [
+      { key: 'public', title: '未登录' },
+      { key: 'visitor', title: '游客' },
+      { key: 'musician', title: '音乐人', children: userAuthTags.value },
+      { key: 'captain', title: '队长' },
+      { key: 'project', title: '厂牌管理员' },
+      { key: 'system', title: '平台管理员' },
+    ];
+  });
+
+  onMounted(() => {
+    useTagApi.get({ type: 4, fetchType: 'all', setColumn: ['id', 'name'] }).then(({ data }) => {
+      userAuthTags.value = data.map((item) => ({ key: `musician_tag_${item.id}`, title: item.name }));
+    });
+  });
+
+  defineExpose({
+    formatRole: (role: string[]) => {
+      const values = [...options.value, { key: 'broker', title: '经纪人' }, { key: 'manager', title: '厂牌主理人' }];
+
+      return role
+        .map((item) => {
+          if (!startsWith(item, 'musician_tag_')) {
+            return find(values, { key: item })?.title;
+          }
+
+          const tagTitle = find(userAuthTags.value, { key: item })?.title;
+
+          if (tagTitle) {
+            return `音乐人 / ${tagTitle}`;
+          }
+
+          return tagTitle;
+        })
+        .filter((item) => item?.length !== 0)
+        .join('、');
+    },
+  });
+</script>
+
+<template>
+  <TreeSelect
+    v-model="treeValue"
+    :multiple="true"
+    :allow-clear="true"
+    :tree-checkable="true"
+    tree-checked-strategy="parent"
+    :fallback-option="false"
+    :data="options"
+    placeholder="请选择"
+  >
+    <template #label="{ data }">
+      <template v-if="data.value === 'captain' && brokerValue">经纪人</template>
+      <template v-else-if="data.value === 'project' && managerValue">厂牌主理人</template>
+      <template v-else-if="startsWith(data.value, 'musician_tag_')">音乐人 / {{ truncate(data.label, { length: 6 }) }}</template>
+      <template v-else>{{ data.label }}</template>
+    </template>
+    <template #tree-slot-extra="row">
+      <Checkbox v-if="row.key === 'captain'" v-model="brokerValue">仅通知经纪人</Checkbox>
+      <Checkbox v-if="row.key === 'project'" v-model="managerValue">仅通知主理人</Checkbox>
+    </template>
+  </TreeSelect>
+</template>
+
+<style>
+  .arco-tree-node:hover {
+    color: var(--color-text-1) !important;
+    background-color: var(--color-fill-2) !important;
+  }
+</style>

+<script setup lang="ts">
+  import { ref, onMounted } from 'vue';
+  import FilterTable from '@/components/filter/table.vue';
+  import FilterTableColumn from '@/components/filter/table-column.vue';
+  import EnumTableColumn from '@/components/filter/enum-table-column.vue';
+  import useUserApi from '@/http/user';
+  import useLoading from '@/hooks/loading';
+  import { AnyObject } from '@/types/global';
+  import { Form, FormItem, Space, Input, Button, TableColumn } from '@arco-design/web-vue';
+  import { User } from '@/utils/model';
+  import { truncate } from 'lodash';
+
+  const { loading, setLoading } = useLoading(false);
+  const filter = ref({ nick_name: '', real_name: '', status: 1 });
+  const tableRef = ref();
+
+  defineProps<{ userKey?: number }>();
+
+  const emits = defineEmits<{ (e: 'check', value: object): void }>();
+  const onQuery = async (params: AnyObject) => {
+    setLoading(true);
+    return useUserApi
+      .get({
+        ...filter.value,
+        ...params,
+        status: 1,
+        setColumn: ['id', 'nick_name', 'real_name', 'identity', 'avatar'],
+        setWith: ['styleTags:id,name', 'authTags:id,name', 'opus:id,song_name'],
+        sortBy: 'id',
+        sortType: 'desc',
+      })
+      .finally(() => setLoading(false));
+  };
+
+  const onSearch = () => tableRef.value?.onPageChange(1);
+
+  const onReset = () => {
+    filter.value = { nick_name: '', real_name: '', status: 1 };
+    onSearch();
+  };
+
+  const identityOption = [
+    { value: 0, label: '未认证' },
+    { value: 1, label: '音乐人' },
+    { value: 2, label: '经纪人' },
+    { value: 3, label: '音乐人、经纪人' },
+  ];
+
+  onMounted(() => onReset());
+
+  const onSubmit = (row: User) => {
+    emits('check', {
+      link_id: row.id,
+      link_name: row.nick_name,
+      title: truncate(row.nick_name, { length: 12 }),
+      cover: row.avatar || '',
+      desc1: truncate(`其它技能：${row.auth_tags?.map((item) => item.name)?.join(' ')}`, { length: 18 }),
+      desc2: truncate(`擅长风格：${row.style_tags?.map((item) => item.name)?.join(' ')}`, { length: 18 }),
+      desc3: truncate(`代表作：${row.opus?.map((item) => `《${item.song_name}》`)?.join('')}`, { length: 36 }),
+    });
+  };
+</script>
+
+<template>
+  <Form :model="filter" layout="inline" size="mini">
+    <FormItem label="用户艺名" show-colon>
+      <Input v-model="filter.nick_name" allow-clear />
+    </FormItem>
+    <FormItem label="用户真名">
+      <Input v-model="filter.real_name" allow-clear />
+    </FormItem>
+    <FormItem hide-label>
+      <Space>
+        <Button type="primary" @click="onSearch">搜索</Button>
+        <Button @click="onReset">重置</Button>
+      </Space>
+    </FormItem>
+  </Form>
+  <FilterTable
+    ref="tableRef"
+    size="mini"
+    :loading="loading"
+    :on-query="onQuery"
+    style="height: 300px; margin-top: 10px"
+    :scrollbar="true"
+    :scroll="{ y: 300 }"
+    :simple-page="true"
+  >
+    <FilterTableColumn data-index="nick_name" title="用户真名" />
+    <FilterTableColumn data-index="real_name" title="用户艺名" :width="200" />
+    <EnumTableColumn data-index="identity" :option="identityOption" title="用户身份" :width="120" />
+    <TableColumn title="操作" :width="80">
+      <template #cell="{ record }">
+        <Button size="mini" type="primary" @click="onSubmit(record)">
+          {{ record.id === userKey ? '更新' : '选择' }}
+        </Button>
+      </template>
+    </TableColumn>
+  </FilterTable>
+</template>
+
+<style scoped lang="less"></style>

+<template>
+  <page-view has-bread has-card>
+    <filter-search :model="filter" :loading="loading" @search="onSearch" @reset="onReset">
+      <filter-search-item label="名称">
+        <a-input v-model="filter.name" placeholder="请输入" allow-clear />
+      </filter-search-item>
+      <filter-search-item label="展示位置">
+        <a-select v-model="filter.scope" :options="scopeOption" placeholder="请选择" allow-clear />
+      </filter-search-item>
+      <filter-search-item label="浏览用户">
+        <RoleSelect ref="roleRef" v-model="filter.permission" :max-tag-count="2" style="height: 32px" />
+      </filter-search-item>
+      <filter-search-item label="状态">
+        <a-select v-model="filter.status" :options="statusOption" placeholder="请选择" allow-clear />
+      </filter-search-item>
+    </filter-search>
+    <filter-table ref="tableRef" :loading="loading" :on-query="onQuery">
+      <template #tool>
+        <icon-button v-permission="['operation-banner-create']" type="primary" icon="plus" label="新增" @click="onCreate" />
+      </template>
+      <a-table-column data-index="cover" title="图片" :width="220">
+        <template #cell="{ record }">
+          <a-image style="margin: 8px" :src="record.cover" :width="180" :height="80" fit="fill" />
+        </template>
+      </a-table-column>
+      <filter-table-column title="名称" data-index="name" :width="200" />
+      <enum-table-column title="展示位置" :option="scopeOption" data-index="scope" :width="120" />
+      <filter-table-column title="权重" data-index="weight" :width="80" />
+      <filter-table-column title="浏览用户" data-index="permission" :width="220">
+        <template #default="{ record }">{{ formatRole(record.permission) }}</template>
+      </filter-table-column>
+      <enum-table-column title="类型" :option="typeOption" data-index="type" :width="80" />
+      <date-table-column data-index="created_at" title="创建时间" :width="100" split />
+      <enum-table-column title="状态" :option="statusOption" data-index="status" :width="80" />
+      <space-table-column
+        v-if="usePermission().checkPermission(['operation-banner-edit', 'operation-banner-delete'])"
+        :width="120"
+        data-index="operations"
+        title="操作"
+      >
+        <template #default="{ record }">
+          <a-link
+            v-permission="['operation-banner-edit']"
+            class="link-hover"
+            :hoverable="false"
+            @click="onChange(record, Number(!record.status))"
+          >
+            {{ formatStatus(Number(!record.status)) }}
+          </a-link>
+          <a-link v-permission="['operation-banner-edit']" :hoverable="false" class="link-hover" @click="onUpdate(record)">编辑</a-link>
+          <a-link v-permission="['operation-banner-delete']" :hoverable="false" class="link-hover" @click="onDelete(record)">删除</a-link>
+        </template>
+      </space-table-column>
+    </filter-table>
+  </page-view>
+</template>
+
+<script lang="ts" setup>
+  import { ref, onMounted, createVNode } from 'vue';
+
+  import useLoading from '@/hooks/loading';
+  import useBannerApi from '@/http/bannner';
+  import { AnyObject, AttributeData } from '@/types/global';
+  import { createModalVNode, createSelectionFormItemVNode } from '@/utils/createVNode';
+  import { cloneDeep, find } from 'lodash';
+  import EnumTableColumn from '@/components/filter/enum-table-column.vue';
+  import FormBasicContent from '@/views/operation/banner/components/form-basic-content.vue';
+  import FormListContent from '@/views/operation/banner/components/form-list-content.vue';
+  import FormPageContent from '@/views/operation/banner/components/form-page-content.vue';
+  import SpaceTableColumn from '@/components/filter/space-table-column.vue';
+  import { TableData } from '@arco-design/web-vue';
+  import usePermission from '@/hooks/permission';
+  import DateTableColumn from '@/components/filter/date-table-column.vue';
+  import { promiseToBoolean } from '@/utils';
+  import RoleSelect from '@/views/operation/banner/components/role-select.vue';
+
+  const { scopeOption, typeOption, statusOption, get, changeStatus, create, update, destroy } = useBannerApi;
+
+  const { loading, setLoading } = useLoading(false);
+  const filter = ref({ name: '', scope: '', permission: [], status: '' });
+  const tableRef = ref();
+  const roleRef = ref();
+
+  // const formatPermission = (permisson) => {};
+
+  const formatRole = (role: string[]) => roleRef.value?.formatRole(role);
+  // role
+  //   .map((item) => find(roleOption, { value: item })?.label || '')
+  //   .filter((item) => item.length !== 0)
+  //   .join('、');
+
+  const formatStatus = (status: number) => find(statusOption, { value: status })?.label || '未知';
+
+  const onQuery = async (params?: AnyObject) => {
+    setLoading(true);
+    return get({ ...filter.value, ...params, sortBy: 'weight', sortType: 'desc' }).finally(() => setLoading(false));
+  };
+
+  const onSearch = () => tableRef.value?.onPageChange(1);
+
+  const onReset = () => {
+    filter.value = { name: '', scope: '', permission: [], status: '' };
+    onSearch();
+  };
+
+  onMounted(() => onReset());
+
+  const getTemplateComponent = (type: number) => {
+    if (type === 3) {
+      return FormListContent;
+    }
+    if (type === 4) {
+      return FormPageContent;
+    }
+
+    return FormBasicContent;
+  };
+
+  const onShowModal = (title: string, template: any, templateProp: any) => {
+    const formRef = ref();
+
+    createModalVNode(() => createVNode(template, { ref: formRef, ...templateProp }), {
+      title,
+      titleAlign: 'center',
+      width: 'auto',
+      onBeforeOk: () => formRef.value?.onSubmit(),
+      onOk: () => tableRef.value?.onFetch(),
+    });
+  };
+
+  const onCreate = () => {
+    const type = ref<number>(1);
+    const show = ref(false);
+    const options = [
+      { value: 1, label: '普通或外链' },
+      { value: 3, label: '交互' },
+      { value: 4, label: '自定义H5页面' },
+    ];
+
+    createModalVNode(() => createSelectionFormItemVNode(type, options, { label: '类型', rowClass: 'mb-0' }), {
+      title: '新增',
+      onOk: () => {
+        show.value = true;
+      },
+      onClose: () => {
+        if (show.value) {
+          onShowModal('新增Banner', getTemplateComponent(type.value), { http: (value: AttributeData) => create(value) });
+        }
+      },
+    });
+  };
+
+  const onUpdate = (row: TableData) =>
+    onShowModal('编辑Banner', getTemplateComponent(row.type), {
+      init: cloneDeep(row),
+      http: (value: AttributeData) => update(row.id, value),
+    });
+
+  const onChange = (row: TableData, status: number) =>
+    createModalVNode(`${find(statusOption, { value: status })?.label}轮播图：${row.name}`, {
+      title: '状态变更',
+      onBeforeOk: () => promiseToBoolean(changeStatus(row.id, { status })),
+      onOk: () => {
+        row.status = status;
+      },
+    });
+
+  const onDelete = (row: TableData) =>
+    createModalVNode(`删除轮播图：${row.name}`, {
+      title: '删除操作',
+      onBeforeOk: () => promiseToBoolean(destroy(row.id)),
+      onOk: () => tableRef.value?.onFetch(),
+    });
+</script>
+
+<style scoped></style>

+<script setup lang="ts">
+  import { Form, FormItem, Input, Textarea } from '@arco-design/web-vue';
+  import { computed, ref } from 'vue';
+  import { FormInstance } from '@arco-design/web-vue/es/form';
+
+  const props = defineProps<{ initValue?: object; submit?: (value: unknown) => Promise<unknown> }>();
+
+  const formRef = ref<FormInstance>();
+
+  const formValue = ref({ identifier: '', level_title: '', level_intro: '', match_title: '', match_intro: '', ...props.initValue });
+
+  const formRule = computed(() => {
+    return {
+      identifier: [{ required: true, message: '请输入分类' }],
+      level_intro: [{ validator: (value: any, cb: any) => (formValue.value.level_title && !value ? cb('请输入等级通知内容') : {}) }],
+      match_intro: [{ validator: (value: any, cb: any) => (formValue.value.match_title && !value ? cb('请输入合作通知内容') : {}) }],
+    };
+  });
+
+  const onSubmit = async () => {
+    const error = await formRef.value?.validate();
+    return error ? Promise.reject(error) : props.submit?.(formValue.value);
+  };
+
+  const getIdentifier = () => formValue.value.identifier;
+
+  defineExpose({ onSubmit, getIdentifier });
+</script>
+
+<template>
+  <Form ref="formRef" :model="formValue" :rules="formRule as any" auto-label-width>
+    <FormItem label="分类" field="identifier" show-colon>
+      <Input
+        v-model="formValue.identifier"
+        placeholder="请输入"
+        :max-length="32"
+        show-word-limit
+        @input="(value:any) => (formValue.identifier = value.replace(/[^A-Z]/g, ''))"
+      />
+      <template #extra> 仅允许输入A-Z字母组成字符串</template>
+    </FormItem>
+    <FormItem label="等级通知" field="level_title" show-colon>
+      <Input v-model="formValue.level_title" placeholder="请输入" :max-length="64" show-word-limit />
+    </FormItem>
+    <FormItem field="intro">
+      <Textarea v-model="formValue.level_intro" :max-length="500" show-word-limit :auto-size="{ minRows: 4, maxRows: 4 }" />
+    </FormItem>
+    <FormItem label="合作通知" field="match_title" show-colon>
+      <Input v-model="formValue.match_title" placeholder="请输入" :max-length="64" show-word-limit />
+    </FormItem>
+    <FormItem field="match_intro">
+      <Textarea v-model="formValue.match_intro" :max-length="500" show-word-limit :auto-size="{ minRows: 4, maxRows: 4 }" />
+    </FormItem>
+    <div style="color: rgba(44, 44, 44, 0.5); font-size: 14px; line-height: initial; margin-bottom: 6px">
+      注意：如模板中要引用变量，请参照下方规则
+    </div>
+    <div style="color: #ff0000; font-size: 14px; line-height: initial">
+      经纪人：{border}；歌手：{singer}；开始时间：{start}；结束时间：{end}；分类：{type}；厂牌：{brand}；歌曲名{song}
+    </div>
+  </Form>
+</template>
+
+<style scoped lang="less"></style>

+<template>
+  <filter-table ref="tableRef" :loading="loading" :on-query="onQuery" :hide-page="true">
+    <template #tool>
+      <icon-button v-permission="['operation-broker-push-config-create']" type="primary" icon="plus" label="新增" @click="onCreate" />
+      <div style="color: rgba(44, 44, 44, 0.5); margin-right: 10px">
+        名单外的经纪人，如果Ta的歌手达成合作，对应到分类：
+        <span style="color: #1d2129">{{ identifierOptions.find((item) => item.value === defaultIdentifier.content)?.label || '无' }}</span>
+      </div>
+      <a-link
+        v-permission="['operation-broker-push-config-relation']"
+        :hoverable="false"
+        style="text-decoration: underline"
+        @click="onSetting"
+        >设置关联
+      </a-link>
+    </template>
+    <filter-table-column title="分类" data-index="identifier" :width="80" />
+    <filter-table-column title="等级通知(标题)" data-index="level_title" :width="160" />
+    <filter-table-column title="等级通知(内容)" data-index="level_intro" :width="240" />
+    <filter-table-column title="合作通知(标题)" data-index="match_title" :width="160" />
+    <filter-table-column title="合作通知(内容)" data-index="match_intro" :width="240" />
+    <user-table-column title="创建人" data-index="user_id" user="user" show-href :width="140" />
+    <space-table-column
+      v-if="
+        usePermission().checkPermission([
+          'operation-broker-push-config-show',
+          'operation-broker-push-config-edit',
+          'operation-broker-push-config-delete',
+        ])
+      "
+      title="操作"
+      :width="120"
+    >
+      <template #default="{ record }">
+        <a-link v-permission="['operation-broker-push-config-show']" class="link-hover" :hoverable="false" @click="onView(record)">
+          查看
+        </a-link>
+        <a-link v-permission="['operation-broker-push-config-edit']" class="link-hover" :hoverable="false" @click="onUpdate(record)">
+          编辑
+        </a-link>
+        <a-link v-permission="['operation-broker-push-config-delete']" class="link-hover" :hoverable="false" @click="onDelete(record)">
+          删除
+        </a-link>
+      </template>
+    </space-table-column>
+  </filter-table>
+</template>
+
+<script setup lang="ts">
+  import { AnyObject } from '@/types/global';
+  import { createFormVNode, createModalVNode, createSelectionFormItemVNode } from '@/utils/createVNode';
+  import { computed, createVNode, h, onMounted, ref } from 'vue';
+
+  import ConfigForm from '@/views/operation/broker/components/config-form.vue';
+  import { usePushConfigApi } from '@/http/broker';
+  import useLoading from '@/hooks/loading';
+  import UserTableColumn from '@/components/filter/user-table-column.vue';
+  import SpaceTableColumn from '@/components/filter/space-table-column.vue';
+  import { TableData } from '@arco-design/web-vue';
+  import { clone } from 'lodash';
+  import useConfigApi from '@/http/config';
+  import { SystemConfig } from '@/types/system-config';
+  import { promiseToBoolean } from '@/utils';
+  import usePermission from '@/hooks/permission';
+
+  const { get, create, update, destroy } = usePushConfigApi;
+
+  const { loading, setLoading } = useLoading(false);
+  const tableRef = ref();
+
+  const defaultIdentifier = ref<Pick<SystemConfig, 'id' | 'content'>>({ id: 0, content: '' });
+
+  const onQuery = async (params: AnyObject) => {
+    setLoading(true);
+    return get({ ...params, fetchType: 'all', setWith: ['user:id,nick_name,identity'], sortBy: 'id', sortType: 'desc' }).finally(() =>
+      setLoading(false)
+    );
+  };
+
+  onMounted(async () => {
+    tableRef.value?.onPageChange();
+    defaultIdentifier.value = (await useConfigApi.getOne({ identifier: 'g65owmrgKSUhxV2afndUg', parent_id: 0 })) || { id: 0, content: '' };
+  });
+
+  const identifierOptions = computed(() => {
+    return [{ value: '', label: '无' }].concat(
+      tableRef.value?.getList()?.map((item: { id: number; identifier: string }) => {
+        return { value: item.identifier, label: item.identifier };
+      })
+    );
+  });
+
+  const onSetting = () => {
+    const formValue = ref(clone(defaultIdentifier.value.content));
+    createModalVNode(
+      () =>
+        createFormVNode({ model: formValue, autoLabelWidth: true }, [
+          createSelectionFormItemVNode(
+            formValue,
+            identifierOptions.value,
+            { label: '关联分类', style: { marginBottom: '8px' } },
+            { fallbackOption: false, placeholder: '请选择' }
+          ),
+          h(
+            'div',
+            { style: { color: 'rgba(44, 44, 44, 0.5)' } },
+            '注意：此处设置名单外的经纪人用户，如果Ta的歌手合作后，经纪人是否收到 [合作通知]，如需要收到合作通知，根据哪种分类进行推送'
+          ),
+        ]),
+      {
+        title: '其他关联设置',
+        titleAlign: 'center',
+        onBeforeOk: () => promiseToBoolean(useConfigApi.update(defaultIdentifier.value.id, { content: formValue.value })),
+        onOk: () => (defaultIdentifier.value.content = formValue.value),
+      }
+    );
+  };
+
+  const onView = (record: TableData) => {
+    createModalVNode(() => h(ConfigForm, { initValue: record, disabled: true }), {
+      title: '查看',
+      titleAlign: 'center',
+      width: '640px',
+      hideCancel: true,
+      okText: '我知道了',
+    });
+  };
+
+  const onCreate = () => {
+    const formRef = ref<InstanceType<typeof ConfigForm>>();
+    createModalVNode(() => createVNode(ConfigForm, { ref: formRef, submit: (val: AnyObject) => create(val) }), {
+      title: '新增',
+      titleAlign: 'center',
+      width: '640px',
+      onBeforeOk: () => promiseToBoolean(formRef.value?.onSubmit()),
+      onOk: () => tableRef.value?.onFetch(),
+    });
+  };
+
+  const onUpdate = (record: TableData) => {
+    const formRef = ref<InstanceType<typeof ConfigForm>>();
+    createModalVNode(
+      () => createVNode(ConfigForm, { initValue: record, ref: formRef, submit: (val: AnyObject) => update(record.id, val) }),
+      {
+        title: '编辑',
+        titleAlign: 'center',
+        width: '640px',
+        onBeforeOk: () => promiseToBoolean(formRef.value?.onSubmit()),
+        onOk: () => {
+          if (defaultIdentifier.value?.content === record.identifier) {
+            const content = formRef.value?.getIdentifier();
+            useConfigApi.update(defaultIdentifier.value.id, { content });
+            defaultIdentifier.value.content = content ?? '';
+          }
+          tableRef.value?.onFetch();
+        },
+      }
+    );
+  };
+
+  const onDelete = (record: TableData) =>
+    createModalVNode(`删除推送模版配置：${record.identifier}`, {
+      title: '删除操作',
+      onBeforeOk: () => promiseToBoolean(destroy(record.id)),
+      onOk: () => {
+        if (defaultIdentifier.value?.content === record.identifier) {
+          useConfigApi.update(defaultIdentifier.value.id, { content: '' });
+          defaultIdentifier.value.content = '';
+        }
+        tableRef.value?.onFetch();
+      },
+    });
+</script>
+
+<style scoped lang="less"></style>

+<script setup lang="ts">
+  import { createVNode, onBeforeMount, onMounted, ref } from 'vue';
+  import { usePushLevelRecordApi } from '@/http/broker';
+  import { AnyObject, Option } from '@/types/global';
+  import useLoading from '@/hooks/loading';
+
+  import useTagApi from '@/http/Tag';
+  import { Input, Select, Link, TableData, Textarea } from '@arco-design/web-vue';
+  import FilterSearch from '@/components/filter/search.vue';
+  import FilterSearchItem from '@/components/filter/search-item.vue';
+  import FilterTable from '@/components/filter/table.vue';
+  import FilterTableColumn from '@/components/filter/table-column.vue';
+  import UserTableColumn from '@/components/filter/user-table-column.vue';
+  import EnumTableColumn from '@/components/filter/enum-table-column.vue';
+  import SpaceTableColumn from '@/components/filter/space-table-column.vue';
+  import { createFormItemVNode, createFormVNode, createModalVNode } from '@/utils/createVNode';
+  import { get } from 'lodash';
+
+  const props = defineProps<{ recordId: number }>();
+
+  const { getChildren } = usePushLevelRecordApi;
+  const { loading, setLoading } = useLoading(false);
+  const filter = ref({ userName: '', authIds: [], status: '', readStatus: '' });
+  const tableRef = ref();
+
+  const statusOption = [
+    { value: 0, label: '待发送' },
+    { value: 1, label: '发送中' },
+    { value: 2, label: '已发送' },
+    { value: 3, label: '已撤销' },
+    { value: -1, label: '发送失败' },
+  ];
+
+  const readStatusOption = [
+    { value: 0, label: '未查看' },
+    { value: 1, label: '已查看' },
+  ];
+
+  const onQuery = async (params: AnyObject) => {
+    setLoading(true);
+    return getChildren(props.recordId, {
+      ...filter.value,
+      ...params,
+      setWith: ['user:id,nick_name,identity', 'user.authTags:id,name'],
+    }).finally(() => setLoading(false));
+  };
+
+  const onSearch = () => tableRef.value?.onPageChange(1);
+
+  const onReset = () => {
+    filter.value = { userName: '', authIds: [], status: '', readStatus: '' };
+    onSearch();
+  };
+
+  onMounted(() => onReset());
+
+  const authTagOptions = ref<Option[]>([]);
+
+  onBeforeMount(() => useTagApi.getOption({ type: 4 }).then((data) => (authTagOptions.value = data)));
+
+  const onView = (row: TableData) => {
+    createModalVNode(
+      () =>
+        createFormVNode({ model: row, autoLabelWidth: true }, [
+          createFormItemVNode({ label: '通知标题' }, createVNode(Input, { modelValue: row.title })),
+          createFormItemVNode(
+            { label: '通知内容', rowClass: 'mb-0' },
+            createVNode(Textarea, { modelValue: row.content, autoSize: { minRows: 6, maxRows: 12 } })
+          ),
+        ]),
+      {
+        title: '查看',
+        titleAlign: 'center',
+        footer: false,
+        escToClose: true,
+        maskClosable: true,
+      }
+    );
+  };
+</script>
+
+<template>
+  <FilterSearch :loading="loading" :model="filter" @search="onSearch" @reset="onReset">
+    <FilterSearchItem label="经纪人">
+      <Input v-model="filter.userName" placeholder="请输入" allow-clear />
+    </FilterSearchItem>
+    <FilterSearchItem label="认证能力">
+      <Select
+        v-model="filter.authIds"
+        placeholder="请选择"
+        :options="authTagOptions"
+        multiple
+        allow-clear
+        allow-search
+        :max-tag-count="2"
+      />
+    </FilterSearchItem>
+    <FilterSearchItem label="发送状态">
+      <Select v-model="filter.status" :options="statusOption" placeholder="请选择" allow-clear />
+    </FilterSearchItem>
+    <FilterSearchItem label="用户行为">
+      <Select v-model="filter.readStatus" :options="readStatusOption" placeholder="请选择" allow-clear />
+    </FilterSearchItem>
+  </FilterSearch>
+  <FilterTable ref="tableRef" :loading="loading" :on-query="onQuery">
+    <UserTableColumn title="经纪人" data-index="user_id" user="user" show-href :width="160" />
+    <FilterTableColumn title="认证能力" data-index="user_id" :width="200">
+      <template #default="{ record }">
+        <!-- eslint-disable -->
+        <span v-if="get(record, 'user.auth_tags')">
+          {{
+            get(record, 'user.auth_tags')
+              ?.map((item: any) => item.name)
+              ?.join('｜') || ''
+          }}
+        </span>
+        <!--eslint-enable-->
+        <span v-else style="color: rgba(44, 44, 44, 0.5)">无</span>
+      </template>
+    </FilterTableColumn>
+    <FilterTableColumn title="通知内容" data-index="content" :width="200" />
+    <FilterTableColumn title="发送时间" data-index="send_at" :width="180" />
+    <EnumTableColumn title="发送状态" data-index="status" :option="statusOption" :width="100" />
+    <FilterTableColumn data-index="read_at" title="用户行为" :width="100">
+      <template #default="{ record }: { record: { read_at?: string } }">{{ record.read_at ? '已查看' : '未查看' }}</template>
+    </FilterTableColumn>
+    <SpaceTableColumn data-index="operation" title="操作" :width="70">
+      <template #default="{ record }">
+        <Link class="link-hover" :hoverable="false" @click="onView(record)">查看</Link>
+      </template>
+    </SpaceTableColumn>
+  </FilterTable>
+</template>
+
+<style scoped lang="less"></style>

+<script setup lang="ts">
+  import { usePushLevelRecordApi } from '@/http/broker';
+  import { AnyObject, QueryForParams } from '@/types/global';
+  import useLoading from '@/hooks/loading';
+  import { computed, createVNode, h, onMounted, ref } from 'vue';
+  import SpaceTableColumn from '@/components/filter/space-table-column.vue';
+  import NumberTableColumn from '@/components/filter/number-table-column.vue';
+  import EnumTableColumn from '@/components/filter/enum-table-column.vue';
+  import { pick, range } from 'lodash';
+  import { Select, DatePicker, TableData } from '@arco-design/web-vue';
+  import { createFormItemVNode, createFormVNode, createModalVNode } from '@/utils/createVNode';
+  import dayjs, { OpUnitType } from 'dayjs';
+  import { promiseToBoolean } from '@/utils';
+  import PushLevelChildrenTable from '@/views/operation/broker/components/push-level-children-table.vue';
+
+  const { get, update, send, rollback, destroy, statusOption } = usePushLevelRecordApi;
+  const { loading, setLoading } = useLoading(false);
+  const tableRef = ref();
+  const filter = ref({ title: '', userName: '', sendBetween: [], status: '' });
+
+  const queryParams = computed((): QueryForParams => {
+    return { ...filter.value, setWithCount: ['items', 'readItems'], sortBy: 'publish_at', sortType: 'desc' };
+  });
+
+  const onQuery = async (params: AnyObject) => {
+    setLoading(true);
+    return get({ ...queryParams.value, ...params }).finally(() => setLoading(false));
+  };
+
+  const onSearch = () => tableRef.value?.onPageChange(1);
+
+  const onReset = () => {
+    filter.value = { title: '', userName: '', sendBetween: [], status: '' };
+    onSearch();
+  };
+
+  onMounted(() => onReset());
+
+  const isSameTime = (date: dayjs.ConfigType, unit: OpUnitType) => dayjs().isSame(dayjs(date), unit);
+
+  const onView = (row: TableData) => {
+    createModalVNode(() => createVNode(PushLevelChildrenTable, { recordId: row.id }), {
+      title: '详情',
+      titleAlign: 'center',
+      width: '1200px',
+      closable: true,
+      footer: false,
+    });
+  };
+
+  const onDelete = (row: TableData) =>
+    createModalVNode(`删除等级推送：${row.title}`, {
+      title: '删除操作',
+      onBeforeOk: () => promiseToBoolean(destroy(row.id)),
+      onOk: () => tableRef.value?.onFetch(),
+    });
+
+  const onSend = (row: TableData) =>
+    createModalVNode(`确认立即发送通知《${row.title}》`, {
+      title: '更新操作',
+      onBeforeOk: () => promiseToBoolean(send(row.id)),
+      onOk: () => tableRef.value?.onFetch(),
+    });
+
+  const onRollback = (row: TableData) =>
+    createModalVNode(`确认撤回发送通知《${row.title}》`, {
+      title: '撤回操作',
+      onBeforeOk: () => promiseToBoolean(rollback(row.id)),
+      onOk: () => tableRef.value?.onFetch(),
+    });
+
+  const onUpdate = (row: TableData) => {
+    const formValue = ref({ ...pick(row, 'is_alert', 'publish_at') });
+    const alertOption = [
+      { value: 0, label: '否' },
+      { value: 1, label: '是' },
+    ];
+    createModalVNode(
+      () =>
+        createFormVNode({ model: formValue }, [
+          createFormItemVNode(
+            { label: '发送时间', field: 'publish_at', required: true },
+            h(DatePicker, {
+              'style': { width: '100%' },
+              'modelValue': formValue.value.publish_at,
+              'showTime': true,
+              'dayStartOfWeek': 1,
+              'showNowBtn': false,
+              'allowClear': false,
+              'format': 'YYYY-MM-DD HH:mm',
+              'valueFormat': 'YYYY-MM-DD HH:mm:ss',
+              'timePickerProps': { hideDisabledOptions: true },
+              'onUpdate:modelValue': (val: any) => (formValue.value.publish_at = val),
+              'disabledDate': (current?: Date) => dayjs(current).isBefore(dayjs().subtract(1, 'day')),
+              'disabledTime': (current?: Date) => {
+                return {
+                  disabledHours: () => range(0, 23).filter((item) => isSameTime(current, 'day') && item < dayjs().hour()),
+                  disabledMinutes: () =>
+                    range(0, 59).filter(
+                      (item) => isSameTime(current, 'day') && isSameTime(current, 'hour') && item < dayjs().add(5, 'minute').minute()
+                    ),
+                };
+              },
+            })
+          ),
+          createFormItemVNode(
+            { label: '面板提醒', field: 'is_alert', required: true, rowClass: 'mb-0' },
+            h(Select, {
+              'options': alertOption,
+              'modelValue': formValue.value.is_alert,
+              'onUpdate:modelValue': (val?: unknown) => (formValue.value.is_alert = Number(val)),
+            })
+          ),
+        ]),
+      {
+        title: '编辑',
+        titleAlign: 'center',
+        onBeforeOk: () => promiseToBoolean(update(row.id, formValue.value)),
+        onOk: () => tableRef.value?.onFetch(),
+      }
+    );
+  };
+</script>
+
+<template>
+  <filter-search :loading="loading" :model="filter" @search="onSearch" @reset="onReset">
+    <filter-search-item label="名称">
+      <a-input v-model="filter.title" placeholder="请输入" allow-clear />
+    </filter-search-item>
+    <filter-search-item label="创建人">
+      <a-input v-model="filter.userName" placeholder="请输入" allow-clear />
+    </filter-search-item>
+    <filter-search-item label="发送时间">
+      <a-range-picker
+        v-model="filter.sendBetween"
+        :day-start-of-week="1"
+        :time-picker-props="{ defaultValue: ['00:00:00', '23:59:59'] }"
+        value-format="YYYY-MM-DD HH:mm:ss"
+        format="YYYY-MM-DD"
+      />
+    </filter-search-item>
+    <filter-search-item label="发送状态">
+      <a-select v-model="filter.status" :options="statusOption" placeholder="请选择" allow-clear />
+    </filter-search-item>
+  </filter-search>
+  <filter-table ref="tableRef" :loading="loading" :on-query="onQuery">
+    <filter-table-column title="名称" data-index="title" :width="260" />
+    <number-table-column title="推送经纪人（人数）" data-index="items_count" :width="160" />
+    <number-table-column title="查看人数" data-index="read_items_count" :dark-value="0" :width="100" />
+    <filter-table-column title="开始时间" data-index="begin_at" :width="180" />
+    <filter-table-column title="结束时间" data-index="end_at" :width="180" />
+    <filter-table-column title="发送时间" data-index="publish_at" :width="200" />
+    <enum-table-column title="发送状态" data-index="status" :option="statusOption" :width="120" />
+    <space-table-column title="操作" :width="120">
+      <template #default="{ record }: { record: { status: number } }">
+        <a-link class="link-hover" :hoverable="false" @click="onView(record)">查看</a-link>
+        <a-link v-if="record.status === 0" class="link-hover" :hoverable="false" @click="onUpdate(record)">编辑</a-link>
+        <a-link v-if="[-1, 3].includes(record.status)" class="link-hover" :hoverable="false" @click="onSend(record)">
+          {{ record.status === -1 ? '重试' : '发送' }}
+        </a-link>
+        <a-link v-if="record.status === 2" class="link-hover" :hoverable="false" @click="onRollback(record)">撤回</a-link>
+        <a-link v-if="record.status !== 1" class="link-hover" :hoverable="false" @click="onDelete(record)">删除</a-link>
+      </template>
+    </space-table-column>
+  </filter-table>
+</template>
+
+<style scoped lang="less"></style>

+<script setup lang="ts">
+  import useLoading from '@/hooks/loading';
+  import { AnyObject, QueryForParams } from '@/types/global';
+  import { usePushMatchRecordApi } from '@/http/broker';
+  import { computed, createVNode, onMounted, ref } from 'vue';
+  import UserTableColumn from '@/components/filter/user-table-column.vue';
+  import LinkTableColumn from '@/components/filter/link-table-column.vue';
+  import EnumTableColumn from '@/components/filter/enum-table-column.vue';
+  import SpaceTableColumn from '@/components/filter/space-table-column.vue';
+  import { Input, TableData, Textarea } from '@arco-design/web-vue';
+  import { createFormItemVNode, createFormVNode, createModalVNode } from '@/utils/createVNode';
+  import { promiseToBoolean } from '@/utils';
+
+  const { loading, setLoading } = useLoading(false);
+
+  const tableRef = ref();
+  const filter = ref({ brokerName: '', userName: '', projectName: '', activityName: '', status: '', read_status: '' });
+
+  const statusOption = [
+    { value: 0, label: '发送中' },
+    { value: 1, label: '已发送' },
+    { value: 2, label: '已撤销' },
+    { value: -1, label: '发送失败' },
+  ];
+
+  const readStatusOption = [
+    { value: 0, label: '未查看' },
+    { value: 1, label: '已查看' },
+  ];
+
+  const queryFilter = computed((): QueryForParams => {
+    return {
+      ...filter.value,
+      setWith: ['activity:id,song_name', 'project:id,name', 'user:id,nick_name,identity', 'broker:id,nick_name,identity'],
+      sortBy: 'id',
+      sortType: 'desc',
+    };
+  });
+
+  const onQuery = async (params: AnyObject) => {
+    setLoading(true);
+    return usePushMatchRecordApi.get({ ...queryFilter.value, ...params }).finally(() => setLoading(false));
+  };
+
+  const onSearch = () => tableRef.value?.onPageChange(1);
+
+  const onReset = () => {
+    filter.value = { brokerName: '', userName: '', projectName: '', activityName: '', status: '', read_status: '' };
+    onSearch();
+  };
+
+  onMounted(() => onReset());
+
+  const onExport = () => usePushMatchRecordApi.getExport('运营经纪人-合作通知日志', queryFilter.value);
+
+  const onView = (row: TableData) =>
+    createModalVNode(
+      () =>
+        createFormVNode({ model: row, autoLabelWidth: true }, [
+          createFormItemVNode({ label: '通知标题' }, createVNode(Input, { modelValue: row.title })),
+          createFormItemVNode(
+            { label: '通知内容', rowClass: 'mb-0' },
+            createVNode(Textarea, { modelValue: row.content, autoSize: { minRows: 6, maxRows: 12 } })
+          ),
+        ]),
+      {
+        title: '查看',
+        titleAlign: 'center',
+        hideCancel: true,
+        okText: '我知道了',
+        escToClose: true,
+      }
+    );
+
+  const onRollback = (row: TableData) =>
+    createModalVNode(`确认撤回发送通知《${row.title}》`, {
+      title: '撤销',
+      onBeforeOk: () => promiseToBoolean(usePushMatchRecordApi.rollback(row.id)),
+      onOk: () => tableRef.value?.onFetch(),
+    });
+
+  const onSend = (row: TableData) =>
+    createModalVNode(`确认立即发送通知《${row.title}》`, {
+      title: '更新操作',
+      onBeforeOk: () => promiseToBoolean(usePushMatchRecordApi.send(row.id)),
+      onOk: () => tableRef.value?.onFetch(),
+    });
+</script>
+
+<template>
+  <filter-search :loading="loading" :model="filter" @search="onSearch" @reset="onReset">
+    <filter-search-item label="经纪人">
+      <a-input v-model="filter.brokerName" placeholder="请输入" allow-clear />
+    </filter-search-item>
+    <filter-search-item label="试唱用户">
+      <a-input v-model="filter.userName" placeholder="请输入" allow-clear />
+    </filter-search-item>
+    <filter-search-item label="歌曲厂牌">
+      <a-input v-model="filter.projectName" placeholder="请输入" allow-clear />
+    </filter-search-item>
+    <filter-search-item label="关联歌曲">
+      <a-input v-model="filter.activityName" placeholder="请输入" allow-clear />
+    </filter-search-item>
+    <filter-search-item label="发送状态">
+      <a-select v-model="filter.status" :options="statusOption" placeholder="请选择" allow-clear />
+    </filter-search-item>
+    <filter-search-item label="用户行为">
+      <a-select v-model="filter.read_status" :options="readStatusOption" placeholder="请选择" allow-clear />
+    </filter-search-item>
+  </filter-search>
+  <filter-table ref="tableRef" :loading="loading" :on-query="onQuery">
+    <template #tool>
+      <export-button :on-download="onExport" />
+    </template>
+    <user-table-column data-index="broker_id" title="经纪人" user="broker" show-href :width="120" />
+    <filter-table-column data-index="broker_level" title="经纪人分类" :width="100">
+      <template #default="{ record }: { record: { broker_level: string } }">
+        <span v-if="record.broker_level">{{ record.broker_level }}</span>
+        <span v-else style="color: rgba(44, 44, 44, 0.5)">无</span>
+      </template>
+    </filter-table-column>
+    <user-table-column data-index="user_id" title="试唱用户" user="user" show-href :width="120" />
+    <filter-table-column data-index="user_tag" title="试唱用户认证" :width="200" />
+    <filter-table-column data-index="project.name" title="歌曲厂牌" :width="120" />
+    <link-table-column
+      data-index="activity_id"
+      title="关联歌曲"
+      :width="140"
+      :formatter="(record:any) => record.activity?.song_name"
+      :to="(record: any) => $router?.push({ name: 'audition-activity-show', params: { id: record.activity_id } })"
+    />
+    <filter-table-column data-index="content" title="通知内容" :width="240" />
+    <filter-table-column data-index="send_at" title="发送时间" :width="180" />
+    <enum-table-column data-index="status" title="发送状态" :option="statusOption" :width="100" />
+    <filter-table-column data-index="read_at" title="用户行为" :width="100">
+      <template #default="{ record }: { record: { read_at?: string } }">{{ record.read_at ? '已查看' : '未查看' }}</template>
+    </filter-table-column>
+    <space-table-column data-index="operation" title="操作" :width="100">
+      <template #default="{ record }: { record: { status: number } }">
+        <a-link class="link-hover" :hoverable="false" @click="onView(record)">查看</a-link>
+        <a-link v-if="record.status === 1" class="link-hover" :hoverable="false" @click="onRollback(record)">撤销</a-link>
+        <a-link v-if="[-1, 2].includes(record.status)" class="link-hover" :hoverable="false" @click="onSend(record)">
+          {{ record.status === -1 ? '重试' : '发送' }}
+        </a-link>
+      </template>
+    </space-table-column>
+  </filter-table>
+</template>
+
+<style scoped lang="less"></style>

+<script setup lang="ts">
+  import { fetchEventSource, EventSourceMessage } from '@microsoft/fetch-event-source';
+
+  import {
+    Form,
+    FormItem,
+    Upload,
+    Input,
+    Select,
+    RangePicker,
+    DatePicker,
+    Timeline,
+    TimelineItem,
+    Link,
+    RequestOption,
+  } from '@arco-design/web-vue';
+  import { ref, computed, onMounted, createVNode } from 'vue';
+  import { getToken } from '@/utils/auth';
+  import { createModalVNode } from '@/utils/createVNode';
+  import UserTableItem from '@/views/operation/broker/components/user-table-item.vue';
+  import useConfigApi from '@/http/config';
+  // import { downloadFile } from '@/http/auth';
+  import { first, last, range } from 'lodash';
+  import { isEqual } from '@arco-design/web-vue/es/_utils/is-equal';
+  import dayjs, { OpUnitType } from 'dayjs';
+  import { BrokerUserConfig } from '@/http/broker';
+
+  const pushOption = [
+    { value: 0, label: '不通知' },
+    { value: 1, label: '系统通知' },
+    { value: 2, label: '系统通知+面板提醒' },
+  ];
+
+  const props = defineProps<{
+    initValue?: BrokerUserConfig;
+    disabled?: boolean;
+    disabledUpload?: boolean;
+    disabledType?: boolean;
+    submit?: (value: unknown) => Promise<any>;
+  }>();
+
+  const templateUrl = ref('');
+
+  onMounted(async () => {
+    templateUrl.value = (await useConfigApi.getOne({ identifier: 't8iH6OBLP_WkzP-ILhF48', parent_id: 0 }))?.content || '';
+  });
+
+  const formRef = ref();
+  const formValue = ref<Omit<BrokerUserConfig, 'id' | 'user_id'>>({
+    title: '',
+    begin_at: '',
+    end_at: '',
+    push_type: 0,
+    push_at: '',
+    items: [],
+    ...props.initValue,
+  });
+  const formRule = computed(() => {
+    return {
+      title: [{ required: true, message: '请输入名称' }],
+      begin_at: [{ required: true, message: '请选择生效时间' }],
+      push_type: [{ required: true, message: '请选择推送方式' }],
+      push_at: [{ required: !isEqual(formValue.value.push_type, 0), message: '请选择推送时间' }],
+    };
+  });
+
+  const showTable = ref(!!props.initValue?.items);
+  const timePending = ref<string | false>(false);
+
+  const matchTotal = computed(() => formValue.value?.items?.filter((item) => item?.status === 1)?.length || 0);
+
+  const isFullMatch = computed(() => matchTotal.value !== 0 && formValue.value.items?.length === matchTotal.value);
+
+  const activationTime = computed({
+    get: () => [formValue.value.begin_at, formValue.value.end_at],
+    set: (val) => {
+      formValue.value.begin_at = first(val) || '';
+      formValue.value.end_at = last(val) || '';
+    },
+  });
+
+  const onSubmit = async () => {
+    const error = await formRef.value?.validate();
+    // eslint-disable-next-line no-use-before-define
+    if (timePending.value) {
+      // eslint-disable-next-line prefer-promise-reject-errors
+      return Promise.reject(false);
+    }
+    return error ? Promise.reject(error) : props.submit?.(formValue.value);
+  };
+
+  defineExpose({ onSubmit });
+
+  const isSameTime = (date: dayjs.ConfigType, unit: OpUnitType) => dayjs().isSame(dayjs(date), unit);
+
+  const disabledDate = (current?: Date) => dayjs(current).isBefore(dayjs().subtract(1, 'day'));
+  const disabledTime = (current?: Date) => {
+    return {
+      disabledHours: () => range(0, 23).filter((item) => isSameTime(current, 'day') && item < dayjs().hour()),
+      disabledMinutes: () =>
+        range(0, 59).filter(
+          (item) => isSameTime(current, 'day') && isSameTime(current, 'hour') && item < dayjs().add(5, 'minute').minute()
+        ),
+    };
+  };
+  // const onDownTemplate = () => downloadFile(templateUrl.value, '运营经纪人-经纪人配置');
+
+  const onViewItem = () =>
+    createModalVNode(() => createVNode(UserTableItem, { source: formValue.value.items }), {
+      width: '760px',
+      bodyStyle: { padding: '16px' },
+      footer: false,
+      maskClosable: true,
+      escToClose: true,
+    });
+
+  const finishParse = () => {
+    timePending.value = false;
+    showTable.value = true;
+  };
+
+  const onUpload = async ({ fileItem, onSuccess }: RequestOption) => {
+    const formData = new FormData();
+    formData.append('file', fileItem.file as File);
+    showTable.value = false;
+    timePending.value = '检查表格中的数据...';
+
+    await fetchEventSource(`${import.meta.env.VITE_API_HOST}/admin/system/broker/user-configs/upload`, {
+      method: 'POST',
+      openWhenHidden: true,
+      headers: { Authorization: `Bearer ${getToken()}` },
+      body: formData,
+      onopen() {
+        formValue.value.items = [];
+        onSuccess();
+        return Promise.resolve();
+      },
+      onclose() {
+        throw new Error();
+      },
+      onmessage(ev: EventSourceMessage) {
+        if (ev.event === 'finish') {
+          finishParse();
+          throw new Error('finish');
+        }
+        if (ev.event === 'item') {
+          formValue.value.items?.push({ user_id: ev.id, ...JSON.parse(ev.data) });
+        }
+      },
+      onerror() {
+        finishParse();
+        throw new Error('close');
+      },
+    });
+  };
+</script>
+
+<template>
+  <Form
+    ref="formRef"
+    :model="formValue"
+    :rules="formRule"
+    :disabled="disabled as boolean"
+    layout="horizontal"
+    size="small"
+    auto-label-width
+  >
+    <FormItem label="名称" field="title" show-colon>
+      <Input v-model="formValue.title" placeholder="请输入" :max-length="100" show-word-limit />
+    </FormItem>
+    <FormItem label="生效时间" show-colon field="begin_at">
+      <RangePicker
+        v-model="activationTime"
+        style="width: 100%"
+        :time-picker-props="{ defaultValue: ['00:00:00', '23:59:59'] }"
+        :day-start-of-week="1"
+        value-format="YYYY-MM-DD HH:mm:ss"
+        format="YYYY-MM-DD"
+      />
+    </FormItem>
+    <FormItem v-if="!disabledType" label="系统通知" field="push_type" show-colon>
+      <Select v-model="formValue.push_type" :options="pushOption" placeholder="请选择" :disabled="disabledType as boolean" />
+    </FormItem>
+    <FormItem v-if="!disabledType && formValue.push_type" label="推送时间" field="push_at" show-colon>
+      <DatePicker
+        v-model="formValue.push_at"
+        show-time
+        :day-start-of-week="1"
+        :show-now-btn="false"
+        :disabled="disabledType as boolean"
+        :disabled-input="true"
+        :disabled-date="disabledDate"
+        :disabled-time="disabledTime"
+        style="width: 100%"
+        value-format="YYYY-MM-DD HH:mm:ss"
+        format="YYYY-MM-DD HH:mm"
+      />
+    </FormItem>
+    <FormItem row-class="mb-0">
+      <Timeline :pending="timePending">
+        <TimelineItem>
+          下载模版
+          <template #label>
+            <Link :href="templateUrl" :hoverable="false">点击此处下载模板</Link>
+          </template>
+        </TimelineItem>
+        <TimelineItem>
+          在模板中添加要推送的经纪人，并将表格上传
+          <template #label>
+            <Upload accept=".xls,.xlsx" :show-file-list="false" :custom-request="onUpload" :disabled="disabledUpload || !!timePending">
+              <template #upload-button>
+                <Link h :hoverable="false" :disabled="disabledUpload || !!timePending">点击此处上传表格</Link>
+              </template>
+            </Upload>
+          </template>
+        </TimelineItem>
+        <TimelineItem v-if="showTable">
+          <template v-if="isFullMatch">数据检查：全部识别，共 {{ matchTotal }} 名经纪人</template>
+          <template v-else>数据检查：已匹配 {{ matchTotal }} 人，未匹配 {{ formValue.items?.length - matchTotal }} 人!</template>
+          <template #label>
+            <Link :hoverable="false" @click="onViewItem">查看匹配信息</Link>
+          </template>
+        </TimelineItem>
+      </Timeline>
+    </FormItem>
+  </Form>
+</template>
+
+<style scoped lang="less"></style>

+<script setup lang="ts">
+  import { Input, Select, Table, TableColumn, Form, FormItem, Grid } from '@arco-design/web-vue';
+  import { computed, ref, toRef } from 'vue';
+
+  import EnumTableColumn from '@/components/filter/enum-table-column.vue';
+  import NumberTableColumn from '@/components/filter/number-table-column.vue';
+  import { BrokerUserConfigItem } from '@/http/broker';
+
+  const props = defineProps<{ source: BrokerUserConfigItem[] }>();
+
+  const source = toRef(props, 'source', []);
+
+  const matchOption = [
+    { value: 0, label: '匹配失败' },
+    { value: 1, label: '已匹配' },
+  ];
+
+  const filter = ref({ nick_name: '', identifier: '', status: '' });
+
+  const filterSource = computed((): BrokerUserConfigItem[] => {
+    return source.value
+      ?.filter((item) => filter.value.nick_name?.length === 0 || item.user?.nick_name?.includes(filter.value.nick_name))
+      ?.filter((item) => filter.value.identifier?.length === 0 || item.identifier?.includes(filter.value.identifier))
+      ?.filter((item) => filter.value.status?.length === 0 || item.status?.toString().includes(filter.value.status));
+  });
+</script>
+
+<template>
+  <Form :model="filter" size="small" layout="horizontal" auto-label-width style="flex-wrap: unset">
+    <Grid :cols="3" :col-gap="16" :row-gap="16">
+      <FormItem label="经纪人" show-colon>
+        <Input v-model="filter.nick_name" placeholder="请输入" allow-clear />
+      </FormItem>
+      <FormItem label="分类" show-colon>
+        <Input v-model="filter.identifier" placeholder="请输入" allow-clear />
+      </FormItem>
+      <FormItem label="匹配结果" show-colon>
+        <Select v-model="filter.status" :options="matchOption" placeholder="请选择" allow-clear />
+      </FormItem>
+    </Grid>
+  </Form>
+  <Table
+    style="height: 300px"
+    :data="filterSource"
+    size="small"
+    :show-header="true"
+    :bordered="false"
+    :scroll="{ y: 300 }"
+    :virtual-list-props="{ height: 300 }"
+    row-key="user_id"
+    :pagination="false"
+    :table-layout-fixed="true"
+  >
+    <template #columns>
+      <TableColumn title="经纪人ID" data-index="user_id" :width="100" />
+      <TableColumn title="经纪人" data-index="user.nick_name">
+        <template #cell="{ record }">
+          <span v-if="record.user">{{ record.user.nick_name }}</span>
+          <span v-else style="color: rgba(44, 44, 44, 0.5)">无</span>
+        </template>
+      </TableColumn>
+      <TableColumn title="分类" data-index="identifier" />
+      <NumberTableColumn title="团队歌手额度" data-index="singer_num" />
+      <EnumTableColumn title="匹配结果" data-index="status" :option="matchOption" :width="120" />
+    </template>
+  </Table>
+</template>
+
+<style scoped lang="less"></style>

+<template>
+  <filter-search :loading="loading" :model="filter" @search="onSearch" @reset="onReset">
+    <filter-search-item label="名称">
+      <a-input v-model="filter.title" placeholder="请输入" />
+    </filter-search-item>
+    <filter-search-item label="创建人">
+      <a-input v-model="filter.userNickName" placeholder="请输入" />
+    </filter-search-item>
+    <filter-search-item label="创建时间">
+      <a-range-picker
+        v-model="filter.createBetween"
+        :time-picker-props="{ defaultValue: ['00:00:00', '23:59:59'] }"
+        :day-start-of-week="1"
+        value-format="YYYY-MM-DD HH:mm:ss"
+        format="YYYY-MM-DD"
+      />
+    </filter-search-item>
+    <filter-search-item label="状态">
+      <a-select v-model="filter.status" :options="statusOption" placeholder="请选择" allow-clear />
+    </filter-search-item>
+  </filter-search>
+  <filter-table ref="tableRef" :loading="loading" :on-query="onQuery">
+    <template #tool>
+      <icon-button v-permission="['operation-broker-user-config-create']" type="primary" icon="plus" label="新增" @click="onCreate" />
+    </template>
+    <filter-table-column title="名称" data-index="title" :width="240" />
+    <filter-table-column title="经纪人(人数)" data-index="match_items_count" :width="140" />
+    <filter-table-column title="开始时间" data-index="begin_at" :width="180" />
+    <filter-table-column title="结束时间" data-index="end_at" :width="180" />
+    <user-table-column title="创建人" data-index="user_id" user="user" show-href :width="140" />
+    <filter-table-column title="创建时间" data-index="created_at" :width="170" />
+    <filter-table-column title="状态" :width="80">
+      <template #default="{ record }: { record: { begin_at: string, end_at: string } }">
+        <template v-if="dayjs(record.begin_at).isBefore(dayjs()) && dayjs(record.end_at).isAfter(dayjs())">应用中</template>
+        <template v-else-if="dayjs(record.end_at).isBefore(dayjs())">已过期</template>
+        <template v-else-if="dayjs(record.begin_at).isAfter(dayjs())">待应用</template>
+        <template v-else>未知状态</template>
+      </template>
+    </filter-table-column>
+    <space-table-column
+      v-if="
+        usePermission().checkPermission([
+          'operation-broker-user-config-show',
+          'operation-broker-user-config-edit',
+          'operation-broker-user-config-delete',
+        ])
+      "
+      title="操作"
+      :width="200"
+    >
+      <template #default="{ record }: { record: { end_at: string } }">
+        <a-link v-permission="['operation-broker-user-config-show']" class="link-hover" :hoverable="false" @click="onShow(record)">
+          查看
+        </a-link>
+        <a-link v-permission="['operation-broker-user-config-edit']" class="link-hover" :hoverable="false" @click="onUpdate(record)">
+          修改
+        </a-link>
+        <a-link
+          v-if="dayjs(record.end_at).isAfter(dayjs())"
+          v-permission="['operation-broker-user-config-edit']"
+          class="link-hover"
+          :hoverable="false"
+          @click="onCreateLevel(record)"
+        >
+          生成等级通知
+        </a-link>
+        <a-link v-permission="['operation-broker-user-config-delete']" class="link-hover" :hoverable="false" @click="onDelete(record)">
+          删除
+        </a-link>
+      </template>
+    </space-table-column>
+  </filter-table>
+</template>
+
+<script setup lang="ts">
+  import useLoading from '@/hooks/loading';
+  import { AnyObject, AttributeData } from '@/types/global';
+  import { createVNode, h, onMounted, ref } from 'vue';
+  import { createFormItemVNode, createFormVNode, createModalVNode } from '@/utils/createVNode';
+  import { useUserConfigApi } from '@/http/broker';
+
+  import UserForm from '@/views/operation/broker/components/user-form.vue';
+  import UserTableColumn from '@/components/filter/user-table-column.vue';
+  import SpaceTableColumn from '@/components/filter/space-table-column.vue';
+  import { Alert, DatePicker, Select, TableData } from '@arco-design/web-vue';
+  import { promiseToBoolean } from '@/utils';
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  import dayjs, { OpUnitType } from 'dayjs';
+  import { range } from 'lodash';
+  import usePermission from '@/hooks/permission';
+
+  const { get, show, create, createLevel, update, destroy } = useUserConfigApi;
+
+  const { loading, setLoading } = useLoading(false);
+  const filter = ref({ title: '', userNickName: '', createBetween: [], status: '' });
+  const tableRef = ref();
+
+  const statusOption = [
+    { value: 0, label: '待应用' },
+    { value: 1, label: '应用中' },
+    { value: 2, label: '已过期' },
+  ];
+
+  const onQuery = async (params: AnyObject) => {
+    setLoading(true);
+    return get({
+      ...filter.value,
+      ...params,
+      setWith: ['user:id,nick_name,identity'],
+      setWithCount: ['matchItems'],
+      sortBy: 'begin_at',
+      sortType: 'desc',
+    }).finally(() => setLoading(false));
+  };
+
+  const onSearch = () => tableRef.value?.onPageChange(1);
+
+  const onReset = () => {
+    filter.value = { title: '', userNickName: '', createBetween: [], status: '' };
+    onSearch();
+  };
+
+  onMounted(() => onReset());
+
+  const onCreate = () => {
+    const formRef = ref();
+    createModalVNode(() => createVNode(UserForm, { ref: formRef, submit: (value: AttributeData) => create(value) }), {
+      title: '新增',
+      titleAlign: 'center',
+      width: '540px',
+      bodyStyle: { padding: '24px 20px 0' },
+      onBeforeOk: () => promiseToBoolean(formRef.value?.onSubmit()),
+      onOk: () => tableRef.value?.onFetch(),
+    });
+  };
+
+  const onShow = async (record: TableData) => {
+    const row = await show(record.id);
+
+    createModalVNode(() => h(UserForm, { initValue: row, disabled: true, disabledType: true, disabledUpload: true }), {
+      title: '查看',
+      titleAlign: 'center',
+      width: '540px',
+      bodyStyle: { padding: '24px 20px 0' },
+    });
+  };
+
+  const onUpdate = async (record: TableData) => {
+    const row = await show(record.id);
+    const formRef = ref();
+    createModalVNode(
+      () =>
+        createVNode(UserForm, {
+          ref: formRef,
+          initValue: row,
+          disabledType: true,
+          submit: (value: AttributeData) => update(record.id, value),
+        }),
+      {
+        title: '查看',
+        titleAlign: 'center',
+        width: '540px',
+        bodyStyle: { padding: '24px 20px 0' },
+        onBeforeOk: () => promiseToBoolean(formRef.value?.onSubmit()),
+        onOk: () => tableRef.value?.onFetch(),
+      }
+    );
+  };
+
+  const onDelete = (record: TableData) =>
+    createModalVNode(`删除经纪人配置：${record.title}`, {
+      title: '删除操作',
+      titleAlign: 'center',
+      onBeforeOk: () => promiseToBoolean(destroy(record.id)),
+      onOk: () => tableRef.value?.onFetch(),
+    });
+
+  const isSameTime = (date: dayjs.ConfigType, unit: OpUnitType) => dayjs().isSame(dayjs(date), unit);
+
+  const onCreateLevel = (row: TableData) => {
+    const formValue = ref({ is_alert: 0, publish_at: '' });
+    const alertOption = [
+      { value: 0, label: '否' },
+      { value: 1, label: '是' },
+    ];
+    createModalVNode(
+      () =>
+        createFormVNode({ model: formValue }, [
+          createVNode(
+            Alert,
+            { showIcon: false, banner: true, center: true, style: { marginBottom: '10px' } },
+            '将根据当前配置名单生成待发送等级通知'
+          ),
+          createFormItemVNode(
+            { label: '发送时间', field: 'publish_at', required: true },
+            h(DatePicker, {
+              'style': { width: '100%' },
+              'modelValue': formValue.value.publish_at,
+              'showTime': true,
+              'dayStartOfWeek': 1,
+              'showNowBtn': false,
+              'allowClear': false,
+              'format': 'YYYY-MM-DD HH:mm',
+              'valueFormat': 'YYYY-MM-DD HH:mm:ss',
+              'timePickerProps': { hideDisabledOptions: true },
+              'onUpdate:modelValue': (val: any) => (formValue.value.publish_at = val),
+              'disabledDate': (current?: Date) => dayjs(current).isBefore(dayjs().subtract(1, 'day')),
+              'disabledTime': (current?: Date) => {
+                return {
+                  disabledHours: () => range(0, 23).filter((item) => isSameTime(current, 'day') && item < dayjs().hour()),
+                  disabledMinutes: () =>
+                    range(0, 59).filter(
+                      (item) => isSameTime(current, 'day') && isSameTime(current, 'hour') && item < dayjs().add(5, 'minute').minute()
+                    ),
+                };
+              },
+            })
+          ),
+          createFormItemVNode(
+            { label: '面板提醒', field: 'is_alert', required: true, rowClass: 'mb-0' },
+            h(Select, {
+              'options': alertOption,
+              'modelValue': formValue.value.is_alert,
+              'onUpdate:modelValue': (val?: unknown) => (formValue.value.is_alert = Number(val)),
+            })
+          ),
+          // createFormItemVNode({ label: '注', rowClass: 'mb-0' }, '将根据当前配置名单生成待发送等级通知'),
+        ]),
+      {
+        title: '生成等级通知',
+        titleAlign: 'center',
+        onBeforeOk: () => promiseToBoolean(createLevel(row.id, formValue.value)),
+        onOk: () => tableRef.value?.onFetch(),
+      }
+    );
+  };
+</script>
+
+<style scoped lang="less"></style>

+<script setup lang="ts">
+  import { useRouteQuery } from '@vueuse/router';
+  import ConfigTable from '@/views/operation/broker/components/config-table.vue';
+  import UserTable from '@/views/operation/broker/components/user-table.vue';
+  import PushLevelTable from '@/views/operation/broker/components/push-level-table.vue';
+  import PushMatchTable from '@/views/operation/broker/components/push-match-table.vue';
+  import usePermission from '@/hooks/permission';
+  import { computed } from 'vue';
+  import { isArray } from '@/utils/is';
+
+  const checkPermission = (permission: string | string[]): boolean => {
+    permission = isArray(permission) ? permission.map((item) => `operation-broker-${item}`) : `operation-broker-${permission}`;
+    return usePermission().checkPermission(permission);
+  };
+  const hasPermission = computed(() => checkPermission(['user-config', 'push-config', 'level-record', 'confirm-record']));
+
+  const tabKeys = computed(() => {
+    const list = ['user-config', 'push-config', 'level-record', 'confirm-record'];
+    return list.filter((item) => checkPermission(item));
+  });
+
+  const tabKey = useRouteQuery('tabKey', tabKeys.value[0] || '');
+</script>
+
+<template>
+  <page-view has-bread has-card>
+    <a-tabs
+      v-if="hasPermission"
+      v-model:active-key="tabKey"
+      type="rounded"
+      size="small"
+      :animation="true"
+      :justify="true"
+      :header-padding="false"
+      :destroy-on-hide="false"
+      :lazy-load="true"
+    >
+      <a-tab-pane v-if="checkPermission('user-config')" key="user-config" title="经纪人配置">
+        <user-table />
+      </a-tab-pane>
+      <a-tab-pane v-if="checkPermission('push-config')" key="push-config" title="推送模版配置">
+        <config-table />
+      </a-tab-pane>
+      <a-tab-pane v-if="checkPermission('level-record')" key="level-record" title="等级通知日志">
+        <push-level-table />
+      </a-tab-pane>
+      <a-tab-pane v-if="checkPermission('confirm-record')" key="confirm-record" title="合作通知日志">
+        <push-match-table />
+      </a-tab-pane>
+    </a-tabs>
+  </page-view>
+</template>
+
+<style scoped lang="less"></style>

+<template>
+  <router-view v-slot="{ Component, route }">
+    <keep-alive :exclude="['notification-create', 'notification-show', 'notification-edit']">
+      <component :is="Component" :key="route.path" />
+    </keep-alive>
+  </router-view>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="less" scoped>
+  .container {
+    padding: 0 30px 20px 20px;
+  }
+
+  .operations {
+    display: flex;
+  }
+</style>

+<script setup lang="ts">
+  import useLoading from '@/hooks/loading';
+  import { onMounted, ref } from 'vue';
+  import { AnyObject } from '@/types/global';
+  import useActivityApi from '@/http/activity';
+  import { Input, Select, Link, Card } from '@arco-design/web-vue';
+  import NumberTableColumn from '@/components/filter/number-table-column.vue';
+  import EnumTableColumn from '@/components/filter/enum-table-column.vue';
+  import FilterTableColumn from '@/components/filter/table-column.vue';
+  import { Activity } from '@/types/activity';
+
+  const props = defineProps<{ selectKey: number }>();
+  const emits = defineEmits<{ (e: 'onChange', value: { link_id: number; link_name: string }): void }>();
+
+  const { loading, setLoading } = useLoading(false);
+  const { get, statusOption } = useActivityApi;
+
+  const filter = ref({ song_name: '', project_name: '', audit_status: 1, status: 1, setWith: ['project:id,name'] });
+  const tableRef = ref();
+
+  const onQuery = async (params: AnyObject) => {
+    setLoading(true);
+    return get({ ...filter.value, ...params }).finally(() => setLoading(false));
+  };
+
+  const onSearch = () => tableRef.value?.onPageChange(1);
+
+  const onReset = () => {
+    filter.value = { song_name: '', project_name: '', audit_status: 1, status: 1, setWith: ['project:id,name'] };
+    onSearch();
+  };
+
+  onMounted(() => onReset());
+
+  const onClick = (record: Activity) => {
+    emits('onChange', record.id === props.selectKey ? { link_id: 0, link_name: '' } : { link_id: record.id, link_name: record.song_name });
+  };
+</script>
+
+<template>
+  <Card :bordered="false">
+    <FilterSearch :loading="loading" :model="filter" :inline="true" @search="onSearch" @reset="onReset">
+      <FilterSearchItem label="歌曲名称">
+        <Input v-model="filter.song_name" allow-clear placeholder="请输入" />
+      </FilterSearchItem>
+      <FilterSearchItem label="厂牌名称">
+        <Input v-model="filter.project_name" allow-clear placeholder="请输入" />
+      </FilterSearchItem>
+      <FilterSearchItem label="状态">
+        <Select v-model="filter.status" :options="statusOption" allow-clear placeholder="请选择" />
+      </FilterSearchItem>
+    </FilterSearch>
+    <FilterTable ref="tableRef" :loading="loading" :on-query="onQuery" :page-size="10">
+      <FilterTableColumn title="歌曲名称" data-index="song_name" :width="200" />
+      <FilterTableColumn title="厂牌名称" data-index="project.name" :width="160" />
+      <NumberTableColumn title="试听人数" data-index="view_count" :dark-value="0" :width="110" />
+      <NumberTableColumn title="收藏人数" data-index="like_count" :dark-value="0" :width="110" />
+      <NumberTableColumn title="提交人数" data-index="submit_work_count" :dark-value="0" :width="110" />
+      <FilterTableColumn title="创建时间" data-index="created_at" :width="100" />
+      <EnumTableColumn title="状态" data-index="status" :option="statusOption" :width="100" />
+      <FilterTableColumn title="操作" :width="100">
+        <template #default="{ record }: { record: Activity }">
+          <Link @click="onClick(record)">{{ record.id !== selectKey ? '选择' : '取消选择' }}</Link>
+        </template>
+      </FilterTableColumn>
+    </FilterTable>
+  </Card>
+</template>
+
+<style scoped lang="less"></style>

+<script setup lang="ts">
+  import { computed, onBeforeUnmount, ref, shallowRef, watch } from 'vue';
+  import useNotificationApi from '@/http/notification';
+  import ImageUpload from '@/components/image-upload/index.vue';
+  import UserTable from '@/views/operation/notification/components/user-table.vue';
+  import ActivityTable from '@/views/operation/notification/components/activity-table.vue';
+  import ProjectTable from '@/views/operation/notification/components/project-table.vue';
+  import dayjs from 'dayjs';
+  import { range } from 'lodash';
+  import useLoading from '@/hooks/loading';
+  import { onBeforeRouteLeave, useRouter } from 'vue-router';
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
+  import { Boot } from '@wangeditor/editor';
+
+  import { Notification } from '@/utils/model';
+
+  import '@/views/operation/notification/module';
+  import PublishUserSelect from '@/views/operation/notification/components/publish-user-select.vue';
+
+  type ModelType = Pick<
+    Notification,
+    | 'title'
+    | 'type'
+    | 'cover'
+    | 'content'
+    | 'rich_content'
+    | 'link_type'
+    | 'link_id'
+    | 'publish_type'
+    | 'publish_at'
+    | 'publish_to'
+    | 'is_alert'
+  > & { publish_count: number; link_name: '' };
+
+  const props = defineProps<{
+    modelValue: ModelType;
+    disabled?: boolean;
+    hideSubmit?: boolean;
+    submit?: (value: unknown) => Promise<unknown>;
+  }>();
+  const emits = defineEmits<{ (e: 'update:modelValue', value: unknown): void }>();
+
+  const { typeOption, publishTypeOption, linkTypeOption, alertOption } = useNotificationApi;
+  const { loading, setLoading } = useLoading(false);
+
+  const formRef = ref();
+  const editorRef = shallowRef();
+  const textareaRef = ref();
+
+  Boot.setEditorConfig({ readOnly: props.disabled });
+
+  const onCreateEditor = (editor: unknown) => {
+    editorRef.value = editor;
+  };
+
+  onBeforeUnmount(() => {
+    const editor = editorRef.value;
+    if (editor == null) return;
+    editor.destroy();
+  });
+
+  const formValue = computed({
+    get: () => props.modelValue,
+    set: (val) => emits('update:modelValue', val),
+  });
+
+  const textareaRow = computed(() => {
+    let row = 3;
+    if (formValue.value.type === 2) {
+      row += 6;
+    }
+    if (formValue.value.publish_type === 2) {
+      row += 2;
+    }
+
+    return { minRows: row, maxRows: row };
+  });
+
+  watch(
+    () => textareaRow.value,
+    () => textareaRef.value?.handleResize()
+  );
+
+  const formRule = computed(() => {
+    return {
+      title: [{ required: true, message: '请输入标题' }],
+      type: [{ required: true, message: '请选择类型' }],
+      content: [{ required: true, message: '请输入内容' }],
+      cover: formValue.value.type === 2 ? [{ required: true, message: '请上传图片' }] : [],
+      link_type: [{ required: true, message: '请选择交互类型' }],
+      link_name: [{ required: ['user', 'activity', 'project'].includes(formValue.value.link_type), message: '请选择交互对象' }],
+      publish_type: [{ required: true, message: '请选择发布设置' }],
+      publish_at: [{ required: formValue.value.publish_type === 2, message: '请选择发布时间' }],
+      publish_to: [{ required: true, message: '请选择通知对象' }],
+      is_alert: [{ required: true, message: '请选择是否弹窗' }],
+    };
+  });
+
+  const onChangeValue = (value: object) => Object.assign(formValue.value, value);
+  const disabledDate = (current?: Date) => dayjs(current).isBefore(dayjs().subtract(1, 'day'));
+  const disabledTime = (current?: Date) => {
+    return {
+      disabledHours: () => range(0, 23).filter((item) => dayjs().isSame(dayjs(current), 'day') && item < dayjs().hour()),
+      disabledMinutes: () => range(0, 59).filter((item) => dayjs().isSame(dayjs(current), 'day') && item < dayjs().minute()),
+    };
+  };
+  const openDate = (visible: boolean) => {
+    if (visible && formValue.value.publish_at?.length === 0) {
+      formValue.value.publish_at = dayjs().format('YYYY-MM-DD hh:mm:ss');
+    }
+  };
+
+  const router = useRouter();
+  const onBack = () => router.replace({ name: 'operation-notification' });
+  const onSubmit = () => {
+    setLoading(true);
+    props.submit?.(formValue.value)?.finally(() => setLoading(false));
+  };
+
+  onBeforeRouteLeave((to, from) => {
+    if (from.meta.from === to.name) {
+      to.meta.reload = false;
+    }
+  });
+</script>
+
+<template>
+  <a-form
+    ref="formRef"
+    :disabled="disabled || loading"
+    label-align="right"
+    :model="formValue"
+    :rules="formRule"
+    :auto-label-width="true"
+    :label-col-props="{ span: 6 }"
+    :wrapper-col-props="{ span: 18 }"
+    @submit-success="onSubmit"
+  >
+    <a-row :gutter="16">
+      <a-col :span="24" style="margin-bottom: 8px">
+        <a-alert banner style="margin-bottom: 8px">
+          关联对象: {{ formValue.link_type === 'rich' ? 'H5页面' : formValue.link_name || '无' }}, 通知人数：{{ formValue.publish_count }}
+          人
+
+          <template #action>
+            <a-button v-if="!hideSubmit" type="primary" :loading="loading" html-type="submit">发布</a-button>
+            <a-button style="margin-left: 8px" @click="onBack">{{ hideSubmit ? '返回' : '取消' }}</a-button>
+          </template>
+        </a-alert>
+      </a-col>
+      <a-col :span="12">
+        <a-form-item label="通知标题" field="title" show-colon>
+          <a-input v-model="formValue.title" placeholder="请输入" :max-length="30" show-word-limit />
+        </a-form-item>
+        <a-form-item label="通知对象" field="publish_to" show-colon>
+          <publish-user-select v-model="formValue.publish_to" v-model:count="formValue.publish_count" :max-tag-count="4" />
+        </a-form-item>
+        <a-form-item label="通知正文" field="content" show-colon>
+          <a-textarea ref="textareaRef" v-model="formValue.content" :auto-size="textareaRow" :max-length="200" show-word-limit />
+        </a-form-item>
+      </a-col>
+      <a-col :span="8">
+        <a-form-item label="类型" field="type" show-colon>
+          <a-select v-model="formValue.type" :options="typeOption" placeholder="请选择" @change="() => onChangeValue({ cover: '' })" />
+        </a-form-item>
+        <a-form-item v-show="formValue.type === 2" label="图片" field="cover" show-colon>
+          <image-upload v-model="formValue.cover" :width="331" :height="118" fit="fill" />
+        </a-form-item>
+        <a-form-item label="弹窗提醒" field="is_alert" show-colon>
+          <a-select v-model="formValue.is_alert" :options="alertOption" placeholder="请选择" />
+        </a-form-item>
+        <a-form-item label="发布设置" field="publish_type" show-colon>
+          <a-select
+            v-model.number="formValue.publish_type"
+            :options="publishTypeOption"
+            placeholder="请选择"
+            @change="(value:number) => (value === 1 ? (formValue.publish_at = '') : void 0)"
+          />
+        </a-form-item>
+        <a-form-item v-show="formValue.publish_type === 2" label="发布时间" field="publish_at" show-colon>
+          <a-date-picker
+            v-model="formValue.publish_at"
+            style="width: 100%"
+            show-time
+            value-format="YYYY-MM-DD HH:mm:ss"
+            format="YYYY-MM-DD HH:mm"
+            :disabled-date="disabledDate"
+            :disabled-time="disabledTime"
+            :day-start-of-week="1"
+            @popup-visible-change="openDate"
+          />
+        </a-form-item>
+        <a-form-item label="点击交互" field="link_type" show-colon>
+          <a-select
+            v-model="formValue.link_type"
+            :options="linkTypeOption"
+            placeholder="请选择"
+            @change="() => onChangeValue({ link_id: 0, link_name: '', rich_content: '' })"
+          />
+        </a-form-item>
+      </a-col>
+      <a-col :span="4" />
+    </a-row>
+  </a-form>
+
+  <template v-if="formValue.link_type !== 'none'">
+    <a-divider style="margin-top: 8px" />
+    <user-table
+      v-if="!disabled && formValue.link_type === 'user'"
+      :body-style="{ padding: 0 }"
+      :select-key="formValue.link_id"
+      @on-change="onChangeValue"
+    />
+    <activity-table
+      v-if="!disabled && formValue.link_type === 'activity'"
+      :body-style="{ padding: 0 }"
+      :select-key="formValue.link_id"
+      @on-change="onChangeValue"
+    />
+    <project-table
+      v-if="!disabled && formValue.link_type === 'project'"
+      :body-style="{ padding: 0 }"
+      :select-key="formValue.link_id"
+      @on-change="onChangeValue"
+    />
+    <a-card v-if="formValue.link_type === 'rich'" :body-style="{ padding: 0 }" style="border: 1px solid #ccc">
+      <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" />
+      <a-layout>
+        <a-layout-content>
+          <Editor v-model="formValue.rich_content" style="min-height: 400px" @on-created="onCreateEditor" />
+        </a-layout-content>
+        <a-layout-sider class="rich" :width="400">
+          <!-- eslint-disable vue/no-v-html -->
+          <div class="content" v-html="formValue.rich_content" />
+          <!--eslint-enable-->
+        </a-layout-sider>
+      </a-layout>
+    </a-card>
+  </template>
+</template>
+
+<style scoped lang="less">
+  .rich {
+    box-shadow: unset;
+    margin-left: 10px;
+    border-left: 1px solid #ccc;
+
+    .content {
+      overflow-y: auto;
+      //height: 400px;
+      padding: 0 10px;
+
+      :deep(img) {
+        height: auto !important;
+        max-width: 100%;
+        object-fit: contain;
+      }
+
+      :deep(video) {
+        max-width: 100%;
+        height: auto !important;
+        display: block;
+        margin: 0 auto;
+      }
+    }
+  }
+</style>

+<script setup lang="ts">
+  import useLoading from '@/hooks/loading';
+  import useNotificationApi from '@/http/notification';
+  import { onMounted, ref } from 'vue';
+  import UserTableColumn from '@/components/filter/user-table-column.vue';
+  import useUserApi from '@/http/user';
+  import EnumTableColumn from '@/components/filter/enum-table-column.vue';
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  import { User } from '@/utils/model';
+  import { Input, Select } from '@arco-design/web-vue';
+  import FilterSearch from '@/components/filter/search.vue';
+  import FilterSearchItem from '@/components/filter/search-item.vue';
+  import { Option } from '@/types/global';
+  import useTagApi from '@/http/Tag';
+
+  const props = defineProps<{ notifyKey: number }>();
+
+  const { user } = useNotificationApi;
+  const { sexOption, officialStatusOption } = useUserApi;
+
+  const statusOption = [
+    { value: 0, label: '待处理' },
+    { value: 1, label: '处理中' },
+    { value: 2, label: '已发送' },
+    { value: 3, label: '已撤销' },
+    { value: -1, label: '发送失败' },
+  ];
+
+  const readStatusOption = [
+    { value: 0, label: '未查看' },
+    { value: 1, label: '已查看' },
+  ];
+
+  const { loading, setLoading } = useLoading(false);
+
+  const tableRef = ref();
+  const filter = ref({ nick_name: '', authIds: [], status: '', read_status: '', setWith: ['authTags:id,name'] });
+  const authTagOptions = ref<Option[]>([]);
+
+  const onQuery = async (params: object) => {
+    setLoading(true);
+
+    return user(props.notifyKey, { ...filter.value, ...params }).finally(() => setLoading(false));
+  };
+
+  const onSearch = () => tableRef.value?.onPageChange(1);
+
+  const onReset = () => {
+    filter.value = { nick_name: '', authIds: [], status: '', read_status: '', setWith: ['authTags:id,name'] };
+    onSearch();
+  };
+
+  onMounted(() => {
+    tableRef.value?.onPageChange();
+    useTagApi.getOption({ type: 4 }).then((data) => (authTagOptions.value = data));
+  });
+</script>
+
+<template>
+  <FilterSearch :loading="loading" :model="filter" :split="3" @search="onSearch" @reset="onReset">
+    <FilterSearchItem label="用户艺名">
+      <Input v-model="filter.nick_name" placeholder="请输入" />
+    </FilterSearchItem>
+    <FilterSearchItem label="认证能力">
+      <Select
+        v-model="filter.authIds"
+        placeholder="请选择"
+        :options="authTagOptions"
+        :max-tag-count="2"
+        multiple
+        allow-clear
+        allow-search
+      />
+    </FilterSearchItem>
+    <FilterSearchItem label="发送状态">
+      <Select v-model="filter.status" placeholder="请选择" :options="statusOption" allow-clear />
+    </FilterSearchItem>
+    <FilterSearchItem label="用户行为">
+      <Select v-model="filter.read_status" placeholder="请选择" :options="readStatusOption" allow-clear />
+    </FilterSearchItem>
+  </FilterSearch>
+  <FilterTable ref="tableRef" :loading="loading" :on-query="onQuery">
+    <UserTableColumn title="用户艺名" data-index="id" :width="260" show-avatar />
+    <EnumTableColumn title="性别" data-index="sex" :option="sexOption" :dark-value="0" :width="80" />
+    <FilterTableColumn title="认证能力" :width="280">
+      <template #default="{ record }: { record: User }">
+        <span v-if="record.auth_tags?.length">{{ record.auth_tags?.map((item) => item.name).join('｜') }}</span>
+        <span v-else style="color: rgba(44, 44, 44, 0.5)">无</span>
+      </template>
+    </FilterTableColumn>
+    <EnumTableColumn title="关注服务号" data-index="official_status" :option="officialStatusOption" :dark-value="0" :width="160" />
+    <EnumTableColumn title="发送状态" data-index="status" :option="statusOption" :width="100" />
+    <FilterTableColumn title="接收时间" data-index="send_at" :width="160" />
+    <FilterTableColumn title="用户行为" data-index="read_at" :width="120">
+      <template #default="{ record }: { record: { read_at?: string } }">
+        <span v-if="record.read_at">已查看</span>
+        <span v-else style="color: rgba(44, 44, 44, 0.5)">未查看</span>
+      </template>
+    </FilterTableColumn>
+  </FilterTable>
+</template>
+
+<style scoped lang="less"></style>

+<script setup lang="ts">
+  import useLoading from '@/hooks/loading';
+  import { onMounted, ref } from 'vue';
+  import { AnyObject } from '@/types/global';
+  import { Card, Input, Link, Select } from '@arco-design/web-vue';
+  import NumberTableColumn from '@/components/filter/number-table-column.vue';
+  import EnumTableColumn from '@/components/filter/enum-table-column.vue';
+  import FilterTableColumn from '@/components/filter/table-column.vue';
+  import useProjectApi from '@/http/project';
+  import { Project } from '@/utils/model';
+
+  const props = defineProps<{ selectKey: number }>();
+  const emits = defineEmits<{ (e: 'onChange', value: { link_id: number; link_name: string }): void }>();
+
+  const { loading, setLoading } = useLoading(false);
+  const { get, promoteStatusOption } = useProjectApi;
+
+  const filter = ref({ name: '', is_promote: '', status: 1, setWith: ['master:id,nick_name'] });
+  const tableRef = ref();
+
+  const onQuery = async (params: AnyObject) => {
+    setLoading(true);
+    return get({ ...filter.value, ...params }).finally(() => setLoading(false));
+  };
+
+  const onSearch = () => tableRef.value?.onPageChange(1);
+
+  const onReset = () => {
+    filter.value = { name: '', is_promote: '', status: 1, setWith: ['master:id,nick_name'] };
+    onSearch();
+  };
+
+  onMounted(() => onReset());
+
+  const onClick = (record: Project) => {
+    emits('onChange', record.id === props.selectKey ? { link_id: 0, link_name: '' } : { link_id: record.id, link_name: record.name });
+  };
+</script>
+
+<template>
+  <Card :bordered="false">
+    <FilterSearch :loading="loading" :model="filter" :inline="true" @search="onSearch" @reset="onReset">
+      <FilterSearchItem label="厂牌名称">
+        <Input v-model="filter.name" allow-clear placeholder="请输入" />
+      </FilterSearchItem>
+      <FilterSearchItem label="确认分享人">
+        <Select v-model="filter.is_promote" :options="promoteStatusOption" allow-clear placeholder="请输入" />
+      </FilterSearchItem>
+    </FilterSearch>
+    <FilterTable ref="tableRef" :loading="loading" :on-query="onQuery" :page-size="10">
+      <FilterTableColumn title="厂牌名称" data-index="name" :width="200" />
+      <FilterTableColumn title="简介" data-index="intro" :width="240" />
+      <EnumTableColumn title="确认分享人" data-index="is_promote" :option="promoteStatusOption" :dark-value="0" :width="130" />
+      <NumberTableColumn title="上架歌曲数" data-index="activity_up_count" :dark-value="0" :width="110" />
+      <NumberTableColumn title="已匹配歌曲数" data-index="activity_match_count" :dark-value="0" :width="110" />
+      <NumberTableColumn title="已发行歌曲数" data-index="activity_send_count" :dark-value="0" :width="110" />
+      <FilterTableColumn title="主理人" data-index="master.nick_name" :width="160" />
+      <FilterTableColumn title="操作" :width="100">
+        <template #default="{ record }: { record: Project }">
+          <Link @click="onClick(record)">{{ record.id !== selectKey ? '选择' : '取消选择' }}</Link>
+        </template>
+      </FilterTableColumn>
+    </FilterTable>
+  </Card>
+</template>
+
+<style scoped lang="less"></style>

+<script setup lang="ts">
+  import { computed, onMounted, ref } from 'vue';
+  import useTagApi from '@/http/Tag';
+  import { TreeNodeData } from '@arco-design/web-vue';
+  import { pull, startsWith, truncate } from 'lodash';
+  import useUserApi from '@/http/user';
+
+  const publishTo = defineModel<string[]>({ default: () => [] });
+  const publishCount = defineModel<number>('count', { default: 1 });
+
+  const cancelSource = new AbortController();
+
+  const queryCount = (role: string[]) => {
+    if (cancelSource.signal.aborted) {
+      cancelSource?.abort?.();
+    }
+    if (role.length > 0) {
+      useUserApi.get({ identityRole: role, status: [0, 1], page: 1, pageSize: 1 }, { signal: cancelSource.signal }).then(({ meta }) => {
+        publishCount.value = meta.total;
+      });
+    } else {
+      publishCount.value = 0;
+    }
+  };
+
+  const parentKey = { broker: 'captain', manager: 'project' };
+
+  const handleExtCheckTrue = (key: string, parentKey: string) => {
+    if (!publishTo.value.includes(key)) {
+      publishTo.value.push(key);
+      if (!publishTo.value.includes(parentKey)) {
+        publishTo.value.push(parentKey);
+      }
+    }
+  };
+
+  const handleExtCheckFalse = (key: string, parentKey: string) => {
+    pull(publishTo.value, key);
+    if (!publishTo.value.includes(parentKey)) {
+      publishTo.value.push(parentKey);
+    }
+  };
+
+  const handleExtCheck = (key: string, value: boolean) => {
+    // eslint-disable-next-line no-unused-expressions
+    value ? handleExtCheckTrue(key, parentKey[key]) : handleExtCheckFalse(key, parentKey[key]);
+    queryCount(publishTo.value);
+  };
+
+  const brokerValue = computed({
+    get: (): boolean => publishTo.value.includes('broker'),
+    set: (value: boolean) => handleExtCheck('broker', value),
+  });
+
+  const managerValue = computed({
+    get: (): boolean => publishTo.value.includes('manager'),
+    set: (value: boolean) => handleExtCheck('manager', value),
+  });
+
+  const treeValue = computed({
+    get: () => publishTo.value.filter((item) => !['broker', 'manager'].includes(item)),
+    set: (value) => {
+      if (!value.includes('project')) {
+        pull(publishTo.value, 'manager');
+      }
+      if (!value.includes('captain')) {
+        pull(publishTo.value, 'broker');
+      }
+      publishTo.value = [...value, ...publishTo.value?.filter((item) => ['broker', 'manager'].includes(item))];
+    },
+  });
+
+  const userAuthTags = ref<TreeNodeData[]>([]);
+
+  const options = computed((): TreeNodeData[] => {
+    return [
+      { key: 'visitor', title: '注册未认证' },
+      { key: 'musician', title: '音乐人', children: userAuthTags.value },
+      { key: 'captain', title: '队长' },
+      { key: 'project', title: '厂牌管理员' },
+      { key: 'system', title: '平台管理员' },
+    ];
+  });
+
+  onMounted(() => {
+    useTagApi.get({ type: 4, fetchType: 'all', setColumn: ['id', 'name'] }).then(({ data }) => {
+      userAuthTags.value = data.map((item) => ({ key: `musician_tag_${item.id}`, title: item.name }));
+    });
+  });
+</script>
+
+<template>
+  <a-tree-select
+    v-model="treeValue"
+    :multiple="true"
+    :allow-clear="true"
+    :tree-checkable="true"
+    tree-checked-strategy="parent"
+    :fallback-option="false"
+    :data="options"
+    placeholder="请选择"
+    @change="(value:any) => queryCount([...value,...publishTo?.filter((item) => ['broker', 'manager'].includes(item))])"
+  >
+    <template #label="{ data }">
+      <template v-if="data.value === 'captain' && brokerValue">经纪人</template>
+      <template v-else-if="data.value === 'project' && managerValue">厂牌主理人</template>
+      <template v-else-if="startsWith(data.value, 'musician_tag_')">音乐人 / {{ truncate(data.label, { length: 6 }) }}</template>
+      <template v-else>{{ data.label }}</template>
+    </template>
+    <template #tree-slot-extra="row">
+      <a-checkbox v-if="row.key === 'captain'" v-model="brokerValue">仅通知经纪人</a-checkbox>
+      <a-checkbox v-if="row.key === 'project'" v-model="managerValue">仅通知主理人</a-checkbox>
+    </template>
+  </a-tree-select>
+</template>
+
+<style>
+  .arco-tree-node:hover {
+    color: var(--color-text-1) !important;
+    background-color: var(--color-fill-2) !important;
+  }
+</style>

+<script setup lang="ts">
+  import FilterSearch from '@/components/filter/search.vue';
+  import FilterSearchItem from '@/components/filter/search-item.vue';
+  import FilterTable from '@/components/filter/table.vue';
+  import FilterTableColumn from '@/components/filter/table-column.vue';
+  import EnumTableColumn from '@/components/filter/enum-table-column.vue';
+  import UserTableColumn from '@/components/filter/user-table-column.vue';
+  import PhoneTableColumn from '@/components/filter/phone-table-column.vue';
+  import { Card, Input, Select, Link } from '@arco-design/web-vue';
+
+  import useUserApi from '@/http/user';
+  import useLoading from '@/hooks/loading';
+  import { AnyObject, Option } from '@/types/global';
+  import { onMounted, ref } from 'vue';
+  import useTagApi from '@/http/Tag';
+  import { User } from '@/utils/model';
+
+  const props = defineProps<{ selectKey: number }>();
+  const emits = defineEmits<{ (e: 'onChange', value: { link_id: number; link_name: string }): void }>();
+
+  const { get } = useUserApi;
+  const { loading, setLoading } = useLoading(false);
+  const { sexOption, officialStatusOption } = useUserApi;
+
+  const filter = ref({ nick_name: '', email_like: '', phone_like: '', authIds: [], status: 1, setWith: ['authTags:id,name'] });
+  const tableRef = ref();
+  const authTagOptions = ref<Option[]>([]);
+
+  const onQuery = async (params: AnyObject) => {
+    setLoading(true);
+    return get({ ...filter.value, ...params }).finally(() => setLoading(false));
+  };
+
+  const onSearch = () => tableRef.value?.onPageChange(1);
+
+  const onReset = () => {
+    filter.value = { nick_name: '', email_like: '', phone_like: '', authIds: [], status: 1, setWith: ['authTags:id,name'] };
+    onSearch();
+  };
+
+  onMounted(() => {
+    onReset();
+    useTagApi.getOption({ type: 4 }).then((data) => (authTagOptions.value = data));
+  });
+
+  const onClick = (record: User) => {
+    emits('onChange', record.id === props.selectKey ? { link_id: 0, link_name: '' } : { link_id: record.id, link_name: record.nick_name });
+  };
+</script>
+
+<template>
+  <Card :bordered="false">
+    <FilterSearch :loading="loading" :model="filter" :inline="true" :split="4" @search="onSearch" @reset="onReset">
+      <FilterSearchItem label="用户艺名">
+        <Input v-model="filter.nick_name" placeholder="请输入" />
+      </FilterSearchItem>
+      <FilterSearchItem label="用户邮箱">
+        <Input v-model="filter.email_like" placeholder="请输入" />
+      </FilterSearchItem>
+      <FilterSearchItem label="手机号码">
+        <Input v-model="filter.phone_like" placeholder="请输入" />
+      </FilterSearchItem>
+      <FilterSearchItem label="认证能力">
+        <Select
+          v-model="filter.authIds"
+          placeholder="请选择"
+          :options="authTagOptions"
+          :max-tag-count="2"
+          multiple
+          allow-clear
+          allow-search
+        />
+      </FilterSearchItem>
+    </FilterSearch>
+    <FilterTable ref="tableRef" :loading="loading" :on-query="onQuery" :page-size="10">
+      <UserTableColumn title="用户艺名" data-index="id" :width="260" show-avatar />
+      <EnumTableColumn title="性别" data-index="sex" :option="sexOption" :dark-value="0" :width="100" />
+      <FilterTableColumn title="用户邮箱" data-index="email" :width="260" />
+      <PhoneTableColumn title="手机号码" data-index="phone" area-index="area_code" :width="260" />
+      <FilterTableColumn title="认证能力">
+        <template #default="{ record }: { record: User }">
+          <span v-if="record.auth_tags?.length">{{ record.auth_tags?.map((item) => item.name).join('｜') }}</span>
+          <span v-else style="color: rgba(44, 44, 44, 0.5)">无</span>
+        </template>
+      </FilterTableColumn>
+      <EnumTableColumn title="关注服务号" data-index="official_status" :option="officialStatusOption" :dark-value="0" :width="160" />
+      <FilterTableColumn title="操作" :width="100">
+        <template #default="{ record }: { record: User }">
+          <Link @click="onClick(record)">{{ record.id !== selectKey ? '选择' : '取消选择' }}</Link>
+        </template>
+      </FilterTableColumn>
+    </FilterTable>
+  </Card>
+</template>
+
+<style scoped lang="less"></style>

+<script setup lang="ts" name="notification-create">
+  import { ref } from 'vue';
+  import FormContent from '@/views/operation/notification/components/form-content.vue';
+  import { Message } from '@arco-design/web-vue';
+  import { onBeforeRouteLeave, useRouter } from 'vue-router';
+  import useNotificationApi from '@/http/notification';
+  import { AttributeData } from '@/types/global';
+
+  const { create } = useNotificationApi;
+
+  const formValue = ref({
+    title: '',
+    type: 1,
+    content: '',
+    cover: '',
+    publish_type: 1,
+    publish_at: '',
+    publish_to: [],
+    publish_count: 0,
+    link_type: 'none',
+    link_id: 0,
+    link_name: '',
+    rich_content: '',
+    is_alert: 0,
+  }) as any;
+
+  const router = useRouter();
+
+  const onSubmit = (value: AttributeData) =>
+    create(formValue.value).then(() => {
+      Message.success(`添加通知：${value.title}`);
+      router.replace({ name: 'operation-notification' });
+    });
+
+  onBeforeRouteLeave((to, from) => {
+    if (from.meta.from === to.name) {
+      to.meta.reload = false;
+    }
+  });
+</script>
+
+<template>
+  <page-view has-bread has-card>
+    <form-content v-model="formValue" :submit="onSubmit" />
+  </page-view>
+</template>
+
+<style scoped lang="less"></style>

+<script setup lang="ts">
+  import useLoading from '@/hooks/loading';
+  import { computed, onActivated, ref } from 'vue';
+  import useNotificationApi from '@/http/notification';
+  import { AnyObject } from '@/types/global';
+  import EnumTableColumn from '@/components/filter/enum-table-column.vue';
+  import UserTableColumn from '@/components/filter/user-table-column.vue';
+  import { useRoute, useRouter } from 'vue-router';
+  import NumberTableColumn from '@/components/filter/number-table-column.vue';
+  import { createModalVNode } from '@/utils/createVNode';
+  import { Notification } from '@/utils/model';
+  import { promiseToBoolean } from '@/utils';
+  import SpaceTableColumn from '@/components/filter/space-table-column.vue';
+  import usePermission from '@/hooks/permission';
+
+  const { loading, setLoading } = useLoading(false);
+  const { typeOption, statusOption, get, send, cancel, rollback } = useNotificationApi;
+
+  const filter = ref({ title: '', userNickName: '', type: '', status: '', createBetween: [], setWith: ['user:id,nick_name'] });
+  const tableRef = ref();
+  const router = useRouter();
+  const onQuery = async (params: AnyObject) => {
+    setLoading(true);
+    return get({ ...filter.value, ...params, sortBy: 'created_at', sortType: 'desc' }).finally(() => setLoading(false));
+  };
+
+  const onSearch = () => tableRef.value?.onPageChange(1);
+
+  const onReset = () => {
+    filter.value = { title: '', userNickName: '', type: '', status: '', createBetween: [], setWith: ['user:id,nick_name'] };
+    onSearch();
+  };
+
+  const onShow = (record: Notification) => router.push({ name: 'operation-notification-show', params: { id: record.id } });
+
+  const onCreate = () => router.push({ name: 'operation-notification-create' });
+
+  const onUpdate = (record: Notification) => router.push({ name: 'operation-notification-update', params: { id: record.id } });
+
+  const onSend = (record: Notification) =>
+    createModalVNode(`确认立即发送通知《${record.title}》`, {
+      title: '更新操作',
+      onBeforeOk: () => promiseToBoolean(send(record.id)),
+      onOk: () => tableRef.value?.onFetch(),
+    });
+
+  const onCancel = (record: Notification) =>
+    createModalVNode(`确认取消发送通知《${record.title}》`, {
+      title: '取消操作',
+      onBeforeOk: () => promiseToBoolean(cancel(record.id)),
+      onOk: () => tableRef.value?.onFetch(),
+    });
+
+  onActivated(() => (useRoute().meta.reload ? onReset() : tableRef.value?.onFetch()));
+
+  const onRollback = (record: Notification) =>
+    createModalVNode(`确认撤回发送通知《${record.title}》`, {
+      title: '撤回操作',
+      onBeforeOk: () => promiseToBoolean(rollback(record.id)),
+      onOk: () => tableRef.value?.onFetch(),
+    });
+
+  const hasOperationPermission = computed(() => {
+    return usePermission().checkPermission(['operation-notification-show', 'operation-notification-edit', 'operation-notification-send']);
+  });
+</script>
+
+<template>
+  <page-view has-bread has-card>
+    <filter-search :loading="loading" :model="filter" @search="onSearch" @reset="onReset">
+      <filter-search-item label="通知标题">
+        <a-input v-model="filter.title" placeholder="请输入" allow-clear />
+      </filter-search-item>
+      <filter-search-item label="创建人">
+        <a-input v-model="filter.userNickName" placeholder="请输入" allow-clear />
+      </filter-search-item>
+      <filter-search-item label="类型">
+        <a-select v-model="filter.type" :options="typeOption" placeholder="请选择" allow-clear />
+      </filter-search-item>
+      <filter-search-item field="createBetween" label="创建时间">
+        <a-range-picker v-model="filter.createBetween" show-time :time-picker-props="{ defaultValue: ['00:00:00', '23:59:59'] }" />
+      </filter-search-item>
+      <filter-search-item label="状态">
+        <a-select v-model="filter.status" :options="statusOption" placeholder="请选择" allow-clear />
+      </filter-search-item>
+    </filter-search>
+    <filter-table ref="tableRef" :loading="loading" :on-query="onQuery">
+      <template #tool>
+        <icon-button v-permission="['operation-notification-create']" type="primary" icon="plus" label="新增" @click="onCreate" />
+      </template>
+      <filter-table-column title="通知标题" data-index="title" :width="260" />
+      <enum-table-column title="类型" data-index="type" :option="typeOption" :width="100" />
+      <number-table-column title="接收人数" data-index="items_count" :width="120" />
+      <number-table-column title="查看人数" data-index="read_count" :width="120" />
+      <user-table-column title="创建人" data-index="user_id" user="user" :width="140" />
+      <filter-table-column title="创建时间" data-index="created_at" :width="160" />
+      <filter-table-column title="发送时间" data-index="publish_at" :width="160" />
+      <enum-table-column title="状态" data-index="status" :option="statusOption" :width="100" />
+      <space-table-column v-if="hasOperationPermission" title="操作" :width="120">
+        <template #default="{ record }: { record: Notification }">
+          <a-link
+            v-if="[-1, 0, 1, 2, 3].includes(record.status)"
+            v-permission="['operation-notification-show']"
+            :hoverable="false"
+            class="link-hover"
+            @click="onShow(record)"
+          >
+            查看
+          </a-link>
+          <a-link
+            v-if="[-2, 3].includes(record.status)"
+            v-permission="['operation-notification-edit']"
+            :hoverable="false"
+            class="link-hover"
+            @click="onUpdate(record)"
+          >
+            修改
+          </a-link>
+          <a-link
+            v-if="record.status === 2"
+            v-permission="['operation-notification-send']"
+            :hoverable="false"
+            class="link-hover"
+            @click="onRollback(record)"
+          >
+            撤回
+          </a-link>
+          <a-link
+            v-if="[-1, 0].includes(record.status)"
+            v-permission="['operation-notification-send']"
+            :hoverable="false"
+            class="link-hover"
+            @click="onSend(record)"
+          >
+            {{ record.status === -1 ? '重试' : '发送' }}
+          </a-link>
+          <a-link
+            v-if="record.status === 0"
+            v-permission="['operation-notification-send']"
+            :hoverable="false"
+            class="link-hover"
+            @click="onCancel(record)"
+          >
+            取消
+          </a-link>
+        </template>
+      </space-table-column>
+    </filter-table>
+  </page-view>
+</template>
+
+<style scoped lang="less"></style>

+import { Boot, DomEditor, IButtonMenu, IDomEditor, SlateElement, SlateText, SlateTransforms } from '@wangeditor/editor';
+import { createVNode, defineAsyncComponent } from 'vue';
+import { Node } from 'slate';
+import { Modal } from '@arco-design/web-vue';
+import { h, VNode } from 'snabbdom';
+import { Activity } from '@/types/activity';
+
+type ActivityCardElement = { type: 'activity-card'; id: number; song_name: string; cover: string; tags: string[]; children: SlateText[] };
+
+const MENU = {
+  KEY: 'activity-card',
+  TITLE: '活动',
+  ICON: '<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" class="arco-icon arco-icon-music" stroke-width="4" stroke-linecap="square" stroke-linejoin="miter" filter="" data-v-249840b0="" style="font-size: 32px;"><path d="M15 37a4 4 0 1 0-8 0 4 4 0 0 0 8 0Zm0 0V18.5M41 37a4 4 0 1 0-8 0 4 4 0 0 0 8 0Zm0 0V16.5m-26 2V9.926a1 1 0 0 1 .923-.997l24-1.846A1 1 0 0 1 41 8.08v8.42m-26 2 26-2"></path></svg>',
+};
+
+const DELETE_ICON = 'https://hi-sing-cdn.hikoon.com/image/20230818/tajefbycbk71692325471868yswxs35mag.png';
+
+function withCard<T extends IDomEditor>(editor: T) {
+  const { isVoid, isInline } = editor;
+
+  const newEditor = editor;
+
+  newEditor.isVoid = (elem) => {
+    const type = DomEditor.getNodeType(elem);
+    if (type === MENU.KEY) {
+      return true;
+    }
+
+    return isVoid(elem);
+  };
+
+  newEditor.isInline = (elem) => {
+    const type = DomEditor.getNodeType(elem);
+    if (type === MENU.KEY) {
+      return true;
+    }
+
+    return isInline(elem);
+  };
+
+  return newEditor;
+}
+
+function createCard(editor: IDomEditor, callback: () => void) {
+  const ActivityTable = defineAsyncComponent(() => import('@/views/operation/banner/components/activity-table.vue'));
+  return createVNode(ActivityTable, {
+    onCheckRow: (value: Activity) => {
+      const { id, song_name, cover, tags } = value;
+      editor.insertNode({
+        type: MENU.KEY,
+        id,
+        song_name,
+        cover,
+        tags: tags?.map((item) => item.name) || [],
+        children: [{ text: '' }],
+      } as Node);
+      callback();
+    },
+  });
+}
+
+class ActivityCard implements IButtonMenu {
+  title = MENU.TITLE;
+
+  iconSvg = MENU.ICON;
+
+  tag = 'button';
+
+  getValue(): boolean {
+    return false;
+  }
+
+  isActive(): boolean {
+    return false;
+  }
+
+  isDisabled(): boolean {
+    return false;
+  }
+
+  exec(editor: IDomEditor) {
+    const modal = Modal.open({
+      title: MENU.TITLE,
+      content: () => createCard(editor, () => modal?.close()),
+      width: '700px',
+      footer: false,
+      closable: true,
+      escToClose: true,
+      // @ts-ignore
+      bodyStyle: { padding: '16px' },
+    });
+  }
+}
+
+const menuConf = { key: MENU.KEY, factory: () => new ActivityCard() };
+
+const renderElemConf = {
+  type: MENU.KEY,
+  renderElem: (elem: SlateElement, children: VNode[] | null, editor: IDomEditor): VNode => {
+    const { song_name, cover, tags } = elem as ActivityCardElement;
+
+    return h(
+      'span',
+      {
+        props: { contentEditable: false },
+        style: {
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          background: '#f2f2f2',
+          padding: '8px',
+          border: '1px solid rgb(229,230,235)',
+          boxShadow: '0 2px 5px 0 rgba(0, 0, 0, 0.08)',
+          maxWidth: '400px',
+        },
+      },
+      [
+        h('img', {
+          props: { src: cover, alt: '' },
+          style: { width: '44px', height: '44px', borderRadius: '2pt' },
+        }),
+        h(
+          'span',
+          {
+            style: {
+              flex: '1',
+              display: 'flex',
+              alignItems: 'flex-start',
+              flexDirection: 'column',
+              margin: '0 6px',
+              fontWeight: '500',
+            },
+          },
+          [
+            h(
+              'span',
+              {
+                props: { contentEditable: false },
+                style: {
+                  overflow: 'hidden',
+                  whiteSpace: 'nowrap',
+                  textOverflow: 'ellipsis',
+                  lineHeight: '26px',
+                  fontWeight: '500',
+                  color: '#4E5969',
+                },
+              },
+              song_name
+            ),
+            h(
+              'span',
+              {
+                style: { display: 'flex', justifyContent: 'flex-start', alignItems: 'flex-end', lineHeight: '16px' },
+              },
+              tags?.map((item) =>
+                h(
+                  'span',
+                  {
+                    style: {
+                      borderColor: 'transparent',
+                      display: 'inline-flex',
+                      alignItems: 'center',
+                      boxSizing: 'border-box',
+                      height: '16px',
+                      padding: '0 4px',
+                      color: 'rgb(237, 85, 14)',
+                      fontWeight: '500',
+                      fontSize: '10px',
+                      lineHeight: '10px',
+                      verticalAlign: 'middle',
+                      border: '1px solid rgb(237, 85, 14 ,0.6)',
+                      borderRadius: '2px',
+                      overflow: 'hidden',
+                      whiteSpace: 'nowrap',
+                      textOverflow: 'ellipsis',
+                      marginRight: '4px',
+                    },
+                  },
+                  item
+                )
+              ) || ''
+            ),
+          ]
+        ),
+        h('img', {
+          props: { src: DELETE_ICON, contentEditable: false },
+          style: { width: '22px', visibility: editor.isDisabled() ? 'hidden' : 'visibility' },
+          on: {
+            click() {
+              // eslint-disable-next-line func-names
+              setTimeout(function () {
+                const node = DomEditor.getSelectedNodeByType(editor, MENU.KEY);
+                if (node) {
+                  const path = DomEditor.findPath(editor, node);
+                  SlateTransforms.removeNodes(editor, { at: path });
+                }
+              }, 150);
+            },
+          },
+        }),
+      ]
+    );
+  },
+};
+
+const parseHtmlConf = {
+  selector: `span[data-w-e-type="${MENU.KEY}"]`,
+  parseElemHtml: (domElem: Element): SlateElement => {
+    const id = domElem.getAttribute('data-id') || 0;
+    const song_name = domElem.getAttribute('data-song-name') || '';
+    const cover = domElem.getAttribute('data-cover') || '';
+    const tags = domElem.getAttribute('data-tags')?.split(',') || [];
+    return { type: MENU.KEY, id, song_name, cover, tags, children: [{ text: '' }] } as SlateElement;
+  },
+};
+
+const elemToHtmlConf = {
+  type: MENU.KEY,
+  elemToHtml: (elem: SlateElement) => {
+    const { KEY } = MENU;
+    const { id, song_name, cover, tags } = elem as ActivityCardElement;
+
+    return `<span data-w-e-type="${KEY}" data-w-e-is-void data-w-e-is-inline style="display: flex;align-items:center;justify-content: space-between;background: #f2f2f2;padding: 8px;border:1px solid rgb(229,230,235);box-shadow:0 2px 5px 0 rgba(0, 0, 0, 0.08);margin: 4px;height: 70px;"  data-id="${id}" data-song-name="${song_name}" data-cover="${cover}" data-tags="${tags.toString()}">
+              <img src="${cover}" style="width: 44px !important;height: 44px !important;object-fit:fill;border-radius:2pt" alt="" />
+              <span style="flex: 1;margin:0 6px;display: flex;align-items: flex-start;flex-direction: column;">
+                <span style="line-height:26px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;font-weight: 500;color: #4E5969">${song_name}</span>
+                <span style="line-height:16px;display: flex;justify-content: flex-start;align-items: flex-end;">
+                ${
+                  tags
+                    ?.map(
+                      (item) =>
+                        `<span style="display: inline-flex;align-items: center;box-sizing: border-box;height: 16px;padding: 0 4px;color: rgb(237, 85, 14);font-weight: 500;font-size: 10px;line-height: 10px;vertical-align: middle;border: 1px solid rgb(237, 85, 14 ,0.6);border-radius: 2px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;margin-right: 4px">${item}</span>`
+                    )
+                    .join('') || ''
+                }
+                </span>
+              </span>
+              <img src="https://hi-sing-cdn.hikoon.com/image/20230822/sjzhgel3pwo1692672120063rjd093t6xd.png" style="width: 22px" alt="" />
+            </span>`;
+  },
+};
+
+Boot.registerModule({
+  editorPlugin: withCard,
+  renderElems: [renderElemConf],
+  elemsToHtml: [elemToHtmlConf],
+  parseElemsHtml: [parseHtmlConf],
+  menus: [menuConf],
+});

+import '@/views/operation/notification/module/user-card';
+import '@/views/operation/notification/module/project-card';
+import '@/views/operation/notification/module/activity-card';
+import '@wangeditor/editor/dist/css/style.css';
+import { Boot } from '@wangeditor/editor';
+import useOss from '@/hooks/oss';
+
+type InsertImageFnType = (url: string, alt: string, href: string) => void;
+type InsertVideoFnType = (url: string, poster: string) => void;
+
+Boot.setToolbarConfig({
+  excludeKeys: ['fullScreen', 'codeBlock', 'undo', 'redo'],
+  insertKeys: { index: 30, keys: ['user-card', 'activity-card', 'project-card'] },
+});
+
+Boot.setEditorConfig({
+  MENU_CONF: {
+    uploadImage: {
+      allowedFileTypes: ['image/*'],
+      async customUpload(file: File, insertFn: InsertImageFnType) {
+        return useOss()
+          .upload(file, 'image')
+          .then(({ name, url }) => insertFn(url, name, url));
+      },
+    },
+    uploadVideo: {
+      allowedFileTypes: ['video/*'],
+      maxNumberOfFiles: 1,
+      maxFileSize: 1024 * 1024 * 1024,
+      timeout: 60 * 1000,
+      async customUpload(file: File, insertFn: InsertVideoFnType) {
+        return useOss()
+          .upload(file, 'video')
+          .then(({ url }) => insertFn(url, `${url}?x-oss-process=video/snapshot,t_1000,f_png`));
+      },
+    },
+  },
+});

+import { Boot, DomEditor, IButtonMenu, IDomEditor, SlateElement, SlateText, SlateTransforms } from '@wangeditor/editor';
+import { createVNode, defineAsyncComponent } from 'vue';
+import { Modal } from '@arco-design/web-vue';
+import { h, VNode } from 'snabbdom';
+import { Node } from 'slate';
+
+type ProjectCardElement = { type: 'project-card'; id: number; name: string; cover: string; children: SlateText[] };
+
+const MENU = {
+  KEY: 'project-card',
+  TITLE: '厂牌',
+  ICON: '<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" class="arco-icon arco-icon-home" stroke-width="4" stroke-linecap="square" stroke-linejoin="miter" filter="" data-v-249840b0="" style="font-size: 32px;"><path d="M7 17 24 7l17 10v24H7V17Z"></path><path d="M20 28h8v13h-8V28Z"></path></svg>',
+};
+
+const DELETE_ICON = 'https://hi-sing-cdn.hikoon.com/image/20230818/tajefbycbk71692325471868yswxs35mag.png';
+
+function withCard<T extends IDomEditor>(editor: T) {
+  const { isVoid, isInline } = editor;
+
+  const newEditor = editor;
+
+  newEditor.isVoid = (elem) => {
+    const type = DomEditor.getNodeType(elem);
+    if (type === MENU.KEY) {
+      return true;
+    }
+
+    return isVoid(elem);
+  };
+
+  newEditor.isInline = (elem) => {
+    const type = DomEditor.getNodeType(elem);
+    if (type === MENU.KEY) {
+      return true;
+    }
+
+    return isInline(elem);
+  };
+
+  return newEditor;
+}
+
+function createCard(editor: IDomEditor, callback: () => void) {
+  const ProjectTable = defineAsyncComponent(() => import('@/views/operation/banner/components/project-table.vue'));
+  return createVNode(ProjectTable, {
+    onCheck: (value: any) => {
+      const { link_id, link_name, cover } = value;
+      editor.insertNode({ type: MENU.KEY, id: link_id, name: link_name, cover, children: [{ text: '' }] } as Node);
+      callback();
+    },
+  });
+}
+
+class ProjectCard implements IButtonMenu {
+  title = MENU.TITLE;
+
+  iconSvg = MENU.ICON;
+
+  tag = 'button';
+
+  getValue(): boolean {
+    return false;
+  }
+
+  isActive(): boolean {
+    return false;
+  }
+
+  isDisabled(): boolean {
+    return false;
+  }
+
+  exec(editor: IDomEditor) {
+    const modal = Modal.open({
+      title: MENU.TITLE,
+      content: () => createCard(editor, () => modal?.close()),
+      width: '700px',
+      footer: false,
+      closable: true,
+      escToClose: true,
+      // @ts-ignore
+      bodyStyle: { padding: '16px' },
+    });
+  }
+}
+
+const menuConf = { key: MENU.KEY, factory: () => new ProjectCard() };
+
+const renderElemConf = {
+  type: MENU.KEY,
+  renderElem: (elem: SlateElement, children: VNode[] | null, editor: IDomEditor): VNode => {
+    const { name, cover } = elem as ProjectCardElement;
+
+    return h(
+      'span',
+      {
+        props: { contentEditable: false },
+        style: {
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          background: '#f2f2f2',
+          padding: '8px',
+          border: '1px solid rgb(229,230,235)',
+          boxShadow: '0 2px 5px 0 rgba(0, 0, 0, 0.08)',
+          maxWidth: '400px',
+        },
+      },
+      [
+        h('img', {
+          props: { src: cover, alt: '' },
+          style: { width: '48px', height: '48px', borderRadius: '2pt' },
+        }),
+        h(
+          'span',
+          {
+            props: { contentEditable: false },
+            style: {
+              flex: '1',
+              margin: '0 6px',
+              overflow: 'hidden',
+              whiteSpace: 'nowrap',
+              textOverflow: 'ellipsis',
+              fontWeight: '500',
+              color: '#4E5969',
+            },
+          },
+          name
+        ),
+        h('img', {
+          props: { src: DELETE_ICON, contentEditable: false },
+          style: { width: '22px', visibility: editor.isDisabled() ? 'hidden' : 'visibility' },
+          on: {
+            click() {
+              // eslint-disable-next-line func-names
+              setTimeout(function () {
+                const node = DomEditor.getSelectedNodeByType(editor, MENU.KEY);
+                if (node) {
+                  const path = DomEditor.findPath(editor, node);
+                  SlateTransforms.removeNodes(editor, { at: path });
+                }
+              }, 150);
+            },
+          },
+        }),
+      ]
+    );
+  },
+};
+
+const parseHtmlConf = {
+  selector: `span[data-w-e-type="${MENU.KEY}"]`,
+  parseElemHtml: (domElem: Element): SlateElement => {
+    const id = domElem.getAttribute('data-id') || 0;
+    const name = domElem.getAttribute('data-name') || '';
+    const cover = domElem.getAttribute('data-cover') || '';
+    return { type: MENU.KEY, id, name, cover, children: [{ text: '' }] } as SlateElement;
+  },
+};
+
+const elemToHtmlConf = {
+  type: MENU.KEY,
+  elemToHtml: (elem: SlateElement) => {
+    const { id, name, cover } = elem as ProjectCardElement;
+    return `<span style="display: flex;align-items:center;justify-content: space-between;background: #f2f2f2;padding: 8px;border:1px solid rgb(229,230,235);box-shadow:0 2px 5px 0 rgba(0, 0, 0, 0.08);margin: 4px" data-w-e-type="${MENU.KEY}" data-w-e-is-void data-w-e-is-inline data-id="${id}" data-name="${name}" data-cover="${cover}">
+              <img src="${cover}" style="width: 3em !important;height: 3em !important;object-fit:fill;border-radius:2pt" alt="" />
+              <span style="text-overflow: ellipsis;white-space: nowrap;overflow: hidden;flex: 1;margin: 0 6px;font-weight: 500;color: #4E5969">${name}</span>
+              <img src="https://hi-sing-cdn.hikoon.com/image/20230822/sjzhgel3pwo1692672120063rjd093t6xd.png" style="width: 22px" alt="" />
+            </span>`;
+  },
+};
+
+Boot.registerModule({
+  editorPlugin: withCard,
+  renderElems: [renderElemConf],
+  elemsToHtml: [elemToHtmlConf],
+  parseElemsHtml: [parseHtmlConf],
+  menus: [menuConf],
+});

+import { Boot, DomEditor, IButtonMenu, IDomEditor, SlateElement, SlateText, SlateTransforms } from '@wangeditor/editor';
+
+import { h, VNode } from 'snabbdom';
+import { createVNode, defineAsyncComponent } from 'vue';
+import { Node } from 'slate';
+import { Modal } from '@arco-design/web-vue';
+
+const MENU = {
+  KEY: 'user-card',
+  TITLE: '用户',
+  ICON: '<svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" class="arco-icon arco-icon-user" stroke-width="4" stroke-linecap="butt" stroke-linejoin="miter"><path d="M7 37c0-4.97 4.03-8 9-8h16c4.97 0 9 3.03 9 8v3a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1v-3Z"></path><circle cx="24" cy="15" r="8"></circle></svg>',
+};
+
+const DELETE_ICON = 'https://hi-sing-cdn.hikoon.com/image/20230818/tajefbycbk71692325471868yswxs35mag.png';
+
+type UserCardElement = { type: 'user-card'; id: number; nick_name: string; avatar: string; children: SlateText[] };
+
+function withCard<T extends IDomEditor>(editor: T) {
+  const { isVoid, isInline } = editor;
+
+  const newEditor = editor;
+
+  newEditor.isVoid = (elem) => {
+    const type = DomEditor.getNodeType(elem);
+    if (type === MENU.KEY) {
+      return true;
+    }
+
+    return isVoid(elem);
+  };
+
+  newEditor.isInline = (elem) => {
+    const type = DomEditor.getNodeType(elem);
+    if (type === MENU.KEY) {
+      return true;
+    }
+
+    return isInline(elem);
+  };
+
+  return newEditor;
+}
+
+function createCard(editor: IDomEditor, callback?: () => void) {
+  const UserTable = defineAsyncComponent(() => import('@/views/operation/banner/components/user-table.vue'));
+
+  return createVNode(UserTable, {
+    onCheck: (value: any) => {
+      const { link_id, link_name, cover } = value;
+      editor.insertNode({ type: MENU.KEY, id: link_id, nick_name: link_name, avatar: cover, children: [{ text: '' }] } as Node);
+      callback?.();
+    },
+  });
+}
+
+class UserCard implements IButtonMenu {
+  title = MENU.TITLE;
+
+  iconSvg = MENU.ICON;
+
+  tag = 'button';
+
+  getValue(): boolean {
+    return false;
+  }
+
+  isActive(): boolean {
+    return false;
+  }
+
+  isDisabled(): boolean {
+    return false;
+  }
+
+  // 点击菜单时触发的函数
+  exec(editor: IDomEditor) {
+    const modal = Modal.open({
+      title: MENU.TITLE,
+      content: () => createCard(editor, () => modal?.close()),
+      width: '700px',
+      footer: false,
+      closable: true,
+      escToClose: true,
+      // @ts-ignore
+      bodyStyle: { padding: '16px' },
+    });
+  }
+}
+
+const menuConf = { key: MENU.KEY, factory: () => new UserCard() };
+
+const renderElemConf = {
+  type: MENU.KEY,
+  renderElem: (elem: SlateElement, children: VNode[] | null, editor: IDomEditor): VNode => {
+    const { nick_name, avatar } = elem as UserCardElement;
+
+    return h(
+      'span',
+      {
+        props: { contentEditable: false },
+        style: {
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          background: '#f2f2f2',
+          padding: '8px',
+          border: '1px solid rgb(229,230,235)',
+          boxShadow: '0 2px 5px 0 rgba(0, 0, 0, 0.08)',
+          maxWidth: '400px',
+        },
+      },
+      [
+        h('img', {
+          props: { src: avatar, alt: '' },
+          style: { width: '48px', height: '48px', borderRadius: '50%' },
+        }),
+        h(
+          'span',
+          {
+            props: { contentEditable: false },
+            style: {
+              flex: '1',
+              margin: '0 6px',
+              overflow: 'hidden',
+              whiteSpace: 'nowrap',
+              textOverflow: 'ellipsis',
+              fontWeight: '500',
+              color: '#4E5969',
+            },
+          },
+          nick_name
+        ),
+        h('img', {
+          props: { src: DELETE_ICON, contentEditable: false },
+          style: { width: '22px', visibility: editor.isDisabled() ? 'hidden' : 'visibility' },
+          on: {
+            click() {
+              // eslint-disable-next-line func-names
+              setTimeout(function () {
+                const node = DomEditor.getSelectedNodeByType(editor, MENU.KEY);
+                if (node) {
+                  const path = DomEditor.findPath(editor, node);
+                  SlateTransforms.removeNodes(editor, { at: path });
+                }
+              }, 150);
+            },
+          },
+        }),
+      ]
+    );
+  },
+};
+
+const parseHtmlConf = {
+  selector: `span[data-w-e-type="${MENU.KEY}"]`,
+  parseElemHtml: (domElem: Element): SlateElement => {
+    const id = domElem.getAttribute('data-id') || 0;
+    const nick_name = domElem.getAttribute('data-nick-name') || '';
+    const avatar = domElem.getAttribute('data-avatar') || '';
+    return { type: MENU.KEY, id, nick_name, avatar, children: [{ text: '' }] } as SlateElement;
+  },
+};
+
+const elemToHtmlConf = {
+  type: MENU.KEY,
+  elemToHtml: (elem: SlateElement) => {
+    const { id, nick_name, avatar } = elem as UserCardElement;
+    return `<span style="display: flex;align-items:center;justify-content: space-between;background: #f2f2f2;padding: 8px;border:1px solid rgb(229,230,235);box-shadow:0 2px 5px 0 rgba(0, 0, 0, 0.08);margin: 4px" data-w-e-type="${MENU.KEY}" data-w-e-is-void data-w-e-is-inline data-id="${id}" data-nick-name="${nick_name}" data-avatar="${avatar}">
+              <img src="${avatar}" style="width: 3em !important;height: 3em !important;object-fit:fill;border-radius:50%" alt="" />
+              <span style="text-overflow: ellipsis;white-space: nowrap;overflow: hidden;flex: 1;margin: 0 6px;font-weight: 500;color: #4E5969">${nick_name}</span>
+              <img src="https://hi-sing-cdn.hikoon.com/image/20230822/sjzhgel3pwo1692672120063rjd093t6xd.png" style="width: 22px" alt="" />
+            </span>`;
+  },
+};
+
+Boot.registerModule({
+  editorPlugin: withCard,
+  renderElems: [renderElemConf],
+  elemsToHtml: [elemToHtmlConf],
+  parseElemsHtml: [parseHtmlConf],
+  menus: [menuConf],
+});

+<script setup lang="ts" name="notification-show">
+  import { useRouteQuery } from '@vueuse/router';
+  import FormContent from '@/views/operation/notification/components/form-content.vue';
+  import { onBeforeRouteLeave, useRoute } from 'vue-router';
+  import useNotificationApi from '@/http/notification';
+  import { onMounted, ref } from 'vue';
+  import { pick } from 'lodash';
+  import ItemTable from '@/views/operation/notification/components/item-table.vue';
+
+  const { show } = useNotificationApi;
+  const notifyKey = Number(useRoute().params?.id);
+
+  const tabKey = useRouteQuery('tabKey', '1');
+  const formValue = ref<any>({});
+
+  onBeforeRouteLeave((to, from) => {
+    if (from.meta.from === to.name) {
+      to.meta.reload = false;
+    }
+  });
+
+  onMounted(() => {
+    show(notifyKey).then((res) => {
+      Object.assign(formValue.value, {
+        ...pick(res, [
+          'title',
+          'type',
+          'cover',
+          'content',
+          'rich_content',
+          'publish_type',
+          'publish_to',
+          'link_type',
+          'link_id',
+          'link_name',
+          'is_alert',
+        ]),
+        publish_count: res.items_count || 0,
+        publish_at: res.publish_type === 1 ? '' : res.publish_at,
+      });
+    });
+  });
+</script>
+
+<template>
+  <page-view has-bread has-card>
+    <a-tabs v-model:active-key="tabKey" type="rounded" :animation="true" size="small" :justify="true">
+      <a-tab-pane key="1" title="通知表单">
+        <form-content :model-value="formValue" :hide-submit="true" :disabled="true" />
+      </a-tab-pane>
+      <a-tab-pane key="2" title="接收统计">
+        <item-table :notify-key="notifyKey" />
+      </a-tab-pane>
+    </a-tabs>
+  </page-view>
+</template>
+
+<style scoped lang="less"></style>

+<script setup lang="ts" name="notification-update">
+  import FormContent from '@/views/operation/notification/components/form-content.vue';
+  import { onBeforeRouteLeave, useRoute, useRouter } from 'vue-router';
+  import { onMounted, ref } from 'vue';
+  import { pick } from 'lodash';
+  import useNotificationApi from '@/http/notification';
+  import { Message } from '@arco-design/web-vue';
+  import { AttributeData } from '@/types/global';
+
+  const router = useRouter();
+
+  const notifyKey = Number(useRoute().params?.id);
+  const { show, update } = useNotificationApi;
+
+  const formValue = ref<any>({});
+
+  const onSubmit = (value: AttributeData) =>
+    update(notifyKey, value).then(() => {
+      Message.success(`更新通知：${value.title}`);
+      router.replace({ name: 'operation-notification' });
+    });
+
+  onBeforeRouteLeave((to, from) => {
+    if (from.meta.from === to.name) {
+      to.meta.reload = false;
+    }
+  });
+
+  onMounted(() => {
+    show(notifyKey).then((res) => {
+      Object.assign(formValue.value, {
+        ...pick(res, [
+          'title',
+          'type',
+          'cover',
+          'content',
+          'rich_content',
+          'publish_type',
+          'publish_to',
+          'link_type',
+          'link_id',
+          'link_name',
+          'is_alert',
+        ]),
+        publish_count: res.items_count || 0,
+        publish_at: res.publish_type === 1 ? '' : res.publish_at,
+      });
+    });
+  });
+</script>
+
+<template>
+  <page-view has-bread has-card>
+    <form-content v-model="formValue" :submit="onSubmit" />
+  </page-view>
+</template>
+
+<style scoped lang="less"></style>

+<script setup lang="ts">
+  import { Form, FormItem, Input, InputGroup, InputNumber, Select, Button, Cascader, Textarea } from '@arco-design/web-vue';
+  import InputUpload from '@/components/input-upload/index.vue';
+  import { useVModel } from '@vueuse/core';
+  import { computed, onMounted, ref } from 'vue';
+  import { FormInstance } from '@arco-design/web-vue/es/form';
+  import { SystemConfig } from '@/types/system-config';
+  import { nanoid } from 'nanoid';
+  import useConfigApi from '@/http/config';
+  import { get, set } from 'lodash';
+  import { arrayToTree } from '@/utils';
+
+  const props = defineProps<{ modelValue: SystemConfig; hideKeyBtn?: boolean; lockField?: string[]; submit?: () => Promise<any> }>();
+  const emit = defineEmits(['update:modelValue']);
+
+  const isLock = (field: string): boolean => props.lockField !== undefined && props.lockField?.indexOf(field) !== -1;
+
+  const formRef = ref<FormInstance>();
+  const formValue = useVModel(props, 'modelValue', emit);
+  const formRule = {
+    'name': [{ required: true, message: '请输入名称' }],
+    'identifier': [{ required: true, message: '请输入唯一标识' }],
+    'status': [{ required: true, message: '请选择状态' }],
+    'expand.type': [{ required: true, message: '请选择类型' }],
+  };
+
+  const treeOption = ref<SystemConfig[]>([]);
+  const treeOptionField = { value: 'id', label: 'name', children: 'children' };
+
+  const onSubmit = async () => {
+    const error = await formRef.value?.validate();
+    return error ? Promise.reject(error) : props.submit?.();
+  };
+
+  defineExpose({ onSubmit });
+
+  onMounted(() => {
+    useConfigApi
+      .get({ setColumn: ['id', 'name', 'parent_id'], fetchType: 'all', parent_id: '', sortBy: 'weight', sortType: 'desc' })
+      .then(({ data }) => set(treeOption, 'value', [{ id: 0, name: '顶级' }, ...arrayToTree(data, 0, { removeEmpty: true })]));
+  });
+
+  const contentType = computed({
+    get: () => get(formValue.value, 'expand.type', 'none'),
+    set: (value) => set(formValue.value, 'expand.type', value),
+  });
+</script>
+
+<template>
+  <Form ref="formRef" :model="formValue" :rules="formRule" auto-label-width>
+    <FormItem label="挂载点" field="parent_id" show-colon :disabled="true">
+      <Cascader v-model="formValue.parent_id" :options="treeOption" :field-names="treeOptionField" :check-strictly="true" />
+    </FormItem>
+    <FormItem label="名称" field="name" show-colon>
+      <Input v-model="formValue.name" placeholder="请输入" />
+    </FormItem>
+    <FormItem label="标识" field="identifier" show-colon :disabled="isLock('identifier')">
+      <InputGroup style="width: 100%">
+        <Input v-model="formValue.identifier" placeholder="请输入" />
+        <Button v-if="!hideKeyBtn" @click="() => set(formValue, 'identifier', nanoid())">生成</Button>
+      </InputGroup>
+    </FormItem>
+    <FormItem label="状态" field="status" show-colon>
+      <Select v-model="formValue.status" :options="useConfigApi.statusOptions" placeholder="请选择" />
+    </FormItem>
+    <FormItem label="权重" field="weight" show-colon>
+      <InputNumber v-model="formValue.weight" :min="0" :max="200" :step="1" />
+    </FormItem>
+    <FormItem label="类型" field="expand.type" show-colon>
+      <Cascader v-model="contentType" :options="useConfigApi.contentOptions" @change="() => set(formValue, 'content', '')" />
+    </FormItem>
+    <FormItem
+      v-if="contentType !== 'none'"
+      label="内容"
+      field="content"
+      :show-colon="true"
+      :rules="[{ required: true, message: '缺少内容' }]"
+    >
+      <InputUpload v-if="contentType === 'image'" v-model="formValue.content" accept="image/*" />
+      <InputUpload v-if="contentType === 'audio'" v-model="formValue.content" accept="audio/*" />
+      <InputUpload v-if="contentType === 'video'" v-model="formValue.content" accept="video/*" />
+      <InputUpload v-if="contentType === 'file'" v-model="formValue.content" accept="*" />
+      <Input v-if="contentType === 'input'" v-model="formValue.content" :max-length="64" placeholder="请输入" />
+      <Textarea
+        v-if="contentType === 'textarea'"
+        v-model="formValue.content"
+        placeholder="请输入"
+        :auto-size="{ minRows: 4, maxRows: 4 }"
+        :max-length="800"
+        :show-word-limit="true"
+      />
+    </FormItem>
+    <FormItem label="备注" field="remark" :show-colon="true">
+      <Textarea v-model="formValue.remark" :auto-size="{ minRows: 4, maxRows: 4 }" :max-length="400" :show-word-limit="true" />
+    </FormItem>
+  </Form>
+</template>
+
+<style scoped lang="less"></style>

+<template>
+  <page-view has-card has-bread>
+    <filter-table ref="tableRef" :loading="loading" :on-query="onQuery" :default-expand-all-rows="true" :hide-expand-button-on-empty="true">
+      <template #tool>
+        <IconButton v-permission="['system-config-create']" icon="plus" label="新增" type="primary" @click="onCreateTopVNode()" />
+      </template>
+      <filter-table-column title="名称" data-index="name" :width="240" />
+      <filter-table-column title="标识(KEY)" data-index="identifier" :width="140" />
+      <filter-table-column title="内容" data-index="content" :width="140" />
+      <filter-table-column title="备注" data-index="remark" :width="160" />
+      <enum-table-column title="状态" data-index="status" :option="useConfigApi.statusOptions" :width="64" />
+      <number-table-column title="权重值" data-index="weight" :width="80" />
+      <filter-table-column title="创建时间" data-index="created_at" :width="140" />
+      <space-table-column
+        v-if="usePermission().checkPermission(['system-config-create', 'system-config-edit'])"
+        title="操作"
+        data-index="operation"
+        :width="120"
+      >
+        <template #default="{ record }">
+          <a-link v-permission="['system-config-create']" class="link-hover" :hoverable="false" @click="onCreateChild(record)">新增</a-link>
+          <a-link v-permission="['system-config-edit']" class="link-hover" :hoverable="false" @click="onUpdate(record)">编辑</a-link>
+          <a-link
+            v-permission="['system-config-edit']"
+            class="link-hover"
+            :hoverable="false"
+            @click="onChangeStatus(record, Number(!record.status))"
+          >
+            {{ useConfigApi.statusOptions.find((item) => item.value === Number(!record.status))?.label }}
+          </a-link>
+        </template>
+      </space-table-column>
+    </filter-table>
+  </page-view>
+</template>
+
+<script lang="ts" setup>
+  import { createVNode, onMounted, ref } from 'vue';
+  import useLoading from '@/hooks/loading';
+  import useConfigApi from '@/http/config';
+  import { AnyObject } from '@/types/global';
+  import NumberTableColumn from '@/components/filter/number-table-column.vue';
+  import EnumTableColumn from '@/components/filter/enum-table-column.vue';
+  import SpaceTableColumn from '@/components/filter/space-table-column.vue';
+  import FormContent from '@/views/system/config/components/form-content.vue';
+
+  import { createModalVNode } from '@/utils/createVNode';
+  import { Message, TableData } from '@arco-design/web-vue';
+  import useRoleApi from '@/http/role';
+  import { promiseToBoolean } from '@/utils';
+  import usePermission from '@/hooks/permission';
+
+  const { loading, setLoading } = useLoading(false);
+  const tableRef = ref();
+
+  onMounted(async () => {
+    tableRef.value?.onPageChange();
+  });
+
+  const onQuery = async (params: AnyObject) => {
+    setLoading(true);
+    return useConfigApi
+      .get({ setWith: ['children'], parent_id: 0, ...params, sortBy: 'weight', sortType: 'desc' })
+      .finally(() => setLoading(false));
+  };
+
+  const onCreateTopVNode = () => {
+    const formRef = ref();
+    const formValue = ref({ parent_id: 0, weight: 0, expand: { type: 'none' } });
+
+    createModalVNode(
+      () => createVNode(FormContent, { ref: formRef, modelValue: formValue.value, submit: () => useConfigApi.create(formValue.value) }),
+      {
+        hideTitle: true,
+        onBeforeOk: () => promiseToBoolean(formRef.value?.onSubmit()),
+        onOk: () => {
+          Message.success('添加成功');
+          tableRef.value?.onFetch();
+        },
+      }
+    );
+  };
+
+  const onCreateChild = (row: TableData) => {
+    const formRef = ref();
+    const formValue = ref({ parent_id: row.id, weight: 0, expand: { type: 'none' } });
+
+    createModalVNode(
+      () => createVNode(FormContent, { ref: formRef, modelValue: formValue.value, submit: () => useConfigApi.create(formValue.value) }),
+      {
+        hideTitle: true,
+        onBeforeOk: () => promiseToBoolean(formRef.value?.onSubmit()),
+        onOk: () => {
+          Message.success('添加成功');
+          tableRef.value?.onFetch();
+        },
+      }
+    );
+  };
+
+  const onUpdate = (row: TableData) => {
+    const formRef = ref();
+    const formValue = ref({ ...row });
+
+    createModalVNode(
+      () =>
+        createVNode(FormContent, {
+          ref: formRef,
+          modelValue: formValue.value,
+          hideKeyBtn: true,
+          lockField: ['identifier'],
+          submit: () => useConfigApi.update(row.id, formValue.value),
+        }),
+      {
+        hideTitle: true,
+        onBeforeOk: () => promiseToBoolean(formRef.value?.onSubmit()),
+        onOk: () => {
+          Message.success('更新成功');
+          tableRef.value?.onFetch();
+        },
+      }
+    );
+  };
+
+  const onChangeStatus = (row: TableData, status: number) => {
+    createModalVNode(`是否将配置《${row.name}》的状态变更为：${useRoleApi.statusOption.find((item) => item.value === status)?.label}`, {
+      title: '状态变更',
+      titleAlign: 'center',
+      onBeforeOk: () => promiseToBoolean(useConfigApi.changeStatus(row.id, status)),
+      onOk: () => tableRef.value?.onFetch(),
+    });
+  };
+</script>
+
+<style lang="less" scoped></style>

+<template>
+  <div class="container">
+    <Breadcrumb :items="['system', 'system-customer']" />
+    <a-card class="minHeight">
+      <a-space direction="vertical" fill>
+        <div style="color: #4e5969">工作简介：</div>
+        <div style="margin: 8px 0; color: #2c2c2c">{{ config.content }}</div>
+        <icon-button v-permission="['system-customer-edit']" icon="edit" type="primary" label="编辑" @click="onUpdate" />
+      </a-space>
+    </a-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { createVNode, onMounted, ref } from 'vue';
+  import { SystemConfig } from '@/types/system-config';
+  import { Form, FormItem, Input, Modal } from '@arco-design/web-vue';
+  import useConfigApi from '@/http/config';
+  import { set } from 'lodash';
+
+  const { update, getOne } = useConfigApi;
+
+  const config = ref<Pick<SystemConfig, 'id' | 'content'>>({ id: 0, content: '' });
+
+  const onUpdate = () => {
+    const content = ref<string>(config.value?.content || '');
+
+    Modal.open({
+      title: '编辑',
+      content: () =>
+        createVNode(
+          Form,
+          { model: content },
+          {
+            default: () =>
+              createVNode(
+                FormItem,
+                { label: '工作简介' },
+                {
+                  default: () =>
+                    createVNode(Input, {
+                      'maxLength': 30,
+                      'modelValue': content.value,
+                      'showWordLimit': true,
+                      'onUpdate:modelValue': (val: string | undefined) => {
+                        content.value = val || '';
+                      },
+                    }),
+                }
+              ),
+          }
+        ),
+      closable: false,
+      escToClose: false,
+      maskClosable: false,
+      onBeforeOk: (done) => {
+        update(config.value?.id, { ...config.value, content: content.value })
+          .then(() => {
+            set(config.value, 'content', content.value);
+            done(true);
+          })
+          .catch(() => {
+            done(false);
+          });
+      },
+    });
+  };
+
+  onMounted(() => {
+    getOne({ identifier: 'customer_service' }).then((data?: SystemConfig) => {
+      config.value = data || { id: 0, content: '' };
+    });
+  });
+</script>
+
+<style lang="less" scoped>
+  .minHeight {
+    min-height: calc(100vh - 200px);
+  }
+</style>

+<template>
+  <router-view />
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="less" scoped>
+  .container {
+    padding: 0 30px 20px 20px;
+  }
+
+  .operations {
+    display: flex;
+  }
+</style>

+<template>
+  <filter-search v-show="hasSearch" :loading="loading" :model="filter" @search="onSearch" @reset="onReset">
+    <filter-search-item field="name" label="操作人">
+      <a-input v-model="filter.userNickName" allow-clear placeholder="请输入" />
+    </filter-search-item>
+    <filter-search-item field="guard" label="操作平台">
+      <a-select v-model="filter.guard" :options="guardOption" allow-clear placeholder="请选择" @change="() => (filter.path = '')" />
+    </filter-search-item>
+    <filter-search-item field="name" label="操作模块">
+      <permission-select v-model="filter.path" :guard="filter.guard" allow-clear allow-search />
+    </filter-search-item>
+    <filter-search-item field="createBetween" label="操作时间">
+      <a-range-picker v-model="filter.createBetween" show-time :time-picker-props="{ defaultValue: ['00:00:00', '23:59:59'] }" />
+    </filter-search-item>
+  </filter-search>
+  <filter-table ref="tableRef" :loading="loading" :on-query="onQuery">
+    <user-table-column title="操作人" data-index="user_id" user="user" show-href :width="160" />
+    <filter-table-column title="操作平台" data-index="guard" :width="100">
+      <template #default="{ record }">
+        {{ guardOption.find((item) => item.value === record.guard)?.label || '未知' }}
+      </template>
+    </filter-table-column>
+    <filter-table-column :width="180" data-index="path" title="操作模块">
+      <template #default="{ record }">
+        {{
+          record.path
+            ?.map((item: string) => findPermissionLabel(record.guard, item))
+            .filter((item: string) => item !== '')
+            .join('/')
+        }}
+      </template>
+    </filter-table-column>
+    <filter-table-column :width="100" data-index="action" title="操作类型" />
+    <filter-table-column :width="460" data-index="content" title="操作内容" />
+    <filter-table-column :width="170" data-index="created_at" title="操作时间" />
+  </filter-table>
+</template>
+
+<script lang="ts" setup>
+  import { AnyObject, QueryForParams } from '@/types/global';
+  import useLoading from '@/hooks/loading';
+  import { computed, onMounted, ref } from 'vue';
+  import { useAppStore } from '@/store';
+  import { storeToRefs } from 'pinia';
+  import { SystemPermission } from '@/types/system-permission';
+  import UserTableColumn from '@/components/filter/user-table-column.vue';
+  import useOperationLog from '@/http/log';
+
+  type propType = { filter?: AnyObject; hasSearch?: boolean; showGuard?: boolean };
+
+  const props = withDefaults(defineProps<propType>(), { filter: undefined, hasSearch: true, showGuard: true });
+
+  const appStore = useAppStore();
+  const { permissions } = storeToRefs(appStore);
+
+  const { loading, setLoading } = useLoading(false);
+  const filter = ref<QueryForParams>({ userNickName: '', guard: '', path: [], createBetween: [] });
+  const tableRef = ref();
+
+  const guardOption = [
+    { value: 'Admin', label: '运营管理平台' },
+    { value: 'Manage', label: '厂牌管理平台' },
+  ];
+
+  const systemPermission = computed((): SystemPermission[] => {
+    return [
+      { guard: 'Admin', name: 'dashboard', label: '信息概览' } as SystemPermission,
+      { guard: 'Manage', name: 'dashboard', label: '信息概览' } as SystemPermission,
+      ...(permissions?.value ?? []),
+    ];
+  });
+
+  const findPermissionLabel = (guard: 'Admin' | 'Manage', name: string) => {
+    return systemPermission.value?.find((item) => item.guard === guard && item.name === name)?.label || '';
+  };
+
+  const onQuery = async (params: AnyObject) => {
+    setLoading(true);
+
+    return useOperationLog
+      .get({
+        ...filter.value,
+        ...props.filter,
+        setWith: ['user:id,nick_name,real_name,identity'],
+        ...params,
+        sortBy: 'id',
+        sortType: 'desc',
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  };
+
+  const onSearch = () => {
+    tableRef.value?.onPageChange(1);
+  };
+
+  const onReset = () => {
+    filter.value = { userNickName: '', guard: '', path: [], createBetween: [] };
+    onSearch();
+  };
+
+  onMounted(() => {
+    onReset();
+  });
+</script>
+
+<style lang="less" scoped>
+  :deep(.arco-table-cell) {
+    padding: 5px 8px !important;
+
+    & > .arco-table-td-content .arco-btn-size-small {
+      padding: 5px !important;
+    }
+  }
+</style>

+<template>
+  <div class="container">
+    <Breadcrumb :items="['system', 'system-log']" />
+    <a-card :body-style="{ padding: '20px' }">
+      <query-table />
+    </a-card>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import QueryTable from '@/views/system/logs/components/query-table.vue';
+</script>
+
+<style scoped></style>

+<script setup lang="ts">
+  import usePagination from '@/hooks/pagination';
+  import useMaterialApi from '@/http/material';
+  import { createVNode, onMounted, ref, toRef } from 'vue';
+  import useLoading from '@/hooks/loading';
+  import { AnyObject } from '@/types/global';
+  import {
+    createModalVNode,
+    createFormVNode,
+    createFormItemVNode,
+    createInputNumberFormItemVNode,
+    createInputUploadFormItemVNode,
+    createSelectionFormItemVNode,
+  } from '@/utils/createVNode';
+  import { FileItem, Message, RequestOption, Upload } from '@arco-design/web-vue';
+  import { promiseToBoolean } from '@/utils';
+  import { pick, set } from 'lodash';
+  import useOss from '@/hooks/oss';
+
+  const { loading, setLoading } = useLoading();
+  const { pagination, setPage, setPageSize, setTotal } = usePagination({ pageSize: 30 });
+  const filter = ref<AnyObject>({});
+  const list = ref<AnyObject[]>([]);
+
+  const sortOption = [
+    { label: '创建时间', value: 'id' },
+    { label: '权重值', value: 'weight' },
+  ];
+
+  const onQuery = async (params?: AnyObject) => {
+    setLoading(true);
+    const { current: page, pageSize } = pagination.value;
+    useMaterialApi
+      .get({ ...filter.value, page, pageSize, ...params })
+      .then(({ data, meta }) => {
+        list.value = data as AnyObject[];
+        setPage(meta.current);
+        setPageSize(meta.limit);
+        setTotal(meta.total);
+      })
+      .finally(() => setLoading(false));
+  };
+
+  const onPageChange = (current: number) => {
+    onQuery({ page: current });
+  };
+
+  const onSearch = () => onQuery({ page: 1 });
+
+  const onReset = () => {
+    filter.value = { type: '', sortBy: 'id', sortType: 'desc' };
+    onSearch();
+  };
+
+  const onPageSizeChange = (current: number) => {
+    onQuery({ page: 1, pageSize: current });
+  };
+
+  onMounted(() => onReset());
+
+  const onCreate = () => {
+    const formRef = ref();
+    const formValue = ref<{ type: number | string; fileList: FileItem[] }>({ type: '', fileList: [] });
+    const formRule = {
+      type: [{ required: true, message: '请选择分类' }],
+      fileList: [{ required: true, type: 'array', message: '请选择上传的素材' }],
+    };
+
+    createModalVNode(
+      () =>
+        createFormVNode({ ref: formRef, model: formValue, rules: formRule, autoLabelWidth: true }, [
+          createSelectionFormItemVNode(toRef(formValue.value, 'type'), useMaterialApi.typeOption, { label: '分类', field: 'type' }, {}),
+          createFormItemVNode({ hideLabel: false, label: '素材', field: 'fileList', rowClass: 'mb-0' }, [
+            createVNode(Upload, {
+              'model-value:fileList': formValue.value.fileList,
+              'onUpdate:fileList': (value: FileItem[]) => (formValue.value.fileList = value),
+              'multiple': true,
+              'accept': 'image/*',
+              'listType': 'picture-card',
+              'responseUrlKey': 'url',
+              'imagePreview': true,
+              'imageLoading': 'lazy',
+              'onBeforeUpload': (file: File & { width: number; height: number }) => {
+                const imgObj = new Image();
+                imgObj.src = URL.createObjectURL(file);
+                imgObj.onload = () => {
+                  file.width = imgObj.width as number;
+                  file.height = imgObj.height as number;
+                };
+                return Promise.resolve(file);
+              },
+              'customRequest': (option: RequestOption) => {
+                const { fileItem, onProgress, onSuccess, onError } = option;
+                if (fileItem.file) {
+                  fileItem.status = 'uploading';
+                  useOss()
+                    .upload(fileItem.file, 'image', onProgress)
+                    .then(({ url }) => {
+                      fileItem.percent = 100;
+                      fileItem.url = url || '';
+                      fileItem.status = 'done';
+                      onSuccess({ name: fileItem.name, url: fileItem.url });
+                    })
+                    .catch((e) => {
+                      fileItem.status = 'error';
+                      onError(e.response);
+                    });
+                }
+              },
+            }),
+          ]),
+        ]),
+      {
+        title: '上传素材',
+        width: 540,
+        onOk: () => onSearch(),
+        onBeforeOk: async () => {
+          if (await formRef.value?.validate()) {
+            return false;
+          }
+          if (formValue.value.fileList.filter((item) => item.status === 'uploading')?.length !== 0) {
+            Message.warning({ id: 'create-msg', content: '请待素材上传完成' });
+            return false;
+          }
+
+          const data: { type: number; url: string | undefined; expand: Partial<File> }[] = [];
+          formValue.value.fileList
+            ?.filter((item) => item.status === 'done')
+            ?.forEach((item) => {
+              data.push({
+                type: formValue.value.type as number,
+                url: item.url,
+                expand: pick(item.file, ['size', 'type', 'width', 'height']),
+              });
+            });
+
+          return promiseToBoolean(useMaterialApi.create({ data }));
+        },
+      }
+    );
+  };
+
+  const onUpdate = (row: any) => {
+    const formValue = ref({ ...row });
+    const type = toRef(formValue.value, 'type', '');
+    const weight = toRef(formValue.value, 'weight', 0);
+    const url = toRef(formValue.value, 'url', 0);
+    const expand = toRef(formValue.value, 'expand', undefined);
+
+    createModalVNode(
+      () =>
+        createFormVNode({ model: formValue }, [
+          createSelectionFormItemVNode(type, useMaterialApi.typeOption, { label: '分类' }),
+          createInputNumberFormItemVNode(weight, { label: '权重' }),
+          createInputUploadFormItemVNode(
+            url,
+            { label: '链接', rowClass: 'mb-0' },
+            { accept: 'image/*', onSuccess: async (file: any) => set(expand, 'value', pick(file, ['width', 'height', 'size', 'type'])) }
+          ),
+        ]),
+      {
+        title: '编辑素材信息',
+        onBeforeOk: () => promiseToBoolean(useMaterialApi.update(row.id, formValue.value)),
+        onOk: () => onSearch(),
+      }
+    );
+  };
+
+  const onDelete = (row: any) => {
+    createModalVNode('是否确认删除此素材', {
+      title: '删除操作',
+      onBeforeOk: () => promiseToBoolean(useMaterialApi.destroy(row.id)),
+      onOk: () => onSearch(),
+    });
+  };
+</script>
+
+<template>
+  <page-view has-card has-bread>
+    <filter-search :loading="loading" inline :model="filter" @search="onSearch" @reset="onReset">
+      <filter-search-item label="类型">
+        <a-select v-model="filter.type" placeholder="请选择" :options="useMaterialApi.typeOption" allow-clear />
+      </filter-search-item>
+      <filter-search-item label="排序">
+        <a-select v-model="filter.sortBy" placeholder="请选择" :options="sortOption" />
+      </filter-search-item>
+    </filter-search>
+    <a-space v-permission="['system-material-create']" fill>
+      <icon-button style="margin-bottom: 16px" type="primary" icon="plus" label="新增" @click="onCreate" />
+    </a-space>
+
+    <a-image-preview-group :closable="false" :default-scale="0.7" :actions-layout="['fullScreen', 'zoomIn', 'zoomOut']">
+      <a-space size="small" wrap>
+        <template v-for="item in list" :key="item.id">
+          <a-image
+            :src="item.url"
+            :width="269"
+            :height="140"
+            :show-loader="true"
+            fit="cover"
+            :title="`${item.expand.width}*${item.expand.height}`"
+          >
+            <template #extra>
+              <div class="actions">
+                <span v-permission="['system-material-edit']" class="action" @click="onUpdate(item)"><icon-edit /></span>
+                <span v-permission="['system-material-delete']" class="action" @click="onDelete(item)"><icon-delete /></span>
+              </div>
+            </template>
+          </a-image>
+        </template>
+      </a-space>
+    </a-image-preview-group>
+    <div style="display: flex; justify-content: end; margin-top: 10px">
+      <a-pagination
+        :current="pagination.current"
+        :page-size="pagination.pageSize"
+        :total="pagination.total"
+        :page-size-options="pagination.pageSizeOptions as number[]"
+        :show-page-size="pagination.showPageSize as boolean"
+        :show-total="pagination.showTotal as boolean"
+        @change="onPageChange"
+        @page-size-change="onPageSizeChange"
+      />
+    </div>
+  </page-view>
+</template>
+
+<style scoped lang="less">
+  .actions {
+    display: flex;
+    align-items: center;
+  }
+
+  .action {
+    padding: 5px 4px;
+    font-size: 14px;
+    margin-left: 12px;
+    border-radius: 2px;
+    line-height: 1;
+    cursor: pointer;
+  }
+
+  .action:first-child {
+    margin-left: 0;
+  }
+</style>

+<template>
+  <page-view has-card has-bread>
+    <filter-search :inline="true" :loading="loading" :model="filter" @search="onSearch" @reset="onReset">
+      <!--      <filter-search-item label="类型">-->
+      <!--        <a-select v-model="filter.type" :options="typeOption" placeholder="请选择" allow-clear />-->
+      <!--      </filter-search-item>-->
+      <filter-search-item label="反馈用户">
+        <a-input v-model="filter.name" placeholder="请输入" allow-clear />
+      </filter-search-item>
+      <filter-search-item label="反馈时间">
+        <a-range-picker
+          v-model="filter.createBetween"
+          :allow-clear="true"
+          :show-time="true"
+          :time-picker-props="{ defaultValue: ['00:00:00', '23:59:59'] }"
+          format="YYYY-MM-DD HH:mm"
+        />
+      </filter-search-item>
+      <filter-search-item label="状态">
+        <a-select v-model="filter.status" :options="statusOption" placeholder="请选择" allow-clear />
+      </filter-search-item>
+    </filter-search>
+    <filter-table ref="tableRef" :loading="loading" :on-query="onQuery">
+      <user-table-column data-index="user_id" user="user" title="反馈用户" show-href :width="160" />
+      <enum-table-column data-index="type" title="分类" :option="typeOption" :width="100" />
+      <user-table-column data-index="person_id" user="person" title="关联内容" show-href prefix="@" :width="160" />
+      <filter-table-column data-index="reason" title="反馈内容" :width="300">
+        <template #default="{ record }">
+          <a-typography-text :ellipsis="{ rows: 1, showTooltip: true }">
+            {{ record.reason }}
+            <template v-if="record.desc">：{{ record.desc }}</template>
+          </a-typography-text>
+        </template>
+      </filter-table-column>
+      <date-table-column data-index="created_at" title="反馈时间" :split="false" :width="170" />
+      <enum-table-column data-index="status" title="状态" :option="statusOption" :width="100" />
+      <filter-table-column data-index="operation" title="操作" :width="100">
+        <template #default="{ record }">
+          <a-link v-if="record.status === 0" :hoverable="false" class="link-hover" @click="handleUpdate(record)">处理</a-link>
+        </template>
+      </filter-table-column>
+    </filter-table>
+  </page-view>
+</template>
+
+<script lang="ts" setup>
+  import { onMounted, ref } from 'vue';
+  import { AnyObject } from '@/types/global';
+  import useLoading from '@/hooks/loading';
+  import useReportApi from '@/http/report';
+  import EnumTableColumn from '@/components/filter/enum-table-column.vue';
+  import UserTableColumn from '@/components/filter/user-table-column.vue';
+  import DateTableColumn from '@/components/filter/date-table-column.vue';
+  import { TableData } from '@arco-design/web-vue';
+  import { createModalVNode } from '@/utils/createVNode';
+  import { promiseToBoolean } from '@/utils';
+
+  const { typeOption, statusOption } = useReportApi;
+  const { loading, setLoading } = useLoading(false);
+
+  const filter = ref<AnyObject>({});
+  const tableRef = ref();
+
+  const onQuery = async (params: AnyObject) => {
+    setLoading(true);
+    return useReportApi
+      .get({ ...filter.value, ...params, setSort: '-id', setWith: ['user:id,nick_name,identity', 'person:id,nick_name,identity'] })
+      .finally(() => setLoading(false));
+  };
+
+  const onSearch = () => tableRef.value?.onPageChange(1);
+
+  const onReset = () => {
+    filter.value = { type: '', name: '', status: '', createBetween: [] };
+    onSearch();
+  };
+
+  onMounted(() => onReset());
+
+  const handleUpdate = (record: TableData) =>
+    createModalVNode('该用户举报/反馈的内容已被处理？', {
+      title: '处理举报/反馈',
+      okText: '是',
+      cancelText: '否',
+      onBeforeOk: () => promiseToBoolean(useReportApi.update(record.id, { status: 1 })),
+      onOk: () => tableRef.value?.onFetch(),
+    });
+</script>
+
+<style lang="less" scoped></style>

+<script setup lang="ts">
+  import { Form, FormItem, Input, Textarea } from '@arco-design/web-vue';
+  import { useVModel } from '@vueuse/core';
+  import { FormInstance } from '@arco-design/web-vue/es/form';
+  import { ref } from 'vue';
+
+  const props = defineProps<{ modelValue: { name: string; intro: string }; submit?: () => Promise<any> }>();
+  const emit = defineEmits(['update:modelValue']);
+
+  const formRef = ref<FormInstance>();
+  const formValue = useVModel(props, 'modelValue', emit);
+  const formRule = {
+    name: [{ required: true, message: '请输入名称' }],
+    intro: [{ max: 500, message: '描述长度超出限制' }],
+  };
+
+  const onSubmit = async () => {
+    const error = await formRef.value?.validate();
+
+    return error ? Promise.reject(error) : props.submit?.();
+  };
+
+  defineExpose({ onSubmit });
+</script>
+
+<template>
+  <Form ref="formRef" :model="formValue" :rules="formRule" auto-label-width>
+    <FormItem label="名称" field="name">
+      <Input v-model="formValue.name" placeholder="请输入" :max-length="25" show-word-limit />
+    </FormItem>
+    <FormItem label="描述" field="intro" row-class="mb-0">
+      <Textarea v-model="formValue.intro" placeholder="请输入" :auto-size="{ minRows: 3, maxRows: 6 }" :max-length="500" show-word-limit />
+    </FormItem>
+  </Form>
+</template>
+
+<style scoped lang="less"></style>

+<script setup lang="ts">
+  import { Collapse, CollapseItem, Tree, TreeNodeData, CheckboxGroup } from '@arco-design/web-vue';
+  import { computed, onMounted, ref, createVNode } from 'vue';
+  import { usePermissionApi } from '@/http/role';
+  import { SystemPermission } from '@/types/system-permission';
+  import { arrayToTree, findTreeParentIds, findTreeChildIds } from '@/utils';
+  import * as Icon from '@arco-design/web-vue/es/icon';
+  import { camelCase, find, set, upperFirst, pull } from 'lodash';
+  import { useVModel } from '@vueuse/core';
+
+  const props = defineProps<{ modelValue: [] }>();
+  const emit = defineEmits(['update:modelValue']);
+  const checkIds = useVModel(props, 'modelValue', emit);
+
+  const activeKey = ref<string[]>([]);
+
+  const permissionData = ref<SystemPermission[]>([]);
+  const btnPermissionData = ref<SystemPermission[]>([]);
+
+  const adminPermissionRef = ref<InstanceType<typeof Tree>>();
+  const appPermissionRef = ref<InstanceType<typeof Tree>>();
+
+  const adminPermissionTree = computed((): TreeNodeData[] => {
+    // return arrayToTree(permissionData.value?.filter((item) => item.guard === 'Admin'));
+    return arrayToTree(permissionData.value?.filter((item) => item.guard === 'Admin' && item.is_show_line));
+  });
+
+  const appPermissionTree = computed(() => {
+    return arrayToTree(permissionData.value?.filter((item) => item.guard === 'App' && item.is_show_line));
+  });
+
+  onMounted(async () => {
+    await usePermissionApi.get({ fetchType: 'all', sortBy: 'weight', sortType: 'desc' }).then(({ data }) => {
+      btnPermissionData.value = data.filter((item) => !item.is_show_line);
+      permissionData.value = data.map((item) => {
+        const key = upperFirst(camelCase(item.icon));
+        // @ts-ignore
+        set(item, 'icon', () => createVNode(Icon[key] || 'span'));
+        return item;
+      });
+      activeKey.value = ['Admin'];
+    });
+  });
+
+  const getNodeCheckOption = (node: SystemPermission) => {
+    return btnPermissionData.value?.filter((btn) => btn.parent_id === node.id)?.map((btn) => ({ value: btn.id, label: btn.label }));
+  };
+
+  const onSelect = (treeRef: any, data: any) => {
+    if (data.node?.children?.length === 0) {
+      treeRef.checkNode(data.node.id, !find(treeRef.getCheckedNodes(), { id: data.node.id }));
+    }
+    // else {
+    //   treeRef.expandNode(data.node.id, !find(treeRef.getExpandedNodes(), { id: data.node.id }));
+    // }
+  };
+
+  const onCheck = (checkedKeys: Array<string | number>, data: any) => {
+    if (data.checked) {
+      if (data.node.parent_id === 0 || data.node.type === 'Menu' || data.node.is_show_line) {
+        checkedKeys.push(
+          ...findTreeParentIds(permissionData.value, data.node.parent_id),
+          ...findTreeChildIds(permissionData.value, data.node.id)
+        );
+      } else {
+        checkedKeys.push(...findTreeParentIds(permissionData.value, data.node.parent_id));
+      }
+    } else {
+      pull(checkedKeys, ...findTreeChildIds(permissionData.value, data.node.id));
+    }
+  };
+
+  const onBtnCheck = (value: number[], ev: Event, node: SystemPermission) => {
+    // @ts-ignore
+    if (ev.target && !checkIds.value.includes(ev.target?.value)) {
+      value.push(...findTreeParentIds(permissionData.value, node.id));
+    }
+  };
+</script>
+
+<template>
+  <Collapse v-model:active-key="activeKey" :bordered="false" :accordion="true">
+    <CollapseItem key="Admin" header="管理后台">
+      <div style="max-height: 340px; overflow: auto">
+        <Tree
+          ref="adminPermissionRef"
+          v-model:checked-keys="checkIds"
+          size="small"
+          :data="adminPermissionTree"
+          :field-names="{ key: 'id', title: 'label', children: 'children', icon: 'icn' }"
+          :checkable="true"
+          :block-node="true"
+          :check-strictly="true"
+          :only-check-leaf="false"
+          :auto-expand-parent="false"
+          action-on-node-click="expand"
+          @select="(selectedKeys:Array<string | number>, data: any) => onSelect(adminPermissionRef, data)"
+          @check="onCheck"
+        >
+          <template #extra="nodeData">
+            <CheckboxGroup
+              v-model="checkIds"
+              :options="getNodeCheckOption(nodeData)"
+              @change="(value: any[], ev: Event) => onBtnCheck(value as number[], ev, nodeData)"
+            />
+          </template>
+        </Tree>
+      </div>
+    </CollapseItem>
+    <CollapseItem key="App" header="移动端">
+      <div style="max-height: 340px; overflow: auto">
+        <Tree
+          ref="appPermissionRef"
+          v-model:checked-keys="checkIds"
+          size="small"
+          :data="appPermissionTree"
+          :field-names="{ key: 'id', title: 'label', children: 'children', icon: 'icon' }"
+          :checkable="true"
+          :block-node="true"
+          :check-strictly="true"
+          :only-check-leaf="false"
+          :auto-expand-parent="false"
+          action-on-node-click="expand"
+          @select="(selectedKeys:Array<string | number>, data:any) => onSelect(appPermissionRef, data)"
+          @check="onCheck"
+        >
+          <template #extra="nodeData">
+            <CheckboxGroup
+              v-model="checkIds"
+              :options="getNodeCheckOption(nodeData)"
+              @change="(value: any[], ev:Event) => onBtnCheck(value as number[], ev, nodeData)"
+            />
+          </template>
+        </Tree>
+      </div>
+    </CollapseItem>
+  </Collapse>
+</template>
+
+<style lang="less" scoped>
+  :deep(.arco-tree-node-selected .arco-tree-node-title) {
+    color: unset;
+  }
+</style>

+<script setup lang="ts">
+  import { AnyObject } from '@/types/global';
+  import useRoleApi from '@/http/role';
+
+  import useLoading from '@/hooks/loading';
+  import { createVNode, onMounted, ref } from 'vue';
+  import { pick, set } from 'lodash';
+  import { promiseToBoolean } from '@/utils';
+  import { createModalVNode } from '@/utils/createVNode';
+  import UserTableColumn from '@/components/filter/user-table-column.vue';
+  import NumberTableColumn from '@/components/filter/number-table-column.vue';
+  import SpaceTableColumn from '@/components/filter/space-table-column.vue';
+  import EnumTableColumn from '@/components/filter/enum-table-column.vue';
+  import IconButton from '@/components/icon-button/index.vue';
+  import FormContent from '@/views/system/role/components/form-content.vue';
+  import PermissionContent from '@/views/system/role/components/permission-content.vue';
+  import { SystemPermission } from '@/types/system-permission';
+  import { useAuthorizedStore } from '@/store';
+
+  const { loading, setLoading } = useLoading(false);
+  const tableRef = ref();
+  const filter = ref<AnyObject>({});
+
+  const onQuery = async (params: AnyObject) => {
+    setLoading(true);
+    return useRoleApi
+      .get({
+        guard: 'Admin',
+        setWith: ['creator:id,nick_name', 'permissions:id'],
+        setWithCount: ['users'],
+        ...params,
+        sortBy: 'id',
+        sortType: 'desc',
+      })
+      .finally(() => setLoading(false));
+  };
+
+  const onSearch = () => tableRef.value?.onPageChange(1);
+
+  const onReset = () => {
+    filter.value = { name: '', status: '' };
+    onSearch();
+  };
+
+  onMounted(async () => {
+    onReset();
+  });
+
+  const onCreate = () => {
+    const formRef = ref();
+    const formValue = ref({ name: '', intro: '' });
+    createModalVNode(
+      () =>
+        createVNode(FormContent, {
+          ref: formRef,
+          modelValue: formValue.value,
+          submit: () => useRoleApi.create(formValue.value),
+        }),
+      {
+        title: '新增角色',
+        titleAlign: 'center',
+        onBeforeOk: () => promiseToBoolean(formRef.value?.onSubmit()),
+        onOk: () => tableRef.value?.onFetch(),
+      }
+    );
+  };
+
+  const onUpdate = (row: any) => {
+    const formRef = ref();
+    const formValue = ref(pick(row, ['name', 'intro']));
+
+    createModalVNode(
+      () =>
+        createVNode(FormContent, {
+          ref: formRef,
+          modelValue: formValue.value,
+          submit: () => useRoleApi.update(row.id, formValue.value),
+        }),
+      {
+        title: '编辑角色',
+        titleAlign: 'center',
+        onBeforeOk: () => promiseToBoolean(formRef.value?.onSubmit()),
+        onOk: () => tableRef.value?.onFetch(),
+      }
+    );
+  };
+
+  const onChangeStatus = (row: any, status: number) => {
+    createModalVNode(`是否将角色《${row.name}》的状态变更为：${useRoleApi.statusOption.find((item) => item.value === status)?.label}`, {
+      title: '状态变更',
+      titleAlign: 'center',
+      onBeforeOk: () => promiseToBoolean(useRoleApi.changeStatus(row.id, status)),
+      onOk: () => tableRef.value?.onFetch(),
+    });
+  };
+
+  const onChangePermission = (row: any) => {
+    const formValue = ref<number[]>([]);
+    row.permissions.forEach((item: SystemPermission) => formValue.value.push(item.id));
+
+    createModalVNode(
+      () =>
+        createVNode(PermissionContent, {
+          'modelValue': formValue.value,
+          'onUpdate:modelValue': (val: number[]) => set(formValue, 'value', val),
+        }),
+      {
+        hideTitle: true,
+        bodyStyle: { padding: 0 },
+        width: 720,
+        onBeforeOk: () => promiseToBoolean(useRoleApi.changePermission(row.id, formValue.value)),
+        onOk: () => {
+          useAuthorizedStore().syncInfo();
+          tableRef.value?.onFetch();
+        },
+      }
+    );
+  };
+
+  const onDelete = (row: any) => {
+    createModalVNode(`删除角色：${row.name}`, {
+      title: '删除操作',
+      titleAlign: 'center',
+      onBeforeOk: () => promiseToBoolean(useRoleApi.destroy(row.id)),
+      onOk: () => tableRef.value?.onFetch(),
+    });
+  };
+</script>
+
+<template>
+  <page-view has-bread has-card>
+    <filter-search :loading="loading" :model="filter" inline @search="onSearch" @reset="onReset">
+      <filter-search-item label="名称">
+        <a-input v-model="filter.name" placeholder="请输入" allow-clear />
+      </filter-search-item>
+      <filter-search-item label="状态">
+        <a-select v-model="filter.status" :options="useRoleApi.statusOption" placeholder="请选择" allow-clear />
+      </filter-search-item>
+    </filter-search>
+    <filter-table ref="tableRef" :loading="loading" :on-query="onQuery">
+      <template #tool>
+        <icon-button v-permission="['system-role-create']" type="primary" icon="plus" label="新增" @click="onCreate" />
+      </template>
+      <filter-table-column data-index="name" title="名称" :width="160" />
+      <filter-table-column data-index="intro" title="描述" :width="180" />
+      <number-table-column data-index="users_count" title="关联用户数" :width="140" />
+      <user-table-column data-index="user_id" user="creator" title="创建人" show-href :width="140" />
+      <filter-table-column data-index="created_at" title="创建时间" :width="180" />
+      <enum-table-column data-index="status" title="状态" :option="useRoleApi.statusOption" :width="80" />
+      <space-table-column data-index="operator" title="操作" :width="160">
+        <template #default="{ record }">
+          <a-link
+            v-permission="['system-role-edit']"
+            :hoverable="false"
+            class="link-hover"
+            @click="onChangeStatus(record, Number(!record.status))"
+          >
+            {{ useRoleApi.statusOption.find((item) => item.value === Number(!record.status))?.label }}
+          </a-link>
+          <a-link v-permission="['system-role-edit']" :hoverable="false" class="link-hover" @click="onUpdate(record)">编辑</a-link>
+          <a-link v-permission="['system-role-permission']" :hoverable="false" class="link-hover" @click="onChangePermission(record)">
+            权限
+          </a-link>
+          <a-link v-permission="['system-role-delete']" :hoverable="false" class="link-hover" @click="onDelete(record)">删除</a-link>
+        </template>
+      </space-table-column>
+    </filter-table>
+  </page-view>
+</template>
+
+<style scoped lang="less"></style>

+<script setup lang="ts">
+  import { onMounted, ref } from 'vue';
+  import { Form, FormItem, Input, InputNumber, Select } from '@arco-design/web-vue';
+  import InputUpload from '@/components/input-upload/index.vue';
+  import useTagApi from '@/http/star-tag';
+  import { ColorPicker } from 'vue3-colorpicker';
+  import { set, get, unset } from 'lodash';
+
+  const formValue: any = defineModel();
+  const { frameOption, statusOption, indexFilterOption } = useTagApi;
+  const needFrame = ref<number>(0);
+  const formRule = {
+    name: [{ required: true, message: '请输入名称' }],
+    icon: [{ required: true, message: '请选择图标' }],
+    index_filter: [{ required: true, message: '请选择首页是否可筛选' }],
+    weight: [{ required: true, message: '请输入权重' }],
+  };
+
+  const onFrameChange = (value: number) => {
+    if (value === 1) {
+      set(formValue, 'value.frame', {
+        url: get(formValue, 'value.frame.url', ''),
+        color: get(formValue, 'value.frame.color', '#000000'),
+      });
+    } else {
+      unset(formValue, 'value.frame');
+    }
+  };
+
+  onMounted(() => {
+    needFrame.value = get(formValue, 'value.frame') ? 1 : 2;
+    onFrameChange(needFrame.value);
+  });
+</script>
+
+<template>
+  <Form :model="formValue" :rules="formRule" auto-label-width>
+    <FormItem label="名称" field="name" show-colon>
+      <Input v-model="formValue.name" :max-length="20" placeholder="请输入" show-word-limit />
+    </FormItem>
+
+    <FormItem label="图标" field="name" show-colon>
+      <InputUpload v-model="formValue.icon" accept="image/*" />
+    </FormItem>
+    <FormItem label="筛选" field="index_filter" show-colon>
+      <Select v-model="formValue.index_filter" :options="indexFilterOption" placeholder="请选择" />
+    </FormItem>
+    <FormItem label="权重" field="weight" show-colon>
+      <InputNumber v-model="formValue.weight" :min="0" :max="999999" placeholder="请输入" />
+    </FormItem>
+    <FormItem label="状态" field="status" show-colon>
+      <Select v-model="formValue.status" :options="statusOption" placeholder="请选择" />
+    </FormItem>
+    <FormItem label="边框" field="status" show-colon>
+      <Select v-model="needFrame" :options="frameOption" placeholder="请选择" @change="onFrameChange" />
+    </FormItem>
+    <template v-if="needFrame === 1 && formValue">
+      <FormItem label="边框图标" field="formValue.frame" show-colon>
+        <InputUpload v-model="formValue.frame.url" accept="image/*" />
+      </FormItem>
+      <FormItem label="边框颜色" field="frame.color" show-colon>
+        <color-picker v-model:pureColor="formValue.frame.color" disable-alpha format="hex" />
+      </FormItem>
+    </template>
+  </Form>
+</template>
+
+<style scoped lang="less"></style>

+<template>
+  <page-view has-bread has-card>
+    <filter-search :model="filter" :loading="loading" @search="onSearch" @reset="onReset">
+      <filter-search-item field="name" label="名称">
+        <a-input v-model="filter.name" allow-clear placeholder="请输入" />
+      </filter-search-item>
+      <filter-search-item field="status" label="标签状态">
+        <a-select v-model="filter.status" :options="statusOption" allow-clear placeholder="请选择" />
+      </filter-search-item>
+      <filter-search-item field="createBetween" label="创建时间">
+        <a-range-picker
+          v-model="filter.createBetween"
+          :show-time="true"
+          :allow-clear="true"
+          :time-picker-props="{ defaultValue: ['00:00:00', '23:59:59'] }"
+        />
+      </filter-search-item>
+    </filter-search>
+    <filter-table ref="tableRef" :loading="loading" :on-query="onQuery">
+      <template #tool>
+        <icon-button v-permission="['system-star-tag-create']" type="primary" icon="plus" label="新增" @click="onCreate" />
+      </template>
+      <filter-table-column :width="100" data-index="id" title="#" />
+      <filter-table-column :width="260" data-index="name" title="名称" />
+      <star-tag-icon-table-column title="主页图标"></star-tag-icon-table-column>
+      <star-tag-table-column :width="120" title="列表头像样式"></star-tag-table-column>
+      <filter-table-column :width="100" data-index="status" title="首页筛选">
+        <template #default="{ record }">
+          {{ record.index_filter === 1 ? '可筛选' : '不可筛选' }}
+        </template>
+      </filter-table-column>
+      <filter-table-column :width="100" data-index="status" title="权重">
+        <template #default="{ record }">
+          {{ record.weight }}
+        </template>
+      </filter-table-column>
+      <filter-table-column :width="170" data-index="created_at" title="创建时间" />
+      <filter-table-column :width="100" data-index="status" title="状态">
+        <template #default="{ record }">
+          {{ record.status === 1 ? '已开启' : '已禁用' }}
+        </template>
+      </filter-table-column>
+      <space-table-column
+        v-if="usePermission().checkPermission(['system-star-tag-edit', 'system-star-tag-delete'])"
+        :width="100"
+        data-index="operations"
+        title="操作"
+      >
+        <template #default="{ record }">
+          <a-link v-permission="['system-tag-edit']" :hoverable="false" class="link-hover" @click="onUpdate(record)">编辑</a-link>
+          <a-link v-permission="['system-star-tag-delete']" :hoverable="false" class="link-hover" @click="onDelete(record)"> 删除</a-link>
+        </template>
+      </space-table-column>
+    </filter-table>
+  </page-view>
+</template>
+
+<script lang="ts" setup>
+  import { onMounted, ref, createVNode } from 'vue';
+  import { Message, TableData } from '@arco-design/web-vue';
+  import useLoading from '@/hooks/loading';
+  import useTagApi from '@/http/star-tag';
+  import { AnyObject } from '@/types/global';
+  import { createModalVNode } from '@/utils/createVNode';
+  import SpaceTableColumn from '@/components/filter/space-table-column.vue';
+  import StarTagTableColumn from '@/components/filter/star-tag-table-column.vue';
+  import StarTagIconTableColumn from '@/components/filter/star-tag-icon-table-column.vue';
+  import FormContent from '@/views/system/star-tag/components/form-content.vue';
+  import usePermission from '@/hooks/permission';
+  import { promiseToBoolean } from '@/utils';
+
+  const tableRef = ref();
+  const filter = ref({ name: '', is_show: '', createBetween: [], status: '' });
+  const { loading, setLoading } = useLoading(false);
+  const { create, update, destroy, statusOption } = useTagApi;
+
+  const onQuery = async (params?: AnyObject) => {
+    setLoading(true);
+    return useTagApi
+      .get({
+        ...filter.value,
+        setWith: ['user:id,nick_name'],
+        sortBy: 'id',
+        sortType: 'desc',
+        ...params,
+      })
+      .finally(() => setLoading(false));
+  };
+
+  const onSearch = () => tableRef.value?.onPageChange(1);
+
+  const onReset = () => {
+    filter.value = { name: '', is_show: '', createBetween: [], status: '' };
+    onSearch();
+  };
+
+  const onCreate = () => {
+    const formValue = ref({ name: '', status: 1, weight: 0, index_filter: 1 });
+    return createModalVNode(() => createVNode(FormContent, { modelValue: formValue.value }), {
+      title: '新增操作',
+      onBeforeOk: () => promiseToBoolean(create(formValue.value)),
+      onOk: () => {
+        tableRef.value?.onFetch();
+        Message.success(`创建标签：${formValue.value.name}`);
+      },
+    });
+  };
+
+  const onUpdate = (row: TableData) => {
+    const formValue = ref({ ...row });
+
+    return createModalVNode(() => createVNode(FormContent, { modelValue: formValue.value }), {
+      title: '编辑操作',
+      onBeforeOk: () => promiseToBoolean(update(row.id, formValue.value)),
+      onOk: () => {
+        tableRef.value?.onFetch();
+        Message.success(`更新标签：${formValue.value.name}`);
+      },
+    });
+  };
+
+  const onDelete = (row: TableData) =>
+    createModalVNode(`确认要将标签：${row.name} 删除吗？`, {
+      title: '删除操作',
+      maskClosable: true,
+      onBeforeOk: () => promiseToBoolean(destroy(row.id)),
+      onOk: () => {
+        tableRef.value?.onFetch();
+        Message.success(`删除标签：${row.name}`);
+      },
+    });
+
+  onMounted(() => onReset());
+</script>
+
+<style lang="less" scoped></style>

+<script setup lang="ts">
+  import { Form, FormItem, Input, Select, InputNumber, CheckboxGroup } from '@arco-design/web-vue';
+  import { computed } from 'vue';
+  import { get, set } from 'lodash';
+  import useTagApi from '@/http/Tag';
+
+  defineProps<{ hideType?: boolean }>();
+
+  const formValue = defineModel();
+
+  const { typeOption, showOption, filterOption, certifyPermissionOption } = useTagApi;
+
+  const formRule = {
+    name: [{ required: true, message: '请输入名称' }],
+    type: [{ required: true, message: '请选择分类' }],
+    is_show: [{ required: true, message: '请选择分类' }],
+    index_filter: [{ required: true, message: '请选择首页筛选' }],
+  };
+
+  const permissionValue = computed({
+    get: () => get(formValue, 'value.expand.permission', []),
+    set: (val) => set(formValue, 'value.expand.permission', val),
+  });
+</script>
+
+<template>
+  <Form :model="formValue" :rules="formRule" auto-label-width>
+    <FormItem label="名称" field="name" show-colon>
+      <Input v-model="formValue.name" :max-length="20" placeholder="请输入" show-word-limit />
+    </FormItem>
+    <FormItem v-show="!hideType" label="类型" field="type" show-colon>
+      <Select v-model="formValue.type" :options="typeOption" placeholder="请选择" />
+    </FormItem>
+    <FormItem v-show="formValue.type === 4" label="权限" field="expand.permission" show-colon>
+      <CheckboxGroup v-model="permissionValue" :options="certifyPermissionOption" />
+    </FormItem>
+    <FormItem label="权重" field="weight" show-colon>
+      <InputNumber v-model="formValue.weight" :max="255" :min="0" :step="10" />
+    </FormItem>
+    <FormItem label="前台显示" field="is_show" show-colon>
+      <Select v-model="formValue.is_show" :options="showOption" placeholder="请选择" />
+    </FormItem>
+    <FormItem label="首页筛选" field="index_filter" show-colon row-class="mb-0">
+      <Select v-model="formValue.index_filter" :options="filterOption" placeholder="请选择" />
+    </FormItem>
+  </Form>
+</template>
+
+<style scoped lang="less"></style>

+<template>
+  <page-view has-bread has-card>
+    <filter-search :model="filter" :loading="loading" @search="onSearch" @reset="onReset">
+      <filter-search-item field="name" label="标签名称">
+        <a-input v-model="filter.name" allow-clear placeholder="请输入" />
+      </filter-search-item>
+      <filter-search-item field="type" label="标签类型">
+        <a-select v-model="filter.type" :options="typeOption" allow-clear placeholder="请选择" />
+      </filter-search-item>
+      <filter-search-item field="userName" label="创建者">
+        <a-input v-model="filter.userName" allow-clear placeholder="请输入" />
+      </filter-search-item>
+      <filter-search-item field="createBetween" label="创建时间">
+        <a-range-picker
+          v-model="filter.createBetween"
+          :show-time="true"
+          :allow-clear="true"
+          :time-picker-props="{ defaultValue: ['00:00:00', '23:59:59'] }"
+        />
+      </filter-search-item>
+      <filter-search-item field="is_show" label="前台显示">
+        <a-select v-model="filter.is_show" :options="showOption" allow-clear placeholder="请选择" />
+      </filter-search-item>
+    </filter-search>
+    <filter-table ref="tableRef" :loading="loading" :on-query="onQuery">
+      <template #tool>
+        <icon-button v-permission="['system-tag-create']" type="primary" icon="plus" label="新增" @click="onCreate" />
+      </template>
+      <filter-table-column :width="100" data-index="id" title="#" />
+      <filter-table-column :width="260" data-index="name" title="名称" />
+      <enum-table-column :width="120" data-index="type" title="类型" :option="typeOption" />
+      <filter-table-column :width="140" data-index="user.nick_name" title="创建者" />
+      <filter-table-column :width="80" data-index="weight" title="权重值" />
+      <filter-table-column :width="170" data-index="created_at" title="创建时间" />
+      <enum-table-column :width="110" data-index="is_show" title="前台显示" :option="showOption" :dark-value="0" />
+      <enum-table-column :width="110" data-index="index_filter" title="首页筛选" :option="filterOption" :dark-value="0" />
+      <space-table-column
+        v-if="usePermission().checkPermission(['system-tag-edit', 'system-tag-delete'])"
+        :width="100"
+        data-index="operations"
+        title="操作"
+      >
+        <template #default="{ record }">
+          <a-link v-permission="['system-tag-edit']" :hoverable="false" class="link-hover" @click="onUpdate(record)">编辑</a-link>
+          <a-link v-permission="['system-tag-delete']" :hoverable="false" class="link-hover" @click="onDelete(record)"> 删除</a-link>
+        </template>
+      </space-table-column>
+    </filter-table>
+  </page-view>
+</template>
+
+<script lang="ts" setup>
+  import { onMounted, ref, createVNode } from 'vue';
+  import { Message, TableData } from '@arco-design/web-vue';
+  import useLoading from '@/hooks/loading';
+  import useTagApi from '@/http/Tag';
+  import { AnyObject } from '@/types/global';
+  import { createModalVNode } from '@/utils/createVNode';
+  import EnumTableColumn from '@/components/filter/enum-table-column.vue';
+  import SpaceTableColumn from '@/components/filter/space-table-column.vue';
+  import FormContent from '@/views/system/tag/components/form-content.vue';
+  import usePermission from '@/hooks/permission';
+  import { promiseToBoolean } from '@/utils';
+
+  const tableRef = ref();
+  const filter = ref({ name: '', type: '', userName: '', is_show: '', createBetween: [] });
+  const { loading, setLoading } = useLoading(false);
+  const { typeOption, showOption, filterOption, create, update, destroy } = useTagApi;
+
+  const onQuery = async (params?: AnyObject) => {
+    setLoading(true);
+    return useTagApi
+      .get({
+        ...filter.value,
+        setWith: ['user:id,nick_name'],
+        sortBy: 'id',
+        sortType: 'desc',
+        ...params,
+      })
+      .finally(() => setLoading(false));
+  };
+
+  const onSearch = () => tableRef.value?.onPageChange(1);
+
+  const onReset = () => {
+    filter.value = { name: '', type: '', userName: '', is_show: '', createBetween: [] };
+    onSearch();
+  };
+
+  const onCreate = () => {
+    const formValue = ref({ name: '', type: '', weight: 0, is_show: 1, index_filter: 1, expand: { permission: [] } });
+    return createModalVNode(() => createVNode(FormContent, { modelValue: formValue.value }), {
+      title: '新增操作',
+      onBeforeOk: () => promiseToBoolean(create(formValue.value)),
+      onOk: () => {
+        tableRef.value?.onFetch();
+        Message.success(`创建标签：${formValue.value.name}`);
+      },
+    });
+  };
+
+  const onUpdate = (row: TableData) => {
+    const formValue = ref({ ...row });
+
+    return createModalVNode(() => createVNode(FormContent, { modelValue: formValue.value, hideType: true }), {
+      title: '编辑操作',
+      onBeforeOk: () => promiseToBoolean(update(row.id, formValue.value)),
+      onOk: () => {
+        tableRef.value?.onFetch();
+        Message.success(`更新标签：${formValue.value.name}`);
+      },
+    });
+  };
+
+  const onDelete = (row: TableData) =>
+    createModalVNode(`确认要将标签：${row.name} 删除吗？`, {
+      title: '删除操作',
+      maskClosable: true,
+      onBeforeOk: () => promiseToBoolean(destroy(row.id)),
+      onOk: () => {
+        tableRef.value?.onFetch();
+        Message.success(`删除标签：${row.name}`);
+      },
+    });
+
+  onMounted(() => onReset());
+</script>
+
+<style lang="less" scoped></style>

+<script setup lang="ts">
+  import { Form, FormItem, Input, Textarea, Select, InputNumber, RadioGroup } from '@arco-design/web-vue';
+  import InputUpload from '@/components/input-upload/index.vue';
+
+  import useVersionApi from '@/http/version';
+  import { ref } from 'vue';
+
+  const type = ref(1);
+
+  const formValue = defineModel();
+
+  const formRule = {
+    os: [{ required: true, message: '请选择系统' }],
+    app_ver: [{ required: true, message: '请输入版本号' }],
+    app_no: [{ required: true, message: '请输入内部号' }],
+    url: [{ required: true, message: '请输入链接地址' }],
+    is_force: [{ required: true, message: '请选择更新方式' }],
+  };
+
+  const typeOption = [
+    { label: '连接', value: 1 },
+    { label: '上传', value: 2 },
+  ];
+</script>
+
+<template>
+  <Form :model="formValue" :rules="formRule" auto-label-width>
+    <FormItem field="os" label="系统" show-colon>
+      <Select v-model="formValue.os" :options="useVersionApi.systemOption" placeholder="请选择" />
+    </FormItem>
+    <FormItem field="app_ver" label="版本号" show-colon>
+      <Input v-model="formValue.app_ver" placeholder="请输入" />
+    </FormItem>
+    <FormItem field="app_no" label="内部号" show-colon>
+      <InputNumber v-model="formValue.app_no" :precision="0" :step="1" :max="99999999" placeholder="请输入" />
+    </FormItem>
+    <FormItem label="方式" show-colon>
+      <RadioGroup v-model="type" :options="typeOption" />
+    </FormItem>
+    <FormItem v-if="type === 1" field="url" label="版本链接" show-colon>
+      <Input v-model="formValue.url" placeholder="请输入" />
+    </FormItem>
+    <FormItem v-else field="url" label="版本文件" show-colon>
+      <InputUpload v-model="formValue.url" placeholder="请选择" />
+    </FormItem>
+    <FormItem field="is_force" label="强制更新" show-colon>
+      <Select v-model="formValue.is_force" :options="useVersionApi.forceOption" placeholder="请选择" />
+    </FormItem>
+    <FormItem field="remark" label="说明" show-colon>
+      <Textarea v-model="formValue.remark" :auto-size="{ minRows: 4, maxRows: 6 }" />
+    </FormItem>
+  </Form>
+</template>
+
+<style scoped lang="less"></style>

+<template>
+  <page-view has-bread has-card>
+    <filter-search :loading="loading" :model="filter" :inline="true" @search="onSearch" @reset="onReset">
+      <filter-search-item label="系统类型">
+        <a-select v-model="filter.os" :options="systemOption" :allow-clear="true" placeholder="请选择" />
+      </filter-search-item>
+      <filter-search-item label="强制更新">
+        <a-select v-model="filter.is_force" :options="forceOption" :allow-clear="true" placeholder="请选择" />
+      </filter-search-item>
+      <filter-search-item label="内部版本">
+        <a-input v-model="filter.appNoLike" :allow-clear="true" placeholder="请输入筛选版本号" />
+      </filter-search-item>
+    </filter-search>
+    <filter-table ref="tableRef" :loading="loading" :on-query="onQuery">
+      <template #tool>
+        <icon-button v-permission="['system-version-create']" type="primary" icon="plus" label="新增" @click="handleCreate" />
+      </template>
+      <enum-table-column data-index="os" title="系统类型" :option="systemOption" align="center" :width="120" />
+      <filter-table-column data-index="app_ver" title="版本号" align="center" :width="120">
+        <template #default="{ record }">
+          <a-link :hoverable="false" class="link-hover" :href="record.url" icon>{{ record.app_ver }}</a-link>
+        </template>
+      </filter-table-column>
+      <filter-table-column data-index="app_no" title="内部号" align="center" :width="120" />
+      <enum-table-column data-index="is_force" title="强制更新" align="center" :option="forceOption" :width="80" />
+      <filter-table-column data-index="remark" title="说明" />
+      <date-table-column data-index="created_at" title="发布时间" :split="false" :width="170" />
+      <space-table-column
+        v-if="usePermission().checkPermission(['system-version-edit', 'system-version-delete'])"
+        :width="100"
+        data-index="operations"
+        title="操作"
+      >
+        <template #default="{ record }">
+          <a-link v-permission="['system-version-edit']" :hoverable="false" class="link-hover" @click="handleUpdate(record)">编辑</a-link>
+          <a-link v-permission="['system-version-delete']" :hoverable="false" class="link-hover" @click="handleDelete(record)">删除</a-link>
+        </template>
+      </space-table-column>
+    </filter-table>
+  </page-view>
+</template>
+
+<script lang="ts" setup>
+  import { createVNode, onMounted, ref } from 'vue';
+  import { AnyObject } from '@/types/global';
+  import useVersionApi from '@/http/version';
+  import useLoading from '@/hooks/loading';
+  import EnumTableColumn from '@/components/filter/enum-table-column.vue';
+  import DateTableColumn from '@/components/filter/date-table-column.vue';
+  import SpaceTableColumn from '@/components/filter/space-table-column.vue';
+  import FormContent from '@/views/system/version/components/form-content.vue';
+
+  import usePermission from '@/hooks/permission';
+  import { Message, TableData } from '@arco-design/web-vue';
+  import { createModalVNode } from '@/utils/createVNode';
+  import { promiseToBoolean } from '@/utils';
+
+  const { systemOption, forceOption } = useVersionApi;
+
+  const { loading, setLoading } = useLoading(false);
+  const filter = ref<AnyObject>({});
+  const tableRef = ref();
+
+  const onQuery = async (params: AnyObject) => {
+    setLoading(true);
+    return useVersionApi.get({ ...filter.value, ...params, setSort: '-id' }).finally(() => setLoading(false));
+  };
+
+  const onSearch = () => tableRef.value?.onPageChange(1);
+
+  const onReset = () => {
+    filter.value = { appNoLike: '', is_force: '', os: '' };
+    onSearch();
+  };
+
+  onMounted(() => onReset());
+
+  const handleCreate = () => {
+    const formValue = ref({ app_ver: '' });
+
+    createModalVNode(() => createVNode(FormContent, { modelValue: formValue.value }), {
+      title: '新增操作',
+      onBeforeOk: () => promiseToBoolean(useVersionApi.create(formValue.value)),
+      onOk: () => {
+        tableRef.value?.onFetch();
+        Message.success(`新增版本：${formValue.value.app_ver}`);
+      },
+    });
+  };
+
+  const handleUpdate = (row: TableData) => {
+    const formValue = ref({ ...row });
+
+    createModalVNode(() => createVNode(FormContent, { modelValue: formValue.value }), {
+      title: '编辑操作',
+      onBeforeOk: () => promiseToBoolean(useVersionApi.update(row.id, formValue.value)),
+      onOk: () => {
+        tableRef.value?.onFetch();
+        Message.success(`更新版本：${formValue.value.app_ver}`);
+      },
+    });
+  };
+
+  const handleDelete = (row: TableData) =>
+    createModalVNode(`确认要将版本信息：${row.app_ver} 删除吗？`, {
+      title: '删除操作',
+      maskClosable: true,
+      onBeforeOk: () => promiseToBoolean(useVersionApi.destroy(row.id)),
+      onOk: () => {
+        tableRef.value?.onFetch();
+        Message.success(`删除版本：${row.app_ver}`);
+      },
+    });
+</script>
+
+<style lang="less" scoped></style>

+<script setup lang="ts" name="user-business">
+  import { onActivated, ref } from 'vue';
+  import { AnyObject } from '@/types/global';
+  import useLoading from '@/hooks/loading';
+  import PhoneTableColumn from '@/components/filter/phone-table-column.vue';
+  import EnumTableColumn from '@/components/filter/enum-table-column.vue';
+  import { useBusinessApi } from '@/http/user';
+  import { useRoute, useRouter } from 'vue-router';
+  import { TableData } from '@arco-design/web-vue';
+  import UserTableColumn from '@/components/filter/user-table-column.vue';
+
+  const router = useRouter();
+
+  const tableRef = ref();
+  const filter = ref<AnyObject>({});
+  const { loading, setLoading } = useLoading(false);
+
+  const { sexOption, scopeOption, statusOption, officialStatusOption, get, getExport } = useBusinessApi;
+
+  const onQuery = async (params?: AnyObject) => {
+    setLoading(true);
+    return get({ ...filter.value, ...params }).finally(() => setLoading(false));
+  };
+
+  const onExport = () => getExport('经纪人', filter.value);
+
+  const onSearch = () => tableRef.value?.onPageChange(1);
+
+  const onSort = (column: string, type: string) => {
+    filter.value.sortBy = type ? column : 'id';
+    filter.value.sortType = type || 'desc';
+    tableRef.value?.onFetch();
+  };
+
+  const onReset = () => {
+    filter.value = {
+      nick_name: '',
+      sex: '',
+      email_like: '',
+      phone_like: '',
+      company: '',
+      scope: '',
+      official_status: '',
+      status: '',
+      sortBy: 'id',
+      sortType: 'desc',
+    };
+    tableRef.value?.resetSort();
+    onSearch();
+  };
+
+  const onRowClick = (record: TableData) => router.push({ name: 'user-business-show', params: { id: record.id } });
+
+  onActivated(() => (useRoute().meta.reload ? onReset() : tableRef.value?.onFetch()));
+</script>
+
+<template>
+  <page-view has-card has-bread>
+    <filter-search :model="filter" :loading="loading" @search="onSearch" @reset="onReset">
+      <filter-search-item field="nick_name" label="用户艺名">
+        <a-input v-model="filter.nick_name" allow-clear placeholder="请输入" />
+      </filter-search-item>
+      <filter-search-item field="sex" label="性别">
+        <a-select v-model="filter.sex" allow-clear placeholder="请选择" :options="sexOption" />
+      </filter-search-item>
+      <filter-search-item field="email_like" label="用户邮箱">
+        <a-input v-model="filter.email_like" allow-clear placeholder="请输入" />
+      </filter-search-item>
+      <filter-search-item field="phone_like" label="手机号码">
+        <a-input v-model="filter.phone_like" allow-clear placeholder="请输入" />
+      </filter-search-item>
+      <filter-search-item field="company" label="所属公司">
+        <a-input v-model="filter.company" allow-clear placeholder="请输入" />
+      </filter-search-item>
+      <filter-search-item field="scope" label="权限">
+        <a-select v-model="filter.scope" allow-clear placeholder="请选择" :options="scopeOption" />
+      </filter-search-item>
+      <filter-search-item field="official_status" label="关注服务号">
+        <a-select v-model="filter.official_status" allow-clear placeholder="请选择" :options="officialStatusOption" />
+      </filter-search-item>
+      <filter-search-item field="status" label="状态">
+        <a-select v-model="filter.status" allow-clear placeholder="请选择" :options="statusOption" />
+      </filter-search-item>
+      <template #button>
+        <export-button v-permission="['user-business-export']" :on-download="onExport" />
+      </template>
+    </filter-search>
+    <filter-table ref="tableRef" :loading="loading" :on-query="onQuery" hover-type="pointer" @row-click="onRowClick" @row-sort="onSort">
+      <user-table-column title="用户艺名" data-index="id" show-avatar :width="240" />
+      <enum-table-column title="性别" data-index="sex" :option="sexOption" :dark-value="0" :width="70" />
+      <filter-table-column title="用户邮箱" data-index="email" :width="170" />
+      <phone-table-column title="手机号码" data-index="phone" area-index="area_code" :width="160" />
+      <filter-table-column title="认证通过时间" data-index="audit_at" :width="170" has-sort />
+      <filter-table-column title="所属公司" data-index="company" :width="170" />
+      <enum-table-column title="权限" data-index="scope" :option="scopeOption" :dark-value="0" :width="120" />
+      <enum-table-column title="关注服务号" data-index="official_status" :option="officialStatusOption" :dark-value="0" :width="120" />
+      <enum-table-column title="状态" data-index="status" :option="statusOption" :width="80" />
+    </filter-table>
+  </page-view>
+</template>
+
+<style scoped lang="less"></style>

+<script setup lang="ts">
+  import {
+    Tabs,
+    TabPane,
+    Row,
+    Col,
+    Avatar,
+    Form,
+    FormItem,
+    Divider,
+    ImagePreviewGroup,
+    Space,
+    Image,
+    RadioGroup,
+    Textarea,
+    Table,
+    TableColumn,
+  } from '@arco-design/web-vue';
+  import AudioPlayer from '@/components/audio-player/index.vue';
+  import { useCertifyApi } from '@/http/user';
+  import { Option } from '@/types/global';
+  import { ref } from 'vue';
+  import { Router } from 'vue-router';
+  import { FormInstance } from '@arco-design/web-vue/es/form';
+  import { UserCertify } from '@/utils/model';
+
+  const { statusOption } = useCertifyApi;
+
+  const props = defineProps<{
+    activeKey: string;
+    router: Router;
+    row: UserCertify;
+    platformOption: Option[];
+    certifyOption: Option[];
+    disabled?: boolean;
+    submit?: (value: { status: number; reason: string }) => Promise<UserCertify>;
+    close?: () => void;
+  }>();
+
+  const auditStatus = [
+    { value: 1, label: '通过' },
+    { value: 2, label: '拒绝' },
+  ];
+
+  const formRef = ref<FormInstance>();
+  const formValue = ref({ status: props.row.status || 0, reason: props.row.reason || '' });
+
+  const onSubmit = async () => {
+    return (await formRef.value?.validate()) ? Promise.reject() : props.submit?.(formValue.value);
+  };
+
+  // const router = useRouter();
+
+  const goUserDetailPage = (userId: any) => {
+    props.close?.();
+    const r = props.router;
+    if (props.row.user?.identity === 1) {
+      return r.push({ name: 'user-singer-show', params: { id: userId } });
+    }
+    if ([2, 3].includes(Number(props.row.user?.identity))) {
+      return r.push({ name: 'user-business-show', params: { id: userId } });
+    }
+    return r.push({ name: 'user-register-show', params: { id: userId } });
+  };
+
+  defineExpose({ onSubmit });
+</script>
+
+<template>
+  <Tabs :default-active-key="activeKey || 'audit'" type="rounded" size="small">
+    <TabPane key="audit" title="认证申请">
+      <Row align="center">
+        <Col flex="80px" style="margin-right: 20px; cursor: pointer">
+          <Avatar :size="80" :image-url="row.user?.avatar || ''" @click="goUserDetailPage(row.user?.id)" />
+        </Col>
+        <Col flex="auto">
+          <Form v-if="row.user" :model="row.user" auto-label-width>
+            <FormItem hide-label row-class="mb-0" @click="goUserDetailPage(row.user?.id)">
+              <div style="font-weight: bold; font-size: 18px; cursor: pointer"> {{ row.user.nick_name || '' }}</div>
+              <span style="font-size: 12px; margin-left: 10px; cursor: pointer">{{ row.user.real_name }}</span>
+            </FormItem>
+            <FormItem label="当前身份" show-colon row-class="mb-0">
+              <Space>
+                <template #split>
+                  <Divider direction="vertical" />
+                </template>
+                <span v-if="row.user.identity === 0">未认证</span>
+                <span v-if="[1, 3].includes(row.user.identity)">音乐人</span>
+                <span v-if="[2, 3].includes(row.user.identity)">经纪人</span>
+              </Space>
+            </FormItem>
+            <FormItem label="当前能力" show-colon row-class="mb-0">
+              {{ row.user.auth_tags?.map((item) => item.name).join('｜') }}
+            </FormItem>
+          </Form>
+        </Col>
+      </Row>
+
+      <Divider orientation="left">注册来源</Divider>
+
+      <Row align="center" style="margin-top: 14px">
+        <Col v-if="row.user?.register_type == 2">
+          <span class="span">注册来源(用户推荐)：</span>
+          <span style="color: rgb(18, 92, 254, 1); cursor: pointer" @click="goUserDetailPage(row.user?.inviter.id)">{{
+            row.user?.inviter.nick_name
+          }}</span>
+        </Col>
+        <Col v-else-if="row.user?.register_type == 1">
+          <span class="span">注册来源(自行注册)：</span>
+          <span class="span">{{ row.user?.register_remark }}</span>
+        </Col>
+        <Col v-else>
+          <span class="span">注册来源：无</span>
+        </Col>
+      </Row>
+
+      <Divider orientation="left">认证信息</Divider>
+      <Form ref="formRef" :model="formValue" :disabled="disabled || false" auto-label-width>
+        <FormItem label="平台用户名" show-colon>{{ row.nick_name }}</FormItem>
+        <FormItem label="所属平台" show-colon>
+          {{
+            platformOption
+              .filter((item) => row.platform.includes(String(item.value)))
+              ?.map((item) => item.label)
+              ?.join('｜')
+          }}
+        </FormItem>
+        <FormItem label="代表作" show-colon>{{ row.works }}</FormItem>
+        <FormItem label="相关截图" show-colon>
+          <ImagePreviewGroup infinite>
+            <Space>
+              <Image v-for="item in row.img" :key="item" :width="60" :height="60" :src="item" />
+            </Space>
+          </ImagePreviewGroup>
+        </FormItem>
+        <FormItem label="认证能力" show-colon>
+          {{
+            certifyOption
+              .filter((item) => row.tags.includes(Number(item.value)))
+              ?.map((item) => item.label)
+              ?.join('｜')
+          }}
+        </FormItem>
+        <FormItem label="附带音频" show-colon>
+          <Space direction="vertical" fill style="width: 100%">
+            <Row v-if="row.audio_info?.local" align="center">
+              <Col flex="auto">
+                <AudioPlayer :url="row.audio_info.local" />
+              </Col>
+              <Col flex="100px">
+                <div style="line-height: 30px; height: 36px; margin-left: 10px">本地音频</div>
+              </Col>
+            </Row>
+            <Row v-if="row.audio_info?.online" align="center">
+              <Col flex="auto">
+                <AudioPlayer :url="row.audio_info.online" />
+              </Col>
+              <Col flex="100px">
+                <div style="line-height: 30px; height: 36px; margin-left: 10px">在线演唱</div>
+              </Col>
+            </Row>
+          </Space>
+        </FormItem>
+        <FormItem
+          label="审核结果"
+          field="status"
+          show-colon
+          :rules="[{ type: 'number', required: true, min: 1, message: '请选择审核结果' }]"
+        >
+          <RadioGroup v-model="formValue.status" :options="auditStatus" />
+        </FormItem>
+        <FormItem
+          v-show="formValue.status === 2"
+          field="reason"
+          :hide-asterisk="true"
+          :rules="formValue.status === 2 ? [{ required: true, minLength: 1, message: '请输入拒绝理由' }] : []"
+        >
+          <Textarea v-model="formValue.reason" show-word-limit :max-length="100" :auto-size="{ minRows: 3, maxRows: 3 }" />
+        </FormItem>
+      </Form>
+    </TabPane>
+    <TabPane key="record" :title="`审核记录(${row.records.length})`">
+      <Table :data="row.records" :bordered="false" :table-layout-fixed="true" :pagination="false" :scroll="{ y: 800 }">
+        <template #columns>
+          <TableColumn data-index="id" title="序号" :width="60">
+            <template #cell="{ rowIndex }">
+              {{ row.records.length - rowIndex }}
+            </template>
+          </TableColumn>
+          <TableColumn title="操作人" data-index="operator_id">
+            <template #cell="{ record }">
+              <template v-if="record.operator">{{ `${record.operator.nick_name}(${record.operator.real_name})` }}</template>
+            </template>
+          </TableColumn>
+          <TableColumn title="操作时间" data-index="updated_at" />
+          <TableColumn title="操作结果" data-index="status">
+            <template #cell="{ record }">{{ statusOption.find((item) => item.value === record.status)?.label }}</template>
+          </TableColumn>
+          <TableColumn title="说明" data-index="reason" />
+        </template>
+      </Table>
+    </TabPane>
+  </Tabs>
+</template>
+
+<style scoped lang="less">
+  .arco-form-item {
+    margin-bottom: 10px;
+  }
+
+  .span {
+    color: rgb(78, 89, 105, 1);
+    font-size: 14px;
+  }
+</style>

+<script setup lang="ts" name="user-certify">
+  import { ref, onActivated, h } from 'vue';
+  import useLoading from '@/hooks/loading';
+  import { useCertifyApi } from '@/http/user';
+  import { AnyObject, Option } from '@/types/global';
+  import { useRoute, useRouter } from 'vue-router';
+  import EnumTableColumn from '@/components/filter/enum-table-column.vue';
+  import useConfigApi from '@/http/config';
+  import useTagApi from '@/http/Tag';
+  import { createModalVNode } from '@/utils/createVNode';
+  import { UserCertify } from '@/utils/model';
+  import { TableData } from '@arco-design/web-vue';
+  import UserTableColumn from '@/components/filter/user-table-column.vue';
+  import ModalContent from './components/modal-content.vue';
+  import { useAuthorizedStore } from '@/store';
+  import { promiseToBoolean } from '@/utils';
+  import usePermission from '@/hooks/permission';
+
+  const { sexOption, statusOption, get, update } = useCertifyApi;
+
+  const tableRef = ref();
+  const filter = ref<AnyObject>({});
+  const { loading, setLoading } = useLoading(false);
+
+  const platformOption = ref<Option[]>([]);
+  const certifyOption = ref<Option[]>([]);
+
+  const router = useRouter();
+
+  const onQuery = async (params?: AnyObject) => {
+    setLoading(true);
+    return get({ ...filter.value, ...params, sortBy: 'id', sortType: 'desc' }).finally(() => setLoading(false));
+  };
+
+  const onSearch = () => tableRef.value?.onPageChange(1);
+
+  const formatPlatform = (platform: string[]) => platformOption.value.filter((item) => platform.includes(String(item.value)));
+
+  const formatTag = (tag: number[]) => certifyOption.value.filter((item) => tag.includes(Number(item.value)));
+
+  const onReset = () => {
+    filter.value = { nick_name: '', sex: '', status: 0, createBetween: [] };
+    onSearch();
+  };
+
+  const onView = (record: UserCertify) =>
+    createModalVNode(
+      () =>
+        h(ModalContent, {
+          activeKey: 'record',
+          row: record,
+          disabled: true,
+          router,
+          platformOption: platformOption.value,
+          certifyOption: certifyOption.value,
+        }),
+      {
+        title: '认证审核',
+        titleAlign: 'center',
+        modalClass: 'retry',
+        escToClose: true,
+        maskClosable: true,
+        hideCancel: true,
+      }
+    );
+
+  const onAudit = (record: UserCertify) => {
+    const auditRef = ref<InstanceType<typeof ModalContent>>();
+    const modal = createModalVNode(
+      () =>
+        h(ModalContent, {
+          activeKey: 'audit',
+          ref: auditRef,
+          row: record,
+          router,
+          platformOption: platformOption.value,
+          certifyOption: certifyOption.value,
+          submit: (data: any) => update(record.id, data),
+          close: () => modal.close(),
+        }),
+      {
+        title: '认证审核',
+        titleAlign: 'center',
+        modalClass: 'retry',
+        onBeforeOk: () => promiseToBoolean(auditRef.value?.onSubmit()),
+        onOk: () => {
+          tableRef.value?.onFetch();
+          useAuthorizedStore().syncAuditUser();
+        },
+      }
+    );
+  };
+
+  const onRowClick = (record: TableData) => {
+    if (record.user?.identity === 1) {
+      return router.push({ name: 'user-singer-show', params: { id: record.user_id } });
+    }
+    if ([2, 3].includes(Number(record.user?.identity))) {
+      return router.push({ name: 'user-business-show', params: { id: record.user_id } });
+    }
+    return router.push({ name: 'user-register-show', params: { id: record.user_id } });
+  };
+
+  onActivated(() => {
+    if (useRoute().meta.reload) {
+      onReset();
+      useConfigApi.getOption({ parentKey: 'music_platform' }).then((data) => (platformOption.value = data));
+      useTagApi.getOption({ type: 4 }).then((data) => (certifyOption.value = data));
+      useAuthorizedStore().syncAuditUser();
+    }
+  });
+</script>
+
+<template>
+  <page-view has-card has-bread>
+    <filter-search :model="filter" :loading="loading" @search="onSearch" @reset="onReset">
+      <filter-search-item field="nick_name" label="用户艺名">
+        <a-input v-model="filter.nick_name" allow-clear placeholder="请输入" />
+      </filter-search-item>
+      <filter-search-item field="sex" label="性别">
+        <a-select v-model="filter.sex" allow-clear placeholder="请选择" :options="sexOption" />
+      </filter-search-item>
+      <filter-search-item field="createBetween" label="提交时间">
+        <a-range-picker
+          v-model="filter.createBetween"
+          :time-picker-props="{ defaultValue: ['00:00:00', '23:59:59'] }"
+          :day-start-of-week="1"
+          value-format="YYYY-MM-DD HH:mm:ss"
+          format="YYYY-MM-DD"
+        />
+      </filter-search-item>
+      <filter-search-item field="status" label="状态">
+        <a-select v-model="filter.status" allow-clear placeholder="请选择" :options="statusOption" />
+      </filter-search-item>
+    </filter-search>
+    <filter-table ref="tableRef" :loading="loading" :on-query="onQuery" @row-click="onRowClick">
+      <user-table-column title="用户艺名" data-index="user_id" user="user" show-avatar :width="240" />
+      <enum-table-column title="性别" data-index="user.sex" :option="sexOption" :dark-value="0" :width="70" />
+      <filter-table-column title="平台用户名称" data-index="nick_name" :width="120" />
+      <a-table-column title="	所属平台" data-index="platform" :ellipsis="true">
+        <template #cell="{ record }">
+          <a-tag v-for="item in formatPlatform(record.platform)" :key="item.value" style="margin-right: 4px">
+            {{ item.label }}
+          </a-tag>
+        </template>
+      </a-table-column>
+      <filter-table-column title="代表作名称/链接" data-index="works" :width="160" />
+      <a-table-column title="认证能力" data-index="tags" :width="200" :ellipsis="true">
+        <template #cell="{ record }">
+          <a-tag v-for="item in formatTag(record.tags)" :key="item.value" style="margin-right: 4px">
+            {{ item.label }}
+          </a-tag>
+        </template>
+      </a-table-column>
+      <filter-table-column title="最后提交审核时间" data-index="created_at" :width="170" />
+      <enum-table-column title="最后审核状态" data-index="status" :option="statusOption" :width="120" />
+      <a-table-column
+        v-if="usePermission().checkPermission(['user-certify-audit', 'user-certify-show'])"
+        title="操作"
+        data-index="operation"
+        :width="100"
+      >
+        <template #cell="{ record }">
+          <a-link
+            v-if="record.status === 0"
+            v-permission="['user-certify-audit']"
+            class="link-hover"
+            :hoverable="false"
+            @click.stop="onAudit(record)"
+          >
+            审核
+          </a-link>
+          <a-link v-else v-permission="['user-certify-show']" class="link-hover" :hoverable="false" @click.stop="onView(record)"
+            >查看详情
+          </a-link>
+        </template>
+      </a-table-column>
+    </filter-table>
+  </page-view>
+</template>
+
+<style scoped lang="less"></style>

+<template>
+  <router-view v-slot="{ Component, route }">
+    <keep-alive :exclude="['user-show']">
+      <component :is="Component" :key="route.path" />
+    </keep-alive>
+  </router-view>
+</template>
+
+<script lang="ts" setup>
+  import { onMounted } from 'vue';
+  import { useSelectionStore } from '@/store';
+
+  onMounted(() => useSelectionStore().queryProject());
+</script>
+
+<style lang="less" scoped>
+  .container {
+    padding: 0 30px 20px 20px;
+  }
+
+  .operations {
+    display: flex;
+  }
+</style>

+<script setup lang="ts">
+  import useUserApi from '@/http/user';
+  import { IconDown } from '@arco-design/web-vue/es/icon';
+  import { createModalVNode } from '@/utils/createVNode';
+  import { createVNode, onMounted, ref, toRef, computed } from 'vue';
+  import PasswordForm from '@/views/user/info/components/password-form.vue';
+  import UpdateForm from '@/views/user/info/components/update-form.vue';
+  import useTagApi from '@/http/Tag';
+  import { Option } from '@/types/global';
+  import { User } from '@/utils/model';
+  import UserImageDynamics from '@/views/user/info/components/user-image-dynamics.vue';
+  import UserAudioDynamics from '@/views/user/info/components/user-audio-dynamics.vue';
+  import UserVideoDynamics from '@/views/user/info/components/user-video-dynamics.vue';
+  import { useRoute, useRouter } from 'vue-router';
+  import { isArray } from '@/utils/is';
+  import usePermission from '@/hooks/permission';
+
+  const props = defineProps<{
+    user: User & { image_dynamic_count?: number; audio_dynamic_count?: number; video_dynamic_count?: number };
+  }>();
+  const user = toRef(props, 'user');
+  const { scopeOption, statusOption, sexOption, update, destroy, changeStatus, changePwd } = useUserApi;
+
+  const coverVisible = ref(false);
+
+  const authTagOptions = ref<Option[]>([]);
+
+  onMounted(() => useTagApi.getOption({ type: 4 }).then((data) => (authTagOptions.value = data)));
+
+  const onViewImage = () =>
+    createModalVNode(() => createVNode(UserImageDynamics, { userKey: user.value.id }), {
+      title: 'Ta的相册',
+      titleAlign: 'center',
+      closable: true,
+      footer: false,
+      escToClose: true,
+      width: '780px',
+    });
+
+  const onViewAudio = () =>
+    createModalVNode(() => createVNode(UserAudioDynamics, { userKey: user.value.id }), {
+      title: 'Ta的音频',
+      titleAlign: 'center',
+      closable: true,
+      footer: false,
+      escToClose: true,
+      bodyStyle: { padding: '0 !important' },
+      width: '540px',
+    });
+
+  const onViewVideo = () =>
+    createModalVNode(() => createVNode(UserVideoDynamics, { userKey: user.value.id }), {
+      title: 'Ta的视频',
+      titleAlign: 'center',
+      closable: true,
+      footer: false,
+      escToClose: true,
+      width: '780px',
+    });
+  const onOperation = (value: string) => {
+    // eslint-disable-next-line default-case
+    switch (value) {
+      case 'STATUS_ON':
+        createModalVNode('是否确认将该用户启用？', {
+          title: '状态变更',
+          onBeforeOk: (done: any) =>
+            changeStatus(user.value?.id || 0, 1)
+              .then(() => {
+                user.value.status = 1;
+                done(true);
+              })
+              .catch(() => done(false)),
+        });
+        break;
+      case 'STATUS_OFF':
+        createModalVNode('是否确认将该用户禁用？', {
+          title: '状态变更',
+          onBeforeOk: (done: any) =>
+            changeStatus(user.value?.id || 0, 0)
+              .then(() => {
+                user.value.status = 0;
+                done(true);
+              })
+              .catch(() => done(false)),
+        });
+        break;
+      case 'CHANGE_PWD':
+        // eslint-disable-next-line no-case-declarations
+        const pwdRef = ref<InstanceType<typeof PasswordForm>>();
+        createModalVNode(() => createVNode(PasswordForm, { ref: pwdRef, onRequest: (data: any) => changePwd(user.value?.id, data) }), {
+          title: '重置密码',
+          onBeforeOk: (done: any) =>
+            pwdRef.value
+              ?.onSubmit()
+              .then(() => done(true))
+              .catch(() => done(false)),
+        });
+        break;
+      case 'UPDATE':
+        // eslint-disable-next-line no-case-declarations
+        const updateRef = ref<InstanceType<typeof UpdateForm>>();
+        createModalVNode(
+          () =>
+            createVNode(UpdateForm, {
+              ref: updateRef,
+              row: user.value,
+              authTagOptions: authTagOptions.value,
+              onRequest: (data: any) => update(user.value?.id, data),
+            }),
+          {
+            title: '编辑信息',
+            modalClass: 'update-modal',
+            onBeforeOk: (done: any) =>
+              updateRef.value
+                ?.onSubmit()
+                .then((attribute: User) => {
+                  Object.assign(user.value, attribute);
+                  done(true);
+                })
+                .catch(() => done(false)),
+          }
+        );
+        break;
+      case 'DELETE':
+        createModalVNode('是否确认将该用户注销？', {
+          title: '状态变更',
+          onBeforeOk: (done: any) =>
+            destroy(user.value?.id)
+              .then(() => {
+                user.value.status = 2;
+                done(true);
+              })
+              .catch(() => done(false)),
+        });
+        break;
+    }
+  };
+
+  const routeName = useRoute().name as string;
+  const router = useRouter();
+  const checkPermission = (permission: string | string[]): boolean => {
+    permission = isArray(permission) ? permission.map((item) => `${routeName}-${item}`) : `${routeName}-${permission}`;
+    return usePermission().checkPermission(permission);
+  };
+  const hasPermission = computed(() => checkPermission(['update', 'status', 'password', 'delete']));
+
+  const goUserDetailPage = (user: any) => {
+    if (user.identity === 1) {
+      return router.push({ name: 'user-singer-show', params: { id: user.id } });
+    }
+    if ([2, 3].includes(Number(user.identity))) {
+      return router.push({ name: 'user-business-show', params: { id: user.id } });
+    }
+    return router.push({ name: 'user-register-show', params: { id: user.id } });
+  };
+</script>
+
+<template>
+  <a-card :bordered="false">
+    <a-form style="margin-top: 16px" :model="user" size="small" auto-label-width>
+      <a-row justify="start" align="start">
+        <a-col flex="120px">
+          <a-avatar :size="120" :image-url="user.avatar" />
+        </a-col>
+        <a-col flex="1">
+          <a-row :gutter="16">
+            <a-col :span="8">
+              <a-form-item label="用户艺名" :show-colon="true">
+                <a-typography-paragraph type="secondary" :ellipsis="{ rows: 1, showTooltip: true }">
+                  {{ `${user.nick_name}（${user.real_name}）` }}
+                </a-typography-paragraph>
+              </a-form-item>
+            </a-col>
+            <a-col :span="8">
+              <a-form-item label="关注服务号" :show-colon="true">
+                <span v-if="user.official_status === 1">已关注</span>
+                <span v-else style="color: rgba(44, 44, 44, 0.5)">未关注</span>
+              </a-form-item>
+            </a-col>
+            <a-col :span="6">
+              <a-form-item label="状态" :show-colon="true">
+                {{ statusOption.find((item) => item.value === user.status)?.label }}
+              </a-form-item>
+            </a-col>
+            <a-col :span="2">
+              <a-dropdown v-if="hasPermission && [0, 1].includes(user.status)" :popup-max-height="false" @select="onOperation">
+                <a-button>
+                  操作
+                  <icon-down style="margin-left: 4px" />
+                </a-button>
+                <template #content>
+                  <a-doption v-if="checkPermission('status') && user.status === 0" value="STATUS_ON">启用账号</a-doption>
+                  <a-doption v-if="checkPermission('status') && user.status === 1" value="STATUS_OFF">禁用账号</a-doption>
+                  <a-doption v-if="checkPermission('update')" value="UPDATE">编辑信息</a-doption>
+                  <a-doption v-if="checkPermission('password')" value="CHANGE_PWD">重置密码</a-doption>
+                  <a-doption v-if="checkPermission('delete')" value="DELETE">注销账号</a-doption>
+                </template>
+              </a-dropdown>
+            </a-col>
+            <a-col :span="8">
+              <a-form-item label="性别" :show-colon="true">
+                <span v-if="user.sex === 0" style="color: rgba(44, 44, 44, 0.5)">无</span>
+                <span v-else>{{ sexOption.find((item) => item.value === user.sex)?.label }}</span>
+              </a-form-item>
+            </a-col>
+            <a-col :span="8">
+              <a-form-item label="邮箱" :show-colon="true">
+                <span v-if="user.email">{{ user.email }}</span>
+                <span v-else style="color: rgba(44, 44, 44, 0.5)">无</span>
+              </a-form-item>
+            </a-col>
+            <a-col :span="8">
+              <a-form-item label="手机号" :show-colon="true">
+                <span v-if="user.phone"> {{ `(+${user.area_code}) ${user.phone}` }}</span>
+                <span v-else style="color: rgba(44, 44, 44, 0.5)">无</span>
+              </a-form-item>
+            </a-col>
+            <a-col :span="8">
+              <a-form-item label="经纪人" :show-colon="true">
+                <user-link v-if="user?.business" :user="user.business" />
+                <span v-else style="color: rgba(44, 44, 44, 0.5)">无</span>
+              </a-form-item>
+            </a-col>
+            <a-col :span="8">
+              <a-form-item label="用户认证" :show-colon="true">
+                <span v-if="user.auth_tags?.length === 0">
+                  <span style="color: rgba(44, 44, 44, 0.5)">无</span>
+                  <a-divider v-if="user.auth_tags && [2, 3].includes(user.identity)" direction="vertical" />
+                  <span v-if="[2, 3].includes(user.identity)"> 经纪人</span>
+                </span>
+                <a-typography-paragraph v-else type="secondary" :ellipsis="{ rows: 1, showTooltip: true }">
+                  <span v-if="user.auth_tags?.length !== 0">音乐人{{ user.auth_tags?.map((item) => `【${item.name}】`).join('') }} </span>
+                  <a-divider v-if="user.auth_tags && [2, 3].includes(user.identity)" direction="vertical" />
+                  <span v-if="[2, 3].includes(user.identity)"> 经纪人</span>
+                </a-typography-paragraph>
+              </a-form-item>
+            </a-col>
+            <a-col :span="8">
+              <a-form-item label="公司" :show-colon="true">
+                <a-typography-paragraph v-if="user.company" type="secondary" :ellipsis="{ rows: 1, showTooltip: true }">
+                  {{ user.company }}
+                </a-typography-paragraph>
+                <span v-else style="color: rgba(44, 44, 44, 0.5)">无</span>
+              </a-form-item>
+            </a-col>
+            <a-col :span="8">
+              <a-form-item label="常居地" :show-colon="true">
+                <span v-if="!user.province && !user.city" style="color: rgba(44, 44, 44, 0.5)">无</span>
+                <span v-else>{{ [user.province, user.city].filter((item) => item).join('-') }}</span>
+              </a-form-item>
+            </a-col>
+            <a-col :span="8">
+              <a-form-item label="擅长曲风" :show-colon="true">
+                <span v-if="user.style_tags?.length === 0" style="color: rgba(44, 44, 44, 0.5)">无</span>
+                <span v-else>{{ user.style_tags?.map((item) => item.name).join('、') }}</span>
+              </a-form-item>
+            </a-col>
+            <a-col :span="8">
+              <a-form-item label="权限" :show-colon="true">
+                <span v-if="user.scope === 0" style="color: rgba(44, 44, 44, 0.5)">无</span>
+                <span v-else>{{ scopeOption.find((item) => item.value === user.scope)?.label }}</span>
+              </a-form-item>
+            </a-col>
+            <a-col :span="8">
+              <a-form-item label="Ta的相册" show-colon>
+                <a-link v-if="user.image_dynamic_count" :hoverable="false" @click="onViewImage">查看</a-link>
+                <span v-else style="color: rgba(44, 44, 44, 0.5)">无</span>
+              </a-form-item>
+            </a-col>
+            <a-col :span="8">
+              <a-form-item label="Ta的音频" show-colon>
+                <a-link v-if="user.audio_dynamic_count" :hoverable="false" @click="onViewAudio">查看</a-link>
+                <span v-else style="color: rgba(44, 44, 44, 0.5)">无</span>
+              </a-form-item>
+            </a-col>
+            <a-col :span="8">
+              <a-form-item label="Ta的视频" :show-colon="true">
+                <a-link v-if="user.video_dynamic_count" :hoverable="false" @click="onViewVideo">查看</a-link>
+                <span v-else style="color: rgba(44, 44, 44, 0.5)">无</span>
+              </a-form-item>
+            </a-col>
+            <a-col :span="8">
+              <a-form-item label="头部封面" show-colon>
+                <a-link :hoverable="false" @click="coverVisible = !coverVisible">查看</a-link>
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <a-form-item v-if="user.register_type == 2" label="来源渠道(用户推荐)" :show-colon="true">
+                <a-link :hoverable="false" @click="goUserDetailPage(user.inviter)">{{ user.inviter?.nick_name }}</a-link>
+              </a-form-item>
+              <a-form-item v-else-if="user.register_type == 1" label="来源渠道(自行注册)" :show-colon="true">
+                <span>{{ user.register_remark }}</span>
+              </a-form-item>
+              <a-form-item v-else label="来源渠道" :show-colon="true">
+                <span style="color: rgba(44, 44, 44, 0.5)">无</span>
+              </a-form-item>
+            </a-col>
+            <a-col :span="24">
+              <a-form-item label="简介" :show-colon="true">
+                <span v-if="user.intro">{{ user.intro }}</span>
+                <span v-else style="color: rgba(44, 44, 44, 0.5)">无</span>
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </a-col>
+      </a-row>
+    </a-form>
+
+    <a-image-preview
+      v-model:visible="coverVisible"
+      :closable="false"
+      :src="`${user.cover}?x-oss-process=image/format,webp`"
+      :actions-layout="[]"
+    />
+  </a-card>
+</template>
+
+<style scoped lang="less">
+  :deep(.arco-typography) {
+    text-align: left;
+    margin-bottom: 0;
+    width: 100%;
+  }
+
+  :deep(.arco-form-item) {
+    margin-bottom: 8px;
+  }
+</style>

+<script setup lang="ts">
+  import { onMounted, ref } from 'vue';
+  import useLoading from '@/hooks/loading';
+  import { AnyObject } from '@/types/global';
+
+  import UserTableColumn from '@/components/filter/user-table-column.vue';
+  import EnumTableColumn from '@/components/filter/enum-table-column.vue';
+  import PhoneTableColumn from '@/components/filter/phone-table-column.vue';
+  import { TableData } from '@arco-design/web-vue';
+  import { useRoute, useRouter } from 'vue-router';
+  import useUserApi, { useMemberApi } from '@/http/user';
+  import { createModalVNode } from '@/utils/createVNode';
+  import { isArray } from '@/utils/is';
+  import usePermission from '@/hooks/permission';
+
+  const router = useRouter();
+  const props = defineProps<{ userKey: number }>();
+
+  const tableRef = ref();
+  const filter = ref<AnyObject>({});
+  const { loading, setLoading } = useLoading(false);
+  const total = ref(0);
+
+  const { officialStatusOption, statusOption, scopeOption, sexOption } = useUserApi;
+
+  const { get, destroy } = useMemberApi;
+
+  const onQuery = async (params?: AnyObject) => {
+    setLoading(true);
+
+    get(props.userKey, { pageSize: 1 }).then(({ meta }) => (total.value = meta.total));
+
+    return get(props.userKey, { ...filter.value, ...params, sortBy: 'id', sortType: 'desc' }).finally(() => setLoading(false));
+  };
+
+  const onRowClick = (record: TableData) => {
+    const identity = record.member?.identity || 0;
+
+    if (identity) {
+      router.push({ name: 'user-register-show', params: { id: record.member_id } });
+    }
+    if ([2, 3].includes(identity)) {
+      router.push({ name: 'user-business-show', params: { id: record.member_id } });
+    }
+
+    router.push({ name: 'user-register-show', params: { id: record.member_id } });
+  };
+
+  const onSearch = () => tableRef.value?.onPageChange(1);
+
+  const onReset = () => {
+    filter.value = {
+      member_nick_name: '',
+      member_email_like: '',
+      member_phone_like: '',
+      member_official_status: '',
+      member_status: '',
+    };
+    onSearch();
+  };
+
+  const onDelete = (record: TableData) =>
+    createModalVNode(`确认移除此用户？`, {
+      title: '删除操作',
+      onBeforeOk: (done: any) =>
+        destroy(record.member_id)
+          .then(() => {
+            tableRef.value?.onFetch();
+            done(true);
+          })
+          .catch(() => done(false)),
+    });
+
+  onMounted(() => onReset());
+
+  defineExpose({ total });
+
+  const routeName = useRoute().name as string;
+  const checkPermission = (permission: string | string[]): boolean => {
+    permission = isArray(permission) ? permission.map((item) => `${routeName}-${item}`) : `${routeName}-${permission}`;
+    return usePermission().checkPermission(permission);
+  };
+</script>
+
+<template>
+  <a-card :bordered="false">
+    <filter-search :model="filter" :loading="loading" @search="onSearch" @reset="onReset">
+      <filter-search-item field="member_nick_name" label="用户艺名">
+        <a-input v-model="filter.member_nick_name" allow-clear placeholder="请输入" />
+      </filter-search-item>
+      <filter-search-item field="member_email_like" label="用户邮箱">
+        <a-input v-model="filter.member_email_like" allow-clear placeholder="请输入" />
+      </filter-search-item>
+      <filter-search-item field="member_phone_like" label="手机号码">
+        <a-input v-model="filter.member_phone_like" allow-clear placeholder="请输入" />
+      </filter-search-item>
+      <filter-search-item field="member_official_status" label="关注服务号">
+        <a-select v-model="filter.member_official_status" :options="officialStatusOption" placeholder="请输入" allow-clear />
+      </filter-search-item>
+      <filter-search-item field="member_status" label="状态">
+        <a-select v-model="filter.member_status" :options="statusOption" placeholder="请输入" allow-clear />
+      </filter-search-item>
+    </filter-search>
+
+    <filter-table ref="tableRef" :loading="loading" :on-query="onQuery" hover-type="pointer" @row-click="onRowClick">
+      <user-table-column title="用户艺名" data-index="member_id" user="member" :width="260" show-avatar />
+      <enum-table-column title="性别" data-index="member.sex" :option="sexOption" :dark-value="0" :width="70" />
+      <filter-table-column title="用户邮箱" data-index="member.email" :width="170" />
+      <phone-table-column title="手机号码" data-index="member.phone" area-index="member.area_code" :width="160" />
+      <enum-table-column title="权限" data-index="member.scope" :option="scopeOption" :dark-value="0" :width="120" />
+      <enum-table-column
+        title="关注服务号"
+        data-index="member.official_status"
+        :option="officialStatusOption"
+        :dark-value="0"
+        :width="120"
+      />
+      <enum-table-column title="状态" data-index="member.status" :option="statusOption" :width="80" />
+      <a-table-column v-if="checkPermission('member-delete')" title="操作" data-index="operation" :width="100">
+        <template #cell="{ record }">
+          <a-link v-if="checkPermission('member-delete')" @click.stop="onDelete(record)">删除</a-link>
+        </template>
+      </a-table-column>
+    </filter-table>
+  </a-card>
+</template>
+
+<style scoped lang="less"></style>

+<script setup lang="ts">
+  import { AnyObject } from '@/types/global';
+  import useLoading from '@/hooks/loading';
+  import useUserApi from '@/http/user';
+  import { onMounted, ref } from 'vue';
+  import NumberTableColumn from '@/components/filter/number-table-column.vue';
+  import useActivityApi from '@/http/activity';
+  import { useRouter } from 'vue-router';
+  import { TableData } from '@arco-design/web-vue';
+  import UserTableColumn from '@/components/filter/user-table-column.vue';
+  import ActivityTableColumn from '@/components/filter/activity-table-column.vue';
+  import DateTableColumn from '@/components/filter/date-table-column.vue';
+  import EnumTableColumn from '@/components/filter/enum-table-column.vue';
+
+  const router = useRouter();
+  const props = defineProps<{ userKey: number }>();
+
+  const tableRef = ref();
+  const { loading, setLoading } = useLoading(false);
+  const filter = ref({ song_name: '', project_name: '', tag_name: '', status: '' });
+
+  const total = ref(0);
+
+  const onQuery = async (params?: AnyObject) => {
+    setLoading(true);
+    useUserApi.likeSongs(props.userKey, { pageSize: 1, setColumn: ['id'] }).then(({ meta }) => (total.value = meta.total));
+
+    return useUserApi.likeSongs(props.userKey, { ...filter.value, ...params, setSort: ['-like_at'] }).finally(() => setLoading(false));
+  };
+
+  const onSearch = () => tableRef.value?.onPageChange(1);
+
+  const onRowClick = (record: TableData) => router.push({ name: 'audition-activity-show', params: { id: record.id } });
+
+  const onReset = () => {
+    filter.value = { song_name: '', project_name: '', tag_name: '', status: '' };
+    onSearch();
+  };
+
+  onMounted(() => onReset());
+
+  defineExpose({ total });
+</script>
+
+<template>
+  <a-card :bordered="false">
+    <filter-search :model="filter" :loading="loading" @search="onSearch" @reset="onReset">
+      <filter-search-item label="歌曲名称" filed="song_name">
+        <a-input v-model="filter.song_name" allow-clear placeholder="请输入" />
+      </filter-search-item>
+      <filter-search-item label="厂牌名称" filed="project_name">
+        <a-input v-model="filter.project_name" allow-clear placeholder="请输入" />
+      </filter-search-item>
+      <filter-search-item label="标签名称" filed="tag_name">
+        <a-input v-model="filter.tag_name" allow-clear placeholder="请输入" />
+      </filter-search-item>
+      <filter-search-item label="状态" filed="status">
+        <a-select v-model="filter.status" :options="useActivityApi.statusOption" allow-clear placeholder="请选择" />
+      </filter-search-item>
+    </filter-search>
+    <filter-table ref="tableRef" :loading="loading" :on-query="onQuery" hover-type="pointer" @row-click="onRowClick">
+      <activity-table-column data-index="id" title="试唱歌曲" />
+      <number-table-column :width="120" data-index="view_count" title="试听人数" />
+      <number-table-column :width="120" data-index="like_count" title="收藏人数" />
+      <number-table-column :width="120" data-index="submit_work_count" title="提交人数" />
+      <user-table-column :width="140" data-index="user_id" user="user" title="创建人" />
+      <date-table-column :width="110" data-index="like_at" title="收藏时间" />
+      <enum-table-column :width="110" data-index="status" title="状态" :option="useActivityApi.statusOption" />
+    </filter-table>
+  </a-card>
+</template>
+
+<style scoped lang="less"></style>

+<script setup lang="ts">
+  import { AnyObject } from '@/types/global';
+  import useLoading from '@/hooks/loading';
+  import { onMounted, ref } from 'vue';
+  import useUserApi from '@/http/user';
+  import useActivityApi from '@/http/activity';
+  import NumberTableColumn from '@/components/filter/number-table-column.vue';
+  import UserTableColumn from '@/components/filter/user-table-column.vue';
+  import { useRouter } from 'vue-router';
+  import { TableData } from '@arco-design/web-vue';
+  import EnumTableColumn from '@/components/filter/enum-table-column.vue';
+  import DateTableColumn from '@/components/filter/date-table-column.vue';
+  import ActivityTableColumn from '@/components/filter/activity-table-column.vue';
+
+  const router = useRouter();
+  const props = defineProps<{ userKey: number }>();
+
+  const tableRef = ref();
+  const { loading, setLoading } = useLoading(false);
+  const filter = ref({ song_name: '', project_name: '', tag_name: '', status: '' });
+
+  const total = ref(0);
+
+  const onQuery = async (params?: AnyObject) => {
+    setLoading(true);
+    useUserApi.listenSongs(props.userKey, { pageSize: 1 }).then(({ meta }) => (total.value = meta.total));
+
+    return useUserApi
+      .listenSongs(props.userKey, { ...filter.value, ...params, sortBy: 'listen_at', sortType: 'desc' })
+      .finally(() => setLoading(false));
+  };
+
+  const onSearch = () => tableRef.value?.onPageChange(1);
+
+  const onRowClick = (record: TableData) => router.push({ name: 'audition-activity-show', params: { id: record.id } });
+
+  const onReset = () => {
+    filter.value = { song_name: '', project_name: '', tag_name: '', status: '' };
+    onSearch();
+  };
+
+  onMounted(() => onReset());
+
+  defineExpose({ total });
+</script>
+
+<template>
+  <a-card :bordered="false">
+    <filter-search :model="filter" :loading="loading" @search="onSearch" @reset="onReset">
+      <filter-search-item label="歌曲名称" filed="song_name">
+        <a-input v-model="filter.song_name" allow-clear placeholder="请输入" />
+      </filter-search-item>
+      <filter-search-item label="厂牌名称" filed="project_name">
+        <a-input v-model="filter.project_name" allow-clear placeholder="请输入" />
+      </filter-search-item>
+      <filter-search-item label="标签名称" filed="tag_name">
+        <a-input v-model="filter.tag_name" allow-clear placeholder="请输入" />
+      </filter-search-item>
+      <filter-search-item label="状态" filed="status">
+        <a-select v-model="filter.status" :options="useActivityApi.statusOption" allow-clear placeholder="请选择" />
+      </filter-search-item>
+    </filter-search>
+    <filter-table ref="tableRef" :loading="loading" :on-query="onQuery" hover-type="pointer" @row-click="onRowClick">
+      <activity-table-column data-index="id" title="试唱歌曲" />
+      <number-table-column :width="120" data-index="view_count" title="试听人数" />
+      <number-table-column :width="120" data-index="like_count" title="收藏人数" />
+      <number-table-column :width="120" data-index="submit_work_count" title="提交人数" />
+      <user-table-column :width="140" data-index="user_id" user="user" title="创建人" />
+      <date-table-column :width="110" data-index="listen_at" title="试听时间" />
+      <enum-table-column :width="110" data-index="status" title="状态" :option="useActivityApi.statusOption" />
+    </filter-table>
+  </a-card>
+</template>
+
+<style scoped lang="less"></style>

+<script setup lang="ts">
+  import { computed, onMounted, ref } from 'vue';
+  import PageView from '@/components/page-view/index.vue';
+  import FilterSearch from '@/components/filter/search.vue';
+  import FilterSearchItem from '@/components/filter/search-item.vue';
+  import FilterTable from '@/components/filter/table.vue';
+  import { Input, Select, TableColumn, Link, Message, TableData } from '@arco-design/web-vue';
+  import { AnyObject } from '@/types/global';
+  import useLoading from '@/hooks/loading';
+  import useActivityApi, { useManagerApi } from '@/http/activity';
+  import useUserApi from '@/http/user';
+  import EnumTableColumn from '@/components/filter/enum-table-column.vue';
+  import NumberTableColumn from '@/components/filter/number-table-column.vue';
+  import SpaceTableColumn from '@/components/filter/space-table-column.vue';
+
+  import { createFormVNode, createModalVNode, createSelectionFormItemVNode } from '@/utils/createVNode';
+  import { useRoute } from 'vue-router';
+  import { isArray } from '@/utils/is';
+  import usePermission from '@/hooks/permission';
+
+  const { loading, setLoading } = useLoading(false);
+  const filter = ref({ projectName: '', songName: '', permission: '', activityStatus: '' });
+  const tableRef = ref();
+  const total = ref(0);
+
+  const props = defineProps<{ userKey: number }>();
+  const { statusOption } = useActivityApi;
+  const { permissionOption, update, destroy } = useManagerApi;
+
+  const formatPermission = (permission: any[]) =>
+    permission
+      .map((item) => `[${permissionOption.find((option) => option.value === item)?.label}]` || '')
+      .filter((item) => item.length !== 0)
+      .join('');
+
+  const onQuery = async (params?: AnyObject) => {
+    setLoading(true);
+    useUserApi
+      .manageSongs(props.userKey, { sortBy: 'activity_publish_at', sortType: 'desc' })
+      .then(({ meta }) => (total.value = meta.total));
+
+    return useUserApi
+      .manageSongs(props.userKey, { ...filter.value, ...params, sortBy: 'activity_publish_at', sortType: 'desc' })
+      .finally(() => setLoading(false));
+  };
+
+  const onSearch = () => tableRef.value?.onPageChange(1);
+
+  const onReset = () => {
+    filter.value = { projectName: '', songName: '', permission: '', activityStatus: '' };
+    onSearch();
+  };
+
+  onMounted(() => onReset());
+
+  defineExpose({ total });
+
+  const onUpdate = (record: TableData) => {
+    const formValue = ref<string[]>(record?.permission || ['view']);
+    return createModalVNode(
+      () =>
+        createFormVNode(
+          { layout: 'vertical', model: {} },
+          createSelectionFormItemVNode(
+            formValue,
+            permissionOption,
+            { label: '设置用户权限', rowClass: 'mb-0' },
+            {
+              'multiple': true,
+              'onUpdate:modelValue': (val?: string[]) => {
+                if (!val?.includes('view')) {
+                  val?.unshift('view');
+                }
+                formValue.value = val || [];
+              },
+            }
+          )
+        ),
+      {
+        title: '修改',
+        titleAlign: 'center',
+        onBeforeOk: (done: any) =>
+          update(record.id, { permission: formValue.value })
+            .then(() => {
+              Message.success('更新成功');
+              tableRef.value?.onFetch();
+              done(true);
+            })
+            .catch(() => done(false)),
+      }
+    );
+  };
+
+  const onDelete = (record: TableData) => {
+    createModalVNode(`确认移除此用户在歌曲《${record.activity_name}》的外部管理员身份？`, {
+      title: '删除操作',
+      onBeforeOk: (done: any) =>
+        destroy(record.id)
+          .then(() => {
+            Message.success('删除成功');
+            tableRef.value?.onFetch();
+            done(true);
+          })
+          .catch(() => done(false)),
+    });
+  };
+
+  const routeName = useRoute().name as string;
+  const checkPermission = (permission: string | string[]): boolean => {
+    permission = isArray(permission) ? permission.map((item) => `${routeName}-${item}`) : `${routeName}-${permission}`;
+    return usePermission().checkPermission(permission);
+  };
+  const hasPermission = computed(() => checkPermission(['manage-activity-edit', 'manage-activity-delete']));
+</script>
+
+<template>
+  <PageView>
+    <FilterSearch :loading="loading" :model="filter" @search="onSearch" @reset="onReset">
+      <FilterSearchItem label="厂牌名称" filed="projectName">
+        <Input v-model="filter.projectName" allow-clear placeholder="请输入" />
+      </FilterSearchItem>
+      <FilterSearchItem label="歌曲名称" filed="projectName">
+        <Input v-model="filter.songName" allow-clear placeholder="请输入" />
+      </FilterSearchItem>
+      <FilterSearchItem label="状态" filed="projectName">
+        <Select v-model="filter.activityStatus" :options="statusOption" allow-clear placeholder="请选择" />
+      </FilterSearchItem>
+      <FilterSearchItem label="外部权限" filed="projectName">
+        <Select v-model="filter.permission" :options="permissionOption" allow-clear placeholder="请选择" />
+      </FilterSearchItem>
+    </FilterSearch>
+    <FilterTable ref="tableRef" :loading="loading" :on-query="onQuery">
+      <TableColumn title="厂牌名称" data-index="project.name" :width="160" :ellipsis="true" :tooltip="true" />
+      <TableColumn title="歌曲名称" data-index="activity_name" :width="160" :ellipsis="true" :tooltip="true" />
+      <NumberTableColumn title="试听人数" data-index="view_count" :width="100" :dark-value="0" />
+      <NumberTableColumn title="收藏人数" data-index="like_count" :width="100" :dark-value="0" />
+      <NumberTableColumn title="提交人数" data-index="submit_work_count" :width="100" :dark-value="0" />
+      <TableColumn title="上架时间" data-index="activity_publish_at" :width="170" />
+      <TableColumn title="外部权限" data-index="permission" :width="200" :ellipsis="true" :tooltip="true">
+        <template #cell="{ record }"> {{ formatPermission(record.permission) }}</template>
+      </TableColumn>
+      <EnumTableColumn title="状态" data-index="activity_status" :option="statusOption" :width="120" />
+      <SpaceTableColumn v-if="hasPermission" :width="120" data-index="operations" title="操作" :tooltip="false" :ellipsis="false">
+        <template #default="{ record }">
+          <Link v-if="checkPermission('manage-activity-edit')" :hoverable="false" @click="onUpdate(record)">修改</Link>
+          <Link v-if="checkPermission('manage-activity-delete')" :hoverable="false" @click="onDelete(record)">取消管理</Link>
+        </template>
+      </SpaceTableColumn>
+    </FilterTable>
+  </PageView>
+</template>
+
+<style scoped lang="less"></style>

+<script setup lang="ts">
+  import { onMounted, ref } from 'vue';
+  import useLoading from '@/hooks/loading';
+  import { AnyObject } from '@/types/global';
+  import useProjectApi from '@/http/project';
+  import NumberTableColumn from '@/components/filter/number-table-column.vue';
+  import EnumTableColumn from '@/components/filter/enum-table-column.vue';
+  import UserTableColumn from '@/components/filter/user-table-column.vue';
+
+  const props = defineProps<{ userKey: number }>();
+
+  const tableRef = ref();
+  const { loading, setLoading } = useLoading(false);
+  const filter = ref({ name: '', is_promote: '', tag_name: '', status: '' });
+
+  const { statusOption } = useProjectApi;
+
+  const total = ref(0);
+
+  const onQuery = async (params?: AnyObject) => {
+    setLoading(true);
+    useProjectApi.get({ manager: props.userKey, pageSize: 1 }).then(({ meta }) => (total.value = meta.total));
+
+    return useProjectApi
+      .get({
+        manager: props.userKey,
+        ...filter.value,
+        ...params,
+        setWithCount: ['activities', 'activity_up', 'activity_match', 'activity_down', 'activity_send', 'manage', 'member'],
+        sortBy: 'id',
+        sortType: 'desc',
+      })
+      .finally(() => setLoading(false));
+  };
+
+  const onSearch = () => tableRef.value?.onPageChange(1);
+
+  const onReset = () => {
+    filter.value = { name: '', is_promote: '', tag_name: '', status: '' };
+    onSearch();
+  };
+
+  onMounted(() => onReset());
+
+  defineExpose({ total });
+</script>
+
+<template>
+  <a-card :bordered="false">
+    <filter-search :model="filter" :loading="loading" inline @search="onSearch" @reset="onReset">
+      <filter-search-item label="厂牌名称" filed="name">
+        <a-input v-model="filter.name" allow-clear placeholder="请输入" />
+      </filter-search-item>
+      <filter-search-item label="状态">
+        <a-select v-model="filter.status" :options="statusOption" allow-clear placeholder="请选择" />
+      </filter-search-item>
+    </filter-search>
+    <filter-table ref="tableRef" :loading="loading" :on-query="onQuery">
+      <user-table-column data-index="id" nick-index="name" avatar-index="cover" title="厂牌名称" show-avatar :width="200" />
+      <filter-table-column data-index="intro" title="简介" :width="200" />
+      <number-table-column data-index="activities_count" title="试唱歌曲总数" :width="100" :dark-value="0" />
+      <number-table-column data-index="activity_up_count" title="试唱进行中" :width="100" :dark-value="0" />
+      <number-table-column data-index="activity_match_count" title="试唱已匹配" :width="100" :dark-value="0" />
+      <number-table-column data-index="activity_down_count" title="试唱已下架" :width="100" :dark-value="0" />
+      <number-table-column data-index="activity_send_count" title="歌曲已发行" :width="100" :dark-value="0" />
+      <number-table-column data-index="manage_count" title="管理员人数" :width="100" :dark-value="0" />
+      <enum-table-column data-index="status" title="状态" :width="70" :option="statusOption" :dark-value="0" />
+    </filter-table>
+  </a-card>
+</template>
+
+<style scoped lang="less"></style>

+<script setup lang="ts">
+  import { ref } from 'vue';
+  import { Form, FormItem, InputPassword } from '@arco-design/web-vue';
+  import { FormInstance } from '@arco-design/web-vue/es/form';
+
+  type formValueProp = {
+    password: string;
+    password_confirmation: string;
+  };
+
+  const props = defineProps<{ onRequest: (data: formValueProp) => Promise<void> }>();
+
+  const formRef = ref<FormInstance>();
+  const formValue = ref({ password: '', password_confirmation: '' });
+  const rules = {
+    password: [
+      { required: true, message: '请输入新密码' },
+      { minLength: 6, message: '新密码不能低于6位' },
+      { maxLength: 20, message: '新的密码不能超过20位' },
+    ],
+    password_confirmation: [
+      { required: true, message: '请输入确认密码' },
+      { minLength: 6, message: '新密码不能低于6位' },
+      { maxLength: 20, message: '新的密码不能超过20位' },
+      {
+        validator: (value: string | undefined, cb: (error?: string) => void) => {
+          return new Promise((resolve) => {
+            if (value !== formValue.value.password) {
+              cb('确认密码与新密码不一致');
+            }
+            resolve(true);
+          });
+        },
+      },
+    ],
+  };
+
+  const onSubmit = async (): Promise<void> => {
+    const error = await formRef.value?.validate();
+
+    if (error) {
+      return Promise.reject(error);
+    }
+
+    return props.onRequest(formValue.value);
+  };
+
+  defineExpose({ onSubmit });
+</script>
+
+<template>
+  <Form ref="formRef" :model="formValue" :rules="rules" auto-label-width>
+    <FormItem field="password" label="新密码">
+      <InputPassword v-model="formValue.password" :max-length="20" />
+    </FormItem>
+    <FormItem field="password_confirmation" label="确认密码" row-class="mb-0">
+      <InputPassword v-model="formValue.password_confirmation" :max-length="20" />
+    </FormItem>
+  </Form>
+</template>
+
+<style scoped lang="less"></style>

+<script setup lang="ts">
+  import { onMounted, ref } from 'vue';
+  import useLoading from '@/hooks/loading';
+  import useActivityApi from '@/http/activity';
+  import { AnyObject } from '@/types/global';
+  import UserTableColumn from '@/components/filter/user-table-column.vue';
+  import NumberTableColumn from '@/components/filter/number-table-column.vue';
+  import { TableData } from '@arco-design/web-vue';
+  import { useRouter } from 'vue-router';
+  import ActivityTableColumn from '@/components/filter/activity-table-column.vue';
+  import DateTableColumn from '@/components/filter/date-table-column.vue';
+  import EnumTableColumn from '@/components/filter/enum-table-column.vue';
+
+  const router = useRouter();
+  const props = defineProps<{ userKey: number }>();
+
+  const tableRef = ref();
+  const { loading, setLoading } = useLoading(false);
+  const filter = ref({ song_name: '', project_name: '', tag_name: '', status: '', createBetween: [] });
+
+  const total = ref(0);
+
+  const { statusOption } = useActivityApi;
+
+  const onQuery = async (params?: AnyObject) => {
+    setLoading(true);
+    useActivityApi.get({ user_id: props.userKey, pageSize: 1 }).then(({ meta }) => (total.value = meta.total));
+
+    return useActivityApi
+      .get({
+        user_id: props.userKey,
+        ...filter.value,
+        ...params,
+        setColumn: ['id', 'cover', 'song_name', 'user_id', 'project_id', 'sub_title', 'status', 'created_at'],
+        setWith: ['project:id,name', 'user:id,real_name,nick_name,identity', 'tags:id,name', 'outSideManages:id,user_id,activity_id'],
+        setWithCount: ['viewUsers as view_count', 'collectionUsers as like_count', 'submitUsers as submit_work_count'],
+        setSort: ['-id'],
+      })
+      .finally(() => setLoading(false));
+  };
+
+  const onSearch = () => tableRef.value?.onPageChange(1);
+
+  const onRowClick = (record: TableData) => router.push({ name: 'audition-activity-show', params: { id: record.id } });
+
+  const onReset = () => {
+    filter.value = { song_name: '', project_name: '', tag_name: '', status: '', createBetween: [] };
+    onSearch();
+  };
+
+  onMounted(() => onReset());
+
+  defineExpose({ total });
+</script>
+
+<template>
+  <a-card :bordered="false">
+    <filter-search :model="filter" :loading="loading" @search="onSearch" @reset="onReset">
+      <filter-search-item label="歌曲名称" filed="song_name">
+        <a-input v-model="filter.song_name" allow-clear placeholder="请输入" />
+      </filter-search-item>
+      <filter-search-item label="厂牌名称" filed="project_name">
+        <a-input v-model="filter.project_name" allow-clear placeholder="请输入" />
+      </filter-search-item>
+      <filter-search-item label="标签名称" filed="tag_name">
+        <a-input v-model="filter.tag_name" allow-clear placeholder="请输入" />
+      </filter-search-item>
+      <filter-search-item label="状态" filed="status">
+        <a-select v-model="filter.status" :options="statusOption" allow-clear placeholder="请选择" />
+      </filter-search-item>
+    </filter-search>
+    <filter-table ref="tableRef" :loading="loading" :on-query="onQuery" hover-type="pointer" @row-click="onRowClick">
+      <activity-table-column data-index="id" title="试唱歌曲" />
+      <number-table-column :width="120" data-index="view_count" title="试听人数" />
+      <number-table-column :width="120" data-index="like_count" title="收藏人数" />
+      <number-table-column :width="120" data-index="submit_work_count" title="提交人数" />
+      <user-table-column :width="140" data-index="user_id" user="user" title="创建人" />
+      <date-table-column :width="110" data-index="created_at" title="创建时间" />
+      <enum-table-column :width="110" data-index="status" title="状态" :option="statusOption" />
+    </filter-table>
+  </a-card>
+</template>
+
+<style scoped lang="less"></style>

+<script setup lang="ts">
+  import { onMounted, ref } from 'vue';
+  import useLoading from '@/hooks/loading';
+  import useActivityApi from '@/http/activity';
+  import { AnyObject } from '@/types/global';
+  import useUserApi from '@/http/user';
+  import { TableData } from '@arco-design/web-vue';
+  import { useRouter } from 'vue-router';
+  import DateTableColumn from '@/components/filter/date-table-column.vue';
+  import EnumTableColumn from '@/components/filter/enum-table-column.vue';
+  import ActivityTableColumn from '@/components/filter/activity-table-column.vue';
+
+  const router = useRouter();
+  const props = defineProps<{ userKey: number }>();
+
+  const tableRef = ref();
+  const { loading, setLoading } = useLoading(false);
+  const filter = ref({ activity_name: '', project_name: '', tag_name: '', use_sing_type: '', use_sing_status: '', activity_status: '' });
+
+  const total = ref(0);
+
+  const { statusOption } = useActivityApi;
+  const { workSingTypeOption, workSingStatusOption } = useActivityApi;
+
+  const onQuery = async (params?: AnyObject) => {
+    setLoading(true);
+    useUserApi.submitSongs(props.userKey, { pageSize: 1 }).then(({ meta }) => (total.value = meta.total));
+
+    return useUserApi
+      .submitSongs(props.userKey, { ...filter.value, ...params, sortBy: 'id', sortType: 'desc' })
+      .finally(() => setLoading(false));
+  };
+
+  const onSearch = () => tableRef.value?.onPageChange(1);
+
+  const onReset = () => {
+    filter.value = { activity_name: '', project_name: '', tag_name: '', use_sing_type: '', use_sing_status: '', activity_status: '' };
+    onSearch();
+  };
+
+  const onRowClick = (record: TableData) => router.push({ name: 'audition-activity-show', params: { id: record.activity_id } });
+
+  onMounted(() => onReset());
+
+  defineExpose({ total });
+</script>
+
+<template>
+  <a-card :bordered="false">
+    <filter-search :model="filter" :loading="loading" @search="onSearch" @reset="onReset">
+      <filter-search-item label="歌曲名称" filed="activity_name">
+        <a-input v-model="filter.activity_name" allow-clear placeholder="请输入" />
+      </filter-search-item>
+      <filter-search-item label="厂牌名称" filed="project_name">
+        <a-input v-model="filter.project_name" allow-clear placeholder="请输入" />
+      </filter-search-item>
+      <filter-search-item label="标签名称" filed="tag_name">
+        <a-input v-model="filter.tag_name" allow-clear placeholder="请输入" />
+      </filter-search-item>
+      <filter-search-item label="试唱方式" filed="status">
+        <a-select v-model="filter.use_sing_type" :options="workSingTypeOption" allow-clear placeholder="请选择" />
+      </filter-search-item>
+      <filter-search-item label="试唱结果" filed="status">
+        <a-select v-model="filter.use_sing_status" :options="workSingStatusOption" allow-clear placeholder="请选择" />
+      </filter-search-item>
+      <filter-search-item label="试唱状态" filed="status">
+        <a-select v-model="filter.activity_status" :options="statusOption" allow-clear placeholder="请选择" />
+      </filter-search-item>
+    </filter-search>
+    <filter-table ref="tableRef" :loading="loading" :on-query="onQuery" hover-type="pointer" @row-click="onRowClick">
+      <activity-table-column
+        data-index="id"
+        title="试唱歌曲"
+        name-index="activity_name"
+        sub-index="activity_title"
+        cover-index="activity_cover"
+      />
+      <filter-table-column :width="100" data-index="mode" title="试唱方式">
+        <template #default="{ record }">
+          <template v-if="record.mode === 1">自主上传</template>
+          <template v-else>{{ record.sing_type === 'Full' ? '唱整首' : '唱片段' }}</template>
+        </template>
+      </filter-table-column>
+      <date-table-column :width="110" data-index="submit_at" title="提交时间" />
+      <filter-table-column :width="120" data-index="status" title="试唱结果">
+        <template #default="{ record }">
+          <span v-if="record.status === 1">已确认</span>
+          <span v-else-if="record.status === 2">不合适</span>
+          <span v-else-if="record.status === 0 && [3, 5].indexOf(record.activity_status) !== -1">未采纳</span>
+          <span v-else-if="record.status === 0 && record.activity_status === 1">待采纳</span>
+          <span v-else>其他</span>
+        </template>
+      </filter-table-column>
+      <filter-table-column :width="320" data-index="demo_url" title="试唱音频">
+        <template #default="{ record }">
+          <audio-player :url="record.demo_url" />
+        </template>
+      </filter-table-column>
+      <enum-table-column :width="110" data-index="status" title="试唱状态" :option="useActivityApi.statusOption" />
+    </filter-table>
+  </a-card>
+</template>
+
+<style scoped lang="less"></style>

+<script setup lang="ts">
+  import { Form, FormItem, Input, InputNumber, Select, Alert, SelectOptionData } from '@arco-design/web-vue';
+  import ProjectSection from '@/components/project-select/index.vue';
+  import { computed, onMounted, ref, watch } from 'vue';
+  import useUserApi from '@/http/user';
+  import useTagApi from '@/http/star-tag';
+  import { FormInstance } from '@arco-design/web-vue/es/form';
+  import { User } from '@/utils/model';
+  import useRoleApi from '@/http/role';
+  import { SystemRole } from '@/types/system-role';
+  import useConfigApi from '@/http/config';
+  import { Option } from '@/types/global';
+
+  const { scopeOption } = useUserApi;
+
+  type FormValueProp = {
+    nick_name: string;
+    real_name: string;
+    email: string;
+    lang: string;
+    area_code: string;
+    phone: string;
+    scope: number;
+    demo_type: number;
+    user_tag_id: number;
+    authIds?: number[];
+    roleIds?: number[];
+    projectIds?: number[];
+    business_singer_limit: number;
+  };
+
+  const props = defineProps<{ row: User; authTagOptions: SelectOptionData[]; onRequest: (data: FormValueProp) => Promise<User> }>();
+
+  const formRef = ref<FormInstance>();
+
+  const formValue = ref<FormValueProp>({
+    nick_name: props.row.nick_name,
+    real_name: props.row.real_name,
+    email: props.row.email,
+    area_code: props.row.area_code || '86',
+    phone: props.row.phone,
+    scope: props.row.scope,
+    demo_type: props.row.demo_type,
+    user_tag_id: props.row.user_tag_id,
+    lang: props.row.lang,
+    business_singer_limit: props.row.business_singer_limit || 0,
+    authIds: props.row.auth_tags?.map((item) => item.id) || [],
+    roleIds: props.row.roles?.map((item) => item.id) || [],
+    projectIds: props.row.projects?.map((item) => item.id) || [],
+  });
+
+  const formRules = computed(() => {
+    return {
+      nick_name: [{ required: true, message: '请输入用户艺名' }],
+      real_name: [{ required: true, message: '请输入用户真名' }],
+      phone: [
+        { required: true, message: '请输入用户手机号码' },
+        { validator: (value: any, cb: (error?: string) => void) => !formValue.value.area_code && cb('请输入用户手机国际区号') },
+      ],
+      email: [{ required: true, message: '请输入用户邮箱' }],
+      scope: [{ required: true, message: '请选择权限' }],
+      demo_type: [{ required: true, message: '请选择个人Demo权限' }],
+      user_tag_id: [{ required: true, message: '请选择标签' }],
+      business_singer_limit: [{ required: true, message: '请输入团队歌手数' }],
+      projectIds: [{ required: formValue.value.scope === 2, message: '请选择管理厂牌' }],
+      roleIds: [{ required: formValue.value.scope === 1, message: '请选择角色' }],
+    };
+  });
+
+  const roleOption = ref<SystemRole[]>([]);
+  const langOption = ref<Option[]>([]);
+  const demoScopeOption = ref<Option[]>([
+    { label: '跟随认证标签权限', value: 1, disabled: false },
+    { label: '关闭', value: 0, disabled: false },
+  ]);
+
+  const userTagOption = ref<Option[]>([]);
+
+  const allAuthDemoTags = ref<string[]>([]);
+
+  const activityRecommendOption = ref<Option[]>([]);
+
+  const onScopeChange = () => {
+    formValue.value.roleIds = [];
+    formValue.value.projectIds = [];
+  };
+
+  const onSubmit = async (): Promise<User> => {
+    if (await formRef.value?.validate()) {
+      return Promise.reject();
+    }
+    return props.onRequest(formValue.value);
+  };
+
+  const setDemoScopeOptionStatus = (setType?: boolean) => {
+    let has = false;
+    if (formValue.value) {
+      const { authIds } = formValue.value;
+      if (authIds) {
+        authIds.forEach((item) => {
+          allAuthDemoTags.value.forEach((allItem) => {
+            if (item === Number(allItem)) {
+              has = true;
+            }
+          });
+        });
+      }
+    }
+    if (has) {
+      demoScopeOption.value[1].disabled = false;
+    } else {
+      if (![2, 3].includes(props.row.identity)) {
+        demoScopeOption.value[1].disabled = true;
+      }
+
+      if (setType) {
+        formValue.value.demo_type = 1;
+      }
+    }
+  };
+
+  const onAuthTagOptionsChange = () => {
+    setDemoScopeOptionStatus(true);
+  };
+
+  watch(allAuthDemoTags, () => {
+    setDemoScopeOptionStatus();
+  });
+
+  watch(
+    formValue.value,
+    () => {
+      setDemoScopeOptionStatus();
+    },
+    {
+      immediate: true,
+    }
+  );
+
+  defineExpose({ onSubmit });
+
+  onMounted(() => {
+    useRoleApi.get({ guard: 'Admin', fetchType: 'all' }).then(({ data }) => {
+      roleOption.value = data;
+    });
+
+    useConfigApi
+      .getOption({ parentKey: '01HMFTN51ZEVCGSSKRF6C9EC3Y', setColumn: ['identifier', 'name'], setSort: ['-weight'] })
+      .then((data) => {
+        activityRecommendOption.value = data;
+      });
+
+    useConfigApi.getOption({ parentKey: 'activity_lang', setColumn: ['identifier', 'name'], setSort: ['-weight'] }).then((data) => {
+      langOption.value = data;
+    });
+
+    useConfigApi.getOne({ identifier: 'CtGly-jsLjAu5yJvLrN7L' }).then((data: any) => {
+      allAuthDemoTags.value = data.content.split(',');
+    });
+
+    useTagApi
+      .get({
+        sortBy: 'id',
+        sortType: 'desc',
+        page: 1,
+        pageSize: 9999,
+      })
+      .then((res) => {
+        const arr = [
+          {
+            label: '无',
+            value: 0,
+            disabled: false,
+          },
+        ];
+        const { data } = res;
+
+        data.forEach((item) => {
+          arr.push({
+            label: item.name,
+            value: item.id,
+            disabled: item.status !== 1,
+          });
+        });
+        userTagOption.value = arr;
+      });
+  });
+</script>
+
+<template>
+  <Form ref="formRef" :model="formValue" :rules="formRules" auto-label-width>
+    <FormItem label="用户艺名" field="nick_name" show-colon>
+      <Input v-model="formValue.nick_name" :max-length="99" show-word-limit />
+    </FormItem>
+    <FormItem label="用户真名" field="real_name" show-colon>
+      <Input v-model="formValue.real_name" :max-length="99" show-word-limit />
+    </FormItem>
+    <FormItem label="邮箱" field="email" show-colon>
+      <Input v-model="formValue.email" :max-length="99" show-word-limit />
+    </FormItem>
+    <FormItem label="手机号" field="phone" show-colon>
+      <Input v-model="formValue.area_code" style="width: 20%" :max-length="6" @blur="() => formRef?.validateField('phone')" />
+      <div style="width: 5%; text-align: center">-</div>
+      <Input v-model="formValue.phone" :max-length="16" show-word-limit @blur="() => formRef?.validateField('phone')" />
+    </FormItem>
+    <FormItem label="语种" field="lang" show-colon>
+      <Select v-model="formValue.lang" :options="langOption" :fallback-option="false" placeholder="请选择" />
+    </FormItem>
+    <FormItem label="音乐认证" field="authIds" show-colon>
+      <Select
+        v-model="formValue.authIds"
+        placeholder="请选择"
+        :options="authTagOptions"
+        multiple
+        allow-clear
+        allow-search
+        @change="onAuthTagOptionsChange"
+      />
+    </FormItem>
+    <FormItem label="团队歌手" field="business_singer_limit" show-colon>
+      <InputNumber v-model="formValue.business_singer_limit" :min="2" :max="1000" />
+    </FormItem>
+    <FormItem label="权限" field="scope" show-colon>
+      <Select v-model="formValue.scope" placeholder="请选择" :options="scopeOption" :fallback-option="false" @change="onScopeChange" />
+    </FormItem>
+    <FormItem label="个人Demo权限" field="demo_type" show-colon>
+      <!-- <span v-if="[2, 3].includes(user.identity)"> 经纪人</span> -->
+      <Select v-model="formValue.demo_type" placeholder="请选择" :options="demoScopeOption" :fallback-option="false" />
+    </FormItem>
+    <FormItem label="明星标签" field="user_tag_id" show-colon>
+      <Select v-model="formValue.user_tag_id" placeholder="请选择" :options="userTagOption" :fallback-option="false" />
+    </FormItem>
+    <FormItem v-show="formValue.scope === 2" label="管理厂牌" field="projectIds" show-colon>
+      <ProjectSection v-model="formValue.projectIds" :multiple="true" :max-tag-count="5" placeholder="请选择" allow-search />
+    </FormItem>
+    <FormItem v-show="formValue.scope === 1" field="roleIds" label="角色" show-colon row-class="mb-0">
+      <Select
+        v-model="formValue.roleIds"
+        placeholder="请选择"
+        :field-names="{ value: 'id', label: 'name' }"
+        :options="roleOption"
+        :multiple="true"
+        :fallback-option="false"
+        :allow-search="true"
+      />
+    </FormItem>
+    <Alert v-show="formValue.scope !== 0 && formValue.scope !== row.scope" type="warning">
+      权限变更将初始化用户登录密码，初始值为该用户手机号
+    </Alert>
+  </Form>
+</template>
+
+<style scoped lang="less"></style>

+<script setup lang="ts">
+  import { Image, List, ListItem, ListItemMeta, TypographyParagraph } from '@arco-design/web-vue';
+  import AudioPlayer from '@/components/audio-player/index.vue';
+  import { onMounted, ref } from 'vue';
+  import usePagination from '@/hooks/pagination';
+  import { UserAudioDynamics } from '@/utils/model';
+  import useLoading from '@/hooks/loading';
+  import useUserApi from '@/http/user';
+
+  const props = defineProps<{ userKey: number }>();
+
+  const { loading, setLoading } = useLoading(false);
+  const { pagination, setPage, setTotal } = usePagination({ pageSize: 5, size: 'mini', showPageSize: false });
+  const source = ref<UserAudioDynamics[]>([]);
+
+  const onQuery = () => {
+    setLoading(true);
+    useUserApi
+      .dynamics(props.userKey, {
+        type: 'audio',
+        page: pagination.value.current,
+        pageSize: pagination.value.pageSize,
+        sortBy: 'is_top',
+        sortType: 'desc',
+      })
+      .then(({ data, meta }) => {
+        source.value = data as UserAudioDynamics[];
+        setPage(meta.current);
+        setTotal(meta.total);
+      })
+      .finally(() => setLoading(false));
+  };
+
+  onMounted(() => onQuery());
+</script>
+
+<template>
+  <List
+    :loading="loading"
+    :data="source"
+    :bordered="false"
+    :scrollbar="true"
+    :max-height="460"
+    :pagination-props="pagination"
+    @page-change="(page:number) => setPage(page) && onQuery()"
+  >
+    <template #item="{ item }">
+      <ListItem :key="item.id" style="padding: 4px 16px">
+        <ListItemMeta>
+          <template #avatar>
+            <Image :src="item.properties.cover.url" :width="60" :height="60" fit="fill" />
+          </template>
+          <template #title>
+            <TypographyParagraph :ellipsis="{ rows: 1, showTooltip: true }" style="margin-bottom: 10px; margin-top: 10px">
+              {{ item.intro }}
+            </TypographyParagraph>
+          </template>
+          <template #description>
+            <AudioPlayer :url="item.properties.url" style="width: 410px; height: 20px" />
+          </template>
+        </ListItemMeta>
+      </ListItem>
+    </template>
+  </List>
+</template>
+
+<style scoped lang="less">
+  :deep(.arco-list-pagination) {
+    margin-top: 10px !important;
+    margin-bottom: 10px !important;
+  }
+</style>

+<script setup lang="ts">
+  import { ImagePreviewGroup, Grid, GridItem, Image, Pagination } from '@arco-design/web-vue';
+  import usePagination from '@/hooks/pagination';
+  import { onMounted, ref } from 'vue';
+  import useUserApi from '@/http/user';
+  import { UserImageDynamics } from '@/utils/model';
+
+  const props = defineProps<{ userKey: number }>();
+
+  const { pagination, setPage, setTotal } = usePagination({ pageSize: 12 });
+  const source = ref<UserImageDynamics[]>([]);
+
+  const onQuery = () =>
+    useUserApi
+      .dynamics(props.userKey, {
+        type: 'image',
+        page: pagination.value.current,
+        pageSize: pagination.value.pageSize,
+        sortBy: 'is_top',
+        sortType: 'desc',
+      })
+      .then(({ data, meta }) => {
+        source.value = data as UserImageDynamics[];
+        setPage(meta.current);
+        setTotal(meta.total);
+      });
+
+  onMounted(() => onQuery());
+</script>
+
+<template>
+  <ImagePreviewGroup>
+    <Grid :cols="6" :col-gap="12" :row-gap="16">
+      <GridItem v-for="item in source" :key="item.id">
+        <Image :src="item.properties.url" :width="120" :height="120" fit="scale-down" :show-loader="true" />
+      </GridItem>
+    </Grid>
+  </ImagePreviewGroup>
+  <Pagination
+    size="mini"
+    style="justify-content: flex-end; margin-top: 10px"
+    :current="pagination.current"
+    :total="pagination.total"
+    :page-size="pagination.pageSize"
+    :hide-on-single-page="true"
+    @change="(current:number) => setPage(current) && onQuery()"
+  />
+</template>
+
+<style scoped lang="less"></style>

+<script setup lang="ts">
+  import { ImagePreviewGroup, Grid, GridItem, Image, Pagination } from '@arco-design/web-vue';
+  import { h, onMounted, ref } from 'vue';
+  import usePagination from '@/hooks/pagination';
+  import { UserAudioDynamics } from '@/utils/model';
+  import { createModalVNode } from '@/utils/createVNode';
+
+  import vue3videoPlay from 'vue3-video-play';
+  import 'vue3-video-play/dist/style.css';
+  import useUserApi from '@/http/user';
+
+  const props = defineProps<{ userKey: number }>();
+
+  const { pagination, setPage, setTotal } = usePagination({ pageSize: 12 });
+  const source = ref<UserAudioDynamics[]>([]);
+
+  const onQuery = () =>
+    useUserApi
+      .dynamics(props.userKey, {
+        type: 'video',
+        page: pagination.value.current,
+        pageSize: pagination.value.pageSize,
+        sortBy: 'is_top',
+        sortType: 'desc',
+      })
+      .then(({ data, meta }) => {
+        source.value = data as UserAudioDynamics[];
+        setPage(meta.current);
+        setTotal(meta.total);
+      });
+
+  onMounted(() => onQuery());
+
+  const onClick = (item: any) =>
+    createModalVNode(
+      () => h(vue3videoPlay, { src: item.properties.url, controlBtns: ['volume', 'speedRate', 'pip', 'pageFullScreen', 'fullScreen'] }),
+      {
+        width: 'auto',
+        modalStyle: { padding: '0 !important' },
+        simple: true,
+        footer: false,
+        maskClosable: true,
+        escToClose: true,
+      }
+    );
+</script>
+
+<template>
+  <ImagePreviewGroup>
+    <Grid :cols="6" :col-gap="12" :row-gap="16">
+      <GridItem v-for="item in source" :key="item.id">
+        <Image
+          :src="item.properties.cover.url"
+          :width="120"
+          :height="70"
+          fit="scale-down"
+          :show-loader="true"
+          :preview="false"
+          @click="onClick(item)"
+        />
+      </GridItem>
+    </Grid>
+  </ImagePreviewGroup>
+  <Pagination
+    size="mini"
+    style="justify-content: flex-end; margin-top: 10px"
+    :current="pagination.current"
+    :total="pagination.total"
+    :page-size="pagination.pageSize"
+    :hide-on-single-page="true"
+    @change="(current:number) => setPage(current) && onQuery()"
+  />
+</template>
+
+<style scoped lang="less"></style>

+<script setup lang="ts" name="user-show">
+  import { computed, onBeforeMount, ref, watch } from 'vue';
+  import useUserApi from '@/http/user';
+  import { onBeforeRouteLeave, useRoute } from 'vue-router';
+  import BasicCard from '@/views/user/info/components/basic-card.vue';
+  import ListenActivityTable from '@/views/user/info/components/listen-activity-table.vue';
+  import LikeActivityTable from '@/views/user/info/components/like-activity-table.vue';
+  import PublishActivityTable from '@/views/user/info/components/publish-activity-table.vue';
+  import SubmitActivityTable from '@/views/user/info/components/submit-activity-table.vue';
+  import ManageProjectTable from '@/views/user/info/components/manage-project-table.vue';
+  import ManageActivityTable from '@/views/user/info/components/manage-activity-table.vue';
+  import GroupMemberTable from '@/views/user/info/components/group-member-table.vue';
+  import DemoActivityTable from '@/views/audition/demo/index.vue';
+
+  import useLoading from '@/hooks/loading';
+  import { User } from '@/utils/model';
+  import { useRouteQuery } from '@vueuse/router';
+  import usePermission from '@/hooks/permission';
+  import { isArray } from '@/utils/is';
+  import useActivityApi from '@/http/activity';
+
+  const userId = Number(useRoute().params?.id);
+  const user = ref({ identity: 0, scope: 0 });
+  const routeName = useRoute()?.name as string;
+
+  const checkPermission = (permission: string | string[]): boolean => {
+    permission = isArray(permission) ? permission.map((item) => `${routeName}-${item}`) : `${routeName}-${permission}`;
+    return usePermission().checkPermission(permission);
+  };
+
+  const { loading, setLoading } = useLoading(true);
+
+  const tabKeys = computed((): string[] => {
+    const keys = ['listen-activity', 'like-activity', 'submit-activity', 'manage-activity', 'member', 'demo'];
+
+    if ([1, 2].includes(user.value.scope)) {
+      keys.push('publish-activity');
+    }
+    if ([2].includes(user.value.scope)) {
+      keys.push('project');
+    }
+    return keys.filter((item) => checkPermission(item));
+  });
+
+  const tabKey = useRouteQuery('tabKey', tabKeys.value[0] || '');
+
+  const listenRef = ref();
+  const likeRef = ref();
+  const submitRef = ref();
+  const activityRef = ref();
+  const groupMemberRef = ref();
+  const publishRef = ref();
+  const projectRef = ref();
+
+  const count = ref({ demo: 0 });
+
+  watch(
+    () => tabKeys.value,
+    () => (tabKeys.value.includes(tabKey.value) ? undefined : (tabKey.value = tabKeys.value[0] || ''))
+  );
+
+  onBeforeMount(() => {
+    useUserApi
+      .show(userId)
+      .then((data) => (user.value = data))
+      .finally(() => setLoading(false));
+  });
+
+  onBeforeRouteLeave((to, from) => {
+    if (from.meta.from === to.name) {
+      to.meta.reload = false;
+    }
+  });
+
+  const syncDemoCount = () =>
+    useActivityApi.get({ audit_status: 1, song_type: 2, user_id: userId, pageSize: 1 }).then(({ meta }) => {
+      count.value.demo = meta.total;
+    });
+</script>
+
+<template>
+  <page-view :loading="loading" has-bread>
+    <basic-card :user="user as User" />
+
+    <a-card v-if="tabKeys.length" :bordered="false" style="margin-top: 16px">
+      <a-tabs v-model:active-key="tabKey" type="rounded" :animation="true" size="small" :justify="true" :header-padding="false">
+        <a-tab-pane v-if="checkPermission('listen-activity')" key="listen-activity" :title="`试听歌曲(${listenRef?.total})`">
+          <listen-activity-table ref="listenRef" :user-key="userId" />
+        </a-tab-pane>
+        <a-tab-pane v-if="checkPermission('like-activity')" key="like-activity" :title="`收藏歌曲(${likeRef?.total})`">
+          <like-activity-table ref="likeRef" :user-key="userId" />
+        </a-tab-pane>
+        <a-tab-pane v-if="checkPermission('submit-activity')" key="submit-activity" :title="`试唱歌曲(${submitRef?.total})`">
+          <submit-activity-table ref="submitRef" :user-key="userId" />
+        </a-tab-pane>
+        <a-tab-pane v-if="checkPermission('manage-activity')" key="manage-activity" :title="`管理歌曲(${activityRef?.total})`">
+          <manage-activity-table ref="activityRef" :user-key="userId" />
+        </a-tab-pane>
+        <a-tab-pane v-if="checkPermission('member')" key="member" :title="`Ta的成员(${groupMemberRef?.total})`">
+          <group-member-table ref="groupMemberRef" :user-key="userId" />
+        </a-tab-pane>
+        <a-tab-pane
+          v-if="checkPermission('publish-activity') && tabKeys.includes('publish-activity')"
+          key="publish-activity"
+          :title="`发布歌曲(${publishRef?.total})`"
+        >
+          <publish-activity-table ref="publishRef" :user-key="userId" />
+        </a-tab-pane>
+        <a-tab-pane
+          v-if="checkPermission('project') && tabKeys.includes('project')"
+          key="project"
+          :title="`Ta的厂牌(${projectRef?.total})`"
+        >
+          <manage-project-table ref="projectRef" :user-key="userId" />
+        </a-tab-pane>
+        <a-tab-pane v-if="checkPermission('demo') && tabKeys.includes('demo')" key="demo" :title="`Ta的Demo(${count.demo})`">
+          <demo-activity-table
+            style="padding: 0"
+            :has-bread="false"
+            :init-filter="{ user_id: userId }"
+            :hide-search-item="['projectName', 'createdForm', 'userName', 'auditBetween']"
+            :query-hook="() => syncDemoCount()"
+          />
+        </a-tab-pane>
+      </a-tabs>
+    </a-card>
+  </page-view>
+</template>
+
+<style scoped lang="less"></style>

+<script setup lang="ts">
+  import { onActivated, ref } from 'vue';
+  import useLoading from '@/hooks/loading';
+  import { useRegisterApi } from '@/http/user';
+  import { AnyObject } from '@/types/global';
+
+  import EnumTableColumn from '@/components/filter/enum-table-column.vue';
+  import PhoneTableColumn from '@/components/filter/phone-table-column.vue';
+  import { TableData } from '@arco-design/web-vue';
+  import { useRoute, useRouter } from 'vue-router';
+  import UserTableColumn from '@/components/filter/user-table-column.vue';
+
+  const router = useRouter();
+
+  const tableRef = ref();
+  const filter = ref<AnyObject>({});
+  const { loading, setLoading } = useLoading(false);
+
+  const { officialStatusOption, statusOption, scopeOption, sexOption, get, getExport } = useRegisterApi;
+  const onQuery = async (params?: AnyObject) => {
+    setLoading(true);
+    return get({ ...filter.value, ...params, sortBy: 'id', sortType: 'desc' }).finally(() => setLoading(false));
+  };
+
+  const onExport = () => getExport('注册未认证', { ...filter.value, sortBy: 'id', sortType: 'desc' });
+
+  const onRowClick = (record: TableData) => router.push({ name: 'user-register-show', params: { id: record.id } });
+
+  const onSearch = () => tableRef.value?.onPageChange(1);
+
+  const onReset = () => {
+    filter.value = { nick_name: '', email_like: '', phone_like: '', official_status: '', status: '' };
+    onSearch();
+  };
+
+  onActivated(() => (useRoute().meta.reload ? onReset() : tableRef.value?.onFetch()));
+</script>
+
+<template>
+  <page-view has-card has-bread>
+    <filter-search :model="filter" :loading="loading" @search="onSearch" @reset="onReset">
+      <filter-search-item field="nick_name" label="用户艺名">
+        <a-input v-model="filter.nick_name" allow-clear placeholder="请输入" />
+      </filter-search-item>
+      <filter-search-item field="sex" label="性别">
+        <a-select v-model="filter.sex" allow-clear placeholder="请选择" :options="sexOption" />
+      </filter-search-item>
+      <filter-search-item field="email_like" label="用户邮箱">
+        <a-input v-model="filter.email_like" allow-clear placeholder="请输入" />
+      </filter-search-item>
+      <filter-search-item field="phone_like" label="手机号码">
+        <a-input v-model="filter.phone_like" allow-clear placeholder="请输入" />
+      </filter-search-item>
+      <filter-search-item field="name" label="关注服务号">
+        <a-select v-model="filter.official_status" :options="officialStatusOption" placeholder="请选择" allow-clear />
+      </filter-search-item>
+      <filter-search-item field="name" label="状态">
+        <a-select v-model="filter.status" :options="statusOption" placeholder="请选择" allow-clear />
+      </filter-search-item>
+      <filter-search-item field="scope" label="权限">
+        <a-select v-model="filter.scope" allow-clear placeholder="请选择" :options="scopeOption" />
+      </filter-search-item>
+      <template #button>
+        <export-button v-permission="['user-register-export']" :on-download="onExport" />
+      </template>
+    </filter-search>
+    <filter-table ref="tableRef" :loading="loading" :on-query="onQuery" hover-type="pointer" @row-click="onRowClick">
+      <user-table-column title="用户艺名" data-index="id" show-avatar :width="240" />
+      <enum-table-column title="性别" data-index="sex" :option="sexOption" :dark-value="0" :width="80" />
+      <filter-table-column title="用户邮箱" data-index="email" :width="200" />
+      <phone-table-column title="手机号码" data-index="phone" area-index="area_code" :width="160" />
+      <filter-table-column title="注册时间" data-index="created_at" :width="170" />
+      <enum-table-column title="权限" data-index="scope" :option="scopeOption" :dark-value="0" :width="120" />
+      <enum-table-column title="关注服务号" data-index="official_status" :option="officialStatusOption" :dark-value="0" :width="120" />
+      <enum-table-column title="状态" data-index="status" :option="statusOption" :width="80" />
+    </filter-table>
+  </page-view>
+</template>
+
+<style scoped lang="less"></style>

+<script setup lang="ts" name="user-singer">
+  import { onActivated, ref } from 'vue';
+  import { AnyObject } from '@/types/global';
+  import useLoading from '@/hooks/loading';
+  import PhoneTableColumn from '@/components/filter/phone-table-column.vue';
+  import EnumTableColumn from '@/components/filter/enum-table-column.vue';
+  import { TableData } from '@arco-design/web-vue';
+  import { useRoute, useRouter } from 'vue-router';
+  import { useSingerApi } from '@/http/user';
+  import UserTableColumn from '@/components/filter/user-table-column.vue';
+
+  const tableRef = ref();
+  const filter = ref<AnyObject>({});
+  const { loading, setLoading } = useLoading(false);
+
+  const { sexOption, scopeOption, statusOption, officialStatusOption, get, getExport } = useSingerApi;
+
+  const onQuery = async (params?: AnyObject) => {
+    setLoading(true);
+    return get({ ...filter.value, ...params }).finally(() => setLoading(false));
+  };
+  const onExport = () => getExport('音乐人', filter.value);
+
+  const onSearch = () => tableRef.value?.onPageChange(1);
+
+  const onSort = (column: string, type: string) => {
+    if (type) {
+      filter.value.sortBy = column;
+      filter.value.sortType = type;
+    } else {
+      filter.value.sortBy = 'id';
+      filter.value.sortType = 'desc';
+    }
+    tableRef.value?.onFetch();
+  };
+
+  const onReset = () => {
+    filter.value = {
+      nick_name: '',
+      sex: '',
+      email_like: '',
+      phone_like: '',
+      businessName: '',
+      scope: '',
+      official_status: '',
+      status: '',
+      sortBy: 'id',
+      sortType: 'desc',
+    };
+    tableRef.value?.resetSort();
+    onSearch();
+  };
+
+  const router = useRouter();
+
+  const onRowClick = (record: TableData) => router.push({ name: 'user-singer-show', params: { id: record.id } });
+
+  onActivated(() => (useRoute()?.meta?.reload ? onReset() : tableRef.value?.onFetch()));
+</script>
+
+<template>
+  <page-view has-card has-bread>
+    <filter-search :model="filter" :loading="loading" @search="onSearch" @reset="onReset">
+      <filter-search-item field="nick_name" label="用户艺名">
+        <a-input v-model="filter.nick_name" allow-clear placeholder="请输入" />
+      </filter-search-item>
+      <filter-search-item field="sex" label="性别">
+        <a-select v-model="filter.sex" allow-clear placeholder="请选择" :options="sexOption" />
+      </filter-search-item>
+      <filter-search-item field="email_like" label="用户邮箱">
+        <a-input v-model="filter.email_like" allow-clear placeholder="请输入" />
+      </filter-search-item>
+      <filter-search-item field="phone_like" label="手机号码">
+        <a-input v-model="filter.phone_like" allow-clear placeholder="请输入" />
+      </filter-search-item>
+      <filter-search-item field="businessName" label="队长">
+        <a-input v-model="filter.businessName" allow-clear placeholder="请输入" />
+      </filter-search-item>
+      <filter-search-item field="scope" label="权限">
+        <a-select v-model="filter.scope" allow-clear placeholder="请选择" :options="scopeOption" />
+      </filter-search-item>
+      <filter-search-item field="official_status" label="关注服务号">
+        <a-select v-model="filter.official_status" allow-clear placeholder="请选择" :options="officialStatusOption" />
+      </filter-search-item>
+      <filter-search-item field="status" label="状态">
+        <a-select v-model="filter.status" allow-clear placeholder="请选择" :options="statusOption" />
+      </filter-search-item>
+      <template #button>
+        <export-button v-permission="['user-singer-export']" :on-download="onExport" />
+      </template>
+    </filter-search>
+    <filter-table ref="tableRef" hover-type="pointer" :loading="loading" :on-query="onQuery" @row-click="onRowClick" @row-sort="onSort">
+      <user-table-column title="用户艺名" data-index="id" show-avatar :width="240" />
+      <enum-table-column title="性别" data-index="sex" :option="sexOption" :dark-value="0" :width="70" />
+      <filter-table-column title="用户邮箱" data-index="email" :width="170" />
+      <phone-table-column title="手机号码" data-index="phone" area-index="area_code" :width="160" />
+      <filter-table-column title="认证通过时间" data-index="audit_at" :width="170" has-sort />
+      <a-table-column :width="160" title="队长" data-index="business_id">
+        <template #cell="{ record }">
+          <user-link v-if="record.business" :user="record.business" />
+          <span v-else style="color: rgba(44, 44, 44, 0.5)">无</span>
+        </template>
+      </a-table-column>
+      <enum-table-column title="权限" data-index="scope" :option="scopeOption" :dark-value="0" :width="120" />
+      <enum-table-column title="关注服务号" data-index="official_status" :option="officialStatusOption" :dark-value="0" :width="120" />
+      <enum-table-column title="状态" data-index="status" :option="statusOption" :width="80" />
+    </filter-table>
+  </page-view>
+</template>
+
+<style scoped lang="less"></style>

+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ES2020",
+    "moduleResolution": "node",
+    "strict": true,
+    "jsx": "preserve",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "noImplicitAny": false,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "lib": [
+      "es2020",
+      "dom"
+    ],
+    "skipLibCheck": true,
+    "terserOptions": {
+      "compress": {
+        "drop_console": true,
+        "drop_debugger": true
+      }
+    }
+  },
+  "include": [
+    "src/**/*",
+    "src/**/*.vue"
+  ],
+  "exclude": [
+    "node_modules",
+    "next/core-web-vitals"
+  ]
+}