Merge branch 'feature-nxdev' of https://gitea.nxsir.cn/code/IM into feature-nxdev

frontend/web/src/views/contact/ContactList.vue

@@ -23,18 +23,13 @@
             <div class="name">标签</div>
           </div>
         </div>
-
-        <div class="group-title">我的好友</div>
-        <div v-for="c in filteredContacts" 
-             :key="c.id" 
-             class="list-item" 
-             :class="{active: activeContactId === c.id}"
-             @click="routeUserInfo(c.id)">
-          <img :src="c.userInfo.avatar" class="avatar-std" />
-          <div class="info">
-            <div class="name">{{ c.remarkName }}</div>
-          </div>
+        <div class="contactTab">
+          <button class="group-title" :class="{'group-title-active': contactTab === 0}" @click="contactTab = 0">我的好友</button>
+          <button class="group-title" :class="{'group-title-active': contactTab === 1}" @click="contactTab = 1">群聊</button>
         </div>
+        
+        <contactShow v-if="contactTab == 0" :contacts="filteredContacts"></contactShow>
+        <groupsShow v-if="contactTab == 1" :groups="myGroups"></groupsShow>
       </div>
     </aside>
     <RouterView></RouterView>
@@ -54,14 +49,36 @@ import GroupChatModal from '@/components/groups/GroupChatModal.vue'
 import feather from 'feather-icons';
 import { useContactStore } from '@/stores/contact';
 import { useRouter } from 'vue-router';
+import contactShow from '@/components/contacts/contactShow.vue';
+import groupsShow from '@/components/groups/groupsShow.vue';
 
-const router = useRouter();
 
 const searchQuery = ref('')
-const activeContactId = ref(null)
 const contactStore = useContactStore();
 
 const groupModal = ref(false);
+const contactTab = ref(0);
+
+const myGroups = ref([
+  {
+    id: 1,
+    name: "产品设计交流群",
+    avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=1",
+    lastMessage: "那个UI设计的初稿已经发在群文件了，大家记得看下。",
+    lastTime: "14:20",
+    unread: 3,
+    online: true
+  },
+  {
+    id: 2,
+    name: "周五羽毛球小分队",
+    avatar: "https://api.dicebear.com/7.x/avataaars/svg?seed=2",
+    lastMessage: "这周五晚上 8 点，老地方见！",
+    lastTime: "昨天",
+    unread: 0,
+    online: false
+  }
+]);
 
 
 const filteredContacts = computed(() => {
@@ -82,10 +99,7 @@ const filteredContacts = computed(() => {
   })
 })
 
-const routeUserInfo = (id) => {
-  router.push(`/contacts/info/${id}`);
-  activeContactId.value = id;
-}
+
 
 // 发送事件给父组件（用于切换回聊天Tab并打开会话）
 const emit = defineEmits(['start-chat'])
@@ -95,6 +109,7 @@ const showGroupList = () => {
 }
 
 
+
 onMounted(async () => {
   await contactStore.loadContactList();
 })
