From 66b7202f497d4b1f883eff694dcfa88740a3a606 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=8F=E6=B2=AB=E8=8A=B1=E7=81=ABzzz=F0=9F=8C=99?=
 <xmcn@1l1.icu>
Date: Sun, 26 Jan 2025 15:56:35 +0800
Subject: [PATCH] [*] Better newyear view

---
 .prettierrc.json                       |   1 +
 auto-imports.d.ts                      |   3 +-
 components.d.ts                        |   8 +-
 src/api/v2/comment.api.ts              |   3 +-
 src/api/v2/prize/index.ts              |   6 +-
 src/api/v2/prize/root.api.ts           |  12 +-
 src/components/UserInfo.vue            |   8 +-
 src/components/sidebar/MainSidebar.vue |  57 +++++--
 src/views/NewYearView.vue              |  27 ++--
 src/views/PrizeView.vue                | 206 +++++++++++++------------
 10 files changed, 182 insertions(+), 149 deletions(-)

diff --git a/.prettierrc.json b/.prettierrc.json
index 2998b24..d83a695 100644
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -4,5 +4,6 @@
     "tabWidth": 2,
     "singleQuote": true,
     "printWidth": 100,
+    "endOfLine": "lf",
     "trailingComma": "none"
 }
\ No newline at end of file
diff --git a/auto-imports.d.ts b/auto-imports.d.ts
index 48f1e9e..b4ca07c 100644
--- a/auto-imports.d.ts
+++ b/auto-imports.d.ts
@@ -3,6 +3,7 @@
 // @ts-nocheck
 // noinspection JSUnusedGlobalSymbols
 // Generated by unplugin-auto-import
+// biome-ignore lint: disable
 export {}
 declare global {
   const EffectScope: typeof import('vue')['EffectScope']
@@ -69,6 +70,6 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
+  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
   import('vue')
 }
diff --git a/components.d.ts b/components.d.ts
index 0ceb666..3b817cb 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -1,22 +1,19 @@
 /* eslint-disable */
-/* prettier-ignore */
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
 export {}
 
+/* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
     GuestSidebar: typeof import('./src/components/sidebar/GuestSidebar.vue')['default']
     LoadingBar: typeof import('./src/components/LoadingBar.vue')['default']
     MainSidebar: typeof import('./src/components/sidebar/MainSidebar.vue')['default']
-    MSLogin: typeof import('./src/components/MSLogin.vue')['default']
     NAlert: typeof import('naive-ui')['NAlert']
     NAvatar: typeof import('naive-ui')['NAvatar']
     NButton: typeof import('naive-ui')['NButton']
     NCard: typeof import('naive-ui')['NCard']
-    NCollapse: typeof import('naive-ui')['NCollapse']
-    NCollapseItem: typeof import('naive-ui')['NCollapseItem']
     NDivider: typeof import('naive-ui')['NDivider']
     NDrawer: typeof import('naive-ui')['NDrawer']
     NDrawerContent: typeof import('naive-ui')['NDrawerContent']
@@ -30,7 +27,6 @@ declare module 'vue' {
     NH2: typeof import('naive-ui')['NH2']
     NH5: typeof import('naive-ui')['NH5']
     NIcon: typeof import('naive-ui')['NIcon']
-    NImage: typeof import('naive-ui')['NImage']
     NInput: typeof import('naive-ui')['NInput']
     NLayout: typeof import('naive-ui')['NLayout']
     NLayoutContent: typeof import('naive-ui')['NLayoutContent']
@@ -40,8 +36,6 @@ declare module 'vue' {
     NModal: typeof import('naive-ui')['NModal']
     NNumberAnimation: typeof import('naive-ui')['NNumberAnimation']
     NP: typeof import('naive-ui')['NP']
-    NQrCode: typeof import('naive-ui')['NQrCode']
-    NSkeleton: typeof import('naive-ui')['NSkeleton']
     NSpace: typeof import('naive-ui')['NSpace']
     NSpin: typeof import('naive-ui')['NSpin']
     NStatistic: typeof import('naive-ui')['NStatistic']
diff --git a/src/api/v2/comment.api.ts b/src/api/v2/comment.api.ts
index 7bc03ea..edca602 100644
--- a/src/api/v2/comment.api.ts
+++ b/src/api/v2/comment.api.ts
@@ -12,7 +12,6 @@ const getCommentList = async (user_id: number) => {
   return base.buildResponse(await rs)
 }
 
-
 /**
  * 添加评论
  */
