no message

App.vue

@@ -1,11 +1,15 @@
 <script>
 	import useAccountStore from "@/store/account.js";
-import { globalTimChatManager } from "@/utils/tim-chat.js";
+	import {
+		globalTimChatManager
+	} from "@/utils/tim-chat.js";
 
 	export default {
 		onLaunch: function() {
 			// 需在 pinia 安装后再获取 store，避免 getActivePinia 报错
-    const { login } = useAccountStore();
+			const {
+				login
+			} = useAccountStore();
 			login();
 			console.log("App Launch: ");
 		},
@@ -14,16 +18,15 @@ export default {
 		},
 		onHide: function() {
 			console.log("App Hide");
-    // 小程序退出时退出腾讯IM登录
+			try {
-    // try {
+				if (globalTimChatManager && globalTimChatManager.tim) {
-    //   if (globalTimChatManager && globalTimChatManager.tim) {
+					console.log('小程序退出，开始退出腾讯IM');
-    //     console.log('小程序退出，开始退出腾讯IM');
+					globalTimChatManager.destroy();
-    //     globalTimChatManager.destroy();
+					console.log('腾讯IM退出成功');
-    //     console.log('腾讯IM退出成功');
+				}
-    //   }
+			} catch (error) {
-    // } catch (error) {
+				console.error('退出腾讯IM失败:', error);
-    //   console.error('退出腾讯IM失败:', error);
+			}
-    // }
 		},
 	};
 </script>
@@ -153,6 +156,7 @@ page {
 	.pt-5 {
 		padding-top: 10rpx;
 	}
+
 	.pt-15 {
 		padding-top: 30rpx;
 	}

pages.json

@@ -13,6 +13,12 @@
 				"enablePullDownRefresh": false
 			}
 		},
