@yuku123/z-frontend-common 1.0.0 → 1.1.0

package/dist/index.js

@@ -1 +1,310 @@
-import{Avatar as H,Button as j,Dropdown as W,Layout as R,Menu as N,Spin as J,Tooltip as A}from"antd";import{DownOutlined as G,LoginOutlined as Q,MenuFoldOutlined as X,MenuUnfoldOutlined as Y}from"@ant-design/icons";import{Outlet as Z,useLocation as _,useNavigate as U}from"react-router-dom";import{useState as V}from"react";import{jsx as o,jsxs as m}from"react/jsx-runtime";var{Header:ee,Sider:te,Content:re}=R;function oe(e,t=.85){let n=/^#?([0-9a-f]{6})$/i.exec(e||"");if(!n)return e;let l=parseInt(n[1],16),f=Math.max(0,Math.min(255,Math.round((l>>16&255)*t))),r=Math.max(0,Math.min(255,Math.round((l>>8&255)*t))),s=Math.max(0,Math.min(255,Math.round((l&255)*t)));return"#"+(f<<16|r<<8|s).toString(16).padStart(6,"0")}function L({menuItems:e=[],appTitle:t="One Company",appShort:n="OC",appVersion:l,appIcon:f,appUser:r,loginPath:s,headerExtra:v,loading:C=!1}){let[i,c]=V(!1),F=U(),$=_(),P=({key:d})=>{F(d)},M=()=>{if(s)return s;let d=e&&e[0],a=d&&d.key;return typeof a=="string"&&a.endsWith("/home")?a.slice(0,-4)+"login":"/login"},z=(d,a=[])=>{for(let u of d||[])u?.key&&a.push(u.key),u?.children&&z(u.children,a);return a},D=(()=>{let d=z(e),a=$.pathname;return d.filter(u=>a===u||a.startsWith(u+"/")).sort((u,b)=>b.length-u.length)[0]||a})();return m(R,{style:{minHeight:"100vh"},children:[m(te,{trigger:null,collapsible:!0,collapsed:i,children:[o("div",{style:{height:64,display:"flex",alignItems:"center",justifyContent:"center"},children:(()=>{if(i){if(f){let{icon:d,color:a="#7c3aed",label:u=t}=f,b=o("div",{style:{width:36,height:36,borderRadius:9,background:`linear-gradient(135deg, ${a}, ${oe(a,.7)})`,display:"flex",alignItems:"center",justifyContent:"center",color:"#fff",fontSize:20,boxShadow:"0 2px 6px rgba(0,0,0,0.25)",overflow:"hidden"},children:d});return o(A,{title:u,placement:"right",children:b})}return n}return m("span",{style:{color:"#fff",fontWeight:600,fontSize:16,whiteSpace:"nowrap"},children:[t,l&&m("span",{style:{color:"rgba(255,255,255,0.55)",fontWeight:400,fontSize:12,marginLeft:4},children:["@",l]})]})})()}),C?o("div",{style:{padding:16,textAlign:"center"},children:o(J,{size:"small"})}):o(N,{theme:"dark",mode:"inline",selectedKeys:[D],items:e,onClick:P})]}),m(R,{children:[m(ee,{style:{height:48,lineHeight:"48px",padding:"0 16px",background:"#fff",display:"flex",alignItems:"center",justifyContent:"space-between",borderBottom:"1px solid #f1f5f9"},children:[o("span",{onClick:()=>c(!i),style:{fontSize:18,cursor:"pointer"},children:i?o(Y,{}):o(X,{})}),m("div",{style:{display:"flex",alignItems:"center",gap:12},children:[r&&o(W,{menu:{items:[{key:"profile",label:`${r.name}\uFF08${r.role||"\u7528\u6237"}\uFF09`,disabled:!0},{type:"divider"},{key:"logout",label:"\u9000\u51FA\u767B\u5F55",onClick:()=>{localStorage.removeItem("token"),localStorage.removeItem("userInfo"),window.location.href=M()}}]},placement:"bottomRight",children:m("span",{style:{cursor:"pointer",display:"inline-flex",alignItems:"center",gap:6},children:[o(H,{size:28,style:{background:"#7c3aed"},children:(r.name||"?").slice(0,1).toUpperCase()}),o("span",{style:{fontSize:13,color:"#0f172a"},children:r.name}),o(G,{style:{fontSize:10,color:"#94a3b8"}})]})}),!r&&o(j,{type:"primary",size:"small",icon:o(Q,{}),onClick:()=>{window.location.href=M()},children:"\u767B\u5F55"}),v]})]}),o(re,{style:{margin:16,padding:24,background:"#fff",minHeight:280},children:o(Z,{})})]})]})}import{useState as se}from"react";import{Alert as ae,Button as ie,Card as le,Form as S,Input as K,message as h}from"antd";import{LockOutlined as fe,UserOutlined as ue}from"@ant-design/icons";import ne from"axios";import"antd";function B(e){return e&&typeof e=="object"&&"code"in e&&"data"in e?e.code!==200?Promise.reject(new Error(e.message||"\u8BF7\u6C42\u5931\u8D25")):e.data:e}function O(e,t={}){let{tokenKey:n="token",userInfoKey:l="userInfo",unauthorizedRedirect:f="/login"}=t;return e.interceptors.request.use(r=>{let s=localStorage.getItem(n);return s&&(r.headers.Authorization=`Bearer ${s}`),r}),e.interceptors.response.use(r=>B(r.data),r=>{let s=r.response?.status;return s===401?(localStorage.removeItem(n),localStorage.removeItem(l),window.location.href=f):s===403?console.error("\u6CA1\u6709\u6743\u9650\u8BBF\u95EE\u8BE5\u8D44\u6E90"):s===500&&console.error("\u670D\u52A1\u5668\u5185\u90E8\u9519\u8BEF"),Promise.reject(r)}),e}function y(e={}){let t=ne.create({baseURL:e.baseURL??"/api",timeout:e.timeout??1e4});return O(t,{tokenKey:e.tokenKey,userInfoKey:e.userInfoKey,unauthorizedRedirect:e.unauthorizedRedirect})}var x=y(),q=y();import{jsx as p,jsxs as T}from"react/jsx-runtime";function I({title:e="\u7EDF\u4E00\u7BA1\u7406\u5E73\u53F0",mockAuth:t,loginApi:n="/auth/login",redirectUrl:l="/",onSuccess:f}){let[r,s]=se(!1),v=i=>{localStorage.setItem("token",t?"mock-"+t.username:i?.token||"token"),localStorage.setItem("userInfo",JSON.stringify(i||{})),h.success("\u767B\u5F55\u6210\u529F"+(t?"\uFF08mock \u6A21\u5F0F\uFF0C\u5F85 CTC/SSO \u63A5\u5165\uFF09":"")),f?f(i):window.location.href=l},C=async i=>{s(!0);try{if(t){i.username===t.username&&i.password===t.password?v(t.user):h.error("\u7528\u6237\u540D\u6216\u5BC6\u7801\u9519\u8BEF");return}let c=await x.post(n,i);c?.token?(localStorage.setItem("token",c.token),localStorage.setItem("userInfo",JSON.stringify(c.user||c)),h.success("\u767B\u5F55\u6210\u529F"),f?f(c):window.location.href=l):h.error("\u767B\u5F55\u5931\u8D25\uFF1A\u672A\u83B7\u53D6\u5230 token")}catch(c){h.error(c.response?.data?.message||c.message||"\u767B\u5F55\u5931\u8D25")}finally{s(!1)}};return p("div",{style:{height:"100vh",display:"flex",justifyContent:"center",alignItems:"center",background:"#f0f2f5"},children:T(le,{title:e,style:{width:400},children:[t&&p(ae,{type:"info",showIcon:!0,style:{marginBottom:16},message:`Mock \u6A21\u5F0F\uFF1A\u7528\u6237\u540D ${t.username} / \u5BC6\u7801 ${t.password}`}),T(S,{onFinish:C,size:"large",children:[p(S.Item,{name:"username",rules:[{required:!0,message:"\u8BF7\u8F93\u5165\u7528\u6237\u540D"}],children:p(K,{prefix:p(ue,{}),placeholder:"\u7528\u6237\u540D"})}),p(S.Item,{name:"password",rules:[{required:!0,message:"\u8BF7\u8F93\u5165\u5BC6\u7801"}],children:p(K.Password,{prefix:p(fe,{}),placeholder:"\u5BC6\u7801"})}),p(S.Item,{children:p(ie,{type:"primary",htmlType:"submit",loading:r,block:!0,children:"\u767B \u5F55"})})]})]})})}import{Tag as ce}from"antd";import{jsx as de}from"react/jsx-runtime";var w={1:{color:"green",text:"\u6B63\u5E38"},0:{color:"red",text:"\u7981\u7528"},pending:{color:"orange",text:"\u5F85\u5904\u7406"},approved:{color:"blue",text:"\u5DF2\u901A\u8FC7"},rejected:{color:"red",text:"\u5DF2\u62D2\u7EDD"}};function k({status:e,map:t}){let n=t?.[e]||w[e]||{color:"default",text:String(e)};return de(ce,{color:n.color,children:n.text})}import{Component as pe}from"react";import{Button as me,Result as ge}from"antd";import{jsx as E}from"react/jsx-runtime";var g=class extends pe{constructor(t){super(t),this.state={hasError:!1,error:null,errorInfo:null},this.handleReset=()=>{this.setState({hasError:!1,error:null,errorInfo:null}),typeof this.props.onReset=="function"&&this.props.onReset()}}static getDerivedStateFromError(t){return{hasError:!0,error:t}}componentDidCatch(t,n){console.error("[ErrorBoundary] caught error:",t,n),this.setState({errorInfo:n})}render(){return this.state.hasError?E(ge,{status:"error",title:"\u9875\u9762\u51FA\u9519\u4E86",subTitle:String(this.state.error?.message||this.state.error),extra:E(me,{type:"primary",onClick:this.handleReset,children:"\u91CD\u8BD5"})}):this.props.children}};var Ae={AppLayout:L,StatusTag:k,defaultStatusMap:w,LoginPage:I,ErrorBoundary:g,request:x,authRequest:q,createRequest:y};export{L as AppLayout,g as ErrorBoundary,I as LoginPage,k as StatusTag,q as authRequest,y as createRequest,Ae as default,w as defaultStatusMap,x as request,O as setupInterceptors,B as unwrapResponse};
+import { C as xe, D as we, E as Ie, a as ke, b as Ce, F as be, G as Re, L as ve, P as ze, c as Me, R as Le, S as Ee, d as Oe, e as Be, T as je, f as Te, g as Ke, h as $e, l as De, n as Pe, p as qe, r as Fe, s as He, i as We } from "./PagedTable-DyjNokXN.js";
+import { jsxs as h, jsx as r } from "react/jsx-runtime";
+import { Layout as I, Spin as B, Menu as j, Dropdown as T, Avatar as K, Button as k, Tooltip as $, Card as D, Alert as P, Form as S, Input as v, message as p, Tag as q, Result as F } from "antd";
+import { MenuUnfoldOutlined as H, MenuFoldOutlined as W, DownOutlined as N, LoginOutlined as G, UserOutlined as J, LockOutlined as Q } from "@ant-design/icons";
+import { useNavigate as X, useLocation as Y, Outlet as Z } from "react-router-dom";
+import { useState as z, Component as _ } from "react";
+import U from "axios";
+const { Header: V, Sider: A, Content: ee } = I;
+function te(t, e = 0.85) {
+  const o = /^#?([0-9a-f]{6})$/i.exec(t || "");
+  if (!o) return t;
+  const d = parseInt(o[1], 16), u = Math.max(0, Math.min(255, Math.round((d >> 16 & 255) * e))), n = Math.max(0, Math.min(255, Math.round((d >> 8 & 255) * e))), a = Math.max(0, Math.min(255, Math.round((d & 255) * e)));
+  return "#" + (u << 16 | n << 8 | a).toString(16).padStart(6, "0");
+}
+function re({
+  menuItems: t = [],
+  appTitle: e = "One Company",
+  appShort: o = "OC",
+  appVersion: d,
+  appIcon: u,
+  appUser: n,
+  loginPath: a,
+  headerExtra: g,
+  loading: x = !1
+}) {
+  const [i, m] = z(!1), y = X(), c = Y(), E = ({ key: f }) => {
+    y(f);
+  }, b = () => {
+    if (a) return a;
+    const f = t && t[0], l = f && f.key;
+    return typeof l == "string" && l.endsWith("/home") ? l.slice(0, -4) + "login" : "/login";
+  }, R = (f, l = []) => {
+    for (const s of f || [])
+      s != null && s.key && l.push(s.key), s != null && s.children && R(s.children, l);
+    return l;
+  }, O = (() => {
+    const f = R(t), l = c.pathname;
+    return f.filter((s) => l === s || l.startsWith(s + "/")).sort((s, w) => w.length - s.length)[0] || l;
+  })();
+  return /* @__PURE__ */ h(I, { style: { minHeight: "100vh" }, children: [
+    /* @__PURE__ */ h(A, { trigger: null, collapsible: !0, collapsed: i, children: [
+      /* @__PURE__ */ r("div", { style: {
+        height: 64,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+      }, children: (() => {
+        if (i) {
+          if (u) {
+            const { icon: f, color: l = "#7c3aed", label: s = e } = u, w = /* @__PURE__ */ r("div", { style: {
+              width: 36,
+              height: 36,
+              borderRadius: 9,
+              background: `linear-gradient(135deg, ${l}, ${te(l, 0.7)})`,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              color: "#fff",
+              fontSize: 20,
+              boxShadow: "0 2px 6px rgba(0,0,0,0.25)",
+              overflow: "hidden"
+            }, children: f });
+            return /* @__PURE__ */ r($, { title: s, placement: "right", children: w });
+          }
+          return o;
+        }
+        return /* @__PURE__ */ h("span", { style: { color: "#fff", fontWeight: 600, fontSize: 16, whiteSpace: "nowrap" }, children: [
+          e,
+          d && /* @__PURE__ */ h("span", { style: {
+            color: "rgba(255,255,255,0.55)",
+            fontWeight: 400,
+            fontSize: 12,
+            marginLeft: 4
+          }, children: [
+            "@",
+            d
+          ] })
+        ] });
+      })() }),
+      x ? /* @__PURE__ */ r("div", { style: { padding: 16, textAlign: "center" }, children: /* @__PURE__ */ r(B, { size: "small" }) }) : /* @__PURE__ */ r(
+        j,
+        {
+          theme: "dark",
+          mode: "inline",
+          selectedKeys: [O],
+          items: t,
+          onClick: E
+        }
+      )
+    ] }),
+    /* @__PURE__ */ h(I, { children: [
+      /* @__PURE__ */ h(V, { style: {
+        height: 48,
+        lineHeight: "48px",
+        padding: "0 16px",
+        background: "#fff",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        borderBottom: "1px solid #f1f5f9"
+      }, children: [
+        /* @__PURE__ */ r("span", { onClick: () => m(!i), style: { fontSize: 18, cursor: "pointer" }, children: i ? /* @__PURE__ */ r(H, {}) : /* @__PURE__ */ r(W, {}) }),
+        /* @__PURE__ */ h("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
+          n && /* @__PURE__ */ r(
+            T,
+            {
+              menu: {
+                items: [
+                  { key: "profile", label: `${n.name}（${n.role || "用户"}）`, disabled: !0 },
+                  { type: "divider" },
+                  {
+                    key: "logout",
+                    label: "退出登录",
+                    onClick: () => {
+                      localStorage.removeItem("token"), localStorage.removeItem("userInfo"), window.location.href = b();
+                    }
+                  }
+                ]
+              },
+              placement: "bottomRight",
+              children: /* @__PURE__ */ h("span", { style: { cursor: "pointer", display: "inline-flex", alignItems: "center", gap: 6 }, children: [
+                /* @__PURE__ */ r(K, { size: 28, style: { background: "#7c3aed" }, children: (n.name || "?").slice(0, 1).toUpperCase() }),
+                /* @__PURE__ */ r("span", { style: { fontSize: 13, color: "#0f172a" }, children: n.name }),
+                /* @__PURE__ */ r(N, { style: { fontSize: 10, color: "#94a3b8" } })
+              ] })
+            }
+          ),
+          !n && /* @__PURE__ */ r(
+            k,
+            {
+              type: "primary",
+              size: "small",
+              icon: /* @__PURE__ */ r(G, {}),
+              onClick: () => {
+                window.location.href = b();
+              },
+              children: "登录"
+            }
+          ),
+          g
+        ] })
+      ] }),
+      /* @__PURE__ */ r(ee, { style: { margin: 16, padding: 24, background: "#fff", minHeight: 280 }, children: /* @__PURE__ */ r(Z, {}) })
+    ] })
+  ] });
+}
+function ne(t) {
+  return t && typeof t == "object" && "code" in t && "data" in t ? t.code !== 200 ? Promise.reject(new Error(t.message || "请求失败")) : t.data : t;
+}
+function oe(t, e = {}) {
+  const {
+    tokenKey: o = "token",
+    userInfoKey: d = "userInfo",
+    unauthorizedRedirect: u = "/login"
+  } = e;
+  return t.interceptors.request.use((n) => {
+    const a = localStorage.getItem(o);
+    return a && (n.headers.Authorization = `Bearer ${a}`), n;
+  }), t.interceptors.response.use(
+    (n) => ne(n.data),
+    (n) => {
+      var g;
+      const a = (g = n.response) == null ? void 0 : g.status;
+      return a === 401 ? (localStorage.removeItem(o), localStorage.removeItem(d), window.location.href = u) : a === 403 ? console.error("没有权限访问该资源") : a === 500 && console.error("服务器内部错误"), Promise.reject(n);
+    }
+  ), t;
+}
+function C(t = {}) {
+  const e = U.create({
+    baseURL: t.baseURL ?? "/api",
+    timeout: t.timeout ?? 1e4
+  });
+  return oe(e, {
+    tokenKey: t.tokenKey,
+    userInfoKey: t.userInfoKey,
+    unauthorizedRedirect: t.unauthorizedRedirect
+  });
+}
+const M = C(), se = C();
+function ae({
+  title: t = "统一管理平台",
+  mockAuth: e,
+  loginApi: o = "/auth/login",
+  redirectUrl: d = "/",
+  onSuccess: u
+}) {
+  const [n, a] = z(!1), g = (i) => {
+    localStorage.setItem("token", e ? "mock-" + e.username : (i == null ? void 0 : i.token) || "token"), localStorage.setItem("userInfo", JSON.stringify(i || {})), p.success("登录成功" + (e ? "（mock 模式，待 CTC/SSO 接入）" : "")), u ? u(i) : window.location.href = d;
+  }, x = async (i) => {
+    var m, y;
+    a(!0);
+    try {
+      if (e) {
+        i.username === e.username && i.password === e.password ? g(e.user) : p.error("用户名或密码错误");
+        return;
+      }
+      const c = await M.post(o, i);
+      c != null && c.token ? (localStorage.setItem("token", c.token), localStorage.setItem("userInfo", JSON.stringify(c.user || c)), p.success("登录成功"), u ? u(c) : window.location.href = d) : p.error("登录失败：未获取到 token");
+    } catch (c) {
+      p.error(((y = (m = c.response) == null ? void 0 : m.data) == null ? void 0 : y.message) || c.message || "登录失败");
+    } finally {
+      a(!1);
+    }
+  };
+  return /* @__PURE__ */ r("div", { style: {
+    height: "100vh",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    background: "#f0f2f5"
+  }, children: /* @__PURE__ */ h(D, { title: t, style: { width: 400 }, children: [
+    e && /* @__PURE__ */ r(
+      P,
+      {
+        type: "info",
+        showIcon: !0,
+        style: { marginBottom: 16 },
+        message: `Mock 模式：用户名 ${e.username} / 密码 ${e.password}`
+      }
+    ),
+    /* @__PURE__ */ h(S, { onFinish: x, size: "large", children: [
+      /* @__PURE__ */ r(S.Item, { name: "username", rules: [{ required: !0, message: "请输入用户名" }], children: /* @__PURE__ */ r(v, { prefix: /* @__PURE__ */ r(J, {}), placeholder: "用户名" }) }),
+      /* @__PURE__ */ r(S.Item, { name: "password", rules: [{ required: !0, message: "请输入密码" }], children: /* @__PURE__ */ r(v.Password, { prefix: /* @__PURE__ */ r(Q, {}), placeholder: "密码" }) }),
+      /* @__PURE__ */ r(S.Item, { children: /* @__PURE__ */ r(k, { type: "primary", htmlType: "submit", loading: n, block: !0, children: "登 录" }) })
+    ] })
+  ] }) });
+}
+const L = {
+  1: { color: "green", text: "正常" },
+  0: { color: "red", text: "禁用" },
+  pending: { color: "orange", text: "待处理" },
+  approved: { color: "blue", text: "已通过" },
+  rejected: { color: "red", text: "已拒绝" }
+};
+function ie({ status: t, map: e }) {
+  const o = (e == null ? void 0 : e[t]) || L[t] || { color: "default", text: String(t) };
+  return /* @__PURE__ */ r(q, { color: o.color, children: o.text });
+}
+class le extends _ {
+  constructor(e) {
+    super(e), this.state = { hasError: !1, error: null, errorInfo: null }, this.handleReset = () => {
+      this.setState({ hasError: !1, error: null, errorInfo: null }), typeof this.props.onReset == "function" && this.props.onReset();
+    };
+  }
+  static getDerivedStateFromError(e) {
+    return { hasError: !0, error: e };
+  }
+  componentDidCatch(e, o) {
+    console.error("[ErrorBoundary] caught error:", e, o), this.setState({ errorInfo: o });
+  }
+  render() {
+    var e;
+    return this.state.hasError ? /* @__PURE__ */ r(
+      F,
+      {
+        status: "error",
+        title: "页面出错了",
+        subTitle: String(((e = this.state.error) == null ? void 0 : e.message) || this.state.error),
+        extra: /* @__PURE__ */ r(k, { type: "primary", onClick: this.handleReset, children: "重试" })
+      }
+    ) : this.props.children;
+  }
+}
+const me = {
+  AppLayout: re,
+  StatusTag: ie,
+  defaultStatusMap: L,
+  LoginPage: ae,
+  ErrorBoundary: le,
+  request: M,
+  authRequest: se,
+  createRequest: C
+};
+export {
+  re as AppLayout,
+  xe as CategoryDot,
+  we as DarkBanner,
+  Ie as EChartsChart,
+  ke as EmptyState,
+  le as ErrorBoundary,
+  Ce as ErrorState,
+  be as FeatureCard,
+  Re as GradientStatCard,
+  ve as LoadingState,
+  ae as LoginPage,
+  ze as PageHeader,
+  Me as PagedTable,
+  Le as RefreshButton,
+  Ee as SearchInput,
+  Oe as SectionHeader,
+  Be as StatusBadge,
+  ie as StatusTag,
+  je as TableToolbar,
+  Te as antdTheme,
+  se as authRequest,
+  Ke as brand,
+  C as createRequest,
+  me as default,
+  L as defaultStatusMap,
+  $e as fontSize,
+  De as lift,
+  Pe as neutral,
+  qe as palette,
+  Fe as radius,
+  M as request,
+  oe as setupInterceptors,
+  He as shadow,
+  We as space,
+  ne as unwrapResponse
+};

