@svadmin/create 0.34.0 → 0.35.0

package/blueprints/customer-workspace/ARCHITECTURE.md

@@ -0,0 +1,56 @@
+# Customer Application Boundaries
+
+This starter is a modular application, not a microservice platform. Keep the
+existing backend and adapt it through providers. The in-memory demo does not
+provide server authorization, durable storage, tenants, or a trusted audit log.
+
+## Ownership
+
+| Layer | Owner | Public entry |
+| --- | --- | --- |
+| Composition | Brand, navigation, page registration | `src/App.svelte` |
+| Services | Providers and application configuration | `src/svadmin.config.ts` |
+| Resources | Registered resource definitions | `src/resources.ts` |
+| Business feature | Contracts, queries, actions, pages | `src/features/<name>/index.ts` |
+| Headless feature data | Contracts/types without Svelte imports | `src/features/<name>/data.ts` |
+| Presentation | Shared tokens and design presets | `DESIGN.md`, `src/design.svelte.ts` |
+
+Use `create-svadmin add resource <name>` to preview a new feature, then explicitly
+apply it with `--write` and register its public definition. Keep feature-specific
+state inside the feature; communicate through public contracts. Do not reach
+into another feature's component, store, or contract implementation.
+
+`index.ts` exports UI composition. Use optional `data.ts` when CLI, server, or
+resource registration needs contracts without loading Svelte components.
+Customer customization belongs in application composition, providers and
+feature sources, not private `@svadmin/*/src` or `dist` imports.
+
+## Generation
+
+Search the shipped catalog with `create-svadmin vibe catalog --query "approval"`.
+Read a selected reference using `create-svadmin vibe inspect approval`.
+The JSON includes source, contracts, composition, design guidance and acceptance
+requirements. It is reference context, not a standalone page installer.
+For existing applications inspect the customer's current code first; never
+replace their schema, provider, permissions or workflows with demo equivalents.
+
+Generation is separate from execution. A generated mutation must use an explicit
+resource/command contract. Browser permission visibility does not authorize it.
+Keep record-level permissions, tenant isolation, approval transitions, audit,
+idempotency and persistence on the server. Review changes before applying them;
+never automatically retry a write whose outcome is unknown.
+
+## Verification
+
+`bun run check` first runs `check:architecture`, then the existing type check.
+The architecture check parses TypeScript and both Svelte script blocks. It
+checks imports, re-exports, import types, import-equals and literal dynamic imports
+(including Svelte template expressions); rejects parse errors,
+computed module imports and private package paths; resolves TypeScript aliases
+and resolves existing Svelte aliases, failing unresolved aliases closed. It allows cross-feature imports only via
+`index.ts` or `data.ts` (including a feature directory import).
+
+This is an import-boundary check, not a security sandbox, dependency-cycle
+detector or proof of backend authorization. Keep public entrypoints small.
+Follow it with `bun run build`, `bun run test:ui`, screenshot inspection and
+human review of real business rules before claiming customer acceptance.

package/blueprints/customer-workspace/README.md

