remove herotip and finished Hero

YeYbfwad · Jan 11, 2023 · 493c682 · 493c682
1 parent 644a5d4
commit 493c682
Show file tree

Hide file tree

Showing 11 changed files with 172 additions and 107 deletions.
diff --git a/src/expamples/ant5/components/business/HeroTip/index.tsx b/src/expamples/ant5/components/business/HeroTip/index.tsx
diff --git a/src/expamples/ant5/components/layouts/Hero/HeroContent.tsx b/src/expamples/ant5/components/layouts/Hero/HeroContent.tsx
@@ -0,0 +1,28 @@
+import { useToken } from "antd/es/theme/internal"
+import { CSSProperties, forwardRef, memo } from "react"
+import styled from "styled-components"
+
+const HeroInner = styled.div.attrs((props: { color?: string }) => {
+  return {
+    color: props.color
+  }
+})`
+  padding: 24px;
+  border-radius: 8px;
+  color: ${props => props.color}
+`
+export type HeroContentProps = {
+  style?: CSSProperties,
+  children?: React.ReactNode,
+}
+
+export const HeroConent = memo(forwardRef<HTMLDivElement, HeroContentProps>((props, ref) => {
+  const [, token] = useToken()
+  return (
+    <HeroInner
+      ref={ref}
+      color={token.colorText}
+      {...props}
+    />
+  )
+}))
diff --git a/src/expamples/ant5/components/layouts/Hero/index.tsx b/src/expamples/ant5/components/layouts/Hero/index.tsx
@@ -1,23 +1,18 @@
 import { ConfigProvider, theme } from "antd"
 import { ConfigContext } from "antd/es/config-provider";
 import { forwardRef, memo, CSSProperties, useContext, useMemo } from "react"
-import styled from "styled-components";
+import { HeroConent } from "./HeroContent";
 
 export type HeroProps = {
   themeMode?: 'dark' | 'light' | 'inherit'
   style?: CSSProperties,
   children?: React.ReactNode,
-  closeable?: boolean,
 }
 
