aurora-admin/frameworks/Input.vue3.vue

<template>
  <div class="au-field" :class="{ 'has-error': error }">
    <div class="au-input" :class="classes">
      <span v-if="$slots.prefix" class="affix prefix"><slot name="prefix" /></span>

      <input
        ref="input"
        :type="resolvedType"
        :value="modelValue"
        :placeholder="placeholder"
        :disabled="disabled"
        @input="onInput"
        @focus="$emit('focus', $event)"
        @blur="$emit('blur', $event)"
      >

      <button
        v-if="clearable && modelValue && !disabled"
        class="action clear"
        type="button"
        aria-label="清除"
        @click="clear"
      >
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M18 6L6 18M6 6l12 12" />
        </svg>
      </button>

      <button
        v-if="type === 'password'"
        class="action toggle"
        type="button"
        :aria-label="showPassword ? '隐藏密码' : '显示密码'"
        @click="showPassword = !showPassword"
      >
        <svg v-if="!showPassword" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z" />
          <circle cx="12" cy="12" r="3" />
        </svg>
        <svg v-else width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M17.94 17.94A10 10 0 0 1 12 19c-6.5 0-10-7-10-7a18 18 0 0 1 5.06-5.94M9.9 4.24A9 9 0 0 1 12 4c6.5 0 10 7 10 7a18 18 0 0 1-2.16 3.19M1 1l22 22" />
        </svg>
      </button>

      <span v-if="$slots.suffix" class="affix suffix"><slot name="suffix" /></span>
    </div>

    <span v-if="error && errorText" class="error-text">{{ errorText }}</span>
  </div>
</template>

<script setup>
import { computed, ref } from 'vue';

const props = defineProps({
  modelValue: { type: [String, Number], default: '' },
  size: { type: String, default: 'default' },       // large | default | small
  type: { type: String, default: 'text' },          // text | password | number ...
  placeholder: { type: String, default: '' },
  disabled: { type: Boolean, default: false },
  error: { type: Boolean, default: false },
  errorText: { type: String, default: '' },
  clearable: { type: Boolean, default: false }
});

const emit = defineEmits(['update:modelValue', 'focus', 'blur']);

const sizeMap = { large: 'au-input-lg', default: 'au-input-md', small: 'au-input-sm' };
const showPassword = ref(false);
const input = ref(null);

const classes = computed(() => [
  sizeMap[props.size],
  { 'is-error': props.error, 'is-disabled': props.disabled }
]);

const resolvedType = computed(() =>
  props.type === 'password' ? (showPassword.value ? 'text' : 'password') : props.type
);

function onInput(e) {
  emit('update:modelValue', e.target.value);
}

function clear() {
  emit('update:modelValue', '');
  // 清除后重新聚焦
  requestAnimationFrame(() => input.value && input.value.focus());
}
</script>

<!-- 样式对齐 components.css 与 input.json 契约 -->
<style scoped>
.au-field { display: inline-flex; flex-direction: column; gap: 4px; }
.au-input {
  display: inline-flex; align-items: center; gap: 8px; height: 32px;
  padding: 0 12px; background: #fff; border: 1px solid #E8ECF1;
  border-radius: 4px; transition: border-color .15s, box-shadow .15s; box-sizing: border-box;
}
.au-input input {
  border: none; outline: none; background: transparent; font-size: 14px;
  color: #262626; min-width: 160px; flex: 1; font-family: "PingFang SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif;
}
.au-input input::placeholder { color: #767676; }
.au-input:focus-within { border-color: #2F54EB; box-shadow: 0 0 0 2px rgba(47,84,235,0.2); }
.au-input.is-error { border-color: #CF1322; }
.au-input.is-error:focus-within { border-color: #CF1322; box-shadow: 0 0 0 2px rgba(47,84,235,0.2); }
.au-input.is-disabled, .au-input:disabled { background: #F5F5F5; border-color: transparent; }
.au-input.is-disabled input, .au-input:disabled input { color: #BFBFBF; cursor: not-allowed; }
.au-input .affix { display: inline-flex; flex-shrink: 0; color: #6E6E6E; align-items: center; }
.au-input .action {
  display: inline-flex; flex-shrink: 0; padding: 0; border: none; background: none;
  cursor: pointer; color: #6E6E6E; align-items: center;
}
.au-input .action:hover { color: #2F54EB; }
.au-input-lg { height: 40px; }
.au-input-sm { height: 24px; }
.au-input-sm input { font-size: 12px; min-width: 120px; }
.error-text { font-size: 12px; color: #CF1322; line-height: 20px; }
</style>