From 7b38b9eb59bb2d68c406373529ae6873e4607f58 Mon Sep 17 00:00:00 2001
From: WangHao <43278047@qq.com>
Date: Thu, 1 Oct 2020 15:54:41 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BD=91=E9=A1=B5=20=E6=96=87=E6=9C=AC=20?=
 =?UTF-8?q?=E5=88=87=E6=8D=A2=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ruoyi-ui/.eslintrc.js                         | 398 +++++++++---------
 ruoyi-ui/package.json                         |   2 +
 ruoyi-ui/src/assets/styles/base.css           |  14 +
 ruoyi-ui/src/components/TagsInput/index.vue   |  71 ++++
 ruoyi-ui/src/router/index.js                  |   7 +
 .../src/views/bookmark/bookmark/index.vue     | 181 ++++++--
 ruoyi-ui/src/views/bookmark/ceshi/index.vue   |  37 ++
 ruoyi-ui/src/views/bookmark/index/index.vue   |   7 +
 ruoyi-ui/src/views/bookmark/menu/index.vue    |   3 -
 9 files changed, 476 insertions(+), 244 deletions(-)
 create mode 100644 ruoyi-ui/src/components/TagsInput/index.vue
 create mode 100644 ruoyi-ui/src/views/bookmark/ceshi/index.vue

