add: 设置面板

packages/webview/locales/en.json

@@ -49,7 +49,16 @@
     "download": "Download",
     "flatten" : "Save as Flattened PDF",
     "print" : "Print",
-    "language": "Language",
+    "settings": {
+      "settings": "Settings",
+      "author": "Author",
+      "annotator": "Annotator",
+      "language": "Language",
+      "highlightLink": "Highlight Link",
+      "highlightForm": "Highlight Form",
+      "creationInfo": "Creation Information",
+      "version": "Version"
+    },
 
     "addText": "Add Text",
     "addImage": "Add Image",

packages/webview/locales/zh-CN.json

@@ -49,7 +49,16 @@
     "download": "下载",
     "flatten" : "展平后下载",
     "print" : "打印",
-    "language": "语言",
+    "settings": {
+      "settings": "设置",
+      "author": "文档作者",
+      "annotator": "注释作者",
+      "language": "语言设置",
+      "highlightLink": "高亮链接",
+      "highlightForm": "高亮表单",
+      "creationInfo": "创建信息",
+      "version": "版本"
+    },
 
     "addText": "添加文字",
     "addImage": "添加图片",

packages/webview/src/components/AnnotationContainer/AnnotationContent.vue

@@ -26,7 +26,7 @@
                 <Stamp v-else-if="item.type === 'image' || item.type === 'stamp'" />
 
                 <div class="info">
-                  <p class="name">Guest</p>
+                  <p class="name">{{ item.author || item.title || 'Guest' }}</p>
                   <p class="date">{{ dayjs(item.date).format('DD/MM/YYYY HH:mm:ss') }}</p>
                   <div v-if="item.contents" class="content">{{ item.contents }}</div>
                 </div>
@@ -51,7 +51,7 @@
                   <div class="info" v-for="(reply, index) in item.replies">
                     <div class="info-header">
                       <div>
-                        <p class="name">{{ reply.author || reply.title || 'Guest' }}</p>
+                        <p class="name">{{ reply.author || reply.title || annotator }}</p>
                         <p class="date">{{ dayjs(reply.date).format('DD/MM/YYYY HH:mm:ss') }}</p>
                       </div>
                       <Button class="more" :class="{ active: showReplyPopover && reply.name === selectedReply?.name }" @click="handleReplyPopoverShow($event, reply)">
@@ -147,6 +147,7 @@ const useViewer = useViewerStore()
 let annotationsContainers = computed(() => useDocument.getAllAnnotations)
 const activePanelTab = computed(() => useViewer.getActiveElementTab('leftPanelTab'))
 const isOpen = computed(() => useViewer.isElementOpen('leftPanel'))
+const annotator = computed(() => useDocument.getAnnotator)
 
 const markup = ['highlight', 'underline', 'squiggly', 'strikeout']
 
@@ -171,7 +172,7 @@ const setAnnotationList = ({ annotations }) => {
   useDocument.initAnnotations(annotations)
   const instance = getCurrentInstance();
   instance?.proxy?.$forceUpdate();
-  // console.log(annotations[0])
+  console.log(annotations[0])
 }
 core.addEvent('annotationChanged', setAnnotationList)
 
