From cf51d71f93715230ed0e9c0d63e9b03f8fffdfc6 Mon Sep 17 00:00:00 2001 From: yumoqing Date: Wed, 10 Dec 2025 15:06:25 +0800 Subject: [PATCH] bugfix --- kdb/brief.md | 109 ++++++++++++++++++++++++++ kdb/sqlor.py | 3 +- kdb/ui_design | 9 +++ kdb/webrtc.req | 6 ++ kdb/widgets.md | 208 +++++++++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 334 insertions(+), 1 deletion(-) create mode 100644 kdb/brief.md create mode 100644 kdb/ui_design create mode 100644 kdb/webrtc.req create mode 100644 kdb/widgets.md diff --git a/kdb/brief.md b/kdb/brief.md new file mode 100644 index 0000000..0faa7ae --- /dev/null +++ b/kdb/brief.md @@ -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调试 + diff --git a/kdb/sqlor.py b/kdb/sqlor.py index 0f2bb88..9b3135d 100644 --- a/kdb/sqlor.py +++ b/kdb/sqlor.py @@ -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'}) diff --git a/kdb/ui_design b/kdb/ui_design new file mode 100644 index 0000000..5b067b1 --- /dev/null +++ b/kdb/ui_design @@ -0,0 +1,9 @@ +# 前端设计要求 +使用bricks框架，前台设计完成界面的每个控件的设计 +每个控件设计产出内容： +1 界面源码文件名，以".ui“结束 +2 控件名称 +3 构造参数 +4 事件处理 +5 无法用现有控件实现的功能，请用bricks的控件扩展方法，为bricks扩展控件 + diff --git a/kdb/webrtc.req b/kdb/webrtc.req new file mode 100644 index 0000000..a7a3117 --- /dev/null +++ b/kdb/webrtc.req @@ -0,0 +1,6 @@ +请设计用bricks框架实现的webrtc前端，要求： +1）支持1对1会话和多人会议，会议要支持100人以上 +2）收到会话请求，要响铃，用户选择接受或挂断， +3）发起会话和发起会议 +4）如果正在通话中，再有呼叫进入，可选择挂断新呼入会话， 或选择挂起现有通过来接新会话，新会话结束后再回到回复挂起通话 +5）为 bricks 注册自定义控件（例如 WebRTCPanel, IncomingPopup）并把逻辑封装入控件类。 diff --git a/kdb/widgets.md b/kdb/widgets.md new file mode 100644 index 0000000..8f2ec26 --- /dev/null +++ b/kdb/widgets.md @@ -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容器