feat(用AI优化样式)更新了头部导航，更新了一些页面的样式

Author: cpython666

docs/.vitepress/config.mjs

@@ -302,76 +302,25 @@ let nav_config = [
     link: "/",
   },
   {
-    text: "工具",
-    link: "/spider-tools/",
+    text: "文章导航",
+    link: "/navigation/",
   },
   {
-    text: "资源导航",
-    link: "/nav/",
+    text: "项目",
+    link: "/projects/",
   },
   {
-    text: "爬虫",
-    items: [
-      {
-        text: "关于爬虫",
-        items: spider_items,
-      },
-      {
-        text: "系列文章",
-        items: spider_set_items,
-      },
-    ],
-  },
-
-  {
-    text: "Python",
-    items: [
-      {
-        text: "Python",
-        items: python_items,
-      },
-      {
-        text: "FastAPI",
-        items: fast_api_items,
-      },
-      {
-        text: "Django",
-        items: django_items,
-      },
-      {
-        text: "系列文章",
-        items: python_col_items,
-      },
-    ],
+    text: "工具",
+    link: "/spider-tools/",
   },
   {
-    text: "前后端/算法",
-    items: [
-      {
-        text: "前端",
-        items: frontend_items,
-      },
-      {
-        text: "后端",
-        items: backend_items,
-      },
-
-      {
-        text: "算法",
-        items: algorithm_items,
-      },
-    ],
+    text: "资源导航",
+    link: "/nav/",
   },
