From 935c68ac6d4f0ced07f0ece27f8473843524c809 Mon Sep 17 00:00:00 2001
From: QDKF <QDKF@project.com>
Date: Thu, 18 Sep 2025 22:35:37 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=8D=B3=E6=97=B6=E6=B6=88=E6=81=AF?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E9=87=8D=E6=9E=84=EF=BC=8C=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E8=A1=A8=E6=83=85=EF=BC=8C=E5=9B=BE=E7=89=87=EF=BC=8C=E6=96=87?=
 =?UTF-8?q?=E4=BB=B6=E5=8A=9F=E8=83=BD=EF=BC=8C=E4=BF=AE=E5=A4=8D=E8=81=8A?=
 =?UTF-8?q?=E5=A4=A9=E5=8C=BA=E5=9F=9F=E5=B8=83=E5=B1=80=E9=97=AE=E9=A2=98?=
 =?UTF-8?q?=EF=BC=8C=E8=A7=A3=E5=86=B3=E6=B6=88=E6=81=AF=E8=BF=87=E5=A4=9A?=
 =?UTF-8?q?=E6=97=B6=E8=BE=93=E5=85=A5=E6=A1=86=E8=A2=AB=E6=8C=A4=E4=B8=8B?=
 =?UTF-8?q?=E5=8E=BB=E7=9A=84=E9=97=AE=E9=A2=98=EF=BC=8C=E8=B0=83=E6=95=B4?=
 =?UTF-8?q?=E7=B3=BB=E7=BB=9F=E6=B6=88=E6=81=AF=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/images/teacher/file.png                | Bin 0 -> 2672 bytes
 public/images/teacher/消息.png                | Bin 0 -> 2974 bytes
 src/views/teacher/AdminDashboard.vue          |   6 +-
 src/views/teacher/message/MessageCenter.vue   |   2 +-
 .../message/components/MessageInput.vue       | 681 +++++++++++--
 .../components/NotificationMessages.vue       | 943 ++++++++++++++++--
 .../message/components/SystemMessages.vue     |  85 +-
 7 files changed, 1539 insertions(+), 178 deletions(-)
 create mode 100644 public/images/teacher/file.png
 create mode 100644 public/images/teacher/消息.png

diff --git a/public/images/teacher/file.png b/public/images/teacher/file.png
new file mode 100644
index 0000000000000000000000000000000000000000..e31072e471d3cb90404dfebac40d32c71658d764
GIT binary patch
literal 2672
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

literal 0
HcmV?d00001

diff --git a/public/images/teacher/消息.png b/public/images/teacher/消息.png
new file mode 100644
index 0000000000000000000000000000000000000000..b2c7c015ebe9d4745e09a81fb187c3cd8bcbe063
GIT binary patch
literal 2974
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
U0I9Mo+yDRo07*qoM6N<$f+as+5C8xG

literal 0
HcmV?d00001

diff --git a/src/views/teacher/AdminDashboard.vue b/src/views/teacher/AdminDashboard.vue
index 41876d9..e6b07ab 100644
--- a/src/views/teacher/AdminDashboard.vue
+++ b/src/views/teacher/AdminDashboard.vue
@@ -727,10 +727,6 @@ const updateActiveNavItem = () => {
 </script>
 
 <style scoped>
-.admin-dashboard {
-  /* min-height: 100vh; */
-}
-
 .top-image-container {
   position: relative;
   width: 100%;
@@ -1174,3 +1170,5 @@ const updateActiveNavItem = () => {
   font-weight: normal;
 }
 </style>
+
+
diff --git a/src/views/teacher/message/MessageCenter.vue b/src/views/teacher/message/MessageCenter.vue
index 9bb8187..81ba3b9 100644
--- a/src/views/teacher/message/MessageCenter.vue
+++ b/src/views/teacher/message/MessageCenter.vue
@@ -217,7 +217,7 @@ const handleTabChange = (tabName: string) => {
 }
 
 .tab-container {
-  margin-bottom: 20px;
+  margin-bottom: 9px;
 }
 
 .message-tabs {
diff --git a/src/views/teacher/message/components/MessageInput.vue b/src/views/teacher/message/components/MessageInput.vue
index 204afdb..dd51131 100644
--- a/src/views/teacher/message/components/MessageInput.vue
+++ b/src/views/teacher/message/components/MessageInput.vue
@@ -1,24 +1,73 @@
 <template>
   <div class="message-input-container">
+    <!-- 隐藏的文件输入框 -->
+    <input ref="fileInputRef" type="file" accept="image/*,.pdf,.doc,.docx,.txt,.zip,.rar" style="display: none"
+      @change="handleFileSelect" />
+
+    <!-- 图片预览区域 -->
+    <div v-if="selectedImages.length > 0" class="image-preview-container">
+      <div class="image-preview-list">
+        <div v-for="(image, index) in selectedImages" :key="index" class="image-preview-item">
+          <img :src="image.url" :alt="image.name" class="preview-image" />
+          <button class="remove-image-btn" @click="removeImage(index)">×</button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 文件预览区域 -->
+    <div v-if="selectedFiles.length > 0" class="file-preview-container">
+      <div class="file-preview-list">
+        <div v-for="(file, index) in selectedFiles" :key="index" class="file-preview-item">
+          <div class="file-icon">
+            <img :src="getFileIcon(file.type)" :alt="file.name" class="file-preview-image" />
+          </div>
+          <div class="file-info">
+            <div class="file-name">{{ file.name }}</div>
+            <div class="file-size">{{ formatFileSize(file.size) }}</div>
+          </div>
+          <button class="remove-file-btn" @click="removeFile(index)">×</button>
+        </div>
+      </div>
+    </div>
+
+
     <div class="input-wrapper">
-      <n-input
-        v-model:value="messageText"
-        type="textarea"
-        :placeholder="placeholder"
-        :autosize="{ minRows: 1, maxRows: 4 }"
-        :bordered="false"
-        class="message-input"
-        @keydown="handleKeyDown"
-        @input="handleInput"
-      />
-      <div class="input-actions">
-        <n-button
-          type="primary"
-          size="medium"
-          :disabled="!canSend"
-          class="send-button"
-          @click="handleSend"
-        >
+      <n-input v-model:value="messageText" type="textarea" :placeholder="placeholder"
+        :autosize="{ minRows: 3, maxRows: 6 }" :bordered="false" class="message-input" @keydown="handleKeyDown"
+        @input="handleInput" />
+    </div>
+
+
+    <div class="input-footer">
+      <div class="action-buttons">
+        <div class="emoji-button-wrapper">
+          <button class="action-btn" :class="{ active: showEmojiPicker }" @click="toggleEmojiPicker">
+            <img src="/images/teacher/expression.png" alt="表情" class="action-icon" />
+          </button>
+          <!-- 表情选择器从表情按钮上方弹出 -->
+          <div v-if="showEmojiPicker" class="emoji-picker">
+            <div class="emoji-picker-header">
+              <span class="emoji-title">选择表情</span>
+              <button class="emoji-close" @click="closeEmojiPicker">×</button>
+            </div>
+            <div class="emoji-grid">
+              <button v-for="emoji in emojiList" :key="emoji" class="emoji-item" @click="insertEmoji(emoji)">
+                {{ emoji }}
+              </button>
+            </div>
+          </div>
+        </div>
+        <button class="action-btn" @click="handleImage">
+          <img src="/images/teacher/Image.png" alt="图片" class="action-icon" />
+        </button>
+        <button class="action-btn" @click="handleFile">
+          <img src="/images/teacher/file.png" alt="文件" class="action-icon" />
+        </button>
+      </div>
+
+      <div class="footer-right">
+        <span class="char-count">{{ messageText.length }}/{{ maxLength }}</span>
+        <n-button type="primary" size="medium" :disabled="!canSend" class="send-button" @click="handleSend">
           发送
         </n-button>
       </div>
@@ -47,21 +96,186 @@ const props = withDefaults(defineProps<Props>(), {
 const emit = defineEmits<{
   send: [message: string]
   input: [value: string]
+  emoji: []
+  image: [data: { file: File; url: string; name: string; size: number }]
+  file: [data: { file: File; name: string; size: number; type: string }]
 }>()
 
 // 响应式数据
 const messageText = ref('')
+const showEmojiPicker = ref(false)
+const fileInputRef = ref<HTMLInputElement | null>(null)
+const selectedImages = ref<Array<{ file: File; url: string; name: string; size: number }>>([])
+const selectedFiles = ref<Array<{ file: File; name: string; size: number; type: string }>>([])
+
+// 表情列表
+const emojiList = ref([
+  '😀', '😃', '😄', '😁', '😆', '😅', '😂', '🤣', '😊', '😇',
+  '🙂', '🙃', '😉', '😌', '😍', '🥰', '😘', '😗', '😙', '😚',
+  '😋', '😛', '😝', '😜', '🤪', '🤨', '🧐', '🤓', '😎', '🤩',
+  '🥳', '😏', '😒', '😞', '😔', '😟', '😕', '🙁', '☹️', '😣',
+  '😖', '😫', '😩', '🥺', '😢', '😭', '😤', '😠', '😡', '🤬',
+  '🤯', '😳', '🥵', '🥶', '😱', '😨', '😰', '😥', '😓', '🤗',
+  '🤔', '🤭', '🤫', '🤥', '😶', '😐', '😑', '😬', '🙄', '😯',
+  '😦', '😧', '😮', '😲', '🥱', '😴', '🤤', '😪', '😵', '🤐',
+  '🥴', '🤢', '🤮', '🤧', '😷', '🤒', '🤕', '🤑', '🤠', '😈',
+  '👿', '👹', '👺', '🤡', '💩', '👻', '💀', '☠️', '👽', '👾',
+  '🤖', '🎃', '😺', '😸', '😹', '😻', '😼', '😽', '🙀', '😿',
+  '😾', '👶', '🧒', '👦', '👧', '🧑', '👨', '👩', '🧓', '👴',
+  '👵', '👱', '🧔', '👲', '🧕', '👮', '👷', '💂', '🕵️', '👩‍⚕️',
+  '👨‍⚕️', '👩‍🌾', '👨‍🌾', '👩‍🍳', '👨‍🍳', '👩‍🎓', '👨‍🎓', '👩‍🎤', '👨‍🎤', '👩‍🏫',
+  '👨‍🏫', '👩‍🏭', '👨‍🏭', '👩‍💻', '👨‍💻', '👩‍💼', '👨‍💼', '👩‍🔧', '👨‍🔧', '👩‍🔬',
+  '👨‍🔬', '👩‍🎨', '👨‍🎨', '👩‍🚒', '👨‍🚒', '👩‍✈️', '👨‍✈️', '👩‍🚀', '👨‍🚀', '👩‍⚖️',
+  '👨‍⚖️', '👰', '🤵', '👸', '🤴', '🦸', '🦹', '🤶', '🎅', '🧙',
+  '🧚', '🧛', '🧜', '🧝', '🧞', '🧟', '💆', '💇', '🚶', '🏃',
+  '💃', '🕺', '👯', '🧘', '🛀', '🛌', '👭', '👫', '👬', '💏',
+  '💑', '👪', '🗣️', '👤', '👥', '🫂', '👋', '🤚', '🖐️', '✋',
+  '🖖', '👌', '🤏', '✌️', '🤞', '🤟', '🤘', '🤙', '👈', '👉',
+  '👆', '🖕', '👇', '☝️', '👍', '👎', '✊', '👊', '🤛', '🤜',
+  '👏', '🙌', '👐', '🤲', '🤝', '🙏', '✍️', '💅', '🤳', '💪',
+  '🦾', '🦿', '🦵', '🦶', '👂', '🦻', '👃', '🧠', '🦷', '🦴',
+  '👀', '👁️', '👅', '👄', '💋', '🩸', '💎', '👑', '🥽', '🕶️',
+  '👓', '🦺', '👔', '👕', '👖', '🧣', '🧤', '🧥', '🧦', '👗',
+  '👘', '🥻', '🩱', '🩲', '🩳', '👙', '👚', '👛', '👜', '👝',
+  '🎒', '👞', '👟', '🥾', '🥿', '👠', '👡', '🩰', '👢', '👑',
+  '💍', '💎', '💄', '💅', '💇', '💆', '🦯', '🦽', '🦼', '🩹',
+  '🩺', '💊', '💉', '🧬', '🦠', '🩸', '💧', '💦', '💨', '🕳️',
+  '💣', '💥', '💢', '💫', '💦', '💨', '🕳️', '💣', '💥', '💢',
+  '💫', '💦', '💨', '🕳️', '💣', '💥', '💢', '💫', '💦', '💨'
+])
 
 // 计算属性
 const canSend = computed(() => {
-  return messageText.value.trim().length > 0 && !props.disabled
+  return (messageText.value.trim().length > 0 || selectedImages.value.length > 0 || selectedFiles.value.length > 0) && !props.disabled
 })
 
 // 方法
+// 图片相关方法
+const handleImage = () => {
+  fileInputRef.value?.click()
+}
+
+const handleFile = () => {
+  fileInputRef.value?.click()
+}
+
+const handleFileSelect = (event: Event) => {
+  const target = event.target as HTMLInputElement
+  const files = target.files
+  if (files && files.length > 0) {
+    const file = files[0]
+    // 检查文件类型
+    if (file.type.startsWith('image/')) {
+      handleImageUpload(file)
+    } else {
+      handleFileUpload(file)
+    }
+  }
+  // 清空input值，允许重复选择同一文件
+  target.value = ''
+}
+
+const handleImageUpload = (file: File) => {
+  // 检查文件大小 (限制为5MB)
+  if (file.size > 5 * 1024 * 1024) {
+    alert('图片大小不能超过5MB')
+    return
+  }
+
+  // 创建预览
+  const reader = new FileReader()
+  reader.onload = (e) => {
+    try {
+      const imageUrl = e.target?.result as string
+      if (imageUrl) {
+        // 添加到预览列表
+        const imageData = {
+          file,
+          url: imageUrl,
+          name: file.name,
+          size: file.size
+        }
+        selectedImages.value.push(imageData)
+      }
+    } catch (error) {
+      console.error('处理图片时出错:', error)
+    }
+  }
+  reader.onerror = () => {
+    console.error('读取图片文件失败')
+  }
+  reader.readAsDataURL(file)
+}
+
+const handleFileUpload = (file: File) => {
+  // 检查文件大小 (限制为10MB)
+  if (file.size > 10 * 1024 * 1024) {
+    alert('文件大小不能超过10MB')
+    return
+  }
+
+  // 添加到文件预览列表
+  selectedFiles.value.push({
+    file,
+    name: file.name,
+    size: file.size,
+    type: file.type
+  })
+}
+
+const removeImage = (index: number) => {
+  selectedImages.value.splice(index, 1)
+}
+
+const removeFile = (index: number) => {
+  selectedFiles.value.splice(index, 1)
+}
+
+// 获取文件图标
+const getFileIcon = (type: string) => {
+  if (type.includes('pdf')) return '/images/profile/pdf.png'
+  if (type.includes('word') || type.includes('document')) return '/images/profile/word.png'
+  if (type.includes('excel') || type.includes('spreadsheet')) return '/images/profile/xls.png'
+  if (type.includes('powerpoint') || type.includes('presentation')) return '/images/profile/ppt.png'
+  if (type.includes('zip') || type.includes('rar')) return '/images/profile/zip.png'
+  if (type.includes('text')) return '/images/profile/doc.png'
+  return '/images/profile/file.png'
+}
+
+// 格式化文件大小
+const formatFileSize = (bytes: number) => {
+  if (bytes === 0) return '0 B'
+  const k = 1024
+  const sizes = ['B', 'KB', 'MB', 'GB']
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i]
+}
+
 const handleSend = () => {
   if (canSend.value) {
-    emit('send', messageText.value.trim())
+    // 发送文本消息
+    if (messageText.value.trim()) {
+      emit('send', messageText.value.trim())
+    }
+
+    // 发送图片
+    if (selectedImages.value.length > 0) {
+      selectedImages.value.forEach((image: { file: File; url: string; name: string; size: number }) => {
+        emit('image', image)
+      })
+    }
+
+    // 发送文件
+    if (selectedFiles.value.length > 0) {
+      selectedFiles.value.forEach((file: { file: File; name: string; size: number; type: string }) => {
+        emit('file', file)
+      })
+    }
+
+    // 清空输入
     messageText.value = ''
+    selectedImages.value = []
+    selectedFiles.value = []
   }
 }
 
@@ -77,6 +291,24 @@ const handleKeyDown = (event: KeyboardEvent) => {
   }
 }
 
+// 表情相关方法
+const toggleEmojiPicker = () => {
+  showEmojiPicker.value = !showEmojiPicker.value
+}
+
+const closeEmojiPicker = () => {
+  showEmojiPicker.value = false
+}
+
+const insertEmoji = (emoji: string) => {
+  messageText.value += emoji
+  closeEmojiPicker()
+  // 触发输入事件
+  emit('input', messageText.value)
+}
+
+// 其他事件处理方法
+
 // 暴露方法供父组件调用
 defineExpose({
   focus: () => {
@@ -95,58 +327,344 @@ defineExpose({
   left: 0;
   right: 0;
   background: #ffffff;
-  border-top: 1px solid #e8e8e8;
+  border: 1px solid #E0E0E0;
   padding: 16px 20px;
   z-index: 100;
+  position: relative;
 }
 
-.input-wrapper {
+/* 图片预览样式 */
+.image-preview-container {
+  padding: 12px;
+  border-bottom: 1px solid #F0F0F0;
+  background: #FAFAFA;
+  margin: -16px -20px 16px -20px;
+}
+
+.image-preview-list {
   display: flex;
-  align-items: center;
-  gap: 12px;
-  max-width: 1200px;
-  margin: 0 auto;
-}
-
-.message-input {
-  flex: 1;
-  background: #f8f9fa;
-  border-radius: 12px;
-  padding: 12px 16px;
-  min-height: 44px;
-  font-size: 14px;
-  line-height: 1.5;
-  transition: all 0.2s ease;
-}
-
-.message-input:hover {
-  background: #f0f2f5;
-}
-
-.message-input:focus-within {
-  background: #ffffff;
-  box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
-}
-
-.input-actions {
-  display: flex;
-  align-items: center;
+  flex-wrap: wrap;
   gap: 8px;
 }
 
-.send-button {
-  height: 44px;
-  padding: 0 24px;
-  border-radius: 12px;
+.image-preview-item {
+  position: relative;
+  width: 80px;
+  height: 80px;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid #E0E0E0;
+}
+
+.preview-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  cursor: pointer;
+}
+
+.remove-image-btn {
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #ff4757;
+  color: white;
+  border: none;
+  font-size: 14px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  transition: all 0.2s ease;
+}
+
+.remove-image-btn:hover {
+  background: #ff3742;
+  transform: scale(1.1);
+}
+
+/* 文件预览样式 */
+.file-preview-container {
+  padding: 12px;
+  border-bottom: 1px solid #F0F0F0;
+  background: #FAFAFA;
+  margin: -16px -20px 16px -20px;
+}
+
+.file-preview-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.file-preview-item {
+  display: flex;
+  align-items: center;
+  padding: 8px 12px;
+  background: #ffffff;
+  border: 1px solid #E0E0E0;
+  border-radius: 8px;
+  position: relative;
+}
+
+.file-icon {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 12px;
+  flex-shrink: 0;
+}
+
+.file-preview-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 4px;
+}
+
+.file-type-icon {
+  font-size: 24px;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #F5F5F5;
+  border-radius: 4px;
+}
+
+.file-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.file-name {
+  font-size: 14px;
   font-weight: 500;
+  color: #333;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-bottom: 2px;
+}
+
+.file-size {
+  font-size: 12px;
+  color: #666;
+}
+
+.remove-file-btn {
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #ff4757;
+  color: white;
+  border: none;
+  font-size: 14px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  transition: all 0.2s ease;
+}
+
+.remove-file-btn:hover {
+  background: #ff3742;
+  transform: scale(1.1);
+}
+
+.input-wrapper {
+  margin-bottom: 12px;
+}
+
+.message-input {
+  width: 100%;
+  background: #ffffff;
+  border-top: none;
+  border-radius: 0 0 3px 3px;
+  padding: 5px 12px 12px 0;
+  font-size: 14px;
+  line-height: 1.6;
+  transition: all 0.2s ease;
+  resize: none;
+}
+
+.input-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.action-buttons {
+  display: flex;
+  gap: 8px;
+}
+
+.emoji-button-wrapper {
+  position: relative;
+}
+
+.action-btn {
+  width: 32px;
+  height: 32px;
+  border: 1.5px solid #D8D8D8;
+  background: transparent;
+  border-radius: 2px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.action-btn:hover {
+  background: #E3F2FD;
+  border-color: #D8D8D8;
+}
+
+.action-btn.active {
+  background: #E3F2FD;
+  border-color: #0288D1;
+}
+
+.action-icon {
+  width: 17px;
+  height: 17px;
+  object-fit: contain;
+}
+
+.footer-right {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.char-count {
+  font-size: 10px;
+  color: #3F3F44;
+}
+
+.send-button {
+  width: 70px;
+  height: 35px;
+  padding: 0;
+  border-radius: 3px;
+  font-weight: 400;
   font-size: 14px;
   white-space: nowrap;
   transition: all 0.2s ease;
 }
 
-.send-button:not(:disabled):hover {
-  transform: translateY(-1px);
-  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.3);
+/* 表情选择器样式 */
+.emoji-picker {
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-bottom: 12px;
+  background: #ffffff;
+  border: 1px solid #E8E8E8;
+  border-radius: 12px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
+  z-index: 1000;
+  max-height: 200px;
+  overflow: hidden;
+  min-width: 320px;
+  backdrop-filter: blur(8px);
+}
+
+.emoji-picker-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 16px;
+  border-bottom: 1px solid #F0F0F0;
+  background: #FAFAFA;
+  border-radius: 12px 12px 0 0;
+}
+
+.emoji-title {
+  font-size: 13px;
+  color: #333;
+  font-weight: 600;
+  letter-spacing: 0.3px;
+}
+
+.emoji-close {
+  width: 24px;
+  height: 24px;
+  border: none;
+  background: none;
+  font-size: 18px;
+  color: #999;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 6px;
+  transition: all 0.2s ease;
+  font-weight: 300;
+}
+
+.emoji-close:hover {
+  background: #F0F0F0;
+  color: #666;
+  transform: scale(1.05);
+}
+
+.emoji-grid {
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  gap: 4px;
+  padding: 16px;
+  max-height: 180px;
+  overflow-y: auto;
+  /* 隐藏滚动条但保留滚动功能 */
+  scrollbar-width: none;
+  /* Firefox */
+  -ms-overflow-style: none;
+  /* IE and Edge */
+}
+
+.emoji-grid::-webkit-scrollbar {
+  display: none;
+  /* Chrome, Safari, Opera */
+}
+
+.emoji-item {
+  width: 36px;
+  height: 36px;
+  border: none;
+  background: none;
+  font-size: 20px;
+  cursor: pointer;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+}
+
+.emoji-item:hover {
+  background: #F5F5F5;
+  transform: scale(1.15);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+.emoji-item:active {
+  transform: scale(1.05);
+  background: #E8F4FD;
 }
 
 /* 自定义Naive UI样式 */
@@ -155,12 +673,20 @@ defineExpose({
   border: none !important;
   padding: 0 !important;
   font-size: 14px;
-  line-height: 1.5;
+  line-height: 1.6;
   resize: none;
 }
 
+:deep(.n-input-wrapper) {
+  padding-left: 0 !important;
+}
+
+:deep(.n-input) {
+  padding-left: 0 !important;
+}
+
 :deep(.n-input .n-input__textarea::placeholder) {
-  color: #999;
+  color: #C2C2C2;
   font-size: 14px;
 }
 
@@ -170,17 +696,21 @@ defineExpose({
 }
 
 :deep(.n-button.n-button--primary-type) {
-  background: linear-gradient(135deg, #1890ff 0%, #40a9ff 100%);
-  border: none;
+  background: #0088D1;
+  border: 1px solid #0088D1;
+  color: #FFF;
 }
 
 :deep(.n-button.n-button--primary-type:not(.n-button--disabled):hover) {
-  background: linear-gradient(135deg, #40a9ff 0%, #1890ff 100%);
+  background: #0077C2;
+  border-color: #0077C2;
 }
 
 :deep(.n-button.n-button--primary-type.n-button--disabled) {
-  background: #d9d9d9;
-  color: #fff;
+  background: #0088D1;
+  border-color: #0088D1;
+  color: #FFF;
+  opacity: 0.5;
 }
 
 /* 响应式设计 */
@@ -188,20 +718,25 @@ defineExpose({
   .message-input-container {
     padding: 12px 16px;
   }
-  
-  .input-wrapper {
-    gap: 8px;
+
+  .action-btn {
+    width: 28px;
+    height: 28px;
   }
-  
+
+  .action-icon {
+    width: 14px;
+    height: 14px;
+  }
+
   .send-button {
-    height: 40px;
-    padding: 0 16px;
+    height: 32px;
+    padding: 0 12px;
     font-size: 13px;
   }
   
   .message-input {
-    padding: 10px 14px;
-    min-height: 40px;
+    padding: 10px;
     font-size: 13px;
   }
 }
diff --git a/src/views/teacher/message/components/NotificationMessages.vue b/src/views/teacher/message/components/NotificationMessages.vue
index 1bb7cc9..ad34825 100644
--- a/src/views/teacher/message/components/NotificationMessages.vue
+++ b/src/views/teacher/message/components/NotificationMessages.vue
@@ -75,21 +75,26 @@
               <h4 class="chat-user-name">
                 {{ activeContact?.name }}
                 <span v-if="activeContact?.type === 'group'" class="member-count">({{ activeContact?.memberCount || 0
-                }}人)</span>
+}}人)</span>
               </h4>
             </div>
           </div>
           <div class="chat-actions">
-            <n-button text>
+            <n-button text @click="toggleDetailsPanel">
               <n-icon size="18">
-                <EllipsisVertical />
+                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+                  viewBox="0 0 512 640">
+                  <circle cx="256" cy="80" r="80" fill="#CCCCCC"></circle>
+                  <circle cx="256" cy="320" r="80" fill="#CCCCCC"></circle>
+                  <circle cx="256" cy="560" r="80" fill="#CCCCCC"></circle>
+                </svg>
               </n-icon>
             </n-button>
           </div>
         </div>
 
         <!-- 聊天消息区域 -->
-        <div class="chat-messages" ref="messagesContainer">
+        <div class="chat-messages" ref="messagesContainer" @click="closeDetailsPanel">
           <div class="messages-content">
             <!-- 消息空状态 -->
             <div v-if="currentMessages.length === 0 && !messagesLoading" class="messages-empty">
@@ -110,8 +115,16 @@
                   <span class="date-text">{{ message.dateText }}</span>
                 </div>
 
+                <!-- 消息时间 - 独立一行显示在消息上面 -->
+                <div class="message-time-row">
+                  <div class="message-time">
+                    {{ message.time }}
+                  </div>
+                </div>
+
                 <!-- 消息内容 -->
                 <div class="message-item" :class="{ 'message-own': message.isOwn }">
+                  <!-- 对方消息头像在左边 -->
                   <div v-if="!message.isOwn" class="message-avatar">
                     <img v-if="message.avatar" :src="message.avatar" :alt="message.senderName" />
                     <div v-else class="avatar-placeholder">
@@ -135,33 +148,158 @@
                     <!-- 文件消息 -->
                     <div v-else-if="message.type === 'file'" class="message-bubble file-bubble">
                       <div class="file-info">
-                        <n-icon size="20" color="#1890ff">
-                          <DocumentOutline />
-                        </n-icon>
+                        <div class="file-icon">
+                          <img :src="getFileIcon(message.fileType || '')" :alt="message.fileName"
+                            class="file-icon-image" />
+                        </div>
                         <div class="file-details">
                           <span class="file-name">{{ message.fileName }}</span>
-                          <span class="file-size">{{ message.fileSize }}</span>
+                          <img src="/images/teacher/下载-蓝.png" alt="下载" class="file-download"
+                            @click="downloadFile(message)" />
                         </div>
                       </div>
                     </div>
+                  </div>
 
-                    <div class="message-time">
-                      {{ message.time }}
-                      <span v-if="message.isOwn" class="read-status"
-                        :class="{ 'read': message.isRead, 'unread': !message.isRead }">
-                        {{ message.isRead ? '已读' : '未读' }}
-                      </span>
+                  <!-- 自己消息头像在右边 -->
+                  <div v-if="message.isOwn" class="message-avatar">
+                    <img v-if="message.avatar" :src="message.avatar" :alt="message.senderName" />
+                    <div v-else class="avatar-placeholder">
+                      {{ message.senderName.charAt(0) }}
                     </div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
+
+          <!-- 详情面板 - 在聊天消息区域内部显示 -->
+          <div v-if="showDetailsPanel" class="details-panel" @click.stop>
+            <div class="details-content">
+              <!-- 群聊内容 -->
+              <div v-if="activeContact?.type === 'group'" class="group-details">
+                <!-- 搜索群成员 -->
+                <div class="search-section">
+                  <div class="search-input-wrapper">
+                    <svg class="search-icon" viewBox="0 0 24 24" width="22" height="22">
+                      <path fill="currentColor"
+                        d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" />
+                    </svg>
+                    <input type="text" placeholder="搜索群成员" class="search-input">
+                  </div>
+                </div>
+
+                <!-- 群成员列表 -->
+                <div class="members-section">
+                  <div class="members-grid">
+                    <div v-for="i in 20" :key="i" class="member-item">
+                      <div class="member-avatar">
+                        <img src="https://avatars.githubusercontent.com/u/38358644" alt="成员头像" />
+                      </div>
+                      <div class="member-name">李小多</div>
+                    </div>
+                  </div>
+                  <div class="view-more">
+                    <span>查看更多</span>
+                    <svg class="chevron-icon" viewBox="0 0 24 24" width="16" height="16">
+                      <path fill="currentColor" d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z" />
+                    </svg>
+                  </div>
+                </div>
+
+                <!-- 群组信息 -->
+                <div class="info-section">
+                  <div class="info-item">
+                    <span class="info-label">班级名称</span>
+                    <span class="info-value">计算机一班</span>
+                  </div>
+                  <div class="info-item">
+                    <span class="info-label">班级人数</span>
+                    <span class="info-value">149人</span>
+                  </div>
+                </div>
+
+                <!-- 群组设置 -->
+                <div class="settings-section">
+                  <div class="setting-item">
+                    <span class="setting-label">消息免打扰</span>
+                    <div class="switch-wrapper">
+                      <input type="checkbox" id="messageMute" v-model="groupSettings.messageMute" class="switch-input">
+                      <label for="messageMute" class="switch-label"></label>
+                    </div>
+                  </div>
+                  <div class="setting-item">
+                    <span class="setting-label">全员禁言</span>
+                    <div class="switch-wrapper">
+                      <input type="checkbox" id="muteAll" v-model="groupSettings.muteAll" class="switch-input">
+                      <label for="muteAll" class="switch-label"></label>
+                    </div>
+                  </div>
+                  <div class="setting-item">
+                    <span class="setting-label">发言加讲师标签</span>
+                    <div class="switch-wrapper">
+                      <input type="checkbox" id="addTeacherTag" v-model="groupSettings.addTeacherTag"
+                        class="switch-input">
+                      <label for="addTeacherTag" class="switch-label"></label>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- 操作按钮 -->
+                <div class="actions-section">
+                  <button class="action-btn danger-btn">清空聊天记录</button>
+                  <button class="action-btn danger-btn">退出班级群</button>
+                </div>
+              </div>
+
+              <!-- 私聊内容 -->
+              <div v-else class="private-details">
+                <!-- 用户信息 -->
+                <div class="user-info-section">
+                  <div class="user-avatar">
+                    <img :src="activeContact?.avatar || 'https://avatars.githubusercontent.com/u/38358644'"
+                      :alt="activeContact?.name" />
+                  </div>
+                  <div class="user-details">
+                    <h4 class="user-name">{{ activeContact?.name }}</h4>
+                    <p class="user-status">在线</p>
+                  </div>
+                </div>
+
+                <!-- 用户设置 -->
+                <div class="settings-section">
+                  <div class="setting-item">
+                    <span class="setting-label">消息免打扰</span>
+                    <div class="switch-wrapper">
+                      <input type="checkbox" id="privateMessageMute" v-model="privateSettings.messageMute"
+                        class="switch-input">
+                      <label for="privateMessageMute" class="switch-label"></label>
+                    </div>
+                  </div>
+                  <div class="setting-item">
+                    <span class="setting-label">置顶聊天</span>
+                    <div class="switch-wrapper">
+                      <input type="checkbox" id="pinChat" v-model="privateSettings.pinChat" class="switch-input">
+                      <label for="pinChat" class="switch-label"></label>
+                    </div>
+                  </div>
+                </div>
+
+                <!-- 操作按钮 -->
+                <div class="actions-section">
+                  <button class="action-btn">查看资料</button>
+                  <button class="action-btn">清空聊天记录</button>
+                  <button class="action-btn danger-btn">删除好友</button>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
 
         <!-- 消息输入区域 -->
         <div class="chat-input-area">
-          <MessageInput @send="handleSendMessage" placeholder="请输入消息内容..." ref="messageInputRef" />
+          <MessageInput @send="handleSendMessage" @emoji="handleEmoji" @image="handleImage" @file="handleFile"
+            placeholder="这里输入..." ref="messageInputRef" />
         </div>
       </div>
     </div>
@@ -172,13 +310,12 @@
 import { ref, onMounted, computed, nextTick } from 'vue'
 import { NIcon, NBadge, useMessage } from 'naive-ui'
 import {
-  EllipsisVertical,
   PeopleOutline,
-  ChatbubbleEllipsesOutline,
-  DocumentOutline
+  ChatbubbleEllipsesOutline
 } from '@vicons/ionicons5'
 import MessageInput from './MessageInput.vue'
 import { ChatApi } from '@/api'
+import { useUserStore } from '@/stores/user'
 
 // 联系人类型定义（兼容API返回的数据）
 interface Contact {
@@ -209,6 +346,7 @@ interface Message {
   fileName?: string
   fileSize?: string
   fileUrl?: string
+  fileType?: string
 }
 
 // 响应式数据
@@ -216,6 +354,23 @@ const activeContactId = ref<string | null>(null)
 const messagesContainer = ref<HTMLElement>()
 const messageInputRef = ref()
 const message = useMessage()
+const userStore = useUserStore()
+
+// 详情面板状态
+const showDetailsPanel = ref(false)
+
+// 群组设置状态
+const groupSettings = ref({
+  messageMute: true,
+  muteAll: false,
+  addTeacherTag: false
+})
+
+// 私聊设置状态
+const privateSettings = ref({
+  messageMute: false,
+  pinChat: false
+})
 
 // 加载状态
 const loading = ref(false)
@@ -281,7 +436,7 @@ const loadGroupMemberCount = async (chatId: string) => {
       const memberCount = response.data.result.length
 
       // 更新对应联系人的成员数量
-      const contact = contacts.value.find(c => c.id === chatId)
+      const contact = contacts.value.find((c: Contact) => c.id === chatId)
       if (contact) {
         contact.memberCount = memberCount
       }
@@ -372,11 +527,11 @@ const formatTime = (timeStr: string) => {
 
 // 计算属性
 const activeContact = computed(() => {
-  return contacts.value.find(contact => contact.id === activeContactId.value)
+  return contacts.value.find((contact: Contact) => contact.id === activeContactId.value)
 })
 
 const currentMessages = computed(() => {
-  return messages.value.filter(message => message.contactId === activeContactId.value)
+  return messages.value.filter((message: Message) => message.contactId === activeContactId.value)
 })
 
 // 方法定义
@@ -417,8 +572,8 @@ const handleSendMessage = async (content: string) => {
     contactId: activeContactId.value,
     type: 'text',
     content,
-    senderName: '我',
-    avatar: '',
+    senderName: userStore.user?.profile?.realName || userStore.user?.nickname || '我',
+    avatar: userStore.user?.avatar || '', // 使用真实用户头像
     time: new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }),
     isOwn: true,
     isRead: false // 新发送的消息默认为未读
@@ -434,18 +589,30 @@ const handleSendMessage = async (content: string) => {
     contact.lastMessageTime = newMessage.time
   }
 
-  // 发送到服务器
+  // 模拟发送到服务器
   try {
-    await ChatApi.sendMessage({
+    // 模拟网络延迟
+    await new Promise(resolve => setTimeout(resolve, 300))
+
+    // 模拟成功响应
+    console.log('模拟发送消息成功:', {
       chatId: activeContactId.value,
       content,
       messageType: 'text'
     })
+
+    // 模拟对方回复（随机回复）
+    setTimeout(() => {
+      if (activeContactId.value) {
+        simulateReply(activeContactId.value)
+      }
+    }, 1000 + Math.random() * 2000) // 1-3秒后回复
+
   } catch (error) {
     console.error('发送消息失败:', error)
     message.error('发送消息失败')
     // 如果发送失败，可以从本地消息列表中移除
-    const index = messages.value.findIndex(msg => msg.id === newMessage.id)
+    const index = messages.value.findIndex((msg: Message) => msg.id === newMessage.id)
     if (index > -1) {
       messages.value.splice(index, 1)
     }
@@ -456,6 +623,49 @@ const handleSendMessage = async (content: string) => {
   })
 }
 
+// 模拟对方回复
+const simulateReply = (chatId: string) => {
+  const replies = [
+    '好的，我明白了',
+    '谢谢你的消息',
+    '收到！',
+    '没问题',
+    '好的，我会处理的',
+    '明白了',
+    '收到收到',
+    '好的，稍等',
+    '我看到了',
+    '嗯嗯，知道了'
+  ]
+
+  const randomReply = replies[Math.floor(Math.random() * replies.length)]
+
+  const replyMessage: Message = {
+    id: (Date.now() + Math.random()).toString(),
+    contactId: chatId,
+    type: 'text',
+    content: randomReply,
+    senderName: '对方',
+    avatar: 'https://avatars.githubusercontent.com/u/38358644', // 使用示例头像
+    time: new Date().toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' }),
+    isOwn: false,
+    isRead: true
+  }
+
+  messages.value.push(replyMessage)
+
+  // 更新联系人最后消息
+  const contact = contacts.value.find((c: Contact) => c.id === chatId)
+  if (contact) {
+    contact.lastMessage = randomReply
+    contact.lastMessageTime = replyMessage.time
+    contact.unreadCount = (contact.unreadCount || 0) + 1
+  }
+
+  nextTick(() => {
+    scrollToBottom()
+  })
+}
 
 const scrollToBottom = () => {
   if (messagesContainer.value) {
@@ -468,6 +678,194 @@ const previewImage = (src: string) => {
   console.log('预览图片:', src)
 }
 
+// 获取文件图标
+const getFileIcon = (type: string) => {
+  if (type.includes('pdf')) return '/images/profile/pdf.png'
+  if (type.includes('word') || type.includes('document')) return '/images/profile/word.png'
+  if (type.includes('excel') || type.includes('spreadsheet')) return '/images/profile/xls.png'
+  if (type.includes('powerpoint') || type.includes('presentation')) return '/images/profile/ppt.png'
+  if (type.includes('zip') || type.includes('rar')) return '/images/profile/zip.png'
+  if (type.includes('text')) return '/images/profile/doc.png'
+  return '/images/profile/file.png'
+}
+
+// 下载文件
+const downloadFile = (message: any) => {
+  // 这里可以实现文件下载逻辑
+  console.log('下载文件:', message.fileName)
+  // 可以创建一个临时的下载链接
+  if (message.fileUrl) {
+    const link = document.createElement('a')
+    link.href = message.fileUrl
+    link.download = message.fileName
+    link.click()
+  } else {
+    // 如果没有文件URL，可以提示用户
+    alert('文件下载功能待实现')
+  }
+}
+
+// 切换详情面板
+const toggleDetailsPanel = () => {
+  showDetailsPanel.value = !showDetailsPanel.value
+}
+
+// 关闭详情面板
+const closeDetailsPanel = () => {
+  showDetailsPanel.value = false
+}
+
+// 新增事件处理方法
+const handleEmoji = () => {
+  console.log('选择表情')
+  // TODO: 实现表情选择功能
+}
+
+const handleImage = (imageData: any) => {
+  // 验证参数
+  if (!imageData || !imageData.url) {
+    console.error('图片数据无效:', imageData)
+    return
+  }
+
+  try {
+    // 创建图片消息
+    const imageMessage: Message = {
+      id: Date.now().toString(),
+      contactId: activeContactId.value!,
+      type: 'image',
+      content: imageData.url,
+      fileName: imageData.name || '图片',
+      fileSize: imageData.size?.toString() || '0',
+      senderName: userStore.user?.profile?.realName || userStore.user?.nickname || '我',
+      avatar: userStore.user?.avatar || '',
+      time: formatTime(new Date().toISOString()),
+      isOwn: true,
+      isRead: false
+    }
+
+    // 添加到当前聊天
+    if (activeContactId.value) {
+      // 添加到消息列表
+      messages.value.push(imageMessage)
+
+      // 更新联系人最后消息
+      const contact = contacts.value.find((c: Contact) => c.id === activeContactId.value)
+      if (contact) {
+        contact.lastMessage = '[图片]'
+        contact.lastMessageTime = formatTime(new Date().toISOString())
+      }
+    }
+
+    // 模拟发送图片到服务器
+    setTimeout(() => {
+      // 消息已发送
+
+      // 模拟对方回复
+      setTimeout(() => {
+        const replyMessage: Message = {
+          id: (Date.now() + 1).toString(),
+          contactId: activeContactId.value!,
+          type: 'text',
+          content: '收到图片了！',
+          senderName: '对方',
+          avatar: 'https://avatars.githubusercontent.com/u/38358644',
+          time: formatTime(new Date().toISOString()),
+          isOwn: false,
+          isRead: false
+        }
+
+        if (activeContactId.value) {
+          // 添加到消息列表
+          messages.value.push(replyMessage)
+
+          // 更新联系人最后消息
+          const contact = contacts.value.find((c: Contact) => c.id === activeContactId.value)
+          if (contact) {
+            contact.lastMessage = '收到图片了！'
+            contact.lastMessageTime = formatTime(new Date().toISOString())
+          }
+        }
+      }, 1000)
+    }, 500)
+  } catch (error) {
+    console.error('处理图片消息时出错:', error)
+  }
+}
+
+const handleFile = (fileData: any) => {
+  // 验证参数
+  if (!fileData || !fileData.file) {
+    console.error('文件数据无效:', fileData)
+    return
+  }
+
+  try {
+    // 创建文件消息
+    const fileMessage: Message = {
+      id: Date.now().toString(),
+      contactId: activeContactId.value!,
+      type: 'file',
+      content: fileData.name,
+      fileName: fileData.name,
+      fileSize: fileData.size.toString(),
+      fileType: fileData.type,
+      senderName: userStore.user?.profile?.realName || userStore.user?.nickname || '我',
+      avatar: userStore.user?.avatar || '',
+      time: formatTime(new Date().toISOString()),
+      isOwn: true,
+      isRead: false
+    }
+
+    // 添加到当前聊天
+    if (activeContactId.value) {
+      // 添加到消息列表
+      messages.value.push(fileMessage)
+
+      // 更新联系人最后消息
+      const contact = contacts.value.find((c: Contact) => c.id === activeContactId.value)
+      if (contact) {
+        contact.lastMessage = '[文件]'
+        contact.lastMessageTime = formatTime(new Date().toISOString())
+      }
+    }
+
+    // 模拟发送文件到服务器
+    setTimeout(() => {
+      // 消息已发送
+
+      // 模拟对方回复
+      setTimeout(() => {
+        const replyMessage: Message = {
+          id: (Date.now() + 1).toString(),
+          contactId: activeContactId.value!,
+          type: 'text',
+          content: '收到文件了！',
+          senderName: '对方',
+          avatar: 'https://avatars.githubusercontent.com/u/38358644',
+          time: formatTime(new Date().toISOString()),
+          isOwn: false,
+          isRead: false
+        }
+
+        if (activeContactId.value) {
+          // 添加到消息列表
+          messages.value.push(replyMessage)
+
+          // 更新联系人最后消息
+          const contact = contacts.value.find((c: Contact) => c.id === activeContactId.value)
+          if (contact) {
+            contact.lastMessage = '收到文件了！'
+            contact.lastMessageTime = formatTime(new Date().toISOString())
+          }
+        }
+      }, 1000)
+    }, 500)
+  } catch (error) {
+    console.error('处理文件消息时出错:', error)
+  }
+}
+
 // 生命周期钩子
 onMounted(() => {
   // 默认选择第一个联系人
@@ -480,25 +878,27 @@ onMounted(() => {
 <style scoped>
 .chat-container {
   display: flex;
-  height: 1000px;
+  height: 100vh;
   background: #fff;
-  border-radius: 8px;
+  border-radius: 4px;
   overflow: hidden;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  border: 1.5px solid #E7EAEB;
 }
 
 /* 左侧联系人面板 */
 .contacts-panel {
-  width: 300px;
-  border-right: 1px solid #e8e8e8;
+  margin: 10px 0;
+  width: 330px;
+  border-right: 1.5px solid #E6E6E6;
   display: flex;
   flex-direction: column;
-  background: #fafafa;
+  background: #fff;
 }
 
 .contacts-header {
-  padding: 20px;
-  border-bottom: 1px solid #e8e8e8;
+  padding: 24px 0;
+  margin: 0 35px;
+  border-bottom: 1.5px solid #D8D8D8;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -507,8 +907,8 @@ onMounted(() => {
 
 .contacts-title {
   font-size: 16px;
-  font-weight: 600;
-  color: #333;
+  font-weight: 500;
+  color: #3F3F44;
   margin: 0;
 }
 
@@ -537,6 +937,7 @@ onMounted(() => {
 }
 
 .contacts-list {
+  margin-top: 40px;
   flex: 1;
   overflow-y: auto;
 }
@@ -546,7 +947,6 @@ onMounted(() => {
   padding: 12px 20px;
   cursor: pointer;
   transition: background-color 0.2s;
-  border-bottom: 1px solid #f0f0f0;
   background: #fff;
 }
 
@@ -555,7 +955,7 @@ onMounted(() => {
 }
 
 .contact-item.active {
-  background: #e6f7ff;
+  background: #F5F8FB;
 }
 
 .contact-item.unread {
@@ -569,15 +969,15 @@ onMounted(() => {
 }
 
 .contact-avatar img {
-  width: 40px;
-  height: 40px;
+  width: 70px;
+  height: 70px;
   border-radius: 50%;
   object-fit: cover;
 }
 
 .avatar-placeholder {
-  width: 40px;
-  height: 40px;
+  width: 70px;
+  height: 70px;
   border-radius: 50%;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   display: flex;
@@ -604,6 +1004,7 @@ onMounted(() => {
 }
 
 .contact-info {
+  padding-top: 8px;
   flex: 1;
   min-width: 0;
 }
@@ -612,13 +1013,14 @@ onMounted(() => {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 4px;
+  margin-bottom: 10px;
+  color: #3F3F44;
 }
 
 .contact-name {
-  font-size: 14px;
+  font-size: 12px;
   font-weight: 500;
-  color: #333;
+  color: #3F3F44;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -644,8 +1046,8 @@ onMounted(() => {
 }
 
 .last-message {
-  font-size: 13px;
-  color: #666;
+  font-size: 12px;
+  color: #999999;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -712,7 +1114,7 @@ onMounted(() => {
   flex: 1;
   display: flex;
   flex-direction: column;
-  background: #fff;
+  background: #F5F8FB;
 }
 
 .chat-empty {
@@ -736,15 +1138,20 @@ onMounted(() => {
   flex: 1;
   display: flex;
   flex-direction: column;
+  height: 0;
+  /* 强制flex子元素使用剩余空间 */
+  min-height: 0;
+  /* 允许flex子元素缩小 */
+  position: relative;
 }
 
 .chat-header {
-  padding: 20px;
-  border-bottom: 1px solid #e8e8e8;
+  margin: 0 30px 0;
+  padding: 20px 0 20px 0;
+  border-bottom: 1.5px solid #E6E6E6;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  background: #fafafa;
 }
 
 .chat-user-info {
@@ -762,13 +1169,13 @@ onMounted(() => {
 
 .chat-user-details h4 {
   font-size: 16px;
-  font-weight: 600;
-  color: #333;
+  font-weight: 500;
+  color: #3F3F44;
 }
 
 .chat-user-details .member-count {
-  font-size: 14px;
-  color: #999;
+  font-size: 16px;
+  color: #3F3F44;
   font-weight: 400;
   margin-left: 6px;
 }
@@ -791,7 +1198,11 @@ onMounted(() => {
 .chat-messages {
   flex: 1;
   overflow-y: auto;
-  padding: 16px 0;
+  padding: 24px 0;
+  height: 0;
+  /* 强制flex子元素使用剩余空间 */
+  min-height: 0;
+  /* 允许flex子元素缩小 */
 }
 
 .messages-content {
@@ -830,16 +1241,23 @@ onMounted(() => {
   flex-shrink: 0;
 }
 
+.message-own .message-avatar {
+  margin-right: 0;
+  margin-left: 8px;
+  order: 2;
+  /* 确保头像在右边 */
+}
+
 .message-avatar img {
-  width: 32px;
-  height: 32px;
+  width: 47px;
+  height: 47px;
   border-radius: 50%;
   object-fit: cover;
 }
 
 .message-avatar .avatar-placeholder {
-  width: 32px;
-  height: 32px;
+  width: 47px;
+  height: 47px;
   border-radius: 50%;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   display: flex;
@@ -859,6 +1277,8 @@ onMounted(() => {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
+  order: 1;
+  /* 确保消息内容在头像左边 */
 }
 
 .message-sender {
@@ -868,15 +1288,30 @@ onMounted(() => {
 }
 
 .message-bubble {
-  background: #f0f0f0;
+  background: #FFFFFF;
   padding: 10px 14px;
   border-radius: 12px;
   position: relative;
 }
 
+.message-bubble .message-text {
+  color: #000000;
+}
+
+/* 对方消息：左上角没有圆角 */
+.message-item:not(.message-own) .message-bubble {
+  border-top-left-radius: 2px;
+}
+
 .message-own .message-bubble {
-  background: #1890ff;
-  color: #fff;
+  background: #E2F5FF;
+  color: #0088D1;
+  border-top-right-radius: 2px;
+  /* 右上角没有圆角 */
+}
+
+.message-own .message-bubble .message-text {
+  color: #0088D1;
 }
 
 .message-text {
@@ -889,14 +1324,19 @@ onMounted(() => {
 .image-bubble {
   padding: 4px;
   background: transparent;
+  max-width: 100%;
 }
 
 .message-image {
-  max-width: 200px;
-  max-height: 150px;
+  max-width: 100%;
+  max-height: 300px;
+  width: auto;
+  height: auto;
   border-radius: 8px;
   cursor: pointer;
   transition: transform 0.2s;
+  object-fit: contain;
+  display: block;
 }
 
 .message-image:hover {
@@ -904,21 +1344,372 @@ onMounted(() => {
 }
 
 .file-bubble {
-  background: #f8f9fa;
-  border: 1px solid #e8e8e8;
+  background: transparent;
+  border: none;
+  padding: 0;
+  max-width: 300px;
 }
 
 .file-info {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 12px;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  padding: 12px;
+}
+
+.file-icon {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  flex-shrink: 0;
+}
+
+.file-icon-image {
+  width: 24px;
+  height: 24px;
+  object-fit: contain;
 }
 
 .file-details {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.file-name {
+  font-size: 14px;
+  color: #666666;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1;
+}
+
+.file-download {
+  width: 18px;
+  height: 18px;
+  margin-left: 15px;
+  cursor: pointer;
+  transition: opacity 0.2s ease;
+}
+
+.file-download:hover {
+  opacity: 0.7;
+}
+
+/* 详情面板样式 - 在聊天消息区域内部显示，不覆盖输入区域 */
+.details-panel {
+  padding-bottom: 20px;
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 315px;
+  height: 82%;
+  background: #ffffff;
+  z-index: 10;
+  animation: slideInRight 0.3s ease-out;
+  overflow-y: auto;
+  /* 确保面板不会覆盖输入区域，只覆盖消息区域 */
+  max-height: 100%;
+  border: 1.5px solid #E6E6E6;
+  /* 隐藏滚动条但保持滚动功能 */
+  scrollbar-width: none;
+  /* Firefox */
+  -ms-overflow-style: none;
+  /* IE and Edge */
+}
+
+/* 隐藏Webkit浏览器的滚动条 */
+.details-panel::-webkit-scrollbar {
+  display: none;
+}
+
+.details-content {
+  height: 100%;
   display: flex;
   flex-direction: column;
 }
 
+
+/* 群聊详情样式 */
+.search-section {
+  padding: 29px 20px;
+}
+
+.search-input-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.search-icon {
+  position: absolute;
+  left: 12px;
+  color: #999999;
+  z-index: 1;
+}
+
+.search-input {
+  width: 100%;
+  padding: 10px 12px 10px 40px;
+  border: 1.5px solid #E6E6E6;
+  border-radius: 2px;
+  font-size: 14px;
+  background: #FCFCFC;
+  color: #999999;
+  outline: none;
+  transition: border-color 0.2s ease;
+}
+
+.search-input:focus {
+  border-color: #1890ff;
+}
+
+.members-section {
+  margin: 0 20px;
+  border-bottom: 1.5px solid #E6E6E6;
+  flex: 1;
+  overflow-y: auto;
+}
+
+.members-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 16px;
+  margin-bottom: 16px;
+}
+
+.member-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.member-avatar {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  overflow: hidden;
+  margin-bottom: 6px;
+}
+
+.member-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.member-name {
+  font-size: 10px;
+  color: #000;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 60px;
+}
+
+.view-more {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  color: #666666;
+  font-size: 10px;
+  cursor: pointer;
+  margin-bottom: 15px;
+  transition: color 0.2s ease;
+}
+
+.view-more:hover {
+  color: #1890ff;
+}
+
+.chevron-icon {
+  color: #666666;
+  transition: color 0.2s ease;
+}
+
+.view-more:hover .chevron-icon {
+  color: #1890ff;
+}
+
+/* 私聊详情样式 */
+.user-info-section {
+  padding: 20px 24px;
+  border-bottom: 1px solid #f0f0f0;
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.user-avatar {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  overflow: hidden;
+}
+
+.user-avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.user-details h4 {
+  margin: 0 0 4px 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: #333;
+}
+
+.user-status {
+  margin: 0;
+  font-size: 14px;
+  color: #52c41a;
+}
+
+/* 通用样式 */
+.info-section {
+  padding: 20px 0;
+  margin: 0 20px;
+  border-bottom: 1.5px solid #e6e6e6;
+}
+
+.info-item {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 12px;
+}
+
+.info-item:last-child {
+  margin-bottom: 0;
+}
+
+.info-label {
+  font-size: 12px;
+  color: #333333;
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+
+.info-value {
+  font-size: 12px;
+  color: #666666;
+  font-weight: 400;
+}
+
+.settings-section {
+  padding: 20px 24px;
+}
+
+.setting-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.setting-item:last-child {
+  margin-bottom: 0;
+}
+
+.setting-label {
+  font-size: 12px;
+  color: #333333;
+}
+
+/* 手写开关样式 */
+.switch-wrapper {
+  position: relative;
+  display: inline-block;
+}
+
+.switch-input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.switch-label {
+  position: relative;
+  display: inline-block;
+  width: 44px;
+  height: 24px;
+  background-color: #F0F5F7;
+  border-radius: 24px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.switch-label:before {
+  content: "";
+  position: absolute;
+  height: 20px;
+  width: 20px;
+  left: 2px;
+  bottom: 2px;
+  background-color: white;
+  border-radius: 50%;
+  transition: transform 0.3s;
+}
+
+.switch-input:checked+.switch-label {
+  background-color: #0288D1;
+}
+
+.switch-input:checked+.switch-label:before {
+  transform: translateX(20px);
+}
+
+.actions-section {
+  margin: 0 20px;
+  display: flex;
+  flex-direction: column;
+}
+
+.action-btn {
+  border-top: 1.5px solid #e6e6e6;
+  height: 60px;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  background: #ffffff;
+  color: #FF4816;
+  text-align: center;
+  width: 100%;
+  border-radius: 0;
+}
+
+.action-btn:hover {
+  background: #fff;
+  color: #FF4816;
+}
+
+.danger-btn {
+  background: #ffffff;
+  color: #ff4d4f;
+}
+
+@keyframes slideInRight {
+  from {
+    transform: translateX(100%);
+  }
+
+  to {
+    transform: translateX(0);
+  }
+}
+
+
 .file-name {
   font-size: 13px;
   color: #333;
@@ -930,15 +1721,17 @@ onMounted(() => {
   color: #999;
 }
 
-.message-time {
-  font-size: 11px;
-  color: #999;
-  margin-top: 4px;
-  text-align: right;
+/* 消息时间行 - 独立一行 */
+.message-time-row {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 8px;
 }
 
-.message-own .message-time {
-  color: rgba(255, 255, 255, 0.8);
+.message-time {
+  font-size: 12px;
+  color: #666666;
+  text-align: center;
 }
 
 /* 自定义滚动条 */
diff --git a/src/views/teacher/message/components/SystemMessages.vue b/src/views/teacher/message/components/SystemMessages.vue
index 27d8fc1..797d719 100644
--- a/src/views/teacher/message/components/SystemMessages.vue
+++ b/src/views/teacher/message/components/SystemMessages.vue
@@ -9,9 +9,7 @@
         <!-- 系统图标 -->
         <div class="avatar-container">
           <div class="system-avatar">
-            <n-icon size="24" color="#1890ff">
-              <NotificationsOutline />
-            </n-icon>
+            <img src="/images/teacher/消息.png" alt="系统消息" class="system-icon" />
           </div>
         </div>
 
@@ -28,13 +26,8 @@
           <!-- 消息内容 -->
           <div class="message-text">
             {{ message.content }}
-            <n-button type="info" text icon-placement="right" style="margin-left: 6px;">
-              查看详情
-              <template #icon>
-                <NIcon>
-                  <ChevronForward />
-                </NIcon>
-              </template>
+            <n-button type="info" text class="detail-btn">
+              查看详情>
             </n-button>
           </div>
         </div>
@@ -51,8 +44,8 @@
 
     <!-- 分页 -->
     <div class="pagination" v-if="messages.length > 0">
-      <button class="page-btn" :disabled="currentPage === 1" @click="goToPage(1)">首页</button>
-      <button class="page-btn" :disabled="currentPage === 1" @click="goToPage(currentPage - 1)">上一页</button>
+      <button class="page-btn nav-btn" :disabled="currentPage === 1" @click="goToPage(1)">首页</button>
+      <button class="page-btn nav-btn" :disabled="currentPage === 1" @click="goToPage(currentPage - 1)">上一页</button>
 
       <button v-for="page in visiblePages" :key="page" class="page-btn" :class="{ active: page === currentPage }"
         @click="goToPage(page)">
@@ -62,8 +55,9 @@
       <span v-if="showEllipsis" class="ellipsis">...</span>
       <button class="page-btn" @click="goToPage(totalPages)">{{ totalPages }}</button>
 
-      <button class="page-btn" :disabled="currentPage === totalPages" @click="goToPage(currentPage + 1)">下一页</button>
-      <button class="page-btn" :disabled="currentPage === totalPages" @click="goToPage(totalPages)">尾页</button>
+      <button class="page-btn nav-btn" :disabled="currentPage === totalPages"
+        @click="goToPage(currentPage + 1)">下一页</button>
+      <button class="page-btn nav-btn" :disabled="currentPage === totalPages" @click="goToPage(totalPages)">尾页</button>
     </div>
   </div>
 </template>
@@ -71,7 +65,7 @@
 <script setup lang="ts">
 import { ref, onMounted, computed } from 'vue'
 import { NIcon } from 'naive-ui'
-import { NotificationsOutline, NotificationsOffOutline, ChevronForward } from '@vicons/ionicons5'
+import { NotificationsOffOutline } from '@vicons/ionicons5'
 
 // 系统消息类型定义
 interface SystemMessage {
@@ -181,13 +175,17 @@ const goToPage = (page: number) => {
 
 .message-list {
   padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
 }
 
 .message-item {
   position: relative;
   display: flex;
+  align-items: center;
   padding: 16px 20px;
-  border-bottom: 1px solid #f0f0f0;
+  border: 1.5px solid #D8D8D8;
   transition: background-color 0.2s;
 }
 
@@ -208,14 +206,21 @@ const goToPage = (page: number) => {
 }
 
 .system-avatar {
-  width: 40px;
-  height: 40px;
+  width: 45px;
+  height: 45px;
   border-radius: 50%;
-  background-color: #e6f7ff;
+  background-color: #0288D1;
   display: flex;
   align-items: center;
   justify-content: center;
-  border: 1px solid #91d5ff;
+  border: 1px solid #0288D1;
+}
+
+.system-icon {
+  width: 22px;
+  height: 22px;
+  transform: rotate(180deg);
+  object-fit: contain;
 }
 
 .message-content {
@@ -227,7 +232,7 @@ const goToPage = (page: number) => {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
-  margin-bottom: 8px;
+  margin-bottom: 2px;
   gap: 12px;
 }
 
@@ -266,13 +271,27 @@ const goToPage = (page: number) => {
 }
 
 .message-text {
-  color: #666;
+  color: #999;
   font-size: 14px;
   line-height: 1.5;
-  margin-bottom: 12px;
   word-break: break-word;
 }
 
+.detail-btn {
+  margin-left: 10px;
+  font-size: 14px !important;
+  color: #0288D1 !important;
+}
+
+.detail-btn :deep(.n-button__content) {
+  color: #0288D1 !important;
+  font-size: 14px !important;
+}
+
+.detail-btn:hover :deep(.n-button__content) {
+  color: #0288D1 !important;
+}
+
 .message-actions {
   display: flex;
   gap: 16px;
@@ -347,8 +366,8 @@ const goToPage = (page: number) => {
 }
 
 .page-btn.active {
-  background: #1890ff;
-  border-color: #1890ff;
+  background: #0088D1;
+  border-color: #0088D1;
   color: #fff;
 }
 
@@ -359,6 +378,22 @@ const goToPage = (page: number) => {
   background: #fafafa;
 }
 
+.nav-btn {
+  border: none !important;
+  background: transparent !important;
+}
+
+.nav-btn:hover:not(:disabled) {
+  border: none !important;
+  background: #f5f5f5 !important;
+  color: #0088D1 !important;
+}
+
+.nav-btn:disabled {
+  border: none !important;
+  background: transparent !important;
+  color: #bfbfbf !important;
+}
 .ellipsis {
   color: #bfbfbf;
   font-size: 14px;