fix: 模型广场彻底重构 — 移除TabPanel，用VBox+script切换视图
根因链：
1. TabPanel内部容器结构导致getWidgetById找不到tab content中的widget
2. urlwidget渲染后替换自身DOM，id丢失
修复：
- model_plaza.ui: 移除TabPanel，用两个VBox(按分类/按供应商)+script切换display
- plaza_cards_panel/plaza_provider_panel改为VBox容器(urlwidget作子组件)，id不丢失
- CSS用#plaza_view_provider{display:none}初始隐藏供应商视图
- 切换按钮用getElementById直接操作display，不依赖bricks widget寻址
- 全链路filler确保VScrollPanel获得确定高度可滚动
This commit is contained in:
parent
fed36ff079
commit
be3c939955
@ -1,20 +1,27 @@
|
||||
/* Model Plaza — 模型广场 */
|
||||
|
||||
/* Hide provider view initially */
|
||||
#plaza_view_provider {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.plaza-header {
|
||||
padding: 8px 16px 4px 16px;
|
||||
}
|
||||
|
||||
.plaza-tabs .tab-bar {
|
||||
border-bottom: 2px solid var(--sage-border, #e2e8f0);
|
||||
/* View switcher buttons */
|
||||
.plaza-view-switcher {
|
||||
gap: 8px;
|
||||
padding: 8px 0 4px 0;
|
||||
}
|
||||
|
||||
.plaza-tabs .tab-item {
|
||||
font-weight: 500;
|
||||
transition: color 0.2s ease;
|
||||
.plaza-view-btn {
|
||||
border-radius: 6px !important;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.plaza-tabs .tab-item:hover {
|
||||
color: var(--sage-brand, #6366f1);
|
||||
.plaza-view-btn.plaza-view-active {
|
||||
border: 2px solid var(--sage-brand, #6366f1) !important;
|
||||
}
|
||||
|
||||
/* Left sidebar */
|
||||
@ -69,17 +76,6 @@
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
/* Right panel: ensure scrollable area fills available space */
|
||||
.plaza-tabs .tabpanel-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.plaza-tabs .tabpanel-content > .scrollpanel {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Model icon area */
|
||||
.plaza-card .model-icon-row {
|
||||
gap: 8px;
|
||||
|
||||
@ -30,192 +30,93 @@
|
||||
"halign": "left",
|
||||
"wrap": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"widgettype": "HBox",
|
||||
"options": {
|
||||
"css": "plaza-view-switcher",
|
||||
"cheight": 3
|
||||
},
|
||||
"subwidgets": [
|
||||
{
|
||||
"widgettype": "Button",
|
||||
"id": "btn_by_catelog",
|
||||
"options": {
|
||||
"label": "按分类",
|
||||
"css": "plaza-view-btn plaza-view-active",
|
||||
"cwidth": 15
|
||||
},
|
||||
"binds": [
|
||||
{
|
||||
"wid": "self",
|
||||
"event": "click",
|
||||
"actiontype": "script",
|
||||
"target": "self",
|
||||
"script": "document.getElementById('plaza_view_provider').style.display='none'; document.getElementById('plaza_view_catelog').style.display='flex'; var a=bricks.getWidgetById('btn_by_catelog',bricks.app); var b=bricks.getWidgetById('btn_by_provider',bricks.app); if(a)a.dom_element.classList.add('plaza-view-active'); if(b)b.dom_element.classList.remove('plaza-view-active');"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"widgettype": "Button",
|
||||
"id": "btn_by_provider",
|
||||
"options": {
|
||||
"label": "按供应商",
|
||||
"css": "plaza-view-btn",
|
||||
"cwidth": 15
|
||||
},
|
||||
"binds": [
|
||||
{
|
||||
"wid": "self",
|
||||
"event": "click",
|
||||
"actiontype": "script",
|
||||
"target": "self",
|
||||
"script": "document.getElementById('plaza_view_catelog').style.display='none'; document.getElementById('plaza_view_provider').style.display='flex'; var a=bricks.getWidgetById('btn_by_catelog',bricks.app); var b=bricks.getWidgetById('btn_by_provider',bricks.app); if(a)a.dom_element.classList.remove('plaza-view-active'); if(b)b.dom_element.classList.add('plaza-view-active');"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"widgettype": "TabPanel",
|
||||
"id": "plaza_tabs",
|
||||
"widgettype": "VBox",
|
||||
"id": "plaza_view_catelog",
|
||||
"options": {
|
||||
"css": "filler plaza-tabs",
|
||||
"tab_pos": "top",
|
||||
"items": [
|
||||
{
|
||||
"name": "by_catelog",
|
||||
"label": "按分类",
|
||||
"content": {
|
||||
"widgettype": "HBox",
|
||||
"options": {
|
||||
"css": "filler",
|
||||
"width": "100%",
|
||||
"height": "100%"
|
||||
},
|
||||
"subwidgets": [
|
||||
{
|
||||
"widgettype": "VScrollPanel",
|
||||
"options": {
|
||||
"cwidth": 18,
|
||||
"height": "100%",
|
||||
"css": "plaza-sidebar"
|
||||
},
|
||||
"subwidgets": [
|
||||
{
|
||||
"widgettype": "Button",
|
||||
"options": {
|
||||
"label": "全部",
|
||||
"css": "plaza-nav-btn",
|
||||
"width": "100%"
|
||||
},
|
||||
"binds": [
|
||||
{
|
||||
"wid": "self",
|
||||
"event": "click",
|
||||
"actiontype": "urlwidget",
|
||||
"target": "app.plaza_cards_panel",
|
||||
"mode": "replace",
|
||||
"options": {
|
||||
"url": "{{entire_url('show_llms_cards.ui')}}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}{% for cat in catelogs %},
|
||||
{
|
||||
"widgettype": "Button",
|
||||
"options": {
|
||||
"label": "{{cat.name}}",
|
||||
"css": "plaza-nav-btn",
|
||||
"width": "100%"
|
||||
},
|
||||
"binds": [
|
||||
{
|
||||
"wid": "self",
|
||||
"event": "click",
|
||||
"actiontype": "urlwidget",
|
||||
"target": "app.plaza_cards_panel",
|
||||
"mode": "replace",
|
||||
"options": {
|
||||
"url": "{{entire_url('show_llms_cards.ui')}}",
|
||||
"params": {
|
||||
"catelogid": "{{cat.id}}"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}{% endfor %}
|
||||
]
|
||||
},
|
||||
{
|
||||
"widgettype": "VBox",
|
||||
"id": "plaza_cards_panel",
|
||||
"options": {
|
||||
"css": "filler",
|
||||
"cwidth": 82,
|
||||
"height": "100%"
|
||||
},
|
||||
"subwidgets": [
|
||||
{
|
||||
"widgettype": "urlwidget",
|
||||
"options": {
|
||||
"css": "filler",
|
||||
"width": "100%",
|
||||
"height": "100%",
|
||||
"url": "{{entire_url('show_llms_cards.ui')}}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "by_provider",
|
||||
"label": "按供应商",
|
||||
"content": {
|
||||
"widgettype": "HBox",
|
||||
"options": {
|
||||
"css": "filler",
|
||||
"width": "100%",
|
||||
"height": "100%"
|
||||
},
|
||||
"subwidgets": [
|
||||
{
|
||||
"widgettype": "VScrollPanel",
|
||||
"options": {
|
||||
"cwidth": 18,
|
||||
"height": "100%",
|
||||
"css": "plaza-sidebar"
|
||||
},
|
||||
"subwidgets": [
|
||||
{
|
||||
"widgettype": "Button",
|
||||
"options": {
|
||||
"label": "全部",
|
||||
"css": "plaza-nav-btn",
|
||||
"width": "100%"
|
||||
},
|
||||
"binds": [
|
||||
{
|
||||
"wid": "self",
|
||||
"event": "click",
|
||||
"actiontype": "urlwidget",
|
||||
"target": "app.plaza_provider_panel",
|
||||
"mode": "replace",
|
||||
"options": {
|
||||
"url": "{{entire_url('show_llms_cards_by_provider.ui')}}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}{% for p in providers %},
|
||||
{
|
||||
"widgettype": "Button",
|
||||
"options": {
|
||||
"label": "{{p.orgname}}",
|
||||
"css": "plaza-nav-btn",
|
||||
"width": "100%"
|
||||
},
|
||||
"binds": [
|
||||
{
|
||||
"wid": "self",
|
||||
"event": "click",
|
||||
"actiontype": "urlwidget",
|
||||
"target": "app.plaza_provider_panel",
|
||||
"mode": "replace",
|
||||
"options": {
|
||||
"url": "{{entire_url('show_llms_cards_by_provider.ui')}}",
|
||||
"params": {
|
||||
"providerid": "{{p.id}}"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}{% endfor %}
|
||||
]
|
||||
},
|
||||
{
|
||||
"widgettype": "VBox",
|
||||
"id": "plaza_provider_panel",
|
||||
"options": {
|
||||
"css": "filler",
|
||||
"cwidth": 82,
|
||||
"height": "100%"
|
||||
},
|
||||
"subwidgets": [
|
||||
{
|
||||
"widgettype": "urlwidget",
|
||||
"options": {
|
||||
"css": "filler",
|
||||
"width": "100%",
|
||||
"height": "100%",
|
||||
"url": "{{entire_url('show_llms_cards_by_provider.ui')}}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
"css": "filler",
|
||||
"width": "100%",
|
||||
"height": "100%"
|
||||
},
|
||||
"subwidgets": [
|
||||
{
|
||||
"widgettype": "urlwidget",
|
||||
"options": {
|
||||
"css": "filler",
|
||||
"width": "100%",
|
||||
"height": "100%",
|
||||
"url": "{{entire_url('show_llms.ui')}}"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"widgettype": "VBox",
|
||||
"id": "plaza_view_provider",
|
||||
"options": {
|
||||
"css": "filler",
|
||||
"width": "100%",
|
||||
"height": "100%"
|
||||
},
|
||||
"subwidgets": [
|
||||
{
|
||||
"widgettype": "urlwidget",
|
||||
"options": {
|
||||
"css": "filler",
|
||||
"width": "100%",
|
||||
"height": "100%",
|
||||
"url": "{{entire_url('show_llms_by_providers.ui')}}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -22,20 +22,19 @@
|
||||
"css":"plaza-nav-btn",
|
||||
"width":"100%"
|
||||
},
|
||||
"binds":[
|
||||
{
|
||||
"wid":"self",
|
||||
"event":"click",
|
||||
"actiontype":"urlwidget",
|
||||
"target":"app.plaza_cards_panel",
|
||||
"mode":"replace",
|
||||
"options":{
|
||||
"url":"{{entire_url('show_llms_cards.ui')}}"
|
||||
"binds":[
|
||||
{
|
||||
"wid":"self",
|
||||
"event":"click",
|
||||
"actiontype":"urlwidget",
|
||||
"target":"app.plaza_cards_panel",
|
||||
"mode":"replace",
|
||||
"options":{
|
||||
"url":"{{entire_url('show_llms_cards.ui')}}"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{% for cat in catelogs %}
|
||||
]
|
||||
}{% for cat in catelogs %},
|
||||
{
|
||||
"widgettype":"Button",
|
||||
"options":{
|
||||
@ -43,34 +42,43 @@
|
||||
"css":"plaza-nav-btn",
|
||||
"width":"100%"
|
||||
},
|
||||
"binds":[
|
||||
{
|
||||
"wid":"self",
|
||||
"event":"click",
|
||||
"actiontype":"urlwidget",
|
||||
"target":"app.plaza_cards_panel",
|
||||
"mode":"replace",
|
||||
"options":{
|
||||
"url":"{{entire_url('show_llms_cards.ui')}}",
|
||||
"params":{
|
||||
"catelogid":"{{cat.id}}"
|
||||
"binds":[
|
||||
{
|
||||
"wid":"self",
|
||||
"event":"click",
|
||||
"actiontype":"urlwidget",
|
||||
"target":"app.plaza_cards_panel",
|
||||
"mode":"replace",
|
||||
"options":{
|
||||
"url":"{{entire_url('show_llms_cards.ui')}}",
|
||||
"params":{
|
||||
"catelogid":"{{cat.id}}"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}{% if not loop.last %},{% endif %}
|
||||
{% endfor %}
|
||||
]
|
||||
}{% endfor %}
|
||||
]
|
||||
},
|
||||
{
|
||||
"widgettype":"urlwidget",
|
||||
"widgettype":"VBox",
|
||||
"id":"plaza_cards_panel",
|
||||
"options":{
|
||||
"css":"filler",
|
||||
"cwidth":82,
|
||||
"height":"100%",
|
||||
"url":"{{entire_url('show_llms_cards.ui')}}"
|
||||
}
|
||||
"height":"100%"
|
||||
},
|
||||
"subwidgets":[
|
||||
{
|
||||
"widgettype":"urlwidget",
|
||||
"options":{
|
||||
"css":"filler",
|
||||
"width":"100%",
|
||||
"height":"100%",
|
||||
"url":"{{entire_url('show_llms_cards.ui')}}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -22,20 +22,19 @@
|
||||
"css":"plaza-nav-btn",
|
||||
"width":"100%"
|
||||
},
|
||||
"binds":[
|
||||
{
|
||||
"wid":"self",
|
||||
"event":"click",
|
||||
"actiontype":"urlwidget",
|
||||
"target":"app.plaza_provider_panel",
|
||||
"mode":"replace",
|
||||
"options":{
|
||||
"url":"{{entire_url('show_llms_cards_by_provider.ui')}}"
|
||||
"binds":[
|
||||
{
|
||||
"wid":"self",
|
||||
"event":"click",
|
||||
"actiontype":"urlwidget",
|
||||
"target":"app.plaza_provider_panel",
|
||||
"mode":"replace",
|
||||
"options":{
|
||||
"url":"{{entire_url('show_llms_cards_by_provider.ui')}}"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{% for p in providers %}
|
||||
]
|
||||
}{% for p in providers %},
|
||||
{
|
||||
"widgettype":"Button",
|
||||
"options":{
|
||||
@ -43,34 +42,43 @@
|
||||
"css":"plaza-nav-btn",
|
||||
"width":"100%"
|
||||
},
|
||||
"binds":[
|
||||
{
|
||||
"wid":"self",
|
||||
"event":"click",
|
||||
"actiontype":"urlwidget",
|
||||
"target":"app.plaza_provider_panel",
|
||||
"mode":"replace",
|
||||
"options":{
|
||||
"url":"{{entire_url('show_llms_cards_by_provider.ui')}}",
|
||||
"params":{
|
||||
"providerid":"{{p.id}}"
|
||||
"binds":[
|
||||
{
|
||||
"wid":"self",
|
||||
"event":"click",
|
||||
"actiontype":"urlwidget",
|
||||
"target":"app.plaza_provider_panel",
|
||||
"mode":"replace",
|
||||
"options":{
|
||||
"url":"{{entire_url('show_llms_cards_by_provider.ui')}}",
|
||||
"params":{
|
||||
"providerid":"{{p.id}}"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}{% if not loop.last %},{% endif %}
|
||||
{% endfor %}
|
||||
]
|
||||
}{% endfor %}
|
||||
]
|
||||
},
|
||||
{
|
||||
"widgettype":"urlwidget",
|
||||
"widgettype":"VBox",
|
||||
"id":"plaza_provider_panel",
|
||||
"options":{
|
||||
"css":"filler",
|
||||
"cwidth":82,
|
||||
"height":"100%",
|
||||
"url":"{{entire_url('show_llms_cards_by_provider.ui')}}"
|
||||
}
|
||||
"height":"100%"
|
||||
},
|
||||
"subwidgets":[
|
||||
{
|
||||
"widgettype":"urlwidget",
|
||||
"options":{
|
||||
"css":"filler",
|
||||
"width":"100%",
|
||||
"height":"100%",
|
||||
"url":"{{entire_url('show_llms_cards_by_provider.ui')}}"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user