@h-ai/cli 0.1.0-alpha9 → 1.0.0-beta.2

package/templates/README.md

@@ -1,126 +1,68 @@
-# CLI Templates
+# CLI 项目模板
 
-此目录包含 `hai create` 命令使用的项目模板文件。
+## 简介
 
-## 目录结构
+这里保存 `hai create` 生成应用时使用的源码、配置和 AI 指引。维护模板后，需要生成真实项目验证，不能只检查模板文件本身。
 
-```
-templates/
-├── base/                    # 所有应用类型共用的骨架文件
-│   ├── package.json.hbs     # 动态：按 features 注入依赖
-│   ├── vite.config.ts.hbs   # 动态：按 hasI18n / hasUi 注入插件
-│   ├── tsconfig.json
-│   ├── svelte.config.js
-│   ├── .gitignore
-│   ├── playwright.config.ts
-│   └── src/
-│       ├── app.html.hbs         # 动态：i18n 时输出 %lang% 占位符
-│       ├── app.d.ts
-│       ├── app.css
-│       ├── hooks.server.ts.hbs  # 动态：按 features / hasI18n 组装 handle 序列
-│       └── lib/server/
-│           └── init.ts.hbs      # 动态：按 features 注入模块初始化
-│
-├── apps/                    # 应用类型专属路由与页面
-│   ├── admin/               # 管理后台
-│   │   ├── messages/        # i18n 消息文件（zh-CN / en-US）
-│   │   └── src/routes/      # +page / +layout .svelte.hbs
-│   ├── website/             # 企业官网
-│   │   ├── messages/
-│   │   └── src/routes/
-│   ├── h5/                  # H5 移动端
-│   │   ├── messages/
-│   │   └── src/routes/
-│   └── api/                 # 纯 API 服务（无 UI / 无 i18n）
-│       └── src/routes/
-│
-├── features/                # 可选 feature 路由（叠加到 src/routes/）
-│   ├── iam/
-│   │   ├── routes-shared/   # 所有应用类型共用（API 端点）
-│   │   ├── routes-admin/    # admin 专属（登录/注册页 .hbs）
-│   │   └── routes-h5/       # h5 专属（登录/注册页 .hbs）
-│   ├── storage/
-│   │   └── routes/          # 上传 API
-│   └── ai/
-│       └── routes/          # 聊天流 API
-│
-├── i18n/                    # i18n 脚手架（hasI18n 时复制到项目根）
-│   └── project.inlang/
-│       └── settings.json    # Paraglide 项目配置
-│
-└── skills/                  # AI Skill 单一来源模板（分发到 .agents/skills/）
-```
+## 核心功能清单
 