diff --git a/ruoyi-ui/.eslintrc.js b/ruoyi-ui/.eslintrc.js
index b321fbe4f..836e4af1d 100644
--- a/ruoyi-ui/.eslintrc.js
+++ b/ruoyi-ui/.eslintrc.js
@@ -1,199 +1,199 @@
-// ESlint 检查配置
-module.exports = {
-  root: true,
-  parserOptions: {
-    parser: 'babel-eslint',
-    sourceType: 'module'
-  },
-  env: {
-    browser: true,
-    node: true,
-    es6: true,
-  },
-  extends: ['plugin:vue/recommended', 'eslint:recommended'],
-
-  // add your custom rules here
-  //it is base on https://github.com/vuejs/eslint-config-vue
-  rules: {
-    "vue/max-attributes-per-line": [2, {
-      "singleline": 10,
-      "multiline": {
-        "max": 1,
-        "allowFirstLine": false
-      }
-    }],
-    "vue/singleline-html-element-content-newline": "off",
-    "vue/multiline-html-element-content-newline":"off",
-    "vue/name-property-casing": ["error", "PascalCase"],
-    "vue/no-v-html": "off",
-    'accessor-pairs': 2,
-    'arrow-spacing': [2, {
-      'before': true,
-      'after': true
-    }],
-    'block-spacing': [2, 'always'],
-    'brace-style': [2, '1tbs', {
-      'allowSingleLine': true
-    }],
-    'camelcase': [0, {
-      'properties': 'always'
-    }],
-    'comma-dangle': [2, 'never'],
-    'comma-spacing': [2, {
-      'before': false,
-      'after': true
-    }],
-    'comma-style': [2, 'last'],
-    'constructor-super': 2,
-    'curly': [2, 'multi-line'],
-    'dot-location': [2, 'property'],
-    'eol-last': 2,
-    'eqeqeq': ["error", "always", {"null": "ignore"}],
-    'generator-star-spacing': [2, {
-      'before': true,
-      'after': true
-    }],
-    'handle-callback-err': [2, '^(err|error)$'],
-    'indent': [2, 2, {
-      'SwitchCase': 1
-    }],
-    'jsx-quotes': [2, 'prefer-single'],
-    'key-spacing': [2, {
-      'beforeColon': false,
-      'afterColon': true
-    }],
-    'keyword-spacing': [2, {
-      'before': true,
-      'after': true
-    }],
-    'new-cap': [2, {
-      'newIsCap': true,
-      'capIsNew': false
-    }],
-    'new-parens': 2,
-    'no-array-constructor': 2,
-    'no-caller': 2,
-    'no-console': 'off',
-    'no-class-assign': 2,
-    'no-cond-assign': 2,
-    'no-const-assign': 2,
-    'no-control-regex': 0,
-    'no-delete-var': 2,
-    'no-dupe-args': 2,
-    'no-dupe-class-members': 2,
-    'no-dupe-keys': 2,
-    'no-duplicate-case': 2,
-    'no-empty-character-class': 2,
-    'no-empty-pattern': 2,
-    'no-eval': 2,
-    'no-ex-assign': 2,
-    'no-extend-native': 2,
-    'no-extra-bind': 2,
-    'no-extra-boolean-cast': 2,
-    'no-extra-parens': [2, 'functions'],
-    'no-fallthrough': 2,
-    'no-floating-decimal': 2,
-    'no-func-assign': 2,
-    'no-implied-eval': 2,
-    'no-inner-declarations': [2, 'functions'],
-    'no-invalid-regexp': 2,
-    'no-irregular-whitespace': 2,
-    'no-iterator': 2,
-    'no-label-var': 2,
-    'no-labels': [2, {
-      'allowLoop': false,
-      'allowSwitch': false
-    }],
-    'no-lone-blocks': 2,
-    'no-mixed-spaces-and-tabs': 2,
-    'no-multi-spaces': 2,
-    'no-multi-str': 2,
-    'no-multiple-empty-lines': [2, {
-      'max': 1
-    }],
-    'no-native-reassign': 2,
-    'no-negated-in-lhs': 2,
-    'no-new-object': 2,
-    'no-new-require': 2,
-    'no-new-symbol': 2,
-    'no-new-wrappers': 2,
-    'no-obj-calls': 2,
-    'no-octal': 2,
-    'no-octal-escape': 2,
-    'no-path-concat': 2,
-    'no-proto': 2,
-    'no-redeclare': 2,
-    'no-regex-spaces': 2,
-    'no-return-assign': [2, 'except-parens'],
-    'no-self-assign': 2,
-    'no-self-compare': 2,
-    'no-sequences': 2,
-    'no-shadow-restricted-names': 2,
-    'no-spaced-func': 2,
-    'no-sparse-arrays': 2,
-    'no-this-before-super': 2,
-    'no-throw-literal': 2,
-    'no-trailing-spaces': 2,
-    'no-undef': 2,
-    'no-undef-init': 2,
-    'no-unexpected-multiline': 2,
-    'no-unmodified-loop-condition': 2,
-    'no-unneeded-ternary': [2, {
-      'defaultAssignment': false
-    }],
-    'no-unreachable': 2,
-    'no-unsafe-finally': 2,
-    'no-unused-vars': [2, {
-      'vars': 'all',
-      'args': 'none'
-    }],
-    'no-useless-call': 2,
-    'no-useless-computed-key': 2,
-    'no-useless-constructor': 2,
-    'no-useless-escape': 0,
-    'no-whitespace-before-property': 2,
-    'no-with': 2,
-    'one-var': [2, {
-      'initialized': 'never'
-    }],
-    'operator-linebreak': [2, 'after', {
-      'overrides': {
-        '?': 'before',
-        ':': 'before'
-      }
-    }],
-    'padded-blocks': [2, 'never'],
-    'quotes': [2, 'single', {
-      'avoidEscape': true,
-      'allowTemplateLiterals': true
-    }],
-    'semi': [2, 'never'],
-    'semi-spacing': [2, {
-      'before': false,
-      'after': true
-    }],
-    'space-before-blocks': [2, 'always'],
-    'space-before-function-paren': [2, 'never'],
-    'space-in-parens': [2, 'never'],
-    'space-infix-ops': 2,
-    'space-unary-ops': [2, {
-      'words': true,
-      'nonwords': false
-    }],
-    'spaced-comment': [2, 'always', {
-      'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
-    }],
-    'template-curly-spacing': [2, 'never'],
-    'use-isnan': 2,
-    'valid-typeof': 2,
-    'wrap-iife': [2, 'any'],
-    'yield-star-spacing': [2, 'both'],
-    'yoda': [2, 'never'],
-    'prefer-const': 2,
-    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
-    'object-curly-spacing': [2, 'always', {
-      objectsInObjects: false
-    }],
-    'array-bracket-spacing': [2, 'never']
-  }
-}
+// ESlint 检查配置
+module.exports = {
+  root: true,
+  parserOptions: {
+    parser: 'babel-eslint',
+    sourceType: 'module'
+  },
+  env: {
+    browser: true,autoprefixer
+    node: true,
+    es6: true,
+  },
+  extends: ['plugin:vue/recommended', 'eslint:recommended'],
+
+  // add your custom rules here
+  //it is base on https://github.com/vuejs/eslint-config-vue
+  rules: {
+    "vue/max-attributes-per-line": [2, {
+      "singleline": 10,
+      "multiline": {
+        "max": 1,
+        "allowFirstLine": false
+      }
+    }],
+    "vue/singleline-html-element-content-newline": "off",
+    "vue/multiline-html-element-content-newline":"off",
+    "vue/name-property-casing": ["error", "PascalCase"],
+    "vue/no-v-html": "off",
+    'accessor-pairs': 2,
+    'arrow-spacing': [2, {
+      'before': true,
+      'after': true
+    }],
+    'block-spacing': [2, 'always'],
+    'brace-style': [2, '1tbs', {
+      'allowSingleLine': true
+    }],
+    'camelcase': [0, {
+      'properties': 'always'
+    }],
+    'comma-dangle': [2, 'never'],
+    'comma-spacing': [2, {
+      'before': false,
+      'after': true
+    }],
+    'comma-style': [2, 'last'],
+    'constructor-super': 2,
+    'curly': [2, 'multi-line'],
+    'dot-location': [2, 'property'],
+    'eol-last': 2,
+    'eqeqeq': ["error", "always", {"null": "ignore"}],
+    'generator-star-spacing': [2, {
+      'before': true,
+      'after': true
+    }],
+    'handle-callback-err': [2, '^(err|error)$'],
+    'indent': [2, 2, {
+      'SwitchCase': 1
+    }],
+    'jsx-quotes': [2, 'prefer-single'],
+    'key-spacing': [2, {
+      'beforeColon': false,
+      'afterColon': true
+    }],
+    'keyword-spacing': [2, {
+      'before': true,
+      'after': true
+    }],
+    'new-cap': [2, {
+      'newIsCap': true,
+      'capIsNew': false
+    }],
+    'new-parens': 2,
+    'no-array-constructor': 2,
+    'no-caller': 2,
+    'no-console': 'off',
+    'no-class-assign': 2,
+    'no-cond-assign': 2,
+    'no-const-assign': 2,
+    'no-control-regex': 0,
+    'no-delete-var': 2,
+    'no-dupe-args': 2,
+    'no-dupe-class-members': 2,
+    'no-dupe-keys': 2,
+    'no-duplicate-case': 2,
+    'no-empty-character-class': 2,
+    'no-empty-pattern': 2,
+    'no-eval': 2,
+    'no-ex-assign': 2,
+    'no-extend-native': 2,
+    'no-extra-bind': 2,
+    'no-extra-boolean-cast': 2,
+    'no-extra-parens': [2, 'functions'],
+    'no-fallthrough': 2,
+    'no-floating-decimal': 2,
+    'no-func-assign': 2,
+    'no-implied-eval': 2,
+    'no-inner-declarations': [2, 'functions'],
+    'no-invalid-regexp': 2,
+    'no-irregular-whitespace': 2,
+    'no-iterator': 2,
+    'no-label-var': 2,
+    'no-labels': [2, {
+      'allowLoop': false,
+      'allowSwitch': false
+    }],
+    'no-lone-blocks': 2,
+    'no-mixed-spaces-and-tabs': 2,
+    'no-multi-spaces': 2,
+    'no-multi-str': 2,
+    'no-multiple-empty-lines': [2, {
+      'max': 1
+    }],
+    'no-native-reassign': 2,
+    'no-negated-in-lhs': 2,
+    'no-new-object': 2,
+    'no-new-require': 2,
+    'no-new-symbol': 2,
+    'no-new-wrappers': 2,
+    'no-obj-calls': 2,
+    'no-octal': 2,
+    'no-octal-escape': 2,
+    'no-path-concat': 2,
+    'no-proto': 2,
+    'no-redeclare': 2,
+    'no-regex-spaces': 2,
+    'no-return-assign': [2, 'except-parens'],
+    'no-self-assign': 2,
+    'no-self-compare': 2,
+    'no-sequences': 2,
+    'no-shadow-restricted-names': 2,
+    'no-spaced-func': 2,
+    'no-sparse-arrays': 2,
+    'no-this-before-super': 2,
+    'no-throw-literal': 2,
+    'no-trailing-spaces': 2,
+    'no-undef': 2,
+    'no-undef-init': 2,
+    'no-unexpected-multiline': 2,
+    'no-unmodified-loop-condition': 2,
+    'no-unneeded-ternary': [2, {
+      'defaultAssignment': false
+    }],
+    'no-unreachable': 2,
+    'no-unsafe-finally': 2,
+    'no-unused-vars': [2, {
+      'vars': 'all',
+      'args': 'none'
+    }],
+    'no-useless-call': 2,
+    'no-useless-computed-key': 2,
+    'no-useless-constructor': 2,
+    'no-useless-escape': 0,
+    'no-whitespace-before-property': 2,
+    'no-with': 2,
+    'one-var': [2, {
+      'initialized': 'never'
+    }],
+    'operator-linebreak': [2, 'after', {
+      'overrides': {
+        '?': 'before',
+        ':': 'before'
+      }
+    }],
+    'padded-blocks': [2, 'never'],
+    'quotes': [2, 'single', {
+      'avoidEscape': true,
+      'allowTemplateLiterals': true
+    }],
+    'semi': [2, 'never'],
+    'semi-spacing': [2, {
+      'before': false,
+      'after': true
+    }],
+    'space-before-blocks': [2, 'always'],
+    'space-before-function-paren': [2, 'never'],
+    'space-in-parens': [2, 'never'],
+    'space-infix-ops': 2,
+    'space-unary-ops': [2, {
+      'words': true,
+      'nonwords': false
+    }],
+    'spaced-comment': [2, 'always', {
+      'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
+    }],
+    'template-curly-spacing': [2, 'never'],
+    'use-isnan': 2,
+    'valid-typeof': 2,
+    'wrap-iife': [2, 'any'],
+    'yield-star-spacing': [2, 'both'],
+    'yoda': [2, 'never'],
+    'prefer-const': 2,
+    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
+    'object-curly-spacing': [2, 'always', {
+      objectsInObjects: false
+    }],
+    'array-bracket-spacing': [2, 'never']
+  }
+}
diff --git a/ruoyi-ui/package.json b/ruoyi-ui/package.json
index cc1db8c73..3a7949bfd 100644
--- a/ruoyi-ui/package.json
+++ b/ruoyi-ui/package.json
@@ -84,6 +84,8 @@
     "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.9.0",
