@_tc/template-core 0.1.3 → 0.1.5

package/.skills/tc-component-usage-skills/reference/patterns.md

@@ -0,0 +1,357 @@
+# Component Patterns
+
+Recurring patterns and best practices for `@tc/ui/react`.
+
+---
+
+## Form Patterns
+
+### SchemaForm: Data-Driven Forms
+
+The standard way to build forms. Define schemas, not JSX:
+
+```tsx
+const [form] = useForm<UserForm>()
+
+<SchemaForm<UserForm>
+  form={form}
+  schemas={[
+    { key: 'username', label: 'Username', type: 'input', required: true },
+    { key: 'email', label: 'Email', type: 'input',
+      rules: [{ type: 'email', message: 'Invalid email' }] },
+    { key: 'role', label: 'Role', type: 'select',
+      fieldProps: { options: [{ label: 'Admin', value: 'admin' }, { label: 'User', value: 'user' }] } },
+    { key: 'active', label: 'Active', type: 'switch' },
+  ]}
+  onFinish={handleSubmit}
+/>
+```
+
+### SchemaForm Layouts
+
+- **`layout='vertical'`** (default): Label above field. Footer buttons auto-rendered.
+- **`layout='horizontal'`**: Label beside field. **Footer buttons NOT auto-rendered** — provide via `footerButtons` prop or handle externally.
+- **Per-field override**: Set `layout` on individual schema items via `fieldLayout`.
+
+### Registering Custom SchemaForm Types
+
+```tsx
+import { registerComponents } from '@tc/scalability/SchemaForm/data'
+
+registerComponents({
+  richText: RichTextEditor,
+  userSelector: UserSelect,
+})
+// Now { type: 'richText', ... } works in schemas
+```
+
+### FormItem: Render Function Pattern
+
+When you need custom logic inside a form field:
+
+```tsx
+<FormItem label="Tags" name="tags">
+  {(value, onChange) => (
+    <TagInput value={value} onChange={(tags) => onChange(tags)} />
+  )}
+</FormItem>
+```
+
+### FormItem: Automatic Child Injection
+
+`FormItem` auto-clones children to inject `value`/`onChange`. It handles Input's two-arg `onChange(value, event)` signature correctly.
+
+### SubmitButton for Async Forms
+
+```tsx
+<SubmitButton
+  onClick={async () => {
+    await submitToApi(form.getFieldsValue())
+  }}
+>
+  Save
+</SubmitButton>
+```
+
+Auto-shows loading spinner during async execution.
+
+---
+
+## DataTable Patterns
+
+### Basic Column Definition
+
+```tsx
+const columns: TableColumnDef<User>[] = [
+  { key: 'id', title: 'ID', dataIndex: 'id', width: 80 },
+  { key: 'name', title: 'Name', dataIndex: 'name' },
+  { key: 'status', title: 'Status', dataIndex: 'status',
+    render: (value) => <Badge status={value} /> },
+  { key: 'action', title: 'Actions', type: 'action',
+    actions: [
+      { key: 'edit', label: 'Edit', onClick: (record) => openEdit(record) },
+      { key: 'delete', label: 'Delete', danger: true, onClick: (record) => onDelete(record) },
+    ] },
+]
+```
+
+### Action Column Behavior
+
+`ActionBtn` handles the action column rendering:
+- **0 actions**: Shows `'-'`
+- **1 action**: Single button
+- **Multiple**: Uses overflow mode:
+  - `'auto'` (default): Uses ResizeObserver to detect fit; falls back to dropdown
+  - `'dropdown'`: Always shows "..." dropdown button
+  - `'inline'`: Shows all buttons inline (only for `DropdownBaseItem`)
+
+### Pagination
+
+```tsx
+// Let DataTable handle pagination internally
+<DataTable columns={columns} data={data} />
+
+// Control pagination externally
+<DataTable
+  columns={columns}
+  data={data}
+  pagination={{ current: 1, pageSize: 20, total: 100, onChange: fetchPage }}
+/>
+```
+
+### Row Selection
+
+```tsx
+<DataTable
+  columns={columns}
+  data={data}
+  rowSelection={{
+    selectedRowKeys: selectedIds,
+    onChange: (keys) => setSelectedIds(keys),
+  }}
+/>
+```
+
+Supports checkboxes, indeterminate (partial) state, page-level select-all.
+
+### Sticky Columns
+
+Action columns are auto-sticky right. Set `fixed: 'left'` or `fixed: 'right'` on other columns. IntersectionObserver-based shadow effects when scrolled.
+
+### Loading State
+
+```tsx
+<DataTable columns={columns} data={data} loading={isLoading} />
+```
+
+Shows skeleton overlay in `tableloading` mode while `loading={true}`.
+
+---
+
+## TableSearch Pattern
+
+```tsx
+<TableSearch<UserSearch>
+  schemas={[
+    { key: 'name', label: 'Name', type: 'input', isPermanent: true },
+    { key: 'status', label: 'Status', type: 'select',
+      fieldProps: { options: statusOptions }, isPermanent: true },
+    { key: 'createdAt', label: 'Created', type: 'date' },
+    { key: 'email', label: 'Email', type: 'input' },
+  ]}
+  onSearch={(values) => fetchData(values)}
+  onReset={() => fetchData({})}
+  onExport={(type, searchData) => exportData(type, searchData)}
+  exportMenuItems={exportItems}
+/>
+```
+
+`isPermanent: true` fields always show. Others hidden when collapsed. `expandBoundaries` (default 4) controls permanent field threshold.
+
+---
+
+## Overlay Patterns
+
+### Modal with Form
+
+```tsx
+const [open, setOpen] = useState(false)
+const [form] = useForm()
+
+<Modal open={open} onClose={() => setOpen(false)} title="Create User"
+  footer={
+    <div className="flex justify-end gap-2">
+      <Button onClick={() => setOpen(false)}>Cancel</Button>
+      <SubmitButton onClick={() => form.submit()}>Save</SubmitButton>
+    </div>
+  }
+>
+  <SchemaForm form={form} schemas={schemas} footerButtons={false}
+    onFinish={async (values) => { await createUser(values); setOpen(false); }} />
+</Modal>
+```
+
+### ConfirmDialog for Simple Confirmations
+
+```tsx
+<ConfirmDialog
+  open={confirmOpen}
+  title="Delete User"
+  content="This action cannot be undone. Continue?"
+  onOk={async () => { await deleteUser(id); setConfirmOpen(false); }}
+  onCancel={() => setConfirmOpen(false)}
+/>
+```
+
+### Imperative Confirm (modalManager)
+
+```tsx
+modalManager.confirm({
+  title: 'Delete',
+  content: 'Are you sure?',
+  onOk: async () => { await deleteUser(id); },
+})
+```
+
+### Drawer for Side Panels
+
+```tsx
+<Drawer open={open} onClose={() => setOpen(false)} title="User Details"
+  placement="right" width={480}
+>
+  <UserDetailContent userId={id} />
+</Drawer>
+```
+
+---
+
+## Menu Patterns
+
+### Declarative via items
+
+```tsx
+<Menu
+  mode="left"
+  items={[
+    { key: 'dashboard', label: 'Dashboard', icon: <HomeIcon /> },
+    { key: 'users', label: 'Users', icon: <UsersIcon />,
+      children: [
+        { key: 'users-list', label: 'All Users' },
+        { key: 'users-roles', label: 'Roles' },
+      ] },
+  ]}
+  selectedKey={currentKey}
+  onSelect={(key) => navigate(key)}
+/>
+```
+
+### Collapsible Sidebar
+
+```tsx
+<Menu mode="left" collapsed={collapsed} collapsedWidth={64} collapsedLabelTooltip>
+  <Menu.CollapseToggle ref={toggleRef} />
+  {/* items */}
+</Menu>
+```
+
+When collapsed without icon: shows first character of label. With `collapsedLabelTooltip`: hover shows full label via Popup.
+
+### Top Mode Menu
+
+```tsx
+<Menu mode="top" expandTrigger="hover">
+  <Menu.Item eventKey="home">Home</Menu.Item>
+  <Menu.SubMenu eventKey="products" label="Products" popup>
+    <Menu.Item eventKey="prod-list">List</Menu.Item>
+    <Menu.Item eventKey="prod-create">Create</Menu.Item>
+  </Menu.SubMenu>
+</Menu>
+```
+
+In `mode='top'`, SubMenus always use popup dropdowns.
+
+---
+
+## Notification & Message Patterns
+
+### Toast Messages
+
+```tsx
+import { message } from '@tc/ui/react'
+
+message.success('User created successfully')
+message.error('Failed to save')
+message.warning('Session expiring soon')
+message.info('New update available')
+```
+
+### Notifications (Corner)
+
+```tsx
+import { Notification } from '@tc/ui/react'
+
+// As component
+<Notification type="error" title="Upload Failed" message="Network error. Retry?" />
+
+// To manage manually, render conditionally
+```
+
+---
+
+## Layout Pattern
+
+```tsx
+<Layout
+  header={<Header />}
+  sidebar={<SidebarMenu />}
+  footer={<Footer />}
+>
+  <main className="p-6">
+    <Outlet />
+  </main>
+</Layout>
+```
+
+---
+
+## Compound Component Pattern
+
+Three components use compound patterns with Context:
+
+1. **Menu**: `<Menu>` + `<Menu.Item>` + `<Menu.SubMenu>` + `<Menu.CollapseToggle>`
+2. **Radio**: `<Radio.Group>` + `<Radio>`
+3. **Breadcrumb**: `<Breadcrumb>` + `<BreadcrumbList>` + `<BreadcrumbItem>` + ...
+
+Children auto-detect parent via Context and inherit configuration.
+
+---
+
+## Controlled/Uncontrolled Convention
+
+All input-like components follow this pattern:
+
+```typescript
+// Internal pattern used by every input component:
+const isControlled = props.value !== undefined
+// → Controlled: use props.value + props.onChange
+// → Uncontrolled: use internal useState(defaultValue)
+```
+
+This means both patterns work identically:
+
+```tsx
+// Controlled
+<Select value={val} onChange={setVal} options={opts} />
+
+// Uncontrolled
+<Select defaultValue="foo" options={opts} />
+```
+
+---
+
+## CSS Conventions
+
+- All CSS classes are prefixed `tc-ui-<component-name>`
+- Tailwind CSS used for styling
+- Theme via CSS custom properties: `hsl(var(--theme-primary))`, `hsl(var(--theme-background))`, etc.
+- Customize by setting CSS variables or overriding Tailwind theme

