feat: 优化网关页面展示

- 新增接入方式列
- 修改网络组件和消息协议列的字段
- 优化接入方式下拉框样式，增加描述信息
- 添加接入方式列的自定义渲染

apps/web-antd/src/views/operations/gateway/data.ts

@@ -1,6 +1,8 @@
 import type { FormSchemaGetter } from '#/adapter/form';
 import type { VxeGridProps } from '#/adapter/vxe-table';
 
+import { h } from 'vue';
+
 import { networkList } from '#/api/operations/network';
 import { protocolList } from '#/api/operations/protocol';
 
@@ -132,13 +134,18 @@ export const columns: VxeGridProps['columns'] = [
     title: '网关名称',
     field: 'name',
   },
+  {
+    title: '接入方式',
+    field: 'provider',
+    slots: { default: 'provider' },
+  },
   {
     title: '网络组件',
-    field: 'channelId',
+    field: 'channelName',
   },
   {
     title: '消息协议',
-    field: 'protocol',
+    field: 'protocolName',
   },
   {
     title: '启用状态',
@@ -180,6 +187,7 @@ export const drawerSchema: FormSchemaGetter = () => [
       options: providerOptions,
       placeholder: '请选择',
       showSearch: true,
+      class: 'w-full',
       onChange: async (value: string) => {
         console.log('抽屉表单接入方式变化:', value);
         if (networkOptionsUpdateCallback) {
@@ -187,7 +195,28 @@ export const drawerSchema: FormSchemaGetter = () => [
         }
       },
     },
-    rules: 'required',
+    renderComponentContent: () => {
+      return {
+        option: (option: any) => {
+          return h(
+            'div',
+            { class: 'flex flex-col', title: option.description },
+            [
+              h('span', { class: 'font-medium text-blue-500' }, option.label),
+              h(
+                'span',
+                {
+                  class: 'text-[14px] text-black/25 truncate',
+                  style:
+                    'max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;',
+                },
+                option.description,
+              ),
+            ],
+          );
+        },
+      };
+    },
   },
   {
     label: '网络组件',

apps/web-antd/src/views/operations/gateway/index.vue

@@ -21,6 +21,7 @@ import {
   columns,
   getNetworkOptions,
   getProtocolOptions,
+  providerOptions,
   querySchema,
   registerNetworkOptionsUpdate,
 } from './data';
@@ -222,6 +223,14 @@ function handleDownloadExcel() {
           </a-button>
         </Space>
       </template>
+      <template #provider="{ row }">
+        <div class="flex flex-col">
+          <span class="font-medium">{{
+            providerOptions.find((option) => option.value === row.provider)
+              ?.label
+          }}</span>
+        </div>
+      </template>
       <template #enabled="{ row }">
         <Tag :color="row.enabled === '1' ? 'success' : 'error'">
           {{ row.enabled === '1' ? '启用' : '禁用' }}