Home Explore Help
Sign In
tianyunperfect
/
web-base--
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

1

tianyun 1 year ago
parent
4dc5bf74c8
commit
ea834bcc12
5 changed files with 118 additions and 61 deletions
Unified View Show Diff Stats
  1. 80 0
      simple-demo/edit_online.html
  2. 15 0
      simple-demo/js/util.js
  3. 1 1
      tmp/ocr_prod.html
  4. 15 43
      tmp/test.html
  5. 7 17
      tmp/tmp.js

+ 80 - 0
simple-demo/edit_online.html
View File 

@@ -0,0 +1,80 @@
 
+<!DOCTYPE html>
 
+<html>
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <title>文本编辑器示例</title>
 
+    <!-- 引入Quill样式 -->
 
+    <link rel="stylesheet" href="//cdn.quilljs.com/1.3.6/quill.snow.css">
 
+    <style>
 
+        #editor {
 
+            height: calc(100vh - 70px); /* 假设其他元素的高度是100px */
 
+        }
 
+    </style>
 
+    <script src="js/axios.min.js"></script>
 
+    <script src="js/util.js"></script>
 
+</head>
 
+<body>
 
+<!-- 创建一个用于编辑的容器 -->
 
+<div id="editor"></div>
 
+
 
+<!-- 引入Quill库 -->
 
+<script src="//cdn.quilljs.com/1.3.6/quill.js"></script>
 
+<script>
 
+    // 获取当前时间戳 减去 2024年1月1日的时间戳
 
+    var timestamp = Date.parse(new Date()) - Date.parse(new Date('2024-01-01 00:00:00'));
 
+    timestamp = timestamp / 1000;
 
+
 
+    let id = getQueryString("id");
 
+    // 获取编辑器内容
 
+    if (id) {
 
+        let res = requestUtil.sync("https://web_history.tianyunperfect.cn/content/select?id=" + id, "get");
 
+        if (res.code == 200) {
 
+            if (res.res.length > 0) {
 
+                document.getElementById("editor").innerHTML = res.res[0].content;
 
+            }
 
+        }
 
+    } else {
 
+        // 重定向
 
+        location.href = requestUtil.buildUrl(location.href, {"id": timestamp})
 
+    }
 
+
 
+    const quill = new Quill('#editor', {
 
+        theme: 'snow', // 指定使用的主题
 
+        modules: {
 
+            toolbar: false
 
+        }
 
+    });
 
+
 
+    // 获取编辑器内容
 
+    function getContent() {
 
+        const content = quill.root.innerHTML;
 
+        console.log(content);
 
+    }
 
+
 
+    function sysncContent() {
 
+        let content = quill.root.innerHTML;
 
+        let res = requestUtil.sync("https://web_history.tianyunperfect.cn/content/updateOrInsert", "post", {
 
+            "id": id,
 
+            "content": content
 
+        });
 
+        if (res.code == 200) {
 
+            console.log("同步成功");
 
+        }
 
+    }
 
+    let debounce1 = debounce(sysncContent, 1000);
 
+    // 监听编辑器内容变化
 
+    quill.on('text-change', function (delta, oldDelta, source) {
 
+        // delta - 表示变化的内容
 
+        // oldDelta - 表示变化前的内容
 
+        // source - 表示触发变化的原因，如'user'（用户输入）或'silent'（编程方式修改）
 
+
 
+        // 在这里执行你想要的操作，比如更新数据或执行其他逻辑
 
+        console.log("内容发生变化");
 
+        // 防抖 1秒内同步一次
 
+        debounce1();
 
+    });
 
+
 
+</script>
 
+
 
+</body>
 
+</html>

+ 15 - 0
simple-demo/js/util.js
View File 

