feat(sdk): 添加实例管理对话框组件

新增AddOrEdit组件用于实例的添加和编辑功能
调整element-ui对话框样式和新增组件类型声明

components.d.ts

@@ -18,6 +18,8 @@ declare module 'vue' {
     ElCard: typeof import('element-plus/es')['ElCard']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
+    ElCol: typeof import('element-plus/es')['ElCol']
+    ElDialog: typeof import('element-plus/es')['ElDialog']
     ElDropdown: typeof import('element-plus/es')['ElDropdown']
     ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
     ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
@@ -29,9 +31,14 @@ declare module 'vue' {
     ElLink: typeof import('element-plus/es')['ElLink']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
+    ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElPopover: typeof import('element-plus/es')['ElPopover']
+    ElRadio: typeof import('element-plus/es')['ElRadio']
+    ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
+    ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
+    ElSelect: typeof import('element-plus/es')['ElSelect']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']

src/styles/element.scss

@@ -49,6 +49,31 @@
   border-radius: 10px;
 }
 
+:root .el-dialog {
+  border-radius: 12px;
+  padding: 0;
+
+  .el-dialog__header {
+    background: #8077ff;
+    margin-right: 0;
+    padding: 16px 20px;
+    border-radius: 12px 12px 0 0;
+  }
+  .el-dialog__title {
+    color: #fff;
+  }
+  .el-dialog__headerbtn .el-dialog__close {
+    color: #fff;
+  }
+  .el-dialog__body {
+    padding: 20px;
+  }
+  .el-dialog__footer {
+    padding: 20px;
+    border-radius: 0 0 12px 12px;
+  }
+}
+
 :root .el-table {
   border: 1px solid var(--admin-border-color);
   border-radius: 8px;
@@ -59,25 +84,25 @@
       white-space: nowrap;
     }
   }
