Merge branch 'iteration-login' into dev

dev-dist/sw.js

@@ -20,21 +20,23 @@ if (!self.define) {
   let nextDefineUri;
 
   const singleRequire = (uri, parentUri) => {
-    uri = new URL(uri + '.js', parentUri).href;
-    return (
-      registry[uri] ||
-      new Promise(resolve => {
-        if ('document' in self) {
-          const script = document.createElement('script');
-          script.src = uri;
-          script.onload = resolve;
-          document.head.appendChild(script);
-        } else {
-          nextDefineUri = uri;
-          importScripts(uri);
-          resolve();
-        }
-      }).then(() => {
+    uri = new URL(uri + ".js", parentUri).href;
+    return registry[uri] || (
+      
+        new Promise(resolve => {
+          if ("document" in self) {
+            const script = document.createElement("script");
+            script.src = uri;
+            script.onload = resolve;
+            document.head.appendChild(script);
+          } else {
+            nextDefineUri = uri;
+            importScripts(uri);
+            resolve();
+          }
+        })
+      
+      .then(() => {
         let promise = registry[uri];
         if (!promise) {
           throw new Error(`Module ${uri} didn’t register its module`);
@@ -45,10 +47,7 @@ if (!self.define) {
   };
 
   self.define = (depsNames, factory) => {
-    const uri =
-      nextDefineUri ||
-      ('document' in self ? document.currentScript.src : '') ||
-      location.href;
+    const uri = nextDefineUri || ("document" in self ? document.currentScript.src : "") || location.href;
     if (registry[uri]) {
       // Module is already loading or loaded.
       return;
@@ -60,16 +59,15 @@ if (!self.define) {
       exports,
       require
     };
-    registry[uri] = Promise.all(
-      depsNames.map(depName => specialDeps[depName] || require(depName))
-    ).then(deps => {
+    registry[uri] = Promise.all(depsNames.map(
+      depName => specialDeps[depName] || require(depName)
+    )).then(deps => {
       factory(...deps);
       return exports;
     });
   };
 }
-define(['./workbox-5357ef54'], function (workbox) {
-  'use strict';
+define(['./workbox-5357ef54'], (function (workbox) { 'use strict';
 
   self.skipWaiting();
   workbox.clientsClaim();
@@ -79,23 +77,16 @@ define(['./workbox-5357ef54'], function (workbox) {
    * requests for URLs in the manifest.
    * See https://goo.gl/S9QRab
    */
-  workbox.precacheAndRoute(
-    [
-      {
-        url: 'registerSW.js',
-        revision: '3ca0b8505b4bec776b69afdba2768812'
-      },
-      {
-        url: 'index.html',
-        revision: '0.q61cia0b9'
-      }
-    ],
-    {}
-  );
+  workbox.precacheAndRoute([{
+    "url": "registerSW.js",
+    "revision": "3ca0b8505b4bec776b69afdba2768812"
+  }, {
+    "url": "index.html",
+    "revision": "0.rcgagrcgb8"
+  }], {});
   workbox.cleanupOutdatedCaches();
-  workbox.registerRoute(
-    new workbox.NavigationRoute(workbox.createHandlerBoundToURL('index.html'), {
-      allowlist: [/^\/$/]
-    })
-  );
-});
+  workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {
+    allowlist: [/^\/$/]
+  }));
+
+}));

src/components/TheQrCode/index.tsx

@@ -1,6 +1,6 @@
 import { defineComponent } from 'vue';
 import { AwesomeQR } from 'vue-qr/src/lib/awesome-qr';
-import { px2vw } from '@/utils/index'
+import { px2vw } from '@/utils/index';
 function toBoolean(val: any): boolean {
   if (val === '') return val;
   return val === 'true' || val == '1';
@@ -185,7 +185,7 @@ export default defineComponent({
         backgroundColor: this.backgroundColor,
         backgroundImage: img,
         backgroundDimming: this.backgroundDimming,
-        logoImage: logoImg + '?' + new Date().getTime(),
+        logoImage: logoImg ? logoImg + '?' + new Date().getTime() : undefined,
         logoScale: this.logoScale,
         logoBackgroundColor: this.logoBackgroundColor,
         correctLevel: this.correctLevel,
@@ -206,9 +206,17 @@ export default defineComponent({
   },
   render() {
     return (
-      < >
+      <>
         {this.bindElement && this.imgUrl && (
-          <img style={{ width: px2vw(this.size), height: px2vw(this.size), display: 'inline-block', zIndex: 1000 }} src={this.imgUrl} />
+          <img
+            style={{
+              width: px2vw(this.size),
+              height: px2vw(this.size),
+              display: 'inline-block',
+              zIndex: 1000
+            }}
+            src={this.imgUrl}
+          />
         )}
       </>
     );

src/components/TheSearch/index.module.less

@@ -1,38 +1,52 @@
 .TheSearch {
-    border-radius: 20px !important;
+  border-radius: 20px !important;
 
-    :global {
-        .n-input-wrapper {
-            padding-left: 12px;
-            padding-right: 4px;
-            height: 42px !important;
-        }
-
-        .n-button {
-            height: 34px;
-            font-size: 15px;
-            font-weight: 500;
-            width: auto;
-        }
+  &.noBorder {
+    --n-border: none !important;
+  }
+
+  :global {
+    .n-input-wrapper {
+      padding-left: 12px;
+      padding-right: 4px;
+      height: 42px !important;
     }
 
+    .n-button {
+      height: 34px;
+      font-size: 15px;
+      font-weight: 500;
+      width: auto;
+      opacity: 0.7;
+    }
+
+  }
+
+  .active {
+    display: none;
+  }
+
+  &:global(.n-input--focus) {
     .active {
-        display: none;
+      display: block;
     }
 
-    &:global(.n-input--focus) {
-        .active {
-            display: block;
-        }
+    .default {
+      display: none;
+    }
 
-        .default {
-            display: none;
-        }
+    :global {
+      .n-button {
+        opacity: 1;
+      }
+    }
+  }
 
-        :global {
-            .n-button {
-                opacity: 1;
-            }
-        }
+  &:hover {
+    :global {
+      .n-button {
+        opacity: 1;
+      }
     }
+  }
 }

src/components/TheSearch/index.tsx

@@ -11,6 +11,10 @@ export default defineComponent({
     round: {
       type: Boolean as PropType<InputProps['round']>,
       default: false
+    },
+    border: {
+      type: Boolean,
+      default: true
     }
   },
   emits: ['search'],
@@ -20,7 +24,7 @@ export default defineComponent({
     });
     return () => (
       <NInput
-        class={styles.TheSearch}
+        class={[styles.TheSearch, props.border ? '' : styles.noBorder]}
         round={props.round}
         placeholder="请输入搜索关键词"
         clearable

src/components/card-preview/index.module.less

@@ -4,7 +4,7 @@
   :global {
     .n-card__content {
       height: 517px;
-      border-radius: 16px;
+      border-radius: 0 0 16px 16px !important;
       overflow: hidden;
     }
 

src/components/card-preview/music-modal/index.tsx

@@ -17,7 +17,7 @@ export default defineComponent({
     const origin = /(localhost|192)/.test(location.host)
       ? 'https://dev.kt.colexiu.com'
       : location.origin;
-    const src = `${origin}/instrument?modelType=practise&id=${props.item.content}&Authorization=${userStore.getToken}`;
+    const src = `${origin}/instrument?platform=pc&zoom=1&modelType=practise&id=${props.item.content}&Authorization=${userStore.getToken}`;
     return () => (
       <div class={styles.musicScore}>
         <iframe

src/components/card-preview/song-modal/index.module.less

@@ -26,7 +26,7 @@
     position: absolute;
     top: 0;
     right: 0;
-    bottom: 0;
+    bottom: 80px;
     left: 0;
     padding: 0;
   }
@@ -38,6 +38,7 @@
 }
 
 .controls {
+  border-radius: 0 0 16px 16px !important;
   position: absolute;
   bottom: 0;
   left: 0;
@@ -131,4 +132,4 @@
   pointer-events: none;
   transform: translateY(100%);
   transition: all .5s;
-}
+}

src/components/card-preview/video-modal/index.module.less

@@ -85,9 +85,10 @@
 
     .actionBtn {
       display: flex;
+
+      padding: 4px 0;
       width: 52px;
       height: 52px;
-      padding: 4px 0;
       background: transparent;
     }
 
@@ -126,8 +127,9 @@
 
     .loopBtn {
       background-color: transparent;
-      width: 31px;
-      height: 29px;
+      width: 31px !important;
+      height: 29px !important;
+      padding: 0;
       cursor: pointer;
 
       :global {
@@ -141,4 +143,4 @@
       }
     }
   }
-}
+}

src/utils/urlUtils.ts

@@ -1,7 +1,7 @@
 export function vaildUrl() {
   const url: string = window.location.href;
   let returnUrl = '';
-  if (/192/.test(url)) {
+  if (/192/.test(url) || /localhost/.test(url)) {
     //本地环境
     returnUrl = 'https://test.lexiaoya.cn';
   } else if (/test/.test(url)) {

src/views/attend-class/component/audio.module.less

@@ -62,6 +62,10 @@
     font-weight: 600;
     line-height: 33px;
 
+    &>div {
+      font-size: 24px !important;
+    }
+
     .line {
       font-size: 12px;
     }
@@ -103,8 +107,8 @@
 
 
   .iconReplay {
-    width: 41px;
-    height: 39px;
+    width: 43px;
+    height: 42px;
     background-color: transparent;
 
     &>img {

src/views/attend-class/component/musicScore.tsx

@@ -34,7 +34,7 @@ export default defineComponent({
     const origin = /(localhost|192)/.test(location.host)
       ? 'https://dev.kt.colexiu.com'
       : location.origin;
-    const src = `${origin}/instrument?platform=pc&modelType=practise&id=${props.music.content}&Authorization=${userStore.getToken}`;
+    const src = `${origin}/instrument?platform=pc&zoom=1.2&modelType=practise&id=${props.music.content}&Authorization=${userStore.getToken}`;
     const checkView = () => {
       fetch(src)
         .then(() => {

src/views/attend-class/component/tools/pen.module.less

@@ -31,16 +31,31 @@
 }
 
 .rightItem {
+
+  // position: absolute;
+  // right: 15Px;
+  // bottom: 0;
+  // bottom: constant(safe-area-inset-bottom);
+  // bottom: env(safe-area-inset-bottom);
+  // width: 50Px;
+  // height: 54Px;
+  // display: flex;
+  // justify-content: center;
+  // align-items: center;
+
   position: absolute;
-  right: 15Px;
-  bottom: 0;
-  bottom: constant(safe-area-inset-bottom);
-  bottom: env(safe-area-inset-bottom);
-  width: 50Px;
-  height: 54Px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  top: 40px;
+  left: 40px;
+  width: 187px;
+  height: 65px;
+  cursor: pointer;
+  transition: all 0.5s;
+
+  img {
+    width: 100%;
+    height: 100%;
+  }
+
 }
 
 .img {

src/views/attend-class/component/tools/pen.tsx

@@ -1,6 +1,8 @@
 import { defineComponent, toRefs, ref, PropType } from 'vue';
 import styles from './pen.module.less';
 import { ToolType } from '../../index';
+import exit1 from '../../image/exit1.png';
+import exit2 from '../../image/exit2.png';
 
 export default defineComponent({
   name: 'pen-page',
@@ -21,9 +23,10 @@ export default defineComponent({
   setup(props) {
     const { show, type } = toRefs(props);
     const firstRender = ref(true);
-    const src = /(localhost|192)/.test(location.host)
-      ? 'https://test.lexiaoya.cn/whiteboard-noCollab'
-      : `https://test.lexiaoya.cn/whiteboard-noCollab`;
+    const origin = /(localhost|192)/.test(location.host)
+      ? 'https://test.lexiaoya.cn/'
+      : location.origin;
+    const src = `${origin}/classroom-whiteboard?type=${props.type}`;
 
     return () => (
       <div
@@ -43,12 +46,7 @@ export default defineComponent({
             firstRender.value = false;
           }}></iframe>
         <div class={styles.rightItem} onClick={() => props.close()}>
-          <svg width="22px" height="20px" viewBox="0 0 22 20">
-            <path
-              transform="translate(-1.000000, -2.000000)"
-              fill="#FFFFFF"
-              d="M13,2 C13.5522847,2 14,2.44771525 14,3 C14,3.51283584 13.6139598,3.93550716 13.1166211,3.99327227 L13,4 L3,4 L3,20 L13,20 C13.5128358,20 13.9355072,20.3860402 13.9932723,20.8833789 L14,21 C14,21.5128358 13.6139598,21.9355072 13.1166211,21.9932723 L13,22 L2,22 C1.48716416,22 1.06449284,21.6139598 1.00672773,21.1166211 L1,21 L1,3 C1,2.48716416 1.38604019,2.06449284 1.88337887,2.00672773 L2,2 L13,2 Z M17.7071068,7.05025253 L21.9497475,11.2928932 L21.9497475,11.2928932 C22.3402718,11.6834175 22.3402718,12.3165825 21.9497475,12.7071068 L17.7071068,16.9497475 C17.3165825,17.3402718 16.6834175,17.3402718 16.2928932,16.9497475 C15.9023689,16.5592232 15.9023689,15.9260582 16.2928932,15.5355339 L18.828,12.999 L9.29368112,13 C8.74139637,13 8.29368112,12.5522847 8.29368112,12 C8.29368112,11.4871642 8.67972131,11.0644928 9.17706,11.0067277 L9.29368112,11 L18.827,10.999 L16.2928932,8.46446609 C15.9023689,8.0739418 15.9023689,7.44077682 16.2928932,7.05025253 C16.6834175,6.65972824 17.3165825,6.65972824 17.7071068,7.05025253 Z"></path>
-          </svg>
+          <img src={props.type === 'pen' ? exit2 : exit1} />
         </div>
       </div>
     );

src/views/attend-class/component/video.module.less

@@ -41,6 +41,10 @@
     font-weight: 600;
     line-height: 33px;
 
+    &>div {
+      font-size: 24px !important;
+    }
+
     .line {
       font-size: 12px;
     }
@@ -83,8 +87,8 @@
 
     .actionBtn {
       display: flex;
-      width: 82px;
-      height: 82px;
+      width: 43px !important;
+      height: 43px !important;
       padding: 4px 0;
       background: transparent;
     }

src/views/attend-class/index.module.less

@@ -56,10 +56,11 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  height: 40px;
+  height: 50px;
   background: linear-gradient(180deg, rgba(0, 0, 0, 0.6), transparent);
   transition: transform 0.5s;
   box-sizing: border-box;
+  font-size: 18px;
 
   div {
     box-sizing: border-box;
@@ -321,14 +322,14 @@
 .switchDisplaySection {
   position: absolute;
   right: 30px;
-  bottom: 40px;
+  bottom: 30px;
   z-index: 199;
   transition: all 0.5s;
   display: flex;
 
   .displayBtn {
-    width: 70px;
-    height: 70px;
+    width: 90px;
+    height: 90px;
     cursor: pointer;
 
     img {

src/views/attend-class/index.tsx

@@ -4,7 +4,8 @@ import {
   reactive,
   onUnmounted,
   ref,
-  Transition
+  Transition,
+  computed
 } from 'vue';
 import styles from './index.module.less';
 import 'plyr/dist/plyr.css';
@@ -34,7 +35,7 @@ import AudioPay from './component/audio-pay';
 import TrainSettings from './model/train-settings';
 import { useRoute } from 'vue-router';
 import { lessonPreTrainingPage, queryCourseware } from '../prepare-lessons/api';
-import Attentguide from '@/custom-plugins/guide-page/attent-guide'
+import Attentguide from '@/custom-plugins/guide-page/attent-guide';
 export type ToolType = 'init' | 'pen' | 'whiteboard';
 export type ToolItem = {
   type: ToolType;
@@ -100,7 +101,7 @@ export default defineComponent({
       timer: null as any,
       item: null as any
     });
-    const showGuide = ref(false)
+    const showGuide = ref(false);
     const getDetail = async () => {
       try {
         const res = await queryCourseware({
@@ -125,6 +126,7 @@ export default defineComponent({
             });
           }
         });
+
         data.knowledgePointList = temp;
         data.itemList = data.knowledgePointList.map((m: any) => {
           return {
@@ -137,9 +139,9 @@ export default defineComponent({
             isRender: false // 是否渲染了
           };
         });
-        setTimeout(()=>{
+        setTimeout(() => {
           showGuide.value = true;
-        },500)
+        }, 500);
       } catch {
         //
       }
@@ -163,12 +165,36 @@ export default defineComponent({
       getDetail();
     });
 
+    const onFullScreen = () => {
+      if (data.type === 'preview') {
+        const el: any = document.querySelector('#app');
+
+        if (el.mozRequestFullScreen) {
+          el.mozRequestFullScreen();
+        } else if (el.webkitRequestFullscreen) {
+          el.webkitRequestFullscreen();
+        } else if (el.requestFullScreen) {
+          el.requestFullscreen();
+        }
+      }
+    };
+
     const popupData = reactive({
       open: false,
       activeIndex: 0,
       toolOpen: false // 工具弹窗控制
     });
 
+    const activeName = computed(() => {
+      let name = '';
+      data.knowledgePointList.forEach((item: any, index: number) => {
+        if (popupData.activeIndex === index) {
+          name = item.title;
+        }
+      });
+      return name;
+    });
+
     /**停止所有的播放 */
     const handleStop = () => {
       for (let i = 0; i < data.itemList.length; i++) {
@@ -424,7 +450,8 @@ export default defineComponent({
     /** 教学数据 */
     const studyData = reactive({
       type: '' as ToolType,
-      penShow: false
+      penShow: false,
+      whiteboardShow: false
     });
 
     /** 打开教学工具 */
@@ -452,7 +479,7 @@ export default defineComponent({
           studyData.penShow = true;
           break;
         case 'whiteboard':
-          studyData.penShow = true;
+          studyData.whiteboardShow = true;
       }
     };
 
@@ -615,7 +642,7 @@ export default defineComponent({
             <Transition name="right">
               {activeData.model && (
                 <div
-                id='attent-0'
+                  id="attent-0"
                   class={styles.rightFixedBtns}
                   onClick={(e: Event) => {
                     e.stopPropagation();
@@ -659,19 +686,20 @@ export default defineComponent({
           </div>
         </div>
 
-        {/* <div
+        <div
           style={{ transform: activeData.model ? '' : 'translateY(-100%)' }}
           class={styles.headerContainer}
-          ref={headeRef}>
-          <div class={styles.backBtn} onClick={() => goback()}>
+          // ref={headeRef}
+        >
+          {/* <div class={styles.backBtn} onClick={() => goback()}>
             <Icon name={iconBack} />
             返回
-          </div>
-          <div class={styles.menu}>{popupData.itemName}</div>
-        </div> */}
+          </div> */}
+          <div class={styles.menu}>{activeName.value}</div>
+        </div>
         {/* 布置作业按钮 */}
         <div
-         id='attent-3'
+          id="attent-3"
           class={[
             styles.assignHomework,
             activeData.model ? '' : styles.sectionAnimateUp
@@ -679,6 +707,7 @@ export default defineComponent({
           onClick={async () => {
             if (data.type === 'preview') {
               window.close();
+              // onFullScreen();
             } else {
               const res = await lessonPreTrainingPage({
                 coursewareKnowledgeDetailId: data.detailId,
@@ -708,7 +737,7 @@ export default defineComponent({
             {{
               trigger: () => (
                 <div
-                id='attent-1'
+                  id="attent-1"
                   class={styles.displayBtn}
                   onClick={() =>
                     openStudyTool({
@@ -727,7 +756,7 @@ export default defineComponent({
             {{
               trigger: () => (
                 <div
-                id='attent-2'
+                  id="attent-2"
                   class={styles.displayBtn}
                   onClick={() =>
                     openStudyTool({
@@ -769,7 +798,15 @@ export default defineComponent({
         {/* 批注 */}
         {studyData.penShow && (
           <Pen
-            show={studyData.type === 'pen' || studyData.type === 'whiteboard'}
+            show={studyData.type === 'pen'}
+            type={studyData.type}
+            close={() => closeStudyTool()}
+          />
+        )}
+
+        {studyData.whiteboardShow && (
+          <Pen
+            show={studyData.type === 'whiteboard'}
             type={studyData.type}
             close={() => closeStudyTool()}
           />
@@ -836,7 +873,7 @@ export default defineComponent({
             <p>倒</p>
           </div>
         </NModal> */}
-        {showGuide.value?<Attentguide></Attentguide>:null}
+        {showGuide.value ? <Attentguide></Attentguide> : null}
       </div>
     );
   }

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

@@ -91,7 +91,7 @@
 }
 
 .trainEditModal {
-  width: 580px;
+  width: 494px;
 }
 
 .selectMusicModal {

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

@@ -143,22 +143,27 @@
     flex-direction: column;
     justify-content: center;
     transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+
     .disPreviewDivide {
       font-size: 15px;
       color: #fff;
     }
+
     :global {
       .n-progress-graph-circle-rail {
         stroke: #8b8b8b !important;
       }
     }
+
     .BProgress {
       color: #fff;
+
       h4 {
         font-size: 20px;
         font-family: 'DINA';
         font-weight: bold;
         text-align: center;
+
         span {
           font-size: 12px;
           font-weight: 400;
@@ -195,6 +200,7 @@
       border-radius: 6px;
       background-color: transparent;
       height: 28px;
+      --n-border: none !important;
     }
   }
 
@@ -224,8 +230,10 @@
   .train-footer {
     :global {
       .n-tag {
+        --n-border: none !important;
         color: #f92d53;
         border: 1px solid #f92d53;
+
       }
     }
   }
@@ -259,3 +267,34 @@
     min-width: 124px;
   }
 }
+
+
+.removeVisiable {
+  width: 500px;
+
+  .studentRemove {
+    padding: 20px 40px 0;
+
+    p {
+      font-size: 18px;
+      color: #777777;
+      line-height: 30px;
+      text-align: center;
+
+      span {
+        color: #EA4132;
+      }
+    }
+  }
+
+  .btnGroupModal {
+    padding: 32px 0;
+
+    :global {
+      .n-button {
+        height: 47px;
+        min-width: 156px;
+      }
+    }
+  }
+}

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

@@ -1,4 +1,4 @@
-import { PropType, defineComponent } from 'vue';
+import { PropType, defineComponent, ref } from 'vue';
 import styles from './index.module.less';
 import {
   NButton,
@@ -6,14 +6,13 @@ import {
   NSpace,
   NImage,
   NTag,
-  useDialog,
+  NModal,
   NProgress
 } from 'naive-ui';
 import pTag from './images/p-tag.svg';
 import eTag from './images/e-tag.svg';
 import pEdit from './images/p-edit.svg';
 import eEdit from './images/e-edit.svg';
-import iconPause from './images/icon-pause.svg';
 import pDelete from './images/p-delete.svg';
 import eDelete from './images/e-delete.svg';
 import iconDelete from './images/icon-delete.png';
@@ -61,21 +60,8 @@ export default defineComponent({
   emits: ['click', 'delete', 'edit', 'offShelf'],
   setup(props, { emit }) {
     const userStore = useUserStore();
-    const dialog = useDialog();
-
-    const onDelete = () => {
-      const dialogT = dialog.warning({
-        title: '提示',
-        content: '您确定是否删除？',
-        positiveText: '确定',
-        negativeText: '取消',
-        onPositiveClick: () => {
-          dialogT.loading = true;
-          emit('delete', props.item);
-        }
-      });
-    };
 
+    const removeVisiable = ref(false);
     const onDetail = () => {
       const origin = /(localhost|192)/.test(location.host)
         ? 'https://dev.kt.colexiu.com'
@@ -83,9 +69,6 @@ export default defineComponent({
       const src = `${origin}/instrument?platform=pc&modelType=practise&id=${props.item.musicId}&Authorization=${userStore.getToken}`;
       window.open(src, '_blank');
     };
-    function rgba(arg0: number, arg1: number, arg2: number, arg3: number) {
-      throw new Error('Function not implemented.');
-    }
 
     return () => (
       <div
@@ -130,20 +113,23 @@ export default defineComponent({
               {props.item.trainingType === 'EVALUATION'
                 ? '评测模式'
                 : '练习模式'}
-              {props.isDisabled ? null : <img src={iconPause} />}
             </NButton>
           )}
         </div>
         <div class={styles['train-content']}>
-
           <NImage src={props.item.coverImg} previewDisabled objectFit="cover" />
           {props.isDisabled && !props.isCLassWork ? (
             <div class={styles.disPreview}>
               <NProgress
                 percentage={
-                  props.item.trainingType === 'EVALUATION' ? (Number(props.item.trainingTimes) /
-                    Number(props.item.allTimes)) *
-                    100 : ((Number(props.item.trainingTimes) / 60) / Number(props.item.allTimes) * 100)
+                  props.item.trainingType === 'EVALUATION'
+                    ? (Number(props.item.trainingTimes) /
+                        Number(props.item.allTimes)) *
+                      100
+                    : (Number(props.item.trainingTimes) /
+                        60 /
+                        Number(props.item.allTimes)) *
+                      100
                 }
                 offset-degree={180}
                 type="circle"
@@ -154,7 +140,6 @@ export default defineComponent({
                     : '#44B3FF'
                 }
                 style="width: 120px; margin: 0  0 10px;">
-
                 <div class={styles.BProgress}>
                   {props.item.trainingType === 'EVALUATION' ? (
                     <h4>
@@ -164,9 +149,8 @@ export default defineComponent({
                     </h4>
                   ) : (
                     <h4>
-
                       {props.item.trainingTimes
-                        ? parseInt((props.item.trainingTimes / 60) + '')
+                        ? parseInt(props.item.trainingTimes / 60 + '')
                         : 0}
                       <span>分钟</span>
                     </h4>
@@ -227,7 +211,8 @@ export default defineComponent({
                   class={styles.operation}
                   onClick={(e: MouseEvent) => {
                     e.stopPropagation();
-                    onDelete();
+                    // onDelete();
+                    removeVisiable.value = true;
                   }}>
                   <img
                     src={
@@ -254,6 +239,30 @@ export default defineComponent({
             </NButton>
           </div>
         )}
+
+        <NModal
+          v-model:show={removeVisiable.value}
+          preset="card"
+          class={['modalTitle', styles.removeVisiable]}
+          title={'提示'}>
+          <div class={styles.studentRemove}>
+            <p>您确定是否删除？</p>
+
+            <NSpace class={styles.btnGroupModal} justify="center">
+              <NButton
+                round
+                type="primary"
+                onClick={() => {
+                  emit('delete', props.item);
+                }}>
+                确定
+              </NButton>
+              <NButton round onClick={() => (removeVisiable.value = false)}>
+                取消
+              </NButton>
+            </NSpace>
+          </div>
+        </NModal>
       </div>
     );
   }

src/views/classList/index.module.less

@@ -1,15 +1,18 @@
 @img: '../setting/images';
 @currentimg './images'
+
 .listWrap {
   padding: 32px;
   background-color: #fff;
   min-height: 100%;
   border-radius: 20px;
 }
+
 .addBtnIcon {
   width: 16px;
   height: 17px;
 }
+
 .addBtn {
   margin-bottom: 30px;
   height: 43px;
@@ -18,12 +21,14 @@
   line-height: 41px;
   width: 144px;
   padding: 0 24px;
+
   :global {
     .n-button__content {
       font-size: 18px;
     }
   }
 }
+
 .btnGroup {
   padding: 40px 0;
 
@@ -34,13 +39,16 @@
     }
   }
 }
+
 .resetStudentWrap {
   display: flex;
   flex-direction: column;
   align-items: center;
   padding-top: 40px;
+
   .studentTransfer {
     position: relative;
+
     .smallArrow {
       right: 166px;
       top: 15px;
@@ -55,6 +63,7 @@
       .n-legacy-transfer {
         width: 634px;
         min-height: 340px;
+
         .n-legacy-transfer-list {
           &:nth-child(1) {
             .n-legacy-transfer-list-header__header {
@@ -68,17 +77,21 @@
           }
         }
       }
+
       .n-legacy-transfer-list-item {
         &:hover {
           background-color: #fff !important;
         }
       }
+
       .n-legacy-transfer-list__border {
         border: none;
       }
+
       .n-legacy-transfer-list-header__extra {
         display: none;
       }
+
       .n-legacy-transfer-list-header {
         display: flex;
         flex-direction: column;
@@ -86,15 +99,19 @@
         align-items: flex-start;
         height: auto;
       }
+
       .n-legacy-transfer-list-header__checkbox {
         order: 2;
         padding: 0 !important;
+
         &::after {
           content: '全选';
           margin-left: 5px;
         }
+
         margin-top: 8px;
       }
+
       .n-legacy-transfer-list-header__header {
         width: 100%;
         padding: 14px 0;
@@ -105,23 +122,28 @@
         order: 1;
         border-bottom: 1px solid rgba(0, 0, 0, 0.06);
       }
+
       .n-legacy-transfer-list {
         padding: 0 16px;
         min-height: 340px;
         background: #e8f2ff;
         border-radius: 16px 16px 0 0;
         width: 277px;
+
         .n-legacy-transfer-filter {
           background: #e8f2ff;
           padding: 8px 0px 0px;
           border-bottom: none;
         }
+
         .n-input {
           border-radius: 8px;
+
           .n-input-wrapper {
             .n-input__border {
               border-radius: 8px;
             }
+
             .n-input__input-el {
               height: 41px;
               line-height: 41px;
@@ -130,6 +152,7 @@
           }
         }
       }
+
       // .n-legacy-transfer-gap {
       //   width: 80px;
       //   .n-button {
@@ -191,6 +214,7 @@
       //   }
       // }
     }
+
     .studentTransferBottom {
       width: 100%;
       display: flex;
@@ -205,6 +229,7 @@
         background-color: #e8f2ff;
 
         border-radius: 0 0 8px 8px;
+
         .bottomWrap {
           padding: 14px 0;
           border-top: 1px solid rgba(0, 0, 0, 0.06);
@@ -213,10 +238,12 @@
     }
   }
 }
+
 .studentTransferList {
   display: flex;
   flex-direction: row;
   align-items: center;
+
   .studentLeft,
   .studentRight {
     padding: 14px 16px;
@@ -224,6 +251,7 @@
 
     background: #e8f2ff;
     border-radius: 16px;
+
     .listTop {
       display: flex;
       flex-direction: row;
@@ -234,12 +262,14 @@
       font-weight: 600;
       color: #131415;
       line-height: 22px;
+
       span {
         color: #777;
         font-weight: 400;
         font-size: 12px;
       }
     }
+
     .chioseCheckBox {
       padding: 2px 2px;
       font-size: 16px;
@@ -255,6 +285,7 @@
     flex-direction: column;
     align-items: center;
     justify-content: center;
+
     .chioseBtn {
       cursor: pointer;
       width: 34px;
@@ -262,25 +293,30 @@
       border-radius: 8px;
       background: url('./images/transArrrow.png') no-repeat;
       background-size: 34px 34px;
+
       &:hover {
         background: url('./images/transArrowActive.png') no-repeat;
         background-size: 34px 34px;
       }
     }
+
     .chioseBtnRight {
       transform: rotate(180deg);
       margin-bottom: 23px;
     }
   }
+
   .chioseCheckAllBox {
     margin-top: 8px !important;
     margin-bottom: 14px !important;
   }
+
   .bottom {
     padding-top: 14px;
     border-top: 1px solid rgba(0, 0, 0, 0.06);
   }
 }
+
 .addClass {
   display: flex;
   flex-direction: column;
@@ -325,6 +361,7 @@
     }
   }
 }
+
 .indDot,
 .endDot {
   display: flex;
@@ -364,22 +401,23 @@
     }
   }
 }
+
 .teacherList {
   display: flex;
   flex-direction: row;
   align-items: center;
   margin-bottom: 32px;
+
   .teacherHeader {
     width: 100px;
     height: 100px;
     padding: 4px;
     border-radius: 99px;
-    background: linear-gradient(
-      228deg,
-      rgba(2, 186, 255, 1),
-      rgba(0, 122, 254, 1)
-    );
+    background: linear-gradient(228deg,
+        rgba(2, 186, 255, 1),
+        rgba(0, 122, 254, 1));
     margin-right: 20px;
+
     .teacherHeaderBorder {
       width: 100%;
       height: 100%;
@@ -400,6 +438,7 @@
     border-radius: 50%;
     overflow: hidden;
   }
+
   .workafterInfo {
     h4 {
       font-size: 22px;
@@ -408,24 +447,29 @@
       color: #131415;
       margin-bottom: 12px;
     }
+
     p {
       font-size: 16px;
       line-height: 22px;
       color: #777;
+
       span {
         color: #ea4132;
       }
     }
   }
 }
+
 .isok {
   font-weight: 600;
   color: #333333;
 }
+
 .ison {
   font-weight: 600;
   color: #ea4132;
 }
+
 .nosub {
   font-weight: 600;
   color: #aaa;
@@ -443,6 +487,7 @@
     display: flex;
     flex-direction: row;
     align-items: center;
+
     span {
       font-family: 'DINA';
       font-size: 26px;
@@ -467,6 +512,7 @@
   display: flex;
   flex-direction: row;
   align-items: center;
+
   img {
     margin-left: 11px;
     width: 10px;
@@ -532,11 +578,14 @@
     }
   }
 }
+
 .wordDetailModel {
   width: 1012px;
 }
+
 .trainingDetails {
-  padding: 24px 32px 32px;
+  padding: 24px 0 32px;
+
   .studentList {
     display: flex;
     flex-direction: row;
@@ -544,7 +593,9 @@
     margin-bottom: 24px;
     justify-content: space-between;
     border-bottom: 1px solid #f2f2f2;
-    padding-bottom: 18px;
+    // padding-bottom: 18px;
+    padding: 0 32px 18px;
+
     .studentHeaderWrap {
       display: flex;
       flex-direction: row;
@@ -555,12 +606,11 @@
         height: 66px;
         padding: 2px;
         border-radius: 99px;
-        background: linear-gradient(
-          228deg,
-          rgba(2, 186, 255, 1),
-          rgba(0, 122, 254, 1)
-        );
+        background: linear-gradient(228deg,
+            rgba(2, 186, 255, 1),
+            rgba(0, 122, 254, 1));
         margin-right: 16px;
+
         .studentHeaderBorder {
           width: 100%;
           height: 100%;
@@ -575,16 +625,19 @@
         }
       }
     }
+
     .workStatus {
       width: 87px;
       height: 87px;
     }
+
     .studentHeaderImg {
       width: 66px;
       height: 66px;
       border-radius: 50%;
       overflow: hidden;
     }
+
     .workafterInfo {
       h4 {
         font-size: 22px;
@@ -596,6 +649,7 @@
         display: flex;
         flex-direction: row;
         align-items: center;
+
         .workafterInfoDot {
           width: 52px;
           height: 22px;
@@ -608,34 +662,42 @@
           text-align: center;
           margin-left: 8px;
         }
+
         .workafterInfoDot.workafterTeacherInfoDot {
           background: #198cfe;
         }
       }
+
       p {
         font-size: 16px;
         line-height: 22px;
         color: #777;
+
         span {
           color: #ea4132;
         }
       }
     }
   }
+
   .workList {
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
     flex-wrap: wrap;
+    padding: 0 32px;
   }
+
   .allTotal {
     font-size: 16px;
     font-weight: 400;
     color: #8b8b8b;
   }
+
   .btnGroups {
     padding: 40px 0;
+
     :global {
       .n-button {
         height: 47px;
@@ -645,3 +707,37 @@
     }
   }
 }
+
+
+.studentVisible {
+  width: 714px;
+}
+
+.removeVisiable {
+  width: 500px;
+
+  .studentRemove {
+    padding: 0 40px;
+
+    p {
+      font-size: 18px;
+      color: #777777;
+      line-height: 30px;
+
+      span {
+        color: #EA4132;
+      }
+    }
+  }
+
+  .btnGroup {
+    padding: 32px 0;
+
+    :global {
+      .n-button {
+        height: 47px;
+        min-width: 156px;
+      }
+    }
+  }
+}

src/views/classList/index.tsx

@@ -48,7 +48,9 @@ export default defineComponent({
       studentVisible: false,
       activeRow: null as any,
       showaddClass: false,
-      goCourseVisiable: false
+      goCourseVisiable: false,
+      removeVisiable: false,
+      removeRow: {} as any
     });
     const formRef = ref();
     const dialog = useDialog();
@@ -70,22 +72,15 @@ export default defineComponent({
       getList();
     };
 
-    const removeClass = async (row: any) => {
-      dialog.warning({
-        title: '警告',
-        content: `是否删除班级“${row.name}”？`,
-        positiveText: '确定',
-        negativeText: '取消',
-        onPositiveClick: async () => {
-          try {
-            await deleteClass({ ids: row.id });
-            getList();
-            message.success(`删除成功`);
-          } catch (e) {
-            console.log(e);
-          }
-        }
-      });
+    const removeClass = async () => {
+      try {
+        await deleteClass({ ids: state.removeRow.id });
+        getList();
+        message.success(`删除成功`);
+        state.removeVisiable = false;
+      } catch (e) {
+        console.log(e);
+      }
     };
     const getList = async () => {
       // classGroupList
@@ -205,7 +200,10 @@ export default defineComponent({
                   {!(row.preStudentNum > 0) ? (
                     <p
                       style={{ color: '#EA4132', cursor: 'pointer' }}
-                      onClick={() => removeClass(row)}>
+                      onClick={() => {
+                        state.removeVisiable = true;
+                        state.removeRow = row;
+                      }}>
                       删除
                     </p>
                   ) : null}
@@ -313,9 +311,8 @@ export default defineComponent({
         </div>
         <NModal
           v-model:show={state.studentVisible}
-          style={{ width: '707px' }}
           preset="card"
-          class={['modalTitle background']}
+          class={['modalTitle background', styles.studentVisible]}
           title={'学员调整'}>
           <RestStudentBox
             activeRow={state.activeRow}
@@ -345,6 +342,29 @@ export default defineComponent({
             activeRow={state.activeRow}
             onClose={() => (state.goCourseVisiable = false)}></TrainDetail>
         </NModal>
+
+        <NModal
+          v-model:show={state.removeVisiable}
+          preset="card"
+          class={['modalTitle', styles.removeVisiable]}
+          title={'删除班级'}>
+          <div class={styles.studentRemove}>
+            <p>
+              确定要删除班级么？
+              <span>删除后该班级所有学生的年级、班级信息将会清空</span>
+              ，重新加入班级后同步更新。
+            </p>
+
+            <NSpace class={styles.btnGroup} justify="center">
+              <NButton round type="primary" onClick={removeClass}>
+                确定
+              </NButton>
+              <NButton round onClick={() => (state.removeVisiable = false)}>
+                取消
+              </NButton>
+            </NSpace>
+          </div>
+        </NModal>
         {showGuide.value ? <ClassGuide></ClassGuide> : null}
       </div>
     );

src/views/classList/modals/restStudentBox.tsx

@@ -80,8 +80,6 @@ export default defineComponent({
           targetClass.id = classList.value[0].key;
         }
 
-
-
         const tarRes = await getCLassStudentList(targetClass.id);
         targetStudentList.value = tarRes.data.rows.map((item: any) => {
           return {
@@ -230,9 +228,9 @@ export default defineComponent({
     };
 
     const submitStudent = async () => {
-      if(classList.value.length <2){
-        message.error('当前只有一个班级,无法调整')
-        return
+      if (classList.value.length < 2) {
+        message.error('当前只有一个班级,无法调整');
+        return;
       }
       if (submitList.value < 1) {
         emit('close');
@@ -319,23 +317,24 @@ export default defineComponent({
             </div>
             <div class={styles.studentRight}>
               <div class={styles.listTop}>
-                {targetClass.id?      <NDropdown
-                  key="111"
-                  v-model:value={targetClass.id}
-                  options={classList.value}
-                  onSelect={(value: any) => {
-                    chioseClass(value);
-                  }}
-                  scrollable>
-                  <div>
-                    {targetClass.name}
-                    <NImage
-                      class={styles.smallArrow}
-                      src={smallArrow}
-                      previewDisabled></NImage>
-                  </div>
-                </NDropdown>:null}
-
+                {targetClass.id ? (
+                  <NDropdown
+                    key="111"
+                    v-model:value={targetClass.id}
+                    options={classList.value}
+                    onSelect={(value: any) => {
+                      chioseClass(value);
+                    }}
+                    scrollable>
+                    <div>
+                      {targetClass.name}
+                      <NImage
+                        class={styles.smallArrow}
+                        src={smallArrow}
+                        previewDisabled></NImage>
+                    </div>
+                  </NDropdown>
+                ) : null}
               </div>
               <div class={styles.listCore}>
                 <NRow class={styles.chioseCheckAllBox}>

src/views/home/components/trainData.tsx

@@ -58,50 +58,7 @@ export default defineComponent({
         pageTotal: 4
       },
       tableList: [
-        {
-          teacherName: '孙忆枫',
-          createTime: '2023-06-27',
-          endTime: '2023-06-30',
-          status: 'ing',
-          studentNum: 100,
-          submitNum: 100,
-          quantityNum: 60,
-          submitRate: 100,
-          quantityRate: 60
-        },
-        {
-          teacherName: '孙忆枫',
-          createTime: '2023-06-27',
-          endTime: '2023-06-30',
-          status: 'ing',
-          studentNum: 100,
-          submitNum: 100,
-          quantityNum: 60,
-          submitRate: 100,
-          quantityRate: 60
-        },
-        {
-          teacherName: '孙忆枫',
-          createTime: '2023-06-27',
-          endTime: '2023-06-30',
-          status: 'ing',
-          studentNum: 100,
-          submitNum: 100,
-          quantityNum: 60,
-          submitRate: 100,
-          quantityRate: 60
-        },
-        {
-          teacherName: '孙忆枫',
-          createTime: '2023-06-25',
-          endTime: '2023-06-26',
-          status: 'end',
-          studentNum: 100,
-          submitNum: 100,
-          quantityNum: 60,
-          submitRate: 100,
-          quantityRate: 60
-        }
+
       ] as any,
       goCourseVisiable: false
     });

src/views/home/index.module.less

@@ -519,7 +519,7 @@
         }
 
         .DataTopRightDot.DataTopRightDotBlue {
-          background: #d5e9ff;
+          background: #edeef1;
         }
 
         .DataTopRightDot.red {

src/views/home/index.tsx

@@ -89,7 +89,7 @@ export default defineComponent({
         name: ''
       } as any,
       popSelectOptions: [] as any,
-      showGuide:false
+      showGuide: false
     });
     const teachList = ref({} as any);
 
@@ -296,7 +296,7 @@ export default defineComponent({
         };
       });
       getVersion();
-      forms.showGuide = true
+      forms.showGuide = true;
     });
 
     const formsRef = ref();
@@ -337,7 +337,6 @@ export default defineComponent({
 
     return () => (
       <div class={styles.homeWrap}>
-
         <div class={styles.homeInfoLeft}>
           <div class={styles.homeBanner}>
             <div class={styles.welcomeInfo}>
@@ -351,14 +350,20 @@ export default defineComponent({
               </div>
               <div class={styles.userTips}>
                 <span>欢迎您使用酷乐秀课堂乐器数字化教学平台！</span>
-                <NButton color="#40A1FF" round class={styles.guide_btn} {...{id:'home-1'}} >
+                <NButton
+                  color="#40A1FF"
+                  round
+                  class={styles.guide_btn}
+                  {...{ id: 'home-1' }}>
                   功能引导
                   <i></i>
                 </NButton>
               </div>
             </div>
-            <div class={styles.centerInfo} id='home-0'></div>
-            <div class={styles.applyInfo} id='home-2'>
+            {/* <div class={styles.centerInfo}>11111</div> */}
+            <div class={styles.applyInfo}>
+              <div class={styles.centerInfo} id="home-0"></div>
+              <div class={styles.applyInfo} id="home-2"></div>
 
               {userStore.getUserInfo.gender === 1 ? (
                 <img src={teacherMan} class={styles.teacherMan} />
@@ -516,7 +521,7 @@ export default defineComponent({
               </div>
             </div>
             <img src={iconTo} class={styles.iconTo} />
-            <div class={styles.toolFunction} id='home-4'>
+            <div class={styles.toolFunction} id="home-4">
               <div class={[styles.toolItem, styles.item1]}>
                 <img src={t1} />
                 <p class={styles.toolMemo}>提升效率，练习好节奏</p>
@@ -673,8 +678,7 @@ export default defineComponent({
             onClose={() => (forms.useStatus = false)}
           />
         </NModal>
-            {forms.showGuide?<HomeGuide></HomeGuide>:null}
-
+        {forms.showGuide ? <HomeGuide></HomeGuide> : null}
       </div>
     );
   }

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

@@ -68,10 +68,26 @@
     text-overflow: ellipsis;
     max-width: 280px !important;
     color: rgba(0, 0, 0, .5);
+    display: flex;
+    align-items: center;
+
+    .dir {
+      display: inline-block;
+      width: 16px;
+      height: 18px;
+      background: url('./images/icon-d.png') no-repeat center;
+      background-size: contain;
+      margin-right: 6px;
+    }
 
     &.titleSelect {
       color: var(--n-color);
       font-weight: bold;
+
+      .dir {
+        background: url('./images/icon-d-active.png') no-repeat center;
+        background-size: contain;
+      }
     }
   }
 
@@ -92,8 +108,12 @@
     width: 12px;
   }
 
-  &.childItem .title {
-    color: #131415;
+  &.childItem {
+    padding-left: 30px;
+
+    .title {
+      color: #131415;
+    }
   }
 
   &.childSelect {

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

@@ -101,7 +101,7 @@ export default defineComponent({
       <div class={styles.directoryList}>
         {forms.showSelectBookStatus && (
           <div
-          id='lessons-0'
+            id="lessons-0"
             class={styles['select-directory']}
             onClick={() => (forms.coursewareStatus = true)}>
             <span
@@ -171,6 +171,11 @@ export default defineComponent({
                         styles.title,
                         item.selected ? styles.titleSelect : ''
                       ]}>
+                      <span
+                        class={[
+                          styles.dir,
+                          item.selected ? styles.dirSelect : ''
+                        ]}></span>
                       {item.name}
                     </p>
                   </div>

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

@@ -30,7 +30,7 @@
 
   .content {
     min-height: 60vh;
-    padding: 32px 40px;
+    padding: 22px 40px;
   }
 }
 
@@ -74,7 +74,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: rgba(0, 0, 0, 0.7);
+    background-color: rgba(0, 0, 0, 0.5);
     z-index: 8;
     display: none;
     align-items: flex-end;
@@ -123,6 +123,7 @@
     background-image: url('../images/icon_default.svg');
     background-repeat: no-repeat;
     background-position: center center;
+    margin-top: 10px;
 
     &::before {
       content: '';
@@ -191,4 +192,34 @@
 
 .teachingModal {
   width: 1100px;
+}
+
+.removeVisiable {
+  width: 500px;
+
+  .studentRemove {
+    padding: 20px 40px 0;
+
+    p {
+      font-size: 18px;
+      color: #777777;
+      line-height: 30px;
+      text-align: center;
+
+      span {
+        color: #EA4132;
+      }
+    }
+  }
+
+  .btnGroup {
+    padding: 32px 0;
+
+    :global {
+      .n-button {
+        height: 47px;
+        min-width: 156px;
+      }
+    }
+  }
 }

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

@@ -39,7 +39,9 @@ export default defineComponent({
       selectItem: {} as any,
       bookVersionId: null,
       keyword: null,
-      currentGradeNum: null
+      currentGradeNum: null,
+      removeVisiable: false,
+      removeRow: {} as any
       // bookType: null
     });
 
@@ -66,21 +68,14 @@ export default defineComponent({
 
     // 删除教材
     const onDelete = async (item: any) => {
-      dialog.warning({
-        title: '提示',
-        content: '是否删除该教材?',
-        positiveText: '确定',
-        negativeText: '取消',
-        onPositiveClick: async () => {
-          try {
-            await lessonCoursewareRemove({ id: item.id });
-            message.success('删除成功');
-            getLessonCourseware();
-          } catch {
-            //
-          }
-        }
-      });
+      try {
+        await lessonCoursewareRemove({ id: forms.removeRow.id });
+        message.success('删除成功');
+        getLessonCourseware();
+        forms.removeVisiable = false;
+      } catch (e) {
+        console.log(e);
+      }
     };
 
     const throttledFn = useThrottleFn(() => getLessonCourseware(), 500);
@@ -217,7 +212,9 @@ export default defineComponent({
                                   color="#EA4132"
                                   onClick={(e: MouseEvent) => {
                                     e.stopPropagation();
-                                    onDelete(item);
+                                    // onDelete(item);
+                                    forms.removeVisiable = true;
+                                    forms.removeRow = item;
                                   }}>
                                   删除
                                 </NButton>
@@ -263,6 +260,25 @@ export default defineComponent({
             }}
           />
         </NModal>
+
+        <NModal
+          v-model:show={forms.removeVisiable}
+          preset="card"
+          class={['modalTitle', styles.removeVisiable]}
+          title={'删除教材'}>
+          <div class={styles.studentRemove}>
+            <p>是否删除该教材</p>
+
+            <NSpace class={styles.btnGroup} justify="center">
+              <NButton round type="primary" onClick={onDelete}>
+                确定
+              </NButton>
+              <NButton round onClick={() => (forms.removeVisiable = false)}>
+                取消
+              </NButton>
+            </NSpace>
+          </div>
+        </NModal>
       </div>
     );
   }

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

@@ -77,7 +77,7 @@
   display: flex;
   flex-flow: row wrap;
   justify-content: flex-start;
-  gap: 20px;
+  gap: 25px;
 }
 
 .attendClassModal {
@@ -107,4 +107,63 @@
     margin-right: 8px;
     cursor: pointer;
   }
+}
+
+.removeVisiable {
+  width: 500px;
+
+  .studentRemove {
+    padding: 20px 40px 0;
+
+    p {
+      font-size: 18px;
+      color: #777777;
+      line-height: 30px;
+      text-align: center;
+
+      span {
+        color: #EA4132;
+      }
+    }
+  }
+
+  .btnGroupModal {
+    padding: 32px 0;
+
+    :global {
+      .n-button {
+        height: 47px;
+        min-width: 156px;
+      }
+    }
+  }
+}
+
+.removeVisiable1 {
+  width: 500px;
+
+  .studentRemove {
+    padding: 20px 40px 0;
+
+    p {
+      font-size: 18px;
+      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/courseware/index.tsx

@@ -23,6 +23,7 @@ import {
 import Draggable from 'vuedraggable';
 import iconDelete from '../../../images/icon-delete.png';
 import { useRouter } from 'vue-router';
+import deepClone from '/src/helpers/deep-clone';
 
 export default defineComponent({
   name: 'courseware-modal',
@@ -37,7 +38,9 @@ export default defineComponent({
       loadingStatus: false,
       showAttendClass: false,
       removeIds: [] as any, // 临时删除的编号
-      drag: false
+      drag: false,
+      removeVisiable: false,
+      removeVisiable1: false
     });
 
     // 获取列表
@@ -71,11 +74,13 @@ export default defineComponent({
 
         prepareStore.setCoursewareList(temp || []);
 
-        console.log(forms.removeIds, 'remove', temp);
-        forms.coursewareList =
-          temp.map((item: any) => {
-            if (!forms.removeIds.includes(item.id)) return item;
-          }) || [];
+        const tempCourse: any = [];
+        temp.forEach((item: any) => {
+          if (!forms.removeIds.includes(item.id)) {
+            tempCourse.push(item);
+          }
+        });
+        forms.coursewareList = tempCourse;
       } catch {
         //
       }
@@ -115,46 +120,46 @@ export default defineComponent({
       );
       forms.coursewareList.splice(index, 1);
       // prepareStore.setCoursewareList(forms.coursewareList);
+      console.log(prepareStore.getCoursewareList, 'getCourseware');
     };
 
     // 完成编辑
     const onOverEdit = async () => {
-      dialog.warning({
-        title: '提示',
-        content: `是否完成编辑？`,
-        positiveText: '确定',
-        negativeText: '取消',
-        onPositiveClick: async () => {
-          try {
-            const temp: any = [];
-            forms.coursewareList.forEach((item: any) => {
-              temp.push({
-                materialName: item.title,
-                materialType: item.type,
-                materialId: item.materialId,
-                id: item.id
-              });
-            });
-            // 保存课件
-            await saveCourseware({
-              coursewareDetailKnowledgeId: prepareStore.getSelectKey,
-              lessonCoursewareId: prepareStore.getLessonCoursewareId,
-              lessonCoursewareDetailId:
-                prepareStore.getLessonCoursewareDetailId,
-              materialList: [...temp]
-            });
-
-            forms.drag = false;
-            message.success('编辑成功');
+      // dialog.warning({
+      //   title: '提示',
+      //   content: `是否完成编辑？`,
+      //   positiveText: '确定',
+      //   negativeText: '取消',
+      //   onPositiveClick: async () => {
+      try {
+        const temp: any = [];
+        forms.coursewareList.forEach((item: any) => {
+          temp.push({
+            materialName: item.title,
+            materialType: item.type,
+            materialId: item.materialId,
+            id: item.id
+          });
+        });
+        // 保存课件
+        await saveCourseware({
+          coursewareDetailKnowledgeId: prepareStore.getSelectKey,
+          lessonCoursewareId: prepareStore.getLessonCoursewareId,
+          lessonCoursewareDetailId: prepareStore.getLessonCoursewareDetailId,
+          materialList: [...temp]
+        });
 
-            prepareStore.setCoursewareList(forms.coursewareList);
-            // 重置临时删除编号
-            forms.removeIds = [];
-          } catch {
-            //
-          }
-        }
-      });
+        forms.drag = false;
+        message.success('编辑成功');
+        forms.removeVisiable = false;
+        prepareStore.setCoursewareList(deepClone(forms.coursewareList));
+        // 重置临时删除编号
+        forms.removeIds = [];
+      } catch {
+        //
+      }
+      //   }
+      // });
     };
 
     // 预览上课
@@ -219,7 +224,11 @@ export default defineComponent({
         <div class={styles.btnGroup}>
           {forms.drag ? (
             <NSpace>
-              <NButton type="default" onClick={onOverEdit}>
+              <NButton
+                type="default"
+                onClick={() => {
+                  forms.removeVisiable = true;
+                }}>
                 完成编辑
               </NButton>
               <NButton
@@ -229,16 +238,12 @@ export default defineComponent({
                   forms.removeIds = [];
                   getList();
                 }}>
-                退出编辑
+                取消编辑
               </NButton>
               <NButton
                 type="error"
                 onClick={() => {
-                  forms.coursewareList.forEach((item: any) => {
-                    forms.removeIds.push(item.id);
-                  });
-                  forms.coursewareList = [];
-                  // prepareStore.setCoursewareList([]);
+                  forms.removeVisiable1 = true;
                 }}>
                 清空资源
               </NButton>
@@ -268,7 +273,7 @@ export default defineComponent({
               预览
             </NButton>
             <NButton
-            {...{ id: 'lessons-3' }}
+              {...{ id: 'lessons-3' }}
               type="primary"
               onClick={() => {
                 let count = 0;
@@ -288,7 +293,7 @@ export default defineComponent({
           </NSpace>
         </div>
 
-        <NScrollbar class={styles.listContainer}{...{id:'lessons-2'}} >
+        <NScrollbar class={styles.listContainer} {...{ id: 'lessons-2' }}>
           <NSpin show={forms.loadingStatus}>
             <div
               class={[
@@ -373,6 +378,59 @@ export default defineComponent({
           blockScroll={false}>
           <AttendClass onClose={() => (forms.showAttendClass = false)} />
         </NModal>
+
+        <NModal
+          v-model:show={forms.removeVisiable}
+          preset="card"
+          class={['modalTitle', styles.removeVisiable]}
+          title={'提示'}>
+          <div class={styles.studentRemove}>
+            <p>是否完成编辑？</p>
+
+            <NSpace class={styles.btnGroupModal} justify="center">
+              <NButton round type="primary" onClick={onOverEdit}>
+                确定
+              </NButton>
+              <NButton round onClick={() => (forms.removeVisiable = false)}>
+                取消
+              </NButton>
+            </NSpace>
+          </div>
+        </NModal>
+
+        <NModal
+          v-model:show={forms.removeVisiable1}
+          preset="card"
+          class={['modalTitle', styles.removeVisiable1]}
+          title={'清空资源'}>
+          <div class={styles.studentRemove}>
+            <p>
+              请确认是否要清空资源？
+              <span>点击确认后所有的素材内容 将被清空掉。</span>
+            </p>
+
+            <NSpace class={styles.btnGroupModal} justify="center">
+              <NButton
+                round
+                type="primary"
+                onClick={() => {
+                  forms.coursewareList.forEach((item: any) => {
+                    forms.removeIds.push(item.id);
+                  });
+                  forms.coursewareList = [];
+                  forms.removeVisiable1 = false;
+                  // prepareStore.setCoursewareList([]);
+
+                  console.log(prepareStore.getCoursewareList, 'getCourseware1');
+                }}>
+                确定
+              </NButton>
+              <NButton round onClick={() => (forms.removeVisiable1 = false)}>
+                取消
+              </NButton>
+            </NSpace>
+          </div>
+        </NModal>
       </div>
     );
   }

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

@@ -81,7 +81,7 @@
 }
 
 .trainEditModal {
-  width: 580px;
+  width: 494px;
 }
 
 .assignHomework {

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

@@ -190,7 +190,7 @@ export default defineComponent({
                   forms.drag = false;
                   getList();
                 }}>
-                退出编辑
+                取消编辑
               </NButton>
               <NButton
                 type="error"

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

@@ -120,47 +120,46 @@ export default defineComponent({
 
     // 添加资源
     const onAdd = async (item: any) => {
-      dialog.warning({
-        title: '提示',
-        content: `是否添加"${item.title}"资源？`,
-        positiveText: '确定',
-        negativeText: '取消',
-        onPositiveClick: async () => {
-          try {
-            console.log(item, 'any');
-            const temp: any = [];
-            prepareStore.getCoursewareList.forEach((item: any) => {
-              temp.push({
-                materialName: item.title,
-                materialType: item.type,
-                materialId: item.materialId,
-                id: item.id
-              });
-            });
+      // dialog.warning({
+      //   title: '提示',
+      //   content: `是否添加"${item.title}"资源？`,
+      //   positiveText: '确定',
+      //   negativeText: '取消',
+      //   onPositiveClick: async () => {
+      try {
+        console.log(item, 'any');
+        const temp: any = [];
+        prepareStore.getCoursewareList.forEach((item: any) => {
+          temp.push({
+            materialName: item.title,
+            materialType: item.type,
+            materialId: item.materialId,
+            id: item.id
+          });
+        });
 
-            // 保存课件
-            await saveCourseware({
-              coursewareDetailKnowledgeId: prepareStore.getSelectKey,
-              lessonCoursewareId: prepareStore.getLessonCoursewareId,
-              lessonCoursewareDetailId:
-                prepareStore.getLessonCoursewareDetailId,
-              materialList: [
-                ...temp,
-                {
-                  materialName: item.title,
-                  materialType: item.type,
-                  materialId: item.id
-                }
-              ]
-            });
+        // 保存课件
+        await saveCourseware({
+          coursewareDetailKnowledgeId: prepareStore.getSelectKey,
+          lessonCoursewareId: prepareStore.getLessonCoursewareId,
+          lessonCoursewareDetailId: prepareStore.getLessonCoursewareDetailId,
+          materialList: [
+            ...temp,
+            {
+              materialName: item.title,
+              materialType: item.type,
+              materialId: item.id
+            }
+          ]
+        });
 
-            message.success('添加成功');
-            prepareStore.setIsAddResource(true);
-          } catch {
-            //
-          }
-        }
-      });
+        message.success('添加成功');
+        prepareStore.setIsAddResource(true);
+      } catch {
+        //
+      }
+      // }
+      // });
     };
 
     onMounted(() => {
@@ -204,6 +203,7 @@ export default defineComponent({
                     <CardType
                       isShowAdd
                       item={item}
+                      isShowCollect={false}
                       onAdd={(item: any) => onAdd(item)}
                     />
                   ))}

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

@@ -27,5 +27,5 @@
 }
 
 .trainEditModal {
-  width: 580px;
+  width: 494px;
 }

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

@@ -70,5 +70,5 @@
 }
 
 .trainEditModal {
-  width: 580px;
+  width: 494px;
 }

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

@@ -14,7 +14,7 @@ export default defineComponent({
   setup() {
     const prepareStore = usePrepareStore();
     const forms = reactive({
-      tabType: 'shareResources',
+      tabType: 'myResources',
       selectMusicStatus: false,
       selectResourceStatus: false,
       editStatus: false,
@@ -88,18 +88,18 @@ export default defineComponent({
               default: () => (
                 <>
                   <NTabPane
-                    name="shareResources"
-                    tab="共享资源"
-                    displayDirective="show:lazy">
-                    <ResourceItem type="shareResources" />
-                  </NTabPane>
-                  <NTabPane
                     name="myResources"
                     tab="我的资源"
                     displayDirective="show:lazy">
                     <ResourceItem type="myResources" />
                   </NTabPane>
                   <NTabPane
+                    name="shareResources"
+                    tab="共享资源"
+                    displayDirective="show:lazy">
+                    <ResourceItem type="shareResources" />
+                  </NTabPane>
+                  <NTabPane
                     name="myCollect"
                     tab="我的收藏"
                     displayDirective="show:lazy">

src/views/prepare-lessons/index.tsx

@@ -7,18 +7,17 @@ import { useResizeObserver } from '@vueuse/core';
 import { onBeforeRouteLeave } from 'vue-router';
 import { usePrepareStore } from '/src/store/modules/prepareLessons';
 import { storeToRefs } from 'pinia';
-import LessonsGuide from '@/custom-plugins/guide-page/lessons-guide'
+import LessonsGuide from '@/custom-plugins/guide-page/lessons-guide';
 export default defineComponent({
   name: 'prepare-lessons',
   setup() {
     const prepareStore = usePrepareStore();
 
-    console.log(prepareStore, 'prepareStore')
-    const { treeList, coursewareList } = storeToRefs(prepareStore)
+    console.log(prepareStore, 'prepareStore');
+    const { treeList, coursewareList } = storeToRefs(prepareStore);
     const showGuide = computed(() => {
-
-      return treeList.value.length > 0 && coursewareList.value.length > 0
-    })
+      return treeList.value.length > 0 && coursewareList.value.length > 0;
+    });
     const directroyRef = ref();
     onMounted(() => {
       useResizeObserver(

src/views/prepare-lessons/model/select-resources/index.module.less

@@ -7,7 +7,7 @@
     }
 
     .n-tabs-nav {
-      padding: 12px 20px 24px;
+      padding: 20px 20px 30px;
     }
 
     .n-tabs-tab {

src/views/prepare-lessons/model/select-resources/select-item/index.module.less

@@ -1,9 +1,9 @@
 .listContainer {
   margin: 0;
-  max-height: calc(var(--window-page-lesson-height) - 224px - 20px);
+  max-height: calc(var(--window-page-lesson-height) - 324px - 20px);
 
   .listSection {
-    min-height: calc(var(--window-page-lesson-height) - 224px - 20px);
+    min-height: calc(var(--window-page-lesson-height) - 324px - 20px);
   }
 
   .emptySection {

src/views/prepare-lessons/model/select-resources/select-item/index.tsx

@@ -94,47 +94,46 @@ export default defineComponent({
 
     // 添加资源
     const onAdd = async (item: any) => {
-      dialog.warning({
-        title: '提示',
-        content: `是否添加"${item.title}"资源？`,
-        positiveText: '确定',
-        negativeText: '取消',
-        onPositiveClick: async () => {
-          try {
-            console.log(item, 'any');
-            const temp: any = [];
-            prepareStore.getCoursewareList.forEach((item: any) => {
-              temp.push({
-                materialId: item.materialId,
-                materialName: item.title,
-                materialType: item.type,
-                id: item.id
-              });
-            });
+      // dialog.warning({
+      //   title: '提示',
+      //   content: `是否添加"${item.title}"资源？`,
+      //   positiveText: '确定',
+      //   negativeText: '取消',
+      //   onPositiveClick: async () => {
+      try {
+        console.log(item, 'any');
+        const temp: any = [];
+        prepareStore.getCoursewareList.forEach((item: any) => {
+          temp.push({
+            materialId: item.materialId,
+            materialName: item.title,
+            materialType: item.type,
+            id: item.id
+          });
+        });
 
-            // 保存课件
-            await saveCourseware({
-              coursewareDetailKnowledgeId: prepareStore.getSelectKey,
-              lessonCoursewareId: prepareStore.getLessonCoursewareId,
-              lessonCoursewareDetailId:
-                prepareStore.getLessonCoursewareDetailId,
-              materialList: [
-                ...temp,
-                {
-                  materialName: item.title,
-                  materialType: item.type,
-                  materialId: item.id
-                }
-              ]
-            });
+        // 保存课件
+        await saveCourseware({
+          coursewareDetailKnowledgeId: prepareStore.getSelectKey,
+          lessonCoursewareId: prepareStore.getLessonCoursewareId,
+          lessonCoursewareDetailId: prepareStore.getLessonCoursewareDetailId,
+          materialList: [
+            ...temp,
+            {
+              materialName: item.title,
+              materialType: item.type,
+              materialId: item.id
+            }
+          ]
+        });
 
-            message.success('添加成功');
-            prepareStore.setIsAddResource(true);
-          } catch {
-            //
-          }
-        }
-      });
+        message.success('添加成功');
+        prepareStore.setIsAddResource(true);
+      } catch {
+        //
+      }
+      //   }
+      // });
     };
 
     watch(
@@ -192,6 +191,7 @@ export default defineComponent({
                     <CardType
                       isShowAdd
                       item={item}
+                      isShowCollect={false}
                       onAdd={(item: any) => onAdd(item)}
                     />
                   ))}

src/views/setting/components/personInfo.tsx

@@ -95,8 +95,12 @@ export default defineComponent({
               class={styles.defultHeade}
               src={teacherForm.avatar || defultHeade}></NImage>
             <div
-              style={{ display: data.disabled ? 'none' : '' }}
-              class={[styles.defultHeade, styles.changeHead]}>
+              // style={{ display: data.disabled ? 'none' : '' }}
+              class={[
+                styles.defultHeade,
+                styles.changeHead,
+                data.disabled ? styles.disalbedNone : styles.hoverNone
+              ]}>
               修改头像
               {data.uploadShow && (
                 <UploadFile
@@ -124,7 +128,8 @@ export default defineComponent({
               )}
             </p>
             <p class={styles.headerSubTitle}>
-              {userStore.info.schoolInfos?.[0]?.name} | 音乐老师
+              {userStore.info.schoolInfos?.[0]?.name}
+              {/* | 音乐老师 */}
             </p>
           </div>
         </div>

src/views/setting/components/schoolInfo/index.module.less

@@ -50,11 +50,14 @@
       }
 
       &.n-input--disabled {
-        background-color: #F5F6FA;
-        color: rgba(149, 149, 152, 1);
+        .n-input__input-el {
+          background-color: #F5F6FA;
+          color: rgba(0, 0, 0, 0.4);
+        }
       }
     }
 
+
     .n-base-selection {
       height: 50Px;
       width: 284Px;
@@ -68,7 +71,11 @@
 
     .n-base-selection.n-base-selection--disabled .n-base-selection-label {
       background-color: #F5F6FA;
-      color: rgba(149, 149, 152, 1);
+      color: rgba(0, 0, 0, 0.4);
+    }
+
+    .n-base-selection.n-base-selection--disabled .n-base-selection-label .n-base-selection-input {
+      color: rgba(0, 0, 0, 0.4) !important;
     }
   }
 }
@@ -218,6 +225,7 @@
     font-weight: 600 !important;
     margin-right: 24Px;
   }
+
 }
 
 

src/views/setting/index.module.less

@@ -82,6 +82,22 @@
         cursor: pointer;
       }
 
+      .disalbedNone {
+        display: none;
+      }
+
+      .hoverNone {
+        background: transparent;
+        color: transparent;
+        transition: all 0.3s;
+
+        &:hover {
+          background-color: rgba(0, 0, 0, 0.7);
+          color: #fff;
+          transition: all 0.3s;
+        }
+      }
+
       .uploadFile {
         position: absolute;
         left: 0;
@@ -146,8 +162,10 @@
         }
 
         &.n-input--disabled {
-          background-color: #f5f6fa;
-          color: rgba(149, 149, 152, 1);
+          .n-input__input-el {
+            background-color: #F5F6FA;
+            color: rgba(0, 0, 0, 0.4);
+          }
         }
       }
 
@@ -156,15 +174,19 @@
         border-radius: 8Px;
 
         .n-base-selection-label {
-            height: 50Px;
-            font-size: 16Px;
+          height: 50Px;
+          font-size: 16Px;
         }
-    }
+      }
 
-    .n-base-selection.n-base-selection--disabled .n-base-selection-label {
+      .n-base-selection.n-base-selection--disabled .n-base-selection-label {
         background-color: #F5F6FA;
-        color: rgba(149, 149, 152, 1);
-    }
+        color: rgba(0, 0, 0, 0.4) !important;
+      }
+
+      .n-base-selection.n-base-selection--disabled .n-base-selection-label .n-base-selection-input {
+        color: rgba(0, 0, 0, 0.4) !important;
+      }
     }
   }
 }
@@ -209,7 +231,8 @@
       .n-input {
         border-radius: 5Px;
       }
-      .n-input .n-input__input-el{
+
+      .n-input .n-input__input-el {
         height: 50Px;
       }
 
@@ -218,6 +241,7 @@
       }
     }
   }
+
   .sendMsg {
     min-width: 108Px;
     height: 50Px;
@@ -228,6 +252,7 @@
     height: 24Px;
     cursor: pointer;
   }
+
   .submitBtm {
     width: 45%;
     height: 46Px;

src/views/setting/index.tsx

@@ -32,11 +32,11 @@ export default defineComponent({
           <NTabPane name="person" tab="个人信息">
             <PersonInfo></PersonInfo>
           </NTabPane>
-          {user.info.isSuperAdmin && (
-            <NTabPane name="school" tab="学校设置">
-              <SchoolInfo />
-            </NTabPane>
-          )}
+          {/* {user.info.isSuperAdmin && ( */}
+          <NTabPane name="school" tab="学校设置">
+            <SchoolInfo />
+          </NTabPane>
+          {/* )} */}
         </NTabs>
       </div>
     );

src/views/studentList/components/baseInfo.tsx

@@ -24,10 +24,7 @@ import { useUserStore } from '/src/store/modules/users';
 import { api_teacherUpdate } from '/src/api/user';
 import { resetStudentInfo } from '../api';
 import UploadFile from '/src/components/upload-file';
-import {
-  getgradeNumList,
-  classArray
-} from '@/views/classList/contants';
+import { getgradeNumList, classArray } from '@/views/classList/contants';
 export default defineComponent({
   name: 'setting-personInfo',
   props: {
@@ -62,8 +59,8 @@ export default defineComponent({
       currentGradeNum: props.studentInfo.currentGradeNum,
       currentClass: props.studentInfo.currentClass
     });
-    const gradeNumList = ref(getgradeNumList())
-    const classArrayRef = ref([...classArray] as any)
+    const gradeNumList = ref(getgradeNumList());
+    const classArrayRef = ref([...classArray] as any);
     const data = reactive({
       disabled: true,
       openChangePwd: false,
@@ -185,6 +182,7 @@ export default defineComponent({
           <NSpace class={styles.btnList} align="center" justify="end">
             <NButton
               class={styles.btn}
+              strong
               color="#f24433"
               onClick={() => (data.disabled = false)}>
               修改信息

src/views/studentList/components/evaluationRecords.tsx

@@ -28,7 +28,8 @@ export default defineComponent({
     studentId: {
       type: String,
       default: ''
-    }, classGroupId: {
+    },
+    classGroupId: {
       type: String,
       default: ''
     }
@@ -147,8 +148,8 @@ export default defineComponent({
       const res = await getPracticeRecordList({
         userId: props.studentId,
         ...state.pagination,
-        classGroupId:props.classGroupId,
-        feature: "EVALUATION",
+        classGroupId: props.classGroupId,
+        feature: 'EVALUATION',
         ...getTimes(timer.value, ['startTime', 'endTime'], 'YYYY-MM-DD')
       });
       state.tableList = res.data.rows;

src/views/studentList/components/practiceData.tsx

@@ -12,7 +12,7 @@ import numeral from 'numeral';
 import { useECharts } from '@/hooks/web/useECharts';
 import Pagination from '/src/components/pagination';
 import { getTrainingStat } from '../api';
-import { getTrainingStatList } from '@/views/classList/api'
+import { getTrainingStatList } from '@/views/classList/api';
 import {
   getNowDateAndMonday,
   getNowDateAndSunday,
@@ -90,19 +90,19 @@ export default defineComponent({
         }
       ];
     };
-    const getList =  async () => {
-        try{
-          const res = await getTrainingStatList({
-            page:1,
-            rows:999,
-            studentId: props.studentId,
-            classGroupId:props.classGroupId,
-            ...getTimes(timer.value, ['startTime', 'endTime'], 'YYYY-MM-DD')
-          })
-          state.tableList = res.data.rows;
-        }catch(e){
-          console.log(e)
-        }
+    const getList = async () => {
+      try {
+        const res = await getTrainingStatList({
+          page: 1,
+          rows: 999,
+          studentId: props.studentId,
+          classGroupId: props.classGroupId,
+          ...getTimes(timer.value, ['startTime', 'endTime'], 'YYYY-MM-DD')
+        });
+        state.tableList = res.data.rows;
+      } catch (e) {
+        console.log(e);
+      }
     };
     const setChart = () => {
       setOptions({
@@ -226,7 +226,7 @@ export default defineComponent({
       try {
         const res = await getTrainingStat({
           studentId: props.studentId,
-          classGroupId:props.classGroupId,
+          classGroupId: props.classGroupId,
           ...getTimes(timer.value, ['startTime', 'endTime'], 'YYYY-MM-DD')
         });
         payForm.practiceDays = res.data.practiceDays;
@@ -249,7 +249,7 @@ export default defineComponent({
     const search = () => {
       state.pagination.page = 1;
       getChartDetail();
-      getList()
+      getList();
       console.log('search');
     };
     const onReset = () => {
@@ -258,13 +258,13 @@ export default defineComponent({
         getNowDateAndSunday(new Date().getTime())
       ];
       search();
-      getList()
+      getList();
       console.log('onReset');
     };
     onMounted(() => {
       console.log(props.studentId);
       getChartDetail();
-      getList()
+      getList();
     });
     return () => (
       <>
@@ -301,8 +301,10 @@ export default defineComponent({
                           to={getMinutes(
                             payForm.practiceDurationTotal
                           )}></NNumberAnimation>
-                      </span>{' '}
+                      </span>
+                      <i style={{ width: '4px', display: 'inline-block' }}></i>
                       分
+                      <i style={{ width: '4px', display: 'inline-block' }}></i>
                     </div>
                   ) : null}
                   <div>
@@ -312,8 +314,8 @@ export default defineComponent({
                         to={getSecend(
                           payForm.practiceDurationTotal
                         )}></NNumberAnimation>
-                    </span>{' '}
-                    秒
+                    </span>
+                    <i style={{ width: '4px', display: 'inline-block' }}></i>秒
                   </div>
                 </p>
                 <p class={styles.TrainDataItemsubTitle}>累计练习时长</p>
@@ -328,8 +330,10 @@ export default defineComponent({
                           to={getMinutes(
                             payForm.practiceDurationAvg
                           )}></NNumberAnimation>
-                      </span>{' '}
+                      </span>
+                      <i style={{ width: '4px', display: 'inline-block' }}></i>
                       分
+                      <i style={{ width: '4px', display: 'inline-block' }}></i>
                     </div>
                   ) : null}
                   <div>
@@ -339,8 +343,8 @@ export default defineComponent({
                         to={getSecend(
                           payForm.practiceDurationAvg
                         )}></NNumberAnimation>
-                    </span>{' '}
-                    秒
+                    </span>
+                    <i style={{ width: '4px', display: 'inline-block' }}></i>秒
                   </div>
                 </p>
                 <p class={styles.TrainDataItemsubTitle}>平均练习时长</p>
@@ -352,8 +356,8 @@ export default defineComponent({
                       <NNumberAnimation
                         from={0}
                         to={payForm.practiceDays}></NNumberAnimation>
-                    </span>{' '}
-                    天
+                    </span>
+                    <i style={{ width: '4px', display: 'inline-block' }}></i>天
                   </div>
                 </p>
                 <p class={styles.TrainDataItemsubTitle}>练习天数</p>

src/views/studentList/components/studentAfterWork.tsx

@@ -25,7 +25,7 @@ import {
   getTimes
 } from '/src/utils/dateFormat';
 import { trainingStatusArray } from '@/utils/searchArray';
-import StudentTraomomhDetails from '../modals/studentTraomomhDetails'
+import StudentTraomomhDetails from '../modals/studentTraomomhDetails';
 import dayjs from 'dayjs';
 import { lookup } from 'dns';
 export default defineComponent({
@@ -204,10 +204,10 @@ export default defineComponent({
     };
     return () => (
       <div>
-        <div >
+        <div>
           <div class={styles.searchList}>
             <NForm label-placement="left" inline>
-                       <NFormItem>
+              <NFormItem>
                 <CDatePicker
                   v-model:value={timer.value}
                   separator={'至'}
@@ -231,7 +231,6 @@ export default defineComponent({
                   v-model:value={state.searchForm.trainingStatus}></CSelect>
               </NFormItem>
 
-
               <NFormItem>
                 <NSpace justify="end">
                   <NButton type="primary" class="searchBtn" onClick={search}>
@@ -248,7 +247,7 @@ export default defineComponent({
               </NFormItem>
             </NForm>
           </div>
-          <div >
+          <div>
             <NDataTable
               class={styles.classTable}
               loading={state.loading}
@@ -260,7 +259,6 @@ export default defineComponent({
               v-model:pageTotal={state.pagination.pageTotal}
               onList={getList}
               sync
-
             />
           </div>
         </div>

src/views/studentList/index.module.less

@@ -11,7 +11,6 @@
 }
 
 .addBtn {
-  margin-bottom: 30px;
   height: 43px;
   background: #198cfe;
   border-radius: 8px;
@@ -250,11 +249,18 @@
         }
       }
     }
+
+    .n-tag {
+      --n-border-radius: 6px !important;
+      --n-height: 26px !important;
+      --n-font-size: 13px !important;
+      --n-padding: 0 14px !important;
+    }
   }
 }
 
 .reportModel {
-  width: 830px;
+  width: 1030px;
   overflow: hidden;
 }
 
@@ -262,7 +268,7 @@
   position: relative;
   width: 378px;
   height: 631px;
-  margin: 120px auto 0;
+  margin: 130px auto 0;
 
   .studentCLose {
     cursor: pointer;
@@ -448,16 +454,18 @@
 
     position: absolute;
     left: -21px;
-    bottom: -120px;
+    bottom: -140px;
     display: flex;
     flex-direction: column;
     align-items: center;
 
     p {
       text-align: center;
-      font-size: 16px;
+      font-size: 20px;
+      font-weight: bold;
       color: #ffffff;
       margin-bottom: 30px;
+
     }
 
     .downBtn {
@@ -483,11 +491,11 @@
   :global {
     .n-form-item-label {
       font-size: 15px;
-      color: rgba(0, 0, 0, 0.8);
+      color: #000;
     }
 
     .n-input {
-      height: 50px;
+      height: 57px;
       border-radius: 8px;
 
       .n-input__input-el {
@@ -504,7 +512,7 @@
       border-radius: 8px;
 
       .n-base-selection-label {
-        height: 50px;
+        height: 57px;
       }
     }
 
@@ -517,6 +525,11 @@
 
 .btnList {
   margin-top: 300px;
+
+  .btn {
+    --n-padding: 0 36px !important;
+    --n-height: 45px !important;
+  }
 }
 
 

src/views/studentList/index.tsx

@@ -18,7 +18,7 @@ import { useRoute, useRouter } from 'vue-router';
 import { getStudentList } from './api';
 import { classGroupList } from '@/views/classList/api';
 import AddStudentModel from './modals/addStudentModel';
-import Studentguide from '@/custom-plugins/guide-page/student-guide'
+import Studentguide from '@/custom-plugins/guide-page/student-guide';
 export default defineComponent({
   name: 'student-studentList',
   setup(props, { emit }) {
@@ -43,12 +43,11 @@ export default defineComponent({
       },
       tableList: [] as any,
       classList: [],
-      addStudentVisible: false,
-
+      addStudentVisible: false
     });
     const route = useRoute();
     const router = useRouter();
-    const showGuide = ref(false)
+    const showGuide = ref(false);
     const search = () => {
       state.pagination.page = 1;
       getList();
@@ -83,11 +82,10 @@ export default defineComponent({
         });
         state.tableList = res.data.rows;
         state.pagination.pageTotal = res.data.total;
-        if(state.tableList.length >0){
-          setTimeout(()=>{
-            showGuide.value= true;
-          },500)
-
+        if (state.tableList.length > 0) {
+          setTimeout(() => {
+            showGuide.value = true;
+          }, 500);
         }
       } catch (e) {
         console.log(e);
@@ -122,7 +120,8 @@ export default defineComponent({
               </>
             );
           }
-        },     {
+        },
+        {
           title: '年级班级',
           key: 'classGroupName'
         },
@@ -137,15 +136,22 @@ export default defineComponent({
         {
           title: '操作',
           key: 'id',
-          render(row: any,index:number) {
+          render(row: any, index: number) {
             return (
               <>
-                {index==0? <NButton {...{id:'student-1'}} text type="primary" onClick={() => gotoDetail(row)}>
-                详情
-              </NButton>: <NButton text type="primary" onClick={() => gotoDetail(row)}>
-                详情
-              </NButton>}
-
+                {index == 0 ? (
+                  <NButton
+                    {...{ id: 'student-1' }}
+                    text
+                    type="primary"
+                    onClick={() => gotoDetail(row)}>
+                    详情
+                  </NButton>
+                ) : (
+                  <NButton text type="primary" onClick={() => gotoDetail(row)}>
+                    详情
+                  </NButton>
+                )}
               </>
             );
           }
@@ -249,7 +255,7 @@ export default defineComponent({
           </NForm>
         </div>
         <NButton
-        {...{id:'student-0'}}
+          {...{ id: 'student-0' }}
           onClick={() => {
             state.addStudentVisible = true;
           }}
@@ -287,7 +293,7 @@ export default defineComponent({
               }}></AddStudentModel>
           </div>
         ) : null}
-          {showGuide.value?<Studentguide></Studentguide>:null}
+        {showGuide.value ? <Studentguide></Studentguide> : null}
       </div>
     );
   }

src/views/studentList/modals/addStudentModel.tsx

@@ -20,7 +20,7 @@ import studentTitle from '../images/studentTitle.png';
 import studentInfo from '../images/strudentCore.png';
 import btnBg from '../images/btnBg.png';
 import html2canvas from 'html2canvas';
-import codewrap from '../images/cordWrap.png'
+import codewrap from '../images/cordWrap.png';
 export default defineComponent({
   props: {
     activeRow: {
@@ -47,7 +47,7 @@ export default defineComponent({
     const foemsRef = ref();
     const url = ref(
       vaildUrl() +
-      `/classroom-app/#/student-register?sId=${userStore.getUserInfo.schoolInfos[0].id}`
+        `/classroom-app/#/student-register?sId=${userStore.getUserInfo.schoolInfos[0].id}`
     );
     const imgs = reactive({
       saveLoading: false,
@@ -125,7 +125,6 @@ export default defineComponent({
           previewDisabled
           src={studentTitle}></NImage>
         <div class={styles.addStudentInfo} id="preview-container">
-
           <NImage
             class={styles.studentInfoBg}
             previewDisabled
@@ -148,7 +147,13 @@ export default defineComponent({
               </p>
               <div class={styles.codewrap}>
                 <img src={codewrap} class={styles.codewrapBg} alt="" />
-                <TheQrCode margin={0} logoSrc={logo} class={styles.codewrapImg} text={url.value} size={119} />
+                <TheQrCode
+                  margin={0}
+                  // logoSrc={logo}
+                  class={styles.codewrapImg}
+                  text={url.value}
+                  size={119}
+                />
               </div>
               <div class={styles.codewrapSubmit}>
                 <NImage previewDisabled src={btnBg}></NImage>

src/views/studentList/modals/studentTraomomhDetails.tsx

@@ -71,7 +71,7 @@ export default defineComponent({
       return tList;
     };
     const getTrainingDetail = async (id: any) => {
-      console.log(id,'getTrainingDetail')
+      console.log(id, 'getTrainingDetail');
       try {
         const res = await getTrainingStudentDetail({
           studentLessonTrainingId: id
@@ -173,6 +173,30 @@ export default defineComponent({
                 isCLassWork={false}
                 item={item}></TrainType>
             ))}
+            {teacherInfo.value.studentLessonTrainingDetails.map((item: any) => (
+              <TrainType
+                style={{ marginBottom: '20px' }}
+                isDisabled={true}
+                isDelete={false}
+                isCLassWork={false}
+                item={item}></TrainType>
+            ))}
+            {teacherInfo.value.studentLessonTrainingDetails.map((item: any) => (
+              <TrainType
+                style={{ marginBottom: '20px' }}
+                isDisabled={true}
+                isDelete={false}
+                isCLassWork={false}
+                item={item}></TrainType>
+            ))}
+            {teacherInfo.value.studentLessonTrainingDetails.map((item: any) => (
+              <TrainType
+                style={{ marginBottom: '20px' }}
+                isDisabled={true}
+                isDelete={false}
+                isCLassWork={false}
+                item={item}></TrainType>
+            ))}
           </div>
         </NScrollbar>
       </div>

src/views/studentList/studentDetail.tsx

@@ -23,14 +23,20 @@ import maleIcon from '@/views/setting/images/maleIcon.png';
 import PracticeData from '@/views/studentList/components/practiceData';
 import EvaluationRecords from '@/views/studentList/components/evaluationRecords';
 import BaseInfo from '@/views/studentList/components/baseInfo';
-import StudentAfterWork from './components/studentAfterWork'
+import StudentAfterWork from './components/studentAfterWork';
 import { getTabsCache, setTabsCaches } from '@/hooks/use-async';
 import dayjs from 'dayjs';
 export default defineComponent({
   name: 'studentDetail',
   setup(props, { emit }) {
     const state = reactive({
-      studentInfo: { avatar: '', nickname: '', gender: null, subjectNames: '',classGroupName:'' }
+      studentInfo: {
+        avatar: '',
+        nickname: '',
+        gender: null,
+        subjectNames: '',
+        classGroupName: ''
+      }
     });
     const activeStudentTab = ref('baseInfo');
     const route = useRoute();
@@ -99,7 +105,7 @@ export default defineComponent({
             </div>
           </div>
           <NTabs
-              onUpdate:value={(val: any) => setTabs(val)}
+            onUpdate:value={(val: any) => setTabs(val)}
             class={styles.customTabs}
             v-model:value={activeStudentTab.value}
             size="large"

src/views/xiaoku-ai/index.module.less

@@ -1,152 +1,156 @@
 .container {
-    display: flex;
-    flex-direction: column;
-    background: #FFFFFF;
-    border-radius: 20Px;
+  display: flex;
+  flex-direction: column;
+  background: #FFFFFF;
+  border-radius: 20Px;
 }
 
 .tools {
-    padding: 32px 32px 20px 32px;
-    display: flex;
-    align-items: flex-start;
-    flex-shrink: 0;
+  padding: 32px 32px 20px 32px;
+  display: flex;
+  align-items: flex-start;
+  flex-shrink: 0;
+
+  :global {
+    .n-input {
+      margin-left: auto;
+      width: 360px;
+    }
 
-    :global {
-        .n-input {
-            margin-left: auto;
-            width: 360px;
-        }
-
-        .n-button.n-button--disabled {
-            cursor: initial;
-            padding: 0;
-        }
+    .n-button.n-button--disabled {
+      cursor: initial;
+      padding: 0;
     }
+  }
+
+  .tagWrap {
+    flex: 1;
+    margin-right: 20Px;
+  }
 
-    .tagWrap {
-        flex: 1;
-        margin-right: 20Px;
+  .tags {
+    &:first-child {
+      padding-top: 6px;
     }
 
-    .tags {
-        padding: 12px 0;
-
-        :global {
-            .n-button {
-                min-width: 102px;
-                height: 37px;
-                padding: 0 24px;
-                font-size: 18px;
-            }
-        }
+    padding: 12px 0;
+
+    :global {
+      .n-button {
+        min-width: 102px;
+        height: 37px;
+        padding: 0 24px;
+        font-size: 18px;
+      }
     }
+  }
 }
 
 .content {
-    flex: 1;
-    padding: 20Px 36Px 36Px 36Px;
+  flex: 1;
+  padding: 20Px 36Px 36Px 36Px;
 }
 
 .item {
+  position: relative;
+  width: 214Px;
+  cursor: pointer;
+  transition: all .3s;
+
+  .cover {
     position: relative;
-    width: 214Px;
-    cursor: pointer;
-    transition: all .3s;
+    overflow: hidden;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 107Px;
+      left: 0;
+      width: 214Px;
+      height: 214Px;
+      background: #DDF2FF;
+      border-radius: 50%;
+    }
+  }
+
+  &:hover {
+    transform: scale(1.1);
+  }
+
+  .itemImg {
+    position: relative;
+    width: 158Px;
+    height: 223Px;
+    margin: auto;
+    background-color: #EDEFF2;
+    background-image: url('./icon_default.svg');
+    background-repeat: no-repeat;
+    background-position: center center;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 4Px;
+      right: -4Px;
+      width: 4Px;
+      height: calc(100% - 8Px);
+      background-color: #C5C5C5;
+      z-index: 1;
+
 
-    .cover {
-        position: relative;
-        overflow: hidden;
-
-        &::before {
-            content: '';
-            position: absolute;
-            top: 107Px;
-            left: 0;
-            width: 214Px;
-            height: 214Px;
-            background: #DDF2FF;
-            border-radius: 50%;
-        }
     }
 
-    &:hover {
-        transform: scale(1.1);
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 2Px;
+      right: -2Px;
+      width: 4Px;
+      height: calc(100% - 4Px);
+      background-color: #E7E7E7;
+      z-index: 2;
     }
 
-    .itemImg {
-        position: relative;
-        width: 158Px;
-        height: 223Px;
-        margin: auto;
-        background-color: #EDEFF2;
-        background-image: url('./icon_default.svg');
-        background-repeat: no-repeat;
-        background-position: center center;
-
-        &::before {
-            content: '';
-            position: absolute;
-            top: 4Px;
-            right: -4Px;
-            width: 4Px;
-            height: calc(100% - 8Px);
-            background-color: #C5C5C5;
-            z-index: 1;
-
-
-        }
-
-
-        &::after {
-            content: '';
-            position: absolute;
-            top: 2Px;
-            right: -2Px;
-            width: 4Px;
-            height: calc(100% - 4Px);
-            background-color: #E7E7E7;
-            z-index: 2;
-        }
-
-        .itemBg {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            z-index: 4;
-            background-repeat: no-repeat;
-            background-image: linear-gradient(to right, rgba(0, 0, 0, 0.2) 0, rgba(255, 255, 255, 0.08) 0%, transparent 0.5%), linear-gradient(to right, rgba(0, 0, 0, 0.1) 0.3%, rgba(255, 255, 255, 0.09) 1.1%, transparent 1.3%);
-            background-size: 50% 100%, 50% 100%;
-            background-position: 0% top, 9% top;
-        }
-
-        :global {
-            .n-image {
-                position: relative;
-                width: 100%;
-                height: 100%;
-                z-index: 3;
-            }
-        }
-
-        img {
-            transition: opacity .3s;
-            opacity: 0;
-        }
-
-        img[data-loaded="true"] {
-            opacity: 1;
-        }
+    .itemBg {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 4;
+      background-repeat: no-repeat;
+      background-image: linear-gradient(to right, rgba(0, 0, 0, 0.2) 0, rgba(255, 255, 255, 0.08) 0%, transparent 0.5%), linear-gradient(to right, rgba(0, 0, 0, 0.1) 0.3%, rgba(255, 255, 255, 0.09) 1.1%, transparent 1.3%);
+      background-size: 50% 100%, 50% 100%;
+      background-position: 0% top, 9% top;
+    }
 
+    :global {
+      .n-image {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        z-index: 3;
+      }
+    }
 
+    img {
+      transition: opacity .3s;
+      opacity: 0;
     }
 
-    .itemName {
-        margin-top: 16Px;
-        font-size: 16Px;
-        font-weight: 500;
-        color: #333;
-        text-align: center;
+    img[data-loaded="true"] {
+      opacity: 1;
     }
+
+
+  }
+
+  .itemName {
+    margin-top: 16Px;
+    font-size: 16Px;
+    font-weight: 500;
+    color: #333;
+    text-align: center;
+  }
 }

src/views/xiaoku-ai/index.tsx

@@ -113,7 +113,7 @@ export default defineComponent({
             <div class={styles.tags}>
               <NSpace size={[24, 12]}>
                 <NButton quaternary disabled>
-                  {data.tags[0]?.columnName}
+                  类型
                 </NButton>
 
                 {data.tags.map((item: any, index: number) => {
@@ -121,7 +121,7 @@ export default defineComponent({
                     <>
                       <NButton
                         round
-                        secondary
+                        secondary={data.tagActiveId === item.id ? false : true}
                         type={
                           data.tagActiveId === item.id ? 'primary' : 'default'
                         }
@@ -147,7 +147,9 @@ export default defineComponent({
                         <>
                           <NButton
                             round
-                            secondary
+                            secondary={
+                              column.activeIndex === index ? false : true
+                            }
                             type={
                               column.activeIndex === index
                                 ? 'primary'

src/views/xiaoku-music/index.module.less

@@ -1,317 +1,318 @@
 .container {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
 
-    :global {
-        .n-breadcrumb>ul {
-            display: flex;
-            align-items: center;
-
-            .n-breadcrumb-item {
-                display: flex;
-                align-items: center;
-            }
-
-            .n-breadcrumb-item__separator {
-                display: none;
-            }
-
-            .n-breadcrumb-item__link {
-                padding: 5Px 18Px;
-                background: #FFFFFF;
-                border-radius: 16Px;
-                color: #21225D;
-                line-height: 20Px;
-            }
-        }
+  :global {
+    .n-breadcrumb>ul {
+      display: flex;
+      align-items: center;
 
-        .n-breadcrumb .n-breadcrumb-item:last-child .n-breadcrumb-item__link {
-            color: #fff;
-            background: var(--product-color);
-        }
+      .n-breadcrumb-item {
+        display: flex;
+        align-items: center;
+      }
 
-    }
+      .n-breadcrumb-item__separator {
+        display: none;
+      }
 
-    &> :global(.n-space) {
-        height: 36Px;
-        flex-shrink: 0;
+      .n-breadcrumb-item__link {
+        padding: 5Px 18Px;
+        background: #FFFFFF;
+        border-radius: 16Px;
+        color: #21225D;
+        line-height: 20Px;
+      }
     }
 
-    .separator {
-        height: 18Px;
-        margin: 0 16Px;
+    .n-breadcrumb .n-breadcrumb-item:last-child .n-breadcrumb-item__link {
+      color: #fff;
+      background: var(--product-color);
     }
+
+  }
+
+  &> :global(.n-space) {
+    height: 36Px;
+    flex-shrink: 0;
+  }
+
+  .separator {
+    height: 18Px;
+    margin: 0 16Px;
+  }
 }
 
 .wrap {
-    padding-top: 20Px;
-    flex: 1;
-    transition: padding .3s;
-    overflow: hidden;
+  padding-top: 20Px;
+  flex: 1;
+  transition: padding .3s;
+  overflow: hidden;
 }
 
 .content {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    background: #DDF2FF;
-    border-radius: 20Px;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: #DDF2FF;
+  border-radius: 20Px;
 }
 
 .tools {
-    padding: 20Px;
-    display: flex;
-    align-items: center;
-    flex-shrink: 0;
-
-    :global {
-        .n-input {
-            margin-left: auto;
-            width: 361Px;
-        }
+  padding: 20Px;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+
+  :global {
+    .n-input {
+      margin-left: auto;
+      width: 361Px;
     }
+  }
 }
 
 .contentWrap {
-    flex: 1;
-    display: flex;
-    padding: 0 20Px 20Px;
-    overflow: hidden;
+  flex: 1;
+  display: flex;
+  padding: 0 20Px 20Px;
+  overflow: hidden;
 }
 
 .musicList {
-    width: 548px;
-    height: 100%;
-    overflow-x: hidden;
-    overflow-y: auto;
-    min-width: 330Px;
-
-    &::-webkit-scrollbar {
-        width: 0;
-        display: none;
-    }
-
-    .wrapList {
-        width: 512px;
-        min-width: 294Px;
-        min-height: 100%;
-        background: #fff;
-        border-radius: 16Px;
-    }
+  width: 548px;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  min-width: 330Px;
+  // max-height: 100vh;
+
+  &::-webkit-scrollbar {
+    width: 0;
+    display: none;
+  }
+
+  .wrapList {
+    width: 512px;
+    min-width: 294Px;
+    min-height: 100%;
+    background: #fff;
+    border-radius: 16Px;
+  }
 
-    .empty {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        height: 50vh;
-    }
+  .empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 50vh;
+  }
 }
 
 .itemContainer {
-    border-radius: 16Px;
-    padding: 4Px 8Px;
+  border-radius: 16Px;
+  padding: 4Px 8Px;
 
-    &:first-child {
-        padding-top: 8Px;
-    }
+  &:first-child {
+    padding-top: 8Px;
+  }
 
-    &:last-child {
-        padding-bottom: 8Px;
-    }
+  &:last-child {
+    padding-bottom: 8Px;
+  }
 }
 
 .item {
-    position: relative;
-    display: flex;
-    align-items: center;
-    padding: 10Px;
-    border-radius: 12Px;
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: 10Px;
+  border-radius: 12Px;
 
-    cursor: pointer;
+  cursor: pointer;
 
-    &:hover {
-        background-color: rgba(0, 0, 0, .05);
-    }
+  &:hover {
+    background-color: rgba(0, 0, 0, .05);
+  }
 
-    &.active {
-        background-color: #DDF2FF;
+  &.active {
+    background-color: #DDF2FF;
 
-        .arrow {
-            opacity: 1;
-        }
+    .arrow {
+      opacity: 1;
     }
+  }
 
-    .img {
-        position: relative;
-        width: 60Px;
-        height: 60Px;
-        border-radius: 8Px;
-        margin-right: 12Px;
-        box-shadow: 0 0 10px 4px rgba(27, 35, 55, .1);
-        overflow: hidden;
-        flex-shrink: 0;
-
-        :global {
-            .n-image {
-                width: 100%;
-                height: 100%;
-            }
-        }
-
-        img {
-            transition: opacity .3s;
-            opacity: 0;
-        }
+  .img {
+    position: relative;
+    width: 60Px;
+    height: 60Px;
+    border-radius: 8Px;
+    margin-right: 12Px;
+    box-shadow: 0 0 10px 4px rgba(27, 35, 55, .1);
+    overflow: hidden;
+    flex-shrink: 0;
 
-        img[data-loaded="true"] {
-            opacity: 1;
-        }
+    :global {
+      .n-image {
+        width: 100%;
+        height: 100%;
+      }
     }
 
-    .title {
-        flex: 1;
-        overflow: hidden;
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-
-        .titleName {
-            font-size: 16Px;
-            font-weight: 600;
-            color: #131415;
-            line-height: 28Px;
-            width: 100%;
-        }
+    img {
+      transition: opacity .3s;
+      opacity: 0;
+    }
 
-        .titleDes {
-            font-size: 14Px;
-            font-weight: 400;
-            color: #777777;
-            line-height: 20Px;
-            max-width: 100%;
-            white-space: nowrap;
-            text-overflow: ellipsis;
-            overflow: hidden;
-        }
+    img[data-loaded="true"] {
+      opacity: 1;
     }
+  }
 
-    .btn {
-        margin-left: auto;
-        width: 84px;
-        height: 40px;
-        background: linear-gradient(to right, #44CAFF, #259DFE);
-        border: none;
-        padding: 0;
-        font-weight: bold !important;
-        flex-shrink: 0;
-        min-width: 62Px;
-        min-height: 30Px;
-
-        :global {
-            .n-button__content {
-                &>img {
-                    margin-left: 10Px;
-                }
-            }
-        }
+  .title {
+    flex: 1;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+
+    .titleName {
+      font-size: 16Px;
+      font-weight: 600;
+      color: #131415;
+      line-height: 28Px;
+      width: 100%;
     }
 
-    .arrow {
-        position: absolute;
-        top: 50%;
-        right: 0;
-        transform: translate(124%, -50%);
-        opacity: 0;
+    .titleDes {
+      font-size: 14Px;
+      font-weight: 400;
+      color: #777777;
+      line-height: 20Px;
+      max-width: 100%;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
     }
+  }
+
+  .btn {
+    margin-left: auto;
+    width: 84px;
+    height: 40px;
+    background: linear-gradient(to right, #44CAFF, #259DFE);
+    border: none;
+    padding: 0;
+    font-weight: bold !important;
+    flex-shrink: 0;
+    min-width: 62Px;
+    min-height: 30Px;
 
-    .showPlayLoading {
-        opacity: 0;
+    :global {
+      .n-button__content {
+        &>img {
+          margin-left: 10Px;
+        }
+      }
     }
+  }
+
+  .arrow {
+    position: absolute;
+    top: 50%;
+    right: 0;
+    transform: translate(124%, -50%);
+    opacity: 0;
+  }
+
+  .showPlayLoading {
+    opacity: 0;
+  }
 
 }
 
 .loadingWrap {
-    display: flex;
-    justify-content: center;
-    min-height: 80Px;
+  display: flex;
+  justify-content: center;
+  min-height: 80Px;
 }
 
 .musicStaff {
-    display: flex;
-    flex-direction: column;
-    position: relative;
-    left: -8Px;
-    flex: 1;
-    background-color: #fff;
-    border-radius: 16Px;
-    height: 100%;
-    z-index: 1;
-    overflow: hidden;
-
-    &::-webkit-scrollbar {
-        width: 0;
-        display: none;
-    }
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  left: -8Px;
+  flex: 1;
+  background-color: #fff;
+  border-radius: 16Px;
+  height: 100%;
+  z-index: 1;
+  overflow: hidden;
+
+  &::-webkit-scrollbar {
+    width: 0;
+    display: none;
+  }
+
+  .goBtn {
+    position: absolute;
+    left: 50%;
+    bottom: 46Px;
+    transform: translateX(-50%);
+    height: 70Px;
+    cursor: pointer;
+  }
+
+  .favitor {
+    position: absolute;
+    top: 20px;
+    right: 24px;
+    width: 48px;
+    height: 48px;
+    cursor: pointer;
+    transition: all .3s;
 
-    .goBtn {
-        position: absolute;
-        left: 50%;
-        bottom: 46Px;
-        transform: translateX(-50%);
-        height: 70Px;
-        cursor: pointer;
+    &:hover {
+      transform: scale(1.1);
     }
 
-    .favitor {
-        position: absolute;
-        top: 20px;
-        right: 24px;
-        width: 48px;
-        height: 48px;
-        cursor: pointer;
-        transition: all .3s;
-
-        &:hover {
-            transform: scale(1.1);
-        }
-
-        &>img {
-            display: block;
-            width: 100%;
-            height: 100%;
-            filter: drop-shadow(0 0 10px rgba(27, 35, 55, .1));
-        }
+    &>img {
+      display: block;
+      width: 100%;
+      height: 100%;
+      filter: drop-shadow(0 0 10px rgba(27, 35, 55, .1));
     }
+  }
 }
 
 .musicName {
-    padding-top: 30Px;
-    font-size: 24Px;
-    font-weight: 500;
-    color: #333;
-    line-height: 24Px;
-    text-align: center;
+  padding-top: 30Px;
+  font-size: 24Px;
+  font-weight: 500;
+  color: #333;
+  line-height: 24Px;
+  text-align: center;
 }
 
 .staffImgs {
-    flex: 1;
-    overflow-y: auto;
+  flex: 1;
+  overflow-y: auto;
 
-    &>img {
-        width: 100%;
-    }
+  &>img {
+    width: 100%;
+  }
 }
 
 :global {
 
-    .van-fade-enter-active,
-    .van-fade-leave-active {
-        transition: all 0.3s;
-    }
+  .van-fade-enter-active,
+  .van-fade-leave-active {
+    transition: all 0.3s;
+  }
 
-    .van-fade-enter-from,
-    .van-fade-leave-to {
-        opacity: 0;
-    }
+  .van-fade-enter-from,
+  .van-fade-leave-to {
+    opacity: 0;
+  }
 }

src/views/xiaoku-music/index.tsx

@@ -250,6 +250,7 @@ export default defineComponent({
               <TheSearch
                 style={{ marginLeft: 'auto' }}
                 round
+                border={false}
                 onSearch={val => {
                   forms.keyword = val;
                   data.reshing = true;