style: 优化笔记整理器的UI样式和响应式设计

添加自定义CSS样式改善整体视觉效果，包括：
- 全局布局和间距调整
- 卡片、按钮和输入框的交互效果
- 标签和关键词的渐变样式
- 响应式设计适配移动设备

README.md

@@ -21,6 +21,9 @@
 ## 四、开发心得
 
 在开发这个学习笔记整理器的过程中，我们深刻体会到了技术与需求之间的平衡。这个项目的目的是为了帮助学生更好地管理和查询学习笔记，让学习变得更加高效有序。我们面向的主要是在校学生，他们需要记录大量的学习内容，我们希望能提供给他们一个有效的整理和检索工具。项目功能包括笔记的创建、编辑、删除、分类管理、标签系统、智能搜索、内容提炼以及导入导出等核心功能，力求为学生们提供一个简单易用的笔记管理平台。
+
 最初我们考虑使用Chainlit框架，因为它在AI交互方面表现突出，但在实际开发过程中发现，虽然Chainlit在对话式交互上有优势，但在笔记管理功能上显得不够完善，而且智能搜索的效果也没有达到预期。为了让搜索更加智能，我们尝试了各种prompt设计，包括语义搜索的prompt，要求AI根据用户查询理解意图而非简单关键词匹配；概括提取的prompt，让AI对搜索结果进行智能总结和关键点提取；意图识别的prompt，用于判断用户是想创建、编辑还是删除笔记；删除意图的prompt，区分删除单个笔记、删除所有笔记还是删除某个分类的笔记；以及笔记识别的prompt，让AI从多个笔记中找到用户指定的目标。这些prompt设计经过多次调整，包括改变temperature参数、调整max_tokens长度、优化system prompt的表述方式，但效果始终不尽如人意，AI经常误解用户意图或返回不相关的内容。
+
 最终我们意识到单纯依赖AI并不能解决所有问题，于是转向了更传统但更可靠的解决方案。在搜索功能上，我们结合了关键词匹配和简单的语义分析，虽然不如纯AI搜索那么智能，但准确性和稳定性大大提升。在笔记管理方面，我们采用了传统的CRUD操作配合Streamlit的交互组件，让用户能够通过直观的界面进行操作，而不是完全依赖自然语言交互。这种混合模式既保留了AI的辅助功能，又确保了核心功能的可靠性。经过反复比较和测试，最终选择了Streamlit框架，它在界面设计和功能实现上更加成熟，能够更好地满足我们的需求。
+
 这次开发经历让我们对自己的技术能力有了更清晰的认识。如果没有AI的辅助，我们可能根本无法独立完成这样一个项目，我们在编程基础、框架使用、算法设计等方面都存在很多不足。这次经历既让我们看到了AI工具的强大，也让我们明白了自己需要学习的地方还有很多，未来还需要更加努力地提升自己的技术能力。

note_organizer.py

@@ -7,6 +7,148 @@ from collections import Counter
 
 # 1. 页面配置
 st.set_page_config(page_title="学习笔记整理器", page_icon="📚", layout="wide")
+
+# 添加自定义CSS样式
+st.markdown("""
+<style>
+    /* 全局样式优化 */
+    .main {
+        padding-top: 2rem;
+    }
+    
+    /* 标题样式 */
+    h1 {
+        color: #1a1a1a;
+        font-weight: 700;
+        margin-bottom: 1.5rem;
+    }
+    
+    /* 侧边栏样式 */
+    [data-testid="stSidebar"] {
+        background-color: #f8f9fa;
+        border-right: 2px solid #e9ecef;
+    }
+    
+    /* 笔记卡片样式 */
+    .stExpander {
+        border: 1px solid #dee2e6;
+        border-radius: 8px;
+        margin-bottom: 1rem;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        transition: all 0.3s ease;
+    }
+    
+    .stExpander:hover {
+        box-shadow: 0 4px 8px rgba(0,0,0,0.15);
+    }
+    
+    /* 按钮样式优化 */
+    .stButton > button {
+        border-radius: 6px;
+        font-weight: 500;
+        transition: all 0.2s ease;
+    }
+    
+    .stButton > button:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+    }
+    
+    /* 输入框样式 */
+    .stTextInput > div > div > input,
+    .stTextArea > div > div > textarea,
+    .stSelectbox > div > div > select {
+        border-radius: 6px;
+        border: 1px solid #ced4da;
+        transition: border-color 0.2s ease;
+    }
+    
+    .stTextInput > div > div > input:focus,
+    .stTextArea > div > div > textarea:focus,
+    .stSelectbox > div > div > select:focus {
+        border-color: #007bff;
+        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
+    }
+    
+    /* 标签样式 */
+    .tag {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: white;
+        padding: 4px 12px;
+        border-radius: 20px;
+        font-size: 12px;
+        font-weight: 500;
+        margin: 3px;
+        display: inline-block;
+        box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
+    }
+    
+    /* 关键词标签样式 */
+    .keyword {
+        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
+        color: white;
+        padding: 4px 12px;
+        border-radius: 20px;
+        font-size: 12px;
+        font-weight: 500;
+        margin: 3px;
+        display: inline-block;
+        box-shadow: 0 2px 4px rgba(240, 147, 251, 0.3);
+    }
+    
+    /* 分隔线样式 */
+    hr {
+        border: none;
+        height: 2px;
+        background: linear-gradient(90deg, transparent, #007bff, transparent);
+        margin: 2rem 0;
+    }
+    
+    /* 统计卡片样式 */
+    [data-testid="stMetricValue"] {
+        font-size: 2rem;
+        font-weight: 700;
+        color: #007bff;
+    }
+    
+    /* 信息框样式 */
+    .stAlert {
+        border-radius: 8px;
+        border-left: 4px solid;
+    }
+    
+    /* 成功提示 */
+    .stAlert[role="alert"] {
+        background-color: #d4edda;
+        border-color: #28a745;
+    }
+    
+    /* 警告提示 */
+    .stAlert[role="alertwarning"] {
+        background-color: #fff3cd;
+        border-color: #ffc107;
+    }
+    
+    /* 错误提示 */
+    .stAlert[role="alerterror"] {
+        background-color: #f8d7da;
+        border-color: #dc3545;
+    }
+    
+    /* 响应式设计 */
+    @media (max-width: 768px) {
+        .main {
+            padding: 1rem;
+        }
+        
+        .stButton > button {
+            width: 100%;
+            margin: 5px 0;
+        }
+    }
+</style>
+""", unsafe_allow_html=True)
+
 st.title("📚 学习笔记整理器")
 
 # 文本提炼函数