From b7897aea03235d453558483549e3f3c77cabe9b1 Mon Sep 17 00:00:00 2001
From: Feynman <xufei@tapdata.io>
Date: Wed, 8 Apr 2026 22:13:13 +0800
Subject: [PATCH 1/5] refactor: update ApiServer and Applications components to
 use Composition API and improve permission handling; add new role data
 permission translations

---
 apps/daas/src/directives/index.ts             |    3 +-
 apps/daas/src/i18n/langs/en.js                |    1 +
 apps/daas/src/i18n/langs/zh-CN.js             |    1 +
 apps/daas/src/i18n/langs/zh-TW.js             |    1 +
 apps/daas/src/views/api-page/ApiServer.vue    |  433 +++---
 apps/daas/src/views/api-page/Applications.vue |  366 +++--
 apps/daas/src/views/role/Role.vue             | 1269 +++++++++++------
 packages/business/src/locale/lang/en.js       |    3 +
 packages/business/src/locale/lang/zh-CN.js    |    3 +
 packages/business/src/locale/lang/zh-TW.js    |    3 +
 .../business/src/views/data-server/List.vue   |   98 +-
 packages/i18n/src/locale/lang/en.js           |   13 +-
 packages/i18n/src/locale/lang/zh-CN.js        |   12 +
 packages/i18n/src/locale/lang/zh-TW.js        |   12 +
 packages/types/src/daas-components.d.ts       |    6 +
 15 files changed, 1269 insertions(+), 955 deletions(-)

diff --git a/apps/daas/src/directives/index.ts b/apps/daas/src/directives/index.ts
index 7232292211..1f19ad6a81 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 21d7ddb000..2b8ccba682 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 36e6a33ddd..c83a0d5128 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 3a81b1147e..a6a0f01809 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/views/api-page/ApiServer.vue b/apps/daas/src/views/api-page/ApiServer.vue
index 1faeb2a99c..055437b654 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"
@@ -300,37 +232,28 @@ export default {
         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"
-          >
-            <el-button
-              v-readonlybtn="'API_clients_amangement'"
-              text
-              type="primary"
-              @click="downloadConfig(scope.row)"
-              >{{ $t('public_button_download') }}</el-button
+          <el-space :spacer="spacer" :size="0" class="lh-1">
+            <el-button text type="primary" @click="edit(scope.row)">
+              {{ $t('public_button_edit') }}
+            </el-button>
+            <el-button text type="primary" @click="remove(scope.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(scope.row)"
+                >{{ $t('public_button_download') }}</el-button
+              >
+            </el-tooltip>
+          </el-space>
         </template>
       </el-table-column>
     </TablePage>
@@ -345,11 +268,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 c86671ce96..c1ef373817 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,178 @@ 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 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 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 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 +187,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 +203,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"
@@ -329,7 +304,7 @@ export default {
       :close-on-click-modal="false"
     >
       <ElForm
-        ref="form"
+        ref="formRef"
         :model="createForm"
         class="applications-form"
         label-width="100px"
@@ -343,7 +318,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 1c564cd069..38f8ea47b1 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',
+          },
+          {
+            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',
+          },
           {
-            name: 'v2_data_replication_all_data',
+            label: t('public_stop_all'),
+            name: 'v2_data_replication_all_data_Stop',
           },
         ],
       },
@@ -68,35 +113,138 @@ 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_export_all'),
+            name: 'v2_data-server-list_all_data_Export',
+          },
+          {
+            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: [
@@ -106,21 +254,6 @@ const pageSort = [
       { 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_system-management',
     children: [
@@ -132,503 +265,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
+  })
+}
+
+// ---- API 逻辑 ----
 
-            this.dataList = pageMenu(pageSort)
-            // 页面排序  ---- 结束
-            this.getMappingData(this.dataList)
+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',
-          })
+        dataList.value = pageMenu(pageSort)
+        // 默认全部展开
+        dataList.value.forEach((item: any) => {
+          expandedModules[item.name] = true
         })
