修改

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

@@ -4,6 +4,7 @@ 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';
 
 export default defineComponent({
   name: 'lesson-main',
@@ -34,7 +35,8 @@ export default defineComponent({
             displayDirective="if"
             v-slots={{ tab: () => <span id="lessons-4">作业</span> }}
             {...{ id: 'lessons-4' }}>
-            <Train />
+            <TrainPresets />
+            {/* <Train /> */}
           </NTabPane>
         </NTabs>
       </div>

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

@@ -0,0 +1,121 @@
+.btnGroup {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-left: 22px !important;
+  height: 40px;
+  padding-right: 22px !important;
+
+  .addBtnIcon {
+    width: 13px !important;
+    height: 14px !important;
+  }
+
+  .addPreset {
+    padding: 0 16px 0 10px !important;
+
+    :global {
+      .n-button__icon {
+        margin-right: 0;
+      }
+    }
+  }
+
+  :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;
+      }
+    }
+  }
+}
+
+.listContainer {
+  margin-top: 12px;
+  // // 52 + 28 + 38
+  // max-height: calc(var(--window-page-lesson-height) - 148px);
+
+  // .listSection {
+  //   min-height: calc(var(--window-page-lesson-height) - 148px);
+  // }
+
+  max-height: calc(var(--window-page-lesson-height) - 196px);
+
+  .listSection {
+    min-height: calc(var(--window-page-lesson-height) - 196px);
+  }
+
+  &.listContainerDrag {
+    max-height: calc(var(--window-page-lesson-height) - 148px);
+
+    .listSection {
+      min-height: calc(var(--window-page-lesson-height) - 148px);
+    }
+  }
+
+  .emptySection {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.list {
+  padding: 12px 22px 12px;
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: flex-start;
+  gap: 20px 2%;
+
+  &>div {
+    width: 49% !important;
+  }
+
+  .itemBlock {
+    &>div {
+      width: 100% !important;
+    }
+  }
+}

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

@@ -0,0 +1,48 @@
+import { defineComponent } from 'vue';
+import styles from './index.module.less';
+import { NButton, NImage, NScrollbar, NSpace, NSpin } from 'naive-ui';
+import add from '@/views/studentList/images/add.png';
+import WorkSection from '../../../model/work-section';
+
+export default defineComponent({
+  name: 'train-presets',
+  setup() {
+    return () => (
+      <div class={styles.trainPresets}>
+        <div class={styles.btnGroup}>
+          <NSpace>
+            <NButton
+              type="primary"
+              class={styles.addPreset}
+              onClick={() => {
+                // forms.removeVisiable = true;
+              }}
+              v-slots={{
+                icon: () => (
+                  <>
+                    <NImage
+                      class={styles.addBtnIcon}
+                      previewDisabled
+                      src={add}></NImage>
+                  </>
+                )
+              }}>
+              添加作业预设
+            </NButton>
+          </NSpace>
+        </div>
+
+        <NScrollbar
+          class={[
+            styles.listContainer
+            // forms.drag ? styles.listContainerDrag : ''
+          ]}>
+          {/* <NSpin></NSpin> */}
+          <div class={[styles.list]}>
+            <WorkSection />
+          </div>
+        </NScrollbar>
+      </div>
+    );
+  }
+});

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

@@ -1,4 +1,4 @@
-import { defineComponent, onMounted, reactive, watch } from 'vue';
+import { PropType, defineComponent, onMounted, reactive, watch } from 'vue';
 import ResourceSearchGroup from './resource-search-group';
 import { NModal, NScrollbar, NSpin } from 'naive-ui';
 import styles from './index.module.less';
@@ -14,6 +14,12 @@ import { evaluateDifficult } from '/src/utils/contants';
 import { eventGlobal } from '/src/utils';
 export default defineComponent({
   name: 'share-resources',
+  props: {
+    type: {
+      type: String as PropType<'myMusic' | 'sahreMusic' | 'collectMusic'>,
+      default: 'myMusic'
+    }
+  },
   setup() {
     const prepareStore = usePrepareStore();
     const state = reactive({

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

@@ -15,6 +15,7 @@ export default defineComponent({
     const prepareStore = usePrepareStore();
     const forms = reactive({
       tabType: 'myResources',
+      tabWorkType: 'myMusic',
       selectMusicStatus: false,
       selectResourceStatus: false,
       editStatus: false,
@@ -115,10 +116,12 @@ export default defineComponent({
         ) : (
           <NTabs
             animated
-            value="selectMusic"
+            value={forms.tabWorkType}
             paneClass={styles.paneTitle}
-            justifyContent="center"
-            paneWrapperClass={styles.paneWrapperContainer}>
+            paneWrapperClass={styles.paneWrapperContainer}
+            onUpdate:value={(val: string) => {
+              forms.tabWorkType = val;
+            }}>
             {{
               suffix: () => (
                 <div
@@ -137,9 +140,17 @@ export default defineComponent({
                 </div>
               ),
               default: () => (
-                <NTabPane name="selectMusic" tab="选择曲目">
-                  <SelectMusic />
-                </NTabPane>
+                <>
+                  <NTabPane name="myMusic" tab="我的曲目">
+                    <SelectMusic type="myMusic" />
+                  </NTabPane>
+                  <NTabPane name="sahreMusic" tab="共享曲目">
+                    <SelectMusic type="sahreMusic" />
+                  </NTabPane>
+                  <NTabPane name="collectMusic" tab="收藏曲目">
+                    <SelectMusic type="collectMusic" />
+                  </NTabPane>
+                </>
               )
             }}
           </NTabs>

src/views/prepare-lessons/index.tsx

@@ -96,17 +96,9 @@ export default defineComponent({
           <LessonMain />
         </div>
         {/* 资源 */}
-        <div
-          class={[
-            styles.resourceMain
-            // prepareStore.getSelectMusicStatus ||
-            // prepareStore.getSelectResourceStatus
-            //   ? styles.resourceClose
-            //   : ''
-          ]}
-          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

@@ -0,0 +1,104 @@
+.workSection {
+  background: #F7F9FF;
+  border-radius: 16px;
+
+  .btnSize {
+    --n-border-radius: 8px !important;
+    --n-font-size: 16px !important;
+    --n-height: 36px !important;
+  }
+
+  .btnB {
+    --n-font-weight: 600 !important;
+  }
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 0;
+  margin: 0 20px;
+
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+
+  .headerName {
+    font-size: max(20px, 13Px);
+    font-weight: 600;
+    color: #000000;
+    line-height: 28px;
+    display: flex;
+    align-items: center;
+
+    span {
+      max-width: 200px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  .iconEdit {
+    display: inline-block;
+    margin-left: 8px;
+    width: 18px;
+    height: 18px;
+    background: url('./images/icon-edit.png') no-repeat center;
+    background-size: contain;
+  }
+}
+
+.content {
+  display: flex;
+  padding: 20px;
+  display: flex;
+  // align-items: flex-start;
+
+  .navatar {
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    padding: 2px;
+    border: 1px solid #198CFE;
+    margin-right: 15px;
+    flex-shrink: 0;
+    background-color: #fff !important;
+
+    :global {
+      img {
+        border-radius: 50%;
+      }
+    }
+  }
+
+  .userInfo {
+    padding-top: 4px;
+    flex: 1;
+    margin-right: 30px;
+
+    h2 {
+      font-size: max(20px, 13Px);
+      font-weight: 600;
+      color: #131415;
+      line-height: 28px;
+    }
+
+    p {
+      font-size: max(16px, 12Px);
+      color: #777777;
+      line-height: 28px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 350px;
+    }
+
+  }
+
+  .btnGroup {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
+}

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

@@ -0,0 +1,49 @@
+import { defineComponent } from 'vue';
+import styles from './index.module.less';
+import { NAvatar, NButton, NSpace } from 'naive-ui';
+import teacherIcon from '@components/layout/images/teacherIcon.png';
+
+export default defineComponent({
+  name: 'work-section',
+  setup() {
+    return () => (
+      <div class={styles.workSection}>
+        <div class={styles.header}>
+          <div class={styles.headerName}>
+            <span>其多列-课后作业课后作业课后作业课后作业</span>
+            <i class={styles.iconEdit}></i>
+          </div>
+
+          <NButton
+            type="primary"
+            color="#02B58C"
+            class={[styles.btnSize, styles.btnB]}
+            onClick={() => {
+              // forms.removeVisiable = true;
+            }}>
+            立即布置
+          </NButton>
+        </div>
+
+        <div class={styles.content}>
+          <NAvatar class={styles.navatar} round src={teacherIcon} />
+          <div class={styles.userInfo}>
+            <h2>孙忆枫</h2>
+            <p>
+              练习曲目《小星星》、《我和我的祖国》练习曲目《小星星》、《我和我的祖国》
+            </p>
+            <p>评测曲目《我和我的祖国》</p>
+          </div>
+          <NSpace class={styles.btnGroup} justify="center" vertical>
+            <NButton type="default" class={[styles.btnSize]}>
+              编辑编辑
+            </NButton>
+            <NButton type="default" class={[styles.btnSize]}>
+              删除编辑
+            </NButton>
+          </NSpace>
+        </div>
+      </div>
+    );
+  }
+});