126 lines
3.8 KiB
Python
126 lines
3.8 KiB
Python
|
"""
|
|||
|
|
AI Agent 前端主入口
|
|||
|
|
采用模块化架构，仅负责组装各组件
|
|||
|
|
"""
|
|||
|
|
|
|||
|
|
import sys
|
|||
|
|
import os
|
|||
|
|
|
|||
|
|
# 添加项目根目录到 Python 路径，支持绝对导入
|
|||
|
|
sys.path.insert(0, os.path.dirname(os.path.dirname(os.path.abspath(__file__))))
|
|||
|
|
|
|||
|
|
import streamlit as st
|
|||
|
|
|
|||
|
|
# 使用绝对导入
|
|||
|
|
from frontend.config import config
|
|||
|
|
from frontend.state import AppState
|
|||
|
|
from frontend.components.sidebar import render_sidebar
|
|||
|
|
from frontend.components.chat_area import render_chat_area
|
|||
|
|
from frontend.components.info_panel import render_info_panel
|
|||
|
|
|
|||
|
|
|
|||
|
|
# =============================================================================
|
|||
|
|
# 页面配置
|
|||
|
|
# =============================================================================
|
|||
|
|
st.set_page_config(
|
|||
|
|
page_title=config.page_title,
|
|||
|
|
page_icon=config.page_icon,
|
|||
|
|
layout=config.layout
|
|||
|
|
)
|
|||
|
|
|
|||
|
|
|
|||
|
|
# =============================================================================
|
|||
|
|
# 初始化状态
|
|||
|
|
# =============================================================================
|
|||
|
|
AppState.init()
|
|||
|
|
|
|||
|
|
def apply_custom_css():
|
|||
|
|
"""应用自定义CSS样式，实现极简风格"""
|
|||
|
|
st.markdown("""
|
|||
|
|
<style>
|
|||
|
|
/* 移除顶部默认空白 */
|
|||
|
|
.block-container {
|
|||
|
|
padding-top: 2rem !important;
|
|||
|
|
padding-bottom: 2rem !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 侧边栏样式优化：降低背景色对比度，稍微暗一点提高区分度 */
|
|||
|
|
[data-testid="stSidebar"] {
|
|||
|
|
background-color: #f0f2f5 !important;
|
|||
|
|
border-right: 1px solid #e1e4e8;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 隐藏标题和头像边框的粗重线条 */
|
|||
|
|
hr {
|
|||
|
|
margin: 1em 0;
|
|||
|
|
border-color: #eee;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 自定义按钮样式：去除强烈的背景色，使用浅色线框或扁平风 */
|
|||
|
|
.stButton>button {
|
|||
|
|
border-radius: 8px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 覆盖 Primary 按钮默认的刺眼大红色，改为柔和的深色高亮 */
|
|||
|
|
.stButton>button[kind="primary"] {
|
|||
|
|
background-color: #e5e7eb !important;
|
|||
|
|
color: #1f2937 !important;
|
|||
|
|
border: 1px solid #d1d5db !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 覆盖 Primary 按钮悬停效果 */
|
|||
|
|
.stButton>button[kind="primary"]:hover {
|
|||
|
|
background-color: #d1d5db !important;
|
|||
|
|
border-color: #9ca3af !important;
|
|||
|
|
color: #111827 !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 普通按钮悬停效果 */
|
|||
|
|
.stButton>button:hover {
|
|||
|
|
border-color: #9ca3af;
|
|||
|
|
color: #1f2937;
|
|||
|
|
background-color: #f9fafb;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 聊天输入框美化 */
|
|||
|
|
[data-testid="stChatInput"] {
|
|||
|
|
border-radius: 12px;
|
|||
|
|
border: 1px solid #e0e0e0;
|
|||
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.03);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 用户和 AI 的头像调整 */
|
|||
|
|
.stChatMessage {
|
|||
|
|
padding: 1rem 0;
|
|||
|
|
border-bottom: 1px solid #f8f8f8;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
""", unsafe_allow_html=True)
|
|||
|
|
|
|||
|
|
|
|||
|
|
# =============================================================================
|
|||
|
|
# 主界面
|
|||
|
|
# =============================================================================
|
|||
|
|
def main():
|
|||
|
|
"""主界面渲染 - 极简宽屏布局"""
|
|||
|
|
# 应用 CSS
|
|||
|
|
apply_custom_css()
|
|||
|
|
|
|||
|
|
# 顶部标题（可选，也可以不放，让界面更像对话框）
|
|||
|
|
st.markdown("<h3 style='text-align: center; font-weight: 400; color: #555; margin-bottom: 2rem;'>个人助手</h3>", unsafe_allow_html=True)
|
|||
|
|
|
|||
|
|
# 左侧边栏：合并用户登录、模型选择和历史对话
|
|||
|
|
with st.sidebar:
|
|||
|
|
render_sidebar()
|
|||
|
|
# 将原本右侧的信息面板简化并移入侧边栏底部
|
|||
|
|
st.divider()
|
|||
|
|
render_info_panel()
|
|||
|
|
|
|||
|
|
# 中间主区域：全宽的聊天区域
|
|||
|
|
render_chat_area()
|
|||
|
|
|
|||
|
|
|
|||
|
|
if __name__ == "__main__":
|
|||
|
|
main()
|