@pisell/materials 6.3.27 → 6.3.28

package/lib/components/pisellShellFrame/PisellShellFrame.stories.js

@@ -0,0 +1,129 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pisellShellFrame/PisellShellFrame.stories.tsx
+var PisellShellFrame_stories_exports = {};
+__export(PisellShellFrame_stories_exports, {
+  Full: () => Full,
+  TitleOnly: () => TitleOnly,
+  WithScrollBatchAndStatus: () => WithScrollBatchAndStatus,
+  WithStatisticCollapsible: () => WithStatisticCollapsible,
+  WithToolbar: () => WithToolbar,
+  default: () => PisellShellFrame_stories_default
+});
+module.exports = __toCommonJS(PisellShellFrame_stories_exports);
+var import_antd = require("antd");
+var import_PisellShellFrame = require("./PisellShellFrame");
+var meta = {
+  title: "Pro Components/PisellShellFrame",
+  component: import_PisellShellFrame.PisellShellFrame,
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component: "通用壳层布局组件，通过 config 控制各区域显隐，支持标题区、工具区、统计区（可折叠）、滚动内容、批量操作条、状态提示区。"
+      }
+    }
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    config: {
+      description: "各区域显隐与行为配置"
+    }
+  }
+};
+var PisellShellFrame_stories_default = meta;
+var TitleOnly = {
+  args: {
+    config: { showTitle: true },
+    title: "页面标题",
+    subtitle: "副标题",
+    titleExtra: /* @__PURE__ */ React.createElement(import_antd.Button, { type: "primary" }, "操作"),
+    children: /* @__PURE__ */ React.createElement("div", { style: { padding: 24 } }, "主内容区域")
+  }
+};
+var WithToolbar = {
+  args: {
+    config: { showTitle: true, showToolbar: true },
+    title: "列表页",
+    subtitle: "通过工具栏筛选与排序",
+    toolbar: /* @__PURE__ */ React.createElement(import_antd.Space, null, /* @__PURE__ */ React.createElement(import_antd.Button, null, "筛选"), /* @__PURE__ */ React.createElement(import_antd.Button, null, "排序"), /* @__PURE__ */ React.createElement(import_antd.Button, { type: "primary" }, "新建")),
+    children: /* @__PURE__ */ React.createElement("div", { style: { padding: 24 } }, Array.from({ length: 5 }, (_, i) => /* @__PURE__ */ React.createElement(import_antd.Card, { key: i, size: "small", style: { marginBottom: 8 } }, "列表项 ", i + 1)))
+  }
+};
+var WithStatisticCollapsible = {
+  args: {
+    config: {
+      showTitle: true,
+      showStatistic: true,
+      statisticCollapsible: true
+    },
+    title: "数据概览",
+    statisticList: /* @__PURE__ */ React.createElement(import_antd.Space, { size: "large" }, /* @__PURE__ */ React.createElement(import_antd.Statistic, { title: "总数", value: 1234 }), /* @__PURE__ */ React.createElement(import_antd.Statistic, { title: "今日", value: 56 }), /* @__PURE__ */ React.createElement(import_antd.Statistic, { title: "待处理", value: 12 })),
+    children: /* @__PURE__ */ React.createElement("div", { style: { padding: 24 } }, /* @__PURE__ */ React.createElement("p", null, "中间为主内容插槽，统计区可点击「展开统计」/「收起统计」折叠（文案已国际化）。"))
+  }
+};
+var WithScrollBatchAndStatus = {
+  args: {
+    config: {
+      showTitle: true,
+      showToolbar: true,
+      showStatistic: true,
+      statisticCollapsible: true,
+      scroll: true,
+      showBatchActionBar: true,
+      showStatusArea: true
+    },
+    title: "完整壳层示例",
+    subtitle: "含滚动、批量条、状态区",
+    toolbar: /* @__PURE__ */ React.createElement(import_antd.Space, null, /* @__PURE__ */ React.createElement(import_antd.Button, null, "刷新"), /* @__PURE__ */ React.createElement(import_antd.Button, { type: "primary" }, "导出")),
+    statisticList: /* @__PURE__ */ React.createElement(import_antd.Space, { size: "large" }, /* @__PURE__ */ React.createElement(import_antd.Statistic, { title: "已选", value: 3 }), /* @__PURE__ */ React.createElement(import_antd.Statistic, { title: "合计", value: 999 })),
+    batchActionBar: /* @__PURE__ */ React.createElement(import_antd.Space, null, /* @__PURE__ */ React.createElement("span", null, "已选 3 项"), /* @__PURE__ */ React.createElement(import_antd.Button, { size: "small" }, "批量删除"), /* @__PURE__ */ React.createElement(import_antd.Button, { size: "small" }, "取消选择")),
+    statusArea: /* @__PURE__ */ React.createElement(import_antd.Spin, { size: "small" }),
+    children: /* @__PURE__ */ React.createElement("div", { style: { padding: 24, minHeight: 200 } }, Array.from({ length: 12 }, (_, i) => /* @__PURE__ */ React.createElement(import_antd.Card, { key: i, size: "small", style: { marginBottom: 12 } }, "可滚动内容块 ", i + 1)))
+  }
+};
+var Full = {
+  args: {
+    config: {
+      showTitle: true,
+      showToolbar: true,
+      showStatistic: true,
+      statisticCollapsible: true,
+      scroll: true,
+      showBatchActionBar: true,
+      showStatusArea: true
+    },
+    title: "壳层全区域",
+    subtitle: "标题 / 工具 / 统计(可折叠) / 滚动内容 / 批量条 / 状态区",
+    titleExtra: /* @__PURE__ */ React.createElement(import_antd.Button, null, "辅助操作"),
+    toolbar: /* @__PURE__ */ React.createElement(import_antd.Space, null, /* @__PURE__ */ React.createElement(import_antd.Button, null, "工具 A"), /* @__PURE__ */ React.createElement(import_antd.Button, null, "工具 B")),
+    statisticList: /* @__PURE__ */ React.createElement(import_antd.Space, { size: "large" }, /* @__PURE__ */ React.createElement(import_antd.Statistic, { title: "指标 A", value: 100 }), /* @__PURE__ */ React.createElement(import_antd.Statistic, { title: "指标 B", value: 200 })),
+    batchActionBar: /* @__PURE__ */ React.createElement("div", { style: { padding: "4px 0" } }, "批量操作条占位"),
+    statusArea: /* @__PURE__ */ React.createElement("span", { style: { fontSize: 12, color: "#666" } }, "已同步 · 刚刚"),
+    children: /* @__PURE__ */ React.createElement("div", { style: { padding: 24 } }, /* @__PURE__ */ React.createElement("p", null, "Layout 插槽：此处可放置表格、看板、日历、楼层图等。"))
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Full,
+  TitleOnly,
+  WithScrollBatchAndStatus,
+  WithStatisticCollapsible,
+  WithToolbar
+});

