@apform-ui/core 1.0.2 → 1.3.0

package/dist/stories/AppIcon.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/vue3';
+import { default as AppIcon } from '../components/AppIcon/AppIcon.vue';
+declare const meta: Meta<typeof AppIcon>;
+export default meta;
+type Story = StoryObj<typeof AppIcon>;
+export declare const Basic: Story;
+export declare const Sizes: Story;
+export declare const Colors: Story;
+export declare const AllIcons: Story;

package/dist/stories/ApprovalCard.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/vue3';
+import { default as ApprovalCard } from '../components/Chat/ApprovalCard/ApprovalCard.vue';
+declare const meta: Meta<typeof ApprovalCard>;
+export default meta;
+type Story = StoryObj<typeof ApprovalCard>;
+export declare const Basic: Story;
+export declare const Dangerous: Story;
+export declare const WithFields: Story;

package/dist/stories/Composer.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, StoryObj } from '@storybook/vue3';
+import { default as Composer } from '../components/Chat/Composer/Composer.vue';
+declare const meta: Meta<typeof Composer>;
+export default meta;
+type Story = StoryObj<typeof Composer>;
+export declare const Basic: Story;
+export declare const WithFileUpload: Story;
+export declare const Disabled: Story;
+export declare const WithWebSocketStatus: Story;

package/dist/stories/MessageBubble.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/vue3';
+import { default as MessageBubble } from '../components/Chat/MessageBubble/MessageBubble.vue';
+declare const meta: Meta<typeof MessageBubble>;
+export default meta;
+type Story = StoryObj<typeof MessageBubble>;
+export declare const UserMessage: Story;
+export declare const AssistantMessage: Story;
+export declare const WithThinking: Story;
+export declare const Failed: Story;
+export declare const WaitingInput: Story;

package/dist/stories/RunStatusBar.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/vue3';
+import { default as RunStatusBar } from '../components/Chat/RunStatusBar/RunStatusBar.vue';
+declare const meta: Meta<typeof RunStatusBar>;
+export default meta;
+type Story = StoryObj<typeof RunStatusBar>;
+export declare const Running: Story;
+export declare const Completed: Story;
+export declare const Failed: Story;

package/dist/stories/StatusTag.stories.d.ts

@@ -0,0 +1,8 @@
+import { Meta, StoryObj } from '@storybook/vue3';
+import { default as StatusTag } from '../components/StatusTag/StatusTag.vue';
+declare const meta: Meta<typeof StatusTag>;
+export default meta;
+type Story = StoryObj<typeof StatusTag>;
+export declare const AllStatuses: Story;
+export declare const Sizes: Story;
+export declare const CustomStatus: Story;

package/dist/stories/useConfirm.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, StoryObj } from '@storybook/vue3';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Basic: Story;

package/dist/stories/useMessage.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, StoryObj } from '@storybook/vue3';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj;
+export declare const Basic: Story;

package/dist/tokens/index.d.ts

