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 已全绿验证。
---
 frontend/src/lib/components/ui/table/index.ts      | 28 ++++++++++++++++++++++
 .../src/lib/components/ui/table/table-body.svelte  | 15 ++++++++++++
 .../lib/components/ui/table/table-caption.svelte   | 20 ++++++++++++++++
 .../src/lib/components/ui/table/table-cell.svelte  | 15 ++++++++++++
 .../lib/components/ui/table/table-footer.svelte    | 20 ++++++++++++++++
 .../src/lib/components/ui/table/table-head.svelte  | 15 ++++++++++++
 .../lib/components/ui/table/table-header.svelte    | 20 ++++++++++++++++
 .../src/lib/components/ui/table/table-row.svelte   | 20 ++++++++++++++++
 frontend/src/lib/components/ui/table/table.svelte  | 17 +++++++++++++
 9 files changed, 170 insertions(+)
 create mode 100644 frontend/src/lib/components/ui/table/index.ts
 create mode 100644 frontend/src/lib/components/ui/table/table-body.svelte
 create mode 100644 frontend/src/lib/components/ui/table/table-caption.svelte
 create mode 100644 frontend/src/lib/components/ui/table/table-cell.svelte
 create mode 100644 frontend/src/lib/components/ui/table/table-footer.svelte
 create mode 100644 frontend/src/lib/components/ui/table/table-head.svelte
 create mode 100644 frontend/src/lib/components/ui/table/table-header.svelte
 create mode 100644 frontend/src/lib/components/ui/table/table-row.svelte
 create mode 100644 frontend/src/lib/components/ui/table/table.svelte

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

diff --git a/frontend/src/lib/components/ui/table/index.ts b/frontend/src/lib/components/ui/table/index.ts
new file mode 100644
index 0000000..841ee58
--- /dev/null
+++ b/frontend/src/lib/components/ui/table/index.ts
@@ -0,0 +1,28 @@
+import Body from "./table-body.svelte";
+import Caption from "./table-caption.svelte";
+import Cell from "./table-cell.svelte";
+import Footer from "./table-footer.svelte";
+import Head from "./table-head.svelte";
+import Header from "./table-header.svelte";
+import Row from "./table-row.svelte";
+import Root from "./table.svelte";
+
+export {
+	Root,
+	Body,
+	Caption,
+	Cell,
+	Footer,
+	Head,
+	Header,
+	Row,
+	//
+	Root as Table,
+	Body as TableBody,
+	Caption as TableCaption,
+	Cell as TableCell,
+	Footer as TableFooter,
+	Head as TableHead,
+	Header as TableHeader,
+	Row as TableRow,
+};
diff --git a/frontend/src/lib/components/ui/table/table-body.svelte b/frontend/src/lib/components/ui/table/table-body.svelte
new file mode 100644
index 0000000..935feae
--- /dev/null
+++ b/frontend/src/lib/components/ui/table/table-body.svelte
@@ -0,0 +1,15 @@
+<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<HTMLTableSectionElement>> = $props();
+</script>
+
+<tbody bind:this={ref} data-slot="table-body" class={cn("[&_tr:last-child]:border-0", className)} {...restProps}>
+	{@render children?.()}
+</tbody>
diff --git a/frontend/src/lib/components/ui/table/table-caption.svelte b/frontend/src/lib/components/ui/table/table-caption.svelte
new file mode 100644
index 0000000..b7a3e98
--- /dev/null
+++ b/frontend/src/lib/components/ui/table/table-caption.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<HTMLElement>> = $props();
+</script>
+
+<caption
+	bind:this={ref}
+	data-slot="table-caption"
+	class={cn("text-muted-foreground mt-4 text-xs", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</caption>
diff --git a/frontend/src/lib/components/ui/table/table-cell.svelte b/frontend/src/lib/components/ui/table/table-cell.svelte
new file mode 100644
index 0000000..a998bf6
--- /dev/null
+++ b/frontend/src/lib/components/ui/table/table-cell.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLTdAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLTdAttributes> = $props();
+</script>
+
+<td bind:this={ref} data-slot="table-cell" class={cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0", className)} {...restProps}>
+	{@render children?.()}
+</td>
diff --git a/frontend/src/lib/components/ui/table/table-footer.svelte b/frontend/src/lib/components/ui/table/table-footer.svelte
new file mode 100644
index 0000000..b9b14eb
--- /dev/null
+++ b/frontend/src/lib/components/ui/table/table-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<HTMLTableSectionElement>> = $props();
+</script>
+
+<tfoot
+	bind:this={ref}
+	data-slot="table-footer"
+	class={cn("bg-muted/50 border-t font-medium [&>tr]:last:border-b-0", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</tfoot>
diff --git a/frontend/src/lib/components/ui/table/table-head.svelte b/frontend/src/lib/components/ui/table/table-head.svelte
new file mode 100644
index 0000000..267c4e0
--- /dev/null
+++ b/frontend/src/lib/components/ui/table/table-head.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLThAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLThAttributes> = $props();
+</script>
+
+<th bind:this={ref} data-slot="table-head" class={cn("text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0", className)} {...restProps}>
+	{@render children?.()}
+</th>
diff --git a/frontend/src/lib/components/ui/table/table-header.svelte b/frontend/src/lib/components/ui/table/table-header.svelte
new file mode 100644
index 0000000..f47d259
--- /dev/null
+++ b/frontend/src/lib/components/ui/table/table-header.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<HTMLTableSectionElement>> = $props();
+</script>
+
+<thead
+	bind:this={ref}
+	data-slot="table-header"
+	class={cn("[&_tr]:border-b", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</thead>
diff --git a/frontend/src/lib/components/ui/table/table-row.svelte b/frontend/src/lib/components/ui/table/table-row.svelte
new file mode 100644
index 0000000..c7b05c8
--- /dev/null
+++ b/frontend/src/lib/components/ui/table/table-row.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<HTMLTableRowElement>> = $props();
+</script>
+
+<tr
+	bind:this={ref}
+	data-slot="table-row"
+	class={cn("hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors has-aria-expanded:bg-muted/50", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</tr>
diff --git a/frontend/src/lib/components/ui/table/table.svelte b/frontend/src/lib/components/ui/table/table.svelte
new file mode 100644
index 0000000..b2b477f
--- /dev/null
+++ b/frontend/src/lib/components/ui/table/table.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "$lib/utils.js";
+	import type { HTMLTableAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLTableAttributes> = $props();
+</script>
+
+<div data-slot="table-container" class="relative w-full overflow-x-auto">
+	<table bind:this={ref} data-slot="table" class={cn("w-full caption-bottom text-xs", className)} {...restProps}>
+		{@render children?.()}
+	</table>
+</div>
-- 
cgit v1.2.3