@@ -0,0 +1,61 @@
+# Customer Workspace
+
+Svelte 5 + svadmin 的可修改页面样板，包含列表、详情、分组表单、工作台、
+设置和审批六类页面，以及三套应用级设计预设。不是已接通后端的业务产品。
+
+`previews/` 随包提供六类页面的桌面与移动端参考截图。它们用于挑选样板，
+不能代替客户修改后的重新验收；实际结果以本地 `test-results/` 为准。
+
+## 本地运行
+
+```bash
+bun install
+bun run check
+bun run dev
+```
+
+在编码助手中提出需求即可，例如：
+
+> 基于当前客户工作台，把全站调整为高密度运营，保留客户 CRUD 和跟进流程。
+> 先读取 svadmin.vibe.json 和设计规范，修改后运行检查并查看移动端截图。
+
+`AGENTS.md` 提供通用规则，`.agents/skills/svadmin-vibe/SKILL.md` 提供生成与
+验收流程。其他助手可以直接读取该文件。`svadmin.vibe.json` 可检索页面源码、
+组件、预设、状态与验收入口；已安装组件的声明才是 API 事实源。
+
+## 设计与业务
+
+- `src/design-selection.ts`：初始预设。
+- `src/design.svelte.ts`：品牌名称、主题、密度、宽度、表单列数、详情布局。
+- `src/features/customers/`：六类页面及 TypeBox 资源契约。
+- `src/resources.ts`：字段与导航元数据。
+- `src/svadmin.config.ts`：替换数据、身份和权限 Provider 的唯一入口。
+- `src/demo/provider.ts`：内存演示数据；刷新页面即恢复，不上传任何数据。
+
+工作区设置仅在当前会话内生效，持久默认值请修改设计配置。内置主题选择仍遵循
+svadmin 已保存的个人偏好，不应把颜色选择当成授权或数据隔离。
+
+客户与跟进支持创建、编辑，审批支持修改结果及意见；删除不开放。
+审批样板仅演示 UI，不具备真实审批流、不可变审计或服务端权限控制。
+接入生产前必须实现这些能力，并移除演示 Provider 和开发状态开关。
+
+## 验收
+
+```bash
+bun run build
+bunx playwright install chromium
+bun run test:ui
+```
+
+Playwright 自动启动本地开发服务，生成桌面与移动端截图到 `test-results/`，
+检查页面、交互、浏览器异常和页面级溢出。宽表格允许在自己的滚动区内横向滚动。
+视觉品味、品牌一致性、真实权限和业务正确性仍需要人工验收。
+
+开发状态可以通过 URL 查询参数切换，例如 `/?scenario=empty#/customers`：
+`empty`、`loading`、`error`、`denied`、`partial`、`readonly`。生产构建不读取该开关。
+
+## 演进边界
+
+这是一条开发者生成路径，不内置模型调用或密钥管理。没有承诺任意应用生成；
+无代码仪表盘仍应使用受策略约束的 `@svadmin/surface`。首次接入真实后端时，
+同步资源契约、`svadmin.ai.json`、权限与针对性测试，避免 UI 与能力声明漂移。

package/blueprints/customer-workspace/playwright.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './tests',
+  fullyParallel: true,
+  timeout: 60_000,
+  use: { baseURL: 'http://127.0.0.1:5198', trace: 'retain-on-failure', reducedMotion: 'reduce' },
+  webServer: {
+    command: 'bun run dev --host 127.0.0.1 --port 5198 --strictPort',
+    url: 'http://127.0.0.1:5198',
+    reuseExistingServer: false,
+  },
+  projects: [
+    { name: 'desktop', use: { ...devices['Desktop Chrome'], viewport: { width: 1440, height: 900 } } },
+    { name: 'mobile', use: { ...devices['Desktop Chrome'], viewport: { width: 390, height: 844 }, isMobile: true, hasTouch: true } },
+  ],
+});

package/blueprints/customer-workspace/scripts/check-architecture.mjs

