@aaas-pro/library 0.0.0-stage → 0.1.0

package/README.md

@@ -1,3 +1,108 @@
-# Temporary Holding Version
+# AaasPro 公共组件库
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+包名：`@aaas-pro/library`。React、React DOM 和 React Router 由宿主提供。通用 UI 与业务通用控件从包入口或明确的组件子路径导入；不要求宿主配置 `@/` 别名，也不要求安装 Tailwind，样式已经预编译。
+
+基础交互使用本库的 React 状态、上下文及浏览器 DOM 实现，源码在 `src/primitives`；不依赖 Radix UI，也不通过 cmdk、vaul 间接引入它。弹窗、菜单、选择、验证码、日历、轮播、面板调整、通知、表单校验和基础 SVG 图表由库统一维护；图标使用库内 SVG 渲染，矢量数据保留 Lucide/Feather 许可。组件变体、条件类名、样式覆盖和进退场动画同样由库内实现，源码位于 src/lib 和 src/motion.css；库没有第三方运行依赖，React/ReactDOM/Router 由宿主提供。Tailwind 及其插件仅用于开发阶段的样式编译，发布包自带 CSS。应用层的专项图表、表单、图标及动画依赖由业务应用自行管理。
+
+历史实现范围见 [自主实现验收](docs/自主实现验收.md)。在前端工作区运行 `pnpm --filter @aaas-pro/library run check` 做类型检查，`pnpm --filter @aaas-pro/library run test` 运行组件测试，`pnpm run build:library` 构建发布包；文档开发与构建分别使用 `pnpm run dev:docs`、`pnpm run build:docs`。
+
+`cn` 接受字符串、嵌套数组和条件字典，后传入的工具类按变体、重要性和方向覆盖前面的样式。覆盖规则包含库与原型使用的布局、间距、颜色、字体、边框、尺寸和动画等工具类；未匹配到工具类规则的自定义类保留原样，按自身 CSS 规则生效。变体与动画的原有组件参数保持不变。
+
+## 最小接入
+
+```tsx
+import { createRoot } from 'react-dom/client';
+import { ConfigProvider, Button } from '@aaas-pro/library';
+import '@aaas-pro/library/styles.css';
+
+createRoot(document.getElementById('root')!).render(
+  <ConfigProvider theme="blue">
+    <Button color="primary" onClick={() => console.log('确认')}>确认</Button>
+  </ConfigProvider>
+);
+```
+
+`Button.color` 取值为 `default | primary | success | warning | danger`。不传时，`destructive` 外观使用 `danger`，其余外观使用 `primary`。`loading` 默认为 `false`；为 `true` 时显示图标并阻止点击。`variant` 和 `size` 的完整范围见在线 API。
+
+## 换肤
+
+`theme` 可以是 `green`、`teal`、`cyan`（青空）、`lime`（青柠）、`gold`（鎏金）、`blue`、`indigo`、`violet`、`rose`、`orange`、`slate`、`dark`，默认 `green`，也可以只覆盖部分主题变量。文档主题选择同步展示全部 12 种预设：
+
+```tsx
+<ConfigProvider theme={{ preset: 'blue', token: {
+  colorPrimary: '#ad2468', colorSuccess: '#15803d', borderRadius: '8px'
+}}} scope="document">
+  <App />
+</ConfigProvider>
+```
+
+`scope` 默认 `local`，只影响当前容器及其库内浮层，适合多主题并排展示；`document` 同时设置页面根节点变量，适合整页应用及使用 body 浮层的第三方控件，卸载时恢复原值。
+
+### 运行时切换主题
+
+整页应用用 `ThemeProvider` 代替 `ConfigProvider`：它记住用户选择的色彩预设与导航栏外观（`localStorage`，默认键 `aaas-theme` / `aaas-theme:nav`，跨标签页同步），并允许应用级覆盖；`ThemeSwitcher` 提供现成的切换菜单（色样网格 + 导航栏浅色/深色），`useTheme()` 供自定义入口读取/切换。
+
+```tsx
+import { ThemeProvider, useTheme } from '@aaas-pro/library/theme';
+import { ThemeSwitcher } from '@aaas-pro/library/components/theme-switcher';
+
+<ThemeProvider defaultTheme="green" defaultNavStyle="light" overrides={({ theme, navStyle }) => theme === 'green' && navStyle === 'dark' ? { colorNavBackground: '#14212e' } : undefined}>
+  <ThemeSwitcher showLabel />
+  <App />
+</ThemeProvider>
+```
+
+`ThemeProvider` 属性：`defaultTheme`（默认 green）、`themes`（可切换的预设，默认全部）、`defaultNavStyle`（默认 light，深色预设固定 dark）、`overrides`（按预设的对象，或 `({ theme, navStyle }) => Partial<ThemeToken>`；在内置 `darkNavTokens` 派生之后应用）、`storageKey`（`null` 不持久化）、`scope`（默认 `document`）。`ThemeSwitcher` 可通过 `children` 传入自定义触发器（深色导航栏中建议这样做），`showLabel` 显示当前主题名。切换瞬间文档根节点带 `data-theme-switching` 属性 260ms，样式层据此加颜色过渡。
+
+| Token | 类型 / 有效范围 | green 默认值 | 用途 |
+|---|---|---|---|
+| colorPrimary | 有效 CSS 颜色字符串 | #00875a | 品牌主色、焦点及主操作 |
+| colorSuccess | 有效 CSS 颜色字符串 | #15803d | 成功状态 |
+| colorWarning | 有效 CSS 颜色字符串 | #b45309 | 警告状态 |
+| colorDanger | 有效 CSS 颜色字符串 | #dc2626 | 危险及错误状态 |
+| colorInfo | 有效 CSS 颜色字符串 | #2563eb | 信息状态 |
+| colorBackground | 有效 CSS 颜色字符串 | #f3f6f5 | 页面背景 |
+| colorSurface | 有效 CSS 颜色字符串 | #ffffff | 卡片与浮层背景 |
+| colorText | 有效 CSS 颜色字符串 | #17241f | 主要文字 |
+| colorTextSecondary | 有效 CSS 颜色字符串 | #5b6b65 | 次要文字 |
+| colorBorder | 有效 CSS 颜色字符串 | #e1e7e4 | 分隔线与卡片边框（输入框边框由其加深派生） |
+| colorPrimaryText | 有效 CSS 颜色字符串 | #ffffff | 品牌色实心按钮文字 |
+| borderRadius | 非负 CSS 长度 | 0.5rem | 基础圆角（控件 −2px，卡片/弹窗 +4px） |
+| colorNavBackground | 有效 CSS 颜色字符串 | #ffffff | 导航栏背景 |
+| colorNavText | 有效 CSS 颜色字符串 | #17241f | 导航栏文字与图标 |
+| colorNavActive | 有效 CSS 颜色字符串 | #00875a | 导航栏选中强调色 |
+
+`token` 所有字段均为可选，未传入的字段沿用预设。`ConfigProvider.children` 必填；`theme`、`scope` 和 `className` 可选。浮层优先挂入所在 Provider，显式指定 Portal.container 时由宿主保证目标容器的主题变量。
+
+三套浅色预设同时改变主色、背景、文字与边框；选中底色和悬停色由主色计算。生态绿为 `#00875a / #f3f6f5`，科技蓝为 `#175cd3 / #f2f6fd`，暖橙为 `#c4510b / #fbf5f0`（主色 / 背景）；深色为 `#3ddc97 / #0d151d`，表面 `#16222d`、边框 `#2a3845`。文档导航、品牌头像、主操作和焦点随主题变化；分类图标与成功、警告、错误状态保留各自含义。
+
+## 业务通用控件
+
+收录标准是独立的可复用交互单元、明确的数据与回调契约，并且适合多个业务。组织、人员、地址只是典型例子，不是数量限制。页面、工作台、领域 Store、具体单据编辑器和接口实现属于业务应用。
+
+| 控件 | 可复用能力 | 宿主负责 |
+|---|---|---|
+| OrgPicker | 组织树选择、内嵌或下拉、搜索与清空 | 组织数据及有效范围 |
+| PersonPicker | 人员单选/多选、搜索及状态反馈 | 通讯录、权限及远程请求 |
+| AddressPicker | 任意层级地区路径选择 | 地区数据、编码版本及详细地址 |
+| ProductPickerDialog | 商品搜索、分类、多选及禁选项 | 商品对象及业务规则 |
+| RefDocPicker | 关联单据选择、移除及摘要 | 关联数据、摘要加载及导航 |
+| DocumentLinks | 上下游单据导航 | 单据类型、加载及路由 |
+| DraftRowActions | 可编辑记录操作、异步删除确认 | 可编辑状态、权限与实际删除 |
+| ProcessFlowBar | 流程节点状态、紧凑显示及点击 | 状态机、审批、流转及编辑弹窗 |
+
+以上是本次核查保留的控件，不是固定白名单。新增控件沿用同一职责标准。产品照片、视频、业务图标和模型仍由原型应用维护。
+
+库源码只保留基础组件、通用控件、主题及少量 UI 工具。业务实现位于 `../aaaspro/src`；应用适配层将主数据、人员查询和表单字段转换为库的参数，不将业务依赖带入库。
+
+## 文档维护
+
+文档在 `docs/src`，接口由 TypeScript 源码解析；必填依据类型是否可选，默认值优先读取参数解构初始值，再读取库内交互实现的初始值。有限枚举在取值范围列展开，无源码边界的数值不虚构上限。`undefined（未声明初始值）` 表示组件没有设置该属性，必填属性使用 `—（必填，由调用方提供）`。
+
+语义说明维护在 `docs/src/documentation-specs-data.json`。最小案例源文件位于 `docs/demos/<案例>/`，预览入口与源码展示位于 `docs/examples/`，静态文档位于 `docs/static/`；变更组件时同步维护相应案例和文档。`component-preview.html` 负责隔离文档交互。运行 `pnpm --filter @aaas-pro/library run docs` 从当前源码刷新 API、应用引用和真实案例资源；`pnpm run build:docs` 会先刷新文档，再由 `docs/vite.config.ts` 构建并复制静态页面到 `library/docs/dist/component-docs`。发布时部署完整 `library/docs/dist`。
+
+## 规范与变更
+
+- [组件库规范](../../../docs/02-前端/组件库规范.md)：目录结构、公共 API、样式、类型、文档与测试约定。
+- [设计规范](../../../docs/02-前端/设计规范.md)：视觉方向、token 与组件状态约定。
+- [CHANGELOG](CHANGELOG.md)。公共入口登记在 `api/entrypoints.json`，`pnpm --filter @aaas-pro/library run check` 执行类型检查，组件行为与公共出口由组件测试验证。

