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

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>