From f8cc9d14d9afbf22ee11762de47c4cad60956696 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Tue, 5 May 2026 22:51:26 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(im):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E4=B8=8B=E7=A6=81=E8=A8=80=E5=BC=B9=E7=AA=97=E7=9A=84=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../group/GroupMuteMemberDialog.vue           | 69 ++++++++++---------
 1 file changed, 35 insertions(+), 34 deletions(-)

diff --git a/src/views/im/home/components/group/GroupMuteMemberDialog.vue b/src/views/im/home/components/group/GroupMuteMemberDialog.vue
index df04b095a..0b50570dc 100644
--- a/src/views/im/home/components/group/GroupMuteMemberDialog.vue
+++ b/src/views/im/home/components/group/GroupMuteMemberDialog.vue
@@ -1,32 +1,34 @@
 <template>
   <!-- 禁言时长选择弹窗 -->
-  <!-- TODO @AI：样式有点丑？你看看怎么优化下？例如说，横着 radio？/Users/yunai/Downloads/iShot_2026-05-05_17.51.35.png -->
-  <el-dialog v-model="visible" title="设置禁言" width="360px" :close-on-click-modal="false">
-    <div class="flex flex-col gap-3">
-      <div class="text-sm text-[var(--el-text-color-regular)]">
-        禁言成员：<span class="font-medium text-[var(--el-text-color-primary)]">{{
-          memberName
-        }}</span>
+  <el-dialog v-model="visible" title="设置禁言" width="560px" :close-on-click-modal="false">
+    <div class="flex flex-col gap-4">
+      <!-- 成员信息卡：和 FriendAddDialog 的 user 卡保持一致的浅色背景 -->
+      <div
+        class="flex items-center gap-2 px-3 py-2.5 rounded-md bg-[var(--el-fill-color-light)]"
+      >
+        <span class="text-13px text-[var(--el-text-color-secondary)]">禁言成员</span>
+        <span
+          class="text-sm font-medium text-[var(--el-text-color-primary)] truncate"
+        >
+          {{ memberName }}
+        </span>
+      </div>
+
+      <!-- 禁言时长选项：用 el-button 平铺，选中走 primary，靠 gap-2 留间距 -->
+      <div>
+        <div class="mb-2 text-13px text-[var(--el-text-color-secondary)]">禁言时长</div>
+        <div class="grid grid-cols-3 gap-2">
+          <el-button
+            v-for="opt in presets"
+            :key="opt.value"
+            :type="selected === opt.value ? 'primary' : ''"
+            class="!ml-0 w-full"
+            @click="selected = opt.value"
+          >
+            {{ opt.label }}
+          </el-button>
+        </div>
       </div>
-      <el-radio-group v-model="selected" class="flex flex-col gap-2">
-        <el-radio v-for="opt in presets" :key="opt.value" :value="opt.value">
-          {{ opt.label }}
-        </el-radio>
-        <el-radio :value="0">
-          <div class="flex items-center gap-2">
-            <span>自定义</span>
-            <el-input-number
-              v-model="customMinutes"
-              :min="1"
-              :max="43200"
-              :disabled="selected !== 0"
-              size="small"
-              class="!w-100px"
-            />
-            <span class="text-sm">分钟</span>
-          </div>
-        </el-radio>
-      </el-radio-group>
     </div>
     <template #footer>
       <el-button @click="visible = false">取消</el-button>
@@ -54,14 +56,14 @@ const groupId = ref(0)
 const userId = ref(0)
 const memberName = ref('')
 const selected = ref(600) // 默认 10 分钟
-const customMinutes = ref(30)
 
 const presets = [
   { label: '10 分钟', value: 600 },
   { label: '1 小时', value: 3600 },
   { label: '12 小时', value: 43200 },
   { label: '1 天', value: 86400 },
-  { label: '7 天', value: 604800 }
+  { label: '7 天', value: 604800 },
+  { label: '30 天', value: 2592000 }
 ]
 
 /** 打开弹窗 */
@@ -70,19 +72,18 @@ function open(gid: number, uid: number, name: string) {
   userId.value = uid
   memberName.value = name
   selected.value = 600
-  customMinutes.value = 30
   visible.value = true
 }
 
 /** 确认禁言 */
 async function handleConfirm() {
-  const seconds = selected.value === 0 ? customMinutes.value * 60 : selected.value
-  if (seconds <= 0) {
-    return
-  }
   loading.value = true
   try {
-    await muteMember({ groupId: groupId.value, userId: userId.value, mutedSeconds: seconds })
+    await muteMember({
+      groupId: groupId.value,
+      userId: userId.value,
+      mutedSeconds: selected.value
+    })
     successMessage('禁言成功')
     visible.value = false
     emit('success')