feat: 新增消息按钮及相关样式，功能正在开发中

src/pages/doctor/index/index.vue

@@ -13,6 +13,10 @@
             <text class="username">{{ user.nickname || '未登录' }}</text>
             <text class="user-title" v-if="user.title">职称: {{ user.title }}</text>
           </view>
+          <view class="message-button" @click="onMessageClick">
+            <image src="/static/icons/remixicon/message-3-line.svg" class="message-icon" />
+            <view class="badge">3</view>
+          </view>
           <view class="qr-button" @click="onQrClick">
             <image src="/static/icons/remixicon/qr-code-line.svg" class="qr-icon" />
           </view>
@@ -281,6 +285,10 @@ const formatTime = (createTime: string) => {
   }
 }
 
+function onMessageClick() {
+  uni.showToast({ title: '功能正在开发中', icon: 'none' })
+}
+
 // 获取患者头像
 const getPatientAvatar = async (userId: string): Promise<string> => {
   try {
@@ -494,6 +502,40 @@ const formatActivityDescription = (activity: any) => {
   height: 60rpx;
 }
 
+.message-button {
+  width: 100rpx;
+  height: 100rpx;
+  border-radius: 50%;
+  background-color: rgba(255, 255, 255, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 20rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+  position: relative;
+}
+
+.message-icon {
+  width: 60rpx;
+  height: 60rpx;
+}
+
+.badge {
+  position: absolute;
+  top: -10rpx;
+  right: -10rpx;
+  background-color: red;
+  color: white;
+  border-radius: 50%;
+  width: 40rpx;
+  height: 40rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24rpx;
+  font-weight: bold;
+}
+
 .function-container {
   padding-inline: 20rpx;
 }

src/pages/patient-family/index/index.vue

@@ -13,6 +13,10 @@
             <text class="username">{{ user.nickname || '未登录' }}</text>
             <text class="user-role">家属</text>
           </view>
+          <view class="message-button" @click="onMessageClick">
+            <image src="/static/icons/remixicon/message-3-line.svg" class="message-icon" />
+            <view class="badge">3</view>
+          </view>
           <view class="qr-button" @click="onQrClick">
             <image src="/static/icons/remixicon/qr-code-line.svg" class="qr-icon" />
           </view>
@@ -327,6 +331,10 @@ async function checkAndNavigateToHealthData() {
   }
 }
 
+function onMessageClick() {
+  uni.showToast({ title: '功能正在开发中', icon: 'none' })
+}
+
 function onQrClick() {
   uni.navigateTo({ url: '/pages/public/profile/qr/index' })
 }
@@ -455,6 +463,40 @@ const onNewsClick = (news: News) => {
   height: 60rpx;
 }
 
+.message-button {
+  width: 100rpx;
+  height: 100rpx;
+  border-radius: 50%;
+  background-color: rgba(255, 255, 255, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 20rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+  position: relative;
+}
+
+.message-icon {
+  width: 60rpx;
+  height: 60rpx;
+}
+
+.badge {
+  position: absolute;
+  top: -10rpx;
+  right: -10rpx;
+  background-color: red;
+  color: white;
+  border-radius: 50%;
+  width: 40rpx;
+  height: 40rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24rpx;
+  font-weight: bold;
+}
+
 .function-container {
   padding-inline: 20rpx;
   margin-top: 40rpx;

src/pages/patient/index/index.vue

@@ -15,6 +15,7 @@
           </view>
           <view class="message-button" @click="onMessageClick">
             <image src="/static/icons/remixicon/message-3-line.svg" class="message-icon" />
+            <view class="badge">3</view>
           </view>
           <view class="qr-button" @click="onQrClick">
             <image src="/static/icons/remixicon/qr-code-line.svg" class="qr-icon" />
@@ -577,6 +578,7 @@ const onNewsClick = (news: News) => {
   justify-content: center;
   margin-left: 20rpx;
   box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
+  position: relative;
 }
 
 .message-icon {
@@ -584,6 +586,22 @@ const onNewsClick = (news: News) => {
   height: 60rpx;
 }
 
+.badge {
+  position: absolute;
+  top: -10rpx;
+  right: -10rpx;
+  background-color: red;
+  color: white;
+  border-radius: 50%;
+  width: 40rpx;
+  height: 40rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24rpx;
+  font-weight: bold;
+}
+
 .function-container {
   padding-inline: 20rpx;
 }