feat(文档): 完成文档功能

package.json

@@ -65,6 +65,7 @@
     "driver.js": "^0.9.8",
     "register-service-worker": "1.7.2",
     "resize-detector": "0.3.0",
+    "vditor": "^3.8.15",
     "vue": "^2.5.17",
     "vue-amis-sdk": "1.9.0-beta-30",
     "vue-audio-visual": "^2.4.0",

src/api/Article/index.js

@@ -18,13 +18,13 @@ export async function createArticle(params) {
     'Article',
     // eslint-disable-next-line no-undef
     _.merge(params, {
-      ACL: {
-        '*': {
-          read: true,
-          write: false,
-        },
-      },
-      // timestamp: moment(new Date()).valueOf(),
+      // ACL: {
+      //   '*': {
+      //     read: true,
+      //     write: true,
+      //   },
+      // },
+      timestamp: moment(new Date()).valueOf() + '',
     })
   )
 }

src/api/Dlink/index.js

@@ -30,12 +30,11 @@ export async function deleteTopic(
   Topic = '$dg/user/router/thing/111/cmd/delete'
 ) {
   console.warn(`${location.href} unSubscribe ${Topic}`)
-  return Topic
-    ? request({
-        url: `topic?topic=${Topic}`,
-        method: 'delete',
-      })
-    : ''
+  return {
+    code: 200,
+    msg: 'success',
+    data: { info: 'success' },
+  }
 }
 
 export async function getTopic(Topic = '$dg/user/router/thing/111/cmd/delete') {
@@ -68,5 +67,5 @@ export async function postTopic(
   // MqttSubscribe
   window.mqttInfo = window.dgiot.mqttInfo = mqttInfo
   Vue.prototype.$mqttInfo = mqttInfo
-  return mqttInfo.submessage
+  return submessage
 }

src/config/local.config.js

@@ -10,7 +10,6 @@ let systemStatic = {
     'style.min.css',
     'codemirror.css',
     'lint.css',
-    'vditor.css',
     'xterm.css',
     // 'aliplayer-min.css',
     // 'amis/lib/themes/cxd.css',
@@ -79,13 +78,7 @@ let runTimeStatic = {
     // 'amis/lib/themes/cxd.css',
     // 'amis/lib/helper.css',
   ],
-  js: [
-    'jszip.min.js',
-    'jsplumb.min.js',
-    'javascript.js',
-    'json-lint.js',
-    'vditor.js',
-  ],
+  js: ['jszip.min.js', 'jsplumb.min.js', 'javascript.js', 'json-lint.js'],
 }
 if (process.env.NODE_ENV !== 'development') systemStatic.js[0] = 'vue.min.js'
 

src/dgiot/components/DgiotVditor/index.vue

@@ -1,40 +1,30 @@
 <template>
   <div class="center">
-    <div class="dgiot-doc-header">
-      <dgiot-query-form v-show="value != 'temp'">
-        <dgiot-query-form-right-panel style="float: right">
-          <el-form
-            ref="form"
-            :inline="true"
-            label-width="0"
-            :model="queryForm"
-            @submit.native.prevent
-          >
-            <el-form-item>
-              <el-button
-                icon="el-icon-plus"
-                type="primary"
-                @click.native="save(value)"
-              >
-                {{ $translateTitle('button.save') }}
-              </el-button>
-            </el-form-item>
-          </el-form>
-        </dgiot-query-form-right-panel>
-      </dgiot-query-form>
-    </div>
-    <div
-      v-show="value != 'temp'"
-      id="vditor"
-      :key="setKey"
-      name="description"
-    />
+    <el-form
+      v-show="flagType !== 'preview'"
+      :key="Form.objectId"
+      class="demo-form-inline"
+      :inline="true"
+      :model="Form"
+    >
+      <el-form-item>
+        <el-input :key="Form.name" v-model="Form.name" />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="save">更新</el-button>
+      </el-form-item>
+    </el-form>
+    <div id="vditor" style="width: 400vh" :title="title" />
     <el-empty v-show="value == 'temp'" :image-size="200" />
   </div>
 </template>
 <script>
   import { putArticle } from '@/api/Article'
-
+  import Vditor from 'vditor'
+  // import 'vditor/src/assets/less/index.less'
+  import 'vditor/dist/index.css'
+  import { mapGetters } from 'vuex'
+  import store from '@/store'
   export default {
     name: 'DgiotVditor',
     props: {
@@ -43,26 +33,54 @@
         required: false,
         default: 'temp',
       },
+      ruleForm: {
+        type: Object,
+        required: false,
+        default() {
+          return {}
+        },
+      },
+      title: {
+        type: String,
+        required: false,
+        default: '',
+      },
+      type: {
+        type: String,
+        required: false,
+        default: 'preview',
+      },
+      objectId: {
+        type: String,
+        required: false,
+        default: 'temp',
+      },
     },
     data() {
       return {
+        Form: this.ruleForm,
+        flagType: this.type,
         queryForm: {
           name: '',
         },
         height: this.$baseTableHeight(0),
-        setKey: moment(new Date()).valueOf(),
         contentEditor: {},
       }
     },
+    computed: {
+      ...mapGetters({
+        token: 'user/token',
+      }),
+    },
     watch: {
-      value(v) {
-        // if (v.length)
+      objectId(v) {
+        this.Form.name = this.ruleForm.name
         this.createVditor()
       },
     },
     mounted() {},
     methods: {
-      async save(value) {
+      async save() {
         try {
           const loading = this.$baseColorfullLoading()
           const params = {
@@ -73,9 +91,9 @@
             'success',
             'dgiot-hey-message-success'
           )
-          const res = await putArticle(this.$route.query.article, params)
+          const res = await putArticle(this.objectId, params)
           loading.close()
-          dgiotlog.warn(this.contentEditor.getValue(), value)
+          dgiotlog.warn(this.contentEditor.getValue())
         } catch (error) {
           dgiotlog.log(error)
           this.$baseMessage(
@@ -86,6 +104,9 @@
         }
       },
       createVditor() {
+        const { NODE_ENV = 'development' } = process.env
+        this.Form = this.ruleForm
+        // this.$set(Form, 'name', this.ruleForm.name)
         this.contentEditor = new Vditor('vditor', {
           // height: this.height,
           placeholder: '此处为话题内容……',
@@ -109,8 +130,9 @@
           cache: {
             enable: false,
           },
-          mode: 'sv',
+          mode: 'ir',
           toolbar: [
+            'upload',
             'emoji',
             'headings',
             'bold',
@@ -131,34 +153,79 @@
             'insert-before',
             'insert-after',
             '|',
-            // 'record',
+            'record',
             'table',
             '|',
             'undo',
             'redo',
             '|',
             'edit-mode',
-            // 'content-theme',
+            'content-theme',
             'code-theme',
             'export',
-            {
-              name: 'more',
-              toolbar: ['fullscreen', 'both', 'preview', 'info', 'help'],
-            },
+            'fullscreen',
+            'both',
+            'preview',
+            'info',
+            'help',
           ],
+          // https://ld246.com/article/1549638745630#options-upload
+          upload: {
+            headers: {
+              'Sec-Fetch-Site': 'same-origin',
+            },
+            multiple: false,
+            accept: 'image/*,.mp3, .wav, .rar',
+            token: this.token,
+            url:
+              NODE_ENV == 'development'
+                ? `${process.env.VUE_APP_URL}/upload`
+                : location.origin + '/upload',
+            linkToImgUrl: '/api/upload/fetch',
+            extraData: {
+              auth_token: this.token,
+              scene: 'app',
+              code: '',
+              path: 'dgiot_file/docs/',
+              output: 'json',
+              submit: 'upload',
+            },
+            fieldName: 'file',
+            filename(name) {
+              return name
+                .replace(/[^(a-zA-Z0-9\u4e00-\u9fa5\.)]/g, '')
+                .replace(/[\?\\/:|<>\*\[\]\(\)\$%\{\}@~]/g, '')
+                .replace('/\\s/g', '')
+            },
+          },
+          height: '100%',
+          width: ' 155vh',
+          value:
+            '由于跨域问题，可前往[完整示例](https://ld246.com/guide/markdown)进行体验，前往 [API](https://ld246.com/article/1549638745630#options-upload) 进行了解。当然也欢迎在下方进行留言。',
           after: () => {
             this.contentEditor.setValue(this.value)
           },
         })
+
+        console.log(this.contentEditor, this.Form.name)
       },
     },
   }
 </script>
-<style lang="scss" scoped>
+<style lang="scss">
   .dgiot-doc-header {
     margin-top: 10px;
   }
+
   #vditor {
-    height: calc(100vh - #{$base-top-bar-height} * 2.7 - 64px);
+    width: 100vh;
+    height: calc(100vh - #{$base-top-bar-height} * 2.7 - 64px) !important;
+  }
+  .vditor-toolbar--pin,
+  .vditor-reset {
+    padding-left: 20px !important;
   }
+  //.vditor-preview {
+  //  height: 100vh !important;
+  //}
 </style>

src/main.js

@@ -5,16 +5,32 @@ import App from './App'
 import i18n from './i18n'
 import store from './store'
 import router from './router'
-import { isPwa, clearConsole } from './config'
+import { clearConsole, isPwa } from './config'
 import dgiotStore from '@dgiot/dgiot-mqtt-dashboard/src/store'
 import VueAmisSdk from 'vue-amis-sdk/packages/index'
-Vue.use(VueAmisSdk)
 import { VuePlugin } from 'vuera'
-Vue.use(VuePlugin)
 import '@/dgiot'
+
+Vue.use(VueAmisSdk)
+Vue.use(VuePlugin)
 window.dgiotlogger =
   process.env.NODE_ENV !== 'development' && clearConsole
-    ? new Lajax(`${location.origin}/iotapi/protocol`)
+    ? new Lajax({
+        url: '/',
+        autoLogError: true, //是否自动记录未捕获错误true
+        autoLogRejection: false, //是否自动记录Promise错误true
+        autoLogAjax: false, //是否自动记录 ajax 请求true
+        //logAjaxFilter:function(ajaxUrl, ajaxMethod) {
+        //    return false;//ajax 自动记录条件过滤函数true记录false不记录
+        //},
+        stylize: true, //是否要格式化 console 打印的内容true
+        showDesc: false, //是否显示初始化描述信息true
+        customDesc: function (lastUnsend, reqId, idFromServer) {
+          return 'dgiot 前端日志模块加载完成。'
+        },
+        interval: 1000000, //日志发送到服务端的间隔时间10000毫秒
+        maxErrorReq: 3, //发送日志请求连续出错的最大次数
+      })
     : console
 dgiotlogger.info('dgiot-dashboard环境变量：', dgiot)
 if (isPwa) require('./registerServiceWorker')