xto-fronted 0.4.7 → 0.4.9

package/src/views/login/index.vue

@@ -1,195 +1,195 @@
-<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);
-  }
-}
+<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>

package/vite.config.ts

@@ -1,136 +1,136 @@
-import { defineConfig, loadEnv } from 'vite'
-import vue from '@vitejs/plugin-vue'
-import dts from 'vite-plugin-dts'
-import { resolve } from 'path'
-
-export default defineConfig(({ mode }) => {
-  const env = loadEnv(mode, process.cwd())
-  const isLib = mode === 'lib'
-
-  return {
-    plugins: [
-      vue(),
-      ...(isLib ? [dts({ insertTypesEntry: true, outDir: 'dist' })] : [])
-    ],
-    resolve: {
-      alias: {
-        '@': resolve(__dirname, 'src'),
-        '@xto/base/es/style.css': resolve(__dirname, 'node_modules/@xto/base/es/style.css'),
-        '@xto/form/es/style.css': resolve(__dirname, 'node_modules/@xto/form/es/style.css'),
-        '@xto/data/es/style.css': resolve(__dirname, 'node_modules/@xto/data/es/style.css'),
-        '@xto/feedback/es/style.css': resolve(__dirname, 'node_modules/@xto/feedback/es/style.css'),
-        '@xto/navigation/es/style.css': resolve(__dirname, 'node_modules/@xto/navigation/es/style.css'),
-        '@xto/layout/es/style.css': resolve(__dirname, 'node_modules/@xto/layout/es/style.css'),
-        '@xto/business/es/style.css': resolve(__dirname, 'node_modules/@xto/business/es/style.css'),
-      }
-    },
-    // 开发模式优化
-    optimizeDeps: {
-      include: [
-        'vue',
-        'vue-router',
-        'pinia',
-        'axios'
-      ],
-      exclude: [
-        '@xto/core',
-        '@xto/base',
-        '@xto/form',
-        '@xto/data',
-        '@xto/feedback',
-        '@xto/navigation',
-        '@xto/layout',
-        '@xto/business'
-      ]
-    },
-    server: {
-      host: '0.0.0.0',
-      port: 3000,
-      open: true,
-      proxy: {
-        '/api': {
-          target: env.VITE_API_BASE_URL || 'http://localhost:8080',
-          changeOrigin: true,
-          rewrite: (path) => path.replace(/^\/api/, '')
-        }
-      }
-    },
-    build: {
-      outDir: 'dist',
-      sourcemap: false,
-      chunkSizeWarningLimit: 1500,
-      // 库模式配置
-      lib: isLib ? {
-        entry: resolve(__dirname, 'src/index.ts'),
-        name: 'XtoFronted',
-        fileName: (format: string) => `index.${format === 'es' ? 'es.js' : 'umd.js'}`,
-        formats: ['es', 'umd']
-      } : undefined,
-      rollupOptions: {
-        // 库模式下排除外部依赖
-        external: isLib ? [
-          'vue',
-          'vue-router',
-          'pinia',
-          'axios',
-          /^@xto\//
-        ] : undefined,
-        output: isLib ? {
-          globals: {
-            vue: 'Vue',
-            'vue-router': 'VueRouter',
-            pinia: 'Pinia',
-            axios: 'axios'
-          },
-          exports: 'named'
-        } : {
-          manualChunks(id) {
-            // Vue 全家桶单独打包
-            if (id.includes('node_modules/vue/') ||
-                id.includes('node_modules/@vue/') ||
-                id.includes('node_modules/vue-router/') ||
-                id.includes('node_modules/pinia/')) {
-              return 'vue-vendor'
-            }
-            // 组件库按包分割，实现按需加载
-            if (id.includes('@xto/core')) {
-              return 'xto-core'
-            }
-            if (id.includes('@xto/base')) {
-              return 'xto-base'
-            }
-            if (id.includes('@xto/form')) {
-              return 'xto-form'
-            }
-            if (id.includes('@xto/data')) {
-              return 'xto-data'
-            }
-            if (id.includes('@xto/feedback')) {
-              return 'xto-feedback'
-            }
-            if (id.includes('@xto/navigation')) {
-              return 'xto-navigation'
-            }
-            if (id.includes('@xto/layout')) {
-              return 'xto-layout'
-            }
-            if (id.includes('@xto/business')) {
-              return 'xto-business'
-            }
-            // 其他第三方库
-            if (id.includes('node_modules/')) {
-              return 'vendor'
-            }
-          }
-        }
-      }
-    },
-    css: {
-      preprocessorOptions: {
-        scss: {
-          api: 'modern-compiler'
-        }
-      }
-    }
-  }
+import { defineConfig, loadEnv } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import dts from 'vite-plugin-dts'
+import { resolve } from 'path'
+
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd())
+  const isLib = mode === 'lib'
+
+  return {
+    plugins: [
+      vue(),
+      ...(isLib ? [dts({ insertTypesEntry: true, outDir: 'dist' })] : [])
+    ],
+    resolve: {
+      alias: {
+        '@': resolve(__dirname, 'src'),
+        '@xto/base/es/style.css': resolve(__dirname, 'node_modules/@xto/base/es/style.css'),
+        '@xto/form/es/style.css': resolve(__dirname, 'node_modules/@xto/form/es/style.css'),
+        '@xto/data/es/style.css': resolve(__dirname, 'node_modules/@xto/data/es/style.css'),
+        '@xto/feedback/es/style.css': resolve(__dirname, 'node_modules/@xto/feedback/es/style.css'),
+        '@xto/navigation/es/style.css': resolve(__dirname, 'node_modules/@xto/navigation/es/style.css'),
+        '@xto/layout/es/style.css': resolve(__dirname, 'node_modules/@xto/layout/es/style.css'),
+        '@xto/business/es/style.css': resolve(__dirname, 'node_modules/@xto/business/es/style.css'),
+      }
+    },
+    // 开发模式优化
+    optimizeDeps: {
+      include: [
+        'vue',
+        'vue-router',
+        'pinia',
+        'axios'
+      ],
+      exclude: [
+        '@xto/core',
+        '@xto/base',
+        '@xto/form',
+        '@xto/data',
+        '@xto/feedback',
+        '@xto/navigation',
+        '@xto/layout',
+        '@xto/business'
+      ]
+    },
+    server: {
+      host: '0.0.0.0',
+      port: 3000,
+      open: true,
+      proxy: {
+        '/api': {
+          target: env.VITE_API_BASE_URL || 'http://localhost:8080',
+          changeOrigin: true,
+          rewrite: (path) => path.replace(/^\/api/, '')
+        }
+      }
+    },
+    build: {
+      outDir: 'dist',
+      sourcemap: false,
+      chunkSizeWarningLimit: 1500,
+      // 库模式配置
+      lib: isLib ? {
+        entry: resolve(__dirname, 'src/index.ts'),
+        name: 'XtoFronted',
+        fileName: (format: string) => `index.${format === 'es' ? 'es.js' : 'umd.js'}`,
+        formats: ['es', 'umd']
+      } : undefined,
+      rollupOptions: {
+        // 库模式下排除外部依赖
+        external: isLib ? [
+          'vue',
+          'vue-router',
+          'pinia',
+          'axios',
+          /^@xto\//
+        ] : undefined,
+        output: isLib ? {
+          globals: {
+            vue: 'Vue',
+            'vue-router': 'VueRouter',
+            pinia: 'Pinia',
+            axios: 'axios'
+          },
+          exports: 'named'
+        } : {
+          manualChunks(id) {
+            // Vue 全家桶单独打包
+            if (id.includes('node_modules/vue/') ||
+                id.includes('node_modules/@vue/') ||
+                id.includes('node_modules/vue-router/') ||
+                id.includes('node_modules/pinia/')) {
+              return 'vue-vendor'
+            }
+            // 组件库按包分割，实现按需加载
+            if (id.includes('@xto/core')) {
+              return 'xto-core'
+            }
+            if (id.includes('@xto/base')) {
+              return 'xto-base'
+            }
+            if (id.includes('@xto/form')) {
+              return 'xto-form'
+            }
+            if (id.includes('@xto/data')) {
+              return 'xto-data'
+            }
+            if (id.includes('@xto/feedback')) {
+              return 'xto-feedback'
+            }
+            if (id.includes('@xto/navigation')) {
+              return 'xto-navigation'
+            }
+            if (id.includes('@xto/layout')) {
+              return 'xto-layout'
+            }
+            if (id.includes('@xto/business')) {
+              return 'xto-business'
+            }
+            // 其他第三方库
+            if (id.includes('node_modules/')) {
+              return 'vendor'
+            }
+          }
+        }
+      }
+    },
+    css: {
+      preprocessorOptions: {
+        scss: {
+          api: 'modern-compiler'
+        }
+      }
+    }
+  }
 })