@liujitcn/kratos-admin-system 0.0.41 → 0.0.42

package/README.md

@@ -186,3 +186,5 @@ registerRuntimeConfig(notificationConfig);
 
 国际化编辑弹窗使用 Element Plus 横向表单，语言标签在左侧统一占 100px，输入框及翻译操作位于右侧；单行和多行编辑均保持左右布局。
 代码生成进度弹窗统一补齐 HTTP 和 SSE 快照中被 ProtoJSON 省略的零值计数，任务及表级进度在生成初期显示 0，避免出现 NaN。
+
+数据库迁移记录的模块、数据源、版本和时间仅在左侧列表展示，右侧直接展示文件 Tab。详情按文件展示：说明、升级和回退文件各占一个 Tab，标签显示原始文件名，面板显示路径；Markdown 独立渲染，SQL 独立查看和复制，内容区域填满 Tab 下方的剩余高度并在内部滚动。切换记录后选中第一个文件，仅渲染当前 Tab 的正文。

package/dist/package/declarations/src/config/types.d.ts

@@ -26,6 +26,10 @@ export interface RuntimeConfigField {
     labelKey: string;
     /** ProForm 控件类型。 */
     component: ProFormComponentType;
+    /** 栅格占位列数，默认双列；长路径等字段可设为 24 独占整行。 */
+    colSpan?: ProFormField["colSpan"];
+    /** 是否在当前字段前换行。 */
+    rowBreakBefore?: ProFormField["rowBreakBefore"];
     /** 控件参数。 */
     props?: ProFormField["props"];
     /** 表单项参数。 */

package/dist/package/declarations/src/locales/generated.d.ts

@@ -1,5 +1,7 @@
 export declare const LOCALE_MESSAGES: {
     readonly 'zh-CN': {
+        "system.base.config.tab.basic": string;
+        "system.base.config.tab.form": string;
         "system.ai.chat.action.collapse_sessions": string;
         "system.ai.chat.action.confirm_delete_conversation": string;
         "system.ai.chat.action.continue": string;
@@ -1521,6 +1523,8 @@ export declare const LOCALE_MESSAGES: {
         "system.sse.error.connection_failed": string;
     };
     readonly 'en-US': {
+        "system.base.config.tab.basic": string;
+        "system.base.config.tab.form": string;
         "system.ai.chat.action.collapse_sessions": string;
         "system.ai.chat.action.confirm_delete_conversation": string;
         "system.ai.chat.action.continue": string;
@@ -3042,6 +3046,8 @@ export declare const LOCALE_MESSAGES: {
         "system.sse.error.connection_failed": string;
     };
     readonly 'ja-JP': {
+        "system.base.config.tab.basic": string;
+        "system.base.config.tab.form": string;
         "system.ai.chat.action.collapse_sessions": string;
         "system.ai.chat.action.confirm_delete_conversation": string;
         "system.ai.chat.action.continue": string;
@@ -4563,6 +4569,8 @@ export declare const LOCALE_MESSAGES: {
         "system.sse.error.connection_failed": string;
     };
     readonly 'zh-TW': {
+        "system.base.config.tab.basic": string;
+        "system.base.config.tab.form": string;
         "system.ai.chat.action.collapse_sessions": string;
         "system.ai.chat.action.confirm_delete_conversation": string;
         "system.ai.chat.action.continue": string;

package/dist/package/declarations/src/rpc/system/admin/v1/base_migration.d.ts

@@ -46,15 +46,18 @@ export interface BaseMigration {
     data_source: string;
     /** 迁移版本 */
     version: string;
-    /** 升级脚本 */
-    up_sql: string;
-    /** 回退脚本 */
-    down_sql: string;
-    /** 升级描述 */
-    description: string;
+    /** 迁移文件列表 */
+    files: BaseMigrationFile[];
     /** 创建时间 */
     created_at: string;
 }
+/** 数据库迁移文件内容 */
+export interface BaseMigrationFile {
+    /** 文件相对路径 */
+    path: string;
+    /** 文件内容 */
+    content: string;
+}
 /** Admin数据库迁移服务。 */
 export interface BaseMigrationService {
     /** 分页查询数据库升级历史 */

package/dist/package/src/config/types.ts

@@ -28,6 +28,10 @@ export interface RuntimeConfigField {
   labelKey: string;
   /** ProForm 控件类型。 */
   component: ProFormComponentType;
+  /** 栅格占位列数，默认双列；长路径等字段可设为 24 独占整行。 */
+  colSpan?: ProFormField["colSpan"];
+  /** 是否在当前字段前换行。 */
+  rowBreakBefore?: ProFormField["rowBreakBefore"];
   /** 控件参数。 */
   props?: ProFormField["props"];
   /** 表单项参数。 */

package/dist/package/src/locales/en-US.json

@@ -1,4 +1,6 @@
 {
+  "system.base.config.tab.basic": "Basic information",
+  "system.base.config.tab.form": "Configuration form",
   "system.ai.chat.action.collapse_sessions": "Collapse conversations",
   "system.ai.chat.action.confirm_delete_conversation": "Delete",
   "system.ai.chat.action.continue": "Continue",

package/dist/package/src/locales/ja-JP.json

@@ -1,4 +1,6 @@
 {
+  "system.base.config.tab.basic": "基本情報",
+  "system.base.config.tab.form": "設定フォーム",
   "system.ai.chat.action.collapse_sessions": "会話バーを閉じる",
   "system.ai.chat.action.confirm_delete_conversation": "削除の確認",
   "system.ai.chat.action.continue": "続行",

package/dist/package/src/locales/zh-CN.json

@@ -1,4 +1,6 @@
 {
+  "system.base.config.tab.basic": "基础信息",
+  "system.base.config.tab.form": "配置表单",
   "system.ai.chat.action.collapse_sessions": "收起会话栏",
   "system.ai.chat.action.confirm_delete_conversation": "确认删除",
   "system.ai.chat.action.continue": "继续",

package/dist/package/src/locales/zh-TW.json

@@ -1,4 +1,6 @@
 {
+  "system.base.config.tab.basic": "基本資訊",
+  "system.base.config.tab.form": "設定表單",
   "system.ai.chat.action.collapse_sessions": "收起會話欄",
   "system.ai.chat.action.confirm_delete_conversation": "確認刪除",
   "system.ai.chat.action.continue": "繼續",

package/dist/package/src/rpc/system/admin/v1/base_migration.ts

@@ -62,16 +62,20 @@ export interface BaseMigration {
   data_source: string;
   /** 迁移版本 */
   version: string;
-  /** 升级脚本 */
-  up_sql: string;
-  /** 回退脚本 */
-  down_sql: string;
-  /** 升级描述 */
-  description: string;
+  /** 迁移文件列表 */
+  files: BaseMigrationFile[];
   /** 创建时间 */
   created_at: string;
 }
 
+/** 数据库迁移文件内容 */
+export interface BaseMigrationFile {
+  /** 文件相对路径 */
+  path: string;
+  /** 文件内容 */
+  content: string;
+}
+
 /** Admin数据库迁移服务。 */
 export interface BaseMigrationService {
   /** 分页查询数据库升级历史 */

package/dist/package/src/views/base/config/index.vue

@@ -9,95 +9,113 @@
       :request-api="requestBaseConfigTable"
     />
 
-    <FormDialog
+    <ProDialog
       v-model="dialog.visible"
-      ref="formDialogRef"
       class="system-config-dialog"
       :title="t(dialog.titleKey, { resource: t('system.base.config.resource') })"
-      width="min(1440px, calc(100vw - 32px))"
+      width="min(1040px, calc(100vw - 32px))"
       top="4vh"
-      :col-span="12"
-      :gutter="24"
       :confirm-loading="saving"
-      :model="formData"
-      :fields="formFields"
-      :rules="rules"
       @confirm="handleSubmit"
       @close="handleCloseDialog"
     >
-      <template #textValue>
-        <el-input
-          v-model="formData.value"
-          :placeholder="t('common.validation.required_input', { field: t('system.base.config.field.value') })"
-        />
-      </template>
-      <template #imageValue>
-        <UploadImg v-model:image-url="formData.value" upload-type="config" />
-      </template>
-      <template #richTextValue>
-        <WangEditor v-model:value="formData.value" upload-type="config" />
-      </template>
-      <template #dictValue>
-        <Dict
-          v-if="dictValueCode"
-          v-model="formData.value"
-          :code="dictValueCode"
-          code-type="string"
-          :placeholder="t('common.validation.required_select', { field: t('system.base.config.field.value') })"
-        />
-        <el-input
-          v-else
-          v-model="formData.value"
-          :placeholder="t('common.validation.required_input', { field: t('system.base.config.field.value') })"
-        />
-      </template>
-      <template #booleanValue>
-        <el-switch
-          v-model="formData.value"
-          active-value="true"
-          inactive-value="false"
-          active-text="true"
-          inactive-text="false"
-          inline-prompt
-        />
-      </template>
-      <template #formValue>
-        <div class="config-form-value">
-          <template v-if="formDefinition">
-            <p>
-              <el-icon><component :is="formDefinition.icon" /></el-icon> {{ t(formDefinition.descriptionKey) }}
-            </p>
-            <ProForm
-              :key="formDefinition.key"
-              ref="valueFormRef"
-              :model="formValue"
-              :fields="localizedFormFields"
-              :col-span="12"
-              :gutter="24"
-              label-width="180px"
-            />
-          </template>
-          <el-alert v-else :title="t('system.base.config.message.form_unavailable')" type="warning" :closable="false" />
-        </div>
-      </template>
-      <template #nameI18ns>
-        <DynamicI18nEditor v-model="nameI18nValues" :source="formData.name" :maxlength="100" />
-      </template>
-      <template #valueI18ns>
-        <DynamicI18nEditor v-model="valueI18nValues" :source="formData.value" :maxlength="10000" multiline />
-      </template>
-    </FormDialog>
+      <el-tabs
+        v-model="activeTab"
+        class="config-editor-tabs"
+        :class="{ 'config-editor-tabs--plain': formData.type !== BaseConfigType.BASE_CONFIG_TYPE_FORM }"
+      >
+        <el-tab-pane :label="t('system.base.config.tab.basic')" name="basic">
+          <ProForm
+            ref="basicFormRef"
+            :model="formData"
+            :fields="formFields"
+            :rules="rules"
+            :col-span="12"
+            :gutter="24"
+            label-position="top"
+            scroll-to-error
+          >
+            <template #textValue>
+              <el-input
+                v-model="formData.value"
+                :placeholder="t('common.validation.required_input', { field: t('system.base.config.field.value') })"
+              />
+            </template>
+            <template #imageValue>
+              <UploadImg v-model:image-url="formData.value" upload-type="config" />
+            </template>
+            <template #richTextValue>
+              <WangEditor v-model:value="formData.value" upload-type="config" />
+            </template>
+            <template #dictValue>
+              <Dict
+                v-if="dictValueCode"
+                v-model="formData.value"
+                :code="dictValueCode"
+                code-type="string"
+                :placeholder="t('common.validation.required_select', { field: t('system.base.config.field.value') })"
+              />
+              <el-input
+                v-else
+                v-model="formData.value"
+                :placeholder="t('common.validation.required_input', { field: t('system.base.config.field.value') })"
+              />
+            </template>
+            <template #booleanValue>
+              <el-switch
+                v-model="formData.value"
+                active-value="true"
+                inactive-value="false"
+                active-text="true"
+                inactive-text="false"
+                inline-prompt
+              />
+            </template>
+            <template #nameI18ns>
+              <DynamicI18nEditor v-model="nameI18nValues" :source="formData.name" :maxlength="100" />
+            </template>
+            <template #valueI18ns>
+              <DynamicI18nEditor v-model="valueI18nValues" :source="formData.value" :maxlength="10000" multiline />
+            </template>
+          </ProForm>
+        </el-tab-pane>
+        <el-tab-pane
+          v-if="formData.type === BaseConfigType.BASE_CONFIG_TYPE_FORM"
+          :label="t('system.base.config.tab.form')"
+          name="form"
+        >
+          <div class="config-form-value">
+            <template v-if="formDefinition">
+              <p>
+                <el-icon><component :is="formDefinition.icon" /></el-icon> {{ t(formDefinition.descriptionKey) }}
+              </p>
+              <ProForm
+                :key="formDefinition.key"
+                ref="valueFormRef"
+                :model="formValue"
+                :fields="localizedFormFields"
+                :col-span="12"
+                :gutter="24"
+                label-position="top"
+                scroll-to-error
+              />
+            </template>
+            <el-alert v-else :title="t('system.base.config.message.form_unavailable')" type="warning" :closable="false" />
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+    </ProDialog>
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, h, reactive, ref, watch } from "vue";
+import { computed, h, nextTick, reactive, ref, watch } from "vue";
 import { useDebounceFn } from "@vueuse/core";
 import type { ColumnProps, HeaderActionProps, ProTableInstance } from "@liujitcn/kratos-admin-core/components/ProTable/interface";
 import ProTable from "@liujitcn/kratos-admin-core/components/ProTable";
 import ProForm from "@liujitcn/kratos-admin-core/components/ProForm/index.vue";
 import { runtimeConfigDefinitions, type RuntimeConfigModel } from "@liujitcn/kratos-admin-system/config";
-import FormDialog from "@liujitcn/kratos-admin-core/components/Dialog/FormDialog.vue";
+import ProDialog from "@liujitcn/kratos-admin-core/components/Dialog/ProDialog.vue";
 import type { ProFormField, ProFormOption, ProFormInstance } from "@liujitcn/kratos-admin-core/components/ProForm/interface";
 import DictLabel from "@liujitcn/kratos-admin-core/components/Dict/DictLabel.vue";
 import RichTextPreview from "@liujitcn/kratos-admin-core/components/RichTextPreview/index.vue";
@@ -141,7 +159,8 @@ defineOptions({
 
 const { BUTTONS } = useAuthButtons();
 const proTable = ref<ProTableInstance>();
-const formDialogRef = ref<InstanceType<typeof FormDialog>>();
+const basicFormRef = ref<ProFormInstance>();
+const activeTab = ref("basic");
 
 const saving = ref(false);
 const valueFormRef = ref<ProFormInstance>();
@@ -155,6 +174,8 @@ const localizedFormFields = computed<ProFormField[]>(() =>
     props: field.props,
     itemProps: field.itemProps,
     options: field.options,
+    colSpan: field.colSpan,
+    rowBreakBefore: field.rowBreakBefore,
     visible: field.visible,
     labelTooltip: field.labelTooltipKey ? t(field.labelTooltipKey) : undefined,
     rules: field.rules?.map(rule => ({
@@ -200,6 +221,15 @@ const formData = reactive<BaseConfigFormState>({
   value_i18ns: []
 });
 
+/** 配置类型切换后回到基础信息，避免停留在已移除的表单页签。 */
+watch(
+  () => formData.type,
+  () => {
+    activeTab.value = "basic";
+  },
+  { flush: "sync" }
+);
+
 /** 切换表单类型或编码时加载对应默认内容。 */
 watch(
   () => [formData.type, formData.key],
@@ -357,14 +387,6 @@ const formFields = computed<ProFormField[]>(() => [
     component: "dict",
     props: { code: "base_config_type", disabled: formData.id > 0 }
   },
-  {
-    prop: "formValue",
-    label: t("system.base.config.field.value"),
-    component: "slot",
-    slotName: "formValue",
-    visible: model => model.type === BaseConfigType.BASE_CONFIG_TYPE_FORM,
-    colSpan: 24
-  },
   {
     prop: "value",
     label: t("system.base.config.field.value"),
@@ -617,6 +639,7 @@ async function handleOpenDialog(configId?: number) {
       loadFormValue(formData.value);
     }
   }
+  activeTab.value = configId && formData.type === BaseConfigType.BASE_CONFIG_TYPE_FORM ? "form" : "basic";
   dialog.visible = true;
 }
 
@@ -642,8 +665,9 @@ function handleCloseDialog() {
  * 重置系统配置表单，避免新增时保留旧值。
  */
 function resetForm() {
-  formDialogRef.value?.resetFields();
-  formDialogRef.value?.clearValidate();
+  basicFormRef.value?.resetFields();
+  basicFormRef.value?.clearValidate();
+  activeTab.value = "basic";
   formData.id = 0;
   formData.site = undefined;
   formData.name = "";
@@ -661,17 +685,22 @@ function resetForm() {
  * 提交系统配置表单。
  */
 async function handleSubmit() {
+  if (formData.type === BaseConfigType.BASE_CONFIG_TYPE_BOOLEAN) {
+    formData.value = formData.value === "true" ? "true" : "false";
+  }
+  activeTab.value = "basic";
+  await nextTick();
+  if ((await basicFormRef.value?.validate()) !== true) return;
   if (formData.type === BaseConfigType.BASE_CONFIG_TYPE_FORM) {
+    activeTab.value = "form";
+    await nextTick();
     if (!formDefinition.value) {
       ElMessage.warning(t("system.base.config.message.form_unavailable"));
       return;
     }
     if ((await valueFormRef.value?.validate()) !== true) return;
     formData.value = JSON.stringify(formValue.value);
-  } else if (formData.type === BaseConfigType.BASE_CONFIG_TYPE_BOOLEAN) {
-    formData.value = formData.value === "true" ? "true" : "false";
   }
-  if ((await formDialogRef.value?.validate()) !== true) return;
   saving.value = true;
   try {
     const submitData = JSON.parse(JSON.stringify(formData)) as BaseConfigForm;
@@ -858,4 +887,26 @@ function handleDelete(selected?: number | string | Array<number | string> | Base
     width: auto !important;
   }
 }
+.config-editor-tabs :deep(.el-tabs__content) {
+  max-height: calc(92dvh - 180px);
+  overflow: auto;
+  padding: 8px 12px 0 0;
+}
+.config-editor-tabs--plain :deep(.el-tabs__header) {
+  display: none;
+}
+.config-editor-tabs--plain :deep(.el-tabs__content) {
+  max-height: calc(92dvh - 132px);
+}
+.config-editor-tabs :deep(.el-form-item) {
+  margin-bottom: 24px;
+}
+.config-editor-tabs :deep(.el-form-item__label) {
+  height: auto;
+  line-height: 1.6;
+  white-space: normal;
+}
+.config-form-value :deep(.el-input-number) {
+  width: 100%;
+}
 </style>

package/dist/package/src/views/base/migration/index.vue

@@ -28,8 +28,12 @@
           />
         </el-form-item>
         <el-form-item class="migration-filters__actions">
-          <el-button type="primary" :icon="Search" native-type="submit">{{ t("common.action.search") }}</el-button>
-          <el-button :icon="Refresh" @click="handleReset">{{ t("common.action.reset") }}</el-button>
+          <el-button type="primary" native-type="submit"
+            ><template #icon><Search /></template>{{ t("common.action.search") }}</el-button
+          >
+          <el-button @click="handleReset"
+            ><template #icon><Refresh /></template>{{ t("common.action.reset") }}</el-button
+          >
         </el-form-item>
       </el-form>
 
@@ -58,7 +62,9 @@
           </div>
 
           <div v-if="pageable.total > pageable.page_size" class="migration-pagination">
-            <span class="migration-pagination__total">{{ t("system.base.migration.message.total", { total: pageable.total }) }}</span>
+            <span class="migration-pagination__total">{{
+              t("system.base.migration.message.total", { total: pageable.total })
+            }}</span>
             <el-pagination
               background
               small
@@ -77,88 +83,56 @@
             <el-skeleton :rows="8" animated />
           </div>
           <template v-else-if="selectedMigration">
-            <header class="detail-header">
-              <div class="detail-header__title">
-                <span class="detail-header__data-source">
-                  {{ selectedMigration.module || t("system.base.migration.value.default_module") }} ·
-                  {{ selectedMigration.data_source || "default" }}
-                </span>
-                <div class="detail-header__version">
-                  <h2>{{ selectedMigration.version }}</h2>
-                </div>
-              </div>
-              <div class="detail-header__meta">
-                <time :datetime="selectedMigration.created_at">{{ selectedMigration.created_at }}</time>
-              </div>
-            </header>
-
             <div v-loading="detailLoading" class="detail-scroll">
               <template v-if="!detailLoading">
-                <section v-if="selectedMigration.description" class="detail-section">
-                  <div class="detail-section__title">
-                    <el-icon><Document /></el-icon>
-                    <span>{{ t("system.base.migration.section.description") }}</span>
-                  </div>
-                  <MarkdownPreview
-                    class="migration-markdown"
-                    :model-value="selectedMigration.description"
-                    :is-dark="globalStore.isDark"
-                    max-code-height="360px"
-                  />
-                </section>
-
-                <section v-if="selectedMigration.up_sql || selectedMigration.down_sql" class="detail-section">
-                  <div class="detail-section__title">
-                    <el-icon><Files /></el-icon>
-                    <span>{{ t("system.base.migration.section.sql") }}</span>
-                  </div>
-                  <el-collapse class="release-sql">
-                    <el-collapse-item v-if="selectedMigration.up_sql" name="up">
-                      <template #title>
-                        <span class="sql-title">
-                          <el-icon><DocumentAdd /></el-icon>
-                          <span>{{ t("system.base.migration.field.up_script") }}</span>
-                          <code>up.sql</code>
-                        </span>
-                      </template>
-                      <div class="sql-panel">
-                        <pre class="sql-code"><code>{{ selectedMigration.up_sql }}</code></pre>
-                        <el-tooltip :content="t('system.base.migration.action.copy_up_script')" placement="top">
-                          <el-button
-                            class="sql-copy"
-                            text
-                            circle
-                            :icon="CopyDocument"
-                            :aria-label="t('system.base.migration.action.copy_up_script')"
-                            @click.stop="copySql(selectedMigration.up_sql)"
-                          />
-                        </el-tooltip>
-                      </div>
-                    </el-collapse-item>
-                    <el-collapse-item v-if="selectedMigration.down_sql" name="down">
-                      <template #title>
-                        <span class="sql-title">
-                          <el-icon><DocumentRemove /></el-icon>
-                          <span>{{ t("system.base.migration.field.down_script") }}</span>
-                          <code>down.sql</code>
-                        </span>
-                      </template>
-                      <div class="sql-panel">
-                        <pre class="sql-code"><code>{{ selectedMigration.down_sql }}</code></pre>
-                        <el-tooltip :content="t('system.base.migration.action.copy_down_script')" placement="top">
+                <el-tabs v-if="hasDetailContent" v-model="activeFilePath" class="migration-file-tabs">
+                  <el-tab-pane
+                    v-for="file in selectedMigration.files"
+                    :key="file.path"
+                    :name="file.path"
+                    :label="file.path.split('/').pop()"
+                    lazy
+                  >
+                    <template v-if="activeFilePath === file.path">
+                      <div class="migration-file-path">{{ file.path }}</div>
+                      <MarkdownPreview
+                        v-if="file.path.endsWith('.md')"
+                        class="migration-markdown"
+                        :model-value="file.content"
+                        :is-dark="globalStore.isDark"
+                        max-code-height="360px"
+                      />
+                      <div v-else class="sql-panel">
+                        <pre class="sql-code"><code>{{ file.content }}</code></pre>
+                        <el-tooltip
+                          :content="
+                            t(
+                              file.path.endsWith('.down.sql')
+                                ? 'system.base.migration.action.copy_down_script'
+                                : 'system.base.migration.action.copy_up_script'
+                            )
+                          "
+                          placement="top"
+                        >
                           <el-button
                             class="sql-copy"
                             text
                             circle
-                            :icon="CopyDocument"
-                            :aria-label="t('system.base.migration.action.copy_down_script')"
-                            @click.stop="copySql(selectedMigration.down_sql)"
-                          />
+                            :aria-label="
+                              t(
+                                file.path.endsWith('.down.sql')
+                                  ? 'system.base.migration.action.copy_down_script'
+                                  : 'system.base.migration.action.copy_up_script'
+                              )
+                            "
+                            @click="copySql(file.content)"
+                            ><template #icon><CopyDocument /></template
+                          ></el-button>
                         </el-tooltip>
                       </div>
-                    </el-collapse-item>
-                  </el-collapse>
-                </section>
+                    </template>
+                  </el-tab-pane>
+                </el-tabs>
 
                 <div v-if="!hasDetailContent" class="detail-empty">
                   <el-icon><Document /></el-icon>
@@ -176,7 +150,6 @@
 
 <script setup lang="ts">
 import { computed, onMounted, reactive, ref } from "vue";
-import { CopyDocument, Document, DocumentAdd, DocumentRemove, Files, Refresh, Search } from "@element-plus/icons-vue";
 import MarkdownPreview from "@liujitcn/kratos-admin-core/components/MarkdownPreview/index.vue";
 import { useGlobalStore } from "@liujitcn/kratos-admin-core/stores/runtime";
 import { buildPageRequest } from "@liujitcn/kratos-admin-core/table";
@@ -220,6 +193,7 @@ const histories = ref<BaseMigrationListItem[]>([]);
 const selectedMigrationId = ref<number | null>(null);
 const selectedMigration = ref<BaseMigration | null>(null);
 const detailRequestToken = ref(0);
+const activeFilePath = ref("");
 const filters = reactive<MigrationFilters>({
   version: undefined,
   module: undefined,
@@ -230,9 +204,7 @@ const pageable = reactive<MigrationPageable>({
   page_size: 10,
   total: 0
 });
-const hasDetailContent = computed(() =>
-  Boolean(selectedMigration.value?.description || selectedMigration.value?.up_sql || selectedMigration.value?.down_sql)
-);
+const hasDetailContent = computed(() => Boolean(selectedMigration.value?.files.length));
 
 /**
  * 加载数据库升级历史列表。
@@ -269,6 +241,7 @@ async function loadMigrationHistory() {
 async function selectMigration(id: number) {
   selectedMigrationId.value = id;
   selectedMigration.value = null;
+  activeFilePath.value = "";
   detailLoading.value = true;
   const requestToken = detailRequestToken.value + 1;
   detailRequestToken.value = requestToken;
@@ -276,6 +249,7 @@ async function selectMigration(id: number) {
     const detail = await defBaseMigrationService.GetBaseMigration({ id });
     if (detailRequestToken.value === requestToken && selectedMigrationId.value === id) {
       selectedMigration.value = detail;
+      activeFilePath.value = detail.files[0]?.path ?? "";
     }
   } finally {
     if (detailRequestToken.value === requestToken) {
@@ -512,147 +486,69 @@ onMounted(() => {
   white-space: nowrap;
 }
 
-.detail-header {
-  display: flex;
-  flex: 0 0 auto;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 20px;
-  padding: 22px 24px 20px;
-  border-bottom: 1px solid var(--admin-page-divider);
-}
-
-.detail-header__title {
-  min-width: 0;
-}
-
-.detail-header__data-source {
-  display: block;
-  overflow: hidden;
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--admin-page-text-secondary);
-  letter-spacing: 0.04em;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.detail-header__version {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
-  align-items: center;
-  margin-top: 8px;
-}
-
-.detail-header h2 {
-  margin: 0;
-  font-size: 24px;
-  font-weight: 650;
-  line-height: 1.35;
-  overflow-wrap: anywhere;
-}
-
-.detail-header__meta {
-  display: flex;
-  flex: 0 0 auto;
-  flex-direction: column;
-  align-items: flex-end;
-  gap: 6px;
-  padding-top: 3px;
-  font-size: 12px;
-  color: var(--admin-page-text-secondary);
-  text-align: right;
-}
-
 .detail-scroll {
+  display: flex;
   flex: 1;
+  flex-direction: column;
   min-height: 0;
-  overflow-y: auto;
+  overflow: hidden;
   padding: 24px;
 }
 
-.detail-section + .detail-section {
-  margin-top: 26px;
-}
-
-.detail-section__title {
-  display: flex;
-  gap: 7px;
-  align-items: center;
-  padding-bottom: 10px;
-  margin-bottom: 16px;
-  font-size: 14px;
-  font-weight: 600;
-  color: var(--admin-page-text-primary);
-  border-bottom: 1px solid var(--admin-page-divider);
-}
-
-.detail-section__title :deep(.el-icon) {
-  color: var(--el-color-primary);
-}
-
 .migration-markdown {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
   width: 100%;
   max-width: 100%;
   overflow-wrap: anywhere;
 }
 
-.release-sql {
-  border: 1px solid var(--admin-page-card-border-soft);
-  border-radius: var(--admin-page-radius);
-}
-
-.release-sql :deep(.el-collapse) {
-  border: 0;
-}
-
-.release-sql :deep(.el-collapse-item__header) {
-  height: 46px;
-  padding: 0 14px;
-  color: var(--admin-page-text-primary);
-  background: var(--admin-page-card-bg-soft);
-  border-bottom-color: var(--admin-page-card-border-soft);
-}
-
-.release-sql :deep(.el-collapse-item__wrap) {
-  background: var(--admin-page-card-bg);
-  border-bottom-color: var(--admin-page-card-border-soft);
+.migration-file-tabs {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
 }
 
-.release-sql :deep(.el-collapse-item__content) {
-  padding: 14px;
+.migration-file-tabs :deep(.el-tabs__header) {
+  flex-shrink: 0;
 }
 
-.sql-title {
-  display: inline-flex;
-  gap: 8px;
-  align-items: center;
-  min-width: 0;
-  font-size: 13px;
-  font-weight: 600;
+.migration-file-tabs :deep(.el-tabs__content) {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
 }
 
-.sql-title :deep(.el-icon) {
-  color: var(--el-color-primary);
+.migration-file-tabs :deep(.el-tab-pane) {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
 }
 
-.sql-title code {
-  padding: 2px 6px;
-  font-size: 11px;
-  font-weight: 500;
+.migration-file-path {
+  flex-shrink: 0;
+  margin-bottom: 16px;
+  font-size: 12px;
   color: var(--admin-page-text-secondary);
-  background: var(--admin-page-card-bg-muted);
-  border-radius: var(--admin-page-radius);
+  overflow-wrap: anywhere;
 }
 
 .sql-panel {
   position: relative;
+  display: flex;
+  flex: 1;
   min-width: 0;
+  min-height: 0;
 }
 
 .sql-code {
-  max-height: 360px;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
   padding: 14px 48px 14px 16px;
   margin: 0;
   overflow: auto;
@@ -733,6 +629,7 @@ onMounted(() => {
   }
 
   .migration-detail-panel {
+    flex: 0 0 480px;
     min-height: 480px;
     border-left: 0;
   }
@@ -744,20 +641,9 @@ onMounted(() => {
     overflow-x: auto;
   }
 
-  .detail-header,
   .detail-scroll {
     padding-right: 16px;
     padding-left: 16px;
   }
-
-  .detail-header {
-    flex-direction: column;
-    gap: 10px;
-  }
-
-  .detail-header__meta {
-    align-items: flex-start;
-    text-align: left;
-  }
 }
 </style>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@liujitcn/kratos-admin-system",
   "private": false,
-  "version": "0.0.41",
+  "version": "0.0.42",
   "type": "module",
   "description": "kratos-admin system management module",
   "license": "MIT",
@@ -16,7 +16,7 @@
     "sortablejs": "^1.15.2",
     "swagger-ui-dist": "^5.32.9",
     "vue-element-plus-x": "^2.0.3",
-    "@liujitcn/kratos-admin-core": "0.0.41"
+    "@liujitcn/kratos-admin-core": "0.0.42"
   },
   "peerDependencies": {
     "@element-plus/icons-vue": "^2.3.1",