@givolt/i3-composer-agent 2.3.1 → 2.3.3

package/skills/i3-ui-prototype/assets/frameworks/vue-antdv-next/legacy-starter/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "admin-list-antdv-prototype",
+  "version": "1.0.0",
+  "private": true,
+  "type": "module",
+  "packageManager": "npm@11.12.1",
+  "engines": { "node": ">=22.18.0", "npm": ">=10" },
+  "scripts": {
+    "dev": "vite --host 127.0.0.1",
+    "typecheck": "vue-tsc --noEmit",
+    "test": "node --experimental-strip-types --test tests/*.test.ts",
+    "build": "vue-tsc --noEmit && vite build",
+    "preview": "vite preview --host 127.0.0.1"
+  },
+  "dependencies": { "antdv-next": "1.5.3", "vue": "3.5.42" },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "6.0.4",
+    "typescript": "5.9.3",
+    "vite": "7.3.1",
+    "vue-tsc": "3.3.13"
+  }
+}

package/skills/i3-ui-prototype/assets/frameworks/vue-antdv-next/legacy-starter/public/prototype-config.json

@@ -0,0 +1,6 @@
+{
+  "instanceId": "admin-list-preview",
+  "storageNamespace": "prototype:admin-list-preview",
+  "mockVersion": "devices-v1",
+  "title": "设备管理"
+}

package/skills/i3-ui-prototype/assets/frameworks/vue-antdv-next/legacy-starter/src/App.vue

