xto-fronted 0.4.6 → 0.4.8

package/src/utils/request.ts

@@ -1,125 +1,125 @@
-/**
- * Axios 请求封装
- */
-
-import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse, InternalAxiosRequestConfig } from 'axios'
-import { getToken, getTokenType, clearToken } from './auth'
-import { Message } from '@xto/feedback'
-
-// 响应数据接口（Euler 框架 Result 格式）
-export interface ApiResponse<T = unknown> {
-  code: number
-  data: T
-  message: string
-}
-
-// 分页参数（Euler 框架格式）
-export interface PageParams {
-  pageNo: number
-  pageSize: number
-}
-
-// 分页响应（Euler 框架格式）
-export interface PageResponse<T> {
-  records: T[]
-  total: number
-}
-
-// 创建 axios 实例
-const createRequest = (): AxiosInstance => {
-  const instance = axios.create({
-    baseURL: import.meta.env.VITE_API_BASE_URL,
-    timeout: 30000,
-    headers: {
-      'Content-Type': 'application/json'
-    }
-  })
-
-  // 请求拦截器
-  instance.interceptors.request.use(
-    (config: InternalAxiosRequestConfig) => {
-      const token = getToken()
-      const tokenType = getTokenType() || 'Bearer'
-      if (token) {
-        config.headers.Authorization = `${tokenType} ${token}`
-      }
-      return config
-    },
-    (error) => {
-      return Promise.reject(error)
-    }
-  )
-
-  // 响应拦截器
-  instance.interceptors.response.use(
-    (response: AxiosResponse<ApiResponse>) => {
-      const { data } = response
-
-      // Euler 框架返回 Result 包装格式，成功时直接返回 data.data 中的实际数据
-      if (data.code === 200 || data.code === 0) {
-        return data.data as any
-      }
-
-      // 业务错误
-      Message.error(data.message || '请求失败')
-      return Promise.reject(new Error(data.message || '请求失败'))
-    },
-    (error) => {
-      const { response } = error
-
-      if (response) {
-        switch (response.status) {
-          case 401:
-            Message.error('登录已过期，请重新登录')
-            clearToken()
-            window.location.href = '/login'
-            break
-          case 403:
-            Message.error('没有权限访问')
-            break
-          case 404:
-            Message.error('请求资源不存在')
-            break
-          case 500:
-            Message.error('服务器错误')
-            break
-          default:
-            Message.error(response.data?.message || '请求失败')
-        }
-      } else {
-        Message.error('网络连接失败')
-      }
-
-      return Promise.reject(error)
-    }
-  )
-
-  return instance
-}
-
-const request = createRequest()
-
-// 请求方法 - 直接返回实际数据，无需手动解包
-export const http = {
-  get<T = unknown>(url: string, config?: AxiosRequestConfig): Promise<T> {
-    return request.get(url, config)
-  },
-
-  post<T = unknown>(url: string, data?: unknown, config?: AxiosRequestConfig): Promise<T> {
-    return request.post(url, data, config)
-  },
-
-  put<T = unknown>(url: string, data?: unknown, config?: AxiosRequestConfig): Promise<T> {
-    return request.put(url, data, config)
-  },
-
-  patch<T = unknown>(url: string, data?: unknown, config?: AxiosRequestConfig): Promise<T> {
-    return request.patch(url, data, config)
-  },
-
-  delete<T = unknown>(url: string, config?: AxiosRequestConfig): Promise<T> {
-    return request.delete(url, config)
-  }
-}
-
+/**
+ * Axios 请求封装
+ */
+
+import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse, InternalAxiosRequestConfig } from 'axios'
+import { getToken, getTokenType, clearToken } from './auth'
+import { Message } from '@xto/feedback'
+
+// 响应数据接口（Euler 框架 Result 格式）
+export interface ApiResponse<T = unknown> {
+  code: number
+  data: T
+  message: string
+}
+
+// 分页参数（Euler 框架格式）
+export interface PageParams {
+  pageNo: number
+  pageSize: number
+}
+
+// 分页响应（Euler 框架格式）
+export interface PageResponse<T> {
+  records: T[]
+  total: number
+}
+
+// 创建 axios 实例
+const createRequest = (): AxiosInstance => {
+  const instance = axios.create({
+    baseURL: import.meta.env.VITE_API_BASE_URL,
+    timeout: 30000,
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  })
+
+  // 请求拦截器
+  instance.interceptors.request.use(
+    (config: InternalAxiosRequestConfig) => {
+      const token = getToken()
+      const tokenType = getTokenType() || 'Bearer'
+      if (token) {
+        config.headers.Authorization = `${tokenType} ${token}`
+      }
+      return config
+    },
+    (error) => {
+      return Promise.reject(error)
+    }
+  )
+
+  // 响应拦截器
+  instance.interceptors.response.use(
+    (response: AxiosResponse<ApiResponse>) => {
+      const { data } = response
+
+      // Euler 框架返回 Result 包装格式，成功时直接返回 data.data 中的实际数据
+      if (data.code === 200 || data.code === 0) {
+        return data.data as any
+      }
+
+      // 业务错误
+      Message.error(data.message || '请求失败')
+      return Promise.reject(new Error(data.message || '请求失败'))
+    },
+    (error) => {
+      const { response } = error
+
+      if (response) {
+        switch (response.status) {
+          case 401:
+            Message.error('登录已过期，请重新登录')
+            clearToken()
+            window.location.href = '/login'
+            break
+          case 403:
+            Message.error('没有权限访问')
+            break
+          case 404:
+            Message.error('请求资源不存在')
+            break
+          case 500:
+            Message.error('服务器错误')
+            break
+          default:
+            Message.error(response.data?.message || '请求失败')
+        }
+      } else {
+        Message.error('网络连接失败')
+      }
+
+      return Promise.reject(error)
+    }
+  )
+
+  return instance
+}
+
+const request = createRequest()
+
+// 请求方法 - 直接返回实际数据，无需手动解包
+export const http = {
+  get<T = unknown>(url: string, config?: AxiosRequestConfig): Promise<T> {
+    return request.get(url, config)
+  },
+
+  post<T = unknown>(url: string, data?: unknown, config?: AxiosRequestConfig): Promise<T> {
+    return request.post(url, data, config)
+  },
+
+  put<T = unknown>(url: string, data?: unknown, config?: AxiosRequestConfig): Promise<T> {
+    return request.put(url, data, config)
+  },
+
+  patch<T = unknown>(url: string, data?: unknown, config?: AxiosRequestConfig): Promise<T> {
+    return request.patch(url, data, config)
+  },
+
+  delete<T = unknown>(url: string, config?: AxiosRequestConfig): Promise<T> {
+    return request.delete(url, config)
+  }
+}
+
 export default request

