458 lines
16 KiB
Python
458 lines
16 KiB
Python
# -*- coding: utf-8 -*-
|
||
"""
|
||
首页
|
||
"""
|
||
import reflex as rx
|
||
|
||
from application.pages import conversation, knowledge_base
|
||
from application.states import AuthState
|
||
|
||
|
||
# 导航按钮字典
|
||
nav_buttons: dict = {
|
||
"conversation": {"src": "/conversation.svg", "text": "会话"},
|
||
"knowledge_base": {"src": "/knowledge_base.svg", "text": "知识库"},
|
||
}
|
||
|
||
"""
|
||
约定：
|
||
1 若组件仅用于当前页面则无需抽象为通用组件(application.components.*)
|
||
"""
|
||
|
||
|
||
def nav_button(
|
||
nav_button: str,
|
||
) -> rx.Component:
|
||
"""
|
||
导航按钮
|
||
:param nav_button: 指定的导航按钮
|
||
:return : Component
|
||
"""
|
||
# 导航按钮激活状态
|
||
is_actived = nav_button == AuthState.activated_nav_button
|
||
|
||
return rx.vstack(
|
||
# 图标
|
||
rx.image(
|
||
nav_buttons[nav_button]["src"],
|
||
width="36px",
|
||
height="36px",
|
||
object_fit="contain",
|
||
padding="6px",
|
||
background_color=rx.cond(
|
||
is_actived,
|
||
"var(--prismui-background-color-1)",
|
||
"transparent",
|
||
),
|
||
border_radius="var(--prismui-border-radius-3)",
|
||
box_shadow=rx.cond(is_actived, "var(--prismui-box-shadow-2)", "none"),
|
||
),
|
||
# 标签
|
||
rx.text(
|
||
nav_buttons[nav_button]["text"],
|
||
line_height="20px",
|
||
font_size="var(--prismui-font-size-1)",
|
||
color="var(--prismui-color-1)",
|
||
),
|
||
align_items="center",
|
||
gap="4px",
|
||
cursor="pointer",
|
||
# 点击事件：将指定导航按钮设置为激活的导航按钮
|
||
on_click=AuthState.switch_activated_nav_button(nav_button),
|
||
)
|
||
|
||
|
||
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: Component
|
||
"""
|
||
|
||
return rx.vstack(
|
||
rx.vstack(
|
||
rx.vstack(
|
||
# 品牌图标
|
||
rx.image(
|
||
src="/logo.png",
|
||
width="32px",
|
||
height="32px",
|
||
object_fit="contain",
|
||
),
|
||
# 品牌名称
|
||
rx.text(
|
||
"棱镜球",
|
||
line_height="20px",
|
||
font_size="calc(var(--prismui-font-size-1) - 1px)", # 较导航按钮标签弱化
|
||
font_weight="var(--prismui-font-weight-2)",
|
||
),
|
||
align_items="center",
|
||
gap="4px",
|
||
),
|
||
# 分隔线
|
||
rx.divider(
|
||
width="32px",
|
||
height="1px",
|
||
margin="16px 0",
|
||
background_color="var(--prismui-background-color-4)",
|
||
),
|
||
rx.vstack(
|
||
# 会话导航按钮
|
||
nav_button("conversation"),
|
||
# 知识库导航按钮
|
||
nav_button("knowledge_base"),
|
||
gap="8px",
|
||
),
|
||
align_items="center",
|
||
width="100%",
|
||
margin_top="12px",
|
||
),
|
||
rx.vstack(
|
||
rx.vstack(
|
||
# 设置按钮
|
||
settings_button(),
|
||
),
|
||
padding_bottom="16px",
|
||
gap="8px",
|
||
),
|
||
flex_shrink="0",
|
||
justify_content="space-between",
|
||
align_items="center",
|
||
width="60px",
|
||
min_width="60px",
|
||
max_width="60px",
|
||
height="100%",
|
||
)
|
||
|
||
|
||
def login_popup() -> rx.Component:
|
||
"""
|
||
登录弹窗
|
||
:return: Component
|
||
"""
|
||
|
||
return rx.center(
|
||
rx.hstack(
|
||
rx.vstack(
|
||
# 标题
|
||
rx.text(
|
||
"登录解锁更多功能",
|
||
margin_bottom="24px",
|
||
line_height="32px",
|
||
font_size="var(--prismui-font-size-5)",
|
||
font_weight="var(--prismui-font-weight-3)",
|
||
),
|
||
# 邮箱输入框
|
||
rx.input(
|
||
placeholder="请输入邮箱",
|
||
# 值绑定邮箱
|
||
value=AuthState.email,
|
||
# 值变化事件：设置邮箱
|
||
on_change=AuthState.set_email,
|
||
# 获取焦点事件：重置登录错误信息
|
||
on_focus=AuthState.reset_login_error_message,
|
||
width="100%",
|
||
height="45px",
|
||
padding="4px",
|
||
margin_bottom="24px",
|
||
border_radius="var(--prismui-border-radius-4)",
|
||
line_height="16px",
|
||
),
|
||
# 验证码输入框
|
||
rx.hstack(
|
||
rx.input(
|
||
placeholder="请输入验证码",
|
||
# 值绑定验证码
|
||
value=AuthState.captcha,
|
||
max_length=6,
|
||
# 值变化事件：设置验证码
|
||
on_change=AuthState.set_captcha,
|
||
# 获取焦点事件：重置登录错误信息
|
||
on_focus=AuthState.reset_login_error_message,
|
||
flex=1,
|
||
height="100%",
|
||
padding="4px",
|
||
border_radius="var(--prismui-border-radius-4)",
|
||
line_height="16px",
|
||
border="none !important",
|
||
),
|
||
rx.button(
|
||
# 若再次发送验证码倒计时大于0则显示倒计时，否则显示获取验证码
|
||
rx.cond(
|
||
AuthState.resend_captcha_countdown > 0,
|
||
f"{AuthState.resend_captcha_countdown} s",
|
||
"获取验证码",
|
||
),
|
||
# 点击事件：发送验证码
|
||
on_click=AuthState.send_captcha,
|
||
# 是否禁用绑定验证码发送禁用状态
|
||
disabled=AuthState.is_captcha_sending_disabled,
|
||
margin="0 8px",
|
||
background_color="var(--prismui-background-color-1)",
|
||
line_height="16px",
|
||
# 若验证码发送禁用状态为是则颜色设置为 color-4，否则设置为 color-5（主题色）
|
||
color=rx.cond(
|
||
AuthState.is_captcha_sending_disabled,
|
||
"var(--prismui-color-4)",
|
||
"var(--prismui-color-5)",
|
||
),
|
||
cursor=rx.cond(
|
||
AuthState.is_captcha_sending_disabled,
|
||
"not-allowed",
|
||
"pointer",
|
||
),
|
||
),
|
||
width="100%",
|
||
height="45px",
|
||
align_items="center",
|
||
border="var(--prismui-border-1)",
|
||
border_radius="var(--prismui-border-radius-4)",
|
||
),
|
||
rx.text(
|
||
AuthState.login_error_message,
|
||
width="100%",
|
||
min_height="20px",
|
||
text_align="left",
|
||
line_height="20px",
|
||
font_size="var(--prismui-font-size-1)",
|
||
color="var(--prismui-color-6)",
|
||
),
|
||
rx.box(
|
||
rx.cond(
|
||
AuthState.is_captcha_sent,
|
||
rx.hstack(
|
||
rx.icon(
|
||
"circle-check",
|
||
width="12px",
|
||
height="12px",
|
||
color="var(--prismui-color-2)",
|
||
),
|
||
rx.text(
|
||
"验证码已发送，请耐心等待",
|
||
line_height="14px",
|
||
font_size="var(--prismui-font-size-1)",
|
||
color="var(--prismui-color-2)",
|
||
),
|
||
margin="0 0 10px 0",
|
||
gap="4px",
|
||
),
|
||
),
|
||
display="flex",
|
||
align_items="center",
|
||
min_height="34px",
|
||
),
|
||
rx.hstack(
|
||
rx.checkbox(
|
||
checked=AuthState.is_policies_agreed,
|
||
# 值变化事件：切换协议同意状态
|
||
on_change=AuthState.toggle_policies_agreed,
|
||
cursor="pointer",
|
||
style={
|
||
"&::before": {
|
||
"width": "12px !important",
|
||
"height": "12px !important",
|
||
},
|
||
"& svg": {
|
||
"width": "8px !important",
|
||
"height": "8px !important",
|
||
},
|
||
"&[data-state='checked']::before": {
|
||
"background-color": "var(--prismui-color-5) !important",
|
||
},
|
||
},
|
||
),
|
||
rx.text(
|
||
"我已阅读并同意",
|
||
color="var(--prismui-color-2)",
|
||
line_height="14px",
|
||
),
|
||
rx.link(
|
||
"用户协议、隐私政策",
|
||
href="#",
|
||
line_height="14px",
|
||
color="var(--prismui-color-5)",
|
||
cursor="pointer",
|
||
),
|
||
margin_bottom="10px",
|
||
align_items="center",
|
||
gap="4px",
|
||
font_size="var(--prismui-font-size-1)",
|
||
),
|
||
rx.button(
|
||
"登录",
|
||
width="100%",
|
||
height="38px",
|
||
border_radius="var(--prismui-border-radius-4)",
|
||
background_color="var(--prismui-color-5)",
|
||
color="var(--prismui-color-9)",
|
||
cursor="pointer",
|
||
on_click=AuthState.login,
|
||
loading=AuthState.is_logging_in,
|
||
),
|
||
rx.text(
|
||
"登录遇到问题？加他微信去吐槽",
|
||
margin="20px 0 40px 0",
|
||
line_height="14px",
|
||
font_size="12px",
|
||
color="var(--prismui-color-2)",
|
||
),
|
||
width="396px",
|
||
height="100%",
|
||
padding="40px 48px 0 48px",
|
||
align_items="center",
|
||
),
|
||
rx.vstack(
|
||
rx.image(
|
||
src="/qrcode.png",
|
||
width="208px",
|
||
height="208px",
|
||
padding="20px",
|
||
background_color="var(--prismui-background-color-1)",
|
||
border="var(--prismui-border-2)",
|
||
border_radius="var(--prismui-border-radius-6)",
|
||
),
|
||
rx.text(
|
||
"加微信好友",
|
||
margin="10px 0 12px 0",
|
||
line_height="32px",
|
||
font_size="var(--prismui-font-size-2)",
|
||
font_weight="var(--prismui-font-weight-2)",
|
||
),
|
||
align_items="center",
|
||
justify_content="center",
|
||
width="396px",
|
||
height="100%",
|
||
padding="72px 32px",
|
||
),
|
||
background="var(--prismui-background-2)",
|
||
border="1px solid #2222220f",
|
||
border_radius="var(--prismui-border-radius-6)",
|
||
box_shadow="0 4px 64px 0 #0000001a",
|
||
overflow="hidden",
|
||
),
|
||
position="absolute",
|
||
top="0",
|
||
left="0",
|
||
z_index="9999",
|
||
width="100vw",
|
||
height="100vh",
|
||
backdrop_filter="blur(4px)",
|
||
)
|
||
|
||
|
||
def index() -> rx.Component:
|
||
"""
|
||
首页（默认显示会话页面）
|
||
"""
|
||
|
||
return rx.fragment(
|
||
rx.hstack(
|
||
# 侧边栏
|
||
sidebar(),
|
||
# 根据侧边栏状态中激活的导航按钮相应页面（本项目采用卡片布局）
|
||
rx.match(
|
||
AuthState.activated_nav_button,
|
||
# 知识库页面
|
||
("knowledge_base", knowledge_base()),
|
||
# 会话页面
|
||
conversation(),
|
||
),
|
||
width="100%",
|
||
height="100vh",
|
||
overflow="auto",
|
||
padding="8px 8px 8px 0",
|
||
background="var(--prismui-background-1)",
|
||
),
|
||
# 若用户唯一标识为空则登录窗
|
||
rx.cond(
|
||
AuthState.user_id,
|
||
rx.fragment(),
|
||
login_popup(),
|
||
),
|
||
)
|