GCLS_Page_Textbook/src/views/book/courseware/create/index.vue

<template>
  <div class="create">
    <div class="create-left">
      <div class="back-container">
        <el-button class="back" @click="back"><i class="el-icon-arrow-left"></i> 返回</el-button>
        <span class="title">Frame 1</span>
      </div>
      <div v-for="{ value, label, children } in bookTypeOption" :key="value" class="components">
        <div class="components-title">{{ label }}</div>
        <div
          v-for="{ value: childValue, icon, label: childLabel } in children"
          :key="childValue"
          class="components-item"
          @click="curType = childValue"
        >
          <SvgIcon v-if="icon" :icon-class="icon" />
          <span>{{ childLabel }}</span>
        </div>
      </div>
    </div>

    <div class="create-middle">
      <div></div>
      <main ref="canvas" class="canvas">
        <component :is="componentList[curType]" ref="components" @showSetting="showSetting" />
      </main>
    </div>

    <div class="create-right">
      <div class="setting-tittle">设置</div>
      <component :is="componentSettingList[curType]" ref="setting" @updateSetting="updateSetting" />
    </div>
  </div>
</template>

<script>
import { bookTypeOption, componentList, componentSettingList } from '../data/bookType';

export default {
  name: 'CreatePage',
  data() {
    return {
      curType: 'divider',
      componentList,
      componentSettingList,
      bookTypeOption,
    };
  },
  methods: {
    back() {
      this.$router.push('/');
    },
    showSetting(setting) {
      this.$refs.setting.setSetting(setting);
    },
    updateSetting(setting) {
      this.$refs.components.updateSetting(setting);
    },
  },
};
</script>

<style lang="scss" scoped>
.create {
  display: flex;
  height: 100%;

  &-left {
    display: flex;
    flex-direction: column;
    width: 200px;
    overflow: auto;
    background-color: #fff;

    .back-container {
      display: flex;
      flex-direction: column;
      row-gap: 8px;
      padding: 4px;

      .back {
        color: #000;
        text-align: left;
        background-color: #f4f4f4;
      }

      .title {
        padding: 0 16px;
        font-size: 14px;
        font-weight: bold;
      }
    }

    .components {
      display: flex;
      flex-direction: column;
      padding: 24px 8px 4px;
      margin-top: 12px;
      border-top: 1px solid #e5e6eb;

      .components-title {
        padding-left: 8px;
        font-size: 14px;
        font-weight: bold;
        color: #999;
      }

      .components-item {
        display: flex;
        align-items: center;
        padding: 5px 16px;
        cursor: pointer;

        svg {
          width: 16px;
          height: 16px;
          margin-right: 8px;
        }
      }
    }
  }

  &-middle {
    flex: 1;
    padding: 24px 20px;
    overflow: auto;
    background-color: #ececec;

    .canvas {
      width: 100%;
      min-height: 100%;
      padding: 24px;
      background-color: #fff;
      border-radius: 4px;
    }
  }

  &-right {
    width: 200px;
    padding: 16px 8px;
    background-color: #fff;

    .setting-tittle {
      margin-bottom: 16px;
      font-weight: bold;
      color: #000;
    }
  }
}
</style>