Merge branch 'master' of http://git.dayaedu.com/lex/classroom-instruments

src/router/routes/index.ts

@@ -22,6 +22,15 @@ export const constantRoutes: any[] = [
     ]
   },
   {
+    name: 'prepare-lessons',
+    path: '/prepare-lessons',
+    component: () => import('@/views/prepare-lessons/index'),
+    meta: {
+      title: '备课',
+      singleLayout: 'blank'
+    }
+  },
+  {
     name: '404',
     path: '/404',
     component: () => import('@/views/404/index'),

src/styles/index.less

@@ -14,10 +14,27 @@
 
 body {
   user-select: none;
+  background-color: #F1F5FF;
 }
 
 @font-face {
   font-family: 'dotfont';
   /* Project id  */
   src: url('../common/text-security-disc.woff') format('woff');
+}
+
+.cr-ellipsis {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
 }

src/views/prepare-lessons/components/directory-main/index.module.less

@@ -0,0 +1,101 @@
+.directoryList {
+  height: 100%;
+  padding: 24px 20px;
+
+  :global {
+    .n-scrollbar-container {
+      max-height: 100%;
+    }
+  }
+
+  .scrollBar {
+    margin-top: 12px;
+    max-height: calc(100% - 49px - 12px);
+  }
+}
+
+.select-directory {
+  height: 49px;
+  line-height: 49px;
+  background: #E8F4FF;
+  border-radius: 10px;
+  padding: 0 16px;
+  margin-bottom: 12px;
+  font-size: 18px;
+  font-weight: 600;
+  color: #131415;
+  line-height: 25px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+
+  &>span {
+    max-width: 240px;
+  }
+
+  .iconArrow {
+    font-size: 12px
+  }
+}
+
+.treeParent {
+  transition: height 1s ease-in-out;
+}
+
+.treeChild {
+  line-height: 54px;
+}
+
+.treeItem {
+  display: flex;
+  align-items: center;
+  line-height: 54px;
+  border-radius: 10px;
+  padding: 0 5px;
+  cursor: pointer;
+  border-radius: 10px;
+
+  &:hover {
+    background: #F5F6FA;
+  }
+
+  .title {
+    padding-left: 8px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    max-width: 280px !important;
+
+    &.titleSelect {
+      color: var(--n-color);
+      font-weight: bold;
+    }
+  }
+
+  .arrow {
+    display: inline-block;
+    width: 14px;
+    height: 15px;
+    background: url('./images/arrow-default.png') no-repeat center;
+    background-size: contain;
+
+    &.arrowSelect {
+      background: url('./images/arrow-active.png') no-repeat center;
+      background-size: contain;
+    }
+  }
+
+  .childArrow {
+    width: 12px;
+  }
+
+  &.childSelect {
+    background: #F5F6FA;
+
+    .title {
+      color: var(--n-color);
+      font-weight: bold;
+    }
+  }
+}

src/views/prepare-lessons/components/directory-main/index.tsx

@@ -0,0 +1,204 @@
+import {
+  Transition,
+  TransitionGroup,
+  defineComponent,
+  reactive,
+  ref
+} from 'vue';
+import styles from './index.module.less';
+import { NIcon, NTree, NSpin, NScrollbar } from 'naive-ui';
+
+export default defineComponent({
+  name: 'directory-main',
+  setup() {
+    const show = ref(true);
+    const forms = reactive({
+      expandedKey: null, // 展开
+      selectKey: null // 选的
+    });
+    const treeList = ref([
+      {
+        key: 1,
+        label:
+          '第一单元 我愿住在童话里我愿住在童话里我愿住在童话里我愿住在童话里我愿住在童话里我愿住在童话里我愿住在童话里我愿住在童话里我愿住在童话里',
+        selected: false,
+        children: [
+          {
+            key: 10,
+            label: '【欣赏】永远住在童话里'
+          },
+          {
+            key: 11,
+            label: '【欣赏】糖果仙子舞曲'
+          },
+          {
+            key: 12,
+            label: '【知识】音的高低'
+          },
+          {
+            key: 13,
+            label: '【唱歌】小红帽'
+          }
+        ]
+      },
+      {
+        key: 2,
+        label: '第二单元 快乐游戏',
+        selected: false,
+        children: [
+          {
+            key: 14,
+            label: '【欣赏】永远住在童话里'
+          }
+        ]
+      },
+      {
+        key: 3,
+        label: '第三单元 劳动最光荣',
+        selected: false,
+        children: [
+          {
+            key: 15,
+            label: '【欣赏】永远住在童话里'
+          }
+        ]
+      },
+      {
+        key: 4,
+        label: '第四单元 音乐中的动物',
+        selected: false,
+        children: [
+          {
+            key: 16,
+            label: '【欣赏】永远住在童话里'
+          }
+        ]
+      },
+      {
+        key: 5,
+        label: '第五单元 动画城',
+        selected: false,
+        children: [
+          {
+            key: 17,
+            label: '【欣赏】永远住在童话里'
+          }
+        ]
+      },
+      {
+        key: 6,
+        label: '第六单元 下雪啦',
+        selected: false,
+        children: [
+          {
+            key: 18,
+            label: '【欣赏】永远住在童话里'
+          }
+        ]
+      },
+      {
+        key: 7,
+        label: '我的音乐网页',
+        selected: false,
+        children: [
+          {
+            key: 19,
+            label: '【欣赏】永远住在童话里'
+          }
+        ]
+      }
+    ]);
+
+    setTimeout(() => {
+      show.value = false;
+    }, 500);
+    return () => (
+      <div class={styles.directoryList}>
+        <div class={styles['select-directory']}>
+          <span class={['cr-ellipsis']} title="人教版二年级上册（2013）">
+            人教版二年级上册（2013）
+          </span>
+          <NIcon class={styles.iconArrow}>
+            <svg
+              width="11px"
+              height="15px"
+              viewBox="0 0 11 15"
+              version="1.1"
+              xmlns="http://www.w3.org/2000/svg">
+              <g
+                stroke="none"
+                stroke-width="1"
+                fill="none"
+                fill-rule="evenodd"
+                opacity="0.699999988">
+                <g
+                  transform="translate(-445.000000, -137.000000)"
+                  fill="#131415">
+                  <g transform="translate(152.000000, 120.000000)">
+                    <path
+                      d="M299.326227,20.2118001 L304.934089,28.4366632 C305.245211,28.8929759 305.127511,29.515105 304.671198,29.8262273 C304.505147,29.9394437 304.308836,30 304.107861,30 L292.892139,30 C292.339854,30 291.892139,29.5522847 291.892139,29 C291.892139,28.7990254 291.952695,28.6027139 292.065911,28.4366632 L297.673773,20.2118001 C297.984895,19.7554873 298.607024,19.6377872 299.063337,19.9489096 C299.16663,20.0193364 299.255801,20.1085074 299.326227,20.2118001 Z"
+                      id="三角形"
+                      transform="translate(298.500000, 24.500000) rotate(-270.000000) translate(-298.500000, -24.500000) "></path>
+                  </g>
+                </g>
+              </g>
+            </svg>
+          </NIcon>
+        </div>
+
+        <NScrollbar class={styles.scrollBar}>
+          <NSpin show={show.value}>
+            {treeList.value.map((item: any, index: number) => (
+              <div class={styles.treeParent} key={'parent' + index}>
+                <div
+                  class={[styles.treeItem, styles.parentItem]}
+                  onClick={() => {
+                    treeList.value.forEach((child: any) => {
+                      if (item.key !== child.key) {
+                        child.selected = false;
+                      }
+                    });
+                    item.selected = item.selected ? false : true;
+                  }}>
+                  {item.children && item.children.length > 0 && (
+                    <span
+                      class={[
+                        styles.arrow,
+                        item.selected ? styles.arrowSelect : ''
+                      ]}></span>
+                  )}
+                  <p
+                    class={[
+                      styles.title,
+                      item.selected ? styles.titleSelect : ''
+                    ]}>
+                    {item.label}
+                  </p>
+                </div>
+
+                {item.selected &&
+                  item.children &&
+                  item.children.map((child: any, j: number) => (
+                    <div
+                      key={'child' + j}
+                      class={[
+                        styles.treeItem,
+                        styles.childItem,
+                        styles.animation,
+                        forms.selectKey === child.key ? styles.childSelect : ''
+                      ]}
+                      onClick={() => {
+                        forms.selectKey = child.key;
+                      }}>
+                      <span class={styles.childArrow}></span>
+                      <p class={styles.title}>{child.label}</p>
+                    </div>
+                  ))}
+              </div>
+            ))}
+          </NSpin>
+        </NScrollbar>
+      </div>
+    );
+  }
+});

src/views/prepare-lessons/components/lesson-main/index.tsx

@@ -0,0 +1,8 @@
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'lesson-main',
+  setup() {
+    return () => <>目录</>;
+  }
+});

