fix 逐步引入新版表格

2024-11-29 18:38:32 +08:00 · 2024-03-18 15:36:53 +08:00 · 2024-03-18 15:36:53 +08:00 · a72211cde2
commit a72211cde2
parent 2578d5deb7
8 changed files with 307 additions and 268 deletions
--- a/CHANGELOG-BETA.md
+++ b/CHANGELOG-BETA.md
@ -11,6 +11,8 @@
 5. 【server】修复 docker 控制台网络选项卡页面空白（感谢@破冰）
 6. 【server】修复 节点历史监控统计图表时间查询不生效（感谢@九問）
 7. 【server】优化 SSH 脚本触发器支持传入参数当环境变量（感谢@小朱）
+8. 【server】修复 h2迁移其它数据库时部分数据丢失（感谢[@王先生](https://gitee.com/whz_gmg1)）[Gitee issues I9977K](https://gitee.com/dromara/Jpom/issues/I9977K)
+9. 【server】优化 逐步引入新版表格（构建、项目、节点、资产机器）（感谢[@a20070322](https://gitee.com/a20070322) [Gitee Pr 218](https://gitee.com/dromara/Jpom/pulls/218) / [Gitee Pr 220](https://gitee.com/dromara/Jpom/pulls/220) / [Gitee Pr 222](https://gitee.com/dromara/Jpom/pulls/222) ）

 ------

--- a/web-vue/src/components/customTable/index.vue
+++ b/web-vue/src/components/customTable/index.vue
@ -124,7 +124,7 @@
            </template>
          </template>
          <template v-if="tableLayout === 'table'">
-            <a-table v-bind="props" :columns="customColumn" :size="tableSize">
+            <a-table v-bind="props" :pagination="paginationByLayout" :columns="customColumn" :size="tableSize">
              <template v-if="slots.tableBodyCell" #bodyCell="slotProps">
                <slot name="tableBodyCell" v-bind="slotProps"></slot>
              </template>
@ -138,14 +138,14 @@
                </a-col>
              </template>
              <a-col v-else :span="24">
-                <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" description="没有任何节点" />
+                <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="props.emptyDescription" />
              </a-col>
            </a-row>
            <div class="card-pagination">
-              <a-pagination v-bind="props.pagination" size="small" @change="paginationChange" />
+              <a-pagination v-bind="paginationByLayout" size="small" @change="paginationChange" />
            </div>

-            <slot name="cardPageTool"></slot>
+            <!-- <slot name="cardPageTool"></slot> -->
          </template>
          <template v-else>未知的表格类型</template>
        </a-card>
@ -174,7 +174,7 @@ export default defineComponent({
  inheritAttrs: false,
  props: customTableProps,
  slots: Object as CustomTableSlotsType,
-  emits: ['refresh', 'change'],
+  emits: ['refresh', 'change', 'changeTableLayout'],
  setup(props, { attrs, slots, emit }) {
    const userStore = useUserStore()
    const storageService: StorageService = new StorageService(props.tableName, {
@ -266,6 +266,15 @@ export default defineComponent({
      }
      return Object.keys(slots).filter((key) => key === 'cardBodyCell').length > 0
    })
+    const sizeOptions = computed(() => {
+      if (tableLayout.value === 'card') {
+        return ['8', '12', '16', '20', '24']
+      }
+      return ['5', '10', '15', '20', '25', '30', '35', '40', '50']
+    })
+    const paginationByLayout = computed(() => {
+      return { ...props.pagination, pageSizeOptions: sizeOptions.value }
+    })

    onMounted(() => {
      // 判断是否需要存储
@ -278,6 +287,7 @@ export default defineComponent({
    })
    const tableLayoutClick = () => {
      tableLayout.value = tableLayout.value === 'card' ? 'table' : 'card'
+      emit('changeTableLayout', tableLayout.value)
    }
    watch(
      () => tableLayout.value,
@ -423,7 +433,8 @@ export default defineComponent({
      customCheckColumnList,
      resetCustomColumn,
      onCheckChange,
-      paginationChange
+      paginationChange,
+      paginationByLayout
    }
  }
 })
--- a/web-vue/src/components/customTable/props.ts
+++ b/web-vue/src/components/customTable/props.ts
@ -48,6 +48,11 @@ export const customTableProps = initDefaultProps(
    activePage: {
      type: Boolean,
      default: false
+    },
+    // 空数据时现在内容
+    emptyDescription: {
+      type: String,
+      deafult: '暂无任何数据'
    }
  },
  {
@ -56,6 +61,7 @@ export const customTableProps = initDefaultProps(
    isShowTools: false,
    isHideRefresh: false,
    autoRefreshTime: 10,
-    activePage: false
+    activePage: false,
+    emptyDescription: '暂无任何数据'
  }
 )
--- a/web-vue/src/components/customTable/types/index.ts
+++ b/web-vue/src/components/customTable/types/index.ts
@ -27,6 +27,7 @@ export type CustomTableSlotsType = CustomSlotsType<{
  tableBodyCell?: any
  expandedRowRender?: any
  expandColumnTitle?: any
+  emptyDescription: string
  bodyCell?: (props: { text: any; value: any; record: Record<string, any>; index: number; column: ColumnType }) => void
  headerCell?: (props: { title: any; column: ColumnType }) => void
  customFilterIcon?: any
--- a/web-vue/src/pages/build/list-info.vue
+++ b/web-vue/src/pages/build/list-info.vue
@ -19,6 +19,7 @@
      default-auto-refresh
      :auto-refresh-time="5"
      table-name="buildList"
+      empty-description="没有任何构建"
      :active-page="activePage"
      :layout="layout"
      size="middle"
@ -41,6 +42,15 @@
        }
      "
      @refresh="loadData"
+      @change-table-layout="
+        (layoutType) => {
+          tableSelections = []
+          listQuery = CHANGE_PAGE(listQuery, {
+            pagination: { limit: layoutType === 'card' ? 8 : 10 }
+          })
+          loadData()
+        }
+      "
    >
      <template #title>
        <a-space wrap class="search-box">
@ -119,24 +129,21 @@
            <a-button type="primary" :loading="loading" @click="loadData">搜索</a-button>
          </a-tooltip>
          <a-button type="primary" @click="handleAdd">新增</a-button>
-          <!-- <template v-if="layoutType === 'table'"> -->
-          <template v-if="!tableSelections || tableSelections.length <= 0">
-            <a-button type="primary" :disabled="true"> 操作 <DownOutlined /> </a-button>
+          <template v-if="tableSelections && tableSelections.length">
+            <a-dropdown>
+              <template #overlay>
+                <a-menu>
+                  <a-menu-item key="1" @click="batchBuild"> 批量构建 </a-menu-item>
+                  <a-menu-item key="2" @click="batchCancel"> 批量取消 </a-menu-item>
+                  <a-menu-item key="3" @click="handleBatchDelete"> 批量删除 </a-menu-item>
+                </a-menu>
+              </template>
+              <a-button type="primary"> 批量操作<DownOutlined /> </a-button>
+            </a-dropdown>
          </template>
-          <a-dropdown v-else>
-            <template #overlay>
-              <a-menu>
-                <a-menu-item key="1" @click="batchBuild"> 批量构建 </a-menu-item>
-                <a-menu-item key="2" @click="batchCancel"> 批量取消 </a-menu-item>
-                <a-menu-item key="3" @click="handleBatchDelete"> 批量删除 </a-menu-item>
-              </a-menu>
-            </template>
-            <a-button type="primary"> 批量操作<DownOutlined /> </a-button>
-          </a-dropdown>
-          <!-- </template> -->
-          <!-- <a-tooltip v-else title="表格视图才能使用批量操作功能">
-            <a-button :disabled="true" type="primary"> 操作 <DownOutlined /> </a-button>
-          </a-tooltip> -->
+          <a-tooltip v-else title="表格视图才能使用批量操作功能">
+            <a-button :disabled="true" type="primary"> 批量操作 <DownOutlined /> </a-button>
+          </a-tooltip>

          <!-- <a-button v-if="!layout" type="primary" @click="changeLayout">
            <template #icon>
@ -492,7 +499,7 @@
          </a-space>
        </template>
      </template>
-      <template #cardPageTool>
+      <!-- <template #cardPageTool>
        <a-row type="flex" justify="center">
          <a-divider v-if="listQuery.total / listQuery.limit > 1" dashed />
          <a-col>
@ -519,7 +526,7 @@
            />
          </a-col>
        </a-row>
-      </template>
+      </template> -->
    </CustomTable>
    <!-- </template> -->
    <!-- </a-card> -->
@ -704,8 +711,9 @@ import {
  CHANGE_PAGE,
  COMPUTED_PAGINATION,
  PAGE_DEFAULT_LIST_QUERY,
-  parseTime,
-  PAGE_DEFAULT_SHOW_TOTAL
+  parseTime
+  // PAGE_DEFAULT_SHOW_TOTAL,
+  // getCachePageLimit
 } from '@/utils/const'

 export default {
@ -897,7 +905,8 @@ export default {
  },
  methods: {
    CHANGE_PAGE,
-    PAGE_DEFAULT_SHOW_TOTAL,
+    // PAGE_DEFAULT_SHOW_TOTAL,
+    // getCachePageLimit,
    // 分组数据
    loadGroupList() {
      getBuildGroupAll().then((res) => {
--- a/web-vue/src/pages/node/list.vue
+++ b/web-vue/src/pages/node/list.vue
@ -29,6 +29,7 @@
        :auto-refresh-time="30"
        :active-page="activePage"
        table-name="nodeSearch"
+        empty-description="没有任何节点"
        :columns="columns"
        :data-source="list"
        bordered
@ -49,6 +50,15 @@
          }
        "
        @refresh="loadData"
+        @change-table-layout="
+          (layoutType) => {
+            tableSelections = []
+            listQuery = CHANGE_PAGE(listQuery, {
+              pagination: { limit: layoutType === 'card' ? 8 : 10 }
+            })
+            loadData()
+          }
+        "
      >
        <template #title>
          <a-space>
@ -430,7 +440,7 @@
            </a-row>
          </a-card>
        </template>
-        <template #cardPageTool>
+        <!-- <template #cardPageTool>
          <a-row type="flex" justify="center">
            <a-divider v-if="listQuery.total / listQuery.limit > 1" dashed />
            <a-col>
@ -457,7 +467,7 @@
              />
            </a-col>
          </a-row>
-        </template>
+        </template> -->
      </CustomTable>
      <!-- <template v-else-if="layoutType === 'card'">
          <a-row :gutter="[16, 16]">
@ -654,9 +664,9 @@ import {
  formatDuration,
  renderSize,
  formatPercent2Number,
-  parseTime,
-  PAGE_DEFAULT_SHOW_TOTAL,
-  getCachePageLimit
+  parseTime
+  // PAGE_DEFAULT_SHOW_TOTAL,
+  // getCachePageLimit
 } from '@/utils/const'
 import { getWorkSpaceListAll } from '@/api/workspace'
 import CustomSelect from '@/components/customSelect'
@ -848,14 +858,14 @@ export default {
      this.listQuery = { ...this.listQuery, '%name%': searchNodeName }
    }

-    this.changeLayout()
+    this.loadData()
    this.loadGroupList()
  },

  methods: {
    formatDuration,
    renderSize,
-    PAGE_DEFAULT_SHOW_TOTAL,
+    // PAGE_DEFAULT_SHOW_TOTAL,
    parseTime,
    CHANGE_PAGE,
    // 获取所有的分组
@ -1140,22 +1150,22 @@ export default {
        }
      })
    },
-    // 切换视图
-    changeLayout() {
-      if (!this.layoutType) {
-        const layoutType = localStorage.getItem('tableLayout')
-        // 默认表格
-        this.layoutType = layoutType === 'card' ? 'card' : 'table'
-      } else {
-        this.layoutType = this.layoutType === 'card' ? 'table' : 'card'
-        localStorage.setItem('tableLayout', this.layoutType)
-      }
-      this.listQuery = {
-        ...this.listQuery,
-        limit: this.layoutType === 'card' ? 8 : getCachePageLimit()
-      }
-      this.loadData()
-    },
+    // // 切换视图
+    // changeLayout() {
+    //   if (!this.layoutType) {
+    //     const layoutType = localStorage.getItem('tableLayout')
+    //     // 默认表格
+    //     this.layoutType = layoutType === 'card' ? 'card' : 'table'
+    //   } else {
+    //     this.layoutType = this.layoutType === 'card' ? 'table' : 'card'
+    //     localStorage.setItem('tableLayout', this.layoutType)
+    //   }
+    //   this.listQuery = {
+    //     ...this.listQuery,
+    //     limit: this.layoutType === 'card' ? 8 : getCachePageLimit()
+    //   }
+    //   this.loadData()
+    // },
    onFinish() {
      if (this.drawerVisible) {
        // 打开节点 不刷新
--- a/web-vue/src/pages/system/assets/machine/machine-list.vue
+++ b/web-vue/src/pages/system/assets/machine/machine-list.vue
@ -1,6 +1,39 @@
 <template>
  <div>
-    <a-card :body-style="{ padding: '10px' }">
+    <!-- <a-card :body-style="{ padding: '10px' }"> -->
+    <!-- 卡片视图 -->
+    <!-- <template v-if="layoutType === 'card'"> </template> -->
+    <!-- 表格视图 -->
+    <!-- <template v-else-if="layoutType === 'table'"> -->
+    <CustomTable
+      is-show-tools
+      default-auto-refresh
+      :auto-refresh-time="30"
+      table-name="buildList"
+      empty-description="没有资产机器"
+      :active-page="activePage"
+      :columns="columns"
+      :data-source="list"
+      bordered
+      size="middle"
+      row-key="id"
+      :pagination="pagination"
+      :row-selection="rowSelection"
+      :scroll="{
+        x: 'max-content'
+      }"
+      @change="changePage"
+      @refresh="getMachineList"
+      @change-table-layout="
+        (layoutType) => {
+          tableSelections = []
+          listQuery = CHANGE_PAGE(listQuery, {
+            pagination: { limit: layoutType === 'card' ? 8 : 10 }
+          })
+          getMachineList()
+        }
+      "
+    >
      <template #title>
        <a-space wrap class="search-box">
          <a-input
@ -56,7 +89,7 @@
          <a-button :loading="loading" type="primary" @click="getMachineList">搜索</a-button>
          <a-button type="primary" @click="addMachine">新增</a-button>

-          <a-dropdown v-if="layoutType === 'table'">
+          <a-dropdown v-if="tableSelections && tableSelections.length">
            <template #overlay>
              <a-menu>
                <a-menu-item key="1" @click="syncToWorkspaceShow()"> 分配节点 </a-menu-item>
@ -69,127 +102,161 @@
          <a-tooltip v-else title="表格视图才能使用同步配置功能">
            <a-button :disabled="true" type="primary"> 批量操作<DownOutlined /></a-button>
          </a-tooltip>
-          <a-button type="primary" @click="changeLayout">
-            <template #icon>
-              <LayoutOutlined v-if="layoutType === 'card'" />
-              <TableOutlined v-else />
-            </template>
-
-            {{ layoutType === 'card' ? '卡片' : '表格' }}
-          </a-button>
-          <a-tooltip>
-            <template #title>
-              <ul>
-                <li>节点账号密码为插件端的账号密码,并非用户账号(管理员)密码</li>
-                <li>
-                  节点账号密码默认由系统生成：可以通过插件端数据目录下 agent_authorize.json
-                  文件查看（如果自定义配置了账号密码将没有此文件）
-                </li>
-                <li>节点地址为插件端的 IP:PORT 插件端端口默认为：2123</li>
-              </ul>
-            </template>
-            <QuestionCircleOutlined />
-          </a-tooltip>
        </a-space>
      </template>
-      <!-- 卡片视图 -->
-      <template v-if="layoutType === 'card'">
-        <a-row :gutter="[16, 16]">
-          <template v-if="list && list.length">
-            <a-col v-for="(item, index) in list" :key="index" :span="6">
-              <a-card :head-style="{ padding: '0 6px' }" :body-style="{ padding: '10px' }">
-                <template #title>
-                  <a-row :gutter="[4, 0]">
-                    <a-col :span="17" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
-                      <a-tooltip>
-                        <template #title>
-                          <div>节点名称：{{ item.name }}</div>
-                          <div>节点地址：{{ item.jpomUrl }}</div>
-                        </template>
-                        <span style="cursor: pointer" @click="showMachineInfo(item)">
-                          {{ item.name }}
-                        </span>
-                      </a-tooltip>
-                    </a-col>
-                    <a-col :span="7" style="text-align: right" class="text-overflow-hidden">
-                      <a-tooltip
-                        :title="`当前状态：${statusMap[item.status]} ${
-                          item.statusMsg ? '状态消息：' + item.statusMsg : '还没有状态消息'
-                        } `"
-                      >
-                        <a-tag :color="item.status === 1 ? 'green' : 'pink'" style="margin-right: 0">
-                          {{ statusMap[item.status] }}</a-tag
-                        >
-                      </a-tooltip>
-                    </a-col>
-                  </a-row>
-                </template>
-
-                <a-tooltip :title="item.osName">
-                  <a-row class="item-info">
-                    <a-col :span="6" class="title text-overflow-hidden">系统名称:</a-col>
-                    <a-col :span="18" class="content text-overflow-hidden">
-                      <a-button
-                        :disabled="!item.osName"
-                        style="padding: 0; height: auto"
-                        type="link"
-                        size="small"
-                        @click="showMachineInfo(item)"
-                      >
-                        {{ item.osName || '-' }}
-                      </a-button>
-                    </a-col>
-                  </a-row>
-                </a-tooltip>
-                <a-tooltip :title="item.osVersion">
-                  <a-row class="item-info">
-                    <a-col :span="6" class="title text-overflow-hidden">系统版本:</a-col>
-                    <a-col :span="18" class="content text-overflow-hidden">
-                      {{ item.osVersion || '-' }}
-                    </a-col>
-                  </a-row>
-                </a-tooltip>
-                <a-tooltip :title="item.osLoadAverage">
-                  <a-row class="item-info">
-                    <a-col :span="6" class="title text-overflow-hidden">系统负载:</a-col>
-                    <a-col :span="18" class="content text-overflow-hidden">
-                      {{ item.osLoadAverage || '-' }}
-                    </a-col>
-                  </a-row>
-                </a-tooltip>
-                <a-tooltip :title="item.jpomVersion">
-                  <a-row class="item-info">
-                    <a-col :span="6" class="title text-overflow-hidden">插件版本:</a-col>
-                    <a-col :span="18" class="content text-overflow-hidden">
-                      <a-button
-                        :disabled="!item.jpomVersion"
-                        style="padding: 0; height: auto"
-                        type="link"
-                        size="small"
-                        @click="showMachineUpgrade(item)"
-                      >
-                        {{ item.jpomVersion || '-' }}
-                      </a-button>
-                    </a-col>
-                  </a-row>
-                </a-tooltip>
-                <a-row type="flex" align="middle" justify="center" style="margin-top: 10px">
-                  <a-button-group>
-                    <a-button type="primary" size="small" @click="handleEdit(item)"> 编辑 </a-button>
-                    <a-button type="primary" size="small" @click="showMachineInfo(item)">详情</a-button>
-                    <a-button type="primary" size="small" @click="syncToWorkspaceShow(item)">分配</a-button>
-                    <a-button type="primary" size="small" @click="viewMachineNode(item)">节点</a-button>
-                    <a-button size="small" @click="deleteMachineInfo(item)">删除</a-button>
-                  </a-button-group>
-                </a-row>
-              </a-card>
-            </a-col>
+      <template #tableHelp>
+        <a-tooltip>
+          <template #title>
+            <ul>
+              <li>节点账号密码为插件端的账号密码,并非用户账号(管理员)密码</li>
+              <li>
+                节点账号密码默认由系统生成：可以通过插件端数据目录下 agent_authorize.json
+                文件查看（如果自定义配置了账号密码将没有此文件）
+              </li>
+              <li>节点地址为插件端的 IP:PORT 插件端端口默认为：2123</li>
+            </ul>
          </template>
-          <!-- </template> -->
-          <a-col v-else :span="24">
-            <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" description="没有任何节点" />
-          </a-col>
-        </a-row>
+          <QuestionCircleOutlined />
+        </a-tooltip>
+      </template>
+      <template #tableBodyCell="{ column, text, record }">
+        <template v-if="column.dataIndex === 'name'">
+          <a-tooltip :title="text">
+            <a-button style="padding: 0" type="link" size="small" @click="showMachineInfo(record)">
+              {{ text }}
+            </a-button>
+          </a-tooltip>
+        </template>
+        <template v-else-if="column.tooltip">
+          <a-tooltip :title="text">
+            <span>{{ text }}</span>
+          </a-tooltip>
+        </template>
+        <template v-else-if="column.dataIndex === 'status'">
+          <a-tooltip
+            :title="`当前状态：${statusMap[record.status]} ${
+              record.statusMsg ? '状态消息：' + record.statusMsg : '还没有状态消息'
+            } `"
+          >
+            <a-tag :color="record.status === 1 ? 'green' : 'pink'" style="margin-right: 0">
+              {{ statusMap[record.status] }}
+            </a-tag>
+          </a-tooltip>
+        </template>
+        <template v-else-if="column.duration">
+          <a-tooltip placement="topLeft" :title="formatDuration(text)">
+            <span>{{ formatDuration(text, '', 2) }}</span>
+          </a-tooltip>
+        </template>
+        <template v-else-if="column.duration2">
+          <a-tooltip placement="topLeft" :title="formatDuration((text || 0) * 1000)">
+            <span>{{ formatDuration((text || 0) * 1000, '', 2) }}</span>
+          </a-tooltip>
+        </template>
+        <template v-else-if="column.percent2Number">
+          <a-tooltip placement="topLeft" :title="`${(text && formatPercent2Number(text) + '%') || '-'}`">
+            <span>{{ (text && formatPercent2Number(text) + '%') || '-' }}</span>
+          </a-tooltip>
+        </template>
+
+        <template v-else-if="column.dataIndex === 'operation'">
+          <a-space>
+            <a-button type="primary" size="small" @click="handleEdit(record)">编辑</a-button>
+            <a-button type="primary" size="small" @click="syncToWorkspaceShow(record)">分配</a-button>
+            <a-button type="primary" danger size="small" @click="deleteMachineInfo(item)">删除</a-button>
+          </a-space>
+        </template>
+      </template>
+
+      <template #cardBodyCell="{ item }">
+        <a-card :head-style="{ padding: '0 6px' }" :body-style="{ padding: '10px' }">
+          <template #title>
+            <a-row :gutter="[4, 0]">
+              <a-col :span="17" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
+                <a-tooltip>
+                  <template #title>
+                    <div>节点名称：{{ item.name }}</div>
+                    <div>节点地址：{{ item.jpomUrl }}</div>
+                  </template>
+                  <span style="cursor: pointer" @click="showMachineInfo(item)">
+                    {{ item.name }}
+                  </span>
+                </a-tooltip>
+              </a-col>
+              <a-col :span="7" style="text-align: right" class="text-overflow-hidden">
+                <a-tooltip
+                  :title="`当前状态：${statusMap[item.status]} ${
+                    item.statusMsg ? '状态消息：' + item.statusMsg : '还没有状态消息'
+                  } `"
+                >
+                  <a-tag :color="item.status === 1 ? 'green' : 'pink'" style="margin-right: 0">
+                    {{ statusMap[item.status] }}</a-tag
+                  >
+                </a-tooltip>
+              </a-col>
+            </a-row>
+          </template>
+
+          <a-tooltip :title="item.osName">
+            <a-row class="item-info">
+              <a-col :span="6" class="title text-overflow-hidden">系统名称:</a-col>
+              <a-col :span="18" class="content text-overflow-hidden">
+                <a-button
+                  :disabled="!item.osName"
+                  style="padding: 0; height: auto"
+                  type="link"
+                  size="small"
+                  @click="showMachineInfo(item)"
+                >
+                  {{ item.osName || '-' }}
+                </a-button>
+              </a-col>
+            </a-row>
+          </a-tooltip>
+          <a-tooltip :title="item.osVersion">
+            <a-row class="item-info">
+              <a-col :span="6" class="title text-overflow-hidden">系统版本:</a-col>
+              <a-col :span="18" class="content text-overflow-hidden">
+                {{ item.osVersion || '-' }}
+              </a-col>
+            </a-row>
+          </a-tooltip>
+          <a-tooltip :title="item.osLoadAverage">
+            <a-row class="item-info">
+              <a-col :span="6" class="title text-overflow-hidden">系统负载:</a-col>
+              <a-col :span="18" class="content text-overflow-hidden">
+                {{ item.osLoadAverage || '-' }}
+              </a-col>
+            </a-row>
+          </a-tooltip>
+          <a-tooltip :title="item.jpomVersion">
+            <a-row class="item-info">
+              <a-col :span="6" class="title text-overflow-hidden">插件版本:</a-col>
+              <a-col :span="18" class="content text-overflow-hidden">
+                <a-button
+                  :disabled="!item.jpomVersion"
+                  style="padding: 0; height: auto"
+                  type="link"
+                  size="small"
+                  @click="showMachineUpgrade(item)"
+                >
+                  {{ item.jpomVersion || '-' }}
+                </a-button>
+              </a-col>
+            </a-row>
+          </a-tooltip>
+          <a-row type="flex" align="middle" justify="center" style="margin-top: 10px">
+            <a-button-group>
+              <a-button type="primary" size="small" @click="handleEdit(item)"> 编辑 </a-button>
+              <a-button type="primary" size="small" @click="showMachineInfo(item)">详情</a-button>
+              <a-button type="primary" size="small" @click="syncToWorkspaceShow(item)">分配</a-button>
+              <a-button type="primary" size="small" @click="viewMachineNode(item)">节点</a-button>
+              <a-button size="small" @click="deleteMachineInfo(item)">删除</a-button>
+            </a-button-group>
+          </a-row>
+        </a-card>
+      </template>
+      <!-- <template #cardPageTool>
        <a-row type="flex" justify="center">
          <a-divider v-if="listQuery.total / listQuery.limit > 1" dashed />
          <a-col>
@ -214,74 +281,11 @@
              "
              @change="getMachineList"
            />
-          </a-col>
-        </a-row>
-      </template>
-      <!-- 表格视图 -->
-      <template v-else-if="layoutType === 'table'">
-        <a-table
-          :columns="columns"
-          :data-source="list"
-          bordered
-          size="middle"
-          row-key="id"
-          :pagination="pagination"
-          :row-selection="rowSelection"
-          :scroll="{
-            x: 'max-content'
-          }"
-          @change="changePage"
-        >
-          <template #bodyCell="{ column, text, record }">
-            <template v-if="column.dataIndex === 'name'">
-              <a-tooltip :title="text">
-                <a-button style="padding: 0" type="link" size="small" @click="showMachineInfo(record)">
-                  {{ text }}
-                </a-button>
-              </a-tooltip>
-            </template>
-            <template v-else-if="column.tooltip">
-              <a-tooltip :title="text">
-                <span>{{ text }}</span>
-              </a-tooltip>
-            </template>
-            <template v-else-if="column.dataIndex === 'status'">
-              <a-tooltip
-                :title="`当前状态：${statusMap[record.status]} ${
-                  record.statusMsg ? '状态消息：' + record.statusMsg : '还没有状态消息'
-                } `"
-              >
-                <a-tag :color="record.status === 1 ? 'green' : 'pink'" style="margin-right: 0">
-                  {{ statusMap[record.status] }}
-                </a-tag>
-              </a-tooltip>
-            </template>
-            <template v-else-if="column.duration">
-              <a-tooltip placement="topLeft" :title="formatDuration(text)">
-                <span>{{ formatDuration(text, '', 2) }}</span>
-              </a-tooltip>
-            </template>
-            <template v-else-if="column.duration2">
-              <a-tooltip placement="topLeft" :title="formatDuration((text || 0) * 1000)">
-                <span>{{ formatDuration((text || 0) * 1000, '', 2) }}</span>
-              </a-tooltip>
-            </template>
-            <template v-else-if="column.percent2Number">
-              <a-tooltip placement="topLeft" :title="`${(text && formatPercent2Number(text) + '%') || '-'}`">
-                <span>{{ (text && formatPercent2Number(text) + '%') || '-' }}</span>
-              </a-tooltip>
-            </template>
-
-            <template v-else-if="column.dataIndex === 'operation'">
-              <a-space>
-                <a-button type="primary" size="small" @click="handleEdit(record)">编辑</a-button>
-                <a-button type="primary" size="small" @click="syncToWorkspaceShow(record)">分配</a-button>
-              </a-space>
-            </template>
-          </template>
-        </a-table>
-      </template>
-    </a-card>
+          </a-col> </a-row
+      ></template> -->
+    </CustomTable>
+    <!-- </template> -->
+    <!-- </a-card> -->
    <!-- 编辑区 -->
    <a-modal
      v-model:open="editVisible"
@ -614,11 +618,11 @@ import {
  CHANGE_PAGE,
  COMPUTED_PAGINATION,
  PAGE_DEFAULT_LIST_QUERY,
-  PAGE_DEFAULT_SHOW_TOTAL,
+  // PAGE_DEFAULT_SHOW_TOTAL,
  formatDuration,
  parseTime,
-  formatPercent2Number,
-  getCachePageLimit
+  formatPercent2Number
+  // getCachePageLimit
 } from '@/utils/const'
 import CustomSelect from '@/components/customSelect'
 import { useAppStore } from '@/stores/app'
@ -626,7 +630,7 @@ import { mapState } from 'pinia'
 import machineInfo from './machine-func'
 import { getWorkSpaceListAll } from '@/api/workspace'
 // import Upgrade from "@/pages/node/node-layout/system/upgrade.vue";
-import { Empty } from 'ant-design-vue'
+
 import { getWhiteList } from '@/api/node-system'
 import { getConfigData } from '@/api/system'
 import codeEditor from '@/components/codeEditor'
@ -640,10 +644,9 @@ export default {
  },
  data() {
    return {
-      Empty,
      statusMap,
      listQuery: Object.assign({ order: 'descend', order_field: 'networkDelay' }, PAGE_DEFAULT_LIST_QUERY, {}),
-      sizeOptions: ['8', '12', '16', '20', '24'],
+      // sizeOptions: ['8', '12', '16', '20', '24'],
      list: [],
      groupList: [],
      loading: true,
@ -774,7 +777,6 @@ export default {
          dataIndex: 'operation',
          width: '120px',
          fixed: 'right',
-
          align: 'center'
        }
      ],
@ -790,6 +792,9 @@ export default {
    pagination() {
      return COMPUTED_PAGINATION(this.listQuery)
    },
+    activePage() {
+      return this.$attrs.routerUrl === this.$route.path
+    },
    rowSelection() {
      return {
        onChange: (selectedRowKeys) => {
@ -801,13 +806,14 @@ export default {
  },
  mounted() {
    this.loadGroupList()
-    this.changeLayout()
+    this.getMachineList()
  },
  methods: {
    parseTime,
    formatDuration,
    formatPercent2Number,
-    PAGE_DEFAULT_SHOW_TOTAL,
+    // PAGE_DEFAULT_SHOW_TOTAL,
+    // getCachePageLimit,
    // 获取所有的分组
    loadGroupList() {
      machineListGroup().then((res) => {
@ -978,22 +984,7 @@ export default {
      })
      window.open(newpage.href, '_blank')
    },
-    // 切换视图
-    changeLayout() {
-      if (!this.layoutType) {
-        const layoutType = localStorage.getItem('tableLayout')
-        // 默认表格
-        this.layoutType = layoutType === 'card' ? 'card' : 'table'
-      } else {
-        this.layoutType = this.layoutType === 'card' ? 'table' : 'card'
-        localStorage.setItem('tableLayout', this.layoutType)
-      }
-      this.listQuery = {
-        ...this.listQuery,
-        limit: this.layoutType === 'card' ? 8 : getCachePageLimit()
-      }
-      this.getMachineList()
-    },
+
    syncNodeWhiteConfig() {
      if (!this.tableSelections || this.tableSelections.length <= 0) {
        $notification.warn({
--- a/web-vue/src/utils/const.ts
+++ b/web-vue/src/utils/const.ts
@ -93,11 +93,20 @@ export function COMPUTED_PAGINATION(queryParam: any, pageSizeOptions = PAGE_DEFA
 */
 export function CHANGE_PAGE(listQuery, { pagination, sorter }) {
  if (pagination && Object.keys(pagination).length) {
-    listQuery = { ...listQuery, page: pagination.current, limit: pagination.pageSize }
+    let limit = pagination.pageSize || pagination.limit || listQuery.limit
+    if (limit === -1) {
+      limit = getCachePageLimit()
+    }
+    listQuery = {
+      ...listQuery,
+      page: pagination.current || listQuery.page,
+      limit: limit
+    }
+
    //
-    localStorage.setItem(cachePageLimitKeyName, pagination.pageSize)
+    localStorage.setItem(cachePageLimitKeyName, limit)
    //
-    PAGE_DEFAULT_LIST_QUERY.limit = pagination.pageSize
+    PAGE_DEFAULT_LIST_QUERY.limit = limit
  }
  if (sorter && Object.keys(sorter).length) {
    listQuery = { ...listQuery, order: sorter.order, order_field: sorter.field }