@easy-editor/materials-dashboard-number-flip 0.0.2

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@easy-editor/materials-dashboard-number-flip",
+  "version": "0.0.2",
+  "description": "Number Flip component for EasyEditor dashboard",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "publishConfig": {
+    "access": "public",
+    "jsdelivr": "dist/index.min.js",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "homepage": "https://github.com/Easy-Editor/EasyMaterials",
+  "license": "MIT",
+  "author": "JinSo <kimjinso@qq.com>",
+  "keywords": [
+    "@easy-editor",
+    "easyeditor",
+    "low-code",
+    "dashboard",
+    "number-flip",
+    "component",
+    "react"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Easy-Editor/EasyMaterials",
+    "directory": "packages/dashboard/number-flip"
+  },
+  "bugs": {
+    "url": "https://github.com/Easy-Editor/EasyMaterials/issues"
+  },
+  "peerDependencies": {
+    "@easy-editor/core": "*",
+    "react": "^18 || ^19",
+    "react-dom": "^18 || ^19",
+    "@types/react": "^18 || ^19",
+    "@types/react-dom": "^18 || ^19"
+  },
+  "dependencies": {
+    "@easy-editor/materials-shared": "0.0.0"
+  },
+  "scripts": {
+    "dev": "vite",
+    "dev:debug": "vite --port 5024",
+    "format": "biome format --write .",
+    "lint": "biome check .",
+    "build": "npm-run-all -nl build:*",
+    "build:clean": "rimraf dist/",
+    "build:js": "rollup -c",
+    "build:types": "pnpm types",
+    "types": "npm-run-all -nl types:*",
+    "types:src": "tsc --project tsconfig.build.json",
+    "test-types": "tsc --project tsconfig.test.json"
+  },
+  "module": "dist/index.esm.js",
+  "unpkg": "dist/index.min.js"
+}

package/rollup.config.js

