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/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 = {