yumoqing/aicode
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

bugfix

Browse Source
This commit is contained in:
yumoqing 2025-12-10 15:06:25 +08:00
parent 60570efdc1
commit cf51d71f93
5 changed files with 334 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
kdb/brief.md Normal file
View File

@ -0,0 +1,109 @@
# bricks框架简介
## 目录
* bricks目标
* bricks概念
* bricks开发方法
* bricks运行
## bricks目标
* 无前端代码或极少代码
* 降低前端开发技术难度
* 数据驱动
* 常用控件包装
* 纯json开发
## bricks概念
* 控件与控件继承
* 事件以及事件处理
* 控件嵌套和页面组装
### 控件与控件继承
bricks采用控件这一概念来描述web GUI的显示部件，每个控件均映射到一个html
的标签类型的一个javascript类。每个控件均可以实例化，并可在页面显示。
控件分为：基本控件，容器控件。控件有内置方法，也能触发事件。
* 基本控件
基本控件是一个原子控件，不能有子控件。
* 容器控件
容器控件可以有子控件，bricks通过在容器控件添加子控件，以及在子容器控件中
在添加子子控件的方式来构造复杂的web页面。
bricks已实现的控件请参看[控件清单](widgets.md)
### 控件扩展
如果现有的控件没法满足系统要求，bricks支持控件扩展，控件扩展需遵守：
* 控件class继承自某一个控件的class
* 按照需求实现控件逻辑
* 在需要的地方用this.dispatch触发此控件的事件
假设需要扩展一个名字叫ExtContainer的控件
```
bricks.ExtContainer = class extends bricks.VBox {
constructor(opts){
super(opts);
/* 新控件的创建代码 */
}
......
/* 对象的其他方法，在需要的时候，在某个方法中，使用this.dispatch('new_event', data)方法引发事件 */
}
bricks.register('ExtContainer', bricks.ExtContainer); /* 注册新控件 */
```
新控件的使用，example.ui
```
{
"widgettype":"ExtContainer",
"options":{
....
},
"subwidgets":[
...
],
"binds":[
{
"wid":"self",
"event":"new_event",
"actiontype":"urlwidget",
"target":"some_container",
"options":{
"url":"{{entire_url('./some_ui.ui')}}"
}
}
]
}
```
### 事件以及事件处理
每个控件都能触发所映射dom元素的事件，以及控件js类的成员函数以及祖先类的
成员函数中dispatch出的事件
所以bricks控件的事件来源于两类，dom元素原生事件以及控件类中自定义的事件。
两类事件处理方式相同。
### 控件表达形式
在服务器的后台，以json文件的形式表达控件，每个ui文件定义一个控件，
对于容器控件，可以在ui文件中的subwidgets子属性中为此控件添加子控件
#### id属性
字符串属性，定义控件的id，让控件可以用getWidgetById找到，如果不给定，系统会自动生成一个id
#### options属性
字典属性，创建控件时的选项，每个控件可接受的选项请参看控件选项说明
#### binds属性
数组属性，定义零到多个事件响应，每个bind字典需要遵守[事件](event.md)要求
#### 容器控件特有属性
##### subwidgets
数组属性，定义容器控件的子控件，每个元素定义一个子控件，子控件遵守控件的数据要素要求
## 应用开发开发
使用存放在服务器后台的.ui后缀的json格式文件来开发，每个.ui文件定义一个控件， 支持基本控件和容器空间。
关于如何书写ui文件请参考[UI文件格式](descjson.md)
## 调试
ui文件可以直接调试，如在服务器根目录下的test目录下有一个hello.ui文件，
就可以在浏览器中用url：https://sername/test/hello.ui调试

3
kdb/sqlor.py
View File

@ -22,8 +22,9 @@ async def sqlor_op():
env = ServerEnv()
dbname = env.get_module_dbname()
async with db.sqlorContext(dbname) as sor:
id = env.uuid()
# 事务中，如果代码或sql失败全部滚回，正常结束自动提交
await sor.C('user', {'id':'yuewfiuwe', 'username':'john'})
await sor.C('user', {'id':id, 'username':'john'})
# 添加数据表“user”数据
await sor.D('user', {'id': 'yuewfiuwe'})
# await sor.U('user', {'id', 'email':'test@abc.com'})

9
kdb/ui_design Normal file
View File

@ -0,0 +1,9 @@
# 前端设计要求
使用bricks框架，前台设计完成界面的每个控件的设计
每个控件设计产出内容：
1 界面源码文件名，以".ui“结束
2 控件名称
3 构造参数
4 事件处理
5 无法用现有控件实现的功能，请用bricks的控件扩展方法，为bricks扩展控件

6
kdb/webrtc.req Normal file
View File

