update
This commit is contained in:
aaron
parent
0f7128d37b
commit
ec76fe077f
@ -5,7 +5,7 @@ services:
|
||||
build:
|
||||
context: .
|
||||
dockerfile: Dockerfile
|
||||
image: icrypto-web:1.0.6
|
||||
image: icrypto-web:1.0.7
|
||||
ports:
|
||||
- '6000:80'
|
||||
restart: unless-stopped
|
||||
|
||||
@ -3,7 +3,10 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
|
||||
/>
|
||||
<title>Crypto AI - 加密货币AI服务平台</title>
|
||||
<style>
|
||||
html,
|
||||
@ -12,6 +15,7 @@
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
body {
|
||||
background-color: #0f1318;
|
||||
|
||||
@ -15,6 +15,7 @@
|
||||
"format": "prettier --write src/"
|
||||
},
|
||||
"dependencies": {
|
||||
"marked": "^15.0.11",
|
||||
"pinia": "^3.0.1",
|
||||
"vue": "^3.5.13",
|
||||
"vue-router": "^4.5.0"
|
||||
|
||||
213
src/App.vue
213
src/App.vue
@ -1,5 +1,12 @@
|
||||
<script setup lang="ts">
|
||||
import { RouterView } from 'vue-router'
|
||||
import { ref } from 'vue'
|
||||
|
||||
const mobileMenuOpen = ref(false)
|
||||
|
||||
const toggleMobileMenu = () => {
|
||||
mobileMenuOpen.value = !mobileMenuOpen.value
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -10,14 +17,28 @@ import { RouterView } from 'vue-router'
|
||||
<img src="@/assets/logo.png" alt="Crypto.AI Logo" class="logo-image" />
|
||||
Crypto.AI
|
||||
</div>
|
||||
<nav class="main-nav">
|
||||
<RouterLink to="/" class="nav-link">首页</RouterLink>
|
||||
<RouterLink to="/ai-agent" class="nav-link">AI Agent</RouterLink>
|
||||
|
||||
<!-- 汉堡菜单按钮 -->
|
||||
<button class="mobile-menu-toggle" @click="toggleMobileMenu" aria-label="菜单">
|
||||
<span class="bar" :class="{ 'bar-1-active': mobileMenuOpen }"></span>
|
||||
<span class="bar" :class="{ 'bar-2-active': mobileMenuOpen }"></span>
|
||||
<span class="bar" :class="{ 'bar-3-active': mobileMenuOpen }"></span>
|
||||
</button>
|
||||
|
||||
<nav class="main-nav" :class="{ 'mobile-menu-open': mobileMenuOpen }">
|
||||
<RouterLink to="/" class="nav-link" @click="mobileMenuOpen = false">首页</RouterLink>
|
||||
<RouterLink to="/ai-feed" class="nav-link" @click="mobileMenuOpen = false"
|
||||
>AI分析</RouterLink
|
||||
>
|
||||
<!-- <RouterLink to="/ai-agent" class="nav-link">AI Agent</RouterLink> -->
|
||||
<!-- <RouterLink to="/tools" class="nav-link">工具集合</RouterLink> -->
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 遮罩层 - 仅在小屏幕上显示 -->
|
||||
<div v-if="mobileMenuOpen" class="mobile-menu-overlay" @click="mobileMenuOpen = false"></div>
|
||||
|
||||
<main class="app-content">
|
||||
<div class="content-container">
|
||||
<RouterView />
|
||||
@ -27,17 +48,17 @@ import { RouterView } from 'vue-router'
|
||||
<footer class="app-footer">
|
||||
<div class="footer-content">
|
||||
<div class="footer-links">
|
||||
<a href="https://t.me/cryptoai66" target="_blank" class="footer-link">
|
||||
<svg class="telegram-icon-footer" viewBox="0 0 24 24" width="18" height="18">
|
||||
<a href="https://discord.gg/8vMDD4kC" target="_blank" class="footer-link">
|
||||
<svg class="discord-icon-footer" viewBox="0 0 24 24" width="18" height="18">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm5.894 8.221l-1.97 9.28c-.145.658-.537.818-1.084.508l-3-2.21-1.446 1.394c-.14.18-.357.34-.737.34l.265-3.73 6.8-6.14c.307-.266-.064-.42-.476-.154l-8.407 5.296-3.6-1.122c-.784-.245-.802-.784.17-1.156l14.095-5.41c.654-.245 1.227.166.99 1.104z"
|
||||
d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"
|
||||
/>
|
||||
</svg>
|
||||
电报群
|
||||
Discord社区
|
||||
</a>
|
||||
</div>
|
||||
<p>© 2024 Crypto.AI - 加密货币AI服务平台</p>
|
||||
<p>© 2025 Crypto.AI - Web3超级AI Agent</p>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
@ -196,6 +217,72 @@ body {
|
||||
background-color: var(--color-accent);
|
||||
}
|
||||
|
||||
/* 移动菜单样式 */
|
||||
.mobile-menu-toggle {
|
||||
display: none;
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 110;
|
||||
}
|
||||
|
||||
.mobile-menu-toggle:hover {
|
||||
background-color: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.bar {
|
||||
display: block;
|
||||
width: 22px;
|
||||
height: 2px;
|
||||
margin: 3px auto;
|
||||
background-color: var(--color-text-primary);
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
/* 汉堡菜单动画 */
|
||||
.bar-1-active {
|
||||
transform: rotate(-45deg) translate(-5px, 5px);
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
.bar-2-active {
|
||||
opacity: 0;
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
|
||||
.bar-3-active {
|
||||
transform: rotate(45deg) translate(-5px, -5px);
|
||||
width: 24px;
|
||||
}
|
||||
|
||||
.mobile-menu-overlay {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.7);
|
||||
z-index: 90;
|
||||
animation: fadeIn 0.3s ease;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.app-content {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
@ -257,7 +344,7 @@ body {
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.telegram-icon-footer {
|
||||
.discord-icon-footer {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
@ -330,34 +417,118 @@ body {
|
||||
@media (max-width: 768px) {
|
||||
:root {
|
||||
--content-padding: 1rem;
|
||||
--header-height: 60px;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
padding: 1rem var(--content-padding);
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
padding: 0 var(--content-padding);
|
||||
}
|
||||
|
||||
.app-header {
|
||||
height: auto;
|
||||
position: relative;
|
||||
height: var(--header-height);
|
||||
position: sticky;
|
||||
}
|
||||
|
||||
.logo {
|
||||
position: static;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.logo-image {
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.main-nav {
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
margin: 1rem 0;
|
||||
height: auto;
|
||||
width: auto;
|
||||
justify-content: flex-end;
|
||||
gap: 1.5rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding: 0.75rem 0;
|
||||
height: auto;
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
|
||||
.router-link-active::after {
|
||||
bottom: -1px;
|
||||
}
|
||||
|
||||
.app-content {
|
||||
padding: 1rem 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
:root {
|
||||
--header-height: 56px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.logo-image {
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.main-nav {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.mobile-menu-toggle {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.main-nav {
|
||||
position: absolute;
|
||||
top: var(--header-height);
|
||||
right: -100%;
|
||||
width: 200px;
|
||||
height: auto;
|
||||
min-height: 0;
|
||||
background-color: var(--color-bg-elevated);
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 15px 0;
|
||||
transition: right 0.3s ease;
|
||||
z-index: 100;
|
||||
box-shadow: -2px 2px 10px rgba(0, 0, 0, 0.3);
|
||||
border-radius: 0 0 0 8px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.main-nav.mobile-menu-open {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
height: 44px;
|
||||
padding: 0;
|
||||
font-size: 1rem;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.router-link-active::after {
|
||||
bottom: 10px;
|
||||
width: 30px;
|
||||
left: calc(50% - 15px);
|
||||
}
|
||||
|
||||
.mobile-menu-overlay {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -19,6 +19,11 @@ const router = createRouter({
|
||||
name: 'ai-agent',
|
||||
component: () => import('../views/AIAgentView.vue'),
|
||||
},
|
||||
{
|
||||
path: '/ai-feed',
|
||||
name: 'ai-feed',
|
||||
component: () => import('../views/AIFeedView.vue'),
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
|
||||
586
src/views/AIFeedView.vue
Normal file
586
src/views/AIFeedView.vue
Normal file
@ -0,0 +1,586 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { marked } from 'marked'
|
||||
|
||||
// 根据环境选择API基础URL
|
||||
const apiBaseUrl =
|
||||
import.meta.env.MODE === 'development' ? 'http://127.0.0.1:8000' : 'https://api.ibtc.work'
|
||||
|
||||
// 定义Feed项的类型
|
||||
interface FeedItem {
|
||||
id: number
|
||||
agent_name: string
|
||||
avatar_url: string | null
|
||||
content: string
|
||||
create_time: string
|
||||
rendered_content?: string
|
||||
}
|
||||
|
||||
const feedItems = ref<FeedItem[]>([])
|
||||
const isLoading = ref(false)
|
||||
const error = ref<string | null>(null)
|
||||
const limit = ref(10)
|
||||
const skip = ref(0)
|
||||
const hasMore = ref(true)
|
||||
|
||||
// 格式化日期
|
||||
const formatDate = (dateString: string) => {
|
||||
const date = new Date(dateString)
|
||||
return new Intl.DateTimeFormat('zh-CN', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit',
|
||||
}).format(date)
|
||||
}
|
||||
|
||||
// 渲染Markdown内容
|
||||
const renderMarkdown = (content: string): string => {
|
||||
return marked.parse(content) as string
|
||||
}
|
||||
|
||||
// 加载数据
|
||||
const loadFeed = async () => {
|
||||
if (isLoading.value || !hasMore.value) return
|
||||
|
||||
isLoading.value = true
|
||||
error.value = null
|
||||
|
||||
try {
|
||||
const response = await fetch(`${apiBaseUrl}/feed?limit=${limit.value}&skip=${skip.value}`)
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`请求失败: ${response.status}`)
|
||||
}
|
||||
|
||||
const data = await response.json()
|
||||
|
||||
if (data.length === 0) {
|
||||
hasMore.value = false
|
||||
} else {
|
||||
// 处理每个项目的Markdown内容
|
||||
const processedData = data.map((item: FeedItem) => ({
|
||||
...item,
|
||||
rendered_content: renderMarkdown(item.content),
|
||||
}))
|
||||
|
||||
feedItems.value = [...feedItems.value, ...processedData]
|
||||
skip.value += data.length
|
||||
}
|
||||
} catch (err) {
|
||||
error.value = err instanceof Error ? err.message : '加载数据时出错'
|
||||
console.error('获取Feed数据失败:', err)
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 加载更多数据
|
||||
const loadMore = () => {
|
||||
loadFeed()
|
||||
}
|
||||
|
||||
// 刷新数据
|
||||
const refreshFeed = () => {
|
||||
feedItems.value = []
|
||||
skip.value = 0
|
||||
hasMore.value = true
|
||||
loadFeed()
|
||||
}
|
||||
|
||||
// 初始加载
|
||||
onMounted(() => {
|
||||
loadFeed()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="ai-feed-view">
|
||||
<!-- <h1 class="page-title">AI Agent 分析流</h1>
|
||||
<p class="page-description">实时区块链市场分析和交易建议</p> -->
|
||||
|
||||
<div class="feed-actions">
|
||||
<button @click="refreshFeed" class="refresh-button" :disabled="isLoading">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="refresh-icon"
|
||||
>
|
||||
<path
|
||||
d="M21.5 2v6h-6M2.5 22v-6h6M2 11.5a10 10 0 0 1 18.8-4.3M22 12.5a10 10 0 0 1-18.8 4.2"
|
||||
/>
|
||||
</svg>
|
||||
<span v-if="!isLoading">刷新</span>
|
||||
<span v-else>加载中...</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="error" class="error-message">
|
||||
{{ error }}
|
||||
<button @click="refreshFeed" class="retry-button">重试</button>
|
||||
</div>
|
||||
|
||||
<div class="feed-container">
|
||||
<div v-if="feedItems.length === 0 && !isLoading" class="empty-state">暂无数据</div>
|
||||
|
||||
<div v-for="item in feedItems" :key="item.id" class="feed-item">
|
||||
<div class="feed-header">
|
||||
<div class="avatar">
|
||||
<img
|
||||
v-if="item.avatar_url"
|
||||
:src="item.avatar_url"
|
||||
:alt="item.agent_name"
|
||||
class="avatar-img"
|
||||
/>
|
||||
<div v-else class="avatar-placeholder">
|
||||
{{ item.agent_name.charAt(0) }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="feed-info">
|
||||
<div class="feed-info-row">
|
||||
<h3 class="agent-name">{{ item.agent_name }}</h3>
|
||||
<p class="timestamp">{{ formatDate(item.create_time) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="feed-content markdown-body" v-html="item.rendered_content"></div>
|
||||
</div>
|
||||
|
||||
<div v-if="isLoading" class="loading-indicator">
|
||||
<div class="spinner"></div>
|
||||
<span>加载中...</span>
|
||||
</div>
|
||||
|
||||
<div v-if="hasMore && !isLoading && feedItems.length > 0" class="load-more">
|
||||
<button @click="loadMore" class="load-more-button">加载更多</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.ai-feed-view {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
max-width: 700px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 2.2rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.page-description {
|
||||
color: var(--color-text-secondary);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.feed-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.refresh-button {
|
||||
background-color: #2c2c2c;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--border-radius);
|
||||
padding: 0.5rem 1rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.refresh-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.refresh-button:hover {
|
||||
background-color: #3c3c3c;
|
||||
}
|
||||
|
||||
.refresh-button:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.feed-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.feed-item {
|
||||
background-color: #121212;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
transition:
|
||||
transform 0.2s ease,
|
||||
box-shadow 0.2s ease;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.feed-item:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.feed-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 1.2rem 1.5rem;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
background-color: #1a1a1a;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.avatar-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.avatar-placeholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #3355ff;
|
||||
color: white;
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.feed-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.feed-info-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.agent-name {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 600;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.timestamp {
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 0.9rem;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.feed-content {
|
||||
padding: 1.5rem 2.5rem;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
background-color: rgba(255, 0, 0, 0.1);
|
||||
border: 1px solid rgba(255, 0, 0, 0.3);
|
||||
color: #ff4d4d;
|
||||
padding: 1rem;
|
||||
border-radius: var(--border-radius);
|
||||
margin-bottom: 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.retry-button {
|
||||
background-color: transparent;
|
||||
border: 1px solid #ff4d4d;
|
||||
color: #ff4d4d;
|
||||
border-radius: var(--border-radius);
|
||||
padding: 0.3rem 0.8rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.retry-button:hover {
|
||||
background-color: rgba(255, 77, 77, 0.1);
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 3rem;
|
||||
color: var(--color-text-secondary);
|
||||
background-color: #121212;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.loading-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rem;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: 3px solid rgba(255, 255, 255, 0.1);
|
||||
border-top-color: #3355ff;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.load-more {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.load-more-button {
|
||||
background-color: #2c2c2c;
|
||||
border: 1px solid var(--color-border);
|
||||
color: #ffffff;
|
||||
border-radius: var(--border-radius);
|
||||
padding: 0.5rem 1.5rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.load-more-button:hover {
|
||||
background-color: #3c3c3c;
|
||||
}
|
||||
|
||||
/* 自定义markdown样式 */
|
||||
.markdown-body {
|
||||
line-height: 1.7;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
overflow-wrap: break-word;
|
||||
word-wrap: break-word;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.markdown-body h1,
|
||||
.markdown-body h2,
|
||||
.markdown-body h3,
|
||||
.markdown-body h4 {
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 1rem;
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
padding-bottom: 0.3rem;
|
||||
}
|
||||
|
||||
.markdown-body h1 {
|
||||
font-size: 1.8rem;
|
||||
color: #3355ff;
|
||||
}
|
||||
|
||||
.markdown-body h2 {
|
||||
font-size: 1.5rem;
|
||||
color: #4466ff;
|
||||
}
|
||||
|
||||
.markdown-body h3 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.markdown-body p {
|
||||
margin-bottom: 1.2rem;
|
||||
}
|
||||
|
||||
.markdown-body ul,
|
||||
.markdown-body ol {
|
||||
padding-left: 1.8rem;
|
||||
margin-bottom: 1.2rem;
|
||||
}
|
||||
|
||||
.markdown-body li {
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.markdown-body code {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
padding: 0.2rem 0.4rem;
|
||||
border-radius: 4px;
|
||||
font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
|
||||
color: #ff9955;
|
||||
}
|
||||
|
||||
.markdown-body pre {
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
padding: 1rem;
|
||||
border-radius: 4px;
|
||||
overflow-x: auto;
|
||||
margin: 1rem 0;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.markdown-body pre code {
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
color: #dddddd;
|
||||
}
|
||||
|
||||
.markdown-body blockquote {
|
||||
border-left: 4px solid #3355ff;
|
||||
padding-left: 1rem;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
font-style: italic;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.markdown-body table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 1rem 0;
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.markdown-body table th,
|
||||
.markdown-body table td {
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
padding: 0.5rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.markdown-body table th {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.markdown-body hr {
|
||||
border: none;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.2);
|
||||
margin: 1.5rem 0;
|
||||
}
|
||||
|
||||
.markdown-body a {
|
||||
color: #66aaff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.markdown-body a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.markdown-body img {
|
||||
max-width: 100%;
|
||||
border-radius: 4px;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.markdown-body strong {
|
||||
color: #ffffff;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.markdown-body em {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.ai-feed-view {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.feed-item {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.feed-header {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.feed-content {
|
||||
padding: 1.2rem;
|
||||
}
|
||||
|
||||
.markdown-body h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.markdown-body h2 {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.markdown-body h3 {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.markdown-body pre {
|
||||
padding: 0.8rem;
|
||||
}
|
||||
|
||||
.markdown-body table {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.markdown-body table th,
|
||||
.markdown-body table td {
|
||||
padding: 0.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.feed-header {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
margin-bottom: 0;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.feed-info {
|
||||
width: calc(100% - 52px);
|
||||
}
|
||||
|
||||
.feed-info-row {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.agent-name {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.timestamp {
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -4,17 +4,17 @@
|
||||
<div class="home-view">
|
||||
<section class="hero-section">
|
||||
<div class="hero-content">
|
||||
<h1 class="hero-title">Crypto.AI <span class="accent">加密货币AI投研服务平台</span></h1>
|
||||
<p class="hero-subtitle">提供一站式加密货币AI投研服务</p>
|
||||
<h1 class="hero-title"><span class="accent">Web3 超级AI Agent</span></h1>
|
||||
<p class="hero-subtitle">立刻加入，开启 Web3 + AI 新时代</p>
|
||||
<div class="hero-actions">
|
||||
<a href="https://t.me/cryptoai66" target="_blank" class="btn btn-telegram">
|
||||
<svg class="telegram-hero-icon" viewBox="0 0 24 24" width="24" height="24">
|
||||
<a href="https://discord.gg/8vMDD4kC" target="_blank" class="btn btn-discord">
|
||||
<svg class="discord-hero-icon" viewBox="0 0 24 24" width="24" height="24">
|
||||
<path
|
||||
fill="currentColor"
|
||||
d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm5.894 8.221l-1.97 9.28c-.145.658-.537.818-1.084.508l-3-2.21-1.446 1.394c-.14.18-.357.34-.737.34l.265-3.73 6.8-6.14c.307-.266-.064-.42-.476-.154l-8.407 5.296-3.6-1.122c-.784-.245-.802-.784.17-1.156l14.095-5.41c.654-.245 1.227.166.99 1.104z"
|
||||
d="M20.317 4.3698a19.7913 19.7913 0 00-4.8851-1.5152.0741.0741 0 00-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 00-.0785-.037 19.7363 19.7363 0 00-4.8852 1.515.0699.0699 0 00-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 00.0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 00.0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 00-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 01-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 01.0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 01.0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 01-.0066.1276 12.2986 12.2986 0 01-1.873.8914.0766.0766 0 00-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 00.0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 00.0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 00-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z"
|
||||
/>
|
||||
</svg>
|
||||
加入电报群
|
||||
加入Discord社区
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@ -113,11 +113,11 @@
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.btn-telegram {
|
||||
.btn-discord {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
background-color: #229ed9;
|
||||
background-color: #5865f2;
|
||||
color: white;
|
||||
border: none;
|
||||
font-weight: var(--font-weight-medium);
|
||||
@ -126,13 +126,13 @@
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-telegram:hover {
|
||||
background-color: #1a8bbf;
|
||||
.btn-discord:hover {
|
||||
background-color: #4752c4;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(34, 158, 217, 0.3);
|
||||
box-shadow: 0 5px 15px rgba(88, 101, 242, 0.3);
|
||||
}
|
||||
|
||||
.telegram-hero-icon {
|
||||
.discord-hero-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user