src/views/prepare-lessons/components/resource-main/index.tsx

@@ -0,0 +1,8 @@
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'resource-main',
+  setup() {
+    return () => <>目录</>;
+  }
+});

src/views/prepare-lessons/index.module.less

@@ -0,0 +1,20 @@
+.prepareLessons {
+  display: flex;
+  padding: 32px;
+  height: 100vh;
+
+
+  .directoryMain,
+  .resourceMain {
+    flex: 0 0 360px;
+    background-color: #fff;
+    border-radius: 20px;
+  }
+
+  .lessonMain {
+    margin: 0 20px;
+    flex: 1;
+    background-color: #fff;
+    border-radius: 20px;
+  }
+}

src/views/prepare-lessons/index.tsx

@@ -0,0 +1,27 @@
+import { defineComponent } from 'vue';
+import styles from './index.module.less';
+import DirectoryList from './components/directory-main';
+import LessonMain from './components/lesson-main';
+import ResourceMain from './components/resource-main';
+
+export default defineComponent({
+  name: 'prepare-lessons',
+  setup() {
+    return () => (
+      <div class={styles.prepareLessons}>
+        {/* 左侧目录 */}
+        <div class={styles.directoryMain}>
+          <DirectoryList />
+        </div>
+        {/* 中间排课 */}
+        <div class={styles.lessonMain}>
+          <LessonMain />
+        </div>
+        {/* 资源 */}
+        <div class={styles.resourceMain}>
+          <ResourceMain />
+        </div>
+      </div>
+    );
+  }
+});