docx预览

.idea/.gitignore

@@ -1,5 +0,0 @@
-# Default ignored files
-/shelf/
-/workspace.xml
-# Editor-based HTTP Client requests
-/httpRequests/

.idea/dbnavigator.xml

@@ -1,411 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="DBNavigator.Project.DataEditorManager">
-    <record-view-column-sorting-type value="BY_INDEX" />
-    <value-preview-text-wrapping value="true" />
-    <value-preview-pinned value="false" />
-  </component>
-  <component name="DBNavigator.Project.DatabaseEditorStateManager">
-    <last-used-providers />
-  </component>
-  <component name="DBNavigator.Project.DatabaseFileManager">
-    <open-files />
-  </component>
-  <component name="DBNavigator.Project.Settings">
-    <connections />
-    <browser-settings>
-      <general>
-        <display-mode value="TABBED" />
-        <navigation-history-size value="100" />
-        <show-object-details value="false" />
-      </general>
-      <filters>
-        <object-type-filter>
-          <object-type name="SCHEMA" enabled="true" />
-          <object-type name="USER" enabled="true" />
-          <object-type name="ROLE" enabled="true" />
-          <object-type name="PRIVILEGE" enabled="true" />
-          <object-type name="CHARSET" enabled="true" />
-          <object-type name="TABLE" enabled="true" />
-          <object-type name="VIEW" enabled="true" />
-          <object-type name="MATERIALIZED_VIEW" enabled="true" />
-          <object-type name="NESTED_TABLE" enabled="true" />
-          <object-type name="COLUMN" enabled="true" />
-          <object-type name="INDEX" enabled="true" />
-          <object-type name="CONSTRAINT" enabled="true" />
-          <object-type name="DATASET_TRIGGER" enabled="true" />
-          <object-type name="DATABASE_TRIGGER" enabled="true" />
-          <object-type name="SYNONYM" enabled="true" />
-          <object-type name="SEQUENCE" enabled="true" />
-          <object-type name="PROCEDURE" enabled="true" />
-          <object-type name="FUNCTION" enabled="true" />
-          <object-type name="PACKAGE" enabled="true" />
-          <object-type name="TYPE" enabled="true" />
-          <object-type name="TYPE_ATTRIBUTE" enabled="true" />
-          <object-type name="ARGUMENT" enabled="true" />
-          <object-type name="DIMENSION" enabled="true" />
-          <object-type name="CLUSTER" enabled="true" />
-          <object-type name="DBLINK" enabled="true" />
-        </object-type-filter>
-      </filters>
-      <sorting>
-        <object-type name="COLUMN" sorting-type="NAME" />
-        <object-type name="FUNCTION" sorting-type="NAME" />
-        <object-type name="PROCEDURE" sorting-type="NAME" />
-        <object-type name="ARGUMENT" sorting-type="POSITION" />
-        <object-type name="TYPE ATTRIBUTE" sorting-type="POSITION" />
-      </sorting>
-      <default-editors>
-        <object-type name="VIEW" editor-type="SELECTION" />
-        <object-type name="PACKAGE" editor-type="SELECTION" />
-        <object-type name="TYPE" editor-type="SELECTION" />
-      </default-editors>
-    </browser-settings>
-    <navigation-settings>
-      <lookup-filters>
-        <lookup-objects>
-          <object-type name="SCHEMA" enabled="true" />
-          <object-type name="USER" enabled="false" />
-          <object-type name="ROLE" enabled="false" />
-          <object-type name="PRIVILEGE" enabled="false" />
-          <object-type name="CHARSET" enabled="false" />
-          <object-type name="TABLE" enabled="true" />
-          <object-type name="VIEW" enabled="true" />
-          <object-type name="MATERIALIZED VIEW" enabled="true" />
-          <object-type name="INDEX" enabled="true" />
-          <object-type name="CONSTRAINT" enabled="true" />
-          <object-type name="DATASET TRIGGER" enabled="true" />
-          <object-type name="DATABASE TRIGGER" enabled="true" />
-          <object-type name="SYNONYM" enabled="false" />
-          <object-type name="SEQUENCE" enabled="true" />
-          <object-type name="PROCEDURE" enabled="true" />
-          <object-type name="FUNCTION" enabled="true" />
-          <object-type name="PACKAGE" enabled="true" />
-          <object-type name="TYPE" enabled="true" />
-          <object-type name="DIMENSION" enabled="false" />
-          <object-type name="CLUSTER" enabled="false" />
-          <object-type name="DBLINK" enabled="true" />
-        </lookup-objects>
-        <force-database-load value="false" />
-        <prompt-connection-selection value="true" />
-        <prompt-schema-selection value="true" />
-      </lookup-filters>
-    </navigation-settings>
-    <dataset-grid-settings>
-      <general>
-        <enable-zooming value="true" />
-        <enable-column-tooltip value="true" />
-      </general>
-      <sorting>
-        <nulls-first value="true" />
-        <max-sorting-columns value="4" />
-      </sorting>
-      <audit-columns>
-        <column-names value="" />
-        <visible value="true" />
-        <editable value="false" />
-      </audit-columns>
-    </dataset-grid-settings>
-    <dataset-editor-settings>
-      <text-editor-popup>
-        <active value="false" />
-        <active-if-empty value="false" />
-        <data-length-threshold value="100" />
-        <popup-delay value="1000" />
-      </text-editor-popup>
-      <values-actions-popup>
-        <show-popup-button value="true" />
-        <element-count-threshold value="1000" />
-        <data-length-threshold value="250" />
-      </values-actions-popup>
-      <general>
-        <fetch-block-size value="100" />
-        <fetch-timeout value="30" />
-        <trim-whitespaces value="true" />
-        <convert-empty-strings-to-null value="true" />
-        <select-content-on-cell-edit value="true" />
-        <large-value-preview-active value="true" />
-      </general>
-      <filters>
-        <prompt-filter-dialog value="true" />
-        <default-filter-type value="BASIC" />
-      </filters>
-      <qualified-text-editor text-length-threshold="300">
-        <content-types>
-          <content-type name="Text" enabled="true" />
-          <content-type name="XML" enabled="true" />
-          <content-type name="DTD" enabled="true" />
-          <content-type name="HTML" enabled="true" />
-          <content-type name="XHTML" enabled="true" />
-          <content-type name="CSS" enabled="true" />
-          <content-type name="SQL" enabled="true" />
-          <content-type name="PL/SQL" enabled="true" />
-          <content-type name="JavaScript" enabled="true" />
-          <content-type name="JSON" enabled="true" />
-          <content-type name="JSON5" enabled="true" />
-          <content-type name="YAML" enabled="true" />
-        </content-types>
-      </qualified-text-editor>
-      <record-navigation>
-        <navigation-target value="VIEWER" />
-      </record-navigation>
-    </dataset-editor-settings>
-    <code-editor-settings>
-      <general>
-        <show-object-navigation-gutter value="false" />
-        <show-spec-declaration-navigation-gutter value="true" />
-        <enable-spellchecking value="true" />
-        <enable-reference-spellchecking value="false" />
-      </general>
-      <confirmations>
-        <save-changes value="false" />
-        <revert-changes value="true" />
-      </confirmations>
-    </code-editor-settings>
-    <code-completion-settings>
-      <filters>
-        <basic-filter>
-          <filter-element type="RESERVED_WORD" id="keyword" selected="true" />
-          <filter-element type="RESERVED_WORD" id="function" selected="true" />
-          <filter-element type="RESERVED_WORD" id="parameter" selected="true" />
-          <filter-element type="RESERVED_WORD" id="datatype" selected="true" />
-          <filter-element type="RESERVED_WORD" id="exception" selected="true" />
-          <filter-element type="OBJECT" id="schema" selected="true" />
-          <filter-element type="OBJECT" id="role" selected="true" />
-          <filter-element type="OBJECT" id="user" selected="true" />
-          <filter-element type="OBJECT" id="privilege" selected="true" />
-          <user-schema>
-            <filter-element type="OBJECT" id="table" selected="true" />
-            <filter-element type="OBJECT" id="view" selected="true" />
-            <filter-element type="OBJECT" id="materialized view" selected="true" />
-            <filter-element type="OBJECT" id="index" selected="true" />
-            <filter-element type="OBJECT" id="constraint" selected="true" />
-            <filter-element type="OBJECT" id="trigger" selected="true" />
-            <filter-element type="OBJECT" id="synonym" selected="false" />
-            <filter-element type="OBJECT" id="sequence" selected="true" />
-            <filter-element type="OBJECT" id="procedure" selected="true" />
-            <filter-element type="OBJECT" id="function" selected="true" />
-            <filter-element type="OBJECT" id="package" selected="true" />
-            <filter-element type="OBJECT" id="type" selected="true" />
-            <filter-element type="OBJECT" id="dimension" selected="true" />
-            <filter-element type="OBJECT" id="cluster" selected="true" />
-            <filter-element type="OBJECT" id="dblink" selected="true" />
-          </user-schema>
-          <public-schema>
-            <filter-element type="OBJECT" id="table" selected="false" />
-            <filter-element type="OBJECT" id="view" selected="false" />
-            <filter-element type="OBJECT" id="materialized view" selected="false" />
-            <filter-element type="OBJECT" id="index" selected="false" />
-            <filter-element type="OBJECT" id="constraint" selected="false" />
-            <filter-element type="OBJECT" id="trigger" selected="false" />
-            <filter-element type="OBJECT" id="synonym" selected="false" />
-            <filter-element type="OBJECT" id="sequence" selected="false" />
-            <filter-element type="OBJECT" id="procedure" selected="false" />
-            <filter-element type="OBJECT" id="function" selected="false" />
-            <filter-element type="OBJECT" id="package" selected="false" />
-            <filter-element type="OBJECT" id="type" selected="false" />
-            <filter-element type="OBJECT" id="dimension" selected="false" />
-            <filter-element type="OBJECT" id="cluster" selected="false" />
-            <filter-element type="OBJECT" id="dblink" selected="false" />
-          </public-schema>
-          <any-schema>
-            <filter-element type="OBJECT" id="table" selected="true" />
-            <filter-element type="OBJECT" id="view" selected="true" />
-            <filter-element type="OBJECT" id="materialized view" selected="true" />
-            <filter-element type="OBJECT" id="index" selected="true" />
-            <filter-element type="OBJECT" id="constraint" selected="true" />
-            <filter-element type="OBJECT" id="trigger" selected="true" />
-            <filter-element type="OBJECT" id="synonym" selected="true" />
-            <filter-element type="OBJECT" id="sequence" selected="true" />
-            <filter-element type="OBJECT" id="procedure" selected="true" />
-            <filter-element type="OBJECT" id="function" selected="true" />
-            <filter-element type="OBJECT" id="package" selected="true" />
-            <filter-element type="OBJECT" id="type" selected="true" />
-            <filter-element type="OBJECT" id="dimension" selected="true" />
-            <filter-element type="OBJECT" id="cluster" selected="true" />
-            <filter-element type="OBJECT" id="dblink" selected="true" />
-          </any-schema>
-        </basic-filter>
-        <extended-filter>
-          <filter-element type="RESERVED_WORD" id="keyword" selected="true" />
-          <filter-element type="RESERVED_WORD" id="function" selected="true" />
-          <filter-element type="RESERVED_WORD" id="parameter" selected="true" />
-          <filter-element type="RESERVED_WORD" id="datatype" selected="true" />
-          <filter-element type="RESERVED_WORD" id="exception" selected="true" />
-          <filter-element type="OBJECT" id="schema" selected="true" />
-          <filter-element type="OBJECT" id="user" selected="true" />
-          <filter-element type="OBJECT" id="role" selected="true" />
-          <filter-element type="OBJECT" id="privilege" selected="true" />
-          <user-schema>
-            <filter-element type="OBJECT" id="table" selected="true" />
-            <filter-element type="OBJECT" id="view" selected="true" />
-            <filter-element type="OBJECT" id="materialized view" selected="true" />
-            <filter-element type="OBJECT" id="index" selected="true" />
-            <filter-element type="OBJECT" id="constraint" selected="true" />
-            <filter-element type="OBJECT" id="trigger" selected="true" />
-            <filter-element type="OBJECT" id="synonym" selected="true" />
-            <filter-element type="OBJECT" id="sequence" selected="true" />
-            <filter-element type="OBJECT" id="procedure" selected="true" />
-            <filter-element type="OBJECT" id="function" selected="true" />
-            <filter-element type="OBJECT" id="package" selected="true" />
-            <filter-element type="OBJECT" id="type" selected="true" />
-            <filter-element type="OBJECT" id="dimension" selected="true" />
-            <filter-element type="OBJECT" id="cluster" selected="true" />
-            <filter-element type="OBJECT" id="dblink" selected="true" />
-          </user-schema>
-          <public-schema>
-            <filter-element type="OBJECT" id="table" selected="true" />
-            <filter-element type="OBJECT" id="view" selected="true" />
-            <filter-element type="OBJECT" id="materialized view" selected="true" />
-            <filter-element type="OBJECT" id="index" selected="true" />
-            <filter-element type="OBJECT" id="constraint" selected="true" />
-            <filter-element type="OBJECT" id="trigger" selected="true" />
-            <filter-element type="OBJECT" id="synonym" selected="true" />
-            <filter-element type="OBJECT" id="sequence" selected="true" />
-            <filter-element type="OBJECT" id="procedure" selected="true" />
-            <filter-element type="OBJECT" id="function" selected="true" />
-            <filter-element type="OBJECT" id="package" selected="true" />
-            <filter-element type="OBJECT" id="type" selected="true" />
-            <filter-element type="OBJECT" id="dimension" selected="true" />
-            <filter-element type="OBJECT" id="cluster" selected="true" />
-            <filter-element type="OBJECT" id="dblink" selected="true" />
-          </public-schema>
-          <any-schema>
-            <filter-element type="OBJECT" id="table" selected="true" />
-            <filter-element type="OBJECT" id="view" selected="true" />
-            <filter-element type="OBJECT" id="materialized view" selected="true" />
-            <filter-element type="OBJECT" id="index" selected="true" />
-            <filter-element type="OBJECT" id="constraint" selected="true" />
-            <filter-element type="OBJECT" id="trigger" selected="true" />
-            <filter-element type="OBJECT" id="synonym" selected="true" />
-            <filter-element type="OBJECT" id="sequence" selected="true" />
-            <filter-element type="OBJECT" id="procedure" selected="true" />
-            <filter-element type="OBJECT" id="function" selected="true" />
-            <filter-element type="OBJECT" id="package" selected="true" />
-            <filter-element type="OBJECT" id="type" selected="true" />
-            <filter-element type="OBJECT" id="dimension" selected="true" />
-            <filter-element type="OBJECT" id="cluster" selected="true" />
-            <filter-element type="OBJECT" id="dblink" selected="true" />
-          </any-schema>
-        </extended-filter>
-      </filters>
-      <sorting enabled="true">
-        <sorting-element type="RESERVED_WORD" id="keyword" />
-        <sorting-element type="RESERVED_WORD" id="datatype" />
-        <sorting-element type="OBJECT" id="column" />
-        <sorting-element type="OBJECT" id="table" />
-        <sorting-element type="OBJECT" id="view" />
-        <sorting-element type="OBJECT" id="materialized view" />
-        <sorting-element type="OBJECT" id="index" />
-        <sorting-element type="OBJECT" id="constraint" />
-        <sorting-element type="OBJECT" id="trigger" />
-        <sorting-element type="OBJECT" id="synonym" />
-        <sorting-element type="OBJECT" id="sequence" />
-        <sorting-element type="OBJECT" id="procedure" />
-        <sorting-element type="OBJECT" id="function" />
-        <sorting-element type="OBJECT" id="package" />
-        <sorting-element type="OBJECT" id="type" />
-        <sorting-element type="OBJECT" id="dimension" />
-        <sorting-element type="OBJECT" id="cluster" />
-        <sorting-element type="OBJECT" id="dblink" />
-        <sorting-element type="OBJECT" id="schema" />
-        <sorting-element type="OBJECT" id="role" />
-        <sorting-element type="OBJECT" id="user" />
-        <sorting-element type="RESERVED_WORD" id="function" />
-        <sorting-element type="RESERVED_WORD" id="parameter" />
-      </sorting>
-      <format>
-        <enforce-code-style-case value="true" />
-      </format>
-    </code-completion-settings>
-    <execution-engine-settings>
-      <statement-execution>
-        <fetch-block-size value="100" />
-        <execution-timeout value="20" />
-        <debug-execution-timeout value="600" />
-        <focus-result value="false" />
-        <prompt-execution value="false" />
-      </statement-execution>
-      <script-execution>
-        <command-line-interfaces />
-        <execution-timeout value="300" />
-      </script-execution>
-      <method-execution>
-        <execution-timeout value="30" />
-        <debug-execution-timeout value="600" />
-        <parameter-history-size value="10" />
-      </method-execution>
-    </execution-engine-settings>
-    <operation-settings>
-      <transactions>
-        <uncommitted-changes>
-          <on-project-close value="ASK" />
-          <on-disconnect value="ASK" />
-          <on-autocommit-toggle value="ASK" />
-        </uncommitted-changes>
-        <multiple-uncommitted-changes>
-          <on-commit value="ASK" />
-          <on-rollback value="ASK" />
-        </multiple-uncommitted-changes>
-      </transactions>
-      <session-browser>
-        <disconnect-session value="ASK" />
-        <kill-session value="ASK" />
-        <reload-on-filter-change value="false" />
-      </session-browser>
-      <compiler>
-        <compile-type value="KEEP" />
-        <compile-dependencies value="ASK" />
-        <always-show-controls value="false" />
-      </compiler>
-      <debugger>
-        <debugger-type value="JDBC" />
-        <use-generic-runners value="true" />
-      </debugger>
-    </operation-settings>
-    <ddl-file-settings>
-      <extensions>
-        <mapping file-type-id="VIEW" extensions="vw" />
-        <mapping file-type-id="TRIGGER" extensions="trg" />
-        <mapping file-type-id="PROCEDURE" extensions="prc" />
-        <mapping file-type-id="FUNCTION" extensions="fnc" />
-        <mapping file-type-id="PACKAGE" extensions="pkg" />
-        <mapping file-type-id="PACKAGE_SPEC" extensions="pks" />
-        <mapping file-type-id="PACKAGE_BODY" extensions="pkb" />
-        <mapping file-type-id="TYPE" extensions="tpe" />
-        <mapping file-type-id="TYPE_SPEC" extensions="tps" />
-        <mapping file-type-id="TYPE_BODY" extensions="tpb" />
-      </extensions>
-      <general>
-        <lookup-ddl-files value="true" />
-        <create-ddl-files value="false" />
-        <synchronize-ddl-files value="true" />
-        <use-qualified-names value="false" />
-        <make-scripts-rerunnable value="true" />
-      </general>
-    </ddl-file-settings>
-    <general-settings>
-      <regional-settings>
-        <date-format value="MEDIUM" />
-        <number-format value="UNGROUPED" />
-        <locale value="SYSTEM_DEFAULT" />
-        <use-custom-formats value="false" />
-      </regional-settings>
-      <environment>
-        <environment-types>
-          <environment-type id="development" name="Development" description="Development environment" color="-2430209/-12296320" readonly-code="false" readonly-data="false" />
-          <environment-type id="integration" name="Integration" description="Integration environment" color="-2621494/-12163514" readonly-code="true" readonly-data="false" />
-          <environment-type id="production" name="Production" description="Productive environment" color="-11574/-10271420" readonly-code="true" readonly-data="true" />
-          <environment-type id="other" name="Other" description="" color="-1576/-10724543" readonly-code="false" readonly-data="false" />
-        </environment-types>
-        <visibility-settings>
-          <connection-tabs value="true" />
-          <dialog-headers value="true" />
-          <object-editor-tabs value="true" />
-          <script-editor-tabs value="false" />
-          <execution-result-tabs value="true" />
-        </visibility-settings>
-      </environment>
-    </general-settings>
-  </component>
-</project>