package/lib/components/pisellShellFrame/index.d.ts

@@ -0,0 +1,2 @@
+export { PisellShellFrame, default } from './PisellShellFrame';
+export type { PisellShellFrameProps, PisellShellFrameConfig, PisellShellFrameScrollConfig, } from './types';

package/lib/components/pisellShellFrame/index.js

@@ -0,0 +1,40 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pisellShellFrame/index.tsx
+var pisellShellFrame_exports = {};
+__export(pisellShellFrame_exports, {
+  PisellShellFrame: () => import_PisellShellFrame.PisellShellFrame,
+  default: () => import_PisellShellFrame.default
+});
+module.exports = __toCommonJS(pisellShellFrame_exports);
+var import_PisellShellFrame = __toESM(require("./PisellShellFrame"));
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PisellShellFrame
+});

package/lib/components/pisellShellFrame/types.d.ts

@@ -0,0 +1,56 @@
+import type { ReactNode, CSSProperties } from 'react';
+/**
+ * 滚动配置：为 true 时使用默认滚动；为对象时传入样式或 scroll 相关配置。
+ */
+export declare type PisellShellFrameScrollConfig = boolean | {
+    style?: CSSProperties;
+    className?: string;
+};
+/**
+ * PisellShellFrame 配置：控制各区域的展示与行为。
+ * 不同展示类型（表格/看板/日历等）复用同一壳层，通过配置控制显隐。
+ */
+export interface PisellShellFrameConfig {
+    /** 是否展示顶部标题区（标题/副标题/辅助信息） */
+    showTitle?: boolean;
+    /** 是否展示顶部工具区（Toolbar） */
+    showToolbar?: boolean;
+    /** 是否展示顶部统计区（Statistic List） */
+    showStatistic?: boolean;
+    /** 统计区是否支持折叠，仅 showStatistic 为 true 时有效 */
+    statisticCollapsible?: boolean;
+    /** 中间内容区是否使用滚动承载包裹；为 true 时默认 overflow auto */
+    scroll?: PisellShellFrameScrollConfig;
+    /** 是否展示底部批量操作条（按选中状态出现由调用方控制，此处仅控制是否渲染该槽位） */
+    showBatchActionBar?: boolean;
+    /** 是否展示底部状态提示区（加载/错误/同步提示等） */
+    showStatusArea?: boolean;
+}
+/**
+ * PisellShellFrame 组件 Props。
+ * 通过 config 控制各区域显隐，通过 slot props 传入各区域内容。
+ */
+export interface PisellShellFrameProps {
+    /** 类名 */
+    className?: string;
+    /** 内联样式 */
+    style?: CSSProperties;
+    /** 区域显隐与行为配置，未传则默认不展示可选区域 */
+    config?: PisellShellFrameConfig;
+    /** 标题 */
+    title?: ReactNode;
+    /** 副标题 */
+    subtitle?: ReactNode;
+    /** 标题区右侧辅助信息 */
+    titleExtra?: ReactNode;
+    /** 工具栏内容 */
+    toolbar?: ReactNode;
+    /** 统计列表内容（如 PisellStatisticList 或自定义） */
+    statisticList?: ReactNode;
+    /** 主内容（表格/看板/日历/楼层图等），当 config.scroll 为 true 时会被滚动容器包裹 */
+    children?: ReactNode;
+    /** 批量操作条，通常按选中状态显隐由调用方控制 */
+    batchActionBar?: ReactNode;
+    /** 状态提示（加载/错误/同步提示等） */
+    statusArea?: ReactNode;
+}

