feat: 添加加密货币概览Streamlit应用

- 创建包含TradingView小部件的Streamlit应用
- 添加项目文档和依赖配置文件
- 实现实时加密货币市场数据展示功能

README.md

@@ -1,2 +1,28 @@
 # aa-tradingview
 
+TradingView小部件集成项目，使用Streamlit创建加密货币概览页面。
+
+## 项目结构
+
+- `加密货币概览.md` - TradingView小部件的HTML代码
+- `app.py` - Streamlit应用主文件
+- `requirements.txt` - Python依赖包列表
+
+## 运行方式
+
+```bash
+pip install -r requirements.txt
+streamlit run app.py
+```
+
+## 代码索引
+
+### 文件说明
+- **app.py**: Streamlit应用主文件，包含TradingView小部件的集成代码
+- **加密货币概览.md**: 原始TradingView小部件HTML代码
+- **requirements.txt**: 项目依赖包配置文件
+
+### 主要功能
+- 加密货币市场概览显示
+- TradingView小部件嵌入
+- 响应式页面布局

app.py

@@ -0,0 +1,126 @@
+"""
+TradingView加密货币概览Streamlit应用
+
+这个应用集成了TradingView的加密货币市场概览小部件，
+提供实时的加密货币价格和市场数据展示。
+"""
+
+import streamlit as st
+import streamlit.components.v1 as components
+
+def main():
+    """
+    主函数：设置页面配置并渲染TradingView小部件
+    """
+    # 设置页面配置
+    st.set_page_config(
+        page_title="加密货币概览 - TradingView",
+        page_icon="₿",
+        layout="wide",
+        initial_sidebar_state="collapsed"
+    )
+    
+    # 页面标题
+    st.title("🚀 加密货币市场概览")
+    st.markdown("---")
+    
+    # 添加说明文字
+    st.markdown("""
+    ### 📊 实时加密货币数据
+    
+    本页面展示了来自TradingView的实时加密货币市场数据，包括：
+    - 💰 实时价格
+    - 📈 涨跌幅
+    - 📊 市值排名
+    - 🔄 24小时交易量
+    
+    数据每秒自动更新，为您提供最新的市场信息。
+    """)
+    
+    # 创建TradingView小部件
+    render_tradingview_widget()
+
+def render_tradingview_widget():
+    """
+    渲染TradingView加密货币概览小部件
+    
+    该函数使用Streamlit的components模块来嵌入TradingView的JavaScript小部件，
+    显示加密货币市场的实时数据。
+    """
+    
+    # TradingView小部件的HTML代码
+    tradingview_html = """
+    <!-- TradingView Widget BEGIN -->
+    <div class="tradingview-widget-container" style="height: 1000px; width: 100%;">
+      <div class="tradingview-widget-container__widget" style="height: calc(100% - 32px);"></div>
+      <div class="tradingview-widget-copyright">
+        <a href="https://cn.tradingview.com/markets/cryptocurrencies/prices-all/" 
+           rel="noopener nofollow" target="_blank">
+          <span class="blue-text">Track all markets on TradingView</span>
+        </a>
+      </div>
+      <script type="text/javascript" 
+              src="https://s3.tradingview.com/external-embedding/embed-widget-screener.js" 
+              async>
+      {
+        "defaultColumn": "overview",
+        "screener_type": "crypto_mkt",
+        "displayCurrency": "USD",
+        "colorTheme": "dark",
+        "isTransparent": false,
+        "locale": "zh_CN",
+        "width": "100%",
+        "height": "100%"
+      }
+      </script>
+    </div>
+    <!-- TradingView Widget END -->
+    """
+    
+    # 使用Streamlit components渲染HTML
+    components.html(tradingview_html, height=1050)
+
+def add_custom_css():
+    """
+    添加自定义CSS样式
+    
+    为页面添加美观的样式，包括背景色、字体等。
+    """
+    st.markdown("""
+    <style>
+    .main {
+        padding-top: 2rem;
+    }
+    
+    .stTitle {
+        text-align: center;
+        color: #1f77b4;
+        font-size: 2.5rem !important;
+        margin-bottom: 2rem;
+    }
+    
+    .tradingview-widget-container {
+        border-radius: 10px;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        overflow: hidden;
+    }
+    
+    .stMarkdown {
+        text-align: justify;
+    }
+    
+    hr {
+        margin: 2rem 0;
+        border: none;
+        height: 2px;
+        background: linear-gradient(90deg, #1f77b4, #ff7f0e, #2ca02c);
+    }
+    </style>
+    """, unsafe_allow_html=True)
+
+if __name__ == "__main__":
+    # 添加自定义样式
+    add_custom_css()
+    
+    # 运行主函数
+    main()

requirements.txt

@@ -0,0 +1,9 @@
+# TradingView Streamlit应用依赖包
+# 
+# 主要依赖：
+# - streamlit: Web应用框架
+# 
+# 安装方式：
+# pip install -r requirements.txt
+
+streamlit>=1.28.0

加密货币概览.md

@@ -0,0 +1,18 @@
+<!-- TradingView Widget BEGIN -->
+<div class="tradingview-widget-container">
+  <div class="tradingview-widget-container__widget"></div>
+  <div class="tradingview-widget-copyright"><a href="https://cn.tradingview.com/markets/cryptocurrencies/prices-all/" rel="noopener nofollow" target="_blank"><span class="blue-text">Track all markets on TradingView</span></a></div>
+  <script type="text/javascript" src="https://s3.tradingview.com/external-embedding/embed-widget-screener.js" async>
+  {
+  "defaultColumn": "overview",
+  "screener_type": "crypto_mkt",
+  "displayCurrency": "USD",
+  "colorTheme": "dark",
+  "isTransparent": false,
+  "locale": "zh_CN",
+  "width": "100%",
+  "height": "100%"
+}
+  </script>
+</div>
+<!-- TradingView Widget END -->