feat: coffe redeem

open-isle-cli/src/assets/global.css

@@ -22,7 +22,7 @@
   --page-max-width: 1200px;
   --page-max-width-mobile: 900px;
   --article-info-background-color: #f0f0f0;
-  --activity-card-background-color: #f0f0f0;
+  --activity-card-background-color: #fafafa;
 }
 
 [data-theme='dark'] {

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

@@ -1,6 +1,6 @@
 <template>
   <div class="level-progress">
-    <div class="level-progress-current">Lv.{{ currentLevel }}</div>
+    <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>

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

@@ -1,17 +1,28 @@
 <template>
-  <div class="milk-tea-page">
+  <div class="milk-tea-activity">
+    <div class="milk-tea-description">
+      <div class="milk-tea-description-title">
+        <i class="fas fa-info-circle"></i>
+        <span class="milk-tea-description-title-text">升级规则说明</span>
+      </div>
+      <div class="milk-tea-description-content">
+        <p>回复帖子每次10exp，最多3次每天</p>
+        <p>发布帖子每次30exp，最多1次每天</p>  
+        <p>发表情每次5exp，最多3次每天</p>  
+      </div>
+    </div>
+    <div class="milk-tea-status-container">
     <div class="milk-tea-status">
-      <div class="status-title">已兑换奶茶人数</div>
+      <div class="status-title">🔥 已兑换奶茶人数</div>
       <ProgressBar :value="info.level1Count" :max="50" />
-      <div class="status-text">{{ info.level1Count }} / 50</div>
+      <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 v-if="user" class="user-level">
+        <LevelProgress :exp="user.experience" :current-level="user.currentLevel" :next-exp="user.nextLevelExp" />
+      </div>
     </div>
+    <div v-if="user && user.currentLevel >= 1 && !info.ended" class="redeem-button" @click="openDialog">兑换</div>
+    <div v-else class="redeem-button disabled">兑换</div> 
     <div v-if="dialogVisible" class="redeem-dialog">
       <div class="redeem-dialog-overlay" @click="closeDialog"></div>
       <div class="redeem-dialog-content">
@@ -28,13 +39,12 @@
 <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 },
+  name: 'MilkTeaActivityComponent',
+  components: { ProgressBar, LevelProgress },
   data () {
     return {
       info: { level1Count: 0, ended: false },
@@ -87,32 +97,37 @@ export default {
 </script>
 
 <style scoped>
-.milk-tea-page {
-  padding: 20px;
-  background-color: var(--background-color);
-  height: calc(100vh - var(--header-height) - 40px);
+.milk-tea-description-title-text {
+  font-size: 14px;
+  font-weight: bold;
+  margin-left: 5px;
 }
 
-.milk-tea-status {
-  margin-bottom: 20px;
+.milk-tea-description-content {
+  font-size: 12px;
+  opacity: 0.8;
 }
 
 .status-title {
   font-weight: bold;
-  margin-bottom: 4px;
 }
 
 .status-text {
-  font-size: 14px;
-  margin-top: 4px;
+  font-size: 12px;
+  opacity: 0.8;
+}
+
+.milk-tea-activity {
+  margin-top: 20px;
+  padding: 20px;
 }
 
 .redeem-button {
   margin-top: 20px;
-  padding: 6px 12px;
-  border-radius: 4px;
   background-color: var(--primary-color);
-  color: white;
+  color: #fff;
+  padding: 10px 20px;
+  border-radius: 10px;
   width: fit-content;
   cursor: pointer;
 }
@@ -121,6 +136,15 @@ export default {
   background-color: var(--primary-color-hover);
 }
 
+.redeem-button.disabled {
+  background-color: var(--primary-color-disabled);
+  cursor: not-allowed;
+}
+
+.redeem-button.disabled:hover {
+  background-color: var(--primary-color-disabled);
+}
+
 .redeem-dialog {
   position: fixed;
   top: 0;
@@ -143,6 +167,22 @@ export default {
   -webkit-backdrop-filter: blur(3px);
 }
 
+.milk-tea-status-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 30px;
+  margin-top: 20px;
+}
+
+.milk-tea-status {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-top: 10px;
+  font-size: 14px;
+}
+
 .redeem-dialog-content {
   position: relative;
   z-index: 2;

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

@@ -4,7 +4,6 @@ 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'
@@ -45,11 +44,6 @@ 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,28 +1,7 @@
 <template>
   <div class="activity-list-page">
     <div class="activity-list-page-card" v-for="a in activities" :key="a.id">
-      <router-link v-if="a.type === 'MILK_TEA'" class="activity-link" to="/activities/milk-tea">
-        <div 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>
-      </router-link>
-      <div v-else class="activity-list-page-card-normal">
+      <div 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>
@@ -41,6 +20,7 @@
           </div>
         </div>
       </div>
+      <MilkTeaActivityComponent v-if="a.type === 'MILK_TEA'" />
     </div>
   </div>
 </template>
@@ -48,9 +28,11 @@
 <script>
 import { API_BASE_URL } from '../main'
 import TimeManager from '../utils/time'
+import MilkTeaActivityComponent from '../components/MilkTeaActivityComponent.vue'
 
 export default {
   name: 'ActivityListPageView',
+  components: { MilkTeaActivityComponent },
   data() {
     return { activities: [], TimeManager }
   },
@@ -68,6 +50,7 @@ export default {
   background-color: var(--background-color);
   padding: 20px;
   height: calc(100vh - var(--header-height) - 40px);
+  overflow-y: auto;
 }
 
 .activity-list-page-card {

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

@@ -62,6 +62,11 @@
                   </span>
                 </NotificationContainer>
               </template>
+              <template v-else-if="item.type === 'ACTIVITY_REDEEM' && !item.parentComment">
+                <NotificationContainer :item="item" :markRead="markRead">
+                  <span class="notif-user">{{ item.fromUser.username }} </span> 申请进行奶茶兑换，联系方式是：{{ item.content }}
+                </NotificationContainer>
+              </template>
               <template v-else-if="item.type === 'REACTION' && item.post && !item.comment">
                 <NotificationContainer :item="item" :markRead="markRead">
                   <span class="notif-user">{{ item.fromUser.username }} </span> 对我的文章
@@ -287,7 +292,8 @@ export default {
       USER_UNFOLLOWED: 'fas fa-user-minus',
       POST_SUBSCRIBED: 'fas fa-bookmark',
       POST_UNSUBSCRIBED: 'fas fa-bookmark',
-      REGISTER_REQUEST: 'fas fa-user-clock'
+      REGISTER_REQUEST: 'fas fa-user-clock',
+      ACTIVITY_REDEEM: 'fas fa-coffee'
     }
 
     const reactionEmojiMap = {