8.5 看完了BootScreen

src/App.jsx

@@ -58,6 +58,11 @@ function ErrorFallback({ error, resetErrorBoundary }) {
                 Stop Code: {error.message}
               </h5>
               <button onClick={resetErrorBoundary}>Try again</button>
+              {/* <button onClick={() => {
+                console.log(resetErrorBoundary.toString());
+                resetErrorBoundary()
+              }}>Try again</button> */}
+              {/* resetErrorBoundary应该是自定义的吧 */}
             </div>
           </div>
         </div>
@@ -72,6 +77,9 @@ function App() {
   const wall = useSelector((state) => state.wallpaper);
   const dispatch = useDispatch();
 
+  // 这个函数的作用应该都是隐藏组件  几乎点击任何地方都会触发这个函数
+  // 比如点击搜索按钮，事件的target.dataset.action为STARTSRC，就会弹出一个框，然后把其他的一些东西隐藏
+  // 点击spotify，点击的target.dataset.action为spotify，然后下面的没有一个匹配的，就会把，一些开始弹窗什么的hide掉，如果有和下面匹配的，就弹出匹配的，然后其他的隐藏掉
   const afterMath = (event) => {
     var ess = [
       ["START", "STARTHID"],
@@ -81,34 +89,40 @@ function App() {
       ["CALN", "CALNHIDE"],
       ["MENU", "MENUHIDE"],
     ];
+    // console.log('afterMath');
 
     var actionType = "";
     try {
       actionType = event.target.dataset.action || "";
     } catch (err) {}
-
+    // getComputedStyle获取css属性和值，getPropertyValue获取这个--prefix css属性的值，有的地方有用到，搜索--prefix可以搜到一点，应该是为了特殊的过滤
     var actionType0 = getComputedStyle(event.target).getPropertyValue(
       "--prefix",
     );
+    // console.log(actionType);
+    // console.log(actionType0);
 
     ess.forEach((item, i) => {
+      // 这一部分是等于把ess中的操作都执行一边，用于hide一些东西
       if (!actionType.startsWith(item[0]) && !actionType0.startsWith(item[0])) {
+        // console.log(item[1]);  这一行几乎会把所有的都答应出来，就是为了隐藏
         dispatch({
           type: item[1],
         });
       }
     });
   };
-
+  // 这是为了把window的鼠标右击事件先用afterMath处理一下，使得再弹出右键菜单时把什么开始栏，搜索栏，设置栏隐藏掉
   window.oncontextmenu = (e) => {
+    // 点了邮件就隐藏，下面再按条件判断是否弹右键菜单
     afterMath(e);
     e.preventDefault();
     // dispatch({ type: 'GARBAGE'});
     var data = {
       top: e.clientY,
       left: e.clientX,
     };
-
+    // e.target.dataset.menu只在桌面不为null，所以只在桌面触发
     if (e.target.dataset.menu != null) {
       data.menu = e.target.dataset.menu;
       data.attr = e.target.attributes;
@@ -121,25 +135,38 @@ function App() {
   };
 
   window.onclick = afterMath;
-
+  //页面加载完成触发onload  可能就是设置壁纸加载完成的作用  还不是很懂
   window.onload = (e) => {
     dispatch({ type: "WALLBOOTED" });
   };
-
+  // 作用就是5秒后在执行一次 loadSettings(); 和dispatch({ type: "WALLBOOTED" });  
+  // 因为window就是没有onstart这个属性的
   useEffect(() => {
     if (!window.onstart) {
       loadSettings();
+      // setTimeout是有返回值的，返回一个数字作为这个定时器的标识符
       window.onstart = setTimeout(() => {
         // console.log("prematurely loading ( ﾉ ﾟｰﾟ)ﾉ");
         dispatch({ type: "WALLBOOTED" });
       }, 5000);
     }
   });
 
+  // useEffect(() => {
+  //   console.log(wall);
+  // }, [wall])
+
+
+
   return (
     <div className="App">
       <ErrorBoundary FallbackComponent={ErrorFallback}>
+        {/* 应该是模拟开机的意思 用了z-index对其他元素进行覆盖，被覆盖元素的鼠标事件也被阻挡*/}
+        {/* 取消鼠标事件阻挡的方法
+        1. pointer-events: none; 这个属性告诉浏览器不要让元素及其子元素接收鼠标事件
+        2. 事件委托  在一个共同的父元素上监听事件  然后根据用事件对象的 target 属性来确定实际触发事件的元素*/}
         {!wall.booted ? <BootScreen dir={wall.dir} /> : null}
+        {/* 锁屏 */}
         {wall.locked ? <LockScreen dir={wall.dir} /> : null}
         <div className="appwrap">
           <Background />

src/containers/background/back.scss

@@ -23,6 +23,7 @@
   z-index: 2;
   display: grid;
   place-items: center;
+  // 设置鼠标指针在悬停于该元素上时显示为一个进度指示器，通常是一个旋转的等待图标，表明正在执行一个后台操作或等待某个过程完成。  挺好玩的  手机端没这个属性
   cursor: progress;
 }
 
@@ -153,6 +154,7 @@
   align-items: center;
   justify-content: center;
 }
+
 // https://docs.microsoft.com/en-us/fluent-ui/web-components/components/progress-ring
 
 .progressRing circle {
@@ -170,12 +172,14 @@
     stroke-dasharray: 0.01px, 43.97px;
     transform: rotate(0deg);
   }
+
   50% {
     stroke-dasharray: 21.99px, 21.99px;
     transform: rotate(450deg);
   }
+
   100% {
     stroke-dasharray: 0.01px, 43.97px;
     transform: rotate(1080deg);
   }
-}
+}

src/containers/background/index.jsx

@@ -18,11 +18,14 @@ export const Background = () => {
   );
 };
 
+// 只有WALLRESTART和WALLSHUTDN会将booted设置成false 触发这个组件
+// 这两个动作也会将dir设置成 -1
+// dir为-1，就会触发下面的如果dir小于0，就给一个几秒后图片和圈圈都消失，然后触发WALLBOOTED这个动作  又将 booted: true, dir: 0,
 export const BootScreen = (props) => {
   const dispatch = useDispatch();
   const wall = useSelector((state) => state.wallpaper);
   const [blackout, setBlackOut] = useState(false);
-
+  // 如果dir小于0，就给一个几秒后图片和圈圈都消失，然后触发WALLBOOTED这个动作
   useEffect(() => {
     if (props.dir < 0) {
       setTimeout(() => {
@@ -40,6 +43,7 @@ export const BootScreen = (props) => {
             setBlackOut(false);
             setTimeout(() => {
               dispatch({ type: "WALLBOOTED" });
+              //WALLBOOTED booted: true, dir: 0,
             }, 4000);
           }, 2000);
         }

src/index.css

@@ -150,9 +150,11 @@ i[data-flip="true"] {
 .dpShad {
   box-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
 }
+
 .mdShad {
   box-shadow: 0 0 8px rgba(41, 41, 41, 0.1);
 }
+
 .ltShad {
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
 }
@@ -264,9 +266,10 @@ a {
   width: 100%;
   position: relative;
   height: 100%;
+  /* 这部分是用于设置子元素居中 */
   display: flex;
   justify-content: center;
   align-items: center;
   background: #010001;
   color: white;
-}
+}

src/index.jsx

@@ -7,13 +7,15 @@ import { Provider } from "react-redux";
 const root = createRoot(document.getElementById("root"));
 
 root.render(
+  // 这个Suspense用于处理异步加载，当其子组件还在加载时，它会显示fallback属性指定的内容。在这个例子中，当应用还在加载时，会显示一个包含“Loading”的<h1>标签。
   <Suspense
     fallback={
       <div id="sus-fallback">
         <h1>Loading</h1>
       </div>
     }
   >
+    {/* <Provider>组件用于将Redux store传递给所有的子组件 */}
     <Provider store={store}>
       <App />
     </Provider>

src/reducers/wallpaper.js

@@ -1,3 +1,4 @@
+// 从localStorage拿到壁纸
 var wps = localStorage.getItem("wps") || 0;
 var locked = localStorage.getItem("locked");
 
@@ -29,15 +30,19 @@ const defState = {
   wps: wps,
   src: walls[wps],
   locked: !(locked == "false"),
+  // import.meta.env.MODE == "development" 这段代码是用来检查当前运行环境是否为开发模式  为true
   booted: false || import.meta.env.MODE == "development",
   act: "",
+  // 这个属性应该是用来控制锁屏的吧
   dir: 0,
 };
-
+// state 管理的数据初始状态
+// action是个对象，必须有一个type属性，用来表示将要执行的动作
 const wallReducer = (state = defState, action) => {
   switch (action.type) {
     case "WALLUNLOCK":
       localStorage.setItem("locked", false);
+      // 修改之后返回新的state
       return {
         ...state,
         locked: false,
@@ -100,6 +105,7 @@ const wallReducer = (state = defState, action) => {
         wps: wps,
         src: src,
       };
+    // 如果都不符合 返回原来的state
     default:
       return state;
   }