feat(admin-frontend): 完成节点与礼品卡管理工作台

补齐节点管理真实新增、编辑与排序流程，接入权限组与路由组维护页，并支持 11 种协议的动态配置表单开放礼品卡管理入口，交付模板、兑换码、使用记录与统计四页签工作台，接入 gift-card 相关后台接口将知识库、权限组与路由管理从占位页升级为真实页面，并修复侧边栏低高度裁切问题修复仪表盘 24h 流量排行涨跌始终为 0 的问题，改为对比昨天整日统计并补充单元测试
2026-04-24 21:58:16 +08:00
parent f7cef30b9c
commit e393b11b61
80 changed files with 8811 additions and 278 deletions
@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import { reactive, ref, watch } from 'vue'
+import { ElMessage } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import { generateGiftCardCodes } from '@/api/admin'
+import type { AdminGiftCardTemplateItem } from '@/types/api'
+
+const props = defineProps<{
+  visible: boolean
+  templates: AdminGiftCardTemplateItem[]
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:visible', value: boolean): void
+  (e: 'success', payload: { batchId: string }): void
+}>()
+
+const formRef = ref<FormInstance>()
+const saving = ref(false)
+const form = reactive({
+  template_id: undefined as number | undefined,
+  count: 10,
+  prefix: 'GC',
+  expires_hours: undefined as number | undefined,
+  max_usage: 1,
+})
+
+const rules: FormRules<typeof form> = {
+  template_id: [{ required: true, message: '请选择模板', trigger: 'change' }],
+  count: [{ required: true, message: '请输入生成数量', trigger: 'blur' }],
+}
+
+function resetForm() {
+  form.template_id = undefined
+  form.count = 10
+  form.prefix = 'GC'
+  form.expires_hours = undefined
+  form.max_usage = 1
+}
+
+function closeDialog() {
+  emit('update:visible', false)
+}
+
+async function handleSubmit() {
+  const valid = await formRef.value?.validate().catch(() => false)
+  if (!valid || !form.template_id) {
+    return
+  }
+
+  saving.value = true
+  try {
+    const response = await generateGiftCardCodes({
+      template_id: form.template_id,
+      count: form.count,
+      prefix: form.prefix.trim() || 'GC',
+      expires_hours: form.expires_hours,
+      max_usage: form.max_usage,
+    })
+    ElMessage.success(`兑换码已生成，本次批次：${response.data.batch_id}`)
+    emit('success', { batchId: response.data.batch_id })
+    closeDialog()
+  } catch (error) {
+    ElMessage.error(error instanceof Error ? error.message : '兑换码生成失败')
+  } finally {
+    saving.value = false
+  }
+}
+
+watch(
+  () => props.visible,
+  (visible) => {
+    if (visible) {
+      resetForm()
+    }
+  },
+)
+</script>
+
+<template>
+  <ElDialog
+    :model-value="visible"
+    title="生成兑换码"
+    width="520px"
+    @update:model-value="emit('update:visible', $event)"
+  >
+    <ElForm ref="formRef" :model="form" :rules="rules" label-position="top" class="batch-form">
+      <ElFormItem label="模板" prop="template_id">
+        <ElSelect v-model="form.template_id" placeholder="请选择一个礼品卡模板">
+          <ElOption
+            v-for="item in templates"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          />
+        </ElSelect>
+      </ElFormItem>
+
+      <div class="form-grid">
+        <ElFormItem label="生成数量" prop="count">
+          <ElInputNumber v-model="form.count" :min="1" :max="10000" class="number-input" />
+        </ElFormItem>
+
+        <ElFormItem label="最大使用次数">
+          <ElInputNumber v-model="form.max_usage" :min="1" :max="1000" class="number-input" />
+        </ElFormItem>
+
+        <ElFormItem label="前缀">
+          <ElInput v-model="form.prefix" maxlength="10" placeholder="例如 GC" />
+        </ElFormItem>
+
+        <ElFormItem label="有效期（小时）">
+          <ElInputNumber v-model="form.expires_hours" :min="1" class="number-input" />
+        </ElFormItem>
+      </div>
+
+      <ElAlert
+        type="info"
+        :closable="false"
+        show-icon
+        title="生成后可在兑换码管理中按批次导出文本文件，并继续做启停、编辑或删除操作。"
+      />
+    </ElForm>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <ElButton @click="closeDialog">取消</ElButton>
+        <ElButton type="primary" :loading="saving" @click="handleSubmit">开始生成</ElButton>
+      </div>
+    </template>
+  </ElDialog>
+</template>
+
+<style scoped lang="scss">
+.batch-form {
+  display: grid;
+  gap: 18px;
+}
+
+.form-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.number-input {
+  width: 100%;
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 12px;
+}
+
+@media (max-width: 640px) {
+  .form-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style>