feat: 将赠金usage显示为进度条

- 同时为 usage_display 添加了和上下框架一样的 block 样式

assets/custom.css

@@ -37,15 +37,45 @@ footer {
 
 /* usage_display */
 #usage_display {
-    height: 2em;
+    position: relative;
+    margin: 0;
+    box-shadow: var(--block-shadow);
+    border-width: var(--block-border-width);
+    border-color: var(--block-border-color);
+    border-radius: var(--block-radius);
+    background: var(--block-background-fill);
+    width: 100%;
+    line-height: var(--line-sm);
+    min-height: 2em;
 }
-
-#usage_display p{
-    padding: 0 1em;
+#usage_display p, #usage_display span {
+    margin: 0;
+    padding: .5em 1em;
     font-size: .85em;
-    font-family: monospace;
     color: var(--body-text-color-subdued);
 }
+.progress-bar {
+    background-color: var(--input-background-fill);;
+    margin: 0 1em;
+    height: 20px;
+    border-radius: 10px;
+    overflow: hidden;
+}
+.progress {
+    background-color: var(--block-title-background-fill);;
+    height: 100%;
+    border-radius: 10px;
+    text-align: right;
+    transition: width 0.5s ease-in-out;
+}
+.progress-text {
+    /* color: white; */
+    color: var(--color-accent) !important;
+    font-size: 1em !important;
+    font-weight: bold;
+    padding-right: 10px;
+    line-height: 20px;
+}
 /* list */
 ol:not(.options), ul:not(.options) {
     padding-inline-start: 2em !important;

modules/openai_func.py

@@ -43,12 +43,12 @@ def get_usage(openai_api_key):
         try:
             balance = balance_data["total_available"] if balance_data["total_available"] else 0
             total_used = balance_data["total_used"] if balance_data["total_used"] else 0
+            usage_percent = round(total_used / (total_used+balance) * 100, 2)
         except Exception as e:
             logging.error(f"API使用情况解析失败:"+str(e))
             balance = 0
             total_used=0
             return f"**API使用情况解析失败**"
-        
         if balance == 0:
             last_day_of_month = datetime.datetime.now().strftime("%Y-%m-%d")
             first_day_of_month = datetime.datetime.now().replace(day=1).strftime("%Y-%m-%d")
@@ -60,7 +60,17 @@ def get_usage(openai_api_key):
                 return f"**获取API使用情况失败**"
             return f"**本月使用金额** \u3000 ${usage_data['total_usage'] / 100}"
         
-        return f"**免费额度**（已用/余额）\u3000${total_used} / ${balance}"
+        # return f"**免费额度**（已用/余额）\u3000${total_used} / ${balance}"
+        return f"""\
+        <b>免费额度使用情况</b>
+        <div class="progress-bar">
+            <div class="progress" style="width: {usage_percent}%;">
+                <span class="progress-text">{usage_percent}%</span>
+            </div>
+        </div>
+        <div style="display: flex; justify-content: space-between;"><span>已用 ${total_used}</span><span>可用 ${balance}</span></div>
+        """
+    
     except requests.exceptions.ConnectTimeout:
         status_text = standard_error_msg + connection_timeout_prompt + error_retrieve_prompt
         return status_text