feat: improve group owner and status display

web/src/views/imGroup/model.ts

@@ -1,4 +1,5 @@
-import { computed, ref } from 'vue';
+import { computed, h, ref } from 'vue';
+import { NTag } from 'naive-ui';
 import { cloneDeep } from 'lodash-es';
 import { FormSchema } from '@/components/Form';
 import { defRangeShortcuts } from '@/utils/dateUtil';
@@ -15,6 +16,8 @@ export class State {
   public topic = ''; // Topic
   public state = 0; // 状态
   public ownerId = 0; // 群主ID
+  public ownerNickname = ''; // 群主昵称
+  public ownerUsername = ''; // 群主用户名
   public seqId = 0; // 最新消息序号
   public delId = 0; // 删除序号
   public subCnt = 0; // 成员数
@@ -183,10 +186,10 @@ export const schemas = ref<FormSchema[]>([
 // 表格列
 export const columns = [
   {
-    title: 'Topic',
-    key: 'topic',
+    title: '群名称',
+    key: 'groupName',
     align: 'left',
-    width: 220,
+    width: 180,
   },
   {
     title: '状态',
@@ -194,7 +197,12 @@ export const columns = [
     align: 'left',
     width: 110,
     render(row: State) {
-      return dict.getLabel('ImGroupStateOptions', row.state);
+      const label = dict.getLabel('ImGroupStateOptions', row.state) || '-';
+      return h(
+        NTag,
+        { type: dict.getType('ImGroupStateOptions', row.state), bordered: true },
+        () => label
+      );
     },
   },
   {
@@ -203,20 +211,29 @@ export const columns = [
     align: 'left',
     width: 110,
     render(row: State) {
-      return dict.getLabel('ImGroupStatusOptions', row.groupStatus) || '-';
+      const dictName = row.groupStatus ? 'ImGroupStatusOptions' : 'ImGroupStateOptions';
+      const value = row.groupStatus || row.state;
+      const label = dict.getLabel(dictName, value) || '-';
+      return h(NTag, { type: dict.getType(dictName, value), bordered: true }, () => label);
     },
   },
   {
-    title: '群名称',
-    key: 'groupName',
+    title: 'Topic',
+    key: 'topic',
     align: 'left',
-    width: 160,
+    width: 220,
   },
   {
-    title: '群主ID',
-    key: 'ownerId',
+    title: '群主昵称',
+    key: 'ownerNickname',
     align: 'left',
-    width: 120,
+    width: 150,
+  },
+  {
+    title: '群主用户名',
+    key: 'ownerUsername',
+    align: 'left',
+    width: 160,
   },
   {
     title: '成员数',

web/src/views/imGroup/view.vue

@@ -15,7 +15,12 @@
             <n-descriptions-item label="租户">{{ formValue.tenantName }}</n-descriptions-item>
             <n-descriptions-item label="Topic">{{ formValue.topic }}</n-descriptions-item>
             <n-descriptions-item label="状态">{{ stateLabel }}</n-descriptions-item>
-            <n-descriptions-item label="群主ID">{{ formValue.ownerId }}</n-descriptions-item>
+            <n-descriptions-item label="群主昵称">{{
+              formValue.ownerNickname || '-'
+            }}</n-descriptions-item>
+            <n-descriptions-item label="群主用户名">{{
+              formValue.ownerUsername || '-'
+            }}</n-descriptions-item>
             <n-descriptions-item label="业务状态">{{ groupStatusLabel }}</n-descriptions-item>
             <n-descriptions-item label="群名称">{{
               formValue.groupName || '-'