@agions/taroviz 1.11.1 → 2.0.3

package/src/editor/ThemeEditor.tsx

@@ -2,9 +2,13 @@
  * TaroViz 主题编辑器组件
  * 提供可视化的主题编辑功能
  */
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 
-import { ThemeOptions, getRegisteredThemes, registerTheme, switchTheme } from '../themes';
+import type { ThemeOptions } from '../themes';
+import { useThemeEditorState } from './hooks/useThemeEditorState';
+import ThemeSelector from './components/ThemeSelector';
+import ThemeColorEditor from './components/ThemeColorEditor';
+import ThemeBasicSettings from './components/ThemeBasicSettings';
 
 /**
  * 主题编辑器属性
@@ -52,126 +56,29 @@ const ThemeEditor: React.FC<ThemeEditorProps> = ({
   style = {},
   className = '',
 }) => {
-  // 获取已注册的主题列表
-  const themes = getRegisteredThemes();
-
-  // 状态管理
-  const [currentTheme, setCurrentTheme] = useState<ThemeOptions>(themes[0] || ({} as ThemeOptions));
-  const [newThemeName, setNewThemeName] = useState<string>('');
-  const [isEditing, setIsEditing] = useState<boolean>(false);
-
-  // 主题颜色状态
-  const [colors, setColors] = useState<string[]>(currentTheme.colors || []);
-  const [backgroundColor, setBackgroundColor] = useState<string>(
-    currentTheme.backgroundColor || '#ffffff'
-  );
-  const [textColor, setTextColor] = useState<string>(currentTheme.textColor || '#333333');
-  const [darkMode, setDarkMode] = useState<boolean>(currentTheme.darkMode || false);
-
-  // 当选中主题变化时，更新当前主题
-  useEffect(() => {
-    if (selectedTheme) {
-      const theme = themes.find((t) => t.name === selectedTheme);
-      if (theme) {
-        setCurrentTheme(theme);
-        setColors(theme.colors || []);
-        setBackgroundColor(theme.backgroundColor || '#ffffff');
-        setTextColor(theme.textColor || '#333333');
-        setDarkMode(theme.darkMode || false);
-      }
-    }
-  }, [selectedTheme, themes]);
-
-  // 当当前主题变化时，更新颜色等状态
-  useEffect(() => {
-    setColors(currentTheme.colors || []);
-    setBackgroundColor(currentTheme.backgroundColor || '#ffffff');
-    setTextColor(currentTheme.textColor || '#333333');
-    setDarkMode(currentTheme.darkMode || false);
-  }, [currentTheme]);
-
-  // 处理主题选择
-  const handleThemeSelect = (theme: ThemeOptions) => {
-    setCurrentTheme(theme);
-    if (onThemeChange) {
-      onThemeChange(theme);
-    }
-    switchTheme(theme);
-  };
-
-  // 处理颜色变化
-  const handleColorChange = (index: number, color: string) => {
-    const newColors = [...colors];
-    newColors[index] = color;
-    updateCurrentTheme({ colors: newColors });
-  };
-
-  // 处理背景色变化
-  const handleBackgroundColorChange = (color: string) => {
-    updateCurrentTheme({ backgroundColor: color });
-  };
-
-  // 处理文本颜色变化
-  const handleTextColorChange = (color: string) => {
-    updateCurrentTheme({ textColor: color });
-  };
-
-  // 处理深色模式切换
-  const handleDarkModeToggle = () => {
-    updateCurrentTheme({ darkMode: !darkMode });
-  };
-
-  // 更新当前主题
-  const updateCurrentTheme = (updates: Partial<ThemeOptions>) => {
-    const updatedTheme = { ...currentTheme, ...updates };
-    setCurrentTheme(updatedTheme);
-    if (onThemeChange) {
-      onThemeChange(updatedTheme);
-    }
-    switchTheme(updatedTheme);
-  };
-
-  // 保存主题
+  const {
+    currentTheme,
+    registeredThemes,
+    colors,
+    backgroundColor,
+    textColor,
+    darkMode,
+    isEditing,
+    newThemeName,
+    setCurrentTheme,
+    updateTheme,
+    handleColorChange,
+    handleAddColor,
+    handleRemoveColor,
+    handleStartEdit,
+    setNewThemeName,
+    saveTheme,
+  } = useThemeEditorState({ selectedTheme, onThemeChange });
+
+  // 处理保存主题
   const handleSaveTheme = () => {
-    const themeToSave = {
-      ...currentTheme,
-      colors,
-      backgroundColor,
-      textColor,
-      darkMode,
-    };
-
-    if (isEditing && newThemeName) {
-      // 保存为新主题
-      registerTheme(newThemeName, themeToSave);
-      setIsEditing(false);
-      setNewThemeName('');
-    } else {
-      // 更新现有主题
-      registerTheme(currentTheme.name || 'custom', themeToSave);
-    }
-
-    if (onThemeSave) {
-      onThemeSave(themeToSave);
-    }
-  };
-
-  // 添加新颜色
-  const handleAddColor = () => {
-    setColors([...colors, '#000000']);
-  };
-
-  // 删除颜色
-  const handleRemoveColor = (index: number) => {
-    const newColors = colors.filter((_, i) => i !== index);
-    setColors(newColors);
-    updateCurrentTheme({ colors: newColors });
-  };
-
-  // 开始编辑新主题
-  const handleStartEdit = () => {
-    setIsEditing(true);
-    setNewThemeName('');
+    const themeToSave = saveTheme();
+    onThemeSave?.(themeToSave);
   };
 
   return (
@@ -188,45 +95,14 @@ const ThemeEditor: React.FC<ThemeEditorProps> = ({
     >
       <h3>主题编辑器</h3>
 
-      {/* 主题列表 */}
-      <div style={{ marginBottom: '20px' }}>
-        <h4>选择主题</h4>
-        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '10px', marginTop: '10px' }}>
-          {themes.map((theme) => (
-            <button
-              key={theme.name}
-              onClick={() => handleThemeSelect(theme)}
-              disabled={disabled}
-              style={{
-                padding: '8px 16px',
-                border: `2px solid ${currentTheme.name === theme.name ? '#1890ff' : '#e0e0e0'}`,
-                borderRadius: '4px',
-                backgroundColor: currentTheme.name === theme.name ? '#1890ff' : '#ffffff',
-                color: currentTheme.name === theme.name ? '#ffffff' : '#333333',
-                cursor: disabled ? 'not-allowed' : 'pointer',
-                opacity: disabled ? 0.6 : 1,
-              }}
-            >
-              {theme.name}
-            </button>
-          ))}
-          <button
-            onClick={handleStartEdit}
-            disabled={disabled}
-            style={{
-              padding: '8px 16px',
-              border: '2px dashed #e0e0e0',
-              borderRadius: '4px',
-              backgroundColor: '#f5f5f5',
-              color: '#333333',
-              cursor: disabled ? 'not-allowed' : 'pointer',
-              opacity: disabled ? 0.6 : 1,
-            }}
-          >
-            + 新主题
-          </button>
-        </div>
-      </div>
+      {/* 主题选择 */}
+      <ThemeSelector
+        themes={registeredThemes}
+        currentTheme={currentTheme}
+        disabled={disabled}
+        onSelect={setCurrentTheme}
+        onCreateNew={handleStartEdit}
+      />
 
       {/* 新主题编辑 */}
       {isEditing && (
@@ -259,167 +135,25 @@ const ThemeEditor: React.FC<ThemeEditorProps> = ({
         </div>
       )}
 
-      {/* 主题颜色配置 */}
-      <div style={{ marginBottom: '20px' }}>
-        <div
-          style={{
-            display: 'flex',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            marginBottom: '10px',
-          }}
-        >
-          <h4>主题颜色</h4>
-          <button
-            onClick={handleAddColor}
-            disabled={disabled}
-            style={{
-              padding: '4px 8px',
-              border: '1px solid #e0e0e0',
-              borderRadius: '4px',
-              backgroundColor: '#ffffff',
-              color: '#333333',
-              cursor: disabled ? 'not-allowed' : 'pointer',
-              opacity: disabled ? 0.6 : 1,
-            }}
-          >
-            + 添加颜色
-          </button>
-        </div>
-        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '10px' }}>
-          {colors.map((color, index) => (
-            <div key={index} style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
-              <input
-                type="color"
-                value={color}
-                onChange={(e) => handleColorChange(index, e.target.value)}
-                disabled={disabled}
-                style={{
-                  width: '50px',
-                  height: '30px',
-                  border: 'none',
-                  cursor: disabled ? 'not-allowed' : 'pointer',
-                  opacity: disabled ? 0.6 : 1,
-                }}
-              />
-              <input
-                type="text"
-                value={color}
-                onChange={(e) => handleColorChange(index, e.target.value)}
-                disabled={disabled}
-                style={{
-                  width: '80px',
-                  padding: '4px',
-                  border: '1px solid #e0e0e0',
-                  borderRadius: '4px',
-                  opacity: disabled ? 0.6 : 1,
-                }}
-              />
-              <button
-                onClick={() => handleRemoveColor(index)}
-                disabled={disabled || colors.length <= 1}
-                style={{
-                  padding: '4px 8px',
-                  border: '1px solid #ff4d4f',
-                  borderRadius: '4px',
-                  backgroundColor: '#ffffff',
-                  color: '#ff4d4f',
-                  cursor: disabled || colors.length <= 1 ? 'not-allowed' : 'pointer',
-                  opacity: disabled || colors.length <= 1 ? 0.6 : 1,
-                }}
-              >
-                删除
-              </button>
-            </div>
-          ))}
-        </div>
-      </div>
-
-      {/* 主题基础配置 */}
-      <div style={{ marginBottom: '20px' }}>
-        <h4>基础配置</h4>
-
-        {/* 背景色 */}
-        <div style={{ marginBottom: '10px' }}>
-          <label style={{ display: 'block', marginBottom: '5px' }}>背景色:</label>
-          <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
-            <input
-              type="color"
-              value={backgroundColor}
-              onChange={(e) => handleBackgroundColorChange(e.target.value)}
-              disabled={disabled}
-              style={{
-                width: '50px',
-                height: '30px',
-                border: 'none',
-                cursor: disabled ? 'not-allowed' : 'pointer',
-                opacity: disabled ? 0.6 : 1,
-              }}
-            />
-            <input
-              type="text"
-              value={backgroundColor}
-              onChange={(e) => handleBackgroundColorChange(e.target.value)}
-              disabled={disabled}
-              style={{
-                width: '120px',
-                padding: '4px',
-                border: '1px solid #e0e0e0',
-                borderRadius: '4px',
-                opacity: disabled ? 0.6 : 1,
-              }}
-            />
-          </div>
-        </div>
-
-        {/* 文本颜色 */}
-        <div style={{ marginBottom: '10px' }}>
-          <label style={{ display: 'block', marginBottom: '5px' }}>文本颜色:</label>
-          <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
-            <input
-              type="color"
-              value={textColor}
-              onChange={(e) => handleTextColorChange(e.target.value)}
-              disabled={disabled}
-              style={{
-                width: '50px',
-                height: '30px',
-                border: 'none',
-                cursor: disabled ? 'not-allowed' : 'pointer',
-                opacity: disabled ? 0.6 : 1,
-              }}
-            />
-            <input
-              type="text"
-              value={textColor}
-              onChange={(e) => handleTextColorChange(e.target.value)}
-              disabled={disabled}
-              style={{
-                width: '120px',
-                padding: '4px',
-                border: '1px solid #e0e0e0',
-                borderRadius: '4px',
-                opacity: disabled ? 0.6 : 1,
-              }}
-            />
-          </div>
-        </div>
-
-        {/* 深色模式 */}
-        <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
-          <label>深色模式:</label>
-          <input
-            type="checkbox"
-            checked={darkMode}
-            onChange={handleDarkModeToggle}
-            disabled={disabled}
-            style={{
-              cursor: disabled ? 'not-allowed' : 'pointer',
-              opacity: disabled ? 0.6 : 1,
-            }}
-          />
-        </div>
-      </div>
+      {/* 颜色配置 */}
+      <ThemeColorEditor
+        colors={colors}
+        disabled={disabled}
+        onColorChange={handleColorChange}
+        onAddColor={handleAddColor}
+        onRemoveColor={handleRemoveColor}
+      />
+
+      {/* 基础配置 */}
+      <ThemeBasicSettings
+        backgroundColor={backgroundColor}
+        textColor={textColor}
+        darkMode={darkMode}
+        disabled={disabled}
+        onBackgroundColorChange={(color) => updateTheme({ backgroundColor: color })}
+        onTextColorChange={(color) => updateTheme({ textColor: color })}
+        onDarkModeChange={(mode) => updateTheme({ darkMode: mode })}
+      />
 
       {/* 保存按钮 */}
       <button

