From 5960604867b2e611d42872ff3124616eb07eb240 Mon Sep 17 00:00:00 2001
From: KUN1007 <yuyu_kun@sina.com>
Date: Wed, 18 Oct 2023 19:30:51 +0800
Subject: [PATCH] feat: non moe page

---
 src/api/index.ts                              |  2 +
 src/api/non-moe/index.ts                      | 14 +++++
 src/api/non-moe/types/nonMoe.ts               | 18 +++++++
 src/store/modules/nonMoe.ts                   | 28 ++++++++++
 src/store/modules/ranking.ts                  |  1 -
 .../Home/content/aside/components/Aside.vue   |  6 +--
 src/views/balance/Balance.vue                 |  2 +-
 src/views/balance/components/Form.vue         |  4 +-
 src/views/non-moe/NonMoe.vue                  | 50 ++++++++++++++++--
 src/views/non-moe/components/Log.vue          | 26 +++++++---
 src/views/non-moe/components/log.ts           | 52 -------------------
 11 files changed, 133 insertions(+), 70 deletions(-)
 create mode 100644 src/api/non-moe/index.ts
 create mode 100644 src/api/non-moe/types/nonMoe.ts
 create mode 100644 src/store/modules/nonMoe.ts
 delete mode 100644 src/views/non-moe/components/log.ts

diff --git a/src/api/index.ts b/src/api/index.ts
index 944213c1..28396faa 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -8,6 +8,7 @@ export * from './edit/types/edit'
 export * from './home/types/home'
 export * from './user/types/user'
 export * from './login/types/login'
+export * from './non-moe/types/nonMoe'
 export * from './ranking/types/ranking'
 export * from './topic/types'
 export * from './update-log/types/updateLog'
@@ -18,6 +19,7 @@ export * from './edit'
 export * from './home'
 export * from './user'
 export * from './login'
+export * from './non-moe'
 export * from './ranking'
 export * from './topic'
 export * from './update-log'
diff --git a/src/api/non-moe/index.ts b/src/api/non-moe/index.ts
new file mode 100644
index 00000000..07e26843
--- /dev/null
+++ b/src/api/non-moe/index.ts
@@ -0,0 +1,14 @@
+import { fetchGet } from '@/utils/request'
+import * as NonMoe from './types/nonMoe'
+import objectToQueryParams from '@/utils/objectToQueryParams'
+
+// 获取不萌记录
+export async function getNonMoeLogsApi(
+  request: NonMoe.NonMoeLogRequestData
+): Promise<NonMoe.NonMoeGetLogsResponseData> {
+  const queryParams = objectToQueryParams(request)
+  const url = `/non-moe/logs?${queryParams}`
+
+  const response = fetchGet<NonMoe.NonMoeGetLogsResponseData>(url)
+  return response
+}
diff --git a/src/api/non-moe/types/nonMoe.ts b/src/api/non-moe/types/nonMoe.ts
new file mode 100644
index 00000000..4f9e50e1
--- /dev/null
+++ b/src/api/non-moe/types/nonMoe.ts
@@ -0,0 +1,18 @@
+type SortOrder = 'asc' | 'desc'
+
+export interface NonMoeLogRequestData {
+  page: number
+  limit: number
+  sortOrder: SortOrder
+}
+
+export interface NonMoeLog {
+  nid: number
+  uid: number
+  name: string
+  description: string
+  time: number
+  result: string
+}
+
+export type NonMoeGetLogsResponseData = KUNGalgameResponseData<NonMoeLog[]>
diff --git a/src/store/modules/nonMoe.ts b/src/store/modules/nonMoe.ts
new file mode 100644
index 00000000..a13d8c6e
--- /dev/null
+++ b/src/store/modules/nonMoe.ts
@@ -0,0 +1,28 @@
+import { defineStore } from 'pinia'
+
+import type { NonMoeLogRequestData, NonMoeGetLogsResponseData } from '@/api'
+
+import { getNonMoeLogsApi } from '@/api'
+
+export const useKUNGalgameNonMoeStore = defineStore({
+  id: 'KUNGalgameNonMoe',
+  // 不持久
+  persist: false,
+  state: (): NonMoeLogRequestData => ({
+    page: 1,
+    limit: 30,
+    sortOrder: 'desc',
+  }),
+  getters: {},
+  actions: {
+    // 获取不萌记录
+    async getLogs(): Promise<NonMoeGetLogsResponseData> {
+      const requestData: NonMoeLogRequestData = {
+        page: this.page,
+        limit: this.limit,
+        sortOrder: this.sortOrder,
+      }
+      return await getNonMoeLogsApi(requestData)
+    },
+  },
+})
diff --git a/src/store/modules/ranking.ts b/src/store/modules/ranking.ts
index b8525f2f..d924606f 100644
--- a/src/store/modules/ranking.ts
+++ b/src/store/modules/ranking.ts
@@ -1,4 +1,3 @@
-// 评论的临时数据，用于组件间传输
 import { defineStore } from 'pinia'
 
 import type {
diff --git a/src/views/Home/content/aside/components/Aside.vue b/src/views/Home/content/aside/components/Aside.vue
index f9c5d448..bc5897e3 100644
--- a/src/views/Home/content/aside/components/Aside.vue
+++ b/src/views/Home/content/aside/components/Aside.vue
@@ -7,9 +7,9 @@ import asideItem from './asideItem'
   <div class="aside">
     <!-- 顶部单个板块 -->
     <span v-for="kun in asideItem" :key="kun.index">
-      <RouterLink :to="{ path: kun.router }">{{
-        $tm(`mainPage.asideActive['${kun.name}']`)
-      }}</RouterLink>
+      <RouterLink :to="{ path: kun.router }">
+        {{ $tm(`mainPage.asideActive['${kun.name}']`) }}
+      </RouterLink>
     </span>
   </div>
 </template>
diff --git a/src/views/balance/Balance.vue b/src/views/balance/Balance.vue
index 90ecc26f..effd7cd8 100644
--- a/src/views/balance/Balance.vue
+++ b/src/views/balance/Balance.vue
@@ -82,7 +82,7 @@ onMounted(async () => {
               statement.profitLoss >= 0
                 ? $tm('balance.surplusAmount')
                 : $tm('balance.deficitAmount')
-            }}: {{ statement.profitLoss }} CNY
+            }}: {{ statement.profitLoss }} USDT
           </div>
         </div>
       </div>
