@baishuyun/ui-business 2.0.4 → 3.0.2

package/README.md

@@ -67,4 +67,191 @@ src/
 
 ## 许可证
 
-MIT
+MIT
+
+## API Service 配置指南
+
+本组件库采用依赖注入架构，**要求业务项目传入自己的 Axios 实例**。这种设计确保了：
+
+- 🔒 **统一认证体系**：组件库请求使用业务项目的认证逻辑
+- 🎯 **完全请求控制**：业务项目可以感知和控制所有请求
+- 🛡️ **统一错误处理**：所有请求使用相同的错误处理逻辑
+- 📊 **统一状态管理**：Loading 状态、请求监控等统一管理
+
+## 基本用法
+
+### 1. 创建业务 Axios 实例
+
+```typescript
+// src/api/request.ts
+import axios from 'axios';
+import { message } from 'antd';
+
+const request = axios.create({
+  baseURL: process.env.REACT_APP_API_BASE_URL,
+  timeout: 10000,
+  withCredentials: true,
+});
+
+// 请求拦截器
+request.interceptors.request.use(
+  (config) => {
+    // 添加认证 Token
+    const token = localStorage.getItem('access_token');
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`;
+    }
+    return config;
+  },
+  (error) => Promise.reject(error)
+);
+
+// 响应拦截器
+request.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    // 统一错误处理
+    if (error.response?.status === 401) {
+      message.error('登录已过期，请重新登录');
+      // 跳转到登录页
+      window.location.href = '/login';
+    } else {
+      message.error(error.response?.data?.message || '请求失败');
+    }
+    return Promise.reject(error);
+  }
+);
+
+export default request;
+```
+
+### 2. 注入到组件库
+
+```typescript
+// src/main.ts 或 src/App.tsx
+import { setApiServiceProvider } from '@baishuyun/ui-business';
+import request from './api/request';
+
+// 注入业务项目的 Axios 实例
+setApiServiceProvider({
+  axiosInstance: request,
+});
+```
+
+## 高级配置
+
+### 多环境配置
+
+```typescript
+// src/api/config.ts
+const API_CONFIG = {
+  development: {
+    baseURL: 'http://localhost:3000/api',
+    timeout: 10000,
+  },
+  production: {
+    baseURL: 'https://api.example.com',
+    timeout: 5000,
+  },
+};
+
+const config = API_CONFIG[process.env.NODE_ENV as keyof typeof API_CONFIG];
+
+const request = axios.create(config);
+```
+
+### 请求重试机制
+
+```typescript
+// 添加请求重试逻辑
+request.interceptors.response.use(
+  (response) => response,
+  async (error) => {
+    const config = error.config;
+    
+    // 重试逻辑
+    if (!config._retry && error.response?.status >= 500) {
+      config._retry = true;
+      config._retryCount = (config._retryCount || 0) + 1;
+      
+      if (config._retryCount <= 3) {
+        await new Promise(resolve => setTimeout(resolve, 1000));
+        return request(config);
+      }
+    }
+    
+    return Promise.reject(error);
+  }
+);
+```
+
+### Loading 状态管理
+
+```typescript
+// src/api/loading.ts
+let loadingCount = 0;
+
+const showLoading = () => {
+  if (loadingCount === 0) {
+    // 显示全局 loading
+  }
+  loadingCount++;
+};
+
+const hideLoading = () => {
+  loadingCount--;
+  if (loadingCount === 0) {
+    // 隐藏全局 loading
+  }
+};
+
+// 在拦截器中使用
+request.interceptors.request.use((config) => {
+  showLoading();
+  return config;
+});
+
+request.interceptors.response.use(
+  (response) => {
+    hideLoading();
+    return response;
+  },
+  (error) => {
+    hideLoading();
+    return Promise.reject(error);
+  }
+);
+```
+
+## 动态配置
+
+可以在运行时动态更换 Axios 实例：
+
+```typescript
+// 切换到不同的 API 环境
+const switchToTestEnv = () => {
+  const testRequest = axios.create({
+    baseURL: 'https://test-api.example.com',
+    // 其他配置...
+  });
+  
+  setApiServiceProvider({ axiosInstance: testRequest });
+};
+```
+
+## 注意事项
+
+- ⚠️ **必须在使用组件库之前调用** `setApiServiceProvider`
+- 📍 **推荐在应用入口文件**（如 `main.ts` 或 `App.tsx`）中进行配置
+- 🔧 **Axios 实例应包含完整业务逻辑**（拦截器、错误处理、认证等）
+- 🚫 **组件库不再提供内置的 HTTP 配置**，完全依赖外部注入
+
+## 错误处理
+
+如果未设置 API 服务提供者，组件库会抛出明确的错误提示：
+
+```
+Error: API 服务提供者未设置。请先调用 setApiServiceProvider() 设置 Axios 实例。
+```
+
+确保在使用任何组件库功能之前完成配置。

package/dist/DeptsMember/{DeptsMember-Ct8CJLvk.js → DeptsMember-pFjdAocd.js}

@@ -1,6 +1,6 @@
 import { jsx as e, jsxs as f, Fragment as K } from "react/jsx-runtime";
 import { c as w } from "../vendors/clsx.js";
-import { u as D, a as C, b as ne, E as p, M as ce, T as de, P as pe, G as $, c as me, D as ue } from "./TabGroup-LsBzSRvu.js";
+import { u as D, a as C, b as ne, E as p, M as ce, T as de, P as pe, G as $, c as me, D as ue } from "./TabGroup-CznMwTOD.js";
 import { Avatar as G, Button as V, Spin as ae } from "antd";
 import { forwardRef as he, useRef as T, useImperativeHandle as fe, useState as k, useEffect as A, useMemo as z, useCallback as be } from "react";
 import { Icon as S, Tree as se } from "bsy-react-ui";
@@ -18,10 +18,10 @@ import { g as Se } from "../vendors/services/data/member_limit.service.js";
 import { g as Re } from "../vendors/services/data/member.service.js";
 import { produce as Te } from "immer";
 const Q = he(
-  (a, l) => {
+  (a, i) => {
     const {
       isMeasure: n = !1,
-      showEllipsisButton: i = !1,
+      showEllipsisButton: l = !1,
       onToggle: u,
       hiddenCount: t = 0,
       previewCount: d = 0
@@ -29,7 +29,7 @@ const Q = he(
       dockcorp: m("department.externalContactGroup"),
       dockcorpdept: m("department.contact")
     }, N = (c) => v?.(h.filter((E) => E._id !== c));
-    return fe(l, () => ({
+    return fe(i, () => ({
       measureRef: x.current,
       ellipsisButtonRef: y.current
     })), /* @__PURE__ */ e(
@@ -86,7 +86,7 @@ const Q = he(
               E
             );
           }),
-          i && !n && /* @__PURE__ */ e("li", { ref: y, className: "entity-list__more", "data-button": "ellipsis-button", children: /* @__PURE__ */ f(
+          l && !n && /* @__PURE__ */ e("li", { ref: y, className: "entity-list__more", "data-button": "ellipsis-button", children: /* @__PURE__ */ f(
             "div",
             {
               role: "button",
@@ -105,7 +105,7 @@ const Q = he(
     );
   }
 ), De = () => {
-  const { value: a = [], type: l } = C(), { t: n } = D(), [i, u] = k(0), [t, { toggle: d }] = ye(!1), [m, h] = k(!1), [v, o] = k(null), b = T(null), x = T(null), y = [p.DEPARMENT, p.USER].includes(l) ? ce : de;
+  const { value: a = [], type: i } = C(), { t: n } = D(), [l, u] = k(0), [t, { toggle: d }] = ye(!1), [m, h] = k(!1), [v, o] = k(null), b = T(null), x = T(null), y = [p.DEPARMENT, p.USER].includes(i) ? ce : de;
   A(() => {
     t && h(!0);
   }, [t]);
@@ -117,7 +117,7 @@ const Q = he(
     const g = () => {
       requestAnimationFrame(() => {
         if (c(!1), !b.current || !x.current) return;
-        const O = b.current.clientWidth, R = x.current.querySelectorAll(".measure-list li"), le = x.current.querySelector(
+        const O = b.current.clientWidth, R = x.current.querySelectorAll(".measure-list li"), ie = x.current.querySelector(
           '[data-button="ellipsis-button"]'
         );
         if (R.length === 0) {
@@ -137,9 +137,9 @@ const Q = he(
             break;
         }
         j = P, I = 0;
-        const ie = le?.offsetWidth || me;
+        const le = ie?.offsetWidth || me;
         for (let M = j; M < R.length; M++) {
-          const q = R[M].clientWidth + $, oe = ie;
+          const q = R[M].clientWidth + $, oe = le;
           if (I + q + oe < O)
             I += q, U = M + 1;
           else {
@@ -147,12 +147,12 @@ const Q = he(
             break;
           }
         }
-        i !== U && u(U);
+        l !== U && u(U);
       });
     };
     g();
   }, [a]);
-  const E = a.length - i, r = N && !t, s = z(() => t && x?.current?.querySelector('[data-role="measure-list"]')?.clientHeight || y, [y, t]);
+  const E = a.length - l, r = N && !t, s = z(() => t && x?.current?.querySelector('[data-role="measure-list"]')?.clientHeight || y, [y, t]);
   return /* @__PURE__ */ e(
     "div",
     {
@@ -188,7 +188,7 @@ const Q = he(
                       children: /* @__PURE__ */ e(
                         Q,
                         {
-                          previewCount: t ? a.length : i,
+                          previewCount: t ? a.length : l,
                           showEllipsisButton: r,
                           hiddenCount: E,
                           onToggle: () => {
@@ -236,9 +236,9 @@ const Q = he(
     }
   );
 }, Ce = (a) => {
-  const [l, n] = re(a, {
+  const [i, n] = re(a, {
     defaultValue: a.tabs.length ? a.tabs[0].value : void 0
-  }), [i, u] = k(""), t = T(/* @__PURE__ */ new Map()), [d, m] = k({
+  }), [l, u] = k(""), t = T(/* @__PURE__ */ new Map()), [d, m] = k({
     width: 0,
     transform: "translateX(0)"
   }), h = T(_e((o) => a.onSearch?.(o), 250)).current;
@@ -256,8 +256,8 @@ const Q = he(
     }
   };
   return A(() => {
-    l && v(l);
-  }, [l]), A(() => {
+    i && v(i);
+  }, [i]), A(() => {
     const o = a.tabs.length ? a.tabs[0].value : void 0;
     o && v(o);
   }, [a.tabs]), /* @__PURE__ */ f("div", { className: "tab-bar flex justify-between px-[10px] border-b border-[#e0e0e0] relative", children: [
@@ -280,8 +280,8 @@ const Q = he(
           },
           onClick: () => n(o.value),
           className: w("tab-bar__list-item cursor-pointer relative py-1", {
-            "text-[#0265ff]": l === o.value,
-            "hover:text-[#0265ff]": l !== o.value
+            "text-[#0265ff]": i === o.value,
+            "hover:text-[#0265ff]": i !== o.value
           }),
           children: o.label
         },
@@ -293,7 +293,7 @@ const Q = he(
         "input",
         {
           type: "text",
-          value: i,
+          value: l,
           onChange: (o) => {
             u(o.target.value), h(o.target.value);
           },
@@ -314,25 +314,25 @@ const Q = he(
     ] }) })
   ] });
 }, Ie = (a) => {
-  const { containerHeight: l } = C();
+  const { containerHeight: i } = C();
   return /* @__PURE__ */ e(
     "div",
     {
       className: w("tab-panel"),
       style: {
-        height: l + "px"
+        height: i + "px"
       },
       children: a.children
     }
   );
 }, Pe = {
   "selection-tabs": "_selection-tabs_88491_1"
-}, Z = ({ avatarurl: a, randomColor: l, name: n, extra: i }) => /* @__PURE__ */ f("div", { className: "flex flex-1 gap-[6px] items-center overflow-hidden ml-[-16px]", children: [
+}, Z = ({ avatarurl: a, randomColor: i, name: n, extra: l }) => /* @__PURE__ */ f("div", { className: "flex flex-1 gap-[6px] items-center overflow-hidden ml-[-16px]", children: [
   a ? /* @__PURE__ */ e(G, { src: a, size: 20, style: { flexShrink: 0 } }) : /* @__PURE__ */ e(
     G,
     {
       style: {
-        backgroundColor: l,
+        backgroundColor: i,
         fontSize: "12px",
         lineHeight: "13px",
         width: "20px",
@@ -343,9 +343,9 @@ const Q = he(
     }
   ),
   /* @__PURE__ */ e("span", { className: "text-sm select-none text-ellipsis whitespace-nowrap overflow-hidden", children: n }),
-  i
+  l
 ] }), ee = (a) => {
-  const { type: l, dispatch: n, value: i, containerHeight: u } = C(), { t } = D(), { data: d, loading: m } = H(
+  const { type: i, dispatch: n, value: l, containerHeight: u } = C(), { t } = D(), { data: d, loading: m } = H(
     () => Ee({
       groupLimit: [],
       memberLimit: [],
@@ -414,7 +414,7 @@ const Q = he(
       })
     }
   ].filter((r) => r.children.length), _ = y.map((r) => r.value), N = v || m, c = (r) => {
-    if (p.USER === l) {
+    if (p.USER === i) {
       const s = J(r, y);
       s && n({
         type: "insertOnly",
@@ -423,7 +423,7 @@ const Q = he(
         }
       });
     }
-    if (p.USER_GROUP === l) {
+    if (p.USER_GROUP === i) {
       const s = J(r, y);
       n({
         type: "addOne",
@@ -433,7 +433,7 @@ const Q = he(
       });
     }
   }, E = (r) => {
-    p.USER !== l && n({
+    p.USER !== i && n({
       type: "deleteOne",
       payload: r
     });
@@ -443,8 +443,8 @@ const Q = he(
       se,
       {
         data: y,
-        checkType: l === p.USER ? "radio" : "checkbox",
-        defaultSelectedKeys: i?.map((r) => r._id),
+        checkType: i === p.USER ? "radio" : "checkbox",
+        defaultSelectedKeys: l?.map((r) => r._id),
         defaultExpandedKeys: _,
         switcherIcon: (r) => /* @__PURE__ */ e(
           S,
@@ -465,7 +465,7 @@ const Q = he(
     !y.length && !N && /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ e("span", { className: "text-[#999]", children: t("member.noAvailable") }) })
   ] });
 }, te = (a) => {
-  const { type: l, value: n, dispatch: i, containerHeight: u } = C(), { t } = D(), { data: d, loading: m } = H(
+  const { type: i, value: n, dispatch: l, containerHeight: u } = C(), { t } = D(), { data: d, loading: m } = H(
     () => Re({
       departmentLimit: [],
       key: a.wd
@@ -482,7 +482,7 @@ const Q = he(
       children: o.filter((s) => s.status === 1 && s.name?.includes(a.wd)).map((s) => ({
         ...s,
         title: /* @__PURE__ */ f(K, { children: [
-          /* @__PURE__ */ e(ne, { type: "group" }),
+          /* @__PURE__ */ e(ne, { type: "group", size: 16 }),
           /* @__PURE__ */ e("span", { className: "text-sm select-none text-ellipsis whitespace-nowrap overflow-hidden", children: s.name })
         ] })
       }))
@@ -506,8 +506,8 @@ const Q = he(
   ].filter((s) => s.children.length), N = _.map((s) => s._id), c = (s, g) => {
     if (!g)
       return;
-    if (l === p.DEPARMENT) {
-      i({
+    if (i === p.DEPARMENT) {
+      l({
         type: "insertOnly",
         payload: {
           ...g,
@@ -517,7 +517,7 @@ const Q = he(
       return;
     }
     const L = o.some((O) => O._id === g._id);
-    i({
+    l({
       type: "addOne",
       payload: {
         ...g,
@@ -526,7 +526,7 @@ const Q = he(
       }
     });
   }, E = (s) => {
-    i({
+    l({
       type: "deleteOne",
       payload: s
     });
@@ -536,7 +536,7 @@ const Q = he(
       se,
       {
         data: _,
-        checkType: l === p.DEPARMENT ? "radio" : "checkbox",
+        checkType: i === p.DEPARMENT ? "radio" : "checkbox",
         selectedKeys: n?.map((s) => s._id),
         fieldNames: {
           title: "title",
@@ -563,22 +563,22 @@ const Q = he(
     !_.length && !r && /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ e("span", { className: "text-[#999]", children: t("department.noAvailable") }) })
   ] });
 }, Me = () => {
-  const { type: a } = C(), { t: l } = D(), [n, i] = k(), u = Ne(), t = we(), d = {
+  const { type: a } = C(), { t: i } = D(), [n, l] = k(), u = Ne(), t = we(), d = {
     [p.USER]: {
       raw: /* @__PURE__ */ e(ee, { wd: n }),
-      placeholder: l("tabs.searchMember")
+      placeholder: i("tabs.searchMember")
     },
     [p.USER_GROUP]: {
       raw: /* @__PURE__ */ e(ee, { wd: n }),
-      placeholder: l("tabs.searchMember")
+      placeholder: i("tabs.searchMember")
     },
     [p.DEPARMENT]: {
       raw: /* @__PURE__ */ e(te, { wd: n }),
-      placeholder: l("tabs.searchDepartment")
+      placeholder: i("tabs.searchDepartment")
     },
     [p.DEPARMENT_GROUP]: {
       raw: /* @__PURE__ */ e(te, { wd: n }),
-      placeholder: l("tabs.searchDepartment")
+      placeholder: i("tabs.searchDepartment")
     }
   }, h = z(() => ({
     [p.USER]: u,
@@ -586,13 +586,13 @@ const Q = he(
     [p.DEPARMENT]: t,
     [p.DEPARMENT_GROUP]: t
   }), [u, t])[a], [v, o] = k(h[0].value), b = (c) => {
-    o(c), i(void 0);
+    o(c), l(void 0);
   }, x = h.find((c) => c.value === v)?.view, y = (c) => {
     if (!c.trim().length) {
-      i(void 0);
+      l(void 0);
       return;
     }
-    i(c);
+    l(c);
   }, _ = n ? d[a]?.raw : x, N = d[a]?.placeholder;
   return /* @__PURE__ */ f("div", { className: w(Pe["selection-tabs"]), children: [
     /* @__PURE__ */ e(
@@ -607,22 +607,22 @@ const Q = he(
     ),
     /* @__PURE__ */ e(Ie, { children: _ })
   ] });
-}, Ae = (a, l) => Te(a, (n) => {
-  switch (l.type) {
+}, Ae = (a, i) => Te(a, (n) => {
+  switch (i.type) {
     case "addOne": {
-      const i = l.payload;
-      ~n.findIndex((t) => t._id === i._id) || n.push(i);
+      const l = i.payload;
+      ~n.findIndex((t) => t._id === l._id) || n.push(l);
       break;
     }
     case "addMany": {
-      l.payload.forEach((i) => {
-        ~n.findIndex((t) => t._id === i._id) || n.push(i);
+      i.payload.forEach((l) => {
+        ~n.findIndex((t) => t._id === l._id) || n.push(l);
       });
       break;
     }
     case "removeMany": {
-      const i = l.payload;
-      n.filter((t) => i.includes(t._id)).forEach((t) => {
+      const l = i.payload;
+      n.filter((t) => l.includes(t._id)).forEach((t) => {
         const d = n.findIndex((m) => m._id === t._id);
         ~d && n.splice(d, 1);
       });
@@ -633,22 +633,22 @@ const Q = he(
       break;
     }
     case "insertOnly": {
-      const i = l.payload;
-      n.length && (n.length = 0), n.push(i);
+      const l = i.payload;
+      n.length && (n.length = 0), n.push(l);
       break;
     }
     case "deleteOne": {
-      const i = l.payload, u = n.findIndex((t) => t._id === i);
+      const l = i.payload, u = n.findIndex((t) => t._id === l);
       ~u && n.splice(u, 1);
       break;
     }
     // 插入新元素 & 删除旧元素
     case "deleteAndInsert": {
-      const { newItems: i, oldIds: u } = l.payload;
+      const { newItems: l, oldIds: u } = i.payload;
       u.forEach((t) => {
         const d = n.findIndex((m) => m._id === t);
         ~d && n.splice(d, 1);
-      }), i.forEach((t) => {
+      }), l.forEach((t) => {
         ~n.findIndex((m) => m._id === t._id) || n.push(t);
       });
     }
@@ -656,14 +656,14 @@ const Q = he(
 }), Oe = {
   "depts-member-selector": "_depts-member-selector_d4xq4_1"
 }, tt = (a) => {
-  const { onCancel: l, onConfirm: n, onChange: i, defaultValue: u, type: t = "user" } = a, { t: d } = D(), [m, h] = re(a, {
+  const { onCancel: i, onConfirm: n, onChange: l, defaultValue: u, type: t = "user" } = a, { t: d } = D(), [m, h] = re(a, {
     defaultValue: u || []
   }), v = be(
     (b) => {
       const x = Ae(m, b);
-      h(x), i?.(x);
+      h(x), l?.(x);
     },
-    [h, m, i]
+    [h, m, l]
   ), o = z(() => ({
     type: t,
     value: m,
@@ -691,7 +691,7 @@ const Q = he(
         }
       ) }),
       /* @__PURE__ */ f("div", { className: "flex-1 flex justify-end", children: [
-        /* @__PURE__ */ e(V, { onClick: l, className: "btn-cancel", children: d("common.cancel") }),
+        /* @__PURE__ */ e(V, { onClick: i, className: "btn-cancel", children: d("common.cancel") }),
         /* @__PURE__ */ e(V, { type: "primary", className: "ml-3", onClick: () => n?.(m), children: d("common.confirm") })
       ] })
     ] })