添加

src/views/attend-class/model/train-type/images/p-tag.svg

@@ -1,31 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>专辑标签（2）</title>
-    <defs>
-        <linearGradient x1="-2.71033196e-12%" y1="4.30211422e-14%" x2="100%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#23C3FF" offset="0%"></stop>
-            <stop stop-color="#007AFE" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="60.2548008%" y1="8.41286024%" x2="50%" y2="100%" id="linearGradient-2">
-            <stop stop-color="#FFFFFF" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="46.9481485%" id="linearGradient-3">
-            <stop stop-color="#FFFFFF" stop-opacity="0" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" offset="100%"></stop>
-        </linearGradient>
-    </defs>
-    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.900000036">
-        <g id="64、布置作业-训练设置" transform="translate(-506.000000, -407.000000)">
-            <g id="编组-4" transform="translate(446.000000, 219.000000)">
-                <g id="位图" transform="translate(40.000000, 168.000000)">
-                    <g id="专辑标签（2）" transform="translate(20.000000, 20.000000)">
-                        <rect id="矩形" fill="url(#linearGradient-1)" x="0" y="0" width="28" height="28" rx="14"></rect>
-                        <path d="M14,5.6 C14.3155402,5.6 14.6270168,5.61739826 14.9335228,5.65128781 L14.9330114,9.42661825 C14.631542,9.36544538 14.3195211,9.33333333 14,9.33333333 C11.4226712,9.33333333 9.33333333,11.4226712 9.33333333,14 C9.33333333,16.5773288 11.4226712,18.6666667 14,18.6666667 C16.5494313,18.6666667 18.6213787,16.6223149 18.6666667,14.0838855 L18.6666667,14.0838855 L18.6671259,7.01481986 C20.9180416,8.5217493 22.4,11.0878097 22.4,14 C22.4,18.6391919 18.6391919,22.4 14,22.4 C9.3608081,22.4 5.6,18.6391919 5.6,14 C5.6,9.3608081 9.3608081,5.6 14,5.6 Z" id="形状结合" fill="url(#linearGradient-2)"></path>
-                        <rect id="矩形" fill="url(#linearGradient-3)" x="18.6658869" y="0.691618793" width="3.73333333" height="13.0666667"></rect>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>

src/views/attend-class/model/train-type/index.module.less

