diff --git a/ui/src/layout/AppLayout.vue b/ui/src/layout/AppLayout.vue
index 668fcc6b38c..a4db5e9fac9 100644
--- a/ui/src/layout/AppLayout.vue
+++ b/ui/src/layout/AppLayout.vue
@@ -7,16 +7,19 @@ import LayoutSidebar from './LayoutSidebar.vue'
 
 const route = useRoute()
 
+withDefaults(defineProps<{ preview?: boolean }>(), { preview: false })
+
 const mode = computed<LayoutMode>(() => route.meta.scope ?? 'workspace')
 </script>
 
 <template>
-  <div class="mk-layout h-screen overflow-hidden">
-    <LayoutHeader :mode="mode"> </LayoutHeader>
+  <div class="mk-layout overflow-hidden" :class="preview ? 'h-full' : 'h-screen'">
+    <LayoutHeader :mode="preview ? 'workspace' : mode" :preview="preview" />
     <div class="flex">
-      <LayoutSidebar :mode="mode" />
+      <aside v-if="preview" class="h-layout-content w-sidebar"></aside>
+      <LayoutSidebar v-else :mode="mode" />
       <main class="mk-layout__main h-layout-content w-full overflow-hidden rounded-tl-xl bg-white transition-[margin] duration-200">
-        <RouterView />
+        <RouterView v-if="!preview" />
       </main>
     </div>
   </div>
diff --git a/ui/src/layout/LayoutHeader.vue b/ui/src/layout/LayoutHeader.vue
index 3a44ed2e0c4..1633cd41375 100644
--- a/ui/src/layout/LayoutHeader.vue
+++ b/ui/src/layout/LayoutHeader.vue
@@ -7,7 +7,7 @@ import { isSystem, isWorkspace } from './utils'
 import LogoFull from '@/components/mk-logo/LogoFull.vue'
 import type { LayoutMode } from './types'
 const router = useRouter()
-const props = withDefaults(defineProps<{ mode?: LayoutMode }>(), { mode: 'workspace' })
+const props = withDefaults(defineProps<{ mode?: LayoutMode; preview?: boolean }>(), { mode: 'workspace', preview: false })
 function switchMode() {
   router.push(isWorkspace(props.mode) ? { name: 'system-home' } : { name: 'workspace-home', params: { workspaceId: 'default' } })
 }
