@apform-ui/core 1.1.0 → 1.4.0

package/dist/utils/resolveApiErrorMessage.d.ts

@@ -0,0 +1,22 @@
+/**
+ * resolveApiErrorMessage — API 错误消息标准化
+ *
+ * 将各种格式的 API 错误转换为人类可读的错误消息。
+ * 来自 editor 项目，在 flow/ai 项目中有类似但不一致的实现。
+ *
+ * 用法：
+ *   try {
+ *     await apiCall()
+ *   } catch (e) {
+ *     msg.error(resolveApiErrorMessage(e))
+ *   }
+ */
+export interface ApiError {
+    code?: string;
+    message?: string;
+    errors?: Record<string, string[]>;
+}
+/**
+ * 从错误对象中提取可读的错误消息
+ */
+export declare function resolveApiErrorMessage(error: unknown): string;

package/dist/utils/textParser.d.ts

@@ -0,0 +1,20 @@
+/**
+ * 文本解析工具 — Markdown + 代码块分割
+ *
+ * 从 workflow-agent-chat/frontend/src/utils/textParser.ts 提取。
+ * 将消息正文拆成文本 / 代码块 / artifact 片段。
+ */
+export interface TextPart {
+    type: 'text' | 'code' | 'artifact';
+    content: string;
+    language?: string;
+    artifactType?: 'code' | 'json' | 'html' | 'form';
+}
+/**
+ * 将消息正文拆成文本 / 代码块 / artifact 片段。
+ */
+export declare function splitTextAndCodeBlocks(content: string): TextPart[];
+/**
+ * Markdown → 安全 HTML。
+ */
+export declare function renderMarkdown(content: string): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apform-ui/core",
-  "version": "1.1.0",
+  "version": "1.4.0",
   "type": "module",
   "author": "yangdongnan",
   "license": "MIT",
@@ -35,6 +35,8 @@
     },
     "./tokens.css": "./src/tokens/tokens.css",
     "./design-tokens.css": "./src/tokens/design-tokens.css",
+    "./style.css": "./dist/apform-ui.css",
+    "./styles/element-override.css": "./styles/element-override.css",
     "./theme/*": "./src/theme/*",
     "./styles/*": "./styles/*"
   },

package/src/tokens/index.ts

@@ -30,6 +30,22 @@ export const TEXT_COLORS = {
   inverse: '#FFFFFF',
 } as const
 
