feat: add point rules and products

feat: add point mall module

frontend_nuxt/components/MenuComponent.vue

@@ -56,6 +56,19 @@
             <i class="menu-item-icon fas fa-chart-line"></i>
             <span class="menu-item-text">站点统计</span>
           </NuxtLink>
+          <NuxtLink
+            v-if="authState.loggedIn"
+            class="menu-item"
+            exact-active-class="selected"
+            to="/about/points"
+            @click="handleItemClick"
+          >
+            <i class="menu-item-icon fas fa-coins"></i>
+            <span class="menu-item-text">
+              积分商城
+              <span v-if="myPoint !== null" class="point-count">{{ myPoint }}</span>
+            </span>
+          </NuxtLink>
         </div>
 
         <div class="menu-section">
@@ -130,7 +143,7 @@
 
 <script setup>
 import { computed, onMounted, ref, watch } from 'vue'
-import { authState } from '~/utils/auth'
+import { authState, fetchCurrentUser } from '~/utils/auth'
 import { fetchUnreadCount, notificationState } from '~/utils/notification'
 import { useIsMobile } from '~/utils/screen'
 import { cycleTheme, ThemeMode, themeState } from '~/utils/theme'
@@ -147,6 +160,7 @@ const emit = defineEmits(['item-click'])
 
 const categoryOpen = ref(true)
 const tagOpen = ref(true)
+const myPoint = ref(null)
 
 /** ✅ 用 useAsyncData 替换原生 fetch，避免 SSR+CSR 二次请求 */
 const {
@@ -191,6 +205,15 @@ const unreadCount = computed(() => notificationState.unreadCount)
 const showUnreadCount = computed(() => (unreadCount.value > 99 ? '99+' : unreadCount.value))
 const shouldShowStats = computed(() => authState.role === 'ADMIN')
 
+const loadPoint = async () => {
+  if (authState.loggedIn) {
+    const user = await fetchCurrentUser()
+    myPoint.value = user ? user.point : null
+  } else {
+    myPoint.value = null
+  }
+}
+
 const updateCount = async () => {
   if (authState.loggedIn) {
     await fetchUnreadCount()
@@ -200,9 +223,15 @@ const updateCount = async () => {
 }
 
 onMounted(async () => {
-  await updateCount()
+  await Promise.all([updateCount(), loadPoint()])
-  // 登录态变化时再拉一次未读数；与 useAsyncData 无关
+  // 登录态变化时再拉一次未读数和积分；与 useAsyncData 无关
-  watch(() => authState.loggedIn, updateCount)
+  watch(
+    () => authState.loggedIn,
+    () => {
+      updateCount()
+      loadPoint()
+    },
+  )
 })
 
 const handleItemClick = () => {
@@ -292,6 +321,12 @@ const gotoTag = (t) => {
   font-weight: bold;
 }
 
+.point-count {
+  margin-left: 4px;
+  font-size: 12px;
+  color: var(--primary-color);
+}
+
 .menu-item-icon {
   margin-right: 10px;
   opacity: 0.5;

frontend_nuxt/pages/about/points.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="point-mall-page">
+    <p v-if="authState.loggedIn && point !== null">我的积分：{{ point }}</p>
+    <p v-else>请先登录以查看积分</p>
+
+    <section class="rules">
+      <h2>积分规则</h2>
+      <ul>
+        <li v-for="(rule, idx) in pointRules" :key="idx">{{ rule }}</li>
+      </ul>
+    </section>
+
+    <section class="goods">
+      <h2>积分兑换商品</h2>
+      <ul>
+        <li v-for="(good, idx) in goods" :key="idx">{{ good.name }} - {{ good.cost }} 积分</li>
+      </ul>
+    </section>
+  </div>
+</template>
+
+<script setup>
+import { onMounted, ref } from 'vue'
+import { authState, fetchCurrentUser } from '~/utils/auth'
+
+const point = ref(null)
+
+const pointRules = [
+  '发帖：每天前两次，每次 30 积分',
+  '评论：每天前四条评论可获 10 积分，你的帖子被评论也可获 10 积分',
+  '帖子被点赞：每次 10 积分',
+  '评论被点赞：每次 10 积分',
+]
+
+const goods = [
+  { name: 'GPT Plus for 1 month', cost: 20000 },
+  { name: '奶茶', cost: 5000 },
+]
+
+onMounted(async () => {
+  if (authState.loggedIn) {
+    const user = await fetchCurrentUser()
+    point.value = user ? user.point : null
+  }
+})
+</script>
+
+<style scoped>
+.point-mall-page {
+  padding: 20px;
+  max-width: var(--page-max-width);
+  background-color: var(--background-color);
+  margin: 0 auto;
+}
+
+.rules,
+.goods {
+  margin-top: 20px;
+}
+</style>