样式

src/pc/home/component/file-btn/index.tsx

@@ -52,7 +52,7 @@ export default defineComponent({
 				{
 					label: () => (
 						<div class={styles.dropItem}>
-							<img class={styles.dropIcon} src={getImage("icon_26_0.png")} />
+							<img class={styles.dropIcon} src={getImage("icon_26_6.png")} />
 							<span>导入</span>
 						</div>
 					),

src/pc/home/component/the-setting/index.tsx

@@ -105,7 +105,7 @@ export default defineComponent({
 			},
 		];
 		return () => (
-			<NModal unstableShowMask={false} autoFocus={false} show={props.show} onUpdate:show={(val) => emit("update:show", val)}>
+			<NModal autoFocus={false} show={props.show} onUpdate:show={(val) => emit("update:show", val)}>
 				<div class={styles.setbox}>
 					<div class={styles.head}>
 						<div>设置</div>

src/pc/home/index.module.less

@@ -7,23 +7,28 @@
     flex-direction: column;
     background-color: #fff;
     overflow: hidden;
-    :global{
-        .abcjs-note{
+
+    :global {
+        .abcjs-note {
             fill: currentColor !important;
-            &.note_selected{
+
+            &.note_selected {
                 fill: #0f81ff !important;
             }
         }
     }
 }
-.rhythm{
-    :global{
+
+.rhythm {
+    :global {
         svg {
+
             .abcjs-stem,
-            .abcjs-beam-elem{
+            .abcjs-beam-elem {
                 transform: translateY(3px);
             }
         }
+
         // svg .abcjs-staff{
         //     path:nth-child(1),
         //     path:nth-child(2),
@@ -368,4 +373,26 @@
     width: 100%;
     z-index: -10;
     pointer-events: none;
+}
+
+.tabsmodel {
+    :global {
+        .n-tabs-tab {
+            font-size: 15px;
+            color: #777777;
+        }
+
+        .n-tabs-tab--active {
+            color: #131415 !important;
+            font-weight: 600 !important;
+        }
+
+        .n-tabs-bar {
+            width: 21px !important;
+            height: 3px;
+            background: #198CFE;
+            border-radius: 2px;
+            transform: translateX(19px);
+        }
+    }
 }

src/pc/home/index.tsx

@@ -40,6 +40,9 @@ import {
 	NSelect,
 	NSpace,
 	NSpin,
+	NTab,
+	NTabPane,
+	NTabs,
 	useDialog,
 	useMessage,
 } from "naive-ui";
@@ -195,8 +198,6 @@ export default defineComponent({
 			multiSelect: false,
 			multiSelectList: [] as any[],
 			multilList: [] as any[],
-
-			isrhythm: false, // 是否节奏
 		});
 		const noteTypes = ABC_DATA.types.map((item) => item.value).filter(Boolean);
 		const accidentals = ABC_DATA.accidentals.map((item) => item.value).filter(Boolean);
@@ -1322,7 +1323,7 @@ export default defineComponent({
 				handleClearMultiSelect();
 			}
 			if (type === "setrhythm") {
-				abcData.abc.isrhythm = abcData.abc.isrhythm === "rhythm" ? "" : "rhythm";
+				abcData.abc.isrhythm = value;
 				console.log("🚀 ~ abcData.abc.isrhythm:", abcData.abc.isrhythm);
 				popup.moveKeyShow = false;
 				await handleResetRender();
@@ -2516,6 +2517,18 @@ export default defineComponent({
 								}}
 							</NPopover>
 
+							<div
+								class={styles.topBtn}
+								onClick={() => {
+									popup.jianpuShow = true;
+								}}
+							>
+								<div class={[styles.btnImg]}>
+									<img class={styles.topBtnIcon} src={getImage("icon_30.png")} />
+								</div>
+								<div>简谱</div>
+							</div>
+
 							<div class={styles.topLine}></div>
 
 							<div style={{ marginLeft: "auto" }} class={styles.topBtn}>
@@ -2581,6 +2594,17 @@ export default defineComponent({
 					</div>
 					<div class={styles.content}>
 						<div class={styles.slide}>
+							<NTabs
+								class={styles.tabsmodel}
+								v-model:value={abcData.abc.isrhythm}
+								justify-content="space-evenly"
+								onUpdate:value={(val) => {
+									handleChange({ type: "setrhythm", value: val || '' });
+								}}
+							>
+								<NTabPane name="" tab="制谱模式"></NTabPane>
+								<NTabPane name="rhythm" tab="节奏模式"></NTabPane>
+							</NTabs>
 							<Collapse v-model={data.slide} elevation={false} divider={false}>
 								<CollapseItem title="音符时值" name="note">
 									<div class={styles.wrapBox}>
@@ -2696,34 +2720,6 @@ export default defineComponent({
 										</div>
 									</div>
 								</CollapseItem>
-								<CollapseItem title="模式" name="staffmodel">
-									<div class={styles.wrapBox}>
-										<div
-											class={styles.topBtn}
-											onClick={() => {
-												handleChange({ type: "setrhythm", value: "" });
-											}}
-										>
-											<div
-												class={[styles.btnImg, abcData.abc.isrhythm === "rhythm" && styles.btnImgActive]}
-											>
-												{/* <TheIcon iconClassName={ABC_DATA.dynamics[8].icon} size={["2em", "2em"]} /> */}
-											</div>
-											<div>节奏模式</div>
-										</div>
-										<div
-											class={styles.topBtn}
-											onClick={() => {
-												popup.jianpuShow = true;
-											}}
-										>
-											<div class={[styles.btnImg]}>
-												{/* <TheIcon iconClassName={ABC_DATA.dynamics[8].icon} size={["2em", "2em"]} /> */}
-											</div>
-											<div>预览简谱</div>
-										</div>
-									</div>
-								</CollapseItem>
 								<CollapseItem title="反复与跳跃" name="repeat">
 									<div class={styles.wrapBox}>
 										{ABC_DATA.repeat.map((item) => (
@@ -2940,7 +2936,7 @@ export default defineComponent({
 						hiddenIndex: true,
 						showTitle: true,
 						showCreator: true,
-						jianpu: true
+						jianpu: true,
 					})}
 				/>
 			</>

vite.config.ts

@@ -48,7 +48,8 @@ export default defineConfig({
 		// https: true,
 		proxy: {
 			"^/edu-app/.*": {
-				target: "https://test.lexiaoya.cn",
+				// target: "https://test.lexiaoya.cn",
+				target: "https://dev.kt.colexiu.com",
 				changeOrigin: true,
 				// rewrite: (path) => path.replace(/^\/edu-app/, ""),
 			},