feat: dialog style

ui/src/components/COMPONENT_README.md

@@ -140,8 +140,9 @@ Admin、Chat 入口调用 `configureMarkdownEditor()` 配置本地高亮、KaTeX
 Dialog 和 Drawer 的 `show-close` 不根据 loading 或提交状态动态判断，默认保留关闭按钮；
 业务需要固定隐藏关闭按钮时，可继续使用 `:show-close="false"`。
 
-布尔 `v-model` 控制显示，默认宽度 `600`、挂载到 body、显示关闭按钮、关闭后销毁，
-禁止点击遮罩和 Escape 关闭。其余 Dialog 属性、事件通过 `$attrs` 透传。
+布尔 `v-model` 控制显示，默认宽度 `600`、水平垂直居中（`align-center`）、挂载到 body、显示关闭按钮、关闭后销毁，
+禁止点击遮罩和 Escape 关闭。调用方可通过 `:align-center="false"` 关闭垂直居中。
+其余 Dialog 属性、事件通过 `$attrs` 透传。
 提供默认、`header`、`subtitle`、`footer` 插槽；`subtitle` 不替代标题，`header` 透出原生关闭与标题参数。
 内容由 `el-scrollbar` 包裹，容器为 `px-6 dialog-content`，通过 `contentClass` 调整；
 最大高度由全局 Dialog 样式控制。

ui/src/components/business/api-key-list/index.vue

@@ -122,7 +122,7 @@ onMounted(loadApiKeys)
     <MkTable
       v-model:pagination-config="pagination"
       :data="apiKeyRows"
-      :max-table-height="480"
+      :max-table-height="425"
       @current-change="loadApiKeys"
       @size-change="loadApiKeys"
     >
@@ -190,7 +190,7 @@ onMounted(loadApiKeys)
       </el-table-column>
     </MkTable>
   </div>
-  <MkDialog v-model="createdDialogVisible" title="API Key" align-center @closed="createdApiKey = ''">
+  <MkDialog v-model="createdDialogVisible" title="API Key" @closed="createdApiKey = ''">
     <template #subtitle>请安全保存此密钥，不要泄露。</template>
     <el-input :model-value="createdApiKey" readonly>
       <template #suffix>

ui/src/components/business/folder-tree/MoveToDialog.vue

@@ -38,7 +38,7 @@ defineExpose({ close, open })
 </script>
 
 <template>
-  <MkDialog align-center v-model="visible" class="move-to-dialog" content-class="move-to-dialog__content" title="移动到" @closed="resetData">
+  <MkDialog v-model="visible" class="move-to-dialog" content-class="move-to-dialog__content" title="移动到" @closed="resetData">
     <FolderTree
       v-model="selectedTargetId"
       class="move-to-dialog__folder-tree"
@@ -50,7 +50,7 @@ defineExpose({ close, open })
 
     <template #footer>
       <el-button :disabled="loading" @click="visible = false">取消</el-button>
-      <el-button type="primary" :disabled="!canSubmit" :loading="loading" @click="handleSubmit"> 确定 </el-button>
+      <el-button type="primary" :disabled="!canSubmit" :loading="loading" @click="handleSubmit">确定</el-button>
     </template>
   </MkDialog>
 </template>

ui/src/components/business/resource-authorization-drawer/PermissionConfigDialog.vue

@@ -50,16 +50,16 @@ defineExpose({ open, close })
         <p v-if="option.description" class="mt-1 text-N500">{{ option.description }}</p>
       </el-radio>
     </el-radio-group>
-    <template v-if="isFolder">
-      <template v-if="!scopeOnly">
+    <div v-if="isFolder">
+      <div v-if="!scopeOnly">
         <el-divider class="my-4!" />
         <h6 class="mb-2">生效资源</h6>
