diff --git a/CHANGELOG.md b/CHANGELOG.md
index a927c5f..2fb7ff9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,4 +2,5 @@
 1. 增加云盘剩余容量显示
 2. 优化拖拽文件夹进行上传的错误提示
 3. 优化超出限制大小的错误提示
-4. 修复一些已知问题
+4. 文件列表页右键展示操作目录
+5. 修复一些已知问题
diff --git a/src/pages/matter/widget/MatterPanel.tsx b/src/pages/matter/widget/MatterPanel.tsx
index 1c0b321..e1799b2 100644
--- a/src/pages/matter/widget/MatterPanel.tsx
+++ b/src/pages/matter/widget/MatterPanel.tsx
@@ -1,572 +1,567 @@
-import React from "react";
-import Matter from "../../../common/model/matter/Matter";
-import TankComponent from "../../../common/component/TankComponent";
-import Director from "./Director";
-import "./MatterPanel.less";
-import Sun from "../../../common/model/global/Sun";
-import StringUtil from "../../../common/util/StringUtil";
-import DateUtil from "../../../common/util/DateUtil";
-import AnimateUtil from "../../../common/util/AnimateUtil";
-import MessageBoxUtil from "../../../common/util/MessageBoxUtil";
-import Expanding from "../../widget/Expanding";
+import React from 'react';
+import Matter from '../../../common/model/matter/Matter';
+import TankComponent from '../../../common/component/TankComponent';
+import Director from './Director';
+import './MatterPanel.less';
+import Sun from '../../../common/model/global/Sun';
+import StringUtil from '../../../common/util/StringUtil';
+import DateUtil from '../../../common/util/DateUtil';
+import AnimateUtil from '../../../common/util/AnimateUtil';
+import MessageBoxUtil from '../../../common/util/MessageBoxUtil';
+import Expanding from '../../widget/Expanding';
 import {
-  LockOutlined,
-  UnlockOutlined,
-  DownloadOutlined,
-  ExclamationCircleFilled,
-  LinkOutlined,
-  DeleteOutlined,
-  EditOutlined,
-  InfoCircleOutlined,
-  EllipsisOutlined,
-  RedoOutlined,
-  CloseCircleOutlined,
-} from "@ant-design/icons";
-import { Modal, Checkbox, Tooltip } from "antd";
-import { CheckboxChangeEvent } from "antd/es/checkbox";
-import SafeUtil from "../../../common/util/SafeUtil";
-import ClipboardUtil from "../../../common/util/ClipboardUtil";
-import Lang from "../../../common/model/global/Lang";
-import MatterDeleteModal from "./MatterDeleteModal";
+    LockOutlined,
+    UnlockOutlined,
+    DownloadOutlined,
+    ExclamationCircleFilled,
+    LinkOutlined,
+    DeleteOutlined,
+    EditOutlined,
+    InfoCircleOutlined,
+    EllipsisOutlined,
+    RedoOutlined,
+    CloseCircleOutlined,
+} from '@ant-design/icons';
+import { Modal, Checkbox, Tooltip, Dropdown, Menu } from 'antd';
+import { CheckboxChangeEvent } from 'antd/es/checkbox';
+import SafeUtil from '../../../common/util/SafeUtil';
+import ClipboardUtil from '../../../common/util/ClipboardUtil';
+import Lang from '../../../common/model/global/Lang';
+import MatterDeleteModal from './MatterDeleteModal';
 
 interface IProps {
-  matter: Matter;
-  recycleMode?: boolean; // 回收站模式，默认false，简化相关操作，不可进入文件夹里
-  director?: Director;
-  onCreateDirectoryCallback?: () => any;
-  onDeleteSuccess?: () => any;
-  onRecoverySuccess?: () => any;
-  onCheckMatter?: (matter?: Matter) => any;
-  onPreviewImage?: (matter: Matter) => any;
-  onGoToDirectory?: (id: string) => any;
+    matter: Matter;
+    recycleMode?: boolean; // 回收站模式，默认false，简化相关操作，不可进入文件夹里
+    director?: Director;
+    onCreateDirectoryCallback?: () => any;
+    onDeleteSuccess?: () => any;
+    onRecoverySuccess?: () => any;
+    onCheckMatter?: (matter?: Matter) => any;
+    onPreviewImage?: (matter: Matter) => any;
+    onGoToDirectory?: (id: string) => any;
 }
 
 interface IState {}
 
 export default class MatterPanel extends TankComponent<IProps, IState> {
-  // 正在重命名的临时字段
-  renameMatterName: string = "";
-  // 正在向服务器提交rename的请求
-  renamingLoading: boolean = false;
-  // 小屏幕下操作栏
-  showMore: boolean = false;
+    // 正在重命名的临时字段
+    renameMatterName: string = '';
+    // 正在向服务器提交rename的请求
+    renamingLoading: boolean = false;
+    // 小屏幕下操作栏
+    showMore: boolean = false;
 
-  inputRef = React.createRef<HTMLInputElement>();
+    inputRef = React.createRef<HTMLInputElement>();
 
-  constructor(props: IProps) {
-    super(props);
-    this.state = {};
-  }
-
-  prepareRename() {
-    const { matter, director } = this.props;
-    if (director!.isEditing()) {
-      console.error("导演正忙着，不予执行");
-      return;
+    constructor(props: IProps) {
+        super(props);
+        this.state = {};
     }
 
-    //告诉导演，自己正在编辑
-    director!.renameMode = true;
-    matter.editMode = true;
-    this.renameMatterName = matter.name!;
-    this.updateUI();
-    setTimeout(() => {
-      if (!this.inputRef.current) return;
-      //如果是文件夹，全选中
-      let dotIndex = matter.name!.lastIndexOf(".");
-      if (dotIndex === -1) {
-        AnimateUtil.setInputSelection(
-          this.inputRef.current,
-          0,
-          this.renameMatterName.length
+    prepareRename() {
+        const { matter, director } = this.props;
+        if (director!.isEditing()) {
+            console.error('导演正忙着，不予执行');
+            return;
+        }
+
+        //告诉导演，自己正在编辑
+        director!.renameMode = true;
+        matter.editMode = true;
+        this.renameMatterName = matter.name!;
+        this.updateUI();
+        setTimeout(() => {
+            if (!this.inputRef.current) return;
+            //如果是文件夹，全选中
+            let dotIndex = matter.name!.lastIndexOf('.');
+            if (dotIndex === -1) {
+                AnimateUtil.setInputSelection(
+                    this.inputRef.current,
+                    0,
+                    this.renameMatterName.length,
+                );
+            } else {
+                AnimateUtil.setInputSelection(this.inputRef.current, 0, dotIndex);
+            }
+        });
+    }
+
+    clipboard() {
+        let textToCopy = this.props.matter.getDownloadUrl();
+        ClipboardUtil.copy(textToCopy, () => {
+            MessageBoxUtil.success(Lang.t('operationSuccess'));
+        });
+    }
+
+    deleteMatter() {
+        MatterDeleteModal.open(
+            () => {
+                this.props.matter.httpSoftDelete(() => {
+                    MessageBoxUtil.success(Lang.t('operationSuccess'));
+                    this.props.onDeleteSuccess!();
+                });
+            },
+            () => {
+                this.props.matter.httpDelete(() => {
+                    MessageBoxUtil.success(Lang.t('operationSuccess'));
+                    this.props.onDeleteSuccess!();
+                });
+            },
         );
-      } else {
-        AnimateUtil.setInputSelection(this.inputRef.current, 0, dotIndex);
-      }
-    });
-  };
+    }
 
-  clipboard() {
-    let textToCopy = this.props.matter.getDownloadUrl();
-    ClipboardUtil.copy(textToCopy, () => {
-      MessageBoxUtil.success(Lang.t("operationSuccess"));
-    });
-  };
-
-  deleteMatter() {
-    MatterDeleteModal.open(
-      () => {
-        this.props.matter.httpSoftDelete(() => {
-          MessageBoxUtil.success(Lang.t("operationSuccess"));
-          this.props.onDeleteSuccess!();
+    hardDeleteMatter() {
+        Modal.confirm({
+            title: Lang.t('actionCanNotRevertConfirm'),
+            icon: <ExclamationCircleFilled twoToneColor="#FFDC00" />,
+            onOk: () => {
+                this.props.matter.httpDelete(() => {
+                    MessageBoxUtil.success(Lang.t('operationSuccess'));
+                    this.props.onDeleteSuccess!();
+                });
+            },
         });
-      },
-      () => {
-        this.props.matter.httpDelete(() => {
-          MessageBoxUtil.success(Lang.t("operationSuccess"));
-          this.props.onDeleteSuccess!();
+    }
+
+    recoveryMatter() {
+        Modal.confirm({
+            title: Lang.t('actionRecoveryConfirm'),
+            icon: <ExclamationCircleFilled twoToneColor="#FFDC00" />,
+            onOk: () => {
+                this.props.matter.httpRecovery(() => {
+                    MessageBoxUtil.success(Lang.t('operationSuccess'));
+                    this.props.onRecoverySuccess!();
+                });
+            },
         });
-      }
-    );
-  };
+    }
 
-  hardDeleteMatter() {
-    Modal.confirm({
-      title: Lang.t("actionCanNotRevertConfirm"),
-      icon: <ExclamationCircleFilled twoToneColor="#FFDC00" />,
-      onOk: () => {
-        this.props.matter.httpDelete(() => {
-          MessageBoxUtil.success(Lang.t("operationSuccess"));
-          this.props.onDeleteSuccess!();
+    changeMatterName(e: any) {
+        this.renameMatterName = e.currentTarget.value;
+        this.updateUI();
+    }
+
+    finishRename() {
+        //有可能按enter的时候和blur同时了。
+        if (this.renamingLoading) {
+            return;
+        }
+        const { matter, director } = this.props;
+        this.renamingLoading = true;
+
+        matter.httpRename(
+            this.renameMatterName,
+            () => {
+                this.renamingLoading = false;
+                MessageBoxUtil.success(Lang.t('operationSuccess'));
+                //告诉导演，自己编辑完毕
+                director!.renameMode = false;
+                matter.editMode = false;
+            },
+            (msg: string) => {
+                this.renamingLoading = false;
+                MessageBoxUtil.error(msg);
+                //告诉导演，自己编辑完毕
+                director!.renameMode = false;
+                matter.editMode = false;
+            },
+            () => this.updateUI(),
+        );
+    }
+
+    finishCreateDirectory() {
+        const { matter, director, onCreateDirectoryCallback } = this.props;
+        matter.name = this.renameMatterName;
+        matter.httpCreateDirectory(
+            () => {
+                director!.createMode = false;
+                matter.editMode = false;
+                matter.assign(new Matter());
+            },
+            (msg: string) => {
+                director!.createMode = false;
+                matter.editMode = false;
+                MessageBoxUtil.error(msg);
+            },
+            () => onCreateDirectoryCallback!(),
+        );
+    }
+
+    blurTrigger() {
+        const { matter, director } = this.props;
+        if (matter.editMode) {
+            if (director!.createMode) {
+                this.finishCreateDirectory();
+            } else if (director!.renameMode) {
+                this.finishRename();
+            }
+        }
+    }
+
+    enterTrigger(e: any) {
+        if (e.key.toLowerCase() === 'enter') {
+            this.inputRef.current!.blur();
+        }
+    }
+
+    changePrivacy(privacy: boolean) {
+        this.props.matter.httpChangePrivacy(privacy, () => {
+            this.updateUI();
         });
-      },
-    });
-  };
-
-  recoveryMatter() {
-    Modal.confirm({
-      title: Lang.t("actionRecoveryConfirm"),
-      icon: <ExclamationCircleFilled twoToneColor="#FFDC00" />,
-      onOk: () => {
-        this.props.matter.httpRecovery(() => {
-          MessageBoxUtil.success(Lang.t("operationSuccess"));
-          this.props.onRecoverySuccess!();
-        });
-      },
-    });
-  };
-
-  changeMatterName(e: any) {
-    this.renameMatterName = e.currentTarget.value;
-    this.updateUI();
-  };
-
-  finishRename() {
-    //有可能按enter的时候和blur同时了。
-    if (this.renamingLoading) {
-      return;
-    }
-    const { matter, director } = this.props;
-    this.renamingLoading = true;
-
-    matter.httpRename(
-      this.renameMatterName,
-      () => {
-        this.renamingLoading = false;
-        MessageBoxUtil.success(Lang.t("operationSuccess"));
-        //告诉导演，自己编辑完毕
-        director!.renameMode = false;
-        matter.editMode = false;
-      },
-      (msg: string) => {
-        this.renamingLoading = false;
-        MessageBoxUtil.error(msg);
-        //告诉导演，自己编辑完毕
-        director!.renameMode = false;
-        matter.editMode = false;
-      },
-      () => this.updateUI()
-    );
-  };
-
-  finishCreateDirectory() {
-    const { matter, director, onCreateDirectoryCallback } = this.props;
-    matter.name = this.renameMatterName;
-    matter.httpCreateDirectory(
-      () => {
-        director!.createMode = false;
-        matter.editMode = false;
-        matter.assign(new Matter());
-      },
-      (msg: string) => {
-        director!.createMode = false;
-        matter.editMode = false;
-        MessageBoxUtil.error(msg);
-      },
-      () => onCreateDirectoryCallback!()
-    );
-  };
-
-  blurTrigger() {
-    const { matter, director } = this.props;
-    if (matter.editMode) {
-      if (director!.createMode) {
-        this.finishCreateDirectory();
-      } else if (director!.renameMode) {
-        this.finishRename();
-      }
-    }
-  };
-
-  enterTrigger(e: any) {
-    if (e.key.toLowerCase() === "enter") {
-      this.inputRef.current!.blur();
-    }
-  };
-
-  changePrivacy(privacy: boolean) {
-    this.props.matter.httpChangePrivacy(privacy, () => {
-      this.updateUI();
-    });
-  };
-
-  checkToggle(e: CheckboxChangeEvent) {
-    this.props.matter.check = e.target.checked;
-    this.props.onCheckMatter!(this.props.matter);
-  };
-
-  highLight() {
-    this.inputRef.current!.select();
-  };
-
-  clickRow() {
-    const {
-      matter,
-      recycleMode = false,
-      director,
-      onGoToDirectory,
-      onPreviewImage,
-    } = this.props;
-    if (director && director.isEditing()) {
-      console.error("导演正忙着，不予执行");
-      return;
     }
 
-    if (matter.dir) {
-      if (recycleMode) return;
-      onGoToDirectory!(matter.uuid!);
-    } else {
-      //图片进行预览操作
-      if (matter.isImage()) {
-        onPreviewImage!(matter);
-      } else {
-        matter.preview();
-      }
+    checkToggle(e: CheckboxChangeEvent) {
+        this.props.matter.check = e.target.checked;
+        this.props.onCheckMatter!(this.props.matter);
     }
-  };
 
-  toggleHandles() {
-    this.showMore = !this.showMore;
-    this.updateUI();
-  };
+    highLight() {
+        this.inputRef.current!.select();
+    }
 
-  renderPcOperation() {
-    const { matter, recycleMode = false } = this.props;
+    clickRow() {
+        const {
+            matter,
+            recycleMode = false,
+            director,
+            onGoToDirectory,
+            onPreviewImage,
+        } = this.props;
+        if (director && director.isEditing()) {
+            console.error('导演正忙着，不予执行');
+            return;
+        }
 
-    // 文件操作在正常模式 or 回收站模式下不同，其中回收站模式只保留查看信息与彻底删除操作
-    const handles = recycleMode ? (
-      <>
-        <Tooltip title={Lang.t("matter.recovery")}>
-          <RedoOutlined
-            className="btn-action"
-            onClick={(e) =>
-              SafeUtil.stopPropagationWrap(e)(this.recoveryMatter())
+        if (matter.dir) {
+            if (recycleMode) return;
+            onGoToDirectory!(matter.uuid!);
+        } else {
+            //图片进行预览操作
+            if (matter.isImage()) {
+                onPreviewImage!(matter);
+            } else {
+                matter.preview();
             }
-          />
-        </Tooltip>
-        <Tooltip title={Lang.t("matter.fileDetail")}>
-          <InfoCircleOutlined
-            className="btn-action"
-            onClick={(e) =>
-              SafeUtil.stopPropagationWrap(e)(
-                Sun.navigateTo("/matter/detail/" + matter.uuid)
-              )
-            }
-          />
-        </Tooltip>
-        <Tooltip title={Lang.t("matter.hardDelete")}>
-          <CloseCircleOutlined
-            className="btn-action text-danger"
-            onClick={(e) =>
-              SafeUtil.stopPropagationWrap(e)(this.hardDeleteMatter())
-            }
-          />
-        </Tooltip>
-      </>
-    ) : (
-      <>
-        {!matter.dir && matter.privacy && (
-          <Tooltip title={Lang.t("matter.setPublic")}>
-            <UnlockOutlined
-              className="btn-action"
-              onClick={(e) =>
-                SafeUtil.stopPropagationWrap(e)(this.changePrivacy(false))
-              }
-            />
-          </Tooltip>
-        )}
-        {!matter.dir && !matter.privacy && (
-          <Tooltip title={Lang.t("matter.setPrivate")}>
-            <LockOutlined
-              className="btn-action"
-              onClick={(e) =>
-                SafeUtil.stopPropagationWrap(e)(this.changePrivacy(true))
-              }
-            />
-          </Tooltip>
-        )}
-        <Tooltip title={Lang.t("matter.fileDetail")}>
-          <InfoCircleOutlined
-            className="btn-action"
-            onClick={(e) =>
-              SafeUtil.stopPropagationWrap(e)(
-                Sun.navigateTo("/matter/detail/" + matter.uuid)
-              )
-            }
-          />
-        </Tooltip>
-        <Tooltip title={Lang.t("matter.rename")}>
-          <EditOutlined
-            className="btn-action"
-            onClick={(e) =>
-              SafeUtil.stopPropagationWrap(e)(this.prepareRename())
-            }
-          />
-        </Tooltip>
-        <Tooltip title={Lang.t("matter.copyPath")}>
-          <LinkOutlined
-            className="btn-action"
-            onClick={(e) => SafeUtil.stopPropagationWrap(e)(this.clipboard())}
-          />
-        </Tooltip>
-        <Tooltip title={Lang.t("matter.download")}>
-          <DownloadOutlined
-            className="btn-action"
-            onClick={(e) => SafeUtil.stopPropagationWrap(e)(matter.download())}
-          />
-        </Tooltip>
-        <Tooltip title={Lang.t("matter.delete")}>
-          <DeleteOutlined
-            className="btn-action text-danger"
-            onClick={(e) =>
-              SafeUtil.stopPropagationWrap(e)(this.deleteMatter())
-            }
-          />
-        </Tooltip>
-      </>
-    );
+        }
+    }
 
-    return (
-      <div className="right-part">
-        <span className="matter-operation text-theme">{handles}</span>
-        <Tooltip title={Lang.t("matter.size")}>
-          <span className="matter-size">
-            {StringUtil.humanFileSize(matter.size)}
-          </span>
-        </Tooltip>
-        {recycleMode ? (
-          <Tooltip title={Lang.t("matter.deleteTime")}>
-            <span className="matter-date mr10">
-              {DateUtil.simpleDateHourMinute(matter.deleteTime)}
-            </span>
-          </Tooltip>
-        ) : (
-          <Tooltip title={Lang.t("matter.updateTime")}>
-            <span className="matter-date mr10">
-              {DateUtil.simpleDateHourMinute(matter.updateTime)}
-            </span>
-          </Tooltip>
-        )}
-      </div>
-    );
-  };
+    toggleHandles() {
+        this.showMore = !this.showMore;
+        this.updateUI();
+    }
 
-  renderMobileOperation() {
-    const { matter, recycleMode = false } = this.props;
+    renderPcOperation() {
+        const { matter, recycleMode = false } = this.props;
 
-    // 文件操作在正常模式 or 回收站模式下不同，其中回收站模式只保留查看信息与彻底删除操作
-    const handles = recycleMode ? (
-      <>
-        <div
-          className="cell-btn navy"
-          onClick={(e) =>
-            SafeUtil.stopPropagationWrap(e)(
-              Sun.navigateTo("/matter/detail/" + matter.uuid)
-            )
-          }
-        >
-          <InfoCircleOutlined className="btn-action mr5" />
-          {Lang.t("matter.fileDetail")}
-        </div>
-        <div
-          className="cell-btn navy"
-          onClick={(e) =>
-            SafeUtil.stopPropagationWrap(e)(this.recoveryMatter())
-          }
-        >
-          <RedoOutlined className="btn-action mr5" />
-          {Lang.t("matter.recovery")}
-        </div>
-        <div
-          className="cell-btn text-danger"
-          onClick={(e) =>
-            SafeUtil.stopPropagationWrap(e)(this.hardDeleteMatter())
-          }
-        >
-          <CloseCircleOutlined className="btn-action mr5" />
-          {Lang.t("matter.hardDelete")}
-        </div>
-      </>
-    ) : (
-      <>
-        {!matter.dir && matter.privacy && (
-          <div
-            className="cell-btn navy"
-            onClick={(e) =>
-              SafeUtil.stopPropagationWrap(e)(this.changePrivacy(false))
-            }
-          >
-            <UnlockOutlined className="btn-action mr5" />
-            {Lang.t("matter.setPublic")}
-          </div>
-        )}
-
-        {!matter.dir && !matter.privacy && (
-          <div
-            className="cell-btn navy"
-            onClick={(e) =>
-              SafeUtil.stopPropagationWrap(e)(this.changePrivacy(true))
-            }
-          >
-            <LockOutlined className="btn-action mr5" />
-            {Lang.t("matter.setPrivate")}
-          </div>
-        )}
-
-        <div
-          className="cell-btn navy"
-          onClick={(e) =>
-            SafeUtil.stopPropagationWrap(e)(
-              Sun.navigateTo("/matter/detail/" + matter.uuid)
-            )
-          }
-        >
-          <InfoCircleOutlined className="btn-action mr5" />
-          {Lang.t("matter.fileDetail")}
-        </div>
-        <div
-          className="cell-btn navy"
-          onClick={(e) => SafeUtil.stopPropagationWrap(e)(this.prepareRename())}
-        >
-          <EditOutlined className="btn-action mr5" />
-          {Lang.t("matter.rename")}
-        </div>
-        <div
-          className="cell-btn navy"
-          onClick={(e) => SafeUtil.stopPropagationWrap(e)(this.clipboard())}
-        >
-          <LinkOutlined className="btn-action mr5" />
-          {Lang.t("matter.copyLink")}
-        </div>
-        <div
-          className="cell-btn navy"
-          onClick={(e) => SafeUtil.stopPropagationWrap(e)(matter.download())}
-        >
-          <DownloadOutlined className="btn-action mr5" />
-          {Lang.t("matter.download")}
-        </div>
-        <div
-          className="cell-btn text-danger"
-          onClick={(e) => SafeUtil.stopPropagationWrap(e)(this.deleteMatter())}
-        >
-          <DeleteOutlined className="btn-action mr5" />
-          {Lang.t("matter.delete")}
-        </div>
-      </>
-    );
-
-    return (
-      <div className="more-panel">
-        <div className="cell-btn navy text">
-          <span>
-            {DateUtil.simpleDateHourMinute(
-              recycleMode ? matter.deleteTime : matter.updateTime
-            )}
-          </span>
-          <span className="matter-size">
-            {StringUtil.humanFileSize(matter.size)}
-          </span>
-        </div>
-        {handles}
-      </div>
-    );
-  };
-
-  render() {
-    const { matter } = this.props;
-
-    return (
-      <div className="widget-matter-panel">
-        <div onClick={(e) => SafeUtil.stopPropagationWrap(e)(this.clickRow())}>
-          <div className="media clearfix">
-            <div className="pull-left">
-              <div className="left-part">
-                <span
-                  className="cell cell-hot"
-                  onClick={(e) => SafeUtil.stopPropagationWrap(e)}
-                >
-                  <Checkbox
-                    checked={matter.check}
-                    onChange={e => this.checkToggle(e)}
-                  />
-                </span>
-                <span className="cell">
-                  <img className="matter-icon" src={matter.getIcon()} />
-                </span>
-              </div>
-            </div>
-
-            {/*在大屏幕下的操作栏*/}
-            <div className="pull-right visible-pc">
-              {matter.uuid && this.renderPcOperation()}
-            </div>
-
-            <div className="pull-right visible-mobile">
-              <span
-                className="more-btn"
-                onClick={(e) =>
-                  SafeUtil.stopPropagationWrap(e)(this.toggleHandles())
-                }
-              >
-                <EllipsisOutlined className="btn-action navy f18" />
-              </span>
-            </div>
-
-            <div className="media-body">
-              <div className="middle-part">
-                {matter.editMode ? (
-                  <span className="matter-name-edit">
-                    <input
-                      ref={this.inputRef}
-                      className={matter.uuid!}
-                      value={this.renameMatterName}
-                      onChange={e => this.changeMatterName(e)}
-                      placeholder={Lang.t("matter.enterName")}
-                      onBlur={() => this.blurTrigger()}
-                      onKeyUp={e => this.enterTrigger(e)}
+        // 文件操作在正常模式 or 回收站模式下不同，其中回收站模式只保留查看信息与彻底删除操作
+        const handles = recycleMode ? (
+            <>
+                <Tooltip title={Lang.t('matter.recovery')}>
+                    <RedoOutlined
+                        className="btn-action"
+                        onClick={(e) => SafeUtil.stopPropagationWrap(e)(this.recoveryMatter())}
                     />
-                  </span>
-                ) : (
-                  <span className="matter-name">
-                    {matter.name}
-                    {!matter.dir && !matter.privacy && (
-                      <Tooltip
-                        title={Lang.t("matter.publicFileEveryoneCanVisit")}
-                      >
-                        <UnlockOutlined className="icon" />
-                      </Tooltip>
-                    )}
-                  </span>
+                </Tooltip>
+                <Tooltip title={Lang.t('matter.fileDetail')}>
+                    <InfoCircleOutlined
+                        className="btn-action"
+                        onClick={(e) =>
+                            SafeUtil.stopPropagationWrap(e)(
+                                Sun.navigateTo('/matter/detail/' + matter.uuid),
+                            )
+                        }
+                    />
+                </Tooltip>
+                <Tooltip title={Lang.t('matter.hardDelete')}>
+                    <CloseCircleOutlined
+                        className="btn-action text-danger"
+                        onClick={(e) => SafeUtil.stopPropagationWrap(e)(this.hardDeleteMatter())}
+                    />
+                </Tooltip>
+            </>
+        ) : (
+            <>
+                {!matter.dir && matter.privacy && (
+                    <Tooltip title={Lang.t('matter.setPublic')}>
+                        <UnlockOutlined
+                            className="btn-action"
+                            onClick={(e) =>
+                                SafeUtil.stopPropagationWrap(e)(this.changePrivacy(false))
+                            }
+                        />
+                    </Tooltip>
                 )}
-              </div>
-            </div>
-          </div>
-        </div>
+                {!matter.dir && !matter.privacy && (
+                    <Tooltip title={Lang.t('matter.setPrivate')}>
+                        <LockOutlined
+                            className="btn-action"
+                            onClick={(e) =>
+                                SafeUtil.stopPropagationWrap(e)(this.changePrivacy(true))
+                            }
+                        />
+                    </Tooltip>
+                )}
+                <Tooltip title={Lang.t('matter.fileDetail')}>
+                    <InfoCircleOutlined
+                        className="btn-action"
+                        onClick={(e) =>
+                            SafeUtil.stopPropagationWrap(e)(
+                                Sun.navigateTo('/matter/detail/' + matter.uuid),
+                            )
+                        }
+                    />
+                </Tooltip>
+                <Tooltip title={Lang.t('matter.rename')}>
+                    <EditOutlined
+                        className="btn-action"
+                        onClick={(e) => SafeUtil.stopPropagationWrap(e)(this.prepareRename())}
+                    />
+                </Tooltip>
+                <Tooltip title={Lang.t('matter.copyPath')}>
+                    <LinkOutlined
+                        className="btn-action"
+                        onClick={(e) => SafeUtil.stopPropagationWrap(e)(this.clipboard())}
+                    />
+                </Tooltip>
+                <Tooltip title={Lang.t('matter.download')}>
+                    <DownloadOutlined
+                        className="btn-action"
+                        onClick={(e) => SafeUtil.stopPropagationWrap(e)(matter.download())}
+                    />
+                </Tooltip>
+                <Tooltip title={Lang.t('matter.delete')}>
+                    <DeleteOutlined
+                        className="btn-action text-danger"
+                        onClick={(e) => SafeUtil.stopPropagationWrap(e)(this.deleteMatter())}
+                    />
+                </Tooltip>
+            </>
+        );
 
-        <Expanding>
-          {this.showMore ? this.renderMobileOperation() : null}
-        </Expanding>
-      </div>
-    );
-  }
+        return (
+            <div className="right-part">
+                <span className="matter-operation text-theme">{handles}</span>
+                <Tooltip title={Lang.t('matter.size')}>
+                    <span className="matter-size">{StringUtil.humanFileSize(matter.size)}</span>
+                </Tooltip>
+                {recycleMode ? (
+                    <Tooltip title={Lang.t('matter.deleteTime')}>
+                        <span className="matter-date mr10">
+                            {DateUtil.simpleDateHourMinute(matter.deleteTime)}
+                        </span>
+                    </Tooltip>
+                ) : (
+                    <Tooltip title={Lang.t('matter.updateTime')}>
+                        <span className="matter-date mr10">
+                            {DateUtil.simpleDateHourMinute(matter.updateTime)}
+                        </span>
+                    </Tooltip>
+                )}
+            </div>
+        );
+    }
+
+    // 文件操作在正常模式 or 回收站模式下不同，其中回收站模式只保留查看信息与彻底删除操作
+    getHandles() {
+        const { matter, recycleMode = false } = this.props;
+        // 回收站模式
+        if (recycleMode)
+            return [
+                <div
+                    className="cell-btn navy"
+                    onClick={(e) =>
+                        SafeUtil.stopPropagationWrap(e)(
+                            Sun.navigateTo('/matter/detail/' + this.props.matter.uuid),
+                        )
+                    }
+                >
+                    <InfoCircleOutlined className="btn-action mr5" />
+                    {Lang.t('matter.fileDetail')}
+                </div>,
+                <div
+                    className="cell-btn navy"
+                    onClick={(e) => SafeUtil.stopPropagationWrap(e)(this.recoveryMatter())}
+                >
+                    <RedoOutlined className="btn-action mr5" />
+                    {Lang.t('matter.recovery')}
+                </div>,
+                <div
+                    className="cell-btn text-danger"
+                    onClick={(e) => SafeUtil.stopPropagationWrap(e)(this.hardDeleteMatter())}
+                >
+                    <CloseCircleOutlined className="btn-action mr5" />
+                    {Lang.t('matter.hardDelete')}
+                </div>,
+            ];
+
+        // 普通模式
+        const handles = [];
+        if (!matter.dir) {
+            handles.push(
+                matter.privacy ? (
+                    <div
+                        className="cell-btn navy"
+                        onClick={(e) => SafeUtil.stopPropagationWrap(e)(this.changePrivacy(false))}
+                    >
+                        <UnlockOutlined className="btn-action mr5" />
+                        {Lang.t('matter.setPublic')}
+                    </div>
+                ) : (
+                    <div
+                        className="cell-btn navy"
+                        onClick={(e) => SafeUtil.stopPropagationWrap(e)(this.changePrivacy(true))}
+                    >
+                        <LockOutlined className="btn-action mr5" />
+                        {Lang.t('matter.setPrivate')}
+                    </div>
+                ),
+            );
+        }
+        handles.push(
+            <div
+                className="cell-btn navy"
+                onClick={(e) =>
+                    SafeUtil.stopPropagationWrap(e)(Sun.navigateTo('/matter/detail/' + matter.uuid))
+                }
+            >
+                <InfoCircleOutlined className="btn-action mr5" />
+                {Lang.t('matter.fileDetail')}
+            </div>,
+            <div
+                className="cell-btn navy"
+                onClick={(e) => SafeUtil.stopPropagationWrap(e)(this.prepareRename())}
+            >
+                <EditOutlined className="btn-action mr5" />
+                {Lang.t('matter.rename')}
+            </div>,
+            <div
+                className="cell-btn navy"
+                onClick={(e) => SafeUtil.stopPropagationWrap(e)(this.clipboard())}
+            >
+                <LinkOutlined className="btn-action mr5" />
+                {Lang.t('matter.copyLink')}
+            </div>,
+            <div
+                className="cell-btn navy"
+                onClick={(e) => SafeUtil.stopPropagationWrap(e)(matter.download())}
+            >
+                <DownloadOutlined className="btn-action mr5" />
+                {Lang.t('matter.download')}
+            </div>,
+            <div
+                className="cell-btn text-danger"
+                onClick={(e) => SafeUtil.stopPropagationWrap(e)(this.deleteMatter())}
+            >
+                <DeleteOutlined className="btn-action mr5" />
+                {Lang.t('matter.delete')}
+            </div>,
+        );
+        return handles;
+    }
+
+    renderMobileOperation() {
+        const { matter, recycleMode = false } = this.props;
+
+        return (
+            <div className="more-panel">
+                <div className="cell-btn navy text">
+                    <span>
+                        {DateUtil.simpleDateHourMinute(
+                            recycleMode ? matter.deleteTime : matter.updateTime,
+                        )}
+                    </span>
+                    <span className="matter-size">{StringUtil.humanFileSize(matter.size)}</span>
+                </div>
+                {this.getHandles()}
+            </div>
+        );
+    }
+
+    render() {
+        const { matter } = this.props;
+
+        const menu = (
+            <Menu>
+                {this.getHandles().map((item, i) => (
+                    <Menu.Item key={i}>{item}</Menu.Item>
+                ))}
+            </Menu>
+        );
+
+        return (
+            <Dropdown overlay={menu} trigger={['contextMenu']}>
+                <div className="widget-matter-panel">
+                    <div onClick={(e) => SafeUtil.stopPropagationWrap(e)(this.clickRow())}>
+                        <div className="media clearfix">
+                            <div className="pull-left">
+                                <div className="left-part">
+                                    <span
+                                        className="cell cell-hot"
+                                        onClick={(e) => SafeUtil.stopPropagationWrap(e)}
+                                    >
+                                        <Checkbox
+                                            checked={matter.check}
+                                            onChange={(e) => this.checkToggle(e)}
+                                        />
+                                    </span>
+                                    <span className="cell">
+                                        <img className="matter-icon" src={matter.getIcon()} />
+                                    </span>
+                                </div>
+                            </div>
+
+                            {/*在大屏幕下的操作栏*/}
+                            <div className="pull-right visible-pc">
+                                {matter.uuid && this.renderPcOperation()}
+                            </div>
+
+                            <div className="pull-right visible-mobile">
+                                <span
+                                    className="more-btn"
+                                    onClick={(e) =>
+                                        SafeUtil.stopPropagationWrap(e)(this.toggleHandles())
+                                    }
+                                >
+                                    <EllipsisOutlined className="btn-action navy f18" />
+                                </span>
+                            </div>
+
+                            <div className="media-body">
+                                <div className="middle-part">
+                                    {matter.editMode ? (
+                                        <span className="matter-name-edit">
+                                            <input
+                                                ref={this.inputRef}
+                                                className={matter.uuid!}
+                                                value={this.renameMatterName}
+                                                onChange={(e) => this.changeMatterName(e)}
+                                                placeholder={Lang.t('matter.enterName')}
+                                                onBlur={() => this.blurTrigger()}
+                                                onKeyUp={(e) => this.enterTrigger(e)}
+                                            />
+                                        </span>
+                                    ) : (
+                                        <span className="matter-name">
+                                            {matter.name}
+                                            {!matter.dir && !matter.privacy && (
+                                                <Tooltip
+                                                    title={Lang.t(
+                                                        'matter.publicFileEveryoneCanVisit',
+                                                    )}
+                                                >
+                                                    <UnlockOutlined className="icon" />
+                                                </Tooltip>
+                                            )}
+                                        </span>
+                                    )}
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <Expanding>{this.showMore ? this.renderMobileOperation() : null}</Expanding>
+                </div>
+            </Dropdown>
+        );
+    }
 }