feat: update website (#49)

* chore: 更新依赖

* perf: 优化表格性能

* chore: update deps

* feat: 镜像列表表格新增名称排序与状态过滤

* feat: 优化主题色配置

* feat: 镜像列表表格新增搜索高亮

* feat: 更新UI设计

* fix: 超链接

---------

Co-authored-by: Super Manito <[email protected]>

Author: d-w-x

package.json

@@ -21,33 +21,35 @@
   "dependencies": {
     "dayjs": "^1.11.18",
     "lodash-es": "^4.17.21",
-    "marked": "^4.2.5",
+    "marked": "^16.3.0",
     "pinia": "^3.0.3",
+    "tinycolor2": "^1.6.0",
     "vue": "^3.5.22",
     "vue-gtag": "^3.6.1",
     "vue-i18n": "^11.1.12",
     "vue-router": "^4.5.1"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "~4.13.2",
+    "@antfu/eslint-config": "~5.4.1",
     "@intlify/devtools-types": "^11.1.12",
-    "@intlify/unplugin-vue-i18n": "^6.0.8",
+    "@intlify/unplugin-vue-i18n": "^11.0.1",
     "@types/lodash-es": "^4.17.12",
-    "@types/marked": "^4.0.8",
+    "@types/marked": "^6.0.0",
     "@types/ms": "^2.1.0",
-    "@types/node": "^22.15.29",
+    "@types/node": "^24.5.2",
+    "@types/tinycolor2": "^1.4.6",
     "@vicons/ionicons5": "^0.13.0",
-    "@vitejs/plugin-vue": "^5.2.4",
-    "@vitejs/plugin-vue-jsx": "^4.2.0",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vitejs/plugin-vue-jsx": "^5.1.1",
     "eslint": "^9.36.0",
     "less": "^4.4.1",
     "naive-ui": "^2.43.1",
     "prettier": "^3.6.2",
     "rimraf": "^6.0.1",
     "rollup-plugin-visualizer": "^6.0.3",
-    "typescript": "^5.9.2",
+    "typescript": "~5.9.2",
     "vfonts": "^0.0.3",
-    "vite": "^6.3.5",
+    "vite": "^7.1.7",
     "vue-tsc": "^3.1.0"
   }
 }

src/App.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { GlobalThemeOverrides } from 'naive-ui'
 import { darkTheme, NConfigProvider, NLoadingBarProvider, NMessageProvider } from 'naive-ui'