-## AI Skill 模板（Single Source of Truth）
-
-`templates/skills/` 是 CLI 生成共享 AI 上下文时的单一来源，同时用于 `hai create` 与 `hai add`。
-
-- 每个 Skill 目录会复制到 `.agents/skills/<skill>/`
-- `copilot-instructions.md` 会复制到 `.github/copilot-instructions.md`，并引导 Copilot/其他助手读取 `.agents/skills/`
-- `AGENTS.md`、`CLAUDE.md`、`opencode.json` 会复制到项目根目录
-- `opencode.json` 使用 OpenCode 的 `instructions` 与 `skills.paths` 配置，将项目级指令与 Skill 目录显式指向 `AGENTS.md` 和 `.agents/skills/`
-- `CLAUDE.md` 作为 Claude Code 的原生项目指引入口，并通过 `@AGENTS.md` 复用共享规范；`.agents/skills/` 仍是共享参考目录，而非 Claude Code 的原生 project skills 目录
-- `hai add` 只补齐缺失的 AI 支持文件，不覆盖用户已自定义的桥接文件，也不会自动删除遗留的 `.github/skills/`
-
-## 文件类型说明
-
-| 类型                                       | 处理方式                                     |
-| ------------------------------------------ | -------------------------------------------- |
-| 普通文件（`.ts` / `.svelte` / `.json` 等） | 直接复制，内容不变                           |
-| `.hbs` 文件                                | 经 Handlebars 渲染后输出（去掉 `.hbs` 后缀） |
-
-## 渲染上下文（TemplateContext）
-
-所有 `.hbs` 文件可使用以下变量：
-
-| 变量                   | 类型      | 说明                                         |
-| ---------------------- | --------- | -------------------------------------------- |
-| `{{projectName}}`      | `string`  | 项目名称（如 `my-app`）                      |
-| `{{appType}}`          | `string`  | 应用类型：`admin` / `website` / `h5` / `api` |
-| `{{hasUi}}`            | `boolean` | 是否包含 UI（非 `api` 类型为 `true`）        |
-| `{{hasI18n}}`          | `boolean` | 是否启用 i18n（非 `api` 类型为 `true`）      |
-| `{{defaultLocale}}`    | `string`  | 默认语言，如 `zh-CN`                         |
-| `{{packageManager}}`   | `string`  | 包管理器：`pnpm` / `npm` / `yarn`            |
-| `{{features.iam}}`     | `boolean` | 是否选中 iam feature                         |
-| `{{features.db}}`      | `boolean` | 是否选中 db feature                          |
-| `{{features.cache}}`   | `boolean` | 是否选中 cache feature                       |
-| `{{features.crypto}}`  | `boolean` | 是否选中 crypto feature                      |
-| `{{features.storage}}` | `boolean` | 是否选中 storage feature                     |
-| `{{features.ai}}`      | `boolean` | 是否选中 ai feature                          |
-
-### 常用条件写法
-
-```handlebars
-{{!-- 按 feature 条件注入内容 --}}
-{{#if features.iam}}
-import { iam } from '@h-ai/iam'
-{{/if}}
-
-{{!-- 按 i18n 条件切换内容 --}}
-{{#if hasI18n}}
-  <title>{m.page_title()}</title>
-{{else}}
-  <title>首页</title>
-{{/if}}
-```
+- `admin`、`website`、`h5`：SvelteKit 应用。
+- `api`：共享 contract 与 API service 的 workspace。
+- `mobile-app`：Svelte + Vite + Capacitor 应用。
+- `fullstack`：contract、API、共享界面，以及按需选择的 Web/App/Desktop；miniapp 仅预留说明。
+- 后台工作区随窗口扩展；手机壳支持宽屏，表格在内部滚动，文章与认证表单保留阅读宽度。
+- 默认部署工具、独立镜像 Dockerfile、环境示例和可复制的 AI 技能。
+
+## 使用入门
+
+### 文件如何组合
+
+| 目录           | 用途                                                                |
+| -------------- | ------------------------------------------------------------------- |
+| `base/`        | 普通应用共用的配置、脚本和入口                                      |
+| `apps/<类型>/` | 应用专属页面、workspace、原生壳与配置；API/fullstack 维护自己的骨架 |
+| `features/`    | 按所选模块叠加的路由和页面                                          |
+| `i18n/`        | Paraglide 工程配置                                                  |
+| `skills/`      | 完整的技能目录与各类型 AI 入口                                      |
+
+普通文件直接复制，`.hbs` 经 Handlebars 渲染并去掉后缀。`cli-template-engine.ts` 决定适用目录与条件；`cli-create.ts` 完成配置、镜像定义和根 README 等生成工作。修改前先查实际调用路径，API/fullstack 不套用 SvelteKit 文件路由。
+
+### 配置与构建
 
-## 生成流程
+模板通过 `projectName`、`appType`、`features`、`hasUi`、`hasI18n`、`versions` 以及 `api`/`fullstack` 上下文渲染，完整字段见 [cli-types.ts](../src/cli-types.ts)。模块 YAML 使用 `moduleConfig` helper，与 [配置生成器](../src/commands/cli-config-templates.ts) 共用字段和默认值。
 
