@robot-admin/naive-ui-components 0.13.9 → 0.14.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @robot-admin/naive-ui-components
 
+## 0.14.0
+
+### Minor Changes
+
+- 修复按需样式丢失的构建根因：样式归属改为源模块编译记录，移除按 chunk 文件名猜测及别名补丁；Cron / 公式按需入口包含内部依赖和主题默认变量，发布门禁验证实际选择器。
+
+- `C_Cron` 与 `C_FormulaEditor` 推荐使用 `v-model + config` 扁平接入；保留原有独立属性和实例方法，组件内部统一处理模板、编辑、校验、重置与结果反馈。
+- Cron 重构为计划模板、时间字段与执行预览三段工作区；非法或待应用表达式清除过期预览，隐藏预览不启动计算，卸载取消待执行任务。空指定值不再意外扩大为每个值执行；日与星期始终互斥。重置恢复挂载时的初始规则。
+- 公式使用有界安全语法树统一校验与求值，不运行 JavaScript。新增完整语法和函数参数校验、错误字符定位、IF/三元/AND/OR 短路语义；同一公式编译结果随试算数据复用。常量也能直接试算，字符串中的括号和变量名称不会误报。
+- 公式输入改用原生 textarea，保留中文输入、纯文本粘贴和选择区插入；高亮使用 Vue 转义后的独立结构预览。试算值可编辑、与调用方数据隔离，空数字区别于零；只读状态阻止编辑入口，重置同时恢复公式和试算值。
+- 两个工作区按组件容器宽度自适应，样式只使用组件作用域和主题变量；新增打包消费类型与真实浏览器回归，无额外依赖。
+
 ## 0.13.9
 
 - 新增 `C_PageLoading`：同心轨道与波形 SVG、柔和主题卡片，支持明暗主题、按需导入、独立文案和减少动态效果；所有样式隔离，不依赖路由或宿主的 UnoCSS。

package/README.md

@@ -105,6 +105,47 @@ import '@robot-admin/naive-ui-components/C_Table/base.css'
 // 完整模式也可显式使用 C_Form/full.css、C_Table/full.css
 ```
 
+### Cron 与公式工作区
+
+一个模型加一份扁平配置即可。原有独立属性继续兼容，组件内部统一处理模板、校验、预览与初始状态重置。
+
+```vue
+<script setup lang="ts">
+  import { ref } from 'vue'
+  import {
+    C_Cron,
+    type CronConfig,
+  } from '@robot-admin/naive-ui-components/C_Cron'
+  import {
+    C_FormulaEditor,
+    type FormulaEditorConfig,
+  } from '@robot-admin/naive-ui-components/C_FormulaEditor'
+  import '@robot-admin/naive-ui-components/C_Cron/style.css'
+  import '@robot-admin/naive-ui-components/C_FormulaEditor/style.css'
+
+  const expression = ref('0 30 8 * * ?')
+  const cronConfig: CronConfig = { previewCount: 5 }
+  const formula = ref('IF([完成值] > 0, 100 / [完成值], 0)')
+  const formulaConfig: FormulaEditorConfig = {
+    variables: [{ name: '完成值', field: 'completed', type: 'number' }],
+    sampleData: { completed: 5 },
+    editableSampleData: true,
+  }
+</script>
+<template>
+  <C_Cron
+    v-model="expression"
+    :config="cronConfig"
+  />
+  <C_FormulaEditor
+    v-model="formula"
+    :config="formulaConfig"
+  />
+</template>
+```
+
+Cron 支持秒到星期的六个数字字段、范围、间隔、列表及日/星期 `?` 互斥，不实现 L/W/# 扩展；预览按浏览器本地时区计算，不会调度任务。公式试算只在本地进行，不修改传入的 `sampleData`；校验和计算复用有界解析器，条件分支按需执行。通过 `showPreview`、`showKeyboard`、`showVariablePanel` 控制嵌入布局，`disabled` 同时保护试算输入。重置恢复初始模型及数据；切换独立记录时使用新 key 重新挂载。
+
 ### C_Guide 配置引导
 
 项目只需要提供目标和步骤，组件内置主题、可选 SVG 示意图及退出清理，不依赖项目的路由或 Store：
@@ -489,7 +530,7 @@ const config = defineTableConfig({
 | ---------------- | ----------------------- | ----------------------------- |
 | `C_Icon`         | Iconify 图标封装        | `@iconify/vue`                |
 | `C_Loading`      | 主题化 SVG 加载态       | -                             |
-| `C_PageLoading` | 主题化页面切换加载 | - |
+| `C_PageLoading`  | 主题化页面切换加载      | -                             |
 | `C_Code`         | 代码高亮显示            | `highlight.js`                |
 | `C_Barcode`      | 条形码生成器            | `@chenfengyuan/vue-barcode`   |
 | `C_Captcha`      | 拼图/ALTCHA 人机验证    | `vue3-puzzle-vcode`、`altcha` |

package/README_EN.md

@@ -105,6 +105,47 @@ import '@robot-admin/naive-ui-components/C_Table/base.css'
 // Full mode is also available as C_Form/full.css and C_Table/full.css.
 ```
 
