v2.0.0

2022-10-29 11:36:35 +08:00
parent 66b965d9f7
commit e45cee6596
715 changed files with 57096 additions and 31771 deletions
@@ -1,50 +1,57 @@
 <template>
-<div :class="$style.container">
-  <div :class="[$style.search, {[$style.active]: focus}, {[$style.big]: big}, {[$style.small]: small}]">
-    <div :class="$style.form">
-      <input :placeholder="placeholder"
-        v-model.trim="text"
-        ref="dom_input"
-        @focus="handleFocus"
-        @blur="handleBlur"
-        @input="$emit('update:modelValue', text)"
-        @change="sendEvent('change')"
-        @keyup.enter="handleSearch"
-        @keyup.arrow-down.prevent="handleKeyDown"
-        @keyup.arrow-up.prevent="handleKeyUp"
-        @contextmenu="handleContextMenu" />
-      <transition enter-active-class="animated zoomIn" leave-active-class="animated zoomOut">
-        <button type="button" @click="handleClearList" v-show="text">
-          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="100%" viewBox="0 0 24 24" space="preserve">
-            <use xlink:href="#icon-window-close"></use>
-          </svg>
+  <div :class="$style.container">
+    <div :class="[$style.search, {[$style.active]: focus}, {[$style.big]: big}, {[$style.small]: small}]">
+      <div :class="$style.form">
+        <input
+          ref="dom_input"
+          v-model.trim="text"
+          :placeholder="placeholder"
+          @focus="handleFocus"
+          @blur="handleBlur"
+          @input="$emit('update:modelValue', text)"
+          @change="sendEvent('change')"
+          @keyup.enter="handleSearch"
+          @keyup.arrow-down.prevent="handleKeyDown"
+          @keyup.arrow-up.prevent="handleKeyUp"
+          @contextmenu="handleContextMenu"
+        >
+        <transition enter-active-class="animated zoomIn" leave-active-class="animated zoomOut">
+          <button v-show="text" type="button" @click="handleClearList">
+            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="100%" viewBox="0 0 24 24" space="preserve">
+              <use xlink:href="#icon-window-close" />
+            </svg>
+          </button>
+        </transition>
+        <button type="button" @click="handleSearch">
+          <slot>
+            <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="100%" viewBox="0 0 30.239 30.239" space="preserve">
+              <use xlink:href="#icon-search" />
+            </svg>
+          </slot>
        </button>
-      </transition>
-      <button type="button" @click="handleSearch">
-        <slot>
-          <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" height="100%" viewBox="0 0 30.239 30.239" space="preserve">
-            <use xlink:href="#icon-search"></use>
-          </svg>
-        </slot>
-      </button>
-    </div>
-    <div v-if="list" :class="$style.list" :style="listStyle">
-      <ul ref="dom_list">
-        <li v-for="(item, index) in list"
-          :key="item"
-          :class="{[$style.select]: selectIndex === index }"
-          @mouseenter="selectIndex = index"
-          @click="handleTemplistClick(index)"
-        ><span>{{item}}</span></li>
-      </ul>
+      </div>
+      <div v-if="list" :class="$style.list" :style="listStyle">
+        <ul ref="dom_list">
+          <li
+            v-for="(item, index) in list"
+            :key="item"
+            :class="{[$style.select]: selectIndex === index }"
+            @mouseenter="selectIndex = index"
+            @click="handleTemplistClick(index)"
+          >
+            <span>{{ item }}</span>
+          </li>
+        </ul>
+      </div>
    </div>
  </div>
-</div>
 </template>

 <script>
