yg-yygl 0.0.1

package/src/views/sys/data-interface/index.vue

@@ -0,0 +1,919 @@
+<script lang="ts" setup>
+import type {
+  BusinessFilterItem,
+  IconActionItem,
+  TableColumn,
+} from '@udp/component-ui';
+
+import type { ColumnConfigType } from '../../../api';
+// 导入API和类型
+import type {
+  ExtendedDataInterface,
+  InterfaceCategory,
+} from '../../../api/data-interface/types';
+import type { DicInfoType } from '../../../api/dic/types';
+
+import { computed, onMounted, reactive, ref, watch } from 'vue';
+
+import {
+  BusinessFilterBar,
+  Dialog,
+  Drawer,
+  IconActionGroup,
+  IconButton,
+  Table,
+  useTable,
+} from '@udp/component-ui';
+import { useUserStore } from '@udp/stores';
+
+import { Search as SearchIcon } from '@element-plus/icons-vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+
+import { getTableColumns, saveTableColumns } from '../../../api';
+// 导入接口API函数
+import {
+  copyDataInterface,
+  createDataInterface,
+  deleteDataInterface,
+  getDataInterfacePage,
+  importDataInterface,
+  updateDataInterface,
+} from '../../../api/data-interface';
+// 导入枚举（非type导入，可作为值使用）
+import {
+  DataInterfaceAction,
+  DataInterfaceStatus,
+  DataInterfaceType,
+  RequestMethod,
+} from '../../../api/data-interface/types';
+// 导入字典API
+import { getDicItemListByDicCode } from '../../../api/dic';
+import { MainContainer } from '../../../components/main-container';
+
+import DataInterfaceForm from './components/data-interface-form.vue';
+import DataInterfaceImport from './components/data-interface-import.vue';
+import InterfaceLog from './components/interface-log.vue';
+import Preview from './components/preview.vue';
+
+const userStore = useUserStore();
+
+// 组件引用
+const dataInterfaceFormRef = ref();
+const dataInterfaceImportRef = ref();
+
+// 当前编辑的数据接口
+const currentEditData = ref<ExtendedDataInterface | null>(null);
+
+// 接口类别相关
+const categoryList = ref<InterfaceCategory[]>([]);
+const loadingCategory = ref(false);
+const selectedCategoryId = ref<null | string>(null);
+
+// 左侧分类列表搜索关键词
+const categorySearchKeyword = ref('');
+
+// 树组件引用
+const treeRef = ref();
+
+// 树过滤函数
+const filterNode = (value: string, data: InterfaceCategory) => {
+  if (!value) return true;
+  return data.categoryName.toLowerCase().includes(value.toLowerCase());
+};
+
+// 监听搜索关键词变化，触发树过滤
+watch(categorySearchKeyword, (val) => {
+  treeRef.value?.filter(val);
+});
+
+// 将字典项数据转换为分类树数据
+const adaptDicItemToCategory = (dicItems: any[]): InterfaceCategory[] => {
+  console.log('API返回的原始数据:', JSON.stringify(dicItems));
+
+  if (!Array.isArray(dicItems)) {
+    console.error('adaptDicItemToCategory: dicItems不是数组', dicItems);
+    return [];
+  }
+
+  return dicItems.map((item) => {
+    // 打印每个项的关键字段
+    console.log(
+      `处理项: id=${item.id}, itemValue=${item.itemValue}, hasChild=${item.hasChild}`,
+    );
+
+    return {
+      id: item.id?.toString() || '', // 确保ID是字符串类型
+      categoryName: item.itemValue || '未命名', // 使用itemValue作为显示名称，添加默认值
+      parentId: item.itemParentId?.toString() || '', // 确保parentId是字符串类型
+      children:
+        item.children &&
+        Array.isArray(item.children) &&
+        item.children.length > 0
+          ? adaptDicItemToCategory(item.children)
+          : [],
+      hasChild: item.hasChild === true || item.hasChild === 'true',
+    };
+  });
+};
+
+// 加载分类列表
+const loadCategoryList = async () => {
+  try {
+    loadingCategory.value = true;
+    console.log('开始加载分类列表...');
+
+    const res = await getDicItemListByDicCode({
+      dicCode: 'interfaceCategory',
+      dicAttr: 'tree',
+      itemParentId: '0', // 使用字符串类型
+    } as DicInfoType & { itemParentId: string });
+
+    console.log('API返回结果:', res);
+
+    if (Array.isArray(res)) {
+      const adaptedData = adaptDicItemToCategory(res);
+      console.log('转换后的数据:', adaptedData);
+      categoryList.value = adaptedData;
+    } else {
+      console.error('API返回的数据不是数组:', res);
+      categoryList.value = [];
+    }
+  } catch (error) {
+    console.error('加载分类失败:', error);
+    ElMessage.error('加载分类失败');
+    categoryList.value = [];
+  } finally {
+    loadingCategory.value = false;
+  }
+};
+
+// 懒加载节点
+const loadNode = async (
+  node: any,
+  resolve: (data: InterfaceCategory[]) => void,
+) => {
+  console.log('loadNode调用:', node.level, node.data);
+
+  // 如果是根节点，使用已加载的数据
+  if (node.level === 0) {
+    console.log('根节点加载，返回categoryList:', categoryList.value);
+    resolve(categoryList.value);
+    return;
+  }
+
+  try {
+    console.log(`加载节点${node.data.id}的子节点...`);
+
+    const res = await getDicItemListByDicCode({
+      dicCode: 'interfaceCategory',
+      dicAttr: 'tree',
+      itemParentId: node.data.id, // 使用节点ID，已经是字符串类型
+    } as DicInfoType & { itemParentId: string });
+
+    console.log(`节点${node.data.id}的API返回:`, res);
+
+    if (Array.isArray(res)) {
+      const children = adaptDicItemToCategory(res);
+      console.log(`节点${node.data.id}的子节点:`, children);
+      resolve(children);
+    } else {
+      console.log(`节点${node.data.id}没有子节点`);
+      resolve([]);
+    }
+  } catch (error) {
+    console.error(`加载节点${node.data.id}的子节点失败:`, error);
+    ElMessage.error('加载子节点失败');
+    resolve([]);
+  }
+};
+
+// 搜索相关
+const searchParams = ref<Record<string, any>>({});
+const filterItems: BusinessFilterItem[] = [
+  {
+    prop: 'name',
+    type: 'input',
+    width: 240,
+    placeholder: '请输入接口名称',
+  },
+  {
+    label: '接口类型',
+    prop: 'type',
+    type: 'select',
+    placeholder: '请选择',
+    options: [
+      { label: '静态数据', value: DataInterfaceType.STATIC_DATA },
+      { label: 'SQL操作', value: DataInterfaceType.SQL_OPERATION },
+      { label: 'API操作', value: DataInterfaceType.API_OPERATION },
+    ],
+  },
+  {
+    label: '接口状态',
+    prop: 'status',
+    type: 'select',
+    placeholder: '请选择',
+    options: [
+      { label: '启用', value: DataInterfaceStatus.ENABLED },
+      { label: '禁用', value: DataInterfaceStatus.DISABLED },
+    ],
+  },
+];
+
+// 表格引用
+const tableRef = ref();
+
+// 表格列配置
+const columns = reactive<TableColumn[]>([
+  { prop: 'name', label: '接口名称' },
+  { prop: 'code', label: '接口编码' },
+  {
+    prop: 'type',
+    label: '接口类型',
+    formatter: (row: any) => {
+      const typeMap: Record<number, string> = {
+        [DataInterfaceType.STATIC_DATA]: '静态数据',
+        [DataInterfaceType.SQL_OPERATION]: 'SQL操作',
+        [DataInterfaceType.API_OPERATION]: 'API操作',
+      };
+      return typeMap[row.type] || row.type;
+    },
+  },
+  // { prop: 'method', label: '请求方法', width: 100 },
+  // { prop: 'url', label: '接口路径', minWidth: 180 },
+  // { prop: 'description', label: '接口描述', minWidth: 150 },
+  {
+    prop: 'status',
+    label: '状态',
+    formatter: (row: any) => {
+      return row.status === DataInterfaceStatus.ENABLED ? '启用' : '禁用';
+    },
+  },
+]);
+
+// API配置
+const api = {
+  list: (params: any) => {
+    // 获取数据接口列表
+    return getDataInterfacePage({
+      current: params.current,
+      size: params.size,
+      model: {
+        name: params.model?.name,
+        type: params.model?.type, // 直接使用枚举值
+        status: params.model?.status, // 直接使用枚举值
+        categoryId: selectedCategoryId.value, // 分类ID已经是字符串类型
+      },
+    });
+  },
+  delete: (id: string) => {
+    // 删除数据接口
+    return deleteDataInterface({ id });
+  },
+};
+
+// 使用表格hooks
+const {
+  loading,
+  data,
+  pagination,
+  refresh,
+  reset: tableReset,
+  search,
+  deleteRow,
+  handleSizeChange,
+  handleCurrentPageChange,
+} = useTable({
+  api,
+});
+
+// 表格/卡片视图切换
+const layoutType = ref<'card' | 'table'>('table');
+
+// 卡片视图配置
+const cardOptions = {
+  title: 'name',
+  desc: 'url',
+  extra: 'method',
+  columns,
+  showActions: true,
+  isEdit: true,
+  isDelete: true,
+  onEdit: (row: any) => handleEdit(row),
+  onDelete: (row: any) => handleDelete(row),
+};
+
+// 列设置查询
+const columnConfig = ref<ColumnConfigType>();
+const getColumnConfig = () => {
+  getTableColumns('data-interface').then((res) => {
+    columnConfig.value = res;
+    if (res.accountGridArr && res.accountGridArr.length > 0) {
+      columns.forEach((item, index) => {
+        const column = res.accountGridArr?.find((c) => c.prop === item.prop);
+        item.hidden = column?.hidden || false;
+        item.sort = column?.sort || index + 1;
+      });
+      columns.sort((a, b) => (a.sort || 1) - (b.sort || 1));
+    }
+  });
+};
+const saveColumnConfig = async (
+  newColumns: {
+    hidden: boolean;
+    prop: string;
+    sort: number;
+  }[],
+) => {
+  try {
+    const res = await saveTableColumns({
+      id: columnConfig.value?.id,
+      accountId: userStore.accountInfo!.id,
+      type: 'data-interface',
+      accountGridArr: newColumns,
+    });
+    columnConfig.value = {
+      ...columnConfig.value,
+      id: res.id,
+    };
+    return true;
+  } catch (error) {
+    console.log(error);
+    return false;
+  }
+};
+
+// 抽屉相关
+const drawerVisible = ref(false);
+const drawerType = ref<'add' | 'edit' | 'view'>('add');
+const drawerTitle = computed(() => {
+  return drawerType.value === 'add'
+    ? '新增接口'
+    : drawerType.value === 'edit'
+      ? '编辑接口'
+      : '预览接口';
+});
+const formSubmitting = ref(false); // 表单提交状态
+
+// 预览抽屉相关
+const previewDrawerVisible = ref(false);
+const previewDrawerTitle = ref('预览接口');
+// 保存按钮是否禁用
+const saveButtonDisabled = computed(() => {
+  // 如果正在提交，则禁用
+  if (formSubmitting.value) {
+    return true;
+  }
+
+  // 如果表单引用不存在，则禁用
+  if (!dataInterfaceFormRef.value) {
+    return true;
+  }
+
+  // 允许每一步都可以点击确认保存
+  return false;
+});
+
+// 导入对话框相关
+const importDialogVisible = ref(false);
+const importing = ref(false);
+
+// 取消抽屉
+const handleCancel = () => {
+  // 用户主动点击取消按钮，关闭抽屉
+  drawerVisible.value = false;
+  // 不清空currentEditData，这样如果用户再次打开抽屉，数据还在
+};
+
+// 自定义重置函数
+const reset = () => {
+  // 调用表格重置
+  tableReset();
+};
+
+const handleFilterSearch = (params: Record<string, any>) => {
+  search(params);
+};
+
+const handleFilterReset = () => {
+  reset();
+};
+
+// 选择接口分类
+const selectCategory = (categoryId: string) => {
+  // 如果点击的是当前已选中的分类，则取消选中
+  if (selectedCategoryId.value === categoryId) {
+    selectedCategoryId.value = null;
+    // 重置树组件的当前节点高亮状态
+    treeRef.value?.setCurrentKey(null);
+    search();
+  } else {
+    // 否则选中点击的分类
+    selectedCategoryId.value = categoryId || null;
+    search();
+  }
+};
+
+const handleCategoryNodeClick = (node: InterfaceCategory) => {
+  treeRef.value?.setCurrentKey(node.id);
+  selectCategory(node.id);
+};
+
+// 新增接口
+const handleAdd = () => {
+  drawerType.value = 'add';
+  // 确保新增时有一个初始的空对象
+  currentEditData.value = {
+    id: '',
+    name: '',
+    code: '',
+    type: DataInterfaceType.STATIC_DATA,
+    sort: 1,
+    status: DataInterfaceStatus.ENABLED,
+    categoryId: selectedCategoryId.value || '', // 使用当前选中的分类ID
+    categoryName: '',
+    description: '',
+    action: DataInterfaceAction.QUERY,
+    hasPage: 0,
+    hasAuth: 0,
+    fieldJson: '[]',
+    parameterJson: '[]',
+    dataConfigJson: `{"staticData":"","sqlData":{"dbLinkId":"0","sql":""},"apiData":{"method":${RequestMethod.GET},"url":"","header":[],"query":[],"body":"","bodyType":0}}`,
+    dataJsJson: '',
+    dataCountJson: '',
+    dataEchoJson: '',
+  };
+
+  console.log('新增接口初始数据:', currentEditData.value);
+  console.log('新增接口分类ID类型:', typeof currentEditData.value.categoryId);
+  drawerVisible.value = true;
+};
+
+// 编辑接口
+const handleEdit = (row: any) => {
+  drawerType.value = 'edit';
+  // 创建一个新对象，确保categoryId是字符串类型
+  const editData = { ...row };
+  if (editData.categoryId !== undefined && editData.categoryId !== null) {
+    editData.categoryId = editData.categoryId.toString();
+  }
+  currentEditData.value = editData;
+  if (currentEditData.value) {
+    console.log('编辑接口数据:', currentEditData.value);
+    console.log('编辑接口分类ID类型:', typeof currentEditData.value.categoryId);
+  }
+  drawerVisible.value = true;
+};
+
+// 预览接口
+const handlePreview = (row: any) => {
+  previewDrawerTitle.value = `预览接口 - ${row.name}`;
+  // 复制一份数据用于预览
+  currentEditData.value = { ...row };
+  console.log('预览接口数据:', currentEditData.value);
+  // 打开预览抽屉
+  previewDrawerVisible.value = true;
+};
+
+// 验证接口类型特定字段
+const validateFormDataByType = (formData: any): boolean => {
+  if (
+    formData.type === DataInterfaceType.STATIC_DATA &&
+    (!formData.fieldJson || formData.fieldJson === '[]')
+  ) {
+    ElMessage.warning('静态数据类型必须填写字段参数');
+    return false;
+  }
+
+  if (formData.type === DataInterfaceType.SQL_OPERATION) {
+    try {
+      const configJson = JSON.parse(formData.dataConfigJson || '{}');
+      if (!configJson.sqlData || !configJson.sqlData.sql) {
+        ElMessage.warning('SQL操作类型必须填写SQL内容');
+        return false;
+      }
+    } catch {
+      ElMessage.warning('SQL配置格式错误');
+      return false;
+    }
+  }
+
+  if (formData.type === DataInterfaceType.API_OPERATION) {
+    try {
+      const configJson = JSON.parse(formData.dataConfigJson || '{}');
+      if (!configJson.apiData || !configJson.apiData.url) {
+        ElMessage.warning('API操作类型必须填写API地址');
+        return false;
+      }
+    } catch {
+      ElMessage.warning('API配置格式错误');
+      return false;
+    }
+  }
+
+  return true;
+};
+
+// 提交接口表单
+const submitForm = async () => {
+  try {
+    if (!dataInterfaceFormRef.value) {
+      ElMessage.warning('表单引用不存在，请重试');
+      return false;
+    }
+
+    // 设置加载状态
+    formSubmitting.value = true;
+
+    // 获取表单数据并验证
+    const formData = await dataInterfaceFormRef.value.handleSubmit();
+    console.log('提交的表单数据:', formData);
+
+    if (formData) {
+      // 检查分类ID是否存在
+      console.log('分类ID:', formData.categoryId);
+      console.log('分类名称:', formData.categoryName);
+    }
+
+    if (!formData) {
+      ElMessage.warning('表单验证失败，请检查必填字段');
+      return false;
+    }
+
+    // 根据接口类型进行特殊字段验证
+    if (!validateFormDataByType(formData)) {
+      return false;
+    }
+
+    const isNew = !formData.id;
+
+    if (isNew) {
+      // 创建新接口
+      console.log('准备创建新接口，数据:', formData);
+      await createDataInterface(formData);
+      ElMessage.success('创建接口成功！');
+    } else {
+      // 更新已有接口
+      console.log('准备更新接口，数据:', formData);
+      await updateDataInterface(formData);
+      ElMessage.success('编辑接口成功！');
+    }
+
+    // 只有在成功提交后才关闭抽屉和清空数据
+    drawerVisible.value = false;
+    currentEditData.value = null;
+    search(); // 刷新列表
+    return true;
+  } catch (error: any) {
+    console.error('提交失败:', error);
+    // ElMessage.error(`操作失败: ${error?.message || '请重试'}`);
+    return false;
+  } finally {
+    formSubmitting.value = false;
+  }
+};
+
+// 删除接口
+const handleDelete = async (row: any) => {
+  try {
+    // 直接调用deleteRow，它内部已经有确认弹窗
+    await deleteRow(row);
+    // search();
+  } catch (error) {
+    console.error('删除失败:', error);
+  }
+};
+
+// 复制接口
+const handleCopy = async (row: any) => {
+  try {
+    // 显示确认弹窗
+    await ElMessageBox.confirm(
+      `确定要复制接口"${row.name}"吗？复制后将生成一个新的接口副本。`,
+      '确认复制',
+      {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'info',
+      },
+    );
+
+    // 用户确认后执行复制
+    await copyDataInterface({ id: row.id });
+    ElMessage.success('复制接口成功！');
+    search({ ...searchParams.value });
+  } catch (error: any) {
+    // 如果是用户取消操作，不显示错误消息
+    if (error === 'cancel') {
+      return;
+    }
+    console.error('复制失败:', error);
+    ElMessage.error(`复制接口失败: ${error?.message || '请重试'}`);
+  }
+};
+
+// 导入接口
+const handleImport = () => {
+  importDialogVisible.value = true;
+};
+
+// 导入取消
+const handleImportCancel = () => {
+  importDialogVisible.value = false;
+  // 清空已选择的文件
+  if (dataInterfaceImportRef.value) {
+    dataInterfaceImportRef.value.clearFile();
+  }
+};
+
+// 提交导入
+const submitImport = async () => {
+  const file = dataInterfaceImportRef.value?.getFile();
+  if (!file) {
+    ElMessage.warning('请先选择文件');
+    return;
+  }
+
+  const formData = new FormData();
+  formData.append('file', file);
+
+  // 显示加载提示
+  const loadingMessage = ElMessage({
+    type: 'info',
+    message: '正在导入数据，请稍候...',
+    duration: 0,
+  });
+
+  importing.value = true;
+  try {
+    // 调用真实API
+    await importDataInterface(formData);
+
+    // 关闭加载提示并显示成功消息
+    loadingMessage.close();
+    ElMessage.success('接口导入成功');
+    importDialogVisible.value = false;
+    dataInterfaceImportRef.value?.clearFile();
+    search(); // 刷新列表
+  } catch (error) {
+    // 关闭加载提示并显示错误消息
+    loadingMessage.close();
+    console.error('导入失败', error);
+    ElMessage.error('导入失败，请检查文件格式或网络连接');
+  } finally {
+    importing.value = false;
+  }
+};
+
+// 处理下一步按钮点击
+const handleNextStep = async () => {
+  if (!dataInterfaceFormRef.value) {
+    ElMessage.warning('表单引用不存在，请重试');
+    return;
+  }
+
+  try {
+    // 调用表单组件的 nextStep 方法，该方法内部会处理表单验证
+    await dataInterfaceFormRef.value.nextStep();
+  } catch {
+    // 如果验证失败，显示错误消息
+    ElMessage.error('当前步骤表单验证失败，请检查必填字段');
+  }
+};
+
+// 日志
+const logVisible = ref(false);
+const iconActionBtns: IconActionItem[] = [
+  {
+    key: 'edit',
+    label: '编辑',
+    icon: 'hx-line-built-in:edit-line',
+    onClick: (row: any) => handleEdit(row),
+  },
+  {
+    key: 'preview',
+    label: '预览',
+    icon: 'mynaui:eye-solid',
+    onClick: (row: any) => handlePreview(row),
+  },
+  {
+    key: 'copy',
+    label: '复制',
+    icon: 'mdi:content-copy',
+    onClick: (row: any) => handleCopy(row),
+  },
+  {
+    key: 'log',
+    label: '日志',
+    icon: 'mdi:file-document-outline',
+    onClick: (row: any) => {
+      currentEditData.value = row;
+      logVisible.value = true;
+    },
+  },
+  {
+    key: 'delete',
+    label: '删除',
+    icon: 'hx-line-built-in:delete-bin-6-line',
+    type: 'danger',
+    onClick: (row: any) => handleDelete(row),
+  },
+];
+
+// 初始化页面
+onMounted(() => {
+  loadCategoryList();
+  search();
+  getColumnConfig();
+});
+</script>
+
+<template>
+  <MainContainer>
+    <!-- 左侧分类列表 -->
+    <template #side>
+      <div
+        class="flex h-full w-[250px] flex-col gap-2 border-r border-gray-200 p-4"
+      >
+        <el-input
+          v-model="categorySearchKeyword"
+          placeholder="搜索分类"
+          clearable
+          class="w-full"
+        >
+          <template #prefix>
+            <el-icon><SearchIcon /></el-icon>
+          </template>
+        </el-input>
+        <div class="flex-1 overflow-y-auto py-2">
+          <el-tree
+            class="data-interface-tree"
+            ref="treeRef"
+            :data="categoryList"
+            :props="{
+              label: 'categoryName',
+              children: 'children',
+              isLeaf: (data: any) => data.hasChild === false,
+              class: 'custom-node',
+            }"
+            node-key="id"
+            :highlight-current="true"
+            :expand-on-click-node="false"
+            lazy
+            :load="loadNode"
+            :filter-node-method="filterNode"
+            @node-click="handleCategoryNodeClick"
+          />
+        </div>
+      </div>
+    </template>
+
+    <div class="flex h-full min-h-0 flex-1 flex-col overflow-hidden bg-background">
+      <BusinessFilterBar
+        v-model="searchParams"
+        :items="filterItems"
+        :loading="loading"
+        @search="handleFilterSearch"
+        @reset="handleFilterReset"
+      />
+
+      <Table
+        ref="tableRef"
+        :data="data"
+        :columns="columns"
+        :card-options="cardOptions"
+        :loading="loading"
+        :pagination="pagination"
+        show-toolbar
+        show-top-actions
+        show-pagination
+        show-action
+        :show-layout="false"
+        :layout-type="layoutType"
+        class="w-full"
+        action-width="140px"
+        :save-column-config="saveColumnConfig"
+        @refresh="refresh"
+        @size-change="handleSizeChange"
+        @current-page-change="handleCurrentPageChange"
+      >
+        <template #top-actions>
+          <div class="flex flex-wrap items-center gap-2">
+            <IconButton type="primary" icon-type="add" @click="handleAdd">
+              新增接口
+            </IconButton>
+            <IconButton icon-type="import" @click="handleImport">
+              导入
+            </IconButton>
+          </div>
+        </template>
+        <template #action="{ row }">
+          <IconActionGroup :actions="iconActionBtns" :row="row" />
+        </template>
+      </Table>
+    </div>
+
+    <!-- 接口表单抽屉 -->
+    <Drawer
+      v-model="drawerVisible"
+      :title="drawerTitle"
+      :type="drawerType"
+      size="80%"
+      :footer="true"
+      @cancel="handleCancel"
+    >
+      <DataInterfaceForm
+        ref="dataInterfaceFormRef"
+        :edit-data="currentEditData"
+        :show-step-actions="false"
+      />
+
+      <!-- 自定义footer -->
+      <template #footer>
+        <div class="flex w-full items-center">
+
+          <!-- 右侧取消确认按钮 -->
+          <div class="ml-auto flex justify-end gap-3">
+            <el-button @click="handleCancel">取消</el-button>
+            <el-button
+              @click="dataInterfaceFormRef?.prevStep()"
+              :disabled="
+                !dataInterfaceFormRef || !dataInterfaceFormRef?.activeStep
+              "
+            >
+              上一步
+            </el-button>
+            <el-button
+              type="primary"
+              @click="handleNextStep"
+              :disabled="
+                !dataInterfaceFormRef ||
+                !dataInterfaceFormRef?.visibleSteps ||
+                dataInterfaceFormRef?.activeStep >=
+                  dataInterfaceFormRef?.visibleSteps?.length - 1
+              "
+            >
+              下一步
+            </el-button>
+            <el-button
+              type="primary"
+              @click="submitForm"
+              :loading="formSubmitting"
+              :disabled="saveButtonDisabled"
+            >
+              确认
+            </el-button>
+          </div>
+        </div>
+      </template>
+    </Drawer>
+
+    <!-- 导入对话框 -->
+    <Dialog
+      v-model="importDialogVisible"
+      title="导入接口"
+      type="import"
+      :footer="true"
+      @confirm="submitImport"
+      @cancel="handleImportCancel"
+    >
+      <DataInterfaceImport ref="dataInterfaceImportRef" />
+    </Dialog>
+
+    <!-- 日志 -->
+    <Dialog
+      v-model="logVisible"
+      title="日志"
+      type="page"
+      :show-confirm-button="false"
+      cancel-text="关闭"
+      width="1000px"
+    >
+      <InterfaceLog :data-interface-id="currentEditData?.id" />
+    </Dialog>
+
+    <!-- 预览抽屉 -->
+    <Drawer
+      v-model="previewDrawerVisible"
+      :title="previewDrawerTitle"
+      type="view"
+      size="80%"
+      :footer="true"
+      @cancel="() => (previewDrawerVisible = false)"
+    >
+      <Preview :data="currentEditData" />
+
+      <!-- 自定义footer -->
+      <template #footer>
+        <div class="flex w-full justify-end">
+          <el-button @click="previewDrawerVisible = false">关闭</el-button>
+        </div>
+      </template>
+    </Drawer>
+  </MainContainer>
+</template>
+
+<style lang="scss" scoped>
+.data-interface-tree {
+  --el-tree-node-content-height: 28px !important;
+}
+</style>