From 6c35146b36c1ccb1afe65cb141b034a20670c7f7 Mon Sep 17 00:00:00 2001
From: duanshuwen <duanshuwen@gogpay.cn>
Date: Wed, 15 Oct 2025 19:38:01 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=A6=96=E9=A1=B5=E4=B8=BB=E9=A2=98?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/chat/ChatInputArea/index.vue   |  6 +-
 .../components/chat/ChatMainList/index.vue    |  5 +-
 .../chat/ChatMainList/styles/index.scss       |  3 +-
 .../components/chat/ChatQuickAccess/index.vue | 66 ++++++++++------
 .../chat/ChatQuickAccess/styles/index.scss    | 78 ++++---------------
 src/static/scss/margin.scss                   |  4 +
 src/static/scss/padding.scss                  |  8 ++
 src/static/scss/rounded.scss                  |  4 +
 8 files changed, 80 insertions(+), 94 deletions(-)

diff --git a/src/pages/index/components/chat/ChatInputArea/index.vue b/src/pages/index/components/chat/ChatInputArea/index.vue
index 66cffe5..51aec89 100644
--- a/src/pages/index/components/chat/ChatInputArea/index.vue
+++ b/src/pages/index/components/chat/ChatInputArea/index.vue
@@ -6,12 +6,12 @@
         <image
           class="voice-icon"
           v-if="!isVoiceMode"
-          src="https://oss.nianxx.cn/mp/static/version_1_0_1/input_voice_icon.png"
+          src="https://oss.nianxx.cn/mp/static/version_101/home/input_voice_icon.png"
         />
         <image
           class="voice-icon"
           v-else
-          src="https://oss.nianxx.cn/mp/static/version_1_0_1/input_keyboard_icon.png"
+          src="https://oss.nianxx.cn/mp/static/version_101/home/input_keyboard_icon.png"
         />
       </view>
 
@@ -57,7 +57,7 @@
           <image
             v-else
             class="send-icon"
-            src="https://oss.nianxx.cn/mp/static/version_1_0_1/input_send_icon.png"
+            src="https://oss.nianxx.cn/mp/static/version_101/home/input_send_icon.png"
           />
         </view>
       </view>
diff --git a/src/pages/index/components/chat/ChatMainList/index.vue b/src/pages/index/components/chat/ChatMainList/index.vue
index afea69a..d440a1d 100644
--- a/src/pages/index/components/chat/ChatMainList/index.vue
+++ b/src/pages/index/components/chat/ChatMainList/index.vue
@@ -7,7 +7,7 @@
 
     <!-- 消息列表（可滚动区域） -->
     <scroll-view
-      class="main flex-full"
+      class="main flex-full overflow-hidden scroll-y"
       scroll-y
       :scroll-top="scrollTop"
       :scroll-with-animation="true"
@@ -77,8 +77,7 @@
         </template>
 
         <template v-else-if="item.msgType === MessageRole.ME">
-          <ChatCardMine class="message-item-mine" :text="item.msg">
-          </ChatCardMine>
+          <ChatCardMine class="message-item-mine" :text="item.msg" />
         </template>
 
         <template v-else>
diff --git a/src/pages/index/components/chat/ChatMainList/styles/index.scss b/src/pages/index/components/chat/ChatMainList/styles/index.scss
index 79ea66d..d46bb36 100644
--- a/src/pages/index/components/chat/ChatMainList/styles/index.scss
+++ b/src/pages/index/components/chat/ChatMainList/styles/index.scss
@@ -1,4 +1,5 @@
 .footer {
-  height: 118px;
   // touch-action: pan-x;
+  padding-bottom: calc(constant(safe-area-inset-bottom) + 8px);
+  padding-bottom: calc(env(safe-area-inset-bottom) + 8px);
 }
