Skip to content

Commit 267840e

Browse files
author
sunsiqi
committed
文献列表页修改，新增文献详情页
1 parent 6e42eb3 commit 267840e

File tree

2 files changed

+349
-44
lines changed

2 files changed

+349
-44
lines changed

‎literature_info_detail.html‎

Lines changed: 196 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,196 @@
1+
<!DOCTYPE html>
2+
<html lang="zh-CN">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>文献信息详情</title>
7+
<script src="https://cdn.tailwindcss.com"></script>
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
9+
<style>
10+
.detail-label {
11+
font-weight: 500; /* medium */
12+
color: #4b5563; /* gray-600 */
13+
}
14+
.detail-value {
15+
color: #1f2937; /* gray-800 */
16+
word-break: break-word;
17+
}
18+
.section-title {
19+
font-size: 1.125rem; /* text-lg */
20+
font-weight: 600; /* semibold */
21+
color: #1e293b; /* slate-800 */
22+
padding-bottom: 0.5rem; /* pb-2 */
23+
border-bottom: 1px solid #e2e8f0; /* border-slate-200 */
24+
margin-bottom: 1rem; /* mb-4 */
25+
}
26+
.grid-info-item {
27+
padding-bottom: 0.5rem; /* pb-2 */
28+
}
29+
</style>
30+
</head>
31+
<body class="bg-slate-100 font-sans p-4 md:p-6">
32+
<div class="container mx-auto bg-white p-6 sm:p-8 rounded-lg shadow-xl">
33+
<header class="mb-6 pb-4 border-b border-slate-200">
34+
<h1 id="lit-info-title" class="text-2xl md:text-3xl font-bold text-slate-800 mb-2 leading-tight" title="加载中...">加载中...</h1>
35+
<p id="lit-info-authors" class="text-md text-slate-600">作者: 加载中...</p>
36+
</header>
37+
38+
<div>
39+
<h2 class="section-title">基本信息</h2>
40+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-3 text-sm mb-6">
41+
<div class="grid-info-item"><span class="detail-label">来源 (期刊/会议): </span><span id="lit-info-source" class="detail-value"></span></div>
42+
<div class="grid-info-item"><span class="detail-label">文章类型: </span><span id="lit-info-type" class="detail-value"></span></div>
43+
<div class="grid-info-item"><span class="detail-label">发表年份: </span><span id="lit-info-year" class="detail-value"></span></div>
44+
<div class="grid-info-item"><span class="detail-label">卷号: </span><span id="lit-info-volume" class="detail-value"></span></div>
45+
<div class="grid-info-item"><span class="detail-label">期号: </span><span id="lit-info-issue" class="detail-value"></span></div>
46+
<div class="grid-info-item"><span class="detail-label">影响因子 (IF): </span><span id="lit-info-if" class="detail-value"></span></div>
47+
<div class="grid-info-item md:col-span-2 lg:col-span-3"><span class="detail-label">DOI: </span><a href="#" id="lit-info-doi" target="_blank" class="detail-value text-blue-600 hover:underline"></a></div>
48+
</div>
49+
</div>
50+
51+
<div>
52+
<h2 class="section-title">标签与关键词</h2>
53+
<div class="mb-4">
54+
<p class="detail-label mb-1">文献标签:</p>
55+
<div id="lit-info-tags" class="flex flex-wrap gap-2">
56+
<span class="bg-slate-100 text-slate-500 text-xs px-2 py-0.5 rounded-full italic">加载中...</span>
57+
</div>
58+
</div>
59+
<div>
60+
<p class="detail-label mb-1">关键词:</p>
61+
<div id="lit-info-keywords" class="flex flex-wrap gap-2">
62+
<span class="bg-slate-100 text-slate-500 text-xs px-2 py-0.5 rounded-full italic">加载中...</span>
63+
</div>
64+
</div>
65+
</div>
66+
67+
<div class="mt-6">
68+
<h2 class="section-title">摘要</h2>
69+
<p id="lit-info-abstract" class="text-sm text-slate-700 leading-relaxed whitespace-pre-line"></p>
70+
</div>
71+
72+
<div class="mt-6">
73+
<h2 class="section-title">操作</h2>
74+
<a href="#" id="lit-info-download" target="_blank" class="inline-flex items-center text-sm text-blue-600 hover:text-blue-700 hover:underline py-2">
75+
<i class="fas fa-download mr-2"></i><span id="lit-info-download-text">下载原文</span>
76+
</a>
77+
</div>
78+
79+
<div class="mt-6">
80+
<h2 class="section-title">引文 (部分示例)</h2>
81+
<ul id="lit-info-citations" class="list-disc list-inside text-sm text-slate-600 space-y-1">
82+
<li class="italic text-slate-400">加载中...</li>
83+
</ul>
84+
</div>
85+
</div>
86+
87+
<script>
88+
// Mock data (expanded from literature_management.html's mock)
89+
const mockLiteratureFullDetails = {
90+
"lit001": {
91+
title: "IBD最新研究进展与未来展望.pdf", authors: "王明, 李静, 张三丰", source: "中华医学杂志", type: "综述文章",
92+
tags: ["IBD", "综述", "医学前沿"], year: "2024", volume: "104", issue: "5", impactFactor: "3.567",
93+
keywords: ["炎症性肠病", "治疗进展", "靶向治疗", "免疫调节", "微生物群"],
94+
abstractText: "炎症性肠病（IBD）是一组慢性、复发性肠道炎症性疾病，主要包括克罗恩病（CD）和溃疡性结肠炎（UC）。近年来，随着对IBD发病机制认识的深入，新的治疗靶点和药物不断涌现，为IBD患者带来了新的希望。本文就IBD的流行病学、发病机制、诊断以及治疗（包括传统药物、生物制剂、小分子药物及细胞治疗等）的最新研究进展进行综述，并对未来研究方向和治疗策略进行展望，旨在为临床医生和研究人员提供参考。",
95+
doi: "10.3760/cma.j.cn112137-20231010-00123", downloadUrl: "sample_doc1.pdf",
96+
citationsText: ["Baumgart DC, Sandborn WJ. Crohn's disease. Lancet. 2012;380(9853):1590-1605.", "Ordás I, Eckmann L, Talamini M, Baumgart DC, Sandborn WJ. Ulcerative colitis. Lancet. 2012;380(9853):1606-1619."] // Changed to array
97+
},
98+
"lit002": {
99+
title: "白芍化学成分及其抗炎活性研究.docx", authors: "张伟, 李娜", source: "中草药", type: "研究原著",
100+
tags: ["药材", "白芍", "化学", "抗炎"], year: "2023", volume: "54", issue: "10", impactFactor: "1.892",
101+
keywords: ["白芍", "芍药苷", "没食子酰芍药苷", "抗炎活性", "NF-κB"],
102+
abstractText: "目的：研究白芍的化学成分及其主要成分的抗炎活性。方法：采用多种色谱技术分离纯化白芍中的化学成分，并通过波谱数据鉴定其结构；建立LPS诱导的RAW264.7细胞炎症模型，评价主要成分的抗炎活性。结果：从白芍中分离得到10个化合物...结论：白芍具有良好的抗炎作用物质基础。",
103+
doi: "10.7501/j.issn.0253-2670.2023.10.00x", downloadUrl: "sample_doc2.pdf",
104+
citationsText: ["He X, Bai Y. Paeoniflorin: a review of its pharmacology. Fitoterapia. 2011;82(7):1035-40.", "Cao Y, Yu R, Zhang L, et al. Anti-inflammatory effects of paeoniflorin. Eur J Pharmacol. 2019;855:90-100."]
105+
},
106+
// Add full details for lit003, lit004, lit005 if needed for testing this page directly
107+
"lit003": { title: "炎症性肠病治疗靶点研究新进展.pdf", authors: "赵敏, 孙悦", keywords: ["IBD", "JAK抑制剂"], source: "Elsevier", uploadDate: "2024-02-20", tags: ["IBD", "药靶"], articleType: "研究论文", publishYear: "2024", volume: "18", issue: "2", impactFactor: "9.071", doi: "10.1093/ecco-jcc/jjad180", abstractText: "Janus激酶（JAK）抑制剂作为一种新型口服小分子药物...", citationsText: ["Torres J, et al. Lancet. 2017"] },
108+
109+
};
110+
111+
document.addEventListener('DOMContentLoaded', () => {
112+
const urlParams = new URLSearchParams(window.location.search);
113+
const literatureId = urlParams.get('id');
114+
const data = mockLiteratureFullDetails[literatureId];
115+
116+
if (data) {
117+
document.getElementById('lit-info-title').textContent = data.title;
118+
document.getElementById('lit-info-title').title = data.title; // For full title on hover
119+
document.getElementById('lit-info-authors').textContent = `作者: ${data.authors || 'N/A'}`;
120+
document.getElementById('lit-info-source').textContent = data.source || 'N/A';
121+
document.getElementById('lit-info-type').textContent = data.type || data.articleType || 'N/A'; // Added fallback
122+
document.getElementById('lit-info-year').textContent = data.year || data.publishYear || 'N/A'; // Added fallback
123+
document.getElementById('lit-info-volume').textContent = data.volume || 'N/A';
124+
document.getElementById('lit-info-issue').textContent = data.issue || 'N/A';
125+
document.getElementById('lit-info-if').textContent = data.impactFactor || 'N/A';
126+
127+
const doiEl = document.getElementById('lit-info-doi');
128+
doiEl.textContent = data.doi || 'N/A';
129+
if (data.doi) {
130+
doiEl.href = `https://doi.org/${data.doi}`;
131+
doiEl.classList.add('text-blue-600', 'hover:underline');
132+
} else {
133+
doiEl.removeAttribute('href');
134+
doiEl.classList.remove('text-blue-600', 'hover:underline');
135+
}
136+
137+
const tagsContainer = document.getElementById('lit-info-tags');
138+
tagsContainer.innerHTML = '';
139+
(data.tags || []).forEach(tag => {
140+
tagsContainer.innerHTML += `<span class="bg-sky-100 text-sky-700 text-xs font-medium px-2.5 py-1 rounded-full mr-1.5 mb-1.5 inline-block">${tag}</span>`;
141+
});
142+
if (tagsContainer.innerHTML === '') tagsContainer.innerHTML = `<span class="italic text-slate-500">无标签</span>`;
143+
144+
const keywordsContainer = document.getElementById('lit-info-keywords');
145+
keywordsContainer.innerHTML = '';
146+
(data.keywords || []).forEach(kw => {
147+
keywordsContainer.innerHTML += `<span class="bg-slate-200 text-slate-700 text-xs font-medium px-2.5 py-1 rounded-full mr-1.5 mb-1.5 inline-block">${kw}</span>`;
148+
});
149+
if (keywordsContainer.innerHTML === '') keywordsContainer.innerHTML = `<span class="italic text-slate-500">无关键词</span>`;
150+
151+
document.getElementById('lit-info-abstract').textContent = data.abstractText || '摘要信息不可用。';
152+
153+
const downloadLinkEl = document.getElementById('lit-info-download');
154+
const downloadLinkTextEl = document.getElementById('lit-info-download-text');
155+
if (data.downloadUrl) {
156+
downloadLinkEl.href = data.downloadUrl;
157+
downloadLinkTextEl.textContent = '下载原文文件'; // Or the filename: data.title
158+
downloadLinkEl.classList.remove('hidden');
159+
} else {
160+
downloadLinkTextEl.textContent = '下载链接不可用';
161+
downloadLinkEl.removeAttribute('href');
162+
downloadLinkEl.classList.add('text-slate-400', 'pointer-events-none');
163+
downloadLinkEl.classList.remove('text-blue-600', 'hover:text-blue-700', 'hover:underline');
164+
}
165+
166+
const citationsListEl = document.getElementById('lit-info-citations');
167+
citationsListEl.innerHTML = '';
168+
if (data.citationsText && Array.isArray(data.citationsText) && data.citationsText.length > 0) {
169+
data.citationsText.forEach(citation => {
170+
const li = document.createElement('li');
171+
li.textContent = citation;
172+
citationsListEl.appendChild(li);
173+
});
174+
} else if (typeof data.citationsText === 'string' && data.citationsText.trim() !== '') { // Handle if it's a single string
175+
const li = document.createElement('li');
176+
li.textContent = data.citationsText;
177+
citationsListEl.appendChild(li);
178+
} else {
179+
citationsListEl.innerHTML = `<li class="italic text-slate-400">引文信息不可用或暂无。</li>`;
180+
}
181+
182+
} else {
183+
document.getElementById('lit-info-title').textContent = "文献信息未找到";
184+
document.getElementById('lit-info-title').title = "文献信息未找到";
185+
// Clear or hide other fields
186+
['lit-info-authors', 'lit-info-source', 'lit-info-type', 'lit-info-year', 'lit-info-volume', 'lit-info-issue', 'lit-info-if', 'lit-info-doi', 'lit-info-tags', 'lit-info-keywords', 'lit-info-abstract', 'lit-info-citations'].forEach(id => {
187+
const el = document.getElementById(id);
188+
if (el) el.textContent = 'N/A';
189+
});
190+
const downloadLinkEl = document.getElementById('lit-info-download');
191+
downloadLinkEl.classList.add('hidden');
192+
}
193+
});
194+
</script>
195+
</body>
196+
</html>

0 commit comments

Comments
 (0)