package/dist/components/address-picker.d.ts

@@ -0,0 +1,18 @@
+import { type SelectionStateProps } from '../internal/selection-base';
+export interface AddressOption {
+    /** Unique region code. Region data/version is provided by the host. */
+    id: string;
+    name: string;
+    disabled?: boolean;
+    children?: AddressOption[];
+}
+export interface AddressPickerProps extends SelectionStateProps {
+    options: AddressOption[];
+    /** Region ID path, from root to leaf. [] means no selection. */
+    value: string[];
+    onChange: (value: string[], selected: AddressOption[]) => void;
+    /** false requires a leaf; true also commits intermediate regions. Default: false. */
+    changeOnSelect?: boolean;
+}
+/** Cascading region selection with any number of levels and no bundled administrative dataset. */
+export declare function AddressPicker({ options, value, onChange, changeOnSelect, disabled, loading, error, placeholder, allowClear, className, 'aria-label': name }: AddressPickerProps): import("react").JSX.Element;

package/dist/components/address-picker.js

@@ -0,0 +1,46 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { ChevronRight } from "../icons/index.js";
+import { cn } from "../lib/utils.js";
+import { SelectionFrame, SelectionMessage, SelectionCheck } from "../internal/selection-base.js";
+function pathNodes(options, ids) {
+  const nodes = [];
+  let rows = options;
+  for (const id of ids) {
+    const node = rows.find((n) => n.id === id);
+    if (!node) break;
+    nodes.push(node);
+    rows = node.children ?? [];
+  }
+  return nodes;
+}
+function AddressPicker({ options, value, onChange, changeOnSelect = false, disabled = false, loading = false, error, placeholder = "请选择地址", allowClear = true, className, "aria-label": name = "地址选择" }) {
+  const [open, setOpen] = useState(false), [draft, setDraft] = useState(value);
+  const nodes = pathNodes(options, draft), columns = [options, ...nodes.filter((n) => n.children?.length).map((n) => n.children)];
+  const label = pathNodes(options, value).map((n) => n.name).join(" / ") || value.join(" / ");
+  return /* @__PURE__ */ jsxs(SelectionFrame, { label, placeholder, disabled, open, onOpenChange: (next) => {
+    setOpen(next);
+    if (next) setDraft(value);
+  }, name, className, clear: allowClear && value.length ? () => onChange([], []) : void 0, children: [
+    /* @__PURE__ */ jsxs("div", { className: "border-b border-border px-4 py-3 text-sm font-medium", children: [
+      "选择地区",
+      /* @__PURE__ */ jsxs("span", { className: "ml-2 text-xs font-normal text-muted-foreground", children: [
+        "逐级选择",
+        changeOnSelect ? "，允许选择上级地区" : "至末级地区"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(SelectionMessage, { loading, error, empty: !options.length }),
+    !loading && !error && !!options.length && /* @__PURE__ */ jsx("div", { className: "flex overflow-x-auto", children: columns.map((rows, level) => /* @__PURE__ */ jsx("div", { className: "max-h-72 min-w-36 flex-1 overflow-y-auto border-r border-border p-2 last:border-r-0", "aria-label": `第 ${level + 1} 级地区`, children: rows.map((n) => /* @__PURE__ */ jsxs("button", { type: "button", disabled: n.disabled, "aria-pressed": draft[level] === n.id, onClick: () => {
+      const ids = [...draft.slice(0, level), n.id];
+      setDraft(ids);
+      if (changeOnSelect || !n.children?.length) onChange(ids, pathNodes(options, ids));
+      if (!n.children?.length) setOpen(false);
+    }, className: cn("flex w-full items-center gap-2 rounded-md px-2 py-2.5 text-left text-sm disabled:cursor-not-allowed disabled:opacity-40 focus-visible:ring-2 focus-visible:ring-ring", draft[level] === n.id ? "bg-primary/10 text-primary" : "hover:bg-muted"), children: [
+      /* @__PURE__ */ jsx("span", { className: "flex-1 whitespace-nowrap", children: n.name }),
+      n.children?.length ? /* @__PURE__ */ jsx(ChevronRight, { className: "size-3.5" }) : /* @__PURE__ */ jsx(SelectionCheck, { selected: draft[level] === n.id })
+    ] }, n.id)) }, level)) })
+  ] });
+}
+export {
+  AddressPicker
+};

package/dist/components/card-date-filter.d.ts

@@ -0,0 +1,12 @@
+export type CardDateKind = 'day' | 'week' | 'month' | 'year' | 'custom';
+export type CardDateRange = {
+    kind: CardDateKind;
+    from: string;
+    to: string;
+};
+export declare function defaultCardDateRange(kind?: CardDateKind): CardDateRange;
+export declare function CardDateFilter({ value, onChange, className }: {
+    value: CardDateRange;
+    onChange: (v: CardDateRange) => void;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/components/card-date-filter.js

@@ -0,0 +1,95 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useMemo } from "react";
+import { Calendar } from "./ui/calendar.js";
+import { Popover, PopoverTrigger, PopoverContent } from "./ui/popover.js";
+import { Button } from "./ui/button.js";
+import { CalendarDays, ChevronDown } from "../icons/index.js";
+import { cn } from "../lib/utils.js";
+const KIND_LABELS = [
+  { kind: "day", label: "本日" },
+  { kind: "week", label: "本周" },
+  { kind: "month", label: "本月" },
+  { kind: "year", label: "本年" },
+  { kind: "custom", label: "自定义" }
+];
+const fmt = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}`;
+function defaultCardDateRange(kind = "month") {
+  const now = /* @__PURE__ */ new Date();
+  const monday = new Date(now);
+  monday.setDate(now.getDate() - (now.getDay() + 6) % 7);
+  const monthStart = new Date(now.getFullYear(), now.getMonth(), 1);
+  const yearStart = new Date(now.getFullYear(), 0, 1);
+  const weekAgo = new Date(now);
+  weekAgo.setDate(now.getDate() - 6);
+  switch (kind) {
+    case "day":
+      return { kind, from: fmt(now), to: fmt(now) };
+    case "week":
+      return { kind, from: fmt(monday), to: fmt(now) };
+    case "month":
+      return { kind, from: fmt(monthStart), to: fmt(now) };
+    case "year":
+      return { kind, from: fmt(yearStart), to: fmt(now) };
+    default:
+      return { kind: "custom", from: fmt(weekAgo), to: fmt(now) };
+  }
+}
+function CardDateFilter({ value, onChange, className }) {
+  const [open, setOpen] = useState(false);
+  const [range, setRange] = useState();
+  const selected = useMemo(() => ({
+    from: value.from ? new Date(value.from) : void 0,
+    to: value.to ? new Date(value.to) : void 0
+  }), [value.from, value.to]);
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-wrap items-center gap-1", className), children: [
+    /* @__PURE__ */ jsx(CalendarDays, { className: "w-3.5 h-3.5 text-muted-foreground" }),
+    KIND_LABELS.map((k) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-pressed": value.kind === k.kind,
+        onClick: () => onChange(defaultCardDateRange(k.kind)),
+        className: cn(
+          "min-h-8 px-2 rounded-md text-xs outline-none focus-visible:ring-2 focus-visible:ring-ring/15 transition-colors whitespace-nowrap",
+          value.kind === k.kind ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:text-foreground hover:bg-muted/40"
+        ),
+        children: k.label
+      },
+      k.kind
+    )),
+    /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: "outline",
+          color: "default",
+          size: "sm",
+          className: "h-8 ml-1 px-2 text-xs gap-1 whitespace-nowrap font-normal",
+          onClick: () => setRange(selected),
+          children: [
+            value.from,
+            " ~ ",
+            value.to,
+            /* @__PURE__ */ jsx(ChevronDown, { className: "w-3 h-3" })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto max-w-[calc(100vw-32px)] p-0", align: "end", "aria-label": "选择日期范围", children: /* @__PURE__ */ jsx(
+        Calendar,
+        {
+          mode: "range",
+          selected: range,
+          onSelect: (r) => {
+            setRange(r);
+            if (r?.from && r?.to) onChange({ kind: "custom", from: fmt(r.from), to: fmt(r.to) });
+          },
+          numberOfMonths: 2
+        }
+      ) })
+    ] })
+  ] });
+}
+export {
+  CardDateFilter,
+  defaultCardDateRange
+};

package/dist/components/date-time-picker.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { Calendar } from './ui/calendar';
+import { Input } from './ui/input';
+export interface DateTimePickerProps extends Omit<React.ComponentProps<typeof Input>, 'value' | 'onChange' | 'type'> {
+    value: string;
+    onValueChange: (value: string) => void;
+    type?: 'date' | 'datetime';
+    /** 日历语言；例如 zh-CN。 */
+    locale?: React.ComponentProps<typeof Calendar>['locale'];
+}
+/** Local business date strings round-trip without UTC conversion or implicit defaults. */
+export declare function DateTimePicker({ value, onValueChange, type, locale, disabled, readOnly, className, placeholder, min, max, ...props }: DateTimePickerProps): React.JSX.Element;

package/dist/components/date-time-picker.js

@@ -0,0 +1,96 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { CalendarDays } from "../icons/index.js";
+import { cn } from "../lib/utils.js";
+import { Button } from "./ui/button.js";
+import { Calendar } from "./ui/calendar.js";
+import { Input } from "./ui/input.js";
+import { Label } from "./ui/label.js";
+import { Popover, PopoverAnchor, PopoverTrigger, PopoverContent } from "./ui/popover.js";
+import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "./ui/select.js";
+const pad = (value) => String(value).padStart(2, "0");
+const dateText = (value) => `${value.getFullYear()}-${pad(value.getMonth() + 1)}-${pad(value.getDate())}`;
+function calendarDate(value) {
+  const match = /^(\d{4})-(\d{2})-(\d{2})(?:[ T]|$)/.exec(value);
+  if (!match) return;
+  const [year, month, day] = match.slice(1).map(Number);
+  const date = new Date(year, month - 1, day);
+  return date.getFullYear() === year && date.getMonth() === month - 1 && date.getDate() === day ? date : void 0;
+}
+function DateTimePicker({ value, onValueChange, type = "date", locale, disabled, readOnly, className, placeholder, min, max, ...props }) {
+  const [open, setOpen] = React.useState(false);
+  const selected = calendarDate(value);
+  const minimum = calendarDate(String(min ?? "")), maximum = calendarDate(String(max ?? ""));
+  const time = /[ T](\d{2}):(\d{2})(?::(\d{2}))?/.exec(value)?.slice(1).map((part) => part || "00") ?? ["00", "00", "00"];
+  const label = props["aria-label"] || "日期";
+  const changeTime = (part, next) => {
+    if (!selected) return;
+    const parts = [...time];
+    parts[part] = next;
+    onValueChange(`${dateText(selected)} ${parts.join(":")}`);
+  };
+  return /* @__PURE__ */ jsxs(Popover, { open: open && !disabled && !readOnly, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsxs("div", { className: cn("relative min-w-0", className), children: [
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          ...props,
+          type: "text",
+          value: value.replace("T", " "),
+          disabled,
+          readOnly,
+          className: "pr-10",
+          placeholder: placeholder ?? (type === "datetime" ? "年-月-日 时:分:秒" : "年-月-日"),
+          onChange: (event) => onValueChange(event.target.value.replace("T", " "))
+        }
+      ),
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "icon-sm",
+          disabled: disabled || readOnly,
+          "aria-label": `选择${label}`,
+          className: "absolute inset-y-0 right-0.5 my-auto active:not-disabled:translate-y-0",
+          children: /* @__PURE__ */ jsx(CalendarDays, { className: "size-4" })
+        }
+      ) })
+    ] }) }),
+    /* @__PURE__ */ jsxs(PopoverContent, { align: "start", className: "w-auto p-0", "aria-label": `${label}选择器`, children: [
+      /* @__PURE__ */ jsx(
+        Calendar,
+        {
+          mode: "single",
+          locale,
+          selected,
+          defaultMonth: selected,
+          disabled: (date) => !!minimum && date < minimum || !!maximum && date > maximum,
+          onSelect: (date) => {
+            if (date) {
+              onValueChange(type === "datetime" ? `${dateText(date)} ${time.join(":")}` : dateText(date));
+              if (type === "date") setOpen(false);
+            }
+          }
+        }
+      ),
+      type === "datetime" && /* @__PURE__ */ jsx("div", { className: "flex gap-2 border-t px-3 py-2", children: ["时", "分", "秒"].map((unit, index) => /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 space-y-1", children: [
+        /* @__PURE__ */ jsx(Label, { className: "text-xs text-muted-foreground", children: unit }),
+        /* @__PURE__ */ jsxs(Select, { value: time[index], disabled: !selected, onValueChange: (next) => changeTime(index, next), children: [
+          /* @__PURE__ */ jsx(SelectTrigger, { className: "w-full", "aria-label": `${label}${unit}`, children: /* @__PURE__ */ jsx(SelectValue, {}) }),
+          /* @__PURE__ */ jsx(SelectContent, { children: Array.from({ length: index === 0 ? 24 : 60 }, (_, n) => /* @__PURE__ */ jsx(SelectItem, { value: pad(n), children: pad(n) }, n)) })
+        ] })
+      ] }, unit)) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-between border-t px-3 py-2", children: [
+        /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", variant: "ghost", onClick: () => {
+          onValueChange("");
+          setOpen(false);
+        }, children: "清空" }),
+        /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", variant: "outline", onClick: () => setOpen(false), children: "完成" })
+      ] })
+    ] })
+  ] });
+}
+export {
+  DateTimePicker
+};

package/dist/components/detail-dialog.d.ts

@@ -0,0 +1,48 @@
+export interface DetailField {
+    label: string;
+    value: string | number;
+    type?: 'text' | 'badge' | 'status' | 'progress';
+    badgeVariant?: 'default' | 'destructive' | 'outline' | 'secondary';
+    color?: string;
+    suffix?: string;
+}
+export interface DetailAction {
+    label: string;
+    variant?: 'default' | 'destructive' | 'outline' | 'secondary';
+    onClick: () => void;
+}
+export interface CalculationStep {
+    step: number;
+    label: string;
+    formula?: string;
+    value?: string;
+}
+export interface ReportTable {
+    title: string;
+    headers: string[];
+    rows: (string | number)[][];
+}
+export interface ReportData {
+    calculation?: CalculationStep[];
+    source?: string;
+    period?: string;
+    table?: ReportTable[];
+}
+interface DetailDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title: string;
+    subtitle?: string;
+    icon?: React.ReactNode;
+    badge?: {
+        label: string;
+        variant?: 'default' | 'destructive' | 'outline' | 'secondary';
+    };
+    fields?: DetailField[];
+    actions?: DetailAction[];
+    children?: React.ReactNode;
+    width?: string;
+    report?: ReportData;
+}
+export declare function DetailDialog({ open, onOpenChange, title, subtitle, icon, badge, fields, actions, children, width, report, }: DetailDialogProps): import("react").JSX.Element;
+export {};

package/dist/components/detail-dialog.js

@@ -0,0 +1,97 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { X, FileSpreadsheet, Calculator } from "../icons/index.js";
+import { Dialog, DialogContent, DialogTitle } from "./ui/dialog.js";
+import { ScrollArea } from "./ui/scroll-area.js";
+import { Badge } from "./ui/badge.js";
+import { Button } from "./ui/button.js";
+function DetailDialog({
+  open,
+  onOpenChange,
+  title,
+  subtitle,
+  icon,
+  badge,
+  fields,
+  actions,
+  children,
+  width = "max-w-xl",
+  report
+}) {
+  return /* @__PURE__ */ jsx(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { showCloseButton: false, className: `${width} p-0 gap-0 overflow-hidden`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "px-6 py-4 border-b bg-[#f0f4f3]/80 flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+        icon && /* @__PURE__ */ jsx("div", { className: "w-9 h-9 rounded-lg bg-card border shadow-sm flex items-center justify-center text-[#475569]", children: icon }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(DialogTitle, { className: "text-base font-semibold text-[#0f172a]", children: title }),
+          subtitle && /* @__PURE__ */ jsx("p", { className: "text-xs text-[#64748b] mt-0.5", children: subtitle })
+        ] }),
+        badge && /* @__PURE__ */ jsx(Badge, { variant: badge.variant || "default", className: "ml-2 text-[10px]", children: badge.label })
+      ] }),
+      /* @__PURE__ */ jsx("button", { onClick: () => onOpenChange(false), className: "w-7 h-7 rounded-md hover:bg-slate-200 flex items-center justify-center text-[#94a3b8]", children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4" }) })
+    ] }),
+    /* @__PURE__ */ jsx(ScrollArea, { className: "max-h-[65vh]", children: /* @__PURE__ */ jsxs("div", { className: "p-6", children: [
+      fields && fields.length > 0 && /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-x-6 gap-y-3 mb-5", children: fields.map((f, i) => /* @__PURE__ */ jsxs("div", { className: f.type === "progress" ? "col-span-2" : "", children: [
+        /* @__PURE__ */ jsx("p", { className: "text-[11px] text-[#94a3b8] mb-0.5", children: f.label }),
+        f.type === "badge" ? /* @__PURE__ */ jsxs(Badge, { variant: f.badgeVariant || "default", className: "text-[10px]", children: [
+          f.value,
+          f.suffix
+        ] }) : f.type === "status" ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx("span", { className: `w-1.5 h-1.5 rounded-full ${f.color || "bg-slate-400"}` }),
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-[#334155]", children: f.value })
+        ] }) : f.type === "progress" ? /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between mb-1", children: /* @__PURE__ */ jsxs("span", { className: "text-sm font-medium text-[#334155]", children: [
+            f.value,
+            f.suffix
+          ] }) }),
+          /* @__PURE__ */ jsx("div", { className: "w-full h-1.5 bg-[#e2e8e4] rounded-full overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "h-full rounded-full bg-[var(--primary)]", style: { width: `${Number(f.value)}%` } }) })
+        ] }) : /* @__PURE__ */ jsxs("p", { className: "text-sm font-medium text-[#334155]", children: [
+          f.value,
+          f.suffix && /* @__PURE__ */ jsx("span", { className: "text-[#94a3b8] font-normal ml-0.5", children: f.suffix })
+        ] })
+      ] }, i)) }),
+      !report && fields && fields.length > 0 && fields.some((f) => f.label === "数据来源") && /* @__PURE__ */ jsxs("div", { className: "bg-[var(--primary-soft)]/60 border border-[var(--primary)]/20 rounded-lg p-3", children: [
+        /* @__PURE__ */ jsxs("h4", { className: "text-sm font-semibold text-[var(--primary-hover)] mb-2 flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx(FileSpreadsheet, { className: "w-3.5 h-3.5" }),
+          "数据明细"
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "space-y-1 text-xs text-[#475569]", children: [
+          fields.filter((f) => f.label === "数据来源" || f.label === "统计周期" || f.label === "更新时间").map((f, i) => /* @__PURE__ */ jsxs("p", { children: [
+            /* @__PURE__ */ jsxs("span", { className: "text-[#94a3b8]", children: [
+              f.label,
+              "："
+            ] }),
+            f.value
+          ] }, i)),
+          /* @__PURE__ */ jsx("p", { className: "pt-1 text-[#94a3b8] italic", children: "数据来源已验证，统计口径一致" })
+        ] })
+      ] }),
+      report && /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+        report.calculation && report.calculation.length > 0 && /* @__PURE__ */ jsxs("div", { className: "bg-amber-50/60 border border-amber-200 rounded-lg p-3", children: [
+          /* @__PURE__ */ jsxs("h4", { className: "text-sm font-semibold text-amber-800 mb-2 flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx(Calculator, { className: "w-3.5 h-3.5" }),
+            "计算过程"
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "space-y-1.5", children: report.calculation.map((step, i) => /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 text-xs", children: [
+            /* @__PURE__ */ jsx("span", { className: "shrink-0 w-5 h-5 rounded-full bg-amber-200 text-amber-800 flex items-center justify-center font-bold text-[10px]", children: i + 1 }),
+            /* @__PURE__ */ jsx("span", { className: "text-[#334155] mt-0.5", children: typeof step === "string" ? step : `${step.label}${step.value ? ` = ${step.value}` : ""}${step.formula ? ` (${step.formula})` : ""}` })
+          ] }, i)) })
+        ] }),
+        report.table && report.table?.length > 0 && /* @__PURE__ */ jsx("div", { className: "space-y-3", children: report.table.map((table, ti) => /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsxs("h4", { className: "text-sm font-semibold text-[#0f172a] mb-1.5 flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx(FileSpreadsheet, { className: "w-3.5 h-3.5 text-[var(--primary)]" }),
+            table.title
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "border rounded-lg overflow-hidden", children: /* @__PURE__ */ jsxs("table", { className: "w-full text-xs", children: [
+            /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { className: "bg-[#e2e8e4]", children: table.headers.map((h, hi) => /* @__PURE__ */ jsx("th", { className: "px-2 py-1.5 text-left font-semibold text-[#334155]", children: h }, hi)) }) }),
+            /* @__PURE__ */ jsx("tbody", { children: table.rows.map((row, ri) => /* @__PURE__ */ jsx("tr", { className: ri % 2 === 0 ? "bg-card" : "bg-[#f0f4f3]/50", children: row.map((cell, ci) => /* @__PURE__ */ jsx("td", { className: "px-2 py-1.5 text-[#334155]", children: cell }, ci)) }, ri)) })
+          ] }) })
+        ] }, ti)) })
+      ] }),
+      children
+    ] }) }),
+    actions && actions.length > 0 && /* @__PURE__ */ jsx("div", { className: "px-6 py-3 border-t bg-[#f0f4f3]/50 flex items-center justify-end gap-2", children: actions.map((a, i) => /* @__PURE__ */ jsx(Button, { variant: a.variant || "outline", size: "sm", onClick: a.onClick, children: a.label }, i)) })
+  ] }) });
+}
+export {
+  DetailDialog
+};

package/dist/components/document-links.d.ts

@@ -0,0 +1,13 @@
+export interface DocumentReference {
+    id: string;
+    label: string;
+    disabled?: boolean;
+}
+export interface DocumentLinksProps {
+    upstream?: DocumentReference[];
+    downstream?: DocumentReference[];
+    onOpen?: (document: DocumentReference, direction: 'upstream' | 'downstream') => void;
+    className?: string;
+}
+/** Relationship navigation for any document type. The host implements document loading and routing. */
+export declare function DocumentLinks({ upstream, downstream, onOpen, className }: DocumentLinksProps): import("react").JSX.Element;

package/dist/components/document-links.js

@@ -0,0 +1,19 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowUpLeft, ArrowDownRight, FileText } from "../icons/index.js";
+import { cn } from "../lib/utils.js";
+function DocumentLinks({ upstream = [], downstream = [], onOpen, className }) {
+  if (!upstream.length && !downstream.length) return /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "暂无关联单据" });
+  return /* @__PURE__ */ jsx("div", { className: cn("flex flex-wrap items-center gap-4", className), children: [["upstream", upstream], ["downstream", downstream]].filter(([, rows]) => rows.length).map(([direction, rows]) => /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+    /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 text-xs text-muted-foreground", children: [
+      direction === "upstream" ? /* @__PURE__ */ jsx(ArrowUpLeft, { className: "size-3.5" }) : /* @__PURE__ */ jsx(ArrowDownRight, { className: "size-3.5" }),
+      direction === "upstream" ? "上游单据" : "下游单据"
+    ] }),
+    rows.map((doc) => /* @__PURE__ */ jsxs("button", { type: "button", disabled: doc.disabled || !onOpen, onClick: () => onOpen?.(doc, direction), className: "inline-flex items-center gap-1.5 rounded-md border border-border bg-secondary px-3 py-1.5 text-sm text-primary hover:border-primary disabled:cursor-default disabled:opacity-60 focus-visible:ring-2 focus-visible:ring-ring", children: [
+      /* @__PURE__ */ jsx(FileText, { className: "size-3.5" }),
+      doc.label
+    ] }, doc.id))
+  ] }, direction)) });
+}
+export {
+  DocumentLinks
+};

package/dist/components/draft-row-actions.d.ts

@@ -0,0 +1,14 @@
+export type DraftDeleteResult = string | null | void | Promise<string | null | void>;
+export interface DraftRowActionsProps {
+    status: string;
+    docLabel: string;
+    docNo: string;
+    onEdit: () => void;
+    /** Return a nonempty message or reject to keep the dialog open; null/undefined means success. */
+    onDelete: () => DraftDeleteResult;
+    editableStatuses?: string[];
+    align?: 'center' | 'end';
+    disabled?: boolean;
+}
+/** Reusable editable-record actions with deletion confirmation; no document store or deletion API. */
+export declare function DraftRowActions({ status, docLabel, docNo, onEdit, onDelete, editableStatuses, align, disabled }: DraftRowActionsProps): import("react").JSX.Element | null;