@@ -273,8 +274,8 @@ const addReply = () => {
     reply: {
       operate: 'add-annot',
       type: 'reply',
-      author: 'Guest',
-      title: 'Guest',
+      author: annotator.value,
+      title: annotator.value,
       contents: replyText.value,
       date: new Date(),
       pageIndex: selectedAnnot.value.pageIndex,

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

@@ -1,120 +0,0 @@
-<template>
-  <div v-show="isModalVisible" class="language-setting-popup">
-    <div class="wrapper">
-      <div className="header-container">
-        <span class="title"></span>
-        <Button className="close-button" :onClick="handleClose"><CloseModal /></Button>
-      </div>
-      <div class="content">
-        <div class="title">{{ $t('header.language') }}</div>
-        <div class="item" @click="selectLanguage('en')">
-          <Circled v-if="selectedLanguage === 'en'" />
-          <Circle v-else />
-          English
-        </div>
-        <div class="item" @click="selectLanguage('zh-CN')">
-          <Circled v-if="selectedLanguage === 'zh-CN'" />
-          <Circle v-else />
-          简体中文
-        </div>
-        <span class="set-btn" @click="handleLanguage">{{ $t('ok') }}</span>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-  import { computed, ref } from 'vue'
-  import { useI18n } from 'vue-i18n'
-  import { useViewerStore } from '@/stores/modules/viewer'
-  const { locale } = useI18n()
-
-  const useViewer = useViewerStore()
-
-  const selectedLanguage = ref(locale.value)
-  const isModalVisible = computed(() => useViewer.isElementOpen('languageDialog'))
-  
-  const handleClose = () => {
-    useViewer.closeElement('languageDialog')
-    selectedLanguage.value = locale.value
-  }
-
-  const selectLanguage = (language) => {
-    selectedLanguage.value = language
-  }
-
-  const handleLanguage = () => {
-    locale.value = selectedLanguage.value
-    window.localStorage.setItem('language', selectedLanguage.value)
-    useViewer.closeElement('languageDialog')
-  }
-</script>
-
-<style lang="scss">
-  .language-setting-popup {
-    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;
-    .wrapper {
-      width: 100%;
-      max-width: 252px;
-      padding: 20px 16px;
-      background-color: var(--c-header-bg);
-      box-shadow: 0px 4px 32px 0px rgba(129, 149, 200, 0.32);
-      border-radius: 4px;
-    }
-    .header-container {
-      display: flex;
-      justify-content: space-between;
-      margin-bottom: 10px;
-      button {
-        margin-right: 0;
-      }
-    }
-    .content {
-      display: flex;
-      flex-direction: column;
-      .title {
-        margin-bottom: 16px;
-        font-weight: bold;
-        font-size: 16px;
-        line-height: 24px;
-      }
-      .item {
-        display: flex;
-        align-items: center;
-        font-size: 14px;
-        line-height: 20px;
-        cursor: pointer;
-        & + .item {
-          margin-top: 6px;
-        }
-        svg {
-          margin-right: 9px;
-        }
-      }
-    }
-    .set-btn {
-      display: flex;
-      width: 100%;
-      justify-content: center;
-      align-items: center;
-      margin-top: 24px;
-      padding: 12px 0;
-      font-size: 14px;
-      line-height: 16px;
-      font-weight: bold;
-      border-radius: 4px;
-      color: #FFF;
-      cursor: pointer;
-      background-color: var(--c-popup-bg-active);
-    }
-  }
-</style>

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

@@ -0,0 +1,221 @@
+<template>
+  <div class="settings-popup">
+    <Dialog :show="show">
+      <Button class="close-button" :onClick="handleSettings"><CloseModal /></Button>
+      <p class="title">{{ $t('header.settings.settings') }}</p>
+      <div class="container">
+        <div class="info">
+          <div class="row">
+            <span>{{ $t('header.settings.author') }}</span>
+            <input type="text" placeholder="ComPDFKit" v-model="author">
+          </div>
+          <div class="row">
+            <span>{{ $t('header.settings.annotator') }}</span>
+            <input type="text" placeholder="Guest" v-model="annotator">
+          </div>
+          <div class="row">
+            <span>{{ $t('header.settings.language') }}</span>
+            <div class="select-box">
+              <select name="language" v-model="selectedLanguage">
+                <option value="en">English</option>
+                <option value="zh-CN">简体中文</option>
+              </select>
+              <ArrowDown />
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <span>{{ $t('header.settings.highlightLink') }}</span>
+          <div class="controller"><n-switch v-model:value="isHighlightLink" disabled /></div>
+        </div>
+        <div class="row">
+          <span>{{ $t('header.settings.highlightForm') }}</span>
+          <div class="controller"><n-switch v-model:value="isHighlightForm" disabled /></div>
+        </div>
+      </div>
+
+      <p class="title">{{ $t('header.settings.creationInfo') }}</p>
+      <div class="version row">
+        <span>{{ $t('header.settings.version') }}</span>
+        <span>2.3.0</span>
+      </div>
+    </Dialog>
+  </div>
+</template>
+
+<script setup>
+  import { computed, ref, watch } from 'vue'
+  import { useI18n } from 'vue-i18n'
+  import { useViewerStore } from '@/stores/modules/viewer'
+  import { useDocumentStore } from '@/stores/modules/document'
+  import { NSwitch } from 'naive-ui'
+  const { locale } = useI18n()
+
+  const useViewer = useViewerStore()
+  const useDocument = useDocumentStore()
+
+  const show = computed(() => useViewer.isElementOpen('settingsDialog'))
+  const author = ref('')
+  const annotator = ref('')
+  const selectedLanguage = ref(locale.value)
+  const isHighlightLink = ref(true)
+  const isHighlightForm = ref(true)
+
+  watch(() => show.value, (newVal, oldVal) => {
+    if (newVal) {
+      author.value = useDocument.getAuthor
+      annotator.value = useDocument.getAnnotator
+      isHighlightLink.value = useDocument.getIsHighlightLink
+      isHighlightForm.value = useDocument.getIsHighlightForm
+    }
+  })
+  
+  const handleClose = () => {
+    useViewer.closeElement('settingsDialog')
+    selectedLanguage.value = locale.value
+  }
+
+  const handleSettings = () => {
+    locale.value = selectedLanguage.value
+    window.localStorage.setItem('language', selectedLanguage.value)
+    useViewer.closeElement('settingsDialog')
+    useDocument.setAuthor(author.value ? author.value : 'ComPDFKit')
+    useDocument.setAnnotator(annotator.value ? annotator.value : 'Guest')
+    // useDocument.setIsHighlightLink(isHighlightLink.value)
+    // useDocument.setIsHighlightForm(isHighlightForm.value)
+  }
+</script>
+
+<style lang="scss">
+.settings-popup {
+  .dialog-container {
+    width: 400px;
+    box-shadow: 0px 4px 32px 0px var(--c-doc-editor-popup-shadow);
+
+    main {
+      margin: 0;
+    }
+  }
+
+  .close-button {
+    float: right;
+  }
+
+  .title {
+    font-size: 16px;
+    font-weight: 700;
+    line-height: 24px;
+  }
+  
+  span {
+    font-size: 14px;
+    line-height: 16px;
+  }
+
+  .row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 30px;
+
+    & + .row {
+      margin-top: 8px;
+    }
+  }
+
+  .container {
+    margin-top: 16px;
+    margin-bottom: 24px;
+    padding: 16px;
+    border-radius: 4px;
+    background: var(--c-toolbar-bg);
+
+    .info {
+      margin-bottom: 16px;
+      padding-bottom: 20px;
+      border-bottom: 1px solid var(--c-right-side-content-fillbox-border);
+    }
+
+    select,
+    input {
+      padding: 0 20px 0 8px;
+      width: 200px;
+      height: 30px;
+      background: var(--c-right-side-content-fillbox-bg);
+      border: 1px solid var(--c-right-side-content-fillbox-border);
+      border-radius: 1px;
+      font-size: 14px;
+      line-height: 16px;
+      color: var(--c-text);
+    }
+
+    input::placeholder {
+      color: #666;
+    }
+
+    input:focus {
+      border-color: #0078D7;
+    }
+
+    select {
+      color: #666;
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      appearance: none;
+    }
+    
+    .select-box {
+      position: relative;
+      display: flex;
+      align-items: center;
+      
+      span {
+        white-space: nowrap;
+        font-size: 14px;
+        line-height: 16px;
+      }
+
+      svg {
+        position: absolute;
+        right: 4px;
+        pointer-events: none;
+      }
+    }
+  }
+
+  .version {
+    margin-top: 16px;
+    padding-right: 5px;
+  }
+
+  .controller {
+    .n-switch {
+      .n-switch__rail {
+        min-width: 44px;
+        height: 24px;
+        border-radius: 100px;
+        background-color: hsl(219, 100%, 93%);
+
+        .n-switch__button {
+          top: 4px;
+          left: 4px;
+          width: 16px;
+          height: 16px;
+        }
+      }
+
+      &.n-switch--active .n-switch__rail {
+        background-color: #1460F3;
+      }
+
+      &.n-switch--active .n-switch__rail .n-switch__button {
+        left: calc(100% - 16px - 4px);
+      }
+
+      &:focus .n-switch__rail {
+        box-shadow: none;
+      }
+    }
+  }
+}
+</style>

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

@@ -45,7 +45,7 @@
     </div>
   </div>
   <SetPassword />
-  <LanguageDialog />
+  <SettingsDialog />
   <PreventDialog />
   <MeasurePop />
   <div v-if="loading && loadingPercent < 100" class="loading-state">{{ $t('loading') }}...</div>

packages/webview/src/components/Dropdown/Dropdown.vue

@@ -18,12 +18,7 @@
       <div class="drop-item" @click="downloadFile"><DownloadButton />{{ $t('header.download') }}</div>
       <div class="drop-item" @click="handleFlatten"><FlattenButton />{{ $t('header.flatten') }}</div>
       <div class="drop-item" @click="handlePrint"><PrintButton />{{ $t('header.print') }}</div>
-      <div class="drop-item" @click="handleLanguage">
-        <Button :title="$t('header.language')">
-          <Language />
-        </Button>
-        {{ $t('header.language') }}
-      </div>
+      <div class="drop-item" @click="handleSettings"><Button><Settings /></Button>{{ $t('header.settings.settings') }}</div>
     </div>
   </n-popover>
 </template>
@@ -91,7 +86,9 @@
     }
   }
 
