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,139 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Aurora Admin · Input (H5)</title>
+<link rel="stylesheet" href="../.design_library/aurora-admin/colors_and_type.css">
+<style>
+  /* 对齐 components.css 与 input.json 契约 */
+  .field { display: inline-flex; flex-direction: column; gap: 4px; flex-shrink: 0; }
+  .au-input {
+    display: inline-flex; align-items: center; gap: 8px; height: 32px;
+    padding: 0 12px; background: var(--au-color-card-bg); border: 1px solid var(--au-color-border);
+    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: var(--au-color-text-body); min-width: 160px; flex: 1; font-family: var(--font-family);
+  }
+  .au-input input::placeholder { color: var(--au-color-text-placeholder); }
+  .au-input:focus-within { border-color: var(--au-color-brand); box-shadow: 0 0 0 2px rgba(47,84,235,0.2); }
+  .au-input.is-error { border-color: var(--au-color-error); }
+  .au-input.is-error:focus-within { border-color: var(--au-color-error); box-shadow: 0 0 0 2px rgba(47,84,235,0.2); }
+  .au-input.is-disabled, .au-input:disabled { background: var(--au-color-disabled-bg); border-color: transparent; }
+  .au-input.is-disabled input, .au-input:disabled input { color: var(--au-color-text-disabled); cursor: not-allowed; }
+  .au-input .affix { display: inline-flex; flex-shrink: 0; color: var(--au-color-text-secondary); align-items: center; }
+  .au-input .action {
+    display: inline-flex; flex-shrink: 0; padding: 0; border: none; background: none;
+    cursor: pointer; color: var(--au-color-text-secondary); align-items: center;
+  }
+  .au-input .action:hover { color: var(--au-color-brand); }
+  .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: var(--au-color-error); line-height: 20px; }
+
+  /* 演示页布局 */
+  body { margin: 0; padding: 24px; background: var(--au-color-page-bg); color: var(--au-color-text-body); font-family: var(--font-family); }
+  h1 { font-size: 20px; margin: 0 0 4px; }
+  .sub { color: var(--au-color-text-secondary); margin: 0 0 24px; font-size: 12px; }
+  .group { margin-bottom: 24px; }
+  .group h2 { font-size: 16px; margin: 0 0 12px; color: var(--au-color-text-title); }
+  .row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
+</style>
+</head>
+<body>
+  <h1>Aurora Admin · Input 组件（纯 H5）</h1>
+  <p class="sub">对齐 input.json 契约：3 尺寸、聚焦/错误/禁用态，前后缀 / 清除 / 密码切换</p>
+
+  <div class="group">
+    <h2>1. 默认输入框</h2>
+    <div class="row">
+      <div class="field"><div class="au-input"><input placeholder="请输入客户名称"></div></div>
+    </div>
+  </div>
+
+  <div class="group">
+    <h2>2. 三种尺寸</h2>
+    <div class="row">
+      <div class="field"><div class="au-input au-input-lg"><input placeholder="大尺寸"></div></div>
+      <div class="field"><div class="au-input au-input-md"><input placeholder="默认尺寸"></div></div>
+      <div class="field"><div class="au-input au-input-sm"><input placeholder="小尺寸"></div></div>
+    </div>
+  </div>
+
+  <div class="group">
+    <h2>3. 错误态（含错误提示）</h2>
+    <div class="row">
+      <div class="field">
+        <div class="au-input is-error"><input value="abc"></div>
+        <span class="error-text">联系电话格式不正确，请检查后重试</span>
+      </div>
+    </div>
+  </div>
+
+  <div class="group">
+    <h2>4. 前后缀</h2>
+    <div class="row">
+      <div class="field">
+        <div class="au-input">
+          <span class="affix"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4-4"/></svg></span>
+          <input placeholder="搜索订单编号 / 客户名称">
+        </div>
+      </div>
+      <div class="field">
+        <div class="au-input">
+          <input value="aurora">
+          <span class="affix">.com</span>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="group">
+    <h2>5. 清除按钮（clearable）</h2>
+    <div class="row">
+      <div class="field">
+        <div class="au-input" data-clearable>
+          <input value="可清除文本">
+          <button class="action" data-act="clear" aria-label="清除"><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>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="group">
+    <h2>6. 密码切换</h2>
+    <div class="row">
+      <div class="field">
+        <div class="au-input" data-password>
+          <input type="password" value="secret123" data-pw>
+          <button class="action" data-act="toggle-pw" aria-label="显示密码"><svg 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></button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="group">
+    <h2>7. 禁用态</h2>
+    <div class="row">
+      <div class="field"><div class="au-input is-disabled"><input value="不可编辑" disabled></div></div>
+    </div>
+  </div>
+
+  <script>
+    // 清除按钮
+    document.querySelectorAll('[data-act="clear"]').forEach(btn => {
+      btn.addEventListener('click', () => { btn.closest('.au-input').querySelector('input').value = ''; });
+    });
+    // 密码显隐切换
+    document.querySelectorAll('[data-act="toggle-pw"]').forEach(btn => {
+      btn.addEventListener('click', () => {
+        const inp = btn.closest('.au-input').querySelector('[data-pw]');
+        inp.type = inp.type === 'password' ? 'text' : 'password';
+      });
+    });
+  </script>
+</body>
+</html>
@@ -0,0 +1,132 @@
+import React, { useState, useRef } from 'react';
+import './Input.css';
+
+/**
+ * Aurora Admin Input（React）
+ * 对齐 input.json 契约：
+ *  - size:    large | default | small
+ *  - state:   default | focus | error | disabled
+ *  - feature: prefix | suffix | clearable | number | password
+ * 受控用法：<Input value={v} onChange={setV} />
+ * 非受控用法：<Input defaultValue="..." />
+ */
+const sizeMap = { large: 'au-input-lg', default: 'au-input-md', small: 'au-input-sm' };
+
+const EyeIcon = () => (
+  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="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>
+);
+const EyeOffIcon = () => (
+  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="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>
+);
+const CloseIcon = () => (
+  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <path d="M18 6L6 18M6 6l12 12" />
+  </svg>
+);
+
+export default function Input({
+  value,
+  defaultValue = '',
+  size = 'default',
+  type = 'text',
+  placeholder = '',
+  disabled = false,
+  error = false,
+  errorText = '',
+  clearable = false,
+  className = '',
+  prefix,
+  suffix,
+  onChange,
+  onFocus,
+  onBlur,
+  ...rest
+}) {
+  const isControlled = value !== undefined;
+  const [inner, setInner] = useState(defaultValue);
+  const [showPassword, setShowPassword] = useState(false);
+  const inputRef = useRef(null);
+
+  const current = isControlled ? value : inner;
+
+  const handleInput = (e) => {
+    const next = e.target.value;
+    if (!isControlled) setInner(next);
+    onChange && onChange(next, e);
+  };
+
+  const handleClear = () => {
+    if (!isControlled) setInner('');
+    onChange && onChange('');
+    requestAnimationFrame(() => inputRef.current && inputRef.current.focus());
+  };
+
+  const resolvedType = type === 'password' ? (showPassword ? 'text' : 'password') : type;
+
+  const classes = [
+    'au-input',
+    sizeMap[size],
+    error ? 'is-error' : '',
+    disabled ? 'is-disabled' : '',
+    className
+  ].filter(Boolean).join(' ');
+
+  return (
+    <div className={`au-field${error ? ' has-error' : ''}`}>
+      <div className={classes}>
+        {prefix && <span className="affix prefix">{prefix}</span>}
+
+        <input
+          ref={inputRef}
+          type={resolvedType}
+          value={current}
+          placeholder={placeholder}
+          disabled={disabled}
+          onChange={handleInput}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          {...rest}
+        />
+
+        {clearable && current && !disabled && (
+          <button className="action clear" type="button" aria-label="清除" onClick={handleClear}>
+            <CloseIcon />
+          </button>
+        )}
+
+        {type === 'password' && (
+          <button
+            className="action toggle"
+            type="button"
+            aria-label={showPassword ? '隐藏密码' : '显示密码'}
+            onClick={() => setShowPassword((v) => !v)}
+          >
+            {showPassword ? <EyeOffIcon /> : <EyeIcon />}
+          </button>
+        )}
+
+        {suffix && <span className="affix suffix">{suffix}</span>}
+      </div>
+
+      {error && errorText && <span className="error-text">{errorText}</span>}
+    </div>
+  );
+}
+
+/*
+用法示例：
+import Input from './Input';
+
+<Input placeholder="请输入客户名称" />
+<Input size="large" placeholder="大尺寸" />
+<Input error errorText="联系电话格式不正确" defaultValue="abc" />
+<Input clearable defaultValue="可清除文本" />
+<Input type="password" defaultValue="secret123" />
+<Input prefix={<SearchIcon />} placeholder="搜索订单编号" />
+<Input value={name} onChange={setName} />
+*/
@@ -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>
@@ -0,0 +1,120 @@
+<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>