From 425ed50dc55216a32223012ac868badf59492492 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=88=98=E6=9D=B0?= Date: Tue, 26 Aug 2025 22:24:36 +0800 Subject: [PATCH] feat: fix CommonPopup nesting use and fix some style problem --- analyze.js | 50 ++++++++++ src/components/CommonPopup/CommonPopup.tsx | 2 +- src/components/GuideBar/index.scss | 5 +- src/components/UploadCover/index.tsx | 13 ++- .../UploadCover/upload-source-popup.tsx | 92 +++++++++++-------- src/pages/detail/index.scss | 4 +- src/pages/detail/index.tsx | 4 +- src/pages/login/index/index.tsx | 4 +- 8 files changed, 123 insertions(+), 51 deletions(-) create mode 100644 analyze.js diff --git a/analyze.js b/analyze.js new file mode 100644 index 0000000..3b3453e --- /dev/null +++ b/analyze.js @@ -0,0 +1,50 @@ +const fs = require('fs'); +const path = require('path'); + +// dist 目录路径，根据你项目实际情况修改 +const DIST_DIR = path.join(__dirname, 'dist'); + +// 递归统计文件大小 +function getFiles(dir) { + let results = []; + const list = fs.readdirSync(dir); + list.forEach(file => { + const filePath = path.join(dir, file); + const stat = fs.statSync(filePath); + if (stat && stat.isDirectory()) { + results = results.concat(getFiles(filePath)); + } else { + results.push({ path: filePath, size: stat.size }); + } + }); + return results; +} + +function formatSize(bytes) { + if (bytes < 1024) return bytes + ' B'; + if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(2) + ' KB'; + return (bytes / (1024 * 1024)).toFixed(2) + ' MB'; +} + +function analyze() { + if (!fs.existsSync(DIST_DIR)) { + console.error('dist 目录不存在，请先执行 taro build --type weapp'); + return; + } + + const files = getFiles(DIST_DIR); + const total = files.reduce((sum, f) => sum + f.size, 0); + + console.log('文件大小分析（按从大到小排序）:'); + files + .sort((a, b) => b.size - a.size) + .forEach(f => { + console.log( + `${formatSize(f.size)} | ${(f.size / total * 100).toFixed(2)}% | ${path.relative(DIST_DIR, f.path)}` + ); + }); + + console.log(`\n总大小: ${formatSize(total)}`); +} + +analyze(); diff --git a/src/components/CommonPopup/CommonPopup.tsx b/src/components/CommonPopup/CommonPopup.tsx index ef8deac..26b0a03 100644 --- a/src/components/CommonPopup/CommonPopup.tsx +++ b/src/components/CommonPopup/CommonPopup.tsx @@ -54,7 +54,7 @@ const CommonPopup: React.FC = ({ closeable={false} onClose={onClose} className={`${styles['common-popup']} ${className ? className : ''}`} - style={{ ...style, zIndex: zIndex ? zIndex : undefined }} + style={{ zIndex: zIndex ? zIndex : undefined, ...style }} > {showHeader && ( diff --git a/src/components/GuideBar/index.scss b/src/components/GuideBar/index.scss index 41787e9..608a03a 100644 --- a/src/components/GuideBar/index.scss +++ b/src/components/GuideBar/index.scss @@ -20,6 +20,7 @@ justify-content: space-between; align-items: center; display: inline-flex; + width: 240px; height: 60px; padding: 8px 6px; box-sizing: border-box; @@ -34,7 +35,7 @@ display: flex; width: 76px; height: 48px; - padding: 14px 22px; + // padding: 14px 0; box-sizing: border-box; justify-content: center; align-items: center; @@ -50,7 +51,7 @@ display: flex; width: 76px; height: 48px; - padding: 14px 22px; + // padding: 14px 22px; box-sizing: border-box; justify-content: center; align-items: center; diff --git a/src/components/UploadCover/index.tsx b/src/components/UploadCover/index.tsx index 08927d0..6da8f37 100644 --- a/src/components/UploadCover/index.tsx +++ b/src/components/UploadCover/index.tsx @@ -1,7 +1,7 @@ -import React, { useCallback, useState } from 'react' +import React, { useCallback, useRef, useState } from 'react' import { Image, View, Text } from '@tarojs/components' import img from '../../config/images' -import UploadSourcePopup from './upload-source-popup' +import UploadSourcePopup, { sourceMap } from './upload-source-popup' import UploadFromWx from './upload-from-wx' import { CommonPopup } from '../' @@ -58,6 +58,9 @@ export default function UploadCover(props: UploadCoverProps) { } = props const [visible, setVisible] = useState(false) + const uploadSourcePopupRef = useRef<{ + show: (sourceType: sourceType, maxCount: number) => void + }>(null) const onAdd = useCallback((images: CoverImageValue[]) => { // FIXME: prev is not latest value @@ -86,6 +89,7 @@ export default function UploadCover(props: UploadCoverProps) { round position="bottom" hideFooter + zIndex={1000} > { @@ -96,7 +100,9 @@ export default function UploadCover(props: UploadCoverProps) { item === 'album' ? ( ) : ( - + uploadSourcePopupRef.current?.show(item, maxCount - value.length)}> + {sourceMap.get(item)} + ) } @@ -105,6 +111,7 @@ export default function UploadCover(props: UploadCoverProps) { } +
{value.length < maxCount && (
setVisible(true)}> diff --git a/src/components/UploadCover/upload-source-popup.tsx b/src/components/UploadCover/upload-source-popup.tsx index ccb156f..dc72e44 100644 --- a/src/components/UploadCover/upload-source-popup.tsx +++ b/src/components/UploadCover/upload-source-popup.tsx @@ -1,4 +1,4 @@ -import React, { useState, useEffect } from 'react' +import React, { useState, useEffect, forwardRef, useImperativeHandle } from 'react' import { Image, View, Text, ScrollView, Button } from '@tarojs/components' import Taro from '@tarojs/taro' import img from '../../config/images' @@ -17,12 +17,10 @@ type ImageItem = { } interface UploadImageProps { - sourceType: SourceType onAdd: (images: ImageItem[]) => void - maxCount: number } -const sourceMap = new Map([ +export const sourceMap = new Map([ ['history', '历史图库'], ['preset', '预设图库'] ]) @@ -31,13 +29,13 @@ const checkImageSelected = (images: ImageItem[], image: ImageItem) => { return images.some(item => item.id === image.id) } -export default function UploadImage(props: UploadImageProps) { +export default forwardRef(function UploadImage(props: UploadImageProps, ref) { const { - sourceType = 'history', onAdd = () => void 0, - maxCount = 9, } = props const [visible, setVisible] = useState(false) + const [sourceType, setSourceType] = useState('history') + const [maxCount, setMaxCount] = useState(9) const [images, setImages] = useState([]) const [selectedImages, setSelectedImages] = useState([]) @@ -54,36 +52,50 @@ export default function UploadImage(props: UploadImageProps) { } } - useEffect(() => { - if (visible) { - publishService.getPictures({ - pageOption: { - page: 1, - pageSize: 100, - }, - seachOption: { - tag: '', - resource_type: 'image', - dateRange: [], - }, - }).then(res => { - if (res.success) { - setImages(res.data.data.rows.map(item => ({ - id: Date.now().toString(), - url: item.thumbnail_url, - }))) - } else { - // TODO: 显示错误信息 - Taro.showToast({ - title: res.message, - icon: 'none' - }) - } - }) - } else { - setSelectedImages([]) + useImperativeHandle(ref, () => ({ + show: (sourceType: SourceType, maxCount: number) => { + setVisible(true) + setSourceType(sourceType) + setMaxCount(maxCount) + fetchImages() } - }, [visible]) + })) + + function fetchImages() { + publishService.getPictures({ + pageOption: { + page: 1, + pageSize: 100, + }, + seachOption: { + tag: '', + resource_type: 'image', + dateRange: [], + }, + }).then(res => { + if (res.success) { + let start = 0 + setImages(res.data.data.rows.map(item => ({ + id: (Date.now() + start++).toString(), + url: item.thumbnail_url, + }))) + } else { + // TODO: 显示错误信息 + Taro.showToast({ + title: res.message, + icon: 'none' + }) + } + }) + } + + function onClose() { + setVisible(false) + setSelectedImages([]) + setImages([]) + setSourceType('history') + setMaxCount(9) + } const handleConfirm = () => { if (selectedImages.length > 0) { @@ -103,10 +115,11 @@ export default function UploadImage(props: UploadImageProps) { <> setVisible(false)} + onClose={onClose} round hideFooter position='bottom' + zIndex={1001} > {sourceMap.get(sourceType)} @@ -154,8 +167,7 @@ export default function UploadImage(props: UploadImageProps) { )} - setVisible(true)}>{sourceMap.get(sourceType)}选取 + {/* setVisible(true)}>{sourceMap.get(sourceType)}选取 */} ); -}; - +}); diff --git a/src/pages/detail/index.scss b/src/pages/detail/index.scss index 2ff9ab1..fa88e84 100644 --- a/src/pages/detail/index.scss +++ b/src/pages/detail/index.scss @@ -124,6 +124,7 @@ &-tags { display: flex; align-items: center; + flex-wrap: wrap; gap: 6px; &-tag { @@ -546,6 +547,7 @@ &-scroll { flex: 0 0 auto; + width: calc(100% - 116px); &-content { display: flex; @@ -814,7 +816,7 @@ border-radius: 20px; border: 1px solid rgba(33, 178, 0, 0.20); background: rgba(255, 255, 255, 0.16); - padding: 12px 15px; + padding: 12px 0 12px 15px; box-sizing: border-box; &-title { diff --git a/src/pages/detail/index.tsx b/src/pages/detail/index.tsx index f0e856a..b1e1626 100644 --- a/src/pages/detail/index.tsx +++ b/src/pages/detail/index.tsx @@ -414,7 +414,7 @@ function Index() { {/* participants list */} - + {participants.map((participant) => ( {/* */} @@ -509,7 +509,7 @@ function Index() { - 报名人数 {game.checkedApplications} / {game.applications} + 报名人数 {game.checkedApplications}/{game.applications} {game.levelRequirements} diff --git a/src/pages/login/index/index.tsx b/src/pages/login/index/index.tsx index 29facb3..ac0cbef 100644 --- a/src/pages/login/index/index.tsx +++ b/src/pages/login/index/index.tsx @@ -110,7 +110,7 @@ const LoginPage: React.FC = () => { @@ -229,7 +229,7 @@ const LoginPage: React.FC = () => { {agree_terms ? '已同意' : '同意并继续'} - + )}