add: 添加离线版提示

packages/webview/locales/en.json

@@ -152,6 +152,11 @@
     "listBoxTip": "Select an item in the item list to make it the default option."
   },
 
+  "prevent": {
+    "title": "Not Available in Server-Backed",
+    "description": "Content Editor is only available on Standalone. Change to Standalone to edit PDF content."
+  },
+
   "passwordDialog": {
     "enterPwd": "Enter the Password to View the Document",
     "enterPwdPlaceholder": "Please Enter the Password",

packages/webview/locales/zh-CN.json

@@ -152,6 +152,11 @@
     "listBoxTip": "从项目清单中选择一个选项，作为默认选项。"
   },
 
+  "prevent": {
+    "title": "不可用",
+    "description": "在线版不支持内容编辑，请切换到离线版模式使用内容编辑。"
+  },
+
   "passwordDialog": {
     "enterPwd": "输入密码查看文档",
     "enterPwdPlaceholder": "请输入密码",

packages/webview/src/components/Dialogs/LanguageDialog.vue

@@ -50,7 +50,7 @@
 </script>
 
 <style lang="scss">
-  .language-setting-popup {    
+  .language-setting-popup {
     position: fixed;
     left: 0;
     bottom: 0;
@@ -116,4 +116,4 @@
       background-color: var(--c-popup-bg-active);
     }
   }
-</style>
+</style>

packages/webview/src/components/Dialogs/PreventDialog.vue

@@ -0,0 +1,89 @@
+<template>
+  <div v-if="isModalVisible" class="edit-dialog">
+    <div class="edit">
+      <div class="close"><Close @click="handleClose" /></div>
+      <div class="warning"><Warning /></div>
+      <div class="title">{{ $t('prevent.title') }}</div>
+      <div class="des">{{ $t('prevent.description') }}</div>
+      <div class="button" @click="handleClose">{{ $t('ok') }}</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { computed } from "vue"
+  import { useViewerStore } from '@/stores/modules/viewer'
+
+  const useViewer = useViewerStore()
+
+  const isModalVisible = computed(() => useViewer.isElementOpen('preventDialog'))
+  const handleClose = () => {
+    useViewer.closeElement('preventDialog')
+  }
+</script>
+
+<style lang="scss">
+  .edit-dialog {
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    z-index: 100;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.3);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .edit {
+      width: 100%;
+      max-width: 284px;
+      background-color: var(--c-side-bg);
+      padding: 16px 16px 40px;
+      box-shadow: 0px 4px 32px 0px #8195C852;
+      .close {
+        text-align: right;
+        font-size: 0;
+        svg {
+          width: 12px;
+          height: 12px;
+          cursor: pointer;
+        }
+      }
+      .warning {
+        margin-top: 12px;
+        text-align: center;
+        font-size: 0;
+      }
+      .title {
+        margin-top: 16px;
+        font-size: 16px;
+        font-weight: 700;
+        line-height: 24px;
+        color: var(--c-right-side-header-text);
+        text-align: center;
+      }
+      .des {
+        margin-top: 8px;
+        font-size: 14px;
+        line-height: 16px;
+        color: var(--c-edit-text);
+        text-align: center;
+      }
+      .button {
+        width: 220px;
+        margin: 0 auto;
+        margin-top: 24px;
+        line-height: 40px;
+        border-radius: 4px;
+        background: var(--c-header-text-theme-active);
+        font-size: 14px;
+        font-weight: 700;
+        color: #FFFFFF;
+        cursor: pointer;
+        &:hover {
+          background-color: rgba(20, 96, 243, 0.8);
+        }
+      }
+    }
+  }
+</style>

packages/webview/src/components/DocumentContainer/DocumentContainer.vue

@@ -45,6 +45,7 @@
   </div>
   <SetPassword />
   <LanguageDialog />
+  <PreventDialog />
   <MeasurePop />
   <div v-if="loading && loadingPercent < 100" class="loading-state">{{ $t('loading') }}...</div>
   <div v-show="!load && loadingPercent <= 0 && activePanelTab !== 'COMPARISON' && toolMode !== 'compare'"
@@ -163,6 +164,9 @@ onMounted(async () => {
     // license: 'pB3xWyaCvnrPR/fDkBPjh+E1LeA0e+bEj6Z7a5VI1tQ='
     // license: 'e+L5dBrcDnQJXP98kF7oHEo11SLrWIWse5oWqj5ykMU='
   })
+  const options = {}
+  const webviewerMode = !!(options && options.webviewerServer) ? options.webviewerServer : 'Standalone'
+  useViewer.setWebviewerMode(webviewerMode)
   if (!res) return
   const thumbnailView = document.querySelector('.thumbnail-view')
   const annotationView = document.querySelector('.annotation-view')

packages/webview/src/components/HeaderItems/HeaderItems.vue

@@ -130,7 +130,13 @@ let showToolMode = computed(()=>{
   return ''
 })
 
+const webviewerMode = computed(() => useViewer.getWebviewerMode)
+
 const changeToolMode = (mode) => {
+  if (webviewerMode.value !== 'Standalone' && mode === 'editor') {
+    useViewer.openElement('preventDialog')
+    return
+  }
   useViewer.setActiceToolMode(mode)
 
   useDocument.setToolState('')

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

@@ -12,6 +12,7 @@ export const useViewerStore = defineStore({
     newScale: '',
     themeMode: 'Light',
     pageMode: 0,
+    webviewerMode: 'Standalone',
     scrollMode: 'Vertical',
     pageLabels: [],
     zoomLevel: ['auto', 'page-fit', 0.5, 1, 1.25, 1.5, 2, 2.5],
@@ -31,7 +32,8 @@ export const useViewerStore = defineStore({
       signCreatePanel: false,
       downloadSettingDialog: false,
       printSettingDialog: false,
-      editTextPanel: false
+      editTextPanel: false,
+      preventDialog: false
     },
     activeElementsTab: {
       leftPanelTab: 'THUMBS',
@@ -261,6 +263,9 @@ export const useViewerStore = defineStore({
     getScrollMode () {
       return this.scrollMode
     },
+    getWebviewerMode () {
+      return this.webviewerMode
+    },
     getActiveHeaderItems () {
       return this.headers
     },
@@ -340,6 +345,7 @@ export const useViewerStore = defineStore({
         linkPanel: false,
         compareSettingDialog: false,
         languageDialog: false,
+        preventDialog: false,
         setPasswordModal: false,
         signCreatePanel: false,
         downloadSettingDialog: false,
@@ -377,6 +383,9 @@ export const useViewerStore = defineStore({
     setScrollMode (mode) {
       this.scrollMode = mode
     },
+    setWebviewerMode (mode) {
+      this.webviewerMode = mode
+    },
     setCurrentScale (scale) {
       this.scale = scale
     },