feat: introduce BaseImg component

frontend_nuxt/components/BaseImg.vue

@@ -0,0 +1,44 @@
+<template>
+  <NuxtImg
+    :src="src"
+    :alt="alt"
+    :placeholder="placeholder"
+    placeholder-class="ph"
+    :loading="loading"
+    @load="loaded = true"
+    :class="['base-img', { 'is-loaded': loaded }]"
+    v-bind="$attrs"
+  />
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  src: { type: String, required: true },
+  alt: { type: String, default: '' },
+  loading: { type: String, default: 'lazy' },
+  placeholderOptions: {
+    type: Object,
+    default: () => ({ w: 16, h: 16, f: 'webp', q: 40, blur: 2 }),
+  },
+})
+
+const img = useImage()
+const loaded = ref(false)
+const placeholder = computed(() => img(props.src, props.placeholderOptions))
+</script>
+
+<style scoped>
+.base-img {
+  opacity: 0;
+  transition: opacity 0.25s;
+}
+.base-img.is-loaded {
+  opacity: 1;
+}
+:deep(img.ph) {
+  filter: blur(10px);
+  transform: scale(1.03);
+}
+</style>

frontend_nuxt/components/BaseTabs.vue

@@ -1,110 +0,0 @@
-<template>
-  <div class="base-tabs-wrapper" @touchstart="onTouchStart" @touchend="onTouchEnd">
-    <div class="base-tabs-header">
-      <div class="base-tabs-items">
-        <div
-          v-for="tab in tabs"
-          :key="tab.name"
-          :class="['base-tab-item', { selected: tab.name === current }]"
-          @click="select(tab.name)"
-        >
-          <i v-if="tab.icon" :class="tab.icon"></i>
-          <span>{{ tab.label }}</span>
-        </div>
-      </div>
-      <div class="base-tabs-right">
-        <slot name="right"></slot>
-      </div>
-    </div>
-    <div class="base-tabs-content">
-      <slot :current="current"></slot>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, watch } from 'vue'
-
-const props = defineProps({
-  modelValue: { type: String, default: undefined },
-  tabs: { type: Array, required: true },
-  swipe: { type: Boolean, default: true },
-})
-
-const emit = defineEmits(['update:modelValue'])
-
-const current = ref(props.modelValue ?? (props.tabs[0] && props.tabs[0].name))
-
-watch(
-  () => props.modelValue,
-  (val) => {
-    if (val !== undefined) current.value = val
-  },
-)
-
-function select(name) {
-  emit('update:modelValue', name)
-}
-
-let startX = 0
-
-function onTouchStart(e) {
-  if (!props.swipe) return
-  startX = e.changedTouches[0].clientX
-}
-
-function onTouchEnd(e) {
-  if (!props.swipe) return
-  const endX = e.changedTouches[0].clientX
-  const diff = endX - startX
-  if (Math.abs(diff) > 50) {
-    const index = props.tabs.findIndex((t) => t.name === current.value)
-    if (diff < 0 && index < props.tabs.length - 1) {
-      emit('update:modelValue', props.tabs[index + 1].name)
-    } else if (diff > 0 && index > 0) {
-      emit('update:modelValue', props.tabs[index - 1].name)
-    }
-  }
-}
-</script>
-
-<style scoped>
-.base-tabs-wrapper {
-  display: flex;
-  flex-direction: column;
-}
-
-.base-tabs-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  border-bottom: 1px solid var(--normal-border-color);
-}
-
-.base-tabs-items {
-  display: flex;
-  overflow-x: auto;
-  scrollbar-width: none;
-}
-
-.base-tab-item {
-  padding: 10px 20px;
-  cursor: pointer;
-  white-space: nowrap;
-}
-
-.base-tab-item.selected {
-  color: var(--primary-color);
-  border-bottom: 2px solid var(--primary-color);
-}
-
-.base-tab-item i {
-  margin-right: 6px;
-}
-
-.base-tabs-right {
-  display: flex;
-  align-items: center;
-  flex: 0 0 auto;
-}
-</style>

frontend_nuxt/components/HeaderComponent.vue

@@ -63,7 +63,7 @@
           <DropdownMenu v-if="isLogin" ref="userMenu" :items="headerMenuItems">
             <template #trigger>
               <div class="avatar-container">
-                <img class="avatar-img" :src="avatar" alt="avatar" />
+                <BaseImg class="avatar-img" :src="avatar" alt="avatar" width="32" height="32" />
                 <i class="fas fa-caret-down dropdown-icon"></i>
               </div>
             </template>
@@ -87,6 +87,7 @@ import { computed, nextTick, ref, watch } from 'vue'
 import DropdownMenu from '~/components/DropdownMenu.vue'
 import ToolTip from '~/components/ToolTip.vue'
 import SearchDropdown from '~/components/SearchDropdown.vue'
+import BaseImg from '~/components/BaseImg.vue'
 import { authState, clearToken, loadCurrentUser } from '~/utils/auth'
 import { useUnreadCount } from '~/composables/useUnreadCount'
 import { useChannelsUnreadCount } from '~/composables/useChannelsUnreadCount'
