导入 AKSRT 主题开发源码

assets/admin/src/components/captcha/AliyunConfig.vue

@@ -0,0 +1,66 @@
+<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>