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

Create 2026 admin theme interactions

Browse Source
This commit is contained in:
Orion
2026-06-05 12:17:46 +08:00
parent 17dc587555
commit f37f321d64
10 changed files with 240 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/manage/DashboardView.vue
+28 -24
View File
@@ -86,7 +86,7 @@
<div v-if="dashboardData.hasExtendedStats" class="mt-6 grid grid-cols-1 gap-6 xl:grid-cols-3">
<section
class="rounded-[30px] p-5 shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:shadow-lg xl:col-span-2"
class="theme-2026-card theme-2026-card-hover rounded-[30px] p-5 shadow-md transition-all duration-200 hover:-translate-y-0.5 hover:shadow-lg xl:col-span-2"
:class="[panelClass, cardHoverClass]"
>
<div class="mb-5 flex items-center justify-between">
@@ -130,7 +130,7 @@
v-for="action in healthActions"
:key="action.key"
type="button"
class="group flex min-h-28 flex-col justify-between rounded-[30px] border p-4 text-left transition-colors"
class="theme-2026-card-hover group flex min-h-28 flex-col justify-between rounded-[30px] border p-4 text-left shadow-md transition-all duration-200 hover:-translate-y-0.5 hover:shadow-lg"
:class="getHealthActionClass(action.tone)"
@click="openHealthQueue(action.health)"
>
@@ -152,7 +152,7 @@
<div class="mt-6 grid grid-cols-1 gap-4 md:grid-cols-2">
<div
class="rounded-[30px] border p-4 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md"
class="theme-2026-card-hover rounded-[30px] border p-4 shadow-md transition-all duration-200 hover:-translate-y-0.5 hover:shadow-lg"
:class="[subtlePanelClass, cardHoverClass]"
>
<p class="text-sm" :class="[mutedTextClass]">
@@ -169,7 +169,7 @@
</div>
<div
class="rounded-[30px] border p-4 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md"
class="theme-2026-card-hover rounded-[30px] border p-4 shadow-md transition-all duration-200 hover:-translate-y-0.5 hover:shadow-lg"
:class="[subtlePanelClass, cardHoverClass]"
>
<p class="text-sm" :class="[mutedTextClass]">
@@ -188,7 +188,7 @@
</section>
<section
class="rounded-[30px] p-5 shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:shadow-lg"
class="theme-2026-card theme-2026-card-hover rounded-[30px] p-5 shadow-md transition-all duration-200 hover:-translate-y-0.5 hover:shadow-lg"
:class="[panelClass, cardHoverClass]"
>
<div class="mb-5">
@@ -236,7 +236,7 @@
<div class="mt-6 grid grid-cols-1 gap-6 xl:grid-cols-2">
<section
class="rounded-[30px] p-5 shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:shadow-lg"
class="theme-2026-card theme-2026-card-hover rounded-[30px] p-5 shadow-md transition-all duration-200 hover:-translate-y-0.5 hover:shadow-lg"
:class="[panelClass, cardHoverClass]"
>
<div class="mb-5 flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
@@ -313,7 +313,7 @@
</section>
<section
class="rounded-[30px] p-5 shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:shadow-lg"
class="theme-2026-card theme-2026-card-hover rounded-[30px] p-5 shadow-md transition-all duration-200 hover:-translate-y-0.5 hover:shadow-lg"
:class="[panelClass, cardHoverClass]"
>
<div class="mb-5 flex items-center justify-between">
@@ -456,25 +456,29 @@ const primaryTextClass = computed(() => (isDarkMode.value ? 'text-white' : 'text
const mutedTextClass = computed(() => (isDarkMode.value ? 'text-gray-400' : 'text-gray-500'))
const versionText = computed(() => appVersion.value || t('admin.dashboard.versionPending'))
const panelClass = computed(() =>
isDarkMode.value ? 'bg-gray-800/80 border border-gray-700' : 'bg-white border border-gray-100'
isDarkMode.value
? 'bg-[#202f36]/90 border border-[#40545c]'
: 'bg-[#f8fbfb] border border-[#d7e3e5]'
)
const fieldClass = computed(() =>
isDarkMode.value
? 'border-gray-600 bg-gray-700 text-white'
: 'border-gray-300 bg-white text-gray-900'
? 'border-[#50666f] bg-[#253941] text-white'
: 'border-[#c8d8dc] bg-[#fbfdfd] text-[#263f48]'
)
const detailActionClass = computed(() =>
isDarkMode.value
? 'border-gray-700 bg-gray-700/50 text-gray-300 hover:border-gray-600 hover:bg-gray-700'
: 'border-gray-200 bg-white text-gray-700 hover:border-gray-300 hover:bg-gray-50'
? 'border-[#3f535c] bg-[#263941]/70 text-[#d8e3e5] hover:border-[#7199a8] hover:bg-[#2d4751]'
: 'border-[#c9d9dd] bg-[#fbfdfd] text-[#36515b] hover:border-[#8fb2bf] hover:bg-[#edf5f6]'
)
const subtlePanelClass = computed(() =>
isDarkMode.value ? 'border-gray-700 bg-gray-900/30' : 'border-gray-100 bg-gray-50'
isDarkMode.value
? 'border-[#3d5159] bg-[#17252c]/50'
: 'border-[#d4e0e3] bg-[linear-gradient(135deg,#f7faf9,#eaf3f4)]'
)
const cardHoverClass = computed(() =>
isDarkMode.value
? 'hover:border-indigo-500/40 hover:bg-gray-800 hover:shadow-black/20'
: 'hover:border-indigo-200 hover:shadow-gray-200/80'
? 'hover:border-[#7199a8] hover:bg-[#263941] hover:shadow-black/25'
: 'hover:border-[#8fb2bf] hover:shadow-[#a9bdc2]/70'
)
const maxSaveTimeText = computed(() => {
if (!dashboardData.maxSaveSeconds) return t('admin.dashboard.noSaveLimit')
@@ -582,16 +586,16 @@ const getHealthActionIcon = (tone: DashboardHealthAction['tone']) => healthActio
const getHealthActionClass = (tone: DashboardHealthAction['tone']) => {
const darkClasses: Record<DashboardHealthAction['tone'], string> = {
danger: 'border-red-500/20 bg-red-500/10 text-red-200 hover:border-red-400/40',
warning: 'border-amber-500/20 bg-amber-500/10 text-amber-200 hover:border-amber-400/40',
success: 'border-emerald-500/20 bg-emerald-500/10 text-emerald-200 hover:border-emerald-400/40',
neutral: 'border-gray-700 bg-gray-900/30 text-gray-300 hover:border-gray-600'
danger: 'border-[#7c5f64]/40 bg-[#5f383f]/24 text-[#f0d8dc] hover:border-[#b1878f]',
warning: 'border-[#8b7a57]/40 bg-[#665733]/24 text-[#efe3c6] hover:border-[#b8a775]',
success: 'border-[#58766d]/40 bg-[#31564f]/24 text-[#d2e7df] hover:border-[#7fa69a]',
neutral: 'border-[#40545c] bg-[#17252c]/50 text-[#d8e3e5] hover:border-[#7199a8]'
}
const lightClasses: Record<DashboardHealthAction['tone'], string> = {
danger: 'border-red-100 bg-red-50 text-red-700 hover:border-red-200',
warning: 'border-amber-100 bg-amber-50 text-amber-700 hover:border-amber-200',
success: 'border-emerald-100 bg-emerald-50 text-emerald-700 hover:border-emerald-200',
neutral: 'border-gray-100 bg-gray-50 text-gray-700 hover:border-gray-200'
danger: 'border-[#ead8dc] bg-[#f7ecee] text-[#8b5962] hover:border-[#d8b8bf]',
warning: 'border-[#e8dfc9] bg-[#f4efdf] text-[#806f44] hover:border-[#d4c28e]',
success: 'border-[#d6e5de] bg-[#edf5f1] text-[#4f746a] hover:border-[#aecfc3]',
neutral: 'border-[#d4e0e3] bg-[#f5faf9] text-[#496670] hover:border-[#9fbdc6]'
}
return isDarkMode.value ? darkClasses[tone] : lightClasses[tone]
@@ -630,7 +634,7 @@ const MetricProgress = defineComponent({
'div',
{
class:
'rounded-[30px] border border-gray-200/60 p-4 transition-all duration-200 hover:-translate-y-0.5 hover:border-indigo-200 hover:shadow-md hover:shadow-gray-200/80 dark:border-gray-700 dark:hover:border-indigo-500/40 dark:hover:bg-gray-800 dark:hover:shadow-black/20'
'theme-2026-card-hover rounded-[30px] border border-[#d4e0e3] bg-[#f6faf9] p-4 shadow-md transition-all duration-200 hover:-translate-y-0.5 hover:border-[#8fb2bf] hover:shadow-lg hover:shadow-[#a9bdc2]/60 dark:border-[#40545c] dark:bg-[#17252c]/50 dark:hover:border-[#7199a8] dark:hover:bg-[#263941] dark:hover:shadow-black/25'
},
[
h('div', { class: 'mb-2 flex items-center justify-between text-sm' }, [
src/views/manage/FileManageView.vue
+35 -24
View File
@@ -34,7 +34,7 @@
<div
v-for="card in summaryCards"
:key="card.label"
class="group rounded-lg border p-4 transition-all duration-200 hover:-translate-y-0.5 hover:shadow-lg"
class="theme-2026-card theme-2026-card-hover group rounded-[30px] border p-4 shadow-md transition-all duration-200 hover:-translate-y-0.5 hover:shadow-lg"
:class="[panelClass, cardHoverClass]"
>
<div class="flex items-start justify-between gap-3">
@@ -54,7 +54,10 @@
</div>
</div>
<section class="mb-6 rounded-lg border p-4" :class="[panelClass]">
<section
class="theme-2026-card theme-2026-card-hover mb-6 rounded-[30px] border p-4 shadow-md transition-all duration-200 hover:-translate-y-0.5 hover:shadow-lg"
:class="[panelClass, cardHoverClass]"
>
<div class="flex items-center justify-between gap-3">
<div>
<h3 class="text-base font-semibold" :class="[primaryTextClass]">条件筛选</h3>
@@ -260,8 +263,8 @@
<section
v-if="tableData.length > 0"
class="mb-4 flex flex-col gap-3 rounded-lg border px-4 py-3 sm:flex-row sm:items-center sm:justify-between"
:class="[panelClass]"
class="theme-2026-card theme-2026-card-hover mb-4 flex flex-col gap-3 rounded-[30px] border px-4 py-3 shadow-md transition-all duration-200 hover:-translate-y-0.5 hover:shadow-lg sm:flex-row sm:items-center sm:justify-between"
:class="[panelClass, cardHoverClass]"
>
<label class="inline-flex items-center gap-2 text-sm" :class="[primaryTextClass]">
<input
@@ -579,7 +582,10 @@
</template>
</DataTable>
<section class="mt-6 rounded-lg border p-4" :class="[panelClass]">
<section
class="theme-2026-card theme-2026-card-hover mt-6 rounded-[30px] border p-4 shadow-md transition-all duration-200 hover:-translate-y-0.5 hover:shadow-lg"
:class="[panelClass, cardHoverClass]"
>
<div class="mb-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
<div>
<h3 class="text-lg font-semibold" :class="[primaryTextClass]">历史文件</h3>
@@ -794,7 +800,7 @@
</div>
<div
class="rounded-lg border px-4 py-3"
class="theme-2026-card-hover rounded-[30px] border px-4 py-3 shadow-md transition-all duration-200 hover:-translate-y-0.5 hover:shadow-lg"
:class="[isDarkMode ? 'border-gray-700 bg-gray-700/30' : 'border-gray-200 bg-gray-50']"
>
<div class="grid gap-3 lg:grid-cols-[minmax(0,1fr)_auto] lg:items-center">
@@ -866,7 +872,10 @@
</button>
</div>
<section class="space-y-3 rounded-lg border px-4 py-4" :class="[subtleSectionClass]">
<section
class="theme-2026-card-hover space-y-3 rounded-[30px] border px-4 py-4 shadow-md transition-all duration-200 hover:-translate-y-0.5 hover:shadow-lg"
:class="[subtleSectionClass, cardHoverClass]"
>
<div class="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
<div>
<h4 class="text-sm font-semibold" :class="[primaryTextClass]">
@@ -928,7 +937,7 @@
</section>
<section
class="rounded-lg border px-4 py-4"
class="theme-2026-card-hover rounded-[30px] border px-4 py-4 shadow-md transition-all duration-200 hover:-translate-y-0.5 hover:shadow-lg"
:class="getInsightPanelClass(selectedFileDetail.statusInsightSeverity)"
>
<div class="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
@@ -970,7 +979,7 @@
type="button"
class="flex min-h-16 items-start gap-2 rounded-lg border px-3 py-2 text-left transition-colors disabled:cursor-not-allowed disabled:opacity-60"
:class="detailPolicyActionClass"
:disabled="isDetailPolicyActionRunning || isDetailLoading"
:disabled="isDetailPolicyActionRunning || isDetailLoading || action.disabled"
:title="action.description"
@click="applyDetailPolicyAction(action.action)"
>
@@ -1001,7 +1010,7 @@
<div
v-for="item in detailOverviewItems"
:key="item.label"
class="rounded-lg border px-4 py-3"
class="theme-2026-card-hover rounded-[30px] border px-4 py-3 shadow-md transition-all duration-200 hover:-translate-y-0.5 hover:shadow-lg"
:class="[isDarkMode ? 'border-gray-700 bg-gray-700/30' : 'border-gray-200 bg-white']"
>
<p class="text-xs" :class="[mutedTextClass]">{{ item.label }}</p>
@@ -1020,7 +1029,7 @@
<div
v-for="item in detailPolicyItems"
:key="item.label"
class="rounded-lg border px-4 py-3"
class="theme-2026-card-hover rounded-[30px] border px-4 py-3 shadow-md transition-all duration-200 hover:-translate-y-0.5 hover:shadow-lg"
:class="[isDarkMode ? 'border-gray-700 bg-gray-700/30' : 'border-gray-200 bg-white']"
>
<p class="text-xs" :class="[mutedTextClass]">{{ item.label }}</p>
@@ -1036,7 +1045,7 @@
{{ t('fileManage.lifecycle') }}
</h4>
<div
class="rounded-lg border px-4 py-4"
class="rounded-[30px] border px-4 py-4 shadow-md"
:class="[isDarkMode ? 'border-gray-700 bg-gray-700/30' : 'border-gray-200 bg-white']"
>
<div
@@ -1056,7 +1065,7 @@
/>
</div>
<div
class="mb-3 rounded-lg border px-3 py-2 last:mb-0"
class="theme-2026-card-hover mb-3 rounded-[30px] border px-3 py-2 shadow-sm transition-all duration-200 hover:-translate-y-0.5 hover:shadow-md last:mb-0"
:class="[
isDarkMode ? 'border-gray-700 bg-gray-800/60' : 'border-gray-100 bg-gray-50'
]"
@@ -1085,7 +1094,7 @@
<div
v-for="item in detailStorageItems"
:key="item.label"
class="grid gap-1 rounded-lg border px-4 py-3 sm:grid-cols-[160px_minmax(0,1fr)] sm:items-center"
class="theme-2026-card-hover grid gap-1 rounded-[30px] border px-4 py-3 shadow-md transition-all duration-200 hover:-translate-y-0.5 hover:shadow-lg sm:grid-cols-[160px_minmax(0,1fr)] sm:items-center"
:class="[isDarkMode ? 'border-gray-700 bg-gray-700/30' : 'border-gray-200 bg-white']"
>
<p class="text-xs" :class="[mutedTextClass]">{{ item.label }}</p>
@@ -1509,30 +1518,32 @@ const formatHistoryDate = (value?: string) => (value ? formatTimestamp(value) :
const primaryTextClass = computed(() => (isDarkMode.value ? 'text-white' : 'text-gray-900'))
const mutedTextClass = computed(() => (isDarkMode.value ? 'text-gray-400' : 'text-gray-500'))
const panelClass = computed(() =>
isDarkMode.value ? 'border-gray-700 bg-gray-800/80' : 'border-gray-100 bg-white'
isDarkMode.value
? 'border-[#40545c] bg-[#202f36]/90'
: 'border-[#d7e3e5] bg-[#f8fbfb]'
)
const fieldClass = computed(() =>
isDarkMode.value
? 'border-gray-600 bg-gray-700 text-white'
: 'border-gray-300 bg-white text-gray-900'
? 'border-[#50666f] bg-[#253941] text-white'
: 'border-[#c8d8dc] bg-[#fbfdfd] text-[#263f48]'
)
const detailActionClass = computed(() =>
isDarkMode.value
? 'border-gray-700 bg-gray-700/50 text-gray-300 hover:border-gray-600 hover:bg-gray-700'
: 'border-gray-200 bg-white text-gray-700 hover:border-gray-300 hover:bg-gray-50'
? 'border-[#3f535c] bg-[#263941]/70 text-[#d8e3e5] hover:border-[#7199a8] hover:bg-[#2d4751]'
: 'border-[#c9d9dd] bg-[#fbfdfd] text-[#36515b] hover:border-[#8fb2bf] hover:bg-[#edf5f6]'
)
const cardHoverClass = computed(() =>
isDarkMode.value
? 'hover:border-indigo-500/40 hover:bg-gray-800 hover:shadow-black/20'
: 'hover:border-indigo-200 hover:shadow-gray-200/80'
? 'hover:border-[#7199a8] hover:bg-[#263941] hover:shadow-black/25'
: 'hover:border-[#8fb2bf] hover:shadow-[#a9bdc2]/70'
)
const detailPolicyActionClass = computed(() =>
isDarkMode.value
? 'border-gray-700 bg-gray-800/70 text-gray-200 hover:border-blue-500/40 hover:bg-blue-500/10'
: 'border-gray-200 bg-white text-gray-700 hover:border-blue-200 hover:bg-blue-50'
? 'border-[#40545c] bg-[#203039]/80 text-[#d8e3e5] hover:border-[#7199a8] hover:bg-[#263941]'
: 'border-[#c9d9dd] bg-[#fbfdfd] text-[#36515b] hover:border-[#8fb2bf] hover:bg-[#edf5f6]'
)
const subtleSectionClass = computed(() =>
isDarkMode.value ? 'border-gray-700 bg-gray-900/30' : 'border-gray-200 bg-gray-50'
isDarkMode.value ? 'border-[#40545c] bg-[#17252c]/50' : 'border-[#d7e3e5] bg-[#f3f8f8]'
)
type DetailInfoItem = {