feat: 谱面编辑模块改版

src/page-instrument/view-detail/index.tsx

@@ -519,6 +519,7 @@ export default defineComponent({
           "--detailDataPaddingLeft": detailData.paddingLeft,
           paddingLeft: detailData.paddingLeft,
           background: state.setting.camera && state.modeType === 'evaluating' ? `rgba(${state.setting.eyeProtection ? "253,244,229" : "255,255,255"} ,${state.setting.cameraOpacity / 100}) !important` : "",
+          paddingTop: query.isMove == "1" ? "60px" : "inherit"
         }}
       >
         {bgJsonData.value ? 

src/view/plugins/move-music-score/index.module.less

@@ -54,4 +54,84 @@
     cursor: pointer;
     transition: all 0.5s;
     transform: rotate(180deg);
+}
+
+.editToolBox {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    background: #132440;
+    z-index: 999999;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    padding: 14px 30px;
+    .editItem {
+        display: flex;
+        align-items: center;
+        padding: 5px 12px;
+        background: rgba(255,255,255,0.2);
+        border-radius: 20px;
+        margin-left: 18px;
+        cursor: pointer;
+        &:active {
+            opacity: .5;
+        }
+        img {
+            width: 18px;
+            height: 18px;
+            margin-right: 6px;
+        }
+        span {
+            font-size: 14px;
+            color: #fff;
+        }
+    }
+    .extraItem {
+        margin-left: 18px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 5px 12px;
+        background: rgba(255,255,255,0.2);
+        border-radius: 20px;
+        position: relative;
+        width: 76px;
+        box-sizing: border-box;
+        img {
+            width: 18px;
+            height: 18px;
+            cursor: pointer;
+            &:active {
+                opacity: .5;
+            }
+        }
+        &::before {
+            content: "";
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%,-50%);
+            width: 1px;
+            height: 20px;
+            background: rgba(255,255,255,0.3);
+            z-index: 1;
+        }
+    }
+    .disabled {
+        opacity: .5;
+        pointer-events: none;
+    }
+}
+
+.itemDisabled {
+    .editItem {
+        opacity: .5;
+        pointer-events: none;
+    }
+    .canEdit {
+        opacity: 1;
+        pointer-events: visible;
+    }
 }

src/view/plugins/move-music-score/index.tsx

@@ -1,4 +1,4 @@
-import { Row, showToast } from "vant";
+import { Row, showToast, showConfirmDialog } from "vant";
 import { defineComponent, onMounted, reactive, nextTick, ref } from "vue";
 import state from "/src/state";
 import request from "/src/utils/request";
@@ -10,6 +10,14 @@ import "@varlet/ui/es/button-group/style";
 import "@varlet/ui/es/switch/style";
 import { storeData } from "/src/store";
 import rightHideIcon from './image/right_hide_icon.png';
+import editIcon from './image/edit.png';
+import editCloseIcon from './image/edit_close.png';
+import editSaveIcon from './image/edit_save.png';
+import editPreIcon from './image/edit_pre.png';
+import editDeleteIcon from './image/edit_delete.png';
+import editResetIcon from './image/edit_reset.png';
+import editReduceIcon from './image/edit_reduce.png';
+import editAddIcon from './image/edit_add.png';
 
 let extStyleConfigJson: any = {};
 const clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
@@ -160,6 +168,21 @@ function getBox(ele: SVGAElement) {
 	};
 }
 
+// 切换开关
+const switchMoveState = () => {
+	// 如果编辑过，没有保存，点击取消状态，需要提醒用户是否取消
+	if (moveData.open && undoData.undoList.length) {
+		showConfirmDialog({
+			title: "温馨提示",
+			message: "您有新的修改还未保存，取消后本次编辑的内容将不会保存",
+		}).then(() => {
+			moveData.open = false
+		});
+	} else {
+		moveData.open = !moveData.open
+	}
+}
+
 // 过滤数据
 export const filterMoveData = async () => {
 	const examSongId = state.examSongId;
@@ -217,6 +240,8 @@ export const filterMoveData = async () => {
 		});
 		if (res && res.code == 200) {
 			showToast("保存成功");
+			undoData.undoList = [];
+			undoData.activeItem = null;
 		}
 		clearActiveModel();
 	}
@@ -552,7 +577,7 @@ export default defineComponent({
 		return () => (
 			<div class={[moveData.open ? "" : styles.moveDisabled]}>
 				<div id="toolBox">
-					<div class={[styles.toolBox, !showToolBox.value && styles.hideTool]} >
+					{/* <div class={[styles.toolBox, !showToolBox.value && styles.hideTool]} >
 						<Switch v-model={moveData.open} />
 						{moveData.open && (
 							<>
@@ -562,12 +587,6 @@ export default defineComponent({
 										<Button onClick={() => handleAddAndSub('sub')}>减</Button>
 									</ButtonGroup>
 								)}
-								{/* <ButtonGroup size="small">
-									
-									<Button>
-										<Icon name="arrow-down" style={{ transform: "rotate(-90deg)" }} />
-									</Button>
-								</ButtonGroup> */}
 								<Button size="small" onClick={handleUndo} disabled={undoData.undoList.length ? false : true}>
 									<Icon name="arrow-down" style={{ transform: "rotate(90deg)" }} />
 								</Button>
@@ -593,7 +612,37 @@ export default defineComponent({
 							class={[styles.rightHideIcon, !showToolBox.value ? styles.rightIconShow : '']} 
 							src={rightHideIcon}
 							onClick={() => showToolBox.value = true } />
-					}  
+					}   */}
+					<div class={[styles.editToolBox, !moveData.open && styles.itemDisabled]}>					
+						<div class={[styles.editItem, styles.canEdit]} onClick={switchMoveState}>
+							<img src={moveData.open ? editCloseIcon : editIcon} />
+							<span>{moveData.open ? '取消' : '编辑'}</span>
+						</div>
+						<div class={styles.editItem} onClick={filterMoveData}>
+							<img src={editSaveIcon} />
+							<span>保存</span>
+						</div>
+						<div class={[styles.editItem, !undoData.undoList.length && styles.disabled]} onClick={handleUndo}>
+							<img src={editPreIcon} />
+							<span>撤回</span>
+						</div>
+						<div class={[styles.editItem, moveData.activeIndex <= -1 && styles.disabled]} onClick={handleDeleteMoveNote}>
+							<img src={editDeleteIcon} />
+							<span>{moveData.modelList[moveData.activeIndex]?.isDelete ? '回显' : '删除'}</span>
+						</div>
+						<div class={styles.editItem} onClick={resetMoveNote}>
+							<img src={editResetIcon} />
+							<span>重置</span>
+						</div>
+						{
+							moveData.tool.isAddAndSub && 
+							<div class={styles.extraItem}>
+								<img src={editReduceIcon} onClick={() => handleAddAndSub('sub')} />
+								<img src={editAddIcon} onClick={() => handleAddAndSub('add')} />
+							</div>								
+						}
+																							
+					</div>
 				</div>
 				{moveData.modelList.map((item: any, index: number) => {
 					return (