package/README.md

@@ -16,18 +16,24 @@ pnpm add @_tc/template-core
 
 ## 可选：AI Agent Skill
 
-包内附带 `tc-generator` skill，本质是一份可复用的 Agent 指令包，用来按 TemplateCore 约定生成项目、model 配置、Schema CRUD、controller 和 router。
+包内附带两份 Agent Skill，本质是可复用的 Agent 指令包，采用渐进式披露（SKILL.md + reference/）结构。
+
+| Skill | 用途 |
+| --- | --- |
+| `tc-generator` | 按 TemplateCore 约定生成项目、model 配置、Schema CRUD、controller 和 router。 |
+| `tc-component-usage-skills` | 指导 Agent 选用和正确使用内置 React 组件库（Button、Form、DataTable、Modal 等）。 |
 
 如果你的 Agent 支持本地 skills 目录，可以从已安装的 npm 包复制安装。以 Codex 为例：
 
 ```bash
-mkdir -p "${CODEX_HOME:-$HOME/.codex}/skills"
-cp -R node_modules/@_tc/template-core/.skills/tc-generator "${CODEX_HOME:-$HOME/.codex}/skills/tc-generator"
+mkdir -p “${CODEX_HOME:-$HOME/.codex}/skills”
+cp -R node_modules/@_tc/template-core/.skills/tc-generator “${CODEX_HOME:-$HOME/.codex}/skills/tc-generator”
+cp -R node_modules/@_tc/template-core/.skills/tc-component-usage-skills “${CODEX_HOME:-$HOME/.codex}/skills/tc-component-usage-skills”
 ```
 
