feat: 大雅金唐类目下的曲目支持自定义每行小节数

src/pages/detail/setting-state.ts

@@ -1,6 +1,7 @@
 import { reactive, watch } from 'vue'
 import storejs from 'store'
 import { IMusicScore } from '/osmd-extended/src'
+import qs from 'query-string'
 
 export interface SettingState {
   sett: iSett
@@ -29,6 +30,10 @@ export type iSett = {
   type: IMusicScore
   /** 是否固定调 */
   keySignature: boolean
+  /** 自定义每行小节数开关 */
+  openCustomNodule: boolean
+  /** 自定义每行小节数开关 */
+  customNoduleNum: number
 }
 
 export type IDifficulty = 'BEGINNER' | 'ADVANCED' | 'PERFORMER'
@@ -45,6 +50,7 @@ export type iEva = {
   reactionTimeMs: number
 }
 
+const search = qs.parse(location.search);
 const saveSetting = storejs.get('setting')
 
 let initState: SettingState = {
@@ -58,7 +64,9 @@ let initState: SettingState = {
     hertz: 442,
     scoreSize: 'middle',
     type: 'staff',
-    keySignature: false
+    keySignature: false,
+    openCustomNodule: false,
+    customNoduleNum: 4,
   },
   eva: {
     difficulty: 'ADVANCED',
@@ -68,10 +76,14 @@ let initState: SettingState = {
   },
 }
 if (saveSetting) {
+  const customNoduleInfo = JSON.parse(localStorage.getItem('customNoduleInfo')) || []
+  const matchMusic = customNoduleInfo.find((n: any) => n.id === search?.id)
+  const defaultNum = matchMusic ? matchMusic.customNum : 4
   // 如果有保存的设置，则使用保存的设置
   // 酷乐秀强制440，评测时会重新按照此处配置计算频率
   initState.eva = { ...initState.eva, ...saveSetting.eva }
-  initState.sett = { ...initState.sett, ...saveSetting.sett };
+  initState.sett = { ...initState.sett, ...saveSetting.sett, ...{customNoduleNum: defaultNum} };
+
   (window as any).sett = initState.sett
 }
 

src/subpages/colexiu/popups/setting/index.module.less

@@ -188,3 +188,18 @@
   }
 }
 
+.columnItem {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  .columnBtn {
+    word-break: keep-all;
+    margin-left: 6px;
+    padding: 2px 6px;
+    border-radius: 8px;
+    background-color: var(--van-primary-color);
+    color: #fff;
+    font-size: 6px;
+    cursor: pointer;
+  }
+}

src/subpages/colexiu/popups/setting/sett.tsx

@@ -1,5 +1,5 @@
 import { defineComponent, Ref, ref } from 'vue'
-import { Button, Cell, CellGroup, Col, Dialog, Divider, NoticeBar, Radio, RadioGroup, Row, Switch, Toast } from 'vant'
+import { Button, Cell, CellGroup, Col, Dialog, Divider, NoticeBar, Radio, RadioGroup, Row, Switch, Toast, Field } from 'vant'
 import InfoIcon from './info.svg'
 import iconDown from './icons/down.svg'
 import iconTv from './icons/tv.png'
@@ -113,6 +113,22 @@ export default defineComponent({
       }
     }
 
+    // 自定义每行小节数量
+    const confirmCustomNum = () => {
+      let customNoduleInfo = JSON.parse(localStorage.getItem('customNoduleInfo')) || []
+      const matchIdx = customNoduleInfo.findIndex((n: any) => n.id === detailState.activeDetail?.examSongId)
+      if (matchIdx > -1) {
+        customNoduleInfo[matchIdx].customNum = Number(SettingState.sett.customNoduleNum)
+      } else {
+        customNoduleInfo.push({
+          id: detailState.activeDetail?.examSongId,
+          customNum: Number(SettingState.sett.customNoduleNum)
+        })
+      }
+      localStorage.setItem('customNoduleInfo', JSON.stringify(customNoduleInfo))
+      window.location.reload()
+    }
+
     return () => {
       return (
         <>
@@ -128,6 +144,32 @@ export default defineComponent({
               <Cell center border={false} title="护眼模式">
                 <Switch v-model={SettingState.sett.eyeProtection} {...switchProps}></Switch>
               </Cell>
+              {/** 大雅金唐曲目自定义小节数 */}
+              {
+                detailState.isDaYaCategory && 
+                <>
+                  <Cell center border={false} title="自定义每行小节数">
+                    <Switch v-model={SettingState.sett.openCustomNodule} {...switchProps}></Switch>
+                  </Cell>
+                  {
+                    <div class={styles.columnItem}>
+                      <Cell center border={false} title="每行小节数">
+                        <Field
+                          type="number"
+                          disabled={!SettingState.sett.openCustomNodule}
+                          value={SettingState.sett.customNoduleNum}
+                          v-model={SettingState.sett.customNoduleNum}
+                          inputAlign="right"
+                          maxlength={2}
+                          formatter={(value) => value.replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
+                        />
+                      </Cell>  
+                      <div class={styles.columnBtn} onClick={confirmCustomNum}>确认</div>
+                    </div>
+                  }
+                </>
+              }
+
               <Divider />
               {/* <Cell center border={false} title="乐谱大小">
                 <div style={{ display: 'flex' }}>

src/subpages/colexiu/uses/use-app.ts

@@ -184,8 +184,11 @@ export const useDetail = (id: number | string): [Ref<ShaeetStatusType>, Ref<Musi
       // 大雅金唐类目，#9248 优化
       detailState.isDaYaCategory = daYaClassids.includes(res.data.musicSheetCategoriesId)
       if (detailState.isDaYaCategory) {
-        ;(window as any).customSectionAmount = true
-        setGlobalData('wrapNum', 4)
+        ;(window as any).customSectionAmount = SettingState.sett.openCustomNodule
+        const customNoduleInfo = JSON.parse(localStorage.getItem('customNoduleInfo')) || []
+        const matchMusic = customNoduleInfo.find((n: any) => n.id === id)
+        const xjNum = matchMusic ? matchMusic.customNum : 4
+        setGlobalData('wrapNum', xjNum)
       }
       detailState.subjectId = Number(musicInfo.musicSubject)
       // 打击乐声部下的曲目，需要合并展示所有分轨