@moluoxixi/create-app 2.0.1

package/templates/vue/base/src/components/SubMenu/src/_types/props.ts

@@ -0,0 +1,11 @@
+/**
+ * SubMenu Props 类型定义
+ */
+
+import type { RouteRecordRaw } from 'vue-router';
+
+export interface SubMenuProps {
+  /** 菜单列表 */
+  menuList: RouteRecordRaw[];
+}
+

package/templates/vue/base/src/components/SubMenu/src/index.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+/**
+ * SubMenu 子菜单组件
+ * 递归渲染菜单
+ */
+import type { SubMenuProps } from './_types';
+
+defineProps<SubMenuProps>();
+</script>
+
+<template>
+  <template v-for="item in menuList" :key="item.path">
+    <el-sub-menu v-if="item.children?.length" :index="item.path">
+      <template #title>
+        <span>{{ item.meta?.title }}</span>
+      </template>
+      <SubMenu :menu-list="item.children" />
+    </el-sub-menu>
+    <el-menu-item v-else :index="item.path">
+      <span>{{ item.meta?.title }}</span>
+    </el-menu-item>
+  </template>
+</template>
+

package/templates/vue/base/src/directives/index.ts

@@ -0,0 +1,36 @@
+/**
+ * 自定义指令
+ * 全局指令注册
+ */
+
+import type { App } from 'vue';
+
+/**
+ * 注册全局指令
+ * @param app Vue 应用实例
+ */
+export default function directives(app: App): void {
+  // v-focus 自动聚焦指令
+  app.directive('focus', {
+    mounted(el: HTMLElement) {
+      el.focus();
+    },
+  });
+
+  // v-loading 加载状态指令
+  app.directive('loading', {
+    mounted(el: HTMLElement, binding) {
+      if (binding.value) {
+        el.classList.add('is-loading');
+      }
+    },
+    updated(el: HTMLElement, binding) {
+      if (binding.value) {
+        el.classList.add('is-loading');
+      } else {
+        el.classList.remove('is-loading');
+      }
+    },
+  });
+}
+

