Merge branch 'dev-fix-ww' into 'main_dev'

fix: 修复teambation BUG

See merge request yunteng/thingskit-front!554

@@ -3,24 +3,32 @@ import { Rule } from '/@/components/Form';
 export { default as JSONEditor } from './index.vue';
 export { default as JSONEditor } from './index.vue';
 
 
 export const parseStringToJSON = <T = Recordable>(value: string) => {
 export const parseStringToJSON = <T = Recordable>(value: string) => {
+  let valid = false;
   try {
   try {
     const json = JSON.parse(value) as T;
     const json = JSON.parse(value) as T;
-    return { json, valid: true };
+    typeof json === 'object' ? (valid = true) : (valid = false);
+    return { json, valid };
   } catch (error) {
   } catch (error) {
-    return { json: null, valid: false };
+    return { json: null, valid };
   }
   }
 };
 };
 
 
-export const JSONEditorValidator = (message = 'json格式校验失败'): Rule[] => {
+export const JSONEditorValidator = (
+  message = 'JSON格式校验失败',
+  noEmpty = false,
+  emptyMessage = 'JSON不能为空对象'
+): Rule[] => {
   return [
   return [
     {
     {
       validateTrigger: 'blur',
       validateTrigger: 'blur',
       validator(_rule: Rule, value: any, _callback: Fn) {
       validator(_rule: Rule, value: any, _callback: Fn) {
-        const { valid } = parseStringToJSON(value);
+        const { valid, json } = parseStringToJSON(value);
         if (valid) {
         if (valid) {
+          if (noEmpty && json && !Object.keys(json).length) return Promise.reject(emptyMessage);
           return Promise.resolve();
           return Promise.resolve();
+        } else {
+          return Promise.reject(message);
         }
         }
-        return Promise.reject(message);
       },
       },
     },
     },
   ];
   ];

@@ -18,6 +18,7 @@
     defineProps<{
     defineProps<{
       value?: string;
       value?: string;
       options?: JSONEditorOptions;
       options?: JSONEditorOptions;
+      height?: number;
     }>(),
     }>(),
     {
     {
       options: () =>
       options: () =>
@@ -26,6 +27,7 @@
           mainMenuBar: false,
           mainMenuBar: false,
           statusBar: false,
           statusBar: false,
         } as JSONEditorOptions),
         } as JSONEditorOptions),
+      height: 150,
     }
     }
   );
   );
 
 
@@ -106,7 +108,7 @@
 </script>
 </script>
 
 
 <template>
 <template>
-  <div class="p-2 bg-gray-200">
+  <div class="p-2 bg-gray-200" :style="{ height: `${height - 16}px` }">
     <div ref="jsonEditorElRef" class="jsoneditor"></div>
     <div ref="jsonEditorElRef" class="jsoneditor"></div>
   </div>
   </div>
 </template>
 </template>

 <script setup lang="ts">
 <script setup lang="ts">
   import { List, Card, Button, PaginationProps, Tooltip } from 'ant-design-vue';
   import { List, Card, Button, PaginationProps, Tooltip } from 'ant-design-vue';
   import { ReloadOutlined } from '@ant-design/icons-vue';
   import { ReloadOutlined } from '@ant-design/icons-vue';
-  import { 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 {
     bigScreenCancelPublish,
     bigScreenCancelPublish,
@@ -30,6 +30,8 @@
   import { ViewTypeNameEnum } from '../common/ShareModal/config';
   import { ViewTypeNameEnum } from '../common/ShareModal/config';
   import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
   import { useCopyToClipboard } from '/@/hooks/web/useCopyToClipboard';
   import { ViewType } from '../visual/board/config/panelDetail';
   import { ViewType } from '../visual/board/config/panelDetail';
+  import { useUserStore } from '/@/store/modules/user';
+  import { RoleEnum } from '/@/enums/roleEnum';
 
 
   const listColumn = ref(5);
   const listColumn = ref(5);
 
 
@@ -173,6 +175,11 @@
     return `${origin}${largeDesignerPrefix}/#/share/preview/${record.id}/${record.publicId}`;
     return `${origin}${largeDesignerPrefix}/#/share/preview/${record.id}/${record.publicId}`;
   };
   };
 
 
