From f79ef13ddf305eddfbf9bb97a7014cfb32909673 Mon Sep 17 00:00:00 2001
From: WangHao <43278047@qq.com>
Date: Mon, 5 Oct 2020 22:49:59 +0800
Subject: [PATCH] =?UTF-8?q?MDUI=E5=89=8D=E7=AB=AFcss=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E7=BE=8E=E5=8C=96=E5=BA=93=E9=9B=86=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ruoyi-ui/package.json                         | 225 +++++++++---------
 ruoyi-ui/public/index.html                    |  15 +-
 ruoyi-ui/src/main.js                          |   5 +
 ruoyi-ui/src/router/index.js                  |   6 +-
 .../src/views/bookmark/bookmark/index.vue     |   4 +-
 .../src/views/bookmark/common/ImportHtml.vue  |   3 +-
 ruoyi-ui/src/views/bookmark/common/NqEdit.vue | 107 +++++++++
 .../src/views/bookmark/common/NqQuillEdit.vue |  68 ------
 ruoyi-ui/src/views/bookmark/index/index.vue   |  23 +-
 9 files changed, 253 insertions(+), 203 deletions(-)
 create mode 100644 ruoyi-ui/src/views/bookmark/common/NqEdit.vue
 delete mode 100644 ruoyi-ui/src/views/bookmark/common/NqQuillEdit.vue

diff --git a/ruoyi-ui/package.json b/ruoyi-ui/package.json
index 443e60484..1be5fdf1a 100644
--- a/ruoyi-ui/package.json
+++ b/ruoyi-ui/package.json
@@ -1,112 +1,113 @@
-{
-  "name": "ruoyi",
-  "version": "3.0.0",
-  "description": "若依管理系统",
-  "author": "若依",
-  "license": "MIT",
-  "scripts": {
-    "dev": "vue-cli-service serve --open",
-    "build:prod": "vue-cli-service build",
-    "build:stage": "vue-cli-service build --mode staging",
-    "preview": "node build/index.js --preview",
-    "lint": "eslint --ext .js,.vue src",
-    "test:unit": "jest --clearCache && vue-cli-service test:unit",
-    "test:ci": "npm run lint && npm run test:unit",
-    "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",
-    "new": "plop"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
-  "lint-staged": {
-    "src/**/*.{js,vue}": [
-      "eslint --fix",
-      "git add"
-    ]
-  },
-  "keywords": [
-    "vue",
-    "admin",
-    "dashboard",
-    "element-ui",
-    "boilerplate",
-    "admin-template",
-    "management-system"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "https://gitee.com/y_project/RuoYi-Vue.git"
-  },
-  "dependencies": {
-    "@riophae/vue-treeselect": "0.4.0",
-    "@tinymce/tinymce-vue": "^3.2.3",
-    "axios": "0.18.1",
-    "clipboard": "2.0.4",
-    "echarts": "4.2.1",
-    "element-ui": "^2.13.2",
-    "file-saver": "2.0.1",
-    "fuse.js": "3.4.4",
-    "js-beautify": "^1.10.2",
-    "js-cookie": "2.2.0",
-    "jsencrypt": "3.0.0-rc.1",
-    "normalize.css": "7.0.0",
-    "nprogress": "0.2.0",
-    "path-to-regexp": "2.4.0",
-    "screenfull": "4.2.0",
-    "sortablejs": "1.8.4",
-    "timeago.js": "^4.0.2",
-    "tinymce": "^5.5.1",
-    "vue": "2.6.10",
-    "vue-count-to": "1.0.13",
-    "vue-cropper": "0.4.9",
-    "vue-quill-editor": "3.0.6",
-    "vue-router": "3.0.2",
-    "vue-splitpane": "1.0.4",
-    "vue-timeago": "^5.1.2",
-    "vuedraggable": "2.20.0",
-    "vuex": "3.1.0"
-  },
-  "devDependencies": {
-    "@vue/cli-plugin-babel": "3.5.3",
-    "@vue/cli-plugin-eslint": "^3.9.1",
-    "@vue/cli-plugin-unit-jest": "3.5.3",
-    "@vue/cli-service": "3.5.3",
-    "@vue/test-utils": "1.0.0-beta.29",
-    "autoprefixer": "^9.5.1",
-    "babel-core": "7.0.0-bridge.0",
-    "babel-eslint": "10.0.1",
-    "babel-jest": "23.6.0",
-    "chalk": "2.4.2",
-    "chokidar": "2.1.5",
-    "connect": "3.6.6",
-    "eslint": "5.15.3",
-    "eslint-plugin-vue": "5.2.2",
-    "html-webpack-plugin": "3.2.0",
-    "http-proxy-middleware": "^0.19.1",
-    "husky": "1.3.1",
-    "less": "^3.12.2",
-    "less-loader": "^7.0.1",
-    "lint-staged": "8.1.5",
-    "mockjs": "1.0.1-beta3",
-    "node-sass": "^4.14.1",
-    "plop": "2.3.0",
-    "runjs": "^4.3.2",
-    "sass-loader": "^7.3.1",
-    "script-ext-html-webpack-plugin": "2.1.3",
-    "script-loader": "0.7.2",
-    "serve-static": "^1.13.2",
-    "svg-sprite-loader": "4.1.3",
-    "svgo": "1.2.0",
-    "vue-template-compiler": "2.6.10"
-  },
-  "engines": {
-    "node": ">=8.9",
-    "npm": ">= 3.0.0"
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions"
-  ]
-}
+{
+  "name": "ruoyi",
+  "version": "3.0.0",
+  "description": "若依管理系统",
+  "author": "若依",
+  "license": "MIT",
+  "scripts": {
+    "dev": "vue-cli-service serve --open",
+    "build:prod": "vue-cli-service build",
+    "build:stage": "vue-cli-service build --mode staging",
+    "preview": "node build/index.js --preview",
+    "lint": "eslint --ext .js,.vue src",
+    "test:unit": "jest --clearCache && vue-cli-service test:unit",
+    "test:ci": "npm run lint && npm run test:unit",
+    "svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",
+    "new": "plop"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "src/**/*.{js,vue}": [
+      "eslint --fix",
+      "git add"
+    ]
+  },
+  "keywords": [
+    "vue",
+    "admin",
+    "dashboard",
+    "element-ui",
+    "boilerplate",
+    "admin-template",
+    "management-system"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://gitee.com/y_project/RuoYi-Vue.git"
+  },
+  "dependencies": {
+    "@riophae/vue-treeselect": "0.4.0",
+    "@tinymce/tinymce-vue": "^3.2.3",
+    "axios": "0.18.1",
+    "clipboard": "2.0.4",
+    "echarts": "4.2.1",
+    "element-ui": "^2.13.2",
+    "file-saver": "2.0.1",
+    "fuse.js": "3.4.4",
+    "js-beautify": "^1.10.2",
+    "js-cookie": "2.2.0",
+    "jsencrypt": "3.0.0-rc.1",
+    "mdui": "^1.0.0",
+    "normalize.css": "7.0.0",
+    "nprogress": "0.2.0",
+    "path-to-regexp": "2.4.0",
+    "screenfull": "4.2.0",
+    "sortablejs": "1.8.4",
+    "timeago.js": "^4.0.2",
+    "tinymce": "^5.5.1",
+    "vue": "2.6.10",
+    "vue-count-to": "1.0.13",
+    "vue-cropper": "0.4.9",
+    "vue-quill-editor": "3.0.6",
+    "vue-router": "3.0.2",
+    "vue-splitpane": "1.0.4",
+    "vue-timeago": "^5.1.2",
+    "vuedraggable": "2.20.0",
+    "vuex": "3.1.0"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "3.5.3",
+    "@vue/cli-plugin-eslint": "^3.9.1",
+    "@vue/cli-plugin-unit-jest": "3.5.3",
+    "@vue/cli-service": "3.5.3",
+    "@vue/test-utils": "1.0.0-beta.29",
+    "autoprefixer": "^9.5.1",
+    "babel-core": "7.0.0-bridge.0",
+    "babel-eslint": "10.0.1",
+    "babel-jest": "23.6.0",
+    "chalk": "2.4.2",
+    "chokidar": "2.1.5",
+    "connect": "3.6.6",
+    "eslint": "5.15.3",
+    "eslint-plugin-vue": "5.2.2",
+    "html-webpack-plugin": "3.2.0",
+    "http-proxy-middleware": "^0.19.1",
+    "husky": "1.3.1",
+    "less": "^3.12.2",
+    "less-loader": "^7.0.1",
+    "lint-staged": "8.1.5",
+    "mockjs": "1.0.1-beta3",
+    "node-sass": "^4.14.1",
+    "plop": "2.3.0",
+    "runjs": "^4.3.2",
+    "sass-loader": "^7.3.1",
+    "script-ext-html-webpack-plugin": "2.1.3",
+    "script-loader": "0.7.2",
+    "serve-static": "^1.13.2",
+    "svg-sprite-loader": "4.1.3",
+    "svgo": "1.2.0",
+    "vue-template-compiler": "2.6.10"
+  },
+  "engines": {
+    "node": ">=8.9",
+    "npm": ">= 3.0.0"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions"
+  ]
+}
diff --git a/ruoyi-ui/public/index.html b/ruoyi-ui/public/index.html
index 89bb9ea9d..77bb3239b 100644
--- a/ruoyi-ui/public/index.html
+++ b/ruoyi-ui/public/index.html
@@ -5,9 +5,10 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="renderer" content="webkit">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+    <!-- MDUI CSS -->
     <link
       rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/mdui@1.0.0/dist/css/mdui.min.css"
+      href="https://cdn.bootcdn.net/ajax/libs/mdui/1.0.0/css/mdui.min.css"
       integrity="sha384-2PJ2u4NYg6jCNNpv3i1hK9AoAqODy6CdiC+gYiL2DVx+ku5wzJMFNdE3RoWfBIRP"
       crossorigin="anonymous"
     />
@@ -204,6 +205,7 @@
     }
   </style>
   </head>
