@yuku123/z-frontend-common 0.2.9 → 1.0.0

package/src/components/LoginPage/index.jsx

@@ -1,37 +1,57 @@
-import {useState} from 'react'
-import {Button, Card, Form, Input, message} from 'antd'
-import {LockOutlined, UserOutlined} from '@ant-design/icons'
-import request from '../../utils/request'
+import { useState } from 'react'
+import { Alert, Button, Card, Form, Input, message } from 'antd'
+import { LockOutlined, UserOutlined } from '@ant-design/icons'
+import { request } from '../../services/request'
 
 /**
- * 统一登录页面组件
- * @param {Object} props
- * @param {string} props.title - 页面标题
- * @param {string} props.loginApi - 登录 API 路径，默认 /auth/login
- * @param {string} props.redirectUrl - 登录成功后跳转地址，默认 /
- * @param {Function} props.onSuccess - 登录成功回调，覆盖 redirectUrl
+ * 统一登录页（lead 008 §16）—— mockAuth / 真实 API 双模式：
+ * <ul>
+ *   <li>{@code mockAuth} 传入 → 纯前端校验（admin/123456 硬编码顶替，CTC/SSO 接入前短期形态），
+ *       登录成功写 localStorage.token + userInfo 并跳 redirectUrl</li>
+ *   <li>{@code mockAuth} 缺省 → POST {@code loginApi}（CTC 中央认证），后端签发 token</li>
+ * </ul>
+ *
+ * @param {string}  [title='统一管理平台']  卡片标题
+ * @param {Object}  [mockAuth]  {username, password, user:{name, role}} 本地 mock 校验配置
+ * @param {string}  [loginApi='/auth/login']  真实登录端点（mockAuth 缺省时生效）
+ * @param {string}  [redirectUrl='/']  登录成功跳转
+ * @param {Function} [onSuccess]  登录成功回调（覆盖 redirectUrl 跳转）
  */
 export default function LoginPage({
                                       title = '统一管理平台',
+                                      mockAuth,
                                       loginApi = '/auth/login',
                                       redirectUrl = '/',
                                       onSuccess,
                                   }) {
     const [loading, setLoading] = useState(false)
 
+    const persistAndRedirect = (user) => {
+        localStorage.setItem('token', mockAuth ? 'mock-' + mockAuth.username : user?.token || 'token')
+        localStorage.setItem('userInfo', JSON.stringify(user || {}))
+        message.success('登录成功' + (mockAuth ? '（mock 模式，待 CTC/SSO 接入）' : ''))
+        if (onSuccess) onSuccess(user)
+        else window.location.href = redirectUrl
+    }
+
     const handleSubmit = async (values) => {
         setLoading(true)
         try {
+            if (mockAuth) {
+                if (values.username === mockAuth.username && values.password === mockAuth.password) {
+                    persistAndRedirect(mockAuth.user)
+                } else {
+                    message.error('用户名或密码错误')
+                }
+                return
+            }
             const res = await request.post(loginApi, values)
-            if (res.token) {
+            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
-                }
+                if (onSuccess) onSuccess(res)
+                else window.location.href = redirectUrl
             } else {
                 message.error('登录失败：未获取到 token')
             }
@@ -47,13 +67,19 @@ export default function LoginPage({
             height: '100vh', display: 'flex', justifyContent: 'center', alignItems: 'center',
             background: '#f0f2f5',
         }}>
-            <Card title={title} style={{width: 400}}>
+            <Card title={title} style={{ width: 400 }}>
+                {mockAuth && (
+                    <Alert
+                        type="info" showIcon style={{ marginBottom: 16 }}
+                        message={`Mock 模式：用户名 ${mockAuth.username} / 密码 ${mockAuth.password}`}
+                    />
+                )}
                 <Form onFinish={handleSubmit} size="large">
-                    <Form.Item name="username" rules={[{required: true, message: '请输入用户名'}]}>
-                        <Input prefix={<UserOutlined/>} placeholder="用户名"/>
+                    <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 name="password" rules={[{ required: true, message: '请输入密码' }]}>
+                        <Input.Password prefix={<LockOutlined />} placeholder="密码" />
                     </Form.Item>
                     <Form.Item>
                         <Button type="primary" htmlType="submit" loading={loading} block>

package/src/components/StatusTag/index.jsx

@@ -1,16 +1,18 @@
-import {Tag} from 'antd'
+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: '已拒绝'},
+/** 0.1.1 契约保留：数值/枚举 → 语义色 Tag 的默认映射。 */
+export 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>
+/**
+ * 状态标签。props 与 0.1.1 一致：status + 可选 map（覆盖/追加 defaultStatusMap）。
+ */
+export default function StatusTag({ status, map }) {
+    const conf = map?.[status] || defaultStatusMap[status] || { color: 'default', text: String(status) }
+    return <Tag color={conf.color}>{conf.text}</Tag>
 }
-
-export {defaultStatusMap}

package/src/index.js

@@ -1,42 +1,36 @@
-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 { 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'
 
-// 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'
+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'
 
-// 低代码建模
-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'
-
-// 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}