luo/one-pipe-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit: One Pipe System

Browse Source 
完整的管理系统，包含账户管理、卡片管理、套餐管理、财务管理等功能模块。

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
sexygoat
2026-01-22 16:35:33 +08:00
commit 222e5bb11a
495 changed files with 145440 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

301
src/views/settings/developer-api/index.vue Normal file
View File

@@ -0,0 +1,301 @@
<template>
<div class="page-content">
<!-- API密钥管理 -->
<ElCard shadow="never">
<template #header>
<div style="display: flex; justify-content: space-between; align-items: center">
<span style="font-weight: 500">API密钥管理</span>
<ElButton type="primary" size="small" @click="showCreateDialog">生成新密钥</ElButton>
</div>
</template>
<ArtTable :data="apiKeyList" index>
<template #default>
<ElTableColumn label="密钥名称" prop="keyName" />
<ElTableColumn label="AppKey" prop="appKey" min-width="200">
<template #default="scope">
<div style="display: flex; align-items: center; gap: 8px">
<code style="color: var(--el-color-primary)">{{ scope.row.appKey }}</code>
<ElButton link :icon="CopyDocument" @click="copyToClipboard(scope.row.appKey)" />
</div>
</template>
</ElTableColumn>
<ElTableColumn label="AppSecret" prop="appSecret" min-width="200">
<template #default="scope">
<div style="display: flex; align-items: center; gap: 8px">
<code>{{ scope.row.showSecret ? scope.row.appSecret : '••••••••••••••••' }}</code>
<ElButton link :icon="View" @click="scope.row.showSecret = !scope.row.showSecret" />
<ElButton link :icon="CopyDocument" @click="copyToClipboard(scope.row.appSecret)" />
</div>
</template>
</ElTableColumn>
<ElTableColumn label="权限" prop="permissions">
<template #default="scope">
<ElTag v-for="(perm, index) in scope.row.permissions" :key="index" size="small" style="margin-right: 4px">
{{ perm }}
</ElTag>
</template>
</ElTableColumn>
<ElTableColumn label="状态" prop="status">
<template #default="scope">
<ElTag :type="scope.row.status === 'active' ? 'success' : 'info'">
{{ scope.row.status === 'active' ? '启用' : '禁用' }}
</ElTag>
</template>
</ElTableColumn>
<ElTableColumn label="创建时间" prop="createTime" width="180" />
<ElTableColumn fixed="right" label="操作" width="180">
<template #default="scope">
<el-button link @click="handleResetKey(scope.row)">重置密钥</el-button>
<el-button link type="danger" @click="handleDelete(scope.row)">删除</el-button>
</template>
</ElTableColumn>
</template>
</ArtTable>
</ElCard>
<!-- Webhook配置 -->
<ElCard shadow="never" style="margin-top: 20px">
<template #header>
<span style="font-weight: 500">Webhook配置</span>
</template>
<ElForm :model="webhookForm" label-width="120px" style="max-width: 800px">
<ElFormItem label="回调地址">
<ElInput v-model="webhookForm.url" placeholder="https://your-domain.com/webhook">
<template #prepend>POST</template>
</ElInput>
</ElFormItem>
<ElFormItem label="签名密钥">
<ElInput
v-model="webhookForm.secret"
:type="showWebhookSecret ? 'text' : 'password'"
placeholder="用于验证webhook请求签名"
>
<template #append>
<ElButton :icon="View" @click="showWebhookSecret = !showWebhookSecret" />
</template>
</ElInput>
</ElFormItem>
<ElFormItem label="事件订阅">
<ElCheckboxGroup v-model="webhookForm.events">
<ElCheckbox value="order.created">订单创建</ElCheckbox>
<ElCheckbox value="order.paid">订单支付</ElCheckbox>
<ElCheckbox value="card.activated">卡片激活</ElCheckbox>
<ElCheckbox value="card.expired">卡片过期</ElCheckbox>
<ElCheckbox value="recharge.success">充值成功</ElCheckbox>
</ElCheckboxGroup>
</ElFormItem>
<ElFormItem>
<ElButton type="primary" @click="saveWebhook">保存配置</ElButton>
<ElButton @click="testWebhook">测试推送</ElButton>
</ElFormItem>
</ElForm>
</ElCard>
<!-- API调用统计 -->
<ElCard shadow="never" style="margin-top: 20px">
<template #header>
<span style="font-weight: 500">API调用统计（最近7天）</span>
</template>
<ElRow :gutter="20">
<ElCol :xs="24" :sm="12" :lg="6">
<div class="stat-box">
<div class="stat-label">总调用次数</div>
<div class="stat-value">12,580</div>
</div>
</ElCol>
<ElCol :xs="24" :sm="12" :lg="6">
<div class="stat-box">
<div class="stat-label">成功次数</div>
<div class="stat-value" style="color: var(--el-color-success)">12,453</div>
</div>
</ElCol>
<ElCol :xs="24" :sm="12" :lg="6">
<div class="stat-box">
<div class="stat-label">失败次数</div>
<div class="stat-value" style="color: var(--el-color-danger)">127</div>
</div>
</ElCol>
<ElCol :xs="24" :sm="12" :lg="6">
<div class="stat-box">
<div class="stat-label">成功率</div>
<div class="stat-value">99.0%</div>
</div>
</ElCol>
</ElRow>
</ElCard>
<!-- 生成密钥对话框 -->
<ElDialog v-model="createDialogVisible" title="生成新密钥" width="500px" align-center>
<ElForm ref="createFormRef" :model="createForm" :rules="createRules" label-width="100px">
<ElFormItem label="密钥名称" prop="keyName">
<ElInput v-model="createForm.keyName" placeholder="请输入密钥名称" />
</ElFormItem>
<ElFormItem label="权限设置">
<ElCheckboxGroup v-model="createForm.permissions">
<ElCheckbox value="读取">读取</ElCheckbox>
<ElCheckbox value="写入">写入</ElCheckbox>
<ElCheckbox value="删除">删除</ElCheckbox>
</ElCheckboxGroup>
</ElFormItem>
</ElForm>
<template #footer>
<div class="dialog-footer">
<ElButton @click="createDialogVisible = false">取消</ElButton>
<ElButton type="primary" @click="handleCreateKey">生成</ElButton>
</div>
</template>
</ElDialog>
</div>
</template>
<script setup lang="ts">
import { ElMessage, ElMessageBox } from 'element-plus'
import { CopyDocument, View } from '@element-plus/icons-vue'
import type { FormInstance, FormRules } from 'element-plus'
defineOptions({ name: 'DeveloperApi' })
interface ApiKey {
id: string
keyName: string
appKey: string
appSecret: string
permissions: string[]
status: 'active' | 'inactive'
createTime: string
showSecret?: boolean
}
const apiKeyList = ref<ApiKey[]>([
{
id: '1',
keyName: '生产环境密钥',
appKey: 'ak_prod_1234567890abcdef',
appSecret: 'sk_prod_abcdefghijklmnopqrstuvwxyz123456',
permissions: ['读取', '写入'],
status: 'active',
createTime: '2026-01-01 10:00:00',
showSecret: false
}
])
const webhookForm = reactive({
url: 'https://your-domain.com/webhook',
secret: 'webhook_secret_key_123456',
events: ['order.created', 'order.paid']
})
const showWebhookSecret = ref(false)
const createDialogVisible = ref(false)
const createFormRef = ref<FormInstance>()
const createForm = reactive({
keyName: '',
permissions: ['读取']
})
const createRules = reactive<FormRules>({
keyName: [{ required: true, message: '请输入密钥名称', trigger: 'blur' }]
})
const copyToClipboard = (text: string) => {
navigator.clipboard.writeText(text).then(() => {
ElMessage.success('已复制到剪贴板')
})
}
const showCreateDialog = () => {
createForm.keyName = ''
createForm.permissions = ['读取']
createDialogVisible.value = true
}
const handleCreateKey = async () => {
if (!createFormRef.value) return
await createFormRef.value.validate((valid) => {
if (valid) {
const newKey: ApiKey = {
id: Date.now().toString(),
keyName: createForm.keyName,
appKey: `ak_${Date.now()}`,
appSecret: `sk_${Math.random().toString(36).substring(2)}`,
permissions: createForm.permissions,
status: 'active',
createTime: new Date().toLocaleString('zh-CN'),
showSecret: false
}
apiKeyList.value.push(newKey)
createDialogVisible.value = false
ElMessage.success('密钥生成成功，请妥善保管')
}
})
}
const handleResetKey = (row: ApiKey) => {
ElMessageBox.confirm('重置后原密钥将失效，确定要重置吗？', '重置密钥', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
row.appSecret = `sk_${Math.random().toString(36).substring(2)}`
ElMessage.success('密钥重置成功')
})
}
const handleDelete = (row: ApiKey) => {
ElMessageBox.confirm('删除后无法恢复，确定要删除吗？', '删除密钥', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'error'
}).then(() => {
const index = apiKeyList.value.findIndex((item) => item.id === row.id)
if (index !== -1) apiKeyList.value.splice(index, 1)
ElMessage.success('删除成功')
})
}
const saveWebhook = () => {
ElMessage.success('Webhook配置保存成功')
}
const testWebhook = () => {
ElMessage.info('正在发送测试推送...')
setTimeout(() => {
ElMessage.success('测试推送成功')
}, 1500)
}
</script>
<style lang="scss" scoped>
.page-content {
.stat-box {
padding: 20px;
background: var(--el-bg-color);
border-radius: 8px;
text-align: center;
.stat-label {
font-size: 14px;
color: var(--el-text-color-secondary);
margin-bottom: 8px;
}
.stat-value {
font-size: 28px;
font-weight: 600;
color: var(--el-text-color-primary);
}
}
:deep(.el-checkbox) {
margin-right: 20px;
margin-bottom: 10px;
}
}
</style>