困麻了 😭

✨ 增加群成员设置页面，提供修改群昵称、头衔、禁言成员相关功能 <- #190 #194 💄 优化文件下载过程的提示样式 💄 提供一种新的无法关闭的 popBox 样式用于提示耗时操作，防止用户继续操作 💚 调整构建，提供 pacman 构建，同时为了优化构建时间；从此版本开始将不提供除了 macOS 版以外的所有 arm 构建 <- #197
Stapxs · Feb 19, 2025 · 18945b0 · 18945b0
1 parent 9007354
commit 18945b0
Show file tree

Hide file tree

Showing 11 changed files with 441 additions and 103 deletions.
diff --git a/.github/workflows/build-app.yml b/.github/workflows/build-app.yml
@@ -159,6 +159,12 @@ jobs:
               run: yarn build:win
               env:
                   GH_TOKEN: ${{ secrets.ACCESS_TOKEN }}
+            # 安装打包依赖（Linux）
+            - name: Install Dependencies for Packaging (Linux)
+              if: matrix.os == 'ubuntu-latest'
+              run: |
+                  sudo apt update
+                  sudo apt install -y libarchive-tools
             # 构建 electron 版本（Linux）
             - name: Build Electron (Linux)
               if: matrix.os == 'ubuntu-latest'

diff --git a/electron-builder.yml b/electron-builder.yml
@@ -21,7 +21,6 @@ asarUnpack:
 win:
     target:
         - { target: portable, arch: x64 }
-        # - { target: portable, arch: arm64 }
     executableName: Stapxs QQ Lite
     icon: build/icon-client-others.png
     legalTrademarks: Copyright © 2022-2025 Stapx Steve [林槐]
@@ -47,12 +46,10 @@ dmg:
 # Linux 配置
 linux:
     target:
+        - { target: pacman, arch: x64 }
         - { target: AppImage, arch: x64 }
-        - { target: AppImage, arch: arm64 }
         - { target: deb, arch: x64 }
-        - { target: deb, arch: arm64 }
         - { target: tar.gz, arch: x64 }
-        - { target: tar.gz, arch: arm64 }
     maintainer: Stapx Steve [林槐]
     vendor: Stapxs Steve Team
     synopsis: 一个兼容 OneBot 协议的非官方 QQ 全平台客户端实现。

diff --git a/src/renderer/src/App.vue b/src/renderer/src/App.vue
@@ -176,7 +176,9 @@
                             <font-awesome-icon :icon="['fas', runtimeData.popBoxList[0].svg]" />
                         </div>
                         <a>{{ runtimeData.popBoxList[0].title }}</a>
-                        <font-awesome-icon :icon="['fas', 'xmark']" @click="removePopBox" />
+                        <font-awesome-icon v-show="runtimeData.popBoxList[0].button"
+                            :icon="['fas', 'xmark']"
+                            @click="removePopBox" />
                     </header>
                     <div v-if="runtimeData.popBoxList[0].html" v-html="runtimeData.popBoxList[0].html" />
                     <component :is="runtimeData.popBoxList[0].template" v-else :data="runtimeData.popBoxList[0].data"
