feat(config): enhance development configuration and update platform support

- Added `devServer` configuration for H5 platform to allow file system access. - Updated platform type to include 'h5' in the factory. - Adjusted icon paths in app configuration for consistency. - Cleaned up code formatting and removed deprecated Redux store documentation.
2025-09-26 15:07:00 +08:00 · 2025-09-26 15:07:00 +08:00 · 9d890478d8
parent bc33c158bb
commit 9d890478d8
6 changed files with 65 additions and 228 deletions
--- a/config/dev.ts
+++ b/config/dev.ts
@ -3,5 +3,11 @@ import type { UserConfigExport } from "@tarojs/cli"
 export default {

  mini: {},
-  h5: {}
+  h5: {
+    devServer: {
+      fs: {
+        allow: ['..']
+      }
+    }
+  }
 } satisfies UserConfigExport<'vite'>
--- a/config/index.ts
+++ b/config/index.ts
@ -1,11 +1,11 @@
-import { defineConfig, type UserConfigExport } from '@tarojs/cli'
-import { UnifiedWebpackPluginV5 } from 'weapp-tailwindcss/webpack'
+import { defineConfig, type UserConfigExport } from '@tarojs/cli';
+import { UnifiedWebpackPluginV5 } from 'weapp-tailwindcss/webpack';

-import devConfig from './dev'
-import prodConfig from './prod'
+import devConfig from './dev';
+import prodConfig from './prod';

 // https://taro-docs.jd.com/docs/next/config#defineconfig-辅助函数
-export default defineConfig<'vite'>(async (merge) => {
+export default defineConfig<'vite'>(async merge => {
  // 不同平台的 appId 配置
  const appIds = {
    weapp: process.env.TARO_APP_ID_WEAPP || 'your-weapp-appid',
@ -13,8 +13,8 @@ export default defineConfig<'vite'>(async (merge) => {
    alipay: process.env.TARO_APP_ID_ALIPAY || 'your-alipay-appid',
    swan: process.env.TARO_APP_ID_SWAN || 'your-swan-appid',
    qq: process.env.TARO_APP_ID_QQ || 'your-qq-appid',
-    jd: process.env.TARO_APP_ID_JD || 'your-jd-appid'
-  }
+    jd: process.env.TARO_APP_ID_JD || 'your-jd-appid',
+  };

  const baseConfig: UserConfigExport<'vite'> = {
    projectName: 'bw-mini-app',
@ -24,24 +24,20 @@ export default defineConfig<'vite'>(async (merge) => {
      640: 2.34 / 2,
      750: 1,
      375: 2,
-      828: 1.81 / 2
+      828: 1.81 / 2,
    },
    sourceRoot: 'src',
    outputRoot: process.env.TARO_ENV ? `dist/${process.env.TARO_ENV}` : 'dist',
-    plugins: [
-      "@tarojs/plugin-generator"
-    ],
-    defineConstants: {
-    },
+    plugins: ['@tarojs/plugin-generator'],
+    defineConstants: {},
    copy: {
      patterns: [
        {
          from: 'src/assets/icons/',
-          to: 'assets/icons/'
-        }
+          to: 'assets/icons/',
+        },
      ],
-      options: {
-      }
+      options: {},
    },
    framework: 'react',
    compiler: 'vite',
@ -49,57 +45,57 @@ export default defineConfig<'vite'>(async (merge) => {
      postcss: {
        pxtransform: {
          enable: true,
-          config: {
-
-          }
+          config: {},
        },
        cssModules: {
          enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
          config: {
            namingPattern: 'module', // 转换模式，取值为 global/module
-            generateScopedName: '[name]__[local]___[hash:base64:5]'
-          }
-        }
+            generateScopedName: '[name]__[local]___[hash:base64:5]',
+          },
+        },
      },
      webpackChain(chain) {
        chain.merge({
          plugin: {
            install: {
              plugin: UnifiedWebpackPluginV5,
-              args: [{
+              args: [
+                {
                  appType: 'taro',
                  // 下面个配置，会开启 rem -> rpx 的转化
-                rem2rpx: true
-              }]
-            }
-          }
-        })
-      }
+                  rem2rpx: true,
+                },
+              ],
+            },
+          },
+        });
+      },
    },
    // 小程序平台特定配置
    weapp: {
      outputRoot: 'dist/weapp',
-      appId: appIds.weapp
+      appId: appIds.weapp,
    },
    tt: {
      outputRoot: 'dist/tt',
-      appId: appIds.tt
+      appId: appIds.tt,
    },
    alipay: {
      outputRoot: 'dist/alipay',
-      appId: appIds.alipay
+      appId: appIds.alipay,
    },
    swan: {
      outputRoot: 'dist/swan',
-      appId: appIds.swan
+      appId: appIds.swan,
    },
    qq: {
      outputRoot: 'dist/qq',
-      appId: appIds.qq
+      appId: appIds.qq,
    },
    jd: {
      outputRoot: 'dist/jd',
-      appId: appIds.jd
+      appId: appIds.jd,
    },
    h5: {
      publicPath: '/',
@ -108,20 +104,20 @@ export default defineConfig<'vite'>(async (merge) => {
      miniCssExtractPluginOption: {
        ignoreOrder: true,
        filename: 'css/[name].[hash].css',
-        chunkFilename: 'css/[name].[chunkhash].css'
+        chunkFilename: 'css/[name].[chunkhash].css',
      },
      postcss: {
        autoprefixer: {
          enable: true,
-          config: {}
+          config: {},
        },
        cssModules: {
          enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
          config: {
            namingPattern: 'module', // 转换模式，取值为 global/module
-            generateScopedName: '[name]__[local]___[hash:base64:5]'
-          }
-        }
+            generateScopedName: '[name]__[local]___[hash:base64:5]',
+          },
+        },
      },
    },
    rn: {
@ -129,17 +125,17 @@ export default defineConfig<'vite'>(async (merge) => {
      postcss: {
        cssModules: {
          enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
-        }
-      }
-    }
-  }
+        },
+      },
+    },
+  };

