优化创作页面的右侧面板

src/components/file/dialog/addFileByTemplate/Dialog.vue

@@ -160,7 +160,7 @@ export default {
             extendName,
             filePath,
             fileName,
-            isTemplate,
+            isTemplate,//0-空白文件，1-模板
             templateId: templateId[0] || "",
           };
           newfile(params)

src/views/read/wpsReader/component/insertNote.vue

@@ -33,7 +33,7 @@
       </el-select>
     </div>
     <div class="total">共{{ noteList.records.length }}条数据</div>
-    <div class="note-list">
+    <div class="note-list" v-if="noteList.records.length > 0">
       <el-card
         class="note-item"
         v-for="(item, index) in noteList.records"
@@ -69,26 +69,28 @@
             icon-class="origin"
             style="color: #1a5eff; margin-right: 6px"
           />
-          <!-- <i class="el-icon-document"></i> -->
           <span>原文：</span>
           <span
             v-if="oldContent"
+            :title="item.bookmarkContent"
             v-html="brightenKeyword(item.bookmarkContent, oldContent)"
           ></span>
-          <span v-else> {{ item.bookmarkContent }}</span>
+          <span v-else :title="item.bookmarkContent">
+            {{ item.bookmarkContent }}</span
+          >
         </div>
         <div class="note twoRow">
           <svg-icon
             icon-class="icon-note"
             style="color: #e6a23c; margin-right: 6px"
           />
-          <!-- <i class="el-icon-edit"></i> -->
           <span>笔记：</span>
           <span
             v-if="oldContent"
+            :title="item.noteContent"
             v-html="brightenKeyword(item.noteContent, oldContent)"
           ></span>
-          <span v-else> {{ item.noteContent }}</span>
+          <span v-else :title="item.noteContent"> {{ item.noteContent }}</span>
         </div>
         <div class="buttons">
           <el-button
@@ -107,6 +109,9 @@
         </div>
       </el-card>
     </div>
+    <div class="note-list" v-else>
+      <el-empty></el-empty>
+    </div>
     <div class="page">
       <el-pagination
         size="mini"

src/views/read/wpsReader/component/rightPanel.vue

@@ -10,8 +10,12 @@
         />
       </div>
     </div>
-    <div class="close">
-      <i class="el-icon-close"></i>
+    <div
+      :title="visible?'收起面板':'插入笔记'"
+      :class="['close', !visible ? 'hidden' : '']"
+      @click="handleToggleNotePanel"
+    >
+      <i :class="visible ? 'el-icon-arrow-right' : 'el-icon-edit'"></i>
     </div>
   </div>
 </template>
@@ -25,6 +29,7 @@ export default {
   },
   data() {
     return {
+      visible: false, //面板的可见性，用于控制按钮是否是悬浮
     };
   },
   methods: {
@@ -40,6 +45,11 @@ export default {
     handleOpenAddUpdateDialog(item) {
       this.$emit("handleOpenAddUpdateDialog", item);
     },
+    // 关闭笔记弹窗
+    handleToggleNotePanel() {
+      this.visible = !this.visible;
+      this.$emit("handleToggleNotePanel");
+    },
   },
 };
 </script>
@@ -51,6 +61,8 @@ export default {
   position: relative;
   box-sizing: border-box;
   width: 100%;
+  border-left: 1px solid #e6ebf5;
+  background-color: #fff;
   .left {
     padding-right: 16px;
     width: 100%;
@@ -87,10 +99,33 @@ export default {
   }
   .close {
     position: absolute;
-    right: 20px;
-    top: 20px;
+    left: 0;
+    top: 45%;
+    cursor: pointer;
+    background-color: #fff;
+    transform: translate(-50%, -50%);
+    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
+      rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
+    border-radius: 50%;
+    width: 32px;
+    height: 32px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    i {
+      font-size: 22px;
+      color: #d3d3d3;
+      transition: all ease 0.5s;
+    }
+  }
+  // 当面板不可见时会显示
+  .hidden {
+    left: -100px;
+    width: 68px;
+    height: 68px;
     i {
-      font-size: 24px;
+      color: $theme-blue;
+      font-size: 42px;
     }
   }
 }

src/views/read/wpsReader/index.vue

@@ -5,11 +5,20 @@
       'sidebar-open': $store.state.app.sidebar.opened,
     }"
   >
-    <div ref="myIframe" id="wps-container" class="wps-container"></div>
+    <div
+      ref="myIframe"
+      id="wps-container"
+      class="wps-container"
+    ></div>
     <RightPanel
-      class="right-panel"
+      ref="RightPanel"
+      :class="[
+        'right-panel',
+        panelVisible ? 'translateXLeft' : 'translateXRight',
+      ]"
       @handleInsertText="handleInsertText"
       @handleOpenAddUpdateDialog="handleOpenAddUpdateDialog"
+      @handleToggleNotePanel="handleToggleNotePanel"
     />
     <AddOrUpdateNoteDialog
       :formData="form"
@@ -41,6 +50,7 @@ export default {
         noteContent: "", //笔记内容
         tagsArr: [], //标签
       },
+      panelVisible: false, //笔记的窗口
       // isSidebarOpen:false
     };
   },
@@ -49,10 +59,21 @@ export default {
       return this.$store.state.app.sidebar.opened;
     },
   },
+  watch: {
+    panelVisible(value) {
+      debugger
+      // 获取office-iframe的dom并修改宽度为100vw
+      const officeIframe = document.getElementById("office-iframe");
+      if (!value) {
+        officeIframe.style.width = "100vw !important";
+      } else {
+        officeIframe.style.width = "100% !important";
+      }
+    },
+  },
   mounted() {
     const { wpsUrl, token, fileId } = this.$route.query;
     this.routeParams = { wpsUrl, token, fileId };
-    console.log("this.routeParams", this.routeParams);
     this.form.docId = fileId;
     this.initWps(wpsUrl, token);
   },
