@easy-editor/materials-dashboard-carousel 0.0.2

package/src/component.tsx

@@ -0,0 +1,174 @@
+/**
+ * Carousel Component
+ * 轮播组件
+ */
+
+import { useState, useEffect, useCallback, type CSSProperties, type Ref } from 'react'
+import styles from './component.module.css'
+
+export interface CarouselItem {
+  /** 图片地址 */
+  src: string
+  /** 图片描述 */
+  alt?: string
+  /** 点击链接 */
+  link?: string
+}
+
+export interface CarouselProps {
+  ref?: Ref<HTMLDivElement>
+  /** 轮播项 */
+  items?: CarouselItem[]
+  /** 自动播放 */
+  autoPlay?: boolean
+  /** 自动播放间隔（毫秒） */
+  interval?: number
+  /** 是否显示导航按钮 */
+  showNav?: boolean
+  /** 是否显示指示器 */
+  showIndicators?: boolean
+  /** 是否循环播放 */
+  loop?: boolean
+  /** 外部样式 */
+  style?: CSSProperties
+}
+
+const DEFAULT_ITEMS: CarouselItem[] = [
+  { src: 'https://picsum.photos/800/400?random=1', alt: 'Slide 1' },
+  { src: 'https://picsum.photos/800/400?random=2', alt: 'Slide 2' },
+  { src: 'https://picsum.photos/800/400?random=3', alt: 'Slide 3' },
+]
+
+const ChevronLeft = () => (
+  <svg aria-hidden='true' fill='none' height='24' stroke='currentColor' strokeWidth='2' viewBox='0 0 24 24' width='24'>
+    <title>Previous</title>
+    <path d='M15 18l-6-6 6-6' />
+  </svg>
+)
+
+const ChevronRight = () => (
+  <svg aria-hidden='true' fill='none' height='24' stroke='currentColor' strokeWidth='2' viewBox='0 0 24 24' width='24'>
+    <title>Next</title>
+    <path d='M9 18l6-6-6-6' />
+  </svg>
+)
+
+export const Carousel: React.FC<CarouselProps> = ({
+  ref,
+  items = DEFAULT_ITEMS,
+  autoPlay = true,
+  interval = 3000,
+  showNav = true,
+  showIndicators = true,
+  loop = true,
+  style: externalStyle,
+}) => {
+  const [currentIndex, setCurrentIndex] = useState(0)
+
+  const goToNext = useCallback(() => {
+    setCurrentIndex(prev => {
+      if (prev >= items.length - 1) {
+        return loop ? 0 : prev
+      }
+      return prev + 1
+    })
+  }, [items.length, loop])
+
+  const goToPrev = useCallback(() => {
+    setCurrentIndex(prev => {
+      if (prev <= 0) {
+        return loop ? items.length - 1 : prev
+      }
+      return prev - 1
+    })
+  }, [items.length, loop])
+
+  const goToSlide = useCallback((index: number) => {
+    setCurrentIndex(index)
+  }, [])
+
+  // 自动播放
+  useEffect(() => {
+    if (!autoPlay || items.length <= 1) {
+      return
+    }
+
+    const timer = setInterval(goToNext, interval)
+    return () => clearInterval(timer)
+  }, [autoPlay, interval, goToNext, items.length])
+
+  if (items.length === 0) {
+    return null
+  }
+
+  return (
+    <div className={styles.container} ref={ref} style={externalStyle}>
+      <div className={styles.track} style={{ transform: `translateX(-${currentIndex * 100}%)` }}>
+        {items.map((item, index) => (
+          <div className={styles.slide} key={index}>
+            {item.link ? (
+              <a href={item.link} rel='noopener noreferrer' target='_blank'>
+                <img
+                  alt={item.alt || ''}
+                  className={styles.slideImage}
+                  draggable={false}
+                  height='200'
+                  src={item.src}
+                  width='100%'
+                />
+              </a>
+            ) : (
+              <img
+                alt={item.alt || ''}
+                className={styles.slideImage}
+                draggable={false}
+                height='200'
+                src={item.src}
+                width='100%'
+              />
+            )}
+          </div>
+        ))}
+      </div>
+
+      {/* 导航按钮 */}
+      {showNav && items.length > 1 && (
+        <>
+          <button
+            aria-label='Previous slide'
+            className={`${styles.navButton} ${styles.navButtonPrev}`}
+            onClick={goToPrev}
+            type='button'
+          >
+            <ChevronLeft />
+          </button>
+          <button
+            aria-label='Next slide'
+            className={`${styles.navButton} ${styles.navButtonNext}`}
+            onClick={goToNext}
+            type='button'
+          >
+            <ChevronRight />
+          </button>
+        </>
+      )}
+
+      {/* 指示器 */}
+      {showIndicators && items.length > 1 && (
+        <div className={styles.indicators}>
+          {items.map((_, index) => (
+            <button
+              aria-label={`Go to slide ${index + 1}`}
+              className={`${styles.indicator} ${index === currentIndex ? styles.indicatorActive : ''}`}
+              key={index}
+              onClick={() => goToSlide(index)}
+              type='button'
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default Carousel

package/src/configure.ts

@@ -0,0 +1,194 @@
+/**
+ * Carousel 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: 'items',
+                  title: '轮播项',
+                  setter: 'JsonSetter',
+                },
+              ],
+            },
+            {
+              type: 'group',
+              title: '行为',
+              setter: {
+                componentName: 'CollapseSetter',
+                props: {
+                  icon: false,
+                },
+              },
+              items: [
+                {
+                  name: 'autoPlay',
+                  title: '自动播放',
+                  setter: 'SwitchSetter',
+                  extraProps: {
+                    defaultValue: true,
+                  },
+                },
+                {
+                  name: 'interval',
+                  title: '播放间隔(ms)',
+                  setter: 'NumberSetter',
+                  extraProps: {
+                    defaultValue: 3000,
+                  },
+                },
+                {
+                  name: 'loop',
+                  title: '循环播放',
+                  setter: 'SwitchSetter',
+                  extraProps: {
+                    defaultValue: true,
+                  },
+                },
+              ],
+            },
+            {
+              type: 'group',
+              title: '显示',
+              setter: {
+                componentName: 'CollapseSetter',
+                props: {
+                  icon: false,
+                },
+              },
+              items: [
+                {
+                  name: 'showNav',
+                  title: '显示导航按钮',
+                  setter: 'SwitchSetter',
+                  extraProps: {
+                    defaultValue: true,
+                  },
+                },
+                {
+                  name: 'showIndicators',
+                  title: '显示指示器',
+                  setter: 'SwitchSetter',
+                  extraProps: {
+                    defaultValue: true,
+                  },
+                },
+              ],
+            },
+          ],
+        },
+        {
+          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,
+              },
+            },
+          ],
+        },
+      ],
+    },
+  ],
+  component: {},
+  supports: {},
+  advanced: {},
+}
+
+export default configure

package/src/constants.ts

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

package/src/index.tsx

@@ -0,0 +1,7 @@
+/**
+ * Carousel Entry
+ * 轮播组件入口
+ */
+
+export { Carousel as component } from './component'
+export { default as meta } from './meta'

package/src/meta.ts

@@ -0,0 +1,28 @@
+/**
+ * Carousel 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

package/src/snippets.ts

@@ -0,0 +1,60 @@
+/**
+ * Carousel Snippets
+ * 轮播组件代码片段
+ */
+
+import type { Snippet } from '@easy-editor/core'
+import { COMPONENT_NAME } from './constants'
+
+export const snippets: Snippet[] = [
+  {
+    title: '图片轮播',
+    screenshot: '',
+    schema: {
+      componentName: COMPONENT_NAME,
+      props: {
+        items: [
+          { src: 'https://picsum.photos/800/400?random=1', alt: 'Slide 1' },
+          { src: 'https://picsum.photos/800/400?random=2', alt: 'Slide 2' },
+          { src: 'https://picsum.photos/800/400?random=3', alt: 'Slide 3' },
+        ],
+        autoPlay: true,
+        interval: 3000,
+        showNav: true,
+        showIndicators: true,
+        loop: true,
+      },
+      $dashboard: {
+        rect: {
+          width: 600,
+          height: 300,
+        },
+      },
+    },
+  },
+  {
+    title: '手动轮播',
+    screenshot: '',
+    schema: {
+      componentName: COMPONENT_NAME,
+      props: {
+        items: [
+          { src: 'https://picsum.photos/800/400?random=4', alt: 'Slide 1' },
+          { src: 'https://picsum.photos/800/400?random=5', alt: 'Slide 2' },
+        ],
+        autoPlay: false,
+        showNav: true,
+        showIndicators: true,
+        loop: true,
+      },
+      $dashboard: {
+        rect: {
+          width: 600,
+          height: 300,
+        },
+      },
+    },
+  },
+]
+
+export default snippets

package/src/type.d.ts

@@ -0,0 +1,8 @@
+/**
+ * CSS Modules Type Declarations
+ */
+
+declare module '*.module.css' {
+  const classes: { readonly [key: string]: string }
+  export default classes
+}

package/tsconfig.build.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../../../../tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "strictPropertyInitialization": false,
+    "outDir": "./dist",
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["./src"]
+}

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "extends": "./tsconfig.build.json",
+  "include": ["./src", "./test"]
+}

package/tsconfig.test.json

@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true
+  },
+  "include": ["./src", "./test"]
+}

package/vite.config.ts

@@ -0,0 +1,54 @@
+/**
+ * Vite Configuration for Material Development
+ * 物料开发 Vite 配置
+ */
+
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import { materialDevPlugin } from './.vite/plugins/vite-plugin-material-dev'
+import { externalDeps } from './.vite/plugins/vite-plugin-external-deps'
+
+export default defineConfig({
+  plugins: [
+    react(),
+    // 外部化 React/ReactDOM，使用父应用提供的实例
+    externalDeps({
+      externals: ['react', 'react-dom', 'react/jsx-runtime', '@easy-editor/core'],
+      globals: {
+        react: 'React',
+        'react-dom': 'ReactDOM',
+        'react/jsx-runtime': 'jsxRuntime',
+        '@easy-editor/core': 'EasyEditorCore',
+      },
+    }),
+    materialDevPlugin({
+      entry: '/src/index.tsx',
+    }),
+  ],
+  server: {
+    port: 5001,
+    host: 'localhost',
+    cors: true,
+    hmr: {
+      port: 5001,
+    },
+  },
+  build: {
+    target: 'esnext',
+    rollupOptions: {
+      // 确保生产构建也外部化这些依赖
+      external: ['react', 'react-dom', 'react/jsx-runtime', '@easy-editor/core'],
+      output: {
+        globals: {
+          react: 'React',
+          'react-dom': 'ReactDOM',
+          'react/jsx-runtime': 'jsxRuntime',
+          '@easy-editor/core': 'EasyEditorCore',
+        },
+      },
+    },
+  },
+  resolve: {
+    dedupe: ['react', 'react-dom'],
+  },
+})