@@ -155,7 +156,8 @@ const copyInviteLink = async () => {
        * https://webkit.org/blog/10247/new-webkit-features-in-safari-13-1/
        */
       setTimeout(() => {
-        navigator.clipboard.writeText(inviteLink)
+        navigator.clipboard
+          .writeText(inviteLink)
           .then(() => {
             toast.success('邀请链接已复制')
           })

frontend_nuxt/nuxt.config.ts

@@ -13,6 +13,7 @@ export default defineNuxtConfig({
     },
   },
   css: ['vditor/dist/index.css', '~/assets/fonts.css', '~/assets/global.css'],
+  modules: ['@nuxt/image'],
   app: {
     pageTransition: { name: 'page', mode: 'out-in' },
     head: {

frontend_nuxt/package-lock.json

@@ -6,6 +6,7 @@
     "": {
       "name": "frontend_nuxt",
       "dependencies": {
+        "@nuxt/image": "^1.11.0",
         "@stomp/stompjs": "^7.0.0",
         "cropperjs": "^1.6.2",
         "echarts": "^5.6.0",
@@ -959,6 +960,16 @@
         "node": ">=18"
       }
     },
+    "node_modules/@fastify/accept-negotiator": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@fastify/accept-negotiator/-/accept-negotiator-1.1.0.tgz",
+      "integrity": "sha512-OIHZrb2ImZ7XG85HXOONLcJWGosv7sIvM2ifAPQVhg9Lv7qdmMBNVaai4QTdyuaqbKM5eO6sLSQOYI7wEQeCJQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/@fastify/busboy": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/@fastify/busboy/-/busboy-3.2.0.tgz",
@@ -1952,6 +1963,63 @@
         "node": ">=18.12.0"
       }
     },
+    "node_modules/@nuxt/image": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/@nuxt/image/-/image-1.11.0.tgz",
+      "integrity": "sha512-4kzhvb2tJfxMsa/JZeYn1sMiGbx2J/S6BQrQSdXNsHgSvywGVkFhTiQGjoP6O49EsXyAouJrer47hMeBcTcfXQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@nuxt/kit": "^3.18.0",
+        "consola": "^3.4.2",
+        "defu": "^6.1.4",
+        "h3": "^1.15.3",
+        "image-meta": "^0.2.1",
+        "knitwork": "^1.2.0",
+        "ohash": "^2.0.11",
+        "pathe": "^2.0.3",
+        "std-env": "^3.9.0",
+        "ufo": "^1.6.1"
+      },
+      "engines": {
+        "node": ">=18.20.6"
+      },
+      "optionalDependencies": {
+        "ipx": "^2.1.1"
+      }
+    },
+    "node_modules/@nuxt/image/node_modules/@nuxt/kit": {
+      "version": "3.18.1",
+      "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-3.18.1.tgz",
+      "integrity": "sha512-z6w1Fzv27CIKFlhct05rndkJSfoslplWH5fJ9dtusEvpYScLXp5cATWIbWkte9e9zFSmQTgDQJjNs3geQHE7og==",
+      "license": "MIT",
+      "dependencies": {
+        "c12": "^3.2.0",
+        "consola": "^3.4.2",
+        "defu": "^6.1.4",
+        "destr": "^2.0.5",
+        "errx": "^0.1.0",
+        "exsolve": "^1.0.7",
+        "ignore": "^7.0.5",
+        "jiti": "^2.5.1",
+        "klona": "^2.0.6",
+        "knitwork": "^1.2.0",
+        "mlly": "^1.7.4",
+        "ohash": "^2.0.11",
+        "pathe": "^2.0.3",
+        "pkg-types": "^2.2.0",
+        "scule": "^1.3.0",
+        "semver": "^7.7.2",
+        "std-env": "^3.9.0",
+        "tinyglobby": "^0.2.14",
+        "ufo": "^1.6.1",
+        "unctx": "^2.4.1",
+        "unimport": "^5.2.0",
+        "untyped": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      }
+    },
     "node_modules/@nuxt/kit": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/@nuxt/kit/-/kit-4.0.3.tgz",
@@ -3718,6 +3786,16 @@
       "integrity": "sha512-chcDs6YkAnKp1FqzwhGvh3i7v0+/ytzqWdKYw6XzINEKAzke/iD00dNgFPWSZEqktHOK+C1gSzXhLkLbARIaZw==",
       "license": "Apache-2.0"
     },
+    "node_modules/@trysound/sax": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
+      "integrity": "sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==",
+      "license": "ISC",
+      "optional": true,
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/@tybys/wasm-util": {
       "version": "0.10.0",
       "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.0.tgz",
@@ -4624,6 +4702,71 @@
       "license": "Apache-2.0",
       "optional": true
     },
+    "node_modules/bare-fs": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/bare-fs/-/bare-fs-4.2.1.tgz",
+      "integrity": "sha512-mELROzV0IhqilFgsl1gyp48pnZsaV9xhQapHLDsvn4d4ZTfbFhcghQezl7FTEDNBcGqLUnNI3lUlm6ecrLWdFA==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "dependencies": {
+        "bare-events": "^2.5.4",
+        "bare-path": "^3.0.0",
+        "bare-stream": "^2.6.4"
+      },
+      "engines": {
+        "bare": ">=1.16.0"
+      },
+      "peerDependencies": {
+        "bare-buffer": "*"
+      },
+      "peerDependenciesMeta": {
+        "bare-buffer": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/bare-os": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/bare-os/-/bare-os-3.6.2.tgz",
+      "integrity": "sha512-T+V1+1srU2qYNBmJCXZkUY5vQ0B4FSlL3QDROnKQYOqeiQR8UbjNHlPa+TIbM4cuidiN9GaTaOZgSEgsvPbh5A==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "engines": {
+        "bare": ">=1.14.0"
+      }
+    },
+    "node_modules/bare-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/bare-path/-/bare-path-3.0.0.tgz",
+      "integrity": "sha512-tyfW2cQcB5NN8Saijrhqn0Zh7AnFNsnczRcuWODH0eYAXBsJ5gVxAUuNr7tsHSC6IZ77cA0SitzT+s47kot8Mw==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "dependencies": {
+        "bare-os": "^3.0.1"
+      }
+    },
+    "node_modules/bare-stream": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/bare-stream/-/bare-stream-2.7.0.tgz",
+      "integrity": "sha512-oyXQNicV1y8nc2aKffH+BUHFRXmx6VrPzlnaEvMhram0nPBrKcEdcyBg5r08D0i8VxngHFAiVyn1QKXpSG0B8A==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "dependencies": {
+        "streamx": "^2.21.0"
+      },
+      "peerDependencies": {
+        "bare-buffer": "*",
+        "bare-events": "*"
+      },
+      "peerDependenciesMeta": {
+        "bare-buffer": {
+          "optional": true
+        },
+        "bare-events": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -4662,6 +4805,58 @@
         "url": "https://github.com/sponsors/antfu"
       }
     },
