137 lines
4.4 KiB
Python
137 lines
4.4 KiB
Python
# -*- coding: utf-8 -*-
|
|
"""
|
|
渲染框架相关组件
|
|
"""
|
|
|
|
import reflex as rx
|
|
|
|
from application.state.frame import FrameState
|
|
|
|
# 初始化侧边栏图标导航按钮字典
|
|
sidebar_icon_nav_buttons = {
|
|
"conversation": {"src": "/assets/conversation.svg", "text": "对话"},
|
|
"knowledge_base": {"src": "/assets/knowledge_base.svg", "text": "知识库"},
|
|
}
|
|
|
|
|
|
def render_brand_logo(width: str = "34px", height: str = "34px") -> rx.Component:
|
|
"""
|
|
渲染品牌 Logo
|
|
:param width: 宽度，默认为 34px
|
|
:param height: 高度，默认为 34px
|
|
"""
|
|
return rx.image(
|
|
src="/assets/logo.png",
|
|
width=width,
|
|
height=height,
|
|
object_fit="contain", # 等比缩放
|
|
)
|
|
|
|
|
|
def render_sidebar_icon_nav_button(
|
|
sidebar_icon_nav_button: str,
|
|
) -> rx.Component:
|
|
"""
|
|
渲染侧边栏图标导航按钮
|
|
:param sidebar_icon_nav_button: 侧边栏图标导航按钮
|
|
"""
|
|
# 侧边栏图标导航按钮图标
|
|
src = sidebar_icon_nav_buttons[sidebar_icon_nav_button]["src"]
|
|
# 侧边栏图标导航按钮标签
|
|
text = sidebar_icon_nav_buttons[sidebar_icon_nav_button]["text"]
|
|
|
|
# 若选中侧边栏图标导航按钮图标非指定图标导航按钮图标则正常渲染，否则高亮渲染
|
|
return rx.cond(
|
|
FrameState.sidebar_icon_nav_button != sidebar_icon_nav_button,
|
|
# 正常渲染
|
|
rx.button(
|
|
rx.vstack(
|
|
rx.icon(icon, size=18),
|
|
rx.text(text, font_size="10px"),
|
|
spacing="2",
|
|
align_items="center",
|
|
),
|
|
width="100%",
|
|
justify_content="center",
|
|
variant="surface",
|
|
color_scheme="blue",
|
|
on_click=lambda: FrameState.switch_active_sidebar_tab(
|
|
sidebar_icon_nav_button
|
|
),
|
|
padding_y="10px",
|
|
),
|
|
# 高亮渲染
|
|
rx.button(
|
|
rx.vstack(
|
|
rx.box(
|
|
# 渲染图标
|
|
rx.image(
|
|
src=src,
|
|
width="24px",
|
|
height="24px",
|
|
object_fit="contain", # 等比缩放
|
|
),
|
|
background_color="#e4f7ff",
|
|
border_radius="4px",
|
|
),
|
|
rx.text(text, size="8"),
|
|
spacing="2",
|
|
align_items="center",
|
|
),
|
|
width="100%",
|
|
justify_content="center",
|
|
variant="soft",
|
|
color_scheme="blue",
|
|
padding_y="10px",
|
|
),
|
|
)
|
|
|
|
|
|
def render_sidebar() -> rx.Component:
|
|
"""
|
|
渲染侧边栏
|
|
"""
|
|
return rx.vstack(
|
|
# 渲染顶部
|
|
rx.vstack(
|
|
# 渲染品牌 LOGO 和名称
|
|
rx.vstack(
|
|
# 渲染品牌 Logo
|
|
render_brand_logo(),
|
|
# 渲染品牌名称
|
|
rx.text(
|
|
"MateAgent",
|
|
line_height="20px", # 行高
|
|
font_size="11px",
|
|
font_weight="700",
|
|
color="var(--devui-base-text-dark)",
|
|
),
|
|
display="flex", # 弹性布局
|
|
flex_direction="column", # 垂直方向布局
|
|
justify_content="center", # 水平居中对齐
|
|
align_items="center", # 水平居中对齐
|
|
gap="4px",
|
|
),
|
|
# 渲染分隔线
|
|
rx.divider(
|
|
width="32px", height="1px", margin="16px 0", background_color="#babbc0"
|
|
),
|
|
# 渲染侧边栏图标导航按钮：对话
|
|
render_sidebar_icon_nav_button(sidebar_icon_nav_button="conversation"),
|
|
# 渲染侧边栏图标导航按钮：知识库
|
|
render_sidebar_icon_nav_button(sidebar_icon_nav_button="knowledge_base"),
|
|
margin_top="12px", # 上外边距
|
|
display="flex", # 弹性布局
|
|
flex_direction="column", # 垂直方向布局
|
|
align_items="center", # 水平居中对齐
|
|
width="100%", # 宽度为父容器宽度
|
|
),
|
|
display="flex", # 弹性布局
|
|
flex_direction="column", # 垂直方向布局
|
|
justify_content="space-between", # 间距分布
|
|
align_items="center", # 水平居中对齐
|
|
width="60px", # 宽度
|
|
height="100%", # 高度为父容器高度
|
|
box_sizing="border-box", # 盒模型
|
|
)
|