wssf-kage-ui 0.1.2 → 0.1.3

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 (83) hide show
  1. package/dist/cjs/Alert/index.d.ts +37 -0
  2. package/dist/cjs/Alert/index.js +124 -0
  3. package/dist/cjs/Alert/style.less +248 -0
  4. package/dist/cjs/Drawer/index.d.ts +57 -0
  5. package/dist/cjs/Drawer/index.js +203 -0
  6. package/dist/cjs/Drawer/style.less +215 -0
  7. package/dist/cjs/FloatButton/index.d.ts +54 -0
  8. package/dist/cjs/FloatButton/index.js +119 -0
  9. package/dist/cjs/FloatButton/style.less +266 -0
  10. package/dist/cjs/Message/index.d.ts +38 -0
  11. package/dist/cjs/Message/index.js +292 -0
  12. package/dist/cjs/Message/style.less +183 -0
  13. package/dist/cjs/Modal/index.d.ts +63 -0
  14. package/dist/cjs/Modal/index.js +254 -0
  15. package/dist/cjs/Modal/style.less +298 -0
  16. package/dist/cjs/Notification/index.d.ts +48 -0
  17. package/dist/cjs/Notification/index.js +340 -0
  18. package/dist/cjs/Notification/style.less +260 -0
  19. package/dist/cjs/Popconfirm/index.d.ts +58 -0
  20. package/dist/cjs/Popconfirm/index.js +393 -0
  21. package/dist/cjs/Popconfirm/style.less +417 -0
  22. package/dist/cjs/Progress/index.d.ts +43 -0
  23. package/dist/cjs/Progress/index.js +213 -0
  24. package/dist/cjs/Progress/style.less +206 -0
  25. package/dist/cjs/Result/index.d.ts +25 -0
  26. package/dist/cjs/Result/index.js +63 -0
  27. package/dist/cjs/Result/style.less +111 -0
  28. package/dist/cjs/Skeleton/index.d.ts +88 -0
  29. package/dist/cjs/Skeleton/index.js +207 -0
  30. package/dist/cjs/Skeleton/style.less +487 -0
  31. package/dist/cjs/Spin/index.d.ts +25 -0
  32. package/dist/cjs/Spin/index.js +98 -0
  33. package/dist/cjs/Spin/style.less +169 -0
  34. package/dist/cjs/Tree/index.d.ts +82 -0
  35. package/dist/cjs/Tree/index.js +226 -0
  36. package/dist/cjs/Tree/style.less +313 -0
  37. package/dist/cjs/Watermark/index.d.ts +41 -0
  38. package/dist/cjs/Watermark/index.js +353 -0
  39. package/dist/cjs/Watermark/style.less +31 -0
  40. package/dist/cjs/index.d.ts +27 -1
  41. package/dist/cjs/index.js +91 -0
  42. package/dist/esm/Alert/index.d.ts +37 -0
  43. package/dist/esm/Alert/index.js +121 -0
  44. package/dist/esm/Alert/style.less +248 -0
  45. package/dist/esm/Drawer/index.d.ts +57 -0
  46. package/dist/esm/Drawer/index.js +202 -0
  47. package/dist/esm/Drawer/style.less +215 -0
  48. package/dist/esm/FloatButton/index.d.ts +54 -0
  49. package/dist/esm/FloatButton/index.js +123 -0
  50. package/dist/esm/FloatButton/style.less +266 -0
  51. package/dist/esm/Message/index.d.ts +38 -0
  52. package/dist/esm/Message/index.js +294 -0
  53. package/dist/esm/Message/style.less +183 -0
  54. package/dist/esm/Modal/index.d.ts +63 -0
  55. package/dist/esm/Modal/index.js +251 -0
  56. package/dist/esm/Modal/style.less +298 -0
  57. package/dist/esm/Notification/index.d.ts +48 -0
  58. package/dist/esm/Notification/index.js +345 -0
  59. package/dist/esm/Notification/style.less +260 -0
  60. package/dist/esm/Popconfirm/index.d.ts +58 -0
  61. package/dist/esm/Popconfirm/index.js +389 -0
  62. package/dist/esm/Popconfirm/style.less +417 -0
  63. package/dist/esm/Progress/index.d.ts +43 -0
  64. package/dist/esm/Progress/index.js +208 -0
  65. package/dist/esm/Progress/style.less +206 -0
  66. package/dist/esm/Result/index.d.ts +25 -0
  67. package/dist/esm/Result/index.js +57 -0
  68. package/dist/esm/Result/style.less +111 -0
  69. package/dist/esm/Skeleton/index.d.ts +88 -0
  70. package/dist/esm/Skeleton/index.js +213 -0
  71. package/dist/esm/Skeleton/style.less +487 -0
  72. package/dist/esm/Spin/index.d.ts +25 -0
  73. package/dist/esm/Spin/index.js +95 -0
  74. package/dist/esm/Spin/style.less +169 -0
  75. package/dist/esm/Tree/index.d.ts +82 -0
  76. package/dist/esm/Tree/index.js +225 -0
  77. package/dist/esm/Tree/style.less +313 -0
  78. package/dist/esm/Watermark/index.d.ts +41 -0
  79. package/dist/esm/Watermark/index.js +349 -0
  80. package/dist/esm/Watermark/style.less +31 -0
  81. package/dist/esm/index.d.ts +27 -1
  82. package/dist/esm/index.js +14 -1
  83. package/package.json +1 -1
