rogee/quyun-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: apply senior-friendly portal theme and document UX guidelines

Browse Source 
Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-opencode)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
This commit is contained in:
Rogee
2026-02-06 14:20:51 +08:00
parent 1782f64417
commit f3e10256a8
13 changed files with 356 additions and 268 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
frontend/portal/src/assets/main.css
View File

@@ -2,6 +2,7 @@
@plugin "tailwindcss-animate";
:root {
/* Existing Primary Scale (Preserved) */
--color-primary-50: #eff6ff;
--color-primary-100: #dbeafe;
--color-primary-200: #bfdbfe;
@@ -13,6 +14,57 @@
--color-primary-800: #1e40af;
--color-primary-900: #1e3a8a;
--color-primary-950: #172554;
/* Senior-Friendly Semantic Base (Light Mode) */
/* Warm, low-glare backgrounds */
--color-bg-base: #f9fafb; /* gray-50 equivalent but semantic */
--color-bg-surface: #ffffff;
--color-bg-surface-highlight: #f3f4f6; /* gray-100 */
/* High contrast text */
--color-text-main: #0f172a; /* slate-900 */
--color-text-muted: #334155; /* slate-700 - Darker than typical muted for readability */
--color-text-inverted: #ffffff;
/* Borders */
--color-border-base: #cbd5e1; /* slate-300 - Higher contrast border */
--color-border-highlight: #94a3b8; /* slate-400 */
/* Status */
--color-status-success: #166534; /* green-800 for text readability */
--color-status-danger: #991b1b; /* red-800 */
/* PrimeVue Global Semantic Map */
--p-content-background: var(--color-bg-surface);
--p-content-color: var(--color-text-main);
--p-content-border-color: var(--color-border-base);
--p-primary-color: var(--color-primary-600);
--p-primary-contrast-color: #ffffff;
/* PrimeVue Form/Input adjustments */
--p-inputtext-background: var(--color-bg-surface);
--p-inputtext-color: var(--color-text-main);
--p-inputtext-border-color: var(--color-border-base);
}
/* High Contrast Mode for Seniors */
[data-theme='senior-high-contrast'] {
--color-bg-base: #ffffff;
--color-bg-surface: #ffffff;
--color-bg-surface-highlight: #ffff00; /* Yellow highlight for emphasis */
--color-text-main: #000000;
--color-text-muted: #000000;
--color-text-inverted: #ffff00; /* Yellow text on dark backgrounds */
--color-border-base: #000000;
--color-border-highlight: #000000;
--color-primary-500: #0000ee; /* Standard accessible link blue */
--color-primary-600: #0000ee;
/* Force borders to be visible */
--border-width-base: 2px;
}
@theme {
@@ -27,4 +79,37 @@
--color-primary-800: var(--color-primary-800);
--color-primary-900: var(--color-primary-900);
--color-primary-950: var(--color-primary-950);
/* Semantic Map */
--color-base: var(--color-bg-base);
--color-surface: var(--color-bg-surface);
--color-surface-highlight: var(--color-bg-surface-highlight);
--color-content: var(--color-text-main);
--color-muted: var(--color-text-muted);
--color-inverted: var(--color-text-inverted);
--color-line: var(--color-border-base);
--color-line-highlight: var(--color-border-highlight);
}
/* Global Senior Base Styles */
body {
background-color: var(--color-bg-base);
color: var(--color-text-main);
font-size: 18px; /* Slightly larger base font size */
line-height: 1.6;
}
/* Improve focus visibility */
:focus-visible {
outline: 3px solid var(--color-primary-600);
outline-offset: 2px;
}
a {
text-decoration-thickness: 1px;
}
a:hover {
text-decoration: underline;
}

44
frontend/portal/src/components/AppFooter.vue
View File