-const HeroInner = styled.div`
-  padding: 8px 24px 32px 24px;
-  border-radius: 8px;
-`
-
 export const Hero = memo(forwardRef<HTMLDivElement>((props: HeroProps, ref) => {
   const { themeMode = 'inherit', children, ...other } = props
   const config = useContext(ConfigContext)
+
   const algorithm = useMemo(() => {
     if (themeMode === 'inherit') {
       return config.theme?.algorithm
@@ -35,12 +30,12 @@ export const Hero = memo(forwardRef<HTMLDivElement>((props: HeroProps, ref) => {
         algorithm: algorithm
       }}
     >
-      <HeroInner
+      <HeroConent
         ref={ref}
         {...other}
       >
         {children}
-      </HeroInner>
+      </HeroConent>
     </ConfigProvider>
   )
 }))
diff --git a/src/expamples/ant5/data/dashboard.json b/src/expamples/ant5/data/dashboard.json
@@ -60,17 +60,109 @@
           "slots": {},
           "children": [
             {
-              "componentName": "HeroTip",
+              "componentName": "Hero",
               "props": {
                 "style": {
+                  "backgroundColor": "rgba(58,22,241,1)",
+                  "backgroundImage": "url(/imgs/hero.png)",
+                  "backgroundSize": "cover",
+                  "backgroundPosition": "center",
                   "marginTop": "16px",
                   "marginRight": "16px",
                   "marginBottom": "16px",
-                  "marginLeft": "16px"
-                }
+                  "marginLeft": "16px",
+                  "color": ""
+                },
+                "themeMode": "dark"
               },
               "slots": {},
-              "children": []
+              "children": [
+                {
+                  "componentName": "Row",
+                  "props": {},
+                  "slots": {},
+                  "children": [
+                    {
+                      "componentName": "Col",
+                      "props": {
+                        "span": 24,
+                        "style": {}
+                      },
+                      "slots": {},
+                      "children": [
+                        {
+                          "componentName": "TextView",
+                          "props": {
+                            "content": "Hi，欢迎使用 Apper 低代码平台！",
+                            "mode": "h2",
+                            "style": {}
+                          },
+                          "slots": {},
+                          "children": []
+                        }
+                      ]
+                    },
+                    {
+                      "componentName": "Col",
+                      "props": {
+                        "span": 24,
+                        "style": {
+                          "marginTop": "8px"
+                        }
+                      },
+                      "slots": {},
+                      "children": [
+                        {
+                          "componentName": "TextView",
+                          "props": {
+                            "content": "轻松创建、部署、管理您的Mes应用，提升开发效率，降低业务成本。 ",
+                            "style": {}
+                          },
+                          "slots": {},
+                          "children": []
+                        },
+                        {
+                          "componentName": "Button",
+                          "props": {
+                            "type": "link",
+                            "title": "Button",
+                            "style": {}
+                          },
+                          "slots": {
+                            "icon": {
+                              "componentName": "IconView",
+                              "props": {
+                                "icon": {
+                                  "iconKey": "BookOutlined"
+                                },
+                                "style": {
+                                  "marginRight": "4px"
+                                },
+                                "color": "rgba(255,255,255,1)"
+                              },
+                              "slots": {},
+                              "children": []
+                            }
+                          },
+                          "children": [
+                            {
+                              "componentName": "TextView",
+                              "props": {
+                                "content": "开启引导",
+                                "style": {
+                                  "color": "rgba(255,255,255,1)"
+                                }
+                              },
+                              "slots": {},
+                              "children": []
+                            }
+                          ]
+                        }
+                      ]
+                    }
+                  ]
+                }
+              ]
             },
             {
               "componentName": "Row",

diff --git a/src/expamples/ant5/materials/business/HeroTip/icon.tsx b/src/expamples/ant5/materials/business/HeroTip/icon.tsx
diff --git a/src/expamples/ant5/materials/business/HeroTip/index.ts b/src/expamples/ant5/materials/business/HeroTip/index.ts
diff --git a/src/expamples/ant5/materials/business/HeroTip/locales.ts b/src/expamples/ant5/materials/business/HeroTip/locales.ts
diff --git a/src/expamples/ant5/materials/business/HeroTip/schema.ts b/src/expamples/ant5/materials/business/HeroTip/schema.ts
diff --git a/src/expamples/ant5/materials/index.ts b/src/expamples/ant5/materials/index.ts
@@ -9,7 +9,6 @@ import { SelectMaterial } from "./inputs/Select";
 import { LogoMaterial } from "./layouts/Logo";
 import { MenuMaterial } from "./layouts/Menu";
 import { AvatarMaterial } from "./displays/Avatar";
-import { HeroTipMaterial } from "./business/HeroTip";
 import { CardMaterial } from "./layouts/Card";
 import { TextViewMaterial } from "./displays/TextView";
 import { StatisticMaterial } from "./displays/Statistic";
@@ -109,7 +108,6 @@ export const layoutMaterials: IComponentMaterial[] = [
 ]
 
 export const businessMaterials: IComponentMaterial[] = [
-  HeroTipMaterial,
   JobsMaterial,
   RightAdMaterial,
   NewsMaterial,

diff --git a/src/expamples/ant5/materials/layouts/Hero/locales.ts b/src/expamples/ant5/materials/layouts/Hero/locales.ts
@@ -2,12 +2,20 @@ export const boxLocales = {
   "zh-CN": {
     title: "大块屏",
     settings: {
+      themeMode: "主题模式",
+      inherit: "继承",
+      light: "亮色",
+      dark: "暗色"
     }
 
   },
   'en-US': {
     title: "Hero",
     settings: {
+      themeMode: "Theme Mode",
+      inherit: "Inherit",
+      light: "Light",
+      dark: "Dark"
     }
   }
 }

diff --git a/src/expamples/ant5/materials/layouts/Hero/schema.ts b/src/expamples/ant5/materials/layouts/Hero/schema.ts
@@ -1,4 +1,39 @@
 import { INodeSchema } from "core";
 import { createSchema } from "react-shells/ant5/shared/createSchema";
 
-export const boxSchema: INodeSchema = createSchema()
+export const boxSchema: INodeSchema = createSchema(
+  [
+    {
+      componentName: "FormItem",
+      props: {
+        label: "$themeMode",
+      },
+      children: [
+        {
+          componentName: "Radio.Group",
+          "x-field": {
+            name: "themeMode",
+          },
+          props: {
+            optionType: "button",
+            options: [
+              {
+                label: "$inherit",
+                value: "inherit"
+              },
+              {
+                label: "$dark",
+                value: "dark"
+              },
+              {
+                label: "$light",
+                value: "light"
+              },
+            ],
+            defaultValue: "inherit",
+          }
+        }
+      ]
+    },
+  ]
+)