From 43957f6547e823a36170c651194dc560332ff0f1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=8E=E7=90=A6?= Date: Mon, 3 Aug 2026 13:21:22 +0800 Subject: [PATCH] =?UTF-8?q?1.=20=E7=A4=BC=E7=89=A9=E7=89=B9=E6=95=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/views/admin/AdminEditor.vue | 316 +++++++++++++++--- .../src/views/admin/AdminLogin.vue | 4 +- 2 files changed, 270 insertions(+), 50 deletions(-) diff --git a/vite-tailwindcss/src/views/admin/AdminEditor.vue b/vite-tailwindcss/src/views/admin/AdminEditor.vue index 3633c3f..3249c80 100644 --- a/vite-tailwindcss/src/views/admin/AdminEditor.vue +++ b/vite-tailwindcss/src/views/admin/AdminEditor.vue @@ -1,15 +1,23 @@ - + - +
@@ -957,10 +989,10 @@
- +
- +
@@ -991,10 +1023,10 @@
- +
- +
@@ -1053,8 +1085,8 @@
- - +
+ @@ -1090,9 +1122,56 @@ const router = useRouter() const adminStore = useAdminStore() const TAB_KEY = 'wedding_admin_active_tab' +const MENU_LAYOUT_KEY = 'wedding_admin_menu_layout' const CONFIG_SECTIONS = ['basic', 'copy', 'visual', 'music', 'photos', 'schedule'] const VALID_TABS = ['overview', 'gifts', 'visits', ...CONFIG_SECTIONS, 'upload', 'poster', 'rsvp', 'danmaku'] +/** 后台菜单分组 */ +const adminMenuGroups = [ + { + key: 'data', + label: '数据看板', + items: [ + { key: 'overview', label: '概览', icon: 'fa-solid fa-chart-pie' }, + { key: 'visits', label: '访客记录', icon: 'fa-solid fa-users' }, + { key: 'gifts', label: '礼物', icon: 'fa-solid fa-gift' }, + ], + }, + { + key: 'content', + label: '请柬内容', + items: [ + { key: 'basic', label: '基础信息', icon: 'fa-solid fa-heart' }, + { key: 'copy', label: '邀请文案', icon: 'fa-solid fa-pen-fancy' }, + { key: 'visual', label: '视觉动效', icon: 'fa-solid fa-wand-magic-sparkles' }, + { key: 'music', label: '背景音乐', icon: 'fa-solid fa-music' }, + { key: 'photos', label: '相册页', icon: 'fa-solid fa-images' }, + { key: 'schedule', label: '婚礼流程', icon: 'fa-solid fa-list-ol' }, + ], + }, + { + key: 'interact', + label: '宾客互动', + items: [ + { key: 'rsvp', label: '出席回执', icon: 'fa-solid fa-envelope-open-text' }, + { key: 'danmaku', label: '弹幕审核', icon: 'fa-solid fa-comments' }, + ], + }, + { + key: 'system', + label: '海报与系统', + items: [ + { key: 'poster', label: '海报', icon: 'fa-solid fa-scroll' }, + { key: 'upload', label: '上传设置', icon: 'fa-solid fa-cloud-arrow-up' }, + ], + }, +] + +const menuLayoutOptions = [ + { value: 'top', label: '顶部菜单' }, + { value: 'side', label: '侧边菜单' }, +] + const SECTION_KEYS = { basic: ['groom', 'bride', 'date', 'lunar', 'calendarDate', 'hotel', 'address', 'heroImg', 'endImg'], copy: ['formalText1', 'formalText2', 'formalPageHeight'], @@ -1113,7 +1192,19 @@ function readStoredTab() { return 'overview' } +function readStoredMenuLayout() { + try { + const v = localStorage.getItem(MENU_LAYOUT_KEY) + if (v === 'top' || v === 'side') return v + } catch { /* ignore */ } + return 'side' +} + const activeTab = ref(readStoredTab()) +const menuLayout = ref(readStoredMenuLayout()) +watch(menuLayout, (v) => { + try { localStorage.setItem(MENU_LAYOUT_KEY, v) } catch { /* ignore */ } +}) const activePhotoTab = ref('0') const saving = ref(false) const uploading = ref(false) @@ -2154,9 +2245,138 @@ onUnmounted(() => { white-space: pre-line; word-break: break-all; } -.admin-tabs :deep(.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) { color: #a88c6b; } -.admin-tabs :deep(.ant-tabs-ink-bar) { background: #a88c6b; } -.admin-tabs :deep(.ant-tabs-tab:hover .ant-tabs-tab-btn) { color: #967b5c; } +.admin-layout-seg :deep(.ant-segmented-item-selected) { + color: #a88c6b; +} +.admin-shell { + margin: 0 auto; + padding: 20px 16px 40px; + box-sizing: border-box; +} +.admin-shell--top { + max-width: 1040px; +} +.admin-shell--side { + max-width: 1220px; + display: flex; + align-items: flex-start; + gap: 18px; +} +.admin-nav { + background: #fff; + border: 1px solid rgba(168, 140, 107, 0.14); + border-radius: 16px; + box-shadow: 0 8px 28px rgba(88, 68, 42, 0.05); +} +.admin-shell--top .admin-nav { + display: flex; + flex-wrap: wrap; + gap: 10px 18px; + padding: 14px 16px 12px; + margin-bottom: 16px; +} +.admin-shell--side .admin-nav { + position: sticky; + top: 68px; + width: 212px; + flex-shrink: 0; + padding: 14px 10px 16px; + max-height: calc(100dvh - 88px); + overflow: auto; +} +.admin-nav-group-title { + font-size: 11px; + letter-spacing: 0.12em; + color: #8A8680; + margin-bottom: 6px; + padding: 0 6px; +} +.admin-shell--top .admin-nav-group { + min-width: 0; +} +.admin-shell--side .admin-nav-group + .admin-nav-group { + margin-top: 14px; + padding-top: 12px; + border-top: 1px dashed rgba(168, 140, 107, 0.22); +} +.admin-nav-items { + display: flex; + flex-wrap: wrap; + gap: 6px; +} +.admin-shell--side .admin-nav-items { + flex-direction: column; + flex-wrap: nowrap; +} +.admin-nav-item { + display: inline-flex; + align-items: center; + gap: 8px; + border: 1px solid transparent; + background: transparent; + color: #5c5348; + font-size: 13px; + line-height: 1.2; + padding: 7px 10px; + border-radius: 10px; + cursor: pointer; + transition: background 0.15s, color 0.15s, border-color 0.15s; + text-align: left; +} +.admin-shell--side .admin-nav-item { + width: 100%; +} +.admin-nav-item:hover { + background: rgba(168, 140, 107, 0.08); + color: #967b5c; +} +.admin-nav-item.active { + background: rgba(168, 140, 107, 0.14); + border-color: rgba(168, 140, 107, 0.28); + color: #a88c6b; + font-weight: 500; +} +.admin-nav-icon { + width: 1em; + text-align: center; + font-size: 12px; + opacity: 0.85; +} +.admin-nav-credit { + margin-top: 14px; + padding: 10px 8px 2px; + border-top: 1px dashed rgba(168, 140, 107, 0.22); + font-size: 11px; + letter-spacing: 0.08em; + color: #a88c6b; + text-align: center; +} +.admin-shell--top .admin-nav-credit { + width: 100%; + margin-top: 4px; + padding-top: 10px; +} +.admin-main { + min-width: 0; + flex: 1; +} +@media (max-width: 860px) { + .admin-shell--side { + flex-direction: column; + } + .admin-shell--side .admin-nav { + position: static; + width: 100%; + max-height: none; + } + .admin-shell--side .admin-nav-items { + flex-direction: row; + flex-wrap: wrap; + } + .admin-shell--side .admin-nav-item { + width: auto; + } +} .admin-panel { background: #fff; diff --git a/vite-tailwindcss/src/views/admin/AdminLogin.vue b/vite-tailwindcss/src/views/admin/AdminLogin.vue index 29e042b..117c6cc 100644 --- a/vite-tailwindcss/src/views/admin/AdminLogin.vue +++ b/vite-tailwindcss/src/views/admin/AdminLogin.vue @@ -9,8 +9,8 @@
❀
-

婚礼纪 · 后台

-

Admin Console

+

婚礼邀请函 · 后台

+

制作者 · 年糕崽崽