@pisell/materials 1.0.1034 → 1.0.1035

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (254) hide show
  1. package/build/lowcode/assets-daily.json +11 -11
  2. package/build/lowcode/assets-dev.json +2 -2
  3. package/build/lowcode/assets-prod.json +11 -11
  4. package/build/lowcode/index.js +1 -1
  5. package/build/lowcode/meta.js +1 -1
  6. package/build/lowcode/preview.js +17 -17
  7. package/build/lowcode/render/default/view.css +1 -1
  8. package/build/lowcode/render/default/view.js +18 -23
  9. package/build/lowcode/view.css +1 -1
  10. package/build/lowcode/view.js +27 -32
  11. package/es/components/Pagination/index.js +1 -1
  12. package/es/components/PisellCards/index.d.ts +6 -6
  13. package/es/components/calendar/index.d.ts +2 -2
  14. package/es/components/checkbox/index.d.ts +2 -2
  15. package/es/components/dataSourceComponents/dataSourceShow/dataSourceQRCode/index.d.ts +2 -2
  16. package/es/components/dataSourceComponents/fields/Input.Email/index.d.ts +2 -2
  17. package/es/components/dataSourceComponents/fields/Input.Password/index.d.ts +2 -2
  18. package/es/components/dataSourceComponents/fields/Input.Subdomain/index.d.ts +3 -3
  19. package/es/components/dataSourceComponents/fields/Input.TextArea/index.d.ts +2 -2
  20. package/es/components/dataSourceComponents/fields/Select/index.d.ts +1 -1
  21. package/es/components/date-picker/index.d.ts +2 -2
  22. package/es/components/filter/components/Dropdown/index.js +6 -2
  23. package/es/components/filter/components/FilterButton/index.js +3 -2
  24. package/es/components/filter/components/FilterButton/types.d.ts +5 -2
  25. package/es/components/filter/components/FilterItem/AsyncOptionsSelectWrapper.js +67 -0
  26. package/es/components/filter/components/FilterItem/index.js +105 -6
  27. package/es/components/filter/components/FilterItem/index.less +90 -0
  28. package/es/components/filter/types.d.ts +4 -2
  29. package/es/components/input/index.d.ts +2 -2
  30. package/es/components/pisell-config-provider/context.d.ts +2 -2
  31. package/es/components/pisellCurrency/PisellCurrency.less +163 -25
  32. package/es/components/pisellDatePicker/index.d.ts +2 -2
  33. package/es/components/pisellDateTimeDisplay/PisellDateTimeDisplay.js +11 -10
  34. package/es/components/pisellDateTimeDisplay/types.d.ts +5 -0
  35. package/es/components/pisellEmail/PisellEmail.d.ts +2 -33
  36. package/es/components/pisellEmail/PisellEmail.js +1 -1
  37. package/es/components/pisellEmail/PisellEmail.less +119 -10
  38. package/es/components/pisellEmail/index.d.ts +1 -1
  39. package/es/components/pisellFilter/docs/PisellFilter.md +289 -232
  40. package/es/components/pisellFilter/index.js +66 -11
  41. package/es/components/pisellLongText/PisellLongText.less +72 -4
  42. package/es/components/pisellLookup/PisellLookup.js +3 -3
  43. package/es/components/pisellLookup/PisellLookup.less +14 -9
  44. package/es/components/pisellLookup/components/LookupTrigger.js +6 -2
  45. package/es/components/pisellMetricCard/PisellMetricCard.d.ts +38 -0
  46. package/es/components/pisellMetricCard/PisellMetricCard.js +136 -0
  47. package/es/components/pisellMetricCard/components/MetricComparison.js +54 -0
  48. package/es/components/pisellMetricCard/components/MetricTitle.js +41 -0
  49. package/es/components/pisellMetricCard/components/MetricValue.js +26 -0
  50. package/es/components/pisellMetricCard/components/TrendIcon.js +26 -0
  51. package/es/components/pisellMetricCard/docs/pisellMetricCard.$tab-design.md +2 -6
  52. package/es/components/pisellMetricCard/index.d.ts +2 -0
  53. package/es/components/pisellMetricCard/types.d.ts +143 -0
  54. package/es/components/pisellMetricCard/utils/calculateTrend.js +22 -0
  55. package/es/components/pisellMetricCard/utils/formatMetricValue.js +52 -0
  56. package/es/components/pisellMultipleSelect/PisellMultipleSelect.less +151 -124
  57. package/es/components/pisellMultipleSelect/components/EditView.js +8 -1
  58. package/es/components/pisellMultipleSelect/components/ReadOnlyView.js +18 -6
  59. package/es/components/pisellNumber/PisellNumber.less +135 -17
  60. package/es/components/pisellPercent/PisellPercent.less +142 -24
  61. package/es/components/pisellPhone/PisellPhone.less +122 -27
  62. package/es/components/pisellPhone/components/EditView.js +1 -1
  63. package/es/components/pisellPhone/components/ReadOnlyView.js +15 -5
  64. package/es/components/pisellPhone/utils/countryCodeHelper.js +1 -10
  65. package/es/components/pisellRating/PisellRating.less +20 -12
  66. package/es/components/pisellRecordBoard/PisellRecordBoard.js +148 -0
  67. package/es/components/pisellRecordBoard/README.md +183 -0
  68. package/es/components/pisellRecordBoard/context/RecordBoardContext.js +7 -0
  69. package/es/components/pisellRecordBoard/context/RecordBoardProvider.js +14 -0
  70. package/es/components/pisellRecordBoard/docs/PisellRecordBoard.$tab-design.md +128 -0
  71. package/es/components/pisellRecordBoard/docs/PisellRecordBoard.$tab-dev.md +82 -0
  72. package/es/components/pisellRecordBoard/docs/PisellRecordBoard.$tab-test.md +70 -0
  73. package/es/components/pisellRecordBoard/docs/PisellRecordBoard.md +552 -0
  74. package/es/components/pisellRecordBoard/hooks/useRecordBoardContext.d.ts +20 -0
  75. package/es/components/pisellRecordBoard/hooks/useRecordBoardContext.js +16 -0
  76. package/es/components/pisellRecordBoard/index.d.ts +40 -0
  77. package/es/components/pisellRecordBoard/index.js +28 -0
  78. package/es/components/pisellRecordBoard/layouts/CardLayout/CardList.d.ts +15 -0
  79. package/es/components/pisellRecordBoard/layouts/CardLayout/CardList.js +24 -0
  80. package/es/components/pisellRecordBoard/layouts/CardLayout/index.d.ts +15 -0
  81. package/es/components/pisellRecordBoard/layouts/CardLayout/index.js +21 -0
  82. package/es/components/pisellRecordBoard/layouts/GridLayout/Grid.d.ts +17 -0
  83. package/es/components/pisellRecordBoard/layouts/GridLayout/Grid.js +105 -0
  84. package/es/components/pisellRecordBoard/layouts/GridLayout/Grid.less +13 -0
  85. package/es/components/pisellRecordBoard/layouts/GridLayout/index.d.ts +15 -0
  86. package/es/components/pisellRecordBoard/layouts/GridLayout/index.js +21 -0
  87. package/es/components/pisellRecordBoard/shellFrame/BatchActionBar/index.d.ts +12 -0
  88. package/es/components/pisellRecordBoard/shellFrame/BatchActionBar/index.js +69 -0
  89. package/es/components/pisellRecordBoard/shellFrame/ColumnSetting/ColumnSettingPopover.js +40 -0
  90. package/es/components/pisellRecordBoard/shellFrame/ColumnSetting/index.js +60 -0
  91. package/es/components/pisellRecordBoard/shellFrame/ColumnSetting/index.less +2 -0
  92. package/es/components/pisellRecordBoard/shellFrame/Pagination/index.d.ts +17 -0
  93. package/es/components/pisellRecordBoard/shellFrame/Pagination/index.js +52 -0
  94. package/es/components/pisellRecordBoard/shellFrame/Pagination/index.less +61 -0
  95. package/es/components/pisellRecordBoard/shellFrame/Search/index.d.ts +13 -0
  96. package/es/components/pisellRecordBoard/shellFrame/Search/index.js +34 -0
  97. package/es/components/pisellRecordBoard/shellFrame/ToolBar/ToolBarFilter.less +77 -0
  98. package/es/components/pisellRecordBoard/shellFrame/ToolBar/index.d.ts +14 -0
  99. package/es/components/pisellRecordBoard/shellFrame/ToolBar/index.js +136 -0
  100. package/es/components/pisellRecordBoard/shellFrame/ToolBarQuickFilter/index.d.ts +2 -0
  101. package/es/components/pisellRecordBoard/shellFrame/ToolBarQuickFilter/index.js +62 -0
  102. package/es/components/pisellRecordBoard/shellFrame/ToolBarReset/index.d.ts +2 -0
  103. package/es/components/pisellRecordBoard/shellFrame/ToolBarReset/index.js +45 -0
  104. package/es/components/pisellRecordBoard/shellFrame/ToolBarReset/index.less +41 -0
  105. package/es/components/pisellRecordBoard/shellFrame/index.d.ts +27 -0
  106. package/es/components/pisellRecordBoard/shellFrame/index.js +38 -0
  107. package/es/components/pisellRecordBoard/types.d.ts +259 -0
  108. package/es/components/pisellRecordBoard/utils/recordBoardColumns.js +287 -0
  109. package/es/components/pisellShellFrame/PisellShellFrame.d.ts +16 -0
  110. package/es/components/pisellShellFrame/PisellShellFrame.js +60 -0
  111. package/es/components/pisellShellFrame/PisellShellFrame.less +73 -0
  112. package/es/components/pisellShellFrame/README.md +58 -0
  113. package/es/components/pisellShellFrame/index.d.ts +2 -0
  114. package/es/components/pisellShellFrame/types.d.ts +60 -0
  115. package/es/components/pisellSingleSelect/PisellSingleSelect.less +88 -46
  116. package/es/components/pisellSingleSelect/components/EditView.js +8 -1
  117. package/es/components/pisellSingleSelect/components/ReadOnlyView.js +8 -2
  118. package/es/components/pisellUrl/PisellUrl.d.ts +2 -33
  119. package/es/components/pisellUrl/PisellUrl.js +1 -1
  120. package/es/components/pisellUrl/PisellUrl.less +120 -11
  121. package/es/components/pisellUrl/index.d.ts +1 -1
  122. package/es/components/radio/index.d.ts +2 -2
  123. package/es/components/section-footers/index.d.ts +2 -2
  124. package/es/components/skeleton/index.d.ts +2 -2
  125. package/es/components/sort/index.js +12 -1
  126. package/es/components/sort/types.d.ts +8 -2
  127. package/es/components/time-picker/index.d.ts +2 -2
  128. package/es/index.d.ts +19 -11
  129. package/es/index.js +19 -15
  130. package/es/locales/en-US.js +16 -2
  131. package/es/locales/zh-CN.js +18 -4
  132. package/es/locales/zh-TW.js +18 -4
  133. package/es/utils/tagColor.js +31 -0
  134. package/lib/components/Pagination/index.js +1 -1
  135. package/lib/components/checkbox/index.d.ts +2 -2
  136. package/lib/components/dataSourceComponents/dataSourceShow/dataSourceQRCode/index.d.ts +2 -2
  137. package/lib/components/dataSourceComponents/fields/Checkbox/WithMode.d.ts +2 -2
  138. package/lib/components/dataSourceComponents/fields/Input.Password/index.d.ts +2 -2
  139. package/lib/components/dataSourceComponents/fields/Input.Subdomain/index.d.ts +1 -1
  140. package/lib/components/dataSourceComponents/fields/Input.TextArea/index.d.ts +2 -2
  141. package/lib/components/dataSourceComponents/fields/Select/index.d.ts +1 -1
  142. package/lib/components/filter/components/Dropdown/index.js +6 -2
  143. package/lib/components/filter/components/FilterButton/index.js +3 -2
  144. package/lib/components/filter/components/FilterButton/types.d.ts +5 -2
  145. package/lib/components/filter/components/FilterItem/AsyncOptionsSelectWrapper.js +69 -0
  146. package/lib/components/filter/components/FilterItem/index.js +106 -6
  147. package/lib/components/filter/components/FilterItem/index.less +90 -0
  148. package/lib/components/filter/types.d.ts +4 -2
  149. package/lib/components/input/index.d.ts +2 -2
  150. package/lib/components/pisell-config-provider/context.d.ts +2 -2
  151. package/lib/components/pisellCurrency/PisellCurrency.less +163 -25
  152. package/lib/components/pisellDatePicker/index.d.ts +2 -2
  153. package/lib/components/pisellDateTimeDisplay/PisellDateTimeDisplay.js +11 -10
  154. package/lib/components/pisellDateTimeDisplay/types.d.ts +5 -0
  155. package/lib/components/pisellEmail/PisellEmail.d.ts +2 -33
  156. package/lib/components/pisellEmail/PisellEmail.js +1 -1
  157. package/lib/components/pisellEmail/PisellEmail.less +119 -10
  158. package/lib/components/pisellEmail/index.d.ts +1 -1
  159. package/lib/components/pisellFilter/docs/PisellFilter.md +289 -232
  160. package/lib/components/pisellFilter/index.js +65 -10
  161. package/lib/components/pisellLongText/PisellLongText.less +72 -4
  162. package/lib/components/pisellLookup/PisellLookup.js +3 -3
  163. package/lib/components/pisellLookup/PisellLookup.less +14 -9
  164. package/lib/components/pisellLookup/components/LookupTrigger.js +6 -2
  165. package/lib/components/pisellMetricCard/PisellMetricCard.d.ts +38 -0
  166. package/lib/components/pisellMetricCard/PisellMetricCard.js +138 -0
  167. package/lib/components/pisellMetricCard/components/MetricComparison.js +56 -0
  168. package/lib/components/pisellMetricCard/components/MetricTitle.js +43 -0
  169. package/lib/components/pisellMetricCard/components/MetricValue.js +28 -0
  170. package/lib/components/pisellMetricCard/components/TrendIcon.js +28 -0
  171. package/lib/components/pisellMetricCard/docs/pisellMetricCard.$tab-design.md +2 -6
  172. package/lib/components/pisellMetricCard/index.d.ts +2 -0
  173. package/lib/components/pisellMetricCard/types.d.ts +143 -0
  174. package/lib/components/pisellMetricCard/utils/calculateTrend.js +23 -0
  175. package/lib/components/pisellMetricCard/utils/formatMetricValue.js +53 -0
  176. package/lib/components/pisellMultipleSelect/PisellMultipleSelect.less +151 -124
  177. package/lib/components/pisellMultipleSelect/components/EditView.js +7 -0
  178. package/lib/components/pisellMultipleSelect/components/ReadOnlyView.js +17 -5
  179. package/lib/components/pisellNumber/PisellNumber.less +135 -17
  180. package/lib/components/pisellPercent/PisellPercent.less +142 -24
  181. package/lib/components/pisellPhone/PisellPhone.less +122 -27
  182. package/lib/components/pisellPhone/components/EditView.js +1 -1
  183. package/lib/components/pisellPhone/components/ReadOnlyView.js +15 -5
  184. package/lib/components/pisellPhone/utils/countryCodeHelper.js +0 -10
  185. package/lib/components/pisellRating/PisellRating.less +20 -12
  186. package/lib/components/pisellRecordBoard/PisellRecordBoard.js +150 -0
  187. package/lib/components/pisellRecordBoard/README.md +183 -0
  188. package/lib/components/pisellRecordBoard/context/RecordBoardContext.js +8 -0
  189. package/lib/components/pisellRecordBoard/context/RecordBoardProvider.js +16 -0
  190. package/lib/components/pisellRecordBoard/docs/PisellRecordBoard.$tab-design.md +128 -0
  191. package/lib/components/pisellRecordBoard/docs/PisellRecordBoard.$tab-dev.md +82 -0
  192. package/lib/components/pisellRecordBoard/docs/PisellRecordBoard.$tab-test.md +70 -0
  193. package/lib/components/pisellRecordBoard/docs/PisellRecordBoard.md +552 -0
  194. package/lib/components/pisellRecordBoard/hooks/useRecordBoardContext.d.ts +20 -0
  195. package/lib/components/pisellRecordBoard/hooks/useRecordBoardContext.js +17 -0
  196. package/lib/components/pisellRecordBoard/index.d.ts +40 -0
  197. package/lib/components/pisellRecordBoard/index.js +28 -0
  198. package/lib/components/pisellRecordBoard/layouts/CardLayout/CardList.d.ts +15 -0
  199. package/lib/components/pisellRecordBoard/layouts/CardLayout/CardList.js +26 -0
  200. package/lib/components/pisellRecordBoard/layouts/CardLayout/index.d.ts +15 -0
  201. package/lib/components/pisellRecordBoard/layouts/CardLayout/index.js +23 -0
  202. package/lib/components/pisellRecordBoard/layouts/GridLayout/Grid.d.ts +17 -0
  203. package/lib/components/pisellRecordBoard/layouts/GridLayout/Grid.js +107 -0
  204. package/lib/components/pisellRecordBoard/layouts/GridLayout/Grid.less +13 -0
  205. package/lib/components/pisellRecordBoard/layouts/GridLayout/index.d.ts +15 -0
  206. package/lib/components/pisellRecordBoard/layouts/GridLayout/index.js +23 -0
  207. package/lib/components/pisellRecordBoard/shellFrame/BatchActionBar/index.d.ts +12 -0
  208. package/lib/components/pisellRecordBoard/shellFrame/BatchActionBar/index.js +71 -0
  209. package/lib/components/pisellRecordBoard/shellFrame/ColumnSetting/ColumnSettingPopover.js +43 -0
  210. package/lib/components/pisellRecordBoard/shellFrame/ColumnSetting/index.js +62 -0
  211. package/lib/components/pisellRecordBoard/shellFrame/ColumnSetting/index.less +2 -0
  212. package/lib/components/pisellRecordBoard/shellFrame/Pagination/index.d.ts +17 -0
  213. package/lib/components/pisellRecordBoard/shellFrame/Pagination/index.js +54 -0
  214. package/lib/components/pisellRecordBoard/shellFrame/Pagination/index.less +61 -0
  215. package/lib/components/pisellRecordBoard/shellFrame/Search/index.d.ts +13 -0
  216. package/lib/components/pisellRecordBoard/shellFrame/Search/index.js +36 -0
  217. package/lib/components/pisellRecordBoard/shellFrame/ToolBar/ToolBarFilter.less +77 -0
  218. package/lib/components/pisellRecordBoard/shellFrame/ToolBar/index.d.ts +14 -0
  219. package/lib/components/pisellRecordBoard/shellFrame/ToolBar/index.js +139 -0
  220. package/lib/components/pisellRecordBoard/shellFrame/ToolBarQuickFilter/index.js +64 -0
  221. package/lib/components/pisellRecordBoard/shellFrame/ToolBarReset/index.d.ts +2 -0
  222. package/lib/components/pisellRecordBoard/shellFrame/ToolBarReset/index.js +47 -0
  223. package/lib/components/pisellRecordBoard/shellFrame/ToolBarReset/index.less +41 -0
  224. package/lib/components/pisellRecordBoard/shellFrame/index.d.ts +26 -0
  225. package/lib/components/pisellRecordBoard/shellFrame/index.js +40 -0
  226. package/lib/components/pisellRecordBoard/types.d.ts +259 -0
  227. package/lib/components/pisellRecordBoard/utils/recordBoardColumns.js +292 -0
  228. package/lib/components/pisellShellFrame/PisellShellFrame.d.ts +16 -0
  229. package/lib/components/pisellShellFrame/PisellShellFrame.js +62 -0
  230. package/lib/components/pisellShellFrame/PisellShellFrame.less +73 -0
  231. package/lib/components/pisellShellFrame/README.md +58 -0
  232. package/lib/components/pisellShellFrame/index.d.ts +2 -0
  233. package/lib/components/pisellShellFrame/types.d.ts +60 -0
  234. package/lib/components/pisellSingleSelect/PisellSingleSelect.less +88 -46
  235. package/lib/components/pisellSingleSelect/components/EditView.js +7 -0
  236. package/lib/components/pisellSingleSelect/components/ReadOnlyView.js +8 -2
  237. package/lib/components/pisellUrl/PisellUrl.d.ts +2 -33
  238. package/lib/components/pisellUrl/PisellUrl.js +1 -1
  239. package/lib/components/pisellUrl/PisellUrl.less +120 -11
  240. package/lib/components/pisellUrl/index.d.ts +1 -1
  241. package/lib/components/radio/index.d.ts +2 -2
  242. package/lib/components/section-footers/index.d.ts +2 -2
  243. package/lib/components/skeleton/index.d.ts +2 -2
  244. package/lib/components/sort/index.js +12 -1
  245. package/lib/components/sort/types.d.ts +8 -2
  246. package/lib/components/time-picker/index.d.ts +2 -2
  247. package/lib/components/upload/index.d.ts +2 -2
  248. package/lib/index.d.ts +19 -11
  249. package/lib/index.js +33 -25
  250. package/lib/locales/en-US.js +16 -2
  251. package/lib/locales/zh-CN.js +18 -4
  252. package/lib/locales/zh-TW.js +18 -4
  253. package/lib/utils/tagColor.js +32 -0
  254. package/package.json +3 -3
