整体布局和番茄钟整合

2025-11-04 11:53:10 +08:00 · 2022-02-09 16:45:45 +08:00
parent d5054bee66
commit 0f09aebc39
17 changed files with 604 additions and 373 deletions
--- a/packages/shell-chrome/assets/css/main.css
+++ b/packages/shell-chrome/assets/css/main.css
@@ -17,23 +17,46 @@ body {
 }
 #popup header {
  width: inherit;
-  height: 30px;
+  height: 40px;
  background: linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%);
 }
 #popup header img {
  height: inherit;
 }
-#popup .article ul li {
+#popup #back {
+  display: none;
+  position: absolute;
+  top: 54px;
+  left: 10px;
+  width: 15px;
+  height: 15px;
+  background-color: transparent;
+  border-top: 2px solid #fff;
+  border-left: 2px solid #fff;
+  transform: rotate(-45deg);
+  cursor: pointer;
+}
+#popup #article #weather {
+  width: 100%;
+  height: 150px;
+  margin-top: 3px;
+  background-color: #fff;
+}
+#popup #article .left {
+  float: left;
+  width: 200px;
+}
+#popup #article .left ul li {
  margin: 5px 0;
  height: 45px;
  background: linear-gradient(to right, #84fab0 0%, #8fd3f4 51%, #84fab0 100%);
 }
-#popup .article ul li span {
+#popup #article .left ul li span {
  font-size: 16px;
  line-height: 45px;
  margin-left: 5px;
 }
-#popup .article ul li #click-per .button {
+#popup #article .left ul li #click-per .button {
  position: relative;
  float: right;
  top: 6px;
@@ -42,7 +65,7 @@ body {
  height: 32px;
  border-radius: 100px;
 }
-#popup .article ul li #click-per .button .checkbox {
+#popup #article .left ul li #click-per .button .checkbox {
  position: relative;
  width: 100%;
  height: 100%;
@@ -50,24 +73,24 @@ body {
  cursor: pointer;
  z-index: 3;
 }
-#popup .article ul li #click-per .button .knobs,
-#popup .article ul li #click-per .button .layer {
+#popup #article .left ul li #click-per .button .knobs,
+#popup #article .left ul li #click-per .button .layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
 }
-#popup .article ul li #click-per .button .knobs {
+#popup #article .left ul li #click-per .button .knobs {
  z-index: 2;
 }
-#popup .article ul li #click-per .button .layer {
+#popup #article .left ul li #click-per .button .layer {
  border-radius: 100px;
  width: 100%;
  background-color: #ebf7fc;
  z-index: 1;
 }
-#popup .article ul li #click-per .button .knobs::before {
+#popup #article .left ul li #click-per .button .knobs::before {
  content: "YES";
  position: absolute;
  top: 2px;
@@ -83,20 +106,20 @@ body {
  background-color: #03a9f4;
  border-radius: 50%;
 }
-#popup .article ul li #click-per .button .checkbox:checked + .knobs:before {
+#popup #article .left ul li #click-per .button .checkbox:checked + .knobs:before {
  content: "NO";
  left: 3px;
  background-color: #f44336;
 }
-#popup .article ul li #click-per .button .checkbox:checked ~ .layer {
+#popup #article .left ul li #click-per .button .checkbox:checked ~ .layer {
  background-color: #fcebeb;
 }
-#popup .article ul li #click-per .button .knobs,
-#popup .article ul li #click-per .button .knobs:before,
-#popup .article ul li #click-per .button .layer {
+#popup #article .left ul li #click-per .button .knobs,
+#popup #article .left ul li #click-per .button .knobs:before,
+#popup #article .left ul li #click-per .button .layer {
  transition: 0.3s ease all;
 }
-#popup .article ul li #mouse-style .button {
+#popup #article .left ul li #mouse-style .button {
  position: relative;
  float: right;
  top: 6px;
@@ -105,7 +128,7 @@ body {
  height: 32px;
  border-radius: 100px;
 }
-#popup .article ul li #mouse-style .button .checkbox {
+#popup #article .left ul li #mouse-style .button .checkbox {
  position: relative;
  width: 100%;
  height: 100%;
@@ -113,24 +136,24 @@ body {
  cursor: pointer;
  z-index: 3;
 }
-#popup .article ul li #mouse-style .button .knobs,
-#popup .article ul li #mouse-style .button .layer {
+#popup #article .left ul li #mouse-style .button .knobs,
+#popup #article .left ul li #mouse-style .button .layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
 }
-#popup .article ul li #mouse-style .button .knobs {
+#popup #article .left ul li #mouse-style .button .knobs {
  z-index: 2;
 }
-#popup .article ul li #mouse-style .button .layer {
+#popup #article .left ul li #mouse-style .button .layer {
  border-radius: 100px;
  width: 100%;
  background-color: #ebf7fc;
  z-index: 1;
 }
-#popup .article ul li #mouse-style .button .knobs::before {
+#popup #article .left ul li #mouse-style .button .knobs::before {
  content: "YES";
  position: absolute;
  top: 2px;
@@ -146,25 +169,44 @@ body {
  background-color: #03a9f4;
  border-radius: 50%;
 }
-#popup .article ul li #mouse-style .button .checkbox:checked + .knobs:before {
+#popup #article .left ul li #mouse-style .button .checkbox:checked + .knobs:before {
  content: "NO";
  left: 3px;
  background-color: #f44336;
 }
-#popup .article ul li #mouse-style .button .checkbox:checked ~ .layer {
+#popup #article .left ul li #mouse-style .button .checkbox:checked ~ .layer {
  background-color: #fcebeb;
 }
-#popup .article ul li #mouse-style .button .knobs,
-#popup .article ul li #mouse-style .button .knobs:before,
-#popup .article ul li #mouse-style .button .layer {
+#popup #article .left ul li #mouse-style .button .knobs,
+#popup #article .left ul li #mouse-style .button .knobs:before,
+#popup #article .left ul li #mouse-style .button .layer {
  transition: 0.3s ease all;
 }
