src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <div id="app">
     <!-- 登录页面不显示布局 -->
     <router-view v-if="$route.path === '/login'" />
     <!-- 主应用布局 -->
@@ -14,13 +14,7 @@ import AppLayout from '@/components/AppLayout.vue'
 </script>
 
 <style>
-/* 全局样式重置 */
+#app {
-body {
-  margin: 0;
-  padding: 0;
-}
-
-.app-container {
   font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
 }
-</style>
+</style>

src/api/index.js

@@ -64,4 +64,4 @@ api.interceptors.response.use(
   }
 )
 
-export default api
+export default api

src/api/user.js

@@ -51,4 +51,4 @@ export const userApi = {
   deleteUsers(ids) {
     return api.delete('/sysUser/batch', { data: { ids } })
   }
-}
+}

src/views/Login.vue

@@ -6,45 +6,50 @@
         <p class="login-subtitle">部署管理系统</p>
       </div>
       
-      <div class="login-form">
+      <t-form 
-                 <div class="form-item">
+        ref="form" 
-           <t-input
+        :data="formData" 
-             v-model="formData.account"
+        :rules="rules"
-             placeholder="请输入用户名"
+        @submit="handleSubmit"
-             size="large"
+      >
-           >
+        <t-form-item name="username">
-             <template #prefix-icon>
+          <t-input
-               <t-icon name="user" />
+            v-model="formData.username"
-             </template>
+            placeholder="请输入用户名"
-           </t-input>
+            size="large"
-         </div>
+          >
-         
+            <template #prefix-icon>
-         <div class="form-item">
+              <t-icon name="user" />
-           <t-input
+            </template>
-             v-model="formData.password"
+          </t-input>
-             type="password"
+        </t-form-item>
-             placeholder="请输入密码"
-             size="large"
-             @keyup.enter="handleSubmit"
-           >
-             <template #prefix-icon>
-               <t-icon name="lock-on" />
-             </template>
-           </t-input>
-         </div>
         
-        <div class="form-item">
+        <t-form-item name="password">
+          <t-input
+            v-model="formData.password"
+            type="password"
+            placeholder="请输入密码"
+            size="large"
+            @keyup.enter="handleSubmit"
+          >
+            <template #prefix-icon>
+              <t-icon name="lock-on" />
+            </template>
+          </t-input>
+        </t-form-item>
+        
+        <t-form-item>
           <t-button
+            type="submit"
             theme="primary"
             size="large"
             block
             :loading="loading"
-            @click="handleSubmit"
           >
             登录
           </t-button>
-        </div>
+        </t-form-item>
-      </div>
+      </t-form>
     </div>
   </div>
 </template>
@@ -53,29 +58,30 @@
 import { ref, reactive } from 'vue'
 import { useRouter } from 'vue-router'
 import { MessagePlugin } from 'tdesign-vue-next'
-
 import { userApi } from '@/api/user'
 import auth from '@/utils/auth'
 
 const router = useRouter()
+const form = ref()
 const loading = ref(false)
 
 const formData = reactive({
-  account: '',
+  username: '',
-  password: '',
+  password: ''
-  checked: true
 })
 
+const rules = {
+  username: [
+    { required: true, message: '请输入用户名', type: 'error' }
+  ],
+  password: [
+    { required: true, message: '请输入密码', type: 'error' }
+  ]
+}
+
 const handleSubmit = async () => {
-  // 简单的表单验证
+  const valid = await form.value.validate()
-  if (!formData.account.trim()) {
+  if (!valid) return
-    MessagePlugin.error('请输入用户名')
-    return
-  }
-  if (!formData.password.trim()) {
-    MessagePlugin.error('请输入密码')
-    return
-  }
   
   loading.value = true
   
@@ -112,6 +118,7 @@ const handleSubmit = async () => {
   align-items: center;
   justify-content: center;
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  padding: 20px;
 }
 
 .login-card {
@@ -141,18 +148,10 @@ const handleSubmit = async () => {
   margin: 0;
 }
 
-.login-form {
+:deep(.t-form-item) {
-  margin-top: 32px;
-}
-
-.form-item {
   margin-bottom: 24px;
 }
 
-.form-item:last-child {
-  margin-bottom: 0;
-}
-
 :deep(.t-input) {
   border-radius: 8px;
 }

vite.config.js

@@ -17,11 +17,11 @@ export default defineConfig({
       '/api': {
         target: 'http://localhost:3000',
         changeOrigin: true,
-        rewrite: (path) => path
+        rewrite: (path) => path.replace(/^\/api/, '')
       }
     }
   },
   build: {
     outDir: 'dist'
   }
-})
+})