+  const userStore = useUserStore();
+  const hasPublicInterfacePermission = computed(() => {
+    return userStore.getUserInfo.roles![0] !== RoleEnum.CUSTOMER_USER;
+  });
+
   const { clipboardRef, isSuccessRef } = useCopyToClipboard();
   const { clipboardRef, isSuccessRef } = useCopyToClipboard();
   const handleCreateShareUrl = (record: BigScreenCenterItemsModel) => {
   const handleCreateShareUrl = (record: BigScreenCenterItemsModel) => {
     clipboardRef.value = createShareUrl(record);
     clipboardRef.value = createShareUrl(record);
@@ -214,7 +221,7 @@
             <Authority :value="ConfigurationPermission.CREATE">
             <Authority :value="ConfigurationPermission.CREATE">
               <Button type="primary" @click="handleCreateOrUpdate()">新增大屏</Button>
               <Button type="primary" @click="handleCreateOrUpdate()">新增大屏</Button>
             </Authority>
             </Authority>
-            <Authority :value="ConfigurationPermission.CREATE">
+            <Authority v-if="hasPublicInterfacePermission" :value="ConfigurationPermission.CREATE">
               <Button type="primary" @click="handleCreateOrUpdatePublicApi()">公共接口管理</Button>
               <Button type="primary" @click="handleCreateOrUpdatePublicApi()">公共接口管理</Button>
             </Authority>
             </Authority>
             <CardLayoutButton v-model:value="listColumn" @change="handleCardLayoutChange" />
             <CardLayoutButton v-model:value="listColumn" @change="handleCardLayoutChange" />

-import { FormSchema } from '/@/components/Form';
+import { FormSchema, useComponentRegister } from '/@/components/Form';
 import { findDictItemByCode } from '/@/api/system/dict';
 import { findDictItemByCode } from '/@/api/system/dict';
 import { deviceProfile, getGatewayDevice } from '/@/api/device/deviceManager';
 import { deviceProfile, getGatewayDevice } from '/@/api/device/deviceManager';
 import { TransportTypeEnum } from '../../profiles/components/TransportDescript/const';
 import { TransportTypeEnum } from '../../profiles/components/TransportDescript/const';
+import { JSONEditorValidator } from '/@/components/CodeEditor/src/JSONEditor';
+import { JSONEditor } from '/@/components/CodeEditor';
+useComponentRegister('JSONEditor', JSONEditor);
 
 
 export enum TypeEnum {
 export enum TypeEnum {
   IS_GATEWAY = 'GATEWAY',
   IS_GATEWAY = 'GATEWAY',
@@ -751,6 +754,7 @@ export const CommandSchemas = (transportType: TransportTypeEnum): FormSchema[] =
           minRows: 6,
           minRows: 6,
         },
         },
       },
       },
