diff --git a/apps/daas/src/directives/index.ts b/apps/daas/src/directives/index.ts
index 723229221..1f19ad6a8 100644
--- a/apps/daas/src/directives/index.ts
+++ b/apps/daas/src/directives/index.ts
@@ -37,12 +37,11 @@ export function installDirectives(app) {
   app.provide('hasPermissionByCode', hasPermissionByCode)
 
   app.directive('readonlybtn', {
-    mounted(el, binding, vnode) {
+    mounted(el, binding) {
       const code = binding.value
 
       if (!hasPermissionByCode(code)) {
         el.remove()
-        vnode.child && vnode.child.$destroy()
       }
     },
   })
diff --git a/apps/daas/src/i18n/langs/en.js b/apps/daas/src/i18n/langs/en.js
index 21d7ddb00..2b8ccba68 100644
--- a/apps/daas/src/i18n/langs/en.js
+++ b/apps/daas/src/i18n/langs/en.js
@@ -1962,6 +1962,7 @@ export default {
   account_editFail: 'User name modification failed',
   role_allData: 'All role data',
   role_functionDataPermission: 'Function and data permissions',
+  role_dataPermission: 'Data Permissions',
   role_module: 'Module',
   role_choosePermissionTip:
     'Please select the functions and data permissions available for this role (checking all role data means you can browse or operate the data of all roles, unchecking means you can only browse or operate your own data )',
diff --git a/apps/daas/src/i18n/langs/zh-CN.js b/apps/daas/src/i18n/langs/zh-CN.js
index 36e6a33dd..c83a0d512 100644
--- a/apps/daas/src/i18n/langs/zh-CN.js
+++ b/apps/daas/src/i18n/langs/zh-CN.js
@@ -1861,6 +1861,7 @@ export default {
   account_editFail: '用户名修改失败',
   role_allData: '全部角色数据',
   role_functionDataPermission: '功能与数据权限',
+  role_dataPermission: '数据权限',
   role_module: '模块',
   role_choosePermissionTip:
     '请选择此角色可用的功能和数据权限 （勾选全部角色数据表示可对全部角色的数据进行浏览或操作，不勾选则表示只能对自己的数据进行浏览或操作）',
diff --git a/apps/daas/src/i18n/langs/zh-TW.js b/apps/daas/src/i18n/langs/zh-TW.js
index 3a81b1147..a6a0f0180 100644
--- a/apps/daas/src/i18n/langs/zh-TW.js
+++ b/apps/daas/src/i18n/langs/zh-TW.js
@@ -1853,6 +1853,7 @@ export default {
   account_editFail: '用戶名修改失敗',
   role_allData: '全部角色數據',
   role_functionDataPermission: '功能與數據權限',
+  role_dataPermission: '數據權限',
   role_module: '模塊',
   role_choosePermissionTip:
     '請選擇此角色可用的功能和數據權限 （勾選全部角色數據表示可對全部角色的數據進行瀏覽或操作，不勾選則表示只能對自己的數據進行瀏覽或操作）',
diff --git a/apps/daas/src/router/routes.ts b/apps/daas/src/router/routes.ts
index 9e8d9a6ff..58c5ace58 100644
--- a/apps/daas/src/router/routes.ts
+++ b/apps/daas/src/router/routes.ts
@@ -891,6 +891,7 @@ export const routes = [
           import('@/views/data-import-export/ProjectManagement.vue'),
         meta: {
           title: 'page_title_project_management',
+          code: 'v2_project_management',
         },
       },
       {
@@ -899,6 +900,7 @@ export const routes = [
         component: () => import('@/views/data-import-export/List.vue'),
         meta: {
           title: 'page_title_data_import_export',
+          code: 'v2_project_import_and_export',
         },
       },
     ],
diff --git a/apps/daas/src/views/api-page/ApiServer.vue b/apps/daas/src/views/api-page/ApiServer.vue
index 1faeb2a99..6767c2493 100644
--- a/apps/daas/src/views/api-page/ApiServer.vue
+++ b/apps/daas/src/views/api-page/ApiServer.vue
@@ -1,4 +1,4 @@
-<script>
+<script setup lang="ts">
 import {
   API_SERVER_BASE_URL,
   createApiServer,
@@ -8,228 +8,170 @@ import {
 } from '@tap/api/src/core/api-server'
 import PageContainer from '@tap/business/src/components/PageContainer.vue'
 import TablePage from '@tap/business/src/components/TablePage.vue'
-import { FilterBar } from '@tap/component/src/filter-bar'
+import { useHas } from '@tap/business/src/composables'
+import i18n from '@tap/i18n'
 import Cookie from '@tap/shared/src/cookie'
+import { ElMessage, ElMessageBox } from 'element-plus'
 import { escapeRegExp } from 'lodash-es'
-import { h } from 'vue'
+import { h, nextTick, reactive, ref } from 'vue'
 
-export default {
-  name: 'ApiServer',
-  components: {
-    PageContainer,
-    TablePage,
-    FilterBar,
-  },
-  data() {
-    return {
-      searchParams: {
-        keyword: '',
-      },
-      filterItems: [],
-      order: 'clientName DESC',
-      createDialogVisible: false,
-      createForm: {
-        processId: '',
-        clientName: '',
-        clientURI: '',
-      },
-      createFormConfig: {
-        form: {
-          labelPosition: 'top',
-          labelWidth: '180px',
-        },
-        items: [
-          {
-            type: 'input',
-            label: this.$t('api_server_process_id'),
-            field: 'processId',
-            show: true,
-            required: true,
-          },
-          {
-            type: 'input',
-            label: this.$t('api_server_client_name'),
-            field: 'clientName',
-            show: true,
-            required: true,
-            maxlength: 100,
-            showWordLimit: true,
-          },
-          {
-            type: 'input',
-            label: this.$t('api_server_client_uri'),
-            field: 'clientURI',
-            placeholder: `${this.$t('api_server_client_uri')}(http://127.0.0.1:3080)`,
-            show: true,
-            required: true,
-            maxlength: 200,
-            showWordLimit: true,
-          },
-        ],
-        rules: {
-          processId: [
-            {
-              required: true,
-              message: `${this.$t('api_server_process_id')} ${this.$t(
-                'public_form_not_empty',
-              )}`,
-              trigger: 'blur',
-            },
-          ],
-          clientName: [
-            {
-              required: true,
-              message: `${this.$t('api_server_client_name')} ${this.$t(
-                'public_form_not_empty',
-              )}`,
-              trigger: 'blur',
-            },
-          ],
-          clientURI: [
-            {
-              required: true,
-              message: `${this.$t('api_server_client_uri')} ${this.$t(
-                'public_form_not_empty',
-              )}`,
-              trigger: 'blur',
-            },
-          ],
-        },
-      },
-    }
-  },
-  computed: {
-    table() {
-      return this.$refs.table
-    },
-  },
-  created() {
-    this.getFilterItems()
-  },
-  methods: {
-    // 重置查询条件
-    reset(name) {
-      if (name === 'reset') {
-        this.searchParams = {
-          keyword: '',
-        }
-      }
-      this.table.fetch(1)
-    },
-    // 创建
-    openCreateDialog() {
-      this.createDialogVisible = true
-      this.$nextTick(() => {
-        this.$refs.form.clearValidate()
-      })
-      this.createForm = {
-        processId: this.generatorSecret(),
-        clientName: '',
-        clientURI: '',
-      }
+const spacer = h(ElDivider, { direction: 'vertical', class: 'mx-1' })
+
+const { t } = i18n.global
+const $has = useHas()
+
+interface CreateForm {
+  id?: string
+  processId: string
+  clientName: string
+  clientURI: string
+}
+
+const table = ref()
+const formRef = ref()
+const searchParams = ref({
+  keyword: '',
+})
+const order = ref('clientName DESC')
+const createDialogVisible = ref(false)
+const createForm = reactive<CreateForm>({
+  processId: '',
+  clientName: '',
+  clientURI: '',
+})
+
+const createFormRules = {
+  processId: [
+    {
+      required: true,
+      message: `${t('api_server_process_id')} ${t('public_form_not_empty')}`,
+      trigger: 'blur',
     },
-    // 编辑
-    edit(item) {
-      this.createDialogVisible = true
-      this.$nextTick(() => {
-        this.$refs.form.clearValidate()
-      })
-      Object.assign(this.createForm, item)
+  ],
+  clientName: [
+    {
+      required: true,
+      message: `${t('api_server_client_name')} ${t('public_form_not_empty')}`,
+      trigger: 'blur',
     },
-    // 移除
-    remove(item) {
-      const message = h('p', [
-        `${this.$t('public_message_delete_confirm')} ${item.clientName}`,
-      ])
-      this.$confirm(message).then((resFlag) => {
-        if (!resFlag) {
-          return
-        }
-        deleteApiServer(item.id).then(() => {
-          this.$message.success(this.$t('public_message_delete_ok'))
-          this.table.fetch()
-        })
-      })
+  ],
+  clientURI: [
+    {
+      required: true,
+      message: `${t('api_server_client_uri')} ${t('public_form_not_empty')}`,
+      trigger: 'blur',
     },
+  ],
+}
 
-    // 下载api配置文件
-    downloadConfig(item) {
-      const token = Cookie.get('access_token')
-      window.open(
-        `${API_SERVER_BASE_URL}/download/${item.id}?access_token=${token}`,
-        '_blank',
-      )
-    },
+// 自动生成唯一标识
+const generatorSecret = () => {
+  const S4 = () => {
+    return (((1 + Math.random()) * 0x40000) | 0).toString(16).slice(1)
+  }
+  const NewGuid = () => {
+    return S4() + S4() + S4() + S4() + S4() + S4() + S4() + S4()
+  }
+  return NewGuid()
+}
 
-    // 保存
-    createServer() {
-      const params = this.createForm
-      this.$refs.form.validate((valid) => {
-        if (valid) {
-          const apiCall = this.createForm.id
-            ? updateApiServer(this.createForm.id, params)
-            : createApiServer(params)
+// 创建
+const openCreateDialog = () => {
+  createDialogVisible.value = true
+  nextTick(() => {
+    formRef.value?.clearValidate()
+  })
+  Object.assign(createForm, {
+    id: undefined as string | undefined,
+    processId: generatorSecret(),
+    clientName: '',
+    clientURI: '',
+  })
+}
 
-          apiCall.then(() => {
-            this.table.fetch()
-            this.createDialogVisible = false
-            this.$message.success(this.$t('public_message_save_ok'))
-          })
-          // .catch(() => {
-          // })
-        }
-      })
-    },
+// 编辑
+const edit = (item: Record<string, any>) => {
+  createDialogVisible.value = true
+  nextTick(() => {
+    formRef.value?.clearValidate()
+  })
+  Object.assign(createForm, item)
+}
 
-    // 自动生成唯一标识
-    generatorSecret() {
-      const S4 = function () {
-        return (((1 + Math.random()) * 0x40000) | 0).toString(16).slice(1)
-      }
-      const NewGuid = function () {
-        return S4() + S4() + S4() + S4() + S4() + S4() + S4() + S4()
-      }
-      return NewGuid()
-    },
-    // 获取数据
-    getData({ page }) {
-      const { current, size } = page
-      const { keyword } = this.searchParams
-      const where = {}
-      if (keyword && keyword.trim()) {
-        const filterObj = { like: escapeRegExp(keyword), options: 'i' }
-        where.or = [{ clientName: filterObj }]
-      }
+// 移除
+const remove = (item: Record<string, any>) => {
+  const message = h('p', [
+    `${t('public_message_delete_confirm')} ${item.clientName}`,
+  ])
+  ElMessageBox.confirm(message).then(() => {
+    deleteApiServer(item.id).then(() => {
+      ElMessage.success(t('public_message_delete_ok'))
+      table.value?.fetch()
+    })
+  })
+}
 
-      const filter = {
-        order: this.order,
-        limit: size,
-        skip: (current - 1) * size,
-        where,
-      }
-      return fetchApiServers(filter).then((data) => {
-        return {
-          total: data?.total || 0,
-          data: data?.items || [],
-        }
+// 下载api配置文件
+const downloadConfig = (item: Record<string, any>) => {
+  const token = Cookie.get('access_token')
+  window.open(
+    `${API_SERVER_BASE_URL}/download/${item.id}?access_token=${token}`,
+    '_blank',
+  )
+}
+
+// 保存
+const createServer = () => {
+  const params = createForm
+  formRef.value?.validate((valid: boolean) => {
+    if (valid) {
+      const apiCall = createForm.id
+        ? updateApiServer(createForm.id, params)
+        : createApiServer(params)
+
+      apiCall.then(() => {
+        table.value?.fetch()
+        createDialogVisible.value = false
+        ElMessage.success(t('public_message_save_ok'))
       })
-    },
+    }
+  })
+}
 
-    // 表格排序
-    handleSortTable({ order, prop }) {
-      this.order = `${order ? prop : 'clientName'} ${order === 'ascending' ? 'ASC' : 'DESC'}`
-      this.table.fetch(1)
-    },
-    getFilterItems() {
-      this.filterItems = [
-        {
-          placeholder: this.$t('public_name'),
-          key: 'keyword',
-          type: 'input',
-        },
-      ]
-    },
-  },
+// 获取数据
+const getData = ({ page }: { page: { current: number; size: number } }) => {
+  const { current, size } = page
+  const { keyword } = searchParams.value
+  const where: Record<string, any> = {}
+  if (keyword && keyword.trim()) {
+    const filterObj = { like: escapeRegExp(keyword), options: 'i' }
+    where.or = [{ clientName: filterObj }]
+  }
+
+  const filter = {
+    order: order.value,
+    limit: size,
+    skip: (current - 1) * size,
+    where,
+  }
+  return fetchApiServers(filter).then((data) => {
+    return {
+      total: data?.total || 0,
+      data: data?.items || [],
+    }
+  })
+}
+
+// 表格排序
+const handleSortTable = ({
+  order: sortOrder,
+  prop,
+}: {
+  order: string
+  prop: string
+}) => {
+  order.value = `${sortOrder ? prop : 'clientName'} ${sortOrder === 'ascending' ? 'ASC' : 'DESC'}`
+  table.value?.fetch(1)
 }
 </script>
 
@@ -237,7 +179,7 @@ export default {
   <PageContainer>
     <template #actions>
       <el-button
-        v-readonlybtn="'API_creation'"
+        v-if="$has('v2_api-servers_creation')"
         type="primary"
         class="btn btn-create"
         @click="openCreateDialog"
@@ -255,16 +197,6 @@ export default {
       :remote-method="getData"
       @sort-change="handleSortTable"
     >
-      <template #search>
-        <div class="search-bar">
-          <FilterBar
-            v-model:value="searchParams"
-            :items="filterItems"
-            @fetch="table.fetch(1)"
-          />
-        </div>
-      </template>
-
       <el-table-column
         :label="$t('api_server_user')"
         :show-overflow-tooltip="true"
@@ -299,38 +231,35 @@ export default {
         width="200"
         fixed="right"
       >
-        <template #default="scope">
-          <el-button
-            v-readonlybtn="'API_clients_amangement'"
-            text
-            type="primary"
-            @click="edit(scope.row)"
-          >
-            {{ $t('public_button_edit') }}
-          </el-button>
-          <ElDivider class="mx-1" direction="vertical" />
-          <el-button
-            v-readonlybtn="'API_clients_amangement'"
-            text
-            type="primary"
-            @click="remove(scope.row)"
-            >{{ $t('public_button_delete') }}</el-button
-          >
-          <ElDivider class="mx-1" direction="vertical" />
-          <el-tooltip
-            class="item"
-            effect="dark"
-            :content="$t('api_server_download_API_Server_config')"
-            placement="top"
-          >
+        <template #default="{ row }">
+          <el-space :spacer="spacer" :size="0" class="lh-1">
+            <el-button
+              v-if="row.permissionActions?.includes('Edit')"
+              text
+              type="primary"
+              @click="edit(row)"
+            >
+              {{ $t('public_button_edit') }}
+            </el-button>
             <el-button
-              v-readonlybtn="'API_clients_amangement'"
+              v-if="row.permissionActions?.includes('Delete')"
               text
               type="primary"
-              @click="downloadConfig(scope.row)"
-              >{{ $t('public_button_download') }}</el-button
+              @click="remove(row)"
+              >{{ $t('public_button_delete') }}</el-button
+            >
+            <el-tooltip
+              v-if="$has('v2_api-servers_download')"
+              class="item"
+              effect="dark"
+              :content="$t('api_server_download_API_Server_config')"
+              placement="top"
             >
-          </el-tooltip>
+              <el-button text type="primary" @click="downloadConfig(row)">{{
+                $t('public_button_download')
+              }}</el-button>
+            </el-tooltip>
+          </el-space>
         </template>
       </el-table-column>
     </TablePage>
@@ -345,11 +274,11 @@ export default {
       :close-on-click-modal="false"
     >
       <el-form
-        ref="form"
+        ref="formRef"
         :model="createForm"
-        :label-position="createFormConfig.form.labelPosition"
-        :label-width="createFormConfig.form.labelWidth"
-        :rules="createFormConfig.rules"
+        label-position="top"
+        label-width="180px"
+        :rules="createFormRules"
       >
         <el-form-item
           :label="$t('api_server_process_id')"
diff --git a/apps/daas/src/views/api-page/Applications.vue b/apps/daas/src/views/api-page/Applications.vue
index c86671ce9..56bb781dc 100644
--- a/apps/daas/src/views/api-page/Applications.vue
+++ b/apps/daas/src/views/api-page/Applications.vue
@@ -1,4 +1,4 @@
-<script>
+<script setup lang="ts">
 import {
   createApiClient,
   deleteApiClient,
@@ -8,193 +8,180 @@ import {
 import { fetchRoles } from '@tap/api/src/core/roles'
 import PageContainer from '@tap/business/src/components/PageContainer.vue'
 import TablePage from '@tap/business/src/components/TablePage.vue'
-import { FilterBar } from '@tap/component/src/filter-bar'
+import { useHas } from '@tap/business/src/composables'
+import i18n from '@tap/i18n'
 import { cloneDeep, escapeRegExp } from 'lodash-es'
-import { h } from 'vue'
+import { h, nextTick, reactive, ref } from 'vue'
 
-export default {
-  name: 'Applications',
-  components: {
-    PageContainer,
-    TablePage,
-    FilterBar,
-  },
-  data() {
-    return {
-      searchParams: {
-        keyword: '',
-      },
-      filterItems: [],
-      order: 'clientName DESC',
-      createDialogVisible: false,
-      roles: [],
-      createForm: {
-        clientName: '',
-        clientId: '',
-        grantTypes: [],
-        clientSecret: '',
-        scopes: [],
-        redirectUris: [],
-        redirectUrisStr: '',
-        showMenu: true,
-      },
-    }
-  },
-  computed: {
-    table() {
-      return this.$refs.table
-    },
-  },
-  created() {
-    this.getFilterItems()
-    this.getRoles()
-  },
-  methods: {
-    // 重置查询条件
-    reset(name) {
-      if (name === 'reset') {
-        this.searchParams = {
-          keyword: '',
-        }
-      }
-      this.table.fetch(1)
-    },
-    // 创建
-    openCreateDialog() {
-      this.createDialogVisible = true
-      this.createForm = {
-        clientName: '',
-        clientId: '',
-        grantTypes: ['implicit', 'client_credentials'],
-        clientSecret: '',
-        scopes: [],
-        redirectUris: [],
-        redirectUrisStr: '',
-        showMenu: true,
-      }
-      this.$nextTick(() => {
-        setTimeout(() => {
-          this.$refs.form.clearValidate()
-        }, 50)
-      })
-    },
-    // 编辑
-    edit(item) {
-      this.createDialogVisible = true
-      this.$nextTick(() => {
-        this.$refs.form.clearValidate()
-      })
-      Object.assign(this.createForm, item)
-    },
-    // 移除
-    remove(item) {
-      const message = h('p', [
-        `${this.$t('public_message_delete_confirm')} ${item.name}`,
-      ])
-      this.$confirm(this.$t('public_message_title_prompt'), message).then(
-        (resFlag) => {
-          if (!resFlag) {
-            return
-          }
-          deleteApiClient(item.id).then(() => {
-            this.$message.success(this.$t('public_message_delete_ok'))
-            this.table.fetch()
-          })
-        },
-      )
-    },
-    // 保存
-    createApplication() {
-      const method = this.createForm.id ? updateApiClient : createApiClient
-      const params = cloneDeep(this.createForm)
-      params.name = this.createForm.clientName
-      params.tokenType = 'jwt'
-      params.clientType = 'public'
-      params.responseTypes = ['token']
-      params.redirectUris = params.redirectUrisStr?.split(',') || []
-      delete params.redirectUrisStr
+const { t } = i18n.global
 
-      // 如果clientId为空，则不传递该字段
-      if (!params.clientId || params.clientId.trim() === '') {
-        delete params['clientId']
-      }
+interface CreateForm {
+  id?: string
+  clientName: string
+  clientId: string
+  grantTypes: string[]
+  clientSecret: string
+  scopes: string[]
+  redirectUris: string[]
+  redirectUrisStr: string
+  showMenu: boolean
+  [key: string]: any
+}
 
-      this.$refs.form.validate((valid) => {
-        if (valid) {
-          method(params).then(() => {
-            this.table.fetch()
-            this.createDialogVisible = false
-            this.$message.success(this.$t('public_message_save_ok'))
-          })
-        }
-      })
-    },
-    // 获取密钥
-    generatorSecret() {
-      const S4 = function () {
-        return (((1 + Math.random()) * 0x40000) | 0).toString(16).slice(1)
-      }
-      const NewGuid = function () {
-        return S4() + S4() + S4() + S4() + S4() + S4() + S4() + S4()
-      }
-      this.createForm.clientSecret = NewGuid()
-      // return NewGuid()
-    },
-    // 获取数据
-    getData({ page }) {
-      const { current, size } = page
-      const { keyword } = this.searchParams
-      const where = {}
-      if (keyword && keyword.trim()) {
-        const filterObj = { like: escapeRegExp(keyword), options: 'i' }
-        where.or = [{ clientName: filterObj }]
-      }
+const spacer = h(ElDivider, { direction: 'vertical', class: 'mx-1' })
 
-      const filter = {
-        order: this.order,
-        limit: size,
-        skip: (current - 1) * size,
-        where,
-      }
-      return fetchApiClients(filter).then((data) => {
-        return {
-          total: data?.total || 0,
-          data:
-            data?.items.map((item) => {
-              item.redirectUrisStr = item.redirectUris
-                ? item.redirectUris.join(',')
-                : ''
-              return item
-            }) || [],
-        }
-      })
-    },
-    // 获取角色
-    getRoles() {
-      const filter = {
-        limit: 500,
-        skip: 0,
-      }
-      fetchRoles(filter).then((data) => {
-        this.roles = data?.items || []
+const table = ref()
+const formRef = ref()
+const searchParams = ref({
+  keyword: '',
+})
+const order = ref('clientName DESC')
+const createDialogVisible = ref(false)
+const roles = ref<any[]>([])
+const createForm = reactive<CreateForm>({
+  clientName: '',
+  clientId: '',
+  grantTypes: [],
+  clientSecret: '',
+  scopes: [],
+  redirectUris: [],
+  redirectUrisStr: '',
+  showMenu: true,
+})
+const $has = useHas()
+
+// 获取角色
+const getRoles = () => {
+  const filter = {
+    limit: 500,
+    skip: 0,
+  }
+  fetchRoles(filter).then((data) => {
+    roles.value = data?.items || []
+  })
+}
+
+getRoles()
+
+// 创建
+const openCreateDialog = () => {
+  createDialogVisible.value = true
+  Object.assign(createForm, {
+    id: undefined as string | undefined,
+    clientName: '',
+    clientId: '',
+    grantTypes: ['implicit', 'client_credentials'],
+    clientSecret: '',
+    scopes: [],
+    redirectUris: [],
+    redirectUrisStr: '',
+    showMenu: true,
+  })
+  nextTick(() => {
+    setTimeout(() => {
+      formRef.value?.clearValidate()
+    }, 50)
+  })
+}
+
+// 编辑
+const edit = (item: Record<string, any>) => {
+  createDialogVisible.value = true
+  nextTick(() => {
+    formRef.value?.clearValidate()
+  })
+  Object.assign(createForm, item)
+}
+
+// 移除
+const remove = (item: Record<string, any>) => {
+  const message = h('p', [`${t('public_message_delete_confirm')} ${item.name}`])
+  ElMessageBox.confirm(message, t('public_message_title_prompt')).then(() => {
+    deleteApiClient(item.id).then(() => {
+      ElMessage.success(t('public_message_delete_ok'))
+      table.value?.fetch()
+    })
+  })
+}
+
+// 保存
+const createApplication = () => {
+  const method = createForm.id ? updateApiClient : createApiClient
+  const params: Record<string, any> = cloneDeep(createForm)
+  params.name = createForm.clientName
+  params.tokenType = 'jwt'
+  params.clientType = 'public'
+  params.responseTypes = ['token']
+  params.redirectUris = params.redirectUrisStr?.split(',') || []
+  delete params.redirectUrisStr
+
+  // 如果clientId为空，则不传递该字段
+  if (!params.clientId || params.clientId.trim() === '') {
+    delete params.clientId
+  }
+
+  formRef.value?.validate((valid: boolean) => {
+    if (valid) {
+      method(params).then(() => {
+        table.value?.fetch()
+        createDialogVisible.value = false
+        ElMessage.success(t('public_message_save_ok'))
       })
-    },
+    }
+  })
+}
 
-    // 表格排序
-    handleSortTable({ order, prop }) {
-      this.order = `${order ? prop : 'last_updated'} ${order === 'ascending' ? 'ASC' : 'DESC'}`
-      this.table.fetch(1)
-    },
-    getFilterItems() {
-      this.filterItems = [
-        {
-          placeholder: this.$t('modules_name_placeholder'),
-          key: 'keyword',
-          type: 'input',
-        },
-      ]
-    },
-  },
+// 获取密钥
+const generatorSecret = () => {
+  const S4 = () => {
+    return (((1 + Math.random()) * 0x40000) | 0).toString(16).slice(1)
+  }
+  const NewGuid = () => {
+    return S4() + S4() + S4() + S4() + S4() + S4() + S4() + S4()
+  }
+  createForm.clientSecret = NewGuid()
+}
+
+// 获取数据
+const getData = ({ page }: { page: { current: number; size: number } }) => {
+  const { current, size } = page
+  const { keyword } = searchParams.value
+  const where: Record<string, any> = {}
+  if (keyword && keyword.trim()) {
+    const filterObj = { like: escapeRegExp(keyword), options: 'i' }
+    where.or = [{ clientName: filterObj }]
+  }
+
+  const filter = {
+    order: order.value,
+    limit: size,
+    skip: (current - 1) * size,
+    where,
+  }
+  return fetchApiClients(filter).then((data) => {
+    return {
+      total: data?.total || 0,
+      data:
+        data?.items.map((item) => {
+          item.redirectUrisStr = item.redirectUris
+            ? item.redirectUris.join(',')
+            : ''
+          return item
+        }) || [],
+    }
+  })
+}
+
+// 表格排序
+const handleSortTable = ({
+  order: sortOrder,
+  prop,
+}: {
+  order: string
+  prop: string
+}) => {
+  order.value = `${sortOrder ? prop : 'last_updated'} ${sortOrder === 'ascending' ? 'ASC' : 'DESC'}`
+  table.value?.fetch(1)
 }
 </script>
 
@@ -202,7 +189,7 @@ export default {
   <PageContainer>
     <template #actions>
       <ElButton
-        v-readonlybtn="'API_creation'"
+        v-if="$has('v2_api-client_creation')"
         class="btn btn-create"
         type="primary"
         @click="openCreateDialog"
@@ -218,16 +205,6 @@ export default {
       :remote-method="getData"
       @sort-change="handleSortTable"
     >
-      <template #search>
-        <div class="search-bar">
-          <FilterBar
-            v-model:value="searchParams"
-            :items="filterItems"
-            @fetch="table.fetch(1)"
-          />
-        </div>
-      </template>
-
       <el-table-column
         :label="$t('application_header_id')"
         :show-overflow-tooltip="true"
@@ -298,25 +275,29 @@ export default {
         min-width="120"
         fixed="right"
       >
-        <template #default="scope">
-          <ElButton
-            v-readonlybtn="'API_clients_amangement'"
-            text
-            type="primary"
-            @click="edit(scope.row)"
-          >
-            {{ $t('public_button_edit') }}
-          </ElButton>
-          <template v-if="scope.row.id !== '5c0e750b7a5cd42464a5099d'">
-            <ElDivider class="mx-1" direction="vertical" />
+        <template #default="{ row }">
+          <el-space :spacer="spacer" :size="0" class="lh-1">
+            <ElButton
+              v-if="row.permissionActions?.includes('Edit')"
+              v-readonlybtn="'API_clients_amangement'"
+              text
+              type="primary"
+              @click="edit(row)"
+            >
+              {{ $t('public_button_edit') }}
+            </ElButton>
             <ElButton
+              v-if="
+                row.id !== '5c0e750b7a5cd42464a5099d' &&
+                row.permissionActions?.includes('Delete')
+              "
               v-readonlybtn="'API_clients_amangement'"
               text
               type="primary"
-              @click="remove(scope.row)"
+              @click="remove(row)"
               >{{ $t('public_button_delete') }}</ElButton
             >
-          </template>
+          </el-space>
         </template>
       </el-table-column>
     </TablePage>
@@ -329,7 +310,7 @@ export default {
       :close-on-click-modal="false"
     >
       <ElForm
-        ref="form"
+        ref="formRef"
         :model="createForm"
         class="applications-form"
         label-width="100px"
@@ -343,7 +324,10 @@ export default {
           <ElInput v-model="createForm.clientName" />
         </ElFormItem>
         <ElFormItem :label="$t('application_header_id')" prop="clientId">
-          <ElInput v-model="createForm.clientId" :placeholder="$t('application_client_id_placeholder')"></ElInput>
+          <ElInput
+            v-model="createForm.clientId"
+            :placeholder="$t('application_client_id_placeholder')"
+          />
         </ElFormItem>
         <ElFormItem
           :label="$t('application_header_grant_type')"
diff --git a/apps/daas/src/views/role/Role.vue b/apps/daas/src/views/role/Role.vue
index 1c564cd06..93b890f3a 100644
--- a/apps/daas/src/views/role/Role.vue
+++ b/apps/daas/src/views/role/Role.vue
@@ -1,11 +1,35 @@
-<script>
+<script setup lang="ts">
 import { Check } from '@element-plus/icons-vue'
 import { fetchPermissions } from '@tap/api/src/core/permissions'
 import { fetchRoleMappings } from '@tap/api/src/core/role-mappings'
 import { updatePermissionRoleMapping } from '@tap/api/src/core/users'
 import PageContainer from '@tap/business/src/components/PageContainer.vue'
-import i18n from '@/i18n'
+import { Modal } from '@tap/component/src/modal'
+import { useI18n } from '@tap/i18n'
+import { ElMessage } from 'element-plus'
+import { computed, onMounted, reactive, ref } from 'vue'
 
+import { useRoute, useRouter } from 'vue-router'
+
+const { t } = useI18n()
+const route = useRoute()
+const router = useRouter()
+
+const emit = defineEmits<{
+  saveBack: []
+}>()
+
+// ---- 模块图标映射（与 menu.ts 中 icon 对应） ----
+const MODULE_ICONS: Record<string, string> = {
+  'v2_data-console': 'process-platform',
+  v2_datasource_menu: 'agent',
+  v2_data_pipeline: 'migrate',
+  v2_advanced_features: 'vip-one',
+  'v2_data-server': 'apiServer_navbar',
+  'v2_system-management': 'setting',
+}
+
+// ---- pageSort 配置 ----
 const pageSort = [
   { name: 'v2_data-console', children: [{ name: 'v2_data-console' }] },
   {
@@ -15,17 +39,20 @@ const pageSort = [
         name: 'v2_datasource_menu',
         buttons: [
           {
-            label: i18n.t('public_connection_button_create'),
+            label: t('public_connection_button_create'),
             name: 'v2_datasource_creation',
           },
           {
-            label: i18n.t('public_connection_button_copy'),
+            label: t('public_connection_button_copy'),
             name: 'v2_datasource_copy',
           },
         ],
         filterData: [
+          { label: t('public_view_all'), name: 'v2_datasource_all_data' },
+          { label: t('public_edit_all'), name: 'v2_datasource_all_data_Edit' },
           {
-            name: 'v2_datasource_all_data',
+            label: t('public_delete_all'),
+            name: 'v2_datasource_all_data_Delete',
           },
         ],
       },
@@ -38,29 +65,47 @@ const pageSort = [
         name: 'v2_data_replication',
         buttons: [
           {
-            label: i18n.t('public_task_create'),
+            label: t('public_task_create'),
             name: 'v2_data_replication_creation',
             checked: false,
           },
           {
-            label: i18n.t('public_task_copy'),
+            label: t('public_task_copy'),
             name: 'v2_data_replication_copy',
             checked: false,
           },
           {
-            label: i18n.t('public_task_import'),
+            label: t('public_task_import'),
             name: 'v2_data_replication_import',
             checked: false,
           },
           {
-            label: i18n.t('public_task_export'),
+            label: t('public_task_export'),
             name: 'v2_data_replication_export',
             checked: false,
           },
         ],
         filterData: [
+          { label: t('public_view_all'), name: 'v2_data_replication_all_data' },
+          {
+            label: t('public_edit_all'),
+            name: 'v2_data_replication_all_data_Edit',
+          },
           {
-            name: 'v2_data_replication_all_data',
+            label: t('public_delete_all'),
+            name: 'v2_data_replication_all_data_Delete',
+          },
+          {
+            label: t('public_reset_all'),
+            name: 'v2_data_replication_all_data_Reset',
+          },
+          {
+            label: t('public_start_all'),
+            name: 'v2_data_replication_all_data_Start',
+          },
+          {
+            label: t('public_stop_all'),
+            name: 'v2_data_replication_all_data_Stop',
           },
         ],
       },
@@ -68,35 +113,134 @@ const pageSort = [
         name: 'v2_data_flow',
         buttons: [
           {
-            label: i18n.t('public_task_create'),
+            label: t('public_task_create'),
             name: 'v2_data_flow_creation',
             checked: false,
           },
           {
-            label: i18n.t('public_task_copy'),
+            label: t('public_task_copy'),
             name: 'v2_data_flow_copy',
             checked: false,
           },
           {
-            label: i18n.t('public_task_import'),
+            label: t('public_task_import'),
             name: 'v2_data_flow_import',
             checked: false,
           },
           {
-            label: i18n.t('public_task_export'),
+            label: t('public_task_export'),
             name: 'v2_data_flow_export',
             checked: false,
           },
         ],
         filterData: [
+          { label: t('public_view_all'), name: 'v2_data_flow_all_data' },
+          { label: t('public_edit_all'), name: 'v2_data_flow_all_data_Edit' },
           {
-            name: 'v2_data_flow_all_data',
+            label: t('public_delete_all'),
+            name: 'v2_data_flow_all_data_Delete',
           },
+          { label: t('public_reset_all'), name: 'v2_data_flow_all_data_Reset' },
+          { label: t('public_start_all'), name: 'v2_data_flow_all_data_Start' },
+          { label: t('public_stop_all'), name: 'v2_data_flow_all_data_Stop' },
         ],
       },
       { name: 'v2_data_check' },
     ],
   },
+  {
+    name: 'v2_data-server',
+    children: [
+      { name: 'v2_api-application' },
+      {
+        name: 'v2_data-server-list',
+        buttons: [
+          {
+            label: t('packages_business_chuangjianfuwu'),
+            name: 'v2_data-server-list_creation',
+            checked: false,
+          },
+          {
+            label: t('packages_business_copy_server'),
+            name: 'v2_data-server-list_copy',
+            checked: false,
+          },
+          {
+            label: t('packages_business_import_server'),
+            name: 'v2_data-server-list_import',
+            checked: false,
+          },
+          {
+            label: t('packages_business_export_server'),
+            name: 'v2_data-server-list_export',
+            checked: false,
+          },
+        ],
+        filterData: [
+          { label: t('public_view_all'), name: 'v2_data-server-list_all_data' },
+          {
+            label: t('public_edit_all'),
+            name: 'v2_data-server-list_all_data_Edit',
+          },
+          {
+            label: t('public_publish_all'),
+            name: 'v2_data-server-list_all_data_Publish',
+          },
+          {
+            label: t('public_revoke_all'),
+            name: 'v2_data-server-list_all_data_Revoke',
+          },
+          {
+            label: t('public_delete_all'),
+            name: 'v2_data-server-list_all_data_Delete',
+          },
+        ],
+      },
+      {
+        name: 'v2_api-client',
+        buttons: [
+          {
+            label: t('application_create'),
+            name: 'v2_api-client_creation',
+            checked: false,
+          },
+        ],
+        filterData: [
+          { label: t('public_view_all'), name: 'v2_api-client_all_data' },
+          { label: t('public_edit_all'), name: 'v2_api-client_all_data_Edit' },
+          {
+            label: t('public_delete_all'),
+            name: 'v2_api-client_all_data_Delete',
+          },
+        ],
+      },
+      {
+        name: 'v2_api-servers',
+        buttons: [
+          {
+            label: t('api_server_create_server'),
+            name: 'v2_api-servers_creation',
+            checked: false,
+          },
+          {
+            label: t('api_server_download_API_Server_config'),
+            name: 'v2_api-servers_download',
+            checked: false,
+          },
+        ],
+        filterData: [
+          { label: t('public_view_all'), name: 'v2_api-servers_all_data' },
+          { label: t('public_edit_all'), name: 'v2_api-servers_all_data_Edit' },
+          {
+            label: t('public_delete_all'),
+            name: 'v2_api-servers_all_data_Delete',
+          },
+        ],
+      },
+      { name: 'v2_data_server_audit' },
+      { name: 'v2_api_monitor' },
+    ],
+  },
   {
     name: 'v2_advanced_features',
     children: [
@@ -104,21 +248,8 @@ const pageSort = [
       { name: 'v2_function_management' },
       { name: 'v2_custom_node' },
       { name: 'v2_shared_cache' },
-    ],
-  },
-  // {
-  //   name: 'v2_data_discovery',
-  //   children: [{ name: 'v2_data_object' }, { name: 'v2_data_catalogue' }],
-  // },
-  {
-    name: 'v2_data-server',
-    children: [
-      { name: 'v2_api-application' },
-      { name: 'v2_data-server-list' },
-      { name: 'v2_api-client' },
-      { name: 'v2_api-servers' },
-      { name: 'v2_data_server_audit' },
-      { name: 'v2_api_monitor' },
+      { name: 'v2_project_management' },
+      { name: 'v2_project_import_and_export' },
     ],
   },
   {
@@ -132,503 +263,705 @@ const pageSort = [
   },
 ]
 
-export default {
-  components: {
-    PageContainer,
-    Check,
-  },
-  emits: ['saveBack'],
-  data() {
-    return {
-      loading: false,
-      saveloading: false,
-      permissLoading: false,
-      form: {
-        name: '',
-        description: '',
-        register_user_default: false,
-      },
-      dataList: [],
-      rolemappings: [],
-      roleusers: [],
-      selectRole: [],
-      permissionList: [],
-      roleName: '',
-      radio: 1,
-      moduleList: [],
-      adds: [],
-      deletes: [],
-    }
-  },
-  created() {
-    this.roleName = this.$route.query.name ? this.$route.query.name : ''
-    this.getPermission()
-  },
-  methods: {
-    // 获取用户权限数据
-    getMappingData(pageData) {
-      this.loading = true
-      const filter = {
-        where: {
-          roleId: this.$route.query.id,
-        },
-      }
-      fetchRoleMappings(filter)
-        .then((data) => {
-          if (data?.length) {
-            data.forEach((item) => {
-              if (item.principalType === 'USER') {
-                this.roleusers.push(item.principalId)
-              }
-              if (item.principalType === 'PERMISSION') {
-                const selected = this.permissionList.filter(
-                  (v) => v.name === item.principalId,
-                )
-                if (selected && selected.length > 0) {
-                  selected[0].self_only = item.self_only
-                  this.selectRole.push(selected[0].name)
-                }
-              }
-            })
-            this.rolemappings = data?.items
-
-            pageData?.forEach((item) => {
-              // 页面权限
-              item.children?.forEach((childItem) => {
-                childItem.checked = this.selectRole.includes(childItem.name)
-                childItem.checkOrigin = this.selectRole.includes(childItem.name)
-
-                // 按钮权限
-                childItem.buttons?.forEach((el) => {
-                  el.checked = this.selectRole.includes(el.name)
-                  el.checkOrigin = this.selectRole.includes(el.name)
-                })
-
-                // 显示数据
-                childItem.filterData?.forEach((el) => {
-                  el.checked = this.selectRole.includes(el.name)
-                  el.checkOrigin = this.selectRole.includes(el.name)
-                })
-              })
-            })
-          }
-        })
-        .finally(() => {
-          this.loading = false
-        })
-    },
-
-    // 获取权限信息
-    getPermission() {
-      const self = this
-      this.permissLoading = true
-      const filter = { where: { version: 'v2' } }
-
-      fetchPermissions(filter)
-        .then((data) => {
-          if (data && data.length) {
-            self.permissionList = data
-
-            // 页面排序  ---- 开始
-            const pageMap = {}
-            self.permissionList.forEach((item) => {
-              pageMap[item.name] = item
-            })
+// ---- 状态 ----
+const loading = ref(false)
+const saveloading = ref(false)
+const permissLoading = ref(false)
+const dataList = ref<any[]>([])
+const permissionList = ref<any[]>([])
+const selectRole = ref<string[]>([])
+const roleusers = ref<string[]>([])
+const adds = ref<any[]>([])
+const deletes = ref<any[]>([])
+const searchKeyword = ref('')
+const expandedModules = reactive<Record<string, boolean>>({})
 
-            const pageMenu = (items) => {
-              return items.map((item) => {
-                const page = pageMap[item.name]
-                const menu = Object.assign({}, item, page)
-                if (menu.children) {
-                  menu.children = pageMenu(menu.children)
-                }
-                return menu
-              })
-            }
+const roleName = computed(() => (route.query.name as string) || '')
+
+// ---- 计算属性 ----
+
+// 计算每个模块的权限统计
+function getModuleStats(item: any) {
+  let total = 0
+  let enabled = 0
+  item.children?.forEach((child: any) => {
+    total++ // 页面权限
+    if (child.checked) enabled++
+    child.buttons?.forEach((btn: any) => {
+      total++
+      if (btn.checked) enabled++
+    })
+    child.filterData?.forEach((fd: any) => {
+      total++
+      if (fd.checked) enabled++
+    })
+  })
+  return { total, enabled }
+}
+
+const filteredDataList = computed(() => {
+  if (!searchKeyword.value) return dataList.value
+  const kw = searchKeyword.value.toLowerCase()
+  return dataList.value.filter((item: any) => {
+    // 匹配模块名
+    if (item.description?.toLowerCase().includes(kw)) return true
+    // 匹配页面权限名称
+    return item.children?.some((child: any) =>
+      child.description?.toLowerCase().includes(kw),
+    )
+  })
+})
+
+function isExpanded(name: string) {
+  return expandedModules[name] ?? false
+}
+
+function toggleExpand(name: string) {
+  expandedModules[name] = !isExpanded(name)
+}
+
+function expandAll() {
+  filteredDataList.value.forEach((item: any) => {
+    expandedModules[item.name] = true
+  })
+}
+
+function collapseAll() {
+  Object.keys(expandedModules).forEach((key) => {
+    expandedModules[key] = false
+  })
+}
 
-            this.dataList = pageMenu(pageSort)
-            // 页面排序  ---- 结束
-            this.getMappingData(this.dataList)
+// ---- API 逻辑 ----
+
+function getMappingData(pageData: any[]) {
+  loading.value = true
+  const filter = { where: { roleId: route.query.id } }
+  fetchRoleMappings(filter)
+    .then((data: any) => {
+      if (data?.length) {
+        data.forEach((item: any) => {
+          if (item.principalType === 'USER') {
+            roleusers.value.push(item.principalId)
+          }
+          if (item.principalType === 'PERMISSION') {
+            const selected = permissionList.value.filter(
+              (v: any) => v.name === item.principalId,
+            )
+            if (selected?.length > 0) {
+              selected[0].self_only = item.self_only
+              selectRole.value.push(selected[0].name)
+            }
           }
         })
-        .finally(() => {
-          this.permissLoading = false
-        })
-    },
-
-    // 页面单选
-    handleCheckChange(data, parentData, type = 'page') {
-      //保留当前操作数据
-      this.updateData(data.checked, data)
-
-      // 页面权限开启
-      if (type === 'page' && data.checked) {
-        // 按钮权限全部开启
-        data.buttons?.forEach((el) => {
-          el.checked = true
-          this.updateData(el.checked, el)
+
+        pageData?.forEach((item: any) => {
+          item.children?.forEach((childItem: any) => {
+            childItem.checked = selectRole.value.includes(childItem.name)
+            childItem.checkOrigin = selectRole.value.includes(childItem.name)
+            childItem.buttons?.forEach((el: any) => {
+              el.checked = selectRole.value.includes(el.name)
+              el.checkOrigin = selectRole.value.includes(el.name)
+            })
+            childItem.filterData?.forEach((el: any) => {
+              el.checked = selectRole.value.includes(el.name)
+              el.checkOrigin = selectRole.value.includes(el.name)
+            })
+          })
         })
       }
+    })
+    .finally(() => {
+      loading.value = false
+    })
+}
 
-      // 页面权限关闭
-      if (type === 'page' && !data.checked) {
-        // 如果父元素的页面权限全部不勾选，则父元素也隐藏
-        if (
-          !!parentData.children?.every((t) => !t.checked) &&
-          !this.checkPrincipalId(this.deletes, parentData.name)?.length
-        ) {
-          parentData.checked = false
-          this.updateData(false, parentData)
-        }
+function getPermission() {
+  permissLoading.value = true
+  const filter = { where: { version: 'v2' } }
 
-        // 按钮权限全部关闭
-        data.buttons?.forEach((el) => {
-          el.checked = false
-          this.updateData(el.checked, el)
+  fetchPermissions(filter)
+    .then((data: any) => {
+      if (data?.length) {
+        permissionList.value = data
+        const pageMap: Record<string, any> = {}
+        permissionList.value.forEach((item: any) => {
+          pageMap[item.name] = item
         })
-      }
-
-      // 按钮权限勾选
-      if (type === 'button' && data.checked) {
-        // 页面权限勾选上
-        parentData.checked = true
-        this.updateData(parentData.checked, parentData)
-      }
-    },
-
-    updateData(checked, data) {
-      //保留当前操作数据
-      const roleId = this.$route.query.id
-      if (checked) {
-        // 和初始值不一样，则进行记录
-        if (
-          checked !== data.checkOrigin &&
-          this.checkPrincipalId(this.adds, data.name)?.length === 0
-        ) {
-          this.adds.push({
-            principalType: 'PERMISSION',
-            principalId: data.name,
-            roleId,
-          })
-        }
-        //同时清掉 deletes
-        const index = this.deletes?.findIndex(
-          (del) => del.principalId === data.name,
-        )
-        if (index > -1) {
-          this.deletes.splice(index, 1)
-        }
-      } else {
-        // 和初始值不一样，则进行记录
-        if (
-          checked !== data.checkOrigin &&
-          this.checkPrincipalId(this.deletes, data.name)
-        ) {
-          this.deletes.push({
-            principalType: 'PERMISSION',
-            principalId: data.name,
-            roleId,
+        const pageMenu = (items: any[]): any[] => {
+          return items.map((item) => {
+            const page = pageMap[item.name]
+            const menu = Object.assign({}, item, page)
+            if (menu.children) {
+              menu.children = pageMenu(menu.children)
+            }
+            return menu
           })
         }
-
-        //同时清掉 adds
-        const index = this.adds?.findIndex(
-          (add) => add.principalId === data.name,
-        )
-        if (index > -1) {
-          this.adds.splice(index, 1)
-        }
-      }
-    },
-    //查找是否存在某个字段
-    checkPrincipalId(data, principalId) {
-      return data.filter((item) => item.principalId === principalId) || []
-    },
-    //新的保存方法
-    save() {
-      //数据组装
-      const roleId = this.$route.query.id
-      this.saveloading = true
-      const data = {
-        adds: this.adds,
-        deletes: this.deletes,
-      }
-      updatePermissionRoleMapping(roleId, data)
-        .then(() => {
-          this.$emit('saveBack')
-          this.$message.success(this.$t('public_message_save_ok'))
-          this.adds = []
-          this.deletes = []
-          this.$router.push({
-            name: 'roleList',
-          })
-        })
-        .finally(() => {
-          this.saveloading = false
+        dataList.value = pageMenu(pageSort)
+        // 默认全部展开
+        dataList.value.forEach((item: any) => {
+          expandedModules[item.name] = true
         })
-    },
-    // 返回
-    back() {
-      // 检查是否有改动
-      if (!this.adds.length && !this.deletes.length) {
-        this.$router.push({ name: 'roles' })
-        return
+        getMappingData(dataList.value)
       }
+    })
+    .finally(() => {
+      permissLoading.value = false
+    })
+}
+
+// ---- 复选框逻辑 ----
+
+function handleCheckChange(data: any, parentData: any, type = 'page') {
+  updateData(data.checked, data)
+
+  if (type === 'page' && data.checked) {
+    data.buttons?.forEach((el: any) => {
+      el.checked = true
+      updateData(el.checked, el)
+    })
+  }
+
+  if (type === 'page' && !data.checked) {
+    if (
+      !!parentData.children?.every((t: any) => !t.checked) &&
+      !checkPrincipalId(deletes.value, parentData.name)?.length
+    ) {
+      parentData.checked = false
+      updateData(false, parentData)
+    }
+    data.buttons?.forEach((el: any) => {
+      el.checked = false
+      updateData(el.checked, el)
+    })
+  }
+
+  if (type === 'button' && data.checked) {
+    parentData.checked = true
+    updateData(parentData.checked, parentData)
+  }
+}
 
-      this.$confirm(
-        this.$t('public_message_title_prompt'),
-        this.$t('daas_role_role_ninhaiweibaocun'),
-      ).then((flag) => {
-        flag && this.save()
+// ---- 数据权限全选 ----
+
+function isDataAllChecked(second: any) {
+  return (
+    second.filterData?.length > 0 &&
+    second.filterData.every((d: any) => d.checked)
+  )
+}
+
+function isDataIndeterminate(second: any) {
+  if (!second.filterData?.length) return false
+  const checkedCount = second.filterData.filter((d: any) => d.checked).length
+  return checkedCount > 0 && checkedCount < second.filterData.length
+}
+
+function toggleDataAll(checked: any, second: any) {
+  second.filterData?.forEach((sItem: any) => {
+    sItem.checked = checked
+    updateData(checked, sItem)
+  })
+  if (checked) {
+    second.checked = true
+    updateData(true, second)
+  }
+}
+
+function updateData(checked: boolean, data: any) {
+  const roleId = route.query.id as string
+  if (checked) {
+    if (
+      checked !== data.checkOrigin &&
+      checkPrincipalId(adds.value, data.name)?.length === 0
+    ) {
+      adds.value.push({
+        principalType: 'PERMISSION',
+        principalId: data.name,
+        roleId,
       })
-    },
-  },
+    }
+    const index = deletes.value.findIndex(
+      (del: any) => del.principalId === data.name,
+    )
+    if (index !== -1) deletes.value.splice(index, 1)
+  } else {
+    if (
+      checked !== data.checkOrigin &&
+      checkPrincipalId(deletes.value, data.name)
+    ) {
+      deletes.value.push({
+        principalType: 'PERMISSION',
+        principalId: data.name,
+        roleId,
+      })
+    }
+    const index = adds.value.findIndex(
+      (add: any) => add.principalId === data.name,
+    )
+    if (index !== -1) adds.value.splice(index, 1)
+  }
+}
+
+function checkPrincipalId(data: any[], principalId: string) {
+  return data.filter((item: any) => item.principalId === principalId) || []
 }
+
+// ---- 保存 / 返回 ----
+
+function save() {
+  const roleId = route.query.id as string
+  saveloading.value = true
+  const payload = { adds: adds.value, deletes: deletes.value }
+  updatePermissionRoleMapping(roleId, payload)
+    .then(() => {
+      emit('saveBack')
+      ElMessage.success(t('public_message_save_ok'))
+      adds.value = []
+      deletes.value = []
+      router.push({ name: 'roleList' })
+    })
+    .finally(() => {
+      saveloading.value = false
+    })
+}
+
+function back() {
+  if (!adds.value.length && !deletes.value.length) {
+    router.push({ name: 'roles' })
+    return
+  }
+  Modal.confirm(
+    t('public_message_title_prompt'),
+    t('daas_role_role_ninhaiweibaocun'),
+  ).then((flag: any) => {
+    flag && save()
+  })
+}
+
+onMounted(() => {
+  getPermission()
+})
 </script>
 
 <template>
   <PageContainer mode="auto">
     <template #left-actions>
       <el-divider direction="vertical" />
-      <span class="flex align-center gap-2 bg-color-main rounded-lg px-2 py-1"
-        ><span class="font-color-light">{{ $t('role_currentRole') }}</span>
+      <span class="flex align-center gap-2 bg-color-main rounded-lg px-2 py-1">
+        <span class="font-color-light">{{ t('role_currentRole') }}</span>
         <el-tag type="primary" class="border-0 bg-white shadow-sm">{{
           roleName
         }}</el-tag>
       </span>
     </template>
     <template #actions>
-      <el-button
-        type="primary"
-        :loading="saveloading"
-        @click="save('ruleForm')"
-      >
-        <template #icon>
-          <Check />
-        </template>
-        {{ $t('public_button_save') }}
+      <el-button type="primary" :loading="saveloading" @click="save">
+        <template #icon><Check /></template>
+        {{ t('public_button_save') }}
       </el-button>
     </template>
 
-    <div v-loading="loading">
-      <el-alert
-        class="mb-4"
-        type="warning"
-        show-icon
-        :closable="false"
-        :title="$t('daas_role_role_gouxuanxiangyingmo')"
-      />
-
-      <ul class="role-table border rounded-xl page-table overflow-hidden">
-        <li class="role-head">
-          <el-row class="e-row">
-            <el-col class="e-col borderRight pl-0 text-center" :span="4">{{
-              $t('daas_role_role_gongnengmokuai')
-            }}</el-col>
-            <el-col class="e-col borderRight pl-5" :span="4">{{
-              $t('daas_role_role_yemianquanxian')
-            }}</el-col>
-            <el-col class="e-col borderRight pl-5" :span="14">{{
-              $t('daas_role_role_gongnengquanxian')
-            }}</el-col>
-            <el-col class="e-col flex align-items-center" :span="2">
-              <span>{{ $t('daas_role_role_chakanquanbushu') }}</span>
-            </el-col>
-          </el-row>
-        </li>
-        <li v-for="item in dataList" :key="item.id">
-          <el-row class="e-row flex">
-            <el-col
-              class="e-col flex justify-content-center align-items-center"
-              :span="4"
+    <div v-loading="loading" class="role-permission-wrap">
+      <!-- 工具栏：搜索 + 展开/收起 -->
+      <div class="role-toolbar">
+        <el-input
+          v-model="searchKeyword"
+          :placeholder="t('public_input_placeholder_search')"
+          clearable
+          class="role-toolbar__search"
+        >
+          <template #prefix>
+            <el-icon><i-lucide-search /></el-icon>
+          </template>
+        </el-input>
+        <div class="role-toolbar__actions">
+          <el-button text @click="expandAll">
+            <template #icon><i-lucide-unfold-vertical /></template>
+            {{ t('public_button_expand_all') }}
+          </el-button>
+          <el-button text @click="collapseAll">
+            <template #icon><i-lucide-fold-vertical /></template>
+            {{ t('public_button_collapse_all') }}
+          </el-button>
+        </div>
+      </div>
+
+      <!-- 模块卡片列表 -->
+      <div v-if="filteredDataList.length" class="role-module-list">
+        <div
+          v-for="item in filteredDataList"
+          :key="item.name"
+          class="role-module-card"
+        >
+          <!-- 卡片头部 -->
+          <div
+            class="role-module-card__header"
+            @click="toggleExpand(item.name)"
+          >
+            <span class="role-module-card__icon">
+              <VIcon size="20">{{
+                MODULE_ICONS[item.name] || 'setting'
+              }}</VIcon>
+            </span>
+            <div class="role-module-card__info">
+              <span class="role-module-card__name">{{ item.description }}</span>
+              <span class="role-module-card__stats">
+                {{ getModuleStats(item).enabled }} /
+                {{ getModuleStats(item).total }}
+                {{ t('public_permissions_enabled') }}
+              </span>
+            </div>
+            <div class="role-module-card__progress">
+              <div class="role-progress-bar">
+                <div
+                  class="role-progress-bar__fill"
+                  :style="{
+                    width: getModuleStats(item).total
+                      ? `${
+                          (getModuleStats(item).enabled /
+                            getModuleStats(item).total) *
+                          100
+                        }%`
+                      : '0%',
+                  }"
+                />
+              </div>
+            </div>
+            <el-button
+              text
+              class="role-module-card__arrow"
+              :class="{ 'is-expanded': isExpanded(item.name) }"
             >
-              <span>{{ item.description }}</span>
-            </el-col>
-            <el-col class="e-col border-start" :span="4">
-              <div
-                v-for="(second, secondIndex) in item.children"
-                :key="secondIndex"
-                :class="['pl-3', secondIndex !== 0 ? 'border-top' : '']"
-              >
-                <el-checkbox
-                  v-if="second.id"
-                  v-cloak
-                  v-model="second.checked"
-                  @change="handleCheckChange(second, item, 'page')"
+              <template #icon>
+                <!-- <el-icon
+                  class="role-module-card__arrow"
+                  :class="{ 'is-expanded': isExpanded(item.name) }"
                 >
-                  <span>
+                  <i-lucide-chevron-down />
+                </el-icon> -->
+                <i-lucide-chevron-down />
+              </template>
+            </el-button>
+          </div>
+
+          <!-- 卡片内容 -->
+          <div v-show="isExpanded(item.name)" class="role-module-card__body">
+            <div
+              v-for="(second, secondIndex) in item.children"
+              :key="secondIndex"
+              class="role-permission-row"
+              :class="{ 'role-permission-row--bordered': secondIndex !== 0 }"
+            >
+              <!-- 页面权限 -->
+              <div class="role-permission-col role-permission-col--page">
+                <div class="role-permission-col__title">
+                  {{ t('daas_role_role_yemianquanxian') }}
+                </div>
+                <div v-if="second.id" class="role-checkbox-item">
+                  <el-checkbox
+                    v-model="second.checked"
+                    @change="handleCheckChange(second, item, 'page')"
+                  >
                     {{ second.description }}
-                  </span>
-                </el-checkbox>
+                  </el-checkbox>
+                </div>
               </div>
-            </el-col>
-            <el-col class="e-col border-start border-end" :span="14">
-              <div
-                v-for="(second, secondIndex) in item.children"
-                :key="secondIndex"
-                :class="['pl-3', secondIndex !== 0 ? 'border-top' : '']"
-              >
-                <el-checkbox
+
+              <!-- 功能权限 -->
+              <div class="role-permission-col role-permission-col--func">
+                <div class="role-permission-col__title">
+                  {{ t('daas_role_role_gongnengquanxian') }}
+                </div>
+                <div
                   v-if="!second.buttons || !second.buttons.length"
-                  v-cloak
-                  :model-value="true"
-                  disabled
+                  class="role-checkbox-item"
                 >
-                  <span>{{ $t('daas_role_role_quanbugongneng') }}</span>
-                </el-checkbox>
-                <el-checkbox
-                  v-for="(sItem, sIndex) in second.buttons"
-                  v-else
-                  v-cloak
-                  v-model="sItem.checked"
-                  class="mr-10"
-                  @change="handleCheckChange(sItem, second, 'button')"
-                >
-                  <span>{{ sItem.label }} </span>
-                </el-checkbox>
+                  <el-checkbox :model-value="true" disabled>
+                    {{ t('daas_role_role_quanbugongneng') }}
+                  </el-checkbox>
+                </div>
+                <div v-else class="role-checkbox-group">
+                  <div
+                    v-for="(sItem, sIndex) in second.buttons"
+                    :key="sIndex"
+                    class="role-checkbox-item"
+                  >
+                    <el-checkbox
+                      v-model="sItem.checked"
+                      @change="handleCheckChange(sItem, second, 'button')"
+                    >
+                      {{ sItem.label }}
+                    </el-checkbox>
+                  </div>
+                </div>
               </div>
-            </el-col>
-            <el-col class="e-col" :span="2">
-              <div
-                v-for="(second, secondIndex) in item.children"
-                :key="secondIndex"
-                :class="[
-                  'pl-3',
-                  secondIndex !== 0 && second.filterData
-                    ? 'border-top border-bottom'
-                    : '',
-                ]"
-              >
-                <span v-if="!second.filterData" class="invisible">-</span>
-                <el-switch
-                  v-for="(sItem, sIndex) in second.filterData"
-                  v-else
-                  v-model="sItem.checked"
-                  @change="handleCheckChange(sItem, second, 'data')"
-                />
+
+              <!-- 数据权限 -->
+              <div class="role-permission-col role-permission-col--data">
+                <div class="role-permission-col__title">
+                  {{ t('role_dataPermission') }}
+                </div>
+                <div v-if="!second.filterData" class="role-permission-empty">
+                  <span class="font-color-light fs-7">--</span>
+                </div>
+                <div v-else class="role-checkbox-group">
+                  <div class="role-checkbox-item role-checkbox-item--all">
+                    <el-checkbox
+                      :model-value="isDataAllChecked(second)"
+                      :indeterminate="isDataIndeterminate(second)"
+                      @change="(val: any) => toggleDataAll(val, second)"
+                    >
+                      {{ t('public_select_all') }}
+                    </el-checkbox>
+                  </div>
+                  <div
+                    v-for="(sItem, sIndex) in second.filterData"
+                    :key="sIndex"
+                    class="role-checkbox-item"
+                  >
+                    <el-checkbox
+                      v-model="sItem.checked"
+                      @change="handleCheckChange(sItem, second, 'data')"
+                    >
+                      {{ sItem.label }}
+                    </el-checkbox>
+                  </div>
+                </div>
               </div>
-            </el-col>
-          </el-row>
-        </li>
-      </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 空状态 -->
+      <div v-else class="role-empty">
+        <el-empty :description="t('public_data_no_data') || '没有匹配的模块'" />
+      </div>
     </div>
   </PageContainer>
 </template>
 
 <style lang="scss" scoped>
-.role-table {
-  position: relative;
-
-  li {
-    min-height: 39px;
-    overflow: hidden;
-    border-bottom: 1px solid #e7e7e7;
-    &:last-child {
-      border-bottom: 0;
-    }
+.role-permission-wrap {
+  // max-width: 1200px;
+  margin: 0 auto;
+}
+
+// 提示信息栏
+.role-tip-bar {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  padding: 12px 16px;
+  margin-bottom: 16px;
+  background-color: #f0faf0;
+  border: 1px solid #b7e4b7;
+  border-radius: 8px;
+  color: #2e7d32;
+  font-size: 13px;
+  line-height: 1.6;
+
+  &__icon {
+    flex-shrink: 0;
+    margin-top: 2px;
+    font-size: 16px;
   }
-  .role-head {
-    height: 40px !important;
-    line-height: 40px;
-    font-size: 14px;
-    color: var(--text-light);
-    background-color: var(--bg-main);
-    .e-col {
-      padding-left: 12px;
-    }
+}
+
+// 工具栏
+.role-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+
+  &__search {
+    max-width: 300px;
   }
-  .module-style {
-    .e-row {
-      border-bottom: 1px solid #e7e7e7;
-      &:last-child {
-        border-bottom: 0;
-      }
-      .nav {
-        display: block;
-        padding-left: 12px;
-        font-size: 14px;
-      }
 
-      .box {
-        .e-col {
-          padding-top: 8px;
-          border-right: 1px solid #e7e7e7;
-          border-bottom: 0;
-          box-sizing: border-box;
-          &:last-child {
-            border: 0;
-          }
-        }
-      }
-    }
-    .heightStyle {
-      line-height: 40px;
-      .e-col {
-        padding-top: 0 !important;
-        line-height: 34px;
-        min-height: 40px;
-
-        .checkbox-radio {
-          vertical-align: middle;
-        }
-      }
+  &__actions {
+    display: flex;
+    gap: 4px;
+  }
+}
+
+// 模块卡片列表
+.role-module-list {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+// 模块卡片
+.role-module-card {
+  border: 1px solid #e8e8e8;
+  border-radius: 12px;
+  overflow: hidden;
+  background: #fff;
+
+  &__header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 16px 20px;
+    cursor: pointer;
+    transition: background-color 0.2s;
+
+    &:hover {
+      background-color: #fafafa;
     }
   }
-  .line {
-    width: 100%;
-    height: 1px;
-    background: #e7e7e7;
+
+  &__icon {
+    flex-shrink: 0;
+    width: 36px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #f5f5f5;
+    border-radius: 8px;
+    color: var(--el-color-primary, #4caf50);
+  }
+
+  &__info {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
   }
-  .borderRight {
-    border-right: 1px solid #e7e7e7;
+
+  &__name {
+    font-size: 15px;
+    font-weight: 500;
+    color: var(--color-title, #1a1a1a);
   }
-  .borderLine {
-    border-left: 1px solid #e7e7e7;
-    border-bottom: 0;
-    // border-right: 1px solid #e7e7e7;
+
+  &__stats {
+    font-size: 12px;
+    color: var(--text-light, #999);
   }
 
-  :deep(.e-row) {
-    .allSelectBox {
-      line-height: 20px;
-    }
-    .el-checkbox {
-      margin: 0 8px;
-      box-sizing: border-box;
-    }
-    .checkbox-position {
-      line-height: 1px;
-      vertical-align: top;
-      .el-checkbox__input {
-        padding-top: 0;
-        vertical-align: top;
-      }
-    }
-    .checkbox-radio {
-      .el-checkbox__input {
-        padding-top: 3px;
-        vertical-align: top;
-      }
+  &__progress {
+    margin-left: auto;
+    width: 100px;
+    flex-shrink: 0;
+  }
 
-      .e-checkbox {
-        padding: 5px 0;
-        margin: 0;
-        font-size: 12px;
-        color: var(--text-light);
-      }
+  &__arrow {
+    // flex-shrink: 0;
+    // font-size: 16px;
+    // transition: transform 0.25s;
+
+    &.is-expanded {
+      transform: rotate(180deg);
     }
   }
+
+  &__body {
+    border-top: 1px solid #f0f0f0;
+    padding: 0 20px;
+  }
 }
 
-.page-table {
-  li {
-    line-height: 40px;
+// 进度条
+.role-progress-bar {
+  height: 6px;
+  border-radius: 3px;
+  background: #e8e8e8;
+  overflow: hidden;
+
+  &__fill {
+    height: 100%;
+    border-radius: 3px;
+    background: var(--el-color-primary, #4caf50);
+    transition: width 0.3s;
   }
 }
-[v-cloak] {
-  display: none;
+
+// 权限行
+.role-permission-row {
+  display: flex;
+  padding: 16px 0;
+
+  &--bordered {
+    border-top: 1px solid #f0f0f0;
+  }
 }
-.alert-tip {
-  border-left: 4px solid #ffcf8b;
+
+// 权限列
+.role-permission-col {
+  &--page {
+    flex: 0 0 calc(2 / 12 * 100%);
+    min-width: 0;
+  }
+
+  &--func {
+    flex: 0 0 calc(5 / 12 * 100%);
+    min-width: 0;
+  }
+
+  &--data {
+    flex: 0 0 calc(5 / 12 * 100%);
+    min-width: 0;
+  }
+
+  &__title {
+    font-size: 12px;
+    font-weight: 600;
+    color: var(--text-light, #999);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    margin-bottom: 8px;
+  }
+}
+
+// 复选框
+.role-checkbox-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px 16px;
+}
+
+.role-checkbox-item {
+  display: inline-flex;
+  align-items: center;
+  padding: 6px 8px;
+  border-radius: 10px;
+  transition: background-color 0.15s;
+
+  &:hover {
+    background-color: #f5f5f5;
+  }
+
+  :deep(.el-checkbox) {
+    --el-checkbox-height: 20px;
+  }
+
+  :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
+    border-radius: 4px;
+  }
+
+  :deep(.el-checkbox__inner) {
+    border-radius: 4px;
+  }
+
+  &--all {
+    font-weight: 500;
+    margin-bottom: 2px;
+  }
+}
+
+.role-permission-empty {
+  padding: 3px 6px;
+  font-style: italic;
+}
+
+// 空状态
+.role-empty {
+  padding: 60px 0;
+  text-align: center;
 }
 </style>
diff --git a/packages/business/src/locale/lang/en.js b/packages/business/src/locale/lang/en.js
index e2859aea9..f18932d0c 100644
--- a/packages/business/src/locale/lang/en.js
+++ b/packages/business/src/locale/lang/en.js
@@ -1016,6 +1016,9 @@ export default {
   packages_business_data_server_drawer_tiaoshi: 'Debug',
   packages_business_data_server_drawer_peizhi: 'Configuration',
   packages_business_data_server_drawer_chuangjianfuwu: 'Create API',
+  packages_business_copy_server: 'Copy API',
+  packages_business_import_server: 'Import API',
+  packages_business_export_server: 'Export API',
   packages_business_data_server_drawer_fuwuxiangqing: 'Service Details',
   packages_business_data_server_list_quedingchexiaogai:
     'Are you sure you want to revoke this service?',
diff --git a/packages/business/src/locale/lang/zh-CN.js b/packages/business/src/locale/lang/zh-CN.js
index 1aad343ab..cb21b1efb 100644
--- a/packages/business/src/locale/lang/zh-CN.js
+++ b/packages/business/src/locale/lang/zh-CN.js
@@ -1197,6 +1197,9 @@ export default {
   packages_business_tiaoshi: '调试',
   packages_business_peizhi: '配置',
   packages_business_chuangjianfuwu: '创建服务',
+  packages_business_copy_server: '复制服务',
+  packages_business_import_server: '导入服务',
+  packages_business_export_server: '导出服务',
   packages_business_fuwuxiangqing: '服务详情',
   packages_business_geshicuowu: '格式错误',
   packages_business_validate:
diff --git a/packages/business/src/locale/lang/zh-TW.js b/packages/business/src/locale/lang/zh-TW.js
index 8c7892fdd..cdec590a4 100644
--- a/packages/business/src/locale/lang/zh-TW.js
+++ b/packages/business/src/locale/lang/zh-TW.js
@@ -917,6 +917,9 @@ export default {
   packages_business_data_server_drawer_tiaoshi: '調試',
   packages_business_data_server_drawer_peizhi: '配置',
   packages_business_data_server_drawer_chuangjianfuwu: '創建服務',
+  packages_business_copy_server: '復製服務',
+  packages_business_import_server: '導入服務',
+  packages_business_export_server: '導出服務',
   packages_business_data_server_drawer_fuwuxiangqing: '服務詳情',
   packages_business_data_server_list_quedingchexiaogai: '確定撤銷該服務？',
   packages_business_data_server_list_quedingfabugai: '確定發布該服務？',
diff --git a/packages/business/src/views/connections/List.vue b/packages/business/src/views/connections/List.vue
index 693f74ab3..e9fc58759 100644
--- a/packages/business/src/views/connections/List.vue
+++ b/packages/business/src/views/connections/List.vue
@@ -874,8 +874,8 @@ onUnmounted(() => {
         :label="$t('public_connection_information')"
         min-width="160"
       >
-        <template #default="scope">
-          {{ scope.row.connectionUrl }}
+        <template #default="{ row }">
+          {{ row.connectionUrl }}
         </template>
       </ElTableColumn>
       <ElTableColumn
@@ -897,8 +897,8 @@ onUnmounted(() => {
         min-width="135"
         :label="$t('public_connection_type')"
       >
-        <template #default="scope">
-          {{ getType(scope.row.connection_type) }}
+        <template #default="{ row }">
+          {{ getType(row.connection_type) }}
         </template>
       </ElTableColumn>
       <ElTableColumn min-width="125">
@@ -914,9 +914,9 @@ onUnmounted(() => {
             </ElTooltip>
           </div>
         </template>
-        <template #default="scope">
-          <div v-if="isFileSource(scope.row)">-</div>
-          <SchemaProgress :data="scope.row" />
+        <template #default="{ row }">
+          <div v-if="isFileSource(row)">-</div>
+          <SchemaProgress :data="row" />
         </template>
       </ElTableColumn>
       <ElTableColumn
@@ -944,17 +944,17 @@ onUnmounted(() => {
             </ElTooltip>
           </div>
         </template>
-        <template #default="scope">
+        <template #default="{ row }">
           <el-space :spacer="spacer" :size="0">
             <ElButton
               data-testid="test-connection"
               text
               type="primary"
-              @click="testConnection(scope.row)"
+              @click="testConnection(row)"
               >{{ $t('public_connection_button_test') }}
             </ElButton>
             <ElTooltip
-              :disabled="!isFileSource(scope.row)"
+              :disabled="!isFileSource(row)"
               :content="
                 $t('packages_business_connections_list_wenjianleixingde')
               "
@@ -965,56 +965,40 @@ onUnmounted(() => {
                   text
                   type="primary"
                   data-testid="load-schema"
-                  :disabled="
-                    isFileSource(scope.row) || scope.row.disabledLoadSchema
-                  "
-                  @click="handleLoadSchema(scope.row)"
+                  :disabled="isFileSource(row) || row.disabledLoadSchema"
+                  @click="handleLoadSchema(row)"
                   >{{ $t('public_connection_button_load_schema') }}
                 </ElButton>
               </span>
             </ElTooltip>
             <ElButton
-              v-if="havePermission(scope.row.permissionActions, 'Edit')"
-              v-readonlybtn="'datasource_edition'"
+              v-if="havePermission(row.permissionActions, 'Edit')"
               text
               type="primary"
               data-testid="edit-connection"
-              :disabled="
-                $disabledByPermission(
-                  'datasource_edition_all_data',
-                  scope.row.user_id,
-                ) || scope.row.agentType === 'Cloud'
-              "
-              @click="edit(scope.row.id, scope.row)"
+              :disabled="row.agentType === 'Cloud'"
+              @click="edit(row.id, row)"
               >{{ $t('public_button_edit') }}
             </ElButton>
             <ElButton
               v-if="buttonShowMap.copy"
-              v-readonlybtn="'datasource_creation'"
               text
               type="primary"
               data-testid="copy-connection"
-              :loading="scope.row.copyLoading"
-              :disabled="scope.row.agentType === 'Cloud'"
-              @click="copy(scope.row)"
+              :loading="row.copyLoading"
+              :disabled="row.agentType === 'Cloud'"
+              @click="copy(row)"
               >{{ $t('public_button_copy') }}
             </ElButton>
             <ElButton
               v-if="
-                havePermission(scope.row.permissionActions, 'Delete') &&
-                !scope.row.isInit
+                havePermission(row.permissionActions, 'Delete') && !row.isInit
               "
-              v-readonlybtn="'datasource_delete'"
               text
               type="primary"
               data-testid="delete-connection"
-              :disabled="
-                $disabledByPermission(
-                  'datasource_delete_all_data',
-                  scope.row.user_id,
-                ) || scope.row.agentType === 'Cloud'
-              "
-              @click="remove(scope.row)"
+              :disabled="row.agentType === 'Cloud'"
+              @click="remove(row)"
               >{{ $t('public_button_delete') }}
             </ElButton>
           </el-space>
diff --git a/packages/business/src/views/data-server/List.vue b/packages/business/src/views/data-server/List.vue
index 1b5f56461..a52a53da7 100644
--- a/packages/business/src/views/data-server/List.vue
+++ b/packages/business/src/views/data-server/List.vue
@@ -26,6 +26,7 @@ import { uid } from '@tap/shared'
 import { cloneDeep, escapeRegExp } from 'lodash-es'
 import {
   computed,
+  h,
   nextTick,
   onBeforeMount,
   onBeforeUnmount,
@@ -39,6 +40,7 @@ import { DatabaseIcon } from '../../components/DatabaseIcon'
 import PageContainer from '../../components/PageContainer.vue'
 import TablePage from '../../components/TablePage.vue'
 import Upload from '../../components/UploadDialog.vue'
+import { useHas } from '../../composables'
 import Delete from '../api-application/Delete.vue'
 import Editor from '../api-application/Editor.vue'
 import Drawer from './Drawer.vue'
@@ -77,6 +79,8 @@ const emit = defineEmits<{
 const route = useRoute()
 const { t } = useI18n()
 
+const spacer = h(ElDivider, { direction: 'vertical', class: 'mx-1' })
+
 // Refs
 const table = ref<InstanceType<typeof TablePage>>()
 const drawer = ref<InstanceType<typeof Drawer>>()
@@ -102,6 +106,17 @@ const searchParams = ref<SearchParams>({
   appId: '',
 })
 
+const $has = useHas()
+
+const btnPermissions = computed(() => {
+  return {
+    creation: $has('v2_data-server-list_creation'),
+    copy: $has('v2_data-server-list_copy'),
+    import: $has('v2_data-server-list_import'),
+    export: $has('v2_data-server-list_export'),
+  }
+})
+
 const statusOptions: StatusOption[] = [
   {
     label: t('public_select_option_all'),
@@ -466,7 +481,10 @@ const handleDragLeave = (event: DragEvent) => {
   event.preventDefault()
 
   const currentTarget = event.currentTarget as HTMLElement | null
-  if (currentTarget && !currentTarget.contains(event.relatedTarget as Node | null)) {
+  if (
+    currentTarget &&
+    !currentTarget.contains(event.relatedTarget as Node | null)
+  ) {
     const dropNode = findParentNodeByClassName(
       event.currentTarget as HTMLElement,
       'list-item-hover',
@@ -525,17 +543,14 @@ defineExpose({
       <slot name="title" />
     </template>
     <template #actions>
-      <ElButton
-        v-readonlybtn="'SYNC_job_import'"
-        class="btn"
-        @click="handleImport"
-      >
+      <ElButton v-if="btnPermissions.import" class="btn" @click="handleImport">
         <template #icon>
           <ImportOutlined />
         </template>
         <span> {{ $t('packages_business_button_bulk_import') }}</span>
       </ElButton>
       <ElButton
+        v-if="btnPermissions.creation"
         class="btn btn-create"
         type="primary"
         @click.stop="showDrawer()"
@@ -576,7 +591,11 @@ defineExpose({
               <i-mingcute-search-line />
             </template>
           </el-button>
-          <el-button text @click="appEditor.open()">
+          <el-button
+            v-if="btnPermissions.creation"
+            text
+            @click="appEditor.open()"
+          >
             <template #icon>
               <i-mingcute-add-line />
             </template>
@@ -708,14 +727,14 @@ defineExpose({
             </template>
             <span> {{ $t('public_batch_publish') }}</span>
           </ElButton>
-          <ElButton v-readonlybtn="'SYNC_job_export'" @click="handleExport">
+          <ElButton v-if="btnPermissions.export" @click="handleExport">
             <template #icon>
               <ExportOutlined />
             </template>
             <span> {{ $t('public_button_export') }}</span>
           </ElButton>
           <ElButton
-            v-readonlybtn="'SYNC_job_export'"
+            v-if="btnPermissions.export"
             class="btn"
             @click="handleExportApiDoc"
           >
@@ -746,6 +765,7 @@ defineExpose({
               class="ellipsis"
               type="primary"
               style="display: block; line-height: 20px"
+              :disabled="!row.permissionActions?.includes('Edit')"
               @click.stop="showDrawer(row)"
             >
               {{ row.name }}
@@ -825,33 +845,50 @@ defineExpose({
           fixed="right"
         >
           <template #default="{ row }">
-            <ElButton
-              v-if="row.status !== 'active'"
-              :disabled="row.status !== 'pending'"
-              text
-              type="primary"
-              @click="changeStatus(row)"
-              >{{ $t('public_button_public') }}</ElButton
-            >
-            <ElButton
-              v-if="row.status === 'active'"
-              text
-              type="primary"
-              @click="changeStatus(row)"
-              >{{ $t('public_button_unpublish') }}</ElButton
-            >
-            <ElDivider class="mx-1" direction="vertical" />
-            <ElButton text type="primary" @click="output(row)">{{
-              $t('public_button_export')
-            }}</ElButton>
-            <ElDivider class="mx-1" direction="vertical" />
-            <ElButton text type="primary" @click="showDrawer(row, true)">{{
-              $t('public_button_copy')
-            }}</ElButton>
-            <ElDivider class="mx-1" direction="vertical" />
-            <ElButton text type="primary" @click="removeServer(row)">{{
-              $t('public_button_delete')
-            }}</ElButton>
+            <el-space :spacer="spacer" :size="0" class="lh-1">
+              <ElButton
+                v-if="
+                  row.status !== 'active' &&
+                  row.permissionActions?.includes('Publish')
+                "
+                :disabled="row.status !== 'pending'"
+                text
+                type="primary"
+                @click="changeStatus(row)"
+                >{{ $t('public_button_public') }}</ElButton
+              >
+              <ElButton
+                v-if="
+                  row.status === 'active' &&
+                  row.permissionActions?.includes('Revoke')
+                "
+                text
+                type="primary"
+                @click="changeStatus(row)"
+                >{{ $t('public_button_unpublish') }}</ElButton
+              >
+              <ElButton
+                v-if="btnPermissions.export"
+                text
+                type="primary"
+                @click="output(row)"
+                >{{ $t('public_button_export') }}</ElButton
+              >
+              <ElButton
+                v-if="btnPermissions.copy"
+                text
+                type="primary"
+                @click="showDrawer(row, true)"
+                >{{ $t('public_button_copy') }}</ElButton
+              >
+              <ElButton
+                v-if="row.permissionActions?.includes('Delete')"
+                text
+                type="primary"
+                @click="removeServer(row)"
+                >{{ $t('public_button_delete') }}</ElButton
+              >
+            </el-space>
           </template>
         </el-table-column>
       </TablePage>
diff --git a/packages/i18n/src/locale/lang/en.js b/packages/i18n/src/locale/lang/en.js
index b6b95135d..15a5185f6 100644
--- a/packages/i18n/src/locale/lang/en.js
+++ b/packages/i18n/src/locale/lang/en.js
@@ -368,7 +368,18 @@ export default {
 
   public_please_wait: 'Please wait a moment...',
   public_view_all: 'View All',
-
+  public_edit_all: 'Edit All',
+  public_delete_all: 'Delete All',
+  public_reset_all: 'Reset All',
+  public_start_all: 'Start All',
+  public_stop_all: 'Stop All',
+  public_export_all: 'Export All',
+  public_publish_all: 'Publish All',
+  public_revoke_all: 'Revoke All',
+  public_button_expand_all: 'Expand All',
+  public_button_collapse_all: 'Collapse All',
+  public_select_all: 'Select All',
+  public_permissions_enabled: 'permissions enabled',
   public_today: 'Today',
   public_yesterday: 'Yesterday',
   public_this_hour: 'This Hour',
diff --git a/packages/i18n/src/locale/lang/zh-CN.js b/packages/i18n/src/locale/lang/zh-CN.js
index 3e053c0ae..5875fb081 100644
--- a/packages/i18n/src/locale/lang/zh-CN.js
+++ b/packages/i18n/src/locale/lang/zh-CN.js
@@ -369,6 +369,18 @@ export default {
 
   public_please_wait: '请稍等...',
   public_view_all: '查看全部',
+  public_edit_all: '编辑全部',
+  public_delete_all: '删除全部',
+  public_reset_all: '重置全部',
+  public_start_all: '启动全部',
+  public_stop_all: '停止全部',
+  public_export_all: '导出全部',
+  public_publish_all: '发布全部',
+  public_revoke_all: '撤销全部',
+  public_button_expand_all: '展开全部',
+  public_button_collapse_all: '收起全部',
+  public_select_all: '全选',
+  public_permissions_enabled: '权限已启用',
 
   public_today: '今天',
   public_yesterday: '昨天',
diff --git a/packages/i18n/src/locale/lang/zh-TW.js b/packages/i18n/src/locale/lang/zh-TW.js
index d301af3ff..12c116f65 100644
--- a/packages/i18n/src/locale/lang/zh-TW.js
+++ b/packages/i18n/src/locale/lang/zh-TW.js
@@ -366,6 +366,18 @@ export default {
 
   public_please_wait: '請稍等...',
   public_view_all: '查看全部',
+  public_edit_all: '编辑全部',
+  public_delete_all: '删除全部',
+  public_reset_all: '重置全部',
+  public_start_all: '啟動全部',
+  public_stop_all: '停止全部',
+  public_export_all: '導出全部',
+  public_publish_all: '發佈全部',
+  public_revoke_all: '撤銷全部',
+  public_button_expand_all: '展開全部',
+  public_button_collapse_all: '收起全部',
+  public_select_all: '全選',
+  public_permissions_enabled: '權限已啟用',
 
   public_today: '今天',
   public_yesterday: '昨天',
diff --git a/packages/types/src/daas-components.d.ts b/packages/types/src/daas-components.d.ts
index 9d31fd0f4..5e1c43d66 100644
--- a/packages/types/src/daas-components.d.ts
+++ b/packages/types/src/daas-components.d.ts
@@ -124,6 +124,7 @@ declare module 'vue' {
     ILucideFolder: typeof import('~icons/lucide/folder')['default']
     ILucideFolderClosed: typeof import('~icons/lucide/folder-closed')['default']
     ILucideFolderOpen: typeof import('~icons/lucide/folder-open')['default']
+    ILucideFoldVertical: typeof import('~icons/lucide/fold-vertical')['default']
     ILucideGitBranch: typeof import('~icons/lucide/git-branch')['default']
     ILucideGitCompareArrows: typeof import('~icons/lucide/git-compare-arrows')['default']
     ILucideGithub: typeof import('~icons/lucide/github')['default']
@@ -168,6 +169,7 @@ declare module 'vue' {
     ILucideTriangleAlert: typeof import('~icons/lucide/triangle-alert')['default']
     ILucideUndo: typeof import('~icons/lucide/undo')['default']
     ILucideUndo2: typeof import('~icons/lucide/undo2')['default']
+    ILucideUnfoldVertical: typeof import('~icons/lucide/unfold-vertical')['default']
     ILucideUpload: typeof import('~icons/lucide/upload')['default']
     ILucideUserRound: typeof import('~icons/lucide/user-round')['default']
     ILucideWandSparkles: typeof import('~icons/lucide/wand-sparkles')['default']
@@ -177,6 +179,7 @@ declare module 'vue' {
     ILucideZoomOut: typeof import('~icons/lucide/zoom-out')['default']
     IMingcuteAddFill: typeof import('~icons/mingcute/add-fill')['default']
     IMingcuteAddLine: typeof import('~icons/mingcute/add-line')['default']
+    IMingcuteAlertLine: typeof import('~icons/mingcute/alert-line')['default']
     IMingcuteArrowRightLine: typeof import('~icons/mingcute/arrow-right-line')['default']
     IMingcuteBrushLine: typeof import('~icons/mingcute/brush-line')['default']
     IMingcuteCheckLine: typeof import('~icons/mingcute/check-line')['default']
@@ -322,6 +325,7 @@ declare global {
   const ILucideFolder: typeof import('~icons/lucide/folder')['default']
   const ILucideFolderClosed: typeof import('~icons/lucide/folder-closed')['default']
   const ILucideFolderOpen: typeof import('~icons/lucide/folder-open')['default']
+  const ILucideFoldVertical: typeof import('~icons/lucide/fold-vertical')['default']
   const ILucideGitBranch: typeof import('~icons/lucide/git-branch')['default']
   const ILucideGitCompareArrows: typeof import('~icons/lucide/git-compare-arrows')['default']
   const ILucideGithub: typeof import('~icons/lucide/github')['default']
@@ -366,6 +370,7 @@ declare global {
   const ILucideTriangleAlert: typeof import('~icons/lucide/triangle-alert')['default']
   const ILucideUndo: typeof import('~icons/lucide/undo')['default']
   const ILucideUndo2: typeof import('~icons/lucide/undo2')['default']
+  const ILucideUnfoldVertical: typeof import('~icons/lucide/unfold-vertical')['default']
   const ILucideUpload: typeof import('~icons/lucide/upload')['default']
   const ILucideUserRound: typeof import('~icons/lucide/user-round')['default']
   const ILucideWandSparkles: typeof import('~icons/lucide/wand-sparkles')['default']
@@ -375,6 +380,7 @@ declare global {
   const ILucideZoomOut: typeof import('~icons/lucide/zoom-out')['default']
   const IMingcuteAddFill: typeof import('~icons/mingcute/add-fill')['default']
   const IMingcuteAddLine: typeof import('~icons/mingcute/add-line')['default']
+  const IMingcuteAlertLine: typeof import('~icons/mingcute/alert-line')['default']
   const IMingcuteArrowRightLine: typeof import('~icons/mingcute/arrow-right-line')['default']
   const IMingcuteBrushLine: typeof import('~icons/mingcute/brush-line')['default']
   const IMingcuteCheckLine: typeof import('~icons/mingcute/check-line')['default']