@moluoxixi/create-app 2.0.404 → 2.0.407

package/templates/vue/base/src/App.vue

@@ -6,6 +6,7 @@
 /**
  * 根组件
  */
+import { RouterView } from 'vue-router'
 </script>
 
 <style scoped>

package/templates/vue/base/src/assets/styles/base.scss

@@ -0,0 +1,69 @@
+:root {
+  --primary-color: #3a77ff; /* 主色调 */
+  --primary-color-1: #3a81ff; /* 辅助色1 */
+  --primary-color-2: #518fff; /* 辅助色2 */
+  --primary-color-3: #53a0fd; /* 辅助色3 */
+  --primary-color-4: #f7faff; /* 辅助色4 */
+  --success-color: #0eb67f; /* 辅助色5 */
+  --success-color-1: #f6fffc; /* 辅助色6 */
+  --warning-color: #f5ab01; /* 提醒色 */
+  --danger-color: #ef6b53; /* 警告色 */
+
+  /* 文字颜色 */
+  --text-color: #2a3651;
+  --text-color-1: #29354f;
+  --text-color-disable: #a9aeb9;
+  --text-color-choose: #3a77ff;
+  --text-color-white: white;
+
+  /* 边框色 */
+  --border-color-1: #dcdfe6;
+  --border-color-2: #b1b6bd;
+  --border-color-3: #e3e6e9;
+  --border-color-4: #e0e4e8;
+  --border-color-5: #0317c4bf;
+  --border-color-6: #7ba4ff;
+
+  /* 背景色 */
+  --bg-color-1: #f1f2f4;
+  --bg-color-2: #fafbfc;
+  --bg-color-3: #29354f;
+  --bg-color-4: #f5f7fa;
+  --bg-color-5: #f6f9ff;
+  --bg-color-6: #ebf2ff;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+}
+
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #dddee0; /* 设置滑块的颜色 */
+  border-radius: 5px; /* 设置滑块的圆角 */
+}
+
+body {
+  color: var(--text-color);
+  transition:
+    color 0.5s,
+    background-color 0.5s;
+  font-size: 14px;
+  font-family: SourceHanSans-Regular, serif;
+}
+
+#app {
+  margin: 0;
+  padding: 0;
+  font-weight: normal;
+  background: #f1f2f4;
+  height: 100%;
+  overflow-y: auto;
+}

package/templates/vue/base/src/assets/styles/custom.scss

@@ -0,0 +1,40 @@
+.text-bold {
+  font-family: SourceHanSans-Semibold, serif;
+  font-weight: bold;
+}
+
+.text-medium {
+  font-family: SourceHanSans-Medium, serif;
+}
+
+.text-regular {
+  font-family: SourceHanSans-Regular, serif;
+}
+
+.text-light {
+  font-family: SourceHanSans-Light, serif;
+}
+
+.box-shadow {
+  box-shadow: 0 2px 10px 0 rgb(52 81 212 / 20%);
+}
+
+.rounded-0 {
+  border-radius: 0;
+}
+
+.rounded-4 {
+  border-radius: 4px;
+}
+
+.rounded-8 {
+  border-radius: 8px;
+}
+
+.rounded-12 {
+  border-radius: 12px;
+}
+
+.rounded-16 {
+  border-radius: 16px;
+}

package/templates/vue/base/src/assets/styles/tailwind.scss

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

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

@@ -2,3 +2,25 @@
  * 布局组件导出
  * 注意：具体的布局组件在对应的 UI 库 feature 中
  */
+import type { App, Component } from 'vue'
+
+const layoutFiles = import.meta.glob('./*.vue', { eager: true, import: 'default' })
+const layouts = Object.keys(layoutFiles).reduce((modules, modulePath) => {
+  const nameArr: string[] = modulePath.split('/')
+  const name: string | undefined
+    = nameArr.at(-1) === 'index.vue' ? nameArr.at(-2) : nameArr.at(-1)?.slice(0, -4)
+  const layout: Component = layoutFiles[modulePath] as Component
+  if (!layout)
+    return modules
+  if (name) {
+    modules[name!] = layout as Component
+  }
+  return modules
+}, {} as any)
+layouts.install = function (app: App) {
+  const layoutNames = Object.keys(layouts)
+  layoutNames.forEach((name) => {
+    app.component(name, layouts[name!])
+  })
+}
+export default layouts

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

@@ -21,6 +21,7 @@ import getRouter from './router'
 // 导入样式文件
 <% if (uiLibrary === 'element-plus') { -%>
 import '@/assets/styles/element/index.scss'
+import '@/assets/styles/element/fixQiankun.scss'
 <% } -%>
 import '@/assets/styles/main.scss'
 import '@/assets/fonts/index.css'

package/templates/vue/base/src/router/layout.vue

@@ -0,0 +1,15 @@
+<template>
+  <component :is="layout" />
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import layouts from '@/layouts'
+import { useSystemStore } from '@/stores/modules/system'
+
+const systemInfo = useSystemStore()
+const layoutType = computed(() => systemInfo.layout)
+const layout = computed(() => layouts[layoutType.value])
+</script>
+
+<style lang="scss" scoped></style>

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