@@ -0,0 +1,136 @@
+<script setup lang="ts">
+import { computed, h, onBeforeUnmount, ref, watch } from 'vue'
+import { Alert, Button, ConfigProvider, Empty, Input, Select, Space, Table, Tag, theme as antdTheme } from 'antdv-next'
+import zhCN from 'antdv-next/locale/zh_CN'
+import type { PrototypeConfig } from './config'
+import type { PaginationProps } from 'antdv-next'
+import { resolveContent } from './content'
+import type { Device } from './domain/devices'
+import DeviceEditor from './components/DeviceEditor.vue'
+import { useDevices } from './useDevices'
+import { THEME_IDS, THEME_PRESETS, resolveThemeConfig, safeThemeStorage, themeStorageKey, loadThemePreference, saveThemePreference } from './domain/theme'
+import type { ThemeId } from './domain/theme'
+
+const props = defineProps<{ config: PrototypeConfig }>()
+const content = resolveContent(props.config)
+const themeBinding = resolveThemeConfig(props.config.theme)
+const preferenceStorage = themeBinding ? safeThemeStorage(() => window.localStorage) : null
+const preferenceKey = themeStorageKey(props.config.storageNamespace)
+const themeId = ref<ThemeId>(themeBinding ? loadThemePreference(preferenceStorage, preferenceKey) : 'light')
+const themeWarning = ref('')
+const themeOptions = THEME_IDS.map(value => ({ value, label: THEME_PRESETS[value].label }))
+function chooseTheme(value: unknown) {
+  if (!themeBinding || typeof value !== 'string' || !THEME_IDS.includes(value as ThemeId)) return
+  themeId.value = value as ThemeId
+  themeWarning.value = saveThemePreference(preferenceStorage, preferenceKey, themeId.value) ? '' : '无法保存主题偏好，本页仍可切换。'
+}
+const documentRoot = document.documentElement
+const oldTheme = documentRoot.getAttribute('data-prototype-theme')
+const oldScheme = documentRoot.style.colorScheme
+const previousVariables = new Map<string,string>()
+watch(themeId, value => {
+  if (!themeBinding) return
+  const preset=THEME_PRESETS[value]
+  documentRoot.dataset.prototypeTheme=value
+  documentRoot.style.colorScheme=preset.mode
+  for (const name of ['primary','bg','surface','subtle','text','muted','border','accent','onPrimary'] as const) {
+    const property=`--proto-${name === 'onPrimary' ? 'on-primary' : name}`
+    if (!previousVariables.has(property)) previousVariables.set(property,documentRoot.style.getPropertyValue(property))
+    documentRoot.style.setProperty(property,preset[name])
+  }
+}, { immediate: true })
+onBeforeUnmount(() => {
+  if (!themeBinding) return
+  if (oldTheme === null) documentRoot.removeAttribute('data-prototype-theme'); else documentRoot.setAttribute('data-prototype-theme',oldTheme)
+  documentRoot.style.colorScheme=oldScheme
+  for (const [property,value] of previousVariables) { if (value) documentRoot.style.setProperty(property,value); else documentRoot.style.removeProperty(property) }
+})
+const { devices, nameInput, statusInput, page, selected, mode, notice, storageWarning, filtered, activeCount, query, changePage, bulkDisable, save, setMode, resetData } = useDevices(props.config)
+const editing = ref<Device | null>(null)
+const editorOpen = ref(false)
+const lifecycle = ref('closed')
+let opener: HTMLElement | null = null
+const media = window.matchMedia('(prefers-reduced-motion: reduce)')
+const reducedMotion = ref(media.matches)
+const updateMotion = (event: MediaQueryListEvent) => { reducedMotion.value = event.matches }
+media.addEventListener('change', updateMotion)
+onBeforeUnmount(() => media.removeEventListener('change', updateMotion))
+const theme = computed(() => {
+  const base={ colorPrimary: '#176b56', borderRadius: 6, fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif', motion: !reducedMotion.value }
+  if (!themeBinding) return { token: base }
+  const preset=THEME_PRESETS[themeId.value]
+  return { algorithm: preset.mode === 'dark' ? antdTheme.darkAlgorithm : antdTheme.defaultAlgorithm, token: { ...base, colorPrimary:preset.primary,colorBgBase:preset.bg,colorBgLayout:preset.bg,colorBgContainer:preset.surface,colorBgElevated:preset.surface,colorText:preset.text,colorTextSecondary:preset.muted,colorTextTertiary:preset.muted,colorTextQuaternary:preset.muted,colorTextDescription:preset.muted,colorTextPlaceholder:preset.muted,colorBorder:preset.border,colorBorderSecondary:preset.border,colorFillAlter:preset.subtle,controlItemBgActive:preset.subtle,controlItemBgActiveHover:preset.subtle,controlItemBgHover:preset.subtle,colorErrorText:preset.error,colorErrorTextHover:preset.error,colorErrorTextActive:preset.error,colorTextLightSolid:preset.onPrimary }, components:{Button:{colorLink:preset.accent,colorLinkHover:preset.accent,colorLinkActive:preset.accent},Tag:{colorSuccess:preset.success,colorSuccessBg:preset.subtle,colorSuccessBorder:preset.border},Form:{colorError:preset.error},Table:{headerBg:preset.subtle,rowHoverBg:preset.subtle},Select:{optionSelectedBg:preset.subtle,optionActiveBg:preset.subtle}} }
+})
+const columns = [
+  { title: content.fields.code.label, dataIndex: 'code', key: 'code', width: 140 },
+  { title: content.fields.name.label, dataIndex: 'name', key: 'name', ellipsis: true },
+  { title: content.fields.category.label, dataIndex: 'category', key: 'category', width: 150 },
+  { title: content.fields.status.label, dataIndex: 'status', key: 'status', width: 120 },
+  { title: '操作', key: 'action', width: 100 },
+]
+const rowSelection = computed(() => ({ selectedRowKeys: selected.value, onChange: (keys: (string | number)[]) => { selected.value = keys.map(String) }, preserveSelectedRowKeys: false }))
+const renderPaginationItem: PaginationProps['itemRender'] = (_page, type, element) => type === 'page' ? h('span', { 'aria-hidden': 'true' }, String(_page)) : type === 'prev' || type === 'next' ? h('button', { type: 'button', tabIndex: -1, class: 'ant-pagination-item-link' }, type === 'prev' ? content.actions.previousPage : content.actions.nextPage) : element
+const pagination = computed(() => ({ current: page.value, pageSize: 10, total: filtered.value.length, showSizeChanger: false, showTotal: (total: number) => `共 ${total} 条`, itemRender: renderPaginationItem }))
+const statuses = [{ value: 'all', label: '全部状态' }, { value: 'active', label: '运行中' }, { value: 'inactive', label: '已停用' }]
+
+function edit(device: Device, event: MouseEvent) {
+  opener = event.currentTarget as HTMLElement
+  editing.value = { ...device }
+  lifecycle.value = 'opening'
+  editorOpen.value = true
+}
+function closeEditor() {
+  lifecycle.value = 'closing'
+  editorOpen.value = false
+}
+function editorClosed() {
+  lifecycle.value = 'closed'
+  editing.value = null
+  if (opener?.isConnected) opener.focus()
+  else document.querySelector<HTMLButtonElement>('[data-testid="query"]')?.focus()
+}
+function saved(device: Device) { save(device); closeEditor() }
+</script>
+
+<template>
+  <ConfigProvider :locale="zhCN" :theme="theme">
+    <div class="app-shell" :data-editor-lifecycle="lifecycle" :data-reduced-motion="reducedMotion">
+      <header class="app-header">
+        <a class="brand" href="./" aria-label="设备管理首页"><span class="brand-mark" aria-hidden="true">E</span><span>设备工作台</span></a>
+        <div class="header-actions"><span class="preview-label">交互原型 · 本地演示</span><div v-if="themeBinding" class="theme-control"><label for="theme-picker-main-input">主题</label><Select id="theme-picker-main-input" :value="themeId" :options="themeOptions" data-testid="theme-picker-main" @change="chooseTheme" /></div></div>
+      </header>
+      <main>
+        <Alert v-if="themeWarning" type="warning" :title="themeWarning" role="status" data-testid="theme-storage-warning" />
+        <div class="page-heading">
+          <div><p class="eyebrow">设备运营 / 基础信息</p><h1>{{ content.pageTitle }}</h1><p class="page-description">{{ content.description }}</p></div>
+          <div class="summary" aria-label="设备概览"><strong>{{ devices.length }}</strong><span>台设备</span><span class="summary-divider"></span><strong>{{ activeCount }}</strong><span>运行中</span></div>
+        </div>
+
+        <section class="list-panel" aria-label="设备清单" data-page-id="devices" data-region-id="device-list">
+          <form class="filter-row" @submit.prevent="query()" aria-label="筛选设备">
+            <div class="filter-field"><label for="name-filter">{{ content.fields.queryName.label }}</label><Input id="name-filter" v-model:value="nameInput" allow-clear :placeholder="content.fields.queryName.placeholder" data-testid="name-filter" /></div>
+            <div class="filter-field status-filter"><label for="status-filter-input">{{ content.fields.queryStatus.label }}</label><Select id="status-filter-input" v-model:value="statusInput" :options="statuses" data-testid="status-filter" /></div>
+            <Space class="filter-actions"><Button type="primary" html-type="submit" data-testid="query">{{ content.actions.query }}</Button><Button @click="query(true)" data-testid="reset-filter">{{ content.actions.resetQuery }}</Button></Space>
+          </form>
+          <div class="list-toolbar">
+            <div><h2>{{ content.listTitle }}</h2><p class="selection-count" role="status" aria-live="polite" aria-atomic="true" data-testid="selection-count">已选择 {{ selected.length }} 项 <span>· 翻页或筛选后清空选择</span></p></div>
+            <Button :disabled="!selected.length || mode !== 'normal'" @click="bulkDisable" data-testid="bulk-disable">{{ content.actions.bulkDisable }}</Button>
+          </div>
+          <Alert v-if="notice" type="success" :title="notice" show-icon role="status" data-testid="success-notice" class="list-notice" />
+          <Alert v-if="storageWarning" type="warning" :title="storageWarning" show-icon class="list-notice" />
+          <div v-if="mode === 'error'" class="error-state" role="alert" data-testid="list-error"><h3>设备列表加载失败</h3><p>这是可恢复的演示错误，设备数据未被修改。</p><Button @click="setMode('normal')" data-testid="retry-list">重新加载</Button></div>
+          <Table v-else :columns="columns" :data-source="filtered" row-key="id" :pagination="pagination" :row-selection="rowSelection" :loading="mode === 'loading'" :scroll="{ x: 740 }" @change="changePage" data-testid="device-table">
+            <template #bodyCell="{ column, record }">
+              <template v-if="column.key === 'status'"><Tag :color="record.status === 'active' ? (themeBinding ? 'success' : 'green') : 'default'">{{ record.status === 'active' ? '运行中' : '已停用' }}</Tag></template>
+              <template v-else-if="column.key === 'action'"><Button type="link" size="small" :aria-label="`${content.actions.edit} ${record.code}`" :data-testid="`edit-${record.id}`" @click="edit(record, $event)">{{ content.actions.edit }}</Button></template>
+            </template>
+            <template #emptyText><Empty description="暂无符合条件的设备"><Button @click="query(true)" data-testid="clear-empty">清除筛选</Button></Empty></template>
+          </Table>
+        </section>
+
+        <details class="demo-tools"><summary>演示状态与数据</summary><p>演示工具仅影响当前原型实例。恢复初始数据会清除本实例的修改。</p><Space wrap><Button @click="setMode('loading')" data-testid="show-loading">加载中</Button><Button @click="setMode('empty')" data-testid="show-empty">空列表</Button><Button @click="setMode('error')" data-testid="show-error">加载失败</Button><Button @click="setMode('normal')" data-testid="restore-list">恢复列表</Button><Button @click="resetData" data-testid="reset-data">恢复初始数据</Button></Space></details>
+      </main>
+      <DeviceEditor :open="editorOpen" :device="editing" :content="content" :theme-value="themeBinding ? themeId : undefined" :theme-options="themeOptions" @theme="chooseTheme" @close="closeEditor" @closed="editorClosed" @opened="lifecycle = 'open'" @saved="saved" />
+    </div>
+  </ConfigProvider>
+</template>

package/skills/i3-ui-prototype/assets/frameworks/vue-antdv-next/legacy-starter/src/components/DeviceEditor.vue

@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import { nextTick, reactive, ref, watch } from 'vue'
+import { Alert, Button, Drawer, Form, FormItem, Input, Select, Space, Switch } from 'antdv-next'
+import type { FormInstance } from 'antdv-next'
+import type { Device, DeviceStatus } from '../domain/devices'
+import type { PrototypeContent } from '../content'
+import type { ThemeId } from '../domain/theme'
+
+const props = defineProps<{ open: boolean; device: Device | null; content: PrototypeContent; themeValue?: ThemeId; themeOptions?: {value:ThemeId;label:string}[] }>()
+const emit = defineEmits<{ close: []; closed: []; saved: [device: Device]; opened: []; theme: [value:ThemeId] }>()
+function chooseTheme(value: unknown) { if (typeof value === 'string' && props.themeOptions?.some(option => option.value === value)) emit('theme',value as ThemeId) }
+const form = ref<FormInstance>()
+const values = reactive({ name: '', category: '', status: 'active' as DeviceStatus })
+const saving = ref(false)
+const failNext = ref(false)
+const error = ref('')
+const rules = { name: [{ required: true, whitespace: true, message: `请输入${props.content.fields.editName.label}` }], category: [{ required: true, message: `请选择${props.content.fields.editCategory.label}` }] }
+const categories = ['温度传感器', '控制器', '压力传感器'].map(value => ({ value, label: value }))
+const statuses = [{ value: 'active', label: '运行中' }, { value: 'inactive', label: '已停用' }]
+
+watch(() => props.device, device => {
+  if (!device) return
+  Object.assign(values, { name: device.name, category: device.category, status: device.status })
+  error.value = ''
+  saving.value = false
+  failNext.value = false
+  nextTick(() => form.value?.clearValidate())
+})
+
+async function submit() {
+  if (saving.value || !props.device) return
+  try { await form.value?.validateFields() } catch {
+    await nextTick()
+    document.querySelector<HTMLInputElement>('.prototype-device-editor input[aria-invalid="true"]')?.focus()
+    return
+  }
+  saving.value = true
+  error.value = ''
+  await new Promise(resolve => setTimeout(resolve, 450))
+  if (failNext.value) {
+    failNext.value = false
+    saving.value = false
+    error.value = '保存失败，已保留输入。请重试。'
+    return
+  }
+  emit('saved', { ...props.device, ...values, name: values.name.trim() })
+  saving.value = false
+}
+
+async function afterOpenChange(open: boolean) {
+  if (open) {
+    await nextTick()
+    document.querySelector<HTMLInputElement>('.prototype-device-editor input[data-testid="edit-name"]')?.focus()
+    emit('opened')
+  } else emit('closed')
+}
+function close() { if (!saving.value) emit('close') }
+function keepFocus(event: KeyboardEvent) {
+  if (event.key !== 'Tab') return
+  const dialog = document.querySelector('.prototype-device-editor [role="dialog"]')
+  const controls = [...(dialog?.querySelectorAll<HTMLElement>('button:not(:disabled), input:not(:disabled), select:not(:disabled), textarea:not(:disabled), [tabindex]:not([tabindex="-1"])') ?? [])].filter(element => element.offsetParent !== null && element.tabIndex >= 0)
+  const first = controls[0], last = controls.at(-1)
+  if (!first || !last) return
+  if (event.shiftKey && document.activeElement === first) { event.preventDefault(); last.focus() }
+  else if (!event.shiftKey && document.activeElement === last) { event.preventDefault(); first.focus() }
+}
+</script>
+
+<template>
+  <Drawer
+    :open="open"
+    :title="`${content.editorTitle} · ${content.fields.editCode.label} ${device?.code ?? ''}`"
+    placement="right"
+    :size="520"
+    :mask="{ enabled: true, blur: true, closable: !saving }"
+    :destroy-on-hidden="true"
+    :closable="{ disabled: saving }"
+    root-class="prototype-device-editor"
+    :after-open-change="afterOpenChange"
+    @close="close"
+    @keydown="keepFocus"
+  >
+    <div data-testid="editor-content">
+      <div v-if="themeValue" class="theme-control editor-theme-control"><label for="theme-picker-editor-input">主题</label><Select id="theme-picker-editor-input" :value="themeValue" :options="themeOptions" data-testid="theme-picker-editor" @change="chooseTheme" /></div>
+      <p class="editor-intro">更新设备基础信息。保存后，列表会同步最新状态。</p>
+      <Alert v-if="error" type="error" show-icon :title="error" role="alert" data-testid="save-error" class="editor-error" />
+      <Form ref="form" name="device-editor" :model="values" :rules="rules" layout="vertical" @finish="submit">
+        <FormItem :label="content.fields.editName.label" name="name">
+          <Input v-model:value="values.name" data-testid="edit-name" :maxlength="60" :disabled="saving" :placeholder="content.fields.editName.placeholder ?? `请输入${content.fields.editName.label}`" />
+        </FormItem>
+        <FormItem :label="content.fields.editCategory.label" name="category">
+          <Select v-model:value="values.category" :options="categories" :disabled="saving" data-testid="edit-category" />
+        </FormItem>
+        <FormItem :label="content.fields.editStatus.label" name="status">
+          <Select v-model:value="values.status" :options="statuses" :disabled="saving" data-testid="edit-status" />
+        </FormItem>
+      </Form>
+      <div class="failure-control">
+        <Switch v-model:checked="failNext" :disabled="saving" aria-label="下次保存模拟失败" data-testid="fail-next-save" />
+        <span>下次保存模拟失败</span>
+      </div>
+      <p class="help-text">仅用于演示失败后保留输入和重试。</p>
+    </div>
+    <template #footer>
+      <Space class="editor-footer">
+        <Button :disabled="saving" @click="close" data-testid="cancel-edit">{{ content.actions.cancel }}</Button>
+        <Button type="primary" :loading="saving" @click="submit" data-testid="save-device">{{ content.actions.save }}</Button>
+      </Space>
+    </template>
+  </Drawer>
+</template>

package/skills/i3-ui-prototype/assets/frameworks/vue-antdv-next/legacy-starter/src/config.ts

@@ -0,0 +1,19 @@
+import type { PrototypeContent } from './content'
+import { resolveThemeConfig } from './domain/theme'
+import type { ThemeBinding } from './domain/theme'
+export interface PrototypeConfig { instanceId: string; storageNamespace: string; mockVersion: string; title?: string; content?: PrototypeContent; theme?: ThemeBinding }
+export interface PrototypeMeta extends PrototypeConfig { candidateId: string }
+declare global { interface Window { __PROTOTYPE_META__: PrototypeMeta } }
+
+export async function loadConfig(): Promise<PrototypeConfig> {
+  const response = await fetch(`${import.meta.env.BASE_URL}prototype-config.json`, { cache: 'no-store' })
+  if (!response.ok) throw new Error('无法读取原型配置，请检查当前预览构建。')
+  const config: unknown = await response.json()
+  if (!config || typeof config !== 'object') throw new Error('原型配置无效。')
+  const value = config as Record<string, unknown>
+  for (const key of ['instanceId', 'storageNamespace', 'mockVersion']) {
+    if (typeof value[key] !== 'string' || !(value[key] as string).trim()) throw new Error(`原型配置缺少 ${key}。`)
+  }
+  resolveThemeConfig(value.theme)
+  return value as unknown as PrototypeConfig
+}

package/skills/i3-ui-prototype/assets/frameworks/vue-antdv-next/legacy-starter/src/content.ts

@@ -0,0 +1,28 @@
+import type { PrototypeConfig } from './config'
+
+export interface PrototypeContent {
+  schemaVersion: 1
+  templateDigest: string
+  pageTitle: string
+  description: string
+  listTitle: string
+  editorTitle: string
+  fields: Record<'code' | 'name' | 'category' | 'status' | 'queryName' | 'queryStatus' | 'editCode' | 'editName' | 'editCategory' | 'editStatus', { label: string; placeholder?: string; required?: boolean }>
+  actions: Record<'query' | 'resetQuery' | 'bulkDisable' | 'edit' | 'save' | 'cancel' | 'previousPage' | 'nextPage', string>
+}
+
+const defaults: PrototypeContent = {
+  schemaVersion: 1, templateDigest: 'legacy-starter-defaults', pageTitle: '设备管理', description: '查看设备信息、调整运行状态，并在当前页面完成编辑。', listTitle: '设备清单', editorTitle: '编辑设备',
+  fields: {
+    code: { label: '设备编号' }, name: { label: '设备名称' }, category: { label: '分类' }, status: { label: '状态' },
+    queryName: { label: '设备名称', placeholder: '搜索设备名称' }, queryStatus: { label: '运行状态' },
+    editCode: { label: '设备编号' }, editName: { label: '设备名称', required: true }, editCategory: { label: '设备分类' }, editStatus: { label: '运行状态' },
+  },
+  actions: { query: '查询', resetQuery: '重置', bulkDisable: '批量停用', edit: '编辑', save: '保存', cancel: '取消', previousPage: '上一页', nextPage: '下一页' },
+}
+
+export function resolveContent(config: PrototypeConfig): PrototypeContent {
+  // v2 instances created before projection retain their fixed original content.
+  // New templates are validated by the projector before instance creation.
+  return config.content ?? { ...defaults, pageTitle: config.title || defaults.pageTitle }
+}

package/skills/i3-ui-prototype/assets/frameworks/vue-antdv-next/legacy-starter/src/domain/devices.ts

@@ -0,0 +1,50 @@
+export type DeviceStatus = 'active' | 'inactive'
+export interface Device { id: string; code: string; name: string; category: string; status: DeviceStatus }
+interface StorageReader { getItem(key: string): string | null }
+interface StorageWriter { setItem(key: string, value: string): void }
+
+export function createSeed(): Device[] {
+  return Array.from({ length: 21 }, (_, index) => ({
+    id: `device-${index + 1}`,
+    code: `DEV-${String(index + 1).padStart(3, '0')}`,
+    name: `${index < 10 ? '北区' : index < 20 ? '南区' : '中心'}设备 ${String(index + 1).padStart(2, '0')}`,
+    category: ['温度传感器', '控制器', '压力传感器'][index % 3]!,
+    status: index % 4 === 3 ? 'inactive' : 'active',
+  }))
+}
+
+export function filterDevices(devices: Device[], name: string, status: DeviceStatus | 'all') {
+  const keyword = name.trim().toLocaleLowerCase()
+  return devices.filter(item => (!keyword || item.name.toLocaleLowerCase().includes(keyword)) && (status === 'all' || item.status === status))
+}
+
+export function updateDevices(devices: Device[], ids: string[], patch: Partial<Pick<Device, 'name' | 'category' | 'status'>>) {
+  const selected = new Set(ids)
+  return devices.map(item => selected.has(item.id) ? { ...item, ...patch } : item)
+}
+
+export function storageKey(namespace: string, version: string) {
+  if (!namespace.trim() || !version.trim()) throw new Error('storage namespace and mock version are required')
+  return `${namespace}:${version}:devices`
+}
+
+export function loadDevices(storage: StorageReader, key: string): Device[] {
+  try {
+    const raw = storage.getItem(key)
+    if (!raw) return createSeed()
+    const parsed: unknown = JSON.parse(raw)
+    if (!Array.isArray(parsed) || parsed.length !== 21 || !parsed.every(isDevice) || new Set(parsed.map(item => item.id)).size !== 21) return createSeed()
+    const expected = new Set(createSeed().map(item => item.id))
+    return parsed.every(item => expected.has(item.id)) ? parsed : createSeed()
+  } catch { return createSeed() }
+}
+
+function isDevice(item: unknown): item is Device {
+  if (!item || typeof item !== 'object') return false
+  const value = item as Record<string, unknown>
+  return ['id', 'code', 'name', 'category'].every(key => typeof value[key] === 'string') && (value.status === 'active' || value.status === 'inactive')
+}
+
+export function persistDevices(storage: StorageWriter, key: string, devices: Device[]) {
+  storage.setItem(key, JSON.stringify(devices))
+}

package/skills/i3-ui-prototype/assets/frameworks/vue-antdv-next/legacy-starter/src/domain/theme.ts

@@ -0,0 +1,25 @@
+export type ThemeId = 'light' | 'dark' | 'fresh' | 'tech'
+export interface ThemeBinding { defaultTheme: 'light'; presets: ThemeId[] }
+export interface ThemeStorage { getItem(key: string): string | null; setItem(key: string, value: string): void }
+export const THEME_IDS: ThemeId[] = ['light', 'dark', 'fresh', 'tech']
+export const THEME_PRESETS = {
+  light: { label: '明亮', mode: 'light', primary: '#155bc2', bg: '#f4f7fc', surface: '#ffffff', subtle: '#f8faff', text: '#172b45', muted: '#506174', border: '#b9c8da', accent: '#155bc2', onPrimary: '#ffffff', error: '#b4232c', success: '#166534' },
+  dark: { label: '暗黑', mode: 'dark', primary: '#8fb8ff', bg: '#15181d', surface: '#20242b', subtle: '#1b2028', text: '#edf1f7', muted: '#b2bece', border: '#667387', accent: '#a6c7ff', onPrimary: '#101c2c', error: '#ffb4ab', success: '#9bddad' },
+  fresh: { label: '清新', mode: 'light', primary: '#0c6a55', bg: '#edf8f4', surface: '#fbfffd', subtle: '#e6f4ed', text: '#173b31', muted: '#4c665c', border: '#a4c4b5', accent: '#0c6a55', onPrimary: '#ffffff', error: '#b4232c', success: '#166534' },
+  tech: { label: '科技', mode: 'dark', primary: '#55ddc6', bg: '#07131f', surface: '#102536', subtle: '#0b1c2b', text: '#e1f4f7', muted: '#a0bdca', border: '#5b8294', accent: '#55ddc6', onPrimary: '#071b20', error: '#ffb4ab', success: '#9bddad' },
+} as const
+export function resolveThemeConfig(value: unknown): ThemeBinding | null {
+  if (value === undefined) return null
+  const config=value as Partial<ThemeBinding> | null
+  if (!config || config.defaultTheme !== 'light' || !Array.isArray(config.presets) || config.presets.length !== 4 || new Set(config.presets).size !== 4 || !THEME_IDS.every(id => config.presets!.includes(id))) throw new Error('主题配置必须包含明亮、暗黑、清新、科技且默认明亮。')
+  return { defaultTheme: 'light', presets: [...THEME_IDS] }
+}
+export const themeStorageKey = (namespace: string) => `${namespace}:ui-theme:v1`
+export function safeThemeStorage(access: () => ThemeStorage): ThemeStorage | null { try { return access() } catch { return null } }
+export function loadThemePreference(storage: ThemeStorage | null, key: string): ThemeId {
+  try { const value=JSON.parse(storage?.getItem(key) ?? 'null'); if (value?.version===1 && THEME_IDS.includes(value.themeId)) return value.themeId } catch { /* Damaged or denied storage uses the explicit default. */ }
+  return 'light'
+}
+export function saveThemePreference(storage: ThemeStorage | null, key: string, themeId: ThemeId): boolean {
+  try { if (!storage) return false; storage.setItem(key,JSON.stringify({version:1,themeId})); return true } catch { return false }
+}

package/skills/i3-ui-prototype/assets/frameworks/vue-antdv-next/legacy-starter/src/main.ts

@@ -0,0 +1,18 @@
+import { createApp } from 'vue'
+import 'antdv-next/dist/reset.css'
+import App from './App.vue'
+import { loadConfig } from './config'
+import './style.css'
+
+loadConfig().then(config => {
+  window.__PROTOTYPE_META__ = { ...config, candidateId: import.meta.env.VITE_CANDIDATE_ID || 'unverified-development' }
+  createApp(App, { config }).mount('#app')
+}).catch(error => {
+  const container = document.querySelector('#app')!
+  const heading = document.createElement('h1')
+  heading.textContent = '原型无法启动'
+  const message = document.createElement('p')
+  message.textContent = error instanceof Error ? error.message : '配置读取失败。'
+  container.setAttribute('role', 'alert')
+  container.append(heading, message)
+})

package/skills/i3-ui-prototype/assets/frameworks/vue-antdv-next/legacy-starter/src/style.css

@@ -0,0 +1,50 @@
+:root { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; color: var(--proto-text, #1c2b29); background: var(--proto-bg, #f3f6f5); font-synthesis: none; text-rendering: optimizeLegibility; }
+* { box-sizing: border-box; }
+body { margin: 0; min-width: 320px; }
+button, input { font: inherit; }
+.app-header { height: 64px; background: var(--proto-surface, #fff); border-bottom: 1px solid var(--proto-border, #e1e8e5); display: flex; align-items: center; justify-content: space-between; padding: 0 40px; }
+.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--proto-text, #213c34); font-size: 16px; font-weight: 600; text-decoration: none; }
+.brand-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; background: var(--proto-primary, #176b56); color: var(--proto-on-primary, #fff); font-weight: 700; }
+.preview-label, .help-text { font-size: 12px; color: var(--proto-muted, #66776f); }
+main { max-width: 1360px; margin: auto; padding: 32px 40px 48px; }
+.page-heading { display: flex; justify-content: space-between; gap: 24px; align-items: flex-end; margin-bottom: 24px; }
+.eyebrow { color: var(--proto-muted, #63776e); font-size: 12px; margin: 0 0 8px; }
+h1 { font-size: 28px; line-height: 1.35; letter-spacing: -.5px; margin: 0; font-weight: 650; }
+.page-description { margin: 10px 0 0; color: var(--proto-muted, #63726c); font-size: 14px; }
+.summary { white-space: nowrap; display: flex; gap: 8px; align-items: baseline; color: var(--proto-muted, #63726c); font-size: 12px; padding-bottom: 4px; }
+.summary strong { color: var(--proto-accent, #264d3f); font-size: 24px; font-weight: 600; }
+.summary-divider { height: 16px; width: 1px; background: var(--proto-border, #d8e2dd); margin: 0 8px; }
+.list-panel { background: var(--proto-surface, #fff); border: 1px solid var(--proto-border, #dfe7e2); border-radius: 8px; overflow: hidden; }
+.filter-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; padding: 24px; border-bottom: 1px solid var(--proto-border, #edf0ee); background: var(--proto-subtle, #fdfefd); }
+.filter-field { display: flex; flex-direction: column; gap: 8px; width: 260px; }
+.filter-field label { font-size: 13px; color: var(--proto-muted, #46594f); }
+.status-filter { width: 170px; }
+.filter-actions { margin-left: auto; }
+.list-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; gap: 12px; }
+h2 { margin: 0; font-size: 16px; font-weight: 600; }
+.selection-count { margin: 6px 0 0; font-size: 12px; color: var(--proto-muted, #536c5e); }
+.selection-count span { color: var(--proto-muted, #718078); }
+.list-notice { margin: 0 24px 16px; }
+.ant-table-wrapper .ant-table-pagination { margin: 16px 24px; }
+.ant-pagination .ant-pagination-prev, .ant-pagination .ant-pagination-next { width: auto; min-width: 64px; padding: 0 8px; }
+.error-state { padding: 64px 24px; text-align: center; color: var(--proto-muted, #63726c); }
+.error-state h3 { color: var(--proto-text, #283f33); font-size: 16px; }
+.demo-tools { margin-top: 24px; color: var(--proto-muted, #66776f); font-size: 12px; }
+.demo-tools summary { display: list-item; width: fit-content; cursor: pointer; color: var(--proto-muted, #53675d); padding: 8px 0; }
+.demo-tools p { margin: 8px 0 12px; }
+.editor-intro { margin: 0 0 24px; color: var(--proto-muted, #68796e); font-size: 13px; line-height: 1.7; }
+.editor-error { margin-bottom: 20px; }
+.editor-footer { display: flex; justify-content: flex-end; }
+.failure-control { display: flex; gap: 8px; align-items: center; margin-top: 32px; font-size: 12px; color: var(--proto-muted, #68796e); }
+.help-text { margin-top: 8px; }
+:focus-visible { outline: 2px solid var(--proto-primary, #176b56); outline-offset: 3px; }
+@media (max-width: 767px) { .app-header { padding: 0 16px; } main { padding: 24px 16px; } .page-heading { align-items: flex-start; flex-direction: column; gap: 16px; } h1 { font-size: 24px; } .preview-label { font-size: 11px; } .filter-row { padding: 16px; gap: 12px; } .filter-field { width: 100%; } .filter-actions { margin-left: 0; } .list-toolbar { padding: 16px; align-items: flex-start; } .selection-count span { display: block; margin-top: 4px; } .list-notice { margin: 0 16px 16px; } .ant-table-wrapper .ant-table-pagination { margin: 16px; } }
+@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }
+
+.app-shell { min-height: 100vh; background: var(--proto-bg, #f3f6f5); color: var(--proto-text, #1c2b29); }
+.header-actions, .theme-control { display: flex; align-items: center; gap: 8px; }
+.header-actions { gap: 16px; }
+.theme-control label { color: var(--proto-muted, #66776f); font-size: 12px; white-space: nowrap; }
+.theme-control .ant-select { width: 104px; }
+.editor-theme-control { justify-content: flex-end; margin-bottom: 20px; }
+@media (max-width: 767px) { html[data-prototype-theme] .header-actions .preview-label { display: none; } }

package/skills/i3-ui-prototype/assets/frameworks/vue-antdv-next/legacy-starter/src/useDevices.ts

@@ -0,0 +1,66 @@
+import { computed, ref } from 'vue'
+import { createSeed, filterDevices, loadDevices, persistDevices, storageKey, updateDevices } from './domain/devices'
+import type { Device, DeviceStatus } from './domain/devices'
+import type { PrototypeConfig } from './config'
+
+export function useDevices(config: PrototypeConfig) {
+  const key = storageKey(config.storageNamespace, config.mockVersion)
+  const storage = (() => { try { return window.localStorage } catch { return { getItem: () => null, setItem: () => { throw new Error('Storage unavailable') } } } })()
+  const devices = ref(loadDevices(storage, key))
+  const nameInput = ref('')
+  const statusInput = ref<DeviceStatus | 'all'>('all')
+  const filters = ref({ name: '', status: 'all' as DeviceStatus | 'all' })
+  const page = ref(1)
+  const selected = ref<string[]>([])
+  const mode = ref<'normal' | 'loading' | 'empty' | 'error'>('normal')
+  const notice = ref('')
+  const storageWarning = ref('')
+  const filtered = computed(() => mode.value === 'empty' ? [] : filterDevices(devices.value, filters.value.name, filters.value.status))
+  const activeCount = computed(() => devices.value.filter(item => item.status === 'active').length)
+
+  function persist(next: Device[]) {
+    devices.value = next
+    try {
+      persistDevices(storage, key, next)
+      storageWarning.value = ''
+    } catch { storageWarning.value = '浏览器未允许本地存储，本次修改仍在当前页面保留。' }
+  }
+  function query(reset = false) {
+    if (reset) { nameInput.value = ''; statusInput.value = 'all' }
+    filters.value = { name: nameInput.value, status: statusInput.value }
+    page.value = 1
+    selected.value = []
+    mode.value = 'normal'
+    notice.value = ''
+  }
+  function changePage(pagination: { current?: number }) {
+    page.value = pagination.current ?? 1
+    selected.value = []
+  }
+  function bulkDisable() {
+    const ids = [...selected.value]
+    if (!ids.length) return
+    persist(updateDevices(devices.value, ids, { status: 'inactive' }))
+    selected.value = []
+    page.value = 1
+    notice.value = `已停用 ${ids.length} 台设备。`
+  }
+  function save(device: Device) {
+    persist(updateDevices(devices.value, [device.id], { name: device.name.trim(), category: device.category, status: device.status }))
+    selected.value = []
+    page.value = 1
+    notice.value = `设备 ${device.code} 已保存。`
+  }
+  function setMode(next: typeof mode.value) {
+    mode.value = next
+    page.value = 1
+    selected.value = []
+    notice.value = ''
+  }
+  function resetData() {
+    persist(createSeed())
+    query(true)
+    notice.value = '已恢复 21 条演示数据。'
+  }
+  return { devices, nameInput, statusInput, page, selected, mode, notice, storageWarning, filtered, activeCount, query, changePage, bulkDisable, save, setMode, resetData }
+}

package/skills/i3-ui-prototype/assets/frameworks/vue-antdv-next/legacy-starter/tests/devices.test.ts

@@ -0,0 +1,44 @@
+import assert from 'node:assert/strict'
+import test from 'node:test'
+import { createSeed, filterDevices, updateDevices, loadDevices, persistDevices, storageKey } from '../src/domain/devices.ts'
+
+test('seed has 21 stable unique records and filters compose', () => {
+  const seed = createSeed()
+  assert.equal(seed.length, 21)
+  assert.equal(new Set(seed.map(item => item.id)).size, 21)
+  assert.equal(seed[0]?.code, 'DEV-001')
+  assert.deepEqual(createSeed(), seed)
+  const result = filterDevices(seed, '  设备  ', 'inactive')
+  assert.ok(result.length > 0 && result.length < seed.length)
+  assert.ok(result.every(item => item.status === 'inactive' && item.name.includes('设备')))
+  assert.equal(filterDevices(seed, '不存在', 'all').length, 0)
+})
+
+test('bulk mutation touches selected identities only, without mutating prior state', () => {
+  const seed = createSeed()
+  const updated = updateDevices(seed, ['device-1', 'device-3'], { status: 'inactive' })
+  assert.equal(updated[0]?.status, 'inactive')
+  assert.equal(updated[2]?.status, 'inactive')
+  assert.deepEqual(updated[1], seed[1])
+  assert.equal(seed[0]?.status, 'active')
+})
+
+test('storage is isolated by instance namespace and mock version; reset is deterministic', () => {
+  const map = new Map<string, string>()
+  const storage = { getItem: (key: string) => map.get(key) ?? null, setItem: (key: string, value: string) => { map.set(key, value) } }
+  const a = storageKey('pilot-A', 'v1')
+  const b = storageKey('pilot-B', 'v1')
+  const seed = createSeed()
+  persistDevices(storage, a, updateDevices(seed, ['device-1'], { name: 'changed' }))
+  assert.equal(loadDevices(storage, a)[0]?.name, 'changed')
+  assert.deepEqual(loadDevices(storage, b), seed)
+  assert.deepEqual(loadDevices(storage, storageKey('pilot-A', 'v2')), seed)
+  persistDevices(storage, a, seed)
+  assert.deepEqual(loadDevices(storage, a), createSeed())
+})
+
+test('invalid persisted data recovers to fixed seed and empty namespaces are rejected', () => {
+  assert.deepEqual(loadDevices({ getItem: () => '{broken' }, 'key'), createSeed())
+  assert.deepEqual(loadDevices({ getItem: () => '[{"id":"fake"}]' }, 'key'), createSeed())
+  assert.throws(() => storageKey('', 'v1'), /namespace/)
+})

package/skills/i3-ui-prototype/assets/frameworks/vue-antdv-next/legacy-starter/tests/theme.test.ts

@@ -0,0 +1,26 @@
+import assert from 'node:assert/strict'
+import test from 'node:test'
+import { THEME_PRESETS, resolveThemeConfig, themeStorageKey, loadThemePreference, saveThemePreference, safeThemeStorage } from '../src/domain/theme.ts'
+
+const binding = { defaultTheme: 'light', presets: ['light', 'dark', 'fresh', 'tech'] }
+test('four named presets are explicit while an unbound instance stays legacy', () => {
+  assert.equal(resolveThemeConfig(undefined), null)
+  assert.deepEqual(resolveThemeConfig(binding), binding)
+  assert.deepEqual(Object.values(THEME_PRESETS).map(theme => theme.label), ['明亮', '暗黑', '清新', '科技'])
+  assert.deepEqual(Object.values(THEME_PRESETS).map(theme => theme.mode), ['light', 'dark', 'light', 'dark'])
+  for (const config of [{ ...binding, defaultTheme: 'dark' }, { ...binding, presets: [1,2,3,4] }, { ...binding, presets: ['light','dark','fresh','fresh'] }]) assert.throws(() => resolveThemeConfig(config))
+})
+test('theme preference is namespaced independently and damaged cache falls back', () => {
+  const values=new Map<string,string>(), storage={ getItem:(key:string)=>values.get(key)??null,setItem:(key:string,value:string)=>{values.set(key,value)} }
+  const a=themeStorageKey('instance-a'),b=themeStorageKey('instance-b')
+  assert.notEqual(a,b);assert.match(a,/:ui-theme:v1$/)
+  assert.equal(saveThemePreference(storage,a,'tech'),true)
+  assert.equal(loadThemePreference(storage,a),'tech');assert.equal(loadThemePreference(storage,b),'light')
+  for (const broken of ['{','null','{"version":1,"themeId":2}','{"version":2,"themeId":"tech"}','{"version":1,"themeId":"unknown"}']) { values.set(a,broken);assert.equal(loadThemePreference(storage,a),'light') }
+})
+test('denied storage never prevents local theme changes or returns a fake saved preference', () => {
+  const denied={getItem(){throw Error('denied')},setItem(){throw Error('denied')}}
+  assert.equal(safeThemeStorage(()=>{throw Error('getter denied')}),null)
+  assert.equal(loadThemePreference(denied,'key'),'light');assert.equal(loadThemePreference(null,'key'),'light')
+  assert.equal(saveThemePreference(denied,'key','dark'),false);assert.equal(saveThemePreference(null,'key','dark'),false)
+})