fixed 修改文档

Author: myfirebug

README.md

@@ -34,15 +34,15 @@ flow-chart 基于 React+konva+TypeScript 流程图开发，支持新增/编辑
 
 **已完成功能**
 
-| 页面            | 是否完成（功能） |
-| --------------- | ---------------- |
-| 登录            | 是               |
-| 首页            | 是               |
-| 流程            | 是               |
-| 卡片列表        | 是               |
-| 卡片新增/编辑   | 正在开发         |
-| 流程图列表      | 是               |
-| 流程图新增/编辑 | 否               |
+| 页面            | 是否完成（功能）                                                                                                                                                                                              |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| 登录            | 是                                                                                                                                                                                                            |
+| 首页            | 是                                                                                                                                                                                                            |
+| 流程            | 是                                                                                                                                                                                                            |
+| 卡片列表        | 是                                                                                                                                                                                                            |
+| 卡片新增/编辑   | 入参配置（input,textArea, number, pasword, select, checkboxGroup,radioGroup,cascader,switch，date,dateRange,time,timeRange,treeSelect 配置功能开发）置顶、置顶、上移、下移、复制、删除功能开发(正在开发中···) |
+| 流程图列表      | 是                                                                                                                                                                                                            |
+| 流程图新增/编辑 | 否                                                                                                                                                                                                            |
 
 **已完成的组件**
 
@@ -137,7 +137,7 @@ bigscreen
 ## 页面及组件样式规范
 
 - 强制使用`BEM`方式
-  BEM 配置的命名空间统一为后台 简写：bg，这里可以在 src/assets/scss/mixin/config.scss 里修改,最好不要修改
+  BEM 配置的命名空间统一为后台 简写：app，这里可以在 src/assets/scss/mixin/config.scss 里修改,最好不要修改
 
 ## 菜单管理（路由）
 

package.json

@@ -13,7 +13,6 @@
     "konva": "^8.4.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-konva": "^18.2.4",
     "react-scripts": "5.0.1",
     "typescript": "^4.9.4",
     "web-vitals": "^2.1.4"
@@ -62,6 +61,7 @@
     "node-sass": "^7.0.1",
     "progress-bar-webpack-plugin": "^2.1.0",
     "react-app-rewired": "^2.2.1",
+    "react-konva": "^18.1.0",
     "react-redux": "^7.2.8",
     "react-router-dom": "^5.3.0",
     "redux": "^4.1.2",

src/components/card/index.tsx

@@ -3,7 +3,7 @@
  * @Author: hejp [email protected]
  * @Date: 2023-02-15 21:30:33
  * @LastEditors: hejp [email protected]
- * @LastEditTime: 2023-02-20 20:16:39
+ * @LastEditTime: 2023-03-05 20:22:42
  * @FilePath: \flow-chart\src\components\card\index.tsx
  * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
  */

src/index.tsx

@@ -34,4 +34,4 @@ ReactDOM.render(
     </PersistGate>
   </Provider>,
   document.getElementById('root')
-)
+)

src/pages/card-configuration/index.tsx

@@ -3,7 +3,7 @@
  * @Author: hejp [email protected]
  * @Date: 2023-02-09 15:22:35
  * @LastEditors: hejp [email protected]
- * @LastEditTime: 2023-02-20 21:43:31
+ * @LastEditTime: 2023-03-05 22:18:01
  * @FilePath: \flow-chart\src\pages\card-configuration\index.tsx
  * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
  */
@@ -36,15 +36,16 @@ export const CardConfigurationContext = React.createContext<Icontent>({
 
 interface IConfigurationProps {}
 
-const Iconfiguration: FC<IConfigurationProps> = () => {
+// 舞台配置
+const stageConfig = {
+  x: 0,
+  y: 0,
+  width: window.innerWidth - 300,
+  height: window.innerHeight - 62
+}
+
+const Configuration: FC<IConfigurationProps> = () => {
   const [state, dispatch] = useReducer(counter, initialState)
-  // 舞台配置
-  const [stageConfig] = useState<any>({
-    x: 0,
-    y: 0,
-    width: window.innerWidth - 300,
-    height: window.innerHeight - 62
-  })
   // 获取卡片数据
   useEffect(() => {
     // 如果ID存在调用获取卡片详情接口
@@ -77,28 +78,6 @@ const Iconfiguration: FC<IConfigurationProps> = () => {
     }
   }, [])
 
-  console.log(state, 'cardConfig')
-  // 鼠标按下
-  const onMouseDown = (e: Konva.KonvaEventObject<MouseEvent>) => {
-    const { evt } = e
-    // 隐藏菜单
-    if (evt.which === 1) {
-      hideContentMenu()
-    }
-  }
-  // 鼠标抬起
-  const onMouseUp = (e: Konva.KonvaEventObject<MouseEvent>) => {
-    console.log(e, '2')
-  }
-  // 鼠标移动
-  const onMouseMove = (e: Konva.KonvaEventObject<MouseEvent>) => {
-    // console.log(e, '3')
-  }
-  // 右键菜单
-  const onContextMenu = (e: Konva.KonvaEventObject<MouseEvent>) => {
-    e.evt.preventDefault()
-    showContentMenu(e.evt)
-  }
   return (
     <CardConfigurationContext.Provider
       value={{
@@ -110,24 +89,15 @@ const Iconfiguration: FC<IConfigurationProps> = () => {
         <ConfigurationHeader />
         <div className='app-card-configuration__body'>
           <div className='app-card-configuration__container' id='js_stage'>
-            {/* 舞台 */}
-            <Stage
-              {...stageConfig}
-              onMouseUp={onMouseUp}
-              onMouseMove={onMouseMove}
-              onMouseDown={onMouseDown}
-              onContextMenu={onContextMenu}
-              draggable
-              type='stage'>
+            <Stage {...stageConfig}>
               <Layer>{state.card ? <Card config={state.card} /> : null}</Layer>
             </Stage>
           </div>
-          {/* 卡片配置 */}
           <Sittings />
         </div>
         <div className='app-card-configuration__footer'></div>
       </div>
     </CardConfigurationContext.Provider>
   )
 }
-export default Iconfiguration
+export default Configuration