feat: upate index page button

Author: Cnily03

docs/index.md

@@ -12,10 +12,11 @@ information: |
 
 actions:
   -
-    - text: 报名参赛
-      type: primary
-      size: large
-      click: signup
+    - usevue: true
+    # - text: 报名参赛
+    #   type: primary
+    #   size: large
+    #   click: signup
 
   -
     - text: 快速入门

docs/index.ts

@@ -13,6 +13,39 @@ export function signup() {
         let matchname = 'newstar';
         let origin = 'endbm.ichunqiu.com';
         let protocol = 'https:';
-        window.open(`${protocol}//${origin}` + `/${year + matchname}`);
+        let path = '/' + year + matchname;
+        window.open(`${protocol}//${origin}` + path);
+    }
+}
+
+export function participate(channel: 'internal' | 'external') {
+    let time = {
+        'internal': [new Date('2024-09-23 09:00:00').getTime(), new Date('2024-10-27 21:00:00').getTime()],
+        'external': [new Date('2024-09-30 09:00:00').getTime(), new Date('2024-11-03 21:00:00').getTime()],
+    }
+    let now = Date.now();
+    let gap = time[channel];
+    if (!gap) return
+    if (now < gap[0]) {
+        ElMessage({
+            message: '比赛尚未开始！',
+            type: 'warning',
+        })
+    } else if (now > gap[1]) {
+        ElMessage({
+            message: '比赛已结束！',
+            type: 'warning',
+        })
+    } else {
+        let year = new Date(gap[0]).getFullYear();
+        let matchname = 'newstar';
+        let origin = 'match.ichunqiu.com';
+        let protocol = 'https:';
+        let tail = {
+            'internal': 'xn',
+            'external': 'gk',
+        }[channel];
+        let path = '/' + year + matchname + tail;
+        window.open(`${protocol}//${origin}` + path);
     }
 }

docs/index.vue

@@ -0,0 +1,98 @@
+<script lang="ts" setup>
+import { ElButton, ElButtonGroup } from "element-plus";
+import { ElPopover } from "element-plus";
+import IndexButton from "@/components/IndexButton.vue";
+import { signup, participate } from "./index";
+</script>
+
+<template>
+    <div>
+        <ElPopover placement="bottom" :width="270" trigger="click">
+            <template #reference>
+                <IndexButton text="报名参赛" type="primary" size="large" />
+            </template>
+            <div style="text-align: center">
+                <ElButtonGroup class="group">
+                    <ElButton style="width: 100%" @click="signup()">立即报名</ElButton>
+                </ElButtonGroup>
+                <ElButtonGroup class="group">
+                    <div class="group-label"><label>参赛</label></div>
+                    <ElButton @click="participate('external')">公开赛道</ElButton>
+                    <ElButton @click="participate('internal')">校内赛道</ElButton>
+                </ElButtonGroup>
+            </div>
+        </ElPopover>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.top-radius {
+    border-radius: var(--el-border-radius-base) var(--el-border-radius-base) 0 0 !important;
+}
+.bottom-radius {
+    border-radius: 0 0 var(--el-border-radius-base) var(--el-border-radius-base) !important;
+}
+
+.group {
+    display: flex;
+    width: 100%;
+    & + .group > * {
+        &:first-child {
+            border-top-left-radius: 0;
+        }
+        &:last-child {
+            border-top-right-radius: 0;
+        }
+    }
+    &:not(:last-child) > * {
+        &:first-child {
+            border-bottom-left-radius: 0;
+        }
+        &:last-child {
+            border-bottom-right-radius: 0;
+        }
+    }
+
+    & + .group {
+        margin-top: -1px;
+    }
+}
+
+.group-label {
+    --label-bg-color: var(--el-color-info-light-9);
+    .dark & {
+        --label-bg-color: var(--el-color-info-light-8);
+    }
+    width: 100%;
+    padding: 8px 15px;
+    background-color: var(--label-bg-color);
+    color: var(--el-color-info);
+    border: var(--el-border);
+    border-color: var(--el-border-color);
+    border-radius: 0 0 0 var(--el-border-radius-base);
+    border-right: none;
+    align-items: center;
+    box-sizing: border-box;
+    display: inline-flex;
+    font-weight: var(--el-button-font-weight);
+    height: 32px;
+    justify-content: center;
+    line-height: 1;
+    outline: none;
+    text-align: center;
+    transition: 0.1s;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+    vertical-align: middle;
+    white-space: nowrap;
+}
+
+.no-top-border {
+    border-top: none;
+}
+
+.no-bottom-border {
+    border-bottom: none;
+}
+</style>

theme/layouts/LayoutIndex.vue

@@ -13,6 +13,8 @@ import { useSidebar } from "vitepress/theme";
 import { VPButton } from "vitepress/theme";
 import IndexButton from "@/components/IndexButton.vue";
 
+import IndexAction from "@docs/index.vue";
+
 // const { isOpen: isSidebarOpen, open: openSidebar, close: closeSidebar } = useSidebar();
 
 // const route = useRoute();
@@ -28,10 +30,10 @@ const heroImageSlotExists = computed(() => !!slots["home-hero-image"]);
 provide("hero-image-slot-exists", heroImageSlotExists);
 
 function fmtActionsArray(actions: any) {
-    if(!actions) return [];
-    if(!Array.isArray(actions)) actions = [actions];
-    if(actions.length === 0) return [];
-    if(!Array.isArray(actions[0])) actions = [actions];
+    if (!actions) return [];
+    if (!Array.isArray(actions)) actions = [actions];
+    if (actions.length === 0) return [];
+    if (!Array.isArray(actions[0])) actions = [actions];
     return actions;
 }
 </script>
@@ -50,12 +52,22 @@ function fmtActionsArray(actions: any) {
             <div class="layout-center">
                 <div class="grid-box">
                     <div class="content-logo"></div>
-                    <div class="content-description">
+                    <div class="content-information">
                         <p v-for="line of frontmatter.information.split(/\r?\n/)" v-html="line"></p>
                     </div>
                     <div class="content-action">
                         <span class="action-line" v-for="a of fmtActionsArray(frontmatter.actions)">
-                            <IndexButton v-for="b of a" :text="b.text" :link="b.link" :type="b.type" :size="b.size" :click="b.click" />
+                            <span v-for="b of a">
+                                <IndexAction v-if="b.usevue" />
+                                <IndexButton
+                                    v-else
+                                    :text="b.text"
+                                    :link="b.link"
+                                    :type="b.type"
+                                    :size="b.size"
+                                    :click="b.click"
+                                />
+                            </span>
                         </span>
                     </div>
                     <Content class="content-doc" />
@@ -91,11 +103,11 @@ function fmtActionsArray(actions: any) {
     background-position: center;
 }
 
-.content-description {
+.content-information {
     font-size: 1.3rem;
     font-weight: 300;
     p {
-        margin: .5rem 0;
+        margin: 0.5rem 0;
     }
 }
 
@@ -121,10 +133,10 @@ function fmtActionsArray(actions: any) {
 }
 
 .layout-index-footer {
-//     position: absolute;
-//     bottom: 0;
-//     left: 0;
-//     width: 100%;
+    //     position: absolute;
+    //     bottom: 0;
+    //     left: 0;
+    //     width: 100%;
     border: none;
 }
 </style>