-import { clipboardReadText } from '@renderer/utils'
-import { common as eventCommonNames } from '@common/hotKey'
+import { clipboardReadText } from '@common/utils/electron'
+import { HOTKEY_COMMON } from '@common/hotKey'
+import { appSetting } from '@renderer/store/setting'
+
 export default {
  props: {
    placeholder: {
@@ -53,6 +60,9 @@ export default {
    },
    list: {
      type: Array,
+      default() {
+        return []
+      },
    },
    visibleList: {
      type: Boolean,
@@ -99,7 +109,7 @@ export default {
    },
  },
  mounted() {
-    if (this.$store.getters.setting.search.isFocusSearchBox) this.handleFocusInput()
+    if (appSetting['search.isFocusSearchBox']) this.handleFocusInput()
    this.handleRegisterEvent('on')
  },
  beforeUnmount() {
@@ -107,9 +117,9 @@ export default {
  },
  methods: {
    handleRegisterEvent(action) {
-      let eventHub = window.eventHub
+      let eventHub = window.key_event
      let name = action == 'on' ? 'on' : 'off'
-      eventHub[name](eventCommonNames.focusSearchInput.action, this.handleFocusInput)
+      eventHub[name](HOTKEY_COMMON.focusSearchInput.action, this.handleFocusInput)
    },
    handleFocusInput() {
      this.$refs.dom_input.focus()
@@ -162,7 +172,7 @@ export default {
      str = str.replace(/\t|\r\n|\n|\r/g, ' ')
      str = str.replace(/\s+/g, ' ')
      let dom_input = this.$refs.dom_input
-      this.text = `${this.text.substring(0, dom_input.selectionStart)}${str}${this.text.substring(dom_input.selectionEnd, this.text.length)}`
+      this.text = this.text.substring(0, dom_input.selectionStart) + str + this.text.substring(dom_input.selectionEnd, this.text.length)
      this.$emit('update:modelValue', this.text)
    },
    handleClearList() {
@@ -189,10 +199,10 @@ export default {
  position: absolute;
  width: 100%;
  border-radius: @form-radius;
-  transition: box-shadow .4s ease, background-color @transition-theme;
+  transition: box-shadow .4s ease, background-color @transition-normal;
  display: flex;
  flex-flow: column nowrap;
-  background-color: @color-search-form-background;
+  background-color: var(--color-primary-light-600-alpha-100);

  &.active {
    box-shadow: 0 1px 5px 0 rgba(0,0,0,.2);
@@ -216,8 +226,8 @@ export default {
      border-top-left-radius: 3px;
      border-bottom-left-radius: 3px;
      background-color: transparent;
-      // border-bottom: 2px solid @color-theme;
-      // border-color: @color-theme;
+      // border-bottom: 2px solid var(--color-primary);
+      // border-color: var(--color-primary);
      border: none;

      outline: none;
@@ -227,7 +237,7 @@ export default {
      font-size: 13.5px;
      line-height: @height-toolbar * 0.52 + 5px;
      &::placeholder {
-        color: @color-btn;
+        color: var(--color-button-font);
      }
    }
    button {
@@ -239,7 +249,7 @@ export default {
      cursor: pointer;
      height: 100%;
      padding: 6px 7px;
-      color: @color-btn;
+      color: var(--color-button-font);
      transition: background-color .2s ease;

      &:last-child {
@@ -248,10 +258,10 @@ export default {
      }

      &:hover {
-        background-color: @color-theme-hover;
+        background-color: var(--color-button-background-hover);
      }
      &:active {
-        background-color: @color-theme-active;
+        background-color: var(--color-button-background-active);
      }
    }
  }
@@ -272,7 +282,7 @@ export default {
      }

      &.select {
-        background-color: @color-search-list-hover;
+        background-color: var(--color-primary-dark-100-alpha-700);
      }
      &:last-child {
        border-bottom-left-radius: 3px;
@@ -295,41 +305,5 @@ export default {
  }
 }

-each(@themes, {
-  :global(#root.@{value}) {
-
-    .search {
-      background-color: ~'@{color-@{value}-search-form-background}';
-      &.active {
-        box-shadow: 0 1px 5px 0 rgba(0,0,0,.2);
-      }
-
-      .form {
-        input {
-          &::placeholder {
-            color: ~'@{color-@{value}-btn}';
-          }
-        }
-        button {
-          color: ~'@{color-@{value}-btn}';
-
-          &:hover {
-            background-color: ~'@{color-@{value}-theme-hover}';
-          }
-          &:active {
-            background-color: ~'@{color-@{value}-theme-active}';
-          }
-        }
-      }
-      .list {
-        li {
-          &.select {
-            background-color: ~'@{color-@{value}-search-list-hover}';
-          }
-        }
-      }
-    }
-  }
-})

 </style>