@yuku123/z-frontend-common 0.2.9 → 1.1.0

package/src/components/ui/EmptyState.jsx

@@ -0,0 +1,94 @@
+import {Button} from 'antd'
+import {InboxOutlined} from '@ant-design/icons'
+import {neutral, radius} from './tokens'
+
+/**
+ * 统一空状态 - 借鉴 ui-ux-pro-max P8: Treat failure and emptiness as moments for direction.
+ *
+ * 原则 (来自 anthropics/frontend-design):
+ *   - An empty screen is an invitation to act.
+ *   - 不要只画一个插画加一行字, 要有明确的"下一步动作".
+ *   - 默认尺寸 44×44 满足 ui-ux-pro-max P2 (touch target).
+ *
+ * @param {Object} props
+ * @param {ReactNode} [props.icon] - 自定义图标
+ * @param {string} [props.title] - 主标题 (默认 "暂无数据")
+ * @param {string} [props.description] - 描述 (解释空的原因 + 下一步)
+ * @param {string} [props.actionText] - 行动按钮文案
+ * @param {Function} [props.onAction] - 行动回调
+ * @param {string} [props.size] - sm | md | lg (默认 md)
+ * @param {Object} [props.style] - 容器样式
+ */
+export default function EmptyState({
+                                       icon,
+                                       title = '暂无数据',
+                                       description,
+                                       actionText,
+                                       onAction,
+                                       size = 'md',
+                                       style,
+                                   }) {
+    const padMap = {sm: 24, md: 40, lg: 64}
+    const titleSize = {sm: 14, md: 16, lg: 20}
+
+    return (
+        <div
+            role="status"
+            aria-live="polite"
+            style={{
+                padding: padMap[size] || padMap.md,
+                textAlign: 'center',
+                background: '#ffffff',
+                borderRadius: radius.md,
+                border: '1px dashed #e5e7eb',
+                ...style,
+            }}
+        >
+            <div style={{
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                width: 56, height: 56,
+                borderRadius: '50%',
+                background: neutral.surfaceAlt,
+                marginBottom: 16,
+                fontSize: 28,
+                color: '#9ca3af',
+            }}>
+                {icon || <InboxOutlined/>}
+            </div>
+            <div style={{
+                fontSize: titleSize[size],
+                fontWeight: 600,
+                color: neutral.text,
+                marginBottom: description ? 6 : 16,
+            }}>
+                {title}
+            </div>
+            {description && (
+                <div style={{
+                    fontSize: 13,
+                    color: neutral.textMuted,
+                    lineHeight: 1.6,
+                    maxWidth: 360,
+                    margin: '0 auto 16px',
+                }}>
+                    {description}
+                </div>
+            )}
+            {actionText && onAction && (
+                <Button
+                    type="primary"
+                    onClick={onAction}
+                    style={{
+                        background: 'linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%)',
+                        border: 'none',
+                        minHeight: 36,
+                    }}
+                >
+                    {actionText}
+                </Button>
+            )}
+        </div>
+    )
+}

package/src/components/ui/ErrorState.jsx

