@gadmin2n/schematics 0.0.70 → 0.0.71

package/src/lib/application/files/gadmin2-game-angle-demo/web/src/components/canvas/NumCard/NumCard.module.css

@@ -0,0 +1,8 @@
+/* 标题点击时 hover 变蓝效果 */
+.numCardTitleClickable:hover {
+  color: #1677ff;
+}
+
+.numCardTitleClickable:hover .numCardTitleArrow {
+  color: #1677ff;
+}

package/src/lib/application/files/gadmin2-game-angle-demo/web/src/components/canvas/NumCard/index.tsx

@@ -0,0 +1,509 @@
+import React from 'react';
+import { Card, Spin, Skeleton } from 'antd';
+import { RightOutlined } from '@ant-design/icons';
+import { InfoIcon } from '@/components/canvas/icon/InfoIcon';
+import { MetricInfoTooltip } from '@/components/canvas/metric-info-tooltip';
+import { LineChart, LineDataSingle } from '@/components/canvas/LineChart';
+import cssStyles from './NumCard.module.css';
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export interface ComparisonItem {
+  /** 标签，如 "DoD"、"SDLW" */
+  label: string;
+  /** 百分比字符串，如 "2.3%"（不含方向符号） */
+  value: string;
+  /** true = 上涨（绿色 ↑），false = 下跌（红色 ↓） */
+  isUp: boolean;
+}
+
+export interface NumCardSubStyles {
+  container?: React.CSSProperties;
+  title?: React.CSSProperties;
+  value?: React.CSSProperties;
+  subTitle?: React.CSSProperties;
+}
+
+export type NumCardVariant = 'default' | 'withChart';
+
+export interface NumCardProps {
+  // ── 核心 ──────────────────────────────────────────────────────────────────
+  title: React.ReactNode;
+  value?: number | string | React.ReactNode | null;
+  unit?: React.ReactNode;
+  prefix?: React.ReactNode;
+  suffix?: React.ReactNode;
+
+  // ── 布局 ──────────────────────────────────────────────────────────────────
+  /** 卡片高度（px），不传则自适应内容 */
+  height?: number | string;
+  variant?: NumCardVariant;
+  comparisons?: ComparisonItem[];
+  /** 是否显示环比数据区域（默认 true），设为 false 时隐藏但保留数据 */
+  showComparisons?: boolean;
+  /** 是否显示右侧折线图（仅 withChart variant，默认 true），设为 false 时隐藏但保留数据 */
+  showChart?: boolean;
+  onTitleClick?: () => void;
+  subTitle?: React.ReactNode;
+  icon?: React.ReactNode;
+  chart?: React.ReactNode;
+
+  // ── withChart variant 专用 props ─────────────────────────────────────────
+  /** 折线图数据（仅 withChart variant） */
+  chartData?: LineDataSingle;
+  /** 折线图 chartProps（仅 withChart variant） */
+  chartProps?: Record<string, any>;
+  /** 折线图 testId（仅 withChart variant） */
+  chartTestId?: string;
+  /** 内容区高度，数字与折线图共享（仅 withChart variant，默认 100） */
+  contentHeight?: number;
+  /** 左侧数字区固定宽度（仅 withChart variant） */
+  numWidth?: number;
+  /** 显示折线图坐标轴（仅 withChart variant，默认 false） */
+  showAxes?: boolean;
+  /** 智能 Y 轴范围（仅 withChart variant，默认 false） */
+  smartYAxis?: boolean;
+  /** 卡片顶部 header 插槽（仅 withChart variant） */
+  header?: React.ReactNode;
+
+  // ── 指标信息 ──────────────────────────────────────────────────────────────
+  metricId?: string;
+  info?: string;
+  showInfoIcon?: boolean;
+
+  // ── 格式化 ────────────────────────────────────────────────────────────────
+  formatNumber?: boolean;
+  valueColor?: string;
+
+  // ── 状态 ──────────────────────────────────────────────────────────────────
+  loading?: boolean;
+  skeleton?: boolean;
+
+  // ── 样式 ──────────────────────────────────────────────────────────────────
+  className?: string;
+  style?: React.CSSProperties;
+  styles?: NumCardSubStyles;
+
+  // ── 测试 / AI 定位 ────────────────────────────────────────────────────────
+  testId: string;
+}
+
+// ─── Variant 配置 ─────────────────────────────────────────────────────────────
+
+interface VariantConfig {
+  titleFontSize: number;
+  valueFontSize: number;
+  bodyPadding: string;
+  useCard: boolean;
+}
+
+const VARIANT_CONFIG: Record<NumCardVariant, VariantConfig> = {
+  default: {
+    titleFontSize: 14,
+    valueFontSize: 32,
+    bodyPadding: '16px 20px',
+    useCard: true,
+  },
+  withChart: {
+    titleFontSize: 14,
+    valueFontSize: 22,
+    bodyPadding: '16px',
+    useCard: true,
+  },
+};
+
+// ─── No Data 判断 ─────────────────────────────────────────────────────────────
+
+function isNoData(value: NumCardProps['value']): boolean {
+  if (value === undefined || value === null) return true;
+  if (typeof value === 'number' && isNaN(value)) return true;
+  if (
+    typeof value === 'string' &&
+    ['', 'undefined', 'null', 'NaN'].includes(value)
+  )
+    return true;
+  return false;
+}
+
+// ─── 数值格式化 ───────────────────────────────────────────────────────────────
+
+function formatValue(
+  value: NumCardProps['value'],
+  formatNumber: boolean,
+): React.ReactNode {
+  if (typeof value === 'number' && formatNumber) {
+    return value.toLocaleString();
+  }
+  if (typeof value === 'string' && formatNumber) {
+    const parsed = parseFloat(value);
+    if (!isNaN(parsed)) return parsed.toLocaleString();
+  }
+  return value as React.ReactNode;
+}
+
+// ─── 组件 ─────────────────────────────────────────────────────────────────────
+
+export const NumCard: React.FC<NumCardProps> = ({
+  title,
+  value,
+  unit,
+  prefix,
+  suffix,
+  height,
+  variant = 'default',
+  comparisons,
+  showComparisons = true,
+  showChart = true,
+  onTitleClick,
+  subTitle,
+  icon,
+  chart,
+  chartData,
+  chartProps: chartPropsInput,
+  chartTestId,
+  contentHeight = 100,
+  numWidth,
+  showAxes = false,
+  smartYAxis,
+  header,
+  metricId,
+  info,
+  showInfoIcon = true,
+  formatNumber = true,
+  valueColor,
+  loading = false,
+  skeleton = false,
+  className,
+  style,
+  styles: subStyles,
+  testId,
+}) => {
+  const config = VARIANT_CONFIG[variant];
+
+  // ── 标题区域 ────────────────────────────────────────────────────────────────
+  const titleNode = (
+    <div
+      className={onTitleClick ? cssStyles.numCardTitleClickable : undefined}
+      style={{
+        color: 'rgba(0, 0, 0, 0.88)',
+        fontSize: config.titleFontSize,
+        fontWeight: 'bold',
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        cursor: onTitleClick ? 'pointer' : undefined,
+        ...subStyles?.title,
+      }}
+      onClick={onTitleClick}
+    >
+      <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+        {icon && (
+          <span style={{ display: 'flex', alignItems: 'center' }}>{icon}</span>
+        )}
+        {metricId ? (
+          <MetricInfoTooltip metricId={metricId}>{title}</MetricInfoTooltip>
+        ) : (
+          title
+        )}
+        {info && showInfoIcon && <InfoIcon message={info} />}
+      </div>
+      {onTitleClick && (
+        <RightOutlined
+          style={{
+            fontSize: 12,
+            color: 'rgba(0,0,0,0.45)',
+            transition: 'color 0.2s',
+          }}
+          className={cssStyles.numCardTitleArrow}
+        />
+      )}
+    </div>
+  );
+
+  // ── 数值区域 ────────────────────────────────────────────────────────────────
+  const valueNode = isNoData(value) ? (
+    <div
+      style={{
+        textAlign: 'center',
+        color: 'rgba(0, 0, 0, 0.3)',
+        fontSize: config.valueFontSize,
+        lineHeight: '1.5',
+        padding: '8px 0',
+      }}
+    >
+      --
+    </div>
+  ) : (
+    <div
+      style={{
+        textAlign: 'center',
+        fontWeight: 600,
+        fontSize: config.valueFontSize,
+        lineHeight: '1.5',
+        color: valueColor,
+        ...subStyles?.value,
+      }}
+    >
+      {prefix}
+      {formatValue(value, formatNumber)}
+      {suffix}
+      {unit && (
+        <span style={{ fontSize: '0.6em', fontWeight: 400, marginLeft: 2 }}>
+          {unit}
+        </span>
+      )}
+    </div>
+  );
+
+  // ── 环比数据 ────────────────────────────────────────────────────────────────
+  const comparisonsNode = showComparisons &&
+    comparisons &&
+    comparisons.length > 0 && (
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 2,
+          marginTop: 4,
+        }}
+      >
+        {comparisons.map((item) => (
+          <div
+            key={item.label}
+            style={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              fontSize: 12,
+              color: item.isUp ? '#00bf5f' : '#e24e49',
+            }}
+          >
+            <span style={{ color: 'rgba(0,0,0,0.65)' }}>{item.label}</span>
+            <span>
+              {item.isUp ? '↑' : '↓'}&nbsp;{item.value}
+            </span>
+          </div>
+        ))}
+      </div>
+    );
+
+  // ── 副标题 ──────────────────────────────────────────────────────────────────
+  const subTitleNode = subTitle && (
+    <div
+      style={{
+        color: 'rgba(0, 0, 0, 0.65)',
+        textAlign: 'center',
+        fontSize: 12,
+        marginTop: 4,
+        ...subStyles?.subTitle,
+      }}
+    >
+      {subTitle}
+    </div>
+  );
+
+  // ── Loading 态 ──────────────────────────────────────────────────────────────
+  const content =
+    loading && skeleton ? (
+      <Skeleton active paragraph={{ rows: 2 }} />
+    ) : (
+      <Spin spinning={loading}>
+        {titleNode}
+        {valueNode}
+        {comparisonsNode}
+        {subTitleNode}
+        {chart && (
+          <div
+            style={{ marginTop: 8, display: 'flex', justifyContent: 'center' }}
+          >
+            {chart}
+          </div>
+        )}
+      </Spin>
+    );
+
+  // ── 容器 ────────────────────────────────────────────────────────────────────
+
+  // ── withChart variant：左数字 + 右折线图 ─────────────────────────────────
+  if (variant === 'withChart' && showChart) {
+    const chartAxisProps = showAxes
+      ? {
+          grid: {
+            top: 8,
+            bottom: 24,
+            left: 4,
+            right: 40,
+            ...chartPropsInput?.grid,
+          },
+          xAxis: {
+            axisLabel: {
+              show: true,
+              fontSize: 9,
+              // 只显示首尾标签
+              interval: (index: number, _value: string) => {
+                const total = (chartData ?? []).length;
+                return index === 0 || index === total - 1;
+              },
+            },
+            ...chartPropsInput?.xAxis,
+          },
+          yAxis: {
+            position: 'right' as const,
+            axisLabel: { show: true, fontSize: 9 },
+            min: (value: { min: number }) => value.min,
+            max: (value: { max: number }) => value.max,
+            splitNumber: 2,
+            ...chartPropsInput?.yAxis,
+          },
+        }
+      : {
+          // 隐藏坐标轴时，grid 留少量空间让线图居中偏上
+          grid: {
+            top: 8,
+            bottom: 8,
+            left: 4,
+            right: 4,
+            ...chartPropsInput?.grid,
+          },
+          xAxis: {
+            show: false,
+            axisLabel: { show: false },
+            axisTick: { show: false },
+            axisLine: { show: false },
+            ...chartPropsInput?.xAxis,
+          },
+          yAxis: {
+            show: false,
+            axisLabel: { show: false },
+            axisTick: { show: false },
+            axisLine: { show: false },
+            splitLine: { show: false },
+            ...chartPropsInput?.yAxis,
+          },
+        };
+
+    return (
+      <Card
+        className={className}
+        style={{ height: height ?? '100%', ...style }}
+        styles={{
+          body: {
+            padding: config.bodyPadding,
+            height: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            ...subStyles?.container,
+          },
+        }}
+        data-testid={testId}
+      >
+        {header && (
+          <div style={{ marginBottom: 8, flexShrink: 0 }}>{header}</div>
+        )}
+        <div
+          style={{
+            display: 'flex',
+            flex: 1,
+            minHeight: 0,
+            alignItems: 'center',
+          }}
+        >
+          {/* 左：数字区 */}
+          <div
+            style={{
+              padding: 0,
+              flexShrink: 0,
+              ...(numWidth ? { width: numWidth } : {}),
+            }}
+          >
+            {titleNode}
+            {valueNode}
+            {comparisonsNode}
+            {subTitleNode}
+          </div>
+          {/* 右：折线图区 */}
+          <div
+            style={{
+              width: 0,
+              flex: 1,
+              height: '100%',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            <div style={{ width: '85%', height: '75%' }}>
+              <LineChart
+                smooth
+                area
+                showGrid={false}
+                showAxis={showAxes}
+                data={chartData ?? []}
+                unit={typeof unit === 'string' ? unit : ''}
+                height="80%"
+                width="80%"
+                smartYAxis={smartYAxis !== undefined ? smartYAxis : true}
+                chartProps={{
+                  ...chartPropsInput,
+                  ...chartAxisProps,
+                  yAxis: {
+                    ...chartAxisProps.yAxis,
+                    ...chartPropsInput?.yAxis,
+                    min: (value: { min: number; max: number }) => {
+                      const range = value.max - value.min;
+                      return Math.floor(value.min - range * 0.8);
+                    },
+                    max: (value: { min: number; max: number }) => {
+                      const range = value.max - value.min;
+                      return Math.ceil(value.max + range * 0.8);
+                    },
+                  },
+                  series: {
+                    areaStyle: {
+                      origin: 'start',
+                    },
+                    ...chartPropsInput?.series,
+                  },
+                }}
+                testId={chartTestId ?? `${testId}-line`}
+              />
+            </div>
+          </div>
+        </div>
+      </Card>
+    );
+  }
+
+  if (config.useCard) {
+    return (
+      <Card
+        className={className}
+        style={{ height: height ?? '100%', ...style }}
+        styles={{
+          body: {
+            padding: config.bodyPadding,
+            height: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            ...subStyles?.container,
+          },
+        }}
+        data-testid={testId}
+      >
+        {content}
+      </Card>
+    );
+  }
+
+  return (
+    <div
+      className={className}
+      style={{ padding: config.bodyPadding, ...subStyles?.container, ...style }}
+      data-testid={testId}
+    >
+      {content}
+    </div>
+  );
+};
+
+export default NumCard;

package/src/lib/application/files/gadmin2-game-angle-demo/web/src/components/canvas/NumLineCard/index.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { NumCard, NumCardProps } from '@/components/canvas/NumCard';
+import type { LineDataSingle } from '@/components/canvas/LineChart';
+
+// ─── Types（保留向后兼容） ────────────────────────────────────────────────────
+
+export interface NumLineCardProps {
+  title: NumCardProps['title'];
+  value?: NumCardProps['value'];
+  unit?: string;
+  prefix?: NumCardProps['prefix'];
+  valueColor?: string;
+  subTitle?: NumCardProps['subTitle'];
+  metricId?: NumCardProps['metricId'];
+  info?: NumCardProps['info'];
+  showInfoIcon?: boolean;
+  formatNumber?: boolean;
+  comparisons?: NumCardProps['comparisons'];
+  chartData?: LineDataSingle;
+  chartProps?: Record<string, any>;
+  chartTestId?: string;
+  smartYAxis?: boolean;
+  showAxes?: boolean;
+  contentHeight?: number;
+  numWidth?: number;
+  loading?: boolean;
+  header?: React.ReactNode;
+  style?: React.CSSProperties;
+  className?: string;
+  testId: string;
+}
+
+// ─── 组件（deprecated — 请使用 NumCard variant="withChart"） ─────────────────
+
+export const NumLineCard: React.FC<NumLineCardProps> = (props) => {
+  return (
+    <NumCard
+      variant="withChart"
+      title={props.title}
+      value={props.value}
+      unit={props.unit}
+      prefix={props.prefix}
+      valueColor={props.valueColor}
+      subTitle={props.subTitle}
+      metricId={props.metricId}
+      info={props.info}
+      showInfoIcon={props.showInfoIcon}
+      formatNumber={props.formatNumber}
+      comparisons={props.comparisons}
+      chartData={props.chartData}
+      chartProps={props.chartProps}
+      chartTestId={props.chartTestId}
+      smartYAxis={props.smartYAxis}
+      showAxes={props.showAxes}
+      contentHeight={props.contentHeight}
+      numWidth={props.numWidth}
+      loading={props.loading}
+      header={props.header}
+      style={props.style}
+      className={props.className}
+      testId={props.testId}
+    />
+  );
+};
+
+export default NumLineCard;