-        .finally(() => {
-          this.saveloading = false
-        })
-    },
-    // 返回
-    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)
+  }
+}
+
+// ---- 数据权限全选 ----
+
+function isDataAllChecked(second: any) {
+  return (
+    second.filterData?.length > 0 &&
+    second.filterData.every((d: any) => d.checked)
+  )
+}
 
-      this.$confirm(
-        this.$t('public_message_title_prompt'),
-        this.$t('daas_role_role_ninhaiweibaocun'),
-      ).then((flag) => {
-        flag && this.save()
+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
-                >
-                  <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')"
+                  class="role-checkbox-item"
                 >
-                  <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);
   }
-  .borderRight {
-    border-right: 1px solid #e7e7e7;
+
+  &__info {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    min-width: 0;
   }
-  .borderLine {
-    border-left: 1px solid #e7e7e7;
-    border-bottom: 0;
-    // border-right: 1px solid #e7e7e7;
+
+  &__name {
+    font-size: 15px;
+    font-weight: 500;
+    color: var(--color-title, #1a1a1a);
   }
 
-  :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;
-      }
+  &__stats {
+    font-size: 12px;
+    color: var(--text-light, #999);
+  }
 
-      .e-checkbox {
-        padding: 5px 0;
-        margin: 0;
-        font-size: 12px;
-        color: var(--text-light);
-      }
+  &__progress {
+    margin-left: auto;
+    width: 100px;
+    flex-shrink: 0;
+  }
+
+  &__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;
+  }
+}
+
+// 权限行
+.role-permission-row {
+  display: flex;
+  padding: 16px 0;
+
+  &--bordered {
+    border-top: 1px solid #f0f0f0;
+  }
+}
+
+// 权限列
+.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;
   }
 }