@@ -0,0 +1,222 @@
+import babel from '@rollup/plugin-babel'
+import commonjs from '@rollup/plugin-commonjs'
+import nodeResolve from '@rollup/plugin-node-resolve'
+import json from '@rollup/plugin-json'
+import { terser } from 'rollup-plugin-terser'
+import cleanup from 'rollup-plugin-cleanup'
+import postcss from 'rollup-plugin-postcss'
+import pkg from './package.json' with { type: 'json' }
+
+const GLOBAL_NAME = 'EasyEditorMaterialsStatisticNumber'
+
+// 外部依赖（不打包进组件）
+const external = ['react', 'react-dom', 'react/jsx-runtime', '@easy-editor/core']
+
+const globals = {
+  react: 'React',
+  'react-dom': 'ReactDOM',
+  'react/jsx-runtime': 'jsxRuntime',
+  '@easy-editor/core': 'EasyEditorCore',
+}
+
+const plugins = [
+  nodeResolve({
+    extensions: ['.js', '.ts', '.jsx', '.tsx'],
+  }),
+  commonjs(),
+  json(),
+  postcss({
+    modules: {
+      generateScopedName: '[name]__[local]___[hash:base64:5]',
+    },
+    autoModules: true,
+    minimize: true,
+    inject: true,
+  }),
+  babel({
+    extensions: ['.js', '.ts', '.jsx', '.tsx'],
+    exclude: 'node_modules/**',
+    babelrc: false,
+    babelHelpers: 'bundled',
+    presets: [
+      ['@babel/preset-react', { runtime: 'automatic' }],
+      [
+        '@babel/preset-typescript',
+        {
+          allowDeclareFields: true,
+        },
+      ],
+    ],
+  }),
+  cleanup({
+    comments: ['some', /PURE/],
+    extensions: ['.js', '.ts'],
+  }),
+]
+
+export default [
+  /* ---------------------------------- 元数据构建 --------------------------------- */
+  // 元数据 ESM 构建（用于动态 import）
+  {
+    input: 'src/meta.ts',
+    output: [
+      {
+        file: 'dist/meta.esm.js',
+        format: 'esm',
+        sourcemap: true,
+        banner: `/* @easy-editor/materials-dashboard-statistic-number v${pkg.version} (meta, esm) */`,
+        exports: 'named',
+      },
+    ],
+    plugins,
+    external,
+  },
+  // 元数据 UMD 构建（备用方案）
+  {
+    input: 'src/meta.ts',
+    output: [
+      {
+        file: 'dist/meta.js',
+        format: 'umd',
+        name: `${GLOBAL_NAME}Meta`,
+        globals,
+        sourcemap: true,
+        banner: `/* @easy-editor/materials-dashboard-statistic-number v${pkg.version} (meta) */`,
+        exports: 'named',
+      },
+    ],
+    plugins,
+    external,
+  },
+  // 元数据压缩版本（UMD，备用方案）
+  {
+    input: 'src/meta.ts',
+    output: [
+      {
+        file: 'dist/meta.min.js',
+        format: 'umd',
+        name: `${GLOBAL_NAME}Meta`,
+        globals,
+        sourcemap: true,
+        banner: `/* @easy-editor/materials-dashboard-statistic-number v${pkg.version} (meta, minified) */`,
+        exports: 'named',
+      },
+    ],
+    plugins: [...plugins, terser()],
+    external,
+  },
+
+  /* ---------------------------------- 组件构建 ---------------------------------- */
+  // 组件 ESM 构建（用于动态 import）
+  {
+    input: 'src/component.tsx',
+    output: [
+      {
+        file: 'dist/component.esm.js',
+        format: 'esm',
+        sourcemap: true,
+        banner: `/* @easy-editor/materials-dashboard-statistic-number v${pkg.version} (component, esm) */`,
+        exports: 'named',
+      },
+    ],
+    plugins,
+    external,
+  },
+  // 组件 UMD 构建（备用方案）
+  {
+    input: 'src/component.tsx',
+    output: [
+      {
+        file: 'dist/component.js',
+        format: 'umd',
+        name: `${GLOBAL_NAME}Component`,
+        globals,
+        sourcemap: true,
+        banner: `/* @easy-editor/materials-dashboard-statistic-number v${pkg.version} (component) */`,
+        exports: 'named',
+      },
+    ],
+    plugins,
+    external,
+  },
+  // 组件压缩版本（UMD，备用方案）
+  {
+    input: 'src/component.tsx',
+    output: [
+      {
+        file: 'dist/component.min.js',
+        format: 'umd',
+        name: `${GLOBAL_NAME}Component`,
+        globals,
+        sourcemap: true,
+        banner: `/* @easy-editor/materials-dashboard-statistic-number v${pkg.version} (component, minified) */`,
+        exports: 'named',
+      },
+    ],
+    plugins: [...plugins, terser()],
+    external,
+  },
+
+  /* ---------------------------------- 完整构建 ---------------------------------- */
+  // UMD 构建（用于 CDN 和浏览器）
+  {
+    input: 'src/index.tsx',
+    output: [
+      {
+        file: 'dist/index.js',
+        format: 'umd',
+        name: GLOBAL_NAME,
+        globals,
+        sourcemap: true,
+        banner: `/* @easy-editor/materials-dashboard-statistic-number v${pkg.version} */`,
+        exports: 'named',
+      },
+    ],
+    plugins,
+    external,
+  },
+  // ESM 构建（用于现代打包工具）
+  {
+    input: 'src/index.tsx',
+    output: [
+      {
+        file: 'dist/index.esm.js',
+        format: 'esm',
+        sourcemap: true,
+      },
+    ],
+    plugins,
+    external,
+  },
+  // CJS 构建（用于 Node.js）
+  {
+    input: 'src/index.tsx',
+    output: [
+      {
+        file: 'dist/index.cjs',
+        format: 'cjs',
+        sourcemap: true,
+        exports: 'named',
+      },
+    ],
+    plugins,
+    external,
+  },
+  // 压缩版本（用于生产环境）
+  {
+    input: 'src/index.tsx',
+    output: [
+      {
+        file: 'dist/index.min.js',
+        format: 'umd',
+        name: GLOBAL_NAME,
+        globals,
+        sourcemap: true,
+        banner: `/* @easy-editor/materials-dashboard-statistic-number v${pkg.version} (minified) */`,
+        exports: 'named',
+      },
+    ],
+    plugins: [...plugins, terser()],
+    external,
+  },
+]

package/src/component.module.css

@@ -0,0 +1,56 @@
+/**
+ * Number Flip Component Styles
+ * 数字翻牌组件样式
+ */
+
+.container {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  gap: 8px;
+}
+
+.content {
+  display: flex;
+  align-items: baseline;
+  gap: 4px;
+}
+
+.prefix {
+  font-weight: 600;
+  opacity: 0.8;
+}
+
+.prefixDigital {
+  font-family: "Courier New", Courier, monospace;
+}
+
+.value {
+  font-weight: 700;
+}
+
+.valueDigital {
+  font-family: "Courier New", Courier, monospace;
+  letter-spacing: 0.05em;
+}
+
+.suffix {
+  margin-left: 4px;
+  font-weight: 500;
+  opacity: 0.7;
+}
+
+.suffixDigital {
+  font-family: "Courier New", Courier, monospace;
+}
+
+.trend {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-weight: 500;
+}

package/src/component.tsx

@@ -0,0 +1,179 @@
+/**
+ * Number Flip Component
+ * 数字翻牌组件 - 用于展示 KPI、统计数字等
+ */
+
+import type { CSSProperties, Ref } from 'react'
+import { cn } from '@easy-editor/materials-shared'
+import styles from './component.module.css'
+
+export type TrendType = 'up' | 'down' | 'flat'
+
+export interface NumberFlipProps {
+  ref?: Ref<HTMLDivElement>
+  /** 数值 */
+  value?: number
+  /** 小数位数 */
+  decimals?: number
+  /** 是否显示千分位分隔符 */
+  separator?: boolean
+  /** 前缀 */
+  prefix?: string
+  /** 后缀 */
+  suffix?: string
+  /** 字体大小 */
+  fontSize?: number
+  /** 字体类型 */
+  fontFamily?: 'digital' | 'default'
+  /** 颜色 */
+  color?: string
+  /** 发光强度 (0-2) */
+  glowIntensity?: number
+  /** 是否显示趋势 */
+  trendEnable?: boolean
+  /** 趋势值 */
+  trendValue?: number
+  /** 趋势类型 */
+  trendType?: TrendType
+  /** 趋势后缀 */
+  trendSuffix?: string
+  /** 趋势上升颜色 */
+  trendUpColor?: string
+  /** 趋势下降颜色 */
+  trendDownColor?: string
+  /** 外部样式 */
+  style?: CSSProperties
+}
+
+const formatNumber = (value: number, decimals: number, separator: boolean): string => {
+  const fixed = value.toFixed(decimals)
+  if (!separator) {
+    return fixed
+  }
+
+  const [intPart, decPart] = fixed.split('.')
+  const formattedInt = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+  return decPart ? `${formattedInt}.${decPart}` : formattedInt
+}
+
+const TrendIndicator: React.FC<{
+  type: TrendType
+  value: number
+  suffix: string
+  upColor: string
+  downColor: string
+  size: number
+}> = ({ type, value, suffix, upColor, downColor, size }) => {
+  let color = '#8899aa'
+  if (type === 'up') {
+    color = upColor
+  } else if (type === 'down') {
+    color = downColor
+  }
+
+  return (
+    <div className={styles.trend} style={{ fontSize: size * 0.35 }}>
+      {type !== 'flat' && (
+        <svg
+          aria-label={`Trend ${type}`}
+          fill='none'
+          height={size * 0.3}
+          role='img'
+          style={{
+            transform: type === 'down' ? 'rotate(180deg)' : undefined,
+          }}
+          viewBox='0 0 24 24'
+          width={size * 0.3}
+        >
+          <title>Trend arrow {type}</title>
+          <path d='M12 4L20 14H4L12 4Z' fill={color} />
+        </svg>
+      )}
+      {type === 'flat' && <span style={{ color, marginRight: 4 }}>—</span>}
+      <span style={{ color }}>
+        {value}
+        {suffix}
+      </span>
+    </div>
+  )
+}
+
+export const NumberFlip: React.FC<NumberFlipProps> = ({
+  ref,
+  value = 0,
+  decimals = 0,
+  separator = true,
+  prefix = '',
+  suffix = '',
+  fontSize = 48,
+  fontFamily = 'digital',
+  color = '#00d4ff',
+  glowIntensity = 0.5,
+  trendEnable = false,
+  trendValue = 0,
+  trendType = 'up',
+  trendSuffix = '%',
+  trendUpColor = '#52c41a',
+  trendDownColor = '#ff4d4f',
+  style: externalStyle,
+}) => {
+  const isDigital = fontFamily === 'digital'
+  const formattedValue = formatNumber(value, decimals, separator)
+
+  // 计算发光效果的 text-shadow
+  const glowShadow =
+    glowIntensity > 0
+      ? `0 0 ${10 * glowIntensity}px ${color}, 0 0 ${20 * glowIntensity}px ${color}40, 0 0 ${30 * glowIntensity}px ${color}20`
+      : 'none'
+
+  return (
+    <div className={styles.container} ref={ref} style={externalStyle}>
+      <div className={styles.content}>
+        {prefix ? (
+          <span
+            className={cn(styles.prefix, isDigital && styles.prefixDigital)}
+            style={{
+              fontSize: `${fontSize * 0.5}px`,
+              color,
+            }}
+          >
+            {prefix}
+          </span>
+        ) : null}
+        <span
+          className={cn(styles.value, isDigital && styles.valueDigital)}
+          style={{
+            fontSize: `${fontSize}px`,
+            color,
+            textShadow: glowShadow,
+          }}
+        >
+          {formattedValue}
+        </span>
+        {suffix ? (
+          <span
+            className={cn(styles.suffix, isDigital && styles.suffixDigital)}
+            style={{
+              fontSize: `${fontSize * 0.4}px`,
+              color,
+            }}
+          >
+            {suffix}
+          </span>
+        ) : null}
+      </div>
+      {trendEnable ? (
+        <TrendIndicator
+          downColor={trendDownColor}
+          size={fontSize}
+          suffix={trendSuffix}
+          type={trendType}
+          upColor={trendUpColor}
+          value={trendValue}
+        />
+      ) : null}
+    </div>
+  )
+}
+
+export default NumberFlip