Merge pull request #393 from nagisa77/feature/site_fix

Feature/site fix
2026-02-28 00:50:46 +08:00 · 2025-08-05 18:37:31 +08:00
parent 1edaa50732 05e28123ed
commit f0caf930c5
22 changed files with 68 additions and 76 deletions
--- a/backend/src/main/java/com/openisle/config/SecurityConfig.java
+++ b/backend/src/main/java/com/openisle/config/SecurityConfig.java
@@ -77,8 +77,8 @@ public class SecurityConfig {
                "http://127.0.0.1",
                "http://localhost:8080",
                "http://localhost",
-                "http://30.211.97.254:8080",
-                "http://30.211.97.254",
+                "http://30.211.98.193:8080",
+                "http://30.211.98.193",
                "http://192.168.7.70",
                "http://192.168.7.70:8080",
                websiteUrl,
--- a/frontend/public/manifest.json
+++ b/frontend/public/manifest.json
@@ -2,7 +2,7 @@
  "name": "OpenIsle",
  "short_name": "OpenIsle",
  "start_url": "/",
-  "display": "standalone",
+  "display": "fullscreen",
  "icons": [
    {
      "src": "/icon-192.png",
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -58,19 +58,21 @@ export default {

 <style>
 .header-container {
-  position: fixed;
+  position: sticky;
  top: 0;
-  left: 0;
-  right: 0;
  z-index: 1000;
 }

 .menu-container {}

 .content {
+  /* height: calc(100vh - var(--header-height)); */
+  /* padding-top: var(--header-height); */
  flex: 1;
  max-width: 100%;
  transition: max-width 0.3s ease;
+  background-color: var(--background-color);
+  min-height: calc(100vh - var(--header-height)); 
 }

 .content.menu-open {
--- a/frontend/src/assets/global.css
+++ b/frontend/src/assets/global.css
@@ -8,7 +8,8 @@
  --header-text-color: black;
  --menu-background-color: white;
  --background-color: white;
-  --background-color-blur: rgba(255, 255, 255, 0.57);
+  /* --background-color-blur: rgba(255, 255, 255, 0.57); */
+  --background-color-blur: var(--background-color);
  --menu-border-color: lightgray;
  --normal-border-color: lightgray;
  --menu-selected-background-color: rgba(208, 250, 255, 0.659);
@@ -34,7 +35,8 @@
  --header-text-color: white;
  --menu-background-color: #333;
  --background-color: #333;
-  --background-color-blur: #333333a4;
+  /* --background-color-blur: #333333a4; */
+  --background-color-blur: var(--background-color);
  --menu-border-color: #555;
  --normal-border-color: #555;
  --menu-selected-background-color: rgba(255, 255, 255, 0.1);
@@ -54,10 +56,9 @@ body {
  font-family: 'Roboto', sans-serif;
  background-color: var(--normal-background-color);
  color: var(--text-color);
-  overflow: hidden; /* 禁止滚动 */
+  /* overflow: hidden; 禁止滚动 */
 }

-
 /*************************
 * Vditor 自定义皮肤覆写
 *************************/
--- a/frontend/src/components/CallbackPage.vue
+++ b/frontend/src/components/CallbackPage.vue
@@ -18,8 +18,6 @@ export default {
 <style scoped>
 .callback-page {
  background-color: var(--background-color);
-  height: calc(100vh - var(--header-height));
-  padding-top: var(--header-height);
  display: flex;
  flex-direction: column;
  align-items: center;
--- a/frontend/src/components/MenuComponent.vue
+++ b/frontend/src/components/MenuComponent.vue
@@ -268,6 +268,8 @@ export default {

 <style scoped>
 .menu {
+  position: sticky;
+  top: var(--header-height);
  width: 200px;
  background-color: var(--menu-background-color);
  height: calc(100vh - 20px - var(--header-height));
@@ -277,7 +279,6 @@ export default {
  padding: 10px;
  overflow-y: auto;
  scrollbar-width: none;
-  padding-top: calc(var(--header-height) + 10px);
 }

 .menu-item-container {
@@ -418,7 +419,6 @@ export default {
    top: calc(var(--header-height) + 10px);
    padding-top: 10px;
    background-color: var(--background-color-blur);
-    backdrop-filter: blur(10px);
  }

  .slide-enter-active,
--- a/frontend/src/utils/loadMore.js
+++ b/frontend/src/utils/loadMore.js
@@ -0,0 +1,31 @@
+import { ref, onMounted, onUnmounted, onActivated, nextTick } from 'vue'
+
+export function useScrollLoadMore(loadMore, offset = 50) {
+  const savedScrollTop = ref(0)
+
+  const handleScroll = () => {
+    const scrollTop = window.scrollY || document.documentElement.scrollTop
+    const scrollHeight = document.documentElement.scrollHeight
+    const windowHeight = window.innerHeight
+    savedScrollTop.value = scrollTop
+    if (scrollHeight - (scrollTop + windowHeight) <= offset) {
+      loadMore()
+    }
+  }
+
+  onMounted(() => {
+    window.addEventListener('scroll', handleScroll, { passive: true })
+  })
+
+  onUnmounted(() => {
+    window.removeEventListener('scroll', handleScroll)
+  })
+
+  onActivated(() => {
+    nextTick(() => {
+      window.scrollTo({ top: savedScrollTop.value })
+    })
+  })
+
+  return { savedScrollTop }
+}
--- a/frontend/src/views/AboutPageView.vue
+++ b/frontend/src/views/AboutPageView.vue
@@ -75,8 +75,7 @@ export default {
  max-width: var(--page-max-width);
  background-color: var(--background-color);
  margin: 0 auto;
-  height: calc(100vh - var(--header-height));
-  padding-top: var(--header-height);
+  height: 100%;
  overflow-y: auto;
 }

@@ -85,7 +84,6 @@ export default {
  top: 1px;
  z-index: 200;
  background-color: var(--background-color-blur);
-  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid var(--normal-border-color);
--- a/frontend/src/views/ActivityListPageView.vue
+++ b/frontend/src/views/ActivityListPageView.vue
@@ -73,9 +73,8 @@ export default {
 .activity-list-page {
  background-color: var(--background-color);
  padding: 20px;
-  height: calc(100vh - var(--header-height) - 40px);
+  height: calc(100% - 40px);
  overflow-y: auto;
-  padding-top: calc(var(--header-height) + 20px);
 }

 .activity-list-page-card {
--- a/frontend/src/views/EditPostPageView.vue
+++ b/frontend/src/views/EditPostPageView.vue
@@ -211,8 +211,7 @@ export default {
  display: flex;
  justify-content: center;
  background-color: var(--background-color);
-  height: calc(100vh - var(--header-height));
-  padding-top: var(--header-height);
+  height: 100%;
  padding-right: 20px;
  padding-left: 20px;
  overflow-y: auto;
--- a/frontend/src/views/ForgotPasswordPageView.vue
+++ b/frontend/src/views/ForgotPasswordPageView.vue
@@ -131,8 +131,7 @@ export default {
  justify-content: center;
  align-items: center;
  background-color: var(--background-color);
-  height: calc(100vh - var(--header-height));
-  padding-top: var(--header-height);
+  height: 100%;
 }
 .forgot-content {
  display: flex;
--- a/frontend/src/views/HomePageView.vue
+++ b/frontend/src/views/HomePageView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div ref="homePage" class="home-page" @scroll="handleScroll">
+  <div class="home-page">
    <div v-if="!isMobile" class="search-container">
      <div class="search-title">一切可能，从此刻启航</div>
      <div class="search-subtitle">愿你在此遇见灵感与共鸣。若有疑惑，欢迎发问，亦可在知识的海洋中搜寻答案。</div>
@@ -107,8 +107,9 @@
 </template>

 <script>
-import { ref, onMounted, watch, onActivated, nextTick } from 'vue'
+import { ref, onMounted, watch } from 'vue'
 import { useRoute } from 'vue-router'
+import { useScrollLoadMore } from '../utils/loadMore'
 import { stripMarkdown } from '../utils/markdown'
 import { API_BASE_URL } from '../main'
 import { getToken } from '../utils/auth'
@@ -134,8 +135,6 @@ export default {
  },
  setup() {
    const route = useRoute()
-    const homePage = ref(null)
-    const savedScrollTop = ref(0)
    const selectedCategory = ref('')
    if (route.query.category) {
      const c = decodeURIComponent(route.query.category)
@@ -167,14 +166,6 @@ export default {
    const pageSize = 10
    const allLoaded = ref(false)

-    onActivated(() => {
-      nextTick(() => {
-        if (homePage.value) {
-          homePage.value.scrollTop = savedScrollTop.value
-        }
-      })
-    })
-
    // Backend now returns comment counts directly

    const loadOptions = async () => {
@@ -366,13 +357,7 @@ export default {
        }
    }

-    const handleScroll = (e) => {
-      const el = e.target
-      savedScrollTop.value = el.scrollTop
-      if (el.scrollHeight - el.scrollTop <= el.clientHeight + 50) {
-        fetchContent()
-      }
-    }
+    useScrollLoadMore(fetchContent)

    onMounted(async () => {
      fetchContent()
@@ -389,7 +374,7 @@ export default {

    const sanitizeDescription = (text) => stripMarkdown(text)

-    return { topics, selectedTopic, articles, sanitizeDescription, isLoadingPosts, handleScroll, selectedCategory, selectedTags, tagOptions, categoryOptions, isMobile, homePage }
+    return { topics, selectedTopic, articles, sanitizeDescription, isLoadingPosts, selectedCategory, selectedTags, tagOptions, categoryOptions, isMobile }
  }
 }
 </script>
@@ -397,13 +382,9 @@ export default {
 <style scoped>
 .home-page {
  background-color: var(--background-color);
-  height: calc(100vh - var(--header-height));
-  padding-top: var(--header-height);
  display: flex;
  flex-direction: column;
  align-items: center;
-  overflow-y: auto;
-  /* enable container queries */
  container-type: inline-size;
  container-name: home-page;
 }
@@ -455,7 +436,6 @@ export default {
  top: 1px;
  z-index: 10;
  background-color: var(--background-color-blur);
-  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: row;
  align-items: center;
@@ -736,6 +716,10 @@ export default {
    font-size: 10px;
    opacity: 0.5;
  }
+
+  .topic-container {
+    position: initial;
+  }
 }

 </style>
--- a/frontend/src/views/LoginPageView.vue
+++ b/frontend/src/views/LoginPageView.vue
@@ -125,8 +125,7 @@ export default {
  flex-direction: row;
  align-items: center;
  justify-content: center;
-  height: calc(100vh - var(--header-height));
-  padding-top: var(--header-height);
+  height: 100%;
  width: 100%;
  background-color: var(--background-color);
 }
--- a/frontend/src/views/MessagePageView.vue
+++ b/frontend/src/views/MessagePageView.vue
@@ -626,12 +626,8 @@ export default {
  height: 300px;
 }

-
 .message-page {
  background-color: var(--background-color);
-  height: calc(100vh - var(--header-height));
-  padding-top: var(--header-height);
-  overflow-y: auto;
 }

 .message-page-header {
@@ -639,7 +635,6 @@ export default {
  top: 1px;
  z-index: 200;
  background-color: var(--background-color-blur);
-  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: row;
  justify-content: space-between;
--- a/frontend/src/views/NewPostPageView.vue
+++ b/frontend/src/views/NewPostPageView.vue
@@ -261,8 +261,7 @@ export default {
  display: flex;
  justify-content: center;
  background-color: var(--background-color);
-  height: calc(100vh - var(--header-height));
-  padding-top: var(--header-height);
+  height: 100%;
  padding-right: 20px;
  padding-left: 20px;
  overflow-y: auto;
--- a/frontend/src/views/NotFoundPageView.vue
+++ b/frontend/src/views/NotFoundPageView.vue
@@ -17,8 +17,7 @@ export default {
  display: flex;
  flex-direction: column;
  align-items: center;
-  height: calc(100vh - var(--header-height));
-  padding-top: var(--header-height);
+  height: 100%;
  text-align: center;
  background-color: var(--background-color);
 }
--- a/frontend/src/views/PostPageView.vue
+++ b/frontend/src/views/PostPageView.vue
@@ -650,7 +650,7 @@ export default {
  background-color: var(--background-color);
  display: flex;
  flex-direction: row;
-  height: 100vh;
+  height: 100%;
 }

 .loading-container {
@@ -662,16 +662,12 @@ export default {
 }

 .post-page-main-container {
-  overflow-y: auto;
  scrollbar-width: none;
  padding: 20px;
-  height: calc(100% - 40px - var(--header-height));
  width: calc(85% - 40px);
-  padding-top: calc(var(--header-height) + 20px);
 }

 .post-page-scroller-container {
-  padding-top: var(--header-height);
  display: flex;
  flex-direction: column;
  width: 15%;
@@ -974,7 +970,6 @@ export default {
  .post-page-main-container {
    width: calc(100% - 20px);
    padding: 10px;
-    padding-top: calc(var(--header-height) + 10px);
  }

  .article-title {
--- a/frontend/src/views/ProfileView.vue
+++ b/frontend/src/views/ProfileView.vue
@@ -497,8 +497,7 @@ export default {

 .profile-page {
  background-color: var(--background-color);
-  height: calc(100vh - var(--header-height));
-  padding-top: var(--header-height);
+  height: 100%;
  overflow-y: auto;
  overflow-x: hidden; 
 }
@@ -643,7 +642,6 @@ export default {
  top: 1px;
  z-index: 200;
  background-color: var(--background-color-blur);
-  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: row;
  padding: 0 20px;
--- a/frontend/src/views/SettingsPageView.vue
+++ b/frontend/src/views/SettingsPageView.vue
@@ -239,8 +239,7 @@ export default {
 .settings-page {
  background-color: var(--background-color);
  padding: 40px;
-  height: calc(100vh - var(--header-height) - 80px);
-  padding-top: calc(var(--header-height) + 40px);
+  height: calc(100% - 80px);
  overflow-y: auto;
 }

--- a/frontend/src/views/SignupPageView.vue
+++ b/frontend/src/views/SignupPageView.vue
@@ -222,8 +222,7 @@ export default {
  flex-direction: row;
  align-items: center;
  justify-content: center;
-  height: calc(100vh - var(--header-height));
-  padding-top: var(--header-height);
+  height: 100%;
  width: 100%;
  background-color: var(--background-color);
 }
--- a/frontend/src/views/SignupReasonPageView.vue
+++ b/frontend/src/views/SignupReasonPageView.vue
@@ -82,8 +82,7 @@ export default {
  justify-content: center;
  align-items: center;
  background-color: var(--background-color);
-  height: calc(100vh - var(--header-height));
-  padding-top: var(--header-height);
+  height: 100%;
 }

 .reason-title {
--- a/frontend/src/views/SiteStatsPageView.vue
+++ b/frontend/src/views/SiteStatsPageView.vue
@@ -48,7 +48,6 @@ onMounted(loadData)
  max-width: var(--page-max-width);
  background-color: var(--background-color);
  margin: 0 auto;
-  height: calc(100vh - var(--header-height) - 40px);
-  padding-top: calc(var(--header-height) + 20px);
+  height: 100%;
 }
 </style>