@yuku123/z-frontend-common 0.2.9 → 1.1.0

package/src/components/ui/index.js

@@ -0,0 +1,36 @@
+/**
+ * UI 通用组件库 - 借鉴 wenming7/marketplace 视觉语言 + GitHub/awesome-copilot 交互原则
+ *
+ * 视觉类 (借鉴 wenming7/marketplace):
+ *   - GradientStatCard    渐变数据卡 (替代 antd Statistic)
+ *   - CategoryDot         分类圆点
+ *   - SectionHeader       段落标题 (圆点 + 标题 + 全部>)
+ *   - FeatureCard         功能卡 (16:9 封面 + 多 chip + 元信息)
+ *   - DarkBanner          深色 CTA 横幅
+ *
+ * 交互类 (借鉴 ui-ux-pro-max + frontend-ui-engineering):
+ *   - EmptyState          统一空状态 (图标 + 文案 + 行动)
+ *   - ErrorState          错误状态 (原因 + 重试)
+ *   - LoadingState        骨架屏 (cards/table/list/detail)
+ *   - SearchInput         Debounced 搜索 (300ms, Enter 立即, Esc 清空)
+ *   - EChartsChart        安全 echarts 包装 (自动 dispose/resize)
+ *   - PageHeader          页面标题 (面包屑 + 返回 + 操作区)
+ */
+
+export {default as GradientStatCard} from './GradientStatCard'
+export {default as CategoryDot} from './CategoryDot'
+export {default as SectionHeader} from './SectionHeader'
+export {default as FeatureCard} from './FeatureCard'
+export {default as DarkBanner} from './DarkBanner'
+
+export {default as EmptyState} from './EmptyState'
+export {default as ErrorState} from './ErrorState'
+export {default as LoadingState} from './LoadingState'
+export {default as SearchInput} from './SearchInput'
+export {default as EChartsChart} from './EChartsChart'
+export {default as PageHeader} from './PageHeader'
+export {default as TableToolbar, RefreshButton} from './TableToolbar'
+export {default as StatusBadge} from './StatusBadge'
+export {default as PagedTable} from './PagedTable'
+
+export {brand, palette, neutral, radius, shadow, lift, space, fontSize, antdTheme} from './tokens'

package/src/components/ui/tokens.js