@@ -648,7 +650,7 @@ export default defineComponent({
                 // PS：部分功能不返回用户名需要进来查找所以提前获取
                 Connector.send(
                     'get_group_member_list',
-                    { group_id: data.id },
+                    { group_id: data.id, no_cache: true },
                     'getGroupMemberList',
                 )
             }

diff --git a/src/renderer/src/assets/css/chat.css b/src/renderer/src/assets/css/chat.css
@@ -567,13 +567,14 @@ input {
     width: 100%;
 }
 .card-info-pan-bg {
-    background: var(--color-card-2);
     height: 100%;
     opacity: 0.7;
     width: 100%;
 }
 .chat-info {
+    overflow: hidden;
     margin: 50vh 0 0 50%;
+    box-shadow: 0 0 10px var(--color-shader);
     transform: translate(-50%, -50%);
     flex-direction: column;
     position: absolute;
@@ -735,6 +736,28 @@ input {
 }
 .chat-info-tab-member > div > span {
     color: var(--color-font-2);
+    transition: all .2s;
+    opacity: 1;
+}
+.chat-info-tab-member > div.edit:hover > span {
+    transform: translateX(-10px);
+    opacity: 0;
+}
+.chat-info-tab-member > div > svg {
+    color: var(--color-font-2);
+    transition: all .2s;
+    margin-right: -25px;
+    margin-left: 10px;
+    width: 15px;
+    opacity: 0;
+}
+.chat-info-tab-member > div > svg:hover {
+    color: var(--color-main);
+}
+.chat-info-tab-member > div.edit:hover > svg {
+    margin-right: 5px;
+    display: block;
+    opacity: 1;
 }
 
 .chat-info-tab {
@@ -758,6 +781,77 @@ input {
     overflow-y: scroll;
 }
 
+.user-config {
+    display: flex;
+    flex-direction: column;
+    transition: all 0.3s;
+    transform: translateY(calc(100% + 20px));
+    box-shadow: 0 -3px 3px var(--color-shader);
+    background: var(--color-card);
+    height: 70%;
+    position: absolute;
+    width: calc(100% - 30px);
+    margin-left: -15px;
+    height: auto;
+    top: 0;
+    bottom: 0;
+    margin-top: 50px;
+}
+.user-config.show {
+    transform: translateY(0);
+}
+.user-config:hover {
+    box-shadow: 0 -3px 3px var(--color-shader) !important;
+}
+
+.user-config > div:first-child {
+    background: var(--color-card-1);
+    border-radius: 7px 7px 0 0;
+    align-items: center;
+    padding: 15px;
+    margin: -15px;
+    display: flex;
+}
+.user-config > div:first-child > img {
+    border-radius: 7px;
+    width: 40px;
+}
+.user-config > div:first-child > svg {
+    cursor: pointer;
+    width: 17px;
+    height: 17px;
+}
+.user-config > div:first-child > div {
+    flex-direction: column;
+    margin-left: 10px;
+    display: flex;
+    flex: 1;
+}
+.user-config > div:first-child > div > a {
+    font-size: 1rem;
+}
+.user-config > div:first-child > div > span {
+    color: var(--color-font-1);
+}
+.user-config > div:last-child {
+    flex: 1;
+    overflow-y: scroll;
+    padding: 0 15px 0 20px;
+    margin-top: 25px;
+}
+.user-config > div:last-child > div:hover {
+    background: var(--color-card-1);
+}
+.user-config > div:last-child > header {
+    font-weight: normal;
+    font-size: 0.9rem;
+    padding: 10px 0 0 0;
+}
+.user-config > div:last-child > div:hover input {
+    background: var(--color-card-2);
+    transition: all 0.3s;
+}
+
 .bulletins {
     padding: 0 20px;
 }
@@ -917,15 +1011,6 @@ input {
     content: '';
 }
 
-.group-files-loader {
-    justify-content: center;
-    display: flex;
-}
-.group-files-loader > svg {
-    color: var(--color-font-1);
-    width: 1rem;
-}
-
 .info-pan-set {
     padding: 0 20px;
 }

diff --git a/src/renderer/src/assets/css/msg.css b/src/renderer/src/assets/css/msg.css
@@ -344,8 +344,9 @@
     width: 27px;
 }
 .msg-file > div:nth-child(2) svg.download-bar {
-    --main-size: 40px;
+    --main-size: 24px;
     margin: 3px 1px -4px 0 !important;
+    padding: 10px;
 }
 .msg-file.me > div:nth-child(2) svg.download-bar > circle:last-child {
     stroke: var(--color-card-2);

diff --git a/src/renderer/src/assets/pathMap/NapCat.Onebot.yaml b/src/renderer/src/assets/pathMap/NapCat.Onebot.yaml
@@ -149,9 +149,6 @@ group_member_info:
         is_robot: /is_robot
         shut_up_timestamp: /shut_up_timestamp
         role: /role
-# 退出群聊
-leave_group:
-    name: set_group_leave
 # 获取收藏表情
 roaming_stamp:
     name: fetch_custom_face
@@ -200,3 +197,17 @@ file_download:
     source: $.data
     list:
         file_url: /url
+
+## 群操作
+# 退出群聊
+leave_group:
+    name: set_group_leave
+# 设置群昵称（包括成员）
+set_group_nickname:
+    name: set_group_card
+# 设置群头衔（包括成员）
+set_group_title:
+    name: set_group_special_title
+# 禁言成员
+ban_mumber:
+    name: set_group_ban
diff --git a/src/renderer/src/components/FileBody.vue b/src/renderer/src/components/FileBody.vue
@@ -40,41 +40,30 @@
                 <span v-else>{{ getSize(item.size) }}</span>
             </div>
         </div>
-        <div
-            v-if="item.file_id && item.download_percent === undefined"
-            class="download"
-            @click="getFile(item)">
-            <font-awesome-icon :icon="['fas', 'angle-down']" />
-        </div>
-        <svg
-            v-if="item.download_percent !== undefined"
-            class="download-bar"
-            xmlns="http://www.w3.org/2000/svg">
-            <circle
-                cx="50%"
-                cy="50%"
-                r="40%"
-                stroke-width="15%"
-                fill="none"
-                stroke-linecap="round" />
-            <circle
-                cx="50%"
-                cy="50%"
-                r="40%"
-                stroke-width="15%"
-                fill="none"
-                :stroke-dasharray="
-                    item.download_percent === undefined
-                        ? '0,10000'
-                        : `${(Math.floor(2 * Math.PI * 25) *
-                            item.download_percent) / 100},10000`
-                " />
-        </svg>
-        <div
-            v-show="item.show_items !== false && item.items !== undefined"
-            :class="
-                (item.items !== undefined ? 'sub_file ' : '') + 'group-files'
-            ">
+        <template v-if="item.file_id">
+            <div v-if="item.download_percent === undefined"
+                class="download"
+                @click="getFile(item)">
+                <font-awesome-icon :icon="['fas', 'angle-down']" />
+            </div>
+            <svg
+                v-else-if="item.download_percent !== undefined && item.download_percent < 100"
+                class="download-bar"
+                xmlns="http://www.w3.org/2000/svg">
+                <circle cx="50%" cy="50%" r="40%"
+                    stroke-width="15%" fill="none" stroke-linecap="round" />
+                <circle cx="50%" cy="50%" r="40%"
+                    stroke-width="15%" fill="none"
+                    :stroke-dasharray="
+                        item.download_percent === undefined ? '0,10000' :
+                        `${(Math.floor(2 * Math.PI * 25) * item.download_percent) / 100},10000` " />
+            </svg>
+            <div v-else class="download">
+                <font-awesome-icon :icon="['fas', 'check']" />
+            </div>
+        </template>
+        <div v-show="item.show_items !== false && item.items !== undefined"
+            :class="(item.items !== undefined ? 'sub_file ' : '') + 'group-files'">
             <div
                 v-for="sub_item in item.items"
                 :key="'sub_file-' + sub_item.file_id">

diff --git a/src/renderer/src/components/MsgBody.vue b/src/renderer/src/components/MsgBody.vue
@@ -151,38 +151,21 @@
                             </div>
                             <div>
                                 <font-awesome-icon
-                                    v-if="
-                                        item.downloadingPercentage === undefined
-                                    "
+                                    v-if="item.download_percent === undefined"
                                     :icon="['fas', 'angle-down']"
                                     @click="downloadFile(item, data.message_id)" />
                                 <svg
-                                    v-if="
-                                        item.downloadingPercentage !== undefined
-                                    "
+                                    v-else-if="item.download_percent !== undefined && item.download_percent < 100"
                                     class="download-bar"
                                     xmlns="http://www.w3.org/2000/svg">
-                                    <circle
-                                        cx="50%"
-                                        cy="50%"
-                                        r="40%"
-                                        stroke-width="15%"
-                                        fill="none"
-                                        stroke-linecap="round" />
-                                    <circle
-                                        cx="50%"
-                                        cy="50%"
-                                        r="40%"
-                                        stroke-width="15%"
-                                        fill="none"
-                                        :stroke-dasharray="
-                                            item.downloadingPercentage ===
-                                                undefined
-                                                ? '0,10000'
-                                                : `${(Math.floor(2 * Math.PI * 25) *
-                                                    item.downloadingPercentage) / 100},10000`
-                                        " />
+                                    <circle cx="50%" cy="50%" r="40%"
+                                        stroke-width="15%" ill="none" stroke-linecap="round" />
+                                    <circle cx="50%" cy="50%" r="40%"
+                                        stroke-width="15%" fill="none"
+                                        :stroke-dasharray="item.download_percent === undefined ? '0,10000' :
+                                            `${(Math.floor(2 * Math.PI * 25) * item.download_percent) / 100},10000`" />
                                 </svg>
+                                <font-awesome-icon v-else :icon="['fas', 'check']" />
                             </div>
                             <div
                                 v-if="data.fileView && Object.keys(data.fileView).length > 0"

diff --git a/src/renderer/src/function/msg.ts b/src/renderer/src/function/msg.ts
@@ -299,6 +299,34 @@ const noticeFunctions = {
 } as { [key: string]: (name: string, msg: { [key: string]: any }) => void }
 
 const msgFunctons = {
+    /**
+     * 修改群成员信息回调
+     */
+    updateGroupMemberInfo: () => {
+        const $t = app.config.globalProperties.$t
+        const popInfo = {
+            title: $t('操作'),
+            html: `<span>${$t('正在确认操作……')}</span>`
+        }
+        runtimeData.popBoxList.push(popInfo)
+        // 稍微等一下再刷新成员列表
+        setTimeout(() => {
+            Connector.send(
+                'get_group_member_list',
+                { group_id: runtimeData.chatInfo.show.id, no_cache: true },
+                'getGroupMemberList',
+            )
+            setTimeout(() => {
+                Connector.send(
+                    'get_group_member_list',
+                    { group_id: runtimeData.chatInfo.show.id, no_cache: true },
+                    'getGroupMemberList',
+                )
+                runtimeData.popBoxList.shift()
+            }, 1000)
+        }, 1000)
+    },
+
     /**
      * 保存 Bot 信息
      */
@@ -764,9 +792,8 @@ const msgFunctons = {
         if (msgItem && bodyIndex != -1) {
             const onProcess = function (event: ProgressEvent): undefined {
                 if (!event.lengthComputable) return
-                msgItem.message[bodyIndex].downloadingPercentage = Math.floor(
-                    (event.loaded / event.total) * 100,
-                )
+                const percent = Math.floor((event.loaded / event.total) * 100)
+                msgItem.message[bodyIndex].download_percent = percent
             }
             downloadFile(url, fileName, onProcess)
         }