🧹 清理重复配置文件

- 删除根目录中重复的 NestJS 配置文件
- 删除 tsconfig.json, tsconfig.build.json, eslint.config.mjs, .prettierrc
- 保留 wwjcloud-nest/ 目录中的完整配置
- 避免配置冲突，确保项目结构清晰

admin-vben/src/layout/default/components/aside/index.vue

@@ -0,0 +1,68 @@
+<template>
+    <el-aside class="layout-aside w-auto">
+        <side class="hidden-xs-only slide" />
+    </el-aside>
+
+    <el-drawer v-model="systemStore.menuDrawer" direction="ltr" :with-header="false" custom-class="aside-drawer" size="210px">
+        <template #default>
+            <side />
+        </template>
+    </el-drawer>
+</template>
+
+<script lang="ts" setup>
+import { watch, computed } from 'vue'
+import { useRoute } from 'vue-router'
+import side from './side.vue'
+import useSystemStore from '@/stores/modules/system'
+
+const systemStore = useSystemStore()
+const dark = computed(() => {
+    return systemStore.dark
+})
+
+const route = useRoute()
+watch(route, () => {
+    systemStore.$patch(state => {
+        state.menuDrawer = false
+    })
+})
+</script>
+
+<style lang="scss">
+.layout-aside {
+    &.bright {
+        background-color: #F5F7F9;
+
+        li {
+            background-color: #F5F7F9;
+
+            &.is-active:not(.is-opened) {
+                position: relative;
+                color: #333;
+                background-color: #fff;
+
+                &::after {
+                    content: "";
+                    position: absolute;
+                    top: 0;
+                    bottom: 0;
+                    left: 0;
+                    width: 2px;
+                    background-color: var(--el-menu-active-color);
+                }
+            }
+        }
+    }
+
+    .slide {
+        border-right: 1px solid var(--el-border-color-extra-light);
+    }
+}
+
+.aside-drawer {
+    .el-drawer__body {
+        padding: 0 !important;
+    }
+}
+</style>

admin-vben/src/layout/default/components/aside/menu-item.vue

@@ -0,0 +1,119 @@
+<template>
+    <template v-if="meta.show">
+        <el-sub-menu v-if="routes.children" :index="String(routes.name)">
+            <template #title>
+                <div class="w-[16px] h-[16px] relative flex items-center" v-if="props.level == 1">
+                    <icon v-if="meta.icon" :name="meta.icon" class="absolute !w-auto" />
+                </div>
+                <span class="ml-[10px]">{{ meta.title }}</span>
+            </template>
+            <menu-item v-for="(route, index) in routes.children" :routes="route" :key="index" :level="props.level + 1" />
+            <template v-if="routes.name == 'addon_list' || routes.name == 'marketing_list'">
+                <template v-if="addonsMenus">
+                    <menu-item :routes="addonsMenus" :key="index" :level="props.level + 1"/>
+                </template>
+            </template>
+        </el-sub-menu>
+        <template v-else>
+            <el-menu-item :index="String(routes.name)" @click="router.push({ name: routes.name })" v-if="meta.addon && meta.parent_route && meta.parent_route.addon == ''">
+                <template #title>
+                    <div class="w-[16px] h-[16px] relative flex items-center" v-if="props.level == 1">
+                        <icon v-if="meta.icon" :name="meta.icon" class="absolute !w-auto" />
+                    </div>
+                    <span class="ml-[10px]">{{ meta.title }}</span>
+                </template>
+            </el-menu-item>
+            <el-menu-item :index="String(routes.name)" @click="router.push({ name: routes.name })" v-else>
+                <template #title>
+                    <div class="w-[16px] h-[16px] relative flex items-center" v-if="props.level == 1">
+                        <icon v-if="meta.icon" :name="meta.icon" class="absolute !w-auto" />
+                    </div>
+                    <span class="ml-[10px]">{{ meta.title }}</span>
+                </template>
+            </el-menu-item>
+        </template>
+        <div v-if="routes.is_border" class="!border-0 !border-t-[1px] border-solid mx-[25px] bg-[#f7f7f7] my-[5px]"></div>
+    </template>
+
+</template>
+
+<script lang="ts" setup>
+import { useRouter, useRoute } from 'vue-router'
+import { ref, computed, watch } from 'vue'
+import menuItem from './menu-item.vue'
+import useSystemStore from '@/stores/modules/system'
+import useUserStore from '@/stores/modules/user'
+import storage from '@/utils/storage'
+
+const router = useRouter()
+const route = useRoute()
+const userStore = useUserStore()
+const routers = useUserStore().routers
+const props = defineProps({
+    routes: {
+        type: Object,
+        required: true
+    },
+    level: {
+        type: Number,
+        default: 1
+    }
+})
+const systemStore = useSystemStore()
+const meta = computed(() => props.routes.meta)
+
+const addons = computed(() => {
+    const addons:Record<string, any> = {}
+    userStore.siteInfo?.apps.forEach((item: any) => { addons[item.key] = item })
+    userStore.siteInfo?.site_addons.forEach((item: any) => { addons[item.key] = item })
+    return addons
+})
+
+const systemAddonKeys = computed(() => {
+    return userStore.siteInfo?.site_addons.map((item: any) => item.key)
+})
+
+const addonRouters: Record<string, any> = {}
+routers.forEach(item => {
+    item.original_name = item.name
+    if (item.meta.addon) {
+        addonRouters[item.meta.addon] = item
+    }
+    if (item.meta.attr) {
+        addonRouters[item.meta.attr] = item
+    }
+})
+
+const addonsMenus = ref(null)
+
+watch(route, () => {
+    if (props.routes.name == 'addon_list') {
+        if (systemAddonKeys.value.includes(route.meta.addon) && addonRouters[route.meta.addon]) {
+            addonsMenus.value = addonRouters[route.meta.addon]
+        } else if (route.meta.attr && addonRouters[route.meta.attr]) {
+            addonsMenus.value = addonRouters[route.meta.attr]
+        } else {
+            addonsMenus.value = null
+        }
+    }
+
+    const marketingKeys = storage.get('defaultMarketingKeys')
+    const matchedName = route.matched[1]?.name
+    if (props.routes.name == 'marketing_list') {
+        if (marketingKeys && marketingKeys.includes(matchedName)) {
+            addonsMenus.value = route.matched[1] ?? []
+            addonsMenus.value.meta.show = 1
+        } else {
+            addonsMenus.value = null
+        }
+    }
+}, { immediate: true })
+</script>
+
+<style lang="scss">
+.el-sub-menu{
+    .el-icon{
+        width: auto;
+    }
+}
+</style>

