vue3-admin-gpt 1.0.0

package/rspack.config.js

@@ -0,0 +1,282 @@
+const path = require("path");
+const fs = require("fs");
+const dotenv = require("dotenv");
+const { Configuration, DefinePlugin } = require("@rspack/core");
+const HtmlRspackPlugin = require("html-rspack-plugin");
+const { VueLoaderPlugin } = require("vue-loader");
+const {
+  publicPath,
+  assetsDir,
+  outputDir,
+  title,
+  devPort,
+} = require("./src/config");
+const dayjs = require("dayjs");
+const time = dayjs().format("YYYY-M-D HH:mm:ss");
+
+// 加载环境变量文件（确保在 DefinePlugin 之前加载）
+const mode = process.argv[2] === "build" ? "production" : "development";
+const envFile = `.env.${mode}`;
+const envPath = path.resolve(__dirname, envFile);
+
+if (fs.existsSync(envPath)) {
+  const envConfig = dotenv.parse(fs.readFileSync(envPath));
+  // 将环境变量注入到 process.env
+  Object.keys(envConfig).forEach(key => {
+    process.env[key] = envConfig[key];
+  });
+}
+
+// 设置环境变量（优先使用 rspack.js 中已设置的环境变量）
+process.env.VUE_APP_UPDATE_TIME = time;
+process.env.BASE_URL = publicPath;
+process.env.VUE_APP_BASE_API = process.env.VUE_APP_BASE_API || "/api";
+
+const resolve = (dir) => path.join(__dirname, dir);
+
+/**
+ * @type {Configuration}
+ */
+module.exports = {
+  mode: mode,
+  context: __dirname,
+  entry: {
+    app: "./src/main.js",
+  },
+  output: {
+    path: resolve(outputDir),
+    publicPath: "",
+    filename: "js/[name].[contenthash:8].js",
+    chunkFilename: "js/[name].[contenthash:8].js",
+    assetModuleFilename: `${assetsDir}/[name].[ext][query]`,
+  },
+  // 增加性能提示配置
+  performance: {
+    // 提高阈值以减少警告
+    maxEntrypointSize: 3000000, // 3MB
+    maxAssetSize: 1000000, // 1MB
+    // 只在生产环境显示性能警告
+    hints: mode === "production" ? "warning" : false,
+  },
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        use: [
+          {
+            loader: "vue-loader",
+            options: {
+              // Vue 3无需preserveWhitespace选项
+              compilerOptions: {
+                isCustomElement: (tag) => tag.startsWith("ion-"),
+              },
+            },
+          },
+        ],
+      },
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        use: {
+          loader: "babel-loader",
+          options: {
+            presets: ["@babel/preset-env"],
+          },
+        },
+      },
+      {
+        test: /\.css$/,
+        use: ["style-loader", "css-loader"],
+      },
+      {
+        test: /\.scss$/,
+        use: [
+          "style-loader",
+          {
+            loader: "css-loader",
+            options: {
+              modules: {
+                auto: true,
+                localIdentName: "[path][name]__[local]--[hash:base64:5]",
+              },
+            },
+          },
+          {
+            loader: "sass-loader",
+            options: {
+              sassOptions: {
+                indentedSyntax: false,
+                includePaths: [resolve("src/styles")],
+                quietDeps: true,
+              },
+              additionalData: (content, loaderContext) => {
+                const { resourcePath, rootContext } = loaderContext;
+                const relativePath = path.relative(rootContext, resourcePath);
+                if (
+                  relativePath.replace(/\\/g, "/") !==
+                  "src/styles/variables.scss"
+                ) {
+                  return `@import "~@/styles/variables.scss";${content}`;
+                }
+                return content;
+              },
+            },
+          },
+        ],
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg)$/,
+        type: "asset",
+        parser: {
+          dataUrlCondition: {
+            maxSize: 10 * 1024, // 10KB
+          },
+        },
+      },
+      {
+        test: /\.(woff2?|eot|ttf|otf)$/,
+        type: "asset",
+        parser: {
+          dataUrlCondition: {
+            maxSize: 30 * 1024, // 增加到30KB
+          },
+        },
+      },
+      {
+        resourceQuery: /raw/,
+        type: "asset/source",
+      },
+    ],
+  },
+  resolve: {
+    extensions: [".js", ".vue", ".json"],
+    alias: {
+      "@": resolve("src"),
+      // 更新为Vue 3的运行时版本
+      vue$: "vue/dist/vue.esm-bundler.js",
+      path: "path-browserify",
+      fs: false,
+    },
+    fallback: {
+      path: require.resolve("path-browserify"),
+    },
+  },
+  plugins: [
+    new VueLoaderPlugin(),
+    new DefinePlugin({
+      // Vue 3需要的全局常量
+      __VUE_OPTIONS_API__: JSON.stringify(true),
+      __VUE_PROD_DEVTOOLS__: JSON.stringify(mode !== "production"),
+      // 直接赋值方式，避免嵌套对象
+      "process.env.NODE_ENV": JSON.stringify(mode),
+      "process.env.BASE_URL": JSON.stringify(process.env.BASE_URL),
+      "process.env.VUE_APP_TITLE": JSON.stringify(process.env.VUE_APP_TITLE),
+      "process.env.VUE_APP_MOCK_ENABLE": JSON.stringify("true"), // 确保在所有环境中mock都为true
+      "process.env.VUE_APP_AUTHOR": JSON.stringify(process.env.VUE_APP_AUTHOR),
+      "process.env.VUE_APP_BASE_API": JSON.stringify(process.env.VUE_APP_BASE_API),
+      "process.env.VUE_APP_UPDATE_TIME": JSON.stringify(
+        process.env.VUE_APP_UPDATE_TIME
+      ),
+    }),
+    new HtmlRspackPlugin({
+      template: "./public/index.html",
+      filename: "index.html",
+      title: title || "管理系统",
+      inject: "body",
+      templateParameters: {
+        BASE_URL: mode === "production" ? "./" : "/",
+        VUE_APP_TITLE: process.env.VUE_APP_TITLE,
+        VUE_APP_AUTHOR: process.env.VUE_APP_AUTHOR,
+      },
+      minify:
+        mode === "production"
+          ? {
+              removeComments: true,
+              collapseWhitespace: true,
+              removeAttributeQuotes: true,
+              collapseBooleanAttributes: true,
+              removeScriptTypeAttributes: true,
+            }
+          : false,
+    }),
+  ],
+  optimization: {
+    splitChunks: {
+      automaticNameDelimiter: "-",
+      chunks: "all",
+      // 增加maxInitialRequests以允许更多的初始化块
+      maxInitialRequests: 6,
+      // 减小最小块大小，允许更细粒度的分割
+      minSize: 20000,
+      cacheGroups: {
+        chunk: {
+          name: "vab-chunk",
+          test: /[\\/]node_modules[\\/]/,
+          minSize: 131072,
+          maxSize: 524288,
+          chunks: "async",
+          minChunks: 2,
+          priority: 10,
+        },
+        vue: {
+          name: "vue",
+          test: /[\\/]node_modules[\\/](vue(.*)|core-js)[\\/]/,
+          chunks: "initial",
+          priority: 20,
+        },
+        elementPlus: {
+          name: "element-plus",
+          test: /[\\/]node_modules[\\/]element-plus(.*)[\\/]/,
+          priority: 30,
+        },
+        // 单独拆分常用工具库
+        vendors: {
+          name: "vendors",
+          test: /[\\/]node_modules[\\/](lodash|axios|qs|dayjs)[\\/]/,
+          chunks: "all",
+          priority: 35,
+        },
+        // 拆分样式资源
+        styles: {
+          name: "styles",
+          test: /\.(css|scss)$/,
+          chunks: "all",
+          enforce: true,
+          priority: 40,
+        },
+        extra: {
+          name: "vab-layouts",
+          test: resolve("src/layouts"),
+          priority: 40,
+        },
+      },
+    },
+    // 添加压缩配置
+    minimize: mode === "production",
+    // 如果是生产环境，增加tree shaking
+    usedExports: mode === "production",
+  },
+  devServer: {
+    hot: true,
+    // 使用配置文件中的端口
+    port: devPort || 8091,
+    historyApiFallback: true,
+    static: {
+      directory: path.join(__dirname, "public"),
+    },
+    client: {
+      overlay: false,  // 关闭错误遮罩（Element Plus 的 ResizeObserver 警告是已知问题，不影响功能）
+    },
+    open: {
+      target: [`http://localhost:${devPort || 8091}`],
+    },
+    proxy: [
+      {
+        context: ["/api"],
+        target: "https://cn.gempharmatech.com",
+        changeOrigin: true,
+        secure: true,
+      },
+    ],
+  },
+};