+    "node_modules/bl": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/bl/-/bl-4.1.0.tgz",
+      "integrity": "sha512-1W07cM9gS6DcLperZfFSj+bWLtaPGSOHWhPiGzXmvVJbRLdG82sH/Kn8EtW1VqWVA54AKf2h5k5BbnIbwF3h6w==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "buffer": "^5.5.0",
+        "inherits": "^2.0.4",
+        "readable-stream": "^3.4.0"
+      }
+    },
+    "node_modules/bl/node_modules/buffer": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-5.7.1.tgz",
+      "integrity": "sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.1.13"
+      }
+    },
+    "node_modules/bl/node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/boolbase": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
@@ -5409,6 +5604,13 @@
         "node": ">=4"
       }
     },
+    "node_modules/cssfilter": {
+      "version": "0.0.10",
+      "resolved": "https://registry.npmjs.org/cssfilter/-/cssfilter-0.0.10.tgz",
+      "integrity": "sha512-FAaLDaplstoRsDR8XGYH51znUN0UY7nMc6Z9/fvE8EXGwvJE9hu7W2vHwx1+bd6gCYnln9nLbzxFTrcO9YQDZw==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/cssnano": {
       "version": "7.1.0",
       "resolved": "https://registry.npmjs.org/cssnano/-/cssnano-7.1.0.tgz",
@@ -5599,6 +5801,32 @@
         "callsite": "^1.0.0"
       }
     },
+    "node_modules/decompress-response": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-6.0.0.tgz",
+      "integrity": "sha512-aW35yZM6Bb/4oJlZncMH2LCoZtJXTRxES17vE3hoRiowU2kWHaJKFkSBDnDR+cm9J+9QhXmREyIfv0pji9ejCQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "mimic-response": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/deep-extend": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
+      "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=4.0.0"
+      }
+    },
     "node_modules/deepmerge": {
       "version": "4.3.1",
       "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
@@ -6285,6 +6513,16 @@
         "url": "https://github.com/sindresorhus/execa?sponsor=1"
       }
     },
+    "node_modules/expand-template": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/expand-template/-/expand-template-2.0.3.tgz",
+      "integrity": "sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==",
+      "license": "(MIT OR WTFPL)",
+      "optional": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/exsolve": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/exsolve/-/exsolve-1.0.7.tgz",
@@ -6554,6 +6792,13 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/fs-constants": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs-constants/-/fs-constants-1.0.0.tgz",
+      "integrity": "sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/fsevents": {
       "version": "2.3.3",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
@@ -6708,6 +6953,13 @@
         "git-up": "^8.1.0"
       }
     },
+    "node_modules/github-from-package": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/github-from-package/-/github-from-package-0.0.0.tgz",
+      "integrity": "sha512-SyHy3T1v2NUXn29OsWdxmK6RwHD+vkj3v8en8AOBZ1wBQ/hCAQ5bAQTD02kW4W9tUp/3Qh6J8r9EvntiyCmOOw==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/glob": {
       "version": "10.4.5",
       "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
@@ -7120,6 +7372,98 @@
         "url": "https://opencollective.com/ioredis"
       }
     },
+    "node_modules/ipx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ipx/-/ipx-2.1.1.tgz",
+      "integrity": "sha512-XuM9FEGOT+/45mfAWZ5ykwkZ/oE7vWpd1iWjRffMWlwAYIRzb/xD6wZhQ4BzmPMX6Ov5dqK0wUyD0OEN9oWT6g==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@fastify/accept-negotiator": "^1.1.0",
+        "citty": "^0.1.5",
+        "consola": "^3.2.3",
+        "defu": "^6.1.4",
+        "destr": "^2.0.2",
+        "etag": "^1.8.1",
+        "h3": "^1.10.0",
+        "image-meta": "^0.2.0",
+        "listhen": "^1.5.6",
+        "ofetch": "^1.3.3",
+        "pathe": "^1.1.2",
+        "sharp": "^0.32.6",
+        "svgo": "^3.2.0",
+        "ufo": "^1.3.2",
+        "unstorage": "^1.10.1",
+        "xss": "^1.0.14"
+      },
+      "bin": {
+        "ipx": "bin/ipx.mjs"
+      }
+    },
+    "node_modules/ipx/node_modules/commander": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
+      "integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/ipx/node_modules/css-tree": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
+      "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "mdn-data": "2.0.30",
+        "source-map-js": "^1.0.1"
+      },
+      "engines": {
+        "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+      }
+    },
+    "node_modules/ipx/node_modules/mdn-data": {
+      "version": "2.0.30",
+      "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
+      "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
+      "license": "CC0-1.0",
+      "optional": true
+    },
+    "node_modules/ipx/node_modules/pathe": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.2.tgz",
+      "integrity": "sha512-whLdWMYL2TwI08hn8/ZqAbrVemu0LNaNNJZX73O6qaIdCTfXutsLhMkjdENX0qhsQ9uIimo4/aQOmXkoon2nDQ==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/ipx/node_modules/svgo": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/svgo/-/svgo-3.3.2.tgz",
+      "integrity": "sha512-OoohrmuUlBs8B8o6MB2Aevn+pRIH9zDALSR+6hhqVfa6fRwG/Qw9VUMSMW9VNg2CFc/MTIfabtdOVl9ODIJjpw==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@trysound/sax": "0.2.0",
+        "commander": "^7.2.0",
+        "css-select": "^5.1.0",
+        "css-tree": "^2.3.1",
+        "css-what": "^6.1.0",
+        "csso": "^5.0.5",
+        "picocolors": "^1.0.0"
+      },
+      "bin": {
+        "svgo": "bin/svgo"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/svgo"
+      }
+    },
     "node_modules/iron-webcrypto": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/iron-webcrypto/-/iron-webcrypto-1.2.1.tgz",
