feat(视图): 完善SDK管理页面功能

- 添加图标按钮并调整工具栏布局
- 新增表格列开关控制功能
- 扩展操作列按钮选项
- 调整表格列宽度和数据类型

src/views/sdk/index.vue

@@ -5,13 +5,16 @@
     <TableCard :data="tableData" :columns="columns" v-model:page-no="pageNo" v-model:page-size="pageSize"
       @change="handleChange" :total="total" @selection-change="handleSelectionChange">
       <template #toolbar-left>
-        <el-button type="primary" size="large" class="is-solid" @click="handleAdd">新增</el-button>
-        <el-button size="large" @click="handleBatchDelete">批量删除</el-button>
+        <el-button type="primary" :icon="CirclePlus" size="large" class="is-solid">添加实例</el-button>
+        <el-button type="primary" disabled :icon="Delete" size="large" class="is-solid">删除</el-button>
+        <el-button type="primary" disabled :icon="MoreFilled" size="large" class="is-solid">更多</el-button>
+        <el-button type="primary" :icon="Refresh" size="large" class="is-solid">刷新</el-button>
       </template>
-
       <template #toolbar-right>
-        <el-input v-model="searchKeyword" placeholder="请输入关键词搜索" style="width: 200px" clearable />
-        <el-button type="primary" size="large" @click="handleSearch">搜索</el-button>
+        <el-input :prefix-icon="Search" v-model="searchKeyword" size="large" placeholder="请输入关键词搜索" style="width: 300px"
+          clearable />
+        <el-button :icon="Search" type="primary" class="is-solid" size="large">搜索</el-button>
+        <el-button :icon="Upload" type="primary" class="is-solid" size="large">导出</el-button>
       </template>
 
       <template #column-status="{ row }">
@@ -19,10 +22,22 @@
           {{ row.status }}
         </el-tag>
       </template>
+      <template #column-noHeartbeat="{ row }">
+        <el-switch v-model="row.noHeartbeat"></el-switch>
+      </template>
+      <template #column-enableLTS="{ row }">
+        <el-switch v-model="row.enableLTS"></el-switch>
+      </template>
+      <template #column-autoReconnect="{ row }">
+        <el-switch v-model="row.autoReconnect"></el-switch>
+      </template>
 
       <template #column-operation="{ row }">
-        <el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
-        <el-button type="danger" link @click="handleDelete(row)">删除</el-button>
+        <el-button type="primary" link>管理详情</el-button>
+        <el-button type="primary" link>升级</el-button>
+        <el-button type="primary" link>编辑</el-button>
+        <el-button type="warning" link>续费</el-button>
+        <el-button type="danger" link>删除</el-button>
       </template>
     </TableCard>
   </div>
@@ -31,6 +46,7 @@
 <script setup lang="ts">
 import TabFilter from '@/components/TabFilter/index.vue'
 import TableCard from '@/components/TableCard/index.vue'
+import { CirclePlus, Delete, MoreFilled, Refresh, Search, Upload } from '@element-plus/icons-vue'
 
 const activeTab = ref('all')
 const searchKeyword = ref('')
@@ -65,7 +81,7 @@ const columns = [
   { prop: 'autoReconnect', label: '断线自动重连', minWidth: 110 },
   { prop: 'maxConcurrent', label: '客户端最大并发数', minWidth: 130 },
   { prop: 'createTime', label: '创建时间', minWidth: 150 },
-  { prop: 'operation', label: '操作', minWidth: 120, isAction: true }
+  { prop: 'operation', label: '操作', minWidth: 240, isAction: true }
 ]
 
 const tableData = ref([
@@ -76,10 +92,10 @@ const tableData = ref([
     expireTime: '2023-12-31',
     instanceType: '普通实例',
     status: '正常',
-    noHeartbeat: '是',
+    noHeartbeat: true,
     noDataTimeout: '10秒',
-    enableLTS: '是',
-    autoReconnect: '是',
+    enableLTS: true,
+    autoReconnect: false,
     maxConcurrent: '100',
     createTime: '2023-01-01 10:00:00'
   }