diff --git a/ruoyi-ui/src/assets/styles/base.css b/ruoyi-ui/src/assets/styles/base.css
index b60d600a5..6687a4cf5 100644
--- a/ruoyi-ui/src/assets/styles/base.css
+++ b/ruoyi-ui/src/assets/styles/base.css
@@ -3,6 +3,9 @@
     .sousouleft-switch{
       display: none;
     }
+  .dropdownList{
+    font-size: 22px!important;
+  }
 }
 
 
@@ -26,9 +29,20 @@
 
 /* >>> md*/
 @media screen and (max-width: 992px) {
+  .el-dropdown-link span{
+    display: none;
+  }
 
 
 }
+
+/* >>> md*/
+@media screen and (max-width: 850px) {
+
+
+
+}
+
 /* ipad >>> xs*/
 @media screen and (max-width: 768px) {
   .sousou-leftico{
diff --git a/ruoyi-ui/src/components/TagsInput/index.vue b/ruoyi-ui/src/components/TagsInput/index.vue
new file mode 100644
index 000000000..e64074800
--- /dev/null
+++ b/ruoyi-ui/src/components/TagsInput/index.vue
@@ -0,0 +1,71 @@
+<template>
+  <div class="tags_input">
+
+    <div style="border: 1px solid red;height: 50px"
+      type="text"
+      :placeholder="placeholder"
+      v-model="value"
+      @keyup.enter.native="add" contenteditable="true">
+      <el-tag style="float: left;margin-top: 10px;margin-left: 10px"
+        v-for="(tag,index) in list"
+        :key="index"
+        closable
+        :disable-transitions="false"
+        @close="handleClose(tag)">
+        {{tag}}
+      </el-tag>
+
+
+
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    name:'TagsInput',
+    props: {
+      listFilter: Boolean, // 是否去重
+      defaulList: null,    // 默认值
+      placeholder: null // 占位文字
+    },
+    data() {
+      return {
+        value: '',
+        list: [],
+      }
+    },
+    watch:{
+      defaulList: {
+        handler(newVal) {
+          this.list = newVal
+        },
+        deep: true
+      }
+    },
+    mounted() {
+      this.list = this.defaulList
+      this.$emit('input', this.list)  // 发送给父级的tagslist
+    },
+    methods: {
+      add() {
+        let self = this
+        if (self.value != '' || self.value != ' ') {
+          self.list.push(self.value)
+          if (self.listFilter) {
+            let arr = self.list
+            let set = new Set(arr)
+            self.list = Array.from(set)
+          }
+        }
+        self.value = ''
+        self.$emit('input', self.list)
+      },
+      handleClose(tag) {
+        let self = this
+        self.$emit('tagClose', tag)
+        self.list.splice(self.list.indexOf(tag), 1);
+      },
+
+    }
+  }
+</script>
diff --git a/ruoyi-ui/src/router/index.js b/ruoyi-ui/src/router/index.js
index 1b3447110..3ad53238b 100644
--- a/ruoyi-ui/src/router/index.js
+++ b/ruoyi-ui/src/router/index.js
@@ -166,6 +166,13 @@ export const constantRoutes = [
         meta:{
           requireAuth: true,//加该字段,表示进入这个路由是需要登录的true
         },
+      },{
+        path: '/ceshi',
+        name: 'ceshi',
+        component: resolve => require(['../views/bookmark/ceshi/index.vue'], resolve),
+        meta:{
+          requireAuth: true,//加该字段,表示进入这个路由是需要登录的true
+        },
       }
     ],
 
