CodeHub/templates.html at main · git-hub-cc/CodeHub · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
<!--
========================================================
==================== UI 模板集合 =======================
========================================================
此文件包含所有由JavaScript动态克隆和填充的HTML模板。
通过将模板分离，可以保持index.html的整洁，并方便管理。
-->

<!-- 用于显示加载中、空状态或错误信息的模板 -->
<template id="state-message-template">
    <div class="flex items-center justify-center h-full text-slate-500">
        <p></p>
    </div>
</template>

<!-- 用于可搜索视图中，结果列表里的单个项目（如一个命令）的模板 -->
<template id="command-item-template">
    <div class="result-item p-3 rounded-lg cursor-pointer hover:bg-slate-100 dark:hover:bg-slate-700/60 transition-all duration-200 border border-transparent">
        <h3 class="command-name font-semibold text-slate-800 dark:text-white"></h3>
        <p class="command-summary text-sm text-slate-500 dark:text-slate-400"></p>
    </div>
</template>

<!-- 用于可搜索视图中，显示项目详情的模板 -->
<template id="command-detail-template">
    <div>
        <h2 class="detail-name text-3xl font-bold text-slate-800 dark:text-white mb-2"></h2>
        <p class="detail-summary text-slate-500 dark:text-slate-400 mb-8"></p>

        <!-- “备注”部分 -->
        <div class="detail-notes-section mb-6">
            <h3 class="text-xl font-semibold text-slate-800 dark:text-white mb-3">备注</h3>
            <div class="detail-notes-content prose-slate dark:prose-dark max-w-none text-slate-600 dark:text-slate-300"></div>
        </div>

        <!-- “Shell 类型”部分 -->
        <div class="detail-shell-type-section mb-6">
            <h3 class="text-xl font-semibold text-slate-800 dark:text-white mb-3">Shell 类型</h3>
            <p class="detail-shell-type-content text-slate-600 dark:text-slate-300"></p>
        </div>

        <!-- “示例”部分的容器 -->
        <div class="examples-container space-y-6">
            <h3 class="text-xl font-semibold text-slate-800 dark:text-white mb-3">示例</h3>
        </div>
    </div>
</template>

<!-- 用于详情视图中，单个代码示例的模板 -->
<template id="command-example-template">
    <div>
        <p class="example-description mb-2 text-slate-600 dark:text-slate-300"></p>
        <!-- 代码块结构，与marked.js动态生成的结构保持一致，以便复用复制按钮逻辑 -->
        <div class="code-block relative bg-slate-100 dark:bg-slate-900 rounded-lg group">
            <button class="copy-btn absolute top-2 right-2 p-1.5 bg-slate-200/50 dark:bg-slate-700/80 rounded-md text-slate-500 hover:text-slate-900 dark:hover:text-white opacity-0 group-hover:opacity-100 transition-opacity">
                <img src="img/icons/copy.svg" class="h-5 w-5 pointer-events-none" alt="复制">
            </button>
            <pre class="p-4 text-sm font-mono overflow-x-auto"><code class="text-cyan-600 dark:text-cyan-400"></code></pre>
        </div>
    </div>
</template>

<!-- 用于笔记视图中，笔记列表里的单个项目的模板 -->
<template id="note-item-template">
    <div class="result-item p-3 rounded-lg cursor-pointer hover:bg-slate-100 dark:hover:bg-slate-700/60 transition-all duration-200 border border-transparent">
        <h3 class="note-question font-semibold text-slate-800 dark:text-white"></h3>
    </div>
</template>

<!-- 用于笔记视图中，显示单条笔记详情的模板 -->
<template id="note-detail-template">
    <div class="note-card">
        <!-- 笔记问题区域（包含显示和编辑两种状态） -->
        <div class="mb-4">
            <div class="question-display flex justify-between items-start gap-3">
                <h3 class="question-text text-2xl font-bold text-slate-800 dark:text-white flex-grow"></h3>
                <div class="flex items-center flex-shrink-0">
                    <button class="edit-question-btn p-1.5 rounded-full text-slate-400 hover:bg-slate-200 hover:text-slate-600 dark:hover:bg-slate-700 dark:hover:text-slate-200 transition-colors" title="编辑问题"><img src="img/icons/edit.svg" class="h-5 w-5 pointer-events-none" alt="编辑"></button>
                    <button class="delete-note-btn p-1.5 rounded-full text-slate-400 hover:bg-red-100 hover:text-red-600 dark:hover:bg-red-900/50 dark:hover:text-red-400 transition-colors" title="删除笔记"><img src="img/icons/trash.svg" class="h-5 w-5 pointer-events-none" alt="删除"></button>
                </div>
            </div>
            <div class="question-edit-form hidden">
                <textarea class="question-input w-full bg-slate-100 dark:bg-slate-900 border border-slate-300 dark:border-slate-600 rounded-md p-2 focus:ring-2 focus:ring-cyan-500 focus:outline-none" rows="2"></textarea>
                <div class="flex justify-end gap-2 mt-2">
                    <button class="cancel-edit-question-btn px-3 py-1 rounded-md text-sm bg-slate-200 hover:bg-slate-300 dark:bg-slate-600 dark:hover:bg-slate-500 transition-colors">取消</button>
                    <button class="save-question-btn px-3 py-1 rounded-md text-sm bg-cyan-600 hover:bg-cyan-700 text-white transition-colors">保存</button>
                </div>
            </div>
        </div>
        <hr class="border-slate-200 dark:border-slate-700/60 my-4">
        <!-- 笔记答案区域（包含显示和编辑两种状态） -->
        <div class="answer-display">
            <div class="answer-content prose prose-slate dark:prose-dark max-w-none text-slate-600 dark:text-slate-300"></div>
            <p class="answer-placeholder text-sm text-slate-400 hidden"></p>
            <button class="edit-answer-btn mt-4 text-sm font-medium text-cyan-600 hover:text-cyan-700 dark:text-cyan-500 dark:hover:text-cyan-400"></button>
        </div>
        <div class="answer-form hidden mt-3">
            <textarea class="answer-textarea w-full bg-slate-100 dark:bg-slate-900 border border-slate-300 dark:border-slate-600 rounded-md p-2 focus:ring-2 focus:ring-cyan-500 focus:outline-none" rows="8"></textarea>
            <div class="flex justify-end gap-2 mt-2">
                <button class="save-answer-btn bg-cyan-600 hover:bg-cyan-700 text-white font-bold py-1.5 px-3 rounded-md text-sm transition-colors">保存答案</button>
            </div>
        </div>
    </div>
</template>