+		{
+			"path": "pages/message/common-phrases",
+			"style": {
+				"navigationBarTitleText": "常用语"
+			}
+		},
 		{
 			"path": "pages/case/case",
 			"style": {

pages/message/common-phrases.vue

@@ -1,24 +1,49 @@
 <template>
   <view class="common-phrases-page">
-    <view class="header">
+    <!-- 自定义导航栏 -->
-      <view class="title">快捷回复</view>
+    <view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
-      <view class="edit-btn" @click="toggleEditMode">{{ isEditMode ? '完成' : '编辑' }}</view>
+      <view class="navbar-content">
+
+        <view class="navbar-center">
+          <text class="navbar-title">快捷回复</text>
+        </view>
+        <view class="navbar-right" @click="toggleEditMode">
+          <text class="edit-text">{{ isEditMode ? '完成' : '编辑' }}</text>
+        </view>
+      </view>
     </view>
 
-    <view class="category-tabs">
+    <view class="content-wrapper">
+      <!-- 左侧分类列表 -->
+      <view class="category-sidebar">
+        <scroll-view class="category-list" scroll-y>
           <view 
             v-for="category in categories" 
             :key="category.id"
-        class="category-tab"
+            class="category-item"
             :class="{ active: currentCategory === category.id }"
             @click="switchCategory(category.id)"
+            @longpress="handleCategoryLongPress(category)"
           >
-        {{ category.name }}
+            <view class="category-name">{{ category.name }}</view>
+            <view v-if="currentCategory === category.id" class="active-indicator"></view>
+            <view v-if="isEditMode && category.deletable" class="delete-badge" @click.stop="deleteCategory(category)">
+              <text class="delete-icon">×</text>
             </view>
-      <view class="add-category-btn" @click="showAddCategoryDialog">
+          </view>
+          
+          <view class="add-category-item" @click="showAddCategoryDialog">
             <text class="plus-icon">+</text>
-        加分类
+            <text>加分类</text>
           </view>
+        </scroll-view>
+      </view>
+
+      <!-- 右侧常用语列表 -->
+      <view class="phrases-container">
+        <view class="add-phrase-header" @click="showAddPhraseDialog">
+          <text class="add-icon">+</text>
+          <text class="add-text">添加快捷回复</text>
         </view>
 
         <scroll-view class="phrases-list" scroll-y>
@@ -30,32 +55,41 @@
           >
             <view class="phrase-content">{{ phrase.content }}</view>
             <view v-if="isEditMode" class="phrase-actions">
-          <view class="action-btn edit" @click.stop="editPhrase(phrase)">编辑</view>
+              <view class="action-btn edit" @click.stop="editPhrase(phrase)">
-          <view class="action-btn delete" @click.stop="deletePhrase(phrase)">删除</view>
+                <text>编辑</text>
+              </view>
+              <view class="action-btn delete" @click.stop="deletePhrase(phrase)">
+                <text>删除</text>
+              </view>
             </view>
           </view>
           
           <view v-if="currentPhrases.length === 0" class="empty-state">
             <image src="/static/empty.svg" class="empty-icon" mode="aspectFit"></image>
             <text class="empty-text">暂无常用语</text>
+            <text class="empty-hint">点击上方按钮添加常用语</text>
           </view>
         </scroll-view>
-
+      </view>
-    <view class="add-phrase-btn" @click="showAddPhraseDialog">
-      <text class="plus-icon-white">+</text>
-      添加快捷回复
     </view>
 
     <!-- 添加/编辑常用语弹窗 -->
     <view v-if="showPhrasePopup" class="popup-mask" @click="closePopup">
       <view class="popup-content" @click.stop>
-        <view class="popup-title">{{ editingPhrase ? '编辑' : '添加快捷回复' }}</view>
+        <view class="popup-header">
+          <text class="popup-title">{{ editingPhrase ? '编辑快捷回复' : '添加快捷回复' }}</text>
+          <view class="popup-close" @click="closePopup">
+            <text class="close-icon">×</text>
+          </view>
+        </view>
         <textarea 
           v-model="phraseForm.content" 
           class="phrase-textarea"
           placeholder="在此处输入文字"
           maxlength="500"
+          :auto-height="true"
         ></textarea>
+        <view class="char-count">{{ phraseForm.content.length }}/500</view>
         <view class="popup-actions">
           <button class="cancel-btn" @click="closePopup">取消</button>
           <button class="confirm-btn" @click="savePhrase">{{ editingPhrase ? '保存' : '确认添加' }}</button>
@@ -66,11 +100,16 @@
     <!-- 添加分类弹窗 -->
     <view v-if="showCategoryPopup" class="popup-mask" @click="closeCategoryPopup">
       <view class="popup-content category-popup" @click.stop>
-        <view class="popup-title">新建分类名</view>
+        <view class="popup-header">
+          <text class="popup-title">新建分类</text>
+          <view class="popup-close" @click="closeCategoryPopup">
+            <text class="close-icon">×</text>
+          </view>
+        </view>
         <input 
           v-model="categoryForm.name" 
           class="category-input"
-          placeholder="请在此填写分类名，最多6个字"
+          placeholder="请输入分类名，最多6个字"
           maxlength="6"
         />
         <view class="popup-actions">
@@ -86,14 +125,17 @@
 import { ref, computed, onMounted } from 'vue';
 import api from '@/utils/api';
 
+// 获取系统状态栏高度
+const statusBarHeight = ref(0);
+
 // 编辑模式
 const isEditMode = ref(false);
 
 // 分类数据
 const categories = ref([
-  { id: 'visit', name: '文字随访' },
+  { id: 'visit', name: '文字随访', deletable: false },
-  { id: 'voice', name: '语音随访' },
+  { id: 'voice', name: '语音随访', deletable: false },
-  { id: 'common', name: '常用回复' },
+  { id: 'common', name: '常用回复', deletable: false },
 ]);
 
 const currentCategory = ref('common');
@@ -121,6 +163,11 @@ const categoryForm = ref({
 
 const editingPhrase = ref(null);
 
+// 返回上一页
+const goBack = () => {
+  uni.navigateBack();
+};
+
 // 切换编辑模式
 const toggleEditMode = () => {
   isEditMode.value = !isEditMode.value;
@@ -365,6 +412,12 @@ onMounted(() => {
 </script>
 
 <style scoped lang="scss">
+// 使用项目主题色
+$primary-color: #0877F1;
+$primary-light: #e8f3ff;
+$primary-gradient-start: #1b5cc8;
+$primary-gradient-end: #0877f1;
+
 .common-phrases-page {
   height: 100vh;
   display: flex;
@@ -388,62 +441,117 @@ onMounted(() => {
 
   .edit-btn {
     font-size: 28rpx;
-    color: #ff6b35;
+    color: $primary-color;
   }
 }
 
-.category-tabs {
+.content-wrapper {
+  flex: 1;
   display: flex;
-  align-items: center;
+  overflow: hidden;
-  padding: 24rpx 32rpx;
+}
-  background-color: #fff;
-  overflow-x: auto;
-  white-space: nowrap;
 
-  .category-tab {
+// 左侧分类栏
-    padding: 12rpx 24rpx;
+.category-sidebar {
-    margin-right: 16rpx;
+  width: 200rpx;
+  background-color: #f8f8f8;
+  border-right: 1px solid #e5e5e5;
+
+  .category-list {
+    height: 100%;
+  }
+
+  .category-item {
+    position: relative;
+    padding: 32rpx 24rpx;
+    text-align: center;
+    background-color: #f8f8f8;
+    border-bottom: 1px solid #e5e5e5;
+
+    .category-name {
       font-size: 28rpx;
       color: #666;
-    background-color: #f5f5f5;
+    }
-    border-radius: 8rpx;
-    flex-shrink: 0;
 
     &.active {
-      color: #ff6b35;
+      background-color: #fff;
-      background-color: #fff5f2;
+
-      border: 1px solid #ff6b35;
+      .category-name {
+        color: $primary-color;
+        font-weight: 600;
+      }
+
+      .active-indicator {
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 6rpx;
+        height: 40rpx;
+        background-color: $primary-color;
+        border-radius: 0 4rpx 4rpx 0;
+      }
     }
   }
 
-  .add-category-btn {
+  .add-category-item {
     display: flex;
+    flex-direction: column;
     align-items: center;
-    padding: 12rpx 24rpx;
+    justify-content: center;
-    font-size: 28rpx;
+    padding: 32rpx 24rpx;
-    color: #ff6b35;
+    font-size: 24rpx;
-    background-color: #fff5f2;
+    color: $primary-color;
-    border-radius: 8rpx;
+    background-color: #f8f8f8;
-    flex-shrink: 0;
 
     .plus-icon {
       font-size: 32rpx;
-      margin-right: 4rpx;
       font-weight: 600;
+      margin-bottom: 8rpx;
     }
   }
 }
 
+// 右侧内容区
+.phrases-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  background-color: #fff;
+}
+
+.add-phrase-header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24rpx;
+  background: linear-gradient(270deg, $primary-gradient-start 2.26%, $primary-gradient-end 94.33%);
+  border-bottom: 1px solid rgba(8, 119, 241, 0.1);
+
+  .add-icon {
+    font-size: 32rpx;
+    color: #fff;
+    font-weight: 600;
+    margin-right: 8rpx;
+  }
+
+  .add-text {
+    font-size: 28rpx;
+    color: #fff;
+    font-weight: 500;
+  }
+}
+
 .phrases-list {
   flex: 1;
-  padding: 24rpx 32rpx;
+  padding: 24rpx;
-  overflow-y: auto;
 
   .phrase-item {
     padding: 24rpx;
     margin-bottom: 16rpx;
-    background-color: #fff;
+    background-color: #f8f8f8;
     border-radius: 12rpx;
+    border-left: 4rpx solid $primary-color;
 
     .phrase-content {
       font-size: 28rpx;
@@ -456,7 +564,7 @@ onMounted(() => {
       justify-content: flex-end;
       margin-top: 16rpx;
       padding-top: 16rpx;
-      border-top: 1px solid #f5f5f5;
+      border-top: 1px solid #e5e5e5;
 
       .action-btn {
         padding: 8rpx 24rpx;
@@ -465,8 +573,8 @@ onMounted(() => {
         border-radius: 8rpx;
 
         &.edit {
-          color: #007aff;
+          color: $primary-color;
-          background-color: #e6f2ff;
+          background-color: $primary-light;
         }
 
         &.delete {
@@ -497,24 +605,6 @@ onMounted(() => {
   }
 }
 
-.add-phrase-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 24rpx 32rpx;
-  padding: 24rpx;
-  font-size: 28rpx;
-  color: #fff;
-  background-color: #ff6b35;
-  border-radius: 12rpx;
-
-  .plus-icon-white {
-    font-size: 36rpx;
-    margin-right: 8rpx;
-    font-weight: 600;
-  }
-}
-
 .popup-mask {
   position: fixed;
   top: 0;
@@ -582,7 +672,8 @@ onMounted(() => {
 
       &.confirm-btn {
         color: #fff;
-        background-color: #ff6b35;
+        background: linear-gradient(270deg, $primary-gradient-start 2.26%, $primary-gradient-end 94.33%);
+        box-shadow: 0 2rpx 8rpx rgba(8, 119, 241, 0.2);
       }
     }
   }

pages/message/components/chat-input.vue

@@ -150,6 +150,23 @@ const sendTextMessage = async () => {
   inputText.value = "";
 };
 
+// 从常用语发送文本消息
+const sendTextMessageFromPhrase = async (content) => {
+  if (!content.trim()) return;
+  
+  await sendMessage("text", content);
+  
+  // 发送成功后滚动到底部
+  nextTick(() => {
+    emit("scrollToBottom");
+  });
+};
+
+// 暴露方法给父组件调用
+defineExpose({
+  sendTextMessageFromPhrase
+});
+
 // 发送图片消息
 const sendImageMessage = async (imageFile) => {
   console.log("chat-input sendImageMessage 被调用，参数:", imageFile);
@@ -337,14 +354,40 @@ const sendSurveyMessage = async () => {
   await sendCustomMessage(surveyMessage);
 };
 
-// 更多面板按钮配置
+// 跳转到常用语页面
+const goToCommonPhrases = () => {
+  uni.navigateTo({
+    url: '/pages/message/common-phrases'
+  });
+};
+
 const morePanelButtons = [
-  { text: "照片", icon: "/static/home/photo.png", action: showImagePicker },
+  { text: "照片", icon: "/static/icon/zhaopian.png", action: showImagePicker },
-  { text: "拍摄", icon: "/static/home/video.png", action: takePhoto },
+  {
-  // { text: '病情', icon: '/static/home/avatar.svg', action: sendSymptomMessage },
+    text: "回访任务",
-  // { text: '处方', icon: '/static/home/avatar.svg', action: sendPrescriptionMessage },
+    icon: "/static/icon/zhaopian.png",
-  // { text: '续方', icon: '/static/home/avatar.svg', action: sendRefillMessage },
+    action: showImagePicker,
-  // { text: '问卷', icon: '/static/home/avatar.svg', action: sendSurveyMessage }
+  },
+  {
+    text: "常用语",
+    icon: "/static/icon/changyongyu.png",
+    action: goToCommonPhrases,
+  },
+  {
+    text: "宣教",
+    icon: "/static/icon/xuanjiaowenzhang.png",
+    action: showImagePicker,
+  },
+  {
+    text: "问卷",
+    icon: "/static/icon/zhaopian.png",
+    action: showImagePicker,
+  },
+  {
+    text: "结束问诊",
+    icon: "/static/icon/jieshuzixun.png",
+    action: showImagePicker,
+  },
 ];
 
 function handleInputFocus() {

pages/message/index.vue

@@ -111,6 +111,7 @@
     <!-- 聊天输入组件 -->
     <ChatInput
       v-if="!isEvaluationPopupOpen"
+      ref="chatInputRef"
       :timChatManager="timChatManager"
       :formatTime="formatTime"
       @scrollToBottom="() => scrollToBottom(true)"
@@ -153,6 +154,9 @@ const timChatManager = globalTimChatManager;
 const { account, openid, isIMInitialized } = storeToRefs(useAccountStore());
 const { initIMAfterLogin } = useAccountStore();
 
+// 聊天输入组件引用
+const chatInputRef = ref(null);
+
 const groupId = ref("");
 const {
   chatMember,
@@ -590,6 +594,18 @@ onHide(() => {
   stopIMMonitoring();
 });
 
+// 发送常用语（从常用语页面返回时调用）
+const sendCommonPhrase = (content) => {
+  if (chatInputRef.value) {
+    chatInputRef.value.sendTextMessageFromPhrase(content);
+  }
+};
+
+// 暴露方法给常用语页面调用
+defineExpose({
+  sendCommonPhrase
+});
+
 // 页面卸载
 onUnmounted(() => {
   clearMessageCache();

utils/api.js

@@ -15,7 +15,12 @@ const urlsConfig = {
   },
 
   knowledgeBase: {
-    getArticleByIds: 'getArticleByIds'
+    getArticleByIds: 'getArticleByIds',
+    getCommonPhrases: 'getCommonPhrases',
+    saveCommonPhrase: 'saveCommonPhrase',
+    deleteCommonPhrase: 'deleteCommonPhrase',
+    getCommonPhraseCategories: 'getCommonPhraseCategories',
+    saveCommonPhraseCategory: 'saveCommonPhraseCategory'
   },
   member: {
     addCustomer: 'add',