diff --git a/src/pages/index/components/chat/ChatQuickAccess/index.vue b/src/pages/index/components/chat/ChatQuickAccess/index.vue
index d00db8f..c495671 100644
--- a/src/pages/index/components/chat/ChatQuickAccess/index.vue
+++ b/src/pages/index/components/chat/ChatQuickAccess/index.vue
@@ -1,22 +1,18 @@
 <template>
-  <view class="quick-access">
-    <view class="quick-access-scroll">
-      <view
-        class="quick-access-item"
-        v-for="(item, index) in itemList"
-        :key="index"
-        @click="sendReply(item)"
-      >
-        <image
-          class="quick-access-item-bg"
-          src="https://oss.nianxx.cn/mp/static/quick/quick_icon_bg.png"
-          mode="aspectFill"
-        />
-        <view class="quick-access-item-title">
-          <image class="quick-access-item-icon" :src="item.icon" />
-          <text>{{ item.title }}</text>
-        </view>
-        <text class="quick-access-item-content">{{ item.content }}</text>
+  <view
+    class="quick-access border-box flex flex-nowrap items-center ml-20 pt-8 pb-8"
+  >
+    <view
+      class="item border-box rounded-50 flex flex-row items-center"
+      v-for="(item, index) in itemList"
+      :key="index"
+      @click="sendReply(item)"
+    >
+      <view class="flex items-center justify-center">
+        <image v-if="item.icon" class="icon" :src="item.icon" />
+        <text class="font-size-14 color-2D91FF line-height-20">
+          {{ item.title }}
+        </text>
       </view>
     </view>
   </view>
@@ -25,7 +21,25 @@
 <script setup>
 import { onMounted, ref } from "vue";
 import { currentClientType, ClientType } from "@/constant/base";
-const itemList = ref([]);
+
+const itemList = ref([
+  {
+    icon: "",
+    title: "快速预定",
+  },
+  {
+    icon: "",
+    title: "探索发现",
+  },
+  {
+    icon: "",
+    title: "反馈意见",
+  },
+  {
+    icon: "https://oss.nianxx.cn/mp/static/version_101/home/more.png",
+    title: "更多",
+  },
+]);
 
 const emits = defineEmits(["replySent"]);
 
@@ -33,9 +47,9 @@ const sendReply = (item) => {
   emits("replySent", item); // 向父组件传递数据
 };
 
