优化界面

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "relay-control",
+  "name": "relay-control1",
   "version": "0.1.0",
   "description": "IoT Relay Control Application",
   "main": "app.js",

src/App.vue

@@ -47,6 +47,9 @@ export default {
       isDrawerOpen: true,
     };
   },
+  mounted() {
+    document.title = '超级管理平台1.0';
+  },
   methods: {
     toggleDrawer() {
       this.isDrawerOpen = !this.isDrawerOpen;

src/components/DeviceManagement.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="device-management">
-    <h1>智能设备管理界面777</h1>
+    <h1>IOT设备管理界面</h1>
     <!-- 提示信息 -->
     <div v-if="message" :class="['message', messageType]" @click="closeMessage">
       {{ message }}

src/components/Login.vue

@@ -1,375 +1,339 @@
 <template>
-    <div class="login-container">
-      <div class="login-box">
-        <h1 class="login-title">欢迎登录</h1>
-        <form @submit.prevent="login" class="login-form">
+  <div class="login-container">
+    <div class="login-box">
+      <h1 class="login-title">欢迎登录</h1>
+      <form @submit.prevent="login" class="login-form">
+        <div class="form-group">
+          <label for="username" class="form-label">
+            <i class="fas fa-user icon"></i>
+            用户名
+          </label>
+          <input
+            v-model="username"
+            type="text"
+            id="username"
+            class="form-input"
+            placeholder="请输入用户名"
+            required
+          />
+        </div>
+        <div class="form-group">
+          <label for="password" class="form-label">
+            <i class="fas fa-lock icon"></i>
+            密码
+          </label>
+          <input
+            v-model="password"
+            type="password"
+            id="password"
+            class="form-input"
+            placeholder="请输入密码"
+            required
+          />
+        </div>
+        <button type="submit" class="login-button">登录</button>
+        <p v-if="errorMessage" class="error-message">{{ errorMessage }}</p>
+      </form>
+      <div class="login-footer">
+        <p>没有账号？<a href="#" @click="showRegister = true" class="register-link">不要注册</a></p>
+      </div>
+    </div>
+
+    <!-- 注册弹窗 -->
+    <div v-if="showRegister" class="register-overlay">
+      <div class="register-box">
+        <h2 class="register-title">注册新账号</h2>
+        <form @submit.prevent="register" class="register-form">
           <div class="form-group">
-            <label for="username" class="form-label">
+            <label for="register-username" class="form-label">
               <i class="fas fa-user icon"></i>
               用户名
             </label>
             <input
-              v-model="username"
+              v-model="registerUsername"
               type="text"
-              id="username"
+              id="register-username"
               class="form-input"
               placeholder="请输入用户名"
               required
             />
           </div>
           <div class="form-group">
-            <label for="password" class="form-label">
+            <label for="register-password" class="form-label">
               <i class="fas fa-lock icon"></i>
               密码
             </label>
             <input
-              v-model="password"
+              v-model="registerPassword"
               type="password"
-              id="password"
+              id="register-password"
               class="form-input"
               placeholder="请输入密码"
               required
             />
           </div>
-          <button type="submit" class="login-button">登录</button>
-          <p v-if="errorMessage" class="error-message">{{ errorMessage }}</p>
+          <button type="submit" class="register-button">注册</button>
+          <p v-if="registerErrorMessage" class="error-message">{{ registerErrorMessage }}</p>
         </form>
-        <div class="login-footer">
-          <p>没有账号？<a href="#" @click="showRegister = true" class="register-link">立即注册</a></p>
-        </div>
-      </div>
-  
-      <!-- 注册弹窗 -->
-      <div v-if="showRegister" class="register-overlay">
-        <div class="register-box">
-          <h2 class="register-title">注册新账号</h2>
-          <form @submit.prevent="register" class="register-form">
-            <div class="form-group">
-              <label for="register-username" class="form-label">
-                <i class="fas fa-user icon"></i>
-                用户名
-              </label>
-              <input
-                v-model="registerUsername"
-                type="text"
-                id="register-username"
-                class="form-input"
-                placeholder="请输入用户名"
-                required
-              />
-            </div>
-            <div class="form-group">
-              <label for="register-password" class="form-label">
-                <i class="fas fa-lock icon"></i>
-                密码
-              </label>
-              <input
-                v-model="registerPassword"
-                type="password"
-                id="register-password"
-                class="form-input"
-                placeholder="请输入密码"
-                required
-              />
-            </div>
-            <button type="submit" class="register-button">注册</button>
-            <p v-if="registerErrorMessage" class="error-message">{{ registerErrorMessage }}</p>
-          </form>
-          <button @click="showRegister = false" class="close-button">关闭</button>
-        </div>
+        <button @click="showRegister = false" class="close-button">关闭</button>
       </div>
     </div>
-  </template>
-  
-  <script>
-  export default {
-    name: 'LoginPage',
-    data() {
-      return {
-        username: '',
-        password: '',
-        errorMessage: '',
-        showRegister: false,
-        registerUsername: '',
-        registerPassword: '',
-        registerErrorMessage: '',
-      };
-    },
-    methods: {
-      async login() {
-        try {
-          const response = await fetch('/api/login', {
-            method: 'POST',
-            headers: {
-              'Content-Type': 'application/json',
-            },
-            body: JSON.stringify({
-              username: this.username,
-              password: this.password,
-            }),
-          });
-  
-          if (response.ok) {
-            const data = await response.json();
-            localStorage.setItem('token', data.token); // 存储 token
-            this.$router.push('/'); // 登录成功后跳转到首页
-          } else {
-            this.errorMessage = '用户名或密码错误';
-          }
-        } catch (error) {
-          this.errorMessage = '登录失败，请稍后重试';
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'LoginPage',
+  data() {
+    return {
+      username: '',
+      password: '',
+      errorMessage: '',
+      showRegister: false,
+      registerUsername: '',
+      registerPassword: '',
+      registerErrorMessage: '',
+    };
+  },
+  methods: {
+    async login() {
+      try {
+        const response = await fetch('/api/login', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            username: this.username,
+            password: this.password,
+          }),
+        });
+
+        if (response.ok) {
+          const data = await response.json();
+          localStorage.setItem('token', data.token); // 存储 token
+          this.$router.push('/'); // 登录成功后跳转到首页
+        } else {
+          this.errorMessage = '用户名或密码错误';
         }
-      },
-      async register() {
-        try {
-          const response = await fetch('/api/register', {
-            method: 'POST',
-            headers: {
-              'Content-Type': 'application/json',
-            },
-            body: JSON.stringify({
-              username: this.registerUsername,
-              password: this.registerPassword,
-            }),
-          });
-  
-          if (response.ok) {
-            await response.json(); // 移除未使用的 data 变量
-            alert('注册成功！');
-            this.showRegister = false; // 关闭注册弹窗
-          } else {
-            const errorData = await response.json();
-            this.registerErrorMessage = errorData.message || '注册失败，请稍后重试';
-          }
-        } catch (error) {
-          this.registerErrorMessage = '注册失败，请稍后重试';
+      } catch (error) {
+        this.errorMessage = '登录失败，请稍后重试';
+      }
+    },
+    async register() {
+      try {
+        const response = await fetch('/api/register', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            username: this.registerUsername,
+            password: this.registerPassword,
+          }),
+        });
+
+        if (response.ok) {
+          await response.json(); // 移除未使用的 data 变量
+          alert('注册成功！');
+          this.showRegister = false; // 关闭注册弹窗
+        } else {
+          const errorData = await response.json();
+          this.registerErrorMessage = errorData.message || '注册失败，请稍后重试';
         }
-      },
+      } catch (error) {
+        this.registerErrorMessage = '注册失败，请稍后重试';
+      }
     },
-  };
-  </script>
-  
-  <style>
-  /* 全局样式 */
-  body {
-    margin: 0;
-    font-family: 'Poppins', sans-serif;
-    background-color: #f5f5f5;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100vh;
-    color: #333;
-  }
-  
-  /* 登录容器 */
-  .login-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    height: 100%;
-  }
-  
-  /* 登录框 */
-  .login-box {
-    background: white;
-    padding: 40px;
-    border-radius: 12px;
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
-    width: 100%;
-    max-width: 400px;
-    text-align: center;
-    animation: fadeIn 0.5s ease-in-out;
-  }
-  
-  /* 注册弹窗 */
-  .register-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.5);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-  
-  .register-box {
-    background: white;
-    padding: 40px;
-    border-radius: 12px;
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
-    width: 100%;
-    max-width: 400px;
-    text-align: center;
-    position: relative;
-  }
-  
-  .close-button {
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    background: none;
-    border: none;
-    font-size: 16px;
-    cursor: pointer;
-    color: #666;
-  }
-  
-  .close-button:hover {
-    color: #333;
-  }
-  
-  /* 其他样式保持不变 */
-  </style>
-  
-  <style>
-  /* 引入 Font Awesome 图标库 */
-  @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');
-  
-  /* 全局样式 */
-  body {
-    margin: 0;
-    font-family: 'Poppins', sans-serif;
-    background-color: #f5f5f5; /* 灰白色背景 */
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100vh;
-    color: #333;
+  },
+};
+</script>
+
+<style>
+/* 引入 Font Awesome 图标库 */
+@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');
+
+/* 全局样式 */
+body {
+  margin: 0;
+  font-family: 'Poppins', sans-serif;
+  background-color: #f5f5f5; /* 灰白色背景 */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  color: #333;
+}
+
+/* 登录容器 */
+.login-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+/* 登录框 */
+.login-box {
+  background: white;
+  padding: 40px;
+  border-radius: 12px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* 更柔和的阴影 */
+  width: 100%;
+  max-width: 400px;
+  text-align: center;
+  animation: fadeIn 0.5s ease-in-out;
+}
+
+/* 登录标题 */
+.login-title {
+  font-size: 24px;
+  font-weight: 600;
+  margin-bottom: 20px;
+  color: #333;
+}
+
+/* 登录表单 */
+.login-form {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+/* 表单组 */
+.form-group {
+  text-align: left;
+}
+
+/* 表单标签 */
+.form-label {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  font-weight: 500;
+  margin-bottom: 8px;
+  color: #555;
+}
+
+/* 图标 */
+.icon {
+  margin-right: 8px;
+  color: #6a11cb;
+}
+
+/* 输入框 */
+.form-input {
+  width: 100%;
+  padding: 12px;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  font-size: 14px;
+  transition: border-color 0.3s ease, box-shadow 0.3s ease;
+}
+
+.form-input:focus {
+  border-color: #6a11cb;
+  box-shadow: 0 0 8px rgba(106, 17, 203, 0.2);
+  outline: none;
+}
+
+/* 登录按钮 */
+.login-button {
+  width: 100%;
+  padding: 12px;
+  background: linear-gradient(135deg, #6a11cb, #2575fc);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  font-size: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.3s ease, transform 0.2s ease;
+}
+
+.login-button:hover {
+  background: linear-gradient(135deg, #2575fc, #6a11cb);
+  transform: translateY(-2px);
+}
+
+.login-button:active {
+  transform: translateY(0);
+}
+
+/* 错误信息 */
+.error-message {
+  color: #ff4d4d;
+  font-size: 14px;
+  margin-top: 10px;
+}
+
+/* 登录页脚 */
+.login-footer {
+  margin-top: 20px;
+  font-size: 14px;
+  color: #666;
+}
+
+.login-footer a {
+  color: #6a11cb;
+  text-decoration: none;
+  font-weight: 500;
+}
+
+.login-footer a:hover {
+  text-decoration: underline;
+}
+
+/* 注册弹窗 */
+.register-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.register-box {
+  background: white;
+  padding: 40px;
+  border-radius: 12px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+  width: 100%;
+  max-width: 400px;
+  text-align: center;
+  position: relative;
+}
+
+/* 关闭按钮 */
+.close-button {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background: none;
+  border: none;
+  font-size: 16px;
+  cursor: pointer;
+  color: #666;
+}
+
+.close-button:hover {
+  color: #333;
+}
+
+/* 动画 */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-20px);
   }
-  
-  /* 登录容器 */
-  .login-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    height: 100%;
-  }
-  
-  /* 登录框 */
-  .login-box {
-    background: white;
-    padding: 40px;
-    border-radius: 12px;
-    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* 更柔和的阴影 */
-    width: 100%;
-    max-width: 400px;
-    text-align: center;
-    animation: fadeIn 0.5s ease-in-out;
-  }
-  
-  /* 登录标题 */
-  .login-title {
-    font-size: 24px;
-    font-weight: 600;
-    margin-bottom: 20px;
-    color: #333;
-  }
-  
-  /* 登录表单 */
-  .login-form {
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-  }
-  
-  /* 表单组 */
-  .form-group {
-    text-align: left;
-  }
-  
-  /* 表单标签 */
-  .form-label {
-    display: flex;
-    align-items: center;
-    font-size: 14px;
-    font-weight: 500;
-    margin-bottom: 8px;
-    color: #555;
-  }
-  
-  /* 图标 */
-  .icon {
-    margin-right: 8px;
-    color: #6a11cb;
-  }
-  
-  /* 输入框 */
-  .form-input {
-    width: 100%;
-    padding: 12px;
-    border: 1px solid #e0e0e0;
-    border-radius: 8px;
-    font-size: 14px;
-    transition: border-color 0.3s ease, box-shadow 0.3s ease;
-  }
-  
-  .form-input:focus {
-    border-color: #6a11cb;
-    box-shadow: 0 0 8px rgba(106, 17, 203, 0.2);
-    outline: none;
-  }
-  
-  /* 登录按钮 */
-  .login-button {
-    width: 100%;
-    padding: 12px;
-    background: linear-gradient(135deg, #6a11cb, #2575fc);
-    color: white;
-    border: none;
-    border-radius: 8px;
-    font-size: 16px;
-    font-weight: 500;
-    cursor: pointer;
-    transition: background 0.3s ease, transform 0.2s ease;
-  }
-  
-  .login-button:hover {
-    background: linear-gradient(135deg, #2575fc, #6a11cb);
-    transform: translateY(-2px);
-  }
-  
-  .login-button:active {
+  to {
+    opacity: 1;
     transform: translateY(0);
   }
-  
-  /* 错误信息 */
-  .error-message {
-    color: #ff4d4d;
-    font-size: 14px;
-    margin-top: 10px;
-  }
-  
-  /* 登录页脚 */
-  .login-footer {
-    margin-top: 20px;
-    font-size: 14px;
-    color: #666;
-  }
-  
-  .login-footer a {
-    color: #6a11cb;
-    text-decoration: none;
-    font-weight: 500;
-  }
-  
-  .login-footer a:hover {
-    text-decoration: underline;
-  }
-  
-  /* 动画 */
-  @keyframes fadeIn {
-    from {
-      opacity: 0;
-      transform: translateY(-20px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-  </style>
+}
+</style>