-      </template>
+      </div>
       <el-radio-group v-model="includeChildren" class="mk-radio-group-vertical" :disabled="loading">
         <el-radio :value="false">仅当前资源</el-radio>
         <el-radio :value="true" :disabled="!canIncludeChildren">包含所有子文件夹</el-radio>
       </el-radio-group>
-    </template>
+    </div>
     <template #footer>
       <el-button plain :disabled="loading" @click="close">取消</el-button>
       <el-button type="primary" :loading="loading" :disabled="!permission" @click="handleSubmit">确认</el-button>

ui/src/components/business/select-application-dialog/index.vue

@@ -96,7 +96,7 @@ defineExpose({ open })
 </script>
 
 <template>
-  <MkDialog v-model="visible" align-center class="mk-aside-content-dialog" title="智能体" width="1200" @closed="resetData">
+  <MkDialog v-model="visible" class="mk-aside-content-dialog" title="智能体" width="1200" @closed="resetData">
     <template #header="{ titleId }">
       <div class="flex-between pr-8">
         <div class="flex-align-center gap-2">

ui/src/components/business/select-knowledge-dialog/index.vue

@@ -102,7 +102,7 @@ defineExpose({ open })
 </script>
 
 <template>
-  <MkDialog v-model="visible" align-center class="mk-aside-content-dialog" width="1200" @closed="resetData">
+  <MkDialog v-model="visible" class="mk-aside-content-dialog" width="1200" @closed="resetData">
     <template #header="{ titleId }">
       <div class="flex-between pr-8">
         <div class="flex-align-center gap-2">

ui/src/components/business/select-model/ModelParamsDialog.vue

@@ -65,7 +65,7 @@ defineExpose({ open, resetDefault })
 </script>
 
 <template>
-  <MkDialog v-model="visible" title="模型参数设置" width="600" @closed="resetData">
+  <MkDialog v-model="visible" title="模型参数设置" @closed="resetData">
     <div v-loading="loading">
       <MkDynamicsForm ref="formRef" v-model="formData" :render-data="formFields" default-item-width="100%" />
     </div>

ui/src/components/codemirror-editor/Json.vue

@@ -121,7 +121,7 @@ defineExpose({ format, validateRules })
     </el-button>
   </div>
 
-  <MkDialog v-model="dialogVisible" :title="props.title" append-to-body fullscreen>
+  <MkDialog :align-center="false" v-model="dialogVisible" :title="props.title" append-to-body fullscreen>
     <div class="mk-codemirror">
       <Codemirror v-model="dialogContent" :extensions="extensions" :tab-size="4" autofocus :style="{ height: 'calc(100dvh - 160px)' }" />
     </div>

ui/src/components/codemirror-editor/python.vue

