feat: non moe page

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'

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
+}

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[]>

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)
+    },
+  },
+})

src/store/modules/ranking.ts

@@ -1,4 +1,3 @@
-// 评论的临时数据，用于组件间传输
 import { defineStore } from 'pinia'
 
 import type {

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>

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>

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>

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%;

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);

src/views/non-moe/components/log.ts

@@ -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,
-  },
-]