+#popup #article .right {
+  float: right;
+  width: 100px;
+}
+#popup #article .right #clock {
+  width: 80px;
+  height: 80px;
+  margin: 30px auto;
+  background-color: #fff;
+  border-radius: 50%;
+  text-align: center;
+  line-height: 80px;
+  cursor: pointer;
+  font-size: 20px;
+}
+#popup #article .right #clock:active {
+  transform: translate(0px, 1px);
+  box-shadow: 0px 1px 0px 0px;
+}
 #popup #btnScreenshot {
  position: absolute;
  top: 1px;
  right: 5px;
-  width: 64px;
-  height: 27px;
+  width: 81px;
+  height: 37px;
  color: #fff;
  font-weight: 500;
  cursor: pointer;
--- a/packages/shell-chrome/assets/css/main.less
+++ b/packages/shell-chrome/assets/css/main.less
@@ -19,162 +19,205 @@ body {
    width: 300px;
    header{
        width: inherit;
-        height: 30px;
+        height: 40px;
        background: linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%);;
        img {
            height: inherit;
        }
    }
-    .article{
-        ul{
-            li{
-                margin: 5px 0;
-                height: 45px;
-                background: linear-gradient(to right, #84fab0 0%, #8fd3f4 51%, #84fab0 100%);
-                span{
-                    font-size: 16px;
-                    line-height: 45px;
-                    margin-left: 5px;
-                }
-                #click-per{
-                    .button {
-                        position: relative;
-                        float: right;
-                        top: 6px;
-                        right: 6px;
-                        width: 66px;
-                        height: 32px;
-                        border-radius: 100px;
-                        .checkbox {
+    #back {
+        display: none;
+        position: absolute;
+        top: 54px;
+        left: 10px;
+        width: 15px;
+        height: 15px;
+        background-color: transparent;
+        border-top: 2px solid #fff;
+        border-left: 2px solid #fff;
+        transform: rotate(-45deg);
+        cursor: pointer;
+    }
+    #article{
+        #weather{
+            width: 100%;
+            height: 150px;
+            margin-top: 3px;
+            background-color: #fff;
+        }
+        .left{
+            float: left;
+            width: 200px;
+            ul{
+                li{
+                    margin: 5px 0;
+                    height: 45px;
+                    background: linear-gradient(to right, #84fab0 0%, #8fd3f4 51%, #84fab0 100%);
+                    span{
+                        font-size: 16px;
+                        line-height: 45px;
+                        margin-left: 5px;
+                    }
+                    #click-per{
+                        .button {
                            position: relative;
-                            width: 100%;
-                            height: 100%;
-                            opacity: 0;
-                            cursor: pointer;
-                            z-index: 3;
-                        }
-                        .knobs,
-                        .layer {
-                            position: absolute;
-                            top: 0;
-                            right: 0;
-                            bottom: 0;
-                            left: 0;
-                        }
-                        .knobs {
-                            z-index: 2;
-                        }
-                        .layer{
+                            float: right;
+                            top: 6px;
+                            right: 6px;
+                            width: 66px;
+                            height: 32px;
                            border-radius: 100px;
-                            width: 100%;
-                            background-color: #ebf7fc;
-                            z-index: 1;
-                        }
-                        .knobs::before {
-                            content: "YES";
-                            position: absolute;
-                            top: 2px;
-                            left: 34px;
-                            width: 20px;
-                            height: 10px;
-                            color: #fff;
-                            font-size: 10px;
-                            font-weight: bold;
-                            text-align: center;
-                            line-height: 1;
-                            padding: 9px 4px;
-                            background-color: #03a9f4;
-                            border-radius: 50%;
-                        }
-                        .checkbox:checked+.knobs:before {
-                            content: "NO";
-                            left: 3px;
-                            background-color: #f44336;
-                        }
-                        .checkbox:checked~.layer {
-                            background-color: #fcebeb;
-                        }
-                        .knobs,
-                        .knobs:before,
-                        .layer{
-                            transition: 0.3s ease all;
+                            .checkbox {
+                                position: relative;
+                                width: 100%;
+                                height: 100%;
+                                opacity: 0;
+                                cursor: pointer;
+                                z-index: 3;
+                            }
+                            .knobs,
+                            .layer {
+                                position: absolute;
+                                top: 0;
+                                right: 0;
+                                bottom: 0;
+                                left: 0;
+                            }
+                            .knobs {
+                                z-index: 2;
+                            }
+                            .layer{
+                                border-radius: 100px;
+                                width: 100%;
+                                background-color: #ebf7fc;
+                                z-index: 1;
+                            }
+                            .knobs::before {
+                                content: "YES";
+                                position: absolute;
+                                top: 2px;
+                                left: 34px;
+                                width: 20px;
+                                height: 10px;
+                                color: #fff;
+                                font-size: 10px;
+                                font-weight: bold;
+                                text-align: center;
+                                line-height: 1;
+                                padding: 9px 4px;
+                                background-color: #03a9f4;
+                                border-radius: 50%;
+                            }
+                            .checkbox:checked+.knobs:before {
+                                content: "NO";
+                                left: 3px;
+                                background-color: #f44336;
+                            }
+                            .checkbox:checked~.layer {
+                                background-color: #fcebeb;
+                            }
+                            .knobs,
+                            .knobs:before,
+                            .layer{
+                                transition: 0.3s ease all;
+                            }
                        }
                    }
-                }
-                #mouse-style{
-                    .button {
-                        position: relative;
-                        float: right;
-                        top: 6px;
-                        right: 6px;
-                        width: 66px;
-                        height: 32px;
-                        border-radius: 100px;
-                        .checkbox {
+                    #mouse-style{
+                        .button {
                            position: relative;
-                            width: 100%;
-                            height: 100%;
-                            opacity: 0;
-                            cursor: pointer;
-                            z-index: 3;
-                        }
-                        .knobs,
-                        .layer {
-                            position: absolute;
-                            top: 0;
-                            right: 0;
-                            bottom: 0;
-                            left: 0;
-                        }
-                        .knobs {
-                            z-index: 2;
-                        }
-                        .layer{
+                            float: right;
+                            top: 6px;
+                            right: 6px;
+                            width: 66px;
+                            height: 32px;
                            border-radius: 100px;
-                            width: 100%;
-                            background-color: #ebf7fc;
-                            z-index: 1;
-                        }
-                        .knobs::before {
-                            content: "YES";
-                            position: absolute;
-                            top: 2px;
-                            left: 34px;
-                            width: 20px;
-                            height: 10px;
-                            color: #fff;
-                            font-size: 10px;
-                            font-weight: bold;
-                            text-align: center;
-                            line-height: 1;
-                            padding: 9px 4px;
-                            background-color: #03a9f4;
-                            border-radius: 50%;
-                        }
-                        .checkbox:checked+.knobs:before {
-                            content: "NO";
-                            left: 3px;
-                            background-color: #f44336;
-                        }
-                        .checkbox:checked~.layer {
-                            background-color: #fcebeb;
-                        }
-                        .knobs,
-                        .knobs:before,
-                        .layer{
-                            transition: 0.3s ease all;
+                            .checkbox {
+                                position: relative;
+                                width: 100%;
+                                height: 100%;
+                                opacity: 0;
+                                cursor: pointer;
+                                z-index: 3;
+                            }
+                            .knobs,
+                            .layer {
+                                position: absolute;
+                                top: 0;
+                                right: 0;
+                                bottom: 0;
+                                left: 0;
+                            }
+                            .knobs {
+                                z-index: 2;
+                            }
+                            .layer{
+                                border-radius: 100px;
+                                width: 100%;
+                                background-color: #ebf7fc;
+                                z-index: 1;
+                            }
+                            .knobs::before {
+                                content: "YES";
+                                position: absolute;
+                                top: 2px;
+                                left: 34px;
+                                width: 20px;
+                                height: 10px;
+                                color: #fff;
+                                font-size: 10px;
+                                font-weight: bold;
+                                text-align: center;
+                                line-height: 1;
+                                padding: 9px 4px;
+                                background-color: #03a9f4;
+                                border-radius: 50%;
+                            }
+                            .checkbox:checked+.knobs:before {
+                                content: "NO";
+                                left: 3px;
+                                background-color: #f44336;
+                            }
+                            .checkbox:checked~.layer {
+                                background-color: #fcebeb;
+                            }
+                            .knobs,
+                            .knobs:before,
+                            .layer{
+                                transition: 0.3s ease all;
+                            }
                        }
                    }
                }
            }
        }
+        .right{
+            float: right;
+            width: 100px;
+            #clock{
+                width: 80px;
+                height: 80px;
+                margin: 30px auto;
+                background-color: #fff;
+                border-radius: 50%;
+                text-align: center;
+                line-height: 80px;
+                cursor: pointer;
+                font-size: 20px;
+            }
+            #clock:active{
+                transform: translate(0px, 1px);
+                box-shadow: 0px 1px 0px 0px;
+            }
+        }
+        
    }
    #btnScreenshot{
        position: absolute;
        top: 1px;
        right: 5px;
-        width: 64px;
-        height: 27px;
+        width: 81px;
+        height: 37px;
        color: #fff;
        font-weight: 500;
        cursor: pointer;
@@ -189,4 +232,6 @@ body {
        transform: translate(0px, 1px);
        box-shadow: 0px 1px 0px 0px;
    }
+   
+
 }