admin-vben/src/layout/default/components/aside/side.vue

@@ -0,0 +1,146 @@
+<template>
+    <el-container class="w-[200px] h-screen layout-aside flex flex-col">
+        <el-header class="logo-wrap flex items-center justify-center h-[64px]">
+            <div class="logo flex items-center m-auto h-[64px]" v-if="!systemStore.menuIsCollapse">
+                <el-image style="width: 40px; height: 40px" :src="img(logoUrl)" fit="contain">
+                    <template #error>
+                        <div class="flex justify-center items-center w-full h-[40px]"><img class="max-w-[40px]" src="@/app/assets/images/icon-addon-one.png" alt=""  object-fit="contain"></div>
+                    </template>
+                </el-image>
+            </div>
+            <div class="logo flex items-center justify-center h-[64px]" v-else>
+                <i class="text-3xl iconfont iconyunkongjian"></i>
+            </div>
+        </el-header>
+        <el-main class="menu-wrap">
+            <el-scrollbar>
+                <el-menu :default-active="route.name" :router="true" class="aside-menu h-full" :unique-opened="true" :collapse="systemStore.menuIsCollapse" >
+                    <menu-item v-for="(route, index) in menuData" :routes="route" :key="index" />
+                </el-menu>
+                <div class="h-[48px]"></div>
+            </el-scrollbar>
+        </el-main>
+    </el-container>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, onMounted } from 'vue'
+import { useRoute } from 'vue-router'
+import useSystemStore from '@/stores/modules/system'
+import useUserStore from '@/stores/modules/user'
+import menuItem from './menu-item.vue'
+import { img } from '@/utils/common'
+import { findFirstValidRoute } from '@/router/routers'
+import { getShowMarketing } from '@/app/api/site'
+import storage from '@/utils/storage'
+
+const systemStore = useSystemStore()
+const userStore = useUserStore()
+const route = useRoute()
+const siteInfo = userStore.siteInfo
+const routers = userStore.routers
+const addonIndexRoute = userStore.addonIndexRoute
+const menuData = ref<Record<string, any>[]>([])
+const addonRouters: Record<string, any> = {}
+const logoUrl = computed(() => {
+    return userStore.siteInfo.icon ? userStore.siteInfo.icon : systemStore.website.icon
+})
+
+const getMarketingList = async () => {
+    const res = await getShowMarketing()
+    const marketingList = res.data
+    const marketingKeys = marketingList?.marketing?.list?.map(item => item.key) ?? []
+    // menuData.value.forEach((item, index, arr) => {
+    //     if (marketingKeys.includes(item.name)) {
+    //         arr.splice(index, 1)
+    //     }
+    // })
+    storage.set({ key: 'defaultMarketingKeys', data: marketingKeys })
+}
+
+onMounted(() => {
+    getMarketingList()
+})
+
+routers.forEach(item => {
+    item.original_name = item.name
+    if (item.meta.addon == '') {
+        if (item.meta.attr == '' && item.name != 'sign' && item.name != 'verify') {
+            if (item.children && item.children.length) {
+                item.name = findFirstValidRoute(item.children)
+            }
+            menuData.value.push(item)
+        }
+    } else if (item.meta.addon != '' && siteInfo?.apps.length == 1 && siteInfo?.apps[0].key == item.meta.addon && item.meta.show) {
+        if (item.children) {
+            item.children.forEach((citem: Record<string, any>) => {
+                citem.original_name = citem.name
+                if (citem.children && citem.children.length) {
+                    citem.name = findFirstValidRoute(citem.children)
+                }
+            })
+            menuData.value.unshift(...item.children)
+        } else {
+            menuData.value.unshift(item)
+        }
+    } else {
+        addonRouters[item.meta.addon] = item
+    }
+
+    // 排序, 功能正确，改了排序后需要把菜单排序的默认值重新调整一下【多应用一级菜单，单应用二级菜单】
+    // menuData.value.sort((a, b) => {
+    //     if (a.meta.sort && b.meta.sort) {
+    //         return b.meta.sort - a.meta.sort
+    //     } else if (a.meta.sort) {
+    //         return -1
+    //     } else if (b.meta.sort) {
+    //         return 1
+    //     } else {
+    //         return 0
+    //     }
+    // })
+})
+
+// 多应用时将应用插入菜单
+if (siteInfo?.apps.length > 1) {
+    const routers:Record<string, any>[] = []
+    siteInfo?.apps.forEach((item: Record<string, any>) => {
+        if (addonRouters[item.key]) {
+            addonRouters[item.key].name = addonIndexRoute[item.key]
+            routers.push(addonRouters[item.key])
+        }
+    })
+    menuData.value.unshift(...routers)
+
+    // 排序, 功能正确，改了排序后需要把菜单排序的默认值重新调整一下【多应用一级菜单，单应用二级菜单】
+    // menuData.value.sort((a, b) => {
+    //     if (a.meta.sort && b.meta.sort) {
+    //         return b.meta.sort - a.meta.sort
+    //     } else if (a.meta.sort) {
+    //         return -1
+    //     } else if (b.meta.sort) {
+    //         return 1
+    //     } else {
+    //         return 0
+    //     }
+    // })
+}
+</script>
+
+<style lang="scss">
+.menu-wrap {
+    padding: 0!important;
+
+    .el-menu {
+        border-right: 0!important;
+
+        .el-menu-item, .el-sub-menu__title {
+            --el-menu-item-height: 40px;
+        }
+
+        .el-sub-menu .el-menu-item {
+            --el-menu-sub-item-height: 40px;
+        }
+    }
+}
+</style>

