xto-fronted 0.1.1 → 0.1.3

package/src/views/login/index.vue

@@ -1,248 +1,141 @@
-<script setup lang="ts">
-import { ref, reactive } from 'vue'
-import { useRouter } from 'vue-router'
-import { Button } from '@xto/base'
-import { Form, FormItem, Input, Checkbox } from '@xto/form'
-import { Message } from '@xto/feedback'
-import { useAuthStore } from '@/stores/auth'
-import { useUserStore } from '@/stores/user'
-import { useMenuStore } from '@/stores/menu'
-
-const router = useRouter()
-const authStore = useAuthStore()
-const userStore = useUserStore()
-const menuStore = useMenuStore()
-
-const loading = ref(false)
-const rememberMe = ref(false)
-
-const formData = reactive({
-  username: 'admin',
-  password: '123456'
-})
-
-const rules: Record<string, any[]> = {
-  username: [
-    { required: true, message: '请输入用户名', trigger: 'blur' }
-  ],
-  password: [
-    { required: true, message: '请输入密码', trigger: 'blur' },
-    { min: 6, message: '密码长度至少6位', trigger: 'blur' }
-  ]
-}
-
-const formRef = ref()
-
-// 登录
-const handleLogin = async () => {
-  try {
-    await formRef.value?.validate()
-    loading.value = true
-
-    // Mock 登录
-    setTimeout(() => {
-      // 设置 token
-      authStore.login({
-        token: 'mock_token_' + Date.now(),
-        refreshToken: 'mock_refresh_token',
-        expireTime: Date.now() + 7 * 24 * 60 * 60 * 1000
-      })
-
-      // 设置用户信息
-      userStore.setUserInfo({
-        id: 1,
-        username: formData.username,
-        nickname: '管理员',
-        avatar: '',
-        email: 'admin@example.com',
-        phone: '13800138000',
-        status: 1,
-        roles: ['admin'],
-        permissions: ['*'],
-        createTime: new Date().toISOString()
-      })
-
-      // 设置菜单
-      menuStore.setMenuList([
-        {
-          id: 1,
-          name: 'Dashboard',
-          path: '/dashboard',
-          component: 'dashboard/index',
-          icon: 'dashboard',
-          title: '仪表盘',
-          keepAlive: true,
-          affix: true
-        },
-        {
-          id: 2,
-          name: 'System',
-          path: '/system',
-          redirect: '/system/user',
-          icon: 'setting',
-          title: '系统管理',
-          children: [
-            {
-              id: 21,
-              name: 'SystemUser',
-              path: '/system/user',
-              component: 'system/user/index',
-              icon: 'user',
-              title: '用户管理',
-              keepAlive: true
-            },
-            {
-              id: 22,
-              name: 'SystemRole',
-              path: '/system/role',
-              component: 'system/role/index',
-              icon: 'role',
-              title: '角色管理',
-              keepAlive: true
-            },
-            {
-              id: 23,
-              name: 'SystemMenu',
-              path: '/system/menu',
-              component: 'system/menu/index',
-              icon: 'menu',
-              title: '菜单管理',
-              keepAlive: true
-            }
-          ]
-        }
-      ])
-
-      Message.success('登录成功')
-      router.push('/')
-      loading.value = false
-    }, 1000)
-  } catch (error) {
-    loading.value = false
-  }
-}
-</script>
-
-<template>
-  <div class="login">
-    <div class="login__container">
-      <div class="login__header">
-        <img src="/vite.svg" alt="Logo" class="login__logo" />
-        <h1 class="login__title">Xto Demo</h1>
-        <p class="login__subtitle">后台管理系统</p>
-      </div>
-
-      <Form
-        ref="formRef"
-        :model="formData"
-        :rules="rules"
-        class="login__form"
-        label-width="0"
-      >
-        <FormItem prop="username">
-          <Input
-            v-model="formData.username"
-            placeholder="用户名"
-            prefix-icon="👤"
-            size="large"
-          />
-        </FormItem>
-
-        <FormItem prop="password">
-          <Input
-            v-model="formData.password"
-            type="password"
-            placeholder="密码"
-            prefix-icon="🔒"
-            size="large"
-            show-password
-            @keyup.enter="handleLogin"
-          />
-        </FormItem>
-
-        <FormItem>
-          <Checkbox v-model="rememberMe">记住我</Checkbox>
-        </FormItem>
-
-        <FormItem>
-          <Button
-            type="primary"
-            size="large"
-            :loading="loading"
-            class="login__submit"
-            @click="handleLogin"
-          >
-            登录
-          </Button>
-        </FormItem>
-      </Form>
-
-      <div class="login__footer">
-        <p>提示: 任意用户名密码即可登录 (Mock 模式)</p>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.login {
-  width: 100%;
-  min-height: 100vh;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  padding-right: 15%;
-  background: linear-gradient(135deg, var(--color-primary-light-9) 0%, var(--color-primary-light-7) 100%);
-
-  &__container {
-    width: 400px;
-    padding: 40px;
-    background-color: var(--bg-color);
-    border-radius: var(--border-radius-large);
-    box-shadow: var(--box-shadow-dark);
-  }
-
-  &__header {
-    text-align: center;
-    margin-bottom: 30px;
-  }
-
-  &__logo {
-    width: 60px;
-    height: 60px;
-  }
-
-  &__title {
-    font-size: 28px;
-    font-weight: 600;
-    color: var(--color-primary);
-    margin: 15px 0 5px;
-  }
-
-  &__subtitle {
-    font-size: 14px;
-    color: var(--color-text-secondary);
-  }
-
-  &__form {
-    :deep(.t-form-item) {
-      margin-bottom: 20px;
-    }
-
-    :deep(.x-input__prefix) {
-      margin-right: 8px;
-    }
-  }
-
-  &__submit {
-    width: 100%;
-  }
-
-  &__footer {
-    text-align: center;
-    margin-top: 20px;
-    font-size: 12px;
-    color: var(--color-text-placeholder);
-  }
-}
+<script setup lang="ts">
+/**
+ * 登录页面
+ * 使用统一的 useApp hooks
+ */
+import { ref, reactive } from 'vue'
+import { Button } from '@xto/base'
+import { Form, FormItem, Input } from '@xto/form'
+import { useApp } from '@/composables'
+
+const { login, loading } = useApp()
+
+const formData = reactive({
+  uid: '',
+  password: ''
+})
+
+const rules: Record<string, any[]> = {
+  uid: [
+    { required: true, message: '请输入账号', trigger: 'blur' }
+  ],
+  password: [
+    { required: true, message: '请输入密码', trigger: 'blur' }
+  ]
+}
+
+const formRef = ref()
+
+// 登录
+const handleLogin = async () => {
+  try {
+    await formRef.value?.validate()
+    await login(formData.uid, formData.password)
+  } catch (error) {
+    console.error('登录失败', error)
+  }
+}
+</script>
+
+<template>
+  <div class="login">
+    <div class="login__container">
+      <div class="login__header">
+        <img src="/vite.svg" alt="Logo" class="login__logo" />
+        <h1 class="login__title">Analysis Web</h1>
+        <p class="login__subtitle">后台管理系统</p>
+      </div>
+
+      <Form
+        ref="formRef"
+        :model="formData"
+        :rules="rules"
+        class="login__form"
+        label-width="0"
+      >
+        <FormItem prop="uid">
+          <Input
+            v-model="formData.uid"
+            placeholder="请输入账号"
+            size="large"
+          />
+        </FormItem>
+
+        <FormItem prop="password">
+          <Input
+            v-model="formData.password"
+            type="password"
+            placeholder="请输入密码"
+            size="large"
+            show-password
+            @keyup.enter="handleLogin"
+          />
+        </FormItem>
+
+        <FormItem>
+          <Button
+            type="primary"
+            size="large"
+            :loading="loading"
+            class="login__submit"
+            @click="handleLogin"
+          >
+            登录
+          </Button>
+        </FormItem>
+      </Form>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.login {
+  width: 100%;
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding-right: 15%;
+  background: linear-gradient(135deg, var(--color-primary-light-9) 0%, var(--color-primary-light-7) 100%);
+
+  &__container {
+    width: 400px;
+    padding: 40px;
+    background-color: var(--bg-color);
+    border-radius: var(--border-radius-large);
+    box-shadow: var(--box-shadow-dark);
+  }
+
+  &__header {
+    text-align: center;
+    margin-bottom: 30px;
+  }
+
+  &__logo {
+    width: 60px;
+    height: 60px;
+  }
+
+  &__title {
+    font-size: 28px;
+    font-weight: 600;
+    color: var(--color-primary);
+    margin: 15px 0 5px;
+  }
+
+  &__subtitle {
+    font-size: 14px;
+    color: var(--color-text-secondary);
+  }
+
+  &__form {
+    :deep(.t-form-item) {
+      margin-bottom: 20px;
+    }
+  }
+
+  &__submit {
+    width: 100%;
+  }
+}
 </style>