feat(web): 重做设计系统与全部页面，前端观感对齐当下审美
用户反馈"UI 太丑、太简陋"。不是换配色，而是先立 token 再让页面去用： - tailwind.config.js：纸白 paper / 墨绿 primary / 陶土橙 clay + 语义色 sage/wheat/rust/sky，字号阶、圆角阶、投影、动效 - index.css：卡片、按钮五种变体、输入、pill/chip、导航、骨架屏 - 新增 icons.tsx（线性图标集）与 ui.tsx（Button/Sheet/Toast/空态/骨架/PageHeader） - 新增 AppShell 取代 Layout + WorkspaceNav：桌面侧栏 + 移动顶部横条，工单未读角标 - 六个页面全部重写：登录、首页、任务、看板、工单、知识、成员、邀请落地 - 详情抽屉改用 Sheet，工单态补齐需求人/办理人/退回次数/动作按钮 e2e 因 DOM 升级同步调整（抽屉按 role=dialog 定位、下拉改用 aria-label）， 三套用例（7 + 8 + 7 项）全部重跑通过；tsc 0 错，构建 45 modules / gzip 76.70 kB。
This commit is contained in:
dadao
+136
-9
@@ -8,30 +8,157 @@
|
||||
#root {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-ink-50 text-ink-900 antialiased;
|
||||
@apply bg-paper-100 font-sans text-base text-ink-800 antialiased;
|
||||
font-feature-settings: "cv05", "ss01";
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
::selection {
|
||||
@apply bg-primary-100 text-primary-900;
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
@apply outline-none ring-2 ring-primary-400/45 ring-offset-1 ring-offset-paper-100;
|
||||
}
|
||||
|
||||
/* 细滚动条，避免默认滚动条破坏整体观感 */
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: theme("colors.line.300") transparent;
|
||||
}
|
||||
*::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
*::-webkit-scrollbar-thumb {
|
||||
@apply rounded-full border-4 border-solid border-transparent bg-line-300 bg-clip-content;
|
||||
}
|
||||
*::-webkit-scrollbar-thumb:hover {
|
||||
@apply bg-ink-300 bg-clip-content;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
@apply font-display text-ink-900;
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
font: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
/* —— 容器 —— */
|
||||
.card {
|
||||
@apply rounded-xl border border-ink-100 bg-white p-5 shadow-sm;
|
||||
@apply rounded-2xl border border-line-200 bg-white shadow-card;
|
||||
}
|
||||
.card-flat {
|
||||
@apply rounded-2xl border border-line-200 bg-white;
|
||||
}
|
||||
.panel {
|
||||
@apply rounded-2xl border border-line-200 bg-paper-50;
|
||||
}
|
||||
|
||||
/* —— 按钮 —— */
|
||||
.btn {
|
||||
@apply inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium
|
||||
transition disabled:cursor-not-allowed disabled:opacity-50;
|
||||
@apply inline-flex select-none items-center justify-center gap-1.5 whitespace-nowrap
|
||||
rounded-lg px-3 py-1.5 text-sm font-medium transition-all duration-150
|
||||
disabled:pointer-events-none disabled:opacity-40;
|
||||
}
|
||||
.btn-primary {
|
||||
@apply btn bg-ink-700 text-white hover:bg-ink-900;
|
||||
@apply btn bg-primary-700 text-white shadow-sm hover:bg-primary-800 active:translate-y-px;
|
||||
}
|
||||
.btn-ghost {
|
||||
@apply btn border border-ink-100 bg-white text-ink-700 hover:bg-ink-50;
|
||||
@apply btn border border-line-200 bg-white text-ink-700 hover:border-line-300 hover:bg-paper-50;
|
||||
}
|
||||
.btn-subtle {
|
||||
@apply btn text-ink-600 hover:bg-ink-100/70 hover:text-ink-900;
|
||||
}
|
||||
.btn-clay {
|
||||
@apply btn bg-clay-500 text-white hover:bg-clay-600 active:translate-y-px;
|
||||
}
|
||||
.btn-danger {
|
||||
@apply btn border border-rust-500/25 bg-rust-50 text-rust-500 hover:bg-rust-50/70;
|
||||
}
|
||||
.btn-sm {
|
||||
@apply px-2.5 py-1 text-xs rounded-md;
|
||||
}
|
||||
.btn-lg {
|
||||
@apply px-4 py-2.5 text-base rounded-xl;
|
||||
}
|
||||
|
||||
/* —— 表单 —— */
|
||||
.input {
|
||||
@apply w-full rounded-lg border border-ink-100 bg-white px-3 py-2 text-sm
|
||||
outline-none focus:border-ink-500 focus:ring-2 focus:ring-ink-500/20;
|
||||
@apply w-full rounded-lg border border-line-200 bg-white px-3 py-2 text-base text-ink-900
|
||||
placeholder:text-ink-400 transition
|
||||
focus:border-primary-400 focus:ring-2 focus:ring-primary-400/20;
|
||||
}
|
||||
.input-flush {
|
||||
@apply w-full border-0 bg-transparent p-0 text-base text-ink-900 outline-none
|
||||
placeholder:text-ink-400;
|
||||
}
|
||||
.label {
|
||||
@apply mb-1 block text-xs font-medium text-ink-500;
|
||||
@apply mb-1.5 block text-xs font-medium tracking-wide text-ink-500;
|
||||
}
|
||||
|
||||
/* —— 徽标 —— */
|
||||
.pill {
|
||||
@apply inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-2xs font-medium;
|
||||
}
|
||||
.chip {
|
||||
@apply inline-flex items-center gap-1 rounded-md bg-paper-200 px-1.5 py-0.5 text-2xs font-medium text-ink-500;
|
||||
}
|
||||
|
||||
/* —— 侧栏 —— */
|
||||
.nav-item {
|
||||
@apply flex items-center gap-2.5 rounded-lg px-3 py-2 text-sm font-medium text-ink-600
|
||||
transition-colors hover:bg-ink-100/60 hover:text-ink-900;
|
||||
}
|
||||
.nav-item-active {
|
||||
@apply bg-primary-900 text-paper-50 shadow-sm hover:bg-primary-900 hover:text-paper-50;
|
||||
}
|
||||
|
||||
/* —— 列表行 —— */
|
||||
.row {
|
||||
@apply flex items-start gap-3 border-b border-line-100 px-4 py-3 transition-colors last:border-0
|
||||
hover:bg-paper-50/80;
|
||||
}
|
||||
|
||||
/* —— 骨架屏 —— */
|
||||
.skeleton {
|
||||
@apply relative overflow-hidden rounded-md bg-line-100;
|
||||
}
|
||||
.skeleton::after {
|
||||
@apply absolute inset-0 -translate-x-full bg-gradient-to-r from-transparent via-white/70 to-transparent;
|
||||
content: "";
|
||||
animation: shimmer 1.6s infinite;
|
||||
}
|
||||
|
||||
.link {
|
||||
@apply text-primary-600 underline decoration-primary-300/60 underline-offset-2 hover:text-primary-700;
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.text-balance {
|
||||
text-wrap: balance;
|
||||
}
|
||||
.no-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
.no-scrollbar {
|
||||
-ms-overflow-style: none;
|
||||
scrollbar-width: none;
|
||||
}
|
||||
.grid-lines {
|
||||
background-image: linear-gradient(to right, rgba(22, 28, 26, 0.04) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, rgba(22, 28, 26, 0.04) 1px, transparent 1px);
|
||||
background-size: 32px 32px;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user