-模板引擎执行 6 个步骤：
+部署默认启用，`--no-deploy` 可关闭；SDK 是开发依赖。每个镜像使用 `images/` 中独立 Dockerfile，Web 资源放 `images/web/`。`hai.json` 的 `build.images` 选择文件，`deploy` 保存项目级部署参数；依赖输入由构建器生成到 `images/dependencies/`。所有根 `.gitignore` 均忽略 `**/images/dependencies/`、运行数据和私有环境文件。
 
-1. **复制 `base/` 静态文件** → 项目根
-2. **复制 `apps/{appType}/` 路由** → 项目根（`messages/` 仅 `hasI18n` 时复制）
-3. **叠加 feature 静态路由** → `src/routes/`
-4. **渲染所有 `.hbs` 文件** — `base/` + `apps/{appType}/` 输出到项目根；`features/*/routes*/` 输出到 `src/routes/`
-5. **复制 `i18n/` 脚手架** → 项目根（仅 `hasI18n` 时）
-6. **确保 `static/` 目录存在**
+Fullstack 服务端保留各模块的配置示例，未使用模块保持注释。安装依赖、校验和初始化、接入业务后才启用对应配置。修改公开 Schema 时同步配置生成器、环境变量说明、调用方与技能。
 
-## 新增模板
+SvelteKit 的 `kit-config.ts` 在服务端读取并固定 `_kit.yml`，根 load 只投影公开 transport；选择 crypto 后，hooks 装配环境密钥环和 registry，布局安装浏览器传输。db 提供共享 registry，无 db 仅限开发/测试。路径规则可配置 IP、时段与 required/disabled 加密，规则冲突须在装配时失败。调整时同步三种 SSR 布局、服务端入口、私钥生成边界和实际生成工程的根/子目录门禁；纯客户端工程不生成服务端私钥。
 
-### 新增应用页面
+### AI 指引
+
+`skills/hai-*` 的完整目录复制到生成应用 `.agents/skills/`，按应用架构排除不适用项。`bridges/<类型>/AGENTS.md` 提供根入口；Claude/Copilot/OpenCode 配置只引用共享规则。新增参考文件必须随 skill 一起复制，不能链接回框架私有路径。
+
+`hai add` / `hai init` 补齐缺失文件，保留应用已有的自定义内容。框架升级时按目标发布版本比较并合并，不直接覆盖应用规则。
+
+### 页面与文案
+
+用户可见文本加入对应 messages。认证复用 AuthPanel 与服务端公开 IAM 配置；表单复用 Form/FormLayout/FormField。业务规则由应用需求决定，模板默认角色、流程和限额可调整，修改时同步授权、界面、测试和文档。
+
+## 开发测试
+
+维护模板时保留 `shared/.gitattributes`，让生成工程的 `.dockerignore`、Dockerfile 和 POSIX 脚本统一使用 LF，保持跨平台输入一致并确保 Linux 脚本可运行。在仓库根执行：
+
+```sh
+pnpm --filter @h-ai/cli typecheck
+pnpm --filter @h-ai/cli lint
+pnpm --filter @h-ai/cli build
+pnpm --filter @h-ai/cli test
+pnpm check:skills
+pnpm --filter @h-ai/cli test:scaffold-gates
+pnpm --filter @h-ai/cli test:deploy-gates
+```
 
-在 `apps/{appType}/src/routes/` 下创建 `.svelte` 或 `.svelte.hbs` 文件。若含用户可见文本，使用 `.hbs` 并加 `{{#if hasI18n}}` 条件，同时在对应的 `apps/{appType}/messages/` 里补充 i18n key。
+脚手架门禁会生成项目并执行安装、类型检查、lint、构建、测试和浏览器流程。部署门禁另需可用 Podman/Docker，验证镜像构建、隔离服务器上的 SSH/人工部署与部分更新。原生安装包和真实第三方服务需要各自的验收环境。
 
-### 新增 feature 路由
+## 许可证
 
