Merge branch 'ww' into 'main'

feat: add AuthIcon component replace ant-design icon

See merge request huang/yun-teng-iot-front!451

+<svg t="1671693733059" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="25398" width="200" height="200"><path d="M585.290213 343.524914c0-37.136805-33.106002-67.357084-73.789587-67.357084-40.684608 0-73.78754 30.220279-73.78754 67.357084 0 37.120432 33.102932 67.329455 73.78754 67.329455C552.184211 410.854369 585.290213 380.645346 585.290213 343.524914zM467.227284 343.524914c0-22.289656 19.860327-40.417525 44.273343-40.417525 24.415063 0 44.273343 18.127869 44.273343 40.417525 0 22.271236-19.85828 40.389896-44.273343 40.389896C487.087611 383.91481 467.227284 365.79615 467.227284 343.524914zM511.141446 741.92667l11.455913-12.768815c8.013511-8.92937 204.344015-220.213447 203.697285-358.458021-0.506537-111.529119-101.375875-208.420867-214.795041-208.420867-113.923656 0-215.816301 96.907097-215.816301 208.483288 0 138.182153 196.101283 349.432461 204.055442 358.356714L511.141446 741.92667zM511.500627 189.219549c97.206926 0 184.830589 84.850503 185.278797 181.601034 0.517793 109.87034-144.55121 279.638885-185.553043 328.016709-40.799218-48.428989-186.026834-218.179115-186.026834-328.072991C325.199547 274.042423 413.845493 189.219549 511.500627 189.219549zM946.101839 789.395798 832.104505 600.221274c-10.316973-17.114796-30.019711-27.752064-51.421136-27.752064L673.835875 572.46921c-8.156774 0-14.759145 6.03239-14.759145 13.472849 0 7.436366 6.601348 13.46671 14.759145 13.46671l106.848517 0c10.636245 0 20.437471 5.287423 25.566282 13.795191L920.250054 802.37746c5.013177 8.337899 4.856611 18.201547-0.448208 26.380834-5.303796 8.190543-14.699794 13.077853-25.120121 13.077853L128.318504 841.836147c-10.41828 0-19.814278-4.88731-25.119097-13.077853-5.302773-8.179286-5.462408-18.042935-0.446162-26.380834l113.997334-189.174524c5.130857-8.507768 14.930037-13.795191 25.566282-13.795191L349.166401 599.407746c8.15575 0 14.757099-6.030343 14.757099-13.46671 0-7.440459-6.601348-13.472849-14.757099-13.472849L242.317884 572.468187c-21.401426 0-41.10314 10.638291-51.42216 27.752064L76.898391 789.395798c-10.102079 16.758686-9.769504 36.600593 0.89437 53.073776 10.665921 16.476253 29.5582 26.307156 50.526767 26.307156L894.680702 868.776729c20.968567 0 39.862893-9.830903 50.528813-26.307156C955.87339 825.99639 956.204941 806.154483 946.101839 789.395798z" fill="#bfbfbf" p-id="25399"></path></svg>

