dadao
5be55fdccb
用户反馈"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。
121 lines
3.8 KiB
JavaScript
121 lines
3.8 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
export default {
|
|
content: ["./index.html", "./src/**/*.{ts,tsx}"],
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
// 底色：暖白纸面，不用纯白，避免刺眼、也让卡片有层次
|
|
paper: {
|
|
50: "#FCFCFA",
|
|
100: "#F7F7F3",
|
|
200: "#F0F0EA",
|
|
300: "#E6E6DE",
|
|
},
|
|
// 分隔线与描边
|
|
line: {
|
|
100: "#ECECE6",
|
|
200: "#E1E1D9",
|
|
300: "#D2D2C8",
|
|
},
|
|
// 文字与中性
|
|
ink: {
|
|
50: "#F6F8F7",
|
|
100: "#E9EDEB",
|
|
200: "#D7DDDA",
|
|
300: "#BAC3C0",
|
|
400: "#96A19D",
|
|
500: "#6D7874",
|
|
600: "#4E5956",
|
|
700: "#39443F",
|
|
800: "#252E2A",
|
|
900: "#161C1A",
|
|
},
|
|
// 主色：墨松绿，克制、有"工作台"气质，避开任务工具常见的荧光蓝
|
|
primary: {
|
|
50: "#EFF5F3",
|
|
100: "#DBE9E4",
|
|
200: "#B7D2C9",
|
|
300: "#8CB6A9",
|
|
400: "#619688",
|
|
500: "#41796A",
|
|
600: "#2F6054",
|
|
700: "#264E44",
|
|
800: "#1E3E36",
|
|
900: "#172F29",
|
|
},
|
|
// 强调色：陶土橙，只用在"需要人注意"的地方
|
|
clay: {
|
|
50: "#FBF2EB",
|
|
100: "#F5DFCE",
|
|
200: "#EBC1A2",
|
|
300: "#DFA176",
|
|
400: "#D08454",
|
|
500: "#C2703D",
|
|
600: "#A65B2F",
|
|
700: "#854926",
|
|
800: "#65381E",
|
|
900: "#472716",
|
|
},
|
|
sage: { 500: "#2F7D5E", 50: "#EAF4EF" },
|
|
wheat: { 500: "#A97C25", 50: "#F8F1E2" },
|
|
rust: { 500: "#B04A32", 50: "#FAEDE9" },
|
|
sky: { 500: "#3E6F91", 50: "#EBF2F7" },
|
|
},
|
|
fontFamily: {
|
|
sans: [
|
|
"Inter",
|
|
"-apple-system",
|
|
"PingFang SC",
|
|
"HarmonyOS Sans SC",
|
|
"Microsoft YaHei",
|
|
"system-ui",
|
|
"sans-serif",
|
|
],
|
|
display: ["Inter", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "sans-serif"],
|
|
mono: ["JetBrains Mono", "SFMono-Regular", "Consolas", "monospace"],
|
|
},
|
|
fontSize: {
|
|
"2xs": ["11px", { lineHeight: "16px", letterSpacing: "0.02em" }],
|
|
xs: ["12px", { lineHeight: "18px" }],
|
|
sm: ["13px", { lineHeight: "20px" }],
|
|
base: ["14px", { lineHeight: "22px" }],
|
|
lg: ["16px", { lineHeight: "24px" }],
|
|
xl: ["18px", { lineHeight: "26px", letterSpacing: "-0.01em" }],
|
|
"2xl": ["22px", { lineHeight: "30px", letterSpacing: "-0.02em" }],
|
|
"3xl": ["28px", { lineHeight: "36px", letterSpacing: "-0.02em" }],
|
|
"4xl": ["36px", { lineHeight: "42px", letterSpacing: "-0.03em" }],
|
|
},
|
|
borderRadius: {
|
|
md: "8px",
|
|
lg: "10px",
|
|
xl: "14px",
|
|
"2xl": "18px",
|
|
"3xl": "24px",
|
|
},
|
|
boxShadow: {
|
|
card: "0 1px 2px rgba(22,28,26,0.04), 0 8px 24px -16px rgba(22,28,26,0.35)",
|
|
pop: "0 2px 6px rgba(22,28,26,0.06), 0 20px 48px -24px rgba(22,28,26,0.35)",
|
|
inset: "inset 0 1px 0 rgba(255,255,255,0.6)",
|
|
},
|
|
keyframes: {
|
|
"fade-in": { from: { opacity: "0" }, to: { opacity: "1" } },
|
|
"slide-up": {
|
|
from: { opacity: "0", transform: "translateY(6px)" },
|
|
to: { opacity: "1", transform: "translateY(0)" },
|
|
},
|
|
"slide-in-right": {
|
|
from: { opacity: "0", transform: "translateX(24px)" },
|
|
to: { opacity: "1", transform: "translateX(0)" },
|
|
},
|
|
shimmer: { "100%": { transform: "translateX(100%)" } },
|
|
},
|
|
animation: {
|
|
"fade-in": "fade-in .18s ease-out both",
|
|
"slide-up": "slide-up .22s cubic-bezier(.2,.7,.3,1) both",
|
|
"slide-in-right": "slide-in-right .24s cubic-bezier(.2,.7,.3,1) both",
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
};
|