Spaces:
Running
Running
File size: 1,608 Bytes
4abc17c 6b71d3d 4abc17c c98862f 6b71d3d 1a2b0fa c98862f a3b49e8 6b71d3d a3b49e8 c98862f 6b71d3d c98862f 4abc17c 1a2b0fa a3b49e8 1a2b0fa a3b49e8 6b71d3d 1a2b0fa |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
"""
LifeFlow AI - Header Component (Optimized)
✅ 修復佈局問題，使用 Row/Column 避免 fixed positioning
✅ 響應式友好設計
"""
import gradio as gr
def create_header():
"""
創建優化後的 Header：
- Logo 保留
- 按鈕改為垂直排列 (使用 gr.Column)
"""
# 1. Header 容器 (只放 Logo)
with gr.Row(elem_classes="app-header-container"):
with gr.Column(scale=1):
gr.HTML("""
<div class="app-header-left">
<h1 style="margin: 0; font-size: 2rem; font-weight: 800;
background: linear-gradient(to right, #6366f1, #ec4899);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;">
✨ LifeFlow AI
</h1>
<p style="margin: 5px 0 0 0; color: #64748b; font-size: 0.95rem;">
Intelligent Trip Planner
</p>
</div>
""")
# 2. 功能按鈕 (垂直懸浮)
# 🔥 修改：改用 gr.Column 讓它在結構上就是垂直的
with gr.Column(elem_classes="header-controls"):
home_btn = gr.Button("🏠", size="sm", elem_classes="header-btn")
# theme_btn = gr.Button("🌓", size="sm", elem_classes="header-btn") # 如果不需要可註解
settings_btn = gr.Button("⚙️", size="sm", elem_classes="header-btn")
doc_btn = gr.Button("📖", size="sm", elem_classes="header-btn")
# 注意 return 的數量要跟上面定義的一致
return home_btn, settings_btn, doc_btn #, theme_btn |