@pisell/materials 1.8.12 → 1.8.14

package/es/components/pisellShellFrame/PisellShellFrame.less

@@ -0,0 +1,78 @@
+// PisellShellFrame 壳层布局：顶部标题/工具/统计、中间滚动+插槽、底部批量条/状态区
+.pisell-shell-frame {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+
+  &-header {
+    flex-shrink: 0;
+  }
+
+  &-title {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 16px;
+    margin-bottom: 8px;
+    .pisell-shell-frame-title-main {
+      font-size: 16px;
+      font-weight: 600;
+    }
+    .pisell-shell-frame-title-sub {
+      font-size: 12px;
+      color: rgba(0, 0, 0, 0.45);
+      margin-left: 8px;
+    }
+    .pisell-shell-frame-title-extra {
+      flex-shrink: 0;
+    }
+  }
+
+  &-toolbar {
+    margin-bottom: 8px;
+  }
+
+  &-statistic {
+    margin-bottom: 8px;
+    &-collapse-header {
+      cursor: pointer;
+      user-select: none;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      font-size: 12px;
+      color: rgba(0, 0, 0, 0.45);
+    }
+  }
+
+  &-body {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  &-scroll {
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+  }
+
+  &-footer {
+    flex-shrink: 0;
+  }
+
+  &-batch-bar {
+    margin-top: 8px;
+    /* 无内容时不占位，避免多余 margin */
+    &:empty {
+      margin-top: 0;
+      display: none;
+    }
+  }
+
+  &-status {
+    margin-top: 8px;
+  }
+}

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

@@ -0,0 +1,195 @@
+import { Button, Card, Space, Spin, Statistic } from 'antd';
+import { PisellShellFrame } from "./PisellShellFrame";
+var meta = {
+  title: 'Pro Components/PisellShellFrame',
+  component: PisellShellFrame,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component: '通用壳层布局组件，通过 config 控制各区域显隐，支持标题区、工具区、统计区（可折叠）、滚动内容、批量操作条、状态提示区。'
+      }
+    }
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    config: {
+      description: '各区域显隐与行为配置'
+    }
+  }
+};
+export default meta;
+/** 仅标题区 */
+export var TitleOnly = {
+  args: {
+    config: {
+      showTitle: true
+    },
+    title: '页面标题',
+    subtitle: '副标题',
+    titleExtra: /*#__PURE__*/React.createElement(Button, {
+      type: "primary"
+    }, "\u64CD\u4F5C"),
+    children: /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: 24
+      }
+    }, "\u4E3B\u5185\u5BB9\u533A\u57DF")
+  }
+};
+
+/** 标题 + 工具区 */
+export var WithToolbar = {
+  args: {
+    config: {
+      showTitle: true,
+      showToolbar: true
+    },
+    title: '列表页',
+    subtitle: '通过工具栏筛选与排序',
+    toolbar: /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(Button, null, "\u7B5B\u9009"), /*#__PURE__*/React.createElement(Button, null, "\u6392\u5E8F"), /*#__PURE__*/React.createElement(Button, {
+      type: "primary"
+    }, "\u65B0\u5EFA")),
+    children: /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: 24
+      }
+    }, Array.from({
+      length: 5
+    }, function (_, i) {
+      return /*#__PURE__*/React.createElement(Card, {
+        key: i,
+        size: "small",
+        style: {
+          marginBottom: 8
+        }
+      }, "\u5217\u8868\u9879 ", i + 1);
+    }))
+  }
+};
+
+/** 标题 + 统计区（可折叠，国际化） */
+export var WithStatisticCollapsible = {
+  args: {
+    config: {
+      showTitle: true,
+      showStatistic: true,
+      statisticCollapsible: true
+    },
+    title: '数据概览',
+    statisticList: /*#__PURE__*/React.createElement(Space, {
+      size: "large"
+    }, /*#__PURE__*/React.createElement(Statistic, {
+      title: "\u603B\u6570",
+      value: 1234
+    }), /*#__PURE__*/React.createElement(Statistic, {
+      title: "\u4ECA\u65E5",
+      value: 56
+    }), /*#__PURE__*/React.createElement(Statistic, {
+      title: "\u5F85\u5904\u7406",
+      value: 12
+    })),
+    children: /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: 24
+      }
+    }, /*#__PURE__*/React.createElement("p", null, "\u4E2D\u95F4\u4E3A\u4E3B\u5185\u5BB9\u63D2\u69FD\uFF0C\u7EDF\u8BA1\u533A\u53EF\u70B9\u51FB\u300C\u5C55\u5F00\u7EDF\u8BA1\u300D/\u300C\u6536\u8D77\u7EDF\u8BA1\u300D\u6298\u53E0\uFF08\u6587\u6848\u5DF2\u56FD\u9645\u5316\uFF09\u3002"))
+  }
+};
+
+/** 中间滚动 + 底部批量条 + 状态区 */
+export var WithScrollBatchAndStatus = {
+  args: {
+    config: {
+      showTitle: true,
+      showToolbar: true,
+      showStatistic: true,
+      statisticCollapsible: true,
+      scroll: true,
+      showBatchActionBar: true,
+      showStatusArea: true
+    },
+    title: '完整壳层示例',
+    subtitle: '含滚动、批量条、状态区',
+    toolbar: /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(Button, null, "\u5237\u65B0"), /*#__PURE__*/React.createElement(Button, {
+      type: "primary"
+    }, "\u5BFC\u51FA")),
+    statisticList: /*#__PURE__*/React.createElement(Space, {
+      size: "large"
+    }, /*#__PURE__*/React.createElement(Statistic, {
+      title: "\u5DF2\u9009",
+      value: 3
+    }), /*#__PURE__*/React.createElement(Statistic, {
+      title: "\u5408\u8BA1",
+      value: 999
+    })),
+    batchActionBar: /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement("span", null, "\u5DF2\u9009 3 \u9879"), /*#__PURE__*/React.createElement(Button, {
+      size: "small"
+    }, "\u6279\u91CF\u5220\u9664"), /*#__PURE__*/React.createElement(Button, {
+      size: "small"
+    }, "\u53D6\u6D88\u9009\u62E9")),
+    statusArea: /*#__PURE__*/React.createElement(Spin, {
+      size: "small"
+    }),
+    children: /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: 24,
+        minHeight: 200
+      }
+    }, Array.from({
+      length: 12
+    }, function (_, i) {
+      return /*#__PURE__*/React.createElement(Card, {
+        key: i,
+        size: "small",
+        style: {
+          marginBottom: 12
+        }
+      }, "\u53EF\u6EDA\u52A8\u5185\u5BB9\u5757 ", i + 1);
+    }))
+  }
+};
+
+/** 全区域展示（默认展开统计） */
+export var Full = {
+  args: {
+    config: {
+      showTitle: true,
+      showToolbar: true,
+      showStatistic: true,
+      statisticCollapsible: true,
+      scroll: true,
+      showBatchActionBar: true,
+      showStatusArea: true
+    },
+    title: '壳层全区域',
+    subtitle: '标题 / 工具 / 统计(可折叠) / 滚动内容 / 批量条 / 状态区',
+    titleExtra: /*#__PURE__*/React.createElement(Button, null, "\u8F85\u52A9\u64CD\u4F5C"),
+    toolbar: /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(Button, null, "\u5DE5\u5177 A"), /*#__PURE__*/React.createElement(Button, null, "\u5DE5\u5177 B")),
+    statisticList: /*#__PURE__*/React.createElement(Space, {
+      size: "large"
+    }, /*#__PURE__*/React.createElement(Statistic, {
+      title: "\u6307\u6807 A",
+      value: 100
+    }), /*#__PURE__*/React.createElement(Statistic, {
+      title: "\u6307\u6807 B",
+      value: 200
+    })),
+    batchActionBar: /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: '4px 0'
+      }
+    }, "\u6279\u91CF\u64CD\u4F5C\u6761\u5360\u4F4D"),
+    statusArea: /*#__PURE__*/React.createElement("span", {
+      style: {
+        fontSize: 12,
+        color: '#666'
+      }
+    }, "\u5DF2\u540C\u6B65 \xB7 \u521A\u521A"),
+    children: /*#__PURE__*/React.createElement("div", {
+      style: {
+        padding: 24
+      }
+    }, /*#__PURE__*/React.createElement("p", null, "Layout \u63D2\u69FD\uFF1A\u6B64\u5904\u53EF\u653E\u7F6E\u8868\u683C\u3001\u770B\u677F\u3001\u65E5\u5386\u3001\u697C\u5C42\u56FE\u7B49\u3002"))
+  }
+};

