创建new api账号到获取令牌

src/api/console.js

@@ -27,3 +27,19 @@ export function appInfo() {
         method: 'get',
     })
 }
+
+// 获取Token信息
+export function getTokenInfo() {
+    return request({
+        url: '/app/ai-token/info',
+        method: 'get',
+    })
+}
+
+// 获取/创建Token
+export function getToken() {
+    return request({
+        url: '/app/ai-token/get',
+        method: 'post',
+    })
+}
\ No newline at end of file

src/views/console/components/token.vue

+<template>
+  <div>
+    <div v-if="!hasToken" class="text-center">
+      <el-button type="primary" :loading="loading" @click="handleGetToken">获取令牌</el-button>
+    </div>
+    <div v-else>
+      <el-form label-width="100px" label-position="left">
+        <el-form-item label="余额：">
+          <div>{{ balance }}</div>
+        </el-form-item>
+        <el-form-item label="API Key：">
+          <el-tooltip effect="dark" :content="apiKey" placement="top">
+            <span class="secret-text">{{ maskedKey }}</span>
+          </el-tooltip>
+        </el-form-item>
+      </el-form>
+      <el-form :model="rechargeForm" label-width="100px" label-position="left">
+        <el-form-item label="充值金额：">
+          <el-input-number v-model="rechargeForm.amount" :min="1" :precision="2" />
+          <el-button type="primary" @click="handleRecharge" class="ml20">充值</el-button>
+        </el-form-item>
+      </el-form>
+      <el-dialog v-model="rechargeDialogVisible" title="扫码充值" width="300px">
+        <div class="text-center">
+          <p>充值金额：{{ rechargeForm.amount }} 元</p>
+          <div style="width: 200px; height: 200px; margin: 0 auto; background: #f5f5f5; display: flex; align-items: center; justify-content: center;">
+            二维码占位
+          </div>
+        </div>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { getTokenInfo, getToken } from "@/api/console";
+
+const { proxy } = getCurrentInstance();
+
+const loading = ref(false);
+const hasToken = ref(false);
+const balance = ref("0.00");
+const apiKey = ref("");
+const maskedKey = ref("");
+
+const rechargeForm = reactive({
+  amount: 10
+});
+const rechargeDialogVisible = ref(false);
+
+function maskKey(key) {
+  if (!key || key.length < 12) return key;
+  return key.substring(0, 6) + "****" + key.substring(key.length - 6);
+}
+
+function loadTokenInfo() {
+  getTokenInfo().then(response => {
+    if (response && response.apiKey && response.hasToken) {
+      hasToken.value = true;
+      apiKey.value = response.apiKey;
+      maskedKey.value = maskKey(response.apiKey);
+      balance.value = "100.00";
+    }
+  }).catch(() => {
+    // 忽略错误，保持当前状态
+  });
+}
+
+function handleGetToken() {
+  loading.value = true;
+  getToken().then(response => {
+    if (response && response.success && response.apiKey) {
+      hasToken.value = true;
+      apiKey.value = response.apiKey;
+      maskedKey.value = maskKey(response.apiKey);
+      proxy.$modal.msgSuccess("获取令牌成功");
+    } else {
+      proxy.$modal.msgError(response?.message || "获取令牌失败");
+    }
+    loading.value = false;
+  }).catch(error => {
+    loading.value = false;
+    proxy.$modal.msgError("获取令牌失败: " + (error.message || "未知错误"));
+  });
+}
+
+function handleRecharge() {
+  rechargeDialogVisible.value = true;
+}
+
+onMounted(() => {
+  loadTokenInfo();
+});
+</script>
+
+<style scoped lang="scss">
+.secret-text {
+  font-family: monospace;
+  font-size: 12px;
+  cursor: pointer;
+}
+</style>
\ No newline at end of file

src/views/console/overview.vue

@@ -131,8 +131,16 @@
             </el-tooltip>
             <span v-else>-</span>
         </el-form-item>
-
-
+        </el-card>
+      </el-col>
+      <el-col :span="12">
+        <el-card shadow="never">
+          <template #header>
+            <div class="card-header">
+              <span>Token</span>
+            </div>
+          </template>
+          <token />
         </el-card>
       </el-col>
       <el-col :span="12">
@@ -159,12 +167,12 @@
 
 <script setup name="Overview">
 import {auditInfo, appInfo} from '@/api/console.js'
+import token from './components/token.vue'
 import {ref} from 'vue'
 import {ElMessageBox} from 'element-plus'
 import {parseTime} from "../../utils/ruoyi.js";
 import {useDict} from "@/utils/dict.js";
 import {listData} from "@/api/system/dict/data.js";
-import {get} from "@vueuse/core";
 
 // const {proxy} = getCurrentInstance();
 // const {check_status} = proxy.useDict("check_status");
@@ -201,8 +209,7 @@ getAppInfo()
 // script setup 里加一个方法
 function formatString(str) {
   if (!str) return '-'
-  if (str.length <= 10) return secret
-  // 只显示前 4 位 + ... + 后 4 位
+  if (str.length <= 10) return str
   return `${str.slice(0, 4)}****${str.slice(-4)}`
 }