feat: APIKey样式修改

ui/src/layout/components/top-bar/avatar/APIKeyDialog.vue

@@ -1,16 +1,18 @@
 <template>
   <el-dialog :title="$t('layout.topbar.avatar.apiKey')" v-model="dialogVisible" width="800">
-    <div class="mb-16 grey-background">
-      <el-text type="info">{{ $t('layout.topbar.avatar.apiServiceAddress') }}</el-text>
+    <el-card shadow="never" class="layout-bg mb-16">
+      <el-text type="info" class="color-secondary">{{
+        $t('layout.topbar.avatar.apiServiceAddress')
+      }}</el-text>
       <p style="margin-top: 10px">
-        <a target="_blank" :href="apiUrl" class="vertical-middle lighter break-all" style="color: black;">
+        <span class="vertical-middle lighter break-all">
           {{ apiUrl }}
-        </a>
+        </span>
         <el-button type="primary" text @click="copyClick(apiUrl)">
           <AppIcon iconName="app-copy"></AppIcon>
         </el-button>
       </p>
-    </div>
+    </el-card>
 
     <el-button type="primary" class="mb-16" @click="createApiKey">
       {{ $t('views.applicationOverview.appInfo.APIKeyDialog.creatApiKey') }}
@@ -83,11 +85,11 @@
 import { ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import { copyClick } from '@/utils/clipboard'
-import overviewApi from '@/api/system-api-key'
+import systemKeyApi from '@/api/system-api-key'
 import { datetimeFormat } from '@/utils/time'
 import { MsgSuccess, MsgConfirm } from '@/utils/message'
 import { t } from '@/locales'
-import SettingAPIKeyDialog from "./SettingAPIKeyDialog.vue";
+import SettingAPIKeyDialog from './SettingAPIKeyDialog.vue'
 
 const route = useRoute()
 const {
@@ -98,7 +100,7 @@ const props = defineProps({
   userId: {
     type: String,
     default: ''
-  },
+  }
 })
 const emit = defineEmits(['addData'])
 
@@ -108,7 +110,6 @@ const dialogVisible = ref<boolean>(false)
 const loading = ref(false)
 const apiKey = ref<any>(null)
 
-
 watch(dialogVisible, (bool) => {
   if (!bool) {
     apiKey.value = null
@@ -131,13 +132,12 @@ function deleteApiKey(row: any) {
     }
   )
     .then(() => {
-        overviewApi.delAPIKey(row.id, loading).then(() => {
+      systemKeyApi.delAPIKey(row.id, loading).then(() => {
         MsgSuccess(t('views.applicationOverview.appInfo.APIKeyDialog.deleteSuccess'))
         getApiKeyList()
       })
     })
-      .catch(() => {
-      })
+    .catch(() => {})
 }
 
 function changeState(bool: Boolean, row: any) {
@@ -147,14 +147,14 @@ function changeState(bool: Boolean, row: any) {
   const str = bool
     ? t('views.applicationOverview.appInfo.APIKeyDialog.enabledSuccess')
     : t('views.applicationOverview.appInfo.APIKeyDialog.disabledSuccess')
-  overviewApi.putAPIKey(row.id, obj, loading).then((res) => {
+  systemKeyApi.putAPIKey(row.id, obj, loading).then((res) => {
     MsgSuccess(str)
     getApiKeyList()
   })
 }
 
 function createApiKey() {
-  overviewApi.postAPIKey(loading).then((res) => {
+  systemKeyApi.postAPIKey(loading).then((res) => {
     getApiKeyList()
   })
 }
@@ -165,7 +165,7 @@ const open = () => {
 }
 
 function getApiKeyList() {
-  overviewApi.getAPIKey().then((res) => {
+  systemKeyApi.getAPIKey().then((res) => {
     apiKey.value = res.data
   })
 }
@@ -176,10 +176,4 @@ function refresh() {
 
 defineExpose({ open })
 </script>
-<style lang="scss" scope>
-.grey-background {
-  background-color: #f2f2f2; /* 灰色背景 */
-  padding: 20px; /* 内边距 */
-  border-radius: 8px; /* 可选：添加圆角 */
-}
-</style>
+<style lang="scss" scope></style>