+
   <body>
     <div id="app">
 	    <div id="loader-wrapper">
@@ -213,10 +215,11 @@
 		    <div class="load_title">正在加载系统资源，请耐心等待</div>
         </div>
 	</div>
+    <script
+      src="https://cdn.bootcdn.net/ajax/libs/mdui/1.0.0/js/mdui.min.js"
+      integrity="sha384-aB8rnkAu/GBsQ1q6dwTySnlrrbhqDwrDnpVHR2Wgm8pWLbwUnzDcIROX3VvCbaK+"
+      crossorigin="anonymous"
+    ></script>
   </body>
-  <script
-    src="https://cdn.jsdelivr.net/npm/mdui@1.0.0/dist/js/mdui.min.js"
-    integrity="sha384-aB8rnkAu/GBsQ1q6dwTySnlrrbhqDwrDnpVHR2Wgm8pWLbwUnzDcIROX3VvCbaK+"
-    crossorigin="anonymous"
-  ></script>
+
 </html>
diff --git a/ruoyi-ui/src/main.js b/ruoyi-ui/src/main.js
index b96a288e5..5a9619872 100644
--- a/ruoyi-ui/src/main.js
+++ b/ruoyi-ui/src/main.js
@@ -54,6 +54,11 @@ Vue.prototype.msgInfo = function (msg) {
   this.$message.info(msg);
 }
 
+//上线前需要删除的目前使用的
+// 1.目前使用的是 cdn引入
+// package.json  >>   "mdui": "^1.0.0",
+
+
 // 全局组件挂载
 Vue.component('Pagination', Pagination)
 Vue.use(ElementUI)
