@easy-editor/materials-dashboard-scroll-list 0.0.2

package/src/component.tsx

@@ -0,0 +1,189 @@
+/**
+ * Scroll List Component
+ * 滚动列表组件 - 用于展示排行榜、数据列表等
+ */
+
+import type { CSSProperties, Ref } from 'react'
+import { cn } from '@easy-editor/materials-shared'
+import styles from './component.module.css'
+
+export interface ScrollListItem {
+  rank: number
+  name: string
+  value: number
+}
+
+export interface ScrollListProps {
+  ref?: Ref<HTMLDivElement>
+  /** 列表数据 */
+  data?: ScrollListItem[]
+  /** 最大显示条数 */
+  maxItems?: number
+  /** 是否显示排名 */
+  showRank?: boolean
+  /** 是否显示奖牌图标 */
+  showMedal?: boolean
+  /** 是否显示进度条 */
+  progressBarEnable?: boolean
+  /** 是否使用渐变进度条 */
+  progressBarGradient?: boolean
+  /** 进度条颜色 [起始色, 结束色] */
+  progressBarColors?: [string, string]
+  /** 数值格式化 */
+  valueFormat?: 'number' | 'currency' | 'percent'
+  /** 数值前缀 */
+  valuePrefix?: string
+  /** 数值后缀 */
+  valueSuffix?: string
+  /** 名称颜色 */
+  nameColor?: string
+  /** 数值颜色 */
+  valueColor?: string
+  /** 背景颜色 */
+  backgroundColor?: string
+  /** 边框颜色 */
+  borderColor?: string
+  /** 行背景颜色 */
+  itemBackgroundColor?: string
+  /** 行边框颜色 */
+  itemBorderColor?: string
+  /** 是否显示发光效果 */
+  glowEnable?: boolean
+  /** 外部样式 */
+  style?: CSSProperties
+}
+
+const DEFAULT_DATA: ScrollListItem[] = [
+  { rank: 1, name: '北京市', value: 9800 },
+  { rank: 2, name: '上海市', value: 8500 },
+  { rank: 3, name: '广州市', value: 7200 },
+  { rank: 4, name: '深圳市', value: 6100 },
+  { rank: 5, name: '杭州市', value: 4800 },
+]
+
+const MEDAL_EMOJI: Record<number, string> = {
+  1: '🥇',
+  2: '🥈',
+  3: '🥉',
+}
+
+const getRankClass = (rank: number): string => {
+  if (rank === 1) {
+    return styles.rankGold
+  }
+  if (rank === 2) {
+    return styles.rankSilver
+  }
+  if (rank === 3) {
+    return styles.rankBronze
+  }
+  return ''
+}
+
+const formatDisplayValue = (value: number, format: string, prefix: string, suffix: string): string => {
+  let formatted: string
+  switch (format) {
+    case 'currency':
+      formatted = value.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
+      break
+    case 'percent':
+      formatted = `${value}%`
+      break
+    default:
+      formatted = value.toLocaleString()
+  }
+  return `${prefix}${formatted}${suffix}`
+}
+
+export const ScrollList: React.FC<ScrollListProps> = ({
+  ref,
+  data = DEFAULT_DATA,
+  maxItems = 5,
+  showRank = true,
+  showMedal = true,
+  progressBarEnable = true,
+  progressBarGradient = true,
+  progressBarColors = ['#00d4ff', '#9b59b6'],
+  valueFormat = 'number',
+  valuePrefix = '',
+  valueSuffix = '',
+  nameColor = '#e6e6e6',
+  valueColor = '#00d4ff',
+  backgroundColor = 'rgba(10, 10, 26, 0.95)',
+  borderColor = 'rgba(26, 26, 62, 0.8)',
+  itemBackgroundColor = 'rgba(15, 15, 42, 0.9)',
+  itemBorderColor = 'rgba(26, 26, 62, 0.6)',
+  glowEnable = false,
+  style: externalStyle,
+}) => {
+  const displayData = data.slice(0, maxItems)
+  const maxValue = Math.max(...displayData.map(item => item.value), 1)
+
+  const getProgressBarStyle = (value: number): CSSProperties => {
+    const percentage = (value / maxValue) * 100
+    return {
+      width: `${percentage}%`,
+      background: progressBarGradient
+        ? `linear-gradient(90deg, ${progressBarColors[0]}, ${progressBarColors[1]})`
+        : progressBarColors[0],
+      boxShadow: glowEnable ? `0 0 8px ${progressBarColors[0]}60` : undefined,
+    }
+  }
+
+  const containerStyle: CSSProperties = {
+    ...externalStyle,
+    backgroundColor,
+    borderColor,
+  }
+
+  const itemStyle: CSSProperties = {
+    backgroundColor: itemBackgroundColor,
+    borderColor: itemBorderColor,
+  }
+
+  return (
+    <div className={styles.container} ref={ref} style={containerStyle}>
+      <div className={styles.list}>
+        {displayData.map(item => {
+          const isTopThree = item.rank <= 3
+
+          return (
+            <div className={styles.item} key={item.rank} style={itemStyle}>
+              {/* Rank Badge */}
+              {showRank ? (
+                <div
+                  className={cn(
+                    styles.rankBadge,
+                    isTopThree ? styles.rankBadgeTopThree : styles.rankBadgeNormal,
+                    getRankClass(item.rank),
+                  )}
+                >
+                  {showMedal && isTopThree ? MEDAL_EMOJI[item.rank] : item.rank}
+                </div>
+              ) : null}
+
+              {/* Name */}
+              <div className={styles.name} style={{ color: nameColor }}>
+                {item.name}
+              </div>
+
+              {/* Value and Progress */}
+              <div className={styles.valueContainer}>
+                <span className={styles.value} style={{ color: valueColor }}>
+                  {formatDisplayValue(item.value, valueFormat, valuePrefix, valueSuffix)}
+                </span>
+                {progressBarEnable ? (
+                  <div className={styles.progressBar}>
+                    <div className={styles.progressFill} style={getProgressBarStyle(item.value)} />
+                  </div>
+                ) : null}
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+export default ScrollList

package/src/configure.ts

@@ -0,0 +1,439 @@
+/**
+ * Scroll List Configure
+ * 滚动列表组件配置
+ */
+
+import type { Configure } from '@easy-editor/core'
+
+export const configure: Configure = {
+  props: [
+    {
+      type: 'group',
+      title: '属性',
+      setter: 'TabSetter',
+      items: [
+        {
+          type: 'group',
+          key: 'config',
+          title: '配置',
+          setter: {
+            componentName: 'CollapseSetter',
+            props: {
+              icon: false,
+            },
+          },
+          items: [
+            // 基础配置
+            {
+              name: 'id',
+              title: 'ID',
+              setter: 'NodeIdSetter',
+              extraProps: {
+                // @ts-expect-error label is not a valid extra prop
+                label: false,
+              },
+            },
+            {
+              name: 'title',
+              title: '标题',
+              setter: 'StringSetter',
+              extraProps: {
+                getValue(target) {
+                  return target.getExtraPropValue('title')
+                },
+                setValue(target, value) {
+                  target.setExtraPropValue('title', value)
+                },
+              },
+            },
+            {
+              type: 'group',
+              title: '基础属性',
+              setter: {
+                componentName: 'CollapseSetter',
+                props: {
+                  icon: false,
+                },
+              },
+              items: [
+                {
+                  name: 'rect',
+                  title: '位置尺寸',
+                  setter: 'RectSetter',
+                  extraProps: {
+                    getValue(target) {
+                      return target.getExtraPropValue('$dashboard.rect')
+                    },
+                    setValue(target, value) {
+                      target.setExtraPropValue('$dashboard.rect', value)
+                    },
+                  },
+                },
+              ],
+            },
+            // 组件配置
+            {
+              type: 'group',
+              title: '数据',
+              setter: {
+                componentName: 'CollapseSetter',
+                props: {
+                  icon: false,
+                },
+              },
+              items: [
+                {
+                  name: 'data',
+                  title: '列表数据',
+                  setter: 'JsonSetter',
+                },
+                {
+                  name: 'maxItems',
+                  title: '最大显示数',
+                  setter: {
+                    componentName: 'NumberSetter',
+                    props: {
+                      min: 1,
+                      max: 20,
+                    },
+                  },
+                  extraProps: {
+                    defaultValue: 5,
+                  },
+                },
+              ],
+            },
+            {
+              type: 'group',
+              title: '显示',
+              setter: {
+                componentName: 'CollapseSetter',
+                props: {
+                  icon: false,
+                },
+              },
+              items: [
+                {
+                  name: 'showRank',
+                  title: '显示排名',
+                  setter: 'SwitchSetter',
+                  extraProps: {
+                    defaultValue: true,
+                  },
+                },
+                {
+                  name: 'showMedal',
+                  title: '显示奖牌',
+                  setter: 'SwitchSetter',
+                  extraProps: {
+                    defaultValue: true,
+                  },
+                },
+                {
+                  name: 'progressBarEnable',
+                  title: '显示进度条',
+                  setter: 'SwitchSetter',
+                  extraProps: {
+                    defaultValue: true,
+                  },
+                },
+                {
+                  name: 'progressBarGradient',
+                  title: '渐变效果',
+                  setter: 'SwitchSetter',
+                  extraProps: {
+                    defaultValue: true,
+                  },
+                },
+                {
+                  name: 'glowEnable',
+                  title: '发光效果',
+                  setter: 'SwitchSetter',
+                  extraProps: {
+                    defaultValue: false,
+                  },
+                },
+              ],
+            },
+            {
+              type: 'group',
+              title: '数值格式',
+              setter: {
+                componentName: 'CollapseSetter',
+                props: {
+                  icon: false,
+                },
+              },
+              items: [
+                {
+                  name: 'valueFormat',
+                  title: '格式类型',
+                  setter: {
+                    componentName: 'SelectSetter',
+                    props: {
+                      options: [
+                        { label: '数字', value: 'number' },
+                        { label: '货币', value: 'currency' },
+                        { label: '百分比', value: 'percent' },
+                      ],
+                    },
+                  },
+                  extraProps: {
+                    defaultValue: 'number',
+                  },
+                },
+                {
+                  name: 'valuePrefix',
+                  title: '数值前缀',
+                  setter: 'StringSetter',
+                  extraProps: {
+                    defaultValue: '',
+                  },
+                },
+                {
+                  name: 'valueSuffix',
+                  title: '数值后缀',
+                  setter: 'StringSetter',
+                  extraProps: {
+                    defaultValue: '',
+                  },
+                },
+              ],
+            },
+            {
+              type: 'group',
+              title: '颜色',
+              setter: {
+                componentName: 'CollapseSetter',
+                props: {
+                  icon: false,
+                },
+              },
+              items: [
+                {
+                  name: 'progressBarColors',
+                  title: '进度条颜色',
+                  setter: 'ColorSetter',
+                  extraProps: {
+                    defaultValue: ['#00d4ff', '#9b59b6'],
+                  },
+                },
+                {
+                  name: 'nameColor',
+                  title: '名称颜色',
+                  setter: 'ColorSetter',
+                  extraProps: {
+                    defaultValue: '#e6e6e6',
+                  },
+                },
+                {
+                  name: 'valueColor',
+                  title: '数值颜色',
+                  setter: 'ColorSetter',
+                  extraProps: {
+                    defaultValue: '#00d4ff',
+                  },
+                },
+                {
+                  name: 'backgroundColor',
+                  title: '背景颜色',
+                  setter: 'ColorSetter',
+                  extraProps: {
+                    defaultValue: 'rgba(10, 10, 26, 0.95)',
+                  },
+                },
+                {
+                  name: 'borderColor',
+                  title: '边框颜色',
+                  setter: 'ColorSetter',
+                  extraProps: {
+                    defaultValue: 'rgba(26, 26, 62, 0.8)',
+                  },
+                },
+                {
+                  name: 'itemBackgroundColor',
+                  title: '行背景颜色',
+                  setter: 'ColorSetter',
+                  extraProps: {
+                    defaultValue: 'rgba(15, 15, 42, 0.9)',
+                  },
+                },
+                {
+                  name: 'itemBorderColor',
+                  title: '行边框颜色',
+                  setter: 'ColorSetter',
+                  extraProps: {
+                    defaultValue: 'rgba(26, 26, 62, 0.6)',
+                  },
+                },
+              ],
+            },
+          ],
+        },
+        {
+          type: 'group',
+          key: 'data',
+          title: '数据',
+          items: [
+            {
+              name: 'dataBinding',
+              title: '数据绑定',
+              setter: 'DataBindingSetter',
+            },
+          ],
+        },
+        {
+          type: 'group',
+          key: 'advanced',
+          title: '高级',
+          items: [
+            {
+              name: 'condition',
+              title: '显隐控制',
+              setter: 'SwitchSetter',
+              extraProps: {
+                defaultValue: true,
+                supportVariable: true,
+              },
+            },
+            {
+              type: 'group',
+              title: '滚动配置',
+              setter: {
+                componentName: 'CollapseSetter',
+                props: {
+                  icon: false,
+                },
+              },
+              items: [
+                {
+                  name: 'scrollEnable',
+                  title: '启用滚动',
+                  setter: 'SwitchSetter',
+                  extraProps: {
+                    defaultValue: true,
+                  },
+                },
+                {
+                  name: 'scrollDirection',
+                  title: '滚动方向',
+                  setter: {
+                    componentName: 'SegmentedSetter',
+                    props: {
+                      options: [
+                        { label: '向上', value: 'up' },
+                        { label: '向下', value: 'down' },
+                      ],
+                    },
+                  },
+                  extraProps: {
+                    defaultValue: 'up',
+                  },
+                },
+                {
+                  name: 'scrollSpeed',
+                  title: '滚动速度',
+                  setter: {
+                    componentName: 'SliderSetter',
+                    props: {
+                      min: 1,
+                      max: 10,
+                      step: 1,
+                      suffix: 'x',
+                    },
+                  },
+                  extraProps: {
+                    defaultValue: 3,
+                  },
+                },
+                {
+                  name: 'hoverPause',
+                  title: '悬停暂停',
+                  setter: 'SwitchSetter',
+                  extraProps: {
+                    defaultValue: true,
+                  },
+                },
+                {
+                  name: 'scrollInterval',
+                  title: '滚动间隔',
+                  setter: {
+                    componentName: 'SliderSetter',
+                    props: {
+                      min: 1000,
+                      max: 10_000,
+                      step: 500,
+                      suffix: 'ms',
+                    },
+                  },
+                  extraProps: {
+                    defaultValue: 3000,
+                  },
+                },
+              ],
+            },
+            {
+              type: 'group',
+              title: '动画',
+              setter: {
+                componentName: 'CollapseSetter',
+                props: {
+                  icon: false,
+                },
+              },
+              items: [
+                {
+                  name: 'animationEnable',
+                  title: '启用动画',
+                  setter: 'SwitchSetter',
+                  extraProps: {
+                    defaultValue: true,
+                  },
+                },
+                {
+                  name: 'animationDuration',
+                  title: '动画时长',
+                  setter: {
+                    componentName: 'SliderSetter',
+                    props: {
+                      min: 0,
+                      max: 2000,
+                      step: 100,
+                      suffix: 'ms',
+                    },
+                  },
+                  extraProps: {
+                    defaultValue: 500,
+                  },
+                },
+                {
+                  name: 'animationEasing',
+                  title: '缓动函数',
+                  setter: {
+                    componentName: 'SelectSetter',
+                    props: {
+                      options: [
+                        { label: '线性', value: 'linear' },
+                        { label: '缓入', value: 'ease-in' },
+                        { label: '缓出', value: 'ease-out' },
+                        { label: '缓入缓出', value: 'ease-in-out' },
+                      ],
+                    },
+                  },
+                  extraProps: {
+                    defaultValue: 'ease-out',
+                  },
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+  ],
+  component: {},
+  supports: {},
+  advanced: {},
+}
+
+export default configure

package/src/constants.ts

@@ -0,0 +1,18 @@
+/**
+ * 物料常量配置
+ * 统一管理全局变量名等配置，确保 meta.ts 和 rollup.config.js 使用相同的值
+ */
+
+/**
+ * UMD 全局变量基础名称
+ * 用于构建：
+ * - 元数据：${GLOBAL_NAME}Meta (例如: EasyEditorMaterialsRankingListMeta)
+ * - 组件：${GLOBAL_NAME}Component (例如: EasyEditorMaterialsRankingListComponent)
+ * - 完整构建：${GLOBAL_NAME} (例如: EasyEditorMaterialsRankingList)
+ */
+export const COMPONENT_NAME = 'EasyEditorMaterialsScrollList'
+
+/**
+ * 包名
+ */
+export const PACKAGE_NAME = '@easy-editor/materials-dashboard-scroll-list'

package/src/index.tsx

@@ -0,0 +1,7 @@
+/**
+ * Scroll List Entry
+ * 滚动列表组件入口
+ */
+
+export { ScrollList as component } from './component'
+export { default as meta } from './meta'

package/src/meta.ts

@@ -0,0 +1,28 @@
+/**
+ * Scroll List Meta
+ * 滚动列表组件元数据
+ */
+
+import type { ComponentMetadata } from '@easy-editor/core'
+import { MaterialGroup } from '@easy-editor/materials-shared'
+import { COMPONENT_NAME, PACKAGE_NAME } from './constants'
+import configure from './configure'
+import snippets from './snippets'
+import pkg from '../package.json'
+
+export const meta: ComponentMetadata = {
+  componentName: COMPONENT_NAME,
+  title: '滚动列表',
+  group: MaterialGroup.DISPLAY,
+  devMode: 'proCode',
+  npm: {
+    package: PACKAGE_NAME,
+    version: pkg.version,
+    globalName: COMPONENT_NAME,
+    componentName: COMPONENT_NAME,
+  },
+  snippets,
+  configure,
+}
+
+export default meta