-
-  {
+    {
     text: "网站相关",
     items: web_intro_items,
   },
-  { text: "程序员脱单指南", link: "/好文推荐/程序员脱单指南" },
-  {
-    text: "币圈入圈指南",
-    items: web3_items,
-  }, // { text: '好文推荐', link: '/好文推荐/' },
 ];
 let sidebar_config = {
   "/": nav_config,
@@ -418,7 +367,7 @@ let sidebar_config = {
     {
       text: "前端",
       collapsed: false,
-      items: backend_items,
+      items: frontend_items,
     },
   ],
   "/backend/": [
@@ -428,6 +377,13 @@ let sidebar_config = {
       items: backend_items,
     },
   ],
+  "/算法/": [
+    {
+      text: "算法",
+      collapsed: false,
+      items: algorithm_items,
+    },
+  ],
   "/好文推荐/": [
     {
       text: "程序员脱单指南",
@@ -585,6 +541,7 @@ let sidebar_config = {
 };
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
+
   title: "星梦启航",
   description: "Python斗罗的代码笔记",
   base: "/",
@@ -756,4 +713,8 @@ export default defineConfig({
     //   placement: '广告'
     // }
   },
+    define: {
+    __API_BASE__: JSON.stringify('https://api.example.com'),
+    __APP_VERSION__: '"1.0.0"',
+  }
 });

docs/nav/NavPage.vue

@@ -1,19 +1,64 @@
 <script setup>
-import {navigationData} from './data.js';
-import {ElBacktop, ElAffix, ElScrollbar, ElLink} from 'element-plus'
+import { navigationData } from './data.js';
+import { ElBacktop, ElScrollbar, ElLink, ElInput } from 'element-plus'
 import WebLink from './WebLink.vue'
+import { ref, onMounted, onBeforeUnmount, nextTick, computed } from 'vue'
 
 // import {WebLink} from 'vitepress/theme'
 
-const scrollToAnchor = (anchor) => {
-  const target = document.querySelector(anchor);
+const activeAnchor = ref('')
+const searchText = ref('')
+const filteredNav = computed(() => {
+  const q = searchText.value.trim()
+  if (!q) return navigationData
+  return navigationData.filter((s) => s.title.includes(q))
+})
+
+let headingEls = []
+
+const collectHeadingEls = () => {
+  headingEls = navigationData
+    .map((s) => document.getElementById(s.title))
+    .filter(Boolean)
+}
+
+const handleScroll = () => {
+  const navHeight = document.querySelector('header')?.offsetHeight || 0
+  const fromTop = window.scrollY + navHeight + 12
+  let current = ''
+  for (const s of navigationData) {
+    const el = document.getElementById(s.title)
+    if (!el) continue
+    if (el.offsetTop <= fromTop) {
+      current = '#' + s.title
+    } else {
+      break
+    }
+  }
+  if (current) activeAnchor.value = current
+}
+
+const scrollToAnchor = (id) => {
+  const target = document.getElementById(id)
   if (target) {
-    const navHeight = document.querySelector('header').offsetHeight; // 获取导航栏的高度
-    const offset = target.getBoundingClientRect().top - navHeight; // 计算滚动偏移量
-    window.scrollTo({top: offset, behavior: 'smooth'}); // 滚动到目标位置
+    // 使用 scrollIntoView，使滚动更加稳定；配合内容区的 scroll-margin-top 避免被头部遮挡
+    target.scrollIntoView({ behavior: 'smooth', block: 'start' })
+    activeAnchor.value = '#' + id
   }
 }
 
+onMounted(() => {
+  nextTick(() => {
+    collectHeadingEls()
+    window.addEventListener('scroll', handleScroll, { passive: true })
+    handleScroll()
+  })
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('scroll', handleScroll)
+})
+
 </script>
 
 <template>
@@ -32,15 +77,25 @@ const scrollToAnchor = (anchor) => {
   </el-backtop>
   <div class="page">
     <div class="my-nav">
-      <el-affix :offset="5">
-        <el-scrollbar height="100vh">
-          <el-link type="primary" v-for="(sites, index) in navigationData" :key="index"
-                   @click="scrollToAnchor('#' + sites.title)">{{ sites.title }}
-          </el-link>
-          <el-link type="primary" href="https://spiderbox.cn/" target="_blank">资源链接来源于《虫盒》</el-link>
-          <el-link type="primary" href="#">持续更新中</el-link>
-        </el-scrollbar>
-      </el-affix>
+      <div class="nav-card">
+        <div class="nav-search">
+          <el-input v-model="searchText" placeholder="搜索分类" clearable size="small" />
+        </div>
+          <el-scrollbar height="100vh">
+            <el-link
+              v-for="(sites, index) in filteredNav"
+              :key="index"
+              type="primary"
+              :underline="false"
+              :class="{ 'is-active': activeAnchor === '#' + sites.title }"
+              :title="sites.title"
+              href="#"
+              @click.prevent="scrollToAnchor(sites.title)"
+            >
+              {{ sites.title }}
+            </el-link>
+          </el-scrollbar>
+      </div>
     </div>
     <div>
 <!--              <el-link type="primary" href="https://www.qg.net/product/proxyip.html?source=star" target="_blank">-->
@@ -54,32 +109,80 @@ const scrollToAnchor = (anchor) => {
 
 
       <WebLink :datalist="navigationData"></WebLink>
+      <div class="source-note">
+        资源链接来源于
+        <a href="https://spiderbox.cn/" target="_blank" rel="noopener noreferrer">《虫盒》</a>
+        <span class="note-updating">持续更新中</span>
+      </div>
     </div>
   </div>
 </template>
 
 <style scoped>
 .my-nav {
-  padding: 0px 5px;
+  padding: 8px;
+  position: sticky;
+  top: 8px;
+  align-self: flex-start;
+  z-index: 20;
+}
+
+.nav-card {
+  background: var(--el-bg-color-overlay);
+  border-radius: 12px;
+  box-shadow: var(--el-box-shadow-light);
+  padding: 10px;
+  border: 1px solid var(--el-border-color-light);
+  backdrop-filter: blur(6px);
+  position: relative;
+  z-index: 20;
+  box-sizing: border-box;
+  width: 150px;
+  /* 居中内部内容 */
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
 }
 
+.nav-search { padding: 6px 8px 0; }
+
 .el-scrollbar {
   overflow: visible !important;
+  width: 100%;
 }
 
 .el-link {
-  margin: 0px 8px;
-  padding: 2px 5px;
+  display: block;
+  margin: 3px 6px;
+  padding: 6px 8px;
   text-decoration: none;
-  transition: all 0.3s ease;
-  color: black;
-  border: 1px rgb(20, 143, 243) solid;
+  transition: all 0.2s ease;
+  color: var(--el-text-color-primary);
+  background: var(--el-color-primary-light-9);
+  border-radius: 10px;
+  border: none;
+  text-align: center;
+}
+
+.el-link__inner {
+  display: block;
+  min-width: 5em;
+  white-space: nowrap !important;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .el-link:hover {
-  background-color: rgb(20, 143, 243);
-  color: white;
-  transform: scale(1.05);
+  background: var(--el-color-primary);
+  color: #fff;
+  transform: translateX(2px);
+}
+
+.el-link.is-active {
+  background: linear-gradient(90deg, var(--el-color-primary), var(--el-color-primary-light-3));
+  color: #fff;
+  box-shadow: 0 4px 12px rgba(24, 144, 255, 0.35);
 }
 
 .el-link .el-icon--right.el-icon {
@@ -88,5 +191,25 @@ const scrollToAnchor = (anchor) => {
 
 .page {
   display: flex;
+  gap: 12px;
+}
+
+.source-note {
+  background: var(--el-color-primary-light-9);
+  border-radius: 12px;
+  padding: 10px 14px;
+  margin: 12px 0 0;
+  color: var(--el-text-color-primary);
+  font-weight: 600;
+}
+.source-note a {
+  color: var(--el-text-color-primary);
+  text-decoration: none;
+}
+.source-note a:hover { text-decoration: underline; }
+.source-note .note-updating {
+  font-weight: 500;
+  color: var(--el-text-color-secondary);
+  margin-left: 8px;
 }
 </style>

docs/nav/WebLink.vue

@@ -8,9 +8,9 @@
         <div v-for="(site, sIndex) in category.items" :key="sIndex" class="site"
              @mouseover="site.showTooltip = true" @mouseleave="site.showTooltip = false">
           <div class="card" :title="site.desc">
-            <a :href="site.link" class="site-link" target="_blank">
+            <a :href="site.link" class="site-link" target="_blank" rel="noopener noreferrer">
               <div class="card-head">
-                <img :src="site.icon" class="site-icon" :alt="site.title">
+                <img :src="site.icon" class="site-icon" :alt="site.title" loading="lazy">
                 <div class="h4">{{ site.title }}</div>
                 <label class="toggle">
                   <input type="checkbox">
@@ -40,8 +40,8 @@
         </div>
         <div id="ad" v-if="category.title=='站长推荐'" class="flex-grow justify-center w-100"
              style="display: flex; justify-content: center; align-items: center;">
-          <el-link type="primary" href="https://www.qg.net/product/proxyip.html?source=star" target="_blank">
-            <img style="width:960px;height:70px;" src="/imgs/ads/qgwl.jpeg"/>
+          <el-link type="primary" href="https://www.qg.net/product/proxyip.html?source=star" target="_blank" rel="noopener noreferrer">
+            <img style="width:960px;height:70px;" src="/imgs/ads/qgwl.jpeg" loading="lazy"/>
           </el-link>
         </div>
 <!--        -->
@@ -250,6 +250,8 @@ img {
 .navigation .h2 {
   font-size: 24px;
   font-weight: 500;
+  /* 防止滚动到标题时被头部遮挡 */
+  scroll-margin-top: calc(var(--vp-nav-height, 64px) + 12px);
 
 }