+/** 字号（与 CSS --font-size-* 对齐） */
+export const FONT_SIZE = {
+  10: '10px',
+  11: '11px',
+  12: '12px',
+  13: '13px',
+  14: '14px',
+  15: '15px',
+  16: '16px',
+  18: '18px',
+  20: '20px',
+  22: '22px',
+  24: '24px',
+  28: '28px',
+} as const
+
 /** 间距 */
 export const SPACING = {
   xs: '4px',
@@ -39,13 +55,75 @@ export const SPACING = {
   xl: '32px',
   '2xl': '48px',
   '3xl': '64px',
+  10: '10px',
+  12: '12px',
+  20: '20px',
+} as const
+
+/**
+ * 控件高度阶梯
+ * 全仓统计：32 > 28 > 24 > 40/44/48/60
+ */
+export const CONTROL_HEIGHT = {
+  xs: '24px',
+  sm: '28px',
+  md: '32px',
+  lg: '40px',
+  xl: '44px',
+} as const
+
+/** 布局高度 */
+export const LAYOUT_HEIGHT = {
+  header: '56px',
+  conversationHeader: '68px',
+  dialogFooter: '60px',
+  toolbar: '48px',
+  tabs: '40px',
+  listRow: '48px',
+} as const
+
+/** 图标尺寸 */
+export const ICON_SIZE = {
+  xs: '12px',
+  sm: '14px',
+  md: '16px',
+  lg: '20px',
+  xl: '24px',
+} as const
+
+/** 页面边距 */
+export const PAGE = {
+  paddingX: '24px',
+  paddingY: '24px',
+  headerPaddingTop: '28px',
+  sidebarWidth: '240px',
+  sidebarWidthCollapsed: '64px',
 } as const
 
 /** 圆角 */
 export const BORDER_RADIUS = {
   sm: '2px',
   md: '4px',
+  6: '6px',
+  8: '8px',
   lg: '10px',
+  xl: '12px',
+  full: '999px',
+} as const
+
+/** 表单布局 */
+export const FORM = {
+  fieldWidth: '220px',
+  labelWidth: '96px',
+  fieldGap: '6px',
+} as const
+
+/** 头像尺寸 */
+export const AVATAR_SIZE = {
+  sm: '24px',
+  md: '32px',
+  lg: '40px',
+  xl: '48px',
 } as const
 
 /** 阴影 */

package/src/tokens/tokens.css

@@ -16,14 +16,19 @@
   --font-family-number: 'Microsoft YaHei', '微软雅黑', 'DIN Alternate', Arial, sans-serif;
   --font-family-mono: Consolas, Monaco, monospace;
 
-  /* 字体大小 */
+  /* 字体大小 — 覆盖全仓高频字号（11/12/13/14 占绝大多数） */
+  --font-size-10: 10px;
+  --font-size-11: 11px;
   --font-size-12: 12px;
   --font-size-13: 13px;
   --font-size-14: 14px;
+  --font-size-15: 15px;
   --font-size-16: 16px;
   --font-size-18: 18px;
   --font-size-20: 20px;
+  --font-size-22: 22px;
   --font-size-24: 24px;
+  --font-size-28: 28px;
 
   /* 字重 */
   --font-weight-regular: 400;
@@ -113,14 +118,75 @@
   --overlay-bg: rgba(0, 0, 0, 0.4);
 
   /* ---------- 尺寸系统 ---------- */
-  --button-height: 32px;
-  --button-height-lg: 40px;
-  --input-height: 32px;
-  --detail-item-height: 48px;
+  /**
+   * 控件高度阶梯（全仓 height 统计：32 > 28 > 24 > 40/44/48/60）
+   * 业务代码请优先用 --control-height-*，勿再写死 px
+   */
+  --control-height-xs: 24px;
+  --control-height-sm: 28px;
+  --control-height-md: 32px;
+  --control-height-lg: 40px;
+  --control-height-xl: 44px;
+
+  /* 语义别名（兼容历史变量名） */
+  --button-height: var(--control-height-md);
+  --button-height-sm: var(--control-height-sm);
+  --button-height-lg: var(--control-height-lg);
+  --input-height: var(--control-height-md);
+  --input-height-sm: var(--control-height-sm);
+  --input-height-lg: var(--control-height-lg);
+
+  /* 列表 / 详情行 */
+  --list-row-height: 48px;
+  --detail-item-height: var(--list-row-height);
+  --table-cell-padding-y: 8px;
+
+  /* 布局高度 */
+  --header-height: 56px;
+  --conversation-header-height: 68px;
   --dialog-footer-height: 60px;
+  --toolbar-height: 48px;
+  --tabs-height: 40px;
+
+  /* 侧栏 / 页面边距 */
+  --sidebar-width: 240px;
+  --sidebar-width-collapsed: 64px;
+  --page-padding-x: 24px;
+  --page-padding-y: 24px;
+  --page-padding-bottom: var(--page-padding-y);
+  --page-header-padding-top: 28px;
+
+  /* 图标尺寸阶梯 */
+  --icon-size-xs: 12px;
+  --icon-size-sm: 14px;
+  --icon-size-md: 16px;
+  --icon-size-lg: 20px;
+  --icon-size-xl: 24px;
+
+  /* 圆角（含聊天 / Tabs 常用 6、8） */
   --border-radius-sm: 2px;
   --border-radius-md: 4px;
+  --border-radius-6: 6px;
+  --border-radius-8: 8px;
   --border-radius-lg: 10px;
+  --border-radius-xl: 12px;
+  --border-radius-full: 999px;
+
+  /* 表单布局 */
+  --form-field-width: 220px;
+  --form-label-width: 96px;
+  --form-field-gap: 6px;
+
+  /* 头像尺寸 */
+  --avatar-size-sm: 24px;
+  --avatar-size-md: 32px;
+  --avatar-size-lg: 40px;
+  --avatar-size-xl: 48px;
+
+  /* Composer / 多行输入 */
+  --composer-textarea-min-height: 96px;
+  --composer-textarea-min-height-mobile: 84px;
+  --composer-textarea-max-height: 220px;
 
   /* 间距 */
   --spacing-xs: 4px;
@@ -128,6 +194,9 @@
   --spacing-md: 16px;
   --spacing-lg: 24px;
   --spacing-xl: 32px;
+  --spacing-2xl: 48px;
+  --spacing-3xl: 64px;
   --spacing-10px: 10px;
+  --spacing-12px: 12px;
   --spacing-20px: 20px;
 }

package/styles/element-override.css

