From a1d7e81859f554f3a53680cc35f0f49bf1f77098 Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期四, 14 五月 2026 14:37:02 +0800
Subject: [PATCH] 导入项目
---
src/layout/Layout.vue | 75 +++++++++++++++++++++++++++++++++++++
1 files changed, 75 insertions(+), 0 deletions(-)
diff --git a/src/layout/Layout.vue b/src/layout/Layout.vue
new file mode 100644
index 0000000..d15025c
--- /dev/null
+++ b/src/layout/Layout.vue
@@ -0,0 +1,75 @@
+<script lang="tsx">
+import { computed, defineComponent, unref } from 'vue'
+import { useAppStore } from '@/store/modules/app'
+import { Backtop } from '@/components/Backtop'
+import { Setting } from '@/layout/components/Setting'
+import { useRenderLayout } from './components/useRenderLayout'
+import { useDesign } from '@/hooks/web/useDesign'
+
+const { getPrefixCls } = useDesign()
+
+const prefixCls = getPrefixCls('layout')
+
+const appStore = useAppStore()
+
+// 鏄惁鏄Щ鍔ㄧ
+const mobile = computed(() => appStore.getMobile)
+
+// 鑿滃崟鎶樺彔
+const collapse = computed(() => appStore.getCollapse)
+
+const layout = computed(() => appStore.getLayout)
+
+const handleClickOutside = () => {
+ appStore.setCollapse(true)
+}
+
+const renderLayout = () => {
+ switch (unref(layout)) {
+ case 'classic':
+ const { renderClassic } = useRenderLayout()
+ return renderClassic()
+ case 'topLeft':
+ const { renderTopLeft } = useRenderLayout()
+ return renderTopLeft()
+ case 'top':
+ const { renderTop } = useRenderLayout()
+ return renderTop()
+ case 'cutMenu':
+ const { renderCutMenu } = useRenderLayout()
+ return renderCutMenu()
+ default:
+ break
+ }
+}
+
+export default defineComponent({
+ name: 'Layout',
+ setup() {
+ return () => (
+ <section class={[prefixCls, `${prefixCls}__${layout.value}`, 'w-[100%] h-[100%] relative']}>
+ {mobile.value && !collapse.value ? (
+ <div
+ class="absolute left-0 top-0 z-99 h-full w-full bg-[var(--el-color-black)] opacity-30"
+ onClick={handleClickOutside}
+ ></div>
+ ) : undefined}
+
+ {renderLayout()}
+
+ <Backtop></Backtop>
+
+ <Setting></Setting>
+ </section>
+ )
+ }
+})
+</script>
+
+<style lang="scss" scoped>
+$prefix-cls: #{$namespace}-layout;
+
+.#{$prefix-cls} {
+ background-color: var(--app-content-bg-color);
+}
+</style>
--
Gitblit v1.8.0