save

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"