feat: 完成权益到期与续期闭环

ai_knowledge_base_v2/apps/admin-web/src/components/UserEntitlementRenewDialog.vue

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import { computed, reactive, watch } from "vue";
+
+import type { AdminUser } from "../types/api";
+
+const props = defineProps<{
+  modelValue: boolean;
+  users: AdminUser[];
+  submitting: boolean;
+}>();
+
+const emit = defineEmits<{
+  "update:modelValue": [value: boolean];
+  submit: [payload: { extensionDays: number; remark: string }];
+}>();
+
+const form = reactive({ extensionDays: 30, remark: "" });
+const title = computed(() => props.users.length > 1 ? `批量续期（${props.users.length} 人）` : "用户权益续期");
+const userNames = computed(() => props.users.map((user) => user.name || user.phone).join("、"));
+
+watch(() => props.modelValue, (open) => {
+  if (open) Object.assign(form, { extensionDays: 30, remark: "" });
+});
+</script>
+
+<template>
+  <el-dialog
+    :model-value="modelValue"
+    :title="title"
+    width="min(520px, calc(100vw - 32px))"
+    destroy-on-close
+    @update:model-value="$emit('update:modelValue', $event)"
+  >
+    <div class="renew-summary">
+      <span>续期对象</span>
+      <strong>{{ userNames }}</strong>
+      <small>未到期权益从原到期日顺延；已到期权益从当前时间重新生效。长期有效或未分配专属权益的用户不会被误续期。</small>
+    </div>
+    <el-form label-position="top" @submit.prevent>
+      <el-form-item label="延长天数">
+        <el-input-number v-model="form.extensionDays" :min="1" :max="3650" controls-position="right" />
+      </el-form-item>
+      <el-form-item label="续期备注（可选）">
+        <el-input v-model="form.remark" maxlength="255" show-word-limit placeholder="例如：线下续费确认、活动补偿" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button :disabled="submitting" @click="$emit('update:modelValue', false)">取消</el-button>
+      <el-button type="primary" :loading="submitting" @click="emit('submit', form)">确认续期</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<style scoped>
+.renew-summary { display: grid; gap: 6px; margin-bottom: 18px; padding: 14px; border-radius: 10px; background: #f4f8f6; }
+.renew-summary span, .renew-summary small { color: #6d7e78; font-size: 12px; }
+.renew-summary strong { color: #25483e; line-height: 1.55; }
+.renew-summary small { line-height: 1.6; }
+.el-input-number { width: 100%; }
+</style>