+import Tiny from 'tinycolor2'
 import { computed, onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 
@@ -13,15 +14,20 @@ const store = useStore()
 
 const theme = computed(() => (store.darkMode ? darkTheme : null))
 const override = computed(
-  () =>
-    ({
+  () => {
+    const themeColor = store.darkMode ? '#a879db' : '#6f106e'
+    return ({
       common: {
-        primaryColor: store.darkMode ? '#ffffff' : '#6f106e',
-        primaryColorHover: store.darkMode ? '#fcfcfc' : '#6f106e',
-        primaryColorPressed: store.darkMode ? 'd4d4d4' : '#560c56',
-        primaryColorSuppl: '#6f106e',
+        primaryColor: Tiny(themeColor).toHex8String(),
+        primaryColorSecondary: Tiny(themeColor).setAlpha(0.16).toHex8String(),
+        primaryColorHover: Tiny(themeColor).lighten(7.5).brighten(1).desaturate(20).spin(-2).toHex8String(),
+        primaryColorPressed: Tiny(themeColor).darken(10).saturate(8).spin(2).toHex8String(),
+        primaryColorSuppl: Tiny(themeColor).lighten(7.5).brighten(1).desaturate(20).spin(-2).toHex8String(),
+        borderRadius: '5px',
       },
-    } as GlobalThemeOverrides),
+    } as GlobalThemeOverrides)
+  },
+
 )
 
 onMounted(

src/components/Mirror/RouteButton.vue

@@ -27,7 +27,7 @@ defineProps<{ entry: CardItem }>()
         </NButton>
       </NH3>
       <NRow v-for="(link, index) in entry.links" :key="index">
-        <NButton text tag="a" :href="link.url" target="_blank">
+        <NButton quaternary :focusable="false" tag="a" :href="link.url" target="_blank" style="width: 218px; justify-content: left">
           {{ link.title }}
           <template #icon>
             <NamedIcon :name="link.icon || 'unknown'" :size="16" />

src/components/SideBar/SideCard.vue

@@ -1,52 +1,28 @@
 <script setup lang="ts">
-import type { CSSProperties } from 'vue'
-import { NSwitch, useMessage } from 'naive-ui'
+import { MoonOutline, SunnyOutline } from '@vicons/ionicons5'
+import { NButton, NIcon } from 'naive-ui'
 import { useStore } from '@/store'
 
 const store = useStore()
-const message = useMessage()
 
-function onUpdate(value: boolean) {
-  store.setDarkMode(value)
-  message.info(`Side of ${value ? 'Tairitsu' : 'Hikari'}`)
-}
-
-function railStyle({
-  focused,
-  checked,
-}: {
-  focused: boolean
-  checked: boolean
-}) {
-  const style: CSSProperties = {}
-  if (checked) {
-    style.background = '#138ff2'
-    if (focused) {
-      style.boxShadow = '0 0 0 2px #138ff240'
-    }
-  }
-  else {
-    style.background = '#c0203d'
-    if (focused) {
-      style.boxShadow = '0 0 0 2px #c0203d40'
-    }
-  }
-  return style
+function onUpdate() {
+  store.setDarkMode(!store.darkMode)
 }
 </script>
 
 <template>
-  <NSwitch
-    :default-value="store.darkMode"
-    :on-update-value="onUpdate"
-    :rail-style="railStyle"
-    style="margin: 6px"
+  <NButton
+    quaternary
+    size="small"
+    :focusable="false"
+    style="padding: 0 6px"
+    @click="onUpdate"
   >
-    <template #checked>
-      Conflict
-    </template>
-    <template #unchecked>
-      Light
+    <template #icon>
+      <NIcon>
+        <SunnyOutline v-if="store.darkMode" />
+        <MoonOutline v-else />
+      </NIcon>
     </template>
-  </NSwitch>
+  </NButton>
 </template>

src/components/TopNavi/ThemeSwitch.vue

@@ -51,6 +51,13 @@ export default {
     lastUpdate: 'Last Sync',
     nextUpdate: 'Next Sync',
     searchText: 'Search mirrors...',
+    statusTitle: {
+      success: 'Synced',
+      cache: 'Cached',
+      proxy: 'Proxying',
+      failed: 'Failed',
+      syncing: 'Syncing',
+    },
   },
   error: {
     description: 'Where...am I?',

src/i18n/lang/en.ts

@@ -51,6 +51,13 @@ export default {
     lastUpdate: '上次同步',
     nextUpdate: '下次同步',
     searchText: '搜索镜像...',
+    statusTitle: {
+      success: '同步成功',
+      cache: '已缓存',
+      proxy: '代理中',
+      failed: '同步失败',
+      syncing: '正在同步',
+    },
   },
   error: {
     description: '我...在哪儿？',

src/i18n/lang/zh.ts

@@ -16,6 +16,7 @@ export async function fetchDoc(item?: DocItem): Promise<string> {
   if (item?.path === undefined) {
     return Promise.resolve('No document available.')
   }
-  return await text(`${ServerPrefix}documentations/${item.path}`, data =>
-    marked(data))
+  return await text(`${ServerPrefix}documentations/${item.path}`, async (data) => {
+    return await marked(data)
+  })
 }

src/models/documents.ts

@@ -41,6 +41,7 @@ export async function fetchNews(item?: NewsEntry): Promise<string> {
   if (item === undefined) {
     return Promise.resolve('No document available.')
   }
-  return await text(`${ServerPrefix}news/${item.content}`, data =>
-    marked(data))
+  return await text(`${ServerPrefix}news/${item.content}`, async (data) => {
+    return await marked(data)
+  })
 }

src/models/news.ts

@@ -29,13 +29,13 @@ export async function json<T, U = unknown>(
 
 export async function text(
   url: string,
-  callback?: (text: string) => string,
+  callback?: (text: string) => string | Promise<string>,
   config?: RequestInit,
 ): Promise<string> {
   const res = await get(url, config)
   const data = await res.text()
   if (callback) {
-    return callback(data)
+    return await callback(data)
   }
   return data
 }