From eaad94050218bc6bf61f74940331f5439233e6e0 Mon Sep 17 00:00:00 2001
From: panliang <1163816051@qq.com>
Date: Fri, 22 Sep 2023 09:46:23 +0800
Subject: [PATCH] add editor

---
 public/nginx.conf                             |   5 +-
 src/components/README.md                      |  85 +++
 src/components/colorPicker.vue                | 289 +++++++++++
 src/components/cu-editor.vue                  | 245 +--------
 src/components/robin-editor/editor-icon.css   | 236 +++++++++
 src/components/robin-editor/editor-icon.ttf   | Bin 0 -> 12016 bytes
 src/components/robin-editor/editor.vue        | 488 ++++++++++++++++++
 src/components/robin-editor/header.vue        |  57 ++
 src/components/uni-popup/uni-popup.vue        | 273 ++++++++++
 .../uni-transition/uni-transition.vue         | 279 ++++++++++
 src/package.json                              |  11 +
 src/pages/index/welcome.vue                   |   4 +
 src/pages/patient/form.vue                    |   6 +-
 src/utils/request.js                          |   3 +
 14 files changed, 1756 insertions(+), 225 deletions(-)
 create mode 100644 src/components/README.md
 create mode 100644 src/components/colorPicker.vue
 create mode 100644 src/components/robin-editor/editor-icon.css
 create mode 100644 src/components/robin-editor/editor-icon.ttf
 create mode 100644 src/components/robin-editor/editor.vue
 create mode 100644 src/components/robin-editor/header.vue
 create mode 100644 src/components/uni-popup/uni-popup.vue
 create mode 100644 src/components/uni-transition/uni-transition.vue
 create mode 100644 src/package.json

