serverless-cd / ui

开发者规范

Serverless-cd/ui 是一款基于 Serverless Devs 开发者工具打造的组件库。为了能够形成一个快速、简洁、统一的静态文档站点，我们希望开源贡献者能够在 packages 目录下开发、调试、发布自己的组件，与此同时在书写给使用者的 markdown 文档时，能够采用以下格式以便我们生成页面统一的站点。

---
title: Button 按钮 # 配置左侧菜单，同时生成<title> 标签
toc: content      # 组件锚点目录内容显示在右侧
---

<!-- 页面标题，必写：是 -->
# Button 按钮

<!-- 组件使用场景，必写：否 -->
使用场景：按钮用于开始一个即时操作。

<!-- 基本使用，必写：是 -->
## 基本使用

<!-- 组件基本使用描述，必写：否 -->
可以用 size 属性设置按钮大小，type 属性设置按钮类型， warning 属性显示高危，错误等提示的按钮，text 属性是文字按钮，loading 属性是加载中状态按钮，组件已绑定 onClick 事件回调函数，供处理不同业务时使用。

```tsx
// write code here
```

<!-- 其他部分，必写：否 -->

## 其他部分

```tsx
// write code here
```

<!-- API，必写：是 -->

## API

| 参数         | 说明                           | 类型                                  | 必填 | 默认值 |
| ------------ | ------------------------------ | ------------------------------------- | ---- | ------ |
| value        | 当前值                         | Record<string, any>                   | 是   |        |
| onChange     | value 发生改变的时候触发的回调 | (value: Record<string, any>) => void  | 否   |        |
| accessList   | 密钥数据源                     | string[]                              | 否   |        |
| EditorRender | 自定义编辑器                   | ({ value, onChange }) => ReactElement | 否   |        |

🔥🔥🔥 如果您的组件已经发布，请在 dumidoc.js 中为我们的站点配置并导出您的组件

ui's Issues

【探索】头像生成器

https://github.com/wave-charts/avatar-gen

【auth-ui】Auth组件

UI页面

1. serverless-cd现状
   

2. 设计图
   

3. 参考1
   https://tailwindui.com/components/application-ui/forms/sign-in-forms

4. 参考2
   https://identity.netlify.com/

接口设计（初稿）

<Auth title={} 
	value={
       // 传统登录
		credentialProvider={
				credentials: {
					username: {label: "username", type: "username"},
					email: {label: "Email", type: "email"},
	                password: {label: "Password", type: "password"}
				},
				//  登录
				async signIn(credentials, req) {
	                return result;
	            },
				// 注册
				async signUp(credentials, req) {
	                //  校验
	                return result;
	            },
		},
		githubProvider: {
			url: 'https://github.com/login/oauth/authorize?client_id=86059a1b2bb20d3e5fc3&scope=repo,repo:status,delete_repo'
		},
		giteeProvider: {
			url: 'https://github.com/login/oauth/authorize?client_id=86059a1b2bb20d3e5fc3&scope=repo,repo:status,delete_repo'
		}
	}
	onChange=() => {}
>
</Auth>

技术推荐

1. console-conponent
2. react

创建应用流程，第一次给仓库授权后，没有请求到仓库组织的数据，刷新页面就有了

【creating-ui】 创建中UI

UI交互

接口设计

const dataSource = [{
	title:'同步仓库',
	child: [{
		title: '远程仓库创建成功',
		syncTask: () => {},
	},{
		title: '正在同步远程仓库，请稍后,
		syncTask: () => {},
	}]
},{
	title:'创建',
	child: [{
		title: '创建应用',
		syncTask: () => {},
	},{
		title: '创建流水线,
		syncTask: () => {},
	}]
},{
	title:'创建完成，3s跳转到指定页面',
}];

<CreateApp dataSource={dataSource} onComplete={} onSuccess={} onError={} >
</CreateApp>

模版初始化 UI规范

组件设计 Setting

选择组织后，请求的仓库列表数据不符合预期

【app-architecture-ui】应用架构

case1:

<AppArchitecture label="环境部署">
	<AppArchitecture.Item label="域名" icon="xxx"></AppArchitecture.Item>
	<AppArchitecture.Sub label="网络" icon="xxx">
		<AppArchitecture.Item label="SLB" icon="xxx"> 	
		</AppArchitecture.Item>	
	</AppArchitecture.Sub>
</AppArchitecture>

case2:
json => form

【history-ui】部署历史UI

【secrets-ui】密钥配置

【优化】auth-ui 添加快捷键

【setting-ui】 自定义组件 AsyncSelect

https://formilyjs.org/zh-CN/guide/advanced/async
https://fusion.formilyjs.org/zh-CN/components/select

比如依赖 region 进行异步请求

【app-card-ui】模版应用列表

页面效果

参考：https://fcnext.console.aliyun.com/applications/create

API 设计

const dataSource = [{
	label: "热门应用",
    key: "1",
	children: [{
		 label: "全景 Web 页面录制-高级版",
         key: "2",
		description: "",
        logo: "",
        tags: [全景录制"],
		download: 17561,
        contributor: () => {} // 贡献者， 
	}]
}];

<AppCard dataSource={dataSource}>
</AppCard>

<AppCard.ReadMe>
</AppCard.ReadMe>

PipelineInitNode组件支持validate属性

• validate为true表示前端验证通过，展示对应的样式，否则反之。