@lark-apaas/coding-templates 0.1.38 → 0.1.39-alpha.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lark-apaas/coding-templates",
-  "version": "0.1.38",
+  "version": "0.1.39-alpha.4",
   "description": "OpenClaw project templates for mclaw CLI",
   "publishConfig": {
     "access": "public"

package/template-apex/README.md

@@ -1,4 +1,4 @@
-# 开发规范
+# 项目技术规范
 
 ## 技术栈
 
@@ -8,28 +8,29 @@
 - 样式: Tailwind CSS v4
 - UI 组件: shadcn/ui `import { Button } from "@/components/ui/button";`
 - 图标: lucide-react `import { SearchIcon } from "lucide-react";`
-- 图表: recharts `import { LineChart } from "recharts";`
+- 图表: echarts-for-react `import ReactECharts from "echarts-for-react";`
 - 动画: framer-motion `import { motion } from "framer-motion";`
 - 路由: react-router-dom `import { Link, useNavigate } from "react-router-dom";`
 - 校验: zod `import { z } from "zod";`
 
 ---
 
-## 项目结构
+## 目录结构
 
 ```
 ├── client/src/                # 前端代码
-│   ├── index.tsx              # 入口（Provider 层级 + 样式引入，勿修改）
-│   ├── app.tsx                # 路由配置
+│   ├── index.tsx              # 入口（勿修改）
+│   ├── app.tsx                # 路由配置（仅在 <Routes> 内增删 <Route>）
 │   ├── index.css              # 全局样式 + 主题变量
 │   ├── api/                   # API 请求封装
 │   │   └── index.ts
 │   ├── components/            # 基础 UI 组件（禁止存放业务组件）
-│   │   └── ui/                # shadcn/ui 内置组件（勿手动修改）
+│   │   ├── layout.tsx         # 全局布局容器（含 <Outlet />）
+│   │   └── ui/                # shadcn/ui 内置组件（勿修改）
 │   ├── pages/                 # 页面模块（每个页面一个目录）
-│   │   ├── HomePage/          # 占位示例页，开发时替换为业务首页
-│   │   │   └── HomePage.tsx   # 页面入口文件与目录同名
-│   │   │   └── components/    # 页面专属组件
+│   │   ├── <PageName>/        # 页面目录示例
+│   │   │   ├── PageName.tsx          # 页面入口文件与目录同名
+│   │   │   └── components/           # 页面专属组件
 │   │   └── NotFoundPage/
 │   │       └── NotFoundPage.tsx
 │   ├── hooks/                 # 自定义 Hooks
@@ -38,208 +39,84 @@
 │   ├── index.ts               # Express 入口
 │   ├── routes/                # 路由
 │   │   ├── index.ts           # 路由注册
-│   │   └── view.ts            # 页面渲染（catch-all HTML 响应，勿修改）
+│   │   └── view.ts            # 页面渲染（勿修改）
 │   └── db/                    # 数据库层
-│       ├── schema.ts          # Drizzle schema 定义（工具自动生成，勿手动修改）
+│       └── schema.ts          # Drizzle schema（自动生成，勿修改）
 ├── shared/                    # 前后端共享（不依赖 client 或 server）
 │   ├── types.ts               # 数据模型类型
-│   └── api.interface.ts       # zod schema + API 入参/出参类型
+│   ├── api.interface.ts       # zod schema + API 入参/出参类型
+│   └── static/                # 静态资源
+│       ├── data/              # 数据文件（JSON）
+│       └── images/            # 图片资源
 ```
 
 ---
 
-## 新增资源（以 posts 为例）
+## 模板初始状态
 
-### 1. shared/ — 定义类型和校验
-
-`shared/types.ts` 增加数据模型：
-
-```typescript
-export interface Post {
-  id: number;
-  title: string;
-  content: string | null;
-  createdAt: string;
-}
-```
-
-`shared/api.interface.ts` 增加 zod schema 和 API 类型：
-
-```typescript
-export const createPostSchema = z.object({
-  title: z.string().min(1).max(200),
-  content: z.string().optional(),
-});
-export type CreatePostRequest = z.infer<typeof createPostSchema>;
-export type CreatePostResponse = Post;
-export type ListPostsResponse = Post[];
-```
-
-### 2. server/ — 数据库和路由
-
-`server/db/schema.ts` 由 `npm run gen:db-schema` 自动生成，无需手动编写。运行命令后会根据数据库表结构自动生成如下定义：
-
-```typescript
-export const posts = pgTable("posts", {
-  id: serial("id").primaryKey(),
-  title: text("title").notNull(),
-  content: text("content"),
-  createdAt: timestamp("created_at").notNull().defaultNow(),
-});
-```
-
-`server/routes/posts.ts` 编写 CRUD 路由：
-
-```typescript
-import { Router } from "express";
-import { db } from "@lark-apaas/express-core";
-import { posts } from "../db/schema";
-import { createPostSchema } from "@shared/api.interface";
-
-const router = Router();
-router.get("/", async (_req, res) => {
-  const list = await db.select().from(posts);
-  res.json(list);
-});
-router.post("/", async (req, res) => {
-  const parsed = createPostSchema.safeParse(req.body);
-  if (!parsed.success) { res.status(400).json({ error: parsed.error.flatten() }); return; }
-  const [post] = await db.insert(posts).values(parsed.data).returning();
-  res.status(201).json(post);
-});
-export default router;
-```
-
-`server/routes/index.ts` 注册：
-
-```typescript
-import postsRouter from "./posts";
-app.use("/api/posts", postsRouter);
-```
-
-### 3. client/ — API 封装和页面
-
-> ⚠️ **客户端所有 HTTP 请求必须使用 `axiosForBackend`**
->
-> `axiosForBackend` 由 `@lark-apaas/client-toolkit-lite` 提供，内置平台鉴权、CSRF token 注入和请求上下文。**禁止使用** `fetch`、`axios`、`XMLHttpRequest` 或其他 HTTP 客户端直接发起请求。
-
-`client/src/api/index.ts` 增加封装：
-
-```typescript
-import { axiosForBackend } from "@lark-apaas/client-toolkit-lite";
-import type { ListPostsResponse } from "@shared/api.interface";
-
-export async function listPosts(): Promise<ListPostsResponse> {
-  try {
-    const response = await axiosForBackend({
-      url: '/api/posts',
-      method: 'GET',
-    });
-    return response.data;
-  } catch (error) {
-    throw error;
-  }
-}
-```
-
-`client/src/pages/PostsPage/PostsPage.tsx` 编写页面，`client/src/app.tsx` 注册路由。
+- `app.tsx` 首页路由指向平台内置的 `<Welcome />` 组件
+- 开发时需将 `index` 路由替换为业务首页，并在 `pages/` 下创建对应页面目录
+- `layout.tsx` 为空壳容器（仅 `<Outlet />`），需根据需求实现导航和布局
 
 ---
 
-## 页面与组件规范
-
-**页面文件只做骨架编排，不包含具体 UI 实现。**
-
-```tsx
-// client/src/pages/DashboardPage/DashboardPage.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>
-  );
-}
-```
+## 禁止修改的文件
 
-**规则：**
+| 文件 | 原因 |
+|------|------|
+| `client/src/index.tsx` | Provider 层级 + 样式引入，由模板管理 |
+| `client/src/components/ui/*` | shadcn/ui 内置组件，版本锁定 |
+| `server/routes/view.ts` | 页面渲染 catch-all，由模板管理 |
+| `server/db/schema.ts` | 由 `npm run gen:db-schema` 自动生成 |
 
-- 每个视觉上独立的区块拆为一个组件文件，即使只出现一次
-- 单个组件文件不超过 **150 行**，超出时进一步拆分子组件
-- 页面专属组件放在 `pages/<page>/components/`
-- `client/src/components/` 仅存放基础 UI 组件（如 shadcn/ui），**禁止存放业务组件**
-- 文件名 kebab-case（`stat-card.tsx`），组件名 PascalCase（`StatCard`）
-- 组件之间**禁止循环引用**
-
-### Section 独立性（并行开发规范）
-
-每个 Section 级组件（如 `StatsSection`、`DataTableSection`）必须做到**完全自包含**：
-
-**1. 页面文件 = 纯布局组合器**
-
-- 页面入口文件（如 `DashboardPage.tsx`）只做 import + JSX 排列，**禁止包含** `useState`、`useEffect`、数据请求或业务逻辑
-- 页面文件无 props 接口定义，不承担任何数据协调职责
-
-**2. Section 自包含原则**
-
-每个 Section 组件独立拥有自己的：
-- **数据获取**（API 调用、fetch）— 即使多个 Section 需要同一份数据，各自获取
-- **状态管理**（useState、useReducer）
-- **类型定义**（写在同文件或同目录下的 `types.ts`）
-- **子组件**（如需拆分，平铺在 `components/` 目录下，禁止嵌套子目录）
+---
 
-**3. 禁止 Section 间横向依赖**
+## 文件放置规则
 
-- 兄弟 Section 之间**禁止互相 import**
-- 兄弟 Section 之间**禁止通过 Context、全局 store、事件总线、页面 props 共享状态**
-- 每个 Section 可独立开发、独立测试，不依赖其他 Section 的存在
+| 内容类型 | 放置位置 |
+|---------|---------|
+| 数据模型类型 | `shared/types.ts` |
+| zod schema + API 类型 | `shared/api.interface.ts` |
+| 新页面 | `client/src/pages/<PageName>/PageName.tsx` |
+| 页面专属组件 | `client/src/pages/<PageName>/components/` |
+| API 请求封装 | `client/src/api/index.ts` |
+| 后端路由 | `server/routes/<resource>.ts` |
+| 路由注册 | `server/routes/index.ts` |
+| 静态数据文件 | `shared/static/data/` |
+| 静态图片 | `shared/static/images/` |
 
 ---
 
-## 路由注册
+## 导入路径
 
-新增页面在 `client/src/app.tsx` 中注册。
+```typescript
+// @/ 别名 → client/src/
+import { cn } from "@/lib/utils";
 
-> ⚠️ **首页路由替换（必做）**
->
-> 模板默认的 `HomePage` 是占位示例页，**不是业务首页**。开发时必须将 `index` 路由替换为真实的业务首页组件（如 `DashboardPage`），并删除 `HomePage` 目录。
+// @shared/ 别名 → shared/
+import type { Post } from "@shared/types";
+import { createPostSchema } from "@shared/api.interface";
+import heroImage from "@shared/static/images/hero.png";
 
-**替换后的路由示例：**
+// 后端导入 db 实例（唯一方式）
+import { db } from "@lark-apaas/express-core";
 
-```tsx
-<Route element={<Layout />}>
-  {/* 将 index 路由指向真实的业务首页 */}
-  <Route index element={<DashboardPage />} />
-  <Route path="todos" element={<TodosPage />} />
-  <Route path="*" element={<NotFoundPage />} />
-</Route>
+// 后端导入表定义
+import { posts } from "../db/schema";
 ```
 
-> **注意：** `BrowserRouter` 已在 `index.tsx` 中统一配置，`app.tsx` 中**禁止**再包裹 `BrowserRouter`，否则会报嵌套 Router 错误。
-
-**新增页面步骤：**
-
-1. 在 `client/src/pages/` 下新建页面目录（如 `SettingsPage`）和 `SettingsPage.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/app.tsx` 的 `<Routes>` 内注册 `<Route>`
+- `BrowserRouter` 已在 `index.tsx` 中配置，`app.tsx` 中**禁止**再包裹 Router
 
 ---
 
-## 样式与主题
+## 主题变量
 
-### 主题变量
-
-主题色定义在 `client/src/index.css` 中，通过 `:root` CSS 变量 + `@theme inline` 注册到 Tailwind。
-
-**语义化颜色对照：**
+主题色定义在 `client/src/index.css`，通过 `:root` CSS 变量 + `@theme inline` 注册到 Tailwind。
 
 | 用途 | Tailwind 类 | CSS 变量 |
 |------|------------|----------|
@@ -251,75 +128,6 @@ export default function DashboardPage() {
 | 强调色 | `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="#"` 占位链接、无内容切换的标签页、空下拉菜单
-- 禁止"导出"、"分享"等无法真正执行的操作按钮
-- 如功能暂未实现，**删除该入口**，不实现假按钮
-
----
-
-## 自检清单
-
-| 检查项 | 验收标准 |
-|--------|---------|
-| 页面拆分 | 页面文件只做骨架编排（无 state/effect/逻辑）；每个 Section 自包含数据+状态+类型；兄弟 Section 间无互相 import；单文件 ≤150 行 |
-| 命名规范 | 页面目录 PascalCase，页面入口文件与目录同名（PascalCase），组件文件名 kebab-case，组件名 PascalCase |
-| 路由注册 | 默认 `HomePage` 已替换为业务首页；新页面已在 `app.tsx` 注册；跳转使用 `<Link>` / `useNavigate()`，无 `<a href>` |
-| API 调用 | 统一在 `api/` 封装；必须使用 `axiosForBackend` 发起请求，禁止 `fetch`/`axios`；使用 `@shared` 类型 |
-| 输入校验 | zod schema 定义在 `shared/api.interface.ts`；server 和 client 共用 |
-| 主题色 | 使用语义化变量类（`bg-background`、`text-primary` 等）；未硬编码颜色值 |
-| 主题修改 | 仅增量覆盖变更的变量；新增色同时注册 `:root` 和 `@theme inline` |
-| 响应式 | 容器 `max-w-*` + `mx-auto`；多列布局窄屏退化单列；flex 有 `min-w-0` |
-| 内容自适应 | 无固定 `h-`（图表除外）；长文本 `break-words`；表格 `overflow-x-auto` |
-| 交互完整性 | 所有按钮/链接有实际处理器和可见反馈；无空响应、无假按钮 |
-| 无循环引用 | client ↔ server 不直接 import；通过 shared/ 共享类型 |
+HSL 格式使用**空格分隔**：`--primary: hsl(150 60% 40%);`

package/template-apex/client/src/app.tsx

@@ -1,13 +1,13 @@
 import { Routes, Route } from "react-router-dom";
+import { Welcome } from "@lark-apaas/client-toolkit-lite";
 import { Layout } from "@/components/layout";
-import HomePage from "@/pages/HomePage/HomePage";
 import NotFoundPage from "@/pages/NotFoundPage/NotFoundPage";
 
 export default function App() {
   return (
     <Routes>
       <Route element={<Layout />}>
-        <Route index element={<HomePage />} />
+        <Route index element={<Welcome />} />
         <Route path="*" element={<NotFoundPage />} />
       </Route>
     </Routes>

package/template-vite-react/README.md

@@ -1,4 +1,4 @@
-# 开发规范
+# 项目技术规范
 
 ## 技术栈
 
@@ -6,135 +6,93 @@
 - 样式: Tailwind CSS v4
 - UI 组件: shadcn/ui `import { Button } from "@/components/ui/button";`
 - 图标: lucide-react `import { SearchIcon } from "lucide-react";`
-- 图表: recharts `import { LineChart } from "recharts";`
+- 图表: echarts-for-react `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/
-├── index.tsx            # 入口（Provider 层级 + 样式引入，勿修改）
-├── app.tsx              # 路由配置
+├── index.tsx            # 入口（勿修改）
+├── app.tsx              # 路由配置（仅在 <Routes> 内增删 <Route>）
 ├── index.css            # 全局样式 + 主题变量
 ├── components/          # 基础 UI 组件（禁止存放业务组件）
-│   └── ui/              # shadcn/ui 内置组件（勿手动修改）
+│   ├── layout.tsx       # 全局布局容器（含 <Outlet />）
+│   └── ui/              # shadcn/ui 内置组件（勿修改）
 ├── pages/               # 页面模块（每个页面一个目录）
-│   └── HomePage/        # 占位示例页，开发时替换为业务首页
-│       ├── HomePage.tsx        # 页面入口文件与目录同名
-│       └── components/         # 页面专属组件
+│   ├── <PageName>/      # 页面目录示例
+│   │   ├── PageName.tsx        # 页面入口文件与目录同名
+│   │   └── components/         # 页面专属组件
+│   └── NotFoundPage/
+│       └── NotFoundPage.tsx
 ├── hooks/               # 自定义 Hooks
 └── lib/                 # 工具函数（cn() 等）
-```
-
----
-
-## 页面与组件规范
-
-**页面文件只做骨架编排，不包含具体 UI 实现。**
 
-```tsx
-// client/src/pages/DashboardPage/DashboardPage.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>
-  );
-}
+shared/
+└── static/              # 静态资源
+    ├── data/            # 数据文件（JSON）
+    └── images/          # 图片资源
 ```
 
-**规则：**
-
-- 每个视觉上独立的区块拆为一个组件文件，即使只出现一次
-- 单个组件文件不超过 **150 行**，超出时进一步拆分子组件
-- 页面专属组件放在 `pages/<page>/components/`
-- `client/src/components/` 仅存放基础 UI 组件（如 shadcn/ui），**禁止存放业务组件**
-- 文件名 kebab-case（`stat-card.tsx`），组件名 PascalCase（`StatCard`）
-- 组件之间**禁止循环引用**
+---
 
-### Section 独立性（并行开发规范）
+## 模板初始状态
 
-每个 Section 级组件（如 `StatsSection`、`DataTableSection`）必须做到**完全自包含**：
+- `app.tsx` 首页路由指向平台内置的 `<Welcome />` 组件
+- 开发时需将 `index` 路由替换为业务首页，并在 `pages/` 下创建对应页面目录
+- `layout.tsx` 为空壳容器（仅 `<Outlet />`），需根据需求实现导航和布局
 
-**1. 页面文件 = 纯布局组合器**
+---
 
-- 页面入口文件（如 `DashboardPage.tsx`）只做 import + JSX 排列，**禁止包含** `useState`、`useEffect`、数据请求或业务逻辑
-- 页面文件无 props 接口定义，不承担任何数据协调职责
+## 禁止修改的文件
 
-**2. Section 自包含原则**
+| 文件 | 原因 |
+|------|------|
+| `client/src/index.tsx` | Provider 层级 + 样式引入，由模板管理 |
+| `client/src/components/ui/*` | shadcn/ui 内置组件，版本锁定 |
 
-每个 Section 组件独立拥有自己的：
-- **数据获取**（API 调用、fetch）— 即使多个 Section 需要同一份数据，各自获取
-- **状态管理**（useState、useReducer）
-- **类型定义**（写在同文件或同目录下的 `types.ts`）
-- **子组件**（如需拆分，平铺在 `components/` 目录下，禁止嵌套子目录）
+---
 
-**3. 禁止 Section 间横向依赖**
+## 文件放置规则
 
-- 兄弟 Section 之间**禁止互相 import**
-- 兄弟 Section 之间**禁止通过 Context、全局 store、事件总线、页面 props 共享状态**
-- 每个 Section 可独立开发、独立测试，不依赖其他 Section 的存在
+| 内容类型 | 放置位置 |
+|---------|---------|
+| 新页面 | `client/src/pages/<PageName>/PageName.tsx` |
+| 页面专属组件 | `client/src/pages/<PageName>/components/` |
+| 自定义 Hooks | `client/src/hooks/` |
+| 工具函数 | `client/src/lib/` |
+| 静态数据文件 | `shared/static/data/` |
+| 静态图片 | `shared/static/images/` |
 
 ---
 
-## 路由注册
-
-新增页面在 `client/src/app.tsx` 中注册。
-
-> ⚠️ **首页路由替换（必做）**
->
-> 模板默认的 `HomePage` 是占位示例页，**不是业务首页**。开发时必须将 `index` 路由替换为真实的业务首页组件（如 `DashboardPage`），并删除 `HomePage` 目录。
-
-**替换后的路由示例：**
-
-```tsx
-import { Routes, Route } from "react-router-dom";
-import { Layout } from "@/components/layout";
-import DashboardPage from "@/pages/DashboardPage/DashboardPage";
-import NotFoundPage from "@/pages/NotFoundPage/NotFoundPage";
-
-export default function App() {
-  return (
-    <Routes>
-      <Route element={<Layout />}>
-        {/* 将 index 路由指向真实的业务首页 */}
-        <Route index element={<DashboardPage />} />
-        <Route path="*" element={<NotFoundPage />} />
-      </Route>
-    </Routes>
-  );
-}
-```
+## 导入路径
 
-> **注意：** `BrowserRouter` 已在 `index.tsx` 中统一配置，`app.tsx` 中**禁止**再包裹 `BrowserRouter`，否则会报嵌套 Router 错误。
+```typescript
+// @/ 别名 → client/src/
+import { cn } from "@/lib/utils";
+import { useIsMobile } from "@/hooks/use-mobile";
 
