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,99 @@
+<!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 · ListPicker (H5)</title>
+<link rel="stylesheet" href="../.design_library/aurora-admin/colors_and_type.css">
+<link rel="stylesheet" href="./ListPicker.css">
+<style>
+  .demo { padding: 24px; background: var(--au-color-page-bg); font-family: var(--font-family); }
+  h1 { font-size: 20px; margin: 0 0 4px; color: var(--au-color-text-title); }
+  .sub { color: var(--au-color-text-secondary); margin: 0 0 24px; font-size: 12px; }
+  .demo-block { background: var(--au-color-card-bg); border-radius: 8px; padding: 24px; margin-bottom: 20px; }
+  .demo-block > .hint { color: var(--au-color-text-secondary); font-size: 12px; margin: 0 0 12px; }
+</style>
+</head>
+<body>
+<div class="demo">
+  <h1>Aurora Admin · ListPicker 组件（纯 H5）</h1>
+  <p class="sub">对齐 ListPicker 规范：下拉列表、多选、分组、搜索、全选、标签</p>
+
+  <div class="demo-block">
+    <p class="hint">技术栈多选（分组 + 搜索 + 全选）</p>
+    <div class="aa-listpicker" data-listpicker></div>
+  </div>
+</div>
+
+<script>
+const OPTIONS = [
+  { label: '前端', children: [{ value: 'vue', label: 'Vue' }, { value: 'react', label: 'React' }, { value: 'ng', label: 'Angular' }] },
+  { label: '后端', children: [{ value: 'java', label: 'Java' }, { value: 'go', label: 'Go' }, { value: 'py', label: 'Python' }] }
+];
+const FLAT = OPTIONS.flatMap(g => g.children);
+const LABEL = Object.fromEntries(FLAT.map(o => [o.value, o.label]));
+
+function init(root) {
+  let value = ['vue', 'react'];
+  let open = false;
+  let query = '';
+
+  const trigger = document.createElement('div');
+  trigger.className = 'aa-listpicker-trigger'; trigger.setAttribute('role','button'); trigger.setAttribute('tabindex','0'); trigger.setAttribute('aria-haspopup','listbox'); trigger.setAttribute('aria-expanded','false');
+
+  function renderTrigger() {
+    if (!value.length) { trigger.innerHTML = '<span class="aa-listpicker-placeholder">请选择技术栈</span>'; }
+    else {
+      trigger.innerHTML = value.map(v => `<span class="aa-listpicker-tag">${LABEL[v]}<span class="x" data-rm="${v}">×</span></span>`).join('');
+    }
+    trigger.innerHTML += '<span class="aa-listpicker-caret">▾</span>';
+    trigger.classList.toggle('is-open', open);
+  }
+
+  function renderPanel() {
+    let panel = root.querySelector('.aa-listpicker-panel');
+    if (!panel) { panel = document.createElement('div'); panel.className = 'aa-listpicker-panel'; root.appendChild(panel); }
+    const visible = FLAT.filter(o => o.label.includes(query));
+    let html = '<div class="aa-listpicker-search"><input placeholder="搜索"></div>';
+    html += '<div class="aa-listpicker-selectall">全选</div>';
+    OPTIONS.forEach(g => {
+      const items = g.children.filter(o => o.label.includes(query));
+      if (!items.length) return;
+      html += `<div class="aa-listpicker-group-label">${g.label}</div>`;
+      items.forEach(o => {
+        const checked = value.includes(o.value);
+        html += `<div class="aa-listpicker-option ${checked ? 'is-checked' : ''}" data-val="${o.value}"><span class="box">${checked ? '✓' : ''}</span>${o.label}</div>`;
+      });
+    });
+    html += visible.length ? '' : '<div class="aa-listpicker-empty">无匹配项</div>';
+    panel.innerHTML = html;
+
+    panel.querySelector('input').addEventListener('input', (e) => { query = e.target.value; renderPanel(); });
+    panel.querySelector('.aa-listpicker-selectall').addEventListener('click', () => {
+      value = [...new Set([...value, ...visible.map(o => o.value)])]; renderTrigger(); renderPanel();
+    });
+    panel.querySelectorAll('.aa-listpicker-option').forEach(opt => {
+      opt.addEventListener('click', () => {
+        const v = opt.dataset.val;
+        value = value.includes(v) ? value.filter(x => x !== v) : [...value, v];
+        renderTrigger(); renderPanel();
+      });
+    });
+  }
+
+  trigger.addEventListener('click', (e) => {
+    const rm = e.target.closest('[data-rm]');
+    if (rm) { e.stopPropagation(); value = value.filter(x => x !== rm.dataset.rm); renderTrigger(); return; }
+    e.stopPropagation();
+    open = !open; renderTrigger(); renderPanel();
+  });
+  root.appendChild(trigger);
+  document.addEventListener('click', (e) => {
+    if (!root.contains(e.target)) { open = false; query = ''; renderTrigger(); }
+  });
+  renderTrigger();
+}
+document.querySelectorAll('[data-listpicker]').forEach(init);
+</script>
+</body>
+</html>
@@ -0,0 +1,95 @@
+import React, { useRef, useState, useEffect, useMemo } from 'react';
+import './ListPicker.css';
+
+/**
+ * Aurora Admin ListPicker（React）
+ * 对齐 组件7.txt ListPicker 规范：下拉列表、多选、分组、搜索、全选、标签
+ *
+ * props:
+ *  - value / defaultValue : 选中 value 数组
+ *  - options : 扁平 [{value,label}] 或 分组 [{label, children}]
+ *  - filterable
+ *  - placeholder
+ *  - onChange(keys)
+ */
+export default function ListPicker({
+  value,
+  defaultValue = [],
+  options = [],
+  filterable = true,
+  placeholder = '请选择',
+  onChange
+}) {
+  const rootRef = useRef(null);
+  const [inner, setInner] = useState(defaultValue);
+  const current = value !== undefined ? value : inner;
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState('');
+
+  const isGrouped = options.length && options[0] && options[0].children;
+  const flat = isGrouped ? options.flatMap(g => g.children) : options;
+  const labelMap = Object.fromEntries(flat.map(o => [o.value, o.label]));
+
+  const flatVisible = useMemo(() => flat.filter(o => o.label.includes(query)), [flat, query]);
+  const visibleGroups = useMemo(() => {
+    if (!isGrouped) return [{ children: flatVisible }];
+    return options
+      .map(g => ({ label: g.label, children: g.children.filter(o => o.label.includes(query)) }))
+      .filter(g => g.children.length);
+  }, [options, flatVisible, query]);
+
+  const commit = (next) => { if (value === undefined) setInner(next); onChange && onChange(next); };
+  const toggleOpt = (o) => { if (o.disabled) return; commit(current.includes(o.value) ? current.filter(x => x !== o.value) : [...current, o.value]); };
+  const remove = (v) => commit(current.filter(x => x !== v));
+  const selectAll = () => commit([...new Set([...current, ...flatVisible.map(o => o.value)])]);
+
+  useEffect(() => {
+    const onDoc = (e) => { if (rootRef.current && !rootRef.current.contains(e.target)) { setOpen(false); setQuery(''); } };
+    document.addEventListener('click', onDoc, true);
+    return () => document.removeEventListener('click', onDoc, true);
+  }, []);
+
+  return (
+    <div className="aa-listpicker" ref={rootRef}>
+      <div className={`aa-listpicker-trigger${open ? ' is-open' : ''}`} onClick={() => { setOpen(!open); if (open) setQuery(''); }}>
+        {current.length ? current.map(v => (
+          <span key={v} className="aa-listpicker-tag">{labelMap[v] || v}<span className="x" onClick={(e) => { e.stopPropagation(); remove(v); }}>×</span></span>
+        )) : <span className="aa-listpicker-placeholder">{placeholder}</span>}
+        <span className="aa-listpicker-caret">▾</span>
+      </div>
+
+      {open && (
+        <div className="aa-listpicker-panel">
+          {filterable && (
+            <div className="aa-listpicker-search">
+              <input value={query} onChange={(e) => setQuery(e.target.value)} placeholder="搜索" />
+            </div>
+          )}
+          <div className="aa-listpicker-selectall" onClick={selectAll}>全选</div>
+          {visibleGroups.map((g, gi) => (
+            <div key={gi}>
+              {g.label && <div className="aa-listpicker-group-label">{g.label}</div>}
+              {g.children.map(o => (
+                <div
+                  key={o.value}
+                  className={`aa-listpicker-option${current.includes(o.value) ? ' is-checked' : ''}${o.disabled ? ' is-disabled' : ''}`}
+                  onClick={() => toggleOpt(o)}
+                >
+                  <span className="box">{current.includes(o.value) ? '✓' : ''}</span>{o.label}
+                </div>
+              ))}
+            </div>
+          ))}
+          {!flatVisible.length && <div className="aa-listpicker-empty">无匹配项</div>}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/*
+用法示例：
+import ListPicker from './ListPicker';
+const options = [{ label: '前端', children: [{ value: 'vue', label: 'Vue' }, { value: 'react', label: 'React' }] }];
+<ListPicker options={options} defaultValue={['vue']} onChange={setKeys} />
+*/
@@ -0,0 +1,93 @@
+<template>
+  <div class="aa-listpicker" ref="root">
+    <div class="aa-listpicker-trigger" :class="{ 'is-open': open }" @click="open = !open; if(!open) query=''">
+      <template v-if="value.length">
+        <span v-for="v in value" :key="v" class="aa-listpicker-tag">
+          {{ labelOf(v) }}<span class="x" @click.stop="remove(v)">×</span>
+        </span>
+      </template>
+      <span v-else class="aa-listpicker-placeholder">{{ placeholder }}</span>
+      <span class="aa-listpicker-caret">▾</span>
+    </div>
+
+    <div v-if="open" class="aa-listpicker-panel">
+      <div v-if="filterable" class="aa-listpicker-search">
+        <input v-model="query" placeholder="搜索">
+      </div>
+      <div class="aa-listpicker-selectall" @click="selectAll">全选</div>
+      <template v-for="(g, gi) in visibleGroups" :key="gi">
+        <div class="aa-listpicker-group-label" v-if="g.label">{{ g.label }}</div>
+        <div
+          v-for="o in g.children" :key="o.value"
+          class="aa-listpicker-option" :class="{ 'is-checked': value.includes(o.value), 'is-disabled': o.disabled }"
+          @click="toggleOpt(o)"
+        >
+          <span class="box">{{ value.includes(o.value) ? '✓' : '' }}</span>{{ o.label }}
+        </div>
+      </template>
+      <div v-if="!flatVisible.length" class="aa-listpicker-empty">无匹配项</div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AaListPicker',
+  props: {
+    value: { type: Array, default: () => [] },
+    options: { type: Array, required: true },
+    filterable: { type: Boolean, default: true },
+    placeholder: { type: String, default: '请选择' }
+  },
+  data() { return { open: false, query: '' }; },
+  computed: {
+    isGrouped() { return this.options.length && this.options[0] && this.options[0].children; },
+    flat() { return this.isGrouped ? this.options.flatMap(g => g.children) : this.options; },
+    labelMap() { return Object.fromEntries(this.flat.map(o => [o.value, o.label])); },
+    flatVisible() { return this.flat.filter(o => o.label.includes(this.query)); },
+    visibleGroups() {
+      if (!this.isGrouped) return [{ children: this.flatVisible }];
+      return this.options
+        .map(g => ({ label: g.label, children: g.children.filter(o => o.label.includes(this.query)) }))
+        .filter(g => g.children.length);
+    }
+  },
+  methods: {
+    labelOf(v) { return this.labelMap[v] || v; },
+    toggleOpt(o) { if (o.disabled) return; this.commit(this.value.includes(o.value) ? this.value.filter(x => x !== o.value) : [...this.value, o.value]); },
+    remove(v) { this.commit(this.value.filter(x => x !== v)); },
+    selectAll() { this.commit([...new Set([...this.value, ...this.flatVisible.map(o => o.value)])]); },
+    commit(next) { this.$emit('input', next); this.$emit('change', next); },
+    onDocClick(e) { if (this.$refs.root && !this.$refs.root.contains(e.target)) { this.open = false; this.query = ''; } }
+  },
+  mounted() { document.addEventListener('click', this.onDocClick, true); },
+  beforeDestroy() { document.removeEventListener('click', this.onDocClick, true); }
+};
+</script>
+
+<!-- 样式对齐 组件7.txt ListPicker 规范 -->
+<style>
+.aa-listpicker { position: relative; display: inline-block; min-width: 220px; font-family: var(--font-family, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif); color: #262626; }
+.aa-listpicker-trigger { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-height: 32px; padding: 2px 28px 2px 8px; background: #fff; border: 1px solid #E8ECF1; border-radius: 4px; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
+.aa-listpicker-trigger:hover { border-color: #2F54EB; }
+.aa-listpicker-trigger.is-open { border-color: #2F54EB; box-shadow: 0 0 0 2px rgba(47,84,235,0.2); }
+.aa-listpicker-tag { background: #F0F5FF; color: #2F54EB; font-size: 12px; padding: 1px 8px; border-radius: 2px; display: inline-flex; align-items: center; gap: 4px; }
+.aa-listpicker-tag .x { cursor: pointer; opacity: .65; }
+.aa-listpicker-tag .x:hover { opacity: 1; }
+.aa-listpicker-placeholder { color: #767676; font-size: 14px; }
+.aa-listpicker-caret { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #6E6E6E; }
+.aa-listpicker-panel { position: absolute; z-index: 100; top: calc(100% + 4px); left: 0; width: 240px; background: #fff; border: 1px solid #E8ECF1; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
+.aa-listpicker-search { padding: 8px; border-bottom: 1px solid #E8ECF1; }
+.aa-listpicker-search input { width: 100%; box-sizing: border-box; height: 30px; padding: 0 8px; border: 1px solid #E8ECF1; border-radius: 4px; font-size: 13px; outline: none; }
+.aa-listpicker-search input:focus { border-color: #2F54EB; box-shadow: 0 0 0 2px rgba(47,84,235,0.2); }
+.aa-listpicker-selectall { padding: 6px 12px; border-bottom: 1px solid #E8ECF1; cursor: pointer; font-size: 13px; color: #2F54EB; }
+.aa-listpicker-selectall:hover { background: #F5F7FA; }
+.aa-listpicker-group-label { padding: 6px 12px; font-size: 12px; color: #6E6E6E; }
+.aa-listpicker-option { display: flex; align-items: center; gap: 8px; padding: 6px 12px; cursor: pointer; font-size: 14px; }
+.aa-listpicker-option:hover { background: #F5F7FA; }
+.aa-listpicker-option.is-checked { color: #2F54EB; }
+.aa-listpicker-option .box { width: 14px; height: 14px; border: 1px solid #E8ECF1; border-radius: 3px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 10px; }
+.aa-listpicker-option.is-checked .box { background: #2F54EB; border-color: #2F54EB; }
+.aa-listpicker-option.is-disabled { color: #BFBFBF; cursor: not-allowed; }
+.aa-listpicker-empty { padding: 24px 12px; text-align: center; color: #767676; font-size: 13px; }
+</style>
@@ -0,0 +1,97 @@
+<template>
+  <div class="aa-listpicker" ref="root">
+    <div class="aa-listpicker-trigger" :class="{ 'is-open': open }" @click="toggle">
+      <template v-if="modelValue.length">
+        <span v-for="v in modelValue" :key="v" class="aa-listpicker-tag">
+          {{ labelOf(v) }}<span class="x" @click.stop="remove(v)">×</span>
+        </span>
+      </template>
+      <span v-else class="aa-listpicker-placeholder">{{ placeholder }}</span>
+      <span class="aa-listpicker-caret">▾</span>
+    </div>
+
+    <div v-if="open" class="aa-listpicker-panel">
+      <div v-if="filterable" class="aa-listpicker-search">
+        <input v-model="query" placeholder="搜索">
+      </div>
+      <div class="aa-listpicker-selectall" @click="selectAll">全选</div>
+      <template v-for="(g, gi) in visibleGroups" :key="gi">
+        <div class="aa-listpicker-group-label" v-if="g.label">{{ g.label }}</div>
+        <div
+          v-for="o in g.children" :key="o.value"
+          class="aa-listpicker-option" :class="{ 'is-checked': modelValue.includes(o.value), 'is-disabled': o.disabled }"
+          @click="toggleOpt(o)"
+        >
+          <span class="box">{{ modelValue.includes(o.value) ? '✓' : '' }}</span>{{ o.label }}
+        </div>
+      </template>
+      <div v-if="!flatVisible.length" class="aa-listpicker-empty">无匹配项</div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onBeforeUnmount } from 'vue';
+
+const props = defineProps({
+  modelValue: { type: Array, default: () => [] },      // 选中 value 数组
+  options: { type: Array, required: true },             // 扁平 [{value,label}] 或 分组 [{label, children}]
+  filterable: { type: Boolean, default: true },
+  placeholder: { type: String, default: '请选择' }
+});
+const emit = defineEmits(['update:modelValue', 'change']);
+
+const root = ref(null);
+const open = ref(false);
+const query = ref('');
+
+const isGrouped = computed(() => props.options.length && props.options[0] && props.options[0].children);
+const flat = computed(() => isGrouped.value ? props.options.flatMap(g => g.children) : props.options);
+const labelMap = computed(() => Object.fromEntries(flat.value.map(o => [o.value, o.label])));
+
+const flatVisible = computed(() => flat.value.filter(o => o.label.includes(query.value)));
+const visibleGroups = computed(() => {
+  if (!isGrouped.value) return [{ children: flatVisible.value }];
+  return props.options
+    .map(g => ({ label: g.label, children: g.children.filter(o => o.label.includes(query.value)) }))
+    .filter(g => g.children.length);
+});
+
+function labelOf(v) { return labelMap.value[v] || v; }
+function toggle(openState) { open.value = !open.value; if (!open.value) query.value = ''; }
+function toggleOpt(o) { if (o.disabled) return; commit(modelValue.includes(o.value) ? modelValue.filter(x => x !== o.value) : [...modelValue, o.value]); }
+function remove(v) { commit(modelValue.filter(x => x !== v)); }
+function selectAll() { commit([...new Set([...modelValue, ...flatVisible.value.map(o => o.value)])]); }
+function commit(next) { emit('update:modelValue', next); emit('change', next); }
+
+function onDocClick(e) { if (root.value && !root.value.contains(e.target)) { open.value = false; query.value = ''; } }
+document.addEventListener('click', onDocClick, true);
+onBeforeUnmount(() => document.removeEventListener('click', onDocClick, true));
+</script>
+
+<!-- 样式对齐 组件7.txt ListPicker 规范 -->
+<style scoped>
+.aa-listpicker { position: relative; display: inline-block; min-width: 220px; font-family: var(--font-family, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif); color: #262626; }
+.aa-listpicker-trigger { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-height: 32px; padding: 2px 28px 2px 8px; background: #fff; border: 1px solid #E8ECF1; border-radius: 4px; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
+.aa-listpicker-trigger:hover { border-color: #2F54EB; }
+.aa-listpicker-trigger.is-open { border-color: #2F54EB; box-shadow: 0 0 0 2px rgba(47,84,235,0.2); }
+.aa-listpicker-tag { background: #F0F5FF; color: #2F54EB; font-size: 12px; padding: 1px 8px; border-radius: 2px; display: inline-flex; align-items: center; gap: 4px; }
+.aa-listpicker-tag .x { cursor: pointer; opacity: .65; }
+.aa-listpicker-tag .x:hover { opacity: 1; }
+.aa-listpicker-placeholder { color: #767676; font-size: 14px; }
+.aa-listpicker-caret { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: #6E6E6E; }
+.aa-listpicker-panel { position: absolute; z-index: 100; top: calc(100% + 4px); left: 0; width: 240px; background: #fff; border: 1px solid #E8ECF1; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.12); }
+.aa-listpicker-search { padding: 8px; border-bottom: 1px solid #E8ECF1; }
+.aa-listpicker-search input { width: 100%; box-sizing: border-box; height: 30px; padding: 0 8px; border: 1px solid #E8ECF1; border-radius: 4px; font-size: 13px; outline: none; }
+.aa-listpicker-search input:focus { border-color: #2F54EB; box-shadow: 0 0 0 2px rgba(47,84,235,0.2); }
+.aa-listpicker-selectall { padding: 6px 12px; border-bottom: 1px solid #E8ECF1; cursor: pointer; font-size: 13px; color: #2F54EB; }
+.aa-listpicker-selectall:hover { background: #F5F7FA; }
+.aa-listpicker-group-label { padding: 6px 12px; font-size: 12px; color: #6E6E6E; }
+.aa-listpicker-option { display: flex; align-items: center; gap: 8px; padding: 6px 12px; cursor: pointer; font-size: 14px; }
+.aa-listpicker-option:hover { background: #F5F7FA; }
+.aa-listpicker-option.is-checked { color: #2F54EB; }
+.aa-listpicker-option .box { width: 14px; height: 14px; border: 1px solid #E8ECF1; border-radius: 3px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 10px; }
+.aa-listpicker-option.is-checked .box { background: #2F54EB; border-color: #2F54EB; }
+.aa-listpicker-option.is-disabled { color: #BFBFBF; cursor: not-allowed; }
+.aa-listpicker-empty { padding: 24px 12px; text-align: center; color: #767676; font-size: 13px; }
+</style>