+### Cron and formula workspaces
+
+Use a model and one flat config. Existing individual props remain supported; templates, validation, previews and initial-state reset are owned by the components.
+
+```vue
+<script setup lang="ts">
+  import { ref } from 'vue'
+  import {
+    C_Cron,
+    type CronConfig,
+  } from '@robot-admin/naive-ui-components/C_Cron'
+  import {
+    C_FormulaEditor,
+    type FormulaEditorConfig,
+  } from '@robot-admin/naive-ui-components/C_FormulaEditor'
+  import '@robot-admin/naive-ui-components/C_Cron/style.css'
+  import '@robot-admin/naive-ui-components/C_FormulaEditor/style.css'
+
+  const expression = ref('0 30 8 * * ?')
+  const cronConfig: CronConfig = { previewCount: 5 }
+  const formula = ref('IF([完成值] > 0, 100 / [完成值], 0)')
+  const formulaConfig: FormulaEditorConfig = {
+    variables: [{ name: '完成值', field: 'completed', type: 'number' }],
+    sampleData: { completed: 5 },
+    editableSampleData: true,
+  }
+</script>
+<template>
+  <C_Cron
+    v-model="expression"
+    :config="cronConfig"
+  />
+  <C_FormulaEditor
+    v-model="formula"
+    :config="formulaConfig"
+  />
+</template>
+```
+
+Cron supports six numeric fields, ranges, steps, lists and day/weekday exclusion with `?`; L/W/# extensions are not supported. Preview dates use the browser local timezone and never schedule jobs. Formula trials do not mutate caller `sampleData`; validation and calculation share a bounded parser with lazy conditions. Compact modes use `showPreview`, `showKeyboard` and `showVariablePanel`. Read-only mode protects trial inputs too. Reset restores the initial model and data; remount with a new key when switching independent records.
+
 ### Configure C_Guide
 
 Provide targets and steps; the component owns its theme, optional SVG illustrations, and cleanup without depending on a host router or store:
@@ -430,7 +471,7 @@ With `require-server-verification`, a successful response must include a server
 | ---------------- | ------------------------- | ----------------------------- |
 | `C_Icon`         | Iconify icon wrapper      | `@iconify/vue`                |
 | `C_Loading`      | Theme-aware SVG loading   | -                             |
-| `C_PageLoading` | Theme-aware page loading | - |
+| `C_PageLoading`  | Theme-aware page loading  | -                             |
 | `C_Code`         | Code highlighting         | `highlight.js`                |
 | `C_Barcode`      | Barcode generator         | `@chenfengyuan/vue-barcode`   |
 | `C_Captcha`      | Puzzle / ALTCHA captcha   | `vue3-puzzle-vcode`, `altcha` |