@@ -17,7 +17,7 @@ function switchMode() {
   <header class="flex-between h-header px-6">
     <div class="flex items-center">
       <LogoFull class="h-9 shrink-0" />
-      <div class="flex items-center gap-5 ml-5">
+      <div v-if="!preview" class="flex items-center gap-5 ml-5">
         <el-divider direction="vertical" />
         <!-- 企业版: 工作空间下拉框 -->
         <HeaderWorkspaceDropdown v-if="isWorkspace(mode)" />
@@ -26,7 +26,7 @@ function switchMode() {
     </div>
 
     <div class="flex items-center gap-5">
-      <el-button class="bg-primary-gradient" round>
+      <el-button v-if="!preview" class="bg-primary-gradient" round>
         <MkIcon name="icon_launch_outlined" />
         <span>升级</span>
       </el-button>
diff --git a/ui/src/styles/element-plus.scss b/ui/src/styles/element-plus.scss
index e3db9270155..c07a40f56fc 100644
--- a/ui/src/styles/element-plus.scss
+++ b/ui/src/styles/element-plus.scss
@@ -331,10 +331,7 @@
   --el-dialog-title-font-size: 16px;
   padding: 0;
   &__header {
-    align-items: center;
-    display: flex;
-    height: 60px;
-    padding: 0 var(--el-dialog-padding-primary);
+    padding: var(--el-dialog-padding-primary);
   }
   &__headerbtn {
     right: 20px;
@@ -370,6 +367,12 @@
   }
   //  专属带侧边栏结构的dialog
   &.mk-aside-content-dialog {
+    .el-dialog__header {
+      align-items: center;
+      display: flex;
+      height: 60px;
+      padding: 0 var(--el-dialog-padding-primary);
+    }
     .el-dialog__body {
       padding: 0;
       border-top: var(--el-border);
diff --git a/ui/src/views/application/components/ApplicationCreateDropdown.vue b/ui/src/views/application/components/ApplicationCreateDropdown.vue
index e76f56ceaa7..336e8fc2b4e 100644
--- a/ui/src/views/application/components/ApplicationCreateDropdown.vue
+++ b/ui/src/views/application/components/ApplicationCreateDropdown.vue
@@ -72,7 +72,7 @@ function handleRefresh() {
           </template>
           <div class="min-w-0">
             <p class="leading-5">高级智能体</p>
-            <p class="whitespace-normal text-sm text-N500">使用低代码拖拉拽方式，灵活编排复杂逻辑、功能丰富的智能体</p>
+            <p class="text-sm text-N500">使用低代码拖拉拽方式，灵活编排复杂逻辑、功能丰富的智能体</p>
           </div>
         </MkDropdownItem>
         <el-upload ref="elUploadRef" action="#" :auto-upload="false" class="w-full" :file-list="[]" :limit="1" :on-change="handleImportCreate" :show-file-list="false">
diff --git a/ui/src/views/login/LoginView.vue b/ui/src/views/login/LoginView.vue
index fc21fcfc423..3d284fbdacb 100644
--- a/ui/src/views/login/LoginView.vue
+++ b/ui/src/views/login/LoginView.vue
@@ -15,16 +15,24 @@ const isLoading = ref(true)
 const loginConfig = ref<LoginConfig>({ default_value: LOGIN_METHOD.LOCAL, login_methods: [LOGIN_METHOD.LOCAL], max_attempts: 1 })
 const loginMode = ref<'account' | 'qr-code'>('account')
 
-const qrCodeProviders = computed(() => (loginConfig.value.login_methods ?? []).filter((method): method is QrCodeProvider => qrCodeLoginMethods.includes(method as QrCodeProvider)))
-const accountLoginMethods = computed(() => (loginConfig.value.login_methods ?? []).filter((method) => !qrCodeLoginMethods.includes(method as QrCodeProvider)))
+const qrCodeProviders = computed(() =>
+  (loginConfig.value.login_methods ?? []).filter((method): method is QrCodeProvider => qrCodeLoginMethods.includes(method as QrCodeProvider)),
+)
+const accountLoginMethods = computed(() =>
+  (loginConfig.value.login_methods ?? []).filter((method) => !qrCodeLoginMethods.includes(method as QrCodeProvider)),
+)
 const accountLoginConfig = computed<LoginConfig>(() => ({
   ...loginConfig.value,
-  default_value: qrCodeLoginMethods.includes(loginConfig.value.default_value as QrCodeProvider) ? LOGIN_METHOD.LOCAL : loginConfig.value.default_value,
+  default_value: qrCodeLoginMethods.includes(loginConfig.value.default_value as QrCodeProvider)
+    ? LOGIN_METHOD.LOCAL
+    : loginConfig.value.default_value,
   login_methods: accountLoginMethods.value,
 }))
 const qrCodeLoginConfig = computed<LoginConfig>(() => ({
   ...loginConfig.value,
-  default_value: qrCodeLoginMethods.includes(loginConfig.value.default_value as QrCodeProvider) ? loginConfig.value.default_value : LOGIN_METHOD.WECOM,
+  default_value: qrCodeLoginMethods.includes(loginConfig.value.default_value as QrCodeProvider)
+    ? loginConfig.value.default_value
+    : LOGIN_METHOD.WECOM,
   login_methods: qrCodeProviders.value,
 }))
 const showLoginModeSwitch = computed(() => accountLoginMethods.value.length > 0 && qrCodeProviders.value.length > 0)
diff --git a/ui/src/views/login/components/LoginLayout.vue b/ui/src/views/login/components/LoginLayout.vue
index 3fbf4928316..28a5028d09f 100644
--- a/ui/src/views/login/components/LoginLayout.vue
+++ b/ui/src/views/login/components/LoginLayout.vue
@@ -1,32 +1,36 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import type { ThemeInfo } from '@/api/admin/auth/types'
 import LogoFull from '@/components/mk-logo/LogoFull.vue'
-import { DEFAULT_THEME_SETTING, getThemeImg } from '@/constants'
+import { DEFAULT_THEME_COLOR, DEFAULT_THEME_SETTING, getThemeImg } from '@/constants'
 import { useStore } from '@/stores'
 import DefaultThemeAnimation from './DefaultThemeAnimation.vue'
 
 defineOptions({ name: 'LoginLayout' })
 
-withDefaults(defineProps<{ preview?: boolean }>(), { preview: false })
+const props = withDefaults(defineProps<{ preview?: boolean; themeInfo?: ThemeInfo }>(), { preview: false })
 
 defineSlots<{ default: () => unknown }>()
 
 const { theme } = useStore()
 
-const customLoginImage = computed(() => theme.themeInfo?.loginImage?.trim() ?? '')
-const showDefaultThemeAnimation = computed(() => !customLoginImage.value && theme.isDefaultTheme)
-const loginImage = computed(() => customLoginImage.value || getThemeImg(theme.themeInfo?.theme))
+const layoutThemeInfo = computed(() => props.themeInfo ?? theme.themeInfo)
+const customLoginImage = computed(() => layoutThemeInfo.value?.loginImage?.trim() ?? '')
+const isDefaultTheme = computed(() => !layoutThemeInfo.value?.theme || layoutThemeInfo.value.theme === DEFAULT_THEME_COLOR)
+const showDefaultThemeAnimation = computed(() => !props.preview && !customLoginImage.value && isDefaultTheme.value)
+const loginImage = computed(() => customLoginImage.value || getThemeImg(layoutThemeInfo.value?.theme))
 </script>
 
 <template>
-  <div class="login-layout">
+  <div class="login-layout" :class="{ 'is-preview': preview }">
     <div class="login-background"></div>
 
     <header class="login-header flex-between">
       <div class="flex items-center gap-4">
-        <LogoFull height="38" />
-        <el-divider direction="vertical" v-if="theme.themeInfo?.slogan" />
-        <span class="text-lg">{{ theme.themeInfo?.slogan || DEFAULT_THEME_SETTING.slogan }}</span>
+        <img v-if="layoutThemeInfo?.loginLogo" :src="layoutThemeInfo.loginLogo" alt="MaxKB" class="h-9.5 max-w-50 object-contain object-left" />
+        <LogoFull v-else height="38" />
+        <el-divider v-if="layoutThemeInfo?.slogan" direction="vertical" />
+        <span class="text-lg">{{ layoutThemeInfo?.slogan ?? DEFAULT_THEME_SETTING.slogan }}</span>
       </div>
     </header>
 
@@ -51,6 +55,15 @@ const loginImage = computed(() => customLoginImage.value || getThemeImg(theme.th
   min-height: 100vh;
   overflow: hidden;
   position: relative;
+
+  &.is-preview {
+    height: 100%;
+    min-height: 0;
+
+    .login-main {
+      height: 100%;
+    }
+  }
 }
 
 .login-background {
diff --git a/ui/src/views/login/modes/AccountLogin.vue b/ui/src/views/login/modes/AccountLogin.vue
index e5005e28d1d..716e6a7f9a0 100644
--- a/ui/src/views/login/modes/AccountLogin.vue
+++ b/ui/src/views/login/modes/AccountLogin.vue
@@ -19,7 +19,7 @@ interface AccountLoginForm {
 
 defineOptions({ name: 'AccountLogin' })
 
-const props = defineProps<{ loginConfig?: LoginConfig }>()
+const props = withDefaults(defineProps<{ loginConfig?: LoginConfig; preview?: boolean }>(), { preview: false })
 
 const route = useRoute()
 const router = useRouter()
@@ -50,6 +50,7 @@ const accountLoginRules = reactive<FormRules<AccountLoginForm>>({
 })
 
 const handleLogin = async () => {
+  if (props.preview) return
   if (!accountLoginFormRef.value) return
 
   await accountLoginFormRef.value.validate((valid) => {
@@ -88,6 +89,7 @@ const handleLogin = async () => {
 }
 
 const refreshCaptcha = () => {
+  if (props.preview) return
   if (loginMethod.value === LOGIN_METHOD.LDAP) return
   LoginApi.getCaptcha(accountLoginForm.username).then((res) => {
     identifyCode.value = res.captcha
@@ -95,6 +97,7 @@ const refreshCaptcha = () => {
 }
 
 const selectLoginMethod = (method: LoginMethod) => {
+  if (props.preview) return
   if (method !== LOGIN_METHOD.LOCAL && method !== LOGIN_METHOD.LDAP) {
     void redirectExternalLogin(method, true)
     return
@@ -149,6 +152,7 @@ const getExternalLoginUrl = (authType: LoginMethod): Promise<string> => {
 }
 
 onMounted(() => {
+  if (props.preview) return
   const loginMethods = accountLoginMethods.value
   if (route.query.login_mode !== 'manual') {
     const loginMethod = loginMethods[0]
@@ -160,22 +164,45 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="flex h-full flex-col">
+  <div class="account-login flex h-full flex-col" :class="{ 'is-preview': preview }">
     <div class="min-h-0 flex-1">
       <h2 class="mb-4">
         {{ loginMethod === LOGIN_METHOD.LDAP ? 'LDAP 登录' : LOGIN_METHOD_LABELS[loginMethod] }}
       </h2>
 
-      <el-form ref="accountLoginFormRef" :model="accountLoginForm" :rules="accountLoginRules" class="login-form" @submit.prevent="handleLogin" size="large">
+      <el-form
+        ref="accountLoginFormRef"
+        :model="accountLoginForm"
+        :rules="accountLoginRules"
+        :autocomplete="preview ? 'off' : undefined"
+        class="login-form"
+        size="large"
+        @submit.prevent="handleLogin"
+      >
         <el-form-item prop="username">
-          <el-input v-model="accountLoginForm.username" placeholder="请输入用户名" @blur="refreshCaptcha" />
+          <el-input
+            v-model="accountLoginForm.username"
+            :autocomplete="preview ? 'off' : 'username'"
+            :disabled="preview"
+            :readonly="preview"
+            placeholder="请输入用户名"
+            @blur="refreshCaptcha"
+          />
         </el-form-item>
         <el-form-item prop="password">
-          <el-input v-model="accountLoginForm.password" placeholder="请输入密码" show-password type="password" />
+          <el-input
+            v-model="accountLoginForm.password"
+            :autocomplete="preview ? 'new-password' : 'current-password'"
+            :disabled="preview"
+            :readonly="preview"
+            placeholder="请输入密码"
+            show-password
+            type="password"
+          />
         </el-form-item>
         <div v-if="loginMethod !== LOGIN_METHOD.LDAP && identifyCode" class="flex gap-2">
           <el-form-item prop="captcha" class="flex-1">
-            <el-input v-model="accountLoginForm.captcha" autocomplete="off" placeholder="请输入验证码" />
+            <el-input v-model="accountLoginForm.captcha" autocomplete="off" :disabled="preview" placeholder="请输入验证码" :readonly="preview" />
           </el-form-item>
           <img :src="identifyCode" alt="验证码" class="w-35 h-10 cursor-pointer border" @click="refreshCaptcha" />
         </div>
@@ -199,4 +226,10 @@ onMounted(() => {
   </div>
 </template>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.account-login.is-preview :deep(.el-input.is-disabled) {
+  .el-input__wrapper {
+    background-color: var(--el-fill-color-blank);
+  }
+}
+</style>
diff --git a/ui/src/views/system/identity/users/UserListView.vue b/ui/src/views/system/identity/users/UserListView.vue
index 2deafe5b01f..7483bf116a4 100644
--- a/ui/src/views/system/identity/users/UserListView.vue
+++ b/ui/src/views/system/identity/users/UserListView.vue
@@ -9,6 +9,7 @@ import { datetimeFormat } from '@/utils/time'
 import { LOGIN_METHOD_LABELS } from '@/constants/auth.ts'
 import WorkspaceRelationTags from '@/components/business/workspace-relation-tags/index.vue'
 import UserFromDrawer from './UserFromDrawer.vue'
+import ImportUsersDialog from './dialog/ImportUsersDialog.vue'
 import UserPwdDialog from './dialog/UserPwdDialog.vue'
 import BatchSetUserRoleDialog from './dialog/BatchSetUserRoleDialog.vue'
 
@@ -21,6 +22,13 @@ function handleOpenUserFormDrawer(systemUser?: SystemUser) {
   userFormDrawerRef.value?.open(systemUser)
 }
 
+/* 导入用户 */
+const importUsersDialogRef = ref<InstanceType<typeof ImportUsersDialog>>()
+
+function handleOpenImportUsersDialog() {
+  importUsersDialogRef.value?.open()
+}
+
 /* 列表查询相关 */
 const userTableRef = useTemplateRef('userTableRef')
 const systemUsersLoading = ref(false)
@@ -138,7 +146,7 @@ onMounted(() => loadSystemUsers())
         <h4>{{ title }}</h4>
         <div class="flex items-center">
           <MkComplexSearch :fields="searchFields" @change="handleSearchChange" />
-          <el-button plain class="ml-3">
+          <el-button plain class="ml-3" @click="handleOpenImportUsersDialog">
             <MkIcon name="icon_import_outlined" />
             <span>导入用户</span>
           </el-button>
@@ -180,14 +188,23 @@ onMounted(() => loadSystemUsers())
 
         <el-table-column v-if="auth.isEE || auth.isPE" prop="role_name" width="180" label="角色">
           <template #default="{ row }">
-            <WorkspaceRelationTags :table-render-params="{ property: '角色', value: '工作空间' }" :tags="row.role_name" :tag-workspace="row.role_workspace" />
+            <WorkspaceRelationTags
+              :table-render-params="{ property: '角色', value: '工作空间' }"
+              :tags="row.role_name"
+              :tag-workspace="row.role_workspace"
+            />
           </template>
         </el-table-column>
 
         <el-table-column prop="user_group_names" width="180" label="用户组">
           <template #default="{ row }">
             <span v-if="!row.user_group_names?.length">-</span>
-            <WorkspaceRelationTags v-else :table-render-params="{ property: '用户组', value: '工作空间' }" :tags="row.user_group_names" :tag-workspace="row.user_group_workspace" />
+            <WorkspaceRelationTags
+              v-else
+              :table-render-params="{ property: '用户组', value: '工作空间' }"
+              :tags="row.user_group_names"
+              :tag-workspace="row.user_group_workspace"
+            />
           </template>
         </el-table-column>
 
@@ -243,6 +260,7 @@ onMounted(() => loadSystemUsers())
     </template>
   </MkViewLayout>
   <UserFromDrawer ref="userFormDrawerRef" @refresh="loadSystemUsers" />
+  <ImportUsersDialog ref="importUsersDialogRef" />
   <UserPwdDialog ref="userPwdDialogRef" @refresh="loadSystemUsers(false)" />
   <BatchSetUserRoleDialog ref="batchSetUserRoleDialogRef" @refresh="loadSystemUsers(false)" />
 </template>
diff --git a/ui/src/views/system/identity/users/dialog/ImportUsersDialog.vue b/ui/src/views/system/identity/users/dialog/ImportUsersDialog.vue
new file mode 100644
index 00000000000..166ff5e6cfd
--- /dev/null
+++ b/ui/src/views/system/identity/users/dialog/ImportUsersDialog.vue
@@ -0,0 +1,208 @@
+<script setup lang="ts">
+import { computed, nextTick, reactive, ref } from 'vue'
+import type { FormInstance, FormRules, UploadFile, UploadUserFile } from 'element-plus'
+import { LOGIN_METHOD, ROLE_TYPE } from '@/api/enums'
+import type { RoleType } from '@/api/types'
+import { LOGIN_METHOD_LABELS, ROLE_TYPE_LABELS } from '@/constants'
+import { MsgInfo, MsgWarning } from '@/utils/message'
+import MkDragUpload from '@/components/mk-drag-upload/index.vue'
+
+defineOptions({ name: 'ImportUsersDialog' })
+
+const LOCAL_FILE_SOURCE = 'LOCAL_FILE' as const
+const DEFAULT_WORKSPACE_ID = 'default'
+
+type ImportUserSource =
+  | typeof LOGIN_METHOD.LDAP
+  | typeof LOGIN_METHOD.WECOM
+  | typeof LOGIN_METHOD.DINGTALK
+  | typeof LOGIN_METHOD.LARK
+  | typeof LOCAL_FILE_SOURCE
+
+interface ImportUsersForm {
+  files: UploadUserFile[]
+  role: RoleType | ''
+  source: ImportUserSource | ''
+  userGroupIds: string[]
+  workspaceId: string
+}
+
+const sourceOptions: { label: string; value: ImportUserSource }[] = [
+  { label: LOGIN_METHOD_LABELS[LOGIN_METHOD.LDAP], value: LOGIN_METHOD.LDAP },
+  { label: LOGIN_METHOD_LABELS[LOGIN_METHOD.WECOM], value: LOGIN_METHOD.WECOM },
+  { label: LOGIN_METHOD_LABELS[LOGIN_METHOD.DINGTALK], value: LOGIN_METHOD.DINGTALK },
+  { label: LOGIN_METHOD_LABELS[LOGIN_METHOD.LARK], value: LOGIN_METHOD.LARK },
+  { label: '本地文件', value: LOCAL_FILE_SOURCE },
+]
+const roleOptions: RoleType[] = [ROLE_TYPE.USER, ROLE_TYPE.WORKSPACE_MANAGE, ROLE_TYPE.ADMIN]
+const workspaceOptions = [
+  { label: '默认工作空间', value: DEFAULT_WORKSPACE_ID },
+  { label: '研发工作空间', value: 'research-and-development' },
+  { label: '营销工作空间', value: 'marketing' },
+]
+const userGroupOptions = [
+  { label: '用户组 1', value: 'user-group-1' },
+  { label: '用户组 2', value: 'user-group-2' },
+  { label: '产品组', value: 'product-group' },
+]
+
+const dialogVisible = ref(false)
+const importUsersFormRef = ref<FormInstance>()
+const dragUploadRef = ref<InstanceType<typeof MkDragUpload>>()
+const importUsersForm = reactive<ImportUsersForm>({ files: [], role: '', source: '', userGroupIds: [], workspaceId: '' })
+const isLocalFileSource = computed(() => importUsersForm.source === LOCAL_FILE_SOURCE)
+const showWorkspace = computed(() => Boolean(importUsersForm.role) && importUsersForm.role !== ROLE_TYPE.ADMIN)
+const showUserGroups = computed(() => importUsersForm.role === ROLE_TYPE.USER)
+const canImport = computed(
+  () =>
+    Boolean(importUsersForm.source) &&
+    Boolean(importUsersForm.role) &&
+    (!showWorkspace.value || Boolean(importUsersForm.workspaceId)) &&
+    (!isLocalFileSource.value || importUsersForm.files.length > 0),
+)
+
+const importUsersFormRules: FormRules<ImportUsersForm> = {
+  files: [{ required: true, type: 'array', min: 1, message: '请上传文件', trigger: 'change' }],
+  role: [{ required: true, message: '请选择角色', trigger: 'change' }],
+  source: [{ required: true, message: '请选择用户来源', trigger: 'change' }],
+  workspaceId: [{ required: true, message: '请选择工作空间', trigger: 'change' }],
+}
+
+/* 导入用户表单联动 */
+function handleSourceChange(source: ImportUserSource | '') {
+  if (source && !importUsersForm.role) {
+    importUsersForm.role = ROLE_TYPE.USER
+    importUsersForm.workspaceId = DEFAULT_WORKSPACE_ID
+  }
+  if (source !== LOCAL_FILE_SOURCE) {
+    importUsersForm.files = []
+    dragUploadRef.value?.clearFiles()
+  }
+  nextTick(() => importUsersFormRef.value?.clearValidate())
+}
+
+function handleRoleChange(role: RoleType | '') {
+  if (role === ROLE_TYPE.ADMIN) {
+    importUsersForm.workspaceId = ''
+    importUsersForm.userGroupIds = []
+  } else if (role) {
+    importUsersForm.workspaceId ||= DEFAULT_WORKSPACE_ID
+    if (role !== ROLE_TYPE.USER) importUsersForm.userGroupIds = []
+  }
+  nextTick(() => importUsersFormRef.value?.clearValidate(['role', 'workspaceId']))
+}
+
+function handleFileChange(file: UploadFile) {
+  if (!/\.xlsx?$/i.test(file.name)) {
+    importUsersForm.files = []
+    dragUploadRef.value?.clearFiles()
+    MsgWarning('仅支持上传 xlsx、xls 格式的文件')
+    return
+  }
+
+  importUsersForm.files = [file]
+  nextTick(() => importUsersFormRef.value?.validateField('files'))
+}
+
+function handleFileRemove() {
+  importUsersForm.files = []
+  nextTick(() => importUsersFormRef.value?.validateField('files'))
+}
+
+function handleDownloadTemplate() {
+  MsgInfo('下载模板将在接口接入后提供')
+}
+
+function submitImportUsers() {
+  if (!importUsersFormRef.value) return
+
+  importUsersFormRef.value.validate((valid) => {
+    if (!valid) return
+    MsgInfo('导入接口暂未接入')
+  })
+}
+
+function open() {
+  resetData()
+  dialogVisible.value = true
+}
+
+function resetData() {
+  Object.assign(importUsersForm, { files: [], role: '', source: '', userGroupIds: [], workspaceId: '' })
+  dragUploadRef.value?.clearFiles()
+  importUsersFormRef.value?.clearValidate()
+}
+
+defineExpose({ open })
+</script>
+
+<template>
+  <MkDialog v-model="dialogVisible" title="导入用户" @closed="resetData">
+    <template #subtitle>仅导入新增用户</template>
+
+    <el-form
+      ref="importUsersFormRef"
+      :model="importUsersForm"
+      :rules="importUsersFormRules"
+      label-position="top"
+      require-asterisk-position="right"
+      @submit.prevent="submitImportUsers"
+    >
+      <el-form-item label="用户来源" prop="source">
+        <el-select v-model="importUsersForm.source" placeholder="请选择" @change="handleSourceChange">
+          <el-option v-for="sourceOption in sourceOptions" :key="sourceOption.value" :label="sourceOption.label" :value="sourceOption.value" />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item v-if="isLocalFileSource" prop="files" :required="false">
+        <template #label>
+          <div class="flex-between w-full">
+            <span>上传文件<span class="ml-1 text-danger">*</span></span>
+            <el-button link type="primary" @click="handleDownloadTemplate">下载模板</el-button>
+          </div>
+        </template>
+        <MkDragUpload
+          ref="dragUploadRef"
+          v-model="importUsersForm.files"
+          accept=".xlsx,.xls"
+          tip-text="支持格式：xlsx、xls"
+          @change="handleFileChange"
+          @remove="handleFileRemove"
+        />
+      </el-form-item>
+
+      <el-form-item label="角色" prop="role">
+        <el-select v-model="importUsersForm.role" placeholder="请选择角色" @change="handleRoleChange">
+          <el-option v-for="roleOption in roleOptions" :key="roleOption" :label="ROLE_TYPE_LABELS[roleOption]" :value="roleOption" />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item v-if="showWorkspace" label="工作空间" prop="workspaceId">
+        <el-select v-model="importUsersForm.workspaceId" placeholder="请选择工作空间">
+          <el-option
+            v-for="workspaceOption in workspaceOptions"
+            :key="workspaceOption.value"
+            :label="workspaceOption.label"
+            :value="workspaceOption.value"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item v-if="showUserGroups" label="用户组" prop="userGroupIds">
+        <el-select v-model="importUsersForm.userGroupIds" multiple placeholder="请选择用户组">
+          <el-option
+            v-for="userGroupOption in userGroupOptions"
+            :key="userGroupOption.value"
+            :label="userGroupOption.label"
+            :value="userGroupOption.value"
+          />
+        </el-select>
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <el-button plain @click="dialogVisible = false">取消</el-button>
+      <el-button type="primary" :disabled="!canImport" @click="submitImportUsers">导入</el-button>
+    </template>
+  </MkDialog>
+</template>
diff --git a/ui/src/views/system/settings/theme/ThemeSettingView.vue b/ui/src/views/system/settings/theme/ThemeSettingView.vue
index d05882beb6f..8a5af37807e 100644
--- a/ui/src/views/system/settings/theme/ThemeSettingView.vue
+++ b/ui/src/views/system/settings/theme/ThemeSettingView.vue
@@ -194,7 +194,7 @@ onBeforeUnmount(() => theme.setTheme(toThemeInfo(savedThemeSetting.value)))
         <div class="flex-between">
           <h6>平台登录设置</h6>
 
-          <el-button text type="primary" class="-mt-1 -mr-1" @click="handleRestoreLoginDefaults">恢复默认</el-button>
+          <el-button text type="primary" class="-mr-1" @click="handleRestoreLoginDefaults">恢复默认</el-button>
         </div>
 
         <div class="theme-setting-grid grid gap-6">
@@ -216,10 +216,10 @@ onBeforeUnmount(() => theme.setTheme(toThemeInfo(savedThemeSetting.value)))
                   </el-button>
                 </el-upload>
               </div>
-              <p class="text-N600">{{ imageSetting.description }}</p>
+              <p class="text-sm text-N500">{{ imageSetting.description }}</p>
             </el-card>
             <el-form ref="themeFormRef" :model="themeSetting" :rules="formRules" label-position="top" require-asterisk-position="right">
-              <el-form-item label="网站名称" prop="title">
+              <el-form-item class="mb-2!" label="网站名称" prop="title">
                 <el-input v-model="themeSetting.title" maxlength="128" placeholder="请输入网站名称" show-word-limit />
               </el-form-item>
               <el-form-item label="欢迎语" prop="slogan">
@@ -227,13 +227,13 @@ onBeforeUnmount(() => theme.setTheme(toThemeInfo(savedThemeSetting.value)))
               </el-form-item>
             </el-form>
           </div>
-          <span>预览页默认为 MaxKB 登录界面，支持自定义设置</span>
+          <span class="text-N500">预览页默认为 MaxKB 登录界面，支持自定义设置</span>
         </div>
 
         <el-divider class="mb-4!" />
         <div class="flex-between">
           <h6>平台设置</h6>
-          <el-button text type="primary" class="-mt-1 -mr-1" @click="handleRestorePlatformDefaults">恢复默认</el-button>
+          <el-button text type="primary" class="-mr-1" @click="handleRestorePlatformDefaults">恢复默认</el-button>
         </div>
 
         <div class="theme-setting-grid grid gap-6">
@@ -273,7 +273,7 @@ onBeforeUnmount(() => theme.setTheme(toThemeInfo(savedThemeSetting.value)))
               />
             </div>
           </div>
-          <span>预览页默认为 MaxKB 平台界面，支持自定义设置</span>
+          <span class="text-N500">预览页默认为 MaxKB 平台界面，支持自定义设置</span>
         </div>
       </div>
 
diff --git a/ui/src/views/system/settings/theme/components/LoginPreview.vue b/ui/src/views/system/settings/theme/components/LoginPreview.vue
index 52f3a3252a9..9057e0d8cf0 100644
--- a/ui/src/views/system/settings/theme/components/LoginPreview.vue
+++ b/ui/src/views/system/settings/theme/components/LoginPreview.vue
@@ -2,10 +2,12 @@
 import { computed, onBeforeUnmount, ref, watch } from 'vue'
 import { Close } from '@element-plus/icons-vue'
 import type { ThemeInfo } from '@/api/admin/auth/types'
-import LogoFull from '@/components/mk-logo/LogoFull.vue'
+import { LOGIN_METHOD } from '@/api/enums'
+import type { LoginConfig } from '@/api/types'
 import LogoIcon from '@/components/mk-logo/LogoIcon.vue'
-
 import { getThemeImg } from '@/constants/theme'
+import LoginLayout from '@/views/login/components/LoginLayout.vue'
+import AccountLogin from '@/views/login/modes/AccountLogin.vue'
 
 type ThemeImageValue = File | string
 type ThemePreviewData = Omit<ThemeInfo, 'icon' | 'loginImage' | 'loginLogo'> & {
@@ -17,6 +19,11 @@ type ThemePreviewData = Omit<ThemeInfo, 'icon' | 'loginImage' | 'loginLogo'> & {
 defineOptions({ name: 'ThemeLoginPreview' })
 
 const props = defineProps<{ data: ThemePreviewData }>()
+const previewLoginConfig: LoginConfig = {
+  default_value: LOGIN_METHOD.LOCAL,
+  login_methods: [LOGIN_METHOD.LOCAL, LOGIN_METHOD.LDAP, LOGIN_METHOD.CAS, LOGIN_METHOD.OAUTH2, LOGIN_METHOD.OIDC],
+  max_attempts: 1,
+}
 
 function useImageSource(source: () => ThemeImageValue | undefined, fallback: () => string) {
   const imageSource = ref(fallback())
@@ -41,6 +48,10 @@ function useImageSource(source: () => ThemeImageValue | undefined, fallback: ()
 
 const defaultLoginImage = computed(() => getThemeImg(props.data.theme))
 
+const websiteIcon = useImageSource(
+  () => props.data.icon,
+  () => '',
+)
 const loginLogo = useImageSource(
   () => props.data.loginLogo,
   () => '',
@@ -49,43 +60,40 @@ const loginImage = useImageSource(
   () => props.data.loginImage,
   () => defaultLoginImage.value,
 )
+const previewThemeInfo = computed<ThemeInfo>(() => ({
+  ...props.data,
+  icon: websiteIcon.value,
+  loginImage: loginImage.value,
+  loginLogo: loginLogo.value,
+}))
 </script>
 
 <template>
   <div class="login-preview overflow-hidden rounded-md">
     <div class="browser-bar flex items-end px-2">
-      <div class="browser-tab flex items-center gap-2 rounded-t-md bg-white px-3">
-        <LogoIcon class="h-4" />
-        <span class="min-w-0 flex-1 truncate" :title="data.title || 'MaxKB'">
+      <div class="browser-tab flex items-center gap-2 rounded-t-md bg-white px-2">
+        <img v-if="websiteIcon" :src="websiteIcon" alt="" class="size-4 object-contain" />
+        <LogoIcon v-else class="h-4" />
+        <span class="min-w-0 flex-1 truncate font-semibold text-sm" :title="data.title || 'MaxKB'">
           {{ data.title || 'MaxKB' }}
         </span>
-        <el-icon :size="12"><Close /></el-icon>
+        <MkIcon name="icon_close_outlined" :size="12" />
       </div>
     </div>
 
     <div class="preview-page relative overflow-hidden">
-      <header class="preview-header flex items-center gap-3">
-        <img v-if="loginLogo" :src="loginLogo" alt="MaxKB" class="h-8 max-w-40 object-contain object-left" />
-        <LogoFull v-else class="h-8 max-w-40" />
-        <el-divider v-if="data.slogan" direction="vertical" />
-        <span class="truncate text-N600" :title="data.slogan || ''">{{ data.slogan }}</span>
-      </header>
-
-      <div class="preview-content grid h-full items-center gap-8 px-10 pt-10">
-        <img :src="loginImage" alt="" class="w-full object-contain" />
-        <el-card class="preview-login-card">
-          <h3 class="mb-6">登录</h3>
-          <el-input class="mb-4" placeholder="请输入用户名" size="large" />
-          <el-input class="mb-4" placeholder="请输入密码" size="large" type="password" />
-          <el-button class="w-full" size="large" type="primary">登录</el-button>
-          <el-button class="mt-2 !ml-0" link type="primary">忘记密码？</el-button>
-        </el-card>
+      <div class="preview-scale" inert>
+        <LoginLayout preview :theme-info="previewThemeInfo">
+          <AccountLogin preview :login-config="previewLoginConfig" />
+        </LoginLayout>
       </div>
+      <div class="preview-mask absolute inset-0" aria-hidden="true"></div>
     </div>
   </div>
 </template>
 
 <style scoped lang="scss">
+/* browser */
 .browser-bar {
   background: var(--mk-N200);
   height: 36px;
@@ -94,32 +102,22 @@ const loginImage = useImageSource(
 .browser-tab {
   height: 30px;
   max-width: 220px;
-  width: 40%;
-}
-
-.preview-content {
-  grid-template-columns: 13fr 11fr;
-  position: relative;
-  z-index: 1;
 }
 
-.preview-header {
-  left: 24px;
+/* preview */
+.preview-mask {
   position: absolute;
-  right: 24px;
-  top: 16px;
-  z-index: 2;
-}
-
-.preview-login-card {
-  --el-card-padding: 24px;
-  justify-self: end;
-  max-width: 320px;
-  width: 100%;
+  z-index: 20;
 }
 
 .preview-page {
-  background: linear-gradient(180deg, rgb(255 255 255 / 5%) 0%, rgb(var(--mk-primary-rgb) / 5%) 20%, rgb(var(--mk-primary-rgb) / 10%) 100%);
   height: 420px;
 }
+
+.preview-scale {
+  height: 840px;
+  transform: scale(0.5);
+  transform-origin: left top;
+  width: 200%;
+}
 </style>
diff --git a/ui/src/views/system/settings/theme/components/PlatformPreview.vue b/ui/src/views/system/settings/theme/components/PlatformPreview.vue
index 61bba54c265..ae1b29e12d2 100644
--- a/ui/src/views/system/settings/theme/components/PlatformPreview.vue
+++ b/ui/src/views/system/settings/theme/components/PlatformPreview.vue
@@ -1,9 +1,8 @@
 <script setup lang="ts">
 import { computed, type Component } from 'vue'
-import { ArrowRight, ChatDotRound, InfoFilled, Key, Lock, Operation, QuestionFilled } from '@element-plus/icons-vue'
+import { ArrowRight, InfoFilled, Key, Lock, Operation, QuestionFilled } from '@element-plus/icons-vue'
 import type { ThemeInfo } from '@/api/admin/auth/types'
-import avatarIcon from '@/assets/mk_icon_user_gradient.svg'
-import LogoFull from '@/components/mk-logo/LogoFull.vue'
+import AppLayout from '@/layout/AppLayout.vue'
 
 defineOptions({ name: 'ThemePlatformPreview' })
 
@@ -33,67 +32,63 @@ const platformMenuItems = computed<PreviewMenuItem[]>(() => [
 </script>
 
 <template>
-  <div class="platform-preview relative overflow-hidden rounded-xl bg-N100">
-    <header class="flex h-14 items-center px-6">
-      <LogoFull class="h-8 shrink-0" />
+  <div class="platform-preview relative overflow-hidden rounded-lg">
+    <div class="preview-scale" inert>
+      <div class="platform-page relative h-full overflow-hidden">
+        <AppLayout preview />
 
-      <div class="ml-auto flex items-center text-N600">
-        <span class="flex items-center gap-1">
-          <MkIcon :icon="ChatDotRound" />
-          门户
-        </span>
-        <el-divider class="mx-4! h-4!" direction="vertical" />
-        <span class="flex items-center gap-1">
-          <MkIcon :icon="Operation" />
-          系统管理
-        </span>
-        <span class="ml-5 flex size-9 items-center justify-center rounded-full bg-primary-gradient">
-          <img :src="avatarIcon" alt="" style="width: 54%" />
-        </span>
-      </div>
-    </header>
-
-    <div class="absolute right-0 bottom-0 left-sidebar top-14 rounded-tl-xl bg-white"></div>
-
-    <div class="absolute top-12 right-6 z-10 w-54 overflow-hidden rounded-md border bg-white shadow-md">
-      <div class="flex gap-3 p-3">
-        <span class="flex size-10 shrink-0 items-center justify-center rounded-full bg-primary-gradient">
-          <img :src="avatarIcon" alt="" style="width: 54%" />
-        </span>
-        <div class="min-w-0">
-          <h6>飞小致</h6>
-          <p class="truncate text-N600" title="feixaozhi">feixaozhi</p>
-          <span class="rounded-sm bg-primary/10 px-1 text-sm text-primary">系统管理员</span>
-        </div>
-      </div>
-
-      <div class="border-t py-1">
-        <div v-for="menuItem in accountMenuItems" :key="menuItem.label" class="flex h-8 items-center gap-2 px-3">
-          <MkIcon :icon="menuItem.icon" class="text-N600!" />
-          <span>{{ menuItem.label }}</span>
-          <MkIcon v-if="menuItem.trailingIcon" :icon="menuItem.trailingIcon" class="ml-auto text-N500!" />
-        </div>
-      </div>
-
-      <div class="border-t py-1">
-        <div v-for="menuItem in platformMenuItems" :key="menuItem.label" class="flex h-8 items-center gap-2 px-3">
-          <MkIcon :icon="menuItem.icon" :name="menuItem.iconName" class="text-N600!" />
-          <span>{{ menuItem.label }}</span>
-        </div>
-      </div>
-
-      <div class="border-t py-1">
-        <div class="flex h-8 items-center gap-2 px-3">
-          <MkIcon name="icon_logout_outlined" class="text-N600!" />
-          <span>退出登录</span>
+        <div class="absolute top-12 right-6 z-10 w-54 overflow-hidden rounded-md border bg-white shadow-md">
+          <div class="w-52">
+            <div class="flex items-center gap-3 p-3">
+              <el-avatar :size="40" class="bg-primary-gradient!">
+                <img src="@/assets/mk_icon_user_gradient.svg" alt="" style="width: 54%" />
+              </el-avatar>
+              <div class="min-w-0">
+                <h6>飞小致</h6>
+                <p class="truncate text-N600" title="feixaozhi">feixaozhi</p>
+                <el-tag type="primary">系统管理员</el-tag>
+              </div>
+            </div>
+            <div class="border-t py-1">
+              <div v-for="menuItem in accountMenuItems" :key="menuItem.label" class="flex h-8 items-center gap-2 px-3">
+                <MkIcon :icon="menuItem.icon" class="text-N600!" />
+                <span>{{ menuItem.label }}</span>
+                <MkIcon v-if="menuItem.trailingIcon" :icon="menuItem.trailingIcon" class="ml-auto text-N500!" />
+              </div>
+            </div>
+            <div class="border-t py-1">
+              <div v-for="menuItem in platformMenuItems" :key="menuItem.label" class="flex h-8 items-center gap-2 px-3">
+                <MkIcon :icon="menuItem.icon" :name="menuItem.iconName" class="text-N600!" />
+                <span>{{ menuItem.label }}</span>
+              </div>
+            </div>
+            <div class="border-t py-1">
+              <div class="flex h-8 items-center gap-2 px-3">
+                <MkIcon name="icon_logout_outlined" class="text-N600!" />
+                <span>退出登录</span>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
+    <div class="preview-mask absolute inset-0" aria-hidden="true"></div>
   </div>
 </template>
 
 <style scoped lang="scss">
 .platform-preview {
-  height: 452px;
+  height: 225px;
+}
+
+.preview-mask {
+  z-index: 20;
+}
+
+.preview-scale {
+  height: 904px;
+  transform: scale(0.5);
+  transform-origin: left top;
+  width: 200%;
 }
 </style>