feat: 客户端管理 随机secret

src/utils/uuid.ts

@@ -0,0 +1,28 @@
+const hexList: string[] = [];
+for (let i = 0; i <= 15; i++) {
+  hexList[i] = i.toString(16);
+}
+
+export function buildUUID(): string {
+  let uuid = '';
+  for (let i = 1; i <= 36; i++) {
+    if (i === 9 || i === 14 || i === 19 || i === 24) {
+      uuid += '-';
+    } else if (i === 15) {
+      uuid += 4;
+    } else if (i === 20) {
+      uuid += hexList[(Math.random() * 4) | 8];
+    } else {
+      uuid += hexList[(Math.random() * 16) | 0];
+    }
+  }
+  return uuid.replace(/-/g, '');
+}
+
+let unique = 0;
+export function buildShortUUID(prefix = ''): string {
+  const time = Date.now();
+  const random = Math.floor(Math.random() * 1000000000);
+  unique++;
+  return prefix + '_' + random + unique + String(time);
+}

src/views/system/client/SecretInput.vue

@@ -0,0 +1,41 @@
+<template>
+  <el-input v-model="secret" :disabled="disabled" placeholder="请输入密钥或随机生成">
+    <template v-if="!disabled" #append>
+      <el-button id="refresh-secret" type="primary" @click="refreshSecret">随机生成</el-button>
+    </template>
+  </el-input>
+</template>
+
+<script setup lang="ts">
+import { buildUUID } from '@/utils/uuid';
+
+const secret = defineModel('secret', {
+  type: String,
+  required: true
+});
+
+defineProps({
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+});
+
+function refreshSecret() {
+  secret.value = buildUUID();
+}
+
+/**
+ * 万一要在每次新增时打开Drawer刷新
+ * 需要调用实例方法
+ */
+defineExpose({ refreshSecret });
+</script>
+
+<style lang="scss" scoped>
+:deep(.el-input-group__append button.el-button) {
+  background-color: var(--el-button-bg-color);
+  border-color: var(--el-button-bg-color);
+  color: initial;
+}
+</style>

src/views/system/client/index.vue

@@ -89,7 +89,7 @@
           <el-input v-model="form.clientKey" :disabled="form.id != null" placeholder="请输入客户端key" />
         </el-form-item>
         <el-form-item label="客户端秘钥" prop="clientSecret">
-          <el-input v-model="form.clientSecret" :disabled="form.id != null" placeholder="请输入客户端秘钥" />
+          <SecretInput v-model:secret="form.clientSecret" :disabled="form.id != null" />
         </el-form-item>
         <el-form-item label="授权类型" prop="grantTypeList">
           <el-select v-model="form.grantTypeList" multiple placeholder="请输入授权类型">
@@ -144,6 +144,7 @@
 <script setup name="Client" lang="ts">
 import { listClient, getClient, delClient, addClient, updateClient, changeStatus } from '@/api/system/client';
 import { ClientVO, ClientQuery, ClientForm } from '@/api/system/client/types';
+import SecretInput from './SecretInput.vue';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const { sys_normal_disable } = toRefs<any>(proxy?.useDict('sys_normal_disable'));