diff --git a/nginx/default.conf.template b/nginx/default.conf.template index 2ae3e079..6ab77528 100644 --- a/nginx/default.conf.template +++ b/nginx/default.conf.template @@ -22,8 +22,24 @@ server { proxy_set_header X-Forwarded-Proto $scheme; } + # HTML must be revalidated on every visit so a new deployment cannot keep + # referencing hashed chunks that were removed with the previous image. + location = /index.html { + add_header Cache-Control "no-cache, no-store, must-revalidate" always; + add_header Pragma "no-cache" always; + add_header Expires "0" always; + } + + # Vite assets are content-hashed and safe to cache permanently. Missing + # chunks must remain a real 404 instead of falling back to index.html. + location /assets/ { + try_files $uri =404; + add_header Cache-Control "public, max-age=31536000, immutable" always; + } + # Vue Router 的 history 路由刷新时仍返回 index.html。 location / { try_files $uri $uri/ /index.html; + add_header Cache-Control "no-cache" always; } } diff --git a/src/components/AdminSidebarMenu.vue b/src/components/AdminSidebarMenu.vue index 86d121b0..bf254295 100644 --- a/src/components/AdminSidebarMenu.vue +++ b/src/components/AdminSidebarMenu.vue @@ -26,6 +26,6 @@ const defaultOpeneds = computed(() => getGroupKeys(props.items)) :default-openeds="defaultOpeneds" router > - + diff --git a/src/components/AdminSidebarMenuNode.vue b/src/components/AdminSidebarMenuNode.vue index 548c7044..ec2f3162 100644 --- a/src/components/AdminSidebarMenuNode.vue +++ b/src/components/AdminSidebarMenuNode.vue @@ -5,21 +5,36 @@ defineOptions({ name: 'AdminSidebarMenuNode' }) defineProps<{ node: AdminNavigationNode + level?: number }>() diff --git a/src/deployment/nginxConfig.test.ts b/src/deployment/nginxConfig.test.ts new file mode 100644 index 00000000..4517b6b7 --- /dev/null +++ b/src/deployment/nginxConfig.test.ts @@ -0,0 +1,23 @@ +import { readFileSync } from 'node:fs' +import { resolve } from 'node:path' +import { describe, expect, it } from 'vitest' + +const config = readFileSync(resolve(process.cwd(), 'nginx/default.conf.template'), 'utf8') + +describe('admin nginx deployment config', () => { + it('prevents the application shell from retaining stale chunk references', () => { + expect(config).toContain('location = /index.html') + expect(config).toContain('Cache-Control "no-cache, no-store, must-revalidate"') + }) + + it('serves hashed assets immutably and never falls back missing chunks to HTML', () => { + expect(config).toContain('location /assets/') + expect(config).toContain('try_files $uri =404;') + expect(config).toContain('Cache-Control "public, max-age=31536000, immutable"') + }) + + it('keeps Vue history routes on the application shell without caching them', () => { + expect(config).toContain('try_files $uri $uri/ /index.html;') + expect(config).toContain('Cache-Control "no-cache"') + }) +}) diff --git a/src/layouts/AppLayout.vue b/src/layouts/AppLayout.vue index 2000aba9..5fb76200 100644 --- a/src/layouts/AppLayout.vue +++ b/src/layouts/AppLayout.vue @@ -2,7 +2,7 @@ import { computed, ref, watch } from 'vue' import { useRoute, useRouter } from 'vue-router' import { ElMessage, ElMessageBox } from 'element-plus' -import { ChevronLeft, ChevronRight, LogOut, Menu } from '@lucide/vue' +import { LogOut, Menu } from '@lucide/vue' import { getApiErrorDetails } from '@/api/http' import baiyueLogoWhite from '@/assets/brand/baiyue-logo-white.png' import baiyueMarkWhite from '@/assets/brand/baiyue-mark-white.png' @@ -51,6 +51,14 @@ async function handleLogout() { } } +function handleMenuToggle() { + if (window.matchMedia('(max-width: 720px)').matches) { + mobileMenuOpen.value = !mobileMenuOpen.value + return + } + collapsed.value = !collapsed.value +} + watch(() => route.fullPath, () => { mobileMenuOpen.value = false }) @@ -65,16 +73,17 @@ watch(() => route.fullPath, () => { mobileMenuOpen.value = false }) -
- +