-onMounted(() => {
-  initData();
-});
+// onMounted(() => {
+//   initData();
+// });
 
 const initData = () => {
   itemList.value =
@@ -43,24 +57,28 @@ const initData = () => {
       ? [
           {
             icon: "https://oss.nianxx.cn/mp/static/quick/quick_icon_yuding.png",
+            showIcon: false,
             title: "快速预定",
             content: "预定门票、房间、餐食",
             type: "Command.quickBooking",
           },
           {
             icon: "https://oss.nianxx.cn/mp/static/quick/quick_icon_find.png",
+            showIcon: false,
             title: "探索发现",
             content: "探索玩法、出片佳地",
             type: "Command.discovery",
           },
           {
             icon: "https://oss.nianxx.cn/mp/static/quick/quick_icon_call.png",
+            showIcon: false,
             title: "反馈意见",
             content: "有意见告诉沐沐",
             type: "Command.feedbackCard",
           },
           {
             icon: "https://oss.nianxx.cn/mp/static/quick/quick_icon_order.png",
+            showIcon: false,
             title: "订单/工单",
             content: "我的订单/工单",
             type: "MyOrder",
@@ -69,24 +87,28 @@ const initData = () => {
       : [
           {
             icon: "https://oss.nianxx.cn/mp/static/quick/quick_icon_yuding.png",
+            showIcon: false,
             title: "快速预定",
             content: "预定门票、房间、餐食",
             type: "Command.quickBooking",
           },
           {
             icon: "https://oss.nianxx.cn/mp/static/quick/quick_icon_find.png",
+            showIcon: false,
             title: "探索发现",
             content: "探索玩法、出片佳地",
             type: "Command.discovery",
           },
           {
             icon: "https://oss.nianxx.cn/mp/static/quick/quick_icon_order.png",
+            showIcon: false,
             title: "订单/工单",
             content: "我的订单/工单",
             type: "MyOrder",
           },
           {
             icon: "https://oss.nianxx.cn/mp/static/quick/quick_icon_call.png",
+            showIcon: false,
             title: "反馈意见",
             content: "有意见告诉朵朵",
             type: "Command.feedbackCard",
diff --git a/src/pages/index/components/chat/ChatQuickAccess/styles/index.scss b/src/pages/index/components/chat/ChatQuickAccess/styles/index.scss
index f02e716..a49d216 100644
--- a/src/pages/index/components/chat/ChatQuickAccess/styles/index.scss
+++ b/src/pages/index/components/chat/ChatQuickAccess/styles/index.scss
@@ -1,67 +1,15 @@
 .quick-access {
-  width: 100%;
-
-  &-scroll {
-    display: flex;
-    flex-direction: row;
-    overflow-x: auto;
-    white-space: nowrap;
-    -webkit-overflow-scrolling: touch;
-  }
-
-  .quick-access-item {
-    flex: 0 0 104px;
-    border-radius: 8px;
-    margin: 4px 4px 8px 4px;
-    box-shadow: 0 2px 5px 0px rgba(0, 0, 0, 0.1);
-    padding: 12px;
-    display: inline-flex;
-    flex-direction: column;
-    position: relative;
-
-    &:first-child {
-      margin-left: 12px;
-    }
-
-    &:last-child {
-      margin-right: 12px;
-    }
-
-    .quick-access-item-bg {
-      position: absolute;
-      top: 0;
-      left: 0;
-      z-index: 0;
-      border-radius: 8px;
-      width: 128px;
-      height: 56px;
-    }
-
-    .quick-access-item-title {
-      display: flex;
-      align-items: center;
-      z-index: 1;
-
-      .quick-access-item-icon {
-        width: 16px;
-        height: 16px;
-        margin-right: 4px;
-      }
-
-      text {
-        font-weight: 500;
-        font-size: $uni-font-size-sm;
-        color: #201f32;
-        line-height: 16px;
-      }
-    }
-
-    .quick-access-item-content {
-      z-index: 1;
-      margin-top: 4px;
-      font-size: 10px;
-      color: #678cad;
-      line-height: 18px;
-    }
-  }
+  gap: 0 9px;
+}
+
+.item {
+  border: 1px solid #fff;
+  background-color: rgba(255, 255, 255, 0.5);
+  padding: 4px 8px;
+}
+
+.icon {
+  width: 20px;
+  height: 20px;
+  margin-right: 2px;
 }
diff --git a/src/static/scss/margin.scss b/src/static/scss/margin.scss
index 4b5d3f2..8bba288 100644
--- a/src/static/scss/margin.scss
+++ b/src/static/scss/margin.scss
@@ -18,3 +18,7 @@
 .mb-12 {
   margin-bottom: 12px;
 }
+
+.ml-20 {
+  margin-left: 20px;
+}
diff --git a/src/static/scss/padding.scss b/src/static/scss/padding.scss
index 31a5c99..779af74 100644
--- a/src/static/scss/padding.scss
+++ b/src/static/scss/padding.scss
@@ -3,6 +3,14 @@
   padding: 8px;
 }
 
+.pt-8 {
+  padding-top: 8px;
+}
+
+.pb-8 {
+  padding-bottom: 8px;
+}
+
 .p-12 {
   padding: 12px;
 }
diff --git a/src/static/scss/rounded.scss b/src/static/scss/rounded.scss
index 8e9fa31..6a3c8e1 100644
--- a/src/static/scss/rounded.scss
+++ b/src/static/scss/rounded.scss
@@ -19,6 +19,10 @@
   border-radius: 20px;
 }
 
+.rounded-50 {
+  border-radius: 50px;
+}
+
 .rounded-full {
   border-radius: 50%;
 }