update
This commit is contained in:
aaron
parent
4a69078af3
commit
f2cc6e0b78
@ -4,7 +4,7 @@
|
|||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" href="/favicon.ico" />
|
<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" />
|
||||||
<title>Crypto AI - 加密货币工具与社区平台</title>
|
<title>Crypto AI - 加密货币AI服务平台</title>
|
||||||
<style>
|
<style>
|
||||||
html,
|
html,
|
||||||
body {
|
body {
|
||||||
|
|||||||
@ -38,6 +38,7 @@
|
|||||||
"jsdom": "^26.0.0",
|
"jsdom": "^26.0.0",
|
||||||
"npm-run-all2": "^7.0.2",
|
"npm-run-all2": "^7.0.2",
|
||||||
"prettier": "3.5.3",
|
"prettier": "3.5.3",
|
||||||
|
"terser": "^5.39.0",
|
||||||
"typescript": "~5.8.0",
|
"typescript": "~5.8.0",
|
||||||
"vite": "^6.2.4",
|
"vite": "^6.2.4",
|
||||||
"vite-plugin-vue-devtools": "^7.7.2",
|
"vite-plugin-vue-devtools": "^7.7.2",
|
||||||
|
|||||||
@ -11,7 +11,6 @@ import { RouterLink, RouterView } from 'vue-router'
|
|||||||
<RouterLink to="/" class="nav-link">首页</RouterLink>
|
<RouterLink to="/" class="nav-link">首页</RouterLink>
|
||||||
<RouterLink to="/tools" class="nav-link">工具集合</RouterLink>
|
<RouterLink to="/tools" class="nav-link">工具集合</RouterLink>
|
||||||
<RouterLink to="/ai-agent" class="nav-link">AI Agent</RouterLink>
|
<RouterLink to="/ai-agent" class="nav-link">AI Agent</RouterLink>
|
||||||
<RouterLink to="/community" class="nav-link">社区</RouterLink>
|
|
||||||
</nav>
|
</nav>
|
||||||
<div class="user-actions">
|
<div class="user-actions">
|
||||||
<button class="btn-connect">连接钱包</button>
|
<button class="btn-connect">连接钱包</button>
|
||||||
@ -27,7 +26,7 @@ import { RouterLink, RouterView } from 'vue-router'
|
|||||||
|
|
||||||
<footer class="app-footer">
|
<footer class="app-footer">
|
||||||
<div class="footer-content">
|
<div class="footer-content">
|
||||||
<p>© 2024 Crypto.AI - 加密货币工具与社区平台</p>
|
<p>© 2024 Crypto.AI - 加密货币AI服务平台</p>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -3,7 +3,6 @@ import WelcomeItem from './WelcomeItem.vue'
|
|||||||
import DocumentationIcon from './icons/IconDocumentation.vue'
|
import DocumentationIcon from './icons/IconDocumentation.vue'
|
||||||
import ToolingIcon from './icons/IconTooling.vue'
|
import ToolingIcon from './icons/IconTooling.vue'
|
||||||
import EcosystemIcon from './icons/IconEcosystem.vue'
|
import EcosystemIcon from './icons/IconEcosystem.vue'
|
||||||
import CommunityIcon from './icons/IconCommunity.vue'
|
|
||||||
import SupportIcon from './icons/IconSupport.vue'
|
import SupportIcon from './icons/IconSupport.vue'
|
||||||
|
|
||||||
const openReadmeInEditor = () => fetch('/__open-in-editor?file=README.md')
|
const openReadmeInEditor = () => fetch('/__open-in-editor?file=README.md')
|
||||||
@ -16,7 +15,7 @@ const openReadmeInEditor = () => fetch('/__open-in-editor?file=README.md')
|
|||||||
</template>
|
</template>
|
||||||
<template #heading>Documentation</template>
|
<template #heading>Documentation</template>
|
||||||
|
|
||||||
Vue’s
|
Vue's
|
||||||
<a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
|
<a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
|
||||||
provides you with all information you need to get started.
|
provides you with all information you need to get started.
|
||||||
</WelcomeItem>
|
</WelcomeItem>
|
||||||
@ -32,8 +31,9 @@ const openReadmeInEditor = () => fetch('/__open-in-editor?file=README.md')
|
|||||||
recommended IDE setup is
|
recommended IDE setup is
|
||||||
<a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a>
|
<a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a>
|
||||||
+
|
+
|
||||||
<a href="https://github.com/vuejs/language-tools" target="_blank" rel="noopener">Vue - Official</a>. If
|
<a href="https://github.com/vuejs/language-tools" target="_blank" rel="noopener"
|
||||||
you need to test your components and web pages, check out
|
>Vue - Official</a
|
||||||
|
>. If you need to test your components and web pages, check out
|
||||||
<a href="https://vitest.dev/" target="_blank" rel="noopener">Vitest</a>
|
<a href="https://vitest.dev/" target="_blank" rel="noopener">Vitest</a>
|
||||||
and
|
and
|
||||||
<a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a>
|
<a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a>
|
||||||
@ -63,24 +63,6 @@ const openReadmeInEditor = () => fetch('/__open-in-editor?file=README.md')
|
|||||||
a visit.
|
a visit.
|
||||||
</WelcomeItem>
|
</WelcomeItem>
|
||||||
|
|
||||||
<WelcomeItem>
|
|
||||||
<template #icon>
|
|
||||||
<CommunityIcon />
|
|
||||||
</template>
|
|
||||||
<template #heading>Community</template>
|
|
||||||
|
|
||||||
Got stuck? Ask your question on
|
|
||||||
<a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>
|
|
||||||
(our official Discord server), or
|
|
||||||
<a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
|
|
||||||
>StackOverflow</a
|
|
||||||
>. You should also follow the official
|
|
||||||
<a href="https://bsky.app/profile/vuejs.org" target="_blank" rel="noopener">@vuejs.org</a>
|
|
||||||
Bluesky account or the
|
|
||||||
<a href="https://x.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
|
|
||||||
X account for latest news in the Vue world.
|
|
||||||
</WelcomeItem>
|
|
||||||
|
|
||||||
<WelcomeItem>
|
<WelcomeItem>
|
||||||
<template #icon>
|
<template #icon>
|
||||||
<SupportIcon />
|
<SupportIcon />
|
||||||
|
|||||||
@ -1,7 +0,0 @@
|
|||||||
<template>
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
|
|
||||||
<path
|
|
||||||
d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</template>
|
|
||||||
@ -19,11 +19,6 @@ const router = createRouter({
|
|||||||
name: 'ai-agent',
|
name: 'ai-agent',
|
||||||
component: () => import('../views/AIAgentView.vue'),
|
component: () => import('../views/AIAgentView.vue'),
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: '/community',
|
|
||||||
name: 'community',
|
|
||||||
component: () => import('../views/CommunityView.vue'),
|
|
||||||
},
|
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@ -26,7 +26,7 @@ const sendMessage = () => {
|
|||||||
chatHistory.value.push({
|
chatHistory.value.push({
|
||||||
role: 'assistant',
|
role: 'assistant',
|
||||||
content:
|
content:
|
||||||
'我正在分析这个项目，这可能需要一些时间。基于初步分析，我建议关注以下几个方面：\n\n1. 团队背景和透明度\n2. 代码审计情况\n3. 社区活跃度和增长\n4. 代币分配机制\n5. 市场流动性\n\n您想了解哪方面的详细信息？',
|
'我正在分析这个项目，这可能需要一些时间。基于初步分析，我建议关注以下几个方面：\n\n1. 团队背景和透明度\n2. 代码审计情况\n3. 项目活跃度和发展\n4. 代币分配机制\n5. 市场流动性\n\n您想了解哪方面的详细信息？',
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
chatHistory.value.push({
|
chatHistory.value.push({
|
||||||
|
|||||||
@ -1,716 +0,0 @@
|
|||||||
<script setup lang="ts">
|
|
||||||
import { ref } from 'vue'
|
|
||||||
|
|
||||||
interface Post {
|
|
||||||
id: number
|
|
||||||
author: {
|
|
||||||
name: string
|
|
||||||
avatar: string
|
|
||||||
verified: boolean
|
|
||||||
}
|
|
||||||
content: string
|
|
||||||
timestamp: string
|
|
||||||
likes: number
|
|
||||||
comments: number
|
|
||||||
reposts: number
|
|
||||||
isLiked: boolean
|
|
||||||
images?: string[]
|
|
||||||
tags?: string[]
|
|
||||||
}
|
|
||||||
|
|
||||||
const newPostContent = ref('')
|
|
||||||
const filter = ref('for-you')
|
|
||||||
|
|
||||||
const posts = ref<Post[]>([
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
author: {
|
|
||||||
name: 'CryptoInsight',
|
|
||||||
avatar: 'https://api.dicebear.com/7.x/shapes/svg?seed=CryptoInsight',
|
|
||||||
verified: true,
|
|
||||||
},
|
|
||||||
content:
|
|
||||||
'比特币减半已经完成！这对市场来说是一个重要的里程碑。你们认为这会对价格产生什么影响？ #比特币 #减半 #加密货币',
|
|
||||||
timestamp: '1小时前',
|
|
||||||
likes: 128,
|
|
||||||
comments: 43,
|
|
||||||
reposts: 21,
|
|
||||||
isLiked: false,
|
|
||||||
tags: ['比特币', '减半', '加密货币'],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
author: {
|
|
||||||
name: 'ETH_Developer',
|
|
||||||
avatar: 'https://api.dicebear.com/7.x/shapes/svg?seed=ETH_Developer',
|
|
||||||
verified: true,
|
|
||||||
},
|
|
||||||
content: '以太坊过去24小时的Gas费用达到了近期最低点。现在是进行链上交易的好时机！',
|
|
||||||
timestamp: '3小时前',
|
|
||||||
likes: 76,
|
|
||||||
comments: 12,
|
|
||||||
reposts: 8,
|
|
||||||
isLiked: true,
|
|
||||||
tags: ['以太坊', 'Gas费用'],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
author: {
|
|
||||||
name: 'DeFi_Master',
|
|
||||||
avatar: 'https://api.dicebear.com/7.x/shapes/svg?seed=DeFi_Master',
|
|
||||||
verified: false,
|
|
||||||
},
|
|
||||||
content:
|
|
||||||
'刚刚研究了一个新的DeFi项目，提供了非常具有竞争力的流动性挖矿回报。大家有兴趣了解更多吗？',
|
|
||||||
timestamp: '5小时前',
|
|
||||||
likes: 54,
|
|
||||||
comments: 31,
|
|
||||||
reposts: 4,
|
|
||||||
isLiked: false,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 4,
|
|
||||||
author: {
|
|
||||||
name: 'NFT_Collector',
|
|
||||||
avatar: 'https://api.dicebear.com/7.x/shapes/svg?seed=NFT_Collector',
|
|
||||||
verified: true,
|
|
||||||
},
|
|
||||||
content:
|
|
||||||
'刚刚收购了一个稀有的蓝筹NFT！这是我收藏的最新成员。艺术和区块链的结合真的很令人兴奋！',
|
|
||||||
timestamp: '6小时前',
|
|
||||||
likes: 92,
|
|
||||||
comments: 14,
|
|
||||||
reposts: 7,
|
|
||||||
isLiked: false,
|
|
||||||
images: ['https://picsum.photos/id/29/600/400'],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 5,
|
|
||||||
author: {
|
|
||||||
name: 'Crypto_News',
|
|
||||||
avatar: 'https://api.dicebear.com/7.x/shapes/svg?seed=Crypto_News',
|
|
||||||
verified: true,
|
|
||||||
},
|
|
||||||
content:
|
|
||||||
'重大新闻：SEC批准了第一个比特币现货ETF！这对加密市场的监管和机构采用是一个重要的进展。 #比特币ETF #SEC #加密监管',
|
|
||||||
timestamp: '12小时前',
|
|
||||||
likes: 215,
|
|
||||||
comments: 87,
|
|
||||||
reposts: 56,
|
|
||||||
isLiked: true,
|
|
||||||
tags: ['比特币ETF', 'SEC', '加密监管'],
|
|
||||||
},
|
|
||||||
])
|
|
||||||
|
|
||||||
const toggleLike = (postId: number) => {
|
|
||||||
const post = posts.value.find((p) => p.id === postId)
|
|
||||||
if (post) {
|
|
||||||
post.isLiked = !post.isLiked
|
|
||||||
post.likes += post.isLiked ? 1 : -1
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const createPost = () => {
|
|
||||||
if (!newPostContent.value.trim()) return
|
|
||||||
|
|
||||||
const newPost: Post = {
|
|
||||||
id: posts.value.length + 1,
|
|
||||||
author: {
|
|
||||||
name: '当前用户',
|
|
||||||
avatar: 'https://api.dicebear.com/7.x/shapes/svg?seed=CurrentUser',
|
|
||||||
verified: false,
|
|
||||||
},
|
|
||||||
content: newPostContent.value,
|
|
||||||
timestamp: '刚刚',
|
|
||||||
likes: 0,
|
|
||||||
comments: 0,
|
|
||||||
reposts: 0,
|
|
||||||
isLiked: false,
|
|
||||||
}
|
|
||||||
|
|
||||||
posts.value.unshift(newPost)
|
|
||||||
newPostContent.value = ''
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="community-view">
|
|
||||||
<h1 class="page-title">社区</h1>
|
|
||||||
<p class="page-description">与加密货币爱好者交流，分享见解和最新动态</p>
|
|
||||||
|
|
||||||
<div class="community-layout">
|
|
||||||
<div class="main-content">
|
|
||||||
<div class="feed-tabs">
|
|
||||||
<button
|
|
||||||
class="tab-btn"
|
|
||||||
:class="{ active: filter === 'for-you' }"
|
|
||||||
@click="filter = 'for-you'"
|
|
||||||
>
|
|
||||||
为你推荐
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="tab-btn"
|
|
||||||
:class="{ active: filter === 'following' }"
|
|
||||||
@click="filter = 'following'"
|
|
||||||
>
|
|
||||||
关注
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="tab-btn"
|
|
||||||
:class="{ active: filter === 'trending' }"
|
|
||||||
@click="filter = 'trending'"
|
|
||||||
>
|
|
||||||
热门话题
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="post-creator">
|
|
||||||
<div class="post-input-container">
|
|
||||||
<img
|
|
||||||
src="https://api.dicebear.com/7.x/shapes/svg?seed=CurrentUser"
|
|
||||||
alt="User Avatar"
|
|
||||||
class="user-avatar"
|
|
||||||
/>
|
|
||||||
<textarea
|
|
||||||
v-model="newPostContent"
|
|
||||||
placeholder="分享你的加密见解..."
|
|
||||||
class="post-input"
|
|
||||||
></textarea>
|
|
||||||
</div>
|
|
||||||
<div class="post-actions">
|
|
||||||
<div class="post-tools">
|
|
||||||
<button class="tool-btn">📷</button>
|
|
||||||
<button class="tool-btn">🔗</button>
|
|
||||||
<button class="tool-btn">#️⃣</button>
|
|
||||||
</div>
|
|
||||||
<button
|
|
||||||
class="btn btn-primary post-btn"
|
|
||||||
@click="createPost"
|
|
||||||
:disabled="!newPostContent.trim()"
|
|
||||||
>
|
|
||||||
发布
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="posts-feed">
|
|
||||||
<div v-for="post in posts" :key="post.id" class="post-card">
|
|
||||||
<div class="post-header">
|
|
||||||
<img :src="post.author.avatar" alt="User Avatar" class="post-avatar" />
|
|
||||||
<div class="post-author">
|
|
||||||
<div class="author-name">
|
|
||||||
{{ post.author.name }}
|
|
||||||
<span v-if="post.author.verified" class="verified-badge">✓</span>
|
|
||||||
</div>
|
|
||||||
<span class="post-time">{{ post.timestamp }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="post-content">
|
|
||||||
<p>{{ post.content }}</p>
|
|
||||||
<div v-if="post.images && post.images.length" class="post-images">
|
|
||||||
<img
|
|
||||||
v-for="(img, index) in post.images"
|
|
||||||
:key="index"
|
|
||||||
:src="img"
|
|
||||||
alt="Post image"
|
|
||||||
class="post-image"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div v-if="post.tags && post.tags.length" class="post-tags">
|
|
||||||
<span v-for="(tag, index) in post.tags" :key="index" class="post-tag">
|
|
||||||
#{{ tag }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="post-footer">
|
|
||||||
<button
|
|
||||||
class="post-action"
|
|
||||||
:class="{ active: post.isLiked }"
|
|
||||||
@click="toggleLike(post.id)"
|
|
||||||
>
|
|
||||||
<span class="action-icon">❤️</span>
|
|
||||||
<span class="action-count">{{ post.likes }}</span>
|
|
||||||
</button>
|
|
||||||
<button class="post-action">
|
|
||||||
<span class="action-icon">💬</span>
|
|
||||||
<span class="action-count">{{ post.comments }}</span>
|
|
||||||
</button>
|
|
||||||
<button class="post-action">
|
|
||||||
<span class="action-icon">🔄</span>
|
|
||||||
<span class="action-count">{{ post.reposts }}</span>
|
|
||||||
</button>
|
|
||||||
<button class="post-action">
|
|
||||||
<span class="action-icon">📤</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="sidebar">
|
|
||||||
<div class="sidebar-section">
|
|
||||||
<h3 class="sidebar-title">热门话题</h3>
|
|
||||||
<ul class="trending-list">
|
|
||||||
<li class="trending-item">
|
|
||||||
<div class="trending-tag">#比特币减半</div>
|
|
||||||
<div class="trending-stats">12.5K 帖子</div>
|
|
||||||
</li>
|
|
||||||
<li class="trending-item">
|
|
||||||
<div class="trending-tag">#以太坊2.0</div>
|
|
||||||
<div class="trending-stats">8.3K 帖子</div>
|
|
||||||
</li>
|
|
||||||
<li class="trending-item">
|
|
||||||
<div class="trending-tag">#DeFi夏天</div>
|
|
||||||
<div class="trending-stats">6.7K 帖子</div>
|
|
||||||
</li>
|
|
||||||
<li class="trending-item">
|
|
||||||
<div class="trending-tag">#NFT艺术</div>
|
|
||||||
<div class="trending-stats">5.2K 帖子</div>
|
|
||||||
</li>
|
|
||||||
<li class="trending-item">
|
|
||||||
<div class="trending-tag">#Layer2扩容</div>
|
|
||||||
<div class="trending-stats">3.9K 帖子</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="sidebar-section">
|
|
||||||
<h3 class="sidebar-title">推荐关注</h3>
|
|
||||||
<ul class="suggested-users">
|
|
||||||
<li class="user-item">
|
|
||||||
<img
|
|
||||||
src="https://api.dicebear.com/7.x/shapes/svg?seed=VitalikB"
|
|
||||||
alt="User Avatar"
|
|
||||||
class="user-avatar-small"
|
|
||||||
/>
|
|
||||||
<div class="user-info">
|
|
||||||
<div class="user-name">
|
|
||||||
Vitalik.eth
|
|
||||||
<span class="verified-badge-small">✓</span>
|
|
||||||
</div>
|
|
||||||
<div class="user-handle">@VitalikButerin</div>
|
|
||||||
</div>
|
|
||||||
<button class="btn btn-secondary btn-small">关注</button>
|
|
||||||
</li>
|
|
||||||
<li class="user-item">
|
|
||||||
<img
|
|
||||||
src="https://api.dicebear.com/7.x/shapes/svg?seed=SBF"
|
|
||||||
alt="User Avatar"
|
|
||||||
class="user-avatar-small"
|
|
||||||
/>
|
|
||||||
<div class="user-info">
|
|
||||||
<div class="user-name">CZ Binance</div>
|
|
||||||
<div class="user-handle">@cz_binance</div>
|
|
||||||
</div>
|
|
||||||
<button class="btn btn-secondary btn-small">关注</button>
|
|
||||||
</li>
|
|
||||||
<li class="user-item">
|
|
||||||
<img
|
|
||||||
src="https://api.dicebear.com/7.x/shapes/svg?seed=ElonM"
|
|
||||||
alt="User Avatar"
|
|
||||||
class="user-avatar-small"
|
|
||||||
/>
|
|
||||||
<div class="user-info">
|
|
||||||
<div class="user-name">
|
|
||||||
Elon Musk
|
|
||||||
<span class="verified-badge-small">✓</span>
|
|
||||||
</div>
|
|
||||||
<div class="user-handle">@elonmusk</div>
|
|
||||||
</div>
|
|
||||||
<button class="btn btn-secondary btn-small">关注</button>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.community-view {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 1440px;
|
|
||||||
margin: 0 auto;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 350px;
|
|
||||||
gap: 2rem;
|
|
||||||
padding: 0 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-title {
|
|
||||||
font-size: 2.2rem;
|
|
||||||
font-weight: 700;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-description {
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.community-layout {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 2rem;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-content {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 0;
|
|
||||||
flex-basis: 65%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feed-tabs {
|
|
||||||
display: flex;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
border-bottom: 1px solid var(--color-border);
|
|
||||||
width: 100%;
|
|
||||||
overflow-x: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-btn {
|
|
||||||
background: transparent;
|
|
||||||
border: none;
|
|
||||||
padding: 1rem 1.5rem;
|
|
||||||
font-size: 1rem;
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
position: relative;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-btn:hover {
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-btn.active {
|
|
||||||
color: var(--color-accent);
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-btn.active::after {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
bottom: -1px;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 2px;
|
|
||||||
background-color: var(--color-accent);
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-creator {
|
|
||||||
background-color: var(--color-bg-card);
|
|
||||||
padding: 1.5rem;
|
|
||||||
border-radius: var(--border-radius);
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
border: 1px solid var(--color-border);
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-input-container {
|
|
||||||
display: flex;
|
|
||||||
gap: 1rem;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-avatar {
|
|
||||||
width: 48px;
|
|
||||||
height: 48px;
|
|
||||||
border-radius: 50%;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-input {
|
|
||||||
flex: 1;
|
|
||||||
background-color: var(--color-bg-primary);
|
|
||||||
border: 1px solid var(--color-border);
|
|
||||||
border-radius: var(--border-radius);
|
|
||||||
padding: 0.8rem;
|
|
||||||
color: var(--color-text-primary);
|
|
||||||
font-size: 1rem;
|
|
||||||
min-height: 100px;
|
|
||||||
resize: vertical;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-actions {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-tools {
|
|
||||||
display: flex;
|
|
||||||
gap: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tool-btn {
|
|
||||||
background-color: transparent;
|
|
||||||
border: none;
|
|
||||||
width: 38px;
|
|
||||||
height: 38px;
|
|
||||||
border-radius: 50%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: background-color 0.2s ease;
|
|
||||||
font-size: 1.2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tool-btn:hover {
|
|
||||||
background-color: rgba(255, 255, 255, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-btn {
|
|
||||||
padding: 0.6rem 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.posts-feed {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-card {
|
|
||||||
background-color: var(--color-bg-card);
|
|
||||||
border-radius: var(--border-radius);
|
|
||||||
padding: 1.5rem;
|
|
||||||
border: 1px solid var(--color-border);
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-card:hover {
|
|
||||||
border-color: var(--color-accent);
|
|
||||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-header {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 1rem;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-avatar {
|
|
||||||
width: 48px;
|
|
||||||
height: 48px;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-author {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.author-name {
|
|
||||||
font-weight: 600;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.verified-badge {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
background-color: var(--color-accent);
|
|
||||||
color: white;
|
|
||||||
border-radius: 50%;
|
|
||||||
font-size: 0.7rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-time {
|
|
||||||
font-size: 0.9rem;
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-content {
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-content p {
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-images {
|
|
||||||
margin-top: 1rem;
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 0.5rem;
|
|
||||||
border-radius: var(--border-radius);
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-image {
|
|
||||||
max-width: 100%;
|
|
||||||
height: auto;
|
|
||||||
object-fit: cover;
|
|
||||||
flex: 1;
|
|
||||||
min-width: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-tags {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 0.5rem;
|
|
||||||
margin-top: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-tag {
|
|
||||||
color: var(--color-accent);
|
|
||||||
font-size: 0.9rem;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-tag:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-footer {
|
|
||||||
display: flex;
|
|
||||||
gap: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-action {
|
|
||||||
background-color: transparent;
|
|
||||||
border: none;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
cursor: pointer;
|
|
||||||
transition: color 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.post-action:hover,
|
|
||||||
.post-action.active {
|
|
||||||
color: var(--color-accent);
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-icon {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Sidebar Styling */
|
|
||||||
.sidebar {
|
|
||||||
width: 300px;
|
|
||||||
position: sticky;
|
|
||||||
top: calc(var(--header-height) + 1rem);
|
|
||||||
align-self: flex-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-section {
|
|
||||||
background-color: var(--color-bg-card);
|
|
||||||
border-radius: var(--border-radius);
|
|
||||||
padding: 1.5rem;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
border: 1px solid var(--color-border);
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-title {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
font-weight: 600;
|
|
||||||
margin-bottom: 1.2rem;
|
|
||||||
padding-bottom: 0.8rem;
|
|
||||||
border-bottom: 1px solid var(--color-border);
|
|
||||||
}
|
|
||||||
|
|
||||||
.trending-list,
|
|
||||||
.suggested-users {
|
|
||||||
list-style: none;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.trending-item {
|
|
||||||
padding: 0.8rem 0;
|
|
||||||
border-bottom: 1px solid var(--color-border);
|
|
||||||
}
|
|
||||||
|
|
||||||
.trending-item:last-child {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.trending-tag {
|
|
||||||
font-weight: 600;
|
|
||||||
margin-bottom: 0.3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.trending-stats {
|
|
||||||
font-size: 0.9rem;
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.8rem;
|
|
||||||
padding: 0.8rem 0;
|
|
||||||
border-bottom: 1px solid var(--color-border);
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-item:last-child {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-avatar-small {
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-info {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-name {
|
|
||||||
font-weight: 600;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.verified-badge-small {
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 14px;
|
|
||||||
height: 14px;
|
|
||||||
background-color: var(--color-accent);
|
|
||||||
color: white;
|
|
||||||
border-radius: 50%;
|
|
||||||
font-size: 0.6rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.user-handle {
|
|
||||||
font-size: 0.9rem;
|
|
||||||
color: var(--color-text-secondary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-small {
|
|
||||||
padding: 0.3rem 0.8rem;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1200px) {
|
|
||||||
.community-view {
|
|
||||||
grid-template-columns: 1fr 300px;
|
|
||||||
gap: 1.5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 980px) {
|
|
||||||
.community-view {
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
gap: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -5,42 +5,14 @@
|
|||||||
<section class="hero-section">
|
<section class="hero-section">
|
||||||
<div class="hero-content">
|
<div class="hero-content">
|
||||||
<h1 class="hero-title">Crypto.AI <span class="accent">加密货币工具平台</span></h1>
|
<h1 class="hero-title">Crypto.AI <span class="accent">加密货币工具平台</span></h1>
|
||||||
<p class="hero-subtitle">一站式加密货币工具集合、AI分析和社区互动平台</p>
|
<p class="hero-subtitle">一站式加密货币工具集合和AI分析平台</p>
|
||||||
<div class="hero-actions">
|
<!-- <div class="hero-actions">
|
||||||
<button class="btn btn-primary">探索工具</button>
|
<button class="btn btn-primary">探索工具</button>
|
||||||
<button class="btn btn-secondary">加入社区</button>
|
</div> -->
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="features-section">
|
|
||||||
<div class="feature-card card">
|
|
||||||
<div class="feature-icon">🛠️</div>
|
|
||||||
<h3 class="feature-title">工具集合</h3>
|
|
||||||
<p class="feature-desc">批量钱包创建、钱包归集等实用工具，助您高效管理加密资产</p>
|
|
||||||
<button class="btn-action">了解更多</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="feature-card card">
|
|
||||||
<div class="feature-icon">🤖</div>
|
|
||||||
<h3 class="feature-title">AI Agent</h3>
|
|
||||||
<p class="feature-desc">加密项目医生与币种技术分析，让您的投资决策更明智</p>
|
|
||||||
<button class="btn-action">了解更多</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="feature-card card">
|
|
||||||
<div class="feature-icon">👥</div>
|
|
||||||
<h3 class="feature-title">社区互动</h3>
|
|
||||||
<p class="feature-desc">类似微博的信息流，实时了解行业动态，分享您的见解</p>
|
|
||||||
<button class="btn-action">了解更多</button>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="stats-section">
|
<section class="stats-section">
|
||||||
<div class="stats-header">
|
|
||||||
<h2>平台数据</h2>
|
|
||||||
<p>实时数据</p>
|
|
||||||
</div>
|
|
||||||
<div class="stats-grid">
|
<div class="stats-grid">
|
||||||
<div class="stat-card card">
|
<div class="stat-card card">
|
||||||
<div class="stat-value">10,000+</div>
|
<div class="stat-value">10,000+</div>
|
||||||
@ -50,10 +22,6 @@
|
|||||||
<div class="stat-value">5,000+</div>
|
<div class="stat-value">5,000+</div>
|
||||||
<div class="stat-label">项目已分析</div>
|
<div class="stat-label">项目已分析</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="stat-card card">
|
|
||||||
<div class="stat-value">20,000+</div>
|
|
||||||
<div class="stat-label">社区成员</div>
|
|
||||||
</div>
|
|
||||||
<div class="stat-card card">
|
<div class="stat-card card">
|
||||||
<div class="stat-value">99.9%</div>
|
<div class="stat-value">99.9%</div>
|
||||||
<div class="stat-label">正常运行时间</div>
|
<div class="stat-label">正常运行时间</div>
|
||||||
|
|||||||
@ -7,14 +7,20 @@ import vueDevTools from 'vite-plugin-vue-devtools'
|
|||||||
|
|
||||||
// https://vite.dev/config/
|
// https://vite.dev/config/
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
plugins: [
|
plugins: [vue(), vueJsx(), vueDevTools()],
|
||||||
vue(),
|
|
||||||
vueJsx(),
|
|
||||||
vueDevTools(),
|
|
||||||
],
|
|
||||||
resolve: {
|
resolve: {
|
||||||
alias: {
|
alias: {
|
||||||
'@': fileURLToPath(new URL('./src', import.meta.url))
|
'@': fileURLToPath(new URL('./src', import.meta.url)),
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
build: {
|
||||||
|
minify: 'terser',
|
||||||
|
terserOptions: {
|
||||||
|
compress: {
|
||||||
|
drop_console: true,
|
||||||
|
drop_debugger: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
sourcemap: false,
|
||||||
|
},
|
||||||
})
|
})
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user