feat: finish celebration

Author: shdancer

.vitepress/theme/index.ts

@@ -1,5 +1,7 @@
 import './main.css'
 import DefaultTheme from 'vitepress/theme'
+import 'element-plus/dist/index.css'
+import ElementPlus from 'element-plus'
 
 let customRoutes = [{
     "path": "/version",
@@ -32,6 +34,8 @@ export default {
                     return false
                 }
             }
+
+            app.use(ElementPlus)
         }
     }
 }

package.json

@@ -26,6 +26,7 @@
   },
   "packageManager": "[email protected]+sha1.a58c038faac410c947dbdb93eb30994037d0fce2",
   "dependencies": {
-    "@vueuse/core": "^13.1.0"
+    "@vueuse/core": "^13.1.0",
+    "element-plus": "^2.9.7"
   }
 }

pnpm-lock.yaml

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, ref, watch } from 'vue';
+import { computed, ref } from 'vue';
 import { useFetch } from '@vueuse/core';
 
 const floorNumber = 114514
@@ -10,39 +10,47 @@ const positionString = computed(() => {
     return `${position.value}%`
 })
 
+const stop = ref(false)
 
-const { isFetching, error, data } = useFetch(`/api/floors/${floorNumber}/_special?order_by=id&size=100&sort=asc&offset=0`).get().json()
+
+const { isFetching, error, data } = useFetch(`/api/floors/${floorNumber}/_special?order_by=like&size=100&sort=asc&offset=0`).get().json()
 
 const messages: any = computed(() =>
     data.value?.map(item => ({
         content: item.content,
         name: item.anonyname,
-    }))?.filter(item => !item.content.includes("!()")) ?? []
+    }))?.filter(item => !item.content.includes("![]")) ?? []
 )
 const interval = setInterval(() => {
+    if (stop.value) {
+        return
+    }
     position.value -= 0.003
     if (position.value > 100) {
         position.value = 0
     }
 }, 10)
 
+function toHole() {
+    window.location.href = "/celebration/hole"
+}
 
 
 </script>
 
 <template>
     <div class="bg-gray-100 rounded-xl shadow-inner overflow-hidden p-3 flex ">
-        <div class="flex items-center gap-4 flex-nowrap move">
-            <div v-for="message in messages">
-                <div class="flex text-nowrap">
-                    <b>
-                        {{ message.content }}
-                    </b>
-                    <i>
-                        by
-                        {{ message.name }}
-                    </i>
-                </div>
+        <div class="flex items-center gap-4 flex-nowrap move" @mouseenter="stop = true" @mouseleave="stop = false"
+            @click="toHole">
+            <div v-for="message in messages"
+                class="flex text-nowrap pl-2 pr-2 p-1 shadow-md rounded-md hover:shadow-lg transition-all duration-300 ease-in-out hover:bg-gray-200 cursor-pointer">
+                <b class="max-w-64 text-ellipsis overflow-hidden mr-2 inline-block">
+                    {{ message.content }}
+                </b>
+                <i>
+                    by
+                    {{ message.name }}
+                </i>
             </div>
         </div>