orion/FileCodeBoxFronted
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: code format

Browse Source
This commit is contained in:
Lan
2025-02-15 21:56:41 +08:00
parent 5aa5d9475d
commit 83021e2170
9 changed files with 535 additions and 1304 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+1
View File
@@ -140,6 +140,7 @@ provide('isLoading', isLoading)
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
src/router/index.ts
+4 -4
View File
@@ -1,5 +1,7 @@
import { createRouter, createWebHashHistory } from 'vue-router'
// 预加载 SendFileView 组件
const SendFileView = () => import('../views/SendFileView.vue')
const router = createRouter({
history: createWebHashHistory(import.meta.env.BASE_URL),
routes: [
@@ -11,7 +13,7 @@ const router = createRouter({
{
path: '/send',
name: 'Send',
component: () => import('@/views/SendFileView.vue')
component: SendFileView
},
{
path: '/admin',
@@ -39,12 +41,10 @@ const router = createRouter({
{
path: '/login',
name: 'Login',
component: () => import('@/views/LoginView.vue')
component: () => import('@/views/manage/LoginView.vue')
}
]
})
// 预加载 SendFileView 组件
import('../views/SendFileView.vue')
export default router
src/views/ManageView.vue
+98 -282
View File
@@ -1,8 +1,6 @@
<template>
<div
class="min-h-screen flex flex-col lg:flex-row transition-colors duration-300"
:class="[isDarkMode ? 'bg-gray-900' : 'bg-gray-50']"
>
<div class="min-h-screen flex flex-col lg:flex-row transition-colors duration-300"
:class="[isDarkMode ? 'bg-gray-900' : 'bg-gray-50']">
<!-- Sidebar -->
<aside
class="fixed inset-y-0 left-0 z-50 w-64 transform transition-all duration-300 ease-in-out lg:relative lg:translate-x-0 border-r"
@@ -11,28 +9,17 @@
? 'bg-gray-800 bg-opacity-90 backdrop-filter backdrop-blur-xl border-gray-700'
: 'bg-white border-gray-200',
{ '-translate-x-full': !isSidebarOpen }
]"
>
]">
<!-- Logo区域 -->
<div
class="flex items-center justify-between h-16 px-4 border-b"
:class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']"
>
<div class="flex items-center justify-between h-16 px-4 border-b"
:class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']">
<div class="flex items-center">
<div
class="rounded-full bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 p-1 animate-spin-slow"
>
<div class="rounded-full bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 p-1 animate-spin-slow">
<div class="rounded-full p-1" :class="[isDarkMode ? 'bg-gray-800' : 'bg-white']">
<BoxIcon
class="w-6 h-6"
:class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
/>
<BoxIcon class="w-6 h-6" :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']" />
</div>
</div>
<h1
class="ml-2 text-xl font-semibold"
:class="[isDarkMode ? 'text-white' : 'text-gray-800']"
>
<h1 class="ml-2 text-xl font-semibold" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
FileCodeBox
</h1>
</div>
@@ -45,11 +32,8 @@
<nav class="flex-1 overflow-y-auto">
<ul class="p-4 space-y-2">
<li v-for="item in menuItems" :key="item.id">
<a
href="#"
@click="currentSection = item.id"
class="flex items-center p-2 rounded-lg transition-colors duration-200"
:class="[
<a href="#" @click="currentSection = item.id"
class="flex items-center p-2 rounded-lg transition-colors duration-200" :class="[
currentSection === item.id
? isDarkMode
? 'bg-indigo-900 text-indigo-400'
@@ -57,8 +41,7 @@
: isDarkMode
? 'text-gray-400 hover:bg-gray-700'
: 'text-gray-600 hover:bg-gray-100'
]"
>
]">
<component :is="item.icon" class="w-5 h-5 mr-3" />
{{ item.name }}
</a>
@@ -70,10 +53,8 @@
<!-- Main Content -->
<div class="flex-1 flex flex-col min-h-screen">
<!-- Header -->
<header
class="shadow-md border-b transition-colors duration-300"
:class="[isDarkMode ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-200']"
>
<header class="shadow-md border-b transition-colors duration-300"
:class="[isDarkMode ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-200']">
<div class="flex items-center justify-between h-16 px-4">
<button @click="toggleSidebar" class="lg:hidden">
<MenuIcon class="w-6 h-6" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']" />
@@ -82,44 +63,28 @@
</header>
<!-- Content -->
<main
class="flex-1 p-6 overflow-y-auto transition-colors duration-300"
:class="[isDarkMode ? 'bg-gray-900' : 'bg-gray-50']"
>
<main class="flex-1 p-6 overflow-y-auto transition-colors duration-300"
:class="[isDarkMode ? 'bg-gray-900' : 'bg-gray-50']">
<div v-if="currentSection === 'dashboard'">
<h2
class="text-2xl font-bold mb-6"
:class="[isDarkMode ? 'text-white' : 'text-gray-800']"
>
<h2 class="text-2xl font-bold mb-6" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
仪表盘
</h2>
<!-- 统计卡片区域 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
<div
class="p-6 rounded-lg shadow-md transition-colors duration-300"
:class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']"
>
<div class="p-6 rounded-lg shadow-md transition-colors duration-300"
:class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']">
<div class="flex items-center justify-between">
<div>
<p class="text-sm" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">
总文件数
</p>
<h3
class="text-2xl font-bold mt-1"
:class="[isDarkMode ? 'text-white' : 'text-gray-800']"
>
<h3 class="text-2xl font-bold mt-1" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
128
</h3>
</div>
<div
class="p-3 rounded-full"
:class="[isDarkMode ? 'bg-indigo-900' : 'bg-indigo-100']"
>
<FileIcon
class="w-6 h-6"
:class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
/>
<div class="p-3 rounded-full" :class="[isDarkMode ? 'bg-indigo-900' : 'bg-indigo-100']">
<FileIcon class="w-6 h-6" :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']" />
</div>
</div>
<p class="text-sm mt-2" :class="[isDarkMode ? 'text-green-400' : 'text-green-600']">
@@ -128,30 +93,19 @@
</p>
</div>
<div
class="p-6 rounded-lg shadow-md transition-colors duration-300"
:class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']"
>
<div class="p-6 rounded-lg shadow-md transition-colors duration-300"
:class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']">
<div class="flex items-center justify-between">
<div>
<p class="text-sm" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">
存储空间
</p>
<h3
class="text-2xl font-bold mt-1"
:class="[isDarkMode ? 'text-white' : 'text-gray-800']"
>
<h3 class="text-2xl font-bold mt-1" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
1.2 TB
</h3>
</div>
<div
class="p-3 rounded-full"
:class="[isDarkMode ? 'bg-purple-900' : 'bg-purple-100']"
>
<HardDriveIcon
class="w-6 h-6"
:class="[isDarkMode ? 'text-purple-400' : 'text-purple-600']"
/>
<div class="p-3 rounded-full" :class="[isDarkMode ? 'bg-purple-900' : 'bg-purple-100']">
<HardDriveIcon class="w-6 h-6" :class="[isDarkMode ? 'text-purple-400' : 'text-purple-600']" />
</div>
</div>
<div class="mt-4 h-2 bg-gray-200 rounded-full overflow-hidden">
@@ -162,30 +116,19 @@
</p>
</div>
<div
class="p-6 rounded-lg shadow-md transition-colors duration-300"
:class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']"
>
<div class="p-6 rounded-lg shadow-md transition-colors duration-300"
:class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']">
<div class="flex items-center justify-between">
<div>
<p class="text-sm" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">
活跃用户
</p>
<h3
class="text-2xl font-bold mt-1"
:class="[isDarkMode ? 'text-white' : 'text-gray-800']"
>
<h3 class="text-2xl font-bold mt-1" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
25
</h3>
</div>
<div
class="p-3 rounded-full"
:class="[isDarkMode ? 'bg-green-900' : 'bg-green-100']"
>
<UsersIcon
class="w-6 h-6"
:class="[isDarkMode ? 'text-green-400' : 'text-green-600']"
/>
<div class="p-3 rounded-full" :class="[isDarkMode ? 'bg-green-900' : 'bg-green-100']">
<UsersIcon class="w-6 h-6" :class="[isDarkMode ? 'text-green-400' : 'text-green-600']" />
</div>
</div>
<p class="text-sm mt-2" :class="[isDarkMode ? 'text-red-400' : 'text-red-600']">
@@ -194,27 +137,19 @@
</p>
</div>
<div
class="p-6 rounded-lg shadow-md transition-colors duration-300"
:class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']"
>
<div class="p-6 rounded-lg shadow-md transition-colors duration-300"
:class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']">
<div class="flex items-center justify-between">
<div>
<p class="text-sm" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">
系统状态
</p>
<h3
class="text-2xl font-bold mt-1"
:class="[isDarkMode ? 'text-white' : 'text-gray-800']"
>
<h3 class="text-2xl font-bold mt-1" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
正常
</h3>
</div>
<div class="p-3 rounded-full" :class="[isDarkMode ? 'bg-blue-900' : 'bg-blue-100']">
<ActivityIcon
class="w-6 h-6"
:class="[isDarkMode ? 'text-blue-400' : 'text-blue-600']"
/>
<ActivityIcon class="w-6 h-6" :class="[isDarkMode ? 'text-blue-400' : 'text-blue-600']" />
</div>
</div>
<p class="text-sm mt-2" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">
@@ -224,34 +159,19 @@
</div>
<!-- 最近活动 -->
<div
class="rounded-lg shadow-md overflow-hidden transition-colors duration-300"
:class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']"
>
<div
class="px-6 py-4 border-b"
:class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']"
>
<h3
class="text-lg font-medium"
:class="[isDarkMode ? 'text-white' : 'text-gray-800']"
>
<div class="rounded-lg shadow-md overflow-hidden transition-colors duration-300"
:class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']">
<div class="px-6 py-4 border-b" :class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']">
<h3 class="text-lg font-medium" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
最近活动
</h3>
</div>
<div class="p-6">
<div class="space-y-4">
<div
v-for="(activity, index) in recentActivities"
:key="index"
class="flex items-center space-x-4"
>
<div v-for="(activity, index) in recentActivities" :key="index" class="flex items-center space-x-4">
<div class="flex-shrink-0">
<component
:is="activity.icon"
class="w-5 h-5"
:class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']"
/>
<component :is="activity.icon" class="w-5 h-5"
:class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']" />
</div>
<div class="flex-1">
<p :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
@@ -268,46 +188,31 @@
</div>
<div v-if="currentSection === 'files'">
<h2
class="text-2xl font-bold mb-6"
:class="[isDarkMode ? 'text-white' : 'text-gray-800']"
>
<h2 class="text-2xl font-bold mb-6" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
文件管理
</h2>
<!-- 添加文件操作栏 -->
<div
class="mb-6 flex flex-col sm:flex-row gap-4 items-start sm:items-center justify-between"
>
<div class="mb-6 flex flex-col sm:flex-row gap-4 items-start sm:items-center justify-between">
<!-- 搜索和过滤 -->
<div class="flex flex-1 gap-4">
<div class="relative flex-1">
<input
type="text"
v-model="fileSearchQuery"
:class="[
<input type="text" v-model="fileSearchQuery" :class="[
isDarkMode
? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400'
: 'bg-white border-gray-300 text-gray-900 placeholder-gray-400'
]"
class="w-full pl-10 pr-4 py-2 rounded-lg border focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
placeholder="搜索文件..."
/>
<SearchIcon
class="absolute left-3 top-2.5 w-5 h-5"
:class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']"
/>
placeholder="搜索文件..." />
<SearchIcon class="absolute left-3 top-2.5 w-5 h-5"
:class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']" />
</div>
<select
v-model="fileTypeFilter"
:class="[
<select v-model="fileTypeFilter" :class="[
isDarkMode
? 'bg-gray-700 border-gray-600 text-white'
: 'bg-white border-gray-300 text-gray-900'
]"
class="border rounded-lg px-4 py-2 focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
>
]" class="border rounded-lg px-4 py-2 focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
<option value="">所有类型</option>
<option value="PDF">PDF</option>
<option value="Image">图片</option>
@@ -318,90 +223,53 @@
<!-- 上传按钮 -->
<div class="flex gap-4">
<button
@click="$refs.fileInput.click()"
class="flex items-center px-4 py-2 rounded-lg bg-indigo-600 text-white hover:bg-indigo-700 transition-colors duration-200"
>
<button @click="$refs.fileInput.click()"
class="flex items-center px-4 py-2 rounded-lg bg-indigo-600 text-white hover:bg-indigo-700 transition-colors duration-200">
<UploadIcon class="w-5 h-5 mr-2" />
上传文件
</button>
<input
ref="fileInput"
type="file"
multiple
class="hidden"
@change="handleFileUpload"
/>
<input ref="fileInput" type="file" multiple class="hidden" @change="handleFileUpload" />
</div>
</div>
<!-- 拖拽上传区域 -->
<div
v-if="showDropZone"
class="mb-6 border-2 border-dashed rounded-lg p-8 text-center"
<div v-if="showDropZone" class="mb-6 border-2 border-dashed rounded-lg p-8 text-center"
:class="[isDarkMode ? 'border-gray-600 bg-gray-800/50' : 'border-gray-300 bg-gray-50']"
@drop.prevent="handleFileDrop"
@dragover.prevent="showDropZone = true"
@dragleave.prevent="showDropZone = false"
>
<UploadCloudIcon
class="mx-auto w-12 h-12 mb-4"
:class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']"
/>
@drop.prevent="handleFileDrop" @dragover.prevent="showDropZone = true"
@dragleave.prevent="showDropZone = false">
<UploadCloudIcon class="mx-auto w-12 h-12 mb-4" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']" />
<p :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">拖拽文件到此处上传</p>
</div>
<!-- File List -->
<div
class="rounded-lg shadow-md overflow-hidden transition-colors duration-300"
:class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']"
>
<div
class="px-6 py-4 border-b"
:class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']"
>
<h3
class="text-lg font-medium"
:class="[isDarkMode ? 'text-white' : 'text-gray-800']"
>
<div class="rounded-lg shadow-md overflow-hidden transition-colors duration-300"
:class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']">
<div class="px-6 py-4 border-b" :class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']">
<h3 class="text-lg font-medium" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
所有文件
</h3>
</div>
<div class="overflow-x-auto">
<table
class="min-w-full divide-y"
:class="[isDarkMode ? 'divide-gray-700' : 'divide-gray-200']"
>
<table class="min-w-full divide-y" :class="[isDarkMode ? 'divide-gray-700' : 'divide-gray-200']">
<thead :class="[isDarkMode ? 'bg-gray-900' : 'bg-gray-100']">
<tr>
<th
v-for="header in fileTableHeaders"
:key="header"
<th v-for="header in fileTableHeaders" :key="header"
class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider"
:class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']"
>
:class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']">
{{ header }}
</th>
</tr>
</thead>
<tbody
:class="[
<tbody :class="[
isDarkMode
? 'bg-gray-800 divide-y divide-gray-700'
: 'bg-white divide-y divide-gray-200'
]"
>
]">
<tr v-for="file in files" :key="file.id">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<FileIcon
class="w-5 h-5 mr-2"
:class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-500']"
/>
<span
class="font-medium"
:class="[isDarkMode ? 'text-white' : 'text-gray-900']"
>
<FileIcon class="w-5 h-5 mr-2" :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-500']" />
<span class="font-medium" :class="[isDarkMode ? 'text-white' : 'text-gray-900']">
{{ file.name }}
</span>
</div>
@@ -422,26 +290,18 @@
</span>
</td>
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<button
@click="downloadFile(file)"
class="mr-3 transition-colors duration-200"
:class="[
<button @click="downloadFile(file)" class="mr-3 transition-colors duration-200" :class="[
isDarkMode
? 'text-indigo-400 hover:text-indigo-300'
: 'text-indigo-600 hover:text-indigo-900'
]"
>
]">
下载
</button>
<button
@click="deleteFile(file)"
class="transition-colors duration-200"
:class="[
<button @click="deleteFile(file)" class="transition-colors duration-200" :class="[
isDarkMode
? 'text-red-400 hover:text-red-300'
: 'text-red-600 hover:text-red-900'
]"
>
]">
删除
</button>
</td>
@@ -452,15 +312,10 @@
</div>
<!-- 在文件列表表格下方添加分页组件 -->
<div
class="mt-4 flex items-center justify-between px-6 py-3 border-t"
:class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']"
>
<div class="mt-4 flex items-center justify-between px-6 py-3 border-t"
:class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']">
<!-- 分页信息 -->
<div
class="flex items-center text-sm"
:class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']"
>
<div class="flex items-center text-sm" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']">
显示第 {{ (params.page - 1) * params.size + 1 }} 到
{{ Math.min(params.page * params.size, params.total) }} 条，共 {{ params.total }} 条
</div>
@@ -468,11 +323,8 @@
<!-- 分页控制器 -->
<div class="flex items-center space-x-2">
<!-- 上一页 -->
<button
@click="handlePageChange(params.page - 1)"
:disabled="params.page === 1"
class="px-3 py-1 rounded-md transition-colors duration-200"
:class="[
<button @click="handlePageChange(params.page - 1)" :disabled="params.page === 1"
class="px-3 py-1 rounded-md transition-colors duration-200" :class="[
isDarkMode
? params.page === 1
? 'bg-gray-700 text-gray-500 cursor-not-allowed'
@@ -480,44 +332,32 @@
: params.page === 1
? 'bg-gray-100 text-gray-400 cursor-not-allowed'
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
]"
>
]">
上一页
</button>
<!-- 页码 -->
<div class="flex items-center space-x-1">
<template v-for="pageNum in displayedPages" :key="pageNum">
<button
v-if="pageNum !== '...'"
@click="handlePageChange(pageNum)"
class="px-3 py-1 rounded-md transition-colors duration-200"
:class="[
<button v-if="pageNum !== '...'" @click="handlePageChange(pageNum)"
class="px-3 py-1 rounded-md transition-colors duration-200" :class="[
params.page === pageNum
? 'bg-indigo-600 text-white'
: isDarkMode
? 'bg-gray-700 text-gray-300 hover:bg-gray-600'
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
]"
>
]">
{{ pageNum }}
</button>
<span
v-else
class="px-2"
:class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']"
>
<span v-else class="px-2" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']">
...
</span>
</template>
</div>
<!-- 下一页 -->
<button
@click="handlePageChange(params.page + 1)"
:disabled="params.page >= totalPages"
class="px-3 py-1 rounded-md transition-colors duration-200"
:class="[
<button @click="handlePageChange(params.page + 1)" :disabled="params.page >= totalPages"
class="px-3 py-1 rounded-md transition-colors duration-200" :class="[
isDarkMode
? params.page >= totalPages
? 'bg-gray-700 text-gray-500 cursor-not-allowed'
@@ -525,8 +365,7 @@
: params.page >= totalPages
? 'bg-gray-100 text-gray-400 cursor-not-allowed'
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
]"
>
]">
下一页
</button>
</div>
@@ -534,26 +373,17 @@
</div>
<div v-if="currentSection === 'settings'">
<h2
class="text-2xl font-bold mb-6"
:class="[isDarkMode ? 'text-white' : 'text-gray-800']"
>
<h2 class="text-2xl font-bold mb-6" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
系统设置
</h2>
<div
class="rounded-lg shadow-md p-6 transition-colors duration-300"
:class="[
<div class="rounded-lg shadow-md p-6 transition-colors duration-300" :class="[
isDarkMode
? 'bg-gray-800 bg-opacity-70 backdrop-filter backdrop-blur-xl border border-gray-700'
: 'bg-white border border-gray-200'
]"
>
]">
<div class="space-y-6">
<div>
<h3
class="text-lg font-medium mb-2"
:class="[isDarkMode ? 'text-white' : 'text-gray-800']"
>
<h3 class="text-lg font-medium mb-2" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
常规设置
</h3>
<div class="space-y-4">
@@ -575,47 +405,32 @@
</div>
<div>
<h3
class="text-lg font-medium mb-2"
:class="[isDarkMode ? 'text-white' : 'text-gray-800']"
>
<h3 class="text-lg font-medium mb-2" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
安全设置
</h3>
<div class="space-y-4">
<div class="flex items-center justify-between">
<span :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
>双因素认证</span
>
<span :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">双因素认证</span>
<label class="switch">
<input type="checkbox" v-model="settings.twoFactor" />
<span class="slider round"></span>
</label>
</div>
<div>
<label
for="password"
class="block text-sm font-medium mb-1"
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
>
<label for="password" class="block text-sm font-medium mb-1"
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
更改密码
</label>
<div class="mt-1 relative rounded-md shadow-sm">
<input
type="password"
id="password"
v-model="newPassword"
<input type="password" id="password" v-model="newPassword"
class="block w-full pr-10 sm:text-sm rounded-md focus:ring-indigo-500 focus:border-indigo-500"
:class="[
isDarkMode
? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400'
: 'border-gray-300 text-gray-900 placeholder-gray-400'
]"
placeholder="新密码"
/>
<button
@click="changePassword"
class="absolute inset-y-0 right-0 px-3 flex items-center bg-indigo-600 text-white rounded-r-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors duration-200"
>
]" placeholder="新密码" />
<button @click="changePassword"
class="absolute inset-y-0 right-0 px-3 flex items-center bg-indigo-600 text-white rounded-r-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors duration-200">
更改
</button>
</div>
@@ -921,6 +736,7 @@ input:checked + .slider {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
src/views/RetrievewFileView.vue
+91 -188
View File
@@ -1,119 +1,74 @@
<template>
<div
class="min-h-screen flex items-center justify-center p-4 overflow-hidden transition-colors duration-300"
>
<div class="min-h-screen flex items-center justify-center p-4 overflow-hidden transition-colors duration-300">
<div class="w-full max-w-md relative z-10">
<div
class="rounded-3xl shadow-2xl overflow-hidden border transform transition-all duration-300"
:class="[
<div class="rounded-3xl shadow-2xl overflow-hidden border transform transition-all duration-300" :class="[
isDarkMode
? 'bg-gray-800 bg-opacity-50 backdrop-filter backdrop-blur-xl border-gray-700'
: 'bg-white border-gray-200'
]"
>
]">
<div class="p-8">
<div class="flex justify-center mb-8">
<div
class="rounded-full bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 p-1 animate-spin-slow"
>
<div class="rounded-full bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 p-1 animate-spin-slow">
<div class="rounded-full bg-gray-900 p-2">
<BoxIcon class="w-8 h-8 text-white" />
</div>
</div>
</div>
<h2
@click="toSend"
class="text-3xl cursor-pointer font-extrabold text-center mb-6"
:class="[
<h2 @click="toSend" class="text-3xl cursor-pointer font-extrabold text-center mb-6" :class="[
isDarkMode
? 'text-transparent bg-clip-text bg-gradient-to-r from-indigo-300 via-purple-300 to-pink-300'
: 'text-indigo-600'
]"
>
]">
{{ config.name }}
</h2>
<form @submit.prevent="handleSubmit">
<div class="mb-6 relative">
<label
for="code"
class="block text-sm font-medium mb-2"
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']"
>取件码</label
>
<label for="code" class="block text-sm font-medium mb-2"
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']">取件码</label>
<div class="relative">
<input
id="code"
v-model="code"
type="text"
<input id="code" v-model="code" type="text"
class="w-full px-4 py-3 rounded-lg placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 transition duration-300 pr-10"
:class="[
isDarkMode ? 'bg-gray-700 bg-opacity-50' : 'bg-gray-100',
{ 'ring-2 ring-red-500': error },
isDarkMode ? 'text-gray-300' : 'text-gray-800'
]"
placeholder="请输入5位取件码"
required
:readonly="inputStatus.readonly"
maxlength="5"
@focus="isInputFocused = true"
@blur="isInputFocused = false"
/>
<div
v-if="inputStatus.loading"
class="absolute inset-y-0 right-0 flex items-center pr-3"
>
<span
class="animate-spin rounded-full h-5 w-5 border-b-2 border-indigo-500"
></span>
]" placeholder="请输入5位取件码" required :readonly="inputStatus.readonly" maxlength="5"
@focus="isInputFocused = true" @blur="isInputFocused = false" />
<div v-if="inputStatus.loading" class="absolute inset-y-0 right-0 flex items-center pr-3">
<span class="animate-spin rounded-full h-5 w-5 border-b-2 border-indigo-500"></span>
</div>
</div>
<div
class="absolute -bottom-0.5 left-2 h-0.5 bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 transition-all duration-300 ease-in-out"
:class="{ 'w-97-100': isInputFocused, 'w-0': !isInputFocused }"
></div>
:class="{ 'w-97-100': isInputFocused, 'w-0': !isInputFocused }"></div>
</div>
<button
type="submit"
<button type="submit"
class="w-full bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-white font-bold py-3 px-4 rounded-lg hover:from-indigo-600 hover:via-purple-600 hover:to-pink-600 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 transition duration-300 transform hover:scale-105 hover:shadow-lg relative overflow-hidden group"
:disabled="inputStatus.loading"
>
:disabled="inputStatus.loading">
<span class="flex items-center justify-center relative z-10">
<span>{{ inputStatus.loading ? '处理中...' : '提取文件' }}</span>
<ArrowRightIcon
class="w-5 h-5 ml-2 transition-transform duration-300 transform group-hover:translate-x-1"
/>
class="w-5 h-5 ml-2 transition-transform duration-300 transform group-hover:translate-x-1" />
</span>
<span
class="absolute top-0 left-0 w-full h-full bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300"
></span>
class="absolute top-0 left-0 w-full h-full bg-gradient-to-r from-pink-500 via-purple-500 to-indigo-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
</button>
</form>
<div class="mt-6 text-center">
<router-link
to="/send"
class="text-indigo-400 hover:text-indigo-300 transition duration-300"
>
<router-link to="/send" class="text-indigo-400 hover:text-indigo-300 transition duration-300">
需要发送文件？点击这里
</router-link>
</div>
</div>
<div
class="px-8 py-4 bg-opacity-50 flex justify-between items-center"
:class="[isDarkMode ? 'bg-gray-800' : 'bg-gray-100']"
>
<span
class="text-sm flex items-center"
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']"
>
<div class="px-8 py-4 bg-opacity-50 flex justify-between items-center"
:class="[isDarkMode ? 'bg-gray-800' : 'bg-gray-100']">
<span class="text-sm flex items-center" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']">
<ShieldCheckIcon class="w-4 h-4 mr-1 text-green-400" />
安全加密
</span>
<button
@click="toggleDrawer"
class="text-sm hover:text-indigo-300 transition duration-300 flex items-center"
:class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
>
<button @click="toggleDrawer" class="text-sm hover:text-indigo-300 transition duration-300 flex items-center"
:class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']">
取件记录
<ClipboardListIcon class="w-4 h-4 ml-1" />
</button>
@@ -122,84 +77,56 @@
</div>
<transition name="drawer">
<div
v-if="showDrawer"
<div v-if="showDrawer"
class="fixed inset-y-0 right-0 w-full sm:w-120 bg-opacity-70 backdrop-filter backdrop-blur-xl shadow-2xl z-50 overflow-hidden flex flex-col"
:class="[isDarkMode ? 'bg-gray-900' : 'bg-white']"
>
<div
class="flex justify-between items-center p-6 border-b"
:class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']"
>
:class="[isDarkMode ? 'bg-gray-900' : 'bg-white']">
<div class="flex justify-between items-center p-6 border-b"
:class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']">
<h3 class="text-2xl font-bold" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
取件记录
</h3>
<button
@click="toggleDrawer"
class="hover:text-white transition duration-300"
:class="[isDarkMode ? 'text-gray-400' : 'text-gray-800']"
>
<button @click="toggleDrawer" class="hover:text-white transition duration-300"
:class="[isDarkMode ? 'text-gray-400' : 'text-gray-800']">
<XIcon class="w-6 h-6" />
</button>
</div>
<div class="flex-grow overflow-y-auto p-6">
<transition-group name="list" tag="div" class="space-y-4">
<div
v-for="record in records"
:key="record.id"
<div v-for="record in records" :key="record.id"
class="bg-opacity-50 rounded-lg p-4 flex items-center shadow-md hover:shadow-lg transition duration-300 transform hover:scale-102"
:class="[isDarkMode ? 'bg-gray-800 hover:bg-gray-700' : 'bg-gray-100 hover:bg-white']"
>
:class="[isDarkMode ? 'bg-gray-800 hover:bg-gray-700' : 'bg-gray-100 hover:bg-white']">
<div class="flex-shrink-0 mr-4">
<FileIcon
class="w-10 h-10"
:class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
/>
<FileIcon class="w-10 h-10" :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']" />
</div>
<div class="flex-grow min-w-0 mr-4">
<p
class="font-medium text-lg truncate"
:class="[isDarkMode ? 'text-white' : 'text-gray-800']"
>
<p class="font-medium text-lg truncate" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
{{ record.filename }}
</p>
<p
class="text-sm truncate"
:class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']"
>
<p class="text-sm truncate" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">
{{ record.date }} · {{ record.size }}
</p>
</div>
<div class="flex-shrink-0 flex space-x-2">
<button
@click="viewDetails(record)"
class="p-2 rounded-full hover:bg-opacity-20 transition duration-300"
:class="[
<button @click="viewDetails(record)"
class="p-2 rounded-full hover:bg-opacity-20 transition duration-300" :class="[
isDarkMode
? 'hover:bg-indigo-400 text-indigo-400'
: 'hover:bg-indigo-100 text-indigo-600'
]"
>
]">
<EyeIcon class="w-5 h-5" />
</button>
<button
@click="downloadRecord(record)"
class="p-2 rounded-full hover:bg-opacity-20 transition duration-300"
:class="[
<button @click="downloadRecord(record)"
class="p-2 rounded-full hover:bg-opacity-20 transition duration-300" :class="[
isDarkMode
? 'hover:bg-green-400 text-green-400'
: 'hover:bg-green-100 text-green-600'
]"
>
]">
<DownloadIcon class="w-5 h-5" />
</button>
<button
@click="deleteRecord(record.id)"
class="p-2 rounded-full hover:bg-opacity-20 transition duration-300"
:class="[
<button @click="deleteRecord(record.id)"
class="p-2 rounded-full hover:bg-opacity-20 transition duration-300" :class="[
isDarkMode ? 'hover:bg-red-400 text-red-400' : 'hover:bg-red-100 text-red-600'
]"
>
]">
<TrashIcon class="w-5 h-5" />
</button>
</div>
@@ -210,80 +137,49 @@
</transition>
<transition name="fade">
<div
v-if="selectedRecord"
class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
>
<div v-if="selectedRecord" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
<div
class="p-8 rounded-2xl max-w-md w-full mx-4 shadow-2xl transform transition-all duration-300 ease-out backdrop-filter backdrop-blur-lg bg-opacity-70 overflow-hidden"
:class="[isDarkMode ? 'bg-gray-800' : 'bg-white']"
>
<h3
class="text-2xl font-bold mb-6 truncate"
:class="[isDarkMode ? 'text-white' : 'text-gray-800']"
>
:class="[isDarkMode ? 'bg-gray-800' : 'bg-white']">
<h3 class="text-2xl font-bold mb-6 truncate" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
文件详情
</h3>
<div class="space-y-4">
<div class="flex items-center">
<FileIcon
class="w-6 h-6 mr-3 flex-shrink-0"
:class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
/>
<p
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']"
class="truncate flex-grow"
>
<FileIcon class="w-6 h-6 mr-3 flex-shrink-0"
:class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']" />
<p :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']" class="truncate flex-grow">
<span class="font-medium">文件名：</span>{{ selectedRecord.filename }}
</p>
</div>
<div class="flex items-center">
<CalendarIcon
class="w-6 h-6 mr-3 flex-shrink-0"
:class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
/>
<p
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']"
class="truncate flex-grow"
>
<CalendarIcon class="w-6 h-6 mr-3 flex-shrink-0"
:class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']" />
<p :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']" class="truncate flex-grow">
<span class="font-medium">取件日期：</span>{{ selectedRecord.date }}
</p>
</div>
<div class="flex items-center">
<HardDriveIcon
class="w-6 h-6 mr-3 flex-shrink-0"
:class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
/>
<p
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']"
class="truncate flex-grow"
>
<HardDriveIcon class="w-6 h-6 mr-3 flex-shrink-0"
:class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']" />
<p :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']" class="truncate flex-grow">
<span class="font-medium">文件大小：</span>{{ selectedRecord.size }}
</p>
</div>
<div class="flex items-center">
<DownloadIcon
class="w-6 h-6 mr-3"
:class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
/>
<DownloadIcon class="w-6 h-6 mr-3" :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']" />
<p :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']">
<span class="font-medium">文件内容：</span>
</p>
<div v-if="selectedRecord.filename == 'Text'" class="ml-2">
<button
@click="showContentPreview"
class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition duration-300"
>
<button @click="showContentPreview"
class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition duration-300">
预览内容
</button>
</div>
<div v-else>
<a
:href="`${baseUrl}${selectedRecord.downloadUrl}`"
target="_blank"
rel="noopener noreferrer"
class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition duration-300"
>
<a :href="`${baseUrl}${selectedRecord.downloadUrl}`" target="_blank" rel="noopener noreferrer"
class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition duration-300">
点击下载
</a>
</div>
@@ -291,10 +187,7 @@
</div>
<div class="mt-6 flex flex-col items-center">
<h4
class="text-lg font-semibold mb-3"
:class="[isDarkMode ? 'text-white' : 'text-gray-800']"
>
<h4 class="text-lg font-semibold mb-3" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
取件二维码
</h4>
<div class="bg-white p-2 rounded-lg shadow-md">
@@ -305,10 +198,8 @@
</p>
</div>
<button
@click="selectedRecord = null"
class="mt-8 w-full bg-gradient-to-r from-indigo-500 to-purple-600 text-white px-6 py-3 rounded-lg font-medium hover:from-indigo-600 hover:to-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 transition duration-300 transform hover:scale-105"
>
<button @click="selectedRecord = null"
class="mt-8 w-full bg-gradient-to-r from-indigo-500 to-purple-600 text-white px-6 py-3 rounded-lg font-medium hover:from-indigo-600 hover:to-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 transition duration-300 transform hover:scale-105">
关闭
</button>
</div>
@@ -317,14 +208,10 @@
<!-- 新增内容预览弹框 -->
<transition name="fade">
<div
v-if="showPreview"
class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
>
<div v-if="showPreview" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
<div
class="p-8 rounded-2xl max-w-3xl w-full mx-4 shadow-2xl transform transition-all duration-300 ease-out backdrop-filter backdrop-blur-lg bg-opacity-70 max-h-[80vh] overflow-y-auto"
:class="[isDarkMode ? 'bg-gray-800' : 'bg-white']"
>
:class="[isDarkMode ? 'bg-gray-800' : 'bg-white']">
<div class="flex justify-between items-center mb-4">
<h3 class="text-2xl font-bold" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
内容预览
@@ -333,11 +220,7 @@
<XIcon class="w-6 h-6" />
</button>
</div>
<div
class="prose max-w-none"
:class="[isDarkMode ? 'prose-invert' : '']"
v-html="renderedContent"
></div>
<div class="prose max-w-none" :class="[isDarkMode ? 'prose-invert' : '']" v-html="renderedContent"></div>
</div>
</div>
</transition>
@@ -522,34 +405,44 @@ const showContentPreview = () => {
<style scoped>
@keyframes blob {
0%,
100% {
transform: translate(0, 0) scale(1);
}
25% {
transform: translate(20px, -50px) scale(1.1);
}
50% {
transform: translate(-20px, 20px) scale(0.9);
}
75% {
transform: translate(50px, 50px) scale(1.05);
}
}
@media (min-width: 640px) {
.sm\:w-120 {
width: 30rem; /* 480px */
width: 30rem;
/* 480px */
}
}
.animate-blob-1 {
animation: blob 25s infinite;
}
.animate-blob-2 {
animation: blob 30s infinite;
}
.animate-blob-3 {
animation: blob 35s infinite;
}
.animate-blob-4 {
animation: blob 40s infinite;
}
@@ -562,6 +455,7 @@ const showContentPreview = () => {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
@@ -571,6 +465,7 @@ const showContentPreview = () => {
.fade-leave-active {
transition: opacity 0.3s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
@@ -580,6 +475,7 @@ const showContentPreview = () => {
.list-leave-active {
transition: all 0.5s ease;
}
.list-enter-from,
.list-leave-to {
opacity: 0;
@@ -590,10 +486,12 @@ const showContentPreview = () => {
.drawer-leave-active {
transition: transform 0.3s ease;
}
.drawer-enter-from,
.drawer-leave-to {
transform: translateX(100%);
}
.w-97-100 {
width: 97%;
}
@@ -602,30 +500,35 @@ const showContentPreview = () => {
:deep(.prose) {
text-align: left;
}
:deep(.prose h1),
:deep(.prose h2),
:deep(.prose h3),
:deep(.prose h4),
:deep(.prose h5),
:deep(.prose h6) {
color: rgb(79, 70, 229); /* text-indigo-600 */
color: rgb(79, 70, 229);
/* text-indigo-600 */
}
@media (prefers-color-scheme: dark) {
:deep(.prose h1),
:deep(.prose h2),
:deep(.prose h3),
:deep(.prose h4),
:deep(.prose h5),
:deep(.prose h6) {
color: rgb(129, 140, 248); /* text-indigo-400 */
color: rgb(129, 140, 248);
/* text-indigo-400 */
}
}
/* 添加新的宽度类 */
@media (min-width: 640px) {
.sm\:w-120 {
width: 30rem; /* 480px */
width: 30rem;
/* 480px */
}
}
</style>
src/views/SendFileView.vue
+68 -241
View File
@@ -1,48 +1,31 @@
<template>
<div
class="min-h-screen flex items-center justify-center p-4 overflow-hidden transition-colors duration-300"
>
<div
class="rounded-3xl shadow-2xl overflow-hidden border w-full max-w-md transition-colors duration-300"
:class="[
<div class="min-h-screen flex items-center justify-center p-4 overflow-hidden transition-colors duration-300">
<div class="rounded-3xl shadow-2xl overflow-hidden border w-full max-w-md transition-colors duration-300" :class="[
isDarkMode
? 'bg-white bg-opacity-10 backdrop-filter backdrop-blur-xl border-gray-700'
: 'bg-white border-gray-200'
]"
>
]">
<div class="p-8">
<h2
class="text-3xl font-extrabold text-center mb-8 cursor-pointer transition-colors duration-300"
:class="[
<h2 class="text-3xl font-extrabold text-center mb-8 cursor-pointer transition-colors duration-300" :class="[
isDarkMode
? 'text-transparent bg-clip-text bg-gradient-to-r from-indigo-300 via-purple-300 to-pink-300'
: 'text-indigo-600'
]"
@click="toRetrieve"
>
]" @click="toRetrieve">
{{ config.name }}
</h2>
<form @submit.prevent="handleSubmit" class="space-y-8">
<!-- 发送类型选择 -->
<div class="flex justify-center space-x-4 mb-6">
<button
type="button"
@click="sendType = 'file'"
:class="[
<button type="button" @click="sendType = 'file'" :class="[
'px-4 py-2 rounded-lg',
sendType === 'file' ? 'bg-indigo-600 text-white' : 'bg-gray-700 text-gray-300'
]"
>
]">
发送文件
</button>
<button
type="button"
@click="sendType = 'text'"
:class="[
<button type="button" @click="sendType = 'text'" :class="[
'px-4 py-2 rounded-lg',
sendType === 'text' ? 'bg-indigo-600 text-white' : 'bg-gray-700 text-gray-300'
]"
>
]">
发送文本
</button>
</div>
@@ -56,37 +39,23 @@
isDarkMode
? 'bg-gray-800 bg-opacity-50 border-gray-600 hover:border-indigo-500'
: 'bg-gray-100 border-gray-300 hover:border-indigo-500'
]"
@click="triggerFileUpload"
@dragover.prevent
@drop.prevent="handleFileDrop"
>
<input
id="file-upload"
type="file"
class="hidden"
@change="handleFileUpload"
ref="fileInput"
/>
]" @click="triggerFileUpload" @dragover.prevent @drop.prevent="handleFileDrop">
<input id="file-upload" type="file" class="hidden" @change="handleFileUpload" ref="fileInput" />
<div class="absolute inset-0 w-full h-full" v-if="uploadProgress > 0">
<BorderProgressBar :progress="uploadProgress" />
</div>
<UploadCloudIcon
:class="[
<UploadCloudIcon :class="[
'w-16 h-16 transition-colors duration-300',
isDarkMode
? 'text-gray-400 group-hover:text-indigo-400'
: 'text-gray-600 group-hover:text-indigo-600'
]"
/>
<p
:class="[
]" />
<p :class="[
'mt-4 text-sm transition-colors duration-300 w-full text-center',
isDarkMode
? 'text-gray-400 group-hover:text-indigo-400'
: 'text-gray-600 group-hover:text-indigo-600'
]"
>
]">
<span class="block truncate">
{{ selectedFile ? selectedFile.name : '点击或拖放文件到此处上传' }}
</span>
@@ -99,18 +68,12 @@
<div v-else key="text" class="grid grid-cols-1 gap-8">
<!-- 文本输入区域 -->
<div v-if="sendType === 'text'" class="flex flex-col">
<textarea
id="text-content"
v-model="textContent"
rows="7"
:class="[
<textarea id="text-content" v-model="textContent" rows="7" :class="[
'flex-grow px-4 py-3 rounded-xl placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500 transition duration-300 resize-none',
isDarkMode
? 'bg-gray-800 bg-opacity-50 text-white'
: 'bg-white text-gray-900 border border-gray-300'
]"
placeholder="在此输入要发送的文本..."
></textarea>
]" placeholder="在此输入要发送的文本..."></textarea>
</div>
</div>
</transition>
@@ -119,51 +82,38 @@
<label :class="['text-sm font-medium', isDarkMode ? 'text-gray-300' : 'text-gray-700']">
过期方式
</label>
<select
v-model="expirationMethod"
:class="[
<select v-model="expirationMethod" :class="[
'px-4 py-2 rounded-xl focus:outline-none focus:ring-2 focus:ring-indigo-500',
isDarkMode
? 'bg-gray-800 bg-opacity-50 text-white'
: 'bg-white text-gray-900 border border-gray-300'
]"
>
]">
<option v-for="item in config.expireStyle" :value="item" :key="item">
{{ getUnit(item) }}
</option>
</select>
<div v-if="expirationMethod !== 'forever'" class="flex items-center space-x-2">
<div class="relative flex-grow">
<input
v-model="expirationValue"
type="number"
:placeholder="getPlaceholder()"
:class="[
<input v-model="expirationValue" type="number" :placeholder="getPlaceholder()" :class="[
'w-full px-4 py-2 pr-16 rounded-xl placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500',
isDarkMode
? 'bg-gray-800 bg-opacity-50 text-white'
: 'bg-white text-gray-900 border border-gray-300'
]"
/>
<span
:class="[
]" />
<span :class="[
'absolute right-3 top-1/2 transform -translate-y-1/2',
isDarkMode ? 'text-gray-300' : 'text-gray-700'
]"
>
]">
{{ getUnit() }}
</span>
</div>
</div>
</div>
<!-- 提交按钮 -->
<button
type="submit"
class="w-full bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-white font-bold py-4 px-6 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 transition-all duration-300 transform hover:scale-105 hover:shadow-lg relative overflow-hidden group"
>
<button type="submit"
class="w-full bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 text-white font-bold py-4 px-6 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 transition-all duration-300 transform hover:scale-105 hover:shadow-lg relative overflow-hidden group">
<span
class="absolute top-0 left-0 w-full h-full bg-white opacity-0 group-hover:opacity-20 transition-opacity duration-300"
></span>
class="absolute top-0 left-0 w-full h-full bg-white opacity-0 group-hover:opacity-20 transition-opacity duration-300"></span>
<span class="relative z-10 flex items-center justify-center text-lg">
<SendIcon class="w-6 h-6 mr-2" />
<span>安全寄送</span>
@@ -177,22 +127,14 @@
</div>
</div>
<div
class="px-8 py-4 bg-opacity-50 flex justify-between items-center"
:class="[isDarkMode ? 'bg-gray-800' : 'bg-gray-100']"
>
<span
class="text-sm flex items-center"
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']"
>
<div class="px-8 py-4 bg-opacity-50 flex justify-between items-center"
:class="[isDarkMode ? 'bg-gray-800' : 'bg-gray-100']">
<span class="text-sm flex items-center" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']">
<ShieldCheckIcon class="w-4 h-4 mr-1 text-green-400" />
安全加密
</span>
<button
@click="toggleDrawer"
class="text-sm hover:text-indigo-300 transition duration-300 flex items-center"
:class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
>
<button @click="toggleDrawer" class="text-sm hover:text-indigo-300 transition duration-300 flex items-center"
:class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']">
发件记录
<ClipboardListIcon class="w-4 h-4 ml-1" />
</button>
@@ -201,84 +143,56 @@
<!-- 抽屉式发件记录 -->
<transition name="drawer">
<div
v-if="showDrawer"
<div v-if="showDrawer"
class="fixed inset-y-0 right-0 w-full sm:w-120 bg-opacity-70 backdrop-filter backdrop-blur-xl shadow-2xl z-50 overflow-hidden flex flex-col"
:class="[isDarkMode ? 'bg-gray-900' : 'bg-white']"
>
<div
class="flex justify-between items-center p-6 border-b"
:class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']"
>
:class="[isDarkMode ? 'bg-gray-900' : 'bg-white']">
<div class="flex justify-between items-center p-6 border-b"
:class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']">
<h3 class="text-2xl font-bold" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
发件记录
</h3>
<button
@click="toggleDrawer"
class="hover:text-white transition duration-300"
:class="[isDarkMode ? 'text-gray-400' : 'text-gray-800']"
>
<button @click="toggleDrawer" class="hover:text-white transition duration-300"
:class="[isDarkMode ? 'text-gray-400' : 'text-gray-800']">
<XIcon class="w-6 h-6" />
</button>
</div>
<div class="flex-grow overflow-y-auto p-6">
<transition-group name="list" tag="div" class="space-y-4">
<div
v-for="record in sendRecords"
:key="record.id"
<div v-for="record in sendRecords" :key="record.id"
class="bg-opacity-50 rounded-lg p-4 flex items-center shadow-md hover:shadow-lg transition duration-300 transform hover:scale-102"
:class="[isDarkMode ? 'bg-gray-800 hover:bg-gray-700' : 'bg-gray-100 hover:bg-white']"
>
:class="[isDarkMode ? 'bg-gray-800 hover:bg-gray-700' : 'bg-gray-100 hover:bg-white']">
<div class="flex-shrink-0 mr-4">
<FileIcon
class="w-10 h-10"
:class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
/>
<FileIcon class="w-10 h-10" :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']" />
</div>
<div class="flex-grow min-w-0 mr-4">
<p
class="font-medium text-lg truncate"
:class="[isDarkMode ? 'text-white' : 'text-gray-800']"
>
<p class="font-medium text-lg truncate" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
{{ record.filename ? record.filename : 'Text' }}
</p>
<p
class="text-sm truncate"
:class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']"
>
<p class="text-sm truncate" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">
{{ record.date }} · {{ record.size }}
</p>
</div>
<div class="flex-shrink-0 flex space-x-2">
<button
@click="copyRetrieveLink(record.retrieveCode)"
class="p-2 rounded-full hover:bg-opacity-20 transition duration-300"
:class="[
<button @click="copyRetrieveLink(record.retrieveCode)"
class="p-2 rounded-full hover:bg-opacity-20 transition duration-300" :class="[
isDarkMode
? 'hover:bg-blue-400 text-blue-400'
: 'hover:bg-blue-100 text-blue-600'
]"
>
]">
<ClipboardCopyIcon class="w-5 h-5" />
</button>
<button
@click="viewDetails(record)"
class="p-2 rounded-full hover:bg-opacity-20 transition duration-300"
:class="[
<button @click="viewDetails(record)"
class="p-2 rounded-full hover:bg-opacity-20 transition duration-300" :class="[
isDarkMode
? 'hover:bg-green-400 text-green-400'
: 'hover:bg-green-100 text-green-600'
]"
>
]">
<EyeIcon class="w-5 h-5" />
</button>
<button
@click="deleteRecord(record.id)"
class="p-2 rounded-full hover:bg-opacity-20 transition duration-300"
:class="[
<button @click="deleteRecord(record.id)"
class="p-2 rounded-full hover:bg-opacity-20 transition duration-300" :class="[
isDarkMode ? 'hover:bg-red-400 text-red-400' : 'hover:bg-red-100 text-red-600'
]"
>
]">
<TrashIcon class="w-5 h-5" />
</button>
</div>
@@ -290,53 +204,34 @@
<!-- 记录详情弹窗 -->
<transition name="fade">
<div
v-if="selectedRecord"
class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
>
<div v-if="selectedRecord" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
<div
class="p-8 rounded-2xl max-w-md w-full mx-4 shadow-2xl transform transition-all duration-300 ease-out backdrop-filter backdrop-blur-lg bg-opacity-70"
:class="[isDarkMode ? 'bg-gray-800' : 'bg-white']"
>
<h3
class="text-2xl font-bold mb-6"
:class="[isDarkMode ? 'text-white' : 'text-gray-800']"
>
:class="[isDarkMode ? 'bg-gray-800' : 'bg-white']">
<h3 class="text-2xl font-bold mb-6" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
文件详情
</h3>
<div class="space-y-4">
<div class="flex items-center">
<FileIcon
class="w-6 h-6 mr-3"
:class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
/>
<FileIcon class="w-6 h-6 mr-3" :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']" />
<p :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']">
<span class="font-medium">文件名：</span>{{ selectedRecord.filename }}
</p>
</div>
<div class="flex items-center">
<CalendarIcon
class="w-6 h-6 mr-3"
:class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
/>
<CalendarIcon class="w-6 h-6 mr-3" :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']" />
<p :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']">
<span class="font-medium">发送日期：</span>{{ selectedRecord.date }}
</p>
</div>
<div class="flex items-center">
<HardDriveIcon
class="w-6 h-6 mr-3"
:class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
/>
<HardDriveIcon class="w-6 h-6 mr-3" :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']" />
<p :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']">
<span class="font-medium">文件大小：</span>{{ selectedRecord.size }}
</p>
</div>
<div class="flex items-center">
<ClockIcon
class="w-6 h-6 mr-3"
:class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
/>
<ClockIcon class="w-6 h-6 mr-3" :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']" />
<p :class="[isDarkMode ? 'text-gray-300' : 'text-gray-800']">
<span class="font-medium">过期时间：</span>{{ selectedRecord.expiration }}
</p>
@@ -346,16 +241,12 @@
<!-- 取件码和二维码部分 -->
<div class="mt-6 flex justify-between items-center">
<div class="flex flex-col items-center w-1/2 pr-2">
<h4
class="text-lg font-semibold mb-3"
:class="[isDarkMode ? 'text-white' : 'text-gray-800']"
>
<h4 class="text-lg font-semibold mb-3" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
取件码
</h4>
<div
class="bg-gray-100 p-3 rounded-lg shadow-md cursor-pointer hover:bg-gray-200 transition-colors duration-300 w-full text-center"
@click="copyRetrieveCode(selectedRecord.retrieveCode)"
>
@click="copyRetrieveCode(selectedRecord.retrieveCode)">
<p class="text-2xl font-bold text-indigo-600">{{ selectedRecord.retrieveCode }}</p>
</div>
<p class="mt-2 text-sm" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">
@@ -363,10 +254,7 @@
</p>
</div>
<div class="flex flex-col items-center w-1/2 pl-2">
<h4
class="text-lg font-semibold mb-3"
:class="[isDarkMode ? 'text-white' : 'text-gray-800']"
>
<h4 class="text-lg font-semibold mb-3" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
二维码
</h4>
<div class="bg-white p-2 rounded-lg shadow-md">
@@ -378,10 +266,8 @@
</div>
</div>
<button
@click="selectedRecord = null"
class="mt-8 w-full bg-gradient-to-r from-indigo-500 to-purple-600 text-white px-6 py-3 rounded-lg font-medium hover:from-indigo-600 hover:to-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 transition duration-300 transform hover:scale-105"
>
<button @click="selectedRecord = null"
class="mt-8 w-full bg-gradient-to-r from-indigo-500 to-purple-600 text-white px-6 py-3 rounded-lg font-medium hover:from-indigo-600 hover:to-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 transition duration-300 transform hover:scale-105">
关闭
</button>
</div>
@@ -437,7 +323,6 @@ const sendRecords = computed(() => fileDataStore.shareData)
// 新增状态
const fileHash = ref('')
const uploadedChunks = ref<Set<number>>(new Set())
const triggerFileUpload = () => {
fileInput.value?.click()
@@ -461,7 +346,7 @@ const handleFileDrop = async (event: DragEvent) => {
const calculateFileHash = async (file: File): Promise<string> => {
return new Promise((resolve) => {
const chunkSize = 2097152 // 2MB
const chunkSize = 2097152
const spark = new SparkMD5.ArrayBuffer()
const fileReader = new FileReader()
@@ -489,67 +374,6 @@ const calculateFileHash = async (file: File): Promise<string> => {
})
}
const startChunkUpload = async () => {
if (!selectedFile.value) return
const chunkSize = 1024 * 1024 // 1MB 每片
const totalChunks = Math.ceil(selectedFile.value.size / chunkSize)
// 检查已上传的切片
const { uploadedList } = await checkUploadedChunks(fileHash.value)
uploadedChunks.value = new Set(uploadedList)
for (let i = 0; i < totalChunks; i++) {
if (uploadedChunks.value.has(i)) {
console.log(`切片 ${i} 已上传,跳过`)
continue
}
const start = i * chunkSize
const end = Math.min(start + chunkSize, selectedFile.value.size)
const chunk = selectedFile.value.slice(start, end)
// 上传每个切片
await uploadChunk(chunk, i, totalChunks)
// 更新进度
uploadProgress.value = ((uploadedChunks.value.size + 1) / totalChunks) * 100
}
// 所有切片上传完成,通知服务器合并文件
await mergeChunks(fileHash.value, totalChunks)
alertStore.showAlert('文件上传完成', 'success')
}
const checkUploadedChunks = async (fileHash: string) => {
console.log(fileHash)
// 这里应该调用后端API来检查已上传的切片
// 现在用模拟数据代替
return new Promise<{ uploadedList: number[] }>((resolve) => {
setTimeout(() => {
resolve({ uploadedList: [] })
}, 500)
})
}
const uploadChunk = async (chunk: Blob, index: number, total: number) => {
// 这里应该是实际的上传逻辑,现在用setTimeout模拟
return new Promise<void>((resolve) => {
setTimeout(() => {
console.log(`上传切片 ${index + 1}/${total}`)
uploadedChunks.value.add(index)
resolve()
}, 500)
})
}
const mergeChunks = async (fileHash: string, totalChunks: number) => {
// 这里应该调用后端API来合并文件切片
console.log(`请求合并文件切片, fileHash: ${fileHash}, totalChunks: ${totalChunks}`)
}
const getPlaceholder = (value: string = expirationMethod.value) => {
switch (value) {
case 'day':
@@ -726,7 +550,8 @@ onMounted(() => {
@media (min-width: 640px) {
.sm\:w-120 {
width: 30rem; /* 480px */
width: 30rem;
/* 480px */
}
}
@@ -740,6 +565,7 @@ onMounted(() => {
.drawer-leave-active {
transition: transform 0.3s ease;
}
.drawer-enter-from,
.drawer-leave-to {
transform: translateX(100%);
@@ -749,6 +575,7 @@ onMounted(() => {
.list-leave-active {
transition: all 0.5s ease;
}
.list-enter-from,
.list-leave-to {
opacity: 0;
src/views/manage/DashboardView.vue
+21 -62
View File
@@ -6,27 +6,19 @@
<!-- 统计卡片区域 -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
<div
class="p-6 rounded-lg shadow-md transition-colors duration-300"
:class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']"
>
<div class="p-6 rounded-lg shadow-md transition-colors duration-300"
:class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']">
<div class="flex items-center justify-between">
<div>
<p class="text-sm" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">
总文件数
</p>
<h3
class="text-2xl font-bold mt-1"
:class="[isDarkMode ? 'text-white' : 'text-gray-800']"
>
<h3 class="text-2xl font-bold mt-1" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
{{ dashboardData.totalFiles }}
</h3>
</div>
<div class="p-3 rounded-full" :class="[isDarkMode ? 'bg-indigo-900' : 'bg-indigo-100']">
<FileIcon
class="w-6 h-6"
:class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
/>
<FileIcon class="w-6 h-6" :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']" />
</div>
</div>
<p class="text-sm mt-2" :class="[isDarkMode ? 'text-green-400' : 'text-green-600']">
@@ -37,27 +29,19 @@
</p>
</div>
<div
class="p-6 rounded-lg shadow-md transition-colors duration-300"
:class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']"
>
<div class="p-6 rounded-lg shadow-md transition-colors duration-300"
:class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']">
<div class="flex items-center justify-between">
<div>
<p class="text-sm" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">
存储空间
</p>
<h3
class="text-2xl font-bold mt-1"
:class="[isDarkMode ? 'text-white' : 'text-gray-800']"
>
<h3 class="text-2xl font-bold mt-1" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
{{ dashboardData.storageUsed }}
</h3>
</div>
<div class="p-3 rounded-full" :class="[isDarkMode ? 'bg-purple-900' : 'bg-purple-100']">
<HardDriveIcon
class="w-6 h-6"
:class="[isDarkMode ? 'text-purple-400' : 'text-purple-600']"
/>
<HardDriveIcon class="w-6 h-6" :class="[isDarkMode ? 'text-purple-400' : 'text-purple-600']" />
</div>
</div>
@@ -69,27 +53,19 @@
</p>
</div>
<div
class="p-6 rounded-lg shadow-md transition-colors duration-300"
:class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']"
>
<div class="p-6 rounded-lg shadow-md transition-colors duration-300"
:class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']">
<div class="flex items-center justify-between">
<div>
<p class="text-sm" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">
活跃用户
</p>
<h3
class="text-2xl font-bold mt-1"
:class="[isDarkMode ? 'text-white' : 'text-gray-800']"
>
<h3 class="text-2xl font-bold mt-1" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
25
</h3>
</div>
<div class="p-3 rounded-full" :class="[isDarkMode ? 'bg-green-900' : 'bg-green-100']">
<UsersIcon
class="w-6 h-6"
:class="[isDarkMode ? 'text-green-400' : 'text-green-600']"
/>
<UsersIcon class="w-6 h-6" :class="[isDarkMode ? 'text-green-400' : 'text-green-600']" />
</div>
</div>
<p class="text-sm mt-2" :class="[isDarkMode ? 'text-red-400' : 'text-red-600']">
@@ -98,27 +74,19 @@
</p>
</div>
<div
class="p-6 rounded-lg shadow-md transition-colors duration-300"
:class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']"
>
<div class="p-6 rounded-lg shadow-md transition-colors duration-300"
:class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']">
<div class="flex items-center justify-between">
<div>
<p class="text-sm" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">
系统状态
</p>
<h3
class="text-2xl font-bold mt-1"
:class="[isDarkMode ? 'text-white' : 'text-gray-800']"
>
<h3 class="text-2xl font-bold mt-1" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
正常
</h3>
</div>
<div class="p-3 rounded-full" :class="[isDarkMode ? 'bg-blue-900' : 'bg-blue-100']">
<ActivityIcon
class="w-6 h-6"
:class="[isDarkMode ? 'text-blue-400' : 'text-blue-600']"
/>
<ActivityIcon class="w-6 h-6" :class="[isDarkMode ? 'text-blue-400' : 'text-blue-600']" />
</div>
</div>
<p class="text-sm mt-2" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']">
@@ -128,10 +96,8 @@
</div>
<!-- 最近活动 -->
<div
class="rounded-lg shadow-md overflow-hidden transition-colors duration-300"
:class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']"
>
<div class="rounded-lg shadow-md overflow-hidden transition-colors duration-300"
:class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']">
<div class="px-6 py-4 border-b" :class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']">
<h3 class="text-lg font-medium" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
最近活动
@@ -139,17 +105,10 @@
</div>
<div class="p-6">
<div class="space-y-4">
<div
v-for="(activity, index) in recentActivities"
:key="index"
class="flex items-center space-x-4"
>
<div v-for="(activity, index) in recentActivities" :key="index" class="flex items-center space-x-4">
<div class="flex-shrink-0">
<component
:is="activity.icon"
class="w-5 h-5"
:class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']"
/>
<component :is="activity.icon" class="w-5 h-5"
:class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']" />
</div>
<div class="flex-1">
<p :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
src/views/manage/FileManageView.vue
+28 -70
View File
@@ -9,30 +9,22 @@
<!-- 搜索和过滤 -->
<div class="flex flex-1 gap-4">
<div class="relative flex-1">
<input
type="text"
v-model="params.keyword"
:class="[
<input type="text" v-model="params.keyword" :class="[
isDarkMode
? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400'
: 'bg-white border-gray-300 text-gray-900 placeholder-gray-400'
]"
class="w-full pl-10 pr-4 py-2 rounded-lg border focus:ring-2 focus:ring-indigo-500 focus:border-transparent"
placeholder="搜索文件..."
/>
<SearchIcon
class="absolute left-3 top-2.5 w-5 h-5"
:class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']"
/>
placeholder="搜索文件..." />
<SearchIcon class="absolute left-3 top-2.5 w-5 h-5"
:class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']" />
</div>
</div>
<!-- 搜索按钮 -->
<div class="flex gap-4">
<button
@click="handleSearch"
class="flex items-center px-4 py-2 rounded-lg bg-indigo-600 text-white hover:bg-indigo-700 transition-colors duration-200"
>
<button @click="handleSearch"
class="flex items-center px-4 py-2 rounded-lg bg-indigo-600 text-white hover:bg-indigo-700 transition-colors duration-200">
<SearchIcon class="w-5 h-5 mr-2" />
搜索
</button>
@@ -40,39 +32,29 @@
</div>
<!-- File List -->
<div
class="rounded-lg shadow-md overflow-hidden transition-colors duration-300"
:class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']"
>
<div class="rounded-lg shadow-md overflow-hidden transition-colors duration-300"
:class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']">
<div class="px-6 py-4 border-b" :class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']">
<h3 class="text-lg font-medium" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
所有文件
</h3>
</div>
<div class="overflow-x-auto">
<table
class="min-w-full divide-y"
:class="[isDarkMode ? 'divide-gray-700' : 'divide-gray-200']"
>
<table class="min-w-full divide-y" :class="[isDarkMode ? 'divide-gray-700' : 'divide-gray-200']">
<thead :class="[isDarkMode ? 'bg-gray-900' : 'bg-gray-100']">
<tr>
<th
v-for="header in fileTableHeaders"
:key="header"
<th v-for="header in fileTableHeaders" :key="header"
class="px-6 py-3 text-left text-xs font-medium uppercase tracking-wider"
:class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']"
>
:class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']">
{{ header }}
</th>
</tr>
</thead>
<tbody
:class="[
<tbody :class="[
isDarkMode
? 'bg-gray-800 divide-y divide-gray-700'
: 'bg-white divide-y divide-gray-200'
]"
>
]">
<tr v-for="file in tableData" :key="file.id">
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
@@ -83,10 +65,7 @@
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<FileIcon
class="w-5 h-5 mr-2"
:class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-500']"
/>
<FileIcon class="w-5 h-5 mr-2" :class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-500']" />
<span class="font-medium" :class="[isDarkMode ? 'text-white' : 'text-gray-900']">
{{ file.prefix }}
</span>
@@ -120,15 +99,11 @@
>
下载
</button> -->
<button
@click="deleteFile(file.id)"
class="transition-colors duration-200"
:class="[
<button @click="deleteFile(file.id)" class="transition-colors duration-200" :class="[
isDarkMode
? 'text-red-400 hover:text-red-300'
: 'text-red-600 hover:text-red-900'
]"
>
]">
删除
</button>
</td>
@@ -139,15 +114,10 @@
</div>
<!-- 在文件列表表格下方添加分页组件 -->
<div
class="mt-4 flex items-center justify-between px-6 py-3 border-t"
:class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']"
>
<div class="mt-4 flex items-center justify-between px-6 py-3 border-t"
:class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']">
<!-- 分页信息 -->
<div
class="flex items-center text-sm"
:class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']"
>
<div class="flex items-center text-sm" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']">
显示第 {{ (params.page - 1) * params.size + 1 }} 到
{{ Math.min(params.page * params.size, params.total) }} 条，共 {{ params.total }} 条
</div>
@@ -155,11 +125,8 @@
<!-- 分页控制器 -->
<div class="flex items-center space-x-2">
<!-- 上一页 -->
<button
@click="handlePageChange(params.page - 1)"
:disabled="params.page === 1"
class="px-3 py-1 rounded-md transition-colors duration-200"
:class="[
<button @click="handlePageChange(params.page - 1)" :disabled="params.page === 1"
class="px-3 py-1 rounded-md transition-colors duration-200" :class="[
isDarkMode
? params.page === 1
? 'bg-gray-700 text-gray-500 cursor-not-allowed'
@@ -167,26 +134,21 @@
: params.page === 1
? 'bg-gray-100 text-gray-400 cursor-not-allowed'
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
]"
>
]">
上一页
</button>
<!-- 页码 -->
<div class="flex items-center space-x-1">
<template v-for="pageNum in displayedPages" :key="pageNum">
<button
v-if="pageNum !== '...'"
@click="handlePageChange(pageNum)"
class="px-3 py-1 rounded-md transition-colors duration-200"
:class="[
<button v-if="pageNum !== '...'" @click="handlePageChange(pageNum)"
class="px-3 py-1 rounded-md transition-colors duration-200" :class="[
params.page === pageNum
? 'bg-indigo-600 text-white'
: isDarkMode
? 'bg-gray-700 text-gray-300 hover:bg-gray-600'
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
]"
>
]">
{{ pageNum }}
</button>
<span v-else class="px-2" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']">
@@ -196,11 +158,8 @@
</div>
<!-- 下一页 -->
<button
@click="handlePageChange(params.page + 1)"
:disabled="params.page >= totalPages"
class="px-3 py-1 rounded-md transition-colors duration-200"
:class="[
<button @click="handlePageChange(params.page + 1)" :disabled="params.page >= totalPages"
class="px-3 py-1 rounded-md transition-colors duration-200" :class="[
isDarkMode
? params.page >= totalPages
? 'bg-gray-700 text-gray-500 cursor-not-allowed'
@@ -208,8 +167,7 @@
: params.page >= totalPages
? 'bg-gray-100 text-gray-400 cursor-not-allowed'
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
]"
>
]">
下一页
</button>
</div>
src/views/LoginView.vue → src/views/manage/LoginView.vue
+20 -37
View File
@@ -1,41 +1,33 @@
<template>
<div
:class="[
<div :class="[
'min-h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 transition-colors duration-200 relative overflow-hidden',
isDarkMode ? 'bg-gray-900' : 'bg-gray-50'
]"
>
]">
<div class="absolute inset-0 z-0">
<div class="cyber-grid"></div>
<div class="floating-particles"></div>
</div>
<div
class="max-w-md w-full space-y-8 backdrop-blur-lg bg-opacity-20 p-8 rounded-xl border border-opacity-20"
:class="[isDarkMode ? 'bg-gray-800 border-gray-600' : 'bg-white/70 border-gray-200']"
>
<div class="max-w-md w-full space-y-8 backdrop-blur-lg bg-opacity-20 p-8 rounded-xl border border-opacity-20"
:class="[isDarkMode ? 'bg-gray-800 border-gray-600' : 'bg-white/70 border-gray-200']">
<div>
<div class="mx-auto h-16 w-16 relative">
<div
class="absolute inset-0 bg-gradient-to-r from-cyan-500 via-purple-500 to-pink-500 rounded-full animate-spin-slow"
></div>
class="absolute inset-0 bg-gradient-to-r from-cyan-500 via-purple-500 to-pink-500 rounded-full animate-spin-slow">
</div>
<div
class="absolute -inset-2 bg-gradient-to-r from-cyan-500 via-purple-500 to-pink-500 rounded-full opacity-50 blur-md animate-pulse"
></div>
<div
:class="[
class="absolute -inset-2 bg-gradient-to-r from-cyan-500 via-purple-500 to-pink-500 rounded-full opacity-50 blur-md animate-pulse">
</div>
<div :class="[
'absolute inset-1 rounded-full flex items-center justify-center',
isDarkMode ? 'bg-gray-800' : 'bg-white'
]"
>
]">
<BoxIcon :class="['h-8 w-8', isDarkMode ? 'text-cyan-400' : 'text-cyan-600']" />
</div>
</div>
<h2
:class="[
<h2 :class="[
'mt-6 text-center text-3xl font-extrabold',
isDarkMode ? 'text-white' : 'text-gray-900'
]"
>
]">
登录
</h2>
</div>
@@ -44,35 +36,23 @@
<div class="rounded-md shadow-sm -space-y-px">
<div>
<label for="password" class="sr-only">密码</label>
<input
id="password"
name="password"
type="password"
autocomplete="current-password"
required
v-model="password"
:class="[
<input id="password" name="password" type="password" autocomplete="current-password" required
v-model="password" :class="[
'appearance-none rounded-t-md relative block w-full px-4 py-3 border transition-all duration-200 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-cyan-500 focus:border-cyan-500 focus:z-10 sm:text-sm backdrop-blur-sm',
isDarkMode
? 'bg-gray-800/50 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
: 'bg-white/50 border-gray-300 text-gray-900 hover:border-gray-400'
]"
placeholder="密码"
/>
]" placeholder="密码" />
</div>
</div>
<div>
<button
type="submit"
:class="[
<button type="submit" :class="[
'group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-medium rounded-md text-white transition-all duration-300 transform hover:scale-[1.02] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-cyan-500 shadow-lg hover:shadow-cyan-500/50',
isDarkMode
? 'bg-gradient-to-r from-cyan-500 to-purple-500 hover:from-cyan-600 hover:to-purple-600'
: 'bg-gradient-to-r from-cyan-600 to-purple-600 hover:from-cyan-700 hover:to-purple-700',
isLoading ? 'opacity-75 cursor-not-allowed' : ''
]"
:disabled="isLoading"
>
]" :disabled="isLoading">
<span class="absolute left-0 inset-y-0 flex items-center pl-3"> </span>
{{ isLoading ? '登录中...' : '登录' }}
</button>
@@ -136,6 +116,7 @@ const handleSubmit = async () => {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
@@ -200,9 +181,11 @@ button:active:not(:disabled) {
0% {
transform: translate(0, 0) scale(1);
}
50% {
transform: translate(50px, 50px) scale(1.5);
}
100% {
transform: translate(0, 0) scale(1);
}
src/views/manage/SystemSettingsView.vue
+111 -327
View File
@@ -183,10 +183,7 @@ refreshData()
系统设置
</h2>
<div
class="space-y-6 rounded-lg shadow-md p-6"
:class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']"
>
<div class="space-y-6 rounded-lg shadow-md p-6" :class="[isDarkMode ? 'bg-gray-800 bg-opacity-70' : 'bg-white']">
<!-- 基本设置 -->
<section class="space-y-4">
<h3 class="text-lg font-medium mb-4" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
@@ -196,224 +193,157 @@ refreshData()
<!-- 网基本信息 -->
<div class="grid grid-cols-1 gap-6">
<div class="space-y-2">
<label
class="block text-sm font-medium"
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
>
<label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
网站名称
</label>
<input
type="text"
v-model="config.name"
<input type="text" v-model="config.name"
class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
:class="[
isDarkMode
? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
: 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
]"
/>
]" />
</div>
<div class="space-y-2">
<label
class="block text-sm font-medium"
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
>
<label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
网站描述
</label>
<input
type="text"
v-model="config.description"
<input type="text" v-model="config.description"
class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
:class="[
isDarkMode
? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
: 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
]"
/>
]" />
</div>
<div class="space-y-2">
<label
class="block text-sm font-medium"
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
>
<label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
管理员密码
</label>
<div class="relative">
<input
type="password"
v-model="config.admin_token"
placeholder="留空则不修改密码"
<input type="password" v-model="config.admin_token" placeholder="留空则不修改密码"
class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
:class="[
isDarkMode
? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
: 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
]"
/>
<div
class="absolute inset-y-0 right-0 flex items-center pr-3 text-sm text-gray-400"
:class="[isDarkMode ? 'text-gray-500' : 'text-gray-400']"
>
]" />
<div class="absolute inset-y-0 right-0 flex items-center pr-3 text-sm text-gray-400"
:class="[isDarkMode ? 'text-gray-500' : 'text-gray-400']">
<span class="text-xs">留空则不修改</span>
</div>
</div>
</div>
<div class="space-y-2">
<label
class="block text-sm font-medium"
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
>
<label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
关键词
</label>
<input
type="text"
v-model="config.keywords"
<input type="text" v-model="config.keywords"
class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
:class="[
isDarkMode
? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
: 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
]"
/>
]" />
</div>
<!-- 主题选择 -->
<div class="space-y-2">
<label
class="block text-sm font-medium"
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
>
<label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
主题选择
</label>
<select
v-model="config.themesSelect"
<select v-model="config.themesSelect"
class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border appearance-none bg-no-repeat bg-right focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none cursor-pointer"
:class="[
isDarkMode
? 'bg-gray-700 border-gray-600 text-white hover:border-gray-500'
: 'border-gray-300 hover:border-gray-400'
]"
style="
]" style="
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M7%208l3%203%203-3%22%20stroke%3D%22%236B7280%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
"
>
">
<option v-for="item in config.themesChoices" :value="item.key" :key="item.key">
{{ item.name }} (by {{ item.author }} V{{ item.version }})
</option>
</select>
</div>
<div class="space-y-2">
<label
class="block text-sm font-medium"
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
>
<label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
Robots.txt
</label>
<textarea
v-model="config.robotsText"
rows="3"
<textarea v-model="config.robotsText" rows="3"
class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border resize-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
:class="[
isDarkMode
? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
: 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
]"
></textarea>
]"></textarea>
</div>
</div>
<!-- 通知设置 -->
<div class="grid grid-cols-1 gap-6 mt-8">
<div class="space-y-2">
<label
class="block text-sm font-medium"
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
>
<label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
通知标题
</label>
<input
type="text"
v-model="config.notify_title"
<input type="text" v-model="config.notify_title"
class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
:class="[
isDarkMode
? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
: 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
]"
/>
]" />
</div>
<div class="space-y-2">
<label
class="block text-sm font-medium"
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
>
<label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
通知内容
</label>
<textarea
v-model="config.notify_content"
rows="3"
<textarea v-model="config.notify_content" rows="3"
class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border resize-none focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
:class="[
isDarkMode
? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
: 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
]"
></textarea>
]"></textarea>
</div>
</div>
<!-- 存储设置 -->
<div class="space-y-4">
<h3
class="text-lg font-medium mb-4"
:class="[isDarkMode ? 'text-white' : 'text-gray-800']"
>
<h3 class="text-lg font-medium mb-4" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
存储设置
</h3>
<!-- 通知设置 -->
<div class="space-y-2">
<label
class="block text-sm font-medium"
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
>
<label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
存储路径
</label>
<input
type="text"
placeholder="留空则使用默认路径，可不填写"
v-model="config.storage_path"
<input type="text" placeholder="留空则使用默认路径，可不填写" v-model="config.storage_path"
class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
:class="[
isDarkMode
? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
: 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
]"
/>
]" />
</div>
<div class="space-y-4">
<div class="space-y-2">
<label
class="block text-sm font-medium"
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
>
<label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
存储方式
</label>
<select
v-model="config.file_storage"
<select v-model="config.file_storage"
class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border appearance-none bg-no-repeat bg-right focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none cursor-pointer"
:class="[
isDarkMode
? 'bg-gray-700 border-gray-600 text-white hover:border-gray-500'
: 'border-gray-300 hover:border-gray-400'
]"
style="
]" style="
background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%3E%3Cpath%20d%3D%22M7%208l3%203%203-3%22%20stroke%3D%22%236B7280%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');
"
>
">
<option value="local">本地存储</option>
<option value="s3">S3 存储</option>
<option value="webdav">Webdav 存储</option>
@@ -423,63 +353,42 @@ refreshData()
<div v-if="config.file_storage === 'webdav'" class="space-y-4">
<!-- 通知设置 -->
<div class="space-y-2">
<label
class="block text-sm font-medium"
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
>
<label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
Webdav URL
</label>
<input
type="text"
placeholder="请输入 Webdav URL"
v-model="config.webdav_url"
<input type="text" placeholder="请输入 Webdav URL" v-model="config.webdav_url"
class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
:class="[
isDarkMode
? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
: 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
]"
/>
]" />
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="space-y-2">
<label
class="block text-sm font-medium"
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
>
<label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
Webdav Username
</label>
<input
type="text"
placeholder="请输入 Webdav Username"
v-model="config.webdav_username"
<input type="text" placeholder="请输入 Webdav Username" v-model="config.webdav_username"
class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
:class="[
isDarkMode
? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
: 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
]"
/>
]" />
</div>
<div class="space-y-2">
<label
class="block text-sm font-medium"
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
>
<label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
Webdav Password
</label>
<input
type="password"
placeholder="请输入 Webdav Password"
v-model="config.webdav_password"
<input type="password" placeholder="请输入 Webdav Password" v-model="config.webdav_password"
class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
:class="[
isDarkMode
? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
: 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
]"
/>
]" />
</div>
</div>
</div>
@@ -487,169 +396,117 @@ refreshData()
<div v-if="config.file_storage === 's3'" class="space-y-4">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="space-y-2">
<label
class="block text-sm font-medium"
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
>
<label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
S3 AccessKeyId
</label>
<input
type="text"
v-model="config.s3_access_key_id"
<input type="text" v-model="config.s3_access_key_id"
class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
:class="[
isDarkMode
? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
: 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
]"
/>
]" />
</div>
<div class="space-y-2">
<label
class="block text-sm font-medium"
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
>
<label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
S3 SecretAccessKey
</label>
<input
type="password"
v-model="config.s3_secret_access_key"
<input type="password" v-model="config.s3_secret_access_key"
class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
:class="[
isDarkMode
? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
: 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
]"
/>
]" />
</div>
<div class="space-y-2">
<label
class="block text-sm font-medium"
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
>
<label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
S3 BucketName
</label>
<input
type="text"
v-model="config.s3_bucket_name"
<input type="text" v-model="config.s3_bucket_name"
class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
:class="[
isDarkMode
? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
: 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
]"
/>
]" />
</div>
<div class="space-y-2">
<label
class="block text-sm font-medium"
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
>
<label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
S3 EndpointUrl
</label>
<input
type="text"
v-model="config.s3_endpoint_url"
<input type="text" v-model="config.s3_endpoint_url"
class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
:class="[
isDarkMode
? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
: 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
]"
/>
]" />
</div>
<div class="space-y-2">
<label
class="block text-sm font-medium"
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
>
<label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
S3 Region Name
</label>
<input
type="text"
v-model="config.s3_region_name"
placeholder="auto"
<input type="text" v-model="config.s3_region_name" placeholder="auto"
class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
:class="[
isDarkMode
? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
: 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
]"
/>
]" />
</div>
<div class="space-y-2">
<label
class="block text-sm font-medium"
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
>
<label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
S3 Signature Version
</label>
<select
v-model="config.s3_signature_version"
<select v-model="config.s3_signature_version"
class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
:class="[
isDarkMode
? 'bg-gray-700 border-gray-600 text-white hover:border-gray-500'
: 'border-gray-300 hover:border-gray-400'
]"
>
]">
<option value="s3v2">S3v2</option>
<option value="s3v4">S3v4</option>
</select>
</div>
<div class="space-y-2">
<label
class="block text-sm font-medium"
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
>
<label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
S3 Hostname
</label>
<input
type="text"
v-model="config.s3_hostname"
<input type="text" v-model="config.s3_hostname"
class="w-full rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
:class="[
isDarkMode
? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
: 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
]"
/>
]" />
</div>
<div class="space-y-2">
<label
class="block text-sm font-medium mb-2"
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
>
<label class="block text-sm font-medium mb-2"
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
启用代理
</label>
<div class="flex items-center">
<button
type="button"
@click="config.s3_proxy = config.s3_proxy === 1 ? 0 : 1"
<button type="button" @click="config.s3_proxy = config.s3_proxy === 1 ? 0 : 1"
class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
:class="[config.s3_proxy === 1 ? 'bg-indigo-600' : 'bg-gray-200']"
role="switch"
:aria-checked="config.s3_proxy === 1"
>
:class="[config.s3_proxy === 1 ? 'bg-indigo-600' : 'bg-gray-200']" role="switch"
:aria-checked="config.s3_proxy === 1">
<span
class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
:class="[
config.s3_proxy === 1 ? 'translate-x-5' : 'translate-x-0',
isDarkMode && config.s3_proxy !== 1 ? 'bg-gray-100' : 'bg-white'
]"
/>
]" />
</button>
<span
class="ml-3 text-sm"
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
>
<span class="ml-3 text-sm" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
{{ config.s3_proxy === 1 ? '已开启' : '已关闭' }}
</span>
</div>
@@ -661,85 +518,62 @@ refreshData()
<!-- 上传限制 -->
<div class="mt-8">
<h3
class="text-lg font-medium mb-4"
:class="[isDarkMode ? 'text-white' : 'text-gray-800']"
>
<h3 class="text-lg font-medium mb-4" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
上传限制
</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="space-y-2">
<label
class="block text-sm font-medium"
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
>
<label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
每分钟上传限制
</label>
<div class="flex items-center space-x-2">
<input
type="number"
v-model="config.uploadMinute"
<input type="number" v-model="config.uploadMinute"
class="w-24 rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
:class="[
isDarkMode
? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
: 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
]"
/>
]" />
<span :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">分钟</span>
</div>
</div>
<div class="space-y-2">
<label
class="block text-sm font-medium"
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
>
<label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
上传数量限制
</label>
<div class="flex items-center space-x-2">
<input
type="number"
v-model="config.uploadCount"
<input type="number" v-model="config.uploadCount"
class="w-24 rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
:class="[
isDarkMode
? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
: 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
]"
/>
]" />
<span :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">个文件</span>
</div>
</div>
<div class="space-y-2">
<label
class="block text-sm font-medium"
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
>
<label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
文件大小限制
</label>
<div class="flex items-center space-x-2">
<input
type="number"
v-model="fileSize"
<input type="number" v-model="fileSize"
class="w-24 rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
:class="[
isDarkMode
? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
: 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
]"
/>
<select
v-model="sizeUnit"
]" />
<select v-model="sizeUnit"
class="rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
:class="[
isDarkMode
? 'bg-gray-700 border-gray-600 text-white hover:border-gray-500'
: 'border-gray-300 hover:border-gray-400'
]"
>
]">
<option value="KB">KB</option>
<option value="MB">MB</option>
<option value="GB">GB</option>
@@ -748,27 +582,14 @@ refreshData()
</div>
<div class="space-y-2">
<label
class="block text-sm font-medium mb-2"
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
>
<label class="block text-sm font-medium mb-2" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
过期方式
</label>
<div class="flex flex-wrap gap-3">
<label
v-for="style in ['day', 'hour', 'minute', 'forever', 'count']"
:key="style"
class="relative inline-flex items-center group cursor-pointer"
>
<input
type="checkbox"
:value="style"
v-model="config.expireStyle"
class="peer sr-only"
/>
<div
class="px-4 py-2 rounded-full border-2 transition-all duration-200 select-none"
:class="[
<label v-for="style in ['day', 'hour', 'minute', 'forever', 'count']" :key="style"
class="relative inline-flex items-center group cursor-pointer">
<input type="checkbox" :value="style" v-model="config.expireStyle" class="peer sr-only" />
<div class="px-4 py-2 rounded-full border-2 transition-all duration-200 select-none" :class="[
config.expireStyle.includes(style)
? isDarkMode
? 'bg-indigo-600 border-indigo-600 text-white'
@@ -776,8 +597,7 @@ refreshData()
: isDarkMode
? 'bg-gray-700 border-gray-600 text-gray-300 hover:border-indigo-500'
: 'bg-white border-gray-300 text-gray-700 hover:border-indigo-500'
]"
>
]">
{{
{
day: '按天',
@@ -793,32 +613,24 @@ refreshData()
</div>
<div class="space-y-2">
<label
class="block text-sm font-medium"
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
>
<label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
最长保存时间
</label>
<div class="flex items-center space-x-2">
<input
type="number"
v-model="saveTime"
<input type="number" v-model="saveTime"
class="w-24 rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
:class="[
isDarkMode
? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
: 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
]"
/>
<select
v-model="saveTimeUnit"
]" />
<select v-model="saveTimeUnit"
class="rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
:class="[
isDarkMode
? 'bg-gray-700 border-gray-600 text-white hover:border-gray-500'
: 'border-gray-300 hover:border-gray-400'
]"
>
]">
<option value="秒">秒</option>
<option value="分">分</option>
<option value="时">时</option>
@@ -828,33 +640,22 @@ refreshData()
</div>
<div class="space-y-2">
<label
class="block text-sm font-medium mb-2"
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
>
<label class="block text-sm font-medium mb-2" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
游客上传
</label>
<div class="flex items-center">
<button
type="button"
@click="config.openUpload = config.openUpload === 1 ? 0 : 1"
<button type="button" @click="config.openUpload = config.openUpload === 1 ? 0 : 1"
class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
:class="[config.openUpload === 1 ? 'bg-indigo-600' : 'bg-gray-200']"
role="switch"
:aria-checked="config.openUpload === 1"
>
:class="[config.openUpload === 1 ? 'bg-indigo-600' : 'bg-gray-200']" role="switch"
:aria-checked="config.openUpload === 1">
<span
class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"
:class="[
config.openUpload === 1 ? 'translate-x-5' : 'translate-x-0',
isDarkMode && config.openUpload !== 1 ? 'bg-gray-100' : 'bg-white'
]"
/>
]" />
</button>
<span
class="ml-3 text-sm"
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
>
<span class="ml-3 text-sm" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
{{ config.openUpload === 1 ? '已开启' : '已关闭' }}
</span>
</div>
@@ -864,54 +665,39 @@ refreshData()
<!-- 错误限制 -->
<div class="mt-8">
<h3
class="text-lg font-medium mb-4"
:class="[isDarkMode ? 'text-white' : 'text-gray-800']"
>
<h3 class="text-lg font-medium mb-4" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
错误限制
</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="space-y-2">
<label
class="block text-sm font-medium"
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
>
<label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
每分钟错误限制
</label>
<div class="flex items-center space-x-2">
<input
type="number"
v-model="config.errorMinute"
<input type="number" v-model="config.errorMinute"
class="w-24 rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
:class="[
isDarkMode
? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
: 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
]"
/>
]" />
<span :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">分钟</span>
</div>
</div>
<div class="space-y-2">
<label
class="block text-sm font-medium"
:class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']"
>
<label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
错误次数限制
</label>
<div class="flex items-center space-x-2">
<input
type="number"
v-model="config.errorCount"
<input type="number" v-model="config.errorCount"
class="w-24 rounded-md shadow-sm px-4 py-2.5 transition-all duration-200 ease-in-out border focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 outline-none"
:class="[
isDarkMode
? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400 hover:border-gray-500'
: 'border-gray-300 hover:border-gray-400 placeholder-gray-500'
]"
/>
]" />
<span :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">次</span>
</div>
</div>
@@ -920,10 +706,8 @@ refreshData()
<!-- 保存按钮 -->
<div class="flex justify-end mt-8">
<button
@click="submitSave"
class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors duration-200"
>
<button @click="submitSave"
class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors duration-200">
保存设置
</button>
</div>