清除标记

src/icons/svg/brush-line.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="brush-3-line">
+<path id="Vector" d="M5.33203 13.3311V9.99773H6.66536V13.3311H12.6654V8.6644H3.33203V13.3311H5.33203ZM2.66536 7.33107H13.332V5.33105H9.33203V2.66439H6.66536V5.33105H2.66536V7.33107ZM1.9987 13.9977V8.6644H1.33203V4.66439C1.33203 4.2962 1.63051 3.99772 1.9987 3.99772H5.33203V1.99772C5.33203 1.62953 5.63051 1.33105 5.9987 1.33105H9.9987C10.3669 1.33105 10.6654 1.62953 10.6654 1.99772V3.99772H13.9987C14.3669 3.99772 14.6654 4.2962 14.6654 4.66439V8.6644H13.9987V13.9977C13.9987 14.3659 13.7002 14.6644 13.332 14.6644H2.66536C2.29718 14.6644 1.9987 14.3659 1.9987 13.9977Z" fill="currentColor"/>
+</g>
+</svg>

src/views/bookShelf/components/LexicalType.vue

@@ -13,7 +13,7 @@
                         :class="[
                             itemR.type,itemR.tokens[9]===' '?'marginRight':'',itemR.marginRight?'marginSingleRight':'',itemR.highIndex?'fontWeight':'',itemR.color?'wordSelected':''
                         ]"
-                        :style="{background: itemR.color?itemR.color:'',borderColor:itemR.borderColor?itemR.borderColor:''}"
+                        :style="{background: itemR.color?itemR.color:'',borderColor:itemR.borderColor?itemR.borderColor:'',color: tabsIndex===1?selectSentenceIdList.indexOf(itemR.sent_id)>-1?colorObj.type==='white'||colorObj.type==='darkGreen'?sentenceLengthType[itemR.sententLenType].color:sentenceLengthType[itemR.sententLenType].dark:'#929CA8':tabsIndex===0?selectWordType.indexOf(itemR.tokens[11])>-1?vocabularyType[itemR.tokens[11]].color:colorObj.type==='white'||colorObj.type==='darkGreen'?'':'':''}"
                         >{{ itemR.tokens[2] }}</span
                     >
                     <span
@@ -24,7 +24,7 @@
                         :class="[
                                 resArr[0].wordsList[indexR + 1].type,resArr[0].wordsList[indexR + 1].tokens[9]===' '?'marginRight':'',resArr[0].wordsList[indexR + 1].marginRight?'marginSingleRight':'',resArr[0].wordsList[indexR + 1].highIndex?'fontWeight':'',resArr[0].wordsList[indexR + 1].color?'wordSelected':''
                             ]"
-                        :style="{background: resArr[0].wordsList[indexR + 1].color?resArr[0].wordsList[indexR + 1].color:'',borderColor:resArr[0].wordsList[indexR + 1].borderColor?resArr[0].wordsList[indexR + 1].borderColor:''}"
+                        :style="{background: resArr[0].wordsList[indexR + 1].color?resArr[0].wordsList[indexR + 1].color:'',borderColor:resArr[0].wordsList[indexR + 1].borderColor?resArr[0].wordsList[indexR + 1].borderColor:'',color: tabsIndex===1?selectSentenceIdList.indexOf(resArr[0].wordsList[indexR + 1].sent_id)>-1?colorObj.type==='white'||colorObj.type==='darkGreen'?sentenceLengthType[resArr[0].wordsList[indexR + 1].sententLenType].color:sentenceLengthType[itemR.sententLenType].dark:'#929CA8':tabsIndex===0?selectWordType.indexOf(resArr[0].wordsList[indexR + 1].tokens[11])>-1?vocabularyType[resArr[0].wordsList[indexR + 1].tokens[11]].color:colorObj.type==='white'||colorObj.type==='darkGreen'?'':'':''}"
                         >{{ resArr[0].wordsList[indexR + 1].tokens[2] }}</span
                     >
                 </template>
@@ -99,32 +99,49 @@
     </template>
 
     <!-- <img src="../../../assets/article-img.png" style="max-width:100%;margin:24px 0;" /> -->