diff --git a/src/views/balance/components/Form.vue b/src/views/balance/components/Form.vue
index 81ffe43d..5b5acbfe 100644
--- a/src/views/balance/components/Form.vue
+++ b/src/views/balance/components/Form.vue
@@ -30,13 +30,13 @@ const { isIncome, incomeData, expenditureData, statement } = toRefs(props)
     <div v-if="isIncome" class="sum">
       {{ $tm(`balance.totalIncome`) }}:
       {{ statement.totalIncome }}
-      CNY
+      USDT
     </div>
 
     <div v-if="!isIncome" class="sum">
       {{ $tm(`balance.totalExpenditure`) }}:
       {{ statement.totalExpenditure }}
-      CNY
+      USDT
     </div>
   </div>
 </template>
diff --git a/src/views/non-moe/NonMoe.vue b/src/views/non-moe/NonMoe.vue
index e96ba9a8..c49fac54 100644
--- a/src/views/non-moe/NonMoe.vue
+++ b/src/views/non-moe/NonMoe.vue
@@ -1,6 +1,31 @@
 <script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
 import Log from './components/Log.vue'
 import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
+
+import { useKUNGalgameNonMoeStore } from '@/store/modules/nonMoe'
+import { useKUNGalgameSettingsStore } from '@/store/modules/settings'
+import { storeToRefs } from 'pinia'
+
+const { showKUNGalgameLanguage } = storeToRefs(useKUNGalgameSettingsStore())
+import { NonMoeLog } from '@/api'
+
+const logs = ref<NonMoeLog[]>([])
+// 根据当前语言计算页面样式
+const langClass = computed(() => {
+  return showKUNGalgameLanguage.value === 'en' ? 'title-en' : 'title-cn'
+})
+
+// 获取不萌记录数据
+const getLogs = async () => {
+  const response = await useKUNGalgameNonMoeStore().getLogs()
+  return response.data
+}
+
+// 页面加载时加载数据
+onMounted(async () => {
+  logs.value = await getLogs()
+})
 </script>
 
 <template>
@@ -8,7 +33,7 @@ import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
     <!-- 内容区容器 -->
     <div class="container">
       <!-- 页面标题 -->
-      <div class="title">{{ $tm('nonMoe.log') }}</div>
+      <div class="title" :class="langClass">{{ $tm('nonMoe.log') }}</div>
       <!-- 文章部分 -->
       <div class="article">
         <!-- 文章标题 -->
@@ -18,7 +43,7 @@ import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
         <!-- 内容区容器 -->
         <div class="content">
           <!-- 所有的记录 -->
-          <Log />
+          <Log :logs="logs" />
         </div>
       </div>
     </div>
@@ -29,11 +54,12 @@ import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
 
 <style lang="scss" scoped>
 .root {
-  height: 100vh;
+  height: calc(100vh - 65px);
   display: flex;
   flex-direction: column;
   min-height: 750px;
 }
