From 57b8aeebe4c834c10faa019fc57cfe96d8fb2d2b Mon Sep 17 00:00:00 2001 From: wikiboss Date: Wed, 16 Sep 2026 20:18:34 +0800 Subject: [PATCH] =?UTF-8?q?feat(activity):=20=E6=B4=BB=E5=8A=A8=E5=A4=A7?= =?UTF-8?q?=E5=8E=85=E5=85=A8=E9=9D=A2=E4=BB=A5=E9=99=AA=E5=90=83=C2=B7?= =?UTF-8?q?=E9=99=AA=E5=94=B1=C2=B7=E9=99=AA=E5=96=9D=E4=B8=BA=E4=B8=BB?= =?UTF-8?q?=EF=BC=8C=E5=A2=9E=E5=8A=A0=E5=93=81=E7=B1=BB=E5=BF=AB=E6=8D=B7?= =?UTF-8?q?=E8=83=B6=E5=9B=8A=E7=AD=9B=E9=80=89=E5=B9=B6=E5=AE=8C=E5=96=84?= =?UTF-8?q?TDD=E9=97=A8=E7=A6=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/UIUX设计系统与约束规范文档.md | 39 ++++- pwuniapp/common/mock.js | 166 +++++++++++++-------- pwuniapp/pages/activity/list.vue | 85 ++++++++++- pwuniapp/pages/index/index.vue | 48 +++++- server/tests/activity-list-content.spec.ts | 93 ++++++++++++ 5 files changed, 359 insertions(+), 72 deletions(-) create mode 100644 server/tests/activity-list-content.spec.ts diff --git a/docs/UIUX设计系统与约束规范文档.md b/docs/UIUX设计系统与约束规范文档.md index d3b0440..15ddb1d 100644 --- a/docs/UIUX设计系统与约束规范文档.md +++ b/docs/UIUX设计系统与约束规范文档.md @@ -75,11 +75,15 @@ graph TD ## 3. 设计规范系统(Design Tokens) -### 3.1 色彩语义系统(Color Palette Tokens) -全套界面以暗夜深空蓝黑为底色,强化高对比度与电竞发光氛围: +### 3.1 色彩语义系统(Color Palette Tokens: 双主题架构) + +系统支持【冷光暗夜 Cyber Cold (默认)】与【暖阳赤焰 Sunset Amber (暖色系)】双套色彩体系自由切换,兼顾硬核电竞沉浸质感与同城生活社交温馨活力: + +#### 3.1.1 经典冷光暗夜 (Cyber Cold - Default) +以深邃夜空黑与电竞靛蓝为主色调: ```scss -// 主题色彩 Tokens (uni.scss / tailwind tokens) +// 经典冷光暗夜 Tokens $bg-primary: #0A0F1D; // 页面全局最底色 (深邃暗夜黑) $bg-surface: #151D30; // 卡片/模块容器底色 (暗夜深空蓝) $bg-surface-elevated: #1E2942; // 次级浮层/下拉/弹窗底色 @@ -90,8 +94,8 @@ $color-brand: #6366F1; // 品牌核心蓝紫 (Primary CTA) $color-brand-light: #818CF8; $color-brand-glow: rgba(99, 102, 241, 0.35); // 发光阴影色 -// 业务强调色 (特别为活动项目与状态指示设定) -$color-accent: #10B981; // 翠绿高光色 (活动项目标签、在线呼吸灯、成功状态) +// 业务强调色 +$color-accent: #10B981; // 翠绿高光色 (活动标签、在线呼吸灯、成功状态) $color-accent-glow: rgba(16, 185, 129, 0.3); $color-warning: #F59E0B; // 暖橙金 (金牌大神等级标签、待支付倒计时) $color-danger: #EF4444; // 警示红 (退款仲裁、违规警告) @@ -104,6 +108,31 @@ $border-subtle: #1E293B; // 卡片外描边/分割线 $border-focus: #4F46E5; // 激活描边色 ``` +#### 3.1.2 暖阳赤焰暖色系 (Sunset Amber & Warm Ember) +以暖夜焦糖深褐黑为底色,以暖阳曜橙与琥珀金为流光,契合同城探店、陪吃、陪喝、陪唱等温暖治愈系生活场景: + +```scss +// 暖阳赤焰专属 Tokens +$warm-bg-primary: #140E0A; // 页面全局最底色 (暖夜焦糖深褐黑) +$warm-bg-surface: #221711; // 卡片容器底色 (暗夜暖咖琥珀) +$warm-bg-surface-elevated: #2E1F17; // 次级浮层底色 (浅暖咖) +$warm-bg-surface-glass: rgba(34, 23, 17, 0.85); // 拟态磨砂玻璃 + +// 品牌核心与暖色流光 +$warm-color-brand: #F97316; // 核心曜橙 (Primary CTA,极具温度与能量) +$warm-color-brand-light: #FB923C; // 暖橙高光 +$warm-color-brand-gold: #F59E0B; // 琥珀暖金流光 +$warm-color-brand-glow: rgba(249, 115, 22, 0.35); // 暖橙弥散发光光晕 +$warm-color-brand-gradient: linear-gradient(135deg, #F97316, #F59E0B); + +// 文本与无障碍对比色阶 (严格满足 WCAG AA 标准) +$warm-text-primary: #FFF7ED; // 一级主文本 (暖白,对比度 > 13:1) +$warm-text-secondary: #C7B5A7; // 二级描述文本 (暖灰褐,对比度 > 5.5:1) +$warm-text-muted: #8C7565; // 三级占位说明 (暗咖灰,对比度 > 3.5:1) +$warm-border-subtle: #342217; // 暖色分割线与卡片描边 +$warm-border-focus: #EA580C; // 激活描边色 +``` + --- ### 3.2 响应式栅格与间距阶梯(Spacing & Layout Scale) diff --git a/pwuniapp/common/mock.js b/pwuniapp/common/mock.js index 17417ac..0c8cc8e 100644 --- a/pwuniapp/common/mock.js +++ b/pwuniapp/common/mock.js @@ -233,76 +233,120 @@ export const EXPERTS_LIST = [ export const ACTIVITIES_LIST = [ { id: 'act_101', - title: '【AA制五排】今晚8点王者百星车队冲分', - game: '王者荣耀', - payType: 'AA', - totalFee: 120, - aaFee: 30, - maxParticipants: 4, - currentParticipants: 3, - startTime: '今晚 20:00', - location: '开黑语音1号频道', - creatorNickname: '月色浅浅', - creatorAvatar: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=100', - status: 'RECRUITING', - participants: [ - { id: 'p1', nickname: '峡谷追梦', avatar: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=100', verifyCode: '8392', checkedIn: false }, - { id: 'p2', nickname: '无敌小刺客', avatar: 'https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?w=100', verifyCode: '6147', checkedIn: true }, - { id: 'p3', nickname: '快乐小风男', avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100', verifyCode: '9025', checkedIn: false }, - ], - }, - { - id: 'act_102', - title: '【项目制·粉丝福利】夜鹰带队水友吃鸡四排', - game: '和平精英', - payType: 'PROJECT', - totalFee: 300, - aaFee: 0, - maxParticipants: 3, - currentParticipants: 3, - startTime: '周六 15:00', - location: 'YY频道 668899', - creatorNickname: '夜鹰狙神', - creatorAvatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100', - status: 'RUNNING', - participants: [ - { id: 'p4', nickname: '绝地菜鸟', avatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100', verifyCode: '2481', checkedIn: true }, - { id: 'p5', nickname: '伏地魔本魔', avatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=100', verifyCode: '7390', checkedIn: false }, - ], - }, - { - id: 'act_103', - title: '【AA制】无畏契约五黑内战水友欢乐局', - game: '无畏契约', - payType: 'AA', - totalFee: 160, - aaFee: 20, - maxParticipants: 8, - currentParticipants: 5, - startTime: '周日 19:30', - location: '自定义内战房间', - creatorNickname: '瞬移者雷克', - creatorAvatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=100', - status: 'RECRUITING', - participants: [], - }, - { - id: 'act_104', - title: '【AA制火锅】周末三里屯地道铜锅涮肉探店搭子', + title: '【陪吃·铜锅涮肉】周末三里屯地道老北京火锅探店AA局', game: '美食陪吃', track: 'OFFLINE_MEAL', payType: 'AA', - totalFee: 200, - aaFee: 50, + totalFee: 240, + aaFee: 60, maxParticipants: 4, - currentParticipants: 2, + currentParticipants: 3, startTime: '周六 18:30', - location: '朝阳区三里屯商圈聚宝源', + location: '北京市朝阳区三里屯聚宝源铜锅涮肉', creatorNickname: '橙子小七', creatorAvatar: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=100', status: 'RECRUITING', participants: [ - { id: 'p6', nickname: '涮肉小行家', avatar: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=100', verifyCode: '5821', checkedIn: false }, + { id: 'p1', nickname: '涮肉小行家', avatar: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=100', verifyCode: '8392', checkedIn: false }, + { id: 'p2', nickname: '快乐干饭人', avatar: 'https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?w=100', verifyCode: '6147', checkedIn: true }, + { id: 'p3', nickname: '胡同老饕', avatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100', verifyCode: '9025', checkedIn: false }, + ], + }, + { + id: 'act_102', + title: '【陪唱·KTV欢唱】周五晚工体纯K麦霸减压欢唱局·房主请客包厢', + game: '同城陪唱', + track: 'OFFLINE_SING', + payType: 'PROJECT', + totalFee: 600, + aaFee: 0, + maxParticipants: 6, + currentParticipants: 4, + startTime: '周五 20:00', + location: '北京市朝阳区工人体育场纯K 888豪华大包', + creatorNickname: '苏苏学姐', + creatorAvatar: 'https://images.unsplash.com/photo-1524504388940-b1c1722653e1?w=100', + status: 'RECRUITING', + participants: [ + { id: 'p4', nickname: '情歌王子', avatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100', verifyCode: '2481', checkedIn: true }, + { id: 'p5', nickname: '高音小王子', avatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=100', verifyCode: '7390', checkedIn: false }, + ], + }, + { + id: 'act_103', + title: '【陪喝·高空下午茶】国贸云端景观双人下午茶拍照闲聊', + game: '下午茶陪喝', + track: 'OFFLINE_DRINK', + payType: 'AA', + totalFee: 196, + aaFee: 98, + maxParticipants: 2, + currentParticipants: 1, + startTime: '周日 14:30', + location: '北京市朝阳区国贸商城高空云端景观咖啡', + creatorNickname: '清芷', + creatorAvatar: 'https://images.unsplash.com/photo-1517841905240-472988babdf9?w=100', + status: 'RECRUITING', + participants: [ + { id: 'p6', nickname: '拿铁爱好者', avatar: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=100', verifyCode: '5821', checkedIn: false }, + ], + }, + { + id: 'act_104', + title: '【陪吃·炭火烤肉】望京韩国街地道厚切五花肉深夜食堂搭子', + game: '美食陪吃', + track: 'OFFLINE_MEAL', + payType: 'AA', + totalFee: 260, + aaFee: 65, + maxParticipants: 4, + currentParticipants: 2, + startTime: '周六 19:00', + location: '北京市朝阳区望京新天地地道炭火烤肉', + creatorNickname: '桃子汽水', + creatorAvatar: 'https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=100', + status: 'RECRUITING', + participants: [ + { id: 'p7', nickname: '烤肉达人', avatar: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=100', verifyCode: '3192', checkedIn: false }, + ], + }, + { + id: 'act_105', + title: '【陪喝·精酿微醺】五道营胡同屋顶露台精酿清吧品酒局', + game: '同城微醺', + track: 'OFFLINE_DRINK', + payType: 'PROJECT', + totalFee: 480, + aaFee: 0, + maxParticipants: 4, + currentParticipants: 3, + startTime: '周六 21:00', + location: '北京市东城区五道营胡同露台精酿餐吧', + creatorNickname: '夜鹰', + creatorAvatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100', + status: 'RECRUITING', + participants: [ + { id: 'p8', nickname: '微醺客', avatar: 'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=100', verifyCode: '4912', checkedIn: true }, + ], + }, + { + id: 'act_106', + title: '【陪唱·音乐清吧】五道口民谣现场驻唱与合唱拼桌', + game: '同城陪唱', + track: 'OFFLINE_SING', + payType: 'AA', + totalFee: 200, + aaFee: 50, + maxParticipants: 4, + currentParticipants: 4, + startTime: '周日 20:30', + location: '北京市海淀区五道口民谣音乐清吧', + creatorNickname: '月色浅浅', + creatorAvatar: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=100', + status: 'RUNNING', + participants: [ + { id: 'p9', nickname: '吉他手阿杰', avatar: 'https://images.unsplash.com/photo-1570295999919-56ceb5ecca61?w=100', verifyCode: '7721', checkedIn: true }, + { id: 'p10', nickname: '民谣小调', avatar: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100', verifyCode: '8832', checkedIn: true }, ], }, ]; diff --git a/pwuniapp/pages/activity/list.vue b/pwuniapp/pages/activity/list.vue index 2ec43a2..819ea6f 100644 --- a/pwuniapp/pages/activity/list.vue +++ b/pwuniapp/pages/activity/list.vue @@ -1,5 +1,5 @@