Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

首页内容 #5

Open
wanghaisheng opened this issue Jun 25, 2022 · 7 comments
Open

首页内容 #5

wanghaisheng opened this issue Jun 25, 2022 · 7 comments

Comments

@wanghaisheng
Copy link

image

demo 跑起来首页的路由打开以后是这样
如果想再添加一些组件,应该写在哪里好呢
比如官网https://aisuda.bce.baidu.com/amis/examples/wizard 这三个wizard 我添加在首页的information 这个table 下面

@amisadmin
Copy link
Owner

自定义首页简单示例

from fastapi_amis_admin import admin

# 取消默认首页
site.unregister_admin(admin.HomeAdmin)

# 注册自定义首页
@site.register_admin
class MyHomeAdmin(admin.HomeAdmin):

    async def get_page(self, request: Request) -> Page:
        # 获取默认页面
        page = await super().get_page(request)
        # 自定义修改
        page.body.title = 'MyHome'
        ...
        return page

@wanghaisheng
Copy link
Author

@amisadmin
经过一番dig,目前的页面管理 适用于任何一个demo中已经存在的或者你从已有app中复制新建出来的app中的页面

大神请忽略,直接参考文档

https://github.com/amisadmin/fastapi_amis_admin/blob/07967a31c46cb6e8e0b4ca703d6d815c2091624a/docs/zh/docs/tutorials/basic/PageAdmin.md

我自己能力有限,目前理解到的有两种方式

方法一 由于amisadmin内置了原始json映射到对象的能力,你可以通过注册页面,然后给页面不同元素赋值的方式

# 注册自定义首页
@site.register_admin
class MyHomeAdmin(admin.HomeAdmin):

    async def get_page(self, request: Request) -> Page:
        # 获取默认页面
        page = await super().get_page(request)
        # 自定义修改
        page.body.title = 'MyHome'
        # ...   
        return page

方式二 懒人版 你可以直接定义一个页面/或者页面模板,然后导入从amis编辑器中得到的json内容

# 注册自定义首页
@site.register_admin
class MyHomeAdmin(admin.HomeAdmin):
    async def get_page(self, request: Request) -> Page:
        page_schema = 'Home Page'
        page = Page.parse_obj(
            {
                "type": "page",
                "title": "表单页面",
                "body": {
                    "type": "form",
                    "mode": "horizontal",
                    "api": "/saveForm",
                    "body": [
                        {
                            "label": "Name",
                            "type": "input-text",
                            "name": "name"
                        },
                        {
                            "label": "Email",
                            "type": "input-email",
                            "name": "email"
                        }
                    ]
                }
            }
        )
        return page

@wanghaisheng
Copy link
Author

@amisadmin 如下的json好像跑不起来 其实就是有endpoint 这种调用

{
  "title": "表单向导",
  "body": [
    {
      "type": "wizard",
      "api": "https://aisuda.bce.baidu.com/amis/api/mock2/form/saveForm?waitSeconds=2",
      "initApi": "https://aisuda.bce.baidu.com/amis/api/mock2/form/initData?waitSeconds=2",
      "steps": [
        {
          "title": "第一步",
          "body": [
            {
              "name": "website",
              "label": "网址",
              "type": "input-url",
              "required": true
            },
            {
              "name": "name",
              "label": "名称",
              "type": "input-text",
              "required": true
            }
          ]
        },
        {
          "title": "Step 2",
          "body": [
            {
              "name": "email2",
              "label": "邮箱",
              "type": "input-email",
              "required": true
            }
          ]
        },
        {
          "title": "Step 3",
          "body": [
            "这是最后一步了"
          ]
        }
      ]
    },
    {
      "type": "wizard",
      "api": "https://aisuda.bce.baidu.com/amis/api/mock2/form/saveForm?waitSeconds=2",
      "mode": "vertical",
      "steps": [
        {
          "title": "第一步",
          "body": [
            {
              "name": "website",
              "label": "网址",
              "type": "input-url",
              "required": true
            },
            {
              "name": "email",
              "label": "邮箱",
              "type": "input-email",
              "required": true
            }
          ]
        },
        {
          "title": "Step 2",
          "body": [
            {
              "name": "email2",
              "label": "邮箱",
              "type": "input-email",
              "required": true
            }
          ]
        },
        {
          "title": "Step 3",
          "body": [
            "这是最后一步了"
          ]
        }
      ]
    },
    {
      "type": "wizard",
      "steps": [
        {
          "title": "第一步",
          "body": [
            {
              "name": "website",
              "label": "网址",
              "type": "input-url",
              "required": true
            },
            {
              "name": "email",
              "label": "邮箱",
              "type": "input-email",
              "required": true
            }
          ],
          "api": "https://aisuda.bce.baidu.com/amis/api/mock2/form/saveForm?waitSeconds=2"
        },
        {
          "title": "第二步",
          "body": [
            {
              "name": "test1",
              "type": "input-email",
              "label": "Email",
              "value": "test@test.com"
            },
            {
              "type": "divider"
            },
            {
              "type": "input-text",
              "name": "test2",
              "label": "必填示例",
              "required": true
            },
            {
              "type": "divider"
            },
            {
              "type": "input-text",
              "name": "test3",
              "placeholder": "可选"
            }
          ],
          "initApi": "https://aisuda.bce.baidu.com/amis/api/mock2/form/initForm",
          "api": "https://aisuda.bce.baidu.com/amis/api/mock2/form/saveForm?waitSeconds=2"
        },
        {
          "title": "确定",
          "body": [
            "最后一步了,确认要提交吗?"
          ],
          "api": "https://aisuda.bce.baidu.com/amis/api/mock2/form/saveForm?waitSeconds=2"
        }
      ]
    }
  ]
}

@wanghaisheng
Copy link
Author

@amisadmin 首页左上角 FastAPI Amis Admin 这几个字符怎么修改 我没搜到

@wanghaisheng
Copy link
Author

blog app 会有create bulk create 如果边上我想再加一个按钮 实现自己的一些逻辑,要怎么改比较好
虽然是与首页内容的修改类似的问题,整个首页当成一个json我现在理解了,但局部修改的话,还是没跑通例子
@amisadmin

@amisadmin
Copy link
Owner

@amisadmin 首页左上角 FastAPI Amis Admin 这几个字符怎么修改 我没搜到

site.settings.site_title

@amisadmin
Copy link
Owner

blog app 会有create bulk create 如果边上我想再加一个按钮 实现自己的一些逻辑,要怎么改比较好 虽然是与首页内容的修改类似的问题,整个首页当成一个json我现在理解了,但局部修改的话,还是没跑通例子 @amisadmin

继承重写对应的方法

    async def get_actions_on_header_toolbar(self, request: Request) -> List[Action]:

    async def get_actions_on_item(self, request: Request) -> List[Action]:

    async def get_actions_on_bulk(self, request: Request) -> List[Action]:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants