20240811 看到了DesktopApp里面的Icon

src/App.jsx

@@ -168,9 +168,12 @@ function App() {
         {!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];

src/containers/background/back.scss

@@ -10,6 +10,7 @@
   background-repeat: no-repeat;
   background-size: cover;
   background-position: center;
+  // 这个属性使得.background类的任何CSS属性变化时，都能在0.2秒内平滑过渡。ease表示过渡的速度曲线将从慢到快再到慢，产生更自然的加速和减速效果。
   transition: all 0.2s ease;
 }
 
@@ -28,7 +29,7 @@
 }
 
 .lockscreen {
-  position: absolute;
+  position: absolute; //这里加个绝对定位  脱离文档流 可以实现覆盖全屏的同时不影响正常页面  否则你注释掉看看
   top: 0;
   left: 0;
   min-width: 100vw;
@@ -39,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;
@@ -51,6 +52,7 @@
     transition: all 200ms ease-in-out;
   }
 
+  // 为了美观 data-blur="true"时给一个半透明的模糊层
   &[data-blur="true"]::after {
     content: "";
     position: absolute;
@@ -98,7 +100,7 @@
 
   &[data-faded="false"] {
     opacity: 1;
-    pointer-events: auto;
+    pointer-events: auto; // 上面pointer-events: none;把鼠标事件禁止了  这里元素展示了 可以放开了
     transform: translateY(0px);
   }
 

src/containers/background/index.jsx

@@ -72,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);
@@ -114,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", {
@@ -139,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}

src/reducers/wallpaper.js

@@ -33,7 +33,7 @@ const defState = {
   // import.meta.env.MODE == "development" 这段代码是用来检查当前运行环境是否为开发模式  为true
   booted: false || import.meta.env.MODE == "development",
   act: "",
-  // 这个属性应该是用来控制锁屏的吧
+  // 这个属性应该是用来控制锁屏的吧  -1表示锁屏了
   dir: 0,
 };
 // state 管理的数据初始状态