--- a/packages/shell-chrome/assets/html/pomodoro/assets/css/popup.css
+++ b/packages/shell-chrome/assets/html/pomodoro/assets/css/popup.css
@@ -1,12 +1,12 @@
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap');
-
 body {
    /* background-color: rgb(51, 11, 116); */
    background: url(../../images/pomo_green.jpeg) no-repeat;
-    background-image: "../../";
+    background-size: cover;
+    /* background-image: "../../"; */
    /* color: white; */
-    font-family: 'Source Sans Pro','Fira Sans', sans-serif;
+    font-family: 'Source Sans Pro', 'Fira Sans', sans-serif;
    margin: 0;
    padding: 0;
    /* width: 280px; */
@@ -19,6 +19,63 @@ body {
    padding: 10px 0 20px;
 }

+#left {
+    position: absolute;
+    width: 25px;
+    height: 45px;
+    top: 180px;
+    left: 0;
+    border-top-right-radius: 10px;
+    border-bottom-right-radius: 10px;
+    opacity: 0.5;
+    cursor: pointer;
+}
+
+#left:hover {
+    background-color: #b4b2b2;
+}
+
+#left::before {
+    position: absolute;
+    content: "";
+    top: 12px;
+    left: 5px;
+    width: 15px;
+    height: 15px;
+    border-top: 2px solid #bbb9b7;
+    border-left: 2px solid #bbb9b7;
+    transform: rotate(-45deg);
+}
+
+#right {
+    position: absolute;
+    width: 25px;
+    height: 45px;
+    top: 180px;
+    right: 0;
+    border-top-left-radius: 10px;
+    border-bottom-left-radius: 10px;
+    opacity: 0.8;
+    cursor: pointer;
+}
+
+#right:hover {
+    background-color: #b4b2b2;
+}
+
+#right::after {
+    z-index: 9999;
+    position: absolute;
+    content: "";
+    top: 12px;
+    right: 5px;
+    width: 15px;
+    height: 15px;
+    border-top: 2px solid #585551;
+    border-right: 2px solid #585551;
+    transform: rotate(45deg);
+}
+
 .buttons {
    width: fit-content;
    margin: auto;
@@ -26,7 +83,7 @@ body {
    color: rgb(169, 172, 172);
 }

-.buttons .slider{
+.buttons .slider {
    color: rgb(247, 226, 230);
 }

@@ -37,7 +94,9 @@ body {
    padding: 8px;
 }

+
 /*计数部分*/
+
 #countdown {
    clear: both;
    width: fit-content;
@@ -48,12 +107,13 @@ body {
    color: aliceblue;
 }

-#countdown span{
+#countdown span {
    opacity: 0;
 }

-
-#start-btn,#end-btn,#reset-btn {
+#start-btn,
+#end-btn,
+#reset-btn {
    /* 文字颜色 */
    color: #f5e4b9;
    /* 清除背景色 */
@@ -71,24 +131,26 @@ body {
    /* width: 40px; */
    font-size: 16px;
    margin: 4px 2px;
-    -webkit-transition-duration: 0.4s; /* Safari */
+    -webkit-transition-duration: 0.4s;
+    /* Safari */
    transition-duration: 0.4s;
    cursor: pointer;
    text-decoration: none;
    text-transform: uppercase;
-
-    text-shadow: 1px 1px 1px rgba(255,255,255, .1);
-     border-radius: 25px;
-     box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-
-
+    text-shadow: 1px 1px 1px rgba(255, 255, 255, .1);
+    border-radius: 25px;
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
+
 #start-btn {
    background-color: white;
    color: black;
    border: 1px solid #f5e4b9;
 }
+
+
 /* 悬停样式 */
+
 #start-btn:hover {
    background-color: #f5e4b9;
    color: white;
@@ -100,12 +162,16 @@ body {
    border: 1px solid #ECB390;
    display: none;
 }
+
+
 /* 悬停样式 */
+
 #end-btn:hover {
    background-color: #ECB390;
    color: white;
 }

+
 /* #end-btn{
    width: 40px;
    margin: 10px auto 0;
@@ -115,6 +181,7 @@ body {
    cursor: pointer;
 } */

+
 /* #reset-btn {
    width: 40px;
    margin: 10px auto 0;
@@ -129,7 +196,10 @@ body {
    color: black;
    border: 1px solid #DD4A48;
 }
+
+
 /* 悬停样式 */
+
 #reset-btn:hover {
    background-color: #DD4A48;
    color: white;
@@ -141,13 +211,13 @@ body {
    display: none;
 } */

+
 /*选中的按钮*/
+
 .selected {
    background-color: rgb(244, 242, 248);
 }

-
-
 ul {
    padding: 0;
 }
@@ -164,13 +234,12 @@ li {
    float: right;
 }

-
 .hide {
    display: none;
 }

-footer .settings{
+footer .settings {
    position: absolute;
    bottom: 5px;
    right: 5px;
-}
+}
--- a/packages/shell-chrome/assets/html/pomodoro/assets/js/popup.js
+++ b/packages/shell-chrome/assets/html/pomodoro/assets/js/popup.js
@@ -42,121 +42,117 @@ let pomodoro = "pomodoro";

 //番茄钟按钮-绑定事件
 document.addEventListener("click", (e) => {
-  if (!e.target.matches(".button")) return;
+    if (!e.target.matches(".button")) return;

-  // reset when pomodoro button selected
-  pause = true;
-  seconds = 60;
-  startBtn.innerHTML = "开始";
+    // reset when pomodoro button selected
+    pause = true;
+    seconds = 60;
+    startBtn.innerHTML = "开始";

-  chrome.storage.sync.set({ pause: pause, seconds: seconds }, function () {
-    if (!chrome.runtime.error) {
-      alert("初始化pause、seconds");
-    }
-  });
-
-  // 定时器初始化
-  if (e.target.matches("#pomodoro-btn")) {
-    countdownTimer.innerHTML = "25:00";
-    pomodoro = "pomodoro";
-    minutes = 25;
-    chrome.storage.sync.set(
-      { minutes: minutes, countdownTimer: "25:00" },
-      function () {
+    chrome.storage.sync.set({ pause: pause, seconds: seconds }, function() {
        if (!chrome.runtime.error) {
-          alert("added target pomodoro!");
+            alert("初始化pause、seconds");
        }
-      }
-    );
-  }
+    });
+
+    // 定时器初始化
+    if (e.target.matches("#pomodoro-btn")) {
+        countdownTimer.innerHTML = "25:00";
+        pomodoro = "pomodoro";
+        minutes = 25;
+        chrome.storage.sync.set({ minutes: minutes, countdownTimer: "25:00" },
+            function() {
+                if (!chrome.runtime.error) {
+                    alert("added target pomodoro!");
+                }
+            }
+        );
+    }
 });

 // 开始按钮-绑定事件
 startBtn.addEventListener("click", () => {
-  // countdown(); 在后台运行，需要取出状态
-  debounce(start(), 100);
+    // countdown(); 在后台运行，需要取出状态
+    debounce(start(), 100);
 });

 function start() {
-  chrome.storage.sync.get("pomoData", ({ pomoData }) => {
-    const { minutes, seconds, status } = pomoData;
+    chrome.storage.sync.get("pomoData", ({ pomoData }) => {
+        const { minutes, seconds, status } = pomoData;

-    chrome.runtime.sendMessage(
-      {
-        status: "start",
-        senderId: "pomo",
-        content: {
-          minutes,
-          seconds,
-        },
-      },
-      (response) => {
-        console.log(response);
+        chrome.runtime.sendMessage({
+                status: "start",
+                senderId: "pomo",
+                content: {
+                    minutes,
+                    seconds,
+                },
+            },
+            (response) => {
+                console.log(response);

-        startBtn.style.display = "none";
-        endBtn.style.display = "block";
-        getTimer();
-      }
-    );
-  });
+                startBtn.style.display = "none";
+                endBtn.style.display = "block";
+                getTimer();
+            }
+        );
+    });
 }

 endBtn.addEventListener("click", () => {
-  setTimeout(end, 200);
+    setTimeout(end, 200);
 });

 function end() {
-  chrome.runtime.sendMessage(
-    {
-      status: "paused",
-      senderId: "pomo",
-    },
-    (response) => {
-      console.log(response);
-
-      startBtn.style.display = "block";
-      endBtn.style.display = "none";
-      clearTimer();
-    }
-  );
-}
-
-function getTimer() {
-  clearTimer();
-  timer = setInterval(() => {
-    chrome.storage.sync.get("pomoData", ({ pomoData }) => {
-      // console.log("pomodata****",pomoData)
-      // const{minutes,seconds,countdownTimer} = pomoData;
-      countdownTimer.innerHTML = pomoData.countdownTimer;
-
-      //更新后倒计时判断，如果结束则重新初始化界面
-      if(pomoData.countdownTimer == "00:00"){
-
-        audio.play();
-        //不能放在页面上，要在后台进行
-        chrome.runtime.sendMessage(
-          {
-            status: "playend",
+    chrome.runtime.sendMessage({
+            status: "paused",
            senderId: "pomo",
-          },
-          (response) => {
-            console.log(response,"**************下面");
-            countdownTimer.innerHTML = "25:00";
+        },
+        (response) => {
+            console.log(response);

            startBtn.style.display = "block";
            endBtn.style.display = "none";
            clearTimer();
-          }
-        );
+        }
+    );
+}

-      }
-    });
-  }, 200);
+function getTimer() {
+    clearTimer();
+    timer = setInterval(() => {
+        chrome.storage.sync.get("pomoData", ({ pomoData }) => {
+            // console.log("pomodata****",pomoData)
+            // const{minutes,seconds,countdownTimer} = pomoData;
+            countdownTimer.innerHTML = pomoData.countdownTimer;
+
+            //更新后倒计时判断，如果结束则重新初始化界面
+            if (pomoData.countdownTimer == "00:00") {
+
+                audio.play();
+                //不能放在页面上，要在后台进行
+                chrome.runtime.sendMessage({
+                        status: "playend",
+                        senderId: "pomo",
+                    },
+                    (response) => {
+                        console.log(response, "**************下面");
+                        countdownTimer.innerHTML = "25:00";
+
+                        startBtn.style.display = "block";
+                        endBtn.style.display = "none";
+                        clearTimer();
+                    }
+                );
+
+            }
+        });
+    }, 200);

 }

 function clearTimer() {
-  clearInterval(timer);
+    clearInterval(timer);
 }

 /*
@@ -164,59 +160,104 @@ function clearTimer() {
 * delay [number] 毫秒，防抖期限值
 */
 function debounce(fn, delay) {
-  let timer = null; //借助闭包
-  return function () {
-    if (timer) {
-      clearTimeout(timer); //进入该分支语句，说明当前正在一个计时过程中，并且又触发了相同事件。所以要取消当前的计时，重新开始计时
-      timer = setTimeout(fn, delay);
-    } else {
-      timer = setTimeout(fn, delay); // 进入该分支说明当前并没有在计时，那么就开始一个计时
-    }
-  };
+    let timer = null; //借助闭包
+    return function() {
+        if (timer) {
+            clearTimeout(timer); //进入该分支语句，说明当前正在一个计时过程中，并且又触发了相同事件。所以要取消当前的计时，重新开始计时
+            timer = setTimeout(fn, delay);
+        } else {
+            timer = setTimeout(fn, delay); // 进入该分支说明当前并没有在计时，那么就开始一个计时
+        }
+    };
 }

 // 重置按钮-绑定事件
 resetBtn.addEventListener("click", () => {
-  setTimeout(() => {
-    chrome.runtime.sendMessage(
-      {
-        status: "reset",
-        senderId: "pomo",
-      },
-      (response) => {
-        // console.log(response);
-        countdownTimer.innerHTML = "25:00";
+    setTimeout(() => {
+        chrome.runtime.sendMessage({
+                status: "reset",
+                senderId: "pomo",
+            },
+            (response) => {
+                // console.log(response);
+                countdownTimer.innerHTML = "25:00";

-        startBtn.style.display = "block";
-        endBtn.style.display = "none";
-        clearTimer();
-      }
-    );
-  }, 100);
+                startBtn.style.display = "block";
+                endBtn.style.display = "none";
+                clearTimer();
+            }
+        );
+    }, 100);
 });

 //页面反复打开时页面初始化
 chrome.storage.sync.get("pomoData", ({ pomoData }) => {
-  console.log(pomoData);
-  const { status } = pomoData;
+    console.log(pomoData);
+    const { status } = pomoData;

-  if (status === "start") {
-    startBtn.style.display = "none";
-    endBtn.style.display = "block";
-    getTimer();
-  } else if (status === "paused") {
-    startBtn.style.display = "block";
-    endBtn.style.display = "none";
-    chrome.storage.sync.get("pomoData", ({ pomoData }) => {
-      countdownTimer.innerHTML = pomoData.countdownTimer;
-    });
-  } else if (status === "init") {
-    chrome.runtime.sendMessage({
-      status: "init",
-      senderId: "pomo",
-    });
-    countdownTimer.innerHTML = "25:00";
-  }else if(status === 'playend'){
-    countdownTimer.innerHTML = "25:00";
-  }
+    if (status === "start") {
+        startBtn.style.display = "none";
+        endBtn.style.display = "block";
+        getTimer();
+    } else if (status === "paused") {
+        startBtn.style.display = "block";
+        endBtn.style.display = "none";
+        chrome.storage.sync.get("pomoData", ({ pomoData }) => {
+            countdownTimer.innerHTML = pomoData.countdownTimer;
+        });
+    } else if (status === "init") {
+        chrome.runtime.sendMessage({
+            status: "init",
+            senderId: "pomo",
+        });
+        countdownTimer.innerHTML = "25:00";
+    } else if (status === 'playend') {
+        countdownTimer.innerHTML = "25:00";
+    }
 });
