maoyuanyang/curriculum-project-hub
1
0
Fork 0
forked from bai/curriculum-project-hub
Code Pull Requests Activity

style: update surface colors and typography for improved contrast and readability across various components

Browse Source 
- Changed text colors from surface-400 to surface-600 and surface-500 to surface-700 for better visibility in multiple Svelte files.
- Updated background and border colors in app.css for a more cohesive industrial design.
- Adjusted font weights and sizes for headings, labels, and buttons to enhance clarity and user experience.
- Refined styles for tables, badges, and buttons to align with the new design language.
- Added new styles for input fields and switches to maintain consistency in the UI.
This commit is contained in:
ChickenPige0n
2026-07-11 13:03:06 +08:00
parent 0968545b5a
commit acf7ae0cd7
19 changed files with 325 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files
hub/admin-web/src/routes/+layout.svelte
+24 -24
View File
@@ -128,7 +128,7 @@
{#if $session.loading || redirecting}
<div class="saas-status-panel">
<div class="flex flex-col items-center gap-3 text-surface-400">
<div class="flex flex-col items-center gap-3 text-surface-600">
<svg class="h-8 w-8 animate-spin text-primary-500" viewBox="0 0 24 24" fill="none">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path
@@ -143,20 +143,20 @@
{:else if $session.error}
<div class="saas-status-panel">
<div class="saas-status-card">
<div class="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-2xl bg-error-100 text-error-600">!</div>
<div class="mx-auto mb-4 flex h-12 w-12 items-center justify-center border border-error-300 bg-error-100 text-error-700 font-bold">!</div>
<h2 class="mb-1 text-lg font-semibold">无法连接到后端</h2>
<p class="mb-5 text-sm text-surface-500">{$session.error}</p>
<p class="mb-5 text-sm text-surface-700">{$session.error}</p>
<button class="saas-btn-primary" onclick={() => loadSession()}>重试</button>
</div>
</div>
{:else if !$session.me}
<div class="saas-status-panel">
<div class="saas-status-card">
<div class="mx-auto mb-5 flex h-12 w-12 items-center justify-center rounded-2xl bg-primary-600 text-white font-bold">
<div class="mx-auto mb-5 flex h-12 w-12 items-center justify-center border border-primary-700 bg-primary-600 text-white font-bold">
CPH
</div>
<h1 class="text-xl font-semibold tracking-tight">Curriculum Project Hub</h1>
<p class="mt-2 mb-6 text-sm text-surface-500">登录以管理组织、项目、团队与模型供应。</p>
<h1 class="text-xl font-semibold">Curriculum Project Hub</h1>
<p class="mt-2 mb-6 text-sm text-surface-700">登录以管理组织、项目、团队与模型供应。</p>
<button class="saas-btn-primary w-full" onclick={() => redirectToLogin()}>使用飞书登录</button>
</div>
</div>
@@ -178,17 +178,17 @@
{mobileNavOpen ? 'translate-x-0' : '-translate-x-full md:translate-x-0'}"
>
<div class="flex items-center gap-2.5 px-4 py-4">
<div class="flex h-9 w-9 items-center justify-center rounded-xl bg-primary-600 text-xs font-bold tracking-wide text-white">
<div class="flex h-9 w-9 items-center justify-center border border-primary-700 bg-primary-600 text-xs font-bold tracking-wide text-white">
CPH
</div>
<div class="min-w-0">
<div class="truncate text-sm font-semibold text-surface-900">组织后台</div>
<div class="truncate text-xs text-surface-400">Curriculum Hub</div>
<div class="truncate text-xs text-surface-600">Curriculum Hub</div>
</div>
</div>
<div class="px-3 pb-3">
<div class="mb-1.5 flex items-center gap-1.5 text-xs font-medium text-surface-500">
<div class="mb-1.5 flex items-center gap-1.5 text-xs font-medium text-surface-700">
<Icon name="org" class="h-3.5 w-3.5" />
组织
</div>
@@ -200,7 +200,7 @@
</div>
<nav class="flex-1 space-y-0.5 overflow-y-auto px-2 pb-3">
<p class="px-3 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-wider text-surface-400">工作台</p>
<p class="px-3 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-wider text-surface-600">工作台</p>
{#each navItems as item}
{@const active = activeKey() === item.key || (item.key === 'overview' && (activeKey() === '' || activeKey() === 'overview'))}
<a href={navHref(item.key)} class="saas-nav-item" data-active={active ? 'true' : 'false'}>
@@ -210,22 +210,22 @@
{/each}
</nav>
<div class="border-t border-surface-200 p-3">
<div class="flex items-center gap-2.5 rounded-xl bg-surface-100/80 px-2.5 py-2">
<div class="border-t border-surface-300 p-3">
<div class="flex items-center gap-2.5 border border-surface-300 bg-surface-100 px-2.5 py-2">
{#if me.user.avatarUrl}
<img src={me.user.avatarUrl} alt="" class="h-8 w-8 rounded-full object-cover" />
<img src={me.user.avatarUrl} alt="" class="h-8 w-8 object-cover" />
{:else}
<div class="flex h-8 w-8 items-center justify-center rounded-full bg-primary-100 text-xs font-semibold text-primary-700">
<div class="flex h-8 w-8 items-center justify-center border border-primary-300 bg-primary-100 text-xs font-semibold text-primary-800">
{me.user.displayName.slice(0, 1)}
</div>
{/if}
<div class="min-w-0 flex-1">
<div class="truncate text-sm font-medium text-surface-800">{me.user.displayName}</div>
<div class="truncate text-[11px] text-surface-400">{orgRoleLabel(org.role)}</div>
<div class="truncate text-sm font-medium text-surface-900">{me.user.displayName}</div>
<div class="truncate text-[11px] text-surface-600">{orgRoleLabel(org.role)}</div>
</div>
<button
type="button"
class="rounded-lg p-1.5 text-surface-400 transition hover:bg-surface-200 hover:text-error-600"
class="p-1.5 text-surface-600 transition hover:bg-surface-200 hover:text-error-700"
title="退出登录"
onclick={handleLogout}
>
@@ -246,10 +246,10 @@
<Icon name="menu" class="h-5 w-5" />
</button>
<div class="min-w-0">
<div class="flex items-center gap-1.5 text-xs text-surface-400">
<div class="flex items-center gap-1.5 text-xs text-surface-600">
<span class="truncate">{org.name}</span>
<span>/</span>
<span class="truncate text-surface-600">{pageTitle()}</span>
<span class="truncate font-medium text-surface-900">{pageTitle()}</span>
</div>
</div>
<div class="ml-auto hidden items-center gap-2 sm:flex">
@@ -269,7 +269,7 @@
<div class="saas-status-panel">
<div class="saas-status-card">
<h2 class="mb-2 text-lg font-semibold">无权访问管理后台</h2>
<p class="mb-3 text-sm text-surface-500">
<p class="mb-3 text-sm text-surface-700">
组织 <strong>{denied.name}</strong>（/{denied.slug}）中你的角色是
<span class="saas-badge-neutral mx-1">{orgRoleLabel(denied.role)}</span>，
需要<strong>所有者</strong>或<strong>管理员</strong>。
@@ -293,13 +293,13 @@
<div class="saas-status-card">
{#if adminOrgs().length === 0}
<h2 class="mb-2 text-lg font-semibold">无权访问管理后台</h2>
<p class="mb-5 text-sm text-surface-500">
<p class="mb-5 text-sm text-surface-700">
你加入了 <strong>{denied.name}</strong>，角色是
<span class="saas-badge-neutral mx-1">{orgRoleLabel(denied.role)}</span>。仅所有者与管理员可进入后台。
</p>
{:else}
<h2 class="mb-2 text-lg font-semibold">正在跳转…</h2>
<p class="mb-5 text-sm text-surface-500">
<p class="mb-5 text-sm text-surface-700">
即将进入 <strong>{adminOrgs()[0].name}</strong>
（/{adminOrgs()[0].slug}）。
</p>
@@ -312,10 +312,10 @@
<div class="saas-status-panel">
<div class="saas-status-card">
<h2 class="mb-2 text-lg font-semibold">未加入组织</h2>
<p class="mb-3 text-sm text-surface-500">
<p class="mb-3 text-sm text-surface-700">
飞书账号已登录，但当前账号尚未加入任何组织。
</p>
<p class="mb-5 text-left text-xs text-surface-400">
<p class="mb-5 text-left text-xs text-surface-600">
open_id：
<code class="break-all font-mono text-surface-600">{$session.me!.user.feishuOpenId}</code>
</p>