alpha

2025-12-07 02:46:55 +08:00 · 2023-10-21 20:58:04 +08:00
parent 50b435ba80
commit 57a9995792
8 changed files with 158 additions and 30 deletions
--- a/src/views/AboutView.vue
+++ b/src/views/AboutView.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { NButton, NCard, NDivider, NLayoutContent, NSpace, NText } from 'naive-ui'
+</script>
+<template>
+  <NLayoutContent style="height: 100vh">
+    <NSpace style="margin-top: 50px" justify="center" align="center" vertical>
+      <NCard style="max-width: 80vw; width: 700px">
+        <template #header> 关于 </template>
+        <NText>
+          一个兴趣释然的网站.
+          <br />
+          反馈 | 建议 | 需求 | 闲聊: 群:
+          <NButton
+            tag="a"
+            type="info"
+            target="_blank"
+            href="http://qm.qq.com/cgi-bin/qm/qr?_wv=1027&k=uJNTU6LQ7xANoxP1IyZxS1xYkOKVOF7G&authKey=nl3Bv4UascE4tJ98UDTihEZSvivzuaQGfMViy1BqUe5lYgrz6hi0huK6dyAYq1hi&noverify=0&group_code=873260337"
+            text
+          >
+            873260337
+          </NButton>
+          <NDivider vertical />
+          邮箱:
+          <NButton
+            tag="a"
+            type="info"
+            href="mailto:megghy@qq.com"
+            text
+          >
+            megghy@qq.com
+          </NButton>
+        </NText>
+        <template #footer>
+          <NSpace vertical>
+            <span>
+              开发者:
+              <NButton type="primary" tag="a" href="https://space.bilibili.com/10021741" target="_blank" text style=""> Megghy </NButton>
+            </span>
+            <span>
+              技术栈: 前端 VUE3 + NAIVE UI, 后端 .NET 8
+            </span>
+          </NSpace>
+        </template>
+      </NCard>
+      <NButton @click="$router.push({ name: 'manage-index' })">
+        回到主页
+      </NButton>
+    </NSpace>
+  </NLayoutContent>
+</template>
--- a/src/views/IndexView.vue
+++ b/src/views/IndexView.vue
@@ -1,35 +1,110 @@
 <script setup lang="ts">
-import RegisterAndLogin from '@/components/RegisterAndLogin.vue';
-import { NGradientText, NSpace, NText } from 'naive-ui'
+import RegisterAndLogin from '@/components/RegisterAndLogin.vue'
+import { NCard, NDivider, NGradientText, NSpace, NText, NIcon, NGrid, NGridItem, NButton } from 'naive-ui'
+import vtb from '@/svgs/ic_vtuber.svg'
+import { AnalyticsSharp, Calendar, Chatbox, MusicalNote } from '@vicons/ionicons5'
+import { useWindowSize } from '@vueuse/core'
+import { Lottery24Filled, MoreHorizontal24Filled } from '@vicons/fluent'
+
+const { width } = useWindowSize()
+
+const functions = [
+  {
+    name: '日程表',
+    desc: '提供多种样式的日程表 (还没做完',
+    icon: Calendar,
+  },
+  {
+    name: '歌单',
+    desc: '可以放自己的歌单或者能唱的歌, 支持多种样式 (也还没做完',
+    icon: MusicalNote,
+  },
+  {
+    name: '棉花糖 (提问箱',
+    desc: '一个简单易用的提问箱',
+    icon: Chatbox,
+  },
+  {
+    name: '动态抽奖',
+    desc: '从动态评论区抽取评论或者转发的用户',
+    icon: Lottery24Filled,
+  },
+  {
+    name: '数据跟踪',
+    desc: '绑定账号后查看粉丝 舰长 观看数 等数据的历史记录',
+    icon: AnalyticsSharp,
+  },
+  {
+    name: '还有更多',
+    desc: '有其他合理需求或者建议, 或者有想要添加的样式? 向我提出!',
+    icon: MoreHorizontal24Filled,
+  },
+]
+
+const iconColor = 'white'
 </script>

 <template>
  <div class="index-background">