diff --git a/public/nginx.conf b/public/nginx.conf
index fe21bdd..5dd0c44 100644
--- a/public/nginx.conf
+++ b/public/nginx.conf
@@ -1,4 +1,3 @@
-location ^~ /h5/ {
-	root h5
-	try_files $uri $uri/ /index.html
+location /h5 {
+	try_files $uri $uri/h5 /h5/index.html?$query_string;
 }
\ No newline at end of file
diff --git a/src/components/README.md b/src/components/README.md
new file mode 100644
index 0000000..5ec0dcf
--- /dev/null
+++ b/src/components/README.md
@@ -0,0 +1,85 @@
+# 富文本编辑器插件
+uniapp 富文本编辑器插件
+
+## 兼容性
+|微信小程序|H5|APP|
+|:--:|:--:|:--:|
+|√|√ |x|
+
+## 使用方式
+在 `script` 中引用组件
+```js
+import myeditor from "@/components/robin-editor/editor.vue"
+export default {
+    components: {myeditor}
+}
+```
+在 `template` 中使用组件
+```html
+<myeditor class="editor" 
+    @cancel="hideEditor" 
+    @save="saveEditor" 
+    v-model="html"
+    :imageUploader="uploadImg" 
+    :muiltImage="true">
+</myeditor>
+```
+
+## Demo
+https://github.com/health901/uniapp-editor-demo
+
+## 属性说明
+|属性|类型|默认值|说明|
+|--|--|--|--|
+|v-model|String| |富文本,双向绑定|
+|imageUploader|function(img,callback)| |上传图片处理函数 接受参数 img:本地图片地址,callback:上传成功回调传入图片链接|
+|muiltImage|Boolean|false|是否支持多图上传|
+|compressImage|Boolean|true|图片上传是否压缩|
+|previewMode|Boolean|false|预览模式,不可编辑|
+|autoHideToolbar|Boolean|false|失去焦点时自动隐藏工具栏|
+|tools|Array|['bold', 'italic', 'underline', 'strike', 'align-left', 'align-center', 'align-right', 'remove', 'font', 'color', 'backgroundColor','image', 'clear', 'preview']|工具栏|
+
+### 工具栏
+|名称|值|
+|--|--|
+|加粗|`bold`|
+|斜体|`italic`|
+|下划线|`underline`|
+|删除线|`strike`|
+|右对齐|`align-left`|
+|居中|`align-center`|
+|左对齐|`align-right`|
+|清除格式|`remove`|
+|字体大小|`font`|
+|字体颜色|`color`|
+|背景色|`backgroundColor`|
+|插入图片|`image`|
+|清空|`clear`|
+|预览|`preview`|
+|插入日期|`date`|
+|列表|`list-check`,`list-ordered`,`list-bullet`|
+|上下标|`sub`,`super`|
+|撤销,恢复撤销|`undo`,`redo`|
+|缩进|`indent`,`outdent`|
+|分割线|`divider`|
+|标题|`h1`,`h2`,`h3`,`h4`,`h5`,`h6`|
+|书写方向|`rtl`|
+
+## 事件说明
+|事件|说明|参数|
+|--|--|--|
+|cancel|点击取消按钮|
+|save|点击保存按钮|e={html,text,delta}|
+
+## 依赖
+|组件|链接|备注|
+|---|--|--|
+|Popup 弹出层<sup>[[1]](#注)</sup>|https://ext.dcloud.net.cn/plugin?id=329|uni-ui库|
+|Transition动画|https://ext.dcloud.net.cn/plugin?id=1231|uni-ui库,Popup依赖|
+|颜色选择器ColorPicker<sup>[[2]](#注)</sup>|https://ext.dcloud.net.cn/plugin?id=1237|字体颜色,背景色|
+
+
+## 注
+
+1. 修改:新增动画结束事件
+2. 修改:添加按钮,支持预设颜色值
diff --git a/src/components/colorPicker.vue b/src/components/colorPicker.vue
new file mode 100644
index 0000000..1a01304
--- /dev/null
+++ b/src/components/colorPicker.vue
@@ -0,0 +1,289 @@
+<template>
+    <view class="content">
+        <topbar class="head" @cancel="cancel" @save="confirm"></topbar>
+        <view class="color-picker">
+            <view class="color-name">{{ colorName }}</view>
+            <view class="show-view" :style="{ background: colorName }"></view>
+            <view class="hue-view" @touchstart="pickHue" @touchmove="pickHue">
+                <text class="anchor" :style="{ left: hueView.anchorLeft + 'px' }"></text>
+            </view>
+            <view class="color-view" @touchstart="pickColor" @touchmove="pickColor" :style="{ backgroundColor: 'hsl(' + hueView.H + ', 100%, 50%)' }">
+                <text class="anchor" :style="{ top: colorView.anchorTop + 'px', left: colorView.anchorLeft + 'px' }"></text>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+    import topbar from '@/components/robin-editor/header.vue'
+    export default {
+        components: {
+            topbar
+        },
+        props: {
+            color: {
+                type: String,
+                default: ""
+            },
+            show: {
+                type: Boolean,
+                default: false
+            }
+        },
+        data() {
+            return {
+                hueView: {},
+                colorView: {},
+                colorName: '',
+                hueLeft: 0.5, // 色相选择器初始位置 [0, 1]
+                anchorTop: 0.5, // 颜色选择器初始 top [0, 1]
+                anchorLeft: 0.5, // 颜色选择器初始 left [0, 1]
+            };
+        },
+        watch: {
+            show: function(newval, oldvar) {
+                if (!oldvar && newval) {
+                    this.init()
+                }
+            }
+        },
+        mounted() {
+            if (this.show) {
+                this.init()
+            }
+        },
+        methods: {
+            init() {
+                const reg = /^#[0-9a-fA-F]{3}([0-9a-fA-F]{3})*$/
+                if (this.color !== '' && reg.test(this.color)) {
+                    this.getColorOffset()
+                }
+                Promise.all([this.getHueViewOffset(), this.getColorViewOffset()]).then(() => {
+                    this.colorName = this.getColorString() // 根据 HLS 计算 RGB 字符串
+                })
+            },
+            getHueViewOffset() { // 获取色相选择区域尺寸
+                return new Promise(resolve => uni.createSelectorQuery().in(this).select('.hue-view').boundingClientRect(
+                    data => {
+                        this.hueView = {
+                            ...data,
+                            anchorLeft: data.width * this.hueLeft,
+                            H: this.hueLeft * 360,
+                        }
+                        resolve()
+                    }).exec())
+            },
+            getColorViewOffset() { // 获取颜色选择区域尺寸
+                return new Promise(resolve => uni.createSelectorQuery().in(this).select('.color-view').boundingClientRect(
+                    data => {
+                        this.colorView = {
+                            ...data,
+                            anchorTop: data.height * this.anchorTop,
+                            anchorLeft: data.width * this.anchorLeft,
+                            S: this.anchorLeft,
+                            L: (1 - this.anchorLeft * 0.5) - this.anchorTop / (this.anchorLeft + 1)
+                        }
+                        resolve()
+                    }).exec())
+            },
+            getColorString() { // 获取 RGB 颜色字符串
+                const arr = hslToRgb(this.hueView.anchorLeft / this.hueView.width, this.colorView.S, this.colorView.L)
+                const r = arr[0].toString(16).length === 1 ? `0${arr[0].toString(16)}` : arr[0].toString(16)
+                const g = arr[1].toString(16).length === 1 ? `0${arr[1].toString(16)}` : arr[1].toString(16)
+                const b = arr[2].toString(16).length === 1 ? `0${arr[2].toString(16)}` : arr[2].toString(16)
+                return `#${r.toUpperCase()}${g.toUpperCase()}${b.toUpperCase()}`
+            },
+            getColorOffset() {
+                var color = this.color.substr(1)
+                color = color.length == 6 ? color : color.charAt(0) + color.charAt(0) + color.charAt(1) + color.charAt(
+                    1) + color.charAt(2) + color.charAt(2)
+                const r = parseInt("0x" + color.substr(0, 2))
+                const g = parseInt("0x" + color.substr(2, 2))
+                const b = parseInt("0x" + color.substr(4, 2))
+                const arr = rgbToHsl(r, g, b)
+                this.hueLeft = arr[0]
+                this.anchorLeft = arr[1]
+                this.anchorTop = ((1 - arr[1] * 0.5) - arr[2]) * (arr[1] + 1)
+            },
+            pickColor(e) { // 选择颜色
+                const top = e.touches[0].clientY - this.colorView.top
+                const left = e.touches[0].clientX - this.colorView.left
+                if (top < 0) {
+                    this.colorView.anchorTop = 0
+                } else if (top > this.colorView.height) {
+                    this.colorView.anchorTop = this.colorView.height
+                } else {
+                    this.colorView.anchorTop = top
+                }
+                if (left < 0) {
+                    this.colorView.anchorLeft = 0
+                } else if (left > this.colorView.width) {
+                    this.colorView.anchorLeft = this.colorView.width
+                } else {
+                    this.colorView.anchorLeft = e.touches[0].clientX - this.colorView.left
+                }
+                this.colorView.S = this.colorView.anchorLeft / this.colorView.width
+                this.colorView.L = this.floor((1 - this.colorView.S * 0.5) - this.colorView.anchorTop / this.colorView.height /
+                    (this.colorView.S + 1))
+                this.colorName = this.getColorString() // 根据 HLS 计算 RGB 字符串
+            },
+            pickHue(e) { // 选择色相
+                if (e.touches[0].clientX >= this.hueView.left && e.touches[0].clientX <= this.hueView.right) {
+                    this.hueView.anchorLeft = e.touches[0].clientX - this.hueView.left
+                    this.hueView.H = this.hueView.anchorLeft / this.hueView.width * 360
+                    this.colorName = this.getColorString() // 根据 HLS 计算 RGB 字符串
+                }
+            },
+            floor(num) {
+                return num < 0.09 ? 0 : num
+            },
+            confirm() {
+                this.$emit('confirm', {
+                    color: this.colorName
+                })
+            },
+            cancel(){
+                this.$emit('cancel')
+            }
+        }
+    }
+
+    function hslToRgb(h, s, l) { // HSL 转 RGB 方法
+        var r, g, b;
+        if (s == 0) {
+            r = g = b = l; // achromatic
+        } else {
+            var hue2rgb = function hue2rgb(p, q, t) {
+                if (t < 0) t += 1;
+                if (t > 1) t -= 1;
+                if (t < 1 / 6) return p + (q - p) * 6 * t;
+                if (t < 1 / 2) return q;
+                if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+                return p;
+            }
+            var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+            var p = 2 * l - q;
+            r = hue2rgb(p, q, h + 1 / 3);
+            g = hue2rgb(p, q, h);
+            b = hue2rgb(p, q, h - 1 / 3);
+        }
+        return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
+    }
+
+    function rgbToHsl(r, g, b) {
+        r /= 255, g /= 255, b /= 255;
+        var max = Math.max(r, g, b),
+            min = Math.min(r, g, b);
+        var h, s, l = (max + min) / 2;
+        if (max == min) {
+            h = s = 0; // achromatic
+        } else {
+            var d = max - min;
+            s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+            switch (max) {
+                case r:
+                    h = (g - b) / d + (g < b ? 6 : 0);
+                    break;
+                case g:
+                    h = (b - r) / d + 2;
+                    break;
+                case b:
+                    h = (r - g) / d + 4;
+                    break;
+            }
+            h /= 6;
+        }
+
+        var round = function(n, l) {
+            return Math.round(n * Math.pow(10, l)) / Math.pow(10, l)
+        }
+        return [round(h, 3), round(s, 3), round(l, 3)];
+    }
+</script>
+
+<style lang="scss" scoped>
+    .content {
+        height: 100%;
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+        justify-content: center;
+        background-color: #fff;
+
+        .head {
+            width: 100%;
+        }
+
+        .color-picker {
+            display: flex;
+            align-items: center;
+            flex-direction: column;
+            justify-content: center;
+
+            .color-name {
+                margin: 23rpx;
+                font-size: 45rpx;
+                font-weight: bold;
+                letter-spacing: 8rpx;
+            }
+
+            .show-view {
+                height: 56rpx;
+                width: 567rpx;
+            }
+
+            .hue-view {
+                width: 567rpx;
+                height: 56rpx;
+                margin: 12rpx 0;
+                position: relative;
+                background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
+
+                .anchor {
+                    width: 12rpx;
+                    height: 100%;
+                    position: absolute;
+                    background: #FFFFFF;
+                    transform: translate(-50%);
+                    box-shadow: 0 0 2rpx rgba(0, 0, 0, 0.6);
+                }
+            }
+
+            .color-view {
+                width: 567rpx;
+                height: 345rpx;
+                position: relative;
+                margin-bottom: 12upx;
+
+                &::before,
+                &::after {
+                    content: '';
+                    top: 0;
+                    left: 0;
+                    width: 100%;
+                    height: 100%;
+                    position: absolute;
+                }
+
+                &::before {
+                    background: linear-gradient(to right, white, transparent);
+                }
+
+                &::after {
+                    background: linear-gradient(to top, black, transparent);
+                }
+
+                .anchor {
+                    z-index: 1;
+                    width: 24rpx;
+                    height: 24rpx;
+                    border-radius: 50%;
+                    position: absolute;
+                    border: 4rpx solid #FFFFFF;
+                    background: rgba(0, 0, 0, .3);
+                    transform: translate(-50%, -50%);
+                }
+            }
+        }
+    }
+</style>
diff --git a/src/components/cu-editor.vue b/src/components/cu-editor.vue
index 374ceb6..982367f 100644
--- a/src/components/cu-editor.vue
+++ b/src/components/cu-editor.vue
@@ -1,86 +1,19 @@
 <template>
-    <view class="cu-editor">
-        <u-modal
-            :show="show"
-            showCancelButton
-            @confirm="confirm"
-            @cancel="close"
-        >
-            <view class="editor-wrapper">
-                <view class="btn-content">
-                    <view v-for="(group, groupIndex) in btns" :key="groupIndex" class="btn-group">
-                        <view v-for="item in group" :key="item.action" class="btn-item" @click="handleBtn(item)">
-                            <text>{{ item.name }}</text>
-                        </view>
-                    </view>
-                    <!-- <view class="btn-group">
-                        <view class="btn-item">
-                            <text>标题</text>
-                        </view>
-                        <view class="btn-item">
-                            <text>列表</text>
-                        </view>
-                        <view class="btn-item">
-                            <text>图片</text>
-                        </view>
-                    </view>
-                    <view class="btn-group">
-                        <view class="btn-item">
-                            <text>字体颜色</text>
-                        </view>
-                        <view class="btn-item">
-                            <text>背景色</text>
-                        </view>
-                        <view class="btn-item">
-                            <text>字体大小</text>
-                        </view>
-                        <view class="btn-item">
-                            <text>缩进</text>
-                        </view>
-                    </view>
-                    <view class="btn-group">
-                        <view class="btn-item">
-                            <text>粗体</text>
-                        </view>
-                        <view class="btn-item">
-                            <text>斜体</text>
-                        </view>
-                        <view class="btn-item">
-                            <text>下划线</text>
-                        </view>
-                        <view class="btn-item">
-                            <text>删除线</text>
-                        </view>
-                    </view>
-                    <view class="btn-group">
-                        <view class="btn-item">
-                            <text>左对齐</text>
-                        </view>
-                        <view class="btn-item">
-                            <text>居中</text>
-                        </view>
-                        <view class="btn-item">
-                            <text>右对齐</text>
-                        </view>
-                        <view class="btn-item">
-                            <text>两端对齐</text>
-                        </view>
-                    </view> -->
-                </view>
-                <view v-if="btn && options" class="btn-option">
-                    <view class="title">{{ btn.name }}</view>
-                    <view class="options">
-                        <view v-for="item in options" :key="item.value" class="option" :style="item.style" @click="handleOption(item)">{{ item.name }}</view>
-                    </view>
-                </view>
-                <editor id="editor" :placeholder="placeholder" @ready="onEditorReady" />
-            </view>
-        </u-modal>
-    </view>
+    <u-popup :show="show">
+		<robin-editor
+			v-model="value"
+			class="editor"
+			@cancel="close" 
+			@save="confirm"
+			:imageUploader="uploadImage"
+		/>
+    </u-popup>
 </template>
 
 <script>
+import RobinEditor from '@/components/robin-editor/editor'
 export default {
+	components: { RobinEditor },
     name: 'CuEditor',
     props: {
         placeholder: {
@@ -90,84 +23,11 @@ export default {
     },
     data() {
         return {
-            btns: [
-                [
-                    { name: '标题', type: 'format', action: 'header', options: [
-                        { name: 'H1', value: 'H1' },
-                        { name: 'H2', value: 'H2' },
-                        { name: 'H3', value: 'H3' },
-                    ]},
-                    { name: '列表', type: 'format', action: 'list', options: [
-                        { name: '有序列表', value: 'ordered' },
-                        { name: '无序列表', value: 'bullet ' },
-                    ]},
-                    { name: '图片', type: 'image', action: 'insert'},
-                ],
-                // [
-                //     { name: '字体颜色', type: 'format', action: 'color', options: [
-                //         { name: '黑色', value: '#000000', style: { color: '#000000' } },
-                //         { name: '红色', value: '#FF0000', style: { color: '#FF0000' } },
-                //         { name: '绿色', value: '#008000', style: { color: '#008000' } },
-                //         { name: '白色', value: '#ffffff', style: { color: '#ffffff', background: 'grey' } },
-                //     ]},
-                //     { name: '背景色', type: 'format', action: 'backgroundColor', options: [
-                //         { name: '黑色', value: '#000000', style: { background: '#000000', color: '#ffffff' } },
-                //         { name: '红色', value: '#FF0000', style: { background: '#FF0000', color: '#ffffff' } },
-                //         { name: '绿色', value: '#008000', style: { background: '#008000', color: '#ffffff' } },
-                //         { name: '白色', value: '#ffffff', style: { background: '#ffffff', color: '#ffffff' } },
-                //     ]},
-                //     { name: '缩进', type: 'format', action: 'indent', options: [
-                //         { name: '增加缩进', value: '+1' },
-                //         { name: '减少缩进', value: '-1' },
-                //     ]},
-                // ],
-            ],
-            options: [],
-            btn: '',
-            option: '',
             value: '',
-            show: true,
-            editor: ''
+            show: false,
         }
     },
     methods: {
-        onEditorReady() {
-            uni.createSelectorQuery().in(this).select('#editor').context((res) => {
-                this.editor = res.context
-                if (this.value) {
-                    this.editor.setContents({ html: this.value })
-                }
-            }).exec()
-        },
-        handleBtn(e) {
-            if (e.type == 'image') {
-                return uni.chooseImage({
-                    success: (res) => {
-                        res.tempFilePaths.forEach(item => this.editorAction('image', { width: '100%', height: '100%', alt: '无法显示图片' }, item))
-                        // const files = res.tempFiles
-                    }
-                })
-            }
-            if (!e.options) {
-                this.editorAction(e.type, e.action)
-            } else {
-                this.btn = e
-                this.options = e.options
-            }
-        },
-        handleOption(e) {
-            const value = e.value
-            this.editorAction(this.btn.type, this.btn.action, value)
-        },
-        editorAction(type, action, value) {
-            if (type == 'format') {
-                this.editor.format(action, value)
-            } else if (type == 'image') {
-                this.editor.insertImage({ src: value, action })
-            } else if (action == 'removeFormat') {
-                this.editor.removeFormat()
-            }
-        },
         open(value) {
             this.value = value
             this.show = true
@@ -175,71 +35,22 @@ export default {
         close() {
             this.show = false
         },
-        confirm() {
-            if (this.editor) {
-                this.editor.getContents({
-                    success: (res) => {
-                        this.$emit('confirm', res)
-                        this.close()
-                    }
-                })
-            }
+        confirm(e) {
+            this.$emit('confirm', e)
+			this.close()
         },
+		uploadImage(file, callback) {
+			this.$ajax.upload('/admin-api/upload_image', {
+				params: {'full-url': 1},
+				name: 'file',
+				filePath: file.path,
+				custom: { toast: false }
+			}).then(res => {
+				if (res.status == 0) {
+					callback(res.data.value)
+				}
+			})
+		}
     }
 }
-</script>
-<style scoped>
-    .cu-editor ::v-deep .u-modal__content {
-        padding-top: 0 !important;
-    }
-    .editor-wrapper {
-        display: flex;
-        flex-direction: column;
-        width: 100%;
-        height: 600px;
-        overflow: scroll;
-    }
-    .btn-content {
-        margin-bottom: 10px;
-    }
-    .btn-group {
-        width: 100%;
-        display: flex;
-        margin-top: 5px;
-        justify-content: space-between;
-    }
-    .btn-item {
-        margin-right: 10px;
-        margin-top: 10px;
-    }
-    .btn-item:active {
-        background: grey;
-        color: white;
-    }
-    .btn-option {
-        width: 100%;
-        display: flex;
-        flex-direction: row;
-    }
-    .btn-option .title {
-        margin-right: 10px;
-    }
-    .btn-option .options {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-    }
-    .btn-option .option {
-        padding: 0 10px;
-        margin-bottom: 5px;
-    }
-    .btn-option .option:active {
-        background: grey;
-        color: white;
-    }
-    #editor {
-        height: 100%;
-        width: 100%;
-        margin-top: 20px;
-    }
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/src/components/robin-editor/editor-icon.css b/src/components/robin-editor/editor-icon.css
new file mode 100644
index 0000000..8e21561
--- /dev/null
+++ b/src/components/robin-editor/editor-icon.css
@@ -0,0 +1,236 @@
+@font-face {
+	font-family: "iconfont";
+	src: url('~./editor-icon.ttf') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-redo:before {
+  content: "\e627";
+}
+
+.icon-undo:before {
+  content: "\e633";
+}
+
+.icon-indent:before {
+  content: "\eb28";
+}
+
+.icon-outdent:before {
+  content: "\e6e8";
+}
+
+.icon-fontsize:before {
+  content: "\e6fd";
+}
+
+.icon-format-header-1:before {
+  content: "\e860";
+}
+
+.icon-format-header-4:before {
+  content: "\e863";
+}
+
+.icon-format-header-5:before {
+  content: "\e864";
+}
+
+.icon-format-header-6:before {
+  content: "\e865";
+}
+
+.icon-clearup:before {
+  content: "\e64d";
+}
+
+.icon-preview:before {
+  content: "\e631";
+}
+
+.icon-date:before {
+  content: "\e63e";
+}
+
+.icon-fontbgcolor:before {
+  content: "\e678";
+}
+
+.icon-clearedformat:before {
+  content: "\e67e";
+}
+
+.icon-font:before {
+  content: "\e684";
+}
+
+.icon-723bianjiqi_duanhouju:before {
+  content: "\e65f";
+}
+
+.icon-722bianjiqi_duanqianju:before {
+  content: "\e660";
+}
+
+.icon-text_color:before {
+  content: "\e72c";
+}
+
+.icon-format-header-2:before {
+  content: "\e75c";
+}
+
+.icon-format-header-3:before {
+  content: "\e75d";
+}
+
+.icon--checklist:before {
+  content: "\e664";
+}
+
+.icon-baocun:before {
+  content: "\ec09";
+}
+
+.icon-line-height:before {
+  content: "\e7f8";
+}
+
+.icon-quanping:before {
+  content: "\ec13";
+}
+
+.icon-direction-rtl:before {
+  content: "\e66e";
+}
+
+.icon-direction-ltr:before {
+  content: "\e66d";
+}
+
+.icon-selectall:before {
+  content: "\e62b";
+}
+
+.icon-fuzhi:before {
+  content: "\ec7a";
+}
+
+.icon-shanchu:before {
+  content: "\ec7b";
+}
+
+.icon-bianjisekuai:before {
+  content: "\ec7c";
+}
+
+.icon-fengexian:before {
+  content: "\ec7f";
+}
+
+.icon-dianzan:before {
+  content: "\ec80";
+}
+
+.icon-charulianjie:before {
+  content: "\ec81";
+}
+
+.icon-charutupian:before {
+  content: "\ec82";
+}
+
+.icon-wuxupailie:before {
+  content: "\ec83";
+}
+
+.icon-juzhongduiqi:before {
+  content: "\ec84";
+}
+
+.icon-yinyong:before {
+  content: "\ec85";
+}
+
+.icon-youxupailie:before {
+  content: "\ec86";
+}
+
+.icon-youduiqi:before {
+  content: "\ec87";
+}
+
+.icon-zitidaima:before {
+  content: "\ec88";
+}
+
+.icon-xiaolian:before {
+  content: "\ec89";
+}
+
+.icon-zitijiacu:before {
+  content: "\ec8a";
+}
+
+.icon-zitishanchuxian:before {
+  content: "\ec8b";
+}
+
+.icon-zitishangbiao:before {
+  content: "\ec8c";
+}
+
+.icon-zitibiaoti:before {
+  content: "\ec8d";
+}
+
+.icon-zitixiahuaxian:before {
+  content: "\ec8e";
+}
+
+.icon-zitixieti:before {
+  content: "\ec8f";
+}
+
+.icon-zitiyanse:before {
+  content: "\ec90";
+}
+
+.icon-zuoduiqi:before {
+  content: "\ec91";
+}
+
+.icon-zitiyulan:before {
+  content: "\ec92";
+}
+
+.icon-zitixiabiao:before {
+  content: "\ec93";
+}
+
+.icon-zuoyouduiqi:before {
+  content: "\ec94";
+}
+
+.icon-duigoux:before {
+  content: "\ec9e";
+}
+
+.icon-guanbi:before {
+  content: "\eca0";
+}
+
+.icon-shengyin_shiti:before {
+  content: "\eca5";
+}
+
+.icon-Character-Spacing:before {
+  content: "\e964";
+}
diff --git a/src/components/robin-editor/editor-icon.ttf b/src/components/robin-editor/editor-icon.ttf
new file mode 100644
index 0000000000000000000000000000000000000000..98af97e2f54fe81ca3efa2a4c8c9c207b866f4fd
GIT binary patch
literal 12016
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

literal 0
HcmV?d00001

diff --git a/src/components/robin-editor/editor.vue b/src/components/robin-editor/editor.vue
new file mode 100644
index 0000000..6fc3273
--- /dev/null
+++ b/src/components/robin-editor/editor.vue
@@ -0,0 +1,488 @@
+<template>
+    <view class="wrapper">
+        <topbar class="header" @cancel="cancel" @save="save" :labelConfirm="labelConfirm" :labelCancel="labelCancel"></topbar>
+        <view :style="'height:' + editorHeight + 'px;'" class="container" v-if="!previewMode" v-show="!showPreview">
+            <editor
+                v-if="!previewMode"
+                v-show="!showPreview"
+                id="editor"
+                class="ql-container"
+                placeholder="开始输入..."
+                showImgSize
+                showImgToolbar
+                showImgResize
+                @statuschange="onStatusChange"
+                :read-only="readOnly"
+                @ready="onEditorReady"
+            ></editor>
+        </view>
+        <view class="toolbar" @tap="format" v-if="!showPreview" v-show="keyboardHeight || !autoHideToolbar" :style="'bottom:' + (isIOS ? keyboardHeight : 0) + 'px'">
+            <block v-for="(t, i) in tools" :key="i">
+                <view v-if="t == 'bold'" :class="formats.bold ? 'ql-active' : ''" class="iconfont icon-zitijiacu" data-name="bold" data-label="加粗"></view>
+                <view v-if="t == 'italic'" :class="formats.italic ? 'ql-active' : ''" class="iconfont icon-zitixieti" data-name="italic" data-label="斜体"></view>
+                <view v-if="t == 'underline'" :class="formats.underline ? 'ql-active' : ''" class="iconfont icon-zitixiahuaxian" data-name="underline" data-label="下滑线"></view>
+                <view v-if="t == 'strike'" :class="formats.strike ? 'ql-active' : ''" class="iconfont icon-zitishanchuxian" data-name="strike" data-label="删除线"></view>
+                <view
+                    v-if="t == 'align-left'"
+                    :class="formats.align === 'left' || !formats.align ? 'ql-active' : ''"
+                    class="iconfont icon-zuoduiqi"
+                    data-name="align"
+                    data-value="left"
+                    data-label="居左"
+                ></view>
+                <view
+                    v-if="t == 'align-center'"
+                    :class="formats.align === 'center' ? 'ql-active' : ''"
+                    class="iconfont icon-juzhongduiqi"
+                    data-name="align"
+                    data-value="center"
+                    data-label="居中"
+                ></view>
+                <view
+                    v-if="t == 'align-right'"
+                    :class="formats.align === 'right' ? 'ql-active' : ''"
+                    class="iconfont icon-youduiqi"
+                    data-name="align"
+                    data-value="right"
+                    data-label="居右"
+                ></view>
+                <view
+                    v-if="t == 'align-justify'"
+                    :class="formats.align === 'justify' ? 'ql-active' : ''"
+                    class="iconfont icon-zuoyouduiqi"
+                    data-name="align"
+                    data-value="justify"
+                    data-label="平铺"
+                ></view>
+                <!--                  <view :class="formats.lineHeight ? 'ql-active' : ''" class="iconfont icon-line-height" data-name="lineHeight"
+                             data-value="2"></view>
+                    <view :class="formats.letterSpacing ? 'ql-active' : ''" class="iconfont icon-Character-Spacing" data-name="letterSpacing"
+                             data-value="2em"></view>
+                    <view :class="formats.marginTop ? 'ql-active' : ''" class="iconfont icon-722bianjiqi_duanqianju" data-name="marginTop"
+                             data-value="20px"></view>
+                    <view :class="formats.previewarginBottom ? 'ql-active' : ''" class="iconfont icon-723bianjiqi_duanhouju"
+                             data-name="marginBottom" data-value="20px"></view> -->
+                <view v-if="t == 'remove'" class="iconfont icon-clearedformat" @tap.stop="removeFormat"></view>
+                <picker v-if="t == 'font'" class="iconfont" mode="selector" :range="fontSizeRange" @change="fontSize"><view class="icon-fontsize"></view></picker>
+                <view
+                    v-if="t == 'color'"
+                    :style="fontColor != '#FFFFFF' ? 'color:' + formats.color : ''"
+                    class="iconfont icon-text_color"
+                    data-name="color"
+                    @tap.stop="openColor"
+                ></view>
+                <view
+                    v-if="t == 'backgroundColor'"
+                    :style="bgColor ? 'color:' + formats.backgroundColor : ''"
+                    class="iconfont icon-fontbgcolor"
+                    data-name="backgroundColor"
+                    @tap.stop="openColor"
+                ></view>
+                <view v-if="t == 'image'" class="iconfont icon-charutupian" @tap.stop="insertImage"></view>
+                <view v-if="t == 'clear'" class="iconfont icon-shanchu" @tap.stop="clear"></view>
+                <view v-if="t == 'preview'" class="iconfont icon-preview" @tap.stop="preview"></view>
+                <view v-if="t == 'date'" class="iconfont icon-date" @tap="insertDate"></view>
+                <view v-if="t == 'list-check'" class="iconfont icon-checklist" data-name="list" data-value="check"></view>
+                <view
+                    v-if="t == 'list-ordered'"
+                    :class="formats.list === 'ordered' ? 'ql-active' : ''"
+                    class="iconfont icon-youxupailie"
+                    data-name="list"
+                    data-value="ordered"
+                ></view>
+                <view v-if="t == 'list-bullet'" :class="formats.list === 'bullet' ? 'ql-active' : ''" class="iconfont icon-wuxupailie" data-name="list" data-value="bullet"></view>
+                <view v-if="t == 'undo'" class="iconfont icon-undo" @tap="undo"></view>
+                <view v-if="t == 'redo'" class="iconfont icon-redo" @tap="redo"></view>
+                <view v-if="t == 'outdent'" class="iconfont icon-outdent" data-name="indent" data-value="-1"></view>
+                <view v-if="t == 'indent'" class="iconfont icon-indent" data-name="indent" data-value="+1"></view>
+                <view v-if="t == 'divider'" class="iconfont icon-fengexian" @tap="insertDivider"></view>
+                <view v-if="t == 'h1'" :class="formats.header === 1 ? 'ql-active' : ''" class="iconfont icon-format-header-1" data-name="header" :data-value="1"></view>
+                <view v-if="t == 'h2'" :class="formats.header === 2 ? 'ql-active' : ''" class="iconfont icon-format-header-2" data-name="header" :data-value="2"></view>
+                <view v-if="t == 'h3'" :class="formats.header === 3 ? 'ql-active' : ''" class="iconfont icon-format-header-3" data-name="header" :data-value="3"></view>
+                <view v-if="t == 'h4'" :class="formats.header === 4 ? 'ql-active' : ''" class="iconfont icon-format-header-4" data-name="header" :data-value="4"></view>
+                <view v-if="t == 'h5'" :class="formats.header === 5 ? 'ql-active' : ''" class="iconfont icon-format-header-5" data-name="header" :data-value="5"></view>
+                <view v-if="t == 'h6'" :class="formats.header === 6 ? 'ql-active' : ''" class="iconfont icon-format-header-6" data-name="header" :data-value="6"></view>
+                <view v-if="t == 'sub'" :class="formats.script === 'sub' ? 'ql-active' : ''" class="iconfont icon-zitixiabiao" data-name="script" data-value="sub"></view>
+                <view v-if="t == 'super'" :class="formats.script === 'super' ? 'ql-active' : ''" class="iconfont icon-zitishangbiao" data-name="script" data-value="super"></view>
+                <view
+                    v-if="t == 'rtl'"
+                    :class="formats.direction === 'rtl' ? 'ql-active' : ''"
+                    class="iconfont icon-direction-rtl"
+                    data-name="direction"
+                    :data-value="formats.direction === 'rtl' ? '' : 'rtl'"
+                ></view>
+            </block>
+        </view>
+        <uni-popup ref="popup" type="bottom" @transed="colorPop">
+            <colorPicker :color="color" :show="showColor" @confirm="colorChanged" @cancel="colorPopClose"></colorPicker>
+        </uni-popup>
+        <view class="preview" v-show="showPreview"><rich-text :nodes="htmlData" class="previewNodes"></rich-text></view>
+    </view>
+</template>
+
+<script>
+import colorPicker from '@/components/colorPicker.vue';
+import uniPopup from '@/components/uni-popup/uni-popup.vue';
+import topbar from './header.vue';
+export default {
+    components: {
+        colorPicker,
+        uniPopup,
+        topbar
+    },
+    props: {
+        value: {
+            type: String
+        },
+        imageUploader: {
+            type: Function
+        },
+        muiltImage: {
+            type: Boolean,
+            default: false
+        },
+        compressImage: {
+            type: Boolean,
+            default: false
+        },
+        previewMode: {
+            type: Boolean,
+            default: false
+        },
+        autoHideToolbar: {
+            type: Boolean,
+            default: false
+        },
+        tools: {
+            type: Array,
+            default: function() {
+                return [
+                    'bold',
+                    'italic',
+                    'underline',
+                    'strike',
+                    'align-left',
+                    'align-center',
+                    'align-right',
+                    'remove',
+                    'font',
+                    'color',
+                    'backgroundColor',
+                    'image',
+                    'clear',
+                    'preview'
+                ];
+            }
+        }
+    },
+    data() {
+        return {
+            show: true,
+            readOnly: false,
+            formats: {},
+            fontColor: '#000000',
+            bgColor: '',
+            color: '',
+            colorPickerName: '',
+            showColor: false,
+            fontSizeRange: [10, 12, 14, 16, 18, 24, 32],
+            showPreview: false,
+            htmlData: '',
+            html: '',
+            keyboardHeight: 0,
+            editorHeight: 0,
+            isIOS: false
+        };
+    },
+    watch: {
+        value: function(newvar) {
+            this.html = newvar;
+        },
+        html: function(newvar) {
+            if (this.previewMode) {
+                this.previewData(this.html);
+            }
+            if (this.editorCtx) {
+                this.editorCtx.setContents({
+                    html: this.html
+                });
+            }
+        }
+    },
+    created() {
+        this.html = this.value;
+    },
+    mounted: function() {
+        const platform = uni.getSystemInfoSync().platform;
+        this.isIOS = platform === 'ios';
+        if (this.previewMode) {
+            this.previewData(this.html);
+        }
+        let keyboardHeight = 0;
+        this.updatePosition(0);
+        uni.onKeyboardHeightChange(res => {
+            if (res.height === keyboardHeight) return;
+            const duration = res.height > 0 ? res.duration * 1000 : 0;
+            keyboardHeight = res.height;
+            setTimeout(() => {
+                uni.pageScrollTo({
+                    scrollTop: 0,
+                    success: () => {
+                        this.updatePosition(keyboardHeight);
+                        this.editorCtx && this.editorCtx.scrollIntoView();
+                    }
+                });
+            }, duration);
+        });
+    },
+    computed: {
+        labelConfirm: function() {
+            return this.showPreview ? '关闭' : '保存';
+        },
+        labelCancel: function() {
+            return this.showPreview ? '' : '取消';
+        }
+    },
+    methods: {
+        updatePosition(keyboardHeight) {
+            const { windowHeight, windowWidth, platform } = uni.getSystemInfoSync();
+            const rpx = windowWidth / 750;
+            let topbarHeight = 85 * rpx;
+            //#ifdef H5
+            topbarHeight += 44;
+            //#endif
+            const toolbarHeight = (70 * Math.ceil(this.tools.length / 15) + 1) * rpx;
+
+            const bodyHeight = windowHeight - topbarHeight;
+            this.keyboardHeight = keyboardHeight;
+            this.editorHeight = keyboardHeight > 0 ? bodyHeight - keyboardHeight - toolbarHeight : this.autoHideToolbar ? bodyHeight : bodyHeight - toolbarHeight;
+        },
+        openColor(e) {
+            var name = e.currentTarget.dataset.name;
+            var color = this.formats[name];
+            this.colorPickerName = name;
+            if (name == 'backgroundColor' && !color) {
+                color = '#FFFFFF';
+            }
+            if (name == 'color' && !color) {
+                color = '#000000';
+            }
+            this.color = color;
+            this.$refs.popup.open({
+                type: 'bottom'
+            });
+        },
+        colorPop(e) {
+            this.showColor = e.show;
+        },
+        colorPopClose() {
+            this.$refs.popup.close();
+        },
+        colorChanged(e) {
+            let label = '';
+            switch (this.colorPickerName) {
+                case 'backgroundColor':
+                    if (e.color == '#FFFFFF') {
+                        e.color = '';
+                    }
+                    this.bgColor = e.color;
+                    label = '背景色';
+                    break;
+                case 'color':
+                    this.fontColor = e.color;
+                    label = '颜色';
+                    break;
+            }
+            this.colorPopClose();
+            this._format(this.colorPickerName, e.color, label + e.color);
+        },
+        readOnlyChange() {
+            this.readOnly = !this.readOnly;
+        },
+        onEditorReady() {
+            uni.createSelectorQuery()
+                .in(this)
+                .select('#editor')
+                .context(res => {
+                    this.editorCtx = res.context;
+                    if (this.html) {
+                        this.editorCtx.setContents({
+                            html: this.html
+                        });
+                    }
+                })
+                .exec();
+        },
+        undo() {
+            this.editorCtx.undo();
+            this.toast('撤销');
+        },
+        redo() {
+            this.editorCtx.redo();
+            this.toast('重做');
+        },
+        format(e) {
+            let { name, value, label } = e.target.dataset;
+            if (!name) return;
+            this._format(name, value, label);
+        },
+        _format(name, value, label) {
+            this.editorCtx.format(name, value);
+            this.toast(label);
+        },
+        toast(label) {
+            uni.showToast({
+                duration: 600,
+                icon: 'none',
+                title: label
+            });
+        },
+        onStatusChange(e) {
+            const formats = e.detail;
+            this.formats = formats;
+        },
+        insertDivider() {
+            this.editorCtx.insertDivider({
+                success: function() {
+                    this.toast('插入分割线');
+                }
+            });
+        },
+        clear() {
+            this.editorCtx.clear({
+                success: res => {
+                    this.toast('清空');
+                }
+            });
+        },
+        removeFormat() {
+            this.editorCtx.removeFormat();
+            this.toast('清除格式');
+        },
+        insertDate() {
+            const date = new Date();
+            const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
+            this.editorCtx.insertText({
+                text: formatDate
+            });
+            this.toast('插入日期');
+        },
+        insertImage() {
+            let params = {};
+            params.count = this.muiltImage ? 9 : 1;
+            params.sizeType = this.compressImage ? ['compressed'] : ['original'];
+            uni.chooseImage({
+                ...params,
+                success: res => {
+                    res.tempFiles.map(path => {
+                        this.imageUploader(path, url => {
+                            this.editorCtx.insertImage({
+                                src: url,
+                                alt: '图像'
+                            });
+                        });
+                    });
+                }
+            });
+        },
+        fontSize(e) {
+            const index = e.detail.value;
+            const fz = this.fontSizeRange[index] + 'px';
+            this._format('fontSize', fz, '字体大小:' + fz);
+        },
+        cancel() {
+            this.$emit('cancel');
+        },
+        save() {
+            if (this.showPreview) {
+                if (this.previewMode) {
+                    this.cancel();
+                } else {
+                    this.showPreview = false;
+                }
+            } else {
+                this.editorCtx.getContents({
+                    success: res => {
+                        this.$emit('save', res);
+                        this.$emit('input', res.html);
+                    }
+                });
+            }
+        },
+        previewData: function(html) {
+            this.htmlData = html.replace(/\<img/gi, '<img style="max-width:100%;height:auto"');
+            this.showPreview = true;
+        },
+        preview: function() {
+            this.editorCtx.getContents({
+                success: res => {
+                    this.previewData(res.html);
+                }
+            });
+        }
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+@import './editor-icon.css';
+
+.wrapper {
+    padding: 5px;
+    width: 100%;
+
+    .header {
+    }
+
+    .container {
+        width: 100%;
+        margin-top: 20rpx;
+        background: #fff;
+
+        .ql-container {
+            box-sizing: border-box;
+            width: 100%;
+            height: 100%;
+            font-size: 16px;
+            line-height: 1.5;
+            overflow: auto;
+            padding: 20rpx;
+        }
+    }
+
+    .toolbar {
+        position: fixed;
+        width: 100%;
+        left: 0;
+        bottom: 0;
+        box-sizing: border-box;
+        font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
+        background-color: #fff;
+        border-top: 1px solid #eee;
+        line-height: 50rpx;
+
+        .iconfont {
+            display: inline-block;
+            padding: 10rpx 0;
+            width: 50rpx;
+            text-align: center;
+            font-size: 34rpx;
+            box-sizing: border-box;
+        }
+    }
+}
+
+.preview {
+    width: 100%;
+    margin-top: 90rpx;
+
+    .previewNodes {
+        width: 100%;
+        word-break: break-all;
+    }
+}
+
+.ql-active {
+    color: #06c;
+}
+</style>
diff --git a/src/components/robin-editor/header.vue b/src/components/robin-editor/header.vue
new file mode 100644
index 0000000..7153405
--- /dev/null
+++ b/src/components/robin-editor/header.vue
@@ -0,0 +1,57 @@
+<template>
+    <view class="head">
+        <view class="btn left" @tap="cancel" v-if="labelCancel">{{labelCancel}}</view>
+        <view class="btn right" @tap="save" v-if="labelConfirm">{{labelConfirm}}</view>
+    </view>
+</template>
+
+<script>
+    export default {
+        props:{
+           labelCancel:{
+               type:String,
+               default:"取消"
+           },
+           labelConfirm:{
+               type:String,
+               default:"确定"
+           }
+        },
+        methods:{
+            cancel:function(){
+                this.$emit('cancel')
+            },
+            save:function(){
+                this.$emit('save')
+            }
+        }
+    }
+</script>
+
+<style lang="scss" scoped>
+    .head {
+		display: flex;
+		justify-content: space-between;
+		width: 100%;
+		height: 100%;
+		border-bottom: 1px #eee solid;
+		// box-shadow: 1px 0 2px rgba(0, 0, 0, 0.1);
+		background: #fff;
+        .btn {
+            display: block;
+            width: 150upx;
+            height: 80upx;
+            line-height: 80upx;
+            font-size: 30upx;
+            color: #666;
+            padding-left: 20upx;
+            text-align: center;
+            &.left{
+              float: left;  
+            }
+            &.right{
+                float: right;
+            }
+        }
+    }
+</style>
diff --git a/src/components/uni-popup/uni-popup.vue b/src/components/uni-popup/uni-popup.vue
new file mode 100644
index 0000000..655b114
--- /dev/null
+++ b/src/components/uni-popup/uni-popup.vue
@@ -0,0 +1,273 @@
+<template>
+	<view v-if="showPopup" class="uni-popup" @touchmove.stop.prevent="clear">
+		<uni-transition :mode-class="['fade']" :styles="maskClass" :duration="duration" :show="showTrans" @click="onTap" />
+		<uni-transition :mode-class="ani" :styles="transClass" :duration="duration" :show="showTrans" @click="onTap">
+			<view class="uni-popup__wrapper-box" @click.stop="clear">
+				<slot />
+			</view>
+		</uni-transition>
+	</view>
+</template>
+
+<script>
+	import uniTransition from '../uni-transition/uni-transition.vue'
+
+	/**
+	 * PopUp 弹出层
+	 * @description 弹出层组件，为了解决遮罩弹层的问题
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=329
+	 * @property {String} type = [top|center|bottom] 弹出方式
+	 * 	@value top 顶部弹出
+	 * 	@value center 中间弹出
+	 * 	@value bottom 底部弹出
+	 * @property {Boolean} animation = [ture|false] 是否开启动画
+	 * @property {Boolean} maskClick = [ture|false] 蒙版点击是否关闭弹窗
+	 * @event {Function} change 打开关闭弹窗触发，e={show: false}
+	 */
+
+	export default {
+		name: 'UniPopup',
+		components: {
+			uniTransition
+		},
+		props: {
+			// 开启动画
+			animation: {
+				type: Boolean,
+				default: true
+			},
+			// 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
+			type: {
+				type: String,
+				default: 'center'
+			},
+			// maskClick
+			maskClick: {
+				type: Boolean,
+				default: true
+			}
+		},
+		data() {
+			return {
+				duration: 300,
+				ani: [],
+				showPopup: false,
+				showTrans: false,
+				maskClass: {
+					'position': 'fixed',
+					'bottom': 0,
+					'top': 0,
+					'left': 0,
+					'right': 0,
+					'backgroundColor': 'rgba(0, 0, 0, 0.4)'
+				},
+				transClass: {
+					'position': 'fixed',
+					'left': 0,
+					'right': 0,
+				}
+			}
+		},
+		watch: {
+			type: {
+				handler: function(newVal) {
+					switch (this.type) {
+						case 'top':
+							this.ani = ['slide-top']
+							this.transClass = {
+								'position': 'fixed',
+								'left': 0,
+								'right': 0,
+							}
+							break
+						case 'bottom':
+							this.ani = ['slide-bottom']
+							this.transClass = {
+								'position': 'fixed',
+								'left': 0,
+								'right': 0,
+								'bottom': 0
+							}
+							break
+						case 'center':
+							this.ani = ['zoom-out', 'fade']
+							this.transClass = {
+								'position': 'fixed',
+								/* #ifndef APP-NVUE */
+								'display': 'flex',
+								'flexDirection': 'column',
+								/* #endif */
+								'bottom': 0,
+								'left': 0,
+								'right': 0,
+								'top': 0,
+								'justifyContent': 'center',
+								'alignItems': 'center'
+							}
+
+							break
+					}
+				},
+				immediate: true
+			}
+		},
+		created() {
+			if (this.animation) {
+				this.duration = 300
+			} else {
+				this.duration = 0
+			}
+		},
+		methods: {
+			clear(e) {
+				// TODO nvue 取消冒泡
+				e.stopPropagation()
+			},
+			open() {
+				this.showPopup = true
+				this.$nextTick(() => {
+					clearTimeout(this.timer)
+					this.timer = setTimeout(() => {
+						this.showTrans = true
+					}, 50);
+                    setTimeout(()=>{
+                        this.$emit('transed', {
+                        	show: true
+                        })
+                    },this.duration)
+				})
+				this.$emit('change', {
+					show: true
+				})
+			},
+			close(type) {
+				this.showTrans = false
+				this.$nextTick(() => {
+					clearTimeout(this.timer)
+					this.timer = setTimeout(() => {
+						this.$emit('change', {
+							show: false
+						})
+						this.showPopup = false
+                        setTimeout(()=>{
+                            this.$emit('transed', {
+                            	show: false
+                            })
+                        },this.duration)
+					}, 300)
+				})
+			},
+			onTap() {
+				if (!this.maskClick) return
+				this.close()
+			}
+		}
+	}
+</script>
+<style lang="scss" scoped>
+	.uni-popup {
+		position: fixed;
+		/* #ifdef H5 */
+		top: var(--window-top);
+		/* #endif */
+		/* #ifndef H5 */
+		top: 0;
+		/* #endif */
+		bottom: 0;
+		left: 0;
+		right: 0;
+		/* #ifndef APP-NVUE */
+		z-index: 99;
+		/* #endif */
+	}
+
+	.uni-popup__mask {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		background-color: $uni-bg-color-mask;
+		opacity: 0;
+	}
+
+	.mask-ani {
+		transition-property: opacity;
+		transition-duration: 0.2s;
+	}
+
+	.uni-top-mask {
+		opacity: 1;
+	}
+
+	.uni-bottom-mask {
+		opacity: 1;
+	}
+
+	.uni-center-mask {
+		opacity: 1;
+	}
+
+	.uni-popup__wrapper {
+		/* #ifndef APP-NVUE */
+		display: block;
+		/* #endif */
+		position: absolute;
+	}
+
+	.top {
+		top: 0;
+		left: 0;
+		right: 0;
+		transform: translateY(-500px);
+	}
+
+	.bottom {
+		bottom: 0;
+		left: 0;
+		right: 0;
+		transform: translateY(500px);
+	}
+
+	.center {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		flex-direction: column;
+		/* #endif */
+		bottom: 0;
+		left: 0;
+		right: 0;
+		top: 0;
+		justify-content: center;
+		align-items: center;
+		transform: scale(1.2);
+		opacity: 0;
+	}
+
+	.uni-popup__wrapper-box {
+		/* #ifndef APP-NVUE */
+		display: block;
+		/* #endif */
+		position: relative;
+	}
+
+	.content-ani {
+		// transition: transform 0.3s;
+		transition-property: transform, opacity;
+		transition-duration: 0.2s;
+	}
+
+
+	.uni-top-content {
+		transform: translateY(0);
+	}
+
+	.uni-bottom-content {
+		transform: translateY(0);
+	}
+
+	.uni-center-content {
+		transform: scale(1);
+		opacity: 1;
+	}
+</style>
diff --git a/src/components/uni-transition/uni-transition.vue b/src/components/uni-transition/uni-transition.vue
new file mode 100644
index 0000000..908a939
--- /dev/null
+++ b/src/components/uni-transition/uni-transition.vue
@@ -0,0 +1,279 @@
+<template>
+	<view v-if="isShow" ref="ani" class="uni-transition" :class="[ani.in]" :style="'transform:' +transform+';'+stylesObject"
+	 @click="change">
+		 <slot></slot>
+	</view>
+</template>
+
+<script>
+	// #ifdef APP-NVUE
+	const animation = uni.requireNativePlugin('animation');
+	// #endif
+	/**
+	 * Transition 过渡动画
+	 * @description 简单过渡动画组件
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=985
+	 * @property {Boolean} show = [false|true] 控制组件显示或隐藏
+     * @property {Array} modeClass = [fade|slide-top|slide-right|slide-bottom|slide-left|zoom-in|zoom-out] 过渡动画类型
+     *  @value fade 渐隐渐出过渡
+     *  @value slide-top 由上至下过渡
+     *  @value slide-right 由右至左过渡
+     *  @value slide-bottom 由下至上过渡
+     *  @value slide-left 由左至右过渡
+     *  @value zoom-in 由小到大过渡
+     *  @value zoom-out 由大到小过渡
+	 * @property {Number} duration 过渡动画持续时间
+	 * @property {Object} styles 组件样式，同 css 样式，注意带’-‘连接符的属性需要使用小驼峰写法如：`backgroundColor:red`
+	 */
+	export default {
+		name: 'uniTransition',
+		props: {
+			show: {
+				type: Boolean,
+				default: false
+			},
+			modeClass: {
+				type: Array,
+				default () {
+					return []
+				}
+			},
+			duration: {
+				type: Number,
+				default: 300
+			},
+			styles: {
+				type: Object,
+				default () {
+					return {}
+				}
+			}
+		},
+		data() {
+			return {
+				isShow: false,
+				transform: '',
+				ani: { in: '',
+					active: ''
+				}
+			};
+		},
+		watch: {
+			show: {
+				handler(newVal) {
+					if (newVal) {
+						this.open()
+					} else {
+						this.close()
+					}
+				},
+				immediate: true
+			}
+		},
+		computed: {
+			stylesObject() {
+				let styles = {
+					...this.styles,
+					'transition-duration': this.duration / 1000 + 's'
+				}
+				let transfrom = ''
+				for (let i in styles) {
+					let line = this.toLine(i)
+					transfrom += line + ':' + styles[i] + ';'
+				}
+				return transfrom
+			}
+		},
+		created() {
+			// this.timer = null
+			// this.nextTick = (time = 50) => new Promise(resolve => {
+			// 	clearTimeout(this.timer)
+			// 	this.timer = setTimeout(resolve, time)
+			// 	return this.timer
+			// });
+		},
+		methods: {
+			change() {
+				this.$emit('click', {
+					detail: this.isShow
+				})
+			},
+			open() {
+				clearTimeout(this.timer)
+				this.isShow = true
+				this.transform = ''
+				this.ani.in = ''
+				for (let i in this.getTranfrom(false)) {
+					if (i === 'opacity') {
+						this.ani.in = 'fade-in'
+					} else {
+						this.transform += `${this.getTranfrom(false)[i]} `
+					}
+				}
+				this.$nextTick(() => {
+					setTimeout(() => {
+						this._animation(true)
+					}, 50)
+				})
+
+			},
+			close(type) {
+				clearTimeout(this.timer)
+				this._animation(false)
+			},
+			_animation(type) {
+				let styles = this.getTranfrom(type)
+				// #ifdef APP-NVUE
+				if(!this.$refs['ani']) return
+				animation.transition(this.$refs['ani'].ref, {
+					styles,
+					duration: this.duration, //ms
+					timingFunction: 'ease',
+					needLayout: false,
+					delay: 0 //ms
+				}, () => {
+					if (!type) {
+						this.isShow = false
+					}
+					this.$emit('change', {
+						detail: this.isShow
+					})
+				})
+				// #endif
+				// #ifndef APP-NVUE
+				this.transform = ''
+				for (let i in styles) {
+					if (i === 'opacity') {
+						this.ani.in = `fade-${type?'out':'in'}`
+					} else {
+						this.transform += `${styles[i]} `
+					}
+				}
+				this.timer = setTimeout(() => {
+					if (!type) {
+						this.isShow = false
+					}
+					this.$emit('change', {
+						detail: this.isShow
+					})
+
+				}, this.duration)
+				// #endif
+
+			},
+			getTranfrom(type) {
+				let styles = {
+					transform: ''
+				}
+				this.modeClass.forEach((mode) => {
+					switch (mode) {
+						case 'fade':
+							styles.opacity = type ? 1 : 0
+							break;
+						case 'slide-top':
+							styles.transform += `translateY(${type?'0':'-100%'}) `
+							break;
+						case 'slide-right':
+							styles.transform += `translateX(${type?'0':'100%'}) `
+							break;
+						case 'slide-bottom':
+							styles.transform += `translateY(${type?'0':'100%'}) `
+							break;
+						case 'slide-left':
+							styles.transform += `translateX(${type?'0':'-100%'}) `
+							break;
+						case 'zoom-in':
+							styles.transform += `scale(${type?1:0.8}) `
+							break;
+						case 'zoom-out':
+							styles.transform += `scale(${type?1:1.2}) `
+							break;
+					}
+				})
+				return styles
+			},
+			_modeClassArr(type) {
+				let mode = this.modeClass
+				if (typeof(mode) !== "string") {
+					let modestr = ''
+					mode.forEach((item) => {
+						modestr += (item + '-' + type + ',')
+					})
+					return modestr.substr(0, modestr.length - 1)
+				} else {
+					return mode + '-' + type
+				}
+			},
+			// getEl(el) {
+			// 	console.log(el || el.ref || null);
+			// 	return el || el.ref || null
+			// },
+			toLine(name) {
+				return name.replace(/([A-Z])/g, "-$1").toLowerCase();
+			}
+		}
+	}
+</script>
+
+<style>
+	.uni-transition {
+		transition-timing-function: ease;
+		transition-duration: 0.3s;
+		transition-property: transform, opacity;
+	}
+
+	.fade-in {
+		opacity: 0;
+	}
+
+	.fade-active {
+		opacity: 1;
+	}
+
+	.slide-top-in {
+		/* transition-property: transform, opacity; */
+		transform: translateY(-100%);
+	}
+
+	.slide-top-active {
+		transform: translateY(0);
+		/* opacity: 1; */
+	}
+
+	.slide-right-in {
+		transform: translateX(100%);
+	}
+
+	.slide-right-active {
+		transform: translateX(0);
+	}
+
+	.slide-bottom-in {
+		transform: translateY(100%);
+	}
+
+	.slide-bottom-active {
+		transform: translateY(0);
+	}
+
+	.slide-left-in {
+		transform: translateX(-100%);
+	}
+
+	.slide-left-active {
+		transform: translateX(0);
+		opacity: 1;
+	}
+
+	.zoom-in-in {
+		transform: scale(0.8);
+	}
+
+	.zoom-out-active {
+		transform: scale(1);
+	}
+
+	.zoom-out-in {
+		transform: scale(1.2);
+	}
+</style>
diff --git a/src/package.json b/src/package.json
new file mode 100644
index 0000000..2e58142
--- /dev/null
+++ b/src/package.json
@@ -0,0 +1,11 @@
+{
+    "id": "robin-editor",
+    "name": "微信小程序富文本编辑器",
+    "version": "1.1.6",
+    "description": "基于原生editor组件的富文本编辑器组件,支持颜色选择,插入图片",
+    "keywords": [
+        "编辑器",
+        "富文本",
+        "小程序"
+    ]
+}
\ No newline at end of file
diff --git a/src/pages/index/welcome.vue b/src/pages/index/welcome.vue
index 06ef403..366ecd5 100644
--- a/src/pages/index/welcome.vue
+++ b/src/pages/index/welcome.vue
@@ -12,6 +12,10 @@ export default {
             uni.reLaunch({
                 url: '/pages/index/index'
             })
+        } else if (e.reLaunch) {
+            uni.reLaunch({
+                url: e.reLaunch
+            })
         } else {
             uni.reLaunch({
                 url: '/pages/login/login'
diff --git a/src/pages/patient/form.vue b/src/pages/patient/form.vue
index 5f9d75e..1d4ac05 100644
--- a/src/pages/patient/form.vue
+++ b/src/pages/patient/form.vue
@@ -232,10 +232,6 @@ export default {
     .page {
         padding: 0 20px;
         background: white;
-        position: absolute;
-        height: 100%;
-        width: 100%;
-        box-sizing: border-box;
     }
     .input-text {
         color: #303133;
@@ -251,6 +247,6 @@ export default {
     }
     .button {
         width: 100%;
-        margin-top: 20px;
+        margin: 20px 0;
     }
 </style>
\ No newline at end of file
diff --git a/src/utils/request.js b/src/utils/request.js
index aeea0ea..9869767 100644
--- a/src/utils/request.js
+++ b/src/utils/request.js
@@ -4,6 +4,9 @@ module.exports = () => {
     // 全局配置
     uni.$u.http.setConfig((config) => {
         config.baseURL = process.env.VUE_APP_BASE_API
+		config.custom = {
+			toast: true
+		}
         return config
     })