filter-modal

src/App.vue

@@ -21,6 +21,9 @@ const themeOverrides: GlobalThemeOverrides = {
     borderFocus: '#FCF4F5',
     iconSize: '0.14rem',
   },
+  Checkbox: {
+    textColor: '#6E798C',
+  },
 }
 </script>
 
@@ -45,6 +48,7 @@ html, body
   user-select none
   font-size 15.8vh
   line-height 1.5
+  overflow hidden
   p
     margin 0
 #app

src/assets/images/dot.svg

+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle opacity="0.2" cx="4" cy="4" r="4" fill="#C4C9CE"/>
+<circle cx="4" cy="4" r="2" fill="#C4C9CE"/>
+</svg>

src/assets/images/export.svg

+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.41683 1.25016C5.41683 1.02004 5.23028 0.833496 5.00016 0.833496C4.77004 0.833496 4.5835 1.02004 4.5835 1.25016V5.24424L3.21146 3.8722C3.04874 3.70948 2.78492 3.70948 2.6222 3.8722C2.45948 4.03492 2.45948 4.29874 2.6222 4.46146L4.70524 6.54449C4.70624 6.5455 4.70725 6.5465 4.70827 6.5475C4.74758 6.5861 4.79264 6.61534 4.84067 6.63521C4.88943 6.65544 4.94287 6.66666 4.99891 6.66683L5.00016 6.66683L5.00141 6.66683C5.11459 6.6665 5.21716 6.62104 5.29206 6.5475C5.29307 6.5465 5.29408 6.5455 5.29509 6.54449L7.37812 4.46146C7.54084 4.29874 7.54084 4.03492 7.37812 3.8722C7.21541 3.70948 6.95159 3.70948 6.78887 3.8722L5.41683 5.24424V1.25016Z" fill="#DD505E"/>
+<path d="M1.25016 5.8335C1.48028 5.8335 1.66683 6.02004 1.66683 6.25016V7.91683C1.66683 8.02734 1.71073 8.13332 1.78887 8.21146C1.86701 8.2896 1.97299 8.3335 2.0835 8.3335H7.91683C8.02734 8.3335 8.13332 8.2896 8.21146 8.21146C8.2896 8.13332 8.3335 8.02734 8.3335 7.91683V6.25016C8.3335 6.02004 8.52004 5.8335 8.75016 5.8335C8.98028 5.8335 9.16683 6.02004 9.16683 6.25016V7.91683C9.16683 8.24835 9.03513 8.56629 8.80071 8.80071C8.56629 9.03513 8.24835 9.16683 7.91683 9.16683H2.0835C1.75198 9.16683 1.43403 9.03513 1.19961 8.80071C0.965192 8.56629 0.833496 8.24835 0.833496 7.91683V6.25016C0.833496 6.02004 1.02004 5.8335 1.25016 5.8335Z" fill="#DD505E"/>
+</svg>

src/components/MyComponent/main.styl

@@ -59,6 +59,8 @@ $light-gray = rgba(0,0,0,.06)
 $bg = rgba(249,250,250,.75)
 $white-bg = #f7f7f7
 