@@ -1,10 +1,11 @@
 .trainType {
   display: inline-block;
   width: 462px;
-  background: #ecf6ff;
-  border-radius: 16px;
-  padding: 20px;
+  background: linear-gradient(360deg, #DBF1FF 0%, #E7F9FF 100%);
+  border-radius: 13px;
   position: relative;
+  overflow: hidden;
+  border: 1px solid #CAE4F4;
 
   .overflowBg {
     position: absolute;
@@ -87,11 +88,8 @@
 }
 
 .train-content {
-  margin: 20px 0;
   height: 238px;
   background: #ffffff;
-  border-radius: 11px;
-  border: 1px solid #74baff;
   position: relative;
   overflow: hidden;
 
@@ -196,24 +194,12 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
+  padding: 14px 13px;
 
   .type {
     gap: 8px 10px !important;
   }
 
-  :global {
-    .n-tag {
-      font-size: max(14px, 12Px);
-      font-weight: 500;
-      color: #0378ec;
-      line-height: 20px;
-      border: 1px solid #198cfe;
-      border-radius: 6px;
-      background-color: transparent;
-      height: 28px;
-      --n-border: none !important;
-    }
-  }
 
   .operation {
     display: flex;
@@ -228,6 +214,59 @@
   }
 }
 
+.trainInfo {
+  max-width: 55%;
+
+  .trainName {
+    display: flex;
+    align-items: center;
+    font-size: max(15px, 13Px);
+    font-family: PingFangSC, PingFang SC;
+    font-weight: 600;
+    color: #131415;
+    line-height: 21px;
+  }
+
+  .type {
+    padding: 0 9px;
+    display: inline-block;
+    background-color: #ccc;
+    border-radius: 5px;
+    font-size: max(12px, 12Px);
+    font-weight: 600;
+    color: #FFFFFF;
+    height: 20Px;
+    line-height: 20Px;
+    margin-right: 7px;
+  }
+
+  .PRACTICE {
+    background: linear-gradient(270deg, #23C3FF 0%, #007AFE 100%);
+  }
+
+  .EVALUATION {
+    background: linear-gradient(270deg, #FF7B57 0%, #FF3460 100%);
+  }
+
+  .tagList {
+    display: flex;
+    align-items: center;
+    padding-top: 5px;
+    font-size: 12Px;
+    font-weight: 500;
+    color: rgba(0, 0, 0, 0.5);
+
+    :global {
+      .n-divider {
+        --n-color: rgba(0, 0, 0, 0.5) !important;
+        height: 12Px;
+        margin: 0 5px !important;
+      }
+    }
+  }
+}
+
+
 .evaluationType {
   background: #fff0eb;
 

src/views/attend-class/model/train-type/index.tsx

@@ -9,18 +9,14 @@ import {
   NModal,
   NProgress,
   NTooltip,
-  useMessage
+  useMessage,
+  NDivider
 } from 'naive-ui';
-import pTag from './images/p-tag.png';
-import eTag from './images/e-tag.png';
-import pEdit from './images/p-edit.png';
-import eEdit from './images/e-edit.png';
-import pDelete from './images/p-delete.png';
-import eDelete from './images/e-delete.png';
-import iconDelete from './images/icon-delete.png';
-import eBackLook from './images/e-back-look.png';
-import eReport from './images/e-report.png';
-import eMessage from './images/e-message.png';
+
+import iconEdit from './images/icon-edit.png';
+import iconDelete from './images/icon-delete2.png';
+import iconBackLook from './images/icon-back-look.png';
+import iconReport from './images/icon-report.png';
 import { useUserStore } from '/src/store/modules/users';
 import CardPreview from '/src/components/card-preview';
 import { vaildUrl } from '/src/utils/urlUtils';
@@ -179,8 +175,8 @@ export default defineComponent({
           props.item.trainingType === 'EVALUATION' ? styles.evaluationType : ''
         ]}
         onClick={() => emit('click', props.item)}>
-        {props.isDelete && <div class={styles.overflowBg}></div>}
-        <div class={styles['train-header']}>
+        {/* {props.isDelete && <div class={styles.overflowBg}></div>} */}
+        {/* <div class={styles['train-header']}>
           <div class={styles.title}>
             <img
               src={props.item.trainingType === 'EVALUATION' ? eTag : pTag}
@@ -217,7 +213,7 @@ export default defineComponent({
                 : '练习模式'}
             </NButton>
           )}
-        </div>
+        </div> */}
         <div class={styles['train-content']}>
           <NImage src={props.item.coverImg} previewDisabled objectFit="cover" />
           {props.isDisabled && !props.isCLassWork ? (
@@ -288,11 +284,27 @@ export default defineComponent({
           )}
         </div>
         <div class={styles['train-footer']}>
-          <NSpace class={styles.type}>
-            {props.item.typeList?.map((type: string) => (
-              <NTag>{type}</NTag>
-            ))}
-          </NSpace>
+          <div class={styles.trainInfo}>
+            <div class={styles.trainName}>
+              <span class={[styles.type, styles[props.item.trainingType]]}>
+                {props.item.trainingType === 'EVALUATION' ? '评测' : '练习'}
+              </span>
+              <NEllipsis class={styles['title-text']} tooltip={false}>
+                {props.item.musicName}
+              </NEllipsis>
+            </div>
+            <div class={styles.tagList}>
+              {props.item.typeList?.map((type: string, index: number) => (
+                <>
+                  <span>{type}</span>
+                  {props.item.typeList.length - 1 > index && (
+                    <NDivider vertical />
+                  )}
+                </>
+              ))}
+            </div>
+          </div>
+
           {props.isDisabled ? null : (
             <NSpace size={12}>
               <n-button
@@ -305,45 +317,29 @@ export default defineComponent({
                 }}>
                 <NTooltip showArrow={false}>
                   {{
-                    trigger: () => (
-                      <img
-                        src={
-                          props.item.trainingType === 'EVALUATION'
-                            ? eEdit
-                            : pEdit
-                        }
-                      />
-                    ),
+                    trigger: () => <img src={iconEdit} />,
                     default: '编辑'
                   }}
                 </NTooltip>
               </n-button>
-              {props.type === 'homework' && (
-                <n-button
-                  quaternary
-                  disabled={props.isDelete}
-                  class={styles.operation}
-                  onClick={(e: MouseEvent) => {
-                    e.stopPropagation();
-                    // onDelete();
-                    removeVisiable.value = true;
-                  }}>
-                  <NTooltip showArrow={false}>
-                    {{
-                      trigger: () => (
-                        <img
-                          src={
-                            props.item.trainingType === 'EVALUATION'
-                              ? eDelete
-                              : pDelete
-                          }
-                        />
-                      ),
-                      default: '删除'
-                    }}
-                  </NTooltip>
-                </n-button>
-              )}
+              {/* {props.type === 'homework' && ( */}
+              <n-button
+                quaternary
+                disabled={props.isDelete}
+                class={styles.operation}
+                onClick={(e: MouseEvent) => {
+                  e.stopPropagation();
+                  // onDelete();
+                  removeVisiable.value = true;
+                }}>
+                <NTooltip showArrow={false}>
+                  {{
+                    trigger: () => <img src={iconDelete} />,
+                    default: '删除'
+                  }}
+                </NTooltip>
+              </n-button>
+              {/* )} */}
             </NSpace>
           )}
 
@@ -364,7 +360,7 @@ export default defineComponent({
                   }}>
                   <NTooltip showArrow={false}>
                     {{
-                      trigger: () => <img src={eReport} />,
+                      trigger: () => <img src={iconReport} />,
                       default: '评测报告'
                     }}
                   </NTooltip>
@@ -381,26 +377,11 @@ export default defineComponent({
                   }}>
                   <NTooltip showArrow={false}>
                     {{
-                      trigger: () => <img src={eBackLook} />,
+                      trigger: () => <img src={iconBackLook} />,
                       default: '查看回放'
                     }}
                   </NTooltip>
                 </n-button>
-                {/* <n-button
-                  quaternary
-                  disabled={props.isDelete}
-                  class={styles.operation}
-                  onClick={(e: MouseEvent) => {
-                    e.stopPropagation();
-                    removeVisiable.value = true;
-                  }}>
-                  <NTooltip showArrow={false}>
-                    {{
-                      trigger: () => <img src={eMessage} />,
-                      default: '写评语'
-                    }}
-                  </NTooltip>
-                </n-button> */}
               </NSpace>
             </>
           ) : (

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

@@ -1,15 +1,19 @@
-import { defineComponent } from 'vue';
+import { defineComponent, reactive } from 'vue';
 import styles from './index.module.less';
 import { NTabPane, NTabs } from 'naive-ui';
 import Courseware from './courseware';
 import Train from './train';
 import { usePrepareStore } from '/src/store/modules/prepareLessons';
 import TrainPresets from './train-presets';
+import { eventGlobal } from '/src/utils';
 
 export default defineComponent({
   name: 'lesson-main',
   setup() {
     const prepareStore = usePrepareStore();
+    const state = reactive({
+      editWorkShow: false // 是否编辑预设
+    });
 
     return () => (
       <div class={styles['lesson-main']}>
@@ -21,10 +25,14 @@ export default defineComponent({
           value={prepareStore.getTabType}
           onUpdate:value={(val: string) => {
             prepareStore.setTabType(val);
-
             // 重置编辑状态
             prepareStore.setIsEditResource(false);
             prepareStore.setIsEditTrain(false);
+
+            eventGlobal.emit(
+              'teacher-slideshow',
+              val === 'train' ? false : true
+            );
           }}>
           <NTabPane name="courseware" tab="课件" displayDirective="show">
             <Courseware />
@@ -35,8 +43,22 @@ export default defineComponent({
             displayDirective="if"
             v-slots={{ tab: () => <span id="lessons-4">作业</span> }}
             {...{ id: 'lessons-4' }}>
-            <TrainPresets />
-            {/* <Train /> */}
+            <div>
+              {state.editWorkShow ? (
+                <Train
+                  onChange={(val: any) => {
+                    state.editWorkShow = val.status;
+                    if (!val.status) {
+                      eventGlobal.emit('teacher-slideshow', false);
+                    }
+                  }}
+                />
+              ) : (
+                <TrainPresets
+                  onChange={(val: any) => (state.editWorkShow = val.status)}
+                />
+              )}
+            </div>
           </NTabPane>
         </NTabs>
       </div>

src/views/prepare-lessons/components/lesson-main/train-presets/index.module.less

@@ -82,19 +82,19 @@
   //   min-height: calc(var(--window-page-lesson-height) - 148px);
   // }
 
-  max-height: calc(var(--window-page-lesson-height) - 196px);
+  max-height: calc(var(--window-page-lesson-height) - 148px);
 
   .listSection {
-    min-height: calc(var(--window-page-lesson-height) - 196px);
+    min-height: calc(var(--window-page-lesson-height) - 148px);
   }
 
-  &.listContainerDrag {
-    max-height: calc(var(--window-page-lesson-height) - 148px);
+  // &.listContainerDrag {
+  //   max-height: calc(var(--window-page-lesson-height) - 148px);
 
-    .listSection {
-      min-height: calc(var(--window-page-lesson-height) - 148px);
-    }
-  }
+  //   .listSection {
+  //     min-height: calc(var(--window-page-lesson-height) - 148px);
+  //   }
+  // }
 
   .emptySection {
     display: flex;
@@ -118,4 +118,39 @@
       width: 100% !important;
     }
   }
+}
+
+.removeVisiable1 {
+  width: 432px;
+
+  :global {
+    .n-card-header {
+      font-size: max(22px, 16Px);
+    }
+  }
+
+  .studentRemove {
+    padding: 20px 40px 0;
+
+    p {
+      font-size: max(18px, 14Px);
+      color: #777777;
+      line-height: 30px;
+
+      span {
+        color: #EA4132;
+      }
+    }
+  }
+
+  .btnGroupModal {
+    padding: 32px 0;
+
+    :global {
+      .n-button {
+        height: 47px;
+        min-width: 156px;
+      }
+    }
+  }
 }

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

@@ -1,12 +1,17 @@
-import { defineComponent } from 'vue';
+import { defineComponent, reactive } from 'vue';
 import styles from './index.module.less';
-import { NButton, NImage, NScrollbar, NSpace, NSpin } from 'naive-ui';
+import { NButton, NImage, NModal, NScrollbar, NSpace, NSpin } from 'naive-ui';
 import add from '@/views/studentList/images/add.png';
 import WorkSection from '../../../model/work-section';
+import { eventGlobal } from '/src/utils';
 
 export default defineComponent({
   name: 'train-presets',
-  setup() {
+  emits: ['change'],
+  setup(props, { emit }) {
+    const forms = reactive({
+      removeVisiable1: false
+    });
     return () => (
       <div class={styles.trainPresets}>
         <div class={styles.btnGroup}>
@@ -15,7 +20,8 @@ export default defineComponent({
               type="primary"
               class={styles.addPreset}
               onClick={() => {
-                // forms.removeVisiable = true;
+                eventGlobal.emit('teacher-slideshow', true);
+                emit('change', { status: true });
               }}
               v-slots={{
                 icon: () => (
@@ -39,9 +45,46 @@ export default defineComponent({
           ]}>
           {/* <NSpin></NSpin> */}
           <div class={[styles.list]}>
-            <WorkSection />
+            <WorkSection
+              onEdit={() => {
+                //
+                emit('change', { status: true });
+              }}
+              onConfirm={() => {
+                //
+              }}
+              onDelete={() => (forms.removeVisiable1 = true)}
+            />
           </div>
         </NScrollbar>
+
+        <NModal
+          v-model:show={forms.removeVisiable1}
+          preset="card"
+          class={['modalTitle', styles.removeVisiable1]}
+          title={'删除作业'}>
+          <div class={styles.studentRemove}>
+            <p>请确认是否删除【2024年01月17日-课后作业】，删除后不可恢复</p>
+
+            <NSpace class={styles.btnGroupModal} justify="center">
+              <NButton round onClick={() => (forms.removeVisiable1 = false)}>
+                取消
+              </NButton>
+              <NButton
+                round
+                type="primary"
+                onClick={() => {
+                  // forms.trainList.forEach((item: any) => {
+                  //   forms.removeIds.push(item.id);
+                  // });
+                  // forms.trainList = [];
+                  // forms.removeVisiable1 = false;
+                }}>
+                确定
+              </NButton>
+            </NSpace>
+          </div>
+        </NModal>
       </div>
     );
   }

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

@@ -95,80 +95,6 @@
   }
 }
 
-.btnSubjectList {
-  :global {
-
-    .n-base-selection-label {
-      &::before {
-        margin-left: 12px;
-        content: ' ';
-        width: max(20px, 14Px);
-        height: max(20px, 14Px);
-        flex-shrink: 0;
-        background: url('../../../images/icon-subject-name.png') no-repeat center;
-        background-size: contain;
-      }
-    }
-
-    .n-base-selection-input {
-      padding-left: 8px !important;
-    }
-
-    .n-base-selection .n-base-selection-overlay {
-      left: 24px;
-    }
-  }
-
-  :global {
-    .n-base-selection {
-      --n-height: max(40px, 36Px) !important;
-      width: 160px;
-      font-size: 15px;
-      border-radius: 8px !important;
-    }
-
-    .n-base-selection-input__content {
-      font-size: max(15px, 13Px);
-    }
-
-    .n-button {
-      border-radius: 8px;
-      height: 38px;
-      font-size: max(18px, 13Px);
-      font-weight: 600 !important;
-      padding: 0 27px;
-    }
-
-    .n-button--default-type {
-      background: #E8F4FF;
-      color: #0378EC;
-
-      &:not(.n-button--disabled):hover {
-        background: #E8F4FF;
-      }
-
-      .n-button__border {
-        border: 1px solid #198CFE;
-      }
-    }
-
-    .n-button--error-type {
-      background: #FDEBED !important;
-      color: #EC3A4E !important;
-
-      &:not(.n-button--disabled):hover,
-      &:not(.n-button--disabled):active {
-        background: #FDEBED;
-        color: #EC3A4E;
-      }
-
-      .n-button__border {
-        border: 1px solid #EC3A4E;
-      }
-    }
-  }
-}
-
 .btnItem {
   display: flex;
   align-items: center;
@@ -182,6 +108,12 @@
   &:last-child {
     margin-left: 12px;
   }
+
+  :global {
+    .n-input {
+      --n-height: 38px !important;
+    }
+  }
 }
 
 .btnGroupClass {

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

@@ -2,6 +2,7 @@ import { defineComponent, onMounted, reactive, watch, ref } from 'vue';
 import styles from './index.module.less';
 import {
   NButton,
+  NInput,
   NModal,
   NScrollbar,
   NSelect,
@@ -28,7 +29,8 @@ import { eventGlobal } from '/src/utils';
 import iconTips from '../../../images/icon-tips.png';
 export default defineComponent({
   name: 'courseware-modal',
-  setup() {
+  emits: ['change'],
+  setup(props, { emit }) {
     const catchStore = useCatchStore();
     const prepareStore = usePrepareStore();
     const dialog = useDialog();
@@ -206,46 +208,43 @@ export default defineComponent({
     return () => (
       <div class={styles.coursewareModal}>
         <div class={styles.btnGroup}>
-          {forms.drag ? (
-            !forms.tipsStatus ? (
-              <div class={styles.tipsContainer}>
-                <div class={styles.tipsLeft}>
-                  <img src={iconTips} class={styles.iconTips} />
-                  <span class={styles.tips}>可以拖动资源排序哦</span>
-                </div>
-                <span
-                  class={styles.btnNoTips}
-                  onClick={() => {
-                    localStorage.setItem('prepare-lesson-train-tip', '1');
-                    forms.tipsStatus = true;
-                  }}>
-                  不再提醒
-                </span>
-              </div>
-            ) : (
-              <span></span>
-            )
-          ) : (
-            <NSpace>
-              <div class={styles.btnItem}>
-                <span class={styles.btnTitle}>声部：</span>
-                <NSelect
-                  placeholder="选择声部"
-                  class={styles.btnSubjectList}
-                  options={prepareStore.getSubjectList}
-                  labelField="name"
-                  valueField="id"
-                  value={prepareStore.getSubjectId}
-                  onUpdate:value={(val: any) => {
-                    prepareStore.setSubjectId(val);
-                    localStorage.setItem('prepareLessonSubjectId', val);
-                  }}
-                />
-              </div>
-            </NSpace>
-          )}
+          <NSpace>
+            <div class={styles.btnItem}>
+              <span class={styles.btnTitle}>声部：</span>
+              <NInput placeholder={'请输入标题'} />
+            </div>
+          </NSpace>
 
-          {forms.drag ? (
+          <NSpace>
+            <NButton
+              type="error"
+              onClick={() => {
+                // forms.trainList = [];
+                // prepareStore.setTrainList([]);
+                forms.removeVisiable1 = true;
+              }}>
+              清空
+            </NButton>
+            <NButton
+              type="error"
+              onClick={() => {
+                forms.drag = false;
+                prepareStore.setIsEditTrain(false);
+                forms.removeIds = [];
+                // getList();
+                emit('change', { status: false });
+              }}>
+              取消
+            </NButton>
+            <NButton
+              type="default"
+              onClick={() => {
+                forms.removeVisiable = true;
+              }}>
+              保存预设
+            </NButton>
+          </NSpace>
+          {/* {forms.drag ? (
             <NSpace>
               <NButton
                 type="error"
@@ -285,13 +284,13 @@ export default defineComponent({
                 编辑
               </NButton>
             </NSpace>
-          )}
+          )} */}
         </div>
 
         <NScrollbar
           class={[
-            styles.listContainer,
-            forms.drag ? styles.listContainerDrag : ''
+            styles.listContainer
+            // forms.drag ? styles.listContainerDrag : ''
           ]}>
           <NSpin show={forms.loadingStatus}>
             <div
@@ -386,35 +385,31 @@ export default defineComponent({
           </NSpin>
         </NScrollbar>
 
-        {!forms.drag ? (
-          <div
-            class={[styles.btnGroup, styles.btnGroupClass]}
-            style={{ justifyContent: 'flex-end' }}>
-            <NSpace justify="end">
-              <NButton
-                type="primary"
-                {...{ id: 'train-0' }}
-                disabled={forms.drag}
-                onClick={() => {
-                  let count = 0;
-                  forms.trainList.forEach((item: any) => {
-                    if (!item.removeFlag) {
-                      count++;
-                    }
-                  });
-                  if (count <= 0) {
-                    message.error('作业内容不能为空');
-                    return;
+        <div
+          class={[styles.btnGroup, styles.btnGroupClass]}
+          style={{ justifyContent: 'flex-end' }}>
+          <NSpace justify="end">
+            <NButton
+              type="primary"
+              // {...{ id: 'train-0' }}
+              disabled={forms.drag}
+              onClick={() => {
+                let count = 0;
+                forms.trainList.forEach((item: any) => {
+                  if (!item.removeFlag) {
+                    count++;
                   }
-                  forms.assignHomeworkStatus = true;
-                }}>
-                布置作业
-              </NButton>
-            </NSpace>
-          </div>
-        ) : (
-          ''
-        )}
+                });
+                if (count <= 0) {
+                  message.error('作业内容不能为空');
+                  return;
+                }
+                forms.assignHomeworkStatus = true;
+              }}>
+              立即布置
+            </NButton>
+          </NSpace>
+        </div>
 
         {/* 编辑 */}
         <NModal
@@ -445,7 +440,7 @@ export default defineComponent({
             onClose={() => (forms.assignHomeworkStatus = false)}
           />
         </NModal>
-        {showGuide.value ? <Trainguide></Trainguide> : null}
+        {/* {showGuide.value ? <Trainguide></Trainguide> : null} */}
 
         <NModal
           v-model:show={forms.removeVisiable}
@@ -487,9 +482,6 @@ export default defineComponent({
                   });
                   forms.trainList = [];
                   forms.removeVisiable1 = false;
-                  // prepareStore.setCoursewareList([]);
-
-                  // console.log(prepareStore.getTrainList, 'getCourseware1');
                 }}>
                 确定
               </NButton>

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

@@ -17,16 +17,37 @@
     flex: 1;
     background-color: #fff;
     border-radius: 20px;
+    transition: all .2s ease;
   }
 
   .resourceMain {
-    transition: all .2s ease-in-out;
+
+    transition: all .2s ease;
 
     &.resourceClose {
-      transition: all .2s ease-in-out;
+      transition: all .2s ease;
       width: 0;
       transform: translateX(100%);
       opacity: 0;
     }
   }
+
+  &.hideSideBar {
+    position: relative;
+    overflow: hidden;
+
+    .resourceMain {
+      width: 360px;
+      transition: all .2s ease;
+      opacity: 0;
+      position: absolute;
+      right: 0;
+      transform: translateX(100%);
+    }
+
+    .lessonMain {
+      transition: all .2s ease;
+      margin-right: 0;
+    }
+  }
 }

src/views/prepare-lessons/index.tsx

@@ -1,4 +1,11 @@
-import { defineComponent, onMounted, ref, computed, onUnmounted } from 'vue';
+import {
+  defineComponent,
+  onMounted,
+  ref,
+  computed,
+  onUnmounted,
+  reactive
+} from 'vue';
 import styles from './index.module.less';
 import DirectoryList from './components/directory-main';
 import LessonMain from './components/lesson-main';
@@ -13,8 +20,10 @@ import { setGuidance } from '/src/custom-plugins/guide-page/api';
 export default defineComponent({
   name: 'prepare-lessons',
   setup() {
+    const state = reactive({
+      sidebarShow: true
+    });
     const prepareStore = usePrepareStore();
-
     // console.log(prepareStore, 'prepareStore');
     const { treeList, coursewareList } = storeToRefs(prepareStore);
     const showGuide = computed(() => {
@@ -42,17 +51,24 @@ export default defineComponent({
       }
     };
 
+    const onSlideChange = (val: boolean) => {
+      state.sidebarShow = val;
+    };
     onMounted(() => {
+      // 指引事件
       eventGlobal.on('teacher-guideInfo', async (name: string) =>
         onUpdate(name)
       );
+
+      eventGlobal.on('teacher-slideshow', onSlideChange);
     });
     onUnmounted(() => {
       eventGlobal.off('teacher-guideInfo', onUpdate);
+      eventGlobal.off('teacher-slideshow', onSlideChange);
     });
     onMounted(() => {
       useResizeObserver(
-        document.querySelector('#lessons-1') as HTMLElement,
+        document.querySelector('#lessons-height') as HTMLElement,
         (entries: any) => {
           const entry = entries[0];
           const { height } = entry.contentRect;
@@ -77,18 +93,21 @@ export default defineComponent({
       prepareStore.setIsAddTrain(false);
       prepareStore.setIsEditResource(false);
       prepareStore.setIsEditTrain(false);
-      // prepareStore.setSubjectId('');
-      // prepareStore.setCoursewareList([]);
-      // prepareStore.setTreeList([]);
-      // prepareStore.setTrainList([]);
     });
     onUnmounted(() => {
       prepareStore.setSubjectId('');
     });
     return () => (
-      <div class={styles.prepareLessons}>
+      <div
+        class={[
+          styles.prepareLessons,
+          !state.sidebarShow && styles.hideSideBar
+        ]}>
         {/* 左侧目录 */}
-        <div class={styles.directoryMain} ref={directroyRef.value}>
+        <div
+          class={styles.directoryMain}
+          ref={directroyRef.value}
+          id="lessons-height">
           <DirectoryList />
         </div>
         {/* 中间排课 */}
@@ -96,9 +115,9 @@ export default defineComponent({
           <LessonMain />
         </div>
         {/* 资源 */}
-        {/* <div class={[styles.resourceMain]} id="lessons-1">
+        <div class={[styles.resourceMain]} id="lessons-1">
           <ResourceMain />
-        </div> */}
+        </div>
         {showGuide.value ? <LessonsGuide></LessonsGuide> : null}
       </div>
     );

src/views/prepare-lessons/model/work-section/index.module.less

@@ -6,6 +6,7 @@
     --n-border-radius: 8px !important;
     --n-font-size: 16px !important;
     --n-height: 36px !important;
+    width: 110px !important;
   }
 
   .btnB {
@@ -55,8 +56,8 @@
   // align-items: flex-start;
 
   .navatar {
-    width: 60px;
-    height: 60px;
+    width: 55px;
+    height: 55px;
     border-radius: 50%;
     padding: 2px;
     border: 1px solid #198CFE;
@@ -93,6 +94,23 @@
       max-width: 350px;
     }
 
+    .p1::before,
+    .p2::before {
+      content: '';
+      display: inline-block;
+      width: 5px;
+      height: 5px;
+      background: #198CFE;
+      margin-right: 7px;
+      border-radius: 50%;
+      flex-shrink: 0;
+      transform: translateY(-3px);
+    }
+
+    .p2::before {
+      background: #F44040;
+    }
+
   }
 
   .btnGroup {

src/views/prepare-lessons/model/work-section/index.tsx

@@ -5,7 +5,8 @@ import teacherIcon from '@components/layout/images/teacherIcon.png';
 
 export default defineComponent({
   name: 'work-section',
-  setup() {
+  emits: ['edit', 'delete', 'confirm'],
+  setup(props, { emit }) {
     return () => (
       <div class={styles.workSection}>
         <div class={styles.header}>
@@ -20,6 +21,7 @@ export default defineComponent({
             class={[styles.btnSize, styles.btnB]}
             onClick={() => {
               // forms.removeVisiable = true;
+              emit('confirm');
             }}>
             立即布置
           </NButton>
@@ -29,17 +31,23 @@ export default defineComponent({
           <NAvatar class={styles.navatar} round src={teacherIcon} />
           <div class={styles.userInfo}>
             <h2>孙忆枫</h2>
-            <p>
+            <p class={styles.p1}>
               练习曲目《小星星》、《我和我的祖国》练习曲目《小星星》、《我和我的祖国》
             </p>
-            <p>评测曲目《我和我的祖国》</p>
+            <p class={styles.p2}>评测曲目《我和我的祖国》</p>
           </div>
           <NSpace class={styles.btnGroup} justify="center" vertical>
-            <NButton type="default" class={[styles.btnSize]}>
-              编辑编辑
+            <NButton
+              type="default"
+              class={[styles.btnSize]}
+              onClick={() => emit('edit')}>
+              编辑
             </NButton>
-            <NButton type="default" class={[styles.btnSize]}>
-              删除编辑
+            <NButton
+              type="default"
+              class={[styles.btnSize]}
+              onClick={() => emit('delete')}>
+              删除
             </NButton>
           </NSpace>
         </div>