🎨 改进登录页面样式

- 添加移动端和超大屏幕的媒体查询
- 调整侧边栏链接的注释格式
- 统一使用ml-3替代内联padding样式
- 优化表单布局的列宽设置

app/static/css/dashboard.css

@@ -3,19 +3,34 @@ body {
   padding-bottom: 110px;
 }
 
+@media (max-width: 768px) {
+  .container-fluid {
+    padding-right: 5px;
+    padding-left: 5px;
+  }
+}
+
+@media (min-width: 1360px) {
+  .container-fluid {
+    max-width: 1360px;
+    margin: 0 auto;
+  }
+}
+
 .bottom-buttons {
   z-index: 99;
   position: fixed;
-  right: 40px;
-  bottom: 40px;
+  left: 50%;
+  bottom: 20px;
   background-color: transparent;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  transform: translateX(-50%);
 }
 
 .bottom-buttons button {
   border-radius: 50%;
-  margin: 5px 0;
+  margin: 0 10px;
   width: 50px;
   height: 50px;
   display: flex;
@@ -89,11 +104,13 @@ table.jsoneditor-tree>tbody>tr.jsoneditor-expandable:first-child {
   font-size: medium;
   color: #333;
   padding: 10px;
-  transition: background-color 0.3s ease; /* 添加过渡效果 */
+  transition: background-color 0.3s ease;
+  /* 添加过渡效果 */
 }
 
 .sidebar .nav-link:hover {
-  background-color: #e0f0ff; /* 改变背景颜色 */
+  background-color: #e0f0ff;
+  /* 改变背景颜色 */
 }
 
 .sidebar .nav-link i {

app/templates/index.html

@@ -51,7 +51,8 @@
           </ul>
           <div class="text-center" style="position: absolute; bottom: 32px; width: 100%; font-size: small;">
             <p><a class="" target="_blank" href="https://github.com/Cp0204/quark-auto-save/wiki"><i class="bi bi-wechat"></i> 使用交流</a></p>
-            <p><a target="_blank" href="https://github.com/Cp0204/quark-auto-save"><i class="bi bi-github"></i> quark-auto-save</a><br><span v-html="versionTips"></span></p>
+            <p><a target="_blank" href="https://github.com/Cp0204/quark-auto-save"><i class="bi bi-github"></i> quark-auto-save</a></p>
+            <p><span v-html="versionTips"></span></p>
           </div>
         </div>
       </nav>
@@ -126,13 +127,13 @@
             </div>
             <div v-for="(plugin, pluginName) in getAvailablePlugins(formData.plugins)" :key="pluginName">
               <div class="form-group row mb-0" style="display:flex; align-items:center;">
-                <div class="col-9" data-toggle="collapse" :data-target="'#collapse_'+pluginName" aria-expanded="true" :aria-controls="'collapse_'+pluginName">
+                <div data-toggle="collapse" :data-target="'#collapse_'+pluginName" aria-expanded="true" :aria-controls="'collapse_'+pluginName">
                   <div class="btn btn-block text-left">
                     <i class="bi bi-caret-right-fill"></i> <span v-html="`${pluginName}`"></span>
                   </div>
                 </div>
               </div>
-              <div class="collapse" :id="'collapse_'+pluginName" style="padding-left:2em">
+              <div class="collapse ml-3" :id="'collapse_'+pluginName">
                 <div v-for="(value, key) in plugin" :key="key" class="form-group row">
                   <label class="col-sm-2 col-form-label" v-html="key"></label>
                   <div class="col-sm-10">
@@ -191,7 +192,7 @@
                     <button type="button" class="btn btn-outline-danger" @click="removeTask(index)" title="删除此任务"><i class="bi bi-trash3-fill"></i></button>
                   </div>
                 </div>
-                <div class="collapse" :id="'collapse_'+index" style="padding-left:2em">
+                <div class="collapse ml-3" :id="'collapse_'+index">
                   <div class="alert alert-warning" role="alert" v-if="task.shareurl_ban" v-html="task.shareurl_ban"></div>
                   <div class="form-group row">
                     <label class="col-sm-2 col-form-label">任务名称</label>
@@ -326,7 +327,7 @@
           </div>
 
           <div class="bottom-buttons">
-            <button class="btn btn-success" title="保存 CTRL+S"><i class="bi bi-save"></i></button>
+            <button class="btn btn-success" title="保存 CTRL+S"><i class="bi bi-floppy2-fill"></i></button>
             <button type="button" class="btn btn-primary" title="运行 CTRL+R" @click="runScriptNow()"><i class="bi bi-play-fill"></i></button>
             <button type="button" class="btn btn-info" @click="scrollToX(0)" @dblclick="scrollToX()" data-toggle="tooltip" data-placement="top" title="单击回顶，双击到底"><i class="bi bi-chevron-bar-up"></i></button>
           </div>

app/templates/login.html

@@ -1,33 +1,84 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="zh-CN">
 
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>登录</title>
-    <!-- 引入 Bootstrap CSS -->
     <link rel="stylesheet" href="./static/css/bootstrap.min.css">
+    <link rel="stylesheet" href="./static/css/bootstrap-icons.min.css">
+    <style>
+        body {
+            background: linear-gradient(135deg, #c4d7ff 0%, #7996ff 100%);
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+        }
+
+        .login-card {
+            max-width: 400px;
+            width: 100%;
+            margin: 0 auto;
+            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+            border-radius: 10px;
+            overflow: hidden;
+        }
+
+        .login-header {
+            background: rgba(255, 255, 255, 0.9);
+            padding: 1rem 2rem;
+            text-align: center;
+        }
+
+        .login-body {
+            background: #fff;
+            padding: 2rem;
+        }
+
+        .btn {
+            border-radius: 20px;
+            padding: 10px 20px;
+            width: 100%;
+        }
+    </style>
 </head>
 
 <body>
-    <div class="container mt-5">
-        <h1 class="mb-4">登录</h1>
-        {% if message %}
-        <div class="alert alert-danger" role="alert">
-            [[ message ]]
+    <div class="container">
+        <div class="login-card">
+            <div class="login-header">
+                <h1 class="mb-3">登录</h1>
+                <p class="text-muted">欢迎回来，请登录您的账户</p>
+            </div>
+            <div class="login-body">
+                {% if message %}
+                <div class="alert alert-danger text-center" role="alert">
+                    [[ message ]]
+                </div>
+                {% endif %}
+                <form action="/login" method="POST">
+                    <div class="form-group mb-3">
+                        <label for="username" class="form-label">用户名</label>
+                        <div class="input-group">
+                            <div class="input-group-prepend">
+                                <span class="input-group-text"><i class="bi bi-person-fill"></i></span>
+                            </div>
+                            <input type="text" class="form-control" id="username" name="username" required>
+                        </div>
+                    </div>
+                    <div class="form-group mb-4">
+                        <label for="password" class="form-label">密码</label>
+                        <div class="input-group">
+                            <div class="input-group-prepend">
+                                <span class="input-group-text"><i class="bi bi-lock-fill"></i></span>
+                            </div>
+                            <input type="password" class="form-control" id="password" name="password" required>
+                        </div>
+                    </div>
+                    <button type="submit" class="btn btn-primary">登录</button>
+                </form>
+            </div>
         </div>
-        {% endif %}
-        <form action="/login" method="POST">
-            <div class="form-group">
-                <label for="username">用户名</label>
-                <input type="text" class="form-control" id="username" name="username" required>
-            </div>
-            <div class="form-group">
-                <label for="password">密码</label>
-                <input type="password" class="form-control" id="password" name="password" required>
-            </div>
-            <button type="submit" class="btn btn-primary">登录</button>
-        </form>
     </div>
 </body>