blueedgetechno · kelinshide · Aug 5, 2024 · Aug 11, 2024
@@ -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,29 +135,45 @@ 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}
+        {/* appwrap position: relative; */}
         <div className="appwrap">
           <Background />
+          {/* desktop  position: absolute;*/}
           <div className="desktop" data-menu="desk">
+            {/* DesktopApp居然才是桌面图标  后面map两个不是 */}
             <DesktopApp />
             {Object.keys(Applications).map((key, idx) => {
               var WinApp = Applications[key];

@@ -10,6 +10,7 @@
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
+  // 这个属性使得.background类的任何CSS属性变化时，都能在0.2秒内平滑过渡。ease表示过渡的速度曲线将从慢到快再到慢，产生更自然的加速和减速效果。
   transition: all 0.2s ease;
 }
 
@@ -23,11 +24,12 @@
   z-index: 2;
   display: grid;
   place-items: center;
+  // 设置鼠标指针在悬停于该元素上时显示为一个进度指示器，通常是一个旋转的等待图标，表明正在执行一个后台操作或等待某个过程完成。  挺好玩的  手机端没这个属性
   cursor: progress;
 }
 
 .lockscreen {
-  position: absolute;
+  position: absolute; //这里加个绝对定位  脱离文档流 可以实现覆盖全屏的同时不影响正常页面  否则你注释掉看看
   top: 0;
   left: 0;
   min-width: 100vw;
@@ -38,7 +40,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  transition: all 1s ease-in-out;
+  transition: all 1s ease-in-out; //这个属性控制慢入慢出的效果  注释掉看看改变屏幕尺寸的效果
 
   &[data-unlock="true"] {
     opacity: 0;
@@ -50,6 +52,7 @@
     transition: all 200ms ease-in-out;
   }
 
+  // 为了美观 data-blur="true"时给一个半透明的模糊层
   &[data-blur="true"]::after {
     content: "";
     position: absolute;
@@ -97,7 +100,7 @@
 
   &[data-faded="false"] {
     opacity: 1;
-    pointer-events: auto;
+    pointer-events: auto; // 上面pointer-events: none;把鼠标事件禁止了  这里元素展示了 可以放开了
     transform: translateY(0px);
   }
 
@@ -153,6 +156,7 @@
   align-items: center;
   justify-content: center;
 }
+
 // https://docs.microsoft.com/en-us/fluent-ui/web-components/components/progress-ring
 
 .progressRing circle {
@@ -170,12 +174,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);
   }
-}
+}
@@ -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);
         }
@@ -68,7 +72,7 @@ export const BootScreen = (props) => {
 
 export const LockScreen = (props) => {
   const wall = useSelector((state) => state.wallpaper);
-  const [lock, setLock] = useState(false);
+  const [lock, setLock] = useState(false);//这个变量用来做解锁的作用，false展示锁屏 true展示登录那个界面
   const [unlocked, setUnLock] = useState(false);
   const [password, setPass] = useState("");
   const [passType, setType] = useState(1);
@@ -110,15 +114,20 @@ export const LockScreen = (props) => {
 
   return (
     <div
+      // wall.dir  -1标识锁屏了 
       className={"lockscreen " + (props.dir == -1 ? "slowfadein" : "")}
       data-unlock={unlocked}
       style={{
         backgroundImage: `url(${`img/wallpaper/lock.jpg`})`,
+        //给一个锁屏的背景
       }}
+      //点击触发解锁动作
       onClick={action}
       data-action="splash"
       data-blur={lock}
     >
+      {/* 时间  data-faded={lock} 这个属性是为了控制解锁时时间隐藏*/}
+      {/* mt-40 Tailwind CSS中 margin-top  40乘以默认Tailwind的单位  一般是 0.25rem*/}
       <div className="splashScreen mt-40" data-faded={lock}>
         <div className="text-6xl font-semibold text-gray-100">
           {new Date().toLocaleTimeString("en-US", {
@@ -135,8 +144,12 @@ export const LockScreen = (props) => {
           })}
         </div>
       </div>
+      {/* 图片 */}
       <div className="fadeinScreen" data-faded={!lock} data-unlock={unlocked}>
+        {/* 用的是作者写的通用组件 */}
         <Image
+          // rounded-full 是ailwind CSS的  相当于图片圆角效果border-radius: 50%; 
+          // overflow-hidden 元素的内容超出了其边界，这些超出的部分将被裁剪
           className="rounded-full overflow-hidden"
           src="img/asset/prof.jpg"
           w={200}

@@ -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;
-}
+}
@@ -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>

@@ -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: "",
+  // 这个属性应该是用来控制锁屏的吧  -1表示锁屏了
   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;
   }