feat:增加了黑暗模式支持

webContext/css/styleEr.css

@@ -0,0 +1,34 @@
+/* 加载动画样式 - 蓝色渐变 */
+.loader-wrapper {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(135deg, #e6f7ff 0%, #0f4c81 100%);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 9999;
+    transition: opacity 0.5s ease;
+}
+
+.loader {
+    border: 5px solid rgba(255, 255, 255, 0.3);
+    border-radius: 50%;
+    border-top: 5px solid #ffffff;
+    width: 50px;
+    height: 50px;
+    animation: spin 1s linear infinite;
+    backdrop-filter: blur(2px);
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+/* 初始隐藏页面内容 */
+body {
+    visibility: hidden;
+}

webContext/home.html

@@ -12,7 +12,16 @@
 	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 	<title>KIFT</title>
 	<!-- Bootstrap基本框架 -->
-	<link rel="stylesheet" href="css/bootstrap.min.css">
+	<link rel="stylesheet" href="/css/styleEr.css">
+	<link rel="preload" href="/css/bootstrap.min.css" as="style">
+	<link rel="preload" href="/css/bootstrap.min.dark.css" as="style">
+   	<script src="/css/styleEr.js"></script>
+  	<script>
+    	// 初始化页面样式
+   	 document.addEventListener('DOMContentLoaded', () => {
+   	     initStyle();
+  	  });
+	</script>
 	<!-- 全局样式 -->
 	<link rel="stylesheet" href="css/overrall.min.css">
 	<!-- 图片查看器插件 -->
@@ -40,6 +49,9 @@
 							</small>
 						</em>
 					</span> <span id="tb" class="rightbtn hidden-xs"></span>
+                  			<button class="btn btn-link" onclick="changeStyle()">
+						更换主题 <span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
+					</button>
 					<button class="btn btn-link rightbtn hidden-xs" onclick="refreshFolderView()">
 						刷新 <span class="glyphicon glyphicon-repeat" aria-hidden="true"></span>
 					</button>
@@ -52,6 +64,9 @@
 			<div class="col-md-12">
 				<p class="subtitle visible-xs-block">
 					<span id="tb2"></span>
+                  			<button class="btn btn-link" onclick="changeStyle()">
+						更换主题 <span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
+					</button>
 					<button class="btn btn-link" onclick="refreshFolderView()">
 						刷新 <span class="glyphicon glyphicon-repeat" aria-hidden="true"></span>
 					</button>
@@ -817,4 +832,4 @@ <h4 class="modal-title" id="noticeModalLabel">公告信息</h4>
 <!-- 页面操作定义 -->
 <script type="text/javascript" src="js/home.min.js"></script>
 
-</html>
+</html>

webContext/js/styleEr.js

@@ -0,0 +1,85 @@
+// 显示加载动画
+function showLoader() {
+    const loader = document.createElement('div');
+    loader.className = 'loader-wrapper';
+    loader.innerHTML = '<div class="loader"></div>';
+    document.body.appendChild(loader);
+    return loader;
+}
+
+// 隐藏加载动画
+function hideLoader(loader) {
+    if (loader) {
+        loader.style.opacity = '0';
+        setTimeout(() => {
+            if (loader.parentNode) {
+                loader.parentNode.removeChild(loader);
+            }
+        }, 500);
+    }
+}
+
+// 加载 CSS 文件
+function loadCSS(url, callback) {
+    const link = document.createElement('link');
+    link.rel = 'stylesheet';
+    link.href = url;
+
+    if (callback) {
+        link.onload = () => callback(true);
+        link.onerror = () => {
+            console.error('Failed to load CSS:', url);
+            callback(false);
+        };
+    }
+
+    document.head.appendChild(link);
+    return link;
+}
+
+// 获取当前样式 URL
+function getUrl(defaultUrl = '/css/bootstrap.min.css') {
+    return localStorage.getItem('styleUrl') || defaultUrl;
+}
+
+// 设置样式 URL
+function setUrl(url) {
+    localStorage.setItem('styleUrl', url);
+}
+
+
+
+// 初始化页面样式
+function initStyle(defaultUrl = '/css/bootstrap.min.css', alternateUrl = '/css/bootstrap.min.dark.css') {
+    // 预加载两种样式
+    const preload1 = document.createElement('link');
+    preload1.rel = 'preload';
+    preload1.as = 'style';
+    preload1.href = defaultUrl;
+    document.head.appendChild(preload1);
+
+    const preload2 = document.createElement('link');
+    preload2.rel = 'preload';
+    preload2.as = 'style';
+    preload2.href = alternateUrl;
+    document.head.appendChild(preload2);
+
+    const url = getUrl(defaultUrl);
+    const loader = showLoader();
+
+    loadCSS(url, (success) => {
+        if (success) {
+            document.body.style.visibility = 'visible';
+        }
+        hideLoader(loader);
+    });
+}
+
+// 切换样式
+function changeStyle(defaultUrl = '/css/bootstrap.min.css', alternateUrl = '/css/bootstrap.min.orange.css') {
+    const currentUrl = getUrl(defaultUrl);
+    const newUrl = currentUrl === defaultUrl ? alternateUrl : defaultUrl;
+
+    setUrl(newUrl);
+    window.location.reload();
+}

webContext/prv/login.html

@@ -9,7 +9,18 @@
 	content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
 	name="viewport" />
 <title>KIFT</title>
-<link rel="stylesheet" href="css/bootstrap.min.css">
+<link rel="stylesheet" href="/styleEr.css">
+<!-- Bootstrap基本框架 -->
+<!-- 在<head>中预加载两种CSS -->
+<link rel="preload" href="/css/bootstrap.min.css" as="style">
+<link rel="preload" href="/css/bootstrap.min.dark.css" as="style">
+<script src="/styleEr.js"></script>
+<script>
+// 初始化页面样式
+document.addEventListener('DOMContentLoaded', () => {
+  initStyle();
+});
+</script>
 <link rel="stylesheet" href="css/overrall.min.css">
 <link rel="icon" type="image/x-icon" href="css/icon.png" />
 <!--[if lt IE 9]>
@@ -71,6 +82,8 @@ <h3 class="panel-title">请登录</h3>
 									type="button" value="立即注册"
 									onclick="window.location.href = '/prv/signup.html'"> <br />
 							</div>
+							<input id="loginBtn" class="form-control btn-link"
+								type="button" value="更换主题" onclick="changeStyle()"> <br />
 						</form>
 					</div>
 				</div>
@@ -83,4 +96,4 @@ <h3 class="panel-title">请登录</h3>
 <script type="text/javascript" src="js/bootstrap.min.js"></script>
 <script type="text/javascript" src="js/jsencrypt.min.js"></script>
 <script type="text/javascript" src="js/login.js"></script>
-</html>
+</html>