refactor: 按功能分类重组 components 目录结构

src/components/base/BaseInput.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="input-wrapper" :class="{ 'input-wrapper-error': error }">
+    <label v-if="label" class="input-label">
+      {{ label }}
+      <span v-if="required" class="input-required">*</span>
+    </label>
+    <input
+      :id="id"
+      ref="inputRef"
+      :type="type"
+      :class="['input', { 'input-error': error }]"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :value="modelValue"
+      @input="onInput"
+      @focus="onFocus"
+      @blur="onBlur"
+    />
+    <div v-if="error" class="input-error-text">{{ error }}</div>
+    <div v-else-if="hint" class="input-hint">{{ hint }}</div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+  id: { type: String, default: () => `input-${Math.random().toString(36).slice(2, 8)}` },
+  type: { type: String, default: 'text' },
+  modelValue: { type: [String, Number], default: '' },
+  label: { type: String, default: '' },
+  placeholder: { type: String, default: '' },
+  disabled: { type: Boolean, default: false },
+  required: { type: Boolean, default: false },
+  error: { type: String, default: '' },
+  hint: { type: String, default: '' }
+})
+
+const emit = defineEmits(['update:modelValue', 'focus', 'blur'])
+
+const inputRef = ref(null)
+
+const onInput = (e) => {
+  emit('update:modelValue', e.target.value)
+}
+
+const onFocus = (e) => {
+  emit('focus', e)
+}
+
+const onBlur = (e) => {
+  emit('blur', e)
+}
+
+// 暴露 focus 方法
+defineExpose({
+  focus: () => inputRef.value?.focus()
+})
+</script>
+
+<style scoped>
+.input-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.input-label {
+  font-size: var(--text-sm);
+  font-weight: var(--font-medium);
+  color: var(--text-secondary);
+}
+
+.input-required {
+  color: var(--accent-danger);
+  margin-left: 2px;
+}
+
+.input-error {
+  border-color: var(--accent-danger) !important;
+}
+
+.input-error:focus {
+  box-shadow: 0 0 0 3px var(--danger-bg) !important;
+}
+
+.input-error-text {
+  font-size: var(--text-xs);
+  color: var(--accent-danger);
+}
+
+.input-hint {
+  font-size: var(--text-xs);
+  color: var(--text-muted);
+}
+</style>