@@ -0,0 +1,139 @@
+/**
+ * @apform-ui/core 设计令牌
+ *
+ * CSS 变量通过 import './tokens.css' 和 './design-tokens.css' 引入
+ * 此文件导出令牌常量供 JS/TS 使用
+ */
+/** 主色 */
+export declare const COLORS: {
+    readonly primary: "#0060A2";
+    readonly primaryHover: "#4581E9";
+    readonly primaryLight: "#4581E9";
+    readonly primaryLighter: "#EEF5FF";
+    readonly primaryDark: "#0060A2";
+    readonly success: "#26A036";
+    readonly warning: "#F09700";
+    readonly danger: "#E50113";
+    readonly info: "#4581E9";
+};
+/** 文字色 */
+export declare const TEXT_COLORS: {
+    readonly title: "#303133";
+    readonly primary: "#333333";
+    readonly regular: "#606266";
+    readonly secondary: "#666666";
+    readonly muted: "#909399";
+    readonly placeholder: "#969FA8";
+    readonly disabled: "#C0C4CC";
+    readonly inverse: "#FFFFFF";
+};
+/** 字号（与 CSS --font-size-* 对齐） */
+export declare const FONT_SIZE: {
+    readonly 10: "10px";
+    readonly 11: "11px";
+    readonly 12: "12px";
+    readonly 13: "13px";
+    readonly 14: "14px";
+    readonly 15: "15px";
+    readonly 16: "16px";
+    readonly 18: "18px";
+    readonly 20: "20px";
+    readonly 22: "22px";
+    readonly 24: "24px";
+    readonly 28: "28px";
+};
+/** 间距 */
+export declare const SPACING: {
+    readonly xs: "4px";
+    readonly sm: "8px";
+    readonly md: "16px";
+    readonly lg: "24px";
+    readonly xl: "32px";
+    readonly '2xl': "48px";
+    readonly '3xl': "64px";
+    readonly 10: "10px";
+    readonly 12: "12px";
+    readonly 20: "20px";
+};
+/**
+ * 控件高度阶梯
+ * 全仓统计：32 > 28 > 24 > 40/44/48/60
+ */
+export declare const CONTROL_HEIGHT: {
+    readonly xs: "24px";
+    readonly sm: "28px";
+    readonly md: "32px";
+    readonly lg: "40px";
+    readonly xl: "44px";
+};
+/** 布局高度 */
+export declare const LAYOUT_HEIGHT: {
+    readonly header: "56px";
+    readonly conversationHeader: "68px";
+    readonly dialogFooter: "60px";
+    readonly toolbar: "48px";
+    readonly tabs: "40px";
+    readonly listRow: "48px";
+};
+/** 图标尺寸 */
+export declare const ICON_SIZE: {
+    readonly xs: "12px";
+    readonly sm: "14px";
+    readonly md: "16px";
+    readonly lg: "20px";
+    readonly xl: "24px";
+};
+/** 页面边距 */
+export declare const PAGE: {
+    readonly paddingX: "24px";
+    readonly paddingY: "24px";
+    readonly headerPaddingTop: "28px";
+    readonly sidebarWidth: "240px";
+    readonly sidebarWidthCollapsed: "64px";
+};
+/** 圆角 */
+export declare const BORDER_RADIUS: {
+    readonly sm: "2px";
+    readonly md: "4px";
+    readonly 6: "6px";
+    readonly 8: "8px";
+    readonly lg: "10px";
+    readonly xl: "12px";
+    readonly full: "999px";
+};
+/** 表单布局 */
+export declare const FORM: {
+    readonly fieldWidth: "220px";
+    readonly labelWidth: "96px";
+    readonly fieldGap: "6px";
+};
+/** 头像尺寸 */
+export declare const AVATAR_SIZE: {
+    readonly sm: "24px";
+    readonly md: "32px";
+    readonly lg: "40px";
+    readonly xl: "48px";
+};
+/** 阴影 */
+export declare const SHADOWS: {
+    readonly sm: "0 1px 2px rgba(0, 0, 0, 0.05)";
+    readonly md: "0 4px 12px rgba(0, 0, 0, 0.08)";
+    readonly lg: "0 8px 24px rgba(0, 0, 0, 0.12)";
+};
+/** 动画时长 */
+export declare const DURATION: {
+    readonly fast: "0.15s";
+    readonly normal: "0.25s";
+    readonly slow: "0.35s";
+};
+/** Z-Index 层级 */
+export declare const Z_INDEX: {
+    readonly dropdown: 1000;
+    readonly sticky: 1020;
+    readonly fixed: 1030;
+    readonly modalBackdrop: 1040;
+    readonly modal: 1050;
+    readonly popover: 1060;
+    readonly tooltip: 1070;
+    readonly toast: 1080;
+};

package/dist/types/chat.d.ts

@@ -0,0 +1,121 @@
+/**
+ * @apform-ui/core — 对话组件类型定义
+ *
+ * 从 workflow-agent-chat 和 ai/app 项目提取的通用类型。
+ * 去除了业务特定的 store 依赖，保留纯数据结构。
+ */
+export type MessageRole = 'user' | 'assistant' | 'system';
+export type MessageStatus = 'PENDING' | 'RUNNING' | 'WAITING_INPUT' | 'COMPLETED' | 'FAILED' | 'CANCELLED';
+export interface Message {
+    id: string;
+    role: MessageRole;
+    content: string;
+    status: MessageStatus;
+    createdAt: string;
+    thinking?: string;
+    tip?: string;
+    toolCalls?: ToolCallInfo[];
+    documentSummaries?: MessageDocumentSummary[];
+    workflowExecution?: WorkflowExecution;
+    attachments?: MessageAttachment[];
+    runtimeExecutionId?: string | null;
+}
+export interface MessageAttachment {
+    id: string;
+    filename: string;
+    mimetype: string;
+    size?: number;
+    excerpt?: string | null;
+    url?: string;
+    createdAt?: string;
+}
+export interface ToolCallInfo {
+    id?: string;
+    name: string;
+    arguments: Record<string, unknown>;
+    result?: unknown;
+    error?: string;
+}
+export interface MessageDocumentSummary {
+    documentId: string;
+    filename: string;
+    summary: string;
+    pageCount?: number;
+}
+export interface WorkflowExecution {
+    executionId: string;
+    workflowId: string;
+    workflowName: string;
+    status: string;
+    nodeRecords?: WorkflowNodeRecord[];
+    durationMs?: number;
+    error?: string;
+}
+export interface WorkflowNodeRecord {
+    nodeId: string;
+    nodeName: string;
+    nodeType: string;
+    status: string;
+    startedAt?: string;
+    finishedAt?: string;
+    durationMs?: number;
+}
+export type RunStatus = 'RUNNING' | 'COMPLETED' | 'FAILED' | 'WAITING_INPUT' | 'CANCELLED';
+export interface RunStatusView {
+    runId: string;
+    sessionId: string;
+    agentId: string;
+    runtimeExecutionId: string | null;
+    status: RunStatus;
+    errorMessage: string | null;
+    waiting: WaitingPayload | null;
+    startedAt: string;
+    finishedAt: string | null;
+}
+export interface WaitingPayload {
+    prompt: string;
+    fields: WaitingField[];
+    actions: WaitingAction[];
+    dangerous: boolean;
+}
+export interface WaitingField {
+    key: string;
+    label: string;
+    type: string;
+    options: string[];
+}
+export interface WaitingAction {
+    action: string;
+    label: string;
+    style: string;
+}
+export interface Session {
+    id: string;
+    title: string;
+    agentId?: string | null;
+    agentName?: string | null;
+    status: string;
+    createdAt: string;
+    updatedAt: string;
+}
+export interface Agent {
+    id: string;
+    slug: string;
+    name: string;
+    description: string;
+    icon: string;
+    supportedInputs: string[];
+    hitlCapable: boolean;
+    version: string;
+    updatedAt: string;
+    published: boolean;
+}
+export interface PendingAttachment {
+    id: string;
+    filename: string;
+    mimetype: string;
+    size: number;
+    status: 'uploading' | 'done' | 'error';
+    error?: string;
+    previewUrl?: string;
+}