package/dist/C_ActionBar.css

@@ -1,3 +1,11 @@
+:root{--c-primary: var(--primary-color, #2080f0);--c-primary-hover: var(--primary-color-hover, #4098fc);--c-primary-pressed: var(--primary-color-pressed, #1060c9);--c-success: var(--success-color, #18a058);--c-warning: var(--warning-color, #f0a020);--c-error: var(--error-color, #d03050);--c-info: var(--info-color, #2080f0);--c-bg-body: var(--body-color, #ffffff);--c-bg-card: var(--card-color, #ffffff);--c-bg-surface: var(--popover-color, #ffffff);--c-text-1: var(--text-color-1, #262626);--c-text-2: var(--text-color-2, #525252);--c-text-3: var(--text-color-3, #a3a3a3);--c-text-4: var(--text-color-4, #c0c0c0);--c-border: var(--border-color, #e5e7eb);--c-radius-sm: var(--border-radius-small, 4px);--c-radius: var(--border-radius, 6px);--c-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);--c-transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);--c-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);--c-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);--c-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1)}
+
+/* unplugin-vue-components disabled */
+/* layer: default */
+.inline-flex[data-v-075758a0]{display:inline-flex;}
+.transform[data-v-075758a0]{transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
+.px[data-v-075758a0]{padding-left:1rem;padding-right:1rem;}
+
 /* unplugin-vue-components disabled */.c-icon[data-v-075758a0] {
   display: inline-flex;
   align-items: center;
@@ -59,10 +67,8 @@
 }
 /* unplugin-vue-components disabled */
 /* layer: default */
-.inline-flex[data-v-075758a0]{display:inline-flex;}
-.transform[data-v-075758a0]{transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));}
-.px[data-v-075758a0]{padding-left:1rem;padding-right:1rem;}
-
+.inline[data-v-325a50d2]{display:inline;}
+.px[data-v-325a50d2]{padding-left:1rem;padding-right:1rem;}
 
 /* unplugin-vue-components disabled *//* 通用操作按钮组件样式 */
 /* ================= 主容器 ================= */
@@ -266,9 +272,4 @@ html.dark .action-divider[data-v-325a50d2] {
 }
 html.dark .action-divider[data-v-325a50d2]:hover {
   opacity: 0.4;
-}
-/* unplugin-vue-components disabled */
-/* layer: default */
-.inline[data-v-325a50d2]{display:inline;}
-.px[data-v-325a50d2]{padding-left:1rem;padding-right:1rem;}
-
+}

package/dist/C_AntV.css

