cmpt-huitu-cli 1.0.0

package/templates/default/src/views/Home.vue

@@ -0,0 +1,111 @@
+<template>
+  <div class="home">
+    <ModuleTitle title="欢迎使用慧图标准脚手架" />
+    <VexTable
+      :columns="columns"
+      :data="data"
+    />
+    <HTable
+      :data="data"
+      :columns="hTableColumns"
+    >
+    </HTable>
+    <div class="content">
+      <p>这是一个基于 Monorepo 架构的 Vue 3 标准模版。</p>
+      <p>已集成：</p>
+      <ul>
+        <li><el-tag>Vue 3</el-tag></li>
+        <li><el-tag type="success">Vite</el-tag></li>
+        <li><el-tag type="warning">Element Plus</el-tag></li>
+        <li><el-tag type="danger">@huitu/ui</el-tag></li>
+        <li><el-tag type="info">@huitu/utils</el-tag></li>
+      </ul>
+
+      <div class="demo-section">
+        <h3>UI 组件演示</h3>
+        <div class="demo-item">
+          <p>AccentTitle:</p>
+          <AccentTitle
+            title="测试标题"
+            unit="单位: 个"
+          />
+        </div>
+        <div class="demo-item">
+          <p>BgTag:</p>
+          <BgTag label="标签组件" />
+        </div>
+      </div>
+
+      <div class="demo-section">
+        <h3>Utils 工具演示</h3>
+        <p>当前时间 (formatted by @huitu/utils): {{ currentTime }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { ref, onMounted } from 'vue'
+  import { parseTime } from '@huitu/utils'
+
+  const currentTime = ref('')
+  const columns = [
+    { type: 'seq', title: '序号', width: 80 },
+    { field: 'name', title: '姓名', width: 120 },
+    { field: 'age', title: '年龄', width: 120 },
+  ]
+  const data = [
+    {
+      name: '张三',
+      age: 18,
+    },
+    {
+      name: '李四',
+      age: 20,
+    },
+  ]
+
+  const hTableColumns = [
+    {
+      prop: 'name',
+      label: '站名',
+      width: 100,
+      align: 'center',
+      fixed: 'left',
+    },
+    {
+      prop: 'age',
+      label: '年龄',
+      width: 100,
+      align: 'center',
+      fixed: 'left',
+    },
+  ]
+
+  onMounted(() => {
+    currentTime.value = parseTime(new Date(), 'YYYY-MM-DD HH:mm:ss')
+  })
+</script>
+
+<style scoped>
+  .home {
+    padding: 20px;
+  }
+  .content {
+    margin-top: 20px;
+  }
+  ul {
+    list-style: none;
+    padding: 0;
+    display: flex;
+    gap: 10px;
+  }
+  .demo-section {
+    margin-top: 30px;
+    border-top: 1px solid #eee;
+    padding-top: 20px;
+  }
+  .demo-item {
+    margin-bottom: 20px;
+  }
+</style>

package/templates/default/src/views/login/index.vue

@@ -0,0 +1,285 @@
+<!--
+  @FileDescription: 登录demo页面
+-->
+<template>
+  <div
+    class="loginWrapper"
+    id="app"
+  >
+    <div class="loginPanel">
+      <div class="divWelcome"></div>
+      <div class="loginContainer">
+        <el-form
+          ref="loginFormRef"
+          status-icon
+          :model="loginForm"
+          label-width="0px"
+          class="loginForm"
+          :rules="loginRules"
+        >
+          <el-form-item>
+            <div class="heard_images">
+              <img
+                src="@assets/images/login/logo.png"
+                alt=""
+              />
+            </div>
+            <div class="loginTitle">
+              <span>系统登录</span>
+            </div>
+          </el-form-item>
+          <el-form-item
+            label
+            prop="userName"
+          >
+            <el-input
+              type="text"
+              name="userName"
+              v-model="loginForm.userName"
+              auto-complete="off"
+              clearable
+              placeholder="请输入用户名"
+              class="userName"
+            ></el-input>
+          </el-form-item>
+          <el-form-item
+            label
+            prop="password"
+          >
+            <el-input
+              :type="passw"
+              name="password"
+              v-model="loginForm.password"
+              class="password"
+            >
+              <i
+                slot="suffix"
+                :class="icon"
+                @click="showPass"
+              ></i>
+            </el-input>
+          </el-form-item>
+          <el-form-item>
+            <div
+              class="homeBut"
+              type="primary"
+              native-type="submit"
+              @click="startLogin"
+              :loading="loading"
+            >
+              登录
+            </div>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { loginApi } from '@/services/login'
+  import { setToken, setRefreshToken } from '@/utils/auth'
+  const { proxy } = getCurrentInstance()
+
+  // 定义组件名称
+  defineOptions({
+    name: 'Login',
+  })
+
+  // 响应式数据
+  const passw = ref('password')
+  const icon = ref('el-input__icon el-icon-view')
+  const loading = ref(false)
+  const loginFormRef = ref(null)
+
+  const loginForm = reactive({
+    userName: '',
+    password: '',
+  })
+
+  const loginRules = {
+    userName: [
+      {
+        required: true,
+        trigger: ['blur', 'change'],
+        message: '请输入账号',
+      },
+    ],
+    password: [
+      {
+        required: true,
+        trigger: ['blur', 'change'],
+        message: '请输入密码',
+      },
+    ],
+  }
+
+  // 密码的隐藏和显示
+  const showPass = () => {
+    // 点击图标是密码隐藏或显示
+    if (passw.value == 'text') {
+      passw.value = 'password'
+      // 更换图标
+      icon.value = 'el-input__icon el-icon-view'
+    } else {
+      passw.value = 'text'
+      icon.value = 'el-input__icon el-icon-loading'
+    }
+  }
+
+  const startLogin = () => {
+    loginFormRef.value.validate((valid) => {
+      if (valid) {
+        loading.value = true
+        // 通用登录逻辑
+        loginApi({
+          username: loginForm.userName,
+          password: loginForm.password,
+        })
+          .then((res) => {
+            if (res.success) {
+              const { token, refreshToken } = res.data
+              setToken(token)
+              setRefreshToken(refreshToken)
+              proxy.$message.success('登录成功')
+              // 跳转到首页或重定向页面
+              const redirect = route.query.redirect || '/'
+              router.push(redirect)
+            } else {
+              proxy.$message.error(res.msg || '登录失败')
+            }
+          })
+          .catch((err) => {
+            proxy.$message.error(err.message || '登录请求异常')
+          })
+          .finally(() => {
+            loading.value = false
+          })
+      }
+    })
+  }
+</script>
+
+<style lang="scss" scoped>
+  .loginWrapper {
+    height: 100%;
+    background: url('@assets/images/login/img.png') no-repeat;
+    background-size: 100% 100%;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: center;
+    align-items: center;
+    font-size: 14px;
+  }
+
+  .loginPanel {
+    display: flex;
+    height: 50%;
+    width: 62%;
+    min-height: 630px;
+    min-width: 760px;
+  }
+
+  .divWelcome {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    background: url('@assets/images/login/person.png') no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .loginContainer {
+    width: 440px;
+    height: 630px;
+    box-sizing: border-box;
+    background: #fff;
+    display: flex;
+    align-items: center;
+    padding: 1rem;
+    justify-content: center;
+  }
+
+  .heard_images {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 10px;
+  }
+
+  .heard_images img {
+    width: 94px;
+    height: 94px;
+    line-height: 94px;
+  }
+
+  .loginTitle {
+    width: 300px;
+    height: 50px;
+    line-height: 50px;
+    text-align: center;
+    font-size: 20px;
+    font-family: Microsoft YaHei;
+    font-weight: 400;
+    color: rgba(44, 149, 255, 1);
+    border-bottom: 1px solid rgba(44, 149, 255, 1);
+  }
+
+  .redior {
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  .loginForm {
+    width: 95%;
+  }
+
+  .homeBut {
+    height: 48px;
+    font-size: 16px;
+    width: 100%;
+    background: #66b1ff;
+    border-color: #66b1ff;
+    color: #fff;
+    padding: 9px 15px;
+    border-radius: 3px;
+    text-align: center;
+    cursor: pointer;
+  }
+
+  .el-form-item {
+    margin-bottom: 16px !important;
+  }
+  :deep(.el-form-item__content .el-input .el-input__inner) {
+    height: 48px;
+    line-height: 48px;
+    color: gray !important;
+    background: rgba(255, 255, 255, 1);
+    border: 1px solid rgba(233, 238, 243, 1) !important;
+    opacity: 1;
+    border-radius: 4px;
+  }
+
+  :deep(.el-form-item__content .el-input .el-input__inner) :focus {
+    border: 1px solid #4d98ff !important;
+  }
+
+  :deep(.el-form-item__content .el-input .el-input__inner) :hover {
+    border: 1px solid #4d98ff !important;
+  }
+
+  .el-button {
+    height: 48px !important;
+    font-size: 16px !important;
+  }
+
+  .el-switch .el-switch__label {
+    color: #c4cbd2 !important;
+  }
+
+  .el-switch .el-switch__label .is-active {
+    color: #4d98ff !important;
+  }
+</style>

package/templates/default/vite/plugins/autoComponents.js

@@ -0,0 +1,18 @@
+import components from 'unplugin-vue-components/vite'
+// import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
+
+// 配置自动组件注册
+export default function createAutoComponents() {
+  return components({
+    // 关闭element-plus组件自动注册（因为element-plus自动注册会导致全局注册的方法失效，如proxy.$message失效）
+    // resolvers: [ElementPlusResolver()],
+
+    dirs: ['src/components', 'src/views'],
+    directoryAsNamespace: false, // 关闭目录命名空间,虽然能防止组件名冲突，但是组件标签名太长
+    dts: 'src/components.d.ts', // 生成组件注册名称，如果要关闭可以这样：dts: false
+
+    // importPathTransform: (path) =>{
+    //   return path.replace(/^src\/components/, 'H') // 路径替换为前缀
+    // }
+  })
+}

package/templates/default/vite/plugins/autoImport.js

@@ -0,0 +1,13 @@
+import autoImport from 'unplugin-auto-import/vite'
+// import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
+
+// 配置自动导入,这样项目中的文件就不需要import导入下面类库就可以直接使用了
+export default function createAutoImport() {
+  return autoImport({
+    // 关闭element-plus组件自动导入
+    // resolvers: [ElementPlusResolver()],
+
+    imports: ['vue', 'vue-router', 'pinia'],
+    dts: 'src/imports.d.ts', // 生成自动导入注册名称，如果要关闭可以这样：dts: false
+  })
+}

package/templates/default/vite/plugins/compression.js

@@ -0,0 +1,24 @@
+import compression from 'vite-plugin-compression'
+
+// 配置 gzip,针对资源进行自动gzip压缩
+export default function createCompression() {
+  // const plugin = []
+  // const { VITE_BUILD_COMPRESS } = env
+  // if (VITE_BUILD_COMPRESS) {
+  //     const compressList = VITE_BUILD_COMPRESS.split(',')
+  //     if (compressList.includes('gzip')) {
+  //         plugin.push(
+  //             compression({
+  //                 ext: '.gz',
+  //                 deleteOriginFile: false
+  //             })
+  //         )
+  //     }
+  // }
+  // return plugin
+
+  return compression({
+    ext: '.gz',
+    deleteOriginFile: false,
+  })
+}

package/templates/default/vite/plugins/externals.js

@@ -0,0 +1,8 @@
+import { viteExternalsPlugin } from 'vite-plugin-externals'
+
+// 将第三方依赖（如echarts）声明为外部资源，不打包进 bundle，通过 CDN 引入，减小包体积。
+export default function createExternals() {
+  return viteExternalsPlugin({
+    // vue: 'Vue' // 此配置会将vue替换为全局变量Vue，避免打包到bundle中。
+  })
+}

package/templates/default/vite/plugins/index.js

@@ -0,0 +1,18 @@
+import vue from '@vitejs/plugin-vue'
+import createAutoImport from './autoImport'
+import createAutoComponents from './autoComponents'
+import createCompression from './compression'
+import createExternals from './externals'
+import createVisualizer from './visualizer'
+import vueDevTools from 'vite-plugin-vue-devtools'
+export default function createVitePlugins(isBuild = false) {
+  const vitePlugins = [vue()]
+  vitePlugins.push(createAutoImport())
+  vitePlugins.push(createAutoComponents())
+  isBuild && vitePlugins.push(createCompression())
+  isBuild && vitePlugins.push(createExternals())
+  isBuild && vitePlugins.push(createVisualizer())
+  !isBuild && vitePlugins.push(vueDevTools())
+
+  return vitePlugins
+}

package/templates/default/vite/plugins/visualizer.js

@@ -0,0 +1,11 @@
+import { visualizer } from 'rollup-plugin-visualizer' // 包分析
+
+// 包大小分析（生产构建时启用）
+export default function createVisualizer() {
+  return visualizer({
+    open: false,
+    gzipSize: true,
+    brotliSize: true,
+    filename: './dist/report.html',
+  })
+}

package/templates/default/vite.config.js

@@ -0,0 +1,185 @@
+import { defineConfig, loadEnv } from 'vite'
+import { resolve, dirname } from 'path'
+import { fileURLToPath } from 'url'
+import createVitePlugins from './vite/plugins'
+// import { readdirSync } from 'fs';
+
+// https://vite.dev/config/
+export default defineConfig(({ mode, command }) => {
+  // mode如果没设置默认值：production | development
+  // command如果没设置默认值： dev | build
+  const __dirname = dirname(fileURLToPath(import.meta.url))
+  const __cwd = process.cwd() /* eslint-disable-line no-undef */
+
+  // ########环境变量说明begin########
+  // import.meta.env的变量如下：
+  // 以下变量是系统自带的变量
+  // import.meta.env.MODE: 当前环境模式
+  // import.meta.env.DEV: 当前环境是否是开发环境
+  // import.meta.env.PROD: 当前环境是否是生产环境
+  // import.meta.env.SSR: 当前环境是否是服务端渲染环境
+  // import.meta.env.BASE_URL: 当前环境基础路径
+  // 以下变量是在.env文件中定义的变量
+  // import.meta.env.VITE_MOCK: 模拟数据地址
+  // import.meta.env.VITE_PATH: 开发基础路径
+  // import.meta.env.VITE_PORT: 开发端口
+  // ########环境变量说明end########
+
+  // 环境变量
+  const env = loadEnv(mode, __cwd)
+  // 推荐：使用command进行环境判断，而非直接检查MODE,因为MODE可能被环境变量文件或者命令改变
+  const isProduction = command === 'build'
+  const base = env.VITE_PATH || '/'
+  const port = Number(env.VITE_PORT) || 3001
+
+  // // 多页面应用自动配置
+  // const pages = readdirSync('./src/pages').reduce((arr, page) => {
+  //   arr[page] = resolve(__dirname, `src/pages/${page}/index.html`);
+  //   return arr;
+  // }, {});
+
+  return {
+    // 项目根目录,是指相对html页面的路径，（vite官方标准不建议把html放在src或public下）
+    root: __cwd,
+
+    // 公共基础路径（部署时使用，相当于vue2中的publicPath 配置项）（此处配置会成为 import.meta.env.BASE_URL 的值）
+    base: base,
+
+    // 开发服务器配置
+    server: {
+      host: '0.0.0.0',
+      port: port,
+      open: true,
+      cors: true,
+      proxy: {
+        '/socket.io': {
+          // 代理 websockets 或 socket.io 写法：ws://localhost:5173/socket.io -> ws://localhost:5174/socket.io
+          target: 'ws://localhost:5174',
+          ws: true,
+        },
+        // 示例：API 代理配置
+        '/api': {
+          target: 'http://localhost:8080',
+          changeOrigin: true,
+          rewrite: (path) => path.replace(/^\/api/, ''),
+        },
+      },
+      // 当路由模式是history模式时，且多页面时候 server需要特别配置，防止404
+      // historyApiFallback: {
+      //   rewrites: [
+      //     { from: /./, to: '/index.html' },
+      //     { from: /^\/system/, to: '/system.html' },
+      //   ],
+      // },
+    },
+
+    // 插件配置
+    plugins: createVitePlugins(isProduction),
+
+    // 路径别名配置
+    resolve: {
+      alias: {
+        '~': resolve(__dirname, './'),
+        '@': resolve(__dirname, './src'),
+        '@mock': resolve(__dirname, './mock'),
+        '@public': resolve(__dirname, './public'),
+        '@pages': resolve(__dirname, './src/pages'),
+        '@components': resolve(__dirname, './src/components'),
+        '@views': resolve(__dirname, './src/views'),
+        '@routers': resolve(__dirname, './src/routers'),
+        '@stores': resolve(__dirname, './src/stores'),
+        '@styles': resolve(__dirname, './src/styles'),
+        '@utils': resolve(__dirname, './src/utils'),
+        '@assets': resolve(__dirname, './src/assets'),
+        '@services': resolve(__dirname, './src/services'),
+        '@plugins': resolve(__dirname, './src/plugins'),
+      },
+      // import引用可以忽略文件后缀如：import router from './router' === import router from './router/index.js'
+      extensions: ['.mjs', '.ts', '.jsx', '.tsx', '.json', '.js', '.vue', '.css', '.scss'],
+    },
+
+    // CSS预处理器配置
+    css: {
+      // modules: {  // 启用CSS modules
+      //   generateScopedName: '[name]__[local]___[hash:base64:5]' // 生成的类名格式
+      // },
+      preprocessorOptions: {
+        scss: {
+          additionalData: `
+            @use "${resolve(__dirname, '../../packages/ui/src/styles/variables.scss')}" as *;
+            @use "${resolve(__dirname, '../../packages/ui/src/styles/mixin.scss')}" as *;
+          `,
+        },
+      },
+    },
+
+    // 构建配置
+    build: {
+      outDir: 'dist',
+      assetsDir: 'assets',
+      sourcemap: !isProduction, // 开发保留 sourcemap
+      target: ['es2015', 'edge88', 'chrome87'], // 产物目标浏览器
+      minify: 'esbuild', // 代码压缩，vite默认使用esbuild，如果需要使用terser，需要安装npm install terser@vitejs/plugin-terser -D
+      // 下面要配合 minify: 'terser'，才能生效
+      // terserOptions: isProduction
+      //   ? {
+      //       compress: {
+      //         drop_console: true, // 生产环境移除 console
+      //         drop_debugger: true
+      //       },
+      //       format: {
+      //         comments: false // 移除注释
+      //       }
+      //     }
+      //   : {},
+      rollupOptions: {
+        // 多页面应用配置,通过自动配置
+        input: {
+          // 多页面：一张图
+          index: resolve(__dirname, 'index.html'),
+        },
+        output: {
+          format: 'es', // 输出格式为 ES 模块
+          entryFileNames: 'assets/js/entry-[name]-[hash].js',
+          chunkFileNames: 'assets/js/[name]-[hash].js',
+          assetFileNames: 'assets/[ext]/[name]-[hash].[ext]',
+          manualChunks: {
+            'x-vuelib': ['vue', 'vue-router', 'pinia', 'axios', 'dayjs', 'lodash-es'],
+            'x-eleuilib': ['element-plus'],
+          },
+          experimentalMinChunkSize: 2048, // 该选项用于为代码分割设置一个以字节为单位的最小 chunk 大小
+          // inlineDynamicImports: true // 该选项用于内联动态引入,该选项只在单页面应用的时候起作用
+
+          // globals: { // 不打包的全局变量声明，告诉 Rollup vue 是外部依赖 和 external配套使用
+          //   vue: 'Vue'
+          // }
+        },
+        // external: ['vue', 'axios'], // 放在externals.js插件中处理了，排除打包，如：['vue', 'axios']，通过html中引入的库，如：<script src="https://cdn.jsdelivr.net/npm/vue@3.2.31/dist/vue.global.prod.js"></script>
+
+        // 以下属性废弃
+        // cssCodeSplit: true, // 启用 CSS 代码分割
+        // chunkSizeWarningLimit: 2000, //  chunk 大小警告的限制（以 kbs 为单位）
+        // assetsInlineLimit: 2048 // 小于2kb的资源内联
+      },
+    },
+
+    // 优化依赖预构建(当你首次启动 vite 时，Vite 在本地加载你的站点之前预构建了项目依赖。)
+    optimizeDeps: {
+      include: ['vue', 'vue-router', 'pinia', 'axios', 'element-plus', 'dayjs'], // 默认情况下，不在 node_modules 中的，链接的包不会被预构建
+      exclude: ['@huitu'], // 在预构建中强制排除的依赖项
+      force: false, // 强制进行依赖预构建
+    },
+
+    // 下面要配合 minify: 'esbuild'，才能生效
+    esbuild: {
+      drop: isProduction ? ['console', 'debugger'] : [],
+      legalComments: 'none',
+    },
+
+    // 日志级别
+    logLevel: 'info',
+
+    // 缓存配置
+    cacheDir: resolve(__dirname, 'node_modules/.viteCache'),
+  }
+})