update: 修改UI逻辑：绘制出截取框后，置灰顶部导航栏&关闭侧面板

packages/core/src/annotation/layer.js

@@ -90,7 +90,7 @@ class ComPDFAnnotationLayer {
     if (!tool || markup.includes(tool)) {
       document.querySelector('.document').classList.remove('annotation-edit')
     }
-    if (markup.includes(tool)) {
+    if (markup.includes(tool) || tool === 'cropPage') {
       if (this.freetextManager) {
         this.freetextManager.reset()
       }

packages/core/src/annotation/paint/freetext.js

@@ -50,7 +50,7 @@ export default class Freetext {
   reset() {
     const freetextElement = this.freetextElement
 
-    this.svgElement.style.cursor = 'default'
+    this.svgElement.style.cursor = 'auto'
     this.container.removeEventListener('click', this.onClick)
     if (freetextElement) {
       this.handleFreetext()

packages/core/src/annotation/paint/link.js

@@ -58,7 +58,7 @@ export default class PaintLink {
     if (toolType === this._tool) return
     if (!toolType) {
       this.reset()
-      this.svgElement.style.cursor = 'default'
+      this.svgElement.style.cursor = 'inherit'
       this.container.style.touchAction = ''
 
       this.container.removeEventListener('mousedown', this.onMousedown)

packages/core/src/annotation/paint/shape.js

@@ -76,7 +76,7 @@ export default class PaintShape {
     this.initEndPoint = null
     this.shapeEle = null
     this.svgElement.innerHTML = ''
-    this.svgElement.style.cursor = 'default'
+    this.svgElement.style.cursor = 'inherit'
     this.container.style.touchAction = ''
     this.path = []
     document.removeEventListener('mousemove', this.onMousemove)

packages/core/src/annotation/paint/text.js

@@ -58,7 +58,7 @@ export default class Text {
     this.start = null
     this.end = null
 
-    this.svgElement.style.cursor = 'default'
+    this.svgElement.style.cursor = 'inherit'
     this.container.removeEventListener('click', this.onClick)
     const textElement = this.textElement
     const textEditorElement = this.textEditorElement

packages/webview/src/components/Header/Header.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="header">
+  <div class="header" :class="{ disabled: isDisabledHeader }">
     <HeaderItems :items="items" :rightItems="rightItems" :toolMode="toolMode" />
   </div>
   <Toolbar :toolMode="toolMode" />
@@ -15,6 +15,7 @@ const items = useViewer.getActiveHeaderItems
 const rightItems = useViewer.getActiveRightHeaderItems
 const toolMode = computed(() => useViewer.getToolMode)
 const signatureVerify = computed(() => useViewer.getSignatureVerify)
+const isDisabledHeader = computed(() => useViewer.getDisabledHeader)
 </script>
 
 <style lang="scss">
@@ -31,6 +32,11 @@ const signatureVerify = computed(() => useViewer.getSignatureVerify)
     z-index: 4;
     overflow-x: auto;
     overflow-y: hidden;
+
+    &.disabled {
+      opacity: 0.5;
+      pointer-events: none;
+    }
   }
   @media screen and (max-width: 767.9px) {
     .header {

packages/webview/src/components/LeftPanel/LeftPanel.vue

@@ -36,13 +36,22 @@
 </template>
 
 <script setup>
-  import { computed } from 'vue'
+  import { computed, watch } from 'vue'
   import { useViewerStore } from '@/stores/modules/viewer'
+  import { useDocumentStore } from '@/stores/modules/document'
 
   const useViewer = useViewerStore()
+  const useDocument = useDocumentStore()
 
   const activePanelTab = computed(() => useViewer.getActiveElementTab('leftPanelTab'))
   const isOpen = computed(() => useViewer.isElementOpen('leftPanel'))
+  const activeTool = computed(() => useDocument.getActiveTool)
+
+  watch(isOpen, (newValue, oldValue) => {
+    if (newValue && activeTool.value === 'cropPage') {
+      useDocument.setToolState('')
+    }
+  })
 </script>
 
 <style lang="scss">

packages/webview/src/components/Popups/CropPagePopup.vue

@@ -44,10 +44,13 @@ const updatePopupPosition = async (data) => {
 
   await nextTick()
 
+  useViewer.setDisableHeader(showPopup.value)
+  if (showPopup.value) useViewer.resetPanels()
+
   if (rect && showPopup.value) {
     const popup = cropPagePopupRef.value?.children[0]
     if (!popup) return
-    
+
     cropRect = rect
 
     // 计算弹窗的初始位置

packages/webview/src/components/RightPanelPageMode/RightPanelPageMode.vue

@@ -37,16 +37,25 @@
 </template>
 
 <script setup>
-  import { computed } from 'vue'
+  import { computed, watch } from 'vue'
   import { useViewerStore } from '@/stores/modules/viewer'
+  import { useDocumentStore } from '@/stores/modules/document'
   import core from '@/core'
 
   const useViewer = useViewerStore()
+  const useDocument = useDocumentStore()
   const isOpen = computed(() => useViewer.isElementOpen('pageModePanel'))
   
   const scrollMode = computed(() => useViewer.getScrollMode)
   const pageMode = computed(() => useViewer.getPageMode)
   const themeMode = computed(() => useViewer.getThemeMode)
+  const activeTool = computed(() => useDocument.getActiveTool)
+
+  watch(isOpen, (newValue, oldValue) => {
+    if (newValue && activeTool.value === 'cropPage') {
+      useDocument.setToolState('')
+    }
+  })
 
   const handleScrollMode = (mode, modeNum) => {
     useViewer.setScrollMode(mode)

packages/webview/src/components/Toolbar/Toolbar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="toolbar" :class="{ hidden: ['view', 'document'].includes(toolMode) || (toolMode === 'compare' && compareStatus !== 'finished'), security: toolMode === 'security', editor: toolMode === 'editor'}">
+  <div class="toolbar" :class="{ hidden: ['view', 'document'].includes(toolMode) || (toolMode === 'compare' && compareStatus !== 'finished'), security: toolMode === 'security', editor: toolMode === 'editor', disabled: isDisabledHeader}">
     <template v-for="(item, index) in tools[toolMode]" :key="`${item.type}-${item.dataElement || index}`">
       <!-- Annotation -->
       <Annotate v-if="item.type === 'annotation'" :item="item.tools" />
@@ -35,6 +35,7 @@ defineProps(['toolMode'])
 const useViewer = useViewerStore()
 const tools = useViewer.getToolItems
 const compareStatus = computed(() => useViewer.getCompareStatus)
+const isDisabledHeader = computed(() => useViewer.getDisabledHeader)
 </script>
 
 <style lang="scss" scoped>
@@ -50,9 +51,15 @@ const compareStatus = computed(() => useViewer.getCompareStatus)
   opacity: 1;
   overflow-x: auto;
   overflow-y: hidden;
+  
   &.hidden {
     display: none;
   }
+
+  &.disabled {
+    opacity: 0.5;
+    pointer-events: none;
+  }
 }
 @media screen and (max-width: 480px) {
   .toolbar {

packages/webview/src/stores/modules/viewer.js

@@ -1,5 +1,6 @@
 import { defineStore } from 'pinia'
 import core from '@/core'
+import CropPageButton from '@/components/CropPageButton/CropPageButton.vue'
 
 export const useViewerStore = defineStore({
   id: 'viewer',
@@ -385,7 +386,8 @@ export const useViewerStore = defineStore({
     cropPagePopup: [
       { type: 'cropPage', dataElement: 'cropPageButton' },
       { type: 'close', dataElement: 'exitCroppingButton' }
-    ]
+    ],
+    isDisabledHeader: false
   }),
   getters: {
     getLanguage () {
@@ -496,6 +498,9 @@ export const useViewerStore = defineStore({
     getPopupItems (state) {
       return (dataElement) => state[dataElement]
     },
+    getDisabledHeader () {
+      return this.isDisabledHeader
+    }
   },
   actions: {
     resetSetting () {
@@ -677,5 +682,8 @@ export const useViewerStore = defineStore({
       if (key) return this.$state[key];
       return this.$state;
     },
+    setDisableHeader (value) {
+      this.isDisabledHeader = value
+    }
   }
 })