@@ -0,0 +1,224 @@
+/**
+ * 设计 token - 借鉴 wenming7/marketplace 视觉语言
+ *
+ * 设计原则:
+ *   - 主色蓝紫, OKLCH 感知均匀
+ *   - 多种分类色 (粉/蓝/绿/橙/紫) 用于模块/分类标识
+ *   - 统一圆角 8/12/16, 统一阴影 (柔和多层)
+ *   - 紧凑间距 4/8/12/16/24/32
+ *
+ * 这些 token 既被 antd ConfigProvider 消费, 也被 UI 组件内部引用,
+ * 保持单一来源, 改一处全局生效.
+ */
+
+// ============ 品牌主色 ============
+export const brand = {
+    // 主色 (蓝紫) - 顶导/重点按钮/链接
+    primary: '#7c3aed',            // violet-600
+    primaryHover: '#8b5cf6',       // violet-500
+    primaryActive: '#6d28d9',      // violet-700
+    primarySoft: '#ede9fe',        // violet-100 (淡背景)
+}
+
+// ============ 分类色 (借鉴 wenming7 多色分类) ============
+// 用于分类圆点 / 数据卡 / 状态 chip
+// 每个色 = { bg, fg, soft, gradient }
+export const palette = {
+    pink: {
+        bg: '#ec4899',
+        fg: '#ffffff',
+        soft: '#fce7f3',
+        gradient: 'linear-gradient(135deg, #ec4899 0%, #be185d 100%)',
+    },
+    blue: {
+        bg: '#3b82f6',
+        fg: '#ffffff',
+        soft: '#dbeafe',
+        gradient: 'linear-gradient(135deg, #3b82f6 0%, #1e40af 100%)',
+    },
+    green: {
+        bg: '#10b981',
+        fg: '#ffffff',
+        soft: '#d1fae5',
+        gradient: 'linear-gradient(135deg, #10b981 0%, #047857 100%)',
+    },
+    orange: {
+        bg: '#f97316',
+        fg: '#ffffff',
+        soft: '#ffedd5',
+        gradient: 'linear-gradient(135deg, #f97316 0%, #c2410c 100%)',
+    },
+    violet: {
+        bg: '#8b5cf6',
+        fg: '#ffffff',
+        soft: '#ede9fe',
+        gradient: 'linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%)',
+    },
+    cyan: {
+        bg: '#06b6d4',
+        fg: '#ffffff',
+        soft: '#cffafe',
+        gradient: 'linear-gradient(135deg, #06b6d4 0%, #0e7490 100%)',
+    },
+    red: {
+        bg: '#ef4444',
+        fg: '#ffffff',
+        soft: '#fee2e2',
+        gradient: 'linear-gradient(135deg, #ef4444 0%, #b91c1c 100%)',
+    },
+    yellow: {
+        bg: '#eab308',
+        fg: '#1f2937',
+        soft: '#fef3c7',
+        gradient: 'linear-gradient(135deg, #eab308 0%, #a16207 100%)',
+    },
+}
+
+// ============ 中性色 ============
+export const neutral = {
+    bg: '#f8fafc',         // 页面底色 (比 antd 默认 #f5f5f5 更冷一点, 更现代)
+    surface: '#ffffff',     // 卡片表面
+    surfaceAlt: '#fafbfc',  // 次级表面 (表格 hover 等)
+    border: '#e5e7eb',      // 默认边框 (比 antd 默认淡, 更现代)
+    borderStrong: '#d1d5db',
+    text: '#111827',        // 主文本
+    textMuted: '#6b7280',   // 次文本
+    textDisabled: '#9ca3af',
+}
+
+// ============ 圆角 ============
+export const radius = {
+    sm: 8,
+    md: 12,
+    lg: 16,
+    xl: 20,
+    pill: 999,
+}
+
+// ============ 阴影 (柔和多层, 借鉴 wenming7) ============
+export const shadow = {
+    sm: '0 1px 2px 0 rgba(15, 23, 42, 0.04), 0 1px 3px 0 rgba(15, 23, 42, 0.06)',
+    md: '0 2px 4px -1px rgba(15, 23, 42, 0.04), 0 4px 8px -1px rgba(15, 23, 42, 0.08)',
+    lg: '0 4px 6px -2px rgba(15, 23, 42, 0.05), 0 12px 16px -4px rgba(15, 23, 42, 0.10)',
+    xl: '0 8px 24px -6px rgba(15, 23, 42, 0.10), 0 24px 48px -12px rgba(15, 23, 42, 0.18)',
+}
+
+// 悬浮抬升 (卡片 hover 时)
+export const lift = {
+    rest: shadow.md,
+    hover: '0 8px 16px -4px rgba(15, 23, 42, 0.08), 0 20px 32px -8px rgba(15, 23, 42, 0.14)',
+}
+
+// ============ 间距 ============
+export const space = {
+    1: 4,
+    2: 8,
+    3: 12,
+    4: 16,
+    5: 20,
+    6: 24,
+    8: 32,
+    10: 40,
+    12: 48,
+    16: 64,
+}
+
+// ============ 字号梯度 ============
+export const fontSize = {
+    xs: 11,
+    sm: 12,
+    base: 14,
+    md: 16,
+    lg: 18,
+    xl: 20,
+    '2xl': 24,
+    '3xl': 30,
+    '4xl': 36,
+}
+
+// ============ antd theme token (给 ConfigProvider 消费) ============
+export const antdTheme = {
+    token: {
+        // 主色
+        colorPrimary: brand.primary,
+        colorInfo: brand.primary,
+        colorSuccess: palette.green.bg,
+        colorWarning: palette.orange.bg,
+        colorError: palette.red.bg,
+
+        // 链接
+        colorLink: brand.primary,
+        colorLinkHover: brand.primaryHover,
+        colorLinkActive: brand.primaryActive,
+
+        // 文本
+        colorText: neutral.text,
+        colorTextSecondary: neutral.textMuted,
+        colorTextTertiary: neutral.textDisabled,
+
+        // 背景
+        colorBgBase: neutral.surface,
+        colorBgLayout: neutral.bg,
+        colorBgContainer: neutral.surface,
+        colorBgElevated: neutral.surface,
+
+        // 边框
+        colorBorder: neutral.border,
+        colorBorderSecondary: neutral.surfaceAlt,
+
+        // 圆角
+        borderRadius: radius.md,
+        borderRadiusLG: radius.lg,
+        borderRadiusSM: radius.sm,
+
+        // 字体
+        fontSize: fontSize.base,
+        fontFamily:
+            "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', " +
+            "'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Arial, sans-serif",
+
+        // 阴影
+        boxShadow: shadow.md,
+        boxShadowSecondary: shadow.lg,
+    },
+    components: {
+        // Layout: 顶导白底更现代
+        Layout: {
+            headerBg: neutral.surface,
+            headerHeight: 64,
+            headerPadding: '0 24px',
+            siderBg: '#0f172a',  // 深色侧栏 (slate-900), 比纯黑更有质感
+        },
+        // Menu: 深色侧栏菜单
+        Menu: {
+            darkItemBg: 'transparent',
+            darkSubMenuItemBg: 'transparent',
+            darkItemSelectedBg: brand.primary,
+            darkItemHoverBg: 'rgba(255, 255, 255, 0.06)',
+            darkItemColor: 'rgba(255, 255, 255, 0.75)',
+            itemBorderRadius: 8,
+            itemMarginInline: 8,
+        },
+        // Card: 更柔和
+        Card: {
+            borderRadiusLG: radius.lg,
+            boxShadowTertiary: shadow.sm,
+        },
+        // Button: 主按钮圆角统一
+        Button: {
+            borderRadius: radius.md,
+            borderRadiusLG: radius.lg,
+            fontWeight: 500,
+        },
+        // Tabs: 现代化下划线
+        Tabs: {
+            itemSelectedColor: brand.primary,
+            inkBarColor: brand.primary,
+            titleFontSize: fontSize.base,
+        },
+        // Tag: 更小巧
+        Tag: {
+            borderRadiusSM: 6,
+        },
+    },
+}