package/templates/vue/base/src/layouts/AntDesign.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+/**
+ * Ant Design Vue 布局组件
+ */
+import { ref } from 'vue';
+
+const sidebarCollapsed = ref(false);
+
+function toggleSidebar(): void {
+  sidebarCollapsed.value = !sidebarCollapsed.value;
+}
+</script>
+
+<template>
+  <a-layout class="layout-container">
+    <a-layout-sider
+      v-model:collapsed="sidebarCollapsed"
+      collapsible
+      :trigger="null"
+      class="layout-sider"
+    >
+      <div class="logo">
+        <span v-if="!sidebarCollapsed">Logo</span>
+      </div>
+      <a-menu theme="dark" mode="inline" :default-selected-keys="['1']">
+        <a-menu-item key="1">
+          <span>首页</span>
+        </a-menu-item>
+        <a-menu-item key="2">
+          <span>关于</span>
+        </a-menu-item>
+      </a-menu>
+    </a-layout-sider>
+    <a-layout>
+      <a-layout-header class="layout-header">
+        <a-button @click="toggleSidebar">
+          {{ sidebarCollapsed ? '展开' : '折叠' }}
+        </a-button>
+      </a-layout-header>
+      <a-layout-content class="layout-content">
+        <slot />
+      </a-layout-content>
+    </a-layout>
+  </a-layout>
+</template>
+
+<style scoped lang="scss">
+.layout-container {
+  height: 100vh;
+}
+
+.layout-sider {
+  overflow: auto;
+  height: 100vh;
+  position: fixed;
+  left: 0;
+  top: 0;
+  bottom: 0;
+}
+
+.logo {
+  height: 32px;
+  margin: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.layout-header {
+  background: #fff;
+  padding: 0 16px;
+  display: flex;
+  align-items: center;
+}
+
+.layout-content {
+  margin: 24px 16px;
+  padding: 24px;
+  background: #fff;
+  min-height: 280px;
+}
+</style>
+

package/templates/vue/base/src/layouts/element.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+/**
+ * Element Plus 布局组件
+ */
+import { ref } from 'vue';
+
+const sidebarCollapsed = ref(false);
+
+function toggleSidebar(): void {
+  sidebarCollapsed.value = !sidebarCollapsed.value;
+}
+</script>
+
+<template>
+  <el-container class="layout-container">
+    <el-aside :width="sidebarCollapsed ? '64px' : '200px'" class="layout-aside">
+      <div class="logo">
+        <span v-if="!sidebarCollapsed">Logo</span>
+      </div>
+      <el-menu
+        :collapse="sidebarCollapsed"
+        default-active="1"
+        class="layout-menu"
+      >
+        <el-menu-item index="1">
+          <template #title>首页</template>
+        </el-menu-item>
+        <el-menu-item index="2">
+          <template #title>关于</template>
+        </el-menu-item>
+      </el-menu>
+    </el-aside>
+    <el-container>
+      <el-header class="layout-header">
+        <el-button @click="toggleSidebar">
+          {{ sidebarCollapsed ? '展开' : '折叠' }}
+        </el-button>
+      </el-header>
+      <el-main class="layout-main">
+        <slot />
+      </el-main>
+    </el-container>
+  </el-container>
+</template>
+
+<style scoped lang="scss">
+.layout-container {
+  height: 100vh;
+}
+
+.layout-aside {
+  background-color: #304156;
+  transition: width 0.3s;
+}
+
+.logo {
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 20px;
+  font-weight: bold;
+}
+
+.layout-menu {
+  border-right: none;
+}
+
+.layout-header {
+  background-color: #fff;
+  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+  display: flex;
+  align-items: center;
+}
+
+.layout-main {
+  background-color: #f0f2f5;
+}
+</style>
+

package/templates/vue/base/src/layouts/index.ts

@@ -0,0 +1,7 @@
+/**
+ * 布局组件导出
+ */
+
+export { default as ElementLayout } from './element.vue';
+export { default as AntDesignLayout } from './AntDesign.vue';
+

package/templates/vue/base/src/main.ts.ejs

@@ -0,0 +1,100 @@
+/**
+ * 应用入口文件
+ * 初始化 Vue 应用并挂载到 DOM
+ */
+
+<% if (qiankun) { -%>
+import type { QiankunProps } from 'vite-plugin-qiankun/dist/helper'
+import { qiankunWindow, renderWithQiankun } from 'vite-plugin-qiankun/dist/helper'
+<% } -%>
+import { createApp } from 'vue'
+import directives from '@/directives'
+<% if (i18n) { -%>
+import i18n from '@/locales'
+<% } -%>
+<% if (sentry) { -%>
+import { initSentry } from '@/utils/sentry'
+<% } -%>
+import { store } from '@/stores'
+import App from './App.vue'
+import getRouter from './router'
+
+// 导入样式文件
+<% if (uiLibrary === 'element-plus') { -%>
+import '@/assets/styles/element/index.scss'
+<% } -%>
+import '@/assets/styles/main.scss'
+import '@/assets/fonts/index.css'
+
+<% if (qiankun) { -%>
+let app: ReturnType<typeof createApp> | null = null
+
+async function render(props: QiankunProps = {}): Promise<void> {
+  const { container } = props
+  app = createApp(App)
+
+  directives(app)
+  const router = getRouter(props)
+
+<% if (sentry) { -%>
+  initSentry(app, router, {
+    dsn: import.meta.env.VITE_SENTRY_DSN,
+    environment: import.meta.env.MODE,
+  })
+
+<% } -%>
+  app.use(store)
+<% if (i18n) { -%>
+  app.use(i18n)
+<% } -%>
+  app.use(router)
+  app.config.warnHandler = () => null
+
+  if (container) {
+    const root = container.querySelector('#app')
+    app.mount(root)
+  }
+  else {
+    app.mount('#app')
+  }
+}
+
+if (!qiankunWindow.__POWERED_BY_QIANKUN__) {
+  render({})
+}
+else {
+  renderWithQiankun({
+    async mount(props: QiankunProps) {
+      await render(props)
+    },
+    bootstrap() {},
+    unmount() {
+      app?.unmount()
+      app = null
+    },
+    update() {},
+  })
+}
+<% } else { -%>
+const app = createApp(App)
+
+directives(app)
+const router = getRouter({})
+
+<% if (sentry) { -%>
+initSentry(app, router, {
+  dsn: import.meta.env.VITE_SENTRY_DSN,
+  environment: import.meta.env.MODE,
+})
+
+<% } -%>
+app.use(store)
+<% if (i18n) { -%>
+app.use(i18n)
+<% } -%>
+app.use(router)
+app.config.warnHandler = () => null
+
+app.mount('#app')
+<% } -%>
+

package/templates/vue/base/src/pages/about/index.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+/**
+ * 关于页面
+ */
+</script>
+
+<template>
+  <div class="about-page">
+    <h1>关于</h1>
+    <p>这是关于页面</p>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.about-page {
+  padding: 24px;
+  text-align: center;
+
+  h1 {
+    font-size: 32px;
+    margin-bottom: 16px;
+    color: #333;
+  }
+
+  p {
+    font-size: 16px;
+    color: #666;
+  }
+}
+</style>
+

package/templates/vue/base/src/pages/home/index.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+/**
+ * 首页
+ */
+</script>
+
+<template>
+  <div class="home-page">
+    <h1>欢迎使用 Vue Template</h1>
+    <p>这是一个基于 Vue 3 + Vite + TypeScript 的项目模板</p>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.home-page {
+  padding: 24px;
+  text-align: center;
+
+  h1 {
+    font-size: 32px;
+    margin-bottom: 16px;
+    color: #333;
+  }
+
+  p {
+    font-size: 16px;
+    color: #666;
+  }
+}
+</style>
+

package/templates/vue/base/src/router/index.ts.ejs

@@ -0,0 +1,39 @@
+/**
+ * 路由配置
+ */
+
+<% if (qiankun) { -%>
+import type { QiankunProps } from 'vite-plugin-qiankun/dist/helper'
+import { qiankunWindow } from 'vite-plugin-qiankun/dist/helper'
+<% } -%>
+import { createRouter, createWebHistory } from 'vue-router'
+<% if (routeMode === 'file-system') { -%>
+import routes from '~pages'
+<% } else { -%>
+import { routes } from './routes'
+<% } -%>
+
+<% if (qiankun) { -%>
+export default function getRouter(props: QiankunProps = {}) {
+  const router = createRouter({
+    history: createWebHistory(
+      qiankunWindow.__POWERED_BY_QIANKUN__
+        ? '/sub-app/'
+        : import.meta.env.BASE_URL,
+    ),
+    routes,
+  })
+
+  return router
+}
+<% } else { -%>
+export default function getRouter(_props: Record<string, unknown> = {}) {
+  const router = createRouter({
+    history: createWebHistory(import.meta.env.BASE_URL),
+    routes,
+  })
+
+  return router
+}
+<% } -%>
+

package/templates/vue/base/src/stores/index.ts

@@ -0,0 +1,16 @@
+/**
+ * Pinia 状态管理配置
+ */
+
+import { createPinia } from 'pinia';
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
+
+export const store = createPinia();
+
+// 使用持久化插件
+store.use(piniaPluginPersistedstate);
+
+// 导出 store 模块
+export * from './modules/user';
+export * from './modules/system';
+

package/templates/vue/base/src/stores/modules/system.ts

@@ -0,0 +1,52 @@
+/**
+ * 系统状态管理
+ */
+
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+
+export type ThemeType = 'light' | 'dark';
+
+export const useSystemStore = defineStore(
+  'system',
+  () => {
+    /** 当前主题 */
+    const theme = ref<ThemeType>('light');
+
+    /** 当前语言 */
+    const language = ref<string>('zh');
+
+    /** 侧边栏折叠状态 */
+    const sidebarCollapsed = ref<boolean>(false);
+
+    /** 设置主题 */
+    function setTheme(value: ThemeType): void {
+      theme.value = value;
+    }
+
+    /** 设置语言 */
+    function setLanguage(value: string): void {
+      language.value = value;
+    }
+
+    /** 切换侧边栏 */
+    function toggleSidebar(): void {
+      sidebarCollapsed.value = !sidebarCollapsed.value;
+    }
+
+    return {
+      theme,
+      language,
+      sidebarCollapsed,
+      setTheme,
+      setLanguage,
+      toggleSidebar,
+    };
+  },
+  {
+    persist: {
+      pick: ['theme', 'language', 'sidebarCollapsed'],
+    },
+  }
+);
+

package/templates/vue/base/src/stores/modules/user.ts

@@ -0,0 +1,48 @@
+/**
+ * 用户状态管理
+ */
+
+import type { UserInfo } from '@/apis/types';
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
+
+export const useUserStore = defineStore(
+  'user',
+  () => {
+    /** 用户信息 */
+    const userInfo = ref<UserInfo | null>(null);
+
+    /** token */
+    const token = ref<string>('');
+
+    /** 设置用户信息 */
+    function setUserInfo(info: UserInfo | null): void {
+      userInfo.value = info;
+    }
+
+    /** 设置 token */
+    function setToken(value: string): void {
+      token.value = value;
+    }
+
+    /** 清除用户信息 */
+    function clearUser(): void {
+      userInfo.value = null;
+      token.value = '';
+    }
+
+    return {
+      userInfo,
+      token,
+      setUserInfo,
+      setToken,
+      clearUser,
+    };
+  },
+  {
+    persist: {
+      pick: ['token'],
+    },
+  }
+);
+

package/templates/vue/base/tsconfig.app.json

@@ -0,0 +1,17 @@
+{
+  "extends": "./tsconfig.base.json",
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": [
+    "env.d.ts",
+    "src/**/*",
+    "src/**/*.vue"
+  ]
+}
+