@@ -90,7 +90,7 @@ function submitEditorDialog() {
     </el-button>
   </div>
 
-  <MkDialog v-model="dialogVisible" :title="title" append-to-body fullscreen>
+  <MkDialog :align-center="false" v-model="dialogVisible" :title="title" append-to-body fullscreen>
     <template #header="{ titleClass, titleId }">
       <div class="flex-between mr-4">
         <span :id="titleId" :class="titleClass">{{ title }}</span>

ui/src/components/global/markdown-editor/MdEditorMagnify.vue

@@ -58,7 +58,7 @@ async function submitEditorDialog() {
     </template>
   </MdEditor>
 
-  <MkDialog v-model="dialogVisible" :title="title" align-center>
+  <MkDialog v-model="dialogVisible" :title="title">
     <MdEditor
       v-model="dialogContent"
       :preview="false"

ui/src/components/global/mk-dialog/index.vue

@@ -31,6 +31,7 @@ defineSlots<{
   <el-dialog
     v-if="rendered"
     v-model="visible"
+    :align-center="true"
     :append-to-body="true"
     :close-on-click-modal="false"
     :close-on-press-escape="false"

ui/src/components/mk-dynamics-form/Demo.vue

@@ -174,7 +174,7 @@ const validateForm = async () => {
   </div>
 
   <!-- 添加/编辑字段弹窗 -->
-  <MkDialog v-model="dialogVisible" :title="isEdit ? '编辑字段' : '添加字段'" width="600px" append-to-body destroy-on-close>
+  <MkDialog :align-center="false" v-model="dialogVisible" :title="isEdit ? '编辑字段' : '添加字段'" width="600px" append-to-body destroy-on-close>
     <MkDynamicsFormConstructor ref="constructorRef" v-model="currentField" :enable-visibility="true" :left-options="visibilityFieldOptions" />
     <template #footer>
       <el-button @click="dialogVisible = false">取消</el-button>

ui/src/components/mk-dynamics-form/constructor/items/TreeSelectConstructor.vue

@@ -289,7 +289,14 @@ function removeNodeById(list: TreeNode[], targetId: string): boolean {
   </MkDialog>
 
   <!-- 编辑弹窗 -->
-  <MkDialog :close-on-click-modal="true" :close-on-press-escape="true" v-model="editDialog.visible" title="编辑" @closed="handleEditClosed">
+  <MkDialog
+    :align-center="false"
+    :close-on-click-modal="true"
+    :close-on-press-escape="true"
+    v-model="editDialog.visible"
+    title="编辑"
+    @closed="handleEditClosed"
+  >
     <el-form :model="editDialog.form" label-position="top" require-asterisk-position="right" @submit.prevent>
       <div class="flex gap-2">
         <el-form-item label="标签" required class="min-w-0 flex-1 small">

ui/src/conversation-panel/index.scss

@@ -112,7 +112,7 @@
 
 /* 用户提问容器：随内容收缩并靠右排列。 */
 .mk-conversation-question-content {
-  margin-left: auto;
-  max-width: 85%;
-  width: fit-content;
+  // margin-left: auto;
+  // max-width: 85%;
+  // width: fit-content;
 }

ui/src/layout/avatar-dropdown/AboutDialog.vue

@@ -93,7 +93,7 @@ defineExpose({ open })
 </script>
 
 <template>
-  <MkDialog align-center v-model="dialogVisible" title="关于" :close-on-click-modal="true" :close-on-press-escape="true" @closed="handleClosed">
+  <MkDialog v-model="dialogVisible" title="关于" :close-on-click-modal="true" :close-on-press-escape="true" @closed="handleClosed">
     <div v-loading="loading" class="overflow-hidden rounded-xl border">
       <div class="flex-center h-35 bg-primary/10">
         <LogoFull :height="60" class="max-w-full!" />

ui/src/layout/avatar-dropdown/ApiKeyDialog.vue

@@ -18,7 +18,7 @@ defineExpose({ open })
 </script>
 
 <template>
-  <MkDialog v-model="visible" title="API Key" width="1000" align-center>
+  <MkDialog v-model="visible" title="API Key" width="1000">
     <div class="mk-gray-card-lg mb-4 space-y-2">
       <div>API 文档</div>
       <el-input :model-value="apiDocUrl" readonly>

ui/src/layout/avatar-dropdown/ChangePasswordDialog.vue

@@ -115,7 +115,7 @@ defineExpose({ open })
       <!-- 取消修改密码 -->
       <el-button :disabled="passwordSubmitting" plain @click="dialogVisible = false">取消</el-button>
       <!-- 保存新密码 -->
-      <el-button :loading="passwordSubmitting" type="primary" @click="submitPassword"> 保存 </el-button>
+      <el-button :loading="passwordSubmitting" type="primary" @click="submitPassword">保存</el-button>
     </template>
   </MkDialog>
 </template>

ui/src/styles/element-plus.scss

@@ -458,7 +458,11 @@
     padding-top: 0;
   }
   .dialog-content {
-    max-height: calc(100vh - 272px);
+    max-height: calc(100vh - 220px);
+  }
+  // 有底部操作区时，额外扣除 footer 占用的高度
+  &:has(.el-dialog__footer) .dialog-content {
+    max-height: calc(100vh - 280px);
   }
   &.is-fullscreen {
     .dialog-content {
@@ -487,7 +491,11 @@
     .dialog-content {
       padding: 0;
       max-height: none;
-      height: calc(100vh - 180px);
+      height: calc(100vh - 190px);
+    }
+    // 有底部操作区时，额外扣除 footer 占用的高度
+    &:has(.el-dialog__footer) .dialog-content {
+      max-height: calc(100vh - 250px);
     }
     .el-dialog__footer {
       border-top: var(--el-border);
@@ -544,7 +552,7 @@
     padding: calc(var(--spacing) * 4) calc(var(--spacing) * 6);
   }
   &.btt {
-    height: calc(100% - 100px) !important;
+    height: calc(100% - 60px) !important;
   }
 }
 /* dropdown */

ui/src/views/application-detail/chat-log/add-knowledge/AddKnowledgeDialog.vue

@@ -96,10 +96,6 @@ async function handleSubmit() {
     })
 }
 
-function handleBeforeClose(done: () => void) {
-  if (!loading.value && !optionLoading.value) done()
-}
-
 function handleClosed() {
   knowledgeForm.knowledge_id = ''
   knowledgeForm.document_id = ''
@@ -118,7 +114,7 @@ defineExpose({ open })
 </script>
 
 <template>
-  <MkDialog v-model="visible" title="添加到知识库" :before-close="handleBeforeClose" @closed="handleClosed">
+  <MkDialog v-model="visible" title="添加到知识库" @closed="handleClosed">
     <el-form
       ref="formRef"
       v-loading="loading || optionLoading"

ui/src/views/application-detail/overview/api-key/ApiKeyDialog.vue

@@ -20,7 +20,7 @@ defineExpose({ open })
 </script>
 
 <template>
-  <MkDialog v-model="visible" title="API Key" width="1000" align-center>
+  <MkDialog v-model="visible" title="API Key" width="1000">
     <div class="mk-gray-card-lg mb-4 space-y-2">
       <div>Base URL</div>
       <el-input :model-value="baseUrl" readonly>

ui/src/views/application-detail/overview/display-setting/XpackDisplaySettingDialog.vue

@@ -160,7 +160,6 @@ onBeforeUnmount(releaseImagePreviews)
   <MkDialog
     v-model="visible"
     title="显示设置"
-    align-center
     class="mk-aside-content-dialog"
     body-class="border-t-0!"
     content-class="overflow-hidden"

ui/src/views/application-detail/overview/index.vue

@@ -123,7 +123,9 @@ onMounted(() => {
               <MkIcon name="icon_new-chat_outlined" />
               <span>去对话</span>
             </el-button>
+            <!-- 嵌入第三方 -->
             <ButtonEmbedThirdParty :share-url="shareUrl" :access-token="accessToken" />
+            <!-- 访问限制 -->
             <ButtonAccessRestriction />
             <!-- 显示设置 -->
             <ButtonDisplaySetting />
@@ -146,6 +148,7 @@ onMounted(() => {
               </template>
             </el-input>
           </div>
+          <!-- API Key  -->
           <ButtonApiKey />
         </div>
       </div>

ui/src/views/application-detail/setting/components/ButtonKnowledgeSetting.vue

@@ -56,7 +56,7 @@ function resetData() {
   <el-button text type="primary" @click.stop="open">
     <MkIcon name="icon_setting" />
   </el-button>
-  <MkDialog v-model="visible" title="参数设置" @closed="resetData" align-center>
+  <MkDialog v-model="visible" title="参数设置" @closed="resetData">
     <el-form ref="formRef" :model="formData" label-position="top" require-asterisk-position="right" @submit.prevent>
       <el-form-item label="检索模式">
         <!-- 选择检索模式 -->

ui/src/views/application-detail/setting/components/ButtonLongTermSetting.vue

@@ -168,7 +168,7 @@ function submit() {
   <el-button text type="primary" @click="open">
     <MkIcon name="icon_setting" />
   </el-button>
-  <MkDialog v-model="visible" title="长期记忆设置" align-center @closed="resetData">
+  <MkDialog v-model="visible" title="长期记忆设置" @closed="resetData">
     <el-form ref="formRef" :model="formData" label-position="top" require-asterisk-position="right" @submit.prevent>
       <el-form-item label="AI 模型" prop="long_term_model_id" :rules="{ required: true, message: '请选择长期记忆模型', trigger: 'change' }">
         <SelectModel

ui/src/views/application/create-application/AdvancedCreateDialog.vue

@@ -88,10 +88,6 @@ function open(template?: ApplicationStoreTemplate) {
   dialogVisible.value = true
 }
 
-function handleBeforeClose(done: () => void) {
-  if (!loading.value) done()
-}
-
 function handleClosed() {
   resetData()
   emit('closed')
@@ -109,7 +105,7 @@ defineExpose({ open })
 </script>
 
 <template>
-  <MkDialog v-model="dialogVisible" title="创建高级智能体" align-center :before-close="handleBeforeClose" @closed="handleClosed">
+  <MkDialog v-model="dialogVisible" title="创建高级智能体" @closed="handleClosed">
     <el-form
       ref="applicationFormRef"
       :model="applicationForm"

ui/src/views/application/create-application/SimpleCreateDialog.vue

@@ -97,7 +97,7 @@ defineExpose({ open })
 </script>
 
 <template>
-  <MkDialog v-model="dialogVisible" title="创建简易智能体" align-center @closed="resetData">
+  <MkDialog v-model="dialogVisible" title="创建简易智能体" @closed="resetData">
     <el-form
       ref="applicationFormRef"
       :model="applicationForm"

ui/src/views/document-detail/action-dropdown/migrate/ParagraphMigrateDialog.vue

@@ -99,10 +99,6 @@ async function handleSubmit() {
   })
 }
 
-function handleBeforeClose(done: () => void) {
-  if (!loading.value && !optionLoading.value) done()
-}
-
 function handleClosed() {
   const migratedParagraphIds = migrationSucceeded.value ? [...targetParagraphIds.value] : []
   // 关闭动画结束后通知页面，使用打开时固定的 ID，不读取当前勾选。
@@ -114,7 +110,7 @@ defineExpose({ open })
 </script>
 
 <template>
-  <MkDialog v-model="visible" title="迁移至" :before-close="handleBeforeClose" @closed="handleClosed">
+  <MkDialog v-model="visible" title="迁移至" @closed="handleClosed">
     <el-form
       ref="formRef"
       v-loading="loading || optionLoading"

ui/src/views/document-detail/paragraph-dialog/CreateParagraphDialog.vue

@@ -36,10 +36,6 @@ function close() {
   if (!loading.value) visible.value = false
 }
 
-function handleBeforeClose(done: () => void) {
-  if (!loading.value) done()
-}
-
 function handleSubmit() {
   if (loading.value) return
   void paragraphFormRef.value
@@ -72,15 +68,7 @@ defineExpose({ open, close })
 </script>
 
 <template>
-  <MkDialog
-    v-model="visible"
-    title="添加分段"
-    width="1000"
-    align-center
-    content-class="max-h-[calc(100vh-300px)]!"
-    :before-close="handleBeforeClose"
-    @closed="emit('closed')"
-  >
+  <MkDialog v-model="visible" title="添加分段" width="1000" @closed="emit('closed')">
     <div v-loading="loading" class="flex w-full gap-4">
       <ParagraphForm ref="paragraphFormRef" v-model="paragraphForm" :knowledge-id="targetKnowledgeId" />
       <!-- 关联问题 -->