diff --git a/src/common/model/space/member/SpaceMember.ts b/src/common/model/space/member/SpaceMember.ts
index b6b3168..7e1263a 100644
--- a/src/common/model/space/member/SpaceMember.ts
+++ b/src/common/model/space/member/SpaceMember.ts
@@ -4,6 +4,7 @@ import { SpaceMemberRole } from './SpaceMemberRole';
 import Filter from '../../base/filter/Filter';
 import SortFilter from '../../base/filter/SortFilter';
 import InputFilter from '../../base/filter/InputFilter';
+import SafeUtil from '../../../util/SafeUtil';
 
 export interface SpaceMemberFormValues {
   spaceUuid: string;
@@ -17,6 +18,8 @@ export default class SpaceMember extends BaseEntity {
   role: SpaceMemberRole | null = null;
   user: User | null = null;
 
+  static URL_SPACE_MEMBER_MINE = '/api/space/member/mine';
+
   constructor(reactComponent?: React.Component) {
     super(reactComponent);
   }
@@ -25,7 +28,6 @@ export default class SpaceMember extends BaseEntity {
     return 'spaceMember';
   }
 
-
   assign(obj: any) {
     super.assign(obj);
     this.assignEntity('user', User);
@@ -46,4 +48,16 @@ export default class SpaceMember extends BaseEntity {
       uuid: this.uuid ? this.uuid : null,
     };
   }
+
+  httpMine(spaceUuid: string, successCallback?: any, errorCallback?: any) {
+    this.httpGet(
+      SpaceMember.URL_SPACE_MEMBER_MINE,
+      { spaceUuid },
+      (response: any) => {
+        this.assign(response.data.data);
+        SafeUtil.safeCallback(successCallback)(response);
+      },
+      errorCallback
+    );
+  }
 }
diff --git a/src/pages/Frame.tsx b/src/pages/Frame.tsx
index 3cafc00..382a886 100644
--- a/src/pages/Frame.tsx
+++ b/src/pages/Frame.tsx
@@ -188,6 +188,11 @@ class RawFrame extends TankComponent<IProps, IState> {
                   exact
                   component={SpaceMatterList}
                 />
+                <Route
+                  path="/space/:spaceUuid/matter/detail/:uuid"
+                  exact
+                  component={MatterDetail}
+                />
               </div>
             ) : (
               <div className="pages-content">
diff --git a/src/pages/bin/List.tsx b/src/pages/bin/List.tsx
index 2935468..bac96eb 100644
--- a/src/pages/bin/List.tsx
+++ b/src/pages/bin/List.tsx
@@ -6,7 +6,6 @@ import Pager from '../../common/model/base/Pager';
 import Matter from '../../common/model/matter/Matter';
 import Moon from '../../common/model/global/Moon';
 import SortDirection from '../../common/model/base/SortDirection';
-import MatterPanel from '../matter/widget/MatterPanel';
 import { Button, Col, Empty, Input, Modal, Pagination, Row, Space } from 'antd';
 import MessageBoxUtil from '../../common/util/MessageBoxUtil';
 import {
@@ -21,6 +20,8 @@ import ImagePreviewer from '../widget/previewer/ImagePreviewer';
 import { UserRole } from '../../common/model/user/UserRole';
 import Lang from '../../common/model/global/Lang';
 import TankTitle from '../widget/TankTitle';
+import BinMatterPanel from './widget/BinMatterPanel';
+import Sun from '../../common/model/global/Sun';
 
 interface IProps extends RouteComponentProps {}
 
@@ -180,6 +181,10 @@ export default class List extends TankComponent<IProps, IState> {
     ImagePreviewer.showMultiPhoto(imageArray, startIndex);
   }
 
+  goDetail(matter: Matter) {
+    Sun.navigateTo(`/matter/detail/${matter.uuid}`);
+  }
+
   render() {
     const { pager, selectedMatters } = this;
     return (
@@ -255,14 +260,14 @@ export default class List extends TankComponent<IProps, IState> {
         <div>
           {pager.loading || pager.data.length ? (
             pager.data.map((matter) => (
-              <MatterPanel
-                recycleMode
-                key={matter.uuid!}
+              <BinMatterPanel
+                key={matter.uuid}
                 matter={matter}
                 onDeleteSuccess={() => this.refresh()}
                 onRecoverySuccess={() => this.refresh()}
                 onCheckMatter={(m) => this.checkMatter(m)}
                 onPreviewImage={(m) => this.previewImage(m)}
+                onGoDetail={(m) => this.goDetail(m)}
               />
             ))
           ) : (
diff --git a/src/pages/bin/widget/BinMatterPanel.tsx b/src/pages/bin/widget/BinMatterPanel.tsx
new file mode 100644
index 0000000..d41c1c8
--- /dev/null
+++ b/src/pages/bin/widget/BinMatterPanel.tsx
@@ -0,0 +1,256 @@
+import React from 'react';
+import Matter from '../../../common/model/matter/Matter';
+import TankComponent from '../../../common/component/TankComponent';
+import '../../matter/widget/MatterPanel.less';
+import StringUtil from '../../../common/util/StringUtil';
+import DateUtil from '../../../common/util/DateUtil';
+import MessageBoxUtil from '../../../common/util/MessageBoxUtil';
+import Expanding from '../../widget/Expanding';
+import {
+  CloseCircleOutlined,
+  EllipsisOutlined,
+  ExclamationCircleFilled,
+  InfoCircleOutlined,
+  RedoOutlined,
+  UnlockOutlined,
+} from '@ant-design/icons';
+import { Checkbox, Dropdown, Menu, Modal, Tooltip } from 'antd';
+import { CheckboxChangeEvent } from 'antd/es/checkbox';
+import SafeUtil from '../../../common/util/SafeUtil';
+import Lang from '../../../common/model/global/Lang';
+
+interface IProps {
+  matter: Matter;
+  onDeleteSuccess: () => any;
+  onRecoverySuccess: () => any;
+  onCheckMatter: (matter?: Matter) => any;
+  onPreviewImage: (matter: Matter) => any;
+  onGoDetail: (matter: Matter) => any;
+}
+
+interface IState {}
+
+export default class BinMatterPanel extends TankComponent<IProps, IState> {
+  // 小屏幕下操作栏
+  showMore: boolean = false;
+
+  hardDeleteMatter() {
+    Modal.confirm({
+      title: Lang.t('actionCanNotRevertConfirm'),
+      icon: <ExclamationCircleFilled twoToneColor="#FFDC00" />,
+      onOk: () => {
+        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!();
+        });
+      },
+    });
+  }
+
+  checkToggle(e: CheckboxChangeEvent) {
+    this.props.matter.check = e.target.checked;
+    this.props.onCheckMatter!(this.props.matter);
+  }
+
+  clickRow() {
+    const { matter, onPreviewImage } = this.props;
+
+    if (matter.dir) return;
+
+    //图片进行预览操作
+    if (matter.isImage()) {
+      onPreviewImage!(matter);
+    } else {
+      matter.preview();
+    }
+  }
+
+  toggleHandles() {
+    this.showMore = !this.showMore;
+    this.updateUI();
+  }
+
+  renderPcOperation() {
+    const { matter } = this.props;
+
+    return (
+      <div className="right-part">
+        <span className="matter-operation text-theme">
+          <Tooltip title={Lang.t('matter.recovery')}>
+            <RedoOutlined
+              className="btn-action"
+              onClick={(e) =>
+                SafeUtil.stopPropagationWrap(e)(this.recoveryMatter())
+              }
+            />
+          </Tooltip>
+          <Tooltip title={Lang.t('matter.fileDetail')}>
+            <InfoCircleOutlined
+              className="btn-action"
+              onClick={(e) =>
+                SafeUtil.stopPropagationWrap(e)(
+                  this.props.onGoDetail(this.props.matter)
+                )
+              }
+            />
+          </Tooltip>
+          <Tooltip title={Lang.t('matter.hardDelete')}>
+            <CloseCircleOutlined
+              className="btn-action text-danger"
+              onClick={(e) =>
+                SafeUtil.stopPropagationWrap(e)(this.hardDeleteMatter())
+              }
+            />
+          </Tooltip>
+        </span>
+        <Tooltip title={Lang.t('matter.size')}>
+          <span className="matter-size">
+            {StringUtil.humanFileSize(matter.size)}
+          </span>
+        </Tooltip>
+        <Tooltip title={Lang.t('matter.deleteTime')}>
+          <span className="matter-date mr10">
+            {DateUtil.simpleDateHourMinute(matter.deleteTime)}
+          </span>
+        </Tooltip>
+      </div>
+    );
+  }
+
+  getHandles() {
+    return [
+      <div
+        className="cell-btn navy"
+        onClick={(e) =>
+          SafeUtil.stopPropagationWrap(e)(
+            this.props.onGoDetail(this.props.matter)
+          )
+        }
+      >
+        <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>,
+    ];
+  }
+
+  renderMobileOperation() {
+    const { matter } = this.props;
+
+    return (
+      <div className="more-panel">
+        <div className="cell-btn navy text">
+          <span>{DateUtil.simpleDateHourMinute(matter.deleteTime)}</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">
+                  <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>
+    );
+  }
+}