feat: Tree widget for directory nav + folder_content dynamic view
This commit is contained in:
parent
e41d034be4
commit
49d3d0291a
@ -12,18 +12,18 @@
|
|||||||
"options": {
|
"options": {
|
||||||
"width": "100%",
|
"width": "100%",
|
||||||
"bgcolor": "#f8f9fa",
|
"bgcolor": "#f8f9fa",
|
||||||
"padding": "12px 16px",
|
"padding": "10px 16px",
|
||||||
"alignItems": "center",
|
"alignItems": "center",
|
||||||
"borderBottom": "1px solid #e0e0e0"
|
"borderBottom": "1px solid #e0e0e0"
|
||||||
},
|
},
|
||||||
"subwidgets": [
|
"subwidgets": [
|
||||||
{"widgettype": "Text", "options": {"text": "← 返回知识库列表", "css": "clickable", "cfontsize": 14, "color": "#4a90d9"}, "binds": [
|
{"widgettype": "Text", "options": {"text": "← 知识库列表", "css": "clickable", "cfontsize": 14, "color": "#4a90d9"}, "binds": [
|
||||||
{"wid": "self", "event": "click", "actiontype": "urlwidget", "target": "app.rag_main_content", "mode": "replace", "options": {"url": "{{entire_url('/knowledge_bases_list/index.ui')}}"}}
|
{"wid": "self", "event": "click", "actiontype": "urlwidget", "target": "app.rag_main_content", "mode": "replace", "options": {"url": "{{entire_url('/knowledge_bases_list/index.ui')}}"}}
|
||||||
]},
|
]},
|
||||||
{"widgettype": "Text", "options": {"text": "/", "cfontsize": 14, "color": "#ccc"}},
|
{"widgettype": "Text", "options": {"text": " / ", "cfontsize": 14, "color": "#ccc"}},
|
||||||
{"widgettype": "Text", "options": {"text": "📚 产品文档", "cfontsize": 16, "fontWeight": "bold", "color": "#333"}},
|
{"widgettype": "Text", "options": {"text": "📚 产品文档", "cfontsize": 16, "fontWeight": "bold", "color": "#333"}},
|
||||||
{"widgettype": "Text", "options": {"text": "", "css": "filler"}},
|
{"widgettype": "Text", "options": {"text": "", "css": "filler"}},
|
||||||
{"widgettype": "Text", "options": {"text": "📄 12 文档 · 📁 3 目录 · 💾 256MB", "cfontsize": 12, "color": "#888"}}
|
{"widgettype": "Text", "options": {"text": "📄 12文档 · 📁 3目录 · 💾 256MB", "cfontsize": 12, "color": "#888"}}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@ -37,61 +37,72 @@
|
|||||||
{
|
{
|
||||||
"widgettype": "VBox",
|
"widgettype": "VBox",
|
||||||
"options": {
|
"options": {
|
||||||
"cwidth": 14,
|
"cwidth": 15,
|
||||||
"bgcolor": "#fafafa",
|
"bgcolor": "#fafafa",
|
||||||
"borderRight": "1px solid #e0e0e0",
|
"borderRight": "1px solid #e0e0e0",
|
||||||
"padding": "12px",
|
"spacing": 0
|
||||||
"spacing": "4px"
|
|
||||||
},
|
},
|
||||||
"subwidgets": [
|
"subwidgets": [
|
||||||
{"widgettype": "Text", "options": {"text": "📁 目录结构", "cfontsize": 13, "fontWeight": "bold", "color": "#666"}},
|
|
||||||
{"widgettype": "Text", "options": {"text": ""}},
|
|
||||||
{
|
{
|
||||||
"widgettype": "HBox",
|
"widgettype": "HBox",
|
||||||
"options": {"spacing": "4px", "alignItems": "center"},
|
"options": {
|
||||||
|
"padding": "10px 12px",
|
||||||
|
"bgcolor": "#f0f0f0",
|
||||||
|
"borderBottom": "1px solid #e0e0e0",
|
||||||
|
"justifyContent": "space-between",
|
||||||
|
"alignItems": "center"
|
||||||
|
},
|
||||||
"subwidgets": [
|
"subwidgets": [
|
||||||
{"widgettype": "Text", "options": {"text": "📂", "cfontsize": 12}},
|
{"widgettype": "Text", "options": {"text": "📁 目录结构", "cfontsize": 13, "fontWeight": "bold", "color": "#666"}},
|
||||||
{"widgettype": "Text", "options": {"text": "技术文档", "cfontsize": 13, "color": "#4a90d9", "css": "clickable"}}
|
{"widgettype": "Text", "options": {"text": "+ 新建", "cfontsize": 12, "color": "#4a90d9", "css": "clickable"}}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"widgettype": "VBox",
|
"widgettype": "Tree",
|
||||||
"options": {"padding": "0 0 0 16px", "spacing": "2px"},
|
"options": {
|
||||||
"subwidgets": [
|
"items": [
|
||||||
{"widgettype": "HBox", "options": {"spacing": "4px"}, "subwidgets": [
|
{
|
||||||
{"widgettype": "Text", "options": {"text": "📄", "cfontsize": 11}},
|
"label": "技术文档",
|
||||||
{"widgettype": "Text", "options": {"text": "API参考.pdf", "cfontsize": 12, "color": "#666"}}
|
"id": "folder_tech",
|
||||||
]},
|
"icon": "📂",
|
||||||
{"widgettype": "HBox", "options": {"spacing": "4px"}, "subwidgets": [
|
"children": [
|
||||||
{"widgettype": "Text", "options": {"text": "📄", "cfontsize": 11}},
|
{"label": "API参考.pdf", "id": "file_api", "icon": "📄"},
|
||||||
{"widgettype": "Text", "options": {"text": "部署指南.md", "cfontsize": 12, "color": "#666"}}
|
{"label": "部署指南.md", "id": "file_deploy", "icon": "📄"},
|
||||||
]}
|
{"label": "接口规范", "id": "folder_api_spec", "icon": "📂", "children": [
|
||||||
|
{"label": "REST API.md", "id": "file_rest", "icon": "📄"},
|
||||||
|
{"label": "WebSocket.md", "id": "file_ws", "icon": "📄"}
|
||||||
|
]}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "产品介绍",
|
||||||
|
"id": "folder_product",
|
||||||
|
"icon": "📂"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "培训材料",
|
||||||
|
"id": "folder_training",
|
||||||
|
"icon": "📂"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"binds": [
|
||||||
|
{
|
||||||
|
"wid": "self",
|
||||||
|
"event": "selected",
|
||||||
|
"actiontype": "urlwidget",
|
||||||
|
"target": "app.detail_content",
|
||||||
|
"mode": "replace",
|
||||||
|
"options": {"url": "{{entire_url('/knowledge_bases_list/folder_content.ui')}}", "params": {"folder_id": "${item.id}", "folder_label": "${item.label}"}}
|
||||||
|
}
|
||||||
]
|
]
|
||||||
},
|
}
|
||||||
{"widgettype": "Text", "options": {"text": ""}},
|
|
||||||
{
|
|
||||||
"widgettype": "HBox",
|
|
||||||
"options": {"spacing": "4px", "alignItems": "center"},
|
|
||||||
"subwidgets": [
|
|
||||||
{"widgettype": "Text", "options": {"text": "📂", "cfontsize": 12}},
|
|
||||||
{"widgettype": "Text", "options": {"text": "产品介绍", "cfontsize": 13, "color": "#4a90d9", "css": "clickable"}}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"widgettype": "HBox",
|
|
||||||
"options": {"spacing": "4px", "alignItems": "center"},
|
|
||||||
"subwidgets": [
|
|
||||||
{"widgettype": "Text", "options": {"text": "📂", "cfontsize": 12}},
|
|
||||||
{"widgettype": "Text", "options": {"text": "培训材料", "cfontsize": 13, "color": "#4a90d9", "css": "clickable"}}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{"widgettype": "Text", "options": {"text": ""}},
|
|
||||||
{"widgettype": "Button", "options": {"label": "+ 新建目录", "bgcolor": "#e8e8e8", "color": "#666"}}
|
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"widgettype": "VBox",
|
"widgettype": "VBox",
|
||||||
"options": {
|
"options": {
|
||||||
|
"id": "detail_content",
|
||||||
"css": "filler",
|
"css": "filler",
|
||||||
"padding": "16px",
|
"padding": "16px",
|
||||||
"spacing": "12px"
|
"spacing": "12px"
|
||||||
@ -111,49 +122,16 @@
|
|||||||
},
|
},
|
||||||
"subwidgets": [
|
"subwidgets": [
|
||||||
{"widgettype": "Text", "options": {"text": "📂 拖拽文件到此处上传", "cfontsize": 15, "color": "#888"}},
|
{"widgettype": "Text", "options": {"text": "📂 拖拽文件到此处上传", "cfontsize": 15, "color": "#888"}},
|
||||||
{"widgettype": "Text", "options": {"text": "支持: TXT, PDF, JPG, PNG, MP3, WAV, MP4 · 最大500MB", "cfontsize": 11, "color": "#aaa"}}
|
{"widgettype": "Text", "options": {"text": "选中左侧目录后上传到该目录 · 支持 TXT/PDF/JPG/PNG/MP3/WAV/MP4", "cfontsize": 11, "color": "#aaa"}}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"widgettype": "Text",
|
"widgettype": "Text",
|
||||||
"options": {
|
"options": {
|
||||||
"text": "📄 当前目录: 技术文档 (2个文件)",
|
"text": "📂 全部分文件 · 请选择左侧目录查看具体内容",
|
||||||
"cfontsize": 13,
|
"cfontsize": 13,
|
||||||
"color": "#888"
|
"color": "#aaa"
|
||||||
}
|
}
|
||||||
},
|
|
||||||
{
|
|
||||||
"widgettype": "HBox",
|
|
||||||
"options": {"width": "100%", "bgcolor": "#f8f9fa", "padding": "8px 12px", "borderBottom": "1px solid #e0e0e0"},
|
|
||||||
"subwidgets": [
|
|
||||||
{"widgettype": "Text", "options": {"text": "文件名", "cfontsize": 12, "fontWeight": "bold", "color": "#888", "cwidth": 20}},
|
|
||||||
{"widgettype": "Text", "options": {"text": "类型", "cfontsize": 12, "fontWeight": "bold", "color": "#888", "cwidth": 8}},
|
|
||||||
{"widgettype": "Text", "options": {"text": "大小", "cfontsize": 12, "fontWeight": "bold", "color": "#888", "cwidth": 8}},
|
|
||||||
{"widgettype": "Text", "options": {"text": "状态", "cfontsize": 12, "fontWeight": "bold", "color": "#888", "cwidth": 8}},
|
|
||||||
{"widgettype": "Text", "options": {"text": "上传时间", "cfontsize": 12, "fontWeight": "bold", "color": "#888"}}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"widgettype": "HBox",
|
|
||||||
"options": {"width": "100%", "padding": "6px 12px", "borderBottom": "1px solid #f0f0f0"},
|
|
||||||
"subwidgets": [
|
|
||||||
{"widgettype": "Text", "options": {"text": "📄 API参考.pdf", "cfontsize": 13, "color": "#333", "cwidth": 20}},
|
|
||||||
{"widgettype": "Text", "options": {"text": "PDF", "cfontsize": 12, "color": "#e6a23c", "cwidth": 8}},
|
|
||||||
{"widgettype": "Text", "options": {"text": "1.2MB", "cfontsize": 12, "color": "#888", "cwidth": 8}},
|
|
||||||
{"widgettype": "Text", "options": {"text": "✅ 已入库", "cfontsize": 12, "color": "#50b86c", "cwidth": 8}},
|
|
||||||
{"widgettype": "Text", "options": {"text": "2026-07-20", "cfontsize": 12, "color": "#888"}}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"widgettype": "HBox",
|
|
||||||
"options": {"width": "100%", "padding": "6px 12px", "borderBottom": "1px solid #f0f0f0"},
|
|
||||||
"subwidgets": [
|
|
||||||
{"widgettype": "Text", "options": {"text": "📄 部署指南.md", "cfontsize": 13, "color": "#333", "cwidth": 20}},
|
|
||||||
{"widgettype": "Text", "options": {"text": "Markdown", "cfontsize": 12, "color": "#4a90d9", "cwidth": 8}},
|
|
||||||
{"widgettype": "Text", "options": {"text": "45KB", "cfontsize": 12, "color": "#888", "cwidth": 8}},
|
|
||||||
{"widgettype": "Text", "options": {"text": "✅ 已入库", "cfontsize": 12, "color": "#50b86c", "cwidth": 8}},
|
|
||||||
{"widgettype": "Text", "options": {"text": "2026-07-21", "cfontsize": 12, "color": "#888"}}
|
|
||||||
]
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
73
wwwroot/knowledge_bases_list/folder_content.ui
Normal file
73
wwwroot/knowledge_bases_list/folder_content.ui
Normal file
@ -0,0 +1,73 @@
|
|||||||
|
{
|
||||||
|
"widgettype": "VBox",
|
||||||
|
"options": {
|
||||||
|
"width": "100%",
|
||||||
|
"spacing": "12px"
|
||||||
|
},
|
||||||
|
"subwidgets": [
|
||||||
|
{
|
||||||
|
"widgettype": "HBox",
|
||||||
|
"options": {
|
||||||
|
"width": "100%",
|
||||||
|
"justifyContent": "space-between",
|
||||||
|
"alignItems": "center"
|
||||||
|
},
|
||||||
|
"subwidgets": [
|
||||||
|
{
|
||||||
|
"widgettype": "HBox",
|
||||||
|
"options": {"spacing": "4px", "alignItems": "center"},
|
||||||
|
"subwidgets": [
|
||||||
|
{"widgettype": "Text", "options": {"text": "📂", "cfontsize": 16}},
|
||||||
|
{"widgettype": "Text", "options": {"text": "{{params_kw.folder_label or '全部文件'}}", "cfontsize": 16, "fontWeight": "bold", "color": "#333"}},
|
||||||
|
{"widgettype": "Text", "options": {"text": "({{params_kw.folder_id or 'root'}})", "cfontsize": 11, "color": "#aaa"}}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"widgettype": "HBox",
|
||||||
|
"options": {"spacing": "8px"},
|
||||||
|
"subwidgets": [
|
||||||
|
{"widgettype": "Button", "options": {"label": "📁 上传文件", "bgcolor": "#4a90d9", "color": "#fff"}},
|
||||||
|
{"widgettype": "Button", "options": {"label": "📂 新建子目录", "bgcolor": "#e8e8e8", "color": "#666"}},
|
||||||
|
{"widgettype": "Button", "options": {"label": "🗑 删除选中", "bgcolor": "#f56c6c", "color": "#fff"}}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"widgettype": "VBox",
|
||||||
|
"options": {
|
||||||
|
"width": "100%",
|
||||||
|
"cheight": 5,
|
||||||
|
"bgcolor": "#f8f9fa",
|
||||||
|
"padding": "12px",
|
||||||
|
"css": "card",
|
||||||
|
"border": "2px dashed #d0d0d0",
|
||||||
|
"alignItems": "center",
|
||||||
|
"justifyContent": "center"
|
||||||
|
},
|
||||||
|
"subwidgets": [
|
||||||
|
{"widgettype": "Text", "options": {"text": "拖拽文件到此处上传到当前目录", "cfontsize": 13, "color": "#888"}}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"widgettype": "HBox",
|
||||||
|
"options": {"width": "100%", "bgcolor": "#f5f5f5", "padding": "8px 12px", "borderBottom": "1px solid #e0e0e0"},
|
||||||
|
"subwidgets": [
|
||||||
|
{"widgettype": "Text", "options": {"text": "文件名", "cfontsize": 12, "fontWeight": "bold", "color": "#888", "cwidth": 18}},
|
||||||
|
{"widgettype": "Text", "options": {"text": "类型", "cfontsize": 12, "fontWeight": "bold", "color": "#888", "cwidth": 6}},
|
||||||
|
{"widgettype": "Text", "options": {"text": "大小", "cfontsize": 12, "fontWeight": "bold", "color": "#888", "cwidth": 6}},
|
||||||
|
{"widgettype": "Text", "options": {"text": "状态", "cfontsize": 12, "fontWeight": "bold", "color": "#888", "cwidth": 6}},
|
||||||
|
{"widgettype": "Text", "options": {"text": "上传时间", "cfontsize": 12, "fontWeight": "bold", "color": "#888"}}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"widgettype": "Text",
|
||||||
|
"options": {
|
||||||
|
"text": "当前目录暂无文件",
|
||||||
|
"color": "#aaa",
|
||||||
|
"cfontsize": 13,
|
||||||
|
"halign": "center"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user