-在 `features/{featureId}/routes-shared/`（API 路由）或 `features/{featureId}/routes-{appType}/`（UI 页面）下创建文件，然后在 `template-engine.ts` 的 `FEATURE_ROUTE_DIRS` / `FEATURE_APP_ROUTE_DIRS` 中注册该目录。
+Apache-2.0

package/templates/apps/admin/messages/en-US.json

@@ -5,13 +5,20 @@
   "nav_home": "Home",
   "nav_dashboard": "Dashboard",
   "nav_settings": "Settings",
+  "nav_close_sidebar": "Close sidebar",
+  "nav_open_sidebar": "Open sidebar",
   "nav_admin": "Enter Admin",
   "page_home_title": "Admin Console",
   "page_home_subtitle": "Built with hai Agent Framework",
+  "page_home_badge": "Powered by hai",
   "page_dashboard_title": "Dashboard",
+  "page_dashboard_subtitle": "Overview of system operations",
   "page_dashboard_total_users": "Total Users",
   "page_dashboard_today_active": "Today Active",
+  "page_dashboard_revenue": "Monthly Revenue",
+  "page_dashboard_orders": "Pending Orders",
   "page_settings_title": "System Settings",
+  "page_settings_subtitle": "Manage system configuration",
   "page_settings_basic": "Basic Configuration",
   "page_settings_desc": "Manage system settings here.",
   "auth_login_title": "Login",

package/templates/apps/admin/messages/ja-JP.json

@@ -0,0 +1,40 @@
+{
+  "app_title": "管理コンソール",
+  "app_description": "hai Agent Frameworkで構築した管理コンソール",
+  "meta_description": "管理コンソール — 企業管理システム",
+  "nav_home": "ホーム",
+  "nav_dashboard": "ダッシュボード",
+  "nav_settings": "設定",
+  "nav_close_sidebar": "サイドバーを閉じる",
+  "nav_open_sidebar": "サイドバーを開く",
+  "nav_admin": "管理画面へ",
+  "page_home_title": "管理コンソール",
+  "page_home_subtitle": "hai Agent Frameworkで構築",
+  "page_home_badge": "Powered by hai",
+  "page_dashboard_title": "ダッシュボード",
+  "page_dashboard_subtitle": "システム稼働状況の概要",
+  "page_dashboard_total_users": "総ユーザー数",
+  "page_dashboard_today_active": "本日のアクティブユーザー",
+  "page_dashboard_revenue": "月間売上",
+  "page_dashboard_orders": "未処理の注文",
+  "page_settings_title": "システム設定",
+  "page_settings_subtitle": "システム設定を管理",
+  "page_settings_basic": "基本設定",
+  "page_settings_desc": "ここでシステムの設定を管理します。",
+  "auth_login_title": "ログイン",
+  "auth_login_submit": "ログイン",
+  "auth_login_loading": "ログイン中...",
+  "auth_login_failed": "ログインに失敗しました",
+  "auth_login_to_register": "アカウントをお持ちでない方は新規登録",
+  "auth_register_title": "登録",
+  "auth_register_submit": "登録",
+  "auth_register_loading": "登録中...",
+  "auth_register_failed": "登録に失敗しました",
+  "auth_register_to_login": "既にアカウントをお持ちの方はログイン",
+  "auth_label_username": "ユーザー名",
+  "auth_label_email": "メールアドレス",
+  "auth_label_password": "パスワード",
+  "auth_label_confirm_password": "パスワードの確認",
+  "auth_error_network": "ネットワークエラー",
+  "auth_error_password_mismatch": "パスワードが一致しません"
+}

package/templates/apps/admin/messages/zh-CN.json

@@ -5,13 +5,20 @@
   "nav_home": "首页",
   "nav_dashboard": "仪表盘",
   "nav_settings": "设置",
+  "nav_close_sidebar": "关闭侧栏",
+  "nav_open_sidebar": "打开侧栏",
   "nav_admin": "进入后台",
   "page_home_title": "管理后台",
   "page_home_subtitle": "基于 hai Agent Framework 构建",
