update

2026-08-11 12:19:20 +08:00
parent 2b1686b996
commit e2fbaf4a32
7 changed files with 167 additions and 61 deletions
@@ -1,7 +1,7 @@
 {
  "name": "device-management-client",
  "private": true,
-  "version": "2.1.0",
+  "version": "2.2.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
@@ -127,7 +127,7 @@ function App() {
    { key: 'personnel', icon: <TeamOutlined />, label: '人员管理' },
    ...(user?.role === 'admin' ? [{ key: 'accounts', icon: <UserSwitchOutlined />, label: '账户管理' }] : []),
    { key: 'notifications', icon: <BellOutlined />, label: '通知管理' },
-    { key: 'download', icon: <InfoCircleOutlined />, label: '软件下载' },
+    { key: 'download', icon: <InfoCircleOutlined />, label: '软件下载' }
  ]

  // 移动端底部导航（5个核心入口）
@@ -5,7 +5,7 @@ function About() {
  return (
    <div className="about-page">
      <Card>
-        <h1>影视星河 · 设备管理系统 v2.1</h1>
+        <h1>影视星河 · 设备管理系统 v2.2</h1>
        <Divider />

        <h2>软件概述</h2>
@@ -62,12 +62,17 @@ function About() {

        <h2>版本信息</h2>
        <ul>
-          <li>当前版本：v2.1</li>
+          <li>当前版本：v2.2</li>
          <li>发布日期：2026年8月</li>
          <li>许可证：MIT License</li>
        </ul>

        <h2>更新日志</h2>
+        <h3>v2.2（2026年8月）</h3>
+        <ol>
+          <li>添加群聊删除人员的功能</li>
+          <li>修复创建群聊显示框闪退的bug</li>
+        </ol>
        <h3>v2.1（2026年8月）</h3>
        <ol>
          <li>添加用户修改密码功能</li>
@@ -120,7 +120,7 @@ function Dashboard({ onNavigate }) {
        <h3>系统信息</h3>
        <Row gutter={16} style={{ marginTop: 12 }}>
          <Col span={8}>
-            <p><strong>系统版本：</strong>v2.1</p>
+            <p><strong>系统版本：</strong>v2.2</p>
            <p><strong>系统名称：</strong>设备管理系统</p>
          </Col>
          <Col span={8}>
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useRef } from 'react'
 import { Card, Button, Input, List, Badge, Modal, Form, Select, Tabs, Avatar, Empty, message, Popconfirm, Space, Tag, Tooltip } from 'antd'
-import { PlusOutlined, SendOutlined, TeamOutlined, UserOutlined, ArrowLeftOutlined, DeleteOutlined } from '@ant-design/icons'
+import { PlusOutlined, SendOutlined, TeamOutlined, UserOutlined, ArrowLeftOutlined, DeleteOutlined, SettingOutlined, UserDeleteOutlined } from '@ant-design/icons'
 import axios from 'axios'

 const { TextArea } = Input
@@ -25,6 +25,7 @@ function Messages({ user }) {
  const [inputValue, setInputValue] = useState('')
  const [sending, setSending] = useState(false)
  const [createVisible, setCreateVisible] = useState(false)
+  const [membersVisible, setMembersVisible] = useState(false)
  const [createForm] = Form.useForm()
  const [creating, setCreating] = useState(false)
  const bottomRef = useRef(null)
@@ -148,6 +149,31 @@ function Messages({ user }) {

  const canDelete = (conv) => conv.type === 'direct' || conv.creator_id === user?.id

+  // 群主移除群成员
+  const handleRemoveMember = async (memberId) => {
+    try {
+      const res = await axios.delete(`/api/chat/conversations/${activeConv.id}/members/${memberId}`)
+      if (res.data.success) {
+        message.success(res.data.message)
+        setMembersVisible(false)
+        // 刷新会话列表与当前会话
+        const list = await axios.get('/api/chat/conversations')
+        if (list.data.success) {
+          setConversations(list.data.data)
+          const conv = list.data.data.find(c => c.id === activeConv.id)
+          if (conv) {
+            setActiveConv(conv)
+            activeConvRef.current = conv
+          } else {
+            closeConversation()
+          }
+        }
+      }
+    } catch (err) {
+      message.error(err.response?.data?.message || '操作失败')
+    }
+  }
+
  const otherOptions = allUsers.filter(u => u.id !== user?.id).map(u => ({
    value: u.id,
    label: (
@@ -234,6 +260,11 @@ function Messages({ user }) {
            <Tag style={{ marginLeft: 8 }}>{activeConv.member_count}人</Tag>
          </Tooltip>
        )}
+        {activeConv.type === 'group' && activeConv.creator_id === user?.id && (
+          <Button size="small" type="text" icon={<SettingOutlined />} onClick={() => setMembersVisible(true)} style={{ marginLeft: 'auto' }}>
+            成员管理
+          </Button>
+        )}
      </div>
      <div className="chat-messages">
        {messages.length === 0 && <Empty description="还没有消息，发送第一条吧" image={Empty.PRESENTED_IMAGE_SIMPLE} style={{ marginTop: 40 }} />}
@@ -267,35 +298,10 @@ function Messages({ user }) {
    </div>
  )

-  // ============ 布局 ============
-  if (isMobile) {
-    return (
-      <div className="page-content">
-        <Card bodyStyle={{ padding: 12 }}>
-          {activeConv ? chatWindow : conversationList}
-        </Card>
-
-        <CreateConvModal />
-      </div>
-    )
-  }
-
-  return (
-    <div className="page-content">
-      <Card bodyStyle={{ padding: 0 }}>
-        <div className="messages-layout">
-          <div className="messages-list">{conversationList}</div>
-          <div className="messages-chat">{chatWindow}</div>
-        </div>
-      </Card>
-
-      <CreateConvModal />
-    </div>
-  )
-
  // ============ 发起对话 / 建群弹窗 ============
-  function CreateConvModal() {
-    return (
+  // 注意：这里必须用普通 JSX 变量而非内部函数组件，
+  // 否则轮询重新渲染时组件类型变化会导致弹窗被卸载重建（闪退）
+  const createModal = (
    <Modal
      title="发起对话"
      open={createVisible}
@@ -343,7 +349,79 @@ function Messages({ user }) {
      </Form>
    </Modal>
  )
+
+  // ============ 群成员管理弹窗（仅群主可见） ============
+  const membersModal = (
+    <Modal
+      title={`群成员管理（${activeConv?.member_count || 0}人）`}
+      open={membersVisible}
+      onCancel={() => setMembersVisible(false)}
+      footer={null}
+      width={420}
+    >
+      <List
+        dataSource={activeConv?.members || []}
+        renderItem={(m) => (
+          <List.Item
+            actions={
+              m.id !== activeConv?.creator_id
+                ? [
+                    <Popconfirm
+                      key="del"
+                      title={`确定将 ${m.display_name || m.username} 移出群聊吗？`}
+                      onConfirm={() => handleRemoveMember(m.id)}
+                      okText="确定"
+                      cancelText="取消"
+                    >
+                      <Button type="text" size="small" danger icon={<UserDeleteOutlined />} />
+                    </Popconfirm>
+                  ]
+                : []
            }
+          >
+            <List.Item.Meta
+              avatar={<Avatar icon={<UserOutlined />} />}
+              title={
+                <span>
+                  {m.display_name || m.username}
+                  {m.id === activeConv?.creator_id && <Tag color="gold" style={{ marginLeft: 8 }}>群主</Tag>}
+                  {m.id === user?.id && <Tag style={{ marginLeft: 8 }}>我</Tag>}
+                </span>
+              }
+            />
+          </List.Item>
+        )}
+      />
+    </Modal>
+  )
+
+  // ============ 布局 ============
+  if (isMobile) {
+    return (
+      <div className="page-content">
+        <Card bodyStyle={{ padding: 12 }}>
+          {activeConv ? chatWindow : conversationList}
+        </Card>
+
+        {createModal}
+        {membersModal}
+      </div>
+    )
+  }
+
+  return (
+    <div className="page-content">
+      <Card bodyStyle={{ padding: 0 }}>
+        <div className="messages-layout">
+          <div className="messages-list">{conversationList}</div>
+          <div className="messages-chat">{chatWindow}</div>
+        </div>
+      </Card>
+
+      {createModal}
+      {membersModal}
+    </div>
+  )
 }

 export default Messages
@@ -1,6 +1,6 @@
 {
  "name": "device-management-system",
-  "version": "2.1.0",
+  "version": "2.2.0",
  "description": "影视星河设备管理系统 - Device Management System",
  "main": "electron/main.js",
  "scripts": {
@@ -867,6 +867,29 @@ app.delete('/api/chat/conversations/:id', (req, res) => {
  res.json({ success: true, message: conv.type === 'group' ? '群组已解散' : '会话已删除' });
 });

+// 移除群成员（群主可移除任意成员，群主本人不可被移除）
+app.delete('/api/chat/conversations/:id/members/:userId', (req, res) => {
+  const conv = db.prepare('SELECT * FROM conversations WHERE id = ?').get(req.params.id);
+  if (!conv || conv.type !== 'group') {
+    return res.status(404).json({ success: false, message: '群聊不存在' });
+  }
+  if (!isConversationMember(conv.id, req.user.id)) {
+    return res.status(403).json({ success: false, message: '您不是该群聊的成员' });
+  }
+  const targetId = req.params.userId;
+  if (targetId === conv.creator_id) {
+    return res.status(400).json({ success: false, message: '群主不能被移除' });
+  }
+  if (!isConversationMember(conv.id, targetId)) {
+    return res.status(404).json({ success: false, message: '该用户不在群聊中' });
+  }
+  if (req.user.id !== conv.creator_id) {
+    return res.status(403).json({ success: false, message: '只有群主可以移除群成员' });
+  }
+  db.prepare('DELETE FROM conversation_members WHERE conversation_id = ? AND user_id = ?').run(conv.id, targetId);
+  res.json({ success: true, message: '已将该成员移出群聊' });
+});
+
 // ==================== 认证 API ====================

 // 登录