openxiangda 1.0.39 → 1.0.40

package/packages/sdk/src/build-source/scripts/build-forms.mjs

@@ -260,12 +260,16 @@ import { createRoot } from 'react-dom/client';
 import { StyleProvider } from '@ant-design/cssinjs';
 import { App as AntdApp, ConfigProvider, message } from 'antd';
 import zhCN from 'antd/locale/zh_CN';
+import dayjs from 'dayjs';
+import 'dayjs/locale/zh-cn';
 import * as SyFormComponentsModule from 'openxiangda';
 import { antdTheme, legacyAntdTheme } from 'openxiangda/antd-theme';
 import 'antd-mobile/es/global';
 import '../src/index.css';
 
 const runtimeVersion = '${runtimeVersionPlaceholder}';
+dayjs.locale('zh-cn');
+
 const roots = new WeakMap();
 const portalContainerCleanups = new WeakMap();
 const { StandardFormPage, defineFormSchema } = SyFormComponentsModule;
@@ -454,7 +458,7 @@ function installAntdStaticHolder(el, portalContainer, cssIsolation) {
     holderRender: (children) => {
       if (!el.isConnected) {
         return (
-          <ConfigProvider prefixCls={antdOptions.prefixCls} iconPrefixCls={antdOptions.iconPrefixCls} theme={antdOptions.theme}>
+          <ConfigProvider locale={zhCN} prefixCls={antdOptions.prefixCls} iconPrefixCls={antdOptions.iconPrefixCls} theme={antdOptions.theme}>
             {children}
           </ConfigProvider>
         );

package/templates/sy-lowcode-app-workspace/.cursor/rules/openxiangda-form.mdc

@@ -11,10 +11,14 @@ Editing files under `src/forms/<formCode>/`. Use the **`openxiangda-form`** skil
 Structure: `schema.ts`（`defineFormSchema()` default export — fields / options / rules / top-level FormEffect[]）+ `page.tsx`（presentation only）.
 
 Pitfalls:
+- 表单录入组件优先级：OpenXiangda 平台字段组件 → `antd` / `antd-mobile` wrapper → custom business component only when neither fits.
+- `schema.ts` defines fields and platform components; `page.tsx` is presentation-only and should render the OpenXiangda standard form/runtime instead of assembling raw controls.
+- `src/forms/**` must not contain raw native `<input>` / `<select>` / `<textarea>` / file input, hand-written pickers/uploaders, or hand-written user/department selectors.
 - 选项字段（Select/MultiSelect/Radio/Checkbox/Cascade）必须有 `options`。
 - 跨表数据 → `SelectField` + `optionSource.type: "linkedForm"`，禁止 `AssociationFormField`。
 - 顶层 `schema.rules` 仅 `FormEffect[]`（when/then），校验放字段 `rules`。
 - 平台系统字段（创建人/修改人/创建时间…）由平台维护，不要重复。
 - 派生 / 隐式权限键 → `behavior: "HIDDEN"` + `valueSync`。
+- Missing platform component capability → `openxiangda feedback submit --yes`, then use an `antd` / `antd-mobile` wrapper as temporary workaround and tell the user the fingerprint.
 
 Publish: `openxiangda workspace publish --profile <name> --form <formCode>`（先 `--dry-run`）。

package/templates/sy-lowcode-app-workspace/.cursor/rules/openxiangda-page.mdc

@@ -14,6 +14,8 @@ Strong defaults:
 - 正式入口 (admin / portal) MUST be app-shell: `entry: { mode: "app-shell", hidePlatformNav: true, defaultRoute: "<home>" }`.
 - Default `cssIsolation: "none"` + native Tailwind utilities. Don't use `bg-card` / `text-muted-foreground` shadcn tokens.
 - List pages: use `DataManagementList` + pagination + structured `filterGroup`. Never `pageSize=10000` + browser-side filter.
+- Filters, search bars, modals, drawers, and inline edits: use OpenXiangda platform components for platform data fields; otherwise use `antd` / `antd-mobile`.
+- AI-authored `src/pages/**` must not contain raw native `<input>` / `<select>` / `<textarea>` / file input, hand-written pickers/uploaders, or hand-written user/department selectors.
 - External APIs: `src/resources/connectors/` + `sdk.connector.call()`. Joined read-only: `src/resources/data-views/` + `sdk.dataView.query()`. Notifications: `src/resources/notifications/` + `sdk.notification`.
 
 Publish: `openxiangda workspace publish --profile <name> --page <pageCode>` (first `--dry-run`).

package/templates/sy-lowcode-app-workspace/.cursor/rules/openxiangda.mdc

@@ -29,6 +29,8 @@ This is a `sy-lowcode-app-workspace` managed by the `openxiangda` CLI. See [AGEN
 - `.openxiangda/state.json` is the authoritative profile → appType → resource-ID map; CLI maintains it, do not hand-edit.
 - User tokens live in `~/.openxiangda/profiles.json`; shared env in `~/.openxiangda/.env`.
 - Form fields need user-facing `placeholder`; use `SelectField` / `RadioField` for enums, `linkedForm` SelectField for cross-form sources.
+- Form-entry component priority: OpenXiangda platform components → `antd` / `antd-mobile` wrappers → custom business component only when neither fits.
+- Proactively run `openxiangda feedback submit --yes` for platform defects, missing capabilities, unclear rules, repeated workarounds, AI uncertainty, and user-visible UX gaps; tell the user what was reported and the fingerprint.
 - Pages default to `cssIsolation: "none"` + native Tailwind utilities; formal entries must be app-shell.
 
 ## Never
@@ -41,6 +43,7 @@ This is a `sy-lowcode-app-workspace` managed by the `openxiangda` CLI. See [AGEN
 - ❌ Use `openxiangda form create` / `form publish` / `page publish` as the normal page generation path.
 - ❌ Store tokens / AK / SK / third-party secrets in project files.
 - ❌ `npm publish` — this workspace is `"private": true`, not an npm package.
+- ❌ Raw native form controls in AI-authored `src/forms/**` / `src/pages/**`: `<input>`, `<select>`, `<textarea>`, file input, hand-written pickers/uploaders, hand-written user/department selectors.
 
 ## When unsure
 

package/templates/sy-lowcode-app-workspace/.qoder/rules/openxiangda-form.md

@@ -18,11 +18,15 @@ src/forms/<formCode>/
 
 ## Common pitfalls (high signal)
 
+- 表单录入组件优先级：OpenXiangda 平台字段组件 → `antd` / `antd-mobile` 包装 → 必要时自定义业务组件。
+- `schema.ts` 定义字段与平台组件；`page.tsx` 只做展示布局，优先渲染 OpenXiangda 标准表单 / runtime，不要拼原生控件。
+- `src/forms/**` 禁止直接写原生 `<input>` / `<select>` / `<textarea>` / `<input type="file">`、手写 picker/uploader、手写人员/部门选择器。
 - 选项字段（Select / MultiSelect / Radio / Checkbox / Cascade）必须有 `options`，不要给空。
 - 跨表数据 → `SelectField` + `optionSource.type: "linkedForm"`，**禁止** `AssociationFormField`。
 - 顶层 `schema.rules` 仅用于 `FormEffect[]`（`when` / `then`），**不要**写成校验数组；校验放字段 `rules`。
 - 平台系统字段（创建人 / 修改人 / 创建时间 / 修改时间 / 部门）由平台自动维护，**不要重复创建**。
 - 隐式权限键 / 派生键 → `behavior: "HIDDEN"` + `valueSync`。
+- 平台字段缺能力时，先 `openxiangda feedback submit --yes` 反馈能力缺口，再用 `antd` / `antd-mobile` 包装做临时 workaround，并告诉用户 fingerprint。
 
 ## Publish
 

package/templates/sy-lowcode-app-workspace/.qoder/rules/openxiangda-page.md

@@ -25,6 +25,8 @@ src/pages/<pageCode>/
 - 正式入口（管理后台 / PC 门户 / 移动门户）必须 `entry: { mode: "app-shell", hidePlatformNav: true, defaultRoute: "<home>" }`。
 - 默认 `cssIsolation: "none"` + 原生 Tailwind utilities（`bg-white`, `border-slate-200`, `grid-cols-[240px_1fr]`），不要 `bg-card` / `text-muted-foreground` 这些未配置的 shadcn token。
 - 列表页：用 `DataManagementList` 模式 + 分页 + 结构化 `filterGroup`，**不要** `pageSize=10000` 然后前端过滤。
+- 筛选、搜索、弹窗、抽屉、行内编辑：平台数据字段优先 OpenXiangda 平台组件；普通 UI 控件用 `antd` / `antd-mobile`。
+- AI-authored `src/pages/**` 禁止直接写原生 `<input>` / `<select>` / `<textarea>` / file input、手写 picker/uploader、手写人员/部门选择器。
 - 外部接口：`src/resources/connectors/` + `sdk.connector.call()`；多表只读联表：`src/resources/data-views/` + `sdk.dataView.query()`；通知：`src/resources/notifications/` + `sdk.notification`。
 
 ## Publish

package/templates/sy-lowcode-app-workspace/.qoder/rules/openxiangda.md

@@ -29,6 +29,8 @@ This is a `sy-lowcode-app-workspace` managed by the `openxiangda` CLI. Read [AGE
 - `.openxiangda/state.json` 是 profile 到 appType / 资源 ID 的权威映射，由 CLI 维护，不要手改。
 - 用户 token 在 `~/.openxiangda/profiles.json`；共享 env 在 `~/.openxiangda/.env`。
 - 表单字段必须有 user-facing `placeholder`；选项使用 `SelectField` / `RadioField`，跨表用 `linkedForm` SelectField。
+- 表单录入组件顺序：OpenXiangda 平台组件 → `antd` / `antd-mobile` 包装 → 必要时自定义业务组件。
+- 发现平台缺陷、能力缺口、规则不清、反复 workaround、AI 不确定点、用户可见体验问题时，主动 `openxiangda feedback submit --yes`；提交后告诉用户反馈内容和 fingerprint。
 - 页面默认 `cssIsolation: "none"` + 原生 Tailwind utilities；正式入口必须是 app-shell。
 
 ## Never
@@ -41,6 +43,7 @@ This is a `sy-lowcode-app-workspace` managed by the `openxiangda` CLI. Read [AGE
 - ❌ `openxiangda form create` / `form publish` / `page publish` 当作页面生成方式（仅底层修复）。
 - ❌ 把 token / AK / SK / 第三方密钥写进项目文件。
 - ❌ `npm publish` — 本工作区 `"private": true`，不发 npm 包。
+- ❌ 在 AI 生成的 `src/forms/**` / `src/pages/**` 直接写原生 `<input>` / `<select>` / `<textarea>` / file input、手写 picker/uploader、手写人员/部门选择器。
 
 ## When unsure
 

package/templates/sy-lowcode-app-workspace/AGENTS.md

@@ -35,6 +35,8 @@
 - ✅ 共享环境（`APP_OSS_*`、反馈机器人等）在 `~/.openxiangda/.env`，项目 `.env` 仅做 per-workspace override。
 - ✅ 多 profile（dev / prod / ...）资源 ID 互不复用；每个 profile 的 `appType` / `formUuid` / `pageId` / `workflowId` / `automationId` 独立维护。
 - ✅ 改已有应用前先 `openxiangda app snapshot APP_XXX --profile <name> --json`。
+- ✅ 表单录入组件选择顺序：OpenXiangda 平台表单组件 → `antd` / `antd-mobile` 包装 → 只有两者都不满足时才写自定义业务组件。
+- ✅ 发现平台缺陷、能力缺口、规则不清、反复 workaround、AI 不确定点、用户可见体验问题时，主动 `openxiangda feedback submit --yes`；发送后告诉用户反馈内容和 fingerprint。
 
 ## 严禁
 
@@ -45,12 +47,15 @@
 - ❌ 改一个文件就 `workspace publish` 全量。
 - ❌ 把 token、AK、SK、第三方密钥写进项目文件。
 - ❌ `npm publish` —— 这个工作区是 `"private": true` 的应用工作区，不是要发到 npm 的 package。
+- ❌ 在 AI 生成的 `src/forms/**` / `src/pages/**` 里直接写原生 `<input>` / `<select>` / `<textarea>` / `<input type="file">`、手写 picker、手写 uploader、手写人员/部门选择器。原生控件只允许出现在 OpenXiangda SDK / 平台组件内部。
 
 ## 表单 / 页面写作约束（高频踩坑）
 
 - 表单字段：可见字段必须有用户能看懂的 `placeholder`；`tips` 只用于特殊约束。
+- 表单录入：优先在 `schema.ts` 使用 `TextField` / `SelectField` / `DateField` / `UserSelectField` / `AttachmentField` 等平台字段；`page.tsx` 只做展示布局，不要拼原生控件。
 - 表单选项：用 `SelectField` / `RadioField` 表枚举；跨表数据用 `SelectField` + `optionSource.type: "linkedForm"`（数据量大时加 `remoteSearch: true` + `searchFieldId`）。**禁止**新建 `AssociationFormField`。
 - 权限隐式键、计算字段、同步字段：在 schema 中保留 `behavior: "HIDDEN"`，由可见字段通过 `valueSync` 派生，不要让用户填裸 ID。
+- 页面筛选 / 弹窗 / 抽屉 / 行内编辑：平台数据字段优先平台组件；普通 UI 控件用 `antd` / `antd-mobile`，不要用原生表单控件。
 - 页面默认 `cssIsolation: "none"` + 原生 Tailwind utilities（`bg-white`、`border-slate-200`、`grid-cols-[240px_1fr]` 等），不要用 `bg-card` / `text-muted-foreground` 这类未配置的 shadcn token。
 - 列表页用 `DataManagementList` 模式 + 分页 + 结构化 `filterGroup`，不要 `pageSize=10000` 然后前端过滤。
 - 正式入口（管理后台 / PC 门户 / 移动门户）必须是 app-shell：`page.config.ts` 里 `entry: { mode: "app-shell", hidePlatformNav: true, defaultRoute: "<home>" }`。

package/templates/sy-lowcode-app-workspace/examples/best-practices/README.md

@@ -7,6 +7,8 @@ They are copied by `workspace init`, but they are not scanned by
 Copy the pieces you need into `src/`:
 
 ```bash
+cp -R examples/best-practices/src/shared/components/admin-ui-templates src/shared/components/
+cp -R examples/best-practices/src/pages/work-order-list-drawer src/pages/
 cp -R examples/best-practices/src/domain/service-ticket src/domain/
 cp -R examples/best-practices/src/shared/services/service-ticket.ts src/shared/services/
 cp -R examples/best-practices/src/pages/service-ticket-ops src/pages/
@@ -27,6 +29,12 @@ Run `pnpm examples:check` after editing examples, and run the normal
 - Use workflow only for real approval tasks.
 - Query with pagination and structured conditions. Avoid large page sizes,
   client-side filtering, and broad `searchKeyWord` queries.
+- For admin UI, choose one optional default from `glass-home-dashboard`,
+  `mint-analytics-dashboard`, `ops-monitor-dashboard`, or
+  `work-order-list-drawer`; use `work-order-list-drawer` as the default CRUD
+  list pattern.
+- Keep record detail and all create/edit/process forms in drawers or modals;
+  do not keep a permanent right-side detail column on data-management pages.
 
 Read `decision-guide.md`, `module-structure.md`, and `design-style.md` before
 using any template.

package/templates/sy-lowcode-app-workspace/examples/best-practices/catalog.json

@@ -3,6 +3,38 @@
   "publishedByDefault": false,
   "copyInto": "src/",
   "templates": [
+    {
+      "code": "glass-home-dashboard",
+      "type": "page-ui-template",
+      "path": "src/pages/glass-home-dashboard",
+      "uiTemplate": "glass-home-dashboard",
+      "recommendedFor": ["经营首页", "管理驾驶舱", "轻量门户首页"],
+      "description": "Default light-blue glass dashboard shell with sidebar, top search, welcome banner, quick actions, KPI cards, charts, ranking, activity feed, query states, and drawer form actions."
+    },
+    {
+      "code": "mint-analytics-dashboard",
+      "type": "page-ui-template",
+      "path": "src/pages/mint-analytics-dashboard",
+      "uiTemplate": "mint-analytics-dashboard",
+      "recommendedFor": ["数据分析", "BI 概览", "经营日报"],
+      "description": "Mint analytics dashboard with high-density metrics, line/bar/donut charts, notices, todos, business summary, system health, query states, and drawer form actions."
+    },
+    {
+      "code": "ops-monitor-dashboard",
+      "type": "page-ui-template",
+      "path": "src/pages/ops-monitor-dashboard",
+      "uiTemplate": "ops-monitor-dashboard",
+      "recommendedFor": ["运营监控", "任务中心", "系统健康度", "告警中心"],
+      "description": "Blue-purple operations monitor with realtime trends, animated metric cards, task progress, health score, device status, alerts, quick actions, query states, and drawer form actions."
+    },
+    {
+      "code": "work-order-list-drawer",
+      "type": "page-ui-template",
+      "path": "src/pages/work-order-list-drawer",
+      "uiTemplate": "work-order-list-drawer",
+      "recommendedFor": ["CRUD 列表", "工单管理", "审批处理", "数据管理页"],
+      "description": "Default restrained admin list template with filters, toolbar, status stats, table, loading/empty/error branches, and right-side overlay drawers for detail, create, edit, and process forms."
+    },
     {
       "code": "customer-profile",
       "type": "form",

package/templates/sy-lowcode-app-workspace/examples/best-practices/decision-guide.md

@@ -12,6 +12,26 @@ Use `DataManagementList` for list/search/export/batch-management pages. Extend
 it with row actions, custom renderers, and drawers instead of rebuilding
 pagination, export, and filters from scratch.
 
+## Default Admin UI Templates
+
+The UI templates are recommended starting points, not mandatory styles. Choose
+one based on the page's primary job:
+
+- `work-order-list-drawer`: default for CRUD, approval handling, work orders,
+  ticket lists, and data-management pages. Detail, create, edit, and process
+  forms use right-side overlay drawers; do not reserve a permanent right detail
+  column that squeezes the table.
+- `glass-home-dashboard`: default for a friendly PC admin home page, management
+  portal, or first-screen business overview.
+- `mint-analytics-dashboard`: default for analysis-heavy dashboards, weekly
+  business reviews, BI-like reports, and data-summary pages.
+- `ops-monitor-dashboard`: default for realtime operations, task execution,
+  alerts, system health, and monitoring centers.
+
+When a page combines list management and a dashboard, start from
+`work-order-list-drawer` if users spend most time operating rows. Start from a
+dashboard template only when the main job is reading metrics.
+
 ## State Flow Is Not Workflow
 
 Most business "processes" are lifecycle state changes:

package/templates/sy-lowcode-app-workspace/examples/best-practices/design-style.md

@@ -2,6 +2,50 @@
 
 OpenXiangda business apps should feel like focused operational tools.
 
+## Default Admin UI Templates
+
+These templates are polished defaults for B-end admin pages. They are optional
+starting points, not hard product constraints.
+
+### `glass-home-dashboard`
+
+- Use for PC admin home pages, management portals, and general business
+  dashboards.
+- Visual direction: light blue glass surface, soft sidebar, translucent panels,
+  welcoming banner, KPI cards with small trends, quick actions, chart blocks,
+  ranking, activity feed, and target progress.
+- Keep density medium. The first viewport should make the platform identity,
+  navigation, search, and key metrics obvious.
+
+### `mint-analytics-dashboard`
+
+- Use for BI-style analysis, business reviews, operational reports, and weekly
+  summary pages.
+- Visual direction: low-saturation mint green, tighter metric cards, structured
+  chart grid, notification and todo panels, business summary, and health score.
+- Keep labels short and chart containers stable. Favor comparison, trend, and
+  distribution charts over decorative widgets.
+
+### `ops-monitor-dashboard`
+
+- Use for realtime monitoring, operations centers, task execution, system
+  health, and alert pages.
+- Visual direction: blue-purple accent, stronger status hierarchy, realtime
+  traffic chart, task progress bars, system rings, device state, alert list, and
+  subtle CSS motion.
+- Do not add GSAP or other animation dependencies by default. Use lightweight
+  CSS transitions unless a product requirement needs a true timeline engine.
+
+### `work-order-list-drawer`
+
+- Use as the default CRUD/data-management template for tickets, approvals,
+  orders, assets, and record operations.
+- Layout: fixed app shell, compact filters, toolbar, status stat cards, dense
+  table, pagination, and right-side overlay drawer.
+- Detail, create, edit, approve, reject, and process forms open in `Drawer` or
+  `Modal`. Do not put a permanent form/detail column beside the table, because
+  it narrows the main working area and makes table operations less stable.
+
 ## Interaction Defaults
 
 - Every async page has loading, refreshing, empty, error, and submit-pending
@@ -9,6 +53,8 @@ OpenXiangda business apps should feel like focused operational tools.
 - List refresh should keep existing rows visible and show a small refresh state.
 - Mutating actions need confirmation, pending feedback, success feedback, and a
   failure refresh or rollback path.
+- Detail, create, edit, approval, and processing workflows should use an overlay
+  `Drawer` or `Modal` with fixed header, scrollable body, and footer actions.
 - Mobile actions should use a bottom action area, drawer, or action sheet; do
   not copy a dense PC table toolbar to mobile.
 
@@ -19,6 +65,8 @@ OpenXiangda business apps should feel like focused operational tools.
 - Use status tags, responsibility fields, and latest action summaries for
   lifecycle data.
 - Do not build marketing-style hero pages for business tools.
+- Do not nest cards inside cards. Use panels for page regions, and use cards
+  only for repeated items, modals/drawers, or genuinely framed controls.
 
 ## Styling Rules
 

package/templates/sy-lowcode-app-workspace/examples/best-practices/src/pages/glass-home-dashboard/App.tsx

@@ -0,0 +1,8 @@
+import "@/shared/components/admin-ui-templates/styles.css";
+import "./styles.css";
+
+import { GlassHomeDashboard } from "./GlassHomeDashboard";
+
+export default function App() {
+  return <GlassHomeDashboard />;
+}

package/templates/sy-lowcode-app-workspace/examples/best-practices/src/pages/glass-home-dashboard/GlassHomeDashboard.tsx

@@ -0,0 +1,232 @@
+import { App as AntdApp, Button, Select, Space, Tag } from "antd";
+import { useMemo, useState } from "react";
+
+import { QueryState } from "@/shared/components/QueryState";
+import {
+  ActivityList,
+  AdminShell,
+  AdminTopbar,
+  DashboardChart,
+  HealthScore,
+  MetricCard,
+  Panel,
+  QuickActionGrid,
+  RankingList,
+  TemplateActionDrawer,
+} from "@/shared/components/admin-ui-templates/DashboardPrimitives";
+import {
+  createDonutOption,
+  createLineAreaOption,
+} from "@/shared/components/admin-ui-templates/chartOptions";
+import {
+  activities,
+  glassMetrics,
+  quickActions,
+  rankingItems,
+  standardNavItems,
+} from "@/shared/components/admin-ui-templates/sampleData";
+import type {
+  DrawerMode,
+  QuickAction,
+} from "@/shared/components/admin-ui-templates/types";
+
+type ViewState = "ready" | "loading" | "empty" | "error";
+type RangeKey = "7" | "30" | "90";
+
+const labels = ["03-04", "03-05", "03-06", "03-07", "03-08", "03-09", "03-10"];
+
+export function GlassHomeDashboard() {
+  const { message } = AntdApp.useApp();
+  const [activeNav, setActiveNav] = useState("home");
+  const [range, setRange] = useState<RangeKey>("7");
+  const [viewState, setViewState] = useState<ViewState>("ready");
+  const [drawerAction, setDrawerAction] = useState<QuickAction | null>(null);
+  const [drawerMode, setDrawerMode] = useState<DrawerMode>("create");
+
+  const lineOption = useMemo(
+    () =>
+      createLineAreaOption({
+        colors: ["#3b82f6", "#10b981"],
+        labels,
+        primaryName: "销售额（元）",
+        secondaryName: "订单数（笔）",
+        primary: range === "7" ? [72, 48, 70, 66, 88, 76, 98] : [48, 66, 74, 82, 92, 88, 108],
+        secondary: range === "7" ? [42, 28, 45, 35, 54, 39, 50] : [30, 43, 52, 59, 68, 62, 76],
+      }),
+    [range],
+  );
+
+  const donutOption = useMemo(
+    () =>
+      createDonutOption({
+        centerLabel: "总销售额",
+        centerValue: "¥632,316",
+        data: [
+          { name: "官网商城 35.6%", value: 35.6, color: "#3b82f6" },
+          { name: "移动端 28.3%", value: 28.3, color: "#10b981" },
+          { name: "合作伙伴 17.8%", value: 17.8, color: "#8b5cf6" },
+          { name: "线下门店 11.6%", value: 11.6, color: "#fb923c" },
+          { name: "其他渠道 6.7%", value: 6.7, color: "#cbd5e1" },
+        ],
+      }),
+    [],
+  );
+
+  function refresh() {
+    setViewState("loading");
+    window.setTimeout(() => {
+      setViewState("ready");
+      message.success("数据已刷新");
+    }, 500);
+  }
+
+  function openActionDrawer(action: QuickAction, mode: DrawerMode = "create") {
+    setDrawerAction(action);
+    setDrawerMode(mode);
+  }
+
+  const topbar = (
+    <AdminTopbar
+      title="首页"
+      searchPlaceholder="搜索功能、数据、报表"
+      userName="管理员"
+      extra={
+        <Space size={8}>
+          <Button onClick={refresh}>刷新</Button>
+          <Select<ViewState>
+            size="small"
+            value={viewState}
+            onChange={setViewState}
+            options={[
+              { value: "ready", label: "正常" },
+              { value: "loading", label: "加载" },
+              { value: "empty", label: "空态" },
+              { value: "error", label: "错误" },
+            ]}
+          />
+        </Space>
+      }
+    />
+  );
+
+  return (
+    <AdminShell
+      variant="glass"
+      activeKey={activeNav}
+      navItems={standardNavItems}
+      brandTitle="未来数据管理平台"
+      brandSubtitle="企业级数据决策中台"
+      topbar={topbar}
+      onNavChange={setActiveNav}
+    >
+      {viewState !== "ready" ? (
+        <Panel className="bp-glass-state-panel">
+          <QueryState
+            loading={viewState === "loading"}
+            empty={viewState === "empty"}
+            error={viewState === "error" ? "模拟接口异常，请点击重试恢复。" : null}
+            onRetry={() => setViewState("ready")}
+          />
+        </Panel>
+      ) : (
+        <>
+          <section className="bp-glass-hero-grid">
+            <Panel className="bp-glass-hero">
+              <div className="bp-glass-hero__copy">
+                <h1>晚上好，超级管理员 👋</h1>
+                <p>欢迎使用未来科技管理平台，今天是 2026年03月10日 星期二</p>
+                <div className="bp-glass-hero__pills">
+                  <Tag color="blue">今日访问 1,268</Tag>
+                  <Tag color="red">待办事项 8</Tag>
+                  <Tag color="purple">系统消息 12</Tag>
+                </div>
+              </div>
+              <div className="bp-glass-hero__visual" aria-hidden="true">
+                <i className="card card-a" />
+                <i className="card card-b" />
+                <i className="card card-c" />
+                <i className="wave" />
+              </div>
+            </Panel>
+            <Panel title="快捷操作" extra={<Button size="small">自定义</Button>}>
+              <QuickActionGrid
+                actions={quickActions}
+                onAction={(action) => openActionDrawer(action)}
+              />
+            </Panel>
+          </section>
+
+          <section className="bp-glass-metrics">
+            {glassMetrics.map((metric) => (
+              <MetricCard key={metric.id} metric={metric} />
+            ))}
+          </section>
+
+          <section className="bp-glass-main-grid">
+            <Panel
+              title="数据概览"
+              className="bp-glass-chart-panel"
+              extra={
+                <Space size={4}>
+                  {(["7", "30", "90"] as RangeKey[]).map((item) => (
+                    <Button
+                      key={item}
+                      size="small"
+                      type={range === item ? "primary" : "text"}
+                      onClick={() => setRange(item)}
+                    >
+                      近{item}天
+                    </Button>
+                  ))}
+                </Space>
+              }
+            >
+              <div className="bp-glass-chart-split">
+                <DashboardChart option={lineOption} height={255} />
+                <DashboardChart option={donutOption} height={255} />
+              </div>
+            </Panel>
+            <div className="bp-glass-side-stack">
+              <Panel title="排行榜">
+                <RankingList items={rankingItems} />
+              </Panel>
+              <Panel title="最近动态">
+                <ActivityList items={activities} />
+              </Panel>
+            </div>
+          </section>
+
+          <section className="bp-glass-bottom-grid">
+            <Panel title="目标达成">
+              <div className="bp-glass-targets">
+                {glassMetrics.slice(0, 4).map((item, index) => (
+                  <div key={item.id}>
+                    <span>{item.label}目标</span>
+                    <strong>{index === 1 ? "55.1%" : "52.7%"}</strong>
+                    <div>
+                      <i style={{ width: `${index === 1 ? 55 : 52}%` }} />
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </Panel>
+            <Panel title="系统健康度">
+              <HealthScore value={98} />
+            </Panel>
+          </section>
+        </>
+      )}
+
+      <TemplateActionDrawer
+        open={Boolean(drawerAction)}
+        title={drawerAction ? `${drawerAction.label}` : "新建事项"}
+        mode={drawerMode}
+        onClose={() => setDrawerAction(null)}
+        onSubmit={() => {
+          setDrawerAction(null);
+          message.success("表单已保存");
+        }}
+      />
+    </AdminShell>
+  );
+}

package/templates/sy-lowcode-app-workspace/examples/best-practices/src/pages/glass-home-dashboard/index.tsx

@@ -0,0 +1,10 @@
+import { createReactPage } from "openxiangda/runtime";
+
+import App from "./App";
+
+const page = createReactPage(App);
+
+export const mount = page.mount;
+export const update = page.update;
+export const unmount = page.unmount;
+export default page;

package/templates/sy-lowcode-app-workspace/examples/best-practices/src/pages/glass-home-dashboard/page.config.ts

@@ -0,0 +1,14 @@
+import { definePageConfig } from "@/types/app-workspace.types";
+
+export default definePageConfig({
+  code: "glass_home_dashboard",
+  name: "浅蓝玻璃经营首页",
+  description: "后台管理浅蓝玻璃拟态首页模板",
+  route: { pathKey: "glass_home_dashboard" },
+  entry: {
+    mode: "app-shell",
+    hidePlatformNav: true,
+    defaultRoute: "home",
+  },
+  menu: { name: "浅蓝玻璃经营首页" },
+});