@@ -1,16 +1,16 @@
<template>
<footer class="bg-slate-900 text-slate-400 mt-auto">
<footer class="bg-surface-highlight text-muted mt-auto border-t border-line">
<div class="mx-auto max-w-screen-xl py-12">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<!-- Brand -->
<div class="col-span-1">
<div class="flex items-center gap-2 mb-4">
<div
class="w-8 h-8 bg-white/10 rounded-lg flex items-center justify-center text-white font-bold text-xl"
class="w-8 h-8 bg-primary-600 rounded-lg flex items-center justify-center text-white font-bold text-xl"
>
Q
</div>
<span class="text-xl font-bold text-white">Quyun</span>
<span class="text-xl font-bold text-content">Quyun</span>
</div>
<p class="text-sm leading-relaxed mb-6">
专业的租户管理与内容交付平台，连接创作者与用户，探索内容的无限可能。
@@ -18,17 +18,17 @@
<div class="flex gap-4">
<a
href="#"
class="w-8 h-8 rounded-full bg-white/5 flex items-center justify-center hover:bg-white/20 hover:text-white transition-all"
class="w-8 h-8 rounded-full bg-surface border border-line flex items-center justify-center hover:bg-primary-50 hover:text-primary-600 transition-all"
><i class="pi pi-twitter"></i
></a>
<a
href="#"
class="w-8 h-8 rounded-full bg-white/5 flex items-center justify-center hover:bg-white/20 hover:text-white transition-all"
class="w-8 h-8 rounded-full bg-surface border border-line flex items-center justify-center hover:bg-primary-50 hover:text-primary-600 transition-all"
><i class="pi pi-github"></i
></a>
<a
href="#"
class="w-8 h-8 rounded-full bg-white/5 flex items-center justify-center hover:bg-white/20 hover:text-white transition-all"
class="w-8 h-8 rounded-full bg-surface border border-line flex items-center justify-center hover:bg-primary-50 hover:text-primary-600 transition-all"
><i class="pi pi-discord"></i
></a>
</div>
@@ -36,25 +36,25 @@
<!-- Links -->
<div>
<h3 class="text-white font-bold mb-4">关于我们</h3>
<h3 class="text-content font-bold mb-4">关于我们</h3>
<ul class="space-y-3 text-sm">
<li>
<a href="#" class="hover:text-white transition-colors"
<a href="#" class="hover:text-primary-600 transition-colors"
>平台介绍</a
>
</li>
<li>
<a href="#" class="hover:text-white transition-colors"
<a href="#" class="hover:text-primary-600 transition-colors"
>加入我们</a
>
</li>
<li>
<a href="#" class="hover:text-white transition-colors"
<a href="#" class="hover:text-primary-600 transition-colors"
>联系方式</a
>
</li>
<li>
<a href="#" class="hover:text-white transition-colors"
<a href="#" class="hover:text-primary-600 transition-colors"
>合作伙伴</a
>
</li>
@@ -62,25 +62,25 @@
</div>
<div>
<h3 class="text-white font-bold mb-4">帮助中心</h3>
<h3 class="text-content font-bold mb-4">帮助中心</h3>
<ul class="space-y-3 text-sm">
<li>
<a href="#" class="hover:text-white transition-colors"
<a href="#" class="hover:text-primary-600 transition-colors"
>用户指南</a
>
</li>
<li>
<a href="#" class="hover:text-white transition-colors"
<a href="#" class="hover:text-primary-600 transition-colors"
>创作者手册</a
>
</li>
<li>
<a href="#" class="hover:text-white transition-colors"
<a href="#" class="hover:text-primary-600 transition-colors"
>常见问题</a
>
</li>
<li>
<a href="#" class="hover:text-white transition-colors"
<a href="#" class="hover:text-primary-600 transition-colors"
>反馈建议</a
>
</li>
@@ -88,25 +88,25 @@
</div>
<div>
<h3 class="text-white font-bold mb-4">法律条款</h3>
<h3 class="text-content font-bold mb-4">法律条款</h3>
<ul class="space-y-3 text-sm">
<li>
<a href="#" class="hover:text-white transition-colors"
<a href="#" class="hover:text-primary-600 transition-colors"
>用户协议</a
>
</li>
<li>
<a href="#" class="hover:text-white transition-colors"
<a href="#" class="hover:text-primary-600 transition-colors"
>隐私政策</a
>
</li>
<li>
<a href="#" class="hover:text-white transition-colors"
<a href="#" class="hover:text-primary-600 transition-colors"
>知识产权</a
>
</li>
<li>
<a href="#" class="hover:text-white transition-colors"
<a href="#" class="hover:text-primary-600 transition-colors"
>社区规范</a
>
</li>
@@ -115,7 +115,7 @@
</div>
<div
class="border-t border-slate-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center text-xs"
class="border-t border-line mt-12 pt-8 flex flex-col md:flex-row justify-between items-center text-xs"
>
<p>© 2025 Quyun Platform. All rights reserved.</p>
<p class="mt-2 md:mt-0">