+
 /* 根容器 */
 .container {
   /* 固定宽高 */
@@ -52,20 +78,32 @@ import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
   position: relative;
   box-shadow: var(--shadow);
 }
+
 /* 页面标题 */
 .title {
   /* 字体竖直方向分布 */
   font-size: 30px;
   padding: 30px;
   width: 100px;
-  writing-mode: vertical-rl;
-  text-orientation: upright;
   display: flex;
   justify-content: center;
   align-items: center;
   font-weight: bold;
   color: var(--kungalgame-font-color-2);
+  letter-spacing: 1px;
 }
+
+.title-cn {
+  writing-mode: vertical-rl;
+  text-orientation: upright;
+}
+
+.title-en {
+  writing-mode: vertical-rl;
+  text-orientation: sideways;
+  transform: rotate(180deg);
+}
+
 /* 文章部分 */
 .article {
   background-color: var(--kungalgame-trans-white-5);
@@ -74,12 +112,14 @@ import KUNGalgameFooter from '@/components/KUNGalgameFooter.vue'
   flex-direction: column;
   align-items: center;
 }
+
 /* 文章标题 */
 .article-title {
   margin: 20px 0;
   padding: 0 20px;
   font-size: 20px;
 }
+
 /* 内容区容器 */
 .content {
   width: 100%;
diff --git a/src/views/non-moe/components/Log.vue b/src/views/non-moe/components/Log.vue
index 67f83160..bcd6ce49 100644
--- a/src/views/non-moe/components/Log.vue
+++ b/src/views/non-moe/components/Log.vue
@@ -1,20 +1,34 @@
 <script setup lang="ts">
-import { log } from './log'
 import { Icon } from '@iconify/vue'
+import { computed } from 'vue'
+
+import { NonMoeLog } from '@/api'
+import dayjs from 'dayjs'
+
+const props = defineProps<{
+  logs: NonMoeLog[]
+}>()
+
+const logs = computed(() => props.logs)
 </script>
 
 <template>
   <!-- 单个记录 -->
-  <div class="log" v-for="kun in log" :key="kun.index">
+  <div class="log" v-for="(kun, index) in logs" :key="index">
     <!-- 用户 -->
-    <div class="kungalgamer">@ <span>啊这可海星</span></div>
+    <div class="kungalgamer">
+      @
+      <RouterLink :to="`/kungalgamer/${kun.uid}/info`">
+        {{ kun.name }}
+      </RouterLink>
+    </div>
     <!-- 原因 -->
-    <div class="reason">{{ kun.reason }}</div>
+    <div class="reason" v-html="kun.description"></div>
     <!-- 后果 -->
     <div class="footer">
       <div class="time">
         <Icon class="hourglass" icon="eos-icons:hourglass" />
-        <span>2019 / 10 / 7</span>
+        <span>{{ dayjs(kun.time).format('YYYY/MM/DD') }}</span>
       </div>
       <div class="result">
         <Icon class="warning" icon="line-md:alert" />
@@ -34,7 +48,7 @@ import { Icon } from '@iconify/vue'
 .kungalgamer {
   margin-bottom: 10px;
   font-weight: bold;
-  span {
+  a {
     cursor: pointer;
     color: var(--kungalgame-blue-5);
     border-bottom: 2px solid var(--kungalgame-trans-white-9);
diff --git a/src/views/non-moe/components/log.ts b/src/views/non-moe/components/log.ts
deleted file mode 100644
index 780f4235..00000000
--- a/src/views/non-moe/components/log.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-// 注意，这只是一个临时的数据文件，后来会被替换为后端接口
-
-interface punish {
-  index: number
-  reason: string
-  // 目前暂定处罚方式只有萌萌点的扣除
-  result: number
-}
-
-export const log: punish[] = [
-  {
-    index: 1,
-    reason: '啊这可海星',
-    result: 1007,
-  },
-  {
-    index: 2,
-    reason:
-      '啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星啊这可海星',
-    result: 1007,
-  },
-  {
-    index: 3,
-    reason: '啊这可海星',
-    result: 17,
-  },
-  {
-    index: 4,
-    reason: '啊这可海星',
-    result: 1007,
-  },
-  {
-    index: 5,
-    reason: '啊这可海星',
-    result: 1007,
-  },
-  {
-    index: 6,
-    reason: '啊这可海星',
-    result: 1007,
-  },
-  {
-    index: 7,
-    reason: '啊这可海星',
-    result: 1007,
-  },
-  {
-    index: 8,
-    reason: '啊这可海星',
-    result: 1007,
-  },
-]