perf: manage device certificate auth token add refresh button

@@ -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('');
+}

@@ -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: '请输入访问令牌',
@@ -598,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: '请输入访问令牌',

@@ -17,6 +17,14 @@
           </Tooltip>
           </Tooltip>
         </div>
         </div>
       </template>
       </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>
     </BasicForm>
   </BasicModal>
   </BasicModal>
 </template>
 </template>
@@ -29,7 +37,7 @@
   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, Tooltip } from 'ant-design-vue';
   import { Input, Tooltip } from 'ant-design-vue';
-  import { buildUUID } from '/@/utils/uuid';
+  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: {
@@ -227,6 +235,10 @@
       const handleCreateUUID = () => {
       const handleCreateUUID = () => {
         setFieldsValue({ clientId: buildUUID() });
         setFieldsValue({ clientId: buildUUID() });
       };
       };
+
+      const handleCreateCredentialsId = () => {
+        setFieldsValue({ credentialsId: randomString() });
+      };
       return {
       return {
         registerModal,
         registerModal,
         registerForm,
         registerForm,
@@ -234,6 +246,7 @@
         handleCancel,
         handleCancel,
         handleOk,
         handleOk,
         handleCreateUUID,
         handleCreateUUID,
+        handleCreateCredentialsId,
       };
       };
     },
     },
   });
   });

@@ -16,6 +16,18 @@
           </Tooltip>
           </Tooltip>
         </div>
         </div>
       </template>
       </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>
@@ -29,7 +41,7 @@
   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 { Icon } from '/@/components/Icon';
-  import { buildUUID } from '/@/utils/uuid';
+  import { buildUUID, randomString } from '/@/utils/uuid';
   export default defineComponent({
   export default defineComponent({
     components: {
     components: {
       BasicForm,
       BasicForm,
@@ -126,6 +138,10 @@
         setFieldsValue({ clientId: buildUUID() });
         setFieldsValue({ clientId: buildUUID() });
       };
       };
 
 
+      const handleGenerateCredentialsId = () => {
+        setFieldsValue({ credentialsId: randomString() });
+      };
+
       return {
       return {
         prevStep,
         prevStep,
         registerForm,
         registerForm,
@@ -135,6 +151,7 @@
         resetFieldsValueAndStatus,
         resetFieldsValueAndStatus,
         validateStep2Method,
         validateStep2Method,
         handleGenerateClientId,
         handleGenerateClientId,
+        handleGenerateCredentialsId,
       };
       };
     },
     },
   });
   });

@@ -63,7 +63,7 @@
       <Empty
       <Empty
         v-if="!deviceDetail?.deviceInfo?.address"
         v-if="!deviceDetail?.deviceInfo?.address"
         :image="locationImage"
         :image="locationImage"
-        imageStyle="display: flex; justify-content: center; height: 150px;"
+        :imageStyle="{ display: 'flex', 'justify-content': 'center', height: '150px' }"
         description="请添加设备地理位置"
         description="请添加设备地理位置"
       />
       />
     </div>
     </div>