+
+// 轮播图
+let photos = ["../../image/background/pomo_green.jpeg",
+    "../../image/background/pomo1.png",
+    "../../image/background/pomo_waterfall.jpg",
+    "../../image/background/pomo_ocean.jpg",
+    "../../image/background/pomo_light.jpeg",
+    "../../image/background/pomo_leaf.jpeg",
+    "../../image/background/pomo_foresr.jpeg",
+    "../../image/background/pomo_fire.jpeg",
+    "../../image/background/pomo_crystal.jpg"
+]
+
+let len = photos.length;
+// console.log(len);
+let index = 0;
+document.getElementById('right').addEventListener("click", function() {
+    change_r();
+});
+document.getElementById('left').addEventListener("click", function() {
+    change_l();
+});
+
+function change_l() {
+    index--;
+    if (index < 0) {
+        index = len - 1;
+    }
+    change(index);
+}
+
+function change_r() {
+    index++;
+    if (index == len) {
+        index = 0;
+    }
+    change(index);
+}
+
+function change(n) {
+    document.body.style = "background: url(" + photos[n] + ") no-repeat; background-size: cover;";
+}
+
+let t = setInterval(function() {
+    change_r();
+}, 40000);
--- a/packages/shell-chrome/assets/html/pomodoro/popup.html
+++ b/packages/shell-chrome/assets/html/pomodoro/popup.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -10,34 +11,35 @@
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400&display=swap" rel="stylesheet">
 </head>
