Merge branch 'feng-v1-editor' of http://192.168.100.20:9090/r/onbus_crm int...

Sanakey

5 天以前 2af71bcf522c485ea005184c977986374a7dcc4a

 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="88" >
        <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>