From d55359567d603268934a722188b62da34bd02dbf Mon Sep 17 00:00:00 2001
From: Kinplemelon <wujiu529@gmail.com>
Date: Tue, 18 Nov 2025 17:29:18 +0800
Subject: [PATCH 1/6] refactor(authn): interaction of authentication page

---
 src/i18n/Auth.ts                           |   4 +
 src/router/index.ts                        |  12 +-
 src/views/Auth/AuthnCreate.vue             |   6 +-
 src/views/Auth/AuthnDefault.vue            | 355 +++++++++++++++++++++
 src/views/Auth/AuthnDetails.vue            |   7 +-
 src/views/Auth/AuthnExtended.vue           | 144 +++++++++
 src/views/Auth/components/AuthnMenuTab.vue |  43 +++
 7 files changed, 563 insertions(+), 8 deletions(-)
 create mode 100644 src/views/Auth/AuthnDefault.vue
 create mode 100644 src/views/Auth/AuthnExtended.vue
 create mode 100644 src/views/Auth/components/AuthnMenuTab.vue

diff --git a/src/i18n/Auth.ts b/src/i18n/Auth.ts
index f3793a09c..515b8761b 100644
--- a/src/i18n/Auth.ts
+++ b/src/i18n/Auth.ts
@@ -898,4 +898,8 @@ Find more information about Variform expressions in EMQX doc.`,
     zh: '存在重复的权限配置',
     en: 'Duplicated permission configuration',
   },
+  extended: {
+    zh: '扩展',
+    en: 'Extended',
+  },
 }
diff --git a/src/router/index.ts b/src/router/index.ts
index f9c2f89a5..3fc858cb0 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -233,15 +233,21 @@ export const routes: Array<RouteRecordRaw> = [
   {
     path: '/authentication',
     component: Layout,
+    redirect: { name: 'authentication-default' },
     meta: {
       hideKey: 'authentication',
       authRequired: true,
     },
     children: [
       {
-        path: '',
-        name: 'authentication',
-        component: () => import('@/views/Auth/Authn.vue'),
+        path: 'default',
+        name: 'authentication-default',
+        component: () => import('@/views/Auth/AuthnDefault.vue'),
+      },
+      {
+        path: 'extended',
+        name: 'authentication-extended',
+        component: () => import('@/views/Auth/AuthnExtended.vue'),
       },
       {
         path: 'create',
diff --git a/src/views/Auth/AuthnCreate.vue b/src/views/Auth/AuthnCreate.vue
index c729afceb..c0e9e8021 100644
--- a/src/views/Auth/AuthnCreate.vue
+++ b/src/views/Auth/AuthnCreate.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="auth authn-create app-wrapper">
     <detail-header
-      :item="{ name: $t('Auth.createAuth'), path: '/authentication' }"
+      :item="{ name: $t('Auth.createAuth'), routeName: 'authentication-extended' }"
       v-if="!gateway"
     />
     <el-card
@@ -258,7 +258,7 @@ const { authnMechanismTypeList } = useAuthnMechanismType()
 
 const supportBackendMap: BackendMap = {
   password_based: {
-    built_in_database: tl('builtInDatabase'),
+    // built_in_database: tl('builtInDatabase'),
     mysql: 'MySQL',
     mongodb: 'MongoDB',
     postgresql: 'PostgreSQL',
@@ -433,7 +433,7 @@ const cancelCreate = async function () {
   if (props.gateway) {
     props.cancelFunc()
   } else {
-    router.push('/authentication')
+    router.push({ name: 'authentication-extended' })
   }
 }
 
diff --git a/src/views/Auth/AuthnDefault.vue b/src/views/Auth/AuthnDefault.vue
new file mode 100644
index 000000000..5cc01c717
--- /dev/null
+++ b/src/views/Auth/AuthnDefault.vue
@@ -0,0 +1,355 @@
+<template>
+  <div class="authn-default">
+    <AuthnMenuTab />
+    <div class="app-wrapper">
+      <div class="section-header">
+        <div class="searchbar">
+          <el-space wrap :size="20">
+            <el-input
+              v-model="searchVal.user_id"
+              clearable
+              :placeholder="getFiledLabel(field)"
+              @keyup.enter="resetPageAndLoadData"
+              @clear="resetPageAndLoadData"
+            />
+            <el-select
+              v-model="searchVal.is_superuser"
+              clearable
+              :placeholder="$t('Auth.isSuperuser')"
+              @clear="resetIsSuperuser(), resetPageAndLoadData()"
+            >
+              <el-option :value="true" :label="$t('Base.yes')" />
+              <el-option :value="false" :label="$t('Base.no')" />
+            </el-select>
+            <SearchButton @click="resetPageAndLoadData" />
+            <RefreshButton @click="loadData" />
+          </el-space>
+        </div>
+        <div class="add-funcs-container">
+          <template v-if="mechanism === 'password_based'">
+            <authn-users-import @uploadedData="loadData" />
+          </template>
+          <CreateButton @click="addCommand">{{ t('Base.add') }}</CreateButton>
+        </div>
+      </div>
+
+      <el-table :data="tableData" v-loading.lock="lockTable">
+        <el-table-column prop="user_id" :label="getFiledLabel(field)">
+          <template #default="{ row }">
+            {{ replaceSpaceForHTML(row.user_id) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="is_superuser" :label="$t('Auth.isSuperuser')">
+          <template #default="{ row }">
+            {{ row.is_superuser ? $t('Base.yes') : $t('Base.no') }}
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('Base.operation')">
+          <template #default="{ row }">
+            <TableButton :disabled="!$hasPermission('put')" @click="handleEdit(row)">
+              {{ $t('Base.edit') }}
+            </TableButton>
+            <TableButton :disabled="!$hasPermission('delete')" @click="handleDelete(row)">
+              {{ $t('Base.delete') }}
+            </TableButton>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="emq-table-footer">
+        <common-pagination v-model:metaData="pageMeta" @loadPage="loadData" />
+      </div>
+    </div>
+    <el-dialog
+      :title="isEdit ? $t('Base.edit') : $t('Base.add')"
+      width="480px"
+      v-model="dialogVisible"
+      destroy-on-close
+    >
+      <el-form
+        ref="recordForm"
+        :model="record"
+        :rules="getRules()"
+        label-position="top"
+        require-asterisk-position="right"
+      >
+        <el-form-item prop="user_id" :label="getFiledLabel(field)">
+          <el-input v-model="record.user_id" :disabled="isEdit" />
+        </el-form-item>
+        <el-form-item prop="password" :label="$t('General.password')">
+          <el-input
+            v-model="record.password"
+            type="password"
+            show-password
+            autocomplete="one-time-code"
+          />
+        </el-form-item>
+        <el-form-item>
+          <div class="border-checkbox">
+            <el-checkbox v-model="record.is_superuser" :label="$t('Auth.isSuperuser')" />
+            <p class="checkbox-note">
+              {{ $t('Auth.isSuperuserDesc') }}
+            </p>
+          </div>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-align-footer">
+          <CancelButton @click="dialogVisible = false" />
+          <el-button
+            type="primary"
+            :disabled="!$hasPermission('post')"
+            :loading="saveLoading"
+            @click="save"
+          >
+            {{ isEdit ? $t('Base.update') : $t('Base.save') }}
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { createAuthnUsers, deleteAuthnUser, loadAuthnUsers, updateAuthnUser } from '@/api/auth'
+import {
+  addGatewayUserManagement,
+  deleteGatewayUser,
+  getGatewayUserManagement,
+  updateGatewayUser,
+} from '@/api/gateway'
+import { DataManagerItem } from '@/types/auth'
+import { ElMessage as M, ElMessageBox as MB } from 'element-plus'
+import AuthnUsersImport from './components/AuthnUsersImport.vue'
+import AuthnMenuTab from './components/AuthnMenuTab.vue'
+
+const createRawUserForm = () => ({
+  user_id: '',
+  password: '',
+  is_superuser: false,
+})
+
+const prop = defineProps({
+  field: {
+    type: String as PropType<'username' | 'clientid'>,
+    required: true,
+    default: 'username',
+  },
+  gateway: {
+    type: String,
+    required: false,
+    default: '',
+  },
+})
+
+const { t } = useI18n()
+const record = ref<DataManagerItem>(createRawUserForm())
+const tableData = ref([])
+const lockTable = ref(false)
+const dialogVisible = ref(false)
+const route = useRoute()
+const recordForm = ref()
+const isEdit = ref(false)
+const saveLoading = ref(false)
+const searchVal = reactive({
+  user_id: '',
+  is_superuser: undefined,
+})
+const { pageMeta, pageParams, initPageMeta, setPageMeta } = usePaginationWithHasNext()
+
+const id = computed(function (): string {
+  return route.params.id as string
+})
+
+const reg = /^(?<mechanism>.+):.+$/
+const mechanism = computed(() => {
+  const matchRes = id.value?.match(reg)
+  return matchRes ? matchRes.groups?.mechanism : ''
+})
+
+const loadData = async () => {
+  const { user_id, is_superuser } = searchVal
+  const sendParams = {
+    ...pageParams.value,
+    like_user_id: searchVal.user_id === '' ? null : user_id,
+    is_superuser,
+  }
+
+  lockTable.value = true
+  let res
+  try {
+    if (prop.gateway) {
+      res = await getGatewayUserManagement(prop.gateway, sendParams)
+    } else {
+      res = await loadAuthnUsers(id.value, sendParams)
+    }
+    if (res) {
+      tableData.value = res.data
+      setPageMeta(res?.meta)
+    }
+  } catch (error) {
+    tableData.value = []
+    initPageMeta()
+  }
+
+  lockTable.value = false
+}
+
+onMounted(loadData)
+
+const getRules = function () {
+  let message = t('Auth.pleaseEnterUsername')
+  if (prop.field === 'clientid') {
+    message = t('Auth.pleaseEnterClientID')
+  }
+  const rules = {
+    user_id: [{ required: true, message, trigger: 'blur' }],
+    password: [{ required: true, message: t('General.pleaseEnterPassword') }],
+  }
+  if (isEdit.value) {
+    Reflect.deleteProperty(rules, 'user_id')
+  }
+  return rules
+}
+
+const addCommand = () => {
+  isEdit.value = false
+  record.value = createRawUserForm()
+  dialogVisible.value = true
+}
+
+const handleEdit = (row: DataManagerItem) => {
+  dialogVisible.value = true
+  isEdit.value = true
+  record.value = {
+    user_id: row.user_id,
+    is_superuser: row.is_superuser,
+    password: '',
+  }
+}
+
+const handleDelete = (row: DataManagerItem) => {
+  MB.confirm(t('Base.confirmDelete'), {
+    confirmButtonText: t('Base.confirm'),
+    cancelButtonText: t('Base.cancel'),
+    confirmButtonClass: 'confirm-danger',
+    type: 'warning',
+  })
+    .then(async () => {
+      if (prop.gateway) {
+        await deleteGatewayUser(prop.gateway, row.user_id)
+      } else {
+        await deleteAuthnUser(id.value, row.user_id)
+      }
+      resetPageAndLoadData()
+    })
+    .catch(() => {
+      // cancel
+    })
+}
+
+const save = async () => {
+  const validation = await recordForm.value.validate()
+  if (!validation) {
+    return
+  }
+  saveLoading.value = true
+  if (isEdit.value) {
+    handleUpdate()
+  } else {
+    handleAdd()
+  }
+}
+
+const handleAdd = async function () {
+  let res
+  try {
+    if (prop.gateway) {
+      res = await addGatewayUserManagement(prop.gateway, record.value)
+    } else {
+      res = await createAuthnUsers(id.value, record.value)
+    }
+    if (res) {
+      dialogVisible.value = false
+      M.success(t('Base.createSuccess'))
+      record.value = {
+        user_id: '',
+        password: '',
+        is_superuser: false,
+      }
+    }
+    loadData()
+  } catch (error) {
+    //
+  } finally {
+    saveLoading.value = false
+  }
+}
+
+const handleUpdate = async function () {
+  const { password, is_superuser, user_id } = record.value
+  const data = {
+    password: password,
+    is_superuser: is_superuser,
+  }
+  let res
+  if (prop.gateway) {
+    res = await updateGatewayUser(prop.gateway, user_id, data)
+  } else {
+    res = await updateAuthnUser(id.value, user_id, data)
+  }
+  if (res) {
+    dialogVisible.value = false
+    saveLoading.value = false
+    M.success(t('Base.updateSuccess'))
+    loadData()
+  }
+}
+
+const getFiledLabel = (field: 'clientid' | 'username') => {
+  const fieldMap = {
+    clientid: t('Base.clientid'),
+    username: t('Base.username'),
+  }
+  return fieldMap[field]
+}
+
+const resetPageAndLoadData = () => {
+  pageMeta.value.page = 1
+  loadData()
+}
+
+const resetIsSuperuser = () => {
+  searchVal.is_superuser = undefined
+}
+</script>
+
+<style lang="scss" scoped>
+.authn-default {
+  .searchbar {
+    height: 36px;
+    .el-input {
+      width: 260px;
+    }
+    .el-select {
+      width: 200px;
+      font-weight: normal;
+    }
+  }
+  .border-checkbox {
+    margin-top: 16px;
+  }
+
+  .add-funcs-container {
+    display: flex;
+    > .el-button,
+    > .file-upload {
+      margin-left: 16px;
+    }
+  }
+
+  .file-upload {
+    display: inline-block;
+    vertical-align: top;
+  }
+}
+</style>
diff --git a/src/views/Auth/AuthnDetails.vue b/src/views/Auth/AuthnDetails.vue
index 4e117ce39..b0859aac6 100644
--- a/src/views/Auth/AuthnDetails.vue
+++ b/src/views/Auth/AuthnDetails.vue
@@ -3,7 +3,7 @@
     <div class="detail-top">
       <detail-header
         v-if="!gateway"
-        :item="{ name: titleMap[currBackend], path: '/authentication' }"
+        :item="{ name: titleMap[currBackend], routeName: 'authentication-extended' }"
       >
         <template #content>
           <div class="vertical-align-center">
@@ -98,7 +98,10 @@
               ref="formCom"
             />
             <jwt-config ref="formCom" v-else v-model="configData" is-edit />
-            <CancelButton @click="$router.push('/authentication')" v-if="!gateway" />
+            <CancelButton
+              @click="$router.push({ name: 'authentication-extended' })"
+              v-if="!gateway"
+            />
             <el-button
               type="primary"
               :loading="isSubmitting"
diff --git a/src/views/Auth/AuthnExtended.vue b/src/views/Auth/AuthnExtended.vue
new file mode 100644
index 000000000..356a9b4b5
--- /dev/null
+++ b/src/views/Auth/AuthnExtended.vue
@@ -0,0 +1,144 @@
+<template>
+  <div>
+    <AuthnMenuTab />
+    <div class="authn app-wrapper">
+      <div class="section-header">
+        <div></div>
+        <NodeCache type="authn" />
+        <CreateButton @click="$router.push({ name: 'authentication-create' })" />
+      </div>
+      <el-table
+        ref="tableCom"
+        class="auth-table table-with-draggable"
+        :data="authnList"
+        v-loading.lock="isListLoading"
+        row-key="id"
+      >
+        <el-table-column prop="backend" :label="$t('Auth.mechanismAndBackend')" min-width="80">
+          <template #default="{ row }">
+            <router-link
+              :to="{ name: 'authenticationDetail', params: { id: row.id } }"
+              class="first-column-with-icon-type"
+            >
+              <img class="icon-type" :src="row.img" width="48" />
+              <div class="name-type-block">
+                <span class="name-data">{{ getAuthnItemBackendForShow(row) }}</span>
+                <span class="type-data">{{ getLabelByValue(row.mechanism) }}</span>
+              </div>
+            </router-link>
+          </template>
+        </el-table-column>
+        <el-table-column prop="metrics" :label="$t('Auth.status')">
+          <template #default="{ row }">
+            <CommonItemStatus :metrics="row.metrics" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="enable" :label="$t('Base.isEnabled')">
+          <template #default="{ row }">
+            <el-switch
+              v-model="row.enable"
+              :disabled="!$hasPermission('put')"
+              :before-change="handleSwitchStatus(row)"
+            />
+          </template>
+        </el-table-column>
+        <el-table-column prop="oper" :label="$t('Base.operation')">
+          <template #default="{ row, $index }">
+            <TableButton
+              :style="{ marginRight: '10px' }"
+              v-if="row.backend === 'built_in_database'"
+              @click="routeToDetail(row, 'users')"
+            >
+              {{ $t('Auth.users') }}
+            </TableButton>
+            <table-dropdown
+              :row-data="row"
+              :table-data-len="authnList.length"
+              :position="findIndex(row)"
+              @delete="handleDelete"
+              @setting="routeToDetail"
+              @move-up="moveAuthnUp($index)"
+              @move-down="moveAuthnDown($index)"
+              @move-to-top="moveAuthnToTop(row)"
+              @move-to-bottom="moveAuthnToBottom(row)"
+            />
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { deleteAuthn } from '@/api/auth'
+import { AuthnItem } from '@/types/auth'
+import { ElMessageBox as MB } from 'element-plus'
+import AuthnMenuTab from './components/AuthnMenuTab.vue'
+import NodeCache from './components/NodeCache.vue'
+import TableDropdown from './components/TableDropdown.vue'
+
+const router = useRouter()
+const { t } = useI18n()
+const {
+  isListLoading,
+  authnList,
+  tableCom,
+  getAuthnItemBackendForShow,
+  getAuthnList,
+  updateAuthnItemMetrics,
+  moveAuthnUp,
+  moveAuthnDown,
+  moveAuthnToTop,
+  moveAuthnToBottom,
+} = useAuthn()
+const { getLabelByValue } = useAuthnMechanismType()
+const { toggleAuthStatus } = useToggleAuthStatus()
+
+const toggleEnable = async (row: AuthnItemInTable) => {
+  try {
+    await toggleAuthStatus(row, 'authn')
+    row.enable = !row.enable
+
+    await updateAuthnItemMetrics(row)
+  } catch (error) {
+    //
+  }
+}
+
+const handleSwitchStatus = (authn: AuthnItemInTable) => {
+  return () => {
+    return toggleEnable(authn)
+  }
+}
+
+const handleDelete = async function ({ id, backend }: AuthnItem) {
+  try {
+    const confirmText = t('Auth.delAuthnConfirm', {
+      additionalTip: backend === 'built_in_database' ? t('Auth.deleteBuiltInTip') : '',
+    })
+    await MB.confirm(confirmText, {
+      confirmButtonText: t('Base.confirm'),
+      cancelButtonText: t('Base.cancel'),
+      confirmButtonClass: 'confirm-danger',
+      type: 'warning',
+    })
+    await deleteAuthn(id)
+    getAuthnList()
+  } catch (error) {
+    //
+  }
+}
+
+const routeToDetail = function ({ id }: AuthnItem, tab: string) {
+  router.push({ path: `/authentication/detail/${id}`, query: { tab } })
+}
+
+const findIndex = (row: AuthnItem) => {
+  return authnList.value.findIndex((item) => {
+    const id = `${item.mechanism}_${item.backend}`
+    return id === `${row.mechanism}_${row.backend}`
+  })
+}
+</script>
+
+<style lang="scss"></style>
diff --git a/src/views/Auth/components/AuthnMenuTab.vue b/src/views/Auth/components/AuthnMenuTab.vue
new file mode 100644
index 000000000..a4b12ea5b
--- /dev/null
+++ b/src/views/Auth/components/AuthnMenuTab.vue
@@ -0,0 +1,43 @@
+<template>
+  <el-menu
+    router
+    mode="horizontal"
+    class="authn-menu-tab"
+    :ellipsis="false"
+    :default-active="defaultSubMenu"
+  >
+    <el-menu-item
+      v-for="{ routeName, label } in subMenuList"
+      :key="routeName"
+      :index="routeName"
+      :route="{ name: routeName }"
+    >
+      {{ label }}
+    </el-menu-item>
+  </el-menu>
+</template>
+
+<script setup lang="ts">
+import {} from 'vue'
+
+const { t, tl } = useI18nTl('Auth')
+const subMenuList = [
+  {
+    routeName: 'authentication-default',
+    label: t('Base.default'),
+  },
+  {
+    routeName: 'authentication-extended',
+    label: t('Auth.extended'),
+  },
+]
+
+const route = useRoute()
+const defaultSubMenu = computed<string>(() => route.name?.toString() ?? '')
+</script>
+
+<style lang="scss">
+.authn-menu-tab {
+  margin: 24px 24px 32px;
+}
+</style>

From b793ce8796e944b8417fc737813ddea8509927ad Mon Sep 17 00:00:00 2001
From: Kinplemelon <wujiu529@gmail.com>
Date: Tue, 18 Nov 2025 17:48:17 +0800
Subject: [PATCH 2/6] refactor(authn): remove previous sorting

---
 src/api/auth.ts                             |  4 +-
 src/hooks/Auth/useAuthn.ts                  | 69 ++-------------------
 src/views/Auth/AuthnExtended.vue            | 19 +-----
 src/views/Auth/components/TableDropdown.vue | 29 +--------
 4 files changed, 10 insertions(+), 111 deletions(-)

diff --git a/src/api/auth.ts b/src/api/auth.ts
index 5597967ef..99aeefc5c 100644
--- a/src/api/auth.ts
+++ b/src/api/auth.ts
@@ -1,8 +1,8 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 import http from '@/common/http'
-import { AuthzSetting, ImportResult, Metrics } from '@/types/auth'
+import { AuthnItem, AuthzSetting, ImportResult, Metrics } from '@/types/auth'
 
-export function listAuthn(params = {}) {
+export function listAuthn(params = {}): Promise<AuthnItem[]> {
   return http.get('/authentication', { params })
 }
 
diff --git a/src/hooks/Auth/useAuthn.ts b/src/hooks/Auth/useAuthn.ts
index 2446a6294..e83ad364d 100644
--- a/src/hooks/Auth/useAuthn.ts
+++ b/src/hooks/Auth/useAuthn.ts
@@ -1,7 +1,7 @@
 import { listAuthn, queryAuthnItemMetrics } from '@/api/auth'
-import { AuthnItem, Metrics } from '@/types/auth'
-import { SortableEvent } from 'sortablejs'
 import jwtIcon from '@/assets/img/jwt.png'
+import { AuthnItem, Metrics } from '@/types/auth'
+import { AuthnMechanismType } from '@/types/enum'
 
 export type AuthnItemInTable = AuthnItem & {
   metrics?: Metrics
@@ -10,14 +10,9 @@ export type AuthnItemInTable = AuthnItem & {
 export default (): {
   isListLoading: Ref<boolean>
   authnList: Ref<AuthnItemInTable[]>
-  tableCom: Ref<Component>
   getAuthnItemBackendForShow: (item: AuthnItemInTable) => string
   getAuthnList: (isInit?: boolean) => Promise<void>
   updateAuthnItemMetrics: (authn: AuthnItem) => Promise<void>
-  moveAuthnUp: (index: number) => Promise<void>
-  moveAuthnDown: (index: number) => Promise<void>
-  moveAuthnToTop: (authn: AuthnItem) => any
-  moveAuthnToBottom: (authn: AuthnItem) => any
 } => {
   const isListLoading = ref(false)
   const authnList: Ref<Array<AuthnItemInTable>> = ref([])
@@ -45,13 +40,13 @@ export default (): {
       const res: AuthnItem[] = await listAuthn()
       authnList.value = res.map((item) => {
         const ret: AuthnItemInTable = item
-        if (ret.mechanism !== 'jwt' && ret.mechanism !== 'cinfo') {
+        if (ret.mechanism !== 'jwt' && ret.mechanism !== AuthnMechanismType.CINFO) {
           try {
             ret.img = getImg(`img/${ret.backend}.png`)
           } catch {
             ret.img = ''
           }
-        } else if (ret.mechanism === 'cinfo') {
+        } else if (ret.mechanism === AuthnMechanismType.CINFO) {
           ret.img = getImg(`img/cinfo.png`)
         } else {
           ret.img = jwtIcon
@@ -60,8 +55,6 @@ export default (): {
         return item
       })
       setAddedAuthn()
-      await nextTick()
-      initSortable()
     } catch (error) {
       console.error(error)
     } finally {
@@ -108,67 +101,13 @@ export default (): {
     }
   }
 
-  const {
-    moveAuthnBeforeAnotherAuthn,
-    moveAuthnAfterAnotherAuthn,
-    moveAuthnToTop: requestMoveAuthnToTop,
-    moveAuthnToBottom: requestMoveAuthnToBottom,
-  } = useHandleAuthnItem()
-  const moveAuthnUp = async (index: number) => handleDragEvent(index - 1, index, authnList.value)
-  const moveAuthnDown = async (index: number) => handleDragEvent(index + 1, index, authnList.value)
-  const moveAuthnToTop = async (row: AuthnItem) => {
-    try {
-      await requestMoveAuthnToTop(row)
-    } catch (error) {
-      // empty the array first when an error occurs, otherwise the view will not be updated
-      authnList.value = []
-    } finally {
-      getAuthnList()
-    }
-  }
-  const moveAuthnToBottom = async (row: AuthnItem) => {
-    try {
-      await requestMoveAuthnToBottom(row)
-    } catch (error) {
-      // empty the array first when an error occurs, otherwise the view will not be updated
-      authnList.value = []
-    } finally {
-      getAuthnList()
-    }
-  }
-  const { handleDragEvent } = useMove(
-    {
-      moveToBottom: moveAuthnToBottom,
-      moveToTop: moveAuthnToTop,
-      moveBeforeAnotherTarget: moveAuthnBeforeAnotherAuthn,
-      moveAfterAnotherTarget: moveAuthnAfterAnotherAuthn,
-    },
-    undefined,
-    getAuthnList,
-  )
-
-  const handleOrderChanged = async (evt: SortableEvent) => {
-    const { newIndex, oldIndex } = evt
-    if (newIndex === undefined || oldIndex === undefined) {
-      return
-    }
-    handleDragEvent(newIndex, oldIndex, authnList.value)
-  }
-
-  const { tableCom, initSortable } = useSortableTable(handleOrderChanged)
-
   initTableData()
 
   return {
     isListLoading,
     authnList,
-    tableCom,
     getAuthnItemBackendForShow,
     getAuthnList,
     updateAuthnItemMetrics,
-    moveAuthnUp,
-    moveAuthnDown,
-    moveAuthnToTop,
-    moveAuthnToBottom,
   }
 }
diff --git a/src/views/Auth/AuthnExtended.vue b/src/views/Auth/AuthnExtended.vue
index 356a9b4b5..72fca511c 100644
--- a/src/views/Auth/AuthnExtended.vue
+++ b/src/views/Auth/AuthnExtended.vue
@@ -7,13 +7,7 @@
         <NodeCache type="authn" />
         <CreateButton @click="$router.push({ name: 'authentication-create' })" />
       </div>
-      <el-table
-        ref="tableCom"
-        class="auth-table table-with-draggable"
-        :data="authnList"
-        v-loading.lock="isListLoading"
-        row-key="id"
-      >
+      <el-table class="auth-table" :data="authnList" v-loading.lock="isListLoading" row-key="id">
         <el-table-column prop="backend" :label="$t('Auth.mechanismAndBackend')" min-width="80">
           <template #default="{ row }">
             <router-link
@@ -43,7 +37,7 @@
           </template>
         </el-table-column>
         <el-table-column prop="oper" :label="$t('Base.operation')">
-          <template #default="{ row, $index }">
+          <template #default="{ row }">
             <TableButton
               :style="{ marginRight: '10px' }"
               v-if="row.backend === 'built_in_database'"
@@ -57,10 +51,6 @@
               :position="findIndex(row)"
               @delete="handleDelete"
               @setting="routeToDetail"
-              @move-up="moveAuthnUp($index)"
-              @move-down="moveAuthnDown($index)"
-              @move-to-top="moveAuthnToTop(row)"
-              @move-to-bottom="moveAuthnToBottom(row)"
             />
           </template>
         </el-table-column>
@@ -82,14 +72,9 @@ const { t } = useI18n()
 const {
   isListLoading,
   authnList,
-  tableCom,
   getAuthnItemBackendForShow,
   getAuthnList,
   updateAuthnItemMetrics,
-  moveAuthnUp,
-  moveAuthnDown,
-  moveAuthnToTop,
-  moveAuthnToBottom,
 } = useAuthn()
 const { getLabelByValue } = useAuthnMechanismType()
 const { toggleAuthStatus } = useToggleAuthStatus()
diff --git a/src/views/Auth/components/TableDropdown.vue b/src/views/Auth/components/TableDropdown.vue
index 17a298576..ff688098b 100644
--- a/src/views/Auth/components/TableDropdown.vue
+++ b/src/views/Auth/components/TableDropdown.vue
@@ -18,31 +18,6 @@
       </TableButton>
       <template #dropdown>
         <el-dropdown-menu>
-          <el-dropdown-item command="moveUp" :disabled="position === 0 || !$hasPermission('put')">
-            <ChevronUp class="w-4 h-4 mr-2" />
-            {{ $t('Base.up') }}
-          </el-dropdown-item>
-          <el-dropdown-item
-            command="moveDown"
-            :disabled="position === tableDataLen - 1 || !$hasPermission('put')"
-          >
-            <ChevronDown class="w-4 h-4 mr-2" />
-            {{ $t('Base.down') }}
-          </el-dropdown-item>
-          <el-dropdown-item
-            command="moveToTop"
-            :disabled="position === 0 || !$hasPermission('put')"
-          >
-            <ChevronsUp class="w-4 h-4 mr-2" />
-            {{ $t('Base.moveToTop') }}
-          </el-dropdown-item>
-          <el-dropdown-item
-            command="moveToBottom"
-            :disabled="position === tableDataLen - 1 || !$hasPermission('put')"
-          >
-            <ChevronsDown class="w-4 h-4 mr-2" />
-            {{ $t('Base.moveToBottom') }}
-          </el-dropdown-item>
           <el-dropdown-item
             :disabled="!$hasPermission('delete')"
             command="delete"
@@ -60,11 +35,11 @@
 <script lang="ts">
 import { AuthnItem } from '@/types/auth'
 import { CaretBottom } from '@element-plus/icons-vue'
-import { ChevronDown, ChevronsDown, ChevronsUp, ChevronUp, Trash2 } from 'lucide-vue-next'
+import { Trash2 } from 'lucide-vue-next'
 
 export default defineComponent({
   name: 'TableDropdown',
-  components: { CaretBottom, ChevronUp, ChevronDown, ChevronsUp, ChevronsDown, Trash2 },
+  components: { CaretBottom, Trash2 },
   props: {
     tableDataLen: {
       required: true,

From c269d108816268d34c757ae8cc8c7741dc4ece73 Mon Sep 17 00:00:00 2001
From: Kinplemelon <wujiu529@gmail.com>
Date: Wed, 19 Nov 2025 11:34:27 +0800
Subject: [PATCH 3/6] refactor(authn): merge steps for creating authentication

---
 src/i18n/components.ts         |   8 ++
 src/views/Auth/AuthnCreate.vue | 224 ++++++++++++++++-----------------
 src/views/Auth/style/auth.scss |  13 +-
 3 files changed, 130 insertions(+), 115 deletions(-)

diff --git a/src/i18n/components.ts b/src/i18n/components.ts
index f0a991184..8c6965b1e 100644
--- a/src/i18n/components.ts
+++ b/src/i18n/components.ts
@@ -55,6 +55,14 @@ export default {
     zh: '客户端认证',
     en: 'Authentication',
   },
+  'authentication-default': {
+    zh: '默认认证',
+    en: 'Default Authentication',
+  },
+  'authentication-extended': {
+    zh: '扩展认证',
+    en: 'Extended Authentication',
+  },
   authorization: {
     zh: '客户端授权',
     en: 'Authorization',
diff --git a/src/views/Auth/AuthnCreate.vue b/src/views/Auth/AuthnCreate.vue
index c0e9e8021..faf2c4435 100644
--- a/src/views/Auth/AuthnCreate.vue
+++ b/src/views/Auth/AuthnCreate.vue
@@ -53,117 +53,109 @@
                 : $t('Auth.dataSourceDesc')
             }}
           </p>
-          <el-radio-group
-            v-if="hasDatabaseToChoose"
-            v-model="backend"
-            class="select-database"
-            size="large"
-          >
-            <template v-for="item in databases" :key="item.value">
-              <el-badge
-                v-if="!isDisabledDatabase(item.value)"
-                :value="$t('Base.added')"
-                class="item"
-                :hidden="!!(!addedAuthn.includes(`${mechanism}_${item.value}`) || gateway)"
-              >
-                <el-radio
-                  :value="item.value"
-                  class="backend"
-                  border
-                  :disabled="addedAuthn.includes(`${mechanism}_${item.value}`) && !gateway"
-                >
-                  <img height="32" width="32" :src="item.img" :alt="item.key" />
-                  <span>{{ item.label }}</span>
-                </el-radio>
-              </el-badge>
-            </template>
-            <template v-if="others.length !== 0">
-              <el-badge
-                v-for="item in others"
-                :key="item.value"
-                :value="$t('Base.added')"
-                :hidden="!!(!addedAuthn.includes(`${mechanism}_${item.value}`) || gateway)"
-                class="item"
+          <el-row v-if="hasDatabaseToChoose">
+            <el-col :span="18">
+              <el-radio-group
+                :model-value="backend"
+                class="select-database"
+                size="large"
+                @update:model-value="
+                  handleBackendChange($event as DatabaseAndServer | 'built_in_database')
+                "
               >
-                <el-radio
-                  :key="item.value"
-                  :value="item.value"
-                  class="backend"
-                  border
-                  :disabled="addedAuthn.includes(`${mechanism}_${item.value}`) && !gateway"
-                >
-                  <img height="32" width="32" :src="item.img" :alt="item.key" />
-                  <span>{{ item.label }}</span>
-                </el-radio>
-              </el-badge>
-            </template>
-          </el-radio-group>
+                <el-row :gutter="20">
+                  <el-col :span="6" v-for="item in databases" :key="item.value">
+                    <el-badge
+                      v-if="!isDisabledDatabase(item.value)"
+                      :value="$t('Base.added')"
+                      class="item"
+                      :hidden="!!(!addedAuthn.includes(`${mechanism}_${item.value}`) || gateway)"
+                    >
+                      <el-radio
+                        :value="item.value"
+                        class="backend"
+                        border
+                        :disabled="addedAuthn.includes(`${mechanism}_${item.value}`) && !gateway"
+                      >
+                        <img height="32" width="32" :src="item.img" :alt="item.key" />
+                        <span>{{ item.label }}</span>
+                      </el-radio>
+                    </el-badge>
+                  </el-col>
+                  <el-col v-if="others.length !== 0" :span="6">
+                    <el-badge
+                      v-for="item in others"
+                      :key="item.value"
+                      :value="$t('Base.added')"
+                      :hidden="!!(!addedAuthn.includes(`${mechanism}_${item.value}`) || gateway)"
+                      class="item"
+                    >
+                      <el-radio
+                        :key="item.value"
+                        :value="item.value"
+                        class="backend"
+                        border
+                        :disabled="addedAuthn.includes(`${mechanism}_${item.value}`) && !gateway"
+                      >
+                        <img height="32" width="32" :src="item.img" :alt="item.key" />
+                        <span>{{ item.label }}</span>
+                      </el-radio>
+                    </el-badge>
+                  </el-col>
+                </el-row>
+              </el-radio-group>
+            </el-col>
+          </el-row>
           <p class="no-database-placeholder" v-else>
             {{ tl('noDatabasePlaceholder') }}
           </p>
-          <template v-if="others.length !== 0">
-            <el-radio-group v-model="backend" size="large"> </el-radio-group>
-          </template>
         </template>
-        <p v-else class="item-description">
-          {{
-            $t('Auth.noBackendDataSourceDesc', {
-              mechanism: getMechanismLabel(mechanism as AuthnMechanismType),
-            })
-          }}
-        </p>
-        <div class="step-btn">
-          <el-button @click="handleBack">
-            {{ $t('Base.backStep') }}
-          </el-button>
-          <el-button
-            type="primary"
-            @click="handleNext"
-            :disabled="needSelectInSecondStep && !backend"
-          >
-            {{ $t('Base.nextStep') }}
-          </el-button>
-        </div>
-      </div>
-      <!-- Config -->
-      <div v-else-if="step === 2">
-        <template v-if="mechanism !== 'jwt' && mechanism !== 'cinfo'">
-          <database-config
-            v-if="['mysql', 'postgresql', 'mongodb', 'redis'].includes(backend)"
-            v-model="configData"
-            ref="formCom"
-            :database="backend as DatabaseAndServerDOM"
-            auth-type="authn"
-          />
-          <built-in-config
-            v-else-if="backend === 'built_in_database'"
-            v-model="configData"
-            ref="formCom"
-            auth-type="authn"
-            :type="mechanism"
-          />
-          <ldap-config
-            auth-type="authn"
-            v-else-if="backend === 'ldap'"
-            v-model="configData"
-            ref="formCom"
+        <div v-if="showConfig">
+          <template v-if="mechanism !== 'jwt' && mechanism !== 'cinfo'">
+            <database-config
+              v-if="['mysql', 'postgresql', 'mongodb', 'redis'].includes(backend)"
+              v-model="configData"
+              ref="formCom"
+              auth-type="authn"
+              v-bind="{ database: backend as DatabaseAndServerDOM }"
+            />
+            <built-in-config
+              v-else-if="backend === 'built_in_database'"
+              v-model="configData"
+              ref="formCom"
+              auth-type="authn"
+              :type="mechanism"
+            />
+            <ldap-config
+              auth-type="authn"
+              v-else-if="backend === 'ldap'"
+              v-model="configData"
+              ref="formCom"
+            >
+            </ldap-config>
+            <http-config
+              auth-type="authn"
+              v-else-if="backend === 'http'"
+              v-model="configData"
+              ref="formCom"
+              :type="mechanism"
+            />
+            <kerberos-config
+              v-else-if="backend === 'kerberos'"
+              v-model="configData"
+              ref="formCom"
+            />
+          </template>
+          <jwt-config v-else-if="mechanism === 'jwt'" v-model="configData" ref="formCom" />
+          <c-info-config v-else-if="mechanism === 'cinfo'" v-model="configData" ref="formCom" />
+          <!-- Result -->
+          <div
+            v-if="testRes"
+            :class="['create-form', 'result-block', isWork ? 'success' : 'error']"
           >
-          </ldap-config>
-          <http-config
-            auth-type="authn"
-            v-else-if="backend === 'http'"
-            v-model="configData"
-            ref="formCom"
-            :type="mechanism"
-          />
-          <kerberos-config v-else-if="backend === 'kerberos'" v-model="configData" ref="formCom" />
-        </template>
-        <jwt-config v-else-if="mechanism === 'jwt'" v-model="configData" ref="formCom" />
-        <c-info-config v-else-if="mechanism === 'cinfo'" v-model="configData" ref="formCom" />
-        <!-- Result -->
-        <div v-if="testRes" :class="['create-form', 'result-block', isWork ? 'success' : 'error']">
-          <div class="result-title">
-            {{ isWork ? $t('Auth.testSuccess') : $t('Auth.testFailed') }}
+            <div class="result-title">
+              {{ isWork ? $t('Auth.testSuccess') : $t('Auth.testFailed') }}
+            </div>
           </div>
         </div>
         <div class="step-btn">
@@ -183,6 +175,7 @@
           </el-button>
         </div>
       </div>
+      <!-- Config -->
     </el-card>
   </div>
 </template>
@@ -309,7 +302,7 @@ const hasDatabaseToChoose = computed(() => {
 const needSelectInSecondStep = computed(() => databases.value.length + others.value.length > 0)
 
 const getGuideList = function () {
-  return [t('Auth.mechanism'), t('Auth.dataSource'), t('Auth.config')]
+  return [t('Auth.mechanism'), t('Auth.config')]
 }
 
 const findFirstDatabaseDidNotAdd = () => {
@@ -385,16 +378,23 @@ const beforeNext = function () {
       setDefaultBackendForGateway()
     }
     guideDescList.value.push(getMechanismLabel(mechanism.value as AuthnMechanismType))
-  } else if (step.value === 1) {
-    const data = factory(mechanism.value, backend.value)
-    configData.value = checkPresetDataAndSet(data)
-    if (mechanism.value !== 'jwt') {
-      guideDescList.value.push(titleMap[backend.value])
-    }
   }
 }
 const { step, activeGuidesIndex, guideDescList, handleNext, handleBack } = useGuide(beforeNext)
 
+const showConfig = ref(true)
+const handleBackendChange = async (newBackend: DatabaseAndServer | 'built_in_database') => {
+  showConfig.value = false
+  const data = factory(mechanism.value, newBackend)
+  configData.value = checkPresetDataAndSet(data)
+  if (mechanism.value !== 'jwt') {
+    guideDescList.value.push(titleMap[newBackend])
+  }
+  backend.value = newBackend
+  await nextTick()
+  showConfig.value = true
+}
+
 const handleCreate = async function () {
   const isVerified = (await formCom.value.validate().catch(() => {
     jumpToErrorFormItem()
diff --git a/src/views/Auth/style/auth.scss b/src/views/Auth/style/auth.scss
index 58c8cee82..af1673506 100644
--- a/src/views/Auth/style/auth.scss
+++ b/src/views/Auth/style/auth.scss
@@ -8,8 +8,8 @@
   .item-description {
     color: var(--color-text-secondary);
     font-size: 14px;
-    margin-top: 24px;
-    margin-bottom: 32px;
+    margin-top: 12px;
+    margin-bottom: 0;
   }
   .create-form {
     width: 75%;
@@ -19,11 +19,18 @@
         width: 220px;
       }
       &.backend {
-        width: 160px;
+        width: 100%;
       }
     }
     .select-database {
+      display: block;
       margin-bottom: 32px;
+      .el-badge {
+        width: 100%;
+      }
+      .el-radio {
+        margin-right: 0;
+      }
     }
   }
   .step-btn {

From 38eeab438432a5b57e2fce07118ff47cab480750 Mon Sep 17 00:00:00 2001
From: Kinplemelon <wujiu529@gmail.com>
Date: Wed, 19 Nov 2025 11:59:24 +0800
Subject: [PATCH 4/6] refactor(authz): simplify the authorization creation form

---
 src/i18n/Auth.ts               |   4 -
 src/views/Auth/AuthzCreate.vue | 151 ++++++++++++++++-----------------
 2 files changed, 74 insertions(+), 81 deletions(-)

diff --git a/src/i18n/Auth.ts b/src/i18n/Auth.ts
index 515b8761b..f4af7a3cc 100644
--- a/src/i18n/Auth.ts
+++ b/src/i18n/Auth.ts
@@ -63,10 +63,6 @@ export default {
     zh: '数据库',
     en: 'Database',
   },
-  noBackendDataSourceDesc: {
-    zh: '{ mechanism } 认证无需选择数据源，请继续下一步配置',
-    en: '{ mechanism } authentication does not require a backend, continue to the next step',
-  },
   reconnect: {
     zh: '自动重连',
     en: 'Reconnect',
diff --git a/src/views/Auth/AuthzCreate.vue b/src/views/Auth/AuthzCreate.vue
index e2a4ebcb4..9d73f32a2 100644
--- a/src/views/Auth/AuthzCreate.vue
+++ b/src/views/Auth/AuthzCreate.vue
@@ -2,75 +2,73 @@
   <div class="auth authz-create app-wrapper">
     <detail-header :item="{ name: $t('Auth.createAuthz'), path: '/authorization' }" />
     <el-card class="app-card">
-      <guide-bar
-        :guide-list="getGuideList()"
-        :active-guide-index-list="activeGuidesIndex"
-        :desc-list="guideDescList"
-      ></guide-bar>
-      <div v-if="step === 0" class="create-form">
+      <div class="create-form">
         <p class="item-description">
           {{ tl('dataSourceAuthzDesc') }}
         </p>
-        <el-radio-group v-model="type" size="large">
-          <el-badge
-            v-for="item in typeList"
-            :key="item.value"
-            :value="$t('Base.added')"
-            class="item"
-            :hidden="!addedAuthz.includes(item.value)"
-          >
-            <el-radio
-              :key="item.value"
-              :value="item.value"
-              class="backend"
-              border
-              :disabled="addedAuthz.includes(item.value)"
+        <el-row>
+          <el-col :span="18">
+            <el-radio-group
+              :model-value="type"
+              class="select-database"
+              size="large"
+              @update:model-value="handleBackendChange($event as string)"
             >
-              <img height="32" width="32" :src="item.img" :alt="item.label" />
-              <span>{{ item.label }}</span>
-            </el-radio>
-          </el-badge>
-        </el-radio-group>
-        <div class="step-btn">
-          <CancelButton @click="$router.push('/authorization')" />
-          <el-button type="primary" @click="handleNext" :disabled="!type">
-            {{ $t('Base.nextStep') }}
-          </el-button>
+              <el-row :gutter="20">
+                <el-col :span="6" v-for="item in typeList" :key="item.value">
+                  <el-badge
+                    :value="$t('Base.added')"
+                    class="item"
+                    :hidden="!addedAuthz.includes(item.value)"
+                  >
+                    <el-radio
+                      :key="item.value"
+                      :value="item.value"
+                      class="backend"
+                      border
+                      :disabled="addedAuthz.includes(item.value)"
+                    >
+                      <img height="32" width="32" :src="item.img" :alt="item.label" />
+                      <span>{{ item.label }}</span>
+                    </el-radio>
+                  </el-badge>
+                </el-col>
+              </el-row>
+            </el-radio-group>
+          </el-col>
+        </el-row>
+        <!-- Config -->
+        <div v-if="isConfigShow">
+          <file-config v-if="type === 'file'" ref="formCom" v-model="configData" />
+          <http-config
+            v-else-if="type === 'http'"
+            ref="formCom"
+            auth-type="authz"
+            v-model="configData"
+          />
+          <ldap-config
+            auth-type="authz"
+            v-else-if="type === 'ldap'"
+            v-model="configData"
+            ref="formCom"
+          >
+          </ldap-config>
+          <built-in-config
+            v-else-if="type === 'built_in_database'"
+            v-model="configData"
+            auth-type="authz"
+            ref="formCom"
+          />
+          <database-config
+            v-else-if="type && ['mysql', 'postgresql', 'mongodb', 'redis'].includes(type)"
+            ref="formCom"
+            v-model="configData"
+            :database="type"
+            auth-type="authz"
+          />
         </div>
-      </div>
-      <!-- Config -->
-      <div v-if="step === 1">
-        <file-config v-if="type === 'file'" ref="formCom" v-model="configData" />
-        <http-config
-          v-else-if="type === 'http'"
-          ref="formCom"
-          auth-type="authz"
-          v-model="configData"
-        />
-        <ldap-config
-          auth-type="authz"
-          v-else-if="type === 'ldap'"
-          v-model="configData"
-          ref="formCom"
-        >
-        </ldap-config>
-        <built-in-config
-          v-else-if="type === 'built_in_database'"
-          v-model="configData"
-          auth-type="authz"
-          ref="formCom"
-        />
-        <database-config
-          v-else-if="type && ['mysql', 'postgresql', 'mongodb', 'redis'].includes(type)"
-          ref="formCom"
-          v-model="configData"
-          :database="type"
-          auth-type="authz"
-        />
         <div class="step-btn">
-          <el-button @click="handleBack">
-            {{ $t('Base.backStep') }}
-          </el-button>
+          <CancelButton @click="$router.push('/authorization')" />
           <el-button
             type="primary"
             :disabled="!$hasPermission('post')"
@@ -90,11 +88,11 @@ import { createAuthz } from '@/api/auth'
 import builtInDatabaseIcon from '@/assets/img/built_in_database.png'
 import fileIcon from '@/assets/img/file.png'
 import httpIcon from '@/assets/img/http.png'
+import ldapIcon from '@/assets/img/ldap.png'
 import mongodbIcon from '@/assets/img/mongodb.png'
 import mysqlIcon from '@/assets/img/mysql.png'
 import postgresqlIcon from '@/assets/img/postgresql.png'
 import redisIcon from '@/assets/img/redis.png'
-import ldapIcon from '@/assets/img/ldap.png'
 import BuiltInConfig from './components/BuiltInConfig.vue'
 import DatabaseConfig from './components/DatabaseConfig.vue'
 import FileConfig from './components/FileConfig.vue'
@@ -106,9 +104,6 @@ type AuthzData = any
 const { t, tl } = useI18nTl('Auth')
 const router = useRouter()
 
-const getGuideList = function () {
-  return [t('Auth.dataSource'), t('Auth.config')]
-}
 const type = ref<string | undefined>('file')
 const configData = ref<AuthzData>({})
 const saveLoading = ref(false)
@@ -127,17 +122,19 @@ const typeList = ref([
   { label: 'LDAP', value: 'ldap', img: ldapIcon },
   { label: tl('HTTPServer'), value: 'http', img: httpIcon },
 ])
-const { titleMap } = useAuth()
-const { step, activeGuidesIndex, handleNext, handleBack, guideDescList } = useGuide(() => {
-  if (step.value === 0) {
-    if (!type.value) {
-      return
-    }
-    const data = factory(type.value)
-    configData.value = data
-    guideDescList.value.push(titleMap[type.value])
+
+const isConfigShow = ref(true)
+const handleBackendChange = async (newBackend: string) => {
+  if (!newBackend) {
+    return
   }
-})
+  isConfigShow.value = false
+  const data = factory(newBackend)
+  configData.value = data
+  type.value = newBackend
+  await nextTick()
+  isConfigShow.value = true
+}
 
 const addedAuthz = computed<Array<string>>(() => {
   const stored = sessionStorage.getItem('addedAuthz')

From 3b061951da8081625aa0b43cae573eca38c5a72b Mon Sep 17 00:00:00 2001
From: Kinplemelon <wujiu529@gmail.com>
Date: Wed, 19 Nov 2025 15:20:35 +0800
Subject: [PATCH 5/6] refactor(authn): extract some components

---
 src/hooks/Auth/useBuiltInDatabaseAuthn.ts     |  20 ++
 src/types/auth.d.ts                           |   7 +-
 src/views/Auth/AuthnCreate.vue                |   2 +-
 src/views/Auth/AuthnDefault.vue               | 228 +++---------------
 src/views/Auth/AuthnExtended.vue              |   4 +-
 src/views/Auth/components/AuthnManager.vue    | 195 ++-------------
 src/views/Auth/components/AuthnUserDialog.vue | 178 ++++++++++++++
 src/views/Auth/components/AuthnUserTable.vue  |  59 +++++
 8 files changed, 318 insertions(+), 375 deletions(-)
 create mode 100644 src/hooks/Auth/useBuiltInDatabaseAuthn.ts
 create mode 100644 src/views/Auth/components/AuthnUserDialog.vue
 create mode 100644 src/views/Auth/components/AuthnUserTable.vue

diff --git a/src/hooks/Auth/useBuiltInDatabaseAuthn.ts b/src/hooks/Auth/useBuiltInDatabaseAuthn.ts
new file mode 100644
index 000000000..eb8f1c258
--- /dev/null
+++ b/src/hooks/Auth/useBuiltInDatabaseAuthn.ts
@@ -0,0 +1,20 @@
+import { AuthnMechanismType, DatabasesType } from '@/types/enum'
+
+const useBuiltInDatabaseAuthn = () => {
+  const defaultAuthnId = `${AuthnMechanismType.PasswordBased}:${DatabasesType.BuiltInDatabase}`
+
+  const { t } = useI18n()
+  const getFiledLabel = (field: 'clientid' | 'username') => {
+    const fieldMap = {
+      clientid: t('Base.clientid'),
+      username: t('Base.username'),
+    }
+    return fieldMap[field]
+  }
+  return {
+    defaultAuthnId,
+    getFiledLabel,
+  }
+}
+
+export default useBuiltInDatabaseAuthn
diff --git a/src/types/auth.d.ts b/src/types/auth.d.ts
index 322871b39..bd9f248af 100644
--- a/src/types/auth.d.ts
+++ b/src/types/auth.d.ts
@@ -71,12 +71,15 @@ export interface BuiltInDBItem {
   username: string
 }
 
-export interface DataManagerItem {
+export interface AuthnUser {
   user_id: string
-  password: string
   is_superuser: boolean
 }
 
+export interface DataManagerItem extends AuthnUser {
+  password: string
+}
+
 export type Metrics = MetricsDataWithExtraData<{
   node_status: Array<{
     node: string
diff --git a/src/views/Auth/AuthnCreate.vue b/src/views/Auth/AuthnCreate.vue
index faf2c4435..8498ae181 100644
--- a/src/views/Auth/AuthnCreate.vue
+++ b/src/views/Auth/AuthnCreate.vue
@@ -251,7 +251,7 @@ const { authnMechanismTypeList } = useAuthnMechanismType()
 
 const supportBackendMap: BackendMap = {
   password_based: {
-    // built_in_database: tl('builtInDatabase'),
+    ...(props.gateway ? { built_in_database: tl('builtInDatabase') } : {}),
     mysql: 'MySQL',
     mongodb: 'MongoDB',
     postgresql: 'PostgreSQL',
diff --git a/src/views/Auth/AuthnDefault.vue b/src/views/Auth/AuthnDefault.vue
index 5cc01c717..0c27e2e48 100644
--- a/src/views/Auth/AuthnDefault.vue
+++ b/src/views/Auth/AuthnDefault.vue
@@ -26,145 +26,65 @@
           </el-space>
         </div>
         <div class="add-funcs-container">
-          <template v-if="mechanism === 'password_based'">
-            <authn-users-import @uploadedData="loadData" />
-          </template>
+          <AuthnUsersImport @uploadedData="loadData" />
           <CreateButton @click="addCommand">{{ t('Base.add') }}</CreateButton>
         </div>
       </div>
-
-      <el-table :data="tableData" v-loading.lock="lockTable">
-        <el-table-column prop="user_id" :label="getFiledLabel(field)">
-          <template #default="{ row }">
-            {{ replaceSpaceForHTML(row.user_id) }}
-          </template>
-        </el-table-column>
-        <el-table-column prop="is_superuser" :label="$t('Auth.isSuperuser')">
-          <template #default="{ row }">
-            {{ row.is_superuser ? $t('Base.yes') : $t('Base.no') }}
-          </template>
-        </el-table-column>
-        <el-table-column :label="$t('Base.operation')">
-          <template #default="{ row }">
-            <TableButton :disabled="!$hasPermission('put')" @click="handleEdit(row)">
-              {{ $t('Base.edit') }}
-            </TableButton>
-            <TableButton :disabled="!$hasPermission('delete')" @click="handleDelete(row)">
-              {{ $t('Base.delete') }}
-            </TableButton>
-          </template>
-        </el-table-column>
-      </el-table>
+      <AuthnUserTable
+        :data="tableData"
+        :field="field"
+        v-loading.lock="lockTable"
+        @edit="handleEdit"
+        @delete="handleDelete"
+      />
       <div class="emq-table-footer">
         <common-pagination v-model:metaData="pageMeta" @loadPage="loadData" />
       </div>
     </div>
-    <el-dialog
-      :title="isEdit ? $t('Base.edit') : $t('Base.add')"
-      width="480px"
+    <AuthnUserDialog
       v-model="dialogVisible"
-      destroy-on-close
-    >
-      <el-form
-        ref="recordForm"
-        :model="record"
-        :rules="getRules()"
-        label-position="top"
-        require-asterisk-position="right"
-      >
-        <el-form-item prop="user_id" :label="getFiledLabel(field)">
-          <el-input v-model="record.user_id" :disabled="isEdit" />
-        </el-form-item>
-        <el-form-item prop="password" :label="$t('General.password')">
-          <el-input
-            v-model="record.password"
-            type="password"
-            show-password
-            autocomplete="one-time-code"
-          />
-        </el-form-item>
-        <el-form-item>
-          <div class="border-checkbox">
-            <el-checkbox v-model="record.is_superuser" :label="$t('Auth.isSuperuser')" />
-            <p class="checkbox-note">
-              {{ $t('Auth.isSuperuserDesc') }}
-            </p>
-          </div>
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <div class="dialog-align-footer">
-          <CancelButton @click="dialogVisible = false" />
-          <el-button
-            type="primary"
-            :disabled="!$hasPermission('post')"
-            :loading="saveLoading"
-            @click="save"
-          >
-            {{ isEdit ? $t('Base.update') : $t('Base.save') }}
-          </el-button>
-        </div>
-      </template>
-    </el-dialog>
+      :authn-id="id"
+      :field="field"
+      :user="currentItem"
+      @save="loadData"
+    />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { createAuthnUsers, deleteAuthnUser, loadAuthnUsers, updateAuthnUser } from '@/api/auth'
-import {
-  addGatewayUserManagement,
-  deleteGatewayUser,
-  getGatewayUserManagement,
-  updateGatewayUser,
-} from '@/api/gateway'
+import { deleteAuthnUser, loadAuthnUsers } from '@/api/auth'
+import useBuiltInDatabaseAuthn from '@/hooks/Auth/useBuiltInDatabaseAuthn'
 import { DataManagerItem } from '@/types/auth'
-import { ElMessage as M, ElMessageBox as MB } from 'element-plus'
-import AuthnUsersImport from './components/AuthnUsersImport.vue'
+import { ElMessageBox as MB } from 'element-plus'
 import AuthnMenuTab from './components/AuthnMenuTab.vue'
-
-const createRawUserForm = () => ({
-  user_id: '',
-  password: '',
-  is_superuser: false,
-})
+import AuthnUserDialog from './components/AuthnUserDialog.vue'
+import AuthnUsersImport from './components/AuthnUsersImport.vue'
+import AuthnUserTable from './components/AuthnUserTable.vue'
 
 const prop = defineProps({
+  // TODO:
   field: {
     type: String as PropType<'username' | 'clientid'>,
     required: true,
     default: 'username',
   },
-  gateway: {
-    type: String,
-    required: false,
-    default: '',
-  },
 })
 
 const { t } = useI18n()
-const record = ref<DataManagerItem>(createRawUserForm())
+const currentItem = ref<DataManagerItem | undefined>(undefined)
 const tableData = ref([])
 const lockTable = ref(false)
 const dialogVisible = ref(false)
-const route = useRoute()
-const recordForm = ref()
 const isEdit = ref(false)
-const saveLoading = ref(false)
 const searchVal = reactive({
   user_id: '',
   is_superuser: undefined,
 })
 const { pageMeta, pageParams, initPageMeta, setPageMeta } = usePaginationWithHasNext()
 
-const id = computed(function (): string {
-  return route.params.id as string
-})
+const { defaultAuthnId, getFiledLabel } = useBuiltInDatabaseAuthn()
 
-const reg = /^(?<mechanism>.+):.+$/
-const mechanism = computed(() => {
-  const matchRes = id.value?.match(reg)
-  return matchRes ? matchRes.groups?.mechanism : ''
-})
+const id = computed(() => defaultAuthnId)
 
 const loadData = async () => {
   const { user_id, is_superuser } = searchVal
@@ -177,11 +97,7 @@ const loadData = async () => {
   lockTable.value = true
   let res
   try {
-    if (prop.gateway) {
-      res = await getGatewayUserManagement(prop.gateway, sendParams)
-    } else {
-      res = await loadAuthnUsers(id.value, sendParams)
-    }
+    res = await loadAuthnUsers(id.value, sendParams)
     if (res) {
       tableData.value = res.data
       setPageMeta(res?.meta)
@@ -196,31 +112,16 @@ const loadData = async () => {
 
 onMounted(loadData)
 
-const getRules = function () {
-  let message = t('Auth.pleaseEnterUsername')
-  if (prop.field === 'clientid') {
-    message = t('Auth.pleaseEnterClientID')
-  }
-  const rules = {
-    user_id: [{ required: true, message, trigger: 'blur' }],
-    password: [{ required: true, message: t('General.pleaseEnterPassword') }],
-  }
-  if (isEdit.value) {
-    Reflect.deleteProperty(rules, 'user_id')
-  }
-  return rules
-}
-
 const addCommand = () => {
   isEdit.value = false
-  record.value = createRawUserForm()
+  currentItem.value = undefined
   dialogVisible.value = true
 }
 
 const handleEdit = (row: DataManagerItem) => {
   dialogVisible.value = true
   isEdit.value = true
-  record.value = {
+  currentItem.value = {
     user_id: row.user_id,
     is_superuser: row.is_superuser,
     password: '',
@@ -235,11 +136,7 @@ const handleDelete = (row: DataManagerItem) => {
     type: 'warning',
   })
     .then(async () => {
-      if (prop.gateway) {
-        await deleteGatewayUser(prop.gateway, row.user_id)
-      } else {
-        await deleteAuthnUser(id.value, row.user_id)
-      }
+      await deleteAuthnUser(id.value, row.user_id)
       resetPageAndLoadData()
     })
     .catch(() => {
@@ -247,72 +144,6 @@ const handleDelete = (row: DataManagerItem) => {
     })
 }
 
-const save = async () => {
-  const validation = await recordForm.value.validate()
-  if (!validation) {
-    return
-  }
-  saveLoading.value = true
-  if (isEdit.value) {
-    handleUpdate()
-  } else {
-    handleAdd()
-  }
-}
-
-const handleAdd = async function () {
-  let res
-  try {
-    if (prop.gateway) {
-      res = await addGatewayUserManagement(prop.gateway, record.value)
-    } else {
-      res = await createAuthnUsers(id.value, record.value)
-    }
-    if (res) {
-      dialogVisible.value = false
-      M.success(t('Base.createSuccess'))
-      record.value = {
-        user_id: '',
-        password: '',
-        is_superuser: false,
-      }
-    }
-    loadData()
-  } catch (error) {
-    //
-  } finally {
-    saveLoading.value = false
-  }
-}
-
-const handleUpdate = async function () {
-  const { password, is_superuser, user_id } = record.value
-  const data = {
-    password: password,
-    is_superuser: is_superuser,
-  }
-  let res
-  if (prop.gateway) {
-    res = await updateGatewayUser(prop.gateway, user_id, data)
-  } else {
-    res = await updateAuthnUser(id.value, user_id, data)
-  }
-  if (res) {
-    dialogVisible.value = false
-    saveLoading.value = false
-    M.success(t('Base.updateSuccess'))
-    loadData()
-  }
-}
-
-const getFiledLabel = (field: 'clientid' | 'username') => {
-  const fieldMap = {
-    clientid: t('Base.clientid'),
-    username: t('Base.username'),
-  }
-  return fieldMap[field]
-}
-
 const resetPageAndLoadData = () => {
   pageMeta.value.page = 1
   loadData()
@@ -335,9 +166,6 @@ const resetIsSuperuser = () => {
       font-weight: normal;
     }
   }
-  .border-checkbox {
-    margin-top: 16px;
-  }
 
   .add-funcs-container {
     display: flex;
diff --git a/src/views/Auth/AuthnExtended.vue b/src/views/Auth/AuthnExtended.vue
index 72fca511c..90e465a83 100644
--- a/src/views/Auth/AuthnExtended.vue
+++ b/src/views/Auth/AuthnExtended.vue
@@ -126,4 +126,6 @@ const findIndex = (row: AuthnItem) => {
 }
 </script>
 
-<style lang="scss"></style>
+<style lang="scss">
+@use './style/authTable.scss';
+</style>
diff --git a/src/views/Auth/components/AuthnManager.vue b/src/views/Auth/components/AuthnManager.vue
index b5f542518..1877a89a3 100644
--- a/src/views/Auth/components/AuthnManager.vue
+++ b/src/views/Auth/components/AuthnManager.vue
@@ -30,100 +30,37 @@
         <CreateButton @click="addCommand">{{ t('Base.add') }}</CreateButton>
       </div>
     </div>
-
-    <el-table :data="tableData" v-loading.lock="lockTable">
-      <el-table-column prop="user_id" :label="getFiledLabel(field)">
-        <template #default="{ row }">
-          {{ replaceSpaceForHTML(row.user_id) }}
-        </template>
-      </el-table-column>
-      <el-table-column prop="is_superuser" :label="$t('Auth.isSuperuser')">
-        <template #default="{ row }">
-          {{ row.is_superuser ? $t('Base.yes') : $t('Base.no') }}
-        </template>
-      </el-table-column>
-      <el-table-column :label="$t('Base.operation')">
-        <template #default="{ row }">
-          <TableButton :disabled="!$hasPermission('put')" @click="handleEdit(row)">
-            {{ $t('Base.edit') }}
-          </TableButton>
-          <TableButton :disabled="!$hasPermission('delete')" @click="handleDelete(row)">
-            {{ $t('Base.delete') }}
-          </TableButton>
-        </template>
-      </el-table-column>
-    </el-table>
+    <AuthnUserTable
+      :data="tableData"
+      :field="field"
+      v-loading.lock="lockTable"
+      @edit="handleEdit"
+      @delete="handleDelete"
+    />
     <div class="emq-table-footer">
       <common-pagination v-model:metaData="pageMeta" @loadPage="loadData" />
     </div>
 
-    <el-dialog
-      :title="isEdit ? $t('Base.edit') : $t('Base.add')"
-      width="480px"
+    <AuthnUserDialog
       v-model="dialogVisible"
-      destroy-on-close
-    >
-      <el-form
-        ref="recordForm"
-        :model="record"
-        :rules="getRules()"
-        label-position="top"
-        require-asterisk-position="right"
-      >
-        <el-form-item prop="user_id" :label="getFiledLabel(field)">
-          <el-input v-model="record.user_id" :disabled="isEdit" />
-        </el-form-item>
-        <el-form-item prop="password" :label="$t('General.password')">
-          <el-input
-            v-model="record.password"
-            type="password"
-            show-password
-            autocomplete="one-time-code"
-          />
-        </el-form-item>
-        <el-form-item>
-          <div class="border-checkbox">
-            <el-checkbox v-model="record.is_superuser" :label="$t('Auth.isSuperuser')" />
-            <p class="checkbox-note">
-              {{ $t('Auth.isSuperuserDesc') }}
-            </p>
-          </div>
-        </el-form-item>
-      </el-form>
-      <template #footer>
-        <div class="dialog-align-footer">
-          <CancelButton @click="dialogVisible = false" />
-          <el-button
-            type="primary"
-            :disabled="!$hasPermission('post')"
-            :loading="saveLoading"
-            @click="save"
-          >
-            {{ isEdit ? $t('Base.update') : $t('Base.save') }}
-          </el-button>
-        </div>
-      </template>
-    </el-dialog>
+      :authn-id="id"
+      :field="field"
+      :user="currentItem"
+      :gateway="gateway"
+      @save="loadData"
+    />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { createAuthnUsers, deleteAuthnUser, loadAuthnUsers, updateAuthnUser } from '@/api/auth'
-import {
-  addGatewayUserManagement,
-  deleteGatewayUser,
-  getGatewayUserManagement,
-  updateGatewayUser,
-} from '@/api/gateway'
+import { deleteAuthnUser, loadAuthnUsers } from '@/api/auth'
+import { deleteGatewayUser, getGatewayUserManagement } from '@/api/gateway'
 import { DataManagerItem } from '@/types/auth'
-import { ElMessage as M, ElMessageBox as MB } from 'element-plus'
+import { ElMessageBox as MB } from 'element-plus'
+import AuthnUserDialog from './AuthnUserDialog.vue'
 import AuthnUsersImport from './AuthnUsersImport.vue'
-
-const createRawUserForm = () => ({
-  user_id: '',
-  password: '',
-  is_superuser: false,
-})
+import AuthnUserTable from './AuthnUserTable.vue'
+import useBuiltInDatabaseAuthn from '@/hooks/Auth/useBuiltInDatabaseAuthn'
 
 const prop = defineProps({
   field: {
@@ -139,14 +76,12 @@ const prop = defineProps({
 })
 
 const { t } = useI18n()
-const record = ref<DataManagerItem>(createRawUserForm())
+const currentItem = ref<DataManagerItem | undefined>(undefined)
 const tableData = ref([])
 const lockTable = ref(false)
 const dialogVisible = ref(false)
 const route = useRoute()
-const recordForm = ref()
 const isEdit = ref(false)
-const saveLoading = ref(false)
 const searchVal = reactive({
   user_id: '',
   is_superuser: undefined,
@@ -193,31 +128,16 @@ const loadData = async () => {
 
 onMounted(loadData)
 
-const getRules = function () {
-  let message = t('Auth.pleaseEnterUsername')
-  if (prop.field === 'clientid') {
-    message = t('Auth.pleaseEnterClientID')
-  }
-  const rules = {
-    user_id: [{ required: true, message, trigger: 'blur' }],
-    password: [{ required: true, message: t('General.pleaseEnterPassword') }],
-  }
-  if (isEdit.value) {
-    Reflect.deleteProperty(rules, 'user_id')
-  }
-  return rules
-}
-
 const addCommand = () => {
   isEdit.value = false
-  record.value = createRawUserForm()
+  currentItem.value = undefined
   dialogVisible.value = true
 }
 
 const handleEdit = (row: DataManagerItem) => {
   dialogVisible.value = true
   isEdit.value = true
-  record.value = {
+  currentItem.value = {
     user_id: row.user_id,
     is_superuser: row.is_superuser,
     password: '',
@@ -244,71 +164,7 @@ const handleDelete = (row: DataManagerItem) => {
     })
 }
 
-const save = async () => {
-  const validation = await recordForm.value.validate()
-  if (!validation) {
-    return
-  }
-  saveLoading.value = true
-  if (isEdit.value) {
-    handleUpdate()
-  } else {
-    handleAdd()
-  }
-}
-
-const handleAdd = async function () {
-  let res
-  try {
-    if (prop.gateway) {
-      res = await addGatewayUserManagement(prop.gateway, record.value)
-    } else {
-      res = await createAuthnUsers(id.value, record.value)
-    }
-    if (res) {
-      dialogVisible.value = false
-      M.success(t('Base.createSuccess'))
-      record.value = {
-        user_id: '',
-        password: '',
-        is_superuser: false,
-      }
-    }
-    loadData()
-  } catch (error) {
-    //
-  } finally {
-    saveLoading.value = false
-  }
-}
-
-const handleUpdate = async function () {
-  const { password, is_superuser, user_id } = record.value
-  const data = {
-    password: password,
-    is_superuser: is_superuser,
-  }
-  let res
-  if (prop.gateway) {
-    res = await updateGatewayUser(prop.gateway, user_id, data)
-  } else {
-    res = await updateAuthnUser(id.value, user_id, data)
-  }
-  if (res) {
-    dialogVisible.value = false
-    saveLoading.value = false
-    M.success(t('Base.updateSuccess'))
-    loadData()
-  }
-}
-
-const getFiledLabel = (field: 'clientid' | 'username') => {
-  const fieldMap = {
-    clientid: t('Base.clientid'),
-    username: t('Base.username'),
-  }
-  return fieldMap[field]
-}
+const { getFiledLabel } = useBuiltInDatabaseAuthn()
 
 const resetPageAndLoadData = () => {
   pageMeta.value.page = 1
@@ -332,9 +188,6 @@ const resetIsSuperuser = () => {
       font-weight: normal;
     }
   }
-  .border-checkbox {
-    margin-top: 16px;
-  }
 
   .add-funcs-container {
     display: flex;
diff --git a/src/views/Auth/components/AuthnUserDialog.vue b/src/views/Auth/components/AuthnUserDialog.vue
new file mode 100644
index 000000000..5c9f8add2
--- /dev/null
+++ b/src/views/Auth/components/AuthnUserDialog.vue
@@ -0,0 +1,178 @@
+<template>
+  <el-dialog
+    :title="isEdit ? tl('edit') : tl('add')"
+    width="480px"
+    v-model="dialogVisible"
+    destroy-on-close
+    @open="handleOpen"
+    @close="handleClose"
+  >
+    <el-form
+      ref="recordForm"
+      :model="record"
+      :rules="rules"
+      label-position="top"
+      require-asterisk-position="right"
+    >
+      <el-form-item prop="user_id" :label="getFiledLabel(field)">
+        <el-input v-model="record.user_id" :disabled="isEdit" />
+      </el-form-item>
+      <el-form-item prop="password" :label="t('General.password')">
+        <el-input
+          v-model="record.password"
+          type="password"
+          show-password
+          autocomplete="one-time-code"
+        />
+      </el-form-item>
+      <el-form-item>
+        <div class="border-checkbox">
+          <el-checkbox v-model="record.is_superuser" :label="t('Auth.isSuperuser')" />
+          <p class="checkbox-note">
+            {{ t('Auth.isSuperuserDesc') }}
+          </p>
+        </div>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-align-footer">
+        <CancelButton @click="dialogVisible = false" />
+        <el-button
+          type="primary"
+          :disabled="!$hasPermission('post')"
+          :loading="saveLoading"
+          @click="save"
+        >
+          {{ isEdit ? tl('update') : tl('save') }}
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { createAuthnUsers, updateAuthnUser } from '@/api/auth'
+import { addGatewayUserManagement, updateGatewayUser } from '@/api/gateway'
+import useBuiltInDatabaseAuthn from '@/hooks/Auth/useBuiltInDatabaseAuthn'
+import { AuthnUser, DataManagerItem } from '@/types/auth'
+import type { FormInstance } from 'element-plus'
+
+const props = defineProps<{
+  modelValue: boolean
+  authnId: string
+  field: 'username' | 'clientid'
+  user?: AuthnUser
+  gateway?: string
+}>()
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+  (e: 'save'): void
+}>()
+
+const dialogVisible = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value) {
+    emit('update:modelValue', value)
+  },
+})
+
+const isEdit = computed(() => !!props.user)
+
+const { t, tl } = useI18nTl('Base')
+
+const record = ref<DataManagerItem>({} as DataManagerItem)
+const handleOpen = () => {
+  if (props.user) {
+    record.value = { ...props.user, password: '' }
+  }
+}
+
+const recordForm = useTemplateRef<FormInstance>('recordForm')
+const rules = computed(() => {
+  const message =
+    props.field === 'clientid' ? t('Auth.pleaseEnterClientID') : t('Auth.pleaseEnterUsername')
+  const ret = {
+    user_id: [{ required: true, message, trigger: 'blur' }],
+    password: [{ required: true, message: t('General.pleaseEnterPassword') }],
+  }
+  return ret
+})
+
+const createRawUserForm = () => ({
+  user_id: '',
+  password: '',
+  is_superuser: false,
+})
+const handleClose = () => {
+  record.value = createRawUserForm()
+}
+
+const { getFiledLabel } = useBuiltInDatabaseAuthn()
+
+const saveLoading = ref(false)
+const save = async () => {
+  const validation = await recordForm.value?.validate()
+  if (!validation) {
+    return
+  }
+  saveLoading.value = true
+  if (isEdit.value) {
+    handleUpdate()
+  } else {
+    handleAdd()
+  }
+}
+
+const handleAdd = async function () {
+  let res
+  try {
+    if (props.gateway) {
+      res = await addGatewayUserManagement(props.gateway, record.value)
+    } else {
+      res = await createAuthnUsers(props.authnId, record.value)
+    }
+    if (res) {
+      dialogVisible.value = false
+      ElMessage.success(t('Base.createSuccess'))
+      record.value = {
+        user_id: '',
+        password: '',
+        is_superuser: false,
+      }
+    }
+    emit('save')
+  } catch (error) {
+    //
+  } finally {
+    saveLoading.value = false
+  }
+}
+
+const handleUpdate = async function () {
+  const { password, is_superuser, user_id } = record.value
+  const data = {
+    password: password,
+    is_superuser: is_superuser,
+  }
+  let res
+  if (props.gateway) {
+    res = await updateGatewayUser(props.gateway, user_id, data)
+  } else {
+    res = await updateAuthnUser(props.authnId, user_id, data)
+  }
+  if (res) {
+    dialogVisible.value = false
+    saveLoading.value = false
+    ElMessage.success(t('Base.updateSuccess'))
+    emit('save')
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.border-checkbox {
+  margin-top: 16px;
+}
+</style>
diff --git a/src/views/Auth/components/AuthnUserTable.vue b/src/views/Auth/components/AuthnUserTable.vue
new file mode 100644
index 000000000..70ecec217
--- /dev/null
+++ b/src/views/Auth/components/AuthnUserTable.vue
@@ -0,0 +1,59 @@
+<template>
+  <el-table :data="data">
+    <el-table-column prop="user_id" :label="getFiledLabel(field)">
+      <template #default="{ row }">
+        {{ replaceSpaceForHTML(row.user_id) }}
+      </template>
+    </el-table-column>
+    <el-table-column prop="is_superuser" :label="t('Auth.isSuperuser')">
+      <template #default="{ row }">
+        {{ row.is_superuser ? tl('yes') : tl('no') }}
+      </template>
+    </el-table-column>
+    <el-table-column :label="tl('operation')">
+      <template #default="{ row }">
+        <TableButton :disabled="!$hasPermission('put')" @click="handleEdit(row)">
+          {{ tl('edit') }}
+        </TableButton>
+        <TableButton :disabled="!$hasPermission('delete')" @click="handleDelete(row)">
+          {{ tl('delete') }}
+        </TableButton>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script setup lang="ts">
+import useBuiltInDatabaseAuthn from '@/hooks/Auth/useBuiltInDatabaseAuthn'
+import { DataManagerItem } from '@/types/auth'
+
+type FieldType = 'username' | 'clientid'
+
+withDefaults(
+  defineProps<{
+    data: DataManagerItem[]
+    field?: FieldType
+  }>(),
+  {
+    field: 'username',
+  },
+)
+const emit = defineEmits<{
+  (e: 'edit', row: DataManagerItem): void
+  (e: 'delete', row: DataManagerItem): void
+}>()
+
+const { t, tl } = useI18nTl('Base')
+
+const handleEdit = (row: DataManagerItem) => {
+  emit('edit', row)
+}
+
+const handleDelete = (row: DataManagerItem) => {
+  emit('delete', row)
+}
+
+const { getFiledLabel } = useBuiltInDatabaseAuthn()
+</script>
+
+<style lang="scss"></style>

From d568b56b317cc1e0a4b1e1c2e9d93e95942b85bc Mon Sep 17 00:00:00 2001
From: Kinplemelon <wujiu529@gmail.com>
Date: Wed, 19 Nov 2025 17:07:30 +0800
Subject: [PATCH 6/6] refactor(authn): unify style

---
 src/views/Auth/AuthnDefault.vue | 77 ++++++++++++++++++---------------
 1 file changed, 43 insertions(+), 34 deletions(-)

diff --git a/src/views/Auth/AuthnDefault.vue b/src/views/Auth/AuthnDefault.vue
index 0c27e2e48..75a53b848 100644
--- a/src/views/Auth/AuthnDefault.vue
+++ b/src/views/Auth/AuthnDefault.vue
@@ -1,31 +1,41 @@
 <template>
   <div class="authn-default">
     <AuthnMenuTab />
+    <el-form class="search-wrapper without-padding-top" @keyup.enter="resetPageAndLoadData">
+      <el-row :gutter="20">
+        <el-col v-bind="colProps">
+          <el-input
+            v-model="searchVal.user_id"
+            clearable
+            :placeholder="getFiledLabel(field)"
+            @keyup.enter="resetPageAndLoadData"
+            @clear="resetPageAndLoadData"
+          />
+        </el-col>
+        <el-col v-bind="colProps">
+          <el-select
+            v-model="searchVal.is_superuser"
+            clearable
+            :placeholder="$t('Auth.isSuperuser')"
+            @clear="resetIsSuperuser(), resetPageAndLoadData()"
+          >
+            <el-option :value="true" :label="$t('Base.yes')" />
+            <el-option :value="false" :label="$t('Base.no')" />
+          </el-select>
+        </el-col>
+        <el-col v-bind="colProps" />
+
+        <el-col class="col-oper" v-bind="colProps">
+          <SearchButton @click="resetPageAndLoadData" />
+          <ResetButton @click="resetSearch" />
+        </el-col>
+      </el-row>
+    </el-form>
     <div class="app-wrapper">
       <div class="section-header">
-        <div class="searchbar">
-          <el-space wrap :size="20">
-            <el-input
-              v-model="searchVal.user_id"
-              clearable
-              :placeholder="getFiledLabel(field)"
-              @keyup.enter="resetPageAndLoadData"
-              @clear="resetPageAndLoadData"
-            />
-            <el-select
-              v-model="searchVal.is_superuser"
-              clearable
-              :placeholder="$t('Auth.isSuperuser')"
-              @clear="resetIsSuperuser(), resetPageAndLoadData()"
-            >
-              <el-option :value="true" :label="$t('Base.yes')" />
-              <el-option :value="false" :label="$t('Base.no')" />
-            </el-select>
-            <SearchButton @click="resetPageAndLoadData" />
-            <RefreshButton @click="loadData" />
-          </el-space>
-        </div>
+        <div></div>
         <div class="add-funcs-container">
+          <RefreshButton @click="loadData" />
           <AuthnUsersImport @uploadedData="loadData" />
           <CreateButton @click="addCommand">{{ t('Base.add') }}</CreateButton>
         </div>
@@ -60,6 +70,7 @@ import AuthnMenuTab from './components/AuthnMenuTab.vue'
 import AuthnUserDialog from './components/AuthnUserDialog.vue'
 import AuthnUsersImport from './components/AuthnUsersImport.vue'
 import AuthnUserTable from './components/AuthnUserTable.vue'
+import { SEARCH_FORM_RES_PROPS as colProps } from '@/common/constants'
 
 const prop = defineProps({
   // TODO:
@@ -110,6 +121,12 @@ const loadData = async () => {
   lockTable.value = false
 }
 
+const resetSearch = () => {
+  searchVal.user_id = ''
+  searchVal.is_superuser = undefined
+  resetPageAndLoadData()
+}
+
 onMounted(loadData)
 
 const addCommand = () => {
@@ -156,22 +173,14 @@ const resetIsSuperuser = () => {
 
 <style lang="scss" scoped>
 .authn-default {
-  .searchbar {
-    height: 36px;
-    .el-input {
-      width: 260px;
-    }
-    .el-select {
-      width: 200px;
-      font-weight: normal;
-    }
+  .search-wrapper {
+    margin-top: -12px;
   }
-
   .add-funcs-container {
     display: flex;
     > .el-button,
-    > .file-upload {
-      margin-left: 16px;
+    > .authn-users-import {
+      margin-left: 12px;
     }
   }