+
 <body>
    <audio id="audio">
        <source src="./src/alarm.mp3" type="audio/mp3">
    </audio>
-    
+
    <!-- 计时部分 -->
    <div id="timer">

-      <!-- 切换背景图片 -->
-      <div class="slider">
-        <span class="left">&lt;</span>
-        <span class="right">&gt;</span>
-      </div>
+        <!-- 切换背景图片 -->
+        <div class="slider">
+            <div id="left"></div>
+            <div id="right"></div>
+        </div>
+

-      
        <!-- <div class="button" id="pomodoro-btn"></div> -->
-      
-      <div id="countdown">
-          <span>00:00</span>
-      </div>
-      <div class="buttons">
-          <!-- 计时开始、重置 -->
-      <button id="start-btn">开始</button>
-      <button id="end-btn">暂停</button>
-      <button id="reset-btn">重置</button>
-      </div>
+
+        <div id="countdown">
+            <span>00:00</span>
+        </div>
+        <div class="buttons">
+            <!-- 计时开始、重置 -->
+            <button id="start-btn">开始</button>
+            <button id="end-btn">暂停</button>
+            <button id="reset-btn">重置</button>
+        </div>
    </div>
-    
+
    <!-- 后续——添加任务清单
    <div id="worklist">
      <div id="current-task-display">
@@ -58,14 +60,15 @@
        </form>
      </div>
    </div> -->
-    
+
    <!-- 页脚--设置 -->
    <footer>
-      <div class="settings">
-        <!-- <a href="./assets/html/options.html">settings</a> -->
-      </div>
+        <div class="settings">
+            <!-- <a href="./assets/html/options.html">settings</a> -->
+        </div>
    </footer>

    <script src="./assets/js/popup.js"></script>
 </body>
+
 </html>
