@yuku123/z-frontend-common 0.2.9 → 1.1.0

package/dist/index.js

@@ -0,0 +1,310 @@
+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,64 +1,72 @@
 {
   "name": "@yuku123/z-frontend-common",
-  "version": "0.2.9",
-  "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-frontend/tree/main/packages/z-frontend-common#readme",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/yuku123/z-opc-frontend.git",
-    "directory": "packages/z-frontend-common"
-  },
-  "bugs": {
-    "url": "https://github.com/yuku123/z-opc-frontend/issues"
-  },
-  "main": "./dist/z-frontend-common.umd.js",
-  "module": "./dist/z-frontend-common.es.js",
+  "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",
+  "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/z-frontend-common.es.js",
-      "require": "./dist/z-frontend-common.umd.js"
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./ui": {
+      "default": "./dist/ui.js"
     }
   },
   "files": [
     "dist",
-    "src",
-    "README.md"
+    "src"
   ],
-  "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"
+    "dev": "vite build --watch",
+    "prepublishOnly": "vite build"
   },
   "dependencies": {
     "axios": "^1.16.1"
   },
+  "peerDependencies": {
+    "@ant-design/icons": "^6.0.0",
+    "antd": "^6.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^7.0.0"
+  },
   "devDependencies": {
+    "@ant-design/icons": "^6.1.0",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
     "@vitejs/plugin-react": "^4.2.1",
-    "vite": "^6.2.0"
+    "antd": "^6.3.3",
+    "axios": "^1.16.1",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-router-dom": "^7.13.1",
+    "vite": "^6.2.6"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/z-opc-foundation/z-frontend-common.git"
   },
-  "style": "./dist/z-frontend-common.css"
+  "bugs": {
+    "url": "https://github.com/z-opc-foundation/z-frontend-common/issues"
+  },
+  "homepage": "https://github.com/z-opc-foundation/z-frontend-common#readme",
+  "keywords": [
+    "react",
+    "antd",
+    "vite",
+    "z-opc",
+    "frontend-common",
+    "applayout",
+    "admin-shell"
+  ],
+  "author": "yuku123",
+  "license": "MIT",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  }
 }

package/src/components/ErrorBoundary/index.jsx

@@ -1,93 +1,40 @@
-import React from 'react'
-import {Alert, Button, Space} from 'antd'
-import {BugOutlined, ReloadOutlined} from '@ant-design/icons'
+import { Component } from 'react'
+import { Button, Result } from 'antd'
 
 /**
- * React Error Boundary — 捕获子组件的 render/lifecycle/effect 异常，
- * 用 fallback UI 替代冒泡到整棵 React 树导致整体卸载。
- *
- * 用法：
- *   <ErrorBoundary fallbackTitle="流程编辑器加载失败">
- *     <WorkflowEditor />
- *   </ErrorBoundary>
+ * 兜底错误边界（0.1.1 契约保留）：render 崩了显示错误 + 重置按钮。
+ * props: children + 可选 onReset（点「重试」时回调，缺省只清内部态）。
  */
-export default class ErrorBoundary extends React.Component {
+export default class ErrorBoundary extends Component {
     constructor(props) {
         super(props)
-        this.state = {hasError: false, error: null, errorInfo: null}
+        this.state = { hasError: false, error: null, errorInfo: null }
+        this.handleReset = () => {
+            this.setState({ hasError: false, error: null, errorInfo: null })
+            typeof this.props.onReset === 'function' && this.props.onReset()
+        }
     }
 
     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})
+        return { hasError: true, error }
     }
 
-    handleReset = () => {
-        this.setState({hasError: false, error: null, errorInfo: null})
-        if (typeof this.props.onReset === 'function') {
-            this.props.onReset()
-        }
+    componentDidCatch(error, info) {
+        console.error('[ErrorBoundary] caught error:', error, info)
+        this.setState({ errorInfo: info })
     }
 
     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>
-                    }
+        if (this.state.hasError) {
+            return (
+                <Result
+                    status="error"
+                    title="页面出错了"
+                    subTitle={String(this.state.error?.message || this.state.error)}
+                    extra={<Button type="primary" onClick={this.handleReset}>重试</Button>}
                 />
-                {showReload && (
-                    <Space style={{marginTop: 16}}>
-                        <Button icon={<ReloadOutlined/>} onClick={this.handleReset}>
-                            重试
-                        </Button>
-                    </Space>
-                )}
-            </div>
-        )
+            )
+        }
+        return this.props.children
     }
 }