@@ -0,0 +1,114 @@
+import {Button} from 'antd'
+import {ExclamationCircleOutlined, ReloadOutlined} from '@ant-design/icons'
+import {neutral, radius} from './tokens'
+
+/**
+ * 统一错误状态 - 借鉴 ui-ux-pro-max P1/P8 + frontend-design "Treat failure as moments for direction".
+ *
+ * 原则:
+ *   - 错误就近显示 (不要只发一个顶部 message)
+ *   - 明确"发生了什么" + "下一步怎么做"
+ *   - 提供重试入口
+ *   - 不用道歉 ("对不起..." 是 AI 默认)
+ *
+ * @param {Object} props
+ * @param {Error|string} props.error - 错误对象或文案
+ * @param {string} [props.title] - 主标题
+ * @param {string} [props.description] - 解释发生了什么 + 下一步
+ * @param {Function} [props.onRetry] - 重试回调
+ * @param {string} [props.retryText] - 重试按钮文案
+ * @param {'inline'|'full'} [props.variant] - inline 紧凑嵌入页面, full 占满卡片
+ * @param {Object} [props.style]
+ */
+export default function ErrorState({
+                                       error,
+                                       title = '加载失败',
+                                       description,
+                                       onRetry,
+                                       retryText = '重新加载',
+                                       variant = 'inline',
+                                       style,
+                                   }) {
+    const isFull = variant === 'full'
+
+    // 提取错误消息。**先取后端响应体里的业务 message**，再退回 axios/字符串：
+    // HTTP 500 时 axios 只给 "Request failed with status code 500"，而真因在同一个响应的 `message` 里
+    // （实测 `/api/config/pageConfig` ⇒ "Unknown column 'encrypted_data_key' in 'field list'"）。
+    // 原来无论拿到什么都在末尾追加"请检查网络或稍后重试" —— 那是把**服务端缺陷**说成**用户网络问题**。
+    const body = error?.response?.data
+    const backendMsg = (body && typeof body === 'object')
+        ? (typeof body.message === 'string' && body.message) || (typeof body.msg === 'string' && body.msg) || null
+        : null
+    const errMsg = backendMsg
+        || (typeof error === 'string'
+            ? error
+            : (error?.message || error?.msg || (error ? String(error) : null)))
+
+    const finalDescription = description
+        || (backendMsg
+            ? `原因: ${backendMsg}`
+            : (errMsg ? `原因: ${errMsg}。请检查网络或稍后重试。` : '请检查网络或稍后重试。'))
+
+    return (
+        <div
+            role="alert"
+            aria-live="assertive"
+            style={{
+                padding: isFull ? '48px 24px' : '20px 24px',
+                background: isFull ? '#ffffff' : '#fef2f2',
+                border: isFull ? `1px dashed ${neutral.border}` : '1px solid #fecaca',
+                borderRadius: radius.md,
+                textAlign: isFull ? 'center' : 'left',
+                display: 'flex',
+                flexDirection: isFull ? 'column' : 'row',
+                alignItems: isFull ? 'center' : 'flex-start',
+                gap: isFull ? 12 : 16,
+                ...style,
+            }}
+        >
+            <div style={{
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                width: isFull ? 56 : 36, height: isFull ? 56 : 36,
+                borderRadius: '50%',
+                background: isFull ? '#fef2f2' : '#ffffff',
+                color: '#dc2626',
+                fontSize: isFull ? 28 : 18,
+                flexShrink: 0,
+            }}>
+                <ExclamationCircleOutlined/>
+            </div>
+            <div style={{flex: 1, minWidth: 0}}>
+                <div style={{
+                    fontSize: isFull ? 16 : 14,
+                    fontWeight: 600,
+                    color: '#991b1b',
+                    marginBottom: 4,
+                }}>
+                    {title}
+                </div>
+                <div style={{
+                    fontSize: 13,
+                    color: '#7f1d1d',
+                    lineHeight: 1.6,
+                    wordBreak: 'break-word',
+                }}>
+                    {finalDescription}
+                </div>
+                {onRetry && (
+                    <Button
+                        type="primary"
+                        danger
+                        icon={<ReloadOutlined/>}
+                        onClick={onRetry}
+                        size={isFull ? 'middle' : 'small'}
+                        style={{marginTop: 12}}
+                    >
+                        {retryText}
+                    </Button>
+                )}
+            </div>
+        </div>
+    )
+}

package/src/components/ui/FeatureCard.jsx

