refactor(web): 笔记面板增加编辑按钮，方便直接进行编辑对应笔记

Author: moonrailgun

src/web/components/panels/CommonHeader.tsx

@@ -11,6 +11,11 @@ const Container = styled.div`
   justify-content: space-between;
 
   ${(props) => props.theme.mixins.mobile('padding: 8px 0;')}
+
+  > div {
+    display: flex;
+    align-items: center;
+  }
 `;
 
 const HeaderPrefix = styled.span`
@@ -23,6 +28,10 @@ const HeaderText = styled.span`
   line-height: 28px;
 `;
 
+const HeaderSuffix = styled.span`
+  margin-left: 8px;
+`;
+
 const HeaderActionContainer = styled(Space)`
   ${(props) =>
     props.theme.mixins.mobile('width: 100%;justify-content: flex-end;')}
@@ -31,18 +40,18 @@ const HeaderActionContainer = styled(Space)`
 interface CommonHeaderProps {
   headerPrefix?: React.ReactNode;
   headerActions?: React.ReactNode[];
+  headerSuffix?: React.ReactNode;
 }
 export const CommonHeader: React.FC<CommonHeaderProps> = TMemo((props) => {
-  const { headerActions } = props;
-
   return (
     <SectionHeader>
       <Container>
         <div>
           <HeaderPrefix>{props.headerPrefix}</HeaderPrefix>
           <HeaderText>{props.children}</HeaderText>
+          <HeaderSuffix>{props.headerSuffix}</HeaderSuffix>
         </div>
-        <HeaderActionContainer>{headerActions}</HeaderActionContainer>
+        <HeaderActionContainer>{props.headerActions}</HeaderActionContainer>
       </Container>
     </SectionHeader>
   );

src/web/components/panels/CommonPanel.tsx

@@ -37,6 +37,7 @@ interface CommonPanelProps {
   style?: React.CSSProperties;
   headerPrefix?: React.ReactNode;
   headerActions?: React.ReactNode[];
+  headerSuffix?: React.ReactNode;
   rightPanel?: React.ReactNode;
 }
 export const CommonPanel: React.FC<CommonPanelProps> = TMemo((props) => {
@@ -45,6 +46,7 @@ export const CommonPanel: React.FC<CommonPanelProps> = TMemo((props) => {
       <CommonHeader
         headerPrefix={props.headerPrefix}
         headerActions={props.headerActions}
+        headerSuffix={props.headerSuffix}
       >
         {props.header}
       </CommonHeader>

src/web/components/panels/NotePanel.tsx

@@ -1,15 +1,35 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { TMemo } from '@shared/components/TMemo';
 import { CommonPanelProps } from '@shared/components/panel/type';
 import { useAsync } from 'react-use';
 import _isString from 'lodash/isString';
 import _isNil from 'lodash/isNil';
 import { fetchNoteInfo } from '@shared/model/note';
-import { Result } from 'antd';
+import { Result, Tooltip } from 'antd';
 import LoadingSpinner from '../LoadingSpinner';
 import { useTranslation } from '@shared/i18n';
 import { Previewer } from '../editor/Previewer';
 import { CommonPanel } from './CommonPanel';
+import { Iconfont } from '../Iconfont';
+import { Link } from 'react-router-dom';
+import { useNoteInfo } from '@redux/hooks/note';
+
+function useNoteEditBtn(noteUUID: string): React.ReactElement | null {
+  const { t } = useTranslation();
+  const noteInfo = useNoteInfo(noteUUID);
+
+  if (_isNil(noteInfo)) {
+    return null;
+  }
+
+  return (
+    <Tooltip title={t('编辑')}>
+      <Link style={{ color: 'inherit' }} to={`/main/personal/note/${noteUUID}`}>
+        <Iconfont>&#xe602;</Iconfont>
+      </Link>
+    </Tooltip>
+  );
+}
 
 /**
  * 团笔记面板
@@ -18,6 +38,7 @@ export const NotePanel: React.FC<CommonPanelProps> = TMemo((props) => {
   const { panel } = props;
   const noteUUID = panel.target_uuid;
   const { t } = useTranslation();
+  const noteEditBtn = useNoteEditBtn(noteUUID);
 
   const { loading, value, error } = useAsync(async () => {
     if (!_isString(noteUUID)) {
@@ -34,7 +55,11 @@ export const NotePanel: React.FC<CommonPanelProps> = TMemo((props) => {
 
   if (!_isNil(value)) {
     return (
-      <CommonPanel headerPrefix="#" header={panel.name}>
+      <CommonPanel
+        headerPrefix="#"
+        header={panel.name}
+        headerSuffix={noteEditBtn}
+      >
         <div style={{ padding: 10 }}>
           <Previewer value={value.data as any} />
         </div>