From 2af71bcf522c485ea005184c977986374a7dcc4a Mon Sep 17 00:00:00 2001
From: Sanakey <714737083@qq.com>
Date: 星期六, 28 九月 2024 09:47:10 +0800
Subject: [PATCH] Merge branch 'feng-v1-editor' of http://192.168.100.20:9090/r/onbus_crm into li-v1
---
src/views/email/index.vue | 196 +++++++++++++++++++++++++++++++++++++++---------
1 files changed, 159 insertions(+), 37 deletions(-)
diff --git a/src/views/email/index.vue b/src/views/email/index.vue
index dc2a901..a3186f6 100644
--- a/src/views/email/index.vue
+++ b/src/views/email/index.vue
@@ -1,45 +1,167 @@
-锘�<template>
- <PageWrapper :class="`${prefixCls}`" dense contentFullHeight fixedHeight>
-
- <Splitpanes class="default-theme" :push-other-panes="false" style="height: 100%">
- <Pane min-size="12" size="12">
- <LeftNav></LeftNav>
- </Pane>
- <Pane min-size="50" size="73" >
- <ScrollContainer class="p-4">
- <Editor></Editor>
- </ScrollContainer>
- </Pane>
- <Pane min-size="5" size="15">鍙�</Pane>
- </Splitpanes>
- </PageWrapper>
+锘�
+<template>
+ <div>
+ <a-layout class="default-theme" style="display: flex; height: 100%; background-color: #fff">
+ <a-layout-sider width="250" style="border-inline-end: 1px solid rgb(5 5 5 / 6%)" :style="siderStyle" v-show="collapseStore.isOpen">
+ <LeftNav></LeftNav>
+ </a-layout-sider>
+ <a-layout>
+ <a-layout-content :style="contentStyle">
+ <RouterView>
+ <template #default="{ Component, route }">
+ <transition
+ :name="
+ getTransitionName({
+ route,
+ openCache,
+ enableTransition: getEnableTransition,
+ cacheTabs: getCaches,
+ def: getBasicTransition,
+ })
+ "
+ mode="out-in"
+ appear
+ >
+ <keep-alive v-if="openCache" :include="getCaches">
+ <component :is="Component" :key="route.fullPath" />
+ </keep-alive>
+ <component v-else :is="Component" :key="route.fullPath" />
+ </transition>
+ </template>
+ </RouterView>
+ </a-layout-content>
+ </a-layout>
+ </a-layout>
+ <div @click="fuToggleContent(!collapseStore.isOpen)" class="toggle-btn" :class="collapseStore.isOpen ? 'iconOpen' : 'onIconOpen'">
+ <LeftOutlined v-if="collapseStore.isOpen" />
+ <RightOutlined v-else />
+ </div>
+ <FrameLayout v-if="getCanEmbedIFramePage" />
+ </div>
</template>
<script lang="ts" setup>
-import {PageWrapper} from '@/components/Page';
-import {onMounted} from 'vue';
-import {useDesign} from "@/hooks/web/useDesign";
-import {Splitpanes, Pane} from 'splitpanes';
-import 'splitpanes/dist/splitpanes.css';
-import LeftNav from './components/LeftNav.vue';
-import Editor from './components/Editor.vue';
-import ScrollContainer from "@/components/Container/src/ScrollContainer.vue";
+ import { PageWrapper } from '@/components/Page';
+ import { LeftOutlined, RightOutlined } from '@ant-design/icons-vue';
+ import LeftNav from '@/views/email/components/LeftNav.vue';
+ import { computed, unref, ref } from 'vue';
-onMounted(() => {
- Logger.log('Hello, Logger!1');
-});
-const {prefixCls} = useDesign('email');
+ import FrameLayout from '@/layouts/iframe/index.vue';
-</script>
+ import { useRootSetting } from '@/hooks/setting/useRootSetting';
-<style lang="less" scoped>
-@prefix-cls: ~'@{namespace}-email';
-.@{prefix-cls} {
- .splitpanes__pane {
- display: flex;
- justify-content: center;
- align-items: center;
- background-color: var(--component-background-color)
+ import { useTransitionSetting } from '@/hooks/setting/useTransitionSetting';
+ import { useMultipleTabSetting } from '@/hooks/setting/useMultipleTabSetting';
+
+ import { useMultipleTabStore } from '@/store/modules/multipleTab';
+
+ defineOptions({ name: 'PageLayout' });
+ import type { FunctionalComponent } from 'vue';
+ import type { RouteLocation } from 'vue-router';
+
+ export interface DefaultContext {
+ Component: FunctionalComponent & { type: Recordable };
+ route: RouteLocation;
}
-}
+ const siderStyle = {
+ lineHeight: '120px',
+ backgroundColor:'#fff',
+ };
+ const contentStyle = {
+ lineHeight: '120px',
+ backgroundColor:'#fff',
+
+};
+ function getTransitionName({
+ route,
+ openCache,
+ cacheTabs,
+ enableTransition,
+ def,
+ }: Pick<DefaultContext, 'route'> & {
+ enableTransition: boolean;
+ openCache: boolean;
+ def: string;
+ cacheTabs: string[];
+ }): string | undefined {
+ if (!enableTransition) {
+ return undefined;
+ }
+
+ const isInCache = cacheTabs.includes(route.name as string);
+ const transitionName = 'fade-slide';
+ let name: string | undefined = transitionName;
+
+ if (openCache) {
+ name = isInCache && route.meta.loaded ? transitionName : undefined;
+ }
+ return name || (route.meta.transitionName as string) || def;
+ }
+
+ const { getShowMultipleTab } = useMultipleTabSetting();
+ const tabStore = useMultipleTabStore();
+
+ const { getOpenKeepAlive, getCanEmbedIFramePage } = useRootSetting();
+
+ const { getBasicTransition, getEnableTransition } = useTransitionSetting();
+
+ const openCache = computed(() => unref(getOpenKeepAlive) && unref(getShowMultipleTab));
+
+ const getCaches = computed((): string[] => {
+ if (!unref(getOpenKeepAlive)) {
+ return [];
+ }
+ return tabStore.getCachedTabList;
+ });
+ import { useDesign } from '@/hooks/web/useDesign';
+
+ const { prefixCls } = useDesign('email');
+
+
+ import { useCollapseStore } from '@/store/modules/useCollapseStore';
+ const collapseStore = useCollapseStore();
+ function fuToggleContent(is) {
+ collapseStore.toggle(is);
+ }
+</script>
+<style lang="less" scoped>
+ @prefix-cls: ~'@{namespace}-email';
+ .@{prefix-cls} {
+ .splitpanes__pane {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: #fff;
+ }
+ }
+
+
+ .toggle-btn {
+ display: flex;
+ position: absolute;
+ z-index: 99;
+ top: 45%;
+ width: 20px; /* 鍘熷瀹藉害 */
+ height: 54px;
+ transform: translateY(-50%);
+ border-left: none;
+ border-radius: 0 10px 10px 0;
+ background: #dfe1e5;
+ }
+
+ .onOpen {
+ width: 86vw;
+ }
+
+ .isOpen {
+ width: 100vw;
+ }
+
+ .iconOpen {
+ left: 250px;
+ }
+
+ .onIconOpen {
+ left: 0%;
+ }
</style>
--
Gitblit v1.8.0