diff --git a/frontend/package.json b/frontend/package.json index ca76f2d..45c632b 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -16,6 +16,7 @@ "@codemirror/state": "^6.7.6", "@codemirror/view": "^6.43.13", "@milkdown/crepe": "^7.22.1", + "@phosphor-icons/vue": "^2.2.1", "dompurify": "^3.1.6", "vue": "^3.4.0", "vue-router": "^4.4.0" diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml index 027e00f..2c4f3a1 100644 --- a/frontend/pnpm-lock.yaml +++ b/frontend/pnpm-lock.yaml @@ -26,6 +26,9 @@ importers: '@milkdown/crepe': specifier: ^7.22.1 version: 7.22.1(prosemirror-model@1.25.11)(prosemirror-state@1.4.4)(prosemirror-view@1.42.4)(typescript@5.9.3) + '@phosphor-icons/vue': + specifier: ^2.2.1 + version: 2.2.1(vue@3.5.40(typescript@5.9.3)) dompurify: specifier: ^3.1.6 version: 3.4.12 @@ -444,6 +447,12 @@ packages: '@ocavue/utils@1.8.0': resolution: {integrity: sha512-BD1ro+6Kllkmr/at+o32kvnLrVooUbk9gw3JAPaoAZXx+A5GhZ6Laa+UA38ifhG3vaamx+jcgEwX22BmTSMUVA==} + '@phosphor-icons/vue@2.2.1': + resolution: {integrity: sha512-3RNg1utc2Z5RwPKWFkW3eXI/0BfQAwXgtFxPUPeSzi55jGYUq16b+UqcgbKLazWFlwg5R92OCLKjDiJjeiJcnA==} + engines: {node: '>=14'} + peerDependencies: + vue: '>=3.2.39' + '@rollup/rollup-android-arm-eabi@4.62.3': resolution: {integrity: sha512-c0wdcekXtQvvn5Tsrk/+op/gUArrbWaFduBnTLP2l1cKLSQs4diMWjJw3m6A0DdzT8dAAX95KpkJ3qynCePbmw==} cpu: [arm] @@ -1850,6 +1859,10 @@ snapshots: '@ocavue/utils@1.8.0': {} + '@phosphor-icons/vue@2.2.1(vue@3.5.40(typescript@5.9.3))': + dependencies: + vue: 3.5.40(typescript@5.9.3) + '@rollup/rollup-android-arm-eabi@4.62.3': optional: true diff --git a/frontend/src/ui/yohaku/YohakuTop.vue b/frontend/src/ui/yohaku/YohakuTop.vue index fb079f3..2698e71 100644 --- a/frontend/src/ui/yohaku/YohakuTop.vue +++ b/frontend/src/ui/yohaku/YohakuTop.vue @@ -4,6 +4,13 @@ import { RouterLink, useRoute } from 'vue-router' import { site } from '../../site' import NavBurger from '../../components/NavBurger.vue' import AuthorAvatar from '../../components/AuthorAvatar.vue' +import { + PhHouse, + PhArchiveBox, + PhTag, + PhSquaresFour, + PhUserCircle +} from '@phosphor-icons/vue' // 余白顶栏。对应设计稿的
：品牌 / 导航 / 操作三块， // 滚动过 8px 加 .scrolled（设计稿的「四态里的第一态」）。 @@ -21,11 +28,11 @@ const burger = ref(null) const drawerEl = ref(null) const links = [ - { to: '/', label: '时间线' }, - { to: '/archive', label: '归档' }, - { to: '/tags', label: '标签' }, - { to: '/projects', label: '作品' }, - { to: '/about', label: '关于' } + { to: '/', label: '时间线', icon: PhHouse }, + { to: '/archive', label: '归档', icon: PhArchiveBox }, + { to: '/tags', label: '标签', icon: PhTag }, + { to: '/projects', label: '作品', icon: PhSquaresFour }, + { to: '/about', label: '关于', icon: PhUserCircle } ] const title = () => site.site_title?.split(/[·|]/)[0]?.trim() || 'ONE' @@ -148,7 +155,10 @@ function toggleTheme() { :key="l.to" :to="l.to" :class="{ on: isOn(l) }" - >{{ l.label }} + > +