-  const handleLanguage = () => {
-    useViewer.openElement('languageDialog')
+  const handleSettings = () => {
+    popover.value.setShow(false)
+    useViewer.setPopoverChanged(false)
+    useViewer.openElement('settingsDialog')
   }
 </script>

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

@@ -140,6 +140,10 @@ export const useDocumentStore = defineStore({
     activeOutlineId: null,
     searchResults: [],
     docEditorOperationList: [], // 页面编辑操作记录
+    author: 'ComPDFKit', // 文档作者
+    annotator: 'Guest', // 注释作者
+    isHighlightLink: true,
+    isHighlightForm: true
   }),
   getters: {
     getTotalPages () {
@@ -260,6 +264,18 @@ export const useDocumentStore = defineStore({
     },
     getDocEditorOperationList () {
       return this.docEditorOperationList
+    },
+    getAuthor () {
+      return this.author
+    },
+    getAnnotator () {
+      return this.annotator
+    },
+    getIsHighlightLink () {
+      return this.isHighlightLink
+    },
+    getIsHighlightForm () {
+      return this.isHighlightForm
     }
   },
   actions: {
@@ -421,6 +437,18 @@ export const useDocumentStore = defineStore({
       } else if (operation) {
         this.docEditorOperationList.push(operation)
       }
+    },
+    setAuthor (author) {
+      this.author = author
+    },
+    setAnnotator (annotator) {
+      this.annotator = annotator
+    },
+    setIsHighlightLink (bool) {
+      this.isHighlightLink = bool
+    },
+    setIsHighlightForm (bool) {
+      this.isHighlightForm = bool
     }
   }
 })

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

@@ -28,7 +28,7 @@ export const useViewerStore = defineStore({
       stampPanel: false,
       linkPanel: false,
       compareSettingDialog: false,
-      languageDialog: false,
+      settingsDialog: false,
       setPasswordModal: false,
       signCreatePanel: false,
       downloadSettingDialog: false,
@@ -357,7 +357,7 @@ export const useViewerStore = defineStore({
         stampPanel: false,
         linkPanel: false,
         compareSettingDialog: false,
-        languageDialog: false,
+        settingsDialog: false,
         contentEditorPreventDialog: false,
         docEditorPreventDialog: false,
         setPasswordModal: false,