@@ -0,0 +1,155 @@
+/**
+ * Element Plus 表单 / 按钮尺寸覆盖
+ *
+ * 依赖 tokens.css 中的 --control-height-* / --button-height / --input-height。
+ * 用法：
+ *   import '@apform-ui/core/design-tokens.css'
+ *   import '@apform-ui/core/styles/element-override.css'
+ */
+
+:root {
+  --el-component-size: var(--control-height-md);
+  --el-component-size-small: var(--control-height-xs);
+  --el-component-size-large: var(--control-height-lg);
+  --el-font-size-base: var(--font-size-14);
+  --el-font-size-small: var(--font-size-12);
+  --el-font-size-large: var(--font-size-16);
+  --el-border-radius-base: var(--border-radius-sm);
+  --el-border-radius-small: var(--border-radius-sm);
+  --el-pagination-button-height: var(--input-height);
+  --el-pagination-button-width: var(--input-height);
+  --el-pagination-button-height-small: var(--control-height-xs);
+  --el-pagination-button-width-small: var(--control-height-xs);
+}
+
+/* ---------- Button ---------- */
+.el-button {
+  height: var(--button-height);
+  padding: 0 var(--spacing-md);
+  border-radius: var(--border-radius-sm);
+  font-size: var(--font-size-14);
+  font-weight: var(--font-weight-medium);
+}
+
+.el-button.el-button--small {
+  height: var(--control-height-xs);
+  padding: 0 var(--spacing-sm);
+  font-size: var(--font-size-12);
+}
+
+.el-button.el-button--large {
+  height: var(--button-height-lg);
+  padding: 0 var(--spacing-lg);
+  font-size: var(--font-size-16);
+}
+
+.el-button.is-circle {
+  width: var(--button-height);
+  height: var(--button-height);
+  padding: 0;
+  border-radius: 50%;
+}
+
+.el-button--small.is-circle {
+  width: var(--control-height-xs);
+  height: var(--control-height-xs);
+}
+
+.el-button--large.is-circle {
+  width: var(--control-height-lg);
+  height: var(--control-height-lg);
+}
+
+.el-button.is-link,
+.el-button.is-text {
+  height: auto;
+  padding: 0;
+}
+
+/* ---------- Input / Select / Date ---------- */
+.el-input:not(.el-textarea),
+.el-select,
+.el-date-editor,
+.el-cascader,
+.el-input-number {
+  --el-input-height: var(--input-height);
+}
+
+.el-input:not(.el-input--small):not(.el-input--large):not(.el-textarea) .el-input__wrapper {
+  min-height: var(--input-height);
+  box-sizing: border-box;
+}
+
+.el-input:not(.el-input--small):not(.el-input--large):not(.el-textarea) .el-input__inner {
+  height: var(--input-height);
+  line-height: var(--input-height);
+}
+
+.el-input--small:not(.el-textarea) .el-input__wrapper,
+.el-select--small .el-select__wrapper {
+  min-height: var(--control-height-md);
+  height: var(--control-height-md);
+  box-sizing: border-box;
+}
+
+.el-select:not(.el-select--small):not(.el-select--large) .el-select__wrapper {
+  min-height: var(--input-height);
+  height: var(--input-height);
+  box-sizing: border-box;
+}
+
+.el-input--large:not(.el-textarea) .el-input__wrapper,
+.el-select--large .el-select__wrapper {
+  min-height: var(--control-height-lg);
+  height: var(--control-height-lg);
+  box-sizing: border-box;
+}
+
+.el-textarea {
+  height: auto;
+  line-height: var(--line-height-normal);
+}
+
+/* ---------- Radio button group ---------- */
+.el-radio-button__inner {
+  height: var(--button-height);
+  padding: 0 15px;
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  font-size: var(--font-size-14);
+}
+
+.el-radio-button--large .el-radio-button__inner {
+  height: var(--button-height-lg);
+}
+
+/* ---------- Pagination ---------- */
+.el-pagination {
+  align-items: center;
+}
+
+.el-pagination .el-pagination__total,
+.el-pagination .el-pagination__sizes,
+.el-pagination .btn-prev,
+.el-pagination .btn-next,
+.el-pagination .el-pager li,
+.el-pagination .el-pagination__jump {
+  height: var(--input-height);
+  line-height: var(--input-height);
+  min-width: var(--input-height);
+  box-sizing: border-box;
+}
+
+.el-pagination .el-pagination__sizes .el-select .el-select__wrapper {
+  min-height: var(--input-height);
+  height: var(--input-height);
+}
+
+.el-pagination.el-pagination--small .btn-prev,
+.el-pagination.el-pagination--small .btn-next,
+.el-pagination.el-pagination--small .el-pager li {
+  height: var(--control-height-xs);
+  line-height: var(--control-height-xs);
+  min-width: var(--control-height-xs);
+}