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,103 @@
+<!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 · Transfer (H5)</title>
+<link rel="stylesheet" href="../.design_library/aurora-admin/colors_and_type.css">
+<link rel="stylesheet" href="./Transfer.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: 20px; margin-bottom: 20px; display: inline-block; }
+</style>
+</head>
+<body>
+<div class="demo">
+  <h1>Aurora Admin · Transfer 组件（纯 H5）</h1>
+  <p class="sub">对齐 Transfer 规范：左右两栏、搜索、复选框、已选数量</p>
+
+  <div class="demo-block">
+    <div class="aa-transfer" data-transfer></div>
+  </div>
+</div>
+
+<script>
+(function () {
+  const root = document.querySelector('[data-transfer]');
+  const DATA = [
+    { key: '1', label: '研发部' }, { key: '2', label: '产品部' }, { key: '3', label: '设计部' },
+    { key: '4', label: '市场部' }, { key: '5', label: '销售部' }, { key: '6', label: '运营部' },
+    { key: '7', label: '财务部' }, { key: '8', label: '人事部' }
+  ];
+
+  let selected = ['1', '2'];
+  const leftChecked = new Set();
+  const rightChecked = new Set();
+  let leftQ = '', rightQ = '';
+
+  function render() {
+    const leftItems = DATA.filter(d => !selected.includes(d.key) && d.label.includes(leftQ));
+    const rightItems = DATA.filter(d => selected.includes(d.key) && d.label.includes(rightQ));
+
+    root.innerHTML = `
+      <div class="aa-transfer-panel">
+        <div class="aa-transfer-head"><span>候选部门</span><span class="count">${leftChecked.size}/${leftItems.length}</span></div>
+        <div class="aa-transfer-search"><input placeholder="搜索" data-q="left"></div>
+        <div class="aa-transfer-body" data-body="left">
+          ${leftItems.map(d => `
+            <div class="aa-transfer-item ${leftChecked.has(d.key) ? 'is-checked' : ''}" role="option" tabindex="0" data-key="${d.key}">
+              <span class="box">${leftChecked.has(d.key) ? '✓' : ''}</span>${d.label}
+            </div>`).join('') || '<div class="aa-transfer-empty">无数据</div>'}
+        </div>
+      </div>
+      <div class="aa-transfer-ops">
+        <button data-op="right" ${leftChecked.size ? '' : 'disabled'}>›</button>
+        <button data-op="left" ${rightChecked.size ? '' : 'disabled'}>‹</button>
+      </div>
+      <div class="aa-transfer-panel">
+        <div class="aa-transfer-head"><span>已选部门</span><span class="count">${rightChecked.size}/${rightItems.length}</span></div>
+        <div class="aa-transfer-search"><input placeholder="搜索" data-q="right"></div>
+        <div class="aa-transfer-body" data-body="right">
+          ${rightItems.map(d => `
+            <div class="aa-transfer-item ${rightChecked.has(d.key) ? 'is-checked' : ''}" role="option" tabindex="0" data-key="${d.key}">
+              <span class="box">${rightChecked.has(d.key) ? '✓' : ''}</span>${d.label}
+            </div>`).join('') || '<div class="aa-transfer-empty">无数据</div>'}
+        </div>
+      </div>`;
+  }
+
+  root.addEventListener('click', (e) => {
+    const item = e.target.closest('.aa-transfer-item');
+    const op = e.target.closest('[data-op]');
+    const search = e.target.closest('[data-q]');
+    if (search) {
+      search.addEventListener('input', (ev) => {
+        if (ev.target.dataset.q === 'left') leftQ = ev.target.value; else rightQ = ev.target.value;
+        render();
+      }, { once: true });
+      return;
+    }
+    if (item) {
+      const key = item.dataset.key;
+      const set = item.closest('[data-body="left"]') ? leftChecked : rightChecked;
+      set.has(key) ? set.delete(key) : set.add(key);
+      render();
+    } else if (op) {
+      if (op.dataset.op === 'right') {
+        leftChecked.forEach(k => { if (!selected.includes(k)) selected.push(k); });
+        leftChecked.clear();
+      } else {
+        selected = selected.filter(k => !rightChecked.has(k));
+        rightChecked.clear();
+      }
+      render();
+    }
+  });
+
+  render();
+})();
+</script>
+</body>
+</html>
@@ -0,0 +1,103 @@
+import React, { useState, useMemo } from 'react';
+import './Transfer.css';
+
+/**
+ * Aurora Admin Transfer（React）
+ * 对齐 组件7.txt Transfer 规范：左右两栏、搜索、复选框、已选数量
+ *
+ * props:
+ *  - value / defaultValue : 已选 key 数组
+ *  - data    : [{ key, label, disabled? }]
+ *  - titles  : [左标题, 右标题]
+ *  - filterable
+ *  - onChange(keys)
+ */
+export default function Transfer({
+  value,
+  defaultValue = [],
+  data = [],
+  titles = ['候选列表', '已选列表'],
+  filterable = false,
+  onChange
+}) {
+  const [selected, setSelected] = useState(value !== undefined ? value : defaultValue);
+  const current = value !== undefined ? value : selected;
+  const [leftChecked, setLeftChecked] = useState([]);
+  const [rightChecked, setRightChecked] = useState([]);
+  const [leftQ, setLeftQ] = useState('');
+  const [rightQ, setRightQ] = useState('');
+
+  const filteredLeft = useMemo(
+    () => data.filter(d => !current.includes(d.key) && d.label.includes(leftQ)),
+    [data, current, leftQ]
+  );
+  const filteredRight = useMemo(
+    () => data.filter(d => current.includes(d.key) && d.label.includes(rightQ)),
+    [data, current, rightQ]
+  );
+
+  const setVal = (next) => {
+    if (value === undefined) setSelected(next);
+    onChange && onChange(next);
+  };
+  const toggle = (which, key) => {
+    const item = data.find(d => d.key === key);
+    if (item && item.disabled) return;
+    const arr = which === 'left' ? leftChecked : rightChecked;
+    const set = which === 'left' ? setLeftChecked : setRightChecked;
+    set(arr.includes(key) ? arr.filter(k => k !== key) : [...arr, key]);
+  };
+  const moveRight = () => {
+    setVal([...current, ...leftChecked]);
+    setLeftChecked([]);
+  };
+  const moveLeft = () => {
+    const set = new Set(rightChecked);
+    setVal(current.filter(k => !set.has(k)));
+    setRightChecked([]);
+  };
+
+  const Panel = ({ title, items, checked, q, setQ, side }) => (
+    <div className="aa-transfer-panel">
+      <div className="aa-transfer-head">
+        <span>{title}</span>
+        <span className="count">{checked.length}/{items.length}</span>
+      </div>
+      {filterable && (
+        <div className="aa-transfer-search">
+          <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="搜索" />
+        </div>
+      )}
+      <div className="aa-transfer-body">
+        {items.map(d => (
+          <div
+            key={d.key}
+            className={`aa-transfer-item${checked.includes(d.key) ? ' is-checked' : ''}${d.disabled ? ' is-disabled' : ''}`}
+            onClick={() => toggle(side, d.key)}
+          >
+            <span className="box">{checked.includes(d.key) ? '✓' : ''}</span>{d.label}
+          </div>
+        ))}
+        {!items.length && <div className="aa-transfer-empty">无数据</div>}
+      </div>
+    </div>
+  );
+
+  return (
+    <div className="aa-transfer">
+      <Panel title={titles[0]} items={filteredLeft} checked={leftChecked} q={leftQ} setQ={setLeftQ} side="left" />
+      <div className="aa-transfer-ops">
+        <button disabled={!leftChecked.length} onClick={moveRight}>›</button>
+        <button disabled={!rightChecked.length} onClick={moveLeft}>‹</button>
+      </div>
+      <Panel title={titles[1]} items={filteredRight} checked={rightChecked} q={rightQ} setQ={setRightQ} side="right" />
+    </div>
+  );
+}
+
+/*
+用法示例：
+import Transfer from './Transfer';
+const data = [{ key: '1', label: '研发部' }, { key: '2', label: '产品部' }];
+<Transfer data={data} defaultValue={['1']} filterable onChange={setKeys} />
+*/
@@ -0,0 +1,114 @@
+<template>
+  <div class="aa-transfer">
+    <div class="aa-transfer-panel">
+      <div class="aa-transfer-head">
+        <span>{{ titles[0] }}</span>
+        <span class="count">{{ leftChecked.length }}/{{ filteredLeft.length }}</span>
+      </div>
+      <div v-if="filterable" class="aa-transfer-search">
+        <input v-model="leftQ" placeholder="搜索">
+      </div>
+      <div class="aa-transfer-body">
+        <div
+          v-for="d in filteredLeft" :key="d.key"
+          class="aa-transfer-item" :class="{ 'is-checked': leftChecked.includes(d.key), 'is-disabled': d.disabled }"
+          @click="toggle(leftChecked, d.key)"
+        >
+          <span class="box">{{ leftChecked.includes(d.key) ? '✓' : '' }}</span>{{ d.label }}
+        </div>
+        <div v-if="!filteredLeft.length" class="aa-transfer-empty">无数据</div>
+      </div>
+    </div>
+
+    <div class="aa-transfer-ops">
+      <button :disabled="!leftChecked.length" @click="moveRight">›</button>
+      <button :disabled="!rightChecked.length" @click="moveLeft">‹</button>
+    </div>
+
+    <div class="aa-transfer-panel">
+      <div class="aa-transfer-head">
+        <span>{{ titles[1] }}</span>
+        <span class="count">{{ rightChecked.length }}/{{ filteredRight.length }}</span>
+      </div>
+      <div v-if="filterable" class="aa-transfer-search">
+        <input v-model="rightQ" placeholder="搜索">
+      </div>
+      <div class="aa-transfer-body">
+        <div
+          v-for="d in filteredRight" :key="d.key"
+          class="aa-transfer-item" :class="{ 'is-checked': rightChecked.includes(d.key) }"
+          @click="toggle(rightChecked, d.key)"
+        >
+          <span class="box">{{ rightChecked.includes(d.key) ? '✓' : '' }}</span>{{ d.label }}
+        </div>
+        <div v-if="!filteredRight.length" class="aa-transfer-empty">无数据</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AaTransfer',
+  props: {
+    value: { type: Array, default: () => [] },                 // 已选 key 列表
+    data: { type: Array, required: true },                     // [{ key, label, disabled? }]
+    titles: { type: Array, default: () => ['候选列表', '已选列表'] },
+    filterable: { type: Boolean, default: false }
+  },
+  data() {
+    return { leftChecked: [], rightChecked: [], leftQ: '', rightQ: '' };
+  },
+  computed: {
+    filteredLeft() {
+      return this.data.filter(d => !this.value.includes(d.key) && d.label.includes(this.leftQ));
+    },
+    filteredRight() {
+      return this.data.filter(d => this.value.includes(d.key) && d.label.includes(this.rightQ));
+    }
+  },
+  methods: {
+    toggle(arr, key) {
+      const item = this.data.find(d => d.key === key);
+      if (item && item.disabled) return;
+      const i = arr.indexOf(key);
+      if (i >= 0) arr.splice(i, 1); else arr.push(key);
+    },
+    moveRight() {
+      const next = [...this.value, ...this.leftChecked];
+      this.leftChecked = [];
+      this.$emit('input', next);
+      this.$emit('change', next);
+    },
+    moveLeft() {
+      const set = new Set(this.rightChecked);
+      const next = this.value.filter(k => !set.has(k));
+      this.rightChecked = [];
+      this.$emit('input', next);
+      this.$emit('change', next);
+    }
+  }
+};
+</script>
+
+<!-- 样式对齐 组件7.txt Transfer 规范 -->
+<style>
+.aa-transfer { display: inline-flex; align-items: stretch; gap: 12px; font-family: var(--font-family, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif); color: #262626; }
+.aa-transfer-panel { width: 220px; border: 1px solid #E8ECF1; border-radius: 6px; background: #fff; display: flex; flex-direction: column; }
+.aa-transfer-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid #E8ECF1; font-size: 14px; }
+.aa-transfer-head .count { color: #6E6E6E; font-size: 12px; }
+.aa-transfer-search { padding: 8px 12px; border-bottom: 1px solid #E8ECF1; }
+.aa-transfer-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; color: #262626; }
+.aa-transfer-search input:focus { border-color: #2F54EB; box-shadow: 0 0 0 2px rgba(47,84,235,0.2); }
+.aa-transfer-body { flex: 1; min-height: 180px; max-height: 240px; overflow: auto; padding: 4px 0; }
+.aa-transfer-item { display: flex; align-items: center; gap: 8px; padding: 6px 12px; cursor: pointer; font-size: 14px; }
+.aa-transfer-item:hover { background: #F5F7FA; }
+.aa-transfer-item.is-disabled { color: #BFBFBF; cursor: not-allowed; }
+.aa-transfer-item .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-transfer-item.is-checked .box { background: #2F54EB; border-color: #2F54EB; }
+.aa-transfer-empty { padding: 32px 12px; text-align: center; color: #767676; font-size: 13px; }
+.aa-transfer-ops { display: flex; flex-direction: column; justify-content: center; gap: 8px; }
+.aa-transfer-ops button { width: 32px; height: 32px; border-radius: 4px; border: 1px solid #E8ECF1; background: #fff; color: #262626; cursor: pointer; font-size: 14px; }
+.aa-transfer-ops button:hover:not(:disabled) { color: #2F54EB; border-color: #2F54EB; }
+.aa-transfer-ops button:disabled { color: #BFBFBF; cursor: not-allowed; }
+</style>
@@ -0,0 +1,117 @@
+<template>
+  <div class="aa-transfer">
+    <!-- 左栏：未选中 -->
+    <div class="aa-transfer-panel">
+      <div class="aa-transfer-head">
+        <span>{{ titles[0] }}</span>
+        <span class="count">{{ leftChecked.length }}/{{ filteredLeft.length }}</span>
+      </div>
+      <div v-if="filterable" class="aa-transfer-search">
+        <input v-model="leftQ" placeholder="搜索">
+      </div>
+      <div class="aa-transfer-body">
+        <div
+          v-for="d in filteredLeft" :key="d.key"
+          class="aa-transfer-item" :class="{ 'is-checked': leftChecked.includes(d.key), 'is-disabled': d.disabled }"
+          @click="toggle(leftChecked, d.key)"
+        >
+          <span class="box">{{ leftChecked.includes(d.key) ? '✓' : '' }}</span>{{ d.label }}
+        </div>
+        <div v-if="!filteredLeft.length" class="aa-transfer-empty">无数据</div>
+      </div>
+    </div>
+
+    <!-- 中间操作 -->
+    <div class="aa-transfer-ops">
+      <button :disabled="!leftChecked.length" @click="moveRight">›</button>
+      <button :disabled="!rightChecked.length" @click="moveLeft">‹</button>
+    </div>
+
+    <!-- 右栏：已选中 -->
+    <div class="aa-transfer-panel">
+      <div class="aa-transfer-head">
+        <span>{{ titles[1] }}</span>
+        <span class="count">{{ rightChecked.length }}/{{ filteredRight.length }}</span>
+      </div>
+      <div v-if="filterable" class="aa-transfer-search">
+        <input v-model="rightQ" placeholder="搜索">
+      </div>
+      <div class="aa-transfer-body">
+        <div
+          v-for="d in filteredRight" :key="d.key"
+          class="aa-transfer-item" :class="{ 'is-checked': rightChecked.includes(d.key) }"
+          @click="toggle(rightChecked, d.key)"
+        >
+          <span class="box">{{ rightChecked.includes(d.key) ? '✓' : '' }}</span>{{ d.label }}
+        </div>
+        <div v-if="!filteredRight.length" class="aa-transfer-empty">无数据</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+
+const props = defineProps({
+  modelValue: { type: Array, default: () => [] },           // 已选 key 列表
+  data: { type: Array, required: true },                    // [{ key, label, disabled? }]
+  titles: { type: Array, default: () => ['候选列表', '已选列表'] },
+  filterable: { type: Boolean, default: false }
+});
+const emit = defineEmits(['update:modelValue', 'change']);
+
+const leftChecked = ref([]);
+const rightChecked = ref([]);
+const leftQ = ref('');
+const rightQ = ref('');
+
+const filteredLeft = computed(() =>
+  props.data.filter(d => !props.modelValue.includes(d.key) && d.label.includes(leftQ.value))
+);
+const filteredRight = computed(() =>
+  props.data.filter(d => props.modelValue.includes(d.key) && d.label.includes(rightQ.value))
+);
+
+function toggle(arr, key) {
+  const item = props.data.find(d => d.key === key);
+  if (item && item.disabled) return;
+  const i = arr.indexOf(key);
+  if (i >= 0) arr.splice(i, 1); else arr.push(key);
+}
+function moveRight() {
+  const next = [...props.modelValue, ...leftChecked.value];
+  leftChecked.value = [];
+  emit('update:modelValue', next);
+  emit('change', next);
+}
+function moveLeft() {
+  const set = new Set(rightChecked.value);
+  const next = props.modelValue.filter(k => !set.has(k));
+  rightChecked.value = [];
+  emit('update:modelValue', next);
+  emit('change', next);
+}
+</script>
+
+<!-- 样式对齐 组件7.txt Transfer 规范 -->
+<style scoped>
+.aa-transfer { display: inline-flex; align-items: stretch; gap: 12px; font-family: var(--font-family, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif); color: #262626; }
+.aa-transfer-panel { width: 220px; border: 1px solid #E8ECF1; border-radius: 6px; background: #fff; display: flex; flex-direction: column; }
+.aa-transfer-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-bottom: 1px solid #E8ECF1; font-size: 14px; }
+.aa-transfer-head .count { color: #6E6E6E; font-size: 12px; }
+.aa-transfer-search { padding: 8px 12px; border-bottom: 1px solid #E8ECF1; }
+.aa-transfer-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; color: #262626; }
+.aa-transfer-search input:focus { border-color: #2F54EB; box-shadow: 0 0 0 2px rgba(47,84,235,0.2); }
+.aa-transfer-body { flex: 1; min-height: 180px; max-height: 240px; overflow: auto; padding: 4px 0; }
+.aa-transfer-item { display: flex; align-items: center; gap: 8px; padding: 6px 12px; cursor: pointer; font-size: 14px; }
+.aa-transfer-item:hover { background: #F5F7FA; }
+.aa-transfer-item.is-disabled { color: #BFBFBF; cursor: not-allowed; }
+.aa-transfer-item .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-transfer-item.is-checked .box { background: #2F54EB; border-color: #2F54EB; }
+.aa-transfer-empty { padding: 32px 12px; text-align: center; color: #767676; font-size: 13px; }
+.aa-transfer-ops { display: flex; flex-direction: column; justify-content: center; gap: 8px; }
+.aa-transfer-ops button { width: 32px; height: 32px; border-radius: 4px; border: 1px solid #E8ECF1; background: #fff; color: #262626; cursor: pointer; font-size: 14px; }
+.aa-transfer-ops button:hover:not(:disabled) { color: #2F54EB; border-color: #2F54EB; }
+.aa-transfer-ops button:disabled { color: #BFBFBF; cursor: not-allowed; }
+</style>