78 lines
3.2 KiB
HTML
78 lines
3.2 KiB
HTML
{% extends "base.html" %}
|
|
{% block head %}
|
|
<script src="/static/js/vendor/tiptap-bundle.min.js"></script>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<!-- 左侧边栏 -->
|
|
<aside class="sidebar">
|
|
<input class="input" type="text" placeholder="搜索笔记…" id="noteSearch">
|
|
|
|
<button class="btn btn-primary btn-block" onclick="createNote()">新建笔记</button>
|
|
|
|
<div class="sidebar-label">
|
|
<span>文件夹</span>
|
|
<span onclick="addFolder()" style="cursor:pointer; color:var(--brand); font-size:15px;" title="新建文件夹">+</span>
|
|
</div>
|
|
|
|
<div style="overflow-y:auto; flex-shrink:1;">
|
|
{% for folder in folders %}
|
|
<div class="folder-item {% if loop.first %}active{% endif %}" data-folder-id="{{ folder.id }}"
|
|
onclick="filterByFolder({{ folder.id }}, this)" style="position:relative;">
|
|
<span>📂</span>
|
|
<span style="flex:1;">{{ folder.name }}</span>
|
|
<span class="count">{{ folder.notes|length }}</span>
|
|
<span class="folder-more" onclick="event.stopPropagation();toggleFolderMenu(this)" title="更多">⋮</span>
|
|
<div class="folder-menu hidden">
|
|
<div class="folder-menu-item" onclick="renameFolder({{ folder.id }})">✏️ 重命名</div>
|
|
<div class="folder-menu-item danger" onclick="deleteFolder({{ folder.id }})">🗑 删除</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<!-- 笔记列表 -->
|
|
<div id="folderNoteList" class="hidden" style="flex:1; overflow-y:auto;"></div>
|
|
|
|
<div class="sidebar-label">标签</div>
|
|
<div style="display:flex; flex-wrap:wrap; gap:4px;">
|
|
{% for tag in tags %}
|
|
<span class="tag-badge" onclick="filterByTag({{ tag.id }}, this)">{{ tag.name }}</span>
|
|
{% endfor %}
|
|
<span class="tag-badge tag-add" onclick="addTag()">+</span>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- 右侧编辑器 -->
|
|
<section class="content">
|
|
<div class="content-header">
|
|
<input class="content-title" id="noteTitle" value="" placeholder="无标题笔记">
|
|
<div class="toggle-group">
|
|
<button class="active" data-mode="edit" onclick="setViewMode('edit')">编辑</button>
|
|
<button data-mode="preview" onclick="setViewMode('preview')">预览</button>
|
|
<button data-mode="split" onclick="setViewMode('split')">分屏</button>
|
|
</div>
|
|
<span class="save-badge" id="saveStatus">已保存</span>
|
|
<button class="btn btn-danger-ghost btn-sm" onclick="deleteCurrentNote()">删除</button>
|
|
</div>
|
|
|
|
<div class="editor-wrap" id="editorContainer">
|
|
<div class="editor-pane" id="editPane">
|
|
<div id="tiptapToolbar" class="tb-bar"></div>
|
|
<div id="tiptapEditor"></div>
|
|
</div>
|
|
<div class="editor-pane hidden" id="previewPane">
|
|
<div id="previewContent" style="font-size:14px; line-height:1.8;"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<input type="hidden" id="currentNoteId" value="">
|
|
{% if notes %}<input type="hidden" id="firstNoteId" value="{{ notes[0].id }}">{% endif %}
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script src="/static/js/editor.js"></script>
|
|
<script src="/static/js/notes.js"></script>
|
|
{% endblock %}
|