From 5a5e51b821e078c15736e41f442c599ebe07fe79 Mon Sep 17 00:00:00 2001
From: zhaichao <zhaichao@fengyingkj.top>
Date: Wed, 23 Sep 2026 18:32:35 +0800
Subject: [PATCH] =?UTF-8?q?=E8=81=8A=E5=A4=A9=E9=A1=B5=E9=9D=A2=E5=9F=BA?=
 =?UTF-8?q?=E6=9C=AC=E5=8F=98=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/chat/chat.vue | 203 ++++++++++++++++++++++++++------------------
 1 file changed, 121 insertions(+), 82 deletions(-)

diff --git a/pages/chat/chat.vue b/pages/chat/chat.vue
index 1423406..6a1af28 100644
--- a/pages/chat/chat.vue
+++ b/pages/chat/chat.vue
@@ -110,7 +110,18 @@
         <text class="qx" @click="quoting = null">×</text>
       </view>
       <view class="bar">
-        <text class="tool" @click="toggleVoice">{{ voiceMode ? '⌨' : '🎤' }}</text>
+        <view class="tool" @click="toggleVoice">
+          <view v-if="voiceMode" class="kbd">
+            <view class="krow" />
+            <view class="krow" />
+            <view class="kspace" />
+          </view>
+          <view v-else class="mic">
+            <view class="mic-head" />
+            <view class="mic-arc" />
+            <view class="mic-stem" />
+          </view>
+        </view>
         <view
           v-if="voiceMode"
           class="hold"
