Skip to content

PaoPao / manageWeb

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 4c170cb1 4c170cb18f5205639366cb65b33ebf12650beb7d by 杨俊
Options

Init

0 parents
Expand all
Inline Side-by-side
Showing 161 changed files with 4437 additions and 0 deletions
/*.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',
withDefaults: 'readonly'
},
rules: {
'prettier/prettier': 1,
// 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,
'camelcase': '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,
'prefer-regex-literals': 0,
'import/no-extraneous-dependencies': 0,
},
};
node_modules
.DS_Store
dist
dist-ssr
*.local
/node_modules
/dist-ssr
.idea/*
yarn.lock
/.yarn
module.exports = {
tabWidth: 2,
semi: true,
printWidth: 140,
singleQuote: true,
quoteProps: 'consistent',
htmlWhitespaceSensitivity: 'strict',
};
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'],
},
],
},
};
nodeLinker: node-modules
module.exports = {
plugins: ['@vue/babel-plugin-jsx'],
};
module.exports = {
extends: ['@commitlint/config-conventional'],
};
*
!.gitignore
!vite.config.develop.ts
!vite.config.prod.ts
!vite.config.cdn.ts
import { resolve } from 'path';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
import svgLoader from 'vite-svg-loader';
import vueSetupExtend from 'vite-plugin-vue-setup-extend';
import VitePluginOss from 'vite-plugin-oss';
const config = {
VITE_OSS_ACCESS_KEY: 'LTAI5t7LPdTdw9bSY7JUJmyG',
VITE_OSS_ACCESS_SECRET: 'qBiMksMt7DakR5cLQc03LCcsdwhPH1',
VITE_OSS_BUCKET: 'hising',
VITE_OSS_REGION: 'oss-cn-hangzhou',
VITE_OSS_HOST: 'https://hising-cdn.hikoon.com',
VITE_OSS_ENDPOINT: 'https://hising.oss-cn-hangzhou.aliyuncs.com',
};
const ossPath = `vendor/manage/asset${new Date()
.toLocaleString('zh')
.slice(0, 20)
.replace(/[\s/:]/g, '')}`;
export default defineConfig({
mode: 'production',
base: config.VITE_OSS_HOST,
server: { https: true },
plugins: [
vue(),
vueJsx(),
vueSetupExtend(),
svgLoader({ svgoConfig: {} }),
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,
}),
],
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. you can remove it, if you don't need.
},
],
extensions: ['.ts', '.js'],
},
define: {
'process.env': {
VITE_ENV: 'production',
VITE_API_HOST: 'https://hising.hikoon.com',
VITE_SHOW_LOGIN_ACCOUNT: false,
...config,
},
},
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,
},
});
import { resolve } from 'path';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
import svgLoader from 'vite-svg-loader';
import vueSetupExtend from 'vite-plugin-vue-setup-extend';
export default defineConfig({
mode: 'production',
server: { https: true },
plugins: [vue(), vueJsx(), vueSetupExtend(), svgLoader({ svgoConfig: {} })],
// build:{
// rollupOptions: {
// output: {
// manualChunks: {
// echarts: ['echarts']
// }
// }
// }
// },
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. you can remove it, if you don't need.
},
],
extensions: ['.ts', '.js'],
},
define: {
'process.env': {
VITE_ENV: 'develop',
VITE_API_HOST: 'https://hi-sing-service-dev.hikoon.com',
VITE_SHOW_LOGIN_ACCOUNT: true,
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',
},
},
});
import { resolve } from 'path';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
import svgLoader from 'vite-svg-loader';
import vueSetupExtend from 'vite-plugin-vue-setup-extend';
export default defineConfig({
mode: 'production',
server: { https: true },
plugins: [vue(), vueJsx(), vueSetupExtend(), svgLoader({ svgoConfig: {} })],
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. you can remove it, if you don't need.
},
],
extensions: ['.ts', '.js'],
},
define: {
'process.env': {
VITE_ENV: 'production',
VITE_API_HOST: 'https://hising.hikoon.com',
VITE_SHOW_LOGIN_ACCOUNT: false,
VITE_OSS_ACCESS_KEY: 'LTAI4GKtcA6yTV6wnapivq7Y',
VITE_OSS_ACCESS_SECRET: 'QPEt0HPEuRe7wIk2wZNtKPF6L0xMmQ',
VITE_OSS_BUCKET: 'hisin',
VITE_OSS_REGION: 'oss-cn-hangzhou',
VITE_OSS_HOST: 'https://hi-sing-cdn.hikoon.com',
VITE_OSS_ENDPOINT: 'https://hisin.oss-cn-hangzhou.aliyuncs.com',
},
},
});
<!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"/>
<title>海星试唱</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
This diff could not be displayed because it is too large.
{
"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": "vite build --config ./config/vite.config.prod.ts",
"build:cdn": "vite build --config ./config/vite.config.cdn.ts",
"develop": "vite build --config ./config/vite.config.develop.ts",
"lint-staged": "npx lint-staged"
},
"lint-staged": {
"*.{js,ts,jsx,tsx}": [
"prettier --write",
"eslint --fix"
],
"*.vue": [
"stylelint --fix",
"prettier --write",
"eslint --fix"
],
"*.{less,css}": [
"stylelint --fix",
"prettier --write"
]
},
"dependencies": {
"@arco-design/web-vue": "^2.36.0",
"@types/file-saver": "^2.0.5",
"@types/mockjs": "^1.0.4",
"@vueuse/core": "^7.3.0",
"@vueuse/router": "^10.3.0",
"ali-oss": "^6.17.1",
"arco-design-pro-vue": "^2.2.3",
"axios": "^0.24.0",
"dayjs": "^1.11.2",
"echarts": "^5.3.3",
"file-saver": "^2.0.5",
"i": "^0.3.7",
"js-file-download": "^0.4.12",
"lodash": "^4.17.21",
"nanoid": "^3.3.4",
"npm": "^9.6.6",
"nprogress": "^0.2.0",
"pinia": "^2.0.9",
"query-string": "^7.0.1",
"rabbit-lyrics": "^2.1.1",
"vue": "^3.2.31",
"vue-echarts": "^6.2.3",
"vue-i18n": "^9.2.0-beta.17",
"vue-router": "4",
"vue3-video-play": "1.3.1-beta.6"
},
"devDependencies": {
"@arco-design/web-vue": "^2.36.0",
"@commitlint/cli": "^11.0.0",
"@commitlint/config-conventional": "^12.0.1",
"@types/ali-oss": "^6.16.3",
"@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",
"eslint": "^8.7.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",
"less": "^4.1.2",
"lint-staged": "^11.2.6",
"mockjs": "^1.1.0",
"prettier": "^2.2.1",
"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.5.5",
"vite": "^2.6.4",
"vite-plugin-eslint": "^1.3.0",
"vite-plugin-oss": "^1.2.13",
"vite-plugin-vue-setup-extend": "^0.4.0",
"vite-svg-loader": "^3.1.0",
"vue-tsc": "^0.30.5"
},
"volta": {
"node": "18.3.0",
"yarn": "1.22.19"
}
}
<template>
<a-config-provider size="small">
<router-view />
</a-config-provider>
</template>
<script lang="ts" setup></script>
// eslint-disable-next-line max-classes-per-file
import { AnyObject, QueryForParams, ServiceResponse } from '@/types/global';
import axios, { AxiosRequestConfig } from 'axios';
import { ActivityApply } from '@/types/activity-apply';
import FileSaver from 'file-saver';
import { Activity, ActivityViewUser } from '@/types/activity';
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 async 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 show(id: number, params?: QueryForParams): Promise<Activity> {
return axios.get(`/audition/activities/${id}`, { params }).then((res) => Promise.resolve(res.data));
}
static async changeStatus(id: number, data: AnyObject) {
return axios.put<Activity>(`/audition/activities/${id}/change-status`, data).then((res) => Promise.resolve(res.data));
}
static async update(id: number, data: AnyObject): Promise<Activity> {
return axios.put(`/audition/activities/${id}`, data).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 getManageUser(activityId: number, params: QueryForParams): Promise<any> {
return axios.get(`/audition/activities/${activityId}/managers`, { params });
}
static async createManage(data: AnyObject): Promise<any> {
return axios.post('/audition/activity-managers', data).then((res) => Promise.resolve(res.data));
}
static async updateManage(id: number, data: AnyObject): Promise<any> {
return axios.put(`/audition/activity-managers/${id}`, data).then((res) => Promise.resolve(res.data));
}
static async deleteManage(id: number): Promise<any> {
return axios.delete(`/audition/activity-managers/${id}`).then((res) => Promise.resolve(res.data));
}
static async getViewUser(activityId: number, params: QueryForParams): Promise<ServiceResponse<ActivityViewUser[]>> {
return axios.get(`/audition/activities/${activityId}/views`, { params });
}
static async getLikeUser(activityId: number, params: QueryForParams): Promise<ServiceResponse<ActivityViewUser[]>> {
return axios.get(`/audition/activities/${activityId}/likes`, { params });
}
}
export class useApply {
static auditStatusOption = [
{ label: '审核不通过', value: 2 },
{ label: '审核中', value: 0 },
];
static async get(params: QueryForParams): Promise<ServiceResponse<ActivityApply[]>> {
return axios.get('audition/applies', { params });
}
static async create(data: AnyObject) {
return axios.post('audition/applies', data).then((res) => Promise.resolve(res.data));
}
static async update(id: number, data: AnyObject) {
return axios.put(`audition/applies/${id}`, data).then((res) => Promise.resolve(res.data));
}
static async destroy(id: number) {
return axios.delete(`/audition/applies/${id}`);
}
}
export class useWorkApi {
static async get(params?: QueryForParams): Promise<ServiceResponse<ActivityWork[]>> {
return axios.get(`/audition/activity-works`, { 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-works', config).then(({ data }) => FileSaver.saveAs(data, `${fileName}.xlsx`));
}
static async changeStatus(workId: number, data: AnyObject) {
return axios.put(`/audition/activity-works/${workId}/change-status`, data).then((res) => Promise.resolve(res.data));
}
}
import axios from 'axios';
import { SystemPermission } from '@/types/system-permission';
import { AttributeData } from '@/types/global';
import FileSaver from 'file-saver';
type AuthResponse = {
user: { id?: number; nick_name?: string; real_name?: string; avatar?: string; email?: string };
permissions: string[];
menus: SystemPermission[];
};
export default class useAuthApi {
static async info(): Promise<AuthResponse> {
return axios.get('/auth/info').then((res) => Promise.resolve(res.data));
}
static async changePwd(data: AttributeData) {
return axios.patch('/auth/change-pwd', data).then((res) => Promise.resolve(res.data));
}
static async downloadFile(url: string, fileName: string) {
// ?response-content-type=Blob
FileSaver.saveAs(`${url}`, fileName + url.substring(url.lastIndexOf('.')));
}
}
import { QueryForParams, ServiceResponse } from '@/types/global';
import axios, { AxiosRequestConfig } from 'axios';
import FileSaver from 'file-saver';
export default class useDashboardApi {
static async userStyle() {
return axios.get('/dashboard/user-style').then((res) => Promise.resolve(res.data));
}
static async activityStyle() {
return axios.get('/dashboard/activity-style').then((res) => Promise.resolve(res.data));
}
static async todo(params?: QueryForParams): Promise<ServiceResponse> {
return axios.get('/dashboard/todo', { params });
}
static async submitWork(params?: QueryForParams) {
return axios.get('/dashboard/submit-work', { params });
}
static async 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 { apiHost } from '@/utils/env';
import { ServiceResponse } from '@/types/global';
axios.defaults.baseURL = apiHost;
axios.defaults.timeout = 30000;
const isRefreshing = false;
axios.interceptors.request.use(
(config: AxiosRequestConfig) => {
if (!config.url?.startsWith('/provider')) {
config.baseURL = `${config.baseURL}/manage`;
}
config.headers = {
Authorization: `Bearer ${isRefreshing ? getRefreshToken() : getToken()}`,
Accept: 'application/json',
Route: sessionStorage.getItem('route') || 'dashboard',
...config.headers,
};
if (config.params) {
Object.keys(config.params).forEach((key) => {
if (config.params[key] === undefined || config.params[key] === '') {
delete config.params[key];
}
});
}
return config;
},
(error) => {
return Promise.reject(error);
}
);
axios.interceptors.response.use(
async (response: AxiosResponse<ServiceResponse>) => {
if (response.data instanceof Blob) {
return Promise.resolve(response);
}
return Promise.resolve(response.data);
},
async (error: any): Promise<any> => {
if (error.response?.status === 401) {
clearToken();
window.location.reload();
Message.warning({ content: '登陆信息已失效，请重新登陆...' });
}
if (error.response?.status === 403) {
window.location.href = '/exception/403';
}
Message.error({
id: 'service_error',
content: error.response.data.msg || error.msg || 'Request Error',
duration: 5 * 1000,
});
return Promise.reject(error);
}
);
import { AttributeData, QueryForParams, ServiceResponse } from '@/types/global';
import axios, { AxiosRequestConfig } from 'axios';
import FileSaver from 'file-saver';
import { Project } from '@/types/project';
import { User } from '@/types/user';
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 statusOption = [
{ label: '启用', value: 1 },
{ label: '禁用', value: 0 },
];
static async 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 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 manageUsers(projectId: number, params?: QueryForParams): Promise<ServiceResponse<User[]>> {
return axios.get(`/audition/projects/${projectId}/managers`, { params });
}
static async memberUsers(projectId: number, params?: QueryForParams): Promise<ServiceResponse<User[]>> {
return axios.get(`/audition/projects/${projectId}/members`, { params });
}
static async 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 async dynamics(id: number, params?: QueryForParams): Promise<ServiceResponse> {
return axios.get(`/audition/projects/${id}/dynamics`, { params });
}
}
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: 'manage', scope: 2 });
}
static async login(type: 'phone' | 'email', data: object) {
return axios.post<LoginData>('/provider/login', { platform: 'manage', scope: 2, type, ...data });
}
}
import { QueryForParams } from '@/types/global';
import axios from 'axios';
export default class useUserApi {
static statusOption = [
{ label: '启用', value: 1 },
{ label: '禁用', value: 0 },
{ label: '注销', value: 2 },
];
static officialStatusOption = [
{ label: '已关注', value: 1 },
{ label: '未关注', value: 0 },
];
static sexOption = [
{ label: '男', value: 1 },
{ label: '女', value: 2 },
{ label: '无', value: 0 },
];
static scopeOption = [
{ label: '无权限', value: 0 },
{ label: '平台管理员', value: 1 },
{ label: '厂牌管理员', value: 2 },
];
static async manageSongs(id: number, params?: QueryForParams) {
return axios.get(`users/${id}/manage-songs`, { params });
}
}
<svg width="33" height="33" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.37754 16.9795L12.7498 9.43027C14.7163 7.41663 17.9428 7.37837 19.9564 9.34482C19.9852 9.37297 20.0137 9.40145 20.0418 9.43027L20.1221 9.51243C22.1049 11.5429 22.1049 14.7847 20.1221 16.8152L12.7498 24.3644C10.7834 26.378 7.55686 26.4163 5.54322 24.4498C5.5144 24.4217 5.48592 24.3932 5.45777 24.3644L5.37754 24.2822C3.39468 22.2518 3.39468 19.0099 5.37754 16.9795Z" fill="#12D2AC"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M20.0479 9.43034L27.3399 16.8974C29.3674 18.9735 29.3674 22.2883 27.3399 24.3644C25.3735 26.3781 22.147 26.4163 20.1333 24.4499C20.1045 24.4217 20.076 24.3933 20.0479 24.3644L12.7558 16.8974C10.7284 14.8213 10.7284 11.5065 12.7558 9.43034C14.7223 7.4167 17.9488 7.37844 19.9624 9.34489C19.9912 9.37304 20.0197 9.40152 20.0479 9.43034Z" fill="#307AF2"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M20.1321 9.52163L23.6851 13.1599L16.3931 20.627L9.10103 13.1599L12.6541 9.52163C14.6707 7.45664 17.9794 7.4174 20.0444 9.434C20.074 9.46286 20.1032 9.49207 20.1321 9.52163Z" fill="#0057FE"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="26" height="19" fill="white" transform="translate(3.5 7)"/>
</clipPath>
</defs>
</svg>
* {
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
font-size: 14px;
background-color: var(--color-bg-1);
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
.echarts-tooltip-diy {
background: linear-gradient(304.17deg,
rgba(253, 254, 255, 0.6) -6.04%,
rgba(244, 247, 252, 0.6) 85.2%) !important;
border: none !important;
backdrop-filter: blur(10px) !important;
/* Note: backdrop-filter has minimal browser support */
border-radius: 6px !important;
.content-panel {
display: flex;
justify-content: space-between;
width: auto;
height: 32px;
margin-bottom: 4px;
padding: 0 9px;
line-height: 32px;
background: rgba(255, 255, 255, 0.8);
border-radius: 4px;
box-shadow: 6px 0 20px rgba(34, 87, 188, 0.1);
}
.tooltip-title {
margin: 0 0 10px 0;
}
p {
margin: 0;
}
.tooltip-title,
.tooltip-value {
font-size: 13px;
line-height: 15px;
display: flex;
align-items: center;
text-align: right;
color: #1d2129;
font-weight: bold;
}
.tooltip-value {
margin-left: 10px;
}
.tooltip-item-icon {
display: inline-block;
margin-right: 8px;
width: 10px;
height: 10px;
border-radius: 50%;
}
}
.general-card {
border-radius: 4px;
border: none;
& > .arco-card-header {
height: auto;
padding: 10px 20px 0 20px;
border: none;
& > .arco-card-header-title {
font-size: 15px;
}
}
& > .arco-card-body {
padding: 0 20px 20px 20px;
}
}
.split-line {
border-color: rgb(var(--gray-2));
}
.arco-table-cell {
.circle {
display: inline-block;
margin-right: 4px;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: rgb(var(--blue-6));
&.pass {
background-color: rgb(var(--green-6));
}
&.warn {
background-color: rgb(var(--yellow-6));
}
&.err {
background-color: rgb(var(--red-6));
}
}
}
.mt-0 {
margin-bottom: 0;
}
.mt-20 {
margin-top: 20px;
}
.mb-0 {
margin-bottom: 0;
}
.color-grey {
color: rgba(44, 44, 44, 0.5)
}
.justify-center {
justify-content: center !important;
}
.retry {
div.arco-modal-header {
border-bottom: unset !important;
}
div.arco-modal-body {
padding: 0 24px 20px;
}
}
.link-hover:hover {
cursor: pointer !important;
}
This diff could not be displayed because it is too large.
<template>
<audio v-if="url" :id="uuid" :src="url" class="player" controls controlsList="nodownload noplaybackrate" @play="onPay" />
</template>
<script lang="ts" setup>
import { nanoid } from 'nanoid';
import { computed } from 'vue';
defineProps<{ url: string; name: string }>();
const uuid = computed(() => `audio-${nanoid()}`);
const onPay = (e: any) => {
const audios = document.getElementsByTagName('audio');
[].forEach.call(audios, (i: HTMLAudioElement) => i !== e.target && i.pause());
};
</script>
<style lang="less" scoped>
.player {
height: 30px;
width: 100%;
}
</style>
<template>
<Upload :accept="accept" :custom-request="onUpload" :on-before-upload="onBeforeUpload" :file-list="[]" :show-file-list="false">
<template #upload-button>
<Avatar :shape="shape" :size="size" trigger-type="mask">
<template #trigger-icon>
<icon-camera />
</template>
<img v-if="modelValue" :src="modelValue" alt="avatar" style="width: 100%; height: 100%" />
<div v-else class="no-avatar">
<icon-plus />
</div>
</Avatar>
</template>
</Upload>
</template>
<script lang="ts" setup>
import { IconCamera, IconPlus } from '@arco-design/web-vue/es/icon';
import useOss from '@/hooks/oss';
import { Avatar, Message, Upload, UploadRequest, useFormItem } from '@arco-design/web-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 { 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%;
}
.no-avatar {
position: absolute;
display: flex;
align-content: center;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
</style>
<template>
<a-breadcrumb class="container-breadcrumb">
<a-breadcrumb-item>
<icon-apps />
</a-breadcrumb-item>
<a-breadcrumb-item v-for="item in items" :key="item">
<router-link v-if="getRouteMeta(item)?.isRedirect" :to="{ name: item }">
{{ getRouteName(item) }}
</router-link>
<span v-else> {{ getRouteName(item) }}</span>
</a-breadcrumb-item>
</a-breadcrumb>
</template>
<script lang="ts" setup>
import { IconApps } from '@arco-design/web-vue/es/icon';
import { computed } from 'vue';
import { RouteMeta, RouteRecordNormalized, useRouter } from 'vue-router';
import { useAppStore } from '@/store';
import { storeToRefs } from 'pinia';
defineProps<{ items: string[] }>();
const router = useRouter();
const appStore = useAppStore();
const { appMenu } = storeToRefs(appStore);
const routes = computed(() => {
return router.getRoutes() as RouteRecordNormalized[];
});
const getRoute = (name: any) => {
return routes.value.find((el) => el.name === name);
};
const getRouteMeta = (name: any): RouteMeta | undefined => {
return getRoute(name)?.meta;
};
const getRouteName = (name: any) => {
return getRouteMeta(name)?.title || appMenu.value.find((item) => item.name === name)?.label || '';
};
</script>
<style lang="less" scoped>
.container-breadcrumb {
margin: 16px 0;
:deep(.arco-breadcrumb-item) {
color: rgb(var(--gray-6));
&:last-child {
color: rgb(var(--gray-8));
}
}
}
</style>
<template>
<VCharts v-if="renderChart" :option="options" :autoresize="autoresize" :style="{ width, height }" />
</template>
<script lang="ts">
import { defineComponent, ref, computed, nextTick } from 'vue';
import VCharts from 'vue-echarts';
import { useAppStore } from '@/store';
export default defineComponent({
components: {
VCharts,
},
props: {
options: {
type: Object,
default() {
return {};
},
},
autoresize: {
type: Boolean,
default: true,
},
width: {
type: String,
default: '100%',
},
height: {
type: String,
default: '100%',
},
},
setup() {
const appStore = useAppStore();
const theme = computed(() => {
if (appStore.theme === 'dark') return 'dark';
return '';
});
const renderChart = ref(false);
// wait container expand
nextTick(() => {
renderChart.value = true;
});
return {
theme,
renderChart,
};
},
});
</script>
<style scoped lang="less"></style>
<template>
<a-button :loading="loading" @click="onClick">
<template #icon>
<icon-download />
</template>
{{ label }}
</a-button>
</template>
<script lang="ts" setup>
import { IconDownload } from '@arco-design/web-vue/es/icon';
import useLoading from '@/hooks/loading';
const props = withDefaults(
defineProps<{
label: string;
onDownload: () => Promise<void>;
}>(),
{
label: '导出',
}
);
const { loading, setLoading } = useLoading(false);
const onClick = () => {
setLoading(true);
props.onDownload().finally(() => setLoading(false));
};
</script>
<style scoped></style>
<script setup lang="ts">
import TableColumn from '@/components/filter/table-column.vue';
import { Layout, LayoutSider, LayoutContent, Image, Form, FormItem, TypographyText, TableData } from '@arco-design/web-vue';
import { get } from 'lodash';
import { isString, isUndefined } from '@/utils';
const props = withDefaults(
defineProps<{
title?: string;
dataIndex?: string;
row?: string;
coverIndex?: string;
nameIndex?: string;
subIndex?: string;
tagIndex?: string;
projectIndex?: string;
hideSubTitle?: boolean;
}>(),
{
coverIndex: 'cover',
nameIndex: 'song_name',
subIndex: 'sub_title',
tagIndex: 'tags',
projectIndex: 'project',
}
);
const getRow = (record: TableData): TableData | undefined => {
if (isUndefined(props.row)) {
return record;
}
if (isString(props.row)) {
return get(record, props.row);
}
return props.row;
};
const getRowColumn = (record: TableData, key: string) => getRow(record)?.[key];
</script>
<template>
<TableColumn v-bind="$attrs" :title="title" :data-index="dataIndex">
<template #default="{ record }">
<Layout>
<LayoutSider :width="104" class="left">
<Image show-loader :height="100" :width="100" fit="cover" :src="getRowColumn(record, coverIndex)" />
</LayoutSider>
<LayoutContent>
<Form auto-label-width label-align="left" :model="record" style="height: 100%; justify-content: space-between">
<FormItem label="歌曲名称" :show-colon="true" row-class="mb-0">
<TypographyText :ellipsis="{ rows: 1, showTooltip: true }">
{{ getRowColumn(record, nameIndex) }}
</TypographyText>
</FormItem>
<FormItem v-if="!hideSubTitle" label="推荐语" :show-colon="true" row-class="mb-0">
<TypographyText :ellipsis="{ rows: 1, showTooltip: true }">
{{ getRowColumn(record, subIndex) }}
</TypographyText>
</FormItem>
<FormItem label="歌曲标签" :show-colon="true" row-class="mb-0">
<TypographyText :ellipsis="{ rows: 1, showTooltip: true }">
{{
getRowColumn(record, tagIndex)
.map((item: any) => item.name)
.join('、')
}}
</TypographyText>
</FormItem>
<FormItem label="关联厂牌" :show-colon="true" row-class="mb-0">
<TypographyText :ellipsis="{ rows: 1, showTooltip: true }">
{{ getRowColumn(record, projectIndex)?.name }}
</TypographyText>
</FormItem>
</Form>
</LayoutContent>
</Layout>
</template>
</TableColumn>
</template>
<style lang="less" scoped>
:deep(.arco-typography) {
margin-bottom: 0;
width: 100%;
text-align: left;
}
.left {
margin-top: 5px;
box-shadow: unset;
margin-right: 5px;
}
</style>
<script setup lang="ts">
import { Avatar, TableColumn } from '@arco-design/web-vue';
import { get } from 'lodash';
const props = defineProps<{ title?: string; dataIndex?: string; width?: number }>();
const getValue = (record: object) => {
return get(record, props.dataIndex || '', '');
};
</script>
<template>
<TableColumn v-bind="$attrs" :title="title" :data-index="dataIndex" :width="width || 60">
<template #cell="{ record }">
<Avatar :size="40" shape="circle">
<img alt="" :src="getValue(record)" :width="40" :height="40" />
</Avatar>
</template>
</TableColumn>
</template>
<style scoped lang="less"></style>
<script setup lang="ts">
import { get } from 'lodash';
import TableColumn from '@/components/filter/table-column.vue';
import dayjs from 'dayjs';
defineProps<{ title?: string; dataIndex?: string; split?: boolean }>();
const getValue = (record: object, path: string) => {
return get(record, path, '');
};
</script>
<template>
<TableColumn v-bind="$attrs" :title="title" :data-index="dataIndex">
<template #default="{ record }">
<template v-if="dataIndex && !getValue(record, dataIndex)">
<span style="color: rgba(0, 0, 0, 0.3)">无</span>
</template>
<template v-else-if="split">
<div>{{ dayjs(getValue(record, dataIndex))?.format('YYYY-MM-DD') || '' }}</div>
<div>{{ dayjs(getValue(record, dataIndex))?.format('HH:mm:ss') || '' }}</div>
</template>
<template v-else>{{ getValue(record, dataIndex) }}</template>
</template>
</TableColumn>
</template>
<style scoped lang="less"></style>
<script setup lang="ts">
import { Options } from '@/types/global';
import { eq, get } from 'lodash';
import TableColumn from '@/components/filter/table-column.vue';
const props = defineProps<{ title?: string; dataIndex?: string; option: Options[]; darkValue?: string | number }>();
const getValue = (record: object) => {
return get(record, props.dataIndex || '', '');
};
</script>
<template>
<TableColumn v-bind="$attrs" :title="title" :data-index="dataIndex">
<template #default="{ record }">
<template v-if="darkValue !== undefined && eq(getValue(record), darkValue)">
<span style="color: rgba(44, 44, 44, 0.5)"> {{ option.find((item) => item.value === getValue(record))?.label || '未知' }}</span>
</template>
<template v-else> {{ option.find((item) => item.value === getValue(record))?.label || '未知' }}</template>
</template>
</TableColumn>
</template>
<style scoped lang="less"></style>
<script setup lang="ts">
import TableColumn from '@/components/filter/table-column.vue';
import { Link } from '@arco-design/web-vue';
import { AnyObject } from '@/types/global';
defineProps<{
title?: string;
dataIndex?: string;
linkStyle?: object;
formatter: (record: AnyObject) => string;
to: (record: AnyObject) => void;
}>();
</script>
<template>
<TableColumn v-bind="$attrs" :title="title" :data-index="dataIndex">
<template #default="{ record }">
<Link v-if="!!formatter(record)" class="link" :style="linkStyle" :hoverable="false" @click.stop="to(record)">{{
formatter(record)
}}</Link>
<span v-else style="color: rgba(44, 44, 44, 0.5)">无</span>
</template>
</TableColumn>
</template>
<style scoped lang="less">
.link:hover {
cursor: pointer;
}
</style>
<script setup lang="ts">
import { get } from 'lodash';
import TableColumn from '@/components/filter/table-column.vue';
const props = defineProps<{ title?: string; dataIndex?: string; nickIndex?: string; realIndex?: string }>();
const fullName = (record: object) => {
let name = '';
if (props.nickIndex && get(record, props.nickIndex, '')) {
name += get(record, props.nickIndex, '');
}
if (props.realIndex && get(record, props.realIndex)) {
name += `(${get(record, props.realIndex, '')})`;
}
return name;
};
</script>
<template>
<TableColumn v-bind="$attrs" :title="title" :data-index="dataIndex">
<template #default="{ record }"> {{ fullName(record) }}</template>
</TableColumn>
</template>
<style scoped lang="less"></style>
<script setup lang="ts">
import { eq, get } from 'lodash';
import TableColumn from '@/components/filter/table-column.vue';
const props = withDefaults(
defineProps<{ title?: string; dataIndex?: string; darkValue?: string | number; prefix?: string; suffix?: string }>(),
{ prefix: '', suffix: '' }
);
const getValue = (record: object) => {
return get(record, props.dataIndex || '', '');
};
</script>
<template>
<TableColumn v-bind="$attrs" :title="title" :data-index="dataIndex">
<template #default="{ record }">
<template v-if="darkValue !== undefined && eq(getValue(record), darkValue)">
<span style="color: rgba(44, 44, 44, 0.5)">{{ `${prefix} 0 ${suffix}` }}</span>
</template>
<template v-else> {{ `${prefix} ${getValue(record)} ${suffix}` }} </template>
</template>
</TableColumn>
</template>
<style scoped lang="less"></style>
<script setup lang="ts">
import { get } from 'lodash';
import TableColumn from '@/components/filter/table-column.vue';
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 ref="formRef" auto-label-width :model="model" label-align="right">
<Grid :cols="split as number" :col-gap="12" :row-gap="12">
<slot />
</Grid>
</Form>
</LayoutContent>
<LayoutSider class="right" width="auto" :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" :size="size" />
</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;
}
</style>
<script setup lang="ts">
import { Space, TableData } from '@arco-design/web-vue';
import TableColumn from '@/components/filter/table-column.vue';
withDefaults(defineProps<{ title?: string; dataIndex?: string; direction?: 'vertical' | 'horizontal' }>(), {
direction: 'horizontal',
});
</script>
<template>
<TableColumn v-bind="$attrs" :title="title" :data-index="dataIndex" :tooltip="false">
<template #default="{ record, rowIndex }">
<Space :direction="direction" fill>
<slot name="default" :record="record as TableData" :index="rowIndex as Number" />
</Space>
</template>
</TableColumn>
</template>
<style scoped lang="less"></style>
<script setup lang="ts">
import { TableColumn, 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 } 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 TableSortable"
>
<template v-if="$slots.default" #cell="{ record, rowIndex }">
<slot name="default" :record="record" :index="rowIndex" />
</template>
</TableColumn>
</template>
<style scoped lang="less"></style>
<script setup lang="ts">
import { computed, ref } from 'vue';
import { Col, Row, Table } from '@arco-design/web-vue';
import { AnyObject, sizeType } from '@/types/global';
import usePagination from '@/hooks/pagination';
type PropType = {
loading?: boolean;
rowKey?: string;
hoverType?: string;
simplePage?: boolean;
pageSize?: number;
size?: sizeType;
onQuery: (params?: AnyObject) => Promise<any>;
};
defineEmits<{ (e: 'rowSort', dataIndex: string, direction: string): void }>();
const props = withDefaults(defineProps<PropType>(), { loading: false, rowKey: 'id', size: 'small', pageSize: 20 });
const { pagination, setPage, setPageSize, setTotal } = usePagination({
simple: props.simplePage,
size: props.size,
pageSize: props.pageSize,
});
const list = ref<any[]>([]);
const tableRef = ref();
const pageQueryParams = computed(() => {
return { page: pagination.value.current, pageSize: pagination.value.pageSize };
});
const hoverType = computed(() => props.hoverType || 'default');
const onFetch = () =>
props.onQuery(pageQueryParams.value).then(({ data, meta }) => {
list.value = data;
setPage(meta.current);
setTotal(meta.total);
setPageSize(meta.limit);
});
const onPageChange = (page: number) => {
setPage(page || 1);
onFetch();
};
const onSizeChange = (size: number) => {
setPageSize(size);
setPage(1);
onFetch();
};
const onPush = (row: unknown) => {
list.value.unshift(row);
// eslint-disable-next-line no-plusplus
++pagination.value.total;
};
const onRemove = (index: number) => {
list.value.splice(index, 1);
// eslint-disable-next-line no-plusplus
--pagination.value.total;
};
const resetSort = () => tableRef.value?.clearSorters();
const getCount = () => pagination.value.total;
const formatSortType = (type: string): string => type?.replace('end', '') ?? '';
defineExpose({ onFetch, onPageChange, onSizeChange, resetSort, getCount, onPush, onRemove });
</script>
<template>
<Row justify="space-between" align="center">
<Col 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="pagination"
:bordered="false"
:table-layout-fixed="true"
@page-change="onPageChange"
@page-size-change="onSizeChange"
@sorter-change="(dataIndex, direction) => $emit('rowSort', dataIndex, formatSortType(direction))"
>
<template #columns>
<slot />
</template>
</Table>
</template>
<style lang="less" scoped>
:deep(.arco-table-cell) {
padding: 5px 8px !important;
:hover {
cursor: v-bind(hoverType);
}
& > .arco-table-td-content .arco-btn-size-small {
padding: 5px !important;
}
}
:deep(.table-tool-item) {
> * {
margin-bottom: 12px !important;
}
}
</style>
<script setup lang="ts">
import TableColumn from '@/components/filter/table-column.vue';
import { Avatar } from '@arco-design/web-vue';
import { get } from 'lodash';
import { User } from '@/types/user';
import { isString, isUndefined } from '@/utils';
const props = withDefaults(
defineProps<{
title?: string;
dataIndex?: string;
user?: string | Pick<User, 'id' | 'nick_name' | 'real_name' | 'identity'>;
showHref?: boolean;
showAvatar?: boolean;
showRealName?: boolean;
darkValue?: string;
nickIndex?: string;
realIndex?: string;
avatarIndex?: string;
roleIndex?: string;
linkStyle?: object;
}>(),
{
dataIndex: 'id',
nickIndex: 'nick_name',
realIndex: 'real_name',
avatarIndex: 'avatar',
roleIndex: 'identity',
}
);
const getUser = (record: object): Pick<User, 'id' | 'nick_name' | 'real_name' | 'identity'> | undefined => {
if (isUndefined(props.user)) {
return record as User;
}
if (isString(props.user)) {
return get(record, props.user);
}
return get(props, 'user') as User;
};
const getName = (record: object): string => {
const user = getUser(record);
if (!user) {
return '';
}
if (props.showRealName) {
return `${get(user, props.nickIndex, '')}(${get(user, props.realIndex)})`;
}
return get(user, props.nickIndex, '');
};
</script>
<template>
<TableColumn v-bind="$attrs" :title="title" :data-index="dataIndex">
<template #default="{ record }">
<template v-if="darkValue !== undefined && getName(record) === darkValue">
<span style="color: rgba(44, 44, 44, 0.5)">无</span>
</template>
<template v-else>
<Avatar v-if="showAvatar" style="margin-right: 8px" :size="34" shape="circle" :image-url="getUser(record)?.[avatarIndex]" />
{{ getName(record) }}
</template>
</template>
</TableColumn>
</template>
<style scoped lang="less"></style>
<template>
<Button v-bind="$attrs" :size="size" :type="type" :loading="loading" :status="status" @click="() => emits('click')">
<template v-if="icon && iconAlign === 'left'" #icon>
<component :is="Icon[iconName]" />
</template>
{{ label }}
<component :is="Icon[iconName]" v-if="icon && iconAlign === 'right'" style="margin-left: 6px" />
</Button>
</template>
<script lang="ts" setup>
import { Button } from '@arco-design/web-vue';
import * as Icon from '@arco-design/web-vue/es/icon';
import { computed } from 'vue';
import { camelCase, upperFirst } from 'lodash';
const props = withDefaults(
defineProps<{
loading?: boolean;
label?: string;
icon?: string;
iconAlign?: 'left' | 'right';
type?: 'primary' | 'secondary' | 'outline' | 'dashed' | 'text';
shape?: 'square' | 'round' | 'circle';
status?: 'normal' | 'warning' | 'success' | 'danger';
size?: 'mini' | 'small' | 'medium' | 'large';
}>(),
{
loading: false,
iconAlign: 'left',
type: 'secondary',
shape: 'square',
status: 'normal',
size: 'small',
}
);
const emits = defineEmits(['click']);
const iconName = computed(() => upperFirst(camelCase(`icon-${props.icon}`)));
</script>
<style scoped></style>
<template>
<a-upload
:accept="accept"
:custom-request="onUpload"
:file-list="[]"
:show-file-list="false"
>
<template #upload-button>
<div class="arco-upload-list-item">
<a-image
v-if="modelValue"
:height="height"
:preview="false"
:src="modelValue"
:width="width"
/>
<div v-else :style="style" class="arco-upload-picture-card">
<div class="arco-upload-picture-card-text">
<IconPlus />
</div>
</div>
</div>
</template>
</a-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 } from '@arco-design/web-vue';
const props = defineProps({
modelValue: {
type: String,
default: '',
},
size: {
type: Number,
default: 80,
},
accept: {
type: String,
default: 'image/*',
},
width: {
type: Number,
default: 80,
},
height: {
type: [Number, String],
default: 'auto',
},
});
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%;
}
.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 AudioPlayer from '@/components/audio-player/index.vue';
import Chart from './chart/index.vue';
import Breadcrumb from './breadcrumb/index.vue';
import AvatarUpload from './avatar-upload/index.vue';
import InputUpload from './input-upload/index.vue';
import ImageUpload from './image-upload/index.vue';
import RouterButton from './router-button/index.vue';
import ExportButton from './export-button/index.vue';
import IconButton from './icon-button/index.vue';
import ProjectSelect from './project-select/index.vue';
import TagSelect from './tag-select/index.vue';
import UserSelect from './user-select/index.vue';
import FilterSearch from './filter/search.vue';
import FilterSearchItem from './filter/search-item.vue';
import FilterTable from './filter/table.vue';
import FilterTableColumn from './filter/table-column.vue';
import PageView from './page-view/index.vue';
// 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('RouterButton', RouterButton);
Vue.component('ExportButton', ExportButton);
Vue.component('IconButton', IconButton);
Vue.component('AudioPlayer', AudioPlayer);
Vue.component('ProjectSelect', ProjectSelect);
Vue.component('TagSelect', TagSelect);
Vue.component('UserSelect', UserSelect);
Vue.component('FilterSearch', FilterSearch);
Vue.component('FilterSearchItem', FilterSearchItem);
Vue.component('FilterTable', FilterTable);
Vue.component('FilterTableColumn', FilterTableColumn);
Vue.component('PageView', PageView);
// 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, watch } 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';
type FileType = { name: string; url: string; size: number; type: string };
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: 'update:loading', value: boolean): 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) => {
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, 'audio/') || startsWith(file.type, 'video/')) {
// const audioElement = new Audio(URL.createObjectURL(file));
// audioElement.addEventListener('loadedmetadata', () => emits('update: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 || '');
// emits('change', 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 });
})
.finally(() => {
setLoading(false);
});
}
return {};
};
watch(
() => loading.value,
(value) => emits('update:loading', value)
);
</script>
<style lang="less" scoped>
::v-deep(.arco-input-append) {
padding: 0;
}
</style>
<script setup lang="ts">
withDefaults(defineProps<{ hasCard?: boolean; hasBread?: boolean; loading?: boolean }>(), {
loading: false,
});
</script>
<template>
<div class="container">
<breadcrumb v-if="hasBread && $route.meta?.breadcrumb" :items="$route.meta?.breadcrumb" />
<a-spin style="width: 100%" :loading="loading as boolean">
<a-card v-if="hasCard" :bordered="false">
<slot />
</a-card>
<slot v-else />
</a-spin>
</div>
</template>
<style scoped lang="less">
.container {
padding: 0 30px 20px 20px;
}
</style>
<template>
<Select
v-bind="$attrs"
:model-value="modelValue"
:options="projectOptions"
:fallback-option="false"
:placeholder="placeholder"
:field-names="{ value: 'id', label: 'name' }"
@update:model-value="onUpdate"
/>
</template>
<script lang="ts" setup>
import { Select } from '@arco-design/web-vue';
import { toRefs } from 'vue';
import { storeToRefs } from 'pinia';
import { useSelectionStore } from '@/store';
type propType = {
modelValue?: number | string | number[];
multiple?: boolean;
placeholder?: string;
maxTagCount?: number;
};
const props = withDefaults(defineProps<propType>(), {
multiple: false,
maxTagCount: 0,
placeholder: '请选择',
modelValue: '',
});
const emits = defineEmits<{ (e: 'update:modelValue', value: number | number[]): void }>();
const { multiple } = toRefs(props);
const { projectOptions } = storeToRefs(useSelectionStore());
const onUpdate = (val?: number) => emits('update:modelValue', val || (multiple.value ? [] : 0));
</script>
<style scoped></style>
<template>
<a-button v-if="type === 'Button'" type="text" size="small" @click="onClick">
<slot>详情</slot>
</a-button>
<a-link v-else class="link" :hoverable="false" @click="onClick">
<a-typography-text type="primary" :style="textStyle" :ellipsis="{ rows: 1, showTooltip: showTooltip }">
<slot>详情</slot>
</a-typography-text>
</a-link>
</template>
<script lang="ts" setup>
import { RouteParamsRaw, useRouter } from 'vue-router';
import { AnyObject } from '@/types/global';
const props = withDefaults(
defineProps<{
name: string;
params?: AnyObject;
type: 'Button' | 'link';
showTooltip: boolean;
}>(),
{
name: '',
type: 'Button',
params: undefined,
showTooltip: true,
}
);
const textStyle = { marginBottom: 0 };
const router = useRouter();
const onClick = () => {
router.push({
name: props.name,
params: (props.params as RouteParamsRaw) || {},
});
};
</script>
<style lang="less" scoped>
.link {
width: 100%;
padding: 1px 0;
display: block !important;
}
</style>
<template>
<Select
v-bind="$attrs"
v-model="value"
:options="options"
:fallback-option="false"
:placeholder="placeholder"
:virtual-list-props="{ height: 200 }"
:field-names="{ value: 'id', label: 'name' }"
@exceed-limit="onTagExceedLimitError"
/>
</template>
<script lang="ts" setup>
import { Message, Select } from '@arco-design/web-vue';
import { computed, onMounted } from 'vue';
import { Tag } from '@/types/tag';
import { storeToRefs } from 'pinia';
import { useSelectionStore } from '@/store';
import { isArray } from '@arco-design/web-vue/es/_utils/is';
interface propType {
modelValue?: number | string | number[];
placeholder?: string;
}
const props = withDefaults(defineProps<propType>(), { placeholder: '请选择' });
const emits = defineEmits<{ (e: 'update:modelValue', value: unknown): void }>();
const onTagExceedLimitError = () => Message.warning({ content: '关联标签最多选中3个', duration: 1500 });
const value = computed({
get: () => props.modelValue,
set: (val) => emits('update:modelValue', val),
});
const { getTagOptions } = storeToRefs(useSelectionStore());
const options = computed(() => getTagOptions.value.filter((item: Tag) => item.type === 1));
const tagIds = computed(() => options.value?.map((item: Tag) => item.id));
onMounted(() => {
if (isArray(props.modelValue)) {
value.value = props.modelValue?.filter((item: number) => tagIds.value?.indexOf(item) !== -1) || [];
}
});
</script>
<style scoped></style>
<script setup lang="ts">
import { ref } from 'vue';
import { Select } from '@arco-design/web-vue';
import { useSelectionStore } from '@/store';
import { storeToRefs } from 'pinia';
const { getUserOptions } = storeToRefs(useSelectionStore());
const loading = ref<boolean>(false);
const fieldName = { value: 'id', label: 'nick_name' };
</script>
<template>
<Select
v-bind="$attrs"
placeholder="请选择"
:loading="loading"
:multiple="true"
:options="getUserOptions"
:field-names="fieldName"
:allow-search="true"
:virtual-list-props="{ height: 200 }"
/>
</template>
<style scoped lang="less"></style>
{
"theme": "light",
"colorWeek": false,
"navbar": true,
"menu": true,
"menuCollapse": false,
"footer": false,
"themeColor": "#165DFF",
"menuWidth": 220,
"globalSettings": false
}
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 { Activity } from '@/types/activity';
import { createVNode, ref } from 'vue';
import { Button, Form, FormItem, Input, Modal } from '@arco-design/web-vue';
import { clone, compact, trim } from 'lodash';
import { IconDelete, IconPlus } from '@arco-design/web-vue/es/icon';
import { AnyObject } from '@/types/global';
export default function useActivityHook() {
const updateStatusToSend = (activity: Activity, callback: (done: (closed: boolean) => void, attribute: AnyObject) => void) => {
const oldLink = clone(activity.send_url?.[0]?.url || '');
const link = ref(oldLink);
const title = link.value.length === 0 ? '发行' : '编辑发行';
return Modal.open({
title,
content: () =>
createVNode(
Form,
{ model: link, autoLabelWidth: true },
{
default: () => [
createVNode(
'div',
{
style: {
fontFamily: 'PingFangSC-Regular, serif',
paddingBottom: '16px',
color: '#696969',
},
},
'将歌曲发行平台的url链接回填，会展示在App或小程序应用端。将会给您带来更多播放量 ~'
),
createVNode(
FormItem,
{
label: 'QQ音乐或酷狗平台链接',
rowClass: 'mb-0',
required: true,
},
{
default: () =>
createVNode(Input, {
'modelValue': link.value,
'size': 'small',
'onUpdate:modelValue': (val?: string) => {
link.value = val || '';
},
}),
}
),
],
}
),
closable: false,
width: 'auto',
onBeforeOk: (done) => {
if (trim(link.value).length === 0) {
Modal.open({ title: '提醒', content: '请输入：QQ音乐或酷狗平台链接', closable: false, hideCancel: true, escToClose: false });
return done(false);
}
if (link.value.toString() === oldLink.toString()) {
return done(true);
}
if (!/^(((ht|f)tps?):\/\/)?([^!@#$%^&*?.\s-]([^!@#$%^&*?.\s]{0,63}[^!@#$%^&*?.\s])?\.)+[a-z]{2,6}\/?/.test(link.value)) {
Modal.open({
title: '提醒',
content: 'url链接无法被识别，请检查后重试',
closable: false,
hideCancel: true,
escToClose: false,
});
return done(false);
}
return callback(done, { status: 5, link: link.value });
},
});
};
const updateStatusToReUp = (activity: Activity, callback: (done: (closed: boolean) => void, attribute: AnyObject) => void) => {
return Modal.open({
title: '是否确认重新上架',
titleAlign: 'start',
content: '注意：重新上架会保留原参与试唱的信息',
closable: false,
escToClose: false,
okText: '上架',
onBeforeOk: (done) => {
return callback(done, { status: 1 });
},
});
};
const updateStatusToDown = (activity: Activity, callback: (done: (closed: boolean) => void, attribute: AnyObject) => void) => {
const msg = ref<string>('');
return Modal.open({
title: '变更状态',
titleAlign: 'start',
content: () =>
createVNode(Input, {
'placeholder': '请输入下架原因',
'maxLength': 20,
'show-word-limit': true,
'modelValue': msg.value,
'onUpdate:modelValue': (val?: string) => {
msg.value = val || '';
},
}),
simple: false,
closable: false,
escToClose: false,
maskClosable: false,
okText: '下架',
onBeforeOk: (done) => {
return callback(done, { status: 2, msg: msg.value });
},
});
};
const updateStatusToUp = (activity: Activity, callback: (done: (closed: boolean) => void, attribute: AnyObject) => void) => {
return Modal.open({
title: '变更状态',
titleAlign: 'start',
content: `请确认是否上架活动：${activity.song_name}`,
simple: false,
closable: false,
escToClose: false,
okText: '上架',
onBeforeOk: (done) => {
return callback(done, { status: 1 });
},
});
};
const updateRecommendIntro = (activity: Activity, callback: (done: (closed: boolean) => void, attribute: AnyObject) => void) => {
const oldIntro = activity.recommend_intros?.map((item) => item.content) || [];
const intro = ref<string[]>(oldIntro.length === 0 ? [''] : clone(oldIntro));
const InputVNode = (index: number) =>
createVNode(Input, {
'modelValue': intro.value[index],
'onUpdate:modelValue': (val?: string) => {
intro.value[index] = val || '';
},
});
const DeleteBtnVNode = (index: number) =>
createVNode(
Button,
{
style: { marginLeft: '10px' },
onClick: () => intro.value.splice(index, 1),
},
{ icon: () => createVNode(IconDelete) }
);
const InputItemVNode = (index: number) =>
createVNode(
FormItem,
{ label: `推荐语${index + 1}`, required: true },
{
default: () => (intro.value.length === 1 ? InputVNode(index) : [InputVNode(index), DeleteBtnVNode(index)]),
}
);
const AddItemVNode = createVNode(
FormItem,
{},
{
default: () =>
createVNode(
Button,
{
long: false,
type: 'primary',
size: 'small',
onClick: () => intro.value.push(''),
},
{
icon: () => createVNode(IconPlus),
default: () => '添加',
}
),
}
);
return Modal.open({
title: '推荐',
content: () =>
createVNode(
Form,
{ model: intro, autoLabelWidth: true },
{
default: () => {
const children = intro.value.map((value: any, index: number) => InputItemVNode(index));
if (children.length < 3) {
children.push(AddItemVNode);
}
return children;
},
}
),
closable: false,
// @ts-ignore
bodyStyle: { padding: '24px 20px 0' },
onBeforeOk: (done) => {
if (oldIntro.toString() === intro.value.toString()) {
return done(true);
}
if (intro.value.length !== compact(intro.value).length) {
return done(false);
}
return callback(done, { intro: intro.value });
},
});
};
// const activity
return {
updateStatusToReUp,
updateStatusToSend,
updateStatusToDown,
updateStatusToUp,
updateRecommendIntro,
};
}
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 { computed } from 'vue';
import { useI18n } from 'vue-i18n';
import { Message } from '@arco-design/web-vue';
export default function useLocale() {
const i18 = useI18n();
const currentLocale = computed(() => {
return i18.locale.value;
});
const changeLocale = (value: string) => {
i18.locale.value = value;
localStorage.setItem('arco-locale', value);
Message.success(i18.t('navbar.action.locale'));
};
return {
currentLocale,
changeLocale,
};
}
import OSS from 'ali-oss';
import { ossConfig } from '@/utils/env';
const oss = new OSS({
accessKeyId: ossConfig.accessKeyId,
accessKeySecret: ossConfig.accessKeySecret,
bucket: ossConfig.bucket,
region: ossConfig.region,
endpoint: ossConfig.endpoint,
cname: true,
});
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 (ossConfig.host && ossConfig.host.length !== 0) {
return ossConfig.host;
}
return ossConfig.endpoint;
};
return {
upload(file: File, prefix = 'file', onProgress?: (percent: number) => void) {
return oss
.multipartUpload(`${prefix}/${getFileDir()}/${getFileName()}.${getFileType(file)}`, file, { progress: onProgress })
.then((res) => {
return { response: res.res, url: `${getHost()}/${res.name}` };
});
},
};
}
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 authorizedStore = useAuthorizedStore();
return {
accessRouter(route: RouteLocationNormalized | RouteRecordRaw) {
return (
!route.meta?.requiresAuth ||
!route.meta?.roles ||
route.meta?.roles?.includes('*') ||
authorizedStore.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);
},
};
}
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 { LocationQueryRaw, useRouter } from 'vue-router';
import { useAuthorizedStore } from '@/store';
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 '@/api/auth';
export default function useUser() {
const router = useRouter();
const userStore = useAuthorizedStore();
const logout = async () => {
await userStore.logout();
const currentRoute = router.currentRoute.value;
await router.push({
name: 'login',
query: { path: currentRoute.path } as LocationQueryRaw,
});
};
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 {
logout,
resetPwd,
};
}
<script lang="tsx">
import { compile, computed, defineComponent, h, ref, watch } from 'vue';
import { RouteRecordRaw, useRoute, useRouter } from 'vue-router';
import { useAppStore } from '@/store';
import usePermission from '@/hooks/permission';
import { last, orderBy } from 'lodash';
import { storeToRefs } from 'pinia';
export default defineComponent({
emit: ['collapse'],
setup() {
const appStore = useAppStore();
const permission = usePermission();
const router = useRouter();
const route = useRoute();
const { appMenu } = storeToRefs(appStore);
const collapsed = ref(false);
const selectedKey = ref<string[]>([]);
const openKey = ref<string[]>([]);
const goto = (item: RouteRecordRaw) => router.push({ name: item.name });
const syncServicePermission = (item: RouteRecordRaw) => {
if (item.meta) {
const serverConfig = appMenu.value.find((menu) => item.name === menu.name);
item.meta.title = serverConfig?.label || item.meta?.title || '';
item.meta.order = serverConfig?.weight || item.meta?.order || 0;
item.meta.icon = serverConfig?.icon || item.meta?.icon || '';
}
item.children?.map((child) => syncServicePermission(child));
return item;
};
const appRoute = computed((): RouteRecordRaw[] => {
return router
.getRoutes()
.find((el) => el.name === 'root')
?.children.filter((element) => element.meta?.hideInMenu !== true)
.map((item: RouteRecordRaw) => syncServicePermission(item)) as RouteRecordRaw[];
});
const menuTree = computed((): RouteRecordRaw[] => {
function travel(_routes: RouteRecordRaw[], layer: number) {
if (!_routes) return null;
const collector: any = orderBy(_routes, 'meta.order', 'desc').map((element) => {
// no access
if (!permission.accessRouter(element)) {
return null;
}
// leaf node
if (!element.children) {
return element;
}
// route filter hideInMenu true
element.children = element.children.filter((x) => x.meta?.hideInMenu !== true);
// Associated child node
const subItem = travel(element.children, layer);
if (subItem.length) {
element.children = subItem;
return element;
}
// the else logic
if (layer > 1) {
element.children = subItem;
return element;
}
if (element.meta?.hideInMenu === false) {
return element;
}
return null;
});
return collector.filter(Boolean);
}
return travel(appRoute.value, 0);
});
watch(
route,
(newVal) => {
if (newVal.meta.requiresAuth) {
const key = newVal.meta.hideInMenu ? last(newVal.matched)?.meta?.menuSelectKey : last(newVal.matched)?.name;
selectedKey.value = [key as string];
openKey.value = [...(newVal.meta.breadcrumb || [])];
}
},
{ immediate: true }
);
watch(
() => appStore.menuCollapse,
(newVal) => {
collapsed.value = newVal;
},
{ immediate: true }
);
const setCollapse = (val: boolean) => {
appStore.updateSettings({ menuCollapse: val });
};
const renderSubMenu = () => {
function travel(_route: RouteRecordRaw[], nodes = []) {
if (_route) {
_route.forEach((element) => {
// This is demo, modify nodes as needed
const icon = element?.meta?.icon ? `<${element?.meta?.icon}/>` : ``;
let r;
if (element && element.children && element.children.length !== 0) {
r = (
<a-sub-menu key={element?.name} title={element.meta?.title} v-slots={{ icon: () => h(compile(icon)) }}>
{element?.children?.map((elem) => {
return (
<a-menu-item key={elem.name} onClick={() => goto(elem)}>
{elem.meta?.title}
{travel(elem.children ?? [])}
</a-menu-item>
);
})}
</a-sub-menu>
);
} else {
r = (
<a-menu-item key={element.name} v-slots={{ icon: () => h(compile(icon)) }} onClick={() => goto(element)}>
{element.meta?.title}
</a-menu-item>
);
}
nodes.push(r as never);
});
}
return nodes;
}
return travel(menuTree.value);
};
return () => (
<a-menu
v-model:collapsed={collapsed.value}
show-collapse-button
auto-open={false}
v-model:selected-keys={selectedKey.value}
v-model:open-keys={openKey.value}
auto-open-selected={true}
auto-scroll-into-view={true}
level-indent={34}
style="height: 100%"
onCollapse={setCollapse}
>
{renderSubMenu()}
</a-menu>
);
},
});
</script>
<style lang="less" scoped>
:deep(.arco-menu-inner) {
.arco-menu-inline-header {
display: flex;
align-items: center;
}
.arco-icon {
&:not(.arco-icon-down) {
font-size: 18px;
}
}
}
</style>
<template>
<div class="navbar">
<div class="left-side">
<a-space>
<img alt="logo" src="//p3-armor.byteimg.com/tos-cn-i-49unhts6dw/dfdba5317c0c20ce20e64fac803d52bc.svg~tplv-49unhts6dw-image.image" />
<a-typography-title :heading="5" :style="{ margin: 0, fontSize: '18px' }"> 海星试唱 </a-typography-title>
</a-space>
</div>
<ul class="right-side">
<!-- <li>-->
<!-- <toggle-theme-button />-->
<!-- </li>-->
<!-- <li>-->
<!-- <a-tooltip :content="$t('settings.navbar.alerts')">-->
<!-- <div class="message-box-trigger">-->
<!-- <a-badge :count="9" dot>-->
<!-- <a-button-->
<!-- :shape="'circle'"-->
<!-- class="nav-btn"-->
<!-- type="outline"-->
<!-- @click="setPopoverVisible"-->
<!-- >-->
<!-- <icon-notification />-->
<!-- </a-button>-->
<!-- </a-badge>-->
<!-- </div>-->
<!-- </a-tooltip>-->
<!-- <a-popover-->
<!-- :arrow-style="{ display: 'none' }"-->
<!-- :content-style="{ padding: 0, minWidth: '400px' }"-->
<!-- content-class="message-popover"-->
<!-- trigger="click"-->
<!-- >-->
<!-- <div ref="refBtn" class="ref-btn"></div>-->
<!-- <template #content>-->
<!-- <message-box />-->
<!-- </template>-->
<!-- </a-popover>-->
<!-- </li>-->
<li>
<a-dropdown trigger="hover">
<a-space align="center">
<a-avatar v-if="avatar" :size="32">
<img :src="avatar" alt="avatar" />
</a-avatar>
<span
:style="{
color: theme === 'dark' ? 'white' : 'black',
lineHeight: '31px',
}"
>
{{ name }}
<icon-down />
</span>
</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 { logout } = useUser();
const avatar = computed(() => {
return authorized.avatar;
});
const name = computed(() => {
return authorized.nick_name;
});
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 = () => {
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" name="layout">
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: 'exception-403' });
}
);
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 router from './router';
import store from './store';
import directive from './directive';
import App from './App.vue';
import '@arco-design/web-vue/dist/arco.css';
import '@/assets/style/global.less';
import '@/api/interceptor';
const app = createApp(App);
app.use(ArcoVue, {});
app.use(ArcoVueIcon);
app.use(store);
app.use(router);
app.use(globalComponents);
app.use(directive);
app.mount('#app');
import { createRouter, createWebHistory, LocationQueryRaw } from 'vue-router';
import NProgress from 'nprogress'; // progress bar
import 'nprogress/nprogress.css';
import usePermission from '@/hooks/permission';
import { clearToken, isLogin } from '@/utils/auth';
import PageLayout from '@/layout/index.vue';
import { useAuthorizedStore } from '@/store';
import appRoutes from './modules';
NProgress.configure({ showSpinner: false }); // NProgress Configuration
const router = createRouter({
history: createWebHistory(),
routes: [
{
path: '/login',
name: 'login',
component: () => import('@/views/login/index.vue'),
meta: {
title: '登陆',
requiresAuth: false,
},
},
{
name: 'root',
path: '/',
component: PageLayout,
redirect: '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: 'applies',
name: 'audition-apply',
component: () => import('@/views/audition/activity-apply/index.vue'),
meta: {
requiresAuth: true,
hideInMenu: false,
isRedirect: true,
reload: true,
menuSelectKey: 'audition',
roles: ['audition-apply'],
breadcrumb: ['audition', 'audition-apply'],
},
},
{
path: 'activities',
name: 'audition-activity',
component: () => import('@/views/audition/activity/index.vue'),
meta: {
icon: 'icon-apps',
requiresAuth: true,
hideInMenu: false,
isRedirect: true,
reload: true,
roles: ['audition-activity'],
menuSelectKey: 'audition',
breadcrumb: ['audition', 'audition-activity'],
},
},
{
path: 'activities/:id(\\d+)',
name: 'audition-activity-show',
component: () => import('@/views/audition/activity-show/index.vue'),
meta: {
requiresAuth: true,
hideInMenu: true,
reload: true,
menuSelectKey: 'audition-activity',
roles: ['audition-activity-show'],
breadcrumb: ['audition', 'audition-activity', 'audition-activity-show'],
},
},
// {
// path: 'demo-applies',
// name: 'audition-demo-apply',
// component: () => import('@/views/audition/demo-apply/index.vue'),
// meta: {
// requiresAuth: true,
// hideInMenu: false,
// isRedirect: true,
// reload: true,
// menuSelectKey: 'audition',
// roles: ['audition-demo-apply'],
// breadcrumb: ['audition', 'audition-demo-apply'],
// },
// },
{
path: 'demos',
name: 'audition-demo',
component: () => import('@/views/audition/demo/index.vue'),
meta: {
icon: 'icon-apps',
requiresAuth: true,
hideInMenu: false,
isRedirect: true,
reload: true,
roles: ['audition-demo'],
menuSelectKey: 'audition',
breadcrumb: ['audition', 'audition-demo'],
},
},
{
path: 'demos/:id(\\d+)',
name: 'audition-demo-show',
component: () => import('@/views/audition/demo-show/index.vue'),
meta: {
requiresAuth: true,
hideInMenu: true,
reload: true,
menuSelectKey: 'audition-demo',
roles: ['audition-demo-show'],
breadcrumb: ['audition', 'audition-demo', 'audition-demo-show'],
},
},
],
};
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: ['*'],
hideInMenu: true,
},
},
{
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 Project from '@/router/modules/project';
import Dashboard from '@/router/modules/dashboard';
import Exception from '@/router/modules/exception';
import Audition from '@/router/modules/audition';
export default [Dashboard, Exception, Project, Audition];
export default {
path: 'projects',
name: 'project',
component: () => import('@/views/project/index.vue'),
meta: {
requiresAuth: true,
hideInMenu: false,
isRedirect: true,
roles: ['project'],
breadcrumb: ['project'],
},
children: [
{
path: ':id(\\d+)',
name: 'project-show',
component: () => import('@/views/project-show/index.vue'),
meta: {
requiresAuth: true,
hideInMenu: true,
roles: ['project-show'],
menuSelectKey: 'project',
breadcrumb: ['project', 'project-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;
breadcrumb?: string[];
hideInMenu?: boolean;
isRedirect?: boolean;
title?: string;
order?: number;
}
}
import { createPinia } from 'pinia';
import useAppStore from '@/store/modules/app';
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 { SystemPermission } from '@/types/system-permission';
import { AppState } from './types';
const useAppStore = defineStore('app', {
state: (): AppState => ({
theme: 'light',
colorWeek: false,
navbar: true,
menu: true,
menuCollapse: false,
footer: false,
themeColor: '#165DFF',
menuWidth: 220,
globalSettings: false,
permissions: [],
}),
getters: {
appCurrentSetting(state: AppState): AppState {
return { ...state };
},
appMenu(state: AppState): SystemPermission[] {
return state.permissions?.filter((item) => item.guard === 'Manage' && 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');
}
},
setPermissions(permissions: SystemPermission[]) {
this.$patch({ permissions });
},
},
});
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 '@/api/auth';
// eslint-disable-next-line import/no-cycle
import { useAppStore } from '@/store';
import { AuthorizedState } from './type';
const useAuthorizedStore = defineStore('authorized', {
state: (): AuthorizedState => ({
id: undefined,
nick_name: undefined,
real_name: undefined,
avatar: undefined,
email: undefined,
phone: undefined,
permissions: [],
}),
getters: {
authorizedInfo(state: AuthorizedState): AuthorizedState {
return { ...state };
},
},
actions: {
setInfo(partial: Partial<AuthorizedState>) {
this.$patch(partial);
},
async syncInfo() {
const { user, permissions, menus } = await useAuthApi.info();
this.setInfo({ ...user, permissions });
useAppStore().setPermissions(menus);
},
async logout() {
this.$reset();
clearToken();
},
async syncToken() {
// const { data } = await refreshToken();
// setToken(data.access_token);
},
},
});
export default useAuthorizedStore;
export interface AuthorizedState {
id?: number;
nick_name?: string;
real_name?: string;
avatar?: string;
email?: string;
phone?: string;
permissions: string[];
}
import { defineStore } from 'pinia';
import { Selection } from '@/store/modules/selection/type';
import { AnyObject } from '@/types/global';
import { SystemConfig } from '@/types/system-config';
import axios from 'axios';
import { Tag } from '@/types/tag';
const useSelectionStore = defineStore('selection', {
state: (): Selection => ({
user: [],
project: [],
tag: [],
config: [],
}),
getters: {
getUserOptions(state) {
return state.user;
},
getTagOptions(state) {
return state.tag;
},
projectOptions(state) {
return state.project;
},
lyricTool(state): string {
return state.config.find((item) => item.identifier === 'activity_lyric_tool')?.content || '';
},
activityLang(state): SystemConfig | undefined {
return state.config.find((item) => item.identifier === 'activity_lang');
},
activityLangOptions(state): SystemConfig[] {
return state.config.filter((item) => item.parent_id === this.activityLang?.id);
},
activitySpeed(state): SystemConfig | undefined {
return state.config.find((item) => item.identifier === 'activity_speed');
},
activitySpeedOptions(state): SystemConfig[] {
return state.config.filter((item) => item.parent_id === this.activitySpeed?.id);
},
activitySex(state): SystemConfig | undefined {
return state.config.find((item) => item.identifier === 'activity_sex');
},
activitySexOptions(state): SystemConfig[] {
return state.config.filter((item) => item.parent_id === this.activitySex?.id);
},
activityTagOptions(state): Pick<Tag, 'id' | 'name' | 'type'>[] {
return state.tag.filter((item) => item.type === 1);
},
activityAudioAccept(state): string {
return state.config.find((item) => item.identifier === 'activity_audio_accept')?.content || 'audio/*';
},
activityTrackAccept(state): string {
return state.config.find((item) => item.identifier === 'activity_track_accept')?.content || '*';
},
appleDemoCover(state): string {
return state.config.find((item) => item.identifier === 'activity_demo_cover')?.content || '';
},
},
actions: {
queryUser(params?: AnyObject) {
axios.get('selection/user', { params }).then(({ data }) => {
this.user = data;
});
},
queryProject(params?: AnyObject) {
axios.get('selection/project', { params }).then(({ data }) => {
this.project = data;
});
},
queryTag() {
axios.get('selection/tag').then(({ data }) => {
this.tag = data;
});
},
queryConfig() {
axios.get('selection/config').then(({ data }) => {
this.config = data;
});
},
queryAll() {
this.queryConfig();
this.queryUser();
this.queryProject();
this.queryTag();
},
},
});
export default useSelectionStore;
import { User } from '@/types/user';
import { Project } from '@/types/project';
import { Tag } from '@/types/tag';
import { SystemConfig } from '@/types/system-config';
export interface Selection {
user: User[];
project: Project[];
tag: Tag[];
config: SystemConfig[];
}
import { Project } from '@/types/project';
import { Tag } from '@/types/tag';
import { User } from '@/types/user';
export interface ActivityExpand {
tag_ids: number[];
lyricist: { ids: number[]; supplement: string[] };
composer: { ids: number[]; supplement: string[] };
arranger: { ids: number[]; supplement: string[] };
guide_source: { name: string; url: string; size: number };
karaoke_source: { name: string; url: string; size: number };
track_source: { name: string; url: string; size: number };
}
export interface ActivityApplyRecord {
id: number;
created_at: string;
audit_msg: string;
}
export interface ActivityApply {
id: number;
cover: string;
song_name: string;
sub_title?: string;
lang: string[];
speed: string;
lyric: string;
clip_lyric: string;
sex: string;
project_id: number;
estimate_release_at: string;
audit_status: number;
expand: ActivityExpand;
project?: Project;
tags?: Tag[];
user?: User;
apply_records?: ActivityApplyRecord[];
}
export type ActivityApplyFormStep1 = Pick<ActivityApply, 'cover' | 'song_name' | 'sub_title' | 'lang' | 'speed'> &
Pick<ActivityExpand, 'tag_ids'>;
export type ActivityApplyFormStep2 = Pick<ActivityApply, 'project_id' | 'sex' | 'estimate_release_at'> &
Pick<ActivityExpand, 'lyricist' | 'composer' | 'arranger'>;
export type ActivityApplyFormStep3 = Pick<ActivityApply, 'song_name' | 'lyric' | 'clip_lyric'> &
Pick<ActivityExpand, 'guide_source' | 'karaoke_source' | 'track_source'>;
export type ActivityApplyForm = ActivityApplyFormStep1 & ActivityApplyFormStep2 & ActivityApplyFormStep3;
import { 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;
activity_id: number;
user_id: number;
open_id: string;
user?: Singer;
activity?: Activity;
activity_name: string;
activity_status: number;
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 { FileStatus } from '@arco-design/web-vue/es/upload/interfaces';
import { User } from '@/types/user';
import { ActivityExpand } from '@/types/activity-apply';
export type ActivityMaterialType = 'GuideDinging' | 'Accompany';
export type ActivityMaterialTone = -3 | -2 | -1 | 0 | 1 | 2 | 3;
export interface ActivityMaterialOption {
type: ActivityMaterialType;
tone: ActivityMaterialTone;
label: string;
}
export interface ActivityMaterial {
id: string;
type: ActivityMaterialType;
url: string;
name: string;
tone: ActivityMaterialTone;
file?: File;
percent?: number;
status?: FileStatus;
response?: string;
created_at?: string;
}
export interface ActivitySendLink {
type: string;
url: string;
}
export interface ActivityRecommendIntro {
id: number;
content: string;
}
export interface ActivityApplyRecord {
id: number;
audit_user_id: number;
audit_msg: string;
created_at?: string;
updated_at?: string;
}
export interface Activity {
id: number;
song_name: string;
song_type?: number;
sub_title: string;
cover: string;
user_id: number;
project_id: number;
guide: string;
karaoke: string;
guide_source?: string;
karaoke_source?: string;
lyric: string;
clip_lyric: string;
weight: number;
audit_status: number;
status: number;
match_at: string;
created_at: string;
updated_at: string;
submit_works_count?: number;
views_count?: number;
collections_count?: number;
is_official?: number;
send_url?: ActivitySendLink[];
user?: Pick<User, 'id' | 'nick_name' | 'real_name' | 'role'>;
project?: Project;
tags?: Tag[];
materials?: ActivityMaterial[];
recommend_intros?: ActivityRecommendIntro[];
apply_records?: ActivityApplyRecord[];
estimate_release_at: string;
expand?: ActivityExpand;
links?: User[];
}
export type ActivityViewUser = Pick<User, 'id' | 'avatar' | 'nick_name' | 'real_name' | 'sex' | 'role'> & {
listen_count: number;
collection_count: number;
submit_work: number;
last_listen_at: number;
};
// eslint-disable-next-line import/no-cycle
import { User } from '@/types/user';
export interface Admin extends User {
creator?: User;
role?: 'ProjectUser' | 'SystemUser' | 'Admin';
company: string;
activities_count?: number;
singers_count?: number;
submit_activities_count?: number;
accept_activities_count?: number;
checked_activities_count?: number;
}
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 {
role?: 'Business';
company?: string;
audit_status?: number;
singers_count?: number;
nick_name: string;
real_name: string;
email: string;
phone: string;
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 Options {
value: unknown;
label: string;
}
export interface MoreRowValue<T = object> {
type: string;
row: T;
index?: number;
}
export interface QueryForParams {
[key: string]: unknown;
sortBy?: string;
sortType?: 'desc' | 'asc' | '';
}
export interface QueryForPaginationParams extends QueryForParams {
page?: number;
pageSize?: number;
}
export type sizeType = 'mini' | 'small' | 'medium' | 'large';
export interface AttributeData {
[key: string]: unknown;
}
export interface Pagination {
current: number;
pageSize: number;
total: number;
showTotal?: boolean;
showPageSize?: boolean;
pageSizeOptions?: number[];
}
export type SortType = 'descend' | 'ascend' | '' | string;
export interface Sort {
column: string;
type: SortType | string;
}
export interface GeneralChart {
xAxis: string[];
data: Array<{ name: string; value: number[] }>;
}
export interface HttpResponse<T = unknown> {
status: 'success' | 'fail' | 'error';
msg: string;
code: number;
data: T;
}
export interface ServiceResponse<T = unknown> extends HttpResponse<T> {
meta: { current: number; limit: number; total: number };
}
// eslint-disable-next-line import/no-cycle
import { Admin } from '@/types/admin';
import { User } from '@/types/user';
export interface Project {
id: number;
name: string;
user?: Admin;
master?: User;
status: number;
created_at?: string;
updated_at?: string;
up_count?: number;
down_count?: number;
finish_count?: number;
is_promote?: number;
is_official?: number;
is_can_apply?: number;
is_can_manage?: number;
is_can_demo_apply?: number;
head_cover: string;
cover: string;
intro: string;
managers_count?: number;
activities_count?: number;
send_count?: number;
managers?: Admin[];
}
import { AttributeData } from '@/types/global';
import { Business } from '@/types/business';
import { User } from '@/types/user';
export interface Singer extends User {
avatar: string;
remarks: string;
province: string;
city: string;
company: string;
rate: string;
is_subscribe?: 1 | 0;
role?: 'Singer';
audit_status?: number;
submit_activities_count?: number;
accept_activities_count?: number;
}
export interface UpdateAttribute extends AttributeData {
nick_name: string;
real_name: string;
phone: string;
business_id: number;
}
export interface SystemConfig {
id: number;
parent_id: number;
name: string;
content: string;
remark: string;
identifier: string;
children?: SystemConfig[];
}
export interface SystemPermission {
id: number;
name: string;
guard: 'Admin' | 'Manage';
type: 'Menu' | 'Button';
label: string;
icon: string;
parent_id: number;
weight: number;
parent?: SystemPermission;
children?: SystemPermission[];
created_at: string;
updated_at: string;
}
// eslint-disable-next-line import/no-cycle
import { Admin } from '@/types/admin';
export interface Tag {
id: number;
name: string;
type: number;
created_at: string;
updated_at: string;
user?: Admin;
}