appnify
/
web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 优化素材页面

master
绝弹 2024-01-09 22:34:36 +08:00
parent 40eeb6899a
commit 9b15be521e
9 changed files with 229 additions and 124 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
index.html
View File

@ -4,10 +4,19 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="./favicon.ico" /> <link rel="icon" type="image/svg+xml" href="./favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>%VITE_TITLE% - %VITE_SUBTITLE%</title> <title>%VITE_TITLE% | %VITE_SUBTITLE%</title>
</head> </head>
<body> <body>
<div id="app" class="dark:bg-slate-900 dark:text-slate-200"> <div id="app" class="dark:bg-slate-900 dark:text-slate-200">
<div class="loading">
<img
src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHN0eWxlPSJtYXJnaW46IGF1dG87IGJhY2tncm91bmQ6IHJnYigyNTUsIDI1NSwgMjU1KTsgZGlzcGxheTogYmxvY2s7IHNoYXBlLXJlbmRlcmluZzogYXV0bzsiIHdpZHRoPSIyMDBweCIgaGVpZ2h0PSIyMDBweCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1MCA1MCkiPjxnPjxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgdHlwZT0icm90YXRlIiB2YWx1ZXM9IjA7NDUiIGtleVRpbWVzPSIwOzEiIGR1cj0iMC4ycyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZVRyYW5zZm9ybT48cGF0aCBkPSJNMjkuNDkxNTI0MjA2MTE3MjU1IC01LjUgTDM3LjQ5MTUyNDIwNjExNzI1NSAtNS41IEwzNy40OTE1MjQyMDYxMTcyNTUgNS41IEwyOS40OTE1MjQyMDYxMTcyNTUgNS41IEEzMCAzMCAwIDAgMSAyNC43NDI3NDQwNTAxOTg3MzggMTYuOTY0NTY5NDU3MTQ2NzEyIEwyNC43NDI3NDQwNTAxOTg3MzggMTYuOTY0NTY5NDU3MTQ2NzEyIEwzMC4zOTk1OTgyOTk2OTExMTcgMjIuNjIxNDIzNzA2NjM5MDkyIEwyMi42MjE0MjM3MDY2MzkwOTYgMzAuMzk5NTk4Mjk5NjkxMTE0IEwxNi45NjQ1Njk0NTcxNDY3MTYgMjQuNzQyNzQ0MDUwMTk4NzM0IEEzMCAzMCAwIDAgMSA1LjUgMjkuNDkxNTI0MjA2MTE3MjU1IEw1LjUgMjkuNDkxNTI0MjA2MTE3MjU1IEw1LjUgMzcuNDkxNTI0MjA2MTE3MjU1IEwtNS40OTk5OTk5OTk5OTk5OTcgMzcuNDkxNTI0MjA2MTE3MjU1IEwtNS40OTk5OTk5OTk5OTk5OTcgMjkuNDkxNTI0MjA2MTE3MjU1IEEzMCAzMCAwIDAgMSAtMTYuOTY0NTY5NDU3MTQ2NzA1IDI0Ljc0Mjc0NDA1MDE5ODczOCBMLTE2Ljk2NDU2OTQ1NzE0NjcwNSAyNC43NDI3NDQwNTAxOTg3MzggTC0yMi42MjE0MjM3MDY2MzkwODUgMzAuMzk5NTk4Mjk5NjkxMTE3IEwtMzAuMzk5NTk4Mjk5NjkxMTE3IDIyLjYyMTQyMzcwNjYzOTA5MiBMLTI0Ljc0Mjc0NDA1MDE5ODczOCAxNi45NjQ1Njk0NTcxNDY3MTIgQTMwIDMwIDAgMCAxIC0yOS40OTE1MjQyMDYxMTcyNTUgNS41MDAwMDAwMDAwMDAwMDkgTC0yOS40OTE1MjQyMDYxMTcyNTUgNS41MDAwMDAwMDAwMDAwMDkgTC0zNy40OTE1MjQyMDYxMTcyNTUgNS41MDAwMDAwMDAwMDAwMSBMLTM3LjQ5MTUyNDIwNjExNzI1NSAtNS41MDAwMDAwMDAwMDAwMDEgTC0yOS40OTE1MjQyMDYxMTcyNTUgLTUuNTAwMDAwMDAwMDAwMDAyIEEzMCAzMCAwIDAgMSAtMjQuNzQyNzQ0MDUwMTk4NzM4IC0xNi45NjQ1Njk0NTcxNDY3MDUgTC0yNC43NDI3NDQwNTAxOTg3MzggLTE2Ljk2NDU2OTQ1NzE0NjcwNSBMLTMwLjM5OTU5ODI5OTY5MTExNyAtMjIuNjIxNDIzNzA2NjM5MDg1IEwtMjIuNjIxNDIzNzA2NjM5MDkyIC0zMC4zOTk1OTgyOTk2OTExMTcgTC0xNi45NjQ1Njk0NTcxNDY3MTIgLTI0Ljc0Mjc0NDA1MDE5ODczOCBBMzAgMzAgMCAwIDEgLTUuNTAwMDAwMDAwMDAwMDExIC0yOS40OTE1MjQyMDYxMTcyNTUgTC01LjUwMDAwMDAwMDAwMDAxMSAtMjkuNDkxNTI0MjA2MTE3MjU1IEwtNS41MDAwMDAwMDAwMDAwMTIgLTM3LjQ5MTUyNDIwNjExNzI1NSBMNS40OTk5OTk5OTk5OTk5OTggLTM3LjQ5MTUyNDIwNjExNzI1NSBMNS41IC0yOS40OTE1MjQyMDYxMTcyNTUgQTMwIDMwIDAgMCAxIDE2Ljk2NDU2OTQ1NzE0NjcwMiAtMjQuNzQyNzQ0MDUwMTk4NzQgTDE2Ljk2NDU2OTQ1NzE0NjcwMiAtMjQuNzQyNzQ0MDUwMTk4NzQgTDIyLjYyMTQyMzcwNjYzOTA4IC0zMC4zOTk1OTgyOTk2OTExMiBMMzAuMzk5NTk4Mjk5NjkxMTE3IC0yMi42MjE0MjM3MDY2MzkxIEwyNC43NDI3NDQwNTAxOTg3MzggLTE2Ljk2NDU2OTQ1NzE0NjcxNiBBMzAgMzAgMCAwIDEgMjkuNDkxNTI0MjA2MTE3MjU1IC01LjUwMDAwMDAwMDAwMDAxMyBNMCAtMjBBMjAgMjAgMCAxIDAgMCAyMCBBMjAgMjAgMCAxIDAgMCAtMjAiIGZpbGw9IiMwOWYiPjwvcGF0aD48L2c+PC9nPjwvc3ZnPgo="
alt="loading"
class="loading-image"
/>
<h1 class="loading-title">欢迎访问%VITE_TITLE%</h1>
<div class="loading-tip">资源加载中, 请稍等...</div>
</div>
<style> <style>
html, html,
body { body {
@ -17,8 +26,8 @@
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
font-size: 14px; font-size: 14px;
font-family: Inter, "-apple-system", BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "noto sans", font-family: Inter, '-apple-system', BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', 'noto sans',
"Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
} }
#app { #app {
width: 100%; width: 100%;
@ -47,18 +56,9 @@
.loading-tip { .loading-tip {
margin-top: 12px; margin-top: 12px;
line-height: 1; line-height: 1;
color: #888; color: #889;
} }
</style> </style>
<div class="loading">
<img
src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHN0eWxlPSJtYXJnaW46IGF1dG87IGJhY2tncm91bmQ6IHJnYigyNTUsIDI1NSwgMjU1KTsgZGlzcGxheTogYmxvY2s7IHNoYXBlLXJlbmRlcmluZzogYXV0bzsiIHdpZHRoPSIyMDBweCIgaGVpZ2h0PSIyMDBweCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIj48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSg1MCA1MCkiPjxnPjxhbmltYXRlVHJhbnNmb3JtIGF0dHJpYnV0ZU5hbWU9InRyYW5zZm9ybSIgdHlwZT0icm90YXRlIiB2YWx1ZXM9IjA7NDUiIGtleVRpbWVzPSIwOzEiIGR1cj0iMC4ycyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiPjwvYW5pbWF0ZVRyYW5zZm9ybT48cGF0aCBkPSJNMjkuNDkxNTI0MjA2MTE3MjU1IC01LjUgTDM3LjQ5MTUyNDIwNjExNzI1NSAtNS41IEwzNy40OTE1MjQyMDYxMTcyNTUgNS41IEwyOS40OTE1MjQyMDYxMTcyNTUgNS41IEEzMCAzMCAwIDAgMSAyNC43NDI3NDQwNTAxOTg3MzggMTYuOTY0NTY5NDU3MTQ2NzEyIEwyNC43NDI3NDQwNTAxOTg3MzggMTYuOTY0NTY5NDU3MTQ2NzEyIEwzMC4zOTk1OTgyOTk2OTExMTcgMjIuNjIxNDIzNzA2NjM5MDkyIEwyMi42MjE0MjM3MDY2MzkwOTYgMzAuMzk5NTk4Mjk5NjkxMTE0IEwxNi45NjQ1Njk0NTcxNDY3MTYgMjQuNzQyNzQ0MDUwMTk4NzM0IEEzMCAzMCAwIDAgMSA1LjUgMjkuNDkxNTI0MjA2MTE3MjU1IEw1LjUgMjkuNDkxNTI0MjA2MTE3MjU1IEw1LjUgMzcuNDkxNTI0MjA2MTE3MjU1IEwtNS40OTk5OTk5OTk5OTk5OTcgMzcuNDkxNTI0MjA2MTE3MjU1IEwtNS40OTk5OTk5OTk5OTk5OTcgMjkuNDkxNTI0MjA2MTE3MjU1IEEzMCAzMCAwIDAgMSAtMTYuOTY0NTY5NDU3MTQ2NzA1IDI0Ljc0Mjc0NDA1MDE5ODczOCBMLTE2Ljk2NDU2OTQ1NzE0NjcwNSAyNC43NDI3NDQwNTAxOTg3MzggTC0yMi42MjE0MjM3MDY2MzkwODUgMzAuMzk5NTk4Mjk5NjkxMTE3IEwtMzAuMzk5NTk4Mjk5NjkxMTE3IDIyLjYyMTQyMzcwNjYzOTA5MiBMLTI0Ljc0Mjc0NDA1MDE5ODczOCAxNi45NjQ1Njk0NTcxNDY3MTIgQTMwIDMwIDAgMCAxIC0yOS40OTE1MjQyMDYxMTcyNTUgNS41MDAwMDAwMDAwMDAwMDkgTC0yOS40OTE1MjQyMDYxMTcyNTUgNS41MDAwMDAwMDAwMDAwMDkgTC0zNy40OTE1MjQyMDYxMTcyNTUgNS41MDAwMDAwMDAwMDAwMSBMLTM3LjQ5MTUyNDIwNjExNzI1NSAtNS41MDAwMDAwMDAwMDAwMDEgTC0yOS40OTE1MjQyMDYxMTcyNTUgLTUuNTAwMDAwMDAwMDAwMDAyIEEzMCAzMCAwIDAgMSAtMjQuNzQyNzQ0MDUwMTk4NzM4IC0xNi45NjQ1Njk0NTcxNDY3MDUgTC0yNC43NDI3NDQwNTAxOTg3MzggLTE2Ljk2NDU2OTQ1NzE0NjcwNSBMLTMwLjM5OTU5ODI5OTY5MTExNyAtMjIuNjIxNDIzNzA2NjM5MDg1IEwtMjIuNjIxNDIzNzA2NjM5MDkyIC0zMC4zOTk1OTgyOTk2OTExMTcgTC0xNi45NjQ1Njk0NTcxNDY3MTIgLTI0Ljc0Mjc0NDA1MDE5ODczOCBBMzAgMzAgMCAwIDEgLTUuNTAwMDAwMDAwMDAwMDExIC0yOS40OTE1MjQyMDYxMTcyNTUgTC01LjUwMDAwMDAwMDAwMDAxMSAtMjkuNDkxNTI0MjA2MTE3MjU1IEwtNS41MDAwMDAwMDAwMDAwMTIgLTM3LjQ5MTUyNDIwNjExNzI1NSBMNS40OTk5OTk5OTk5OTk5OTggLTM3LjQ5MTUyNDIwNjExNzI1NSBMNS41IC0yOS40OTE1MjQyMDYxMTcyNTUgQTMwIDMwIDAgMCAxIDE2Ljk2NDU2OTQ1NzE0NjcwMiAtMjQuNzQyNzQ0MDUwMTk4NzQgTDE2Ljk2NDU2OTQ1NzE0NjcwMiAtMjQuNzQyNzQ0MDUwMTk4NzQgTDIyLjYyMTQyMzcwNjYzOTA4IC0zMC4zOTk1OTgyOTk2OTExMiBMMzAuMzk5NTk4Mjk5NjkxMTE3IC0yMi42MjE0MjM3MDY2MzkxIEwyNC43NDI3NDQwNTAxOTg3MzggLTE2Ljk2NDU2OTQ1NzE0NjcxNiBBMzAgMzAgMCAwIDEgMjkuNDkxNTI0MjA2MTE3MjU1IC01LjUwMDAwMDAwMDAwMDAxMyBNMCAtMjBBMjAgMjAgMCAxIDAgMCAyMCBBMjAgMjAgMCAxIDAgMCAtMjAiIGZpbGw9IiMwOWYiPjwvcGF0aD48L2c+PC9nPjwvc3ZnPgo="
alt="loading"
class="loading-image"
/>
<h1 class="loading-title">欢迎访问%VITE_TITLE%</h1>
<div class="loading-tip">资源加载中, 请稍等...</div>
</div>
</div> </div>
<script type="module" src="/src/main.ts"></script> <script type="module" src="/src/main.ts"></script>
</body> </body>

