@moluoxixi/create-app 2.0.404 → 2.0.407

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"
+  }
+}

package/templates/vue/features/manualRoutes/src/router/index.ts

@@ -0,0 +1,45 @@
+import { cloneDeep } from 'lodash-es'
+import { assign, isEmpty } from 'radash'
+import { routes } from './routes'
+import { qiankunWindow } from 'vite-plugin-qiankun/dist/helper'
+import { createRouter, createWebHistory } from 'vue-router'
+
+// 手动配置的路由
+const Routes = [
+  {
+    path: '/',
+    name: 'layout',
+    component: () => import('@/router/layout.vue' as string),
+    redirect: routes[0]?.path,
+    children: routes,
+  },
+  {
+    path: '/:pathMatch(.*)*',
+    redirect: '/',
+  },
+]
+
+function getRouter(props: any) {
+  let base: string
+  const routes = cloneDeep(Routes)
+  if (qiankunWindow.__POWERED_BY_QIANKUN__) {
+    const { activeRule } = props.data
+    base = activeRule
+  }
+  else {
+    base = import.meta.env.VITE_APP_CODE
+  }
+  const router = createRouter({
+    history: createWebHistory(base),
+    routes,
+  })
+  router.beforeEach((_, from, next) => {
+    if (isEmpty(history.state.current)) {
+      assign(history.state, { current: from.fullPath })
+    }
+    next()
+  })
+  return router
+}
+
+export default getRouter

package/templates/vue/features/manualRoutes/src/router/layout.vue

@@ -1,9 +1,15 @@
 <template>
-  <RouterView />
+  <component :is="layout" />
 </template>
 
-<script setup lang="ts">
-/**
- * 路由布局组件
- */
+<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/features/manualRoutes/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/features/manualRoutes/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/features/manualRoutes/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/features/pageRoutes/package.json

@@ -1,5 +1,8 @@
 {
   "dependencies": {
-    "vite-plugin-pages": "^0.32.5"
+    "vite-plugin-pages": "^0.32.5",
+    "vite-plugin-qiankun": "^1.0.15",
+    "radash": "^12.1.0",
+    "vue-router": "^4.4.5"
   }
 }

package/templates/vue/features/pageRoutes/src/router/index.ts

@@ -0,0 +1,46 @@
+import { cloneDeep } from 'lodash-es'
+import { assign, isEmpty } from 'radash'
+import routes from '~pages'
+import { qiankunWindow } from 'vite-plugin-qiankun/dist/helper'
+import { createRouter, createWebHistory } from 'vue-router'
+
+// 自动生成的路由
+const routesChildrens = routes
+const Routes = [
+  {
+    path: '/',
+    name: 'layout',
+    component: () => import('@/router/layout.vue' as string),
+    redirect: routes[0]?.path,
+    children: routesChildrens,
+  },
+  {
+    path: '/:pathMatch(.*)*',
+    redirect: '/',
+  },
+]
+
+function getRouter(props: any) {
+  let base: string
+  const routes = cloneDeep(Routes)
+  if (qiankunWindow.__POWERED_BY_QIANKUN__) {
+    const { activeRule } = props.data
+    base = activeRule
+  }
+  else {
+    base = import.meta.env.VITE_APP_CODE
+  }
+  const router = createRouter({
+    history: createWebHistory(base),
+    routes,
+  })
+  router.beforeEach((_, from, next) => {
+    if (isEmpty(history.state.current)) {
+      assign(history.state, { current: from.fullPath })
+    }
+    next()
+  })
+  return router
+}
+
+export default getRouter

package/templates/vue/features/pageRoutes/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/features/pageRoutes/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/features/pageRoutes/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/features/pageRoutes/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/features/sentry/package.json

@@ -1,6 +1,8 @@
 {
   "dependencies": {
     "@sentry/vue": "^9.27.0",
-    "@sentry/vite-plugin": "^3.5.0"
+    "@sentry/vite-plugin": "^3.5.0",
+    "pinia": "^2.2.7",
+    "pinia-plugin-persistedstate": "^3.2.1"
   }
 }

package/templates/vue/features/sentry/src/stores/index.ts

@@ -0,0 +1,13 @@
+/**
+ * Pinia Store 配置
+ * 配置 Pinia 状态管理，集成持久化插件和 Sentry 监控插件
+ */
+
+import { createSentryPiniaPlugin } from '@sentry/vue'
+import { createPinia } from 'pinia'
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
+
+const store = createPinia()
+store.use(piniaPluginPersistedstate)
+store.use(createSentryPiniaPlugin())
+export { store }

package/templates/react/features/qiankun/package.json

@@ -1,5 +0,0 @@
-{
-  "dependencies": {
-    "vite-plugin-qiankun": "^1.0.15"
-  }
-}

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

@@ -1,36 +0,0 @@
-/**
- * 路由配置
- */
-
-<% if (qiankun) { -%>
-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'
-<% } -%>
-
-/**
- * 获取路由实例
- * @param props 路由属性
- * @returns 路由实例
- */
-export default function getRouter(props: Record<string, unknown> = {}) {
-  const router = createRouter({
-    history: createWebHistory(
-<% if (qiankun) { -%>
-      qiankunWindow.__POWERED_BY_QIANKUN__
-        ? '/sub-app/'
-        : import.meta.env.BASE_URL,
-<% } else { -%>
-      import.meta.env.BASE_URL,
-<% } -%>
-    ),
-    routes,
-  })
-
-  return router
-}
-

package/templates/vue/features/pinia/package.json

@@ -1,7 +0,0 @@
-{
-  "dependencies": {
-    "pinia": "^2.3.0",
-    "pinia-plugin-persistedstate": "^3.2.1",
-    "vue": "latest"
-  }
-}

package/templates/vue/features/pinia/src/stores/index.ts

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