@yuku123/z-frontend-common 0.1.0

package/README.md

@@ -0,0 +1,59 @@
+# @yuku123/z-frontend-common
+
+> z-opc 共享前端组件库 · React 19 + Ant Design 6
+
+## 安装
+
+```bash
+npm install @yuku123/z-frontend-common
+# 国内用户加速
+# .npmrc: @yuku1231:registry=https://registry.npmmirror.com/
+```
+
+## 导出能力
+
+### 组件
+- `AppLayout` — 统一布局（Sider + Header + Content）
+- `StatusTag` — 状态标签
+- `LoginPage` — 统一登录页
+- `ErrorBoundary` — React 错误边界
+
+### 请求工具
+- `request` — 默认实例（`baseURL=/api`，识别 `{code, data, message}` 后端响应）
+- `authRequest` — 同上（语义区分）
+- `createRequest({baseURL, tokenKey, userInfoKey, unauthorizedRedirect, timeout})` — 工厂
+- `setupInterceptors(instance, options)` — 自定义拦截器
+
+## 使用示例
+
+```jsx
+import { AppLayout, LoginPage, request } from '@yuku123/z-frontend-common'
+
+// 业务模块推荐：在 src/utils/request.js 写 2-10 行适配层
+import { createRequest } from '@yuku123/z-frontend-common'
+const request = createRequest({ baseURL: '/meta', tokenKey: 'token' })
+export default request
+```
+
+## 统一后端响应格式
+
+```json
+{ "code": 200, "data": T, "message": "ok" }
+```
+
+- `code=200` → 自动返回 `data`
+- 其他 code → reject
+- 响应无 `code` 字段 → pass-through 透传
+
+## 长期方案
+
+- 模板从 z-meta 拉取（数据库驱动）
+- 业务侧 `res.data.xxx` 写法统一
+
+## 仓库
+
+https://github.com/yuku123/z-opc/tree/main/z-frontend-common
+
+## License
+
+MIT

package/dist/z-frontend-common.es.js

