feat: 优化权限管理界面，增加菜单权限类型过滤功能，调整样式

src/index.css

@@ -26,3 +26,19 @@ a {
   -moz-user-select: none; /* Firefox */
   -ms-user-select: none; /* Internet Explorer/Edge */
 }
+
+.arco-btn {
+  border-radius: 4px;
+}
+
+/* 通过modal方法生成的简单类型弹窗样式，主要用于删除弹窗 */
+.arco-modal-simple {
+  padding: 16px;
+}
+.arco-modal-simple .arco-modal-title-align-center {
+  justify-content: start;
+}
+.arco-modal-simple .arco-modal-footer {
+  margin-top: 16px;
+  text-align: right;
+}

src/modules/permission/account/ViewPermission.vue

@@ -1,11 +1,24 @@
 <template>
-  <a-modal width="50%" v-model:visible="visible" :title="$t('permission.account.user_permission')" okText="关闭"
-    hide-cancel="true" @ok="handleOk">
-    <div :style="{ 'display': 'flex', 'flex-direction': 'column' }">
+  <a-modal
+    width="50%"
+    v-model:visible="visible"
+    :title="$t('permission.account.user_permission')"
+    okText="关闭"
+    hide-cancel="true"
+    @ok="handleOk"
+  >
+    <div :style="{ display: 'flex', 'flex-direction': 'column' }">
       <a-card class="card-body" hoverable>
-        <div class="title-box"><icon-menu size="18" />{{ $t('permission.account.menu_function') }}：</div>
+        <div class="title-box" style="justify-content: space-between">
+          <div><icon-menu size="18" />{{ $t('permission.account.menu_function') }}：</div>
+          <a-radio-group v-model="menu_active_type" type="button" size="small">
+            <a-radio v-for="(item, index) in radio_list" :key="item.value" :value="item.value">{{
+              item.title
+            }}</a-radio>
+          </a-radio-group>
+        </div>
         <a-space wrap>
-          <a-tag v-for="item in menu_permissions_list" :key="item.id">
+          <a-tag v-for="item in menu_permissions_list_computed" :key="item.id">
             {{ item.name }}
           </a-tag>
         </a-space>
@@ -32,36 +45,46 @@
 </template>
 
 <script setup>
-import { toRefs } from 'vue';
+import { toRefs, ref, computed } from 'vue';
 // 定义Props，接收外部传入的数据
 const props = defineProps({
   visible: Boolean,
   menu_permissions_list: {
-    type: Array,
+    type: Array
   },
   knowledge_permissions_list: {
-    type: Array,
+    type: Array
   },
   dialog_permissions_list: {
-    type: Array,
+    type: Array
   },
   agent_permissions_list: {
-    type: Array,
-  },
+    type: Array
+  }
 });
 
-const { visible,
-  menu_permissions_list,
-  knowledge_permissions_list,
-  dialog_permissions_list,
-  agent_permissions_list } = toRefs(props);
+const { visible, menu_permissions_list, knowledge_permissions_list, dialog_permissions_list, agent_permissions_list } =
+  toRefs(props);
 
 const emit = defineEmits(['close']);
+const menu_active_type = ref('all');
+const radio_list = [
+  { title: '全部', value: 'all' },
+  { title: '机构', value: 'org' },
+  { title: '个人', value: 'user' }
+];
+
+const menu_permissions_list_computed = computed(() => {
+  if (menu_active_type.value === 'all') {
+    return menu_permissions_list.value;
+  } else {
+    return menu_permissions_list.value.filter((item) => item.type === menu_active_type.value);
+  }
+});
 
 const handleOk = () => {
   emit('close'); // 关闭模态框并通知父组件更新状态
 };
-
 </script>
 
 <style lang="css" scoped>
@@ -81,7 +104,7 @@ const handleOk = () => {
   margin-bottom: 12px;
 }
 
-.title-box>svg {
+.title-box > svg {
   margin-right: 6px;
 }
 </style>

src/modules/permission/account/index.vue

@@ -386,7 +386,7 @@ const getMenuTitles = (data, result = []) => {
   data.forEach((item) => {
     // 检查item是否有id和name属性
     if (item.id && item.meta.title) {
-      result.push({ id: item.id, name: item.meta.title });
+      result.push({ id: item.id, name: item.meta.title, type: item.type });
     }
     // 如果有子项，递归调用函数
     if (item.children && item.children.length > 0) {

src/views/permission/Action.vue

@@ -43,8 +43,12 @@
             </div>
           </a-tooltip>
           <template #content>
-            <a-doption v-for="item in density_list" :key="item.value" :value="item.value"
-              :class="{ active: item.value === size }">
+            <a-doption
+              v-for="item in density_list"
+              :key="item.value"
+              :value="item.value"
+              :class="{ active: item.value === size }"
+            >
               <span>{{ item.name }}</span>
             </a-doption>
           </template>
@@ -59,11 +63,11 @@ import { ref, toRefs } from 'vue';
 const props = defineProps({
   btn_text: {
     required: true,
-    type: String,
+    type: String
   },
   // 新建按钮权限标识
   btn_permission: {
-    type: String,
+    type: String
   }
 });
 const { btn_text, btnPermission } = toRefs(props);
@@ -72,41 +76,40 @@ const size = ref('medium');
 const density_list = [
   {
     name: '迷你',
-    value: 'mini',
+    value: 'mini'
   },
   {
     name: '偏小',
-    value: 'small',
+    value: 'small'
   },
   {
     name: '中等',
-    value: 'medium',
+    value: 'medium'
   },
   {
     name: '偏大',
-    value: 'large',
-  },
+    value: 'large'
+  }
 ];
 
 const emit = defineEmits(['search', 'reset', 'createClick', 'refreshClick', 'sizeChange']);
 const search = () => {
   emit('searchClick', input_value.value);
-}
+};
 const reset = () => {
   input_value.value = '';
   emit('resetClick');
-}
+};
 const create = () => {
   emit('createClick');
-}
+};
 const refresh = () => {
   emit('refreshClick');
-}
+};
 const sizeChange = (val) => {
   size.value = val;
   emit('sizeChange', val);
 };
-
 </script>
 
 <style lang="css" scoped>