feat(P4): precompute移植+app.js sources双向回填+回归1003/1003+验收体积/文件/data.json

2026-09-12 14:18:41 +08:00
parent 16f365a045
commit c65a69c34e
401 changed files with 22932 additions and 140 deletions
@@ -0,0 +1,121 @@
+<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="value"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        @input="onInput"
+        @focus="$emit('focus', $event)"
+        @blur="$emit('blur', $event)"
+      >
+
+      <button
+        v-if="clearable && value && !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>
+export default {
+  name: 'AaInput',
+  props: {
+    value: { type: [String, Number], default: '' },
+    size: { type: String, default: 'default', validator: v => ['large', 'default', 'small'].includes(v) },
+    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 }
+  },
+  data() {
+    return { showPassword: false };
+  },
+  computed: {
+    sizeMap() { return { large: 'au-input-lg', default: 'au-input-md', small: 'au-input-sm' }; },
+    classes() {
+      return [
+        this.sizeMap[this.size],
+        { 'is-error': this.error, 'is-disabled': this.disabled }
+      ];
+    },
+    resolvedType() {
+      if (this.type === 'password') return this.showPassword ? 'text' : 'password';
+      return this.type;
+    }
+  },
+  methods: {
+    onInput(e) {
+      this.$emit('input', e.target.value);
+    },
+    clear() {
+      this.$emit('input', '');
+      this.$nextTick(() => this.$refs.input && this.$refs.input.focus());
+    }
+  }
+};
+</script>
+
+<!-- 样式对齐 components.css 与 input.json 契约 -->
+<style>
+.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>