feat: add AuthIcon component replace ant-design icon

+<script lang="ts" setup>
+  import { Icon } from '/@/components/Icon';
+  import { computed, ExtractPropTypes, unref } from 'vue';
+  import { usePermission } from '/@/hooks/web/usePermission';
+
+  interface AuthIconProps extends ExtractPropTypes<typeof Icon> {
+    auth?: string;
+  }
+
+  const props = defineProps<AuthIconProps>();
+
+  const emit = defineEmits(['click']);
+
+  const { hasPermission } = usePermission();
+
+  const getHasPermission = computed(() => {
+    const { auth } = props;
+    return auth ? hasPermission(auth) : true;
+  });
+
+  const getBindProps = computed(() => {
+    return {
+      ...props,
+      ...(unref(getHasPermission) ? { onClick: (event: Event) => emit('click', event) } : {}),
+    };
+  });
+</script>
+
+<template>
+  <Icon
+    v-bind="getBindProps"
+    class="justify-center items-center"
+    :class="getHasPermission ? '' : '!cursor-not-allowed !text-gray-200'"
+  />
+</template>

 export { default as ModeSwitchButton } from './ModeSwitchButton.vue';
 export { default as ModeSwitchButton } from './ModeSwitchButton.vue';
 export { default as CardLayoutButton } from './CardLayoutButton.vue';
 export { default as CardLayoutButton } from './CardLayoutButton.vue';
