diff --git a/src/common/model/matter/Matter.ts b/src/common/model/matter/Matter.ts
index 94a9753..64d3058 100644
--- a/src/common/model/matter/Matter.ts
+++ b/src/common/model/matter/Matter.ts
@@ -1,4 +1,4 @@
-import { message } from "antd";
+import {message} from "antd";
 import BaseEntity from "../base/BaseEntity";
 import Filter from "../base/filter/Filter";
 import HttpUtil from "../../util/HttpUtil";
@@ -12,13 +12,15 @@ import MimeUtil from "../../util/MimeUtil";
 import StringUtil from "../../util/StringUtil";
 import NumberUtil from "../../util/NumberUtil";
 import SafeUtil from "../../util/SafeUtil";
+import ImagePreviewer from "../../../pages/widget/previewer/ImagePreviewer";
+import BrowserPreviewer from "../../../pages/widget/previewer/BrowserPreviewer";
 
 export default class Matter extends BaseEntity {
   puuid: string = "";
   userUuid: string = "";
   dir: boolean = false;
   alien: boolean = false;
-  name: string | null = null;
+  name: string = "";
   md5: string | null = null;
   size: number = 0;
   privacy: boolean = true;
@@ -177,15 +179,16 @@ export default class Matter extends BaseEntity {
       previewUrl = that.getPreviewUrl();
     }
 
-    // todo preview
-    // if (that.isImage()) {
-    //
-    //   Vue.$photoSwipePlugin.showPhoto(previewUrl)
-    //
-    // } else if (that.isPdf()) {
-    //
-    //   Vue.$previewer.previewPdf(that.name, previewUrl, that.size)
-    //
+
+    if (that.isImage()) {
+
+      ImagePreviewer.showSinglePhoto(previewUrl)
+
+    } else if (that.isPdf()) {
+
+      BrowserPreviewer.show(that.name, previewUrl, that.size)
+
+    }
     // } else if (that.isDoc() || that.isPpt() || that.isXls()) {
     //
     //   //如果是分享中的预览，直接就可以公有访问。
@@ -229,7 +232,7 @@ export default class Matter extends BaseEntity {
     finallyCallback?: any
   ) {
     let that = this;
-    let form = { userUuid: that.userUuid, name: that.name, puuid: that.puuid };
+    let form = {userUuid: that.userUuid, name: that.name, puuid: that.puuid};
 
     return this.httpPost(
       Matter.URL_MATTER_CREATE_DIRECTORY,
@@ -246,7 +249,7 @@ export default class Matter extends BaseEntity {
   httpDelete(successCallback?: any, errorCallback?: any) {
     this.httpPost(
       Matter.URL_MATTER_DELETE,
-      { uuid: this.uuid },
+      {uuid: this.uuid},
       function (response: any) {
         typeof successCallback === "function" && successCallback(response);
       },
@@ -257,7 +260,7 @@ export default class Matter extends BaseEntity {
   httpDeleteBatch(uuids: string, successCallback?: any, errorCallback?: any) {
     this.httpPost(
       Matter.URL_MATTER_DELETE_BATCH,
-      { uuids: uuids },
+      {uuids: uuids},
       function (response: any) {
         typeof successCallback === "function" && successCallback(response);
       },
@@ -274,7 +277,7 @@ export default class Matter extends BaseEntity {
     let that = this;
     this.httpPost(
       Matter.URL_MATTER_RENAME,
-      { uuid: this.uuid, name: name },
+      {uuid: this.uuid, name: name},
       function (response: any) {
         that.assign(response.data.data);
         typeof successCallback === "function" && successCallback(response);
@@ -292,7 +295,7 @@ export default class Matter extends BaseEntity {
     let that = this;
     this.httpPost(
       Matter.URL_CHANGE_PRIVACY,
-      { uuid: this.uuid, privacy: privacy },
+      {uuid: this.uuid, privacy: privacy},
       function (response: any) {
         that.privacy = privacy;
         if (typeof successCallback === "function") {
@@ -312,7 +315,7 @@ export default class Matter extends BaseEntity {
     successCallback?: any,
     errorCallback?: any
   ) {
-    let form: any = { srcUuids: srcUuids };
+    let form: any = {srcUuids: srcUuids};
     if (destUuid) {
       form.destUuid = destUuid;
     } else {
diff --git a/src/pages/matter/widget/MatterPanel.tsx b/src/pages/matter/widget/MatterPanel.tsx
index 37dfc3e..ff8f7ea 100644
--- a/src/pages/matter/widget/MatterPanel.tsx
+++ b/src/pages/matter/widget/MatterPanel.tsx
@@ -19,8 +19,8 @@ import {
   DeleteFilled,
   ExclamationCircleFilled,
 } from "@ant-design/icons";
-import { Modal, Checkbox } from "antd";
-import { CheckboxChangeEvent } from "antd/es/checkbox";
+import {Modal, Checkbox} from "antd";
+import {CheckboxChangeEvent} from "antd/es/checkbox";
 import SafeUtil from "../../../common/util/SafeUtil";
 
 interface IProps {
@@ -33,7 +33,8 @@ interface IProps {
   onGoToDirectory?: (id: string) => any;
 }
 
-interface IState {}
+interface IState {
+}
 
 export default class MatterPanel extends TankComponent<IProps, IState> {
   //正在重命名的临时字段
@@ -50,7 +51,7 @@ export default class MatterPanel extends TankComponent<IProps, IState> {
   }
 
   prepareRename = () => {
-    const { matter, director } = this.props;
+    const {matter, director} = this.props;
     if (director.isEditing()) {
       console.error("导演正忙着，不予执行");
       return;
@@ -86,7 +87,7 @@ export default class MatterPanel extends TankComponent<IProps, IState> {
   deleteMatter = () => {
     Modal.confirm({
       title: "此操作不可撤回, 是否继续?",
-      icon: <ExclamationCircleFilled twoToneColor="#FFDC00" />,
+      icon: <ExclamationCircleFilled twoToneColor="#FFDC00"/>,
       onOk: () => {
         this.props.matter.httpDelete(() => {
           MessageBoxUtil.success("操作成功");
@@ -106,7 +107,7 @@ export default class MatterPanel extends TankComponent<IProps, IState> {
     if (this.renamingLoading) {
       return;
     }
-    const { matter, director } = this.props;
+    const {matter, director} = this.props;
     this.renamingLoading = true;
 
     matter.httpRename(
@@ -130,7 +131,7 @@ export default class MatterPanel extends TankComponent<IProps, IState> {
   };
 
   finishCreateDirectory = () => {
-    const { matter, director, onCreateDirectoryCallback } = this.props;
+    const {matter, director, onCreateDirectoryCallback} = this.props;
     matter.name = this.renameMatterName;
     matter.httpCreateDirectory(
       () => {
@@ -148,7 +149,7 @@ export default class MatterPanel extends TankComponent<IProps, IState> {
   };
 
   blurTrigger = () => {
-    const { matter, director } = this.props;
+    const {matter, director} = this.props;
     if (matter.editMode) {
       if (director.createMode) {
         this.finishCreateDirectory();
@@ -180,12 +181,16 @@ export default class MatterPanel extends TankComponent<IProps, IState> {
   };
 
   clickRow = () => {
-    const { matter, director, onGoToDirectory, onPreviewImage } = this.props;
+
+
+    const {matter, director, onGoToDirectory, onPreviewImage} = this.props;
     if (director.isEditing()) {
       console.error("导演正忙着，不予执行");
       return;
     }
 
+
+
     if (matter.dir) {
       onGoToDirectory!(matter.uuid!);
     } else {
@@ -193,13 +198,15 @@ export default class MatterPanel extends TankComponent<IProps, IState> {
       if (matter.isImage()) {
         onPreviewImage!(matter);
       } else {
+
+
         matter.preview();
       }
     }
   };
 
   render() {
-    const { matter } = this.props;
+    const {matter} = this.props;
     return (
       <div className="widget-matter-panel">
         <div onClick={e => SafeUtil.stopPropagationWrap(e)(this.clickRow())}>
@@ -214,7 +221,7 @@ export default class MatterPanel extends TankComponent<IProps, IState> {
                   />
                 </span>
                 <span className="basic-span">
-                  <img className="matter-icon" src={matter.getIcon()} />
+                  <img className="matter-icon" src={matter.getIcon()}/>
                 </span>
               </div>
             </div>
@@ -297,7 +304,7 @@ export default class MatterPanel extends TankComponent<IProps, IState> {
                   <span className="matter-name">
                     {matter.name}
                     {!matter.dir && !matter.privacy && (
-                      <UnlockFilled className="icon" />
+                      <UnlockFilled className="icon"/>
                     )}
                   </span>
                 )}
diff --git a/src/pages/widget/previewer/BrowserPreviewer.less b/src/pages/widget/previewer/BrowserPreviewer.less
new file mode 100644
index 0000000..d247386
--- /dev/null
+++ b/src/pages/widget/previewer/BrowserPreviewer.less
@@ -0,0 +1,38 @@
+.browser-previewer {
+
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  z-index: 1000;
+  background: #333;
+  color: #eee;
+
+  display: flex;
+  flex-direction: column;
+
+  .title-bar {
+    height: 40px;
+
+    text-align: center;
+    line-height: 40px;
+    font-size: 16px;
+    border-bottom: 1px solid #555;
+
+    .close {
+      float: right;
+      margin-right: 20px;
+
+    }
+  }
+
+  .frame-area {
+    flex: 1;
+
+    iframe {
+      border: 0;
+    }
+  }
+}
diff --git a/src/pages/widget/previewer/BrowserPreviewer.tsx b/src/pages/widget/previewer/BrowserPreviewer.tsx
new file mode 100644
index 0000000..c9a5b1a
--- /dev/null
+++ b/src/pages/widget/previewer/BrowserPreviewer.tsx
@@ -0,0 +1,87 @@
+import "./BrowserPreviewer.less"
+import React from "react";
+import * as ReactDOM from 'react-dom';
+import FileUtil from "../../../common/util/FileUtil";
+import {CloseOutlined} from "@ant-design/icons";
+import {Tooltip} from "antd";
+
+interface IProps {
+  name: string
+  url: string
+  size: number
+  onClose: () => void
+}
+
+interface IState {
+
+}
+
+/**
+ * 浏览器预览器
+ * 浏览器支持的预览格式统统交由它处理
+ */
+export default class BrowserPreviewer extends React.Component<IProps, IState> {
+
+  constructor(props: IProps) {
+    super(props);
+    this.state = {};
+  }
+
+  componentDidMount() {
+
+  }
+
+  //展示一系列图片
+  static show(name: string, url: string, size: number) {
+
+    let that = this;
+
+    const div: Element = document.createElement('div');
+    document.body.appendChild(div);
+
+    let element: React.ReactElement = React.createElement(
+      BrowserPreviewer,
+      {
+        name: name,
+        url: url,
+        size: size,
+        onClose: () => {
+          //删除所有节点。
+          const unmountResult = ReactDOM.unmountComponentAtNode(div);
+          if (unmountResult && div.parentNode) {
+
+            div.parentNode.removeChild(div);
+
+          }
+        }
+      }
+    )
+
+    //将react组件挂载到div中去。
+    ReactDOM.render(element, div);
+
+  }
+
+  render() {
+    return <div className="browser-previewer">
+      <div className="title-bar">
+
+        {this.props.name}({FileUtil.humanFileSize(this.props.size)})
+
+        <span className="close btn-action">
+          <CloseOutlined onClick={() => {
+            this.props.onClose()
+          }}/>
+        </span>
+
+      </div>
+      <div className="frame-area">
+        <iframe width="100%" height="100%" src={this.props.url}>
+          iframe may not supported.
+        </iframe>
+      </div>
+    </div>
+  }
+
+}
+
diff --git a/src/pages/widget/previewer/ImagePreviewer.tsx b/src/pages/widget/previewer/ImagePreviewer.tsx
index 5515799..21c8a09 100644
--- a/src/pages/widget/previewer/ImagePreviewer.tsx
+++ b/src/pages/widget/previewer/ImagePreviewer.tsx
@@ -5,9 +5,14 @@ import PhotoSwipeUIDefault from 'photoswipe/dist/photoswipe-ui-default'
 import "photoswipe/dist/photoswipe.css";
 import "photoswipe/dist/default-skin/default-skin.css";
 
+
+/**
+ * 图片预览器
+ * 支持预览一张图片或者多张图片
+ */
 export default class ImagePreviewer {
 
-  static pswpDom(): HTMLElement {
+  private static pswpDom(): HTMLElement {
     let innerHTML = `
     <!-- Background of PhotoSwipe.
          It's a separate element as animating opacity is faster than rgba(). -->