@@ -0,0 +1,6 @@
+import { createPinia } from 'pinia'
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
+
+const store = createPinia()
+store.use(piniaPluginPersistedstate)
+export { store }

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

@@ -0,0 +1,51 @@
+import { defineStore } from 'pinia'
+import { store } from '../index.ts'
+
+/**
+ * 系统对象
+ * @returns {object} 系统存储对象
+ */
+const systemStore = defineStore('system', {
+  state: () => ({
+    /**
+     * 主题颜色
+     * @type {string}
+     */
+    themeColor: '#3a77ff',
+    /**
+     * 布局
+     * @type {string}
+     */
+    layout: 'element',
+    /**
+     * 系统编码
+     * @type {string}
+     */
+    systemCode: import.meta.env.VITE_APP_CODE || '',
+  }),
+  actions: {
+    setSystemCode(systemCode: string) {
+      // 将当前的主题颜色设置为传入的颜色
+      this.systemCode = systemCode
+    },
+    /**
+     * 设置布局
+     * @param {string} layout - 新的布局
+     */
+    setLayout(layout: string) {
+      this.layout = layout
+    },
+    /**
+     * 设置主题颜色
+     * @param {string} color - 新的主题颜色
+     */
+    setTheme(color: string) {
+      // 将当前的主题颜色设置为传入的颜色
+      this.themeColor = color
+    },
+  },
+})
+
+export function useSystemStore() {
+  return systemStore(store)
+}

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

@@ -0,0 +1,41 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import { store } from '@/stores'
+
+export const userStore = defineStore(
+  'user',
+  () => {
+    // 定义token
+    const token = ref('')
+
+    /**
+     * 用户登录
+     * @param userInfo 用户信息（可选，qiankun 环境下可能从主应用传递）
+     */
+    const userLogin = async (userInfo?: any) => {
+      // 如果传递了用户信息，可以在这里处理登录逻辑
+      // 例如：设置 token、保存用户信息等
+      if (userInfo) {
+        // 可以根据实际需求处理用户信息
+        console.log('User login with info:', userInfo)
+      }
+    }
+
+    /**
+     * 获取 token
+     * @returns token 值
+     */
+    const getToken = () => {
+      return token.value
+    }
+
+    return { getToken, userLogin, token }
+  },
+  {
+    persist: true,
+  },
+)
+
+export function useUserStore() {
+  return userStore(store)
+}

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

@@ -0,0 +1,5 @@
+/**
+ * 工具函数导出
+ */
+
+export * from './modifyComponent'

package/templates/vue/base/src/utils/modifyComponent.tsx

@@ -0,0 +1,43 @@
+/**
+ * 组件修改工具
+ * 用于修改组件的行为，特别是 Element Plus 组件在 qiankun 环境下的行为
+ */
+
+import type { ComponentInstance } from 'vue'
+import { computed, defineComponent } from 'vue'
+
+/**
+ * 使用修改后的 props 包装组件
+ * @param OriginalComponent 原始组件
+ * @param modifier 属性修改函数
+ * @returns 包装后的组件
+ */
+function withModifiedProps(
+  OriginalComponent: ComponentInstance<any>,
+  modifier = (v: any) => v,
+) {
+  return defineComponent({
+    name: OriginalComponent.name,
+    setup(_: any, { attrs, slots }) {
+      const modifiedProps = computed(() => modifier(attrs))
+      return () => <OriginalComponent {...modifiedProps.value} v-slots={slots} />
+    },
+  })
+}
+
+/**
+ * 修改组件的行为
+ * @param app Vue 应用实例
+ * @param components 需要修改的组件数组
+ * @param modifier 属性修改函数
+ */
+export function modifyComponents(
+  app: any,
+  components: ComponentInstance<any>[],
+  modifier = (v: any) => v,
+) {
+  components.forEach((component) => {
+    const newComponent = withModifiedProps(component, modifier)
+    app.component(newComponent.name, newComponent)
+  })
+}

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

@@ -1,16 +1,25 @@
-{
-  "extends": "./tsconfig.base.json",
-  "compilerOptions": {
-    "composite": true,
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  },
-  "include": [
-    "env.d.ts",
-    "src/**/*",
-    "src/**/*.vue"
-  ]
-}
+{
+  "extends": "./tsconfig.base.json",
+  "compilerOptions": {
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "types": [
+      "vite/client"
+    ],
+    "composite": true
+  },
+  "vueCompilerOptions": {
+    "plugins": [
+      "@vue-macros/volar/define-models",
+      "@vue-macros/volar/define-slots",
+      "@vue-macros/volar/define-props",
+      "@vue-macros/volar/define-emits"
+    ]
+  },
+  "exclude": [
+    "dist",
+    "node_modules",
+    "cypress",
+    "vite.config.ts"
+  ]
+}

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