-<script lang="ts" setup></script>
+<script lang="ts" setup>
+  import { Dropdown, Menu, Popconfirm } from 'ant-design-vue';
+  import { computed, useSlots } from 'vue';
+  import Icon from '../Icon';
+  import { usePermission } from '/@/hooks/web/usePermission';
 
 
-<template> <div></div></template>
+  export interface AuthDropDownProps {
+    dropMenuList: AuthDropMenuList[];
+    trigger?: ('contextmenu' | 'click' | 'hover')[];
+  }
+
+  export interface AuthDropMenuList {
+    icon?: string;
+    event: string | number;
+    text: string;
+    disabled?: boolean;
+    divider?: boolean;
+    auth?: string;
+    onClick?: Fn;
+    popconfirm?: {
+      cancelText?: string;
+      okText?: string;
+      okType?: string;
+      title?: string;
+      icon?: string;
+      disabled?: boolean;
+      onCancel?: Fn;
+      onConfirm?: Fn;
+      onVisibleChange?: Fn;
+    };
+  }
+
+  const props = defineProps<AuthDropDownProps>();
+
+  const slot = useSlots();
+
+  const { hasPermission } = usePermission();
+
+  const getMenuList = computed(() => {
+    const { dropMenuList } = props;
+    return dropMenuList.filter((menu) => (menu.auth ? hasPermission(menu.auth) : true));
+  });
+
+  const hasDefaultSlot = computed(() => {
+    return !!slot.default;
+  });
+</script>
+
+<template>
+  <Dropdown :trigger="$props.trigger">
+    <template #overlay>
+      <Menu v-if="getMenuList.length">
+        <template v-for="item in getMenuList" :key="item.event">
+          <Menu.Divider v-if="item.divider" />
+          <Menu.Item v-if="!item.popconfirm" @click="item.onClick">
+            <span class="flex justify-center items-center">
+              <Icon :icon="item.icon" />
+              <span class="ml-2">{{ item.text }}</span>
+            </span>
+          </Menu.Item>
+          <Menu.Item v-if="item.popconfirm">
+            <Popconfirm v-bind="item.popconfirm">
+              <template v-if="item.popconfirm.icon" #icon>
+                <Icon :icon="item.popconfirm.icon" />
+              </template>
+              <span class="flex justify-center items-center">
+                <Icon :icon="item.icon" />
+                <span class="ml-2">{{ item.text }}</span>
+              </span>
+            </Popconfirm>
+          </Menu.Item>
+        </template>
+      </Menu>
+    </template>
+    <Icon
+      v-if="!hasDefaultSlot"
+      class="items-center justify-center"
+      icon="ant-design:ellipsis-outlined"
+      :class="!getMenuList.length ? '!text-gray-200 !cursor-not-allowed' : ''"
+    />
+    <slot name="default"></slot>
+  </Dropdown>
+</template>

+<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,

@@ -26,3 +26,26 @@ export function buildShortUUID(prefix = ''): string {
   unique++;
   unique++;
   return prefix + '_' + random + unique + String(time);
   return prefix + '_' + random + unique + String(time);
 }
 }
+
+export function getlowerCaseChars() {
+  return Array.from({ length: 26 }).map((_, index) => String.fromCharCode(index + 97));
+}
+
+export function getUpperCaseChars() {
+  return Array.from({ length: 26 }).map((_, index) => String.fromCharCode(index + 65));
+}
+
+export function randomString(length = 20) {
+  const upperCaseChars = getUpperCaseChars();
+  const lowerCaseChars = getlowerCaseChars();
+  const numberChars = Array.from({ length: 10 }).map((_, index) => index);
+  const allChars = [...numberChars, ...upperCaseChars, ...lowerCaseChars].sort(
+    () => 0.5 - Math.random()
+  );
+
+  const rangeFn = () => (Math.random() * 63) | 0;
+
+  return Array.from({ length })
+    .map(() => allChars[rangeFn()])
+    .join('');
+}

 <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 } 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 {
@@ -15,7 +9,6 @@
   } from '/@/api/configuration/center/configurationCenter';
   } from '/@/api/configuration/center/configurationCenter';
   import { ConfigurationCenterItemsModal } from '/@/api/configuration/center/model/configurationCenterModal';
   import { ConfigurationCenterItemsModal } from '/@/api/configuration/center/model/configurationCenterModal';
   import { PageWrapper } from '/@/components/Page';
   import { PageWrapper } from '/@/components/Page';
-  import { Dropdown } from '/@/components/Dropdown';
   import { BasicForm, useForm } from '/@/components/Form';
   import { BasicForm, useForm } from '/@/components/Form';
   import { ConfigurationPermission, searchFormSchema } from './center.data';
   import { ConfigurationPermission, searchFormSchema } from './center.data';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { useMessage } from '/@/hooks/web/useMessage';
@@ -23,12 +16,13 @@
   import { isDevMode } from '/@/utils/env';
   import { isDevMode } from '/@/utils/env';
   import ConfigurationCenterDrawer from './ConfigurationCenterDrawer.vue';
   import ConfigurationCenterDrawer from './ConfigurationCenterDrawer.vue';
   import { useDrawer } from '/@/components/Drawer';
   import { useDrawer } from '/@/components/Drawer';
