Skip to content

PaoPao / manageWeb

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

Init

0 parents
Inline Side-by-side
Showing 161 changed files with 10234 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;
}
// eslint-disable-next-line import/no-cycle
import { Project } from '@/types/project';
// eslint-disable-next-line import/no-cycle
import { Tag } from '@/types/tag';
// eslint-disable-next-line import/no-cycle
import { Business } from '@/types/business';
export interface User {
id: number;
avatar?: string;
nick_name: string;
real_name: string;
phone: string;
email: string;
business_id: 0;
business?: Business;
province?: string;
city?: string;
role?: 'Singer' | 'Business' | 'ProjectUser' | 'SystemUser' | 'Admin';
remarks?: string;
like_activities_count?: number;
sound?: string;
status?: number;
last_login?: string;
created_at?: string;
updated_at?: string;
projects?: Project[];
tags?: Tag[];
styles?: Tag[];
voices?: Tag[];
skills?: Tag[];
identity: number;
[key: string]: unknown;
}
import RabbitLyrics from 'rabbit-lyrics';
import parseLyrics from 'rabbit-lyrics/src/parseLyrics';
// @ts-ignore
export default class AudioSyncLyric extends RabbitLyrics {
public startTime = 0;
public setStartTime(time: number) {
this.startTime = time || 0;
this.render();
this.mediaElement.addEventListener('timeupdate', this.synchronize);
}
private render(): void {
// Add class names
this.lyricsElement.classList.add('rabbit-lyrics');
this.lyricsElement.classList.add(`rabbit-lyrics--${this.viewMode}`);
this.lyricsElement.classList.add(`rabbit-lyrics--${this.alignment}`);
this.lyricsElement.textContent = null;
// Render lyrics lines
this.lyricsLines = parseLyrics(this.lyrics).map((line) => {
const lineElement = document.createElement('div');
lineElement.className = 'rabbit-lyrics__line';
lineElement.addEventListener('click', () => {
this.mediaElement.currentTime = line.startsAt - this.startTime;
this.synchronize();
});
const lineContent = line.content.map((inline) => {
const inlineElement = document.createElement('span');
inlineElement.className = 'rabbit-lyrics__inline';
inlineElement.textContent = inline.content;
lineElement.append(inlineElement);
return { ...inline, element: inlineElement };
});
this.lyricsElement.append(lineElement);
return { ...line, content: lineContent, element: lineElement };
});
this.synchronize();
}
private synchronize = () => {
const time = this.startTime + this.mediaElement.currentTime;
let changed = false; // If here are active lines changed
const activeLines = this.lyricsLines.filter((line) => {
if (time >= line.startsAt && time < line.endsAt) {
// If line should be active
if (!line.element.classList.contains('rabbit-lyrics__line--active')) {
// If it hasn't been activated
changed = true;
line.element.classList.add('rabbit-lyrics__line--active');
}
line.content.forEach((inline) => {
if (time >= inline.startsAt) {
inline.element.classList.add('rabbit-lyrics__inline--active');
} else {
inline.element.classList.remove('rabbit-lyrics__inline--active');
}
});
return true;
}
// If line should be inactive
if (line.element.classList.contains('rabbit-lyrics__line--active')) {
// If it hasn't been deactivated
changed = true;
line.element.classList.remove('rabbit-lyrics__line--active');
line.content.forEach((inline) => {
inline.element.classList.remove('rabbit-lyrics__inline--active');
});
}
return false;
});
if (changed && activeLines.length > 0) {
// Calculate scroll top. Vertically align active lines in middle
const activeLinesOffsetTop =
(activeLines[0].element.offsetTop +
activeLines[activeLines.length - 1].element.offsetTop +
activeLines[activeLines.length - 1].element.offsetHeight) /
2;
this.lyricsElement.scrollTop = activeLinesOffsetTop - this.lyricsElement.clientHeight / 2;
}
};
}
const isLogin = () => {
return !!localStorage.getItem('access_token');
};
const getToken = () => {
return localStorage.getItem('access_token') || localStorage.getItem('refresh_token');
};
const setToken = (access_token: string, refresh_token: string) => {
localStorage.setItem('access_token', access_token);
localStorage.setItem('refresh_token', refresh_token);
};
const getRefreshToken = () => {
return localStorage.getItem('refresh_token');
};
const clearToken = () => {
localStorage.removeItem('access_token');
localStorage.removeItem('refresh_token');
};
export { isLogin, getToken, setToken, getRefreshToken, clearToken };
import { AnyObject } from '@/types/global';
import { createVNode, Ref, VNode } from 'vue';
import { CheckboxGroup, Form, FormItem, Input, InputNumber, Modal, Select, Textarea } from '@arco-design/web-vue';
import InputUpload from '@/components/input-upload/index.vue';
import ImageUpload from '@/components/image-upload/index.vue';
import { RenderContent } from '@arco-design/web-vue/es/_utils/types';
import { ModalConfig } from '@arco-design/web-vue/es/modal/interface';
export function createSelectVNode(value: Ref, options: AnyObject[], props?: AnyObject): VNode {
return createVNode(Select, {
options,
'modelValue': value.value,
'placeholder': '请选择',
'onUpdate:modelValue': (val?: unknown) => {
value.value = val;
},
...props,
});
}
export function createInputVNode(value: Ref, props?: AnyObject): VNode {
return createVNode(Input, {
'modelValue': value.value,
'placeholder': '请输入',
'onUpdate:modelValue': (val?: string) => {
value.value = val || '';
},
...props,
});
}
export function createInputNumberVNode(value: Ref, props?: AnyObject): VNode {
return createVNode(InputNumber, {
'min': 0,
'max': 200,
'step': 1,
'modelValue': value.value,
'onUpdate:modelValue': (val?: number) => {
value.value = val || 0;
},
...props,
});
}
export function createTextareaVNode(value: Ref, props?: AnyObject): VNode {
return createVNode(Textarea, {
'modelValue': value.value,
'maxLength': 200,
'showWordLimit': true,
'autoSize': { minRows: 4, maxRows: 4 },
'placeholder': '请选择',
'onUpdate:modelValue': (val?: string) => {
value.value = val;
},
...props,
});
}
export function createInputUploadVNode(value: Ref, props?: AnyObject) {
return createVNode(InputUpload, {
'modelValue': value.value,
'onUpdate:modelValue': (val?: string) => {
value.value = val;
},
...props,
});
}
export function createImageUploadVNode(value: Ref, props?: AnyObject) {
return createVNode(ImageUpload, {
'size': 100,
'modelValue': value.value,
'onUpdate:modelValue': (val?: string) => {
value.value = val;
},
...props,
});
}
export function createCheckboxGroupVNode(value: unknown, options?: AnyObject[], props?: AnyObject) {
return createVNode(CheckboxGroup, {
'modelValue': value,
'onUpdate:modelValue': (val?: string) => {
value = val;
},
options,
...props,
});
}
export function createFormVNode(props?: AnyObject, children?: VNode | VNode[] | undefined): VNode {
return createVNode(Form, { autoLabelWidth: true, ...props }, () => children);
}
export function createFormItemVNode(props?: AnyObject, children?: string | VNode | VNode[]): VNode {
return createVNode(FormItem, { showColon: true, ...props }, () => children);
}
export function createSelectionFormItemVNode(value: Ref, options: AnyObject[], itemProps?: AnyObject, props?: AnyObject): VNode {
return createFormItemVNode(itemProps, createSelectVNode(value, options, props));
}
export function createImageFormItemVNode(value: Ref, itemProps?: AnyObject, props?: AnyObject): VNode {
return createFormItemVNode(itemProps, createImageUploadVNode(value, props));
}
export function createInputFormItemVNode(value: Ref, itemProps?: AnyObject, props?: AnyObject): VNode {
return createFormItemVNode(itemProps, createInputVNode(value, props));
}
export function createInputNumberFormItemVNode(value: Ref, itemProps?: AnyObject, props?: AnyObject): VNode {
return createFormItemVNode(itemProps, createInputNumberVNode(value, props));
}
export function createTextareaFormItemVNode(value: Ref, itemProps?: AnyObject, props?: AnyObject) {
return createFormItemVNode(itemProps, createTextareaVNode(value, props));
}
export function createInputUploadFormItemVNode(value: Ref, itemProps?: AnyObject, props?: AnyObject) {
return createFormItemVNode(itemProps, createInputUploadVNode(value, props));
}
export function createCheckboxGroupFormItemVNode(value: Ref, options?: AnyObject[], itemProps?: AnyObject, props?: AnyObject) {
return createFormItemVNode(itemProps, createCheckboxGroupVNode(value, options, props));
}
export function createModalVNode(content: RenderContent, props?: Omit<ModalConfig, 'content'> & { bodyStyle?: object }) {
return Modal.open({ content, titleAlign: 'center', closable: false, escToClose: false, maskClosable: false, ...props });
}
export const debug = process.env.VITE_ENV !== 'production';
export const ossConfig = {
accessKeyId: process.env.VITE_OSS_ACCESS_KEY as string,
accessKeySecret: process.env.VITE_OSS_ACCESS_SECRET as string,
bucket: process.env.VITE_OSS_BUCKET,
region: process.env.VITE_OSS_REGION,
host: process.env.VITE_OSS_HOST,
endpoint: process.env.VITE_OSS_ENDPOINT,
};
export const apiHost = process.env.VITE_API_HOST;
export const showLoginAccount = process.env.VITE_SHOW_LOGIN_ACCOUNT;
export const isProduction = process.env.VITE_ENV === 'production';
import { compact } from 'lodash';
const opt = Object.prototype.toString;
export const bytesForHuman = (bytes: number, decimals = 2) => {
const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB'];
let i = 0;
// eslint-disable-next-line no-plusplus
for (i; bytes > 1024; i++) {
bytes /= 1024;
}
return `${parseFloat(bytes.toFixed(decimals))} ${units[i]}`;
};
export const audioBufferToWav = (audioBuffer: AudioBuffer, len: number) => {
const numOfChan = audioBuffer.numberOfChannels;
const length = len * numOfChan * 2 + 44;
const buffer = new ArrayBuffer(length);
const view = new DataView(buffer);
const channels = [];
let i;
let sample;
let offset = 0;
let pos = 0;
// write WAVE header
// eslint-disable-next-line no-use-before-define
setUint32(0x46464952); // "RIFF"
// eslint-disable-next-line no-use-before-define
setUint32(length - 8); // file length - 8
// eslint-disable-next-line no-use-before-define
setUint32(0x45564157); // "WAVE"
// eslint-disable-next-line no-use-before-define
setUint32(0x20746d66); // "fmt " chunk
// eslint-disable-next-line no-use-before-define
setUint32(16); // length = 16
// eslint-disable-next-line no-use-before-define
setUint16(1); // PCM (uncompressed)
// eslint-disable-next-line no-use-before-define
setUint16(numOfChan);
// eslint-disable-next-line no-use-before-define
setUint32(audioBuffer.sampleRate);
// eslint-disable-next-line no-use-before-define
setUint32(audioBuffer.sampleRate * 2 * numOfChan); // avg. bytes/sec
// eslint-disable-next-line no-use-before-define
setUint16(numOfChan * 2); // block-align
// eslint-disable-next-line no-use-before-define
setUint16(16); // 16-bit (hardcoded in this demo)
// eslint-disable-next-line no-use-before-define
setUint32(0x61746164); // "data" - chunk
// eslint-disable-next-line no-use-before-define
setUint32(length - pos - 4); // chunk length
// write interleaved data
// eslint-disable-next-line no-plusplus
for (i = 0; i < audioBuffer.numberOfChannels; i++) channels.push(audioBuffer.getChannelData(i));
while (pos < length) {
// eslint-disable-next-line no-plusplus
for (i = 0; i < numOfChan; i++) {
// interleave channels
sample = Math.max(-1, Math.min(1, channels[i][offset])); // clamp
// eslint-disable-next-line no-bitwise
sample = (0.5 + sample < 0 ? sample * 32768 : sample * 32767) | 0; // scale to 16-bit signed int
view.setInt16(pos, sample, true); // write 16-bit sample
pos += 2;
}
// eslint-disable-next-line no-plusplus
offset++; // next source sample
}
// create Blob
return new Blob([buffer], { type: 'audio/wav' });
function setUint16(data: number) {
view.setUint16(pos, data, true);
pos += 2;
}
function setUint32(data: number) {
view.setUint32(pos, data, true);
pos += 4;
}
};
export const getLyricTimeArr = (lyric: string): string[] => {
const times: string[] = [];
lyric?.split('\n').forEach((item) => {
item = item.replace(/(^\s*)|(\s*$)/g, '');
times.push(item.substring(item.indexOf('[') + 1, item.indexOf(']')));
});
return compact(times);
};
export function isUndefined(obj: any): obj is undefined {
return obj === undefined;
}
export function isString(obj: any): obj is string {
return opt.call(obj) === '[object String]';
}
export const promiseToBoolean = (callback: Promise<any>) => callback.then(() => true).catch(() => false);
import { App, ComponentPublicInstance } from 'vue';
import axios from 'axios';
export default function handleError(Vue: App, baseUrl: string) {
if (!baseUrl) {
return;
}
Vue.config.errorHandler = (
err: unknown,
instance: ComponentPublicInstance | null,
info: string
) => {
// send error info
axios.post(`${baseUrl}/report-error`, {
err,
instance,
info,
// location: window.location.href,
// message: err.message,
// stack: err.stack,
// browserInfo: getBrowserInfo(),
// user info
// dom info
// url info
// ...
});
};
}
<script setup lang="ts">
import { Space } from '@arco-design/web-vue';
import { computed, onMounted, ref } from 'vue';
import axios from 'axios';
import { audioBufferToWav } from '@/utils';
import AudioSyncLyric from '@/utils/audioSyncLyric';
const props = defineProps<{
src: string | File | ArrayBuffer;
lyric: string;
startWithLyric?: boolean;
startTime?: string;
endTime?: string;
}>();
const audioRef = ref();
const lyricRef = ref();
const source = ref();
const onPay = (e: any) => {
const audios = document.getElementsByTagName('audio');
[].forEach.call(audios, (i: HTMLAudioElement) => i !== e.target && i.pause());
};
const convertDurationToSeconds = (duration: string) => {
const timeArray = duration.split(':'); // 将时间字符串拆分为时、分、秒的数组
switch (timeArray.length) {
case 1:
return parseFloat(timeArray[0]);
case 2:
return parseInt(timeArray[0], 10) * 60 + parseFloat(timeArray[1]);
case 3:
return parseInt(timeArray[0], 10) * 3600 + parseInt(timeArray[1], 10) * 60 + parseFloat(timeArray[2]);
default:
return 0;
}
};
const startTime = computed((): number => convertDurationToSeconds(props.startTime ?? '00:00.00'));
const endTime = computed((): number | undefined => (props.endTime ? convertDurationToSeconds(props.endTime) : undefined));
const getResult = async (): Promise<ArrayBuffer> => {
if (props.src instanceof Blob) {
return props.src.arrayBuffer();
}
if (props.src instanceof ArrayBuffer) {
return Promise.resolve(props.src);
}
return axios
.get(`${props.src}?response-content-type=Blob`, { responseType: 'blob', timeout: 60000 })
.then(({ data }) => Promise.resolve(data.arrayBuffer()));
};
onMounted(async () => {
// eslint-disable-next-line no-new
new AudioSyncLyric(lyricRef.value, audioRef.value).setStartTime(startTime.value);
const result: ArrayBuffer = await getResult();
const audioCtx = new AudioContext();
const audioBuffer = await audioCtx.decodeAudioData(result);
const { numberOfChannels, sampleRate, duration } = audioBuffer;
const start = startTime.value; // 从第几秒开始复制
const end = endTime.value || duration; // 复制到第几秒结束
// eslint-disable-next-line no-bitwise
const startOffset = (start * sampleRate) >> 0; // 起始位置 = 开始时间 * 采样率
// eslint-disable-next-line no-bitwise
const endOffset = (end * sampleRate) >> 0; // 结束位置 = 结束时间 * 采样率
const frameCount = endOffset - startOffset; // 音频帧数/长度 = 结束位置 - 起始位置
const newAudioBuffer = audioCtx.createBuffer(numberOfChannels, frameCount, sampleRate);
// eslint-disable-next-line no-plusplus
for (let i = 0; i < numberOfChannels; i++) {
newAudioBuffer.getChannelData(i).set(audioBuffer.getChannelData(i).slice(startOffset, endOffset));
}
const blob = audioBufferToWav(newAudioBuffer, frameCount);
source.value = URL.createObjectURL(blob);
});
</script>
<template>
<Space direction="vertical" fill>
<audio ref="audioRef" :src="source" class="audio" controls controlsList="nodownload noplaybackrate" @play="onPay" />
<div ref="lyricRef" class="lyric">{{ lyric }}</div>
</Space>
</template>
<style scoped lang="less">
.audio {
height: 30px;
width: 100%;
outline: none;
}
.lyric {
border: none !important;
background-color: #f7f8fa;
:deep(.rabbit-lyrics__line) {
padding: 0.3em 1em !important;
}
:deep(.rabbit-lyrics__inline) {
color: #818181;
}
:deep(.rabbit-lyrics__inline.rabbit-lyrics__inline--active) {
font-size: 16px;
font-weight: 500;
color: black;
}
}
</style>
<template>
<Layout>
<Layout has-sider>
<LayoutSider :width="140" class="aside">
<Steps :current="currentStep" direction="vertical">
<Step v-for="item in stepItems" :key="item.value">{{ item.label }}</Step>
</Steps>
</LayoutSider>
<LayoutContent class="main">
<component :is="currentContent" ref="formRef" v-model="formValue" :loading="loading" :filter-project="filterProject" />
</LayoutContent>
</Layout>
<LayoutFooter>
<Divider style="margin-top: 8px; margin-bottom: 20px" />
<Link :href="useSelectionStore().lyricTool" :hoverable="false" class="link-hover" icon>歌词制作工具</Link>
<Space style="float: right">
<IconButton v-show="currentStep !== 1" icon="left" label="上一步" @click="onPrev" />
<IconButton icon="right" icon-align="right" :loading="loading" :label="nextBtnLabel" @click="onNext" />
</Space>
</LayoutFooter>
</Layout>
</template>
<script setup lang="ts">
import { Layout, LayoutSider, LayoutContent, LayoutFooter, Step, Steps, Space, Divider, Link } from '@arco-design/web-vue';
import { computed, markRaw, ref } from 'vue';
import Step1FormContent from '@/views/audition/activity-apply/components/step1-form-content.vue';
import Step2FormContent from '@/views/audition/activity-apply/components/step2-form-content.vue';
import Step3FormContent from '@/views/audition/activity-apply/components/step3-form-content.vue';
import IconButton from '@/components/icon-button/index.vue';
import { useSelectionStore } from '@/store';
import { AnyObject } from '@/types/global';
import useLoading from '@/hooks/loading';
import { cloneDeep } from 'lodash';
const props = defineProps<{
initValue?: AnyObject;
filterProject?: (value: unknown) => boolean;
onSubmit: (data: AnyObject) => Promise<any>;
}>();
const { loading, setLoading } = useLoading(false);
const formRef = ref();
const formValue = ref({ ...cloneDeep(props.initValue) });
const stepItems = [
{ value: 1, label: '基本信息', template: markRaw(Step1FormContent) },
{ value: 2, label: '补充信息', template: markRaw(Step2FormContent) },
{ value: 3, label: '上传文件', template: markRaw(Step3FormContent) },
];
const currentStep = ref(1);
const currentContent = computed(() => stepItems.find((item) => item.value === currentStep.value)?.template);
const nextBtnLabel = computed(() => (currentStep.value === 3 ? '提交' : '下一步'));
const onPrev = (): void => {
currentStep.value = Math.max(1, currentStep.value - 1);
};
const onNext = () => {
formRef.value.onValid(async () => {
if (currentStep.value === stepItems.length) {
setLoading(true);
props.onSubmit(formValue.value).finally(() => setLoading(false));
}
currentStep.value = Math.min(stepItems.length, currentStep.value + 1);
});
};
</script>
<style scoped lang="less">
.aside {
box-shadow: unset !important;
border-right: 1px solid var(--color-border);
margin-right: 20px;
background-color: transparent;
}
.main {
min-width: 640px;
}
</style>
<script setup lang="ts">
import { Form, FormItem, Input, Message, Select } from '@arco-design/web-vue';
import { computed, ref } from 'vue';
import AvatarUpload from '@/components/avatar-upload/index.vue';
import { FieldRule, FormInstance } from '@arco-design/web-vue/es/form';
import { useSelectionStore } from '@/store';
import { get, set } from 'lodash';
import { useVModels } from '@vueuse/core';
const props = withDefaults(defineProps<{ loading?: boolean; modelValue?: any; filterProject?: (value: any) => boolean }>(), {
filterProject: () => true,
});
const emits = defineEmits(['update:modelValue', 'update:loading']);
const formRef = ref<FormInstance>();
const { modelValue: formValue } = useVModels(props, emits);
const formRule = {
'cover': [{ type: 'string', required: true, message: '请上传活动封面' }],
'song_name': [{ type: 'string', required: true, message: '请输入歌曲名称' }],
'sub_title': [{ type: 'string', required: true, message: '请输入简介' }],
'expand.tag_ids': [
{ type: 'array', required: true, message: '请选择关联标签' },
{ type: 'array', maxLength: 3, message: '关联标签最多选中3个' },
],
'lang': [
{ type: 'string', required: true, message: '请选择语种' },
{ type: 'array', maxLength: 2, message: '语种最多选中2个' },
],
'speed': [{ type: 'string', required: true, message: '请选择语速' }],
'project_id': [{ type: 'number', min: 1, required: true, message: '请选择关联厂牌' }],
} as Record<string, FieldRule[]>;
const tagIds = computed({
get: () => get(formValue.value, 'expand.tag_ids', []),
set: (val) => set(formValue.value, 'expand.tag_ids', val),
});
const { activityTagOptions, activityLangOptions, activitySpeedOptions, projectOptions } = useSelectionStore();
const onTagExceedLimitError = (content: string, duration = 1000) => Message.warning({ content, duration });
defineExpose({
onValid: (callback?: () => void) => formRef.value?.validate((errors) => !errors && callback?.()),
});
</script>
<template>
<Form ref="formRef" :model="formValue" :rules="formRule" :auto-label-width="true">
<FormItem label="封面图片" field="cover" :show-colon="true">
<AvatarUpload v-model="formValue.cover" :size="100" shape="square" />
</FormItem>
<FormItem label="歌曲名称" field="song_name" :show-colon="true">
<Input v-model="formValue.song_name" :max-length="100" :show-word-limit="true" placeholder="请输入" />
</FormItem>
<FormItem label="曲风标签" field="expand.tag_ids" :show-colon="true">
<Select
v-model="tagIds"
:options="activityTagOptions"
:limit="3"
:field-names="{ value: 'id', label: 'name' }"
:fallback-option="false"
:virtual-list-props="{ height: 200 }"
:multiple="true"
placeholder="请选择"
@exceed-limit="onTagExceedLimitError('关联标签最多选中3个')"
/>
</FormItem>
<FormItem label="歌曲语种" field="lang" :show-colon="true">
<Select
v-model="formValue.lang"
:options="activityLangOptions"
:limit="2"
:field-names="{ value: 'identifier', label: 'name' }"
:fallback-option="false"
:multiple="true"
placeholder="请选择"
@exceed-limit="onTagExceedLimitError('关联语种最多选中2个')"
/>
</FormItem>
<FormItem label="歌曲速度" field="speed" :show-colon="true">
<Select
v-model="formValue.speed"
:options="activitySpeedOptions"
:field-names="{ value: 'identifier', label: 'name' }"
:fallback-option="false"
placeholder="请选择"
/>
</FormItem>
<FormItem label="歌曲简介" field="sub_title" :show-colon="true">
<Input v-model.trim="formValue.sub_title" :max-length="20" :show-word-limit="true" placeholder="举例：影视OST歌曲，急寻歌手" />
</FormItem>
<FormItem label="关联厂牌" field="project_id" :show-colon="true">
<Select
v-model="formValue.project_id"
:options="projectOptions.filter((item) => filterProject(item))"
:field-names="{ value: 'id', label: 'name' }"
:fallback-option="false"
:allow-search="true"
placeholder="请选择"
/>
</FormItem>
</Form>
</template>
<style scoped lang="less"></style>
<script setup lang="ts">
import { DatePicker, Form, FormItem, InputTag, Select } from '@arco-design/web-vue';
import { ref, computed } from 'vue';
import { FieldRule, FormInstance } from '@arco-design/web-vue/es/form';
import { useVModels } from '@vueuse/core';
import { useSelectionStore } from '@/store';
import { get, set } from 'lodash';
import UserSelect from '@/components/user-select/index.vue';
const props = defineProps<{ loading?: boolean; modelValue?: any }>();
const emits = defineEmits(['update:modelValue', 'update:loading']);
const formRef = ref<FormInstance>();
const { modelValue: formValue } = useVModels(props, emits);
const { activitySexOptions } = useSelectionStore();
const lyricistIds = computed({
get: () => get(formValue.value, 'expand.lyricist.ids', []),
set: (val) => set(formValue.value, 'expand.lyricist.ids', val),
});
const lyricistSupplement = computed({
get: () => get(formValue.value, 'expand.lyricist.supplement', []),
set: (val) => set(formValue.value, 'expand.lyricist.supplement', val),
});
const composerIds = computed({
get: () => get(formValue.value, 'expand.composer.ids', []),
set: (val) => set(formValue.value, 'expand.composer.ids', val),
});
const composerSupplement = computed({
get: () => get(formValue.value, 'expand.composer.supplement', []),
set: (val) => set(formValue.value, 'expand.composer.supplement', val),
});
const arrangerIds = computed({
get: () => get(formValue.value, 'expand.arranger.ids', []),
set: (val) => set(formValue.value, 'expand.arranger.ids', val),
});
const arrangerSupplement = computed({
get: () => get(formValue.value, 'expand.arranger.supplement', []),
set: (val) => set(formValue.value, 'expand.arranger.supplement', val),
});
const checkMaxUser = (value: any, cb: (error?: string) => void) => (value && value.length > 2 ? cb('最大选择2人') : {});
const checkNeedOne = (value: any, cb: (error?: string) => void, condition: boolean, message: string) => {
checkMaxUser(value, cb);
if (condition) {
cb(message);
}
};
const formRule = {
'sex': [{ required: true, message: '请选择性别要求' }],
'expand.lyricist.supplement': [
{
type: 'array',
validator: (value, cb) =>
checkNeedOne(
value,
cb,
lyricistIds.value.length === 0 && lyricistSupplement.value.length === 0,
'词作者(用户)或词作者(未注册)，必填一个'
),
},
],
'expand.composer.supplement': [
{
type: 'array',
validator: (value, cb) =>
checkNeedOne(
value,
cb,
composerIds.value.length === 0 && composerSupplement.value.length === 0,
'曲作者(用户)或曲作者(未注册)，必填一个'
),
},
],
'expand.arranger.supplement': [
{
type: 'array',
validator: (value, cb) =>
checkNeedOne(
value,
cb,
arrangerIds.value.length === 0 && arrangerSupplement.value.length === 0,
'编曲(用户)或编曲(未注册)，必填一个'
),
},
],
'estimate_release_at': [{ required: true, message: '请选择预计发布时间' }],
} as Record<string, FieldRule[]>;
defineExpose({
onValid: (callback?: () => void) => formRef.value?.validate((errors) => !errors && callback?.()),
});
</script>
<template>
<Form ref="formRef" :model="formValue" :rules="formRule" :auto-label-width="true">
<FormItem label="词作者(用户)" field="expand.lyricist.ids" :show-colon="true">
<UserSelect v-model="lyricistIds" placeholder="请选择用户" :limit="2" />
</FormItem>
<FormItem label="词作者(未注册)" field="expand.lyricist.supplement" :show-colon="true">
<InputTag v-model="lyricistSupplement" placeholder="输入完成回车键分隔" :max-tag-count="2" :unique-value="true" />
<template #extra>
<div>注意：上方填1项即可，歌曲信息中【用户】可点击跳转用户主页，【未注册】仅显示；</div>
</template>
</FormItem>
<FormItem label="曲作者(用户)" field="expand.composer.ids" :show-colon="true">
<UserSelect v-model="composerIds" placeholder="请选择用户" :limit="2" />
</FormItem>
<FormItem label="曲作者(未注册)" field="expand.composer.supplement" :show-colon="true">
<InputTag v-model="composerSupplement" placeholder="输入完成回车键分隔" :max-tag-count="2" :unique-value="true" />
<template #extra>
<div>注意：上方填1项即可，歌曲信息中【用户】可点击跳转用户主页，【未注册】仅显示；</div>
</template>
</FormItem>
<FormItem label="编曲(用户)" field="expand.arranger.ids" :show-colon="true">
<UserSelect v-model="arrangerIds" placeholder="请选择用户" :limit="2" />
</FormItem>
<FormItem label="编曲(未注册)" field="expand.arranger.supplement" :show-colon="true">
<InputTag v-model="arrangerSupplement" placeholder="输入完成回车键分隔" :max-tag-count="2" :unique-value="true" />
<template #extra>
<div>注意：上方填1项即可，歌曲信息中【用户】可点击跳转用户主页，【未注册】仅显示；</div>
</template>
</FormItem>
<FormItem label="性别要求" field="sex" :show-colon="true">
<Select
v-model="formValue.sex"
:options="activitySexOptions"
:field-names="{ value: 'identifier', label: 'name' }"
:fallback-option="false"
placeholder="请选择"
/>
</FormItem>
<FormItem label="预计发行日期" field="estimate_release_at" :show-colon="true">
<DatePicker
v-model="formValue.estimate_release_at"
placeholder="请选择"
style="width: 100%"
:show-now-btn="false"
:allow-clear="false"
/>
</FormItem>
</Form>
</template>
<style scoped lang="less"></style>
<script setup lang="ts">
import { ref, computed, createVNode } from 'vue';
import { FieldRule, FormInstance } from '@arco-design/web-vue/es/form';
import { useVModels } from '@vueuse/core';
import { Form, FormItem, Link, Textarea } from '@arco-design/web-vue';
import InputUpload from '@/components/input-upload/index.vue';
import { useSelectionStore } from '@/store';
import { first, get, last, set } from 'lodash';
import { bytesForHuman, getLyricTimeArr } from '@/utils';
import useAuthApi from '@/api/auth';
import axios from 'axios';
import AudioPreview from '@/views/audition/activity-apply/components/audio-preview.vue';
import AudioPlayer from '@/components/audio-player/index.vue';
import { createModalVNode } from '@/utils/createVNode';
const props = defineProps<{ loading?: boolean; modelValue?: any }>();
const emits = defineEmits(['update:modelValue', 'update:loading']);
const formRef = ref<FormInstance>();
const { loading, modelValue: formValue } = useVModels(props, emits);
const guideSourceUrl = computed({
get: () => get(formValue.value, 'expand.guide_source.url', ''),
set: (val) => set(formValue.value, 'expand.guide_source.url', val),
});
const karaokeSourceUrl = computed({
get: () => get(formValue.value, 'expand.karaoke_source.url', ''),
set: (val) => set(formValue.value, 'expand.karaoke_source.url', val),
});
const trackSourceUrl = computed({
get: () => get(formValue.value, 'expand.track_source.url', ''),
set: (val) => set(formValue.value, 'expand.track_source.url', val),
});
const trackSourceName = computed(() => get(formValue.value, 'expand.track_source.name', ''));
const trackSourceSize = computed((): number => get(formValue.value, 'expand.track_source.size', 0));
const fullLyricTime = computed(() => getLyricTimeArr(formValue.value.lyric));
const clipLyricTime = computed(() => getLyricTimeArr(formValue.value.clip_lyric));
const checkClip = computed(
() => clipLyricTime.value.length !== 0 && fullLyricTime.value.toString().indexOf(clipLyricTime.value.toString()) !== -1
);
const onUpdateGuide = (file: { name: string; url: string; size: number }) => {
set(formValue.value, 'expand.guide_source', { name: file.name, url: file.url, size: file.size });
};
const onUpdateKaraoke = (file: { name: string; url: string; size: number }) => {
set(formValue.value, 'expand.karaoke_source', { name: file.name, url: file.url, size: file.size });
};
const onUpdateTrack = (file: { name: string; url: string; size: number }) => {
set(formValue.value, 'expand.track_source', { name: file.name, url: file.url, size: file.size });
};
const { activityAudioAccept, activityTrackAccept } = useSelectionStore();
const formRule = {
'expand.guide_source.url': [{ required: true, message: '请上传导唱文件' }],
'expand.karaoke_source.url': [{ required: true, message: '请上传伴奏文件' }],
'lyric': [
{ type: 'string', required: true, message: '请填写歌词内容' },
{
type: 'string',
validator: (value: any, cb: (error?: string) => void) => (fullLyricTime.value.length === 0 ? cb('歌词文本格式不正确') : {}),
},
],
'clip_lyric': [
{ type: 'string', required: true, message: '请填写推荐歌词内容' },
{ type: 'string', validator: (value: any, cb: (error?: string) => void) => (checkClip.value ? {} : cb('推荐片段不在歌词中')) },
],
} as Record<string, FieldRule[]>;
const onDownload = (url: string, fileName: string) => useAuthApi.downloadFile(url, `${formValue.value.song_name}(${fileName})`);
const guideFile = ref<File | undefined>();
const getGuideFile = async () => {
if (!guideFile.value) {
guideFile.value = await axios
.get(`${guideSourceUrl.value}`, { responseType: 'blob', timeout: 60000 })
.then(({ data }) => Promise.resolve(data));
}
return guideFile.value;
};
const onAudioPreview = async () => {
const src = await getGuideFile();
createModalVNode(() => createVNode(AudioPreview, { src, lyric: formValue.value.lyric }), {
title: '预览歌词-整首',
footer: false,
closable: true,
});
};
const onAudioClipPreview = async () => {
const src = await getGuideFile();
const startTime = first(clipLyricTime.value) as string;
const fullEndIndex = fullLyricTime.value.indexOf(last(clipLyricTime.value) as string);
const endTime = fullEndIndex === -1 ? undefined : fullLyricTime.value[fullEndIndex + 1] || undefined;
createModalVNode(() => createVNode(AudioPreview, { src, lyric: formValue.value.clip_lyric, startTime, endTime }), {
title: '预览歌词-片段',
footer: false,
closable: true,
});
};
defineExpose({
onValid: (callback?: () => void) => formRef.value?.validate((errors) => !errors && callback?.()),
});
</script>
<template>
<Form ref="formRef" :model="formValue" :rules="formRule" :auto-label-width="true">
<FormItem label="导唱文件(带伴奏)" field="expand.guide_source.url" :show-colon="true">
<InputUpload
v-model="guideSourceUrl"
:accept="activityAudioAccept"
:limit="100"
@success="onUpdateGuide"
@choose-file="(file) => (guideFile = file)"
@update:loading="(value) => (loading = value)"
/>
</FormItem>
<FormItem v-if="guideSourceUrl">
<template #label>
<Link icon @click="onDownload(guideSourceUrl, '导唱文件')">下载导唱</Link>
</template>
<AudioPlayer name="导唱文件" :url="guideSourceUrl" />
</FormItem>
<FormItem label="伴奏文件" field="expand.karaoke_source.url" :show-colon="true">
<InputUpload
v-model="karaokeSourceUrl"
:accept="activityAudioAccept"
:limit="100"
@success="onUpdateKaraoke"
@update:loading="(value) => (loading = value)"
/>
</FormItem>
<FormItem v-if="karaokeSourceUrl">
<template #label>
<Link icon @click="onDownload(karaokeSourceUrl, '伴奏文件')">下载伴奏</Link>
</template>
<AudioPlayer name="伴奏文件" :url="karaokeSourceUrl" />
</FormItem>
<FormItem label="分轨文件" :show-colon="true">
<InputUpload v-model="trackSourceUrl" :accept="activityTrackAccept" @success="onUpdateTrack" />
</FormItem>
<FormItem v-if="trackSourceUrl">
<template #label>
<Link icon @click="onDownload(karaokeSourceUrl, '分轨文件')">下载分轨文件</Link>
</template>
{{ trackSourceName }} {{ bytesForHuman(trackSourceSize) }}
</FormItem>
<FormItem class="lyric" label="歌词文本" field="lyric" :show-colon="true">
<Textarea
v-model="formValue.lyric"
:auto-size="{ minRows: 6, maxRows: 6 }"
placeholder="请粘贴带时间的lrc歌词文本至输入框"
@blur="() => (formValue.lyric = formValue.lyric?.replace(/(\n[\s\t]*\r*\n)/g, '\n').replace(/^[\n\r\t]*|[\n\r\t]*$/g, ''))"
/>
<template #extra>
<Link :hoverable="false" :disabled="!guideSourceUrl || !formValue.lyric" @click="onAudioPreview()"> 预览歌词</Link>
</template>
</FormItem>
<FormItem class="lyric" label="片段歌词" field="clip_lyric" :show-colon="true">
<Textarea
v-model="formValue.clip_lyric"
:auto-size="{ minRows: 6, maxRows: 6 }"
placeholder="请粘贴带时间的lrc歌词文本至输入框"
@blur="
() => (formValue.clip_lyric = formValue.clip_lyric?.replace(/(\n[\s\t]*\r*\n)/g, '\n').replace(/^[\n\r\t]*|[\n\r\t]*$/g, ''))
"
/>
<template #extra>
<Link :hoverable="false" :disabled="!guideSourceUrl || !checkClip" @click="onAudioClipPreview()"> 预览歌词</Link>
</template>
</FormItem>
</Form>
</template>
<style scoped lang="less">
.lyric {
:deep(.arco-form-item-extra) {
width: 100%;
text-align: right;
}
}
</style>
<template>
<page-view has-card has-bread>
<filter-search :loading="loading" @search="onSearch" @reset="onReset">
<filter-search-item label="歌曲名称">
<a-input v-model="filter.songName" :allow-clear="true" placeholder="请输入搜索歌曲名称" />
</filter-search-item>
<filter-search-item label="厂牌名称">
<a-input v-model="filter.projectName" :allow-clear="true" placeholder="请输入搜索厂牌名称" />
</filter-search-item>
<filter-search-item label="标签名称">
<a-input v-model="filter.tagName" :allow-clear="true" placeholder="请输入搜索标签名称" />
</filter-search-item>
<filter-search-item label="创建人">
<a-input v-model="filter.userName" :allow-clear="true" placeholder="请输入搜索创建人名称" />
</filter-search-item>
<filter-search-item label="创建时间">
<a-range-picker v-model="filter.createBetween" :allow-clear="true" />
</filter-search-item>
<filter-search-item label="状态">
<a-select v-model.number="filter.auditStatus" :options="useApply.auditStatusOption" placeholder="请选择搜索审核状态" />
</filter-search-item>
</filter-search>
<filter-table ref="tableRef" :loading="loading" :on-query="onQuery" @row-sort="onSort">
<template #tool="{ size }">
<a-button v-if="canCreate" :size="size" type="primary" @click="handleCreate">歌曲上架</a-button>
</template>
<activity-table-column :width="540" data-index="id" title="歌曲" />
<user-table-column :width="180" data-index="user_id" title="创建人" user="user" />
<date-table-column :width="120" data-index="created_at" title="创建时间" split />
<enum-table-column :width="120" data-index="audit_status" title="状态" :option="useApply.auditStatusOption" />
<space-table-column :width="80" data-index="operations" title="操作" direction="vertical">
<template #default="{ record }">
<span v-if="record.audit_status === 0" style="color: rgba(44, 44, 44, 0.5)">无</span>
<template v-else>
<a-link class="link-hover" :hoverable="false" @click="handleUpdate(record)">编辑</a-link>
<a-link class="link-hover" :hoverable="false" @click="handleDelete(record)">删除</a-link>
</template>
</template>
</space-table-column>
</filter-table>
</page-view>
</template>
<script lang="ts" name="audition-apply" setup>
import useLoading from '@/hooks/loading';
import { computed, createVNode, onActivated, ref } from 'vue';
import { AnyObject, QueryForParams } from '@/types/global';
import { useApply } from '@/api/activity';
import FilterTable from '@/components/filter/table.vue';
import UserTableColumn from '@/components/filter/user-table-column.vue';
import EnumTableColumn from '@/components/filter/enum-table-column.vue';
import SpaceTableColumn from '@/components/filter/space-table-column.vue';
import DateTableColumn from '@/components/filter/date-table-column.vue';
import ActivityTableColumn from '@/components/filter/activity-table-column.vue';
import { Message, Table, TableData, TabPane, Tabs } from '@arco-design/web-vue';
import { useRouteQuery } from '@vueuse/router';
import { useRoute } from 'vue-router';
import { createModalVNode } from '@/utils/createVNode';
import { promiseToBoolean } from '@/utils';
import FormContent from '@/views/audition/activity-apply/components/form-content.vue';
import { Project } from '@/types/project';
import { useSelectionStore } from '@/store';
const { loading, setLoading } = useLoading(false);
const tableRef = ref();
const filter = ref<AnyObject>({});
const canCreate = computed(() => useSelectionStore().projectOptions.findIndex((item) => item.is_can_apply === 1) !== -1);
const queryParams = computed(() => {
return {
...filter.value,
createdForm: 0,
songType: 1,
setColumn: [
'id',
'song_name',
'cover',
'lang',
'speed',
'sub_title',
'sex',
'user_id',
'project_id',
'lyric',
'clip_lyric',
'expand',
'audit_status',
'created_at',
'estimate_release_at',
],
setWith: [
'project:id,name',
'user:id,real_name,nick_name,role',
'tags:id,name',
'applyRecords:id,activity_id,current,audit_msg,created_at',
],
} as QueryForParams;
});
const onQuery = async (params: AnyObject): Promise<any> => {
setLoading(true);
return useApply.get({ ...queryParams.value, ...params }).finally(() => setLoading(false));
};
const onSearch = () => tableRef.value?.onPageChange();
const initAuditStatus = useRouteQuery('auditStatus', '');
const onReset = (initParams: AnyObject) => {
filter.value = {
songName: '',
projectName: '',
tagName: '',
userName: '',
auditStatus: '',
createBetween: [],
...initParams,
setSort: ['-audit_status', '-updated_at', '-id'],
};
onSearch();
};
const onSort = (column: string, type: string) => {
filter.value.setSort = type ? [(type === 'desc' ? '-' : '') + column, '-updated_at', '-id'] : ['-audit_status', '-updated_at', '-id'];
tableRef.value?.onFetch();
};
onActivated(() => {
if (useRoute()?.meta?.reload) {
onReset({ auditStatus: initAuditStatus.value ? Number(initAuditStatus.value) : '' });
} else {
tableRef.value?.onFetch();
}
});
const handleCreate = () => {
const dialog = createModalVNode(
() =>
createVNode(FormContent, {
initValue: { song_type: 1, created_form: 0, is_push: 1, expand: { push_type: ['tag'] } },
filterProject: (value: Project) => value.is_can_apply === 1,
onSubmit: (data: AnyObject) =>
useApply.create(data).then(() => {
Message.success(`申请上架活动：${data.song_name}`);
tableRef.value?.onFetch();
dialog.close();
}),
}),
{ title: '创建歌曲', footer: false, closable: true, width: 'auto' }
);
};
const handleUpdate = (row: TableData) => {
const column = [
// { title: '操作人', dataIndex: 'id', width: 100, ellipsis: true, tooltip: true, render: () => '平台运营' },
{ title: '操作时间', dataIndex: 'created_at', width: 170, ellipsis: true, tooltip: true },
{ title: '驳回说明', dataIndex: 'audit_msg', width: 500, ellipsis: true, tooltip: true },
];
const dialog = createModalVNode(
() =>
createVNode(Tabs, { type: 'rounded', size: 'mini' }, [
createVNode(TabPane, { title: '试唱歌曲上架', key: 'applyRef' }, () =>
createVNode(FormContent, {
initValue: row,
filterProject: (value: Project) => value.is_can_apply === 1 || value.id === row.project_id,
onSubmit: (data: AnyObject) =>
useApply.update(row.id, Object.assign(data, { song_type: 1 })).then(() => {
Message.success(`重新申请上架活动：${row.song_name}`);
tableRef.value?.onFetch();
dialog.close();
}),
})
),
createVNode(TabPane, { title: `审核驳回记录（${row.apply_records?.length || 0}）`, key: 'record' }, () => {
return createVNode(Table, {
columns: column,
data: row.apply_records || [],
bordered: false,
tableLayoutFixed: true,
pagination: false,
scroll: { y: 370 },
size: 'medium',
rowKey: 'id',
});
}),
]),
{ title: '编辑歌曲', footer: false, closable: true, width: '860px' }
);
};
const handleDelete = (row: TableData) => {
createModalVNode(`确认要将歌曲：${row.song_name} 删除吗？`, {
title: '删除操作',
onBeforeOk: () => promiseToBoolean(useApply.destroy(row.id)),
onOk: () => tableRef.value?.onFetch(),
});
};
</script>
<style scoped></style>
<script setup lang="ts">
import { Activity } from '@/types/activity';
import { computed } from 'vue';
import { User } from '@/types/user';
import UserTag from '@/views/audition/activity-show/components/user-tag.vue';
import { unionBy } from 'lodash';
import useActivityApi from '@/api/activity';
const props = defineProps<{ data: Activity; loading?: boolean }>();
const links = computed(() => {
return unionBy(props.data.links || [], 'id');
});
const inSideLyricist = computed(
(): User[] => links.value?.filter((item: User) => props.data.expand?.lyricist?.ids?.indexOf(item.id) !== -1) || []
);
const outSideLyricist = computed(() => props.data.expand?.lyricist?.supplement || []);
const inSideComposer = computed(
(): User[] => links.value?.filter((item: User) => props.data.expand?.composer?.ids?.indexOf(item.id) !== -1) || []
);
const outSideComposer = computed(() => props.data.expand?.composer?.supplement || []);
const inSideArranger = computed(
(): User[] => links.value?.filter((item: User) => props.data.expand?.arranger?.ids?.indexOf(item.id) !== -1) || []
);
const outSideArranger = computed(() => props.data.expand?.arranger?.supplement || []);
</script>
<template>
<a-spin :loading="loading as boolean" style="width: 100%">
<a-card :bordered="false">
<a-form auto-label-width label-align="left">
<a-layout>
<a-layout-sider :width="130" style="background: none; box-shadow: none; padding-top: 6px">
<a-image show-loader :height="130" :width="130" :src="data.cover" />
</a-layout-sider>
<a-layout-content style="margin-left: 16px">
<a-form-item :hide-label="true">
<div class="title">{{ data.song_name }}</div>
<a-tag v-for="item in data.tags" :key="item.id" size="small" style="margin-right: 5px">
{{ item.name }}
</a-tag>
<span style="font-size: 10px">
{{ useActivityApi.statusOption.find((item) => item.value === data.status)?.label }}
</span>
</a-form-item>
<a-form-item
:label-col-style="{ flex: 0 }"
:wrapper-col-style="{ flex: 'unset', width: 'inherit' }"
:show-colon="true"
label="关联厂牌"
>
<div v-if="data.project">{{ data.project.name }}</div>
<div v-else>无</div>
</a-form-item>
<a-form-item hide-label>
<a-form-item :label-col-style="{ flex: 0 }" :show-colon="true" label="作词">
<user-tag v-for="item in inSideLyricist" :key="item.id" :user="{ nick_name: item.nick_name }" style="margin-right: 5px" />
<user-tag v-for="item in outSideLyricist" :key="`lyricist-${item}`" :user="{ nick_name: item }" style="margin-right: 5px" />
</a-form-item>
<a-form-item :label-col-style="{ flex: 0 }" :show-colon="true" label="作曲">
<user-tag v-for="item in inSideComposer" :key="item.id" :user="{ nick_name: item.nick_name }" style="margin-right: 5px" />
<user-tag v-for="item in outSideComposer" :key="`lyricist-${item}`" :user="{ nick_name: item }" style="margin-right: 5px" />
</a-form-item>
<a-form-item :label-col-style="{ flex: 0 }" :show-colon="true" label="编曲">
<user-tag v-for="item in inSideArranger" :key="item.id" :user="{ nick_name: item.nick_name }" style="margin-right: 5px" />
<user-tag v-for="item in outSideArranger" :key="`lyricist-${item}`" :user="{ nick_name: item }" style="margin-right: 5px" />
</a-form-item>
</a-form-item>
<a-form-item hide-label>
<a-form-item :label-col-style="{ flex: 0 }" :show-colon="true" label="创建信息">
<span v-if="data.user" style="margin-right: 8px">{{ data.user.nick_name }}</span>
<span style="margin-right: 8px">{{ data.created_at }} </span>
</a-form-item>
<a-form-item :label-col-style="{ flex: 0 }" :show-colon="true" label="预计发行时间">
{{ data.estimate_release_at }}
</a-form-item>
<a-form-item :label-col-style="{ flex: 0 }"></a-form-item>
</a-form-item>
<a-form-item label="推荐语" :show-colon="true" :label-col-style="{ flex: 0 }">
<a-typography-paragraph
style="margin-bottom: 0; width: 100%; color: var(--color-text-2)"
:ellipsis="{ rows: 1, showTooltip: true }"
>
{{ data.sub_title }}
</a-typography-paragraph>
</a-form-item>
</a-layout-content>
</a-layout>
</a-form>
</a-card>
</a-spin>
</template>
<style lang="less" scoped>
.arco-form-item {
margin-bottom: 0;
}
.arco-form-item-label-col {
flex: 0;
}
.title {
font-size: 16px;
font-weight: bold;
margin-right: 8px;
}
.right {
margin: 0 20px;
min-width: 600px;
}
</style>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import useLoading from '@/hooks/loading';
import NumberTableColumn from '@/components/filter/number-table-column.vue';
import EnumTableColumn from '@/components/filter/enum-table-column.vue';
import useUserApi from '@/api/user';
import useActivityApi from '@/api/activity';
import UserTableColumn from '@/components/filter/user-table-column.vue';
const props = defineProps<{ activityId: number }>();
const emits = defineEmits<{ (e: 'initTotal', value: number): void }>();
const { loading, setLoading } = useLoading(false);
const filter = ref({ nick_name: '', real_name: '', sex: '', identity: '' });
const tableRef = ref();
const { sexOption } = useUserApi;
const roleOptions = [
{ value: '0', label: '未认证' },
{ value: '1,3', label: '音乐人' },
{ value: '2,3', label: '经纪人' },
];
const onQuery = async (params: object) => {
setLoading(true);
useActivityApi.getLikeUser(props.activityId, { page: 1, pageSize: 1 }).then(({ meta }) => emits('initTotal', meta.total));
return useActivityApi
.getLikeUser(props.activityId, {
...filter.value,
identity: filter.value.identity.split(',').filter(Number),
setSort: '-last_listen_at',
...params,
})
.finally(() => setLoading(false));
};
const onSearch = () => tableRef.value?.onPageChange(1);
const onReset = () => {
filter.value = { nick_name: '', real_name: '', sex: '', identity: '' };
onSearch();
};
onMounted(() => onReset());
</script>
<template>
<filter-search :loading="loading" :model="filter" :split="3" inline @search="onSearch" @reset="onReset">
<filter-search-item label="用户艺名">
<a-input v-model="filter.nick_name" placeholder="请输入" />
</filter-search-item>
<filter-search-item label="性别">
<a-select v-model="filter.sex" :options="sexOption" placeholder="请选择" allow-clear />
</filter-search-item>
<filter-search-item label="身份">
<a-select v-model="filter.identity" :options="roleOptions" placeholder="请选择" allow-clear />
</filter-search-item>
</filter-search>
<filter-table ref="tableRef" :loading="loading" :on-query="onQuery">
<user-table-column title="用户艺名" data-index="user_id" :width="200" show-avatar />
<enum-table-column title="性别" data-index="sex" :width="100" :option="sexOption" :dark-value="0" />
<a-table-column title="身份" data-index="role" :width="100">
<template #cell="{ record }">
<span v-if="record.identity === 1">音乐人</span>
<span v-else-if="[2, 3].includes(record.identity)">经纪人</span>
<span v-else>未认证</span>
</template>
</a-table-column>
<number-table-column title="试听歌曲数量" data-index="listen_count" :width="120" :dark-value="0" />
<number-table-column title="收藏歌曲数量" data-index="collection_count" :width="120" :dark-value="0" />
<number-table-column title="试唱歌曲数量" data-index="submit_work" :width="120" :dark-value="0" />
<a-table-column title="最后试听时间" data-index="last_listen_at" :width="180" />
</filter-table>
</template>
<style scoped lang="less"></style>
<script setup lang="ts">
import useLoading from '@/hooks/loading';
import { createVNode, h, onMounted, ref } from 'vue';
import { AnyObject } from '@/types/global';
import EnumTableColumn from '@/components/filter/enum-table-column.vue';
import { Button, Form, FormItem, Grid, GridItem, Message, Modal, Select } from '@arco-design/web-vue';
import ManagerForm from '@/views/audition/activity-show/components/manager-form.vue';
import PhoneTableColumn from '@/components/filter/phone-table-column.vue';
import useActivityApi from '@/api/activity';
import useUserApi from '@/api/user';
import UserTableColumn from '@/components/filter/user-table-column.vue';
const props = defineProps<{ activityId: number; canManage?: number }>();
const emits = defineEmits<{ (e: 'initTotal', value: number): void }>();
// eslint-disable-next-line import/no-named-as-default-member
const { getManageUser, createManage, updateManage, deleteManage } = useActivityApi;
const { statusOption, officialStatusOption, sexOption } = useUserApi;
const { loading, setLoading } = useLoading(false);
const filter = ref({ nick_name: '', real_name: '', email: '', phone: '', permission: '', status: '' });
const tableRef = ref();
const permissionOption = [
{ label: '查看试唱', value: 'view' },
{ label: '查看报价', value: 'price' },
{ label: '回复结果', value: 'audit' },
];
const onQuery = async (params?: AnyObject) => {
setLoading(true);
getManageUser(props.activityId, { pageSize: 1 }).then(({ meta }) => emits('initTotal', meta.total));
return getManageUser(props.activityId, { ...filter.value, ...params, setSort: '-user_id' }).finally(() => setLoading(false));
};
const onSearch = () => tableRef.value?.onPageChange(1);
const onReset = () => {
filter.value = { nick_name: '', real_name: '', email: '', phone: '', permission: '', status: '' };
onSearch();
};
const formatPermission = (permission: any[]) =>
permission
.map((item) => `[${permissionOption.find((option) => option.value === item)?.label}]` || '')
.filter((item) => item.length !== 0)
.join('');
onMounted(() => onReset());
const onCreate = () => {
const formValue = ref<string[]>(['view']);
const creating = ref<boolean>(false);
const formRef = ref();
const modal = Modal.open({
title: '新增外部管理用户',
titleAlign: 'center',
content: () => h(ManagerForm, { activityId: props.activityId, ref: formRef }),
width: '1000px',
footer: () =>
createVNode(Grid, { cols: 6 }, () => [
createVNode(GridItem, { span: 2, style: { textAlign: 'left' } }, () =>
createVNode(Select, {
'multiple': true,
'options': permissionOption,
'modelValue': formValue.value,
'onUpdate:modelValue': (val?: string[]) => {
if (!val?.includes('view')) {
val?.unshift('view');
}
formValue.value = val || [];
},
})
),
createVNode(GridItem, { offset: 3 }, () =>
createVNode(
Button,
{
type: 'primary',
loading: creating.value,
onClick: () => {
if (formRef.value.selectedKeys.length === 0) {
return Message.warning('请先选择添加用户');
}
creating.value = true;
return createManage({ activity_id: props.activityId, user_ids: formRef.value.selectedKeys, permission: formValue.value })
.then(() => {
Message.success('添加成功');
tableRef.value?.onFetch();
modal.close();
})
.finally(() => {
creating.value = false;
});
},
},
() => '确认'
)
),
]),
});
};
const onUpdate = (record: any) => {
const formValue = ref<string[]>(record?.permission || ['view']);
Modal.open({
title: '修改',
titleAlign: 'center',
content: () =>
createVNode(Form, { layout: 'vertical', model: {} }, () =>
createVNode(FormItem, { label: '设置用户权限', rowClass: 'mb-0' }, () =>
createVNode(Select, {
'multiple': true,
'options': permissionOption,
'modelValue': formValue.value,
'onUpdate:modelValue': (val?: string[]) => {
if (!val?.includes('view')) {
val?.unshift('view');
}
formValue.value = val || [];
},
})
)
),
onBeforeOk: (done) =>
updateManage(record.id, { permission: formValue.value })
.then(() => {
Message.success('更新成功');
tableRef.value?.onFetch();
done(true);
})
.catch(() => done(false)),
});
};
const onDelete = (record: any) => {
Modal.open({
title: '删除操作',
content: `确认取消用户：${record.user?.nick_name} 的外部管理员身份`,
closable: false,
onBeforeOk: (done) =>
deleteManage(record.id)
.then(() => {
Message.success('删除成功');
tableRef.value?.onFetch();
done(true);
})
.catch(() => done(false)),
});
};
</script>
<template>
<filter-search :model="filter" :loading="loading" @search="onSearch" @reset="onReset">
<filter-search-item field="nick_name" label="用户艺名">
<a-input v-model="filter.nick_name" allow-clear placeholder="请输入" />
</filter-search-item>
<filter-search-item field="email" label="用户邮箱">
<a-input v-model="filter.email" allow-clear placeholder="请输入" />
</filter-search-item>
<filter-search-item field="phone" label="用户手机">
<a-input v-model="filter.phone" allow-clear placeholder="请输入" />
</filter-search-item>
<filter-search-item field="" label="外部权限">
<a-select v-model="filter.permission" :options="permissionOption" allow-clear placeholder="请选择" />
</filter-search-item>
<filter-search-item field="status" label="状态">
<a-select v-model="filter.status" :options="statusOption" allow-clear placeholder="请选择" />
</filter-search-item>
</filter-search>
<filter-table ref="tableRef" :loading="loading" :on-query="onQuery">
<template #tool>
<icon-button v-if="canManage" icon="plus" label="新增" type="primary" @click="onCreate" />
</template>
<user-table-column title="用户艺名" data-index="user_id" user="user" :width="200" show-avatar />
<enum-table-column title="性别" data-index="user.sex" :width="100" :option="sexOption" :dark-value="0" />
<a-table-column title="用户邮箱" data-index="user.email" :width="170" :tooltip="true" :ellipsis="true" />
<phone-table-column title="手机号码" data-index="user.phone" area-index="user.area_code" :width="170" />
<enum-table-column title="关注服务号" data-index="user.official_status" :option="officialStatusOption" :dark-value="0" :width="120" />
<a-table-column title="外部权限" data-index="permission" :width="200" :ellipsis="true" :tooltip="true">
<template #cell="{ record }"> {{ formatPermission(record.permission) }}</template>
</a-table-column>
<enum-table-column title="状态" data-index="user.status" :width="80" :option="statusOption" :dark-value="0" />
<a-table-column v-if="canManage" :width="120" data-index="operations" title="操作" :tooltip="false" :ellipsis="false">
<template #cell="{ record }">
<a-space>
<a-link :hoverable="false" @click="onUpdate(record)">修改</a-link>
<a-link :hoverable="false" @click="onDelete(record)">取消管理</a-link>
</a-space>
</template>
</a-table-column>
</filter-table>
</template>
<style scoped lang="less"></style>
<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { Input, Divider, TableColumn } from '@arco-design/web-vue';
import useActivityApi from '@/api/activity';
import { AnyObject } from '@/types/global';
import useLoading from '@/hooks/loading';
import FilterSearch from '@/components/filter/search.vue';
import FilterSearchItem from '@/components/filter/search-item.vue';
import FilterTable from '@/components/filter/table.vue';
import PhoneTableColumn from '@/components/filter/phone-table-column.vue';
const props = defineProps<{ activityId: number }>();
const filter = ref({});
const tableRef = ref<InstanceType<typeof FilterTable>>({});
const { loading, setLoading } = useLoading(false);
const selectedKeys = ref([]);
const onQuery = async (params?: AnyObject) => {
setLoading(true);
// eslint-disable-next-line import/no-named-as-default-member
return useActivityApi
.getManageUser(props.activityId, { ...filter.value, unSet: 1, ...params, setSort: '-id' })
.finally(() => setLoading(false));
};
const onSearch = () => tableRef.value?.onPageChange(1);
const onReset = () => {
filter.value = { nick_name: '', real_name: '', emailLike: '', phoneLike: '', status: 1 };
onSearch();
};
defineExpose({ selectedKeys });
onMounted(() => onReset());
</script>
<template>
<FilterSearch :loading="loading" :model="filter" size="small" @search="onSearch" @reset="onReset">
<FilterSearchItem field="nick_name" label="用户艺名">
<Input v-model="filter.nick_name" allow-clear placeholder="请输入" />
</FilterSearchItem>
<FilterSearchItem field="real_name" label="用户真名">
<Input v-model="filter.real_name" allow-clear placeholder="请输入" />
</FilterSearchItem>
<FilterSearchItem field="email" label="用户邮箱">
<Input v-model="filter.emailLike" allow-clear placeholder="请输入" />
</FilterSearchItem>
<FilterSearchItem field="phone" label="手机号码">
<Input v-model="filter.phoneLike" allow-clear placeholder="请输入" />
</FilterSearchItem>
</FilterSearch>
<Divider style="margin-top: 0" />
<FilterTable
ref="tableRef"
v-model:selectedKeys="selectedKeys"
size="small"
:loading="loading"
style="height: 360px"
:scroll="{ y: 360 }"
:row-selection="{ type: 'checkbox' }"
:on-query="onQuery"
>
<TableColumn title="用户艺名" data-index="nick_name" :width="160" :tooltip="true" :ellipsis="true" />
<TableColumn title="用户真名" data-index="real_name" :width="140" :tooltip="true" :ellipsis="true" />
<TableColumn title="用户邮箱" data-index="email" :width="140" :tooltip="true" :ellipsis="true" />
<PhoneTableColumn title="用户手机" data-index="phone" area-index="area_code" :width="140" :tooltip="true" :ellipsis="true" />
</FilterTable>
</template>
<style scoped lang="less"></style>
<script setup lang="ts">
import { AnyObject, QueryForParams } from '@/types/global';
import useLoading from '@/hooks/loading';
import { useWorkApi } from '@/api/activity';
import { computed, onMounted, ref } from 'vue';
import { TableColumn } from '@arco-design/web-vue';
import FilterTable from '@/components/filter/table.vue';
import UserTableColumn from '@/components/filter/user-table-column.vue';
import UserInfo from '@/views/audition/activity-show/components/user-info.vue';
const props = defineProps<{ activityId: number; queryHook?: () => void }>();
const { loading, setLoading } = useLoading(false);
const tableRef = ref();
const queryParams = computed((): QueryForParams => {
return {
activity: props.activityId,
status: 1,
setColumn: ['id', 'submit_at', 'mode', 'demo_url', 'user_id', 'broker_id'],
setWith: ['user:id,avatar,nick_name,real_name,identity,email,province,city', 'broker:id,nick_name,identity'],
setSort: '-id',
};
});
const onQuery = async (params: AnyObject) => {
setLoading(true);
props.queryHook?.();
return useWorkApi.get({ ...queryParams.value, ...params }).finally(() => setLoading(false));
};
onMounted(() => tableRef.value?.onPageChange(1));
</script>
<template>
<FilterTable ref="tableRef" :loading="loading" :on-query="onQuery">
<TableColumn :width="160" data-index="user_id " title="用户艺名">
<template #cell="{ record }">
<UserInfo v-if="record.user" :row="record.user" />
</template>
</TableColumn>
<UserTableColumn :width="140" data-index="broker_id" user="broker" title="队长" dark-value="" />
<TableColumn :width="100" data-index="mode" title="试唱方式">
<template #cell="{ record }">{{ record.mode === 1 ? '自主上传' : '在线演唱' }}</template>
</TableColumn>
<TableColumn :width="180" data-index="submit_at" title="提交时间" />
<TableColumn :width="480" data-index="demo_url" title="Demo">
<template #cell="{ record }">
<audio-player :name="record.song_name" :url="record.demo_url" />
</template>
</TableColumn>
</FilterTable>
</template>
<style scoped lang="less"></style>
<script setup lang="ts">
import { Modal, Textarea } from '@arco-design/web-vue';
import { computed, h } from 'vue';
import { ActivityExpand } from '@/types/activity-apply';
import { useAppStore } from '@/store';
import useAuthApi from '@/api/auth';
type MaterialData = {
title: string;
type: string;
content: string;
name?: string;
size?: string;
};
const props = defineProps<{ data: { expand: ActivityExpand; lyric: string; song_name: string }; hideTrack?: boolean }>();
const appStore = useAppStore();
const theme = computed(() => appStore.theme);
const lyricStyle = computed(() =>
theme.value === 'light' ? { border: 'none', backgroundColor: 'white' } : { border: 'none', backgroundColor: '#2a2a2b' }
);
const bytesForHuman = (bytes: number, decimals = 2) => {
const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB'];
let i = 0;
// eslint-disable-next-line no-plusplus
for (i; bytes > 1024; i++) {
bytes /= 1024;
}
return `${parseFloat(bytes.toFixed(decimals))} ${units[i]}`;
};
const onDownload = (record: MaterialData) => useAuthApi.downloadFile(record.content, `${props.data.song_name}(${record.title})`);
const onViewLyric = (lyric: string) => {
Modal.open({
content: () => h(Textarea, { defaultValue: lyric, autoSize: { maxRows: 20 }, style: lyricStyle.value }),
footer: false,
closable: false,
});
};
const materials = computed((): MaterialData[] => {
const data = [
{
title: '导唱',
type: 'guide',
name: props.data.expand?.guide_source?.name || '',
content: props.data.expand?.guide_source?.url || '',
size: bytesForHuman(props.data.expand?.guide_source?.size || 0),
},
{
title: '伴唱',
type: 'karaoke',
name: props.data.expand?.karaoke_source?.name || '',
content: props.data.expand?.karaoke_source?.url || '',
size: bytesForHuman(props.data.expand?.karaoke_source?.size || 0),
},
];
if (!props.hideTrack) {
data.push({
title: '分轨文件',
type: 'track',
content: props.data.expand?.track_source?.url || '',
name: props.data.expand?.track_source?.name || '',
size: bytesForHuman(props.data.expand?.track_source?.size || 0),
});
}
return [...data, { title: '歌词', type: 'Lyric', content: props.data.lyric }];
});
</script>
<template>
<a-table row-key="type" :data="materials" :bordered="false" :table-layout-fixed="true" :pagination="false">
<template #columns>
<a-table-column title="物料类型" align="center" data-index="title" :width="140" />
<a-table-column title="音频播放" data-index="content">
<template #cell="{ record }">
<template v-if="record.content">
<audio-player v-if="['guide', 'karaoke'].indexOf(record.type) !== -1" :name="record.type" :url="record.content" />
<div v-if="record.type === 'track'">{{ [record.name, record.size].join('，') }}</div>
</template>
</template>
</a-table-column>
<a-table-column title="操作" align="center" :width="200">
<template #cell="{ record }">
<template v-if="record.content">
<a-button v-if="record.type === 'Lyric'" type="primary" size="small" @click="onViewLyric(record.content)">查看</a-button>
<a-button v-else type="primary" size="small" @click="onDownload(record)">下载</a-button>
</template>
</template>
</a-table-column>
</template>
</a-table>
</template>
<style scoped lang="less"></style>
<template>
<FilterSearch :loading="loading" :model="filter" :inline="true" @search="onSearch" @reset="onReset">
<FilterSearchItem label="用户艺名">
<Input v-model="filter.searchUser" allow-clear placeholder="请搜索" />
</FilterSearchItem>
<FilterSearchItem label="经纪人">
<Input v-model="filter.searchBusiness" allow-clear placeholder="请搜索" />
</FilterSearchItem>
<FilterSearchItem label="试唱方式">
<Select v-model="filter.mode" :options="modeOption" allow-clear placeholder="请筛选" />
</FilterSearchItem>
<template #button>
<ExportButton :on-download="onExport" />
</template>
</FilterSearch>
<FilterTable ref="tableRef" :loading="loading" :on-query="onQuery" :hide-expand-button-on-empty="true">
<TableColumn :width="160" data-index="user_id " title="用户艺名">
<template #cell="{ record }">
<UserInfo v-if="record.children && record.user" :row="record.user" />
</template>
</TableColumn>
<UserTableColumn :width="140" data-index="business_id" user="business" title="队长" dark-value="" />
<TableColumn :width="100" data-index="mode" title="试唱方式">
<template #cell="{ record }">{{ record.mode === 1 ? '自主上传' : '在线演唱' }}</template>
</TableColumn>
<TableColumn title="合作模式" :width="100">
<template #cell="{ record }">
<template v-if="record.price && record.children">
<Link class="link-hover" :hoverable="false" @click="onViewPrice(record.price)">查看报价</Link>
</template>
</template>
</TableColumn>
<TableColumn :width="100" data-index="version" title="提交版本">
<template #cell="{ record }">
<Link class="link-hover" :hoverable="false" icon @click="onDownload(record)">{{ `版本V${record.version}` }}</Link>
</template>
</TableColumn>
<TableColumn :width="460" data-index="demo_url" title="Demo">
<template #cell="{ record }">
<AudioPlayer :name="record.song_name" :url="record.demo_url" />
</template>
</TableColumn>
<SpaceTableColumn :width="130" fixed="right" title="操作">
<template #default="{ record }: { record: ActivityWork }">
<template v-if="record.children">
<a-button v-if="record.status === 1" size="mini" type="primary" status="success">已确认合作</a-button>
<a-button v-else-if="record.status === 2" size="mini">试唱不合适</a-button>
<a-button v-else-if="record.status === 0 && [3, 5].indexOf(record.activity_status) !== -1" size="mini">未采纳</a-button>
<a-space v-else-if="record.status === 0 && record.activity_status === 1">
<a-button type="primary" size="mini" @click="onPass(record)">合作</a-button>
<a-button type="primary" status="danger" size="mini" @click="onUnPass(record)">不合适</a-button>
</a-space>
<a-button v-else size="mini">其他</a-button>
</template>
</template>
</SpaceTableColumn>
</FilterTable>
</template>
<script setup lang="ts">
import useLoading from '@/hooks/loading';
import { onMounted, ref, createVNode, computed } from 'vue';
import { useWorkApi } from '@/api/activity';
import { AnyObject, QueryForParams } from '@/types/global';
import { Input, Select, TableColumn, TableData, Link } from '@arco-design/web-vue';
import FilterSearch from '@/components/filter/search.vue';
import FilterSearchItem from '@/components/filter/search-item.vue';
import FilterTable from '@/components/filter/table.vue';
import UserTableColumn from '@/components/filter/user-table-column.vue';
import SpaceTableColumn from '@/components/filter/space-table-column.vue';
import UserInfo from '@/views/audition/activity-show/components/user-info.vue';
import AudioPlayer from '@/components/audio-player/index.vue';
import { createFormItemVNode, createFormVNode, createModalVNode } from '@/utils/createVNode';
import { promiseToBoolean } from '@/utils';
import { ActivityWork } from '@/types/activity-work';
import useAuthApi from '@/api/auth';
const props = defineProps<{ activityId: number; exportName?: string; queryHook?: () => void }>();
const emits = defineEmits<{ (e: 'matchWork', value: ActivityWork): void }>();
const { loading, setLoading } = useLoading(false);
const filter = ref<QueryForParams>({ searchUser: '', searchBusiness: '', mode: '' });
const tableRef = ref();
const modeOption = [
{ value: 1, label: '自主上传' },
{ value: 0, label: '在线演唱' },
];
const queryParams = computed((): QueryForParams => {
return {
...filter.value,
activity: props.activityId,
type: 'submit',
setColumn: [
'id',
'user_id',
'business_id',
'price_id',
'activity_id',
'activity_name',
'activity_status',
'submit_at',
'mode',
'type',
'status',
'created_at',
'demo_url',
'version',
],
setWith: [
'user:id,avatar,nick_name,real_name,identity,email,province,city,company,rate',
'business:id,nick_name,identity',
'price:id,value,is_deduct,is_talk,is_accept_address,address_id',
'children:id,user_id,activity_id,mode,version,demo_url',
],
setSort: '-id',
};
});
const onQuery = async (params: AnyObject) => {
setLoading(true);
props.queryHook?.();
return useWorkApi.get({ ...queryParams.value, ...params }).finally(() => setLoading(false));
};
const onSearch = () => tableRef.value?.onPageChange(1);
const onReset = () => {
filter.value = { searchUser: '', searchBusiness: '', mode: '' };
onSearch();
};
onMounted(() => onReset());
const onExport = async () => useWorkApi.getExport(props.exportName as string, queryParams.value);
const onDownload = (row: TableData) => {
return useAuthApi.downloadFile(row.demo_url, `${row.activity_name}-${row.user.nick_name}-V${row.version}`);
};
const onViewPrice = (price: any) => {
createModalVNode(
() =>
createFormVNode({ size: 'small', autoLabelWidth: true }, [
createFormItemVNode(
{ label: '唱酬', showColon: true, rowClass: 'mb-0' },
price.value.is_reward ? `${price.value.amounts} 元` : '无'
),
createFormItemVNode(
{ label: '分成', showColon: true, rowClass: 'mb-0' },
price.value.is_dividend ? `${price.value.ratio}% | ${price.value.year} | ${price.is_deduct ? '抵扣' : '不抵扣'}` : '无'
),
createFormItemVNode({ label: '价格是否可谈', showColon: true, rowClass: 'mb-0' }, price.is_talk ? '【可谈】' : '【不可谈】'),
createFormItemVNode(
{ label: '录音地点', showColon: true, rowClass: 'mb-0' },
`${[price.address?.parent?.name, price.address?.name].join('/')}${
price.is_accept_address ? '【接受其他录音地点】' : '【不接受其他录音地点】'
}`
),
]),
{ title: '用户报价', hideCancel: true, bodyStyle: { padding: '8px 20px' }, okText: '我知道了' }
);
};
const onPass = (row: TableData) => {
const itemStyle = { lineHeight: '28px', margin: '4px 0' };
return createModalVNode(
() =>
createVNode('ol', {}, [
createVNode('li', { style: itemStyle }, '此条Demo的状态将变更为合作状态'),
createVNode('li', { style: itemStyle }, `活动《${row.activity_name}》的状态变更为完成状态！`),
]),
{
title: '确认合作',
bodyStyle: { padding: 0 },
onBeforeOk: () => promiseToBoolean(useWorkApi.changeStatus(row.id, { status: 1 })),
onOk: () => {
tableRef.value?.onFetch();
emits('matchWork', row as ActivityWork);
},
}
);
};
const onUnPass = (row: TableData) =>
createModalVNode(`请确认是否将用户：${row.user.nick_name} 提交的《版本V${row.version}》标记为不合适,并反馈给用户？`, {
title: '不适合标记',
onBeforeOk: () => promiseToBoolean(useWorkApi.changeStatus(row.id, { status: 2, remark: '' })),
onOk: () => tableRef.value?.onFetch(),
});
</script>
<style scoped lang="less">
.prop {
display: flex;
align-items: flex-start;
}
.prop-label {
font-weight: bold;
width: 80px;
text-align: right;
}
:deep(.arco-table-cell) {
padding: 5px 8px !important;
:hover {
cursor: pointer;
}
& > .arco-table-td-content .arco-btn-size-small {
padding: 5px !important;
}
}
</style>
<template>
<a-popover position="right">
<a-typography-paragraph class="name" :ellipsis="{ rows: 1, showTooltip: false }">
{{ fullName }}
</a-typography-paragraph>
<template #content>
<p class="prop">
<span class="label">邮箱：</span>
<span>{{ row.email }}</span>
</p>
<p class="prop">
<span class="label">身份：</span>
<span>{{ roleLabel }}</span></p
>
<p class="prop">
<span class="label">常居地：</span>
<span>
{{ [row.province, row.city].join('-') }}
</span>
</p>
</template>
</a-popover>
</template>
<script lang="ts" setup>
import { computed, toRefs } from 'vue';
import { User } from '@/types/user';
const props = defineProps<{
row: Pick<User, 'id' | 'nick_name' | 'real_name' | 'email' | 'province' | 'city' | 'company' | 'rate' | 'identity'>;
}>();
const { row } = toRefs(props);
const roleLabel = computed(() => {
if (row.value.identity === 1) {
return '音乐人';
}
if ([2, 3].includes(row.value.identity)) {
return '经纪人';
}
return '未认证';
});
const fullName = computed(() => `${row?.value?.nick_name}`);
</script>
<style lang="less" scoped>
.prop {
display: flex;
align-items: flex-start;
.label {
font-weight: bold;
width: 80px;
}
}
.name {
margin-bottom: 0 !important;
width: 100%;
}
</style>
<script setup lang="ts">
import { computed } from 'vue';
const props = defineProps<{ user: { id?: number; nick_name: string } }>();
const cursor = computed(() => (props.user.id ? 'pointer' : 'default'));
</script>
<template>
<a-tag class="link" size="small" @click="() => user.id && $router.push({ name: 'user-show', params: { id: user.id } })">
<span>{{ user.nick_name }}</span>
<icon-right v-if="user.id" style="margin-left: 8px" />
</a-tag>
</template>
<style scoped lang="less">
.link:hover {
cursor: v-bind(cursor);
}
</style>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import useLoading from '@/hooks/loading';
import NumberTableColumn from '@/components/filter/number-table-column.vue';
import EnumTableColumn from '@/components/filter/enum-table-column.vue';
import useUserApi from '@/api/user';
import useActivityApi from '@/api/activity';
import UserTableColumn from '@/components/filter/user-table-column.vue';
const props = defineProps<{ activityId: number }>();
const emits = defineEmits<{ (e: 'initTotal', value: number): void }>();
const { loading, setLoading } = useLoading(false);
const filter = ref({ nick_name: '', real_name: '', sex: '', identity: '' });
const tableRef = ref();
const { sexOption } = useUserApi;
const roleOptions = [
{ value: '0', label: '未认证' },
{ value: '1,3', label: '音乐人' },
{ value: '2,3', label: '经纪人' },
];
const onQuery = async (params: object) => {
setLoading(true);
useActivityApi.getViewUser(props.activityId, { page: 1, pageSize: 1 }).then(({ meta }) => emits('initTotal', meta.total));
return useActivityApi
.getViewUser(props.activityId, {
...filter.value,
identity: filter.value.identity.split(',').filter(Number),
setSort: '-last_listen_at',
...params,
})
.finally(() => setLoading(false));
};
const onSearch = () => tableRef.value?.onPageChange(1);
const onReset = () => {
filter.value = { nick_name: '', real_name: '', sex: '', identity: '' };
onSearch();
};
onMounted(() => onReset());
</script>
<template>
<filter-search :loading="loading" :model="filter" :split="3" inline @search="onSearch" @reset="onReset">
<filter-search-item label="用户艺名">
<a-input v-model="filter.nick_name" placeholder="请输入" />
</filter-search-item>
<filter-search-item label="性别">
<a-select v-model="filter.sex" :options="sexOption" placeholder="请选择" allow-clear />
</filter-search-item>
<filter-search-item label="身份">
<a-select v-model="filter.identity" :options="roleOptions" placeholder="请选择" allow-clear />
</filter-search-item>
</filter-search>
<filter-table ref="tableRef" :loading="loading" :on-query="onQuery">
<user-table-column title="用户艺名" data-index="user_id" :width="200" show-avatar />
<enum-table-column title="性别" data-index="sex" :width="100" :option="sexOption" :dark-value="0" />
<a-table-column title="身份" data-index="role" :width="100">
<template #cell="{ record }">
<span v-if="record.identity === 1">音乐人</span>
<span v-else-if="[2, 3].includes(record.identity)">经纪人</span>
<span v-else>未认证</span>
</template>
</a-table-column>
<number-table-column title="试听歌曲数量" data-index="listen_count" :width="120" :dark-value="0" />
<number-table-column title="收藏歌曲数量" data-index="collection_count" :width="120" :dark-value="0" />
<number-table-column title="试唱歌曲数量" data-index="submit_work" :width="120" :dark-value="0" />
<a-table-column title="最后试听时间" data-index="last_listen_at" :width="180" />
</filter-table>
</template>
<style scoped lang="less"></style>
<script setup lang="ts" name="audition-activity-show">
import { useRoute, useRouter } from 'vue-router';
import { onMounted, ref } from 'vue';
import useActivityApi, { useWorkApi } from '@/api/activity';
import BasicCard from '@/views/audition/activity-show/components/basic-card.vue';
import MaterialTable from '@/views/audition/activity-show/components/material-table.vue';
import ViewUserTable from '@/views/audition/activity-show/components/view-user-table.vue';
import LikeUserTable from '@/views/audition/activity-show/components/like-user-table.vue';
import SubmitTable from '@/views/audition/activity-show/components/submit-table.vue';
import ManageTable from '@/views/audition/activity-show/components/manage-table.vue';
import MatchTable from '@/views/audition/activity-show/components/match-table.vue';
import { useRouteQuery } from '@vueuse/router';
const activityKey = Number(useRoute().params.id);
const tabKey = useRouteQuery('tabKey', 'submit-work');
const activity = ref({});
const total = ref({ submit_total: 0, match_total: 0, view_total: 0, like_total: 0, manager_total: 0 });
const syncMatchCount = () =>
useWorkApi.get({ activity: activityKey, setColumn: ['id'], type: 'submit', status: 1, pageSize: 1 }).then(({ meta }) => {
total.value.match_total = meta.total;
});
const syncSubmitCount = () =>
useWorkApi.get({ activity: activityKey, setColumn: ['id'], type: 'submit', pageSize: 1 }).then(({ meta }) => {
total.value.submit_total = meta.total;
});
const router = useRouter();
onMounted(async () => {
await useActivityApi
.show(activityKey, {
songType: 1,
setWith: [
'project:id,name,is_promote,is_can_manage',
'tags:id,name',
'user:id,nick_name,real_name,identity',
'links:id,nick_name,identity',
],
setColumn: [
'id',
'song_name',
'cover',
'sub_title',
'lyric',
'clip_lyric',
'expand',
'status',
'estimate_release_at',
'created_at',
'song_type',
'project_id',
'user_id',
],
})
.then((data) => {
activity.value = data;
})
.catch(() => router.replace({ name: 'exception-404' }));
});
</script>
<template>
<page-view has-bread>
<basic-card :loading="!activity" :data="activity" />
<a-card style="margin-top: 16px">
<a-tabs v-model:active-key="tabKey" :animation="true" :header-padding="false" :justify="true" type="rounded">
<a-tab-pane key="submit-work" :title="`参与试唱(${total.submit_total})`">
<SubmitTable :activity-id="activityKey" :export-name="activity.song_name" :query-hook="syncSubmitCount" />
</a-tab-pane>
<a-tab-pane key="match-work" :title="`合作用户(${total.match_total})`">
<match-table :activity-id="activityKey" :query-hook="syncMatchCount" />
</a-tab-pane>
<a-tab-pane key="material" title="歌曲物料">
<material-table :data="activity as any" />
</a-tab-pane>
<a-tab-pane key="listen-user" :title="`试听用户(${total.view_total})`">
<view-user-table :activity-id="activityKey" @init-total="(value) => (total.view_total = value)" />
</a-tab-pane>
<a-tab-pane key="like-user" :title="`收藏用户(${total.like_total})`">
<like-user-table :activity-id="activityKey" @init-total="(value) => (total.like_total = value)" />
</a-tab-pane>
<a-tab-pane key="out-manager" :title="`外部管理员(${total.manager_total})`">
<manage-table
ref="managerRef"
:activity-id="activityKey"
:can-manage="activity.project?.is_can_manage || 0"
@init-total="(value) => (total.manager_total = value)"
/>
</a-tab-pane>
</a-tabs>
</a-card>
</page-view>
</template>
<style lang="less" scoped>
textarea.arco-textarea::-webkit-scrollbar {
display: none;
}
</style>
<template>
<page-view has-bread has-card>
<filter-search :model="filter" :loading="loading" @search="onSearch" @reset="onReset">
<filter-search-item label="歌曲名称" field="song_name">
<a-input v-model="filter.songName" allow-clear placeholder="请输入搜索歌曲名称" />
</filter-search-item>
<filter-search-item v-if="!hideSearchItem?.includes('projectName')" label="厂牌名称" field="projectName">
<a-input v-model="filter.projectName" allow-clear placeholder="请输入搜索厂牌名称" />
</filter-search-item>
<filter-search-item label="标签名称" field="tagName">
<a-input v-model="filter.tagName" allow-clear placeholder="请输入搜索标签名称" />
</filter-search-item>
<filter-search-item label="状态" field="status">
<a-select v-model="filter.status" :options="statusOption" allow-clear multiple placeholder="请选择搜索状态" />
</filter-search-item>
<filter-search-item label="创建时间" field="createBetween">
<a-range-picker v-model="filter.createBetween" show-time :time-picker-props="{ defaultValue: ['00:00:00', '23:59:59'] }" />
</filter-search-item>
</filter-search>
<filter-table ref="tableRef" :loading="loading" :on-query="onQuery" @row-sort="onSort">
<template v-if="!hideTool" #tool-right>
<export-button :on-download="onExport" />
</template>
<activity-table-column data-index="id" title="试唱歌曲" :width="500" />
<number-table-column data-index="view_count" title="试听人数" :dark-value="0" :width="110" has-sort />
<number-table-column data-index="like_count" title="收藏人数" :dark-value="0" :width="110" has-sort />
<number-table-column data-index="submit_work_count" title="提交人数" :dark-value="0" :width="110" has-sort />
<date-table-column data-index="created_at" title="创建时间" :width="110" split has-sort />
<date-table-column data-index="audit_at" title="通过时间" :width="110" split has-sort />
<date-table-column data-index="match_at" title="确认时间" :width="110" split has-sort />
<number-table-column data-index="match_day" title="匹配时间" :width="110" :dark-value="0" suffix="天" has-sort />
<enum-table-column data-index="status" title="状态" :option="statusOption" :width="110" has-sort />
<a-table-column :width="90" align="center" data-index="operations" fixed="right" title="操作">
<template #cell="{ record }">
<a-space direction="vertical" fill>
<a-link
:hoverable="false"
class="link-hover"
@click="$router.push({ name: 'audition-activity-show', params: { id: record.id } })"
>
查看
</a-link>
<a-link v-if="record.status === 1" :hoverable="false" class="link-hover" @click="onDown(record)">下架</a-link>
<a-link v-if="record.status === 2" :hoverable="false" class="link-hover" @click="onUp(record, 'up')">上架</a-link>
<a-link v-if="record.status !== 0 && record.status !== 5" :hoverable="false" class="link-hover" @click="onUpdate(record)">
编辑
</a-link>
<a-link v-if="record.status === 3" :hoverable="false" class="link-hover" @click="onUp(record, 'reUp')">重新上架</a-link>
<a-link v-if="record.status === 3" :hoverable="false" class="link-hover" @click="onSend(record)">发行</a-link>
<a-link v-if="record.status === 5" :hoverable="false" class="link-hover" @click="onSend(record)">编辑发行</a-link>
</a-space>
</template>
</a-table-column>
</filter-table>
</page-view>
</template>
<script setup lang="ts" name="audition-activity">
import { createVNode, onMounted, ref } from 'vue';
import { AnyObject, AttributeData } from '@/types/global';
import useLoading from '@/hooks/loading';
import useActivityApi from '@/api/activity';
import { Message, TableData } from '@arco-design/web-vue';
import EnumTableColumn from '@/components/filter/enum-table-column.vue';
import DateTableColumn from '@/components/filter/date-table-column.vue';
import NumberTableColumn from '@/components/filter/number-table-column.vue';
import ActivityForm from '@/views/audition/activity-apply/components/form-content.vue';
import { createFormVNode, createInputFormItemVNode, createInputVNode, createModalVNode } from '@/utils/createVNode';
import ActivityTableColumn from '@/components/filter/activity-table-column.vue';
const props = defineProps<{
initFilter?: AttributeData;
hideSearchItem?: string[];
hideTool?: boolean;
exportName?: string;
queryHook?: () => void;
}>();
const { statusOption, get, getExport, update, changeStatus } = useActivityApi;
const { loading, setLoading } = useLoading(false);
const filter = ref<AttributeData>({});
const tableRef = ref();
const onQuery = async (params: object) => {
setLoading(true);
props.queryHook?.();
return get({
...filter.value,
...params,
setColumn: [
'id',
'song_name',
'cover',
'lang',
'speed',
'sub_title',
'sex',
'user_id',
'project_id',
'send_url',
'lyric',
'clip_lyric',
'expand',
'status',
'created_at',
'match_at',
'match_day',
'audit_at',
'estimate_release_at',
],
setWith: ['project:id,name', 'user:id,real_name,nick_name,identity', 'tags:id,name'],
setWithCount: ['viewUsers as view_count', 'collectionUsers as like_count', 'submitUsers as submit_work_count'],
}).finally(() => setLoading(false));
};
const onSort = (column: string, type: string) => {
filter.value.setSort = type ? [(type === 'desc' ? '-' : '') + column, '-id'] : ['-id'];
tableRef.value?.onFetch();
};
const onSearch = () => tableRef.value?.onPageChange(1);
const onReset = () => {
filter.value = {
songName: '',
projectName: '',
tagName: '',
songType: 1,
status: [],
createBetween: [],
...props.initFilter,
setSort: ['-id'],
};
tableRef.value?.resetSort();
onSearch();
};
const onExport = () => getExport(props.exportName || '歌曲', filter.value);
const onUpdate = (record: TableData) => {
const dialog = createModalVNode(
() =>
createVNode(ActivityForm, {
initValue: record,
onSubmit: (attribute: AnyObject) =>
update(record.id, Object.assign(attribute, { song_type: 1 })).then(() => {
Message.success(`编辑歌曲：${record.song_name}`);
tableRef.value?.onFetch();
dialog.close();
}),
}),
{ title: '编辑歌曲', footer: false, width: 'auto', closable: true }
);
};
const onDown = (record: TableData) => {
const msg = ref<string>('');
createModalVNode(
() =>
createInputVNode(msg, {
'placeholder': '请输入下架原因',
'maxLength': 20,
'show-word-limit': true,
}),
{
title: '变更状态',
titleAlign: 'start',
okText: '下架',
onBeforeOk: (done) =>
changeStatus(record.id, { status: 'down', msg: msg.value })
.then(() => {
tableRef.value?.onFetch();
done(true);
})
.catch(() => done(false)),
}
);
};
const onUp = (record: TableData, status: 'up' | 'reUp') => {
createModalVNode(`请确认是否上架歌曲：${record.song_name}`, {
title: '变更状态',
titleAlign: 'start',
okText: '上架',
onBeforeOk: (done) =>
changeStatus(record.id, { status })
.then(() => {
tableRef.value?.onFetch();
done(true);
})
.catch(() => done(false)),
});
};
const onSend = (record: TableData) => {
const link = ref(record.send_url?.[0]?.url || '');
createModalVNode(
() =>
createFormVNode({ model: link }, [
createVNode(
'div',
{ style: { fontFamily: 'PingFangSC-Regular, serif', paddingBottom: '16px', color: '#696969' } },
'将歌曲发行平台的url链接回填，会展示在App或小程序应用端。将会给您带来更多播放量 ~'
),
createInputFormItemVNode(link, { label: 'QQ音乐或酷狗平台链接', rowClass: 'mb-0', required: true }, { size: 'small' }),
]),
{
title: link.value.length === 0 ? '发行' : '编辑发行',
titleAlign: 'start',
onBeforeOk: (done) => {
changeStatus(record.id, { status: 'send', link: link.value })
.then(() => {
tableRef.value?.onFetch();
done(true);
})
.catch(() => done(false));
},
}
);
};
onMounted(() => onReset());
</script>
<style scoped lang="less">
:deep(.arco-table-cell) {
padding: 5px 16px !important;
}
</style>
<script setup lang="ts">
import { useSelectionStore } from '@/store';
import { Layout, LayoutSider, LayoutContent, LayoutFooter, Step, Steps, Space, Divider, Link } from '@arco-design/web-vue';
import Step1FormContent from '@/views/audition/demo-apply/components/step1-form-content.vue';
import Step2FormContent from '@/views/audition/demo-apply/components/step2-form-content.vue';
import Step3FormContent from '@/views/audition/demo-apply/components/step3-form-content.vue';
import IconButton from '@/components/icon-button/index.vue';
import { AnyObject } from '@/types/global';
import useLoading from '@/hooks/loading';
import { computed, markRaw, ref } from 'vue';
import { cloneDeep } from 'lodash';
const props = defineProps<{
initValue: AnyObject;
filterProject?: (value: unknown) => boolean;
onSubmit: (data: AnyObject) => Promise<any>;
}>();
const { loading, setLoading } = useLoading(false);
const formRef = ref();
const formValue = ref({ ...cloneDeep(props.initValue) });
const stepItems = [
{ value: 1, label: '基本信息', template: markRaw(Step1FormContent) },
{ value: 2, label: '补充信息', template: markRaw(Step2FormContent) },
{ value: 3, label: '上传文件', template: markRaw(Step3FormContent) },
];
const currentStep = ref(1);
const currentContent = computed(() => stepItems.find((item) => item.value === currentStep.value)?.template);
const nextBtnLabel = computed(() => (currentStep.value === 3 ? '提交' : '下一步'));
const onPrev = (): void => {
currentStep.value = Math.max(1, currentStep.value - 1);
};
const onNext = () => {
formRef.value.onValid(async () => {
if (currentStep.value === stepItems.length) {
setLoading(true);
props.onSubmit(formValue.value).finally(() => setLoading(false));
}
currentStep.value = Math.min(stepItems.length, currentStep.value + 1);
});
};
</script>
<template>
<Layout>
<Layout has-sider>
<LayoutSider :width="140" class="aside">
<Steps :current="currentStep" direction="vertical">
<Step v-for="item in stepItems" :key="item.value">{{ item.label }}</Step>
</Steps>
</LayoutSider>
<LayoutContent class="main">
<component :is="currentContent" ref="formRef" v-model="formValue" v-model:loading="loading" :filter-project="filterProject" />
</LayoutContent>
</Layout>
<LayoutFooter>
<Divider style="margin-top: 8px; margin-bottom: 20px" />
<Link :href="useSelectionStore().lyricTool" :hoverable="false" class="link-hover" icon>歌词制作工具</Link>
<Space style="float: right">
<IconButton v-show="currentStep !== 1" icon="left" label="上一步" @click="onPrev" />
<IconButton icon="right" icon-align="right" :loading="loading" :label="nextBtnLabel" @click="onNext" />
</Space>
</LayoutFooter>
</Layout>
</template>
<style scoped lang="less">
.aside {
box-shadow: unset !important;
border-right: 1px solid var(--color-border);
margin-right: 20px;
background-color: transparent;
}
.main {
min-width: 640px;
}
</style>
<script setup lang="ts">
import { Form, FormItem, Input, Message, Select } from '@arco-design/web-vue';
import { computed, ref } from 'vue';
import AvatarUpload from '@/components/avatar-upload/index.vue';
import { FieldRule, FormInstance } from '@arco-design/web-vue/es/form';
import { useSelectionStore } from '@/store';
import { get, set } from 'lodash';
import { useVModels } from '@vueuse/core';
const props = withDefaults(defineProps<{ loading?: boolean; modelValue?: any; filterProject?: (value: any) => boolean }>(), {
filterProject: () => true,
});
const emits = defineEmits(['update:modelValue', 'update:loading']);
const formRef = ref<FormInstance>();
const { modelValue: formValue } = useVModels(props, emits);
const formRule = {
'cover': [{ type: 'string', required: true, message: '请上传活动封面' }],
'song_name': [{ type: 'string', required: true, message: '请输入歌曲名称' }],
'expand.tag_ids': [
{ type: 'array', required: false, message: '请选择关联标签' },
{ type: 'array', maxLength: 3, message: '关联标签最多选中3个' },
],
'project_id': [{ type: 'number', min: 1, required: true, message: '请选择关联厂牌' }],
} as Record<string, FieldRule[]>;
const tagIds = computed({
get: () => get(formValue.value, 'expand.tag_ids', []),
set: (val) => set(formValue.value, 'expand.tag_ids', val),
});
const { activityTagOptions, projectOptions } = useSelectionStore();
const onTagExceedLimitError = (content: string, duration = 1000) => Message.warning({ content, duration });
defineExpose({
onValid: (callback?: () => void) => formRef.value?.validate((errors) => !errors && callback?.()),
});
</script>
<template>
<Form ref="formRef" :model="formValue" :rules="formRule" :auto-label-width="true">
<FormItem label="封面图片" field="cover" :show-colon="true">
<AvatarUpload v-model="formValue.cover" :size="100" shape="square" />
</FormItem>
<FormItem label="歌曲名称" field="song_name" :show-colon="true">
<Input v-model="formValue.song_name" :max-length="100" :show-word-limit="true" placeholder="请输入" />
</FormItem>
<FormItem label="曲风标签" field="expand.tag_ids" :show-colon="true">
<Select
v-model="tagIds"
:options="activityTagOptions"
:limit="3"
:field-names="{ value: 'id', label: 'name' }"
:fallback-option="false"
:virtual-list-props="{ height: 200 }"
:multiple="true"
placeholder="请选择"
@exceed-limit="onTagExceedLimitError('关联标签最多选中3个')"
/>
</FormItem>
<FormItem label="关联厂牌" field="project_id" :show-colon="true">
<Select
v-model="formValue.project_id"
:options="projectOptions.filter((item) => filterProject(item))"
:field-names="{ value: 'id', label: 'name' }"
:fallback-option="false"
:allow-search="true"
placeholder="请选择"
/>
</FormItem>
</Form>
</template>
<style scoped lang="less"></style>
<script setup lang="ts">
import { Form, FormItem, InputTag } from '@arco-design/web-vue';
import { ref, computed } from 'vue';
import { FieldRule, FormInstance } from '@arco-design/web-vue/es/form';
import { useVModels } from '@vueuse/core';
import { get, set } from 'lodash';
import UserSelect from '@/components/user-select/index.vue';
const props = defineProps<{ loading?: boolean; modelValue?: any }>();
const emits = defineEmits(['update:modelValue', 'update:loading']);
const formRef = ref<FormInstance>();
const { modelValue: formValue } = useVModels(props, emits);
const lyricistIds = computed({
get: () => get(formValue.value, 'expand.lyricist.ids', []),
set: (val) => set(formValue.value, 'expand.lyricist.ids', val),
});
const lyricistSupplement = computed({
get: () => get(formValue.value, 'expand.lyricist.supplement', []),
set: (val) => set(formValue.value, 'expand.lyricist.supplement', val),
});
const composerIds = computed({
get: () => get(formValue.value, 'expand.composer.ids', []),
set: (val) => set(formValue.value, 'expand.composer.ids', val),
});
const composerSupplement = computed({
get: () => get(formValue.value, 'expand.composer.supplement', []),
set: (val) => set(formValue.value, 'expand.composer.supplement', val),
});
const checkMaxUser = (value: any, cb: (error?: string) => void) => (value && value.length > 2 ? cb('最大选择2人') : false);
const formRule = {
'expand.lyricist.supplement': [{ type: 'array', validator: (value, cb) => checkMaxUser(value, cb) }],
'expand.composer.supplement': [{ type: 'array', validator: (value, cb) => checkMaxUser(value, cb) }],
'estimate_release_at': [{ required: true, message: '请选择预计发布时间' }],
} as Record<string, FieldRule[]>;
defineExpose({
onValid: (callback?: () => void) => formRef.value?.validate((errors) => !errors && callback?.()),
});
</script>
<template>
<Form ref="formRef" :model="formValue" :rules="formRule" :auto-label-width="true">
<FormItem label="词作者(用户)" field="expand.lyricist.ids" :show-colon="true">
<UserSelect v-model="lyricistIds" placeholder="请选择用户" :limit="2" />
</FormItem>
<FormItem label="词作者(未注册)" field="expand.lyricist.supplement" :show-colon="true">
<InputTag v-model="lyricistSupplement" placeholder="输入完成回车键分隔" :max-tag-count="2" :unique-value="true" />
<template #extra>
<div>注意：上方填1项即可，歌曲信息中【用户】可点击跳转用户主页，【未注册】仅显示；</div>
</template>
</FormItem>
<FormItem label="曲作者(用户)" field="expand.composer.ids" :show-colon="true">
<UserSelect v-model="composerIds" placeholder="请选择用户" :limit="2" />
</FormItem>
<FormItem label="曲作者(未注册)" field="expand.composer.supplement" :show-colon="true">
<InputTag v-model="composerSupplement" placeholder="输入完成回车键分隔" :max-tag-count="2" :unique-value="true" />
<template #extra>
<div>注意：上方填1项即可，歌曲信息中【用户】可点击跳转用户主页，【未注册】仅显示；</div>
</template>
</FormItem>
</Form>
</template>
<style scoped lang="less"></style>
<script setup lang="ts">
import { ref, computed, createVNode } from 'vue';
import { FieldRule, FormInstance } from '@arco-design/web-vue/es/form';
import { useVModels } from '@vueuse/core';
import { Form, FormItem, Link, Textarea, TypographyText } from '@arco-design/web-vue';
import InputUpload from '@/components/input-upload/index.vue';
import { useSelectionStore } from '@/store';
import { get, set } from 'lodash';
import useAuthApi from '@/api/auth';
import axios from 'axios';
import AudioPreview from '@/views/audition/activity-apply/components/audio-preview.vue';
import AudioPlayer from '@/components/audio-player/index.vue';
import { createModalVNode } from '@/utils/createVNode';
const props = defineProps<{ loading?: boolean; modelValue?: any }>();
const emits = defineEmits(['update:modelValue', 'update:loading']);
const formRef = ref<FormInstance>();
const { loading, modelValue: formValue } = useVModels(props, emits);
const guideSourceUrl = computed({
get: () => get(formValue.value, 'expand.guide_source.url', ''),
set: (val) => set(formValue.value, 'expand.guide_source.url', val),
});
const karaokeSourceUrl = computed({
get: () => get(formValue.value, 'expand.karaoke_source.url', ''),
set: (val) => set(formValue.value, 'expand.karaoke_source.url', val),
});
const onUpdateGuide = (file: { name: string; url: string; size: number }) => {
set(formValue.value, 'expand.guide_source', { name: file.name, url: file.url, size: file.size });
};
const onUpdateKaraoke = (file: { name: string; url: string; size: number }) => {
set(formValue.value, 'expand.karaoke_source', { name: file.name, url: file.url, size: file.size });
};
const { activityAudioAccept } = useSelectionStore();
const formRule = {
'expand.guide_source.url': [{ required: true, message: '请上传导唱文件' }],
'expand.karaoke_source.url': [{ required: false, message: '请上传伴奏文件' }],
'lyric': [{ type: 'string', required: true, message: '请填写歌词内容' }],
} as Record<string, FieldRule[]>;
const onDownload = (url: string, fileName: string) => useAuthApi.downloadFile(url, `${formValue.value.song_name}(${fileName})`);
const guideFile = ref<File | undefined>();
const getGuideFile = async () => {
if (!guideFile.value) {
guideFile.value = await axios
.get(`${guideSourceUrl.value}`, { responseType: 'blob', timeout: 60000 })
.then(({ data }) => Promise.resolve(data));
}
return guideFile.value;
};
const onAudioPreview = async () => {
const src = await getGuideFile();
createModalVNode(() => createVNode(AudioPreview, { src, lyric: formValue.value.lyric }), {
title: '预览歌词-整首',
footer: false,
closable: true,
});
};
defineExpose({
onValid: (callback?: () => void) => formRef.value?.validate((errors) => !errors && callback?.()),
});
</script>
<template>
<Form ref="formRef" :model="formValue" :rules="formRule" :auto-label-width="true">
<FormItem label="音频文件" field="expand.guide_source.url" :show-colon="true">
<InputUpload
v-model="guideSourceUrl"
:accept="activityAudioAccept"
:limit="100"
@success="onUpdateGuide"
@choose-file="(file) => (guideFile = file)"
@update:loading="(value) => (loading = value)"
/>
</FormItem>
<FormItem v-if="guideSourceUrl">
<template #label>
<Link icon @click="onDownload(guideSourceUrl, '音频文件')">下载音频</Link>
</template>
<AudioPlayer name="音频文件" :url="guideSourceUrl" />
</FormItem>
<FormItem label="伴奏文件" field="expand.karaoke_source.url" :show-colon="true">
<InputUpload
v-model="karaokeSourceUrl"
:accept="activityAudioAccept"
:limit="100"
@success="onUpdateKaraoke"
@update:loading="(value) => (loading = value)"
/>
</FormItem>
<FormItem v-if="karaokeSourceUrl">
<template #label>
<Link icon @click="onDownload(karaokeSourceUrl, '伴奏文件')">下载伴奏</Link>
</template>
<AudioPlayer name="伴奏文件" :url="karaokeSourceUrl" />
</FormItem>
<FormItem class="lyric" label="歌词文本" field="lyric" :show-colon="true">
<Textarea
v-model="formValue.lyric"
:auto-size="{ minRows: 7, maxRows: 7 }"
placeholder="请粘贴带时间的lrc歌词文本至输入框"
@blur="() => (formValue.lyric = formValue.lyric?.replace(/(\n[\s\t]*\r*\n)/g, '\n').replace(/^[\n\r\t]*|[\n\r\t]*$/g, ''))"
/>
<!-- <template #extra>
<Link :hoverable="false" :disabled="!guideSourceUrl || !formValue.lyric" @click="onAudioPreview"> 预览歌词</Link>
</template> -->
</FormItem>
<TypographyText type="danger" style="font-size: 13px">
注意：demo上架后，存在于您的厂牌私库。需要在App应用内，您的厂牌主页下，进行1对1分享给对方试听
</TypographyText>
</Form>
</template>
<style scoped lang="less">
.lyric {
:deep(.arco-form-item-extra) {
width: 100%;
text-align: right;
}
}
</style>
<template>
<page-view has-card has-bread>
<filter-search :loading="loading" @search="onSearch" @reset="onReset">
<filter-search-item label="歌曲名称">
<a-input v-model="filter.songName" :allow-clear="true" placeholder="请输入搜索歌曲名称" />
</filter-search-item>
<filter-search-item label="厂牌名称">
<a-input v-model="filter.projectName" :allow-clear="true" placeholder="请输入搜索厂牌名称" />
</filter-search-item>
<filter-search-item label="标签名称">
<a-input v-model="filter.tagName" :allow-clear="true" placeholder="请输入搜索标签名称" />
</filter-search-item>
<filter-search-item label="创建人">
<a-input v-model="filter.userName" :allow-clear="true" placeholder="请输入搜索创建人名称" />
</filter-search-item>
<filter-search-item label="创建时间">
<a-range-picker v-model="filter.createBetween" :allow-clear="true" />
</filter-search-item>
<filter-search-item label="状态">
<a-select v-model.number="filter.auditStatus" :options="useApply.auditStatusOption" placeholder="请选择搜索审核状态" />
</filter-search-item>
</filter-search>
<filter-table ref="tableRef" :loading="loading" :on-query="onQuery">
<template #tool="{ size }">
<a-button v-if="canCreate" :size="size" type="primary" @click="handleCreate">Demo上架</a-button>
</template>
<activity-table-column :width="540" data-index="id" title="歌曲" hide-sub-title />
<user-table-column :width="180" data-index="user_id" title="创建人" user="user" />
<date-table-column :width="120" data-index="created_at" title="创建时间" split />
<enum-table-column :width="120" data-index="audit_status" title="状态" :option="useApply.auditStatusOption" />
<space-table-column :width="80" data-index="operations" title="操作" direction="vertical">
<template #default="{ record }">
<span v-if="record.audit_status === 0" style="color: rgba(44, 44, 44, 0.5)">无</span>
<template v-else>
<a-link class="link-hover" :hoverable="false" @click="handleUpdate(record)">编辑</a-link>
<a-link class="link-hover" :hoverable="false" @click="handleDelete(record)">删除</a-link>
</template>
</template>
</space-table-column>
</filter-table>
</page-view>
</template>
<script lang="ts" name="audition-apply" setup>
import useLoading from '@/hooks/loading';
import { computed, createVNode, onActivated, ref } from 'vue';
import { AnyObject, QueryForParams } from '@/types/global';
import { useApply } from '@/api/activity';
import FilterTable from '@/components/filter/table.vue';
import UserTableColumn from '@/components/filter/user-table-column.vue';
import EnumTableColumn from '@/components/filter/enum-table-column.vue';
import SpaceTableColumn from '@/components/filter/space-table-column.vue';
import DateTableColumn from '@/components/filter/date-table-column.vue';
import ActivityTableColumn from '@/components/filter/activity-table-column.vue';
import { Message, Table, TableData, TabPane, Tabs } from '@arco-design/web-vue';
import FormContent from '@/views/audition/demo-apply/components/form-content.vue';
import { useRouteQuery } from '@vueuse/router';
import { useRoute } from 'vue-router';
import { createModalVNode } from '@/utils/createVNode';
import { promiseToBoolean } from '@/utils';
import { Project } from '@/types/project';
import { useSelectionStore } from '@/store';
import { findIndex } from 'lodash';
const { loading, setLoading } = useLoading(false);
const tableRef = ref();
const filter = ref<AnyObject>({});
const canCreate = computed(() => {
return findIndex(useSelectionStore().projectOptions, (item) => item.is_can_demo_apply === 1) !== -1;
});
const queryParams = computed(() => {
return {
...filter.value,
createdForm: 0,
songType: 2,
setColumn: ['id', 'song_name', 'cover', 'user_id', 'project_id', 'lyric', 'expand', 'audit_status', 'created_at'],
setWith: [
'project:id,name',
'user:id,real_name,nick_name,role',
'tags:id,name',
'applyRecords:id,activity_id,current,audit_msg,created_at',
],
setSort: ['-audit_status', '-updated_at'],
} as QueryForParams;
});
const onQuery = async (params: AnyObject): Promise<any> => {
setLoading(true);
return useApply.get({ ...queryParams.value, ...params }).finally(() => setLoading(false));
};
const onSearch = () => tableRef.value?.onPageChange();
const initAuditStatus = useRouteQuery('auditStatus', '');
const onReset = (initParams: AnyObject) => {
filter.value = { songName: '', projectName: '', tagName: '', userName: '', auditStatus: '', createBetween: [], ...initParams };
onSearch();
};
onActivated(() => {
if (useRoute()?.meta?.reload) {
onReset({ auditStatus: initAuditStatus.value ? Number(initAuditStatus.value) : '' });
} else {
tableRef.value?.onFetch();
}
});
const handleCreate = () => {
const dialog = createModalVNode(
() =>
createVNode(FormContent, {
initValue: { song_type: 2, cover: useSelectionStore().appleDemoCover, created_form: 0, is_push: 0, expand: { push_type: [] } },
filterProject: (value: Project) => value.is_can_demo_apply === 1,
onSubmit: (data: AnyObject) =>
useApply.create(data).then(() => {
Message.success(`申请上架活动：${data.song_name}`);
tableRef.value?.onFetch();
dialog.close();
}),
}),
{ title: '创建Demo', footer: false, closable: true, width: 'auto' }
);
};
const handleUpdate = (row: TableData) => {
const column = [
{ title: '操作人', dataIndex: 'id', width: 100, ellipsis: true, tooltip: true, render: () => '平台运营' },
{ title: '操作时间', dataIndex: 'created_at', width: 170, ellipsis: true, tooltip: true },
{ title: '驳回说明', dataIndex: 'audit_msg', width: 500, ellipsis: true, tooltip: true },
];
const dialog = createModalVNode(
() =>
createVNode(Tabs, { type: 'rounded', size: 'mini' }, [
createVNode(TabPane, { title: '试唱Demo上架', key: 'applyRef' }, () =>
createVNode(FormContent, {
initValue: row,
filterProject: (value: Project) => value.is_can_demo_apply === 1 || value.id === row.project_id,
onSubmit: (data: AnyObject) =>
useApply.update(row.id, Object.assign(data, { song_type: 2 })).then(() => {
Message.success(`重新申请上架活动：${row.song_name}`);
tableRef.value?.onFetch();
dialog.close();
}),
})
),
createVNode(TabPane, { title: `审核驳回记录（${row.apply_records?.length || 0}）`, key: 'record' }, () => {
return createVNode(Table, {
columns: column,
data: row.apply_records || [],
bordered: false,
tableLayoutFixed: true,
pagination: false,
scroll: { y: 370 },
size: 'medium',
rowKey: 'id',
});
}),
]),
{ title: '编辑Demo', footer: false, closable: true, width: '860px' }
);
};
const handleDelete = (row: TableData) => {
createModalVNode(`确认要将Demo：${row.song_name} 删除吗？`, {
title: '删除操作',
onBeforeOk: () => promiseToBoolean(useApply.destroy(row.id)),
onOk: () => tableRef.value?.onFetch(),
});
};
</script>
<style scoped></style>
<script setup lang="ts">
import { Activity } from '@/types/activity';
import { computed } from 'vue';
import { User } from '@/types/user';
import UserTag from '@/views/audition/activity-show/components/user-tag.vue';
import { unionBy } from 'lodash';
import useActivityApi from '@/api/activity';
const props = defineProps<{ data: Activity; loading?: boolean }>();
const links = computed(() => {
return unionBy(props.data.links || [], 'id');
});
const inSideLyricist = computed(
(): User[] => links.value?.filter((item: User) => props.data.expand?.lyricist?.ids?.indexOf(item.id) !== -1) || []
);
const outSideLyricist = computed(() => props.data.expand?.lyricist?.supplement || []);
const inSideComposer = computed(
(): User[] => links.value?.filter((item: User) => props.data.expand?.composer?.ids?.indexOf(item.id) !== -1) || []
);
const outSideComposer = computed(() => props.data.expand?.composer?.supplement || []);
</script>
<template>
<a-spin :loading="loading as boolean" style="width: 100%">
<a-card :bordered="false">
<a-form auto-label-width label-align="left">
<a-layout>
<a-layout-sider :width="130" style="background: none; box-shadow: none; padding-top: 6px">
<a-image show-loader :height="130" :width="130" :src="data.cover" />
</a-layout-sider>
<a-layout-content style="margin-left: 16px">
<a-form-item :hide-label="true">
<div class="title">{{ data.song_name }}</div>
<a-tag v-for="item in data.tags" :key="item.id" size="small" style="margin-right: 5px">
{{ item.name }}
</a-tag>
<span style="font-size: 10px">
{{ useActivityApi.statusOption.find((item) => item.value === data.status)?.label }}
</span>
</a-form-item>
<a-form-item
:label-col-style="{ flex: 0 }"
:wrapper-col-style="{ flex: 'unset', width: 'inherit' }"
:show-colon="true"
label="关联厂牌"
>
<div v-if="data.project">{{ data.project.name }}</div>
<div v-else>无</div>
</a-form-item>
<a-form-item style="margin-bottom: 0 !important" hide-label>
<a-form-item :label-col-style="{ flex: 0 }" :show-colon="true" label="作词">
<user-tag v-for="item in inSideLyricist" :key="item.id" :user="{ nick_name: item.nick_name }" style="margin-right: 5px" />
<user-tag v-for="item in outSideLyricist" :key="`lyricist-${item}`" :user="{ nick_name: item }" style="margin-right: 5px" />
</a-form-item>
<a-form-item :label-col-style="{ flex: 0 }" :show-colon="true" label="作曲">
<user-tag v-for="item in inSideComposer" :key="item.id" :user="{ nick_name: item.nick_name }" style="margin-right: 5px" />
<user-tag v-for="item in outSideComposer" :key="`lyricist-${item}`" :user="{ nick_name: item }" style="margin-right: 5px" />
</a-form-item>
</a-form-item>
<a-form-item style="margin-bottom: 0 !important" :label-col-style="{ flex: 0 }" :show-colon="true" label="创建信息">
<span v-if="data.user" style="margin-right: 8px">{{ data.user.nick_name }}</span>
<span style="margin-right: 8px">{{ data.created_at }} </span>
</a-form-item>
</a-layout-content>
</a-layout>
</a-form>
</a-card>
</a-spin>
</template>
<style lang="less" scoped>
.arco-form-item {
margin-bottom: 10px;
}
.arco-form-item-label-col {
flex: 0;
}
.title {
font-size: 16px;
font-weight: bold;
margin-right: 8px;
}
.right {
margin: 0 20px;
min-width: 600px;
}
</style>
<script setup lang="ts">
import { Modal, Textarea } from '@arco-design/web-vue';
import { computed, h } from 'vue';
import { ActivityExpand } from '@/types/activity-apply';
import { useAppStore } from '@/store';
import useAuthApi from '@/api/auth';
type MaterialData = {
title: string;
type: string;
content: string;
name?: string;
size?: string;
};
const props = defineProps<{ data: { expand: ActivityExpand; lyric: string; song_name: string }; hideTrack?: boolean }>();
const appStore = useAppStore();
const theme = computed(() => appStore.theme);
const lyricStyle = computed(() =>
theme.value === 'light' ? { border: 'none', backgroundColor: 'white' } : { border: 'none', backgroundColor: '#2a2a2b' }
);
const bytesForHuman = (bytes: number, decimals = 2) => {
const units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB'];
let i = 0;
// eslint-disable-next-line no-plusplus
for (i; bytes > 1024; i++) {
bytes /= 1024;
}
return `${parseFloat(bytes.toFixed(decimals))} ${units[i]}`;
};
const onDownload = (record: MaterialData) => useAuthApi.downloadFile(record.content, `${props.data.song_name}(${record.title})`);
const onViewLyric = (lyric: string) => {
Modal.open({
content: () => h(Textarea, { defaultValue: lyric, autoSize: { maxRows: 20 }, style: lyricStyle.value }),
footer: false,
closable: false,
});
};
const materials = computed((): MaterialData[] => {
return [
{
title: '音频',
type: 'guide',
name: props.data.expand?.guide_source?.name || '',
content: props.data.expand?.guide_source?.url || '',
size: bytesForHuman(props.data.expand?.guide_source?.size || 0),
},
{
title: '伴奏',
type: 'karaoke',
name: props.data.expand?.karaoke_source?.name || '',
content: props.data.expand?.karaoke_source?.url || '',
size: bytesForHuman(props.data.expand?.karaoke_source?.size || 0),
},
{ title: '歌词', type: 'Lyric', content: props.data.lyric },
];
});
</script>
<template>
<a-table row-key="type" :data="materials" :bordered="false" :table-layout-fixed="true" :pagination="false">
<template #columns>
<a-table-column title="物料类型" align="center" data-index="title" :width="140" />
<a-table-column title="音频播放" data-index="content">
<template #cell="{ record }">
<template v-if="record.content">
<audio-player v-if="['guide', 'karaoke'].indexOf(record.type) !== -1" :name="record.type" :url="record.content" />
<div v-if="record.type === 'track'">{{ [record.name, record.size].join('，') }}</div>
</template>
</template>
</a-table-column>
<a-table-column title="操作" align="center" :width="200">
<template #cell="{ record }">
<template v-if="record.content">
<a-button v-if="record.type === 'Lyric'" type="primary" size="small" @click="onViewLyric(record.content)">查看</a-button>
<a-button v-else type="primary" size="small" @click="onDownload(record)">下载</a-button>
</template>
</template>
</a-table-column>
</template>
</a-table>
</template>
<style scoped lang="less"></style>
<script setup lang="ts" name="audition-demo-show">
import { useRoute, useRouter } from 'vue-router';
import { onMounted, ref } from 'vue';
import useActivityApi from '@/api/activity';
import BasicCard from '@/views/audition/demo-show/components/basic-card.vue';
import MaterialTable from '@/views/audition/demo-show/components/material-table.vue';
import ViewUserTable from '@/views/audition/activity-show/components/view-user-table.vue';
import LikeUserTable from '@/views/audition/activity-show/components/like-user-table.vue';
import { useRouteQuery } from '@vueuse/router';
const activityKey = Number(useRoute().params.id);
const tabKey = useRouteQuery('tabKey', 'material');
const activity = ref({});
const total = ref({ submit_total: 0, match_total: 0, view_total: 0, like_total: 0, manager_total: 0 });
const router = useRouter();
onMounted(async () => {
await useActivityApi
.show(activityKey, {
songType: 2,
setWith: [
'project:id,name,is_promote,is_can_manage',
'tags:id,name',
'user:id,nick_name,real_name,identity',
'links:id,nick_name,identity',
],
setColumn: ['id', 'song_name', 'cover', 'lyric', 'expand', 'status', 'created_at', 'song_type', 'project_id', 'user_id'],
})
.then((data) => {
activity.value = data;
})
.catch(() => router.replace({ name: 'exception-404' }));
});
</script>
<template>
<page-view has-bread>
<basic-card :loading="!activity" :data="activity" />
<a-card style="margin-top: 16px">
<a-tabs v-model:active-key="tabKey" :animation="true" :header-padding="false" :justify="true" type="rounded">
<a-tab-pane key="material" title="歌曲物料">
<material-table :data="activity" />
</a-tab-pane>
<a-tab-pane key="listen-user" :title="`试听用户(${total.view_total})`">
<view-user-table :activity-id="activityKey" @init-total="(value) => (total.view_total = value)" />
</a-tab-pane>
<a-tab-pane key="like-user" :title="`收藏用户(${total.like_total})`">
<like-user-table :activity-id="activityKey" @init-total="(value) => (total.like_total = value)" />
</a-tab-pane>
</a-tabs>
</a-card>
</page-view>
</template>
<style lang="less" scoped>
textarea.arco-textarea::-webkit-scrollbar {
display: none;
}
</style>
<script setup lang="ts" name="audition-activity">
import { computed, createVNode, onMounted, ref } from 'vue';
import { AnyObject, AttributeData } from '@/types/global';
import useLoading from '@/hooks/loading';
import useActivityApi, { useApply } from '@/api/activity';
import NumberTableColumn from '@/components/filter/number-table-column.vue';
import { Message, TableData } from '@arco-design/web-vue';
import EnumTableColumn from '@/components/filter/enum-table-column.vue';
import { createInputVNode, createModalVNode } from '@/utils/createVNode';
import DemoForm from '@/views/audition/demo-apply/components/form-content.vue';
import ActivityForm from '@/views/audition/activity-apply/components/form-content.vue';
import DateTableColumn from '@/components/filter/date-table-column.vue';
import ActivityTableColumn from '@/components/filter/activity-table-column.vue';
import { useSelectionStore } from '@/store';
import { Project } from '@/types/project';
import { findIndex } from 'lodash';
import { promiseToBoolean } from '@/utils';
const props = defineProps<{
initFilter?: AttributeData;
hideSearchItem?: string[];
hideTool?: boolean;
hideCreate?: boolean;
exportName?: string;
queryHook?: () => void;
}>();
const { statusOption, get, getExport, update, destroy, changeStatus } = useActivityApi;
const { loading, setLoading } = useLoading(false);
const filter = ref<AttributeData>({});
const tableRef = ref();
const canCreate = computed(() => {
return findIndex(useSelectionStore().projectOptions, (item) => item.is_can_demo_apply === 1) !== -1;
});
const onQuery = async (params: object) => {
setLoading(true);
props.queryHook?.();
return get({
...filter.value,
...params,
setColumn: [
'id',
'song_name',
'cover',
'user_id',
'project_id',
'send_url',
'lyric',
'expand',
'status',
'created_at',
'audit_at',
'clip_lyric',
],
setWith: ['project:id,name', 'user:id,real_name,nick_name,identity', 'tags:id,name'],
setWithCount: ['viewUsers as view_count', 'collectionUsers as like_count'],
}).finally(() => setLoading(false));
};
const onSort = (column: string, type: string) => {
filter.value.setSort = type ? [(type === 'desc' ? '-' : '') + column, '-id'] : ['-id'];
tableRef.value?.onFetch();
};
const onSearch = () => tableRef.value?.onPageChange(1);
const onReset = () => {
filter.value = {
songName: '',
projectName: '',
tagName: '',
status: [],
createBetween: [],
...props.initFilter,
songType: 2,
setSort: ['-id'],
};
tableRef.value?.resetSort();
onSearch();
};
const handleCreate = () => {
const dialog = createModalVNode(
() =>
createVNode(DemoForm, {
initValue: { song_type: 2, cover: useSelectionStore().appleDemoCover, created_form: 0, is_push: 0, expand: { push_type: [] } },
filterProject: (value: Project) => value.is_can_demo_apply === 1,
onSubmit: (data: AnyObject) =>
useApply.create(data).then(() => {
Message.success(`申请上架Demo：${data.song_name}`);
tableRef.value?.onFetch();
dialog.close();
}),
}),
{ title: '创建Demo', footer: false, closable: true, width: 'auto' }
);
};
const onExport = () => getExport(props.exportName || 'Demo', filter.value);
const onUpdate = (record: TableData) => {
const dialog = createModalVNode(
() =>
createVNode(DemoForm, {
initValue: record,
filterProject: (value: Project) => value.is_can_demo_apply === 1 || value.id === record.project_id,
onSubmit: (attribute: AnyObject) =>
update(record.id, Object.assign(attribute, { song_type: 2 })).then(() => {
Message.success(`编辑Demo：${record.song_name}`);
tableRef.value?.onFetch();
dialog.close();
}),
}),
{ title: '编辑Demo', footer: false, width: 'auto', closable: true }
);
};
const onDown = (record: TableData) => {
const msg = ref<string>('');
createModalVNode(
() =>
createInputVNode(msg, {
'placeholder': '请输入下架原因',
'maxLength': 20,
'show-word-limit': true,
}),
{
title: '变更状态',
titleAlign: 'start',
okText: '下架',
onBeforeOk: (done) =>
changeStatus(record.id, { status: 'down', msg: msg.value })
.then(() => {
tableRef.value?.onFetch();
done(true);
})
.catch(() => done(false)),
}
);
};
const handleCreateActivity = (row: TableData) => {
console.log(row);
let editData = JSON.parse(JSON.stringify(row));
let { cover } = editData;
if (cover && cover == useSelectionStore().appleDemoCover) {
editData.cover = '';
}
editData.song_type = 1;
const dialog = createModalVNode(
() =>
createVNode(ActivityForm, {
initValue: editData,
filterProject: (value: Project) => value.is_can_apply === 1 || value.id === editData.project_id,
onSubmit: (data: AnyObject) =>
useApply.create(data).then(() => {
Message.success(`申请上架活动：${data.song_name}`);
tableRef.value?.onFetch();
dialog.close();
}),
}),
{ title: '创建歌曲', footer: false, closable: true, width: 'auto' }
);
};
const onUp = (record: TableData, status: 'up' | 'reUp') => {
createModalVNode(`请确认是否上架歌曲：${record.song_name}`, {
title: '变更状态',
titleAlign: 'start',
okText: '上架',
onBeforeOk: (done) =>
changeStatus(record.id, { status })
.then(() => {
tableRef.value?.onFetch();
done(true);
})
.catch(() => done(false)),
});
};
const onDelete = (row: TableData) =>
createModalVNode(`确认要将Demo：${row.song_name} 删除吗？`, {
title: '删除操作',
onBeforeOk: () => promiseToBoolean(destroy(row.id)),
onOk: () => tableRef.value?.onFetch(),
});
onMounted(() => onReset());
</script>
<template>
<page-view has-bread has-card>
<filter-search :model="filter" :loading="loading" @search="onSearch" @reset="onReset">
<filter-search-item label="歌曲名称" field="song_name">
<a-input v-model="filter.songName" allow-clear placeholder="请输入搜索歌曲名称" />
</filter-search-item>
<filter-search-item v-if="!hideSearchItem?.includes('projectName')" label="厂牌名称" field="projectName">
<a-input v-model="filter.projectName" allow-clear placeholder="请输入搜索厂牌名称" />
</filter-search-item>
<filter-search-item label="标签名称" field="tagName">
<a-input v-model="filter.tagName" allow-clear placeholder="请输入搜索标签名称" />
</filter-search-item>
<filter-search-item label="状态" field="status">
<a-select v-model="filter.status" :options="statusOption" allow-clear multiple placeholder="请选择搜索状态" />
</filter-search-item>
<filter-search-item label="创建时间" field="createBetween">
<a-range-picker v-model="filter.createBetween" show-time :time-picker-props="{ defaultValue: ['00:00:00', '23:59:59'] }" />
</filter-search-item>
</filter-search>
<filter-table ref="tableRef" :loading="loading" :on-query="onQuery" @row-sort="onSort">
<template #tool="{ size }">
<a-button v-if="!hideCreate && canCreate" :size="size" type="primary" @click="handleCreate">Demo上架</a-button>
</template>
<template v-if="!hideTool" #tool-right>
<export-button :on-download="onExport" />
</template>
<activity-table-column data-index="id" title="试唱歌曲" :width="560" hide-sub-title />
<number-table-column data-index="view_count" title="试听人数" :dark-value="0" :width="110" has-sort />
<number-table-column data-index="like_count" title="收藏人数" :dark-value="0" :width="110" has-sort />
<date-table-column data-index="created_at" title="创建时间" :width="110" split has-sort />
<!-- <date-table-column data-index="audit_at" title="通过时间" :width="110" split has-sort /> -->
<enum-table-column data-index="status" title="状态" :option="statusOption" :width="110" has-sort />
<a-table-column :width="90" align="center" data-index="operations" fixed="right" title="操作">
<template #cell="{ record }">
<a-space direction="vertical" fill>
<a-link :hoverable="false" class="link-hover" @click="$router.push({ name: 'audition-demo-show', params: { id: record.id } })">
查看
</a-link>
<a-link v-if="record.status === 1" :hoverable="false" class="link-hover" @click="onDown(record)">下架</a-link>
<a-link v-if="record.status === 1" :hoverable="false" class="link-hover" @click="handleCreateActivity(record)">上架试唱</a-link>
<a-link v-if="record.status === 2" :hoverable="false" class="link-hover" @click="onUp(record, 'up')">上架</a-link>
<a-link v-if="record.status !== 0 && record.status !== 5" :hoverable="false" class="link-hover" @click="onUpdate(record)">
编辑
</a-link>
<a-link v-if="record.status === 2" :hoverable="false" class="link-hover" @click="onDelete(record)">删除</a-link>
</a-space>
</template>
</a-table-column>
</filter-table>
</page-view>
</template>
<style scoped lang="less">
:deep(.arco-table-cell) {
padding: 5px 16px !important;
}
</style>
<template>
<router-view v-slot="{ Component, route }">
<keep-alive :exclude="['audition-activity-show', 'audition-demo-show']">
<component :is="Component" :key="route.path" />
</keep-alive>
</router-view>
</template>
<script lang="ts" setup>
import { onMounted } from 'vue';
import { useSelectionStore } from '@/store';
const { queryAll } = useSelectionStore();
onMounted(() => queryAll());
</script>
<style lang="less" scoped>
.container {
padding: 0 30px 20px 20px;
}
.operations {
display: flex;
}
</style>
<template>
<a-card :hoverable="false" :bordered="false">
<div class="content-wrap">
<div class="content">
<div data-v-55251d00="" class="arco-statistic">
<div class="arco-statistic-title">上架歌曲曲风</div>
<div class="arco-statistic-content">
<div class="arco-statistic-value">
<span class="arco-statistic-value-integer"></span>
</div>
</div>
</div>
</div>
<div class="chart">
<Chart :option="chartOption" style="width: 100%" />
</div>
</div>
</a-card>
</template>
<script lang="ts" setup>
import useChartOption from '@/hooks/chart-option';
import { onMounted, ref } from 'vue';
import Chart from '@/components/chart/index.vue';
import useDashboardApi from '@/api/dashboard';
import { ToolTipFormatterParams } from '@/types/echarts';
type recordType = { value: number; name: string };
const record = ref<recordType[]>([]);
const { chartOption } = useChartOption(() => {
return {
grid: { left: 0, right: 0, top: 0, bottom: 0 },
label: { show: false },
tooltip: {
show: true,
trigger: 'item',
formatter(params) {
const item = params as ToolTipFormatterParams;
return `
<div class="content-panel">
<p>
<span style="background-color: ${item.color}" class="tooltip-item-icon"></span>
<span>${item.name}</span>
</p>
<span class="tooltip-value">${item.value?.toLocaleString()}</span>
<span class="tooltip-value">${item.percent?.toLocaleString()}%</span>
</div>`;
},
className: 'echarts-tooltip-diy',
},
series: [{ type: 'pie', radius: ['65%', '90%'], label: { show: false }, data: record.value }],
};
});
onMounted(async () => {
record.value = await useDashboardApi.activityStyle();
});
</script>
<style lang="less" scoped>
.echarts-tooltip-diy {
background: none !important;
border: none !important;
}
:deep(.arco-card) {
border-radius: 4px;
}
:deep(.arco-card-body) {
width: 100%;
height: 193px;
}
.content-wrap {
width: 100%;
height: 100%;
display: flex;
white-space: nowrap;
.content {
width: 108px;
:deep(.arco-statistic) {
.arco-statistic-title {
font-size: 14px;
font-weight: bold;
white-space: nowrap;
}
.arco-statistic-content {
margin-top: 10px;
}
}
}
.chart {
width: calc(100% - 108px);
vertical-align: bottom;
}
}
</style>
<template>
<a-card class="general-card" title="用户试唱" :header-style="{ paddingBottom: 0 }" :body-style="{ padding: '15px 20px 13px 20px' }">
<template #extra>
<a-space>
<a-range-picker
v-model="createBetween"
value-format="YYYY-MM-DD"
style="width: 260px"
:allow-clear="false"
:disabled-date="disabledDate"
@change="$refs.tableRef?.onPageChange()"
/>
<export-button :on-download="onExport" />
</a-space>
</template>
<filter-table ref="tableRef" :loading="loading" :on-query="onQuery">
<link-table-column
title="名称"
data-index="activity_name"
:width="160"
:formatter="(item:SubmitWork) => item.activity_name + ([3,5].includes(item.activity_status)? '（ 结束 ）' : '')"
:to="(item:SubmitWork) => $router.push({ name:item.activity_type === 1 ?'audition-activity-show':'audition-demo-show', params: { id: item.activity_id} })"
/>
<enum-table-column title="类型" data-index="activity_type" :width="60" :option="useActivityApi.songTypeOption" />
<link-table-column
title="厂牌"
data-index="project_id"
:width="120"
:formatter="(item) => item.project?.name"
:to="(item: SubmitWork) => $router.push({ name: 'project-show', params: { id: item.project_id } })"
/>
<filter-table-column title="试唱用户" data-index="user_nick_name" nick-index="user_nick_name" :width="120" />
<filter-table-column title="身份" data-index="user_identify" :width="80">
<template #default="{ record }: { record: SubmitWork }">
<span v-if="record.user_identity === 1">音乐人</span>
<span v-else-if="[2, 3].includes(record.user_identity)">经纪人</span>
<span v-else>未认证</span>
</template>
</filter-table-column>
<filter-table-column title="经纪人" data-index="business.nick_name" :width="120">
<template #default="{ record }: { record: SubmitWork }">
<span v-if="record.business">{{ record.business.nick_name }}</span>
<span v-else style="color: rgba(44, 44, 44, 0.5)">无</span>
</template>
</filter-table-column>
<filter-table-column title="试唱方式" data-index="mode" :width="80">
<template #default="{ record }: { record: SubmitWork }">
<template v-if="record.mode === 1">自主上传</template>
<template v-else>{{ record.sing_type === 'Full' ? '唱整首' : '唱片段' }}</template>
</template>
</filter-table-column>
<link-table-column
title="合作模式"
data-index="price_id"
:width="80"
:formatter="(item:SubmitWork) => (item.price ? '查看报价' : '')"
:to="(item:SubmitWork) =>onViewPrice(item.price as UserSubmitPrice) "
/>
<filter-table-column title="提交时间" data-index="submit_at" :width="100">
<template #default="{ record }: { record: SubmitWork }">
{{ dayjs(record.submit_at).format('MM/DD HH:mm') || '' }}
</template>
</filter-table-column>
<filter-table-column title="试唱音频" data-index="demo_url" :width="230" :tooltip="false">
<template #default="{ record }: { record: SubmitWork }">
<audio-player :url="record.demo_url" :name="record.user_nick_name" />
</template>
</filter-table-column>
<a-table-column title="操作" data-index="demo" :width="120">
<template #cell="{ record }">
<a-button v-if="record.status === 1" size="mini" type="primary" status="success">已确认合作</a-button>
<a-button v-else-if="record.status === 2" size="mini">试唱不合适</a-button>
<a-button v-else-if="record.status === 0 && [3, 5].indexOf(record.activity_status) !== -1" size="mini">未采纳</a-button>
<a-space v-else-if="record.status === 0 && record.activity_status === 1" size="mini">
<a-button type="primary" size="mini" @click="onPass(record)">合作</a-button>
<a-button type="primary" status="danger" size="mini" @click="onNotPass(record)">不合适</a-button>
</a-space>
<a-button v-else size="mini">其他</a-button>
</template>
</a-table-column>
</filter-table>
</a-card>
</template>
<script lang="ts" setup>
import { computed, createVNode, h, onMounted, ref } from 'vue';
import dayjs from 'dayjs';
import useLoading from '@/hooks/loading';
import { Form, FormItem, Modal, ModalConfig } from '@arco-design/web-vue';
import { AnyObject } from '@/types/global';
import { ActivityWork } from '@/types/activity-work';
import LinkTableColumn from '@/components/filter/link-table-column.vue';
import { promiseToBoolean } from '@/utils';
import useActivityApi, { useWorkApi } from '@/api/activity';
import useDashboardApi from '@/api/dashboard';
import { createModalVNode } from '@/utils/createVNode';
import EnumTableColumn from '@/components/filter/enum-table-column.vue';
type UserSubmitPrice = {
id: number;
value: { year: string; ratio: number; amounts: number; is_reward: 1 | 0; is_dividend: 1 | 0 };
is_deduct: 1 | 0;
is_talk: 1 | 0;
is_accept_address: 1 | 0;
address: { name: string; parent: { name: string } };
};
// eslint-disable-next-line @typescript-eslint/no-unused-vars
type SubmitWork = {
id: number;
activity_id: number;
activity_name: string;
activity_type: number;
activity_status: number;
project_id: number;
project?: { id: number; name: string };
user_id: number;
user_nick_name: string;
user_identity: number;
business_id: number;
business?: { id: number; nick_name: string; identify: number };
share_id: number;
share?: { id: number; nick_name: string; identify: number };
price_id: number;
price?: UserSubmitPrice;
mode: 0 | 1;
sing_type: 'Part' | 'Full';
demo_url: string;
status: 0 | 1 | 2;
submit_at: string;
};
const { loading, setLoading } = useLoading(false);
const { submitWork, getSubmitWorkExport } = useDashboardApi;
const createBetween = ref([dayjs().subtract(7, 'day').format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')]);
const timeFilter = computed(() => {
return [`${createBetween.value[0]} 00:00:00`, `${createBetween.value[1]} 23:59:59`];
});
const tableRef = ref();
const onQuery = async (params: AnyObject) => {
setLoading(true);
return submitWork({ submitBetween: timeFilter.value, ...params, setSort: '-submit_at' }).finally(() => setLoading(false));
};
const onExport = () => getSubmitWorkExport('用户试唱', { submitBetween: timeFilter.value, setSort: '-submit_at' });
const onPass = (row: ActivityWork) => {
const itemStyle = { lineHeight: '28px', margin: '4px 0' };
return createModalVNode(
() =>
createVNode('ol', {}, [
createVNode('li', { style: itemStyle }, '此条Demo的状态将变更为合作状态'),
createVNode('li', { style: itemStyle }, `活动《${row.activity_name}》的状态变更为完成状态！`),
]),
{
title: '确认合作',
bodyStyle: { padding: 0 },
onBeforeOk: () => promiseToBoolean(useWorkApi.changeStatus(row.id, { status: 1 })),
onOk: () => tableRef.value?.onFetch(),
}
);
};
const onNotPass = (row: ActivityWork) => {
Modal.open({
title: '不合适标记',
content: `请确认是否将用户：${row.user_nick_name} 提交的试唱标记为不合适,并反馈给用户？`,
closable: false,
onBeforeOk: () => promiseToBoolean(useWorkApi.changeStatus(row.id, { status: 2, remark: '' })),
onOk: () => tableRef.value?.onFetch(),
});
};
const onViewPrice = (price: UserSubmitPrice) => {
Modal.open({
title: '用户报价',
content: () =>
createVNode(
Form,
{ size: 'small', autoLabelWidth: true },
{
default: () => [
h(FormItem, { label: '唱酬', showColon: true, rowClass: 'mb-0' }, price.value.is_reward ? `${price.value.amounts} 元` : '无'),
h(
FormItem,
{ label: '分成', showColon: true, rowClass: 'mb-0' },
price.value.is_dividend ? `${price.value.ratio}% | ${price.value.year} | ${price.is_deduct ? '抵扣' : '不抵扣'}` : '无'
),
h(FormItem, { label: '价格是否可谈', showColon: true, rowClass: 'mb-0' }, price.is_talk ? '【可谈】' : '【不可谈】'),
h(
FormItem,
{ label: '录音地点', showColon: true, rowClass: 'mb-0' },
`${[price.address?.parent?.name, price.address?.name].join('/')}${
price.is_accept_address ? '【接受其他录音地点】' : '【不接受其他录音地点】'
}`
),
],
}
),
hideCancel: true,
bodyStyle: { padding: '8px 20px' },
closable: false,
maskClosable: false,
escToClose: false,
okText: '我知道了',
} as ModalConfig);
};
const disabledDate = (current?: Date) => dayjs(current).isAfter(dayjs()) || dayjs(current).isBefore(dayjs().subtract(30, 'day'));
onMounted(async () => tableRef.value?.onPageChange());
</script>
<style lang="less" scoped>
.title {
line-height: normal;
font-weight: 500;
font-size: 16px;
}
:deep(.arco-table-cell) {
padding: 5px 8px !important;
.arco-table-td-content .arco-btn-size-small {
padding: 5px !important;
}
}
</style>
<template>
<a-card class="general-card" title="待处理事项" :body-style="{ paddingBottom: '10px', height: '160px' }">
<a-table
row-key="id"
:loading="loading"
:data="source"
:pagination="pagination"
:show-header="false"
:bordered="false"
size="small"
:table-layout-fixed="true"
@page-change="onPageChange"
>
<template #columns>
<a-table-column data-index="id" :width="36">
<template #cell="{ rowIndex }">{{ getIndex(rowIndex) }}</template>
</a-table-column>
<a-table-column data-index="activity_id" :width="260" :ellipsis="true" :tooltip="true">
<template #cell="{ record }">{{ getTitle(record) }}</template>
</a-table-column>
<a-table-column data-index="msg" :width="200" :ellipsis="true" :tooltip="true" />
<a-table-column data-index="option" :width="50">
<template #cell>
<a-button type="text" @click="onClick()">处理</a-button>
</template>
</a-table-column>
</template>
</a-table>
</a-card>
</template>
<script lang="ts" setup>
import useLoading from '@/hooks/loading';
import { onMounted, ref } from 'vue';
import usePagination from '@/hooks/pagination';
import { add, multiply } from 'lodash';
import { useRouter } from 'vue-router';
import useDashboardApi from '@/api/dashboard';
type ToDoType = {
id: number;
project?: { id: number; name: string };
song_name: string;
msg: string;
};
const { loading, setLoading } = useLoading(false);
const { pagination, setPage, setPageSize, setTotal } = usePagination({ pageSize: 3, showPageSize: false, size: 'mini' });
const source = ref<ToDoType[]>([]);
const router = useRouter();
const getIndex = (index: number) => {
return add(index + 1, multiply(pagination.value.current - 1, pagination.value.pageSize));
};
const getTitle = (record: ToDoType) => {
return `厂牌【${record.project?.name || '无'}】提交的歌曲【${record.song_name}】未通过审核`;
};
const onClick = () => {
router.push({ name: 'audition-apply', query: { auditStatus: 2 } });
};
const onQuery = () => {
setLoading(true);
useDashboardApi
.todo({ page: pagination.value.current, pageSize: pagination.value.pageSize })
.then(({ data, meta }) => {
source.value = data as ToDoType[];
setPage(meta.current);
setPageSize(meta.limit);
setTotal(meta.total);
})
.finally(() => {
setLoading(false);
});
};
const onPageChange = (page: number) => {
pagination.value.current = page;
onQuery();
};
onMounted(() => onPageChange(1));
</script>
<style lang="less" scoped>
:deep(.arco-table-cell) {
padding: 5px 8px !important;
& > .arco-table-td-content .arco-btn-size-small {
padding: 5px !important;
}
}
</style>
<template>
<a-card :hoverable="false" :bordered="false">
<div class="content-wrap">
<div class="content">
<div data-v-55251d00="" class="arco-statistic">
<div class="arco-statistic-title">歌手擅长曲风</div>
<div class="arco-statistic-content">
<div class="arco-statistic-value">
<span class="arco-statistic-value-integer"></span>
</div>
</div>
</div>
</div>
<div class="chart">
<Chart :option="chartOption" style="width: 100%" />
</div>
</div>
</a-card>
</template>
<script lang="ts" setup>
import useChartOption from '@/hooks/chart-option';
import { onMounted, ref } from 'vue';
import Chart from '@/components/chart/index.vue';
import { ToolTipFormatterParams } from '@/types/echarts';
import useDashboardApi from '@/api/dashboard';
type recordType = { value: number; name: string };
const record = ref<recordType[]>([]);
const { chartOption } = useChartOption(() => {
return {
grid: { left: 0, right: 0, top: 0, bottom: 0 },
label: { show: false },
tooltip: {
show: true,
trigger: 'item',
formatter(params) {
const item = params as ToolTipFormatterParams;
return `
<div class="content-panel">
<p>
<span style="background-color: ${item.color}" class="tooltip-item-icon"></span>
<span style="margin-right: 10px">${item.name}</span>
</p>
<span class="tooltip-value">${item.value?.toLocaleString()}</span>
<span class="tooltip-value">${item.percent?.toLocaleString()}%</span>
</div>`;
},
className: 'echarts-tooltip-diy',
},
series: [{ type: 'pie', radius: ['65%', '90%'], label: { show: false }, data: record.value }],
};
});
onMounted(async () => {
record.value = await useDashboardApi.userStyle();
});
</script>
<style lang="less" scoped>
.echarts-tooltip-diy {
background: none !important;
border: none !important;
}
:deep(.arco-card) {
border-radius: 4px;
}
:deep(.arco-card-body) {
width: 100%;
height: 193px;
}
.content-wrap {
width: 100%;
height: 100%;
display: flex;
white-space: nowrap;
.content {
width: 108px;
:deep(.arco-statistic) {
.arco-statistic-title {
font-size: 14px;
font-weight: bold;
white-space: nowrap;
}
.arco-statistic-content {
margin-top: 10px;
}
}
}
.chart {
width: calc(100% - 108px);
vertical-align: bottom;
}
}
</style>
<template>
<div class="container">
<Breadcrumb :items="['dashboard']" />
<a-space class="bot" direction="vertical" :size="16" fill>
<a-grid :cols="24" :col-gap="12" :row-gap="12">
<a-grid-item :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 6, xxl: 6 }">
<activity-style-card />
</a-grid-item>
<a-grid-item :span="{ xs: 12, sm: 12, md: 12, lg: 12, xl: 6, xxl: 6 }">
<user-style-card />
</a-grid-item>
<a-grid-item :span="{ xs: 24, sm: 24, md: 24, lg: 12, xl: 12, xxl: 12 }">
<to-do-card />
</a-grid-item>
</a-grid>
</a-space>
<SubmitWorkPanel class="bot" />
</div>
</template>
<script lang="ts" setup>
import SubmitWorkPanel from '@/views/dashboard/components/submit-work-panel.vue';
import ToDoCard from '@/views/dashboard/components/to-do-card.vue';
import { onMounted } from 'vue';
import UserStyleCard from '@/views/dashboard/components/user-style-card.vue';
import ActivityStyleCard from '@/views/dashboard/components/activity-style-card.vue';
onMounted(() => {});
</script>
<style lang="less" scoped>
.container {
padding: 0 30px 20px 20px;
}
.bot {
margin-bottom: 16px;
}
</style>
<template>
<div class="container">
<Breadcrumb :items="['exception', 'exception-403']" />
<div class="content">
<a-result class="result" status="403" subtitle="对不起，您没有访问该资源的权限" />
<!-- <a-button key="back" type="primary" @click="goBack"> 返回</a-button>-->
</div>
</div>
</template>
<script lang="ts" setup>
import { useRouter } from 'vue-router';
const router = useRouter();
const goBack = () => router.back();
</script>
<template>
<div class="container">
<Breadcrumb :items="['exception', 'exception-404']" />
<div class="content">
<a-result class="result" status="404" subtitle="抱歉，页面不见了～">
</a-result>
<div class="operation-row">
<!-- <a-button key="again" style="margin-right: 16px"> 重试</a-button>-->
<a-button key="back" type="primary" @click="goBack"> 返回</a-button>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import { useRouter } from 'vue-router';
const router = useRouter();
const goBack = () => router.back();
</script>
<template>
<div class="container">
<Breadcrumb :items="['exception', 'exception-500']" />
<div class="content">
<a-result
class="result"
status="500"
subtitle="抱歉，服务器出了点问题～"
/>
<a-button key="back" type="primary" @click="goBack">返回</a-button>
</div>
</div>
</template>
<script lang="ts" setup>
import { useRouter } from 'vue-router';
const router = useRouter();
const goBack = () => router.back();
</script>
<style lang="less" scoped></style>
<template>
<router-view />
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({});
</script>
<style lang="less" scoped>
.container {
// position: relative;
// display: flex;
// flex-direction: column;
// align-items: center;
// justify-content: center;
// height: 100%;
// text-align: center;
// background-color: var(--color-bg-1);
padding: 0 30px 20px 20px;
height: calc(100% - 20px);
:deep(.content) {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
text-align: center;
background-color: var(--color-bg-1);
border-radius: 4px;
}
}
</style>
<template>
<a-form ref="fromRef" :model="userInfo" :rules="rules" class="login-form" layout="vertical">
<a-form-item field="email" hide-label>
<a-input v-model="userInfo.email" placeholder="请输入登陆邮箱">
<template #prefix>
<icon-user />
</template>
</a-input>
</a-form-item>
<a-form-item field="password" hide-label>
<a-input-password v-model="userInfo.password" allow-clear placeholder="请输入登陆密码">
<template #prefix>
<icon-lock />
</template>
</a-input-password>
</a-form-item>
</a-form>
</template>
<script lang="ts" setup>
import { IconLock, IconUser } from '@arco-design/web-vue/es/icon';
import { ref } from 'vue';
import { FormInstance } from '@arco-design/web-vue/es/form';
import { AttributeData } from '@/types/global';
import { showLoginAccount } from '@/utils/env';
const userInfo = ref({
email: showLoginAccount ? '234233@qq.com' : '',
password: showLoginAccount ? '123123' : '',
});
const rules = {
email: [{ required: true, message: '登陆邮箱不能为空' }],
password: [{ required: true, message: '密码不能为空' }],
};
const fromRef = ref<FormInstance>();
const onSubmit = (callback: (value: AttributeData) => void) => {
fromRef.value?.validate((errors) => !errors && callback(userInfo.value));
};
defineExpose({ onSubmit });
</script>
<style lang="less" scoped>
.login-form {
&-error-msg {
height: 32px;
color: rgb(var(--red-6));
line-height: 32px;
}
&-register-btn {
color: var(--color-text-3) !important;
}
}
</style>
<template>
<a-form v-model="formValue" class="login-form" size="small" auto-label-width>
<a-form-item show-colon label="找回方式" style="margin-bottom: 10px">
<a-radio-group v-model="apply" :options="applyType" />
</a-form-item>
<a-form-item v-if="apply === 1" show-colon label="手机号">
<a-input v-model="formValue.phone" max-length="14" placeholder="请输入" />
</a-form-item>
<a-form-item v-else show-colon label="邮箱">
<a-input v-model="email" placeholder="请输入" />
</a-form-item>
<a-form-item show-colon label="验证码">
<a-row :gutter="8">
<a-col :span="18">
<a-input v-model="formValue.code" max-length="6" placeholder="请输入" />
</a-col>
<a-col :span="6">
<a-button html-type="submit" type="primary">获取</a-button>
</a-col>
</a-row>
</a-form-item>
<div class="form-actions">
<a-link @click="type = 'login'">返回</a-link>
<a-button html-type="submit" type="primary">提交</a-button>
</div>
</a-form>
</template>
<script lang="ts" setup>
import { inject, ref } from 'vue';
const type = inject('type');
const apply = ref(1);
const applyType = ref([
{ value: 1, label: '手机号' },
{ value: 2, label: '邮箱' },
]);
const email = ref('');
const formValue = ref({
phone: '',
code: '',
});
</script>
<style scoped>
.form-actions {
display: flex;
justify-content: space-between;
}
</style>
<template>
<a-form ref="fromRef" :model="userInfo" :rules="rules" class="login-form" layout="vertical">
<a-form-item field="phone" hide-label>
<a-select
v-model="userInfo.area"
style="flex: 100px; margin-right: 15px"
:options="areaOption"
:virtual-list-props="{ height: 200 }"
/>
<a-input v-model="userInfo.phone" placeholder="请输入登陆手机号" :max-length="11">
<template #prefix>
<icon-phone />
</template>
</a-input>
</a-form-item>
<a-form-item show-colon hide-label>
<a-input v-model="userInfo.code" hide-button :max-length="6" placeholder="验证码" @input="formatCode">
<template #prefix>
<icon-message />
</template>
<template #suffix>
<a-link type="text" class="login-form-sms-btn" :disabled="countTime !== 0" @click="onSend()">
{{ countTime <= 0 ? '获取验证码' : countTime + 's' }}
</a-link>
</template>
</a-input>
</a-form-item>
</a-form>
</template>
<script lang="ts" setup>
import { IconMessage, IconPhone } from '@arco-design/web-vue/es/icon';
import { onMounted, ref } from 'vue';
import { useIntervalFn } from '@vueuse/core';
import { FormInstance } from '@arco-design/web-vue/es/form';
import { AttributeData } from '@/types/global';
import { Message } from '@arco-design/web-vue';
import useProviderApi from '@/api/provider';
import { map, union } from 'lodash';
const fromRef = ref<FormInstance>();
const countTime = ref(0);
const userInfo = ref({ area: '+86', phone: '', code: '' });
const areaOption = ref<string[]>([]);
onMounted(() => {
// eslint-disable-next-line no-return-assign
useProviderApi.area().then(({ data }) => (areaOption.value = union(map(data, (item) => item.identifier))));
});
const rules = {
phone: [{ required: true, message: '请输入手机号' }],
code: [{ required: true, message: '请输入验证码' }],
};
// eslint-disable-next-line no-return-assign
const { pause, resume } = useIntervalFn(() => (countTime.value <= 0 ? pause() : (countTime.value -= 1)), 1000);
const onSend = async () => {
if (countTime.value !== 0 || (await fromRef.value?.validateField('phone'))) {
return;
}
useProviderApi.sms('login', userInfo.value.phone, userInfo.value.area).then(() => {
Message.success('短信发送成功，请注意查收！');
countTime.value = 60;
resume();
});
};
const onSubmit = (callback: (value: AttributeData) => void) => {
fromRef.value?.validate((errors) => !errors && callback(userInfo.value));
};
const formatCode = (value: string) => {
userInfo.value.code = value.replace(/\D/g, '').slice(0, 6);
};
defineExpose({ onSubmit });
</script>
<style lang="less" scoped>
.login-form {
&-error-msg {
height: 32px;
color: rgb(var(--red-6));
line-height: 32px;
}
&-sms-btn {
padding-left: -12px;
font-size: 12px;
}
}
</style>
<template>
<div class="container">
<div class="banner">
<div class="banner-inner"></div>
</div>
<div class="content">
<div class="content-inner">
<div class="login-form-wrapper">
<div class="login-form-title">海星试唱</div>
<div class="login-form-sub-title">厂牌管理后台</div>
<a-card :bordered="true" :hoverable="true" :style="{ width: '360px' }">
<a-tabs v-model:active-key="loginType" :justify-="true" :animation="true">
<a-tab-pane key="email" title="邮箱登录">
<EmailForm ref="emailRef" />
</a-tab-pane>
<a-tab-pane key="phone" title="手机登录">
<PhoneForm ref="phoneRef" />
</a-tab-pane>
</a-tabs>
<div class="login-form-actions">
<!-- <a-link>忘记密码</a-link>-->
<a-button type="primary" :long="true" :loading="loading" @click="onLogin()"> 登录</a-button>
</div>
</a-card>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import EmailForm from '@/views/login/components/email-form.vue';
import PhoneForm from '@/views/login/components/phone-form.vue';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import { AttributeData } from '@/types/global';
import { setToken } from '@/utils/auth';
import { Message } from '@arco-design/web-vue';
import useLoading from '@/hooks/loading';
import useProviderApi from '@/api/provider';
const { loading, setLoading } = useLoading(false);
const loginType = ref<'email' | 'phone'>('email');
const emailRef = ref<InstanceType<typeof EmailForm>>();
const phoneRef = ref<InstanceType<typeof PhoneForm>>();
const router = useRouter();
const onSubmit = (value: AttributeData) => {
setLoading(true);
useProviderApi
.login(loginType.value, value)
.then(({ data }) => {
const { access_token, refresh_token, nick_name } = data;
setToken(access_token, refresh_token);
Message.success(`欢迎回来,管理员：${nick_name}`);
const { path } = router.currentRoute.value.query;
router.replace((path as string) || '/dashboard');
})
.finally(() => setLoading(false));
};
const onLogin = () => {
// eslint-disable-next-line default-case
switch (loginType.value) {
case 'email':
emailRef.value?.onSubmit(onSubmit);
break;
case 'phone':
phoneRef.value?.onSubmit(onSubmit);
break;
}
};
</script>
<style lang="less" scoped>
.container {
display: flex;
height: 100vh;
.banner {
width: 550px;
}
.content {
position: relative;
display: flex;
flex: 1;
align-items: center;
justify-content: center;
padding-bottom: 40px;
.login-form-wrapper {
width: 320px;
}
.login-form-title {
color: var(--color-text-1);
font-weight: 500;
font-size: 30px;
line-height: 46px;
text-align: center;
}
.login-form-sub-title {
color: var(--color-text-3);
font-size: 16px;
line-height: 24px;
text-align: center;
margin-bottom: 16px;
}
.login-form-actions {
display: flex;
justify-content: right;
}
}
.footer {
position: absolute;
right: 0;
bottom: 0;
width: 100%;
}
}
.logo {
position: fixed;
top: 24px;
left: 22px;
z-index: 1;
display: inline-flex;
align-items: center;
&-text {
margin-right: 4px;
margin-left: 4px;
color: var(--color-fill-1);
font-size: 20px;
}
}
.banner {
display: flex;
align-items: center;
justify-content: center;
&-inner {
flex: 1;
height: 100%;
//background-image: url('/src/assets/images/bg.jpg');
background-image: url('https://spreadcdn.hikoon.com/default/bg.jpg');
background-size: cover;
}
}
</style>
<script setup lang="ts">
import { Image, List, ListItem, ListItemMeta, TypographyParagraph } from '@arco-design/web-vue';
import AudioPlayer from '@/components/audio-player/index.vue';
import { onMounted, ref } from 'vue';
import usePagination from '@/hooks/pagination';
import useLoading from '@/hooks/loading';
import useProjectApi from '@/api/project';
const props = defineProps<{ projectKey: number }>();
const { loading, setLoading } = useLoading(false);
const { pagination, setPage, setTotal } = usePagination({ pageSize: 5, size: 'mini', showPageSize: false });
const source = ref([]);
const onQuery = () => {
setLoading(true);
useProjectApi
.dynamics(props.projectKey, {
type: 'audio',
page: pagination.value.current,
pageSize: pagination.value.pageSize,
setSort: '-is_top',
})
.then(({ data, meta }) => {
source.value = data as [];
setPage(meta.current);
setTotal(meta.total);
})
.finally(() => setLoading(false));
};
onMounted(() => onQuery());
</script>
<template>
<List
:loading="loading"
:data="source"
:bordered="false"
:scrollbar="true"
:max-height="460"
:pagination-props="pagination"
@page-change="(page) => setPage(page) && onQuery()"
>
<template #item="{ item }">
<ListItem :key="item.id" style="padding: 4px 16px; height: 60px">
<ListItemMeta style="height: 60px; text-align: center; overflow: hidden">
<template #avatar>
<Image :src="`${item.properties.cover.url}?x-oss-process=image/format,webp`" :width="60" :height="60" fit="fill" />
</template>
<template #title>
<TypographyParagraph :ellipsis="{ rows: 1, showTooltip: true }" style="margin-bottom: 10px; margin-top: 10px; text-align: left">
{{ item.intro }}
</TypographyParagraph>
</template>
<template #description>
<AudioPlayer :url="item.properties.url" style="width: 410px; height: 20px" name="" />
</template>
</ListItemMeta>
</ListItem>
</template>
</List>
</template>
<style scoped lang="less">
:deep(.arco-list-pagination) {
margin-top: 10px !important;
margin-bottom: 10px !important;
}
</style>
<script setup lang="ts">
import { createVNode, ref, toRef } from 'vue';
import { createModalVNode } from '@/utils/createVNode';
import { Project } from '@/types/project';
import ImageDynamics from '@/views/project-show/components/image-dynamics.vue';
import AudioDynamics from '@/views/project-show/components/audio-dynamics.vue';
import VideoDynamics from '@/views/project-show/components/video-dynamics.vue';
const props = defineProps<{
loading?: boolean;
project: Project & {
activity_count: number;
activity_up_count: number;
activity_match_count: number;
activity_send_count: number;
demo_count: number;
demo_up_count: number;
image_dynamic_count: number;
audio_dynamic_count: number;
video_dynamic_count: number;
};
}>();
const project = toRef(props, 'project');
const coverVisible = ref(false);
const onViewImage = () =>
createModalVNode(() => createVNode(ImageDynamics, { projectKey: project.value.id }), {
title: '厂牌相册',
titleAlign: 'center',
closable: true,
footer: false,
escToClose: true,
width: '780px',
});
const onViewAudio = () =>
createModalVNode(() => createVNode(AudioDynamics, { projectKey: project.value.id }), {
title: '厂牌音频',
titleAlign: 'center',
closable: true,
footer: false,
escToClose: true,
bodyStyle: { padding: '0 !important' },
width: '540px',
});
const onViewVideo = () =>
createModalVNode(() => createVNode(VideoDynamics, { projectKey: project.value.id }), {
title: '厂牌视频',
titleAlign: 'center',
closable: true,
footer: false,
escToClose: true,
width: '780px',
});
</script>
<template>
<a-spin :loading="loading as boolean" style="width: 100%">
<a-card :bordered="false">
<a-form :model="project" size="small" auto-label-width>
<a-row justify="start" align="start">
<a-col flex="130px" style="border-radius: 60px; overflow: hidden">
<a-image show-loader :height="130" :width="130" :src="project.cover" />
</a-col>
<a-col style="margin-left: 16px" flex="1">
<a-row :gutter="16" justify="space-between">
<a-col :span="20">
<a-form-item label="厂牌名称" :show-colon="true">{{ project.name }}</a-form-item>
</a-col>
</a-row>
<a-grid :cols="4" :col-gap="12" :row-gap="0">
<a-grid-item :span="1">
<a-form-item label="创建用户" :show-colon="true">
<span v-if="project.user">{{ project.user.nick_name }}</span>
<span v-else style="color: rgba(44, 44, 44, 0.5)">无</span>
</a-form-item>
</a-grid-item>
<a-grid-item :span="3">
<a-form-item label="主理人" :show-colon="true">
<span v-if="project.master">{{ project.master.nick_name }}</span>
<span v-else style="color: rgba(44, 44, 44, 0.5)">无</span>
</a-form-item>
</a-grid-item>
<a-grid-item :span="1">
<a-form-item label="试唱歌曲总数" :show-colon="true">
{{ project.activity_count || 0 }}
</a-form-item>
</a-grid-item>
<a-grid-item :span="1">
<a-form-item label="试唱进行中" :show-colon="true">
{{ project.activity_up_count || 0 }}
</a-form-item>
</a-grid-item>
<a-grid-item :span="1">
<a-form-item label="试唱已匹配" :show-colon="true">
{{ project.activity_match_count || 0 }}
</a-form-item>
</a-grid-item>
<a-grid-item :span="1">
<a-form-item label="歌曲已发行" :show-colon="true">
{{ project.activity_send_count || 0 }}
</a-form-item>
</a-grid-item>
<a-grid-item :span="1">
<a-form-item label="demo歌曲总数" :show-colon="true">
{{ project.demo_count || 0 }}
</a-form-item>
</a-grid-item>
<a-grid-item :span="3">
<a-form-item label="demo进行中" :show-colon="true">
{{ project.demo_up_count || 0 }}
</a-form-item>
</a-grid-item>
<a-grid-item>
<a-form-item label="头部封面" :show-colon="true">
<a-link v-if="project.head_cover" :hoverable="false" @click="coverVisible = !coverVisible">查看</a-link>
<span v-else style="color: rgba(44, 44, 44, 0.5)">无</span>
</a-form-item>
</a-grid-item>
<a-grid-item>
<a-form-item label="厂牌相册" :show-colon="true">
<a-link v-if="project.image_dynamic_count" :hoverable="false" @click="onViewImage">查看</a-link>
<span v-else style="color: rgba(44, 44, 44, 0.5)">无</span>
</a-form-item>
</a-grid-item>
<a-grid-item>
<a-form-item label="厂牌音频" :show-colon="true">
<a-link v-if="project.audio_dynamic_count" :hoverable="false" @click="onViewAudio">查看</a-link>
<span v-else style="color: rgba(44, 44, 44, 0.5)">无</span>
</a-form-item>
</a-grid-item>
<a-grid-item>
<a-form-item label="厂牌视频" :show-colon="true">
<a-link v-if="project.video_dynamic_count" :hoverable="false" @click="onViewVideo">查看</a-link>
<span v-else style="color: rgba(44, 44, 44, 0.5)">无</span>
</a-form-item>
</a-grid-item>
</a-grid>
<a-form-item label="厂牌简介" :show-colon="true">
<a-typography-paragraph
v-if="project.intro"
style="margin-bottom: 0"
type="secondary"
:ellipsis="{ rows: 2, showTooltip: true }"
>
{{ project.intro }}
</a-typography-paragraph>
<span v-else style="color: #cccccc">无</span>
</a-form-item>
</a-col>
</a-row>
</a-form>
</a-card>
</a-spin>
<a-image-preview
v-model:visible="coverVisible"
:closable="false"
:src="`${project.head_cover}?x-oss-process=image/format,webp`"
:actions-layout="[]"
/>
</template>
<style scoped lang="less">
:deep(.arco-typography) {
text-align: left;
margin-bottom: 0;
width: 100%;
}
:deep(.arco-form-item) {
margin-bottom: 4px;
}
:deep(.arco-space-item) {
margin-bottom: 0 !important;
}
</style>
<script setup lang="ts">
import { ImagePreviewGroup, Grid, GridItem, Image, Pagination } from '@arco-design/web-vue';
import { onMounted, ref } from 'vue';
import usePagination from '@/hooks/pagination';
import useProjectApi from '@/api/project';
const props = defineProps<{ projectKey: number }>();
const { pagination, setPage, setTotal } = usePagination({ pageSize: 12 });
const source = ref([]);
const onQuery = () =>
useProjectApi
.dynamics(props.projectKey, {
type: 'image',
page: pagination.value.current,
pageSize: pagination.value.pageSize,
setSort: '-is_top',
})
.then(({ data, meta }) => {
source.value = data as [];
setPage(meta.current);
setTotal(meta.total);
});
onMounted(() => onQuery());
</script>
<template>
<ImagePreviewGroup>
<Grid :cols="6" :col-gap="12" :row-gap="16">
<GridItem v-for="item in source" :key="item.id">
<Image
:src="`${item.properties.url}?x-oss-process=image/format,webp`"
:width="120"
:height="120"
fit="scale-down"
:show-loader="true"
/>
</GridItem>
</Grid>
</ImagePreviewGroup>
<Pagination
size="mini"
style="justify-content: flex-end; margin-top: 10px"
:current="pagination.current"
:total="pagination.total"
:page-size="pagination.pageSize"
:hide-on-single-page="true"
@change="(current:number) => setPage(current) && onQuery()"
/>
</template>
<style scoped lang="less"></style>
<script setup lang="ts">
import { onMounted, ref } from 'vue';
import useLoading from '@/hooks/loading';
import { AnyObject } from '@/types/global';
import useProjectApi from '@/api/project';
import { Card, Input, Select } from '@arco-design/web-vue';
import EnumTableColumn from '@/components/filter/enum-table-column.vue';
import PhoneTableColumn from '@/components/filter/phone-table-column.vue';
import FilterSearch from '@/components/filter/search.vue';
import FilterSearchItem from '@/components/filter/search-item.vue';
import FilterTable from '@/components/filter/table.vue';
import FilterTableColumn from '@/components/filter/table-column.vue';
import useUserApi from '@/api/user';
import UserTableColumn from '@/components/filter/user-table-column.vue';
const props = defineProps<{ projectKey: number; queryHook?: () => void }>();
const { loading, setLoading } = useLoading(false);
const { manageUsers } = useProjectApi;
const { sexOption, statusOption, officialStatusOption } = useUserApi;
const filter = ref({});
const tableRef = ref();
const onSearch = () => tableRef.value?.onPageChange(1);
const onReset = () => {
filter.value = { nick_name: '', sex: '', phone_like: '', email_like: '', status: '' };
onSearch();
};
const onQuery = async (params: AnyObject) => {
setLoading(true);
props.queryHook?.();
return manageUsers(props.projectKey, { ...filter.value, ...params, setSort: 'id' }).finally(() => setLoading(false));
};
onMounted(() => onReset());
</script>
<template>
<Card :bordered="false">
<FilterSearch :model="filter" :loading="loading" @search="onSearch" @reset="onReset">
<FilterSearchItem label="用户艺名">
<Input v-model="filter.nick_name" allow-clear placeholder="请输入" />
</FilterSearchItem>
<FilterSearchItem label="性别">
<Select v-model="filter.sex" allow-clear placeholder="请选择" :options="sexOption" />
</FilterSearchItem>
<FilterSearchItem label="用户邮箱">
<Input v-model="filter.email_like" allow-clear placeholder="请输入" />
</FilterSearchItem>
<FilterSearchItem label="手机号码">
<Input v-model="filter.phone_like" allow-clear placeholder="请输入" />
</FilterSearchItem>
<FilterSearchItem label="状态">
<Select v-model="filter.status" allow-clear placeholder="请选择" :options="statusOption" />
</FilterSearchItem>
</FilterSearch>
<FilterTable ref="tableRef" :loading="loading" :on-query="onQuery">
<user-table-column title="用户艺名" data-index="id" :width="200" show-avatar />
<EnumTableColumn title="性别" data-index="sex" :option="sexOption" :dark-value="0" :width="70" />
<FilterTableColumn title="用户邮箱" data-index="email" :width="180" />
<PhoneTableColumn title="手机号码" data-index="phone" area-index="area_code" :width="160" />
<EnumTableColumn title="关注服务号" data-index="official_status" :option="officialStatusOption" :dark-value="0" :width="120" />
<EnumTableColumn title="状态" data-index="status" :option="statusOption" :dark-value="0" :width="80" />
</FilterTable>
</Card>
</template>
<style scoped lang="less"></style>
<script setup lang="ts">
import { Card, Input, Select } from '@arco-design/web-vue';
import { onMounted, ref } from 'vue';
import useLoading from '@/hooks/loading';
import useUserApi from '@/api/user';
import { AnyObject } from '@/types/global';
import useProjectApi from '@/api/project';
import FilterTable from '@/components/filter/table.vue';
import FilterSearch from '@/components/filter/search.vue';
import FilterSearchItem from '@/components/filter/search-item.vue';
import UserTableColumn from '@/components/filter/user-table-column.vue';
import EnumTableColumn from '@/components/filter/enum-table-column.vue';
import PhoneTableColumn from '@/components/filter/phone-table-column.vue';
import FilterTableColumn from '@/components/filter/table-column.vue';
const props = defineProps<{ projectKey: number; queryHook?: () => void }>();
const { loading, setLoading } = useLoading(false);
const { sexOption, officialStatusOption } = useUserApi;
const { memberUsers } = useProjectApi;
const filter = ref({ nick_name: '', sex: '', phone_like: '', email_like: '' });
const tableRef = ref();
const onSearch = () => tableRef.value?.onPageChange(1);
const onReset = () => {
filter.value = { nick_name: '', sex: '', phone_like: '', email_like: '' };
onSearch();
};
const onQuery = async (params: AnyObject) => {
setLoading(true);
props.queryHook?.();
return memberUsers(props.projectKey, { ...filter.value, ...params, setSort: '-is_top' }).finally(() => setLoading(false));
};
onMounted(() => onReset());
</script>
<template>
<Card :bordered="false">
<FilterSearch :model="filter" :loading="loading" @search="onSearch" @reset="onReset">
<FilterSearchItem label="用户艺名">
<Input v-model="filter.nick_name" allow-clear placeholder="请输入" />
</FilterSearchItem>
<FilterSearchItem label="性别">
<Select v-model="filter.sex" allow-clear placeholder="请选择" :options="sexOption" />
</FilterSearchItem>
<FilterSearchItem label="用户邮箱">
<Input v-model="filter.email_like" allow-clear placeholder="请输入" />
</FilterSearchItem>
<FilterSearchItem label="手机号码">
<Input v-model="filter.phone_like" allow-clear placeholder="请输入" />
</FilterSearchItem>
</FilterSearch>
<FilterTable ref="tableRef" :loading="loading" :on-query="onQuery">
<user-table-column title="用户艺名" data-index="id" :width="200" show-avatar />
<EnumTableColumn title="性别" data-index="sex" :option="sexOption" :dark-value="0" :width="70" />
<FilterTableColumn title="用户邮箱" data-index="email" :width="180" />
<PhoneTableColumn title="手机号码" data-index="phone" area-index="area_code" :width="160" />
<EnumTableColumn title="关注服务号" data-index="official_status" :option="officialStatusOption" :dark-value="0" :width="120" />
</FilterTable>
</Card>
</template>
<style scoped lang="less"></style>
<script setup lang="ts">
import FilterTable from '@/components/filter/table.vue';
import FilterTableColumn from '@/components/filter/table-column.vue';
import EnumTableColumn from '@/components/filter/enum-table-column.vue';
import { Space, Link, Message, Modal, Form, FormItem, Select } from '@arco-design/web-vue';
import useLoading from '@/hooks/loading';
import { AnyObject } from '@/types/global';
import { computed, createVNode, onMounted, ref } from 'vue';
import useUserApi from '@/api/user';
import { User } from '@/types/user';
import useActivityApi from '@/api/activity';
const props = defineProps<{ projectKey: number; hasPermission: boolean; user: User }>();
const { loading, setLoading } = useLoading(false);
// eslint-disable-next-line import/no-named-as-default-member
const { statusOption, updateManage, deleteManage } = useActivityApi;
const permissionOption = [
{ label: '查看试唱', value: 'view' },
{ label: '查看报价', value: 'price' },
{ label: '回复结果', value: 'audit' },
];
const tableRef = ref();
const onQuery = async (params: AnyObject) => {
setLoading(true);
return useUserApi.manageSongs(props.user.id, { project_id: props.projectKey, ...params }).finally(() => setLoading(false));
};
onMounted(() => tableRef.value?.onPageChange(1));
const label = computed(() => `${props.user.nick_name} 管理歌曲共：${tableRef.value?.getCount()} 首`);
const formatPermission = (permission: any[]) =>
permission
.map((item) => `[${permissionOption.find((option) => option.value === item)?.label}]` || '')
.filter((item) => item.length !== 0)
.join('');
const onUpdate = (record: any) => {
const formValue = ref<string[]>(record?.permission || ['view']);
Modal.open({
title: '修改',
titleAlign: 'center',
content: () =>
createVNode(Form, { layout: 'vertical', model: {} }, () =>
createVNode(FormItem, { label: '设置用户权限', rowClass: 'mb-0' }, () =>
createVNode(Select, {
'multiple': true,
'options': permissionOption,
'modelValue': formValue.value,
'onUpdate:modelValue': (val?: string[]) => {
if (!val?.includes('view')) {
val?.unshift('view');
}
formValue.value = val || [];
},
})
)
),
onBeforeOk: (done) =>
updateManage(record.id, { permission: formValue.value })
.then(() => {
Message.success('更新成功');
tableRef.value?.onFetch();
done(true);
})
.catch(() => done(false)),
});
};
const onDelete = (record: any) => {
Modal.open({
title: '删除操作',
content: `确认取消用户：${props.user?.nick_name} 的外部管理员身份`,
closable: false,
onBeforeOk: (done) =>
deleteManage(record.id)
.then(() => {
Message.success('删除成功');
tableRef.value?.onFetch();
done(true);
})
.catch(() => done(false)),
});
};
</script>
<template>
<div style="margin-bottom: 10px">{{ label }}</div>
<FilterTable ref="tableRef" :loading="loading" :on-query="onQuery">
<FilterTableColumn title="厂牌名称" data-index="project.name" :width="120" />
<FilterTableColumn title="歌曲名称" data-index="activity_name" :width="160" />
<FilterTableColumn title="权限" data-index="permission" :width="240">
<template #default="{ record }">{{ formatPermission(record.permission || []) }}</template>
</FilterTableColumn>
<EnumTableColumn title="状态" data-index="activity_status" :width="100" :option="statusOption" />
<FilterTableColumn v-if="hasPermission" title="操作" :width="120">
<template #default="{ record }">
<Space>
<Link class="link-hover" :hoverable="false" @click="onUpdate(record)">修改</Link>
<Link class="link-hover" :hoverable="false" @click="onDelete(record)">取消管理</Link>
</Space>
</template>
</FilterTableColumn>
</FilterTable>
</template>
<style scoped lang="less"></style>
<script setup lang="ts">
import useLoading from '@/hooks/loading';
import FilterSearchItem from '@/components/filter/search-item.vue';
import { Card, Input, Link, Message, Modal, Select } from '@arco-design/web-vue';
import FilterSearch from '@/components/filter/search.vue';
import { h, onMounted, ref } from 'vue';
import FilterTable from '@/components/filter/table.vue';
import { AnyObject } from '@/types/global';
import useProjectApi from '@/api/project';
import EnumTableColumn from '@/components/filter/enum-table-column.vue';
import PhoneTableColumn from '@/components/filter/phone-table-column.vue';
import FilterTableColumn from '@/components/filter/table-column.vue';
import OutFormContent from '@/views/project-show/components/out-form-content.vue';
import { User } from '@/types/user';
import useUserApi from '@/api/user';
import UserTableColumn from '@/components/filter/user-table-column.vue';
const props = defineProps<{ projectKey: number; hasPermission?: boolean; queryHook?: () => void }>();
const { loading, setLoading } = useLoading(false);
const { outManageUsers, destroyOutManageUsers } = useProjectApi;
const { sexOption, statusOption, officialStatusOption } = useUserApi;
const filter = ref({});
const tableRef = ref();
const onSearch = () => tableRef.value?.onPageChange(1);
const onReset = () => {
filter.value = { nick_name: '', sex: '', phone_like: '', email_like: '', status: '' };
onSearch();
};
const onQuery = async (params: AnyObject) => {
setLoading(true);
props.queryHook?.();
return outManageUsers(props.projectKey, { ...filter.value, ...params, setSort: 'id' }).finally(() => setLoading(false));
};
onMounted(() => onReset());
const onView = (row: User) => {
Modal.open({
title: '管理歌曲',
titleAlign: 'center',
content: () => h(OutFormContent, { user: row, projectKey: props.projectKey, hasPermission: props.hasPermission }),
footer: false,
closable: true,
width: '860px',
onClose: () => tableRef.value?.onFetch(),
});
};
const onDelete = (record: User) => {
Modal.open({
title: '删除操作',
content: `取消用户：${record?.nick_name} 在此厂牌下的外部管理员身份`,
onBeforeOk: (done) =>
destroyOutManageUsers(props.projectKey, { user_id: record.id })
.then(() => {
Message.success('删除成功');
tableRef.value?.onFetch();
done(true);
})
.catch(() => done(false)),
});
};
</script>
<template>
<Card :bordered="false">
<FilterSearch :model="filter" :loading="loading" @search="onSearch" @reset="onReset">
<FilterSearchItem label="用户艺名">
<Input v-model="filter.nick_name" allow-clear placeholder="请输入" />
</FilterSearchItem>
<FilterSearchItem label="性别">
<Select v-model="filter.sex" allow-clear placeholder="请选择" :options="sexOption" />
</FilterSearchItem>
<FilterSearchItem label="用户邮箱">
<Input v-model="filter.email_like" allow-clear placeholder="请输入" />
</FilterSearchItem>
<FilterSearchItem label="手机号码">
<Input v-model="filter.phone_like" allow-clear placeholder="请输入" />
</FilterSearchItem>
<FilterSearchItem label="状态">
<Select v-model="filter.status" allow-clear placeholder="请选择" :options="statusOption" />
</FilterSearchItem>
</FilterSearch>
<FilterTable ref="tableRef" :loading="loading" :on-query="onQuery">
<user-table-column title="用户艺名" data-index="id" :width="200" show-avatar />
<EnumTableColumn title="性别" data-index="sex" :option="sexOption" :dark-value="0" :width="70" />
<FilterTableColumn title="用户邮箱" data-index="email" :width="200" />
<PhoneTableColumn title="手机号码" data-index="phone" area-index="area_code" :width="160" />
<FilterTableColumn title="管理歌曲" :width="100">
<template #default="{ record }: { record: User & { activities_count: number[] } }">
<Link class="link-hover" :hoverable="false" @click="onView(record)">{{ record.activities_count }}首</Link>
</template>
</FilterTableColumn>
<EnumTableColumn title="关注服务号" data-index="official_status" :option="officialStatusOption" :dark-value="0" :width="120" />
<EnumTableColumn title="状态" data-index="status" :option="statusOption" :dark-value="0" :width="80" />
<FilterTableColumn v-if="hasPermission" title="操作" :width="100">
<template #default="{ record }">
<Link class="link-hover" :hoverable="false" @click="onDelete(record)">删除</Link>
</template>
</FilterTableColumn>
</FilterTable>
</Card>
</template>
<style scoped lang="less"></style>
<script setup lang="ts">
import { ImagePreviewGroup, Grid, GridItem, Image, Pagination } from '@arco-design/web-vue';
import { h, onMounted, ref } from 'vue';
import usePagination from '@/hooks/pagination';
import useProjectApi from '@/api/project';
import { createModalVNode } from '@/utils/createVNode';
import vue3videoPlay from 'vue3-video-play';
import 'vue3-video-play/dist/style.css';
const props = defineProps<{ projectKey: number }>();
const { pagination, setPage, setTotal } = usePagination({ pageSize: 12 });
const source = ref<any[]>([]);
const onQuery = () =>
useProjectApi
.dynamics(props.projectKey, {
type: 'video',
page: pagination.value.current,
pageSize: pagination.value.pageSize,
setSort: '-is_top',
})
.then(({ data, meta }) => {
source.value = data as [];
setPage(meta.current);
setTotal(meta.total);
});
onMounted(() => onQuery());
const onClick = (item: any) =>
createModalVNode(
() => h(vue3videoPlay, { src: item.properties.url, controlBtns: ['volume', 'speedRate', 'pip', 'pageFullScreen', 'fullScreen'] }),
{
width: 'auto',
modalStyle: { padding: '0 !important' },
simple: true,
footer: false,
maskClosable: true,
escToClose: true,
}
);
</script>
<template>
<ImagePreviewGroup>
<Grid :cols="6" :col-gap="12" :row-gap="16">
<GridItem v-for="item in source" :key="item.id">
<Image
:src="item.properties.cover.url"
:width="120"
:height="70"
fit="scale-down"
:show-loader="true"
:preview="false"
@click="onClick(item)"
/>
</GridItem>
</Grid>
</ImagePreviewGroup>
<Pagination
size="mini"
style="justify-content: flex-end; margin-top: 10px"
:current="pagination.current"
:total="pagination.total"
:page-size="pagination.pageSize"
:hide-on-single-page="true"
@change="(current:number) => setPage(current) && onQuery()"
/>
</template>
<style scoped lang="less"></style>
<template>
<page-view has-bread>
<basic-card :project="project as any" :loading="loading" />
<a-card :bordered="false" style="margin-top: 16px">
<a-tabs v-model:active-key="tabKey" type="rounded" :animation="true" size="small" :justify="true">
<a-tab-pane key="activity" :title="`歌曲列表(${activityCount})`">
<activity-card
style="padding: 0"
:has-bread="false"
:hide-tool="true"
:init-filter="{ status: '', project_id: projectKey }"
:hide-search-item="['projectName']"
:export-name="project.name"
:query-hook="() => syncActivityCount()"
/>
</a-tab-pane>
<a-tab-pane key="demo" :title="`Demo列表(${demoCount})`">
<demo-card
:hide-tool="true"
:init-filter="{ project_id: projectKey }"
style="padding: 0"
:has-bread="false"
:hide-create="true"
:hide-search-item="['projectName']"
:query-hook="() => syncDemoCount()"
/>
</a-tab-pane>
<a-tab-pane key="member" :title="`厂牌成员(${memberCount})`">
<member-table :project-key="projectKey" :query-hook="() => syncMemberCount()" />
</a-tab-pane>
<a-tab-pane key="manage" :title="`厂牌管理(${manageCount})`">
<manage-table :project-key="projectKey" :query-hook="() => syncManageCount()" />
</a-tab-pane>
<a-tab-pane key="out-manage" :title="`外部管理(${outManageCount})`">
<out-manage-table
:project-key="projectKey"
:has-permission="project.is_can_manage as boolean"
:query-hook="() => syncOutManageCount()"
/>
</a-tab-pane>
</a-tabs>
</a-card>
</page-view>
</template>
<script lang="ts" setup>
import { useRoute } from 'vue-router';
import { useRouteQuery } from '@vueuse/router';
import { onMounted, ref } from 'vue';
import useLoading from '@/hooks/loading';
import useProjectApi from '@/api/project';
import useActivityApi from '@/api/activity';
import { useSelectionStore } from '@/store';
import BasicCard from '@/views/project-show/components/basic-card.vue';
import ManageTable from '@/views/project-show/components/manage-table.vue';
import OutManageTable from '@/views/project-show/components/out-manage-table.vue';
import ActivityCard from '@/views/audition/activity/index.vue';
import DemoCard from '@/views/audition/demo/index.vue';
import MemberTable from '@/views/project-show/components/member-table.vue';
const tabKey = useRouteQuery('tabKey', 'activity');
const projectKey = Number(useRoute().params?.id);
const project = ref({ name: '', is_can_manage: 0 });
const { loading, setLoading } = useLoading(true);
const manageCount = ref(0);
const outManageCount = ref(0);
const memberCount = ref(0);
const demoCount = ref(0);
const activityCount = ref(0);
const syncParams = { pageSize: 1, limit: 1 };
const syncManageCount = () =>
// eslint-disable-next-line no-return-assign
useProjectApi.manageUsers(projectKey, syncParams).then(({ meta }) => (manageCount.value = meta.total));
const syncMemberCount = () =>
// eslint-disable-next-line no-return-assign
useProjectApi.memberUsers(projectKey, { pageSize: 1, limit: 1 }).then(({ meta }) => (memberCount.value = meta.total));
const syncOutManageCount = () =>
// eslint-disable-next-line no-return-assign
useProjectApi.outManageUsers(projectKey, syncParams).then(({ meta }) => (outManageCount.value = meta.total));
const syncActivityCount = () =>
// eslint-disable-next-line import/no-named-as-default-member,no-return-assign
useActivityApi
.get({ status: '', song_type: 1, audit_status: 1, project_id: projectKey, ...syncParams })
// eslint-disable-next-line no-return-assign
.then(({ meta }) => (activityCount.value = meta.total));
const syncDemoCount = () => {
// eslint-disable-next-line import/no-named-as-default-member,no-return-assign
useActivityApi
.get({ status: '', song_type: 2, audit_status: 1, project_id: projectKey, ...syncParams })
// eslint-disable-next-line no-return-assign
.then(({ meta }) => (demoCount.value = meta.total));
};
const { queryAll } = useSelectionStore();
onMounted(() => {
useProjectApi
.show(projectKey)
// eslint-disable-next-line no-return-assign
.then((data) => (project.value = data as any))
.finally(() => setLoading(false));
queryAll();
});
</script>
<script setup lang="ts">
import { Form, FormItem, Input, Textarea } from '@arco-design/web-vue';
import AvatarUpload from '@/components/avatar-upload/index.vue';
import { computed, ref } from 'vue';
import { FieldRule, FormInstance } from '@arco-design/web-vue/es/form';
import { Project } from '@/types/project';
type AttributeType = Omit<Project, 'id'>;
const props = defineProps<{ modelValue: AttributeType; submit?: (value: AttributeType) => Promise<Project> }>();
const emits = defineEmits<{ (e: 'update:modelValue', value: AttributeType): void }>();
const formRef = ref<FormInstance>();
const formRule = {
cover: [{ required: true, message: '请上传厂牌图片' }],
name: [{ required: true, message: '请输入厂牌名称' }],
intro: [{ type: 'string', max: 100, message: '厂牌简介不能超过100字' }],
} as Record<string, FieldRule[]>;
const formValue = computed({
get: () => props.modelValue,
set: (val) => emits('update:modelValue', val),
});
const onSubmit = async () => {
const error = await formRef.value?.validate();
return error ? Promise.reject(error) : props.submit?.(formValue.value);
};
defineExpose({ onSubmit });
</script>
<template>
<Form ref="formRef" layout="vertical" :model="formValue" :rules="formRule">
<FormItem hide-label content-class="justify-center" :wrapper-col-props="{ alignItems: 'center' }">
<AvatarUpload v-model="formValue.cover" :size="100" />
</FormItem>
<FormItem label="厂牌名称" field="name" show-colon>
<Input v-model="formValue.name" placeholder="请输入" :max-length="30" show-word-limit />
</FormItem>
<FormItem label="厂牌简介" field="intro" row-class="mb-0" show-colon>
<Textarea v-model="formValue.intro" :auto-size="{ maxRows: 4, minRows: 4 }" :max-length="50" show-word-limit />
</FormItem>
</Form>
</template>
<style scoped lang="less"></style>
<script setup lang="ts">
import { Input, Link, TableData, Message } from '@arco-design/web-vue';
import { onMounted, ref, computed, createVNode } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { AnyObject } from '@/types/global';
import useLoading from '@/hooks/loading';
import useProjectApi from '@/api/project';
import NumberTableColumn from '@/components/filter/number-table-column.vue';
import UserTableColumn from '@/components/filter/user-table-column.vue';
import SpaceTableColumn from '@/components/filter/space-table-column.vue';
import { createModalVNode } from '@/utils/createVNode';
import { Project } from '@/types/project';
import FormContent from '@/views/project/components/form-content.vue';
const { get, update, getExport } = useProjectApi;
const router = useRouter();
const filter = ref<AnyObject>({});
const tableRef = ref();
const { loading, setLoading } = useLoading(false);
const queryParams = computed(() => {
return {
...filter.value,
setWith: ['master:id,nick_name,identity'],
setWithCount: ['activity_up', 'activity_match', 'activity_send', 'manage', 'member'],
};
});
const onQuery = async (params?: AnyObject) => {
setLoading(true);
return get({ ...queryParams.value, ...params }).finally(() => setLoading(false));
};
const onSearch = () => tableRef.value?.onPageChange(1);
const onReset = () => {
filter.value = { name: '', masterName: '', status: '', isPromote: '', setSort: ['-id'] };
tableRef.value?.resetSort();
onSearch();
};
const onSort = (column: string, type: string) => {
filter.value.setSort = type ? [(type === 'desc' ? '-' : '') + column, '-id'] : ['-id'];
tableRef.value?.onFetch();
};
onMounted(() => onReset());
const onExport = () => getExport('厂牌', queryParams.value);
const onShow = (record: TableData) => router.push({ name: 'project-show', params: { id: record.id } });
const showRoute = computed(() => {
return useRoute().name === 'project-show';
});
const onUpdate = (row: TableData) => {
const formRef = ref();
const formValue = ref({ ...row });
createModalVNode(
() =>
createVNode(FormContent, {
'ref': formRef,
'model-value': formValue.value,
// eslint-disable-next-line no-return-assign
'onUpdate:model-value': (val: any) => (formValue.value = val),
'submit': (value: Omit<Project, 'id'>) => update(row.id, value),
}),
{
title: '厂牌编辑',
titleAlign: 'center',
onBeforeOk: (done) =>
formRef.value
?.onSubmit()
.then(({ name }: Project) => {
tableRef.value.onFetch();
Message.success(`更新厂牌：${name}`);
done(true);
})
.catch(() => done(false)),
}
);
};
</script>
<template>
<router-view v-if="showRoute" :key="$route.path" />
<PageView v-show="!showRoute" has-card has-bread>
<FilterSearch :model="filter" :loading="loading" :split="3" inline @search="onSearch" @reset="onReset">
<FilterSearchItem label="厂牌名称" field="name">
<Input v-model="filter.name" allow-clear placeholder="请输入" />
</FilterSearchItem>
<FilterSearchItem label="主理人" field="masterName">
<Input v-model="filter.masterName" allow-clear placeholder="请输入" />
</FilterSearchItem>
</FilterSearch>
<FilterTable ref="tableRef" :loading="loading" :on-query="onQuery" @row-sort="onSort">
<template #tool-right>
<ExportButton :on-download="onExport" />
</template>
<UserTableColumn title="名称" data-index="id" avatar-index="cover" nick-index="name" :width="260" show-avatar />
<UserTableColumn title="主理人" data-index="master_id" user="master" :width="160" dark-value="" />
<NumberTableColumn title="厂牌管理员人数" data-index="manage_count" :dark-value="0" :width="120" has-sort />
<NumberTableColumn title="厂牌成员人数" data-index="member_count" :dark-value="0" :width="120" has-sort />
<NumberTableColumn title="上架歌曲数" data-index="activity_up_count" :dark-value="0" :width="110" has-sort />
<NumberTableColumn title="已匹配歌曲数" data-index="activity_match_count" :dark-value="0" :width="110" has-sort />
<NumberTableColumn title="已发行歌曲数" data-index="activity_send_count" :dark-value="0" :width="110" has-sort />
<SpaceTableColumn title="操作" data-index="operation" :width="100">
<template #default="{ record }">
<Link class="link-hover" :hoverable="false" @click="onShow(record)">查看</Link>
<Link class="link-hover" :hoverable="false" @click="onUpdate(record)">编辑</Link>
</template>
</SpaceTableColumn>
</FilterTable>
</PageView>
</template>
<style scoped lang="less"></style>
{
"compilerOptions": {
"target": "ES2020",
"module": "ES2020",
"moduleResolution": "node",
"strict": true,
"jsx": "preserve",
"sourceMap": true,
"resolveJsonModule": true,
"esModuleInterop": true,
"skipLibCheck": true,
"allowSyntheticDefaultImports": true,
"baseUrl": ".",
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"es2020",
"dom"
]
},
"include": [
"src/**/*",
"src/**/*.vue"
]
}