+      colProps: { span: 20 },
       dynamicRules: () => {
       dynamicRules: () => {
         return [
         return [
           {
           {
@@ -770,11 +774,17 @@ export const CommandSchemas = (transportType: TransportTypeEnum): FormSchema[] =
     {
     {
       field: 'commandValue',
       field: 'commandValue',
       label: '请输入命令内容',
       label: '请输入命令内容',
-      slot: 'commandSlot',
-      component: 'InputTextArea',
-      show: ({ model }) => {
+      component: 'JSONEditor',
+      colProps: { span: 20 },
+      changeEvent: 'update:value',
+      valueField: 'value',
+      rules: [...JSONEditorValidator()],
+      ifShow: ({ model }) => {
         return model['valueType'] === 'json';
         return model['valueType'] === 'json';
       },
       },
+      componentProps: {
+        height: 250,
+      },
     },
     },
   ];
   ];
 };
 };

 <template>
 <template>
-  <div style="background-color: #f0f2f5">
+  <div class="bg-neutral-100 dark:text-gray-300 dark:bg-dark-700">
     <BasicTable @register="registerTable">
     <BasicTable @register="registerTable">
       <template #action="{ record }">
       <template #action="{ record }">
         <TableAction
         <TableAction

 <template>
 <template>
-  <div style="background-color: #f0f2f5">
+  <div class="bg-neutral-100 dark:text-gray-300 dark:bg-dark-700">
     <BasicTable @register="registerTable">
     <BasicTable @register="registerTable">
       <template #tbDeviceName="{ record }">
       <template #tbDeviceName="{ record }">
         <div style="color: #619eff" class="cursor-pointer" @click="handleGetTbDeviceId(record)">
         <div style="color: #619eff" class="cursor-pointer" @click="handleGetTbDeviceId(record)">

 <template>
 <template>
   <div class="tabs-detail">
   <div class="tabs-detail">
-    <div class="mt-4">
-      <BasicForm @register="registerForm">
-        <template #commandSlot>
-          <div class="flex">
-            <div ref="jsoneditorRef" style="height: 100%; width: 100%"></div>
-            <a-button style="margin: -5px 0" type="text" @click="handlePremitter">格式化</a-button>
-            <Tooltip title='{"method":"methodThingskit","params":{"pin":7,"value":1}}' class="ml-2">
-              <QuestionCircleOutlined style="font-size: 1rem" />
-            </Tooltip>
-          </div>
-        </template>
-      </BasicForm>
-      <Space class="w-full justify-end" justify="end">
-        <Button :disabled="disable" type="primary" @click="handleOk" class="mr-2">确定</Button>
+    <div>
+      <BasicForm @register="registerForm" />
+      <Space class="w-full justify-end py-2" justify="end">
+        <Button :loading="loading" type="primary" @click="handleOk" class="mr-2">确定</Button>
         <Button type="default" @click="handleCancel" class="mr-2">重置</Button>
         <Button type="default" @click="handleCancel" class="mr-2">重置</Button>
       </Space>
       </Space>
     </div>
     </div>
   </div>
   </div>
 </template>
 </template>
 <script lang="ts">
 <script lang="ts">
-  import { defineComponent, ref, onMounted, unref, nextTick } from 'vue';
+  import { defineComponent, ref } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form';
   import { BasicForm, useForm } from '/@/components/Form';
   import { CommandSchemas } from '../../config/data';
   import { CommandSchemas } from '../../config/data';
   import { commandIssuanceApi } from '/@/api/device/deviceManager';
   import { commandIssuanceApi } from '/@/api/device/deviceManager';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { useMessage } from '/@/hooks/web/useMessage';
   import { Button } from '/@/components/Button';
   import { Button } from '/@/components/Button';
-  import jsoneditor from 'jsoneditor';
-  import 'jsoneditor/dist/jsoneditor.min.css';
-  import { QuestionCircleOutlined } from '@ant-design/icons-vue';
-  import { Space, Tooltip } from 'ant-design-vue';
+  import { Space } from 'ant-design-vue';
   import { DeviceRecord } from '/@/api/device/model/deviceModel';
   import { DeviceRecord } from '/@/api/device/model/deviceModel';
   import { TransportTypeEnum } from '../../../profiles/components/TransportDescript/const';
   import { TransportTypeEnum } from '../../../profiles/components/TransportDescript/const';
-
-  interface CommandParams {
-    additionalInfo: Recordable;
-    cmdType: string;
-    method: string;
-    params: string | Recordable;
-    persistent: boolean;
-  }
+  import { parseStringToJSON } from '/@/components/CodeEditor/src/JSONEditor';
 
 
   export default defineComponent({
   export default defineComponent({
-    components: { BasicForm, Button, QuestionCircleOutlined, Tooltip, Space },
+    components: { BasicForm, Button, Space },
     props: {
     props: {
       deviceDetail: {
       deviceDetail: {
         type: Object as PropType<DeviceRecord>,
         type: Object as PropType<DeviceRecord>,
@@ -52,8 +32,7 @@
     emits: ['register'],
     emits: ['register'],
     setup(props) {
     setup(props) {
       const { createMessage } = useMessage();
       const { createMessage } = useMessage();
-      const jsonData = ref<CommandParams>({} as unknown as CommandParams);
-      const disable = ref(false);
+      const loading = ref(false);
 
 
       const [registerForm, { getFieldsValue, validate, resetFields }] = useForm({
       const [registerForm, { getFieldsValue, validate, resetFields }] = useForm({
         labelWidth: 120,
         labelWidth: 120,
@@ -63,78 +42,35 @@
         labelAlign: 'right',
         labelAlign: 'right',
         showSubmitButton: false,
         showSubmitButton: false,
         showResetButton: false,
         showResetButton: false,
-        wrapperCol: {
-          span: 12,
-        },
       });
       });
-      // json 以及初始化JSON
-      const jsoneditorRef = ref();
-      const jsonValue = ref({});
-      const jsonInstance = ref();
-      onMounted(() => {
-        nextTick(() => {
-          let options = {
-            mode: 'code',
-            mainMenuBar: false,
-            statusBar: false,
-          };
-          let editor = new jsoneditor(jsoneditorRef.value, options);
-          editor.set(jsonValue.value);
-          jsonInstance.value = editor;
-        });
-      });
-      const handlePremitter = () => {
-        const value = unref(jsonInstance).get();
-        if (!value) return;
-        return unref(jsonInstance).set(value);
-      };
+
       const handleCancel = () => {
       const handleCancel = () => {
         resetFields();
         resetFields();
-        unref(jsonInstance).set({});
       };
       };
+
       const handleOk = async () => {
       const handleOk = async () => {
-        disable.value = true;
+        loading.value = true;
         try {
         try {
           // 验证
           // 验证
           const valid = await validate();
           const valid = await validate();
           if (!valid) return;
           if (!valid) return;
           // 收集表单数据
           // 收集表单数据
           const field = getFieldsValue();
           const field = getFieldsValue();
-          let passStatus = false;
+          let command = {
+            persistent: true,
+            method: 'methodThingskit',
+            params: field.commandText,
+          };
           if (field.valueType === 'json') {
           if (field.valueType === 'json') {
-            const getJson = unref(jsonInstance).get();
-            if (Object.prototype.isPrototypeOf(getJson) && Object.keys(getJson).length === 0) {
-              createMessage.error('命令内容不能为空');
-              passStatus = true;
-            }
-            if (getJson === '') {
-              passStatus = true;
-              createMessage.error('命令内容不能为空');
-            }
-            jsonData.value.params = getJson;
-          } else {
-            jsonData.value.params = field.commandText;
-            if (!jsonData.value.params) {
-              createMessage.error('命令内容不能为空');
-              passStatus = true;
-            }
-            if (
-              jsonData.value.params == '""' ||
-              jsonData.value.params == "''" ||
-              jsonData.value.params == '“”'
-            ) {
-              createMessage.error('命令内容不能为空');
-              passStatus = true;
-            }
+            const { json } = parseStringToJSON(field.commandValue);
+            command.params = json;
           }
           }
-          jsonData.value.persistent = true;
-          jsonData.value.method = 'methodThingskit';
-          if (passStatus) return;
-          commandIssuanceApi(field.commandType, props.deviceDetail.tbDeviceId, jsonData.value)
+
+          commandIssuanceApi(field.commandType, props.deviceDetail.tbDeviceId, command)
             .then((res) => {
             .then((res) => {
               if (!res) return;
               if (!res) return;
               createMessage.success('命令下发成功');
               createMessage.success('命令下发成功');
-              disable.value = true;
+              loading.value = true;
               // 请求
               // 请求
               handleCancel();
               handleCancel();
             })
             })
@@ -146,25 +82,20 @@
             })
             })
             .finally(() => {
             .finally(() => {
               setTimeout(() => {
               setTimeout(() => {
-                disable.value = false;
+                loading.value = false;
               }, 300);
               }, 300);
             });
             });
         } catch (e) {
         } catch (e) {
+          throw e;
         } finally {
         } finally {
-          //这里捕获json插件的错误
-          disable.value = false;
+          loading.value = false;
         }
         }
       };
       };
       return {
       return {
         registerForm,
         registerForm,
         handleCancel,
         handleCancel,
         handleOk,
         handleOk,
-        disable,
-        jsonData,
-        jsoneditorRef,
-        jsonValue,
-        jsonInstance,
-        handlePremitter,
+        loading,
       };
       };
     },
     },
   });
   });

@@ -53,7 +53,7 @@
 </script>
 </script>
 
 
 <template>
 <template>
-  <BasicTable class="event-manage-table" @register="register">
+  <BasicTable class="bg-neutral-100 dark:text-gray-300 dark:bg-dark-700" @register="register">
     <template #outputParams="{ record }">
     <template #outputParams="{ record }">
       <span class="cursor-pointer text-blue-500" @click="handleViewDetail(record)">
       <span class="cursor-pointer text-blue-500" @click="handleViewDetail(record)">
         <EyeOutlined class="svg:text-blue-500" />
         <EyeOutlined class="svg:text-blue-500" />
@@ -65,9 +65,3 @@
     <Input.TextArea v-model:value="outputData" :autosize="true" />
     <Input.TextArea v-model:value="outputData" :autosize="true" />
   </BasicModal>
   </BasicModal>
 </template>
 </template>
-
-<style lang="less" scoped>
-  .event-manage-table {
-    background-color: #f0f2f5;
-  }
-</style>

@@ -230,15 +230,16 @@
 <template>
 <template>
   <PageWrapper
   <PageWrapper
     dense
     dense
-    content-class="flex flex-col bg-transparent p-4"
-    :content-style="{ backgroundColor: '#F0F2F5' }"
+    content-class="flex flex-col bg-transparent p-4 bg-neutral-100 dark:text-gray-300 dark:bg-dark-700"
   >
   >
-    <section class="flex flex-col justify-between w-full bg-light-50 pt-3 mb-4">
+    <section
+      class="flex flex-col justify-between w-full bg-light-50 pt-3 mb-4 dark:text-gray-300 dark:bg-dark-900"
+    >
       <div class="flex-auto">
       <div class="flex-auto">
         <BasicForm @register="registerForm" />
         <BasicForm @register="registerForm" />
       </div>
       </div>
     </section>
     </section>
-    <section class="bg-light-50">
+    <section class="bg-light-50 !dark:text-gray-300 !dark:bg-dark-900">
       <div
       <div
         v-show="mode === EnumTableCardMode.CARD"
         v-show="mode === EnumTableCardMode.CARD"
         class="flex h-70px items-center justify-end p-2"
         class="flex h-70px items-center justify-end p-2"

@@ -102,7 +102,9 @@
 </script>
 </script>
 
 
 <template>
 <template>
-  <PageWrapper class="bg-gray-100 device-task-list-container">
+  <PageWrapper
+    class="bg-neutral-100 dark:text-gray-300 dark:bg-dark-700 device-task-list-container"
+  >
     <section
     <section
       class="form-container bg-light-50 px-4 pt-4 mt-4 x dark:text-gray-300 dark:bg-dark-900"
       class="form-container bg-light-50 px-4 pt-4 mt-4 x dark:text-gray-300 dark:bg-dark-900"
     >
     >

 <template>
 <template>
-  <BasicTable class="command-record-table" @register="registerTable">
+  <BasicTable
+    class="bg-neutral-100 dark:text-gray-300 dark:bg-dark-700 p-4"
+    @register="registerTable"
+  >
     <template #toolbar>
     <template #toolbar>
       <Space>
       <Space>
         <Button type="primary" @click="openModal(true)">命令下发</Button>
         <Button type="primary" @click="openModal(true)">命令下发</Button>
@@ -21,11 +24,11 @@
 
 
   <BasicModal
   <BasicModal
     @register="registerCommandIssuanceModal"
     @register="registerCommandIssuanceModal"
-    width="600px"
+    width="700px"
     title="命令下发"
     title="命令下发"
     :showOkBtn="false"
     :showOkBtn="false"
     cancelText="关闭"
     cancelText="关闭"
-    :footer="h('div')"
+    :footer="null"
   >
   >
     <CommandIssuance :deviceDetail="deviceDetail" />
     <CommandIssuance :deviceDetail="deviceDetail" />
   </BasicModal>
   </BasicModal>
@@ -91,10 +94,3 @@
     commonModalInfo('响应内容', jsonParams);
     commonModalInfo('响应内容', jsonParams);
   };
   };
 </script>
 </script>