@@ -715,89 +726,117 @@ export default {
 </script>
 
 <style scoped>
-.chat { display: flex; flex-direction: column; height: 100vh; overflow: hidden; background: #ededed; }
-.msgs { flex: 1; height: 0; padding: 12rpx 20rpx 8rpx; box-sizing: border-box; }
-.chip-time { text-align: center; margin: 16rpx auto; background: rgba(0,0,0,.08); color: #fff; font-size: 20rpx; padding: 4rpx 16rpx; border-radius: 8rpx; width: fit-content; }
-.sys { text-align: center; color: #888; font-size: 22rpx; padding: 12rpx 0 20rpx; }
-.empty { text-align: center; color: #888; padding: 80rpx 0; font-size: 26rpx; }
-.row { margin-bottom: 22rpx; display: flex; align-items: flex-start; gap: 12rpx; }
-.row.mine { justify-content: flex-end; }
-.row.pick { padding-left: 0; }
-.ck { width: 36rpx; height: 36rpx; border: 2rpx solid #bbb; border-radius: 50%; margin-top: 20rpx; flex-shrink: 0; }
-.ck.on { background: #07c160; border-color: #07c160; }
-.col { max-width: 70%; display: flex; flex-direction: column; }
-.col.mine { align-items: flex-end; }
-.av { width: 80rpx; height: 80rpx; border-radius: 10rpx; background: #dae2fd; color: #1677FF; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 28rpx; font-weight: 700; }
-.av.self { background: #1677FF; color: #fff; }
-.av image { width: 80rpx; height: 80rpx; }
-.who { font-size: 20rpx; color: #888; margin-bottom: 4rpx; }
-.ball { background: #fff; padding: 16rpx 20rpx; border-radius: 8rpx; font-size: 30rpx; word-break: break-all; line-height: 1.45; }
-.ball.self { background: #95ec69; color: #111; }
-.ball.work { background: #fff; }
-.ball.voice { min-width: 140rpx; }
-.quote { background: rgba(0,0,0,.06); color: #666; font-size: 22rpx; padding: 8rpx 12rpx; border-radius: 6rpx; margin-bottom: 10rpx; }
-.pic { max-width: 420rpx; border-radius: 8rpx; display: block; }
-.file, .cardtxt { display: flex; flex-direction: column; }
-.fn, .ct { font-weight: 600; }
-.fs, .cs { font-size: 22rpx; margin-top: 6rpx; color: #1677FF; }
-.tm { font-size: 20rpx; color: #b2b2b2; margin-top: 6rpx; }
-.tm.read { color: #07c160; }
-.recmask {
-  position: fixed;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  z-index: 30;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: rgba(0, 0, 0, 0.01);
-  touch-action: none;
-}
-.recbox { width: 360rpx; height: 280rpx; background: rgba(0,0,0,.72); color: #fff; border-radius: 20rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 26rpx; }
-.recbox.cancel { background: rgba(186,26,26,.85); }
-.recsec { font-size: 48rpx; font-weight: 700; margin-bottom: 12rpx; }
-.composer { background: #f7f7f7; border-top: 1rpx solid #e5e5e5; }
-.qbar { display: flex; align-items: center; padding: 10rpx 20rpx 0; }
-.qt { flex: 1; font-size: 22rpx; color: #888; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.qx { padding: 0 12rpx; color: #888; }
-.bar { display: flex; align-items: flex-end; padding: 12rpx 12rpx 0; gap: 10rpx; }
-.tool { width: 64rpx; height: 64rpx; text-align: center; line-height: 64rpx; font-size: 36rpx; color: #111; }
-.plus { font-size: 44rpx; font-weight: 300; }
-.box { flex: 1; min-height: 72rpx; background: #fff; border-radius: 8rpx; display: flex; align-items: center; padding: 0 16rpx; }
-.box input { flex: 1; height: 72rpx; }
-.hold {
-  flex: 1;
-  height: 72rpx;
-  background: #fff;
-  border-radius: 8rpx;
+.chat { display: flex; flex-direction: column; height: 100%; overflow: hidden; background: #F5F7FA; }
+.msgs { flex: 1; height: 0; padding: 8rpx 24rpx 12rpx; box-sizing: border-box; }
+.chip-time {
   text-align: center;
-  line-height: 72rpx;
-  font-size: 28rpx;
-  font-weight: 600;
-  color: #111;
-  touch-action: none;
-  user-select: none;
-  -webkit-user-select: none;
+  margin: 20rpx auto 8rpx;
+  color: #9CA3AF;
+  font-size: 22rpx;
+  width: fit-content;
 }
-.go { height: 64rpx; padding: 0 24rpx; background: #07c160; color: #fff; border-radius: 8rpx; font-size: 26rpx; font-weight: 600; display: flex; align-items: center; margin-bottom: 4rpx; }
-.panel { display: flex; flex-wrap: wrap; background: #f7f7f7; padding: 20rpx 24rpx 24rpx; gap: 24rpx; }
-.panel.emo { gap: 8rpx; }
-.tile { width: 140rpx; height: 140rpx; background: #fff; border-radius: 16rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 22rpx; color: #333; }
-.te { font-size: 48rpx; margin-bottom: 8rpx; }
+.sys { text-align: center; color: #9CA3AF; font-size: 24rpx; padding: 12rpx 40rpx 20rpx; }
+.empty { text-align: center; color: #9CA3AF; padding: 120rpx 40rpx; font-size: 26rpx; }
+.row { margin-bottom: 24rpx; display: flex; align-items: flex-start; gap: 16rpx; }
+.row.mine { justify-content: flex-end; }
+.ck { width: 36rpx; height: 36rpx; border: 2rpx solid #D1D5DB; border-radius: 50%; margin-top: 22rpx; flex-shrink: 0; box-sizing: border-box; }
+.ck.on { background: #1677FF; border-color: #1677FF; }
+.col { max-width: 72%; display: flex; flex-direction: column; }
+.col.mine { align-items: flex-end; }
+.av { width: 76rpx; height: 76rpx; border-radius: 16rpx; background: #E8F1FF; color: #1677FF; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 28rpx; font-weight: 650; }
+.av.self { background: #1677FF; color: #fff; }
+.av image { width: 76rpx; height: 76rpx; }
+.who { font-size: 22rpx; color: #9CA3AF; margin: 0 4rpx 8rpx; }
+.ball {
+  background: #fff;
+  padding: 18rpx 22rpx;
+  border-radius: 8rpx 20rpx 20rpx 20rpx;
+  font-size: 30rpx;
+  word-break: break-all;
+  line-height: 1.5;
+  color: #111827;
+  box-shadow: 0 2rpx 8rpx rgba(17, 24, 39, 0.04);
+}
+.ball.self {
+  background: #1677FF;
+  color: #fff;
+  border-radius: 20rpx 8rpx 20rpx 20rpx;
+  box-shadow: none;
+}
+.ball.work { background: #fff; color: #111827; border-radius: 20rpx; }
+.ball.voice { min-width: 160rpx; }
+.quote { background: rgba(17, 24, 39, 0.05); color: #6B7280; font-size: 22rpx; padding: 8rpx 12rpx; border-radius: 10rpx; margin-bottom: 10rpx; }
+.ball.self .quote { background: rgba(255, 255, 255, 0.18); color: rgba(255, 255, 255, 0.9); }
+.pic { max-width: 420rpx; border-radius: 16rpx; display: block; }
+.file, .cardtxt { display: flex; flex-direction: column; min-width: 280rpx; }
+.fn, .ct { font-weight: 600; }
+.fs, .cs { font-size: 22rpx; margin-top: 8rpx; color: #1677FF; }
+.ball.self .fs, .ball.self .cs { color: rgba(255, 255, 255, 0.85); }
+.tm { font-size: 22rpx; color: #C4C9D4; margin-top: 6rpx; }
+.tm.read { color: #16A34A; }
+.recmask {
+  position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 30;
+  display: flex; align-items: center; justify-content: center;
+  background: rgba(0, 0, 0, 0.01); touch-action: none;
+}
+.recbox {
+  width: 320rpx; padding: 48rpx 24rpx; background: rgba(17, 24, 39, 0.82); color: #fff;
+  border-radius: 24rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 26rpx;
+}
+.recbox.cancel { background: rgba(220, 38, 38, 0.9); }
+.recsec { font-size: 48rpx; font-weight: 650; margin-bottom: 12rpx; }
+.composer { background: #F5F7FA; border-top: 1rpx solid #E8ECF2; }
+.qbar { display: flex; align-items: center; padding: 12rpx 24rpx 0; }
+.qt { flex: 1; font-size: 24rpx; color: #6B7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.qx { padding: 0 8rpx 0 16rpx; color: #9CA3AF; font-size: 32rpx; }
+.bar { display: flex; align-items: flex-end; padding: 12rpx 16rpx 8rpx; gap: 8rpx; }
+.tool { width: 64rpx; height: 72rpx; display: flex; align-items: center; justify-content: center; font-size: 36rpx; color: #374151; }
+.mic { width: 28rpx; height: 40rpx; display: flex; flex-direction: column; align-items: center; }
+.mic-head { width: 14rpx; height: 20rpx; border: 3rpx solid #111827; border-radius: 10rpx; box-sizing: border-box; }
+.mic-arc { width: 24rpx; height: 12rpx; margin-top: -4rpx; border: 3rpx solid #111827; border-top: none; border-radius: 0 0 14rpx 14rpx; box-sizing: border-box; }
+.mic-stem { width: 3rpx; height: 8rpx; background: #111827; }
+.kbd { width: 36rpx; display: flex; flex-direction: column; gap: 4rpx; }
+.krow { height: 5rpx; background: #111827; border-radius: 2rpx; }
+.kspace { width: 18rpx; height: 5rpx; margin: 0 auto; background: #111827; border-radius: 2rpx; }
+.plus { font-size: 48rpx; font-weight: 300; color: #111827; }
+.box { flex: 1; min-height: 72rpx; background: #fff; border-radius: 12rpx; display: flex; align-items: center; padding: 0 20rpx; }
+.box input { flex: 1; height: 72rpx; font-size: 30rpx; }
+.hold {
+  flex: 1; height: 72rpx; background: #fff; border-radius: 12rpx;
+  text-align: center; line-height: 72rpx; font-size: 28rpx; font-weight: 600; color: #111827;
+  touch-action: none; user-select: none;
+}
+.go {
+  height: 64rpx; padding: 0 24rpx; margin-bottom: 4rpx;
+  background: #1677FF; color: #fff; border-radius: 12rpx;
+  font-size: 26rpx; font-weight: 600; display: flex; align-items: center;
+}
+.panel { display: flex; flex-wrap: wrap; background: #F5F7FA; padding: 8rpx 24rpx 28rpx; gap: 24rpx; }
+.panel.emo { gap: 0; padding-top: 8rpx; }
+.tile {
+  width: 148rpx; height: 148rpx; background: #fff; border-radius: 20rpx;
+  display: flex; flex-direction: column; align-items: center; justify-content: center;
+  font-size: 22rpx; color: #4B5563;
+}
+.te { font-size: 44rpx; margin-bottom: 10rpx; }
 .em { width: 12.5%; text-align: center; font-size: 44rpx; line-height: 88rpx; }
-.hint { text-align: center; font-size: 22rpx; color: #888; padding: 20rpx; }
-.ico { padding: 8rpx 16rpx; font-size: 36rpx; }
-.mask { position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0,0,0,.45); z-index: 40; display: flex; align-items: flex-end; }
-.sheet { width: 100%; background: #fff; border-radius: 24rpx 24rpx 0 0; padding: 28rpx 28rpx 12rpx; }
-.sheet-t { display: block; text-align: center; font-size: 30rpx; font-weight: 700; }
-.sheet-s { display: block; text-align: center; font-size: 22rpx; color: #888; margin: 8rpx 0 24rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.hint { text-align: center; font-size: 24rpx; color: #9CA3AF; padding: 24rpx; background: #fff; }
+.ico { padding: 8rpx 8rpx; font-size: 40rpx; color: #111827; letter-spacing: 2rpx; }
+.mask { position: fixed; left: 0; right: 0; top: 0; bottom: 0; background: rgba(17, 24, 39, 0.45); z-index: 40; display: flex; align-items: flex-end; }
+.sheet { width: 100%; background: #fff; border-radius: 28rpx 28rpx 0 0; padding: 28rpx 28rpx 12rpx; }
+.sheet-t { display: block; text-align: center; font-size: 30rpx; font-weight: 650; }
+.sheet-s { display: block; text-align: center; font-size: 24rpx; color: #9CA3AF; margin: 8rpx 0 24rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .sheet-grid { display: flex; flex-wrap: wrap; gap: 16rpx; }
-.cell { width: calc(25% - 12rpx); height: 140rpx; background: #f7f7f7; border-radius: 16rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 22rpx; color: #333; }
-.ce { font-size: 36rpx; margin-bottom: 8rpx; color: #111; font-weight: 700; }
-.sheet-cancel { margin: 20rpx 0 8rpx; height: 88rpx; border-radius: 16rpx; background: #f7f7f7; display: flex; align-items: center; justify-content: center; font-size: 28rpx; }
-.selbar { display: flex; background: #fff; border-top: 1rpx solid #eee; }
-.selbtn { flex: 1; height: 96rpx; display: flex; align-items: center; justify-content: center; font-size: 28rpx; }
-.selbtn.danger { color: #fa5151; }
+.cell {
+  width: calc(25% - 12rpx); height: 140rpx; background: #F5F7FA; border-radius: 16rpx;
+  display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 22rpx; color: #374151;
+}
+.ce { font-size: 32rpx; margin-bottom: 8rpx; color: #111827; font-weight: 650; }
+.sheet-cancel {
+  margin: 20rpx 0 8rpx; height: 88rpx; border-radius: 16rpx; background: #F5F7FA;
+  display: flex; align-items: center; justify-content: center; font-size: 28rpx; color: #111827;
+}
+.selbar { display: flex; background: #fff; border-top: 1rpx solid #E8ECF2; }
+.selbtn { flex: 1; height: 96rpx; display: flex; align-items: center; justify-content: center; font-size: 28rpx; color: #1677FF; }
+.selbtn.danger { color: #DC2626; }
 </style>