diff --git a/ruoyi-ui/src/views/bookmark/bookmark/index.vue b/ruoyi-ui/src/views/bookmark/bookmark/index.vue
index 9a5b57b0a..fbbf5413c 100644
--- a/ruoyi-ui/src/views/bookmark/bookmark/index.vue
+++ b/ruoyi-ui/src/views/bookmark/bookmark/index.vue
@@ -3,50 +3,62 @@
 <template >
     <div >
 
-      <div class="filter" >
-        <div class="filter-sort" >
-          <el-dropdown trigger="click" size="small">
-              <span class="el-dropdown-link">
-            <span>按时间排序(正)</span> <i class="el-icon-caret-bottom"></i>
-              </span>
-            <el-dropdown-menu slot="dropdown" class="filter-sort-dropdown">
-              <el-dropdown-item class="filter-item"><i class="el-icon-bottom"></i>按时间排序(正)</el-dropdown-item>
-              <el-dropdown-item class="filter-item"><i class="el-icon-bottom"></i>按时间排序(反)</el-dropdown-item>
-              <el-dropdown-item class="filter-item"><i class="el-icon-bottom"></i>按字母A-Z排序</el-dropdown-item>
-              <el-dropdown-item class="filter-item"><i class="el-icon-bottom"></i>按字母A-Z排序</el-dropdown-item>
-              <el-dropdown-item class="filter-item"><i class="el-icon-bottom"></i>按网站A-Z排序</el-dropdown-item>
-            </el-dropdown-menu>
-          </el-dropdown>
+      <div class="filter-tbar" >
+        <div class="filter-classification" >
+          <div class="classification " @click="showopen(0)"><span>全部</span></div>
+          <div class="classification"  @click="showopen(1)"><span>网页</span></div>
+          <div class="classification"  @click="showopen(2)"><span>文本</span></div>
+          <div class="classification"  @click="showopen(3)"><span>其他</span></div>
         </div>