.idea/eai-frontend.iml

@@ -1,13 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="WEB_MODULE" version="4">
-  <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$">
-      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
-      <excludeFolder url="file://$MODULE_DIR$/build" />
-      <excludeFolder url="file://$MODULE_DIR$/temp" />
-      <excludeFolder url="file://$MODULE_DIR$/tmp" />
-    </content>
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>

.idea/inspectionProfiles/Project_Default.xml

@@ -1,6 +0,0 @@
-<component name="InspectionProjectProfileManager">
-  <profile version="1.0">
-    <option name="myName" value="Project Default" />
-    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
-  </profile>
-</component>

.idea/modules.xml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/eai-frontend.iml" filepath="$PROJECT_DIR$/.idea/eai-frontend.iml" />
-    </modules>
-  </component>
-</project>

.idea/vcs.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="VcsDirectoryMappings">
-    <mapping directory="$PROJECT_DIR$" vcs="Git" />
-  </component>
-</project>

src/components/ViewsWordEditor/ViewsWordEditor.tsx

@@ -0,0 +1,35 @@
+import WordEditor from '@/components/WordEditor/WordEditor';
+import { Modal } from 'antd';
+import { ModalProps } from 'antd/es/modal/interface';
+import "./index.scss"
+
+
+interface ViewsWordEditorInterface {
+  alert: ModalProps;
+  word: {
+    onValueChange?: (state: boolean) => void;
+    documentKey: string;
+    documentTitle: string;
+    documentUrl: string;
+    userId: number;
+    username: string;
+    mode?: string;
+  };
+}
+
+export function ViewsWordEditor({ alert, word }: ViewsWordEditorInterface) {
+  return <Modal
+    centered
+    width="100%"
+    wrapClassName="full-modal"
+    cancelText="取消"
+    {...alert}
+  >
+    <WordEditor
+      mode="view"
+      {...word}
+    />
+  </Modal>;
+}
+
+

