This commit is contained in:
parent
51fd0a18ea
commit
4c630c1f79
|
|
@ -5,6 +5,21 @@
|
||||||
import reflex as rx
|
import reflex as rx
|
||||||
from application.pages.index import render_index_page
|
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="/")
|
app.add_page(component=render_index_page, route="/")
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" fill="none">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="paint_linear_0" x1="20.4101181" x2="13.4623451" y1="22.4444809" y2="9.22279358" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="rgb(195.886,115.909,255)" offset="0" stop-opacity="1" />
|
||||||
|
<stop stop-color="rgb(120.545,222.545,255)" offset="0.91785866" stop-opacity="1" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="paint_linear_1" x1="21.1874924" x2="19.1952991" y1="7.64146042" y2="4.28173828" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="rgb(195.886,115.909,255)" offset="0" stop-opacity="1" />
|
||||||
|
<stop stop-color="rgb(120.545,222.545,255)" offset="0.91785866" stop-opacity="1" />
|
||||||
|
</linearGradient>
|
||||||
|
<linearGradient id="paint_linear_2" x1="16.3122597" x2="5.95285082" y1="20.5696716" y2="3.09911919" gradientUnits="userSpaceOnUse">
|
||||||
|
<stop stop-color="rgb(195.886,115.909,255)" offset="0" stop-opacity="1" />
|
||||||
|
<stop stop-color="rgb(120.545,222.545,255)" offset="0.91785866" stop-opacity="1" />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<rect id="对话" width="24" height="24" x="0" y="0" />
|
||||||
|
<g id="组合 2745">
|
||||||
|
<path id="矢量 652" d="M11.1465 19.6708C12.2203 20.4478 13.5424 20.9059 14.9688 20.9059C15.8547 20.9059 16.699 20.7296 17.469 20.4101C18.2668 20.0796 20.9063 20.3121 20.9063 20.3121C20.9063 20.3121 20.6743 17.6733 21.006 16.8749C21.3237 16.1048 21.5 15.26 21.5 14.3746C21.5 12.2814 20.5166 10.4178 18.9835 9.22279C19.0763 9.73827 19.125 10.27 19.125 10.8121C19.125 15.4177 15.6298 19.207 11.1465 19.6708Z" fill="url(#paint_linear_0)" fill-rule="evenodd" />
|
||||||
|
<path id="路径 33备份" d="M20.0156 4.28174L19.6034 5.34381L18.5313 5.77253L19.6034 6.18613L20.0156 7.25049L20.4007 6.18613L21.5 5.77253L20.4007 5.34381L20.0156 4.28174Z" fill="url(#paint_linear_1)" fill-rule="evenodd" />
|
||||||
|
<path id="减去顶层" d="M17.9373 10.8179C17.9373 6.55492 14.4815 3.09912 10.2186 3.09912C5.95562 3.09912 2.49981 6.55492 2.49981 10.8179C2.49981 11.8645 2.70811 12.8624 3.0855 13.7725C3.47671 14.7159 3.20152 17.8349 3.20152 17.8349C3.20152 17.8349 6.32055 17.5597 7.26394 17.9509C8.17404 18.3283 9.17198 18.5366 10.2186 18.5366C14.4815 18.5366 17.9373 15.0808 17.9373 10.8179ZM8.80933 8.78985C9.43966 8.78985 9.95063 9.30087 9.95063 9.93115C9.95063 10.5614 9.43966 11.0725 8.80933 11.0725C8.179 11.0725 7.66803 10.5614 7.66803 9.93115C7.66803 9.30087 8.179 8.78985 8.80933 8.78985ZM13.5267 8.78985C14.1571 8.78985 14.668 9.30087 14.668 9.93115C14.668 10.5614 14.1571 11.0725 13.5267 11.0725C12.8964 11.0725 12.3854 10.5614 12.3854 9.93115C12.3854 9.30087 12.8964 8.78985 13.5267 8.78985Z" fill="url(#paint_linear_2)" fill-rule="evenodd" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.7 KiB |
|
|
@ -9,16 +9,16 @@ from application.state.frame import FrameState
|
||||||
|
|
||||||
# 初始化侧边栏图标导航按钮字典
|
# 初始化侧边栏图标导航按钮字典
|
||||||
sidebar_icon_nav_buttons = {
|
sidebar_icon_nav_buttons = {
|
||||||
"conversation": {"icon": "message-circle-more", "text": "对话"},
|
"conversation": {"src": "/assets/conversation.svg", "text": "对话"},
|
||||||
"knowledge_base": {"icon": "book-open", "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
|
渲染品牌 Logo
|
||||||
:param width: 宽度，默认为 24px
|
:param width: 宽度，默认为 34px
|
||||||
:param height: 高度，默认为 24px
|
:param height: 高度，默认为 34px
|
||||||
"""
|
"""
|
||||||
return rx.image(
|
return rx.image(
|
||||||
src="/assets/logo.png",
|
src="/assets/logo.png",
|
||||||
|
|
@ -36,7 +36,7 @@ def render_sidebar_icon_nav_button(
|
||||||
:param 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"]
|
text = sidebar_icon_nav_buttons[sidebar_icon_nav_button]["text"]
|
||||||
|
|
||||||
|
|
@ -63,7 +63,17 @@ def render_sidebar_icon_nav_button(
|
||||||
# 高亮渲染
|
# 高亮渲染
|
||||||
rx.button(
|
rx.button(
|
||||||
rx.vstack(
|
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"),
|
rx.text(text, size="8"),
|
||||||
spacing="2",
|
spacing="2",
|
||||||
align_items="center",
|
align_items="center",
|
||||||
|
|
@ -81,41 +91,46 @@ def render_sidebar() -> rx.Component:
|
||||||
"""
|
"""
|
||||||
渲染侧边栏
|
渲染侧边栏
|
||||||
"""
|
"""
|
||||||
return rx.box(
|
return rx.vstack(
|
||||||
|
# 渲染顶部
|
||||||
rx.vstack(
|
rx.vstack(
|
||||||
# 顶部
|
# 渲染品牌 LOGO 和名称
|
||||||
rx.vstack(
|
|
||||||
# 品牌LOGO和名称
|
|
||||||
rx.vstack(
|
rx.vstack(
|
||||||
# 渲染品牌 Logo
|
# 渲染品牌 Logo
|
||||||
render_brand_logo(),
|
render_brand_logo(),
|
||||||
|
# 渲染品牌名称
|
||||||
rx.text(
|
rx.text(
|
||||||
"MarsHelper",
|
"MateAgent",
|
||||||
font_size="18px",
|
line_height="20px", # 行高
|
||||||
weight="bold",
|
font_size="11px",
|
||||||
color=rx.color("mauve", 12),
|
font_weight="700",
|
||||||
|
color="var(--devui-base-text-dark)",
|
||||||
),
|
),
|
||||||
spacing="4",
|
display="flex", # 弹性布局
|
||||||
margin_bottom="16px",
|
flex_direction="column", # 垂直方向布局
|
||||||
|
justify_content="center", # 水平居中对齐
|
||||||
|
align_items="center", # 水平居中对齐
|
||||||
|
gap="4px",
|
||||||
|
),
|
||||||
|
# 渲染分隔线
|
||||||
|
rx.divider(
|
||||||
|
width="32px", height="1px", margin="16px 0", background_color="#babbc0"
|
||||||
),
|
),
|
||||||
# 分隔线
|
|
||||||
rx.divider(color=rx.color("mauve", 3), margin_bottom="16px"),
|
|
||||||
# 渲染侧边栏图标导航按钮：对话
|
# 渲染侧边栏图标导航按钮：对话
|
||||||
render_sidebar_icon_nav_button("conversation"),
|
render_sidebar_icon_nav_button(sidebar_icon_nav_button="conversation"),
|
||||||
# 渲染侧边栏图标导航按钮：知识库
|
# 渲染侧边栏图标导航按钮：知识库
|
||||||
render_sidebar_icon_nav_button("knowledge_base"),
|
render_sidebar_icon_nav_button(sidebar_icon_nav_button="knowledge_base"),
|
||||||
spacing="6", # 垂直间距
|
margin_top="12px", # 上外边距
|
||||||
|
display="flex", # 弹性布局
|
||||||
|
flex_direction="column", # 垂直方向布局
|
||||||
|
align_items="center", # 水平居中对齐
|
||||||
|
width="100%", # 宽度为父容器宽度
|
||||||
),
|
),
|
||||||
width="80px",
|
display="flex", # 弹性布局
|
||||||
height="100vh",
|
flex_direction="column", # 垂直方向布局
|
||||||
padding_y="20px", # 水平内边距
|
justify_content="space-between", # 间距分布
|
||||||
padding_x="8px", # 垂直内边距
|
align_items="center", # 水平居中对齐
|
||||||
align_items="stretch",
|
width="60px", # 宽度
|
||||||
justify_content="space-between",
|
height="100%", # 高度为父容器高度
|
||||||
),
|
box_sizing="border-box", # 盒模型
|
||||||
width="80px",
|
|
||||||
min_width="80px",
|
|
||||||
background="transparent", # 透明背景
|
|
||||||
position="sticky", # 粘性定位
|
|
||||||
top=0, # 页面滚动时侧边栏固定于顶部
|
|
||||||
)
|
)
|
||||||
|
|
|
||||||
|
|
@ -26,11 +26,10 @@ def render_index_page() -> rx.Component:
|
||||||
# 渲染知识库页面
|
# 渲染知识库页面
|
||||||
("knowledge_base", render_knowledge_base_page()),
|
("knowledge_base", render_knowledge_base_page()),
|
||||||
),
|
),
|
||||||
width="100vw", # 铺满可视窗口
|
width="100%",
|
||||||
height="100vh",
|
height="100vh", # 垂直高度为可视窗口高度
|
||||||
spacing="0", # 水平方向间距
|
padding="8px 8px 8px 0", # 内边距
|
||||||
align_items="stretch", # 垂直方向拉伸至父元素高度
|
overflow="auto", # 垂直方向拉伸至父元素高度
|
||||||
style={
|
box_sizing="border-box", # 盒模型
|
||||||
"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%)"
|
background="var(--mc-global-bg)", # 背景颜色
|
||||||
}, # 背景渐变
|
|
||||||
)
|
)
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue