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,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>