-    <NSpace justify="center">
-      <NGradientText
-        :size="50"
-        :gradient="{
-          deg: 180,
-          from: '#e5e5e5',
-          to: '#c2ebeb',
-        }"
-        style="font-family: Microsoft YaHei,Times New Roman, Times, serif;"
-      >
-        VTSURU.LIVE
-      </NGradientText>
+    <NSpace vertical justify="center" align="center" style="padding-top: 30px">
+      <NSpace justify="center" align="center" :size="width > 700 ? 50 : 0">
+        <vtb />
+        <NSpace vertical justify="center">
+          <NGradientText
+            size="3.6rem"
+            :gradient="{
+              deg: 180,
+              from: '#e5e5e5',
+              to: '#c2ebeb',
+            }"
+            style="font-family: Microsoft YaHei, Times New Roman, Times, serif; font-weight: 700"
+          >
+            VTSURU.LIVE
+          </NGradientText>
+          <NText style="font-size: 1.5em; font-weight: 500"> 一个给主播提供便利功能的网站 😊 </NText>
+          <span></span>
+          <NSpace justify="center">
+            <NButton type="primary" size="large" @click="$router.push({ name: 'manage-index' })"> 开始使用 </NButton>
+          </NSpace>
+        </NSpace>
+      </NSpace>
+
+      <NDivider style="width: 90vw" />
+      <NGrid cols="2 600:3 800:4" x-gap="50" y-gap="50" style="max-width: 80vw">
+        <NGridItem v-for="item in functions" :key="item.name">
+          <NSpace align="end">
+            <NIcon :component="item.icon" :color="iconColor" size="20" />
+            <NText class="index-feature header"> {{ item.name }} </NText>
+          </NSpace>
+          <NText class="index-feature content"> {{ item.desc }} </NText>
+        </NGridItem>
+      </NGrid>
+    </NSpace>
+    <NSpace style="position: absolute; bottom: 0;margin: 0 auto;width: 100vw;" justify="center">
+      <span style="color: white">
+        BY
+        <NButton tag="a" href="https://space.bilibili.com/10021741" target="_blank" text style="color: rgb(161, 236, 199)"> Megghy </NButton>
+      </span>
    </NSpace>
-    <div style="width:500px;">
-        <RegisterAndLogin />
-    </div>
  </div>
 </template>

-<style lang="stylus">
+<style lang="stylus" scoped>
 body
    margin:0
 .index-background
+    display: abslute;
    height: 100vh;
    background: #8360c3;  /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #2ebf91, #8360c3);  /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #2ebf91, #8360c3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+
+.index-background .header
+  font-size: 1.3rem;
+  font-weight: 700;
+  font-color: #b1b1b1;
+.index-background .content
+  max-width: 300px;
+  font-size: 17px;
+  font-color: #b1b1b1;
 </style>
--- a/src/views/ManageLayout.vue
+++ b/src/views/ManageLayout.vue
@@ -193,7 +193,7 @@ onMounted(() => {
        <NSpace justify="center">
          <NText depth="3" v-if="width > 150">
            有更多功能建议请
-            <NButton text type="info"> 反馈 </NButton>
+            <NButton text type="info" @click="$router.push({ name: 'about' })"> 反馈 </NButton>
          </NText>
        </NSpace>
      </NLayoutSider>
--- a/src/views/manage/DashboardView.vue
+++ b/src/views/manage/DashboardView.vue
@@ -1,16 +1,14 @@
 <script setup lang="ts">
 import { useAccount } from '@/api/account'
 import { NAlert, NButton, NCard, NDivider, NSpace, NTag, NText, NThing, NTime } from 'naive-ui'
-import SettingsManageView from './SettingsManageView.vue';
+import SettingsManageView from './SettingsManageView.vue'

 const accountInfo = useAccount()
-
-
 </script>

 <template>
-  <NSpace justify="center" align="center" vertical style="width: 100%;">
-    <NCard embedded style="max-width: 90%;width: 800px;">
+  <NSpace justify="center" align="center" vertical style="width: 100%">
+    <NCard embedded style="max-width: 90%; width: 800px">
      <NSpace align="center" justify="center" vertical>
        <NText style="font-size: 3rem">
          {{ accountInfo?.name }}
@@ -40,9 +38,9 @@ const accountInfo = useAccount()
        </template>
      </NAlert>
    </NCard>
-    <div style="width: 100%;">
-      <NDivider/>
+  </NSpace>
+  <div>
+      <NDivider />
      <SettingsManageView />
    </div>
-  </NSpace>
 </template>
--- a/src/views/manage/ScheduleManageView.vue
+++ b/src/views/manage/ScheduleManageView.vue
@@ -237,7 +237,7 @@ onMounted(() => {
 </script>

 <template>
-  <NButton @click="showAddModal = true"> 添加周程 </NButton>
+  <NButton @click="showAddModal = true" type="primary"> 添加周程 </NButton>
  <NDivider />
  <NModal v-model:show="showAddModal" style="width: 600px; max-width: 90vw" preset="card" title="添加周程">
    <NSpace vertical>