package/dist/ui.js

@@ -0,0 +1,27 @@
+import { C as e, D as t, E as r, a as d, b as n, F as o, G as S, L as h, P as i, c as l, R as g, S as p, d as u, e as C, T as b, f, g as T, h as c, l as E, n as m, p as B, r as D, s as P, i as y } from "./PagedTable-DyjNokXN.js";
+export {
+  e as CategoryDot,
+  t as DarkBanner,
+  r as EChartsChart,
+  d as EmptyState,
+  n as ErrorState,
+  o as FeatureCard,
+  S as GradientStatCard,
+  h as LoadingState,
+  i as PageHeader,
+  l as PagedTable,
+  g as RefreshButton,
+  p as SearchInput,
+  u as SectionHeader,
+  C as StatusBadge,
+  b as TableToolbar,
+  f as antdTheme,
+  T as brand,
+  c as fontSize,
+  E as lift,
+  m as neutral,
+  B as palette,
+  D as radius,
+  P as shadow,
+  y as space
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuku123/z-frontend-common",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "z-opc 全仓共享前端基座 — AppLayout(§1/§11/§12/§15/§16) + LoginPage(mockAuth 双模式) + EmptyState/StatusTag/ErrorBoundary + createRequest 工厂。lead 008 前端开发规范唯一承载仓",
   "type": "module",
   "main": "./dist/index.js",
@@ -10,6 +10,9 @@
     ".": {
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
+    },
+    "./ui": {
+      "default": "./dist/ui.js"
     }
   },
   "files": [

package/src/components/ui/CategoryDot.jsx

@@ -0,0 +1,38 @@
+import {palette} from './tokens'
+
+/**
+ * 分类圆点 - 借鉴 wenming7 分类标识
+ *
+ * 用法:
+ *   <CategoryDot color="pink" />               // 仅圆点
+ *   <CategoryDot color="blue" label="对话" />  // 圆点 + 文字
+ *   <CategoryDot color="green" size={10} />    // 自定义大小
+ *
+ * @param {Object} props
+ * @param {string} props.color - 配色 (pink|blue|green|orange|violet|cyan|red|yellow)
+ * @param {string} [props.label] - 可选标签文字
+ * @param {number} [props.size] - 圆点直径 (默认 8)
+ */
+export default function CategoryDot({color = 'blue', label, size = 8}) {
+    const c = palette[color] || palette.blue
+    return (
+        <span style={{
+            display: 'inline-flex',
+            alignItems: 'center',
+            gap: 8,
+            fontSize: 14,
+            fontWeight: 600,
+            color: '#111827',
+        }}>
+            <span style={{
+                width: size,
+                height: size,
+                borderRadius: '50%',
+                background: c.bg,
+                boxShadow: `0 0 0 3px ${c.soft}`,
+                flexShrink: 0,
+            }}/>
+            {label && <span>{label}</span>}
+        </span>
+    )
+}

package/src/components/ui/DarkBanner.jsx

@@ -0,0 +1,142 @@
+import {radius, shadow} from './tokens'
+
+/**
+ * 深色 CTA 横幅 - 借鉴 wenming7 "FOR DEVELOPERS" 区
+ *
+ * 视觉:
+ *   ┌──────────────────────────────────────────────┐
+ *   │  [标签]                                       │
+ *   │  把你的想法做成产品                            │  ← 深色渐变背景
+ *   │  副标题/描述文案                                │
+ *   │                              [行动按钮 →]     │
+ *   └──────────────────────────────────────────────┘
+ *
+ * @param {Object} props
+ * @param {string} [props.tag] - 顶部小标签 (如 "FOR DEVELOPERS")
+ * @param {string} props.title - 主标题
+ * @param {string} [props.description] - 描述
+ * @param {string} [props.buttonText] - 按钮文案
+ * @param {string} [props.buttonHref] - 跳转路径
+ */
+export default function DarkBanner({
+                                       tag,
+                                       title,
+                                       description,
+                                       buttonText,
+                                       buttonHref,
+                                       onButtonClick,
+                                   }) {
+    return (
+        <div style={{
+            position: 'relative',
+            borderRadius: radius.lg,
+            padding: '40px 48px',
+            background: 'linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #312e81 100%)',
+            color: '#ffffff',
+            overflow: 'hidden',
+            boxShadow: shadow.lg,
+        }}>
+            {/* 装饰光晕 */}
+            <div style={{
+                position: 'absolute',
+                top: -64,
+                right: -64,
+                width: 200,
+                height: 200,
+                borderRadius: '50%',
+                background: 'radial-gradient(circle, rgba(139, 92, 246, 0.4) 0%, transparent 70%)',
+                pointerEvents: 'none',
+            }}/>
+            <div style={{
+                position: 'absolute',
+                bottom: -48,
+                left: '30%',
+                width: 160,
+                height: 160,
+                borderRadius: '50%',
+                background: 'radial-gradient(circle, rgba(59, 130, 246, 0.3) 0%, transparent 70%)',
+                pointerEvents: 'none',
+            }}/>
+
+            <div style={{
+                position: 'relative',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+                gap: 32,
+                flexWrap: 'wrap',
+            }}>
+                <div style={{flex: 1, minWidth: 240}}>
+                    {tag && (
+                        <div style={{
+                            fontSize: 11,
+                            fontWeight: 600,
+                            letterSpacing: '0.12em',
+                            color: '#a5b4fc',
+                            textTransform: 'uppercase',
+                            marginBottom: 12,
+                        }}>
+                            {tag}
+                        </div>
+                    )}
+                    <div style={{
+                        fontSize: 24,
+                        fontWeight: 700,
+                        lineHeight: 1.3,
+                        marginBottom: 8,
+                    }}>
+                        {title}
+                    </div>
+                    {description && (
+                        <div style={{
+                            fontSize: 14,
+                            color: 'rgba(255, 255, 255, 0.7)',
+                            lineHeight: 1.6,
+                            maxWidth: 540,
+                        }}>
+                            {description}
+                        </div>
+                    )}
+                </div>
+
+                {(buttonText && (buttonHref || onButtonClick)) && (
+                    <a
+                        href={buttonHref || '#'}
+                        onClick={(e) => {
+                            if (onButtonClick) {
+                                e.preventDefault()
+                                onButtonClick()
+                            }
+                        }}
+                        style={{
+                            display: 'inline-flex',
+                            alignItems: 'center',
+                            gap: 8,
+                            padding: '12px 24px',
+                            background: 'linear-gradient(135deg, #10b981 0%, #059669 100%)',
+                            color: '#ffffff',
+                            borderRadius: 999,
+                            fontSize: 14,
+                            fontWeight: 600,
+                            textDecoration: 'none',
+                            boxShadow: '0 4px 12px rgba(16, 185, 129, 0.4)',
+                            transition: 'transform 150ms ease, box-shadow 150ms ease',
+                            whiteSpace: 'nowrap',
+                        }}
+                        onMouseEnter={(e) => {
+                            e.currentTarget.style.transform = 'translateY(-1px)'
+                            e.currentTarget.style.boxShadow = '0 6px 16px rgba(16, 185, 129, 0.5)'
+                        }}
+                        onMouseLeave={(e) => {
+                            e.currentTarget.style.transform = 'translateY(0)'
+                            e.currentTarget.style.boxShadow = '0 4px 12px rgba(16, 185, 129, 0.4)'
+                        }}
+                    >
+                        {buttonText}
+                        <span>→</span>
+                    </a>
+                )}
+            </div>
+        </div>
+    )
+}

package/src/components/ui/EChartsChart.jsx

@@ -0,0 +1,82 @@
+import {useEffect, useRef} from 'react'
+import * as echarts from 'echarts/core'
+import {BarChart, LineChart, PieChart} from 'echarts/charts'
+import {GridComponent, LegendComponent, TitleComponent, TooltipComponent,} from 'echarts/components'
+import {CanvasRenderer} from 'echarts/renderers'
+
+// 只注册常用图表, 减小 bundle
+echarts.use([
+    LineChart, PieChart, BarChart,
+    GridComponent, TooltipComponent, LegendComponent, TitleComponent,
+    CanvasRenderer,
+])
+
+/**
+ * EChartsChart - 安全包装 echarts 实例, 自动处理初始化/销毁/resize.
+ *
+ * 修复 z-opc 后台原 Schedule Dashboard 的交互问题:
+ *   1. 内存泄漏: 切换路由时 echarts 实例没 dispose, 多次进入页面会重复绑定 DOM
+ *   2. resize 监听器没 cleanup, 每次进入页面都新增一个
+ *   3. 颜色硬编码, 主题不一致
+ *
+ * 用法:
+ *   <EChartsChart option={...} height={300} />
+ *
+ * @param {Object} props
+ * @param {Object} props.option - echarts option
+ * @param {number|string} [props.height] - 高度 (默认 300)
+ * @param {string} [props.className]
+ * @param {Object} [props.style]
+ */
+export default function EChartsChart({
+                                         option,
+                                         height = 300,
+                                         className,
+                                         style,
+                                     }) {
+    const containerRef = useRef(null)
+    const instanceRef = useRef(null)
+
+    useEffect(() => {
+        if (!containerRef.current) return
+        instanceRef.current = echarts.init(containerRef.current, null, {renderer: 'canvas'})
+
+        let resizeObserver
+        const onResize = () => instanceRef.current?.resize()
+        if (typeof ResizeObserver !== 'undefined') {
+            resizeObserver = new ResizeObserver(onResize)
+            resizeObserver.observe(containerRef.current)
+        } else {
+            window.addEventListener('resize', onResize)
+        }
+
+        return () => {
+            if (resizeObserver) resizeObserver.disconnect()
+            else window.removeEventListener('resize', onResize)
+            if (instanceRef.current) {
+                instanceRef.current.dispose()
+                instanceRef.current = null
+            }
+        }
+    }, [])
+
+    useEffect(() => {
+        if (instanceRef.current && option) {
+            instanceRef.current.setOption(option, {notMerge: true})
+        }
+    }, [option])
+
+    return (
+        <div
+            ref={containerRef}
+            className={className}
+            role="img"
+            aria-label="数据可视化图表"
+            style={{
+                width: '100%',
+                height,
+                ...style,
+            }}
+        />
+    )
+}