--- a/packages/shell-chrome/assets/html/pomodoro/images/pomo1.png
+++ b/packages/shell-chrome/assets/html/pomodoro/images/pomo1.png
--- a/packages/shell-chrome/assets/html/pomodoro/images/pomo_crystal.jpg
+++ b/packages/shell-chrome/assets/html/pomodoro/images/pomo_crystal.jpg
--- a/packages/shell-chrome/assets/html/pomodoro/images/pomo_fire.jpeg
+++ b/packages/shell-chrome/assets/html/pomodoro/images/pomo_fire.jpeg
--- a/packages/shell-chrome/assets/html/pomodoro/images/pomo_foresr.jpeg
+++ b/packages/shell-chrome/assets/html/pomodoro/images/pomo_foresr.jpeg
--- a/packages/shell-chrome/assets/image/background/pomo_green.jpeg
+++ b/packages/shell-chrome/assets/image/background/pomo_green.jpeg
--- a/packages/shell-chrome/assets/html/pomodoro/images/pomo_leaf.jpeg
+++ b/packages/shell-chrome/assets/html/pomodoro/images/pomo_leaf.jpeg
--- a/packages/shell-chrome/assets/html/pomodoro/images/pomo_light.jpeg
+++ b/packages/shell-chrome/assets/html/pomodoro/images/pomo_light.jpeg
--- a/packages/shell-chrome/assets/html/pomodoro/images/pomo_ocean.jpg
+++ b/packages/shell-chrome/assets/html/pomodoro/images/pomo_ocean.jpg
--- a/packages/shell-chrome/assets/html/pomodoro/images/pomo_waterfall.jpg
+++ b/packages/shell-chrome/assets/html/pomodoro/images/pomo_waterfall.jpg
--- a/packages/shell-chrome/assets/js/mouse-effects/mouse-style.js
+++ b/packages/shell-chrome/assets/js/mouse-effects/mouse-style.js
@@ -25,7 +25,7 @@ $(function() {
                $(this).css("cursor", "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c%0A6QAABPxJREFUWEe9lltIalkYx9feak1hDBonIvVM0ZyKLmAM3YyIqB6KCgrK%0Abj710G1gKooJJrCYiB4q6qHefIgoKoaChpiieojQJIWiy0GygzaO0RVhSDTb%0Ae+1hOSlb3d56aL+Iur/1/db3/77/Whj4/6kGAOgAAPq37x/2gQEAyrRa7V9s%0ANhuTSqXk5eXlGUVRTR8FgwC+HB0dfc3JyWG7tq3RaAiZTAY/AgYBgNTU1Bed%0AThfBVHcE09DQQFxfX1+EUJkoAMAnAMDfoWroBMAwTAsh/ClYUACYIQzDfkeg%0ACQkJ5Pz8PG6xWB4oihIEW9MJwCRDsECVSoUqQ97c3BgrKioSNzc3I+kxZrMZ%0AikQinKIoVw7GJd1/BpLBH8zr6ysVHx9Pra2tUS0tLS9CoRBfW1vjJCQksFDM%0Azs4OUV1dPffy8vKLvzXcAKHKQF9ILpeTVVVVFL2B9/f3SQSTlJSEraysRAiF%0AQlagKtDL4zMNwWSoqakhNzY2nLtlehBMSUkJAtgDAKDRfvB+z0OfcGUYHx9/%0ALS4uxgoKCtwj7J0Ax3EAIQR7e3tEc3MzcX9/r6TDeAC8RwYulwufn59xpgos%0ALi46Li4u8LGxMQ9ABINM7+npSeTdoWHLMDIyQqhUKmp7e5tDhzg9PSXFYjEG%0AIWSEQw0cExMz5TMiiYmJNoPB8F0w/en/Ly0tvba2tnIKCgpIkUhEra6u4vn5%0A+VClUjFKgyojk8msFEXxfQDeIwMdBu2Mw+Ewzr5WqyXz8vIICOGPAIB/nCbI%0AsNMvSqXyq0Qi8dtYTNVBLri6usoYY7FYkCkRVqu1CtkDPZ6RVCAQ2A0GQ8To%0A6Cg8Pj4GEokEDg4OemjsDVFbW0vy+XxSoVC4zxRUjeTkZIfJZPoVADDDBM4I%0AgGGYjsfjfdna2oLIZA4PD4ny8nJ8YGAAyuXyoCOHEvX19dlnZ2f/dDgcDYH6%0AiQlgqLKycmh4eJhFdzi0SFlZmaO9vZ2qr6/38H2RSARvb28JkiQj5ubmHB0d%0AHc4qZGdn205OTlJceodUAQzDKGQcaWlpdp1O5zMNLmPp6uoiULPNzMyw0G96%0AvZ64uroCubm5OI/Hc49eMAjvCkRJpdJ/l5eX2fn5+Xa1Wu0DUFhYSCqVSqf9%0ASiQSQq1Ws6Ojo6FCoYBSqZRRnjeIH4JaMQDgc29v7+XU1FSk0WgkHx4ePA4a%0AlLSxsZFYWFhg0UetqamJnJiYwAQCAaPp0OTwgfDpAdTJT09PzoWYZMBxHPpz%0At2DmlZWVZTs/P/eAYDIis8lkike7KSoqsh0cHKBrlvNB9trW1gY0Go37BOzp%0A6bFNT0+73wkXwt8YIm8nMjIyMLPZ7JThzT7Z9N2jOedyuX+kp6dXHR8fvwvC%0A73UpMjJyxuFw/AwAcMoxODhIeJ9qSUlJdqPRiBILxWLxZTgQKSkpdr1eHxXw%0AvvZWzl2Kokq9S4vslc/n99EcLiyIycnJ1/7+/u9DAfi8u7v7rbS01GPEuFyu%0Aw2q1ehgSupKLxeLrYJVYX1931NXVyQEA46EAgLi4ONvd3Z3bE9CplpOTU+F9%0AsLxVKSAEPbm/05CpkT1kYLFYLxDCQHeGT5mZmddnZ2cejemdPBwAtwxoGlpb%0AW5MD+burEnQIpuThAIDY2Fj74+NjJI7jFnSTCTbvdIjOzk68u7t7GGnuHRdS%0AD7gWw3H8NwhhT4jJ6a8hKWxMcf8BWQiA/lSw+WUAAAAASUVORK5CYII=), auto");
            });
            $('a').hover(function() {
-                $(this).css("cursor", "crosshair");
+                $(this).css("cursor", "url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c%0A6QAAA35JREFUSEvtVk1IG1EQnv1PNhEhVEloRa22gXqw3jyU5qAUQWk9iKjQ%0Ag7SIpIfmnJMHxaNQsYJUkLQSqAcP1VPFS6EeqwepFqOCaQ8x/kRo3N3se1tm%0AYdM02dhtrvVBEt6+b+abmffNbBhwvqpZlv0MADddLtf7bDY74ty0FMk4MRYE%0A4X4ikfhSV1dnwgkh4PF4FFVV3U7s7TCOiDs6Ouja2tofWEopyLL8UlXVV5WQ%0AOyI2DMModo6P3G63pqqqdE3spALXpbat0rW4sCz/Xzth1ufn5yWa0DQNtra2%0AoLu7W6GUjhBC3lY8Mu3E5aRX8Tpqa2shnU7jTFcKbSruYyfEFmZhYYEODw/f%0ABYCE9SxPLEnSo5qamtVwOMzPzc0ZyWTyga7r+BpEIZXM6n8hRmw0GjUmJyd5%0AAKC4N4klSbqTTqe/eb3evL9kMgn19fUvKKWv7Yjx1chxXFl+u3Oe53OEEDFP%0AzPM8yeVybLGXk5MTCAQCzzVNe4Mk6MxauD8+Pgafz1dCvrOzAy0tLaDrOjAM%0AA5lMxsSdnZ1BdXW1maz5FYlEjKmpKdvoLy8v8fVnZpfL5YBlWTMAURRNVVdV%0AVZXY7e3tQTAYzBNns1kTh/aiKL4jhDw1iVmW1QghQrm6WUQWMf4JEAQhH0ix%0AHbYUBmvhC/eCIPyklHotcXEbGxt6e3u7LbdFbJVuenraiEQijLW3M8IKra+v%0AQygUgqOjI2hoaDArxXGcTikVCtvJv7S09KOvr8+2xdBRZ2cnzM/Po+hgcXHR%0A6O/vZ5qbm439/X0GhY/3KUkSKIoCY2NjMD4+DqiTUChkHBwcMBcXF0iMg8Vd%0ATHJ7dnY2MTo6WpKEJRA86OrqgtXVVXNe8zwPeIeyLFsZmb941traSre3t03R%0AYjCIdblc3zVNu2WX3Y1oNJqamJiwzRzvFwVmrUAgAKlUCjY3N6GtrY3GYjF2%0AaGgof454rAR+MBiWZT0AkC07uQYGBmg8Hnc02VZWVoyenh4mHo/D4OBg2d5u%0AbGyEw8PD3+1UBlkVDoczMzMzjsj/Nsmwh30+3z0A+Jrv4yuM5N7e3szy8jKO%0AuooXlliW5U+Kojy0nDjJhgsGgzpOo0qWqqrg9Xo/6Lr+uNDeCbGJb2pqMnZ3%0Ad6+cz5ZjVPXp6Sn4/X5CKbWtlmNidCoIwjNK6ZOrMhdFMaNp2kdCSOwq3C/H%0Acfgu+27rfgAAAABJRU5ErkJggg==), crosshair");
            });
        } else {
            ('*').hover(function() {
--- a/packages/shell-chrome/assets/js/popup.js
+++ b/packages/shell-chrome/assets/js/popup.js
@@ -13,6 +13,18 @@ $(function() {
        // 改变开关状态（保持与上次设置时一致）
        input.checked = budget.clickState3;
    });
+    // 获取番茄钟页面状态
+    chrome.storage.sync.get('clockState', function(budget) {
+        console.log(budget.clockState);
+        if (budget.clockState === "block") {
+            $('#back').css("display", "block");
+            $('#article').css("display", "none");
+            $('#pomodoro').css("display", "block");
+        } else if (budget.clockState === "none") {
+            $('#article').css("display", "block");
+            $('#pomodoro').css("display", "none");
+        }
+    });

    // 点击开关时改变按钮状态
    $("#button-2").click(function() {
@@ -74,4 +86,18 @@ $(function() {
            chrome.extension.getBackgroundPage().takeScreenshot(tabs[0]);
        })
    });
+
+    $('#clock').click(function() {
+        $('#pomodoro').fadeIn(500);
+        $('#article').fadeOut(0);
+        $('#back').css("display", "block");
+        chrome.storage.sync.set({ "clockState": "block" });
+    });
+
+    $('#back').click(function() {
+        $('#pomodoro').fadeOut(0);
+        $('#article').fadeIn(200);
+        $('#back').css("display", "none");
+        chrome.storage.sync.set({ "clockState": "none" });
+    })
 })
--- a/packages/shell-chrome/popup.html
+++ b/packages/shell-chrome/popup.html
@@ -12,49 +12,54 @@
        <header>
            <img src="assets/image/logo.png" alt="Logo">
        </header>
-        <div class="article">
-            <ul>
-                <li>
-                    <div id="expand">
-                    </div>
-                </li>
-                <li>
-                    <div id="mouse-style">
-                        <span>鼠标样式</span>
-                        <div class="button">
-                            <input type="checkbox" id="button-2" class="checkbox" />
-                            <div class="knobs"></div>
-                            <div class="layer"></div>
+        <div id="back"></div>
+        <div id="article">
+            <div id="weather">天气</div>
+            <div class="left">
+                <ul>
+                    <li>
+                        <div id="mouse-style">
+                            <span>鼠标样式</span>
+                            <div class="button">
+                                <input type="checkbox" id="button-2" class="checkbox" />
+                                <div class="knobs"></div>
+                                <div class="layer"></div>
+                            </div>
                        </div>
-                    </div>
-                </li>
-                <li>
-                    <div id="click-per">
-                        <span>点击特效</span>
-                        <div class="button">
-                            <input type="checkbox" id="button-3" class="checkbox" />
-                            <div class="knobs"></div>
-                            <div class="layer"></div>
+                    </li>
+                    <li>
+                        <div id="click-per">
+                            <span>点击特效</span>
+                            <div class="button">
+                                <input type="checkbox" id="button-3" class="checkbox" />
+                                <div class="knobs"></div>
+                                <div class="layer"></div>
+                            </div>
                        </div>
-                    </div>
-                </li>
-                <li>
-                    <div id="click-per">
-                        <span>确认访问页自动跳转</span>
-                        <div class="button">
-                            <input type="checkbox" id="btnDirectUrl" class="checkbox" />
-                            <div class="knobs"></div>
-                            <div class="layer"></div>
+                    </li>
+                    <li>
+                        <div id="click-per">
+                            <span>访问页自动跳转</span>
+                            <div class="button">
+                                <input type="checkbox" id="btnDirectUrl" class="checkbox" />
+                                <div class="knobs"></div>
+                                <div class="layer"></div>
+                            </div>
                        </div>
-                    </div>
-                </li>
-            </ul>
+                    </li>
+                </ul>
+            </div>
+            <div class="right">
+                <div id="clock">
+                    番茄钟
+                </div>
+            </div>
        </div>
        <button id="btnScreenshot">截图</button>
-        <iframe src="assets/html/pomodoro/popup.html" id="pomodoro" style="border: 0; height: 400px;"></iframe>
+        <iframe src="assets/html/pomodoro/popup.html" id="pomodoro" style="border: 0; height: 450px; display: none;"></iframe>
    </div>
    <script src="assets/js/lib/jquery.min.js"></script>
    <script src="assets/js/popup.js"></script>
 </body>

-</html>
+</html>