@ -0,0 +1,6 @@
请设计用bricks框架实现的webrtc前端，要求：
1）支持1对1会话和多人会议，会议要支持100人以上
2）收到会话请求，要响铃，用户选择接受或挂断，
3）发起会话和发起会议
4）如果正在通话中，再有呼叫进入，可选择挂断新呼入会话， 或选择挂起现有通过来接新会话，新会话结束后再回到回复挂起通话
5）为 bricks 注册自定义控件（例如 WebRTCPanel, IncomingPopup）并把逻辑封装入控件类。

208
kdb/widgets.md Normal file
View File

@ -0,0 +1,208 @@
# bricks控件
bricks内置许多的显示控件，所有显示控件都继承自JsWidget，容器控件Layout就继承自JsWidget，其他的容器HBox， VBox继承自Layout
## 基础控件
* [Form](form.md)：输入表单控件
自动根据options中的fields数组下的每个field的uitype属性值构造表单输入项，目前uitype属性支持的数据类型有：
** 'str' 对应的控件为： bricks.UiStr
** 'hide' 对应的控件为： bricks.UiHide
** 'tel' 对应的控件为： bricks.UiTel
** 'date' 对应的控件为： bricks.UiDate
** 'int' 对应的控件为： bricks.UiInt
** 'float' 对应的控件为： bricks.UiFloat
** 'check' 对应的控件为： bricks.UiCheck
** 'checkbox' 对应的控件为： bricks.UiCheckBox
** 'email' 对应的控件为： bricks.UiEmail
** 'file' 对应的控件为： bricks.UiFile
** 'image' 对应的控件为： bricks.UiImage
** 'code' 对应的控件为： bricks.UiCode
** 'text' 对应的控件为： bricks.UiText
** 'password' 对应的控件为： bricks.UiPassword
** 'audio' 对应的控件为： bricks.UiAudio
** 'video' 对应的控件为： bricks.UiVideo
上述控件都在[输入定义](inout.js)中注册为输入项控件
* [Accordion](accordion.md) bricks.Accordion
手风琴控件，支持多个标题，内容组成的控件，内容和展开和折叠
* [AudioPlayer](audio.md) bricks.AudioPlayer
音频播放控件
* [ChartBar](bar.md) bricks.ChartBar
将后台数据显示为条形图表
* [Button](button.md) bricks.Button
按钮控件
* [Cols](cols.md) bricks.Cols
列式排列控件，可动态填满父控件的宽度
* [Conform](conform.md) bricks.Conform
确认控件，弹出窗口显示内容，并要求用户确认
* [Countdown](countdown.md) bricks.Countdown
时间倒计时控件，显示从还剩下的时间
* [TimePassed](countdown.md) bricks.TimePassed
时间消耗控件，显示从开始计时开始所消耗的时间
* [DataGrid](datagrid.md) bricks.DataGrid
数据表格控件
* [DataRow](datarow.md) bricks.DataRow
数据行控件
* [DataViewer](dataviewer.md) bricks.DataViewer
数据显示控件，DynamicColumn控件的后代控件
* [DOCXviewer](docxviewer.md) bricks.DOCXviewer
docx文件显示控件
* [EXCELviewer](docxviewer.md) bricks.EXCELviewer
excel文件显示控件
* [PDFviewer](accordion.md) bricks.PDFviewer
pdf显示控件
* [DynamicAccordion](dynamicaccordion.md) bricks.DynamicAccordion
动态手风琴控件
* [IconBar](floaticonbar.md) bricks.IconBar
图标条控件
* [IconTextBar](floaticonbar.md) bricks.IconTextBar
图标文本条控件
* [FloatIconBar](floaticonbar.md) bricks.FloatIconBar
浮动图标条，平时显示一个标识图标，点击此标识图标后显示图标条
* [FloatIconTextBar](floaticonbar.md) bricks.FloatIconTextBar
浮动图标正文条，平时显示一个标识图标，点击此图标后显示图标正文条
* [Html](html.md) bricks.Html
HTML控件，直接显示html内容
* [IconbarPage](iconbarpage.md) bricks.IconbarPage
图标条页控件，显示图标条，不同的图标点击后显示图标对应的内容
* [NewWindow](iframe.md) bricks.NewWindow
新浏览器页签或窗口控件，浏览器创建新的窗口或页签显示url的内容
* [Iframe](iframe.md) bricks.Iframe
Iframe控件，用于显示外部网站内容
* [Image](image.md) bricks.Image
图像控件
* [StatedIcon](image.md) bricks.StatedIcon
多站台图标，点击后状态改变，支持多个状态，并发出状态改变事件
* [Icon](image.md) bricks.Icon
图标控件，支持多种图像格式url
* [BlankIcon](image.md) bricks.BlankIcon
空白图标占位控件
* [ChartLine](line.md) bricks.ChartLine
* [LlmIO](llm.md) bricks.LlmIO
* [LlmOut](llm.md) bricks.LlmOut
* [MarkdownViewer](markdownviewer.md) bricks.MarkdownViewer
* [MdWidget](markdownviewer.md) bricks.MdWidget
* [Menu](menu.md) bricks.Menu
* [Message](message.md) bricks.Message
* [Error](message.md) bricks.Error
* [MultipleStateImage](multiple_state_image.md) bricks.MultipleStateImage
多状态图像控件
* [PeriodDays](period.md) bricks.PeriodDays
日期期间控件，自动计算时间段的起始日期
* [ChartPie](pie.md) bricks.ChartPie
饼图控件，基于echrts
* [ProgressBar](progressbar.md) bricks.ProgressBar
进度条控件
* [SysCamera](recorder.md) bricks.SysCamera
照相控件，可拍摄照片
* [WidgetRecorder](recorder.md) bricks.WidgetRecorder
控件视频录制控件，可录制浏览器播放的视频
* [SysAudioRecorder](recorder.md) bricks.SysAudioRecorder
浏览器音频录制控件，用来录制音频
* [SysVideoRecorder](recorder.md) bricks.SysVideoRecorder
浏览器视频录制控件，用来录制视频
* [Running](running.md) bricks.Running
运行图标控件，modal模式显示正在运行，相关控件不可操作，需要在完成 任务后dismiss它
* [Splitter](splitter.md) bricks.Splitter
分割器控件，显示水平或垂直分割线
* [Svg](svg.md) bricks.Svg
Svg图标控件
* [StatedSvg](svg.md) bricks.StatedSvg
带状态的svg图标控件，不同状态显示不同的图标
* [MultipleStateIcon](svg.md) bricks.MultipleStateIcon
多状态图标控件
* [TabPanel](tab.md) bricks.TabPanel
页签控件
* [Tabular](tabular.md) bricks.Tabular
数据列表形式的数据维护控件，支持数据的显示，增加，修改和删除
[xls2ddl](https://git.opencomputing.cn/yumoqing/xls2ddl)工具能根据数据表结构自动生成数据Tabular控件以及相关的数据维护dspy
* [Toolbar](toolbar.md) bricks.Toolbar
工具条控件
* [Tree](tree.md) bricks.Tree
树形控件
* [VadText](vadtext.md) bricks.VadText
自动捕获语音并将捕获的语音发送给服务器
* [VideoPlayer](videoplayer.md) bricks.VideoPlayer
视频播放控件，支持浏览器支持的视频格式外，还支持m3u8流媒体和Dash流媒体,
bricks已在3parties目录中包含了所依赖的hls和dash包
* [Video](videoplayer.md) bricks.VideoPlayer
视频播放控件同VideoPlayer
* [WebSocket](websocket.md) bricks.WebSocket
支持websocket
* [WebTTS](webspeech.js.md) bricks.WebTTS
为完成控件，浏览器内置文本转语音能力
* [WebASR](webspeech.js.md) bricks.WebASR
未完成控件，浏览器内部的语音识别能力
* [Tooltip](widget.md) bricks.Tooltip
Tooltip控件，不直接创建，而是在控件中添加“tip":"提示字符串“属性为控件添加Tooltip控件
* [Text](widget.md) bricks.Text
文本控件
* [Title1](widget.md) bricks.Title1
第一号标题
* [Title2](widget.md) bricks.Title2
第二号标题
* [Title3](widget.md) bricks.Title3
第三号标题
* [Title4](widget.md) bricks.Title4
第四号标题
* [Title5](widget.md) bricks.Title5
第五号标题
* [Title6](widget.md) bricks.Title6
第六号标题
* [Wterm](wterm.md) bricks.Wterm
xterm.js在bricks中的实现
## 容器类控件
* [VScrollPanel](accordion.md) bricks.VScrollPanel
垂直滚动容器，需要设置固定的高度或占满全部父容器高度
* [HScrollPanel](accordion.md) bricks.HScrollPanel
水平滚动容器，需要设置固定的宽度或占满全部父容器宽度
* [Popup](accordion.md) bricks.Popup
弹出容器，置于当前全部控件最上面
* [PopupWindow](accordion.md) bricks.PopupWindow
弹出窗口，置于当前全部控件最上面
* [HBox](accordion.md) bricks.HBox
水平扩展容器，全部子控件水平排放
* [VBox](accordion.md) bricks.VBox
垂直扩展容器，全部子控件垂直排放
* [Filler](accordion.md) bricks.Filler
占满父容器剩余控件，如果父容器有多个Filler控件，则平均分配剩余控件，Filler容器下可添加子控件
* [DynamicColumn](dynamiccolumn.md) bricks.DynamicColumn
子控件需要设置固定宽度，动态从左到右，从上到下排列子控件
* [ResponsableBox](layout.md) bricks.ResponsableBox
自适应容器，当宽度大则水平排列子控件，而高度大时则水平排列子控件, 并能根据宽高变化自动改变。
* [Modal](modal.md) bricks.Modal
modal容器