R524809
1289 lines
44 KiB
HTML
1289 lines
44 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>思投录 (VestMind) - PC Web端</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
:root {
|
|
--primary-color: #8b5cf6;
|
|
--primary-light: #a78bfa;
|
|
--primary-dark: #7c3aed;
|
|
--text-primary: #1f2937;
|
|
--text-secondary: #6b7280;
|
|
--bg-color: #f9fafb;
|
|
--card-bg: #ffffff;
|
|
--border-color: #e5e7eb;
|
|
--profit-color: #ef4444;
|
|
--loss-color: #10b981;
|
|
--shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
|
|
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
|
--sidebar-width: 240px;
|
|
--header-height: 64px;
|
|
}
|
|
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
|
|
background-color: var(--bg-color);
|
|
color: var(--text-primary);
|
|
line-height: 1.6;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* 布局容器 */
|
|
.app-layout {
|
|
display: flex;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
/* 侧边栏 */
|
|
.sidebar {
|
|
width: var(--sidebar-width);
|
|
background: linear-gradient(180deg, #8b5cf6 0%, #7c3aed 100%);
|
|
color: white;
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
height: 100vh;
|
|
overflow-y: auto;
|
|
box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
|
|
z-index: 1000;
|
|
}
|
|
|
|
.sidebar-header {
|
|
padding: 24px 20px;
|
|
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.logo {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.logo-subtitle {
|
|
font-size: 12px;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.nav-menu {
|
|
padding: 16px 0;
|
|
}
|
|
|
|
.nav-item {
|
|
padding: 12px 20px;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.nav-item:hover {
|
|
background: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.nav-item.active {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
border-left: 3px solid white;
|
|
}
|
|
|
|
.nav-item-icon {
|
|
width: 20px;
|
|
height: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.nav-divider {
|
|
height: 1px;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
margin: 8px 20px;
|
|
}
|
|
|
|
.nav-section-title {
|
|
padding: 12px 20px 8px;
|
|
font-size: 12px;
|
|
opacity: 0.7;
|
|
text-transform: uppercase;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
/* 主内容区 */
|
|
.main-content {
|
|
flex: 1;
|
|
margin-left: var(--sidebar-width);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* 顶部栏 */
|
|
.header {
|
|
height: var(--header-height);
|
|
background: white;
|
|
border-bottom: 1px solid var(--border-color);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 24px;
|
|
box-shadow: var(--shadow);
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 100;
|
|
}
|
|
|
|
.header-left {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
}
|
|
|
|
.page-title {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.page-subtitle {
|
|
font-size: 14px;
|
|
color: var(--text-secondary);
|
|
font-style: italic;
|
|
}
|
|
|
|
.header-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
}
|
|
|
|
.user-info {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
cursor: pointer;
|
|
padding: 8px 12px;
|
|
border-radius: 8px;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.user-info:hover {
|
|
background: var(--bg-color);
|
|
}
|
|
|
|
.user-avatar {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, #8b5cf6, #7c3aed);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.user-details {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.user-name {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.user-role {
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.role-badge {
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.role-badge.admin {
|
|
background: #fef3c7;
|
|
color: #92400e;
|
|
}
|
|
|
|
.role-badge.user {
|
|
background: #dbeafe;
|
|
color: #1e40af;
|
|
}
|
|
|
|
/* 内容区域 */
|
|
.content-area {
|
|
flex: 1;
|
|
padding: 24px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* 卡片样式 */
|
|
.card {
|
|
background: var(--card-bg);
|
|
border-radius: 12px;
|
|
padding: 24px;
|
|
margin-bottom: 24px;
|
|
box-shadow: var(--shadow);
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.card-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.btn {
|
|
padding: 8px 16px;
|
|
border-radius: 6px;
|
|
border: none;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
transition: all 0.2s;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
.btn-primary {
|
|
background: var(--primary-color);
|
|
color: white;
|
|
}
|
|
|
|
.btn-primary:hover {
|
|
background: var(--primary-dark);
|
|
}
|
|
|
|
.btn-secondary {
|
|
background: var(--bg-color);
|
|
color: var(--text-primary);
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.btn-secondary:hover {
|
|
background: var(--border-color);
|
|
}
|
|
|
|
/* 统计卡片 */
|
|
.stats-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
gap: 20px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.stat-card {
|
|
background: var(--card-bg);
|
|
border-radius: 12px;
|
|
padding: 20px;
|
|
box-shadow: var(--shadow);
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.stat-label {
|
|
font-size: 14px;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.stat-value {
|
|
font-size: 28px;
|
|
font-weight: 700;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.stat-change {
|
|
font-size: 12px;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.stat-change.positive {
|
|
color: var(--profit-color);
|
|
}
|
|
|
|
.stat-change.negative {
|
|
color: var(--loss-color);
|
|
}
|
|
|
|
/* 表格样式 */
|
|
.table-container {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
thead {
|
|
background: var(--bg-color);
|
|
}
|
|
|
|
th {
|
|
padding: 12px;
|
|
text-align: left;
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
color: var(--text-secondary);
|
|
border-bottom: 2px solid var(--border-color);
|
|
}
|
|
|
|
td {
|
|
padding: 12px;
|
|
border-bottom: 1px solid var(--border-color);
|
|
font-size: 14px;
|
|
}
|
|
|
|
tr:hover {
|
|
background: var(--bg-color);
|
|
}
|
|
|
|
/* 图表容器 */
|
|
.chart-container {
|
|
width: 100%;
|
|
height: 400px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
/* 页面内容 - 默认隐藏 */
|
|
.page-content {
|
|
display: none;
|
|
}
|
|
|
|
.page-content.active {
|
|
display: block;
|
|
}
|
|
|
|
/* 持仓列表 */
|
|
.position-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 16px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
margin-bottom: 12px;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.position-item:hover {
|
|
box-shadow: var(--shadow);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.position-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.position-name {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.position-code {
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.position-stats {
|
|
text-align: right;
|
|
}
|
|
|
|
.position-value {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.position-profit {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.position-profit.positive {
|
|
color: var(--profit-color);
|
|
}
|
|
|
|
.position-profit.negative {
|
|
color: var(--loss-color);
|
|
}
|
|
|
|
/* 计划卡片 */
|
|
.plan-card {
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
margin-bottom: 16px;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.plan-card:hover {
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.plan-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: start;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.plan-title {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.plan-status {
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.plan-status.pending {
|
|
background: #fef3c7;
|
|
color: #92400e;
|
|
}
|
|
|
|
.plan-status.executing {
|
|
background: #dbeafe;
|
|
color: #1e40af;
|
|
}
|
|
|
|
.plan-status.completed {
|
|
background: #d1fae5;
|
|
color: #065f46;
|
|
}
|
|
|
|
.plan-details {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
|
gap: 12px;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.plan-detail-item {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.plan-detail-label {
|
|
color: var(--text-secondary);
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.plan-detail-value {
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* 复盘时间线 */
|
|
.timeline {
|
|
position: relative;
|
|
padding-left: 24px;
|
|
}
|
|
|
|
.timeline::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 8px;
|
|
top: 0;
|
|
bottom: 0;
|
|
width: 2px;
|
|
background: var(--border-color);
|
|
}
|
|
|
|
.timeline-item {
|
|
position: relative;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.timeline-dot {
|
|
position: absolute;
|
|
left: -20px;
|
|
top: 4px;
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
background: var(--primary-color);
|
|
border: 2px solid white;
|
|
box-shadow: 0 0 0 2px var(--primary-color);
|
|
}
|
|
|
|
.timeline-content {
|
|
background: var(--card-bg);
|
|
border-radius: 8px;
|
|
padding: 16px;
|
|
border: 1px solid var(--border-color);
|
|
}
|
|
|
|
.timeline-date {
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.timeline-text {
|
|
font-size: 14px;
|
|
line-height: 1.6;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
/* SEO配置表单 */
|
|
.form-group {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.form-label {
|
|
display: block;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
margin-bottom: 8px;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.form-input {
|
|
width: 100%;
|
|
padding: 10px 12px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
font-size: 14px;
|
|
transition: border-color 0.2s;
|
|
}
|
|
|
|
.form-input:focus {
|
|
outline: none;
|
|
border-color: var(--primary-color);
|
|
}
|
|
|
|
.form-textarea {
|
|
width: 100%;
|
|
padding: 10px 12px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 6px;
|
|
font-size: 14px;
|
|
min-height: 100px;
|
|
resize: vertical;
|
|
font-family: inherit;
|
|
}
|
|
|
|
.form-textarea:focus {
|
|
outline: none;
|
|
border-color: var(--primary-color);
|
|
}
|
|
|
|
/* 数据统计 */
|
|
.metric-card {
|
|
background: var(--card-bg);
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
border: 1px solid var(--border-color);
|
|
text-align: center;
|
|
}
|
|
|
|
.metric-value {
|
|
font-size: 32px;
|
|
font-weight: 700;
|
|
color: var(--primary-color);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.metric-label {
|
|
font-size: 14px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
/* 响应式 */
|
|
@media (max-width: 768px) {
|
|
.sidebar {
|
|
transform: translateX(-100%);
|
|
transition: transform 0.3s;
|
|
}
|
|
|
|
.sidebar.open {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
.main-content {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.stats-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
|
|
/* 空状态 */
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: 60px 20px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.empty-icon {
|
|
font-size: 48px;
|
|
margin-bottom: 16px;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.empty-text {
|
|
font-size: 16px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.empty-hint {
|
|
font-size: 14px;
|
|
opacity: 0.7;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="app-layout">
|
|
<!-- 侧边栏 -->
|
|
<aside class="sidebar">
|
|
<div class="sidebar-header">
|
|
<div class="logo">思投录</div>
|
|
<div class="logo-subtitle">VestMind</div>
|
|
</div>
|
|
<nav class="nav-menu">
|
|
<div class="nav-section-title">主要功能</div>
|
|
<div class="nav-item active" data-page="assets">
|
|
<span class="nav-item-icon">📊</span>
|
|
<span>资产账户</span>
|
|
</div>
|
|
<div class="nav-item" data-page="plans">
|
|
<span class="nav-item-icon">📋</span>
|
|
<span>交易计划</span>
|
|
</div>
|
|
<div class="nav-item" data-page="review">
|
|
<span class="nav-item-icon">📝</span>
|
|
<span>投资复盘</span>
|
|
</div>
|
|
<div class="nav-divider"></div>
|
|
<div class="nav-section-title" id="admin-section-title" style="display: none;">管理员功能</div>
|
|
<div class="nav-item" data-page="seo" id="nav-seo" style="display: none;">
|
|
<span class="nav-item-icon">⚙️</span>
|
|
<span>SEO配置</span>
|
|
</div>
|
|
<div class="nav-item" data-page="analytics" id="nav-analytics" style="display: none;">
|
|
<span class="nav-item-icon">📈</span>
|
|
<span>数据统计</span>
|
|
</div>
|
|
</nav>
|
|
</aside>
|
|
|
|
<!-- 主内容区 -->
|
|
<main class="main-content">
|
|
<!-- 顶部栏 -->
|
|
<header class="header">
|
|
<div class="header-left">
|
|
<div>
|
|
<div class="page-title" id="current-page-title">资产账户</div>
|
|
<div class="page-subtitle" id="current-page-subtitle">买股票就是买公司</div>
|
|
</div>
|
|
</div>
|
|
<div class="header-right">
|
|
<div class="user-info" onclick="toggleRole()">
|
|
<div class="user-avatar" id="user-avatar">U</div>
|
|
<div class="user-details">
|
|
<div class="user-name">用户名</div>
|
|
<div class="user-role">
|
|
<span class="role-badge user" id="role-badge">普通用户</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- 内容区域 -->
|
|
<div class="content-area">
|
|
<!-- 资产账户页面 -->
|
|
<div class="page-content active" id="page-assets">
|
|
<!-- 统计卡片 -->
|
|
<div class="stats-grid">
|
|
<div class="stat-card">
|
|
<div class="stat-label">总资产</div>
|
|
<div class="stat-value">¥1,234,567</div>
|
|
<div class="stat-change positive">+2.5% 今日</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-label">累计收益</div>
|
|
<div class="stat-value">¥234,567</div>
|
|
<div class="stat-change positive">+23.4%</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-label">累计收益率</div>
|
|
<div class="stat-value">23.4%</div>
|
|
<div class="stat-change positive">+2.3%</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-label">记账时长</div>
|
|
<div class="stat-value">300天</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 图表 -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="card-title">资产趋势</div>
|
|
</div>
|
|
<div class="chart-container" id="assets-chart"></div>
|
|
</div>
|
|
|
|
<!-- 持仓列表 -->
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="card-title">我的持仓</div>
|
|
<button class="btn btn-primary">+ 添加资产</button>
|
|
</div>
|
|
<div class="position-item">
|
|
<div class="position-info">
|
|
<div class="position-name">贵州茅台</div>
|
|
<div class="position-code">600519 · 上海 · 华泰证券</div>
|
|
</div>
|
|
<div class="position-stats">
|
|
<div class="position-value">¥456,789</div>
|
|
<div class="position-profit positive">+¥56,789 (+14.2%)</div>
|
|
</div>
|
|
</div>
|
|
<div class="position-item">
|
|
<div class="position-info">
|
|
<div class="position-name">腾讯控股</div>
|
|
<div class="position-code">00700 · 香港 · 富途证券</div>
|
|
</div>
|
|
<div class="position-stats">
|
|
<div class="position-value">¥345,678</div>
|
|
<div class="position-profit positive">+¥45,678 (+15.2%)</div>
|
|
</div>
|
|
</div>
|
|
<div class="position-item">
|
|
<div class="position-info">
|
|
<div class="position-name">苹果公司</div>
|
|
<div class="position-code">AAPL · 美股 · 盈透证券</div>
|
|
</div>
|
|
<div class="position-stats">
|
|
<div class="position-value">¥432,100</div>
|
|
<div class="position-profit negative">-¥12,100 (-2.7%)</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 交易计划页面 -->
|
|
<div class="page-content" id="page-plans">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="card-title">交易计划</div>
|
|
<button class="btn btn-primary">+ 创建计划</button>
|
|
</div>
|
|
<div class="plan-card">
|
|
<div class="plan-header">
|
|
<div class="plan-title">买入贵州茅台</div>
|
|
<span class="plan-status executing">执行中</span>
|
|
</div>
|
|
<div class="plan-details">
|
|
<div class="plan-detail-item">
|
|
<div class="plan-detail-label">目标价格</div>
|
|
<div class="plan-detail-value">¥1,800</div>
|
|
</div>
|
|
<div class="plan-detail-item">
|
|
<div class="plan-detail-label">计划金额</div>
|
|
<div class="plan-detail-value">¥100,000</div>
|
|
</div>
|
|
<div class="plan-detail-item">
|
|
<div class="plan-detail-label">截止时间</div>
|
|
<div class="plan-detail-value">2024-12-31</div>
|
|
</div>
|
|
<div class="plan-detail-item">
|
|
<div class="plan-detail-label">完成进度</div>
|
|
<div class="plan-detail-value">60%</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="plan-card">
|
|
<div class="plan-header">
|
|
<div class="plan-title">买入腾讯控股</div>
|
|
<span class="plan-status pending">待执行</span>
|
|
</div>
|
|
<div class="plan-details">
|
|
<div class="plan-detail-item">
|
|
<div class="plan-detail-label">目标价格</div>
|
|
<div class="plan-detail-value">HK$380</div>
|
|
</div>
|
|
<div class="plan-detail-item">
|
|
<div class="plan-detail-label">计划金额</div>
|
|
<div class="plan-detail-value">¥50,000</div>
|
|
</div>
|
|
<div class="plan-detail-item">
|
|
<div class="plan-detail-label">截止时间</div>
|
|
<div class="plan-detail-value">2024-11-30</div>
|
|
</div>
|
|
<div class="plan-detail-item">
|
|
<div class="plan-detail-label">完成进度</div>
|
|
<div class="plan-detail-value">0%</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="plan-card">
|
|
<div class="plan-header">
|
|
<div class="plan-title">卖出苹果公司</div>
|
|
<span class="plan-status completed">已完成</span>
|
|
</div>
|
|
<div class="plan-details">
|
|
<div class="plan-detail-item">
|
|
<div class="plan-detail-label">目标价格</div>
|
|
<div class="plan-detail-value">$180</div>
|
|
</div>
|
|
<div class="plan-detail-item">
|
|
<div class="plan-detail-label">计划金额</div>
|
|
<div class="plan-detail-value">¥200,000</div>
|
|
</div>
|
|
<div class="plan-detail-item">
|
|
<div class="plan-detail-label">完成时间</div>
|
|
<div class="plan-detail-value">2024-10-15</div>
|
|
</div>
|
|
<div class="plan-detail-item">
|
|
<div class="plan-detail-label">完成进度</div>
|
|
<div class="plan-detail-value">100%</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 投资复盘页面 -->
|
|
<div class="page-content" id="page-review">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="card-title">投资复盘</div>
|
|
<button class="btn btn-primary">+ 记录复盘</button>
|
|
</div>
|
|
<div class="timeline">
|
|
<div class="timeline-item">
|
|
<div class="timeline-dot"></div>
|
|
<div class="timeline-content">
|
|
<div class="timeline-date">2024-10-20</div>
|
|
<div class="timeline-text">
|
|
<strong>买入贵州茅台</strong><br>
|
|
今天以¥1,750的价格买入了100股贵州茅台。主要考虑是：1）茅台作为白酒龙头，品牌价值难以复制；2）当前估值相对合理；3）长期看好消费升级趋势。计划持有3-5年。
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="timeline-item">
|
|
<div class="timeline-dot"></div>
|
|
<div class="timeline-content">
|
|
<div class="timeline-date">2024-09-15</div>
|
|
<div class="timeline-text">
|
|
<strong>卖出部分腾讯控股</strong><br>
|
|
以HK$350的价格卖出了200股腾讯控股，主要是为了锁定部分利润。虽然长期看好，但考虑到当前市场环境，决定降低仓位。剩余持仓继续持有。
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="timeline-item">
|
|
<div class="timeline-dot"></div>
|
|
<div class="timeline-content">
|
|
<div class="timeline-date">2024-08-01</div>
|
|
<div class="timeline-text">
|
|
<strong>月度复盘</strong><br>
|
|
本月整体收益+5.2%，主要贡献来自腾讯和茅台的上涨。需要反思的是：1）对市场波动反应过度，频繁交易；2）应该更专注于长期价值投资；3）需要建立更系统的投资检查清单。
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SEO配置页面（管理员） -->
|
|
<div class="page-content" id="page-seo">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="card-title">SEO配置</div>
|
|
</div>
|
|
<form>
|
|
<div class="form-group">
|
|
<label class="form-label">网站标题</label>
|
|
<input type="text" class="form-input" value="思投录 - 投资决策与复盘工具" placeholder="输入网站标题">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">网站描述</label>
|
|
<textarea class="form-textarea"
|
|
placeholder="输入网站描述">思投录是一款专注于投资决策与复盘的工具应用，旨在"让每笔投资都经得起思考"。帮助用户记录交易、制定计划、进行复盘，轻松管理股票、基金等资产收益。</textarea>
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">关键词</label>
|
|
<input type="text" class="form-input" value="投资记录,交易计划,投资复盘,股票管理,基金收益"
|
|
placeholder="输入关键词，用逗号分隔">
|
|
</div>
|
|
<div class="form-group">
|
|
<label class="form-label">OG图片URL</label>
|
|
<input type="text" class="form-input" placeholder="输入OG图片URL">
|
|
</div>
|
|
<div class="form-group">
|
|
<button type="submit" class="btn btn-primary">保存配置</button>
|
|
<button type="button" class="btn btn-secondary" style="margin-left: 12px;">重置</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 数据统计页面（管理员） -->
|
|
<div class="page-content" id="page-analytics">
|
|
<div class="stats-grid">
|
|
<div class="metric-card">
|
|
<div class="metric-value">12,345</div>
|
|
<div class="metric-label">总用户数</div>
|
|
</div>
|
|
<div class="metric-card">
|
|
<div class="metric-value">8,901</div>
|
|
<div class="metric-label">日活跃用户 (DAU)</div>
|
|
</div>
|
|
<div class="metric-card">
|
|
<div class="metric-value">56,789</div>
|
|
<div class="metric-label">月活跃用户 (MAU)</div>
|
|
</div>
|
|
<div class="metric-card">
|
|
<div class="metric-value">234,567</div>
|
|
<div class="metric-label">总访问量 (PV)</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="card-title">访问趋势</div>
|
|
</div>
|
|
<div class="chart-container" id="analytics-chart"></div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<div class="card-title">用户行为统计</div>
|
|
</div>
|
|
<div class="table-container">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>日期</th>
|
|
<th>UV</th>
|
|
<th>PV</th>
|
|
<th>新用户</th>
|
|
<th>活跃用户</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>2024-10-20</td>
|
|
<td>1,234</td>
|
|
<td>5,678</td>
|
|
<td>123</td>
|
|
<td>890</td>
|
|
</tr>
|
|
<tr>
|
|
<td>2024-10-19</td>
|
|
<td>1,189</td>
|
|
<td>5,432</td>
|
|
<td>98</td>
|
|
<td>856</td>
|
|
</tr>
|
|
<tr>
|
|
<td>2024-10-18</td>
|
|
<td>1,156</td>
|
|
<td>5,234</td>
|
|
<td>87</td>
|
|
<td>823</td>
|
|
</tr>
|
|
<tr>
|
|
<td>2024-10-17</td>
|
|
<td>1,098</td>
|
|
<td>4,987</td>
|
|
<td>76</td>
|
|
<td>789</td>
|
|
</tr>
|
|
<tr>
|
|
<td>2024-10-16</td>
|
|
<td>1,045</td>
|
|
<td>4,756</td>
|
|
<td>65</td>
|
|
<td>756</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<script>
|
|
// 当前角色：'user' 或 'admin'
|
|
let currentRole = 'user';
|
|
|
|
// 页面标题映射
|
|
const pageTitles = {
|
|
assets: { title: '资产账户', subtitle: '买股票就是买公司' },
|
|
plans: { title: '交易计划', subtitle: '计划你的交易，交易你的计划' },
|
|
review: { title: '投资复盘', subtitle: '回顾过去是为了更好应对将来' },
|
|
seo: { title: 'SEO配置', subtitle: '优化搜索引擎可见性' },
|
|
analytics: { title: '数据统计', subtitle: '了解用户行为与系统数据' }
|
|
};
|
|
|
|
// 初始化
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
initNavigation();
|
|
initCharts();
|
|
updateRoleUI();
|
|
});
|
|
|
|
// 初始化导航
|
|
function initNavigation() {
|
|
const navItems = document.querySelectorAll('.nav-item');
|
|
navItems.forEach(item => {
|
|
item.addEventListener('click', function () {
|
|
const page = this.getAttribute('data-page');
|
|
switchPage(page);
|
|
});
|
|
});
|
|
}
|
|
|
|
// 切换页面
|
|
function switchPage(pageId) {
|
|
// 隐藏所有页面
|
|
document.querySelectorAll('.page-content').forEach(page => {
|
|
page.classList.remove('active');
|
|
});
|
|
|
|
// 显示目标页面
|
|
const targetPage = document.getElementById(`page-${pageId}`);
|
|
if (targetPage) {
|
|
targetPage.classList.add('active');
|
|
}
|
|
|
|
// 更新导航状态
|
|
document.querySelectorAll('.nav-item').forEach(item => {
|
|
item.classList.remove('active');
|
|
if (item.getAttribute('data-page') === pageId) {
|
|
item.classList.add('active');
|
|
}
|
|
});
|
|
|
|
// 更新页面标题
|
|
const pageInfo = pageTitles[pageId];
|
|
if (pageInfo) {
|
|
document.getElementById('current-page-title').textContent = pageInfo.title;
|
|
document.getElementById('current-page-subtitle').textContent = pageInfo.subtitle;
|
|
}
|
|
|
|
// 如果是图表页面，重新渲染图表
|
|
if (pageId === 'assets') {
|
|
setTimeout(() => renderAssetsChart(), 100);
|
|
} else if (pageId === 'analytics') {
|
|
setTimeout(() => renderAnalyticsChart(), 100);
|
|
}
|
|
}
|
|
|
|
// 切换角色
|
|
function toggleRole() {
|
|
currentRole = currentRole === 'user' ? 'admin' : 'user';
|
|
updateRoleUI();
|
|
}
|
|
|
|
// 更新角色UI
|
|
function updateRoleUI() {
|
|
const roleBadge = document.getElementById('role-badge');
|
|
const adminSection = document.getElementById('admin-section-title');
|
|
const navSeo = document.getElementById('nav-seo');
|
|
const navAnalytics = document.getElementById('nav-analytics');
|
|
const userAvatar = document.getElementById('user-avatar');
|
|
|
|
if (currentRole === 'admin') {
|
|
roleBadge.textContent = '管理员';
|
|
roleBadge.className = 'role-badge admin';
|
|
adminSection.style.display = 'block';
|
|
navSeo.style.display = 'flex';
|
|
navAnalytics.style.display = 'flex';
|
|
userAvatar.textContent = 'A';
|
|
} else {
|
|
roleBadge.textContent = '普通用户';
|
|
roleBadge.className = 'role-badge user';
|
|
adminSection.style.display = 'none';
|
|
navSeo.style.display = 'none';
|
|
navAnalytics.style.display = 'none';
|
|
userAvatar.textContent = 'U';
|
|
|
|
// 如果当前在管理员页面，切换到资产页面
|
|
const activePage = document.querySelector('.page-content.active');
|
|
if (activePage && (activePage.id === 'page-seo' || activePage.id === 'page-analytics')) {
|
|
switchPage('assets');
|
|
}
|
|
}
|
|
}
|
|
|
|
// 初始化图表
|
|
function initCharts() {
|
|
renderAssetsChart();
|
|
renderAnalyticsChart();
|
|
}
|
|
|
|
// 渲染资产图表
|
|
function renderAssetsChart() {
|
|
const chartDom = document.getElementById('assets-chart');
|
|
if (!chartDom) return;
|
|
|
|
const myChart = echarts.init(chartDom);
|
|
const option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'cross'
|
|
}
|
|
},
|
|
legend: {
|
|
data: ['总资产', '累计收益']
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月']
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
series: [
|
|
{
|
|
name: '总资产',
|
|
type: 'line',
|
|
smooth: true,
|
|
data: [1000000, 1050000, 1100000, 1080000, 1150000, 1200000, 1180000, 1220000, 1250000, 1234567],
|
|
itemStyle: {
|
|
color: '#8b5cf6'
|
|
},
|
|
areaStyle: {
|
|
color: {
|
|
type: 'linear',
|
|
x: 0,
|
|
y: 0,
|
|
x2: 0,
|
|
y2: 1,
|
|
colorStops: [{
|
|
offset: 0, color: 'rgba(139, 92, 246, 0.3)'
|
|
}, {
|
|
offset: 1, color: 'rgba(139, 92, 246, 0.1)'
|
|
}]
|
|
}
|
|
}
|
|
},
|
|
{
|
|
name: '累计收益',
|
|
type: 'line',
|
|
smooth: true,
|
|
data: [0, 50000, 100000, 80000, 150000, 200000, 180000, 220000, 250000, 234567],
|
|
itemStyle: {
|
|
color: '#10b981'
|
|
}
|
|
}
|
|
]
|
|
};
|
|
myChart.setOption(option);
|
|
|
|
// 响应式
|
|
window.addEventListener('resize', function () {
|
|
myChart.resize();
|
|
});
|
|
}
|
|
|
|
// 渲染数据统计图表
|
|
function renderAnalyticsChart() {
|
|
const chartDom = document.getElementById('analytics-chart');
|
|
if (!chartDom) return;
|
|
|
|
const myChart = echarts.init(chartDom);
|
|
const option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'cross'
|
|
}
|
|
},
|
|
legend: {
|
|
data: ['UV', 'PV', '新用户']
|
|
},
|
|
grid: {
|
|
left: '3%',
|
|
right: '4%',
|
|
bottom: '3%',
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
data: ['10-16', '10-17', '10-18', '10-19', '10-20']
|
|
},
|
|
yAxis: {
|
|
type: 'value'
|
|
},
|
|
series: [
|
|
{
|
|
name: 'UV',
|
|
type: 'line',
|
|
smooth: true,
|
|
data: [1045, 1098, 1156, 1189, 1234],
|
|
itemStyle: {
|
|
color: '#8b5cf6'
|
|
}
|
|
},
|
|
{
|
|
name: 'PV',
|
|
type: 'bar',
|
|
data: [4756, 4987, 5234, 5432, 5678],
|
|
itemStyle: {
|
|
color: '#a78bfa'
|
|
}
|
|
},
|
|
{
|
|
name: '新用户',
|
|
type: 'line',
|
|
smooth: true,
|
|
data: [65, 76, 87, 98, 123],
|
|
itemStyle: {
|
|
color: '#10b981'
|
|
}
|
|
}
|
|
]
|
|
};
|
|
myChart.setOption(option);
|
|
|
|
// 响应式
|
|
window.addEventListener('resize', function () {
|
|
myChart.resize();
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html> |