@@ -1,161 +1,33 @@
-/* unplugin-vue-components disabled */
-/* layer: shortcuts */
-.container[data-v-4e8f219f]{width:100%;}
-@media (min-width: 640px){
-.container[data-v-4e8f219f]{max-width:640px;}
-}
-@media (min-width: 768px){
-.container[data-v-4e8f219f]{max-width:768px;}
-}
-@media (min-width: 1024px){
-.container[data-v-4e8f219f]{max-width:1024px;}
-}
-@media (min-width: 1280px){
-.container[data-v-4e8f219f]{max-width:1280px;}
-}
-@media (min-width: 1536px){
-.container[data-v-4e8f219f]{max-width:1536px;}
-}
-/* layer: default */
-.visible[data-v-4e8f219f]{visibility:visible;}
-.grid[data-v-4e8f219f]{display:grid;}
-.block[data-v-4e8f219f]{display:block;}
-.select-all[data-v-4e8f219f]{-webkit-user-select:all;user-select:all;}
+:root{--c-primary: var(--primary-color, #2080f0);--c-primary-hover: var(--primary-color-hover, #4098fc);--c-primary-pressed: var(--primary-color-pressed, #1060c9);--c-success: var(--success-color, #18a058);--c-warning: var(--warning-color, #f0a020);--c-error: var(--error-color, #d03050);--c-info: var(--info-color, #2080f0);--c-bg-body: var(--body-color, #ffffff);--c-bg-card: var(--card-color, #ffffff);--c-bg-surface: var(--popover-color, #ffffff);--c-text-1: var(--text-color-1, #262626);--c-text-2: var(--text-color-2, #525252);--c-text-3: var(--text-color-3, #a3a3a3);--c-text-4: var(--text-color-4, #c0c0c0);--c-border: var(--border-color, #e5e7eb);--c-radius-sm: var(--border-radius-small, 4px);--c-radius: var(--border-radius, 6px);--c-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);--c-transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);--c-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);--c-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);--c-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1)}
 
-/* unplugin-vue-components disabled *//* ER 图布局样式 */
-/* AntV X6 图形编辑器公共样式 */
-/* 用于 ER、UML、BPMN 等布局的共享样式 */
-/* 通用布局容器 */
-/* 工具栏样式 */
-/* 图形容器样式 */
-/* 表单项样式 */
-/* 卡片样式 */
-/* 滚动条样式 */
-/* 编辑器容器样式 */
-.er-layout[data-v-6cb58ac5] {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  height: 100%;
-  min-height: 400px;
-}
-.er-layout .toolbar[data-v-6cb58ac5] {
-  padding: 12px;
-  background: var(--n-color-embedded);
-  border-bottom: 1px solid var(--c-border);
-  flex-shrink: 0;
-}
-.er-layout .graph-container[data-v-6cb58ac5] {
-  flex: 1;
-  position: relative;
-  min-height: 300px;
-  width: 100%;
-  border: 1px solid var(--c-border);
-  overflow: hidden;
-}
-.er-layout .graph-container[data-v-6cb58ac5] .x6-graph,
-.er-layout .graph-container[data-v-6cb58ac5] .x6-graph-svg {
-  width: 100% !important;
-  height: 100% !important;
-  display: block;
-}
-.er-layout .graph-container[data-v-6cb58ac5] .x6-graph-svg-stage {
-  outline: none;
-}
-.er-layout .table-editor[data-v-6cb58ac5] {
-  height: 100%;
-  overflow-y: auto;
-  padding: 0 4px;
-}
-.er-layout .table-editor[data-v-6cb58ac5]::-webkit-scrollbar {
-  width: 6px;
-}
-.er-layout .table-editor[data-v-6cb58ac5]::-webkit-scrollbar-thumb {
-  background: var(--n-scrollbar-color);
-  border-radius: 3px;
-}
-.er-layout .table-editor .fields-container[data-v-6cb58ac5] {
-  max-height: calc(100vh - 400px);
-  overflow-y: auto;
-}
-.er-layout .table-editor .fields-container[data-v-6cb58ac5]::-webkit-scrollbar {
-  width: 6px;
-}
-.er-layout .table-editor .fields-container[data-v-6cb58ac5]::-webkit-scrollbar-thumb {
-  background: var(--n-scrollbar-color);
-  border-radius: 3px;
-}
-.er-layout .table-editor .fields-container .field-card[data-v-6cb58ac5] {
-  margin-bottom: 16px;
-}
-.er-layout .table-editor .fields-container .field-card .field-header[data-v-6cb58ac5] {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  font-size: 13px;
-  font-weight: 500;
-}
-.er-layout .table-editor .fields-container .field-card[data-v-6cb58ac5] .n-card-header {
-  padding: 10px 16px 8px;
-}
-.er-layout .table-editor .fields-container .field-card[data-v-6cb58ac5] .n-card__content {
-  padding: 12px 16px 16px;
-}
-.er-layout .table-editor .fields-container[data-v-6cb58ac5] .n-select {
-  min-width: 140px;
-}
-.er-layout .table-editor .fields-container[data-v-6cb58ac5] .n-select .n-select-menu {
-  max-height: 200px;
-  z-index: 9999;
-}
-.er-layout .table-editor .fields-container .n-form-item[data-v-6cb58ac5] {
-  margin-bottom: 8px;
-}
-.er-layout .table-editor .fields-container .n-form-item .n-form-item-label[data-v-6cb58ac5] {
-  font-size: 12px;
-  color: #666;
-  margin-bottom: 4px;
-  white-space: nowrap;
-}
-.er-layout .table-editor .fields-container[data-v-6cb58ac5] .n-input {
-  min-width: 100px;
-}
 /* unplugin-vue-components disabled */
 /* layer: shortcuts */
-.container[data-v-6cb58ac5]{width:100%;}
+.container[data-v-1a860057]{width:100%;}
 @media (min-width: 640px){
-.container[data-v-6cb58ac5]{max-width:640px;}
+.container[data-v-1a860057]{max-width:640px;}
 }
 @media (min-width: 768px){
-.container[data-v-6cb58ac5]{max-width:768px;}
+.container[data-v-1a860057]{max-width:768px;}
 }
 @media (min-width: 1024px){
-.container[data-v-6cb58ac5]{max-width:1024px;}
+.container[data-v-1a860057]{max-width:1024px;}
 }
 @media (min-width: 1280px){
-.container[data-v-6cb58ac5]{max-width:1280px;}
+.container[data-v-1a860057]{max-width:1280px;}
 }
 @media (min-width: 1536px){
-.container[data-v-6cb58ac5]{max-width:1536px;}
+.container[data-v-1a860057]{max-width:1536px;}
 }
 /* layer: default */
-.visible[data-v-6cb58ac5]{visibility:visible;}
-.fixed[data-v-6cb58ac5]{position:fixed;}
-.grid[data-v-6cb58ac5]{display:grid;}
-.table[data-v-6cb58ac5]{display:table;}
-.select-all[data-v-6cb58ac5]{-webkit-user-select:all;user-select:all;}
-.filter[data-v-6cb58ac5]{filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);}
+.visible[data-v-1a860057]{visibility:visible;}
+.grid[data-v-1a860057]{display:grid;}
+.select-all[data-v-1a860057]{-webkit-user-select:all;user-select:all;}
 
 /* unplugin-vue-components disabled */
-/* layer: default */
-.visible[data-v-fc8f213e]{visibility:visible;}
-.end-1[data-v-fc8f213e]{inset-inline-end:0.25rem;}
-.end-2[data-v-fc8f213e]{inset-inline-end:0.5rem;}
-.start-1[data-v-fc8f213e]{inset-inline-start:0.25rem;}
-.grid[data-v-fc8f213e]{display:grid;}
-.block[data-v-fc8f213e]{display:block;}
-.rounded[data-v-fc8f213e]{border-radius:0.25rem;}
-.transition[data-v-fc8f213e]{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
+.c-antv-container[data-v-1a860057] {
+    width: 100%;
+    height: 100%;
+}
 
 /* unplugin-vue-components disabled *//* BPMN 布局样式 */
 /* AntV X6 图形编辑器公共样式 */
@@ -318,6 +190,32 @@
   padding-top: 16px;
   border-top: 1px solid var(--c-border);
 }
+/* unplugin-vue-components disabled */
+/* layer: shortcuts */
+.container[data-v-6cb58ac5]{width:100%;}
+@media (min-width: 640px){
+.container[data-v-6cb58ac5]{max-width:640px;}
+}
+@media (min-width: 768px){
+.container[data-v-6cb58ac5]{max-width:768px;}
+}
+@media (min-width: 1024px){
+.container[data-v-6cb58ac5]{max-width:1024px;}
+}
+@media (min-width: 1280px){
+.container[data-v-6cb58ac5]{max-width:1280px;}
+}
+@media (min-width: 1536px){
+.container[data-v-6cb58ac5]{max-width:1536px;}
+}
+/* layer: default */
+.visible[data-v-6cb58ac5]{visibility:visible;}
+.fixed[data-v-6cb58ac5]{position:fixed;}
+.grid[data-v-6cb58ac5]{display:grid;}
+.table[data-v-6cb58ac5]{display:table;}
+.select-all[data-v-6cb58ac5]{-webkit-user-select:all;user-select:all;}
+.filter[data-v-6cb58ac5]{filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);}
+
 /* unplugin-vue-components disabled */
 /* layer: shortcuts */
 .container[data-v-f40393d6]{width:100%;}