package/src/editor/components/ThemeBasicSettings.tsx

@@ -0,0 +1,113 @@
+/**
+ * 主题基础设置组件
+ * 包含背景色、文本颜色和深色模式开关
+ */
+import React from 'react';
+
+export interface ThemeBasicSettingsProps {
+  /** 背景色 */
+  backgroundColor: string;
+  /** 文本颜色 */
+  textColor: string;
+  /** 深色模式 */
+  darkMode: boolean;
+  /** 是否禁用 */
+  disabled?: boolean;
+  /** 背景色变化回调 */
+  onBackgroundColorChange: (color: string) => void;
+  /** 文本颜色变化回调 */
+  onTextColorChange: (color: string) => void;
+  /** 深色模式变化回调 */
+  onDarkModeChange: (darkMode: boolean) => void;
+}
+
+const ThemeBasicSettings: React.FC<ThemeBasicSettingsProps> = ({
+  backgroundColor,
+  textColor,
+  darkMode,
+  disabled = false,
+  onBackgroundColorChange,
+  onTextColorChange,
+  onDarkModeChange,
+}) => {
+  const colorInputStyle: React.CSSProperties = {
+    width: '50px',
+    height: '30px',
+    border: 'none',
+    cursor: disabled ? 'not-allowed' : 'pointer',
+    opacity: disabled ? 0.6 : 1,
+  };
+
+  const textInputStyle: React.CSSProperties = {
+    width: '120px',
+    padding: '4px',
+    border: '1px solid #e0e0e0',
+    borderRadius: '4px',
+    opacity: disabled ? 0.6 : 1,
+  };
+
+  return (
+    <div style={{ marginBottom: '20px' }}>
+      <h4>基础配置</h4>
+
+      {/* 背景色 */}
+      <div style={{ marginBottom: '10px' }}>
+        <label style={{ display: 'block', marginBottom: '5px' }}>背景色:</label>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+          <input
+            type="color"
+            value={backgroundColor}
+            onChange={(e) => onBackgroundColorChange(e.target.value)}
+            disabled={disabled}
+            style={colorInputStyle}
+          />
+          <input
+            type="text"
+            value={backgroundColor}
+            onChange={(e) => onBackgroundColorChange(e.target.value)}
+            disabled={disabled}
+            style={textInputStyle}
+          />
+        </div>
+      </div>
+
+      {/* 文本颜色 */}
+      <div style={{ marginBottom: '10px' }}>
+        <label style={{ display: 'block', marginBottom: '5px' }}>文本颜色:</label>
+        <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+          <input
+            type="color"
+            value={textColor}
+            onChange={(e) => onTextColorChange(e.target.value)}
+            disabled={disabled}
+            style={colorInputStyle}
+          />
+          <input
+            type="text"
+            value={textColor}
+            onChange={(e) => onTextColorChange(e.target.value)}
+            disabled={disabled}
+            style={textInputStyle}
+          />
+        </div>
+      </div>
+
+      {/* 深色模式 */}
+      <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+        <label>深色模式:</label>
+        <input
+          type="checkbox"
+          checked={darkMode}
+          onChange={(e) => onDarkModeChange(e.target.checked)}
+          disabled={disabled}
+          style={{
+            cursor: disabled ? 'not-allowed' : 'pointer',
+            opacity: disabled ? 0.6 : 1,
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default ThemeBasicSettings;

package/src/editor/components/ThemeColorEditor.tsx

@@ -0,0 +1,105 @@
+/**
+ * 主题颜色编辑器组件
+ * 管理主题颜色列表的增加、删除和修改
+ */
+import React from 'react';
+
+export interface ThemeColorEditorProps {
+  /** 颜色列表 */
+  colors: string[];
+  /** 是否禁用 */
+  disabled?: boolean;
+  /** 颜色变化回调 */
+  onColorChange: (index: number, color: string) => void;
+  /** 添加颜色回调 */
+  onAddColor: () => void;
+  /** 删除颜色回调 */
+  onRemoveColor: (index: number) => void;
+}
+
+const ThemeColorEditor: React.FC<ThemeColorEditorProps> = ({
+  colors,
+  disabled = false,
+  onColorChange,
+  onAddColor,
+  onRemoveColor,
+}) => {
+  return (
+    <div style={{ marginBottom: '20px' }}>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          marginBottom: '10px',
+        }}
+      >
+        <h4>主题颜色</h4>
+        <button
+          onClick={onAddColor}
+          disabled={disabled}
+          style={{
+            padding: '4px 8px',
+            border: '1px solid #e0e0e0',
+            borderRadius: '4px',
+            backgroundColor: '#ffffff',
+            color: '#333333',
+            cursor: disabled ? 'not-allowed' : 'pointer',
+            opacity: disabled ? 0.6 : 1,
+          }}
+        >
+          + 添加颜色
+        </button>
+      </div>
+      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '10px' }}>
+        {colors.map((color, index) => (
+          <div key={index} style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
+            <input
+              type="color"
+              value={color}
+              onChange={(e) => onColorChange(index, e.target.value)}
+              disabled={disabled}
+              style={{
+                width: '50px',
+                height: '30px',
+                border: 'none',
+                cursor: disabled ? 'not-allowed' : 'pointer',
+                opacity: disabled ? 0.6 : 1,
+              }}
+            />
+            <input
+              type="text"
+              value={color}
+              onChange={(e) => onColorChange(index, e.target.value)}
+              disabled={disabled}
+              style={{
+                width: '80px',
+                padding: '4px',
+                border: '1px solid #e0e0e0',
+                borderRadius: '4px',
+                opacity: disabled ? 0.6 : 1,
+              }}
+            />
+            <button
+              onClick={() => onRemoveColor(index)}
+              disabled={disabled || colors.length <= 1}
+              style={{
+                padding: '4px 8px',
+                border: '1px solid #ff4d4f',
+                borderRadius: '4px',
+                backgroundColor: '#ffffff',
+                color: '#ff4d4f',
+                cursor: disabled || colors.length <= 1 ? 'not-allowed' : 'pointer',
+                opacity: disabled || colors.length <= 1 ? 0.6 : 1,
+              }}
+            >
+              删除
+            </button>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default ThemeColorEditor;

package/src/editor/components/ThemeSelector.tsx

@@ -0,0 +1,70 @@
+/**
+ * 主题选择器组件
+ * 显示已注册的主题列表和新建主题按钮
+ */
+import React from 'react';
+import type { ThemeOptions } from '../../themes';
+
+export interface ThemeSelectorProps {
+  /** 已注册的主题列表 */
+  themes: ThemeOptions[];
+  /** 当前选中的主题 */
+  currentTheme: ThemeOptions;
+  /** 是否禁用 */
+  disabled?: boolean;
+  /** 主题选择回调 */
+  onSelect: (theme: ThemeOptions) => void;
+  /** 新建主题回调 */
+  onCreateNew: () => void;
+}
+
+const ThemeSelector: React.FC<ThemeSelectorProps> = ({
+  themes,
+  currentTheme,
+  disabled = false,
+  onSelect,
+  onCreateNew,
+}) => {
+  return (
+    <div style={{ marginBottom: '20px' }}>
+      <h4>选择主题</h4>
+      <div style={{ display: 'flex', flexWrap: 'wrap', gap: '10px', marginTop: '10px' }}>
+        {themes.map((theme) => (
+          <button
+            key={theme.name}
+            onClick={() => onSelect(theme)}
+            disabled={disabled}
+            style={{
+              padding: '8px 16px',
+              border: `2px solid ${currentTheme.name === theme.name ? '#1890ff' : '#e0e0e0'}`,
+              borderRadius: '4px',
+              backgroundColor: currentTheme.name === theme.name ? '#1890ff' : '#ffffff',
+              color: currentTheme.name === theme.name ? '#ffffff' : '#333333',
+              cursor: disabled ? 'not-allowed' : 'pointer',
+              opacity: disabled ? 0.6 : 1,
+            }}
+          >
+            {theme.name}
+          </button>
+        ))}
+        <button
+          onClick={onCreateNew}
+          disabled={disabled}
+          style={{
+            padding: '8px 16px',
+            border: '2px dashed #e0e0e0',
+            borderRadius: '4px',
+            backgroundColor: '#fafafa',
+            color: '#999999',
+            cursor: disabled ? 'not-allowed' : 'pointer',
+            opacity: disabled ? 0.6 : 1,
+          }}
+        >
+          + 新建主题
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default ThemeSelector;