添加图片模块

lgf196 · Mar 11, 2022 · 15f5715 · 15f5715
1 parent 777a204
commit 15f5715
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 15 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -16,7 +16,7 @@ import styles from './layout/layout.module.scss';
 import Edit from '@/core/edit';
 import Attr from './layout/Attr';
 import useEdit from '@/core/edit/useEdit';
-import { getAllConfigListType, useGetCopentConfigList } from './core/componentTemplate/config';
+import { getAllConfigListType, useGetCompentConfigList } from './core/componentTemplate/config';
 export interface oneModuleAllType {
   isShow: boolean;
   componentInfo: Partial<getAllConfigListType>;
@@ -26,7 +26,7 @@ export interface EditType {
 }
 
 const App: FC = () => {
-  const { allModuleConfigList } = useGetCopentConfigList();
+  const { allModuleConfigList } = useGetCompentConfigList();
 
   const { decompose } = useEdit();
 

diff --git a/src/core/DragTargetComponent.tsx b/src/core/DragTargetComponent.tsx
@@ -5,7 +5,10 @@ export interface datasetType {
     id: string;
   };
 }
-const DragTarget: FC<{ list: templateDataType[] }> = memo(function DragTarget({ list }) {
+const DragTarget: FC<{ list: templateDataType[]; category: string }> = memo(function DragTarget({
+  list,
+  category,
+}) {
   const handleDragStart: React.DragEventHandler<HTMLDivElement> = (e) => {
     e.dataTransfer.setData('id', (e.target as unknown as datasetType).dataset.id);
   };

diff --git a/src/core/componentTemplate/config.ts b/src/core/componentTemplate/config.ts
@@ -8,9 +8,11 @@ export interface getAllConfigListType {
   title: string;
   componentList: templateDataType[];
 }
-export const useGetCopentConfigList = () => {
+export const useGetCompentConfigList = () => {
   const [baseConfigList, setBaseConfigList] = useState<templateDataType[]>([]);
   const [textConfigList, setTextConfigList] = useState<templateDataType[]>([]);
+  const [pictureConfigList, setPictureConfigList] = useState<templateDataType[]>([]);
+
   useEffect(() => {
     /**
      * @description base模块
@@ -25,14 +27,24 @@ export const useGetCopentConfigList = () => {
      * @description text模块
      */
     const getTextModuleConfigData = async () => {
-      const lists = await componentConfigList(
+      const list = await componentConfigList(
         import.meta.glob('../componentTemplate/text/*/config.ts'),
       );
-      console.log(`lists`, lists);
-      setTextConfigList(lists);
+      setTextConfigList(list);
+    };
+    /**
+     * @description picture模块
+     */
+    const getPictureModuleConfigData = async () => {
+      const lists = await componentConfigList(
+        import.meta.glob('../componentTemplate/picture/*/config.ts'),
+      );
+      setPictureConfigList(lists);
     };
+    // --------------调用--------
     getBaseModuleConfigData();
     getTextModuleConfigData();
+    getPictureModuleConfigData();
   }, []);
   /**
    * @description 二级base模块，多个
@@ -85,8 +97,14 @@ export const useGetCopentConfigList = () => {
    * @description 得到所有的组件的配置文件值
    */
   const allModuleConfigList = useMemo(
-    () => [...textConfigList, ...baseConfigList],
-    [textConfigList, baseConfigList],
+    () => [...textConfigList, ...baseConfigList, ...pictureConfigList],
+    [textConfigList, baseConfigList, pictureConfigList],
   );
-  return { baseConfigList, getAllBaseModuleConfigList, textConfigList, allModuleConfigList };
+  return {
+    baseConfigList,
+    getAllBaseModuleConfigList,
+    textConfigList,
+    allModuleConfigList,
+    pictureConfigList,
+  };
 };
diff --git a/src/core/componentTemplate/picture/Image/config.ts b/src/core/componentTemplate/picture/Image/config.ts
@@ -0,0 +1,18 @@
+import { defaultProps } from '@/core/config/common';
+export default {
+  id: 'pictureImage',
+  category: 'picture',
+  type: 'Image',
+  component: 'Image',
+  label: '图片',
+  propValue: {
+    ...defaultProps({ w: 100, h: 50 }),
+    textVal: '图片',
+  },
+  icon: 'https://cdn.gudsen.com/2021/09/30/af90bac80a9447f18156e251ecbc1dff.png',
+  style: {
+    width: 100,
+    height: 50,
+  },
+  editableEl: [],
+} as templateDataType;
diff --git a/src/core/componentTemplate/picture/Image/index.tsx b/src/core/componentTemplate/picture/Image/index.tsx
@@ -0,0 +1,9 @@
+import React, { memo, FC } from 'react';
+import useStyle from '@/core/attr/useStyle';
+const Index: FC<templateDataType> = memo(function Index(props) {
+  const { propValue } = props;
+  const { resultStyle } = useStyle(props.propValue);
+  return <div style={{ width: '100%', height: '100%', ...resultStyle }}>图片</div>;
+});
+
+export default Index;
diff --git a/src/layout/SliderComponent.tsx b/src/layout/SliderComponent.tsx
@@ -13,7 +13,7 @@ import styles from './layout.module.scss';
 import Drag from '@/core/DragTargetComponent';
 import { useSetState } from '@/hooks';
 import { RightOutlined, LeftOutlined } from '@ant-design/icons';
-import { getAllConfigListType, useGetCopentConfigList } from '@/core/componentTemplate/config';
+import { getAllConfigListType, useGetCompentConfigList } from '@/core/componentTemplate/config';
 import { createSelector } from 'reselect';
 export interface oneModuleAllType {
   isShow: boolean;
@@ -31,7 +31,8 @@ const Slider = memo(function Slider() {
     createSelector([(state: storeType) => state.config], ({ zenMode }) => [zenMode] as const),
   );
 
-  const { baseConfigList, getAllBaseModuleConfigList, textConfigList } = useGetCopentConfigList();
+  const { baseConfigList, getAllBaseModuleConfigList, textConfigList, pictureConfigList } =
+    useGetCompentConfigList();
 
   const [isShowLeftComponents, setIsShowLeftComponents] = useState<boolean>(true);
 
@@ -61,6 +62,11 @@ const Slider = memo(function Slider() {
         title: '文本',
         componentList: textConfigList,
       },
+      {
+        category: 'picture',
+        title: '图片',
+        componentList: pictureConfigList,
+      },
       {
         category: 'base',
         title: '基础',
@@ -108,7 +114,7 @@ const Slider = memo(function Slider() {
                               <RightOutlined />
                             </button>
                           </div>
-                          <Drag list={child.componentList} />
+                          <Drag list={child.componentList} category={item.category} />
                         </>
                       </React.Fragment>
                     ))}
@@ -128,19 +134,32 @@ const Slider = memo(function Slider() {
                         <LeftOutlined />
                         <span>{oneModuleAll.componentInfo.title}</span>
                       </button>
-                      <Drag list={oneModuleAll.componentInfo.componentList!} />
+                      <Drag
+                        list={oneModuleAll.componentInfo.componentList!}
+                        category={item.category}
+                      />
                     </div>
                   </div>
                 </>
               ) : null}
+              {item.category === 'picture' ? (
+                <div
+                  className={styles.contentContainer}
+                  style={{
+                    visibility: isShowLeftComponents ? 'visible' : 'hidden',
+                  }}
+                >
+                  <Drag list={item.componentList as templateDataType[]} category={item.category} />
+                </div>
+              ) : null}
               {item.category === 'text' ? (
                 <div
                   className={styles.contentContainer}
                   style={{
                     visibility: isShowLeftComponents ? 'visible' : 'hidden',
                   }}
                 >
-                  <Drag list={item.componentList as templateDataType[]} />
+                  <Drag list={item.componentList as templateDataType[]} category={item.category} />
                 </div>
               ) : null}
             </div>