@svadmin/create 0.34.0 → 0.35.1

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

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { ContentPageShell, Input, SettingsFieldRow, SettingsGroup } from '@svadmin/ui';
+  import { brand, designPresets, type DesignPresetId } from '../../design.svelte';
+  let { resourceName }: { resourceName: string } = $props();
+  function choosePreset(value: string) {
+    if (Object.hasOwn(designPresets, value)) brand.preset = value as DesignPresetId;
+  }
+</script>
+
+<ContentPageShell title="工作区设置" pageId={resourceName} width="narrow">
+  <SettingsGroup title="品牌">
+    <SettingsFieldRow label="工作区名称">
+      {#snippet control()}<Input aria-label="工作区名称" bind:value={brand.name} maxlength={40} />{/snippet}
+    </SettingsFieldRow>
+  </SettingsGroup>
+  <SettingsGroup title="界面">
+    <SettingsFieldRow label="设计预设">
+      {#snippet control()}
+        <select aria-label="设计预设" value={brand.preset} onchange={event => choosePreset(event.currentTarget.value)}>
+          {#each Object.entries(designPresets) as [id, preset] (id)}
+            <option value={id}>{preset.label}</option>
+          {/each}
+        </select>
+      {/snippet}
+    </SettingsFieldRow>
+  </SettingsGroup>
+</ContentPageShell>
+
+<style>
+  select { max-width: 100%; min-height: 2.5rem; padding: .5rem; border: 1px solid var(--border); border-radius: .375rem; background: var(--background); color: var(--foreground); font: inherit; }
+  select:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
+</style>

package/blueprints/customer-workspace/src/features/customers/contracts.ts

@@ -0,0 +1,44 @@
+import { Type, type Static } from '@sinclair/typebox';
+import { defineResource } from '@svadmin/core/resource-contract';
+
+export const customerInput = Type.Object({
+  name: Type.String({ minLength: 1, maxLength: 160 }),
+  contact: Type.String({ minLength: 1, maxLength: 80 }),
+  email: Type.String({ minLength: 1, maxLength: 254, pattern: '^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$' }),
+  status: Type.Union([Type.Literal('potential'), Type.Literal('active'), Type.Literal('paused')]),
+  owner: Type.String({ minLength: 1 }),
+  notes: Type.String({ maxLength: 4000 }),
+});
+export const customerRecord = Type.Object({ id: Type.String(), ...customerInput.properties });
+export type Customer = Static<typeof customerRecord>;
+export const customers = defineResource('customers', {
+  record: customerRecord, create: customerInput, update: Type.Partial(customerInput),
+});
+
+export const followupInput = Type.Object({
+  customerId: Type.String({ minLength: 1 }),
+  summary: Type.String({ minLength: 1, maxLength: 2000 }),
+  owner: Type.String({ minLength: 1 }),
+  date: Type.String({ pattern: '^\\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\\d|3[01])$' }),
+});
+export const followupRecord = Type.Object({ id: Type.String(), ...followupInput.properties });
+export type Followup = Static<typeof followupRecord>;
+export const followups = defineResource('followups', {
+  record: followupRecord, create: followupInput, update: Type.Partial(followupInput),
+});
+
+export const approvalInput = Type.Object({
+  title: Type.String({ minLength: 1 }),
+  applicant: Type.String({ minLength: 1 }),
+  status: Type.Union([Type.Literal('pending'), Type.Literal('approved'), Type.Literal('rejected')]),
+  reason: Type.String({ minLength: 1 }),
+});
+export const approvalRecord = Type.Object({ id: Type.String(), ...approvalInput.properties });
+export type Approval = Static<typeof approvalRecord>;
+export const approvals = defineResource('approvals', {
+  record: approvalRecord, update: Type.Pick(approvalInput, ['status', 'reason']),
+});
+
+export const workspaceSettings = defineResource('workspace_settings', {
+  record: Type.Object({ id: Type.String() }),
+});

package/blueprints/customer-workspace/src/features/customers/data.ts

@@ -0,0 +1,2 @@
+export { customers, followups, approvals, workspaceSettings } from './contracts';
+export type { Customer, Followup, Approval } from './contracts';

package/blueprints/customer-workspace/src/features/customers/index.ts

@@ -0,0 +1,7 @@
+export { customers, followups, approvals, workspaceSettings } from './data';
+export { default as CustomerList } from './List.svelte';
+export { default as CustomerForm } from './Form.svelte';
+export { default as CustomerDetail } from './Detail.svelte';
+export { default as CustomerDashboard } from './Dashboard.svelte';
+export { default as ApprovalReview } from './Review.svelte';
+export { default as WorkspaceSettings } from './Settings.svelte';

package/blueprints/customer-workspace/src/resources.ts

@@ -0,0 +1,45 @@
+import type { AdminResourceDefinition } from '@svadmin/core';
+import { customers, followups, approvals, workspaceSettings } from './features/customers/data';
+
+export const uiOnlyResources: readonly string[] = ['workspace_settings'];
+
+export const resources: AdminResourceDefinition[] = [
+  {
+    name: 'customers', label: '客户', icon: 'users', contract: customers, canDelete: false,
+    fields: [
+      { key: 'id', label: '编号', type: 'text', showInForm: false, showInList: false },
+      { key: 'name', label: '客户名称', type: 'text', required: true, searchable: true, group: '基本信息' },
+      { key: 'status', label: '状态', type: 'select', required: true, defaultValue: 'potential', group: '基本信息',
+        options: [{ label: '潜在客户', value: 'potential' }, { label: '合作中', value: 'active' }, { label: '已暂停', value: 'paused' }] },
+      { key: 'contact', label: '联系人', type: 'text', required: true, group: '联系信息' },
+      { key: 'email', label: '邮箱', type: 'email', required: true, showInList: false, group: '联系信息' },
+      { key: 'owner', label: '负责人', type: 'text', required: true, group: '跟进安排' },
+      { key: 'notes', label: '备注', type: 'textarea', defaultValue: '', showInList: false, group: '跟进安排' },
+    ],
+  },
+  {
+    name: 'followups', label: '跟进记录', icon: 'calendar', contract: followups, canDelete: false,
+    fields: [
+      { key: 'id', label: '编号', type: 'text', showInForm: false, showInList: false },
+      { key: 'customerId', label: '客户', type: 'relation', resource: 'customers', optionLabel: 'name', optionValue: 'id', required: true },
+      { key: 'summary', label: '跟进内容', type: 'textarea', required: true, searchable: true },
+      { key: 'owner', label: '负责人', type: 'text', required: true },
+      { key: 'date', label: '跟进日期', type: 'date', required: true },
+    ],
+  },
+  {
+    name: 'approvals', label: '审批', icon: 'check', contract: approvals, canCreate: false, canDelete: false,
+    fields: [
+      { key: 'id', label: '编号', type: 'text', showInForm: false, showInList: false },
+      { key: 'title', label: '申请事项', type: 'text', showInForm: false, searchable: true },
+      { key: 'applicant', label: '申请人', type: 'text', showInForm: false },
+      { key: 'status', label: '审批结果', type: 'select', required: true,
+        options: [{ label: '待审批', value: 'pending' }, { label: '已通过', value: 'approved' }, { label: '已驳回', value: 'rejected' }] },
+      { key: 'reason', label: '审批意见', type: 'textarea', required: true, showInList: false },
+    ],
+  },
+  {
+    name: 'workspace_settings', label: '工作区设置', icon: 'settings', contract: workspaceSettings, fields: [],
+    canCreate: false, canEdit: false, canDelete: false, canShow: false,
+  },
+];

package/blueprints/customer-workspace/src/svadmin.config.ts

@@ -0,0 +1,21 @@
+import { createProviderBundle, defineAdminConfig } from '@svadmin/app';
+import { resources } from './resources';
+import { createDemoProvider, type DemoScenario } from './demo/provider';
+
+const requested = import.meta.env.DEV ? new URLSearchParams(location.search).get('scenario') : null;
+const scenarios: readonly string[] = ['normal', 'empty', 'error', 'loading', 'denied', 'partial', 'readonly'];
+const scenario: DemoScenario = requested !== null && scenarios.includes(requested) ? requested as DemoScenario : 'normal';
+
+export default defineAdminConfig({
+  name: 'customer-workspace',
+  providers: createProviderBundle({
+    dataProvider: createDemoProvider(scenario),
+    accessControlProvider: {
+      can: async ({ action }) => ({
+        can: scenario !== 'denied' && (scenario !== 'readonly' || ['list', 'show', 'field'].includes(action)),
+      }),
+      options: { buttons: { enableAccessControl: true, hideIfUnauthorized: true } },
+    },
+  }),
+  resources,
+});

package/blueprints/customer-workspace/svadmin.vibe.json

@@ -0,0 +1,45 @@
+{
+  "version": 1,
+  "id": "customer-workspace",
+  "status": "starter",
+  "framework": "svelte5-vite",
+  "design": "src/design.svelte.ts",
+  "selection": "src/design-selection.ts",
+  "presets": ["operations", "enterprise", "collaboration"],
+  "contracts": "src/features/customers/contracts.ts",
+  "resources": "src/resources.ts",
+  "provider": "src/svadmin.config.ts",
+  "dataMode": "in-memory-demo",
+  "previews": {
+    "desktop": "previews/{pageId}-desktop.png",
+    "mobile": "previews/{pageId}-mobile.png",
+    "note": "Reference captures of this starter, not proof that subsequent customer edits passed acceptance."
+  },
+  "pages": [
+    { "id": "list", "source": "src/features/customers/List.svelte", "route": "/customers", "intent": "检索、筛选和进入客户记录", "tags": ["列表", "客户", "search", "filter", "table", "crud"], "components": ["ContentPageShell", "AutoTable"] },
+    { "id": "detail", "source": "src/features/customers/Detail.svelte", "route": "/customers/show/c1", "intent": "查看客户与最近跟进", "tags": ["详情", "跟进", "record", "activity"], "components": ["ShowPage", "PageSection", "DataState"] },
+    { "id": "form", "source": "src/features/customers/Form.svelte", "route": "/customers/create", "intent": "分组录入并校验客户信息", "tags": ["表单", "创建", "编辑", "create", "edit", "validation"], "components": ["AutoForm", "ContentPageShell"] },
+    { "id": "dashboard", "source": "src/features/customers/Dashboard.svelte", "route": "/", "intent": "查看业务总量并处理下一项工作", "tags": ["概览", "工作台", "指标", "overview", "metrics"], "components": ["DashboardPage", "MetricBlock", "PageSection", "AutoTable"] },
+    { "id": "settings", "source": "src/features/customers/Settings.svelte", "route": "/workspace_settings", "intent": "调整会话内品牌和应用级设计预设", "tags": ["设置", "品牌", "主题", "brand", "theme"], "components": ["SettingsGroup", "SettingsFieldRow", "Input"] },
+    { "id": "approval", "source": "src/features/customers/Review.svelte", "route": "/approvals/show/a1", "intent": "审阅申请、记录决定与意见", "tags": ["审批", "审核", "review", "decision"], "components": ["ShowPage", "AutoForm", "PageSection"] }
+  ],
+  "states": ["normal", "empty", "error", "loading", "denied", "partial", "readonly"],
+  "acceptance": {
+    "commands": ["bun run check", "bun run build", "bun run test:ui"],
+    "viewports": [{"width": 1440, "height": 900}, {"width": 390, "height": 844}],
+    "screenshots": "test-results",
+    "maxRepairRounds": 2,
+    "humanReview": ["视觉层级与品牌契合度", "真实业务字段与审批权限", "接入生产前的数据边界"]
+  },
+  "componentApi": {
+    "package": "@svadmin/ui",
+    "metadata": "@svadmin/ui/component-registry",
+    "rule": "Read the installed version's declarations for components absent from the registry; never invent props."
+  },
+  "boundaries": [
+    "No model credentials or production writes",
+    "No generic application generation through Surface",
+    "No claims of server authorization or durable data",
+    "Do not replace existing business workflows during visual edits"
+  ]
+}

package/blueprints/customer-workspace/tests/workspace.spec.ts

@@ -0,0 +1,150 @@
+import { test, expect, type Page } from '@playwright/test';
+import catalog from '../svadmin.vibe.json' with { type: 'json' };
+
+function visibleText(page: Page, text: string | RegExp) {
+  return page.getByText(text, { exact: typeof text === 'string' }).filter({ visible: true });
+}
+
+test.beforeEach(async ({ page }) => {
+  // 隔离外部字体服务，页面验收仅依赖本地应用和系统备用字体。
+  await page.route('https://fonts.bunny.net/**', route => route.abort());
+});
+
+test('keyboard skip link does not cover navigation', async ({ page, isMobile }) => {
+  await page.goto('/#/customers');
+  const skip = page.locator('[data-svadmin-skip-link]');
+  await expect(skip).toBeAttached();
+  await expect.poll(() => skip.evaluate(el => el.getBoundingClientRect().bottom)).toBeLessThanOrEqual(0);
+  await skip.focus();
+  await expect.poll(() => skip.evaluate(el => el.getBoundingClientRect().top)).toBeGreaterThanOrEqual(0);
+  await page.keyboard.press('Enter');
+  await expect(page.locator('main')).toBeFocused();
+  if (isMobile) {
+    await page.getByRole('button', { name: '菜单', exact: true }).click();
+    await expect(page.locator('a[href="#/customers"]').filter({ visible: true })).toBeVisible();
+  }
+});
+
+for (const entry of catalog.pages) {
+  test(`${entry.id} renders without page overflow`, async ({ page }, testInfo) => {
+    const errors: string[] = [];
+    page.on('pageerror', error => errors.push(error.message));
+    await page.goto(`/#${entry.route}`);
+    await expect(page.locator('main')).toBeVisible();
+    await expect(page.locator('main')).not.toBeEmpty();
+    const pageId = {
+      list: 'customer-list', detail: 'customer-detail', form: 'customer-form',
+      dashboard: 'dashboard', settings: 'workspace_settings', approval: 'approval-review',
+    }[entry.id];
+    await expect(page.locator(`[data-svadmin-content-page="${pageId}"]`)).toBeVisible();
+    if (entry.id === 'detail') await expect(page.getByText('发送实施方案，等待客户确认。')).toBeVisible();
+    if (entry.id === 'approval') await expect(page.getByRole('heading', { name: '审批决定' })).toBeVisible();
+    if (entry.id === 'list') await expect(visibleText(page, '澄川科技')).toBeVisible();
+    await expect(page.locator('[aria-busy="true"]')).toHaveCount(0);
+    expect(await page.evaluate(() => document.documentElement.scrollWidth <= innerWidth + 1)).toBe(true);
+    await page.screenshot({ path: testInfo.outputPath(`${entry.id}.png`), fullPage: true, animations: 'disabled' });
+    expect(errors).toEqual([]);
+  });
+}
+
+test('customer creation, detail, edit, and validation', async ({ page }) => {
+  await page.goto('/#/customers/create');
+  await page.getByRole('button', { name: '保存', exact: true }).click();
+  await expect(page.locator('[aria-invalid="true"]').first()).toBeVisible();
+  await page.getByLabel('客户名称', { exact: false }).fill('验收客户');
+  await page.getByLabel('联系人', { exact: false }).fill('林悦');
+  await page.getByLabel('邮箱', { exact: false }).fill('acceptance@example.test');
+  await page.getByLabel('负责人', { exact: false }).fill('陈晨');
+  await page.getByRole('button', { name: '保存', exact: true }).click();
+  await expect(page).toHaveURL(/#\/customers(?:\?|$)/);
+  await expect(visibleText(page, '验收客户')).toBeVisible();
+  await page.evaluate(() => { location.hash = '/customers/show/c1'; });
+  await expect(page.getByText('发送实施方案，等待客户确认。')).toBeVisible();
+  await page.evaluate(() => { location.hash = '/customers/edit/c1'; });
+  await page.getByLabel('客户名称', { exact: false }).fill('澄川科技更新');
+  await page.getByRole('button', { name: '保存', exact: true }).click();
+  await expect(visibleText(page, '澄川科技更新')).toBeVisible();
+});
+
+test('global design preset changes without losing customer data', async ({ page }) => {
+  await page.goto('/#/workspace_settings');
+  await page.getByRole('combobox', { name: '设计预设', exact: true }).selectOption('operations');
+  await page.evaluate(() => { location.hash = '/customers'; });
+  await expect(page.locator('[data-svadmin-content-page="customer-list"]')).toHaveAttribute('data-density', 'compact');
+  await expect(visibleText(page, '澄川科技')).toBeVisible();
+  await page.evaluate(() => { location.hash = '/workspace_settings'; });
+  await page.getByRole('combobox', { name: '设计预设', exact: true }).selectOption('collaboration');
+  await page.evaluate(() => { location.hash = '/customers/create'; });
+  await expect(page.locator('[data-svadmin-content-page="customer-form"]')).toHaveAttribute('data-svadmin-content-page-width', 'default');
+});
+
+for (const preset of catalog.presets) {
+  test(`design preset: ${preset}`, async ({ page }, testInfo) => {
+    await page.goto('/#/workspace_settings');
+    await page.getByRole('combobox', { name: '设计预设', exact: true }).selectOption(preset);
+    await page.evaluate(() => { location.hash = '/customers'; });
+    await expect(visibleText(page, '澄川科技')).toBeVisible();
+    await expect(page.locator('[data-svadmin-content-page="customer-list"]')).toHaveAttribute('data-density', preset === 'operations' ? 'compact' : 'comfortable');
+    await page.screenshot({ path: testInfo.outputPath(`${preset}.png`), fullPage: true, animations: 'disabled' });
+  });
+}
+
+test('approval decision and followup editing persist in the session', async ({ page }) => {
+  await page.goto('/#/approvals/show/a1');
+  await page.getByRole('combobox', { name: '审批结果', exact: false }).selectOption({ label: '已通过' });
+  await page.getByLabel('审批意见', { exact: false }).fill('已核实交付范围，可以通过。');
+  await page.getByRole('button', { name: '保存', exact: true }).click();
+  await expect(page).toHaveURL(/#\/approvals(?:\?|$)/);
+  await page.evaluate(() => { location.hash = '/approvals/show/a1'; });
+  await expect(page.getByLabel('审批意见', { exact: false })).toHaveValue('已核实交付范围，可以通过。');
+  await expect(page.getByRole('combobox', { name: '审批结果', exact: false }).locator('option:checked')).toHaveText('已通过');
+  await page.evaluate(() => { location.hash = '/followups/edit/f1'; });
+  await page.getByLabel('跟进内容', { exact: false }).fill('确认合同与实施时间。');
+  await page.getByRole('button', { name: '保存', exact: true }).click();
+  await expect(visibleText(page, '确认合同与实施时间。')).toBeVisible();
+  await page.evaluate(() => { location.hash = '/followups/create'; });
+  await page.locator('button#customerId').click();
+  await page.getByRole('option', { name: '远山设计事务所', exact: true }).click();
+  await page.getByLabel('跟进内容', { exact: false }).fill('完成首次需求访谈。');
+  await page.getByLabel('负责人', { exact: false }).fill('李沐');
+  await page.getByLabel('跟进日期', { exact: false }).fill('2026-09-24');
+  await page.getByRole('button', { name: '保存', exact: true }).click();
+  await expect(visibleText(page, '完成首次需求访谈。')).toBeVisible();
+});
+
+test('read-only access allows detail but refuses edits', async ({ page }) => {
+  await page.goto('/?scenario=readonly#/customers/show/c1');
+  await expect(page.getByText('澄川科技', { exact: true })).toBeVisible();
+  await page.evaluate(() => { location.hash = '/customers/edit/c1'; });
+  await expect(page.getByText(/无权|权限|拒绝/).first()).toBeVisible();
+  await expect(page.getByRole('button', { name: '保存', exact: true })).toHaveCount(0);
+});
+
+for (const scenario of ['empty', 'error', 'denied', 'loading', 'partial']) {
+  test(`provider state: ${scenario}`, async ({ page }, testInfo) => {
+    if (scenario === 'loading') {
+      // 在导航前暂停演示延迟，避免慢速加载错过骨架屏。
+      await page.clock.install({ time: new Date('2026-09-25T00:00:00Z') });
+      await page.clock.pauseAt(new Date('2026-09-25T00:01:00Z'));
+    }
+    await page.goto(`/?scenario=${scenario}#${scenario === 'partial' ? '/' : '/customers'}`);
+    if (scenario === 'loading') {
+      await expect(page.locator('[data-slot="skeleton"]').filter({ visible: true }).first()).toBeVisible();
+    } else if (scenario === 'partial') {
+      await expect(page.getByText('部分数据暂不可用')).toBeVisible();
+    } else if (scenario === 'denied') {
+      await expect(page.getByText(/无权|权限|拒绝/).first()).toBeVisible();
+      await expect(page.getByText('澄川科技', { exact: true })).toHaveCount(0);
+    } else if (scenario === 'empty') {
+      await expect(page.getByRole('heading', { name: '暂无数据', exact: true })).toBeVisible();
+    } else {
+      await expect(page.getByText(/失败|不可用|错误/).first()).toBeVisible();
+    }
+    await page.screenshot({ path: testInfo.outputPath(`${scenario}.png`), fullPage: true, animations: 'disabled' });
+    if (scenario === 'loading') {
+      await page.clock.runFor(2500);
+      await expect(visibleText(page, '澄川科技')).toBeVisible();
+      await expect(page.locator('[data-slot="skeleton"]').filter({ visible: true })).toHaveCount(0);
+    }
+  });
+}

package/blueprints/customer-workspace/vibe-skill.md

@@ -0,0 +1,58 @@
+---
+name: svadmin-vibe
+description: Build and refine Svelte admin pages from the installed svadmin page catalog, shared design presets, and resource contracts. Use for customer-workspace UI changes and visual acceptance, not production deployment.
+---
+
+# svadmin Vibe
+
+Read `DESIGN.md`, `svadmin.vibe.json`, and `svadmin.ai.json`. Select the smallest
+matching page family from `pages`; inspect its source and the relevant resource
+contract before editing. The catalog is a starting point, not permission to
+replace the customer's workflow with this demo's business model.
+Inspect the selected page's `previews/{pageId}-desktop.png` and mobile capture
+when deciding layout. These shipped references are not current test evidence.
+For shipped references, `create-svadmin vibe catalog --query "<keywords>"`
+matches IDs, component names and Chinese/English tags (all words must match).
+`create-svadmin vibe inspect <pageId>` returns read-only reference context.
+Read `ARCHITECTURE.md`; cross-feature imports use public `index.ts` or headless
+`data.ts`. Do not confuse shipped reference source with the customer's edits.
+When the read-only svadmin MCP tools are available, use `svadmin_vibe_search`,
+then `svadmin_vibe_inspect` and `svadmin_vibe_preview` for desktop and mobile.
+Pass an empty object to search all pages. These tools read shipped references
+only; inspect the current customer's sources separately before making changes.
+The CLI commands remain the fallback when no MCP client is configured.
+
+## Implement
+
+- Read installed `@svadmin/ui/component-registry` metadata and component type
+  declarations. Match the versions in package.json; do not invent props or copy
+  internal/example-only imports.
+- Translate "compact", "standard", or "lightweight" requests into the existing
+  application-wide presets in `src/design.svelte.ts`. Keep layout, form columns,
+  table density, and detail layout consistent. Change `src/design-selection.ts`
+  for the initial preset. Do not silently reset a user's saved preferences.
+- Preserve resource contracts, providers, permissions, routes, and active form
+  values when making visual-only changes. Keep metric values provider-backed.
+- Modify the chosen feature source, not a new parallel implementation. Use
+  semantic tokens and public component composition. No decorative nested cards.
+- Demo data and simulated errors are under `src/demo/` and development-only
+  scenario selection. Do not copy demo permission grants into a real backend.
+  Business authorization, approval rules, audit, and persistence belong on the
+  server, not in model output.
+
+## Verify
+
+Run `bun run check`, `bun run build`, and `bun run test:ui`. Inspect the captured
+desktop/mobile screenshots, not only test exit codes. Tests cover six page
+families, CRUD navigation, form validation, provider states, and preset changes.
+Extend focused tests when adding business behavior.
+
+Use at most two targeted visual repair rounds. Report failures and evidence
+paths after that; never claim screenshots or deterministic checks prove taste.
+Ask for human judgement when brand direction is ambiguous. Do not change
+business logic to make a visual check pass, update screenshot baselines blindly,
+or contact production services for preview data.
+
+Deliver changed files, check results, screenshot paths, and remaining
+human/backend acceptance. Publication, deployment, and model-provider accounts
+are separate authorization boundaries.