feat: 系统设置页面增加个人资料和开发者标签页

- 使用 naive-ui Tabs 组件实现标签页布局,对齐 jcloud dashboard 前端
- 个人资料标签页:显示和编辑用户信息(用户名、手机、邮箱)、邮箱通知设置
- 开发者标签页:API 访问(创建/重新生成 API Key)、SSH 密钥管理、功能标志配置
- 创建账户相关 API 接口文件(account.ts),使用 jcloud.api.account.get 获取用户信息
- 创建 ClickToCopyField 组件用于一键复制文本内容
- API 接口与 jcloud dashboard 保持一致,实现相同的功能
This commit is contained in:
jingrow 2026-01-04 19:54:02 +08:00
parent 4b3ebaa7ed
commit 911ae5e53b
3 changed files with 1210 additions and 177 deletions

259
src/shared/api/account.ts Normal file
View File

@ -0,0 +1,259 @@
import axios from 'axios'
import { get_session_api_headers } from './auth'
// 创建或重新生成 API Secret
export const createApiSecret = async (): Promise<{ success: boolean; data?: { api_key: string; api_secret: string }; message?: string }> => {
try {
const response = await axios.post(
`/api/action/jcloud.api.account.create_api_secret`,
{},
{
headers: get_session_api_headers(),
withCredentials: true
}
)
const result = response.data
if (result?.message) {
return { success: true, data: result.message }
}
return { success: true, data: result }
} catch (error: any) {
return {
success: false,
message: error.response?.data?.detail || error.response?.data?.message || error.message || '创建 API Secret 失败'
}
}
}
// 更新个人资料
export interface UpdateProfileParams {
first_name?: string
last_name?: string
username?: string
mobile_no?: string
email?: string
}
export const updateProfile = async (params: UpdateProfileParams): Promise<{ success: boolean; message?: string }> => {
try {
const response = await axios.post(
`/api/action/jcloud.api.account.update_profile`,
params,
{
headers: get_session_api_headers(),
withCredentials: true
}
)
return { success: true, message: response.data?.message || '更新成功' }
} catch (error: any) {
return {
success: false,
message: error.response?.data?.detail || error.response?.data?.message || error.message || '更新个人资料失败'
}
}
}
// 获取邮箱列表
export const getEmails = async (): Promise<{ success: boolean; data?: Array<{ type: string; value: string }>; message?: string }> => {
try {
const response = await axios.get(
`/api/action/jcloud.api.account.get_emails`,
{
headers: get_session_api_headers(),
withCredentials: true
}
)
const result = response.data
return { success: true, data: result?.message || result }
} catch (error: any) {
return {
success: false,
message: error.response?.data?.detail || error.response?.data?.message || error.message || '获取邮箱列表失败'
}
}
}
// 更新邮箱
export const updateEmails = async (data: Array<{ type: string; value: string }>): Promise<{ success: boolean; message?: string }> => {
try {
const response = await axios.post(
`/api/action/jcloud.api.account.update_emails`,
{ data: JSON.stringify(data) },
{
headers: get_session_api_headers(),
withCredentials: true
}
)
return { success: true, message: response.data?.message || '更新成功' }
} catch (error: any) {
return {
success: false,
message: error.response?.data?.detail || error.response?.data?.message || error.message || '更新邮箱失败'
}
}
}
// 获取用户 SSH 密钥列表
export const getUserSSHKeys = async (): Promise<{ success: boolean; data?: Array<any>; message?: string }> => {
try {
const response = await axios.get(
`/api/action/jcloud.api.account.get_user_ssh_keys`,
{
headers: get_session_api_headers(),
withCredentials: true
}
)
const result = response.data
return { success: true, data: result?.message || result || [] }
} catch (error: any) {
return {
success: false,
message: error.response?.data?.detail || error.response?.data?.message || error.message || '获取 SSH 密钥列表失败'
}
}
}
// 添加 SSH 密钥
export const addSSHKey = async (sshPublicKey: string): Promise<{ success: boolean; message?: string }> => {
try {
const response = await axios.post(
`/api/action/jcloud.api.client.insert`,
{
pg: {
pagetype: 'User SSH Key',
ssh_public_key: sshPublicKey,
user: '' // 后端会自动获取当前用户
}
},
{
headers: get_session_api_headers(),
withCredentials: true
}
)
return { success: true, message: response.data?.message || '添加成功' }
} catch (error: any) {
return {
success: false,
message: error.response?.data?.detail || error.response?.data?.message || error.message || '添加 SSH 密钥失败'
}
}
}
// 设置 SSH 密钥为默认
export const markKeyAsDefault = async (keyName: string): Promise<{ success: boolean; message?: string }> => {
try {
const response = await axios.post(
`/api/action/jcloud.api.account.mark_key_as_default`,
{ key_name: keyName },
{
headers: get_session_api_headers(),
withCredentials: true
}
)
return { success: true, message: response.data?.message || '设置成功' }
} catch (error: any) {
return {
success: false,
message: error.response?.data?.detail || error.response?.data?.message || error.message || '设置默认密钥失败'
}
}
}
// 删除 SSH 密钥
export const deleteSSHKey = async (keyName: string): Promise<{ success: boolean; message?: string }> => {
try {
const response = await axios.post(
`/api/action/jcloud.api.client.delete`,
{
pagetype: 'User SSH Key',
name: keyName
},
{
headers: get_session_api_headers(),
withCredentials: true
}
)
return { success: true, message: response.data?.message || '删除成功' }
} catch (error: any) {
return {
success: false,
message: error.response?.data?.detail || error.response?.data?.message || error.message || '删除 SSH 密钥失败'
}
}
}
// 获取功能标志
export const getFeatureFlags = async (): Promise<{ success: boolean; data?: Record<string, boolean>; message?: string }> => {
try {
// 这里需要根据实际 API 调整
const response = await axios.get(
`/api/action/jcloud.api.account.get_feature_flags`,
{
headers: get_session_api_headers(),
withCredentials: true
}
)
const result = response.data
return { success: true, data: result?.message || result }
} catch (error: any) {
// 如果 API 不存在,返回空对象
return { success: false, data: {}, message: '功能标志 API 不可用' }
}
}
// 更新功能标志
export const updateFeatureFlags = async (values: Record<string, boolean>): Promise<{ success: boolean; message?: string }> => {
try {
const response = await axios.post(
`/api/action/jcloud.api.account.update_feature_flags`,
{ values },
{
headers: get_session_api_headers(),
withCredentials: true
}
)
return { success: true, message: response.data?.message || '更新成功' }
} catch (error: any) {
return {
success: false,
message: error.response?.data?.detail || error.response?.data?.message || error.message || '更新功能标志失败'
}
}
}
// 获取用户信息(包含 API Key
// 使用 jcloud.api.account.get API 获取账户信息
export const getUserAccountInfo = async (): Promise<{ success: boolean; data?: any; message?: string }> => {
try {
const response = await axios.get(
`/api/action/jcloud.api.account.get`,
{
headers: get_session_api_headers(),
withCredentials: true
}
)
const result = response.data?.message || response.data
if (result?.user) {
return { success: true, data: result.user }
}
return { success: false, message: 'API 返回的数据中未找到用户信息' }
} catch (error: any) {
return {
success: false,
message: error.response?.data?.detail || error.response?.data?.message || error.message || '获取用户信息失败'
}
}
}