@@ -0,0 +1,340 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = exports.Notification = void 0;
7
+ var _react = _interopRequireWildcard(require("react"));
8
+ require("./style.less");
9
+ var _jsxRuntime = require("react/jsx-runtime");
10
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
11
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
12
+ function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
13
+ function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
14
+ function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
15
+ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
16
+ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
17
+ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
18
+ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
19
+ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
20
+ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
21
+ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
22
+ function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
23
+ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
24
+ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
25
+ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
26
+ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } // ============ 类型定义 ============
27
+ /** Notification 类型 */ /** Notification 位置 */ /** Notification 配置 */ /** Notification 实例 */ /** Notification API */
28
+ // ============ 默认图标 ============
29
+ var defaultIcons = {
30
+ success: '✓',
31
+ info: 'ℹ',
32
+ warning: '⚠',
33
+ error: '✕'
34
+ };
35
+
36
+ // ============ Notification 管理器 ============
37
+ var NotificationManager = /*#__PURE__*/function () {
38
+ function NotificationManager() {
39
+ _classCallCheck(this, NotificationManager);
40
+ _defineProperty(this, "instances", []);
41
+ _defineProperty(this, "listeners", new Set());
42
+ _defineProperty(this, "keyCounter", 0);
43
+ _defineProperty(this, "placement", 'topRight');
44
+ }
45
+ _createClass(NotificationManager, [{
46
+ key: "subscribe",
47
+ value: function subscribe(listener) {
48
+ var _this = this;
49
+ this.listeners.add(listener);
50
+ return function () {
51
+ _this.listeners.delete(listener);
52
+ };
53
+ }
54
+ }, {
55
+ key: "notify",
56
+ value: function notify() {
57
+ this.listeners.forEach(function (listener) {
58
+ return listener();
59
+ });
60
+ }
61
+ }, {
62
+ key: "setPlacement",
63
+ value: function setPlacement(placement) {
64
+ this.placement = placement;
65
+ }
66
+ }, {
67
+ key: "add",
68
+ value: function add(config) {
69
+ var _config$key,
70
+ _config$placement,
71
+ _this2 = this;
72
+ var key = (_config$key = config.key) !== null && _config$key !== void 0 ? _config$key : "notification-".concat(++this.keyCounter);
73
+ var instance = _objectSpread(_objectSpread({}, config), {}, {
74
+ key: key,
75
+ visible: true,
76
+ closing: false,
77
+ placement: (_config$placement = config.placement) !== null && _config$placement !== void 0 ? _config$placement : this.placement,
78
+ closable: config.closable !== undefined ? config.closable : true
79
+ });
80
+ this.instances.push(instance);
81
+ this.notify();
82
+
83
+ // 自动关闭
84
+ if (instance.duration !== 0) {
85
+ var _instance$duration;
86
+ var duration = (_instance$duration = instance.duration) !== null && _instance$duration !== void 0 ? _instance$duration : 4.5;
87
+ setTimeout(function () {
88
+ _this2.remove(key);
89
+ }, duration * 1000);
90
+ }
91
+ return key;
92
+ }
93
+ }, {
94
+ key: "remove",
95
+ value: function remove(key) {
96
+ var _this3 = this;
97
+ var instance = this.instances.find(function (item) {
98
+ return item.key === key;
99
+ });
100
+ if (!instance) return;
101
+ instance.closing = true;
102
+ this.notify();
103
+
104
+ // 等待动画完成
105
+ setTimeout(function () {
106
+ var index = _this3.instances.findIndex(function (item) {
107
+ return item.key === key;
108
+ });
109
+ if (index > -1) {
110
+ var _instance$onClose;
111
+ _this3.instances.splice(index, 1);
112
+ _this3.notify();
113
+ (_instance$onClose = instance.onClose) === null || _instance$onClose === void 0 || _instance$onClose.call(instance);
114
+ }
115
+ }, 300);
116
+ }
117
+ }, {
118
+ key: "destroy",
119
+ value: function destroy(key) {
120
+ var _this4 = this;
121
+ if (key) {
122
+ this.remove(key);
123
+ } else {
124
+ this.instances.forEach(function (instance) {
125
+ instance.closing = true;
126
+ });
127
+ this.notify();
128
+ setTimeout(function () {
129
+ _this4.instances.forEach(function (instance) {
130
+ var _instance$onClose2;
131
+ (_instance$onClose2 = instance.onClose) === null || _instance$onClose2 === void 0 || _instance$onClose2.call(instance);
132
+ });
133
+ _this4.instances = [];
134
+ _this4.notify();
135
+ }, 300);
136
+ }
137
+ }
138
+ }, {
139
+ key: "getInstances",
140
+ value: function getInstances() {
141
+ return this.instances;
142
+ }
143
+ }]);
144
+ return NotificationManager;
145
+ }();
146
+ var notificationManager = new NotificationManager();
147
+
148
+ // ============ Notification 容器组件 ============
149
+ var NotificationContainer = function NotificationContainer() {
150
+ var _useState = (0, _react.useState)({}),
151
+ _useState2 = _slicedToArray(_useState, 2),
152
+ forceUpdate = _useState2[1];
153
+ (0, _react.useEffect)(function () {
154
+ var unsubscribe = notificationManager.subscribe(function () {
155
+ forceUpdate({});
156
+ });
157
+ return unsubscribe;
158
+ }, []);
159
+ var instances = notificationManager.getInstances();
160
+ if (instances.length === 0) {
161
+ return null;
162
+ }
163
+
164
+ // 按位置分组
165
+ var groupedInstances = {
166
+ topLeft: [],
167
+ topRight: [],
168
+ bottomLeft: [],
169
+ bottomRight: []
170
+ };
171
+ instances.forEach(function (instance) {
172
+ var _instance$placement;
173
+ var placement = (_instance$placement = instance.placement) !== null && _instance$placement !== void 0 ? _instance$placement : 'topRight';
174
+ groupedInstances[placement].push(instance);
175
+ });
176
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
177
+ children: Object.entries(groupedInstances).map(function (_ref) {
178
+ var _ref2 = _slicedToArray(_ref, 2),
179
+ placement = _ref2[0],
180
+ placementInstances = _ref2[1];
181
+ if (placementInstances.length === 0) return null;
182
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
183
+ className: "kage-notification-container kage-notification-".concat(placement),
184
+ children: placementInstances.map(function (instance) {
185
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)(NotificationItem, {
186
+ instance: instance
187
+ }, instance.key);
188
+ })
189
+ }, placement);
190
+ })
191
+ });
192
+ };
193
+
194
+ // ============ Notification 项组件 ============
195
+ var NotificationItem = function NotificationItem(_ref3) {
196
+ var instance = _ref3.instance;
197
+ var message = instance.message,
198
+ description = instance.description,
199
+ _instance$type = instance.type,
200
+ type = _instance$type === void 0 ? 'info' : _instance$type,
201
+ icon = instance.icon,
202
+ closeIcon = instance.closeIcon,
203
+ _instance$closable = instance.closable,
204
+ closable = _instance$closable === void 0 ? true : _instance$closable,
205
+ _instance$className = instance.className,
206
+ className = _instance$className === void 0 ? '' : _instance$className,
207
+ style = instance.style,
208
+ closing = instance.closing,
209
+ visible = instance.visible,
210
+ key = instance.key;
211
+ if (!visible && !closing) {
212
+ return null;
213
+ }
214
+ var classNames = ['kage-notification', "kage-notification-".concat(type), closing && 'kage-notification-closing', className].filter(Boolean).join(' ');
215
+ var iconNode = icon || defaultIcons[type];
216
+ var handleClose = function handleClose() {
217
+ notificationManager.remove(key);
218
+ };
219
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
220
+ className: classNames,
221
+ style: style,
222
+ children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
223
+ className: "kage-notification-content",
224
+ children: [iconNode && /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
225
+ className: "kage-notification-icon",
226
+ children: iconNode
227
+ }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
228
+ className: "kage-notification-body",
229
+ children: [message && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
230
+ className: "kage-notification-message",
231
+ children: message
232
+ }), description && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
233
+ className: "kage-notification-description",
234
+ children: description
235
+ })]
236
+ }), closable && /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
237
+ type: "button",
238
+ className: "kage-notification-close-icon",
239
+ onClick: handleClose,
240
+ "aria-label": "\u5173\u95ED",
241
+ children: closeIcon || '×'
242
+ })]
243
+ })
244
+ });
245
+ };
246
+
247
+ // ============ Notification API ============
248
+ var normalizeConfig = function normalizeConfig(config, description) {
249
+ if (_typeof(config) === 'object' && config !== null && 'message' in config) {
250
+ return config;
251
+ }
252
+ return {
253
+ message: config,
254
+ description: description
255
+ };
256
+ };
257
+ var notificationApi = {
258
+ success: function success(config, description) {
259
+ var normalized = normalizeConfig(config, description);
260
+ notificationManager.add(_objectSpread(_objectSpread({}, normalized), {}, {
261
+ type: 'success'
262
+ }));
263
+ },
264
+ error: function error(config, description) {
265
+ var normalized = normalizeConfig(config, description);
266
+ notificationManager.add(_objectSpread(_objectSpread({}, normalized), {}, {
267
+ type: 'error'
268
+ }));
269
+ },
270
+ info: function info(config, description) {
271
+ var normalized = normalizeConfig(config, description);
272
+ notificationManager.add(_objectSpread(_objectSpread({}, normalized), {}, {
273
+ type: 'info'
274
+ }));
275
+ },
276
+ warning: function warning(config, description) {
277
+ var normalized = normalizeConfig(config, description);
278
+ notificationManager.add(_objectSpread(_objectSpread({}, normalized), {}, {
279
+ type: 'warning'
280
+ }));
281
+ },
282
+ open: function open(config) {
283
+ notificationManager.add(config);
284
+ },
285
+ destroy: function destroy(key) {
286
+ notificationManager.destroy(key);
287
+ },
288
+ close: function close(key) {
289
+ notificationManager.remove(key);
290
+ }
291
+ };
292
+
293
+ // ============ Notification 组件 ============
294
+ var Notification = exports.Notification = {};
295
+
296
+ // 将 API 方法挂载到组件上
297
+ Object.assign(Notification, notificationApi);
298
+ Notification.Container = NotificationContainer;
299
+
300
+ // 初始化容器(延迟执行,避免 SSR 问题)
301
+ var containerElement = null;
302
+ var containerMounted = false;
303
+ var getContainer = function getContainer() {
304
+ if (!containerElement && typeof document !== 'undefined') {
305
+ containerElement = document.createElement('div');
306
+ containerElement.className = 'kage-notification-root';
307
+ document.body.appendChild(containerElement);
308
+ }
309
+ return containerElement;
310
+ };
311
+
312
+ // 延迟初始化容器组件
313
+ var initContainer = function initContainer() {
314
+ if (containerMounted || typeof document === 'undefined') return;
315
+ containerMounted = true;
316
+ var container = getContainer();
317
+ try {
318
+ var _React = require('react');
319
+ var ReactDOM = require('react-dom');
320
+ if (ReactDOM.createRoot) {
321
+ // React 18
322
+ ReactDOM.createRoot(container).render(_React.createElement(NotificationContainer));
323
+ } else if (ReactDOM.render) {
324
+ // React 17
325
+ ReactDOM.render(_React.createElement(NotificationContainer), container);
326
+ }
327
+ } catch (e) {
328
+ // 静默失败,避免影响应用启动
329
+ }
330
+ };
331
+
332
+ // 在浏览器环境中初始化
333
+ if (typeof window !== 'undefined') {
334
+ if (document.readyState === 'complete' || document.readyState === 'interactive') {
335
+ setTimeout(initContainer, 0);
336
+ } else {
337
+ document.addEventListener('DOMContentLoaded', initContainer);
338
+ }
339
+ }
340
+ var _default = exports.default = Notification;
@@ -0,0 +1,260 @@
1
+ // Notification 通知提醒框样式
2
+
3
+ @prefix: kage-notification;
4
+
5
+ // 颜色变量
6
+ @notification-bg: #fff;
7
+ @notification-success-color: #52c41a;
8
+ @notification-info-color: #1890ff;
9
+ @notification-warning-color: #faad14;
10
+ @notification-error-color: #ff4d4f;
11
+ @notification-title-color: rgba(0, 0, 0, 0.85);
12
+ @notification-text-color: rgba(0, 0, 0, 0.65);
13
+ @notification-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12),
14
+ 0 9px 28px 8px rgba(0, 0, 0, 0.05);
15
+
16
+ // ============ 根容器 ============
17
+ .kage-notification-root {
18
+ position: fixed;
19
+ top: 0;
20
+ left: 0;
21
+ right: 0;
22
+ bottom: 0;
23
+ pointer-events: none;
24
+ z-index: 1010;
25
+ }
26
+
27
+ // ============ 通知容器 ============
28
+ .@{prefix}-container {
29
+ position: fixed;
30
+ z-index: 1010;
31
+ pointer-events: none;
32
+ display: flex;
33
+ flex-direction: column;
34
+ gap: 16px;
35
+ max-width: 384px;
36
+ }
37
+
38
+ .@{prefix}-topLeft {
39
+ top: 24px;
40
+ left: 24px;
41
+ align-items: flex-start;
42
+ }
43
+
44
+ .@{prefix}-topRight {
45
+ top: 24px;
46
+ right: 24px;
47
+ align-items: flex-end;
48
+ }
49
+
50
+ .@{prefix}-bottomLeft {
51
+ bottom: 24px;
52
+ left: 24px;
53
+ align-items: flex-start;
54
+ flex-direction: column-reverse;
55
+ }
56
+
57
+ .@{prefix}-bottomRight {
58
+ bottom: 24px;
59
+ right: 24px;
60
+ align-items: flex-end;
61
+ flex-direction: column-reverse;
62
+ }
63
+
64
+ // ============ 通知项 ============
65
+ .@{prefix} {
66
+ position: relative;
67
+ display: flex;
68
+ padding: 16px 24px;
69
+ background-color: @notification-bg;
70
+ border-radius: 8px;
71
+ box-shadow: @notification-shadow;
72
+ pointer-events: auto;
73
+ opacity: 1;
74
+ transform: translateX(0);
75
+ transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
76
+
77
+ * {
78
+ box-sizing: border-box;
79
+ }
80
+ }
81
+
82
+ // ============ 内容 ============
83
+ .@{prefix}-content {
84
+ display: flex;
85
+ flex: 1;
86
+ min-width: 0;
87
+ }
88
+
89
+ // ============ 图标 ============
90
+ .@{prefix}-icon {
91
+ display: inline-flex;
92
+ align-items: flex-start;
93
+ justify-content: center;
94
+ width: 24px;
95
+ height: 24px;
96
+ margin-right: 16px;
97
+ font-size: 24px;
98
+ line-height: 1;
99
+ flex-shrink: 0;
100
+ margin-top: 1px;
101
+ }
102
+
103
+ // ============ 主体 ============
104
+ .@{prefix}-body {
105
+ flex: 1;
106
+ min-width: 0;
107
+ }
108
+
109
+ .@{prefix}-message {
110
+ margin-bottom: 8px;
111
+ color: @notification-title-color;
112
+ font-size: 16px;
113
+ font-weight: 500;
114
+ line-height: 1.5;
115
+ word-wrap: break-word;
116
+ word-break: break-word;
117
+ }
118
+
119
+ .@{prefix}-description {
120
+ color: @notification-text-color;
121
+ font-size: 14px;
122
+ line-height: 1.5715;
123
+ word-wrap: break-word;
124
+ word-break: break-word;
125
+ }
126
+
127
+ // ============ 关闭按钮 ============
128
+ .@{prefix}-close-icon {
129
+ position: absolute;
130
+ top: 16px;
131
+ right: 22px;
132
+ padding: 0;
133
+ margin: 0;
134
+ color: rgba(0, 0, 0, 0.45);
135
+ font-size: 12px;
136
+ line-height: 1;
137
+ text-align: center;
138
+ background: transparent;
139
+ border: none;
140
+ border-radius: 2px;
141
+ cursor: pointer;
142
+ transition: all 0.2s;
143
+ flex-shrink: 0;
144
+ width: 22px;
145
+ height: 22px;
146
+ display: flex;
147
+ align-items: center;
148
+ justify-content: center;
149
+
150
+ &:hover {
151
+ color: rgba(0, 0, 0, 0.85);
152
+ background-color: rgba(0, 0, 0, 0.06);
153
+ }
154
+
155
+ &:active {
156
+ background-color: rgba(0, 0, 0, 0.1);
157
+ }
158
+ }
159
+
160
+ // ============ 不同类型 ============
161
+ .@{prefix}-success {
162
+ .@{prefix}-icon {
163
+ color: @notification-success-color;
164
+ }
165
+ }
166
+
167
+ .@{prefix}-info {
168
+ .@{prefix}-icon {
169
+ color: @notification-info-color;
170
+ }
171
+ }
172
+
173
+ .@{prefix}-warning {
174
+ .@{prefix}-icon {
175
+ color: @notification-warning-color;
176
+ }
177
+ }
178
+
179
+ .@{prefix}-error {
180
+ .@{prefix}-icon {
181
+ color: @notification-error-color;
182
+ }
183
+ }
184
+
185
+ // ============ 关闭动画 ============
186
+ .@{prefix}-closing {
187
+ opacity: 0;
188
+ transform: translateX(100px);
189
+ margin-top: 0 !important;
190
+ margin-bottom: 0 !important;
191
+ padding-top: 0;
192
+ padding-bottom: 0;
193
+ height: 0;
194
+ overflow: hidden;
195
+ }
196
+
197
+ .@{prefix}-topLeft .@{prefix}-closing,
198
+ .@{prefix}-bottomLeft .@{prefix}-closing {
199
+ transform: translateX(-100px);
200
+ }
201
+
202
+ // ============ 暗色模式适配 ============
203
+ [data-theme='dark'],
204
+ [data-prefers-color-scheme='dark'],
205
+ [data-prefers-color='dark'],
206
+ html.dark,
207
+ body.dark,
208
+ .dark {
209
+ .@{prefix} {
210
+ background-color: #1f1f1f;
211
+ box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.48), 0 3px 6px -4px rgba(0, 0, 0, 0.32),
212
+ 0 9px 28px 8px rgba(0, 0, 0, 0.2);
213
+ }
214
+
215
+ .@{prefix}-message {
216
+ color: rgba(255, 255, 255, 0.85);
217
+ }
218
+
219
+ .@{prefix}-description {
220
+ color: rgba(255, 255, 255, 0.65);
221
+ }
222
+
223
+ .@{prefix}-close-icon {
224
+ color: rgba(255, 255, 255, 0.45);
225
+
226
+ &:hover {
227
+ color: rgba(255, 255, 255, 0.85);
228
+ background-color: rgba(255, 255, 255, 0.08);
229
+ }
230
+
231
+ &:active {
232
+ background-color: rgba(255, 255, 255, 0.12);
233
+ }
234
+ }
235
+
236
+ .@{prefix}-success {
237
+ .@{prefix}-icon {
238
+ color: #52c41a;
239
+ }
240
+ }
241
+
242
+ .@{prefix}-info {
243
+ .@{prefix}-icon {
244
+ color: #1890ff;
245
+ }
246
+ }
247
+
248
+ .@{prefix}-warning {
249
+ .@{prefix}-icon {
250
+ color: #faad14;
251
+ }
252
+ }
253
+
254
+ .@{prefix}-error {
255
+ .@{prefix}-icon {
256
+ color: #ff4d4f;
257
+ }
258
+ }
259
+ }
260
+
@@ -0,0 +1,58 @@
1
+ import React, { ReactNode, CSSProperties } from 'react';
2
+ import './style.less';
3
+ export type PopconfirmPlacement = 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom';
4
+ export type PopconfirmTrigger = 'hover' | 'click' | 'focus';
5
+ export interface PopconfirmProps {
6
+ /** 确认框的描述 */
7
+ title?: ReactNode;
8
+ /** 确认框的描述 */
9
+ description?: ReactNode;
10
+ /** 触发行为 */
11
+ trigger?: PopconfirmTrigger;
12
+ /** 气泡框位置 */
13
+ placement?: PopconfirmPlacement;
14
+ /** 是否显示箭头 */
15
+ arrow?: boolean;
16
+ /** 是否显示(受控) */
17
+ open?: boolean;
18
+ /** 默认是否显示 */
19
+ defaultOpen?: boolean;
20
+ /** 显示隐藏的回调 */
21
+ onOpenChange?: (open: boolean) => void;
22
+ /** 点击确认的回调 */
23
+ onConfirm?: (e?: React.MouseEvent<HTMLButtonElement>) => void;
24
+ /** 点击取消的回调 */
25
+ onCancel?: (e?: React.MouseEvent<HTMLButtonElement>) => void;
26
+ /** 确认按钮文字 */
27
+ okText?: ReactNode;
28
+ /** 取消按钮文字 */
29
+ cancelText?: ReactNode;
30
+ /** 确认按钮类型 */
31
+ okType?: 'default' | 'primary' | 'dashed' | 'text' | 'link';
32
+ /** 确认按钮 loading */
33
+ okButtonProps?: {
34
+ loading?: boolean;
35
+ disabled?: boolean;
36
+ [key: string]: any;
37
+ };
38
+ /** 取消按钮 loading */
39
+ cancelButtonProps?: {
40
+ loading?: boolean;
41
+ disabled?: boolean;
42
+ [key: string]: any;
43
+ };
44
+ /** 自定义图标 */
45
+ icon?: ReactNode;
46
+ /** 是否显示图标 */
47
+ showCancel?: boolean;
48
+ /** 自定义类名 */
49
+ className?: string;
50
+ /** 自定义样式 */
51
+ style?: CSSProperties;
52
+ /** 触发元素 */
53
+ children?: ReactNode;
54
+ /** 是否禁用 */
55
+ disabled?: boolean;
56
+ }
57
+ export declare const Popconfirm: React.FC<PopconfirmProps>;
58
+ export default Popconfirm;