@lark-apaas/coding-templates 0.1.5 → 0.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lark-apaas/coding-templates",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "description": "OpenClaw project templates for mclaw CLI",
   "publishConfig": {
     "access": "public"

package/template-vite-react/README.md

@@ -0,0 +1,175 @@
+# 开发规范
+
+## 技术栈
+
+- 前端: React 19 + TypeScript
+- 样式: Tailwind CSS v4
+- UI 组件: shadcn/ui `import { Button } from "@/components/ui/button";`
+- 图标: lucide-react `import { SearchIcon } from "lucide-react";`
+- 图表: ReactECharts `import ReactECharts from "echarts-for-react";`
+- 动画: framer-motion `import { motion } from "framer-motion";`
+- 路由: react-router-dom `import { Link, useNavigate } from "react-router-dom";`
+
+---
+
+## 项目结构
+
+```
+client/src/
+├── app.tsx              # 路由注册
+├── index.css            # 全局样式 + 主题变量
+├── components/          # 全局共享组件
+│   └── ui/              # shadcn/ui 内置组件（勿手动修改）
+├── pages/               # 页面模块（每个页面一个目录）
+│   └── home/
+│       ├── index.tsx           # 页面入口
+│       └── components/         # 页面专属组件
+├── hooks/               # 自定义 Hooks
+└── lib/                 # 工具函数（cn() 等）
+```
+
+---
+
+## 页面与组件规范
+
+**页面文件只做骨架编排，不包含具体 UI 实现。**
+
+```tsx
+// client/src/pages/dashboard/index.tsx
+import { StatsSection } from "./components/stats-section";
+import { DataTableSection } from "./components/data-table-section";
+
+export default function DashboardPage() {
+  return (
+    <div className="space-y-8">
+      <StatsSection />
+      <DataTableSection />
+    </div>
+  );
+}
+```
+
+**规则：**
+
+- 每个视觉上独立的区块拆为一个组件文件，即使只出现一次
+- 单个组件文件不超过 **150 行**，超出时进一步拆分子组件
+- 页面专属组件放在 `pages/<page>/components/`
+- 跨页面复用的组件放在 `client/src/components/`
+- 相同 UI 片段出现 **≥2 次**时，必须提取为可复用组件
+- 文件名 kebab-case（`stat-card.tsx`），组件名 PascalCase（`StatCard`）
+- 组件之间**禁止循环引用**
+
+---
+
+## 路由注册
+
+新增页面在 `client/src/app.tsx` 中注册：
+
+```tsx
+<Route element={<Layout />}>
+  <Route index element={<HomePage />} />
+  <Route path="dashboard" element={<DashboardPage />} />
+  <Route path="*" element={<NotFoundPage />} />
+</Route>
+```
+
+**新增页面步骤：**
+
+1. 在 `client/src/pages/` 下新建页面目录和 `index.tsx`
+2. 在 `app.tsx` 的 `<Routes>` 内添加 `<Route>` 配置
+
+**路由跳转必须使用 react-router-dom：**
+
+- 组件内跳转：`<Link to="/dashboard">Dashboard</Link>`
+- 编程式跳转：`const navigate = useNavigate(); navigate("/dashboard");`
+- **禁止使用** `<a href="/">` 或 `window.location` 进行页面内跳转
+
+---
+
+## 样式与主题
+
+### 主题变量
+
+主题色定义在 `client/src/index.css` 中，通过 `:root` CSS 变量 + `@theme inline` 注册到 Tailwind。
+
+**语义化颜色对照：**
+
+| 用途 | Tailwind 类 | CSS 变量 |
+|------|------------|----------|
+| 页面背景 | `bg-background` | `--background` |
+| 主文本 | `text-foreground` | `--foreground` |
+| 卡片背景 | `bg-card` | `--card` |
+| 次要文本 | `text-muted-foreground` | `--muted-foreground` |
+| 主色 | `bg-primary` / `text-primary` | `--primary` |
+| 强调色 | `bg-accent` | `--accent` |
+| 边框 | `border-border` | `--border` |
+| 危险色 | `text-destructive` | `--destructive` |
+| 成功色 | `text-success-foreground` | `--success-foreground` |
+| 警告色 | `text-warning-foreground` | `--warning-foreground` |
+| 图表色 | `bg-chart-1` ~ `bg-chart-5` | `--chart-1` ~ `--chart-5` |
+
+**颜色使用规则：**
+
+- 主题色（背景、文本、主色、边框等）**必须使用语义化变量类**
+- 灰阶辅助色（细节装饰、次要分隔线）可使用 Tailwind 原生色（如 `text-gray-500`）
+- 类名合并使用 `cn()`：`import { cn } from "@/lib/utils"`
+
+### 主题增量修改规范
+
+修改主题时，**只覆盖需要变更的变量**：
+
+```css
+/* 正确：仅修改需要的变量 */
+:root {
+  --primary: hsl(150, 60%, 40%);
+  --primary-foreground: hsl(0, 0%, 100%);
+}
+
+/* 禁止：复制整个 :root 块后修改 */
+```
+
+- 新增自定义颜色变量时，必须同时在 `:root` 和 `@theme inline` 中注册
+- 禁止直接修改 `@theme inline` 中已有的 `--color-*` 映射关系
+- 禁止删除已有的主题变量（可能被 shadcn/ui 组件依赖）
+
+---
+
+## 布局与交互
+
+### 响应式布局
+
+- 容器使用 `max-w-*` + `mx-auto` 居中，禁止内容在大屏贴边延伸
+- 多列布局使用 `grid` + 断点类：`grid-cols-1 md:grid-cols-2 lg:grid-cols-3`
+- flex 子元素设置 `min-w-0`，多元素横排时加 `flex-wrap`
+- 禁止固定像素宽度作为主容器（如 `w-[720px]`）
+
+### 内容自适应
+
+- 区块高度由内容撑开，禁止固定 `h-` 值（图表容器除外）
+- 图片：`max-w-full h-auto`
+- 长文本：`break-words`
+- 单行截断：`truncate`
+- 表格/代码块：`overflow-x-auto`
+
+### 交互规范
+
+- 所有交互元素（按钮、链接、标签页等）必须有**实际交互逻辑**和**可见反馈**
+- 禁止空函数（`onClick={() => {}}`）或仅 `console.log` 的响应
+- 禁止 `href="#"` 占位链接、无内容切换的标签页、空下拉菜单
+- 禁止"导出"、"分享"等无法真正执行的操作按钮
+- 如功能暂未实现，**删除该入口**，不实现假按钮
+
+---
+
+## 自检清单
+
+| 检查项 | 验收标准 |
+|--------|---------|
+| 页面拆分 | 页面文件只做骨架编排；每个区块为独立组件；单文件 ≤150 行 |
+| 组件复用 | 相同片段 ≥2 次已提取为组件；文件名 kebab-case，组件名 PascalCase |
+| 路由注册 | 新页面已在 `app.tsx` 注册；跳转使用 `<Link>` / `useNavigate()`，无 `<a href>` |
+| 主题色 | 使用语义化变量类（`bg-background`、`text-primary` 等）；未硬编码颜色值 |
+| 主题修改 | 仅增量覆盖变更的变量；新增色同时注册 `:root` 和 `@theme inline` |
+| 响应式 | 容器 `max-w-*` + `mx-auto`；多列布局窄屏退化单列；flex 有 `min-w-0` |
+| 内容自适应 | 无固定 `h-`（图表除外）；长文本 `break-words`；表格 `overflow-x-auto` |
+| 交互完整性 | 所有按钮/链接有实际处理器和可见反馈；无空响应、无假按钮 |

package/template-vite-react/client/index.html

@@ -4,7 +4,8 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>{{projectName}}</title>
+    <title>应用标题</title>
+    <link href="https://lf3-static.bytednsdoc.com/obj/eden-cn/ylcylz_fsph_ryhs/ljhwZthlaukjlkulzlp/feisuda/feisuda.svg" rel="shortcut icon"/>
   </head>
   <body>
     <div id="root"></div>

package/template-vite-react/client/src/components/layout.tsx

@@ -1,10 +1,8 @@
 import { Outlet } from "react-router-dom";
-import { Header } from "@/components/header";
 
 export function Layout() {
   return (
     <div className="min-h-screen bg-background text-foreground">
-      <Header />
       <main className="container mx-auto px-4 py-8">
         <Outlet />
       </main>

package/template-vite-react/client/src/components/ui/README.md

@@ -0,0 +1,134 @@
+# shadcn/ui 组件开发指南
+
+## 核心原则
+
+- 组件位置：`/client/src/components/ui/`
+- 图标库：必须使用 `lucide-react`，禁用 Emoji
+- 查阅源码实现：直接读取组件源码了解最新组件实现
+- 交互系统：Button、Badge 使用 elevate 遮罩系统处理 hover/active 状态（通过 `::after` 伪元素叠加 `--elevate-1` / `--elevate-2`）
+
+## 关键组件规范
+
+#### 1. Button 组件
+
+**导入路径**：`import { Button } from '@/components/ui/button'`
+
+**Props**：
+- `variant`: `"link" | "default" | "destructive" | "outline" | "secondary" | "ghost"` - 按钮样式变体
+
+```tsx
+// ✅ 使用变体
+<Button variant="secondary">标准按钮</Button>
+
+// ✅ 自定义颜色时必须配对前景色
+<Button className="bg-primary text-primary-foreground">自定义按钮</Button>
+```
+
+#### 2. Badge 组件
+
+**导入路径**：`import { Badge } from '@/components/ui/badge'`
+
+**Props**：
+- `variant`: `"default" | "destructive" | "outline" | "secondary"` - 样式变体
+
+```tsx
+// ✅ 使用变体
+<Badge>默认</Badge>
+<Badge variant="secondary">次要</Badge>
+<Badge variant="outline">边框</Badge>
+<Badge variant="destructive">危险</Badge>
+```
+
+#### 3. Alert 组件
+
+**导入路径**：`import { Alert, AlertTitle, AlertDescription, AlertAction } from '@/components/ui/alert'`
+
+**Props**：
+- `variant`: `"default" | "destructive" | "success" | "warning"` - 样式变体
+
+```tsx
+// ✅ default / destructive / success / warning 四种变体
+<Alert variant="success">
+  <CheckCircle className="size-4" />
+  <AlertTitle>操作成功</AlertTitle>
+  <AlertDescription>您的更改已保存</AlertDescription>
+</Alert>
+
+<Alert variant="warning">
+  <AlertTriangle className="size-4" />
+  <AlertTitle>警告</AlertTitle>
+  <AlertDescription>请注意检查</AlertDescription>
+</Alert>
+
+```
+
+#### 4. Empty 组件
+
+**导入路径**：`import { Empty, EmptyHeader, EmptyMedia, EmptyTitle, EmptyDescription, EmptyContent } from '@/components/ui/empty'`
+
+**子组件 Props**：
+- `EmptyMedia` 组件的 `variant`: `"default" | "icon"` - 媒体展示方式
+
+```tsx
+// 标准结构：EmptyHeader 包含 EmptyMedia + EmptyTitle + EmptyDescription
+<Empty>
+  <EmptyHeader>
+    <EmptyMedia variant="icon">
+      <SearchIcon className="size-6" />
+    </EmptyMedia>
+    <EmptyTitle>暂无数据</EmptyTitle>
+    <EmptyDescription>当前没有找到相关内容</EmptyDescription>
+  </EmptyHeader>
+  <EmptyContent>
+    <Button>添加数据</Button>
+  </EmptyContent>
+</Empty>
+```
+
+#### 5. Card Padding 系统
+
+**导入路径**：`import { CardHeader, CardContent, CardFooter } from '@/components/ui/card'`
+
+- `CardHeader`: `p-6` (24px 全方向)
+- `CardContent`: `p-6 pt-0` (与 header 无缝衔接)
+- `CardFooter`: `p-6 pt-0` (与 content 无缝衔接)
+
+#### 6. Dialog 组件
+
+**导入路径**：`import { Dialog, DialogContent } from '@/components/ui/dialog'`
+
+Dialog 默认提供了右上角的close能力，同时也提供了自定义关闭按钮的能力，即通过设置showCloseButton为false来关闭默认的关闭按钮。所以当默认存在close时，禁止在内容区域提供自定义的关闭按钮。
+
+#### 7. Image 组件
+
+**导入路径**：`import { Image } from '@/components/ui/image'`
+
+**Props**：支持原生 `<img>` 标签所有属性。
+
+```typescript
+interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> 
+```
+
+**使用规范**：
+
+1. **响应式图片场景**：当图片尺寸需要根据视口宽度变化时，必须设置 `sizes` 属性
+2. **固定尺寸图片场景**：当图片有固定尺寸时，必须设置 `width` 属性（number 类型）
+3. **必须提供有意义的 `alt` 属性**
+
+```tsx
+// ✅ 响应式图片
+<Image
+  src="/path/to/image.jpg"
+  alt="描述文字"
+  sizes="(max-width: 768px) 100vw, 50vw"
+/>
+
+// ✅ 固定尺寸图片（width/height 使用 number）
+<Image
+  src="/path/to/image.jpg"
+  alt="描述文字"
+  width={300}
+  height={200}
+/>
+
+```

package/template-vite-react/client/src/components/ui/accordion.tsx

@@ -1,23 +1,25 @@
-import { Accordion as AccordionPrimitive } from "@base-ui/react/accordion"
+"use client"
+
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDownIcon } from "lucide-react"
 
 import { cn } from "@/lib/utils"
-import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"
 
-function Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {
-  return (
-    <AccordionPrimitive.Root
-      data-slot="accordion"
-      className={cn("flex w-full flex-col", className)}
-      {...props}
-    />
-  )
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
 }
 
-function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
   return (
     <AccordionPrimitive.Item
       data-slot="accordion-item"
-      className={cn("not-last:border-b", className)}
+      className={cn("border-b last:border-b-0", className)}
       {...props}
     />
   )
@@ -27,20 +29,19 @@ function AccordionTrigger({
   className,
   children,
   ...props
-}: AccordionPrimitive.Trigger.Props) {
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
   return (
     <AccordionPrimitive.Header className="flex">
       <AccordionPrimitive.Trigger
         data-slot="accordion-trigger"
         className={cn(
-          "group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
+          "focus-visible:border-ring focus-visible:ring-ring/20 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none enabled:hover:underline focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
           className
         )}
         {...props}
       >
         {children}
-        <ChevronDownIcon data-slot="accordion-trigger-icon" className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden" />
-        <ChevronUpIcon data-slot="accordion-trigger-icon" className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline" />
+        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
       </AccordionPrimitive.Trigger>
     </AccordionPrimitive.Header>
   )
@@ -50,22 +51,15 @@ function AccordionContent({
   className,
   children,
   ...props
-}: AccordionPrimitive.Panel.Props) {
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
   return (
-    <AccordionPrimitive.Panel
+    <AccordionPrimitive.Content
       data-slot="accordion-content"
-      className="overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
       {...props}
     >
-      <div
-        className={cn(
-          "h-(--accordion-panel-height) pt-0 pb-2.5 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
-          className
-        )}
-      >
-        {children}
-      </div>
-    </AccordionPrimitive.Panel>
+      <div className={cn("pt-0 pb-4", className)}>{children}</div>
+    </AccordionPrimitive.Content>
   )
 }
 

package/template-vite-react/client/src/components/ui/alert-dialog.tsx

@@ -1,22 +1,28 @@
 "use client"
 
 import * as React from "react"
-import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog"
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
 
 import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
+import { buttonVariants } from "@/components/ui/button"
 
-function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
   return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
 }
 
-function AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
   return (
     <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
   )
 }
 
-function AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
   return (
     <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
   )
@@ -25,12 +31,12 @@ function AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {
 function AlertDialogOverlay({
   className,
   ...props
-}: AlertDialogPrimitive.Backdrop.Props) {
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
   return (
-    <AlertDialogPrimitive.Backdrop
+    <AlertDialogPrimitive.Overlay
       data-slot="alert-dialog-overlay"
       className={cn(
-        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
         className
       )}
       {...props}
@@ -40,19 +46,15 @@ function AlertDialogOverlay({
 
 function AlertDialogContent({
   className,
-  size = "default",
   ...props
-}: AlertDialogPrimitive.Popup.Props & {
-  size?: "default" | "sm"
-}) {
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
   return (
     <AlertDialogPortal>
       <AlertDialogOverlay />
-      <AlertDialogPrimitive.Popup
+      <AlertDialogPrimitive.Content
         data-slot="alert-dialog-content"
-        data-size={size}
         className={cn(
-          "group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-sm:max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 max-w-lg",
           className
         )}
         {...props}
@@ -68,10 +70,7 @@ function AlertDialogHeader({
   return (
     <div
       data-slot="alert-dialog-header"
-      className={cn(
-        "grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
-        className
-      )}
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
       {...props}
     />
   )
@@ -85,23 +84,7 @@ function AlertDialogFooter({
     <div
       data-slot="alert-dialog-footer"
       className={cn(
-        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogMedia({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-dialog-media"
-      className={cn(
-        "mb-2 inline-flex size-10 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6",
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
         className
       )}
       {...props}
@@ -116,10 +99,7 @@ function AlertDialogTitle({
   return (
     <AlertDialogPrimitive.Title
       data-slot="alert-dialog-title"
-      className={cn(
-        "text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
-        className
-      )}
+      className={cn("text-lg font-semibold", className)}
       {...props}
     />
   )
@@ -132,10 +112,7 @@ function AlertDialogDescription({
   return (
     <AlertDialogPrimitive.Description
       data-slot="alert-dialog-description"
-      className={cn(
-        "text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
-        className
-      )}
+      className={cn("text-muted-foreground text-sm", className)}
       {...props}
     />
   )
@@ -144,11 +121,10 @@ function AlertDialogDescription({
 function AlertDialogAction({
   className,
   ...props
-}: React.ComponentProps<typeof Button>) {
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
   return (
-    <Button
-      data-slot="alert-dialog-action"
-      className={cn(className)}
+    <AlertDialogPrimitive.Action
+      className={cn(buttonVariants(), className)}
       {...props}
     />
   )
@@ -156,16 +132,11 @@ function AlertDialogAction({
 
 function AlertDialogCancel({
   className,
-  variant = "outline",
-  size = "default",
   ...props
-}: AlertDialogPrimitive.Close.Props &
-  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
   return (
-    <AlertDialogPrimitive.Close
-      data-slot="alert-dialog-cancel"
-      className={cn(className)}
-      render={<Button variant={variant} size={size} />}
+    <AlertDialogPrimitive.Cancel
+      className={cn(buttonVariants({ variant: "outline" }), className)}
       {...props}
     />
   )
@@ -173,15 +144,14 @@ function AlertDialogCancel({
 
 export {
   AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
   AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
   AlertDialogHeader,
-  AlertDialogMedia,
-  AlertDialogOverlay,
-  AlertDialogPortal,
+  AlertDialogFooter,
   AlertDialogTitle,
-  AlertDialogTrigger,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
 }

package/template-vite-react/client/src/components/ui/alert.tsx

@@ -4,13 +4,18 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const alertVariants = cva(
-  "group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
   {
     variants: {
       variant: {
         default: "bg-card text-card-foreground",
         destructive:
-          "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+        // 新增语义化 success/warning variant
+        success:
+          "bg-success text-success-foreground border-success/50 [&>svg]:text-success-foreground *:data-[slot=alert-description]:text-success-foreground/90",
+        warning:
+          "bg-warning text-warning-foreground border-warning/50 [&>svg]:text-warning-foreground *:data-[slot=alert-description]:text-warning-foreground/90",
       },
     },
     defaultVariants: {
@@ -39,7 +44,7 @@ function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="alert-title"
       className={cn(
-        "font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
         className
       )}
       {...props}
@@ -55,7 +60,7 @@ function AlertDescription({
     <div
       data-slot="alert-description"
       className={cn(
-        "text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
         className
       )}
       {...props}
@@ -63,14 +68,4 @@ function AlertDescription({
   )
 }
 
-function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-action"
-      className={cn("absolute top-2 right-2", className)}
-      {...props}
-    />
-  )
-}
-
-export { Alert, AlertTitle, AlertDescription, AlertAction }
+export { Alert, AlertTitle, AlertDescription }