-  import { useSyncConfirm } from '/@/hooks/component/useSyncConfirm';
   import { getBoundingClientRect } from '/@/utils/domUtils';
   import { getBoundingClientRect } from '/@/utils/domUtils';
   import configurationSrc from '/@/assets/icons/configuration.svg';
   import configurationSrc from '/@/assets/icons/configuration.svg';
   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';
+  import AuthDropDown from '/@/components/Widget/AuthDropDown.vue';
 
 
   const listColumn = ref(5);
   const listColumn = ref(5);
 
 
@@ -136,10 +130,8 @@
     window.open(`${configurationPrefix}/${isDev ? '?dev=1&' : '?'}configurationId=${record!.id}`);
     window.open(`${configurationPrefix}/${isDev ? '?dev=1&' : '?'}configurationId=${record!.id}`);
   };
   };
 
 
-  const { createSyncConfirm } = useSyncConfirm();
   const handleDelete = async (record: ConfigurationCenterItemsModal) => {
   const handleDelete = async (record: ConfigurationCenterItemsModal) => {
     try {
     try {
-      await createSyncConfirm({ iconType: 'warning', content: '是否确认删除操作?' });
       await deleteConfigurationCenter([record.id]);
       await deleteConfigurationCenter([record.id]);
       createMessage.success('删除成功');
       createMessage.success('删除成功');
       await getListData();
       await getListData();
@@ -227,20 +219,44 @@
               </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>
-                <Dropdown
+                <AuthDropDown
+                  :dropMenuList="[
+                    {
+                      text: '编辑',
+                      auth: ConfigurationPermission.UPDATE,
+                      icon: 'clarity:note-edit-line',
+                      event: '',
+                      onClick: handleCreateOrUpdate.bind(null, item),
+                    },
+                    {
+                      text: '删除',
+                      auth: ConfigurationPermission.DELETE,
+                      icon: 'ant-design:delete-outlined',
+                      event: '',
+                      popconfirm: {
+                        title: '是否确认删除操作?',
+                        onConfirm: handleDelete.bind(null, item),
+                      },
+                    },
+                  ]"
+                  :trigger="['hover']"
+                />
+                <!-- <Dropdown
                   :dropMenuList="[
                   :dropMenuList="[
                     {
                     {
                       text: '编辑',
                       text: '编辑',
@@ -261,7 +277,7 @@
                   :trigger="['hover']"
                   :trigger="['hover']"
                 >
                 >
                   <EllipsisOutlined key="ellipsis" />
                   <EllipsisOutlined key="ellipsis" />
-                </Dropdown>
+                </Dropdown> -->
               </template>
               </template>
               <Card.Meta>
               <Card.Meta>
                 <template #title>
                 <template #title>

@@ -399,6 +399,7 @@ export const step2Schemas: FormSchema[] = [
     field: 'credentialsId',
     field: 'credentialsId',
     required: true,
     required: true,
     ifShow: false,
     ifShow: false,
+    slot: 'credentialsId',
     componentProps: {
     componentProps: {
       maxLength: 36,
       maxLength: 36,
       placeholder: '请输入访问令牌',
       placeholder: '请输入访问令牌',
@@ -421,6 +422,7 @@ export const step2Schemas: FormSchema[] = [
     field: 'clientId',
     field: 'clientId',
     required: true,
     required: true,
     ifShow: false,
     ifShow: false,
+    slot: 'clientId',
     componentProps: {
     componentProps: {
       maxLength: 36,
       maxLength: 36,
       placeholder: '请输入客户端ID',
       placeholder: '请输入客户端ID',
@@ -597,6 +599,7 @@ export const TokenSchemas: FormSchema[] = [
     field: 'credentialsId',
     field: 'credentialsId',
     required: true,
     required: true,
     ifShow: false,
     ifShow: false,
+    slot: 'credentialsId',
     componentProps: {
     componentProps: {
       maxLength: 36,
       maxLength: 36,
       placeholder: '请输入访问令牌',
       placeholder: '请输入访问令牌',

@@ -12,7 +12,17 @@
       <template #clientId="{ field, model }">
       <template #clientId="{ field, model }">
         <div class="flex items-center">
         <div class="flex items-center">
           <Input v-model:value="model[field]" placeholder="请输入客户端ID" />
           <Input v-model:value="model[field]" placeholder="请输入客户端ID" />
-          <ReloadOutlined class="ml-3 !text-blue-600" @click="handleCreateUUID" />
+          <Tooltip title="刷新客户端ID">
+            <ReloadOutlined class="ml-3 !text-blue-600" @click="handleCreateUUID" />
+          </Tooltip>
+        </div>
+      </template>
+      <template #credentialsId="{ field, model }">
+        <div class="flex items-center">
+          <Input v-model:value="model[field]" placeholder="请输入访问令牌" />
+          <Tooltip title="刷新访问令牌">
+            <ReloadOutlined class="ml-3 !text-blue-600" @click="handleCreateCredentialsId" />
+          </Tooltip>
         </div>
         </div>
       </template>
       </template>
     </BasicForm>
     </BasicForm>
@@ -26,8 +36,8 @@
   import { TokenSchemas, credentialTypeEnum } from '../../config/data';
   import { TokenSchemas, credentialTypeEnum } from '../../config/data';
   import { saveDeviceToken } from '/@/api/device/deviceManager';
   import { saveDeviceToken } from '/@/api/device/deviceManager';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { useMessage } from '/@/hooks/web/useMessage';
-  import { Input } from 'ant-design-vue';
-  import { buildUUID } from '/@/utils/uuid';
+  import { Input, Tooltip } from 'ant-design-vue';
+  import { buildUUID, randomString } from '/@/utils/uuid';
   import { ReloadOutlined } from '@ant-design/icons-vue';
   import { ReloadOutlined } from '@ant-design/icons-vue';
   export default defineComponent({
   export default defineComponent({
     components: {
     components: {
@@ -35,6 +45,7 @@
       BasicForm,
       BasicForm,
       Input,
       Input,
       ReloadOutlined,
       ReloadOutlined,
+      Tooltip,
     },
     },
     emits: ['register'],
     emits: ['register'],
     setup() {
     setup() {
@@ -224,6 +235,10 @@
       const handleCreateUUID = () => {
       const handleCreateUUID = () => {
         setFieldsValue({ clientId: buildUUID() });
         setFieldsValue({ clientId: buildUUID() });
       };
       };
+
+      const handleCreateCredentialsId = () => {
+        setFieldsValue({ credentialsId: randomString() });
+      };
       return {
       return {
         registerModal,
         registerModal,
         registerForm,
         registerForm,
@@ -231,6 +246,7 @@
         handleCancel,
         handleCancel,
         handleOk,
         handleOk,
         handleCreateUUID,
         handleCreateUUID,
+        handleCreateCredentialsId,
       };
       };
     },
     },
   });
   });

@@ -4,6 +4,30 @@
       <template #addAgree="{ model, field }">
       <template #addAgree="{ model, field }">
         <Checkbox v-model:checked="model[field]" @change="checkedChange">添加协议</Checkbox>
         <Checkbox v-model:checked="model[field]" @change="checkedChange">添加协议</Checkbox>
       </template>
       </template>
+      <template #clientId="{ model, field }">
+        <div class="flex justify-center items-center">
+          <Input v-model:value="model[field]" placeholder="请输入客户端ID" />
+          <Tooltip title="刷新客户端ID">
+            <Icon
+              class="ml-3 cursor-pointer !text-blue-600"
+              icon="ant-design:reload-outlined"
+              @click="handleGenerateClientId"
+            />
+          </Tooltip>
+        </div>
+      </template>
+      <template #credentialsId="{ model, field }">
+        <div class="flex justify-center items-center">
+          <Input v-model:value="model[field]" placeholder="请输入访问令牌" />
+          <Tooltip title="刷新访问令牌">
+            <Icon
+              class="ml-3 cursor-pointer !text-blue-600"
+              icon="ant-design:reload-outlined"
+              @click="handleGenerateCredentialsId"
+            />
+          </Tooltip>
+        </div>
+      </template>
     </BasicForm>
     </BasicForm>
     <div>
     <div>
       <a-button @click="prevStep">上一步</a-button>
       <a-button @click="prevStep">上一步</a-button>
@@ -13,13 +37,18 @@
 <script lang="ts">
 <script lang="ts">
   import { defineComponent } from 'vue';
   import { defineComponent } from 'vue';
 
 
-  import { Checkbox } from 'ant-design-vue';
+  import { Checkbox, Input, Tooltip } from 'ant-design-vue';
   import { BasicForm, useForm } from '/@/components/Form';
   import { BasicForm, useForm } from '/@/components/Form';
   import { step2Schemas } from '../../config/data';
   import { step2Schemas } from '../../config/data';
+  import { Icon } from '/@/components/Icon';
+  import { buildUUID, randomString } from '/@/utils/uuid';
   export default defineComponent({
   export default defineComponent({
     components: {
     components: {
       BasicForm,
       BasicForm,
       Checkbox,
       Checkbox,
+      Input,
+      Icon,
+      Tooltip,
     },
     },
 
 
     emits: ['prev', 'next'],
     emits: ['prev', 'next'],
@@ -105,6 +134,14 @@
         validate();
         validate();
       }
       }
 
 
+      const handleGenerateClientId = () => {
+        setFieldsValue({ clientId: buildUUID() });
+      };
+
+      const handleGenerateCredentialsId = () => {
+        setFieldsValue({ credentialsId: randomString() });
+      };
+
       return {
       return {
         prevStep,
         prevStep,
         registerForm,
         registerForm,
@@ -113,6 +150,8 @@
         validate,
         validate,
         resetFieldsValueAndStatus,
         resetFieldsValueAndStatus,
         validateStep2Method,
         validateStep2Method,
+        handleGenerateClientId,
+        handleGenerateCredentialsId,
       };
       };
     },
     },
   });
   });

@@ -55,15 +55,23 @@
       <a-button type="primary" class="mr-4" @click="manageDeviceToken">管理设备凭证</a-button>
       <a-button type="primary" class="mr-4" @click="manageDeviceToken">管理设备凭证</a-button>
       <ManageDeviceTokenModal @register="registerModal" />
       <ManageDeviceTokenModal @register="registerModal" />
     </div>
     </div>
-    <div v-if="deviceDetail?.deviceInfo?.address" class="mt-4">
+    <div class="mt-4">
       <p>设备位置</p>
       <p>设备位置</p>
-      <div ref="mapWrapRef" style="height: 550px; width: 100%"></div>
+      <div v-if="deviceDetail?.deviceInfo?.address">
+        <div ref="mapWrapRef" style="height: 550px; width: 100%"></div>
+      </div>
+      <Empty
+        v-if="!deviceDetail?.deviceInfo?.address"
+        :image="locationImage"
+        :imageStyle="{ display: 'flex', 'justify-content': 'center', height: '150px' }"
+        description="请添加设备地理位置"
+      />
     </div>
     </div>
   </div>
   </div>
 </template>
 </template>
 <script lang="ts">
 <script lang="ts">
   import { defineComponent, ref, unref, nextTick } from 'vue';
   import { defineComponent, ref, unref, nextTick } from 'vue';
-  import { Image, Tooltip } from 'ant-design-vue';
+  import { Empty, Image, Tooltip } from 'ant-design-vue';
   import { descSchema } from '../../config/detail.config';
   import { descSchema } from '../../config/detail.config';
   import { useAsyncScript } from '/@/hooks/web/useAsyncScript';
   import { useAsyncScript } from '/@/hooks/web/useAsyncScript';
   import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
   import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
@@ -78,6 +86,8 @@
 
 
   import wz from '/@/assets/images/wz.png';
   import wz from '/@/assets/images/wz.png';
   import { useAsyncQueue } from '../../../localtion/useAsyncQueue';
   import { useAsyncQueue } from '../../../localtion/useAsyncQueue';
+  import locationImage from '/@/assets/icons/location.svg';
+
   export default defineComponent({
   export default defineComponent({
     components: {
     components: {
       Image,
       Image,
@@ -86,6 +96,7 @@
       QuestionCircleOutlined,
       QuestionCircleOutlined,
       BasicModal,
       BasicModal,
       Tooltip,
       Tooltip,
+      Empty,
     },
     },
     props: {
     props: {
       deviceDetail: {
       deviceDetail: {
@@ -197,6 +208,7 @@
         DeviceTypeEnum,
         DeviceTypeEnum,
         copyTopic,
         copyTopic,
         remoteConnectiondGateway,
         remoteConnectiondGateway,
+        locationImage,
       };
       };
     },
     },
   });
   });

@@ -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 } 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,
@@ -12,7 +17,6 @@
     setDeviceProfileIsDefaultApi,
     setDeviceProfileIsDefaultApi,
   } from '/@/api/device/deviceConfigApi';
   } from '/@/api/device/deviceConfigApi';
   import { ProfileRecord } from '/@/api/device/model/deviceConfigModel';
   import { ProfileRecord } from '/@/api/device/model/deviceConfigModel';
-  import { Dropdown } from '/@/components/Dropdown';
   import {
   import {
     defaultObj,
     defaultObj,
     searchFormSchema,
     searchFormSchema,
@@ -20,14 +24,13 @@
     ProductPermission,
     ProductPermission,
   } from './device.profile.data';
   } from './device.profile.data';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { useMessage } from '/@/hooks/web/useMessage';
-  import { useSyncConfirm } from '/@/hooks/component/useSyncConfirm';
   import DeviceProfileModal from './DeviceProfileModal.vue';
   import DeviceProfileModal from './DeviceProfileModal.vue';
   import DeviceProfileDrawer from './DeviceProfileDrawer.vue';
   import DeviceProfileDrawer from './DeviceProfileDrawer.vue';
   import { useModal } from '/@/components/Modal';
   import { useModal } from '/@/components/Modal';
   import { useDrawer } from '/@/components/Drawer';
   import { useDrawer } from '/@/components/Drawer';
   import productDefault from '/@/assets/icons/product-default.svg';
   import productDefault from '/@/assets/icons/product-default.svg';
-  import { usePermission } from '/@/hooks/web/usePermission';
   import { useRoute } from 'vue-router';
   import { useRoute } from 'vue-router';
+  import AuthDropDown from '/@/components/Widget/AuthDropDown.vue';
 
 
   defineProps<{
   defineProps<{
     mode: EnumTableCardMode;
     mode: EnumTableCardMode;
@@ -42,7 +45,6 @@
   const IMAGE_FALLBACK = productDefault;
   const IMAGE_FALLBACK = productDefault;
 
 
   const { createMessage } = useMessage();
   const { createMessage } = useMessage();
-  const { createSyncConfirm } = useSyncConfirm();
 
 
   const [register, { getFieldsValue, setFieldsValue }] = useForm({
   const [register, { getFieldsValue, setFieldsValue }] = useForm({
     showAdvancedButton: true,
     showAdvancedButton: true,
@@ -105,40 +107,6 @@
     }
     }
   };
   };
 
 
-  const { hasPermission } = usePermission();
-
-  const getHasDeleteFlag = computed(() => {
-    return hasPermission(ProductPermission.DELETE);
-  });
-
-  const getHasDetailFlag = computed(() => {
-    return hasPermission(ProductPermission.DETAIL);
-  });
-
-  const getHasUpdateFlag = computed(() => {
-    return hasPermission(ProductPermission.UPDATE);
-  });
-
-  const getDropDownList = (record: ProfileRecord) => {
-    const list = [
-      {
-        text: '默认',
-        event: DropMenuEvent.SET_DEFAULT,
-        icon: 'ant-design:unordered-list-outlined',
-        onClick: handleSetDefault.bind(null, record),
-      },
-    ];
-    if (unref(getHasDeleteFlag)) {
-      list.push({
-        text: '删除',
-        event: DropMenuEvent.DELETE,
-        icon: 'ant-design:delete-outlined',
-        onClick: handleDelete.bind(null, [record.id]),
-      });
-    }
-    return list;
-  };
-
   const handleModeChange = (mode: EnumTableCardMode) => {
   const handleModeChange = (mode: EnumTableCardMode) => {
     emit('changeMode', mode);
     emit('changeMode', mode);
   };
   };
@@ -163,12 +131,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,
@@ -177,7 +143,6 @@
 
 
   const handleDelete = async (id: string[]) => {
   const handleDelete = async (id: string[]) => {
     try {
     try {
-      await createSyncConfirm({ iconType: 'warning', content: '是否确认删除操作?' });
       await deviceConfigDelete(id);
       await deviceConfigDelete(id);
       createMessage.success('删除成功');
       createMessage.success('删除成功');
       await getDataSource();
       await getDataSource();
@@ -268,22 +233,43 @@
               </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>
-                <Dropdown :trigger="['hover']" :drop-menu-list="getDropDownList(item)">
-                  <MoreOutlined @click.stop class="transform rotate-90" />
-                </Dropdown>
+                <AuthDropDown
+                  @click.stop
+                  :trigger="['hover']"
+                  :drop-menu-list="[
+                    {
+                      text: '默认',
+                      event: DropMenuEvent.SET_DEFAULT,
+                      icon: 'ant-design:unordered-list-outlined',
+                      onClick: handleSetDefault.bind(null, item),
+                    },
+                    {
+                      text: '删除',
+                      event: DropMenuEvent.DELETE,
+                      auth: ProductPermission.DELETE,
+                      icon: 'ant-design:delete-outlined',
+                      popconfirm: {
+                        title: '是否确认删除操作?',
+                        onConfirm: handleDelete.bind(null, [item.id]),
+                      },
+                    },
+                  ]"
+                />
               </template>
               </template>
               <Card.Meta>
               <Card.Meta>
                 <template #title>
                 <template #title>
@@ -308,7 +294,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>

@@ -28,10 +28,13 @@
         field: 'scriptName',
         field: 'scriptName',
         label: '转换脚本',
         label: '转换脚本',
         render: (value: string) => {
         render: (value: string) => {
-          return h('div', [
-            h(Tag, { color: 'blue' }, () => value),
-            h(Button, { type: 'link', onClick: handleTestScript }, () => '测试脚本'),
-          ]);
+          return (
+            value &&
+            h('div', [
+              h(Tag, { color: 'blue' }, () => value),
+              h(Button, { type: 'link', onClick: handleTestScript }, () => '测试脚本'),
+            ])
+          );
         },
         },
       },
       },
     ],
     ],

@@ -261,12 +261,14 @@ export const columns: BasicColumn[] = [
     title: '默认配置',
     title: '默认配置',
     dataIndex: 'default',
     dataIndex: 'default',
     width: 80,
     width: 80,
-    format: (text) => (text ? '是' : '否'),
+    customRender: ({ text }) =>
+      text ? h(Tag, { color: 'blue' }, () => '是') : h(Tag, { color: 'red' }, () => '否'),
   },
   },
   {
   {
     title: '描述',
     title: '描述',
     dataIndex: 'description',
     dataIndex: 'description',
     width: 90,
     width: 90,
+    ellipsis: true,
   },
   },
   {
   {
     title: '创建时间',
     title: '创建时间',

@@ -8,7 +8,9 @@
               placeholder="请选择转换脚本"
               placeholder="请选择转换脚本"
               v-model:value="selectScript.script"
               v-model:value="selectScript.script"
               style="width: 305px"
               style="width: 305px"
+              show-search
               :options="selectOptions"
               :options="selectOptions"
+              :filter-option="handleSearch"
               allowClear
               allowClear
             />
             />
           </div>
           </div>
@@ -113,6 +115,11 @@
   const setFormData = (v) => {
   const setFormData = (v) => {
     selectScript.script = v?.scriptId;
     selectScript.script = v?.scriptId;
   };
   };
+
+  const handleSearch = (inputValue: string, option: Record<'label' | 'value', string>) => {
+    return option.label.includes(inputValue);
+  };
+
   defineExpose({
   defineExpose({
     getFormData,
     getFormData,
     resetFormData,
     resetFormData,