Hugging Face's logo

Spaces:
maomaobj
/
knowledgelist
Running

App Files Community
maomaobj commited on
Commit
cff8013
·
verified ·
1 Parent(s): e48ed60

请为我设计一个专业、结构清晰、适用于医疗行业的网页，用于展示临床试验知识库中某一板块的内容（如“标准流程”或“培训材料”）。页面整体风格应为医疗科技风，蓝白主色调，模块化布局，信息密度适中，具备结构化卡片展示、智能问答支持与多维度筛选功能。 页面结构如下： 1️⃣ 页面顶部 页面标题：如“标准流程知识库” 下方设置一个搜索框，提示语为“搜索流程名称、关键词或适用阶段” 搜索框右侧可提供筛选按钮（展开/收起） 2️⃣ 页面主体采用两栏式布局： 🧭 左侧为筛选栏（窄栏） 筛选分类包括： 使用阶段（如：项目启动 / 执行 / 锁库 / 结题） 适用角色（如：PI / CRC / CRA / 质控 / 数据员） 文档类型（流程图 / PDF / Word / 视频） 标签（可多选，如“招募”、“伦理”、“稽查”） 发布时间范围（近一月 / 半年 / 一年） 📚 右侧为知识卡片列表区（主内容区） 每条知识以卡片形式展示，包含以下内容： 标题（例如：【标准流程】访视计划制定步骤） 简要描述（1–2行） 来源单位（如“北京协和医院”） 标签列表（例如：流程图 / 启动阶段 / CRC） 操作按钮：[预览] [查看详情] [下载] [引用] 页面底部支持分页或“加载更多”方式 3️⃣ 页面右下角设置一个固定的 AI 问答窗口 模块标题：“AI问答助手（标准流程）” 包含输入框、历史问题示例、智能回答内容块 示例问题包括： “数据锁库前需要完成哪些流程？” “CRC在受试者入组前要准备什么？” 回答部分需结构清晰，并显示出处链接或文档名 💡 页面风格要求： 医疗行业风格，蓝白主色，文字信息突出 筛选栏为浅灰背景，与内容区分明显 卡片风格统一，信息排列规整 AI问答区域可浮动、可折叠，界面简洁 ✅ 使用建议 你可以将此提示词直接粘贴至 DeepSite 的 Prompt 输入框，选择页面类型为： 页面类型：知识管理 / 医疗系统 / 列表页 语言：支持中文（如需英文UI请告知） 风格：科技感 / 信息清晰 / 企业门户风格 - Follow Up Deployment

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +499 -19
  3. prompts.txt +3 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Knowledgelist