@@ -7934,6 +8278,19 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/mimic-response": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/mimic-response/-/mimic-response-3.1.0.tgz",
+      "integrity": "sha512-z0yWI+4FDrrweS8Zmt4Ej5HdJmky15+L2e6Wgn3+iK5fWzb6T3fhNFq2+MeTRb064c6Wr4N/wv0DzQTjNzHNGQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/minimatch": {
       "version": "9.0.5",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
@@ -8000,6 +8357,13 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/mkdirp-classic": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz",
+      "integrity": "sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/mlly": {
       "version": "1.7.4",
       "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.7.4.tgz",
@@ -8096,6 +8460,13 @@
       "integrity": "sha512-9ca1h0Xjvo9bEkE4UOxgAzLV0jHKe6LMaxo37ND2DAhhAtd0j8pR1Wxz+/goMrZO8AEZTWCmyaOsFI/W5AdpCQ==",
       "license": "MIT"
     },
+    "node_modules/napi-build-utils": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/napi-build-utils/-/napi-build-utils-2.0.0.tgz",
+      "integrity": "sha512-GEbrYkbfF7MoNaoh2iGG84Mnf/WZfB0GdGEsM8wz7Expx/LlWf5U8t9nvJKXSp3qr5IsEbK04cBGhol/KwOsWA==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/netlify": {
       "version": "13.3.5",
       "resolved": "https://registry.npmjs.org/netlify/-/netlify-13.3.5.tgz",
@@ -8241,6 +8612,19 @@
         "node": ">=18"
       }
     },
+    "node_modules/node-abi": {
+      "version": "3.75.0",
+      "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.75.0.tgz",
+      "integrity": "sha512-OhYaY5sDsIka7H7AtijtI9jwGYLyl29eQn/W623DiN/MIv5sUqc4g7BIDThX+gb7di9f6xK02nkp8sdfFWZLTg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "semver": "^7.3.5"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/node-addon-api": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
@@ -9535,6 +9919,95 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/prebuild-install": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/prebuild-install/-/prebuild-install-7.1.3.tgz",
+      "integrity": "sha512-8Mf2cbV7x1cXPUILADGI3wuhfqWvtiLA1iclTDbFRZkgRQS0NqsPZphna9V+HyTEadheuPmjaJMsbzKQFOzLug==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "detect-libc": "^2.0.0",
+        "expand-template": "^2.0.3",
+        "github-from-package": "0.0.0",
+        "minimist": "^1.2.3",
+        "mkdirp-classic": "^0.5.3",
+        "napi-build-utils": "^2.0.0",
+        "node-abi": "^3.3.0",
+        "pump": "^3.0.0",
+        "rc": "^1.2.7",
+        "simple-get": "^4.0.0",
+        "tar-fs": "^2.0.0",
+        "tunnel-agent": "^0.6.0"
+      },
+      "bin": {
+        "prebuild-install": "bin.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/prebuild-install/node_modules/chownr": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
+      "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==",
+      "license": "ISC",
+      "optional": true
+    },
+    "node_modules/prebuild-install/node_modules/detect-libc": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.4.tgz",
+      "integrity": "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/prebuild-install/node_modules/readable-stream": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+      "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/prebuild-install/node_modules/tar-fs": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.3.tgz",
+      "integrity": "sha512-090nwYJDmlhwFwEW3QQl+vaNnxsO2yVsd45eTKRBzSzu+hlb1w2K9inVq5b0ngXuLVqQ4ApvsUHHnu/zQNkWAg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "chownr": "^1.1.1",
+        "mkdirp-classic": "^0.5.2",
+        "pump": "^3.0.0",
+        "tar-stream": "^2.1.4"
+      }
+    },
+    "node_modules/prebuild-install/node_modules/tar-stream": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
+      "integrity": "sha512-ujeqbceABgwMZxEJnk2HDY2DlnUZ+9oEcb1KzTVfYHio0UE6dG71n60d8D2I4qNvleWrrXpmjpt7vZeF1LnMZQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "bl": "^4.0.3",
+        "end-of-stream": "^1.4.1",
+        "fs-constants": "^1.0.0",
+        "inherits": "^2.0.3",
+        "readable-stream": "^3.1.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/precinct": {
       "version": "12.2.0",
       "resolved": "https://registry.npmjs.org/precinct/-/precinct-12.2.0.tgz",
@@ -9725,6 +10198,29 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/rc": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
+      "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
+      "license": "(BSD-2-Clause OR MIT OR Apache-2.0)",
+      "optional": true,
+      "dependencies": {
+        "deep-extend": "^0.6.0",
+        "ini": "~1.3.0",
+        "minimist": "^1.2.0",
+        "strip-json-comments": "~2.0.1"
+      },
+      "bin": {
+        "rc": "cli.js"
+      }
+    },
+    "node_modules/rc/node_modules/ini": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
+      "license": "ISC",
+      "optional": true
+    },
     "node_modules/rc9": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/rc9/-/rc9-2.1.2.tgz",
@@ -10164,6 +10660,74 @@
       "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
       "license": "ISC"
     },
