Merge branch 'main' into local_dev_ft

@@ -69,6 +69,7 @@ export interface ComponentInfo {
   icon: string;
   value?: string | number;
   updateTime?: number;
+  showDeviceName: boolean;
 }
 
 export interface DataSource {

@@ -14,7 +14,7 @@ enum Api {
  * @description: Get user menu based on id
  */
 
-export const getMenuList = (args) => {
+export const getMenuList = (args?: number) => {
   const userStore = useUserStore();
   let url = Api.GetMenuList;
   try {

@@ -94,3 +94,9 @@ export function forgetPasswordApi(data) {
     data,
   });
 }
+
+export const getUserToken = (id: string) => {
+  return defHttp.get<Record<'token' | 'refreshToken', string>>({
+    url: `/third/login/id/${id}`,
+  });
+};

+<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 CardLayoutButton } from './CardLayoutButton.vue';
+export { default as AuthIcon } from './AuthIcon.vue';
 export {
   EnumTableCardMode,
   EnumTableChartMode,

@@ -26,3 +26,26 @@ export function buildShortUUID(prefix = ''): string {
   unique++;
   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">
   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 { OrganizationIdTree, useResetOrganizationTree } from '../../common/organizationIdTree';
   import {
@@ -15,7 +9,6 @@
   } from '/@/api/configuration/center/configurationCenter';
   import { ConfigurationCenterItemsModal } from '/@/api/configuration/center/model/configurationCenterModal';
   import { PageWrapper } from '/@/components/Page';
-  import { Dropdown } from '/@/components/Dropdown';
   import { BasicForm, useForm } from '/@/components/Form';
   import { ConfigurationPermission, searchFormSchema } from './center.data';
   import { useMessage } from '/@/hooks/web/useMessage';
@@ -23,12 +16,13 @@
   import { isDevMode } from '/@/utils/env';
   import ConfigurationCenterDrawer from './ConfigurationCenterDrawer.vue';
   import { useDrawer } from '/@/components/Drawer';
-  import { useSyncConfirm } from '/@/hooks/component/useSyncConfirm';
   import { getBoundingClientRect } from '/@/utils/domUtils';
   import configurationSrc from '/@/assets/icons/configuration.svg';
   import { cloneDeep } from 'lodash';
   import { usePermission } from '/@/hooks/web/usePermission';
   import { useGlobSetting } from '/@/hooks/setting';
+  import { AuthIcon } from '/@/components/Widget';
+  import AuthDropDown from '/@/components/Widget/AuthDropDown.vue';
 
   const listColumn = ref(5);
 
@@ -136,10 +130,8 @@
     window.open(`${configurationPrefix}/${isDev ? '?dev=1&' : '?'}configurationId=${record!.id}`);
   };
 
-  const { createSyncConfirm } = useSyncConfirm();
   const handleDelete = async (record: ConfigurationCenterItemsModal) => {
     try {
-      await createSyncConfirm({ iconType: 'warning', content: '是否确认删除操作?' });
       await deleteConfigurationCenter([record.id]);
       createMessage.success('删除成功');
       await getListData();
@@ -227,20 +219,44 @@
               </template>
               <template class="ant-card-actions" #actions>
                 <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)"
                   />
                 </Tooltip>
                 <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)"
                   />
                 </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="[
                     {
                       text: '编辑',
@@ -261,7 +277,7 @@
                   :trigger="['hover']"
                 >
                   <EllipsisOutlined key="ellipsis" />
-                </Dropdown>
+                </Dropdown> -->
               </template>
               <Card.Meta>
                 <template #title>

@@ -80,6 +80,9 @@ export const step1Schemas: FormSchema[] = [
             gatewayId: null,
           });
         },
+        showSearch: true,
+        filterOption: (inputValue: string, option: Record<'label' | 'value', string>) =>
+          option.label.includes(inputValue),
       };
     },
   },