package/src/index.js

@@ -1,42 +1,38 @@
-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'
-export {default as Overview} from './components/Overview'
-export {default as request} from './utils/request'
-export {authRequest, createRequest, setupInterceptors} from './utils/request'
-export {ctcRequest} from './services/request'
+/**
+ * z-frontend-common 桶导出 —— lead 008 前端开发规范唯一承载仓。
+ *
+ * 40+ 仓 suit 的 AppLayout / LoginPage 唯一来源；21 个 <repo>-component 的
+ * services 层消费 createRequest / request / authRequest。
+ *
+ * API 契约与 0.1.1 完全兼容（ErrorBoundary / LoginPage / StatusTag /
+ * authRequest / createRequest / defaultStatusMap / request /
+ * setupInterceptors + default 桶），AppLayout 升级为 §1/§11/§12/§15/§16
+ * 规范版，LoginPage 扩展 mockAuth 双模式（§16）。
+ */
 
-// 4A 中心 Layout + 登录
-export {default as CtcLayout} from './components/Ctc/Layout'
-export {default as CtcAuthPage} from './components/Ctc/login/AuthPage'
-export {default as CtcLogin} from './components/Ctc/login/index'
-export {default as AgentTeamIM} from './components/Ctc/agentTeam'
-export {default as UserPanel} from './components/Ctc/userPanel'
-export {default as Webide} from './components/Ctc/webide'
+export * from './components/ui/index.js'
 