-[v-cloak] {
-  display: none;
+
+.role-permission-empty {
+  padding: 3px 6px;
+  font-style: italic;
 }
-.alert-tip {
-  border-left: 4px solid #ffcf8b;
+
+// 空状态
+.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 e2859aea9b..f18932d0cc 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 1aad343ab2..cb21b1efb1 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 8c7892fdd0..cdec590a46 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/data-server/List.vue b/packages/business/src/views/data-server/List.vue
index 1b5f564610..01e99a7806 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"
           >
@@ -825,33 +844,40 @@ 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'"
+                :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
+              >
+              <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 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 b6b95135d3..15a5185f6f 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 3e053c0ae7..5875fb081a 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 d301af3ff3..12c116f652 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 9d31fd0f43..5e1c43d663 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']

From e70f1b6943d5acdc7b466573e9e1d903ffd56c15 Mon Sep 17 00:00:00 2001
From: Feynman <xufei@tapdata.io>
Date: Thu, 9 Apr 2026 09:31:19 +0800
Subject: [PATCH 2/5] feat: add route codes for project management and data
 import/export in routes and role views

---
 apps/daas/src/router/routes.ts    | 2 ++
 apps/daas/src/views/role/Role.vue | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/apps/daas/src/router/routes.ts b/apps/daas/src/router/routes.ts
index 9e8d9a6ff2..58c5ace58d 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/role/Role.vue b/apps/daas/src/views/role/Role.vue
index 38f8ea47b1..10dd2fcee8 100644
--- a/apps/daas/src/views/role/Role.vue
+++ b/apps/daas/src/views/role/Role.vue
@@ -252,6 +252,8 @@ const pageSort = [
       { name: 'v2_function_management' },
       { name: 'v2_custom_node' },
       { name: 'v2_shared_cache' },
+      { name: 'v2_project_management' },
+      { name: 'v2_project_import_and_export' },
     ],
   },
   {

From 946e4e11ec2be1e0102095461dd5ab85ae941ae4 Mon Sep 17 00:00:00 2001
From: Feynman <xufei@tapdata.io>
Date: Thu, 9 Apr 2026 10:45:50 +0800
Subject: [PATCH 3/5] refactor: enhance permission handling in ApiServer,
 Applications, and List components; update button visibility based on user
 permissions

---
 apps/daas/src/views/api-page/ApiServer.vue    | 28 ++++++-----
 apps/daas/src/views/api-page/Applications.vue | 32 ++++++++-----
 apps/daas/src/views/role/Role.vue             |  4 --
 .../business/src/views/connections/List.vue   | 48 +++++++------------
 .../business/src/views/data-server/List.vue   | 21 ++++++--
 5 files changed, 68 insertions(+), 65 deletions(-)

diff --git a/apps/daas/src/views/api-page/ApiServer.vue b/apps/daas/src/views/api-page/ApiServer.vue
index 055437b654..6767c24936 100644
--- a/apps/daas/src/views/api-page/ApiServer.vue
+++ b/apps/daas/src/views/api-page/ApiServer.vue
@@ -231,14 +231,23 @@ const handleSortTable = ({
         width="200"
         fixed="right"
       >
-        <template #default="scope">
+        <template #default="{ row }">
           <el-space :spacer="spacer" :size="0" class="lh-1">
-            <el-button text type="primary" @click="edit(scope.row)">
+            <el-button
+              v-if="row.permissionActions?.includes('Edit')"
+              text
+              type="primary"
+              @click="edit(row)"
+            >
               {{ $t('public_button_edit') }}
             </el-button>
-            <el-button text type="primary" @click="remove(scope.row)">{{
-              $t('public_button_delete')
-            }}</el-button>
+            <el-button
+              v-if="row.permissionActions?.includes('Delete')"
+              text
+              type="primary"
+              @click="remove(row)"
+              >{{ $t('public_button_delete') }}</el-button
+            >
             <el-tooltip
               v-if="$has('v2_api-servers_download')"
               class="item"
@@ -246,12 +255,9 @@ const handleSortTable = ({
               :content="$t('api_server_download_API_Server_config')"
               placement="top"
             >
-              <el-button
-                text
-                type="primary"
-                @click="downloadConfig(scope.row)"
-                >{{ $t('public_button_download') }}</el-button
-              >
+              <el-button text type="primary" @click="downloadConfig(row)">{{
+                $t('public_button_download')
+              }}</el-button>
             </el-tooltip>
           </el-space>
         </template>
diff --git a/apps/daas/src/views/api-page/Applications.vue b/apps/daas/src/views/api-page/Applications.vue
index c1ef373817..56bb781dc7 100644
--- a/apps/daas/src/views/api-page/Applications.vue
+++ b/apps/daas/src/views/api-page/Applications.vue
@@ -28,6 +28,8 @@ interface CreateForm {
   [key: string]: any
 }
 
+const spacer = h(ElDivider, { direction: 'vertical', class: 'mx-1' })
+
 const table = ref()
 const formRef = ref()
 const searchParams = ref({
@@ -273,25 +275,29 @@ const handleSortTable = ({
         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>
diff --git a/apps/daas/src/views/role/Role.vue b/apps/daas/src/views/role/Role.vue
index 10dd2fcee8..93b890f3a7 100644
--- a/apps/daas/src/views/role/Role.vue
+++ b/apps/daas/src/views/role/Role.vue
@@ -190,10 +190,6 @@ const pageSort = [
             label: t('public_revoke_all'),
             name: 'v2_data-server-list_all_data_Revoke',
           },
-          {
-            label: t('public_export_all'),
-            name: 'v2_data-server-list_all_data_Export',
-          },
           {
             label: t('public_delete_all'),
             name: 'v2_data-server-list_all_data_Delete',
diff --git a/packages/business/src/views/connections/List.vue b/packages/business/src/views/connections/List.vue
index 693f74ab30..b386934d18 100644
--- a/packages/business/src/views/connections/List.vue
+++ b/packages/business/src/views/connections/List.vue
@@ -875,7 +875,7 @@ onUnmounted(() => {
         min-width="160"
       >
         <template #default="scope">
-          {{ scope.row.connectionUrl }}
+          {{ row.connectionUrl }}
         </template>
       </ElTableColumn>
       <ElTableColumn
@@ -898,7 +898,7 @@ onUnmounted(() => {
         :label="$t('public_connection_type')"
       >
         <template #default="scope">
-          {{ getType(scope.row.connection_type) }}
+          {{ getType(row.connection_type) }}
         </template>
       </ElTableColumn>
       <ElTableColumn min-width="125">
@@ -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 01e99a7806..cb4772e310 100644
--- a/packages/business/src/views/data-server/List.vue
+++ b/packages/business/src/views/data-server/List.vue
@@ -765,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 }}
@@ -846,7 +847,10 @@ defineExpose({
           <template #default="{ row }">
             <el-space :spacer="spacer" :size="0" class="lh-1">
               <ElButton
-                v-if="row.status !== 'active'"
+                v-if="
+                  row.status !== 'active' &&
+                  row.permissionActions?.includes('Publish')
+                "
                 :disabled="row.status !== 'pending'"
                 text
                 type="primary"
@@ -854,7 +858,10 @@ defineExpose({
                 >{{ $t('public_button_public') }}</ElButton
               >
               <ElButton
-                v-if="row.status === 'active'"
+                v-if="
+                  row.status === 'active' &&
+                  row.permissionActions?.includes('Revoke')
+                "
                 text
                 type="primary"
                 @click="changeStatus(row)"
@@ -874,9 +881,13 @@ defineExpose({
                 @click="showDrawer(row, true)"
                 >{{ $t('public_button_copy') }}</ElButton
               >
-              <ElButton text type="primary" @click="removeServer(row)">{{
-                $t('public_button_delete')
-              }}</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>

From bfc215247fdd9566ae6d4d40f4737e2a449a4494 Mon Sep 17 00:00:00 2001
From: Feynman <xufei@tapdata.io>
Date: Thu, 9 Apr 2026 10:58:12 +0800
Subject: [PATCH 4/5] fix: correct button disabled state in List component to
 reflect user edit permissions

---
 packages/business/src/views/data-server/List.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/business/src/views/data-server/List.vue b/packages/business/src/views/data-server/List.vue
index cb4772e310..a52a53da7b 100644
--- a/packages/business/src/views/data-server/List.vue
+++ b/packages/business/src/views/data-server/List.vue
@@ -765,7 +765,7 @@ defineExpose({
               class="ellipsis"
               type="primary"
               style="display: block; line-height: 20px"
-              :disabled="row.permissionActions?.includes('Edit')"
+              :disabled="!row.permissionActions?.includes('Edit')"
               @click.stop="showDrawer(row)"
             >
               {{ row.name }}

From e900fb3c2d5e5542d6fe56a4d23abc350b2cf8ff Mon Sep 17 00:00:00 2001
From: Feynman <xufei@tapdata.io>
Date: Mon, 13 Apr 2026 15:48:14 +0800
Subject: [PATCH 5/5] refactor: update List component to use destructured props
 in template slots for improved readability

---
 packages/business/src/views/connections/List.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/business/src/views/connections/List.vue b/packages/business/src/views/connections/List.vue
index b386934d18..e9fc58759b 100644
--- a/packages/business/src/views/connections/List.vue
+++ b/packages/business/src/views/connections/List.vue
@@ -874,7 +874,7 @@ onUnmounted(() => {
         :label="$t('public_connection_information')"
         min-width="160"
       >
-        <template #default="scope">
+        <template #default="{ row }">
           {{ row.connectionUrl }}
         </template>
       </ElTableColumn>
@@ -897,7 +897,7 @@ onUnmounted(() => {
         min-width="135"
         :label="$t('public_connection_type')"
       >
-        <template #default="scope">
+        <template #default="{ row }">
           {{ getType(row.connection_type) }}
         </template>
       </ElTableColumn>
@@ -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