feat: add entitlement plans and topic sessions

ai_knowledge_base_v2/apps/user-client/src/components/SessionQuota.vue

@@ -1,18 +1,30 @@
 <script setup lang="ts">
 import { Layers3 } from "@lucide/vue";
+import { computed } from "vue";
 
-defineProps<{
+import type { UserEntitlementSummary } from "../types/api";
+
+const props = defineProps<{
   used: number;
   limit: number;
+  entitlement?: UserEntitlementSummary | null;
 }>();
+
+const hasEntitlement = computed(() => Boolean(props.entitlement));
+const displayUsed = computed(() => props.entitlement?.monthlyTopicUsed ?? props.used);
+const displayLimit = computed(() => props.entitlement?.monthlyTopicLimit ?? props.limit);
+const exhausted = computed(() => displayLimit.value !== null && displayLimit.value > 0 && displayUsed.value >= displayLimit.value);
+const title = computed(() => props.entitlement ? "本月主题额度" : "当前会话额度");
+const limitText = computed(() => displayLimit.value === null ? "不限" : String(displayLimit.value));
 </script>
 
 <template>
-  <section class="session-quota" :class="{ exhausted: limit > 0 && used >= limit }" aria-label="当前会话额度">
+  <section class="session-quota" :class="{ exhausted }" :aria-label="title">
     <div>
       <Layers3 :size="18" aria-hidden="true" />
-      <span>当前会话额度</span>
+      <span>{{ title }}</span>
+      <small v-if="hasEntitlement">{{ entitlement?.name }}</small>
     </div>
-    <strong>{{ used }}/{{ limit }}</strong>
+    <strong>{{ displayUsed }}/{{ limitText }}</strong>
   </section>
 </template>