-        <div >
-          <el-divider direction="vertical"></el-divider>
-        </div>
-        <div class="filler-tag">
-          <el-tag size="small">我的最爱</el-tag>
-        </div>
-        <div class="filler-tag">
-          <el-tag size="small" >小型标签</el-tag>
-        </div>
-        <div class="filler-tag">
-          <el-tag size="small" >小型标签</el-tag>
-        </div>
-        <div class="filler-tag">
-          <el-tag size="small" >小型标签</el-tag>
-        </div>
-        <div class="filler-tag">
-          <el-tag size="small" >小型标签</el-tag>
-        </div>
-        <div class="filler-tag">
-          <el-tag size="small" >小型标签</el-tag>
-        </div>
-        <div class="filler-tag">
-          <el-tag size="small" >...</el-tag>
+        <div class="setUpThe">
+          <div class="filter-content">
+            <el-dropdown trigger="hover" size="small">
+              <div class="el-dropdown-link dropdownList">
+                <i class="el-icon-document-checked " ></i>  <span>排序模式</span>
+              </div>
+              <el-dropdown-menu slot="dropdown" class="filter-sort-dropdown">
+                <el-dropdown-item class="filter-item"><i class="el-icon-bottom"></i>按时间排序(正)</el-dropdown-item>
+                <el-dropdown-item class="filter-item"><i class="el-icon-bottom"></i>按时间排序(反)</el-dropdown-item>
+                <el-dropdown-item class="filter-item"><i class="el-icon-bottom"></i>按字母A-Z排序</el-dropdown-item>
+                <el-dropdown-item class="filter-item"><i class="el-icon-bottom"></i>按字母A-Z排序</el-dropdown-item>
+                <el-dropdown-item class="filter-item"><i class="el-icon-bottom"></i>按网站A-Z排序</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+
+          </div>
+          <div class="filter-content">
+            <el-dropdown trigger="hover" size="small">
+              <div class="el-dropdown-link dropdownList">
+                <i class="el-icon-tickets " ></i>  <span>卡片模式</span>
+              </div>
+              <el-dropdown-menu slot="dropdown" class="filter-sort-dropdown">
+                <el-dropdown-item class="filter-item"><i class="el-icon-bottom"></i>按时间排序(正)</el-dropdown-item>
+                <el-dropdown-item class="filter-item"><i class="el-icon-bottom"></i>按时间排序(反)</el-dropdown-item>
+                <el-dropdown-item class="filter-item"><i class="el-icon-bottom"></i>按字母A-Z排序</el-dropdown-item>
+                <el-dropdown-item class="filter-item"><i class="el-icon-bottom"></i>按字母A-Z排序</el-dropdown-item>
+                <el-dropdown-item class="filter-item"><i class="el-icon-bottom"></i>按网站A-Z排序</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+
+          </div>
+          <div class="filter-content">
+            <el-dropdown trigger="hover" size="small">
+              <div class="el-dropdown-link dropdownList">
+                <i class="el-icon-setting " ></i>  <span>批量设置</span>
+              </div>
+              <el-dropdown-menu slot="dropdown" class="filter-sort-dropdown">
+                <el-dropdown-item class="filter-item"><i class="el-icon-bottom"></i>编辑</el-dropdown-item>
+                <el-dropdown-item class="filter-item"><i class="el-icon-bottom"></i>批量处理</el-dropdown-item>
+                <el-dropdown-item class="filter-item"><i class="el-icon-bottom"></i>排序</el-dropdown-item>
+                <el-dropdown-item class="filter-item"><i class="el-icon-bottom"></i>按网站A-Z排序</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+
+
+          </div>
         </div>
       </div>
 
