121 lines
3.6 KiB
Python
121 lines
3.6 KiB
Python
# -*- coding: utf-8 -*-
|
|
"""
|
|
渲染框架相关组件
|
|
"""
|
|
|
|
import reflex as rx
|
|
|
|
from application.states import SidebarState
|
|
|
|
# 侧边栏图标导航按钮字典
|
|
buttons = {
|
|
"conversation": {"src": "/conversation.svg", "text": "会话"},
|
|
"library": {"src": "/library.svg", "text": "知识库"},
|
|
}
|
|
|
|
|
|
def sidebar() -> rx.Component:
|
|
"""
|
|
侧边栏
|
|
"""
|
|
|
|
def button(
|
|
button: str,
|
|
) -> rx.Component:
|
|
"""
|
|
侧边栏图标导航按钮
|
|
:param button: 指定侧边栏图标导航按钮
|
|
"""
|
|
# 指定按钮的激活状态
|
|
is_actived = button == SidebarState.get_activated_button
|
|
|
|
return rx.box(
|
|
# 渲染图标容器
|
|
rx.box(
|
|
# 渲染图标
|
|
rx.image(
|
|
src=buttons[button]["src"],
|
|
width="24px",
|
|
height="24px",
|
|
object_fit="contain",
|
|
),
|
|
display="flex",
|
|
justify_content="center",
|
|
align_items="center",
|
|
width="36px",
|
|
height="36px",
|
|
border_radius="var(--prismui-border-radius)",
|
|
# 若激活则渲染背景颜色和阴影，否则不渲染
|
|
style={
|
|
"background-color": rx.cond(
|
|
is_actived, "var(--prismui-background-color)", "transparent"
|
|
),
|
|
"box-shadow": rx.cond(is_actived, "0 4px 12px #0000001a", "none"),
|
|
},
|
|
),
|
|
# 渲染标签
|
|
rx.text(
|
|
buttons[button]["text"],
|
|
color="var(--prismui-color-text)",
|
|
font_size="var(--prismui-font-size-sm)",
|
|
line_height="20px",
|
|
),
|
|
display="flex",
|
|
flex_direction="column",
|
|
align_items="center",
|
|
gap="4px",
|
|
cursor="pointer",
|
|
# 点击事件：将指定图标导航按钮设置为侧边栏中激活的图标导航按钮
|
|
on_click=SidebarState.switch_activated_button(button),
|
|
)
|
|
|
|
return rx.vstack(
|
|
rx.vstack(
|
|
rx.vstack(
|
|
# 品牌图标
|
|
rx.image(
|
|
src="/logo.png",
|
|
width="34px",
|
|
height="34px",
|
|
object_fit="contain",
|
|
),
|
|
# 品牌名称
|
|
rx.text(
|
|
"棱镜球",
|
|
line_height="20px",
|
|
font_size="11px",
|
|
font_weight="700",
|
|
color="var(--prismui-color-text)",
|
|
),
|
|
display="flex",
|
|
flex_direction="column",
|
|
justify_content="center",
|
|
align_items="center",
|
|
gap="4px",
|
|
),
|
|
# 渲染分隔线
|
|
rx.divider(
|
|
width="32px",
|
|
height="1px",
|
|
margin="16px 0",
|
|
background_color="var(--prismui-background-color-weak)",
|
|
),
|
|
# 渲染侧边栏中会话图标导航按钮
|
|
button("conversation"),
|
|
# 渲染侧边栏中知识库图标导航按钮
|
|
button("library"),
|
|
display="flex",
|
|
flex_direction="column",
|
|
align_items="center",
|
|
width="100%",
|
|
margin_top="12px",
|
|
),
|
|
display="flex",
|
|
flex_direction="column",
|
|
justify_content="space-between",
|
|
align_items="center",
|
|
width="60px",
|
|
height="100%",
|
|
box_sizing="border-box",
|
|
)
|