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,48 @@
+<!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 · ProgressVariants（普通 H5）</title>
+  <link rel="stylesheet" href="../.design_library/aurora-admin/colors_and_type.css" />
+  <link rel="stylesheet" href="ProgressVariants.css" />
+  <style>body{margin:0;padding:24px;background: var(--au-color-page-bg);display:flex;flex-direction:column;gap:24px;}
+    .aa-card{background: var(--au-color-card-bg);border: 1px solid var(--au-color-border);border-radius:8px;padding:20px;max-width:420px;}</style>
+</head>
+<body>
+  <div class="aa-card">
+    <div class="aa-progress is-success" role="progressbar" style="margin-bottom:12px">
+      <div class="aa-progress-line-wrap">
+        <div class="aa-progress-line"><div class="aa-progress-line-fill" style="width:100%"></div></div>
+        <span class="aa-progress-text">完成</span>
+      </div>
+    </div>
+    <div class="aa-progress" role="progressbar">
+      <div class="aa-progress-line-wrap">
+        <div class="aa-progress-line"><div class="aa-progress-line-fill" style="width:60%"></div></div>
+        <span class="aa-progress-text">60%</span>
+      </div>
+    </div>
+  </div>
+
+  <div class="aa-card" style="display:flex;gap:24px;align-items:center">
+    <div class="aa-progress-circle" role="progressbar" id="c1"></div>
+    <div class="aa-progress-circle" role="progressbar" id="c2"></div>
+  </div>
+
+  <script>
+    var C = 2 * Math.PI * 42;
+    function circle(el, percent, status) {
+      var color = { success: '#2E7D0A', warning: '#8C5A00', error: '#CF1322', normal: '#2F54EB' }[status] || '#2F54EB';
+      el.className = 'aa-progress-circle' + (status !== 'normal' ? ' is-' + status : '');
+      el.innerHTML = '<svg width="100" height="100" viewBox="0 0 100 100">' +
+        '<circle cx="50" cy="50" r="42" fill="none" stroke="#E8ECF1" stroke-width="8" />' +
+        '<circle cx="50" cy="50" r="42" fill="none" stroke="' + color + '" stroke-width="8" stroke-linecap="round" ' +
+        'stroke-dasharray="' + C + '" stroke-dashoffset="' + (C * (1 - percent / 100)).toFixed(2) + '" transform="rotate(-90 50 50)" /></svg>' +
+        '<span class="aa-progress-circle-text">' + percent + '%</span>';
+    }
+    circle(document.getElementById('c1'), 72, 'normal');
+    circle(document.getElementById('c2'), 88, 'success');
+  </script>
+</body>
+</html>
@@ -0,0 +1,34 @@
+import React from 'react';
+import './ProgressVariants.css';
+
+const R = 42;
+const CIRC = 2 * Math.PI * R;
+const COLORS = { success: '#2E7D0A', warning: '#8C5A00', error: '#CF1322', normal: '#2F54EB' };
+
+export default function ProgressVariants({ type = 'line', percent = 0, status = 'normal', showInfo = true }) {
+  const color = COLORS[status] || COLORS.normal;
+  if (type === 'line') {
+    return (
+      <div className={'aa-progress is-' + status}>
+        <div className="aa-progress-line-wrap">
+          <div className="aa-progress-line"><div className="aa-progress-line-fill" style={{ width: percent + '%' }} /></div>
+          {showInfo ? <span className="aa-progress-text">{status === 'success' ? '完成' : percent + '%'}</span> : null}
+        </div>
+      </div>
+    );
+  }
+  const isDash = type === 'dashboard';
+  const arcLen = isDash ? CIRC * 0.75 : CIRC;
+  return (
+    <div className={'aa-progress-circle' + (status !== 'normal' ? ' is-' + status : '')}>
+      <svg width="100" height="100" viewBox="0 0 100 100">
+        <circle cx="50" cy="50" r={R} fill="none" stroke="#E8ECF1" strokeWidth="8"
+                strokeDasharray={CIRC} strokeDashoffset={isDash ? CIRC * 0.25 : 0} />
+        <circle cx="50" cy="50" r={R} fill="none" stroke={color} strokeWidth="8" strokeLinecap="round"
+                strokeDasharray={arcLen} strokeDashoffset={arcLen * (1 - percent / 100)}
+                transform={isDash ? 'rotate(135 50 50)' : 'rotate(-90 50 50)'} />
+      </svg>
+      {showInfo ? <span className="aa-progress-circle-text">{percent}%</span> : null}
+    </div>
+  );
+}
@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <!-- 线型 -->
+    <div v-if="type === 'line'" class="aa-progress" :class="'is-' + status">
+      <div class="aa-progress-line-wrap">
+        <div class="aa-progress-line"><div class="aa-progress-line-fill" :style="{ width: percent + '%' }"></div></div>
+        <span v-if="showInfo" class="aa-progress-text">{{ status === 'success' ? '完成' : percent + '%' }}</span>
+      </div>
+    </div>
+    <!-- 圆形 / 仪表盘 -->
+    <div v-else class="aa-progress-circle" :class="status !== 'normal' ? 'is-' + status : ''">
+      <svg width="100" height="100" viewBox="0 0 100 100">
+        <circle cx="50" cy="50" r="42" fill="none" stroke="#E8ECF1" stroke-width="8"
+                :stroke-dasharray="circleCirc" :stroke-dashoffset="type === 'dashboard' ? circleCirc * 0.25 : 0" />
+        <circle cx="50" cy="50" r="42" fill="none" :stroke="color" stroke-width="8" stroke-linecap="round"
+                :stroke-dasharray="arcLen" :stroke-dashoffset="arcLen * (1 - percent / 100)"
+                :transform="type === 'dashboard' ? 'rotate(135 50 50)' : 'rotate(-90 50 50)'" />
+      </svg>
+      <span v-if="showInfo" class="aa-progress-circle-text">{{ percent }}%</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AaProgressVariants',
+  props: {
+    type: { type: String, default: 'line' },
+    percent: { type: Number, default: 0 },
+    status: { type: String, default: 'normal' },
+    showInfo: { type: Boolean, default: true }
+  },
+  data: function () { return { r: 42 }; },
+  computed: {
+    circleCirc: function () { return 2 * Math.PI * this.r; },
+    arcLen: function () { return this.type === 'dashboard' ? this.circleCirc * 0.75 : this.circleCirc; },
+    color: function () {
+      return ({ success: '#2E7D0A', warning: '#8C5A00', error: '#CF1322', normal: '#2F54EB' })[this.status] || '#2F54EB';
+    }
+  }
+};
+</script>
+
+<style src="./ProgressVariants.css"></style>
@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <div v-if="type === 'line'" class="aa-progress" :class="'is-' + status">
+      <div class="aa-progress-line-wrap">
+        <div class="aa-progress-line"><div class="aa-progress-line-fill" :style="{ width: percent + '%' }"></div></div>
+        <span v-if="showInfo" class="aa-progress-text">{{ status === 'success' ? '完成' : percent + '%' }}</span>
+      </div>
+    </div>
+    <div v-else class="aa-progress-circle" :class="status !== 'normal' ? 'is-' + status : ''">
+      <svg width="100" height="100" viewBox="0 0 100 100">
+        <circle cx="50" cy="50" r="42" fill="none" stroke="#E8ECF1" stroke-width="8"
+                :stroke-dasharray="circleCirc" :stroke-dashoffset="type === 'dashboard' ? circleCirc * 0.25 : 0" />
+        <circle cx="50" cy="50" r="42" fill="none" :stroke="color" stroke-width="8" stroke-linecap="round"
+                :stroke-dasharray="arcLen" :stroke-dashoffset="arcLen * (1 - percent / 100)"
+                :transform="type === 'dashboard' ? 'rotate(135 50 50)' : 'rotate(-90 50 50)'" />
+      </svg>
+      <span v-if="showInfo" class="aa-progress-circle-text">{{ percent }}%</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+const props = defineProps({
+  type: { type: String, default: 'line' },
+  percent: { type: Number, default: 0 },
+  status: { type: String, default: 'normal' },
+  showInfo: { type: Boolean, default: true }
+});
+const r = 42;
+const circleCirc = computed(() => 2 * Math.PI * r);
+const arcLen = computed(() => props.type === 'dashboard' ? circleCirc.value * 0.75 : circleCirc.value);
+const color = computed(() => ({ success: '#2E7D0A', warning: '#8C5A00', error: '#CF1322', normal: '#2F54EB' })[props.status] || '#2F54EB');
+</script>
+
+<style src="./ProgressVariants.css"></style>