@moluoxixi/create-app 2.0.404 → 2.0.406

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>

package/templates/vue/features/element-plus/src/layouts/element.vue

@@ -1,84 +1,120 @@
 <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>
+  <ElConfigProvider :namespace="systemCode" :empty-values="[undefined]">
+    <div
+      class="h-full"
+      :class="{ 'h-screen!': !qiankunWindow.__POWERED_BY_QIANKUN__ }"
+      :style="`--el-color-primary: ${themeColor || '#3A77FF'};`"
+    >
+      <ElContainer class="w-full h-full">
+        <ElHeader
+          v-if="!qiankunWindow.__POWERED_BY_QIANKUN__"
+          class="headerbox"
+          style="padding: 0"
+          height="60"
+        >
+          <div class="w-full h-full bg-primary flex justify-center">
+            <ElMenu :default-active="defaultTab" :ellipsis="false" mode="horizontal" router>
+              <SubMenu menu-height="60" :routes="routes" />
+            </ElMenu>
+          </div>
+        </ElHeader>
+        <ElMain>
+          <ElContainer class="h-full w-full">
+            <ElMain style="background-color: #fff">
+              <transition name="fade">
+                <RouterView v-slot="{ Component, route }">
+                  <keep-alive>
+                    <component :is="Component" v-if="route.meta.keep" :key="route.path" />
+                  </keep-alive>
+                  <component :is="Component" v-if="!route.meta.keep" :key="route.path" />
+                </RouterView>
+              </transition>
+            </ElMain>
+          </ElContainer>
+        </ElMain>
+      </ElContainer>
+    </div>
+  </ElConfigProvider>
 </template>
 
-<script setup lang="ts">
-/**
- * Element Plus 布局组件
- */
-import { ref } from 'vue'
+<script lang="ts" setup>
+import { ElConfigProvider, ElContainer, ElHeader, ElMain, ElMenu } from 'element-plus'
+import { qiankunWindow } from 'vite-plugin-qiankun/dist/helper'
+import { computed, reactive } from 'vue'
+import { RouterView, useRouter } from 'vue-router'
+import SubMenu from '@/components/SubMenu'
+import { useSystemStore } from '@/stores/modules/system'
 
-const sidebarCollapsed = ref(false)
-
-function toggleSidebar(): void {
-  sidebarCollapsed.value = !sidebarCollapsed.value
-}
+const router = useRouter()
+const routes = reactive(router.options.routes[0].children!)
+const systemStore = useSystemStore()
+const themeColor = computed(() => systemStore.themeColor)
+const systemCode = computed(() => {
+  return systemStore.systemCode
+})
+const defaultTab = computed(() => router.currentRoute.value.path)
 </script>
 
-<style scoped lang="scss">
-.layout-container {
-  height: 100vh;
+<style lang="scss" scoped>
+:deep(.el-main) {
+  --el-main-padding: 12px !important;
 }
-
-.layout-aside {
-  background-color: #304156;
-  transition: width 0.3s;
+.bg-primary {
+  background-color: var(--el-color-primary);
 }
+.headerbox {
+  :deep(.el-menu) {
+    background-color: var(--el-color-primary);
 
-.logo {
-  height: 60px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: #fff;
-  font-size: 20px;
-  font-weight: bold;
-}
+    .el-menu-item,
+    .el-sub-menu {
+      background-color: var(--el-color-primary);
+      color: #fff !important;
 
-.layout-menu {
-  border-right: none;
-}
+      .el-sub-menu__title {
+        background-color: var(--el-color-primary);
+        color: #fff !important;
+      }
 
-.layout-header {
-  background-color: #fff;
-  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
-  display: flex;
-  align-items: center;
-}
+      &.is-active,
+      &:hover {
+        background-color: #fff;
+        color: var(--el-color-primary) !important;
+
+        .el-sub-menu__title,
+        .el-sub-menu__title:hover {
+          background-color: #fff;
+          color: var(--el-color-primary) !important;
+        }
+      }
+    }
+
+    &.el-menu--popup {
+      background-color: #fff;
+
+      .el-sub-menu,
+      .el-menu-item {
+        background-color: #fff !important;
+        color: var(--el-color-primary) !important;
+
+        .el-sub-menu__title {
+          background-color: #fff;
+          color: var(--el-color-primary) !important;
+        }
+
+        &.is-active,
+        &:hover {
+          background-color: var(--el-color-primary) !important;
+          color: #fff !important;
 
-.layout-main {
-  background-color: #f0f2f5;
+          .el-sub-menu__title,
+          .el-sub-menu__title:hover {
+            background-color: var(--el-color-primary) !important;
+            color: #fff !important;
+          }
+        }
+      }
+    }
+  }
 }
 </style>

package/templates/vue/features/manualRoutes/package.json

@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "vite-plugin-qiankun": "^1.0.15",
+    "radash": "^12.1.0",
+    "vue-router": "^4.4.5"
+  }
+}