@@ -0,0 +1,497 @@
+var fe = Object.defineProperty;
+var de = (r, s, a) => s in r ? fe(r, s, { enumerable: !0, configurable: !0, writable: !0, value: a }) : r[s] = a;
+var D = (r, s, a) => de(r, typeof s != "symbol" ? s + "" : s, a);
+import V, { useState as G } from "react";
+import { Layout as P, Spin as me, Menu as pe, Tag as he, Card as ge, Form as v, Input as U, Button as H, message as A, Alert as xe, Space as be } from "antd";
+import { MenuUnfoldOutlined as Ee, MenuFoldOutlined as Re, UserOutlined as ye, LockOutlined as ve, BugOutlined as _e, ReloadOutlined as je } from "@ant-design/icons";
+import { useNavigate as ke, useLocation as Te, Outlet as Se } from "react-router-dom";
+import we from "axios";
+var _ = { exports: {} }, b = {};
+/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var W;
+function Oe() {
+  if (W) return b;
+  W = 1;
+  var r = Symbol.for("react.transitional.element"), s = Symbol.for("react.fragment");
+  function a(f, i, o) {
+    var d = null;
+    if (o !== void 0 && (d = "" + o), i.key !== void 0 && (d = "" + i.key), "key" in i) {
+      o = {};
+      for (var p in i)
+        p !== "key" && (o[p] = i[p]);
+    } else o = i;
+    return i = o.ref, {
+      $$typeof: r,
+      type: f,
+      key: d,
+      ref: i !== void 0 ? i : null,
+      props: o
+    };
+  }
+  return b.Fragment = s, b.jsx = a, b.jsxs = a, b;
+}
+var E = {};
+/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var B;
+function Ae() {
+  return B || (B = 1, process.env.NODE_ENV !== "production" && (function() {
+    function r(e) {
+      if (e == null) return null;
+      if (typeof e == "function")
+        return e.$$typeof === ie ? null : e.displayName || e.name || null;
+      if (typeof e == "string") return e;
+      switch (e) {
+        case j:
+          return "Fragment";
+        case ee:
+          return "Profiler";
+        case Q:
+          return "StrictMode";
+        case oe:
+          return "Suspense";
+        case se:
+          return "SuspenseList";
+        case le:
+          return "Activity";
+      }
+      if (typeof e == "object")
+        switch (typeof e.tag == "number" && console.error(
+          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
+        ), e.$$typeof) {
+          case Z:
+            return "Portal";
+          case te:
+            return e.displayName || "Context";
+          case re:
+            return (e._context.displayName || "Context") + ".Consumer";
+          case ne:
+            var t = e.render;
+            return e = e.displayName, e || (e = t.displayName || t.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case ae:
+            return t = e.displayName || null, t !== null ? t : r(e.type) || "Memo";
+          case k:
+            t = e._payload, e = e._init;
+            try {
+              return r(e(t));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function s(e) {
+      return "" + e;
+    }
+    function a(e) {
+      try {
+        s(e);
+        var t = !1;
+      } catch {
+        t = !0;
+      }
+      if (t) {
+        t = console;
+        var l = t.error, c = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return l.call(
+          t,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          c
+        ), s(e);
+      }
+    }
+    function f(e) {
+      if (e === j) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === k)
+        return "<...>";
+      try {
+        var t = r(e);
+        return t ? "<" + t + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function i() {
+      var e = T.A;
+      return e === null ? null : e.getOwner();
+    }
+    function o() {
+      return Error("react-stack-top-frame");
+    }
+    function d(e) {
+      if (M.call(e, "key")) {
+        var t = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (t && t.isReactWarning) return !1;
+      }
+      return e.key !== void 0;
+    }
+    function p(e, t) {
+      function l() {
+        Y || (Y = !0, console.error(
+          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
+          t
+        ));
+      }
+      l.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: l,
+        configurable: !0
+      });
+    }
+    function h() {
+      var e = r(this.type);
+      return F[e] || (F[e] = !0, console.error(
+        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
+      )), e = this.props.ref, e !== void 0 ? e : null;
+    }
+    function g(e, t, l, c, y, w) {
+      var u = l.ref;
+      return e = {
+        $$typeof: L,
+        type: e,
+        key: t,
+        props: l,
+        _owner: c
+      }, (u !== void 0 ? u : null) !== null ? Object.defineProperty(e, "ref", {
+        enumerable: !1,
+        get: h
+      }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: 0
+      }), Object.defineProperty(e, "_debugInfo", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: null
+      }), Object.defineProperty(e, "_debugStack", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: y
+      }), Object.defineProperty(e, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: w
+      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+    }
+    function m(e, t, l, c, y, w) {
+      var u = t.children;
+      if (u !== void 0)
+        if (c)
+          if (ce(u)) {
+            for (c = 0; c < u.length; c++)
+              I(u[c]);
+            Object.freeze && Object.freeze(u);
+          } else
+            console.error(
+              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
+            );
+        else I(u);
+      if (M.call(t, "key")) {
+        u = r(e);
+        var x = Object.keys(t).filter(function(ue) {
+          return ue !== "key";
+        });
+        c = 0 < x.length ? "{key: someKey, " + x.join(": ..., ") + ": ...}" : "{key: someKey}", z[u + c] || (x = 0 < x.length ? "{" + x.join(": ..., ") + ": ...}" : "{}", console.error(
+          `A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,
+          c,
+          u,
+          x,
+          u
+        ), z[u + c] = !0);
+      }
+      if (u = null, l !== void 0 && (a(l), u = "" + l), d(t) && (a(t.key), u = "" + t.key), "key" in t) {
+        l = {};
+        for (var O in t)
+          O !== "key" && (l[O] = t[O]);
+      } else l = t;
+      return u && p(
+        l,
+        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
+      ), g(
+        e,
+        u,
+        l,
+        i(),
+        y,
+        w
+      );
+    }
+    function I(e) {
+      N(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === k && (e._payload.status === "fulfilled" ? N(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+    }
+    function N(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === L;
+    }
+    var R = V, L = Symbol.for("react.transitional.element"), Z = Symbol.for("react.portal"), j = Symbol.for("react.fragment"), Q = Symbol.for("react.strict_mode"), ee = Symbol.for("react.profiler"), re = Symbol.for("react.consumer"), te = Symbol.for("react.context"), ne = Symbol.for("react.forward_ref"), oe = Symbol.for("react.suspense"), se = Symbol.for("react.suspense_list"), ae = Symbol.for("react.memo"), k = Symbol.for("react.lazy"), le = Symbol.for("react.activity"), ie = Symbol.for("react.client.reference"), T = R.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, M = Object.prototype.hasOwnProperty, ce = Array.isArray, S = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    R = {
+      react_stack_bottom_frame: function(e) {
+        return e();
+      }
+    };
+    var Y, F = {}, $ = R.react_stack_bottom_frame.bind(
+      R,
+      o
+    )(), q = S(f(o)), z = {};
+    E.Fragment = j, E.jsx = function(e, t, l) {
+      var c = 1e4 > T.recentlyCreatedOwnerStacks++;
+      return m(
+        e,
+        t,
+        l,
+        !1,
+        c ? Error("react-stack-top-frame") : $,
+        c ? S(f(e)) : q
+      );
+    }, E.jsxs = function(e, t, l) {
+      var c = 1e4 > T.recentlyCreatedOwnerStacks++;
+      return m(
+        e,
+        t,
+        l,
+        !0,
+        c ? Error("react-stack-top-frame") : $,
+        c ? S(f(e)) : q
+      );
+    };
+  })()), E;
+}
+var J;
+function Pe() {
+  return J || (J = 1, process.env.NODE_ENV === "production" ? _.exports = Oe() : _.exports = Ae()), _.exports;
+}
+var n = Pe();
+const { Header: Ce, Sider: Ie, Content: Ne } = P;
+function Le({
+  menuItems: r = [],
+  appTitle: s = "One Company",
+  appShort: a = "OC",
+  headerExtra: f,
+  loading: i = !1
+}) {
+  const [o, d] = G(!1), p = ke(), h = Te(), g = ({ key: m }) => {
+    p(m);
+  };
+  return /* @__PURE__ */ n.jsxs(P, { style: { minHeight: "100vh" }, children: [
+    /* @__PURE__ */ n.jsxs(Ie, { trigger: null, collapsible: !0, collapsed: o, children: [
+      /* @__PURE__ */ n.jsx("div", { style: {
+        height: 64,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        color: "white",
+        fontSize: o ? 14 : 18,
+        fontWeight: "bold"
+      }, children: o ? a : s }),
+      i ? /* @__PURE__ */ n.jsx("div", { style: { padding: 16, textAlign: "center" }, children: /* @__PURE__ */ n.jsx(me, { size: "small" }) }) : /* @__PURE__ */ n.jsx(
+        pe,
+        {
+          theme: "dark",
+          mode: "inline",
+          selectedKeys: [h.pathname],
+          items: r,
+          onClick: g
+        }
+      )
+    ] }),
+    /* @__PURE__ */ n.jsxs(P, { children: [
+      /* @__PURE__ */ n.jsxs(Ce, { style: {
+        padding: "0 16px",
+        background: "#fff",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between"
+      }, children: [
+        /* @__PURE__ */ n.jsx("span", { onClick: () => d(!o), style: { fontSize: 18, cursor: "pointer" }, children: o ? /* @__PURE__ */ n.jsx(Ee, {}) : /* @__PURE__ */ n.jsx(Re, {}) }),
+        f
+      ] }),
+      /* @__PURE__ */ n.jsx(Ne, { style: { margin: 16, padding: 24, background: "#fff", minHeight: 280 }, children: /* @__PURE__ */ n.jsx(Se, {}) })
+    ] })
+  ] });
+}
+const K = {
+  1: { color: "green", text: "正常" },
+  0: { color: "red", text: "禁用" },
+  pending: { color: "orange", text: "待处理" },
+  approved: { color: "blue", text: "已通过" },
+  rejected: { color: "red", text: "已拒绝" }
+};
+function Me({ status: r, map: s }) {
+  const a = (s == null ? void 0 : s[r]) || K[r] || { color: "default", text: String(r) };
+  return /* @__PURE__ */ n.jsx(he, { color: a.color, children: a.text });
+}
+function Ye(r) {
+  if (r && typeof r == "object" && "code" in r && "data" in r) {
+    const s = r;
+    return s.code !== 200 ? Promise.reject(new Error(s.message || "请求失败")) : s.data;
+  }
+  return r;
+}
+function Fe(r, s = {}) {
+  const {
+    tokenKey: a = "token",
+    userInfoKey: f = "userInfo",
+    unauthorizedRedirect: i = "/login"
+  } = s;
+  r.interceptors.request.use((o) => {
+    const d = localStorage.getItem(a);
+    return d && (o.headers.Authorization = `Bearer ${d}`), o;
+  }), r.interceptors.response.use(
+    (o) => Ye(o.data),
+    (o) => {
+      var d, p, h;
+      return ((d = o.response) == null ? void 0 : d.status) === 401 ? (localStorage.removeItem(a), localStorage.removeItem(f), window.location.href = i) : ((p = o.response) == null ? void 0 : p.status) === 403 ? console.error("没有权限访问该资源") : ((h = o.response) == null ? void 0 : h.status) === 500 && console.error("服务器内部错误"), Promise.reject(o);
+    }
+  );
+}
+function C(r = {}) {
+  const s = we.create({
+    baseURL: r.baseURL ?? "/api",
+    timeout: r.timeout ?? 1e4
+  });
+  return Fe(s, {
+    tokenKey: r.tokenKey,
+    userInfoKey: r.userInfoKey,
+    unauthorizedRedirect: r.unauthorizedRedirect
+  }), s;
+}
+const X = C(), $e = C();
+function qe({
+  title: r = "统一管理平台",
+  loginApi: s = "/auth/login",
+  redirectUrl: a = "/",
+  onSuccess: f
+}) {
+  const [i, o] = G(!1), d = async (p) => {
+    var h, g;
+    o(!0);
+    try {
+      const m = await X.post(s, p);
+      m.token ? (localStorage.setItem("token", m.token), localStorage.setItem("userInfo", JSON.stringify(m.user || m)), A.success("登录成功"), f ? f(m) : window.location.href = a) : A.error("登录失败：未获取到 token");
+    } catch (m) {
+      A.error(((g = (h = m.response) == null ? void 0 : h.data) == null ? void 0 : g.message) || m.message || "登录失败");
+    } finally {
+      o(!1);
+    }
+  };
+  return /* @__PURE__ */ n.jsx("div", { style: {
+    height: "100vh",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    background: "#f0f2f5"
+  }, children: /* @__PURE__ */ n.jsx(ge, { title: r, style: { width: 400 }, children: /* @__PURE__ */ n.jsxs(v, { onFinish: d, size: "large", children: [
+    /* @__PURE__ */ n.jsx(v.Item, { name: "username", rules: [{ required: !0, message: "请输入用户名" }], children: /* @__PURE__ */ n.jsx(U, { prefix: /* @__PURE__ */ n.jsx(ye, {}), placeholder: "用户名" }) }),
+    /* @__PURE__ */ n.jsx(v.Item, { name: "password", rules: [{ required: !0, message: "请输入密码" }], children: /* @__PURE__ */ n.jsx(U.Password, { prefix: /* @__PURE__ */ n.jsx(ve, {}), placeholder: "密码" }) }),
+    /* @__PURE__ */ n.jsx(v.Item, { children: /* @__PURE__ */ n.jsx(H, { type: "primary", htmlType: "submit", loading: i, block: !0, children: "登 录" }) })
+  ] }) }) });
+}
+class ze extends V.Component {
+  constructor(a) {
+    super(a);
+    D(this, "handleReset", () => {
+      this.setState({ hasError: !1, error: null, errorInfo: null }), typeof this.props.onReset == "function" && this.props.onReset();
+    });
+    this.state = { hasError: !1, error: null, errorInfo: null };
+  }
+  static getDerivedStateFromError(a) {
+    return { hasError: !0, error: a };
+  }
+  componentDidCatch(a, f) {
+    console.error("[ErrorBoundary] caught error:", a, f), this.setState({ errorInfo: f });
+  }
+  render() {
+    if (!this.state.hasError)
+      return this.props.children;
+    const { fallbackTitle: a = "组件加载失败", fallbackDescription: f, showReload: i = !0 } = this.props, o = this.state.error && (this.state.error.message || String(this.state.error)) || "未知错误";
+    return /* @__PURE__ */ n.jsxs(
+      "div",
+      {
+        style: {
+          padding: 24,
+          background: "#fff2f0",
+          border: "1px solid #ffccc7",
+          borderRadius: 8,
+          minHeight: 200
+        },
+        children: [
+          /* @__PURE__ */ n.jsx(
+            xe,
+            {
+              type: "error",
+              showIcon: !0,
+              icon: /* @__PURE__ */ n.jsx(_e, {}),
+              message: a,
+              description: /* @__PURE__ */ n.jsxs("div", { children: [
+                /* @__PURE__ */ n.jsx("div", { style: { marginBottom: 8 }, children: f || "当前组件发生了异常，已被错误边界捕获。其他功能仍可正常使用。" }),
+                /* @__PURE__ */ n.jsx(
+                  "div",
+                  {
+                    style: {
+                      fontFamily: "Menlo, Monaco, Consolas, monospace",
+                      fontSize: 12,
+                      color: "#cf1322",
+                      background: "#fff",
+                      padding: 8,
+                      borderRadius: 4,
+                      border: "1px solid #ffccc7",
+                      wordBreak: "break-word",
+                      whiteSpace: "pre-wrap"
+                    },
+                    children: o
+                  }
+                )
+              ] })
+            }
+          ),
+          i && /* @__PURE__ */ n.jsx(be, { style: { marginTop: 16 }, children: /* @__PURE__ */ n.jsx(H, { icon: /* @__PURE__ */ n.jsx(je, {}), onClick: this.handleReset, children: "重试" }) })
+        ]
+      }
+    );
+  }
+}
+const Ge = {
+  AppLayout: Le,
+  StatusTag: Me,
+  defaultStatusMap: K,
+  LoginPage: qe,
+  ErrorBoundary: ze,
+  request: X,
+  authRequest: $e,
+  createRequest: C
+};
+export {
+  Le as AppLayout,
+  ze as ErrorBoundary,
+  qe as LoginPage,
+  Me as StatusTag,
+  $e as authRequest,
+  C as createRequest,
+  Ge as default,
+  K as defaultStatusMap,
+  X as request,
+  Fe as setupInterceptors
+};

package/dist/z-frontend-common.umd.js

@@ -0,0 +1,22 @@
+(function(s,p){typeof exports=="object"&&typeof module<"u"?p(exports,require("react"),require("antd"),require("@ant-design/icons"),require("react-router-dom"),require("axios")):typeof define=="function"&&define.amd?define(["exports","react","antd","@ant-design/icons","react-router-dom","axios"],p):(s=typeof globalThis<"u"?globalThis:s||self,p(s.ZFrontendCommon={},s.React,s.antd,s.icons,s.ReactRouterDOM,s.axios))})(this,(function(s,p,a,E,w,te){"use strict";var je=Object.defineProperty;var ke=(s,p,a)=>p in s?je(s,p,{enumerable:!0,configurable:!0,writable:!0,value:a}):s[p]=a;var re=(s,p,a)=>ke(s,typeof p!="symbol"?p+"":p,a);var j={exports:{}},v={};/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var F;function ne(){if(F)return v;F=1;var n=Symbol.for("react.transitional.element"),l=Symbol.for("react.fragment");function i(m,c,o){var h=null;if(o!==void 0&&(h=""+o),c.key!==void 0&&(h=""+c.key),"key"in c){o={};for(var R in c)R!=="key"&&(o[R]=c[R])}else o=c;return c=o.ref,{$$typeof:n,type:m,key:h,ref:c!==void 0?c:null,props:o}}return v.Fragment=l,v.jsx=i,v.jsxs=i,v}var _={};/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */var q;function oe(){return q||(q=1,process.env.NODE_ENV!=="production"&&(function(){function n(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===xe?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case P:return"Fragment";case me:return"Profiler";case de:return"StrictMode";case Re:return"Suspense";case ye:return"SuspenseList";case be:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case fe:return"Portal";case he:return e.displayName||"Context";case pe:return(e._context.displayName||"Context")+".Consumer";case ge:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case Ee:return r=e.displayName||null,r!==null?r:n(e.type)||"Memo";case C:r=e._payload,e=e._init;try{return n(e(r))}catch{}}return null}function l(e){return""+e}function i(e){try{l(e);var r=!1}catch{r=!0}if(r){r=console;var u=r.error,f=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return u.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",f),l(e)}}function m(e){if(e===P)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===C)return"<...>";try{var r=n(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function c(){var e=I.A;return e===null?null:e.getOwner()}function o(){return Error("react-stack-top-frame")}function h(e){if(H.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function R(e,r){function u(){K||(K=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}u.isReactWarning=!0,Object.defineProperty(e,"key",{get:u,configurable:!0})}function y(){var e=n(this.type);return X[e]||(X[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function b(e,r,u,f,S,L){var d=u.ref;return e={$$typeof:G,type:e,key:r,props:u,_owner:f},(d!==void 0?d:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:y}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:S}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:L}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function g(e,r,u,f,S,L){var d=r.children;if(d!==void 0)if(f)if(ve(d)){for(f=0;f<d.length;f++)J(d[f]);Object.freeze&&Object.freeze(d)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else J(d);if(H.call(r,"key")){d=n(e);var x=Object.keys(r).filter(function(_e){return _e!=="key"});f=0<x.length?"{key: someKey, "+x.join(": ..., ")+": ...}":"{key: someKey}",ee[d+f]||(x=0<x.length?"{"+x.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,f,d,x,d),ee[d+f]=!0)}if(d=null,u!==void 0&&(i(u),d=""+u),h(r)&&(i(r.key),d=""+r.key),"key"in r){u={};for(var M in r)M!=="key"&&(u[M]=r[M])}else u=r;return d&&R(u,typeof e=="function"?e.displayName||e.name||"Unknown":e),b(e,d,u,c(),S,L)}function J(e){V(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===C&&(e._payload.status==="fulfilled"?V(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function V(e){return typeof e=="object"&&e!==null&&e.$$typeof===G}var T=p,G=Symbol.for("react.transitional.element"),fe=Symbol.for("react.portal"),P=Symbol.for("react.fragment"),de=Symbol.for("react.strict_mode"),me=Symbol.for("react.profiler"),pe=Symbol.for("react.consumer"),he=Symbol.for("react.context"),ge=Symbol.for("react.forward_ref"),Re=Symbol.for("react.suspense"),ye=Symbol.for("react.suspense_list"),Ee=Symbol.for("react.memo"),C=Symbol.for("react.lazy"),be=Symbol.for("react.activity"),xe=Symbol.for("react.client.reference"),I=T.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,H=Object.prototype.hasOwnProperty,ve=Array.isArray,N=console.createTask?console.createTask:function(){return null};T={react_stack_bottom_frame:function(e){return e()}};var K,X={},Z=T.react_stack_bottom_frame.bind(T,o)(),Q=N(m(o)),ee={};_.Fragment=P,_.jsx=function(e,r,u){var f=1e4>I.recentlyCreatedOwnerStacks++;return g(e,r,u,!1,f?Error("react-stack-top-frame"):Z,f?N(m(e)):Q)},_.jsxs=function(e,r,u){var f=1e4>I.recentlyCreatedOwnerStacks++;return g(e,r,u,!0,f?Error("react-stack-top-frame"):Z,f?N(m(e)):Q)}})()),_}var Y;function se(){return Y||(Y=1,process.env.NODE_ENV==="production"?j.exports=ne():j.exports=oe()),j.exports}var t=se();const{Header:ae,Sider:ie,Content:le}=a.Layout;function z({menuItems:n=[],appTitle:l="One Company",appShort:i="OC",headerExtra:m,loading:c=!1}){const[o,h]=p.useState(!1),R=w.useNavigate(),y=w.useLocation(),b=({key:g})=>{R(g)};return t.jsxs(a.Layout,{style:{minHeight:"100vh"},children:[t.jsxs(ie,{trigger:null,collapsible:!0,collapsed:o,children:[t.jsx("div",{style:{height:64,display:"flex",alignItems:"center",justifyContent:"center",color:"white",fontSize:o?14:18,fontWeight:"bold"},children:o?i:l}),c?t.jsx("div",{style:{padding:16,textAlign:"center"},children:t.jsx(a.Spin,{size:"small"})}):t.jsx(a.Menu,{theme:"dark",mode:"inline",selectedKeys:[y.pathname],items:n,onClick:b})]}),t.jsxs(a.Layout,{children:[t.jsxs(ae,{style:{padding:"0 16px",background:"#fff",display:"flex",alignItems:"center",justifyContent:"space-between"},children:[t.jsx("span",{onClick:()=>h(!o),style:{fontSize:18,cursor:"pointer"},children:o?t.jsx(E.MenuUnfoldOutlined,{}):t.jsx(E.MenuFoldOutlined,{})}),m]}),t.jsx(le,{style:{margin:16,padding:24,background:"#fff",minHeight:280},children:t.jsx(w.Outlet,{})})]})]})}const O={1:{color:"green",text:"正常"},0:{color:"red",text:"禁用"},pending:{color:"orange",text:"待处理"},approved:{color:"blue",text:"已通过"},rejected:{color:"red",text:"已拒绝"}};function D({status:n,map:l}){const i=(l==null?void 0:l[n])||O[n]||{color:"default",text:String(n)};return t.jsx(a.Tag,{color:i.color,children:i.text})}function ue(n){if(n&&typeof n=="object"&&"code"in n&&"data"in n){const l=n;return l.code!==200?Promise.reject(new Error(l.message||"请求失败")):l.data}return n}function U(n,l={}){const{tokenKey:i="token",userInfoKey:m="userInfo",unauthorizedRedirect:c="/login"}=l;n.interceptors.request.use(o=>{const h=localStorage.getItem(i);return h&&(o.headers.Authorization=`Bearer ${h}`),o}),n.interceptors.response.use(o=>ue(o.data),o=>{var h,R,y;return((h=o.response)==null?void 0:h.status)===401?(localStorage.removeItem(i),localStorage.removeItem(m),window.location.href=c):((R=o.response)==null?void 0:R.status)===403?console.error("没有权限访问该资源"):((y=o.response)==null?void 0:y.status)===500&&console.error("服务器内部错误"),Promise.reject(o)})}function k(n={}){const l=te.create({baseURL:n.baseURL??"/api",timeout:n.timeout??1e4});return U(l,{tokenKey:n.tokenKey,userInfoKey:n.userInfoKey,unauthorizedRedirect:n.unauthorizedRedirect}),l}const A=k(),B=k();function W({title:n="统一管理平台",loginApi:l="/auth/login",redirectUrl:i="/",onSuccess:m}){const[c,o]=p.useState(!1),h=async R=>{var y,b;o(!0);try{const g=await A.post(l,R);g.token?(localStorage.setItem("token",g.token),localStorage.setItem("userInfo",JSON.stringify(g.user||g)),a.message.success("登录成功"),m?m(g):window.location.href=i):a.message.error("登录失败：未获取到 token")}catch(g){a.message.error(((b=(y=g.response)==null?void 0:y.data)==null?void 0:b.message)||g.message||"登录失败")}finally{o(!1)}};return t.jsx("div",{style:{height:"100vh",display:"flex",justifyContent:"center",alignItems:"center",background:"#f0f2f5"},children:t.jsx(a.Card,{title:n,style:{width:400},children:t.jsxs(a.Form,{onFinish:h,size:"large",children:[t.jsx(a.Form.Item,{name:"username",rules:[{required:!0,message:"请输入用户名"}],children:t.jsx(a.Input,{prefix:t.jsx(E.UserOutlined,{}),placeholder:"用户名"})}),t.jsx(a.Form.Item,{name:"password",rules:[{required:!0,message:"请输入密码"}],children:t.jsx(a.Input.Password,{prefix:t.jsx(E.LockOutlined,{}),placeholder:"密码"})}),t.jsx(a.Form.Item,{children:t.jsx(a.Button,{type:"primary",htmlType:"submit",loading:c,block:!0,children:"登 录"})})]})})})}class $ extends p.Component{constructor(i){super(i);re(this,"handleReset",()=>{this.setState({hasError:!1,error:null,errorInfo:null}),typeof this.props.onReset=="function"&&this.props.onReset()});this.state={hasError:!1,error:null,errorInfo:null}}static getDerivedStateFromError(i){return{hasError:!0,error:i}}componentDidCatch(i,m){console.error("[ErrorBoundary] caught error:",i,m),this.setState({errorInfo:m})}render(){if(!this.state.hasError)return this.props.children;const{fallbackTitle:i="组件加载失败",fallbackDescription:m,showReload:c=!0}=this.props,o=this.state.error&&(this.state.error.message||String(this.state.error))||"未知错误";return t.jsxs("div",{style:{padding:24,background:"#fff2f0",border:"1px solid #ffccc7",borderRadius:8,minHeight:200},children:[t.jsx(a.Alert,{type:"error",showIcon:!0,icon:t.jsx(E.BugOutlined,{}),message:i,description:t.jsxs("div",{children:[t.jsx("div",{style:{marginBottom:8},children:m||"当前组件发生了异常，已被错误边界捕获。其他功能仍可正常使用。"}),t.jsx("div",{style:{fontFamily:"Menlo, Monaco, Consolas, monospace",fontSize:12,color:"#cf1322",background:"#fff",padding:8,borderRadius:4,border:"1px solid #ffccc7",wordBreak:"break-word",whiteSpace:"pre-wrap"},children:o})]})}),c&&t.jsx(a.Space,{style:{marginTop:16},children:t.jsx(a.Button,{icon:t.jsx(E.ReloadOutlined,{}),onClick:this.handleReset,children:"重试"})})]})}}const ce={AppLayout:z,StatusTag:D,defaultStatusMap:O,LoginPage:W,ErrorBoundary:$,request:A,authRequest:B,createRequest:k};s.AppLayout=z,s.ErrorBoundary=$,s.LoginPage=W,s.StatusTag=D,s.authRequest=B,s.createRequest=k,s.default=ce,s.defaultStatusMap=O,s.request=A,s.setupInterceptors=U,Object.defineProperties(s,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@yuku123/z-frontend-common",
+  "version": "0.1.0",
+  "private": false,
+  "description": "z-opc 共享前端组件库 - AppLayout / StatusTag / LoginPage / ErrorBoundary + 统一 createRequest 工厂",
+  "keywords": [
+    "react",
+    "antd",
+    "vite",
+    "frontend",
+    "z-opc"
+  ],
+  "license": "MIT",
+  "author": {
+    "name": "zifang",
+    "email": "1340947819@qq.com"
+  },
+  "homepage": "https://github.com/yuku123/z-opc/tree/main/z-frontend-common#readme",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/yuku123/z-opc.git",
+    "directory": "z-frontend-common"
+  },
+  "bugs": {
+    "url": "https://github.com/yuku123/z-opc/issues"
+  },
+  "main": "./dist/z-frontend-common.umd.js",
+  "module": "./dist/z-frontend-common.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/z-frontend-common.es.js",
+      "require": "./dist/z-frontend-common.umd.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "dev": "vite --port 3099",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "peerDependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "antd": "^6.3.3",
+    "react-router-dom": "^7.13.1"
+  },
+  "dependencies": {
+    "axios": "^1.16.1"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react": "^4.2.1",
+    "vite": "^6.2.0"
+  }
+}

package/src/components/ErrorBoundary/index.jsx

@@ -0,0 +1,93 @@
+import React from 'react'
+import {Alert, Button, Space} from 'antd'
+import {BugOutlined, ReloadOutlined} from '@ant-design/icons'
+
+/**
+ * React Error Boundary — 捕获子组件的 render/lifecycle/effect 异常，
+ * 用 fallback UI 替代冒泡到整棵 React 树导致整体卸载。
+ *
+ * 用法：
+ *   <ErrorBoundary fallbackTitle="流程编辑器加载失败">
+ *     <WorkflowEditor />
+ *   </ErrorBoundary>
+ */
+export default class ErrorBoundary extends React.Component {
+    constructor(props) {
+        super(props)
+        this.state = {hasError: false, error: null, errorInfo: null}
+    }
+
+    static getDerivedStateFromError(error) {
+        return {hasError: true, error}
+    }
+
+    componentDidCatch(error, errorInfo) {
+        // eslint-disable-next-line no-console
+        console.error('[ErrorBoundary] caught error:', error, errorInfo)
+        this.setState({errorInfo})
+    }
+
+    handleReset = () => {
+        this.setState({hasError: false, error: null, errorInfo: null})
+        if (typeof this.props.onReset === 'function') {
+            this.props.onReset()
+        }
+    }
+
+    render() {
+        if (!this.state.hasError) {
+            return this.props.children
+        }
+
+        const {fallbackTitle = '组件加载失败', fallbackDescription, showReload = true} = this.props
+        const errMsg = (this.state.error && (this.state.error.message || String(this.state.error))) || '未知错误'
+
+        return (
+            <div
+                style={{
+                    padding: 24,
+                    background: '#fff2f0',
+                    border: '1px solid #ffccc7',
+                    borderRadius: 8,
+                    minHeight: 200,
+                }}
+            >
+                <Alert
+                    type="error"
+                    showIcon
+                    icon={<BugOutlined/>}
+                    message={fallbackTitle}
+                    description={
+                        <div>
+                            <div style={{marginBottom: 8}}>
+                                {fallbackDescription || '当前组件发生了异常，已被错误边界捕获。其他功能仍可正常使用。'}
+                            </div>
+                            <div
+                                style={{
+                                    fontFamily: 'Menlo, Monaco, Consolas, monospace',
+                                    fontSize: 12,
+                                    color: '#cf1322',
+                                    background: '#fff',
+                                    padding: 8,
+                                    borderRadius: 4,
+                                    border: '1px solid #ffccc7',
+                                    wordBreak: 'break-word',
+                                    whiteSpace: 'pre-wrap',
+                                }}
+                            >
+                                {errMsg}
+                            </div>
+                        </div>
+                    }
+                />
+                {showReload && (
+                    <Space style={{marginTop: 16}}>
+                        <Button icon={<ReloadOutlined/>} onClick={this.handleReset}>
+                            重试
+                        </Button>
+                    </Space>
+                )}
+            </div>
+        )
+    }
+}

package/src/components/Layout/index.jsx

@@ -0,0 +1,69 @@
+import {Layout, Menu, Spin} from 'antd'
+import {MenuFoldOutlined, MenuUnfoldOutlined} from '@ant-design/icons'
+import {Outlet, useLocation, useNavigate} from 'react-router-dom'
+import {useState} from 'react'
+
+const {Header, Sider, Content} = Layout
+
+/**
+ * 统一布局组件
+ * @param {Object} props
+ * @param {Array} props.menuItems - antd Menu items 格式
+ * @param {string} props.appTitle - 应用标题
+ * @param {string} props.appShort - 折叠时标题缩写
+ * @param {ReactNode} props.headerExtra - 头部右侧额外内容
+ * @param {boolean} props.loading - 是否加载中
+ */
+export default function AppLayout({
+                                      menuItems = [],
+                                      appTitle = 'One Company',
+                                      appShort = 'OC',
+                                      headerExtra,
+                                      loading = false,
+                                  }) {
+    const [collapsed, setCollapsed] = useState(false)
+    const navigate = useNavigate()
+    const location = useLocation()
+
+    const handleMenuClick = ({key}) => {
+        navigate(key)
+    }
+
+    return (
+        <Layout style={{minHeight: '100vh'}}>
+            <Sider trigger={null} collapsible collapsed={collapsed}>
+                <div style={{
+                    height: 64, display: 'flex', alignItems: 'center', justifyContent: 'center',
+                    color: 'white', fontSize: collapsed ? 14 : 18, fontWeight: 'bold',
+                }}>
+                    {collapsed ? appShort : appTitle}
+                </div>
+                {loading ? (
+                    <div style={{padding: 16, textAlign: 'center'}}>
+                        <Spin size="small"/>
+                    </div>
+                ) : (
+                    <Menu theme="dark" mode="inline"
+                          selectedKeys={[location.pathname]}
+                          items={menuItems}
+                          onClick={handleMenuClick}
+                    />
+                )}
+            </Sider>
+            <Layout>
+                <Header style={{
+                    padding: '0 16px', background: '#fff',
+                    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+                }}>
+          <span onClick={() => setCollapsed(!collapsed)} style={{fontSize: 18, cursor: 'pointer'}}>
+            {collapsed ? <MenuUnfoldOutlined/> : <MenuFoldOutlined/>}
+          </span>
+                    {headerExtra}
+                </Header>
+                <Content style={{margin: 16, padding: 24, background: '#fff', minHeight: 280}}>
+                    <Outlet/>
+                </Content>
+            </Layout>
+        </Layout>
+    )
+}

package/src/components/LoginPage/index.jsx

@@ -0,0 +1,67 @@
+import {useState} from 'react'
+import {Button, Card, Form, Input, message} from 'antd'
+import {LockOutlined, UserOutlined} from '@ant-design/icons'
+import request from '../../utils/request'
+
+/**
+ * 统一登录页面组件
+ * @param {Object} props
+ * @param {string} props.title - 页面标题
+ * @param {string} props.loginApi - 登录 API 路径，默认 /auth/login
+ * @param {string} props.redirectUrl - 登录成功后跳转地址，默认 /
+ * @param {Function} props.onSuccess - 登录成功回调，覆盖 redirectUrl
+ */
+export default function LoginPage({
+                                      title = '统一管理平台',
+                                      loginApi = '/auth/login',
+                                      redirectUrl = '/',
+                                      onSuccess,
+                                  }) {
+    const [loading, setLoading] = useState(false)
+
+    const handleSubmit = async (values) => {
+        setLoading(true)
+        try {
+            const res = await request.post(loginApi, values)
+            if (res.token) {
+                localStorage.setItem('token', res.token)
+                localStorage.setItem('userInfo', JSON.stringify(res.user || res))
+                message.success('登录成功')
+                if (onSuccess) {
+                    onSuccess(res)
+                } else {
+                    window.location.href = redirectUrl
+                }
+            } else {
+                message.error('登录失败：未获取到 token')
+            }
+        } catch (err) {
+            message.error(err.response?.data?.message || err.message || '登录失败')
+        } finally {
+            setLoading(false)
+        }
+    }
+
+    return (
+        <div style={{
+            height: '100vh', display: 'flex', justifyContent: 'center', alignItems: 'center',
+            background: '#f0f2f5',
+        }}>
+            <Card title={title} style={{width: 400}}>
+                <Form onFinish={handleSubmit} size="large">
+                    <Form.Item name="username" rules={[{required: true, message: '请输入用户名'}]}>
+                        <Input prefix={<UserOutlined/>} placeholder="用户名"/>
+                    </Form.Item>
+                    <Form.Item name="password" rules={[{required: true, message: '请输入密码'}]}>
+                        <Input.Password prefix={<LockOutlined/>} placeholder="密码"/>
+                    </Form.Item>
+                    <Form.Item>
+                        <Button type="primary" htmlType="submit" loading={loading} block>
+                            登 录
+                        </Button>
+                    </Form.Item>
+                </Form>
+            </Card>
+        </div>
+    )
+}

package/src/components/StatusTag/index.jsx

@@ -0,0 +1,16 @@
+import {Tag} from 'antd'
+
+const defaultStatusMap = {
+    1: {color: 'green', text: '正常'},
+    0: {color: 'red', text: '禁用'},
+    pending: {color: 'orange', text: '待处理'},
+    approved: {color: 'blue', text: '已通过'},
+    rejected: {color: 'red', text: '已拒绝'},
+}
+
+export default function StatusTag({status, map}) {
+    const config = map?.[status] || defaultStatusMap[status] || {color: 'default', text: String(status)}
+    return <Tag color={config.color}>{config.text}</Tag>
+}
+
+export {defaultStatusMap}

package/src/dev.jsx

@@ -0,0 +1,28 @@
+/**
+ * z-frontend-common 开发调试入口
+ */
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import {LoginPage, StatusTag} from './index'
+
+const DevApp = () => {
+    return (
+        <div style={{padding: 20}}>
+            <h1>z-frontend-common Dev</h1>
+
+            <h2>StatusTag 示例</h2>
+            <StatusTag status={1}/>
+            <StatusTag status={0}/>
+            <StatusTag status="pending"/>
+            <StatusTag status="approved"/>
+            <StatusTag status="rejected"/>
+
+            <h2>LoginPage 示例</h2>
+            <div style={{height: 400, border: '1px solid #ccc', borderRadius: 8, overflow: 'hidden'}}>
+                <LoginPage title="测试登录"/>
+            </div>
+        </div>
+    )
+}
+
+ReactDOM.createRoot(document.getElementById('root')).render(<DevApp/>)

package/src/index.js

@@ -0,0 +1,36 @@
+/**
+ * z-frontend-common 组件库 - 导出所有可复用组件
+ *
+ * 命名导出 + 默认导出双形式：
+ *   import { AppLayout, LoginPage, request, createRequest } from '@yuku123/z-frontend-common'
+ *   import common from '@yuku123/z-frontend-common'
+ */
+
+// 组件
+export {default as AppLayout} from './components/Layout'
+export {default as StatusTag, defaultStatusMap} from './components/StatusTag'
+export {default as LoginPage} from './components/LoginPage'
+export {default as ErrorBoundary} from './components/ErrorBoundary'
+
+// 请求工具：默认实例（baseURL=/api）+ 工厂
+export {default as request} from './utils/request'
+export {authRequest, createRequest, setupInterceptors} from './utils/request'
+
+// 默认聚合对象
+import _AppLayout from './components/Layout'
+import _StatusTag, {defaultStatusMap as _defaultStatusMap} from './components/StatusTag'
+import _LoginPage from './components/LoginPage'
+import _ErrorBoundary from './components/ErrorBoundary'
+import _request, {authRequest as _authRequest, createRequest as _createRequest} from './utils/request'
+
+const common = {
+    AppLayout: _AppLayout,
+    StatusTag: _StatusTag,
+    defaultStatusMap: _defaultStatusMap,
+    LoginPage: _LoginPage,
+    ErrorBoundary: _ErrorBoundary,
+    request: _request,
+    authRequest: _authRequest,
+    createRequest: _createRequest,
+}
+export default common

package/src/utils/request.ts

@@ -0,0 +1,102 @@
+import axios, {AxiosInstance, AxiosResponse} from 'axios'
+
+/**
+ * 业务响应解包：识别后端约定的 {code, data, message} 格式。
+ *
+ * 标准（所有后端应遵守）：
+ *   - 成功：{code: 200, data: T, message: 'ok'}  →  返回 data
+ *   - 失败：{code: 4xx/5xx, data: null, message: '...'}  →  reject(new Error(message))
+ *
+ * 容错：响应不含 `code` 字段（旧的 Map / ResponseEntity 直返），按 pass-through 处理，
+ * 业务侧自行读取 res.data / res.success。
+ */
+function defaultUnwrap(data: unknown): unknown {
+    if (data && typeof data === 'object' && 'code' in data && 'data' in data) {
+        const wrapped = data as {code: number | string; data: unknown; message?: string}
+        if (wrapped.code !== 200) {
+            return Promise.reject(new Error(wrapped.message || '请求失败'))
+        }
+        return wrapped.data
+    }
+    return data
+}
+
+/**
+ * 请求拦截器配置
+ * @param options.tokenKey 自定义 token 键名，默认 'token'
+ * @param options.userInfoKey 自定义 userInfo 键名，默认 'userInfo'
+ * @param options.unauthorizedRedirect 401 时跳转的地址，默认 '/login'
+ */
+export function setupInterceptors(
+    instance: AxiosInstance,
+    options: {
+        tokenKey?: string
+        userInfoKey?: string
+        unauthorizedRedirect?: string
+    } = {}
+) {
+    const {
+        tokenKey = 'token',
+        userInfoKey = 'userInfo',
+        unauthorizedRedirect = '/login',
+    } = options
+
+    instance.interceptors.request.use((config) => {
+        const token = localStorage.getItem(tokenKey)
+        if (token) {
+            config.headers.Authorization = `Bearer ${token}`
+        }
+        return config
+    })
+
+    instance.interceptors.response.use(
+        (response: AxiosResponse) => defaultUnwrap(response.data),
+        (error) => {
+            if (error.response?.status === 401) {
+                localStorage.removeItem(tokenKey)
+                localStorage.removeItem(userInfoKey)
+                window.location.href = unauthorizedRedirect
+            } else if (error.response?.status === 403) {
+                console.error('没有权限访问该资源')
+            } else if (error.response?.status === 500) {
+                console.error('服务器内部错误')
+            }
+            return Promise.reject(error)
+        }
+    )
+}
+
+/**
+ * 创建请求实例。所有实例共用同一种响应解包策略（见 defaultUnwrap 注释）。
+ *
+ * @param options.baseURL 接口前缀，默认 '/api'
+ * @param options.timeout 超时毫秒，默认 10000
+ * @param options.tokenKey token localStorage key，默认 'token'
+ * @param options.userInfoKey userInfo localStorage key，默认 'userInfo'
+ * @param options.unauthorizedRedirect 401 跳转地址，默认 '/login'
+ */
+export function createRequest(options: {
+    baseURL?: string
+    timeout?: number
+    tokenKey?: string
+    userInfoKey?: string
+    unauthorizedRedirect?: string
+} = {}): AxiosInstance {
+    const instance = axios.create({
+        baseURL: options.baseURL ?? '/api',
+        timeout: options.timeout ?? 10000,
+    })
+    setupInterceptors(instance, {
+        tokenKey: options.tokenKey,
+        userInfoKey: options.userInfoKey,
+        unauthorizedRedirect: options.unauthorizedRedirect,
+    })
+    return instance
+}
+
+// 默认实例：用于主应用，baseURL = /api
+const request = createRequest()
+const authRequest = createRequest()
+
+export {authRequest}
+export default request