@@ -0,0 +1,73 @@
1
+ // PisellShellFrame 壳层布局:顶部标题/工具/统计、中间滚动+插槽、底部批量条/状态区
2
+ .pisell-shell-frame {
3
+ display: flex;
4
+ flex-direction: column;
5
+ height: 100%;
6
+ min-height: 0;
7
+
8
+ &-header {
9
+ flex-shrink: 0;
10
+ }
11
+
12
+ &-title {
13
+ display: flex;
14
+ align-items: baseline;
15
+ justify-content: space-between;
16
+ gap: 16px;
17
+ margin-bottom: 8px;
18
+ .pisell-shell-frame-title-main {
19
+ font-size: 16px;
20
+ font-weight: 600;
21
+ }
22
+ .pisell-shell-frame-title-sub {
23
+ font-size: 12px;
24
+ color: rgba(0, 0, 0, 0.45);
25
+ margin-left: 8px;
26
+ }
27
+ .pisell-shell-frame-title-extra {
28
+ flex-shrink: 0;
29
+ }
30
+ }
31
+
32
+ &-toolbar {
33
+ margin-bottom: 8px;
34
+ }
35
+
36
+ &-statistic {
37
+ margin-bottom: 8px;
38
+ &-collapse-header {
39
+ cursor: pointer;
40
+ user-select: none;
41
+ display: flex;
42
+ align-items: center;
43
+ gap: 4px;
44
+ font-size: 12px;
45
+ color: rgba(0, 0, 0, 0.45);
46
+ }
47
+ }
48
+
49
+ &-body {
50
+ flex: 1;
51
+ min-height: 0;
52
+ display: flex;
53
+ flex-direction: column;
54
+ }
55
+
56
+ &-scroll {
57
+ flex: 1;
58
+ min-height: 0;
59
+ overflow: auto;
60
+ }
61
+
62
+ &-footer {
63
+ flex-shrink: 0;
64
+ }
65
+
66
+ &-batch-bar {
67
+ margin-top: 8px;
68
+ }
69
+
70
+ &-status {
71
+ margin-top: 8px;
72
+ }
73
+ }
@@ -0,0 +1,58 @@
1
+ # PisellShellFrame 壳层布局
2
+
3
+ 通用壳层布局组件,通过 **config** 控制各区域显隐,不同展示类型(表格/看板/日历/楼层图等)复用同一壳层。
4
+
5
+ ## 区域结构
6
+
7
+ | 位置 | 区域 | 说明 |
8
+ |------|------|------|
9
+ | 顶部 | 标题区 | title / subtitle / titleExtra |
10
+ | 顶部 | 工具区 | toolbar(Toolbar) |
11
+ | 顶部 | 统计区 | statisticList(可选折叠) |
12
+ | 中间 | 滚动承载 + 插槽 | children,可配置 scroll 包裹 |
13
+ | 底部 | 批量操作条 | batchActionBar(按选中状态出现由调用方控制) |
14
+ | 底部 | 状态提示区 | statusArea(加载/错误/同步提示等) |
15
+
16
+ ## 基本用法
17
+
18
+ ```tsx
19
+ import { PisellShellFrame } from '@pisell/materials';
20
+
21
+ <PisellShellFrame
22
+ config={{
23
+ showTitle: true,
24
+ showToolbar: true,
25
+ showStatistic: true,
26
+ statisticCollapsible: true,
27
+ scroll: true,
28
+ showBatchActionBar: true,
29
+ showStatusArea: true,
30
+ }}
31
+ title="页面标题"
32
+ subtitle="副标题"
33
+ titleExtra={<Button>操作</Button>}
34
+ toolbar={<YourToolbar />}
35
+ statisticList={<PisellStatisticList data={[]} />}
36
+ batchActionBar={<YourBatchBar />}
37
+ statusArea={<Spin />}
38
+ >
39
+ {/* 主内容:表格/看板/日历等 */}
40
+ <YourLayout />
41
+ </PisellShellFrame>
42
+ ```
43
+
44
+ ## Config
45
+
46
+ | 属性 | 类型 | 默认 | 说明 |
47
+ |------|------|------|------|
48
+ | showTitle | boolean | false | 是否展示标题区 |
49
+ | showToolbar | boolean | false | 是否展示工具区 |
50
+ | showStatistic | boolean | false | 是否展示统计区 |
51
+ | statisticCollapsible | boolean | false | 统计区是否可折叠 |
52
+ | scroll | boolean \| { style?, className? } | false | 中间内容是否用滚动容器包裹 |
53
+ | showBatchActionBar | boolean | false | 是否展示批量操作条槽位 |
54
+ | showStatusArea | boolean | false | 是否展示状态提示区槽位 |
55
+
56
+ ## 与 RecordBoard 的关系
57
+
58
+ RecordBoard 的 `PisellRecordBoard.ShellFrame` 内部使用本组件,传入 `toolbar`(RecordBoard ToolBar)、`batchActionBar`(RecordBoard BatchActionBar),children 为 Layout + Pagination。
@@ -0,0 +1,2 @@
1
+ import { PisellShellFrameConfig, PisellShellFrameProps, PisellShellFrameScrollConfig } from "./types.js";
2
+ import { PisellShellFrame } from "./PisellShellFrame.js";
@@ -0,0 +1,60 @@
1
+ import { CSSProperties, ReactNode } from "react";
2
+
3
+ //#region src/components/pisellShellFrame/types.d.ts
4
+ /**
5
+ * 滚动配置:为 true 时使用默认滚动;为对象时传入样式或 scroll 相关配置。
6
+ */
7
+ type PisellShellFrameScrollConfig = boolean | {
8
+ style?: CSSProperties;
9
+ className?: string;
10
+ };
11
+ /**
12
+ * PisellShellFrame 配置:控制各区域的展示与行为。
13
+ * 不同展示类型(表格/看板/日历等)复用同一壳层,通过配置控制显隐。
14
+ */
15
+ interface PisellShellFrameConfig {
16
+ /** 是否展示顶部标题区(标题/副标题/辅助信息) */
17
+ showTitle?: boolean;
18
+ /** 是否展示顶部工具区(Toolbar) */
19
+ showToolbar?: boolean;
20
+ /** 是否展示顶部统计区(Statistic List) */
21
+ showStatistic?: boolean;
22
+ /** 统计区是否支持折叠,仅 showStatistic 为 true 时有效 */
23
+ statisticCollapsible?: boolean;
24
+ /** 中间内容区是否使用滚动承载包裹;为 true 时默认 overflow auto */
25
+ scroll?: PisellShellFrameScrollConfig;
26
+ /** 是否展示底部批量操作条(按选中状态出现由调用方控制,此处仅控制是否渲染该槽位) */
27
+ showBatchActionBar?: boolean;
28
+ /** 是否展示底部状态提示区(加载/错误/同步提示等) */
29
+ showStatusArea?: boolean;
30
+ }
31
+ /**
32
+ * PisellShellFrame 组件 Props。
33
+ * 通过 config 控制各区域显隐,通过 slot props 传入各区域内容。
34
+ */
35
+ interface PisellShellFrameProps {
36
+ /** 类名 */
37
+ className?: string;
38
+ /** 内联样式 */
39
+ style?: CSSProperties;
40
+ /** 区域显隐与行为配置,未传则默认不展示可选区域 */
41
+ config?: PisellShellFrameConfig;
42
+ /** 标题 */
43
+ title?: ReactNode;
44
+ /** 副标题 */
45
+ subtitle?: ReactNode;
46
+ /** 标题区右侧辅助信息 */
47
+ titleExtra?: ReactNode;
48
+ /** 工具栏内容 */
49
+ toolbar?: ReactNode;
50
+ /** 统计列表内容(如 PisellStatisticList 或自定义) */
51
+ statisticList?: ReactNode;
52
+ /** 主内容(表格/看板/日历/楼层图等),当 config.scroll 为 true 时会被滚动容器包裹 */
53
+ children?: ReactNode;
54
+ /** 批量操作条,通常按选中状态显隐由调用方控制 */
55
+ batchActionBar?: ReactNode;
56
+ /** 状态提示(加载/错误/同步提示等) */
57
+ statusArea?: ReactNode;
58
+ }
59
+ //#endregion
60
+ export { PisellShellFrameConfig, PisellShellFrameProps, PisellShellFrameScrollConfig };
@@ -1,53 +1,103 @@
1
1
  /**
2
2
  * PisellSingleSelect 组件样式
3
- *
4
- * 注意:大部分样式通过 tokens.ts 中的 Select Token 配置实现
5
- * 此文件仅包含 Token 无法实现的样式
3
+ * 基于 Figma 设计规范,覆盖时使用 pisell-lowcode-xxx
6
4
  */
