orion/FileCodeBoxFronted2026
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/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
+38 -80
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="[
isDarkMode
? 'bg-gray-700 border-gray-600 text-white placeholder-gray-400'
: 'bg-white border-gray-300 text-gray-900 placeholder-gray-400'
]"
<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="[
isDarkMode
? 'bg-gray-800 divide-y divide-gray-700'
: 'bg-white divide-y divide-gray-200'
]"
>
<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="[
isDarkMode
? 'text-red-400 hover:text-red-300'
: 'text-red-600 hover:text-red-900'
]"
>
<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/manage/LoginView.vue
+202
View File
@@ -0,0 +1,202 @@
<template>
<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>
<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>
<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="[
'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="[
'mt-6 text-center text-3xl font-extrabold',
isDarkMode ? 'text-white' : 'text-gray-900'
]">
登录
</h2>
</div>
<form class="mt-8 space-y-6" @submit.prevent="handleSubmit">
<input type="hidden" name="remember" value="true" />
<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="[
'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="密码" />
</div>
</div>
<div>
<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">
<span class="absolute left-0 inset-y-0 flex items-center pl-3"> </span>
{{ isLoading ? '登录中...' : '登录' }}
</button>
</div>
</form>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, inject } from 'vue'
import { BoxIcon } from 'lucide-vue-next'
import api from '@/utils/api'
import { useAlertStore } from '@/stores/alertStore'
import { useAdminData } from '@/stores/adminStore'
import { useRouter } from 'vue-router'
const alertStore = useAlertStore()
const password = ref('')
const isLoading = ref(false)
const isDarkMode = inject('isDarkMode')
const adminStore = useAdminData()
const validateForm = () => {
let isValid = true
if (!password.value) {
alertStore.showAlert('无效的密码', 'error')
isValid = false
} else if (password.value.length < 6) {
alertStore.showAlert('密码长度至少为6位', 'error')
isValid = false
}
return isValid
}
const router = useRouter()
const handleSubmit = async () => {
if (!validateForm()) return
api
.post('/admin/login', { password: password.value })
.then((res: any) => {
adminStore.updateAdminPwd(res.detail.token)
router.push('/admin')
})
.catch((error: any) => {
alertStore.showAlert(error.response.data.detail, 'error')
})
isLoading.value = true
try {
await new Promise((resolve) => setTimeout(resolve, 2000))
// 处理登录成功
} catch (error) {
// 处理错误
} finally {
isLoading.value = false
}
}
</script>
<style scoped>
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.animate-spin-slow {
animation: spin 8s linear infinite;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s ease;
}
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}
input:focus {
box-shadow: 0 0 15px rgba(99, 102, 241, 0.3);
}
button:active:not(:disabled) {
transform: scale(0.98);
}
.cyber-grid {
background-image: linear-gradient(transparent 95%, rgba(99, 102, 241, 0.1) 50%),
linear-gradient(90deg, transparent 95%, rgba(99, 102, 241, 0.1) 50%);
background-size: 30px 30px;
width: 100%;
height: 100%;
position: absolute;
opacity: 0.5;
}
.floating-particles {
position: absolute;
width: 100%;
height: 100%;
background: radial-gradient(circle at center, transparent 0%, transparent 100%);
filter: url(#gooey);
}
.floating-particles::before,
.floating-particles::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-image: radial-gradient(circle at center, rgba(99, 102, 241, 0.1) 0%, transparent 50%);
animation: float 20s infinite linear;
}
.floating-particles::after {
animation-delay: -10s;
opacity: 0.5;
}
@keyframes float {
0% {
transform: translate(0, 0) scale(1);
}
50% {
transform: translate(50px, 50px) scale(1.5);
}
100% {
transform: translate(0, 0) scale(1);
}
}
button:hover:not(:disabled) {
box-shadow: 0 0 25px rgba(99, 102, 241, 0.5);
}
.fade-enter-active,
.fade-leave-active {
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
</style>
src/views/manage/SystemSettingsView.vue
+118 -334
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,36 +582,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 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="[
config.expireStyle.includes(style)
? isDarkMode
? 'bg-indigo-600 border-indigo-600 text-white'
: 'bg-indigo-600 border-indigo-600 text-white'
: 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'
]"
>
<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'
: 'bg-indigo-600 border-indigo-600 text-white'
: 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>