better ui

Author: alephpi

app/app.vue

@@ -58,13 +58,10 @@ useSeoMeta({
       </template>
 
       <template #right>
-        <UButton
-          to="https://github.com/alephpi/Texo-web"
-          target="_blank"
-          icon="i-simple-icons-github"
-          aria-label="GitHub"
-          color="neutral"
-          variant="ghost"
+        <VVersion
+          url="https://github.com/alephpi/Texo-web"
+          commit="__COMMIT__"
+          date="__BUILD_DATE__"
         />
       </template>
     </UFooter>

app/components/AppHeader.vue

@@ -47,12 +47,28 @@ const items = computed<NavigationMenuItem[]>(() => [{
         target="_blank"
         icon="i-simple-icons-github"
         aria-label="GitHub"
-        color="neutral"
+        color="info"
+        variant="ghost"
+      />
+      <UButton
+        to="https://github.com/alephpi/Texo-web"
+        target="_blank"
+        icon="i-simple-icons-github"
+        aria-label="GitHub"
+        color="primary"
+        variant="ghost"
+      />
+      <UButton
+        to="https://www.bilibili.com/video/BV1qX1TBFEee/"
+        target="_blank"
+        icon="i-simple-icons-bilibili"
+        aria-label="GitHub"
+        class="text-[#ff6699] hover:text-[#ff8cb0] hover:bg-color-[#ff8cb0]"
         variant="ghost"
       />
       <img
         alt="GitHub Repo stars"
-        src="https://img.shields.io/github/stars/alephpi/Texo"
+        src="https://img.shields.io/github/stars/alephpi/texo?style=plastic"
       >
     </template>
   </UHeader>

app/components/VVersion.vue

@@ -0,0 +1,40 @@
+<template>
+  <UFieldGroup>
+    <UBadge
+      variant="soft"
+      color="neutral"
+    >
+      Commit
+    </UBadge>
+    <UBadge
+      variant="soft"
+      color="info"
+    >
+      <a :href=" props.url + '/commit/' + props.commit ">
+        {{ props.commit.slice(0, 7) }}
+      </a>
+    </UBadge>
+  </UFieldGroup>
+  <UFieldGroup>
+    <UBadge
+      variant="soft"
+      color="neutral"
+    >
+      Build
+    </UBadge>
+    <UBadge
+      variant="soft"
+      color="info"
+    >
+      {{ date }}
+    </UBadge>
+  </UFieldGroup>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps<{
+  url: string
+  commit: string
+  date: string
+}>()
+</script>

app/pages/index.vue

@@ -18,6 +18,13 @@ const links = computed<ButtonProps[]>(() => [
     size: 'xl',
     color: 'neutral',
     variant: 'subtle'
+  }, {
+    label: 'Bilibili',
+    to: 'https://www.bilibili.com/video/BV1qX1TBFEee/',
+    target: '_blank',
+    icon: 'i-simple-icons-bilibili',
+    size: 'xl',
+    class: 'bg-[#ff6699] hover:bg-[#ff8cb0]'
   }
 ])
 </script>

nuxt.config.ts

@@ -1,5 +1,7 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 import copyKatexFonts from './utils/copy-katex-font'
+import replace from '@rollup/plugin-replace'
+import { execSync } from 'child_process'
 
 export default defineNuxtConfig({
   modules: [
@@ -8,6 +10,7 @@ export default defineNuxtConfig({
     '@nuxtjs/i18n',
     '@vite-pwa/nuxt'
   ],
+
   ssr: true,
   components: true,
 
@@ -22,6 +25,17 @@ export default defineNuxtConfig({
     }
   },
   compatibilityDate: '2025-01-15',
+  vite: {
+    plugins: [
+      replace({
+        preventAssignment: true,
+        values: {
+          __COMMIT__: execSync('git rev-parse HEAD').toString().trim(),
+          __BUILD_DATE__: new Date().toLocaleString()
+        }
+      })
+    ]
+  },
   hooks: {
     ready: (nuxt) => {
       copyKatexFonts(nuxt.options.rootDir)
@@ -35,7 +49,6 @@ export default defineNuxtConfig({
       }
     }
   },
-
   i18n: {
     locales: [
       { code: 'zh-CN', name: '中文', file: 'zh-CN.json' },

package.json

@@ -27,6 +27,7 @@
   },
   "devDependencies": {
     "@nuxt/eslint": "^1.9.0",
+    "@rollup/plugin-replace": "^6.0.3",
     "eslint": "^9.37.0",
     "sass": "^1.94.2",
     "typescript": "^5.9.3",