From 06a7b1668b44f111eca5d08bc8c2c9d41d8e617e Mon Sep 17 00:00:00 2001
From: "Somhairle H. Marisol" <muqiu-han@outlook.com>
Date: Fri, 18 Sep 2026 08:26:30 +0800
Subject: chore(frontend): shadcn-svelte / Tailwind / layerchart 工具链初始化
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[变更性质]
本轮为维护性依赖与配置初始化，不改变业务页面（页面迁移见后续提交）。

[维护内容]
按 Leader 返工指令，前端 UI 组件库全量迁移 shadcn-svelte，图表渲染
从 echarts 换为 layerchart，需要一次性引入配套依赖与构建配置。

[实现方案]
package.json/pnpm-lock.yaml：tailwindcss@4、@tailwindcss/vite、
tw-animate-css、shadcn-svelte、bits-ui、tailwind-variants、clsx、
tailwind-merge、@lucide/svelte、layerchart、@fontsource-variable/inter
与 @types/node；echarts 保留至页面迁移完成后移除。pnpm-workspace.yaml
声明 allowBuilds（esbuild、@tailwindcss/oxide）。components.json 采用
mira preset，别名 $lib。tsconfig 新增 $lib paths；vite.config.ts 加入
tailwindcss 插件、$lib alias（vitest 需要）与 test 环境配置。
src/lib/components/ 为 shadcn 生成的 UI 组件源码（button/input/label/
card/badge/alert/select/table/tabs/separator/chart），src/lib/utils.ts
为 cn 工具。app.css 引入 tailwind 与 shadcn CSS 变量并调整为 teal
主题（primary #0f766e、radius 0.375rem、双主题 chart-1..5），保留
legacy 选择器（banner/beat/table.data/metric 等），mobileCss.test.ts
依赖其语义断言。

[影响范围]
构建链与主题变量；后续页面提交逐步消费这些组件，npm run check/test/
build 已全绿验证。
---
 .../src/lib/components/ui/card/card-action.svelte  | 23 ++++++++++++++++++++
 .../src/lib/components/ui/card/card-content.svelte | 20 +++++++++++++++++
 .../lib/components/ui/card/card-description.svelte | 20 +++++++++++++++++
 .../src/lib/components/ui/card/card-footer.svelte  | 20 +++++++++++++++++
 .../src/lib/components/ui/card/card-header.svelte  | 23 ++++++++++++++++++++
 .../src/lib/components/ui/card/card-title.svelte   | 20 +++++++++++++++++
 frontend/src/lib/components/ui/card/card.svelte    | 22 +++++++++++++++++++
 frontend/src/lib/components/ui/card/index.ts       | 25 ++++++++++++++++++++++
 8 files changed, 173 insertions(+)
 create mode 100644 frontend/src/lib/components/ui/card/card-action.svelte
 create mode 100644 frontend/src/lib/components/ui/card/card-content.svelte
 create mode 100644 frontend/src/lib/components/ui/card/card-description.svelte
 create mode 100644 frontend/src/lib/components/ui/card/card-footer.svelte
 create mode 100644 frontend/src/lib/components/ui/card/card-header.svelte
 create mode 100644 frontend/src/lib/components/ui/card/card-title.svelte
 create mode 100644 frontend/src/lib/components/ui/card/card.svelte
 create mode 100644 frontend/src/lib/components/ui/card/index.ts

(limited to 'frontend/src/lib/components/ui/card')

diff --git a/frontend/src/lib/components/ui/card/card-action.svelte b/frontend/src/lib/components/ui/card/card-action.svelte
new file mode 100644
index 0000000..53b3861
--- /dev/null
+++ b/frontend/src/lib/components/ui/card/card-action.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-action"
+	class={cn(
+		"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/frontend/src/lib/components/ui/card/card-content.svelte b/frontend/src/lib/components/ui/card/card-content.svelte
new file mode 100644
index 0000000..bf5dac7
--- /dev/null
+++ b/frontend/src/lib/components/ui/card/card-content.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-content"
+	class={cn("px-(--card-spacing)", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/frontend/src/lib/components/ui/card/card-description.svelte b/frontend/src/lib/components/ui/card/card-description.svelte
new file mode 100644
index 0000000..5d5c09a
--- /dev/null
+++ b/frontend/src/lib/components/ui/card/card-description.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLParagraphElement>> = $props();
+</script>
+
+<p
+	bind:this={ref}
+	data-slot="card-description"
+	class={cn("text-muted-foreground text-xs/relaxed", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</p>
diff --git a/frontend/src/lib/components/ui/card/card-footer.svelte b/frontend/src/lib/components/ui/card/card-footer.svelte
new file mode 100644
index 0000000..ce4a2c0
--- /dev/null
+++ b/frontend/src/lib/components/ui/card/card-footer.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-footer"
+	class={cn("rounded-b-lg px-(--card-spacing) [.border-t]:pt-(--card-spacing) flex items-center", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/frontend/src/lib/components/ui/card/card-header.svelte b/frontend/src/lib/components/ui/card/card-header.svelte
new file mode 100644
index 0000000..019a3f9
--- /dev/null
+++ b/frontend/src/lib/components/ui/card/card-header.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-header"
+	class={cn(
+		"gap-1 rounded-t-lg px-(--card-spacing) [.border-b]:pb-(--card-spacing) group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/frontend/src/lib/components/ui/card/card-title.svelte b/frontend/src/lib/components/ui/card/card-title.svelte
new file mode 100644
index 0000000..d95ec39
--- /dev/null
+++ b/frontend/src/lib/components/ui/card/card-title.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-title"
+	class={cn("text-sm font-medium", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/frontend/src/lib/components/ui/card/card.svelte b/frontend/src/lib/components/ui/card/card.svelte
new file mode 100644
index 0000000..345eaf2
--- /dev/null
+++ b/frontend/src/lib/components/ui/card/card.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		size = "default",
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & { size?: "default" | "sm" } = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card"
+	data-size={size}
+	class={cn("ring-foreground/10 bg-card text-card-foreground gap-(--card-spacing) overflow-hidden rounded-lg py-(--card-spacing) text-xs/relaxed ring-1 [--card-spacing:--spacing(4)] has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(3)] *:[img:first-child]:rounded-t-lg *:[img:last-child]:rounded-b-lg group/card flex flex-col", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>
diff --git a/frontend/src/lib/components/ui/card/index.ts b/frontend/src/lib/components/ui/card/index.ts
new file mode 100644
index 0000000..5705f13
--- /dev/null
+++ b/frontend/src/lib/components/ui/card/index.ts
@@ -0,0 +1,25 @@
+import Action from "./card-action.svelte";
+import Content from "./card-content.svelte";
+import Description from "./card-description.svelte";
+import Footer from "./card-footer.svelte";
+import Header from "./card-header.svelte";
+import Title from "./card-title.svelte";
+import Root from "./card.svelte";
+
+export {
+	Root,
+	Content,
+	Description,
+	Footer,
+	Header,
+	Title,
+	Action,
+	//
+	Root as Card,
+	Content as CardContent,
+	Description as CardDescription,
+	Footer as CardFooter,
+	Header as CardHeader,
+	Title as CardTitle,
+	Action as CardAction,
+};
-- 
cgit v1.2.3