@@ -0,0 +1,205 @@
+import {useState} from 'react'
+import {palette, radius, shadow, space} from './tokens'
+
+/**
+ * 功能卡 - 借鉴 wenming7/marketplace 应用卡设计
+ *
+ * 视觉:
+ *   ┌────────────────────────────┐
+ *   │ [封面/图标区 16:9 / 4:3]   │  ← 可选渐变色背景 + 大图标
+ *   ├────────────────────────────┤
+ *   │ [chip] [chip]              │  ← 标签 chips
+ *   │ 模块标题                    │
+ *   │ 副描述 · 1234 次使用         │  ← 元信息
+ *   └────────────────────────────�
+ *
+ * 单位面积信息密度高于 antd Card, 视觉更现代化.
+ *
+ * @param {Object} props
+ * @param {string} props.title - 标题
+ * @param {string} [props.description] - 描述
+ * @param {ReactNode} [props.icon] - 封面图标 (如不传 cover 则渲染渐变封面)
+ * @param {string} [props.cover] - 封面图片 URL
+ * @param {string} [props.color] - 配色 (用于渐变封面)
+ * @param {Array<{label: string, color?: string}>} [props.tags] - 标签 chips
+ * @param {string} [props.meta] - 元信息 (如 "1234 次使用")
+ * @param {string} [props.href] - 跳转路径
+ * @param {ReactNode} [props.extra] - 右上角额外内容 (如 NEW 角标)
+ */
+export default function FeatureCard({
+                                        title,
+                                        description,
+                                        icon,
+                                        cover,
+                                        color = 'violet',
+                                        tags = [],
+                                        meta,
+                                        href,
+                                        extra,
+                                    }) {
+    const c = palette[color] || palette.violet
+    const [hover, setHover] = useState(false)
+
+    const handleClick = () => {
+        if (href) {
+            if (typeof window !== 'undefined') {
+                window.location.href = href
+            }
+        }
+    }
+
+    return (
+        <div
+            onClick={handleClick}
+            onMouseEnter={() => setHover(true)}
+            onMouseLeave={() => setHover(false)}
+            style={{
+                background: '#ffffff',
+                borderRadius: radius.lg,
+                overflow: 'hidden',
+                cursor: href ? 'pointer' : 'default',
+                boxShadow: hover ? shadow.lg : shadow.sm,
+                transform: hover ? 'translateY(-2px)' : 'translateY(0)',
+                transition: 'transform 200ms ease, box-shadow 200ms ease',
+                border: '1px solid #f1f5f9',
+                display: 'flex',
+                flexDirection: 'column',
+            }}
+        >
+            {/* 封面区 */}
+            <div style={{
+                position: 'relative',
+                aspectRatio: '16 / 9',
+                background: cover ? '#f1f5f9' : c.gradient,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                overflow: 'hidden',
+            }}>
+                {cover ? (
+                    <img
+                        src={cover}
+                        alt={title}
+                        style={{
+                            width: '100%',
+                            height: '100%',
+                            objectFit: 'cover',
+                        }}
+                    />
+                ) : (
+                    <div style={{
+                        fontSize: 48,
+                        color: 'rgba(255, 255, 255, 0.9)',
+                        display: 'flex',
+                    }}>
+                        {icon}
+                    </div>
+                )}
+                {/* 装饰圆 */}
+                {!cover && (
+                    <div style={{
+                        position: 'absolute',
+                        top: -24,
+                        right: -24,
+                        width: 80,
+                        height: 80,
+                        borderRadius: '50%',
+                        background: 'rgba(255, 255, 255, 0.15)',
+                    }}/>
+                )}
+                {/* 右上角额外内容 (如 NEW 角标) */}
+                {extra && (
+                    <div style={{
+                        position: 'absolute',
+                        top: 8,
+                        right: 8,
+                    }}>
+                        {extra}
+                    </div>
+                )}
+            </div>
+
+            {/* 内容区 */}
+            <div style={{
+                padding: space[4],
+                display: 'flex',
+                flexDirection: 'column',
+                gap: space[2],
+                flex: 1,
+            }}>
+                {/* chips */}
+                {tags.length > 0 && (
+                    <div style={{
+                        display: 'flex',
+                        flexWrap: 'wrap',
+                        gap: 6,
+                    }}>
+                        {tags.slice(0, 3).map((t, i) => {
+                            const tc = palette[t.color] || palette.blue
+                            return (
+                                <span
+                                    key={i}
+                                    style={{
+                                        fontSize: 11,
+                                        fontWeight: 500,
+                                        padding: '2px 8px',
+                                        borderRadius: 999,
+                                        background: tc.soft,
+                                        color: tc.bg,
+                                    }}
+                                >
+                                    {t.label}
+                                </span>
+                            )
+                        })}
+                    </div>
+                )}
+
+                {/* 标题 */}
+                <div style={{
+                    fontSize: 15,
+                    fontWeight: 600,
+                    color: '#111827',
+                    lineHeight: 1.3,
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    display: '-webkit-box',
+                    WebkitLineClamp: 1,
+                    WebkitBoxOrient: 'vertical',
+                }}>
+                    {title}
+                </div>
+
+                {/* 描述 */}
+                {description && (
+                    <div style={{
+                        fontSize: 12,
+                        color: '#6b7280',
+                        lineHeight: 1.5,
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        display: '-webkit-box',
+                        WebkitLineClamp: 2,
+                        WebkitBoxOrient: 'vertical',
+                        minHeight: 36,
+                    }}>
+                        {description}
+                    </div>
+                )}
+
+                {/* 元信息 */}
+                {meta && (
+                    <div style={{
+                        fontSize: 11,
+                        color: '#9ca3af',
+                        marginTop: 'auto',
+                        paddingTop: space[2],
+                        borderTop: '1px dashed #f1f5f9',
+                    }}>
+                        {meta}
+                    </div>
+                )}
+            </div>
+        </div>
+    )
+}

