diff --git a/ui/public/MaxKB.gif b/ui/public/MaxKB.gif
new file mode 100644
index 00000000000..055d49a6a11
Binary files /dev/null and b/ui/public/MaxKB.gif differ
diff --git a/ui/src/api/API_README.md b/ui/src/api/API_README.md
index 5f3ab0a8b28..b7b82d69752 100644
--- a/ui/src/api/API_README.md
+++ b/ui/src/api/API_README.md
@@ -401,7 +401,8 @@ Workspace 与 System 资源管理的 `application/application.ts` 提供 `getAcc
 Xpack 版可用登录方式统一调用 `system/chat-management/chat-user-auth.ts` 的 `getChatUserAuthType`，
 GET `/chat_user/auth/types` 返回 `{ label, value }[]`，两种智能体入口共用。
 
-展示设置共用 `ApplicationDisplaySetting`；`ApplicationAccessToken` 兼容可选展示字段，缺失字段由弹窗补齐默认值。
+社区版展示设置通过 `putAccessToken` 提交 `language`、`show_source` 与 `show_exec`，不调用 `/setting`。
+Xpack 展示设置共用 `ApplicationDisplaySetting`；`ApplicationAccessToken` 兼容可选展示字段，缺失字段由弹窗补齐默认值。
 两范围的 `putDisplaySetting` 沿用 V2 的 `/<applicationId>/setting` PUT 接口，提交 FormData：
 `custom_theme`、`float_location` 序列化为 JSON，图片字段提交本次文件，`<field>_url` 保留已有地址；
 恢复默认时图片文件与地址均提交空字符串。当前社区版后端未提供该路由，完整保存依赖支持此接口的部署。
diff --git a/ui/src/api/types/application.ts b/ui/src/api/types/application.ts
index 51eff76b6aa..8011a7b646d 100644
--- a/ui/src/api/types/application.ts
+++ b/ui/src/api/types/application.ts
@@ -31,7 +31,6 @@ export interface ApplicationDisplaySetting {
   language: string
   show_history: boolean
   draggable: boolean
-  show_guide: boolean
   show_share: boolean
   icon: string
   chat_background: string
@@ -74,6 +73,8 @@ export interface ApplicationAccessToken extends Partial<ApplicationDisplaySettin
 
 /** 智能体访问配置修改或令牌重置参数。 */
 export interface ApplicationAccessTokenPayload {
+  show_source?: boolean
+  show_exec?: boolean
   is_active?: boolean
   access_token_reset?: boolean
   access_num?: number
diff --git a/ui/src/components/COMPONENT_README.md b/ui/src/components/COMPONENT_README.md
index 5b8fd1e35ec..900b6507649 100644
--- a/ui/src/components/COMPONENT_README.md
+++ b/ui/src/components/COMPONENT_README.md
@@ -162,6 +162,8 @@ Drawer 没有 `MkDialog` 的外壳挂载控制；需要按需挂载时，由业
 `fields` 使用 `OptionItem<string>`，附加 `multiple`、`remoteMethod`。
 有 `options` 时渲染选择器，否则渲染文本输入；`remoteMethod(query)` 由调用方更新选项，组件管理加载状态。
 `change` 返回 `{ [field]: value }`，多选返回数组；清空返回 `undefined`，切换字段仅在原条件非空时通知清空。
+组合外观复用 [连体表单控件样式](../styles/STYLE_README.md#连体表单控件)，字段和条件控件的默认宽度
+分别为 104px、200px；搜索状态、远程加载和切换字段清空逻辑由组件管理。
 
 ### MkDropdown、MkDropdownMenu、MkDropdownItem
 
diff --git a/ui/src/components/global/mk-complex-search/index.vue b/ui/src/components/global/mk-complex-search/index.vue
index f6387220378..cc9d851abd2 100644
--- a/ui/src/components/global/mk-complex-search/index.vue
+++ b/ui/src/components/global/mk-complex-search/index.vue
@@ -54,16 +54,18 @@ function handleChange() {
 </script>
 
 <template>
-  <div class="mk-complex-search flex">
-    <el-select v-model="searchField" class="mk-complex-search__field w-26!" @change="handleFieldChange" :persistent="false">
+  <div class="mk-input-group">
+    <!-- 选择搜索字段 -->
+    <el-select v-model="searchField" class="mk-input-group__prepend w-26!" @change="handleFieldChange" :persistent="false">
       <el-option v-for="field in fields" :key="field.value" :label="field.label" :value="field.value" />
     </el-select>
 
+    <!-- 选择搜索条件 -->
     <el-select
       v-if="activeField?.options"
       :key="activeField.value"
       v-model="searchValue"
-      class="mk-complex-search__value w-50!"
+      class="mk-input-group__content w-50!"
       clearable
       :loading="remoteLoading"
       :multiple="activeField.multiple"
@@ -86,42 +88,15 @@ function handleChange() {
       />
     </el-select>
 
+    <!-- 输入搜索条件 -->
     <el-input
       v-else
       :key="activeField?.value"
       v-model="searchValue"
-      class="mk-complex-search__value w-50!"
+      class="mk-input-group__content w-50!"
       clearable
       placeholder="请输入"
       @change="handleChange"
     />
   </div>
 </template>
-
-<style scoped lang="scss">
-.mk-complex-search {
-  border: 1px solid var(--el-border-color);
-  border-radius: var(--el-border-radius-base);
-  &__field {
-    border-right: 1px solid var(--el-border-color);
-    :deep(.el-select__wrapper) {
-      box-shadow: none !important;
-      border-radius: var(--el-border-radius-base) 0 0 var(--el-border-radius-base);
-      min-height: 30px !important;
-    }
-  }
-
-  &__value {
-    :deep(.el-select__wrapper) {
-      box-shadow: none !important;
-      border-radius: 0 var(--el-border-radius-base) var(--el-border-radius-base) 0;
-      min-height: 30px !important;
-    }
-    --el-input-inner-height: 28px !important;
-    :deep(.el-input__wrapper) {
-      box-shadow: none !important;
-      border-radius: 0 var(--el-border-radius-base) var(--el-border-radius-base) 0;
-    }
-  }
-}
-</style>
diff --git a/ui/src/conversation-panel/components/header/debug/index.vue b/ui/src/conversation-panel/components/header/debug/index.vue
index 100bff51be9..351da6e6848 100644
--- a/ui/src/conversation-panel/components/header/debug/index.vue
+++ b/ui/src/conversation-panel/components/header/debug/index.vue
@@ -7,7 +7,7 @@ const debug = useDebugHeaderStore()
 </script>
 
 <template>
-  <header class="mk-conversation-header flex-align-center h-header shrink-0 border-b px-3">
+  <header class="mk-conversation-header flex-align-center h-header shrink-0 border-b border-N300 px-3">
     <!-- 左侧收起时才在顶部显示:展开左侧 + 新建对话 -->
     <template v-if="!leftSideOpen">
       <MkTooltip content="展开侧边栏">
diff --git a/ui/src/conversation-panel/view/debug/index.vue b/ui/src/conversation-panel/view/debug/index.vue
index 55964059fbd..ab588933f72 100644
--- a/ui/src/conversation-panel/view/debug/index.vue
+++ b/ui/src/conversation-panel/view/debug/index.vue
@@ -53,7 +53,7 @@ watch([() => bundle.list.currentChatId.value, () => bundle.list.composerResetSig
     <transition name="debug-panel">
       <div
         v-if="debug.visible.value"
-        class="workflow-debug-panel overflow-hidden border border-N300 bg-white shadow-lg"
+        class="workflow-debug-panel overflow-hidden border border-N300 bg-white shadow-lg rounded-xl"
         :class="{ expanded: debug.expanded.value }"
       >
         <ConversationLayout
@@ -81,7 +81,6 @@ watch([() => bundle.list.currentChatId.value, () => bundle.list.composerResetSig
 
 /* 调试面板定位与展开布局 */
 .workflow-debug-panel {
-  border-radius: 12px;
   bottom: calc(var(--spacing) * 3);
   height: min(calc(var(--spacing) * 170), 90vh);
   max-width: calc(100vw - var(--spacing) * 6);
diff --git a/ui/src/styles/STYLE_README.md b/ui/src/styles/STYLE_README.md
index 4eb2f0c6059..8c72753f78d 100644
--- a/ui/src/styles/STYLE_README.md
+++ b/ui/src/styles/STYLE_README.md
@@ -57,6 +57,18 @@ Element Plus 覆盖、主题变量和应用样式。Chat 入口还显式引入 E
 模板无需重复添加 `transition-colors` 或 `focus-within:border-primary`。
 生成输入区使用 `mk-input-box`，不叠加对话专属类。
 
+## 连体表单控件
+
+`app.scss` 中的 `mk-input-group` 用于默认尺寸的两段式控件组合，统一横向布局、外边框、
+分隔线和两端圆角。前段 `el-select` 添加 `mk-input-group__prepend`，后段 `el-input`、
+`el-select` 或 `el-input-number` 添加 `mk-input-group__content`；两段直接放在组合容器内，
+中间不添加间距，单位文字放在容器外。
+
+普通单行组合总高度为 32px，多选内容按需撑高。数值输入使用 `controls-position="right"`
+和 `align="left"`，加减按钮随组合内容高度贴合右侧。宽度由调用方通过工具类控制；伸缩场景
+可在组合容器和内容控件上添加 `min-w-0 flex-1`，固定宽度的前段添加 `shrink-0`。
+样式只负责组合外观，不管理值、选项、联动或搜索事件。
+
 ## 基础样式
 
 全局焦点轮廓统一在 `app.scss` 通过 `*:focus-visible { outline: none !important; }` 移除，
diff --git a/ui/src/styles/app.scss b/ui/src/styles/app.scss
index d24d581715b..c8f13f158bc 100644
--- a/ui/src/styles/app.scss
+++ b/ui/src/styles/app.scss
@@ -264,6 +264,7 @@ h6 {
   grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
 }
 
+/* input */
 /* 对话与内容生成共用的输入容器。 */
 .mk-input-box {
   background: white;
@@ -281,6 +282,56 @@ h6 {
   }
 }
 
+// 选择器与文本、选项或数值输入共用的连体组合。
+.mk-input-group {
+  border: 1px solid var(--el-border-color);
+  border-radius: var(--el-border-radius-base);
+  display: flex;
+
+  &__content {
+    &,
+    .el-input {
+      --el-input-inner-height: 28px !important;
+    }
+
+    &.el-input-number.is-controls-right {
+      .el-input-number__decrease,
+      .el-input-number__increase {
+        height: 50%;
+        right: 0;
+      }
+
+      .el-input-number__decrease {
+        bottom: 0;
+      }
+
+      .el-input-number__increase {
+        top: 0;
+      }
+    }
+
+    .el-input__wrapper,
+    .el-select__wrapper {
+      border-radius: 0 var(--el-border-radius-base) var(--el-border-radius-base) 0;
+      box-shadow: none !important;
+    }
+
+    .el-select__wrapper {
+      min-height: 30px !important;
+    }
+  }
+
+  &__prepend {
+    border-right: 1px solid var(--el-border-color);
+
+    .el-select__wrapper {
+      border-radius: var(--el-border-radius-base) 0 0 var(--el-border-radius-base);
+      box-shadow: none !important;
+      min-height: 30px !important;
+    }
+  }
+}
+
 /* link */
 .mk-link {
   color: var(--mk-primary);
diff --git a/ui/src/views/VIEW_README.md b/ui/src/views/VIEW_README.md
index c0ff09a2045..074d7edf195 100644
--- a/ui/src/views/VIEW_README.md
+++ b/ui/src/views/VIEW_README.md
@@ -348,9 +348,13 @@ View 负责路由、资源与模式、图加载、保存／发布／调试编排
   嵌入第三方弹窗接收概览已有的 Web 链接与访问凭证，不额外请求接口；按全屏、浮窗、移动端单选切换并复制代码，
   关闭后恢复全屏模式。iframe 沿用 Web 链接，移动端增加 `mode=mobile`；浮窗使用 Chat API 前缀下的
   `/embed`，携带协议、主机和访问凭证；若传入链接含查询参数则一并保留，生成 HTML 时转义属性值。无访问凭证时禁用入口。
-  显示设置每次打开通过当前范围的 Application API 查询访问配置，支持主题色、语言、五类图片、
+  显示设置入口按 `auth.isCE` 选择社区版 `DisplaySettingDialog.vue`，其他版本使用
+  `XpackDisplaySettingDialog.vue`；每次打开通过当前范围的 Application API 查询访问配置。
+  社区版只编辑语言、知识来源与执行详情，使用 `putAccessToken` 保存；Xpack 版支持主题色、语言、五类图片、
   头像与对话展示开关、浮窗位置及免责声明，本地草稿实时预览。恢复默认仅改草稿，保存成功关闭，
   失败保留输入；图片限 JPG／PNG／GIF、10 MB，替换、恢复默认、关闭及卸载时释放临时 URL。
+  预览组件位于 `display-setting/components/`，通过 Props 接收名称、展示草稿和临时图片地址，
+  在组件内部合并图片地址；临时 URL 的创建和释放由弹窗负责。
   展示配置保存协议及后端支持情况见 API 文档。
   访问限制位于本地 `access-restriction/`，入口按 `auth.isCE` 选择社区版 `AccessRestrictionDrawer.vue`，
   其他版本使用 `XpackAccessRestrictionDrawer.vue`；按需挂载，关闭动画后卸载。
diff --git a/ui/src/views/application-detail/overview/display-setting/ButtonDisplaySetting.vue b/ui/src/views/application-detail/overview/display-setting/ButtonDisplaySetting.vue
index e3839218776..3afab0448bc 100644
--- a/ui/src/views/application-detail/overview/display-setting/ButtonDisplaySetting.vue
+++ b/ui/src/views/application-detail/overview/display-setting/ButtonDisplaySetting.vue
@@ -1,9 +1,13 @@
 <script setup lang="ts">
-import { useTemplateRef } from 'vue'
+import { computed, useTemplateRef } from 'vue'
+import { useStore } from '@/stores/admin'
 import DisplaySettingDialog from './DisplaySettingDialog.vue'
+import XpackDisplaySettingDialog from './XpackDisplaySettingDialog.vue'
 
 defineOptions({ name: 'ButtonDisplaySetting' })
 
+const { auth } = useStore()
+const displaySettingDialog = computed(() => (auth.isCE ? DisplaySettingDialog : XpackDisplaySettingDialog))
 const dialogRef = useTemplateRef<InstanceType<typeof DisplaySettingDialog>>('dialogRef')
 
 function handleOpenDisplaySetting() {
@@ -17,5 +21,5 @@ function handleOpenDisplaySetting() {
     <MkIcon name="icon_setting" />
     <span>显示设置</span>
   </el-button>
-  <DisplaySettingDialog ref="dialogRef" />
+  <component :is="displaySettingDialog" ref="dialogRef" />
 </template>
diff --git a/ui/src/views/application-detail/overview/display-setting/DisplaySettingDialog.vue b/ui/src/views/application-detail/overview/display-setting/DisplaySettingDialog.vue
index edb1c13bfb7..7b6428d5511 100644
--- a/ui/src/views/application-detail/overview/display-setting/DisplaySettingDialog.vue
+++ b/ui/src/views/application-detail/overview/display-setting/DisplaySettingDialog.vue
@@ -1,332 +1,97 @@
 <script setup lang="ts">
-import { computed, onBeforeUnmount, ref } from 'vue'
-import type { CSSProperties } from 'vue'
-import type { UploadFile } from 'element-plus'
-import { ChatDotRound, Clock, Close, Expand, Promotion, Refresh, User } from '@element-plus/icons-vue'
-import { cloneDeep } from 'lodash'
+import { ref } from 'vue'
 import type { ApplicationDisplaySetting } from '@/api/types'
-import { MsgError, MsgSuccess } from '@/utils/message'
+import { MsgSuccess } from '@/utils/message'
 import { useApplicationDetailContext } from '../../context'
 
 defineOptions({ name: 'DisplaySettingDialog' })
 
-const { application, applicationId, resourceApi } = useApplicationDetailContext()
-const visible = ref(false)
-const loading = ref(false)
-const saving = ref(false)
-const loaded = ref(false)
+const { applicationId, resourceApi } = useApplicationDetailContext()
+// 社区版仅编辑语言、知识来源与执行详情。
+type DisplaySettingForm = Pick<ApplicationDisplaySetting, 'language' | 'show_source' | 'show_exec'>
 
-// 展示草稿与恢复默认；只在保存时提交，取消不回写配置。
-const defaultSetting: ApplicationDisplaySetting = {
-  show_source: false,
-  show_exec: false,
-  language: '',
-  show_history: true,
-  draggable: true,
-  show_guide: true,
-  show_share: true,
-  icon: '',
-  chat_background: '',
-  avatar: '',
-  float_icon: '',
-  user_avatar: '',
-  disclaimer: false,
-  disclaimer_value: '「以上内容均由 AI 生成，仅供参考和借鉴」',
-  custom_theme: { theme_color: '', header_font_color: '#1f2329' },
-  float_location: { x: { type: 'right', value: 0 }, y: { type: 'bottom', value: 30 } },
-  show_avatar: true,
-  show_user_avatar: false,
-}
-const displayForm = ref(cloneDeep(defaultSetting))
-const imageFields = [
-  { key: 'icon', label: '智能体 LOGO' },
-  { key: 'chat_background', label: '聊天背景' },
-  { key: 'avatar', label: 'AI 回复头像', visibility: 'show_avatar' },
-  { key: 'user_avatar', label: '提问用户头像', visibility: 'show_user_avatar' },
-  { key: 'float_icon', label: '浮窗入口图标' },
-] as const
-
-type ImageField = (typeof imageFields)[number]['key']
-const imageFiles = ref<Partial<Record<ImageField, File>>>({})
-const imagePreviews = ref<Partial<Record<ImageField, string>>>({})
-const displayOptions = [
-  { key: 'show_source', label: '显示知识来源' },
-  { key: 'show_exec', label: '显示执行详情' },
-  { key: 'show_history', label: '显示历史记录' },
-  { key: 'show_guide', label: '显示引导图（浮窗模式）' },
-  { key: 'show_share', label: '允许分享对话记录' },
-  { key: 'disclaimer', label: '免责声明' },
-] as const
 const languageOptions = [
   { value: 'zh-CN', label: '简体中文' },
   { value: 'zh-Hant', label: '繁體中文' },
   { value: 'en-US', label: 'English' },
 ]
 
+// 打开时查询本次配置，关闭动画结束后统一清理草稿。
+const visible = ref(false)
+const loading = ref(false)
+const displayForm = ref<DisplaySettingForm>({
+  show_source: false,
+  show_exec: false,
+  language: '',
+})
+
+function open() {
+  visible.value = true
+  return loadSetting()
+}
+
 function loadSetting() {
-  if (loading.value || saving.value) return
+  if (loading.value) return
   loading.value = true
   return resourceApi.application
     .getAccessToken(applicationId.value)
     .then((config) => {
-      // 老版本和社区版可能省略展示字段，嵌套配置分别补齐默认值。
-      const setting = cloneDeep(defaultSetting)
-      for (const key of Object.keys(setting) as (keyof ApplicationDisplaySetting)[]) {
-        if (config[key] != null) Object.assign(setting, { [key]: cloneDeep(config[key]) })
+      displayForm.value = {
+        show_source: config.show_source ?? false,
+        show_exec: config.show_exec ?? false,
+        language: config.language ?? '',
       }
-      setting.custom_theme = { ...defaultSetting.custom_theme, ...config.custom_theme }
-      setting.float_location = {
-        x: { ...defaultSetting.float_location.x, ...config.float_location?.x },
-        y: { ...defaultSetting.float_location.y, ...config.float_location?.y },
-      }
-      displayForm.value = setting
-      loaded.value = true
     })
     .finally(() => {
       loading.value = false
     })
 }
 
-function open() {
-  visible.value = true
-  return loadSetting()
-}
-
-// 图片只在本地预览；替换、恢复默认和关闭时释放临时 URL。
-function releaseImagePreviews() {
-  Object.values(imagePreviews.value).forEach((url) => URL.revokeObjectURL(url))
-  imagePreviews.value = {}
-  imageFiles.value = {}
-}
-
-function handleImageChange(file: UploadFile, field: ImageField) {
-  const image = file.raw
-  if (!image) return
-  if (!['image/jpeg', 'image/png', 'image/gif'].includes(image.type)) {
-    MsgError('仅支持 JPG、PNG、GIF 格式的图片')
-    return
-  }
-  if (image.size > 10 * 1024 * 1024) {
-    MsgError('图片大小不能超过 10 MB')
-    return
-  }
-  const previousPreview = imagePreviews.value[field]
-  if (previousPreview) URL.revokeObjectURL(previousPreview)
-  imageFiles.value[field] = image
-  imagePreviews.value[field] = URL.createObjectURL(image)
-  displayForm.value[field] = ''
-}
-
-function handleRestoreDefault() {
-  releaseImagePreviews()
-  displayForm.value = cloneDeep(defaultSetting)
-}
-
 function handleClosed() {
-  releaseImagePreviews()
-  displayForm.value = cloneDeep(defaultSetting)
-  loaded.value = false
+  displayForm.value = {
+    show_source: false,
+    show_exec: false,
+    language: '',
+  }
 }
 
-onBeforeUnmount(releaseImagePreviews)
-
-// 对照 V2 协议提交文件、已有图片 URL 和嵌套 JSON，失败保留当前草稿。
+// 保存成功关闭，失败保留输入；重复提交由入口保护。
 function handleSave() {
-  if (!loaded.value || loading.value || saving.value) return
-  const payload = new FormData()
-  const imageKeys = imageFields.map((field) => field.key)
-  for (const [key, value] of Object.entries(displayForm.value)) {
-    if (imageKeys.includes(key as ImageField)) {
-      const field = key as ImageField
-      payload.append(field, imageFiles.value[field] ?? '')
-      payload.append(`${field}_url`, value as string)
-    } else {
-      payload.append(key, typeof value === 'object' ? JSON.stringify(value) : String(value ?? ''))
-    }
-  }
-  saving.value = true
+  loading.value = true
   return resourceApi.application
-    .putDisplaySetting(applicationId.value, payload)
+    .putAccessToken(applicationId.value, displayForm.value)
     .then(() => {
       MsgSuccess('设置成功')
       visible.value = false
     })
     .finally(() => {
-      saving.value = false
+      loading.value = false
     })
 }
 
-// 预览使用本地草稿，不发送实际对话请求。
-const previewImages = computed(
-  () => Object.fromEntries(imageFields.map(({ key }) => [key, imagePreviews.value[key] || displayForm.value[key]])) as Record<ImageField, string>,
-)
-const previewHeaderStyle = computed<CSSProperties>(() => ({
-  backgroundColor: displayForm.value.custom_theme.theme_color || undefined,
-  color: displayForm.value.custom_theme.header_font_color || undefined,
-}))
-const floatingIconStyle = computed<CSSProperties>(() => {
-  const { x, y } = displayForm.value.float_location
-  return {
-    [x.type]: `clamp(0px, ${x.value}px, calc(100% - 40px))`,
-    [y.type]: `clamp(0px, ${y.value}px, calc(100% - 40px))`,
-  }
-})
-
 defineExpose({ open })
 </script>
 
 <template>
-  <MkDialog v-model="visible" title="显示设置" align-center class="mk-aside-content-dialog" :width="1000" @closed="handleClosed">
-    <div v-loading="loading" class="min-h-60">
-      <div v-if="loaded" class="grid gap-6 grid-cols-2" :inert="saving">
-        <div class="relative">
-          <div class="flex-column h-full overflow-hidden rounded-xl border border-N200 bg-white shadow-lg">
-            <div class="flex-between gap-3 border-b border-N200 bg-N100 px-4 py-3" :style="previewHeaderStyle">
-              <div class="flex-align-center min-w-0 gap-2">
-                <ApplicationIcon :icon="previewImages.icon" :size="28" />
-                <h6 class="truncate" :title="application?.name || '智能体名称'">{{ application?.name || '智能体名称' }}</h6>
-              </div>
-              <div class="flex-align-center gap-3">
-                <MkIcon v-if="displayForm.show_history" :icon="Clock" />
-                <MkIcon :icon="Expand" />
-                <MkIcon :icon="Close" />
-              </div>
-            </div>
-            <div
-              class="flex-column flex-1 gap-4 bg-cover bg-center p-4"
-              :style="{ backgroundImage: previewImages.chat_background ? `url(${JSON.stringify(previewImages.chat_background)})` : undefined }"
-            >
-              <div class="flex gap-2">
-                <ApplicationIcon v-if="displayForm.show_avatar" :icon="previewImages.avatar" :size="28" class="shrink-0" />
-                <div class="min-w-0 space-y-2">
-                  <div class="mk-gray-card">你好，我是你的 AI 助手，有什么可以帮你？</div>
-                  <span v-if="displayForm.show_source" class="text-sm text-N600">知识来源 · 示例文档</span>
-                  <span v-if="displayForm.show_exec" class="block text-sm text-N600">执行详情 · 已完成</span>
-                </div>
-              </div>
-              <div class="flex justify-end gap-2">
-                <div class="mk-gray-card h-fit">你好，介绍一下你的功能。</div>
-                <el-avatar v-if="displayForm.show_user_avatar" :src="previewImages.user_avatar || undefined" :size="28" class="shrink-0">
-                  <MkIcon :icon="User" />
-                </el-avatar>
-              </div>
-              <div class="mt-auto space-y-2">
-                <div v-if="displayForm.show_share" class="flex justify-end text-N600"><MkIcon :icon="Promotion" /></div>
-                <div class="rounded-xl border border-N200 bg-white p-3 text-N600">请输入问题…</div>
-                <p v-if="displayForm.disclaimer" class="wrap-anywhere text-center text-sm text-N600">{{ displayForm.disclaimer_value }}</p>
-              </div>
-            </div>
-          </div>
-          <div class="absolute" :style="floatingIconStyle">
-            <div
-              v-if="displayForm.show_guide"
-              class="absolute right-0 bottom-12 w-max rounded-lg border border-N200 bg-white px-3 py-1 text-sm shadow-sm"
-            >
-              你好，有什么可以帮你？
-            </div>
-            <el-avatar :src="previewImages.float_icon || undefined" :size="40" class="bg-primary! text-white!">
-              <MkIcon :icon="ChatDotRound" :size="24" />
-            </el-avatar>
-          </div>
-        </div>
-        <div>
-          <el-scrollbar max-height="568px">
-            <el-form :model="displayForm" label-position="top" class="pr-3" @submit.prevent>
-              <div class="grid grid-cols-2 gap-4">
-                <el-form-item label="自定义主题色">
-                  <div class="flex-align-center gap-2">
-                    <el-color-picker v-model="displayForm.custom_theme.theme_color" />
-                    <span v-if="!displayForm.custom_theme.theme_color" class="text-N600">默认</span>
-                  </div>
-                </el-form-item>
-                <el-form-item label="头部标题字体颜色"><el-color-picker v-model="displayForm.custom_theme.header_font_color" /></el-form-item>
-              </div>
-              <el-form-item label="语言">
-                <el-select v-model="displayForm.language" clearable placeholder="跟随系统">
-                  <el-option v-for="language in languageOptions" :key="language.value" :label="language.label" :value="language.value" />
-                </el-select>
-              </el-form-item>
-              <div class="space-y-3">
-                <template v-for="field in imageFields" :key="field.key">
-                  <div class="rounded-lg border border-N200 p-3">
-                    <div class="flex-between gap-3">
-                      <h6>{{ field.label }}</h6>
-                      <div class="flex-align-center gap-3">
-                        <el-checkbox v-if="'visibility' in field" v-model="displayForm[field.visibility]">显示</el-checkbox>
-                        <!-- 替换当前展示图片 -->
-                        <el-upload
-                          action="#"
-                          :auto-upload="false"
-                          :show-file-list="false"
-                          accept="image/jpeg,image/png,image/gif"
-                          :on-change="(file: UploadFile) => handleImageChange(file, field.key)"
-                        >
-                          <el-button size="small">替换</el-button>
-                        </el-upload>
-                      </div>
-                    </div>
-                    <p class="mt-2 text-sm text-N600">
-                      {{ field.key === 'chat_background' ? '' : '建议尺寸 32 × 32，' }}支持 JPG、PNG、GIF，大小不超过 10 MB
-                    </p>
-                    <div v-if="field.key === 'float_icon'" class="mt-3 border-t border-N200 pt-3">
-                      <div class="flex-between mb-2">
-                        <span>图标默认位置</span>
-                        <el-checkbox v-model="displayForm.draggable">可拖拽位置</el-checkbox>
-                      </div>
-                      <div class="grid grid-cols-2 gap-3">
-                        <div class="flex-align-center gap-1">
-                          <el-select v-model="displayForm.float_location.x.type" class="w-17! shrink-0">
-                            <el-option label="左" value="left" />
-                            <el-option label="右" value="right" />
-                          </el-select>
-                          <el-input-number
-                            v-model="displayForm.float_location.x.value"
-                            class="min-w-0! w-full!"
-                            :min="0"
-                            :precision="0"
-                            :value-on-clear="0"
-                            controls-position="right"
-                            align="left"
-                          />
-                          <span>px</span>
-                        </div>
-                        <div class="flex-align-center gap-1">
-                          <el-select v-model="displayForm.float_location.y.type" class="w-17! shrink-0">
-                            <el-option label="上" value="top" />
-                            <el-option label="下" value="bottom" />
-                          </el-select>
-                          <el-input-number
-                            v-model="displayForm.float_location.y.value"
-                            class="min-w-0! w-full!"
-                            :min="0"
-                            :precision="0"
-                            :value-on-clear="0"
-                            controls-position="right"
-                            align="left"
-                          />
-                          <span>px</span>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </template>
-              </div>
-              <div class="mt-3 flex-column items-start">
-                <el-checkbox v-for="option in displayOptions" :key="option.key" v-model="displayForm[option.key]">{{ option.label }}</el-checkbox>
-                <el-input v-if="displayForm.disclaimer" v-model="displayForm.disclaimer_value" :maxlength="128" placeholder="请输入免责声明" />
-              </div>
-            </el-form>
-          </el-scrollbar>
-          <el-button link :disabled="!loaded || loading || saving" @click="handleRestoreDefault">
-            <MkIcon :icon="Refresh" />
-            <span>恢复默认</span>
-          </el-button>
-          <!-- 取消展示设置 -->
-          <el-button :disabled="loading || saving" @click="visible = false">取消</el-button>
-          <!-- 保存展示设置 -->
-          <el-button type="primary" :loading="saving" :disabled="!loaded || loading" @click="handleSave">保存</el-button>
+  <MkDialog v-model="visible" title="显示设置" @closed="handleClosed">
+    <div v-loading="loading">
+      <el-form :model="displayForm" label-position="top" require-asterisk-position="right" @submit.prevent>
+        <el-form-item label="语言">
+          <el-select v-model="displayForm.language" clearable placeholder="请选择">
+            <el-option v-for="language in languageOptions" :key="language.value" :label="language.label" :value="language.value" />
+          </el-select>
+        </el-form-item>
+        <div class="flex-column gap-3">
+          <el-checkbox v-model="displayForm.show_source">显示知识来源</el-checkbox>
+          <el-checkbox v-model="displayForm.show_exec">显示执行详情</el-checkbox>
         </div>
-      </div>
+      </el-form>
     </div>
+    <template #footer>
+      <!-- 取消展示设置 -->
+      <el-button plain :disabled="loading" @click="visible = false">取消</el-button>
+      <!-- 保存社区版展示设置 -->
+      <el-button type="primary" :loading="loading" @click="handleSave">保存</el-button>
+    </template>
   </MkDialog>
 </template>
diff --git a/ui/src/views/application-detail/overview/display-setting/XpackDisplaySettingDialog.vue b/ui/src/views/application-detail/overview/display-setting/XpackDisplaySettingDialog.vue
new file mode 100644
index 00000000000..8fcb700124b
--- /dev/null
+++ b/ui/src/views/application-detail/overview/display-setting/XpackDisplaySettingDialog.vue
@@ -0,0 +1,296 @@
+<script setup lang="ts">
+import { onBeforeUnmount, ref } from 'vue'
+import type { UploadFile } from 'element-plus'
+import { cloneDeep } from 'lodash'
+import type { ApplicationDisplaySetting } from '@/api/types'
+import { MsgError, MsgSuccess } from '@/utils/message'
+import { useApplicationDetailContext } from '../../context'
+import DisplaySettingPreview from './components/DisplaySettingPreview.vue'
+
+defineOptions({ name: 'XpackDisplaySettingDialog' })
+
+const { application, applicationId, resourceApi } = useApplicationDetailContext()
+const visible = ref(false)
+const loading = ref(false)
+
+// 展示草稿与恢复默认；只在保存时提交，取消不回写配置。
+const defaultSetting: ApplicationDisplaySetting = {
+  show_source: false,
+  show_exec: false,
+  language: '',
+  show_history: true,
+  draggable: true,
+  show_share: true,
+  icon: '',
+  chat_background: '',
+  avatar: '',
+  float_icon: '',
+  user_avatar: '',
+  disclaimer: false,
+  disclaimer_value: '「以上内容均由 AI 生成，仅供参考和借鉴」',
+  custom_theme: { theme_color: '', header_font_color: '#1f2329' },
+  float_location: { x: { type: 'right', value: 0 }, y: { type: 'bottom', value: 30 } },
+  show_avatar: true,
+  show_user_avatar: false,
+}
+const displayForm = ref<ApplicationDisplaySetting>(cloneDeep(defaultSetting))
+type ImageField = 'icon' | 'chat_background' | 'avatar' | 'user_avatar' | 'float_icon'
+const imageFields: {
+  key: ImageField
+  label: string
+  visibility?: 'show_avatar' | 'show_user_avatar'
+}[] = [
+  { key: 'icon', label: '智能体 LOGO' },
+  { key: 'chat_background', label: '聊天背景' },
+  { key: 'avatar', label: 'AI 回复头像', visibility: 'show_avatar' },
+  { key: 'user_avatar', label: '提问用户头像', visibility: 'show_user_avatar' },
+  { key: 'float_icon', label: '浮窗入口图标' },
+]
+
+const imageFiles = ref<Partial<Record<ImageField, File>>>({})
+const imagePreviews = ref<Partial<Record<ImageField, string>>>({})
+const displayOptions = [
+  { key: 'show_source', label: '显示知识来源' },
+  { key: 'show_exec', label: '显示执行详情' },
+  { key: 'show_history', label: '显示历史记录' },
+  { key: 'show_share', label: '允许分享对话记录' },
+  { key: 'disclaimer', label: '免责声明' },
+] as const
+const languageOptions = [
+  { value: 'zh-CN', label: '简体中文' },
+  { value: 'zh-Hant', label: '繁體中文' },
+  { value: 'en-US', label: 'English' },
+]
+
+function loadSetting() {
+  if (loading.value) return
+  loading.value = true
+  return resourceApi.application
+    .getAccessToken(applicationId.value)
+    .then((config) => {
+      // 旧版接口可能省略展示字段，嵌套配置分别补齐默认值。
+      const setting = cloneDeep(defaultSetting)
+      for (const key of Object.keys(setting) as (keyof ApplicationDisplaySetting)[]) {
+        if (config[key] != null) Object.assign(setting, { [key]: cloneDeep(config[key]) })
+      }
+      setting.custom_theme = { ...defaultSetting.custom_theme, ...config.custom_theme }
+      setting.float_location = {
+        x: { ...defaultSetting.float_location.x, ...config.float_location?.x },
+        y: { ...defaultSetting.float_location.y, ...config.float_location?.y },
+      }
+      displayForm.value = setting
+    })
+    .finally(() => {
+      loading.value = false
+    })
+}
+
+function open() {
+  visible.value = true
+  return loadSetting()
+}
+
+// 图片只在本地预览；替换、恢复默认和关闭时释放临时 URL。
+function releaseImagePreviews() {
+  Object.values(imagePreviews.value).forEach((url) => URL.revokeObjectURL(url))
+  imagePreviews.value = {}
+  imageFiles.value = {}
+}
+
+function handleImageChange(file: UploadFile, field: ImageField) {
+  const image = file.raw
+  if (!image || loading.value) return
+  if (!['image/jpeg', 'image/png', 'image/gif'].includes(image.type)) {
+    MsgError('仅支持 JPG、PNG、GIF 格式的图片')
+    return
+  }
+  if (image.size > 10 * 1024 * 1024) {
+    MsgError('图片大小不能超过 10 MB')
+    return
+  }
+  const previousPreview = imagePreviews.value[field]
+  if (previousPreview) URL.revokeObjectURL(previousPreview)
+  imageFiles.value[field] = image
+  imagePreviews.value[field] = URL.createObjectURL(image)
+  displayForm.value[field] = ''
+}
+
+function handleRestoreDefault() {
+  if (loading.value) return
+  releaseImagePreviews()
+  displayForm.value = cloneDeep(defaultSetting)
+}
+
+function handleClosed() {
+  releaseImagePreviews()
+  displayForm.value = cloneDeep(defaultSetting)
+}
+
+// 对照 V2 协议提交文件、已有图片 URL 和嵌套 JSON，失败保留当前草稿。
+function handleSave() {
+  if (loading.value) return
+  const payload = new FormData()
+  const imageKeys = imageFields.map((field) => field.key)
+  for (const [key, value] of Object.entries(displayForm.value)) {
+    if (imageKeys.includes(key as ImageField)) {
+      const field = key as ImageField
+      payload.append(field, imageFiles.value[field] ?? '')
+      payload.append(`${field}_url`, value as string)
+    } else {
+      payload.append(key, typeof value === 'object' ? JSON.stringify(value) : String(value ?? ''))
+    }
+  }
+  loading.value = true
+  return resourceApi.application
+    .putDisplaySetting(applicationId.value, payload)
+    .then(() => {
+      MsgSuccess('设置成功')
+      visible.value = false
+    })
+    .finally(() => {
+      loading.value = false
+    })
+}
+
+defineExpose({ open })
+onBeforeUnmount(releaseImagePreviews)
+</script>
+
+<template>
+  <MkDialog
+    v-model="visible"
+    title="显示设置"
+    align-center
+    class="mk-aside-content-dialog"
+    body-class="border-t-0!"
+    content-class="overflow-hidden"
+    :width="1000"
+    @closed="handleClosed"
+  >
+    <div v-loading="loading" class="h-full p-6 pt-0">
+      <div class="grid h-full grid-cols-2 gap-6">
+        <section class="min-h-0 min-w-0">
+          <DisplaySettingPreview :application-name="application?.name" :setting="displayForm" :image-previews="imagePreviews" />
+        </section>
+        <section class="flex-column min-h-0 min-w-0">
+          <el-scrollbar class="min-h-0 flex-1 -mr-6" view-class="pr-6">
+            <el-form :model="displayForm" label-position="top" require-asterisk-position="right" @submit.prevent>
+              <div class="grid grid-cols-2 gap-4">
+                <el-form-item label="自定义主题色">
+                  <el-color-picker v-model="displayForm.custom_theme.theme_color" />
+                </el-form-item>
+                <el-form-item label="头部标题字体颜色"><el-color-picker v-model="displayForm.custom_theme.header_font_color" /></el-form-item>
+              </div>
+              <el-form-item label="语言">
+                <el-select v-model="displayForm.language" clearable placeholder="请选择">
+                  <el-option v-for="language in languageOptions" :key="language.value" :label="language.label" :value="language.value" />
+                </el-select>
+              </el-form-item>
+              <div class="space-y-2">
+                <template v-for="field in imageFields" :key="field.key">
+                  <el-card class="small" shadow="never" style="--el-card-padding: 12px">
+                    <div class="flex-between mb-2">
+                      <span>{{ field.label }}</span>
+                      <div class="flex-align-center gap-3">
+                        <!-- 切换头像显示 -->
+                        <el-checkbox v-if="field.visibility" v-model="displayForm[field.visibility]">显示</el-checkbox>
+                        <!-- 替换当前展示图片 -->
+                        <el-upload
+                          action="#"
+                          :auto-upload="false"
+                          :show-file-list="false"
+                          accept="image/jpeg,image/png,image/gif"
+                          :on-change="(file: UploadFile) => handleImageChange(file, field.key)"
+                        >
+                          <el-button plain class="shrink-0 min-w-7.5! w-7.5!">
+                            <MkIcon name="icon_upload_outlined" :size="14" />
+                          </el-button>
+                        </el-upload>
+                      </div>
+                    </div>
+                    <p class="text-sm text-N500">
+                      {{ field.key === 'chat_background' ? '' : '建议尺寸 24*24，' }}支持 JPG、PNG、GIF，大小不超过 10 MB
+                    </p>
+                    <div v-if="field.key === 'float_icon'">
+                      <el-divider class="my-3!" />
+                      <div class="flex-between mb-2">
+                        <span>图标默认位置</span>
+                        <el-checkbox v-model="displayForm.draggable">可拖拽位置</el-checkbox>
+                      </div>
+                      <div class="grid grid-cols-2 gap-4">
+                        <div class="flex-align-center gap-2">
+                          <div class="mk-input-group min-w-0 flex-1">
+                            <!-- 选择横向定位方向 -->
+                            <el-select v-model="displayForm.float_location.x.type" class="mk-input-group__prepend w-15! shrink-0">
+                              <el-option label="左" value="left" />
+                              <el-option label="右" value="right" />
+                            </el-select>
+                            <!-- 设置横向偏移量 -->
+                            <el-input-number
+                              v-model="displayForm.float_location.x.value"
+                              class="mk-input-group__content min-w-0 flex-1"
+                              :min="0"
+                              :step="1"
+                              :precision="0"
+                              :value-on-clear="0"
+                              step-strictly
+                              controls-position="right"
+                              align="left"
+                            />
+                          </div>
+                          <span>px</span>
+                        </div>
+                        <div class="flex-align-center gap-1">
+                          <div class="mk-input-group min-w-0 flex-1">
+                            <!-- 选择纵向定位方向 -->
+                            <el-select v-model="displayForm.float_location.y.type" class="mk-input-group__prepend w-15! shrink-0">
+                              <el-option label="上" value="top" />
+                              <el-option label="下" value="bottom" />
+                            </el-select>
+                            <!-- 设置纵向偏移量 -->
+                            <el-input-number
+                              v-model="displayForm.float_location.y.value"
+                              class="mk-input-group__content min-w-0 flex-1"
+                              :min="0"
+                              :step="1"
+                              :precision="0"
+                              :value-on-clear="0"
+                              step-strictly
+                              controls-position="right"
+                              align="left"
+                            />
+                          </div>
+                          <span>px</span>
+                        </div>
+                      </div>
+                    </div>
+                  </el-card>
+                </template>
+              </div>
+              <div class="mt-3 flex-column gap-2">
+                <el-checkbox v-for="option in displayOptions" :key="option.key" v-model="displayForm[option.key]">{{ option.label }}</el-checkbox>
+                <div v-if="displayForm.disclaimer" class="ml-6">
+                  <el-input v-model="displayForm.disclaimer_value" :maxlength="128" placeholder="请输入免责声明" show-word-limit />
+                </div>
+              </div>
+            </el-form>
+          </el-scrollbar>
+          <footer>
+            <div class="flex-between shrink-0 pt-6">
+              <!-- 恢复默认展示配置 -->
+              <el-button plain :disabled="loading" @click="handleRestoreDefault">
+                <span>恢复默认</span>
+              </el-button>
+              <div class="flex-align-center">
+                <!-- 取消展示设置 -->
+                <el-button plain :disabled="loading" @click="visible = false">取消</el-button>
+                <!-- 保存展示设置 -->
+                <el-button type="primary" :loading="loading" @click="handleSave">保存</el-button>
+              </div>
+            </div>
+          </footer>
+        </section>
+      </div>
+    </div>
+  </MkDialog>
+</template>
diff --git a/ui/src/views/application-detail/overview/display-setting/components/DisplaySettingPreview.vue b/ui/src/views/application-detail/overview/display-setting/components/DisplaySettingPreview.vue
new file mode 100644
index 00000000000..50ca6507336
--- /dev/null
+++ b/ui/src/views/application-detail/overview/display-setting/components/DisplaySettingPreview.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { CSSProperties } from 'vue'
+import type { ApplicationDisplaySetting } from '@/api/types'
+
+defineOptions({ name: 'DisplaySettingPreview' })
+
+const props = withDefaults(
+  defineProps<{
+    applicationName?: string
+    setting: ApplicationDisplaySetting
+    imagePreviews: Partial<Pick<ApplicationDisplaySetting, 'icon' | 'chat_background' | 'avatar' | 'user_avatar' | 'float_icon'>>
+  }>(),
+  { applicationName: '智能体名称' },
+)
+
+// 本次替换的图片优先展示，否则使用草稿中的已有地址。
+const previewImages = computed(() => ({
+  icon: props.imagePreviews.icon || props.setting.icon,
+  chat_background: props.imagePreviews.chat_background || props.setting.chat_background,
+  avatar: props.imagePreviews.avatar || props.setting.avatar,
+  user_avatar: props.imagePreviews.user_avatar || props.setting.user_avatar,
+  float_icon: props.imagePreviews.float_icon || props.setting.float_icon,
+}))
+
+// 仅展示配置草稿，不修改表单或发送对话请求。
+const previewHeaderStyle = computed<CSSProperties>(() => ({
+  background: `color-mix(in srgb, ${props.setting.custom_theme.theme_color || '#3370ff'} 5%, var(--mk-N100))`,
+  color: props.setting.custom_theme.header_font_color || undefined,
+}))
+</script>
+
+<template>
+  <div class="mk-gray-card-lg flex h-full items-end gap-2 overflow-hidden">
+    <div class="flex-column h-full min-w-0 flex-1 overflow-hidden border border-N300 bg-white shadow-lg rounded-xl">
+      <header class="flex-between h-header shrink-0 gap-4 border-b border-N300 p-4" :style="previewHeaderStyle">
+        <div class="flex-align-center min-w-0 flex-1 gap-2">
+          <MkIcon name="icon_sidebar_outlined" :size="18" class="mr-2 shrink-0" />
+          <ApplicationIcon :icon="previewImages.icon" :size="24" class="shrink-0" />
+          <h6 class="truncate" :title="applicationName">{{ applicationName }}</h6>
+        </div>
+        <div class="flex-align-center shrink-0 gap-4">
+          <MkIcon name="icon_new-chat_outlined" :size="18" />
+          <MkIcon name="icon_close_outlined" :size="18" />
+        </div>
+      </header>
+      <div
+        class="flex-column flex-1 bg-cover bg-center p-4"
+        :style="{ backgroundImage: previewImages.chat_background ? `url(${JSON.stringify(previewImages.chat_background)})` : undefined }"
+      >
+        <div class="space-y-3">
+          <ApplicationIcon v-if="setting.show_avatar" :icon="previewImages.avatar" :size="24" />
+
+          <div class="h-3.5 rounded bg-N100"></div>
+          <div class="h-3.5 rounded bg-N100"></div>
+          <div class="h-3.5 w-1/2 rounded bg-N100"></div>
+        </div>
+        <div class="mt-8 flex-column items-end gap-3">
+          <div v-if="setting.show_user_avatar" class="flex">
+            <el-avatar v-if="previewImages.user_avatar" class="bg-transparent!" shape="square" :size="24">
+              <img :src="previewImages.user_avatar" alt="" />
+            </el-avatar>
+            <el-avatar v-else :size="24" :style="{ background: setting.custom_theme.theme_color || 'var(--mk-primary-gradient)' }">
+              <img src="@/assets/mk_icon_user_gradient.svg" alt="" style="width: 50%" />
+            </el-avatar>
+          </div>
+
+          <div class="h-8.5 w-2/3 rounded-xl bg-N100"></div>
+        </div>
+        <div class="mt-auto space-y-2">
+          <div class="mk-input-box flex h-23 items-end justify-end border border-N350/60 shadow-lg">
+            <!-- 预览发送按钮 -->
+            <el-button circle disabled type="primary">
+              <MkIcon name="icon_arrow-up_outlined" :size="18" />
+            </el-button>
+          </div>
+          <p v-if="setting.disclaimer" class="wrap-anywhere text-center text-sm text-N500 -mb-1">{{ setting.disclaimer_value }}</p>
+        </div>
+      </div>
+    </div>
+    <!-- 浮窗图标 -->
+    <img :src="previewImages.float_icon || '/MaxKB.gif'" alt="" class="size-8 shrink-0 object-contain" />
+  </div>
+</template>
diff --git a/ui/src/views/application-detail/overview/index.vue b/ui/src/views/application-detail/overview/index.vue
index e6a7ee006d3..9c0d1048be8 100644
--- a/ui/src/views/application-detail/overview/index.vue
+++ b/ui/src/views/application-detail/overview/index.vue
@@ -125,7 +125,8 @@ onMounted(() => {
             </el-button>
             <ButtonEmbedThirdParty :share-url="shareUrl" :access-token="accessToken" />
             <ButtonAccessRestriction />
-            <!-- <ButtonDisplaySetting /> -->
+            <!-- 显示设置 -->
+            <ButtonDisplaySetting />
           </div>
         </div>
         <div class="mk-gray-card-lg space-y-4">
diff --git a/ui/src/views/system/settings/theme/index.vue b/ui/src/views/system/settings/theme/index.vue
index 9f7d18604ae..3727c9cc2bf 100644
--- a/ui/src/views/system/settings/theme/index.vue
+++ b/ui/src/views/system/settings/theme/index.vue
@@ -203,7 +203,13 @@ onBeforeUnmount(() => theme.setTheme(toThemeInfo(savedThemeSetting.value)))
           <LoginPreview :data="themeSetting" />
 
           <div class="space-y-2">
-            <el-card v-for="imageSetting in THEME_IMAGE_SETTINGS" :key="imageSetting.field" class="small" shadow="never">
+            <el-card
+              v-for="imageSetting in THEME_IMAGE_SETTINGS"
+              :key="imageSetting.field"
+              class="small"
+              shadow="never"
+              style="--el-card-padding: 12px"
+            >
               <div class="flex-between mb-2">
                 <span>{{ imageSetting.label }}</span>
                 <el-upload
@@ -213,8 +219,8 @@ onBeforeUnmount(() => theme.setTheme(toThemeInfo(savedThemeSetting.value)))
                   :on-change="handleUploadImage(imageSetting.field)"
                   :show-file-list="false"
                 >
-                  <el-button plain class="shrink-0 min-w-8! w-8!">
-                    <MkIcon name="icon_upload_outlined" />
+                  <el-button plain class="shrink-0 min-w-7.5! w-7.5!">
+                    <MkIcon name="icon_upload_outlined" :size="14" />
                   </el-button>
                 </el-upload>
               </div>
@@ -242,7 +248,7 @@ onBeforeUnmount(() => theme.setTheme(toThemeInfo(savedThemeSetting.value)))
         <div class="grid grid-cols-[2fr_1fr] gap-6">
           <PlatformPreview :data="themeSetting" />
 
-          <div class="flex-column gap-3">
+          <div class="flex-column gap-2">
             <el-checkbox v-model="themeSetting.showUserManual" label="用户手册" />
             <div class="ml-6">
               <el-input