-// UC 用户中心 (FEATURE011)
-export {default as UCLayout} from './components/Ctc/uc'
-export {default as UCLogin} from './components/Ctc/uc/UCLogin'
-export {default as UCPhoneLogin} from './components/Ctc/uc/UCPhoneLogin'
-export {default as UCRegister} from './components/Ctc/uc/UCRegister'
-export {default as UCResetPassword} from './components/Ctc/uc/UCResetPassword'
+export { AppLayout } from './components/Layout/index.jsx'
+export { default as LoginPage } from './components/LoginPage/index.jsx'
+export { default as StatusTag, defaultStatusMap } from './components/StatusTag/index.jsx'
+export { default as ErrorBoundary } from './components/ErrorBoundary/index.jsx'
 
-// 低代码建模
-export {default as LowCodePage} from './components/LowCode/LowCodePage'
-export {default as LowCodeRuntime} from './components/LowCode/LowCodeRuntime'
-export {default as LowCodeModel} from './components/LowCode/LowCodeModel'
-export {default as MaterializePage} from './components/LowCode/MaterializePage'
+import { AppLayout } from './components/Layout/index.jsx'
+import StatusTag, { defaultStatusMap } from './components/StatusTag/index.jsx'
+import LoginPage from './components/LoginPage/index.jsx'
+import ErrorBoundary from './components/ErrorBoundary/index.jsx'
+import { createRequest, setupInterceptors, unwrapResponse, request, authRequest } from './services/request.js'
 
-// Mock 平台 (工具平台)
-export {default as MockPlatform} from './components/MockPlatform/index'
-export {default as EndpointsTab} from './components/MockPlatform/EndpointsTab'
-export {default as ScenariosTab} from './components/MockPlatform/ScenariosTab'
-export {default as TestCasesTab} from './components/MockPlatform/TestCasesTab'
-export {default as RequestLogsTab} from './components/MockPlatform/RequestLogsTab'
-export {default as RecordingsTab} from './components/MockPlatform/RecordingsTab'
-export {default as EnvironmentsTab} from './components/MockPlatform/EnvironmentsTab'
-export {default as MockTemplateHelper} from './components/MockPlatform/MockTemplateHelper'
-export {default as CurlImportModal} from './components/MockPlatform/CurlImportModal'
-export {default as OpenApiImportModal} from './components/MockPlatform/OpenApiImportModal'
+export { createRequest, setupInterceptors, unwrapResponse, request, authRequest }
 
+// 0.1.1 default 桶契约原样保留（Ge 对象），老调用方 `import zfc from '@yuku123/z-frontend-common'` 不断
+export default {
+    AppLayout,
+    StatusTag,
+    defaultStatusMap,
+    LoginPage,
+    ErrorBoundary,
+    request,
+    authRequest,
+    createRequest,
+}

package/src/services/request.js

@@ -1,6 +1,76 @@
+import axios from 'axios'
+import { message } from 'antd'
+
 /**
- * 兼容垫片: 之前在 z-opc-main-starter-frontend/services/request.ts 里的 axios 实例.
+ * 统一响应解包：z-opc 后端走 {code, data, message} 包装（Spring MVC 统一返回体），
+ * 独立 standalone 后端可能返回裸数据。有 code+data 双键就按包装解，否则原样透传。
+ * （z-vector standalone 实测坑：不解包全站拿 undefined —— 见 z-vector 仓 2026-10-11 修痕。）
  */