-  process.env.BROWSERSLIST_ENV = process.env.NODE_ENV
+  process.env.BROWSERSLIST_ENV = process.env.NODE_ENV;

  if (process.env.NODE_ENV === 'development') {
    // 本地开发构建配置（不混淆压缩）
-    return merge({}, baseConfig, devConfig)
+    return merge({}, baseConfig, devConfig);
  }
  // 生产构建配置（默认开启压缩混淆等）
-  return merge({}, baseConfig, prodConfig)
-})
+  return merge({}, baseConfig, prodConfig);
+});
--- a/src/app.config.ts
+++ b/src/app.config.ts
@ -13,14 +13,14 @@ export default defineAppConfig({
      {
        pagePath: 'pages/home/index',
        text: '游乐场',
-        iconPath: 'assets/icons/playground.png',
-        selectedIconPath: 'assets/icons/playground-selected.png',
+        iconPath: './assets/icons/playground.png',
+        selectedIconPath: './assets/icons/playground-selected.png',
      },
      {
        pagePath: 'pages/history/index',
        text: '我的',
-        iconPath: 'assets/icons/user.png',
-        selectedIconPath: 'assets/icons/user-selected.png',
+        iconPath: './assets/icons/user.png',
+        selectedIconPath: './assets/icons/user-selected.png',
      },
    ],
  },
--- a/src/platforms/factory.ts
+++ b/src/platforms/factory.ts
@ -15,7 +15,7 @@ declare const qq: any;
 * 支持的平台类型
 * 目前支持：字节跳动小程序(tt)
 */