-
-<style lang="less" scoped>
-  .command-record-table {
-    background-color: #f0f2f5;
-    padding: 16px;
-  }
-</style>

@@ -151,7 +151,7 @@
     </Tabs>
     </Tabs>
     <template #footer>
     <template #footer>
       <div
       <div
-        class="absolute right-0 bottom-0 w-full border-t bg-light-50 border-t-gray-100 py-2 px-4 text-right"
+        class="absolute right-0 bottom-0 w-full border-t bg-light-50 dark:text-gray-300 dark:bg-dark-700 dark:border-t-gray-700 border-t-gray-100 py-2 px-4 text-right"
       >
       >
         <Button class="mr-2" @click="closeDrawer">取消</Button>
         <Button class="mr-2" @click="closeDrawer">取消</Button>
         <Authority :value="OtaPermissionKey.UPDATE">
         <Authority :value="OtaPermissionKey.UPDATE">

@@ -193,7 +193,11 @@
       const userStore = useUserStore();
       const userStore = useUserStore();
 
 
       const permissionStore = usePermissionStore();
       const permissionStore = usePermissionStore();
-      async function handleLoginCustomAdmin(record: { tbUser: string; id: string }) {
+      async function handleLoginCustomAdmin(record: {
+        tbUser: string;
+        id: string;
+        hasPassword: boolean;
+      }) {
         try {
         try {
           const { token, refreshToken } = await getUserToken(record.id);
           const { token, refreshToken } = await getUserToken(record.id);
           userStore.storeToken(token, refreshToken);
           userStore.storeToken(token, refreshToken);
@@ -208,7 +212,7 @@
           });
           });
           router.addRoute(PAGE_NOT_FOUND_ROUTE as unknown as RouteRecordRaw);
           router.addRoute(PAGE_NOT_FOUND_ROUTE as unknown as RouteRecordRaw);
           permissionStore.setDynamicAddedRoute(true);
           permissionStore.setDynamicAddedRoute(true);
