diff --git a/智能体/application/application.py b/智能体/application/application.py index 87b194e..2e7967e 100644 --- a/智能体/application/application.py +++ b/智能体/application/application.py @@ -5,6 +5,21 @@ import reflex as rx from application.pages.index import render_index_page -app = rx.App() # 此处变量名需使用 app ，具体原因目前尚不清楚 +app = rx.App( + style={ + # 覆盖所有标签 + "*": { + "margin": "0", + "padding": "0", + "box_sizing": "border-box", + }, + # 覆盖伪元素 ::before 和 ::after + "*::before, *::after": { + "box_sizing": "border-box", + }, + "--mc-global-bg": "linear-gradient(to bottom, #D0C9FF 0%, #E6D6F0 8%, #F1DBEA 12%, #C8DCFB 40%, #ABC6F6 60%, #87AEFE 90%)", + "--devui-base-bg-dark": "#252b3a", + } # 自定义主题颜色 +) # 此处变量名需使用 app ，具体原因目前尚不清楚 # 注册首页路由 app.add_page(component=render_index_page, route="/") diff --git a/智能体/application/assets/conversation.svg b/智能体/application/assets/conversation.svg new file mode 100644 index 0000000..1277a20 --- /dev/null +++ b/智能体/application/assets/conversation.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/智能体/application/components/frame.py b/智能体/application/components/frame.py index b570c6f..a897c82 100644 --- a/智能体/application/components/frame.py +++ b/智能体/application/components/frame.py @@ -9,16 +9,16 @@ from application.state.frame import FrameState # 初始化侧边栏图标导航按钮字典 sidebar_icon_nav_buttons = { - "conversation": {"icon": "message-circle-more", "text": "对话"}, - "knowledge_base": {"icon": "book-open", "text": "知识库"}, + "conversation": {"src": "/assets/conversation.svg", "text": "对话"}, + "knowledge_base": {"src": "/assets/knowledge_base.svg", "text": "知识库"}, } -def render_brand_logo(width: str = "24px", height: str = "24px") -> rx.Component: +def render_brand_logo(width: str = "34px", height: str = "34px") -> rx.Component: """ 渲染品牌 Logo - :param width: 宽度，默认为 24px - :param height: 高度，默认为 24px + :param width: 宽度，默认为 34px + :param height: 高度，默认为 34px """ return rx.image( src="/assets/logo.png", @@ -36,7 +36,7 @@ def render_sidebar_icon_nav_button( :param sidebar_icon_nav_button: 侧边栏图标导航按钮 """ # 侧边栏图标导航按钮图标 - icon = sidebar_icon_nav_buttons[sidebar_icon_nav_button]["icon"] + src = sidebar_icon_nav_buttons[sidebar_icon_nav_button]["src"] # 侧边栏图标导航按钮标签 text = sidebar_icon_nav_buttons[sidebar_icon_nav_button]["text"] @@ -63,7 +63,17 @@ def render_sidebar_icon_nav_button( # 高亮渲染 rx.button( rx.vstack( - rx.icon(icon, size=18), + 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", @@ -81,41 +91,46 @@ def render_sidebar() -> rx.Component: """ 渲染侧边栏 """ - return rx.box( + return rx.vstack( + # 渲染顶部 rx.vstack( - # 顶部 + # 渲染品牌 LOGO 和名称 rx.vstack( - # 品牌LOGO和名称 - rx.vstack( - # 渲染品牌 Logo - render_brand_logo(), - rx.text( - "MarsHelper", - font_size="18px", - weight="bold", - color=rx.color("mauve", 12), - ), - spacing="4", - margin_bottom="16px", + # 渲染品牌 Logo + render_brand_logo(), + # 渲染品牌名称 + rx.text( + "MateAgent", + line_height="20px", # 行高 + font_size="11px", + font_weight="700", + color="var(--devui-base-text-dark)", ), - # 分隔线 - rx.divider(color=rx.color("mauve", 3), margin_bottom="16px"), - # 渲染侧边栏图标导航按钮：对话 - render_sidebar_icon_nav_button("conversation"), - # 渲染侧边栏图标导航按钮：知识库 - render_sidebar_icon_nav_button("knowledge_base"), - spacing="6", # 垂直间距 + display="flex", # 弹性布局 + flex_direction="column", # 垂直方向布局 + justify_content="center", # 水平居中对齐 + align_items="center", # 水平居中对齐 + gap="4px", ), - width="80px", - height="100vh", - padding_y="20px", # 水平内边距 - padding_x="8px", # 垂直内边距 - align_items="stretch", - justify_content="space-between", + # 渲染分隔线 + 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%", # 宽度为父容器宽度 ), - width="80px", - min_width="80px", - background="transparent", # 透明背景 - position="sticky", # 粘性定位 - top=0, # 页面滚动时侧边栏固定于顶部 + display="flex", # 弹性布局 + flex_direction="column", # 垂直方向布局 + justify_content="space-between", # 间距分布 + align_items="center", # 水平居中对齐 + width="60px", # 宽度 + height="100%", # 高度为父容器高度 + box_sizing="border-box", # 盒模型 ) diff --git a/智能体/application/pages/index.py b/智能体/application/pages/index.py index a63d4dc..4e37e16 100644 --- a/智能体/application/pages/index.py +++ b/智能体/application/pages/index.py @@ -26,11 +26,10 @@ def render_index_page() -> rx.Component: # 渲染知识库页面 ("knowledge_base", render_knowledge_base_page()), ), - width="100vw", # 铺满可视窗口 - height="100vh", - spacing="0", # 水平方向间距 - align_items="stretch", # 垂直方向拉伸至父元素高度 - style={ - "background": "linear-gradient(rgb(208, 201, 255) 0%, rgb(230, 214, 240) 8%, rgb(241, 219, 234) 12%, rgb(200, 220, 251) 40%, rgb(171, 198, 246) 60%, rgb(135, 174, 254) 90%)" - }, # 背景渐变 + width="100%", + height="100vh", # 垂直高度为可视窗口高度 + padding="8px 8px 8px 0", # 内边距 + overflow="auto", # 垂直方向拉伸至父元素高度 + box_sizing="border-box", # 盒模型 + background="var(--mc-global-bg)", # 背景颜色 )