QpenForm

for-the-zero · May 4, 2024 · 24ebc12 · 24ebc12
1 parent 7365bcc
commit 24ebc12
Show file tree

Hide file tree

Showing 5 changed files with 787 additions and 0 deletions.
diff --git a/form/example/1.md b/form/example/1.md
@@ -0,0 +1,93 @@
+!&-->{"title": "test1","theme": "#00FF00","to": "/submit","norep":"/norep"}
+
+
+# 标题测试
+
+## 二级标题
+
+### 三级标题
+
+#### 四级标题
+
+##### 五级标题
+
+###### 六级标题
+
+## 段落与换行
+
+这是一个普通的段落。如果需要在同一段落内换行，可以在上一行末尾输入两个或多个空格，然后回车。
+
+新起一行。
+
+## 强调与样式
+
+**粗体文本**  
+*斜体文本*  
+***粗斜体文本***
+
+~~删除线文本~~
+
+`function hello_world(){console.log("Hello, World!");};`
+
+## 列表
+
+### 无序列表
+
+- 列表项1
+- 列表项2
+  - 嵌套列表项
+- 列表项3
+
+### 有序列表
+
+1. 第一项
+2. 第二项
+   1. 子项A
+   2. 子项B
+3. 第三项
+
+## 代码块
+
+```python
+def hello_world():
+    print("Hello, World!")
+
+hello_world()
+```
+
+## 表格
+
+| 列1 | 列2 | 列3 |
+| --- | --- | --- |
+| 单元格1 | 单元格2 | 单元格3 |
+| 表格数据 | 可能很长 | 可能包含 **格式** |
+
+## 分割线
+
+---
+
+## 链接与图片
+
+[link](https://www.example.com)
+
+![alt text](https://via.placeholder.com/150)
+
+## 引用
+
+> 这是一个引用。
+>
+> 这是第二行引用。
+>
+>> 这是嵌套引用。
+>>
+>> 这是第二行嵌套引用。
+
+## HTML
+
+<div style="color: red;">这是一个带有样式的HTML元素。</div>
+
+## 控件
+
+&-->{"type": "textarea","id": "test","config": {"holder": "输入框提示文字"},"req": true}
+
+&==>function verify(){if($('#test').val()=='114514'){return true;}else{alert('来自自定义验证：输入框必须是114514才能提交');return false;};};verify();
diff --git a/form/example/2.md b/form/example/2.md
@@ -0,0 +1,45 @@
+!&-->{"title": "组件演示","to": "/submit","upload": "/upload"}
+
+# 组件演示
+
+&-->{"type": "text","id": "t","config": {"holder": "文字", "type":"text"},"req": true}
+
+&-->{"type": "text","id": "tnum","config": {"holder": "数值", "type":"number"},"req": false}
+
+&-->{"type": "text","id": "tmail","config": {"holder": "邮箱", "type":"email"},"req": false}
+
+&-->{"type": "text","id": "turl","config": {"holder": "url", "type":"url"},"req": false}
+
+&-->{"type": "text","id": "tdate","config": {"holder": "日期", "type":"date"},"req": false}
+
+&-->{"type": "text","id": "ttime","config": {"holder": "时间", "type":"time"},"req": false}
+
+&-->{"type": "textarea","id": "tarea","config": {"holder": "输入框提示文字"},"req": true}
+
+---
+
+&-->{"type": "radios","id": "r","config": {"opt": ["a","b","c"], "br":false},"req": true}
+
+&-->{"type": "checkboxs","id": "c1","config": {"label": "d", "br":false},"req": true}
+
+&-->{"type": "checkboxs","id": "c2","config": {"label": "e", "br":false},"req": true}
+
+---
+
+&-->{"type": "select","id": "s","config": {"opt": ["a a","b b","c c"]},"req": false}
+
+---
+
+&-->{"type": "tagsinput","id": "tag1","config": {"pinnedtags": true, "tags": ["aaa","bbb","ccc"]},"req": false}
+
+&-->{"type": "tagsinput","id": "tag2","config": {"pinnedtags": false},"req": false}
+
+---
+
+&-->{"type": "files","id": "file1","config": {"withtext": true},"req": false}
+
+&-->{"type": "files","id": "file2","config": {"withtext": false, "accept": "application/json"},"req": false}
+
+---
+
+&-->{"type": "table","id": "table1","config": {"column": ["不是","可能不是","不知道","可能是","是"], "row": ["行1111111111","行22222","行3"]},"req": false}
diff --git a/form/index.css b/form/index.css
@@ -0,0 +1,82 @@
+body{
+    font-family: 'Google Sans','Noto Sans SC';
+    color: #201b12;
+}
+.main{
+    margin: 15px;
+}
+.main code{
+    padding: 7px;
+    border-radius: var(--mdui-shape-corner-medium);;
+}
+mdui-divider{
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+.main h1,.main h2,.main h3,.main h4,.main h5,.main h6,.main p{
+    margin: 17px 0;
+}
+.codeblock{
+    display: block;
+}
+.space{
+    margin-top: 4px;
+    margin-bottom: 4px;
+}
+.complex-con{
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    margin-top: 8px;
+    margin-bottom: 8px;
+}
+/*
+.complex-con-list{
+    display: flex;
+    flex-direction: row;
+    min-height: 50px;
+    overflow-x: auto;
+}
+*/
+.complex-con-list{
+    min-height: 50px;
+    padding: 10px;
+}
+.complex-con-controls{
+    display: flex;
+    flex-direction: row;
+    min-height: 50px;
+    align-items: center;
+    padding: 10px;
+    justify-content: flex-start;
+}
+.complex-con-controls mdui-text-field{
+    margin-right: auto;
+    box-sizing: border-box;
+}
+.complex-con-controls mdui-button{
+    margin-left: 10px;
+}
+mdui-chip{
+    margin-right: 5px;
+}
+.complex-con-controls mdui-icon{
+    margin: 5px;
+}
+.tabel-grid{
+    display: grid;
+    gap: 5px;
+    width: 100%;
+    padding: 10px;
+    justify-content: center;
+    grid-template-columns:auto 1fr;
+}
+.tabel-grid p{
+    margin: 0;
+    margin-top: 3px;
+    margin-bottom: 3px;
+    display: inline-block;
+}
+.tabel-grid mdui-segmented-button-group{
+    margin-left: 5px;
+}
diff --git a/form/index.html b/form/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Form</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Google+Sans&display=swap">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC&display=swap">  
+    <link rel="stylesheet" href="https://jsd.cdn.zzko.cn/npm/mdui/mdui.css">
+    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+    <script src="https://jsd.cdn.zzko.cn/npm/mdui/mdui.global.js"></script>
+
+    <script src="https://cdn.bootcdn.net/ajax/libs/markdown-it/13.0.1/markdown-it.min.js"></script>
+    <script src="https://cdn.bootcdn.net/ajax/libs/jsSHA/3.3.1/sha.min.js"></script>
+    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
+
+    <link rel="stylesheet" href="index.css">
+</head>
+<body>
+    <mdui-dialog class="invalid-dialog">
+        <span slot="headline">无效地址</span>
+        <span slot="description">可能是因为：没加地址、格式错误、无法访问</span>
+        <mdui-text-field variant="outlined" label="更改地址"></mdui-text-field>
+        <mdui-button slot="action" variant="tonal">跳转</mdui-button>
+    </mdui-dialog>
+    <mdui-dialog class="upload-dialog">
+        <span slot="headline">上传中</span>
+        <mdui-circular-progress></mdui-circular-progress><p>请稍后</p>
+    </mdui-dialog>
+    <mdui-dialog class="autosave-dialog" close-on-overlay-click close-on-esc>
+        <span slot="headline">自动保存提示</span>
+        <span slot="description">检测到有一个自动保存的结果，是否使用</span>
+        <mdui-button slot="action" variant="text" onclick="$('.autosave-dialog').removeAttr('open');">取消</mdui-button>
+        <mdui-button slot="action" variant="tonal">使用</mdui-button>
+    </mdui-dialog>
+
+    <div class="mdui-prose main"></div>
+
+    <script src="https://unpkg.com/@fingerprintjs/[email protected]/dist/fp.min.js"></script>
+    <script src="index.js"></script>
+
+</body>
+</html>