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,53 @@
+<!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 · BackToTop（普通 H5）</title>
+  <link rel="stylesheet" href="../.design_library/aurora-admin/colors_and_type.css" />
+  <link rel="stylesheet" href="BackToTop.css" />
+  <style>
+    body { margin: 0; background: var(--au-color-page-bg); font-family: var(--font-family, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif); }
+    .aa-demo-banner { padding: 24px; background: var(--au-color-card-bg); border-bottom: 1px solid var(--au-color-border); }
+    .aa-demo-banner h2 { margin: 0 0 8px; color: var(--au-color-text-title); font-size: 18px; }
+    .aa-demo-banner p { margin: 0; color: var(--au-color-text-secondary); font-size: 13px; }
+    .aa-demo-spacer { height: 2200px; padding: 24px; color: var(--au-color-text-secondary); }
+  </style>
+</head>
+<body>
+  <div class="aa-demo-banner">
+    <h2>向下滚动页面</h2>
+    <p>滚动超过 400px 后右下角出现返回顶部按钮，环显示滚动进度，点击平滑回到顶部。</p>
+  </div>
+  <div class="aa-demo-spacer">这里是长内容占位区……</div>
+
+  <div class="aa-backtop" id="backtop" role="button" aria-label="返回顶部">
+    <svg viewBox="0 0 44 44">
+      <circle class="aa-backtop-ring-bg" aria-label="返回顶部" cx="22" cy="22" r="20" fill="none" stroke-width="2" />
+      <circle class="aa-backtop-ring-fg" role="button" aria-label="返回顶部" id="ring" cx="22" cy="22" r="20" fill="none" stroke-width="2" />
+    </svg>
+    <span class="aa-backtop-arrow" aria-label="返回顶部">↑</span>
+  </div>
+
+  <script>
+    var THRESHOLD = 400, R = 20, C = 2 * Math.PI * R;
+    var el = document.getElementById('backtop');
+    var ring = document.getElementById('ring');
+    ring.style.strokeDasharray = C;
+    ring.style.strokeDashoffset = C;
+
+    function onScroll() {
+      var st = window.pageYOffset || document.documentElement.scrollTop;
+      var max = document.documentElement.scrollHeight - window.innerHeight;
+      var p = max > 0 ? st / max : 0;
+      el.classList.toggle('is-visible', st > THRESHOLD);
+      ring.style.strokeDashoffset = C * (1 - p);
+    }
+    window.addEventListener('scroll', onScroll, { passive: true });
+    el.addEventListener('click', function () {
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+    });
+    onScroll();
+  </script>
+</body>
+</html>
@@ -0,0 +1,51 @@
+import React, { useEffect, useState } from 'react';
+import './BackToTop.css';
+
+export default function BackToTop({ threshold = 400, showRing = true }) {
+  const [visible, setVisible] = useState(false);
+  const [progress, setProgress] = useState(0);
+  const r = 20;
+  const circumference = 2 * Math.PI * r;
+  const offset = circumference * (1 - progress);
+
+  useEffect(() => {
+    function onScroll() {
+      const st = window.pageYOffset || document.documentElement.scrollTop;
+      const max = document.documentElement.scrollHeight - window.innerHeight;
+      setProgress(max > 0 ? st / max : 0);
+      setVisible(st > threshold);
+    }
+    window.addEventListener('scroll', onScroll, { passive: true });
+    onScroll();
+    return () => window.removeEventListener('scroll', onScroll);
+  }, [threshold]);
+
+  function toTop() {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  }
+
+  return (
+    <div
+      className={'aa-backtop' + (visible ? ' is-visible' : '') + (showRing ? '' : ' aa-no-ring')}
+      role="button"
+      aria-label="返回顶部"
+      onClick={toTop}
+    >
+      {showRing ? (
+        <svg viewBox="0 0 44 44">
+          <circle className="aa-backtop-ring-bg" cx="22" cy="22" r="20" fill="none" strokeWidth="2" />
+          <circle
+            className="aa-backtop-ring-fg"
+            cx="22"
+            cy="22"
+            r="20"
+            fill="none"
+            strokeWidth="2"
+            style={{ strokeDasharray: circumference, strokeDashoffset: offset }}
+          />
+        </svg>
+      ) : null}
+      <span className="aa-backtop-arrow">↑</span>
+    </div>
+  );
+}
@@ -0,0 +1,48 @@
+<template>
+  <div class="aa-backtop" :class="{ 'is-visible': visible, 'aa-no-ring': !showRing }"
+       role="button" aria-label="返回顶部" @click="toTop">
+    <svg viewBox="0 0 44 44" v-if="showRing">
+      <circle class="aa-backtop-ring-bg" cx="22" cy="22" r="20" fill="none" stroke-width="2" />
+      <circle class="aa-backtop-ring-fg" cx="22" cy="22" r="20" fill="none" stroke-width="2"
+              :style="{ strokeDasharray: circumference, strokeDashoffset: offset }" />
+    </svg>
+    <span class="aa-backtop-arrow">↑</span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AaBackToTop',
+  props: {
+    threshold: { type: Number, default: 400 },
+    showRing: { type: Boolean, default: true }
+  },
+  data: function () {
+    return { visible: false, progress: 0, r: 20 };
+  },
+  computed: {
+    circumference: function () { return 2 * Math.PI * this.r; },
+    offset: function () { return this.circumference * (1 - this.progress); }
+  },
+  methods: {
+    onScroll: function () {
+      var st = window.pageYOffset || document.documentElement.scrollTop;
+      var max = document.documentElement.scrollHeight - window.innerHeight;
+      this.progress = max > 0 ? st / max : 0;
+      this.visible = st > this.threshold;
+    },
+    toTop: function () {
+      window.scrollTo({ top: 0, behavior: 'smooth' });
+    }
+  },
+  mounted: function () {
+    window.addEventListener('scroll', this.onScroll, { passive: true });
+    this.onScroll();
+  },
+  beforeDestroy: function () {
+    window.removeEventListener('scroll', this.onScroll);
+  }
+};
+</script>
+
+<style src="./BackToTop.css"></style>
@@ -0,0 +1,46 @@
+<template>
+  <div class="aa-backtop" :class="{ 'is-visible': visible, 'aa-no-ring': !showRing }"
+       role="button" aria-label="返回顶部" @click="toTop">
+    <svg viewBox="0 0 44 44" v-if="showRing">
+      <circle class="aa-backtop-ring-bg" cx="22" cy="22" r="20" fill="none" stroke-width="2" />
+      <circle class="aa-backtop-ring-fg" cx="22" cy="22" r="20" fill="none" stroke-width="2"
+              :style="{ strokeDasharray: circumference, strokeDashoffset: offset }" />
+    </svg>
+    <span class="aa-backtop-arrow">↑</span>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
+
+const props = defineProps({
+  threshold: { type: Number, default: 400 },
+  showRing: { type: Boolean, default: true }
+});
+
+const r = 20;
+const visible = ref(false);
+const progress = ref(0);
+const circumference = 2 * Math.PI * r;
+const offset = computed(() => circumference * (1 - progress.value));
+
+function onScroll() {
+  const st = window.pageYOffset || document.documentElement.scrollTop;
+  const max = document.documentElement.scrollHeight - window.innerHeight;
+  progress.value = max > 0 ? st / max : 0;
+  visible.value = st > props.threshold;
+}
+function toTop() {
+  window.scrollTo({ top: 0, behavior: 'smooth' });
+}
+
+onMounted(() => {
+  window.addEventListener('scroll', onScroll, { passive: true });
+  onScroll();
+});
+onBeforeUnmount(() => {
+  window.removeEventListener('scroll', onScroll);
+});
+</script>
+
+<style src="./BackToTop.css"></style>