admin-vben/src/layout/default/components/header/index.vue

@@ -0,0 +1,288 @@
+<template>
+    <el-container :class="['h-full px-[10px]',{'layout-header border-b border-color': !dark}]" >
+        <el-row class="w-100 h-full w-full">
+            <el-col :span="10">
+                <div class="left-panel h-full flex items-center">
+                    <!-- 左侧菜单折叠 -->
+                    <div class="hidden-sm-and-up navbar-item flex items-center h-full cursor-pointer" @click="toggleMenuCollapse">
+                        <icon name="element Expand" v-if="systemStore.menuIsCollapse" />
+                        <icon name="element Fold" v-else />
+                    </div>
+                    <!-- 刷新当前页 -->
+                    <div class="navbar-item flex items-center h-full cursor-pointer" @click="refreshRouter">
+                        <icon name="element Refresh" />
+                    </div>
+                    <!-- 面包屑导航 -->
+                    <div class="flex items-center h-full pl-[10px]">
+                        <el-breadcrumb separator="/">
+                             <!-- :to="route.path" class="inter" 这种修改方式导致部分跳转不对，需要重新调整菜单才可以 -->
+                            <el-breadcrumb-item v-for="(route, index) in breadcrumb" :to="route.path" class="inter" :key="index">{{route.meta.title }}</el-breadcrumb-item>
+                        </el-breadcrumb>
+                    </div>
+                </div>
+            </el-col>
+            <el-col :span="14">
+                <div class="right-panel h-full flex items-center justify-end">
+                    <div class="flex items-center flex-shrink-0 hidden-xs-only">
+                        <el-dropdown trigger="hover" :hide-on-click="false" popper-class="site-info-wrap" class="mr-[8px]">
+                            <!-- 状态 -->
+                            <div class="mx-[8px] bg-[#f6f6f6] border-[1px] border-solid border-[#eee] rounded-[4px] px-[9px] py-[6px] flex items-center">
+                                <span class="mr-[6px] text-[12px] !text-[#333]">{{siteInfo.site_name}}</span>
+                                <span class="!text-[10px] text-[#f56c6c]" :class="{'!text-[#67c23a]': siteInfo.status == 1, '!text-[#f56c6c]': siteInfo.status == 3}">{{ siteInfo.status_name }}</span>
+                            </div>
+                            <template #dropdown>
+                                <el-dropdown-menu>
+                                    <el-dropdown-item>
+                                        <!-- 站点id -->
+                                        <div class="text-[14px]">站点编号：{{siteInfo.site_id}}</div>
+                                    </el-dropdown-item>
+                                    <el-dropdown-item>
+                                        <!-- 到期时间 -->
+                                        <div v-if="siteInfo.expire_time == 0" class="text-[14px]">到期时间：永久</div>
+                                        <div v-else class="text-[14px]">到期时间：{{ siteInfo.expire_time }}</div>
+                                    </el-dropdown-item>
+                                </el-dropdown-menu>
+                            </template>
+                        </el-dropdown>
+                    </div>
+                    <div class="flex items-center flex-shrink-0 hidden-xs-only">
+                        <el-popover placement="bottom" :width="330" trigger="click" v-model:visible="isMenuSearch" >
+                            <template #reference>
+                                <i class="iconfont icona-sousuoV6xx-36 cursor-pointer px-[8px] !text-[14px]"></i>
+                            </template>
+                            <template #default>
+                                <div class="flex items-center">
+                                    <el-select v-model="selectedRoute"  filterable class="!w-[250px] mr-[20px] menu-select" :teleported="false" clearable  @change="handleRouteSelect">
+                                        <el-option v-for="item in flatRoutes" :key="item.name" :label="item.full_title" :value="item.name" >
+                                        </el-option>
+                                    </el-select>
+                                    <el-button type="primary" link @click="isMenuSearch = false">{{t('取消')}}</el-button>
+                                </div>
+                            </template>
+                        </el-popover>
+                    </div>
+                    <!-- 预览 只有站点时展示-->
+                    <i class="iconfont iconicon_huojian1 cursor-pointer px-[8px]" :title="t('visitWap')" @click="toPreview"></i>
+                    <i class="iconfont iconlingdang-xianxing cursor-pointer px-[8px]" :title="t('newInfo')" v-if="appType == 'site'"></i>
+                    <!-- 切换语言 -->
+                    <!-- <div class="navbar-item flex items-center h-full cursor-pointer">
+                        <switch-lang />
+                    </div> -->
+                    <!-- 切换全屏 -->
+                    <!-- <div class="navbar-item flex items-center h-full cursor-pointer" @click="toggleFullscreen">
+                        <icon name="iconfont icontuichuquanping" v-if="isFullscreen" />
+                        <icon name="iconfont iconquanping" v-else />
+                    </div> -->
+                    <!-- 布局设置 -->
+                    <div class="navbar-item flex items-center h-full cursor-pointer">
+                        <layout-setting />
+                    </div>
+                    <!-- 用户信息 -->
+                    <div class="navbar-item flex items-center h-full cursor-pointer">
+                        <user-info />
+                    </div>
+                </div>
+            </el-col>
+        </el-row>
+        <input type="hidden" v-model="comparisonToken">
+        <input type="hidden" v-model="comparisonSiteId">
+
+        <el-dialog v-model="detectionLoginDialog" :title="t('layout.detectionLoginTip')" width="30%" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
+            <span>{{ t('layout.detectionLoginContent') }}</span>
+            <template #footer>
+                <span class="dialog-footer">
+                    <el-button @click="detectionLoginFn">{{ t('layout.detectionLoginOperation') }}</el-button>
+                </span>
+            </template>
+        </el-dialog>
+    </el-container>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, onMounted } from 'vue'
+import layoutSetting from './layout-setting.vue'
+import userInfo from './user-info.vue'
+import { useFullscreen } from '@vueuse/core'
+import useSystemStore from '@/stores/modules/system'
+import useUserStore from '@/stores/modules/user'
+import useAppStore from '@/stores/modules/app'
+import { useRoute, useRouter } from 'vue-router'
+import { t } from '@/lang'
+import storage from '@/utils/storage'
+
+const appType = storage.get('app_type')
+const { toggle: toggleFullscreen } = useFullscreen()
+const systemStore = useSystemStore()
+const appStore = useAppStore()
+const route = useRoute()
+const router = useRouter()
+const screenWidth = ref(window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth)
+
+const userStore = useUserStore()
+const siteInfo:any = computed(() => {
+    return userStore.siteInfo
+})
+
+const dark = computed(() => {
+    return systemStore.dark
+})
+const isMenuSearch = ref(false)
+const routers = userStore.routers
+const getParentTitleChain=(meta:any) =>{
+    let titles = []
+    let current = meta?.parent_route
+
+    while (current) {
+        if (current.short_title) {
+        titles.unshift(current.short_title)
+        }
+        current = current.parent_route
+    }
+
+    return titles.join(' - ')
+}
+const flattenRoutes = (routes:any, parent = null)=> {
+    let flat = [];
+    routes.forEach(route => {
+        const { path, name, meta = {}, short_title, children } = route
+        const isLeaf = meta.type ==1 && meta.show==1
+        if(isLeaf){
+            const title = meta.title || short_title || ''
+            const parentTitleChain = getParentTitleChain(meta)
+            const fullTitle = parentTitleChain ? `${parentTitleChain} - ${title}` : title
+            const item = {
+                path,
+                name,
+                title,
+                parent_title: parentTitleChain,
+                full_title: fullTitle
+            };
+
+            flat.push(item);
+        }
+        if (children && children.length > 0) {
+            flat = flat.concat(flattenRoutes(children, route))
+        }
+    });
+
+    return flat;
+}
+const flatRoutes = flattenRoutes(routers)
+const selectedRoute = ref('')
+const handleRouteSelect = (name:any) => {
+    if (name) {
+        router.push({ name })
+        isMenuSearch.value = false
+    }
+}
+
+// 检测登录 start
+const detectionLoginDialog = ref(false)
+const comparisonToken = ref('')
+const comparisonSiteId = ref('')
+if (storage.get('comparisonTokenStorage')) {
+    comparisonToken.value = storage.get('comparisonTokenStorage')
+    // storage.remove(['comparisonTokenStorage']);
+}
+if (storage.get('comparisonSiteIdStorage')) {
+    comparisonSiteId.value = storage.get('comparisonSiteIdStorage')
+    // storage.remove(['comparisonSiteIdStorage']);
+}
+// 监听标签页面切换
+document.addEventListener('visibilitychange', e => {
+    if (document.visibilityState === 'visible' && (comparisonSiteId.value != storage.get('siteId') || comparisonToken.value != storage.get('token'))) {
+        detectionLoginDialog.value = true
+    }
+})
+
+const detectionLoginFn = () => {
+    detectionLoginDialog.value = false
+    location.href = `${location.origin}/site/`
+}
+// 检测登录 end
+
+onMounted(() => {
+    // 监听窗体宽度变化
+    window.onresize = () => {
+        return (() => {
+            screenWidth.value = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
+        })()
+    }
+})
+
+// watch(screenWidth, () => {
+//     if (screenWidth.value < 992) {
+//         if (!systemStore.menuIsCollapse) systemStore.toggleMenuCollapse(true)
+//     } else {
+//         if (systemStore.menuIsCollapse) systemStore.toggleMenuCollapse(false)
+//     }
+// })
+
+// 菜单栏展开折叠
+const toggleMenuCollapse = () => {
+    systemStore.$patch((state) => {
+        if (screenWidth.value < 768) {
+            state.menuDrawer = true
+            state.menuIsCollapse = false
+        } else {
+            systemStore.toggleMenuCollapse(!systemStore.menuIsCollapse)
+        }
+    })
+}
+
+// 刷新路由
+const refreshRouter = () => {
+    if (!appStore.routeRefreshTag) return
+    appStore.refreshRouterView()
+}
+
+// 面包屑导航
+const breadcrumb = computed(() => {
+    const matched = route.matched.filter(item => { return item.meta.title })
+    if (matched[0] && matched[0].path == '/') matched.splice(0, 1)
+    return matched
+})
+
+// 跳转去预览
+const toPreview = () => {
+    const url = router.resolve({
+        path: '/preview/wap',
+        query: {
+            page:'/'
+        }
+    })
+    window.open(url.href)
+}
+</script>
+
+<style lang="scss" scoped>
+.layout-header{
+    position: relative;
+    z-index: 5;
+    box-shadow: 0 0 4px 0 rgba(0,145,255,0.1);
+}
+.navbar-item {
+    padding: 0 8px;
+    &:hover {
+        background-color: var(--el-bg-color-page);
+    }
+}
+.index-item {
+	border: 1px solid;
+	border-color: var(--el-color-primary);
+    &:hover {
+		color: #fff;
+        background-color: var(--el-color-primary);
+    }
+}
+:deep(.el-dropdown-menu__item) {
+	&:focus {
+		background-color: transparent !important;
+		color: #333 !important;
+	}
+}
+:deep(.inter .el-breadcrumb__inner){
+    font-weight: inherit !important;
+    color: var(--el-text-color-regular) !important;
+}
+</style>