-  
+
   // 修复固定列背景色透明问题
   .el-table__fixed,
   .el-table__fixed-right {
     background-color: var(--el-bg-color);
-    
+
     // 固定列表头背景色
     .el-table__fixed-header-wrapper {
       th {
         background: var(--admin-table-header-bg);
       }
     }
-    
+
     // 固定列单元格背景色
     .el-table__body-wrapper {
       td {
         background-color: var(--el-bg-color);
       }
-      
+
       // 条纹样式
       .el-table__row--striped td {
         background-color: var(--el-fill-color-light);

src/views/sdk/components/AddOrEdit.vue

@@ -0,0 +1,171 @@
+<template>
+  <el-dialog title="1" v-model="dialogVisible" width="50%">
+    <el-form ref="formRef" :model="formData" :rules="rules" label-position="top" class="instance-form">
+      <el-row :gutter="24">
+        <!-- 第1行 -->
+        <el-col :span="12">
+          <el-form-item label="实例唯一标识" prop="instanceId">
+            <el-input v-model="formData.instanceId" disabled placeholder="自动生成" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="所属用户" prop="userId">
+            <el-select v-model="formData.userId" placeholder="请选择所属用户" style="width: 100%">
+              <el-option label="用户A" value="1" />
+              <el-option label="用户B" value="2" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+
+        <!-- 第2行 -->
+        <el-col :span="12">
+          <el-form-item label="所属订单" prop="orderId">
+            <el-select v-model="formData.orderId" placeholder="请选择所属订单" style="width: 100%">
+              <el-option label="订单A" value="1" />
+              <el-option label="订单B" value="2" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="实例名称" prop="instanceName">
+            <el-input v-model="formData.instanceName" placeholder="请输入实例名称" />
+          </el-form-item>
+        </el-col>
+
+        <!-- 第3行 -->
+        <el-col :span="12">
+          <el-form-item label="实例类型" prop="instanceType">
+            <el-input v-model="formData.instanceType" placeholder="请输入实例类型" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="无数据超时时间" prop="noDataTimeout">
+            <el-input v-model="formData.noDataTimeout" placeholder="请输入" />
+          </el-form-item>
+        </el-col>
+
+        <!-- 第4行：状态与开关组 -->
+        <el-col :span="12">
+          <el-form-item label="实例状态" prop="status">
+            <el-radio-group v-model="formData.status">
+              <el-radio :label="1">正常</el-radio>
+              <el-radio :label="0">禁用</el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <!-- 这里使用 flex 布局让三个开关并排 -->
+          <div class="switch-group">
+            <el-form-item label="无心跳通讯" prop="noHeartbeat">
+              <el-switch v-model="formData.noHeartbeat" />
+            </el-form-item>
+            <el-form-item label="是否启用LTS" prop="enableLts">
+              <el-switch v-model="formData.enableLts" />
+            </el-form-item>
+            <el-form-item label="断线自动重连" prop="autoReconnect">
+              <el-switch v-model="formData.autoReconnect" />
+            </el-form-item>
+          </div>
+        </el-col>
+
+        <!-- 第5行 -->
+        <el-col :span="12">
+          <el-form-item label="限制单连接流量每秒NKBps" prop="flowLimit">
+            <el-input v-model="formData.flowLimit" placeholder="请输入" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="限制单连接每秒发送包数" prop="packetLimit">
+            <el-input v-model="formData.packetLimit" placeholder="请输入" />
+          </el-form-item>
+        </el-col>
+
+        <!-- 第6行 -->
+        <el-col :span="12">
+          <el-form-item label="客户端最大并发数" prop="maxConcurrency">
+            <el-input v-model="formData.maxConcurrency" placeholder="请输入" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item label="备注" prop="remark">
+            <el-input v-model="formData.remark" placeholder="请输入备注" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+
+    <!-- 弹窗底部操作按钮 -->
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button type="primary" class="is-gradient" @click="handleSubmit">确定</el-button>
+        <el-button @click="dialogVisible = false">取消</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script setup lang="ts">
+import type { FormInstance, FormRules } from 'element-plus'
+const dialogVisible = defineModel<boolean>('visible', {
+  default: false
+})
+const formRef = ref<FormInstance>()
+const emit = defineEmits(['update:visible'])
+
+const formData = reactive({
+  instanceId: '',
+  userId: '',
+  orderId: '',
+  instanceName: '',
+  instanceType: '',
+  noDataTimeout: '',
+  status: 1, // 1:正常 0:禁用
+  noHeartbeat: true,
+  enableLts: false,
+  autoReconnect: true,
+  flowLimit: '',
+  packetLimit: '',
+  maxConcurrency: '',
+  remark: ''
+})
+
+const rules = reactive<FormRules>({
+  userId: [{ required: true, message: '请选择所属用户', trigger: 'change' }],
+  orderId: [{ required: true, message: '请选择所属订单', trigger: 'change' }],
+  instanceName: [{ required: true, message: '请输入实例名称', trigger: 'blur' }]
+})
+
+
+const close = () => {
+  emit('update:visible', false)
+}
+
+const confirm = () => {
+  emit('update:visible', false)
+}
+
+const handleSubmit = async () => {
+  if (!formRef.value) return
+  await formRef.value.validate((valid, fields) => {
+    if (valid) {
+      console.log('提交的数据：', formData)
+      dialogVisible.value = false
+    } else {
+      console.log('校验失败：', fields)
+    }
+  })
+}
+
+</script>
+<style lang="scss" scoped>
+.switch-group {
+  display: flex;
+  justify-content: space-between;
+  gap: 16px;
+
+  /* 让组内的 form-item 占满剩余空间 */
+  :deep(.el-form-item) {
+    flex: 1;
+    margin-bottom: 0; // 消除多余的底部边距
+  }
+}
+</style>

src/views/sdk/detail.vue

@@ -0,0 +1,7 @@
+<template>
+	<Breadcrumb />
+	
+</template>
+<script setup lang="ts">
+</script>
+<style lang="scss" scoped></style>

src/views/sdk/index.vue

@@ -5,7 +5,8 @@
     <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" :icon="CirclePlus" size="large" class="is-solid">添加实例</el-button>
+        <el-button type="primary" :icon="CirclePlus" size="large" class="is-solid"
+          @click="dialogForm.visible = true">添加实例</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>
@@ -40,10 +41,12 @@
         <el-button type="danger" link>删除</el-button>
       </template>
     </TableCard>
+    <AddOrEdit v-model:visible="dialogForm.visible" />
   </div>
 </template>
 
 <script setup lang="ts">
+import AddOrEdit from './components/AddOrEdit.vue'
 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'
@@ -58,6 +61,10 @@ const state = reactive({
   total: 20
 })
 
+const dialogForm = reactive({
+  visible: false
+})
+
 const { pageNo, pageSize, total } = toRefs(state)
 
 const options = [