From d1ab16c78703e8f986e920ac7ccfa65d9ecb1cb4 Mon Sep 17 00:00:00 2001
From: dataeaseShu <tong.shu@fit2cloud.com>
Date: Thu, 17 Jul 2025 17:34:26 +0800
Subject: [PATCH] feat(member): member manage

---
 frontend/src/api/workspace.ts                 |   1 +
 .../permission/icon_custom-tools_colorful.png | Bin 0 -> 788 bytes
 .../src/assets/svg/icon_down_outlined.svg     |   4 +-
 .../src/assets/svg/icon_member_outlined.svg   |   3 +
 .../src/assets/svg/icon_setting_filled.svg    |   3 +
 frontend/src/components/layout/Menu.vue       |  24 +-
 frontend/src/components/layout/MenuItem.vue   |   9 +-
 frontend/src/i18n/en.json                     |  39 +-
 frontend/src/i18n/zh-CN.json                  |  42 +-
 frontend/src/router/index.ts                  |  37 +-
 frontend/src/views/ds/DatasourceForm.vue      |   2 +-
 frontend/src/views/system/member/index.vue    | 490 +++++++++++++++
 frontend/src/views/system/permission/Card.vue | 121 ++++
 .../src/views/system/permission/index.vue     | 579 ++++++++++++++++++
 frontend/src/views/system/user/User.vue       |   3 +-
 15 files changed, 1334 insertions(+), 23 deletions(-)
 create mode 100644 frontend/src/assets/permission/icon_custom-tools_colorful.png
 create mode 100644 frontend/src/assets/svg/icon_member_outlined.svg
 create mode 100644 frontend/src/assets/svg/icon_setting_filled.svg
 create mode 100644 frontend/src/views/system/member/index.vue
 create mode 100644 frontend/src/views/system/permission/Card.vue
 create mode 100644 frontend/src/views/system/permission/index.vue

