feat: 完善

script/TerminalPrintPlugin.ts

@@ -19,10 +19,10 @@ class TerminalPrintPlugin {
         `- Network:  ${chalk.cyan(`http://${localIPv4!}:${port}${publicPath}`)}`
       );
       console.log(
-        `- 赞助支持: ${chalk.cyan(`https://live.hsslive.cn/sponsors`)}`
+        `- 赞助打赏: ${chalk.cyan(`https://live.hsslive.cn/sponsors`)}`
       );
       console.log(
-        `- 付费咨询: ${chalk.cyan(`https://live.hsslive.cn/support`)}`
+        `- 付费支持: ${chalk.cyan(`https://live.hsslive.cn/support`)}`
       );
       console.log(
         `- 欢迎PR:   ${chalk.cyan(

src/layout/head/index.vue

@@ -18,6 +18,16 @@
         >
           排行榜
         </a>
+        <a
+          :class="{
+            item: 1,
+            active: router.currentRoute.value.name === routerName.support,
+          }"
+          href="/support"
+          @click.prevent="router.push({ name: routerName.support })"
+        >
+          付费支持
+        </a>
         <div
           v-for="(item, index) in navLeftList.filter(
             (item) => router.currentRoute.value.query.liveType === item.liveType
@@ -73,6 +83,13 @@
       >
         赞助
       </a>
+      <a
+        class="about"
+        href="/about"
+        @click.prevent="router.push({ name: routerName.about })"
+      >
+        关于
+      </a>
       <a
         class="bilibili"
         target="_blank"
@@ -85,7 +102,11 @@
         target="_blank"
         href="https://github.com/galaxy-s10/billd-live"
       >
-        github
+        <span class="txt">github</span>
+        <img
+          :src="githubStar"
+          alt=""
+        />
       </a>
 
       <n-dropdown
@@ -112,6 +133,8 @@ import { useUserStore } from '@/store/user';
 
 const router = useRouter();
 const userStore = useUserStore();
+const githubStar = ref('');
+
 const navLeftList = ref([
   {
     title: 'Webrtc Push',
@@ -161,6 +184,11 @@ const options = ref([
   },
 ]);
 
+onMounted(() => {
+  githubStar.value =
+    'https://img.shields.io/github/stars/galaxy-s10/billd-live?label=Star&logo=GitHub&labelColor=white&logoColor=black&style=social&cacheSeconds=3600';
+});
+
 function handleUserSelect(key) {
   if (key === '1') {
     userStore.logout();
@@ -174,8 +202,6 @@ function handlePushSelect(key) {
   openToTarget(url.href);
 }
 
-onMounted(() => {});
-
 function goPushPage(routerName: string) {
   const url = router.resolve({ name: routerName });
   openToTarget(url.href);
@@ -264,6 +290,7 @@ function goPushPage(routerName: string) {
 
     .sponsors,
     .bilibili,
+    .about,
     .github {
       position: relative;
       margin-right: 15px;
@@ -296,6 +323,13 @@ function goPushPage(routerName: string) {
         }
       }
     }
+    .github {
+      display: flex;
+      align-items: center;
+      .txt {
+        margin-right: 5px;
+      }
+    }
     .start-live {
       margin-right: 10px;
       padding: 5px 10px;

src/router/index.ts

@@ -6,8 +6,10 @@ import type { RouteRecordRaw } from 'vue-router';
 
 export const routerName = {
   home: 'home',
+  about: 'about',
   rank: 'rank',
   sponsors: 'sponsors',
+  support: 'support',
   oauth: 'oauth',
   notFound: 'notFound',
 
@@ -26,6 +28,11 @@ export const defaultRoutes: RouteRecordRaw[] = [
         path: '/',
         component: () => import('@/views/home/index.vue'),
       },
+      {
+        name: routerName.about,
+        path: '/about',
+        component: () => import('@/views/about/index.vue'),
+      },
       {
         name: routerName.rank,
         path: '/rank',
@@ -36,6 +43,11 @@ export const defaultRoutes: RouteRecordRaw[] = [
         path: '/sponsors',
         component: () => import('@/views/sponsors/index.vue'),
       },
+      {
+        name: routerName.support,
+        path: '/support',
+        component: () => import('@/views/support/index.vue'),
+      },
       {
         name: routerName.pull,
         path: '/pull/:roomId',

src/views/about/index.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="about-wrap">
+    <h2>有空再写，微信交流群：</h2>
+    <img
+      src="@/assets/img/wechat-group.webp"
+      alt=""
+      class="wechat-group"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss" scoped>
+.about-wrap {
+  text-align: center;
+  .wechat-group {
+    width: 400px;
+  }
+}
+</style>

src/views/support/index.vue

@@ -0,0 +1,108 @@
+<template>
+  <div class="support-wrap">
+    <div class="list">
+      <div
+        v-for="(item, index) in list"
+        :key="index"
+        class="item"
+        @click="handleClick"
+      >
+        <div
+          class="left"
+          :style="{ backgroundImage: `url(${item.img})` }"
+        ></div>
+        <div class="right">
+          <div class="title">{{ item.name }}</div>
+          <div class="info">100%好评</div>
+          <div class="desc">{{ item.desc }}</div>
+          <div class="price-wrap">
+            <span class="price">￥{{ item.price }}</span>
+            <del
+              v-if="item.price !== item.originalPrice"
+              class="original-price"
+            >
+              {{ item.originalPrice }}
+            </del>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const list = ref([
+  {
+    // eslint-disable-next-line
+    img: require('@/assets/img/billd.webp'),
+    name: '1对1解答（一小时）',
+    price: '50.00',
+    originalPrice: '50.00',
+    desc: '包括但不限于billd-live相关的任何问题。',
+  },
+  {
+    // eslint-disable-next-line
+    img: require('@/assets/img/billd2.webp'),
+    name: '1对1解答（三小时）',
+    price: '120.00',
+    originalPrice: '150.00',
+    desc: '包括但不限于billd-live相关的任何问题。',
+  },
+]);
+
+function handleClick() {
+  window.$message.info('即将推出，敬请期待~');
+}
+</script>
+
+<style lang="scss" scoped>
+.support-wrap {
+  margin-top: 30px;
+  padding: 0 20px;
+  .list {
+    display: flex;
+    .item {
+      display: flex;
+      margin-right: 20px;
+      padding: 10px;
+      border-radius: 10px;
+      box-shadow: 0 4px 30px 0 rgba(238, 242, 245, 0.8);
+      cursor: pointer;
+      transition: box-shadow 0.2s linear;
+      &:hover {
+        box-shadow: 4px 4px 20px 0 rgba(205, 216, 228, 0.6);
+      }
+      .left {
+        margin-right: 10px;
+        width: 100px;
+        height: 100px;
+        background-position: center center;
+        background-size: cover;
+        background-repeat: no-repeat;
+      }
+      .right {
+        .title {
+          font-size: 22px;
+        }
+        .info {
+        }
+        .price-wrap {
+          display: flex;
+          align-items: center;
+          .price {
+            color: gold;
+            font-size: 22px;
+          }
+          .original-price {
+            margin-left: 5px;
+            color: #666;
+            font-size: 14px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>