diff --git a/App.vue b/App.vue
index bffc016..1010425 100644
--- a/App.vue
+++ b/App.vue
@@ -1,365 +1,369 @@
-<script>
-import useAccountStore from "@/store/account.js";
-import { globalTimChatManager } from "@/utils/tim-chat.js";
-
-export default {
-  onLaunch: function () {
-    // 需在 pinia 安装后再获取 store，避免 getActivePinia 报错
-    const { login } = useAccountStore();
-    login();
-    console.log("App Launch: ");
-  },
-  onShow: function () {
-    console.log("App Show");
-  },
-  onHide: function () {
-    console.log("App Hide");
-    // 小程序退出时退出腾讯IM登录
-    // try {
-    //   if (globalTimChatManager && globalTimChatManager.tim) {
-    //     console.log('小程序退出，开始退出腾讯IM');
-    //     globalTimChatManager.destroy();
-    //     console.log('腾讯IM退出成功');
-    //   }
-    // } catch (error) {
-    //   console.error('退出腾讯IM失败:', error);
-    // }
-  },
-};
-</script>
-
-<style lang="scss">
-$primary-color: #0074ff;
-
-page {
-  height: 100%;
-  background: #f5f5f5;
-}
-
-.shadow-up {
-  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
-    rgba(0, 0, 0, 0.1) 0px -10px 15px -3px, rgba(0, 0, 0, 0.1) 0px -4px 6px -4px;
-}
-
-.shadow-lg {
-  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-}
-
-.relative {
-  position: relative;
-}
-
-.inline-block {
-  display: inline-block;
-}
-
-.flex {
-  display: flex;
-}
-
-.flex-col {
-  flex-direction: column;
-}
-
-.flex-wrap {
-  flex-wrap: wrap;
-}
-
-.flex-grow {
-  flex-grow: 1;
-}
-
-.flex-shrink-0 {
-  flex-shrink: 0;
-}
-
-.items-center {
-  align-items: center;
-}
-
-.justify-center {
-  justify-content: center;
-}
-
-.justify-between {
-  justify-content: space-between;
-}
-
-.justify-around {
-  justify-content: space-around;
-}
-
-.justify-end {
-  justify-content: flex-end;
-}
-
-.bg-gray {
-  background: #f5f5f5;
-}
-
-.bg-primary {
-  background: $primary-color;
-}
-
-.bg-success {
-  background: green;
-}
-
-.bg-white {
-  background: #fff;
-}
-
-.bg-warning {
-  background: orange;
-}
-
-.bg-danger {
-  background: rgb(248 113 113);
-}
-
-.py-5 {
-  padding-top: 10rpx;
-  padding-bottom: 10rpx;
-}
-
-.p-15 {
-  padding: 30rpx;
-}
-
-.p-10 {
-  padding: 20rpx;
-}
-
-.px-5 {
-  padding-left: 10rpx;
-  padding-right: 10rpx;
-}
-
-.px-10 {
-  padding-left: 20rpx;
-  padding-right: 20rpx;
-}
-
-.px-12 {
-  padding-left: 24rpx;
-  padding-right: 24rpx;
-}
-
-.px-15 {
-  padding-left: 30rpx;
-  padding-right: 30rpx;
-}
-
-.pt-5 {
-  padding-top: 10rpx;
-}
-.pt-15 {
-  padding-top: 30rpx;
-}
-
-.break-all {
-  word-break: break-all;
-}
-
-.pb-5 {
-  padding-bottom: 10rpx;
-}
-
-.pb-10 {
-  padding-bottom: 20rpx;
-}
-
-.py-10 {
-  padding-top: 20rpx;
-  padding-bottom: 20rpx;
-}
-
-.py-12 {
-  padding-top: 24rpx;
-  padding-bottom: 24rpx;
-}
-
-.py-15 {
-  padding-top: 30rpx;
-  padding-bottom: 30rpx;
-}
-
-.mr-5 {
-  margin-right: 10rpx;
-}
-
-.mr-10 {
-  margin-right: 20rpx;
-}
-
-.ml-15 {
-  margin-left: 30rpx;
-}
-
-.mb-5 {
-  margin-bottom: 10rpx;
-}
-
-.mb-10 {
-  margin-bottom: 20rpx;
-}
-
-.mt-10 {
-  margin-top: 20rpx;
-}
-
-.mt-15 {
-  margin-top: 30rpx;
-}
-
-.mt-12 {
-  margin-top: 24rpx;
-}
-
-.mx-10 {
-  margin-left: 20rpx;
-  margin-right: 20rpx;
-}
-
-.mx-auto {
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.rounded {
-  border-radius: 16rpx;
-}
-
-.rounded-sm {
-  border-radius: 8rpx;
-}
-
-.rounded-full {
-  border-radius: 999px;
-}
-
-.text-center {
-  text-align: center;
-}
-
-.text-right {
-  text-align: right;
-}
-
-.text-gray {
-  color: #999;
-}
-
-.text-black {
-  color: #000;
-}
-
-.text-dark {
-  color: #333;
-}
-
-.text-danger {
-  color: #f56c6c;
-}
-
-.text-primary {
-  color: $primary-color;
-}
-
-.text-success {
-  color: #67c23a;
-}
-
-.text-white {
-  color: #fff;
-}
-
-.text-warning {
-  color: #f56c6c;
-}
-
-.text-sm {
-  font-size: 24rpx;
-}
-
-.text-base {
-  font-size: 28rpx;
-}
-
-.text-lg {
-  font-size: 32rpx;
-}
-
-.text-xl {
-  font-size: 36rpx;
-}
-
-.leading-normal {
-  line-height: 1.5;
-}
-
-.border {
-  border: 1px solid #eee;
-}
-
-.border-dashed {
-  border: 1px dashed #eee;
-}
-
-.border-b {
-  border-bottom: 1px solid #eee;
-}
-
-.border-auto {
-  border: 1px solid;
-}
-
-.border-dashed-auto {
-  border: 1px dashed;
-}
-
-.border-primary {
-  border: 1px solid $primary-color;
-}
-
-.font-semibold {
-  font-weight: bold;
-}
-
-.truncate {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.w-0 {
-  width: 0;
-}
-
-.w-full {
-  width: 100%;
-}
-
-.overflow-hidden {
-  overflow: hidden;
-}
-
-.border-box {
-  box-sizing: border-box;
-}
-
-.line-clamp-2 {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  overflow: hidden;
-}
-
-.h-full {
-  height: 100%;
-}
-
-.safe-bottom-padding {
-  height: env(safe-area-inset-bottom);
-}
-</style>
+<script>
+	import useAccountStore from "@/store/account.js";
+	import {
+		globalTimChatManager
+	} from "@/utils/tim-chat.js";
+
+	export default {
+		onLaunch: function() {
+			// 需在 pinia 安装后再获取 store，避免 getActivePinia 报错
+			const {
+				login
+			} = useAccountStore();
+			login();
+			console.log("App Launch: ");
+		},
+		onShow: function() {
+			console.log("App Show");
+		},
+		onHide: function() {
+			console.log("App Hide");
+			try {
+				if (globalTimChatManager && globalTimChatManager.tim) {
+					console.log('小程序退出，开始退出腾讯IM');
+					globalTimChatManager.destroy();
+					console.log('腾讯IM退出成功');
+				}
+			} catch (error) {
+				console.error('退出腾讯IM失败:', error);
+			}
+		},
+	};
+</script>
+
+<style lang="scss">
+	$primary-color: #0074ff;
+
+	page {
+		height: 100%;
+		background: #f5f5f5;
+	}
+
+	.shadow-up {
+		box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px,
+			rgba(0, 0, 0, 0.1) 0px -10px 15px -3px, rgba(0, 0, 0, 0.1) 0px -4px 6px -4px;
+	}
+
+	.shadow-lg {
+		box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
+	}
+
+	.relative {
+		position: relative;
+	}
+
+	.inline-block {
+		display: inline-block;
+	}
+
+	.flex {
+		display: flex;
+	}
+
+	.flex-col {
+		flex-direction: column;
+	}
+
+	.flex-wrap {
+		flex-wrap: wrap;
+	}
+
+	.flex-grow {
+		flex-grow: 1;
+	}
+
+	.flex-shrink-0 {
+		flex-shrink: 0;
+	}
+
+	.items-center {
+		align-items: center;
+	}
+
+	.justify-center {
+		justify-content: center;
+	}
+
+	.justify-between {
+		justify-content: space-between;
+	}
+
+	.justify-around {
+		justify-content: space-around;
+	}
+
+	.justify-end {
+		justify-content: flex-end;
+	}
+
+	.bg-gray {
+		background: #f5f5f5;
+	}
+
+	.bg-primary {
+		background: $primary-color;
+	}
+
+	.bg-success {
+		background: green;
+	}
+
+	.bg-white {
+		background: #fff;
+	}
+
+	.bg-warning {
+		background: orange;
+	}
+
+	.bg-danger {
+		background: rgb(248 113 113);
+	}
+
+	.py-5 {
+		padding-top: 10rpx;
+		padding-bottom: 10rpx;
+	}
+
+	.p-15 {
+		padding: 30rpx;
+	}
+
+	.p-10 {
+		padding: 20rpx;
+	}
+
+	.px-5 {
+		padding-left: 10rpx;
+		padding-right: 10rpx;
+	}
+
+	.px-10 {
+		padding-left: 20rpx;
+		padding-right: 20rpx;
+	}
+
+	.px-12 {
+		padding-left: 24rpx;
+		padding-right: 24rpx;
+	}
+
+	.px-15 {
+		padding-left: 30rpx;
+		padding-right: 30rpx;
+	}
+
+	.pt-5 {
+		padding-top: 10rpx;
+	}
+
+	.pt-15 {
+		padding-top: 30rpx;
+	}
+
+	.break-all {
+		word-break: break-all;
+	}
+
+	.pb-5 {
+		padding-bottom: 10rpx;
+	}
+
+	.pb-10 {
+		padding-bottom: 20rpx;
+	}
+
+	.py-10 {
+		padding-top: 20rpx;
+		padding-bottom: 20rpx;
+	}
+
+	.py-12 {
+		padding-top: 24rpx;
+		padding-bottom: 24rpx;
+	}
+
+	.py-15 {
+		padding-top: 30rpx;
+		padding-bottom: 30rpx;
+	}
+
+	.mr-5 {
+		margin-right: 10rpx;
+	}
+
+	.mr-10 {
+		margin-right: 20rpx;
+	}
+
+	.ml-15 {
+		margin-left: 30rpx;
+	}
+
+	.mb-5 {
+		margin-bottom: 10rpx;
+	}
+
+	.mb-10 {
+		margin-bottom: 20rpx;
+	}
+
+	.mt-10 {
+		margin-top: 20rpx;
+	}
+
+	.mt-15 {
+		margin-top: 30rpx;
+	}
+
+	.mt-12 {
+		margin-top: 24rpx;
+	}
+
+	.mx-10 {
+		margin-left: 20rpx;
+		margin-right: 20rpx;
+	}
+
+	.mx-auto {
+		margin-left: auto;
+		margin-right: auto;
+	}
+
+	.rounded {
+		border-radius: 16rpx;
+	}
+
+	.rounded-sm {
+		border-radius: 8rpx;
+	}
+
+	.rounded-full {
+		border-radius: 999px;
+	}
+
+	.text-center {
+		text-align: center;
+	}
+
+	.text-right {
+		text-align: right;
+	}
+
+	.text-gray {
+		color: #999;
+	}
+
+	.text-black {
+		color: #000;
+	}
+
+	.text-dark {
+		color: #333;
+	}
+
+	.text-danger {
+		color: #f56c6c;
+	}
+
+	.text-primary {
+		color: $primary-color;
+	}
+
+	.text-success {
+		color: #67c23a;
+	}
+
+	.text-white {
+		color: #fff;
+	}
+
+	.text-warning {
+		color: #f56c6c;
+	}
+
+	.text-sm {
+		font-size: 24rpx;
+	}
+
+	.text-base {
+		font-size: 28rpx;
+	}
+
+	.text-lg {
+		font-size: 32rpx;
+	}
+
+	.text-xl {
+		font-size: 36rpx;
+	}
+
+	.leading-normal {
+		line-height: 1.5;
+	}
+
+	.border {
+		border: 1px solid #eee;
+	}
+
+	.border-dashed {
+		border: 1px dashed #eee;
+	}
+
+	.border-b {
+		border-bottom: 1px solid #eee;
+	}
+
+	.border-auto {
+		border: 1px solid;
+	}
+
+	.border-dashed-auto {
+		border: 1px dashed;
+	}
+
+	.border-primary {
+		border: 1px solid $primary-color;
+	}
+
+	.font-semibold {
+		font-weight: bold;
+	}
+
+	.truncate {
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.w-0 {
+		width: 0;
+	}
+
+	.w-full {
+		width: 100%;
+	}
+
+	.overflow-hidden {
+		overflow: hidden;
+	}
+
+	.border-box {
+		box-sizing: border-box;
+	}
+
+	.line-clamp-2 {
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 2;
+		overflow: hidden;
+	}
+
+	.h-full {
+		height: 100%;
+	}
+
+	.safe-bottom-padding {
+		height: env(safe-area-inset-bottom);
+	}
+</style>
\ No newline at end of file
diff --git a/pages.json b/pages.json
index 4e9ea8a..a97b558 100644
--- a/pages.json
+++ b/pages.json
@@ -13,6 +13,12 @@
 				"enablePullDownRefresh": false
 			}
 		},
+		{
+			"path": "pages/message/common-phrases",
+			"style": {
+				"navigationBarTitleText": "常用语"
+			}
+		},
 		{
 			"path": "pages/case/case",
 			"style": {
diff --git a/pages/message/common-phrases.vue b/pages/message/common-phrases.vue
index 5d26818..39a22a3 100644
--- a/pages/message/common-phrases.vue
+++ b/pages/message/common-phrases.vue
@@ -1,61 +1,95 @@
 <template>
   <view class="common-phrases-page">
-    <view class="header">
-      <view class="title">快捷回复</view>
-      <view class="edit-btn" @click="toggleEditMode">{{ isEditMode ? '完成' : '编辑' }}</view>
-    </view>
+    <!-- 自定义导航栏 -->
+    <view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
+      <view class="navbar-content">
 
-    <view class="category-tabs">
-      <view 
-        v-for="category in categories" 
-        :key="category.id"
-        class="category-tab"
-        :class="{ active: currentCategory === category.id }"
-        @click="switchCategory(category.id)"
-      >
-        {{ category.name }}
-      </view>
-      <view class="add-category-btn" @click="showAddCategoryDialog">
-        <text class="plus-icon">+</text>
-        加分类
-      </view>
-    </view>
-
-    <scroll-view class="phrases-list" scroll-y>
-      <view 
-        v-for="phrase in currentPhrases" 
-        :key="phrase.id"
-        class="phrase-item"
-        @click="handlePhraseClick(phrase)"
-      >
-        <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 delete" @click.stop="deletePhrase(phrase)">删除</view>
+        <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 v-if="currentPhrases.length === 0" class="empty-state">
-        <image src="/static/empty.svg" class="empty-icon" mode="aspectFit"></image>
-        <text class="empty-text">暂无常用语</text>
-      </view>
-    </scroll-view>
+    </view>
 
-    <view class="add-phrase-btn" @click="showAddPhraseDialog">
-      <text class="plus-icon-white">+</text>
-      添加快捷回复
+    <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-item"
+            :class="{ active: currentCategory === category.id }"
+            @click="switchCategory(category.id)"
+            @longpress="handleCategoryLongPress(category)"
+          >
+            <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>
+          
+          <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>
+          <view 
+            v-for="phrase in currentPhrases" 
+            :key="phrase.id"
+            class="phrase-item"
+            @click="handlePhraseClick(phrase)"
+          >
+            <view class="phrase-content">{{ phrase.content }}</view>
+            <view v-if="isEditMode" class="phrase-actions">
+              <view class="action-btn edit" @click.stop="editPhrase(phrase)">
+                <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>
 
     <!-- 添加/编辑常用语弹窗 -->
     <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: 'voice', name: '语音随访' },
-  { id: 'common', name: '常用回复' },
+  { id: 'visit', name: '文字随访', deletable: false },
+  { id: 'voice', name: '语音随访', deletable: false },
+  { 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;
-  padding: 24rpx 32rpx;
-  background-color: #fff;
-  overflow-x: auto;
-  white-space: nowrap;
+  overflow: hidden;
+}
 
-  .category-tab {
-    padding: 12rpx 24rpx;
-    margin-right: 16rpx;
-    font-size: 28rpx;
-    color: #666;
-    background-color: #f5f5f5;
-    border-radius: 8rpx;
-    flex-shrink: 0;
+// 左侧分类栏
+.category-sidebar {
+  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;
+    }
 
     &.active {
-      color: #ff6b35;
-      background-color: #fff5f2;
-      border: 1px solid #ff6b35;
+      background-color: #fff;
+
+      .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;
-    font-size: 28rpx;
-    color: #ff6b35;
-    background-color: #fff5f2;
-    border-radius: 8rpx;
-    flex-shrink: 0;
+    justify-content: center;
+    padding: 32rpx 24rpx;
+    font-size: 24rpx;
+    color: $primary-color;
+    background-color: #f8f8f8;
 
     .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;
-  overflow-y: auto;
+  padding: 24rpx;
 
   .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;
-          background-color: #e6f2ff;
+          color: $primary-color;
+          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);
       }
     }
   }
