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/service/index.tsx
+9 -16
View File
@@ -23,18 +23,16 @@ export default function ServicePage() {
<View className={`theme-${resolvedTheme}`} style={{ minHeight: '100vh' }}> <View className={`theme-${resolvedTheme}`} style={{ minHeight: '100vh' }}>
<ThemedPageMeta /> <ThemedPageMeta />
<View className='service-page'> <View className='service-page'>
<View className='page-header dashed-card mt-20' style={{ marginTop: `${safe.headerPaddingTop}px` }}> <View className='page-header surface-card mt-20' style={{ marginTop: `${safe.headerPaddingTop}px` }}>
<View className='star-badge' />
<Text className='page-title'>联系客服</Text> <Text className='page-title'>联系客服</Text>
</View> </View>
{/* 客服入口 */} {/* 客服入口 */}
<View className='service-hero dashed-card mt-20'> <View className='service-hero surface-card mt-20'>
<View className='star-badge' />
<Image className='service-hero-icon' src={assetUrl('/icon/电话.png')} mode='aspectFit' /> <Image className='service-hero-icon' src={assetUrl('/icon/电话.png')} mode='aspectFit' />
<Text className='service-title'>智绘微刻客服中心</Text> <Text className='service-title'>智绘微刻客服中心</Text>
<Text className='service-desc'>工作日 09:00 - 18:00 在线为您服务</Text> <Text className='service-desc'>工作日 09:00 - 18:00 在线为您服务</Text>
<View className='btn-gradient service-btn' onTap={() => Taro.showToast({ title: '跳转客服会话', icon: 'none' })}> <View className='btn-primary service-btn' onTap={() => Taro.showToast({ title: '跳转客服会话', icon: 'none' })}>
<Text>发起咨询</Text> <Text>发起咨询</Text>
</View> </View>
</View> </View>
@@ -43,24 +41,21 @@ export default function ServicePage() {
<View className='mt-20'> <View className='mt-20'>
<Text className='section-title'>联系方式</Text> <Text className='section-title'>联系方式</Text>
<View className='contact-list'> <View className='contact-list'>
<View className='contact-item dashed-card'> <View className='contact-item surface-card'>
<View className='star-badge' />
<Image className='contact-icon-img' src={assetUrl('/icon/电话.png')} mode='aspectFit' /> <Image className='contact-icon-img' src={assetUrl('/icon/电话.png')} mode='aspectFit' />
<View className='contact-info'> <View className='contact-info'>
<Text className='contact-label'>客服电话</Text> <Text className='contact-label'>客服电话</Text>
<Text className='contact-value'>400-XXX-XXXX</Text> <Text className='contact-value'>400-XXX-XXXX</Text>
</View> </View>
</View> </View>
<View className='contact-item dashed-card' onTap={() => Taro.setClipboardData({ data: 'smart_engraving' })}> <View className='contact-item surface-card' onTap={() => Taro.setClipboardData({ data: 'smart_engraving' })}>
<View className='star-badge' />
<Image className='contact-icon-img' src={assetUrl('/icon/词云生成.png')} mode='aspectFit' /> <Image className='contact-icon-img' src={assetUrl('/icon/词云生成.png')} mode='aspectFit' />
<View className='contact-info'> <View className='contact-info'>
<Text className='contact-label'>客服微信</Text> <Text className='contact-label'>客服微信</Text>
<Text className='contact-value'>smart_engraving（点击复制）</Text> <Text className='contact-value'>smart_engraving（点击复制）</Text>
</View> </View>
</View> </View>
<View className='contact-item dashed-card'> <View className='contact-item surface-card'>
<View className='star-badge' />
<Image className='contact-icon-img' src={assetUrl('/icon/使用帮助.png')} mode='aspectFit' /> <Image className='contact-icon-img' src={assetUrl('/icon/使用帮助.png')} mode='aspectFit' />
<View className='contact-info'> <View className='contact-info'>
<Text className='contact-label'>商务邮箱</Text> <Text className='contact-label'>商务邮箱</Text>
@@ -74,8 +69,7 @@ export default function ServicePage() {
<View className='mt-20'> <View className='mt-20'>
<Text className='section-title'>常见问题</Text> <Text className='section-title'>常见问题</Text>
{FAQ_ITEMS.map((item, idx) => ( {FAQ_ITEMS.map((item, idx) => (
<View key={idx} className='faq-card dashed-card'> <View key={idx} className='faq-card surface-card'>
<View className='star-badge' />
<Text className='faq-q'>Q: {item.q}</Text> <Text className='faq-q'>Q: {item.q}</Text>
<Text className='faq-a'>A: {item.a}</Text> <Text className='faq-a'>A: {item.a}</Text>
</View> </View>
@@ -83,14 +77,13 @@ export default function ServicePage() {
</View> </View>
{/* B端专属 */} {/* B端专属 */}
<View className='enterprise-service dashed-card mt-20 mb-20'> <View className='enterprise-service surface-card mt-20 mb-20'>
<View className='star-badge' />
<View className='flex-center'> <View className='flex-center'>
<Image className='enterprise-icon' src={assetUrl('/icon/企业批量定制.png')} mode='aspectFit' /> <Image className='enterprise-icon' src={assetUrl('/icon/企业批量定制.png')} mode='aspectFit' />
<Text className='enterprise-title'>企业专属客户经理</Text> <Text className='enterprise-title'>企业专属客户经理</Text>
</View> </View>
<Text className='enterprise-desc'>批量订单（50件以上）享专属报价、优先排产、专人对接</Text> <Text className='enterprise-desc'>批量订单（50件以上）享专属报价、优先排产、专人对接</Text>
<View className='btn-outline enterprise-btn'> <View className='btn-secondary enterprise-btn'>
<Text>预约企业咨询</Text> <Text>预约企业咨询</Text>
</View> </View>
</View> </View>
src/pages/userDatabase/index.scss
+13 -13
View File
@@ -37,7 +37,7 @@
width: 100%; width: 100%;
height: 80px; height: 80px;
background: var(--bg-input); background: var(--bg-input);
border: 2px solid var(--line-star); border: 1rpx solid var(--border);
border-radius: 16px; border-radius: 16px;
padding: 0 24px; padding: 0 24px;
font-size: 30px; font-size: 30px;
@@ -49,7 +49,7 @@
.udb-error { .udb-error {
font-size: 24px; font-size: 24px;
color: #e64340; color: var(--danger);
margin-bottom: 20px; margin-bottom: 20px;
display: block; display: block;
} }
@@ -75,7 +75,7 @@
/* 数据表格 */ /* 数据表格 */
.udb-table { .udb-table {
background: var(--bg-card); background: var(--bg-card);
border: var(--line-card); border: 1rpx solid var(--border);
border-radius: 24px; border-radius: 24px;
overflow: hidden; overflow: hidden;
} }
@@ -84,7 +84,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
padding: 20px 16px; padding: 20px 16px;
border-bottom: 1px solid rgba(0, 0, 0, 0.04); border-bottom: 1rpx solid var(--border);
} }
.udb-row:last-child { .udb-row:last-child {
@@ -134,25 +134,25 @@
} }
.udb-row.active { .udb-row.active {
background: rgba(91, 140, 255, 0.06); background: var(--accent-secondary-soft);
} }
.udb-link { .udb-link {
padding: 6px 14px; padding: 6px 14px;
border-radius: 8px; border-radius: 8px;
font-size: 22px; font-size: 22px;
color: var(--accent-blue); color: var(--accent-secondary);
background: rgba(91, 140, 255, 0.08); background: var(--accent-secondary-soft);
} }
.udb-danger { .udb-danger {
color: #e64340; color: var(--danger);
background: rgba(230, 67, 64, 0.08); background: var(--danger-soft);
} }
.udb-current { .udb-current {
font-size: 22px; font-size: 22px;
color: var(--accent-blue); color: var(--accent-secondary);
font-weight: 600; font-weight: 600;
} }
@@ -182,7 +182,7 @@
width: 100%; width: 100%;
height: 80px; height: 80px;
background: var(--bg-input); background: var(--bg-input);
border: 2px solid var(--line-star); border: 1rpx solid var(--border);
border-radius: 16px; border-radius: 16px;
padding: 0 24px; padding: 0 24px;
font-size: 28px; font-size: 28px;
@@ -197,8 +197,8 @@
gap: 20px; gap: 20px;
} }
.udb-add-actions .btn-outline, .udb-add-actions .btn-secondary,
.udb-add-actions .btn-gradient { .udb-add-actions .btn-primary {
flex: 1; flex: 1;
padding: 18px 0; padding: 18px 0;
text-align: center; text-align: center;
src/pages/userDatabase/index.tsx
+10 -12
View File
@@ -56,7 +56,7 @@ export default function UserDatabasePage() {
Taro.showModal({ Taro.showModal({
title: '确认删除', title: '确认删除',
content: '删除后将清空该用户所有数据，无法恢复', content: '删除后将清空该用户所有数据，无法恢复',
confirmColor: '#e64340', confirmColor: resolvedTheme === 'dark' ? '#ef7a7a' : '#d85d5d',
success: (res) => { success: (res) => {
if (res.confirm) { if (res.confirm) {
deleteUser(openid) deleteUser(openid)
@@ -79,15 +79,15 @@ export default function UserDatabasePage() {
Taro.showToast({ title: '创建成功', icon: 'success' }) Taro.showToast({ title: '创建成功', icon: 'success' })
} }
const activeOpenid = getUserInfo()?.openid || '' const currentUser = getUserInfo()
const activeOpenid = (currentUser && currentUser.openid) || ''
if (!isUnlocked) { if (!isUnlocked) {
return ( return (
<View className={`theme-${resolvedTheme}`}> <View className={`theme-${resolvedTheme}`}>
<ThemedPageMeta /> <ThemedPageMeta />
<View className='udb-page'> <View className='udb-page'>
<View className='udb-lock-card dashed-card mt-20'> <View className='udb-lock-card surface-card mt-20'>
<View className='star-badge' />
<Image className='udb-lock-icon' src={assetUrl('/icon/账号管理.png')} mode='aspectFit' /> <Image className='udb-lock-icon' src={assetUrl('/icon/账号管理.png')} mode='aspectFit' />
<Text className='udb-lock-title'>管理员验证</Text> <Text className='udb-lock-title'>管理员验证</Text>
<Text className='udb-lock-desc'>请输入密码以访问用户数据库</Text> <Text className='udb-lock-desc'>请输入密码以访问用户数据库</Text>
@@ -102,7 +102,7 @@ export default function UserDatabasePage() {
{pwdError && ( {pwdError && (
<Text className='udb-error'>密码错误，请重试</Text> <Text className='udb-error'>密码错误，请重试</Text>
)} )}
<View className='btn-gradient udb-btn' onTap={handleUnlock}> <View className='btn-primary udb-btn' onTap={handleUnlock}>
<Text>进入数据库</Text> <Text>进入数据库</Text>
</View> </View>
</View> </View>
@@ -116,13 +116,12 @@ export default function UserDatabasePage() {
<ThemedPageMeta /> <ThemedPageMeta />
<View className='udb-page'> <View className='udb-page'>
<View className='page-header dashed-card mt-20' style={{ marginTop: `${safe.headerPaddingTop}px` }}> <View className='page-header surface-card mt-20' style={{ marginTop: `${safe.headerPaddingTop}px` }}>
<View className='star-badge' />
<Text className='page-title'>本地用户数据库</Text> <Text className='page-title'>本地用户数据库</Text>
</View> </View>
<View className='udb-toolbar'> <View className='udb-toolbar'>
<View className='btn-gradient udb-add-btn' onTap={() => setShowAdd(true)}> <View className='btn-primary udb-add-btn' onTap={() => setShowAdd(true)}>
<Text>+ 新建账号</Text> <Text>+ 新建账号</Text>
</View> </View>
</View> </View>
@@ -164,8 +163,7 @@ export default function UserDatabasePage() {
{/* 新建账号弹窗 */} {/* 新建账号弹窗 */}
{showAdd && ( {showAdd && (
<View className='modal-overlay'> <View className='modal-overlay'>
<View className='udb-add-card dashed-card'> <View className='udb-add-card surface-card'>
<View className='star-badge' />
<Text className='udb-add-title'>新建本地账号</Text> <Text className='udb-add-title'>新建本地账号</Text>
<Input <Input
className='udb-add-input' className='udb-add-input'
@@ -175,10 +173,10 @@ export default function UserDatabasePage() {
onInput={(e: any) => setNewNick(e.detail.value)} onInput={(e: any) => setNewNick(e.detail.value)}
/> />
<View className='udb-add-actions'> <View className='udb-add-actions'>
<View className='btn-outline' onTap={() => setShowAdd(false)}> <View className='btn-secondary' onTap={() => setShowAdd(false)}>
<Text>取消</Text> <Text>取消</Text>
</View> </View>
<View className='btn-gradient' onTap={handleCreate}> <View className='btn-primary' onTap={handleCreate}>
<Text>创建</Text> <Text>创建</Text>
</View> </View>
</View> </View>
src/pages/wordcloud/index.scss
+23 -17
View File
@@ -42,12 +42,12 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-bottom: 12px; margin-bottom: 12px;
border: 4px dashed var(--bg-input); border: 1rpx solid var(--border);
} }
.step-circle.active { .step-circle.active {
background: var(--btn-gradient); background: var(--accent-primary);
border-color: var(--accent-pink); border-color: var(--accent-primary);
} }
.step-num { .step-num {
@@ -66,7 +66,7 @@
} }
.step-label.active { .step-label.active {
color: var(--accent-pink); color: var(--accent-primary);
font-weight: 600; font-weight: 600;
} }
@@ -80,7 +80,7 @@
} }
.step-line.active { .step-line.active {
background: var(--btn-gradient); background: var(--accent-primary);
} }
/* 步骤内容 */ /* 步骤内容 */
@@ -94,6 +94,8 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border: 1rpx solid var(--border);
border-radius: 24rpx;
} }
.upload-placeholder { .upload-placeholder {
@@ -124,11 +126,11 @@
.upload-tip { .upload-tip {
font-size: 22px; font-size: 22px;
color: var(--accent-blue); color: var(--accent-secondary);
background: rgba(91, 140, 255, 0.1); background: var(--accent-secondary-soft);
padding: 8px 20px; padding: 8px 20px;
border-radius: 50px; border-radius: 999rpx;
border: var(--line-card); border: 1rpx solid var(--border);
} }
.preview-image { .preview-image {
@@ -148,6 +150,8 @@
/* 输入区域 */ /* 输入区域 */
.input-section { .input-section {
padding: 32px; padding: 32px;
border: 1rpx solid var(--border);
border-radius: 24rpx;
} }
.names-input { .names-input {
@@ -159,7 +163,7 @@
font-size: 28px; font-size: 28px;
line-height: 1.6; line-height: 1.6;
box-sizing: border-box; box-sizing: border-box;
border: var(--line-card); border: 1rpx solid var(--border);
color: var(--text-primary); color: var(--text-primary);
} }
@@ -218,14 +222,14 @@
.progress-bar { .progress-bar {
width: 80%; width: 80%;
height: 16px; height: 16px;
background: rgba(255, 154, 158, 0.15); background: var(--accent-primary-soft);
border-radius: 8px; border-radius: 8px;
overflow: hidden; overflow: hidden;
} }
.progress-fill { .progress-fill {
height: 100%; height: 100%;
background: var(--btn-gradient); background: var(--accent-primary);
border-radius: 8px; border-radius: 8px;
transition: width 0.5s ease; transition: width 0.5s ease;
} }
@@ -233,7 +237,7 @@
.progress-text { .progress-text {
font-size: 32px; font-size: 32px;
font-weight: 700; font-weight: 700;
color: var(--accent-pink); color: var(--accent-primary);
margin-top: 16px; margin-top: 16px;
} }
@@ -245,24 +249,26 @@
.result-image-wrapper { .result-image-wrapper {
overflow: hidden; overflow: hidden;
position: relative; position: relative;
border: 1rpx solid var(--border);
border-radius: 24rpx;
} }
.result-image { .result-image {
width: 100%; width: 100%;
height: 500px; 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 { .watermark-badge {
position: absolute; position: absolute;
bottom: 20px; bottom: 20px;
right: 20px; right: 20px;
background: rgba(255, 255, 255, 0.8); background: var(--glass);
color: var(--text-primary); color: var(--text-primary);
padding: 8px 20px; padding: 8px 20px;
border-radius: 8px; border-radius: 8px;
font-size: 22px; font-size: 22px;
border: var(--line-card); border: 1rpx solid var(--border);
} }
.result-actions { .result-actions {
@@ -313,5 +319,5 @@
.diy-jump-arrow { .diy-jump-arrow {
font-size: 40px; 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>
{/* 步骤指示器 */} {/* 步骤指示器 */}
<View className='step-indicator dashed-card'> <View className='step-indicator surface-card'>
{steps.map((s, idx) => ( {steps.map((s, idx) => (
<View key={s.num} className='step-item'> <View key={s.num} className='step-item'>
<View className={`step-circle ${step >= s.num ? 'active' : ''}`}> <View className={`step-circle ${step >= s.num ? 'active' : ''}`}>
@@ -88,7 +88,7 @@ export default function WordCloudPage() {
{/* 步骤1: 上传底图 */} {/* 步骤1: 上传底图 */}
{step === 1 && ( {step === 1 && (
<View className='step-content'> <View className='step-content'>
<View className='upload-area dashed-card' onTap={chooseImage}> <View className='upload-area surface-card' onTap={chooseImage}>
{baseImage ? ( {baseImage ? (
<Image className='preview-image' src={baseImage} mode='aspectFit' /> <Image className='preview-image' src={baseImage} mode='aspectFit' />
) : ( ) : (
@@ -102,10 +102,10 @@ export default function WordCloudPage() {
</View> </View>
{baseImage && ( {baseImage && (
<View className='action-btns'> <View className='action-btns'>
<View className='btn-gradient' onTap={() => setStep(2)}> <View className='btn-primary' onTap={() => setStep(2)}>
<Text>下一步：输入名单</Text> <Text>下一步：输入名单</Text>
</View> </View>
<View className='btn-outline' onTap={() => setBaseImage('')}> <View className='btn-secondary' onTap={() => setBaseImage('')}>
<Text>重新选择</Text> <Text>重新选择</Text>
</View> </View>
</View> </View>
@@ -116,7 +116,7 @@ export default function WordCloudPage() {
{/* 步骤2: 输入名单 */} {/* 步骤2: 输入名单 */}
{step === 2 && ( {step === 2 && (
<View className='step-content'> <View className='step-content'>
<View className='input-section dashed-card'> <View className='input-section surface-card'>
<Text className='section-title'>输入名字名单</Text> <Text className='section-title'>输入名字名单</Text>
<Textarea <Textarea
className='names-input' className='names-input'
@@ -134,10 +134,10 @@ export default function WordCloudPage() {
</View> </View>
</View> </View>
<View className='action-btns'> <View className='action-btns'>
<View className='btn-gradient' onTap={handleGenerate}> <View className='btn-primary' onTap={handleGenerate}>
<Text>开始生成词云</Text> <Text>开始生成词云</Text>
</View> </View>
<View className='btn-outline' onTap={() => setStep(1)}> <View className='btn-secondary' onTap={() => setStep(1)}>
<Text>上一步</Text> <Text>上一步</Text>
</View> </View>
</View> </View>
@@ -159,7 +159,7 @@ export default function WordCloudPage() {
</View> </View>
) : ( ) : (
<View className='result-panel'> <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' /> <Image className='result-image' src={generatedImage || ''} mode='aspectFit' />
<View className='watermark-badge'> <View className='watermark-badge'>
<Text>智绘微刻预览</Text> <Text>智绘微刻预览</Text>