40
frontend/portal/src/components/TopNavbar.vue
View File

@@ -38,7 +38,9 @@ const logout = () => {
</script>
<template>
<nav class="fixed top-0 w-full z-50 bg-white border-b border-slate-200 h-16">
<nav
class="fixed top-0 w-full z-50 bg-surface border-b border-line h-16 text-content"
>
<div
class="mx-auto max-w-screen-xl h-full flex items-center justify-between"
>
@@ -49,7 +51,7 @@ const logout = () => {
>
Q
</div>
<span class="text-xl font-bold text-slate-900 hidden sm:block"
<span class="text-xl font-bold text-content hidden sm:block"
>Quyun</span
>
</router-link>
@@ -58,19 +60,19 @@ const logout = () => {
<div class="hidden md:flex items-center space-x-8">
<router-link
:to="tenantRoute('/')"
class="text-slate-600 font-medium hover:text-primary-600"
class="text-muted font-medium hover:text-primary-600"
active-class="text-primary-600"
>首页</router-link
>
<router-link
:to="tenantRoute('/explore')"
class="text-slate-600 font-medium hover:text-primary-600"
class="text-muted font-medium hover:text-primary-600"
active-class="text-primary-600"
>发现</router-link
>
<router-link
:to="tenantRoute('/topics')"
class="text-slate-600 font-medium hover:text-primary-600"
class="text-muted font-medium hover:text-primary-600"
active-class="text-primary-600"
>专题</router-link
>
@@ -80,12 +82,12 @@ const logout = () => {
<div class="hidden sm:flex flex-1 max-w-md mx-8">
<div class="relative w-full">
<i
class="pi pi-search absolute left-3 top-1/2 -translate-y-1/2 text-slate-400"
class="pi pi-search absolute left-3 top-1/2 -translate-y-1/2 text-muted"
></i>
<input
type="text"
placeholder="搜索感兴趣的内容..."
class="w-full h-10 pl-10 pr-4 rounded-full bg-slate-100 border-none focus:bg-white focus:ring-2 focus:ring-primary-100 text-sm transition-all"
class="w-full h-10 pl-10 pr-4 rounded-full bg-surface-highlight border border-transparent focus:border-primary-300 focus:bg-surface focus:ring-2 focus:ring-primary-100 text-sm transition-all text-content placeholder:text-muted"
/>
</div>
</div>
@@ -96,18 +98,18 @@ const logout = () => {
<!-- Notification -->
<router-link
:to="tenantRoute('/me/notifications')"
class="relative w-10 h-10 flex items-center justify-center rounded-full hover:bg-slate-50 text-slate-600"
class="relative w-10 h-10 flex items-center justify-center rounded-full hover:bg-surface-highlight text-muted"
>
<i class="pi pi-bell text-xl"></i>
<span
class="absolute top-2 right-2 w-2 h-2 bg-red-500 rounded-full border border-white"
class="absolute top-2 right-2 w-2 h-2 bg-red-600 rounded-full border border-surface"
></span>
</router-link>
<!-- Creator Entry -->
<router-link
:to="tenantRoute('/creator/apply')"
class="hidden sm:flex items-center gap-1 px-3 py-1.5 text-sm font-medium text-slate-600 hover:bg-slate-50 rounded-lg border border-slate-200"
class="hidden sm:flex items-center gap-1 px-3 py-1.5 text-sm font-medium text-muted hover:bg-surface-highlight rounded-lg border border-line"
>
<i class="pi pi-pencil"></i>
<span>创作</span>
@@ -116,7 +118,7 @@ const logout = () => {
<!-- Avatar Dropdown -->
<div class="relative group h-full flex items-center">
<button
class="w-9 h-9 rounded-full overflow-hidden border border-slate-200 focus:ring-2 ring-primary-100"
class="w-9 h-9 rounded-full overflow-hidden border border-line focus:ring-2 ring-primary-100"
>
<img
:src="
@@ -132,27 +134,27 @@ const logout = () => {
class="absolute right-0 top-full pt-2 w-48 hidden group-hover:block"
>
<div
class="bg-white rounded-xl shadow-lg border border-slate-100 py-1"
class="bg-surface rounded-xl shadow-lg border border-line py-1"
>
<div class="px-4 py-3 border-b border-slate-50">
<p class="text-sm font-bold text-slate-900">
<div class="px-4 py-3 border-b border-line">
<p class="text-sm font-bold text-content">
{{ user.nickname }}
</p>
<p class="text-xs text-slate-500 truncate">
<p class="text-xs text-muted truncate">
{{ user.phone }}
</p>
</div>
<router-link
:to="tenantRoute('/me')"
class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-50"
class="block px-4 py-2 text-sm text-content hover:bg-surface-highlight"
>个人中心</router-link
>
<router-link
:to="tenantRoute('/creator')"
class="block px-4 py-2 text-sm text-slate-700 hover:bg-slate-50"
class="block px-4 py-2 text-sm text-content hover:bg-surface-highlight"
>创作者中心</router-link
>
<div class="border-t border-slate-50 mt-1"></div>
<div class="border-t border-line mt-1"></div>
<button
@click="logout"
class="block w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-red-50"
@@ -174,7 +176,7 @@ const logout = () => {
<!-- Mobile Menu Button -->
<button
class="md:hidden w-10 h-10 flex items-center justify-center text-slate-600"
class="md:hidden w-10 h-10 flex items-center justify-center text-muted"
>
<i class="pi pi-bars text-xl"></i>
</button>

4
frontend/portal/src/layout/LayoutAuth.vue
View File

@@ -1,5 +1,7 @@
<template>
<div class="min-h-screen bg-slate-50 flex items-center justify-center p-4">
<div
class="min-h-screen bg-base text-content flex items-center justify-center p-4"
>
<router-view />
</div>
</template>

32
frontend/portal/src/layout/LayoutCreator.vue
View File

@@ -15,7 +15,7 @@ const isFullWidth = computed(() => {
<template>
<div
class="flex flex-col bg-slate-50"
class="flex flex-col bg-base text-content"
:class="isFullWidth ? 'h-screen overflow-hidden' : 'min-h-screen'"
>
<TopNavbar v-if="!isFullWidth" />
@@ -33,21 +33,21 @@ const isFullWidth = computed(() => {
v-if="!isFullWidth"
>
<div
class="bg-slate-900 rounded-2xl shadow-sm overflow-hidden sticky top-24 text-slate-300 min-h-[600px] flex flex-col"
class="bg-surface rounded-2xl shadow-sm overflow-hidden sticky top-24 text-muted min-h-[600px] flex flex-col border border-line"
>
<!-- Header -->
<div class="p-6 border-b border-slate-800">
<div class="p-6 border-b border-line">
<div class="flex items-center gap-3">
<div
class="w-10 h-10 bg-gradient-to-br from-primary-500 to-primary-700 rounded-lg flex items-center justify-center text-white font-bold text-lg shadow-lg"
class="w-10 h-10 bg-primary-600 rounded-lg flex items-center justify-center text-white font-bold text-lg shadow-lg"
>
<i class="pi pi-palette"></i>
</div>
<div>
<div class="font-bold text-white leading-tight">
<div class="font-bold text-content leading-tight">
创作者中心
</div>
<div class="text-xs text-slate-500 mt-1">Creator Studio</div>
<div class="text-xs text-muted mt-1">Creator Studio</div>
</div>
</div>
</div>
@@ -57,7 +57,7 @@ const isFullWidth = computed(() => {
<router-link
:to="tenantRoute('/creator')"
exact-active-class="bg-primary-600 text-white shadow-md shadow-primary-900/20"
class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-slate-800 hover:text-white transition-all group"
class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-surface-highlight hover:text-content transition-all group"
>
<i
class="pi pi-th-large text-lg group-hover:scale-110 transition-transform"
@@ -66,7 +66,7 @@ const isFullWidth = computed(() => {
</router-link>
<div
class="px-4 py-2 text-xs font-bold text-slate-500 uppercase tracking-wider mt-4"
class="px-4 py-2 text-xs font-bold text-muted uppercase tracking-wider mt-4"
>
内容与交易
</div>
@@ -74,7 +74,7 @@ const isFullWidth = computed(() => {
<router-link
:to="tenantRoute('/creator/contents')"
active-class="bg-primary-600 text-white shadow-md shadow-primary-900/20"
class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-slate-800 hover:text-white transition-all group"
class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-surface-highlight hover:text-content transition-all group"
>
<i
class="pi pi-file-edit text-lg group-hover:scale-110 transition-transform"
@@ -84,7 +84,7 @@ const isFullWidth = computed(() => {
<router-link
:to="tenantRoute('/creator/orders')"
active-class="bg-primary-600 text-white shadow-md shadow-primary-900/20"
class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-slate-800 hover:text-white transition-all group"
class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-surface-highlight hover:text-content transition-all group"
>
<i
class="pi pi-shopping-cart text-lg group-hover:scale-110 transition-transform"
@@ -94,7 +94,7 @@ const isFullWidth = computed(() => {
<router-link
:to="tenantRoute('/creator/coupons')"
active-class="bg-primary-600 text-white shadow-md shadow-primary-900/20"
class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-slate-800 hover:text-white transition-all group"
class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-surface-highlight hover:text-content transition-all group"
>
<i
class="pi pi-ticket text-lg group-hover:scale-110 transition-transform"
@@ -103,7 +103,7 @@ const isFullWidth = computed(() => {
</router-link>
<div
class="px-4 py-2 text-xs font-bold text-slate-500 uppercase tracking-wider mt-4"
class="px-4 py-2 text-xs font-bold text-muted uppercase tracking-wider mt-4"
>
配置
</div>
@@ -111,7 +111,7 @@ const isFullWidth = computed(() => {
<router-link
:to="tenantRoute('/creator/members')"
active-class="bg-primary-600 text-white shadow-md shadow-primary-900/20"
class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-slate-800 hover:text-white transition-all group"
class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-surface-highlight hover:text-content transition-all group"
>
<i
class="pi pi-users text-lg group-hover:scale-110 transition-transform"
@@ -121,7 +121,7 @@ const isFullWidth = computed(() => {
<router-link
:to="tenantRoute('/creator/settings')"
active-class="bg-primary-600 text-white shadow-md shadow-primary-900/20"
class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-slate-800 hover:text-white transition-all group"
class="flex items-center gap-3 px-4 py-3 rounded-lg hover:bg-surface-highlight hover:text-content transition-all group"
>
<i
class="pi pi-cog text-lg group-hover:scale-110 transition-transform"
@@ -131,10 +131,10 @@ const isFullWidth = computed(() => {
</nav>
<!-- Footer Link -->
<div class="p-4 border-t border-slate-800">
<div class="p-4 border-t border-line">
<router-link
:to="tenantRoute('/')"
class="flex items-center gap-2 px-4 py-2 text-sm text-slate-400 hover:text-white transition-colors"
class="flex items-center gap-2 px-4 py-2 text-sm text-muted hover:text-content transition-colors"
>
<i class="pi pi-external-link"></i> 预览我的主页
</router-link>

12
frontend/portal/src/layout/LayoutMain.vue
View File

@@ -4,15 +4,9 @@ import AppFooter from "../components/AppFooter.vue";
</script>
<template>
<div class="min-h-screen flex flex-col bg-slate-50 relative overflow-hidden">
<!-- Background Decor Blobs -->
<div
class="fixed top-[-10%] right-[-10%] w-[40%] h-[40%] bg-blue-100/40 rounded-full blur-[120px] -z-0"
></div>
<div
class="fixed bottom-[-10%] left-[-10%] w-[30%] h-[40%] bg-purple-50/50 rounded-full blur-[100px] -z-0"
></div>
<div
class="min-h-screen flex flex-col bg-base text-content relative overflow-hidden"
>
<TopNavbar class="relative z-10" />
<main class="flex-grow pt-16 relative z-10">
<router-view />

34
frontend/portal/src/layout/LayoutUser.vue
View File

@@ -11,30 +11,30 @@ const tenantRoute = (path) => tenantPath(path, route);
</script>
<template>
<div class="min-h-screen flex flex-col bg-slate-50">
<div class="min-h-screen flex flex-col bg-base text-content">
<TopNavbar />
<main class="flex-grow pt-16">
<div class="mx-auto max-w-screen-xl py-8 flex gap-8">
<!-- Sidebar -->
<aside class="w-[280px] flex-shrink-0 hidden lg:block">
<div
class="bg-white rounded-2xl shadow-sm border border-slate-100 overflow-hidden sticky top-24"
class="bg-surface rounded-2xl shadow-sm border border-line overflow-hidden sticky top-24"
>
<!-- User Brief -->
<div class="p-6 border-b border-slate-100 bg-slate-50/50">
<div class="p-6 border-b border-line bg-surface-highlight">
<div class="flex items-center gap-4">
<img
:src="
user.avatar ||
`https://api.dicebear.com/7.x/avataaars/svg?seed=${user.id || 'default'}`
"
class="w-12 h-12 rounded-full border-2 border-white shadow-sm"
class="w-12 h-12 rounded-full border-2 border-surface shadow-sm"
/>
<div class="overflow-hidden">
<div class="font-bold text-slate-900 truncate">
<div class="font-bold text-content truncate">
{{ user.nickname || "用户" }}
</div>
<div class="text-xs text-slate-500">ID: {{ user.id }}</div>
<div class="text-xs text-muted">ID: {{ user.id }}</div>
</div>
</div>
</div>
@@ -44,7 +44,7 @@ const tenantRoute = (path) => tenantPath(path, route);
<router-link
:to="tenantRoute('/me')"
exact-active-class="bg-primary-50 text-primary-600 font-semibold"
class="flex items-center gap-3 px-4 py-3 rounded-lg text-slate-600 hover:bg-slate-50 transition-colors"
class="flex items-center gap-3 px-4 py-3 rounded-lg text-muted hover:bg-surface-highlight hover:text-content transition-colors"
>
<i class="pi pi-home text-lg"></i>
<span>概览</span>
@@ -52,7 +52,7 @@ const tenantRoute = (path) => tenantPath(path, route);
<router-link
:to="tenantRoute('/me/orders')"
active-class="bg-primary-50 text-primary-600 font-semibold"
class="flex items-center gap-3 px-4 py-3 rounded-lg text-slate-600 hover:bg-slate-50 transition-colors"
class="flex items-center gap-3 px-4 py-3 rounded-lg text-muted hover:bg-surface-highlight hover:text-content transition-colors"
>
<i class="pi pi-shopping-bag text-lg"></i>
<span>我的订单</span>
@@ -60,7 +60,7 @@ const tenantRoute = (path) => tenantPath(path, route);
<router-link
:to="tenantRoute('/me/wallet')"
active-class="bg-primary-50 text-primary-600 font-semibold"
class="flex items-center gap-3 px-4 py-3 rounded-lg text-slate-600 hover:bg-slate-50 transition-colors"
class="flex items-center gap-3 px-4 py-3 rounded-lg text-muted hover:bg-surface-highlight hover:text-content transition-colors"
>
<i class="pi pi-wallet text-lg"></i>
<span>我的钱包</span>
@@ -68,7 +68,7 @@ const tenantRoute = (path) => tenantPath(path, route);
<router-link
:to="tenantRoute('/me/coupons')"
active-class="bg-primary-50 text-primary-600 font-semibold"
class="flex items-center gap-3 px-4 py-3 rounded-lg text-slate-600 hover:bg-slate-50 transition-colors"
class="flex items-center gap-3 px-4 py-3 rounded-lg text-muted hover:bg-surface-highlight hover:text-content transition-colors"
>
<i class="pi pi-ticket text-lg"></i>
<span>我的优惠券</span>
@@ -76,7 +76,7 @@ const tenantRoute = (path) => tenantPath(path, route);
<router-link
:to="tenantRoute('/me/library')"
active-class="bg-primary-50 text-primary-600 font-semibold"
class="flex items-center gap-3 px-4 py-3 rounded-lg text-slate-600 hover:bg-slate-50 transition-colors"
class="flex items-center gap-3 px-4 py-3 rounded-lg text-muted hover:bg-surface-highlight hover:text-content transition-colors"
>
<i class="pi pi-book text-lg"></i>
<span>已购内容</span>
@@ -84,7 +84,7 @@ const tenantRoute = (path) => tenantPath(path, route);
<router-link
:to="tenantRoute('/me/favorites')"
active-class="bg-primary-50 text-primary-600 font-semibold"
class="flex items-center gap-3 px-4 py-3 rounded-lg text-slate-600 hover:bg-slate-50 transition-colors"
class="flex items-center gap-3 px-4 py-3 rounded-lg text-muted hover:bg-surface-highlight hover:text-content transition-colors"
>
<i class="pi pi-heart text-lg"></i>
<span>我的收藏</span>
@@ -92,7 +92,7 @@ const tenantRoute = (path) => tenantPath(path, route);
<router-link
:to="tenantRoute('/me/likes')"
active-class="bg-primary-50 text-primary-600 font-semibold"
class="flex items-center gap-3 px-4 py-3 rounded-lg text-slate-600 hover:bg-slate-50 transition-colors"
class="flex items-center gap-3 px-4 py-3 rounded-lg text-muted hover:bg-surface-highlight hover:text-content transition-colors"
>
<i class="pi pi-thumbs-up text-lg"></i>
<span>我的点赞</span>
@@ -100,16 +100,16 @@ const tenantRoute = (path) => tenantPath(path, route);
<router-link
:to="tenantRoute('/me/notifications')"
active-class="bg-primary-50 text-primary-600 font-semibold"
class="flex items-center gap-3 px-4 py-3 rounded-lg text-slate-600 hover:bg-slate-50 transition-colors"
class="flex items-center gap-3 px-4 py-3 rounded-lg text-muted hover:bg-surface-highlight hover:text-content transition-colors"
>
<i class="pi pi-bell text-lg"></i>
<span>消息中心</span>
</router-link>
<div class="my-2 border-t border-slate-100"></div>
<div class="my-2 border-t border-line"></div>
<router-link
:to="tenantRoute('/me/profile')"
active-class="bg-primary-50 text-primary-600 font-semibold"
class="flex items-center gap-3 px-4 py-3 rounded-lg text-slate-600 hover:bg-slate-50 transition-colors"
class="flex items-center gap-3 px-4 py-3 rounded-lg text-muted hover:bg-surface-highlight hover:text-content transition-colors"
>
<i class="pi pi-user text-lg"></i>
<span>个人资料</span>
@@ -117,7 +117,7 @@ const tenantRoute = (path) => tenantPath(path, route);
<router-link
:to="tenantRoute('/me/security')"
active-class="bg-primary-50 text-primary-600 font-semibold"
class="flex items-center gap-3 px-4 py-3 rounded-lg text-slate-600 hover:bg-slate-50 transition-colors"
class="flex items-center gap-3 px-4 py-3 rounded-lg text-muted hover:bg-surface-highlight hover:text-content transition-colors"
>
<i class="pi pi-shield text-lg"></i>
<span>账号安全</span>

2
frontend/portal/src/main.js
View File

@@ -21,7 +21,7 @@ app.use(PrimeVue, {
preset: Aura,
options: {
prefix: "p",
darkModeSelector: ".my-app-dark",
darkModeSelector: "[data-theme='senior-high-contrast']",
cssLayer: false,
},
},

2
frontend/portal/vite.config.js
View File

@@ -11,7 +11,7 @@ export default defineConfig({
strictPort: true,
proxy: {
"/v1": {
target: "http://localhost:8080",
target: "http://localhost:18080",
changeOrigin: true,
},
},