diff --git a/packages/lb-components/src/App.tsx b/packages/lb-components/src/App.tsx index fc9ea1de3..48b0ce224 100644 --- a/packages/lb-components/src/App.tsx +++ b/packages/lb-components/src/App.tsx @@ -42,6 +42,7 @@ export interface AppProps { }; setToolInstance?: (tool: ToolInstance) => void; mode?: 'light' | 'dark'; // 临时需求应用于 toolFooter 的操作 + showTips?: boolean; // 是否展示 tips defaultLang: 'en' | 'cn'; // 国际化设置 leftSider?: () => React.ReactNode | React.ReactNode; diff --git a/packages/lb-components/src/index.scss b/packages/lb-components/src/index.scss index 4cc0ada75..358f75f15 100644 --- a/packages/lb-components/src/index.scss +++ b/packages/lb-components/src/index.scss @@ -519,6 +519,22 @@ $prefix: bee; } } +.#{$prefix}-tips { + display: flex; + justify-content: flex-end; + background-color: #333; + color: rgba(255,255,255,0.4); + line-height: 40px; + opacity: .8; + height: 40px; + padding: 0 30px; + width: 100%; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + cursor: text; +} + // .annotationOperation { position: relative; diff --git a/packages/lb-components/src/views/MainView/annotationTips/index.tsx b/packages/lb-components/src/views/MainView/annotationTips/index.tsx new file mode 100644 index 000000000..5f81aecdc --- /dev/null +++ b/packages/lb-components/src/views/MainView/annotationTips/index.tsx @@ -0,0 +1,32 @@ +/* + * Annotation Tips Showing + * @Author: Laoluo luozefeng@sensetime.com + * @Date: 2022-05-11 17:15:30 + * @LastEditors: Laoluo luozefeng@sensetime.com + * @LastEditTime: 2022-05-12 19:34:32 + */ +import React from 'react'; +import { Tooltip } from 'antd'; +import { prefix } from '@/constant'; + +interface IProps { + tips: string; +} + +const AnnotationTips = ({ tips }: IProps) => { + if (!tips) { + return null; + } + + return ( +
+
+ + {tips} + +
+
+ ); +}; + +export default AnnotationTips; diff --git a/packages/lb-components/src/views/MainView/index.tsx b/packages/lb-components/src/views/MainView/index.tsx index 1a97f7697..42a9b0ad5 100644 --- a/packages/lb-components/src/views/MainView/index.tsx +++ b/packages/lb-components/src/views/MainView/index.tsx @@ -1,17 +1,27 @@ import { AppProps } from '@/App'; import { ViewportProvider } from '@/components/customResizeHook'; import { prefix } from '@/constant'; +import { AppState } from '@/store'; import { Layout } from 'antd/es'; +import _ from 'lodash'; import React from 'react'; +import { connect } from 'react-redux'; import AnnotationOperation from './annotationOperation'; +import AnnotationTips from './annotationTips'; import Sidebar from './sidebar'; import ToolFooter from './toolFooter'; import ToolHeader from './toolHeader'; +interface IProps { + path: string; +} + const { Sider, Content } = Layout; const layoutCls = `${prefix}-layout`; -const MainView: React.FC = (props) => { +const MainView: React.FC = (props) => { + const showTips = props.showTips ?? false; + return ( @@ -27,6 +37,7 @@ const MainView: React.FC = (props) => { {props?.leftSider} + {showTips === true && } @@ -39,4 +50,11 @@ const MainView: React.FC = (props) => { ); }; -export default MainView; +const mapStateToProps = ({ annotation }: AppState) => { + const imgInfo = annotation.imgList[annotation.imgIndex] ?? {}; + return { + path: imgInfo?.url ?? imgInfo?.path ?? '', // 将当前路径的数据注入 + }; +}; + +export default connect(mapStateToProps)(MainView);