package/dist/types/index.d.ts

@@ -0,0 +1 @@
+export * from './chat';

package/dist/utils/attachmentKind.d.ts

@@ -0,0 +1,7 @@
+import { MessageAttachment } from '../types';
+export declare function isImage(att: MessageAttachment): boolean;
+export declare function isPdf(att: MessageAttachment): boolean;
+export declare function isOffice(att: MessageAttachment): boolean;
+export declare function isPreviewable(att: MessageAttachment): boolean;
+export declare function fileKind(att: MessageAttachment): string;
+export declare function formatSize(size?: number): string;

package/dist/utils/iconRegistry.d.ts

@@ -0,0 +1,7 @@
+import { IconifyIcon } from '@iconify/vue';
+/** 图标名称 → Iconify 图标对象映射（AppIcon 唯一合法来源） */
+export declare const ICON_MAP: Record<string, IconifyIcon>;
+/** 已注册图标名称列表（kebab-case） */
+export declare const APP_ICON_NAMES: readonly string[];
+export type AppIconName = keyof typeof ICON_MAP;
+export declare function isRegisteredAppIcon(name: string): name is AppIconName;

package/dist/utils/index.d.ts

@@ -0,0 +1,6 @@
+export { ICON_MAP, APP_ICON_NAMES, isRegisteredAppIcon } from './iconRegistry';
+export type { AppIconName } from './iconRegistry';
+export { DEFAULT_PAGE_SIZE, PAGE_SIZE_OPTIONS, PAGINATION_LAYOUT } from './pagination';
+export type { PageSizeOption } from './pagination';
+export { resolveApiErrorMessage } from './resolveApiErrorMessage';
+export type { ApiError } from './resolveApiErrorMessage';

package/dist/utils/pagination.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @apform-ui/core 分页统一常量
+ */
+export declare const DEFAULT_PAGE_SIZE = 10;
+export declare const PAGE_SIZE_OPTIONS: readonly [10, 20, 50];
+export type PageSizeOption = (typeof PAGE_SIZE_OPTIONS)[number];
+/** Element Plus pagination 统一 layout */
+export declare const PAGINATION_LAYOUT = "total, sizes, prev, pager, next";

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.0.2",
+  "version": "1.3.0",
   "type": "module",
   "author": "yangdongnan",
   "license": "MIT",
@@ -35,6 +35,7 @@
     },
     "./tokens.css": "./src/tokens/tokens.css",
     "./design-tokens.css": "./src/tokens/design-tokens.css",
+    "./styles/element-override.css": "./styles/element-override.css",
     "./theme/*": "./src/theme/*",
     "./styles/*": "./styles/*"
   },
@@ -56,17 +57,21 @@
     "prepublishOnly": "pnpm run build"
   },
   "peerDependencies": {
-    "vue": "^3.5.0",
-    "element-plus": "2.14.2"
+    "element-plus": "2.14.2",
+    "vue": "^3.5.0"
   },
   "dependencies": {
+    "@element-plus/icons-vue": "^2.3.2",
+    "@iconify-icons/ep": "^1.2.0",
     "@iconify/vue": "^5.0.0",
-    "@iconify-icons/ep": "^1.2.0"
+    "dompurify": "^3.4.14",
+    "marked": "^18.0.11"
   },
   "devDependencies": {
     "@types/node": "^26.0.1",
     "@vitejs/plugin-vue": "^5.2.3",
     "@vue/test-utils": "^2.4.6",
+    "element-plus": "2.14.2",
     "jsdom": "^26.0.0",
     "sass-embedded": "^1.100.0",
     "typescript": "~5.7.3",
@@ -74,7 +79,6 @@
     "vite-plugin-dts": "^5.0.3",
     "vitest": "^3.2.1",
     "vue": "^3.5.13",
-    "vue-tsc": "^2.2.8",
-    "element-plus": "2.14.2"
+    "vue-tsc": "^2.2.8"
   }
 }

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;
 }