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

Test/custom admin ui #3

Merged
orion merged 6 commits from test/custom-admin-ui into main 2026-07-21 15:14:23 +08:00
Conversation 0 Commits 6 Files Changed 29
+647 -313
29 changed files with 647 additions and 313 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+1 -1
View File
@@ -5,7 +5,7 @@
<link rel="icon" href="/assets/logo_small.png" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"
content="width=device-width, initial-scale=1.0"
/>
<meta name="description" content="{{description}}" />
<meta name="keywords" content="{{keywords}}" />
src/App.vue
+2 -2
View File
@@ -21,7 +21,7 @@ const {
<LanguageSwitcher />
<ThemeToggle v-model="isDarkMode" />
</div>
<div v-if="isLoading" class="loading-overlay">
<div v-if="isLoading" class="loading-overlay" role="status" aria-live="polite" aria-label="Loading">
<div class="loading-spinner"></div>
</div>
<RouterView v-slot="{ Component }">
@@ -36,7 +36,7 @@ const {
<style>
.app-container {
min-height: 100vh;
min-height: 100dvh;
width: 100%;
transition: background-color 0.5s ease;
}
src/assets/style/main.css
+16
View File
@@ -17,6 +17,11 @@ html {
-webkit-font-smoothing: antialiased;
}
:focus-visible {
outline: 3px solid rgba(95, 135, 150, 0.78);
outline-offset: 3px;
}
button,
input,
select,
@@ -32,6 +37,17 @@ textarea {
color-scheme: dark;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
scroll-behavior: auto !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
.native-date-input::-webkit-calendar-picker-indicator {
cursor: pointer;
min-height: 2.75rem;
src/components/common/AlertComponent.vue
+4 -1
View File
@@ -7,6 +7,8 @@
<div
v-for="alert in alerts"
:key="alert.id"
:role="alert.type === 'error' ? 'alert' : 'status'"
:aria-live="alert.type === 'error' ? 'assertive' : 'polite'"
:class="[
'w-full rounded-[30px] shadow-xl overflow-hidden',
'bg-gradient-to-r',
@@ -23,8 +25,9 @@
</div>
<div class="ml-4 flex-shrink-0 flex">
<button
type="button"
@click="removeAlert(alert.id)"
class="inline-flex text-white hover:text-gray-200 focus:outline-none transition-colors duration-200"
class="inline-flex h-11 w-11 items-center justify-center rounded-lg text-white transition-colors duration-200 hover:bg-white/10 hover:text-gray-100 focus:outline-none focus:ring-2 focus:ring-white"
>
<span class="sr-only">{{ t('common.close') }}</span>
<X class="h-5 w-5" />
src/components/common/BaseModal.vue
+85 -44
View File
@@ -6,24 +6,20 @@
class="fixed inset-0 z-50 overflow-y-auto"
@click="handleBackdropClick"
>
<!-- 背景遮罩 -->
<div
class="fixed inset-0 bg-black bg-opacity-50 transition-opacity"
@click.stop="handleBackdropClick"
></div>
<!-- 模态框容器 -->
<div class="fixed inset-0 bg-black/50 transition-opacity" aria-hidden="true"></div>
<div class="flex min-h-full items-center justify-center p-4">
<div
ref="modalRef"
class="relative flex max-h-[calc(100vh-2rem)] transform flex-col overflow-hidden rounded-[30px] shadow-xl transition-all"
:class="[
sizeClasses,
isDarkMode ? 'bg-gray-800' : 'bg-white'
]"
role="dialog"
aria-modal="true"
:aria-label="title || t('common.dialog')"
tabindex="-1"
class="relative flex max-h-[calc(100dvh-2rem)] transform flex-col overflow-hidden rounded-[24px] shadow-xl transition-all sm:rounded-[30px]"
:class="[sizeClasses, isDarkMode ? 'bg-gray-800' : 'bg-white']"
@click.stop
@keydown="handleKeydown"
>
<!-- 头部 -->
<div
v-if="$slots.header || title"
class="flex shrink-0 items-center justify-between border-b px-4 py-3 sm:px-6 sm:py-4"
@@ -36,27 +32,28 @@
</slot>
<button
v-if="closable"
@click="$emit('close')"
type="button"
class="flex h-11 w-11 shrink-0 items-center justify-center rounded-lg transition-colors"
:class="[
isDarkMode
? 'text-gray-400 hover:text-gray-300 hover:bg-gray-700'
: 'text-gray-400 hover:text-gray-500 hover:bg-gray-100'
? 'text-gray-300 hover:bg-gray-700 hover:text-white'
: 'text-gray-600 hover:bg-gray-100 hover:text-gray-800'
]"
:aria-label="t('common.close')"
:title="t('common.close')"
@click="emit('close')"
>
<X class="h-5 w-5" />
<X class="h-5 w-5" aria-hidden="true" />
</button>
</div>
<!-- 内容 -->
<div class="min-h-0 flex-1 overflow-y-auto px-4 py-4 sm:px-6">
<div class="min-h-0 flex-1 overflow-y-auto px-4 py-4 sm:px-6" tabindex="0">
<slot></slot>
</div>
<!-- 底部 -->
<div
v-if="$slots.footer"
class="flex shrink-0 items-center justify-end space-x-3 border-t px-4 py-3 sm:px-6 sm:py-4"
class="flex shrink-0 flex-wrap items-center justify-end gap-2 border-t px-4 py-3 sm:px-6 sm:py-4"
:class="[isDarkMode ? 'border-gray-700 bg-gray-900/50' : 'border-gray-200 bg-gray-50']"
>
<slot name="footer"></slot>
@@ -69,8 +66,9 @@
</template>
<script setup lang="ts">
import { computed, inject, ref } from 'vue'
import { computed, inject, nextTick, ref, watch } from 'vue'
import { X } from 'lucide-vue-next'
import { useI18n } from 'vue-i18n'
interface Props {
show: boolean
@@ -86,48 +84,91 @@ const props = withDefaults(defineProps<Props>(), {
closeOnBackdrop: true
})
const emit = defineEmits<{
close: []
}>()
const emit = defineEmits<{ close: [] }>()
const { t } = useI18n()
const isDarkMode = inject('isDarkMode')
const modalRef = ref<HTMLElement>()
let returnFocusElement: HTMLElement | null = null
const sizeClasses = computed(() => {
const sizes = {
sm: 'max-w-md w-full',
md: 'max-w-lg w-full',
lg: 'max-w-2xl w-full',
xl: 'max-w-4xl w-full'
}
return sizes[props.size]
})
const sizeClasses = computed(() => ({
sm: 'max-w-md w-full',
md: 'max-w-lg w-full',
lg: 'max-w-2xl w-full',
xl: 'max-w-4xl w-full'
})[props.size])
const focusableSelector =
'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
const handleBackdropClick = () => {
if (props.closeOnBackdrop) {
if (props.closeOnBackdrop) emit('close')
}
const handleKeydown = (event: KeyboardEvent) => {
if (event.key === 'Escape' && props.closable) {
event.preventDefault()
emit('close')
return
}
if (event.key !== 'Tab' || !modalRef.value) return
const focusable = [...modalRef.value.querySelectorAll<HTMLElement>(focusableSelector)]
if (!focusable.length) {
event.preventDefault()
modalRef.value.focus()
return
}
const first = focusable[0]
const last = focusable[focusable.length - 1]
if (event.shiftKey && document.activeElement === first) {
event.preventDefault()
last.focus()
} else if (!event.shiftKey && document.activeElement === last) {
event.preventDefault()
first.focus()
}
}
watch(
() => props.show,
async (show) => {
if (show) {
returnFocusElement = document.activeElement instanceof HTMLElement ? document.activeElement : null
await nextTick()
const first = modalRef.value?.querySelector<HTMLElement>(focusableSelector)
;(first || modalRef.value)?.focus()
} else {
await nextTick()
returnFocusElement?.focus()
returnFocusElement = null
}
}
)
</script>
<style scoped>
.modal-enter-active,
.modal-leave-active {
transition: opacity 0.3s ease;
transition: opacity 0.24s ease;
}
.modal-enter-active .relative,
.modal-leave-active .relative {
transition: all 0.3s ease;
transition: transform 0.24s ease, opacity 0.24s ease;
}
.modal-enter-from,
.modal-leave-to {
opacity: 0;
}
.modal-enter-from .relative,
.modal-leave-to .relative {
transform: scale(0.95) translateY(-20px);
opacity: 0;
transform: scale(0.97) translateY(-10px);
}
@media (prefers-reduced-motion: reduce) {
.modal-enter-active,
.modal-leave-active,
.modal-enter-active .relative,
.modal-leave-active .relative {
transition-duration: 0.01ms;
}
}
</style>
src/components/common/DataPagination.vue
+53 -76
View File
@@ -1,53 +1,46 @@
<template>
<div
class="mt-4 flex flex-col gap-3 border-t px-6 py-4 sm:flex-row sm:items-center sm:justify-between"
class="mt-4 flex flex-col gap-3 border-t px-4 py-4 sm:flex-row sm:items-center sm:justify-between sm:px-6"
:class="[isDarkMode ? 'border-[#31454d]' : 'border-[#c8d7da]']"
>
<div
class="flex items-center text-sm"
:class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']"
>
显示第 {{ (currentPage - 1) * pageSize + 1 }} 到
{{ Math.min(currentPage * pageSize, total) }} 条，共 {{ total }} 条
<div class="text-sm" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-600']">
{{ t('components.pagination.range', { start: rangeStart, end: rangeEnd, total }) }}
</div>
<div class="flex flex-wrap items-center gap-2">
<select
:value="pageSize"
class="h-9 rounded-[30px] border px-3 text-sm shadow-sm transition-colors"
class="min-h-11 rounded-[30px] border px-3 text-sm shadow-sm transition-colors sm:min-h-9"
:class="[
isDarkMode
? 'border-[#40545c] bg-[#263941] text-[#d8e3e5] hover:border-[#7199a8]'
: 'border-[#c8d8dc] bg-[#edf4f5] text-[#415d66] hover:border-[#9db6bd]'
]"
:aria-label="t('components.pagination.pageSize')"
@change="$emit('page-size-change', Number(($event.target as HTMLSelectElement).value))"
>
<option v-for="size in pageSizeOptions" :key="size" :value="size">{{ size }}/页</option>
<option v-for="size in pageSizeOptions" :key="size" :value="size">
{{ t('components.pagination.perPage', { size }) }}
</option>
</select>
<button
@click="$emit('page-change', currentPage - 1)"
type="button"
:disabled="currentPage === 1"
class="inline-flex items-center rounded-[30px] px-3 py-1.5 shadow-sm transition-all duration-200 hover:shadow-md"
:class="[
isDarkMode
? currentPage === 1
? 'cursor-not-allowed bg-[#223039] text-[#657a80]'
: 'bg-[#263941] text-[#d8e3e5] hover:bg-[#2d4751]'
: currentPage === 1
? 'cursor-not-allowed bg-[#e8eeee] text-[#9aa9ad]'
: 'bg-[#edf4f5] text-[#415d66] hover:bg-[#e2ecee]'
]"
class="inline-flex min-h-11 items-center rounded-[30px] px-3 py-1.5 shadow-sm transition-all duration-200 hover:shadow-md sm:min-h-9"
:class="buttonClass(currentPage === 1)"
@click="$emit('page-change', currentPage - 1)"
>
<ChevronLeftIcon class="w-4 h-4" />
上一页
<ChevronLeftIcon class="h-4 w-4" aria-hidden="true" />
{{ t('common.previous') }}
</button>
<div class="flex items-center space-x-1">
<div class="flex items-center gap-1">
<template v-for="pageNum in displayedPages" :key="pageNum">
<button
v-if="pageNum !== '...'"
@click="$emit('page-change', pageNum as number)"
class="inline-flex items-center rounded-[30px] px-3 py-1.5 shadow-sm transition-all duration-200 hover:shadow-md"
type="button"
class="inline-flex min-h-11 min-w-11 items-center justify-center rounded-[30px] px-3 py-1.5 shadow-sm transition-all duration-200 hover:shadow-md sm:min-h-9 sm:min-w-9"
:class="[
currentPage === pageNum
? 'bg-[#5f8796] text-white shadow-[#9fb8bf]/35'
@@ -55,39 +48,34 @@
? 'bg-[#263941] text-[#d8e3e5] hover:bg-[#2d4751]'
: 'bg-[#edf4f5] text-[#415d66] hover:bg-[#e2ecee]'
]"
:aria-label="t('components.pagination.goToPage', { page: pageNum })"
:aria-current="currentPage === pageNum ? 'page' : undefined"
@click="$emit('page-change', pageNum as number)"
>
{{ pageNum }}
</button>
<span v-else class="px-2" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']">
...
</span>
<span v-else class="px-1" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-600']">…</span>
</template>
</div>
<button
@click="$emit('page-change', currentPage + 1)"
type="button"
:disabled="currentPage >= totalPages"
class="inline-flex items-center rounded-[30px] px-3 py-1.5 shadow-sm transition-all duration-200 hover:shadow-md"
:class="[
isDarkMode
? currentPage >= totalPages
? 'cursor-not-allowed bg-[#223039] text-[#657a80]'
: 'bg-[#263941] text-[#d8e3e5] hover:bg-[#2d4751]'
: currentPage >= totalPages
? 'cursor-not-allowed bg-[#e8eeee] text-[#9aa9ad]'
: 'bg-[#edf4f5] text-[#415d66] hover:bg-[#e2ecee]'
]"
class="inline-flex min-h-11 items-center rounded-[30px] px-3 py-1.5 shadow-sm transition-all duration-200 hover:shadow-md sm:min-h-9"
:class="buttonClass(currentPage >= totalPages)"
@click="$emit('page-change', currentPage + 1)"
>
下一页
<ChevronRightIcon class="w-4 h-4" />
{{ t('common.next') }}
<ChevronRightIcon class="h-4 w-4" aria-hidden="true" />
</button>
</div>
</div>
</template>
<script setup lang="ts">
import { inject, computed } from 'vue'
import { computed, inject, type Ref } from 'vue'
import { ChevronLeftIcon, ChevronRightIcon } from 'lucide-vue-next'
import { useI18n } from 'vue-i18n'
interface Props {
currentPage: number
@@ -105,44 +93,33 @@ defineEmits<{
'page-size-change': [size: number]
}>()
const isDarkMode = inject('isDarkMode')
const isDarkMode = inject<Ref<boolean>>('isDarkMode', computed(() => false))
const { t } = useI18n()
const totalPages = computed(() => Math.max(1, Math.ceil(props.total / props.pageSize)))
const rangeStart = computed(() => (props.total ? (props.currentPage - 1) * props.pageSize + 1 : 0))
const rangeEnd = computed(() => Math.min(props.currentPage * props.pageSize, props.total))
// 计算总页数
const totalPages = computed(() => Math.ceil(props.total / props.pageSize))
// 计算要显示的页码
const displayedPages = computed(() => {
const current = props.currentPage
const total = totalPages.value
const delta = 2 // 当前页码前后显示的页码数
const pages: (number | string)[] = []
// 始终显示第一页
pages.push(1)
// 计算显示范围
const left = Math.max(2, current - delta)
const right = Math.min(total - 1, current + delta)
// 添加省略号和页码
if (left > 2) {
pages.push('...')
}
for (let i = left; i <= right; i++) {
pages.push(i)
}
if (right < total - 1) {
pages.push('...')
}
// 始终显示最后一页
if (total > 1) {
pages.push(total)
}
const pages: (number | string)[] = [1]
const left = Math.max(2, current - 2)
const right = Math.min(total - 1, current + 2)
if (left > 2) pages.push('...')
for (let i = left; i <= right; i++) pages.push(i)
if (right < total - 1) pages.push('...')
if (total > 1) pages.push(total)
return pages
})
const buttonClass = (disabled: boolean) => {
if (isDarkMode.value) {
return disabled
? 'cursor-not-allowed bg-[#223039] text-[#71878d]'
: 'bg-[#263941] text-[#d8e3e5] hover:bg-[#2d4751]'
}
return disabled
? 'cursor-not-allowed bg-[#e8eeee] text-[#7d8d91]'
: 'bg-[#edf4f5] text-[#415d66] hover:bg-[#e2ecee]'
}
</script>
src/components/common/DataTable.vue
+9 -4
View File
@@ -18,16 +18,18 @@
<slot name="toolbar"></slot>
</div>
</div>
<div class="overflow-x-auto">
<div class="overflow-x-auto" tabindex="0" role="region" :aria-label="title">
<table
class="min-w-full divide-y"
:class="[isDarkMode ? 'divide-[#31454d]' : 'divide-[#d7e3e5]']"
class="divide-y"
:class="[tableClass, isDarkMode ? 'divide-[#31454d]' : 'divide-[#d7e3e5]']"
>
<caption class="sr-only">{{ title }}</caption>
<thead>
<tr>
<th
v-for="header in headers"
:key="header"
scope="col"
class="px-6 py-3.5 text-left text-xs font-medium uppercase tracking-wider"
:class="[isDarkMode ? 'text-gray-400' : 'text-gray-500']"
>
@@ -53,9 +55,12 @@ import { inject, useSlots } from 'vue'
interface Props {
title: string
headers: string[]
tableClass?: string
}
defineProps<Props>()
withDefaults(defineProps<Props>(), {
tableClass: 'min-w-full'
})
const slots = useSlots()
const isDarkMode = inject('isDarkMode')
src/components/common/ExpirationSelector.vue
+5 -1
View File
@@ -1,6 +1,6 @@
<template>
<div class="flex flex-col space-y-3">
<label :class="['text-sm font-medium', isDarkMode ? 'text-gray-300' : 'text-gray-700']">
<label for="send-expiration-value" :class="['text-sm font-medium', isDarkMode ? 'text-gray-300' : 'text-gray-700']">
{{ t('send.expiration.label') }}
</label>
<div class="relative flex-grow group">
@@ -14,6 +14,7 @@
>
<template v-if="expirationMethod !== 'forever'">
<input
id="send-expiration-value"
:value="expirationValue"
@input="updateValue"
type="number"
@@ -35,6 +36,7 @@
>
<button
type="button"
:aria-label="t('send.expiration.increment')"
@click="incrementValue(1)"
class="flex-1 px-2 flex items-center justify-center transition-all duration-200"
:class="[
@@ -54,6 +56,7 @@
</button>
<button
type="button"
:aria-label="t('send.expiration.decrement')"
@click="incrementValue(-1)"
class="flex-1 px-2 flex items-center justify-center transition-all duration-200"
:class="[
@@ -74,6 +77,7 @@
</div>
</template>
<select
:aria-label="t('send.expiration.method')"
:value="expirationMethod"
@change="updateMethod"
:class="[
src/components/common/FileRecordList.vue
+14 -3
View File
@@ -29,8 +29,11 @@
</div>
<div class="flex-shrink-0 flex space-x-2">
<button
type="button"
:aria-label="t('fileRecord.viewDetails')"
:title="t('fileRecord.viewDetails')"
@click="$emit('view-details', record)"
class="p-2 rounded-full hover:bg-opacity-20 transition duration-300"
class="flex h-11 w-11 items-center justify-center rounded-full transition duration-200 hover:bg-opacity-20"
:class="[
isDarkMode
? 'hover:bg-indigo-400 text-indigo-400'
@@ -40,8 +43,11 @@
<EyeIcon class="w-5 h-5" />
</button>
<button
type="button"
:aria-label="t('fileRecord.download')"
:title="t('fileRecord.download')"
@click="$emit('download-record', record)"
class="p-2 rounded-full hover:bg-opacity-20 transition duration-300"
class="flex h-11 w-11 items-center justify-center rounded-full transition duration-200 hover:bg-opacity-20"
:class="[
isDarkMode
? 'hover:bg-green-400 text-green-400'
@@ -51,8 +57,11 @@
<DownloadIcon class="w-5 h-5" />
</button>
<button
type="button"
:aria-label="t('fileRecord.deleteRecord')"
:title="t('fileRecord.deleteRecord')"
@click="$emit('delete-record', record.id)"
class="p-2 rounded-full hover:bg-opacity-20 transition duration-300"
class="flex h-11 w-11 items-center justify-center rounded-full transition duration-200 hover:bg-opacity-20"
:class="[
isDarkMode ? 'hover:bg-red-400 text-red-400' : 'hover:bg-red-100 text-red-600'
]"
@@ -69,6 +78,7 @@
import { inject } from 'vue'
import { FileIcon, EyeIcon, DownloadIcon, TrashIcon } from 'lucide-vue-next'
import type { ReceivedFileRecord } from '@/types'
import { useI18n } from 'vue-i18n'
interface Props {
records: ReceivedFileRecord[]
@@ -83,6 +93,7 @@ interface Emits {
defineProps<Props>()
defineEmits<Emits>()
const isDarkMode = inject('isDarkMode')
const { t } = useI18n()
</script>
<style scoped>
src/components/common/LanguageSwitcher.vue
+11 -3
View File
@@ -1,13 +1,17 @@
<template>
<div ref="switcherRef" class="relative">
<button
type="button"
@click="toggleDropdown"
:class="[
'flex items-center space-x-2 px-3 py-2 rounded-lg transition-all duration-200',
'flex min-h-11 items-center space-x-2 rounded-lg px-3 py-2 transition-all duration-200',
isDarkMode
? 'bg-gray-800/60 hover:bg-gray-700/80 text-gray-300 hover:text-white'
: 'bg-gray-100 hover:bg-gray-200 text-gray-700 hover:text-gray-900'
]"
:aria-expanded="isDropdownOpen"
aria-haspopup="listbox"
:aria-label="t('common.language')"
>
<GlobeIcon class="w-4 h-4" />
<span class="text-sm font-medium">{{ currentLanguage.name }}</span>
@@ -29,6 +33,7 @@
>
<div
v-if="isDropdownOpen"
role="listbox"
:class="[
'absolute right-0 mt-2 w-32 rounded-lg shadow-lg ring-1 ring-black ring-opacity-5 z-50',
isDarkMode
@@ -40,9 +45,12 @@
<button
v-for="language in availableLocales"
:key="language.code"
type="button"
role="option"
:aria-selected="currentLocale === language.code"
@click="switchLanguage(language.code)"
:class="[
'w-full text-left px-4 py-2 text-sm transition-colors duration-150',
'min-h-11 w-full px-4 py-2 text-left text-sm transition-colors duration-150',
currentLocale === language.code
? isDarkMode
? 'bg-indigo-600 text-white'
@@ -66,7 +74,7 @@ import { useI18n } from 'vue-i18n'
import { GlobeIcon, ChevronDownIcon } from 'lucide-vue-next'
import { availableLocales, setLocale } from '@/i18n/index'
const { locale } = useI18n()
const { locale, t } = useI18n()
const isDarkMode = inject('isDarkMode')
const isDropdownOpen = ref(false)
const switcherRef = ref<HTMLElement | null>(null)
src/components/common/PageFooter.vue
+6 -3
View File
@@ -3,7 +3,7 @@
<div class="mb-6 text-center" v-if="linkText && linkTo">
<router-link
:to="linkTo"
class="text-indigo-400 hover:text-indigo-300 transition duration-300"
class="inline-flex min-h-11 items-center rounded-lg px-3 text-[#3f6a77] transition duration-200 hover:bg-[#dcebed] hover:text-[#315c69] dark:text-[#b8d4dc] dark:hover:bg-[#294047]"
>
{{ linkText }}
</router-link>
@@ -23,7 +23,9 @@
<div class="flex items-center space-x-4">
<router-link
to="/login"
class="text-sm hover:text-indigo-300 transition duration-300 flex items-center"
class="flex h-11 w-11 items-center justify-center rounded-lg text-sm transition duration-200 hover:bg-[#dcebed] dark:hover:bg-[#294047]"
:aria-label="t('manage.login.title')"
:title="t('manage.login.title')"
:class="[
isDarkMode
? 'text-gray-400 hover:text-indigo-400'
@@ -33,8 +35,9 @@
<UserIcon class="w-4 h-4" />
</router-link>
<button
type="button"
@click="$emit('toggle-drawer')"
class="text-sm hover:text-indigo-300 transition duration-300 flex items-center"
class="flex min-h-11 items-center rounded-lg px-2 text-sm transition duration-200 hover:bg-[#dcebed] dark:hover:bg-[#294047]"
:class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
>
{{ drawerText }}
src/components/common/PageHeader.vue
+12 -4
View File
@@ -1,6 +1,6 @@
<template>
<div class="text-center">
<div class="flex justify-center mb-8">
<div class="mb-5 flex justify-center" aria-hidden="true">
<div
class="rounded-full bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 p-1 animate-spin-slow"
>
@@ -9,17 +9,19 @@
</div>
</div>
</div>
<h2
<button
type="button"
@click="$emit('title-click')"
class="text-3xl cursor-pointer font-extrabold text-center mb-6"
class="mb-6 min-h-11 rounded-lg px-2 text-center text-3xl font-extrabold focus:outline-none focus:ring-2 focus:ring-indigo-500"
:class="[
isDarkMode
? 'text-transparent bg-clip-text bg-gradient-to-r from-indigo-300 via-purple-300 to-pink-300'
: 'text-indigo-600'
]"
:aria-label="title"
>
{{ title }}
</h2>
</button>
</div>
</template>
@@ -54,4 +56,10 @@ const isDarkMode = inject('isDarkMode')
.animate-spin-slow {
animation: spin-slow 3s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.animate-spin-slow {
animation: none;
}
}
</style>
src/components/common/RetrieveForm.vue
+5 -2
View File
@@ -12,6 +12,8 @@
id="code"
v-model="code"
type="text"
inputmode="text"
autocomplete="one-time-code"
ref="codeInput"
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="[
@@ -21,6 +23,7 @@
]"
:placeholder="t('retrieve.codeInput.placeholder')"
required
:aria-invalid="error"
:readonly="inputStatus.readonly"
maxlength="5"
@focus="isInputFocused = true"
@@ -42,8 +45,8 @@
</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-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"
class="group relative w-full overflow-hidden rounded-lg bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 px-4 py-3 font-bold text-white transition duration-300 hover:from-indigo-600 hover:via-purple-600 hover:to-pink-600 hover:shadow-lg focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-opacity-50 disabled:cursor-not-allowed disabled:opacity-50 motion-safe:hover:scale-[1.02] disabled:hover:scale-100"
:disabled="inputStatus.loading || code.trim().length !== 5"
>
<span class="flex items-center justify-center relative z-10">
<span>{{ inputStatus.loading ? t('common.loading') : t('retrieve.submit') }}</span>
src/components/common/SendTypeSelector.vue
+2 -2
View File
@@ -4,7 +4,7 @@
type="button"
@click="selectType('file')"
:class="[
'px-4 py-2 rounded-lg transition-colors duration-300',
'min-h-11 px-4 py-2 rounded-lg transition-colors duration-300',
selectedType === 'file'
? 'bg-indigo-600 text-white'
: isDarkMode
@@ -18,7 +18,7 @@
type="button"
@click="selectType('text')"
:class="[
'px-4 py-2 rounded-lg transition-colors duration-300',
'min-h-11 px-4 py-2 rounded-lg transition-colors duration-300',
selectedType === 'text'
? 'bg-indigo-600 text-white'
: isDarkMode
src/components/common/SentRecordList.vue
+14 -3
View File
@@ -26,8 +26,11 @@
</div>
<div class="flex-shrink-0 flex space-x-2">
<button
type="button"
:aria-label="t('common.copy')"
:title="t('common.copy')"
@click="$emit('copy-link', record)"
class="p-2 rounded-full hover:bg-opacity-20 transition duration-300"
class="flex h-11 w-11 items-center justify-center rounded-full transition duration-200 hover:bg-opacity-20"
:class="[
isDarkMode ? 'hover:bg-blue-400 text-blue-400' : 'hover:bg-blue-100 text-blue-600'
]"
@@ -35,8 +38,11 @@
<ClipboardCopyIcon class="w-5 h-5" />
</button>
<button
type="button"
:aria-label="t('fileRecord.viewDetails')"
:title="t('fileRecord.viewDetails')"
@click="$emit('view-details', record)"
class="p-2 rounded-full hover:bg-opacity-20 transition duration-300"
class="flex h-11 w-11 items-center justify-center rounded-full transition duration-200 hover:bg-opacity-20"
:class="[
isDarkMode
? 'hover:bg-green-400 text-green-400'
@@ -46,8 +52,11 @@
<EyeIcon class="w-5 h-5" />
</button>
<button
type="button"
:aria-label="t('fileRecord.deleteRecord')"
:title="t('fileRecord.deleteRecord')"
@click="$emit('delete-record', record.id)"
class="p-2 rounded-full hover:bg-opacity-20 transition duration-300"
class="flex h-11 w-11 items-center justify-center rounded-full transition duration-200 hover:bg-opacity-20"
:class="[
isDarkMode ? 'hover:bg-red-400 text-red-400' : 'hover:bg-red-100 text-red-600'
]"
@@ -64,6 +73,7 @@
import { inject } from 'vue'
import { ClipboardCopyIcon, EyeIcon, FileIcon, TrashIcon } from 'lucide-vue-next'
import type { SentFileRecord } from '@/types'
import { useI18n } from 'vue-i18n'
defineProps<{
records: SentFileRecord[]
@@ -76,6 +86,7 @@ defineEmits<{
}>()
const isDarkMode = inject('isDarkMode')
const { t } = useI18n()
</script>
<style scoped>
src/components/common/SettingNumberInput.vue
+11 -20
View File
@@ -1,17 +1,18 @@
<template>
<div class="space-y-2">
<label class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
<label :for="inputId" class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
{{ label }}
</label>
<div class="flex items-center space-x-2">
<div class="flex items-center gap-2">
<input
:id="inputId"
type="number"
:value="modelValue"
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="min-h-11 w-28 rounded-md border px-4 py-2.5 shadow-sm outline-none transition-all duration-200 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500"
: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'
? 'border-gray-600 bg-gray-700 text-white hover:border-gray-500'
: 'border-gray-300 bg-white text-gray-900 hover:border-gray-400'
]"
@input="handleInput"
/>
@@ -21,19 +22,12 @@
</template>
<script setup lang="ts">
import { inject } from 'vue'
defineProps<{
label: string
modelValue: number
suffix: string
}>()
import { computed, inject } from 'vue'
const props = defineProps<{ label: string; modelValue: number; suffix: string }>()
const inputId = computed(() => `setting-number-${props.label.toLowerCase().replace(/[^a-z0-9\u4e00-\u9fa5]+/gi, '-')}`)
const isDarkMode = inject('isDarkMode')
const emit = defineEmits<{
'update:modelValue': [value: number]
}>()
const emit = defineEmits<{ 'update:modelValue': [value: number] }>()
const handleInput = (event: Event) => {
const input = event.target as HTMLInputElement
@@ -41,10 +35,7 @@ const handleInput = (event: Event) => {
emit('update:modelValue', 0)
return
}
const nextValue = input.valueAsNumber
if (!Number.isNaN(nextValue)) {
emit('update:modelValue', nextValue)
}
if (!Number.isNaN(nextValue)) emit('update:modelValue', nextValue)
}
</script>
src/components/common/SettingSwitch.vue
+19 -30
View File
@@ -1,32 +1,29 @@
<template>
<div class="space-y-2">
<label class="block text-sm font-medium mb-2" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
<span :id="labelId" class="block text-sm font-medium" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
{{ label }}
</label>
<div class="flex items-center">
</span>
<div class="flex min-h-11 items-center gap-3">
<button
type="button"
class="relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent shadow-sm transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-[#8fb2bf] focus:ring-offset-2"
:class="[
modelValue === 1
? 'bg-[#6f9688]'
: isDarkMode
? 'bg-[#40545c]'
: 'bg-[#cfdadc]'
]"
class="flex h-11 w-14 shrink-0 items-center justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-[#8fb2bf] focus:ring-offset-2"
role="switch"
:aria-checked="modelValue === 1"
:aria-labelledby="labelId"
@click="$emit('toggle')"
>
<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="[
modelValue === 1 ? 'translate-x-5' : 'translate-x-0',
isDarkMode && modelValue !== 1 ? 'bg-gray-100' : 'bg-white'
]"
/>
class="relative inline-flex h-6 w-11 rounded-full border-2 border-transparent shadow-sm transition-colors duration-200"
:class="modelValue === 1 ? 'bg-[#6f9688]' : isDarkMode ? 'bg-[#40545c]' : 'bg-[#cfdadc]'"
aria-hidden="true"
>
<span
class="pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200"
:class="modelValue === 1 ? 'translate-x-5' : 'translate-x-0'"
></span>
</span>
</button>
<span class="ml-3 text-sm" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
<span class="text-sm" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-700']">
{{ modelValue === 1 ? enabledText : disabledText }}
</span>
</div>
@@ -34,18 +31,10 @@
</template>
<script setup lang="ts">
import { inject } from 'vue'
defineProps<{
label: string
modelValue: number
enabledText: string
disabledText: string
}>()
defineEmits<{
toggle: []
}>()
import { computed, inject } from 'vue'
const props = defineProps<{ label: string; modelValue: number; enabledText: string; disabledText: string }>()
defineEmits<{ toggle: [] }>()
const isDarkMode = inject('isDarkMode')
const labelId = computed(() => `setting-switch-${props.label.toLowerCase().replace(/[^a-z0-9\u4e00-\u9fa5]+/gi, '-')}`)
</script>
src/components/common/SideDrawer.vue
+102 -41
View File
@@ -1,63 +1,124 @@
<template>
<transition name="drawer">
<div
v-if="visible"
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']"
>
<h3 class="text-2xl font-bold" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
{{ title }}
</h3>
<Teleport to="body">
<transition name="drawer">
<div v-if="visible" class="fixed inset-0 z-50">
<button
@click="$emit('close')"
class="hover:text-white transition duration-300"
:class="[isDarkMode ? 'text-gray-400' : 'text-gray-800']"
type="button"
class="absolute inset-0 bg-black/45"
:aria-label="t('common.close')"
@click="emit('close')"
></button>
<aside
ref="drawerRef"
role="dialog"
aria-modal="true"
:aria-label="title"
tabindex="-1"
class="absolute inset-y-0 right-0 flex w-full flex-col overflow-hidden bg-opacity-95 shadow-2xl backdrop-blur-xl sm:w-[30rem]"
:class="[isDarkMode ? 'bg-gray-900' : 'bg-white']"
@keydown="handleKeydown"
>
<XIcon class="w-6 h-6" />
</button>
<div
class="flex items-center justify-between border-b p-4 sm:p-6"
:class="[isDarkMode ? 'border-gray-700' : 'border-gray-200']"
>
<h3 class="text-xl font-bold sm:text-2xl" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
{{ title }}
</h3>
<button
type="button"
class="flex h-11 w-11 items-center justify-center rounded-lg transition duration-200"
:class="[isDarkMode ? 'text-gray-300 hover:bg-gray-800 hover:text-white' : 'text-gray-700 hover:bg-gray-100']"
:aria-label="t('common.close')"
:title="t('common.close')"
@click="emit('close')"
>
<XIcon class="h-6 w-6" aria-hidden="true" />
</button>
</div>
<div class="min-h-0 flex-1 overflow-y-auto" tabindex="0">
<slot></slot>
</div>
</aside>
</div>
<slot></slot>
</div>
</transition>
</transition>
</Teleport>
</template>
<script setup lang="ts">
import { inject } from 'vue'
import { inject, nextTick, ref, watch } from 'vue'
import { XIcon } from 'lucide-vue-next'
import { useI18n } from 'vue-i18n'
interface Props {
visible: boolean
title: string
}
interface Emits {
close: []
}
defineProps<Props>()
defineEmits<Emits>()
const props = defineProps<{ visible: boolean; title: string }>()
const emit = defineEmits<{ close: [] }>()
const { t } = useI18n()
const isDarkMode = inject('isDarkMode')
const drawerRef = ref<HTMLElement>()
let returnFocusElement: HTMLElement | null = null
const focusableSelector =
'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
const handleKeydown = (event: KeyboardEvent) => {
if (event.key === 'Escape') {
event.preventDefault()
emit('close')
return
}
if (event.key !== 'Tab' || !drawerRef.value) return
const focusable = [...drawerRef.value.querySelectorAll<HTMLElement>(focusableSelector)]
const first = focusable[0]
const last = focusable[focusable.length - 1]
if (!first || !last) return
if (event.shiftKey && document.activeElement === first) {
event.preventDefault()
last.focus()
} else if (!event.shiftKey && document.activeElement === last) {
event.preventDefault()
first.focus()
}
}
watch(
() => props.visible,
async (visible) => {
if (visible) {
returnFocusElement = document.activeElement instanceof HTMLElement ? document.activeElement : null
await nextTick()
const first = drawerRef.value?.querySelector<HTMLElement>(focusableSelector)
;(first || drawerRef.value)?.focus()
} else {
await nextTick()
returnFocusElement?.focus()
returnFocusElement = null
}
}
)
</script>
<style scoped>
.drawer-enter-active,
.drawer-leave-active {
transition: transform 0.3s ease;
transition: opacity 0.24s ease;
}
.drawer-enter-active aside,
.drawer-leave-active aside {
transition: transform 0.24s ease;
}
.drawer-enter-from,
.drawer-leave-to {
opacity: 0;
}
.drawer-enter-from aside,
.drawer-leave-to aside {
transform: translateX(100%);
}
@media (min-width: 640px) {
.sm\:w-120 {
width: 30rem;
/* 480px */
@media (prefers-reduced-motion: reduce) {
.drawer-enter-active,
.drawer-leave-active,
.drawer-enter-active aside,
.drawer-leave-active aside {
transition-duration: 0.01ms;
}
}
</style>
</style>
src/components/common/StatCard.vue
+4 -4
View File
@@ -9,10 +9,10 @@
>
<div class="flex items-center justify-between gap-3">
<div class="min-w-0">
<p class="truncate text-xs sm:text-sm" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-600']">
<p class="line-clamp-2 text-xs leading-tight sm:text-sm" :title="title" :class="[isDarkMode ? 'text-gray-300' : 'text-gray-600']">
{{ title }}
</p>
<h3 class="mt-1 truncate text-xl font-bold tabular-nums sm:text-2xl" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
<h3 class="mt-1 break-words text-xl font-bold leading-tight tabular-nums sm:text-2xl" :title="String(value)" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
{{ value }}
</h3>
</div>
@@ -20,10 +20,10 @@
class="shrink-0 rounded-full p-2.5 transition-transform duration-300 group-hover:scale-105 sm:p-3"
:class="iconBgClass"
>
<component :is="icon" class="h-5 w-5 sm:h-6 sm:w-6" :class="iconClass" />
<component :is="icon" class="h-5 w-5 sm:h-6 sm:w-6" :class="iconClass" aria-hidden="true" />
</div>
</div>
<p class="mt-2 line-clamp-1 text-xs sm:text-sm" :class="descriptionClass">
<p class="mt-2 line-clamp-2 text-xs sm:text-sm" :class="descriptionClass">
<slot name="description"></slot>
</p>
</div>
src/components/common/ThemeToggle.vue
+6 -1
View File
@@ -1,9 +1,11 @@
<script setup lang="ts">
import { inject } from 'vue'
import { SunIcon, MoonIcon } from 'lucide-vue-next'
import { useI18n } from 'vue-i18n'
const isDarkMode = inject('isDarkMode') as { value: boolean }
const toggleTheme = inject('toggleTheme') as () => void
const { t } = useI18n()
const toggleColorMode = () => {
toggleTheme()
@@ -12,8 +14,11 @@ const toggleColorMode = () => {
<template>
<button
type="button"
@click="toggleColorMode"
class="rounded-full p-2 shadow-sm transition-all duration-500 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-[#8fb2bf] focus:ring-offset-2 transform hover:rotate-180"
class="flex h-11 w-11 items-center justify-center rounded-full shadow-sm transition-all duration-200 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-[#8fb2bf] focus:ring-offset-2 motion-safe:hover:rotate-180"
:aria-label="isDarkMode ? t('common.switchToLight') : t('common.switchToDark')"
:title="isDarkMode ? t('common.switchToLight') : t('common.switchToDark')"
:class="
isDarkMode
? 'bg-[#263941] text-[#d8c98e]'
src/composables/useDashboardStats.ts
+12 -4
View File
@@ -1,4 +1,5 @@
import { computed, ref, reactive } from 'vue'
import { useI18n } from 'vue-i18n'
import { StatsService } from '@/services'
import type { DashboardData, DashboardHealthSummary, DashboardViewData } from '@/types'
import { formatFileSize, getErrorMessage } from '@/utils/common'
@@ -54,12 +55,12 @@ const clampRatio = (value: number) => Math.max(0, Math.min(100, Math.round(value
const hasOwn = (target: object, key: string) => Object.prototype.hasOwnProperty.call(target, key)
const formatDuration = (startTimestamp: number | null) => {
const formatDuration = (startTimestamp: number | null, dayLabel: string, hourLabel: string) => {
if (!startTimestamp) return '-'
const uptime = Date.now() - startTimestamp
const days = Math.floor(uptime / (24 * 60 * 60 * 1000))
const hours = Math.floor((uptime % (24 * 60 * 60 * 1000)) / (60 * 60 * 1000))
return `${days}天${hours}小时`
return `${days}${dayLabel} ${hours}${hourLabel}`
}
const healthSummaryKeys: (keyof DashboardHealthSummary)[] = [
@@ -91,12 +92,15 @@ const normalizeHealthSummary = (detail: DashboardData): DashboardHealthSummary =
})
export function useDashboardStats(options: UseDashboardStatsOptions = {}) {
const { t, locale } = useI18n()
const dashboardData = reactive<DashboardViewData>(emptyDashboardData())
const isLoading = ref(false)
const errorMessage = ref('')
const lastUpdatedAt = ref<Date | null>(null)
const lastUpdatedText = computed(() =>
lastUpdatedAt.value ? lastUpdatedAt.value.toLocaleString() : '-'
lastUpdatedAt.value
? new Intl.DateTimeFormat(locale.value, { dateStyle: 'medium', timeStyle: 'short' }).format(lastUpdatedAt.value)
: '-'
)
const fetchDashboardData = async () => {
@@ -140,7 +144,11 @@ export function useDashboardStats(options: UseDashboardStatsOptions = {}) {
dashboardData.yesterdaySizeText = formatFileSize(dashboardData.yesterdaySize)
dashboardData.todaySizeText = formatFileSize(dashboardData.todaySize)
dashboardData.uploadSizeLimitText = formatFileSize(dashboardData.uploadSizeLimit)
dashboardData.sysUptimeText = formatDuration(dashboardData.sysUptime)
dashboardData.sysUptimeText = formatDuration(
dashboardData.sysUptime,
t('common.dayShort'),
t('common.hourShort')
)
dashboardData.activeRatio = dashboardData.totalFiles
? clampRatio((dashboardData.activeCount / dashboardData.totalFiles) * 100)
: 0
src/i18n/locales/en-US.ts
+45
View File
@@ -10,6 +10,14 @@ export default {
add: 'Add',
back: 'Back',
next: 'Next',
language: 'Select language',
switchToLight: 'Switch to light mode',
switchToDark: 'Switch to dark mode',
showPassword: 'Show password',
hidePassword: 'Hide password',
openMenu: 'Open navigation menu',
closeMenu: 'Close navigation menu',
dialog: 'Dialog',
previous: 'Previous',
loading: 'Loading...',
noData: 'No Data',
@@ -46,6 +54,8 @@ export default {
second: 'second',
hour: 'hour',
day: 'day',
dayShort: 'd',
hourShort: 'h',
times: 'times',
appName: 'FileCodeBox - File Transfer',
appDescription: 'Ready-to-use file transfer system'
@@ -111,6 +121,29 @@ export default {
title: 'Permanent',
description: 'View long-retention share records'
}
},
topDownloads: {
title: 'Top 5 Downloads',
description: 'Downloads and traffic in the selected date range',
file: 'File',
downloads: 'Downloads',
traffic: 'Traffic',
status: 'Status',
empty: 'No download records',
current: 'Current',
history: 'Historical'
},
trend: {
title: 'Download / Upload Trend',
mobileHint: 'Tap or slide to inspect; drag the bottom date axis to pan',
startDate: 'Start date',
endDate: 'End date',
zoomIn: 'Zoom in',
zoomOut: 'Zoom out',
reset: 'Reset',
noData: 'No data',
loadFailed: 'Failed to load analytics',
summary: '{window}: {downloads} downloads / {downloadTraffic}, {uploads} uploads / {uploadTraffic}'
}
},
fileManage: {
@@ -313,6 +346,9 @@ export default {
forever: 'Forever',
count: 'By Count',
label: 'Expiration Time',
method: 'Expiration method',
increment: 'Increase expiration value',
decrement: 'Decrease expiration value',
placeholders: {
days: 'Enter days',
hours: 'Enter hours',
@@ -741,6 +777,11 @@ export default {
unsavedChanges: 'Unsaved configuration changes',
allChangesSaved: 'All configuration changes are saved',
refreshBlocked: 'Save current changes before refreshing'
,sectionNavigation: 'Settings section navigation'
,reloadSaved: 'Reload saved settings'
,robotsWarning: 'A Disallow: / rule blocks search engines from crawling the entire site.'
,fileSizeUnit: 'File size unit'
,timeUnit: 'Time unit'
},
systemSettings: {
title: 'System Settings',
@@ -924,6 +965,10 @@ export default {
// Components
components: {
pagination: {
range: 'Showing {start} to {end} of {total}',
pageSize: 'Items per page',
perPage: '{size}/page',
goToPage: 'Go to page {page}',
showing: 'Showing',
to: 'to',
of: 'of',
src/i18n/locales/zh-CN.ts
+45
View File
@@ -10,6 +10,14 @@ export default {
add: '添加',
back: '返回',
next: '下一页',
language: '选择语言',
switchToLight: '切换到浅色模式',
switchToDark: '切换到深色模式',
showPassword: '显示密码',
hidePassword: '隐藏密码',
openMenu: '打开导航菜单',
closeMenu: '关闭导航菜单',
dialog: '对话框',
previous: '上一页',
loading: '加载中...',
noData: '暂无数据',
@@ -46,6 +54,8 @@ export default {
second: '秒',
hour: '小时',
day: '天',
dayShort: '天',
hourShort: '小时',
times: '次',
appName: '文件快递柜 - FileCodeBox',
appDescription: '开箱即用的文件快传系统'
@@ -111,6 +121,29 @@ export default {
title: '永久有效',
description: '查看长期保留的分享记录'
}
},
topDownloads: {
title: '热门下载 Top 5',
description: '统计当前日期范围内的下载次数和流量',
file: '文件',
downloads: '下载',
traffic: '流量',
status: '状态',
empty: '暂无下载记录',
current: '现存',
history: '历史'
},
trend: {
title: '下载/上传趋势',
mobileHint: '轻触或滑动查看数据；拖动底部日期轴平移图表',
startDate: '开始日期',
endDate: '结束日期',
zoomIn: '放大',
zoomOut: '缩小',
reset: '重置',
noData: '无数据',
loadFailed: '统计加载失败',
summary: '{window}，下载 {downloads} 次 / {downloadTraffic}，上传 {uploads} 次 / {uploadTraffic}'
}
},
fileManage: {
@@ -342,6 +375,9 @@ export default {
},
expiration: {
label: '过期时间',
method: '过期方式',
increment: '增加过期值',
decrement: '减少过期值',
placeholders: {
days: '输入天数',
hours: '输入小时数',
@@ -769,6 +805,11 @@ export default {
unsavedChanges: '有未保存的配置变更',
allChangesSaved: '所有配置已保存',
refreshBlocked: '请先保存当前变更再刷新'
,sectionNavigation: '设置分区导航'
,reloadSaved: '重新加载已保存配置'
,robotsWarning: '如果包含 Disallow: /，搜索引擎将无法抓取整个站点。'
,fileSizeUnit: '文件大小单位'
,timeUnit: '时间单位'
},
dashboard: {
title: '仪表盘',
@@ -944,6 +985,10 @@ export default {
// 组件相关
components: {
pagination: {
range: '显示第 {start} 到 {end} 条，共 {total} 条',
pageSize: '每页显示数量',
perPage: '{size}/页',
goToPage: '前往第 {page} 页',
showing: '显示第',
to: '到',
of: '条，共',
src/layout/AdminLayout/AdminLayout.vue
+4 -4
View File
@@ -38,7 +38,7 @@
{{ t('common.appName') }}
</h1>
</div>
<button @click="toggleSidebar" class="lg:hidden">
<button type="button" :aria-label="t('common.closeMenu')" :title="t('common.closeMenu')" @click="toggleSidebar" class="flex h-11 w-11 items-center justify-center rounded-lg lg:hidden">
<XIcon class="w-6 h-6" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']" />
</button>
</div>
@@ -49,7 +49,7 @@
<li v-for="item in menuItems" :key="item.id">
<RouterLink
:to="item.redirect"
class="flex h-10 w-full items-center rounded-lg border-l-4 px-3 text-sm font-medium"
class="flex min-h-11 w-full items-center rounded-lg border-l-4 px-3 text-sm font-medium"
:class="[
route.name === item.id
? isDarkMode
@@ -72,7 +72,7 @@
<div class="p-4 border-t" :class="[isDarkMode ? 'border-[#31454d]' : 'border-[#c8d7da]']">
<button
@click="handleLogout"
class="flex items-center w-full p-2 rounded-lg transition-colors duration-200"
class="flex min-h-11 w-full items-center rounded-lg p-2 transition-colors duration-200"
:class="[
isDarkMode
? 'text-[#aebfc3] hover:bg-[#22353c] hover:text-[#edf4f4]'
@@ -93,7 +93,7 @@
:class="[isDarkMode ? 'bg-[#1a2930] border-[#31454d]' : 'bg-[#f2f6f5] border-[#c8d7da]']"
>
<div class="flex h-14 items-center justify-between px-4">
<button @click="toggleSidebar" class="lg:hidden">
<button type="button" :aria-label="t('common.openMenu')" :title="t('common.openMenu')" @click="toggleSidebar" class="flex h-11 w-11 items-center justify-center rounded-lg lg:hidden">
<MenuIcon class="w-6 h-6" :class="[isDarkMode ? 'text-gray-400' : 'text-gray-600']" />
</button>
</div>
src/main.ts
+2
View File
@@ -7,6 +7,8 @@ import App from './App.vue'
import router from './router'
import i18n from './i18n'
document.documentElement.lang = i18n.global.locale.value
const app = createApp(App)
app.use(createPinia())
src/views/SendFileView.vue
+3 -2
View File
@@ -82,7 +82,7 @@
</button>
</form>
<div class="mt-6 text-center">
<router-link to="/" class="text-indigo-400 hover:text-indigo-300 transition duration-300">
<router-link to="/" class="inline-flex min-h-11 items-center rounded-lg px-3 text-[#3f6a77] transition duration-200 hover:bg-[#dcebed] hover:text-[#315c69] dark:text-[#b8d4dc] dark:hover:bg-[#294047]">
{{ t('send.needRetrieveFile') }}
</router-link>
</div>
@@ -100,8 +100,9 @@
{{ t('send.secureEncryption') }}
</span>
<button
type="button"
@click="toggleDrawer"
class="text-sm hover:text-indigo-300 transition duration-300 flex items-center"
class="flex min-h-11 items-center rounded-lg px-2 text-sm transition duration-200 hover:bg-indigo-50 dark:hover:bg-gray-700"
:class="[isDarkMode ? 'text-indigo-400' : 'text-indigo-600']"
>
{{ t('send.sendRecords') }}
src/views/manage/DashboardView.vue
+36 -28
View File
@@ -236,18 +236,18 @@
<div class="mb-5 flex flex-col gap-4">
<div class="flex min-w-0 flex-col gap-3 xl:flex-row xl:items-start xl:justify-between">
<div class="min-w-0">
<h3 class="text-lg font-semibold" :class="[primaryTextClass]">下载/上传趋势</h3>
<h3 class="text-lg font-semibold" :class="[primaryTextClass]">{{ t('admin.dashboard.trend.title') }}</h3>
<p class="break-words text-sm leading-5" :class="[mutedTextClass]">
{{ analyticsSummaryText }}
</p>
<p class="mt-1 text-xs sm:hidden" :class="[mutedTextClass]">轻触或滑动查看数据；拖动底部日期轴平移图表</p>
<p class="mt-1 text-xs sm:hidden" :class="[mutedTextClass]">{{ t('admin.dashboard.trend.mobileHint') }}</p>
</div>
<div class="flex shrink-0 flex-wrap items-center justify-end gap-2 xl:flex-nowrap">
<div class="analytics-date-range flex min-w-0 items-center justify-center gap-1.5 sm:gap-2">
<NativeDateSelect
v-model="analyticsStart"
:field-class="fieldClass"
aria-label="开始日期"
:aria-label="t('admin.dashboard.trend.startDate')"
@change="fetchAnalyticsData"
/>
<span
@@ -259,7 +259,7 @@
<NativeDateSelect
v-model="analyticsEnd"
:field-class="fieldClass"
aria-label="结束日期"
:aria-label="t('admin.dashboard.trend.endDate')"
@change="fetchAnalyticsData"
/>
</div>
@@ -270,7 +270,7 @@
class="h-9 min-w-16"
@click="trendCanvas?.zoom(0.75)"
>
放大
{{ t('admin.dashboard.trend.zoomIn') }}
</BaseButton>
<BaseButton
variant="outline"
@@ -278,7 +278,7 @@
class="h-9 min-w-16"
@click="trendCanvas?.zoom(1.33)"
>
缩小
{{ t('admin.dashboard.trend.zoomOut') }}
</BaseButton>
<BaseButton
variant="outline"
@@ -286,7 +286,7 @@
class="h-9 min-w-16"
@click="trendCanvas?.resetWindow()"
>
重置
{{ t('admin.dashboard.trend.reset') }}
</BaseButton>
</div>
</div>
@@ -317,15 +317,15 @@
>
<div class="mb-5 flex items-center justify-between">
<div>
<h3 class="text-lg font-semibold" :class="[primaryTextClass]">热门下载 Top 5</h3>
<p class="text-sm" :class="[mutedTextClass]">统计当前日期范围内的下载次数和流量</p>
<h3 class="text-lg font-semibold" :class="[primaryTextClass]">{{ t('admin.dashboard.topDownloads.title') }}</h3>
<p class="text-sm" :class="[mutedTextClass]">{{ t('admin.dashboard.topDownloads.description') }}</p>
</div>
<DownloadCloudIcon
class="h-5 w-5"
:class="[isDarkMode ? 'text-[#b8d4dc]' : 'text-[#5f8796]']"
/>
</div>
<div class="overflow-x-auto">
<div class="overflow-x-auto" tabindex="0" role="region" :aria-label="t('admin.dashboard.topDownloads.title')">
<table
class="min-w-full divide-y"
:class="[isDarkMode ? 'divide-gray-700' : 'divide-gray-200']"
@@ -336,32 +336,32 @@
class="px-4 py-3 text-left text-xs font-semibold uppercase"
:class="[mutedTextClass]"
>
文件
{{ t('admin.dashboard.topDownloads.file') }}
</th>
<th
class="px-4 py-3 text-left text-xs font-semibold uppercase"
:class="[mutedTextClass]"
>
下载
{{ t('admin.dashboard.topDownloads.downloads') }}
</th>
<th
class="px-4 py-3 text-left text-xs font-semibold uppercase"
:class="[mutedTextClass]"
>
流量
{{ t('admin.dashboard.topDownloads.traffic') }}
</th>
<th
class="px-4 py-3 text-left text-xs font-semibold uppercase"
:class="[mutedTextClass]"
>
状态
{{ t('admin.dashboard.topDownloads.status') }}
</th>
</tr>
</thead>
<tbody class="divide-y" :class="[isDarkMode ? 'divide-gray-700' : 'divide-gray-100']">
<tr v-if="analyticsTopFiles.length === 0">
<td colspan="4" class="px-4 py-8 text-center text-sm" :class="[mutedTextClass]">
暂无下载记录
{{ t('admin.dashboard.topDownloads.empty') }}
</td>
</tr>
<tr
@@ -383,7 +383,7 @@
{{ formatBytes(file.download_traffic) }}
</td>
<td class="px-4 py-3 text-sm" :class="[mutedTextClass]">
{{ file.current ? '现存' : '历史' }}
{{ file.current ? t('admin.dashboard.topDownloads.current') : t('admin.dashboard.topDownloads.history') }}
</td>
</tr>
</tbody>
@@ -497,7 +497,7 @@ const analyticsEnd = ref(today())
const analyticsData = ref<AnalyticsData | null>(null)
const analyticsError = ref('')
const isAnalyticsLoading = ref(false)
const analyticsWindowText = ref('无数据')
const analyticsWindowText = ref(t('admin.dashboard.trend.noData'))
const analyticsDailyRows = computed(() => analyticsData.value?.daily || [])
const analyticsTopFiles = computed<AnalyticsFileRow[]>(() => analyticsData.value?.topFiles || [])
const analyticsUploadTrafficText = computed(() =>
@@ -506,13 +506,14 @@ const analyticsUploadTrafficText = computed(() =>
const analyticsDownloadTrafficText = computed(() =>
formatBytes(analyticsData.value?.totals?.downloadTraffic || 0)
)
const analyticsSummaryText = computed(
() =>
`${analyticsWindowText.value}，下载 ${analyticsData.value?.totals?.totalDownloads || 0} 次 / ${
analyticsDownloadTrafficText.value
}，上传 ${analyticsData.value?.totals?.totalUploads || 0} 次 / ${
analyticsUploadTrafficText.value
}`
const analyticsSummaryText = computed(() =>
t('admin.dashboard.trend.summary', {
window: analyticsWindowText.value,
downloads: analyticsData.value?.totals?.totalDownloads || 0,
downloadTraffic: analyticsDownloadTrafficText.value,
uploads: analyticsData.value?.totals?.totalUploads || 0,
uploadTraffic: analyticsUploadTrafficText.value
})
)
const formatBytes = (value: number | string | undefined) => formatFileSize(Number(value || 0), 1)
@@ -522,7 +523,7 @@ const fetchAnalyticsData = async () => {
try {
analyticsData.value = await fetchAnalytics(analyticsStart.value, analyticsEnd.value)
} catch (error) {
analyticsError.value = error instanceof Error ? error.message : '统计加载失败'
analyticsError.value = error instanceof Error ? error.message : t('admin.dashboard.trend.loadFailed')
} finally {
isAnalyticsLoading.value = false
}
@@ -641,10 +642,17 @@ const MetricProgress = defineComponent({
h('span', { class: 'line-clamp-1 text-gray-500 dark:text-gray-400' }, props.label),
h('span', { class: 'font-medium tabular-nums text-gray-900 dark:text-white' }, `${props.value}%`)
]),
h('div', { class: 'h-2 overflow-hidden rounded-full bg-gray-100 dark:bg-gray-700' }, [
h('div', {
class: 'h-2 overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700',
role: 'progressbar',
'aria-label': props.label,
'aria-valuemin': 0,
'aria-valuemax': 100,
'aria-valuenow': props.value
}, [
h('div', {
class: ['h-full rounded-full', toneClass.value],
style: { width: `${props.value}%` }
style: { width: `${Math.max(0, Math.min(100, props.value))}%` }
})
]),
h('p', { class: 'mt-2 hidden text-sm text-gray-500 sm:block dark:text-gray-400' }, props.detail)
@@ -669,7 +677,7 @@ const PolicyRow = defineComponent({
},
[
h('span', { class: 'text-sm text-gray-500 dark:text-gray-400' }, props.label),
h('span', { class: 'text-sm font-medium text-gray-900 dark:text-white' }, props.value)
h('span', { class: 'min-w-0 break-words text-right text-sm font-medium text-gray-900 dark:text-white' }, props.value)
]
)
}
src/views/manage/FileManageView.vue
+8 -14
View File
@@ -21,7 +21,7 @@
<div class="flex items-start justify-between gap-3">
<div>
<p class="text-xs sm:text-sm" :class="[mutedTextClass]">{{ card.label }}</p>
<p class="mt-1.5 truncate text-xl font-semibold tabular-nums sm:mt-2 sm:text-2xl" :class="[primaryTextClass]">
<p class="mt-1.5 break-words text-xl font-semibold leading-tight tabular-nums sm:mt-2 sm:text-2xl" :title="String(card.value)" :class="[primaryTextClass]">
{{ card.value }}
</p>
</div>
@@ -58,7 +58,7 @@
</template>
{{ t('fileManage.resetFilters') }}
</BaseButton>
<BaseButton variant="secondary" @click="isFilterPanelOpen = !isFilterPanelOpen">
<BaseButton variant="secondary" :aria-expanded="filterBodyVisible" aria-controls="file-filter-panel" @click="isFilterPanelOpen = !isFilterPanelOpen">
<template #icon>
<FilterIcon class="mr-2 h-4 w-4" />
</template>
@@ -68,7 +68,7 @@
</div>
<Transition name="fcb-expand-120">
<div v-if="filterBodyVisible" class="fcb-expand-content mt-4 grid gap-4">
<div id="file-filter-panel" v-if="filterBodyVisible" class="fcb-expand-content mt-4 grid gap-4">
<div class="flex flex-col gap-3 lg:flex-row lg:items-center">
<label class="min-w-0 flex-1">
<span class="sr-only">{{ t('fileManage.searchPlaceholder') }}</span>
@@ -331,15 +331,9 @@
</div>
</button>
</div>
<div class="mt-3 grid grid-cols-3 gap-2 pl-14">
<button type="button" class="flex min-h-11 items-center justify-center rounded-lg border text-sm font-medium" :class="detailActionClass" @click="openFileDetail(file)">
<FileTextIcon class="mr-1.5 h-4 w-4" />{{ t('fileManage.detail') }}
</button>
<button type="button" class="flex min-h-11 items-center justify-center rounded-lg border text-sm font-medium" :class="detailActionClass" :disabled="Boolean(downloadingFileId)" @click="downloadFile(file)">
<DownloadIcon class="mr-1.5 h-4 w-4" />{{ file.isTextFile ? t('fileManage.exportText') : t('fileManage.downloadFile') }}
</button>
<button type="button" class="flex min-h-11 items-center justify-center rounded-lg border text-sm font-medium" :class="detailActionClass" @click="openEditModal(file)">
<PencilIcon class="mr-1.5 h-4 w-4" />{{ t('common.edit') }}
<div class="mt-3 pl-14">
<button type="button" class="flex min-h-11 w-full items-center justify-center rounded-lg border text-sm font-medium" :class="detailActionClass" @click="openFileDetail(file)">
<FileTextIcon class="mr-1.5 h-4 w-4" aria-hidden="true" />{{ t('fileManage.detail') }}
</button>
</div>
</article>
@@ -357,7 +351,7 @@
</section>
<div class="hidden md:block">
<DataTable :title="t('fileManage.allFiles')" :headers="fileTableHeaders">
<DataTable :title="t('fileManage.allFiles')" :headers="fileTableHeaders" table-class="min-w-[1120px]">
<template #actions>
<BaseButton variant="secondary" :loading="isLoading" @click="refreshFileList">
<template #icon>
@@ -702,7 +696,7 @@
刷新历史
</BaseButton>
</div>
<div class="overflow-x-auto">
<div class="overflow-x-auto" tabindex="0" role="region" :aria-label="t('fileManage.history.title')">
<table
class="min-w-full divide-y"
:class="[isDarkMode ? 'divide-gray-700' : 'divide-gray-200']"
src/views/manage/SystemSettingsView.vue
+111 -16
View File
@@ -1,7 +1,7 @@
<script setup lang="ts">
import { inject, onMounted } from 'vue'
import { inject, onMounted, ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { RefreshCwIcon, SaveIcon } from 'lucide-vue-next'
import { EyeIcon, EyeOffIcon, RefreshCwIcon, SaveIcon } from 'lucide-vue-next'
import BaseButton from '@/components/common/BaseButton.vue'
import SettingNumberInput from '@/components/common/SettingNumberInput.vue'
import SettingSwitch from '@/components/common/SettingSwitch.vue'
@@ -9,6 +9,7 @@ import { useSystemConfig } from '@/composables'
const isDarkMode = inject('isDarkMode')
const { t } = useI18n()
const showAdminPassword = ref(false)
const {
config,
isRefreshing,
@@ -23,13 +24,20 @@ const {
toggleConfigFlag
} = useSystemConfig()
const scrollToSection = (section: string) => {
document.getElementById(`settings-${section}`)?.scrollIntoView({
behavior: window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth',
block: 'start'
})
}
onMounted(() => {
void refreshConfig()
})
</script>
<template>
<div class="p-6">
<div class="p-4 pb-28 sm:p-6 sm:pb-28">
<div
class="mb-6 flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between"
>
@@ -68,8 +76,29 @@ onMounted(() => {
</div>
</div>
<nav
class="mb-4 flex gap-2 overflow-x-auto pb-2"
:aria-label="t('manage.settings.sectionNavigation')"
>
<button
v-for="section in [
['general', t('manage.settings.basicSettings')],
['storage', t('manage.settings.storageSettings')],
['upload', t('manage.settings.uploadLimits')],
['access', t('manage.settings.errorLimits')]
]"
:key="section[0]"
type="button"
class="inline-flex min-h-11 shrink-0 items-center rounded-full border px-4 text-sm font-medium"
:class="isDarkMode ? 'border-[#40545c] bg-[#263941] text-[#d8e3e5]' : 'border-[#c8d8dc] bg-[#edf4f5] text-[#415d66]'"
@click="scrollToSection(section[0])"
>
{{ section[1] }}
</button>
</nav>
<div
class="theme-2026-card theme-2026-card-hover space-y-8 rounded-[30px] border p-6 shadow-md transition-all duration-200 hover:-translate-y-0.5 hover:shadow-lg"
class="theme-2026-card theme-2026-card-hover mx-auto max-w-6xl space-y-8 rounded-[24px] border p-4 shadow-md transition-all duration-200 hover:shadow-lg sm:rounded-[30px] sm:p-6"
:class="[
isDarkMode
? 'border-[#40545c] bg-[#202f36]/90 hover:border-[#7199a8] hover:bg-[#263941] hover:shadow-black/25'
@@ -77,7 +106,7 @@ onMounted(() => {
]"
>
<!-- 基本设置 -->
<section class="space-y-4">
<section id="settings-general" class="scroll-mt-4 space-y-4">
<h3 class="text-lg font-medium mb-4" :class="[isDarkMode ? 'text-white' : 'text-gray-800']">
{{ t('admin.settings.basicSettings') }}
</h3>
@@ -92,8 +121,10 @@ onMounted(() => {
{{ t('admin.settings.siteName') }}
</label>
<input
id="settings-site-name"
type="text"
v-model="config.name"
:aria-label="t('admin.settings.siteName')"
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
@@ -111,8 +142,10 @@ onMounted(() => {
{{ t('admin.settings.websiteDescription') }}
</label>
<input
id="settings-description"
type="text"
v-model="config.description"
:aria-label="t('admin.settings.websiteDescription')"
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
@@ -131,24 +164,35 @@ onMounted(() => {
</label>
<div class="relative">
<input
type="password"
id="settings-admin-password"
:type="showAdminPassword ? 'text' : 'password'"
minlength="6"
v-model="config.admin_token"
:placeholder="t('admin.settings.passwordPlaceholder')"
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"
autocomplete="new-password"
aria-describedby="settings-admin-password-note"
:aria-label="t('admin.settings.adminPassword')"
class="w-full rounded-md border px-4 py-2.5 pr-14 shadow-sm outline-none transition-all duration-200 ease-in-out focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500"
: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']"
<button
type="button"
class="absolute inset-y-0 right-1 flex w-11 items-center justify-center rounded-lg"
:aria-label="showAdminPassword ? t('common.hidePassword') : t('common.showPassword')"
:title="showAdminPassword ? t('common.hidePassword') : t('common.showPassword')"
@click="showAdminPassword = !showAdminPassword"
>
<span class="text-xs">{{ t('admin.settings.passwordNote') }}</span>
</div>
<EyeOffIcon v-if="showAdminPassword" class="h-5 w-5" aria-hidden="true" />
<EyeIcon v-else class="h-5 w-5" aria-hidden="true" />
</button>
</div>
<p id="settings-admin-password-note" class="text-xs" :class="isDarkMode ? 'text-gray-300' : 'text-gray-600'">
{{ t('admin.settings.passwordNote') }}
</p>
</div>
<div class="space-y-2">
@@ -159,8 +203,10 @@ onMounted(() => {
{{ t('admin.settings.keywords') }}
</label>
<input
id="settings-keywords"
type="text"
v-model="config.keywords"
:aria-label="t('admin.settings.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
@@ -179,7 +225,9 @@ onMounted(() => {
{{ t('manage.settings.themeSelection') }}
</label>
<select
id="settings-theme"
v-model="config.themesSelect"
:aria-label="t('manage.settings.themeSelection')"
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
@@ -203,8 +251,10 @@ onMounted(() => {
{{ t('manage.settings.robotsFile') }}
</label>
<textarea
id="settings-robots"
v-model="config.robotsText"
rows="3"
:aria-label="t('manage.settings.robotsFile')"
rows="5"
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
@@ -227,6 +277,7 @@ onMounted(() => {
<input
type="text"
v-model="config.notify_title"
:aria-label="t('manage.settings.notificationTitle')"
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
@@ -245,6 +296,7 @@ onMounted(() => {
</label>
<textarea
v-model="config.notify_content"
:aria-label="t('manage.settings.notificationContent')"
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="[
@@ -257,7 +309,7 @@ onMounted(() => {
</div>
<!-- 存储设置 -->
<div class="space-y-4">
<div id="settings-storage" class="scroll-mt-4 space-y-4 border-t pt-8" :class="isDarkMode ? 'border-gray-700' : 'border-gray-200'">
<h3
class="text-lg font-medium mb-4"
:class="[isDarkMode ? 'text-white' : 'text-gray-800']"
@@ -276,6 +328,7 @@ onMounted(() => {
type="text"
:placeholder="t('manage.settings.storagePathPlaceholder')"
v-model="config.storage_path"
:aria-label="t('manage.settings.storagePath')"
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
@@ -295,6 +348,7 @@ onMounted(() => {
</label>
<select
v-model="config.file_storage"
:aria-label="t('manage.settings.storageMethod')"
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
@@ -331,6 +385,7 @@ onMounted(() => {
type="text"
:placeholder="t('manage.settings.webdavUrlPlaceholder')"
v-model="config.webdav_url"
:aria-label="'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
@@ -351,6 +406,7 @@ onMounted(() => {
type="text"
:placeholder="t('manage.settings.webdavUsernamePlaceholder')"
v-model="config.webdav_username"
:aria-label="'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
@@ -371,6 +427,7 @@ onMounted(() => {
type="password"
:placeholder="t('manage.settings.webdavPasswordPlaceholder')"
v-model="config.webdav_password"
:aria-label="'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
@@ -394,6 +451,7 @@ onMounted(() => {
<input
type="text"
v-model="config.s3_access_key_id"
:aria-label="t('manage.settings.s3AccessKeyId')"
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
@@ -413,6 +471,7 @@ onMounted(() => {
<input
type="password"
v-model="config.s3_secret_access_key"
:aria-label="t('manage.settings.s3SecretAccessKey')"
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
@@ -432,6 +491,7 @@ onMounted(() => {
<input
type="text"
v-model="config.s3_bucket_name"
:aria-label="t('manage.settings.s3BucketName')"
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
@@ -451,6 +511,7 @@ onMounted(() => {
<input
type="text"
v-model="config.s3_endpoint_url"
:aria-label="t('manage.settings.s3EndpointUrl')"
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
@@ -470,6 +531,7 @@ onMounted(() => {
<input
type="text"
v-model="config.s3_region_name"
:aria-label="t('manage.settings.s3RegionName')"
:placeholder="t('manage.settings.autoPlaceholder')"
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="[
@@ -489,6 +551,7 @@ onMounted(() => {
</label>
<select
v-model="config.s3_signature_version"
:aria-label="t('manage.settings.s3SignatureVersion')"
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
@@ -511,6 +574,7 @@ onMounted(() => {
<input
type="text"
v-model="config.s3_hostname"
:aria-label="t('manage.settings.s3Hostname')"
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
@@ -541,7 +605,7 @@ onMounted(() => {
</div>
<!-- 上传限制 -->
<div class="mt-8">
<div id="settings-upload" class="scroll-mt-4 border-t pt-8" :class="isDarkMode ? 'border-gray-700' : 'border-gray-200'">
<h3
class="text-lg font-medium mb-4"
:class="[isDarkMode ? 'text-white' : 'text-gray-800']"
@@ -573,6 +637,7 @@ onMounted(() => {
<input
type="number"
v-model="fileSize"
:aria-label="t('manage.settings.fileSizeLimit')"
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
@@ -582,6 +647,7 @@ onMounted(() => {
/>
<select
v-model="sizeUnit"
:aria-label="t('manage.settings.fileSizeUnit')"
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
@@ -644,6 +710,7 @@ onMounted(() => {
<input
type="number"
v-model="saveTime"
:aria-label="t('manage.settings.maxSaveTime')"
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
@@ -653,6 +720,7 @@ onMounted(() => {
/>
<select
v-model="saveTimeUnit"
:aria-label="t('manage.settings.timeUnit')"
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
@@ -679,7 +747,7 @@ onMounted(() => {
</div>
<!-- 错误限制 -->
<div class="mt-8">
<div id="settings-access" class="scroll-mt-4 border-t pt-8" :class="isDarkMode ? 'border-gray-700' : 'border-gray-200'">
<h3
class="text-lg font-medium mb-4"
:class="[isDarkMode ? 'text-white' : 'text-gray-800']"
@@ -703,6 +771,33 @@ onMounted(() => {
</div>
</section>
</div>
<div
class="fixed inset-x-0 bottom-0 z-40 border-t px-4 py-3 backdrop-blur-xl lg:left-64"
:class="isDarkMode ? 'border-[#31454d] bg-[#17252b]/95' : 'border-[#c8d7da] bg-[#f2f6f5]/95'"
role="status"
aria-live="polite"
>
<div class="mx-auto flex max-w-6xl flex-wrap items-center justify-between gap-3">
<p class="text-sm font-medium" :class="isDirty ? 'text-amber-600 dark:text-amber-300' : isDarkMode ? 'text-gray-300' : 'text-[#415d66]'">
{{ isDirty ? t('manage.settings.unsavedChanges') : t('manage.settings.allChangesSaved') }}
</p>
<div class="flex items-center gap-2">
<BaseButton
variant="secondary"
:loading="isRefreshing"
:disabled="isSaving || isDirty"
@click="refreshConfig"
>
{{ t('manage.settings.reloadSaved') }}
</BaseButton>
<BaseButton :loading="isSaving" :disabled="!isDirty || isRefreshing" @click="submitConfig">
<template #icon><SaveIcon class="mr-2 h-4 w-4" /></template>
{{ isSaving ? t('manage.settings.saving') : t('manage.settings.saveChanges') }}
</BaseButton>
</div>
</div>
</div>
</div>
</template>
<style scoped>