Merge branch 'startLogin' 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/TheEmpty/index.module.less

@@ -4,4 +4,16 @@
   display: flex;
   justify-content: center;
   align-items: center;
+
+  :global {
+    .n-empty__icon {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .emptyImg {
+    width: 240px;
+    height: 240px;
+  }
 }

src/components/TheEmpty/index.tsx

@@ -1,6 +1,7 @@
 import { defineComponent } from 'vue';
 import styles from './index.module.less';
-import { NEmpty } from 'naive-ui';
+import { NEmpty, NImage } from 'naive-ui';
+import emptyImg from './images/nomore.png'
 
 export default defineComponent({
   name: 'the-empty',
@@ -13,7 +14,9 @@ export default defineComponent({
   setup(props) {
     return () => (
       <div class={styles.theEmtpy}>
-        <NEmpty description={props.description} />
+        <NEmpty description={props.description} v-slots={{
+          icon: () => <NImage class={styles.emptyImg} previewDisabled src={emptyImg}></NImage>
+        }} />
       </div>
     );
   }

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/components/layout/layoutTop.tsx

@@ -168,6 +168,7 @@ export default defineComponent({
             showIcon={false}
             title="修改密码">
             <ForgotPassword
+              phone={info.value.phone}
               onClose={() => {
                 showWord.value = false;
               }}

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/components/afterWork.tsx

@@ -26,6 +26,7 @@ import {
 import dayjs from 'dayjs';
 import TrainSettings from '../../attend-class/model/train-settings';
 import { use } from 'echarts';
+import TheEmpty from '/src/components/TheEmpty';
 export default defineComponent({
   name: 'afterWork',
   setup(props, { emit }) {
@@ -257,6 +258,9 @@ export default defineComponent({
         </NButton>
         <div class={styles.tableWrap}>
           <NDataTable
+               v-slots={{
+                empty:()=><TheEmpty></TheEmpty>
+              }}
             class={styles.classTable}
             loading={state.loading}
             columns={columns()}

src/views/classList/components/afterWorkDetail.tsx

@@ -28,6 +28,7 @@ import { trainingStatusArray } from '@/utils/searchArray';
 import TrainingDetails from '../modals/TrainingDetails';
 import dayjs from 'dayjs';
 import { lookup } from 'dns';
+import TheEmpty from '/src/components/TheEmpty';
 export default defineComponent({
   name: 'student-studentList',
   setup(props, { emit }) {
@@ -279,6 +280,9 @@ export default defineComponent({
         </NButton> */}
           <div class={styles.tableWrap}>
             <NDataTable
+               v-slots={{
+                empty:()=><TheEmpty></TheEmpty>
+              }}
               class={styles.classTable}
               loading={state.loading}
               columns={columns()}

src/views/classList/components/classStudent.tsx

@@ -15,6 +15,7 @@ import Pagination from '@/components/pagination';
 import { getStudentList } from '../api';
 import add from './images/add.png';
 import { useRoute, useRouter } from 'vue-router';
+import TheEmpty from '/src/components/TheEmpty';
 export default defineComponent({
   name: 'student-studentList',
   setup(props, { emit }) {
@@ -181,6 +182,9 @@ export default defineComponent({
         </NButton> */}
         <div class={styles.tableWrap}>
           <NDataTable
+             v-slots={{
+              empty:()=><TheEmpty></TheEmpty>
+            }}
             class={styles.classTable}
             loading={state.loading}
             columns={columns()}

src/views/classList/components/testRecode.tsx

@@ -27,6 +27,7 @@ import {
 import { getTestList, getTrainingStat } from '../api';
 import CDatePicker from '/src/components/CDatePicker';
 import { useRoute, useRouter } from 'vue-router';
+import TheEmpty from '/src/components/TheEmpty';
 
 export default defineComponent({
   name: 'student-studentList',
@@ -323,6 +324,9 @@ export default defineComponent({
         </div>
         <div class={styles.tableWrap}>
           <NDataTable
+             v-slots={{
+              empty:()=><TheEmpty></TheEmpty>
+            }}
             class={styles.classTable}
             loading={state.loading}
             columns={columns()}

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

@@ -25,7 +25,7 @@ import add from '@/views/studentList/images/add.png';
 import ClassGuide from '@/custom-plugins/guide-page/class-guide';
 import { useRouter } from 'vue-router';
 import { rowDark } from 'naive-ui/es/legacy-grid/styles';
-
+import TheEmpty from '/src/components/TheEmpty';
 export default defineComponent({
   name: 'class-classList',
   setup(props, { emit }) {
@@ -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}
@@ -298,6 +296,9 @@ export default defineComponent({
         </NButton>
         <div class={styles.tableWrap}>
           <NDataTable
+          v-slots={{
+            empty:()=><TheEmpty></TheEmpty>
+          }}
             class={styles.classTable}
             loading={state.loading}
             columns={columns()}
@@ -313,9 +314,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 +345,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/practiceData.tsx

@@ -9,6 +9,7 @@ import { getMinutes, getSecend, getTimes } from '/src/utils/dateFormat';
 import { useRoute, useRouter } from 'vue-router';
 import { getTrainingStatList } from '../../classList/api';
 import dayjs from 'dayjs';
+import TheEmpty from '/src/components/TheEmpty';
 export default defineComponent({
   name: 'home-practiceData',
   props: {
@@ -351,6 +352,9 @@ export default defineComponent({
           </div>
           <div class={styles.tableWrap}>
             <NDataTable
+              v-slots={{
+                empty: () => <TheEmpty></TheEmpty>
+              }}
               class={styles.classTable}
               loading={state.loading}
               columns={columns()}

src/views/home/components/practiceRanking.tsx

@@ -16,6 +16,7 @@ import add from './images/add.png';
 import { getMinutes, getSecend, getTimes } from '/src/utils/dateFormat';
 import { getTestList } from '../../classList/api';
 import dayjs from 'dayjs';
+import TheEmpty from '/src/components/TheEmpty';
 export default defineComponent({
   name: 'student-studentList',
   props: {
@@ -188,6 +189,9 @@ export default defineComponent({
       <div class={styles.listWrap}>
         <div class={styles.tableWrap}>
           <NDataTable
+             v-slots={{
+              empty:()=><TheEmpty></TheEmpty>
+            }}
             class={styles.classTable}
             loading={state.loading}
             columns={columns()}

src/views/home/components/trainData.tsx

@@ -9,6 +9,7 @@ import { getTrainingStat } from '../../data-module/api';
 import { useRoute, useRouter } from 'vue-router';
 import { getTrainingList } from '../../classList/api';
 import dayjs from 'dayjs';
+import TheEmpty from '/src/components/TheEmpty';
 
 export default defineComponent({
   name: 'home-trainData',
@@ -58,50 +59,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
     });
@@ -547,6 +505,9 @@ export default defineComponent({
           </div>
           <div class={styles.tableWrap}>
             <NDataTable
+               v-slots={{
+                empty:()=><TheEmpty></TheEmpty>
+              }}
               class={styles.classTable}
               loading={state.loading}
               columns={columns()}

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();
@@ -334,10 +334,16 @@ export default defineComponent({
         }
       });
     };
-
+    const clearStorng = ()=>{
+      localStorage.removeItem('teacher-guideInfo')
+      forms.showGuide=false;
+      setTimeout(()=>{
+        forms.showGuide=true;
+      },500)
+
+    }
     return () => (
       <div class={styles.homeWrap}>
-
         <div class={styles.homeInfoLeft}>
           <div class={styles.homeBanner}>
             <div class={styles.welcomeInfo}>
@@ -351,14 +357,16 @@ 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'}}  onClick={()=>clearStorng()}>
                   功能引导
                   <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 +524,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 +681,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/components/schoolInfo/index.tsx

@@ -350,6 +350,9 @@ export default defineComponent({
         </NSpace>
 
         <NDataTable
+           v-slots={{
+            empty:()=><TheEmpty></TheEmpty>
+          }}
           loading={data.loading}
           columns={columns()}
           data={data.dataList}></NDataTable>

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/setting/modal/addteacherModel.tsx

@@ -152,7 +152,7 @@ export default defineComponent({
               </p>
               <div class={styles.codewrap}>
                 <img src={codewrap} class={styles.codewrapBg} alt="" />
-                <TheQrCode margin={0} logoSrc={logo} text={registerUrl()} size={119} />
+                <TheQrCode margin={0} text={registerUrl()} size={119} />
               </div>
               <div class={styles.codewrapSubmit}>
                 <NImage previewDisabled src={btnBg}></NImage>

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;
@@ -201,6 +202,9 @@ export default defineComponent({
         </NForm>
         <div class={styles.tableWrap}>
           <NDataTable
+             v-slots={{
+              empty:()=><TheEmpty></TheEmpty>
+            }}
             class={styles.classTable}
             loading={state.loading}
             columns={columns()}

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,
@@ -21,6 +21,7 @@ import {
   getSecend
 } from '/src/utils/dateFormat';
 import CDatePicker from '/src/components/CDatePicker';
+import TheEmpty from '/src/components/TheEmpty';
 export default defineComponent({
   name: 'student-practiceData',
   props: {
@@ -90,19 +91,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 +227,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 +250,7 @@ export default defineComponent({
     const search = () => {
       state.pagination.page = 1;
       getChartDetail();
-      getList()
+      getList();
       console.log('search');
     };
     const onReset = () => {
@@ -258,13 +259,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 +302,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 +315,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 +331,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 +344,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 +357,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>
@@ -385,6 +390,9 @@ export default defineComponent({
           </div>
           <div class={styles.tableWrap}>
             <NDataTable
+               v-slots={{
+                empty:()=><TheEmpty></TheEmpty>
+              }}
               class={styles.classTable}
               loading={state.loading}
               columns={columns()}

src/views/studentList/components/studentAfterWork.tsx

@@ -25,9 +25,10 @@ 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';
+import TheEmpty from '/src/components/TheEmpty';
 export default defineComponent({
   name: 'student-studentList',
   setup(props, { emit }) {
@@ -158,7 +159,7 @@ export default defineComponent({
                   <p class={styles.nosub}>未提交</p>
                 ) : null}
                 {row.trainingStatus == 'SUBMITTED' ? (
-                  <p class={styles.ison}>不合格</p>
+                  <p style={{color:'#EA4132'}} class={styles.ison}>不合格</p>
                 ) : null}
                 {row.trainingStatus == 'TARGET' ? (
                   <p class={styles.isok}>合格</p>
@@ -204,10 +205,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 +232,6 @@ export default defineComponent({
                   v-model:value={state.searchForm.trainingStatus}></CSelect>
               </NFormItem>
 
-
               <NFormItem>
                 <NSpace justify="end">
                   <NButton type="primary" class="searchBtn" onClick={search}>
@@ -248,8 +248,11 @@ export default defineComponent({
               </NFormItem>
             </NForm>
           </div>
-          <div >
+          <div>
             <NDataTable
+               v-slots={{
+                empty:()=><TheEmpty></TheEmpty>
+              }}
               class={styles.classTable}
               loading={state.loading}
               columns={columns()}
@@ -260,7 +263,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

@@ -19,6 +19,7 @@ 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 TheEmpty from '/src/components/TheEmpty';
 export default defineComponent({
   name: 'student-studentList',
   setup(props, { emit }) {
@@ -43,12 +44,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();
@@ -122,7 +122,8 @@ export default defineComponent({
               </>
             );
           }
-        },     {
+        },
+        {
           title: '年级班级',
           key: 'classGroupName'
         },
@@ -137,15 +138,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 +257,7 @@ export default defineComponent({
           </NForm>
         </div>
         <NButton
-        {...{id:'student-0'}}
+          {...{ id: 'student-0' }}
           onClick={() => {
             state.addStudentVisible = true;
           }}
@@ -258,7 +266,7 @@ export default defineComponent({
           v-slots={{
             icon: () => (
               <>
-                <NImage class={styles.addBtnIcon} src={add}></NImage>
+                <NImage class={styles.addBtnIcon} previewDisabled src={add}></NImage>
               </>
             )
           }}>
@@ -266,6 +274,9 @@ export default defineComponent({
         </NButton>
         <div class={styles.tableWrap}>
           <NDataTable
+             v-slots={{
+              empty:()=><TheEmpty></TheEmpty>
+            }}
             class={styles.classTable}
             loading={state.loading}
             columns={columns()}
@@ -287,7 +298,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: {
@@ -125,7 +125,6 @@ export default defineComponent({
           previewDisabled
           src={studentTitle}></NImage>
         <div class={styles.addStudentInfo} id="preview-container">
-
           <NImage
             class={styles.studentInfoBg}
             previewDisabled
@@ -148,11 +147,17 @@ 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>
-                请扫描上方二维码 <span>完成报名</span>{' '}
+                请使用微信扫码<span>完成报名</span>{' '}
               </div>
             </div>
           </div>

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

@@ -4,6 +4,7 @@ import TheSearch from '@/components/TheSearch';
 import { NButton, NImage, NSpace, NSpin } from 'naive-ui';
 import { useRouter } from 'vue-router';
 import { api_musicSheetCategoriesPage, api_musicTagTree } from './api';
+import TheEmpty from '/src/components/TheEmpty';
 
 export default defineComponent({
   name: 'XiaokuAi',
@@ -87,7 +88,7 @@ export default defineComponent({
     const selectChildTag = (columnIndex: number, index: number) => {
       const oldActiveItem =
         data.tagChildren[columnIndex].list[
-          data.tagChildren[columnIndex].activeIndex
+        data.tagChildren[columnIndex].activeIndex
         ];
       const activeItem = data.tagChildren[columnIndex].list[index];
       if (oldActiveItem && oldActiveItem.id !== activeItem.id) {
@@ -113,7 +114,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 +122,7 @@ export default defineComponent({
                     <>
                       <NButton
                         round
-                        secondary
+                        secondary={data.tagActiveId === item.id ? false : true}
                         type={
                           data.tagActiveId === item.id ? 'primary' : 'default'
                         }
@@ -147,7 +148,9 @@ export default defineComponent({
                         <>
                           <NButton
                             round
-                            secondary
+                            secondary={
+                              column.activeIndex === index ? false : true
+                            }
                             type={
                               column.activeIndex === index
                                 ? 'primary'
@@ -174,7 +177,7 @@ export default defineComponent({
         </div>
         <NSpin show={data.loading}>
           <div class={styles.content}>
-            <NSpace size={[50, 40]}>
+            {data.list.length > 0 ? <NSpace size={[50, 40]}>
               {data.list.map((item: any, index: number) => {
                 return (
                   <div
@@ -207,7 +210,9 @@ export default defineComponent({
                   </div>
                 );
               })}
-            </NSpace>
+            </NSpace> : <TheEmpty></TheEmpty>}
+
+
           </div>
         </NSpin>
       </div>

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;