+    "node_modules/sharp": {
+      "version": "0.32.6",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.32.6.tgz",
+      "integrity": "sha512-KyLTWwgcR9Oe4d9HwCwNM2l7+J0dUQwn/yf7S0EnTtb0eVS4RxO0eUSvxPtzT4F3SY+C4K6fqdv/DO27sJ/v/w==",
+      "hasInstallScript": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "dependencies": {
+        "color": "^4.2.3",
+        "detect-libc": "^2.0.2",
+        "node-addon-api": "^6.1.0",
+        "prebuild-install": "^7.1.1",
+        "semver": "^7.5.4",
+        "simple-get": "^4.0.1",
+        "tar-fs": "^3.0.4",
+        "tunnel-agent": "^0.6.0"
+      },
+      "engines": {
+        "node": ">=14.15.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/libvips"
+      }
+    },
+    "node_modules/sharp/node_modules/color": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
+      "integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "color-convert": "^2.0.1",
+        "color-string": "^1.9.0"
+      },
+      "engines": {
+        "node": ">=12.5.0"
+      }
+    },
+    "node_modules/sharp/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/sharp/node_modules/detect-libc": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.4.tgz",
+      "integrity": "sha512-3UDv+G9CsCKO1WKMGw9fwq/SWJYbI0c5Y7LU1AXYoDdbhE2AHQ6N6Nb34sG8Fj7T5APy8qXDCKuuIHd1BR0tVA==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/sharp/node_modules/node-addon-api": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-6.1.0.tgz",
+      "integrity": "sha512-+eawOlIgy680F0kBzPUNFhMZGtJ1YmqM6l4+Crf4IkImjYrO/mqPwRMh352g23uIaQKFItcQ64I7KMaJxHgAVA==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -10281,6 +10845,53 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/simple-concat": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/simple-concat/-/simple-concat-1.0.1.tgz",
+      "integrity": "sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/simple-get": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-4.0.1.tgz",
+      "integrity": "sha512-brv7p5WgH0jmQJr1ZDDfKDOSeWWg+OVypG99A/5vYGPqJ6pxiaHLy8nxtFjBA7oMa01ebA9gfh1uMCFqOuXxvA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "decompress-response": "^6.0.0",
+        "once": "^1.3.1",
+        "simple-concat": "^1.0.0"
+      }
+    },
     "node_modules/simple-git": {
       "version": "3.28.0",
       "resolved": "https://registry.npmjs.org/simple-git/-/simple-git-3.28.0.tgz",
@@ -10609,6 +11220,16 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/strip-json-comments": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+      "integrity": "sha512-4gB8na07fecVVkOI6Rs4e7T6NOTki5EmL7TUduTs6bu3EdnSycntVJ4re8kgZA+wx9IueI2Y11bfbgwtzuE0KQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/strip-literal": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/strip-literal/-/strip-literal-3.0.0.tgz",
@@ -10748,6 +11369,21 @@
         "node": ">=18"
       }
     },
+    "node_modules/tar-fs": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-3.1.0.tgz",
+      "integrity": "sha512-5Mty5y/sOF1YWj1J6GiBodjlDc05CUR8PKXrsnFAiSG0xA+GHeWLovaZPYUDXkH/1iKRf2+M5+OrRgzC7O9b7w==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "pump": "^3.0.0",
+        "tar-stream": "^3.1.5"
+      },
+      "optionalDependencies": {
+        "bare-fs": "^4.0.1",
+        "bare-path": "^3.0.0"
+      }
+    },
     "node_modules/tar-stream": {
       "version": "3.1.7",
       "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-3.1.7.tgz",
@@ -10922,6 +11558,19 @@
       "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==",
       "license": "0BSD"
     },