@@ -1,22 +1,29 @@
-{
-  "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
-  }
-}
+{
+  "lib": [
+    "DOM",
+    "ESNext"
+  ],
+  "compilerOptions": {
+    "target": "ESNext",
+    "jsx": "preserve",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ]
+    },
+    "resolveJsonModule": true,
+    "allowJs": true,
+    "strict": true,
+    "strictNullChecks": true,
+    "noUnusedLocals": true,
+    "noEmit": false,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "skipLibCheck": true,
+    "allowImportingTsExtensions": false,
+    "composite": true,
+    "declaration": true
+  }
+}

package/templates/vue/base/tsconfig.json

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

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

@@ -1,14 +1,14 @@
-{
-  "extends": "./tsconfig.base.json",
-  "compilerOptions": {
-    "composite": true,
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-    "types": ["node"]
-  },
-  "include": [
-    "vite.config.*",
-    "eslint.config.*",
-    "commitlint.config.*",
-    "scripts/**/*"
-  ]
-}
+{
+  "extends": "./tsconfig.base.json",
+  "compilerOptions": {
+    "module": "NodeNext",
+    "moduleResolution": "nodenext",
+    "noEmit": false,
+    "allowImportingTsExtensions": true,
+    "rewriteRelativeImportExtensions": true,
+    "composite": true
+  },
+  "include": [
+    "vite.config.ts"
+  ]
+}

package/templates/vue/features/element-plus/src/assets/styles/element/fixQiankun.scss

@@ -0,0 +1,10 @@
+.el-button {
+  border: 1px solid var(--border-color-1);
+  &--text {
+    border-color: transparent;
+  }
+}
+
+.el-radio-button__inner {
+  border: 1px solid var(--border-color-1);
+}

package/templates/vue/features/element-plus/src/assets/styles/element/index.scss

@@ -2,6 +2,9 @@
  * Element Plus 样式定制
  * 自定义 Element Plus 主题
  */
+@forward 'element-plus/theme-chalk/src/mixins/config.scss' with (
+  $namespace: $namespace
+);
 
 @forward 'element-plus/theme-chalk/src/common/var.scss' with (
   $colors: (

package/templates/vue/features/element-plus/src/components/SubMenu/src/_types/index.ts

@@ -1,5 +1 @@
-/**
- * SubMenu 类型导出
- */
-
-export * from './props'
+export * from './props'

package/templates/vue/features/element-plus/src/components/SubMenu/src/_types/props.ts

@@ -1,10 +1,16 @@
-/**
- * SubMenu Props 类型定义
- */
-
-import type { RouteRecordRaw } from 'vue-router'
-
-export interface SubMenuProps {
-  /** 菜单列表 */
-  menuList: RouteRecordRaw[]
-}
+export interface subMenuRouteMetaType {
+  title?: string
+  [key: string]: unknown
+}
+
+export interface subMenuRouteType {
+  path?: string
+  name?: string
+  meta?: subMenuRouteMetaType
+  children?: subMenuRouteType[]
+}
+
+export interface propsType {
+  routes: subMenuRouteType[]
+  menuHeight?: number
+}

package/templates/vue/features/element-plus/src/components/SubMenu/src/index.vue

@@ -1,23 +1,60 @@
-<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>
-
-<script setup lang="ts">
-/**
- * SubMenu 子菜单组件
- * 递归渲染菜单
- */
-import type { SubMenuProps } from './_types'
-
-defineProps<SubMenuProps>()
-</script>
+<template>
+  <template
+    v-for="(route, index) in props.routes"
+    :key="getRouteKey(route, index)"
+  >
+    <ElSubMenu
+      v-if="hasChildren(route)"
+      :teleported="false"
+      :index="getRouteIndex(route, index)"
+    >
+      <template #title>
+        {{ getRouteTitle(route) }}
+      </template>
+      <div :style="`max-height: calc(100vh - ${props.menuHeight || 0}px - 30px);overflow: auto`">
+        <SubMenu :routes="route.children ?? []" />
+      </div>
+    </ElSubMenu>
+
+    <ElMenuItem
+      v-else
+      :index="getRouteIndex(route, index)"
+    >
+      {{ getRouteTitle(route) }}
+    </ElMenuItem>
+  </template>
+</template>
+
+<script setup lang="ts">
+import type { propsType, subMenuRouteType } from './_types'
+
+import { ElMenuItem, ElSubMenu } from 'element-plus'
+
+defineOptions({
+  name: 'SubMenu',
+  inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<propsType>(), {
+  routes: () => [],
+  menuHeight: 60,
+})
+
+function getRouteKey(route: subMenuRouteType, index: number): string {
+  return route.path ?? `${index}`
+}
+
+function getRouteTitle(route: subMenuRouteType): string {
+  const fallback = route.name ?? ''
+  const metaTitle = route.meta?.title ?? ''
+  return metaTitle || fallback
+}
+
+function getRouteIndex(route: subMenuRouteType, index: number): string {
+  return route.path ?? `${index}`
+}
+
+function hasChildren(route: subMenuRouteType): boolean {
+  return Array.isArray(route.children) && route.children.length > 0
+}
+</script>