'ss

src/pages/book/index.scss

@@ -1,8 +1,58 @@
 // 在 src/index.scss 中引入 GitHub Markdown 主题
 @import "github-markdown-css/github-markdown.css";
 
+.book_header_div{
+  width: 100%;
+  height: 80px;
+}
+.book_header{
+  position: fixed;
+  top: 0px;
+  width: 100%;
+  height: 80px;
+  // background-color: aquamarine;
+  // background-color: #f0f5ff;
+  border-bottom: 2px solid #f0f5ff;
+  background-color: rgb(255 255 255/var(--tw-bg-opacity,1));
+
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  .book_header_left{
+    width: 100px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    color: #69b1ff;
+  }
+  .book_header_middle{
+    flex: 1;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    color: #69b1ff;
+
+
+  }
+  .book_header_right{
+    width: 100px;
+    // background-color: yellow;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    color: #69b1ff;
+
+
+  }
+
+}
 .Book {
   padding: 40px;
+
   .markdown-body {
     font-size: 30px;
     // color: #72d572;
@@ -10,8 +60,24 @@
 
   img {
     max-width: 100%;
-    height: auto; /* 保持图像的纵横比 */
+    height: auto;
+    /* 保持图像的纵横比 */
   }
+
+  .at-drawer__content {
+    .at-list {
+      .at-list__item {
+        font-size: 30px;
+
+        // background-color: aqua;
+        .at-list__item-container {
+          .at-list__item-content {}
+        }
+      }
+    }
+  }
+
+
 }
 
 @media (min-width: 1536px) {
@@ -26,9 +92,10 @@
     // background-color: yellow;
     .book_left {
       width: 400px;
-      height:100%;
+      height: 100%;
       background-color: red;
     }
+
     .markdown-body {
       width: 100%;
       max-width: 1400px;
@@ -36,6 +103,7 @@
       // color: red;
       // background-color: #72d572;
     }
+
     .book_right {
       width: 400px;
       height: 100%;

src/pages/book/index.tsx

@@ -3,7 +3,7 @@ import { Component } from "react";
 import { View, Text, Image } from "@tarojs/components";
 import "./index.scss";
 import { AtButton, AtInput, AtTabBar } from "taro-ui";
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState, useRef } from "react";
 import { AtGrid } from "taro-ui";
 import { Swiper, SwiperItem } from "@tarojs/components";
 import { AtCard } from "taro-ui";
@@ -12,10 +12,11 @@ import Taro from "@tarojs/taro";
 import { AtAvatar } from "taro-ui";
 import { AtTag } from "taro-ui";
 import { AtList, AtListItem } from "taro-ui";
-import { AtForm, AtMessage } from "taro-ui";
+import { AtForm, AtMessage, AtDrawer, AtIcon } from "taro-ui";
 import { marked } from "marked";
 import infoText from "./info.md";
 import bookText from "./book.md";
+// import youtubeIco from "../../images/youtube.ico";
 
 marked.setOptions({
   breaks: true, // 是否回车换行
@@ -39,15 +40,43 @@ marked.setOptions({
 
 // export default class Index extends Component {
 const Book = () => {
-  const [markText, setmarkText] = useState();
-  const [isWeChat, setisWeChat] = useState(false);
-
   const [book, setbook] = useState(window.localStorage.getItem("book"));
+  const [markText, setmarkText] = useState(book == 1 ? bookText : infoText);
+  const [isWeChat, setisWeChat] = useState(false);
+  const [show, setshow] = useState(false);
+
+  const [headers, setHeaders] = useState([]); // 存储所有 <h1> 的内容
+  const contentRef = useRef(null); // 用于获取渲染后的 DOM
 
   useEffect(() => {
     isWeChatFun();
   }, []);
 
+  useEffect(() => {
+    if (contentRef.current) {
+      const h1Elements = contentRef.current.querySelectorAll("h1");
+      const h2Elements = contentRef.current.querySelectorAll("h2");
+
+      const h1Texts = Array.from(h1Elements).map((el) => el.textContent);
+      const h2Texts = Array.from(h2Elements).map((el) => el.textContent);
+
+      setHeaders(h1Texts);
+      // console.log("获取到的 H1 标题:"); // 控制台查看
+      console.log("获取到的 H1 标题:", h1Texts); // 控制台查看
+      console.log("获取到的 H2 标题:", h2Texts); // 控制台查看
+    }
+  }, [markText]); // 监听 HTML 内容变化
+
+  const handleJump = (text) => {
+    const h1Elements = contentRef.current.querySelectorAll("h1");
+    for (let h1 of h1Elements) {
+      if (h1.textContent === text) {
+        h1.scrollIntoView({ behavior: "smooth" });
+        break;
+      }
+    }
+  };
+
   // const handleClick = (value) => {
   //   // 跳转到目的页面，在当前页面打开
   //   Taro.navigateTo({
@@ -111,18 +140,59 @@ const Book = () => {
   };
 
   return (
-    <View className="Book">
-      {/* <View className="book_left">1 </View> */}
+    <>
+      <View className="book_header_div"></View>
+      <View className="book_header">
         <View
+          className="book_header_left"
+          onClick={() => {
+            Taro.navigateBack({
+              delta: 1, // 表示返回的页面数，默认是 1，表示返回上一页
+            });
+          }}
+        >
+          <AtIcon value="chevron-left"></AtIcon>
+        </View>
+        <View className="book_header_middle">{`📗 数字游民`}</View>
+        <View
+          className="book_header_right"
+          onClick={() => {
+            setshow(!show);
+          }}
+        >
+          <AtIcon value="bullet-list"></AtIcon>
+        </View>
+      </View>
+      <View className="Book">
+        <View
+          ref={contentRef}
           className="markdown-body" // 添加 GitHub Markdown 主题类
           dangerouslySetInnerHTML={{
-          __html: marked(book == 1 ? bookText : infoText),
+            __html: marked(markText),
+            // __html: marked(book == 1 ? bookText : infoText),
           }}
         ></View>
-      {/* <View className="book_right"> 22</View> */}
 
-      {/* <View className="bottomDiv"></View> */}
+        <AtDrawer
+          className="book_AtDrawer"
+          show={show}
+          mask
+          items={headers}
+          onItemClick={(index) => {
+            handleJump(headers[index]);
+          }}
+          onClose={() => {
+            setshow(false);
+          }}
+        >
+          <View className="drawer-item"></View>
+          {/* <View className="drawer-item">如果items没有数据就会展示children</View> */}
+          {/* <View className="drawer-item">
+          这是自定义内容 <AtIcon value="home" size="20" />
+        </View> */}
+        </AtDrawer>
       </View>
+    </>
   );
 };
 

src/pages/book/info.md

@@ -1,8 +1,6 @@
-🚀 技术杠杆与变现
-1️⃣ PVE: 压榨硬件,超融合,虚拟机
-2️⃣ frp: 内网穿透
-3️⃣ Docker 与 K8S:容器化部署
-4️⃣ GPU:本地大模型,私有化部署
-5️⃣ OTG:边缘计算 npu 与机器视觉
 
-内容待更新,目录已上线
+# 前言
+## 🚀 一人公司方法论  
+对于普通人而言,最好的杠杆依然是`媒体`和`代码`  
+如今有了AIGC的加持  
+以前创作的门槛,已经不再是`门槛`