package/templates/vue/base/tsconfig.base.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "preserve",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true
+  }
+}
+

package/templates/vue/base/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ]
+}
+

package/templates/vue/base/tsconfig.node.json

@@ -0,0 +1,15 @@
+{
+  "extends": "./tsconfig.base.json",
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "types": ["node"]
+  },
+  "include": [
+    "vite.config.*",
+    "eslint.config.*",
+    "commitlint.config.*",
+    "scripts/**/*"
+  ]
+}
+

package/templates/vue/base/vite.config.ts

@@ -0,0 +1,53 @@
+/**
+ * Vite 配置文件
+ * 基于 @moluoxixi/vite-config 的配置
+ */
+
+import path from 'node:path'
+import process from 'node:process'
+import cssModuleGlobalRootPlugin from '@moluoxixi/css-module-global-root-plugin'
+import { ViteConfig, wrapperEnv } from '@moluoxixi/vite-config'
+import { loadEnv } from 'vite'
+
+export default ViteConfig(
+  ({ mode }) => {
+    const env = loadEnv(mode!, process.cwd())
+    const viteEnv = wrapperEnv(env)
+    const rootPath = path.resolve()
+    const appCode = viteEnv.VITE_APP_CODE
+    const appTitle = viteEnv.VITE_APP_TITLE
+    const port = viteEnv.VITE_APP_PORT
+    return {
+      rootPath,
+      appTitle,
+      appCode,
+      port,
+      vue: true,
+      autoComponent: true,
+      viteConfig: {
+        plugins: [],
+        server: {
+          proxy: {
+            '/api': {
+              changeOrigin: true,
+              target: 'http://localhost:3000',
+            },
+          },
+        },
+        css: {
+          postcss: {
+            plugins: [
+              cssModuleGlobalRootPlugin,
+            ],
+          },
+          preprocessorOptions: {
+            scss: {
+              silenceDeprecations: ['legacy-js-api'],
+              api: 'modern-compiler',
+            },
+          },
+        },
+      },
+    }
+  },
+)