EIEI/wechat_wc
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: refresh service and tool pages

Browse Source
This commit is contained in:
broccoli
2026-08-07 17:21:59 +08:00
parent 2b6c74fc97
commit 6f725c66aa
5 changed files with 63 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/wordcloud/index.scss
+23 -17
View File
@@ -42,12 +42,12 @@
align-items: center;
justify-content: center;
margin-bottom: 12px;
border: 4px dashed var(--bg-input);
border: 1rpx solid var(--border);
}
.step-circle.active {
background: var(--btn-gradient);
border-color: var(--accent-pink);
background: var(--accent-primary);
border-color: var(--accent-primary);
}
.step-num {
@@ -66,7 +66,7 @@
}
.step-label.active {
color: var(--accent-pink);
color: var(--accent-primary);
font-weight: 600;
}
@@ -80,7 +80,7 @@
}
.step-line.active {
background: var(--btn-gradient);
background: var(--accent-primary);
}
/* 步骤内容 */
@@ -94,6 +94,8 @@
display: flex;
align-items: center;
justify-content: center;
border: 1rpx solid var(--border);
border-radius: 24rpx;
}
.upload-placeholder {
@@ -124,11 +126,11 @@
.upload-tip {
font-size: 22px;
color: var(--accent-blue);
background: rgba(91, 140, 255, 0.1);
color: var(--accent-secondary);
background: var(--accent-secondary-soft);
padding: 8px 20px;
border-radius: 50px;
border: var(--line-card);
border-radius: 999rpx;
border: 1rpx solid var(--border);
}
.preview-image {
@@ -148,6 +150,8 @@
/* 输入区域 */
.input-section {
padding: 32px;
border: 1rpx solid var(--border);
border-radius: 24rpx;
}
.names-input {
@@ -159,7 +163,7 @@
font-size: 28px;
line-height: 1.6;
box-sizing: border-box;
border: var(--line-card);
border: 1rpx solid var(--border);
color: var(--text-primary);
}
@@ -218,14 +222,14 @@
.progress-bar {
width: 80%;
height: 16px;
background: rgba(255, 154, 158, 0.15);
background: var(--accent-primary-soft);
border-radius: 8px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: var(--btn-gradient);
background: var(--accent-primary);
border-radius: 8px;
transition: width 0.5s ease;
}
@@ -233,7 +237,7 @@
.progress-text {
font-size: 32px;
font-weight: 700;
color: var(--accent-pink);
color: var(--accent-primary);
margin-top: 16px;
}
@@ -245,24 +249,26 @@
.result-image-wrapper {
overflow: hidden;
position: relative;
border: 1rpx solid var(--border);
border-radius: 24rpx;
}
.result-image {
width: 100%;
height: 500px;
background: linear-gradient(135deg, rgba(255, 154, 158, 0.08) 0%, rgba(160, 196, 255, 0.08) 100%);
background: linear-gradient(135deg, var(--accent-primary-soft) 0%, var(--accent-secondary-soft) 100%);
}
.watermark-badge {
position: absolute;
bottom: 20px;
right: 20px;
background: rgba(255, 255, 255, 0.8);
background: var(--glass);
color: var(--text-primary);
padding: 8px 20px;
border-radius: 8px;
font-size: 22px;
border: var(--line-card);
border: 1rpx solid var(--border);
}
.result-actions {
@@ -313,5 +319,5 @@
.diy-jump-arrow {
font-size: 40px;
color: var(--accent-pink);
color: var(--accent-primary);
}
src/pages/wordcloud/index.tsx
+8 -8
View File
@@ -73,7 +73,7 @@ export default function WordCloudPage() {
</View>
{/* 步骤指示器 */}
<View className='step-indicator dashed-card'>
<View className='step-indicator surface-card'>
{steps.map((s, idx) => (
<View key={s.num} className='step-item'>
<View className={`step-circle ${step >= s.num ? 'active' : ''}`}>
@@ -88,7 +88,7 @@ export default function WordCloudPage() {
{/* 步骤1: 上传底图 */}
{step === 1 && (
<View className='step-content'>
<View className='upload-area dashed-card' onTap={chooseImage}>
<View className='upload-area surface-card' onTap={chooseImage}>
{baseImage ? (
<Image className='preview-image' src={baseImage} mode='aspectFit' />
) : (
@@ -102,10 +102,10 @@ export default function WordCloudPage() {
</View>
{baseImage && (
<View className='action-btns'>
<View className='btn-gradient' onTap={() => setStep(2)}>
<View className='btn-primary' onTap={() => setStep(2)}>
<Text>下一步：输入名单</Text>
</View>
<View className='btn-outline' onTap={() => setBaseImage('')}>
<View className='btn-secondary' onTap={() => setBaseImage('')}>
<Text>重新选择</Text>
</View>
</View>
@@ -116,7 +116,7 @@ export default function WordCloudPage() {
{/* 步骤2: 输入名单 */}
{step === 2 && (
<View className='step-content'>
<View className='input-section dashed-card'>
<View className='input-section surface-card'>
<Text className='section-title'>输入名字名单</Text>
<Textarea
className='names-input'
@@ -134,10 +134,10 @@ export default function WordCloudPage() {
</View>
</View>
<View className='action-btns'>
<View className='btn-gradient' onTap={handleGenerate}>
<View className='btn-primary' onTap={handleGenerate}>
<Text>开始生成词云</Text>
</View>
<View className='btn-outline' onTap={() => setStep(1)}>
<View className='btn-secondary' onTap={() => setStep(1)}>
<Text>上一步</Text>
</View>
</View>
@@ -159,7 +159,7 @@ export default function WordCloudPage() {
</View>
) : (
<View className='result-panel'>
<View className='result-image-wrapper dashed-card'>
<View className='result-image-wrapper surface-card'>
<Image className='result-image' src={generatedImage || ''} mode='aspectFit' />
<View className='watermark-badge'>
<Text>智绘微刻预览</Text>