src/components/ViewsWordEditor/index.scss

@@ -0,0 +1,12 @@
+.full-modal {
+  .ant-modal-content {
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .ant-modal-body {
+    height: 100%;
+    flex: 1;
+  }
+}

src/components/WordEditor/WordEditor.tsx

@@ -1,115 +1,127 @@
-import { DocumentEditor } from "@onlyoffice/document-editor-react";
-import React, {useEffect, useMemo} from "react";
+import { DocumentEditor } from '@onlyoffice/document-editor-react';
+import React, { useEffect, useMemo } from 'react';
 
 interface IProps {
-    onValueChange: (state: boolean) => void;
-    documentKey: string;
-    documentTitle: string;
-    documentUrl: string;
-    userId: number;
-    username: string;
+  onValueChange?: (state: boolean) => void;
+  documentKey: string;
+  documentTitle: string;
+  documentUrl: string;
+  userId: number;
+  username: string;
+  mode?: string;
 }
 
-const WordEditor:React.FC<IProps> = React.memo(({onValueChange, documentKey, documentTitle, documentUrl, userId, username}) => {
+const WordEditor: React.FC<IProps> = React.memo((
+  {
+    onValueChange,
+    documentKey,
+    documentTitle,
+    documentUrl,
+    userId,
+    username,
+    mode = 'edit',
+  },
+) => {
 
-    // OnlyOffice Document Server地址
-    const documentServerUrl = "http://47.111.23.171:8082/"
+  // OnlyOffice Document Server地址
+  const documentServerUrl = 'http://47.111.23.171:8082/';
 
-    // OnlyOffice编辑器配置，采用useMemo的方式，避免不必要的渲染
-    let config = useMemo(() => ({
-            width: '100%',
-            height: '100%',
-            type: 'desktop',
-            documentType: "word",
-            mode: 'edit',
-            document: {
-                fileType: "docx",
-                key: documentKey, // 1
-                title: documentTitle, //2
-                url: documentUrl, // 3
-                permissions: {
-                    "chat": false,
-                    "comment": false,
-                    "copy": true,
-                    "deleteCommentAuthorOnly": false,
-                    "download": false,
-                    "edit": true,
-                    "editCommentAuthorOnly": false,
-                    "fillForms": false,
-                    "modifyContentControl": false,
-                    "print": false,
-                    "protect": false,
-                    "review": false,
-                },
-            },
-            editorConfig: {
-                lang: 'zh-CN',
-                callbackUrl: "http://47.111.23.171:8081/api/onlyoffice/callback", // 保存文件的回调函数
-                customization: {
-                    "autosave": false, // 关闭自动保存
-                    "comments": false, // 关闭评论
-                    "compactHeader": true, // 紧凑的header
-                    "compactToolbar": false, // 不启用紧凑的header
-                    "compatibleFeatures": false,
-                    "forcesave": true, //强制保存
-                    "help": false, // 隐藏帮助界面
-                    "hideRightMenu": true, // TODO 无效
-                    "hideRulers": true, // 隐藏标尺
-                    "macros": false, // 关闭宏
-                    "mentionShare": false,
-                    "mobileForceView": false,
-                    "plugins": false, // 禁用插件
-                    "toolbarHideFileName": true,
-                    "toolbarNoTabs": false,
-                    "uiTheme": "theme-light", // 编辑页面的主题色
-                },
-                user: { // 启用用户信息
-                    id: userId+"", // 4
-                    name: username // 5
-                },
-            },
-        }),[documentKey, documentTitle, documentUrl, userId, username])
+  // OnlyOffice编辑器配置，采用useMemo的方式，避免不必要的渲染
+  let config = useMemo(() => ({
+    width       : '100%',
+    height      : '100%',
+    type        : 'desktop',
+    documentType: 'word',
+    document    : {
+      fileType   : 'docx',
+      key        : documentKey, // 1
+      title      : documentTitle, //2
+      url        : documentUrl, // 3
+      permissions: {
+        'chat'                   : false,
+        'comment'                : false,
+        'copy'                   : true,
+        'deleteCommentAuthorOnly': false,
+        'download'               : false,
+        'edit'                   : true,
+        'editCommentAuthorOnly'  : false,
+        'fillForms'              : false,
+        'modifyContentControl'   : false,
+        'print'                  : false,
+        'protect'                : false,
+        'review'                 : false,
+      },
+    },
+    editorConfig: {
+      lang         : 'zh-CN',
+      callbackUrl  : 'http://47.111.23.171:8081/api/onlyoffice/callback', // 保存文件的回调函数
+      customization: {
+        'autosave'           : false, // 关闭自动保存
+        'comments'           : false, // 关闭评论
+        'compactHeader'      : true, // 紧凑的header
+        'compactToolbar'     : false, // 不启用紧凑的header
+        'compatibleFeatures' : false,
+        'forcesave'          : true, //强制保存
+        'help'               : false, // 隐藏帮助界面
+        'hideRightMenu'      : true, // TODO 无效
+        'hideRulers'         : true, // 隐藏标尺
+        'macros'             : false, // 关闭宏
+        'mentionShare'       : false,
+        'mobileForceView'    : false,
+        'plugins'            : false, // 禁用插件
+        'toolbarHideFileName': true,
+        'toolbarNoTabs'      : false,
+        'uiTheme'            : 'theme-light', // 编辑页面的主题色
+      },
+      user         : { // 启用用户信息
+        id  : userId + '', // 4
+        name: username, // 5
+      },
+      mode,
+    },
+  }), [documentKey, documentTitle, documentUrl, userId, username]);
 
-    useEffect(() => {}, [config])
+  useEffect(() => {
+  }, [config]);
 
-    const onDocumentReady = function (event: any) {
-        console.log("Document is loaded");
-    };
+  const onDocumentReady = function (event: any) {
+    console.log('Document is loaded');
+  };
 
-    const onLoadComponentError = (errorCode: number, errorDescription: string) => {
-        switch (errorCode) {
-            case -1: // Unknown error loading component
-                console.log(errorDescription);
-                break;
+  const onLoadComponentError = (errorCode: number, errorDescription: string) => {
+    switch (errorCode) {
+      case -1: // Unknown error loading component
+        console.log(errorDescription);
+        break;
 
-            case -2: // Error load DocsAPI from http://documentserver/
-                console.log(errorDescription);
-                break;
+      case -2: // Error load DocsAPI from http://documentserver/
+        console.log(errorDescription);
+        break;
 
-            case -3: // DocsAPI is not defined
-                console.log(errorDescription);
-                break;
-        }
-    };
-
-    const onDocumentStateChange = (event: any) => {
-        onValueChange(event.data)
+      case -3: // DocsAPI is not defined
+        console.log(errorDescription);
+        break;
     }
+  };
+
+  const onDocumentStateChange = (event: any) => {
+    onValueChange?.(event.data);
+  };
 
-    return (
-        <>
-            {documentKey && documentTitle && documentUrl && (
-                <DocumentEditor
-                    id="docxEditor"
-                    documentServerUrl={documentServerUrl}
-                    config={config}
-                    events_onDocumentReady={onDocumentReady}
-                    onLoadComponentError={onLoadComponentError}
-                    events_onDocumentStateChange={onDocumentStateChange}
-                ></DocumentEditor>
-            )}
-        </>
-    )
-})
+  return (
+    <>
+      {documentKey && documentTitle && documentUrl && (
+        <DocumentEditor
+          id="docxEditor"
+          documentServerUrl={documentServerUrl}
+          config={config}
+          events_onDocumentReady={onDocumentReady}
+          onLoadComponentError={onLoadComponentError}
+          events_onDocumentStateChange={onDocumentStateChange}
+        ></DocumentEditor>
+      )}
+    </>
+  );
+});
 
 export default WordEditor;

src/pages/CourseSquare/component/CourseDetails/index.tsx

@@ -1,113 +1,143 @@
-import "./index.scss"
-import {Avatar, Table, Tabs} from "antd";
-import React from "react";
+import './index.scss';
+import { ViewsWordEditor } from '@/components/ViewsWordEditor/ViewsWordEditor';
+import { Avatar, Table, Tabs } from 'antd';
+import React, { useState } from 'react';
 
 
 export function CourseInfo() {
-    return <div>
-        课程简介
-    </div>
+  return <div>
+    课程简介
+  </div>;
 }
 
 
-export function CourseWorkList() {
-    const dataSource = [
-        {
-            desc: '1',
-            publisher: '胡彦斌',
-            date: 32,
-        },
-        {
-            desc: '2',
-            publisher: '胡彦祖',
-            date: 42,
-        },
-    ];
-
-
-    const columns = [
-        {
-            title: '作业描述',
-            dataIndex: 'desc',
-            key: 'desc',
-        },
-        {
-            title: '发布人',
-            dataIndex: 'publisher',
-            key: 'publisher',
-        },
-        {
-            title: '截止日期',
-            dataIndex: 'date',
-            key: 'date',
-        },
-        {
-            title: '详情',
-            dataIndex: 'details',
-            key: 'details',
-            render: () => <Avatar size={32}/>,
-        },
-        {
-            title: '写作',
-            dataIndex: 'writing',
-            key: 'writing',
-            render: () => <Avatar size={32}/>,
-        },
-    ];
-
-
-    return <div>
-        {
-            <Table
-                dataSource={dataSource}
-                columns={columns}
-                pagination={false}
-                // @ts-ignore
-                rowKey={(key, index) => index}
-            />
-        }
-    </div>
+interface CourseWorkListInterface {
+  onClickViewEditor: (row: any) => void;
+}
+
+export function CourseWorkList({ onClickViewEditor }: CourseWorkListInterface) {
+  const dataSource = [
+    {
+      desc     : '1',
+      publisher: '胡彦斌',
+      date     : 32,
+    },
+    {
+      desc     : '2',
+      publisher: '胡彦祖',
+      date     : 42,
+    },
+  ];
+
+
+  const columns = [
+    {
+      title    : '作业描述',
+      dataIndex: 'desc',
+      key      : 'desc',
+    },
+    {
+      title    : '发布人',
+      dataIndex: 'publisher',
+      key      : 'publisher',
+    },
+    {
+      title    : '截止日期',
+      dataIndex: 'date',
+      key      : 'date',
+    },
+    {
+      title    : '详情',
+      dataIndex: 'details',
+      key      : 'details',
+      render   : (...options: any[]) => <Avatar size={32} onClick={onClickViewEditor.bind(null, ...options)}/>,
+    },
+    {
+      title    : '写作',
+      dataIndex: 'writing',
+      key      : 'writing',
+      render   : () => <Avatar size={32}/>,
+    },
+  ];
+
+
+  return <div>
+    {
+      <Table
+        dataSource={dataSource}
+        columns={columns}
+        pagination={false}
+        // @ts-ignore
+        rowKey={(key, index) => index}
+      />
+    }
+  </div>;
 }
 
 export function CourseDetails() {
-    const items = [
-        {
-            label: `课程简介`,
-            key: '课程简介',
-            children: <CourseInfo/>,
-        },
-        {
-            label: `作业列表`,
-            key: '作业列表',
-            children: <CourseWorkList/>
-        }
-    ]
-
-    return <div className="course-details">
-        <div className="course-details-info">
-            <div className="course-details-image">
-
-            </div>
-            <div className="course-details-text">
-                <div className="title">
-                    (课程名称)
-                </div>
-                <div className="item">
-                    任课老师:
-                </div>
-                <div className="item">
-                    目标学生:
-                </div>
-                <div className="item">
-                    起止时间:
-                </div>
-            </div>
+  const [open, setOpen] = useState(false);
+
+  const items = [
+    {
+      label   : `课程简介`,
+      key     : '课程简介',
+      children: <CourseInfo/>,
+    },
+    {
+      label   : `作业列表`,
+      key     : '作业列表',
+      children: <CourseWorkList onClickViewEditor={onClickViewEditor}/>,
+    },
+  ];
+
+
+  function onClickViewEditor(...options: any[]) {
+    console.log(options);
+    setOpen(true);
+  }
+
+  return <>
+    <ViewsWordEditor
+      alert={{
+        open    : open,
+        onOk    : () => setOpen(false),
+        onCancel: () => setOpen(false),
+      }}
+      word={{
+        documentKey  : 'Khirz6zTPdfd7',
+        documentTitle: 'Example Document Title.docx',
+        documentUrl  : 'https://example.com/url-to-example-document.docx',
+        userId       : 1,
+        username     : '111',
+      }}
+    />
+
+    <div className="course-details">
+      <div className="course-details-info">
+        <div className="course-details-image">
+
         </div>
-        <div className="course-tabs">
-            <Tabs
-                defaultValue="课程简介"
-                items={items}
-            />
+        <div className="course-details-text">
+          <div className="title">
+            (课程名称)
+          </div>
+          <div className="item">
+            任课老师:
+          </div>
+          <div className="item">
+            目标学生:
+          </div>
+          <div className="item">
+            起止时间:
+          </div>
         </div>
+      </div>
+      <div className="course-tabs">
+        <Tabs
+          defaultValue="课程简介"
+          items={items}
+        />
+      </div>
     </div>
-}
+  </>;
+}

src/pages/Home/Home.tsx

@@ -11,8 +11,6 @@ interface HomeProps {
 function Home({current}: HomeProps) {
     const store = useStore()
     const state: "teachers" | "student" = store.user.role === 'STUDENT'? 'student': 'teachers';
-
-    console.log(current)
     return (
         <div className="home-container">
             {current === "work" &&

src/pages/Home/component/Silder/index.tsx

@@ -1,51 +1,60 @@
-import { MenuUnfoldOutlined } from "@ant-design/icons";
-import {Spin, Typography} from "antd";
-import { Button } from "@/components/Button/Button";
-import { useState } from "react";
-import "./index.scss";
-import useApis from "@/apis";
-import store from "@/store";
-import useStore from "@/store";
+import useApis from '@/apis';
+import { Button } from '@/components/Button/Button';
+import { ViewsWordEditor } from '@/components/ViewsWordEditor/ViewsWordEditor';
+import useStore from '@/store';
+import { MenuUnfoldOutlined } from '@ant-design/icons';
+import { Spin, Typography } from 'antd';
+import { useState } from 'react';
+import './index.scss';
 
 
 interface ISliderProps {
-    dialogueId: string
+  dialogueId: string;
 }
 
-export const Slider:React.FC<ISliderProps> = ({dialogueId}) => {
-    const apis = useApis()
-    const store = useStore()
+export const Slider: React.FC<ISliderProps> = ({ dialogueId }) => {
+  const apis = useApis();
+  const store = useStore();
 
   const [isShrink, setShrink] = useState(false);
 
-    const [aiRemark, setAiRemark] = useState("")
+  const [aiRemark, setAiRemark] = useState('');
 
-    const [loading, setLoading] = useState(false)
+  const [loading, setLoading] = useState(false);
+
+  const [open, setOpen] = useState(false);
 
   const article =
-    "这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字";
+    '这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字这是一段文字';
 
-  const rootClassName = `slider-content ${isShrink ? "shrink" : ""}`;
+  const rootClassName = `slider-content ${isShrink ? 'shrink' : ''}`;
 
 
-   // 请求重写文章内容
+  // 请求重写文章内容
   const handleRewrite = () => {
-      setLoading(true)
-      apis.rewrite(1, store.user.id)
-          .then((_res: any) => {
-              console.log(_res)
-              setAiRemark(_res.data.data.content)
-          }).catch((_err: any) => {
-          console.log(_err)
-      }).finally(() => {
-          setLoading(false)
-      })
+    setLoading(true);
+    apis.rewrite(1, store.user.id)
+        .then((_res: any) => {
+          console.log(_res);
+          setAiRemark(_res.data.data.content);
+        }).catch((_err: any) => {
+      console.log(_err);
+    }).finally(() => {
+      setLoading(false);
+    });
+  };
+
+  function onClickOpenEditor(content: string) {
+    return () => {
+      setOpen(true);
+    };
   }
 
+
   return (
     <div className={rootClassName}>
       <div className="slider-icons" onClick={() => setShrink(!isShrink)}>
-        <MenuUnfoldOutlined />
+        <MenuUnfoldOutlined/>
       </div>
       <div className="slider-item-box">
         {isShrink && (
@@ -62,9 +71,9 @@ export const Slider:React.FC<ISliderProps> = ({dialogueId}) => {
             <div className="edit-text">
               <Typography.Paragraph
                 ellipsis={{
-                  rows: 2,
+                  rows      : 2,
                   expandable: true,
-                  symbol: "展开",
+                  symbol    : '展开',
                 }}
               >
                 {article}
@@ -75,26 +84,40 @@ export const Slider:React.FC<ISliderProps> = ({dialogueId}) => {
             </div>
             <div>范文、介绍</div>
             <div className="slider-tag">
-              <div className="slider-tag-item">introduction</div>
-              <div className="slider-tag-item">methodology</div>
-              <div className="slider-tag-item">范文样例</div>
+              <div className="slider-tag-item" onClick={onClickOpenEditor('introduction')}>introduction</div>
+              <div className="slider-tag-item" onClick={onClickOpenEditor('methodology')}>methodology</div>
+              <div className="slider-tag-item" onClick={onClickOpenEditor('范文样例')}>范文样例</div>
             </div>
             <div className="edit-box-header">
               智能批改修改意见
               <Button onClick={handleRewrite}>智能批改</Button>
             </div>
-
-                  {
-                      aiRemark === "" ?
-                          <div className="capacity-item"></div>:
-                          <>
-                              <Spin spinning={loading} style={{height: '100%', width: '100%'}}></Spin>
-                              {!loading && <div className={"remark"}>{aiRemark}</div>}
-                          </>
-                  }
+            {
+              aiRemark === '' ?
+                <div className="capacity-item"></div> :
+                <>
+                  <Spin spinning={loading} style={{ height: '100%', width: '100%' }}></Spin>
+                  {!loading && <div className={'remark'}>{aiRemark}</div>}
+                </>
+            }
           </>
         )}
       </div>
+
+      <ViewsWordEditor
+        alert={{
+          open    : open,
+          onOk    : () => setOpen(false),
+          onCancel: () => setOpen(false),
+        }}
+        word={{
+          documentKey  : 'Khirz6zTPdfd7',
+          documentTitle: 'Example Document Title.docx',
+          documentUrl  : 'https://example.com/url-to-example-document.docx',
+          userId       : 1,
+          username     : '111',
+        }}
+      />
     </div>
   );
-}
+};

src/pages/Home/component/TeachersWorkDetails/index.tsx

@@ -1,4 +1,5 @@
 import { Button } from '@/components/Button/Button';
+import WordEditor from '@/components/WordEditor/WordEditor';
 import { IDomEditor, IEditorConfig, IToolbarConfig } from '@wangeditor/editor';
 import { Editor, Toolbar } from '@wangeditor/editor-for-react';
 import { Typography } from 'antd';
@@ -53,7 +54,16 @@ export function TeachersWorkDetailsLeft({ current }: TeachersWorkDetailsLeftProp
     </div>
     <div className="edit-composition">
       <div>作文内容</div>
-      <div className="edit-box"></div>
+      <div className="edit-box">
+        <WordEditor
+          mode="view"
+          documentKey="Khirz6zTPdfd7"
+          documentTitle="Example Document Title.docx"
+          documentUrl="https://example.com/url-to-example-document.docx"
+          userId={1}
+          username="111"
+        />
+      </div>
     </div>
   </div>;
 }

yarn.lock

@@ -5429,11 +5429,6 @@ fs.realpath@^1.0.0:
   resolved "https://r2.cnpmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
   integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
 
-fsevents@^2.3.2, fsevents@~2.3.2:
-  version "2.3.3"
-  resolved "https://r.cnpmjs.org/fsevents/-/fsevents-2.3.3.tgz"
-  integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
-
 function-bind@^1.1.2:
   version "1.1.2"
   resolved "https://r.cnpmjs.org/function-bind/-/function-bind-1.1.2.tgz"