diff --git a/frontend/src/assets/embedded/icon_visible_outlined_blod.svg b/frontend/src/assets/embedded/icon_visible_outlined_blod.svg new file mode 100644 index 000000000..c633a7bc0 --- /dev/null +++ b/frontend/src/assets/embedded/icon_visible_outlined_blod.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/assets/svg/icon-api_key.svg b/frontend/src/assets/svg/icon-api_key.svg new file mode 100644 index 000000000..82b27653a --- /dev/null +++ b/frontend/src/assets/svg/icon-api_key.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/frontend/src/components/layout/Apikey.vue b/frontend/src/components/layout/Apikey.vue new file mode 100644 index 000000000..36382e73f --- /dev/null +++ b/frontend/src/components/layout/Apikey.vue @@ -0,0 +1,357 @@ + + + + + diff --git a/frontend/src/components/layout/Person.vue b/frontend/src/components/layout/Person.vue index 9080c127f..75b6a6574 100644 --- a/frontend/src/components/layout/Person.vue +++ b/frontend/src/components/layout/Person.vue @@ -6,6 +6,7 @@ import icon_info_outlined_1 from '@/assets/svg/icon_info_outlined_1.svg' import { useAppearanceStoreWithOut } from '@/stores/appearance' import icon_maybe_outlined from '@/assets/svg/icon-maybe_outlined.svg' import icon_key_outlined from '@/assets/svg/icon-key_outlined.svg' +import icon_api_key from '@/assets/svg/icon-api_key.svg' import icon_translate_outlined from '@/assets/svg/icon_translate_outlined.svg' import icon_logout_outlined from '@/assets/svg/icon_logout_outlined.svg' import icon_right_outlined from '@/assets/svg/icon_right_outlined.svg' @@ -13,6 +14,7 @@ import AboutDialog from '@/components/about/index.vue' import icon_done_outlined from '@/assets/svg/icon_done_outlined.svg' import { useI18n } from 'vue-i18n' import PwdForm from './PwdForm.vue' +import Apikey from './Apikey.vue' import { useRouter } from 'vue-router' import { useUserStore } from '@/stores/user' import { userApi } from '@/api/auth' @@ -33,6 +35,7 @@ const currentLanguage = computed(() => userStore.getLanguage) const isAdmin = computed(() => userStore.isAdmin) const isLocalUser = computed(() => !userStore.getOrigin) const dialogVisible = ref(false) +const apikeyDialogVisible = ref(false) const aboutRef = ref() const languageList = computed(() => [ { @@ -76,7 +79,9 @@ const openPwd = () => { const closePwd = () => { dialogVisible.value = false } - +const openApikey = () => { + apikeyDialogVisible.value = true +} const toAbout = () => { aboutRef.value?.open() } @@ -126,6 +131,12 @@ const logout = async () => {
{{ $t('user.change_password') }}
+
+ + + +
API Key
+
+ + + diff --git a/frontend/src/i18n/en.json b/frontend/src/i18n/en.json index edb5551f9..8eaaa9d3e 100644 --- a/frontend/src/i18n/en.json +++ b/frontend/src/i18n/en.json @@ -819,5 +819,11 @@ }, "modelType": { "llm": "Large Language Model" + }, + "api_key": { + "info_tips": "The API Key is your credential for accessing the SQLBot API, with full permissions for your account. Please keep it secure! Do not disclose the API Key in any public channels to avoid security risks from unauthorized use.", + "create": "Create", + "to_doc": "View API", + "trigger_limit": "Supports up to {0} API Keys" } } diff --git a/frontend/src/i18n/ko-KR.json b/frontend/src/i18n/ko-KR.json index 203f2a6c9..14837c614 100644 --- a/frontend/src/i18n/ko-KR.json +++ b/frontend/src/i18n/ko-KR.json @@ -819,5 +819,11 @@ }, "modelType": { "llm": "대형 언어 모델" + }, + "api_key": { + "info_tips": "API 키는 SQLBot API에 액세스하는 비밀키로 계정의 모든 권한을 갖고 있습니다. 꼭 안전하게 보관하세요! 외부 채널에 어떠한 방식으로도 API 키를 공개하지 마시고, 타인이 악용하여 보안 위협이 발생하는 것을 방지하세요.", + "create": "생성", + "to_doc": "API 보기", + "trigger_limit": "최대 {0}개의 API 키 생성 지원" } } diff --git a/frontend/src/i18n/zh-CN.json b/frontend/src/i18n/zh-CN.json index d96421c2b..6c5ecfef9 100644 --- a/frontend/src/i18n/zh-CN.json +++ b/frontend/src/i18n/zh-CN.json @@ -820,5 +820,11 @@ }, "modelType": { "llm": "大语言模型" + }, + "api_key": { + "info_tips": "API Key 是您访问 SQLBot API 的密钥，具有账户的完全权限，请您务必妥善保管！不要以任何方式公开 API Key 到外部渠道，避免被他人利用造成安全威胁。", + "create": "创建", + "to_doc": "查看 API", + "trigger_limit": "最多支持创建 {0} 个 API Key" } }