fix: iOS修复blur问题

feat: add reusable swipeable tabs component

frontend_nuxt/components/BaseImage.vue

@@ -46,7 +46,6 @@ function onError() {
 
 <style scoped>
 .base-image {
-  display: block;
   transition:
     filter 0.35s ease,
     transform 0.35s ease,
@@ -55,8 +54,8 @@ function onError() {
 }
 
 .base-image-ph {
-  filter: blur(10px) saturate(0.85);
-  transform: scale(1.02);
+  filter: blur(20px);
+  transform: scale(0.5);
 }
 
 .base-image.is-loaded {

frontend_nuxt/components/BaseTabs.vue

@@ -54,6 +54,7 @@ function onTouchEnd(e) {
   display: flex;
   border-bottom: 1px solid var(--normal-border-color);
   align-items: center;
+  flex-direction: row;
 }
 
 .base-tabs-items {

frontend_nuxt/nuxt.config.ts

@@ -88,24 +88,24 @@ export default defineNuxtConfig({
   vite: {
     build: {
       // increase warning limit and split large libraries into separate chunks
-      chunkSizeWarningLimit: 1024,
-      rollupOptions: {
-        output: {
-          manualChunks(id) {
-            if (id.includes('node_modules')) {
-              if (id.includes('vditor')) {
-                return 'vditor'
-              }
-              if (id.includes('echarts')) {
-                return 'echarts'
-              }
-              if (id.includes('highlight.js')) {
-                return 'highlight'
-              }
-            }
-          },
-        },
-      },
+      // chunkSizeWarningLimit: 1024,
+      // rollupOptions: {
+      //   output: {
+      //     manualChunks(id) {
+      //       if (id.includes('node_modules')) {
+      //         if (id.includes('vditor')) {
+      //           return 'vditor'
+      //         }
+      //         if (id.includes('echarts')) {
+      //           return 'echarts'
+      //         }
+      //         if (id.includes('highlight.js')) {
+      //           return 'highlight'
+      //         }
+      //       }
+      //     },
+      //   },
+      // },
     },
   },
 })

frontend_nuxt/pages/about/index.vue

@@ -89,28 +89,6 @@ export default {
   margin: 0 auto;
 }
 
-:deep(.base-tabs-header) {
-  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;
-}
-
-:deep(.base-tabs-item) {
-  padding: 10px 20px;
-  cursor: pointer;
-  white-space: nowrap;
-}
-
-:deep(.base-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/login.vue

@@ -36,35 +36,19 @@
 
     <div class="other-login-page-content">
       <div class="login-page-button" @click="loginWithGoogle">
-        <BaseImage
-          class="login-page-button-icon"
-          src="../assets/icons/google.svg"
-          alt="Google Logo"
-        />
+        <img class="login-page-button-icon" src="../assets/icons/google.svg" alt="Google Logo" />
         <div class="login-page-button-text">Google 登录</div>
       </div>
       <div class="login-page-button" @click="loginWithGithub">
-        <BaseImage
-          class="login-page-button-icon"
-          src="../assets/icons/github.svg"
-          alt="GitHub Logo"
-        />
+        <img class="login-page-button-icon" src="../assets/icons/github.svg" alt="GitHub Logo" />
         <div class="login-page-button-text">GitHub 登录</div>
       </div>
       <div class="login-page-button" @click="loginWithDiscord">
-        <BaseImage
-          class="login-page-button-icon"
-          src="../assets/icons/discord.svg"
-          alt="Discord Logo"
-        />
+        <img class="login-page-button-icon" src="../assets/icons/discord.svg" alt="Discord Logo" />
         <div class="login-page-button-text">Discord 登录</div>
       </div>
       <div class="login-page-button" @click="loginWithTwitter">
-        <BaseImage
-          class="login-page-button-icon"
-          src="../assets/icons/twitter.svg"
-          alt="Twitter Logo"
-        />
+        <img class="login-page-button-icon" src="../assets/icons/twitter.svg" alt="Twitter Logo" />
         <div class="login-page-button-text">Twitter 登录</div>
       </div>
     </div>

frontend_nuxt/pages/message.vue

@@ -701,19 +701,6 @@ onActivated(async () => {
   overflow-x: hidden;
 }
 
-.message-page :deep(.base-tabs-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);
-  border-bottom: 1px solid var(--normal-border-color);
-}
-
 .message-page-header-right {
   display: flex;
   flex-direction: row;

frontend_nuxt/pages/signup.vue

@@ -70,35 +70,19 @@
 
     <div class="other-signup-page-content">
       <div class="signup-page-button" @click="signupWithGoogle">
-        <BaseImage
-          class="signup-page-button-icon"
-          src="~/assets/icons/google.svg"
-          alt="Google Logo"
-        />
+        <img class="signup-page-button-icon" src="~/assets/icons/google.svg" alt="Google Logo" />
         <div class="signup-page-button-text">Google 注册</div>
       </div>
       <div class="signup-page-button" @click="signupWithGithub">
-        <BaseImage
-          class="signup-page-button-icon"
-          src="~/assets/icons/github.svg"
-          alt="GitHub Logo"
-        />
+        <img class="signup-page-button-icon" src="~/assets/icons/github.svg" alt="GitHub Logo" />
         <div class="signup-page-button-text">GitHub 注册</div>
       </div>
       <div class="signup-page-button" @click="signupWithDiscord">
-        <BaseImage
-          class="signup-page-button-icon"
-          src="~/assets/icons/discord.svg"
-          alt="Discord Logo"
-        />
+        <img class="signup-page-button-icon" src="~/assets/icons/discord.svg" alt="Discord Logo" />
         <div class="signup-page-button-text">Discord 注册</div>
       </div>
       <div class="signup-page-button" @click="signupWithTwitter">
-        <BaseImage
-          class="signup-page-button-icon"
-          src="~/assets/icons/twitter.svg"
-          alt="Twitter Logo"
-        />
+        <img class="signup-page-button-icon" src="~/assets/icons/twitter.svg" alt="Twitter Logo" />
         <div class="signup-page-button-text">Twitter 注册</div>
       </div>
     </div>