-安装后重启对应 Agent，让新 skill 生效。使用时可以直接说“用 tc-generator 生成一个商品管理模块”。
+安装后重启对应 Agent，让新 skill 生效。使用时可以直接说”用 tc-generator 生成一个商品管理模块”或”用 tc-component-usage-skills 帮我写一个带搜索的分页表格”。
 
-其他 Agent 如果不支持自动安装 skill，也可以直接读取 `.skills/tc-generator/SKILL.md`，再按需读取 `.skills/tc-generator/reference/` 下的参考文件。
+其他 Agent 如果不支持自动安装 skill，也可以直接读取 `.skills/tc-generator/SKILL.md` 或 `.skills/tc-component-usage-skills/SKILL.md`，再按需读取 `reference/` 下的参考文件。
 
 ## 快速使用
 
@@ -1328,3 +1334,4 @@ buildFE('prod', {
 - `model` 数组合并依赖稳定 `key`。
 - Dashboard 默认需要 URL 带 `?projk=项目key`。
 - 前端入口必须命名为 `.entry.tsx`、`.entry.ts`、`.entry.jsx` 或 `.entry.js`。
+- **使用方不建议在 `/frontend/apps/` 下保留 `html` 文件。** Vite 构建时会根据模板文件（`app/view/entry.tpl`）自动生成 html，如果保留 html 文件，可能与模板不同步而导致内容过时。

package/cjs/bundler/utils.js

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`../_virtual/_rolldown/runtime.js`),t=require(`../packages/utils/path.js`);require(`../packages/utils/index.js`);const n=require(`../packages/common/log/index.js`),r=require(`./state.js`);let i=require(`path`);i=e.__toESM(i);let a=require(`glob`);a=e.__toESM(a);let o=require(`fs`),s=require(`@tailwindcss/vite`);s=e.__toESM(s);let c=require(`module`),l=require(`url`),u=require(`vite`);var d=typeof __filename==`string`?__filename:(0,l.fileURLToPath)({}.url),f=i.default.dirname(d),p=process.cwd(),m=(0,c.createRequire)(d),h=i.default.resolve(f,`../../`),g=i.default.resolve(f,`../`),_=i.default.resolve(h,`./fe/frontend`),v=i.default.resolve(p,`.`),y=i.default.resolve(v,`./frontend`),b=e=>i.default.dirname(m.resolve(`${e}/package.json`));function x(){n.logWhite(`frameFEPath: `+_),n.logWhite(`runFEPath: `+y);let e=[_,y].reduce((e,n)=>{let r=[`js`,`jsx`,`ts`,`tsx`].map(e=>t.resolve(n,`/**`,`/*.`+e)),i=a.sync(r).filter(e=>e.includes(`.entry.`)).filter(e=>!e.includes(`.d.ts`));return[...e,...i]},[]),r={};if(!e.length)return r;let s;for(let n=0;n<e.length;n++){let c=e[n],l=i.default.resolve(c,`../`),u=a.sync(t.resolve(l,`*.html`))[0];if(u){let e=i.default.basename(u,`.html`);r[e]=i.default.resolve(p,u)}else{s||=(0,o.readFileSync)(i.default.resolve(g,`./app/view/entry.tpl`),`utf-8`);let e=c.split(i.default.sep).at(-1),t=s.replace(`<!-- {{InsertScript}} -->`,`<script type="module" src="./${e}"><\/script>`),n=l.split(i.default.sep).at(-1),a=i.default.join(l,n+`.html`);(0,o.writeFileSync)(a,t),r[n]=a}}return r}function S(){let e=r.buildFESharedState.options.output??`frame`;return e!==`frame`&&n.logRed(`Please pay attention to the build output.`),e===`run`?i.default.join(v,`./app/public/dist`):typeof e==`function`?e():i.default.join(g,`./app/public/dist`)}var C=async e=>{let t=(await import(`chokidar`)).watch(y,{ignored:/(^|[\/\\])\../,persistent:!0,ignoreInitial:!0}),r=!1;t.on(`change`,async t=>{r||=(r=!0,n.logYellow(`changed: ${t}`),await e?.(),!1)}),n.logYellow(`watching ${y}/...`)};function w(e=`.html`){let t=[...new Set(Array.isArray(e)?e:[e])];return{name:`flatten-html`,apply:`build`,closeBundle(){let e=S();if(!(0,o.existsSync)(e))return;let r=a.sync(`**/*.html`,{cwd:e,dot:!0});for(let n of r){let r=i.default.join(e,n),a=i.default.basename(n,`.html`),s=`.entry`;a.indexOf(s)===-1&&(a+=s);for(let n of t){let t=a+n,s=i.default.join(e,t);r!==s&&(0,o.copyFileSync)(r,s)}t.some(t=>r===i.default.join(e,a+t))||(0,o.unlinkSync)(r)}let s=[...new Set(r.map(e=>i.default.dirname(e)))].sort().reverse(),c=e=>{if(!((0,o.existsSync)(e)?(0,o.readdirSync)(e):[1]).length){(0,o.rmdirSync)(e);let t=e.split(i.default.sep).slice(0,-1);t.length&&c(t.join(i.default.sep))}};for(let t of s)t&&t!==`.`&&c(i.default.join(e,t));let l=t.flatMap(t=>a.sync(`**/*`+t,{cwd:e,dot:!0}));for(let e of l)n.logYellow(`final file path -----> `+e)}}}function T(e){let t=[``,`.ts`,`.tsx`,`.js`,`.jsx`];return e.reduce((e,[n,r,a=y])=>{let s=t.map(e=>i.default.resolve(a,r+e)).find(e=>(0,o.existsSync)(e)),c=i.default.resolve(f,`./defaultAlias`);return s&&(c=s),e[n]=c,e},{})}var E=(...e)=>new RegExp(e.join(`[\\/]`)),D=e=>`_${e}_tcC`,O=async(e,t)=>{try{await(0,u.build)({configFile:!1,base:`/dist`,plugins:[(await import(`@vitejs/plugin-react`)).default(),w([`.tpl`,`.html`]),(0,s.default)()],build:{outDir:S(),emptyOutDir:!0,sourcemap:t===`dev`?`inline`:`hidden`,rollupOptions:{input:e,output:{codeSplitting:{groups:[{name:D(`__nm`),test:E(`node_modules`),maxSize:5e5,minShareCount:2,priority:1},{name:D(`r`),test:E(`node_modules`,`react`),minShareCount:2,maxSize:5e5,priority:5},{name:D(`r-d`),test:E(`node_modules`,`react-dom`),minShareCount:2,maxSize:2e5,priority:10},{name:D(`r-r-d`),test:E(`node_modules`,`react-router-dom`),minShareCount:2,maxSize:5e5,priority:10},{name:D(`ajv`),test:E(`node_modules`,`ajv`),minShareCount:2,maxSize:2e5,priority:10},{name:D(`ui-lib`),test:E(`components`),minShareCount:2,maxSize:2e5,priority:5},{name:D(`ui-f-lib`),test:E(`components`,`.*?[Ff]orm.*?`),minShareCount:2,maxSize:5e4,priority:10}]}}}},resolve:{alias:{react:b(`react`),"react-dom":b(`react-dom`),"@tc/ui-react":i.default.resolve(f,`../../fe/packages/ui/react/`),...T([[`@tc/scalability/SchemaForm/frameData`,`./extended/SchemaForm/data`,_],[`@tc/scalability/SchemaForm/data`,`./extended/SchemaForm/data`],[`@tc/scalability/SchemaPage/CallCom/data`,`./extended/SchemaPage/CallCom/data`],[`@tc/scalability/dash/customRoutes`,`./extended/dash/customRoutes`]])}}}),n.logJoinColorized(n.colorize(`builded`,`green`),n.colorize(` -> `,`white`),n.colorize(`time: `,`cyan`),n.colorize(new Date,`pink`))}catch(e){n.logRed(e)}};exports.VBuildFE=O,exports.entries=x,exports.outDir=S,exports.watchFiles=C;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`../_virtual/_rolldown/runtime.js`),t=require(`../packages/utils/path.js`);require(`../packages/utils/index.js`);const n=require(`../packages/common/log/index.js`),r=require(`./state.js`);let i=require(`path`);i=e.__toESM(i);let a=require(`glob`);a=e.__toESM(a);let o=require(`fs`),s=require(`@tailwindcss/vite`);s=e.__toESM(s);let c=require(`module`),l=require(`url`),u=require(`vite`);var d=typeof __filename==`string`?__filename:(0,l.fileURLToPath)({}.url),f=i.default.dirname(d),p=process.cwd(),m=(0,c.createRequire)(d),h=i.default.resolve(f,`../../`),g=i.default.resolve(f,`../`),_=i.default.resolve(h,`./fe/frontend`),v=i.default.resolve(p,`.`),y=i.default.resolve(v,`./frontend`),b=e=>i.default.dirname(m.resolve(`${e}/package.json`));function x(){n.logWhite(`frameFEPath: `+_),n.logWhite(`runFEPath: `+y);let e=[_,y].reduce((e,n)=>{let r=[`js`,`jsx`,`ts`,`tsx`].map(e=>t.resolve(n,`/**`,`/*.`+e)),i=a.sync(r).filter(e=>e.includes(`.entry.`)).filter(e=>!e.includes(`.d.ts`));return[...e,...i]},[]),r={};if(!e.length)return r;let s;for(let n=0;n<e.length;n++){let c=e[n],l=i.default.resolve(c,`../`),u=a.sync(t.resolve(l,`*.html`))[0];if(u){let e=i.default.basename(u,`.html`);r[e]=i.default.resolve(p,u)}else{s||=(0,o.readFileSync)(i.default.resolve(g,`./app/view/entry.tpl`),`utf-8`);let e=c.split(i.default.sep).at(-1),t=s.replace(`<!-- {{InsertScript}} -->`,`<script type="module" src="./${e}"><\/script>`),n=l.split(i.default.sep).at(-1),a=i.default.join(l,n+`.html`);(0,o.writeFileSync)(a,t),r[n]=a}}return r}function S(){let e=r.buildFESharedState.options.output??`frame`;return e!==`frame`&&n.logRed(`Please pay attention to the build output.`),e===`run`?i.default.join(v,`./app/public/dist`):typeof e==`function`?e():i.default.join(g,`./app/public/dist`)}var C=async e=>{let t=(await import(`chokidar`)).watch(y,{ignored:/(^|[\/\\])\../,persistent:!0,ignoreInitial:!0}),r=!1;t.on(`change`,async t=>{r||=(r=!0,n.logYellow(`changed: ${t}`),await e?.(),!1)}),n.logYellow(`watching ${y}/...`)};function w(e=`.html`){let t=[...new Set(Array.isArray(e)?e:[e])];return{name:`flatten-html`,apply:`build`,closeBundle(){let e=S();if(!(0,o.existsSync)(e))return;let r=a.sync(`**/*.html`,{cwd:e,dot:!0});for(let n of r){let r=i.default.join(e,n),a=i.default.basename(n,`.html`),s=`.entry`;a.indexOf(s)===-1&&(a+=s);for(let n of t){let t=a+n,s=i.default.join(e,t);r!==s&&(0,o.copyFileSync)(r,s)}t.some(t=>r===i.default.join(e,a+t))||(0,o.unlinkSync)(r)}let s=[...new Set(r.map(e=>i.default.dirname(e)))].sort().reverse(),c=e=>{if(!((0,o.existsSync)(e)?(0,o.readdirSync)(e):[1]).length){(0,o.rmdirSync)(e);let t=e.split(i.default.sep).slice(0,-1);t.length&&c(t.join(i.default.sep))}};for(let t of s)t&&t!==`.`&&c(i.default.join(e,t));let l=t.flatMap(t=>a.sync(`**/*`+t,{cwd:e,dot:!0}));for(let e of l)n.logYellow(`final file path -----> `+e)}}}function T(e){let t=[``,`.ts`,`.tsx`,`.js`,`.jsx`];return e.reduce((e,[n,r,a=y])=>{let s=t.map(e=>i.default.resolve(a,r+e)).find(e=>(0,o.existsSync)(e)),c=i.default.resolve(f,`./defaultAlias`);return s&&(c=s),e[n]=c,e},{})}var E=(...e)=>new RegExp(e.join(`[\\/]`)),D=e=>`_${e}_tcC`,O=async(e,t)=>{try{await(0,u.build)({configFile:!1,base:`/dist`,plugins:[(await import(`@vitejs/plugin-react`)).default(),w([`.tpl`,`.html`]),(0,s.default)()],build:{outDir:S(),emptyOutDir:!0,sourcemap:t===`dev`?`inline`:`hidden`,rollupOptions:{input:e,output:{codeSplitting:{groups:[{name:D(`__nm`),test:E(`node_modules`),maxSize:5e5,minShareCount:2,priority:1},{name:D(`r`),test:E(`node_modules`,`react`),minShareCount:2,maxSize:5e5,priority:5},{name:D(`r-d`),test:E(`node_modules`,`react-dom`),minShareCount:2,maxSize:2e5,priority:10},{name:D(`r-r-d`),test:E(`node_modules`,`react-router-dom`),minShareCount:2,maxSize:5e5,priority:10},{name:D(`ajv`),test:E(`node_modules`,`ajv`),minShareCount:2,maxSize:2e5,priority:10},{name:D(`ui-lib`),test:E(`components`),minShareCount:2,maxSize:2e5,priority:5},{name:D(`ui-f-lib`),test:E(`components`,`.*?[Ff]orm.*?`),minShareCount:2,maxSize:5e4,priority:10}]}}}},resolve:{alias:{react:b(`react`),"react-dom":b(`react-dom`),vite:b(`vite`),"@tc/ui-react":i.default.resolve(f,`../../fe/packages/ui/react/`),...T([[`@tc/scalability/SchemaForm/frameData`,`./extended/SchemaForm/data`,_],[`@tc/scalability/SchemaForm/data`,`./extended/SchemaForm/data`],[`@tc/scalability/SchemaPage/CallCom/data`,`./extended/SchemaPage/CallCom/data`],[`@tc/scalability/dash/customRoutes`,`./extended/dash/customRoutes`]])}}}),n.logJoinColorized(n.colorize(`builded`,`green`),n.colorize(` -> `,`white`),n.colorize(`time: `,`cyan`),n.colorize(new Date,`pink`))}catch(e){n.logRed(e)}};exports.VBuildFE=O,exports.entries=x,exports.outDir=S,exports.watchFiles=C;