-
-
-
       <div class="nullbookmark" v-if="showimg">
           <div class="nullbookmark-img">
           </div>
@@ -84,6 +96,12 @@
                     <img :ng-src="'https://favicon.lucq.fun/?url=http://'+bm.urls" :src="'https://favicon.lucq.fun/?url=http://'+bm.urls" onerror="this.src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQEAYAAABPYyMiAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAAASAAAAEgARslrPgAAAmVJREFUSMftlG1IU2EUx8+5jRHzg+5OiD64WTBBjSY5ZybUJMaMiIUICUKFIGmoIIogYWKFBmtDxN1tBKIWvlS6SR+iLFDBXqSMgmzbvQ7fkAjcINmQ5u7pQwyCiOvWx/p/fPj9/5znnPM8AP+VolRTjjHhTlmZipzEk9GYao4sVaMYxXp62NgIdpLBCuLP05mZZHOYZA3p5KgMjBcUwCmw4PfVVYiBGmbW1zMzOU4QCgtTvdAeRESEyNZyJbx+dDTjVv/9YFSjSScnfabsbPYMF+AbxsYS3F5TfwPZAacpMNfUBEAljK24mMJwlLIUClTAdfwok9FXWBTtc3Phzqv7c/RWa8KnrHZM8VltbRjC92AxGkEPRpSJInjJQPpIBJoZC6nn50M19dM5J/v6/lhRxgXXDX9Qp1POcmHh2sTEQbfbvVmrUCTbr4RPaeMe8Q0eTyI36VkrW50mftjrPWCyDn9oSUuTdj4Y/1Qpl7NdzkNC98iIqsIxHdQVFaU8eWW1U1guLy1lr3Acr3O7pXi227EhDLpcCZ8UL/kK8LIYjxtDIRhEP8xGIlI8bcAKvY3FGB/zYvf81pYUL/0PvGTKoTUvjzbgCx5ZWlJq3a5lQa1Ge3yTWnp64ASYqVcUoXn3Jtja2/EpRtHj89FF8Tb25ufDOwCo8/lSL0BF/eDPzcVXeA7WDAa6J9rES1VVdJqx41JHBwCE8BgA3JU9B+3AACziMwjv7MAaPQb/wgIAnP2rDpCWtpkncjm+Ro34bWgo3FkX0O6bnARARCT6hSR6YzazXa7DfLyigo7TNtObxNb/s/oB7V8JFvW/8IQAAAAldEVYdGRhdGU6Y3JlYXRlADIwMjAtMDItMDJUMTg6MTE6NTgrMDg6MDCoc6tpAAAAJXRFWHRkYXRlOm1vZGlmeQAyMDIwLTAyLTAyVDE4OjExOjU4KzA4OjAw2S4T1QAAAGd0RVh0c3ZnOmJhc2UtdXJpAGZpbGU6Ly8vaG9tZS9hZG1pbi9pY29uLWZvbnQvdG1wL2ljb25fNWhyOG55Nmo1bWMvamluZ2RpYW5hbmxpX2tvbmd3dWppYW94aW5nX3Nob3VjYW5nLnN2Z4/vilwAAAAASUVORK5CYII='" alt=""  ng-show="bm.urls">
                   </div>
                   <div class="bookmark-official">{{bm.urls}}&nbsp;·&nbsp;</div><div class="bookmark-time">{{bm.createTime|changeTime}}</div>
