127 lines
4.3 KiB
Python
127 lines
4.3 KiB
Python
# -*- coding: utf-8 -*-
|
|
"""
|
|
渲染框架相关组件
|
|
"""
|
|
|
|
import reflex as rx
|
|
|
|
from application.state.frame import FrameState
|
|
|
|
# 初始化侧边栏图标导航按钮字典
|
|
sidebar_icon_nav_buttons = {
|
|
"conversation": {"src": "/conversation.svg", "text": "对话"},
|
|
"knowledge_base": {"src": "/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="/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: 侧边栏图标导航按钮
|
|
"""
|
|
# 指定侧边栏图标导航按钮的激活状态
|
|
is_actived = sidebar_icon_nav_button == FrameState.sidebar_icon_nav_button
|
|
|
|
return rx.box(
|
|
# 渲染图标盒子
|
|
rx.box(
|
|
rx.image(
|
|
src=sidebar_icon_nav_buttons[sidebar_icon_nav_button]["src"],
|
|
width="24px",
|
|
height="24px",
|
|
object_fit="contain", # 等比缩放
|
|
),
|
|
display="flex", # 弹性布局
|
|
justify_content="center", # 水平居中对齐
|
|
align_items="center", # 垂直居中对齐
|
|
width="36px", # 宽度
|
|
height="36px", # 高度
|
|
border_radius="var(--devui-border-radius-card)", # 圆角
|
|
# 若已激活则渲染图标盒子背景颜色和阴影，否则不渲染
|
|
style={
|
|
"background-color": rx.cond(
|
|
is_actived, "var(--devui-base-bg)", "transparent"
|
|
),
|
|
"box-shadow": rx.cond(is_actived, "0 4px 12px #0000001a", "none"),
|
|
},
|
|
),
|
|
# 渲染标签
|
|
rx.text(
|
|
sidebar_icon_nav_buttons[sidebar_icon_nav_button]["text"],
|
|
color="var(--devui-text)",
|
|
font_size="var(--devui-font-size-sm)",
|
|
line_height="20px",
|
|
),
|
|
display="flex", # 弹性布局
|
|
flex_direction="column", # 垂直方向布局
|
|
align_items="center", # 垂直居中对齐
|
|
gap="4px",
|
|
font_size="var(--devui-font-size-sm)", # 字体大小
|
|
cursor="pointer", # 鼠标指针
|
|
)
|
|
|
|
|
|
def render_sidebar() -> rx.Component:
|
|
"""
|
|
渲染侧边栏
|
|
"""
|
|
return rx.vstack(
|
|
# 渲染顶部
|
|
rx.vstack(
|
|
# 渲染品牌 LOGO 和名称
|
|
rx.vstack(
|
|
# 渲染品牌 Logo
|
|
render_brand_logo(),
|
|
# 渲染品牌名称
|
|
rx.text(
|
|
"MateAI",
|
|
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", # 盒模型
|
|
)
|