package/rspack.js

@@ -0,0 +1,162 @@
+#!/usr/bin/env node
+
+// 禁用弃用警告
+process.noDeprecation = true;
+
+const { rspack } = require("@rspack/core");
+const path = require("path");
+const fs = require("fs");
+const dotenv = require("dotenv");
+
+const configPath = path.resolve(__dirname, "rspack.config.js");
+const config = require(configPath);
+const mode = process.argv[2] === "build" ? "production" : "development";
+
+// 加载环境变量文件
+const envFile = `.env.${mode}`;
+const envPath = path.resolve(__dirname, envFile);
+
+if (fs.existsSync(envPath)) {
+  const envConfig = dotenv.parse(fs.readFileSync(envPath));
+  // 将环境变量注入到 process.env
+  Object.keys(envConfig).forEach(key => {
+    process.env[key] = envConfig[key];
+  });
+  console.log(`已加载环境配置文件: ${envFile}`);
+} else {
+  console.warn(`环境配置文件不存在: ${envFile}`);
+}
+
+// 增强环境变量设置
+process.env.NODE_ENV = mode;
+process.env.WEBPACK_ENV = mode;
+process.env.BABEL_ENV = mode;
+
+// 如果环境变量中没有设置，使用默认值
+process.env.VUE_APP_TITLE = process.env.VUE_APP_TITLE || "管理系统";
+process.env.VUE_APP_AUTHOR = process.env.VUE_APP_AUTHOR || "";
+process.env.VUE_APP_BASE_API = process.env.VUE_APP_BASE_API || "/api";
+process.env.VUE_APP_MOCK_ENABLE = process.env.VUE_APP_MOCK_ENABLE || "false";
+process.env.BASE_URL = process.env.BASE_URL || "/";
+
+console.log("当前环境:", mode);
+console.log("系统标题:", process.env.VUE_APP_TITLE);
+console.log("API地址:", process.env.VUE_APP_BASE_API);
+console.log("Mock启用:", process.env.VUE_APP_MOCK_ENABLE);
+
+// 读取配置
+config.mode = mode;
+
+if (mode === "production") {
+  // 生产环境配置
+  console.log("正在极速打包中，预计用时3秒，请稍后...");
+
+  // 生产环境下增加额外配置
+  config.optimization = {
+    ...config.optimization,
+    moduleIds: "deterministic", // 稳定的模块ID以优化长期缓存
+    chunkIds: "deterministic", // 稳定的chunk ID以优化长期缓存
+    removeEmptyChunks: true, // 移除空的chunks
+  };
+
+  rspack(config).run((err, stats) => {
+    if (err) {
+      console.error(err.stack || err);
+      if (err.details) {
+        console.error(err.details);
+      }
+      process.exit(1);
+      return;
+    }
+
+    const info = stats.toJson();
+
+    if (stats.hasErrors()) {
+      console.error(info.errors);
+    }
+
+    if (stats.hasWarnings()) {
+      console.warn(info.warnings);
+    }
+
+    console.log(
+      stats.toString({
+        colors: true,
+        modules: false,
+        children: false,
+        chunks: false,
+        chunkModules: false,
+      })
+    );
+  });
+} else {
+  // 开发环境配置
+  try {
+    // 尝试使用rspack的dev server
+    const { RspackDevServer } = require("@rspack/dev-server");
+
+    const compiler = rspack(config);
+
+    // 使用rspack.config.js中的所有devServer配置
+    const devServerOptions = config.devServer || {};
+
+    // 设置mock服务器，不再检查环境变量，始终启用mock
+    // if (!devServerOptions.setupMiddlewares) {
+    //   devServerOptions.setupMiddlewares = (middlewares, devServer) => {
+    //     if (!devServer) {
+    //       throw new Error("dev-server is not defined");
+    //     }
+
+    //     const mockServer = require("./mock/index");
+    //     mockServer(devServer.app);
+
+    //     return middlewares;
+    //   };
+    // }
+
+    const server = new RspackDevServer(devServerOptions, compiler);
+
+    server.start().catch((err) => {
+      console.error("启动RspackDevServer失败:", err);
+    });
+  } catch (error) {
+    console.error(
+      "加载@rspack/dev-server失败，尝试使用webpack-dev-server:",
+      error
+    );
+
+    // 如果rspack dev server失败，尝试回退到webpack
+    try {
+      const webpack = require("webpack");
+      const WebpackDevServer = require("webpack-dev-server");
+
+      const webpackConfig = {
+        ...config,
+        // 添加webpack特定配置
+        mode: config.mode,
+      };
+
+      const compiler = webpack(webpackConfig);
+      const devServerOptions = config.devServer || {};
+
+      // 不再检查环境变量，始终启用mock
+      const originalBefore = devServerOptions.before;
+      devServerOptions.before = (app, server) => {
+        if (originalBefore) {
+          originalBefore(app, server);
+        }
+        const mockServer = require("./mock/index");
+        mockServer(app);
+      };
+
+      const server = new WebpackDevServer(devServerOptions, compiler);
+
+      server.start().catch((err) => {
+        console.error("启动WebpackDevServer失败:", err);
+      });
+    } catch (webpackError) {
+      console.error("回退到webpack-dev-server也失败:", webpackError);
+      process.exit(1);
+    }
+  }
+}