7
5
 
8
6
  .pisell-single-select {
7
+ height: 48px !important;
9
8
  width: 100%;
10
9
 
11
- // 包装器布局(Token 无法配置)
10
+ // Select 触发器(Figma 设计规范,与 Input 体系一致)
11
+ .pisell-lowcode-select:not(.pisell-lowcode-select-disabled):not(.pisell-lowcode-select-customize-input) {
12
+ .pisell-lowcode-select-selector {
13
+ font-size: 16px !important;
14
+ line-height: 24px !important;
15
+ border-radius: 8px !important;
16
+ border: 1px solid #d0d5dd !important; // Gray/300
17
+ padding: 12px 16px !important;
18
+ min-height: 48px !important;
19
+ color: #101828 !important; // Gray/900
20
+ background-color: #ffffff !important;
21
+ }
22
+
23
+ &.pisell-lowcode-select-open .pisell-lowcode-select-selector {
24
+ border-color: #d6bbfb !important; // Primary/300
25
+ box-shadow: 0 0 0 4px #f4ebff !important; // Primary/100
26
+ }
27
+
28
+ &:not(.pisell-lowcode-select-open):not(.pisell-lowcode-select-disabled)
29
+ .pisell-lowcode-select-selector:hover {
30
+ border-color: #b692f6 !important; // Primary/400
31
+ }
32
+
33
+ &.pisell-lowcode-select-disabled .pisell-lowcode-select-selector {
34
+ background-color: #f9fafb !important; // Gray/50
35
+ color: #98a2b3 !important; // Gray/400
36
+ border-color: #d0d5dd !important;
37
+ cursor: not-allowed !important;
38
+ }
39
+
40
+ .pisell-lowcode-select-selection-placeholder {
41
+ color: #667085 !important; // Gray/500
42
+ }
43
+
44
+ .pisell-lowcode-select-arrow {
45
+ color: #667085;
46
+ }
47
+
48
+ .pisell-lowcode-select-clear {
49
+ color: #667085;
50
+
51
+ &:hover {
52
+ color: #344054;
53
+ }
54
+ }
55
+ }
56
+
12
57
  &-wrapper {
13
58
  display: flex;
14
59
  flex-direction: column;
15
60
  gap: 8px;
61
+ position: relative;
62
+
63
+ // 下拉选项高度 48px(通过 getPopupContainer 挂到 wrapper 内)
64
+ .pisell-single-select-dropdown .pisell-lowcode-select-item {
65
+ min-height: 48px !important;
66
+ height: 48px !important;
67
+ line-height: 48px !important;
68
+ padding: 0 16px !important;
69
+ font-size: 16px !important;
70
+ }
16
71
  }
17
72
 
18
- // 标签(Token 无法配置的自定义元素)
19
73
  &-label {
20
- font-family: 'Inter', sans-serif;
21
74
  font-size: 14px;
22
75
  font-weight: 600;
23
- color: #344054;
76
+ color: #344054; // Gray/700
24
77
  line-height: 20px;
25
78
 
26
79
  &-required::after {
27
80
  content: ' *';
28
- color: #D92D20;
81
+ color: #d92d20; // Error/600
29
82
  margin-left: 0;
30
83
  }
31
84
  }
32
85
 
33
- // 辅助文本(Token 无法配置的自定义元素)
34
86
  &-helper-text {
35
87
  font-size: 14px;
36
88
  font-weight: 400;
37
- color: #667085;
89
+ color: #667085; // Gray/500
38
90
  line-height: 20px;
39
91
  }
40
92
 
41
- // 错误文本(Token 无法配置的自定义元素)
42
93
  &-error-text {
43
- font-size: 14px;
94
+ font-size: 12px;
44
95
  font-weight: 400;
45
- color: #D92D20;
46
- line-height: 20px;
47
- animation: fadeIn 0.3s ease-in-out;
96
+ color: #d92d20; // Error/600
97
+ line-height: 1.5;
98
+ animation: pisell-single-select-fadeIn 0.3s ease-in-out;
48
99
  }
49
100
 
50
- // 下拉选项中的勾选图标(Figma 设计)
51
101
  &-option-content {
52
102
  display: flex;
53
103
  align-items: center;
@@ -56,20 +106,10 @@
56
106
  }
57
107
 
58
108
  &-option-check {
59
- color: #7F56D9; // Primary/600
109
+ color: #7f56d9; // Primary/600
60
110
  font-size: 16px;
61
111
  margin-left: 8px;
62
112
  }
63
-
64
- // hover 边框颜色(Token 不支持 colorBorderHover)
65
- :global {
66
- // hover 边框颜色
67
- .pisell-lowcode-select:not(.pisell-lowcode-select-disabled):not(.pisell-lowcode-select-customize-input):not(.pisell-lowcode-select-open) {
68
- .pisell-lowcode-select-selector:hover {
69
- border-color: #D6BBFB !important;
70
- }
71
- }
72
- }
73
113
  }