package/src/components/ui/GradientStatCard.jsx

@@ -0,0 +1,196 @@
+import {useEffect, useRef, useState} from 'react'
+import {palette, radius, shadow, space} from './tokens'
+
+/**
+ * 渐变数据卡 - 借鉴 wenming7/marketplace 数据卡设计
+ *
+ * 视觉特征 (相对 antd Statistic 优势):
+ *   - 渐变彩色背景 (pink/blue/green/orange/violet/cyan)
+ *   - 圆角图标 + 大数字 + 小标签 (单位面积信息密度高)
+ *   - 数字滚动动画 (现代化微交互)
+ *   - 悬浮微抬升 + 阴影变化
+ *   - 可选 trend (同比/环比箭头)
+ *
+ * @param {Object} props
+ * @param {ReactNode} props.icon - 图标 (React 节点, 通常是 antd icon)
+ * @param {string} props.label - 标签 (如 "上架应用")
+ * @param {number} props.value - 数值
+ * @param {string} [props.suffix] - 单位 (如 "万", "%", "+")
+ * @param {string} [props.color] - 配色 key (pink|blue|green|orange|violet|cyan)
+ * @param {number|string} [props.trend] - 同比变化 (正数绿箭头上升, 负数红箭头下降)
+ * @param {string} [props.href] - 点击跳转路径
+ * @param {boolean} [props.loading] - 加载态
+ * @param {string} [props.precision] - 小数位
+ */
+export default function GradientStatCard({
+                                             icon,
+                                             label,
+                                             value,
+                                             suffix,
+                                             color = 'blue',
+                                             trend,
+                                             href,
+                                             loading = false,
+                                             precision = 0,
+                                         }) {
+    const c = palette[color] || palette.blue
+    const [display, setDisplay] = useState(0)
+    const prevRef = useRef(0)
+
+    // 数字滚动动画
+    useEffect(() => {
+        if (loading || value == null) return
+        const from = prevRef.current
+        const to = Number(value) || 0
+        if (from === to) {
+            setDisplay(to)
+            return
+        }
+        const duration = 600
+        const start = performance.now()
+        let raf
+        const tick = (now) => {
+            const p = Math.min(1, (now - start) / duration)
+            // easeOutCubic
+            const eased = 1 - Math.pow(1 - p, 3)
+            const cur = from + (to - from) * eased
+            setDisplay(cur)
+            if (p < 1) raf = requestAnimationFrame(tick)
+            else prevRef.current = to
+        }
+        raf = requestAnimationFrame(tick)
+        return () => raf && cancelAnimationFrame(raf)
+    }, [value, loading])
+
+    const handleClick = () => {
+        if (href && typeof window !== 'undefined') {
+            window.location.href = href
+        }
+    }
+
+    const formatted = loading
+        ? '--'
+        : Number(display).toLocaleString('zh-CN', {
+            minimumFractionDigits: precision,
+            maximumFractionDigits: precision,
+        })
+
+    const trendNum = trend != null ? Number(trend) : null
+    const trendUp = trendNum != null && trendNum >= 0
+
+    return (
+        <div
+            onClick={handleClick}
+            style={{
+                position: 'relative',
+                background: c.gradient,
+                borderRadius: radius.lg,
+                padding: space[5],
+                color: c.fg,
+                cursor: href ? 'pointer' : 'default',
+                boxShadow: shadow.md,
+                overflow: 'hidden',
+                transition: 'transform 200ms ease, box-shadow 200ms ease',
+                minHeight: 110,
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'space-between',
+            }}
+            onMouseEnter={(e) => {
+                e.currentTarget.style.transform = 'translateY(-2px)'
+                e.currentTarget.style.boxShadow = shadow.lg
+            }}
+            onMouseLeave={(e) => {
+                e.currentTarget.style.transform = 'translateY(0)'
+                e.currentTarget.style.boxShadow = shadow.md
+            }}
+        >
+            {/* 右上角装饰圆 - 借鉴 wenming7 数据卡的光感 */}
+            <div
+                style={{
+                    position: 'absolute',
+                    top: -32,
+                    right: -32,
+                    width: 96,
+                    height: 96,
+                    borderRadius: '50%',
+                    background: 'rgba(255, 255, 255, 0.15)',
+                    pointerEvents: 'none',
+                }}
+            />
+
+            {/* 图标 + 标签 */}
+            <div style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: space[2],
+                position: 'relative',
+            }}>
+                <div style={{
+                    width: 36,
+                    height: 36,
+                    borderRadius: radius.sm,
+                    background: 'rgba(255, 255, 255, 0.20)',
+                    backdropFilter: 'blur(8px)',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    fontSize: 18,
+                }}>
+                    {icon}
+                </div>
+                <div style={{
+                    fontSize: 13,
+                    fontWeight: 500,
+                    opacity: 0.92,
+                }}>
+                    {label}
+                </div>
+            </div>
+
+            {/* 数值 + trend */}
+            <div style={{
+                display: 'flex',
+                alignItems: 'baseline',
+                gap: space[2],
+                position: 'relative',
+                marginTop: space[3],
+            }}>
+                <div style={{
+                    fontSize: 30,
+                    fontWeight: 700,
+                    lineHeight: 1.1,
+                    letterSpacing: '-0.02em',
+                    fontVariantNumeric: 'tabular-nums',
+                }}>
+                    {formatted}
+                </div>
+                {suffix && (
+                    <div style={{fontSize: 14, opacity: 0.85, fontWeight: 500}}>
+                        {suffix}
+                    </div>
+                )}
+                {trendNum != null && (
+                    <div style={{
+                        marginLeft: 'auto',
+                        fontSize: 12,
+                        fontWeight: 600,
+                        padding: '2px 8px',
+                        borderRadius: 999,
+                        background: trendUp
+                            ? 'rgba(255, 255, 255, 0.22)'
+                            : 'rgba(0, 0, 0, 0.18)',
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: 2,
+                    }}>
+                        <span style={{fontSize: 10}}>
+                            {trendUp ? '▲' : '▼'}
+                        </span>
+                        {Math.abs(trendNum).toFixed(1)}%
+                    </div>
+                )}
+            </div>
+        </div>
+    )
+}