-export type Platform = 'bytedance' | 'wechat' | 'alipay' | 'swan' | 'qq';
+export type Platform = 'bytedance' | 'wechat' | 'alipay' | 'swan' | 'qq' | 'h5';

 /**
 * 平台适配器工厂类
@ -54,6 +54,8 @@ export class PlatformFactory {
        throw new Error(`百度智能小程序平台暂未实现`);
      case 'qq':
        throw new Error(`QQ 小程序平台暂未实现`);
+      case 'h5':
+        throw new Error(`H5平台暂未实现`);
      default:
        throw new Error(`不支持的平台类型: ${this.platform}`);
    }
@ -133,7 +135,7 @@ export class PlatformFactory {
    if (typeof qq !== 'undefined') {
      return 'qq';
    }
-    throw new Error('无法检测到支持的小程序平台环境');
+    return 'h5';
  }

  /**
--- a/src/store/README.md
+++ b/src/store/README.md
@ -1,167 +0,0 @@
-# Redux Store 使用指南
-
-本项目已从 Zustand 迁移到 Redux Toolkit，以下是使用指南。
-
-## 目录结构
-
-```
-src/
-├── store/
-│   ├── index.ts          # Store 配置
-│   └── types.ts          # 类型定义
-├── constants/            # Action 类型常量
-│   ├── history.ts
-│   └── template.ts
-├── actions/              # Action creators
-│   ├── history.ts
-│   └── template.ts
-├── reducers/             # Reducers
-│   ├── index.ts
-│   ├── history.ts
-│   └── template.ts
-├── selectors/            # 选择器
-│   ├── history.ts
-│   └── template.ts
-└── hooks/
-    └── redux.ts          # 类型化的 hooks
-```
-
-## 基本使用
-
-### 1. 在组件中使用 Redux
-
-```tsx
-import { useAppDispatch, useAppSelector } from '../../hooks/redux'
-import { selectHistoryRecords, selectHistoryLoading } from '../../selectors/history'
-import { loadRecords, addRecord } from '../../actions/history'
-
-export default function MyComponent() {
-  const dispatch = useAppDispatch()
-  const records = useAppSelector(selectHistoryRecords)
-  const loading = useAppSelector(selectHistoryLoading)
-
-  useEffect(() => {
-    dispatch(loadRecords())
-  }, [dispatch])
-
-  const handleAddRecord = async () => {
-    try {
-      await dispatch(addRecord({
-        type: 'image-to-image',
-        templateId: '1',
-        templateName: '艺术风格',
-        inputImage: 'path/to/image.jpg',
-        status: 'generating'
-      }))
-    } catch (error) {
-      console.error('添加记录失败:', error)
-    }
-  }
-
-  return (
-    <View>
-      {loading && <Text>加载中...</Text>}
-      {records.map(record => (
-        <View key={record.id}>
-          <Text>{record.templateName}</Text>
-        </View>
-      ))}
-      <Button onClick={handleAddRecord}>添加记录</Button>
-    </View>
-  )
-}
-```
-
-### 2. 历史记录管理
-
-```tsx
-// 加载历史记录
-dispatch(loadRecords())
-
-// 添加新记录
-dispatch(addRecord({
-  type: 'image-to-video',
-  templateId: '2',
-  templateName: '视频生成',
-  inputImage: 'path/to/image.jpg',
-  status: 'generating'
-}))
-
-// 更新记录
-dispatch(updateRecord('record_id', {
-  status: 'completed',
-  outputResult: 'path/to/result.mp4'
-}))
-
-// 删除记录
-dispatch(deleteRecord('record_id'))
-
-// 清空所有记录
-dispatch(clearRecords())
-```
-
-### 3. 模板管理
-
-```tsx
-// 初始化模板
-import { TEMPLATE_CONFIG } from '../../config/templates'
-dispatch(initTemplates(TEMPLATE_CONFIG))
-
-// 设置选中的模板
-dispatch(setSelectedTemplate(template))
-
-// 获取模板列表
-const templates = useAppSelector(selectTemplates)
-
-// 获取选中的模板
-const selectedTemplate = useAppSelector(selectSelectedTemplate)
-
-// 根据类型筛选模板
-const videoTemplates = useAppSelector(state => 
-  selectTemplatesByType(state, 'image-to-video')
-)
-```
-
-### 4. 选择器使用
-
-```tsx
-// 基本选择器
-const records = useAppSelector(selectHistoryRecords)
-const loading = useAppSelector(selectHistoryLoading)
-const error = useAppSelector(selectHistoryError)
-
-// 带参数的选择器
-const record = useAppSelector(state => selectRecordById(state, 'record_id'))
-const generatingRecords = useAppSelector(state => 
-  selectRecordsByStatus(state, 'generating')
-)
-```
-
-## 迁移说明
-
-### 从 Zustand 迁移到 Redux
-
-原来的 Zustand 用法：
-```tsx
-// 旧的 Zustand 用法
-const { records, loadRecords, addRecord } = useHistoryStore()
-```
-
-新的 Redux 用法：
-```tsx
-// 新的 Redux 用法
-const dispatch = useAppDispatch()
-const records = useAppSelector(selectHistoryRecords)
-
-// 调用 actions
-dispatch(loadRecords())
-dispatch(addRecord(recordData))
-```
-
-## 注意事项
-
-1. 所有异步操作都通过 Redux Thunk 处理
-2. 使用类型化的 hooks (`useAppDispatch`, `useAppSelector`)
-3. 选择器函数提供了类型安全的状态访问
-4. 所有状态更新都是不可变的
-5. 错误处理通过 Redux 状态管理
--- a/src/store/types.ts
+++ b/src/store/types.ts
@ -12,7 +12,7 @@ export interface HistoryRecord {
  errorMessage?: string
 }

-export { Template } from '../sdk/sdk-server'
+export type { Template } from '../sdk/sdk-server'
 export interface GenerateParams {
  templateId: string
  imageUrl: string