bimwe/mini-programs
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: fix CommonPopup nesting use and fix some style problem

Browse Source
This commit is contained in:
刘杰
2025-08-26 22:24:36 +08:00
parent 924afbb3cf
commit 425ed50dc5
8 changed files with 123 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
analyze.js Normal file
View File

@@ -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();

2
src/components/CommonPopup/CommonPopup.tsx
View File

@@ -54,7 +54,7 @@ const CommonPopup: React.FC<CommonPopupProps> = ({
closeable={false}
onClose={onClose}
className={`${styles['common-popup']} ${className ? className : ''}`}
style={{ ...style, zIndex: zIndex ? zIndex : undefined }}
style={{ zIndex: zIndex ? zIndex : undefined, ...style }}
>
{showHeader && (
<View className={styles['common-popup__header']}>

5
src/components/GuideBar/index.scss
View File

@@ -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;

13
src/components/UploadCover/index.tsx
View File

@@ -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}
>
<View className="upload-source-popup-container" style={{ height: source.length * 56 + 52 + 'px' }}>
{
@@ -96,7 +100,9 @@ export default function UploadCover(props: UploadCoverProps) {
item === 'album' ? (
<UploadFromWx onAdd={onWxAdd} maxCount={maxCount - value.length} />
) : (
<UploadSourcePopup sourceType={item} onAdd={onAdd} maxCount={maxCount - value.length} />
<View className="upload-source-popup-item-text" onClick={() => uploadSourcePopupRef.current?.show(item, maxCount - value.length)}>
<Text>{sourceMap.get(item)}</Text>
</View>
)
}
</View>
@@ -105,6 +111,7 @@ export default function UploadCover(props: UploadCoverProps) {
}
</View>
</CommonPopup>
<UploadSourcePopup ref={uploadSourcePopupRef} onAdd={onAdd} />
<div className={`upload-cover-root ${value.length === 0 && align === 'center' ? 'upload-cover-act-center' : ''}`}>
{value.length < maxCount && (
<div className="upload-cover-act" onClick={() => setVisible(true)}>

46
src/components/UploadCover/upload-source-popup.tsx
View File

@@ -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<SourceType, string>([
export const sourceMap = new Map<SourceType, string>([
['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<SourceType>('history')
const [maxCount, setMaxCount] = useState(9)
const [images, setImages] = useState<ImageItem[]>([])
const [selectedImages, setSelectedImages] = useState<ImageItem[]>([])
@@ -54,8 +52,16 @@ export default function UploadImage(props: UploadImageProps) {
}
}
useEffect(() => {
if (visible) {
useImperativeHandle(ref, () => ({
show: (sourceType: SourceType, maxCount: number) => {
setVisible(true)
setSourceType(sourceType)
setMaxCount(maxCount)
fetchImages()
}
}))
function fetchImages() {
publishService.getPictures({
pageOption: {
page: 1,
@@ -68,8 +74,9 @@ export default function UploadImage(props: UploadImageProps) {
},
}).then(res => {
if (res.success) {
let start = 0
setImages(res.data.data.rows.map(item => ({
id: Date.now().toString(),
id: (Date.now() + start++).toString(),
url: item.thumbnail_url,
})))
} else {
@@ -80,10 +87,15 @@ export default function UploadImage(props: UploadImageProps) {
})
}
})
} else {
setSelectedImages([])
}
}, [visible])
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) {
<>
<CommonPopup
visible={visible}
onClose={() => setVisible(false)}
onClose={onClose}
round
hideFooter
position='bottom'
zIndex={1001}
>
<View className="upload-popup">
<View className="upload-popup-title">{sourceMap.get(sourceType)}</View>
@@ -154,8 +167,7 @@ export default function UploadImage(props: UploadImageProps) {
)}
</View>
</CommonPopup>
<View className="upload-source-popup-text" onClick={() => setVisible(true)}>{sourceMap.get(sourceType)}选取</View>
{/* <View className="upload-source-popup-text" onClick={() => setVisible(true)}>{sourceMap.get(sourceType)}选取</View> */}
</>
);
};
});

4
src/pages/detail/index.scss
View File

@@ -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 {

4
src/pages/detail/index.tsx
View File

@@ -414,7 +414,7 @@ function Index() {
</View>
{/* participants list */}
<ScrollView className='participants-list-scroll' scrollX>
<View className='participants-list-scroll-content' style={{ width: `${(participants.length + 1) * 108 + (participants.length) * 8 - 30}px` }}>
<View className='participants-list-scroll-content' style={{ width: `${participants.length * 103 + (participants.length - 1) * 8}px` }}>
{participants.map((participant) => (
<View key={participant.id} className='participants-list-item'>
{/* <Avatar className='participants-list-item-avatar' src={participant.user.avatar_url} /> */}
@@ -509,7 +509,7 @@ function Index() {
<Avatar className='recommend-games-list-item-addon-avatar' src={game.avatar} />
<View className='recommend-games-list-item-addon-message'>
<View className='recommend-games-list-item-addon-message-applications'>
<Text>报名人数 {game.checkedApplications} / {game.applications}</Text>
<Text>报名人数 {game.checkedApplications}/{game.applications}</Text>
</View>
<View className='recommend-games-list-item-addon-message-level-requirements'>
<Text>{game.levelRequirements}</Text>

2
src/pages/login/index/index.tsx
View File

@@ -110,7 +110,7 @@ const LoginPage: React.FC = () => {
<View className="background_image">
<Image
className="bg_img"
src={require('../../../static/login/login_bg.png')}
src="http://bimwe.oss-cn-shanghai.aliyuncs.com/front/ball/images/2e00dea1-8723-42fe-ae42-84fe38e9ac3f.png"
mode="aspectFill"
/>
<View className="bg_overlay"></View>