55
src/pages/content/material/components/AnUpload.vue
View File

@ -9,8 +9,6 @@
title="上传文件" title="上传文件"
title-align="start" title-align="start"
v-model:visible="visible" v-model:visible="visible"
mask-animation-name=""
modal-animation-name=""
:width="960" :width="960"
:mask-closable="false" :mask-closable="false"
:on-before-cancel="onBeforeCancel" :on-before-cancel="onBeforeCancel"
@ -45,11 +43,11 @@
</div> </div>
</div> </div>
<div class="h-[424px] border-t border-b border-zinc-100 mt-4"> <div class="h-[424px] border-t border-b border-zinc-100 mt-2">
<ul v-if="fileList.length" class="overflow-hidden p-0 m-0"> <ul v-if="fileList.length" class="h-full overflow-hidden p-0 m-0">
<a-scrollbar outer-class="h-full overflow-hidden" class="h-full overflow-auto pr-[20px] divide-y"> <a-scrollbar outer-class="h-full overflow-hidden" class="h-full overflow-auto pr-[20px] divide-y">
<li v-for="item in fileList" :key="item.uid" class="flex items-center gap-4 py-3"> <li v-for="item in fileList" :key="item.uid" class="flex items-center gap-3 py-3">
<div class="text-4xl rounded pr-0.5 flex justify-center"> <div class="text-3xl rounded pr-0.5 flex justify-center">
<i :class="getIcon(item.file?.type ?? 'video')"></i> <i :class="getIcon(item.file?.type ?? 'video')"></i>
</div> </div>
<div class="flex-1 overflow-hidden"> <div class="flex-1 overflow-hidden">
@ -59,10 +57,10 @@
<span class="text-xs text-gray-400 ml-2">{{ numeral(item.file?.size).format('0 b') }}</span> <span class="text-xs text-gray-400 ml-2">{{ numeral(item.file?.size).format('0 b') }}</span>
</div> </div>
<div v-show="item.status !== 'done'"> <div v-show="item.status !== 'done'">
<a-link v-show="item.status === 'uploading'" @click="pauseItem(item)">停止</a-link> <a-link v-show="item.status === 'uploading'" @click="pauseItem(item)"> 停止 </a-link>
<a-link v-show="item.status === 'error'" @click="retryItem(item)">重试</a-link> <a-link v-show="item.status === 'error'" @click="retryItem(item)"> 重试 </a-link>
<a-link v-show="item.status === 'init' || item.status === 'error'" @click="removeItem(item)"> <a-link v-show="item.status === 'init' || item.status === 'error'" @click="removeItem(item)">
删除 移除
</a-link> </a-link>
</div> </div>
</div> </div>
@ -70,19 +68,19 @@
<div class="flex items-center justify-between gap-2 text-gray-400 mt-1.5 text-xs"> <div class="flex items-center justify-between gap-2 text-gray-400 mt-1.5 text-xs">
<span class="text-xs"> <span class="text-xs">
<span v-if="item.status === 'init'"> <span v-if="item.status === 'init'">
<i class="icon-park-outline-hourglass-full"></i> <i class="icon-park-outline-lightning"></i>
等待上传 等待上传
</span> </span>
<span v-else-if="item.status === 'uploading'" class="text-[rgb(var(--primary-6))]"> <span v-else-if="item.status === 'uploading'">
<i class="icon-park-outline-upload-one"></i> <i class="icon-park-outline-upload-one text-blue-500"></i>
正在上传 正在上传
</span> </span>
<span v-else-if="item.status === 'done'" class="text-[rgb(var(--success-6))]"> <span v-else-if="item.status === 'done'">
<i class="icon-park-outline-check"></i> <i class="icon-park-outline-check-one text-green-500"></i>
上传成功 上传成功
</span> </span>
<span v-else="item.status === 'error'" class="text-red-500"> <span v-else="item.status === 'error'" class="">
<i class="icon-park-outline-close"></i> <i class="icon-park-outline-close-one text-red-500"></i>
上传失败 上传失败
</span> </span>
</span> </span>
@ -135,22 +133,19 @@ const emit = defineEmits<{
(event: 'close', count: number): void; (event: 'close', count: number): void;
}>(); }>();
interface FileInfo {
lastTime: number;
lastLoaded: number;
speed: number;
aspeed: number;
cost: number;
error: string;
}
const visible = ref(false); const visible = ref(false);
const uploadRef = ref<UploadInstance | null>(null); const uploadRef = ref<UploadInstance | null>(null);
const fileList = ref<FileItem[]>([]); const fileList = ref<FileItem[]>([]);
const fileMap = reactive< const fileMap = reactive<Map<string, FileInfo | null>>(new Map());
Map<
string,
{
lastTime: number;
lastLoaded: number;
speed: number;
aspeed: number;
cost: number;
error: string;
} | null
>
>(new Map());
const formatProgress = (item: FileItem, small?: boolean) => { const formatProgress = (item: FileItem, small?: boolean) => {
let percent = Math.floor((item.percent || 0) * 100); let percent = Math.floor((item.percent || 0) * 100);
@ -239,7 +234,6 @@ const onClose = () => {
const upload = (option: RequestOption) => { const upload = (option: RequestOption) => {
const { fileItem, onError, onProgress, onSuccess } = option; const { fileItem, onError, onProgress, onSuccess } = option;
const source = axios.CancelToken.source();
if (!fileMap.has(fileItem.uid)) { if (!fileMap.has(fileItem.uid)) {
fileMap.set(fileItem.uid, { fileMap.set(fileItem.uid, {
lastTime: Date.now(), lastTime: Date.now(),
@ -250,6 +244,7 @@ const upload = (option: RequestOption) => {
error: '网络异常', error: '网络异常',
}); });
} }
const source = axios.CancelToken.source();
const item = fileMap.get(fileItem.uid)!; const item = fileMap.get(fileItem.uid)!;
const startTime = Date.now(); const startTime = Date.now();
const data = { file: fileItem.file as any }; const data = { file: fileItem.file as any };

84
src/pages/content/material/index.vue
View File

@ -1,43 +1,39 @@
<template> <template>
<BreadPage> <a-tabs class="tabs-page">
<template #content> <a-tab-pane key="1" title="全部素材">
<a-tabs class="tabs-page"> <div class="overflow-hidden grid grid-cols-[auto_1fr] gap-2 m-4 mt-0">
<a-tab-pane key="1" title="全部素材"> <!-- <AnGroup class="bg-white p-4 w-[242px]" :current="current" @change="onCategoryChange"></AnGroup> -->
<div class="overflow-hidden grid grid-cols-[auto_1fr] gap-2 m-4 mt-1"> <div class="bg-white p-4">
<!-- <AnGroup class="bg-white p-4 w-[242px]" :current="current" @change="onCategoryChange"></AnGroup> --> <MaterialTable>
<div class="bg-white p-4"> <template #action>
<MaterialTable> <AnUpload @success="() => tableRef?.refresh()"></AnUpload>
<template #action> </template>
<AnUpload @success="() => tableRef?.refresh()"></AnUpload> </MaterialTable>
</template> <AnPreview v-model:visible="viewer.visible" :type="viewer.type" :url="viewer.url"></AnPreview>
</MaterialTable> </div>
<AnPreview v-model:visible="viewer.visible" :type="viewer.type" :url="viewer.url"></AnPreview> </div>
</div> </a-tab-pane>
</div> <a-tab-pane key="2" title="分类管理">
</a-tab-pane> <div class="overflow-hidden grid grid-cols-[auto_1fr] gap-2 m-4 mt-0">
<a-tab-pane key="2" title="分类管理"> <div class="bg-white p-4">
<div class="overflow-hidden grid grid-cols-[auto_1fr] gap-2 m-4 mt-1"> <AnCategory></AnCategory>
<div class="bg-white p-4"> </div>
<AnCategory></AnCategory> </div>
</div> </a-tab-pane>
</div> <a-tab-pane key="3" title="素材设置"> </a-tab-pane>
</a-tab-pane> </a-tabs>
<a-tab-pane key="3" title="显示设置"></a-tab-pane>
</a-tabs>
</template>
</BreadPage>
</template> </template>
<script setup lang="tsx"> <script setup lang="tsx">
import { FileCategory, api } from '@/api'; import { FileCategory, api } from '@/api';
import { useCreateColumn, useTable, useTableDelete, useUpdateColumn } from '@/components/AnTable'; import { useCreateColumn, useTable, useTableDelete, useUpdateColumn } from '@/components/AnTable';
import { FileTypes } from '@/constants/file';
import { Message } from '@arco-design/web-vue'; import { Message } from '@arco-design/web-vue';
import numeral from 'numeral'; import numeral from 'numeral';
import AnCategory from './components/AnCategory.vue'; import AnCategory from './components/AnCategory.vue';
import AnPreview from './components/AnPreview.vue'; import AnPreview from './components/AnPreview.vue';
import AnUpload from './components/AnUpload.vue'; import AnUpload from './components/AnUpload.vue';
import { getIcon } from './components/util'; import { getIcon } from './components/util';
import { FileTypes } from '@/constants/file';
const current = ref<FileCategory>(); const current = ref<FileCategory>();
const viewer = reactive({ visible: false, url: undefined, type: undefined }); const viewer = reactive({ visible: false, url: undefined, type: undefined });
@ -74,7 +70,7 @@ const {
dataIndex: 'name', dataIndex: 'name',
render: ({ record }) => { render: ({ record }) => {
return ( return (
<div class="group flex items-center gap-4"> <div class="group flex items-center gap-3">
<div class="w-8 flex justify-center"> <div class="w-8 flex justify-center">
{record.mimetype.startsWith('image1') ? ( {record.mimetype.startsWith('image1') ? (
<a-avatar size={32} shape="square"> <a-avatar size={32} shape="square">
@ -92,30 +88,33 @@ const {
> >
{record.name} {record.name}
</span> </span>
<span {/* <span
class="inline-block w-5 text-xs text-gray-400 ml-0" class="inline-block w-5 text-xs text-gray-400 ml-0"
title="复制地址" title="复制地址"
onClick={() => copyLink(record)} onClick={() => copyLink(record)}
> >
<i class="hidden! group-hover:inline-block! icon-park-outline-copy hover:text-gray-700 cursor-pointer"></i> <i class="hidden! group-hover:inline-block! icon-park-outline-copy hover:text-gray-700 cursor-pointer"></i>
</span> </span> */}
</span> </span>
<div class="h-5 inline-flex items-center text-xs text-gray-400 space-x-4"> {/* <div class="h-5 inline-flex items-center text-xs text-gray-400 space-x-4 ">
<span> <span>
<i class="icon-park-outline-folder-close mr-1"></i>
{record.category?.name ?? '默认分类'} {record.category?.name ?? '默认分类'}
</span> </span>
</div> </div> */}
</div> </div>
</div> </div>
); );
}, },
}, },
{
title: '分类',
width: 150,
render: ({ record }) => record.category?.name ?? '默认分类',
},
{ {
title: '文件大小', title: '文件大小',
width: 100, width: 150,
align: 'right', render: ({ record }) => numeral(record.size).format('0 b'),
render: ({ record }) => <span class="text-gray-500">{numeral(record.size).format('0 b')}</span>,
}, },
useCreateColumn(), useCreateColumn(),
useUpdateColumn(), useUpdateColumn(),
@ -206,7 +205,16 @@ const {
}); });
</script> </script>
<style scoped></style> <style lang="less" scoped>
.tabs-page {
display: grid;
grid-template-rows: auto 1fr;
height: 100%;
:deep(.arco-tabs-content) {
overflow: auto;
}
}
</style>
<route lang="json"> <route lang="json">
{ {

42
src/pages/home/index.vue
View File

@ -10,11 +10,11 @@
</div> --> </div> -->
<div> <div>
<div class="text-gray-500"> <div class="text-gray-500">
{{ item.title }} {{ item.title }}
</div> </div>
<div class="text-lg mt-1.5"> <div class="text-lg mt-1.5">
{{ item.count }} {{ item.count }}
</div> </div>
</div> </div>
</div> </div>
</div> </div>
@ -30,9 +30,11 @@
<i class="icon-park-outline-delete text-xs"></i> <i class="icon-park-outline-delete text-xs"></i>
</div> </div>
</div> </div>
<div class="py-3 px-3 border border-dashed rounded-sm border-gray-400 text-gray-500 hover:bg-gray-100 cursor-pointer"> <div
class="py-3 px-3 border border-dashed rounded-sm border-gray-400 text-gray-500 hover:bg-gray-100 cursor-pointer"
>
<i class="icon-park-outline-add ml-2"></i> <i class="icon-park-outline-add ml-2"></i>
添加服务 添加服务1
</div> </div>
</div> </div>
</div> </div>
@ -47,7 +49,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="bg-white py-4 px-5 mt-4"> <div class="bg-white py-4 px-5 mt-4">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<span>公告</span> <span>公告</span>
<a-link>更多</a-link> <a-link>更多</a-link>
@ -55,7 +57,9 @@
<div class="flex justify-between gap-4 mt-4"> <div class="flex justify-between gap-4 mt-4">
<ul class="list-none w-full m-0 p-0"> <ul class="list-none w-full m-0 p-0">
<li v-for="i in 8" class="w-full h-6 items-center overflow-hidden justify-between flex gap-2 mb-2"> <li v-for="i in 8" class="w-full h-6 items-center overflow-hidden justify-between flex gap-2 mb-2">
<span class="flex-1 truncate hover:underline underline-offset-2 cursor-pointer">但是预测已加载的数据不足以</span> <span class="flex-1 truncate hover:underline underline-offset-2 cursor-pointer"
>但是预测已加载的数据不足以</span
>
<span class="text-gray-400">3天前</span> <span class="text-gray-400">3天前</span>
</li> </li>
</ul> </ul>
@ -74,29 +78,39 @@ const stat = {
post: { post: {
title: '文章', title: '文章',
count: 22, count: 22,
icon: 'icon-park-outline-folder-close' icon: 'icon-park-outline-folder-close',
}, },
material: { material: {
title: '素材', title: '素材',
count: 119, count: 119,
icon: 'icon-park-outline-folder-close' icon: 'icon-park-outline-folder-close',
}, },
comment: { comment: {
title: '评论', title: '评论',
count: 1802, count: 1802,
icon: 'icon-park-outline-user' icon: 'icon-park-outline-user',
}, },
user: { user: {
title: '用户', title: '用户',
count: 98, count: 98,
icon: 'icon-park-outline-user' icon: 'icon-park-outline-user',
}, },
category: { category: {
title: '分类', title: '分类',
count: 26, count: 26,
icon: 'icon-park-outline-tag' icon: 'icon-park-outline-tag',
}, },
}; };
</script> </script>
<style scoped></style> <style scoped></style>
<route lang="json">
{
"meta": {
"sort": 1000,
"title": "概览",
"icon": "icon-park-outline-home"
}
}
</route>

2
src/pages/system/dict/index.vue
View File

@ -8,7 +8,7 @@
<ani-group :current="current" @change="onTypeChange"></ani-group> <ani-group :current="current" @change="onTypeChange"></ani-group>
</div> </div>
<div class="bg-white p-4"> <div class="bg-white p-4">
<div :show-icon="false" class="rounded mb-3 bg-gray-100 px-4 py-3"> <div :show-icon="false" class="rounded mb-3 bg-gray-200 px-4 py-3">
<span class="text-base"> <span class="text-base">
<i class="icon-park-outline-folder-close"></i> <i class="icon-park-outline-folder-close"></i>
{{ current?.name }} {{ current?.name }}

36
src/pages/system/menu/index.vue
View File

@ -41,24 +41,30 @@ const { component: MenuTable, tableRef } = useTable({
id = ` => ${record.code}`; id = ` => ${record.code}`;
} }
return ( return (
<div class="flex items-center gap-1"> <div class="flex-1">
<a-tag bordered color={MenuTypes.fmt(record.type, 'color')}> <i class={`${record.icon} mr-1`}></i>
{{ <span>{record.name ?? '无'}</span>
default: () => MenuTypes.fmt(record.type), <span class="text-gray-400 text-xs truncate">{id}</span>
}}
</a-tag>
<div class="flex-1 flex overflow-hidden ml-1">
<div class="flex-1">
<i class={`${record.icon} mr-1`}></i>
<span>{record.name ?? '无'}</span>
<span class="text-gray-400 text-xs truncate">{id}</span>
</div>
<a-switch checked-color="#3c9" size="small"></a-switch>
</div>
</div> </div>
); );
}, },
}, },
{
title: '标识',
width: 200,
dataIndex: 'code',
},
{
title: '类型',
width: 200,
render: ({ record }) => (
<a-tag bordered color={MenuTypes.fmt(record.type, 'color')}>
{{
default: () => MenuTypes.fmt(record.type),
}}
</a-tag>
),
},
useCreateColumn(), useCreateColumn(),
useUpdateColumn(), useUpdateColumn(),
{ {
@ -135,7 +141,7 @@ const { component: MenuTable, tableRef } = useTable({
field: 'type', field: 'type',
value: 1, value: 1,
label: '类型', label: '类型',
setter: 'input', setter: 'select',
options: MenuTypes.raw, options: MenuTypes.raw,
}, },
{ {

105
src/pages/user/index.vue
View File

@ -2,6 +2,24 @@
<BreadPage :content-padding="false"> <BreadPage :content-padding="false">
<template #content> <template #content>
<section class="my-page m-4 bg-white rounded px-4"> <section class="my-page m-4 bg-white rounded px-4">
<div class="bg-white py-4 px-5 mb-4">
<div v-for="t1 in types" :key="t1.label" class="flex items-center">
{{ t1.label }}：
<div class="flex gap-2">
<a-tag
v-for="t2 in t1.children"
:key="t2.value"
:checked="search.bk === t2.value"
color="blue"
:bordered="true"
checkable
@check="search.bk = t2.value"
>
{{ t2.label }}
</a-tag>
</div>
</div>
</div>
<a-tabs size="large" class="h-full"> <a-tabs size="large" class="h-full">
<a-tab-pane key="8" title="常规设置"> <a-tab-pane key="8" title="常规设置">
<a-form <a-form
@ -39,17 +57,10 @@
:max-length="140" :max-length="140"
:show-word-limit="true" :show-word-limit="true"
></a-textarea> ></a-textarea>
<template #help> <template #help> 启用后，消息通知将在左上角进行提示. </template>
启用后，消息通知将在左上角进行提示.
</template>
</a-form-item> </a-form-item>
<a-form-item label="站点URL"> <a-form-item label="站点URL">
<a-input <a-input v-model="appStore.title" placeholder="请输入" class="!w-[432px]" allow-clear></a-input>
v-model="appStore.title"
placeholder="请输入"
class="!w-[432px]"
allow-clear
></a-input>
<template #help> 示例：https://www.juetan.cn。用于静态资源前缀、应用接口前缀等用途。 </template> <template #help> 示例：https://www.juetan.cn。用于静态资源前缀、应用接口前缀等用途。 </template>
</a-form-item> </a-form-item>
<a-form-item> <a-form-item>
@ -83,7 +94,8 @@
<a-input v-model="mail.smtpHost" allow-clear placeholder="请输入" class="!w-[314px]"></a-input> <a-input v-model="mail.smtpHost" allow-clear placeholder="请输入" class="!w-[314px]"></a-input>
<span class="inline-block px-2">:</span> <span class="inline-block px-2">:</span>
<a-input-number v-model="mail.smtpPort" :min="0" :max="65535" class="w-24!"></a-input-number> <a-input-number v-model="mail.smtpPort" :min="0" :max="65535" class="w-24!"></a-input-number>
<template #help> 示例: smtp.163.com:25。国内常见有 <template #help>
示例: smtp.163.com:25。国内常见有
<a target="_blank" class="mr-2" href="https://mail.163.com">网易邮箱</a> <a target="_blank" class="mr-2" href="https://mail.163.com">网易邮箱</a>
<a target="_blank" class="mr-2" href="http://mail.aliyun.com/">阿里邮箱</a> <a target="_blank" class="mr-2" href="http://mail.aliyun.com/">阿里邮箱</a>
<a target="_blank" class="mr-2" href="https://mail.qq.com">QQ邮箱</a>等，默认 25 端口。 <a target="_blank" class="mr-2" href="https://mail.qq.com">QQ邮箱</a>等，默认 25 端口。
@ -164,6 +176,79 @@
import { useAppStore } from '@/store'; import { useAppStore } from '@/store';
import { reactive } from 'vue'; import { reactive } from 'vue';
const search = reactive({ bk: undefined });
const types = [
{
label: '板块',
children: [
{
label: '全部',
value: undefined,
},
{
label: '电影',
value: 'fild',
},
{
label: '电视剧',
value: 'vs',
},
{
label: '综艺',
value: 'zy',
},
{
label: '动漫',
value: 'dm',
},
{
label: '短剧',
value: 'dj',
},
{
label: '体育',
value: 'ty',
},
{
label: '纪录片',
value: 'jlp',
},
{
label: '游戏',
value: 'yx',
},
{
label: '新闻',
value: 'xw',
},
{
label: '娱乐',
value: 'yl',
},
{
label: '生活',
value: 'sh',
},
{
label: '音乐',
value: 'yinyue',
},
{
label: '时尚',
value: 'shishang',
},
{
label: '科技',
value: 'keji',
},
{
label: '发现',
value: 'faxian',
},
],
},
];
const appStore = useAppStore(); const appStore = useAppStore();
const mail = reactive({ const mail = reactive({

1
src/types/auto-component.d.ts vendored
View File

@ -49,7 +49,6 @@ declare module '@vue/runtime-core' {
ARadioGroup: typeof import('@arco-design/web-vue')['RadioGroup'] ARadioGroup: typeof import('@arco-design/web-vue')['RadioGroup']
AScrollbar: typeof import('@arco-design/web-vue')['Scrollbar'] AScrollbar: typeof import('@arco-design/web-vue')['Scrollbar']
ASelect: typeof import('@arco-design/web-vue')['Select'] ASelect: typeof import('@arco-design/web-vue')['Select']
ASlider: typeof import('@arco-design/web-vue')['Slider']
ASpace: typeof import('@arco-design/web-vue')['Space'] ASpace: typeof import('@arco-design/web-vue')['Space']
ASpin: typeof import('@arco-design/web-vue')['Spin'] ASpin: typeof import('@arco-design/web-vue')['Spin']
ASwitch: typeof import('@arco-design/web-vue')['Switch'] ASwitch: typeof import('@arco-design/web-vue')['Switch']

2
src/utils/delConfirm.ts
View File

@ -4,8 +4,6 @@ import { merge } from 'lodash-es';
export type DelOptions = string | Partial<Omit<ModalConfig, 'onOk' | 'onCancel'>>; export type DelOptions = string | Partial<Omit<ModalConfig, 'onOk' | 'onCancel'>>;
export const delOptions: ModalConfig = { export const delOptions: ModalConfig = {
maskAnimationName: '',
modalAnimationName: '',
title: '提示', title: '提示',
titleAlign: 'start', titleAlign: 'start',
width: 432, width: 432,