-          go(PageEnum.BASE_HOME);
+          record.hasPassword ? go(PageEnum.BASE_HOME) : go(PageEnum.SYSTEM_PASSWORD);
         } catch (error) {
         } catch (error) {
         } finally {
         } finally {
         }
         }

@@ -161,18 +161,21 @@
             api: async () => {
             api: async () => {
               try {
               try {
                 if (!organizationId) return [];
                 if (!organizationId) return [];
-                return await getMeetTheConditionsDevice({
+                const result = await getMeetTheConditionsDevice({
                   deviceProfileId,
                   deviceProfileId,
                   deviceType,
                   deviceType,
                   organizationId,
                   organizationId,
                 });
                 });
+                return result.map((item) => ({
+                  ...item,
+                  value: item.tbDeviceId,
+                  label: item.alias || item.name,
+                }));
               } catch (error) {
               } catch (error) {
                 return [];
                 return [];
               }
               }
             },
             },
             mode: props.multiple ? 'multiple' : 'combobox',
             mode: props.multiple ? 'multiple' : 'combobox',
-            labelField: 'name',
-            valueField: 'tbDeviceId',
             placeholder: '请选择设备',
             placeholder: '请选择设备',
             maxTagCount: 3,
             maxTagCount: 3,
             maxTagTextLength: 4,
             maxTagTextLength: 4,

@@ -118,7 +118,7 @@
 <template>
 <template>
   <PageWrapper class="task-center-container">
   <PageWrapper class="task-center-container">
     <section
     <section
-      class="bg-light-50 flex p-4 justify-between items-center x dark:text-gray-300 dark:bg-dark-900"
+      class="bg-light-50 flex p-4 justify-between items-center dark:text-gray-300 dark:bg-dark-900"
     >
     >
       <div class="text-2xl">任务中心</div>
       <div class="text-2xl">任务中心</div>
       <Authority :value="PermissionEnum.CREATE">
       <Authority :value="PermissionEnum.CREATE">

@@ -333,7 +333,12 @@
     <h3 class="w-24 flex-shrink-0 text-right pr-2 my-4">选择数据源</h3>
     <h3 class="w-24 flex-shrink-0 text-right pr-2 my-4">选择数据源</h3>
 
 
     <section ref="formListEl">
     <section ref="formListEl">
-      <div v-for="item in dataSource" :data-id="item.id" :key="item.id" class="flex bg-light-50">
+      <div
+        v-for="item in dataSource"
+        :data-id="item.id"
+        :key="item.id"
+        class="flex bg-neutral-100 dark:text-gray-300 dark:bg-dark-700"
+      >
         <div class="w-24 text-right flex justify-end" style="flex: 0 0 96px"> 选择设备 </div>
         <div class="w-24 text-right flex justify-end" style="flex: 0 0 96px"> 选择设备 </div>
         <div class="pl-2 flex-auto">
         <div class="pl-2 flex-auto">
           <component
           <component