+  "page_home_badge": "由 hai 驱动",
   "page_dashboard_title": "仪表盘",
+  "page_dashboard_subtitle": "系统运营数据总览",
   "page_dashboard_total_users": "总用户",
   "page_dashboard_today_active": "今日活跃",
+  "page_dashboard_revenue": "本月营收",
+  "page_dashboard_orders": "待处理订单",
   "page_settings_title": "系统设置",
+  "page_settings_subtitle": "管理系统配置项",
   "page_settings_basic": "基本配置",
   "page_settings_desc": "在此管理系统设置。",
   "auth_login_title": "登录",

package/templates/apps/admin/src/routes/+layout.svelte.hbs

@@ -1,23 +1,67 @@
 {{!-- 管理后台根布局 --}}
-<script lang="ts">
+<script lang='ts'>
   /**
    * 管理后台根布局
    */
   import type { Snippet } from 'svelte'
-  import '../app.css'
-{{#if hasI18n}}
   import { browser } from '$app/environment'
-  import { setGlobalLocale } from '@h-ai/ui'
-  import { getLocale } from '$lib/paraglide/runtime.js'
+{{#if features.iam}}
+  import { base } from '$app/paths'
+{{else}}
+{{#if features.crypto}}
+  import { base } from '$app/paths'
+{{/if}}
+{{/if}}
+  import { page } from '$app/state'
+{{#if hasI18n}}
+  import { getLocale, setLocale } from '$lib/paraglide/runtime.js'
+{{/if}}
+{{#if features.crypto}}
+  import { crypto } from '@h-ai/crypto'
+  import { kit } from '@h-ai/kit'
+{{else}}
+{{#if features.iam}}
+  import { kit } from '@h-ai/kit'
+{{/if}}
+{{/if}}
+{{#if hasI18n}}
+  import { applyTheme, getSavedTheme, LanguageSwitch, setGlobalLocale, ThemeSelector } from '@h-ai/ui'
+{{else}}
+  import { applyTheme, getSavedTheme, ThemeSelector } from '@h-ai/ui'
+{{/if}}
+{{#if features.crypto}}
+  import { untrack } from 'svelte'
 {{/if}}
+  import '../app.css'
 
   interface Props {
     children: Snippet
   }
 
-  let { children }: Props = $props()
+  const { children }: Props = $props()
+{{#if features.crypto}}
+  if (browser)
+    kit.client.installBrowserTransport(untrack(() => page.data.kitConfig), { crypto, basePath: base })
+{{/if}}
+  const initialTheme = browser ? getSavedTheme() : 'light'
+  let currentTheme = $state(initialTheme)
+  if (browser)
+    applyTheme(initialTheme, false)
+  function handleThemeChange(theme: string) {
+    currentTheme = theme
+    applyTheme(theme)
+  }
+{{#if features.iam}}
+  const authActions = kit.client.createAuthActions({ basePath: `${base}/api/auth` })
+  $effect(() => authActions.bindPageExit({ enabled: page.data.iamPublicConfig?.session.endOnPageHide }))
+{{/if}}
 {{#if hasI18n}}
 
+  function handleLanguageChange(language: string) {
+    setGlobalLocale(language)
+    setLocale(language as Parameters<typeof setLocale>[0])
+  }
+
   if (browser) {
     const paraglideLocale = getLocale()
     setGlobalLocale(paraglideLocale)
@@ -25,6 +69,19 @@
 {{/if}}
 </script>
 
-<div class="min-h-screen bg-base-200">
-  {@render children()}
+<svelte:head>
+  <title>{page.data.appConfig.name}</title>
+</svelte:head>
+
+<div class='h-dvh flex flex-col overflow-hidden bg-base-200'>
+  <header class='navbar h-12 min-h-12 shrink-0 border-b border-base-300 bg-base-100 px-3 sm:px-4'>
+    <span class='flex-1 text-lg font-semibold'>{page.data.appConfig.name}</span>
+    <ThemeSelector {currentTheme} onchange={handleThemeChange} compact />
+{{#if hasI18n}}
+    <LanguageSwitch currentLanguage={getLocale()} onchange={handleLanguageChange} />
+{{/if}}
+  </header>
+  <div class='flex min-h-0 flex-1 flex-col overflow-auto'>{@render children()}</div>
+  <footer class='shrink-0 border-t border-base-300 bg-base-100 px-3 py-1 text-center text-xs text-base-content/60'>{page.data.appConfig.name} · {page.data.appConfig.version} · {page.data.appConfig.env}</footer>
 </div>
+<ToastContainer />

package/templates/apps/admin/src/routes/+page.svelte.hbs

@@ -1,35 +1,56 @@
 {{!-- 管理后台首页 --}}
-<script lang="ts">
+<script lang='ts'>
   /**
    * 管理后台首页 — 入口导航
    */
+  import { resolve } from '$app/paths'
+  import { page } from '$app/state'
 {{#if hasI18n}}
   import * as m from '$lib/paraglide/messages'
 {{/if}}
+  import { Badge, Card } from '@h-ai/ui'
 </script>
 
 <svelte:head>
 {{#if hasI18n}}
-  <title>{m.app_title()}</title>
+  <title>{page.data.appConfig.name}</title>
 {{else}}
-  <title>管理后台</title>
+  <title>{page.data.appConfig.name}</title>
 {{/if}}
 </svelte:head>
 
-<main class="min-h-screen flex items-center justify-center">
-  <div class="text-center">
+<main class='min-h-screen flex items-center justify-center p-6'>
+  <Card shadow='lg' padding='xl' class='w-full max-w-xl bg-base-100 text-center'>
 {{#if hasI18n}}
-    <h1 class="text-4xl font-bold mb-4">{m.app_title()}</h1>
-    <p class="text-gray-600 mb-8">{m.page_home_subtitle()}</p>
-    <div class="flex gap-4 justify-center">
-      <a href="/admin" class="btn btn-primary">{m.nav_admin()}</a>
+    <div class='flex justify-center'>
+      <Badge variant='primary'>
+        <span class='icon-[tabler--sparkles] size-4'></span>
+        {m.page_home_badge()}
+      </Badge>
+    </div>
+    <h1 class='mt-4 text-4xl font-black tracking-tight'>{page.data.appConfig.name}</h1>
+    <p class='mt-3 text-base-content/60'>{m.page_home_subtitle()}</p>
+    <div class='mt-8 flex flex-wrap gap-3 justify-center'>
+      <a href={resolve('/admin', {})} class='btn btn-primary'>
+        <span class='icon-[tabler--layout-dashboard] size-5'></span>
+        {m.nav_admin()}
+      </a>
     </div>
 {{else}}
-    <h1 class="text-4xl font-bold mb-4">管理后台</h1>
-    <p class="text-gray-600 mb-8">基于 hai Agent Framework 构建</p>
-    <div class="flex gap-4 justify-center">
-      <a href="/admin" class="btn btn-primary">进入后台</a>
+    <div class='flex justify-center'>
+      <Badge variant='primary'>
+        <span class='icon-[tabler--sparkles] size-4'></span>
+        由 hai 驱动
+      </Badge>
+    </div>
+    <h1 class='mt-4 text-4xl font-black tracking-tight'>{page.data.appConfig.name}</h1>
+    <p class='mt-3 text-base-content/60'>基于 hai Agent Framework 构建</p>
+    <div class='mt-8 flex flex-wrap gap-3 justify-center'>
+      <a href={resolve('/admin', {})} class='btn btn-primary'>
+        <span class='icon-[tabler--layout-dashboard] size-5'></span>
+        进入后台
+      </a>
     </div>
 {{/if}}
-  </div>
+  </Card>
 </main>

package/templates/apps/admin/src/routes/admin/+layout.svelte.hbs

@@ -1,44 +1,76 @@
 {{!-- 后台管理布局（侧边栏 + 内容区） --}}
-<script lang="ts">
+<script lang='ts'>
   /**
    * 后台管理布局（侧边栏 + 内容区）
    */
   import type { Snippet } from 'svelte'
+  import { resolve } from '$app/paths'
+  import { page } from '$app/state'
 {{#if hasI18n}}
   import * as m from '$lib/paraglide/messages'
 {{/if}}
+  import { WorkspaceLayout } from '@h-ai/ui'
 
   interface Props {
     children: Snippet
   }
 
-  let { children }: Props = $props()
+  const { children }: Props = $props()
+  let drawerOpen = $state(false)
+  let menuButton: HTMLButtonElement
+
+  function closeDrawer() {
+    drawerOpen = false
+    menuButton?.focus()
+  }
+
+  function handleDrawerKeydown(event: KeyboardEvent) {
+    if (drawerOpen && event.key === 'Escape')
+      closeDrawer()
+  }
+
+  const navItems = $derived([
+{{#if hasI18n}}
+    { path: '/admin', label: m.nav_dashboard(), icon: 'icon-[tabler--layout-dashboard]' },
+    { path: '/admin/settings', label: m.nav_settings(), icon: 'icon-[tabler--settings]' },
+{{else}}
+    { path: '/admin', label: '仪表盘', icon: 'icon-[tabler--layout-dashboard]' },
+    { path: '/admin/settings', label: '设置', icon: 'icon-[tabler--settings]' },
+{{/if}}
+  ] as const)
 </script>
 
-<div class="drawer lg:drawer-open">
-  <input id="admin-drawer" type="checkbox" class="drawer-toggle" />
-  <div class="drawer-content p-6">
-    <label for="admin-drawer" class="btn btn-ghost drawer-button lg:hidden mb-4">
-      ☰
-    </label>
-    {@render children()}
+<svelte:window onkeydown={handleDrawerKeydown} />
+
+<div class='drawer min-h-0 flex-1 lg:drawer-open'>
+  <input id='admin-drawer' type='checkbox' class='drawer-toggle' bind:checked={drawerOpen} />
+  <div class='drawer-content flex min-h-0 min-w-0 flex-col overflow-hidden'>
+    <button bind:this={menuButton} type='button' class='btn btn-ghost btn-sm drawer-button m-1 shrink-0 self-start lg:hidden' aria-label={{#if hasI18n}}{m.nav_open_sidebar()}{{else}}'打开侧栏'{{/if}} aria-expanded={drawerOpen} aria-controls='admin-sidebar' onclick={() => drawerOpen = !drawerOpen}>
+      <span class='icon-[tabler--menu-2] size-5'></span>
+    </button>
+    <WorkspaceLayout>{@render children()}</WorkspaceLayout>
   </div>
-  <div class="drawer-side">
-    <label for="admin-drawer" class="drawer-overlay"></label>
-    <nav class="menu p-4 w-64 min-h-full bg-base-100 text-base-content">
+  <div id='admin-sidebar' class='drawer-side'>
+    <button type='button' class='drawer-overlay' aria-label={{#if hasI18n}}{m.nav_close_sidebar()}{{else}}'关闭侧栏'{{/if}} onclick={closeDrawer}></button>
+    <nav class='menu p-4 w-64 min-h-full gap-1 bg-base-100 text-base-content border-r border-base-300/60'>
+      <div class='flex items-center gap-2 px-2 mb-6 text-xl font-bold'>
+        <span class='icon-[tabler--cube] size-6 text-primary'></span>
 {{#if hasI18n}}
-      <div class="text-xl font-bold mb-6 px-2">{m.app_title()}</div>
-      <ul>
-        <li><a href="/admin">{m.nav_dashboard()}</a></li>
-        <li><a href="/admin/settings">{m.nav_settings()}</a></li>
-      </ul>
+        {page.data.appConfig.name}
 {{else}}
-      <div class="text-xl font-bold mb-6 px-2">管理后台</div>
-      <ul>
-        <li><a href="/admin">仪表盘</a></li>
-        <li><a href="/admin/settings">设置</a></li>
-      </ul>
+        {page.data.appConfig.name}
 {{/if}}
+      </div>
+      <ul class='gap-1'>
+        {#each navItems as item (item.path)}
+          <li>
+            <a href={resolve(item.path, {})} class:menu-active={page.url.pathname === resolve(item.path, {})} onclick={closeDrawer}>
+              <span class='{item.icon} size-5'></span>
+              {item.label}
+            </a>
+          </li>
+        {/each}
+      </ul>
     </nav>
   </div>
 </div>

package/templates/apps/admin/src/routes/admin/+page.svelte.hbs

@@ -1,10 +1,27 @@
 {{!-- 仪表盘页面 --}}
-<script lang="ts">
+<script lang='ts'>
   /**
    * 仪表盘页面
    */
 {{#if hasI18n}}
   import * as m from '$lib/paraglide/messages'
+{{/if}}
+  import { Card, PageHeader } from '@h-ai/ui'
+{{#if hasI18n}}
+
+  const stats = $derived([
+    { label: m.page_dashboard_total_users(), value: '0', icon: 'icon-[tabler--users]', accent: 'text-primary' },
+    { label: m.page_dashboard_today_active(), value: '0', icon: 'icon-[tabler--activity]', accent: 'text-success' },
+    { label: m.page_dashboard_revenue(), value: '¥0', icon: 'icon-[tabler--coin]', accent: 'text-warning' },
+    { label: m.page_dashboard_orders(), value: '0', icon: 'icon-[tabler--shopping-cart]', accent: 'text-info' },
+  ])
+{{else}}
+  const stats = [
+    { label: '总用户', value: '0', icon: 'icon-[tabler--users]', accent: 'text-primary' },
+    { label: '今日活跃', value: '0', icon: 'icon-[tabler--activity]', accent: 'text-success' },
+    { label: '本月营收', value: '¥0', icon: 'icon-[tabler--coin]', accent: 'text-warning' },
+    { label: '待处理订单', value: '0', icon: 'icon-[tabler--shopping-cart]', accent: 'text-info' },
+  ]
 {{/if}}
 </script>
 
@@ -17,29 +34,21 @@
 </svelte:head>
 
 {{#if hasI18n}}
-<h1 class="text-2xl font-bold mb-6">{m.page_dashboard_title()}</h1>
-
-<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-  <div class="stat bg-base-100 rounded-box shadow">
-    <div class="stat-title">{m.page_dashboard_total_users()}</div>
-    <div class="stat-value">0</div>
-  </div>
-  <div class="stat bg-base-100 rounded-box shadow">
-    <div class="stat-title">{m.page_dashboard_today_active()}</div>
-    <div class="stat-value">0</div>
-  </div>
-</div>
+<PageHeader title={m.page_dashboard_title()} description={m.page_dashboard_subtitle()} />
 {{else}}
-<h1 class="text-2xl font-bold mb-6">仪表盘</h1>
+<PageHeader title='仪表盘' description='系统运营数据总览' />
+{{/if}}
 
-<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
-  <div class="stat bg-base-100 rounded-box shadow">
-    <div class="stat-title">总用户</div>
-    <div class="stat-value">0</div>
-  </div>
-  <div class="stat bg-base-100 rounded-box shadow">
-    <div class="stat-title">今日活跃</div>
-    <div class="stat-value">0</div>
-  </div>
+<div class='grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4'>
+  {#each stats as stat (stat.label)}
+    <Card shadow='sm' class='bg-base-100'>
+      <div class='flex items-center justify-between'>
+        <div>
+          <div class='text-sm text-base-content/55'>{stat.label}</div>
+          <div class='mt-1 text-3xl font-bold tracking-tight'>{stat.value}</div>
+        </div>
+        <span class='{stat.icon} {stat.accent} size-9'></span>
+      </div>
+    </Card>
+  {/each}
 </div>
-{{/if}}