package/src/views/login/index.vue

@@ -1,189 +1,195 @@
-<script setup lang="ts">
-import { ref, reactive } from 'vue'
-import { useRouter, useRoute } from 'vue-router'
-import { Button } from '@xto/base'
-import { Form, FormItem, Input, Checkbox } from '@xto/form'
-import { Message } from '@xto/feedback'
-import { login } from '@/api/auth'
-import { setTokenInfo } from '@/utils/auth'
-import { getAppId, getClientId } from '@/utils/config'
-
-const router = useRouter()
-const route = useRoute()
-
-const loading = ref(false)
-const rememberMe = ref(false)
-
-const formData = reactive({
-  uid: '',
-  password: ''
-})
-
-const rules: Record<string, any[]> = {
-  uid: [
-    { 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
-
-    // 调用登录 API
-    const result = await login({
-      appId: getAppId(),
-      clientId: getClientId(),
-      uid: formData.uid,
-      password: formData.password,
-      code: true
-    })
-
-    // 保存 token
-    setTokenInfo(result)
-
-    Message.success('登录成功')
-
-    // 获取重定向地址
-    const redirect = route.query.redirect as string || '/'
-
-    // 跳转到目标页面（路由守卫会自动获取用户信息和菜单）
-    router.push(redirect)
-  } catch (error) {
-    console.error('登录失败:', error)
-  } finally {
-    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="uid">
-          <Input
-            v-model="formData.uid"
-            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>请输入您的用户名和密码</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(.x-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">
+import { ref, reactive } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { Button, Icon } from '@xto/base'
+import { Form, FormItem, Input, Checkbox } from '@xto/form'
+import { Message } from '@xto/feedback'
+import { login } from '@/api/auth'
+import { setTokenInfo } from '@/utils/auth'
+import { getAppId, getClientId } from '@/utils/config'
+
+const router = useRouter()
+const route = useRoute()
+
+const loading = ref(false)
+const rememberMe = ref(false)
+
+const formData = reactive({
+  uid: '',
+  password: ''
+})
+
+const rules: Record<string, any[]> = {
+  uid: [
+    { 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
+
+    // 调用登录 API
+    const result = await login({
+      appId: getAppId(),
+      clientId: getClientId(),
+      uid: formData.uid,
+      password: formData.password,
+      code: true
+    })
+
+    // 保存 token
+    setTokenInfo(result)
+
+    Message.success('登录成功')
+
+    // 获取重定向地址
+    const redirect = route.query.redirect as string || '/'
+
+    // 跳转到目标页面（路由守卫会自动获取用户信息和菜单）
+    router.push(redirect)
+  } catch (error) {
+    console.error('登录失败:', error)
+  } finally {
+    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="uid">
+          <Input
+            v-model="formData.uid"
+            placeholder="用户名"
+            size="large"
+          >
+            <template #prefix>
+              <Icon name="user" :size="18" />
+            </template>
+          </Input>
+        </FormItem>
+
+        <FormItem prop="password">
+          <Input
+            v-model="formData.password"
+            type="password"
+            placeholder="密码"
+            size="large"
+            show-password
+            @keyup.enter="handleLogin"
+          >
+            <template #prefix>
+              <Icon name="lock" :size="18" />
+            </template>
+          </Input>
+        </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>请输入您的用户名和密码</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(.x-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);
+  }
+}
 </style>