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 — 模型广场 */
|
/* Model Plaza — 模型广场 */
|
||||||
|
|
||||||
|
/* Hide provider view initially */
|
||||||
|
#plaza_view_provider {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.plaza-header {
|
.plaza-header {
|
||||||
padding: 8px 16px 4px 16px;
|
padding: 8px 16px 4px 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.plaza-tabs .tab-bar {
|
/* View switcher buttons */
|
||||||
border-bottom: 2px solid var(--sage-border, #e2e8f0);
|
.plaza-view-switcher {
|
||||||
|
gap: 8px;
|
||||||
|
padding: 8px 0 4px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.plaza-tabs .tab-item {
|
.plaza-view-btn {
|
||||||
font-weight: 500;
|
border-radius: 6px !important;
|
||||||
transition: color 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.plaza-tabs .tab-item:hover {
|
.plaza-view-btn.plaza-view-active {
|
||||||
color: var(--sage-brand, #6366f1);
|
border: 2px solid var(--sage-brand, #6366f1) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Left sidebar */
|
/* Left sidebar */
|
||||||
@ -69,17 +76,6 @@
|
|||||||
padding: 4px 8px;
|
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 */
|
/* Model icon area */
|
||||||
.plaza-card .model-icon-row {
|
.plaza-card .model-icon-row {
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
|
|||||||
@ -30,192 +30,93 @@
|
|||||||
"halign": "left",
|
"halign": "left",
|
||||||
"wrap": true
|
"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",
|
"widgettype": "VBox",
|
||||||
"id": "plaza_tabs",
|
"id": "plaza_view_catelog",
|
||||||
"options": {
|
"options": {
|
||||||
"css": "filler plaza-tabs",
|
"css": "filler",
|
||||||
"tab_pos": "top",
|
"width": "100%",
|
||||||
"items": [
|
"height": "100%"
|
||||||
{
|
},
|
||||||
"name": "by_catelog",
|
"subwidgets": [
|
||||||
"label": "按分类",
|
{
|
||||||
"content": {
|
"widgettype": "urlwidget",
|
||||||
"widgettype": "HBox",
|
"options": {
|
||||||
"options": {
|
"css": "filler",
|
||||||
"css": "filler",
|
"width": "100%",
|
||||||
"width": "100%",
|
"height": "100%",
|
||||||
"height": "100%"
|
"url": "{{entire_url('show_llms.ui')}}"
|
||||||
},
|
|
||||||
"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')}}"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
]
|
}
|
||||||
}
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"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",
|
"css":"plaza-nav-btn",
|
||||||
"width":"100%"
|
"width":"100%"
|
||||||
},
|
},
|
||||||
"binds":[
|
"binds":[
|
||||||
{
|
{
|
||||||
"wid":"self",
|
"wid":"self",
|
||||||
"event":"click",
|
"event":"click",
|
||||||
"actiontype":"urlwidget",
|
"actiontype":"urlwidget",
|
||||||
"target":"app.plaza_cards_panel",
|
"target":"app.plaza_cards_panel",
|
||||||
"mode":"replace",
|
"mode":"replace",
|
||||||
"options":{
|
"options":{
|
||||||
"url":"{{entire_url('show_llms_cards.ui')}}"
|
"url":"{{entire_url('show_llms_cards.ui')}}"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
]
|
||||||
]
|
}{% for cat in catelogs %},
|
||||||
},
|
|
||||||
{% for cat in catelogs %}
|
|
||||||
{
|
{
|
||||||
"widgettype":"Button",
|
"widgettype":"Button",
|
||||||
"options":{
|
"options":{
|
||||||
@ -43,34 +42,43 @@
|
|||||||
"css":"plaza-nav-btn",
|
"css":"plaza-nav-btn",
|
||||||
"width":"100%"
|
"width":"100%"
|
||||||
},
|
},
|
||||||
"binds":[
|
"binds":[
|
||||||
{
|
{
|
||||||
"wid":"self",
|
"wid":"self",
|
||||||
"event":"click",
|
"event":"click",
|
||||||
"actiontype":"urlwidget",
|
"actiontype":"urlwidget",
|
||||||
"target":"app.plaza_cards_panel",
|
"target":"app.plaza_cards_panel",
|
||||||
"mode":"replace",
|
"mode":"replace",
|
||||||
"options":{
|
"options":{
|
||||||
"url":"{{entire_url('show_llms_cards.ui')}}",
|
"url":"{{entire_url('show_llms_cards.ui')}}",
|
||||||
"params":{
|
"params":{
|
||||||
"catelogid":"{{cat.id}}"
|
"catelogid":"{{cat.id}}"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
]
|
||||||
]
|
}{% endfor %}
|
||||||
}{% if not loop.last %},{% endif %}
|
|
||||||
{% endfor %}
|
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"widgettype":"urlwidget",
|
"widgettype":"VBox",
|
||||||
"id":"plaza_cards_panel",
|
"id":"plaza_cards_panel",
|
||||||
"options":{
|
"options":{
|
||||||
"css":"filler",
|
"css":"filler",
|
||||||
"cwidth":82,
|
"cwidth":82,
|
||||||
"height":"100%",
|
"height":"100%"
|
||||||
"url":"{{entire_url('show_llms_cards.ui')}}"
|
},
|
||||||
}
|
"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",
|
"css":"plaza-nav-btn",
|
||||||
"width":"100%"
|
"width":"100%"
|
||||||
},
|
},
|
||||||
"binds":[
|
"binds":[
|
||||||
{
|
{
|
||||||
"wid":"self",
|
"wid":"self",
|
||||||
"event":"click",
|
"event":"click",
|
||||||
"actiontype":"urlwidget",
|
"actiontype":"urlwidget",
|
||||||
"target":"app.plaza_provider_panel",
|
"target":"app.plaza_provider_panel",
|
||||||
"mode":"replace",
|
"mode":"replace",
|
||||||
"options":{
|
"options":{
|
||||||
"url":"{{entire_url('show_llms_cards_by_provider.ui')}}"
|
"url":"{{entire_url('show_llms_cards_by_provider.ui')}}"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
]
|
||||||
]
|
}{% for p in providers %},
|
||||||
},
|
|
||||||
{% for p in providers %}
|
|
||||||
{
|
{
|
||||||
"widgettype":"Button",
|
"widgettype":"Button",
|
||||||
"options":{
|
"options":{
|
||||||
@ -43,34 +42,43 @@
|
|||||||
"css":"plaza-nav-btn",
|
"css":"plaza-nav-btn",
|
||||||
"width":"100%"
|
"width":"100%"
|
||||||
},
|
},
|
||||||
"binds":[
|
"binds":[
|
||||||
{
|
{
|
||||||
"wid":"self",
|
"wid":"self",
|
||||||
"event":"click",
|
"event":"click",
|
||||||
"actiontype":"urlwidget",
|
"actiontype":"urlwidget",
|
||||||
"target":"app.plaza_provider_panel",
|
"target":"app.plaza_provider_panel",
|
||||||
"mode":"replace",
|
"mode":"replace",
|
||||||
"options":{
|
"options":{
|
||||||
"url":"{{entire_url('show_llms_cards_by_provider.ui')}}",
|
"url":"{{entire_url('show_llms_cards_by_provider.ui')}}",
|
||||||
"params":{
|
"params":{
|
||||||
"providerid":"{{p.id}}"
|
"providerid":"{{p.id}}"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
]
|
||||||
]
|
}{% endfor %}
|
||||||
}{% if not loop.last %},{% endif %}
|
|
||||||
{% endfor %}
|
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"widgettype":"urlwidget",
|
"widgettype":"VBox",
|
||||||
"id":"plaza_provider_panel",
|
"id":"plaza_provider_panel",
|
||||||
"options":{
|
"options":{
|
||||||
"css":"filler",
|
"css":"filler",
|
||||||
"cwidth":82,
|
"cwidth":82,
|
||||||
"height":"100%",
|
"height":"100%"
|
||||||
"url":"{{entire_url('show_llms_cards_by_provider.ui')}}"
|
},
|
||||||
}
|
"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