admin-vben/src/layout/default/components/header/layout-setting.vue

@@ -0,0 +1,92 @@
+<template>
+    <div class="flex">
+        <icon name="element Setting" @click="drawer = true" />
+
+        <el-drawer v-model="drawer" :title="t('layout.layoutSetting')" size="300px">
+            <el-scrollbar>
+                <!-- 黑暗模式 -->
+                <div class="setting-item flex items-center justify-between mb-[10px]">
+                    <div class="title text-base text-tx-secondary">{{ t('layout.darkMode') }}</div>
+                    <div>
+                        <el-switch v-model="dark" :active-value="true" :inactive-value="false" />
+                    </div>
+                </div>
+                <!-- 主题颜色 -->
+                <div class="setting-item flex items-center justify-between mb-[10px]">
+                    <div class="title text-base text-tx-secondary">{{ t('layout.themeColor') }}</div>
+                    <div>
+                        <el-color-picker v-model="theme" />
+                    </div>
+                </div>
+                <!-- 标签栏 -->
+                <div class="setting-item flex items-center justify-between mb-[10px]">
+                    <div class="title text-base text-tx-secondary">{{ t('layout.tab') }}</div>
+                    <div>
+                        <el-switch v-model="tab" :active-value="true" :inactive-value="false" />
+                    </div>
+                </div>
+            </el-scrollbar>
+        </el-drawer>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed } from 'vue'
+import useSystemStore from '@/stores/modules/system'
+import { useDark, useToggle } from '@vueuse/core'
+import { setThemeColor } from '@/utils/common'
+import { t } from '@/lang'
+import storage from "@/utils/storage";
+
+const drawer = ref(false)
+const systemStore = useSystemStore()
+
+const isDark = useDark()
+const toggleDark = useToggle(isDark)
+
+const dark = computed({
+    get () {
+        return systemStore.dark
+    },
+    set (val) {
+        systemStore.setTheme('dark', val)
+        toggleDark(val)
+        setThemeColor(systemStore.theme, systemStore.dark ? 'dark' : 'light')
+    }
+})
+
+const tab = computed({
+    get () {
+        return systemStore.tab
+    },
+    set (val) {
+        systemStore.$patch((state) => {
+            state.tab = val
+            storage.set({ key: 'tab', data: val })
+        })
+    }
+})
+
+const theme = computed({
+    get () {
+        return systemStore.theme
+    },
+    set (val) {
+        systemStore.setTheme('theme', val)
+        setThemeColor(systemStore.theme, systemStore.dark ? 'dark' : 'light')
+    }
+})
+
+</script>
+
+<style lang="scss" scoped>
+:deep(.el-drawer__header) {
+    margin-bottom: 0 !important;
+}
+
+.layout-style {
+    &>div:nth-child(2n+2) {
+        margin-right: 0;
+    }
+}
+</style>

