first commit

src/layouts/common/components/darkSwitch.vue

@@ -0,0 +1,75 @@
+<template>
+    <div class="theme-toggle-content">
+        <div class="switch">
+            <div class="switch-action">
+                <Icon name="local-dark" color="#f2f2f2" size="13px" class="switch-icon dark-icon" />
+                <Icon name="local-light" color="#303133" size="13px" class="switch-icon light-icon" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped lang="scss">
+.theme-toggle-content {
+    display: flex;
+    align-items: center;
+    height: 24px;
+    padding: 0 12px;
+}
+.switch {
+    display: inline-block;
+    position: relative;
+    width: 40px;
+    height: 20px;
+    border: 1px solid var(--el-border-color);
+    border-radius: 10px;
+    box-sizing: border-box;
+    background-color: var(--ba-bg-color);
+    cursor: pointer;
+    transition: border-color 0.3s, background-color 0.5s;
+}
+.switch-action {
+    width: 16px;
+    height: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 1px;
+    left: 1px;
+    border-radius: 50%;
+    background-color: #ffffff;
+    transform: translate(0);
+    color: var(--el-text-color-primary);
+    transition: all 0.3s;
+}
+.switch-icon {
+    position: absolute;
+    left: 1px;
+    bottom: 1px;
+    transition: all 0.3s;
+    cursor: pointer;
+}
+.light-icon {
+    opacity: 1;
+}
+.dark-icon {
+    opacity: 0;
+}
+
+@at-root .dark {
+    .switch {
+        background-color: #2c2c2c;
+    }
+    .switch-action {
+        transform: translate(20px);
+        background-color: #141414;
+    }
+    .dark-icon {
+        opacity: 1;
+    }
+    .light-icon {
+        opacity: 0;
+    }
+}
+</style>

src/layouts/common/components/loading.vue

@@ -0,0 +1,59 @@
+<template>
+    <div>
+        <div
+            v-loading="true"
+            element-loading-background="var(--ba-bg-color-overlay)"
+            element-loading-text="$'utils.Loading'"
+            class="default-main ba-main-loading"
+        ></div>
+        <div v-if="state.showReload" class="loading-footer">
+            <el-button @click="refresh" type="warning">utils.Reload</el-button>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { onUnmounted, reactive } from 'vue'
+import router from '@/router/index'
+import { useNavTabs } from '@/stores/navTabs'
+import { isAdminApp } from '@/utils/common'
+import { getFirstRoute, routePush } from '@/utils/router'
+let timer: number
+
+const navTabs = useNavTabs()
+const state = reactive({
+    maximumWait: 1000 * 6,
+    showReload: false,
+})
+
+const refresh = () => {
+    router.go(0)
+}
+
+if (isAdminApp() && navTabs.state.tabsViewRoutes) {
+    let firstRoute = getFirstRoute(navTabs.state.tabsViewRoutes)
+    if (firstRoute) routePush(firstRoute.path)
+}
+
+timer = window.setTimeout(() => {
+    state.showReload = true
+}, state.maximumWait)
+
+onUnmounted(() => {
+    clearTimeout(timer)
+})
+</script>
+
+<style scoped lang="scss">
+.ba-main-loading {
+    height: 300px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.loading-footer {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+</style>

src/layouts/common/router-view/iframe.vue

@@ -0,0 +1,37 @@
+<template>
+    <div class="iframe-main" v-loading="state.loading">
+        <iframe
+            :src="state.iframeSrc"
+            :style="iframeStyle(35)"
+            frameborder="0"
+            height="100%"
+            width="100%"
+            id="iframe"
+            ref="iframeRef"
+            @load="hideLoading"
+        ></iframe>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { reactive } from 'vue'
+import { mainHeight as iframeStyle } from '@/utils/layout'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+
+const state = reactive({
+    loading: true,
+    iframeSrc: router.currentRoute.value.meta.url as string,
+})
+
+const hideLoading = () => {
+    state.loading = false
+}
+</script>
+
+<style scoped lang="scss">
+.iframe-main {
+    margin: var(--ba-main-space);
+}
+</style>