Feat: add copy button

frontend/components.d.ts

@@ -42,6 +42,7 @@ declare module 'vue' {
     BetweenMenus: typeof import('./src/components/BetweenMenus.vue')['default']
     CardOperator: typeof import('./src/components/CardOperator.vue')['default']
     CardPanel: typeof import('./src/components/CardPanel.vue')['default']
+    CopyButton: typeof import('./src/components/CopyButton.vue')['default']
     DataStatistic: typeof import('./src/components/DataStatistic.vue')['default']
     InnerCard: typeof import('./src/components/InnerCard.vue')['default']
     InputDialogProvider: typeof import('./src/components/InputDialogProvider.vue')['default']

frontend/src/assets/tools.scss

@@ -97,6 +97,14 @@
   user-select: none;
 }
 
+.float-right {
+  float: right;
+}
+
+.float-left {
+  float: left;
+}
+
 @mixin generate-styles($depth) {
   .m-#{$depth} {
     margin: #{$depth}px !important;

frontend/src/components/CopyButton.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { t } from "@/lang/i18n";
+import { CopyOutlined } from "@ant-design/icons-vue";
+import { message } from "ant-design-vue";
+
+const props = defineProps<{
+  size?: string;
+  type?: string;
+  value: string;
+}>();
+
+const copy = () => {
+  if (navigator.clipboard) {
+    navigator.clipboard
+      .writeText(props.value)
+      .then(() => {
+        message.success(t("复制成功"));
+      })
+      .catch((error) => {
+        message.error(t("复制失败：") + error);
+      });
+  } else {
+    message.error(t("您当前的浏览器不支持 Clipboard API"));
+  }
+};
+</script>
+
+<template>
+  <a-tooltip>
+    <template #title>{{ t("复制") }}</template>
+    <a-button :type="type" :size="size" @click="copy">
+      <template #icon>
+        <CopyOutlined />
+      </template>
+    </a-button>
+  </a-tooltip>
+</template>

frontend/src/components/MyselfInfoDialog.vue

@@ -5,6 +5,7 @@ import { useAppToolsStore } from "@/stores/useAppToolsStore";
 import { reactive, toRaw } from "vue";
 import { setUserApiKey } from "@/services/apis";
 import { message } from "ant-design-vue";
+import CopyButton from "@/components/CopyButton.vue";
 const { state, updateUserInfo } = useAppStateStore();
 const { state: tools } = useAppToolsStore();
 
@@ -119,7 +120,7 @@ const onSubmit = () => {
             }}
           </a-typography-paragraph>
           <a-typography-paragraph v-if="state.userInfo?.apiKey">
-            <pre>{{ state.userInfo.apiKey }}</pre>
+            <pre>{{ state.userInfo.apiKey }}<CopyButton class="float-right" size="small" type="text" :value="state.userInfo.apiKey" /></pre>
           </a-typography-paragraph>
           <a-typography-paragraph v-else>
             <pre>{{ t("未启用") }}</pre>
@@ -135,8 +136,6 @@ const onSubmit = () => {
           <a-popconfirm
             v-if="state.userInfo?.apiKey"
             :title="t('你确定要关闭APIKey吗')"
-            ok-text="Yes"
-            cancel-text="No"
             @confirm="handleGenerateApiKey(false)"
           >
             <a-button size="default" danger> {{ t("关闭") }} </a-button>