|
|
@@ -1,494 +0,0 @@
|
|
|
-<!DOCTYPE html>
|
|
|
-<html>
|
|
|
-<head>
|
|
|
- <meta charset="UTF-8">
|
|
|
- <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
|
|
|
- <title>memos记录</title>
|
|
|
- <!-- 引入Quill样式 -->
|
|
|
- <!-- <link rel="stylesheet" href="./js/quill.snow.css">-->
|
|
|
- <link rel="stylesheet" href="https://cdn.staticfile.org/lxgw-wenkai-screen-webfont/1.6.0/lxgwwenkaiscreen.css"></link>
|
|
|
- <script src="js/util.js"></script>
|
|
|
- <style>
|
|
|
- body {
|
|
|
- font-family: "LXGW WenKai Screen", sans-serif !important;
|
|
|
- }
|
|
|
-
|
|
|
- .border {
|
|
|
- border: 1px solid #b7b6b6;
|
|
|
- border-radius: 5px;
|
|
|
- }
|
|
|
-
|
|
|
- .editor {
|
|
|
- min-height: 50px;
|
|
|
- padding: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- #mask {
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
-
|
|
|
- #model {
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: 50%;
|
|
|
- transform: translate(-50%, -50%);
|
|
|
- background-color: white;
|
|
|
- width: 50%;
|
|
|
- padding: 20px;
|
|
|
- border-radius: 5px;
|
|
|
- }
|
|
|
- .myTop{
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- background-image: url("./img/white.png");
|
|
|
- /* 背景铺满整个div*/
|
|
|
- background-size: 100% 100%;
|
|
|
- width: 100%;
|
|
|
- padding: 10px;
|
|
|
- z-index: 100;
|
|
|
- }
|
|
|
- </style>
|
|
|
- <script src="js/markdown.min.js"></script>
|
|
|
-</head>
|
|
|
-<body>
|
|
|
-<div id="all">
|
|
|
- <div class="myTop">
|
|
|
- <a href="https://memos.tianyunperfect.cn/">memos主页</a>
|
|
|
- <!-- 页码输入框，默认为1，修改触发查询-->
|
|
|
- <span style="margin-left: 20px">页码：</span>
|
|
|
- <input style="width: 50px; margin-left: 20px;padding-left: 10px" type="number" class="border" id="page" value="1" onkeydown="if(event.keyCode===13) {search()}">
|
|
|
- <!--输入框，绑定回车事件，触发查询-->
|
|
|
- <input style="margin-left: 30px; width: 70vw; padding-left: 10px" placeholder="搜索" type="text" id="search" class="border" onkeydown="if(event.keyCode===13) {search()}">
|
|
|
- <br><br>
|
|
|
- <div></div>
|
|
|
- <div style="display: flex;align-items:stretch">
|
|
|
- <!-- 创建一个用于编辑的容器 -->
|
|
|
- <div id="editor" class="editor border" style="width: 80%" contenteditable="true" oninput="localStorage.setItem(contentStr, getEditContent())"></div>
|
|
|
- <!-- 添加发送按钮 -->
|
|
|
- <button id="log" style="margin-left: 20px; width: 10%; font-size: 2rem" onclick="sendData()">记录</button>
|
|
|
- </div>
|
|
|
-
|
|
|
-
|
|
|
- <!-- 添加多选按钮 -->
|
|
|
- <div id="tags"></div>
|
|
|
- </div>
|
|
|
-
|
|
|
-
|
|
|
- <div style="margin-top: 150px"></div>
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
- <div id="memos_list">
|
|
|
-
|
|
|
- </div>
|
|
|
-</div>
|
|
|
-
|
|
|
-<div id="mask" style="display: none">
|
|
|
- <div id="model">
|
|
|
- <!-- 创建时间的input-->
|
|
|
- <div style="margin: 10px; height: 20px">
|
|
|
- <label for="created_ts">创建时间</label>
|
|
|
- <input id="created_ts"></input>
|
|
|
- </div>
|
|
|
- <div id="editorModel" contenteditable="true" class="editor border" style="width: 95%"></div>
|
|
|
- <br>
|
|
|
- <!-- 取消 和 确认按钮-->
|
|
|
- <button onclick="hideModel()" style="margin-right: 50px">取消</button>
|
|
|
- <button onclick="updateById()">确认</button>
|
|
|
- </div>
|
|
|
-</div>
|
|
|
-
|
|
|
-<!-- 引入Quill库 -->
|
|
|
-<!--<script src="./js/cdn.quilljs.com_1.3.6_quill.js"></script>-->
|
|
|
-<!--异步请求示例：requestUtil.sync('https://jsonplaceholder.typicode.com/posts/1', 'post', data, headers) .then(data => console.log(data))-->
|
|
|
-<script>
|
|
|
- let authStr = "bearer eyJhbGciOiJIUzI1NiIsImtpZCI6InYxIiwidHlwIjoiSldUIn0.eyJuYW1lIjoidGlhbnl1bnBlcmZlY3QiLCJpc3MiOiJtZW1vcyIsInN1YiI6IjEiLCJhdWQiOlsidXNlci5hY2Nlc3MtdG9rZW4iXSwiaWF0IjoxNzA5MTc5NTUyfQ.LFxWB4efya1sL7VoJ42xpXxbAip-udT_Kx2OwZ8Y3-E";
|
|
|
- let myHeaders = {
|
|
|
- 'Content-type': 'application/json',
|
|
|
- 'Authorization': authStr
|
|
|
- };
|
|
|
- // console.log(location.href)
|
|
|
- // console.log(location.href.indexOf(tag))
|
|
|
- // 设置多选按钮 标签
|
|
|
- requestUtil.async('https://memos.tianyunperfect.cn/api/v1/tag', 'get', null, {'Authorization': authStr}).then(res => {
|
|
|
- // console.log(res); ['tag1','tag2']
|
|
|
- // 在 id tags 里面拼接res数组 ，示例todo标签 <input type="checkbox" id="todo" name="category" value="todo" checked> <label for="todo">todo</label>
|
|
|
- let tags = document.getElementById('tags');
|
|
|
- res.forEach(tag => {
|
|
|
- let input = document.createElement('input');
|
|
|
- let tagsFromLocal = getTagsFromLocal();
|
|
|
- // 如果是location.href 包含tag，则设置为选中状态, href 要反编译以识别中文
|
|
|
- if (decodeURI(location.href).indexOf(tag) !== -1) {
|
|
|
- input.checked = true;
|
|
|
- } else if (tagsFromLocal.indexOf(tag) !== -1) {
|
|
|
- input.checked = true;
|
|
|
- }
|
|
|
- input.type = 'checkbox';
|
|
|
- input.classList.add('border');
|
|
|
- input.id = tag;
|
|
|
- input.name = 'category';
|
|
|
- input.value = tag;
|
|
|
- let label = document.createElement('label');
|
|
|
- // 设置margin-right 20
|
|
|
- label.style.marginRight = '10px';
|
|
|
- label.htmlFor = tag;
|
|
|
- label.innerText = tag;
|
|
|
- tags.appendChild(input);
|
|
|
- tags.appendChild(label);
|
|
|
- });
|
|
|
-
|
|
|
- search();
|
|
|
- // id="tags" 里面的多选按钮，点击后触发search
|
|
|
- let checkboxes = document.querySelectorAll('input[name="category"]');
|
|
|
- checkboxes.forEach(checkbox => {
|
|
|
- checkbox.onclick = function () {
|
|
|
- search();
|
|
|
- setTagsToLocal();
|
|
|
- }
|
|
|
- });
|
|
|
- myEdit.focus();
|
|
|
- });
|
|
|
-
|
|
|
- function setTagsToLocal() {
|
|
|
- // 如果是location.href 包含tag，则return，否则存储到localStorage
|
|
|
- if (decodeURI(location.href).indexOf("tag") !== -1) {
|
|
|
- return;
|
|
|
- }
|
|
|
- // 存储到localStorage
|
|
|
- let tags = getSelectedCategories();
|
|
|
- localStorage.setItem('tags', JSON.stringify(tags));
|
|
|
- }
|
|
|
-
|
|
|
- function getTagsFromLocal() {
|
|
|
- if (decodeURI(location.href).indexOf("tag") !== -1) {
|
|
|
- return [];
|
|
|
- }
|
|
|
- let tags = localStorage.getItem('tags');
|
|
|
- if (tags) {
|
|
|
- tags = JSON.parse(tags);
|
|
|
- return tags;
|
|
|
- }
|
|
|
- return [];
|
|
|
- }
|
|
|
-
|
|
|
- function showModel() {
|
|
|
- document.getElementById('mask').style.display = 'block';
|
|
|
- }
|
|
|
-
|
|
|
- function hideModel() {
|
|
|
- document.getElementById('mask').style.display = 'none';
|
|
|
- }
|
|
|
-
|
|
|
- // 获取编辑器
|
|
|
-
|
|
|
- const myEdit = document.querySelector('#editor');
|
|
|
- const model = document.querySelector('#editorModel');
|
|
|
-
|
|
|
- function getEditContent() {
|
|
|
- return myEdit.innerText;
|
|
|
- }
|
|
|
-
|
|
|
- function getModelContent() {
|
|
|
- return model.innerText;
|
|
|
- }
|
|
|
-
|
|
|
- let contentStr = 'content';
|
|
|
-
|
|
|
- // 从localStorage中获取内容
|
|
|
- let item = localStorage.getItem(contentStr);
|
|
|
- if (item != null) {
|
|
|
- myEdit.value = item;
|
|
|
- }
|
|
|
-
|
|
|
- // 如果处于编辑状态，则执行esc取消
|
|
|
- window.onkeydown = function (event) {
|
|
|
- let edit = document.getElementById('mask').style.display === 'block';
|
|
|
- if (!edit) {
|
|
|
- return;
|
|
|
- }
|
|
|
- // esc
|
|
|
- if (event.keyCode === 27) {
|
|
|
- hideModel();
|
|
|
- }
|
|
|
- // 如果是meta + enter 则保存
|
|
|
- if (event.metaKey && event.keyCode === 13) {
|
|
|
- updateById();
|
|
|
- }
|
|
|
- // 如果是ctrl + enter 则保存
|
|
|
- if (event.ctrlKey && event.keyCode === 13) {
|
|
|
- updateById();
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- // 发送数据
|
|
|
- async function sendData() {
|
|
|
- // 使id=log 不可用
|
|
|
- let logBtn = document.getElementById('log');
|
|
|
- logBtn.disabled = true;
|
|
|
- logBtn.innerText = '正在发送...';
|
|
|
-
|
|
|
- const content = getEditContent();
|
|
|
- const categories = getSelectedCategories();
|
|
|
-
|
|
|
- // 添加多选按钮选择的分类到内容前面
|
|
|
- let updatedContent = content;
|
|
|
- if (categories.length > 0) {
|
|
|
- // 循环拼接类似 #tag #tag2 content
|
|
|
- updatedContent = categories.map(tag => `#${tag}`).join(' ') + ' ' + content;
|
|
|
- }
|
|
|
-
|
|
|
- // updatedContent 去除尾部的\n,可能有多个
|
|
|
- updatedContent = updatedContent.replace(/\n+$/, '');
|
|
|
-
|
|
|
-
|
|
|
- // 调用数据备份接口
|
|
|
- const data = {
|
|
|
- content: updatedContent
|
|
|
- };
|
|
|
-
|
|
|
- // 发送异步请求
|
|
|
- requestUtil.async('https://memos.tianyunperfect.cn/api/v1/memo', 'post', data, myHeaders).then(res => {
|
|
|
- // alert(JSON.stringify(res));
|
|
|
- if (res['name']) {
|
|
|
- // window.location.href = `https://memos.tianyunperfect.cn/m/${res['name']}`;
|
|
|
- showMsg('记录成功', 1);
|
|
|
- }
|
|
|
-
|
|
|
- logBtn.disabled = false;
|
|
|
- logBtn.innerText = '记录';
|
|
|
- myEdit.innerHTML = '';
|
|
|
-
|
|
|
- localStorage.removeItem(contentStr);
|
|
|
- search();
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- // 获取选择的分类
|
|
|
- function getSelectedCategories() {
|
|
|
- const checkboxes = document.querySelectorAll('input[name="category"]:checked');
|
|
|
- const categories = [];
|
|
|
-
|
|
|
- checkboxes.forEach(checkbox => {
|
|
|
- categories.push(checkbox.value);
|
|
|
- });
|
|
|
-
|
|
|
- return categories;
|
|
|
- }
|
|
|
-
|
|
|
- let tmpId;
|
|
|
-
|
|
|
-
|
|
|
- function formatTimeStr(timeStr) {
|
|
|
- // "2024-04-25T08:25:54" 转为 "2024-04-25 08:25:54"
|
|
|
- return timeStr.replace('T', ' ').substring(0, 19);
|
|
|
- }
|
|
|
-
|
|
|
- let resourceMap = {};
|
|
|
-
|
|
|
- // 更新数据
|
|
|
- async function updateById() {
|
|
|
- let content = getModelContent();
|
|
|
- content = content.replace(/\n+$/, '');
|
|
|
-
|
|
|
- let data = {
|
|
|
- id: tmpId,
|
|
|
- content: content,
|
|
|
- created_ts: document.getElementById('created_ts').value
|
|
|
- };
|
|
|
- requestUtil.async(`https://web_history.tianyunperfect.cn/memos/update`, 'post', data, {}).then(res => {
|
|
|
- showMsg('保存成功', 1);
|
|
|
- hideModel();
|
|
|
- // 根据id ，更新当前页面
|
|
|
- document.getElementById('time_' + tmpId).innerText = document.getElementById('created_ts').value;
|
|
|
- let contentDom = document.getElementById(tmpId);
|
|
|
- contentDom.innerText = content;
|
|
|
- if (resourceMap[tmpId]) {
|
|
|
- appendImg(contentDom, tmpId);
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- function appendImg(tmpDiv, id) {
|
|
|
- // tmpDiv 新增一个换行
|
|
|
- tmpDiv.appendChild(document.createElement('br'));
|
|
|
- // 循环遍历，以memo_id为key，resource_name数组为value
|
|
|
- resourceMap[id].forEach(internal_path => {
|
|
|
- // 创建img
|
|
|
- let img = document.createElement('img');
|
|
|
- img.src = `https://memos_assert.tianyunperfect.cn/${internal_path}?width=150`;
|
|
|
- img.style.maxHeight = '200px';
|
|
|
- img.style.maxWidth = '200px';
|
|
|
- img.style.margin = '10px 10px 0 0';
|
|
|
- img.style.cursor = 'pointer';
|
|
|
- // 添加到div
|
|
|
- tmpDiv.appendChild(img);
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- function search() {
|
|
|
- resourceMap = {};
|
|
|
- // 页面滚动到顶部
|
|
|
- document.documentElement.scrollTo(0, 0);
|
|
|
-
|
|
|
- let searchStr = document.getElementById('search').value;
|
|
|
- // 如果标签不为空，则 拼接成 tag_str ，逗号分隔
|
|
|
- let tag_str = '';
|
|
|
- let checkboxes = document.querySelectorAll('input[name="category"]:checked');
|
|
|
- checkboxes.forEach(checkbox => {
|
|
|
- tag_str += checkbox.value + ',';
|
|
|
- });
|
|
|
- // https://web_history.tianyunperfect.cn/memos/list
|
|
|
- // get
|
|
|
- // 入参：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': searchStr, tag_str: tag_str, page: document.getElementById('page').value, page_size: 100};
|
|
|
- let url = 'https://web_history.tianyunperfect.cn/memos/list';
|
|
|
- // 拼接url
|
|
|
- let urlWithParams = requestUtil.buildUrl(url, params);
|
|
|
- requestUtil.async(urlWithParams, 'get', null, null).then(res => {
|
|
|
- // console.log(res);
|
|
|
- res = res['res'];
|
|
|
- let div = document.querySelector('#memos_list');
|
|
|
-
|
|
|
- // 如果res为空，则直接返回
|
|
|
- if (res.length === 0) {
|
|
|
- div.innerHTML = '';
|
|
|
- return;
|
|
|
- }
|
|
|
- // 循环获取里面所有的id数组
|
|
|
- let idArr = [];
|
|
|
- res.forEach(item => {
|
|
|
- idArr.push(item['id']);
|
|
|
- });
|
|
|
- let sourceUrl = "https://web_history.tianyunperfect.cn/memos/resource"
|
|
|
- let sourceData = {
|
|
|
- ids: idArr.join(',') // 逗号分隔的字符串
|
|
|
- }
|
|
|
- // 获取资源
|
|
|
- let sourceRes = requestUtil.sync(sourceUrl, 'post', sourceData, {});
|
|
|
- // {'code': 200, 'res': [{'memo_id': 1, 'resource_name': 'EfdmvRsodBviDQWRmDiTaV'}, {'memo_id': 4, 'resource_name': '2rY5kmn3AHsy23vK4vSskV'}, {'memo_id': 7, 'resource_name': 'FMhzJXjoTa7fdtbbCBjXnt'}]}
|
|
|
- // 循环遍历，以memo_id为key，resource_name数组为value
|
|
|
- sourceRes['res'].forEach(item => {
|
|
|
- if (resourceMap[item['memo_id']]) {
|
|
|
- resourceMap[item['memo_id']].push(item['internal_path']);
|
|
|
- } else {
|
|
|
- resourceMap[item['memo_id']] = [item['internal_path']];
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- // flex 定位
|
|
|
- div.innerHTML = '';
|
|
|
- res.forEach(item => {
|
|
|
- let lineDiv = document.createElement('div');
|
|
|
- lineDiv.style.display = 'flex';
|
|
|
- lineDiv.style.alignItems = 'flex-end';
|
|
|
-
|
|
|
- div.appendChild(lineDiv);
|
|
|
-
|
|
|
- let contentDiv = document.createElement('div');
|
|
|
- contentDiv.className = 'border';
|
|
|
- contentDiv.style.width = '70vw';
|
|
|
- contentDiv.style.margin = '10px';
|
|
|
- contentDiv.style.padding = '10px';
|
|
|
- contentDiv.style.cursor = 'pointer';
|
|
|
- lineDiv.appendChild(contentDiv);
|
|
|
-
|
|
|
- let timeStr = formatTimeStr(item['created_ts']);
|
|
|
- // 创建一个span 标签，显示时间
|
|
|
- let timeSpan = document.createElement('div');
|
|
|
- let id = item['id'];
|
|
|
- timeSpan.id = 'time_' + id;
|
|
|
- timeSpan.innerText = timeStr;
|
|
|
- timeSpan.style.marginBottom = '5px';
|
|
|
- contentDiv.appendChild(timeSpan);
|
|
|
-
|
|
|
-
|
|
|
- let tmpDiv = document.createElement('div');
|
|
|
- tmpDiv.id = id;
|
|
|
- tmpDiv.innerText = item['content'];
|
|
|
- // 宽度100%
|
|
|
- tmpDiv.style.width = '100%';
|
|
|
- // 样式加上border，点击跳转到对应的url https://memos.tianyunperfect.cn/m/ + item['resource_name']
|
|
|
-
|
|
|
- // inline
|
|
|
- tmpDiv.style.display = 'inline-block';
|
|
|
- tmpDiv.ondblclick = function () {
|
|
|
- tmpId = id;
|
|
|
- model.innerText = document.getElementById(id).innerText;
|
|
|
- document.getElementById('created_ts').value = document.getElementById('time_' + id).innerText;
|
|
|
- showModel();
|
|
|
- };
|
|
|
- // 根据id，查找是否存在资源
|
|
|
- if (resourceMap[id]) {
|
|
|
- appendImg(tmpDiv, id);
|
|
|
- }
|
|
|
- contentDiv.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']}`);
|
|
|
- };
|
|
|
- lineDiv.appendChild(editBtn);
|
|
|
-
|
|
|
- // 归档按钮
|
|
|
- let archiveBtn = document.createElement('button');
|
|
|
- archiveBtn.innerText = '归档';
|
|
|
- archiveBtn.style.margin = '10px';
|
|
|
- // inline
|
|
|
- archiveBtn.style.display = 'inline-block';
|
|
|
- archiveBtn.onclick = function () {
|
|
|
- let data = {
|
|
|
- id: id
|
|
|
- };
|
|
|
- requestUtil.async(`https://web_history.tianyunperfect.cn/memos/archive`, 'post', data, {}).then(res => {
|
|
|
- showMsg('归档成功', 1);
|
|
|
- lineDiv.style.display = 'none';
|
|
|
- });
|
|
|
- };
|
|
|
- lineDiv.appendChild(archiveBtn);
|
|
|
-
|
|
|
- // 删除按钮
|
|
|
- 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: id
|
|
|
- };
|
|
|
- requestUtil.async(`https://web_history.tianyunperfect.cn/memos/delete`, 'post', data, {}).then(res => {
|
|
|
- showMsg('删除成功', 1);
|
|
|
- lineDiv.style.display = 'none';
|
|
|
- });
|
|
|
- };
|
|
|
- lineDiv.appendChild(delBtn);
|
|
|
- });
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
-</script>
|
|
|
-
|
|
|
-</body>
|
|
|
-</html>
|
tianyun