@@ -0,0 +1,142 @@
+import { existsSync, readdirSync, readFileSync, realpathSync } from 'node:fs';
+import { dirname, extname, relative, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import ts from 'typescript';
+import { parse } from 'svelte/compiler';
+
+const extensions = new Set(['.ts', '.tsx', '.mts', '.cts', '.js', '.jsx', '.mjs', '.cjs', '.svelte']);
+
+function walk(directory) {
+  return readdirSync(directory, { withFileTypes: true }).flatMap(entry => {
+    if (entry.name.startsWith('.') || entry.name === 'node_modules') return [];
+    const file = resolve(directory, entry.name);
+    return entry.isDirectory() ? walk(file) : extensions.has(extname(file)) ? [file] : [];
+  });
+}
+
+function templateImports(node, file, failures) {
+  if (!node || typeof node !== 'object') return [];
+  const found = [];
+  const value = node.type === 'ImportExpression' ? node.source
+    : node.type === 'CallExpression' && node.callee?.name === 'require' ? node.arguments[0] : undefined;
+  if (node.type === 'ImportExpression' || (node.type === 'CallExpression' && node.callee?.name === 'require')) {
+    if (value?.type === 'Literal' && typeof value.value === 'string') found.push(value.value);
+    else failures.push(`${file}: computed module imports cannot be checked`);
+  }
+  for (const child of Object.values(node)) {
+    if (Array.isArray(child)) found.push(...child.flatMap(item => templateImports(item, file, failures)));
+    else if (child && typeof child === 'object') found.push(...templateImports(child, file, failures));
+  }
+  return found;
+}
+
+function fileImports(file, failures) {
+  const text = readFileSync(file, 'utf8');
+  if (!file.endsWith('.svelte')) return imports(file, text, failures);
+  const ast = parse(text, { modern: true });
+  return [
+    ...[ast.module, ast.instance].filter(Boolean).flatMap(script =>
+      imports(file, text.slice(script.content.start, script.content.end), failures)),
+    ...templateImports(ast.fragment, file, failures),
+  ];
+}
+
+function imports(file, source, failures) {
+  const specifiers = [];
+  const kind = ['.tsx', '.jsx'].includes(extname(file)) ? ts.ScriptKind.TSX : ts.ScriptKind.TS;
+  const tree = ts.createSourceFile(file, source, ts.ScriptTarget.Latest, true, kind);
+  for (const error of tree.parseDiagnostics) {
+    failures.push(`${file}: parse error: ${ts.flattenDiagnosticMessageText(error.messageText, '\n')}`);
+  }
+  function visit(node) {
+    let value;
+    if (ts.isImportDeclaration(node) || ts.isExportDeclaration(node)) value = node.moduleSpecifier;
+    else if (ts.isImportEqualsDeclaration(node) && ts.isExternalModuleReference(node.moduleReference)) value = node.moduleReference.expression;
+    else if (ts.isImportTypeNode(node) && ts.isLiteralTypeNode(node.argument)) value = node.argument.literal;
+    else if (ts.isCallExpression(node) && (node.expression.kind === ts.SyntaxKind.ImportKeyword
+      || (ts.isIdentifier(node.expression) && node.expression.text === 'require'))) {
+      value = node.arguments[0];
+      if (!value || !ts.isStringLiteralLike(value)) failures.push(`${file}: computed module imports cannot be checked`);
+    }
+    if (value && ts.isStringLiteralLike(value)) specifiers.push(value.text);
+    ts.forEachChild(node, visit);
+  }
+  visit(tree);
+  return specifiers;
+}
+
+function featurePath(root, file) {
+  const parts = relative(resolve(root, 'src/features'), file).split(/[\\/]/u);
+  if (parts[0] === '..' || parts[0] === '') return undefined;
+  return { name: parts[0], entry: parts.slice(1).join('/') };
+}
+
+function resolveImport(specifier, file, options, failures) {
+  if (specifier.startsWith('.')) return resolve(dirname(file), specifier);
+  const resolved = ts.resolveModuleName(specifier, file, options, ts.sys).resolvedModule?.resolvedFileName;
+  if (resolved) return resolved;
+  // 未解析的路径别名可能隐藏跨模块引用，不能当作普通 npm 依赖放行。
+  const aliases = Object.keys(options.paths ?? {});
+  const alias = aliases.filter(alias => alias.includes('*')
+    ? specifier.startsWith(alias.split('*')[0]) && specifier.endsWith(alias.split('*')[1])
+    : specifier === alias).sort((a, b) =>
+      Number(b === specifier) - Number(a === specifier)
+      || b.split('*')[0].length - a.split('*')[0].length)[0];
+  if (alias) {
+    const [prefix, suffix = ''] = alias.split('*');
+    const wildcard = specifier.slice(prefix.length, specifier.length - suffix.length);
+    for (const mapping of options.paths[alias]) {
+      const candidate = resolve(options.baseUrl ?? options.pathsBasePath, mapping.replace('*', wildcard));
+      if (candidate.endsWith('.svelte') && existsSync(candidate)) return candidate;
+    }
+    failures.push(`${file}: unresolved path alias ${specifier}`);
+  }
+  return undefined;
+}
+
+function checkImport(root, file, specifier, options, failures) {
+  if (/^@svadmin\/[^/]+\/(?:src|dist)(?:\/|$)/u.test(specifier)) {
+    failures.push(`${relative(root, file)}: use public package exports, not ${specifier}`);
+  }
+  const target = resolveImport(specifier, file, options, failures);
+  if (!target) return;
+  const from = featurePath(root, file);
+  const to = featurePath(root, target);
+  if (!to || from?.name === to.name) return;
+  if (!['', 'index', 'data'].includes(to.entry.replace(/\.(?:ts|js|mts|cts|mjs|cjs)$/u, ''))) {
+    failures.push(`${relative(root, file)}: ${specifier} bypasses the ${to.name} public index.ts/data.ts entry`);
+  }
+}
+
+export function checkArchitecture(root) {
+  const failures = [];
+  const configFile = resolve(root, 'tsconfig.json');
+  const config = ts.readConfigFile(configFile, ts.sys.readFile);
+  if (config.error) throw new Error(ts.flattenDiagnosticMessageText(config.error.messageText, '\n'));
+  const parsed = ts.parseJsonConfigFileContent(config.config, ts.sys, root);
+  const configErrors = parsed.errors.filter(error => error.code !== 18003);
+  if (configErrors.length) throw new Error(configErrors.map(error => ts.flattenDiagnosticMessageText(error.messageText, '\n')).join('\n'));
+  const features = resolve(root, 'src/features');
+  if (existsSync(features)) {
+    for (const entry of readdirSync(features, { withFileTypes: true })) {
+      if (entry.isDirectory() && !existsSync(resolve(features, entry.name, 'index.ts'))) {
+        failures.push(`src/features/${entry.name}: missing public index.ts`);
+      }
+    }
+  }
+  const source = resolve(root, 'src');
+  for (const file of existsSync(source) ? walk(source) : []) {
+    for (const specifier of fileImports(file, failures)) {
+      checkImport(root, file, specifier, parsed.options, failures);
+    }
+  }
+  return failures;
+}
+
+if (process.argv[1] && realpathSync(process.argv[1]) === fileURLToPath(import.meta.url)) {
+  const failures = checkArchitecture(process.cwd());
+  if (failures.length) {
+    console.error(failures.join('\n'));
+    process.exitCode = 1;
+  } else console.info('Feature architecture boundaries passed.');
+}

package/blueprints/customer-workspace/src/App.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { AdminApp } from '@svadmin/ui';
+  import { resolveAdminConfig } from '@svadmin/app';
+  import config from './svadmin.config';
+  import { brand, getDesign } from './design.svelte';
+  import { CustomerList, CustomerForm, CustomerDetail, CustomerDashboard, ApprovalReview, WorkspaceSettings } from './features/customers';
+  const resolved = resolveAdminConfig(config);
+  const design = $derived(getDesign());
+  const resourcePages = {
+    customers: { list: CustomerList, create: CustomerForm, edit: CustomerForm, clone: CustomerForm, show: CustomerDetail },
+    followups: { list: CustomerList, create: CustomerForm, edit: CustomerForm },
+    approvals: { list: CustomerList, edit: ApprovalReview, show: ApprovalReview },
+    workspace_settings: { list: WorkspaceSettings },
+  };
+</script>
+
+<AdminApp providerBundle={resolved.providers} resources={[...resolved.resources]}
+  title={brand.name} locale="zh-CN" themeConfig={design.theme} {resourcePages}
+  queryClientDefaultOptions={{ queries: { retry: false } }}>
+  {#snippet dashboard()}<CustomerDashboard />{/snippet}
+</AdminApp>

package/blueprints/customer-workspace/src/app.css

@@ -0,0 +1,8 @@
+@import "@svadmin/ui/app.css";
+
+html { letter-spacing: 0; }
+body { margin: 0; }
+
+/* 跳转链接只在键盘聚焦时进入视口，避免遮住移动端菜单。 */
+[data-svadmin-skip-link] { transform: translateY(calc(-100% - 1rem)); }
+[data-svadmin-skip-link]:focus { transform: translateY(0); }

package/blueprints/customer-workspace/src/demo/provider.ts

@@ -0,0 +1,110 @@
+import { HttpError, type BaseRecord, type DataProvider, type Filter } from '@svadmin/core';
+import { parseContractCreateInput, parseContractUpdateInput } from '@svadmin/core/resource-contract';
+import { customers, followups, approvals, type Customer, type Followup, type Approval } from '../features/customers/data';
+
+export type DemoScenario = 'normal' | 'empty' | 'error' | 'loading' | 'denied' | 'partial' | 'readonly';
+
+export const demoCustomers: Customer[] = [
+  { id: 'c1', name: '澄川科技', contact: '林悦', email: 'lin@example.test', status: 'active', owner: '陈晨', notes: '下周确认第二阶段交付范围。' },
+  { id: 'c2', name: '远山设计事务所', contact: '周宁', email: 'zhou@example.test', status: 'potential', owner: '李沐', notes: '' },
+  { id: 'c3', name: '海川城市服务与可持续基础设施联合研究中心', contact: '张文', email: 'zhang@example.test', status: 'active', owner: '陈晨', notes: '涉及多个业务部门，合同审批由统一联系人协调。' },
+  { id: 'c4', name: '青禾教育', contact: '许安', email: 'xu@example.test', status: 'paused', owner: '李沐', notes: '等待预算确认。' },
+];
+const demoFollowups: Followup[] = [
+  { id: 'f1', customerId: 'c1', summary: '已完成需求访谈，客户确认先上线客户与审批模块。', owner: '陈晨', date: '2026-09-21' },
+  { id: 'f2', customerId: 'c1', summary: '发送实施方案，等待客户确认。', owner: '陈晨', date: '2026-09-23' },
+  { id: 'f3', customerId: 'c3', summary: '整理跨部门的数据字段与权限边界。', owner: '李沐', date: '2026-09-22' },
+];
+const demoApprovals: Approval[] = [
+  { id: 'a1', title: '澄川科技合同变更', applicant: '陈晨', status: 'pending', reason: '增加跟进记录模块，需要确认交付范围。' },
+  { id: 'a2', title: '远山设计试用延期', applicant: '李沐', status: 'pending', reason: '申请延长试用期七天。' },
+];
+
+function matches(row: BaseRecord, filter: Filter): boolean {
+  if (!('field' in filter)) {
+    return filter.operator === 'or'
+      ? filter.value.some(f => matches(row, f))
+      : filter.value.every(f => matches(row, f));
+  }
+  const value = row[filter.field];
+  switch (filter.operator) {
+    case 'eq': return value === filter.value;
+    case 'ne': return value !== filter.value;
+    case 'contains': return String(value ?? '').toLowerCase().includes(String(filter.value).toLowerCase());
+    case 'in': return Array.isArray(filter.value) && filter.value.includes(value);
+    case 'null': return value === null || value === undefined;
+    case 'nnull': return value !== null && value !== undefined;
+    default: throw new HttpError(`演示数据不支持筛选条件 ${filter.operator}`, 400);
+  }
+}
+
+export function createDemoProvider(scenario: DemoScenario = 'normal'): DataProvider {
+  const rows: Record<string, BaseRecord[]> = {
+    customers: structuredClone(demoCustomers),
+    followups: structuredClone(demoFollowups),
+    approvals: structuredClone(demoApprovals),
+  };
+  async function table(resource: string): Promise<BaseRecord[]> {
+    if (scenario === 'denied') throw new HttpError('无权访问', 403);
+    if (scenario === 'error' || (scenario === 'partial' && resource === 'approvals')) throw new HttpError('演示服务暂不可用', 503);
+    if (scenario === 'loading') await new Promise(resolve => setTimeout(resolve, 2500));
+    const data = rows[resource];
+    if (!data) throw new HttpError('资源不存在', 404);
+    return data;
+  }
+  function find(data: BaseRecord[], id: string | number): BaseRecord {
+    const row = data.find(record => record['id'] === String(id));
+    if (!row) throw new HttpError('记录不存在', 404);
+    return row;
+  }
+  return {
+    getApiUrl: () => 'memory://svadmin-demo',
+    async getList({ resource, pagination, sorters = [], filters = [] }) {
+      const data = await table(resource);
+      let result = scenario === 'empty' ? [] : data.filter(row => filters.every(f => matches(row, f)));
+      result = [...result].sort((a, b) => {
+        for (const sorter of sorters) {
+          const order = String(a[sorter.field] ?? '').localeCompare(String(b[sorter.field] ?? ''), 'zh-CN', { numeric: true });
+          if (order) return sorter.order === 'desc' ? -order : order;
+        }
+        return 0;
+      });
+      const total = result.length;
+      if (pagination?.mode !== 'off') {
+        const size = pagination?.pageSize ?? 10;
+        const start = ((pagination?.current ?? 1) - 1) * size;
+        result = result.slice(start, start + size);
+      }
+      return { data: structuredClone(result), total };
+    },
+    async getOne({ resource, id }) {
+      return { data: structuredClone(find(await table(resource), id)) };
+    },
+    async getMany({ resource, ids }) {
+      return { data: structuredClone((await table(resource)).filter(row => ids.some(id => String(id) === row['id']))) };
+    },
+    async create({ resource, variables }) {
+      if (scenario === 'readonly') throw new HttpError('仅允许查看', 403);
+      const data = await table(resource);
+      const input = resource === 'customers' ? parseContractCreateInput(customers, variables)
+        : resource === 'followups' ? parseContractCreateInput(followups, variables)
+        : (() => { throw new HttpError('该资源不允许创建', 403); })();
+      if (resource === 'followups' && 'customerId' in input) find(await table('customers'), String(input.customerId));
+      const record = { ...input, id: crypto.randomUUID() };
+      data.push(record);
+      return { data: structuredClone(record) };
+    },
+    async update({ resource, id, variables }) {
+      if (scenario === 'readonly') throw new HttpError('仅允许查看', 403);
+      const data = await table(resource);
+      const row = find(data, id);
+      const input = resource === 'customers' ? parseContractUpdateInput(customers, variables)
+        : resource === 'followups' ? parseContractUpdateInput(followups, variables)
+        : parseContractUpdateInput(approvals, variables);
+      if (resource === 'followups' && 'customerId' in input) find(await table('customers'), String(input.customerId));
+      Object.assign(row, input);
+      return { data: structuredClone(row) };
+    },
+    async deleteOne() { throw new HttpError('演示项目未启用删除', 403); },
+  };
+}

package/blueprints/customer-workspace/src/design.svelte.ts

@@ -0,0 +1,36 @@
+import type { ThemeConfig } from '@svadmin/core';
+import { initialPreset } from './design-selection';
+
+interface DesignPreset {
+  label: string;
+  density: 'compact' | 'comfortable';
+  width: 'wide' | 'default';
+  formColumns: 1 | 2;
+  detailLayout: 'list' | 'grid';
+  theme: ThemeConfig;
+}
+
+export const designPresets = {
+  operations: {
+    label: '高密度运营', density: 'compact', width: 'wide',
+    formColumns: 2, detailLayout: 'list',
+    theme: { colorPreset: 'neutral', layoutPreset: 'clean-flat' },
+  },
+  enterprise: {
+    label: '标准企业', density: 'comfortable', width: 'wide',
+    formColumns: 2, detailLayout: 'grid',
+    theme: { colorPreset: 'stripe', layoutPreset: 'clean-flat' },
+  },
+  collaboration: {
+    label: '轻量协作', density: 'comfortable', width: 'default',
+    formColumns: 1, detailLayout: 'list',
+    theme: { colorPreset: 'green', layoutPreset: 'clean-flat' },
+  },
+} as const satisfies Record<string, DesignPreset>;
+
+export type DesignPresetId = keyof typeof designPresets;
+export const brand = $state({ name: '客户工作台', preset: initialPreset as DesignPresetId });
+
+export function getDesign(): DesignPreset {
+  return designPresets[brand.preset];
+}

package/blueprints/customer-workspace/src/features/customers/Dashboard.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import { useList, useCan } from '@svadmin/core';
+  import { AutoTable, Button, DashboardPage, DataState, MetricBlock, PageSection } from '@svadmin/ui';
+  import { customers, followups, approvals } from './contracts';
+  import { getDesign } from '../../design.svelte';
+  const design = $derived(getDesign());
+  const access = useCan(() => ({ resource: 'customers', action: 'list' }));
+  const followupAccess = useCan(() => ({ resource: 'followups', action: 'list' }));
+  const approvalAccess = useCan(() => ({ resource: 'approvals', action: 'list' }));
+  const customerQuery = useList(() => ({ resource: customers, pagination: { current: 1, pageSize: 1 }, queryOptions: { enabled: access.allowed } }));
+  const followupQuery = useList(() => ({ resource: followups, pagination: { current: 1, pageSize: 1 }, queryOptions: { enabled: followupAccess.allowed } }));
+  const pendingQuery = useList(() => ({
+    resource: approvals, pagination: { current: 1, pageSize: 1 },
+    filters: [{ field: 'status' as const, operator: 'eq' as const, value: 'pending' as const }],
+    queryOptions: { enabled: approvalAccess.allowed },
+  }));
+  const stats = $derived([
+    { label: '客户总数', query: customerQuery, access },
+    { label: '跟进记录', query: followupQuery, access: followupAccess },
+    { label: '待审批', query: pendingQuery, access: approvalAccess },
+  ]);
+</script>
+
+<DashboardPage title="客户工作台">
+  {#snippet actions()}<Button href="#/customers">查看客户</Button>{/snippet}
+  {#snippet metrics()}
+    {#each stats as stat (stat.label)}
+      <MetricBlock label={stat.label}
+        value={!stat.access.allowed || stat.query.isError ? '—' : stat.query.data?.total ?? '—'}
+        loading={stat.access.isLoading || (stat.access.allowed && stat.query.isLoading)} />
+    {/each}
+  {/snippet}
+  {#if stats.some(s => s.access.allowed && s.query.isError)}
+    <DataState state="error" title="部分数据暂不可用" retry={() => {
+      for (const stat of stats) if (stat.access.allowed && stat.query.isError) void stat.query.refetch();
+    }} />
+  {/if}
+  <PageSection title="客户">
+    <AutoTable resourceName="customers" showHeader={false} selectable={false}
+      syncWithLocation={false} density={design.density} />
+  </PageSection>
+  {#snippet secondary()}
+    <PageSection title="待办">
+      <Button variant="ghost" href="#/approvals">处理审批</Button>
+      <Button variant="ghost" href="#/followups/create">记录跟进</Button>
+    </PageSection>
+  {/snippet}
+</DashboardPage>

package/blueprints/customer-workspace/src/features/customers/Detail.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import { useCan, useList } from '@svadmin/core';
+  import { Button, ContentPageShell, DataState, PageSection, ShowPage } from '@svadmin/ui';
+  import { getDesign } from '../../design.svelte';
+  import { followups } from './contracts';
+  let { resourceName, id }: { resourceName: string; id?: string | number } = $props();
+  const design = $derived(getDesign());
+  const permission = useCan(() => ({ resource: 'followups', action: 'list' }));
+  const records = useList(() => ({
+    resource: followups,
+    filters: [{ field: 'customerId', operator: 'eq', value: String(id) }],
+    sorters: [{ field: 'date', order: 'desc' }],
+    pagination: { current: 1, pageSize: 5 },
+    queryOptions: { enabled: id !== undefined && permission.allowed },
+  }));
+</script>
+
+<ContentPageShell pageId="customer-detail" width={design.width} density={design.density}>
+  {#if id !== undefined}
+    <ShowPage {resourceName} {id} layout={design.detailLayout} density={design.density}>
+      <PageSection title="最近跟进">
+        {#snippet actions()}<Button variant="ghost" href="#/followups">全部记录</Button>{/snippet}
+        {#if permission.isLoading || records.isLoading}
+          <DataState state="loading" />
+        {:else if !permission.allowed}
+          <DataState state="forbidden" />
+        {:else if records.isError}
+          <DataState state="error" retry={() => { void records.refetch(); }} />
+        {:else if !records.data?.data.length}
+          <DataState state="empty" title="暂无跟进记录" />
+        {:else}
+          <ol class="followups">
+            {#each records.data.data as record (record.id)}
+              <li><p>{record.summary}</p><span>{record.owner} · {record.date}</span></li>
+            {/each}
+          </ol>
+        {/if}
+      </PageSection>
+    </ShowPage>
+  {:else}
+    <DataState state="error" title="缺少客户编号" />
+  {/if}
+</ContentPageShell>
+
+<style>
+  .followups { list-style: none; padding: 0; margin: 0; }
+  li { padding: 1rem 0; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
+  p { margin: 0 0 .375rem; }
+  span { color: var(--muted-foreground); font-size: .8125rem; }
+</style>

package/blueprints/customer-workspace/src/features/customers/Form.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { AutoForm, ContentPageShell } from '@svadmin/ui';
+  import { getDesign } from '../../design.svelte';
+  let { resourceName, mode = 'create', id }: {
+    resourceName: string; mode?: 'create' | 'edit' | 'clone'; id?: string | number;
+  } = $props();
+  const design = $derived(getDesign());
+</script>
+
+<ContentPageShell pageId="customer-form" width={design.width} density={design.density}>
+  <AutoForm {resourceName} {mode} {...(id === undefined ? {} : { id })}
+    columns={design.formColumns} density={design.density} />
+</ContentPageShell>

package/blueprints/customer-workspace/src/features/customers/List.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import { AutoTable, ContentPageShell } from '@svadmin/ui';
+  import { getDesign } from '../../design.svelte';
+  let { resourceName }: { resourceName: string } = $props();
+  const design = $derived(getDesign());
+</script>
+
+<ContentPageShell pageId="customer-list" width={design.width} density={design.density}>
+  <AutoTable {resourceName} density={design.density} />
+</ContentPageShell>

package/blueprints/customer-workspace/src/features/customers/Review.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { AutoForm, ContentPageShell, DataState, PageSection, ShowPage } from '@svadmin/ui';
+  import { getDesign } from '../../design.svelte';
+  let { resourceName, id }: { resourceName: string; id?: string | number } = $props();
+  const design = $derived(getDesign());
+</script>
+
+<ContentPageShell pageId="approval-review" width="default" density={design.density}>
+  {#if id !== undefined}
+    <ShowPage {resourceName} {id} density={design.density}>
+      <PageSection title="审批决定">
+        <AutoForm {resourceName} {id} mode="edit" showHeader={false} columns={1} />
+      </PageSection>
+    </ShowPage>
+  {:else}
+    <DataState state="error" title="缺少审批编号" />
+  {/if}
+</ContentPageShell>