+    "node_modules/tunnel-agent": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
+      "integrity": "sha512-McnNiV1l8RYeY8tBgEpuodCC1mLUdbSN+CYBL7kJsJNInOP8UjDDEwdk6Mw60vdLLrr5NHKZhMAOSrR2NZuQ+w==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "dependencies": {
+        "safe-buffer": "^5.0.1"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/type-fest": {
       "version": "4.41.0",
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-4.41.0.tgz",
@@ -12134,6 +12783,30 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/xss": {
+      "version": "1.0.15",
+      "resolved": "https://registry.npmjs.org/xss/-/xss-1.0.15.tgz",
+      "integrity": "sha512-FVdlVVC67WOIPvfOwhoMETV72f6GbW7aOabBC3WxN/oUdoEMDyLz4OgRv5/gck2ZeNqEQu+Tb0kloovXOfpYVg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "commander": "^2.20.3",
+        "cssfilter": "0.0.10"
+      },
+      "bin": {
+        "xss": "bin/xss"
+      },
+      "engines": {
+        "node": ">= 0.10.0"
+      }
+    },
+    "node_modules/xss/node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "license": "MIT",
+      "optional": true
+    },
     "node_modules/y18n": {
       "version": "5.0.8",
       "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",

frontend_nuxt/package.json

@@ -9,6 +9,7 @@
     "generate": "nuxt generate"
   },
   "dependencies": {
+    "@nuxt/image": "^1.11.0",
     "@stomp/stompjs": "^7.0.0",
     "cropperjs": "^1.6.2",
     "echarts": "^5.6.0",

frontend_nuxt/pages/about/index.vue

@@ -1,7 +1,15 @@
 <template>
   <div class="about-page">
-    <BaseTabs v-model="selectedTab" :tabs="tabs" class="about-tabs">
+    <div class="about-tabs">
-      <template #default>
+      <div
+        v-for="tab in tabs"
+        :key="tab.name"
+        :class="['about-tabs-item', { selected: selectedTab === tab.name }]"
+        @click="selectTab(tab.name)"
+      >
+        <div class="about-tabs-item-label">{{ tab.label }}</div>
+      </div>
+    </div>
     <div class="about-loading" v-if="isFetching">
       <l-hatch-spinner size="100" stroke="10" speed="1" color="var(--primary-color)" />
     </div>
@@ -11,19 +19,15 @@
       v-html="renderMarkdown(content)"
       @click="handleContentClick"
     ></div>
-      </template>
-    </BaseTabs>
   </div>
 </template>
 
 <script>
-import { ref, watch } from 'vue'
+import { onMounted, ref } from 'vue'
 import { handleMarkdownClick, renderMarkdown } from '~/utils/markdown'
-import BaseTabs from '~/components/BaseTabs.vue'
 
 export default {
   name: 'AboutPageView',
-  components: { BaseTabs },
   setup() {
     const isFetching = ref(false)
     const tabs = [
@@ -67,20 +71,21 @@ export default {
       }
     }
 
-    watch(
+    const selectTab = (name) => {
-      selectedTab,
+      selectedTab.value = name
-      (name) => {
       const tab = tabs.find((t) => t.name === name)
       if (tab) loadContent(tab.file)
-      },
+    }
-      { immediate: true },
+
-    )
+    onMounted(() => {
+      loadContent(tabs[0].file)
+    })
 
     const handleContentClick = (e) => {
       handleMarkdownClick(e)
     }
 
-    return { tabs, selectedTab, content, renderMarkdown, isFetching, handleContentClick }
+    return { tabs, selectedTab, content, renderMarkdown, selectTab, isFetching, handleContentClick }
   },
 }
 </script>
@@ -95,11 +100,25 @@ export default {
 .about-tabs {
   top: calc(var(--header-height) + 1px);
   background-color: var(--background-color-blur);
+  display: flex;
+  flex-direction: row;
+  border-bottom: 1px solid var(--normal-border-color);
   margin-bottom: 20px;
   overflow-x: auto;
   scrollbar-width: none;
 }
 
+.about-tabs-item {
+  padding: 10px 20px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.about-tabs-item.selected {
+  color: var(--primary-color);
+  border-bottom: 2px solid var(--primary-color);
+}
+
 .about-content {
   line-height: 1.6;
   padding: 20px;

frontend_nuxt/pages/message-box/index.vue

@@ -7,8 +7,15 @@
     <div v-if="!isFloatMode" class="float-control">
       <i class="fas fa-compress" @click="minimize" title="最小化"></i>
     </div>
-    <BaseTabs v-model="activeTab" :tabs="tabs">
+    <div class="tabs">
-      <template #default>
+      <div :class="['tab', { active: activeTab === 'messages' }]" @click="switchToMessage">
+        站内信
+      </div>
+      <div :class="['tab', { active: activeTab === 'channels' }]" @click="switchToChannels">
+        频道
+      </div>
+    </div>
+
     <div v-if="activeTab === 'messages'">
       <div v-if="loading" class="loading-message">
         <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
@@ -23,11 +30,7 @@
       </div>
 
       <div v-if="!loading && conversations.length === 0" class="empty-container">
-            <BasePlaceholder
+        <BasePlaceholder v-if="conversations.length === 0" text="暂无会话" icon="fas fa-inbox" />
-              v-if="conversations.length === 0"
-              text="暂无会话"
-              icon="fas fa-inbox"
-            />
       </div>
 
       <div
@@ -59,9 +62,7 @@
           <div class="last-message-row">
             <div class="last-message">
               {{
-                    convo.lastMessage
+                convo.lastMessage ? stripMarkdownLength(convo.lastMessage.content, 100) : '暂无消息'
-                      ? stripMarkdownLength(convo.lastMessage.content, 100)
-                      : '暂无消息'
               }}
             </div>
             <div v-if="convo.unreadCount > 0" class="unread-count-badge">
@@ -107,9 +108,7 @@
             <div class="last-message-row">
               <div class="last-message">
                 {{
-                      ch.lastMessage
+                  ch.lastMessage ? stripMarkdownLength(ch.lastMessage.content, 100) : ch.description
-                        ? stripMarkdownLength(ch.lastMessage.content, 100)
-                        : ch.description
                 }}
               </div>
               <div class="member-count">成员 {{ ch.memberCount }}</div>
@@ -118,8 +117,6 @@
         </div>
       </div>
     </div>
-      </template>
-    </BaseTabs>
   </div>
 </template>
 
@@ -135,7 +132,6 @@ import TimeManager from '~/utils/time'
 import { stripMarkdownLength } from '~/utils/markdown'
 import SearchPersonDropdown from '~/components/SearchPersonDropdown.vue'
 import BasePlaceholder from '~/components/BasePlaceholder.vue'
-import BaseTabs from '~/components/BaseTabs.vue'
 
 const config = useRuntimeConfig()
 const conversations = ref([])
@@ -156,10 +152,6 @@ const channels = ref([])
 const loadingChannels = ref(false)
 const isFloatMode = computed(() => route.query.float === '1')
 const floatRoute = useState('messageFloatRoute')
-const tabs = [
-  { name: 'messages', label: '站内信' },
-  { name: 'channels', label: '频道' },
-]
 
 async function fetchConversations() {
   const token = getToken()
@@ -224,6 +216,16 @@ async function fetchChannels() {
   }
 }
 
+function switchToMessage() {
+  activeTab.value = 'messages'
+  fetchConversations()
+}
+
+function switchToChannels() {
+  activeTab.value = 'channels'
+  fetchChannels()
+}
+
 async function goToChannel(id) {
   const token = getToken()
   if (!token) {
@@ -283,14 +285,6 @@ watch(isConnected, (newValue) => {
   }
 })
 
-watch(activeTab, (val) => {
-  if (val === 'messages') {
-    fetchConversations()
-  } else {
-    fetchChannels()
-  }
-})
-
 onUnmounted(() => {
   if (subscription) {
     subscription.unsubscribe()
@@ -329,10 +323,22 @@ function minimize() {
   cursor: pointer;
 }
 
-.messages-container :deep(.base-tabs-header) {
+.tabs {
+  display: flex;
+  border-bottom: 1px solid var(--normal-border-color);
   margin-bottom: 16px;
 }
 
+.tab {
+  padding: 10px 20px;
+  cursor: pointer;
+}
+
+.tab.active {
+  border-bottom: 2px solid var(--primary-color);
+  color: var(--primary-color);
+}
+
 .loading-message {
   display: flex;
   justify-content: center;
@@ -494,7 +500,7 @@ function minimize() {
     display: block;
   }
 
-  .base-tabs-wrapper,
+  .tabs,
   .loading-message,
   .error-container,
   .search-container,

frontend_nuxt/pages/message.vue

@@ -1,16 +1,35 @@
 <template>
   <div class="message-page">
-    <BaseTabs v-model="selectedTab" :tabs="tabs">
+    <div class="message-page-header">
-      <template #right>
+      <div class="message-tabs">
+        <div
+          :class="['message-tab-item', { selected: selectedTab === 'all' }]"
+          @click="selectedTab = 'all'"
+        >
+          消息
+        </div>
+        <div
+          :class="['message-tab-item', { selected: selectedTab === 'unread' }]"
+          @click="selectedTab = 'unread'"
+        >
+          未读
+        </div>
+        <div
+          :class="['message-tab-item', { selected: selectedTab === 'control' }]"
+          @click="selectedTab = 'control'"
+        >
+          消息设置
+        </div>
+      </div>
+
       <div class="message-page-header-right">
         <div class="message-page-header-right-item" @click="markAllRead">
           <i class="fas fa-bolt message-page-header-right-item-button-icon"></i>
           <span class="message-page-header-right-item-button-text"> 已读所有消息 </span>
         </div>
       </div>
-      </template>
+    </div>
 
-      <template #default>
     <div v-if="selectedTab === 'control'">
       <div class="message-control-container">
         <div class="message-control-title">通知设置</div>
@@ -518,10 +537,9 @@
         <InfiniteLoadMore :key="selectedTab" :on-load="loadMore" :pause="isLoadingMessage" />
       </div>
     </template>
-      </template>
-    </BaseTabs>
   </div>
 </template>
+
 <script setup>
 import { ref, watch, onActivated } from 'vue'
 import BasePlaceholder from '~/components/BasePlaceholder.vue'
@@ -544,7 +562,6 @@ import {
 } from '~/utils/notification'
 import TimeManager from '~/utils/time'
 import BaseSwitch from '~/components/BaseSwitch.vue'
-import BaseTabs from '~/components/BaseTabs.vue'
 
 const config = useRuntimeConfig()
 const API_BASE_URL = config.public.apiBaseUrl
@@ -552,11 +569,6 @@ const route = useRoute()
 const selectedTab = ref(
   ['all', 'unread', 'control'].includes(route.query.tab) ? route.query.tab : 'unread',
 )
-const tabs = [
-  { name: 'all', label: '消息' },
-  { name: 'unread', label: '未读' },
-  { name: 'control', label: '消息设置' },
-]
 const notificationPrefs = ref([])
 const page = ref(0)
 const pageSize = 30
@@ -702,12 +714,13 @@ onActivated(async () => {
   overflow-x: hidden;
 }
 
-.message-page :deep(.base-tabs-header) {
+.message-page-header {
   position: sticky;
   top: 1px;
   z-index: 200;
   background-color: var(--background-color-blur);
   display: flex;
+  flex-direction: row;
   justify-content: space-between;
   align-items: center;
   backdrop-filter: var(--blur-10);
@@ -822,6 +835,21 @@ onActivated(async () => {
   color: var(--text-color);
 }
 
+.message-tabs {
+  display: flex;
+  flex-direction: row;
+}
+
+.message-tab-item {
+  padding: 10px 20px;
+  cursor: pointer;
+}
+
+.message-tab-item.selected {
+  color: var(--primary-color);
+  border-bottom: 2px solid var(--primary-color);
+}
+
 .message-control-title {
   font-size: 16px;
   font-weight: bold;

frontend_nuxt/pages/points.vue

@@ -1,15 +1,26 @@
 <template>
   <div class="point-mall-page">
-    <BaseTabs v-model="selectedTab" :tabs="tabs">
+    <div class="point-tabs">
-      <template #default>
+      <div
+        :class="['point-tab-item', { selected: selectedTab === 'mall' }]"
+        @click="selectedTab = 'mall'"
+      >
+        积分兑换
+      </div>
+      <div
+        :class="['point-tab-item', { selected: selectedTab === 'history' }]"
+        @click="selectedTab = 'history'"
+      >
+        积分历史
+      </div>
+    </div>
+
     <template v-if="selectedTab === 'mall'">
       <div class="point-mall-page-content">
         <section class="rules">
           <div class="section-title">🎉 积分规则</div>
           <div class="section-content">
-                <div class="section-item" v-for="(rule, idx) in pointRules" :key="idx">
+            <div class="section-item" v-for="(rule, idx) in pointRules" :key="idx">{{ rule }}</div>
-                  {{ rule }}
-                </div>
           </div>
         </section>
 
@@ -57,11 +68,7 @@
       <div class="loading-points-container" v-if="historyLoading">
         <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)"></l-hatch>
       </div>
-          <BasePlaceholder
+      <BasePlaceholder v-else-if="histories.length === 0" text="暂无积分记录" icon="fas fa-inbox" />
-            v-else-if="histories.length === 0"
-            text="暂无积分记录"
-            icon="fas fa-inbox"
-          />
       <div class="timeline-container" v-else>
         <BaseTimeline :items="histories">
           <template #item="{ item }">
@@ -165,8 +172,6 @@
         </BaseTimeline>
       </div>
     </template>
-      </template>
-    </BaseTabs>
   </div>
 </template>
 
@@ -177,7 +182,6 @@ import { toast } from '~/main'
 import RedeemPopup from '~/components/RedeemPopup.vue'
 import BaseTimeline from '~/components/BaseTimeline.vue'
 import BasePlaceholder from '~/components/BasePlaceholder.vue'
-import BaseTabs from '~/components/BaseTabs.vue'
 import { stripMarkdownLength } from '~/utils/markdown'
 import TimeManager from '~/utils/time'
 
@@ -185,10 +189,6 @@ const config = useRuntimeConfig()
 const API_BASE_URL = config.public.apiBaseUrl
 
 const selectedTab = ref('mall')
-const tabs = [
-  { name: 'mall', label: '积分兑换' },
-  { name: 'history', label: '积分历史' },
-]
 const point = ref(null)
 const isLoading = ref(false)
 const histories = ref([])
@@ -315,6 +315,21 @@ const submitRedeem = async () => {
   padding: 0 20px;
 }
 
+.point-tabs {
+  display: flex;
+  border-bottom: 1px solid var(--normal-border-color);
+}
+
+.point-tab-item {
+  padding: 10px 15px;
+  cursor: pointer;
+}
+
+.point-tab-item.selected {
+  border-bottom: 2px solid var(--primary-color);
+  color: var(--primary-color);
+}
+
 .timeline-container {
   padding: 10px 20px;
 }

frontend_nuxt/pages/users/[id].vue

@@ -72,8 +72,44 @@
         </div>
       </div>
 
-      <BaseTabs v-model="selectedTab" :tabs="tabs" class="profile-tabs">
+      <div class="profile-tabs">
-        <template #default>
+        <div
+          :class="['profile-tabs-item', { selected: selectedTab === 'summary' }]"
+          @click="selectedTab = 'summary'"
+        >
+          <i class="fas fa-chart-line"></i>
+          <div class="profile-tabs-item-label">总结</div>
+        </div>
+        <div
+          :class="['profile-tabs-item', { selected: selectedTab === 'timeline' }]"
+          @click="selectedTab = 'timeline'"
+        >
+          <i class="fas fa-clock"></i>
+          <div class="profile-tabs-item-label">时间线</div>
+        </div>
+        <div
+          :class="['profile-tabs-item', { selected: selectedTab === 'following' }]"
+          @click="selectedTab = 'following'"
+        >
+          <i class="fas fa-user-plus"></i>
+          <div class="profile-tabs-item-label">关注</div>
+        </div>
+        <div
+          :class="['profile-tabs-item', { selected: selectedTab === 'favorites' }]"
+          @click="selectedTab = 'favorites'"
+        >
+          <i class="fas fa-bookmark"></i>
+          <div class="profile-tabs-item-label">收藏</div>
+        </div>
+        <div
+          :class="['profile-tabs-item', { selected: selectedTab === 'achievements' }]"
+          @click="selectedTab = 'achievements'"
+        >
+          <i class="fas fa-medal"></i>
+          <div class="profile-tabs-item-label">勋章</div>
+        </div>
+      </div>
+
       <div v-if="tabLoading" class="tab-loading">
         <l-hatch size="28" stroke="4" speed="3.5" color="var(--primary-color)" />
       </div>
@@ -164,8 +200,7 @@
                 <BaseTimeline :items="hotTags">
                   <template #item="{ item }">
                     <span class="timeline-link" @click="gotoTag(item.tag)">
-                          {{ item.tag.name
+                      {{ item.tag.name }}<span v-if="item.tag.count"> x{{ item.tag.count }}</span>
-                          }}<span v-if="item.tag.count"> x{{ item.tag.count }}</span>
                     </span>
                     <div class="timeline-snippet" v-if="item.tag.description">
                       {{ item.tag.description }}
@@ -313,8 +348,6 @@
           <AchievementList :medals="medals" :can-select="isMine" />
         </div>
       </template>
-        </template>
-      </BaseTabs>
     </div>
   </div>
 </template>
@@ -327,7 +360,6 @@ import BasePlaceholder from '~/components/BasePlaceholder.vue'
 import BaseTimeline from '~/components/BaseTimeline.vue'
 import LevelProgress from '~/components/LevelProgress.vue'
 import UserList from '~/components/UserList.vue'
-import BaseTabs from '~/components/BaseTabs.vue'
 import { toast } from '~/main'
 import { authState, getToken } from '~/utils/auth'
 import { prevLevelExp } from '~/utils/level'
@@ -368,13 +400,6 @@ const selectedTab = ref(
     ? route.query.tab
     : 'summary',
 )
-const tabs = [
-  { name: 'summary', label: '总结', icon: 'fas fa-chart-line' },
-  { name: 'timeline', label: '时间线', icon: 'fas fa-clock' },
-  { name: 'following', label: '关注', icon: 'fas fa-user-plus' },
-  { name: 'favorites', label: '收藏', icon: 'fas fa-bookmark' },
-  { name: 'achievements', label: '勋章', icon: 'fas fa-medal' },
-]
 const followTab = ref('followers')
 
 const levelInfo = computed(() => {
@@ -771,11 +796,13 @@ watch(selectedTab, async (val) => {
   font-size: 14px;
 }
 
-.profile-tabs :deep(.base-tabs-header) {
+.profile-tabs {
   position: sticky;
   top: calc(var(--header-height) + 1px);
   z-index: 200;
   background-color: var(--background-color-blur);
+  display: flex;
+  flex-direction: row;
   padding: 0 20px;
   border-bottom: 1px solid var(--normal-border-color);
   scrollbar-width: none;
@@ -783,7 +810,7 @@ watch(selectedTab, async (val) => {
   backdrop-filter: var(--blur-10);
 }
 
-.profile-tabs :deep(.base-tab-item) {
+.profile-tabs-item {
   display: flex;
   flex: 0 0 auto;
   flex-direction: row;
@@ -796,6 +823,11 @@ watch(selectedTab, async (val) => {
   white-space: nowrap;
 }
 
+.profile-tabs-item.selected {
+  color: var(--primary-color);
+  border-bottom: 2px solid var(--primary-color);
+}
+
 .profile-summary {
   display: flex;
   flex-direction: column;
@@ -950,7 +982,7 @@ watch(selectedTab, async (val) => {
     height: 100px;
   }
 
-  .profile-tabs :deep(.base-tab-item) {
+  .profile-tabs-item {
     width: 100px;
   }