525 lines
14 KiB
Vue
525 lines
14 KiB
Vue
<template>
|
||
<div class="dev-page">
|
||
<div class="page-header">
|
||
<div>
|
||
<h2 class="page-title">🐙 Git 账号绑定</h2>
|
||
<p class="page-desc">绑定你的 Gitea 账号，用于申请源码仓库访问权限。</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="page-body">
|
||
<!-- 绑定说明 -->
|
||
<div class="info-banner">
|
||
<div class="info-icon">💡</div>
|
||
<div class="info-content">
|
||
<div class="info-title">什么是 Gitea 账号绑定？</div>
|
||
<div class="info-desc">
|
||
平台使用 Gitea 私有 Git 服务管理源码仓库。绑定账号后，运营人员可将你加入对应仓库的访问组，
|
||
之后你即可通过 Git 克隆完整源代码进行本地开发与私有化部署。
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<a-row :gutter="[20, 20]">
|
||
<!-- 绑定表单 -->
|
||
<a-col :xs="24" :lg="14">
|
||
<div class="panel">
|
||
<div class="panel-header">
|
||
<span class="panel-title">📝 填写 Git 信息</span>
|
||
<div v-if="loading">
|
||
<a-spin size="small" />
|
||
</div>
|
||
<div v-else>
|
||
<a-tag v-if="gitAccountStatus" :color="getStatusColor(gitAccountStatus.status)">
|
||
{{ getStatusText(gitAccountStatus.status) }}
|
||
</a-tag>
|
||
<a-tag v-else-if="isSaved" color="green">✓ 已保存</a-tag>
|
||
</div>
|
||
</div>
|
||
<div class="panel-body">
|
||
<a-form layout="vertical" :model="form">
|
||
<a-form-item label="Gitea 用户名" required>
|
||
<a-input
|
||
v-model:value="form.username"
|
||
placeholder="例如：lily"
|
||
:prefix-slot="true"
|
||
size="large"
|
||
>
|
||
<template #prefix>🐙</template>
|
||
</a-input>
|
||
<div class="form-hint">你在平台 Gitea 上注册的用户名（非邮箱）</div>
|
||
</a-form-item>
|
||
|
||
<a-form-item label="联系邮箱（可选）">
|
||
<a-input
|
||
v-model:value="form.email"
|
||
placeholder="用于接收审核通知"
|
||
size="large"
|
||
>
|
||
<template #prefix>📧</template>
|
||
</a-input>
|
||
</a-form-item>
|
||
|
||
<a-form-item label="备注（可选）">
|
||
<a-textarea
|
||
v-model:value="form.remark"
|
||
:rows="3"
|
||
placeholder="例如：公司名称、项目名称、联系方式等"
|
||
:maxlength="200"
|
||
show-count
|
||
/>
|
||
</a-form-item>
|
||
|
||
<a-form-item>
|
||
<a-space>
|
||
<a-button
|
||
type="primary"
|
||
size="large"
|
||
:loading="saving"
|
||
:disabled="!form.username.trim()"
|
||
@click="handleSave"
|
||
>
|
||
💾 保存绑定信息
|
||
</a-button>
|
||
<a-button
|
||
size="large"
|
||
type="default"
|
||
@click="navigateTo('/developer/requests')"
|
||
>
|
||
📋 查看申请记录
|
||
</a-button>
|
||
</a-space>
|
||
</a-form-item>
|
||
</a-form>
|
||
|
||
<!-- 状态信息 -->
|
||
<div v-if="gitAccountStatus && gitAccountStatus.status !== 'not_bound'" class="status-info">
|
||
<div class="status-info-header">📋 当前状态信息</div>
|
||
<div class="status-info-content">
|
||
<div v-if="gitAccountStatus.lastUpdatedAt" class="status-item">
|
||
<span class="status-label">上次更新：</span>
|
||
<span class="status-value">{{ gitAccountStatus.lastUpdatedAt }}</span>
|
||
</div>
|
||
<div v-if="gitAccountStatus.verificationNote" class="status-item">
|
||
<span class="status-label">审核备注：</span>
|
||
<span class="status-value">{{ gitAccountStatus.verificationNote }}</span>
|
||
</div>
|
||
<div v-if="gitAccountStatus.status === 'rejected'" class="status-warning">
|
||
❌ 绑定被拒绝，请根据备注修改信息后重新提交
|
||
</div>
|
||
<div v-if="gitAccountStatus.status === 'verified'" class="status-success">
|
||
✅ 绑定已成功，现在可以提交仓库访问申请了
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 绑定成功后显示申请权限按钮 -->
|
||
<div v-if="gitAccountStatus.status === 'verified'" class="action-buttons">
|
||
<a-button
|
||
type="primary"
|
||
block
|
||
size="large"
|
||
@click="navigateTo('/developer/requests')"
|
||
>
|
||
🚀 前往申请仓库权限 →
|
||
</a-button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</a-col>
|
||
|
||
<!-- 操作步骤说明 -->
|
||
<a-col :xs="24" :lg="10">
|
||
<div class="panel">
|
||
<div class="panel-header">
|
||
<span class="panel-title">📌 操作步骤</span>
|
||
</div>
|
||
<div class="steps-list">
|
||
<div v-for="(step, i) in howToSteps" :key="i" class="how-step">
|
||
<div class="how-step-num">{{ i + 1 }}</div>
|
||
<div class="how-step-text">
|
||
<div class="how-step-title">{{ step.title }}</div>
|
||
<div class="how-step-desc">{{ step.desc }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Gitea 注册入口 -->
|
||
<div class="panel mt-4">
|
||
<div class="panel-header">
|
||
<span class="panel-title">🚀 还没有 Gitea 账号？</span>
|
||
</div>
|
||
<div class="register-hint">
|
||
<p class="register-desc">
|
||
前往平台 Gitea 注册账号，注册完成后将用户名填入上方表单。
|
||
</p>
|
||
<a-button type="primary" ghost block @click="openGitea">
|
||
前往 Gitea 注册 →
|
||
</a-button>
|
||
</div>
|
||
</div>
|
||
</a-col>
|
||
</a-row>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { message } from 'ant-design-vue'
|
||
import { saveGitAccount, getGitAccountStatus, getGiteaServerInfo } from '@/api/developer'
|
||
|
||
definePageMeta({ layout: 'developer' })
|
||
useHead({ title: 'Git 账号绑定 - 开发者中心' })
|
||
|
||
const saving = ref(false)
|
||
const loading = ref(false)
|
||
const isSaved = ref(false)
|
||
const gitAccountStatus = ref<any>(null)
|
||
const giteaInfo = ref<any>(null)
|
||
|
||
const form = reactive({
|
||
username: '',
|
||
email: '',
|
||
remark: '',
|
||
})
|
||
|
||
// 加载Git账号绑定状态
|
||
async function loadGitAccountStatus() {
|
||
loading.value = true
|
||
try {
|
||
const res = await getGitAccountStatus()
|
||
if (res.data.code === 200) {
|
||
gitAccountStatus.value = res.data.data
|
||
|
||
if (gitAccountStatus.value.status !== 'not_bound' && gitAccountStatus.value.username) {
|
||
form.username = gitAccountStatus.value.username
|
||
form.email = gitAccountStatus.value.email || ''
|
||
form.remark = gitAccountStatus.value.remark || ''
|
||
isSaved.value = true
|
||
}
|
||
}
|
||
} catch (error) {
|
||
console.error('加载Git账号状态失败:', error)
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
// 加载Gitea服务器信息
|
||
async function loadGiteaInfo() {
|
||
try {
|
||
const res = await getGiteaServerInfo()
|
||
if (res.data.code === 200) {
|
||
giteaInfo.value = res.data.data
|
||
}
|
||
} catch (error) {
|
||
console.error('加载Gitea服务器信息失败:', error)
|
||
}
|
||
}
|
||
|
||
async function handleSave() {
|
||
if (!form.username.trim()) {
|
||
message.error('请填写 Gitea 用户名')
|
||
return
|
||
}
|
||
|
||
saving.value = true
|
||
try {
|
||
const res = await saveGitAccount({
|
||
username: form.username.trim(),
|
||
email: form.email.trim() || undefined,
|
||
remark: form.remark.trim() || undefined
|
||
})
|
||
|
||
if (res.data.code === 200) {
|
||
isSaved.value = true
|
||
message.success(res.data.message || 'Git 账号绑定成功')
|
||
|
||
// 重新加载状态
|
||
await loadGitAccountStatus()
|
||
} else {
|
||
message.error(res.data.message || '保存失败，请稍后重试')
|
||
}
|
||
} catch (error: any) {
|
||
console.error('保存Git账号信息失败:', error)
|
||
if (error.response?.status === 400) {
|
||
message.error('用户名格式不正确')
|
||
} else if (error.response?.status === 409) {
|
||
message.error('该用户名已被其他用户绑定')
|
||
} else {
|
||
message.error('保存失败，请检查网络连接后重试')
|
||
}
|
||
} finally {
|
||
saving.value = false
|
||
}
|
||
}
|
||
|
||
function openGitea() {
|
||
if (import.meta.client) {
|
||
const url = giteaInfo.value?.url || 'https://git.websoft.top'
|
||
window.open(url, '_blank', 'noopener,noreferrer')
|
||
}
|
||
}
|
||
|
||
// 获取状态标签颜色
|
||
function getStatusColor(status: string) {
|
||
const colors: Record<string, string> = {
|
||
pending: 'orange',
|
||
verified: 'green',
|
||
rejected: 'red',
|
||
not_bound: 'default'
|
||
}
|
||
return colors[status] || 'default'
|
||
}
|
||
|
||
// 获取状态标签文本
|
||
function getStatusText(status: string) {
|
||
const texts: Record<string, string> = {
|
||
pending: '待审核',
|
||
verified: '已通过',
|
||
rejected: '已拒绝',
|
||
not_bound: '未绑定'
|
||
}
|
||
return texts[status] || status
|
||
}
|
||
|
||
const howToSteps = [
|
||
{
|
||
title: '注册 Gitea 账号',
|
||
desc: '访问平台 Gitea，使用邮箱注册一个账号。',
|
||
},
|
||
{
|
||
title: '填写用户名并保存',
|
||
desc: '在左侧表单填写你的 Gitea 用户名，点击保存。',
|
||
},
|
||
{
|
||
title: '申请仓库访问权限',
|
||
desc: '绑定成功后，前往权限申请页面提交仓库访问申请。',
|
||
},
|
||
{
|
||
title: '获得仓库访问权限',
|
||
desc: '申请通过后，通过 Gitea 即可克隆对应仓库。',
|
||
},
|
||
]
|
||
|
||
// 页面初始化
|
||
onMounted(async () => {
|
||
await Promise.all([
|
||
loadGitAccountStatus(),
|
||
loadGiteaInfo()
|
||
])
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.dev-page { min-height: 100%; }
|
||
|
||
.page-header {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
justify-content: space-between;
|
||
padding: 24px 28px 16px;
|
||
border-bottom: 1px solid #f0f0f0;
|
||
gap: 16px;
|
||
}
|
||
|
||
.page-title {
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
color: rgba(0, 0, 0, 0.88);
|
||
margin: 0 0 4px;
|
||
}
|
||
|
||
.page-desc {
|
||
font-size: 14px;
|
||
color: rgba(0, 0, 0, 0.45);
|
||
margin: 0;
|
||
}
|
||
|
||
.page-body {
|
||
padding: 20px 24px 28px;
|
||
}
|
||
|
||
/* 说明横幅 */
|
||
.info-banner {
|
||
display: flex;
|
||
gap: 14px;
|
||
padding: 16px 18px;
|
||
background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 100%);
|
||
border-radius: 12px;
|
||
border: 1px solid #bfdbfe;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.info-icon { font-size: 22px; flex-shrink: 0; }
|
||
|
||
.info-title {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: #1d4ed8;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.info-desc {
|
||
font-size: 13px;
|
||
color: #3b82f6;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.panel {
|
||
background: #fff;
|
||
border: 1px solid #f0f0f0;
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.panel-header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 14px 18px;
|
||
border-bottom: 1px solid #f5f5f5;
|
||
}
|
||
|
||
.panel-title {
|
||
font-size: 14px;
|
||
font-weight: 600;
|
||
color: rgba(0, 0, 0, 0.85);
|
||
}
|
||
|
||
.panel-body {
|
||
padding: 20px 20px 10px;
|
||
}
|
||
|
||
.form-hint {
|
||
font-size: 12px;
|
||
color: rgba(0, 0, 0, 0.38);
|
||
margin-top: 5px;
|
||
}
|
||
|
||
/* 步骤列表 */
|
||
.steps-list {
|
||
padding: 14px 18px;
|
||
}
|
||
|
||
.how-step {
|
||
display: flex;
|
||
gap: 12px;
|
||
padding: 10px 0;
|
||
border-bottom: 1px solid #f9f9f9;
|
||
}
|
||
|
||
.how-step:last-child { border-bottom: none; }
|
||
|
||
.how-step-num {
|
||
width: 24px;
|
||
height: 24px;
|
||
flex-shrink: 0;
|
||
border-radius: 50%;
|
||
background: linear-gradient(135deg, #4f46e5, #7c3aed);
|
||
color: #fff;
|
||
font-size: 12px;
|
||
font-weight: 700;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-top: 1px;
|
||
}
|
||
|
||
.how-step-title {
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
color: rgba(0, 0, 0, 0.85);
|
||
margin-bottom: 3px;
|
||
}
|
||
|
||
.how-step-desc {
|
||
font-size: 12px;
|
||
color: rgba(0, 0, 0, 0.4);
|
||
line-height: 1.5;
|
||
}
|
||
|
||
/* Gitea 注册 */
|
||
.register-hint {
|
||
padding: 16px 18px;
|
||
}
|
||
|
||
.register-desc {
|
||
font-size: 13px;
|
||
color: rgba(0, 0, 0, 0.5);
|
||
margin: 0 0 14px;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
/* 状态信息 */
|
||
.status-info {
|
||
margin-top: 20px;
|
||
padding: 14px;
|
||
background: #f9fafb;
|
||
border-radius: 8px;
|
||
border: 1px solid #e5e7eb;
|
||
}
|
||
|
||
.status-info-header {
|
||
font-size: 13px;
|
||
font-weight: 600;
|
||
color: rgba(0, 0, 0, 0.85);
|
||
margin-bottom: 10px;
|
||
padding-bottom: 8px;
|
||
border-bottom: 1px solid #e5e7eb;
|
||
}
|
||
|
||
.status-info-content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
|
||
.status-item {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 8px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.status-label {
|
||
color: rgba(0, 0, 0, 0.45);
|
||
min-width: 60px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.status-value {
|
||
color: rgba(0, 0, 0, 0.65);
|
||
flex: 1;
|
||
word-break: break-word;
|
||
}
|
||
|
||
.status-warning {
|
||
font-size: 12px;
|
||
color: #dc2626;
|
||
background: #fef2f2;
|
||
padding: 8px 12px;
|
||
border-radius: 6px;
|
||
margin-top: 8px;
|
||
border: 1px solid #fecaca;
|
||
}
|
||
|
||
.status-success {
|
||
font-size: 12px;
|
||
color: #16a34a;
|
||
background: #f0fdf4;
|
||
padding: 8px 12px;
|
||
border-radius: 6px;
|
||
margin-top: 8px;
|
||
border: 1px solid #bbf7d0;
|
||
}
|
||
|
||
/* 操作按钮区域 */
|
||
.action-buttons {
|
||
margin-top: 16px;
|
||
padding-top: 16px;
|
||
border-top: 1px solid #e5e7eb;
|
||
}
|
||
</style>
|