@zerodep-dev/vue-tsx-pro-ui 0.0.0-stage → 0.1.0

package/dist/patterns/CommentThread.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommentThread.js","names":["_createVNode","_vtp_readonlyProp","_vtp_restProps","_vue_ref","_vtp_untrack","_vue_shallowRef","_mergeProps","Upload","_Fragment"],"sources":["../../src/patterns/CommentThread.tsx"],"sourcesContent":["/**\n * 留言：一串留言与回复（沟通记录、协商的逐条回应、审批时的讨论），下面是写留言的输入框。\n * 留言里可以 @ 人（Mentions）、带附件（Upload），回复只分一层：回复一条回复时仍挂在那串下面，开头写上“@作者 ”。\n *\n *   <CommentThread\n *     comments={comments}                                  // { id, author, avatar?, role?, content, time, attachments?, replies? }\n *     people={people}                                      // 可以 @ 的人（ListboxOption），留言里“@名字”按它高亮\n *     upload={(file, context) => api.upload(file, context)} // 不给时不能带附件\n *     onSend={async (draft) => await api.comment(draft)} // { content, mentions, attachments, replyTo? }；不给时只读\n *   />\n *\n * 发送：按钮或 Ctrl + Enter；onSend 返回 Promise 时按钮转圈，成功后清空，失败时保留内容并提示。\n * 留言存在哪、发出去以后怎样出现在 comments 里由应用决定（乐观更新或重新取）。\n * 时间写成相对现在（3 分钟前），悬停看完整时间。actions 给每条留言加操作（编辑、删除、标为已解决）。\n *\n * 单独的输入框用 CommentComposer（协商回复、审批意见）。\n * 部件：Root（div）、List（ul）、Item（li，可以按条计算）、Composer（CommentComposer）。\n */\nimport { Paperclip } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { onMounted, type VNodeChild } from 'vue';\nimport { Button } from '../base/Button';\nimport { Icon } from '../base/Icon';\nimport { Link } from '../base/Link';\nimport { useFormat } from '../config/lang/format';\nimport { useMessages } from '../config/lang/messages';\nimport { Avatar, initials } from '../display/Avatar';\nimport { Empty } from '../feedback/Empty';\nimport { Mentions, MentionText, type MentionsProps } from '../input/Mentions';\nimport type { ListboxOption } from '../input/list-state';\nimport { Upload, type UploadFile, type UploadHandler } from '../input/Upload';\nimport { hasContent, mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { patternsMessages } from './messages';\n\n/** 留言的一个附件 */\nexport interface CommentAttachment {\n  /** 文件名 */\n  name: string;\n  /** 地址：文件名链到它（预览、下载） */\n  url?: string;\n  /** 大小（字节） */\n  size?: number;\n}\n\n/** 一条留言 */\nexport interface CommentItem {\n  /** 标识 */\n  id: string;\n  /** 作者 */\n  author: string;\n  /** 作者的头像地址；没有时显示首字母 */\n  avatar?: string;\n  /** 作者的身份（岗位、“供应商”标记），在名字后面 */\n  role?: VNodeChild;\n  /** 内容：文字，“@名字”按 people 高亮 */\n  content: string;\n  /** 发表的时间（ISO） */\n  time: string;\n  /** 改过 */\n  edited?: boolean;\n  /** 附件 */\n  attachments?: readonly CommentAttachment[];\n  /** 内容下面的补充（逐条回应的“采纳 / 不采纳”、引用的字段对比） */\n  extra?: VNodeChild;\n  /** 回复（只分一层，回复里的 replies 不显示） */\n  replies?: readonly CommentItem[];\n}\n\n/** 写好的一条留言：onSend 收到它 */\nexport interface CommentDraft {\n  /** 内容（去掉首尾空白） */\n  content: string;\n  /** 内容里 @ 到的人（people 的 value） */\n  mentions: string[];\n  /** 上传完成的附件 */\n  attachments: UploadFile[];\n  /** 回复哪一串（那一串第一条留言的 id）；新的一串没有 */\n  replyTo?: string;\n}\n\n/** 写留言的人：输入框前面的头像 */\nexport interface CommentAuthor {\n  /** 名字 */\n  name: string;\n  /** 头像地址 */\n  avatar?: string;\n}\n\n/** 未声明的属性落到外层 div 上 */\nexport interface CommentComposerProps extends PartProps<'div'> {\n  /** 发送：返回 Promise 时等它完成，成功后清空；失败（reject）时保留内容并提示 */\n  onSend: (draft: Omit<CommentDraft, 'replyTo'>) => unknown;\n  /** 取消（回复时）：有它时显示取消按钮，按 Esc 也是取消 */\n  onCancel?: () => void;\n  /** 可以 @ 的人 */\n  people?: readonly ListboxOption[];\n  /** 上传附件；不给时不能带附件 */\n  upload?: UploadHandler;\n  /** 写留言的人：输入框前面的头像 */\n  author?: CommentAuthor;\n  /** 一开始的内容（回复时的“@作者 ”） */\n  initialText?: string;\n  /** 挂载后聚焦输入框（点了回复） */\n  autofocus?: boolean;\n  /** 输入框的提示，默认取文案 */\n  placeholder?: string;\n  /** 输入框（Mentions）的部件属性；它的 aria-label 是输入框的名称 */\n  propsMentions?: Partial<MentionsProps>;\n}\n\n/** CommentThread、CommentComposer 的样式 */\nexport const commentStyles = css.create({\n  root: { display: 'grid', gap: '_lg' },\n  list: { display: 'grid', gap: '_lg', margin: 0, padding: 0, listStyle: 'none' },\n  // 头像一列、内容一列\n  item: { display: 'grid', gridTemplateColumns: 'auto 1fr', columnGap: '_sm', alignItems: 'start' },\n  body: { display: 'grid', gap: '_xs', minWidth: 0 },\n  header: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    alignItems: 'center',\n    columnGap: '_sm',\n    rowGap: '_xs',\n  },\n  author: { fontWeight: '_semibold', color: '_text' },\n  meta: { fontSize: '_sm', color: '_textMuted' },\n  content: { color: '_text' },\n  attachments: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    columnGap: '_md',\n    rowGap: '_xs',\n    margin: 0,\n    padding: 0,\n    listStyle: 'none',\n    fontSize: '_sm',\n  },\n  attachment: { display: 'inline-flex', alignItems: 'center', gap: '0.25em' },\n  actions: { display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: '_sm', fontSize: '_sm' },\n  // 回复：缩进在内容列里，左边一条竖线\n  replies: {\n    display: 'grid',\n    gap: '_md',\n    margin: 0,\n    marginBlockStart: '_xs',\n    paddingInlineStart: '_md',\n    listStyle: 'none',\n    borderInlineStartWidth: '_sm',\n    borderInlineStartStyle: 'solid',\n    borderInlineStartColor: '_borderMuted',\n  },\n  composer: {\n    display: 'grid',\n    gridTemplateColumns: 'auto 1fr',\n    columnGap: '_sm',\n    alignItems: 'start',\n  },\n  composerNoAvatar: { gridTemplateColumns: '1fr' },\n  composerMain: { display: 'grid', gap: '_xs', minWidth: 0 },\n  composerFooter: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    gap: '_xs',\n  },\n  composerTools: { display: 'flex', alignItems: 'center', gap: '_sm' },\n  hint: { fontSize: '_xs', color: '_textMuted' },\n  error: { fontSize: '_sm', color: '_dangerText' },\n});\n\n/** 头像：有图片用图片，没有时是名字的首字母（名字就在旁边，头像只是装饰） */\nconst authorAvatar = (name: string, avatar: string | undefined) => (\n  <Avatar src={avatar} fallback={initials(name)} size=\"sm\" />\n);\n\n/** 写留言的输入框：提及、附件、发送 */\nexport const CommentComposer = _component(\n  ({\n    onSend,\n    onCancel,\n    people = [],\n    upload,\n    author,\n    initialText = '',\n    autofocus = false,\n    placeholder,\n    propsMentions,\n    ...rest\n  }: CommentComposerProps) => {\n    const messages = useMessages('patterns', patternsMessages);\n    // 只取一开始的值：回复时的“@作者 ”，之后由用户编辑\n    let text = _state(_untrack(initialText));\n    let mentions = _state<string[]>([]);\n    let files = _state<UploadFile[]>([]);\n    let attaching = _state(false);\n    let sending = _state(false);\n    let failed = _state(false);\n    let root = _state.raw<HTMLElement | null>(null);\n\n    onMounted(() => {\n      if (!autofocus) return;\n      const input = root?.querySelector('textarea');\n      input?.focus();\n      input?.setSelectionRange(input.value.length, input.value.length);\n    });\n\n    // 还在上传的附件：等它完成才能发送\n    const uploading = () =>\n      files.some((file) => file.status === 'uploading' || file.status === 'selected');\n    const sendable = () => text.trim() !== '' && !uploading() && !sending;\n\n    async function send() {\n      if (!sendable()) return;\n      sending = true;\n      failed = false;\n      try {\n        await onSend({\n          content: text.trim(),\n          mentions,\n          attachments: files.filter((file) => file.status === 'done'),\n        });\n        text = '';\n        files = [];\n        attaching = false;\n      } catch {\n        failed = true;\n      } finally {\n        sending = false;\n      }\n    }\n\n    function onKeydown(event: KeyboardEvent) {\n      if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) {\n        event.preventDefault();\n        void send();\n      } else if (event.key === 'Escape' && onCancel && !event.defaultPrevented) {\n        // 提及列表打开时 Esc 先关列表（它会 preventDefault）\n        onCancel();\n      }\n    }\n\n    return () => (\n      <div\n        {...mergeAttrs<'div'>(\n          { sx: [commentStyles.composer, !author && commentStyles.composerNoAvatar] },\n          rest,\n          { ref: _toRef(root) },\n        )}\n      >\n        {author && authorAvatar(author.name, author.avatar)}\n        <div {...css.attrs(commentStyles.composerMain)}>\n          <Mentions\n            {...mergePartProps<MentionsProps>(\n              {\n                rows: 2,\n                maxRows: 10,\n                placeholder: placeholder ?? messages.commentPlaceholder,\n                'aria-label': messages.comments,\n              },\n              propsMentions,\n              { items: people, onKeydown },\n            )}\n            _value={text}\n            _mentions={mentions}\n          />\n          {upload && attaching && <Upload _value={files} upload={upload} multiple />}\n          {failed && (\n            <div role=\"alert\" {...css.attrs(commentStyles.error)}>\n              {messages.commentSendFailed}\n            </div>\n          )}\n          <div {...css.attrs(commentStyles.composerFooter)}>\n            <div {...css.attrs(commentStyles.composerTools)}>\n              {upload && (\n                <Button\n                  variant=\"ghost\"\n                  tone=\"neutral\"\n                  size=\"sm\"\n                  icon={Paperclip}\n                  aria-pressed={attaching}\n                  onClick={() => (attaching = !attaching)}\n                >\n                  {files.length > 0\n                    ? `${messages.commentAttach} ${files.length}`\n                    : messages.commentAttach}\n                </Button>\n              )}\n              <span {...css.attrs(commentStyles.hint)}>{messages.commentSendHint}</span>\n            </div>\n            <div {...css.attrs(commentStyles.composerTools)}>\n              {onCancel && (\n                <Button variant=\"ghost\" tone=\"neutral\" size=\"sm\" onClick={onCancel}>\n                  {messages.commentCancel}\n                </Button>\n              )}\n              <Button\n                size=\"sm\"\n                loading={sending}\n                disabled={!sendable()}\n                onClick={() => void send()}\n              >\n                {messages.commentSend}\n              </Button>\n            </div>\n          </div>\n        </div>\n      </div>\n    );\n  },\n);\n\n/** 未声明的属性落到外层 div 上 */\nexport interface CommentThreadProps extends PartProps<'div'> {\n  /** 留言，旧的在前；回复在各自的 replies 里 */\n  comments: readonly CommentItem[];\n  /** 可以 @ 的人：输入框的候选，也是留言里“@名字”高亮的依据 */\n  people?: readonly ListboxOption[];\n  /** 发送一条留言或回复；不给时只读（没有输入框与回复按钮） */\n  onSend?: (draft: CommentDraft) => unknown;\n  /** 上传附件；不给时不能带附件 */\n  upload?: UploadHandler;\n  /** 当前用户：输入框前面的头像 */\n  currentUser?: CommentAuthor;\n  /** 每条留言的操作（编辑、删除、标为已解决），在回复按钮后面 */\n  actions?: (comment: CommentItem) => VNodeChild;\n  /** 没有留言时显示的内容，默认取文案 */\n  empty?: VNodeChild;\n  /** “现在”的时间戳：相对时间按它算，默认是当前时间（文档与测试里固定它） */\n  now?: number;\n  /** 列表（ul）的部件属性 */\n  propsList?: PartProps<'ul'>;\n  /** 每条留言（li）的部件属性，可以按条计算 */\n  propsItem?: PartProps<'li'> | ((comment: CommentItem) => PartProps<'li'>);\n  /** 输入框（CommentComposer）的部件属性 */\n  propsComposer?: Partial<Omit<CommentComposerProps, 'onSend'>>;\n}\n\n/** 一串留言与回复，下面是输入框 */\nexport const CommentThread = _component(\n  ({\n    comments,\n    people = [],\n    onSend,\n    upload,\n    currentUser,\n    actions,\n    empty,\n    now,\n    propsList,\n    propsItem,\n    propsComposer,\n    ...rest\n  }: CommentThreadProps) => {\n    const messages = useMessages('patterns', patternsMessages);\n    const format = useFormat();\n    // 正在回复：哪一串（第一条的 id）与回复谁\n    let replying = _state<{ thread: string; to: string } | null>(null);\n\n    const item = (comment: CommentItem, thread: CommentItem): VNodeChild => {\n      const own = typeof propsItem === 'function' ? propsItem(comment) : propsItem;\n      const top = comment === thread;\n      return (\n        <li key={comment.id} {...mergeAttrs<'li'>({ sx: commentStyles.item }, own)}>\n          {authorAvatar(comment.author, comment.avatar)}\n          <article {...css.attrs(commentStyles.body)} aria-label={comment.author}>\n            <div {...css.attrs(commentStyles.header)}>\n              <span {...css.attrs(commentStyles.author)}>{comment.author}</span>\n              {comment.role}\n              <time\n                datetime={comment.time}\n                title={format.date(comment.time, { dateStyle: 'medium', timeStyle: 'short' })}\n                {...css.attrs(commentStyles.meta)}\n              >\n                {format.relative(comment.time, { now })}\n              </time>\n              {comment.edited && (\n                <span {...css.attrs(commentStyles.meta)}>{messages.commentEdited}</span>\n              )}\n            </div>\n            <MentionText text={comment.content} options={people} sx={commentStyles.content} />\n            {comment.attachments && comment.attachments.length > 0 && (\n              <ul\n                {...css.attrs(commentStyles.attachments)}\n                aria-label={messages.commentAttachments}\n              >\n                {comment.attachments.map((file) => (\n                  <li key={file.name} {...css.attrs(commentStyles.attachment)}>\n                    <Icon icon={Paperclip} />\n                    {file.url ? <Link href={file.url}>{file.name}</Link> : file.name}\n                    {file.size != null && (\n                      <span {...css.attrs(commentStyles.meta)}>{format.fileSize(file.size)}</span>\n                    )}\n                  </li>\n                ))}\n              </ul>\n            )}\n            {comment.extra}\n            {(onSend || actions) && (\n              <div {...css.attrs(commentStyles.actions)}>\n                {onSend && (\n                  <Button\n                    variant=\"link\"\n                    tone=\"neutral\"\n                    size=\"sm\"\n                    onClick={() => (replying = { thread: thread.id, to: comment.author })}\n                  >\n                    {messages.commentReply}\n                  </Button>\n                )}\n                {actions?.(comment)}\n              </div>\n            )}\n            {top && replies(thread)}\n          </article>\n        </li>\n      );\n    };\n\n    /** 一串的回复与回复的输入框 */\n    const replies = (thread: CommentItem) => {\n      const list = thread.replies ?? [];\n      const open = replying?.thread === thread.id;\n      if (list.length === 0 && !open) return null;\n      return (\n        <>\n          {list.length > 0 && (\n            <ul\n              {...css.attrs(commentStyles.replies)}\n              aria-label={messages.commentReplies(list.length)}\n            >\n              {list.map((reply) => item(reply, thread))}\n            </ul>\n          )}\n          {open && onSend && (\n            <CommentComposer\n              {...mergePartProps<Partial<CommentComposerProps>>(\n                { people, upload, author: currentUser },\n                propsComposer,\n                {\n                  key: `${thread.id}:${replying!.to}`,\n                  initialText: `@${replying!.to} `,\n                  autofocus: true,\n                  propsMentions: {\n                    ...propsComposer?.propsMentions,\n                    'aria-label': messages.commentReplyTo(replying!.to),\n                  },\n                  onCancel: () => (replying = null),\n                },\n              )}\n              // onSend 有返回值（Promise），不经 mergePartProps：它会把 on 开头的属性当事件串起来\n              onSend={async (draft) => {\n                await onSend({ ...draft, replyTo: thread.id });\n                replying = null;\n              }}\n            />\n          )}\n        </>\n      );\n    };\n\n    return () => (\n      <div {...mergeAttrs<'div'>({ sx: commentStyles.root }, rest)}>\n        {comments.length === 0 ? (\n          hasContent(empty) ? (\n            empty\n          ) : (\n            <Empty size=\"sm\" title={messages.commentsEmpty} />\n          )\n        ) : (\n          <ul\n            {...mergeAttrs<'ul'>({ sx: commentStyles.list }, propsList)}\n            aria-label={messages.comments}\n          >\n            {comments.map((comment) => item(comment, comment))}\n          </ul>\n        )}\n        {onSend && (\n          <CommentComposer\n            {...mergePartProps<Partial<CommentComposerProps>>(\n              { people, upload, author: currentUser },\n              propsComposer,\n            )}\n            onSend={onSend}\n          />\n        )}\n      </div>\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/patterns/DataImport.d.ts

@@ -0,0 +1,72 @@
+import * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';
+import type { $ZodType } from 'zod/v4/core';
+import { type ButtonProps } from '../base/Button';
+import { type FileDropProps } from '../input/FileDrop';
+import { type FlexProps } from '../layout/Flex';
+import { type StepsProps } from '../navigation/Steps';
+import { type DataTableProps } from '../table/DataTable';
+import { type SheetTable } from '../table/sheet';
+import { type PartProps } from '../utils/props';
+/** 要导入的一个字段 */
+export interface ImportField {
+    /** 字段名：导入的行里的键 */
+    key: string;
+    /** 名称：对应列时显示，也用来自动对上文件里的同名列 */
+    label: string;
+    /** 必填：没对应上不能往下走；没有 schema 时空值算错 */
+    required?: boolean;
+    /** 文件里这一列可能的其他叫法（“料号”“Part No.”）：自动对应时也认 */
+    aliases?: readonly string[];
+    /** 值的类型（没有 schema 时）：number 把文字转成数字，转不了算错；默认 text */
+    type?: 'text' | 'number';
+    /** 预览表里这一列的宽度（px） */
+    width?: number;
+}
+/** 预览里的一行 */
+interface ImportRow {
+    /** 第几行数据（从 1 起） */
+    line: number;
+    /** 对应后的原值（字段名 → 值），就地改的是它 */
+    raw: Record<string, unknown>;
+    /** 校验通过后的值 */
+    value?: unknown;
+    /** 字段名 → 原因 */
+    errors: Record<string, string>;
+}
+/** 未声明的属性落到外层 div 上 */
+export interface DataImportProps<Row> extends PartProps<'div'> {
+    /** 要导入的字段，按显示的顺序 */
+    fields: readonly ImportField[];
+    /** 一行的 zod 对象 schema：逐行解析，错误标在格子上，onImport 拿到解析后的值 */
+    schema?: $ZodType<Row>;
+    /** 没有 schema 时的逐行校验：返回字段名 → 原因（在 required、type 的检查之后） */
+    validate?: (row: Record<string, unknown>) => Record<string, string> | null | undefined;
+    /** 读文件：返回各工作表；默认读 CSV（readCsvFile），读 Excel 传 @zerodep-dev/vue-tsx-pro-ui/xlsx 的 readXlsx */
+    parse?: (file: File) => Promise<SheetTable[]>;
+    /** 能选的文件类型，默认 .csv */
+    accept?: string;
+    /** 导入通过校验的行：返回 Promise 时按钮加载中，失败时留在预览（由调用方提示原因） */
+    onImport: (rows: Row[]) => unknown;
+    /** 下载模板：写了就在上传区旁边放“下载模板” */
+    onTemplate?: () => void;
+    /** 步骤条的部件属性 */
+    propsSteps?: Partial<StepsProps>;
+    /** 选文件区域的部件属性 */
+    propsDrop?: Partial<FileDropProps>;
+    /** 预览表（DataTable）的部件属性 */
+    propsPreview?: Partial<DataTableProps<ImportRow>>;
+    /** 按钮行的部件属性 */
+    propsActions?: Partial<FlexProps>;
+    /** 导入按钮的部件属性 */
+    propsSubmit?: Partial<ButtonProps>;
+}
+/** DataImport 的样式：root、previewTable、validIcon、invalidIcon */
+export declare const dataImportStyles: Readonly<{
+    invalidIcon: css.CompiledStyles;
+    previewTable: css.CompiledStyles;
+    root: css.CompiledStyles;
+    validIcon: css.CompiledStyles;
+}>;
+/** 数据导入：上传 → 对应列 → 校验与预览 → 导入 */
+export declare const DataImport: <Row>(props: DataImportProps<Row>) => import("@zerodep-dev/vue-tsx-pro-tsx").TsxNode;
+export {};

package/dist/patterns/DataImport.js

@@ -0,0 +1,486 @@
+import { useLang } from "../config/context.js";
+import { mergeAttrs, mergePartProps } from "../utils/props.js";
+import { Icon } from "../base/Icon.js";
+import { Badge } from "../base/Badge.js";
+import { Button } from "../base/Button.js";
+import { Small } from "../base/Text.js";
+import { Flex } from "../layout/Flex.js";
+import { ColumnTable } from "../table/ColumnTable.js";
+import { Alert } from "../feedback/Alert.js";
+import { Select } from "../input/Select.js";
+import { Steps } from "../navigation/Steps.js";
+import { FileDrop } from "../input/FileDrop.js";
+import { Switch } from "../input/Switch.js";
+import { DataTable } from "../table/DataTable.js";
+import { readCsvFile } from "../table/sheet.js";
+import { useMessages } from "../config/lang/messages.js";
+import { patternsMessages } from "./messages.js";
+import { createVNode, isVNode, mergeProps, ref, shallowRef, unref } from "vue";
+import { _component, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
+import { CircleAlert, CircleCheck, Download } from "@lucide/icons";
+import { safeParse } from "zod/v4/core";
+//#region src/patterns/DataImport.tsx
+/**
+* 数据导入：上传文件 → 对应列 → 逐行校验与预览（有错的格子就地改）→ 确认导入。批量导入零件、报价、人员这类数据用它。
+*
+*   <DataImport
+*     fields={[{ key: 'part', label: '零件号', required: true, aliases: ['料号'] }, { key: 'quantity', label: '数量', type: 'number' }]}
+*     schema={z.object({ part: z.string().min(1), quantity: z.number().int().positive() })}
+*     parse={readXlsx}                 // 读 Excel：@zerodep-dev/vue-tsx-pro-ui/xlsx；不写时读 CSV
+*     accept=".xlsx,.csv"
+*     onImport={(rows) => api.importParts(rows)}
+*   />
+*
+* - 上传：选文件或拖进来，parse 读成表（SheetTable）；几张工作表时先选一张。
+* - 对应列：按字段的 label 与 aliases 自动对上文件里的列，可以改；必填的字段没对上时不能往下走。
+* - 校验：空的格子（空字符串、只有空白）是 null，同 useForm 的约定（选填的字段在 schema 里写 .nullable()）。
+*   有 schema（zod 对象）时逐行解析，错误标在对应的格子上；没有时按 required、type（数字列要是数字）检查，
+*   也可以写 validate。有错的格子可以直接改（表格就地编辑），改完重新校验；“只看有错的行”筛出要处理的。
+* - 导入：onImport 拿到通过校验的行（schema 解析后的值）；返回 Promise 时按钮加载中，完成后显示结果。
+*
+* 部件：Root（div）、Steps、Drop（FileDrop）、Mapping（ColumnTable）、Preview（DataTable）、Actions（Flex）。
+*/
+/** 要导入的一个字段 */
+/** 预览里的一行 */
+/** 未声明的属性落到外层 div 上 */
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+/** DataImport 的样式：root、previewTable、validIcon、invalidIcon */
+var dataImportStyles = css.create({
+	root: {
+		display: "flex",
+		flexDirection: "column",
+		gap: "_lg",
+		minWidth: 0
+	},
+	previewTable: { maxHeight: "24rem" },
+	validIcon: { color: "_successText" },
+	invalidIcon: { color: "_dangerText" }
+});
+/** 文字规范化后比较：去掉空白、括号与大小写（“零件号 (必填)”也认作“零件号”） */
+var normalize = (text) => text.toLowerCase().replace(/[（(][^）)]*[）)]/g, "").replace(/[\s_*]/g, "");
+/** 按名称与别名对上文件里的列 */
+function autoMap(fields, headers) {
+	const taken = /* @__PURE__ */ new Set();
+	return Object.fromEntries(fields.map((field) => {
+		const names = [
+			field.label,
+			field.key,
+			...field.aliases ?? []
+		].map(normalize);
+		const header = headers.find((item) => !taken.has(item) && names.includes(normalize(item)));
+		if (header) taken.add(header);
+		return [field.key, header ?? null];
+	}));
+}
+/** 空值：null、空字符串 */
+var isEmpty = (value) => value == null || typeof value === "string" && value.trim() === "";
+/** 数据导入：上传 → 对应列 → 校验与预览 → 导入 */
+var DataImport = /*#__PURE__*/ _component((_props, _ctx) => {
+	const _cache = [];
+	const fields = readonlyProp(_props, "fields");
+	const schema = readonlyProp(_props, "schema");
+	const validate = readonlyProp(_props, "validate");
+	const parse = readonlyProp(_props, "parse", () => readCsvFile);
+	const accept = readonlyProp(_props, "accept", ".csv");
+	const onImport = readonlyProp(_props, "onImport");
+	const onTemplate = readonlyProp(_props, "onTemplate");
+	const propsSteps = readonlyProp(_props, "propsSteps");
+	const propsDrop = readonlyProp(_props, "propsDrop");
+	const propsPreview = readonlyProp(_props, "propsPreview");
+	const propsActions = readonlyProp(_props, "propsActions");
+	const propsSubmit = readonlyProp(_props, "propsSubmit");
+	const rest = restProps(_props, _ctx, true);
+	const messages = useMessages("patterns", patternsMessages);
+	const lang = useLang();
+	let step = ref(0);
+	let sheets = shallowRef([]);
+	let sheetName = ref(null);
+	let mapping = ref({});
+	let parseError = ref("");
+	let onlyErrors = ref(false);
+	let importing = ref(false);
+	let imported = ref(0);
+	const rows = shallowRef([]);
+	const sheet = () => sheets.value.find((item) => item.name === sheetName.value);
+	const unmapped = () => fields.value.filter((field) => field.required && !mapping.value[field.key]).map((field) => field.label);
+	async function onFiles(files) {
+		const file = files[0];
+		if (!file) return;
+		parseError.value = "";
+		try {
+			const read = (await parse.value(file)).filter((item) => item.rows.length > 0);
+			if (read.length === 0) {
+				parseError.value = messages.dataImportEmpty;
+				return;
+			}
+			sheets.value = read;
+			sheetName.value = read[0].name;
+			mapping.value = autoMap(fields.value, read[0].headers);
+			step.value = 1;
+		} catch (error) {
+			parseError.value = messages.dataImportParseFailed(error instanceof Error ? error.message : String(error));
+		}
+	}
+	function changeSheet(name) {
+		sheetName.value = name;
+		const current = sheet();
+		if (current) mapping.value = autoMap(fields.value, current.headers);
+	}
+	/** 校验一行：schema 优先；否则 required、type 与 validate */
+	function check(raw) {
+		if (schema.value) {
+			const result = safeParse(schema.value, raw);
+			if (result.success) return {
+				value: result.data,
+				errors: {}
+			};
+			const errors = {};
+			for (const issue of result.error.issues) {
+				const key = String(issue.path[0] ?? fields.value[0]?.key ?? "");
+				errors[key] ??= issue.message;
+			}
+			return { errors };
+		}
+		const errors = {};
+		const value = {};
+		for (const field of fields.value) {
+			const cell = raw[field.key];
+			if (isEmpty(cell)) {
+				if (field.required) errors[field.key] = lang.formRequired;
+				value[field.key] = null;
+			} else if (field.type === "number") {
+				const number = typeof cell === "number" ? cell : Number(String(cell).replace(/,/g, ""));
+				if (Number.isNaN(number)) errors[field.key] = messages.dataImportNotNumber;
+				value[field.key] = number;
+			} else value[field.key] = typeof cell === "string" ? cell.trim() : cell;
+		}
+		Object.assign(errors, {
+			...validate.value?.(value),
+			...errors
+		});
+		return Object.keys(errors).length ? { errors } : {
+			value,
+			errors
+		};
+	}
+	/** 对应完：按对应关系取出各行并校验，进入预览 */
+	function preview() {
+		const current = sheet();
+		if (!current) return;
+		rows.value = current.rows.map((row, index) => {
+			const raw = Object.fromEntries(fields.value.map((field) => {
+				const header = mapping.value[field.key];
+				const value = header ? row[header] ?? null : null;
+				return [field.key, isEmpty(value) ? null : value];
+			}));
+			return {
+				line: index + 1,
+				raw,
+				...check(raw)
+			};
+		});
+		onlyErrors.value = false;
+		step.value = 2;
+	}
+	/** 就地改了一格：改原值、重新校验这一行 */
+	function onCellChange(row, key, value) {
+		rows.value = rows.value.map((item) => {
+			if (item !== row) return item;
+			const raw = {
+				...item.raw,
+				[key]: isEmpty(value) ? null : value
+			};
+			return {
+				...item,
+				raw,
+				...check(raw)
+			};
+		});
+	}
+	async function submit() {
+		const valid = rows.value.filter((row) => Object.keys(row.errors).length === 0);
+		importing.value = true;
+		try {
+			await onImport.value(valid.map((row) => row.value));
+			imported.value = valid.length;
+			step.value = 3;
+		} catch (error) {
+			console.error("DataImport 的 onImport 失败，留在预览", error);
+		} finally {
+			importing.value = false;
+		}
+	}
+	function restart() {
+		sheets.value = [];
+		sheetName.value = null;
+		rows.value = [];
+		step.value = 0;
+	}
+	const counts = () => {
+		const invalid = rows.value.filter((row) => Object.keys(row.errors).length > 0).length;
+		return {
+			total: rows.value.length,
+			invalid,
+			valid: rows.value.length - invalid
+		};
+	};
+	const previewColumns = () => [
+		{
+			key: "line",
+			header: messages.dataImportRow,
+			width: 72,
+			value: (row) => row.line
+		},
+		{
+			key: "status",
+			header: messages.dataImportStatus,
+			width: 200,
+			cell: (row) => {
+				const first = Object.values(row.errors)[0];
+				return first ? createVNode(Flex, {
+					"align": "center",
+					"gap": "xs"
+				}, { default: () => [createVNode(Icon, {
+					"icon": CircleAlert,
+					"sx": dataImportStyles.invalidIcon
+				}, null), createVNode(Small, { "tone": "danger" }, _isSlot(first) ? first : { default: () => [first] })] }) : createVNode(Flex, {
+					"align": "center",
+					"gap": "xs"
+				}, {
+					default: () => [createVNode(Icon, {
+						"icon": CircleCheck,
+						"sx": dataImportStyles.validIcon
+					}, null), createVNode(Small, { "tone": "muted" }, {
+						default: () => [messages.dataImportValid],
+						$stable: true
+					})],
+					$stable: true
+				});
+			}
+		},
+		...fields.value.map((field) => ({
+			key: field.key,
+			header: field.label,
+			width: field.width,
+			minWidth: 120,
+			type: field.type === "number" ? "number" : "text",
+			value: (row) => row.raw[field.key],
+			editable: true
+		}))
+	];
+	function renderUpload() {
+		return createVNode(Flex, {
+			"direction": "column",
+			"gap": "sm"
+		}, {
+			default: () => [
+				createVNode(FileDrop, mergePartProps({
+					accept: accept.value,
+					description: messages.dataImportAccept(accept.value.split(",").join(", "))
+				}, propsDrop.value, { onFiles: (files) => void onFiles(files) }), null),
+				parseError.value && createVNode(Alert, { "tone": "danger" }, {
+					default: () => [unref(parseError)],
+					$stable: true
+				}),
+				onTemplate.value && createVNode(Flex, { "justify": "end" }, {
+					default: () => [createVNode(Button, {
+						"size": "sm",
+						"variant": "ghost",
+						"icon": Download,
+						"onClick": onTemplate.value
+					}, {
+						default: () => [messages.dataImportTemplate],
+						$stable: true
+					})],
+					$stable: true
+				})
+			],
+			$stable: true
+		});
+	}
+	function renderMapping() {
+		let _slot2;
+		const current = sheet();
+		const headers = current?.headers ?? [];
+		const missing = unmapped();
+		const sampleOf = (header) => header ? (current?.rows ?? []).slice(0, 2).map((row) => row[header]).filter((value) => !isEmpty(value)).map(String).join("、") : "";
+		return createVNode(Flex, {
+			"direction": "column",
+			"gap": "md"
+		}, { default: () => [
+			sheets.value.length > 1 && createVNode(Flex, {
+				"align": "center",
+				"gap": "sm"
+			}, {
+				default: () => [createVNode(Small, { "tone": "muted" }, {
+					default: () => [messages.dataImportSheet],
+					$stable: true
+				}), createVNode(Select, {
+					"items": sheets.value.map((item) => item.name),
+					"_value": sheetName.value,
+					"onUpdate:_value": changeSheet,
+					"aria-label": messages.dataImportSheet,
+					"size": "sm"
+				}, null)],
+				$stable: true
+			}),
+			createVNode(ColumnTable, {
+				"rows": fields.value,
+				"getKey": _cache[0] || (_cache[0] = (field) => field.key),
+				"aria-label": messages.dataImportSteps[1],
+				"columns": [
+					{
+						key: "label",
+						header: messages.dataImportField,
+						cell: (field) => createVNode(Flex, {
+							"align": "center",
+							"gap": "xs"
+						}, { default: () => [field.label, field.required && createVNode(Badge, { "tone": "danger" }, {
+							default: () => ["*"],
+							$stable: true
+						})] })
+					},
+					{
+						key: "column",
+						header: messages.dataImportColumn,
+						width: 240,
+						cell: (field) => createVNode(Select, {
+							"items": headers,
+							"_value": mapping.value[field.key] ?? null,
+							"onUpdate:_value": (header) => mapping.value = {
+								...mapping.value,
+								[field.key]: header
+							},
+							"placeholder": messages.dataImportSkip,
+							"clearable": true,
+							"size": "sm",
+							"aria-label": `${field.label}：${messages.dataImportColumn}`
+						}, null)
+					},
+					{
+						key: "sample",
+						header: messages.dataImportSample,
+						cell: (field) => {
+							let _slot;
+							return createVNode(Small, { "tone": "muted" }, _isSlot(_slot = sampleOf(mapping.value[field.key] ?? null)) ? _slot : { default: () => [_slot] });
+						}
+					}
+				]
+			}, null),
+			missing.length > 0 && createVNode(Alert, { "tone": "warning" }, _isSlot(_slot2 = messages.dataImportUnmapped(missing)) ? _slot2 : { default: () => [_slot2] })
+		] });
+	}
+	function renderPreview() {
+		let _slot3;
+		const { total, valid, invalid } = counts();
+		const shown = onlyErrors.value ? rows.value.filter((row) => Object.keys(row.errors).length > 0) : rows.value;
+		return createVNode(Flex, {
+			"direction": "column",
+			"gap": "sm"
+		}, { default: () => [
+			createVNode(Flex, {
+				"align": "center",
+				"justify": "between",
+				"gap": "md",
+				"wrap": true
+			}, { default: () => [createVNode(Small, null, _isSlot(_slot3 = messages.dataImportSummary(total, valid, invalid)) ? _slot3 : { default: () => [_slot3] }), invalid > 0 && createVNode(Switch, {
+				"_checked": onlyErrors.value,
+				"onUpdate:_checked": _cache[1] || (_cache[1] = (value) => onlyErrors.value = value)
+			}, {
+				default: () => [messages.dataImportOnlyErrors],
+				$stable: true
+			})] }),
+			createVNode(DataTable, mergeProps(mergePartProps({
+				"aria-label": messages.dataImportPreview,
+				propsRoot: { sx: dataImportStyles.previewTable },
+				density: "compact"
+			}, propsPreview.value), {
+				"rows": shown,
+				"columns": previewColumns(),
+				"getKey": _cache[2] || (_cache[2] = (row) => String(row.line)),
+				"rowTone": _cache[3] || (_cache[3] = (row) => Object.keys(row.errors).length ? "danger" : void 0),
+				"validateRow": _cache[4] || (_cache[4] = (row) => row.errors),
+				"onCellChange": onCellChange
+			}), null),
+			invalid > 0 && createVNode(Small, { "tone": "muted" }, {
+				default: () => [messages.dataImportEditHint],
+				$stable: true
+			})
+		] });
+	}
+	return () => {
+		let _slot4;
+		const { valid } = counts();
+		return createVNode("div", mergeAttrs({ sx: dataImportStyles.root }, rest), [
+			createVNode(Steps, mergeProps(mergePartProps({ items: messages.dataImportSteps.map((title) => ({ title })) }, propsSteps.value, { items: messages.dataImportSteps.map((title) => ({ title })) }), {
+				"_current": step.value,
+				"onUpdate:_current": _cache[5] || (_cache[5] = ($event) => step.value = $event)
+			}), null),
+			step.value === 0 && renderUpload(),
+			step.value === 1 && renderMapping(),
+			step.value === 2 && renderPreview(),
+			step.value === 3 && createVNode(Alert, {
+				"tone": "success",
+				"title": messages.dataImportDone(imported.value),
+				"key": "__site1"
+			}, {
+				default: () => [createVNode(Button, {
+					"size": "sm",
+					"variant": "soft",
+					"onClick": restart,
+					"key": "__site0"
+				}, {
+					default: () => [messages.dataImportAgain],
+					$stable: true
+				})],
+				$stable: true
+			}),
+			(step.value === 1 || step.value === 2) && createVNode(Flex, mergePartProps({
+				justify: "end",
+				gap: "sm"
+			}, propsActions.value), { default: () => [createVNode(Button, {
+				"variant": "ghost",
+				"tone": "neutral",
+				"onClick": _cache[6] || (_cache[6] = () => step.value === 1 ? restart() : step.value = 1),
+				"key": "__site2"
+			}, {
+				default: () => [messages.stepsFormPrevious],
+				$stable: true
+			}), step.value === 1 ? createVNode(Button, {
+				"disabled": unmapped().length > 0,
+				"onClick": preview,
+				"key": "__site3"
+			}, {
+				default: () => [messages.stepsFormNext],
+				$stable: true
+			}) : createVNode(Button, mergePartProps({}, propsSubmit.value, {
+				disabled: valid === 0,
+				loading: importing.value,
+				onClick: () => void submit()
+			}), _isSlot(_slot4 = messages.dataImportSubmit(valid)) ? _slot4 : { default: () => [_slot4] })] })
+		]);
+	};
+}, {
+	name: "DataImport",
+	props: [
+		"fields",
+		"schema",
+		"validate",
+		"parse",
+		"accept",
+		"onImport",
+		"onTemplate",
+		"propsSteps",
+		"propsDrop",
+		"propsPreview",
+		"propsActions",
+		"propsSubmit"
+	]
+});
+//#endregion
+export { DataImport, dataImportStyles };
+
+//# sourceMappingURL=DataImport.js.map