From c8431a6c51e8263861df22a633088a5cbcd01b06 Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Tue, 11 Aug 2026 19:52:53 +0800
Subject: [PATCH] feat: email setting

---
 ui/src/assets/empty/no-data.svg               |  10 +
 ui/src/assets/empty/no-search-results.svg     |  14 ++
 ui/src/components.d.ts                        |   2 +
 ui/src/components/COMPONENT_README.md         |  44 +++-
 ui/src/components/global/mk-empty/index.vue   |  58 +++++
 ui/src/components/global/mk-table/index.vue   |   8 +
 .../global/mk-view-layout/index.vue           |  40 +--
 .../global/mk-view-layout/layout-main.ts      |  95 +++++++
 ui/src/components/mk-search-list/index.vue    |   4 +-
 .../chat/user-groups/GroupsListView.vue       | 120 ++++-----
 .../views/system/chat/users/UserListView.vue  | 212 ++++++++--------
 .../system/identity/groups/GroupsListView.vue | 129 +++++-----
 .../system/identity/users/UserListView.vue    | 236 +++++++++---------
 .../identity/workspaces/WorkspaceListView.vue | 109 ++++----
 .../AuthenticationSettingsView.vue            |   2 +-
 .../settings/email/EmailSettingsView.vue      |  63 ++---
 16 files changed, 694 insertions(+), 452 deletions(-)
 create mode 100644 ui/src/assets/empty/no-data.svg
 create mode 100644 ui/src/assets/empty/no-search-results.svg
 create mode 100644 ui/src/components/global/mk-empty/index.vue
 create mode 100644 ui/src/components/global/mk-view-layout/layout-main.ts

