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

package/dist/src/component.d.ts

@@ -0,0 +1,51 @@
+/**
+ * Scroll List Component
+ * 滚动列表组件 - 用于展示排行榜、数据列表等
+ */
+import type { CSSProperties, Ref } from 'react';
+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;
+}
+export declare const ScrollList: React.FC<ScrollListProps>;
+export default ScrollList;

package/dist/src/configure.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Scroll List Configure
+ * 滚动列表组件配置
+ */
+import type { Configure } from '@easy-editor/core';
+export declare const configure: Configure;
+export default configure;

package/dist/src/constants.d.ts

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

package/dist/src/index.d.ts

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

package/dist/src/meta.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Scroll List Meta
+ * 滚动列表组件元数据
+ */
+import type { ComponentMetadata } from '@easy-editor/core';
+export declare const meta: ComponentMetadata;
+export default meta;

package/dist/src/snippets.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Scroll List Snippets
+ * 滚动列表组件代码片段
+ */
+import type { Snippet } from '@easy-editor/core';
+export declare const snippets: Snippet[];
+export default snippets;

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@easy-editor/materials-dashboard-scroll-list",
+  "version": "0.0.2",
+  "description": "Scroll List 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",
+    "scroll-list",
+    "component",
+    "react"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Easy-Editor/EasyMaterials",
+    "directory": "packages/dashboard/scroll-list"
+  },
+  "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 5023",
+    "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 = 'EasyEditorMaterialsRankingList'
+
+// 外部依赖（不打包进组件）
+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-ranking-list 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-ranking-list 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-ranking-list 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-ranking-list 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-ranking-list 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-ranking-list 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-ranking-list 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-ranking-list v${pkg.version} (minified) */`,
+        exports: 'named',
+      },
+    ],
+    plugins: [...plugins, terser()],
+    external,
+  },
+]

package/src/component.module.css

@@ -0,0 +1,184 @@
+/**
+ * Scroll List Component Styles
+ * 滚动列表组件样式
+ */
+
+.container {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  padding: 16px;
+  background: rgba(10, 10, 26, 0.95);
+  border: 1px solid rgba(26, 26, 62, 0.8);
+  border-radius: 12px;
+  overflow: hidden;
+  backdrop-filter: blur(10px);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  height: 100%;
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 12px 16px;
+  background: rgba(15, 15, 42, 0.9);
+  border: 1px solid rgba(26, 26, 62, 0.6);
+  border-radius: 8px;
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.item::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 3px;
+  background: linear-gradient(
+    180deg,
+    transparent,
+    rgba(0, 212, 255, 0.5),
+    transparent
+  );
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+.item:hover {
+  background: rgba(20, 20, 52, 0.95);
+  border-color: rgba(0, 212, 255, 0.3);
+  transform: translateX(4px);
+}
+
+.item:hover::before {
+  opacity: 1;
+}
+
+.rankBadge {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 32px;
+  height: 32px;
+  border-radius: 6px;
+  font-weight: 700;
+  transition: transform 0.3s ease;
+}
+
+.item:hover .rankBadge {
+  transform: scale(1.1);
+}
+
+.rankBadgeTopThree {
+  font-size: 20px;
+  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
+}
+
+.rankBadgeNormal {
+  font-size: 14px;
+  background: rgba(26, 26, 62, 0.8);
+  color: #8892b0;
+  border: 1px solid rgba(136, 146, 176, 0.2);
+}
+
+.rankGold {
+  color: #ffd700;
+  filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.6));
+}
+
+.rankSilver {
+  color: #e8e8e8;
+  filter: drop-shadow(0 0 6px rgba(192, 192, 192, 0.6));
+}
+
+.rankBronze {
+  color: #ff9966;
+  filter: drop-shadow(0 0 6px rgba(205, 127, 50, 0.6));
+}
+
+.name {
+  flex: 1;
+  font-size: 15px;
+  font-weight: 500;
+  color: #e6e6e6;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  transition: color 0.3s ease;
+}
+
+.item:hover .name {
+  color: #ffffff;
+}
+
+.valueContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 6px;
+  min-width: 120px;
+}
+
+.value {
+  font-size: 15px;
+  font-weight: 700;
+  font-family: "Courier New", Courier, monospace;
+  color: #00d4ff;
+  text-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
+  transition: all 0.3s ease;
+}
+
+.item:hover .value {
+  transform: scale(1.05);
+  text-shadow: 0 0 15px rgba(0, 212, 255, 0.5);
+}
+
+.progressBar {
+  width: 100%;
+  height: 5px;
+  background: rgba(26, 26, 62, 0.8);
+  border-radius: 3px;
+  overflow: hidden;
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
+}
+
+.progressFill {
+  height: 100%;
+  border-radius: 3px;
+  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+}
+
+.progressFill::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(255, 255, 255, 0.2),
+    transparent
+  );
+  animation: shimmer 2s infinite;
+}
+
+@keyframes shimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}