feat: 样式调整、时间交互

form/index.css

@@ -534,12 +534,12 @@ html, body {
 
 .wavesurfer-handle-start {
   left: 0 !important;
-  background-color: rgba(0, 255, 0, 0.8) !important;
+  /* background-color: rgba(0, 255, 0, 0.8) !important; */
 }
 
 .wavesurfer-handle-end {
   right: 0 !important;
-  background-color: rgba(255, 0, 0, 0.8) !important;
+  /* background-color: rgba(255, 0, 0, 0.8) !important; */
 }
 
 /* 波形图的进度条样式 */
@@ -579,22 +579,22 @@ html, body {
 }
 
 .wavesurfer-region[data-id^="group-"] .wavesurfer-handle-start {
-  background-color: rgba(0, 255, 0, 0.8) !important;
+  /* background-color: rgba(0, 255, 0, 0.8) !important; */
 }
 
 .wavesurfer-region[data-id^="group-"] .wavesurfer-handle-end {
-  background-color: rgba(255, 0, 0, 0.8) !important;
+  /* background-color: rgba(255, 0, 0, 0.8) !important; */
 }
 
 /* 锁定状态下的标记样式 */
 .wavesurfer-region[data-id$="-start"] {
-  background-color: rgba(0, 255, 0, 0.8) !important;
+  /* background-color: rgba(0, 255, 0, 0.8) !important; */
   width: 1px !important;
   z-index: 5 !important;
 }
 
 .wavesurfer-region[data-id$="-end"] {
-  background-color: rgba(255, 0, 0, 0.8) !important;
+  /* background-color: rgba(255, 0, 0, 0.8) !important; */
   width: 1px !important;
   z-index: 5 !important;
 }
@@ -615,11 +615,11 @@ html, body {
 }
 
 .page-locked .wavesurfer-region[data-id^="group-"] .wavesurfer-handle-start {
-  background-color: rgba(0, 255, 0, 0.8) !important;
+  /* background-color: rgba(0, 255, 0, 0.8) !important; */
 }
 
 .page-locked .wavesurfer-region[data-id^="group-"] .wavesurfer-handle-end {
-  background-color: rgba(255, 0, 0, 0.8) !important;
+  /* background-color: rgba(255, 0, 0, 0.8) !important; */
 }
 
 #waveform ::part(region-handle-start) {
@@ -721,4 +721,28 @@ html, body {
   color: #c0c4cc;
   border-color: #ebeef5;
   background-color: #fff;
-}
\ No newline at end of file
+}
+
+/* 极细音频标记线样式 */
+.custom-audio-marker {
+  position: relative !important;
+  background: transparent !important;
+  width: 0 !important;
+  min-width: 0 !important;
+  max-width: none !important;
+  pointer-events: none !important;
+  border: none !important;
+  box-shadow: none !important;
+}
+.custom-audio-marker::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  top: 0;
+  height: 128px;
+  width: 1px;
+  background: currentColor;
+  z-index: 1;
+  pointer-events: none;
+}
+.custom-audio-marker-blue { color: #00ff00 !important; }
\ No newline at end of file

form/index.html

@@ -139,6 +139,7 @@
                 <el-form-item label="页面时间">
                   <el-col :span="11">
                     <el-input
+                      :disabled="true"
                       v-model="currentPage.start"
                       size="small"
                       placeholder="开始时间"
@@ -157,6 +158,7 @@
                   <el-col class="line" :span="2">-</el-col>
                   <el-col :span="11">
                     <el-input
+                      :disabled="true"
                       v-model="currentPage.end"
                       size="small"
                       placeholder="结束时间"
@@ -205,7 +207,7 @@
                   <el-form-item label="时间范围">
                     <el-col :span="11">
                       <el-input
-                        :disabled="!isPageLocked"
+                        :disabled="true"
                         v-model="currentGroup.start"
                         size="small"
                         placeholder="开始时间">
@@ -223,7 +225,7 @@
                     <el-col class="line" :span="2">-</el-col>
                     <el-col :span="11">
                       <el-input
-                        :disabled="!isPageLocked"
+                        :disabled="true"
                         v-model="currentGroup.end"
                         size="small"
                         placeholder="结束时间">

form/index.js

@@ -1402,9 +1402,10 @@ new Vue({
           id: `${pageRegionId}-start`,
           start: this.lockedPageStart,
           end: this.lockedPageStart + 0.000001,
-          color: 'rgba(0, 255, 0, 0.8)',
+          color: 'transparent',
           drag: false,
-          resize: false
+          resize: false,
+          zIndex: -1
         });
 
         // 创建结束标记（红色竖线）
@@ -1412,26 +1413,27 @@ new Vue({
           id: `${pageRegionId}-end`,
           start: this.lockedPageEnd - 0.000001,
           end: this.lockedPageEnd,
-          color: 'rgba(255, 0, 0, 0.8)',
+          color: 'transparent',
           drag: false,
-          resize: false
+          resize: false,
+          zIndex: -1
         });
 
         if (startMarker && endMarker) {
           this.audioRegions[`${pageRegionId}-start`] = startMarker;
           this.audioRegions[`${pageRegionId}-end`] = endMarker;
           
-          // 添加样式以确保1px宽度
+          // 使用border-left创建细线
           this.$nextTick(() => {
             const startElement = startMarker.element;
             const endElement = endMarker.element;
             
             if (startElement) {
-              startElement.style.transform = 'translateX(-0.5px)';
+              startElement.classList.add('custom-audio-marker', 'custom-audio-marker-blue');
             }
             
             if (endElement) {
-              endElement.style.transform = 'translateX(-0.5px)';
+              endElement.classList.add('custom-audio-marker', 'custom-audio-marker-blue');
             }
           });
         }
@@ -1450,18 +1452,18 @@ new Vue({
               minLength: 0.1,
               maxLength: Infinity,
               handleStyle: {
-                left: {
-                  backgroundColor: 'rgba(0, 255, 0, 0.8)',
-                  width: '1px',
-                  height: '100%',
-                  cursor: 'ew-resize'
-                },
-                right: {
-                  backgroundColor: 'rgba(255, 0, 0, 0.8)',
-                  width: '1px',
-                  height: '100%',
-                  cursor: 'ew-resize'
-                }
+                // left: {
+                //   backgroundColor: 'rgba(0, 255, 0, 0.8)',
+                //   width: '1px',
+                //   height: '100%',
+                //   cursor: 'ew-resize'
+                // },
+                // right: {
+                //   backgroundColor: 'rgba(255, 0, 0, 0.8)',
+                //   width: '1px',
+                //   height: '100%',
+                //   cursor: 'ew-resize'
+                // }
               }
             });