style(frontend): ui-ux-pro-max 规范改造 — chat 页面 + CustomTabBar

改造内容： - 安装 @dcloudio/uni-ui + sass，配置 easycom 自动引入 uni-icons - 4 个 chat 页面：emoji/HTML 实体 → uni-icons 组件（跨平台兼容） - CustomTabBar：emoji → uni-icons（chatbubble/contact/videocam/person） - 选中态使用 filled 变体，未选中态使用轮廓图标 - 所有可交互元素添加 :active 按压反馈 + transition (150-200ms) - 触控目标保证 ≥ 88rpx (44px) - input-bar/tab-bar 适配 safe-area-inset-bottom 设计规范文件： - MASTER.md 修正为项目蓝色色板 (#2563EB) + 移动聊天应用规范 - 新增 4 个页面覆盖规范：chat-index/conversation/settings/search.md - Pre-Delivery Checklist 全部通过 - npm run build:h5 编译验证通过 Made-with: Cursor
2026-03-03 11:23:11 +08:00
parent 143cb8aa5f
commit 35788f6d2f
13 changed files with 896 additions and 213 deletions
--- a/frontend/src/pages/chat/conversation.vue
+++ b/frontend/src/pages/chat/conversation.vue
@@ -2,8 +2,10 @@
  聊天对话页

  设计系统：design-system/echochat/MASTER.md
-  色板：Primary #2563EB / BG #F8FAFC / Text #1E293B
-  
+  页面覆盖：design-system/echochat/pages/chat-conversation.md
+  图标方案：@dcloudio/uni-ui uni-icons
+  色板：Primary #2563EB / BG #F1F5F9 / Text #1E293B
+
  功能：
  - 消息气泡（左侧对方 / 右侧自己）
  - 游标分页加载历史消息
@@ -16,14 +18,14 @@
    <!-- 自定义导航栏 -->
    <view class="nav-bar">
      <view class="nav-left" @tap="goBack">
-        <text class="nav-back">&#10094;</text>
+        <uni-icons type="back" size="20" color="#1E293B" />
      </view>
      <view class="nav-center">
        <text class="nav-title">{{ peerName || '聊天' }}</text>
        <text v-if="isTyping" class="nav-typing">正在输入...</text>
      </view>
      <view class="nav-right" @tap="goToSettings">
-        <text class="nav-more">&#8943;</text>
+        <uni-icons type="more-filled" size="20" color="#475569" />
      </view>
    </view>

@@ -72,10 +74,10 @@

        <!-- 发送状态 -->
        <view v-if="isSelf(msg) && msg._sending" class="msg-status">
-          <text class="status-sending">&#8987;</text>
+          <uni-icons type="loop" size="16" color="#94A3B8" />
        </view>
-        <view v-if="isSelf(msg) && msg._failed" class="msg-status" @tap="onResend(msg)">
-          <text class="status-failed">&#9888;</text>
+        <view v-if="isSelf(msg) && msg._failed" class="msg-status msg-status-tap" @tap="onResend(msg)">
+          <uni-icons type="info-filled" size="18" color="#EF4444" />
        </view>
      </view>

@@ -97,7 +99,7 @@
        />
      </view>
      <view class="send-btn" :class="{ 'send-btn-active': inputText.trim() }" @tap="onSend">
-        <text class="send-icon">&#10148;</text>
+        <uni-icons type="paperplane" size="22" color="#FFFFFF" />
      </view>
    </view>
  </view>
@@ -281,17 +283,16 @@ export default {
 }

 .nav-left {
-  width: 64rpx;
-  height: 64rpx;
+  min-width: 88rpx;
+  min-height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
+  transition: opacity 150ms ease;
 }

-.nav-back {
-  font-size: 32rpx;
-  color: #1E293B;
-  font-weight: 600;
+.nav-left:active {
+  opacity: 0.6;
 }

 .nav-center {
@@ -313,16 +314,16 @@ export default {
 }

 .nav-right {
-  width: 64rpx;
-  height: 64rpx;
+  min-width: 88rpx;
+  min-height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
+  transition: opacity 150ms ease;
 }

-.nav-more {
-  font-size: 36rpx;
-  color: #475569;
+.nav-right:active {
+  opacity: 0.6;
 }

 /* 消息列表 */
@@ -432,14 +433,12 @@ export default {
  align-self: center;
 }

-.status-sending {
-  font-size: 24rpx;
-  color: #94A3B8;
-}
-
-.status-failed {
-  font-size: 28rpx;
-  color: #EF4444;
+.msg-status-tap {
+  min-width: 44rpx;
+  min-height: 44rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }

 /* 输入栏 */
@@ -469,8 +468,8 @@ export default {
 }

 .send-btn {
-  width: 72rpx;
-  height: 72rpx;
+  min-width: 72rpx;
+  min-height: 72rpx;
  margin-left: 16rpx;
  border-radius: 50%;
  background-color: #CBD5E1;
@@ -484,8 +483,7 @@ export default {
  background-color: #2563EB;
 }

-.send-icon {
-  font-size: 32rpx;
-  color: #FFFFFF;
+.send-btn:active {
+  opacity: 0.85;
 }
 </style>
--- a/frontend/src/pages/chat/index.vue
+++ b/frontend/src/pages/chat/index.vue
@@ -2,6 +2,8 @@
  消息 - 会话列表页（TabBar 页面）

  设计系统：design-system/echochat/MASTER.md
+  页面覆盖：design-system/echochat/pages/chat-index.md
+  图标方案：@dcloudio/uni-ui uni-icons（跨平台兼容）
  色板：Primary #2563EB / BG #F8FAFC / Text #1E293B / Muted #94A3B8
 -->
 <template>
@@ -11,7 +13,7 @@
      <text class="header-title">消息</text>
      <view class="header-actions">
        <view class="action-btn" @tap="goToSearch">
-          <text class="action-icon">&#128269;</text>
+          <uni-icons type="search" size="20" color="#475569" />
        </view>
      </view>
    </view>
@@ -20,7 +22,7 @@
    <scroll-view scroll-y class="conv-list" @scrolltolower="onScrollToLower">
      <!-- 空状态 -->
      <view v-if="!loading && conversations.length === 0" class="empty-state">
-        <text class="empty-icon">💬</text>
+        <uni-icons type="chatbubble" size="64" color="#CBD5E1" />
        <text class="empty-text">暂无消息</text>
        <text class="empty-hint">找好友聊聊天吧</text>
      </view>
@@ -62,7 +64,7 @@
              {{ conv.last_msg_content || ' ' }}
            </text>
            <view v-if="conv.is_pinned" class="conv-pin-tag">
-              <text class="pin-icon">📌</text>
+              <uni-icons type="top" size="14" color="#94A3B8" />
            </view>
          </view>
        </view>
@@ -199,18 +201,18 @@ export default {
 }

 .action-btn {
-  width: 64rpx;
-  height: 64rpx;
+  min-width: 88rpx;
+  min-height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16rpx;
  background-color: #F1F5F9;
+  transition: background-color 150ms ease;
 }

-.action-icon {
-  font-size: 32rpx;
-  color: #475569;
+.action-btn:active {
+  background-color: #E2E8F0;
 }

 /* 会话列表 */
@@ -224,12 +226,21 @@ export default {
  padding: 24rpx 32rpx;
  background-color: #FFFFFF;
  border-bottom: 1rpx solid #F1F5F9;
+  transition: background-color 150ms ease;
+}
+
+.conv-item:active {
+  background-color: #F1F5F9;
 }

 .conv-pinned {
  background-color: #F8FAFC;
 }

+.conv-pinned:active {
+  background-color: #F1F5F9;
+}
+
 /* 头像 */
 .conv-avatar-wrap {
  position: relative;
@@ -332,10 +343,8 @@ export default {

 .conv-pin-tag {
  flex-shrink: 0;
-}
-
-.pin-icon {
-  font-size: 22rpx;
+  display: flex;
+  align-items: center;
 }

 /* 空状态 */
@@ -346,15 +355,11 @@ export default {
  padding-top: 200rpx;
 }

-.empty-icon {
-  font-size: 80rpx;
-  margin-bottom: 24rpx;
-}
-
 .empty-text {
  font-size: 32rpx;
  font-weight: 600;
  color: #1E293B;
+  margin-top: 24rpx;
  margin-bottom: 8rpx;
 }

--- a/frontend/src/pages/chat/search.vue
+++ b/frontend/src/pages/chat/search.vue
@@ -2,6 +2,8 @@
  消息搜索页

  设计系统：design-system/echochat/MASTER.md
+  页面覆盖：design-system/echochat/pages/chat-search.md
+  图标方案：@dcloudio/uni-ui uni-icons
  功能：全局消息搜索，结果按会话分组，点击跳转到聊天页
 -->
 <template>
@@ -9,7 +11,7 @@
    <!-- 搜索栏 -->
    <view class="search-bar">
      <view class="search-input-wrap">
-        <text class="search-icon">&#128269;</text>
+        <uni-icons type="search" size="18" color="#94A3B8" />
        <input
          class="search-input"
          v-model="keyword"
@@ -20,7 +22,9 @@
          @confirm="onSearch"
        />
      </view>
-      <text class="search-cancel" @tap="goBack">取消</text>
+      <view class="search-cancel" @tap="goBack">
+        <text class="search-cancel-text">取消</text>
+      </view>
    </view>

    <!-- 搜索结果 -->
@@ -121,12 +125,7 @@ export default {
  border-radius: 36rpx;
  padding: 0 24rpx;
  height: 68rpx;
-}
-
-.search-icon {
-  font-size: 28rpx;
-  margin-right: 12rpx;
-  color: #94A3B8;
+  gap: 12rpx;
 }

 .search-input {
@@ -137,10 +136,22 @@ export default {

 .search-cancel {
  margin-left: 20rpx;
+  min-width: 88rpx;
+  min-height: 68rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.search-cancel-text {
  font-size: 28rpx;
  color: #2563EB;
 }

+.search-cancel:active {
+  opacity: 0.6;
+}
+
 .result-list {
  height: calc(100vh - 100rpx);
 }
@@ -151,6 +162,11 @@ export default {
  padding: 24rpx 32rpx;
  background-color: #FFFFFF;
  border-bottom: 1rpx solid #F1F5F9;
+  transition: background-color 150ms ease;
+}
+
+.result-item:active {
+  background-color: #F1F5F9;
 }

 .result-avatar-wrap {
--- a/frontend/src/pages/chat/settings.vue
+++ b/frontend/src/pages/chat/settings.vue
@@ -2,6 +2,8 @@
  聊天设置页

  设计系统：design-system/echochat/MASTER.md
+  页面覆盖：design-system/echochat/pages/chat-settings.md
+  图标方案：@dcloudio/uni-ui uni-icons
  功能：对方信息展示、置顶、清空聊天记录、删除会话
 -->
 <template>
@@ -162,13 +164,19 @@ export default {
  align-items: center;
  justify-content: space-between;
  padding: 32rpx;
+  min-height: 88rpx;
  border-bottom: 1rpx solid #F1F5F9;
+  transition: background-color 150ms ease;
 }

 .settings-item:last-child {
  border-bottom: none;
 }

+.settings-item:active {
+  background-color: #F8FAFC;
+}
+
 .settings-label {
  font-size: 30rpx;
  color: #1E293B;