@easy-editor/materials-dashboard-bar-chart 0.0.2

package/src/configure.ts

@@ -0,0 +1,365 @@
+/**
+ * Bar Chart Configure
+ * 柱状图组件配置
+ */
+
+import type { Configure } from '@easy-editor/core'
+
+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: 'xField',
+                  title: 'X轴字段',
+                  setter: 'StringSetter',
+                  extraProps: {
+                    defaultValue: 'name',
+                  },
+                },
+                {
+                  name: 'yFields',
+                  title: 'Y轴字段',
+                  setter: {
+                    componentName: 'ArraySetter',
+                    props: {
+                      itemSetter: 'StringSetter',
+                    },
+                  },
+                },
+              ],
+            },
+            {
+              type: 'group',
+              title: '坐标轴',
+              setter: {
+                componentName: 'CollapseSetter',
+                props: {
+                  icon: false,
+                },
+              },
+              items: [
+                {
+                  name: 'xAxisLabel',
+                  title: 'X轴标签',
+                  setter: 'StringSetter',
+                },
+                {
+                  name: 'yAxisLabel',
+                  title: 'Y轴标签',
+                  setter: 'StringSetter',
+                },
+                {
+                  name: 'xAxisVisible',
+                  title: '显示X轴',
+                  setter: 'SwitchSetter',
+                  extraProps: {
+                    defaultValue: true,
+                  },
+                },
+                {
+                  name: 'yAxisVisible',
+                  title: '显示Y轴',
+                  setter: 'SwitchSetter',
+                  extraProps: {
+                    defaultValue: true,
+                  },
+                },
+                {
+                  name: 'axisLabelRotate',
+                  title: '标签旋转',
+                  setter: {
+                    componentName: 'SliderSetter',
+                    props: {
+                      min: -90,
+                      max: 90,
+                      step: 15,
+                      suffix: '°',
+                    },
+                  },
+                  extraProps: {
+                    defaultValue: 0,
+                  },
+                },
+              ],
+            },
+            {
+              type: 'group',
+              title: '数值格式',
+              setter: {
+                componentName: 'CollapseSetter',
+                props: {
+                  icon: false,
+                },
+              },
+              items: [
+                {
+                  name: 'valuePrefix',
+                  title: '前缀',
+                  setter: 'StringSetter',
+                },
+                {
+                  name: 'valueSuffix',
+                  title: '后缀',
+                  setter: 'StringSetter',
+                },
+                {
+                  name: 'valueDecimals',
+                  title: '小数位数',
+                  setter: {
+                    componentName: 'NumberSetter',
+                    props: {
+                      suffix: '位',
+                    },
+                  },
+                  extraProps: {
+                    defaultValue: 0,
+                  },
+                },
+                {
+                  name: 'valueSeparator',
+                  title: '千分位分隔',
+                  setter: 'SwitchSetter',
+                  extraProps: {
+                    defaultValue: false,
+                  },
+                },
+              ],
+            },
+            {
+              type: 'group',
+              title: '样式',
+              setter: {
+                componentName: 'CollapseSetter',
+                props: {
+                  icon: false,
+                },
+              },
+              items: [
+                {
+                  name: 'layout',
+                  title: '布局方向',
+                  setter: {
+                    componentName: 'SegmentedSetter',
+                    props: {
+                      options: [
+                        { label: '垂直', value: 'vertical' },
+                        { label: '水平', value: 'horizontal' },
+                      ],
+                    },
+                  },
+                  extraProps: {
+                    defaultValue: 'vertical',
+                  },
+                },
+                {
+                  name: 'stacked',
+                  title: '堆叠模式',
+                  setter: 'SwitchSetter',
+                  extraProps: {
+                    defaultValue: false,
+                  },
+                },
+                {
+                  name: 'gradient',
+                  title: '渐变填充',
+                  setter: 'SwitchSetter',
+                  extraProps: {
+                    defaultValue: true,
+                  },
+                },
+                {
+                  name: 'borderRadius',
+                  title: '圆角',
+                  setter: {
+                    componentName: 'SliderSetter',
+                    props: {
+                      min: 0,
+                      max: 20,
+                      step: 1,
+                      suffix: 'px',
+                    },
+                  },
+                  extraProps: {
+                    defaultValue: 4,
+                  },
+                },
+                {
+                  name: 'barGap',
+                  title: '柱间距',
+                  setter: {
+                    componentName: 'SliderSetter',
+                    props: {
+                      min: 0,
+                      max: 20,
+                      step: 1,
+                      suffix: 'px',
+                    },
+                  },
+                  extraProps: {
+                    defaultValue: 4,
+                  },
+                },
+                {
+                  name: 'colors',
+                  title: '颜色',
+                  setter: {
+                    componentName: 'ArraySetter',
+                    props: {
+                      itemSetter: 'ColorSetter',
+                    },
+                  },
+                },
+                {
+                  name: 'showGrid',
+                  title: '显示网格',
+                  setter: 'SwitchSetter',
+                  extraProps: {
+                    defaultValue: true,
+                  },
+                },
+                {
+                  name: 'showLegend',
+                  title: '显示图例',
+                  setter: 'SwitchSetter',
+                  extraProps: {
+                    defaultValue: true,
+                  },
+                },
+                {
+                  name: 'legendPosition',
+                  title: '图例位置',
+                  setter: {
+                    componentName: 'SelectSetter',
+                    props: {
+                      options: [
+                        { label: '顶部', value: 'top' },
+                        { label: '底部', value: 'bottom' },
+                        { label: '左侧', value: 'left' },
+                        { label: '右侧', value: 'right' },
+                      ],
+                    },
+                  },
+                  extraProps: {
+                    defaultValue: 'bottom',
+                  },
+                },
+              ],
+            },
+          ],
+        },
+        {
+          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,38 @@
+/**
+ * 物料常量配置
+ * 统一管理全局变量名等配置，确保 meta.ts 和 rollup.config.js 使用相同的值
+ */
+
+/**
+ * UMD 全局变量基础名称
+ */
+export const COMPONENT_NAME = 'EasyEditorMaterialsBarChart'
+
+/**
+ * 包名
+ */
+export const PACKAGE_NAME = '@easy-editor/materials-dashboard-bar-chart'
+
+/**
+ * 默认颜色
+ */
+export const DEFAULT_COLORS = ['#00d4ff', '#00ff88', '#ff6b6b', '#ffd93d', '#6bcbff', '#c56bff']
+
+/**
+ * 数据点类型
+ */
+export interface DataPoint {
+  name: string
+  [key: string]: number | string | undefined
+}
+
+/**
+ * 默认数据
+ */
+export const DEFAULT_DATA: DataPoint[] = [
+  { name: 'A', value1: 120, value2: 80 },
+  { name: 'B', value1: 200, value2: 120 },
+  { name: 'C', value1: 150, value2: 100 },
+  { name: 'D', value1: 280, value2: 180 },
+  { name: 'E', value1: 220, value2: 140 },
+]

package/src/index.tsx

@@ -0,0 +1,7 @@
+/**
+ * BarChart Entry
+ * 柱状图组件入口
+ */
+
+export { default as component } from './component'
+export { default as meta } from './meta'

package/src/meta.ts

@@ -0,0 +1,23 @@
+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'
+
+const meta: ComponentMetadata = {
+  componentName: COMPONENT_NAME,
+  title: '柱状图',
+  group: MaterialGroup.CHART,
+  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,79 @@
+import type { Snippet } from '@easy-editor/core'
+import { COMPONENT_NAME, DEFAULT_DATA } from './constants'
+
+const snippets: Snippet[] = [
+  {
+    title: '柱状图',
+    screenshot: '',
+    schema: {
+      componentName: COMPONENT_NAME,
+      props: {
+        data: DEFAULT_DATA,
+        xField: 'name',
+        yFields: ['value1', 'value2'],
+        layout: 'vertical',
+        stacked: false,
+        gradient: true,
+        borderRadius: 4,
+        showGrid: true,
+        showLegend: true,
+      },
+      $dashboard: {
+        rect: {
+          width: 400,
+          height: 300,
+        },
+      },
+    },
+  },
+  {
+    title: '堆叠柱状图',
+    screenshot: '',
+    schema: {
+      componentName: COMPONENT_NAME,
+      props: {
+        data: DEFAULT_DATA,
+        xField: 'name',
+        yFields: ['value1', 'value2'],
+        layout: 'vertical',
+        stacked: true,
+        gradient: true,
+        borderRadius: 4,
+        showGrid: true,
+        showLegend: true,
+      },
+      $dashboard: {
+        rect: {
+          width: 400,
+          height: 300,
+        },
+      },
+    },
+  },
+  {
+    title: '水平柱状图',
+    screenshot: '',
+    schema: {
+      componentName: COMPONENT_NAME,
+      props: {
+        data: DEFAULT_DATA,
+        xField: 'name',
+        yFields: ['value1'],
+        layout: 'horizontal',
+        stacked: false,
+        gradient: true,
+        borderRadius: 4,
+        showGrid: true,
+        showLegend: false,
+      },
+      $dashboard: {
+        rect: {
+          width: 400,
+          height: 250,
+        },
+      },
+    },
+  },
+]
+
+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.build.json",
+  "compilerOptions": {
+    "noEmit": true
+  },
+  "include": ["./src"]
+}

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'],
+  },
+})