Giter Site home page Giter Site logo

baidu / amis Goto Github PK

View Code? Open in Web Editor NEW
12.6K 196.0 1.8K 124.38 MB

前端低代码框架,通过 JSON 配置就能生成各种页面。

Home Page: https://baidu.github.io/amis/

License: Apache License 2.0

JavaScript 11.84% TypeScript 71.99% Shell 0.07% SCSS 15.98% Python 0.01% HTML 0.10%
low-code lowcode frontend low-code-development-platform no-code json frontend-framework

amis's Introduction

house.baidu.com

amis's People

Contributors

2betop avatar akikonata avatar allenve avatar blue-squirrel avatar catchonme avatar charescape avatar chengxi9 avatar cheshirejcat avatar css-master avatar dulinrain avatar gooolh avatar hsm-lv avatar hy993658052 avatar iceqing avatar igrowp avatar jiatianqi avatar lengqingfeng avatar lurunze1226 avatar meerkat-morecats avatar nwind avatar pcdqc avatar pianruijie avatar qinhaoyan avatar rickcole21 avatar simdd avatar sqzhou avatar tooeast avatar wibetter avatar yangwei9012 avatar z1769057083 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

amis's Issues

是否可能提供更轻量的 函数渲染器?

静态文本

在使用amis时, 我遇到类似以下的情形:

export default {
    type: 'page',
    body: {
          type: 'tpl',
          tpl: '<span>我是一段静态文本, 整个项目内保持统一</span>',
    }
}

可以非常方便地改成:

const GlobalDesc = {
    type: 'tpl',
    tpl: '<span>我是一段静态文本, 整个项目生命周期内保持统一</span>',
};

export default {
    type: 'page',
    body: GlobalDesc      <== 直接替换
}

非常简单, 非常实用.


公共picker

然后我遇到一个公共 选省份的picker:

const ProvincePicker = ({name, value}) => ({
    type: 'picker',
    name,
    label: '单选',
    value,
    options: [{label: '北京', value: 'BJ'}, {label: '四川', value: 'SC'}, {label: '上海', value: 'SH'}, {
        label: '广东',
        value: 'GD',
    }],
});

我这样用它:

export default {
    type: 'form',
    api: '/api/mock2/form/saveForm',
    controls: [
        ProvincePicker({name: 'province', value: 'BJ'}),        <== 注意这里!!!! 与amis风格不统一
    ],
    actions: [{type: 'submit', label: '提交'}],
};

其中的 ProvincePicker({name: 'province', value: 'BJ'}) 让我感觉很糟糕, 可能主要是视觉上的.
比较而言, 我更希望amis的风格:

{
    name: 'type',
    type: 'province-picker',
    value: 'BJ'
}

问题

这就需要注册一个新的 province-picker 类型的渲染器
但以我的浅见, 这既重又不必要, 因为我们并不需要涉及context, 只是简单地生成js object
所以, 提供一种纯函数渲染器的方式可行吗?

registerFunctionalRenderer(/^provice\-type$/, ProvincePicker);   <== ProvincePicker是上面的函数

然后这样用它:

{
    type: 'province-picker',   <== 函数式渲染器, 不涉及context操作, 返回一段新的js object替换这里
    name: 'type',        <== 直接传到 ProvincePicker 函数里
    value: 'BJ'            <== 直接传到 ProvincePicker 函数里
}

建议完善ts类型

amis1.0.0-rc.2源码下载后, 在vs code里发现一些ts类型错, 典型如:

  • src/components/DatePicker.tsx
  • src/components/Editor.tsx

由于只有了Layout 与 AsideNav 两个组件, 发现AsideNav报ts错:

<AsideNav navigations={navigations} />   

(navigation类型有问题)

样式不起作用

用renderAmis渲染json,运行出来没样式?不知道如何引入样式

select多选后样式错乱

现在问题:
image
多选后label上移

建议:
让label保持在一行,样式可以修改成:
Form-item--inline>.a-Form-value>.a-Form-control {
vertical-align: bottom;
}
top改成bottom;

amisPage / amisUser 如何使用?

文档 高级用法中提到:

page 等价于全局变量,因为顶级渲染器就是它,所以下面的所有组件都能用到这个里面的数据。
amisPage 当前页面的数据信息,包含标题,id,key 之类的信息。
amisUser 当前用户信息,包含邮箱和用户名信息。

但在源码中, 并未找到相关内容, 请问具体如何使用这两个属性呢?

关于Vue自定义组件实现

#20 因为在这个issue中看到Vue自定义组件正在开发中,我希望能将这套方案用到Vue项目中,请问下实现方案是用Vue重写了核心机制还是有一套Vue转React组件的实现呢?

数据作用域的疑问

考虑将 appInfo + userInfo 统一保存到顶级作用域, 各页面可共享, 即如下结构:

App  ( data: { appInfo, userInfo } )
  | ---   BizPage1 
  | ---   BizPage2
  | ---   BizPageN

但由于 amis 未提供 App Renderer, 所以 使用了 service, 如下:

export default {
    type: 'service',       <==  使用service作为顶级组件
    initApi: '/api/mock2/page/initData',            <=============     ( 1 ) 
    body: {
        type: 'grid',
        columns: [
            {
                type: 'page',
                name: 'page1',
                md: 3,
                // initApi: '/api/mock2/page/initData',             <========       ( 2 )
                children: (...args)=>{console.log("args-page1", args); return null;}
            },
            {
                type: 'page',
                name: 'page3',
                body: 'page3',
                md: 9,
            },
        ],

    },
};

存在的问题是:
只有 顶级的 service.initApi ( 1 ) 会自动执行
page.initApi ( 2 ) 不会执行.


疑问1: amis **享user等信息的正确方式是怎样的呢?
疑问2: 为何server中嵌套pageinitApi不会被执行?

请问,为何用react不用vue呢?主要考虑哪些方面的原因?

1、我在做类似的东西,但是实现是用vue来做的,主要考虑的是自己知识体系的问题,我想知道,这个项目出于什么原因考虑用的react?
2、我有个项目是通过拖动组件的方式生成json,然后根据json的可视化配置渲染页面,现在发现你们这个项目可以简化我的组件开发和json定义,我是否可以在这个项目的基础上做二次开发,直接根据你们这个项目的json做配置?这么做是否会涉及侵权?(商用)
3、有没有移动端的一套类似的json和对应组件,开源分享一下?同样我在此基础上做2、描述中的二次开发来使用,是否涉及侵权?(商用)

打包后icon的classname合在一起了,没有空开

fis配置

const build = fis.media('build');

build.match('/node_modules/(**)', {
    release: '/n/$1'
});

build.match('/script/refresh.js', {
    optimizer: fis.plugin('uglify-js'),
    release: '/script/refresh.js'
});

build.match('::package', {
    packager: fis.plugin('deps-pack', packConfig),
    postpackager: [fis.plugin('loader', {
        useInlineMap: false,
        resourceType: 'mod'
    }), function(ret) {
        const indexHtml = ret.src['/index.html'];
        const pages = [];
        const contents = indexHtml.getContent();
        pages.forEach(function(path) {
            const file = fis.file(fis.project.getProjectPath(), '/' + path + '.html');
            file.setContent(contents);
            ret.pkg[file.getId()] = file;
        });
    }]
});

build.match('*.{css,less,scss}', {
    optimizer: fis.plugin('clean-css'),
    useHash: true
});

build.match('::image', {
    useHash: true
});

build.match('*.{js,ts,tsx}', {
    optimizer: fis.plugin('uglify-js'),
    useHash: true
});
build.match('/script/refresh.js', {
    useHash: false
});
build.match('*.map', {
    release: false,
    url: 'null',
    useHash: false
});
build.match('{*.jsx,*.tsx,*.ts}', {
    parser: fis.plugin('typescript', {
        sourceMap: false,
        importHelpers: true
    })
});
build.match('{*.jsx,*.tsx,*.ts,*.js}', {
    moduleId: function (m, path) {
        return fis.util.md5('amis' + path);
    }
})

build.match('*', {
    deploy: [
        fis.plugin('skip-packed'),
        fis.plugin('local-deliver', {
            to: './dist'
        })
    ]
});
build.match('{*.min.js,monaco-editor/**.js}', {
    optimizer: null
});
build.match('monaco-editor/**.js', {
    useHash: false
});

