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

- 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:
2026-07-11 13:03:06 +08:00
parent 0968545b5a
commit acf7ae0cd7
19 changed files with 325 additions and 205 deletions
@@ -66,15 +66,15 @@
<p class="saas-section-title mb-3">组织信息</p>
<dl class="space-y-2.5 text-sm">
<div class="flex items-center justify-between gap-3">
<dt class="text-surface-500">Slug</dt>
<dt class="text-surface-700">Slug</dt>
<dd class="font-mono text-xs text-surface-800">/{org.slug}</dd>
</div>
<div class="flex items-center justify-between gap-3">
<dt class="text-surface-500">状态</dt>
<dt class="text-surface-700">状态</dt>
<dd><span class="saas-badge-success">{org.status}</span></dd>
</div>
<div class="flex items-center justify-between gap-3">
<dt class="text-surface-500">你的角色</dt>
<dt class="text-surface-700">你的角色</dt>
<dd><span class="saas-badge-primary">{orgRoleLabel(org.role)}</span></dd>
</div>
</dl>
@@ -85,15 +85,15 @@
<p class="saas-muted mb-4">
开启后,普通老师可在飞书群自助创建项目;关闭后仅所有者与管理员可建。
</p>
<div class="flex items-center gap-3 rounded-xl border border-surface-200 bg-surface-100/50 px-4 py-3">
<div class="flex items-center gap-3 border border-surface-300 bg-surface-100 px-4 py-3">
<SwitchControl
checked={settings.membersCanCreateProjects}
disabled={saving}
onchange={setMembersCanCreate}
/>
<div>
<div class="text-sm font-medium text-surface-800">允许成员自助创建项目</div>
<div class="text-xs text-surface-400">普通成员在飞书群中自助建项</div>
<div class="text-sm font-medium text-surface-900">允许成员自助创建项目</div>
<div class="text-xs text-surface-600">普通成员在飞书群中自助建项</div>
</div>
</div>
</div>
@@ -121,7 +121,7 @@
</div>
{#if usage.projects.length === 0}
<div class="saas-empty">
<p class="text-sm text-surface-400">暂无项目用量数据</p>
<p class="text-sm text-surface-600">暂无项目用量数据</p>
</div>
{:else}
<div class="overflow-x-auto">
@@ -152,6 +152,6 @@
</div>
{:else}
<div class="saas-empty">
<p class="text-sm text-surface-400">组织数据不可用</p>
<p class="text-sm text-surface-600">组织数据不可用</p>
</div>
{/if}
@@ -128,18 +128,18 @@
<td>
<div class="flex items-center gap-2.5">
{#if m.avatarUrl}
<img src={m.avatarUrl} alt="" class="h-7 w-7 rounded-full object-cover" />
{:else}
<div
class="flex h-7 w-7 items-center justify-center rounded-full bg-primary-100 text-xs font-semibold text-primary-700"
>
<img src={m.avatarUrl} alt="" class="h-7 w-7 border border-surface-300 object-cover" />
{:else}
<div
class="flex h-7 w-7 items-center justify-center border border-primary-300 bg-primary-100 text-xs font-semibold text-primary-800"
>
{m.displayName.slice(0, 1)}
</div>
{/if}
<span class="font-medium">{m.displayName}</span>
</div>
</td>
<td class="font-mono text-xs text-surface-500">{m.feishuOpenId}</td>
<td class="font-mono text-xs text-surface-700">{m.feishuOpenId}</td>
<td class="min-w-[9rem]">
<SelectField
items={roleItems}
@@ -149,7 +149,7 @@
}}
/>
</td>
<td class="text-surface-500">{fmtDate(m.createdAt)}</td>
<td class="text-surface-700">{fmtDate(m.createdAt)}</td>
<td class="text-right">
<button class="saas-btn-danger !py-1 text-sm" onclick={() => revoke(m)}>移除</button>
</td>
@@ -159,7 +159,7 @@
</table>
</div>
{/if}
<p class="border-t border-surface-100 px-5 py-3 text-xs text-surface-400">
<p class="border-t border-surface-300 px-5 py-3 text-xs text-surface-600">
组织角色控制后台访问;项目级权限由「项目」页团队授权({permHint})决定。
</p>
</div>
@@ -155,7 +155,7 @@
onchange={(e) => save(m, { sortKey: (e.target as HTMLInputElement).value })}
/>
</td>
<td class="text-xs text-surface-400">{fmtDateOnly(m.createdAt)}</td>
<td class="text-xs text-surface-600">{fmtDateOnly(m.createdAt)}</td>
<td class="text-right">
<button class="saas-btn-danger !py-1 text-xs" onclick={() => remove(m)}>删除</button>
</td>
@@ -152,7 +152,7 @@
<ErrorBanner message={error} onretry={load} />
{:else if proj}
<div class="mb-2">
<a href={`/admin/org/${slug}/projects`} class="inline-flex items-center gap-1 text-sm text-surface-500 hover:text-primary-600">
<a href={`/admin/org/${slug}/projects`} class="inline-flex items-center gap-1 text-sm text-surface-700 hover:text-primary-600">
← 返回项目列表
</a>
</div>
@@ -171,33 +171,33 @@
<div class="saas-card-pad mb-6">
<dl class="grid gap-x-8 gap-y-3 text-sm sm:grid-cols-2">
<div>
<dt class="text-xs font-medium uppercase tracking-wide text-surface-400">工作区路径</dt>
<dt class="text-xs font-medium uppercase tracking-wide text-surface-600">工作区路径</dt>
<dd class="mt-0.5 break-all font-mono text-xs text-surface-700">{proj.workspaceDir}</dd>
</div>
<div>
<dt class="text-xs font-medium uppercase tracking-wide text-surface-400">创建者</dt>
<dt class="text-xs font-medium uppercase tracking-wide text-surface-600">创建者</dt>
<dd class="mt-0.5 text-surface-800">
{proj.createdBy ? `${proj.createdBy.displayName} (${proj.createdBy.feishuOpenId})` : '—'}
</dd>
</div>
<div>
<dt class="text-xs font-medium uppercase tracking-wide text-surface-400">文件夹</dt>
<dt class="text-xs font-medium uppercase tracking-wide text-surface-600">文件夹</dt>
<dd class="mt-0.5 text-surface-800">{proj.folder ? proj.folder.name : '(根)'}</dd>
</div>
<div>
<dt class="text-xs font-medium uppercase tracking-wide text-surface-400">飞书群</dt>
<dt class="text-xs font-medium uppercase tracking-wide text-surface-600">飞书群</dt>
<dd class="mt-0.5 text-surface-800">
{#if proj.binding}
<span class="saas-badge-success mr-1">已绑定</span>
<span class="font-mono text-xs">{proj.binding.chatId}</span>
<span class="text-surface-400"> · {fmtDate(proj.binding.createdAt)}</span>
<span class="text-surface-600"> · {fmtDate(proj.binding.createdAt)}</span>
{:else}
<span class="saas-badge-neutral">未绑定</span>
{/if}
</dd>
</div>
<div>
<dt class="text-xs font-medium uppercase tracking-wide text-surface-400">创建时间</dt>
<dt class="text-xs font-medium uppercase tracking-wide text-surface-600">创建时间</dt>
<dd class="mt-0.5 text-surface-800">{fmtDate(proj.createdAt)}</dd>
</div>
</dl>
@@ -273,7 +273,7 @@
<td class="font-mono text-xs">{s.provider} / {s.roleId}</td>
<td class="font-mono text-xs">{s.model}</td>
<td class="tabular-nums">{s.runCount}</td>
<td class="text-surface-500">{fmtDate(s.updatedAt)}</td>
<td class="text-surface-700">{fmtDate(s.updatedAt)}</td>
</tr>
{/each}
</tbody>
@@ -122,7 +122,7 @@
</div>
<div class="mt-6 flex items-center gap-3 border-t border-surface-100 pt-4">
<span class="text-xs text-surface-400"
<span class="text-xs text-surface-600"
>{conn.updatedAt ? '更新于 ' + fmtDate(conn.updatedAt) : '尚未配置'}</span
>
<div class="flex-1"></div>
@@ -134,7 +134,7 @@
<div class="saas-card-pad border-dashed">
<h3 class="saas-section-title mb-2">运行时解析</h3>
<ul class="space-y-2 text-sm text-surface-500">
<ul class="space-y-2 text-sm text-surface-700">
<li class="flex gap-2">
<span class="text-primary-500"></span>
<span>自带密钥:智能体会使用本连接的接口地址与访问令牌。</span>
@@ -155,7 +155,7 @@
>
<div class="flex flex-wrap items-center gap-2.5">
<span class="text-base font-semibold text-surface-900">{t.name}</span>
<span class="font-mono text-xs text-surface-400">/{t.slug}</span>
<span class="font-mono text-xs text-surface-600">/{t.slug}</span>
<span class="saas-badge-neutral">{t.memberCount} 成员</span>
<div class="ml-auto flex flex-wrap gap-2">
<Collapsible.Trigger class="saas-btn-secondary !py-1.5 text-sm">
@@ -167,14 +167,14 @@
</div>
</div>
{#if t.description}
<p class="mt-1.5 text-sm text-surface-500">{t.description}</p>
<p class="mt-1.5 text-sm text-surface-700">{t.description}</p>
{/if}
<p class="mt-1 text-xs text-surface-400">创建于 {fmtDate(t.createdAt)}</p>
<p class="mt-1 text-xs text-surface-600">创建于 {fmtDate(t.createdAt)}</p>
<Collapsible.Content>
<div class="mt-4 border-t border-surface-200 pt-4">
{#if loadingMembers && expandedId === t.id}
<p class="text-sm text-surface-400">加载中…</p>
<p class="text-sm text-surface-600">加载中…</p>
{:else if expandedId === t.id}
<div class="mb-4 flex gap-2">
<input
@@ -188,7 +188,7 @@
<button class="saas-btn-secondary shrink-0" onclick={() => addMember(t)}>加入</button>
</div>
{#if teamMembers.length === 0}
<p class="py-3 text-center text-sm text-surface-400">团队暂无成员</p>
<p class="py-3 text-center text-sm text-surface-600">团队暂无成员</p>
{:else}
<table class="data-table">
<thead>
@@ -204,7 +204,7 @@
<tr>
<td class="font-medium">{m.displayName}</td>
<td class="font-mono text-xs">{m.feishuOpenId}</td>
<td class="text-surface-500">{fmtDate(m.createdAt)}</td>
<td class="text-surface-700">{fmtDate(m.createdAt)}</td>
<td class="text-right">
<button class="saas-btn-danger !py-1 text-xs" onclick={() => revokeMember(t, m)}>
移除
@@ -222,5 +222,5 @@
{/each}
</div>
{/if}
<p class="mt-4 text-xs text-surface-400">归档团队会同步撤销其活跃的项目授权。</p>
<p class="mt-4 text-xs text-surface-600">归档团队会同步撤销其活跃的项目授权。</p>
{/if}