@@ -11,6 +11,21 @@ function lt(obj) {
 
 function deepClone(obj) {
 
 function deepClone(obj) {
 
     return JSON.parse(JSON.stringify(obj))
 
     return JSON.parse(JSON.stringify(obj))
 
 }
 
 }
 
+function debounce(fn, wait = 50) {
 
+    // 通过闭包缓存一个定时器 id
 
+    let timer = null
 
+    // 将 debounce 处理结果当作函数返回
 
+    // 触发事件回调时执行这个返回函数
 
+    return function(...args) {
 
+        // 如果已经设定过定时器就清空上一次的定时器
 
+        if (timer) clearTimeout(timer)
 
+
 
+        // 开始设定一个新的定时器，定时器结束后执行传入的函数 fn
 
+        timer = setTimeout(() => {
 
+            fn.apply(this, args)
 
+        }, wait)
 
+    }
 
+}
 
 
 
 // 日期工具类
 
 // 日期工具类
 
 const dataUtil = {
 
 const dataUtil = {

+ 1 - 1
tmp/ocr_prod.html
View File 

@@ -8,7 +8,7 @@
 
 </head>
 
 </head>
 
 <body>
 
 <body>
 
 <!--https://aimp.aimpdev.k5.bigtree.tech/api/aimp-platform/out_api/processInvokeFile/jianbin_ocr-->
 
 <!--https://aimp.aimpdev.k5.bigtree.tech/api/aimp-platform/out_api/processInvokeFile/jianbin_ocr-->
 
-<form method="post" action="https://aimp.btaimp.k7.bigtree.tech/api/aimp-platform/out_api/processInvokeFile/jianbin_ocr" enctype="multipart/form-data">
 
+<form method="post" action="https://aimp.btaimp.k7.bigtree.tech/api/aimp-platform/out_api/processInvokeFile/kj_report_ocr" enctype="multipart/form-data">
 
     <label for="file">选择文件：</label>
 
     <label for="file">选择文件：</label>
 
     <input type="file" id="file" name="file"><br><br>
 
     <input type="file" id="file" name="file"><br><br>

+ 15 - 43
tmp/test.html
View File 

@@ -1,50 +1,22 @@
 
 <!DOCTYPE html>
 
 <!DOCTYPE html>
 
-<html lang="zh">
 
+<html>
 
 <head>
 
 <head>
 
-    <meta charset="UTF-8">
 
-    <title>表单示例</title>
 
-    <style>
 
-        .form-box {
 
-            border: 1px solid #000;
 
-            border-radius: 10px;
 
-            padding: 20px;
 
-            width: 300px;
 
-            margin: 20px;
 
-        }
 
-        .form-item {
 
-            margin: 10px 0;
 
-        }
 
-        label {
 
-            display: inline-block;
 
-            margin-right: 10px;
 
-        }
 
-        input[type="text"] {
 
-            border: 1px solid #ccc;
 
-            border-radius: 4px;
 
-            padding: 5px;
 
-        }
 
-    </style>
 
+    <title>Excalidraw in browser</title>
 
+    <meta charset="UTF-8" />
 
+    <script src="https://unpkg.com/react@18.2.0/umd/react.development.js"></script>
 
+    <script src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.development.js"></script>
 
+
 
+    <script
 
+            type="text/javascript"
 
+            src="https://unpkg.com/@excalidraw/excalidraw/dist/excalidraw.development.js"
 
+    ></script>
 
 </head>
 
 </head>
 
-<body>
 
 
 
-<div class="form-box">
 
-    <form action="/submit-form" method="post">
 
-        <div class="form-item">
 
-            <label for="name">用户名：</label>
 
-            <input type="text" id="name" name="name">
 
-        </div>
 
-        <div class="form-item">
 
-            <label for="password">密码：</label>
 
-            <input type="text" id="password" name="password">
 
-        </div>
 
-        <div class="form-item">
 
-            <label for="comment">性别：男</label>
 
-        </div>
 
-        <div class="form-item">
 
-            <input type="submit" value="提交表单">
 
-        </div>
 
-    </form>
 
+<body>
 
+<div class="container">
 
+    <h1>Excalidraw Embed Example</h1>
 
+    <div id="app"></div>
 
 </div>
 
 </div>
 
-
 
+<script type="text/javascript" src="packages/excalidraw/index.js"></script>
 
 </body>
 
 </body>
 
 </html>
 
 </html>

+ 7 - 17
tmp/tmp.js
View File 

@@ -1,20 +1,10 @@
 
-// 获取登录按钮元素
 
-var loginButton = (await getDom(".n-button__content"));
 
+let url = "http://localhost:3000/#room=d20a6268d8970c548f87,5ThfXj5qKTlrs1RdGriNVQ?a=47472717032&version=1";
 
+const RE_COLLAB_LINK = /^#room=([a-zA-Z0-9_-]+),([a-zA-Z0-9_-]+)/;
 
 
 
-if (loginButton) {
 
-    // 获取用户名和密码的输入框元素
 
-    var usernameInput = await getDom('input[placeholder="请输入用户名"]');
 
-    var passwordInput = await getDom('input[placeholder="请输入密码"]');
 
-    console.log(usernameInput);
 
-    console.log(passwordInput);
 
 
 
-    await sleep(1000);
 
-    // 设置用户名和密码
 
-    usernameInput.value = "yuyannan";
 
-    passwordInput.value = "Aa123456";
 
-
 
-
 
-// 模拟点击登录按钮
 
-    loginButton.click();
 
-}
 
+let hash = new URL(url).hash;
 
+console.log(RE_COLLAB_LINK.test(hash));
 
 
 
+const match = hash.match(RE_COLLAB_LINK);
 
+console.log(match[1]);
 
+console.log(match[2].length);