mirror of
https://github.com/yangjian102621/geekai.git
synced 2026-05-10 11:44:28 +08:00
237 lines
7.3 KiB
Vue
237 lines
7.3 KiB
Vue
<template>
|
||
<div class="system-config form" v-loading="loading">
|
||
<div class="container">
|
||
<el-form
|
||
:model="jimengConfig"
|
||
label-width="150px"
|
||
label-position="top"
|
||
ref="configFormRef"
|
||
:rules="rules"
|
||
class="py-3 px-5"
|
||
>
|
||
<!-- 秘钥配置分组 -->
|
||
<div class="mb-3">
|
||
<h3 class="heading-3 mb-2">秘钥配置</h3>
|
||
<div class="py-3">
|
||
<Alert type="info">
|
||
<p class="mb-1">
|
||
1. 要使用即梦 AI 功能，需要先在火山引擎控制台开通
|
||
<a
|
||
href="https://console.volcengine.com/ai/ability/detail/10"
|
||
target="_blank"
|
||
class="text-blue-500"
|
||
>即梦 AI</a
|
||
>
|
||
和
|
||
<a
|
||
href="https://console.volcengine.com/ai/ability/detail/1"
|
||
target="_blank"
|
||
class="text-blue-500"
|
||
>智能绘图</a
|
||
>以及<a
|
||
href="https://console.volcengine.com/ark/region:ark+cn-beijing/openManagement"
|
||
target="_blank"
|
||
class="text-blue-500"
|
||
>火山方舟</a
|
||
>
|
||
服务。
|
||
</p>
|
||
<p>
|
||
2. AccessKey和SecretKey 请在火山引擎控制台 ->
|
||
<a
|
||
href="https://console.volcengine.com/iam/keymanage/"
|
||
target="_blank"
|
||
class="text-blue-500"
|
||
>秘钥管理</a
|
||
>
|
||
获取。
|
||
</p>
|
||
<p>
|
||
3. ApiKey 请在火山方舟控制台 ->
|
||
<a
|
||
href="https://console.volcengine.com/ark/region:ark+cn-beijing/apiKey?apikey=%7B%7D"
|
||
target="_blank"
|
||
class="text-blue-500"
|
||
>
|
||
API Key管理</a
|
||
>
|
||
获取。
|
||
</p>
|
||
</Alert>
|
||
</div>
|
||
<el-form-item label="AccessKey" prop="access_key">
|
||
<el-input v-model="jimengConfig.access_key" placeholder="请输入即梦AI的AccessKey" />
|
||
</el-form-item>
|
||
<el-form-item label="SecretKey" prop="secret_key">
|
||
<el-input v-model="jimengConfig.secret_key" placeholder="请输入即梦AI的SecretKey" />
|
||
</el-form-item>
|
||
<el-form-item prop="api_key">
|
||
<template #label>
|
||
<div class="text-sm">
|
||
火山方舟服务API Key（<span class="text-red-400"
|
||
>目前火山方舟服务只支持API Key验证</span
|
||
>）
|
||
</div>
|
||
</template>
|
||
<el-input v-model="jimengConfig.api_key" placeholder="请输入火山方舟服务API Key" />
|
||
<div class="text-sm mt-2 text-gray-500">
|
||
目前豆包生图 4.0 模型在即梦API中不支持，需要使用火山方舟服务。
|
||
</div>
|
||
</el-form-item>
|
||
</div>
|
||
<el-divider />
|
||
<!-- 算力配置分组 -->
|
||
<div class="mb-3">
|
||
<h3 class="heading-3 mb-3">任务积分配置</h3>
|
||
<Alert type="info" class="mb-3">
|
||
<div class="text-gray-500">
|
||
图片类模型统一都是 0.2 元一张，假如你100积分售价1元，建议设置：20积分/张。
|
||
</div>
|
||
<div class="text-gray-500">
|
||
视频/数字人/动作迁移单位：积分/秒，但是不同的模型的价格不一样，建议去火山方舟控制台查看，根据价格设置积分。
|
||
</div>
|
||
</Alert>
|
||
|
||
<div v-for="func in functions" :key="func.key" class="mb-4">
|
||
<h4 class="mb-2 text-base font-bold flex items-center gap-2">
|
||
<i class="iconfont" :class="func.icon"></i>
|
||
{{ func.name }}
|
||
<el-tag size="small" type="info">{{ getUnit(func.key) }}</el-tag>
|
||
</h4>
|
||
<div class="grid grid-cols-1 md:grid-cols-2 gap-3">
|
||
<div
|
||
v-for="model in params[func.key]"
|
||
:key="model.key"
|
||
class="p-3 rounded-md border border-gray-100"
|
||
>
|
||
<div class="text-sm mb-2">
|
||
<div class="font-bold">{{ model.name }}</div>
|
||
<div class="text-gray-500 line-clamp-2" :title="model.label">
|
||
{{ model.label }}
|
||
</div>
|
||
</div>
|
||
<el-input-number
|
||
v-model="jimengConfig.powers[model.key]"
|
||
:min="1"
|
||
:placeholder="`对应模型：${model.key}（${getUnit(func.key)}）`"
|
||
class="w-full"
|
||
/>
|
||
<div class="text-xs text-gray-400 mt-1">对应模型：{{ model.key }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="padding: 10px">
|
||
<el-form-item>
|
||
<el-button type="primary" @click="saveConfig" :loading="saving">保存配置</el-button>
|
||
<el-button @click="resetConfig">重置</el-button>
|
||
</el-form-item>
|
||
</div>
|
||
</el-form>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import Alert from '@/components/ui/Alert.vue'
|
||
import { JimengFunctions, JimengParams } from '@/store/data/jimeng_params'
|
||
import { httpGet, httpPost } from '@/utils/http'
|
||
import { ElMessage } from 'element-plus'
|
||
import { onMounted, ref } from 'vue'
|
||
|
||
const jimengConfig = ref({
|
||
access_key: '',
|
||
secret_key: '',
|
||
api_key: '',
|
||
powers: {},
|
||
})
|
||
|
||
const loading = ref(true)
|
||
const saving = ref(false)
|
||
const configFormRef = ref()
|
||
const functions = JimengFunctions
|
||
const params = JimengParams
|
||
|
||
// 表单验证规则
|
||
const rules = {
|
||
access_key: [{ required: true, message: '请输入AccessKey', trigger: 'blur' }],
|
||
secret_key: [{ required: true, message: '请输入SecretKey', trigger: 'blur' }],
|
||
}
|
||
|
||
const getUnit = (funcKey) => (funcKey === 'image' ? '积分/张' : '积分/秒')
|
||
|
||
onMounted(() => {
|
||
loadConfig()
|
||
})
|
||
|
||
// 加载配置
|
||
const loadConfig = async () => {
|
||
try {
|
||
const res = await httpGet('/api/admin/config/get?key=jimeng')
|
||
const cfg = res.data || {}
|
||
cfg.powers = cfg.powers || {}
|
||
jimengConfig.value = cfg
|
||
} catch (e) {
|
||
ElMessage.error('加载配置失败: ' + e.message)
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
|
||
// 保存配置
|
||
const saveConfig = async () => {
|
||
try {
|
||
await configFormRef.value.validate()
|
||
saving.value = true
|
||
await httpPost('/api/admin/jimeng/config/update', jimengConfig.value)
|
||
ElMessage.success('配置保存成功！')
|
||
} catch (e) {
|
||
if (e.message) {
|
||
ElMessage.error(e.message)
|
||
}
|
||
} finally {
|
||
saving.value = false
|
||
}
|
||
}
|
||
|
||
// 重置配置
|
||
const resetConfig = () => {
|
||
jimengConfig.value = {
|
||
access_key: '',
|
||
secret_key: '',
|
||
api_key: '',
|
||
powers: {},
|
||
}
|
||
ElMessage.info('配置已重置')
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@use '../../../assets/css/admin/form.scss' as *;
|
||
@use '../../../assets/css/main.scss' as *;
|
||
|
||
.system-config {
|
||
display: flex;
|
||
justify-content: center;
|
||
|
||
.container {
|
||
width: 100%;
|
||
max-width: 1000px;
|
||
}
|
||
|
||
.heading-3 {
|
||
color: var(--theme-text-color-primary);
|
||
}
|
||
|
||
.label-title {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 5px;
|
||
}
|
||
|
||
.el-input-number {
|
||
width: 100%;
|
||
}
|
||
}
|
||
</style>
|