Bear Blog CSS美化工作進度+範例
配色進度
| 程式語言 | 進度 |
|---|---|
| Python | 99% |
| CSS | 99% |
| HTML | 5% |
| Java | 70% |
| SQL | 51% |
| PHP | 70% |
- ✅
SQL雙引號str還沒改色
優化進度
- 改用CSS變數:
0% - 整理類似的class選擇器讓他們住在一起:
0%
色調範例
大概是這種感覺..
# %%writefile app.py
# streamlit主程式
# 不錯的整理:https://surendraredd.github.io/Books/concepts.html
import streamlit as st
from streamlit_option_menu import option_menu
import pandas as pd
from datetime import datetime
#TODO函式區
# def totalAsset:
# 站點內容
st.set_page_config(page_title="記帳本", layout="wide")
# 頁面CSS(有些樣式被toml設定檔優先使用,不能從這邊覆蓋)
st.markdown('<style>\
.st-emotion-cache-1dp5vir {\
position: absolute;\
top: 0px;\
right: 0px;\
left: 0px;\
height: 0.125rem;\
background-image: linear-gradient(90deg, #d1ff38, #3cba2f);\
z-index: 999990;\
}\
</style>', unsafe_allow_html=True)
# 側欄內容物陣列
menu_arr = ["記帳管理", "帳戶檢視", "財務BI"]
#TODO記帳管理=新增記帳+記帳總覽 第一版比較陽春 記帳的刪除跟修改請直接改csv謝謝@@ 帳戶也只能用改csv處理
#TODO帳戶跟記帳的關聯是個問題-目前假想 帳戶不能硬刪除 當帳戶被關閉時圖表區不顯示資料 但記帳管理總覽區仍給他關聯(新增時不能使用被關閉的帳戶)
# 生成側欄
with st.sidebar:
# 側欄分組與主要內容回填
menu = option_menu("記帳本", menu_arr,
icons=[],
menu_icon="cast", default_index=0)
# 兩份csv要存雲端硬碟達到資料持久化
# 分類就放推了 這種寫法關聯太多只是討虐..
def main(): # 這邊應該改成迴圈 枚舉之類的 不然好醜好醜啊
# 各頁面主要內容
# if menu == "預算設定器":
# st.subheader("預算設定器")
# 可以針對tag設定每個月的預算
if menu == "記帳管理":
st.subheader("💵記帳管理")
st.info("轉帳或提款請自己記兩筆", icon="⚠️")
# 讀取雲端硬碟的record.csv
file_path = '/content/drive/MyDrive/streamlit_acc/record.csv'
if "df" not in st.session_state:
st.session_state.df = pd.read_csv(file_path)
# 讀取雲端硬碟的account.csv
acc_file_path = '/content/drive/MyDrive/streamlit_acc/account.csv'
if "acc_df" not in st.session_state:
st.session_state.acc_df = pd.read_csv(acc_file_path)
#TODO預算警告器
# 新增記帳 檢查帳戶是否存在 異動帳戶
# 輸入框 太長了做分欄 https://docs.streamlit.io/library/api-reference/layout/st.columns
col1, col2 = st.columns(2)
with col1:
date = st.text_input("日期(YYYYMMDD)", "")
name = st.text_input("名稱", "")
io_kind = st.text_input("收支類型(收填I,支填O)", "")
with col2:
tag = st.text_input("分類標籤", "")
price = st.text_input("金額", "")
account = st.text_input("使用帳戶", "")
if st.button("新增記帳"):
# 先檢查使用帳戶是否存在
#TODO還要檢查是否還能使用
acc_df = st.session_state.acc_df
if not acc_df.loc[acc_df['使用帳戶'] == account].empty: # not False
st.session_state.df = st.session_state.df.append({"日期": date, "名稱": name, "收支類型": io_kind, "分類標籤":tag, "金額":price, "使用帳戶":account}, ignore_index=True)
st.session_state.df.to_csv(file_path, index=False)
# 異動帳戶餘額
# 取回帳戶原來金額
acc_df['金額'] = pd.to_numeric(acc_df['金額']) # 字串要先轉貨幣
origin_price = acc_df.loc[acc_df['使用帳戶'] == account, '金額']
# 根據收支判斷運算方式
if io_kind == "I":
acc_df.loc[acc_df['使用帳戶'] == account, '金額'] = origin_price + int(price) # 異動要確實做在原來的csv上才會生效=_=
else:
acc_df.loc[acc_df['使用帳戶'] == account, '金額'] = origin_price - int(price)
acc_df.to_csv(acc_file_path, index=False)
st.success("新增成功!")
else:
st.error("沒有這個戶頭啊")
df_with_style = st.session_state.df.style.format({"Expense": lambda x : '{:.2f}'.format(x)}) # 其他資料出現None時會導致本設定失效
# 反正DF自己可以按表頭排序,寫排序導致的問題太多,先不寫了
st.dataframe(df_with_style, height=500, width=1200)
if menu == "帳戶檢視":
st.subheader("帳戶檢視")
# 讀取雲端硬碟的account.csv
file_path = '/content/drive/MyDrive/streamlit_acc/account.csv'
df = pd.read_csv(file_path)
st.dataframe(df, height=500, width=1200)
# st.subheader("資產加總")
# totalAsset()
if menu == "財務BI":
st.title("財務BI")
col1, col2 = st.columns(2)
with col1:
# 資產加總 可以看看目前存多少了 制定下階段目標
# st.subheader("資產加總")
# totalAsset()
# 多重收入折線圖 最好能說明呈現<-用於監測投資或接案比較有感,薪水收入不太會改變
st.subheader("多重收入折線圖")
with col2:
# 支出分布圓餅圖(去除買股票)
st.subheader("支出分布圓餅圖")
# 開銷前10名
st.subheader("開銷前10名")
if __name__ == '__main__':
main()