+export { default as AuthIcon } from './AuthIcon.vue';
 export {
 export {
   EnumTableCardMode,
   EnumTableCardMode,
   EnumTableChartMode,
   EnumTableChartMode,

 <script setup lang="ts">
 <script setup lang="ts">
   import { List, Card, Button, PaginationProps, Popover, Slider, Tooltip } from 'ant-design-vue';
   import { List, Card, Button, PaginationProps, Popover, Slider, Tooltip } from 'ant-design-vue';
-  import {
-    ReloadOutlined,
-    AppstoreOutlined,
-    EyeOutlined,
-    EditOutlined,
-    EllipsisOutlined,
-  } from '@ant-design/icons-vue';
+  import { ReloadOutlined, AppstoreOutlined, EllipsisOutlined } from '@ant-design/icons-vue';
   import { computed, onMounted, reactive, ref, unref } from 'vue';
   import { computed, onMounted, reactive, ref, unref } from 'vue';
   import { OrganizationIdTree, useResetOrganizationTree } from '../../common/organizationIdTree';
   import { OrganizationIdTree, useResetOrganizationTree } from '../../common/organizationIdTree';
   import {
   import {
@@ -29,6 +23,7 @@
   import { cloneDeep } from 'lodash';
   import { cloneDeep } from 'lodash';
   import { usePermission } from '/@/hooks/web/usePermission';
   import { usePermission } from '/@/hooks/web/usePermission';
   import { useGlobSetting } from '/@/hooks/setting';
   import { useGlobSetting } from '/@/hooks/setting';
+  import { AuthIcon } from '/@/components/Widget';
 
 
   const listColumn = ref(5);
   const listColumn = ref(5);
 
 
@@ -227,16 +222,18 @@
               </template>
               </template>
               <template class="ant-card-actions" #actions>
               <template class="ant-card-actions" #actions>
                 <Tooltip title="预览">
                 <Tooltip title="预览">
-                  <EyeOutlined
-                    :class="getPreviewFlag ? '' : '!cursor-not-allowed !text-gray-200'"
-                    key="setting"
+                  <AuthIcon
+                    :auth="ConfigurationPermission.PREVIEW"
+                    class="!text-lg"
+                    icon="ant-design:eye-outlined"
                     @click="handlePreview(item)"
                     @click="handlePreview(item)"
                   />
                   />
                 </Tooltip>
                 </Tooltip>
                 <Tooltip title="设计">
                 <Tooltip title="设计">
-                  <EditOutlined
-                    :class="getDesignFlag ? '' : '!cursor-not-allowed !text-gray-200'"
-                    key="edit"
+                  <AuthIcon
+                    :auth="ConfigurationPermission.DESIGN"
+                    class="!text-lg"
+                    icon="ant-design:edit-outlined"
                     @click="handleDesign(item)"
                     @click="handleDesign(item)"
                   />
                   />
                 </Tooltip>
                 </Tooltip>

@@ -2,9 +2,14 @@
   import { PageWrapper } from '/@/components/Page';
   import { PageWrapper } from '/@/components/Page';
   import { BasicForm, useForm } from '/@/components/Form';
   import { BasicForm, useForm } from '/@/components/Form';
   import { List, Button, Tooltip, Card, PaginationProps, Image } from 'ant-design-vue';
   import { List, Button, Tooltip, Card, PaginationProps, Image } from 'ant-design-vue';
-  import { ReloadOutlined, EyeOutlined, FormOutlined, MoreOutlined } from '@ant-design/icons-vue';
+  import { ReloadOutlined, MoreOutlined } from '@ant-design/icons-vue';
   import { computed, onMounted, reactive, ref, unref } from 'vue';
   import { computed, onMounted, reactive, ref, unref } from 'vue';
-  import { CardLayoutButton, EnumTableCardMode, ModeSwitchButton } from '/@/components/Widget';
+  import {
+    AuthIcon,
+    CardLayoutButton,
+    EnumTableCardMode,
+    ModeSwitchButton,
+  } from '/@/components/Widget';
   import { Authority } from '/@/components/Authority';
   import { Authority } from '/@/components/Authority';
   import {
   import {
     deviceConfigDelete,
     deviceConfigDelete,
@@ -111,14 +116,6 @@
     return hasPermission(ProductPermission.DELETE);
     return hasPermission(ProductPermission.DELETE);
   });
   });
 
 
-  const getHasDetailFlag = computed(() => {
-    return hasPermission(ProductPermission.DETAIL);
-  });
-
-  const getHasUpdateFlag = computed(() => {
-    return hasPermission(ProductPermission.UPDATE);
-  });
-
   const getDropDownList = (record: ProfileRecord) => {
   const getDropDownList = (record: ProfileRecord) => {
     const list = [
     const list = [
       {
       {
@@ -163,12 +160,10 @@
   };
   };
 
 
   const handleShowDetail = (record: ProfileRecord) => {
   const handleShowDetail = (record: ProfileRecord) => {
-    if (!unref(getHasDetailFlag)) return;
     openDrawer(true, { record });
     openDrawer(true, { record });
   };
   };
 
 
   const handleUpdate = (record: ProfileRecord) => {
   const handleUpdate = (record: ProfileRecord) => {
-    if (!unref(getHasUpdateFlag)) return;
     openModal(true, {
     openModal(true, {
       record,
       record,
       isUpdate: true,
       isUpdate: true,
@@ -268,16 +263,18 @@
               </template>
               </template>
               <template class="ant-card-actions" #actions>
               <template class="ant-card-actions" #actions>
                 <Tooltip title="详情">
                 <Tooltip title="详情">
-                  <EyeOutlined
-                    :class="getHasDetailFlag ? '' : '!cursor-not-allowed !text-gray-200'"
-                    key="setting"
+                  <AuthIcon
+                    :auth="ProductPermission.DETAIL"
+                    class="!text-lg"
+                    icon="ant-design:eye-outlined"
                     @click.stop="handleShowDetail(item)"
                     @click.stop="handleShowDetail(item)"
                   />
                   />
                 </Tooltip>
                 </Tooltip>
                 <Tooltip title="编辑">
                 <Tooltip title="编辑">
-                  <FormOutlined
-                    :class="getHasUpdateFlag ? '' : '!cursor-not-allowed !text-gray-200'"
-                    key="edit"
+                  <AuthIcon
+                    :auth="ProductPermission.UPDATE"
+                    class="!text-lg"
+                    icon="ant-design:form-outlined"
                     @click.stop="handleUpdate(item)"
                     @click.stop="handleUpdate(item)"
                   />
                   />
                 </Tooltip>
                 </Tooltip>
@@ -308,7 +305,10 @@
 
 
 <style lang="less" scoped>
 <style lang="less" scoped>
   .profile-list:deep(.ant-image-img) {
   .profile-list:deep(.ant-image-img) {
-    width: 100% !important;
-    height: 100% !important;
+    @apply !w-full !h-full;
+  }
+
+  .profile-list:deep(.ant-card-body) {
+    @apply !p-4;
   }
   }
 </style>
 </style>