dySdDesignerVue_DesignModule/src/views/Editor/CanvasLeft/Label/index.vue

<template>
  <div>
    <div class="left-top-tabs" id="left-top-tabs">
      <div class="top-tab">
        <!--        <el-tooltip placement="top" :hide-after="0" content="首页">-->
        <!--          <IconHome class="handler-item" @click="goHome"/>-->
        <!--        </el-tooltip>-->
      </div>
    </div>
    <div class="left-bottom-tabs">
      <div class="center-tabs">
        <div class="center-tab" :class="{ 'left-active': tab.key === poolType }" v-for="tab in topTabsRef"
             :key="tab.key"
             @click="setPoolType(tab.key)">
          <div class="flex justify-center items-center flex-col" :id="`left-tabs-${tab.key}`">
            <SvgIcon :icon-class="tab.icon" className="svg-size"/>
            <div class="left-name">{{ $t(tab.label) }}</div>
          </div>
        </div>
      </div>
      <!--      <div class="bottom-tabs">-->
      <!--        &lt;!&ndash; <div class="bottom-tab" :class="{ 'left-active': 'layer' === poolType }" @click="setPoolType('layer')">-->
      <!--          <div :id="`left-tabs-layer`">-->
      <!--            <div><SvgIcon icon-class="layer" className="svg-size" /></div>-->
      <!--            <div class="left-name">{{ $t("message.layer") }}</div>-->
      <!--          </div>-->
      <!--        </div> &ndash;&gt;-->
      <!--        <div class="bottom-tab" :class="{ 'left-active': 'help' === poolType }" ref="helpRef"-->
      <!--             @click="setPoolType('help')">-->
      <!--          <div :id="`left-tabs-help`">-->
      <!--            <div>-->
      <!--              <SvgIcon icon-class="help" className="svg-size"/>-->
      <!--            </div>-->
      <!--            <div class="left-name">{{ $t("message.help") }}</div>-->
      <!--          </div>-->
      <!--        </div>-->
      <!--        <HelpPopover :help-ref="helpRef" :help-popover-ref="helpPopoverRef"/>-->
      <!--        <HotkeyDrawer :has-hotkey="hasHotkey"/>-->
      <!--      </div>-->
    </div>
  </div>
</template>

<script lang="ts" setup>
import {useMainStore} from "@/store";
import {PoolType} from "@/types/common";
import {storeToRefs} from "pinia";
import {useRouter} from 'vue-router'
import HotkeyDrawer from "./components/HotkeyDrawer.vue";
import HelpPopover from "./components/HelpPopover.vue";
import {onMounted} from "vue";

const router = useRouter()
const mainStore = useMainStore();
const {poolType, poolShow} = storeToRefs(mainStore);

const helpRef = ref();
const helpPopoverRef = ref();
const hasHotkey = ref(false);

const runMode = ref(0);

interface TabItem {
  key: PoolType;
  label: string;
  icon: string;
  index: number;
}

const topTabsRef = ref([])

const topTabs: TabItem[] = [
  {key: "editor", label: "message.edit", icon: `editor`, index: 0},
  // { key: "template", label: "message.template", icon: `template`, index: 1 },
  {key: "material", label: "message.material", icon: `material`, index: 2},
  {key: "text", label: "message.text", icon: "text", index: 3},
  {key: "image", label: "message.image", icon: "picture", index: 4},
  // { key: "toolkit", label: "message.tool", icon: "toolkit", index: 5 },
  // { key: "chatgpt", label: "message.chatgpt", icon: "chatgpt", index: 6 },
];

const topTabsFront: TabItem[] = [
  {key: "frontEditor", label: "message.edit", icon: `editor`, index: 0}
];

const setPoolType = (tab: PoolType) => {
  if (poolShow.value && tab === poolType.value) {
    poolShow.value = false;
  } else {
    poolShow.value = tab !== "help" ? true : false;
  }
  mainStore.setPoolType(tab);
};

const goHome = () => {
  window.open(router.resolve({path: `/home`}).href, '_blank');
}

onMounted(() => {
  const query = router.currentRoute.value.query
  if (query.runMode) {
    runMode.value = query.runMode
  }
  if (runMode.value == 0) {
    topTabsRef.value = topTabsFront;
    setTimeout(() => {
      setPoolType("frontEditor")
    }, 300)

  } else topTabsRef.value = topTabs;
})
</script>

<style lang="scss" scoped>
.top-tab {
  width: 100%;
  height: $headerHeight;
  text-align: center;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid $borderColor;

  .handler-item {
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 2px;
    border-radius: $borderRadius;

    &:not(.group-btn):hover {
      background-color: #f1f1f1;
    }
  }
}

.center-tabs {
  // overflow-y: scroll;
  overflow-x: hidden;
  height: calc(100vh - 100px);

  .center-tab:hover {
    background: #f1f1f1;
    border-radius: 5px;
  }
}

.center-tab {
  width: 100%;
  height: 60px;
  padding-left: 2px;
  text-align: center;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

.left-active {
  color: $themeColor;
}

.left-name {
  font-size: 14px;
  line-height: 1.2;
}

.svg-size {
  font-size: 20px;
}

.left-active::before {
  background-color: $themeColor;
  border-radius: 4px;
  content: "";
  height: 41px;
  left: -3px;
  position: absolute;
  transition: top 0.2s;
  width: 6px;
  z-index: 20;
}

.left-content {
  position: relative;
  width: 300px;
  left: 50px;
  top: -360px;
  height: 100%;
  z-index: 1;
  background: #fff;
  border-left: 1px solid $borderColor;
  border-right: 1px solid $borderColor;
  transition: left 0.5s linear, right 0.5s linear;
}

.left-close {
  cursor: default;
  left: -320px;
  position: relative;
  top: 50%;
  // z-index: 1;
}

.layout-toggle {
  background: $themeColor;
  cursor: pointer;
  height: 88px;
  position: absolute;
  right: -17px;
  top: 50%;
  transform: translateY(-50%);
  transition: right 0.1s linear;
  width: 16px;
  z-index: 1;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  display: flex;
  align-items: center;
  border-top: 1px solid $borderColor;
  border-bottom: 1px solid $borderColor;
  border-right: 1px solid $borderColor;
}

.bottom-tabs {
  position: absolute;
  bottom: 0;
  width: 51px;
  z-index: 30;
  border-right: 1px solid #eee;
}

.bottom-tab {
  height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  background: #fff;
  position: relative;
  border-radius: 5px;

  .help-handle {
    font-size: 20px;
  }

  #left-tabs-help,
  #left-tabs-layer {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  &:hover {
    background: #f1f1f1;
  }
}

.has-help {
  color: $themeColor;
}

.help-pop-row {
  font-size: 15px;
  padding: 10px 25px;
  cursor: pointer;

  .help-pop-icon {
    font-size: 20px;
  }

  .help-pop-text {
    padding-left: 10px;
  }
}

.help-pop-row:hover {
  background-color: $hoverColor;
}
</style>