package/src/App.vue

@@ -0,0 +1,9 @@
+<template>
+  <div id="app">
+    <router-view />
+  </div>
+</template>
+
+<script setup>
+// Vue 3 组合式 API
+</script>

package/src/api/icon.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function getIconList(data) {
+  return request({
+    url: '/icon/list',
+    method: 'post',
+    data,
+  })
+}

package/src/api/router.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function getRouterList(data) {
+  return request({
+    url: '/menu/navigate',
+    method: 'post',
+    data,
+  })
+}

package/src/api/table.js

@@ -0,0 +1,25 @@
+import request from '@/utils/request'
+
+export function getList(data) {
+  return request({
+    url: '/table/getList',
+    method: 'post',
+    data,
+  })
+}
+
+export function doEdit(data) {
+  return request({
+    url: '/table/doEdit',
+    method: 'post',
+    data,
+  })
+}
+
+export function doDelete(data) {
+  return request({
+    url: '/table/doDelete',
+    method: 'post',
+    data,
+  })
+}

package/src/api/tree.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function getTreeList(data) {
+  return request({
+    url: '/tree/list',
+    method: 'post',
+    data,
+  })
+}

package/src/api/user.js

@@ -0,0 +1,34 @@
+import request from "@/utils/request";
+import { tokenName } from "@/config";
+
+export async function login(data) {
+  return request({
+    url: "/xhr-cms/customer-info/passwordLogin",
+    method: "post",
+    data,
+  });
+}
+
+export function getUserInfo(accessToken) {
+  return request({
+    url: "/userInfo",
+    method: "post",
+    data: {
+      [tokenName]: accessToken,
+    },
+  });
+}
+
+export function logout() {
+  return request({
+    url: "/logout",
+    method: "post",
+  });
+}
+
+export function register() {
+  return request({
+    url: "/register",
+    method: "post",
+  });
+}