+$font = #6E798C
+
 $flex-align() {
   display flex
   align-items center

src/main.ts

@@ -13,6 +13,9 @@ import {
   NTabPane,
   NEmpty,
   NButton,
+  NDrawer,
+  NDrawerContent,
+  NCheckbox,
 } from 'naive-ui'
 
 const naive = create({
@@ -27,6 +30,9 @@ const naive = create({
     NTabPane,
     NEmpty,
     NButton,
+    NDrawer,
+    NDrawerContent,
+    NCheckbox,
   ],
 })
 

src/store/index.ts

@@ -3,9 +3,8 @@ import state from './state'
 import mutations from './mutations'
 import actions from './actions'
 
-export interface GlobalStateProps {
-  showLoading: boolean
-}
+export type GlobalStateProps = typeof state
+
 /** ------------------------------------- 分隔线 --------------------------------------- */
 
 /** 去除tuple第一项 */
@@ -25,7 +24,7 @@ export interface Commit {
   <T extends keyof CommitPayload>(
     type: T,
     payload?: CommitPayload[T],
-    options?: CommitOptions
+    options?: CommitOptions,
   ): void
 }
 type ActionsType = typeof actions
@@ -37,10 +36,9 @@ export interface Dispatch {
   <T extends keyof DispatchPayload>(
     type: T,
     payload?: DispatchPayload[T],
-    options?: DispatchOptions
+    options?: DispatchOptions,
   ): Promise<any>
 }
-
 /** 修改Store类型上的commit和dispatch方法类型， 使其在页面中使用store.commit等方法有约束和提示 */
 const store = createStore<GlobalStateProps>({
   state,

src/store/mutations.ts

 import { GlobalStateProps } from './index'
 
 export default {
-  SET_LOADING(state: GlobalStateProps, val: boolean): void {
+  SET_LOADING(state: GlobalStateProps, val: boolean) {
     state.showLoading = val
   },
+  SET_FILTER_MODAL(state: GlobalStateProps, val: boolean) {
+    state.showFilterModal = val
+  },
 }

src/store/state.ts

-import { GlobalStateProps } from './index'
 export default {
   showLoading: false,
-} as GlobalStateProps
+  showFilterModal: true,
+}

src/view/components/basic-info.vue

@@ -217,7 +217,7 @@ const clickTag = (key: string) => {
   position fixed
   top .48rem
   left .05rem
-  width 3.4rem
+  width 3rem
 #basic-info
   width 100%
   background $bg
@@ -300,11 +300,13 @@ const clickTag = (key: string) => {
   box-sizing border-box
   >span
     $flex-align()
+    $text-overflow()
     justify-content center
     width 32%
     background #fff
     border-radius .03rem
     cursor pointer
+    font-size .09rem
     &:hover
     &.on
       background $light-red

src/view/components/nav-bar.vue

@@ -22,7 +22,12 @@
         </template>
       </n-input>
       <div class="align-center">
-        <n-icon class="btn" size=".12rem">
+        <n-icon
+          class="btn"
+          :class="{ on: showFilterModal }"
+          size=".12rem"
+          @click="onClick('filter')"
+        >
           <svg
             width="22"
             height="20"
@@ -184,12 +189,26 @@
 
   <!-- <SearchModal :data="resultData" /> -->
   <SearchModal :visible="showResult" :data="resultData" />
+  <FilterModal />
 </template>
 
 <script lang="ts" setup>
-import { ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import useDebounce from '@/hooks/useDebounce'
 import SearchModal from './search-modal.vue'
+import FilterModal from './filter-modal.vue'
+import store from '@/store'
+
+const showFilterModal = computed(() => store.state.showFilterModal)
+const onClick = (type: string) => {
+  switch (type) {
+    case 'filter':
+      store.commit('SET_FILTER_MODAL', true)
+      break
+    default:
+      break
+  }
+}
 
 const emit = defineEmits(['focus', 'blur'])
 
@@ -315,6 +334,7 @@ watch(
       padding .04rem
       border-radius .02rem
       &:hover
+      &.on
         color $red
         background $light-red
     .icon

src/view/main.vue

@@ -18,7 +18,7 @@
     </n-icon>
   </div>
   <InforModal class="info-modal" />
-  <listModal class="list-modal" />
+  <ListModal class="list-modal" />
 </template>
 
 <script lang="ts" setup>
@@ -26,7 +26,7 @@ import { ref } from 'vue'
 import NavBar from './components/nav-bar.vue'
 import BasicInfo from './components/basic-info.vue'
 import InforModal from './components/info-modal.vue'
-import listModal from './components/list-modal.vue'
+import ListModal from './components/list-modal.vue'
 const showTag = ref(true)
 </script>