326 lines
9.5 KiB
Python
326 lines
9.5 KiB
Python
# -*- coding: utf-8 -*-
|
|
"""
|
|
工作台
|
|
"""
|
|
import reflex as rx
|
|
|
|
from application.pages import task_page, knowledge_base_page, login_page
|
|
from application.states import AuthState, TaskState
|
|
from application.states.models import TaskHistoryItem
|
|
|
|
|
|
# 导航按钮字典
|
|
NAV_BUTTONS: dict = {
|
|
"create_task": {"src": "/create_task.svg", "text": "创建任务"},
|
|
}
|
|
|
|
"""
|
|
约定：
|
|
1 若组件仅用于当前页面则无需抽象为通用组件(application.components.*)
|
|
"""
|
|
|
|
|
|
def nav_button(
|
|
nav_button: str,
|
|
) -> rx.Component:
|
|
"""
|
|
导航按钮
|
|
:param nav_button: 导航按钮
|
|
:return : Component
|
|
"""
|
|
|
|
# 导航按钮选中状态
|
|
is_selected = nav_button == AuthState.selected_nav_button
|
|
|
|
return rx.hstack(
|
|
# 导航按钮的图标
|
|
rx.image(
|
|
NAV_BUTTONS[nav_button]["src"],
|
|
width="16px",
|
|
height="16px",
|
|
object_fit="contain", # 保持图标宽高比
|
|
),
|
|
# 导航按钮的文本
|
|
rx.text(
|
|
NAV_BUTTONS[nav_button]["text"],
|
|
line_height="20px",
|
|
font_size="var(--prismui-font-size-2)",
|
|
font_weight=rx.cond(
|
|
is_selected, "var(--prismui-font-weight-3)", None
|
|
), # 通过加粗字体区分是否选中
|
|
color="var(--prismui-color-1)",
|
|
),
|
|
align_items="center",
|
|
gap="8px",
|
|
width="100%",
|
|
padding="5px 12px",
|
|
background_color=rx.cond(
|
|
is_selected, "var(--prismui-background-color-2)", "transparent"
|
|
), # 通过背景颜色区分是否选中
|
|
border_radius="var(--prismui-border-radius-3)",
|
|
cursor="pointer",
|
|
# 点击事件：设置选中导航按钮
|
|
on_click=AuthState.set_selected_nav_button(nav_button),
|
|
)
|
|
|
|
|
|
def task_history_item(
|
|
item: TaskHistoryItem,
|
|
) -> rx.Component:
|
|
"""
|
|
任务历史项
|
|
:param item: 任务历史项
|
|
:return: Component
|
|
"""
|
|
|
|
# 高亮
|
|
is_highlight = (item.id == TaskState.popover_shown_task_history_item_id) | (
|
|
item.id == TaskState.task_id
|
|
)
|
|
|
|
return rx.list.item(
|
|
rx.hstack(
|
|
# 渲染任务正在运行图标
|
|
rx.cond(
|
|
item.is_running,
|
|
rx.icon(
|
|
"play", width="14px", height="14px", color="var(--prismui-color-2)"
|
|
),
|
|
rx.fragment(),
|
|
),
|
|
# 渲染任务描述
|
|
rx.text(
|
|
item.description,
|
|
flex=1,
|
|
line_height="20px",
|
|
color="var(--prismui-color-2)",
|
|
text_overflow="ellipsis",
|
|
white_space="nowrap",
|
|
overflow="hidden",
|
|
),
|
|
display="flex",
|
|
align_items="center",
|
|
width="100%",
|
|
padding="5px 0",
|
|
# 点击事件：将指定任务唯一标识设置为当前任务唯一标识
|
|
on_click=lambda: TaskState.set_task_id(item.id),
|
|
),
|
|
width="100%",
|
|
)
|
|
|
|
|
|
def task_history() -> rx.Component:
|
|
"""
|
|
任务历史
|
|
:return: rx.Component
|
|
"""
|
|
return rx.auto_scroll(
|
|
rx.list(
|
|
rx.foreach(
|
|
TaskState.task_history,
|
|
task_history_item,
|
|
),
|
|
display="flex",
|
|
flex_direction="column",
|
|
gap="2px",
|
|
width="100%",
|
|
style={
|
|
"&::-webkit-scrollbar": {
|
|
"display": "none",
|
|
},
|
|
},
|
|
overflow="auto",
|
|
),
|
|
width="100%",
|
|
)
|
|
|
|
|
|
def settings_button():
|
|
"""
|
|
设置按钮
|
|
:return: Component
|
|
"""
|
|
return rx.box(
|
|
rx.hover_card.root(
|
|
# 触发事件：点击自定义按钮
|
|
rx.hover_card.trigger(
|
|
rx.box(
|
|
rx.icon(
|
|
"settings",
|
|
stroke_width=1.5,
|
|
width="20px",
|
|
height="20px",
|
|
color="var(--prismui-color-1)",
|
|
),
|
|
display="flex",
|
|
flex_flow="column",
|
|
justify_content="center",
|
|
align_items="center",
|
|
width="36px",
|
|
height="36px",
|
|
border_radius="var(--prismui-border-radius-3)",
|
|
style={
|
|
"&:hover": {
|
|
"background": "var(--prismui-background-color-5)",
|
|
}, # 鼠标悬停背景颜色
|
|
},
|
|
cursor="pointer",
|
|
)
|
|
),
|
|
# 悬停卡片
|
|
rx.hover_card.content(
|
|
rx.box(
|
|
rx.box(
|
|
transform="translateX(-50%) rotate(45deg)",
|
|
position="absolute",
|
|
top="calc(50% - 4px)",
|
|
left="0",
|
|
width="8px",
|
|
height="8px",
|
|
background_color="var(--prismui-background-color-1)",
|
|
),
|
|
rx.box(
|
|
"退出登录",
|
|
display="flex",
|
|
justify_content="center",
|
|
align_items="center",
|
|
width="100%",
|
|
height="24px",
|
|
line_height="16px",
|
|
border_radius="var(--prismui-border-radius-1)",
|
|
style={
|
|
"_hover": {
|
|
"background_color": "var(--prismui-background-color-6)",
|
|
},
|
|
},
|
|
# 点击事件：退出登录
|
|
on_click=lambda: AuthState.logout(),
|
|
),
|
|
cursor="pointer",
|
|
),
|
|
side="left",
|
|
side_offset=8,
|
|
position="relative",
|
|
align="center",
|
|
padding="4px 12px",
|
|
border_radius="var(--prismui-border-radius-1)",
|
|
box_shadow="var(--prismui-box-shadow-3)",
|
|
font_family="var(--prismui-font-family)",
|
|
overflow="visible",
|
|
style={
|
|
"font-size": "var(--prismui-font-size-1) !important",
|
|
"color": "var(--prismui-color-1) !important",
|
|
},
|
|
),
|
|
open=AuthState.is_settings_hover_card_open,
|
|
# 悬停卡片打开状态变化事件：设置设置悬停卡片打开状态
|
|
on_open_change=AuthState.set_settings_hover_card_open,
|
|
),
|
|
min_width="14px",
|
|
cursor="pointer",
|
|
)
|
|
|
|
|
|
def sidebar() -> rx.Component:
|
|
"""
|
|
侧边栏
|
|
:return: rx.Component
|
|
"""
|
|
|
|
return rx.vstack(
|
|
rx.vstack(
|
|
# 渲染系统图标和名称
|
|
rx.hstack(
|
|
# 系统图标
|
|
rx.image(
|
|
src="/logo.png",
|
|
width="20px",
|
|
height="20px",
|
|
object_fit="contain",
|
|
),
|
|
# 系统名称
|
|
rx.text(
|
|
"棱镜球",
|
|
line_height="20px",
|
|
font_size="var(--prismui-font-size-2)",
|
|
font_weight="var(--prismui-font-weight-4)",
|
|
),
|
|
align_items="center",
|
|
gap="4px",
|
|
width="100%",
|
|
height="56px",
|
|
padding="0 12px 12px",
|
|
),
|
|
# 渲染导航按钮
|
|
rx.vstack(
|
|
# 渲染导航按钮：创建任务
|
|
nav_button("create_task"),
|
|
gap="2px",
|
|
width="100%",
|
|
padding_bottom="16px",
|
|
),
|
|
# 渲染最近任务
|
|
rx.vstack(
|
|
# 标题
|
|
rx.text(
|
|
"最近",
|
|
line_height="20px",
|
|
font_size="var(--prismui-font-size-2)",
|
|
padding="5px 10px 5px 22px",
|
|
),
|
|
# 历史任务
|
|
task_history(),
|
|
gap="2px",
|
|
width="100%",
|
|
padding="0 12px",
|
|
),
|
|
align_items="flex-start",
|
|
gap="2px",
|
|
width="100%",
|
|
),
|
|
rx.vstack(
|
|
rx.vstack(
|
|
# 设置按钮
|
|
settings_button(),
|
|
),
|
|
padding_bottom="16px",
|
|
gap="8px",
|
|
),
|
|
flex_shrink="0",
|
|
justify_content="space-between",
|
|
align_items="flex-start",
|
|
width="264px",
|
|
height="100%",
|
|
padding="0 12px",
|
|
background="var(--prismui-background-1)",
|
|
)
|
|
|
|
|
|
def workbench() -> rx.Component:
|
|
"""
|
|
工作台
|
|
"""
|
|
|
|
return rx.fragment(
|
|
# 若用户未登录则渲染登录页面
|
|
rx.cond(
|
|
AuthState.user_id,
|
|
rx.fragment(),
|
|
login_page(),
|
|
),
|
|
rx.hstack(
|
|
# 侧边栏
|
|
sidebar(),
|
|
# 根据选中的导航按钮渲染对应的页面
|
|
rx.match(
|
|
AuthState.selected_nav_button,
|
|
# 知识库页面
|
|
("knowledge_base", knowledge_base_page()),
|
|
# 任务页面
|
|
task_page(),
|
|
),
|
|
width="100%",
|
|
height="100vh",
|
|
),
|
|
)
|