{{ pageTitle }}

{{ pageDescription }}

{{ auth.user?.name.slice(0, 1) }}
diff --git a/src/navigation/adminNavigation.ts b/src/navigation/adminNavigation.ts index 7af24ee6..e38385b2 100644 --- a/src/navigation/adminNavigation.ts +++ b/src/navigation/adminNavigation.ts @@ -17,6 +17,7 @@ export interface AdminNavigationNode { key: string title: string icon: Component + iconColor?: string path?: string permission?: string /** Set to true to remove a prototype module from the sidebar without deleting its route. */ @@ -37,6 +38,7 @@ export const adminNavigation: AdminNavigationNode[] = [ key: 'customers', title: '客户管理', icon: Building2, + iconColor: '#52c41a', children: [ { key: 'customers-list', title: '客户列表', icon: Building2, path: '/customers', permission: 'platform:customer:list' }, { key: 'enterprise-reviews', title: '企业审核', icon: FileCheck2, path: '/customers/reviews', permission: 'platform:customer:review' }, @@ -47,6 +49,7 @@ export const adminNavigation: AdminNavigationNode[] = [ key: 'domestic-warehouse', title: '国内仓', icon: WarehouseIcon, + iconColor: '#52c41a', children: [ { key: 'warehouses', title: '仓库管理', icon: WarehouseIcon, path: '/warehouses', permission: 'platform:warehouse:list' }, // { key: 'inbound-list', title: '入库单列表', icon: ClipboardList, path: '/prototype/domestic-warehouse/inbound-list' }, @@ -61,6 +64,7 @@ export const adminNavigation: AdminNavigationNode[] = [ key: 'first-leg-orders', title: '头程订单', icon: ClipboardList, + iconColor: '#1890ff', path: '/orders/first-leg', permission: 'platform:order:list', }, @@ -187,6 +191,7 @@ export const adminNavigation: AdminNavigationNode[] = [ key: 'general', title: '通用', icon: Database, + iconColor: '#722ed1', children: [ // { key: 'general-product', title: '产品信息', icon: Database, path: '/prototype/general/product-information' }, // { key: 'general-fee', title: '费用项目', icon: Database, path: '/prototype/general/fee-items' }, @@ -222,6 +227,7 @@ export const adminNavigation: AdminNavigationNode[] = [ key: 'system', title: '系统管理', icon: Settings, + iconColor: '#8c8c8c', children: [ { key: 'internal-users', title: '用户管理', icon: Users, path: '/system/users', permission: 'platform:user:list' }, { key: 'roles', title: '角色权限', icon: ShieldCheck, path: '/system/roles', permission: 'platform:role:list' }, diff --git a/src/styles/foundation.css b/src/styles/foundation.css index 240a407a..727b57d7 100644 --- a/src/styles/foundation.css +++ b/src/styles/foundation.css @@ -3,8 +3,10 @@ color: #172033; background: #f4f6f8; font-synthesis: none; - --cc-primary: #155eef; - --cc-navy: #172a46; + --cc-primary: #667eea; + --cc-navy: #667eea; + --cc-topbar: rgba(102, 126, 234, .95); + --cc-menu-active: #667eea; --cc-border: #e3e8ef; --cc-muted: #667085; } diff --git a/src/styles/index.css b/src/styles/index.css index 6bf1e50c..80195a0b 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -218,7 +218,6 @@ .sidebar-toggle { display: none; } .sidebar-scrim { position: fixed; inset: 0 0 0 min(280px, 86vw); z-index: 19; display: block; border: 0; background: rgba(15, 23, 42, .46); } .app-main, .is-collapsed .app-main { margin-left: 0; } - .mobile-menu-button { display: inline-grid; place-items: center; } .app-header > .el-dropdown { width: 44px; max-width: 44px; flex: 0 0 44px; } .role-preview-trigger { width: 44px; height: 44px; justify-content: center; padding: 0; } .role-preview-copy, .role-preview-trigger > svg:last-child { display: none; } @@ -271,7 +270,7 @@ @media (max-width: 360px) { .app-header { gap: 6px; padding: 8px; } .page-heading h1 { max-width: 100%; font-size: 17px; } - .mobile-menu-button, .role-preview-trigger, .header-user .el-button { min-width: 44px; min-height: 44px; } + .shell-menu-button, .role-preview-trigger, .header-user .el-button { min-width: 44px; min-height: 44px; } .page-container { padding: 14px 8px 24px; } .forbidden-page { padding-right: 14px; padding-left: 14px; } } diff --git a/src/styles/shell.css b/src/styles/shell.css index 481bf3be..e0e7648f 100644 --- a/src/styles/shell.css +++ b/src/styles/shell.css @@ -1,9 +1,9 @@ .app-shell { min-width: 0; min-height: 100vh; } -.app-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 20; display: flex; width: 240px; flex-direction: column; background: var(--cc-navy); color: #fff; } +.app-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 20; display: flex; width: 240px; flex-direction: column; background: rgba(255,255,255,.96); color: #52525b; box-shadow: 4px 0 32px rgba(0,0,0,.08); } .is-collapsed .app-sidebar { width: 76px; } -.brand-block { display: flex; height: 72px; align-items: center; padding: 0 18px; border-bottom: 1px solid rgba(255,255,255,.1); } +.brand-block { display: flex; height: 64px; flex: 0 0 64px; align-items: center; padding: 0 18px; background: var(--cc-topbar); } .brand-logo { display: block; object-fit: contain; object-position: left center; } -.brand-logo-full { width: 184px; height: 58px; } +.brand-logo-full { width: 184px; height: 50px; } .brand-logo-mark { display: none; width: 40px; height: 40px; } .is-collapsed .brand-logo-full { display: none; } .is-collapsed .brand-logo-mark { display: block; } @@ -11,15 +11,15 @@ flex: 1; min-height: 0; overflow-y: auto; - padding: 14px 10px; - scrollbar-color: rgba(203, 214, 230, .5) transparent; + padding: 12px 8px; + scrollbar-color: rgba(102, 126, 234, .28) transparent; scrollbar-width: thin; } .side-nav::-webkit-scrollbar { width: 10px; } .side-nav::-webkit-scrollbar-track, .side-nav::-webkit-scrollbar-corner { background: transparent; } -.side-nav::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 999px; background: rgba(203, 214, 230, .5); background-clip: padding-box; } -.side-nav::-webkit-scrollbar-thumb:hover { background-color: rgba(225, 233, 244, .78); } +.side-nav::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 999px; background: rgba(102, 126, 234, .28); background-clip: padding-box; } +.side-nav::-webkit-scrollbar-thumb:hover { background-color: rgba(102, 126, 234, .46); } .side-nav::-webkit-scrollbar-button, .side-nav::-webkit-scrollbar-button:single-button, .side-nav::-webkit-scrollbar-button:vertical:decrement, @@ -29,33 +29,38 @@ border-right: 0 !important; background: transparent !important; --el-menu-bg-color: transparent; - --el-menu-text-color: #bdc7d7; - --el-menu-active-color: var(--cc-navy); - --el-menu-hover-bg-color: rgba(255,255,255,.08); + --el-menu-text-color: #52525b; + --el-menu-active-color: var(--cc-menu-active); + --el-menu-hover-bg-color: rgba(102,126,234,.08); } .side-nav-menu.el-menu--collapse { width: 56px; } .side-nav-menu .el-menu-item, -.side-nav-menu .el-sub-menu__title { height: 44px; margin: 3px 0; border-radius: 8px; line-height: 44px; } +.side-nav-menu .el-sub-menu__title { height: 46px; margin: 2px 0; border-radius: 0 12px 12px 0; line-height: 46px; transition: color .2s ease, background .2s ease, transform .2s ease; } .side-nav-menu .el-menu-item:hover, -.side-nav-menu .el-sub-menu__title:hover { color: #fff; } -.side-nav-menu .el-menu-item.is-active { background: #fff; color: var(--cc-navy); font-weight: 650; } -.side-nav-menu .el-sub-menu .el-menu-item { min-width: 0; padding-left: 48px !important; } +.side-nav-menu .el-sub-menu__title:hover { color: var(--cc-menu-active); background: linear-gradient(135deg, rgba(102,126,234,.1), rgba(240,147,251,.08)); transform: translateX(3px); } +.side-nav-menu .el-menu-item.is-active { background: linear-gradient(135deg, rgba(102,126,234,.18), rgba(240,147,251,.12)); color: var(--cc-menu-active); font-weight: 700; box-shadow: inset 3px 0 var(--cc-menu-active); } +.side-nav-menu .el-sub-menu .el-menu { padding: 4px 0; background: linear-gradient(180deg, rgba(102,126,234,.03), transparent) !important; } +.side-nav-menu .el-sub-menu .el-menu-item { min-width: 0; height: 42px; margin: 0 12px; padding-left: 54px !important; border-radius: 10px; color: #71717a; line-height: 42px; } +.side-nav-menu .el-sub-menu .el-menu-item:hover { background: rgba(102,126,234,.08); color: var(--cc-menu-active); transform: translateX(4px); } +.side-nav-menu .el-sub-menu .el-menu-item.is-active { background: rgba(102,126,234,.12); box-shadow: none; color: var(--cc-menu-active); font-weight: 700; } .side-nav-menu .el-menu-item svg, .side-nav-menu .el-sub-menu__title svg { flex: 0 0 auto; margin-right: 12px; } -.sidebar-toggle { display: flex; height: 52px; align-items: center; justify-content: center; gap: 8px; border: 0; border-top: 1px solid rgba(255,255,255,.1); background: transparent; color: #aebbd0; cursor: pointer; } .app-main { min-width: 0; min-height: 100vh; margin-left: 240px; } .is-collapsed .app-main { margin-left: 76px; } -.app-header { position: sticky; top: 0; z-index: 15; display: flex; min-width: 0; min-height: 72px; align-items: center; gap: 16px; padding: 10px 20px; border-bottom: 1px solid var(--cc-border); background: rgba(255,255,255,.96); } +.app-header { position: sticky; top: 0; z-index: 15; display: flex; min-width: 0; min-height: 64px; align-items: center; gap: 16px; padding: 8px 20px; background: var(--cc-topbar); color: #fff; box-shadow: 0 8px 32px rgba(0,0,0,.15), 0 2px 8px rgba(0,0,0,.1); backdrop-filter: blur(20px); } +.shell-menu-button { display: grid; width: 44px; height: 44px; flex: 0 0 44px; place-items: center; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #fff; cursor: pointer; transition: background .2s ease, transform .2s ease; } +.shell-menu-button:hover { background: rgba(255,255,255,.15); transform: scale(1.05); } +.shell-menu-button:focus-visible { outline-color: rgba(255,255,255,.8); } .page-heading { min-width: 0; flex: 1; } .page-heading h1 { margin: 0; overflow: hidden; font-size: 20px; letter-spacing: 0; text-overflow: ellipsis; white-space: nowrap; } -.page-heading p { margin: 4px 0 0; overflow: hidden; color: var(--cc-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } +.page-heading p { margin: 4px 0 0; overflow: hidden; color: rgba(255,255,255,.78); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } .header-user { display: flex; min-width: 0; flex: 0 0 auto; align-items: center; gap: 10px; } -.user-avatar { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; background: #eaf1ff; color: var(--cc-primary); font-weight: 700; } +.user-avatar { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 50%; background: #fff; color: var(--cc-primary); font-weight: 700; box-shadow: 0 4px 12px rgba(0,0,0,.15); } .user-copy { display: flex; flex-direction: column; } .user-copy strong { font-size: 13px; } .user-copy span { color: var(--cc-muted); font-size: 11px; } -.mobile-menu-button { display: none; width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; } -.header-user .el-button { width: 44px; height: 44px; } +.header-user .el-button { width: 44px; height: 44px; color: #fff; } +.header-user .el-button:hover { background: rgba(255,255,255,.15); color: #fff; } .page-container { padding: 20px 20px 32px; } /* Static permission preview */ diff --git a/src/views/CustomersView.vue b/src/views/CustomersView.vue index 4fa30376..d0528da8 100644 --- a/src/views/CustomersView.vue +++ b/src/views/CustomersView.vue @@ -1,6 +1,6 @@