-**新增页面步骤：**
+// @shared/ 别名 → shared/
+import heroImage from "@shared/static/images/hero.png";
+import configData from "@shared/static/config.json";
+```
 
-1. 在 `client/src/pages/` 下新建页面目录（如 `SettingsPage`）和 `SettingsPage.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/app.tsx` 的 `<Routes>` 内注册 `<Route>`
+- `BrowserRouter` 已在 `index.tsx` 中配置，`app.tsx` 中**禁止**再包裹 Router
 
 ---
 
-## 样式与主题
+## 主题变量
 
-### 主题变量
-
-主题色定义在 `client/src/index.css` 中，通过 `:root` CSS 变量 + `@theme inline` 注册到 Tailwind。
-
-**语义化颜色对照：**
+主题色定义在 `client/src/index.css`，通过 `:root` CSS 变量 + `@theme inline` 注册到 Tailwind。
 
 | 用途 | Tailwind 类 | CSS 变量 |
 |------|------------|----------|
@@ -146,72 +104,6 @@ export default function App() {
 | 强调色 | `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="#"` 占位链接、无内容切换的标签页、空下拉菜单
-- 禁止"导出"、"分享"等无法真正执行的操作按钮
-- 如功能暂未实现，**删除该入口**，不实现假按钮
-
----
-
-## 自检清单
-
-| 检查项 | 验收标准 |
-|--------|---------|
-| 页面拆分 | 页面文件只做骨架编排（无 state/effect/逻辑）；每个 Section 自包含数据+状态+类型；兄弟 Section 间无互相 import；单文件 ≤150 行 |
-| 命名规范 | 文件名 kebab-case，组件名 PascalCase |
-| 路由注册 | 默认 `HomePage` 已替换为业务首页；新页面已在 `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` |
-| 交互完整性 | 所有按钮/链接有实际处理器和可见反馈；无空响应、无假按钮 |
+HSL 格式使用**空格分隔**：`--primary: hsl(150 60% 40%);`

package/template-vite-react/client/src/app.tsx

@@ -1,13 +1,13 @@
 import { Routes, Route } from "react-router-dom";
+import { Welcome } from "@lark-apaas/client-toolkit-lite";
 import { Layout } from "@/components/layout";
-import HomePage from "@/pages/HomePage/HomePage";
 import NotFoundPage from "@/pages/NotFoundPage/NotFoundPage";
 
 export default function App() {
   return (
     <Routes>
       <Route element={<Layout />}>
-        <Route index element={<HomePage />} />
+        <Route index element={<Welcome />} />
         <Route path="*" element={<NotFoundPage />} />
       </Route>
     </Routes>

package/template-vite-react/client/src/lib/utils.ts

@@ -1,6 +1,6 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+  return twMerge(clsx(inputs));
 }

package/template-apex/client/src/lib/utils.ts

@@ -1,6 +0,0 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}

package/template-apex/client/src/pages/HomePage/HomePage.tsx

@@ -1,12 +0,0 @@
-export default function HomePage() {
-  return (
-    <div className="flex flex-col items-center justify-center py-24">
-      <h1 className="text-5xl font-bold tracking-tight sm:text-7xl mb-4">
-        👋 Hello OpenClaw
-      </h1>
-      <p className="text-lg text-muted-foreground">
-        Start building your app by editing <code className="px-1.5 py-0.5 rounded bg-muted font-mono text-sm">client/src/pages/HomePage/HomePage.tsx</code>
-      </p>
-    </div>
-  );
-}

package/template-vite-react/client/src/pages/HomePage/HomePage.tsx

@@ -1,12 +0,0 @@
-export default function HomePage() {
-  return (
-    <div className="flex flex-col items-center justify-center py-24">
-      <h1 className="text-5xl font-bold tracking-tight sm:text-7xl mb-4">
-        👋 Hello OpenClaw
-      </h1>
-      <p className="text-lg text-muted-foreground">
-        Start building your app by editing <code className="px-1.5 py-0.5 rounded bg-muted font-mono text-sm">client/src/pages/HomePage/HomePage.tsx</code>
-      </p>
-    </div>
-  );
-}