diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..7c57585 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,17 @@ +{ + "semi": true, + "trailingComma": "es5", + "singleQuote": true, + "printWidth": 150, + "tabWidth": 2, + "useTabs": false, + "bracketSpacing": true, + "bracketSameLine": false, + "arrowParens": "avoid", + "endOfLine": "lf", + "quoteProps": "as-needed", + "jsxSingleQuote": false, + "embeddedLanguageFormatting": "auto", + "htmlWhitespaceSensitivity": "css", + "proseWrap": "preserve" +} diff --git a/src/pages/home/index.config.ts b/src/pages/home/index.config.ts index 087e7e3..de6b790 100644 --- a/src/pages/home/index.config.ts +++ b/src/pages/home/index.config.ts @@ -5,4 +5,4 @@ export default definePageConfig({ backgroundColorTop: '#ffffff', backgroundColorBottom: '#ffffff', backgroundColor: '#ffffff' -}) \ No newline at end of file +}) diff --git a/src/pages/home/index.css b/src/pages/home/index.css index 3ec8504..f880909 100644 --- a/src/pages/home/index.css +++ b/src/pages/home/index.css @@ -13,24 +13,23 @@ .home-header { text-align: center; - margin-bottom: 48rpx; - padding: 32rpx 0; + margin-bottom: 48px; + padding: 32px 0; } .home-title { - font-size: 56rpx; + font-size: 56px; font-weight: 800; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: block; - margin-bottom: 16rpx; - letter-spacing: -1rpx; + margin-bottom: 16px; + letter-spacing: -1px; } .home-subtitle { - font-size: 32rpx; + font-size: 32px; color: #666; display: block; font-weight: 500; @@ -40,29 +39,9 @@ .template-grid { display: grid; grid-template-columns: 1fr 1fr; - gap: 20rpx; + gap: 20px; max-width: 100%; margin: 0 auto; - padding: 8rpx 12rpx; + padding: 8px 12px; min-height: 100%; } - -/* 响应式调整 */ -@media (min-width: 768px) { - .home { - padding: 40rpx 32rpx; - } - - .template-grid { - max-width: 1200rpx; - gap: 32rpx; - padding: 0; - } -} - -@media (min-width: 1024px) { - .template-grid { - grid-template-columns: 1fr 1fr 1fr; - max-width: 1800rpx; - } -} \ No newline at end of file diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx index 9cb508a..8760182 100644 --- a/src/pages/home/index.tsx +++ b/src/pages/home/index.tsx @@ -1,72 +1,71 @@ -import { View, ScrollView } from '@tarojs/components' -import { useEffect, useState } from 'react' -import Taro, { navigateTo } from '@tarojs/taro' -import { useAppDispatch, useAppSelector } from '../../hooks/redux' -import { selectTemplates } from '../../selectors/template' -import { initTemplates } from '../../actions/template' -import { Template } from '../../store/types' -import TemplateCard from '../../components/TemplateCard' -import { useSdk, useServerSdk } from '../../hooks/index' -import { useImageDetectionTaskManager, ImageAuditResult, AuditConclusion } from '../../hooks/useImageDetectionTaskManager' +import { View, ScrollView } from '@tarojs/components'; +import { useEffect, useState } from 'react'; +import Taro, { navigateTo } from '@tarojs/taro'; +import { useAppDispatch, useAppSelector } from '../../hooks/redux'; +import { selectTemplates } from '../../selectors/template'; +import { initTemplates } from '../../actions/template'; +import { Template } from '../../store/types'; +import TemplateCard from '../../components/TemplateCard'; +import { useSdk, useServerSdk } from '../../hooks/index'; +import { useImageDetectionTaskManager, ImageAuditResult, AuditConclusion } from '../../hooks/useImageDetectionTaskManager'; -import './index.css' +import './index.css'; // 定义详细的加载状态类型 -type LoadingState = false | 'uploading' | 'auditing' | 'processing' +type LoadingState = false | 'uploading' | 'auditing' | 'processing'; export default function Home() { - const dispatch = useAppDispatch() - const templates = useAppSelector(selectTemplates) - const sdk = useSdk() - const serverSdk = useServerSdk() - const { submitAuditTask } = useImageDetectionTaskManager() - const [loadingState, setLoadingState] = useState(false) - const [refreshing, setRefreshing] = useState(false) + const dispatch = useAppDispatch(); + const templates = useAppSelector(selectTemplates); + const sdk = useSdk(); + const serverSdk = useServerSdk(); + const { submitAuditTask } = useImageDetectionTaskManager(); + const [refreshing, setRefreshing] = useState(false); const loadTemplates = async () => { try { - const templates = await serverSdk.getAllTemplates() - console.log(templates) - dispatch(initTemplates(templates)) + const templates = await serverSdk.getAllTemplates(); + console.log(templates); + dispatch(initTemplates(templates)); } catch (error) { - console.error('加载模板失败:', error) + console.error('加载模板失败:', error); Taro.showToast({ title: '加载模板失败', icon: 'error', - duration: 2000 - }) + duration: 2000, + }); } - } + }; // 下拉刷新处理 const handleRefresh = async () => { - setRefreshing(true) + setRefreshing(true); try { - await loadTemplates() + await loadTemplates(); Taro.showToast({ title: '刷新成功', icon: 'success', - duration: 1500 - }) + duration: 1500, + }); } catch (error) { - console.error('刷新失败:', error) + console.error('刷新失败:', error); } finally { - setRefreshing(false) + setRefreshing(false); } - } + }; useEffect(() => { // 需要先检查是否有模板配置文件 - loadTemplates() - }, [dispatch]) + loadTemplates(); + }, [dispatch]); // 获取加载状态的显示文本 const getLoadingText = (state: LoadingState): string => { switch (state) { default: - return '请稍后...' + return '请稍后...'; } - } + }; // 处理审核失败 const handleAuditFailure = (auditResult: ImageAuditResult) => { @@ -74,10 +73,10 @@ export default function Home() { [AuditConclusion.REJECT]: '图片内容不符合规范，请重新选择符合规范的图片', [AuditConclusion.REVIEW]: '图片需要人工审核，请稍后重试或更换其他图片', [AuditConclusion.UNCERTAIN]: '图片审核结果不确定，请重新选择图片', - [AuditConclusion.PASS]: '图片审核通过' // 虽然不会用到，但为了类型完整性 - } + [AuditConclusion.PASS]: '图片审核通过', // 虽然不会用到，但为了类型完整性 + }; - const message = auditResult.conclusion ? messages[auditResult.conclusion] : '图片审核失败，请重新选择图片' + const message = auditResult.conclusion ? messages[auditResult.conclusion] : '图片审核失败，请重新选择图片'; Taro.showModal({ title: '图片审核未通过', @@ -85,101 +84,97 @@ export default function Home() { confirmText: '我知道了', showCancel: false, success: () => { - console.log('用户确认审核失败信息') - } - }) - } + console.log('用户确认审核失败信息'); + }, + }); + }; const handleTemplateClick = async (template: Template) => { - if (loadingState) return // 防止重复点击 - try { // 第一步：选择并上传图片 - const imageUrl = await sdk.chooseAndUploadImage({ onImageSelected: () => { Taro.showLoading({ title: getLoadingText('uploading'), mask: true, - }) + }); }, onProgress: () => { Taro.showLoading({ title: `请稍后...`, - mask: true - }) - } - }) + mask: true, + }); + }, + }); const auditResult = await new Promise((resolve, reject) => { submitAuditTask( { imageUrl, options: { enableCache: true, - timeout: 30000 - } + timeout: 30000, + }, }, (status, progress) => { - console.log('审核进度:', status, progress) + console.log('审核进度:', status, progress); }, - (result) => { - console.log('审核成功:', result) - resolve(result) + result => { + console.log('审核成功:', result); + resolve(result); }, - (error) => { - console.error('审核失败:', error) - reject(error) + error => { + console.error('审核失败:', error); + reject(error); } - ) - }) + ); + }); // 第三步：检查审核结果 if (auditResult.conclusion === AuditConclusion.PASS) { // 短暂延迟后继续业务处理 - await new Promise(resolve => setTimeout(resolve, 1000)) + await new Promise(resolve => setTimeout(resolve, 1000)); // 第四步：执行业务逻辑 try { const taskId = await serverSdk.executeTemplate({ imageUrl, - templateCode: template.code - }) + templateCode: template.code, + }); // 隐藏loading - Taro.hideLoading() + Taro.hideLoading(); // 跳转到生成页面 navigateTo({ - url: `/pages/generate/index?taskId=${taskId}&templateCode=${template.code}` - }) + url: `/pages/generate/index?taskId=${taskId}&templateCode=${template.code}`, + }); } catch (businessError) { // 业务处理失败 - Taro.hideLoading() + Taro.hideLoading(); Taro.showToast({ title: '请等待生成中的任务完成后再尝试', icon: 'none', - duration: 2000 - }) + duration: 2000, + }); } } else { // 审核不通过 - handleAuditFailure(auditResult) + handleAuditFailure(auditResult); } } catch (error) { // 统一错误处理 - Taro.hideLoading() + Taro.hideLoading(); Taro.showToast({ title: '图片审核失败，请重试', icon: 'error', - duration: 2000 - }) + duration: 2000, + }); } finally { - } - } + }; return ( - + - - {templates.map((template) => ( - + + {templates.map(template => ( + ))} - ) + ); }