diff --git a/pages/message/components/chat-input.vue b/pages/message/components/chat-input.vue
index 5184f6f..d63b037 100644
--- a/pages/message/components/chat-input.vue
+++ b/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/home/video.png", action: takePhoto },
-  // { text: '病情', icon: '/static/home/avatar.svg', action: sendSymptomMessage },
-  // { text: '处方', icon: '/static/home/avatar.svg', action: sendPrescriptionMessage },
-  // { text: '续方', icon: '/static/home/avatar.svg', action: sendRefillMessage },
-  // { text: '问卷', icon: '/static/home/avatar.svg', action: sendSurveyMessage }
+  { text: "照片", icon: "/static/icon/zhaopian.png", action: showImagePicker },
+  {
+    text: "回访任务",
+    icon: "/static/icon/zhaopian.png",
+    action: showImagePicker,
+  },
+  {
+    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() {
diff --git a/pages/message/index.vue b/pages/message/index.vue
index 19d0432..e09f80f 100644
--- a/pages/message/index.vue
+++ b/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();
diff --git a/static/icon/icon-chinese-rx.png b/static/icon/icon-chinese-rx.png
deleted file mode 100644
index 10ee891..0000000
Binary files a/static/icon/icon-chinese-rx.png and /dev/null differ
diff --git a/static/icon/icon-western-rx.png b/static/icon/icon-western-rx.png
deleted file mode 100644
index 00cb9a8..0000000
Binary files a/static/icon/icon-western-rx.png and /dev/null differ
diff --git a/static/icon/kaichufang.png b/static/icon/kaichufang.png
deleted file mode 100644
index 647f267..0000000
Binary files a/static/icon/kaichufang.png and /dev/null differ
diff --git a/static/icon/kaizhongyao.png b/static/icon/kaizhongyao.png
deleted file mode 100644
index f9d649e..0000000
Binary files a/static/icon/kaizhongyao.png and /dev/null differ
diff --git a/static/icon/quxiaobingtuikuan.png b/static/icon/quxiaobingtuikuan.png
deleted file mode 100644
index 97c24a3..0000000
Binary files a/static/icon/quxiaobingtuikuan.png and /dev/null differ
diff --git a/utils/api.js b/utils/api.js
index f2164e7..243ca6b 100644
--- a/utils/api.js
+++ b/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',