xto-fronted 0.1.2 → 0.1.4

package/src/views/login/index.vue

@@ -0,0 +1,141 @@
+<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>

package/src/views/system/menu/index.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="page">
+    <div class="page__placeholder">
+      <h2>菜单管理</h2>
+      <p>功能开发中...</p>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.page {
+  padding: 20px;
+  height: 100%;
+
+  &__placeholder {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    color: var(--color-text-secondary);
+
+    h2 {
+      margin-bottom: 10px;
+      color: var(--color-text-primary);
+    }
+  }
+}
+</style>

package/src/views/system/role/index.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="page">
+    <div class="page__placeholder">
+      <h2>角色管理</h2>
+      <p>功能开发中...</p>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.page {
+  padding: 20px;
+  height: 100%;
+
+  &__placeholder {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    color: var(--color-text-secondary);
+
+    h2 {
+      margin-bottom: 10px;
+      color: var(--color-text-primary);
+    }
+  }
+}
+</style>

package/src/views/system/user/index.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="page">
+    <div class="page__placeholder">
+      <h2>用户管理</h2>
+      <p>功能开发中...</p>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.page {
+  padding: 20px;
+  height: 100%;
+
+  &__placeholder {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    color: var(--color-text-secondary);
+
+    h2 {
+      margin-bottom: 10px;
+      color: var(--color-text-primary);
+    }
+  }
+}
+</style>

package/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "preserve",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    },
+    "types": ["vite/client", "node"]
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/tsconfig.node.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,139 @@
+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/core': resolve(__dirname, 'node_modules/@xto/core/es/index/index.mjs'),
+        '@xto/core/theme': resolve(__dirname, 'node_modules/@xto/core/es/theme/index.mjs'),
+        '@xto/core/hooks': resolve(__dirname, 'node_modules/@xto/core/es/hooks/index.mjs'),
+        '@xto/core/utils': resolve(__dirname, 'node_modules/@xto/core/es/utils/index.mjs'),
+        '@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: {
+        '/user': {
+          target: 'https://cloud-api-test.tineco.com',
+          changeOrigin: true,
+          secure: false
+        }
+      }
+    },
+    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'}`
+      } : 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'
+        }
+      }
+    }
+  }
+})