diff --git a/ruoyi-ui/src/router/index.js b/ruoyi-ui/src/router/index.js
index 218bf89f2..60b8cf459 100644
--- a/ruoyi-ui/src/router/index.js
+++ b/ruoyi-ui/src/router/index.js
@@ -186,9 +186,9 @@ export const constantRoutes = [
           requireAuth: true,//加该字段,表示进入这个路由是需要登录的true
         },
       },{
-        path: '/NqQuillEdit',
-        name: 'NqQuillEdit',
-        component: resolve => require(['../views/bookmark/common/NqQuillEdit.vue'], resolve),
+        path: '/NqEdit',
+        name: 'NqEdit',
+        component: resolve => require(['../views/bookmark/common/NqEdit.vue'], resolve),
         meta:{
           title: 'Quill编辑器',icon:'user',
           requireAuth: true,//加该字段,表示进入这个路由是需要登录的true
diff --git a/ruoyi-ui/src/views/bookmark/bookmark/index.vue b/ruoyi-ui/src/views/bookmark/bookmark/index.vue
index d769f77b4..d794aa7d7 100644
--- a/ruoyi-ui/src/views/bookmark/bookmark/index.vue
+++ b/ruoyi-ui/src/views/bookmark/bookmark/index.vue
@@ -79,7 +79,7 @@
       <el-row>
         <!--        <hr class="bookamrk-hr" v-if="!queryParams.sousuo!=''"/>-->
         <el-col :span="24" v-for="bm in bookmarkList">
-          <div class="editBookamrk">
+          <div class="editBookamrk ">
             <div class="editlist">
               <div>
                 <el-button plain size="small" @click="handleUpdate(bm.bookmarkId)">修改</el-button>
@@ -97,7 +97,7 @@
           </div>
 
 
-          <div class="bookmark" :data-id="bm.id" @click="windowurl(bm.url,bm.bookmarkId)">
+          <div class="bookmark " :data-id="bm.id" @click="windowurl(bm.url,bm.bookmarkId)">
             <p class="bookmark-title" v-if="highlighted"><span v-html="highLight(bm.title,queryParams.sousuo)"/></p>
             <p class="bookmark-title" v-if="!highlighted">{{bm.title}}</p>
             <div class="">
diff --git a/ruoyi-ui/src/views/bookmark/common/ImportHtml.vue b/ruoyi-ui/src/views/bookmark/common/ImportHtml.vue
index 0d05f4238..453e54e07 100644
--- a/ruoyi-ui/src/views/bookmark/common/ImportHtml.vue
+++ b/ruoyi-ui/src/views/bookmark/common/ImportHtml.vue
@@ -29,8 +29,9 @@
         <div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许导入".html"格式文件！</div>
       </el-upload>
       <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitFileForm">确 定</el-button>
+        <el-button type="primary" class="  mdui-text-center  mdui-btn mdui-btn-raised mdui-text-color-blue-900  mdui-color-light-blue-100" @click="submitFileForm">确 定</el-button>
 <!--        <el-button @click="upload.open = false">取 消</el-button>-->
+        <button class="mdui-btn mdui-btn-raised mdui-btn-dense  mdui-color-light-blue-100  mdui-ripple">Button</button>
       </div>
 <!--    </el-dialog>-->
 
diff --git a/ruoyi-ui/src/views/bookmark/common/NqEdit.vue b/ruoyi-ui/src/views/bookmark/common/NqEdit.vue
new file mode 100644
index 000000000..64d6e009d
--- /dev/null
+++ b/ruoyi-ui/src/views/bookmark/common/NqEdit.vue
@@ -0,0 +1,107 @@
+<template>
+  <div class="home">
+
+    <div CLASS="title">
+      <div class="mdui-textfield mdui-textfield-floating-label">
+        <label class="mdui-textfield-label">文章标题</label>
+        <input class="mdui-textfield-input" type="text" required/>
+        <div class="mdui-textfield-error">文章标题不能为空</div>
+      </div>
+      <div class="mdui-textfield mdui-textfield-floating-label">
+        <label class="mdui-textfield-label">文章描述</label>
+        <input class="mdui-textfield-input" type="text" required/>
+        <div class="mdui-textfield-error">文章描述不能为空</div>
+      </div>
+    </div>
+    <div class="mian" v-html="msg">
+
+
+    </div>
+
+    <div>
+    <tinymce
+      ref="editor"
+      v-model="msg"
+      :disabled="disabled"
+      @onClick="onClick"
+    />
+    </div>
+    <div STYLE="margin-top: 10px;">
+      <button class="mdui-btn mdui-btn-raised mdui-color-indigo-300" @click="clear">清空内容</button>
+      <button class="mdui-btn mdui-ripple mdui-btn-raised " @click="disabled = true">禁用</button>
+      <button class="mdui-btn mdui-ripple mdui-btn-raised " @click="disabled = false">启用</button>
+    </div>
+
+
+  </div>
+</template>
+<script>
+  import tinymce from '../../../components/TinyMCE'
+
+  const defaultForm = {
+    status: 'draft',
+    title: '', // 文章题目
+    content: '', // 文章内容
+    content_short: '', // 文章摘要
+    source_uri: '', // 文章外链
+    image_uri: '', // 文章图片
+    display_time: undefined, // 前台展示时间
+    id: undefined,
+    platforms: ['a-platform'],
+    comment_disabled: false,
+    importance: 0
+  }
+
+  export default {
+    name: 'home',
+    components: {
+      tinymce
+    },
+    data(){
+      return{
+        postForm: Object.assign({}, defaultForm),
+        msg: "<span>请尽情创作吧!</span>",
+        disabled: false
+      }
+    },
+    methods: {
+      // 鼠标单击的事件
+      onClick (e, editor) {
+        console.log('Element clicked')
+        console.log(e)
+        console.log(editor)
+      },
+      // 清空内容
+      clear () {
+        this.$refs.editor.clear()
+      }
+    }
+  }
+</script>
+<style>
+  .title{
+    display: flex;
+  }
+  .title div:first-child{
+    margin-right: 20px;
+  }
+  .title div{
+    width: 50%;
+
+  }
+  .mian{
+    min-height: 100px;
+    width: 100%;
+    border: 1px solid #cacaca;
+    background-color: #ebebeb;
+    /*text-indent: 10px;*/
+    padding: 10px;
+    margin-bottom: 10px;
+    opacity: 0.9;
+  }
+  .home{
+    height: 800px;
+    overflow: scroll;
+  }
+
+</style>
diff --git a/ruoyi-ui/src/views/bookmark/common/NqQuillEdit.vue b/ruoyi-ui/src/views/bookmark/common/NqQuillEdit.vue
deleted file mode 100644
index da3fcedd4..000000000
--- a/ruoyi-ui/src/views/bookmark/common/NqQuillEdit.vue
+++ /dev/null
@@ -1,68 +0,0 @@
-<template>
-  <div class="home">
-
-
-
-    <el-form-item style="margin-bottom: 40px;" prop="title">
-      <MDinput v-model="postForm.title" :maxlength="100" name="name" required>
-        Title
-      </MDinput>
-    </el-form-item>
-
-
-
-
-
-    <tinymce
-      ref="editor"
-      v-model="msg"
-      :disabled="disabled"
-      @onClick="onClick"
-    />
-    <button @click="clear">清空内容</button>
-    <button @click="disabled = true">禁用</button>
-  </div>
-</template>
-<script>
-  import tinymce from '../../../components/TinyMCE'
-
-  const defaultForm = {
-    status: 'draft',
-    title: '', // 文章题目
-    content: '', // 文章内容
-    content_short: '', // 文章摘要
-    source_uri: '', // 文章外链
-    image_uri: '', // 文章图片
-    display_time: undefined, // 前台展示时间
-    id: undefined,
-    platforms: ['a-platform'],
-    comment_disabled: false,
-    importance: 0
-  }
-
-  export default {
-    name: 'home',
-    components: {
-      tinymce
-    },
-    data(){
-      return{
-        postForm: Object.assign({}, defaultForm),
-        msg: 'Welcome to Use Tinymce Editor',
-        disabled: false
-      }
-    },
-    methods: {
-      // 鼠标单击的事件
-      onClick (e, editor) {
-        console.log('Element clicked')
-        console.log(e)
-        console.log(editor)
-      },
-      // 清空内容
-      clear () {
-        this.$refs.editor.clear()
-      }
-    }
-  }
-</script>
diff --git a/ruoyi-ui/src/views/bookmark/index/index.vue b/ruoyi-ui/src/views/bookmark/index/index.vue
index f0a857626..7b9ef5f1e 100644
--- a/ruoyi-ui/src/views/bookmark/index/index.vue
+++ b/ruoyi-ui/src/views/bookmark/index/index.vue
@@ -5,13 +5,13 @@
       <transition name="el-zoom-in-left">
         <el-aside :style="asideHeight" v-show="isShowZtree" class="transition-box left isaside"
                   style="overflow-x:hidden;overflow-y: hidden;">
-          <el-header class="aside-logo">
+          <el-header class="aside-logo ">
             <!--        <img src="https://s1.ax1x.com/2020/08/15/dACqUO.png"/>-->
             <div class="logoname">
               <span>藏趣云书签</span>
             </div>
-            <div class="logoright">
-              <i class="el-icon-plus"/>
+            <div class="logoright ">
+              <i class="el-icon-plus mdui-ripple"/>
             </div>
 
           </el-header>
@@ -33,7 +33,7 @@
             <div class="aside-title" @click="importHtml"><i class="el-icon-s-platform"></i><span>导入书签</span></div>
             <div class="aside-title"><i class="el-icon-s-comment"></i><span>意见反馈</span></div>
             <div class="aside-title" @click="ceshi"><i class="el-icon-s-comment"></i><span>测试页面</span></div>
-            <div class="aside-title" @click="NqQuillEdit"><i class="el-icon-s-comment"></i><span>NqQuillEdit编辑器</span></div>
+            <div class="aside-title" @click="NqEdit"><i class="el-icon-s-comment"></i><span>NqQuillEdit编辑器</span></div>
             <div class="aside-title " style="margin-bottom: 100px"><i class="el-icon-s-grid"></i><span>其他设置</span></div>
 
           </div>
@@ -1287,9 +1287,9 @@
 
       },
       /**跳转NqQuillEdit测试页面**/
-      NqQuillEdit: function () {
+      NqEdit: function () {
         this.$router.push({
-          path: "/NqQuillEdit",
+          path: "/NqEdit",
         })
 
       },
@@ -1617,10 +1617,10 @@
   }
 
 
-  .logoright i:active {
-    background-color: #7a6df0;
-    color: #FFFFFF;
-  }
+  /*.logoright i:active {*/
+  /*  background-color: #7a6df0;*/
+  /*  color: #FFFFFF;*/
+  /*}*/
 
 
   .reminder {
@@ -2019,7 +2019,8 @@
     min-width: 250px;
   }
 
-  .box {
+  /*不可复制*/
+  .isaside {
     -moz-user-select: none; /* Firefox私有属性 */
     -webkit-user-select: none; /* WebKit内核私有属性 */
     -ms-user-select: none; /* IE私有属性(IE10及以后) */