package/src/assets/vuejs-fill.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path fill="none" d="M0 0h24v24H0z"/>
+  <path d="M1 3h4l7 12 7-12h4L12 22 1 3zm8.667 0L12 7l2.333-4h4.035L12 14 5.632 3h4.035z"/>
+</svg>

package/src/components/VabPageHeader/index.vue

@@ -0,0 +1,133 @@
+<template>
+  <div class="page-header" :class="customClass">
+    <div class="header-content">
+      <div class="header-left">
+        <h1 class="page-title">
+          <el-icon v-if="icon && icon.length" class="header-icon">
+            <component :is="convertIcon(icon)" />
+          </el-icon>
+          {{ title }}
+        </h1>
+        <p v-if="description" class="page-description">
+          {{ description }}
+        </p>
+      </div>
+      <div v-if="rightIcon || rightText" class="header-right">
+        <slot name="right">
+          <el-icon v-if="rightIcon && rightIcon.length" class="header-icon">
+            <component :is="convertIcon(rightIcon)" />
+          </el-icon>
+          <span v-if="rightText">{{ rightText }}</span>
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { faToElIcon } from "@/utils/vab";
+
+export default {
+  name: "VabPageHeader",
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+    description: {
+      type: String,
+      default: "",
+    },
+    icon: {
+      type: Array,
+      default: () => [],
+    },
+    rightIcon: {
+      type: Array,
+      default: () => [],
+    },
+    rightText: {
+      type: String,
+      default: "",
+    },
+    customClass: {
+      type: String,
+      default: "",
+    },
+  },
+  methods: {
+    convertIcon(icon) {
+      return faToElIcon(icon);
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.page-header {
+  background: linear-gradient(135deg, #409EFF 0%, #69C0FF 100%);
+  border-radius: 12px;
+  padding: 30px;
+  margin-bottom: 24px;
+  color: white;
+  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
+
+  .header-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .header-left {
+      .page-title {
+        font-size: 2rem;
+        font-weight: 700;
+        margin: 0 0 8px 0;
+        display: flex;
+        align-items: center;
+        gap: 12px;
+
+        .header-icon {
+          font-size: 1.8rem;
+        }
+      }
+
+      .page-description {
+        font-size: 1rem;
+        opacity: 0.9;
+        margin: 0;
+      }
+    }
+
+    .header-right {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 1.1rem;
+      font-weight: 600;
+
+      .header-icon {
+        font-size: 1.3rem;
+      }
+    }
+  }
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+  .page-header {
+    padding: 20px;
+
+    .header-content {
+      flex-direction: column;
+      gap: 16px;
+      text-align: center;
+
+      .header-left {
+        .page-title {
+          font-size: 1.5rem;
+        }
+      }
+    }
+  }
+}
+</style>