@@ -165,6 +186,10 @@ export default {
 
     // 插入文字
     async handleInsertText(value) {
+      if (!this.wpsInstance.WordApplication) {
+        this.$message.error("文档初始化失败，请稍后重试");
+        return;
+      }
       await this.wpsInstance
         .WordApplication()
         .ActiveDocument.ActiveWindow.Selection.InsertAfter(value);
@@ -177,20 +202,36 @@ export default {
     handleOpenAddUpdateDialog(item) {
       this.$refs.AddOrUpdateNoteDialog.dialogVisible = true;
     },
+
+    // 关闭笔记窗口
+    handleToggleNotePanel() {
+      this.panelVisible = !this.panelVisible;
+    },
   },
 };
 </script>
 <style lang="scss" scoped>
 .wps-reader {
   display: flex;
+  position: relative;
   .wps-container {
-    width: calc((100vw - 54px) * 0.8); //默认宽度是sidebar收起的宽度
+    transition: all ease 0.5s;
+    width: calc(100vw - 54px); //默认宽度是sidebar收起的宽度
     overflow: hidden;
   }
-
   .right-panel {
+    position: absolute;
+    right: 0;
+    top: 0;
+    transition: all ease 0.5s;
     width: calc((100vw - 54px) * 0.2); //默认宽度是sidebar收起的宽度
   }
+  .translateXLeft {
+    transform: translateX(0);
+  }
+  .translateXRight {
+    transform: translateX(calc((100vw - 54px) * 0.2));
+  }
 
   .wps-container,
   .right-panel {
@@ -201,12 +242,12 @@ export default {
 
 .sidebar-open {
   .wps-container {
-    width: calc((100vw - 200px) * 0.8); //sidebar展开后的宽度
+    width: calc(100vw - 200px); //sidebar展开后的宽度
   }
 
-  .right-panel {
-    width: calc((100vw - 200px) * 0.2); //默认宽度是sidebar收起的宽度
-  }
+  // .right-panel {
+  //   width: calc((100vw - 200px) * 0.2); //默认宽度是sidebar收起的宽度
+  // }
 }
 .add-note-container {
   background-color: #999;

src/views/resource/components/searchBar/index.vue

@@ -25,8 +25,8 @@
 export default {
   data() {
     return {
-      tabs: ["全部", "期刊", "博硕士", "会议", "报纸", "年鉴"],
-      activeTab: "全部",
+      tabs: ["期刊", "论文", "会议", "报纸"],
+      activeTab: "期刊",
       keyword: "",
     };
   },

src/views/resource/sharedCommunity/index.vue

@@ -96,6 +96,14 @@
         class-name="small-padding fixed-width"
       >
         <template slot-scope="scope">
+          <el-link
+            type="primary"
+            icon="el-icon-view"
+            @click="handleCollect(scope.row)"
+          >
+            收藏
+          </el-link>
+          <el-divider direction="vertical"></el-divider>
           <el-link
             type="primary"
             icon="el-icon-view"
@@ -130,9 +138,13 @@
 
 <script>
 import { getMyShareList, removeShare } from "@/api/user/share";
+import { newfile } from "@/api/wps";
 import { shareStatusConstant, shareTypeConstant } from "./constant";
+import { fileTypeConstant } from "@/components/file/constants";
 import { mapGetters } from "vuex";
 const { PUBLIC_SHARE } = shareTypeConstant;
+const { MY_COLLECT } = fileTypeConstant;
+
 export default {
   name: "myShare",
   dicts: ["share_type", "share_status"],
@@ -164,7 +176,7 @@ export default {
         pageCount: 10,
         fileName: "", //文件名称
         shareStatus: "", //分享状态
-        shareType: PUBLIC_SHARE,//查询分享给公共
+        shareType: PUBLIC_SHARE, //查询分享给公共
         // shareTo: "", //分享给谁
       },
       // 分享状态常量
@@ -234,6 +246,48 @@ export default {
     handleMultiDownload() {
       this.$refs["batchDownloadRef"].click();
     },
+    // 收藏
+    async handleCollect(row) {
+      console.log("点击收藏", row);
+      this.loading = true;
+      const { extendName, fileName } = row;
+      const filePath = '/我的收藏';
+      const WORD = ["docx", "doc"]; //暂时只考虑新建word的情况
+      let filetype = "w";
+      // const PDF = ["pdf", "doc"];
+      // const EXCEL = ["xlsx", "xls"];
+      if (WORD.includes(row.extendName)) {
+        filetype = "w";
+      }
+      const params = {
+        filetype,
+        extendName,
+        filePath,
+        fileName,
+        // isTemplate,
+        // templateId: templateId[0] || "",
+      };
+      let res = await newfile(params);
+      this.loading = false;
+      if (res.code == 200) {
+        this.$message.success("收藏成功！");
+      }
+      // newfile(params)
+      //   .then((res) => {
+      //     this.sureBtnLoading = false;
+      //     if (res.code == 200) {
+      //       this.$message.success("文件创建成功");
+      //       this.$refs[formName].resetFields();
+      //       this.visible = false;
+      //       this.callback("confirm");
+      //     } else {
+      //       this.$message.warning(res.message);
+      //     }
+      //   })
+      //   .catch(() => {
+      //     this.sureBtnLoading = false;
+      //   });
+    },
   },
 };
 </script>