View File

@ -0,0 +1,78 @@
<template>
<div class="click-to-copy-field">
<n-input
:value="textContent"
readonly
:placeholder="placeholder"
class="copy-input"
>
<template #suffix>
<n-button
quaternary
size="small"
@click="handleCopy"
:loading="copying"
class="copy-button"
>
<template #icon>
<n-icon>
<Icon :icon="copied ? 'tabler:check' : 'tabler:copy'" />
</n-icon>
</template>
</n-button>
</template>
</n-input>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { NInput, NButton, NIcon, useMessage } from 'naive-ui'
import { Icon } from '@iconify/vue'
interface Props {
textContent: string
placeholder?: string
}
const props = withDefaults(defineProps<Props>(), {
placeholder: ''
})
const message = useMessage()
const copying = ref(false)
const copied = ref(false)
const handleCopy = async () => {
if (!props.textContent) return
copying.value = true
try {
await navigator.clipboard.writeText(props.textContent)
copied.value = true
message.success('已复制到剪贴板')
setTimeout(() => {
copied.value = false
}, 2000)
} catch (error) {
message.error('复制失败')
} finally {
copying.value = false
}
}
</script>
<style scoped>
.click-to-copy-field {
width: 100%;
}
.copy-input {
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
font-size: 13px;
}
.copy-button {
margin-right: 4px;
}
</style>

File diff suppressed because it is too large Load Diff