|
|
@@ -11,26 +11,48 @@
|
|
|
#editor {
|
|
|
height: 150px;
|
|
|
}
|
|
|
+ #model {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ width: 50%;
|
|
|
+ height: 50%;
|
|
|
+ }
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
-<a href="https://memos.tianyunperfect.cn/">memos主页</a>
|
|
|
-<!--输入框，绑定回车事件，触发查询-->
|
|
|
-<input style="margin-left: 30px; width: 70vw; position: fixed;top: 10px" placeholder="搜索" type="text" id="search" onkeydown="if(event.keyCode===13) {search()}">
|
|
|
-<br><br>
|
|
|
-<div></div>
|
|
|
-<!-- 创建一个用于编辑的容器 -->
|
|
|
-<div id="editor"></div>
|
|
|
-
|
|
|
-<!-- 添加多选按钮 -->
|
|
|
-<div id="tags"></div>
|
|
|
-
|
|
|
-<br>
|
|
|
-<br>
|
|
|
-<!-- 添加发送按钮 -->
|
|
|
-<button id="log" style="float: right; height: 100px;width: 200px; font-size: 40px" onclick="sendData()">记录</button>
|
|
|
-<div id="memos_list">
|
|
|
+<div id="all">
|
|
|
+ <div style="position: fixed;top: 10px;">
|
|
|
+ <a href="https://memos.tianyunperfect.cn/">memos主页</a>
|
|
|
+ <!--输入框，绑定回车事件，触发查询-->
|
|
|
+ <input style="margin-left: 30px; width: 70vw;" placeholder="搜索" type="text" id="search" onkeydown="if(event.keyCode===13) {search()}">
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <br><br>
|
|
|
+ <div></div>
|
|
|
+ <!-- 创建一个用于编辑的容器 -->
|
|
|
+ <div id="editor"></div>
|
|
|
+
|
|
|
+ <!-- 添加多选按钮 -->
|
|
|
+ <div id="tags"></div>
|
|
|
+
|
|
|
+
|
|
|
+ <br>
|
|
|
+ <br>
|
|
|
+ <!-- 添加发送按钮 -->
|
|
|
+ <button id="log" style="float: right; height: 100px;width: 200px; font-size: 40px" onclick="sendData()">记录</button>
|
|
|
+ <div id="memos_list">
|
|
|
+
|
|
|
+ </div>
|
|
|
+</div>
|
|
|
|
|
|
+<div id="model" style="display: none">
|
|
|
+ <div id="editorModel"></div>
|
|
|
+ <br>
|
|
|
+ <!-- 取消 和 确认按钮-->
|
|
|
+ <button onclick="hideModel()" style="margin-right: 50px">取消</button>
|
|
|
+ <button onclick="updateById()">确认</button>
|
|
|
</div>
|
|
|
<!-- 引入Quill库 -->
|
|
|
<script src="./js/cdn.quilljs.com_1.3.6_quill.js"></script>
|
|
|
@@ -76,9 +98,19 @@
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
+ function showModel() {
|
|
|
+ document.getElementById('model').style.display = 'block';
|
|
|
+ // 隐藏编辑器
|
|
|
+ document.getElementById('all').style.display = 'none';
|
|
|
+ }
|
|
|
+ function hideModel() {
|
|
|
+ document.getElementById('model').style.display = 'none';
|
|
|
+ // 显示编辑器
|
|
|
+ document.getElementById('all').style.display = 'block';
|
|
|
+ }
|
|
|
|
|
|
|
|
|
- const quill = new Quill('#editor', {
|
|
|
+ let option = {
|
|
|
theme: 'snow', // 指定使用的主题
|
|
|
modules: {
|
|
|
toolbar: [
|
|
|
@@ -86,7 +118,9 @@
|
|
|
[{'list': 'ordered'}, {'list': 'bullet'}, {'indent': '-1'}, {'indent': '+1'}, 'image', 'video'],
|
|
|
]
|
|
|
}
|
|
|
- });
|
|
|
+ };
|
|
|
+ const quill = new Quill('#editor', option);
|
|
|
+ const quillModel = new Quill('#editorModel', option);
|
|
|
quill.focus();
|
|
|
|
|
|
let contentStr = 'content';
|
|
|
@@ -97,6 +131,20 @@
|
|
|
quill.root.innerHTML = item;
|
|
|
}
|
|
|
|
|
|
+ // 如果处于编辑状态，则执行esc取消
|
|
|
+ window.onkeydown = function (event) {
|
|
|
+ if (event.keyCode === 27 && document.getElementById('model').style.display === 'block') {
|
|
|
+ hideModel();
|
|
|
+ }
|
|
|
+ // 如果是meta + enter 则保存
|
|
|
+ if (event.metaKey && event.keyCode === 13) {
|
|
|
+ updateById();
|
|
|
+ }
|
|
|
+ // 如果是ctrl + enter 则保存
|
|
|
+ if (event.ctrlKey && event.keyCode === 13) {
|
|
|
+ updateById();
|
|
|
+ }
|
|
|
+ };
|
|
|
|
|
|
quill.on('text-change', function (delta, oldDelta, source) {
|
|
|
localStorage.setItem(contentStr, quill.root.innerHTML);
|
|
|
@@ -189,6 +237,7 @@
|
|
|
quill.root.innerHTML = '';
|
|
|
|
|
|
localStorage.removeItem(contentStr);
|
|
|
+ search();
|
|
|
});
|
|
|
}
|
|
|
|
|
|
@@ -204,8 +253,23 @@
|
|
|
return categories;
|
|
|
}
|
|
|
|
|
|
+ let tmpId;
|
|
|
+ // 更新数据
|
|
|
+ async function updateById() {
|
|
|
+ let content = await deltaToMarkdown(quillModel.getContents());
|
|
|
+ let data = {
|
|
|
+ id: tmpId,
|
|
|
+ content: content
|
|
|
+ };
|
|
|
+ requestUtil.async(`https://web_history.tianyunperfect.cn/memos/update`, 'post', data, {}).then(res => {
|
|
|
+ showMsg('保存成功', 1);
|
|
|
+ hideModel();
|
|
|
+ search();
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
function search() {
|
|
|
- let search = document.getElementById('search').value;
|
|
|
+ let searchStr = document.getElementById('search').value;
|
|
|
// 如果标签不为空，则 拼接成 tag_str ，逗号分隔
|
|
|
let tag_str = '';
|
|
|
let checkboxes = document.querySelectorAll('input[name="category"]:checked');
|
|
|
@@ -217,7 +281,7 @@
|
|
|
// 入参：search tag_str
|
|
|
//
|
|
|
// {'code': 200, 'res': [{'id': 11, 'resource_name': 'g2cyE6nXNCdqsm4ZH2R3Bs', 'creator_id': 1, 'created_ts': '2023-07-04T13:35:18', 'updated_ts': '2024-04-22T13:55:25', 'row_status': 'NORMAL', 'content': '康宁的女儿 易安 \n小名：气气\n#备份', 'visibility': 'PRIVATE'}]}
|
|
|
- let params = {'search': search, tag_str: tag_str}
|
|
|
+ let params = {'search': searchStr, tag_str: tag_str}
|
|
|
let url = 'https://web_history.tianyunperfect.cn/memos/list';
|
|
|
// 拼接url
|
|
|
let urlWithParams = requestUtil.buildUrl(url, params);
|
|
|
@@ -225,19 +289,63 @@
|
|
|
// console.log(res);
|
|
|
res = res['res'];
|
|
|
let div = document.querySelector('#memos_list');
|
|
|
+ // flex 定位
|
|
|
div.innerHTML = '';
|
|
|
res.forEach(item => {
|
|
|
let tmpDiv = document.createElement('div');
|
|
|
tmpDiv.innerText = item['content'];
|
|
|
// 样式加上border，点击跳转到对应的url https://memos.tianyunperfect.cn/m/ + item['resource_name']
|
|
|
tmpDiv.style.border = '1px solid #000';
|
|
|
+ // 宽度 70vw
|
|
|
+ tmpDiv.style.width = '70vw';
|
|
|
tmpDiv.style.margin = '10px';
|
|
|
tmpDiv.style.padding = '10px';
|
|
|
tmpDiv.style.cursor = 'pointer';
|
|
|
- tmpDiv.onclick = function () {
|
|
|
- window.open(`https://memos.tianyunperfect.cn/m/${item['resource_name']}`);
|
|
|
+ // inline
|
|
|
+ tmpDiv.style.display = 'inline-block';
|
|
|
+ tmpDiv.ondblclick = function () {
|
|
|
+ tmpId = item['id'];
|
|
|
+ quillModel.root.innerHTML = item['content'];
|
|
|
+ showModel();
|
|
|
+ // focus
|
|
|
+ quillModel.focus();
|
|
|
};
|
|
|
div.appendChild(tmpDiv);
|
|
|
+
|
|
|
+
|
|
|
+ // 右侧添加一个编辑按钮
|
|
|
+ let editBtn = document.createElement('button');
|
|
|
+ editBtn.innerText = '跳转查看';
|
|
|
+ // margin 10
|
|
|
+ editBtn.style.margin = '10px';
|
|
|
+ // inline
|
|
|
+ editBtn.style.display = 'inline-block';
|
|
|
+ editBtn.onclick = function () {
|
|
|
+ window.open(`https://memos.tianyunperfect.cn/m/${item['resource_name']}`);
|
|
|
+ };
|
|
|
+ div.appendChild(editBtn);
|
|
|
+
|
|
|
+ // 删除按钮
|
|
|
+ let delBtn = document.createElement('button');
|
|
|
+ delBtn.innerText = '删除';
|
|
|
+ delBtn.style.margin = '10px';
|
|
|
+ // inline
|
|
|
+ delBtn.style.display = 'inline-block';
|
|
|
+
|
|
|
+ delBtn.onclick = function () {
|
|
|
+ // 确认是否删除
|
|
|
+ if (!confirm('确认删除吗？')) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let data = {
|
|
|
+ id: item['id']
|
|
|
+ };
|
|
|
+ requestUtil.async(`https://web_history.tianyunperfect.cn/memos/delete`, 'post', data, {}).then(res => {
|
|
|
+ showMsg('删除成功', 1);
|
|
|
+ search();
|
|
|
+ });
|
|
|
+ };
|
|
|
+ div.appendChild(delBtn);
|
|
|
});
|
|
|
});
|
|
|
}
|