@@ -26,7 +25,7 @@ const postComment = async (user_id: number, comment: string) => {
 
 const comment = {
   get: getCommentList,
-  post: postComment,
+  post: postComment
 }
 
 export default comment
diff --git a/src/api/v2/prize/index.ts b/src/api/v2/prize/index.ts
index cee56ff..bd02a3e 100644
--- a/src/api/v2/prize/index.ts
+++ b/src/api/v2/prize/index.ts
@@ -1,5 +1,5 @@
-import root from "./root.api"
+import root from './root.api'
 
 export default {
-    root: root
-}
\ No newline at end of file
+  root: root
+}
diff --git a/src/api/v2/prize/root.api.ts b/src/api/v2/prize/root.api.ts
index f841d55..6b1c3b5 100644
--- a/src/api/v2/prize/root.api.ts
+++ b/src/api/v2/prize/root.api.ts
@@ -10,11 +10,11 @@ const getPrize = async (user_id: number) => {
 }
 
 const joinPrize = async (user_id: number, prize_id: number) => {
-    const rs = post(`${base.api_v2_url}/prize`, {
-      user_id: user_id,
-      prize_id: prize_id
-    })
-    return base.buildResponse(await rs)
+  const rs = post(`${base.api_v2_url}/prize`, {
+    user_id: user_id,
+    prize_id: prize_id
+  })
+  return base.buildResponse(await rs)
 }
 
 const prize = {
@@ -22,4 +22,4 @@ const prize = {
   join: joinPrize
 }
 
-export default prize
\ No newline at end of file
+export default prize
diff --git a/src/components/UserInfo.vue b/src/components/UserInfo.vue
index 65b0a44..dfae34b 100644
--- a/src/components/UserInfo.vue
+++ b/src/components/UserInfo.vue
@@ -307,7 +307,13 @@ async function changePassword() {
   }
   let rs
   try {
-    rs = await api.v2.user.password(data.user_id, undefined, data.oldPassword, data.newPassword, undefined)
+    rs = await api.v2.user.password(
+      data.user_id,
+      undefined,
+      data.oldPassword,
+      data.newPassword,
+      undefined
+    )
   } catch (e) {
     logger.error(e)
     tPassword.value.isLoading = false
diff --git a/src/components/sidebar/MainSidebar.vue b/src/components/sidebar/MainSidebar.vue
index 3d935ee..e17f3d3 100644
--- a/src/components/sidebar/MainSidebar.vue
+++ b/src/components/sidebar/MainSidebar.vue
@@ -1,8 +1,26 @@
 <template>
-  <n-layout-sider bordered show-trigger :collapsed="collapsed" @collapse="collapsed = true" @expand="collapsed = false"
-    collapse-mode="width" :collapsed-width="64" :native-scrollbar="false" id="sider" style="height: 100%; bottom: 0">
-    <n-menu ref="menuInstRef" :collapsed="collapsed" :collapsed-width="64" :collapsed-icon-size="22"
-      :options="menuOptions" style="" :value="active" @update:value="handleUpdateValue" />
+  <n-layout-sider
+    bordered
+    show-trigger
+    :collapsed="collapsed"
+    @collapse="collapsed = true"
+    @expand="collapsed = false"
+    collapse-mode="width"
+    :collapsed-width="64"
+    :native-scrollbar="false"
+    id="sider"
+    style="height: 100%; bottom: 0"
+  >
+    <n-menu
+      ref="menuInstRef"
+      :collapsed="collapsed"
+      :collapsed-width="64"
+      :collapsed-icon-size="22"
+      :options="menuOptions"
+      style=""
+      :value="active"
+      @update:value="handleUpdateValue"
+    />
   </n-layout-sider>
 </template>
 
@@ -23,9 +41,9 @@ import {
   CompassSharp,
   GameController
 } from '@vicons/ionicons5'
-import { GuiManagement, Api } from '@vicons/carbon'
+import { GuiManagement, Api, Gift } from '@vicons/carbon'
 import { MoreCircle20Filled, Box24Filled } from '@vicons/fluent'
-import { AttachMoneyFilled, AccountTreeOutlined } from '@vicons/material'
+import { AttachMoneyFilled, AccountTreeOutlined, AnchorTwotone, MessageOutlined } from '@vicons/material'
 
 import router from '@router'
 import { useRoute } from 'vue-router'
@@ -48,16 +66,23 @@ const menuOptions = [
     icon: renderIcon(CompassSharp)
   },
   {
-    path: '/comment',
-    label: '留言',
-    key: 'comment',
-    icon: renderIcon(PencilSharp)
-  },
-  {
-    path: '/prize',
-    label: '抽奖',
-    key: 'prize',
-    icon: renderIcon(PencilSharp)
+    label: '新年活动',
+    key: 'newyear',
+    icon: renderIcon(AnchorTwotone),
+    children: [
+      {
+        path: '/comment',
+        label: '留言',
+        key: 'comment',
+        icon: renderIcon(MessageOutlined)
+      },
+      {
+        path: '/prize',
+        label: '抽奖',
+        key: 'prize',
+        icon: renderIcon(Gift)
+      }
+    ]
   },
   {
     path: '/verification',
diff --git a/src/views/NewYearView.vue b/src/views/NewYearView.vue
index ec9e99a..6eb94e8 100644
--- a/src/views/NewYearView.vue
+++ b/src/views/NewYearView.vue
@@ -7,11 +7,16 @@
     <n-grid cols="1" item-responsive>
       <n-grid-item span="1">
         <n-form-item label="评论和祝福" path="comment">
-          <n-input v-model:value="newYear.comment" placeholder="您有什么想对 LoCyanFrp 全体用户说的吗" />
+          <n-input
+            v-model:value="newYear.comment"
+            placeholder="您有什么想对 LoCyanFrp 全体用户说的吗"
+          />
         </n-form-item>
       </n-grid-item>
       <n-gi span="1">
-        <n-space justify="end"><n-button type="primary" @click="submitComment()"> 提交</n-button></n-space>
+        <n-space justify="end"
+          ><n-button type="primary" @click="submitComment()"> 提交</n-button></n-space
+        >
       </n-gi>
     </n-grid>
   </n-form>
@@ -55,17 +60,17 @@ function timestampToTime(timestamp) {
 async function submitComment() {
   let rs
   try {
-    rs = await api.v2.comment.post(userData.getters.get_user_id, newYear.value.comment);
+    rs = await api.v2.comment.post(userData.getters.get_user_id, newYear.value.comment)
   } catch (e) {
-    logger.error(e);
-    message.error("接口请求失败：" + e);
+    logger.error(e)
+    message.error('接口请求失败：' + e)
   }
   if (!rs) return
   if (rs.status === 200) {
-    message.success("提交成功");
-    getMessageList();
+    message.success('提交成功')
+    getMessageList()
   } else {
-    message.error(rs.message);
+    message.error(rs.message)
   }
 }
 
@@ -74,14 +79,14 @@ async function getMessageList() {
   try {
     rs = await api.v2.comment.get(userData.getters.get_user_id)
   } catch (e) {
-    logger.error(e);
-    message.error("接口请求失败：" + e);
+    logger.error(e)
+    message.error('接口请求失败：' + e)
   }
   if (!rs) return
   if (rs.status === 200) {
     commentList.value = rs.data.list
   } else {
-    message.error(rs.message);
+    message.error(rs.message)
   }
 }
 
diff --git a/src/views/PrizeView.vue b/src/views/PrizeView.vue
index dfba67d..f13574d 100644
--- a/src/views/PrizeView.vue
+++ b/src/views/PrizeView.vue
@@ -1,38 +1,40 @@
-!<template>
-    <n-h1 prefix="bar" style="margin-top: 30px">
-        <i class="twa twa-spiral-calendar"></i>
-        <n-text type="primary">抽奖</n-text>
-    </n-h1>
-    <n-space vertical>
-        <n-grid :x-gap="12" :y-gap="12" :cols="4" item-responsive>
-            <n-gi span="0:4 1000:1" v-for="item in prizeList">
-                <n-space style="display: block">
-                    <n-card :title="'奖品： ' + item.prizeName">
-                        <n-p>
-                            获奖人:
-                            <n-tag style="margin: 3px" type="success" v-for="prizeuser in prizeUsers[item.id]">{{ prizeuser }}
-                            </n-tag>
-                        </n-p>
-                        <n-p>
-                            参与用户:
-                            <n-tag style="margin: 3px" type="info" v-for="user in users[item.id]">{{
-                                user }}
-                            </n-tag>
-                        </n-p>
-                        <n-p>奖品描述：</n-p>
-                        <n-text v-html="marked(item.description)"></n-text>
-                        <n-p>创建时间：{{ timestampToTime(item.createTime) }}</n-p>
-                        <template #footer>
-                            <n-space justify="space-between">
-                                开奖时间：{{ timestampToTime(item.prizeTime) }}
-                                <n-button @click="submitJoin(item.id)" v-show="item.id"> 参与 </n-button>
-                            </n-space>
-                        </template>
-                    </n-card>
-                </n-space>
-            </n-gi>
-        </n-grid>
-    </n-space>
+!
+<template>
+  <n-h1 prefix="bar" style="margin-top: 30px">
+    <i class="twa twa-spiral-calendar"></i>
+    <n-text type="primary">抽奖</n-text>
+  </n-h1>
+  <n-space vertical>
+    <n-grid :x-gap="12" :y-gap="12" :cols="4" item-responsive>
+      <n-gi span="0:4 1000:1" v-for="item in prizeList">
+        <n-space style="display: block">
+          <n-card :title="'奖品： ' + item.prizeName">
+            <n-p>
+              获奖人:
+              <n-tag style="margin: 3px" type="success" v-for="prizeuser in prizeUsers[item.id]"
+                >{{ prizeuser }}
+              </n-tag>
+            </n-p>
+            <n-p>
+              参与用户:
+              <n-tag style="margin: 3px" type="info" v-for="user in users[item.id]"
+                >{{ user }}
+              </n-tag>
+            </n-p>
+            <n-p>奖品描述：</n-p>
+            <n-text v-html="marked(item.description)"></n-text>
+            <n-p>创建时间：{{ timestampToTime(item.createTime) }}</n-p>
+            <template #footer>
+              <n-space justify="space-between">
+                开奖时间：{{ timestampToTime(item.prizeTime) }}
+                <n-button @click="submitJoin(item.id)" v-show="item.id"> 参与 </n-button>
+              </n-space>
+            </template>
+          </n-card>
+        </n-space>
+      </n-gi>
+    </n-grid>
+  </n-space>
 </template>
 <script setup>
 import api from '@/api'
@@ -44,84 +46,84 @@ import { marked } from 'marked'
 
 const message = new Message()
 const prizeList = ref([
-    {
-        "id": 0,
-        "username": "",
-        "prizeName": "",
-        "createTime": "",
-        "prizeTime": "",
-        "prizeUser": "",
-        "description": ""
-    },
+  {
+    id: 0,
+    username: '',
+    prizeName: '',
+    createTime: '',
+    prizeTime: '',
+    prizeUser: '',
+    description: ''
+  }
 ])
 const prizeUsers = ref([])
 const users = ref([])
 
 function timestampToTime(timestamp) {
-    const date = new Date(timestamp * 1000)
-    const Y = date.getFullYear() + '-'
-    const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
-    const D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
-    const h = date.getHours() + ':'
-    const m = date.getMinutes() + ':'
-    const s = date.getSeconds()
-    return Y + M + D + h + m + s
+  const date = new Date(timestamp * 1000)
+  const Y = date.getFullYear() + '-'
+  const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
+  const D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
+  const h = date.getHours() + ':'
+  const m = date.getMinutes() + ':'
+  const s = date.getSeconds()
+  return Y + M + D + h + m + s
 }
 
 async function getPrizeList() {
-    let rs
-    try {
-        rs = await api.v2.prize.root.get(userData.getters.get_user_id);
-    } catch (e) {
-        logger.error(e)
-        message.error("接口请求失败：" + e)
-    }
-    if (!rs) return
-    if (rs.status === 200) {
-        prizeList.value = rs.data.list
-        rs.data.list.forEach((e) => {
-            // 参与抽奖的
-            if (e.username != "" && e.username != null) {
-                if (e.username.indexOf('|') !== -1) {
-                    users.value[e.id] = e.username.split('|')
-                } else {
-                    users.value[e.id] = [e.username]
-                }
-            } else {
-                users.value[e.id] = ["暂时没人参与"]
-            }
+  let rs
+  try {
+    rs = await api.v2.prize.root.get(userData.getters.get_user_id)
+  } catch (e) {
+    logger.error(e)
+    message.error('接口请求失败：' + e)
+  }
+  if (!rs) return
+  if (rs.status === 200) {
+    prizeList.value = rs.data.list
+    rs.data.list.forEach((e) => {
+      // 参与抽奖的
+      if (e.username != '' && e.username != null) {
+        if (e.username.indexOf('|') !== -1) {
+          users.value[e.id] = e.username.split('|')
+        } else {
+          users.value[e.id] = [e.username]
+        }
+      } else {
+        users.value[e.id] = ['暂时没人参与']
+      }
 
-            // 获奖用户部分
-            if (e.prizeUser != "" && e.prizeUser != null) {
-                if (e.prizeUser.indexOf('|') !== -1) {
-                    prizeUsers.value[e.id] = e.prizeUser.split('|')
-                } else {
-                    prizeUsers.value[e.id] = [e.prizeUser]
-                }
-            } else {
-                prizeUsers.value[e.id] = ["暂未开奖"]
-            }
-        })    
-    } else {
-        message.error(rs.message)
-    }
+      // 获奖用户部分
+      if (e.prizeUser != '' && e.prizeUser != null) {
+        if (e.prizeUser.indexOf('|') !== -1) {
+          prizeUsers.value[e.id] = e.prizeUser.split('|')
+        } else {
+          prizeUsers.value[e.id] = [e.prizeUser]
+        }
+      } else {
+        prizeUsers.value[e.id] = ['暂未开奖']
+      }
+    })
+  } else {
+    message.error(rs.message)
+  }
 }
 
 async function submitJoin(prize_id) {
-    let rs
-    try {
-        rs = await api.v2.prize.root.join(userData.getters.get_user_id, prize_id)
-    } catch (e) {
-        logger.error(e)
-        message.error("接口请求失败：" + e)
-    }
-    if (!rs) return
-    if (rs.status === 200) {
-        message.success("参与成功")
-        getPrizeList()
-    } else {
-        message.error(rs.message)
-    }
+  let rs
+  try {
+    rs = await api.v2.prize.root.join(userData.getters.get_user_id, prize_id)
+  } catch (e) {
+    logger.error(e)
+    message.error('接口请求失败：' + e)
+  }
+  if (!rs) return
+  if (rs.status === 200) {
+    message.success('参与成功')
+    getPrizeList()
+  } else {
+    message.error(rs.message)
+  }
 }
 getPrizeList()
-</script>
\ No newline at end of file
+</script>