fix:学生小酷AI：曲谱列表样式

src/components/m-search/index.tsx

@@ -19,6 +19,10 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    clearable: {
+      type: Boolean,
+      default: true
+    },
     autofocus: {
       // ios系统不支持
       type: Boolean,
@@ -41,7 +45,7 @@ export default defineComponent({
       default: 'default'
     }
   },
-  emits: ['search'],
+  emits: ['search', 'focus', 'blur'],
   setup(props, { slots, emit }) {
     const forms = reactive({
       search: props.modelValue || ''
@@ -62,6 +66,7 @@ export default defineComponent({
         disabled={props.disabled}
         autofocus={props.autofocus}
         autocomplete="off"
+        clearable={props.clearable}
         v-model={forms.search}
         clearTrigger="always"
         onClear={() => {
@@ -69,6 +74,8 @@ export default defineComponent({
           forms.search = '';
           emit('search', forms.search);
         }}
+        onFocus={() => emit('focus')}
+        onBlur={() => emit('blur', forms.search)}
         onSearch={() => emit('search', forms.search)}>
         {{
           left: () => slots.left && slots.left(),

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

@@ -113,6 +113,7 @@
         opacity: 0;
         transition: opacity .3s;
     }
+
     .typeIcon[loaded="true"] {
         opacity: 1;
     }
@@ -146,7 +147,24 @@
         display: none;
     }
 }
-
+.searchNotice{
+    position: fixed;
+    padding: 0;
+    pointer-events: none;
+    :global{
+        .van-notice-bar{
+            padding: 0;
+            height: 100%;
+        }
+    }
+}
+.searchNoticeShow{
+    :global{
+        .van-field__control{
+            opacity: 0;
+        }
+    }
+}
 .musicItem {
     position: relative;
     display: flex;
@@ -158,6 +176,7 @@
     padding: 4px;
     transition: all .3s;
     overflow: hidden;
+    --van-notice-bar-text-color: #333;
 
     &.disableNotic {
         :global {
@@ -173,9 +192,11 @@
         background: linear-gradient(180deg, #FFFFFF 0%, #BFE1FF 100%);
         transform: scale(1.05);
         box-shadow: 0px 2px 4px 0px rgba(73, 159, 228, 1);
-        :global{
-            .van-notice-bar{
-                color: #1CACF1 !important;
+        --van-notice-bar-text-color: rgba(73, 159, 228, 1);
+
+        :global {
+            .van-notice-bar__content {
+                transition-property: transform;
             }
         }
     }
@@ -191,6 +212,7 @@
         opacity: 0;
         transition: opacity .3s;
     }
+
     .musicAvtor[loaded="true"] {
         opacity: 1;
     }
@@ -277,6 +299,7 @@
     background: #fff;
     background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #C1EEFF 100%);
     border-radius: 0 0 18px 18px;
+
     &>img {
         margin: 0 4px;
         height: 30px;
@@ -312,18 +335,21 @@
         opacity: 1;
     }
 }
+
 .loadingWrap {
     display: flex;
     justify-content: center;
     min-height: 80Px;
 }
-.empty{
-    :global{
-        .van-empty__image{
+
+.empty {
+    :global {
+        .van-empty__image {
             width: 50%;
             height: initial;
         }
-        .van-empty__description{
+
+        .van-empty__description {
             color: #fff;
         }
     }

src/views/co-ai/index.tsx

@@ -62,7 +62,15 @@ export default defineComponent({
       /** 音乐列表 */
       musics: [] as any[],
       loading: true,
-      finshed: false
+      finshed: false,
+
+      searchNoticeShow: false,
+      searchNotice: {
+        left: '',
+        top: '',
+        width: '',
+        height: ''
+      }
     });
     const downRef = ref();
     // 返回
@@ -165,6 +173,16 @@ export default defineComponent({
       getMusicList();
     };
 
+    const setSearchBox = () => {
+      const el = document.querySelector('.searchNotice .van-field__control');
+      if (el) {
+        const rect = el.getBoundingClientRect();
+        data.searchNotice.left = rect.x + 'px';
+        data.searchNotice.top = rect.y + 'px';
+        data.searchNotice.width = rect.width + 'px';
+        data.searchNotice.height = rect.height + 'px';
+      }
+    };
     onMounted(async () => {
       await getMusicSheetCategories();
       getMusicList();
@@ -181,6 +199,7 @@ export default defineComponent({
       listenerMessage('webViewOnResume', () => {
         handleReset();
       });
+      setSearchBox();
     });
     return () => (
       <div class={styles.container}>
@@ -220,9 +239,20 @@ export default defineComponent({
             </div>
             <div class={styles.center}>
               <MSearch
+                class={["searchNotice", data.searchNoticeShow ? styles.searchNoticeShow : '']}
                 shape="round"
                 background="transparent"
+                clearable={false}
                 placeholder="请输入曲目名称"
+                onFocus={() => (data.searchNoticeShow = false)}
+                onBlur={(val) => {
+                  musicForms.keyword = val;
+                  requestAnimationFrame(() => {
+                    requestAnimationFrame(() => {
+                      data.searchNoticeShow = true;
+                    });
+                  });
+                }}
                 onSearch={val => {
                   musicForms.keyword = val;
                   handleReset();
@@ -251,7 +281,6 @@ export default defineComponent({
                         <div class={styles.musicName}>
                           <NoticeBar
                             text={item.musicSheetName}
-                            color="#333"
                             class={styles.noticeBar}
                             background="none"
                           />
@@ -331,6 +360,16 @@ export default defineComponent({
             </div>
           </div>
         </div>
+
+        {data.searchNotice.width && data.searchNoticeShow && (
+          <div class={styles.searchNotice} style={{ ...data.searchNotice }}>
+            <NoticeBar
+              text={musicForms.keyword || '水电费第三方是发鼎折覆餗'}
+              color="#333"
+              background="none"
+            />
+          </div>
+        )}
       </div>
     );
   }

src/views/courseware-list/index.tsx

@@ -117,6 +117,7 @@ export default defineComponent({
       }
     };
     const getData = () => {
+      data.list = []
       if (data.tab === 'all') {
         getList();
       }