admin-vben/src/layout/default/components/header/switch-lang.vue

@@ -0,0 +1,32 @@
+<template>
+    <el-dropdown @command="switchLang" :tabindex="1">
+        <icon name="iconfont iconfanyi" />
+        <template #dropdown>
+            <el-dropdown-menu>
+                <el-dropdown-item command="zh-cn" :disabled="systemStore.lang == 'zh-cn'">简体中文</el-dropdown-item>
+                <el-dropdown-item command="en" :disabled="systemStore.lang == 'en'">English</el-dropdown-item>
+            </el-dropdown-menu>
+        </template>
+    </el-dropdown>
+</template>
+
+<script lang="ts" setup>
+import useSystemStore from '@/stores/modules/system'
+import { language } from '@/lang'
+import { useRoute } from 'vue-router'
+import storage from '@/utils/storage'
+
+const route = useRoute()
+const systemStore = useSystemStore()
+
+const switchLang = (command: string) => {
+    systemStore.$patch((state) => {
+        state.lang = command
+        storage.set({ key: 'lang', data: command })
+    })
+    language.loadLocaleMessages(route.path, systemStore.lang)
+    location.reload()
+}
+</script>
+
+<style lang="scss" scoped></style>

admin-vben/src/layout/default/components/header/user-info.vue