diff --git a/ui/src/assets/empty/no-data.svg b/ui/src/assets/empty/no-data.svg
new file mode 100644
index 00000000000..640d89d0845
--- /dev/null
+++ b/ui/src/assets/empty/no-data.svg
@@ -0,0 +1,10 @@
+<svg width="125" height="125" viewBox="0 0 125 125" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M28.5863 39.614C29.6565 38.7427 30.9944 38.2669 32.3745 38.2669L110.422 38.2669L94.1639 51.5038H13.9824L28.5863 39.614Z" fill="#B5BEC8"/>
+<path d="M12.0908 54.5591C12.0908 52.3499 13.8817 50.5591 16.0908 50.5591H92.3484C93.453 50.5591 94.3484 51.4545 94.3484 52.5591V108.016C94.3484 110.225 92.5576 112.016 90.3484 112.016H16.0908C13.8817 112.016 12.0908 110.225 12.0908 108.016V54.5591Z" fill="#E7EBED"/>
+<path opacity="0.476586" fill-rule="evenodd" clip-rule="evenodd" d="M95.8794 49.0793L108.891 38.6891C109.737 38.014 110.422 38.1646 110.422 39.0255V97.4762C110.422 98.337 109.737 99.5822 108.891 100.257L95.8794 110.647C95.034 111.322 94.3486 111.172 94.3486 110.311V51.8603C94.3486 50.9995 95.034 49.7544 95.8794 49.0793Z" fill="#B5BEC8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M109.229 37.5267L93.844 51.3482L100.954 62.6662C102.24 64.7129 105.033 65.1605 106.894 63.618L116.604 55.5693C118.158 54.2807 118.509 52.0356 117.421 50.3346L109.229 37.5267Z" fill="#E4E9F0"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.9557 51.4116C11.8302 51.5488 11.7397 51.713 11.6704 51.8856L5.51787 67.1951C5.44854 67.3677 5.35106 67.527 5.25204 67.6844C4.78528 68.4262 4.97703 68.9952 5.74261 68.9952L83.4331 68.9952C84.2039 68.9952 85.2895 68.4184 85.9749 67.6691C86.1004 67.5319 86.1909 67.3677 86.2602 67.1951L92.4127 51.8856C92.482 51.713 92.5795 51.5537 92.6785 51.3963C93.1453 50.6545 92.9535 50.0854 92.1879 50.0854L14.4975 50.0854C13.7267 50.0854 12.6411 50.6623 11.9557 51.4116Z" fill="#F4F5F9"/>
+<path d="M43.2386 12.1324L51.2189 28.5292L50.3687 28.9429L42.3885 12.5462L43.2386 12.1324Z" fill="#050B3C"/>
+<path d="M61.3906 12.5871L61.7703 25.5877L60.8252 25.6153L60.4456 12.6147L61.3906 12.5871Z" fill="#050B3C"/>
+<path d="M76.5825 19.2878L71.5186 28.6486L70.687 28.1987L75.7509 18.8379L76.5825 19.2878Z" fill="#050B3C"/>
+</svg>
diff --git a/ui/src/assets/empty/no-search-results.svg b/ui/src/assets/empty/no-search-results.svg
new file mode 100644
index 00000000000..3bdf1a4b34b
--- /dev/null
+++ b/ui/src/assets/empty/no-search-results.svg
@@ -0,0 +1,14 @@
+<svg width="125" height="125" viewBox="0 0 125 125" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M29.7978 13.9996H102.202C105.404 13.9996 108 16.5805 108 19.7643V83.9428L83.275 109.467H29.7978C26.5957 109.467 24 106.886 24 103.702V19.7643C24 16.5805 26.5957 13.9996 29.7978 13.9996Z" fill="#D6DAE1"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M83.2749 109.426V85.8232C83.2749 84.762 84.1401 83.9017 85.2075 83.9017H108L83.2749 109.426Z" fill="#B5BEC8"/>
+<rect x="75.6875" y="21.9993" width="25" height="32" rx="2" fill="#F4F5F9"/>
+<rect x="31.6001" y="22.0541" width="32.25" height="5" rx="1" fill="#F4F5F9"/>
+<rect x="31.6001" y="31.6409" width="32.25" height="5" rx="1" fill="#F4F5F9"/>
+<rect x="31.6001" y="41.6409" width="16.125" height="5" rx="1" fill="#F4F5F9"/>
+<rect x="31.6001" y="68.9231" width="68.8" height="5" rx="1" fill="#F4F5F9"/>
+<rect x="31.6001" y="76.3802" width="68.8" height="5" rx="1" fill="#F4F5F9"/>
+<path d="M49.7161 54.14C61.1568 54.1401 70.4309 63.4609 70.4309 74.9583C70.4308 81.2431 67.659 86.8767 63.2776 90.6937L73.9055 106.631L68.3538 110.371L57.5833 94.22C55.1574 95.2217 52.5013 95.7757 49.7161 95.7757C38.2753 95.7757 29.0004 86.4557 29.0002 74.9583C29.0002 63.4608 38.2752 54.14 49.7161 54.14ZM49.7161 60.8558C41.9658 60.8558 35.6829 67.1697 35.6829 74.9583C35.6829 82.7469 41.9658 89.0609 49.7161 89.0609C57.4662 89.0607 63.7493 82.7468 63.7493 74.9583C63.7492 67.1698 57.4662 60.8559 49.7161 60.8558Z" fill="white"/>
+<path d="M24.6083 59.9895L24.1889 60.9687L14.9748 57.0168L15.3942 56.0376L24.6083 59.9895Z" fill="#1F2329"/>
+<path d="M29.6257 56.576L28.8071 57.2577L20.8806 47.7333L21.6992 47.0517L29.6257 56.576Z" fill="#1F2329"/>
+<path d="M24.7771 65.6534L24.8153 66.7194L12.1962 67.1489L12.158 66.0829L24.7771 65.6534Z" fill="#1F2329"/>
+</svg>
diff --git a/ui/src/components.d.ts b/ui/src/components.d.ts
index cad1841edc6..82916575ca6 100644
--- a/ui/src/components.d.ts
+++ b/ui/src/components.d.ts
@@ -19,6 +19,7 @@ declare module 'vue' {
     MkDropdown: typeof import('./components/global/mk-dropdown/index.vue')['default']
     MkDropdownItem: typeof import('./components/global/mk-dropdown/mk-dropdown-item.vue')['default']
     MkDropdownMenu: typeof import('./components/global/mk-dropdown/mk-dropdown-menu.vue')['default']
+    MkEmpty: typeof import('./components/global/mk-empty/index.vue')['default']
     MkFilterableDropdown: typeof import('./components/global/mk-filterable-dropdown/index.vue')['default']
     MkIcon: typeof import('./components/global/mk-icon/index.vue')['default']
     MkSearchInput: typeof import('./components/global/mk-search-input/index.vue')['default']
@@ -40,6 +41,7 @@ declare global {
   const MkDropdown: typeof import('./components/global/mk-dropdown/index.vue')['default']
   const MkDropdownItem: typeof import('./components/global/mk-dropdown/mk-dropdown-item.vue')['default']
   const MkDropdownMenu: typeof import('./components/global/mk-dropdown/mk-dropdown-menu.vue')['default']
+  const MkEmpty: typeof import('./components/global/mk-empty/index.vue')['default']
   const MkFilterableDropdown: typeof import('./components/global/mk-filterable-dropdown/index.vue')['default']
   const MkIcon: typeof import('./components/global/mk-icon/index.vue')['default']
   const MkSearchInput: typeof import('./components/global/mk-search-input/index.vue')['default']
diff --git a/ui/src/components/COMPONENT_README.md b/ui/src/components/COMPONENT_README.md
index ae3ef99dc91..91007544242 100644
--- a/ui/src/components/COMPONENT_README.md
+++ b/ui/src/components/COMPONENT_README.md
@@ -43,13 +43,16 @@ src/components/
 │   │   └── mk-dropdown-item.vue  # 菜单项布局和选中状态
 │   ├── mk-drawer/
 │   │   └── index.vue             # 统一抽屉关闭行为和内容滚动布局
+│   ├── mk-empty/
+│   │   └── index.vue             # 普通无数据与搜索无匹配的统一空状态
 │   ├── mk-filterable-dropdown/
 │   │   └── index.vue             # 带搜索过滤和滚动列表的下拉选择
 │   ├── mk-icon/
 │   │   └── index.vue             # SVG Symbol 与 Element Plus 图标统一入口
 │   ├── mk-view-layout/
 │   │   ├── index.vue             # 路由页面标题、操作区和内容区统一结构
-│   │   └── layout-aside.vue      # 页面可选左侧栏结构
+│   │   ├── layout-aside.vue      # 页面可选左侧栏结构
+│   │   └── layout-main.ts        # 右侧标题标记提取与滚动内容渲染
 │   ├── mk-search-input/
 │   │   └── index.vue             # 带默认搜索图标的输入框
 │   ├── mk-status-label/
@@ -115,6 +118,17 @@ Element Plus 使用 `ElOnlyChild` 处理浮层触发器。`el-tooltip`、`el-pop
 
 ## 自动注册组件
 
+### MkEmpty
+
+全局空状态组件，基于 `el-empty` 统一图片和默认文案。`type` 默认为 `default`，展示“暂无数据”；
+搜索无匹配时使用 `type="search"`。可通过 `description`、`image`、`image-size` 覆盖默认内容，
+其余 Element Plus Empty 属性通过 `$attrs` 透传，默认、`image` 和 `description` 插槽保持可用。
+
+```vue
+<MkEmpty />
+<MkEmpty type="search" />
+```
+
 ### MkDialog
 
 全局对话框组件，统一使用 `el-scrollbar` 包裹内容并为默认插槽提供 `p-6` 内边距。默认显示关闭
@@ -237,15 +251,17 @@ Element Plus Dropdown 属性和事件通过 `$attrs` 传入，并暴露 `handleO
 
 ### MkViewLayout
 
-路由页面的通用内容结构，统一提供满高弹性布局、可选左侧栏、右侧标题栏和滚动内容区。标题优先
-使用 `title` Prop，未传入时读取当前路由的 `meta.title`。不传 `header` 插槽时自动渲染标题；需要
-标题右侧操作或其他自定义结构时，使用 `header` 作用域插槽完整渲染，并从插槽参数取得解析后的
-`title`。传入 `aside` 插槽后才会渲染左侧栏；左右结构上方的独立内容放入 `top` 插槽。
-`aside` 作用域插槽提供 `title` 和已经包含左侧标题栏样式的 `Header` 动态组件，左侧标题与内容
-可以集中写在同一个插槽中。
+路由页面的通用内容结构，统一提供满高弹性布局及可选左侧栏。标题优先使用 `title` Prop，未传入
+时读取当前路由的 `meta.title`。`aside` 和默认作用域插槽都提供 `title` 与对应区域的 `Header`
+标记组件。默认插槽中的 `Header` 会由布局提取到右侧滚动区上方，其余节点统一放入
+`el-scrollbar`；页面因此可以在同一个插槽中组织标题、内容和空状态，并只写一次业务状态判断。
+传入 `aside` 插槽后才会渲染左侧栏；左右结构上方的独立内容放入 `top` 插槽。页面加载状态通过
+`loading` Prop 传入，由组件将 Element Plus Loading 遮罩绑定到整个布局根节点。默认插槽没有
+声明作用域参数时会自动显示当前标题；使用 `#default="{ Header }"` 后则由页面通过
+`<component :is="Header">` 控制标题，空状态分支不会自动补充标题。
 
 ```vue
-<MkViewLayout>
+<MkViewLayout :loading="loading">
   <template #aside="{ title, Header }">
     <component :is="Header">
       <h4>{{ title }}</h4>
@@ -253,11 +269,15 @@ Element Plus Dropdown 属性和事件通过 `$attrs` 传入，并暴露 `handleO
     </component>
     左侧列表
   </template>
-  <template #header="{ title }">
-    <h4>{{ title }}</h4>
-    <el-button type="primary">创建</el-button>
+  <template #default="{ title, Header }">
+    <template v-if="selectedItem">
+      <component :is="Header">
+        <h4>{{ title }}</h4>
+      </component>
+      右侧内容
+    </template>
+    <MkEmpty v-else />
   </template>
-  右侧内容
 </MkViewLayout>
 ```
 
diff --git a/ui/src/components/global/mk-empty/index.vue b/ui/src/components/global/mk-empty/index.vue
new file mode 100644
index 00000000000..30d96c4e5af
--- /dev/null
+++ b/ui/src/components/global/mk-empty/index.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import noDataImage from '@/assets/empty/no-data.svg'
+import noSearchResultsImage from '@/assets/empty/no-search-results.svg'
+
+defineOptions({ name: 'MkEmpty', inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    description?: string
+    image?: string
+    imageSize?: number
+    type?: 'default' | 'search' | ''
+  }>(),
+  {
+    imageSize: 125,
+    type: 'default',
+  },
+)
+
+defineSlots<{
+  default(): unknown
+  description(): unknown
+  image(): unknown
+}>()
+
+const emptyState = computed(() => {
+  if (props.type === 'search') {
+    return {
+      description: '没有找到相关内容',
+      image: noSearchResultsImage,
+    }
+  }
+
+  return {
+    description: '暂无数据',
+    image: noDataImage,
+  }
+})
+</script>
+
+<template>
+  <el-empty
+    v-bind="$attrs"
+    :description="props.description ?? emptyState.description"
+    :image="props.image ?? emptyState.image"
+    :image-size="props.imageSize"
+  >
+    <template v-if="$slots.image" #image>
+      <slot name="image" />
+    </template>
+    <template v-if="$slots.description" #description>
+      <slot name="description" />
+    </template>
+    <template v-if="$slots.default" #default>
+      <slot />
+    </template>
+  </el-empty>
+</template>
diff --git a/ui/src/components/global/mk-table/index.vue b/ui/src/components/global/mk-table/index.vue
index df20667c6b6..43121c7a8c4 100644
--- a/ui/src/components/global/mk-table/index.vue
+++ b/ui/src/components/global/mk-table/index.vue
@@ -19,6 +19,7 @@ const props = withDefaults(
     maxTableHeight?: number
     paginationConfig?: PaginationConfig
     resizable?: boolean
+    search?: boolean
   }>(),
   {
     data: () => [],
@@ -149,7 +150,13 @@ defineExpose({ clearSelection, tableRef })
 </script>
 
 <template>
+  <MkEmpty
+    v-if="!props.paginationConfig?.total"
+    :type="search ? 'search' : ''"
+    class="flex-1"
+  />
   <div
+    v-else
     ref="tableRootRef"
     class="mk-table relative w-full"
     @mouseleave="clearResizeHover"
@@ -167,6 +174,7 @@ defineExpose({ clearSelection, tableRef })
     >
       <slot />
     </el-table>
+
     <div
       v-if="props.resizable && resizeHoverStyle"
       class="mk-table__resize-hover-indicator"
diff --git a/ui/src/components/global/mk-view-layout/index.vue b/ui/src/components/global/mk-view-layout/index.vue
index bcf782a9d18..467a24d5a2a 100644
--- a/ui/src/components/global/mk-view-layout/index.vue
+++ b/ui/src/components/global/mk-view-layout/index.vue
@@ -1,27 +1,37 @@
 <script setup lang="ts">
-import type { FunctionalComponent } from 'vue'
+import type { Component, FunctionalComponent } from 'vue'
 import { useRoute } from 'vue-router'
 import LayoutAside from './layout-aside.vue'
+import LayoutMain from './layout-main'
 
 defineOptions({ name: 'MkViewLayout', inheritAttrs: false })
 
-const props = defineProps<{
-  title?: string
-}>()
+const props = withDefaults(
+  defineProps<{
+    loading?: boolean
+    title?: string
+  }>(),
+  {
+    loading: false,
+  },
+)
 
 defineSlots<{
   aside?: (props: { Header: FunctionalComponent; title: string }) => unknown
-  default?: () => unknown
-  header?: (props: { title: string }) => unknown
+  default?: (props: { Header: Component; title: string }) => unknown
   top?: () => unknown
 }>()
 
 const route = useRoute()
 const title = computed(() => props.title || route.meta.title || '')
+const slots = useSlots()
+const fallbackTitle = computed(() =>
+  !slots.default || slots.default.length === 0 ? title.value : '',
+)
 </script>
 
 <template>
-  <div class="flex h-full min-h-0 flex-col" v-bind="$attrs">
+  <div v-loading="props.loading" class="flex h-full min-h-0 flex-col" v-bind="$attrs">
     <div v-if="$slots.top" class="shrink-0 border-b px-4 py-3">
       <slot name="top" />
     </div>
@@ -33,17 +43,11 @@ const title = computed(() => props.title || route.meta.title || '')
         </template>
       </LayoutAside>
 
-      <main class="flex min-w-0 flex-1 flex-col px-6">
-        <header class="flex-between shrink-0 py-4">
-          <slot name="header" :title="title">
-            <h4>{{ title }}</h4>
-          </slot>
-        </header>
-
-        <el-scrollbar class="min-h-0 flex-1">
-          <slot />
-        </el-scrollbar>
-      </main>
+      <LayoutMain :fallback-title="fallbackTitle" :title="title">
+        <template #default="{ Header, title: mainTitle }">
+          <slot :Header="Header" :title="mainTitle" />
+        </template>
+      </LayoutMain>
     </div>
   </div>
 </template>
diff --git a/ui/src/components/global/mk-view-layout/layout-main.ts b/ui/src/components/global/mk-view-layout/layout-main.ts
new file mode 100644
index 00000000000..1a611fe193d
--- /dev/null
+++ b/ui/src/components/global/mk-view-layout/layout-main.ts
@@ -0,0 +1,95 @@
+import {
+  Fragment,
+  createTextVNode,
+  defineComponent,
+  h,
+  isVNode,
+  type Component,
+  type Slots,
+  type SlotsType,
+  type VNode,
+} from 'vue'
+import { ElScrollbar } from 'element-plus'
+
+type LayoutMainSlotProps = {
+  Header: Component
+  title: string
+}
+
+const LayoutMainHeader = defineComponent({
+  name: 'MkViewLayoutMainHeader',
+  setup(_, { slots }) {
+    return () => slots.default?.()
+  },
+})
+
+function flattenSlotNodes(children: unknown): VNode[] {
+  const childNodes = Array.isArray(children) ? children : [children]
+
+  return childNodes.flatMap((child) => {
+    if (child === undefined || child === null || typeof child === 'boolean') return []
+    if (!isVNode(child)) return [createTextVNode(String(child))]
+    if (child.type === Fragment) return flattenSlotNodes(child.children)
+    return [child]
+  })
+}
+
+function getHeaderNodes(headerNode: VNode) {
+  const headerSlots = headerNode.children as Slots | null
+  return flattenSlotNodes(headerSlots?.default?.())
+}
+
+export default defineComponent({
+  name: 'MkViewLayoutMain',
+  props: {
+    fallbackTitle: {
+      default: '',
+      type: String,
+    },
+    title: {
+      default: '',
+      type: String,
+    },
+  },
+  slots: Object as SlotsType<{
+    default?: (props: LayoutMainSlotProps) => VNode[]
+  }>,
+  setup(props, { slots }) {
+    return () => {
+      const headerNodes: VNode[] = []
+      const contentNodes: VNode[] = []
+
+      flattenSlotNodes(slots.default?.({ Header: LayoutMainHeader, title: props.title })).forEach(
+        (node) => {
+          if (node.type === LayoutMainHeader) {
+            headerNodes.push(...getHeaderNodes(node))
+            return
+          }
+
+          contentNodes.push(node)
+        },
+      )
+
+      const resolvedHeaderNodes =
+        headerNodes.length > 0
+          ? headerNodes
+          : props.fallbackTitle
+            ? [h('h4', props.fallbackTitle)]
+            : []
+
+      return h('main', { class: 'flex min-w-0 flex-1 flex-col px-6 mb-6' }, [
+        resolvedHeaderNodes.length
+          ? h('header', { class: 'flex-between shrink-0 py-4' }, resolvedHeaderNodes)
+          : null,
+        h(
+          ElScrollbar,
+          {
+            class: 'min-h-0 flex-1',
+            viewClass: 'flex min-h-full flex-col',
+          },
+          { default: () => contentNodes },
+        ),
+      ])
+    }
+  },
+})
diff --git a/ui/src/components/mk-search-list/index.vue b/ui/src/components/mk-search-list/index.vue
index c3c3bbdd3b7..a18b0e7ab73 100644
--- a/ui/src/components/mk-search-list/index.vue
+++ b/ui/src/components/mk-search-list/index.vue
@@ -140,7 +140,9 @@ function selectRow(row: T, index: number) {
         </template>
       </div>
       <slot v-else name="empty">
-        <el-empty :description="emptyText" :image-size="80" />
+        <p class="text-center mt-20 text-N600">
+          {{ searchKeyword ? '没有找到相关内容' : emptyText }}
+        </p>
       </slot>
     </el-scrollbar>
   </div>
diff --git a/ui/src/views/system/chat/user-groups/GroupsListView.vue b/ui/src/views/system/chat/user-groups/GroupsListView.vue
index 4d3026409bf..ad687651451 100644
--- a/ui/src/views/system/chat/user-groups/GroupsListView.vue
+++ b/ui/src/views/system/chat/user-groups/GroupsListView.vue
@@ -135,7 +135,7 @@ onMounted(() => loadChatUserGroups())
 </script>
 
 <template>
-  <MkViewLayout class="system-chat-groups" v-loading="groupsLoading">
+  <MkViewLayout class="system-chat-groups" :loading="groupsLoading">
     <template #aside="{ title, Header }">
       <component :is="Header">
         <h4>{{ title }}</h4>
@@ -164,61 +164,69 @@ onMounted(() => loadChatUserGroups())
         </template>
       </MkSearchList>
     </template>
-    <template #header>
-      <div class="flex items-center gap-2">
-        <h4>{{ currentGroup?.name }}</h4>
-        <el-divider direction="vertical" />
-        <span class="flex items-center text-N500">
-          <MkIcon name="icon_member_filled" class="mr-1" />
-          {{ paginationConfig.total }}
-        </span>
-      </div>
-    </template>
-
-    <div class="flex-between mb-4">
-      <el-button type="primary" @click="memberDialogRef?.open()">
-        <MkIcon name="icon_add_outlined" />
-        <span>添加成员</span>
-      </el-button>
-      <MkComplexSearch :fields="memberSearchFields" @change="handleMemberSearch" />
-    </div>
-
-    <MkTable
-      ref="memberTableRef"
-      v-model:pagination-config="paginationConfig"
-      :data="groupMembers"
-      v-loading="membersLoading"
-      @current-change="loadGroupMembers()"
-      @size-change="loadGroupMembers()"
-      @selection-change="handleBatchSelectionChange"
-    >
-      <el-table-column type="selection" width="40" />
-      <el-table-column prop="nick_name" label="姓名" show-overflow-tooltip />
-      <el-table-column prop="username" label="用户名" show-overflow-tooltip />
-      <el-table-column prop="source" label="用户来源" min-width="140">
-        <template #default="{ row }">
-          {{ row.source === 'LOCAL' ? '系统用户' : LOGIN_METHOD_LABELS[row.source as LoginMethod] }}
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" width="70" fixed="right">
-        <template #default="{ row }">
-          <el-tooltip content="移除" placement="top">
-            <el-button type="primary" text @click="handleRemoveMembers(row)">
-              <MkIcon name="icon_assigned_outlined" />
-            </el-button>
-          </el-tooltip>
-        </template>
-      </el-table-column>
-      <template #footer-batch-actions>
-        <el-button type="danger" plain @click="handleRemoveMembers()">移除</el-button>
+    <template #default="{ Header }">
+      <template v-if="currentGroup">
+        <component :is="Header">
+          <div class="flex items-center gap-2">
+            <h4>{{ currentGroup.name }}</h4>
+            <el-divider direction="vertical" />
+            <span class="flex items-center text-N500">
+              <MkIcon name="icon_member_filled" class="mr-1" />
+              {{ paginationConfig.total }}
+            </span>
+          </div>
+        </component>
+
+        <div class="flex-between mb-4">
+          <el-button type="primary" @click="memberDialogRef?.open()">
+            <MkIcon name="icon_add_outlined" />
+            <span>添加成员</span>
+          </el-button>
+          <MkComplexSearch :fields="memberSearchFields" @change="handleMemberSearch" />
+        </div>
+
+        <MkTable
+          ref="memberTableRef"
+          v-model:pagination-config="paginationConfig"
+          :data="groupMembers"
+          v-loading="membersLoading"
+          @current-change="loadGroupMembers()"
+          @size-change="loadGroupMembers()"
+          @selection-change="handleBatchSelectionChange"
+          :search="Boolean(memberQuery)"
+        >
+          <el-table-column type="selection" width="40" />
+          <el-table-column prop="nick_name" label="姓名" show-overflow-tooltip />
+          <el-table-column prop="username" label="用户名" show-overflow-tooltip />
+          <el-table-column prop="source" label="用户来源" min-width="140">
+            <template #default="{ row }">
+              {{
+                row.source === 'LOCAL' ? '系统用户' : LOGIN_METHOD_LABELS[row.source as LoginMethod]
+              }}
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="70" fixed="right">
+            <template #default="{ row }">
+              <el-tooltip content="移除" placement="top">
+                <el-button type="primary" text @click="handleRemoveMembers(row)">
+                  <MkIcon name="icon_assigned_outlined" />
+                </el-button>
+              </el-tooltip>
+            </template>
+          </el-table-column>
+          <template #footer-batch-actions>
+            <el-button type="danger" plain @click="handleRemoveMembers()">移除</el-button>
+          </template>
+        </MkTable>
       </template>
-    </MkTable>
-
-    <CreateOrUpdateGroupDialog ref="groupDialogRef" @refresh="loadChatUserGroups" />
-    <CreateGroupMemberDialog
-      ref="memberDialogRef"
-      :current-group="currentGroup"
-      @refresh="loadGroupMembers(true)"
-    />
+      <MkEmpty v-else class="flex-1" />
+    </template>
   </MkViewLayout>
+
+  <CreateOrUpdateGroupDialog ref="groupDialogRef" @refresh="loadChatUserGroups" />
+  <CreateGroupMemberDialog
+    ref="memberDialogRef"
+    :current-group="currentGroup"
+    @refresh="loadGroupMembers(true)"
+  />
 </template>
diff --git a/ui/src/views/system/chat/users/UserListView.vue b/ui/src/views/system/chat/users/UserListView.vue
index b37eefb3272..657b766de8a 100644
--- a/ui/src/views/system/chat/users/UserListView.vue
+++ b/ui/src/views/system/chat/users/UserListView.vue
@@ -138,111 +138,115 @@ onMounted(() => loadChatUsers())
 </script>
 
 <template>
-  <MkViewLayout class="system-chat-users" v-loading="chatUsersLoading">
-    <template #header="{ title }">
-      <h4>{{ title }}</h4>
-      <div class="flex items-center">
-        <MkComplexSearch :fields="searchFields" @change="handleSearchChange" />
-        <el-button class="ml-3" @click="importUsersDialogRef?.open()">
-          <MkIcon name="icon_import_outlined" />
-          <span>导入用户</span>
-        </el-button>
-        <el-button type="primary" @click="userFormDrawerRef?.open()">
-          <MkIcon name="icon_add_outlined" />
-          <span>创建用户</span>
-        </el-button>
-      </div>
-    </template>
-
-    <MkTable
-      ref="userTableRef"
-      v-model:pagination-config="paginationConfig"
-      :data="chatUsersData"
-      v-loading="chatUsersLoading"
-      @current-change="loadChatUsers()"
-      @size-change="loadChatUsers()"
-      @selection-change="handleBatchSelectionChange"
-    >
-      <el-table-column type="selection" width="40" />
-      <el-table-column prop="nick_name" label="姓名" min-width="150" show-overflow-tooltip />
-      <el-table-column prop="username" label="用户名" min-width="150" show-overflow-tooltip />
-      <el-table-column width="100" label="状态">
-        <template #default="{ row }">
-          <MkStatusLabel :active="row.is_active" />
-        </template>
-      </el-table-column>
-
-      <el-table-column prop="email" label="邮箱" show-overflow-tooltip min-width="180">
-        <template #default="{ row }">
-          {{ row.email || '-' }}
-        </template>
-      </el-table-column>
-      <el-table-column prop="phone" width="120" label="手机号">
-        <template #default="{ row }">
-          {{ row.phone || '-' }}
-        </template>
-      </el-table-column>
-
-      <el-table-column prop="user_group_names" width="180" label="用户组">
-        <template #default="{ row }">
-          <MkTagGroup :tags="row.user_group_names" />
-        </template>
-      </el-table-column>
-
-      <el-table-column label="用户来源">
-        <template #default="{ row }">
-          {{ row.source === 'LOCAL' ? '本地创建' : LOGIN_METHOD_LABELS[row.source as LoginMethod] }}
-        </template>
-      </el-table-column>
-
-      <el-table-column label="创建时间" width="180">
-        <template #default="{ row }">
-          {{ datetimeFormat(row.create_time) }}
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" width="160" fixed="right">
-        <template #default="{ row }">
-          <div class="flex items-center gap-3">
-            <span @click.stop>
-              <el-switch
-                v-model="row.is_active"
-                size="small"
-                :before-change="() => handleChangeStatus(row)"
-              />
-            </span>
-            <el-divider direction="vertical" />
-            <div class="flex gap-1">
-              <el-tooltip content="编辑" placement="top">
-                <el-button type="primary" text @click.stop="userFormDrawerRef?.open(row)">
-                  <mk-icon name="icon_edit_outlined"></mk-icon>
-                </el-button>
-              </el-tooltip>
-              <el-tooltip content="修改用户密码" placement="top">
-                <el-button type="primary" text @click.stop="userPwdDialogRef?.open(row)">
-                  <mk-icon name="icon-key_outlined"></mk-icon>
-                </el-button>
-              </el-tooltip>
-              <el-tooltip content="删除" placement="top">
-                <el-button type="primary" text @click.stop="deleteUser(row)">
-                  <mk-icon name="icon_delete-trash_outlined"></mk-icon>
-                </el-button>
-              </el-tooltip>
+  <MkViewLayout class="system-chat-users" :loading="chatUsersLoading">
+    <template #default="{ title, Header }">
+      <component :is="Header">
+        <h4>{{ title }}</h4>
+        <div class="flex items-center">
+          <MkComplexSearch :fields="searchFields" @change="handleSearchChange" />
+          <el-button class="ml-3" @click="importUsersDialogRef?.open()">
+            <MkIcon name="icon_import_outlined" />
+            <span>导入用户</span>
+          </el-button>
+          <el-button type="primary" @click="userFormDrawerRef?.open()">
+            <MkIcon name="icon_add_outlined" />
+            <span>创建用户</span>
+          </el-button>
+        </div>
+      </component>
+
+      <MkTable
+        ref="userTableRef"
+        v-model:pagination-config="paginationConfig"
+        :data="chatUsersData"
+        v-loading="chatUsersLoading"
+        @current-change="loadChatUsers()"
+        @size-change="loadChatUsers()"
+        @selection-change="handleBatchSelectionChange"
+        :search="Boolean(chatUserQuery)"
+      >
+        <el-table-column type="selection" width="40" />
+        <el-table-column prop="nick_name" label="姓名" min-width="150" show-overflow-tooltip />
+        <el-table-column prop="username" label="用户名" min-width="150" show-overflow-tooltip />
+        <el-table-column width="100" label="状态">
+          <template #default="{ row }">
+            <MkStatusLabel :active="row.is_active" />
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="email" label="邮箱" show-overflow-tooltip min-width="180">
+          <template #default="{ row }">
+            {{ row.email || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="phone" width="120" label="手机号">
+          <template #default="{ row }">
+            {{ row.phone || '-' }}
+          </template>
+        </el-table-column>
+
+        <el-table-column prop="user_group_names" width="180" label="用户组">
+          <template #default="{ row }">
+            <MkTagGroup :tags="row.user_group_names" />
+          </template>
+        </el-table-column>
+
+        <el-table-column label="用户来源">
+          <template #default="{ row }">
+            {{
+              row.source === 'LOCAL' ? '本地创建' : LOGIN_METHOD_LABELS[row.source as LoginMethod]
+            }}
+          </template>
+        </el-table-column>
+
+        <el-table-column label="创建时间" width="180">
+          <template #default="{ row }">
+            {{ datetimeFormat(row.create_time) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="160" fixed="right">
+          <template #default="{ row }">
+            <div class="flex items-center gap-3">
+              <span @click.stop>
+                <el-switch
+                  v-model="row.is_active"
+                  size="small"
+                  :before-change="() => handleChangeStatus(row)"
+                />
+              </span>
+              <el-divider direction="vertical" />
+              <div class="flex gap-1">
+                <el-tooltip content="编辑" placement="top">
+                  <el-button type="primary" text @click.stop="userFormDrawerRef?.open(row)">
+                    <mk-icon name="icon_edit_outlined"></mk-icon>
+                  </el-button>
+                </el-tooltip>
+                <el-tooltip content="修改用户密码" placement="top">
+                  <el-button type="primary" text @click.stop="userPwdDialogRef?.open(row)">
+                    <mk-icon name="icon-key_outlined"></mk-icon>
+                  </el-button>
+                </el-tooltip>
+                <el-tooltip content="删除" placement="top">
+                  <el-button type="primary" text @click.stop="deleteUser(row)">
+                    <mk-icon name="icon_delete-trash_outlined"></mk-icon>
+                  </el-button>
+                </el-tooltip>
+              </div>
             </div>
-          </div>
+          </template>
+        </el-table-column>
+
+        <template #footer-batch-actions>
+          <el-button type="primary" plain @click="openBatchSetUserGroupDialog">
+            设置用户组
+          </el-button>
+          <el-button type="danger" plain @click="handleBatchDelete">删除</el-button>
         </template>
-      </el-table-column>
-
-      <template #footer-batch-actions>
-        <el-button type="primary" plain @click="openBatchSetUserGroupDialog">
-          设置用户组
-        </el-button>
-        <el-button type="danger" plain @click="handleBatchDelete">删除</el-button>
-      </template>
-    </MkTable>
-
-    <UserFromDrawer ref="userFormDrawerRef" @refresh="loadChatUsers" />
-    <ImportUsersDialog ref="importUsersDialogRef" @refresh="loadChatUsers(true)" />
-    <UserPwdDialog ref="userPwdDialogRef" @refresh="loadChatUsers(false)" />
-    <BatchSetUserGroupDialog ref="batchSetUserGroupDialogRef" @refresh="loadChatUsers(false)" />
+      </MkTable>
+    </template>
   </MkViewLayout>
+  <UserFromDrawer ref="userFormDrawerRef" @refresh="loadChatUsers" />
+  <ImportUsersDialog ref="importUsersDialogRef" @refresh="loadChatUsers(true)" />
+  <UserPwdDialog ref="userPwdDialogRef" @refresh="loadChatUsers(false)" />
+  <BatchSetUserGroupDialog ref="batchSetUserGroupDialogRef" @refresh="loadChatUsers(false)" />
 </template>
diff --git a/ui/src/views/system/identity/groups/GroupsListView.vue b/ui/src/views/system/identity/groups/GroupsListView.vue
index f58c097acf5..b90801c99fb 100644
--- a/ui/src/views/system/identity/groups/GroupsListView.vue
+++ b/ui/src/views/system/identity/groups/GroupsListView.vue
@@ -175,7 +175,7 @@ function loadWorkspaceOptions() {
       selectedWorkspaceId.value = workspaceOptions.value[0]?.id ?? 'default'
     }
 
-    loadUserGroups()
+    return loadUserGroups()
   })
 }
 
@@ -183,7 +183,7 @@ onMounted(() => loadWorkspaceOptions())
 </script>
 
 <template>
-  <MkViewLayout class="system-identity-groups">
+  <MkViewLayout class="system-identity-groups" :loading="!selectedWorkspaceId && loadingGroups">
     <template #top>
       <MkWorkspaceDropdown
         v-model="selectedWorkspaceId"
@@ -225,68 +225,73 @@ onMounted(() => loadWorkspaceOptions())
       </MkSearchList>
     </template>
 
-    <template #header>
-      <div class="flex items-center gap-2">
-        <h4>{{ currentGroup?.name }}</h4>
-        <el-divider direction="vertical" />
-        <span class="flex items-center text-N500">
-          <MkIcon name="icon_member_filled" class="mr-1" />
-          {{ currentGroup?.count }}
-        </span>
-      </div>
-    </template>
+    <template #default="{ Header }">
+      <template v-if="currentGroup">
+        <component :is="Header">
+          <div class="flex items-center gap-2">
+            <h4>{{ currentGroup.name }}</h4>
+            <el-divider direction="vertical" />
+            <span class="flex items-center text-N500">
+              <MkIcon name="icon_member_filled" class="mr-1" />
+              {{ currentGroup.count }}
+            </span>
+          </div>
+        </component>
 
-    <div class="flex-between mb-4">
-      <el-button type="primary" @click="memberDialogRef?.open()">
-        <MkIcon name="icon_add_outlined" />
-        <span>添加成员</span>
-      </el-button>
-      <MkComplexSearch :fields="memberSearchFields" @change="handleMemberSearch" />
-    </div>
+        <div class="flex-between mb-4">
+          <el-button type="primary" @click="memberDialogRef?.open()">
+            <MkIcon name="icon_add_outlined" />
+            <span>添加成员</span>
+          </el-button>
+          <MkComplexSearch :fields="memberSearchFields" @change="handleMemberSearch" />
+        </div>
 
-    <MkTable
-      v-loading="loadingMembers"
-      :max-table-height="340"
-      v-model:pagination-config="paginationConfig"
-      :data="userGroupMembers"
-      @selection-change="handleMemberSelectionChange"
-    >
-      <el-table-column type="selection" width="40" />
-      <el-table-column prop="nick_name" label="姓名" min-width="198" show-overflow-tooltip />
-      <el-table-column prop="username" label="用户名" min-width="198" show-overflow-tooltip />
-      <el-table-column label="角色" min-width="198">
-        <template #default="{ row }">
-          <MkWorkspaceRelationTags
-            :table-render-params="{ property: '角色', value: '工作空间' }"
-            :tags="row.role ? [row.role] : []"
-          />
-        </template>
-      </el-table-column>
-      <el-table-column prop="source" label="用户来源" min-width="198" show-overflow-tooltip />
-      <el-table-column label="操作" width="70" fixed="right">
-        <template #default="{ row }">
-          <el-tooltip content="移除" placement="top">
-            <el-button type="primary" text @click="handleRemoveMembers(row)">
-              <MkIcon name="icon_assigned_outlined" />
-            </el-button>
-          </el-tooltip>
-        </template>
-      </el-table-column>
-      <template #footer-batch-actions>
-        <el-button type="danger" plain @click="handleRemoveMembers()">移除</el-button>
+        <MkTable
+          v-loading="loadingMembers"
+          :max-table-height="340"
+          v-model:pagination-config="paginationConfig"
+          :data="userGroupMembers"
+          @selection-change="handleMemberSelectionChange"
+          :search="Boolean(memberSearchQuery)"
+        >
+          <el-table-column type="selection" width="40" />
+          <el-table-column prop="nick_name" label="姓名" min-width="198" show-overflow-tooltip />
+          <el-table-column prop="username" label="用户名" min-width="198" show-overflow-tooltip />
+          <el-table-column label="角色" min-width="198">
+            <template #default="{ row }">
+              <MkWorkspaceRelationTags
+                :table-render-params="{ property: '角色', value: '工作空间' }"
+                :tags="row.role ? [row.role] : []"
+              />
+            </template>
+          </el-table-column>
+          <el-table-column prop="source" label="用户来源" min-width="198" show-overflow-tooltip />
+          <el-table-column label="操作" width="70" fixed="right">
+            <template #default="{ row }">
+              <el-tooltip content="移除" placement="top">
+                <el-button type="primary" text @click="handleRemoveMembers(row)">
+                  <MkIcon name="icon_assigned_outlined" />
+                </el-button>
+              </el-tooltip>
+            </template>
+          </el-table-column>
+          <template #footer-batch-actions>
+            <el-button type="danger" plain @click="handleRemoveMembers()">移除</el-button>
+          </template>
+        </MkTable>
       </template>
-    </MkTable>
-
-    <CreateOrUpdateGroupDialog
-      ref="groupDialogRef"
-      :workspace-id="selectedWorkspaceId"
-      @refresh="handleGroupSaved"
-    />
-    <CreateGroupMemberDialog
-      ref="memberDialogRef"
-      :workspace-id="selectedWorkspaceId"
-      :current-group="currentGroup"
-      @refresh="loadUserGroupMembers(true)"
-    />
+      <MkEmpty v-else class="flex-1" />
+    </template>
   </MkViewLayout>
+  <CreateOrUpdateGroupDialog
+    ref="groupDialogRef"
+    :workspace-id="selectedWorkspaceId"
+    @refresh="handleGroupSaved"
+  />
+  <CreateGroupMemberDialog
+    ref="memberDialogRef"
+    :workspace-id="selectedWorkspaceId"
+    :current-group="currentGroup"
+    @refresh="loadUserGroupMembers(true)"
+  />
 </template>
diff --git a/ui/src/views/system/identity/users/UserListView.vue b/ui/src/views/system/identity/users/UserListView.vue
index 804b9bcc1d4..f23f27ff4da 100644
--- a/ui/src/views/system/identity/users/UserListView.vue
+++ b/ui/src/views/system/identity/users/UserListView.vue
@@ -133,131 +133,135 @@ onMounted(() => loadSystemUsers())
 
 <template>
   <MkViewLayout class="system-identity-users">
-    <template #header="{ title }">
-      <h4>{{ title }}</h4>
-      <div class="flex items-center">
-        <MkComplexSearch :fields="searchFields" @change="handleSearchChange" />
-        <el-button class="ml-3">
-          <MkIcon name="icon_import_outlined" />
-          <span>导入用户</span>
-        </el-button>
-        <el-button type="primary" @click="userFormDrawerRef?.open()">
-          <MkIcon name="icon_add_outlined" />
-          <span>创建用户</span>
-        </el-button>
-      </div>
-    </template>
+    <template #default="{ title, Header }">
+      <component :is="Header">
+        <h4>{{ title }}</h4>
+        <div class="flex items-center">
+          <MkComplexSearch :fields="searchFields" @change="handleSearchChange" />
+          <el-button class="ml-3">
+            <MkIcon name="icon_import_outlined" />
+            <span>导入用户</span>
+          </el-button>
+          <el-button type="primary" @click="userFormDrawerRef?.open()">
+            <MkIcon name="icon_add_outlined" />
+            <span>创建用户</span>
+          </el-button>
+        </div>
+      </component>
 
-    <MkTable
-      ref="userTableRef"
-      v-model:pagination-config="paginationConfig"
-      :data="systemUsersData"
-      v-loading="systemUsersLoading"
-      @current-change="loadSystemUsers()"
-      @size-change="loadSystemUsers()"
-      @selection-change="handleBatchSelectionChange"
-    >
-      <el-table-column type="selection" width="40" />
-      <el-table-column prop="nick_name" label="姓名" min-width="150" show-overflow-tooltip />
-      <el-table-column prop="username" label="用户名" min-width="150" show-overflow-tooltip />
-      <el-table-column width="100" label="状态">
-        <template #default="{ row }">
-          <MkStatusLabel :active="row.is_active" />
-        </template>
-      </el-table-column>
+      <MkTable
+        ref="userTableRef"
+        v-model:pagination-config="paginationConfig"
+        :data="systemUsersData"
+        v-loading="systemUsersLoading"
+        @current-change="loadSystemUsers()"
+        @size-change="loadSystemUsers()"
+        @selection-change="handleBatchSelectionChange"
+        :search="Boolean(systemUserQuery)"
+      >
+        <el-table-column type="selection" width="40" />
+        <el-table-column prop="nick_name" label="姓名" min-width="150" show-overflow-tooltip />
+        <el-table-column prop="username" label="用户名" min-width="150" show-overflow-tooltip />
+        <el-table-column width="100" label="状态">
+          <template #default="{ row }">
+            <MkStatusLabel :active="row.is_active" />
+          </template>
+        </el-table-column>
 
-      <el-table-column prop="email" label="邮箱" show-overflow-tooltip min-width="180">
-        <template #default="{ row }">
-          {{ row.email || '-' }}
-        </template>
-      </el-table-column>
-      <el-table-column prop="phone" width="120" label="手机号">
-        <template #default="{ row }">
-          {{ row.phone || '-' }}
-        </template>
-      </el-table-column>
+        <el-table-column prop="email" label="邮箱" show-overflow-tooltip min-width="180">
+          <template #default="{ row }">
+            {{ row.email || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="phone" width="120" label="手机号">
+          <template #default="{ row }">
+            {{ row.phone || '-' }}
+          </template>
+        </el-table-column>
 
-      <el-table-column v-if="auth.isEE || auth.isPE" prop="role_name" width="180" label="角色">
-        <template #default="{ row }">
-          <MkWorkspaceRelationTags
-            :table-render-params="{ property: '角色', value: '工作空间' }"
-            :tags="row.role_name"
-            :tag-workspace="row.role_workspace"
-          />
-        </template>
-      </el-table-column>
+        <el-table-column v-if="auth.isEE || auth.isPE" prop="role_name" width="180" label="角色">
+          <template #default="{ row }">
+            <MkWorkspaceRelationTags
+              :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 }">
-          <MkWorkspaceRelationTags
-            :table-render-params="{ property: '用户组', value: '工作空间' }"
-            :tags="row.user_group_names"
-            :tag-workspace="row.user_group_workspace"
-          />
-        </template>
-      </el-table-column>
+        <el-table-column prop="user_group_names" width="180" label="用户组">
+          <template #default="{ row }">
+            <MkWorkspaceRelationTags
+              :table-render-params="{ property: '用户组', value: '工作空间' }"
+              :tags="row.user_group_names"
+              :tag-workspace="row.user_group_workspace"
+            />
+          </template>
+        </el-table-column>
 
-      <el-table-column label="用户来源">
-        <template #default="{ row }">
-          {{ row.source === 'LOCAL' ? '系统用户' : LOGIN_METHOD_LABELS[row.source as LoginMethod] }}
-        </template>
-      </el-table-column>
+        <el-table-column label="用户来源">
+          <template #default="{ row }">
+            {{
+              row.source === 'LOCAL' ? '系统用户' : LOGIN_METHOD_LABELS[row.source as LoginMethod]
+            }}
+          </template>
+        </el-table-column>
 
-      <el-table-column label="创建时间" width="180">
-        <template #default="{ row }">
-          {{ datetimeFormat(row.create_time) }}
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" width="160" fixed="right">
-        <template #default="{ row }">
-          <div class="flex items-center gap-3">
-            <span @click.stop>
-              <el-switch
-                v-model="row.is_active"
-                :disabled="row.role === 'ADMIN' || row.id === user.userInfo?.id"
-                :before-change="() => handleChangeStatus(row)"
-                size="small"
-              />
-            </span>
-            <el-divider direction="vertical" />
-            <div class="flex gap-1">
-              <el-tooltip content="编辑" placement="top">
-                <el-button type="primary" text @click.stop="userFormDrawerRef?.open(row)">
-                  <mk-icon name="icon_edit_outlined"></mk-icon>
-                </el-button>
-              </el-tooltip>
-              <el-tooltip content="修改用户密码" placement="top">
-                <el-button type="primary" text @click.stop="userPwdDialogRef?.open(row)">
-                  <mk-icon name="icon-key_outlined"></mk-icon>
-                </el-button>
-              </el-tooltip>
-              <el-tooltip content="删除" placement="top">
-                <el-button type="primary" text @click.stop="deleteUser(row)">
-                  <mk-icon name="icon_delete-trash_outlined"></mk-icon>
-                </el-button>
-              </el-tooltip>
+        <el-table-column label="创建时间" width="180">
+          <template #default="{ row }">
+            {{ datetimeFormat(row.create_time) }}
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="160" fixed="right">
+          <template #default="{ row }">
+            <div class="flex items-center gap-3">
+              <span @click.stop>
+                <el-switch
+                  v-model="row.is_active"
+                  :disabled="row.role === 'ADMIN' || row.id === user.userInfo?.id"
+                  :before-change="() => handleChangeStatus(row)"
+                  size="small"
+                />
+              </span>
+              <el-divider direction="vertical" />
+              <div class="flex gap-1">
+                <el-tooltip content="编辑" placement="top">
+                  <el-button type="primary" text @click.stop="userFormDrawerRef?.open(row)">
+                    <mk-icon name="icon_edit_outlined"></mk-icon>
+                  </el-button>
+                </el-tooltip>
+                <el-tooltip content="修改用户密码" placement="top">
+                  <el-button type="primary" text @click.stop="userPwdDialogRef?.open(row)">
+                    <mk-icon name="icon-key_outlined"></mk-icon>
+                  </el-button>
+                </el-tooltip>
+                <el-tooltip content="删除" placement="top">
+                  <el-button type="primary" text @click.stop="deleteUser(row)">
+                    <mk-icon name="icon_delete-trash_outlined"></mk-icon>
+                  </el-button>
+                </el-tooltip>
+              </div>
             </div>
-          </div>
-        </template>
-      </el-table-column>
+          </template>
+        </el-table-column>
 
-      <template #footer-batch-actions>
-        <el-button
-          v-if="auth.isEE || auth.isPE"
-          type="primary"
-          plain
-          @click="openBatchSetUserRoleDialog"
-        >
-          设置角色
-        </el-button>
-        <el-button type="danger" plain @click="handleBatchDelete">删除</el-button>
-      </template>
-    </MkTable>
-
-    <UserFromDrawer ref="userFormDrawerRef" @refresh="loadSystemUsers" />
-    <UserPwdDialog ref="userPwdDialogRef" @refresh="loadSystemUsers(false)" />
-    <BatchSetUserRoleDialog ref="batchSetUserRoleDialogRef" @refresh="loadSystemUsers(false)" />
+        <template #footer-batch-actions>
+          <el-button
+            v-if="auth.isEE || auth.isPE"
+            type="primary"
+            plain
+            @click="openBatchSetUserRoleDialog"
+          >
+            设置角色
+          </el-button>
+          <el-button type="danger" plain @click="handleBatchDelete">删除</el-button>
+        </template>
+      </MkTable>
+    </template>
   </MkViewLayout>
+  <UserFromDrawer ref="userFormDrawerRef" @refresh="loadSystemUsers" />
+  <UserPwdDialog ref="userPwdDialogRef" @refresh="loadSystemUsers(false)" />
+  <BatchSetUserRoleDialog ref="batchSetUserRoleDialogRef" @refresh="loadSystemUsers(false)" />
 </template>
 
 <style scoped lang="scss"></style>
diff --git a/ui/src/views/system/identity/workspaces/WorkspaceListView.vue b/ui/src/views/system/identity/workspaces/WorkspaceListView.vue
index 39d8a954fbf..6b0d7ea6f34 100644
--- a/ui/src/views/system/identity/workspaces/WorkspaceListView.vue
+++ b/ui/src/views/system/identity/workspaces/WorkspaceListView.vue
@@ -189,7 +189,7 @@ onMounted(() => loadWorkspaceOptions())
 </script>
 
 <template>
-  <MkViewLayout class="system-identity-workspaces" v-loading="workspaceLoading">
+  <MkViewLayout class="system-identity-workspaces" :loading="workspaceLoading">
     <template #aside="{ title, Header }">
       <component :is="Header">
         <h4>{{ title }}</h4>
@@ -223,60 +223,65 @@ onMounted(() => loadWorkspaceOptions())
       </MkSearchList>
     </template>
 
-    <template #header>
-      <div class="flex items-center gap-2">
-        <h4>{{ currentWorkspace?.name }}</h4>
-        <el-divider direction="vertical" />
-        <span class="flex items-center text-N500">
-          <MkIcon name="icon_member_filled" class="mr-1" />
-          {{ currentWorkspace?.user_count }}
-        </span>
-      </div>
-    </template>
+    <template #default="{ Header }">
+      <template v-if="currentWorkspace">
+        <component :is="Header">
+          <div class="flex items-center gap-2">
+            <h4>{{ currentWorkspace.name }}</h4>
+            <el-divider direction="vertical" />
+            <span class="flex items-center text-N500">
+              <MkIcon name="icon_member_filled" class="mr-1" />
+              {{ currentWorkspace.user_count }}
+            </span>
+          </div>
+        </component>
 
-    <div class="flex-between mb-4">
-      <el-button type="primary" @click="addMemberDrawerRef?.open()">
-        <MkIcon name="icon_add_outlined" />
-        <span>添加成员</span>
-      </el-button>
-      <MkComplexSearch :fields="memberSearchFields" @change="handleMemberSearch" />
-    </div>
+        <div class="flex-between mb-4">
+          <el-button type="primary" @click="addMemberDrawerRef?.open()">
+            <MkIcon name="icon_add_outlined" />
+            <span>添加成员</span>
+          </el-button>
+          <MkComplexSearch :fields="memberSearchFields" @change="handleMemberSearch" />
+        </div>
 
-    <MkTable
-      v-model:pagination-config="paginationConfig"
-      :data="workspaceMembers"
-      v-loading="workspaceMembersLoading"
-      @current-change="loadWorkspaceMembers()"
-      @size-change="loadWorkspaceMembers()"
-      @selection-change="handleBatchSelectionChange"
-      :span-method="objectSpanMethod"
-      :max-table-height="280"
-      :row-key="getWorkspaceMemberRowKey"
-    >
-      <el-table-column type="selection" width="64" />
-      <el-table-column prop="nick_name" label="姓名" />
-      <el-table-column prop="username" label="用户名" />
-      <el-table-column prop="role_name" label="角色" class-name="border-l!" />
-      <el-table-column label="操作" width="70" fixed="right">
-        <template #default="{ row }">
-          <el-tooltip content="移除" placement="top">
-            <el-button type="primary" text @click="handleRemoveMember(row)">
-              <MkIcon name="icon_assigned_outlined" />
-            </el-button>
-          </el-tooltip>
-        </template>
-      </el-table-column>
+        <MkTable
+          v-model:pagination-config="paginationConfig"
+          :data="workspaceMembers"
+          v-loading="workspaceMembersLoading"
+          @current-change="loadWorkspaceMembers()"
+          @size-change="loadWorkspaceMembers()"
+          @selection-change="handleBatchSelectionChange"
+          :span-method="objectSpanMethod"
+          :max-table-height="280"
+          :row-key="getWorkspaceMemberRowKey"
+          :search="Boolean(memberSearchQuery)"
+        >
+          <el-table-column type="selection" width="64" />
+          <el-table-column prop="nick_name" label="姓名" />
+          <el-table-column prop="username" label="用户名" />
+          <el-table-column prop="role_name" label="角色" class-name="border-l!" />
+          <el-table-column label="操作" width="70" fixed="right">
+            <template #default="{ row }">
+              <el-tooltip content="移除" placement="top">
+                <el-button type="primary" text @click="handleRemoveMember(row)">
+                  <MkIcon name="icon_assigned_outlined" />
+                </el-button>
+              </el-tooltip>
+            </template>
+          </el-table-column>
 
-      <template #footer-batch-actions>
-        <el-button type="danger" plain @click="handleBatchDelete">移除</el-button>
+          <template #footer-batch-actions>
+            <el-button type="danger" plain @click="handleBatchDelete">移除</el-button>
+          </template>
+        </MkTable>
       </template>
-    </MkTable>
-
-    <CreateOrUpdateWorkspaceDialog ref="workspaceDialogRef" @refresh="loadWorkspaceOptions" />
-    <AddMemberDrawer
-      ref="addMemberDrawerRef"
-      :current-workspace="currentWorkspace"
-      @refresh="loadWorkspaceOptions"
-    />
+      <MkEmpty v-else class="flex-1" />
+    </template>
   </MkViewLayout>
+  <CreateOrUpdateWorkspaceDialog ref="workspaceDialogRef" @refresh="loadWorkspaceOptions" />
+  <AddMemberDrawer
+    ref="addMemberDrawerRef"
+    :current-workspace="currentWorkspace"
+    @refresh="loadWorkspaceOptions"
+  />
 </template>
diff --git a/ui/src/views/system/settings/authentication/AuthenticationSettingsView.vue b/ui/src/views/system/settings/authentication/AuthenticationSettingsView.vue
index 41dc5c6a3ff..5fa457bdb54 100644
--- a/ui/src/views/system/settings/authentication/AuthenticationSettingsView.vue
+++ b/ui/src/views/system/settings/authentication/AuthenticationSettingsView.vue
@@ -205,7 +205,7 @@ onMounted(loadLoginSetting)
 </script>
 
 <template>
-  <MkViewLayout v-loading="loading">
+  <MkViewLayout :loading="loading">
     <el-tabs v-model="activeTab" class="h-full">
       <el-tab-pane label="登录设置" name="LOGIN">
         <el-form ref="loginFormRef" class="max-w-3xl" :model="loginSetting" label-position="top">
diff --git a/ui/src/views/system/settings/email/EmailSettingsView.vue b/ui/src/views/system/settings/email/EmailSettingsView.vue
index 77082125880..f8d3f972037 100644
--- a/ui/src/views/system/settings/email/EmailSettingsView.vue
+++ b/ui/src/views/system/settings/email/EmailSettingsView.vue
@@ -19,14 +19,11 @@ const emailFormRef = useTemplateRef<FormInstance>('emailFormRef')
 const emailSetting = reactive<EmailSetting>({ ...defaultEmailSetting })
 const loading = ref(false)
 const rules: FormRules<EmailSetting> = {
-  email_host: [{ required: true, message: '请输入 SMTP 主机地址', trigger: 'blur' }],
-  email_port: [{ required: true, message: '请输入 SMTP 端口', trigger: 'blur' }],
-  email_host_user: [{ required: true, message: '请输入 SMTP 用户名', trigger: 'blur' }],
-  email_host_password: [{ required: true, message: '请输入 SMTP 密码', trigger: 'blur' }],
-  from_email: [
-    { required: true, message: '请输入发件人邮箱', trigger: 'blur' },
-    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' },
-  ],
+  email_host: [{ required: true, message: '请输入 SMTP Host', trigger: 'blur' }],
+  email_port: [{ required: true, message: '请输入 SMTP Port', trigger: 'blur' }],
+  email_host_user: [{ required: true, message: '请输入 SMTP 账户', trigger: 'blur' }],
+  email_host_password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
+  from_email: [{ required: true, message: '请输入发件人邮箱', trigger: 'blur' }],
 }
 
 /* 邮箱设置加载与提交 */
@@ -61,45 +58,51 @@ onMounted(loadEmailSetting)
 </script>
 
 <template>
-  <MkViewLayout class="system-settings-email" v-loading="loading">
+  <MkViewLayout class="system-settings-email" :loading="loading">
     <el-form
+      class="max-w-200"
       ref="emailFormRef"
-      class="max-w-3xl"
       :model="emailSetting"
       :rules="rules"
       label-position="top"
       require-asterisk-position="right"
     >
-      <div class="grid grid-cols-2 gap-x-4">
-        <el-form-item label="SMTP 主机" prop="email_host">
-          <el-input v-model="emailSetting.email_host" placeholder="例如 smtp.example.com" />
-        </el-form-item>
-        <el-form-item label="SMTP 端口" prop="email_port">
-          <el-input v-model="emailSetting.email_port" placeholder="例如 465" />
-        </el-form-item>
-      </div>
-      <el-form-item label="SMTP 用户名" prop="email_host_user">
-        <el-input v-model="emailSetting.email_host_user" placeholder="请输入 SMTP 用户名" />
+      <el-form-item label="SMTP Host" prop="email_host">
+        <el-input v-model="emailSetting.email_host" placeholder="请输入 SMTP Host" />
+      </el-form-item>
+      <el-form-item label="SMTP Port" prop="email_port">
+        <el-input v-model="emailSetting.email_port" placeholder="请输入 SMTP Port" />
+      </el-form-item>
+
+      <el-form-item label="SMTP 账户" prop="email_host_user">
+        <el-input v-model="emailSetting.email_host_user" placeholder="请输入 SMTP 账户" />
       </el-form-item>
       <el-form-item label="发件人邮箱" prop="from_email">
         <el-input v-model="emailSetting.from_email" type="email" placeholder="请输入发件人邮箱" />
       </el-form-item>
-      <el-form-item label="SMTP 密码" prop="email_host_password">
+      <el-form-item label="密码" prop="email_host_password">
         <el-input
           v-model="emailSetting.email_host_password"
           type="password"
           show-password
-          placeholder="请输入 SMTP 密码或授权码"
+          placeholder="请输入发件人密码"
         />
       </el-form-item>
-      <div class="mb-4 flex gap-6">
-        <el-checkbox v-model="emailSetting.email_use_ssl">启用 SSL</el-checkbox>
-        <el-checkbox v-model="emailSetting.email_use_tls">启用 TLS</el-checkbox>
-      </div>
-      <div class="flex gap-3">
-        <el-button type="primary" @click="submitEmailSetting('save')">保存</el-button>
-        <el-button @click="submitEmailSetting('test')">测试连接</el-button>
-      </div>
+      <el-form-item>
+        <div class="flex flex-col">
+          <p>启用 SSL<span class="text-N500">（如果 SMTP 端口是 465，通常需要启用 SSL）</span></p>
+          <el-switch v-model="emailSetting.email_use_ssl" class="self-start" />
+        </div>
+      </el-form-item>
+      <el-form-item>
+        <div class="flex flex-col">
+          <p>启用 TLS<span class="text-N500">（如果 SMTP 端口是 587，通常需要启用 TL）</span></p>
+          <el-switch v-model="emailSetting.email_use_tls" class="self-start" />
+        </div>
+      </el-form-item>
+
+      <el-button type="primary" @click="submitEmailSetting('save')">保存</el-button>
+      <el-button @click="submitEmailSetting('test')">测试连接</el-button>
     </el-form>
   </MkViewLayout>
 </template>