@@ -399,6 +402,7 @@ export const step2Schemas: FormSchema[] = [
     field: 'credentialsId',
     required: true,
     ifShow: false,
+    slot: 'credentialsId',
     componentProps: {
       maxLength: 36,
       placeholder: '请输入访问令牌',
@@ -421,6 +425,7 @@ export const step2Schemas: FormSchema[] = [
     field: 'clientId',
     required: true,
     ifShow: false,
+    slot: 'clientId',
     componentProps: {
       maxLength: 36,
       placeholder: '请输入客户端ID',
@@ -597,6 +602,7 @@ export const TokenSchemas: FormSchema[] = [
     field: 'credentialsId',
     required: true,
     ifShow: false,
+    slot: 'credentialsId',
     componentProps: {
       maxLength: 36,
       placeholder: '请输入访问令牌',

@@ -90,6 +90,7 @@ export const searchFormSchema: FormSchema[] = [
         { label: '直连设备', value: DeviceTypeEnum.DIRECT_CONNECTION },
         { label: '网关子设备', value: DeviceTypeEnum.SENSOR },
       ],
+      placeholder: '请选择设备类型',
     },
     colProps: { span: 6 },
   },
@@ -103,13 +104,14 @@ export const searchFormSchema: FormSchema[] = [
         { label: '在线', value: DeviceState.ONLINE },
         { label: '离线', value: DeviceState.OFFLINE },
       ],
+      placeholder: '请选择设备状态',
     },
     colProps: { span: 6 },
   },
   {
     field: 'deviceProfileId',
     label: '产品',
-    component: 'ApiSearchSelect',
+    component: 'ApiSelect',
     colProps: { span: 6 },
     componentProps: () => {
       return {
@@ -118,26 +120,9 @@ export const searchFormSchema: FormSchema[] = [
         valueField: 'id',
         resultField: 'data',
         placeholder: '请选择产品',
-        api: async () => {
-          const data = await deviceProfile({ params: '' });
-          const returnData = data.map((m) => {
-            return {
-              name: m.name,
-              id: m.id,
-            };
-          });
-          return returnData;
-        },
-        searchApi: async (params: Recordable) => {
-          const data = await deviceProfile({ textSearch: params.text });
-          const returnData = data.map((m) => {
-            return {
-              name: m.name,
-              id: m.id,
-            };
-          });
-          return returnData;
-        },
+        api: deviceProfile,
+        filterOption: (inputValue: string, option: Record<'label' | 'value', string>) =>
+          option.label.includes(inputValue),
       };
     },
   },

@@ -16,7 +16,7 @@
           @open-gateway-device="handleOpenGatewayDevice"
         />
       </TabPane>
-      <TabPane key="modelOfMatter" tab="物模型">
+      <TabPane key="modelOfMatter" tab="物模型数据">
         <ModelOfMatter :deviceDetail="deviceDetail" />
       </TabPane>
       <!-- <TabPane key="2" tab="实时数据" v-if="deviceDetail?.deviceType !== 'GATEWAY'">

@@ -12,7 +12,17 @@
       <template #clientId="{ field, model }">
         <div class="flex items-center">
           <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>
       </template>
     </BasicForm>
@@ -26,8 +36,8 @@
   import { TokenSchemas, credentialTypeEnum } from '../../config/data';
   import { saveDeviceToken } from '/@/api/device/deviceManager';
   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';
   export default defineComponent({
     components: {
@@ -35,6 +45,7 @@
       BasicForm,
       Input,
       ReloadOutlined,
+      Tooltip,
     },
     emits: ['register'],
     setup() {
@@ -224,6 +235,10 @@
       const handleCreateUUID = () => {
         setFieldsValue({ clientId: buildUUID() });
       };
+
+      const handleCreateCredentialsId = () => {
+        setFieldsValue({ credentialsId: randomString() });
+      };
       return {
         registerModal,
         registerForm,
@@ -231,6 +246,7 @@
         handleCancel,
         handleOk,
         handleCreateUUID,
+        handleCreateCredentialsId,
       };
     },
   });

@@ -4,6 +4,30 @@
       <template #addAgree="{ model, field }">
         <Checkbox v-model:checked="model[field]" @change="checkedChange">添加协议</Checkbox>
       </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>
     <div>
       <a-button @click="prevStep">上一步</a-button>
@@ -13,13 +37,18 @@
 <script lang="ts">
   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 { step2Schemas } from '../../config/data';
+  import { Icon } from '/@/components/Icon';
+  import { buildUUID, randomString } from '/@/utils/uuid';
   export default defineComponent({
     components: {
       BasicForm,
       Checkbox,
+      Input,
+      Icon,
+      Tooltip,
     },
 
     emits: ['prev', 'next'],
@@ -105,6 +134,14 @@
         validate();
       }
 
+      const handleGenerateClientId = () => {
+        setFieldsValue({ clientId: buildUUID() });
+      };
+
+      const handleGenerateCredentialsId = () => {
+        setFieldsValue({ credentialsId: randomString() });
+      };
+
       return {
         prevStep,
         registerForm,
@@ -113,6 +150,8 @@
         validate,
         resetFieldsValueAndStatus,
         validateStep2Method,
+        handleGenerateClientId,
+        handleGenerateCredentialsId,
       };
     },
   });

@@ -55,15 +55,23 @@
       <a-button type="primary" class="mr-4" @click="manageDeviceToken">管理设备凭证</a-button>
       <ManageDeviceTokenModal @register="registerModal" />
     </div>
-    <div v-if="deviceDetail?.deviceInfo?.address" class="mt-4">
+    <div class="mt-4">
       <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>
 </template>
 <script lang="ts">
   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 { useAsyncScript } from '/@/hooks/web/useAsyncScript';
   import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
@@ -78,6 +86,8 @@
 
   import wz from '/@/assets/images/wz.png';
   import { useAsyncQueue } from '../../../localtion/useAsyncQueue';
+  import locationImage from '/@/assets/icons/location.svg';
+
   export default defineComponent({
     components: {
       Image,
@@ -86,6 +96,7 @@
       QuestionCircleOutlined,
       BasicModal,
       Tooltip,
+      Empty,
     },
     props: {
       deviceDetail: {
@@ -197,6 +208,7 @@
         DeviceTypeEnum,
         copyTopic,
         remoteConnectiondGateway,
+        locationImage,
       };
     },
   });

@@ -286,7 +286,7 @@
             setTableData(items);
             const { setFieldsValue, resetFields } = getForm();
             setFieldsValue({
-              deviceProfileId: deviceProfileId.value,
+              deviceProfileId: deviceProfileId.value || null,
             });
             if (onCloseVal.value == 1) {
               resetFields();

@@ -2,9 +2,14 @@
   import { PageWrapper } from '/@/components/Page';
   import { BasicForm, useForm } from '/@/components/Form';
   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 { CardLayoutButton, EnumTableCardMode, ModeSwitchButton } from '/@/components/Widget';
+  import {
+    AuthIcon,
+    CardLayoutButton,
+    EnumTableCardMode,
+    ModeSwitchButton,
+  } from '/@/components/Widget';
   import { Authority } from '/@/components/Authority';
   import {
     deviceConfigDelete,
@@ -12,7 +17,6 @@
     setDeviceProfileIsDefaultApi,
   } from '/@/api/device/deviceConfigApi';
   import { ProfileRecord } from '/@/api/device/model/deviceConfigModel';
-  import { Dropdown } from '/@/components/Dropdown';
   import {
     defaultObj,
     searchFormSchema,
@@ -20,14 +24,13 @@
     ProductPermission,
   } from './device.profile.data';
   import { useMessage } from '/@/hooks/web/useMessage';
-  import { useSyncConfirm } from '/@/hooks/component/useSyncConfirm';
   import DeviceProfileModal from './DeviceProfileModal.vue';
   import DeviceProfileDrawer from './DeviceProfileDrawer.vue';
   import { useModal } from '/@/components/Modal';
   import { useDrawer } from '/@/components/Drawer';
   import productDefault from '/@/assets/icons/product-default.svg';
-  import { usePermission } from '/@/hooks/web/usePermission';
   import { useRoute } from 'vue-router';
+  import AuthDropDown from '/@/components/Widget/AuthDropDown.vue';
 
   defineProps<{
     mode: EnumTableCardMode;
@@ -42,7 +45,6 @@
   const IMAGE_FALLBACK = productDefault;
 
   const { createMessage } = useMessage();
-  const { createSyncConfirm } = useSyncConfirm();
 
   const [register, { getFieldsValue, setFieldsValue }] = useForm({
     showAdvancedButton: true,
@@ -72,7 +74,7 @@
 
   const dataSource = ref<ProfileRecord[]>([]);
 
-  const colNumber = ref(4);
+  const colNumber = ref(5);
 
   const getSelectAllFlag = computed(() => {
     return unref(dataSource).every((item) => item.checked);
@@ -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) => {
     emit('changeMode', mode);
   };
@@ -163,12 +131,10 @@
   };
 
   const handleShowDetail = (record: ProfileRecord) => {
-    if (!unref(getHasDetailFlag)) return;
     openDrawer(true, { record });
   };
 
   const handleUpdate = (record: ProfileRecord) => {
-    if (!unref(getHasUpdateFlag)) return;
     openModal(true, {
       record,
       isUpdate: true,
@@ -177,7 +143,6 @@
 
   const handleDelete = async (id: string[]) => {
     try {
-      await createSyncConfirm({ iconType: 'warning', content: '是否确认删除操作?' });
       await deviceConfigDelete(id);
       createMessage.success('删除成功');
       await getDataSource();
@@ -268,22 +233,43 @@
               </template>
               <template class="ant-card-actions" #actions>
                 <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)"
                   />
                 </Tooltip>
                 <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)"
                   />
                 </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>
               <Card.Meta>
                 <template #title>
@@ -308,7 +294,10 @@
 
 <style lang="less" scoped>
   .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>

@@ -28,10 +28,13 @@
         field: 'scriptName',
         label: '转换脚本',
         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: '默认配置',
     dataIndex: 'default',
     width: 80,
-    format: (text) => (text ? '是' : '否'),
+    customRender: ({ text }) =>
+      text ? h(Tag, { color: 'blue' }, () => '是') : h(Tag, { color: 'red' }, () => '否'),
   },
   {
     title: '描述',
     dataIndex: 'description',
     width: 90,
+    ellipsis: true,
   },
   {
     title: '创建时间',

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

@@ -16,6 +16,14 @@
         <TableAction
           :actions="[
             {
+              label: '进入',
+              icon: 'ant-design:login-outlined',
+              tooltip: '以租户管理员身份登录',
+              onClick: handleLoginTenantAdmin.bind(null, record),
+            },
+          ]"
+          :drop-down-actions="[
+            {
               label: '短信通知',
               icon: 'ant-design:send-outlined',
               tooltip: '发送通知短信',
@@ -94,6 +102,12 @@
   import { MessageTypeEnum, SendResetPasswordEmailMsg } from '/@/api/tenant/tenantInfo';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { Authority } from '/@/components/Authority';
+  import { getMyInfo, getPermCode, getUserToken } from '/@/api/sys/user';
+  import { useUserStore } from '/@/store/modules/user';
+  import { usePermissionStore } from '/@/store/modules/permission';
+  import { RoleEnum } from '/@/enums/roleEnum';
+  import { useGo } from '/@/hooks/web/usePage';
+  import { PageEnum } from '/@/enums/pageEnum';
 
   export default defineComponent({
     name: 'TenantAdminDrawer',
@@ -198,10 +212,15 @@
           fixed: 'right',
         },
       });
+
+      let firstEnterFlag = true;
       //默认传递页面数据
       const [tenantAdminDrawer, { closeDrawer }] = useDrawerInner(async (data) => {
         tenantId.value = data.record.tenantId;
-        reload();
+        !firstEnterFlag && reload();
+        if (firstEnterFlag) {
+          firstEnterFlag = false;
+        }
       });
 
       //提交按钮
@@ -213,6 +232,24 @@
         reload();
       }
 
+      const userStore = useUserStore();
+      const permissionStore = usePermissionStore();
+      const go = useGo();
+      async function handleLoginTenantAdmin(record: { tbUser: string; id: string }) {
+        try {
+          const { token, refreshToken } = await getUserToken(record.id);
+          userStore.storeToken(token, refreshToken);
+          const userInfo = await getMyInfo();
+          const permissionList = await getPermCode();
+          permissionStore.setPermCodeList(permissionList);
+          userStore.setUserInfo(userInfo);
+          userStore.setRoleList(userInfo.roles as RoleEnum[]);
+          go(PageEnum.BASE_HOME);
+        } catch (error) {
+        } finally {
+        }
+      }
+
       return {
         tenantAdminDrawer,
         handleCreateTenantAdmin,
@@ -225,6 +262,7 @@
         handleDelete,
         handleResetPassword,
         handleSendMsg,
+        handleLoginTenantAdmin,
       };
     },
   });

@@ -72,7 +72,9 @@
         >
           <Tooltip :title="item.deviceName" placement="topLeft">
             <div class="flex p-1">
-              <div class="truncate font-bold">{{ item.deviceRename || item.deviceName }}</div>
+              <div v-if="item.componentInfo.showDeviceName" class="truncate font-bold">
+                {{ item.deviceRename || item.deviceName }}
+              </div>
             </div>
           </Tooltip>
         </div>

@@ -33,7 +33,7 @@
     return decode((ROUTE.params as DataComponentRouteParams).boardId as string);
   });
 
-  const frontId = ref(FrontComponent.TEXT_COMPONENT_1);
+  const frontId = ref();
 
   const isEdit = ref(false);
 
@@ -48,6 +48,7 @@
   const [register, { closeModal, changeOkLoading }] = useModalInner(
     (data: { isEdit: boolean; record?: DataBoardLayoutInfo }) => {
       componentRecord.value = data.record || ({} as unknown as DataBoardLayoutInfo);
+      if (!unref(isEdit)) frontId.value = FrontComponent.TEXT_COMPONENT_1;
       frontId.value =
         (data.record?.record?.frontId as FrontComponent) || FrontComponent.TEXT_COMPONENT_1;
       isEdit.value = data.isEdit || false;

 <script lang="ts" setup>
-  import { ref, onMounted, unref } from 'vue';
+  import { ref, onMounted, unref, computed } from 'vue';
   import { FrontComponent } from '../../../const/const';
   import { DataSourceField, dataSourceSchema } from '../../config/basicConfiguration';
   import { DeviceTypeEnum } from '/@/api/device/model/deviceModel';
@@ -7,12 +7,18 @@
   import BasicForm from '/@/components/Form/src/BasicForm.vue';
   const formEl = ref<Nullable<FormActionType>>(null);
 
-  defineProps<{
+  const props = defineProps<{
     frontId?: FrontComponent;
   }>();
 
   defineExpose({ formActionType: formEl });
 
+  const getDataSchema = computed(() => {
+    const { frontId } = props;
+    if (!frontId) return [];
+    return dataSourceSchema(frontId);
+  });
+
   onMounted(() => {
     unref(formEl)?.setFieldsValue({ [DataSourceField.DEVICE_TYPE]: DeviceTypeEnum.SENSOR });
   });
@@ -21,7 +27,7 @@
 <template>
   <BasicForm
     ref="formEl"
-    :schemas="dataSourceSchema($props.frontId)"
+    :schemas="getDataSchema"
     class="w-full flex-1 data-source-form"
     :show-action-button-group="false"
     :row-props="{

@@ -61,6 +61,7 @@
       icon: value.icon || null,
       iconColor: value.iconColor || null,
       unit: value.unit || null,
+      showDeviceName: value.showDeviceName,
       gradientInfo: [
         { key: Gradient.FIRST, value: value.firstPhaseValue, color: value.firstPhaseColor },
         { key: Gradient.SECOND, value: value.secondPhaseValue, color: value.secondPhaseColor },

@@ -149,6 +149,7 @@ export const dataSourceSchema = (frontId?: FrontComponent): FormSchema[] => {
         const { setFieldsValue } = formActionType;
         const deviceProfileId = formModel[DataSourceField.DEVICE_PROFILE_ID];
         const deviceType = formModel[DataSourceField.DEVICE_TYPE];
+        if (![deviceType, deviceProfileId].every(Boolean)) return {};
         return {
           api: async () => {
             if (!deviceType) return [];
@@ -253,6 +254,7 @@ export const dataSourceSchema = (frontId?: FrontComponent): FormSchema[] => {
       componentProps({ formModel }) {
         const deviceProfileId = formModel[DataSourceField.DEVICE_PROFILE_ID];
         const transportType = formModel[DataSourceField.TRANSPORT_TYPE];
+        if (![deviceProfileId, transportType].every(Boolean)) return {};
         return {
           api: async () => {
             try {

@@ -12,6 +12,7 @@ export interface VisualOptionParams {
   [visualOptionField.FIRST_PHASE_VALUE]: string;
   [visualOptionField.SECOND_PHASE_VALUE]: string;
   [visualOptionField.THIRD_PHASE_VALUE]: string;
+  [visualOptionField.SHOW_DEVICE_NAME]: string;
 }
 
 export enum visualOptionField {
@@ -25,6 +26,7 @@ export enum visualOptionField {
   FIRST_PHASE_VALUE = 'firstPhaseValue',
   SECOND_PHASE_VALUE = 'secondPhaseValue',
   THIRD_PHASE_VALUE = 'thirdPhaseValue',
+  SHOW_DEVICE_NAME = 'showDeviceName',
 }
 
 export const modeOne: FormSchema[] = [
@@ -37,6 +39,11 @@ export const modeOne: FormSchema[] = [
       defaultValue: '#000',
     },
   },
+  {
+    field: visualOptionField.SHOW_DEVICE_NAME,
+    label: '显示设备名称',
+    component: 'Checkbox',
+  },
 ];
 
 export const modeTwo: FormSchema[] = [
@@ -78,6 +85,11 @@ export const modeTwo: FormSchema[] = [
       };
     },
   },
+  {
+    field: visualOptionField.SHOW_DEVICE_NAME,
+    label: '显示设备名称',
+    component: 'Checkbox',
+  },
 ];
 
 export const modeThree: FormSchema[] = [
@@ -156,6 +168,11 @@ export const modeThree: FormSchema[] = [
       };
     },
   },
+  {
+    field: visualOptionField.SHOW_DEVICE_NAME,
+    label: '显示设备名称',
+    component: 'Checkbox',
+  },
 ];
 
 export const modeFour: FormSchema[] = [
@@ -176,6 +193,11 @@ export const modeFour: FormSchema[] = [
       placeholder: '请输入数值单位',
     },
   },
+  {
+    field: visualOptionField.SHOW_DEVICE_NAME,
+    label: '显示设备名称',
+    component: 'Checkbox',
+  },
 ];
 
 export const modeFive: FormSchema[] = [
@@ -209,6 +231,11 @@ export const modeFive: FormSchema[] = [
       };
     },
   },
+  {
+    field: visualOptionField.SHOW_DEVICE_NAME,
+    label: '显示设备名称',
+    component: 'Checkbox',
+  },
 ];
 
 export const schemasMap = new Map<FrontComponent, FormSchema[]>();