wanglei/EchoChat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
改造内容：
- 安装 @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
This commit is contained in:
bujinyuan
2026-03-03 11:23:11 +08:00
parent 143cb8aa5f
commit 35788f6d2f
13 changed files with 896 additions and 213 deletions
Download Patch File Download Diff File Expand all files Collapse all files

409
frontend/package-lock.json generated
View File

@@ -24,6 +24,7 @@
"@dcloudio/uni-mp-weixin": "3.0.0-4080720251210001",
"@dcloudio/uni-mp-xhs": "3.0.0-4080720251210001",
"@dcloudio/uni-quickapp-webview": "3.0.0-4080720251210001",
"@dcloudio/uni-ui": "^1.5.11",
"pinia": "^2.1.7",
"pinia-plugin-persistedstate": "^3.2.3",
"vue": "^3.4.21",
@@ -36,6 +37,7 @@
"@dcloudio/uni-stacktracey": "3.0.0-4080720251210001",
"@dcloudio/vite-plugin-uni": "3.0.0-4080720251210001",
"@vue/runtime-core": "^3.4.21",
"sass": "^1.97.3",
"vite": "5.2.8"
}
},
@@ -2553,6 +2555,12 @@
"debug": "4.3.7"
}
},
"node_modules/@dcloudio/uni-ui": {
"version": "1.5.11",
"resolved": "https://registry.npmjs.org/@dcloudio/uni-ui/-/uni-ui-1.5.11.tgz",
"integrity": "sha512-DBtk046ofmeFd82zRI7d89SoEwrAxYzUN3WVPm1DIBkpLPG5F5QDNkHMnZGu2wNrMEmGBjBpUh3vqEY1L3jaMw==",
"license": "Apache-2.0"
},
"node_modules/@dcloudio/vite-plugin-uni": {
"version": "3.0.0-4080720251210001",
"resolved": "https://registry.npmjs.org/@dcloudio/vite-plugin-uni/-/vite-plugin-uni-3.0.0-4080720251210001.tgz",
@@ -3689,6 +3697,330 @@
"node": ">= 8"
}
},
"node_modules/@parcel/watcher": {
"version": "2.5.6",
"resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.6.tgz",
"integrity": "sha512-tmmZ3lQxAe/k/+rNnXQRawJ4NjxO2hqiOLTHvWchtGZULp4RyFeh6aU4XdOYBFe2KE1oShQTv4AblOs2iOrNnQ==",
"dev": true,
"hasInstallScript": true,
"license": "MIT",
"optional": true,
"dependencies": {
"detect-libc": "^2.0.3",
"is-glob": "^4.0.3",
"node-addon-api": "^7.0.0",
"picomatch": "^4.0.3"
},
"engines": {
"node": ">= 10.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
},
"optionalDependencies": {
"@parcel/watcher-android-arm64": "2.5.6",
"@parcel/watcher-darwin-arm64": "2.5.6",
"@parcel/watcher-darwin-x64": "2.5.6",
"@parcel/watcher-freebsd-x64": "2.5.6",
"@parcel/watcher-linux-arm-glibc": "2.5.6",
"@parcel/watcher-linux-arm-musl": "2.5.6",
"@parcel/watcher-linux-arm64-glibc": "2.5.6",
"@parcel/watcher-linux-arm64-musl": "2.5.6",
"@parcel/watcher-linux-x64-glibc": "2.5.6",
"@parcel/watcher-linux-x64-musl": "2.5.6",
"@parcel/watcher-win32-arm64": "2.5.6",
"@parcel/watcher-win32-ia32": "2.5.6",
"@parcel/watcher-win32-x64": "2.5.6"
}
},
"node_modules/@parcel/watcher-android-arm64": {
"version": "2.5.6",
"resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.6.tgz",
"integrity": "sha512-YQxSS34tPF/6ZG7r/Ih9xy+kP/WwediEUsqmtf0cuCV5TPPKw/PQHRhueUo6JdeFJaqV3pyjm0GdYjZotbRt/A==",
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"android"
],
"engines": {
"node": ">= 10.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/@parcel/watcher-darwin-arm64": {
"version": "2.5.6",
"resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.6.tgz",
"integrity": "sha512-Z2ZdrnwyXvvvdtRHLmM4knydIdU9adO3D4n/0cVipF3rRiwP+3/sfzpAwA/qKFL6i1ModaabkU7IbpeMBgiVEA==",
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"darwin"
],
"engines": {
"node": ">= 10.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/@parcel/watcher-darwin-x64": {
"version": "2.5.6",
"resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.6.tgz",
"integrity": "sha512-HgvOf3W9dhithcwOWX9uDZyn1lW9R+7tPZ4sug+NGrGIo4Rk1hAXLEbcH1TQSqxts0NYXXlOWqVpvS1SFS4fRg==",
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"darwin"
],
"engines": {
"node": ">= 10.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/@parcel/watcher-freebsd-x64": {
"version": "2.5.6",
"resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.6.tgz",
"integrity": "sha512-vJVi8yd/qzJxEKHkeemh7w3YAn6RJCtYlE4HPMoVnCpIXEzSrxErBW5SJBgKLbXU3WdIpkjBTeUNtyBVn8TRng==",
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"freebsd"
],
"engines": {
"node": ">= 10.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/@parcel/watcher-linux-arm-glibc": {
"version": "2.5.6",
"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.6.tgz",
"integrity": "sha512-9JiYfB6h6BgV50CCfasfLf/uvOcJskMSwcdH1PHH9rvS1IrNy8zad6IUVPVUfmXr+u+Km9IxcfMLzgdOudz9EQ==",
"cpu": [
"arm"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/@parcel/watcher-linux-arm-musl": {
"version": "2.5.6",
"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.6.tgz",
"integrity": "sha512-Ve3gUCG57nuUUSyjBq/MAM0CzArtuIOxsBdQ+ftz6ho8n7s1i9E1Nmk/xmP323r2YL0SONs1EuwqBp2u1k5fxg==",
"cpu": [
"arm"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/@parcel/watcher-linux-arm64-glibc": {
"version": "2.5.6",
"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.6.tgz",
"integrity": "sha512-f2g/DT3NhGPdBmMWYoxixqYr3v/UXcmLOYy16Bx0TM20Tchduwr4EaCbmxh1321TABqPGDpS8D/ggOTaljijOA==",
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/@parcel/watcher-linux-arm64-musl": {
"version": "2.5.6",
"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.6.tgz",
"integrity": "sha512-qb6naMDGlbCwdhLj6hgoVKJl2odL34z2sqkC7Z6kzir8b5W65WYDpLB6R06KabvZdgoHI/zxke4b3zR0wAbDTA==",
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/@parcel/watcher-linux-x64-glibc": {
"version": "2.5.6",
"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.6.tgz",
"integrity": "sha512-kbT5wvNQlx7NaGjzPFu8nVIW1rWqV780O7ZtkjuWaPUgpv2NMFpjYERVi0UYj1msZNyCzGlaCWEtzc+exjMGbQ==",
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/@parcel/watcher-linux-x64-musl": {
"version": "2.5.6",
"resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.6.tgz",
"integrity": "sha512-1JRFeC+h7RdXwldHzTsmdtYR/Ku8SylLgTU/reMuqdVD7CtLwf0VR1FqeprZ0eHQkO0vqsbvFLXUmYm/uNKJBg==",
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"linux"
],
"engines": {
"node": ">= 10.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/@parcel/watcher-win32-arm64": {
"version": "2.5.6",
"resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.6.tgz",
"integrity": "sha512-3ukyebjc6eGlw9yRt678DxVF7rjXatWiHvTXqphZLvo7aC5NdEgFufVwjFfY51ijYEWpXbqF5jtrK275z52D4Q==",
"cpu": [
"arm64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">= 10.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/@parcel/watcher-win32-ia32": {
"version": "2.5.6",
"resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.6.tgz",
"integrity": "sha512-k35yLp1ZMwwee3Ez/pxBi5cf4AoBKYXj00CZ80jUz5h8prpiaQsiRPKQMxoLstNuqe2vR4RNPEAEcjEFzhEz/g==",
"cpu": [
"ia32"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">= 10.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/@parcel/watcher-win32-x64": {
"version": "2.5.6",
"resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.6.tgz",
"integrity": "sha512-hbQlYcCq5dlAX9Qx+kFb0FHue6vbjlf0FrNzSKdYK2APUf7tGfGxQCk2ihEREmbR6ZMc0MVAD5RIX/41gpUzTw==",
"cpu": [
"x64"
],
"dev": true,
"license": "MIT",
"optional": true,
"os": [
"win32"
],
"engines": {
"node": ">= 10.0.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/parcel"
}
},
"node_modules/@parcel/watcher/node_modules/picomatch": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
"integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
"dev": true,
"license": "MIT",
"optional": true,
"engines": {
"node": ">=12"
},
"funding": {
"url": "https://github.com/sponsors/jonschlinkert"
}
},
"node_modules/@rollup/pluginutils": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.0.tgz",
@@ -5230,6 +5562,17 @@
"npm": "1.2.8000 || >= 1.4.16"
}
},
"node_modules/detect-libc": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
"integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
"dev": true,
"license": "Apache-2.0",
"optional": true,
"engines": {
"node": ">=8"
}
},
"node_modules/dom-walk": {
"version": "0.1.2",
"resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz",
@@ -5919,6 +6262,13 @@
],
"license": "BSD-3-Clause"
},
"node_modules/immutable": {
"version": "5.1.4",
"resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.4.tgz",
"integrity": "sha512-p6u1bG3YSnINT5RQmx/yRZBpenIl30kVxkTLDyHLIMk0gict704Q9n+thfDI7lTRm9vXdDYutVzXhzcThxTnXA==",
"dev": true,
"license": "MIT"
},
"node_modules/inherits": {
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
@@ -6492,6 +6842,14 @@
"node": ">= 0.6"
}
},
"node_modules/node-addon-api": {
"version": "7.1.1",
"resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
"integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
"dev": true,
"license": "MIT",
"optional": true
},
"node_modules/node-releases": {
"version": "2.0.27",
"resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.27.tgz",
@@ -7312,6 +7670,57 @@
"dev": true,
"license": "MIT"
},
"node_modules/sass": {
"version": "1.97.3",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.97.3.tgz",
"integrity": "sha512-fDz1zJpd5GycprAbu4Q2PV/RprsRtKC/0z82z0JLgdytmcq0+ujJbJ/09bPGDxCLkKY3Np5cRAOcWiVkLXJURg==",
"dev": true,
"license": "MIT",
"dependencies": {
"chokidar": "^4.0.0",
"immutable": "^5.0.2",
"source-map-js": ">=0.6.2 <2.0.0"
},
"bin": {
"sass": "sass.js"
},
"engines": {
"node": ">=14.0.0"
},
"optionalDependencies": {
"@parcel/watcher": "^2.4.1"
}
},
"node_modules/sass/node_modules/chokidar": {
"version": "4.0.3",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
"integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
"dev": true,
"license": "MIT",
"dependencies": {
"readdirp": "^4.0.1"
},
"engines": {
"node": ">= 14.16.0"
},
"funding": {
"url": "https://paulmillr.com/funding/"
}
},
"node_modules/sass/node_modules/readdirp": {
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
"integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
"dev": true,
"license": "MIT",
"engines": {
"node": ">= 14.18.0"
},
"funding": {
"type": "individual",
"url": "https://paulmillr.com/funding/"
}
},
"node_modules/sax": {
"version": "1.4.4",
"resolved": "https://registry.npmjs.org/sax/-/sax-1.4.4.tgz",

2
frontend/package.json
View File

@@ -52,6 +52,7 @@
"@dcloudio/uni-mp-weixin": "3.0.0-4080720251210001",
"@dcloudio/uni-mp-xhs": "3.0.0-4080720251210001",
"@dcloudio/uni-quickapp-webview": "3.0.0-4080720251210001",
"@dcloudio/uni-ui": "^1.5.11",
"pinia": "^2.1.7",
"pinia-plugin-persistedstate": "^3.2.3",
"vue": "^3.4.21",
@@ -64,6 +65,7 @@
"@dcloudio/uni-stacktracey": "3.0.0-4080720251210001",
"@dcloudio/vite-plugin-uni": "3.0.0-4080720251210001",
"@vue/runtime-core": "^3.4.21",
"sass": "^1.97.3",
"vite": "5.2.8"
}
}

49
frontend/src/components/CustomTabBar.vue
View File

@@ -1,16 +1,15 @@
<!--
自定义 TabBar 组件
设计系统：design-system/echochat/MASTER.md
图标方案：@dcloudio/uni-ui uni-icons（跨平台兼容）
色板：Primary #2563EB / Text #1E293B / Muted #94A3B8
功能：
- 底部导航栏，4 个 Tab：消息 / 联系人 / 会议 / 我的
- 选中状态高亮（Primary 色）
- 使用 Unicode 图标占位（后续可替换为 SVG 图标组件）
- 支持 switchTab 跳转
使用方式：在每个 TabBar 页面中引入此组件并放在页面底部
- 选中态使用 filled 图标 + Primary 色，未选中态使用轮廓图标 + Muted 色
- 消息 Tab 支持未读消息 badge
- 使用 switchTab 跳转
-->
<template>
<view class="tab-bar">
@@ -22,7 +21,11 @@
@tap="switchTo(index)"
>
<view class="tab-icon-wrap">
<text class="tab-icon">{{ item.icon }}</text>
<uni-icons
:type="currentIndex === index ? item.iconActive : item.icon"
size="24"
:color="currentIndex === index ? '#2563EB' : '#94A3B8'"
/>
<text v-if="getBadge(index) > 0" class="tab-badge">{{ getBadge(index) > 99 ? '99+' : getBadge(index) }}</text>
</view>
<text class="tab-label">{{ item.label }}</text>
@@ -40,6 +43,7 @@
* 功能：
* - 跳转使用 uni.switchTab，确保与 pages.json tabBar 配置的页面一致
* - 消息 Tab（index=0）显示全局未读消息 badge
* - 选中态使用 filled 图标变体以增强视觉区分
*/
import { useChatStore } from '@/store/chat'
@@ -54,12 +58,12 @@ export default {
},
data() {
return {
/** Tab 配置列表 */
/** Tab 配置列表：icon 为未选中态，iconActive 为选中态 */
tabs: [
{ path: '/pages/chat/index', label: '消息', icon: '💬' },
{ path: '/pages/contact/index', label: '联系人', icon: '👥' },
{ path: '/pages/meeting/index', label: '会议', icon: '🎥' },
{ path: '/pages/profile/index', label: '我的', icon: '👤' }
{ path: '/pages/chat/index', label: '消息', icon: 'chatbubble', iconActive: 'chatbubble-filled' },
{ path: '/pages/contact/index', label: '联系人', icon: 'contact', iconActive: 'contact-filled' },
{ path: '/pages/meeting/index', label: '会议', icon: 'videocam', iconActive: 'videocam-filled' },
{ path: '/pages/profile/index', label: '我的', icon: 'person', iconActive: 'person-filled' }
]
}
},
@@ -94,13 +98,6 @@ export default {
</script>
<style scoped>
/*
* 设计系统：MASTER.md
* 选中色：#2563EB（Primary）
* 未选中色：#94A3B8（Muted）
* 背景：#FFFFFF + 顶部分割线
* 高度：适配安全区域（底部 safe area）
*/
.tab-bar {
position: fixed;
bottom: 0;
@@ -123,7 +120,12 @@ export default {
justify-content: center;
flex: 1;
height: 100%;
transition: color 200ms ease;
min-height: 88rpx;
transition: opacity 150ms ease;
}
.tab-item:active {
opacity: 0.7;
}
.tab-icon-wrap {
@@ -131,10 +133,6 @@ export default {
display: flex;
align-items: center;
justify-content: center;
}
.tab-icon {
font-size: 40rpx;
margin-bottom: 4rpx;
}
@@ -159,7 +157,6 @@ export default {
font-weight: 400;
}
/* 选中状态 */
.tab-active .tab-label {
color: #2563EB;
font-weight: 500;

6
frontend/src/pages.json
View File

@@ -1,4 +1,10 @@
{
"easycom": {
"autoscan": true,
"custom": {
"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
}
},
"pages": [
{
"path": "pages/index/index",

62
frontend/src/pages/chat/conversation.vue
View File

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

39
frontend/src/pages/chat/index.vue
View File

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

32
frontend/src/pages/chat/search.vue
View File

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

8
frontend/src/pages/chat/settings.vue
View File

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