Fix: Custom Local Wallpaper Styles

样式优化，增加悬浮提示信息

index.html

@@ -148,7 +148,7 @@ <h3>设置</h3>
                 <label>
                     <span>自定义背景：</span>
                     <select name="background" data-key="background_type"></select>
-                    <span class="custom-background-preview" hidden></span>
+                    <span class="custom-background-preview" aria-label="选择图片" hidden></span>
                     <input type="file" id="custom-background-input" hidden />
                 </label>
                 <label>
@@ -159,7 +159,7 @@ <h3>设置</h3>
                     <span>自动聚焦到搜索框：</span>
                     <input name="auto_focus" type="checkbox" class="switch" />
                 </label>
-                
+
                 <p class="btn-group">
                     <button class="btn small primary" id="set-reset" title="重置个人设置为默认值">重置为默认</button>
                     <button class="btn small transparent" id="set-input" title="导入个人设置">导入</button>

static/main.css

@@ -2,7 +2,7 @@
 
 # KStart
 # By: Dreamer-Paul
-# Last Update: 2024.7.24
+# Last Update: 2024.7.29
 
 一个简洁轻巧的起始页
 
@@ -35,6 +35,7 @@
     background-color: #222;
 
     --gray: #555;
+    --lighter-gray: #333;
     --shadow: 0 0 5em rgba(255, 255, 255, .1);
     --shadow-thin: 0 0 1em rgba(255, 255, 255, .3);
     --shadow-thick: 0 0 5em rgba(255, 255, 255, .2);
@@ -472,12 +473,27 @@ body.low-animate .the-window.closed{
 .custom-background-preview {
   height: 8em;
   cursor: copy;
-  display: block;
+  display: flex;
   margin-top: 1em;
+  overflow: hidden;
+  text-align: center;
   border-radius: var(--radius);
-  background: center/cover no-repeat;
+  background: rgba(0, 0, 0, .05) center/cover no-repeat;
   border: var(--border-width) var(--gray) solid;
 }
+.custom-background-preview::before {
+  width: 100%;
+  opacity: 0;
+  display: block;
+  font-size: 1.2em;
+  line-height: 8rem;
+  content: attr(aria-label);
+  background-color: var(--input-bg);
+  transition: opacity .3s;
+}
+.custom-background-preview:not([style])::before, .custom-background-preview:hover::before {
+  opacity: .6;
+}
 
 .the-drawer{
   top: 0;

static/main.js

@@ -2,7 +2,7 @@
 
 # KStart
 # By: Dreamer-Paul
-# Last Update: 2024.7.24
+# Last Update: 2024.7.29
 
 一个简洁轻巧的起始页
 
@@ -152,17 +152,17 @@ function KStart() {
     initDB: () => {
       return new Promise((resolve, reject) => {
         const request = indexedDB.open("wallpaper", 1);
-  
+
         request.onerror = (e) => {
           reject();
           console.error("Database error:", e.target.errorCode);
         };
-  
+
         request.onsuccess = (e) => {
           data.db = e.target.result;
           resolve();
         };
-  
+
         request.onupgradeneeded = (e) => {
           data.db = e.target.result;
           data.db.createObjectStore("images", { keyPath: "id" });
@@ -174,11 +174,11 @@ function KStart() {
         if (data.custom_background) {
           resolve(data.custom_background);
         }
-  
+
         const transaction = data.db.transaction(["images"], "readonly");
         const objectStore = transaction.objectStore("images");
         const getRequest = objectStore.get(1);
-  
+
         getRequest.onsuccess = () => {
           if (getRequest.result) {
             data.custom_background = getRequest.result.data;
@@ -779,24 +779,36 @@ function KStart() {
     }
   };
 
+  // 异步数据请求
+  const services = {
+    getSiteList: () => (
+      fetch("site.json").then((res) => res.json())
+    ),
+    getUserSettings: (user) => {
+      const url = `https://dreamer-paul.github.io/KStart-Sites/${user}.json`;
+
+      return fetch(url).then((res) => res.json());
+    },
+  };
+
+  // 从这里开始初始化
   modifys.initBody();
 
-  // 初始化，先获取预设站点数据
-  fetch("site.json").then((res) => res.json()).then((res) => {
+  services.getSiteList().then((res) => {
     data.sites = res;
   }).then(() => {
     const user = methods.getUser();
 
     // 读取在线或本地数据
     if (user) {
-      const url = `https://dreamer-paul.github.io/KStart-Sites/${user}.json`;
-
-      console.warn("Web mode");
-      data.env = "web";
+      return services.getUserSettings(user).then((res) => {
+        data.env = "web";
 
-      return fetch(url).then((res) => res.json()).catch(err => {
+        return res;
+      }).catch((err) => {
         data.env = "local";
         ks.notice("获取数据出错啦", { color: "red" });
+
         return methods.getStorage();
       });
     }