package/es/components/pisellShellFrame/index.js

@@ -0,0 +1 @@
+export { PisellShellFrame, default } from "./PisellShellFrame";

package/es/components/pisellShellFrame/types.js

@@ -0,0 +1 @@
+export {};

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

@@ -13,7 +13,7 @@ import React from 'react';
  * - 丰富的配置项
  */
 var meta = {
-  title: '表单/PisellSingleLineText',
+  title: '表单/表单组件/PisellSingleLineText',
   component: PisellSingleLineText,
   parameters: {
     layout: 'centered',

package/es/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/es/components/pisellSingleLineText/index.js

@@ -2,6 +2,21 @@
  * PisellSingleLineText 组件导出
  */
 
-export { default as PisellSingleLineText } from "./PisellSingleLineText";
+import { getText } from "../../locales";
+import PisellSingleLineText from "./PisellSingleLineText";
+
+/** RecordBoard 列 type 联动排序：内置 A → Z / Z → A */
+PisellSingleLineText.SortOptions = {
+  getSortItems: function getSortItems(fieldKey) {
+    return [{
+      key: "".concat(fieldKey, ":asc"),
+      label: getText('sort-a-z')
+    }, {
+      key: "".concat(fieldKey, ":desc"),
+      label: getText('sort-z-a')
+    }];
+  }
+};
+export { PisellSingleLineText };
 
 // 公共类型从 types 中重新导出，方便使用

package/es/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/es/components/pisellSingleSelect/PisellSingleSelect.stories.js

@@ -20,7 +20,7 @@ import React from 'react';
  * 用于展示和测试组件的各种状态和配置
  */
 var meta = {
-  title: 'Components/PisellSingleSelect',
+  title: '表单/表单组件/PisellSingleSelect',
   component: PisellSingleSelect,
   tags: ['autodocs'],
   argTypes: {

package/es/components/pisellSingleSelect/components/EditView.js

@@ -13,7 +13,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
  * 正常可编辑状态下的渲染
  */
 
-import React, { forwardRef, useMemo, useCallback, useState } from 'react';
+import React, { forwardRef, useMemo, useCallback, useState, useRef } from 'react';
 import { Select, Input } from 'antd';
 import { CheckOutlined, SearchOutlined } from '@ant-design/icons';
 import classNames from 'classnames';
@@ -96,7 +96,7 @@ var EditView = /*#__PURE__*/forwardRef(function (props, ref) {
       return opt.label.toLowerCase().includes(searchKeyword.toLowerCase());
     });
   }, [antdOptions, searchKeyword, showSearch, filterOption, options]);
-
+  var wrapperRef = useRef(null);
   // 自定义选中图标
   var menuItemSelectedIcon = /*#__PURE__*/React.createElement(CheckOutlined, {
     style: {
@@ -126,6 +126,7 @@ var EditView = /*#__PURE__*/forwardRef(function (props, ref) {
     })), menu);
   }, [showSearch, searchKeyword, handleSearchInput]);
   return /*#__PURE__*/React.createElement("div", {
+    ref: wrapperRef,
     className: classNames('pisell-single-select-wrapper', className),
     style: style
   }, label && /*#__PURE__*/React.createElement("label", {
@@ -143,6 +144,11 @@ var EditView = /*#__PURE__*/forwardRef(function (props, ref) {
     dropdownRender: dropdownRender,
     onChange: handleChange,
     size: size,
+    popupClassName: "pisell-single-select-dropdown",
+    getPopupContainer: function getPopupContainer() {
+      var _wrapperRef$current;
+      return (_wrapperRef$current = wrapperRef.current) !== null && _wrapperRef$current !== void 0 ? _wrapperRef$current : document.body;
+    },
     className: classNames('pisell-single-select', {
       'pisell-single-select-error': error
     })

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

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

package/es/components/pisellSingleSelect/components/ReadOnlyView.js

@@ -1,20 +1,21 @@
 /**
  * PisellSingleSelect - ReadOnlyView (只读态视图)
- * 只读状态下的渲染
+ * 只读状态下使用 Tag 展示选中值
  */
 
 import React, { useMemo } from 'react';
+import { Tag } from 'antd';
 import classNames from 'classnames';
 import { findOptionByValue } from '@pisell/utils';
+import { getDefaultTagColor } from "../../../utils/tagColor";
 var ReadOnlyView = function ReadOnlyView(props) {
+  var _selectedOption$color;
   var value = props.value,
     options = props.options,
     label = props.label,
     required = props.required,
     className = props.className,
     style = props.style;
-
-  // 查找选中的选项
   var selectedOption = useMemo(function () {
     return value !== null && value !== undefined ? findOptionByValue(value, options) : undefined;
   }, [value, options]);
@@ -27,9 +28,12 @@ var ReadOnlyView = function ReadOnlyView(props) {
     })
   }, label), /*#__PURE__*/React.createElement("div", {
     className: "pisell-single-select-readonly-display"
-  }, selectedOption ? /*#__PURE__*/React.createElement(React.Fragment, null, selectedOption.icon && /*#__PURE__*/React.createElement("span", {
-    className: "pisell-single-select-readonly-icon"
-  }, selectedOption.icon), /*#__PURE__*/React.createElement("span", null, selectedOption.label)) : /*#__PURE__*/React.createElement("span", {
+  }, selectedOption ? /*#__PURE__*/React.createElement(Tag, {
+    className: "pisell-single-select-readonly-tag",
+    color: (_selectedOption$color = selectedOption.color) !== null && _selectedOption$color !== void 0 ? _selectedOption$color : getDefaultTagColor(selectedOption.value, 0)
+  }, selectedOption.icon && /*#__PURE__*/React.createElement("span", {
+    className: "pisell-single-select-readonly-tag-icon"
+  }, selectedOption.icon), selectedOption.label) : /*#__PURE__*/React.createElement("span", {
     className: "pisell-single-select-readonly-empty"
   }, "-")));
 };

package/es/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/es/components/pisellSingleSelect/index.js

@@ -2,6 +2,21 @@
  * PisellSingleSelect 组件导出
  */
 
-export { default as PisellSingleSelect } from "./PisellSingleSelect";
+import { getText } from "../../locales";
+import PisellSingleSelect from "./PisellSingleSelect";
+
+/** RecordBoard 列 type 联动排序：内置 First → Last / Last → First */
+PisellSingleSelect.SortOptions = {
+  getSortItems: function getSortItems(fieldKey) {
+    return [{
+      key: "".concat(fieldKey, ":asc"),
+      label: getText('sort-first-last')
+    }, {
+      key: "".concat(fieldKey, ":desc"),
+      label: getText('sort-last-first')
+    }];
+  }
+};
+export { PisellSingleSelect };
 
 // 公共类型从 types 中重新导出，方便使用