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,59 @@
+<!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 · ImagePreview（普通 H5）</title>
+  <link rel="stylesheet" href="../.design_library/aurora-admin/colors_and_type.css" />
+  <link rel="stylesheet" href="ImagePreview.css" />
+  <style>body{margin:0;padding:24px;background: var(--au-color-page-bg);display:flex;gap:8px;}
+    .aa-thumb{width:80px;height:80px;border-radius:6px;object-fit:cover;cursor:pointer;border: 1px solid var(--au-color-border);}</style>
+</head>
+<body>
+  <div id="thumbs"></div>
+  <div class="aa-imgprev-mask" aria-modal="true" id="mask" style="display:none">
+    <button class="aa-imgprev-close" role="button" tabindex="0" aria-modal="true" id="close">✕</button>
+    <button class="aa-imgprev-arrow prev" role="dialog" aria-modal="true" id="prev">‹</button>
+    <img class="aa-imgprev-img" aria-modal="true" id="big" />
+    <button class="aa-imgprev-arrow next" role="dialog" aria-modal="true" id="next">›</button>
+    <div class="aa-imgprev-count" role="dialog" aria-modal="true" id="count"></div>
+    <div class="aa-imgprev-thumbs" role="dialog" aria-modal="true" id="strip"></div>
+  </div>
+
+  <script>
+    function svg(c1, c2, t) {
+      var s = "<svg xmlns='http://www.w3.org/2000/svg' width='400' height='300'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'>" +
+        "<stop offset='0' stop-color='" + c1 + "'/><stop offset='1' stop-color='" + c2 + "'/></linearGradient></defs>" +
+        "<rect width='400' height='300' fill='url(#g)'/><text x='200' y='160' font-size='40' fill='#fff' text-anchor='middle' font-family='sans-serif'>" + t + "</text></svg>";
+      return "data:image/svg+xml;utf8," + encodeURIComponent(s);
+    }
+    var IMGS = [svg('#2F54EB','#1D39C4','图 1'), svg('#13C2C2','#08979C','图 2'), svg('#722ED1','#531DAB','图 3'), svg('#8C5A00','#D46B08','图 4')];
+    var cur = 0;
+    var mask = document.getElementById('mask');
+
+    document.getElementById('thumbs').innerHTML = IMGS.map(function (u, i) {
+      return '<img class="aa-thumb" role="button" tabindex="0" src="' + u + '" data-i="' + i + '">';
+    }).join('');
+    document.querySelectorAll('.aa-thumb').forEach(function (t) {
+      t.onclick = function () { cur = parseInt(t.dataset.i, 10); show(); };
+    });
+
+    function show() {
+      mask.style.display = 'flex';
+      document.getElementById('big').src = IMGS[cur];
+      document.getElementById('count').textContent = (cur + 1) + ' / ' + IMGS.length;
+      document.getElementById('strip').innerHTML = IMGS.map(function (u, i) {
+        return '<img class="aa-imgprev-thumb ' + (i === cur ? 'is-active' : '') + '" role="dialog" aria-modal="true" src="' + u + '" data-i="' + i + '">';
+      }).join('');
+      document.querySelectorAll('.aa-imgprev-thumb').forEach(function (th) {
+        th.onclick = function () { cur = parseInt(th.dataset.i, 10); show(); };
+      });
+    }
+    function hide() { mask.style.display = 'none'; }
+    document.getElementById('close').onclick = hide;
+    document.getElementById('prev').onclick = function () { cur = (cur - 1 + IMGS.length) % IMGS.length; show(); };
+    document.getElementById('next').onclick = function () { cur = (cur + 1) % IMGS.length; show(); };
+    mask.addEventListener('click', function (e) { if (e.target === mask) hide(); });
+  </script>
+</body>
+</html>
@@ -0,0 +1,23 @@
+import React from 'react';
+import './ImagePreview.css';
+
+export default function ImagePreview({ images = [], visible = false, index = 0, onClose, onChange }) {
+  if (!visible) return null;
+  const len = images.length || 1;
+  const go = dir => onChange && onChange((index + dir + len) % len);
+  return (
+    <div className="aa-imgprev-mask" onClick={e => { if (e.target === e.currentTarget) onClose && onClose(); }}>
+      <button className="aa-imgprev-close" onClick={onClose}>✕</button>
+      <button className="aa-imgprev-arrow prev" onClick={() => go(-1)}>‹</button>
+      <img className="aa-imgprev-img" src={images[index]} alt={index} />
+      <button className="aa-imgprev-arrow next" onClick={() => go(1)}>›</button>
+      <div className="aa-imgprev-count">{index + 1} / {len}</div>
+      <div className="aa-imgprev-thumbs">
+        {images.map((u, i) => (
+          <img key={i} className={'aa-imgprev-thumb' + (i === index ? ' is-active' : '')}
+               src={u} onClick={() => onChange && onChange(i)} />
+        ))}
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,28 @@
+<template>
+  <div class="aa-imgprev-mask" v-if="visible" @click.self="$emit('close')">
+    <button class="aa-imgprev-close" @click="$emit('close')">✕</button>
+    <button class="aa-imgprev-arrow prev" @click="go(-1)">‹</button>
+    <img class="aa-imgprev-img" :src="images[index]" :alt="index" />
+    <button class="aa-imgprev-arrow next" @click="go(1)">›</button>
+    <div class="aa-imgprev-count">{{ index + 1 }} / {{ images.length }}</div>
+    <div class="aa-imgprev-thumbs">
+      <img v-for="(u, i) in images" :key="i" class="aa-imgprev-thumb" :class="{ 'is-active': i === index }"
+           :src="u" @click="$emit('change', i)" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AaImagePreview',
+  props: { images: { type: Array, default: function () { return []; } }, visible: { type: Boolean, default: false }, index: { type: Number, default: 0 } },
+  methods: {
+    go: function (dir) {
+      var len = this.images.length || 1;
+      this.$emit('change', (this.index + dir + len) % len);
+    }
+  }
+};
+</script>
+
+<style src="./ImagePreview.css"></style>
@@ -0,0 +1,28 @@
+<template>
+  <div class="aa-imgprev-mask" v-if="visible" @click.self="emit('close')">
+    <button class="aa-imgprev-close" @click="emit('close')">✕</button>
+    <button class="aa-imgprev-arrow prev" @click="go(-1)">‹</button>
+    <img class="aa-imgprev-img" :src="images[index]" :alt="index" />
+    <button class="aa-imgprev-arrow next" @click="go(1)">›</button>
+    <div class="aa-imgprev-count">{{ index + 1 }} / {{ images.length }}</div>
+    <div class="aa-imgprev-thumbs">
+      <img v-for="(u, i) in images" :key="i" class="aa-imgprev-thumb" :class="{ 'is-active': i === index }"
+           :src="u" @click="emit('change', i)" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  images: { type: Array, default: () => [] },
+  visible: { type: Boolean, default: false },
+  index: { type: Number, default: 0 }
+});
+const emit = defineEmits(['close', 'change']);
+function go(dir) {
+  const len = props.images.length || 1;
+  emit('change', (props.index + dir + len) % len);
+}
+</script>
+
+<style src="./ImagePreview.css"></style>