feat(admin): 添加用户管理相关文件

添加用户管理视图、API和状态管理文件
2026-03-28 14:37:29 +08:00
commit 08ea5fbe98
1643 changed files with 255646 additions and 0 deletions
@@ -0,0 +1,180 @@
+<template>
+  <div class="login-container">
+    <div class="login-box">
+      <div class="login-header">
+        <h1 class="login-title">{{ t('menu.systemManagement') }}</h1>
+        <p class="login-subtitle">{{ t('auth.login') }}</p>
+      </div>
+
+      <a-form
+        ref="formRef"
+        :model="formState"
+        :rules="formRules"
+        @finish="handleLogin"
+        class="login-form"
+        data-testid="login-form"
+      >
+        <a-form-item name="username">
+          <a-input
+            v-model:value="formState.username"
+            :placeholder="t('auth.usernamePlaceholder')"
+            data-testid="username-input"
+            size="large"
+          >
+            <template #prefix>
+              <UserOutlined />
+            </template>
+          </a-input>
+        </a-form-item>
+
+        <a-form-item name="password">
+          <a-input-password
+            v-model:value="formState.password"
+            :placeholder="t('auth.passwordPlaceholder')"
+            data-testid="password-input"
+            size="large"
+          >
+            <template #prefix>
+              <LockOutlined />
+            </template>
+          </a-input-password>
+        </a-form-item>
+
+        <a-form-item>
+          <a-checkbox v-model:checked="formState.remember" data-testid="remember-checkbox">
+            {{ t('auth.rememberMe') }}
+          </a-checkbox>
+        </a-form-item>
+
+        <a-form-item>
+          <a-button
+            type="primary"
+            html-type="submit"
+            size="large"
+            block
+            :loading="loading"
+            data-testid="login-button"
+          >
+            {{ t('auth.login') }}
+          </a-button>
+        </a-form-item>
+      </a-form>
+
+      <div class="login-footer">
+        <p class="footer-text">
+          {{ t('auth.username') }}: admin / {{ t('auth.password') }}: admin123
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import { message } from 'ant-design-vue';
+import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
+import type { FormInstance } from 'ant-design-vue';
+import { useAuthStore } from '@/stores/auth.store';
+
+const router = useRouter();
+const { t } = useI18n();
+const authStore = useAuthStore();
+
+const formRef = ref<FormInstance>();
+const loading = ref(false);
+
+const formState = reactive({
+  username: '',
+  password: '',
+  remember: false
+});
+
+const formRules = {
+  username: [
+    { required: true, message: t('auth.usernameRequired'), trigger: 'blur' },
+    { min: 3, max: 20, message: t('validation.minLength', { field: t('auth.username'), min: 3, max: 20 }), trigger: 'blur' }
+  ],
+  password: [
+    { required: true, message: t('auth.passwordRequired'), trigger: 'blur' },
+    { min: 6, max: 20, message: t('validation.minLength', { field: t('auth.password'), min: 6, max: 20 }), trigger: 'blur' }
+  ]
+};
+
+async function handleLogin() {
+  try {
+    loading.value = true;
+    await authStore.login({
+      username: formState.username,
+      password: formState.password
+    });
+    message.success(t('auth.loginSuccess'));
+    router.push('/');
+  } catch (error: any) {
+    message.error(error.message || t('auth.loginFailed'));
+  } finally {
+    loading.value = false;
+  }
+}
+</script>
+
+<style scoped>
+.login-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.login-box {
+  width: 100%;
+  max-width: 400px;
+  padding: 48px 40px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.login-header {
+  text-align: center;
+  margin-bottom: 32px;
+}
+
+.login-title {
+  font-size: 28px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 8px;
+}
+
+.login-subtitle {
+  font-size: 14px;
+  color: #666;
+  margin: 0;
+}
+
+.login-form {
+  margin-top: 24px;
+}
+
+.login-footer {
+  margin-top: 24px;
+  text-align: center;
+}
+
+.footer-text {
+  font-size: 12px;
+  color: #999;
+  margin: 0;
+}
+
+:deep(.ant-input-affix-wrapper) {
+  padding: 8px 11px;
+}
+
+:deep(.ant-input-affix-wrapper-focused) {
+  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
+}
+</style>