save

components.d.ts

@@ -96,7 +96,6 @@ declare module 'vue' {
     IconSimpleIconsWechat: typeof import('~icons/simple-icons/wechat')['default']
     IconSimpleIconsXiaohongshu: typeof import('~icons/simple-icons/xiaohongshu')['default']
     IconSystemUiconsImport: typeof import('~icons/system-uicons/import')['default']
-    Input: typeof import('./src/components/Input.vue')['default']
     InputNumber: typeof import('./src/components/base/InputNumber.vue')['default']
     List: typeof import('./src/components/list/List.vue')['default']
     Logo: typeof import('./src/components/Logo.vue')['default']

js_node/dict.cjs

@@ -3277,12 +3277,6 @@ async function start() {
       // console.log(JSON.stringify(v, null, 2));
       let res = await fetch('http://localhost/v1/words/addDict', {
         method: 'POST',
-
-
-
-
-
-
         headers: {'Content-Type': 'application/json'},
         body: JSON.stringify({
           ...v,

src/assets/css/style.scss

@@ -214,34 +214,6 @@ a {
   text-decoration: none;
 }
 
-.base-textarea {
-  flex: 1;
-  font-family: var(--font-family);
-  font-size: 1.1rem;
-  outline: none;
-  border: 1px solid transparent;
-  border-radius: .4rem;
-  padding: .5rem .6rem;
-  transition: all .3s;
-  min-height: 1.2rem;
-  width: 100%;
-  box-sizing: border-box;
-  background: var(--color-textarea-bg);
-
-  &:focus {
-    border: 1px solid var(--color-select-bg);
-  }
-
-  &[readonly] {
-    cursor: not-allowed;
-    opacity: .7;
-  }
-}
-
-.base-input {
-  @extend .base-textarea;
-  flex: none;
-}
 
 @supports selector(::-webkit-scrollbar) {
   ::-webkit-scrollbar {
@@ -348,7 +320,7 @@ a {
     gap: .5rem;
     color: var(--color-main-text);
 
-    span{
+    span {
       flex-shrink: 0;
     }
 
@@ -469,7 +441,7 @@ a {
   }
 }
 
-#typing-listener{
+#typing-listener {
   position: fixed;
   right: 0;
   bottom: 0;

src/components/BaseTable.vue

@@ -6,7 +6,6 @@ import MiniDialog from "@/components/dialog/MiniDialog.vue";
 import BaseIcon from "@/components/BaseIcon.vue";
 import BaseButton from "@/components/BaseButton.vue";
 import {cloneDeep, debounce, reverse, shuffle} from "@/utils";
-import Input from "@/components/Input.vue";
 import PopConfirm from "@/components/PopConfirm.vue";
 import Empty from "@/components/Empty.vue";
 import Pagination from '@/components/base/Pagination.vue'
@@ -14,6 +13,7 @@ import Toast from '@/components/base/toast/Toast.ts'
 import Checkbox from "@/components/base/checkbox/Checkbox.vue";
 import DeleteIcon from "@/components/icon/DeleteIcon.vue";
 import Dialog from "@/components/dialog/Dialog.vue";
+import BaseInput from "@/components/base/BaseInput.vue";
 
 let list = defineModel('list')
 
@@ -146,11 +146,17 @@ defineRender(
                   {
                     showSearchInput ? (
                         <div class="flex gap-4">
-                          <Input
-                              prefixIcon
+                          <BaseInput
+                              clearable
                               modelValue={searchKey}
                               onUpdate:modelValue={debounce(e => searchKey = e)}
-                              class="flex-1"/>
+                              class="flex-1">
+                            {{
+                              subfix: () => <IconFluentSearch24Regular
+                                  class="text-lg text-gray"
+                              />
+                            }}
+                          </BaseInput>
                           <BaseButton onClick={() => (showSearchInput = false, searchKey = '')}>取消</BaseButton>
                         </div>
                     ) : (

src/components/Input.vue

@@ -1,97 +0,0 @@
-<script setup lang="ts">
-
-import Close from "@/components/icon/Close.vue";
-import {useDisableEventListener, useWindowClick} from "@/hooks/event.ts";
-
-defineProps<{
-  modelValue: string
-  placeholder?: string
-  autofocus?: boolean
-  prefixIcon?: boolean
-}>()
-
-defineEmits(['update:modelValue'])
-let focus = $ref(false)
-let inputEl = $ref<HTMLDivElement>()
-
-useWindowClick((e: PointerEvent) => {
-  if (!e) return
-  focus = inputEl.contains(e.target as any);
-})
-
-useDisableEventListener(() => focus)
-
-const vFocus = {
-  mounted: (el, bind) => {
-    if (bind.value) {
-      el.focus()
-      setTimeout(() => focus = true)
-    }
-  }
-}
-</script>
-
-<template>
-  <div class="base-input"
-       :class="{focus}"
-       ref="inputEl"
-  >
-    <IconFluentSearch24Regular
-          v-if="prefixIcon"
-          width="20"/>
-    <input type="text"
-           :value="modelValue"
-           v-focus="autofocus"
-           :placeholder="placeholder"
-           @input="e=>$emit('update:modelValue',e.target.value)"
-    >
-    <transition name="fade">
-      <Close v-if="modelValue" @click="$emit('update:modelValue','')"/>
-    </transition>
-  </div>
-</template>
-
-<style scoped lang="scss">
-
-
-.base-input {
-  border: 1px solid var(--color-input-border);
-  border-radius: .4rem;
-  overflow: hidden;
-  padding: .2rem .3rem;
-  transition: all .3s;
-  display: flex;
-  align-items: center;
-  background: var(--color-input-bg);
-
-  :deep(svg) {
-    transition: all .3s;
-    color: var(--color-input-icon);
-  }
-
-  &.focus {
-    border: 1px solid var(--color-select-bg);
-
-    :deep(svg) {
-      color: gray;
-    }
-  }
-
-  input {
-    font-family: var(--font-family);
-    font-size: 1.1rem;
-    outline: none;
-    min-height: 1.2rem;
-    flex: 1;
-    box-sizing: border-box;
-    outline: none;
-    border: none;
-    background: transparent;
-
-    &[readonly] {
-      cursor: not-allowed;
-      opacity: .7;
-    }
-  }
-}
-</style>

src/components/base/BaseInput.vue

@@ -1,10 +1,13 @@
 <script setup lang="ts">
-import {ref, useAttrs, watch} from 'vue';
+import { ref, useAttrs, watch } from 'vue';
+import Close from "@/components/icon/Close.vue";
+import { useDisableEventListener } from "@/hooks/event.ts";
 
 const props = defineProps({
   modelValue: [String, Number],
   placeholder: String,
   disabled: Boolean,
+  autofocus: Boolean,
   type: {
     type: String,
     default: 'text',
@@ -25,6 +28,8 @@ const attrs = useAttrs();
 
 const inputValue = ref(props.modelValue);
 const errorMsg = ref('');
+let focus = $ref(false)
+let inputEl = $ref<HTMLDivElement>()
 
 watch(() => props.modelValue, (val) => {
   inputValue.value = val;
@@ -57,24 +62,42 @@ const onChange = (e: Event) => {
 };
 
 const onFocus = (e: FocusEvent) => {
+  focus = true
   emit('focus', e);
 };
 
 const onBlur = (e: FocusEvent) => {
+  focus = false
   validate(inputValue.value);
   emit('blur', e);
 };
 
 const clearInput = () => {
+
   inputValue.value = '';
   validate('');
   emit('update:modelValue', '');
 };
 
+//当聚焦时，禁用输入监听
+useDisableEventListener(() => focus)
+
+const vFocus = {
+  mounted: (el, bind) => {
+    if (bind.value) {
+      el.focus()
+      setTimeout(() => focus = true)
+    }
+  }
+}
+
 </script>
 
 <template>
-  <div class="custom-input" :class="{ 'is-disabled': disabled, 'has-error': errorMsg }">
+  <div class="base-input2"
+       ref="inputEl"
+       :class="{ 'is-disabled': disabled, 'has-error': errorMsg,focus }">
+    <slot name="subfix"></slot>
     <input
         v-bind="attrs"
         :type="type"
@@ -85,88 +108,71 @@ const clearInput = () => {
         @change="onChange"
         @focus="onFocus"
         @blur="onBlur"
-        class="custom-input__inner"
+        class="inner"
+        v-focus="autofocus"
         :maxlength="maxLength"
     />
-    <button
+    <slot name="prefix"></slot>
+    <Close
         v-if="clearable && inputValue && !disabled"
-        type="button"
-        class="custom-input__clear"
-        @click="clearInput"
-        aria-label="Clear input"
-    >×
-    </button>
-
-    <div v-if="errorMsg" class="custom-input__error">{{ errorMsg }}</div>
+        @click="clearInput"/>
+    <div v-if="errorMsg" class="base-input2__error">{{ errorMsg }}</div>
   </div>
 </template>
 
 <style scoped lang="scss">
-.custom-input {
+.base-input2 {
   position: relative;
-  display: inline-block;
+  display: inline-flex;
+  box-sizing: border-box;
   width: 100%;
+  background: var(--color-input-bg);
+  border: 1px solid var(--color-input-border);
+  border-radius: 4px;
+  overflow: hidden;
+  padding: .2rem .3rem;
+  transition: all .3s;
+  align-items: center;
+  background: var(--color-input-bg);
 
   &.is-disabled {
     opacity: 0.6;
   }
 
   &.has-error {
-    .custom-input__inner {
+    .base-input2__inner {
       border-color: #f56c6c;
     }
 
-    .custom-input__error {
+    .base-input2__error {
       color: #f56c6c;
       font-size: 0.85rem;
       margin-top: 0.25rem;
     }
   }
 
-  &__inner {
-    width: 100%;
-    padding: 0.4rem 1.5rem 0.4rem 0.5rem;
-    border: 1px solid #ccc;
-    border-radius: 4px;
-    font-size: 1rem;
-    box-sizing: border-box;
-    transition: all .3s;
-    color: var(--color-input-color);
-    background: var(--color-input-bg);
-
-    &:focus {
-      outline: none;
-      border-color: #409eff;
-      box-shadow: 0 0 3px #409eff;
-    }
-
-    &:disabled {
-      background-color: #f5f5f5;
-      cursor: not-allowed;
-    }
+  &.focus {
+    border: 1px solid var(--color-select-bg);
   }
 
-  &__clear {
-    position: absolute;
-    right: 0.4rem;
-    top: 50%;
-    transform: translateY(-50%);
-    border: none;
-    background: transparent;
-    font-size: 1.2rem;
-    line-height: 1;
-    cursor: pointer;
-    color: #999;
-    padding: 0;
-    user-select: none;
-
-    &:hover {
-      color: #666;
-    }
+  &:disabled {
+    background-color: #f5f5f5;
+    cursor: not-allowed;
   }
 
   &__error {
     padding-left: 0.5rem;
   }
+
+  .inner {
+    flex: 1;
+    font-size: 1rem;
+    outline: none;
+    border: none;
+    box-sizing: border-box;
+    transition: all .3s;
+    height: 1.5rem;
+    color: var(--color-input-color);
+  }
 }
 </style>

src/components/base/Textarea.vue

@@ -104,8 +104,7 @@ textarea {
 
   &:focus {
     outline: none;
-    border-color: #409eff;
-    box-shadow: 0 0 3px #409eff;
+    border: 1px solid var(--color-select-bg);
   }
 }
 </style>

src/components/list/ArticleList.vue

@@ -1,10 +1,8 @@
 <script setup lang="ts">
 
-import Input from "@/components/Input.vue";
-import {Article} from "@/types/types.ts";
+import { Article } from "@/types/types.ts";
 import BaseList from "@/components/list/BaseList.vue";
-import * as sea from "node:sea";
-import {watch, watchEffect} from "vue";
+import BaseInput from "@/components/base/BaseInput.vue";
 
 const props = withDefaults(defineProps<{
   list: Article[],
@@ -34,7 +32,9 @@ let localList = $computed(() => {
       let d = Number(t)
       //如果是纯数字，把那一条加进去
       if (!isNaN(d)) {
-        res.push(props.list[d])
+        if (d - 1 < props.list.length) {
+          res.push(props.list[d - 1])
+        }
       }
     } catch (err) {
     }
@@ -69,7 +69,14 @@ defineExpose({scrollToBottom, scrollToItem})
 <template>
   <div class="list">
     <div class="search">
-      <Input prefix-icon v-model="searchKey"/>
+      <BaseInput
+          clearable
+          v-model="searchKey"
+      >
+        <template #subfix>
+          <IconFluentSearch24Regular class="text-lg text-gray"/>
+        </template>
+      </BaseInput>
     </div>
     <BaseList
         ref="listRef"

src/components/list/List.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts" generic="T extends {id:string}">
 
 import BaseIcon from "@/components/BaseIcon.vue";
-import Input from "@/components/Input.vue";
-import {cloneDeep, throttle} from "@/utils";
-import {Article} from "@/types/types.ts";
+import { cloneDeep, throttle } from "@/utils";
+import { Article } from "@/types/types.ts";
 import DeleteIcon from "@/components/icon/DeleteIcon.vue";
+import BaseInput from "@/components/base/BaseInput.vue";
 
 interface IProps {
   list: T[]
@@ -102,7 +102,14 @@ defineExpose({scrollBottom})
        ref="el"
   >
     <div class="search">
-      <Input prefix-icon v-model="searchKey"/>
+      <BaseInput
+          clearable
+          v-model="searchKey"
+      >
+        <template #subfix>
+          <IconFluentSearch24Regular class="text-lg text-gray"/>
+        </template>
+      </BaseInput>
     </div>
     <transition-group name="drag" class="list" tag="div">
       <div class="item"

src/pages/article/BookList.vue

@@ -1,18 +1,18 @@
 <script setup lang="ts">
-import {useNav} from "@/utils";
+import { useNav } from "@/utils";
 import BasePage from "@/components/BasePage.vue";
-import {DictResource} from "@/types/types.ts";
-import {useRuntimeStore} from "@/stores/runtime.ts";
+import { DictResource } from "@/types/types.ts";
+import { useRuntimeStore } from "@/stores/runtime.ts";
 import BaseIcon from "@/components/BaseIcon.vue";
 import Empty from "@/components/Empty.vue";
-import Input from "@/components/Input.vue";
 import BaseButton from "@/components/BaseButton.vue";
 import DictList from "@/components/list/DictList.vue";
 import BackIcon from "@/components/BackIcon.vue";
-import {useRouter} from "vue-router";
+import { useRouter } from "vue-router";
 import book_list from "@/assets/book-list.json";
-import {computed} from "vue";
-import {getDefaultDict} from "@/types/func.ts";
+import { computed } from "vue";
+import { getDefaultDict } from "@/types/func.ts";
+import BaseInput from "@/components/base/BaseInput.vue";
 
 const {nav} = useNav()
 const runtimeStore = useRuntimeStore()
@@ -53,7 +53,7 @@ const searchList = computed<any[]>(() => {
       <div class="flex items-center relative gap-2">
         <BackIcon class="z-2" @Click='router.back'/>
         <div class="flex flex-1 gap-4" v-if="showSearchInput">
-          <Input prefix-icon placeholder="请输入书籍名称/缩写/类别" v-model="searchKey" class="flex-1" autofocus/>
+          <BaseInput prefix-icon placeholder="请输入书籍名称/缩写/类别" v-model="searchKey" class="flex-1" autofocus clearable/>
           <BaseButton @click="showSearchInput = false, searchKey = ''">取消</BaseButton>
         </div>
         <div class="py-1 flex flex-1 justify-end" v-else>

src/pages/word/DictDetail.vue

@@ -1,11 +1,11 @@
 <script setup lang="tsx">
-import {DictId} from "@/types/types.ts";
+import { DictId } from "@/types/types.ts";
 
 import BasePage from "@/components/BasePage.vue";
-import {computed, onMounted, reactive, ref, shallowReactive} from "vue";
-import {useRuntimeStore} from "@/stores/runtime.ts";
-import {_getDictDataByUrl, _nextTick, convertToWord, loadJsLib, useNav} from "@/utils";
-import {nanoid} from "nanoid";
+import { computed, onMounted, reactive, ref, shallowReactive } from "vue";
+import { useRuntimeStore } from "@/stores/runtime.ts";
+import { _getDictDataByUrl, _nextTick, convertToWord, loadJsLib, useNav } from "@/utils";
+import { nanoid } from "nanoid";
 import BaseIcon from "@/components/BaseIcon.vue";
 import BaseTable from "@/components/BaseTable.vue";
 import WordItem from "@/components/WordItem.vue";
@@ -13,20 +13,20 @@ import Toast from '@/components/base/toast/Toast.ts'
 import PopConfirm from "@/components/PopConfirm.vue";
 import BackIcon from "@/components/BackIcon.vue";
 import BaseButton from "@/components/BaseButton.vue";
-import {useRoute, useRouter} from "vue-router";
-import {useBaseStore} from "@/stores/base.ts";
+import { useRoute, useRouter } from "vue-router";
+import { useBaseStore } from "@/stores/base.ts";
 import EditBook from "@/pages/article/components/EditBook.vue";
-import {getDefaultDict} from "@/types/func.ts";
+import { getDefaultDict } from "@/types/func.ts";
 import BaseInput from "@/components/base/BaseInput.vue";
 import Textarea from "@/components/base/Textarea.vue";
 import FormItem from "@/components/base/form/FormItem.vue";
 import Form from "@/components/base/form/Form.vue";
 import DeleteIcon from "@/components/icon/DeleteIcon.vue";
-import {getCurrentStudyWord} from "@/hooks/dict.ts";
+import { getCurrentStudyWord } from "@/hooks/dict.ts";
 import PracticeSettingDialog from "@/pages/word/components/PracticeSettingDialog.vue";
-import {useSettingStore} from "@/stores/setting.ts";
-import {MessageBox} from "@/utils/MessageBox.tsx";
-import {Origin} from "@/config/ENV.ts";
+import { useSettingStore } from "@/stores/setting.ts";
+import { MessageBox } from "@/utils/MessageBox.tsx";
+import { Origin } from "@/config/ENV.ts";
 
 const runtimeStore = useRuntimeStore()
 const base = useBaseStore()
@@ -360,6 +360,10 @@ async function exportData() {
   exportLoading = false
 }
 
+function searchWord() {
+  console.log('wordForm.word',wordForm.word)
+}
+
 defineRender(() => {
   return (
       <BasePage>
@@ -441,7 +445,9 @@ defineRender(() => {
                               <BaseInput
                                   modelValue={wordForm.word}
                                   onUpdate:modelValue={e => wordForm.word = e}
-                              />
+                              >
+
+                              </BaseInput>
                             </FormItem>
                             <FormItem label="英音音标">
                               <BaseInput

src/pages/word/DictList.vue

@@ -1,20 +1,20 @@
 <script setup lang="ts">
-import {groupBy, useNav} from "@/utils";
+import { groupBy, useNav } from "@/utils";
 import BasePage from "@/components/BasePage.vue";
-import {DictResource} from "@/types/types.ts";
-import {useRuntimeStore} from "@/stores/runtime.ts";
+import { DictResource } from "@/types/types.ts";
+import { useRuntimeStore } from "@/stores/runtime.ts";
 import BaseIcon from "@/components/BaseIcon.vue";
 import Empty from "@/components/Empty.vue";
-import Input from "@/components/Input.vue";
 import BaseButton from "@/components/BaseButton.vue";
 import DictList from "@/components/list/DictList.vue";
 import BackIcon from "@/components/BackIcon.vue";
 import DictGroup from "@/components/list/DictGroup.vue";
-import {useBaseStore} from "@/stores/base.ts";
-import {useRouter} from "vue-router";
-import {computed} from "vue";
-import {getDefaultDict} from "@/types/func.ts";
+import { useBaseStore } from "@/stores/base.ts";
+import { useRouter } from "vue-router";
+import { computed } from "vue";
+import { getDefaultDict } from "@/types/func.ts";
 import dict_list from "@/assets/dict-list.json";
+import BaseInput from "@/components/base/BaseInput.vue";
 
 const {nav} = useNav()
 const runtimeStore = useRuntimeStore()
@@ -80,7 +80,7 @@ const searchList = computed<any[]>(() => {
       <div class="flex items-center relative gap-2">
         <BackIcon class="z-2" @click='router.back'/>
         <div class="flex flex-1 gap-4" v-if="showSearchInput">
-          <Input prefix-icon placeholder="请输入词典名称/缩写/类别" v-model="searchKey" class="flex-1" autofocus/>
+          <BaseInput clearable placeholder="请输入词典名称/缩写/类别" v-model="searchKey" class="flex-1" autofocus/>
           <BaseButton @click="showSearchInput = false, searchKey = ''">取消</BaseButton>
         </div>
         <div class="py-1 flex flex-1 justify-end" v-else>