This commit is contained in:
yumoqing 2024-06-20 17:35:25 +08:00
parent 5fd801d5b9
commit 53a31a1591
9 changed files with 99 additions and 16 deletions

View File

@ -83,6 +83,9 @@ bricks.FormBody = class extends bricks.VScrollPanel {
this.fg = new bricks.FieldGroup({}); this.fg = new bricks.FieldGroup({});
this.fg.build_fields(form, this, form.opts.fields) this.fg.build_fields(form, this, form.opts.fields)
} }
create(){
this.dom_element = this._create('form')
}
} }
bricks.Form = class extends bricks.VBox { bricks.Form = class extends bricks.VBox {

View File

@ -28,6 +28,24 @@ bricks.Image = class extends bricks.JsWidget {
this.dom_element.style.height = this.height; this.dom_element.style.height = this.height;
} }
} }
base64(){
const image = this.dom_element;
// 创建一个画布来绘制图像
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
// 设置画布大小与图像相同
canvas.width = image.width;
canvas.height = image.height;
// 将图像绘制到画布上
ctx.drawImage(image, 0, 0);
// 获取画布数据并转换为 base64
const dataURL = canvas.toDataURL('image/png'); // 可以根据需要修改图像格式
console.log(dataURL);
return dataURL;
}
set_url(url){ set_url(url){
this.url = url; this.url = url;
this.dom_element.src = url; this.dom_element.src = url;

View File

@ -125,6 +125,7 @@ bricks.UiStr =class extends bricks.UiType {
var el = this._create('input'); var el = this._create('input');
this.dom_element = el; this.dom_element = el;
this.pattern = '.*'; this.pattern = '.*';
el.autocomplete = 'off';
el.type = 'text'; el.type = 'text';
el.id = this.name = el.name = this.opts.name; el.id = this.name = el.name = this.opts.name;
if (this.opts.required) if (this.opts.required)
@ -336,7 +337,54 @@ bricks.UiFile =class extends bricks.UiStr {
return; return;
this.value = v; this.value = v;
} }
}
bricks.UiImage =class extends bricks.VBox {
static uitype='image';
constructor(opts){
opts.name = opts.name || 'image';
super(options);
this.bind('drop', this.dropHandle.bind(this));
this.input = document.createElement('input');
this.input.type = 'file';
this.input.accept = 'image/*';
this.input.addEventListener('change', this.handleFileSelect.bind(this));
// this.bind('click', this.handleClick.bind(this));
this.add_widget(new bricks.Text({text:'drop in or click to choose file'}));
this.dom_element.appendChild(this.input);
this.imgw = null;
}
handleFileSelect(event){
const file = event.target.files[0];
this.show_image(file);
}
dropHandle(event){
e.preventDefault();
const file = e.dataTransfer.files[0];
this.show_image(file);
}
show_image(file) {
const reader = new FileReader();
reader.onload = (e) => {
this.clear_widgets();
this.imgw = new bricks.Image({
url:e.target.result,
width:'100%'
});
this.add_widget(this.imgw);
};
reader.readAsDataURL(file);
}
getValue(){
ret = {}
if (! this.imgw){
ret[this.name] = this.imgw.base64()
} else {
ret[this.name] = null;
}
return ret;
}
} }
bricks.UiCheck =class extends bricks.UiType { bricks.UiCheck =class extends bricks.UiType {
@ -645,7 +693,7 @@ bricks.UiCode =class extends bricks.UiType {
if(event){ if(event){
bricks.extend(params, event.params); bricks.extend(params, event.params);
} }
await loadData(params); await this.loadData(params);
} }
async loadData(params){ async loadData(params){
var jcall = bricks.jcall; var jcall = bricks.jcall;
@ -814,6 +862,7 @@ Input.register('UiCheck', bricks.UiCheck);
Input.register('UiCheckBox', bricks.UiCheckBox); Input.register('UiCheckBox', bricks.UiCheckBox);
Input.register('UiEmail', bricks.UiEmail); Input.register('UiEmail', bricks.UiEmail);
Input.register('UiFile', bricks.UiFile); Input.register('UiFile', bricks.UiFile);
Input.register('UiImage', bricks.UiImage);
Input.register('UiCode', bricks.UiCode); Input.register('UiCode', bricks.UiCode);
Input.register('UiText', bricks.UiText); Input.register('UiText', bricks.UiText);
Input.register('UiPassword', bricks.UiPassword); Input.register('UiPassword', bricks.UiPassword);

View File

@ -213,6 +213,7 @@ bricks.HttpResponseStream = class extends bricks.HttpResponse {
buff_ += text; buff_ += text;
const lines = buff_.split('\n'); const lines = buff_.split('\n');
for (var i=0;i<lines.length - 1; i++){ for (var i=0;i<lines.length - 1; i++){
console.log('line=', lines[i]);
handler(lines[i]); handler(lines[i]);
} }
buff_ = lines[lines.length - 1]; buff_ = lines[lines.length - 1];

View File

@ -31,7 +31,7 @@ bricks.ModelOutput = class extends bricks.HBox {
} }
} }
bricks.LlmModel = class { bricks.LlmModel = class extends bricks.JsWidget {
/* /*
{ {
icon: icon:
@ -45,11 +45,11 @@ bricks.LlmModel = class {
llm_message_format: llm_message_format:
use_session: use_session:
input_from: input_from:
io_mode:stream, sync or async response_mode:stream, sync or async
} }
*/ */
constructor(llmio, opts){ constructor(llmio, opts){
this.opts = opts; super(opts);
this.llmio = llmio; this.llmio = llmio;
if (opts.use_session){ if (opts.use_session){
this.messages = []; this.messages = [];
@ -84,6 +84,7 @@ bricks.LlmModel = class {
} else { } else {
d = bricks.extend({}, data); d = bricks.extend({}, data);
d.model = this.opts.model; d.model = this.opts.model;
d.mapi = this.mapi;
} }
if (this.response_mode == 'stream') { if (this.response_mode == 'stream') {
var hr = new bricks.HttpResponseStream(); var hr = new bricks.HttpResponseStream();
@ -126,7 +127,7 @@ bricks.LlmModel = class {
var merge_field = this.opts.merge_field || 'content'; var merge_field = this.opts.merge_field || 'content';
this.stream_data[merge_field] += data[merge_field]; this.stream_data[merge_field] += data[merge_field];
} }
chunk_response(l, mout){ chunk_response(mout, l){
var d = JSON.parse(l); var d = JSON.parse(l);
if (! d.content || d.content == ''){ if (! d.content || d.content == ''){
return; return;
@ -138,7 +139,6 @@ bricks.LlmModel = class {
if (! this.messages) return; if (! this.messages) return;
var msg = this.llm_msg_format(); var msg = this.llm_msg_format();
txt = bricks.escapeSpecialChars(txt);
var merge_field = this.opts.merge_field || 'content'; var merge_field = this.opts.merge_field || 'content';
var txt = bricks.escapeSpecialChars(this.stream_data[merge_field]); var txt = bricks.escapeSpecialChars(this.stream_data[merge_field]);
this.stream_data[merge_field] = txt; this.stream_data[merge_field] = txt;
@ -204,6 +204,7 @@ bricks.LlmIO = class extends bricks.VBox {
w.set_css(this.msg_css||'user_msg'); w.set_css(this.msg_css||'user_msg');
w.set_css('filler'); w.set_css('filler');
var img = new bricks.Icon({rate:2,url:this.user_icon||bricks_resource('imgs/user.png')}); var img = new bricks.Icon({rate:2,url:this.user_icon||bricks_resource('imgs/user.png')});
box.add_widget(new bricks.BlankIcon({rate:2, flexShrink:0}));
box.add_widget(w); box.add_widget(w);
box.add_widget(img); box.add_widget(img);
this.o_w.add_widget(box); this.o_w.add_widget(box);

View File

@ -75,7 +75,6 @@ bricks.BaseModal = class extends bricks.Layout {
} }
open(){ open(){
this.dom_element.style.display = ""; this.dom_element.style.display = "";
console.log('this.timeout=', this.timeout);
if (this.timeout > 0){ if (this.timeout > 0){
this.timeout_task = schedule_once(this.dismiss.bind(this), this.timeout); this.timeout_task = schedule_once(this.dismiss.bind(this), this.timeout);
} }

View File

@ -54,12 +54,10 @@ bricks.TabPanel = class extends bricks.Layout {
this.createToolbar(); this.createToolbar();
this.set_css('tabpanel'); this.set_css('tabpanel');
this.content_container.set_css('tabpanel-content'); this.content_container.set_css('tabpanel-content');
this.show_first_tab();
} }
show_first_tab(){ show_first_tab(){
this.show_content_by_tab_name(this.opts.items[0].name); this.toolbar.dispatch('command', this.opts.items[0]);
}
show_content_by_tab_name(name){
this.toolbar.click(name);
} }
createToolbar(){ createToolbar(){
var desc = { var desc = {

View File

@ -9,9 +9,6 @@ bricks.JsWidget = class {
this.opts = options; this.opts = options;
this.create(); this.create();
this.opts_set_style(); this.opts_set_style();
if (this.opts.tooltip){
this.dom_element.tooltip = this.opts.tooltip;
}
this._container = false; this._container = false;
this.parent = null; this.parent = null;
this.sizable_elements = []; this.sizable_elements = [];
@ -380,18 +377,27 @@ bricks.Tooltip = class extends bricks.Text {
opts.tip = null; opts.tip = null;
super(opts); super(opts);
this.set_css('modal'); this.set_css('modal');
this.set_style('minWidth', '90px');
} }
show(otext, event){ show(otext, event){
this.set_otext(otext); this.set_otext(otext);
this.set_style('zIndex', 999999999);
this.set_style('display', 'block');
var x,y; var x,y;
x = event.clientX; x = event.clientX;
y = event.clientY; y = event.clientY;
this.set_style('zIndex', 999999999); if (x + this.dom_element.offsetWidth > bricks.Body.dom_element.clientWidth){
this.set_style('display', 'block'); x = bricks.Body.dom_element.clientWidth - this.dom_element.offsetWidth;
}
if (y + this.dom_element.offsetHeight > bricks.Body.dom_element.clientHeight){
y = bricks.Body.dom_element.clientHeight - this.dom_element.offsetHeight;
}
this.set_style('left', x + 'px'); this.set_style('left', x + 'px');
this.set_style('top', y + 'px'); this.set_style('top', y + 'px');
console.log('moveover event happen');
} }
hide(){ hide(){
console.log('moveout event happen');
this.set_style('display', 'none'); this.set_style('display', 'none');
} }
} }

View File

@ -134,6 +134,14 @@
"dataurl":"test_code.json", "dataurl":"test_code.json",
"required":true "required":true
}, },
{
"uitype":"image",
"name":"Image",
"height":"100px",
"width":"100px",
"label":"Image",
"required":true
},
{ {
"uitype":"text", "uitype":"text",
"name":"text", "name":"text",