From 9d890478d8d9859e61b60ad6a5a64bebdbd04068 Mon Sep 17 00:00:00 2001 From: iHeyTang Date: Fri, 26 Sep 2025 15:07:00 +0800 Subject: [PATCH] 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. --- config/dev.ts | 10 ++- config/index.ts | 98 +++++++++++------------ src/app.config.ts | 8 +- src/platforms/factory.ts | 6 +- src/store/README.md | 167 --------------------------------------- src/store/types.ts | 4 +- 6 files changed, 65 insertions(+), 228 deletions(-) delete mode 100644 src/store/README.md diff --git a/config/dev.ts b/config/dev.ts index 8f97950..1b27cd5 100644 --- a/config/dev.ts +++ b/config/dev.ts @@ -1,7 +1,13 @@ import type { UserConfigExport } from "@tarojs/cli" export default { - + mini: {}, - h5: {} + h5: { + devServer: { + fs: { + allow: ['..'] + } + } + } } satisfies UserConfigExport<'vite'> diff --git a/config/index.ts b/config/index.ts index 9ae1341..cdbbc53 100644 --- 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: [{ - appType: 'taro', - // 下面个配置，会开启 rem -> rpx 的转化 - rem2rpx: true - }] - } - } - }) - } + args: [ + { + appType: 'taro', + // 下面个配置，会开启 rem -> rpx 的转化 + 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); +}); diff --git a/src/app.config.ts b/src/app.config.ts index f18d723..3d07256 100644 --- 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', }, ], }, diff --git a/src/platforms/factory.ts b/src/platforms/factory.ts index 13c58c0..c662028 100644 --- 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'; } /** diff --git a/src/store/README.md b/src/store/README.md deleted file mode 100644 index a2af9c7..0000000 --- a/src/store/README.md +++ /dev/null @@ -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 ( - - {loading && 加载中...} - {records.map(record => ( - - {record.templateName} - - ))} - - - ) -} -``` - -### 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 状态管理 diff --git a/src/store/types.ts b/src/store/types.ts index 93cef16..40d9f8e 100644 --- a/src/store/types.ts +++ b/src/store/types.ts @@ -12,9 +12,9 @@ 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 additionalParams?: Record -} \ No newline at end of file +}