74
114
 
75
115
  // 下拉框内的搜索框样式(Figma 设计)
@@ -101,37 +141,40 @@
101
141
  }
102
142
 
103
143
  .pisell-single-select {
104
- // 错误状态(Token 无法单独配置错误边框颜色)
144
+ // 错误状态(Figma 设计体系 Error 色)
105
145
  &-error {
106
- :global(.ant-select-selector) {
107
- border-color: #D92D20 !important;
146
+ .pisell-lowcode-select .pisell-lowcode-select-selector {
147
+ border-color: #fda29b !important; // Error/300
108
148
 
109
149
  &:hover {
110
- border-color: #D92D20 !important;
150
+ border-color: #f97066 !important; // Error/400
111
151
  }
112
152
  }
113
153
 
114
- :global(.ant-select-focused .ant-select-selector) {
115
- border-color: #D92D20 !important;
116
- box-shadow: 0px 0px 0px 4px rgba(217, 45, 32, 0.1), 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
154
+ .pisell-lowcode-select.pisell-lowcode-select-focused .pisell-lowcode-select-selector,
155
+ .pisell-lowcode-select.pisell-lowcode-select-open .pisell-lowcode-select-selector {
156
+ border-color: #f97066 !important; // Error/400
157
+ box-shadow: 0 0 0 4px #fee4e2 !important; // Error/100
117
158
  }
118
159
  }
119
160
 
120
- // 只读状态(完全自定义的显示,不使用 Select 组件)
161
+ // 只读状态:仅展示 Tag,无 Select 无外框,Tag 使用与 disabled 一致的样式
121
162
  &-readonly {
122
163
  &-display {
123
164
  display: flex;
124
165
  align-items: center;
125
166
  gap: 8px;
126
- padding: 12px 16px;
127
- background-color: #F9FAFB;
128
- border: 1px solid #EAECF0;
129
- border-radius: 8px;
130
- min-height: 48px;
131
- font-size: 16px;
132
- font-weight: 500;
133
- line-height: 24px;
134
- color: #101828;
167
+ min-height: 24px;
168
+ }
169
+
170
+ &-tag {
171
+ margin: 0;
172
+ cursor: default;
173
+ border-radius: 12px;
174
+ border: 1px solid transparent;
175
+ font-size: 14px;
176
+ line-height: 22px;
177
+ padding: 2px 10px;
135
178
  }
136
179
 
137
180
  &-icon {
@@ -146,8 +189,7 @@
146
189
  }
147
190
  }
148
191
 
149
- // 动画
150
- @keyframes fadeIn {
192
+ @keyframes pisell-single-select-fadeIn {
151
193
  from {
152
194
  opacity: 0;
153
195
  transform: translateY(-4px);
@@ -2,7 +2,7 @@ import { _objectSpread2 } from "../../../_virtual/_@oxc-project_runtime@0.108.0/
2
2
  import { _objectWithoutProperties } from "../../../_virtual/_@oxc-project_runtime@0.108.0/helpers/objectWithoutProperties.js";
3
3
  import { Input, Select } from "antd";
4
4
  import classNames from "classnames";
5
- import React, { forwardRef, useCallback, useMemo, useState } from "react";
5
+ import React, { forwardRef, useCallback, useMemo, useRef, useState } from "react";
6
6
  import { useDebouncedSearch } from "@pisell/utils";
7
7
  import { CheckOutlined, SearchOutlined } from "@ant-design/icons";
8
8
 
@@ -63,6 +63,7 @@ const EditView = forwardRef((props, ref) => {
63
63
  filterOption,
64
64
  options
65
65
  ]);
66
+ const wrapperRef = useRef(null);
66
67
  const menuItemSelectedIcon = /* @__PURE__ */ React.createElement(CheckOutlined, { style: {
67
68
  color: "#7F56D9",
68
69
  fontSize: 16
@@ -87,6 +88,7 @@ const EditView = forwardRef((props, ref) => {
87
88
  handleSearchInput
88
89
  ]);
89
90
  return /* @__PURE__ */ React.createElement("div", {
91
+ ref: wrapperRef,
90
92
  className: classNames("pisell-single-select-wrapper", className),
91
93
  style
92
94
  }, label && /* @__PURE__ */ React.createElement("label", { className: classNames("pisell-single-select-label", { "pisell-single-select-label-required": required }) }, label), /* @__PURE__ */ React.createElement(Select, _objectSpread2(_objectSpread2({}, restProps), {}, {
@@ -100,6 +102,11 @@ const EditView = forwardRef((props, ref) => {
100
102
  dropdownRender,
101
103
  onChange: handleChange,
102
104
  size,
105
+ popupClassName: "pisell-single-select-dropdown",
106
+ getPopupContainer: () => {
107
+ var _wrapperRef$current;
108
+ return (_wrapperRef$current = wrapperRef.current) !== null && _wrapperRef$current !== void 0 ? _wrapperRef$current : document.body;
109
+ },
103
110
  className: classNames("pisell-single-select", { "pisell-single-select-error": error })
104
111
  })), helperText && !error && /* @__PURE__ */ React.createElement("div", { className: "pisell-single-select-helper-text" }, helperText), error && errorText && /* @__PURE__ */ React.createElement("div", { className: "pisell-single-select-error-text" }, errorText));
105
112
  });
@@ -1,3 +1,5 @@
1
+ import { getDefaultTagColor } from "../../../utils/tagColor.js";
2
+ import { Tag } from "antd";
1
3
  import classNames from "classnames";
2
4
  import React, { useMemo } from "react";
3
5
  import { findOptionByValue } from "@pisell/utils";
@@ -5,15 +7,19 @@ import { findOptionByValue } from "@pisell/utils";
5
7
  //#region src/components/pisellSingleSelect/components/ReadOnlyView.tsx
6
8
  /**
7
9
  * PisellSingleSelect - ReadOnlyView (只读态视图)
8
- * 只读状态下的渲染
10
+ * 只读状态下使用 Tag 展示选中值
9
11
  */
10
12
  const ReadOnlyView = (props) => {
13
+ var _selectedOption$color;
11
14
  const { value, options, label, required, className, style } = props;
12
15
  const selectedOption = useMemo(() => value !== null && value !== void 0 ? findOptionByValue(value, options) : void 0, [value, options]);
13
16
  return /* @__PURE__ */ React.createElement("div", {
14
17
  className: classNames("pisell-single-select-wrapper", "pisell-single-select-readonly", className),
15
18
  style
16
- }, label && /* @__PURE__ */ React.createElement("label", { className: classNames("pisell-single-select-label", { "pisell-single-select-label-required": required }) }, 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", { className: "pisell-single-select-readonly-empty" }, "-")));
19
+ }, label && /* @__PURE__ */ React.createElement("label", { className: classNames("pisell-single-select-label", { "pisell-single-select-label-required": required }) }, label), /* @__PURE__ */ React.createElement("div", { className: "pisell-single-select-readonly-display" }, selectedOption ? /* @__PURE__ */ React.createElement(Tag, {
20
+ className: "pisell-single-select-readonly-tag",
21
+ color: (_selectedOption$color = selectedOption.color) !== null && _selectedOption$color !== void 0 ? _selectedOption$color : getDefaultTagColor(selectedOption.value, 0)
22
+ }, 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" }, "-")));
17
23
  };
18
24
  ReadOnlyView.displayName = "PisellSingleSelectReadOnlyView";
19
25
  var ReadOnlyView_default = ReadOnlyView;
@@ -3,37 +3,6 @@ import React from "react";
3
3
  import "./PisellUrl.less";
4
4
 
5
5
  //#region src/components/pisellUrl/PisellUrl.d.ts
6
- /**
7
- * PisellUrl URL 链接组件
8
- *
9
- * URL 链接输入/展示组件,支持只读、编辑、禁用三种状态。
10
- * 基于 Ant Design Input 组件开发,提供 URL 格式校验、协议自动补全、
11
- * 链接跳转和协议/路径显示控制功能。
12
- *
13
- * @param props 组件 Props
14
- *
15
- * @example
16
- * // 编辑态(URL 输入)
17
- * <PisellUrl
18
- * placeholder="请输入网址"
19
- * required
20
- * />
21
- *
22
- * @example
23
- * // 只读态(可跳转)
24
- * <PisellUrl
25
- * mode="read"
26
- * value="https://www.example.com"
27
- * enableLinkClick
28
- * />
29
- *
30
- * @example
31
- * // 协议自动补全
32
- * <PisellUrl
33
- * autoCompleteProtocol
34
- * defaultProtocol="https://"
35
- * />
36
- */
37
- declare const PisellUrl: React.FC<PisellUrlProps>;
6
+ declare const _default: React.NamedExoticComponent<PisellUrlProps>;
38
7
  //#endregion
39
- export { PisellUrl };
8
+ export { _default };
@@ -51,4 +51,4 @@ var PisellUrl_default = React.memo(PisellUrl, (prevProps, nextProps) => {
51
51
  });
52
52
 
53
53
  //#endregion
54
- export { PisellUrl };
54
+ export { PisellUrl_default as default };
@@ -1,37 +1,135 @@
1
1
  /**
2
2
  * PisellUrl 组件样式
3
+ * 基于 Figma 设计规范,与 SingleLineText / PisellEmail 设计体系一致,覆盖时使用 pisell-lowcode-xxx
3
4
  */
4
5
 
5
6
  .pisell-url {
6
7
  &-edit {
8
+ position: relative;
7
9
  width: 100%;
8
10
 
9
- // 错误提示样式
10
- &-error {
11
- margin-top: 4px;
12
- font-size: 12px;
13
- color: #ff4d4f;
14
- line-height: 1.5;
11
+ // Input 组件内置样式(Figma 设计规范)
12
+ .pisell-lowcode-input,
13
+ .pisell-lowcode-input-affix-wrapper {
14
+ font-size: 16px !important;
15
+ line-height: 24px !important;
16
+ border-radius: 8px !important;
17
+ border: 1px solid #d0d5dd !important; // Gray/300
18
+ padding: 12px 16px !important;
19
+ height: 48px !important;
20
+ color: #101828 !important; // Gray/900
21
+ background-color: #ffffff !important;
22
+
23
+ &::placeholder {
24
+ color: #667085 !important; // Gray/500
25
+ }
26
+
27
+ &:focus,
28
+ &:focus-within {
29
+ border-color: #d6bbfb !important; // Primary/300
30
+ box-shadow: 0 0 0 4px #f4ebff !important; // Primary/100
31
+ outline: none !important;
32
+ }
33
+
34
+ &:hover:not(:focus):not(:focus-within):not([disabled]) {
35
+ border-color: #b692f6 !important; // Primary/400
36
+ }
37
+
38
+ &[disabled],
39
+ &.pisell-lowcode-input-disabled {
40
+ background-color: #f9fafb !important; // Gray/50
41
+ color: #98a2b3 !important; // Gray/400
42
+ border-color: #d0d5dd !important;
43
+ cursor: not-allowed !important;
44
+ }
45
+ }
46
+
47
+ // 带前缀(链接图标)的 Input 容器
48
+ .pisell-lowcode-input-affix-wrapper {
49
+ padding: 0 !important;
50
+
51
+ .pisell-lowcode-input-prefix {
52
+ margin-right: 8px;
53
+ margin-left: 16px;
54
+ color: #667085; // Gray/500
55
+ font-size: 16px;
56
+ }
57
+
58
+ .pisell-lowcode-input-suffix {
59
+ margin-left: 8px;
60
+ margin-right: 16px;
61
+ color: #667085;
62
+ font-size: 16px;
63
+ }
64
+
65
+ .pisell-lowcode-input {
66
+ padding: 12px 0 !important;
67
+ border: none !important;
68
+ box-shadow: none !important;
69
+
70
+ &:focus {
71
+ box-shadow: none !important;
72
+ }
73
+ }
74
+ }
75
+
76
+ // 清空按钮
77
+ .pisell-lowcode-input-clear-icon {
78
+ color: #667085 !important;
79
+ font-size: 14px !important;
80
+
81
+ &:hover {
82
+ color: #344054 !important; // Gray/700
83
+ }
84
+ }
85
+
86
+ // 错误状态
87
+ .pisell-lowcode-input-status-error,
88
+ .pisell-lowcode-input-affix-wrapper-status-error {
89
+ border-color: #fda29b !important; // Error/300
90
+
91
+ &:focus,
92
+ &:focus-within {
93
+ border-color: #f97066 !important; // Error/400
94
+ box-shadow: 0 0 0 4px #fee4e2 !important; // Error/100
95
+ }
96
+
97
+ &:hover:not(:focus):not(:focus-within) {
98
+ border-color: #f97066 !important; // Error/400
99
+ }
15
100
  }
16
101
  }
17
102
 
103
+ // 错误提示(与设计体系一致)
104
+ &-edit-error {
105
+ margin-top: 4px;
106
+ font-size: 12px;
107
+ color: #d92d20; // Error/600
108
+ line-height: 1.5;
109
+ animation: pisell-url-fadeIn 0.3s ease-in-out;
110
+ }
111
+
18
112
  &-read {
19
113
  display: inline-flex;
20
114
  align-items: center;
21
115
 
22
- // 链接样式
23
116
  .pisell-lowcode-typography-link {
24
117
  cursor: pointer;
25
- transition: all 0.3s;
118
+ transition: color 0.2s ease-in-out;
26
119
 
27
120
  &:hover {
28
- opacity: 0.8;
121
+ color: #6d48c4 !important;
122
+ }
123
+
124
+ &:active {
125
+ color: #5f3da8 !important;
29
126
  }
30
127
  }
31
128
 
32
- // 链接图标
33
- .anticon-link {
129
+ // 链接图标(只读态 Space 内第一项)
130
+ .pisell-lowcode-space-item:first-child {
34
131
  font-size: 14px;
132
+ line-height: 1;
35
133
  }
36
134
  }
37
135
 
@@ -44,3 +142,14 @@
44
142
  }
45
143
  }
46
144
  }
145
+
146
+ @keyframes pisell-url-fadeIn {
147
+ from {
148
+ opacity: 0;
149
+ transform: translateY(-4px);
150
+ }
151
+ to {
152
+ opacity: 1;
153
+ transform: translateY(0);
154
+ }
155
+ }
@@ -1,2 +1,2 @@
1
1
  import { PisellUrlProps } from "./types.js";
2
- import { PisellUrl } from "./PisellUrl.js";
2
+ import { _default } from "./PisellUrl.js";