+                  <div class="bookmark-time" v-for="t in bm.sqTags">
+                    <el-tag class="bookmark-list-tag" style="background-color: #7a6df0;color: #ffffff" data-bookmarkId="t.bookmarkId" data-tagId="t.tagId}" size="mini">{{t.name}}</el-tag>
+
+                  </div>
+
+
                 </div>
               </div>
             </div>
@@ -278,11 +296,27 @@
 
       },
     mounted(){
-
+//初始化
+      this.newBookmark();
     },
     methods: {
+      /**初始化**/
+      newBookmark() {
+        //默认选中 全部
+        document.getElementsByClassName("classification")[0].classList.add("classification-click");
+      },
 
 
+      /**切换显示 全部 网页 文本 其他**/
+      showopen(e) {
+        document.getElementsByClassName("classification")[e].classList.add("classification-click");
+        for (var i = 0; i < 4; i++) {
+          if (i != e) {
+            document.getElementsByClassName("classification")[i].classList.remove('classification-click');
+          }
+        }
+      },
+
 
     /**书签编辑设置的 标签开始**/
       taghandleClose(tag) {
@@ -509,7 +543,6 @@
 
 
   .filter-sort-dropdown{
-    top:65px!important;
     box-shadow: 0 2px 15px 0 rgba(0,0,0,.2)!important;
     font-weight: 600!important;
   }
@@ -545,6 +578,7 @@
     position: absolute;
     background-color: #acd7ff;
     right: 0;
+    display: none;
   }
   .editlist{
     display: flex;
@@ -564,6 +598,69 @@
     margin-right: 5px;
   }
 
+  .filter-tbar{
+    display: flex;
+    position: relative;
+    width: 100%;
+    height: 40px;
+    -webkit-box-pack: justify;
+    justify-content: space-between;
+    -webkit-box-align: center;
+    align-items: center;
 
+    box-sizing: border-box;
+  }
+
+  .filter-classification {
+    display: flex;
+    -webkit-box-align: center;
+    align-items: center;
+
+  }
+  .setUpThe{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .filter-content{
+    margin-left: 18px;
+
+  }
+
+.dropdownList{
+  display: flex;
+  justify-content: center;
+  font-size: 18px;
+}
+.dropdownList i{
+margin-right: 4px;
+  font-weight: 600;
+}
+.dropdownList span{
+  line-height: initial;
+  font-size: 17px;
+}
+
+
+
+  .classification{
+    width: 60px;
+    height: 27px;
+    margin-left: 10px;
+    text-align: center;
+    line-height: 26px;
+    color: #a4a4a4;
+  }
+  .classification-click{
+    border-radius: 19px;
+    background: #606c88;  /* fallback for old browsers */
+    background: -webkit-linear-gradient(to right, #3f4c6b, #606c88);  /* Chrome 10-25, Safari 5.1-6 */
+    background: linear-gradient(to right, #3f4c6b, #606c88); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+    color: #FFFFFF;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.4)
+  }
+  .bookmark-list-tag{
+    margin-left: 4px;
+  }
 
 </style>
diff --git a/ruoyi-ui/src/views/bookmark/ceshi/index.vue b/ruoyi-ui/src/views/bookmark/ceshi/index.vue
new file mode 100644
index 000000000..6e43317ce
--- /dev/null
+++ b/ruoyi-ui/src/views/bookmark/ceshi/index.vue
@@ -0,0 +1,37 @@
+<template>
+  <div>
+
+    <div style="width: 500px">
+      <tags-input
+        v-model="tagList"
+        :defaulList="defaulList"
+        :listFilter=true
+        placeholder="按enter键创建标签"
+        @tagClose="tagClose"></tags-input>
+    </div>
+  </div>
+</template>
+<script>
+  import TagsInput from '../../../components/TagsInput'
+  export default {
+    components: {
+      TagsInput
+    },
+    data() {
+      return {
+        // 子组件返回的list
+        tagList: null,
+        // 付默认值
+        defaulList:[],
+        // 是否去重
+        listFilter:false
+      }
+    },
+    methods: {
+      // 标签关闭方法
+      tagClose(tag){
+        console.log(tag)
+      }
+    }
+  }
+</script>
diff --git a/ruoyi-ui/src/views/bookmark/index/index.vue b/ruoyi-ui/src/views/bookmark/index/index.vue
index 3ddafd420..66ff53d87 100644
--- a/ruoyi-ui/src/views/bookmark/index/index.vue
+++ b/ruoyi-ui/src/views/bookmark/index/index.vue
@@ -28,6 +28,7 @@
       <div class="aside-title" @click="gorecycle"><i class="el-icon-delete-solid"></i><span>回收站</span></div>
       <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 " style="margin-bottom: 100px"><i class="el-icon-s-grid"></i><span>其他设置</span></div>
 
       </div>
@@ -706,6 +707,12 @@
           path: "/importHtml",
         })
 
+      },/**跳转测试页面**/
+      ceshi:function(){
+        this.$router.push({
+          path: "/ceshi",
+        })
+
       },
 
 
diff --git a/ruoyi-ui/src/views/bookmark/menu/index.vue b/ruoyi-ui/src/views/bookmark/menu/index.vue
index aaf8df822..6d8ef3b9e 100644
--- a/ruoyi-ui/src/views/bookmark/menu/index.vue
+++ b/ruoyi-ui/src/views/bookmark/menu/index.vue
@@ -156,9 +156,6 @@
 
     },
 
-
-
-
   }
 </script>
 <style >