初始化

frontend/src/components/SecureInput.vue

@@ -0,0 +1,442 @@
+<template>
+  <div class="secure-input" :class="{ 'has-error': error }">
+    <label v-if="label" class="secure-input__label" :for="inputId">
+      {{ label }}
+      <span v-if="required" class="secure-input__required">*</span>
+    </label>
+    
+    <div class="secure-input__wrapper">
+      <input
+        :id="inputId"
+        ref="inputRef"
+        v-model="inputValue"
+        :type="showPassword ? 'text' : type"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :readonly="readonly"
+        :maxlength="maxLength"
+        :autocomplete="autocomplete"
+        :class="inputClasses"
+        @input="handleInput"
+        @blur="handleBlur"
+        @focus="handleFocus"
+        @keyup.enter="handleEnter"
+      />
+      
+      <button
+        v-if="type === 'password' && showToggle"
+        type="button"
+        class="secure-input__toggle"
+        @click="togglePasswordVisibility"
+        :aria-label="showPassword ? '隐藏密码' : '显示密码'"
+      >
+        <el-icon v-if="showPassword"><Hide /></el-icon>
+        <el-icon v-else><View /></el-icon>
+      </button>
+      
+      <button
+        v-if="clearable && inputValue && !disabled && !readonly"
+        type="button"
+        class="secure-input__clear"
+        @click="clearInput"
+        aria-label="清除输入"
+      >
+        <el-icon><Close /></el-icon>
+      </button>
+      
+      <div v-if="strengthIndicator && type === 'password'" class="secure-input__strength">
+        <div class="secure-input__strength-bar">
+          <div 
+            class="secure-input__strength-fill" 
+            :class="passwordStrengthClass"
+            :style="{ width: `${passwordStrengthPercentage}%` }"
+          ></div>
+        </div>
+        <span class="secure-input__strength-text">{{ passwordStrengthText }}</span>
+      </div>
+    </div>
+    
+    <div v-if="error" class="secure-input__error">{{ error }}</div>
+    <div v-else-if="hint" class="secure-input__hint">{{ hint }}</div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted, nextTick } from 'vue'
+import { View, Hide, Close } from '@element-plus/icons-vue'
+import { validatePassword, sanitizeInput } from '@/utils/security'
+import { ElMessage } from 'element-plus'
+
+const props = defineProps({
+  modelValue: {
+    type: [String, Number],
+    default: ''
+  },
+  type: {
+    type: String,
+    default: 'text',
+    validator: (value) => ['text', 'password', 'email', 'tel', 'url', 'number'].includes(value)
+  },
+  label: {
+    type: String,
+    default: ''
+  },
+  placeholder: {
+    type: String,
+    default: ''
+  },
+  required: {
+    type: Boolean,
+    default: false
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  readonly: {
+    type: Boolean,
+    default: false
+  },
+  clearable: {
+    type: Boolean,
+    default: false
+  },
+  showToggle: {
+    type: Boolean,
+    default: true
+  },
+  strengthIndicator: {
+    type: Boolean,
+    default: false
+  },
+  maxLength: {
+    type: Number,
+    default: 255
+  },
+  autocomplete: {
+    type: String,
+    default: 'off'
+  },
+  validateOnBlur: {
+    type: Boolean,
+    default: true
+  },
+  sanitize: {
+    type: Boolean,
+    default: true
+  },
+  error: {
+    type: String,
+    default: ''
+  },
+  hint: {
+    type: String,
+    default: ''
+  },
+  size: {
+    type: String,
+    default: 'default',
+    validator: (value) => ['small', 'default', 'large'].includes(value)
+  }
+})
+
+const emit = defineEmits(['update:modelValue', 'input', 'blur', 'focus', 'enter', 'clear', 'strength-change'])
+
+const inputRef = ref(null)
+const inputValue = ref(props.modelValue)
+const showPassword = ref(false)
+const isFocused = ref(false)
+const passwordStrength = ref(0)
+
+// 生成唯一ID
+const inputId = computed(() => `secure-input-${Math.random().toString(36).substring(2, 9)}`)
+
+// 计算输入框样式类
+const inputClasses = computed(() => {
+  return [
+    'secure-input__field',
+    `secure-input__field--${props.size}`,
+    {
+      'secure-input__field--focused': isFocused.value,
+      'secure-input__field--disabled': props.disabled,
+      'secure-input__field--readonly': props.readonly,
+      'secure-input__field--has-error': props.error,
+      'secure-input__field--password': props.type === 'password'
+    }
+  ]
+})
+
+// 计算密码强度类
+const passwordStrengthClass = computed(() => {
+  if (passwordStrength.value <= 2) return 'weak'
+  if (passwordStrength.value <= 3) return 'medium'
+  return 'strong'
+})
+
+// 计算密码强度百分比
+const passwordStrengthPercentage = computed(() => {
+  return Math.min(passwordStrength.value * 20, 100)
+})
+
+// 计算密码强度文本
+const passwordStrengthText = computed(() => {
+  if (passwordStrength.value <= 2) return '弱'
+  if (passwordStrength.value <= 3) return '中等'
+  return '强'
+})
+
+// 监听modelValue变化
+watch(() => props.modelValue, (newVal) => {
+  inputValue.value = newVal
+})
+
+// 监听输入值变化
+watch(inputValue, (newVal) => {
+  // 如果启用了输入清理，则清理输入
+  const processedValue = props.sanitize ? sanitizeInput(newVal) : newVal
+  
+  // 更新密码强度（仅当类型为password时）
+  if (props.type === 'password' && props.strengthIndicator) {
+    updatePasswordStrength(processedValue)
+  }
+  
+  // 触发更新事件
+  emit('update:modelValue', processedValue)
+  emit('input', processedValue)
+})
+
+// 更新密码强度
+const updatePasswordStrength = (password) => {
+  if (!password) {
+    passwordStrength.value = 0
+    return
+  }
+  
+  try {
+    const result = validatePassword(password)
+    passwordStrength.value = result.score
+    emit('strength-change', result)
+  } catch (error) {
+    console.error('密码强度验证失败:', error)
+    passwordStrength.value = 0
+  }
+}
+
+// 处理输入事件
+const handleInput = (event) => {
+  // 输入事件已在watch中处理
+}
+
+// 处理焦点事件
+const handleFocus = (event) => {
+  isFocused.value = true
+  emit('focus', event)
+}
+
+// 处理失焦事件
+const handleBlur = (event) => {
+  isFocused.value = false
+  emit('blur', event)
+}
+
+// 处理回车事件
+const handleEnter = (event) => {
+  emit('enter', event)
+}
+
+// 切换密码可见性
+const togglePasswordVisibility = () => {
+  showPassword.value = !showPassword.value
+}
+
+// 清除输入
+const clearInput = () => {
+  inputValue.value = ''
+  emit('clear')
+  nextTick(() => {
+    inputRef.value?.focus()
+  })
+}
+
+// 聚焦输入框
+const focus = () => {
+  inputRef.value?.focus()
+}
+
+// 失焦输入框
+const blur = () => {
+  inputRef.value?.blur()
+}
+
+// 选择文本
+const select = () => {
+  inputRef.value?.select()
+}
+
+// 暴露方法
+defineExpose({
+  focus,
+  blur,
+  select,
+  inputRef
+})
+
+onMounted(() => {
+  // 初始化密码强度
+  if (props.type === 'password' && props.strengthIndicator && inputValue.value) {
+    updatePasswordStrength(inputValue.value)
+  }
+})
+</script>
+
+<style scoped>
+.secure-input {
+  width: 100%;
+  margin-bottom: 16px;
+}
+
+.secure-input__label {
+  display: block;
+  margin-bottom: 8px;
+  font-weight: 500;
+  color: #333;
+}
+
+.secure-input__required {
+  color: #f56c6c;
+  margin-left: 4px;
+}
+
+.secure-input__wrapper {
+  position: relative;
+  width: 100%;
+}
+
+.secure-input__field {
+  width: 100%;
+  padding: 12px 16px;
+  border: 1px solid #dcdfe6;
+  border-radius: 4px;
+  font-size: 14px;
+  color: #606266;
+  background-color: #fff;
+  transition: border-color 0.2s;
+  outline: none;
+  box-sizing: border-box;
+}
+
+.secure-input__field:focus {
+  border-color: #409eff;
+}
+
+.secure-input__field--small {
+  padding: 8px 12px;
+  font-size: 12px;
+}
+
+.secure-input__field--large {
+  padding: 16px 20px;
+  font-size: 16px;
+}
+
+.secure-input__field--disabled {
+  background-color: #f5f7fa;
+  color: #c0c4cc;
+  cursor: not-allowed;
+}
+
+.secure-input__field--readonly {
+  background-color: #f5f7fa;
+  color: #606266;
+  cursor: default;
+}
+
+.secure-input__field--has-error {
+  border-color: #f56c6c;
+}
+
+.secure-input__field--password {
+  padding-right: 80px;
+}
+
+.secure-input__toggle,
+.secure-input__clear {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: #909399;
+  font-size: 16px;
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: color 0.2s;
+}
+
+.secure-input__toggle:hover,
+.secure-input__clear:hover {
+  color: #409eff;
+}
+
+.secure-input__toggle {
+  right: 12px;
+}
+
+.secure-input__clear {
+  right: 40px;
+}
+
+.secure-input__strength {
+  margin-top: 8px;
+}
+
+.secure-input__strength-bar {
+  height: 4px;
+  background-color: #e4e7ed;
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.secure-input__strength-fill {
+  height: 100%;
+  transition: width 0.3s, background-color 0.3s;
+}
+
+.secure-input__strength-fill.weak {
+  background-color: #f56c6c;
+}
+
+.secure-input__strength-fill.medium {
+  background-color: #e6a23c;
+}
+
+.secure-input__strength-fill.strong {
+  background-color: #67c23a;
+}
+
+.secure-input__strength-text {
+  font-size: 12px;
+  color: #909399;
+  margin-top: 4px;
+  display: block;
+}
+
+.secure-input__error {
+  color: #f56c6c;
+  font-size: 12px;
+  margin-top: 4px;
+}
+
+.secure-input__hint {
+  color: #909399;
+  font-size: 12px;
+  margin-top: 4px;
+}
+
+.secure-input.has-error .secure-input__field {
+  border-color: #f56c6c;
+}
+</style>