import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import AutoImport from 'unplugin-auto-import/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import path from 'path'
import { fileURLToPath } from 'url'

const __dirname = path.dirname(fileURLToPath(import.meta.url))

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // Element Plus 按需导入
    Components({
      resolvers: [ElementPlusResolver({ importStyle: 'sass' })],
      dts: 'src/components.d.ts',
    }),
    AutoImport({
      resolvers: [ElementPlusResolver()],
      imports: ['vue', 'vue-router', 'pinia'],
      dts: 'src/auto-imports.d.ts',
    }),
  ],

  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },

  css: {
    preprocessorOptions: {
      scss: {
        // 全局注入 SCSS 变量，与现有 CSS 变量体系对齐
        additionalData: `
          $primary: #2563eb;
          $primary-hover: #1d4ed8;
          $green: #16a34a;
          $yellow: #d97706;
          $red: #dc2626;
          $gray-50: #f9fafb;
          $gray-100: #f3f4f6;
          $gray-200: #e5e7eb;
          $gray-300: #d1d5db;
          $gray-400: #9ca3af;
          $gray-500: #6b7280;
          $gray-600: #4b5563;
          $gray-700: #374151;
          $gray-800: #1f2937;
          $gray-900: #111827;

          // Element Plus 主题色覆盖
          $--color-primary: $primary;
        `,
      },
    },
  },

  server: {
    port: 5173,
    // 代理配置：开发环境将 API 请求转发到 Flask
    proxy: {
      '/api': {
        target: 'http://localhost:8088',
        changeOrigin: true,
      },
      '/login': {
        target: 'http://localhost:8088',
        changeOrigin: true,
      },
      '/logout': {
        target: 'http://localhost:8088',
        changeOrigin: true,
      },
    },
  },

  build: {
    outDir: 'dist',
    assetsDir: 'assets',
    sourcemap: false,
  },
})
