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,110 @@
+<!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 · Button (H5)</title>
+<!-- 复用设计系统 token，保证与组件库一致 -->
+<link rel="stylesheet" href="../.design_library/aurora-admin/colors_and_type.css">
+<style>
+  /* 以下按钮样式对齐 components.css 与 button.json 契约 */
+  .btn {
+    display: inline-flex; align-items: center; justify-content: center;
+    gap: var(--space-4); border: 1px solid transparent; cursor: pointer;
+    white-space: nowrap; font-size: var(--font-size-body); line-height: var(--line-height-body);
+    border-radius: var(--radius-base); min-width: 64px; padding: 0 var(--space-12);
+    flex-shrink: 0; transition: background .15s, border-color .15s;
+    font-family: var(--font-family); box-sizing: border-box;
+  }
+  .btn:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
+  .btn-primary { background: var(--color-brand); color: var(--color-text-inverse); }
+  .btn-primary:hover { background: var(--color-brand-hover); }
+  .btn-primary:active { background: var(--color-brand-active); }
+  .btn-default { background: var(--color-bg-card); border-color: var(--color-border); color: var(--color-text-body); }
+  .btn-default:hover { border-color: var(--color-brand); }
+  .btn-text { background: transparent; color: var(--color-brand); }
+  .btn-text:hover { background: var(--color-brand-bg); }
+  .btn-link { background: transparent; border: none; color: var(--color-brand); min-width: auto; padding: 0; }
+  .btn-link:hover { background: var(--color-brand-bg); }
+  .btn-danger { background: var(--color-error); color: var(--color-text-inverse); }
+  .btn-danger:hover { filter: brightness(.92); }
+  .btn-lg { height: var(--control-height-large); }
+  .btn-md { height: var(--control-height-default); }
+  .btn-sm { height: var(--control-height-small); }
+  .btn-disabled, .btn:disabled {
+    background: var(--color-bg-disabled); border-color: transparent;
+    color: var(--color-text-placeholder); cursor: not-allowed;
+  }
+  .btn-disabled:hover, .btn:disabled:hover { background: var(--color-bg-disabled); filter: none; }
+
+  /* 加载态：旋转 spinner + 文字 */
+  .btn.is-loading { cursor: progress; position: relative; }
+  .btn.is-loading .btn-label { opacity: .65; }
+  .btn .spinner {
+    width: 14px; height: 14px; border: 2px solid currentColor; border-top-color: transparent;
+    border-radius: 50%; animation: btn-spin .6s linear infinite; display: inline-block;
+  }
+  @keyframes btn-spin { to { transform: rotate(360deg); } }
+
+  /* 演示页布局 */
+  body { margin: 0; padding: 24px; background: var(--color-bg-page); color: var(--color-text-body);
+    font-family: var(--font-family); }
+  h1 { font-size: var(--font-size-h1); margin: 0 0 4px; }
+  .sub { color: var(--color-text-secondary); margin: 0 0 24px; font-size: var(--font-size-caption); }
+  .group { margin-bottom: 24px; }
+  .group h2 { font-size: var(--font-size-h2); margin: 0 0 12px; color: var(--color-text-title); }
+  .row { display: flex; flex-wrap: wrap; gap: var(--space-12); align-items: center; }
+  .tag { font-size: var(--font-size-caption); color: var(--color-text-secondary); width: 72px; flex-shrink: 0; }
+</style>
+</head>
+<body>
+  <h1>Aurora Admin · Button 组件（纯 H5）</h1>
+  <p class="sub">对齐 button.json 契约：5 类型 × 3 尺寸，含禁用 / 加载 / 图标场景</p>
+
+  <div class="group">
+    <h2>1. 类型（默认尺寸）</h2>
+    <div class="row">
+      <button class="btn btn-primary btn-md">主按钮</button>
+      <button class="btn btn-default btn-md">次按钮</button>
+      <button class="btn btn-text btn-md">文字按钮</button>
+      <button class="btn btn-link btn-md">链接按钮</button>
+      <button class="btn btn-danger btn-md">危险按钮</button>
+    </div>
+  </div>
+
+  <div class="group">
+    <h2>2. 尺寸（主按钮）</h2>
+    <div class="row">
+      <button class="btn btn-primary btn-lg">大尺寸</button>
+      <button class="btn btn-primary btn-md">默认尺寸</button>
+      <button class="btn btn-primary btn-sm">小尺寸</button>
+    </div>
+  </div>
+
+  <div class="group">
+    <h2>3. 禁用态</h2>
+    <div class="row">
+      <button class="btn btn-primary btn-md btn-disabled" disabled>主按钮</button>
+      <button class="btn btn-default btn-md btn-disabled" disabled>次按钮</button>
+      <button class="btn btn-danger btn-md btn-disabled" disabled>危险按钮</button>
+    </div>
+  </div>
+
+  <div class="group">
+    <h2>4. 加载态</h2>
+    <div class="row">
+      <button class="btn btn-primary btn-md is-loading"><span class="spinner"></span><span class="btn-label">提交中</span></button>
+      <button class="btn btn-default btn-md is-loading"><span class="spinner"></span><span class="btn-label">加载中</span></button>
+    </div>
+  </div>
+
+  <div class="group">
+    <h2>5. 带图标（内联 SVG 占位）</h2>
+    <div class="row">
+      <button class="btn btn-primary btn-md"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12h14"/></svg>新建</button>
+      <button class="btn btn-default btn-md"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>导出</button>
+      <button class="btn btn-danger btn-md"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6"/></svg>删除</button>
+    </div>
+  </div>
+</body>
+</html>
@@ -0,0 +1,65 @@
+import React from 'react';
+import './Button.css';
+
+/**
+ * Aurora Admin Button（React）
+ * 对齐 button.json 契约：
+ *  - type: primary | default | text | link | danger
+ *  - size: large | default | small
+ *  - disabled / loading / icon / children
+ */
+const sizeMap = { large: 'btn-lg', default: 'btn-md', small: 'btn-sm' };
+
+export default function Button({
+  type = 'default',
+  size = 'default',
+  disabled = false,
+  loading = false,
+  icon = '',
+  text = '',
+  className = '',
+  children,
+  onClick,
+  ...rest
+}) {
+  const isDisabled = disabled || loading;
+
+  const classes = [
+    'btn',
+    `btn-${type}`,
+    sizeMap[size],
+    isDisabled && !loading ? 'btn-disabled' : '',
+    loading ? 'is-loading' : '',
+    className
+  ].filter(Boolean).join(' ');
+
+  const handleClick = (e) => {
+    if (isDisabled) return;
+    onClick && onClick(e);
+  };
+
+  return (
+    <button className={classes} disabled={isDisabled} onClick={handleClick} {...rest}>
+      {loading && <span className="spinner" aria-hidden="true" />}
+      {!loading && icon && (
+        <svg
+          className="btn-icon"
+          width="16" height="16"
+          viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"
+        >
+          <path d={icon} />
+        </svg>
+      )}
+      <span className="btn-label">{children || text}</span>
+    </button>
+  );
+}
+
+/*
+用法示例：
+import Button from './Button';
+
+<Button type="primary" size="large" onClick={save}>保存</Button>
+<Button type="danger" loading>删除中</Button>
+<Button type="default" icon="M12 5v14M5 12h14">新建</Button>
+*/
@@ -0,0 +1,86 @@
+<template>
+  <button
+    :class="classes"
+    :disabled="disabled || loading"
+    @click="onClick"
+  >
+    <span v-if="loading" class="spinner" aria-hidden="true"></span>
+    <svg
+      v-if="icon && !loading"
+      class="btn-icon"
+      width="16" height="16"
+      viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+    >
+      <path :d="icon" />
+    </svg>
+    <span class="btn-label"><slot>{{ text }}</slot></span>
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'AaButton',
+  props: {
+    type: { type: String, default: 'default', validator: v => ['primary', 'default', 'text', 'link', 'danger'].includes(v) },
+    size: { type: String, default: 'default', validator: v => ['large', 'default', 'small'].includes(v) },
+    disabled: { type: Boolean, default: false },
+    loading: { type: Boolean, default: false },
+    icon: { type: String, default: '' },   // svg path d，例如 "M12 5v14M5 12h14"
+    text: { type: String, default: '' }
+  },
+  computed: {
+    classes() {
+      const sizeMap = { large: 'btn-lg', default: 'btn-md', small: 'btn-sm' };
+      return [
+        'btn',
+        `btn-${this.type}`,
+        sizeMap[this.size],
+        { 'btn-disabled': this.disabled && !this.loading, 'is-loading': this.loading }
+      ];
+    }
+  },
+  methods: {
+    onClick(e) {
+      if (this.disabled || this.loading) return;
+      this.$emit('click', e);
+    }
+  }
+};
+</script>
+
+<!-- 样式对齐 components.css 与 button.json 契约 -->
+<style>
+.btn {
+  display: inline-flex; align-items: center; justify-content: center;
+  gap: 4px; border: 1px solid transparent; cursor: pointer;
+  white-space: nowrap; font-size: 14px; line-height: 22px;
+  border-radius: 4px; min-width: 64px; padding: 0 12px;
+  box-sizing: border-box; transition: background .15s, border-color .15s;
+  font-family: "PingFang SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif;
+}
+.btn:focus-visible { outline: 2px solid rgba(47,84,235,0.2); outline-offset: 2px; }
+.btn-primary { background: #2F54EB; color: #fff; }
+.btn-primary:hover { background: #1D39C4; }
+.btn-primary:active { background: #10239E; }
+.btn-default { background: #fff; border-color: #E8ECF1; color: #262626; }
+.btn-default:hover { border-color: #2F54EB; }
+.btn-text { background: transparent; color: #2F54EB; }
+.btn-text:hover { background: #F0F5FF; }
+.btn-link { background: transparent; border: none; color: #2F54EB; min-width: auto; padding: 0; }
+.btn-link:hover { background: #F0F5FF; }
+.btn-danger { background: #CF1322; color: #fff; }
+.btn-danger:hover { filter: brightness(.92); }
+.btn-lg { height: 40px; }
+.btn-md { height: 32px; }
+.btn-sm { height: 24px; }
+.btn-disabled, .btn:disabled { background: #F5F5F5; border-color: transparent; color: #BFBFBF; cursor: not-allowed; }
+.btn-disabled:hover, .btn:disabled:hover { background: #F5F5F5; filter: none; }
+.btn .btn-icon { flex-shrink: 0; }
+.btn.is-loading { cursor: progress; position: relative; }
+.btn.is-loading .btn-label { opacity: .65; }
+.btn .spinner {
+  width: 14px; height: 14px; border: 2px solid currentColor; border-top-color: transparent;
+  border-radius: 50%; animation: aa-btn-spin .6s linear infinite;
+}
+@keyframes aa-btn-spin { to { transform: rotate(360deg); } }
+</style>
@@ -0,0 +1,87 @@
+<template>
+  <button
+    :class="classes"
+    :disabled="disabled || loading"
+    @click="onClick"
+  >
+    <span v-if="loading" class="spinner" aria-hidden="true"></span>
+    <svg
+      v-else-if="icon"
+      class="btn-icon"
+      width="16" height="16"
+      viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
+    >
+      <path :d="icon" />
+    </svg>
+    <span class="btn-label"><slot>{{ text }}</slot></span>
+  </button>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  type: { type: String, default: 'default' },   // primary | default | text | link | danger
+  size: { type: String, default: 'default' },   // large | default | small
+  disabled: { type: Boolean, default: false },
+  loading: { type: Boolean, default: false },
+  icon: { type: String, default: '' },          // svg path d
+  text: { type: String, default: '' }
+});
+
+const emit = defineEmits(['click']);
+
+const sizeMap = { large: 'btn-lg', default: 'btn-md', small: 'btn-sm' };
+
+const classes = computed(() => [
+  'btn',
+  `btn-${props.type}`,
+  sizeMap[props.size],
+  {
+    'btn-disabled': props.disabled && !props.loading,
+    'is-loading': props.loading
+  }
+]);
+
+function onClick(e) {
+  if (props.disabled || props.loading) return;
+  emit('click', e);
+}
+</script>
+
+<!-- 样式对齐 components.css 与 button.json 契约 -->
+<style scoped>
+.btn {
+  display: inline-flex; align-items: center; justify-content: center;
+  gap: 4px; border: 1px solid transparent; cursor: pointer;
+  white-space: nowrap; font-size: 14px; line-height: 22px;
+  border-radius: 4px; min-width: 64px; padding: 0 12px;
+  box-sizing: border-box; transition: background .15s, border-color .15s;
+  font-family: "PingFang SC", "Source Han Sans SC", "Microsoft YaHei", sans-serif;
+}
+.btn:focus-visible { outline: 2px solid rgba(47,84,235,0.2); outline-offset: 2px; }
+.btn-primary { background: #2F54EB; color: #fff; }
+.btn-primary:hover { background: #1D39C4; }
+.btn-primary:active { background: #10239E; }
+.btn-default { background: #fff; border-color: #E8ECF1; color: #262626; }
+.btn-default:hover { border-color: #2F54EB; }
+.btn-text { background: transparent; color: #2F54EB; }
+.btn-text:hover { background: #F0F5FF; }
+.btn-link { background: transparent; border: none; color: #2F54EB; min-width: auto; padding: 0; }
+.btn-link:hover { background: #F0F5FF; }
+.btn-danger { background: #CF1322; color: #fff; }
+.btn-danger:hover { filter: brightness(.92); }
+.btn-lg { height: 40px; }
+.btn-md { height: 32px; }
+.btn-sm { height: 24px; }
+.btn-disabled, .btn:disabled { background: #F5F5F5; border-color: transparent; color: #BFBFBF; cursor: not-allowed; }
+.btn-disabled:hover, .btn:disabled:hover { background: #F5F5F5; filter: none; }
+.btn .btn-icon { flex-shrink: 0; }
+.btn.is-loading { cursor: progress; position: relative; }
+.btn.is-loading .btn-label { opacity: .65; }
+.btn .spinner {
+  width: 14px; height: 14px; border: 2px solid currentColor; border-top-color: transparent;
+  border-radius: 50%; animation: aa-btn-spin .6s linear infinite;
+}
+@keyframes aa-btn-spin { to { transform: rotate(360deg); } }
+</style>