bai/curriculum-project-hub
1
0
Fork 1
forked from EduCraft/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/lib/components/EmptyState.svelte
+3 -3
View File
@@ -13,14 +13,14 @@
</script>
<div class="saas-empty">
<div class="mb-1 flex h-12 w-12 items-center justify-center rounded-2xl bg-surface-100 text-surface-400">
<div class="mb-1 flex h-12 w-12 items-center justify-center border border-surface-300 bg-surface-100 text-surface-600">
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25H12" />
</svg>
</div>
<p class="text-sm font-medium text-surface-700">{title}</p>
<p class="text-sm font-medium text-surface-900">{title}</p>
{#if description}
<p class="max-w-sm text-sm text-surface-400">{description}</p>
<p class="max-w-sm text-sm text-surface-600">{description}</p>
{/if}
{#if action}
<div class="mt-2">
hub/admin-web/src/lib/components/FolderNode.svelte
+5 -5
View File
@@ -27,21 +27,21 @@
<div>
<button
type="button"
class="flex w-full items-center gap-2.5 rounded-lg px-3 py-2.5 text-left text-sm transition hover:bg-surface-100"
class="flex w-full items-center gap-2.5 px-3 py-2.5 text-left text-sm transition hover:bg-surface-100"
onclick={() => (open = !open)}
>
<span class="w-3.5 text-center text-xs text-surface-400">{open ? '▾' : '▸'}</span>
<span class="flex h-7 w-7 items-center justify-center rounded-md bg-warning-50 text-warning-700">
<span class="w-3.5 text-center text-xs text-surface-600">{open ? '▾' : '▸'}</span>
<span class="flex h-7 w-7 items-center justify-center border border-warning-300 bg-warning-50 text-warning-800">
<Icon name="folder" class="h-4 w-4" />
</span>
<span class="min-w-0 flex-1 truncate font-medium text-surface-800">{folder.name}</span>
<span class="min-w-0 flex-1 truncate font-medium text-surface-900">{folder.name}</span>
<span class="saas-badge-neutral">{folder.projectCount} 项目</span>
{#if folder.childFolderCount > 0}
<span class="saas-badge-neutral">{folder.childFolderCount} 子夹</span>
{/if}
</button>
{#if open}
<div class="ml-4 border-l border-surface-200 pl-2">
<div class="ml-4 border-l border-surface-300 pl-2">
<FolderTree {folders} {projects} parentId={folder.id} {slug} />
</div>
{/if}
hub/admin-web/src/lib/components/FolderTree.svelte
+4 -4
View File
@@ -30,16 +30,16 @@
{#each childProjects as p (p.id)}
<a
href={`/admin/org/${slug}/projects/${p.id}`}
class="flex items-center gap-2.5 rounded-lg px-3 py-2.5 text-sm transition hover:bg-surface-100"
class="flex items-center gap-2.5 px-3 py-2.5 text-sm transition hover:bg-surface-100"
>
<span class="flex h-7 w-7 items-center justify-center rounded-md bg-primary-50 text-primary-600">
<span class="flex h-7 w-7 items-center justify-center border border-primary-200 bg-primary-50 text-primary-700">
<Icon name="file" class="h-4 w-4" />
</span>
<span class="min-w-0 flex-1 truncate font-medium text-surface-800">{p.name}</span>
<span class="min-w-0 flex-1 truncate font-medium text-surface-900">{p.name}</span>
{#if p.binding}
<span class="saas-badge-success">已绑定</span>
{/if}
<span class="hidden text-xs text-surface-400 sm:inline">{fmtDate(p.createdAt)}</span>
<span class="hidden text-xs text-surface-600 sm:inline">{fmtDate(p.createdAt)}</span>
</a>
{/each}
hub/admin-web/src/lib/components/LoadingState.svelte
+1 -1
View File
@@ -2,7 +2,7 @@
let { label = '加载中…' }: { label?: string } = $props();
</script>
<div class="flex flex-col items-center justify-center gap-3 py-16 text-surface-400">
<div class="flex flex-col items-center justify-center gap-3 py-16 text-surface-600">
<svg class="h-7 w-7 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
hub/admin-web/src/lib/components/Modal.svelte
+1 -1
View File
@@ -26,7 +26,7 @@
<Dialog.Content class="saas-modal">
<div class="mb-4 flex items-start justify-between gap-3">
<Dialog.Title class="text-lg font-semibold text-surface-900">{title}</Dialog.Title>
<Dialog.Close class="saas-btn-ghost !px-2 !py-1 text-surface-400" aria-label="关闭">
<Dialog.Close class="saas-btn-ghost !px-2 !py-1 text-surface-600" aria-label="关闭">
<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
hub/admin-web/src/lib/components/RoleCard.svelte
+5 -5
View File
@@ -76,7 +76,7 @@
<div class="saas-card-pad">
<div class="mb-4 flex flex-wrap items-center gap-2">
<span class="saas-badge-primary font-mono">/{roleId || r.roleId}</span>
<span class="text-sm text-surface-500">{label || r.label}</span>
<span class="text-sm text-surface-700">{label || r.label}</span>
</div>
<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
@@ -97,7 +97,7 @@
<div class="mt-4">
<span class="saas-label">工具白名单</span>
<label class="mb-3 flex cursor-pointer items-center gap-2 rounded-lg border border-surface-200 bg-surface-100/40 px-3 py-2">
<label class="mb-3 flex cursor-pointer items-center gap-2 border border-surface-300 bg-surface-100 px-3 py-2">
<CheckboxControl bind:checked={unrestricted} />
<span class="text-sm">不限（使用全部注册工具）</span>
</label>
@@ -105,10 +105,10 @@
<Checkbox.Group bind:value={selectedTools} disabled={unrestricted}>
{#each Object.entries(groupedTools) as [group, tools]}
<div>
<p class="mb-1.5 text-xs font-semibold uppercase tracking-wide text-surface-400">{group}</p>
<p class="mb-1.5 text-xs font-semibold uppercase tracking-wide text-surface-600">{group}</p>
<div class="grid grid-cols-1 gap-1.5 sm:grid-cols-2">
{#each tools as t}
<label class="flex cursor-pointer items-center gap-2 rounded-md px-2 py-1.5 text-sm hover:bg-surface-100">
<label class="flex cursor-pointer items-center gap-2 px-2 py-1.5 text-sm hover:bg-surface-100">
<Checkbox.Root class="saas-checkbox" value={t.id} id={`tool-${r.id}-${t.id}`}>
{#snippet children({ checked })}
{#if checked}
@@ -138,7 +138,7 @@
</div>
<div class="mt-4 flex flex-wrap items-center gap-3 border-t border-surface-100 pt-4">
<span class="text-xs text-surface-400">更新于 {fmtDate(r.updatedAt)}</span>
<span class="text-xs text-surface-600">更新于 {fmtDate(r.updatedAt)}</span>
<div class="flex-1"></div>
<button class="saas-btn-danger" onclick={onremoved}>删除角色</button>
<button class="saas-btn-primary" onclick={save} disabled={saving}>
hub/admin-web/src/lib/components/SelectField.svelte
+1 -1
View File
@@ -36,7 +36,7 @@
<Select.Value {placeholder} />
</span>
<svg
class="ml-2 h-4 w-4 shrink-0 text-surface-400"
class="ml-2 h-4 w-4 shrink-0 text-surface-600"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
hub/admin-web/src/lib/components/ToastHost.svelte
+1 -1
View File
@@ -11,7 +11,7 @@
<div class="pointer-events-none fixed inset-x-0 top-0 z-[100] flex flex-col items-end gap-2 p-4">
{#each $toasts as t (t.id)}
<div
class="pointer-events-auto flex max-w-sm items-start gap-3 rounded-xl border px-4 py-3 text-sm shadow-lg {kindClass[t.kind] ??
class="pointer-events-auto flex max-w-sm items-start gap-3 border px-4 py-3 text-sm shadow-[4px_4px_0_rgb(15_23_42_/_0.12)] {kindClass[t.kind] ??
kindClass.info}"
role="status"
>