67 lines
2.2 KiB
Vue
67 lines
2.2 KiB
Vue
<template>
|
||
<n-form label-placement="left" label-width="130">
|
||
<n-space vertical style="width:100%">
|
||
<n-divider title-placement="left">前端配置</n-divider>
|
||
<n-form-item label="所属地区">
|
||
<n-select
|
||
v-model:value="model.region"
|
||
:options="[
|
||
{ label: '中国内地 (cn)', value: 'cn' },
|
||
{ label: '新加坡 (sgp)', value: 'sgp' },
|
||
]"
|
||
placeholder="选择地区"
|
||
/>
|
||
</n-form-item>
|
||
<n-form-item label="身份标 (prefix)">
|
||
<n-input
|
||
v-model:value="model.prefix"
|
||
placeholder="从概览页获取身份标"
|
||
autocomplete="off"
|
||
/>
|
||
</n-form-item>
|
||
<n-form-item label="场景ID">
|
||
<n-input
|
||
v-model:value="model.scene_id"
|
||
placeholder="从验证码场景列表获取 SceneId"
|
||
autocomplete="off"
|
||
/>
|
||
</n-form-item>
|
||
|
||
<n-divider title-placement="left">后端 API 密钥（用于服务端验签）</n-divider>
|
||
<n-form-item label="AccessKey ID">
|
||
<n-input
|
||
v-model:value="model.access_key_id"
|
||
placeholder="阿里云 RAM 用户 AccessKey ID"
|
||
autocomplete="off"
|
||
/>
|
||
</n-form-item>
|
||
<n-form-item label="AccessKey Secret">
|
||
<n-input
|
||
v-model:value="model.access_key_secret"
|
||
type="password"
|
||
show-password-on="click"
|
||
autocomplete="current-password"
|
||
placeholder="阿里云 RAM 用户 AccessKey Secret"
|
||
/>
|
||
</n-form-item>
|
||
<n-alert type="warning" style="margin-bottom: 8px;">
|
||
请使用 RAM 子账号密钥并授权 <code>AliyunYundunAFSFullAccess</code> 权限，切勿使用主账号密钥。
|
||
</n-alert>
|
||
|
||
<n-tag v-if="isConfigured" type="success" size="small">✓ 已完整配置</n-tag>
|
||
<n-tag v-else type="warning" size="small">未完成配置</n-tag>
|
||
</n-space>
|
||
</n-form>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed } from 'vue'
|
||
|
||
const model = defineModel({ type: Object, default: () => ({}) })
|
||
|
||
const isConfigured = computed(() => {
|
||
const c = model.value
|
||
return !!(c.region && c.prefix && c.scene_id && c.access_key_id && c.access_key_secret)
|
||
})
|
||
</script>
|