-    <div class="search-box" v-if="showSearch">
-        <span class="search-show-btn" @click="changeShow"></span>
-        <div class="tabs-box">
-            <a :class="['tabs-btn',tabsIndex===0?'active':'']" @click="tabsIndex=0">词汇分布</a>
-            <a :class="['tabs-btn right-btn',tabsIndex===1?'active':'']" @click="tabsIndex=1">句长分布</a>
+    <div class="lexical-search" v-if="showSearch">
+        <div class="search-box">
+            <span class="search-show-btn" @click="changeShow"></span>
+            <div class="tabs-box">
+                <a :class="['tabs-btn',tabsIndex===0?'active':'']" @click="tabsIndex=0">词汇分布</a>
+                <a :class="['tabs-btn right-btn',tabsIndex===1?'active':'']" @click="tabsIndex=1">句长分布</a>
+            </div>
+            <ul v-if="tabsIndex===0">
+                <li v-for="(itemI,indexI) in vocabVlLevelItems" :key="indexI" @change="changeWordType(itemI)">
+                    <el-checkbox :checked="selectWordType.indexOf(itemI.vlId)>-1?true:false" :key="selectWordType.indexOf(itemI.vlId)" :label="itemI.vlId"><br/></el-checkbox>
+                    <p class="parent">
+                        <label :style="{width:itemI.vocabPercentStr}"></label>
+                        <span :style="{color:vocabularyType[itemI.vlId].color}">{{itemI.vlCnName}}</span>
+                        <b>{{itemI.vocabCount}}</b>
+                    </p>
+                </li>
+            </ul>
+            <ul v-if="tabsIndex===1">
+                <li v-for="(itemI,indexI) in sentLenDistributeItems" :key="indexI" @change="changeSentLen(itemI)">
+                    <el-checkbox :checked="selectSentenceType.indexOf(itemI.rangeInfo)>-1?true:false" :key="selectSentenceType.indexOf(itemI.rangeInfo)" :label="itemI.rangeInfo"><br/></el-checkbox>
+                    <p class="parent">
+                        <label :style="{width:itemI.percent+'%'}"></label>
+                        <span :style="{color:sentenceLengthType[itemI.rangeInfo].color}">{{itemI.rangeInfo}}</span>
+                        <b>{{itemI.count}}</b>
+                    </p>
+                </li>
+            </ul>
+        </div>
+    </div>
+    <div class="clear-box" v-if="showSearch">
+        <h5>词汇标记设置</h5>
+        <div class="item" v-if="tabsIndex===0" @click="hideSelectWord=!hideSelectWord">
+            <span>隐藏标记词</span>
+            <el-switch
+                v-model="hideSelectWord"
+                active-color="#175DFF"
+                inactive-color="#D0D3D9">
+            </el-switch>
+        </div>
+        <div class="item red-item" @click="clearSelect">
+            <span>清除标记</span>
+            <svg-icon icon-class="brush-line"></svg-icon>
         </div>
-        <ul v-if="tabsIndex===0">
-            <li v-for="(itemI,indexI) in vocabVlLevelItems" :key="indexI" @change="changeWordType(itemI)">
-                <el-checkbox key="word" :label="itemI.vlId"><br/></el-checkbox>
-                <p class="parent">
-                    <label :style="{width:itemI.vocabPercentStr}"></label>
-                    <span :style="{color:vocabularyType[itemI.vlId].color}">{{itemI.vlCnName}}</span>
-                    <b>{{itemI.vocabCount}}</b>
-                </p>
-            </li>
-        </ul>
-        <ul v-if="tabsIndex===1">
-            <li v-for="(itemI,indexI) in sentLenDistributeItems" :key="indexI" @change="changeSentLen(itemI)">
-                <el-checkbox key="sentence" :label="itemI.rangeInfo"><br/></el-checkbox>
-                <p class="parent">
-                    <label :style="{width:itemI.percent+'%'}"></label>
-                    <span :style="{color:sentenceLengthType[itemI.rangeInfo].color}">{{itemI.rangeInfo}}</span>
-                    <b>{{itemI.count}}</b>
-                </p>
-            </li>
-        </ul>
     </div>
   </div>
 </template>
@@ -315,7 +332,8 @@ export default {
       selectSentenceIdList: [], // 勾选的药显示的句子id
       sentLenDistributeItems: [],
       vocabVlLevelItems: [],
-      selectWordType: []
+      selectWordType: [],
+      hideSelectWord: false
     };
   },
   computed: {
@@ -396,6 +414,16 @@ export default {
         }else{
             this.selectWordType.push(item.vlId)
         }
+    },
+    // 清除标记
+    clearSelect(){
+        if(this.tabsIndex===0){
+            this.selectWordType = []
+        }else{
+            this.selectSentenceIdList = []
+            this.selectSentenceType = []
+        }
+        this.$forceUpdate()
     }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
@@ -541,16 +569,19 @@ export default {
         width: 430px;
     }
 }
-.search-box{
+.lexical-search{
+    right: calc((100% - 1000px)/2 - 8px);
     position: fixed;
     top: 200px;
-    width: 256px;
+    width: 270px;
+    padding: 8px;
+}
+.search-box{
     border-radius: 8px;
     border: 1px solid #E5E6EB;
     background: #FFF;
-    box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.08), 0px 16px 24px 2px rgba(0, 0, 0, 0.04), 0px 6px 30px 5px rgba(0, 0, 0, 0.05);
+    box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.10), 0px 4px 6px 1px rgba(0, 0, 0, 0.06), 0px 3px 6px 2px rgba(0, 0, 0, 0.05);
     // min-height: 204px;
-    right: calc((100% - 1000px)/2);
     padding: 0 24px 24px;
     .search-show-btn{
         border-radius: 4px;
@@ -627,4 +658,43 @@ export default {
         }
     }
 }
+.clear-box{
+    left: calc((100% - 1000px)/2);
+    position: fixed;
+    top: 150px;
+    width: 270px;
+    overflow: auto;
+    width: 176px;
+    padding: 8px;
+    border-radius: 8px;
+    border: 1px solid #EBEBEB;
+    background: #FFF;
+    box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.10), 0px 4px 6px 1px rgba(0, 0, 0, 0.06), 0px 3px 6px 2px rgba(0, 0, 0, 0.05);
+    margin-top: 24px;
+    h5{
+        margin: 0;
+        color: rgba(0, 0, 0, 0.40);
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 22px;
+    }
+    .item{
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-top: 4px;
+        border-radius: 4px;
+        background:#F2F3F5;
+        padding: 4px 8px;
+        color: #2F3742;
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 22px; 
+        cursor: pointer;
+        &.red-item{
+            color: #F53F3F;
+        }
+
+    }
+}
 </style>