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()
|