@@ -145,11 +160,38 @@ onMounted(async () => {
 }
 
 .group-title {
-  padding: 8px 12px;
+  width: 40%;
+  padding: 5px 14px;
   font-size: 12px;
-  color: #999;
+  margin: 5px;
+  border: none;
+  background-color: #e0e0e0;
+  border-radius: 4px;
 }
 
+.group-title:hover {
+  color: #8e8e8e;
+}
+
+.group-title-active {
+  background-color: white;
+  color: rgb(78, 78, 249);
+}
+
+.fixed-entries {
+    margin-bottom: 15px;
+    border-bottom: 1px solid #dcdcdc;
+}
+
+.contactTab {
+  width: 90%;
+  margin: 10px auto;
+  background: #e0e0e0;
+  display: flex;
+  align-content: center;
+  justify-content: center;
+  border-radius: 4px;
+}
 .list-item {
   display: flex;
   padding: 10px 12px;

frontend/web/src/views/contact/FriendRequestList.vue

@@ -17,20 +17,20 @@
           </div>
 
           <div class="actions">
-            <template v-if="item.state === 0 && item.requestUser != authStore.userInfo.id">
-              <button class="btn-text btn-reject" @click="item.status = 2">拒绝</button>
-              <button class="btn-text btn-accept" @click="item.status = 1">接受</button>
+            <template v-if="item.state === FRIEND_REQUEST_STATUS.Pending && item.requestUser != authStore.userInfo.id">
+              <button class="btn-text btn-reject" @click="confirmReject(item)">拒绝</button>
+              <button class="btn-text btn-accept" @click="handleOpenDialog(item)">接受</button>
             </template>
-            <span v-else-if="item.state === 0" class="status-label">
+            <span v-else-if="item.state === FRIEND_REQUEST_STATUS.Pending" class="status-label">
               待对方同意
             </span>
-            <span v-else-if="item.state === 1" class="status-label">
+            <span v-else-if="item.state === FRIEND_REQUEST_STATUS.Declined" class="status-label">
               {{item.requestUser != authStore.userInfo.id ? '已拒绝' : '对方拒绝'}}
             </span>
-            <span v-else-if="item.state === 2" class="status-label">
+            <span v-else-if="item.state === FRIEND_REQUEST_STATUS.Passed" class="status-label">
               已添加
             </span>
-            <span v-else-if="item.state === 3 && item.requestUser != authStore.userInfo.id" class="status-label">
+            <span v-else-if="item.state === FRIEND_REQUEST_STATUS.Blocked && item.requestUser != authStore.userInfo.id" class="status-label">
               已拉黑
             </span>
             <span v-else class="status-label">
@@ -40,6 +40,16 @@
         </div>
       </div>
     </div>
+    <div v-if="showDialog" class="modal-mask">
+  <div class="modal-box">
+    <div class="modal-header">添加备注</div>
+    <input v-model="remarkName" class="modal-input" placeholder="备注姓名" focus />
+    <div class="modal-footer">
+      <button class="modal-btn-cancel" @click="showDialog = false">取消</button>
+      <button class="modal-btn-confirm" @click="confirmAccept">确定</button>
+    </div>
+  </div>
+</div>
   </div>
 </template>
 
@@ -49,6 +59,8 @@ import { friendService } from '@/services/friend';
 import { useMessage } from '@/components/messages/useAlert';
 import { formatDate } from '@/utils/formatDate';
 import { useAuthStore } from '@/stores/auth';
+import { FRIEND_ACTIONS, FRIEND_REQUEST_STATUS } from '@/constants/friendAction';
+import { SYSTEM_BASE_STATUS } from '@/constants/systemBaseStatus';
 
 const message = useMessage();
 const authStore = useAuthStore();
@@ -64,6 +76,50 @@ const loadFriendRequests = async () => {
     requests.value = res.data;
 }
 
+const showDialog = ref(false);
+const remarkName = ref('');
+const activeItem = ref(null);
+
+const handleOpenDialog = (item) => {
+  activeItem.value = item;
+  remarkName.value = item.nickName; // 默认备注为昵称
+  showDialog.value = true;
+};
+
+const confirmAccept = async () => {
+  if (!activeItem.value) return;
+  await handleFriendRequest(FRIEND_ACTIONS.Accept)
+  activeItem.value.state = FRIEND_REQUEST_STATUS.Passed;
+  showDialog.value = false;
+};
+
+const confirmReject = async (item) => {
+  if(!item) return;
+  activeItem.value = item;
+  await handleFriendRequest(FRIEND_ACTIONS.Reject);
+  activeItem.value.state = FRIEND_REQUEST_STATUS.Declined;
+}
+
+const handleFriendRequest = async (action) => {
+  const res = await friendService.handleFriendRequest(activeItem.value.id,action,activeItem.value.remarkName);
+  if(res.code == SYSTEM_BASE_STATUS.SUCCESS){
+    switch(action){
+      case FRIEND_ACTIONS.Accept: 
+        message.show('添加好友成功');
+        break;
+      case FRIEND_ACTIONS.Reject:
+        message.show('已拒绝');
+        break;
+      default:
+        message.error('无效的操作');
+        break;
+    }
+  }else{
+    message.error(res.message);
+    console.log('好友请求处理异常：', res);
+  }
+}
+
 onMounted(async () => {
     await loadFriendRequests();
 })
@@ -79,6 +135,7 @@ onMounted(async () => {
   display: flex;
   justify-content: center;
   overflow-y: auto;
+  position: relative;
 }
 
 .content-limit {
@@ -197,4 +254,70 @@ onMounted(async () => {
   color: #d2d2d7;
   padding: 0 12px;
 }
+
+/* 弹窗遮罩：毛玻璃效果 */
+.modal-mask {
+  position: absolute;
+  inset: 0;
+  background: rgba(255, 255, 255, 0.4);
+  backdrop-filter: blur(10px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 999;
+}
+
+/* 弹窗主体：延续你的极简白 */
+.modal-box {
+  background: #fff;
+  width: 280px;
+  padding: 24px;
+  border-radius: 20px;
+  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
+  text-align: center;
+}
+
+.modal-header {
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 16px;
+}
+
+/* 输入框：延续你的微灰色调 */
+.modal-input {
+  width: 100%;
+  padding: 10px;
+  border: none;
+  background: #f5f5f7;
+  border-radius: 8px;
+  margin-bottom: 20px;
+  outline: none;
+  box-sizing: border-box;
+}
+
+.modal-footer {
+  display: flex;
+  gap: 12px;
+}
+
+/* 按钮：完全复用你原本的 btn-text 逻辑 */
+.modal-btn-cancel {
+  flex: 1;
+  padding: 10px;
+  border: none;
+  background: #f5f5f7;
+  border-radius: 10px;
+  color: #86868b;
+  cursor: pointer;
+}
+
+.modal-btn-confirm {
+  flex: 1;
+  padding: 10px;
+  border: none;
+  background: #007aff;
+  color: white;
+  border-radius: 10px;
+  cursor: pointer;
+}
 </style>

frontend/web/src/views/messages/MessageContent.vue

@@ -59,6 +59,7 @@ import { generateSessionId } from '@/utils/sessionIdTools';
 import { useSignalRStore } from '@/stores/signalr';
 import { useConversationStore } from '@/stores/conversation';
 import feather from 'feather-icons';
+import { onBeforeRouteUpdate } from 'vue-router';
 
 const props = defineProps({
     id:{
@@ -142,13 +143,22 @@ async function loadConversation(conversationId) {
  conversationInfo.value = conversationStore.conversations.find(x => x.id == Number(conversationId));
 }
 
-// 初始化时滚动到底部
-onMounted(async () => {
-  await loadConversation(props.id);
+const initChat = async (newId) => {
+  await loadConversation(newId);
   const sessionid = generateSessionId(conversationInfo.value.userId, conversationInfo.value.targetId)
-  await chatStore.swtichSession(sessionid,props.id);
+  await chatStore.swtichSession(sessionid,newId);
   scrollToBottom();
-});
+}
+
+// 监听路由参数
+watch(
+  () => props.id, 
+  async (newId) => {
+    await initChat(newId)
+  },
+  { immediate: true } // 组件第一次挂载（刷新页面进入）时会立即执行一次
+)
+
 </script>
 
 <style scoped>

frontend/web/src/views/messages/MessageList.vue

@@ -35,6 +35,7 @@
 
     <RouterView></RouterView>
     <SearchUser v-model="searchUserModal"/>
+    <CreateGroup v-model="createGroupModal"></CreateGroup>
     </div>
 </template>
 
@@ -47,6 +48,7 @@ import { useConversationStore } from '@/stores/conversation'
 import AddMenu from '@/components/addMenu.vue'
 import feather from 'feather-icons'
 import SearchUser from '@/components/user/SearchUser.vue'
+import CreateGroup from '@/components/groups/CreateGroup.vue'
 import { useBrowserNotification } from '@/services/useBrowserNotification'
 
 const conversationStore = useConversationStore();
@@ -56,25 +58,26 @@ const browserNotification = useBrowserNotification();
 const searchQuery = ref('')
 const activeId = ref(1)
 const searchUserModal = ref(false);
+const createGroupModal = ref(false);
 const msgTitleShow = ref(false);
 const addMenuList = [
   {
     text: '发起群聊',
     action: 'createGroup',
     // 气泡/对话图标
-    icon: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path></svg>`
+    icon: feather.icons['message-square'].toSvg()
   },
   {
     text: '添加朋友',
     action: 'addFriend',
     // 人像+号图标
-    icon: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path><circle cx="8.5" cy="7" r="4"></circle><line x1="20" y1="8" x2="20" y2="14"></line><line x1="17" y1="11" x2="23" y2="11"></line></svg>`
+    icon: feather.icons['user-plus'].toSvg()
   },
   {
     text: '新建笔记',
     action: 'newNote',
     // 书本/笔记本图标
-    icon: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path></svg>`
+    icon: feather.icons['book-open'].toSvg()
   }
 ];
 
@@ -90,6 +93,8 @@ function actionHandler(type){
     case 'addFriend':
       searchUserModal.value = true;
       break;
+    case 'createGroup': 
+      createGroupModal.value = true;
     default:
       break;
   }

frontend/web/src/views/settings/SettingMenu.vue

@@ -1 +1,261 @@
-<template></template>
+<template>
+  <div class="im-settings-container">
+    <section class="menu-sidebar">
+      <h2 class="sidebar-title">系统设置</h2>
+      <div class="menu-list">
+        <button 
+          v-for="item in menuItems" 
+          :key="item.id"
+          :class="['menu-item', { active: activeTab === item.id }]"
+          @click="activeTab = item.id"
+        >
+          <span class="item-icon" v-html="item.icon"></span>
+          <span class="item-text">{{ item.name }}</span>
+        </button>
+      </div>
+      <div class="sidebar-footer">版本 v2.4.0</div>
+    </section>
+
+    <main class="main-panel">
+      <header class="panel-header">
+        <h1>{{ currentMenuName }}</h1>
+        <p>配置您的个性化通讯偏好</p>
+      </header>
+
+      <div class="panel-body">
+        <div v-if="activeTab === 'notifications'" class="setting-group">
+          <div v-for="(val, key) in notificationSettings" :key="key" class="setting-row">
+            <div class="row-info">
+              <div class="row-label">{{ key }}</div>
+              <div class="row-desc">开启后系统将实时同步您的通知偏好</div>
+            </div>
+            <label class="toggle-switch">
+              <input type="checkbox" v-model="notificationSettings[key]">
+              <span class="slider"></span>
+            </label>
+          </div>
+        </div>
+
+        <div v-else class="empty-placeholder">
+          <span class="icon">⚙️</span>
+          <p>{{ currentMenuName }} 功能开发中...</p>
+        </div>
+      </div>
+
+      <footer class="panel-footer">
+        <button class="btn-cancel" @click="reset">重置</button>
+        <button class="btn-save" @click="save">保存更改</button>
+      </footer>
+    </main>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, computed } from 'vue'
+import feather from 'feather-icons'
+
+const activeTab = ref('notifications')
+
+const menuItems = [
+  { id: 'profile', name: '个人资料', icon: feather.icons['user-check'].toSvg() },
+  { id: 'notifications', name: '通知设置', icon: feather.icons['bell'].toSvg() },
+  { id: 'security', name: '账号安全', icon: feather.icons['shield'].toSvg() },
+  { id: 'general', name: '通用设置', icon: feather.icons['settings'].toSvg() }
+]
+
+const currentMenuName = computed(() => menuItems.find(i => i.id === activeTab.value)?.name)
+
+const notificationSettings = reactive({
+  '声音提醒': true,
+  '桌面弹窗': true,
+  '仅在免打扰外提醒': false
+})
+
+const save = () => alert('设置已生效')
+const reset = () => location.reload()
+</script>
+
+<style scoped>
+/* 变量定义 */
+:component {
+  --active-color: #00a884;
+  --bg-sidebar: #f7f9fa;
+  --bg-hover: #f0f2f5;
+  --text-main: #111b21;
+  --text-dim: #667781;
+  --border: #e9edef;
+}
+
+/* 核心容器：填满外部 */
+.im-settings-container {
+  display: flex;
+  width: 100%;
+  height: 100%; /* 绝对铺满 */
+  background: #ffffff;
+  font-family: sans-serif;
+  overflow: hidden;
+}
+
+/* 左侧样式 */
+.menu-sidebar {
+  width: 260px;
+  background: #eee;
+  border-right: 1px solid #d6d6d6;
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+}
+
+.sidebar-title {
+  padding: 30px 24px;
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--text-main);
+  margin: 0;
+}
+
+.menu-list {
+  flex: 1;
+  padding: 0 12px;
+  overflow-y: auto;
+}
+
+.menu-item {
+  width: 100%;
+  padding: 14px 16px;
+  display: flex;
+  align-items: center;
+  border: none;
+  background: transparent;
+  border-radius: 10px;
+  cursor: pointer;
+  margin-bottom: 4px;
+  transition: 0.2s;
+  color: var(--text-dim);
+}
+
+.menu-item:hover { background: #c6c6c6; }
+
+.menu-item.active {
+  background: #c6c6c6;
+  color: var(--text-main);
+  font-weight: 600;
+}
+
+.item-icon { margin-right: 12px; font-size: 18px; }
+
+.sidebar-footer {
+  padding: 20px;
+  text-align: center;
+  font-size: 12px;
+  color: #cbd5e1;
+}
+
+/* 右侧内容样式 */
+.main-panel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  background-color: #f5f5f5;
+}
+
+.panel-header {
+  padding: 40px 50px 20px;
+}
+
+.panel-header h1 { font-size: 26px; color: var(--text-main); margin: 0 0 8px 0; }
+.panel-header p { font-size: 14px; color: var(--text-dim); margin: 0; }
+
+.panel-body {
+  flex: 1;
+  padding: 0 50px;
+  overflow-y: auto;
+}
+
+.setting-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 24px 0;
+  border-bottom: 1px solid var(--border);
+}
+
+.row-label { font-weight: 500; color: var(--text-main); margin-bottom: 4px; }
+.row-desc { font-size: 13px; color: var(--text-dim); }
+
+/* 开关组件 */
+.toggle-switch {
+  position: relative;
+  width: 46px;
+  height: 24px;
+  flex-shrink: 0;
+}
+.toggle-switch input { opacity: 0; width: 0; height: 0; }
+.slider {
+  position: absolute;
+  cursor: pointer;
+  inset: 0;
+  background-color: #d1d5db;
+  transition: .3s;
+  border-radius: 24px;
+}
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 18px;
+  width: 18px;
+  left: 3px;
+  bottom: 3px;
+  background-color: white;
+  transition: .3s;
+  border-radius: 50%;
+}
+input:checked + .slider { background-color: #0075ae; }
+input:checked + .slider:before { transform: translateX(22px); }
+
+/* 底部操作 */
+.panel-footer {
+  padding: 30px 50px;
+  display: flex;
+  justify-content: flex-end;
+  gap: 16px;
+}
+
+.btn-cancel {
+  background: none;
+  border: none;
+  color: var(--text-dim);
+  cursor: pointer;
+  font-weight: 500;
+}
+
+.btn-save {
+  background: #000000;
+  color: white;
+  border: none;
+  padding: 12px 32px;
+  border-radius: 25px;
+  font-weight: 600;
+  cursor: pointer;
+  box-shadow: 0 4px 10px rgba(0, 168, 132, 0.2);
+}
+
+.empty-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 200px;
+  color: #cbd5e1;
+}
+
+/* 响应式：窄容器自动堆叠 */
+@media (max-width: 650px) {
+  .im-settings-container { flex-direction: column; }
+  .menu-sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--border); }
+  .menu-list { display: flex; overflow-x: auto; padding: 10px; }
+  .menu-item { white-space: nowrap; width: auto; margin-right: 8px; margin-bottom: 0; }
+  .sidebar-title, .sidebar-footer { display: none; }
+}
+</style>