-import request, {authRequest, createRequest, setupInterceptors} from '../utils/request'
-export {request as default, authRequest, createRequest, setupInterceptors}
-export const ctcRequest = authRequest
+export function unwrapResponse(body) {
+    if (body && typeof body === 'object' && 'code' in body && 'data' in body) {
+        return body.code !== 200
+            ? Promise.reject(new Error(body.message || '请求失败'))
+            : body.data
+    }
+    return body
+}
+
+/**
+ * axios 拦截器装配（request / authRequest 预建实例与 createRequest 工厂共用）。
+ * 与 0.1.1 的 API 契约逐字段一致，21 个 component 仓的 services 层在消费，不能改签名。
+ */
+export function setupInterceptors(instance, options = {}) {
+    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) => unwrapResponse(response.data),
+        (error) => {
+            const status = error.response?.status
+            if (status === 401) {
+                localStorage.removeItem(tokenKey)
+                localStorage.removeItem(userInfoKey)
+                window.location.href = unauthorizedRedirect
+            } else if (status === 403) {
+                console.error('没有权限访问该资源')
+            } else if (status === 500) {
+                console.error('服务器内部错误')
+            }
+            return Promise.reject(error)
+        },
+    )
+    return instance
+}
+
+/**
+ * axios 实例工厂 —— 21 个 <repo>-component 的 services/api.js 用它建各自的请求实例。
+ * @param {Object} options
+ * @param {string}  [options.baseURL='/api']
+ * @param {number}  [options.timeout=10000]
+ * @param {string}  [options.tokenKey='token']
+ * @param {string}  [options.userInfoKey='userInfo']
+ * @param {string}  [options.unauthorizedRedirect='/login']
+ */
+export function createRequest(options = {}) {
+    const instance = axios.create({
+        baseURL: options.baseURL ?? '/api',
+        timeout: options.timeout ?? 10000,
+    })
+    return setupInterceptors(instance, {
+        tokenKey: options.tokenKey,
+        userInfoKey: options.userInfoKey,
+        unauthorizedRedirect: options.unauthorizedRedirect,
+    })
+}
+
+export const request = createRequest()
+export const authRequest = createRequest()

package/dist/z-frontend-common.css

@@ -1 +0,0 @@
-._layout_1puwg_1{min-height:100vh}._header_1puwg_5{display:flex;justify-content:space-between;align-items:center;padding:0 24px;background:#001529;height:48px;line-height:48px}._logo_1puwg_15{display:flex;align-items:center}._logoText_1puwg_20{color:#fff;font-size:16px;font-weight:600}._headerRight_1puwg_26{display:flex;align-items:center}._userInfo_1puwg_31{display:flex;align-items:center;cursor:pointer;color:#fff}._userName_1puwg_38{margin-left:8px;color:#fff}._mainLayout_1puwg_43{margin-top:0;min-height:calc(100vh - 48px)}._sider_1puwg_48{background:#fff;min-height:calc(100vh - 48px)}._menu_1puwg_53{border-right:none}._collapsedBtn_1puwg_57{position:absolute;bottom:16px;left:50%;transform:translate(-50%);cursor:pointer;padding:8px 16px;background:#f5f5f5;border-radius:4px;color:#666}._collapsedBtn_1puwg_57:hover{background:#e6f7ff;color:#1890ff}._content_1puwg_74{padding:24px;background:#f5f5f5;min-height:calc(100vh - 48px);overflow:auto}._userDropdownPanel_1puwg_81{background:#fff;border-radius:8px;box-shadow:0 6px 16px #0000001f;padding:16px;width:360px}._tenantSection_1puwg_89{display:flex;align-items:center;gap:12px}._tenantLabel_1puwg_95{font-size:14px;color:#666;white-space:nowrap}._tenantCascader_1puwg_101{flex:1}._panelDivider_1puwg_105{margin:12px 0}._userSection_1puwg_109{display:flex;flex-direction:column;gap:8px}._userInfoRow_1puwg_115{display:flex;font-size:14px;line-height:1.6}._userInfoLabel_1puwg_121{color:#999;width:70px;flex-shrink:0}._menuSection_1puwg_127{display:flex;flex-direction:column}._menuItem_1puwg_132{display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;border-radius:4px;font-size:14px;color:#333}._menuItem_1puwg_132:hover{background:#f5f5f5}._container_tti32_1{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#667eea,#764ba2)}._content_tti32_9{width:400px;padding:20px}._card_tti32_14{border-radius:8px;box-shadow:0 4px 20px #0000001a}._header_tti32_19{text-align:center;margin-bottom:24px}._header_tti32_19 h3{margin-bottom:8px}