@baishuyun/ui-business 2.0.6 → 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/subcomponents/Entity/Department/index.js

@@ -10,12 +10,15 @@ import { S } from "../../../../vendors/simplebar-react.js";
 import { Tree as w, Icon as C, Checkbox as O } from "bsy-react-ui";
 import { g as J } from "../../../../vendors/services/corp/outsider.service.js";
 const Q = (t) => {
-  const { type: r, containerHeight: p, value: o } = N(), { t: a } = k(), f = o?.map((d) => d._id) || [], i = t.data?.map((d) => d._id);
+  const { type: r, containerHeight: p, value: o } = N(), { t: a } = k(), f = o?.map((d) => d._id) || [], s = t.data?.map((d) => d._id);
   return /* @__PURE__ */ g(
     S,
     {
       style: { height: p - 8, padding: "4px" },
       className: "internal-container",
+      classNames: {
+        contentEl: "internal-container-content-el"
+      },
       children: [
         t.data.length > 0 && /* @__PURE__ */ e(
           w,
@@ -31,7 +34,7 @@ const Q = (t) => {
             selectedKeys: f,
             onSelect: t.onSelect,
             onDeSelect: t.onDeselect,
-            defaultExpandedKeys: i,
+            defaultExpandedKeys: s,
             icon: () => /* @__PURE__ */ e(C, { name: "dept-one", className: "internal-container__icon" }),
             switcherIcon: (d) => /* @__PURE__ */ e(
               C,
@@ -49,7 +52,7 @@ const Q = (t) => {
     }
   );
 }, V = (t) => {
-  const { type: r, containerHeight: p, value: o } = N(), { t: a } = k(), [f, i] = D(
+  const { type: r, containerHeight: p, value: o } = N(), { t: a } = k(), [f, s] = D(
     "dockcorp"
     /* DOCK_PERSON_GROUP */
   ), d = o?.map((n) => n._id) || [], b = [
@@ -63,7 +66,7 @@ const Q = (t) => {
       value: "dockcorpdept"
       /* DOCK_DEPARTMENT */
     }
-  ], s = (n, u) => {
+  ], i = (n, u) => {
     const m = [];
     for (const c of n)
       if (c.type === u)
@@ -73,56 +76,65 @@ const Q = (t) => {
             children: c.children
           });
         else {
-          const l = c.children ? s(c.children, u) : [];
+          const l = c.children ? i(c.children, u) : [];
           m.push({
             ...c,
             children: l.length > 0 ? l : void 0
           });
         }
       else {
-        const l = c.children ? s(c.children, u) : [];
+        const l = c.children ? i(c.children, u) : [];
         l.length > 0 && m.push({
           ...c,
           children: l
         });
       }
     return m;
-  }, x = s(t.data, f), _ = x?.map((n) => n._id);
+  }, x = i(t.data, f), _ = x?.map((n) => n._id);
   return /* @__PURE__ */ g("div", { className: "external-container", children: [
-    /* @__PURE__ */ e(L, { tabs: b, value: f, onChange: i }),
-    /* @__PURE__ */ e("div", { className: "external-container__content", children: /* @__PURE__ */ g(S, { style: { height: p - 42, padding: "4px" }, children: [
-      x.length > 0 && /* @__PURE__ */ e(
-        w,
-        {
-          parentCheckable: !0,
-          checkType: r === E.DEPARMENT ? "radio" : "checkbox",
-          data: x,
-          fieldNames: {
-            title: "name",
-            value: "_id",
-            children: "children"
-          },
-          selectedKeys: d,
-          onSelect: t.onSelect,
-          onDeSelect: t.onDeselect,
-          defaultExpandedKeys: _,
-          icon: () => /* @__PURE__ */ e(C, { name: "dept-one", className: "text-[#0265ff]", size: 16 }),
-          switcherIcon: (n) => /* @__PURE__ */ e(
-            C,
+    /* @__PURE__ */ e(L, { tabs: b, value: f, onChange: s }),
+    /* @__PURE__ */ e("div", { className: "external-container__content", children: /* @__PURE__ */ g(
+      S,
+      {
+        style: { height: p - 42, padding: "4px" },
+        classNames: {
+          contentEl: "external-container-content-el"
+        },
+        children: [
+          x.length > 0 && /* @__PURE__ */ e(
+            w,
             {
-              name: "xiangxiazhankai-11",
-              className: v(
-                "transition-transform text-base duration-300 ease-in-out text-[#666]",
+              parentCheckable: !0,
+              checkType: r === E.DEPARMENT ? "radio" : "checkbox",
+              data: x,
+              fieldNames: {
+                title: "name",
+                value: "_id",
+                children: "children"
+              },
+              selectedKeys: d,
+              onSelect: t.onSelect,
+              onDeSelect: t.onDeselect,
+              defaultExpandedKeys: _,
+              icon: () => /* @__PURE__ */ e(C, { name: "dept-one", className: "text-[#0265ff]", size: 16 }),
+              switcherIcon: (n) => /* @__PURE__ */ e(
+                C,
                 {
-                  "rotate-90": n
+                  name: "xiangxiazhankai-11",
+                  className: v(
+                    "transition-transform text-base duration-300 ease-in-out text-[#666]",
+                    {
+                      "rotate-90": n
+                    }
+                  )
                 }
               )
             }
-          )
-        }
-      ),
-      x.length === 0 && !t.loading && /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ e("span", { className: "text-[#999]", children: a("department.noAvailable") }) })
-    ] }) })
+          ),
+          x.length === 0 && !t.loading && /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ e("span", { className: "text-[#999]", children: a("department.noAvailable") }) })
+        ]
+      }
+    ) })
   ] });
 }, W = () => {
   const { type: t, dispatch: r } = N(), { t: p } = k(), [o] = D([
@@ -131,7 +143,7 @@ const Q = (t) => {
   ]), [a, f] = D(
     0
     /* INTERNAL */
-  ), { data: i, loading: d } = T(
+  ), { data: s, loading: d } = T(
     () => j({
       departmentLimit: [],
       hasDeptDock: a === 1
@@ -141,10 +153,10 @@ const Q = (t) => {
       refreshDeps: [a]
     }
   ), b = G(() => {
-    const l = i?.departments || [];
+    const l = s?.departments || [];
     return l.length > 0 ? B(l) : [];
-  }, [i]), s = G(() => {
-    const l = i?.label_corp_list || [];
+  }, [s]), i = G(() => {
+    const l = s?.label_corp_list || [];
     if (!l.length)
       return [];
     const y = l.filter((h) => h.type === "dockcorp" || h.type === "dockdept" ? !0 : h.parentId === 0 ? !1 : l.some((z) => z.parentId === h.departmentId)), I = y.map((h) => ({
@@ -158,12 +170,12 @@ const Q = (t) => {
       value: "_id",
       title: "name"
     }) : [];
-  }, [i]), x = {
+  }, [s]), x = {
     0: b,
-    1: s
+    1: i
   }, _ = M(
     (l) => {
-      const y = a === 1 ? i?.label_corp_list : i?.departments;
+      const y = a === 1 ? s?.label_corp_list : s?.departments;
       if (!y)
         return;
       const I = y.find((h) => h._id === l);
@@ -174,7 +186,7 @@ const Q = (t) => {
         }
       });
     },
-    [r, i, a]
+    [r, s, a]
   ), n = M(
     (l, y) => {
       r({
@@ -194,7 +206,7 @@ const Q = (t) => {
       type: "deleteOne",
       payload: y._id
     });
-  }, m = E.DEPARMENT === t ? _ : n, c = i?.label_corp_count || 0;
+  }, m = E.DEPARMENT === t ? _ : n, c = s?.label_corp_count || 0;
   return /* @__PURE__ */ g("div", { className: "flex line-height-normal h-full", children: [
     c > 0 && /* @__PURE__ */ e("aside", { className: "basis-[200px] p-1 shrink-0", children: /* @__PURE__ */ e("ul", { className: "flex flex-col", children: o.filter((l) => l.visible).map((l) => /* @__PURE__ */ e(
       "li",
@@ -238,7 +250,7 @@ const Q = (t) => {
     )
   ] });
 }, F = (t) => {
-  const { list: r } = t, { value: p, type: o, dispatch: a } = N(), f = o === E.DEPARMENT, i = o === E.DEPARMENT_GROUP, d = p?.[0]?._id, b = (n) => {
+  const { list: r } = t, { value: p, type: o, dispatch: a } = N(), f = o === E.DEPARMENT, s = o === E.DEPARMENT_GROUP, d = p?.[0]?._id, b = (n) => {
     const u = r?.find((m) => m._id === n.target.value);
     u && a({
       type: "insertOnly",
@@ -246,7 +258,7 @@ const Q = (t) => {
         type: t.type || u.type
       })
     });
-  }, s = (n) => {
+  }, i = (n) => {
     a({
       type: "deleteOne",
       payload: n
@@ -276,7 +288,7 @@ const Q = (t) => {
             value: n._id,
             className: "px-[10px] py-[6px]",
             onClick: () => {
-              s(n._id);
+              i(n._id);
             },
             children: /* @__PURE__ */ e("div", { className: "flex gap-[6px] items-center", children: /* @__PURE__ */ e("span", { className: "text-sm select-none", children: n.name }) })
           }
@@ -284,7 +296,7 @@ const Q = (t) => {
       },
       n._id
     )) }),
-    i && /* @__PURE__ */ e(K, { children: /* @__PURE__ */ e(O.Group, { value: x, onChange: _, children: r.map((n) => /* @__PURE__ */ e(
+    s && /* @__PURE__ */ e(K, { children: /* @__PURE__ */ e(O.Group, { value: x, onChange: _, children: r.map((n) => /* @__PURE__ */ e(
       "li",
       {
         className: v("rounded-[4px] cursor-pointer font-0 px-[10px]", {
@@ -309,25 +321,25 @@ const Q = (t) => {
   const { containerHeight: t } = N(), { t: r } = k(), [p] = D([
     { key: "default", label: r("externalContact.defaultGroup") },
     { key: "custom", label: r("externalContact.customGroup") }
-  ]), [o, a] = D("default"), { data: f, loading: i } = T(() => J()), d = f?.list || [], b = o === "default" ? d.filter((s) => s.type === "1") : d.filter((s) => s.type !== "1");
+  ]), [o, a] = D("default"), { data: f, loading: s } = T(() => J()), d = f?.list || [], b = o === "default" ? d.filter((i) => i.type === "1") : d.filter((i) => i.type !== "1");
   return /* @__PURE__ */ g("div", { className: "external-contact-entity relative flex", children: [
-    /* @__PURE__ */ e("aside", { className: "basis-[192px] p-1", children: /* @__PURE__ */ e("ul", { className: "flex flex-col", children: p.map((s) => /* @__PURE__ */ e(
+    /* @__PURE__ */ e("aside", { className: "basis-[192px] p-1", children: /* @__PURE__ */ e("ul", { className: "flex flex-col", children: p.map((i) => /* @__PURE__ */ e(
       "li",
       {
         onClick: () => {
-          a(s.key);
+          a(i.key);
         },
         className: v("px-[10px] py-[7px] rounded cursor-pointer text-sm", {
-          "bg-[#F0F6FF] text-[#0265ff]": o === s.key,
-          "text-black hover:bg-[#f3f3f3]": o !== s.key
+          "bg-[#F0F6FF] text-[#0265ff]": o === i.key,
+          "text-black hover:bg-[#f3f3f3]": o !== i.key
         }),
-        children: s.label
+        children: i.label
       },
-      s.key
+      i.key
     )) }) }),
-    /* @__PURE__ */ e("div", { className: "flex-1 border-l border-[#E0E0E0]", children: /* @__PURE__ */ e(A, { spinning: i, tip: r("common.loading"), children: /* @__PURE__ */ g(S, { style: { height: t - 8, padding: "4px" }, children: [
+    /* @__PURE__ */ e("div", { className: "flex-1 border-l border-[#E0E0E0]", children: /* @__PURE__ */ e(A, { spinning: s, tip: r("common.loading"), children: /* @__PURE__ */ g(S, { style: { height: t - 8, padding: "4px" }, children: [
       b.length > 0 && /* @__PURE__ */ e(F, { list: b, type: "group" }),
-      b.length === 0 && !i && /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ e("span", { className: "text-[#999]", children: r("externalContact.noAvailableGroup") }) })
+      b.length === 0 && !s && /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ e("span", { className: "text-[#999]", children: r("externalContact.noAvailableGroup") }) })
     ] }) }) })
   ] });
 }, oe = () => {