image

麻烦有空看下,谢谢

为啥body为字符串的时候可以渲染出来,设成json对象就渲染不了

import * as React from 'react'
import {
  render as renderAmis
} from 'amis'

class Main extends React.Component<any, any>{
  render() {
    return (
      <div>
        <p>通过 amis 渲染页面</p>
        {
          renderAmis({
            // schema
            // 这里是 amis 的 Json 配置。
            type: 'page',
            title: '简单页面',
            body: {
              "type": "form",
              "name": "sample1",
              "api": "https://houtai.baidu.com/api/mock2/form/saveForm?waitSeconds=1",
              "controls": [
                {
                  "name": "email",
                  "label": "Email",
                  "type": "email",
                  "description": "描述文字"
                },
                {
                  "name": "text",
                  "type": "text",
                  "label": "Text"
                }
              ]
            }
          }, {
            // props
          }, {
            updateLocation: (location:string, replace:boolean) => {
              // 用来更新地址栏
            },

            jumpTo: (location:string) => {
              // 页面跳转, actionType:  link、url 都会进来。
            },

            fetcher: ({
              url,
              method,
              data,
              config
            }: {
              url:string,
              method:'get' | 'post' | 'put' | 'delete',
              data: object | void,
              config: object
            }) => {
              // 用来发送 Ajax 请求,建议使用 axios
            },
            notify: (type:'error'|'success', msg:string) => {
              // 用来提示用户
            },
            alert: (content:string) => {
              // 另外一种提示,可以直接用系统框
            },
            confirm: (content:string) => {
              // 确认框。
            }
          })
        }
      </div>
    )
  }
}

export default Main

image

evalExpression 直接 new Function 还是有点危险的

我这边做过类似的表单工具,也有遇到需要支持配置表达式的场景,一开始也是使用 new Function ,但是这样开发者还是很容易拿到完整的 dom 对象,后来有对外开放过,需要考虑安全场景,所以我这边写了一个简单的表达式解析工具 https://github.com/shepherdwind/simple-evaluate

如果你们有需要考虑安全问题,可以参考下 😄

amis/src/utils/tpl.ts

Lines 30 to 42 in e076c6b

export function evalExpression(expression: string, data?: object): boolean {
/* jshint evil:true */
try {
const fn = new Function(
"data",
`with(data) {return !!(${expression});}`
);
data = data || {};
return fn.call(data, data);
} catch (e) {
return false;
}
}

找不到node_modules/react-dom/node_modules/object-assign/index

输入 http://127.0.0.1:8888/examples/pages/simple
后找报错

mod.js:141 Uncaught [ModJS] Cannot find module `node_modules/react-dom/node_modules/object-assign/index`
require @ mod.js:141
(anonymous) @ npm.js:3461
(anonymous) @ npm.js:24719
require @ mod.js:151
(anonymous) @ npm.js:24764
require @ mod.js:151
(anonymous) @ index.jsx:6
require @ mod.js:151
updateNeed @ mod.js:207
require.async @ mod.js:216
require @ mod.js:126
(anonymous) @ simple:272

page. children的行为 与预期 不一致

先看第一段代码:

export default {
    type: 'page',
    name: 'page',
    initApi: '/api/mock2/page/initData',
    body: "$title"                       <===   正常输出 " Test ...."
};

再来看第二段, 仅仅是用children替代了body, 预期输出与 上面代码 应该 完全相同,
然而:

export default {
    type: 'page',
    name: 'page',
    initApi: '/api/mock2/page/initData',
    children: (...args) => 
        args && args[0] && args[0].title ? args[0].title : 'nothing'    <====  居然输出 "nothing"
};

请问是什么原因呢?
如果想自定义 children , 应该如何做?

通过json配置页面优势在哪?

首先赞一个👍
我理解好处是修改后台库中的字段就可实时更新页面,避免生产上重复部署;
但采用json来定义页面结果相较于直接写代码工作量感觉并没有减少,而且编辑器各种插件也用不了,所以好奇实际写起来效率如何?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.