feat: device list manage device certificate add refresh client id

@@ -619,6 +619,7 @@ export const TokenSchemas: FormSchema[] = [
     field: 'clientId',
     required: true,
     ifShow: false,
+    slot: 'clientId',
     componentProps: {
       maxLength: 36,
       placeholder: '请输入客户端ID',

@@ -8,7 +8,14 @@
     centered
     :canFullscreen="false"
   >
-    <BasicForm @register="registerForm" />
+    <BasicForm @register="registerForm">
+      <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" />
+        </div>
+      </template>
+    </BasicForm>
   </BasicModal>
 </template>
 
@@ -19,10 +26,15 @@
   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 { ReloadOutlined } from '@ant-design/icons-vue';
   export default defineComponent({
     components: {
       BasicModal,
       BasicForm,
+      Input,
+      ReloadOutlined,
     },
     emits: ['register'],
     setup() {
@@ -36,7 +48,7 @@
         showSubmitButton: false,
         showResetButton: false,
         wrapperCol: {
-          span: 12,
+          span: 16,
         },
       });
       const [registerModal, { closeModal }] = useModalInner(async (data) => {
@@ -208,12 +220,17 @@
           })
           .catch(() => {});
       };
+
+      const handleCreateUUID = () => {
+        setFieldsValue({ clientId: buildUUID() });
+      };
       return {
         registerModal,
         registerForm,
         checkedChange,
         handleCancel,
         handleOk,
+        handleCreateUUID,
       };
     },
   });