3
- emoji: 🌍
4
- colorFrom: red
5
- colorTo: pink
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: knowledgelist
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: purple
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,499 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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 href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
9
+ <script>
10
+ tailwind.config = {
11
+ theme: {
12
+ extend: {
13
+ colors: {
14
+ primary: "#1a6aa9",
15
+ secondary: "#3498db",
16
+ medlight: "#eff6ff",
17
+ meddark: "#0d3c61"
18
+ }
19
+ }
20
+ }
21
+ }
22
+ </script>
23
+ <style>
24
+ body {
25
+ font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
26
+ }
27
+ .knowledge-card:hover {
28
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
29
+ transform: translateY(-3px);
30
+ }
31
+ .tag {
32
+ transition: all 0.2s ease-in-out;
33
+ }
34
+ .tag:hover {
35
+ background-color: #3498db;
36
+ color: white;
37
+ }
38
+ .ai-window {
39
+ box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
40
+ transition: all 0.3s ease;
41
+ }
42
+ .reference-link:hover {
43
+ text-decoration-color: #1a6aa9;
44
+ }
45
+ </style>
46
+ </head>
47
+ <body class="bg-gray-50">
48
+ <!-- 顶部导航 -->
49
+ <header class="bg-gradient-to-r from-primary to-meddark text-white">
50
+ <div class="container mx-auto px-4 py-4">
51
+ <div class="flex justify-between items-center">
52
+ <div>
53
+ <h1 class="text-2xl font-bold">临床试验知识库系统</h1>
54
+ <p class="text-sm opacity-80">GCP标准 · 循证医学 · 合规研究</p>
55
+ </div>
56
+ <nav class="hidden md:flex space-x-6">
57
+ <a href="#" class="hover:underline">首页</a>
58
+ <a href="#" class="font-semibold border-b-2">标准流程</a>
59
+ <a href="#" class="hover:underline">培训材料</a>
60
+ <a href="#" class="hover:underline">法律法规</a>
61
+ <a href="#" class="hover:underline">机构资源</a>
62
+ </nav>
63
+ <div class="flex items-center">
64
+ <button class="mr-4">
65
+ <i class="fas fa-bell"></i>
66
+ </button>
67
+ <div class="flex items-center">
68
+ <div class="w-8 h-8 rounded-full bg-white flex items-center justify-center mr-2">
69
+ <i class="fas fa-user text-primary"></i>
70
+ </div>
71
+ <span>研究协调员</span>
72
+ </div>
73
+ </div>
74
+ </div>
75
+ </div>
76
+ </header>
77
+
78
+ <!-- 页面内容区 -->
79
+ <main class="container mx-auto px-4 py-8">
80
+ <!-- 顶部标题和搜索 -->
81
+ <section class="mb-8">
82
+ <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
83
+ <div>
84
+ <h1 class="text-3xl font-bold text-meddark">标准流程知识库</h1>
85
+ <p class="text-gray-600 mt-2">规范化临床试验流程，确保研究质量与合规性</p>
86
+ </div>
87
+ <div class="flex items-center space-x-3 mt-4 md:mt-0 w-full md:w-auto">
88
+ <div class="relative flex-grow md:flex-grow-0">
89
+ <input type="text" placeholder="搜索流程名称、关键词或适用阶段" class="w-full md:w-80 px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-secondary focus:border-transparent">
90
+ <i class="fas fa-search absolute right-3 top-3.5 text-gray-400"></i>
91
+ </div>
92
+ <button class="bg-white border border-gray-300 rounded-lg px-4 py-3 flex items-center">
93
+ <i class="fas fa-filter text-gray-600 mr-2"></i>
94
+ <span>筛选</span>
95
+ </button>
96
+ </div>
97
+ </div>
98
+ </section>
99
+
100
+ <!-- 主体内容 - 两栏布局 -->
101
+ <div class="flex flex-col lg:flex-row gap-6">
102
+ <!-- 左侧筛选栏 -->
103
+ <aside class="lg:w-1/4 bg-white rounded-xl shadow p-6 h-fit">
104
+ <h2 class="font-semibold text-lg text-meddark mb-4">筛选条件</h2>
105
+
106
+ <div class="mb-6">
107
+ <h3 class="font-medium text-gray-700 mb-2">使用阶段</h3>
108
+ <div class="space-y-2">
109
+ <label class="flex items-center">
110
+ <input type="checkbox" class="rounded text-secondary focus:ring-secondary mr-2">
111
+ <span>项目启动</span>
112
+ </label>
113
+ <label class="flex items-center">
114
+ <input type="checkbox" class="rounded text-secondary focus:ring-secondary mr-2" checked>
115
+ <span>执行阶段</span>
116
+ </label>
117
+ <label class="flex items-center">
118
+ <input type="checkbox" class="rounded text-secondary focus:ring-secondary mr-2">
119
+ <span>锁库流程</span>
120
+ </label>
121
+ <label class="flex items-center">
122
+ <input type="checkbox" class="rounded text-secondary focus:ring-secondary mr-2">
123
+ <span>结题阶段</span>
124
+ </label>
125
+ </div>
126
+ </div>
127
+
128
+ <div class="mb-6">
129
+ <h3 class="font-medium text-gray-700 mb-2">适用角色</h3>
130
+ <div class="space-y-2">
131
+ <label class="flex items-center">
132
+ <input type="checkbox" class="rounded text-secondary focus:ring-secondary mr-2">
133
+ <span>PI (主要研究者)</span>
134
+ </label>
135
+ <label class="flex items-center">
136
+ <input type="checkbox" class="rounded text-secondary focus:ring-secondary mr-2" checked>
137
+ <span>CRC (临床研究协调员)</span>
138
+ </label>
139
+ <label class="flex items-center">
140
+ <input type="checkbox" class="rounded text-secondary focus:ring-secondary mr-2" checked>
141
+ <span>CRA (临床监查员)</span>
142
+ </label>
143
+ <label class="flex items-center">
144
+ <input type="checkbox" class="rounded text-secondary focus:ring-secondary mr-2">
145
+ <span>质控人员</span>
146
+ </label>
147
+ <label class="flex items-center">
148
+ <input type="checkbox" class="rounded text-secondary focus:ring-secondary mr-2">
149
+ <span>数据管理员</span>
150
+ </label>
151
+ </div>
152
+ </div>
153
+
154
+ <div class="mb-6">
155
+ <h3 class="font-medium text-gray-700 mb-2">文档类型</h3>
156
+ <div class="space-y-2">
157
+ <label class="flex items-center">
158
+ <input type="checkbox" class="rounded text-secondary focus:ring-secondary mr-2" checked>
159
+ <span>流程图</span>
160
+ </label>
161
+ <label class="flex items-center">
162
+ <input type="checkbox" class="rounded text-secondary focus:ring-secondary mr-2">
163
+ <span>PDF文档</span>
164
+ </label>
165
+ <label class="flex items-center">
166
+ <input type="checkbox" class="rounded text-secondary focus:ring-secondary mr-2">
167
+ <span>Word文档</span>
168
+ </label>
169
+ <label class="flex items-center">
170
+ <input type="checkbox" class="rounded text-secondary focus:ring-secondary mr-2">
171
+ <span>视频教程</span>
172
+ </label>
173
+ </div>
174
+ </div>
175
+
176
+ <div class="mb-6">
177
+ <h3 class="font-medium text-gray-700 mb-2">常用标签</h3>
178
+ <div class="flex flex-wrap gap-2">
179
+ <span class="tag bg-blue-50 text-blue-700 px-3 py-1 rounded-full text-sm cursor-pointer">招募</span>
180
+ <span class="tag bg-blue-50 text-blue-700 px-3 py-1 rounded-full text-sm cursor-pointer">伦理审批</span>
181
+ <span class="tag bg-blue-50 text-blue-700 px-3 py-1 rounded-full text-sm cursor-pointer">稽查准备</span>
182
+ <span class="tag bg-blue-50 text-blue-700 px-3 py-1 rounded-full text-sm cursor-pointer">受试者管理</span>
183
+ <span class="tag bg-blue-50 text-blue-700 px-3 py-1 rounded-full text-sm cursor-pointer">数据管理</span>
184
+ <span class="tag bg-blue-50 text-blue-700 px-3 py-1 rounded-full text-sm cursor-pointer">药品管理</span>
185
+ </div>
186
+ </div>
187
+
188
+ <div>
189
+ <h3 class="font-medium text-gray-700 mb-2">发布时间</h3>
190
+ <div class="space-y-2">
191
+ <label class="flex items-center">
192
+ <input type="radio" name="time" class="rounded-full text-secondary focus:ring-secondary mr-2" checked>
193
+ <span>全部时间</span>
194
+ </label>
195
+ <label class="flex items-center">
196
+ <input type="radio" name="time" class="rounded-full text-secondary focus:ring-secondary mr-2">
197
+ <span>近一个月</span>
198
+ </label>
199
+ <label class="flex items-center">
200
+ <input type="radio" name="time" class="rounded-full text-secondary focus:ring-secondary mr-2">
201
+ <span>近半年</span>
202
+ </label>
203
+ <label class="flex items-center">
204
+ <input type="radio" name="time" class="rounded-full text-secondary focus:ring-secondary mr-2">
205
+ <span>近一年</span>
206
+ </label>
207
+ </div>
208
+ </div>
209
+
210
+ <button class="w-full mt-6 bg-secondary hover:bg-primary text-white py-2.5 rounded-lg transition duration-300">
211
+ 应用筛选条件
212
+ </button>
213
+ </aside>
214
+
215
+ <!-- 右侧内容区 -->
216
+ <section class="lg:w-3/4">
217
+ <!-- 统计信息 -->
218
+ <div class="bg-white rounded-xl shadow p-5 mb-6">
219
+ <div class="flex flex-wrap items-center justify-between">
220
+ <div>
221
+ <p class="text-gray-600">筛选内容结果: <span class="font-semibold text-meddark">34</span> 条</p>
222
+ </div>
223
+ <div class="flex space-x-3 mt-2 md:mt-0">
224
+ <button class="flex items-center text-sm bg-blue-50 text-primary px-3 py-1.5 rounded-lg">
225
+ <i class="fas fa-sort-amount-down mr-1"></i>
226
+ <span>最新优先</span>
227
+ </button>
228
+ <button class="flex items-center text-sm bg-white border border-gray-300 px-3 py-1.5 rounded-lg">
229
+ <i class="fas fa-th-large mr-1"></i>
230
+ <span>卡片视图</span>
231
+ </button>
232
+ </div>
233
+ </div>
234
+ </div>
235
+
236
+ <!-- 知识卡片列表 -->
237
+ <div class="grid md:grid-cols-1 gap-6">
238
+ <!-- 卡片1 -->
239
+ <div class="knowledge-card bg-white rounded-xl shadow overflow-hidden transition duration-300">
240
+ <div class="flex">
241
+ <div class="w-16 bg-blue-50 flex items-center justify-center">
242
+ <i class="fas fa-project-diagram text-secondary text-2xl"></i>
243
+ </div>
244
+ <div class="flex-1 p-6">
245
+ <div class="flex flex-wrap justify-between">
246
+ <div>
247
+ <h3 class="text-lg font-bold text-meddark">【标准流程】访视计划制定步骤</h3>
248
+ <p class="text-gray-600 mt-2">规范访视前准备、执行和报告流程，确保监查工作标准化和完整性</p>
249
+ </div>
250
+ <div class="bg-green-50 text-green-700 px-3 py-1 h-fit rounded-lg text-sm mt-2 sm:mt-0">
251
+ <i class="fas fa-shield-alt mr-1"></i>
252
+ <span>已通过GCP认证</span>
253
+ </div>
254
+ </div>
255
+
256
+ <div class="mt-4 flex flex-wrap items-center gap-3">
257
+ <span class="text-sm text-gray-500"><i class="fas fa-hospital mr-1"></i>来源: 北京协和医院临床试验中心</span>
258
+ <span class="text-sm text-gray-500"><i class="far fa-calendar mr-1"></i>更新于: 2023-06-15</span>
259
+ <span class="text-sm text-gray-500"><i class="fas fa-download mr-1"></i>浏览次数: 234次</span>
260
+ </div>
261
+
262
+ <div class="mt-4 flex flex-wrap gap-2">
263
+ <span class="tag bg-blue-50 text-blue-700 px-3 py-1 rounded-full text-sm">流程图</span>
264
+ <span class="tag bg-blue-50 text-blue-700 px-3 py-1 rounded-full text-sm">执行阶段</span>
265
+ <span class="tag bg-blue-50 text-blue-700 px-3 py-1 rounded-full text-sm">CRA</span>
266
+ <span class="tag bg-blue-50 text-blue-700 px-3 py-1 rounded-full text-sm">监查流程</span>
267
+ </div>
268
+
269
+ <div class="mt-6 flex flex-wrap gap-3">
270
+ <button class="flex items-center text-sm bg-blue-50 text-primary px-4 py-2 rounded-lg transition hover:bg-secondary hover:text-white">
271
+ <i class="far fa-eye mr-2"></i>预览
272
+ </button>
273
+ <button class="flex items-center text-sm bg-white border border-gray-300 px-4 py-2 rounded-lg transition hover:border-secondary">
274
+ <i class="fas fa-info-circle mr-2"></i>查看详情
275
+ </button>
276
+ <button class="flex items-center text-sm bg-white border border-gray-300 px-4 py-2 rounded-lg transition hover:border-secondary">
277
+ <i class="fas fa-download mr-2"></i>下载
278
+ </button>
279
+ <button class="flex items-center text-sm bg-white border border-gray-300 px-4 py-2 rounded-lg transition hover:border-secondary">
280
+ <i class="fas fa-quote-right mr-2"></i>引用
281
+ </button>
282
+ </div>
283
+ </div>
284
+ </div>
285
+ </div>
286
+
287
+ <!-- 卡片2 -->
288
+ <div class="knowledge-card bg-white rounded-xl shadow overflow-hidden transition duration-300">
289
+ <div class="flex">
290
+ <div class="w-16 bg-blue-50 flex items-center justify-center">
291
+ <i class="fas fa-file-medical text-secondary text-2xl"></i>
292
+ </div>
293
+ <div class="flex-1 p-6">
294
+ <div class="flex flex-wrap justify-between">
295
+ <div>
296
+ <h3 class="text-lg font-bold text-meddark">【标准流程】受试者知情同意程序</h3>
297
+ <p class="text-gray-600 mt-2">详细规范知情同意过程的操作步骤、文件要求及特殊情况处理</p>
298
+ </div>
299
+ <div class="bg-yellow-50 text-yellow-700 px-3 py-1 h-fit rounded-lg text-sm mt-2 sm:mt-0">
300
+ <i class="fas fa-star mr-1"></i>
301
+ <span>推荐流程</span>
302
+ </div>
303
+ </div>
304
+
305
+ <div class="mt-4 flex flex-wrap items-center gap-3">
306
+ <span class="text-sm text-gray-500"><i class="fas fa-hospital mr-1"></i>来源: 上海瑞金医院临床研究中心</span>
307
+ <span class="text-sm text-gray-500"><i class="far fa-calendar mr-1"></i>更新于: 2023-07-22</span>
308
+ <span class="text-sm text-gray-500"><i class="fas fa-download mr-1"></i>浏览次数: 187次</span>
309
+ </div>
310
+
311
+ <div class="mt-4 flex flex-wrap gap-2">
312
+ <span class="tag bg-blue-50 text-blue-700 px-3 py-1 rounded-full text-sm">PDF</span>
313
+ <span class="tag bg-blue-50 text-blue-700 px-3 py-1 rounded-full text-sm">启动阶段</span>
314
+ <span class="tag bg-blue-50 text-blue-700 px-3 py-1 rounded-full text-sm">CRC</span>
315
+ <span class="tag bg-blue-50 text-blue-700 px-3 py-1 rounded-full text-sm">伦理合规</span>
316
+ </div>
317
+
318
+ <div class="mt-6 flex flex-wrap gap-3">
319
+ <button class="flex items-center text-sm bg-blue-50 text-primary px-4 py-2 rounded-lg transition hover:bg-secondary hover:text-white">
320
+ <i class="far fa-eye mr-2"></i>预览
321
+ </button>
322
+ <button class="flex items-center text-sm bg-white border border-gray-300 px-4 py-2 rounded-lg transition hover:border-secondary">
323
+ <i class="fas fa-info-circle mr-2"></i>查看详情
324
+ </button>
325
+ <button class="flex items-center text-sm bg-white border border-gray-300 px-4 py-2 rounded-lg transition hover:border-secondary">
326
+ <i class="fas fa-download mr-2"></i>下载
327
+ </button>
328
+ <button class="flex items-center text-sm bg-white border border-gray-300 px-4 py-2 rounded-lg transition hover:border-secondary">
329
+ <i class="fas fa-quote-right mr-2"></i>引用
330
+ </button>
331
+ </div>
332
+ </div>
333
+ </div>
334
+ </div>
335
+
336
+ <!-- 卡片3 -->
337
+ <div class="knowledge-card bg-white rounded-xl shadow overflow-hidden transition duration-300">
338
+ <div class="flex">
339
+ <div class="w-16 bg-blue-50 flex items-center justify-center">
340
+ <i class="fas fa-vial text-secondary text-2xl"></i>
341
+ </div>
342
+ <div class="flex-1 p-6">
343
+ <div class="flex flex-wrap justify-between">
344
+ <div>
345
+ <h3 class="text-lg font-bold text-meddark">【标准流程】研究药物管理规范</h3>
346
+ <p class="text-gray-600 mt-2">涵盖药品接收、存储、分发、回收及销毁全过程管理要求</p>
347
+ </div>
348
+ </div>
349
+
350
+ <div class="mt-4 flex flex-wrap items-center gap-3">
351
+ <span class="text-sm text-gray-500"><i class="fas fa-hospital mr-1"></i>来源: 中山大学附属第一医院</span>
352
+ <span class="text-sm text-gray-500"><i class="far fa-calendar mr-1"></i>更新于: 2023-05-30</span>
353
+ <span class="text-sm text-gray-500"><i class="fas fa-download mr-1"></i>浏览次数: 321次</span>
354
+ </div>
355
+
356
+ <div class="mt-4 flex flex-wrap gap-2">
357
+ <span class="tag bg-blue-50 text-blue-700 px-3 py-1 rounded-full text-sm">流程图</span>
358
+ <span class="tag bg-blue-50 text-blue-700 px-3 py-1 rounded-full text-sm">执行阶段</span>
359
+ <span class="tag bg-blue-50 text-blue-700 px-3 py-1 rounded-full text-sm">研究护士</span>
360
+ <span class="tag bg-blue-50 text-blue-700 px-3 py-1 rounded-full text-sm">药品管理</span>
361
+ </div>
362
+
363
+ <div class="mt-6 flex flex-wrap gap-3">
364
+ <button class="flex items-center text-sm bg-blue-50 text-primary px-4 py-2 rounded-lg transition hover:bg-secondary hover:text-white">
365
+ <i class="far fa-eye mr-2"></i>预览
366
+ </button>
367
+ <button class="flex items-center text-sm bg-white border border-gray-300 px-4 py-2 rounded-lg transition hover:border-secondary">
368
+ <i class="fas fa-info-circle mr-2"></i>查看详情
369
+ </button>
370
+ <button class="flex items-center text-sm bg-white border border-gray-300 px-4 py-2 rounded-lg transition hover:border-secondary">
371
+ <i class="fas fa-download mr-2"></i>下载
372
+ </button>
373
+ <button class="flex items-center text-sm bg-white border border-gray-300 px-4 py-2 rounded-lg transition hover:border-secondary">
374
+ <i class="fas fa-quote-right mr-2"></i>引用
375
+ </button>
376
+ </div>
377
+ </div>
378
+ </div>
379
+ </div>
380
+ </div>
381
+
382
+ <!-- 分页 -->
383
+ <div class="mt-10 bg-white rounded-xl shadow p-4">
384
+ <div class="flex flex-col sm:flex-row items-center justify-between">
385
+ <p class="text-gray-600 mb-4 sm:mb-0">显示第 1 - 3 条，共 34 条</p>
386
+ <div class="flex items-center gap-1">
387
+ <button class="w-9 h-9 flex items-center justify-center rounded-lg bg-secondary text-white">
388
+ <i class="fas fa-chevron-left"></i>
389
+ </button>
390
+ <button class="w-9 h-9 flex items-center justify-center rounded-lg bg-primary text-white">1</button>
391
+ <button class="w-9 h-9 flex items-center justify-center rounded-lg hover:bg-gray-100">2</button>
392
+ <button class="w-9 h-9 flex items-center justify-center rounded-lg hover:bg-gray-100">3</button>
393
+ <span class="px-2">...</span>
394
+ <button class="w-9 h-9 flex items-center justify-center rounded-lg hover:bg-gray-100">12</button>
395
+ <button class="w-9 h-9 flex items-center justify-center rounded-lg hover:bg-gray-100">
396
+ <i class="fas fa-chevron-right"></i>
397
+ </button>
398
+ </div>
399
+ </div>
400
+ </div>
401
+ </section>
402
+ </div>
403
+ </main>
404
+
405
+ <!-- AI助手窗口 -->
406
+ <div class="ai-window fixed bottom-6 right-6 z-50 w-full max-w-md bg-white rounded-2xl overflow-hidden shadow-xl">
407
+ <div class="bg-gradient-to-r from-primary to-secondary p-4 text-white">
408
+ <div class="flex justify-between items-center">
409
+ <h2 class="font-bold text-lg">
410
+ <i class="fas fa-robot mr-2"></i> AI问答助手（标准流程）
411
+ </h2>
412
+ <button id="toggleAI" class="w-8 h-8 rounded-full flex items-center justify-center hover:bg-white hover:bg-opacity-20">
413
+ <i class="fas fa-times"></i>
414
+ </button>
415
+ </div>
416
+ <p class="text-sm mt-1 opacity-90">智能解答临床试验标准流程相关问题</p>
417
+ </div>
418
+
419
+ <div class="p-4 max-h-96 overflow-y-auto">
420
+ <!-- 示例问题 -->
421
+ <div class="mb-5">
422
+ <h3 class="text-sm font-medium text-gray-700 mb-2">示例问题:</h3>
423
+ <div class="flex flex-wrap gap-2">
424
+ <button class="text-xs bg-blue-50 text-primary px-3 py-1.5 rounded-lg hover:bg-secondary hover:text-white transition">数据锁库前需要完成哪些流程？</button>
425
+ <button class="text-xs bg-blue-50 text-primary px-3 py-1.5 rounded-lg hover:bg-secondary hover:text-white transition">CRC在受试者入组前要准备什么？</button>
426
+ <button class="text-xs bg-blue-50 text-primary px-3 py-1.5 rounded-lg hover:bg-secondary hover:text-white transition">方案偏离的处理流程是什么？</button>
427
+ </div>
428
+ </div>
429
+
430
+ <!-- 历史对话 -->
431
+ <div class="space-y-4">
432
+ <div class="flex flex-col items-start">
433
+ <div class="max-w-[85%] bg-blue-50 rounded-br-2xl rounded-tl-2xl rounded-tr-2xl px-4 py-2.5">
434
+ <p class="text-sm">访视计划应该包含哪些基本要素？</p>
435
+ </div>
436
+ <span class="text-xs text-gray-500 mt-1">用户提问 · 刚刚</span>
437
+ </div>
438
+
439
+ <div class="flex flex-col items-end">
440
+ <div class="max-w-[85%] bg-primary bg-opacity-10 rounded-bl-2xl rounded-tl-2xl rounded-tr-2xl px-4 py-2.5">
441
+ <p class="text-sm font-medium mb-2">根据GCP标准，临床试验访视计划应包含以下核心要素：</p>
442
+ <ul class="text-sm list-disc pl-5 space-y-1">
443
+ <li>访视目的和研究内容</li>
444
+ <li>时间安排和访视频率</li>
445
+ <li>受试者需要进行的检查和评估</li>
446
+ <li>研究者需要完成的文件记录</li>
447
+ <li>样本采集和处理要求</li>
448
+ <li>安全性和不良事件监测要求</li>
449
+ </ul>
450
+ <div class="mt-2">
451
+ <a href="#" class="text-xs reference-link text-secondary font-medium underline underline-offset-2 decoration-dashed">参考文件: <span>《临床试验监查工作标准流程》2023版</span></a>
452
+ </div>
453
+ </div>
454
+ <span class="text-xs text-gray-500 mt-1">AI回答 · 可信度98%</span>
455
+ </div>
456
+ </div>
457
+ </div>
458
+
459
+ <div class="border-t p-3 bg-gray-50">
460
+ <div class="relative">
461
+ <input type="text" placeholder="输入关于标准流程的问题..." class="w-full px-4 py-3 pr-10 rounded-lg border border-gray-300 focus:ring-2 focus:ring-secondary focus:border-transparent">
462
+ <button class="absolute right-3 top-3 w-8 h-8 rounded-full bg-secondary hover:bg-primary text-white flex items-center justify-center transition">
463
+ <i class="fas fa-paper-plane"></i>
464
+ </button>
465
+ </div>
466
+ </div>
467
+ </div>
468
+
469
+ <script>
470
+ // AI窗口切换功能
471
+ const toggleAI = document.getElementById('toggleAI');
472
+ const aiWindow = document.querySelector('.ai-window');
473
+
474
+ toggleAI.addEventListener('click', function() {
475
+ if (aiWindow.classList.contains('max-w-md')) {
476
+ aiWindow.classList.remove('max-w-md', 'max-h-96');
477
+ aiWindow.classList.add('max-w-xs', 'max-h-16');
478
+ toggleAI.innerHTML = '<i class="fas fa-comment"></i>';
479
+ } else {
480
+ aiWindow.classList.add('max-w-md', 'max-h-96');
481
+ aiWindow.classList.remove('max-w-xs', 'max-h-16');
482
+ toggleAI.innerHTML = '<i class="fas fa-times"></i>';
483
+ }
484
+ });
485
+
486
+ // 卡片悬停效果增强
487
+ const cards = document.querySelectorAll('.knowledge-card');
488
+ cards.forEach(card => {
489
+ card.addEventListener('mouseenter', function() {
490
+ this.style.zIndex = "10";
491
+ });
492
+
493
+ card.addEventListener('mouseleave', function() {
494
+ this.style.zIndex = "auto";
495
+ });
496
+ });
497
+ </script>
498
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=maomaobj/knowledgelist" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
499
+ </html>
prompts.txt ADDED
@@ -0,0 +1,3 @@
 
 
 
 
1
+ 请为我设计一个专业、结构清晰、适用于医疗行业的网页，用于展示临床试验知识库中某一板块的内容（如“标准流程”或“培训材料”）。页面整体风格应为医疗科技风，蓝白主色调，模块化布局，信息密度适中，具备结构化卡片展示、智能问答支持与多维度筛选功能。 页面结构如下： 1️⃣ 页面顶部 页面标题：如“标准流程知识库” 下方设置一个搜索框，提示语为“搜索流程名称、关键词或适用阶段” 搜索框右侧可提供筛选按钮（展开/收起） 2️⃣ 页面主体采用两栏式布局： 🧭 左侧为筛选栏（窄栏） 筛选分类包括： 使用阶段（如：项目启动 / 执行 / 锁库 / 结题） 适用角色（如：PI / CRC / CRA / 质控 / 数据员） 文档类型（流程图 / PDF / Word / 视频） 标签（可多选，如“招募”、“伦理”、“稽查”） 发布时间范围（近一月 / 半年 / 一年） 📚 右侧为知识卡片列表区（主内容区） 每条知识以卡片形式展示，包含以下内容： 标题（例如：【标准流程】访视计划制定步骤） 简要描述（1–2行） 来源单位（如“北京协和医院”） 标签列表（例如：流程图 / 启动阶段 / CRC） 操作按钮：[预览] [查看详情] [下载] [引用] 页面底部支持分页或“加载更多”方式 3️⃣ 页面右下角设置一个固定的 AI 问答窗口 模块标题：“AI问答助手（标准流程）” 包含输入框、历史问题示例、智能回答内容块 示例问题包括： “数据锁库前需要完成哪些流程？” “CRC在受试者入组前要准备什么？” 回答部分需结构清晰，并显示出处链接或文档名 💡 页面风格要求： 医疗行业风格，蓝白主色，文字信息突出 筛选栏为浅灰背景，与内容区分明显 卡片风格统一，信息排列规整 AI问答区域可浮动、可折叠，界面简洁 ✅ 使用建议 你可以将此提示词直接粘贴至 DeepSite 的 Prompt 输入框，选择页面类型为： 页面类型：知识管理 / 医疗系统 / 列表页 语言：支持中文（如需英文UI请告知） 风格：科技感 / 信息清晰 / 企业门户风格
2
+ 请为我设计一个专业、结构清晰、适用于医疗行业的网页，用于展示临床试验知识库中某一板块的内容（如“标准流程”或“培训材料”）。页面整体风格应为医疗科技风，蓝白主色调，模块化布局，信息密度适中，具备结构化卡片展示、智能问答支持与多维度筛选功能。 页面结构如下： 1️⃣ 页面顶部 页面标题：如“标准流程知识库” 下方设置一个搜索框，提示语为“搜索流程名称、关键词或适用阶段” 搜索框右侧可提供筛选按钮（展开/收起） 2️⃣ 页面主体采用两栏式布局： 🧭 左侧为筛选栏（窄栏） 筛选分类包括： 使用阶段（如：项目启动 / 执行 / 锁库 / 结题） 适用角色（如：PI / CRC / CRA / 质控 / 数据员） 文档类型（流程图 / PDF / Word / 视频） 标签（可多选，如“招募”、“伦理”、“稽查”） 发布时间范围（近一月 / 半年 / 一年） 📚 右侧为知识卡片列表区（主内容区） 每条知识以卡片形式展示，包含以下内容： 标题（例如：【标准流程】访视计划制定步骤） 简要描述（1–2行） 来源单位（如“北京协和医院”） 标签列表（例如：流程图 / 启动阶段 / CRC） 操作按钮：[预览] [查看详情] [下载] [引用] 页面底部支持分页或“加载更多”方式 3️⃣ 页面右下角设置一个固定的 AI 问答窗口 模块标题：“AI问答助手（标准流程）” 包含输入框、历史问题示例、智能回答内容块 示例问题包括： “数据锁库前需要完成哪些流程？” “CRC在受试者入组前要准备什么？” 回答部分需结构清晰，并显示出处链接或文档名 💡 页面风格要求： 医疗行业风格，蓝白主色，文字信息突出 筛选栏为浅灰背景，与内容区分明显 卡片风格统一，信息排列规整 AI问答区域可浮动、可折叠，界面简洁 ✅ 使用建议 你可以将此提示词直接粘贴至 DeepSite 的 Prompt 输入框，选择页面类型为： 页面类型：知识管理 / 医疗系统 / 列表页 语言：支持中文（如需英文UI请告知） 风格：科技感 / 信息清晰 / 企业门户风格
3
+ 请为我设计一个专业、结构清晰、适用于医疗行业的网页，用于展示临床试验知识库中某一板块的内容（如“标准流程”或“培训材料”）。页面整体风格应为医疗科技风，蓝白主色调，模块化布局，信息密度适中，具备结构化卡片展示、智能问答支持与多维度筛选功能。 页面结构如下： 1️⃣ 页面顶部 页面标题：如“标准流程知识库” 下方设置一个搜索框，提示语为“搜索流程名称、关键词或适用阶段” 搜索框右侧可提供筛选按钮（展开/收起） 2️⃣ 页面主体采用两栏式布局： 🧭 左侧为筛选栏（窄栏） 筛选分类包括： 使用阶段（如：项目启动 / 执行 / 锁库 / 结题） 适用角色（如：PI / CRC / CRA / 质控 / 数据员） 文档类型（流程图 / PDF / Word / 视频） 标签（可多选，如“招募”、“伦理”、“稽查”） 发布时间范围（近一月 / 半年 / 一年） 📚 右侧为知识卡片列表区（主内容区） 每条知识以卡片形式展示，包含以下内容： 标题（例如：【标准流程】访视计划制定步骤） 简要描述（1–2行） 来源单位（如“北京协和医院”） 标签列表（例如：流程图 / 启动阶段 / CRC） 操作按钮：[预览] [查看详情] [下载] [引用] 页面底部支持分页或“加载更多”方式 3️⃣ 页面右下角设置一个固定的 AI 问答窗口 模块标题：“AI问答助手（标准流程）” 包含输入框、历史问题示例、智能回答内容块 示例问题包括： “数据锁库前需要完成哪些流程？” “CRC在受试者入组前要准备什么？” 回答部分需结构清晰，并显示出处链接或文档名 💡 页面风格要求： 医疗行业风格，蓝白主色，文字信息突出 筛选栏为浅灰背景，与内容区分明显 卡片风格统一，信息排列规整 AI问答区域可浮动、可折叠，界面简洁 ✅ 使用建议 你可以将此提示词直接粘贴至 DeepSite 的 Prompt 输入框，选择页面类型为： 页面类型：知识管理 / 医疗系统 / 列表页 语言：支持中文（如需英文UI请告知） 风格：科技感 / 信息清晰 / 企业门户风格