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,61 @@
+<!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 · Steps (H5)</title>
+<link rel="stylesheet" href="../.design_library/aurora-admin/colors_and_type.css">
+<link rel="stylesheet" href="./Steps.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: 24px; margin-bottom: 20px; }
+  .demo-block > .hint { color: var(--au-color-text-secondary); font-size: 12px; margin: 0 0 16px; }
+</style>
+</head>
+<body>
+<div class="demo">
+  <h1>Aurora Admin · Steps 组件（纯 H5）</h1>
+  <p class="sub">对齐 StepList 规范：序号、标题、描述、状态、连接线</p>
+
+  <div class="demo-block">
+    <p class="hint">横向步骤条</p>
+    <div class="aa-steps horizontal" role="list" data-steps data-current="1"></div>
+  </div>
+
+  <div class="demo-block">
+    <p class="hint">纵向步骤条（含异常状态）</p>
+    <div class="aa-steps vertical" role="list" data-steps data-current="2" data-error="3"></div>
+  </div>
+</div>
+
+<script>
+const STEPS = [
+  { title: '填写订单', desc: '录入客户与商品信息' },
+  { title: '审核', desc: '主管确认订单合规' },
+  { title: '付款', desc: '完成支付流程' },
+  { title: '完成', desc: '生成发货单' }
+];
+
+function render(root) {
+  const current = +root.dataset.current;
+  const errorAt = root.dataset.error ? +root.dataset.error : -1;
+  const dir = root.classList.contains('horizontal') ? 'horizontal' : 'vertical';
+  root.innerHTML = STEPS.map((s, i) => {
+    let status = i < current ? 'finish' : (i === current ? 'process' : 'wait');
+    if (i === errorAt) status = 'error';
+    const icon = status === 'finish' ? '✓' : (status === 'error' ? '!' : (i + 1));
+    return `<div class="aa-step is-${status}" role="listitem">
+      <div class="aa-step-icon">${icon}</div>
+      <div class="aa-step-body">
+        <div class="aa-step-title">${s.title}</div>
+        <div class="aa-step-desc">${s.desc || ''}</div>
+      </div>
+    </div>`;
+  }).join('');
+}
+document.querySelectorAll('[data-steps]').forEach(render);
+</script>
+</body>
+</html>
@@ -0,0 +1,46 @@
+import React from 'react';
+import './Steps.css';
+
+/**
+ * Aurora Admin Steps（React）
+ * 对齐 组件2/7 StepList 规范：序号、标题、描述、状态、连接线、横/纵
+ *
+ * props:
+ *  - steps    : [{ title, desc? }]
+ *  - current  : 当前步骤索引
+ *  - errorAt  : 异常步骤索引（-1 表示无）
+ *  - direction: 'horizontal' | 'vertical'
+ */
+export default function Steps({ steps = [], current = 0, errorAt = -1, direction = 'horizontal' }) {
+  const statusOf = (i) => {
+    if (i === errorAt) return 'error';
+    if (i < current) return 'finish';
+    if (i === current) return 'process';
+    return 'wait';
+  };
+  const icon = (s) => (s === 'finish' ? '✓' : s === 'error' ? '!' : null);
+
+  return (
+    <div className={`aa-steps ${direction}`}>
+      {steps.map((s, i) => {
+        const st = statusOf(i);
+        return (
+          <div key={i} className={`aa-step is-${st}`}>
+            <div className="aa-step-icon">{icon(st) !== null ? icon(st) : i + 1}</div>
+            <div className="aa-step-body">
+              <div className="aa-step-title">{s.title}</div>
+              {s.desc && <div className="aa-step-desc">{s.desc}</div>}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+/*
+用法示例：
+import Steps from './Steps';
+const steps = [{ title: '填写订单' }, { title: '审核' }, { title: '付款' }];
+<Steps steps={steps} current={1} direction="horizontal" />
+*/
@@ -0,0 +1,56 @@
+<template>
+  <div class="aa-steps" :class="direction">
+    <div
+      v-for="(s, i) in steps" :key="i"
+      class="aa-step"
+      :class="'is-' + statusOf(i)"
+    >
+      <div class="aa-step-icon">{{ statusOf(i) === 'finish' ? '✓' : (statusOf(i) === 'error' ? '!' : (i + 1)) }}</div>
+      <div class="aa-step-body">
+        <div class="aa-step-title">{{ s.title }}</div>
+        <div v-if="s.desc" class="aa-step-desc">{{ s.desc }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AaSteps',
+  props: {
+    steps: { type: Array, required: true },                  // [{ title, desc? }]
+    current: { type: Number, default: 0 },                   // 当前步骤索引
+    errorAt: { type: Number, default: -1 },                  // 异常步骤索引
+    direction: { type: String, default: 'horizontal' }        // horizontal | vertical
+  },
+  methods: {
+    statusOf(i) {
+      if (i === this.errorAt) return 'error';
+      if (i < this.current) return 'finish';
+      if (i === this.current) return 'process';
+      return 'wait';
+    }
+  }
+};
+</script>
+
+<!-- 样式对齐 组件2/7 StepList 规范 -->
+<style>
+.aa-steps { font-family: var(--font-family, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif); color: #262626; }
+.aa-steps.horizontal { display: flex; }
+.aa-steps.vertical { display: inline-flex; flex-direction: column; }
+.aa-step { position: relative; display: flex; gap: 12px; flex: 1; }
+.aa-steps.vertical .aa-step { flex-direction: column; }
+.aa-step-icon { position: relative; width: 32px; height: 32px; border-radius: 50%; border: 2px solid #E8ECF1; display: flex; align-items: center; justify-content: center; font-size: 14px; background: #fff; color: #6E6E6E; flex-shrink: 0; z-index: 1; }
+.aa-step.is-finish .aa-step-icon { border-color: #2F54EB; color: #2F54EB; background: #F0F5FF; }
+.aa-step.is-process .aa-step-icon { border-color: #2F54EB; color: #fff; background: #2F54EB; }
+.aa-step.is-error .aa-step-icon { border-color: #CF1322; color: #CF1322; background: #FFF1F0; }
+.aa-step-title { font-size: 14px; font-weight: 500; line-height: 32px; }
+.aa-step.is-wait .aa-step-title { color: #6E6E6E; }
+.aa-step-desc { font-size: 12px; color: #6E6E6E; margin-top: 2px; }
+.aa-steps.horizontal .aa-step:not(:last-child) .aa-step-icon::after { content: ''; position: absolute; top: 15px; left: 38px; right: -12px; height: 2px; background: #E8ECF1; }
+.aa-steps.horizontal .aa-step.is-finish:not(:last-child) .aa-step-icon::after { background: #2F54EB; }
+.aa-steps.vertical .aa-step-body { padding-bottom: 24px; }
+.aa-steps.vertical .aa-step:not(:last-child) .aa-step-icon::after { content: ''; position: absolute; top: 40px; left: 15px; bottom: -12px; width: 2px; background: #E8ECF1; }
+.aa-steps.vertical .aa-step.is-finish:not(:last-child) .aa-step-icon::after { background: #2F54EB; }
+</style>
@@ -0,0 +1,54 @@
+<template>
+  <div class="aa-steps" :class="direction">
+    <div
+      v-for="(s, i) in steps" :key="i"
+      class="aa-step"
+      :class="'is-' + statusOf(i)"
+    >
+      <div class="aa-step-icon">{{ statusOf(i) === 'finish' ? '✓' : (statusOf(i) === 'error' ? '!' : (i + 1)) }}</div>
+      <div class="aa-step-body">
+        <div class="aa-step-title">{{ s.title }}</div>
+        <div v-if="s.desc" class="aa-step-desc">{{ s.desc }}</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  steps: { type: Array, required: true },                 // [{ title, desc? }]
+  current: { type: Number, default: 0 },                  // 当前步骤索引
+  errorAt: { type: Number, default: -1 },                 // 异常步骤索引
+  direction: { type: String, default: 'horizontal' }      // horizontal | vertical
+});
+
+function statusOf(i) {
+  if (i === props.errorAt) return 'error';
+  if (i < props.current) return 'finish';
+  if (i === props.current) return 'process';
+  return 'wait';
+}
+</script>
+
+<!-- 样式对齐 组件2/7 StepList 规范 -->
+<style scoped>
+.aa-steps { font-family: var(--font-family, -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif); color: #262626; }
+.aa-steps.horizontal { display: flex; }
+.aa-steps.vertical { display: inline-flex; flex-direction: column; }
+.aa-step { position: relative; display: flex; gap: 12px; flex: 1; }
+.aa-steps.vertical .aa-step { flex-direction: column; }
+.aa-step-icon { position: relative; width: 32px; height: 32px; border-radius: 50%; border: 2px solid #E8ECF1; display: flex; align-items: center; justify-content: center; font-size: 14px; background: #fff; color: #6E6E6E; flex-shrink: 0; z-index: 1; }
+.aa-step.is-finish .aa-step-icon { border-color: #2F54EB; color: #2F54EB; background: #F0F5FF; }
+.aa-step.is-process .aa-step-icon { border-color: #2F54EB; color: #fff; background: #2F54EB; }
+.aa-step.is-error .aa-step-icon { border-color: #CF1322; color: #CF1322; background: #FFF1F0; }
+.aa-step-title { font-size: 14px; font-weight: 500; line-height: 32px; }
+.aa-step.is-wait .aa-step-title { color: #6E6E6E; }
+.aa-step-desc { font-size: 12px; color: #6E6E6E; margin-top: 2px; }
+.aa-steps.horizontal .aa-step:not(:last-child) .aa-step-icon::after { content: ''; position: absolute; top: 15px; left: 38px; right: -12px; height: 2px; background: #E8ECF1; }
+.aa-steps.horizontal .aa-step.is-finish:not(:last-child) .aa-step-icon::after { background: #2F54EB; }
+.aa-steps.vertical .aa-step-body { padding-bottom: 24px; }
+.aa-steps.vertical .aa-step:not(:last-child) .aa-step-icon::after { content: ''; position: absolute; top: 40px; left: 15px; bottom: -12px; width: 2px; background: #E8ECF1; }
+.aa-steps.vertical .aa-step.is-finish:not(:last-child) .aa-step-icon::after { background: #2F54EB; }
+</style>