bdhtc/yield-smart-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 整体 UI 主题改版为浅色自然风格，并优化文案与清理代码

Browse Source 
- 将页面主题从深色科技风改为浅色自然风（土壤棕/叶绿/麦穗黄配色）
  - 页面标题与文案统一为"种植决策助手"，提升可读性
  - 移除未使用的导入（pandas、plotly.express、make_subplots）
  - 更新作物颜色配置以适配新主题
  - 调整 Plotly 图表样式（背景、轴线、网格、标注线颜色）适配浅色模式
  - 新增 Streamlit 按钮的圆角与悬停样式覆盖
  - 删除多余的伪元素装饰代码，精简 CSS
This commit is contained in:
zhenghu
2026-04-14 11:24:08 +08:00
parent 1c97a065a7
commit 6af6a10636
1 changed files with 143 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

281
app.py
View File

@@ -5,14 +5,11 @@
import streamlit as st
import numpy as np
import pandas as pd
import plotly.graph_objects as go
import plotly.express as px
from plotly.subplots import make_subplots
# ─── Page Config ────────────────────────────────────────────────────────────
st.set_page_config(
page_title="农业智能决策系统",
page_title="种植决策助手",
page_icon="🌾",
layout="wide",
initial_sidebar_state="expanded",
@@ -22,166 +19,175 @@ st.set_page_config(
st.markdown("""
<style>
:root {
--bg-dark: #0a1628;
--bg-card: #0f2040;
--accent-green: #4ade80;
--accent-gold: #f59e0b;
--accent-blue: #38bdf8;
--text-primary: #e2e8f0;
--text-muted: #64748b;
--border: rgba(74, 222, 128, 0.2);
--soil: #7c5e42;
--leaf: #4a7c59;
--leaf-light: #6b9e75;
--wheat: #d4a574;
--cream: #faf8f3;
--paper: #ffffff;
--ink: #2c2c2c;
--ink-muted: #5a5a5a;
--border: #e5e0d5;
--shadow: rgba(0,0,0,0.04);
}
html, body, [class*="css"] {
font-family: "PingFang SC", "Microsoft YaHei", "Noto Serif SC", serif;
background-color: var(--bg-dark);
color: var(--text-primary);
font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
color: var(--ink);
}
.stApp {
background: linear-gradient(135deg, #0a1628 0%, #0d1f3c 50%, #091520 100%);
background: var(--cream);
}
/* Sidebar */
[data-testid="stSidebar"] {
background: linear-gradient(180deg, #0f2040 0%, #0a1628 100%);
background: #f5f2eb;
border-right: 1px solid var(--border);
}
[data-testid="stSidebar"] .stSlider label,
[data-testid="stSidebar"] .stNumberInput label,
[data-testid="stSidebar"] .stSelectbox label {
color: var(--accent-green) !important;
font-size: 0.82rem;
font-family: "JetBrains Mono", "Fira Code", "Source Code Pro", monospace;
letter-spacing: 0.05em;
color: var(--soil) !important;
font-size: 0.85rem;
font-weight: 500;
}
/* Metric cards */
.metric-card {
background: linear-gradient(135deg, #0f2040, #132b55);
background: var(--paper);
border: 1px solid var(--border);
border-radius: 12px;
padding: 20px 24px;
border-radius: 14px;
padding: 20px 18px;
text-align: center;
position: relative;
overflow: hidden;
}
.metric-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, var(--accent-green), var(--accent-blue));
box-shadow: 0 2px 10px var(--shadow);
}
.metric-value {
font-family: "JetBrains Mono", "Fira Code", "Source Code Pro", monospace;
font-size: 2.2rem;
font-size: 1.9rem;
font-weight: 700;
color: var(--accent-green);
line-height: 1;
color: var(--leaf);
line-height: 1.1;
}
.metric-unit {
font-size: 0.85rem;
color: var(--text-muted);
font-size: 0.8rem;
color: var(--ink-muted);
margin-top: 4px;
}
.metric-label {
font-size: 0.9rem;
color: var(--text-primary);
color: var(--ink);
margin-top: 8px;
font-weight: 500;
}
/* Section headers */
.section-header {
font-size: 0.75rem;
font-family: "JetBrains Mono", "Fira Code", "Source Code Pro", monospace;
letter-spacing: 0.15em;
color: var(--accent-gold);
text-transform: uppercase;
border-bottom: 1px solid rgba(245,158,11,0.3);
padding-bottom: 6px;
margin-bottom: 16px;
margin-top: 24px;
font-size: 0.95rem;
font-weight: 600;
color: var(--soil);
padding-bottom: 8px;
margin-bottom: 14px;
margin-top: 22px;
border-bottom: 1px solid var(--border);
}
/* Crop badge */
.crop-badge {
display: inline-block;
background: linear-gradient(135deg, rgba(74,222,128,0.15), rgba(56,189,248,0.15));
border: 1px solid var(--accent-green);
border-radius: 6px;
background: #f3f6f3;
border: 1px solid var(--leaf-light);
border-radius: 999px;
padding: 4px 12px;
font-family: "JetBrains Mono", "Fira Code", "Source Code Pro", monospace;
font-size: 0.78rem;
color: var(--accent-green);
font-size: 0.82rem;
color: var(--leaf);
margin: 3px;
}
/* Recommendation card */
.rec-card {
background: linear-gradient(135deg, rgba(74,222,128,0.08), rgba(56,189,248,0.05));
border: 1px solid rgba(74,222,128,0.3);
background: var(--paper);
border: 1px solid var(--border);
border-radius: 12px;
padding: 18px 22px;
margin: 10px 0;
padding: 14px 18px;
margin: 8px 0;
box-shadow: 0 1px 6px var(--shadow);
}
.rec-rank {
font-family: "JetBrains Mono", "Fira Code", "Source Code Pro", monospace;
font-size: 1.5rem;
color: var(--accent-gold);
font-size: 1.2rem;
color: var(--wheat);
font-weight: 700;
}
.rec-crop {
font-size: 1.1rem;
color: var(--text-primary);
font-size: 1rem;
color: var(--ink);
font-weight: 600;
}
.rec-score {
font-family: "JetBrains Mono", "Fira Code", "Source Code Pro", monospace;
font-size: 0.85rem;
color: var(--accent-blue);
color: var(--leaf);
font-weight: 600;
}
/* Hero title */
.hero-title {
font-size: 2rem;
font-size: 1.6rem;
font-weight: 700;
background: linear-gradient(135deg, var(--accent-green), var(--accent-blue));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: var(--soil);
line-height: 1.2;
}
.hero-sub {
font-family: "JetBrains Mono", "Fira Code", "Source Code Pro", monospace;
font-size: 0.8rem;
color: var(--text-muted);
letter-spacing: 0.1em;
font-size: 0.85rem;
color: var(--ink-muted);
margin-top: 4px;
}
/* Alert boxes */
.alert-good {
background: rgba(74,222,128,0.1);
border-left: 3px solid var(--accent-green);
background: #f4faf5;
border-left: 3px solid var(--leaf-light);
border-radius: 0 8px 8px 0;
padding: 12px 16px;
padding: 12px 14px;
margin: 8px 0;
font-size: 0.9rem;
color: var(--ink);
}
.alert-warn {
background: rgba(245,158,11,0.1);
border-left: 3px solid var(--accent-gold);
background: #fdf9f3;
border-left: 3px solid var(--wheat);
border-radius: 0 8px 8px 0;
padding: 12px 16px;
padding: 12px 14px;
margin: 8px 0;
font-size: 0.9rem;
color: var(--ink);
}
/* Override streamlit slider colors */
/* Sidebar title */
.sidebar-title {
font-size: 1.15rem;
font-weight: 700;
color: var(--soil);
margin-bottom: 2px;
}
.sidebar-sub {
font-size: 0.75rem;
color: var(--ink-muted);
margin-bottom: 12px;
}
/* Streamlit overrides */
.stSlider [data-baseweb="slider"] [data-testid="stTickBarMin"],
.stSlider [data-baseweb="slider"] [data-testid="stTickBarMax"] {
color: var(--text-muted);
color: var(--ink-muted);
}
.stButton > button {
border-radius: 10px !important;
background: var(--leaf) !important;
border: none !important;
color: #fff !important;
}
.stButton > button:hover {
background: var(--leaf-light) !important;
}
</style>
""", unsafe_allow_html=True)
@@ -194,42 +200,42 @@ CROPS = {
"optimal": {"ph": (6.0, 7.0), "N": (80, 120), "P": (30, 60), "K": (40, 80),
"rainfall": (150, 250), "temp": (22, 30)},
"base_yield": 7500, # kg/ha
"color": "#4ade80"
"color": "#4a7c59"
},
"小麦": {
"emoji": "🌿",
"optimal": {"ph": (6.0, 7.5), "N": (60, 100), "P": (20, 50), "K": (30, 60),
"rainfall": (60, 120), "temp": (15, 22)},
"base_yield": 6000,
"color": "#f59e0b"
"color": "#c69c5d"
},
"玉米": {
"emoji": "🌽",
"optimal": {"ph": (5.8, 7.0), "N": (100, 150), "P": (40, 70), "K": (60, 100),
"rainfall": (100, 180), "temp": (20, 28)},
"base_yield": 8500,
"color": "#fbbf24"
"color": "#e8a93f"
},
"大豆": {
"emoji": "🫘",
"optimal": {"ph": (6.0, 7.0), "N": (20, 50), "P": (30, 60), "K": (40, 80),
"rainfall": (80, 150), "temp": (18, 26)},
"base_yield": 3500,
"color": "#a78bfa"
"color": "#8b7cb3"
},
"油菜": {
"emoji": "🌻",
"optimal": {"ph": (6.0, 7.5), "N": (80, 130), "P": (30, 60), "K": (50, 90),
"rainfall": (80, 130), "temp": (15, 20)},
"base_yield": 3000,
"color": "#f97316"
"color": "#d97836"
},
"棉花": {
"emoji": "☁️",
"optimal": {"ph": (6.0, 8.0), "N": (60, 100), "P": (20, 45), "K": (40, 70),
"rainfall": (70, 120), "temp": (25, 32)},
"base_yield": 4500,
"color": "#e2e8f0"
"color": "#5a6b7c"
},
}
@@ -294,11 +300,11 @@ def rank_crops(ph, N, P, K, rainfall, temp, pesticide, area):
# ─── Sidebar Inputs ──────────────────────────────────────────────────────────
with st.sidebar:
st.markdown('<div class="hero-title">🌾 农业决策</div>', unsafe_allow_html=True)
st.markdown('<div class="hero-sub">SMART FARMING SYSTEM v2.0</div>', unsafe_allow_html=True)
st.markdown("---")
st.markdown('<div class="sidebar-title">🌾 种植决策助手</div>', unsafe_allow_html=True)
st.markdown('<div class="sidebar-sub">根据土壤和气候，推荐适宜作物</div>', unsafe_allow_html=True)
st.markdown("<hr style='border:none;border-top:1px solid var(--border);margin:12px 0;'>", unsafe_allow_html=True)
st.markdown('<div class="section-header">🧪 土壤参数</div>', unsafe_allow_html=True)
st.markdown('<div class="section-header" style="margin-top:0">🧪 土壤参数</div>', unsafe_allow_html=True)
col1, col2 = st.columns(2)
with col1:
ph = st.slider("pH 值", 4.0, 9.0, 6.5, 0.1)
@@ -334,10 +340,10 @@ best_crop = rankings[0]
# ─── Main Layout ─────────────────────────────────────────────────────────────
st.markdown(f"""
<div style="display:flex; align-items:baseline; gap:16px; margin-bottom:4px;">
<div class="hero-title">农业智能决策系统</div>
<div style="display:flex; align-items:baseline; gap:12px; margin-bottom:4px;">
<div class="hero-title">种植决策助手</div>
</div>
<div class="hero-sub">YIELD = f(SOIL · WEATHER · PESTICIDE) &nbsp;|&nbsp; 基于多因子 Cobb-Douglas 产量模型</div>
<div class="hero-sub">输入土壤与气象条件，获得作物产量预测与种植建议</div>
""", unsafe_allow_html=True)
st.markdown("<br>", unsafe_allow_html=True)
@@ -392,14 +398,14 @@ with col_left:
r=factor_vals_closed,
theta=factor_names_closed,
fill='toself',
fillcolor='rgba(74,222,128,0.15)',
line=dict(color='#4ade80', width=2),
fillcolor='rgba(74, 124, 89, 0.15)',
line=dict(color='#4a7c59', width=2),
name=selected_crop,
))
fig_radar.add_trace(go.Scatterpolar(
r=[100]*len(factor_names_closed),
theta=factor_names_closed,
line=dict(color='rgba(255,255,255,0.1)', width=1, dash='dot'),
line=dict(color='rgba(0,0,0,0.15)', width=1, dash='dot'),
mode='lines',
name='理想值',
))
@@ -407,14 +413,14 @@ with col_left:
polar=dict(
bgcolor='rgba(0,0,0,0)',
radialaxis=dict(range=[0, 100], showticklabels=True,
tickfont=dict(color='#64748b', size=9),
gridcolor='rgba(255,255,255,0.06)'),
angularaxis=dict(tickfont=dict(color='#e2e8f0', size=11),
gridcolor='rgba(255,255,255,0.08)'),
tickfont=dict(color='#5a5a5a', size=9),
gridcolor='rgba(0,0,0,0.08)'),
angularaxis=dict(tickfont=dict(color='#2c2c2c', size=11),
gridcolor='rgba(0,0,0,0.1)'),
),
paper_bgcolor='rgba(0,0,0,0)',
plot_bgcolor='rgba(0,0,0,0)',
font=dict(color='#e2e8f0'),
font=dict(color='#2c2c2c'),
legend=dict(orientation='h', y=-0.12, font=dict(size=10)),
margin=dict(t=20, b=40, l=40, r=40),
height=320,
@@ -436,11 +442,11 @@ with col_right:
</div>
<span class="rec-score">{r['score']*100:.1f}%</span>
</div>
<div style="background:rgba(255,255,255,0.06); border-radius:4px; height:4px; margin-top:8px; overflow:hidden;">
<div style="background:#f0ece4; border-radius:4px; height:5px; margin-top:10px; overflow:hidden;">
<div style="width:{bar_width}%; height:100%; background:{bar_color}; border-radius:4px;"></div>
</div>
<div style="font-size:0.78rem; color:#64748b; margin-top:4px; font-family:'JetBrains Mono',monospace;">
{r['yield_ha']:,.0f} kg/ha &nbsp;·&nbsp; 总产 {r['total_yield']/1000:,.1f} 吨
<div style="font-size:0.78rem; color:#7a7a7a; margin-top:6px;">
{r['yield_ha']:,.0f} kg/ha · 总产 {r['total_yield']/1000:,.1f} 吨
</div>
</div>""", unsafe_allow_html=True)
@@ -456,18 +462,18 @@ with sa_col1:
fig_N = go.Figure()
fig_N.add_trace(go.Scatter(
x=N_range, y=y_N,
mode='lines', line=dict(color='#4ade80', width=2.5),
fill='tozeroy', fillcolor='rgba(74,222,128,0.08)',
mode='lines', line=dict(color='#4a7c59', width=2.5),
fill='tozeroy', fillcolor='rgba(74, 124, 89, 0.08)',
name='产量'
))
fig_N.add_vline(x=N, line=dict(color='#f59e0b', width=1.5, dash='dot'),
annotation_text=f"当前 {N}", annotation_font_color='#f59e0b')
fig_N.add_vline(x=N, line=dict(color='#d4a574', width=1.5, dash='dot'),
annotation_text=f"当前 {N}", annotation_font_color='#7c5e42')
fig_N.update_layout(
title=dict(text="氮肥用量 vs 产量", font=dict(color='#94a3b8', size=12)),
xaxis=dict(title="氮 N (mg/kg)", color='#64748b', gridcolor='rgba(255,255,255,0.05)'),
yaxis=dict(title="产量 (kg/ha)", color='#64748b', gridcolor='rgba(255,255,255,0.05)'),
title=dict(text="氮肥用量 vs 产量", font=dict(color='#5a5a5a', size=12)),
xaxis=dict(title="氮 N (mg/kg)", color='#5a5a5a', gridcolor='rgba(0,0,0,0.06)'),
yaxis=dict(title="产量 (kg/ha)", color='#5a5a5a', gridcolor='rgba(0,0,0,0.06)'),
paper_bgcolor='rgba(0,0,0,0)', plot_bgcolor='rgba(0,0,0,0)',
font=dict(color='#e2e8f0', size=10),
font=dict(color='#2c2c2c', size=10),
margin=dict(t=36, b=36, l=50, r=20), height=220,
showlegend=False,
)
@@ -480,18 +486,18 @@ with sa_col2:
fig_R = go.Figure()
fig_R.add_trace(go.Scatter(
x=rain_range, y=y_rain,
mode='lines', line=dict(color='#38bdf8', width=2.5),
fill='tozeroy', fillcolor='rgba(56,189,248,0.08)',
mode='lines', line=dict(color='#5a8f9e', width=2.5),
fill='tozeroy', fillcolor='rgba(90, 143, 158, 0.08)',
name='产量'
))
fig_R.add_vline(x=rainfall, line=dict(color='#f59e0b', width=1.5, dash='dot'),
annotation_text=f"当前 {rainfall}mm", annotation_font_color='#f59e0b')
fig_R.add_vline(x=rainfall, line=dict(color='#d4a574', width=1.5, dash='dot'),
annotation_text=f"当前 {rainfall}mm", annotation_font_color='#7c5e42')
fig_R.update_layout(
title=dict(text="月降雨量 vs 产量", font=dict(color='#94a3b8', size=12)),
xaxis=dict(title="降雨量 (mm/月)", color='#64748b', gridcolor='rgba(255,255,255,0.05)'),
yaxis=dict(title="产量 (kg/ha)", color='#64748b', gridcolor='rgba(255,255,255,0.05)'),
title=dict(text="月降雨量 vs 产量", font=dict(color='#5a5a5a', size=12)),
xaxis=dict(title="降雨量 (mm/月)", color='#5a5a5a', gridcolor='rgba(0,0,0,0.06)'),
yaxis=dict(title="产量 (kg/ha)", color='#5a5a5a', gridcolor='rgba(0,0,0,0.06)'),
paper_bgcolor='rgba(0,0,0,0)', plot_bgcolor='rgba(0,0,0,0)',
font=dict(color='#e2e8f0', size=10),
font=dict(color='#2c2c2c', size=10),
margin=dict(t=36, b=36, l=50, r=20), height=220,
showlegend=False,
)
@@ -508,23 +514,23 @@ fig_bar = go.Figure()
fig_bar.add_trace(go.Bar(
x=crop_names, y=crop_yields,
marker=dict(color=crop_colors, opacity=0.85,
line=dict(color='rgba(255,255,255,0.2)', width=1)),
line=dict(color='rgba(0,0,0,0.08)', width=1)),
text=[f"{y:,.0f}" for y in crop_yields],
textposition='outside',
textfont=dict(color='#94a3b8', size=10, family='JetBrains Mono'),
textfont=dict(color='#5a5a5a', size=10),
))
fig_bar.update_layout(
xaxis=dict(color='#64748b', gridcolor='rgba(255,255,255,0.04)'),
yaxis=dict(title="预期产量 (kg/ha)", color='#64748b', gridcolor='rgba(255,255,255,0.05)'),
xaxis=dict(color='#5a5a5a', gridcolor='rgba(0,0,0,0.04)'),
yaxis=dict(title="预期产量 (kg/ha)", color='#5a5a5a', gridcolor='rgba(0,0,0,0.06)'),
paper_bgcolor='rgba(0,0,0,0)', plot_bgcolor='rgba(0,0,0,0)',
font=dict(color='#e2e8f0', size=11),
margin=dict(t=20, b=30, l=60, r=20), height=240,
font=dict(color='#2c2c2c', size=11),
margin=dict(t=20, b=30, l=60, r=20), height=260,
showlegend=False,
)
st.plotly_chart(fig_bar, use_container_width=True)
# ─── Advisory Panel ───────────────────────────────────────────────────────────
st.markdown('<div class="section-header">💡 智能建议</div>', unsafe_allow_html=True)
st.markdown('<div class="section-header">💡 种植建议</div>', unsafe_allow_html=True)
adv1, adv2 = st.columns(2)
with adv1:
@@ -557,7 +563,7 @@ with adv1:
with adv2:
st.markdown(f"""
<div class="rec-card">
<div style="font-size:0.82rem; color:#64748b; font-family:'JetBrains Mono',monospace; margin-bottom:12px;">
<div style="font-size:0.82rem; color:#7a7a7a; margin-bottom:12px;">
当前环境参数下适宜种植：
</div>
""", unsafe_allow_html=True)
@@ -568,18 +574,17 @@ with adv2:
st.markdown(f'{badges}</div>', unsafe_allow_html=True)
st.markdown(f"""
<div style="margin-top:16px; font-size:0.85rem; color:#94a3b8; line-height:1.7;">
<b style="color:#4ade80;">最优方案：</b>{best_crop['emoji']} {best_crop['crop']}<br>
预期单产：<span style="font-family:'JetBrains Mono',monospace; color:#38bdf8;">{best_crop['yield_ha']:,.0f} kg/ha</span><br>
{area:.0f}公顷总产：<span style="font-family:'JetBrains Mono',monospace; color:#38bdf8;">{best_crop['total_yield']/1000:,.1f} 吨</span>
<div style="margin-top:16px; font-size:0.88rem; color:#5a5a5a; line-height:1.7; background:#fff; border:1px solid #e5e0d5; border-radius:12px; padding:14px 16px;">
<b style="color:#4a7c59;">最优方案：</b>{best_crop['emoji']} {best_crop['crop']}<br>
预期单产：<span style="color:#4a7c59; font-weight:600;">{best_crop['yield_ha']:,.0f} kg/ha</span><br>
{area:.0f}公顷总产：<span style="color:#4a7c59; font-weight:600;">{best_crop['total_yield']/1000:,.1f} 吨</span>
</div>
""", unsafe_allow_html=True)
# ─── Footer ───────────────────────────────────────────────────────────────────
st.markdown("<br>", unsafe_allow_html=True)
st.markdown("""
<div style="text-align:center; font-family:'JetBrains Mono',monospace; font-size:0.72rem;
color:#334155; padding:16px; border-top:1px solid rgba(74,222,128,0.1);">
YIELD = f(Soil, Weather, Pesticide) &nbsp;|&nbsp; Cobb-Douglas Multi-Factor Model &nbsp;|&nbsp; 农业智能决策系统
<div style="text-align:center; font-size:0.78rem; color:#aaa; padding:14px; border-top:1px solid #e5e0d5;">
种植决策助手 · 基于 Cobb-Douglas 多因子产量模型 · 仅供参考
</div>
""", unsafe_allow_html=True)