@@ -349,76 +247,104 @@
 .filter[data-v-f40393d6]{filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);}
 .transition[data-v-f40393d6]{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
 
-/* unplugin-vue-components disabled */.class-editor[data-v-c37f7424] {
-  padding: 20px;
-  height: calc(100vh - 60px);
+/* unplugin-vue-components disabled *//* ER 图布局样式 */
+/* AntV X6 图形编辑器公共样式 */
+/* 用于 ER、UML、BPMN 等布局的共享样式 */
+/* 通用布局容器 */
+/* 工具栏样式 */
+/* 图形容器样式 */
+/* 表单项样式 */
+/* 卡片样式 */
+/* 滚动条样式 */
+/* 编辑器容器样式 */
+.er-layout[data-v-6cb58ac5] {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-height: 400px;
+}
+.er-layout .toolbar[data-v-6cb58ac5] {
+  padding: 12px;
+  background: var(--n-color-embedded);
+  border-bottom: 1px solid var(--c-border);
+  flex-shrink: 0;
+}
+.er-layout .graph-container[data-v-6cb58ac5] {
+  flex: 1;
+  position: relative;
+  min-height: 300px;
+  width: 100%;
+  border: 1px solid var(--c-border);
+  overflow: hidden;
+}
+.er-layout .graph-container[data-v-6cb58ac5] .x6-graph,
+.er-layout .graph-container[data-v-6cb58ac5] .x6-graph-svg {
+  width: 100% !important;
+  height: 100% !important;
+  display: block;
+}
+.er-layout .graph-container[data-v-6cb58ac5] .x6-graph-svg-stage {
+  outline: none;
+}
+.er-layout .table-editor[data-v-6cb58ac5] {
+  height: 100%;
   overflow-y: auto;
+  padding: 0 4px;
 }
-.section[data-v-c37f7424] {
-  max-height: 300px;
+.er-layout .table-editor[data-v-6cb58ac5]::-webkit-scrollbar {
+  width: 6px;
+}
+.er-layout .table-editor[data-v-6cb58ac5]::-webkit-scrollbar-thumb {
+  background: var(--n-scrollbar-color);
+  border-radius: 3px;
+}
+.er-layout .table-editor .fields-container[data-v-6cb58ac5] {
+  max-height: calc(100vh - 400px);
   overflow-y: auto;
-  padding-right: 4px;
 }
-.section[data-v-c37f7424]::-webkit-scrollbar {
+.er-layout .table-editor .fields-container[data-v-6cb58ac5]::-webkit-scrollbar {
   width: 6px;
 }
-.section[data-v-c37f7424]::-webkit-scrollbar-thumb {
-  background: #d4d4d4;
+.er-layout .table-editor .fields-container[data-v-6cb58ac5]::-webkit-scrollbar-thumb {
+  background: var(--n-scrollbar-color);
   border-radius: 3px;
 }
-.section-header[data-v-c37f7424] {
+.er-layout .table-editor .fields-container .field-card[data-v-6cb58ac5] {
+  margin-bottom: 16px;
+}
+.er-layout .table-editor .fields-container .field-card .field-header[data-v-6cb58ac5] {
   display: flex;
   justify-content: space-between;
   align-items: center;
+  font-size: 13px;
+  font-weight: 500;
 }
-.item[data-v-c37f7424] {
-  margin-bottom: 8px;
+.er-layout .table-editor .fields-container .field-card[data-v-6cb58ac5] .n-card-header {
+  padding: 10px 16px 8px;
 }
-.section .n-card[data-v-c37f7424] {
-  border: 1px solid #e8e8e8;
+.er-layout .table-editor .fields-container .field-card[data-v-6cb58ac5] .n-card__content {
+  padding: 12px 16px 16px;
 }
-.section .n-card-header[data-v-c37f7424] {
-  padding: 8px 12px;
-  background: #fafafa;
-  border-bottom: 1px solid #e8e8e8;
+.er-layout .table-editor .fields-container[data-v-6cb58ac5] .n-select {
+  min-width: 140px;
 }
-.section .n-card__content[data-v-c37f7424] {
-  padding: 12px;
+.er-layout .table-editor .fields-container[data-v-6cb58ac5] .n-select .n-select-menu {
+  max-height: 200px;
+  z-index: 9999;
 }
-.section .n-form-item[data-v-c37f7424] {
-  margin-bottom: 0;
+.er-layout .table-editor .fields-container .n-form-item[data-v-6cb58ac5] {
+  margin-bottom: 8px;
 }
-.section .n-form-item-label[data-v-c37f7424] {
+.er-layout .table-editor .fields-container .n-form-item .n-form-item-label[data-v-6cb58ac5] {
   font-size: 12px;
-  margin-bottom: 4px;
   color: #666;
+  margin-bottom: 4px;
+  white-space: nowrap;
 }
-/* unplugin-vue-components disabled */
-/* layer: shortcuts */
-.container[data-v-c37f7424]{width:100%;}
-@media (min-width: 640px){
-.container[data-v-c37f7424]{max-width:640px;}
-}
-@media (min-width: 768px){
-.container[data-v-c37f7424]{max-width:768px;}
-}
-@media (min-width: 1024px){
-.container[data-v-c37f7424]{max-width:1024px;}
-}
-@media (min-width: 1280px){
-.container[data-v-c37f7424]{max-width:1280px;}
-}
-@media (min-width: 1536px){
-.container[data-v-c37f7424]{max-width:1536px;}
+.er-layout .table-editor .fields-container[data-v-6cb58ac5] .n-input {
+  min-width: 100px;
 }
-/* layer: default */
-.visible[data-v-c37f7424]{visibility:visible;}
-.grid[data-v-c37f7424]{display:grid;}
-.block[data-v-c37f7424]{display:block;}
-.flex[data-v-c37f7424]{display:flex;}
-.select-all[data-v-c37f7424]{-webkit-user-select:all;user-select:all;}
-.border[data-v-c37f7424]{border-width:1px;}
-
 /* unplugin-vue-components disabled *//* UML 类图布局样式 */
 /* AntV X6 图形编辑器公共样式 */
 /* 用于 ER、UML、BPMN 等布局的共享样式 */
@@ -538,31 +464,107 @@
 .transition[data-v-5fe2995d]{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
 
 /* unplugin-vue-components disabled */
-.c-antv-container[data-v-1a860057] {
-    width: 100%;
-    height: 100%;
-}
+/* layer: default */
+.visible[data-v-fc8f213e]{visibility:visible;}
+.end-1[data-v-fc8f213e]{inset-inline-end:0.25rem;}
+.end-2[data-v-fc8f213e]{inset-inline-end:0.5rem;}
+.start-1[data-v-fc8f213e]{inset-inline-start:0.25rem;}
+.grid[data-v-fc8f213e]{display:grid;}
+.block[data-v-fc8f213e]{display:block;}
+.rounded[data-v-fc8f213e]{border-radius:0.25rem;}
+.transition[data-v-fc8f213e]{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;}
 
 /* unplugin-vue-components disabled */
 /* layer: shortcuts */
-.container[data-v-1a860057]{width:100%;}
+.container[data-v-4e8f219f]{width:100%;}
 @media (min-width: 640px){
-.container[data-v-1a860057]{max-width:640px;}
+.container[data-v-4e8f219f]{max-width:640px;}
 }
 @media (min-width: 768px){
-.container[data-v-1a860057]{max-width:768px;}
+.container[data-v-4e8f219f]{max-width:768px;}
 }
 @media (min-width: 1024px){
-.container[data-v-1a860057]{max-width:1024px;}
+.container[data-v-4e8f219f]{max-width:1024px;}
 }
 @media (min-width: 1280px){
-.container[data-v-1a860057]{max-width:1280px;}
+.container[data-v-4e8f219f]{max-width:1280px;}
 }
 @media (min-width: 1536px){
-.container[data-v-1a860057]{max-width:1536px;}
+.container[data-v-4e8f219f]{max-width:1536px;}
 }
 /* layer: default */
-.visible[data-v-1a860057]{visibility:visible;}
-.grid[data-v-1a860057]{display:grid;}
-.select-all[data-v-1a860057]{-webkit-user-select:all;user-select:all;}
+.visible[data-v-4e8f219f]{visibility:visible;}
+.grid[data-v-4e8f219f]{display:grid;}
+.block[data-v-4e8f219f]{display:block;}
+.select-all[data-v-4e8f219f]{-webkit-user-select:all;user-select:all;}
+
+/* unplugin-vue-components disabled */
+/* layer: shortcuts */
+.container[data-v-c37f7424]{width:100%;}
+@media (min-width: 640px){
+.container[data-v-c37f7424]{max-width:640px;}
+}
+@media (min-width: 768px){
+.container[data-v-c37f7424]{max-width:768px;}
+}
+@media (min-width: 1024px){
+.container[data-v-c37f7424]{max-width:1024px;}
+}
+@media (min-width: 1280px){
+.container[data-v-c37f7424]{max-width:1280px;}
+}
+@media (min-width: 1536px){
+.container[data-v-c37f7424]{max-width:1536px;}
+}
+/* layer: default */
+.visible[data-v-c37f7424]{visibility:visible;}
+.grid[data-v-c37f7424]{display:grid;}
+.block[data-v-c37f7424]{display:block;}
+.flex[data-v-c37f7424]{display:flex;}
+.select-all[data-v-c37f7424]{-webkit-user-select:all;user-select:all;}
+.border[data-v-c37f7424]{border-width:1px;}
 
+/* unplugin-vue-components disabled */.class-editor[data-v-c37f7424] {
+  padding: 20px;
+  height: calc(100vh - 60px);
+  overflow-y: auto;
+}
+.section[data-v-c37f7424] {
+  max-height: 300px;
+  overflow-y: auto;
+  padding-right: 4px;
+}
+.section[data-v-c37f7424]::-webkit-scrollbar {
+  width: 6px;
+}
+.section[data-v-c37f7424]::-webkit-scrollbar-thumb {
+  background: #d4d4d4;
+  border-radius: 3px;
+}
+.section-header[data-v-c37f7424] {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.item[data-v-c37f7424] {
+  margin-bottom: 8px;
+}
+.section .n-card[data-v-c37f7424] {
+  border: 1px solid #e8e8e8;
+}
+.section .n-card-header[data-v-c37f7424] {
+  padding: 8px 12px;
+  background: #fafafa;
+  border-bottom: 1px solid #e8e8e8;
+}
+.section .n-card__content[data-v-c37f7424] {
+  padding: 12px;
+}
+.section .n-form-item[data-v-c37f7424] {
+  margin-bottom: 0;
+}
+.section .n-form-item-label[data-v-c37f7424] {
+  font-size: 12px;
+  margin-bottom: 4px;
+  color: #666;
+}