package/lib/components/pisellShellFrame/types.js

@@ -0,0 +1,17 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pisellShellFrame/types.ts
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);

package/lib/components/pisellSingleLineText/PisellSingleLineText.stories.js

@@ -59,7 +59,7 @@ var import_icons = require("@ant-design/icons");
 var import_antd = require("antd");
 var import_react = __toESM(require("react"));
 var meta = {
-  title: "表单/PisellSingleLineText",
+  title: "表单/表单组件/PisellSingleLineText",
   component: import_PisellSingleLineText.PisellSingleLineText,
   parameters: {
     layout: "centered",

package/lib/components/pisellSingleLineText/index.d.ts

@@ -1,6 +1,7 @@
 /**
  * PisellSingleLineText 组件导出
  */
-export { default as PisellSingleLineText } from './PisellSingleLineText';
+import PisellSingleLineText from './PisellSingleLineText';
+export { PisellSingleLineText };
 export type { PisellSingleLineTextProps } from './types';
 export type { DisplayState, ValidationResult, TextInputState } from './types';

package/lib/components/pisellSingleLineText/index.js

@@ -32,7 +32,14 @@ __export(pisellSingleLineText_exports, {
   PisellSingleLineText: () => import_PisellSingleLineText.default
 });
 module.exports = __toCommonJS(pisellSingleLineText_exports);
+var import_locales = require("../../locales");
 var import_PisellSingleLineText = __toESM(require("./PisellSingleLineText"));
+import_PisellSingleLineText.default.SortOptions = {
+  getSortItems: (fieldKey) => [
+    { key: `${fieldKey}:asc`, label: (0, import_locales.getText)("sort-a-z") },
+    { key: `${fieldKey}:desc`, label: (0, import_locales.getText)("sort-z-a") }
+  ]
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   PisellSingleLineText

package/lib/components/pisellSingleSelect/PisellSingleSelect.less

@@ -1,53 +1,118 @@
 /**
  * PisellSingleSelect 组件样式
- * 
- * 注意：大部分样式通过 tokens.ts 中的 Select Token 配置实现
- * 此文件仅包含 Token 无法实现的样式
+ * 基于 Figma 设计规范，覆盖时使用 pisell-lowcode-xxx
  */
 
 .pisell-single-select {
+  height: 48px !important;
   width: 100%;
 
-  // 包装器布局（Token 无法配置）
+  .pisell-lowcode-select-clear {
+    color: #667085;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 44px;
+    min-height: 44px;
+    margin: -22px -8px;
+    padding: 10px 8px;
+
+    &:hover {
+      color: #344054;
+    }
+  }
+
+  // Select 触发器（Figma 设计规范，与 Input 体系一致）
+  .pisell-lowcode-select:not(.pisell-lowcode-select-disabled):not(.pisell-lowcode-select-customize-input) {
+    .pisell-lowcode-select-selector {
+      font-size: 16px !important;
+      line-height: 24px !important;
+      border-radius: 8px !important;
+      border: 1px solid #d0d5dd !important; // Gray/300
+      padding: 12px 16px !important;
+      min-height: 48px !important;
+      color: #101828 !important; // Gray/900
+      background-color: #ffffff !important;
+    }
+
+    &.pisell-lowcode-select-open .pisell-lowcode-select-selector {
+      border-color: #d6bbfb !important; // Primary/300
+      box-shadow: 0 0 0 4px #f4ebff !important; // Primary/100
+    }
+
+    &:not(.pisell-lowcode-select-open):not(.pisell-lowcode-select-disabled)
+    .pisell-lowcode-select-selector:hover {
+      border-color: #b692f6 !important; // Primary/400
+    }
+
+    &.pisell-lowcode-select-disabled .pisell-lowcode-select-selector {
+      background-color: #f9fafb !important; // Gray/50
+      color: #98a2b3 !important; // Gray/400
+      border-color: #d0d5dd !important;
+      cursor: not-allowed !important;
+    }
+
+    .pisell-lowcode-select-selection-placeholder {
+      color: #667085 !important; // Gray/500
+    }
+
+    .pisell-lowcode-select-arrow {
+      color: #667085;
+    }
+
+    .pisell-lowcode-select-clear {
+      color: #667085;
+
+      &:hover {
+        color: #344054;
+      }
+    }
+  }
+
   &-wrapper {
     display: flex;
     flex-direction: column;
     gap: 8px;
+    position: relative;
+
+    // 下拉选项高度 48px（通过 getPopupContainer 挂到 wrapper 内）
+    .pisell-single-select-dropdown .pisell-lowcode-select-item {
+      min-height: 48px !important;
+      height: 48px !important;
+      line-height: 48px !important;
+      padding: 0 16px !important;
+      font-size: 16px !important;
+    }
   }
 
-  // 标签（Token 无法配置的自定义元素）
   &-label {
-    font-family: 'Inter', sans-serif;
     font-size: 14px;
     font-weight: 600;
-    color: #344054;
+    color: #344054; // Gray/700
     line-height: 20px;
 
     &-required::after {
       content: ' *';
-      color: #D92D20;
+      color: #d92d20; // Error/600
       margin-left: 0;
     }
   }
 
-  // 辅助文本（Token 无法配置的自定义元素）
   &-helper-text {
     font-size: 14px;
     font-weight: 400;
-    color: #667085;
+    color: #667085; // Gray/500
     line-height: 20px;
   }
 
-  // 错误文本（Token 无法配置的自定义元素）
   &-error-text {
-    font-size: 14px;
+    font-size: 12px;
     font-weight: 400;
-    color: #D92D20;
-    line-height: 20px;
-    animation: fadeIn 0.3s ease-in-out;
+    color: #d92d20; // Error/600
+    line-height: 1.5;
+    animation: pisell-single-select-fadeIn 0.3s ease-in-out;
   }
 
-  // 下拉选项中的勾选图标（Figma 设计）
   &-option-content {
     display: flex;
     align-items: center;
@@ -56,20 +121,10 @@
   }
 
   &-option-check {
-    color: #7F56D9; // Primary/600
+    color: #7f56d9; // Primary/600
     font-size: 16px;
     margin-left: 8px;
   }
-
-  // hover 边框颜色（Token 不支持 colorBorderHover）
-  :global {
-    // hover 边框颜色
-    .pisell-lowcode-select:not(.pisell-lowcode-select-disabled):not(.pisell-lowcode-select-customize-input):not(.pisell-lowcode-select-open) {
-      .pisell-lowcode-select-selector:hover {
-        border-color: #D6BBFB !important;
-      }
-    }
-  }
 }
 
 // 下拉框内的搜索框样式（Figma 设计）
@@ -101,37 +156,40 @@
 }
 
 .pisell-single-select {
-  // 错误状态（Token 无法单独配置错误边框颜色）
+  // 错误状态（Figma 设计体系 Error 色）
   &-error {
-    :global(.ant-select-selector) {
-      border-color: #D92D20 !important;
+    .pisell-lowcode-select .pisell-lowcode-select-selector {
+      border-color: #fda29b !important; // Error/300
 
       &:hover {
-        border-color: #D92D20 !important;
+        border-color: #f97066 !important; // Error/400
       }
     }
 
-    :global(.ant-select-focused .ant-select-selector) {
-      border-color: #D92D20 !important;
-      box-shadow: 0px 0px 0px 4px rgba(217, 45, 32, 0.1), 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
+    .pisell-lowcode-select.pisell-lowcode-select-focused .pisell-lowcode-select-selector,
+    .pisell-lowcode-select.pisell-lowcode-select-open .pisell-lowcode-select-selector {
+      border-color: #f97066 !important; // Error/400
+      box-shadow: 0 0 0 4px #fee4e2 !important; // Error/100
     }
   }
 
-  // 只读状态（完全自定义的显示，不使用 Select 组件）
+  // 只读状态：仅展示 Tag，无 Select 无外框，Tag 使用与 disabled 一致的样式
   &-readonly {
     &-display {
       display: flex;
       align-items: center;
       gap: 8px;
-      padding: 12px 16px;
-      background-color: #F9FAFB;
-      border: 1px solid #EAECF0;
-      border-radius: 8px;
-      min-height: 48px;
-      font-size: 16px;
-      font-weight: 500;
-      line-height: 24px;
-      color: #101828;
+      min-height: 24px;
+    }
+
+    &-tag {
+      margin: 0;
+      cursor: default;
+      border-radius: 12px;
+      border: 1px solid transparent;
+      font-size: 14px;
+      line-height: 22px;
+      padding: 2px 10px;
     }
 
     &-icon {
@@ -146,8 +204,7 @@
   }
 }
 
-// 动画
-@keyframes fadeIn {
+@keyframes pisell-single-select-fadeIn {
   from {
     opacity: 0;
     transform: translateY(-4px);

package/lib/components/pisellSingleSelect/PisellSingleSelect.stories.js

@@ -51,7 +51,7 @@ var import_react = require("react");
 var import_antd = require("antd");
 var import_react2 = __toESM(require("react"));
 var meta = {
-  title: "Components/PisellSingleSelect",
+  title: "表单/表单组件/PisellSingleSelect",
   component: import_PisellSingleSelect.default,
   tags: ["autodocs"],
   argTypes: {

package/lib/components/pisellSingleSelect/components/EditView.js

@@ -90,6 +90,7 @@ var EditView = (0, import_react.forwardRef)((props, ref) => {
       (opt) => opt.label.toLowerCase().includes(searchKeyword.toLowerCase())
     );
   }, [antdOptions, searchKeyword, showSearch, filterOption, options]);
+  const wrapperRef = (0, import_react.useRef)(null);
   const menuItemSelectedIcon = /* @__PURE__ */ import_react.default.createElement(import_icons.CheckOutlined, { style: { color: "#7F56D9", fontSize: 16 } });
   const dropdownRender = (0, import_react.useCallback)(
     (menu) => {
@@ -109,7 +110,7 @@ var EditView = (0, import_react.forwardRef)((props, ref) => {
     },
     [showSearch, searchKeyword, handleSearchInput]
   );
-  return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)("pisell-single-select-wrapper", className), style }, label && /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ import_react.default.createElement("div", { ref: wrapperRef, className: (0, import_classnames.default)("pisell-single-select-wrapper", className), style }, label && /* @__PURE__ */ import_react.default.createElement(
     "label",
     {
       className: (0, import_classnames.default)("pisell-single-select-label", {
@@ -131,6 +132,8 @@ var EditView = (0, import_react.forwardRef)((props, ref) => {
       dropdownRender,
       onChange: handleChange,
       size,
+      popupClassName: "pisell-single-select-dropdown",
+      getPopupContainer: () => wrapperRef.current ?? document.body,
       className: (0, import_classnames.default)("pisell-single-select", {
         "pisell-single-select-error": error
       })

package/lib/components/pisellSingleSelect/components/ReadOnlyView.d.ts

@@ -1,6 +1,6 @@
 /**
  * PisellSingleSelect - ReadOnlyView (只读态视图)
- * 只读状态下的渲染
+ * 只读状态下使用 Tag 展示选中值
  */
 import React from 'react';
 import type { ReadOnlyViewProps } from '../types';

package/lib/components/pisellSingleSelect/components/ReadOnlyView.js

@@ -33,17 +33,12 @@ __export(ReadOnlyView_exports, {
 });
 module.exports = __toCommonJS(ReadOnlyView_exports);
 var import_react = __toESM(require("react"));
+var import_antd = require("antd");
 var import_classnames = __toESM(require("classnames"));
 var import_utils = require("@pisell/utils");
+var import_tagColor = require("../../../utils/tagColor");
 var ReadOnlyView = (props) => {
-  const {
-    value,
-    options,
-    label,
-    required,
-    className,
-    style
-  } = props;
+  const { value, options, label, required, className, style } = props;
   const selectedOption = (0, import_react.useMemo)(
     () => value !== null && value !== void 0 ? (0, import_utils.findOptionByValue)(value, options) : void 0,
     [value, options]
@@ -67,7 +62,15 @@ var ReadOnlyView = (props) => {
       },
       label
     ),
-    /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-single-select-readonly-display" }, selectedOption ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, selectedOption.icon && /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-single-select-readonly-icon" }, selectedOption.icon), /* @__PURE__ */ import_react.default.createElement("span", null, selectedOption.label)) : /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-single-select-readonly-empty" }, "-"))
+    /* @__PURE__ */ import_react.default.createElement("div", { className: "pisell-single-select-readonly-display" }, selectedOption ? /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Tag,
+      {
+        className: "pisell-single-select-readonly-tag",
+        color: selectedOption.color ?? (0, import_tagColor.getDefaultTagColor)(selectedOption.value, 0)
+      },
+      selectedOption.icon && /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-single-select-readonly-tag-icon" }, selectedOption.icon),
+      selectedOption.label
+    ) : /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-single-select-readonly-empty" }, "-"))
   );
 };
 ReadOnlyView.displayName = "PisellSingleSelectReadOnlyView";

package/lib/components/pisellSingleSelect/index.d.ts

@@ -1,6 +1,7 @@
 /**
  * PisellSingleSelect 组件导出
  */
-export { default as PisellSingleSelect } from './PisellSingleSelect';
+import PisellSingleSelect from './PisellSingleSelect';
+export { PisellSingleSelect };
 export type { PisellSingleSelectProps, SingleSelectRef, EditViewProps, DisabledViewProps, ReadOnlyViewProps, } from './types';
 export type { SelectOption, FilterOptionFunc, SortDirection, SelectState, } from './types';

package/lib/components/pisellSingleSelect/index.js

@@ -32,7 +32,14 @@ __export(pisellSingleSelect_exports, {
   PisellSingleSelect: () => import_PisellSingleSelect.default
 });
 module.exports = __toCommonJS(pisellSingleSelect_exports);
+var import_locales = require("../../locales");
 var import_PisellSingleSelect = __toESM(require("./PisellSingleSelect"));
+import_PisellSingleSelect.default.SortOptions = {
+  getSortItems: (fieldKey) => [
+    { key: `${fieldKey}:asc`, label: (0, import_locales.getText)("sort-first-last") },
+    { key: `${fieldKey}:desc`, label: (0, import_locales.getText)("sort-last-first") }
+  ]
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   PisellSingleSelect

package/lib/components/pisellTimeRangeDisplay/PisellTimeRangeDisplay.js

@@ -39,8 +39,10 @@ var import_zh_cn = require("dayjs/locale/zh-cn");
 var import_en = require("dayjs/locale/en");
 var import_utils = require("./utils");
 var import_components = require("./components");
+var import_useEngineContext = __toESM(require("../../hooks/useEngineContext"));
 var import_PisellTimeRangeDisplay = require("./PisellTimeRangeDisplay.less");
 var PisellTimeRangeDisplay = (props) => {
+  var _a, _b;
   const {
     startAt,
     endAt,
@@ -61,9 +63,11 @@ var PisellTimeRangeDisplay = (props) => {
     style,
     onClick
   } = props;
+  const context = (0, import_useEngineContext.default)();
+  const resolvedLocale = localeProp || ((_b = (_a = context == null ? void 0 : context.engine) == null ? void 0 : _a.props) == null ? void 0 : _b.locale) || "en";
   const effectiveLocale = (0, import_react.useMemo)(
-    () => localeProp ?? (0, import_utils.getDayjsLocale)(),
-    [localeProp]
+    () => (0, import_utils.getDayjsLocale)(resolvedLocale),
+    [resolvedLocale]
   );
   const { start, end, isSameDay } = (0, import_react.useMemo)(
     () => (0, import_utils.parseTimeRange)(startAt, endAt, effectiveLocale),

package/lib/components/pisellTimeRangeDisplay/utils/formatDuration.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 将毫秒数格式化为持续时间字符串（d h m s 或 天/时/分/秒）
+ *
+ * @param ms 持续时间（毫秒）
+ * @param showSeconds 是否显示秒，默认 false
+ * @param locale 语言代码，zh 时使用「天/时/分/秒」，否则使用 d/h/m/s
+ * @returns 如 "2h30m"、"1d2h30m23s" 或 "2时30分"、"1天2时30分23秒"
+ *
+ * @example
+ * formatDuration(9000000, false)        // => "2h30m"
+ * formatDuration(9000000, false, 'zh-cn') // => "2时30分"
+ * formatDuration(86400000, false)       // => "1d"
+ */
+export declare function formatDuration(ms: number, showSeconds?: boolean, locale?: string): string;