Merge pull request #263 from nagisa77/codex/enhance-event-page-for-tea-exchange

Add milk tea event detail page

open-isle-cli/src/components/LevelProgress.vue

@@ -0,0 +1,59 @@
+<template>
+  <div class="level-progress">
+    <div class="level-progress-current">Lv.{{ currentLevel }}</div>
+    <ProgressBar :value="value" :max="max" />
+    <div class="level-progress-info">
+      <div class="level-progress-exp">{{ exp }} / {{ nextExp }}</div>
+      <div class="level-progress-target">🎉目标 Lv.{{ currentLevel + 1 }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ProgressBar from './ProgressBar.vue'
+import { prevLevelExp } from '../utils/level'
+export default {
+  name: 'LevelProgress',
+  components: { ProgressBar },
+  props: {
+    exp: { type: Number, default: 0 },
+    currentLevel: { type: Number, default: 0 },
+    nextExp: { type: Number, default: 0 }
+  },
+  computed: {
+    max () {
+      return this.nextExp - prevLevelExp(this.currentLevel)
+    },
+    value () {
+      return this.exp - prevLevelExp(this.currentLevel)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.level-progress {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-top: 10px;
+  font-size: 14px;
+}
+
+.level-progress-current {
+  font-weight: bold;
+}
+
+.level-progress-info {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  align-items: center;
+}
+
+.level-progress-exp,
+.level-progress-target {
+  font-size: 12px;
+  opacity: 0.8;
+}
+</style>

open-isle-cli/src/components/ProgressBar.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="progress-bar">
+    <div class="progress-bar-inner" :style="{ width: `${percent}%` }" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ProgressBar',
+  props: {
+    value: { type: Number, default: 0 },
+    max: { type: Number, default: 100 }
+  },
+  computed: {
+    percent () {
+      if (this.max <= 0) return 0
+      const p = (this.value / this.max) * 100
+      return Math.max(0, Math.min(100, p))
+    }
+  }
+}
+</script>
+
+<style scoped>
+.progress-bar {
+  width: 200px;
+  height: 8px;
+  background-color: var(--normal-background-color);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.progress-bar-inner {
+  height: 100%;
+  background-color: var(--primary-color);
+}
+</style>

open-isle-cli/src/router/index.js

@@ -4,6 +4,7 @@ import MessagePageView from '../views/MessagePageView.vue'
 import AboutPageView from '../views/AboutPageView.vue'
 import SiteStatsPageView from '../views/SiteStatsPageView.vue'
 import ActivityListPageView from '../views/ActivityListPageView.vue'
+import MilkTeaActivityPageView from '../views/MilkTeaActivityPageView.vue'
 import PostPageView from '../views/PostPageView.vue'
 import LoginPageView from '../views/LoginPageView.vue'
 import SignupPageView from '../views/SignupPageView.vue'
@@ -44,6 +45,11 @@ const routes = [
     name: 'activities',
     component: ActivityListPageView
   },
+  {
+    path: '/activities/milk-tea',
+    name: 'activity-milk-tea',
+    component: MilkTeaActivityPageView
+  },
   {
     path: '/new-post',
     name: 'new-post',

open-isle-cli/src/views/ActivityListPageView.vue

@@ -1,25 +1,46 @@
 <template>
   <div class="activity-list-page">
     <div class="activity-list-page-card" v-for="a in activities" :key="a.id">
-      <div class="activity-list-page-card-normal">
+      <router-link v-if="a.type === 'MILK_TEA'" class="activity-link" to="/activities/milk-tea">
-      <div v-if="a.icon" class="activity-card-normal-left">
+        <div class="activity-list-page-card-normal">
-        <img :src="a.icon" alt="avatar" class="activity-card-left-avatar-img" />
+        <div v-if="a.icon" class="activity-card-normal-left">
-      </div>
+          <img :src="a.icon" alt="avatar" class="activity-card-left-avatar-img" />
-      <div class="activity-card-normal-right">
-        <div class="activity-card-normal-right-header">
-          <div class="activity-list-page-card-title">{{ a.title }}</div>
-          <div v-if="a.ended" class="activity-list-page-card-state-end">已结束</div>
-          <div v-else class="activity-list-page-card-state-ongoing">进行中</div>
         </div>
-        <div class="activity-list-page-card-content">{{ a.content }}</div>
+        <div class="activity-card-normal-right">
-        <div class="activity-list-page-card-footer">
+          <div class="activity-card-normal-right-header">
-          <div class="activity-list-page-card-footer-start-time">
+            <div class="activity-list-page-card-title">{{ a.title }}</div>
-            <i class="fas fa-clock"></i>
+            <div v-if="a.ended" class="activity-list-page-card-state-end">已结束</div>
-            <span>开始于 {{ TimeManager.format(a.startTime) }}</span>
+            <div v-else class="activity-list-page-card-state-ongoing">进行中</div>
+          </div>
+          <div class="activity-list-page-card-content">{{ a.content }}</div>
+          <div class="activity-list-page-card-footer">
+            <div class="activity-list-page-card-footer-start-time">
+              <i class="fas fa-clock"></i>
+              <span>开始于 {{ TimeManager.format(a.startTime) }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+      </router-link>
+      <div v-else class="activity-list-page-card-normal">
+        <div v-if="a.icon" class="activity-card-normal-left">
+          <img :src="a.icon" alt="avatar" class="activity-card-left-avatar-img" />
+        </div>
+        <div class="activity-card-normal-right">
+          <div class="activity-card-normal-right-header">
+            <div class="activity-list-page-card-title">{{ a.title }}</div>
+            <div v-if="a.ended" class="activity-list-page-card-state-end">已结束</div>
+            <div v-else class="activity-list-page-card-state-ongoing">进行中</div>
+          </div>
+          <div class="activity-list-page-card-content">{{ a.content }}</div>
+          <div class="activity-list-page-card-footer">
+            <div class="activity-list-page-card-footer-start-time">
+              <i class="fas fa-clock"></i>
+              <span>开始于 {{ TimeManager.format(a.startTime) }}</span>
+            </div>
           </div>
         </div>
       </div>
-    </div>
     </div>
   </div>
 </template>
@@ -117,4 +138,9 @@ export default {
   opacity: 0.7;
 }
 
+.activity-link {
+  text-decoration: none;
+  color: inherit;
+}
+
 </style>

open-isle-cli/src/views/MilkTeaActivityPageView.vue

@@ -0,0 +1,170 @@
+<template>
+  <div class="milk-tea-page">
+    <div class="milk-tea-status">
+      <div class="status-title">已兑换奶茶人数</div>
+      <ProgressBar :value="info.level1Count" :max="50" />
+      <div class="status-text">{{ info.level1Count }} / 50</div>
+    </div>
+    <div v-if="user" class="user-level">
+      <LevelProgress :exp="user.experience" :current-level="user.currentLevel" :next-exp="user.nextLevelExp" />
+    </div>
+    <LoginOverlay v-else />
+    <div v-if="user && user.currentLevel >= 1 && !info.ended" class="redeem-button" @click="openDialog">
+      兑换
+    </div>
+    <div v-if="dialogVisible" class="redeem-dialog">
+      <div class="redeem-dialog-overlay" @click="closeDialog"></div>
+      <div class="redeem-dialog-content">
+        <input v-model="contact" class="redeem-input" placeholder="联系方式" />
+        <div class="redeem-actions">
+          <button @click="submitRedeem" :disabled="loading">提交</button>
+          <button @click="closeDialog">取消</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ProgressBar from '../components/ProgressBar.vue'
+import LevelProgress from '../components/LevelProgress.vue'
+import LoginOverlay from '../components/LoginOverlay.vue'
+import { API_BASE_URL, toast } from '../main'
+import { getToken, fetchCurrentUser } from '../utils/auth'
+
+export default {
+  name: 'MilkTeaActivityPageView',
+  components: { ProgressBar, LevelProgress, LoginOverlay },
+  data () {
+    return {
+      info: { level1Count: 0, ended: false },
+      user: null,
+      dialogVisible: false,
+      contact: '',
+      loading: false
+    }
+  },
+  async mounted () {
+    await this.loadInfo()
+    this.user = await fetchCurrentUser()
+  },
+  methods: {
+    async loadInfo () {
+      const res = await fetch(`${API_BASE_URL}/api/activities/milk-tea`)
+      if (res.ok) {
+        this.info = await res.json()
+      }
+    },
+    openDialog () {
+      this.dialogVisible = true
+    },
+    closeDialog () {
+      this.dialogVisible = false
+    },
+    async submitRedeem () {
+      if (!this.contact) return
+      this.loading = true
+      const token = getToken()
+      const res = await fetch(`${API_BASE_URL}/api/activities/milk-tea/redeem`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${token}`
+        },
+        body: JSON.stringify({ contact: this.contact })
+      })
+      if (res.ok) {
+        toast.success('兑换成功！')
+        this.dialogVisible = false
+        await this.loadInfo()
+      } else {
+        toast.error('兑换失败')
+      }
+      this.loading = false
+    }
+  }
+}
+</script>
+
+<style scoped>
+.milk-tea-page {
+  padding: 20px;
+  background-color: var(--background-color);
+  height: calc(100vh - var(--header-height) - 40px);
+}
+
+.milk-tea-status {
+  margin-bottom: 20px;
+}
+
+.status-title {
+  font-weight: bold;
+  margin-bottom: 4px;
+}
+
+.status-text {
+  font-size: 14px;
+  margin-top: 4px;
+}
+
+.redeem-button {
+  margin-top: 20px;
+  padding: 6px 12px;
+  border-radius: 4px;
+  background-color: var(--primary-color);
+  color: white;
+  width: fit-content;
+  cursor: pointer;
+}
+
+.redeem-button:hover {
+  background-color: var(--primary-color-hover);
+}
+
+.redeem-dialog {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 20;
+}
+
+.redeem-dialog-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  backdrop-filter: blur(3px);
+  -webkit-backdrop-filter: blur(3px);
+}
+
+.redeem-dialog-content {
+  position: relative;
+  z-index: 2;
+  background-color: var(--background-color);
+  padding: 20px;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-width: 250px;
+}
+
+.redeem-actions {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  gap: 10px;
+}
+
+.redeem-input {
+  padding: 6px;
+  border: 1px solid var(--normal-border-color);
+  border-radius: 4px;
+}
+</style>

open-isle-cli/src/views/ProfileView.vue

@@ -20,24 +20,17 @@
             <i class="fas fa-user-minus"></i>
             取消关注
           </div>
-          <div class="profile-level-container">
+          <LevelProgress
-            <div class="profile-level-current">Lv.{{ levelInfo.currentLevel }}</div>
+            :exp="levelInfo.exp"
-            <div class="profile-level-bar">
+            :current-level="levelInfo.currentLevel"
-              <div class="profile-level-bar-inner" :style="{ width: `${levelInfo.percent}%` }" />
+            :next-exp="levelInfo.nextExp"
-            </div>
+          />
-            <div class="profile-level-info">
+          <div class="profile-level-target">
-              <div class="profile-level-exp">
+            目标 Lv.{{ levelInfo.currentLevel + 1 }}
-                {{ levelInfo.exp }} / {{ levelInfo.nextExp }}
+            <i
-              </div>
+              class="fas fa-info-circle profile-exp-info"
-              <div class="profile-level-target">🎉目标 Lv.{{ levelInfo.currentLevel + 1 }}</div>
+              title="经验值可通过发帖、评论等操作获得，达到目标后即可提升等级，解锁更多功能。"
-            </div>
+            ></i>
-            <div class="profile-level-target">
-              目标 Lv.{{ levelInfo.currentLevel + 1 }}
-              <i
-                class="fas fa-info-circle profile-exp-info"
-                title="经验值可通过发帖、评论等操作获得，达到目标后即可提升等级，解锁更多功能。"
-              ></i>
-            </div>
           </div>
         </div>
       </div>
@@ -259,6 +252,7 @@ import { getToken, authState } from '../utils/auth'
 import BaseTimeline from '../components/BaseTimeline.vue'
 import UserList from '../components/UserList.vue'
 import BasePlaceholder from '../components/BasePlaceholder.vue'
+import LevelProgress from '../components/LevelProgress.vue'
 import { stripMarkdown, stripMarkdownLength } from '../utils/markdown'
 import TimeManager from '../utils/time'
 import { prevLevelExp } from '../utils/level'
@@ -267,7 +261,7 @@ hatch.register()
 
 export default {
   name: 'ProfileView',
-  components: { BaseTimeline, UserList, BasePlaceholder },
+  components: { BaseTimeline, UserList, BasePlaceholder, LevelProgress },
   setup() {
     const route = useRoute()
     const router = useRouter()