@@ -0,0 +1,159 @@
+<template>
+    <div>
+        <el-dropdown @command="clickEvent" :tabindex="1">
+            <div class="userinfo flex h-full items-center">
+                <el-avatar v-if="userStore.userInfo.head_img" :size="25" :icon="UserFilled" :src="img(userStore.userInfo.head_img)"/>
+                <img v-else src="@/app/assets/images/member_head.png" class="w-[25px] rounded-full" />
+                <div class="user-name pl-[8px]">{{ userStore.userInfo.username }}</div>
+                <icon name="element ArrowDown" class="ml-[5px]" />
+            </div>
+            <template #dropdown>
+                <div class="p-[10px]">
+                    <div class="userinfo flex h-full items-center pb-[10px] border-b-[1px] border-solid border-[#e5e5e5]">
+                        <el-avatar v-if="userStore.userInfo.head_img" :size="45" :icon="UserFilled" :src="img(userStore.userInfo.head_img)"/>
+                        <img v-else src="@/app/assets/images/member_head.png" class="w-[45px] rounded-full" />
+                        <div>
+                            <div class="user-name pl-[8px] text-[14px]">{{ userStore.userInfo.username }}</div>
+                            <div class="pl-[8px] text-[13px] text-[#9699B6]">个人中心</div>
+                        </div>
+                    </div>
+                    <el-dropdown-menu>
+                        <el-dropdown-item @click="toLink('/home/index')" v-if="isAllowChange">
+                            <div class="flex items-center leading-[1] py-[5px]">
+                                <span class="iconfont iconqiehuan ml-[4px] !text-[14px] mr-[10px]"></span>
+                                <span class="text-[14px]">切换站点</span>
+                            </div>
+                        </el-dropdown-item>
+                        <el-dropdown-item @click="getUserInfoFn">
+                            <div class="flex items-center leading-[1] py-[5px]">
+                                <span class="iconfont iconshezhi1 ml-[4px] !text-[14px] mr-[10px]"></span>
+                                <span class="text-[14px]">账号设置</span>
+                            </div>
+                        </el-dropdown-item>
+                        <el-dropdown-item @click="changePasswordDialog=true">
+                            <div class="flex items-center leading-[1] py-[5px]">
+                                <span class="iconfont iconxiugai ml-[4px] !text-[14px] mr-[10px]"></span>
+                                <span class="text-[14px]">修改密码</span>
+                            </div>
+                        </el-dropdown-item>
+                        <el-dropdown-item @click="logout">
+                            <div class="flex items-center leading-[1] py-[5px]">
+                                <span class="iconfont icontuichudenglu ml-[4px] !text-[14px] mr-[10px]"></span>
+                                <span class="text-[14px]">退出登录</span>
+                            </div>
+                        </el-dropdown-item>
+                    </el-dropdown-menu>
+                </div>
+            </template>
+        </el-dropdown>
+        <el-dialog v-model="changePasswordDialog" width="450px" title="修改密码">
+            <div>
+                <el-form :model="saveInfo" label-width="90px" ref="formRef" :rules="formRules" class="page-form">
+                    <el-form-item :label="t('originalPassword')" prop="original_password">
+                        <el-input v-model="saveInfo.original_password" type="password" :placeholder="t('originalPasswordPlaceholder')" clearable class="input-width" maxlength="40" />
+                    </el-form-item>
+                    <el-form-item :label="t('newPassword')" prop="password">
+                        <el-input v-model="saveInfo.password" type="password" :placeholder="t('passwordPlaceholder')" clearable class="input-width" maxlength="40" />
+                        <div class="form-tip">{{t('passwordTip')}}</div>
+                    </el-form-item>
+                    <el-form-item :label="t('passwordCopy')" prop="password_copy">
+                        <el-input v-model="saveInfo.password_copy" type="password" :placeholder="t('passwordPlaceholder')" clearable class="input-width" maxlength="40" />
+                    </el-form-item>
+                </el-form>
+            </div>
+            <template #footer>
+                <span class="dialog-footer">
+                    <el-button @click="changePasswordDialog = false">{{t('cancel')}}</el-button>
+                    <el-button type="primary" @click="submitForm(formRef)">{{t('save')}}</el-button>
+                </span>
+            </template>
+        </el-dialog>
+        <user-info-edit ref="userInfoEditRef" />
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { UserFilled } from '@element-plus/icons-vue'
+import { reactive, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import type { FormInstance, FormRules, ElNotification } from 'element-plus'
+import useUserStore from '@/stores/modules/user'
+import { setUserInfo } from '@/app/api/personal'
+import { t } from '@/lang'
+import userInfoEdit from '@/app/components/user-info-edit/index.vue'
+import { img } from '@/utils/common'
+
+const isAllowChange = localStorage.getItem('isAllowChange') === 'true';
+const userStore = useUserStore()
+const router = useRouter()
+const clickEvent = (command: string) => {
+    switch (command) {
+        case 'logout':
+            userStore.logout()
+            break
+    }
+}
+
+const logout = () => {
+    userStore.logout()
+}
+const toLink = (link) => {
+    router.push(link)
+}
+const userInfoEditRef = ref(null)
+const getUserInfoFn = () => {
+    userInfoEditRef.value?.open()
+}
+// 修改密码 --- start
+const changePasswordDialog = ref(false)
+const formRef = ref<FormInstance>()
+// 提交信息
+const saveInfo = reactive({
+    original_password: '',
+    password: '',
+    password_copy: ''
+})
+// 表单验证规则
+const formRules = reactive<FormRules>({
+    original_password: [
+        { required: true, message: t('originalPasswordPlaceholder'), trigger: 'blur' }
+    ],
+    password: [
+        { required: true, message: t('passwordPlaceholder'), trigger: 'blur' }
+    ],
+    password_copy: [
+        { required: true, message: t('passwordPlaceholder'), trigger: 'blur' }
+    ]
+})
+
+const submitForm = (formEl: FormInstance | undefined) => {
+    if (!formEl) return
+    formEl.validate((valid) => {
+        if (valid) {
+            let msg = ''
+            if (saveInfo.password && !saveInfo.original_password) msg = t('originalPasswordHint')
+            if (saveInfo.password && saveInfo.original_password && !saveInfo.password_copy) msg = t('newPasswordHint')
+            if (saveInfo.password && saveInfo.original_password && saveInfo.password_copy && saveInfo.password != saveInfo.password_copy) msg = t('doubleCipherHint')
+            if (msg) {
+                ElNotification({
+                    type: 'error',
+                    message: msg
+                })
+                return
+            }
+
+            setUserInfo(saveInfo).then((res: any) => {
+                changePasswordDialog.value = false
+            })
+        } else {
+            return false
+        }
+    })
+}
+</script>
+
+<style lang="scss" scoped>
+.el-popper .el-dropdown-menu{
+    width: 150px;
+}
+</style>

admin-vben/src/layout/default/components/tabs.vue

@@ -0,0 +1,142 @@
+<template>
+    <div class="tab-wrap w-full px-[16px]" v-show="systemStore.tab">
+        <el-tabs :closable="tabbarStore.tabLength > 1" :model-value="route.name" @tab-click="tabClick" @tab-remove="removeTab">
+            <el-tab-pane v-for="(tab, key, index) in tabbarStore.tabs" :name="tab.name" :key="index">
+                <template #label>
+                    <el-dropdown trigger="contextmenu" placement="bottom-start">
+                        <span :class="{ 'text-primary': route.name == tab.name }" class="tab-name">{{ tab.title }}</span>
+                        <template #dropdown>
+                            <el-dropdown-menu>
+                                <el-dropdown-item icon="Back" :disabled="index == 0" @click="closeLeft(tab.name)">{{t('tabs.closeLeft') }}</el-dropdown-item>
+                                <el-dropdown-item icon="Right" :disabled="index == (tabbarStore.tabLength - 1)" @click="closeRight(tab.name)">{{t('tabs.closeRight') }}</el-dropdown-item>
+                                <el-dropdown-item icon="Close" :disabled="tabbarStore.tabLength == 1" @click="closeOther(tab.name)">{{t('tabs.closeOther') }}</el-dropdown-item>
+                            </el-dropdown-menu>
+                        </template>
+                    </el-dropdown>
+                </template>
+            </el-tab-pane>
+        </el-tabs>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { watch, onMounted } from 'vue'
+import useTabbarStore from '@/stores/modules/tabbar'
+import useSystemStore from '@/stores/modules/system'
+import { useRoute, useRouter } from 'vue-router'
+import { t } from '@/lang'
+
+const tabbarStore = useTabbarStore()
+const systemStore = useSystemStore()
+const route = useRoute()
+const router = useRouter()
+
+onMounted(() => {
+    tabbarStore.addTab(route)
+})
+
+watch(route, (nval: any) => {
+    tabbarStore.addTab(nval)
+})
+
+/**
+ * 添加tab
+ * @param content
+ */
+const tabClick = (content: any) => {
+    const tabRoute = tabbarStore.tabs[content.props.name]
+    router.push({ name: tabRoute.name, query: tabRoute.query })
+}
+
+/**
+ * 移除tab
+ * @param content
+ */
+const removeTab = (content: any) => {
+    if (route.name == content) {
+        const tabs = Object.keys(tabbarStore.tabs)
+        if (tabs.indexOf(content) == 0) {
+            router.push({ name: tabs[1] })
+        } else {
+            router.push({ name: tabs[tabs.indexOf(content) - 1] })
+        }
+    }
+    tabbarStore.removeTab(content)
+}
+
+/**
+ * 关闭左侧
+ * @param name
+ */
+const closeLeft = (name: string) => {
+    const tabs = Object.keys(tabbarStore.tabs)
+    for (let i = tabs.indexOf(name) - 1; i >= 0; i--) {
+        delete tabbarStore.tabs[tabs[i]]
+    }
+    router.push({ name })
+}
+
+/**
+ * 关闭右侧
+ * @param name
+ */
+const closeRight = (name: string) => {
+    const tabs = Object.keys(tabbarStore.tabs)
+    for (let i = tabs.indexOf(name) + 1; i < tabs.length; i++) {
+        delete tabbarStore.tabs[tabs[i]]
+    }
+    router.push({ name })
+}
+
+/**
+ * 关闭其他
+ * @param name
+ */
+const closeOther = (name: string) => {
+    const tabs = Object.keys(tabbarStore.tabs)
+    tabs.forEach((key: string) => { key != name && delete tabbarStore.tabs[key] })
+    router.push({ name })
+}
+</script>
+
+<style lang="scss" scoped>
+:deep(.el-tabs) {
+    .el-tabs--border-card {
+        border: none;
+    }
+
+    .el-tabs__header {
+        margin: 0;
+    }
+
+    .el-tabs__nav-wrap {
+        margin-bottom: 0;
+
+        &::after {
+            display: none;
+        }
+    }
+
+    .el-tabs__content {
+        display: none;
+    }
+
+    .el-tabs__item {
+        display: inline-flex !important;
+        padding: 0 20px !important;
+        align-items: center;
+
+        .tab-name:focus {
+            outline: none !important;
+        }
+    }
+
+    .el-tabs__active-bar {
+        display: none;
+    }
+
+    .el-tabs__item.is-active {
+        background-color: var(--el-color-primary-light-9);
+    }
+}
+</style>

admin-vben/src/layout/default/index.vue

@@ -0,0 +1,50 @@
+<template>
+    <div class="flex w-full h-screen">
+        <!-- 左侧边栏 -->
+        <layout-aside></layout-aside>
+        <!-- 左侧边栏 end -->
+
+        <el-container>
+            <!-- 顶部 -->
+            <el-header>
+                <layout-header></layout-header>
+            </el-header>
+            <!-- 顶部 end -->
+
+            <layout-tab />
+
+            <!-- 主体 -->
+            <el-main class="h-full p-0 bg-page">
+                <el-scrollbar>
+                    <div class="p-[15px]">
+                        <router-view v-slot="{ Component, route }" v-if="appStore.routeRefreshTag">
+                            <keep-alive :include="tabbarStore.tabNames">
+                                <component :is="Component" :key="route.fullPath" />
+                            </keep-alive>
+                        </router-view>
+                    </div>
+                </el-scrollbar>
+            </el-main>
+            <!-- 主体 end -->
+        </el-container>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import layoutHeader from './components/header/index.vue'
+import layoutAside from './components/aside/index.vue'
+import layoutTab from './components/tabs.vue'
+import useAppStore from '@/stores/modules/app'
+import useTabbarStore from '@/stores/modules/tabbar'
+import useSystemStore from '@/stores/modules/system'
+
+const appStore = useAppStore()
+const tabbarStore = useTabbarStore()
+const systemStore = useSystemStore()
+const dark = computed(() => {
+    return systemStore.dark
+})
+</script>
+
+<style lang="scss" scoped></style>

admin-vben/src/layout/default/layout.json

@@ -0,0 +1,4 @@
+{
+	"layout": "default",
+	"cover": "/static/resource/images/system/layout_default.png"
+}