@yuku123/z-frontend-common 0.2.9 → 1.1.0

package/src/components/Layout/index.jsx

@@ -1,69 +1,172 @@
-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'
+import { Avatar, Button, Dropdown, Layout, Menu, Spin, Tooltip } from 'antd'
+import { DownOutlined, LoginOutlined, MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons'
+import { Outlet, useLocation, useNavigate } from 'react-router-dom'
+import { useState } from 'react'
 
-const {Header, Sider, Content} = Layout
+const { Header, Sider, Content } = Layout
+
+function shade(hex, amount = 0.85) {
+    const m = /^#?([0-9a-f]{6})$/i.exec(hex || '')
+    if (!m) return hex
+    const n = parseInt(m[1], 16)
+    const r = Math.max(0, Math.min(255, Math.round(((n >> 16) & 0xff) * amount)))
+    const g = Math.max(0, Math.min(255, Math.round(((n >> 8) & 0xff) * amount)))
+    const b = Math.max(0, Math.min(255, Math.round((n & 0xff) * amount)))
+    return '#' + ((r << 16) | (g << 8) | b).toString(16).padStart(6, '0')
+}
 
 /**
- * 统一布局组件
- * @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 - 是否加载中
+ * 通用左菜单架子 AppLayout — lead 008 §1/§11/§12/§15/§16 全 46 仓 suit 强制落地。
+ *
+ * props:
+ *   - menuItems / appTitle / appShort / appIcon / headerExtra / loading: 同 z-vector-component 原版
+ *   - appVersion?: string — sider 展开态展示「z-vector@1.0.5」格式
+ *   - appUser?: { name, role } — Header 右上角 avatar+name+下拉（profile/退出登录）
+ *   - loginPath?: string — 退出登录跳转目标，缺省按 menuItems[0].key 自动推导（/home → /login）
  */
-export default function AppLayout({
-                                      menuItems = [],
-                                      appTitle = 'One Company',
-                                      appShort = 'OC',
-                                      headerExtra,
-                                      loading = false,
-                                  }) {
+export function AppLayout({
+                             menuItems = [],
+                             appTitle = 'One Company',
+                             appShort = 'OC',
+                             appVersion,
+                             appIcon,
+                             appUser,
+                             loginPath,
+                             headerExtra,
+                             loading = false,
+                         }) {
     const [collapsed, setCollapsed] = useState(false)
     const navigate = useNavigate()
     const location = useLocation()
 
-    const handleMenuClick = ({key}) => {
-        navigate(key)
+    const handleMenuClick = ({ key }) => { navigate(key) }
+
+    // 退出登录跳转：loginPath 显式传优先；否则按 menuItems[0].key 自动推导 /<产品>/home → /<产品>/login
+    const computeLoginPath = () => {
+        if (loginPath) return loginPath
+        const first = menuItems && menuItems[0]
+        const k = first && first.key
+        if (typeof k === 'string' && k.endsWith('/home')) {
+            return k.slice(0, -4) + 'login'
+        }
+        return '/login'
+    }
+
+    // URL 即状态（lead 008 §11）：用 location.pathname 的最长菜单前缀作 selectedKey
+    const collectKeys = (items, acc = []) => {
+        for (const it of items || []) {
+            if (it?.key) acc.push(it.key)
+            if (it?.children) collectKeys(it.children, acc)
+        }
+        return acc
+    }
+    const selectedKey = (() => {
+        const keys = collectKeys(menuItems)
+        const p = location.pathname
+        return keys.filter((k) => p === k || p.startsWith(k + '/'))
+            .sort((a, b) => b.length - a.length)[0] || p
+    })()
+
+    const renderBrand = () => {
+        if (collapsed) {
+            if (appIcon) {
+                const { icon, color = '#7c3aed', label = appTitle } = appIcon
+                const node = (
+                    <div style={{
+                        width: 36, height: 36, borderRadius: 9,
+                        background: `linear-gradient(135deg, ${color}, ${shade(color, 0.7)})`,
+                        display: 'flex', alignItems: 'center', justifyContent: 'center',
+                        color: '#fff', fontSize: 20, boxShadow: '0 2px 6px rgba(0,0,0,0.25)',
+                        overflow: 'hidden',
+                    }}>{icon}</div>
+                )
+                return <Tooltip title={label} placement="right">{node}</Tooltip>
+            }
+            return appShort
+        }
+        return (
+            <span style={{ color: '#fff', fontWeight: 600, fontSize: 16, whiteSpace: 'nowrap' }}>
+                {appTitle}
+                {appVersion && (
+                    <span style={{
+                        color: 'rgba(255,255,255,0.55)', fontWeight: 400, fontSize: 12, marginLeft: 4,
+                    }}>@{appVersion}</span>
+                )}
+            </span>
+        )
     }
 
     return (
-        <Layout style={{minHeight: '100vh'}}>
+        <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}
+                    {renderBrand()}
                 </div>
                 {loading ? (
-                    <div style={{padding: 16, textAlign: 'center'}}>
-                        <Spin size="small"/>
-                    </div>
+                    <div style={{ padding: 16, textAlign: 'center' }}><Spin size="small" /></div>
                 ) : (
-                    <Menu theme="dark" mode="inline"
-                          selectedKeys={[location.pathname]}
-                          items={menuItems}
-                          onClick={handleMenuClick}
+                    <Menu
+                        theme="dark"
+                        mode="inline"
+                        selectedKeys={[selectedKey]}
+                        items={menuItems}
+                        onClick={handleMenuClick}
                     />
                 )}
             </Sider>
             <Layout>
                 <Header style={{
-                    padding: '0 16px', background: '#fff',
+                    height: 48, lineHeight: '48px', padding: '0 16px', background: '#fff',
                     display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+                    borderBottom: '1px solid #f1f5f9',
                 }}>
-          <span onClick={() => setCollapsed(!collapsed)} style={{fontSize: 18, cursor: 'pointer'}}>
-            {collapsed ? <MenuUnfoldOutlined/> : <MenuFoldOutlined/>}
-          </span>
-                    {headerExtra}
+                    <span onClick={() => setCollapsed(!collapsed)} style={{ fontSize: 18, cursor: 'pointer' }}>
+                        {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
+                    </span>
+                    <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+                        {appUser && (
+                            <Dropdown
+                                menu={{
+                                    items: [
+                                        { key: 'profile', label: `${appUser.name}（${appUser.role || '用户'}）`, disabled: true },
+                                        { type: 'divider' },
+                                        {
+                                            key: 'logout', label: '退出登录', onClick: () => {
+                                                localStorage.removeItem('token')
+                                                localStorage.removeItem('userInfo')
+                                                window.location.href = computeLoginPath()
+                                            },
+                                        },
+                                    ],
+                                }}
+                                placement="bottomRight"
+                            >
+                                <span style={{ cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
+                                    <Avatar size={28} style={{ background: '#7c3aed' }}>
+                                        {(appUser.name || '?').slice(0, 1).toUpperCase()}
+                                    </Avatar>
+                                    <span style={{ fontSize: 13, color: '#0f172a' }}>{appUser.name}</span>
+                                    <DownOutlined style={{ fontSize: 10, color: '#94a3b8' }} />
+                                </span>
+                            </Dropdown>
+                        )}
+                        {!appUser && (
+                            <Button type="primary" size="small" icon={<LoginOutlined />}
+                                    onClick={() => { window.location.href = computeLoginPath() }}>
+                                登录
+                            </Button>
+                        )}
+                        {headerExtra}
+                    </div>
                 </Header>
-                <Content style={{margin: 16, padding: 24, background: '#fff', minHeight: 280}}>
-                    <Outlet/>
+                <Content style={{ margin: 16, padding: 24, background: '#fff', minHeight: 280 }}>
+                    <Outlet />
                 </Content>
             </Layout>
         </Layout>
     )
 }
+
+export default AppLayout

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/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,
+            }}
+        />
+    )
+}