diff --git a/frontend/src/api/workspace.ts b/frontend/src/api/workspace.ts
index 729d57c9..b1e8c3ec 100644
--- a/frontend/src/api/workspace.ts
+++ b/frontend/src/api/workspace.ts
@@ -14,3 +14,4 @@ export const workspaceUwsDelete = (data: any) => request.delete('/system/workspa
 export const workspaceDelete = (data: any) => request.delete('/system/workspace', { data })
 export const workspaceList = () => request.get('/system/workspace')
 export const workspaceDetail = (id: any) => request.get(`/system/workspace/${id}`)
+export const uwsOption = (params: any) => request.get('system/workspace/uws/option', { params })
diff --git a/frontend/src/assets/permission/icon_custom-tools_colorful.png b/frontend/src/assets/permission/icon_custom-tools_colorful.png
new file mode 100644
index 0000000000000000000000000000000000000000..41b09345f6a573c136a7eb6c0e527ebe64d7a5fe
GIT binary patch
literal 788
zcmV+v1MB>WP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0;x$vK~#7F#g{=(
z6G0Tm|Fi509w@~K2P|gAgAorc@d6hE2T>DEGztgL-fj5;hELFPuV0{z2{$PmBwo0f
zup|ocP%W@xQW9-yh(KG%_m)!IVhgjR+uvnpXJ+TUdGF2adjfTs@1p)f0gp8)f>MJi
zB|_XUXb1{OAVc5esF@QI7KB{uFtD7Nh-9kgiE6>cqV`fihDoR&EkX#yw(o``Clm-Q
z##ZSOf;U*YAt%ThIgQ^2mts*5g)^bzA;R1cWO}n$5MSXvIkLhvtyI7`+JnF31iQDU
zuYqOj<b@zy;4?Zg)_Vo{!U634U)cVghcXf-DWHDjUfsBZ7gtAW`r=!wnEm`7DhMHh
zI+?*Q6h1l@zVgFH^7{sQ^b2@4Fzod8=$)APv;-A&l^c#t&VrIV>otPnTNdKMhnONo
zk~<q%`DveNJ=(mfL4ncUfb)D!0_!>Mo9rKg3i@dirUq_S+GCfF6ktmXcVDiV$L42l
zb@x@i$rlfh%6>sJ1YN<h(crzlA;d$Ea2{qpE;_N&h^8*^8C_^KN-@w1PK|*^uzwSD
z8kqb2*AeLQ!40kyu=n$r{_v)9`|$}#jXsC39Ed8oa=}72U32x?)J}X`ha1`+1FjU9
zrW<eY;y<4UsLgTU23Ik_zE0eJiiO>DMIkr-cN8dRuO<}XUDy8+RUx^Vmd8N8bl7lA
za$2SdSd@mF|C_*nJx(|{`EW}rn{GCo)1{P~RoVH;1$LV*a8BeJ=Y$s81Z~^W3<LA!
z63TNrN?6voIw3dA!E@wX=0W7>6i`|hgSW1*?8%5z8955D73|6I2y2BFLWOA#QqJmo
za-z~#KgoO>HA@{Bmw%{W(VUvWU(TFOD8LsSKb>P<lABcOTgD#dGfyHl@%9%sT<I(R
S$eLpS0000<MNUMnLSTYhlU&aL

literal 0
HcmV?d00001

diff --git a/frontend/src/assets/svg/icon_down_outlined.svg b/frontend/src/assets/svg/icon_down_outlined.svg
index 67b56222..45f6cdd8 100644
--- a/frontend/src/assets/svg/icon_down_outlined.svg
+++ b/frontend/src/assets/svg/icon_down_outlined.svg
@@ -1,3 +1,3 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M8.00004 10.5759L13.4212 5.15476C13.5514 5.02459 13.7624 5.02459 13.8926 5.15476L14.364 5.62616C14.4942 5.75634 14.4942 5.96739 14.364 6.09757L8.47145 11.9901C8.2111 12.2505 7.78899 12.2505 7.52864 11.9901L1.63608 6.09757C1.50591 5.96739 1.50591 5.75634 1.63608 5.62616L2.10749 5.15476C2.23766 5.02459 2.44872 5.02459 2.57889 5.15476L8.00004 10.5759Z" fill="#646A73"/>
+<svg width="16" height="16" viewBox="0 0 16 16"  xmlns="http://www.w3.org/2000/svg">
+<path d="M8.00004 10.5759L13.4212 5.15476C13.5514 5.02459 13.7624 5.02459 13.8926 5.15476L14.364 5.62616C14.4942 5.75634 14.4942 5.96739 14.364 6.09757L8.47145 11.9901C8.2111 12.2505 7.78899 12.2505 7.52864 11.9901L1.63608 6.09757C1.50591 5.96739 1.50591 5.75634 1.63608 5.62616L2.10749 5.15476C2.23766 5.02459 2.44872 5.02459 2.57889 5.15476L8.00004 10.5759Z"/>
 </svg>
diff --git a/frontend/src/assets/svg/icon_member_outlined.svg b/frontend/src/assets/svg/icon_member_outlined.svg
new file mode 100644
index 00000000..331f793e
--- /dev/null
+++ b/frontend/src/assets/svg/icon_member_outlined.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 8.66667H10C11.841 8.66667 14 9.95237 14 12.2667V14.0667C14 14.398 13.7015 14.6667 13.3333 14.6667H2.66667C2.29848 14.6667 2 14.398 2 14.0667V12.2667C2 9.95432 4.15905 8.66667 6 8.66667ZM12.6667 13.3333V12.2222C12.6667 10.8212 11.2473 10 10 10H6C4.77998 10 3.33333 10.7811 3.33333 12.2222V13.3333H12.6667ZM8 8C6.15905 8 4.66667 6.50762 4.66667 4.66667C4.66667 2.82572 6.15905 1.33333 8 1.33333C9.84095 1.33333 11.3333 2.82572 11.3333 4.66667C11.3333 6.50762 9.84095 8 8 8ZM8 6.66667C9.10457 6.66667 10 5.77123 10 4.66667C10 3.5621 9.10457 2.66667 8 2.66667C6.89543 2.66667 6 3.5621 6 4.66667C6 5.77123 6.89543 6.66667 8 6.66667Z" fill="#1F2329"/>
+</svg>
diff --git a/frontend/src/assets/svg/icon_setting_filled.svg b/frontend/src/assets/svg/icon_setting_filled.svg
new file mode 100644
index 00000000..621a03c7
--- /dev/null
+++ b/frontend/src/assets/svg/icon_setting_filled.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.93782 14.5935C2.1193 13.7061 1.49299 12.6387 1.125 11.4573L2.43707 9.66437C2.72657 9.26876 2.72657 8.73124 2.43707 8.33563L1.125 6.54267C1.49299 5.36128 2.1193 4.29386 2.93782 3.40655L5.14275 3.6464C5.63031 3.69944 6.09604 3.43052 6.29385 2.98174L7.18964 0.949401C7.77221 0.818869 8.37806 0.75 9 0.75C9.62194 0.75 10.2278 0.818869 10.8104 0.949401L11.7062 2.98174C11.904 3.43052 12.3697 3.69944 12.8573 3.6464L15.0622 3.40655C15.8807 4.29386 16.507 5.36128 16.875 6.54267L15.5629 8.33563C15.2734 8.73124 15.2734 9.26876 15.5629 9.66437L16.875 11.4573C16.507 12.6387 15.8807 13.7061 15.0622 14.5935L12.8573 14.3536C12.3697 14.3006 11.904 14.5695 11.7062 15.0183L10.8104 17.0506C10.2278 17.1811 9.62194 17.25 9 17.25C8.37806 17.25 7.77221 17.1811 7.18964 17.0506L6.29385 15.0183C6.09604 14.5695 5.63031 14.3006 5.14275 14.3536L2.93782 14.5935ZM9 12C10.6569 12 12 10.6569 12 9C12 7.34315 10.6569 6 9 6C7.34315 6 6 7.34315 6 9C6 10.6569 7.34315 12 9 12Z"/>
+</svg>
diff --git a/frontend/src/components/layout/Menu.vue b/frontend/src/components/layout/Menu.vue
index d2b1032b..62be7dad 100644
--- a/frontend/src/components/layout/Menu.vue
+++ b/frontend/src/components/layout/Menu.vue
@@ -25,13 +25,16 @@ const routerList = computed(() => {
   if (showSysmenu.value) {
     return router.getRoutes().filter((route) => route.path.includes('/system') && !route.redirect)
   }
+
   return router.getRoutes().filter((route) => {
     return (
       !route.path.includes('canvas') &&
+      !route.path.includes('member') &&
+      !route.path.includes('permission') &&
       !route.path.includes('preview') &&
       route.path !== '/login' &&
       !route.path.includes('/system') &&
-      !route.redirect &&
+      (route.path.includes('set') || !route.redirect) &&
       route.path !== '/:pathMatch(.*)*' &&
       !route.path.includes('dsTable')
     )
@@ -45,17 +48,28 @@ const routerList = computed(() => {
   </el-menu>
 </template>
 
-<style lang="less" scoped>
+<style lang="less">
 .ed-menu-vertical {
   --ed-menu-item-height: 40px;
   --ed-menu-bg-color: transparent;
   --ed-menu-base-level-padding: 4px;
   border-right: none;
   .ed-menu-item {
-    height: 40px;
+    height: 40px !important;
+    border-radius: 6px !important;
+    &.is-active {
+      background-color: #fff !important;
+      border-radius: 6px;
+    }
+  }
+
+  .ed-sub-menu .ed-sub-menu__title:hover {
     border-radius: 6px;
-    &.is-active.is-active.is-active {
-      background-color: #1cba901a;
+  }
+
+  .ed-sub-menu.is-active {
+    .ed-sub-menu__title {
+      color: #1cba90 !important;
     }
   }
 }
diff --git a/frontend/src/components/layout/MenuItem.vue b/frontend/src/components/layout/MenuItem.vue
index 24b25d47..31a9af05 100644
--- a/frontend/src/components/layout/MenuItem.vue
+++ b/frontend/src/components/layout/MenuItem.vue
@@ -8,13 +8,16 @@ import model from '@/assets/svg/icon_dataset_filled.svg'
 import ds from '@/assets/svg/ds.svg'
 import dashboard from '@/assets/svg/dashboard.svg'
 import chat from '@/assets/svg/chat.svg'
+import setting from '@/assets/svg/icon_setting_filled.svg'
 import icon_user from '@/assets/svg/icon_user.svg'
+
 const iconMap = {
   icon_ai: model,
   ds,
   dashboard,
   chat,
   user,
+  setting,
   icon_user: icon_user,
   workspace,
 } as { [key: string]: any }
@@ -38,7 +41,9 @@ const MenuItem = defineComponent({
     const router = useRouter()
 
     const handleMenuClick = (e: any) => {
-      router.push(e.index)
+      if (e.index) {
+        router.push(e.redirect || e.index)
+      }
     }
 
     return () => {
@@ -50,7 +55,7 @@ const MenuItem = defineComponent({
       if (children?.length) {
         return h(
           ElSubMenu,
-          { index: path, onClick: (e: any) => handleMenuClick(e) },
+          { index: path, onClick: () => handleMenuClick(props.menu) },
           {
             title: () => titleWithIcon(props),
             default: () => children.map((ele: any) => h(MenuItem, { menu: ele })),
diff --git a/frontend/src/i18n/en.json b/frontend/src/i18n/en.json
index 89511afe..762623a8 100644
--- a/frontend/src/i18n/en.json
+++ b/frontend/src/i18n/en.json
@@ -8,6 +8,7 @@
   "common": {
     "input_content": "Please Input Content",
     "empty": " ",
+    "may_not_exist": "No results yet, the user may not exist",
     "back": "Back",
     "confirm": "Confirm",
     "cancel": "Cancel",
@@ -299,7 +300,43 @@
     "there_are": "There are",
     "2_dashboards": "{msg} dashboards",
     "smart_data_centers": "{msg} smart data centers",
-    "confirm_to_delete": "This data source is in use. Deleting it will cause these resources to not work properly. Confirm to delete?"
+    "confirm_to_delete": "This data source is in use. Deleting it will cause these resources to not work properly. Confirm to delete?",
+    "id_account_to_add": "Search user ID/account to add",
+    "find_user": "Find user",
+    "add_successfully": "Add successfully",
+    "member_management": "Member management",
+    "permission_configuration": "Permission configuration",
+    "set": "Set"
+  },
+  "permission": {
+    "search_rule_group": "Search rule group",
+    "add_rule_group": "Add rule group",
+    "permission_rule": "Permission rule",
+    "restricted_user": "Restricted user",
+    "set_rule": "Set rule",
+    "set_user": "Set user",
+    "2": "{msg}",
+    "238_people": "{msg} people",
+    "no_permission_rule": "No permission rule",
+    "set_permission_rule": "Set permission rule",
+    "basic_information": "Basic information",
+    "rule_group_name": "Rule group name",
+    "rule_name": "Rule name",
+    "type": "Type",
+    "data_source": "Data source",
+    "data_table": "Data table",
+    "select_restricted_user": "Select restricted user",
+    "rule_group_1": "Delete rule group: {msg}?",
+    "no_rule": "No rule",
+    "row_permission": "Row permission",
+    "column_permission": "Column permission",
+    "rule_rule_1": "Delete rule: {msg}?",
+    "no_content": "No content",
+    "edit_column_permission": "Edit column permission",
+    "edit_row_permission": "Edit row permission",
+    "add_column_permission": "Add column permission",
+    "add_row_permission": "Add row permission",
+    "no_fields_yet": "No fields yet"
   },
   "chat": {
     "chart_type": {
diff --git a/frontend/src/i18n/zh-CN.json b/frontend/src/i18n/zh-CN.json
index f5f03527..cd2dae82 100644
--- a/frontend/src/i18n/zh-CN.json
+++ b/frontend/src/i18n/zh-CN.json
@@ -1,5 +1,5 @@
 {
-  "menu": {
+  "menu": { 
     "Data Q&A": "智能问数",
     "Data Connections": "数据源",
     "Dashboard": "仪表盘",
@@ -7,6 +7,7 @@
   },
   "common": {
     "input_content": "请输入内容",
+    "may_not_exist": "暂无结果，用户可能不存在",
     "empty": "",
     "back": "返回",
     "confirm": "确认",
@@ -319,7 +320,42 @@
     "there_are": "有 ",
     "2_dashboards": "{msg} 个仪表板",
     "smart_data_centers": "{msg} 个智能问数",
-    "confirm_to_delete": "正在使用此数据源，删除后会导致这些资源无法正常使用，确认删除?"
+    "confirm_to_delete": "正在使用此数据源，删除后会导致这些资源无法正常使用，确认删除?",
+    "id_account_to_add": "搜索用户ID/账号添加",
+    "find_user": "查找用户",
+    "add_successfully": "添加成功",
+    "member_management": "成员管理",
+    "permission_configuration": "权限配置",
+    "set": "设置"
+  },
+  "permission": {
+    "search_rule_group": "搜索规则组",
+    "add_rule_group": "添加规则组",
+    "permission_rule": "权限规则",
+    "restricted_user": "受限用户",
+    "set_rule": "设置规则",
+    "set_user": "设置用户",
+    "2": "{msg} 个",
+    "238_people": "{msg} 人",
+    "no_permission_rule": "暂无权限规则",
+    "set_permission_rule": "设置权限规则",
+    "rule_group_name": "规则组名称",
+    "rule_name": "规则名称", 
+    "type": "类型",
+    "data_source": "数据源",
+    "data_table": "数据表",
+    "select_restricted_user": "选择受限用户",
+    "rule_group_1": "是否删除规则组：{msg}？",
+    "no_rule": "暂无规则",
+    "row_permission": "行权限",
+    "column_permission": "列权限",
+    "rule_rule_1": "是否删除规则：{msg}？",
+    "no_content": "暂无内容",
+    "edit_column_permission": "编辑列权限",
+    "edit_row_permission": "编辑行权限",
+    "add_column_permission": "添加列权限",
+    "add_row_permission": "添加行权限",
+    "no_fields_yet": "暂无字段"
   },
   "chat": {
     "chart_type": {
@@ -357,4 +393,4 @@
     "back_community": "还原至社区版",
     "confirm_tips": "确定还原至社区版？"
   }
-}
+}
\ No newline at end of file
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 2df029b4..bf8ae103 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -1,5 +1,4 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
-
 import Layout from '@/components/layout/index.vue'
 import LayoutDsl from '@/components/layout/LayoutDsl.vue'
 import SinglePage from '@/components/layout/SinglePage.vue'
@@ -11,10 +10,14 @@ import DashboardPreview from '@//views/dashboard/preview/SQPreviewSingle.vue'
 import Dashboard from '@/views/dashboard/index.vue'
 import Model from '@/views/system/model/Model.vue'
 import assistant from '@/views/embedded/assistant.vue'
-// import User from "@/views/system/user/index.vue";
+import Member from '@/views/system/member/index.vue'
+import Permission from '@/views/system/permission/index.vue'
 import User from '@/views/system/user/User.vue'
 import Workspace from '@/views/system/workspace/index.vue'
+import { i18n } from '@/i18n'
 import { watchRouter } from './watch'
+
+const t = i18n.global.t
 const router = createRouter({
   history: createWebHashHistory(),
   routes: [
@@ -32,7 +35,7 @@ const router = createRouter({
           path: 'index',
           name: 'chat',
           component: chat,
-          meta: { title: 'Data Q&A', icon: 'chat' },
+          meta: { title: t('menu.Data Q&A'), icon: 'chat' },
         },
       ],
     },
@@ -57,7 +60,7 @@ const router = createRouter({
           path: 'index',
           name: 'ds',
           component: Datasource,
-          meta: { title: 'Data Connections', icon: 'ds' },
+          meta: { title: t('menu.Data Connections'), icon: 'ds' },
         },
       ],
     },
@@ -70,7 +73,27 @@ const router = createRouter({
           path: 'index',
           name: 'dashboard',
           component: Dashboard,
-          meta: { title: 'Dashboard', icon: 'dashboard' },
+          meta: { title: t('dashboard.dashboard'), icon: 'dashboard' },
+        },
+      ],
+    },
+    {
+      path: '/set',
+      component: LayoutDsl,
+      redirect: '/set/member',
+      meta: { title: t('workspace.set'), icon: 'setting' },
+      children: [
+        {
+          path: '/set/member',
+          name: 'member',
+          component: Member,
+          meta: { title: t('workspace.member_management') },
+        },
+        {
+          path: '/set/permission',
+          name: 'permission',
+          component: Permission,
+          meta: { title: t('workspace.permission_configuration') },
         },
       ],
     },
@@ -127,13 +150,13 @@ const router = createRouter({
           path: 'user',
           name: 'user',
           component: User,
-          meta: { title: '用户管理', icon: 'user' },
+          meta: { title: t('user.user_management'), icon: 'user' },
         },
         {
           path: 'workspace',
           name: 'workspace',
           component: Workspace,
-          meta: { title: '工作空间', icon: 'workspace' },
+          meta: { title: t('user.workspace'), icon: 'workspace' },
         },
         {
           path: 'model',
diff --git a/frontend/src/views/ds/DatasourceForm.vue b/frontend/src/views/ds/DatasourceForm.vue
index 595baa13..976f79bc 100644
--- a/frontend/src/views/ds/DatasourceForm.vue
+++ b/frontend/src/views/ds/DatasourceForm.vue
@@ -463,8 +463,8 @@ defineExpose({
     <div v-if="isCreate && activeStep !== 2" class="model-name">
       {{ activeName }}
       <span
-        style="margin-left: 8px; color: #8f959e; font-size: 12px; margin-top: 7px"
         v-if="form.type !== 'excel'"
+        style="margin-left: 8px; color: #8f959e; font-size: 12px; margin-top: 7px"
       >
         <span>{{ t('ds.form.support_version') }}:&nbsp;</span>
         <span v-if="form.type === 'sqlServer'">2012+</span>
diff --git a/frontend/src/views/system/member/index.vue b/frontend/src/views/system/member/index.vue
new file mode 100644
index 00000000..c70ba998
--- /dev/null
+++ b/frontend/src/views/system/member/index.vue
@@ -0,0 +1,490 @@
+<script lang="ts" setup>
+import { ref, computed, onMounted, reactive } from 'vue'
+import { uwsOption, workspaceUserList, workspaceUwsDelete, workspaceCreate } from '@/api/workspace'
+import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
+import icon_searchOutline_outlined from '@/assets/svg/icon_search-outline_outlined.svg'
+import EmptyBackground from '@/views/dashboard/common/EmptyBackground.vue'
+import assigned from '@/assets/svg/icon_assigned_outlined.svg'
+import SuccessFilled from '@/assets/svg/gou_icon.svg'
+import CircleCloseFilled from '@/assets/svg/icon_ban_filled.svg'
+import { useUserStore } from '@/stores/user'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+const multipleSelectionAll = ref<any[]>([])
+const keyword = ref('')
+const keywordsMember = ref('')
+const userStore = useUserStore()
+
+const workspaceForm = reactive({
+  name: '',
+  id: '',
+})
+const selectable = (row: any) => ![userStore.getUid].includes(row.id)
+const fieldListWithSearch = computed(() => {
+  if (!keyword.value) return fieldList.value
+  return fieldList.value.filter((ele: any) =>
+    ele.name.toLowerCase().includes(keywordsMember.value.toLowerCase())
+  )
+})
+
+onMounted(() => {
+  search()
+})
+const fieldDialog = ref<boolean>(false)
+const multipleTableRef = ref()
+const isIndeterminate = ref(true)
+const checkAll = ref(false)
+const fieldList = ref<any>([])
+const pageInfo = reactive({
+  currentPage: 1,
+  pageSize: 10,
+  total: 0,
+})
+
+const cancelDelete = () => {
+  handleToggleRowSelection(false)
+  multipleSelectionAll.value = []
+  checkAll.value = false
+  isIndeterminate.value = false
+}
+const deleteBatchUser = () => {
+  ElMessageBox.confirm(
+    t('workspace.selected_2_members', { msg: multipleSelectionAll.value.length }),
+    {
+      confirmButtonType: 'danger',
+      confirmButtonText: t('dashboard.delete'),
+      cancelButtonText: t('common.cancel'),
+      customClass: 'confirm-no_icon',
+      autofocus: false,
+    }
+  ).then(() => {
+    workspaceUwsDelete({
+      uid_list: multipleSelectionAll.value.map((ele) => ele.id),
+    }).then(() => {
+      ElMessage({
+        type: 'success',
+        message: t('dashboard.delete_success'),
+      })
+      multipleSelectionAll.value = []
+      search()
+    })
+  })
+}
+const deleteHandler = (row: any) => {
+  ElMessageBox.confirm(t('workspace.member_feng_yibudao', { msg: row.name }), {
+    confirmButtonType: 'danger',
+    confirmButtonText: t('dashboard.delete'),
+    cancelButtonText: t('common.cancel'),
+    customClass: 'confirm-no_icon',
+    autofocus: false,
+  }).then(() => {
+    workspaceUwsDelete({
+      uid_list: [row.id],
+    }).then(() => {
+      ElMessage({
+        type: 'success',
+        message: t('dashboard.delete_success'),
+      })
+      search()
+    })
+  })
+}
+const handleSelectionChange = (val: any[]) => {
+  const ids = fieldList.value.map((ele: any) => ele.id)
+  multipleSelectionAll.value = [
+    ...multipleSelectionAll.value.filter((ele) => !ids.includes(ele.id)),
+    ...val,
+  ]
+  isIndeterminate.value = !(val.length === 0 || val.length === fieldList.value.length)
+  checkAll.value = val.length === fieldList.value.length
+}
+const handleCheckAllChange = (val: any) => {
+  isIndeterminate.value = false
+  handleSelectionChange(val ? fieldList.value : [])
+  if (val) {
+    handleToggleRowSelection()
+  } else {
+    multipleTableRef.value.clearSelection()
+  }
+}
+
+const handleToggleRowSelection = (check: boolean = true) => {
+  let i = 0
+  const ids = multipleSelectionAll.value.map((ele: any) => ele.id)
+  for (const key in fieldList.value) {
+    if (ids.includes((fieldList.value[key] as any).id)) {
+      i += 1
+      multipleTableRef.value.toggleRowSelection(fieldList.value[key], check)
+    }
+  }
+  checkAll.value = i === fieldList.value.length
+  isIndeterminate.value = !(i === 0 || i === fieldList.value.length)
+}
+
+const search = () => {
+  workspaceUserList(
+    { keyword: keywordsMember.value },
+    pageInfo.currentPage,
+    pageInfo.pageSize
+  ).then((res) => {
+    fieldList.value = res.items
+    pageInfo.total = res.total
+  })
+}
+
+const closeField = () => {
+  fieldDialog.value = false
+  afterFind.value = false
+  userInfo.value.id = ''
+  userInfo.value.name = ''
+  userInfo.value.account = ''
+}
+
+const saveField = () => {
+  workspaceCreate({
+    uid_list: [userInfo.value.id],
+    weight: 0,
+  }).then(() => {
+    ElMessage({
+      type: 'success',
+      message: t('common.save_success'),
+    })
+    search()
+    fieldDialog.value = false
+  })
+}
+
+const userInfo = ref({
+  id: '',
+  name: '',
+  account: '',
+})
+const afterFind = ref(false)
+const findUser = () => {
+  uwsOption({ keyword: workspaceForm.name })
+    .then((res: any) => {
+      userInfo.value = res || {}
+    })
+    .finally(() => {
+      afterFind.value = true
+    })
+}
+
+const addWorkspace = () => {
+  afterFind.value = false
+  workspaceForm.name = ''
+  fieldDialog.value = true
+}
+
+const handleSizeChange = (val: number) => {
+  pageInfo.pageSize = val
+  search()
+}
+const handleCurrentChange = (val: number) => {
+  pageInfo.currentPage = val
+  search()
+}
+</script>
+
+<template>
+  <div class="member">
+    <div class="tool-left">
+      <span class="page-title">{{ $t('workspace.member_management') }}</span>
+      <div class="search-bar">
+        <el-input
+          v-model="keyword"
+          style="width: 240px; margin-right: 12px"
+          :placeholder="$t('user.name_account_email')"
+          @keyup.enter="search"
+          @blur="search"
+        >
+          <template #prefix>
+            <el-icon>
+              <icon_searchOutline_outlined />
+            </el-icon>
+          </template>
+        </el-input>
+
+        <el-button type="primary" @click="addWorkspace()">
+          <template #icon>
+            <icon_add_outlined></icon_add_outlined>
+          </template>
+          {{ $t('workspace.add_member') }}
+        </el-button>
+      </div>
+    </div>
+    <div class="table-content">
+      <div class="preview-or-schema">
+        <el-table
+          ref="multipleTableRef"
+          :data="fieldListWithSearch"
+          :selectable="selectable"
+          style="width: 100%"
+          @selection-change="handleSelectionChange"
+        >
+          <el-table-column type="selection" width="55" />
+          <el-table-column prop="name" :label="$t('user.name')" width="160" />
+          <el-table-column prop="account" :label="$t('user.account')" width="160" />
+          <el-table-column prop="status" :label="$t('user.user_status')">
+            <template #default="scope">
+              <div
+                class="user-status-container"
+                :class="[scope.row.status ? 'active' : 'disabled']"
+              >
+                <el-icon size="16">
+                  <SuccessFilled v-if="scope.row.status" />
+                  <CircleCloseFilled v-else />
+                </el-icon>
+                <span>{{ $t(`user.${scope.row.status ? 'enabled' : 'disabled'}`) }}</span>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="email" :label="$t('user.email')" width="204" />
+          <el-table-column prop="weight" :label="$t('workspace.member_type')" width="120">
+            <template #default="scope">
+              <span>{{
+                scope.row.weight === 1
+                  ? t('workspace.administrator')
+                  : t('workspace.ordinary_member')
+              }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column fixed="right" width="80" :label="t('ds.actions')">
+            <template #default="scope">
+              <div class="field-comment">
+                <el-tooltip
+                  :offset="14"
+                  effect="dark"
+                  :content="$t('workspace.remove')"
+                  placement="top"
+                >
+                  <el-icon class="action-btn" size="16" @click="deleteHandler(scope.row)">
+                    <assigned></assigned>
+                  </el-icon>
+                </el-tooltip>
+              </div>
+            </template>
+          </el-table-column>
+          <template #empty>
+            <EmptyBackground
+              v-if="!keywordsMember && !fieldListWithSearch.length"
+              :description="$t('workspace.no_user')"
+              img-type="noneWhite"
+            />
+
+            <EmptyBackground
+              v-if="!!keywordsMember && !fieldListWithSearch.length"
+              :description="$t('datasource.relevant_content_found')"
+              img-type="tree"
+            />
+          </template>
+        </el-table>
+      </div>
+      <div class="pagination-container">
+        <el-pagination
+          v-model:current-page="pageInfo.currentPage"
+          v-model:page-size="pageInfo.pageSize"
+          :page-sizes="[10, 20, 30]"
+          :background="true"
+          layout="total, sizes, prev, pager, next, jumper"
+          :total="pageInfo.total"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </div>
+    </div>
+    <div v-if="multipleSelectionAll.length" class="bottom-select">
+      <el-checkbox
+        v-model="checkAll"
+        :indeterminate="isIndeterminate"
+        @change="handleCheckAllChange"
+      >
+        {{ $t('datasource.select_all') }}
+      </el-checkbox>
+
+      <button class="danger-button" @click="deleteBatchUser">{{ $t('workspace.remove') }}</button>
+
+      <span class="selected">{{
+        $t('user.selected_2_items', { msg: multipleSelectionAll.length })
+      }}</span>
+
+      <el-button text @click="cancelDelete">
+        {{ $t('common.cancel') }}
+      </el-button>
+    </div>
+  </div>
+
+  <el-dialog
+    v-model="fieldDialog"
+    :title="$t('workspace.add_member')"
+    width="600"
+    modal-class="add-user_dialog"
+    destroy-on-close
+    :close-on-click-modal="false"
+    @before-closed="closeField"
+  >
+    <el-input
+      v-model="workspaceForm.name"
+      clearable
+      :placeholder="$t('workspace.id_account_to_add')"
+    >
+      <template #append>
+        <span style="cursor: pointer" @click="findUser">{{ t('workspace.find_user') }}</span>
+      </template>
+    </el-input>
+    <div class="user">
+      <template v-if="userInfo.id">
+        <div class="name">{{ userInfo.name }}</div>
+        <div class="account">{{ userInfo.account }}</div>
+      </template>
+      <div v-else-if="afterFind" class="empty">{{ $t('common.may_not_exist') }}</div>
+    </div>
+    <div style="display: flex; justify-content: flex-end; margin-top: 20px">
+      <el-button secondary @click="closeField">{{ t('common.cancel') }}</el-button>
+      <el-button v-if="!userInfo.id" disabled type="info">{{ t('model.add') }}</el-button>
+      <el-button v-else type="primary" @click="saveField">{{ t('model.add') }}</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<style lang="less" scoped>
+.member {
+  height: 100%;
+  position: relative;
+  .tool-left {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 16px;
+
+    .page-title {
+      font-weight: 500;
+      font-size: 20px;
+      line-height: 28px;
+    }
+  }
+  .table-content {
+    height: calc(100% - 104px);
+
+    .pagination-container {
+      display: flex;
+      justify-content: end;
+      align-items: center;
+      margin-top: 16px;
+    }
+
+    .preview-or-schema {
+      .user-status-container {
+        display: flex;
+        align-items: center;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 22px;
+
+        .ed-icon {
+          margin-right: 8px;
+        }
+      }
+      .field-comment {
+        height: 24px;
+        .ed-icon {
+          position: relative;
+          cursor: pointer;
+          margin-top: 4px;
+
+          &::after {
+            content: '';
+            background-color: #1f23291a;
+            position: absolute;
+            border-radius: 6px;
+            width: 24px;
+            height: 24px;
+            transform: translate(-50%, -50%);
+            top: 50%;
+            left: 50%;
+            display: none;
+          }
+
+          &:hover {
+            &::after {
+              display: block;
+            }
+          }
+        }
+      }
+
+      .preview-num {
+        margin: 12px 0;
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 22px;
+        color: #646a73;
+      }
+    }
+  }
+
+  .bottom-select {
+    position: absolute;
+    height: 64px;
+    width: 100%;
+    left: 0;
+    bottom: 0;
+    border-top: 1px solid #1f232926;
+    display: flex;
+    align-items: center;
+    padding-left: 24px;
+
+    .danger-button {
+      border: 1px solid var(--ed-color-danger);
+      color: var(--ed-color-danger);
+      border-radius: var(--ed-border-radius-base);
+      min-width: 80px;
+      height: 32px;
+      line-height: 32px;
+      text-align: center;
+      cursor: pointer;
+      margin: 0 16px;
+      background-color: transparent;
+    }
+
+    .selected {
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 22px;
+      color: #646a73;
+      margin-right: 12px;
+    }
+  }
+}
+</style>
+<style lang="less">
+.add-user_dialog {
+  .ed-input-group__append {
+    background-color: #fff;
+    padding: 0 12px;
+  }
+  .user {
+    height: 126px;
+    font-weight: 400;
+    padding-top: 16px;
+
+    .name {
+      font-size: 14px;
+      line-height: 22px;
+    }
+    .account {
+      color: #8f959e;
+      font-size: 12px;
+      line-height: 20px;
+    }
+
+    .empty {
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 22px;
+      color: #8f959e;
+    }
+  }
+}
+</style>
diff --git a/frontend/src/views/system/permission/Card.vue b/frontend/src/views/system/permission/Card.vue
new file mode 100644
index 00000000..7c32b983
--- /dev/null
+++ b/frontend/src/views/system/permission/Card.vue
@@ -0,0 +1,121 @@
+<script lang="ts" setup>
+import delIcon from '@/assets/svg/icon_delete.svg'
+import icon_key_outlined from '@/assets/svg/icon-key_outlined.svg'
+import icon_member_outlined from '@/assets/svg/icon_member_outlined.svg'
+import Lock from '@/assets/permission/icon_custom-tools_colorful.png'
+withDefaults(
+  defineProps<{
+    name: string
+    type: string
+    num: string
+    id?: string
+  }>(),
+  {
+    name: '-',
+    type: '-',
+    id: '-',
+    num: '-',
+  }
+)
+
+const emits = defineEmits(['edit', 'del', 'setUser', 'setRule'])
+
+const handleEdit = () => {
+  emits('edit')
+}
+
+const handleDel = () => {
+  emits('del')
+}
+
+const setUser = () => {
+  emits('setUser')
+}
+
+// const setRule = () => {
+//   emits('setRule')
+// }
+</script>
+
+<template>
+  <div class="card">
+    <div class="name-icon">
+      <img :src="Lock" width="32px" height="32px" />
+      <span class="name">{{ name }}</span>
+    </div>
+    <div class="type-value">
+      <span class="type">{{ $t('permission.permission_rule') }}</span>
+      <span class="value"> {{ $t('permission.2', { msg: type }) }}</span>
+    </div>
+    <div class="type-value">
+      <span class="type">{{ $t('permission.restricted_user') }}</span>
+      <span class="value"> {{ $t('permission.238_people', { msg: type }) }}</span>
+    </div>
+    <div class="methods">
+      <el-button secondary @click="handleEdit">
+        <template #icon>
+          <icon_key_outlined></icon_key_outlined>
+        </template>
+        {{ $t('permission.set_rule') }}
+      </el-button>
+      <el-button secondary @click="setUser">
+        <template #icon>
+          <icon_member_outlined></icon_member_outlined>
+        </template>
+        {{ $t('permission.set_user') }}
+      </el-button>
+      <el-button secondary @click="handleDel">
+        <template #icon>
+          <delIcon></delIcon>
+        </template>
+        {{ $t('dashboard.delete') }}
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.card {
+  width: 371px;
+  height: 176px;
+  border: 1px solid #dee0e3;
+  padding: 16px;
+  border-radius: 12px;
+  margin: 0 16px 16px 0;
+  &:hover {
+    box-shadow: 0px 6px 24px 0px #1f232914;
+  }
+
+  .name-icon {
+    display: flex;
+    align-items: center;
+    margin-bottom: 12px;
+    .name {
+      margin-left: 12px;
+      font-weight: 500;
+      font-size: 16px;
+      line-height: 24px;
+    }
+  }
+
+  .type-value {
+    margin-top: 8px;
+    display: flex;
+    align-items: center;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 22px;
+    .type {
+      color: #646a73;
+    }
+
+    .value {
+      margin-left: 16px;
+    }
+  }
+
+  .methods {
+    margin-top: 16px;
+  }
+}
+</style>
diff --git a/frontend/src/views/system/permission/index.vue b/frontend/src/views/system/permission/index.vue
new file mode 100644
index 00000000..224fdb02
--- /dev/null
+++ b/frontend/src/views/system/permission/index.vue
@@ -0,0 +1,579 @@
+<script lang="ts" setup>
+import { ref, computed, reactive } from 'vue'
+import icon_searchOutline_outlined from '@/assets/svg/icon_search-outline_outlined.svg'
+import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
+import icon_close_outlined from '@/assets/svg/operate/ope-close.svg'
+import icon_down_outlined from '@/assets/svg/icon_down_outlined.svg'
+import Card from './Card.vue'
+
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
+const keywords = ref('')
+const activeStep = ref(0)
+const dialogFormVisible = ref(false)
+const ruleConfigvVisible = ref(false)
+const editRule = ref(0)
+const termFormRef = ref()
+const columnFormRef = ref()
+const drawerTitle = ref('')
+const dialogTitle = ref('')
+const tableData = ref<any[]>([])
+const ruleList = ref<any[]>([
+  {
+    id: 1,
+    num: '10',
+    type: '90',
+    name: 'jkjkj',
+  },
+])
+const form = reactive({
+  name: '',
+  id: '',
+})
+const tableColumnData = ref<any[]>([])
+const searchColumn = ref('')
+
+const columnForm = reactive({
+  name: '',
+  id: '',
+  dataTable: '',
+  datasource: '',
+})
+
+const options = ref<any[]>([])
+const ruleListWithSearch = computed(() => {
+  if (!keywords.value) return ruleList.value
+  return ruleList.value.filter((ele) =>
+    ele.name.toLowerCase().includes(keywords.value.toLowerCase())
+  )
+})
+const setDrawerTitle = () => {
+  if (activeStep.value === 0) {
+    drawerTitle.value = t('permission.add_rule_group')
+  } else {
+    if (editRule.value === 1) {
+      drawerTitle.value = t('permission.set_permission_rule')
+    }
+
+    if (editRule.value === 2) {
+      drawerTitle.value = t('permission.select_restricted_user')
+    }
+  }
+}
+
+const userTypeList = [
+  {
+    name: t('permission.row_permission'),
+    value: 1,
+  },
+  {
+    name: t('permission.column_permission'),
+    value: 0,
+  },
+]
+
+const handleAddPermission = (val: any) => {
+  if (val === 1) {
+    handleRowPermission()
+  } else {
+    handleColumnPermission(null)
+  }
+}
+
+const handleRowPermission = () => {
+  console.log('handleRowPermission')
+}
+const handleColumnPermission = (row: any) => {
+  dialogFormVisible.value = true
+  dialogTitle.value = row?.id
+    ? t('permission.edit_column_permission')
+    : t('permission.add_column_permission')
+}
+const beforeClose = () => {
+  ruleConfigvVisible.value = false
+  activeStep.value = 0
+}
+const handleSearch = () => {}
+const editHandler = (row: any) => {
+  editRule.value = 0
+  setDrawerTitle()
+  ruleConfigvVisible.value = true
+  console.log('row', row)
+}
+const handleEditRule = (row: any) => {
+  editRule.value = 1
+  setDrawerTitle()
+  console.log(row)
+}
+const deleteHandler = (row: any) => {
+  console.log(row)
+}
+const setUser = (row: any) => {
+  editRule.value = 2
+  setDrawerTitle()
+  console.log(row)
+}
+
+const rules = {
+  name: [
+    {
+      required: true,
+      message: t('datasource.please_enter') + t('common.empty') + t('permission.rule_group_name'),
+      trigger: 'blur',
+    },
+  ],
+}
+
+const closeForm = () => {
+  dialogFormVisible.value = false
+}
+
+const saveHandler = () => {}
+
+const columnRules = {
+  name: [
+    {
+      required: true,
+      message: t('datasource.please_enter') + t('common.empty') + t('permission.rule_name'),
+      trigger: 'blur',
+    },
+  ],
+
+  dataTable: [
+    {
+      required: true,
+      message: t('datasource.please_enter') + t('common.empty') + t('permission.rule_group_name'),
+      trigger: 'blur',
+    },
+  ],
+}
+</script>
+
+<template>
+  <div class="permission">
+    <div class="tool-left">
+      <span class="page-title">{{ $t('workspace.permission_configuration') }}</span>
+      <div>
+        <el-input
+          v-model="keywords"
+          style="width: 240px; margin-right: 12px"
+          :placeholder="$t('permission.search_rule_group')"
+          @keyup.enter="handleSearch"
+          @blur="handleSearch"
+        >
+          <template #prefix>
+            <el-icon>
+              <icon_searchOutline_outlined />
+            </el-icon>
+          </template>
+        </el-input>
+
+        <el-button type="primary" @click="editHandler(null)">
+          <template #icon>
+            <icon_add_outlined></icon_add_outlined>
+          </template>
+          {{ $t('permission.add_rule_group') }}
+        </el-button>
+      </div>
+    </div>
+
+    <EmptyBackground
+      v-if="!!keywords && !ruleListWithSearch.length"
+      :description="$t('datasource.relevant_content_found')"
+      img-type="tree"
+    />
+
+    <div v-else class="card-content">
+      <Card
+        v-for="ele in ruleListWithSearch"
+        :id="ele.id"
+        :key="ele.id"
+        :name="ele.name"
+        :type="ele.type"
+        :num="ele.num"
+        @edit="handleEditRule(ele)"
+        @del="deleteHandler(ele)"
+        @set-user="setUser(ele)"
+      ></Card>
+    </div>
+    <el-drawer
+      v-model="ruleConfigvVisible"
+      :close-on-click-modal="false"
+      size="calc(100% - 100px)"
+      modal-class="permission-drawer-fullscreen"
+      direction="btt"
+      :before-close="beforeClose"
+      :show-close="false"
+    >
+      <template #header="{ close }">
+        <span style="white-space: nowrap">{{ drawerTitle }}</span>
+        <div v-if="!editRule" class="flex-center" style="width: 100%">
+          <el-steps custom style="max-width: 500px; flex: 1" :active="activeStep" align-center>
+            <el-step>
+              <template #title> {{ $t('permission.set_permission_rule') }} </template>
+            </el-step>
+            <el-step>
+              <template #title> {{ $t('permission.select_restricted_user') }} </template>
+            </el-step>
+          </el-steps>
+        </div>
+        <el-icon style="cursor: pointer" @click="close">
+          <icon_close_outlined></icon_close_outlined>
+        </el-icon>
+      </template>
+
+      <div class="drawer-content">
+        <div class="title">
+          {{ $t('ds.form.base_info') }}
+        </div>
+
+        <el-form
+          ref="termFormRef"
+          :model="form"
+          label-width="180px"
+          label-position="top"
+          :rules="rules"
+          class="form-content_error"
+        >
+          <el-form-item prop="name" :label="t('permission.rule_group_name')">
+            <el-input
+              v-model="form.name"
+              :placeholder="
+                $t('datasource.please_enter') +
+                $t('common.empty') +
+                $t('permission.rule_group_name')
+              "
+              autocomplete="off"
+            />
+          </el-form-item>
+
+          <el-form-item class="add-permission_form">
+            <template #label>
+              <div
+                style="
+                  width: 100%;
+                  display: flex;
+                  align-items: center;
+                  justify-content: space-between;
+                "
+              >
+                {{ t('permission.permission_rule') }}
+
+                <el-popover popper-class="system-permission_user" placement="bottom">
+                  <template #reference>
+                    <el-button class="add-btn" type="primary">
+                      {{ $t('model.add') }}
+                      <el-icon style="margin-left: 4px" size="16">
+                        <icon_down_outlined></icon_down_outlined>
+                      </el-icon>
+                    </el-button>
+                  </template>
+                  <div class="popover">
+                    <div class="popover-content">
+                      <div
+                        v-for="ele in userTypeList"
+                        :key="ele.name"
+                        class="popover-item"
+                        @click="handleAddPermission(ele.value)"
+                      >
+                        <div class="model-name">{{ ele.name }}</div>
+                      </div>
+                    </div>
+                  </div>
+                </el-popover>
+              </div>
+            </template>
+            <div class="table-content">
+              <el-table
+                :empty-text="$t('permission.no_rule')"
+                :data="tableData"
+                style="width: 100%"
+              >
+                <el-table-column prop="name" :label="$t('permission.rule_name')" />
+                <el-table-column prop="type" :label="$t('permission.type')" />
+                <el-table-column prop="datasource" :label="$t('permission.data_source')" />
+                <el-table-column prop="data_table" :label="$t('permission.data_table')" />
+                <el-table-column fixed="right" width="150" :label="$t('ds.actions')">
+                  <template #default="scope">
+                    <el-tooltip
+                      :offset="14"
+                      effect="dark"
+                      :content="$t('datasource.edit')"
+                      placement="top"
+                    >
+                      <el-icon class="action-btn" size="16" @click="editHandler(scope.row)">
+                        <IconOpeEdit></IconOpeEdit>
+                      </el-icon>
+                    </el-tooltip>
+
+                    <el-tooltip
+                      :offset="14"
+                      effect="dark"
+                      :content="$t('dashboard.delete')"
+                      placement="top"
+                    >
+                      <el-icon class="action-btn" size="16" @click="deleteHandler(scope.row)">
+                        <IconOpeDelete></IconOpeDelete>
+                      </el-icon>
+                    </el-tooltip>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </div>
+          </el-form-item>
+        </el-form>
+      </div>
+    </el-drawer>
+
+    <el-drawer
+      v-model="dialogFormVisible"
+      :title="dialogTitle"
+      destroy-on-close
+      size="896px"
+      modal-class="column-form_drawer"
+      :before-close="closeForm"
+    >
+      <el-form
+        ref="columnFormRef"
+        :model="columnForm"
+        label-width="180px"
+        label-position="top"
+        :rules="columnRules"
+        class="form-content_error"
+      >
+        <el-form-item prop="name" :label="t('permission.rule_name')">
+          <el-input
+            v-model="columnForm.name"
+            :placeholder="
+              $t('datasource.please_enter') + $t('common.empty') + $t('permission.rule_name')
+            "
+            autocomplete="off"
+          />
+        </el-form-item>
+        <el-form-item prop="dataTable" :label="t('permission.data_table')">
+          <el-select
+            v-model="columnForm.datasource"
+            style="width: 416px"
+            :placeholder="
+              $t('datasource.Please_select') + $t('common.empty') + $t('permission.data_source')
+            "
+          >
+            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
+          </el-select>
+          <el-select
+            v-model="columnForm.dataTable"
+            style="width: 416px; margin-left: auto"
+            :disabled="!columnForm.datasource"
+            :placeholder="
+              $t('datasource.Please_select') + $t('common.empty') + $t('permission.data_table')
+            "
+          >
+            <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('permission.set_rule')">
+          <el-input
+            v-model="searchColumn"
+            :placeholder="$t('permission.search_rule_group')"
+            autocomplete="off"
+            ><template #prefix>
+              <el-icon>
+                <icon_searchOutline_outlined />
+              </el-icon> </template
+          ></el-input>
+        </el-form-item>
+      </el-form>
+      <div class="table-content">
+        <el-table
+          :empty-text="$t('permission.no_fields_yet')"
+          :data="tableColumnData"
+          style="width: 100%"
+        >
+          <el-table-column prop="name" :label="$t('datasource.field_name')" />
+          <el-table-column prop="type" :label="$t('datasource.field_notes')" />
+          <el-table-column fixed="right" width="150" :label="$t('ds.actions')">
+            <template #default="scope">
+              <el-switch v-model="scope.row.checked" size="small" />
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="closeForm">{{ $t('common.cancel') }}</el-button>
+          <el-button type="primary" @click="saveHandler">
+            {{ $t('common.save') }}
+          </el-button>
+        </div>
+      </template>
+    </el-drawer>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.permission {
+  .tool-left {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 16px;
+
+    .page-title {
+      font-weight: 500;
+      font-size: 20px;
+      line-height: 28px;
+    }
+  }
+
+  .card-content {
+    display: flex;
+    flex-wrap: wrap;
+    max-height: calc(100% - 40px);
+    overflow-y: auto;
+  }
+}
+</style>
+
+<style lang="less">
+.permission-drawer-fullscreen {
+  .title {
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 24px;
+    margin-top: 8px;
+    margin-bottom: 16px;
+  }
+
+  .drawer-content {
+    width: 800px;
+    margin: 0 auto;
+    height: calc(100% - 20px);
+
+    .add-btn:hover {
+      .ed-icon {
+        transform: rotate(180deg);
+      }
+    }
+    .add-permission_form {
+      .ed-form-item__label {
+        width: 100%;
+        padding-right: 0;
+      }
+
+      .table-content {
+        width: 100%;
+        margin-top: 16px;
+        border: 1px solid #1f232926;
+        border-top: none;
+        border-radius: 6px;
+        overflow: hidden;
+        max-height: calc(100vh - 400px);
+        .ed-table__empty-text {
+          padding-top: 0;
+        }
+
+        .ed-icon {
+          position: relative;
+          cursor: pointer;
+          color: #646a73;
+
+          &::after {
+            content: '';
+            background-color: #1f23291a;
+            position: absolute;
+            border-radius: 6px;
+            width: 24px;
+            height: 24px;
+            transform: translate(-50%, -50%);
+            top: 50%;
+            left: 50%;
+            display: none;
+          }
+
+          &:hover {
+            &::after {
+              display: block;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.column-form_drawer {
+  .table-content {
+    width: 100%;
+    margin-top: 16px;
+    border: 1px solid #1f232926;
+    border-top: none;
+    border-radius: 6px;
+    overflow: hidden;
+    max-height: calc(100vh - 400px);
+    .ed-table__empty-text {
+      padding-top: 0;
+    }
+  }
+}
+
+.system-permission_user.system-permission_user {
+  padding: 0;
+  width: 120px !important;
+  min-width: 120px !important;
+  box-shadow: 0px 4px 8px 0px #1f23291a;
+  border: 1px solid #dee0e3;
+
+  .popover {
+    .popover-content {
+      padding: 4px;
+      position: relative;
+      &::after {
+        position: absolute;
+        content: '';
+        left: 0;
+        top: 40px;
+        width: 100%;
+        height: 1px;
+        background: #1f232926;
+      }
+    }
+    .popover-item {
+      height: 32px;
+      display: flex;
+      align-items: center;
+      padding-left: 12px;
+      padding-right: 8px;
+      position: relative;
+      border-radius: 4px;
+      cursor: pointer;
+      &:hover {
+        background: #1f23291a;
+      }
+
+      &:nth-child(2) {
+        margin: 9px 0 0 0;
+      }
+
+      .model-name {
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 22px;
+      }
+
+      .done {
+        margin-left: auto;
+        display: none;
+      }
+
+      &.isActive {
+        color: var(--ed-color-primary);
+
+        .done {
+          display: block;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/frontend/src/views/system/user/User.vue b/frontend/src/views/system/user/User.vue
index 6478cab2..e22d4769 100644
--- a/frontend/src/views/system/user/User.vue
+++ b/frontend/src/views/system/user/User.vue
@@ -165,8 +165,7 @@
     :title="dialogTitle"
     destroy-on-close
     size="600px"
-    modle-class="sqlbot-drawer"
-    @close="onFormClose"
+    :before-close="onFormClose"
   >
     <el-form
       ref="termFormRef"