package/esm/bundler/utils.js

@@ -173,6 +173,7 @@ var F = (...e) => new RegExp(e.join("[\\/]")), I = (e) => `_${e}_tcC`, L = async
 			resolve: { alias: {
 				react: k("react"),
 				"react-dom": k("react-dom"),
+				vite: k("vite"),
 				"@tc/ui-react": s.resolve(x, "../../fe/packages/ui/react/"),
 				...P([
 					[

package/fe/frontend/src/hooks/useCurrentMenuData.js

@@ -17,7 +17,7 @@ const useCurrentMenuData = (useSibe = false) => {
         const isSide = params[QK.sk];
         const menuTypeIsTop = !!params[QK.k];
         const menu = findMenuItem(projectInfo?.menu, menuTypeIsTop ? params[QK.k] : params[QK.sk]);
-        if (isSide && useSibe && menuTypeIsTop) {
+        if (isSide && useSibe && menuTypeIsTop && menu) {
             const sMenu = findMenuItem(menu.sidebarConfig?.menu ?? [], params[QK.sk]);
             return sMenu;
         }

package/fe/packages/ui/react/components/Menu/SubMenu.js

@@ -154,7 +154,7 @@ export function SubMenu({ eventKey, label, icon, disabled, popup: forcePopup, pa
     const hoverBridgePlacement = mode === "top" && level > 0 ? "horizontal" : "auto";
     const subMenuContent = (_jsx("div", { className: cn(
         // "min-w-[180px]",
-        " rounded-xl bg-muted p-2 shadow-[0_18px_44px_rgba(15,23,42,0.14),0_4px_12px_rgba(15,23,42,0.08)]"), children: _jsx(SubMenuLevelContext.Provider, { value: level + 1, children: _jsx("div", { className: "flex flex-col gap-1", children: children }) }) }));
+        "rounded-xl border border-border/80 bg-popover p-2 text-popover-foreground", "shadow-[0_20px_56px_hsl(var(--background)/0.7),0_8px_18px_hsl(var(--foreground)/0.16),inset_0_1px_0_hsl(var(--foreground)/0.06)]"), children: _jsx(SubMenuLevelContext.Provider, { value: level + 1, children: _jsx("div", { className: "flex flex-col gap-1", children: children }) }) }));
     /**
      *
      * submenu  生成的节点是  1 menuItem

package/fe/packages/ui/react/components/testPage/index.js

@@ -156,20 +156,20 @@ function DataTableDemo() {
     const columns = [
         { key: 'id', title: 'ID', width: '60px' },
         { key: 'name', title: '姓名' },
-        { key: 'role', title: '角色1', fixed: 'left' },
-        { key: 'status', title: '状态1', fixed: 'left' },
-        { key: 'role', title: '角色2' },
-        { key: 'status', title: '状态2' },
-        { key: 'role', title: '角色3' },
-        { key: 'status', title: '状态3' },
-        { key: 'role', title: '角色4' },
-        { key: 'status', title: '状态4' },
-        { key: 'role', title: '角色5' },
-        { key: 'status', title: '状态5' },
-        { key: 'role', title: '角色6' },
-        { key: 'status', title: '状态6' },
-        { key: 'role', title: '角色', fixed: 'right' },
-        { key: 'status', title: '状态' },
+        { key: 'role1', title: '角色1', dataIndex: 'role', fixed: 'left' },
+        { key: 'status1', title: '状态1', dataIndex: 'status', fixed: 'left' },
+        { key: 'role2', title: '角色2', dataIndex: 'role' },
+        { key: 'status2', title: '状态2', dataIndex: 'status' },
+        { key: 'role3', title: '角色3', dataIndex: 'role' },
+        { key: 'status3', title: '状态3', dataIndex: 'status' },
+        { key: 'role4', title: '角色4', dataIndex: 'role' },
+        { key: 'status4', title: '状态4', dataIndex: 'status' },
+        { key: 'role5', title: '角色5', dataIndex: 'role' },
+        { key: 'status5', title: '状态5', dataIndex: 'status' },
+        { key: 'role6', title: '角色6', dataIndex: 'role' },
+        { key: 'status6', title: '状态6', dataIndex: 'status' },
+        { key: 'role7', title: '角色', dataIndex: 'role', fixed: 'right' },
+        { key: 'status7', title: '状态', dataIndex: 'status' },
         {
             key: 'action',
             title: '操作',
@@ -183,11 +183,106 @@ function DataTableDemo() {
         },
     ];
     const data = [
-        { id: 1, name: '张三', role: '管理员', status: '正常' },
-        { id: 2, name: '李四', role: '用户', status: '禁用' },
-        { id: 3, name: '王五', role: '审计员', status: '正常' },
-        { id: 4, name: '赵六', role: '用户', status: '正常' },
-        { id: 5, name: '孙七', role: '用户', status: '正常' },
+        {
+            id: 1,
+            name: '张三',
+            role: '管理员',
+            role7: '管理员',
+            role6: '管理员',
+            role5: '管理员',
+            role4: '管理员',
+            role3: '管理员',
+            role2: '管理员',
+            role1: '管理员',
+            status: '正常',
+            status7: '正常',
+            status6: '正常',
+            status5: '正常',
+            status4: '正常',
+            status3: '正常',
+            status2: '正常',
+            status1: '正常',
+        },
+        {
+            id: 2,
+            name: '李四',
+            role: '用户',
+            role7: '用户',
+            role6: '用户',
+            role5: '用户',
+            role4: '用户',
+            role3: '用户',
+            role2: '用户',
+            role1: '用户',
+            status: '禁用',
+            status7: '禁用',
+            status6: '禁用',
+            status5: '禁用',
+            status4: '禁用',
+            status3: '禁用',
+            status2: '禁用',
+            status1: '禁用',
+        },
+        {
+            id: 3,
+            name: '王五',
+            role: '审计员',
+            role7: '审计员',
+            role6: '审计员',
+            role5: '审计员',
+            role4: '审计员',
+            role3: '审计员',
+            role2: '审计员',
+            role1: '审计员',
+            status: '正常',
+            status7: '正常',
+            status6: '正常',
+            status5: '正常',
+            status4: '正常',
+            status3: '正常',
+            status2: '正常',
+            status1: '正常',
+        },
+        {
+            id: 4,
+            name: '赵六',
+            role: '用户',
+            role7: '用户',
+            role6: '用户',
+            role5: '用户',
+            role4: '用户',
+            role3: '用户',
+            role2: '用户',
+            role1: '用户',
+            status: '正常',
+            status7: '正常',
+            status6: '正常',
+            status5: '正常',
+            status4: '正常',
+            status3: '正常',
+            status2: '正常',
+            status1: '正常',
+        },
+        {
+            id: 5,
+            name: '孙七',
+            role: '用户',
+            role7: '用户',
+            role6: '用户',
+            role5: '用户',
+            role4: '用户',
+            role3: '用户',
+            role2: '用户',
+            role1: '用户',
+            status: '正常',
+            status7: '正常',
+            status6: '正常',
+            status5: '正常',
+            status4: '正常',
+            status3: '正常',
+            status2: '正常',
+            status1: '正常',
+        },
     ];
     return (_jsx(Section, { title: "DataTable", children: _jsxs("div", { className: "w-full", children: [_jsxs("p", { className: "text-sm mb-2", children: ["\u5DF2\u9009: ", JSON.stringify(selectedKeys)] }), _jsx(DataTable, { columns: columns, data: data, rowKey: "id", rowSelection: {
                         selectedRowKeys: selectedKeys,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@_tc/template-core",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "A full-stack TypeScript admin framework powered by Koa, React, and Vite - monorepo root",
   "types": "./types/index.d.ts",
   "exports": {