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 · ColorPicker（普通 H5）</title>
+  <link rel="stylesheet" href="../.design_library/aurora-admin/colors_and_type.css" />
+  <link rel="stylesheet" href="ColorPicker.css" />
+  <style>body{margin:0;padding:24px;background: var(--au-color-page-bg);} .aa-panel{background: var(--au-color-card-bg);border: 1px solid var(--au-color-border);border-radius:8px;padding:16px;width:240px;}</style>
+</head>
+<body>
+  <div class="aa-panel">
+    <div class="aa-colorpicker" role="group" id="app"></div>
+  </div>
+
+  <script>
+    var PRESETS = ['#2F54EB','#1D39C4','#10239E','#CF1322','#8C5A00','#2E7D0A','#13C2C2','#722ED1',
+                   '#EB2F96','#8C5A00','#A0D911','#1890FF','#2F54EB','#000000','#595959','#6E6E6E'];
+    var state = { hex: '#2F54EB', alpha: 1 };
+
+    function rgba(hex, a) {
+      var n = parseInt(hex.slice(1), 16);
+      return 'rgba(' + ((n>>16)&255) + ',' + ((n>>8)&255) + ',' + (n&255) + ',' + a + ')';
+    }
+    function render() {
+      var root = document.getElementById('app');
+      var swatches = PRESETS.map(function (c) {
+        return '<div class="aa-colorpicker-swatch ' + (c.toLowerCase() === state.hex.toLowerCase() ? 'is-active' : '') + '" role="group" style="background:' + c + '" data-hex="' + c + '"></div>';
+      }).join('');
+      root.innerHTML =
+        '<div class="aa-colorpicker-presets" role="group">' + swatches + '</div>' +
+        '<div class="aa-colorpicker-row" role="group">' +
+          '<div class="aa-colorpicker-preview" role="group" style="background:' + rgba(state.hex, state.alpha) + '"></div>' +
+          '<input type="color" class="aa-colorpicker-native" role="group" id="native" value="' + state.hex + '" />' +
+          '<input class="aa-colorpicker-hex" role="group" id="hex" value="' + state.hex.toUpperCase() + '" maxlength="7" />' +
+        '</div>' +
+        '<div class="aa-colorpicker-alpha" role="group">透明度' +
+          '<input type="range" id="alpha" min="0" max="100" value="' + Math.round(state.alpha*100) + '" />' +
+          '<span id="alval">' + Math.round(state.alpha*100) + '%</span>' +
+        '</div>';
+
+      root.querySelectorAll('.aa-colorpicker-swatch').forEach(function (el) {
+        el.addEventListener('click', function () { state.hex = el.dataset.hex; render(); });
+      });
+      document.getElementById('native').addEventListener('input', function (e) { state.hex = e.target.value; render(); });
+      document.getElementById('hex').addEventListener('input', function (e) {
+        var v = e.target.value;
+        if (/^#[0-9a-fA-F]{6}$/.test(v)) { state.hex = v; document.getElementById('app').querySelector('.aa-colorpicker-preview').style.background = rgba(state.hex, state.alpha); }
+      });
+      document.getElementById('alpha').addEventListener('input', function (e) {
+        state.alpha = e.target.value / 100;
+        document.getElementById('alval').textContent = e.target.value + '%';
+        document.getElementById('app').querySelector('.aa-colorpicker-preview').style.background = rgba(state.hex, state.alpha);
+      });
+    }
+    render();
+  </script>
+</body>
+</html>
@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+import './ColorPicker.css';
+
+const DEFAULT_PRESETS = ['#2F54EB','#1D39C4','#10239E','#CF1322','#8C5A00','#2E7D0A','#13C2C2','#722ED1',
+  '#EB2F96','#8C5A00','#A0D911','#1890FF','#000000','#595959','#6E6E6E','#BFBFBF'];
+
+export default function ColorPicker({ value = '#2F54EB', presets = DEFAULT_PRESETS, onChange }) {
+  const [hex, setHex] = useState(value);
+  const [alpha, setAlpha] = useState(1);
+
+  const n = parseInt(hex.slice(1), 16);
+  const preview = `rgba(${(n >> 16) & 255},${(n >> 8) & 255},${n & 255},${alpha})`;
+
+  function emit(nextHex, nextAlpha) {
+    onChange && onChange({ hex: nextHex, alpha: nextAlpha });
+  }
+  function onHexInput(e) {
+    const v = e.target.value;
+    if (/^#[0-9a-fA-F]{6}$/.test(v)) { setHex(v); emit(v, alpha); }
+  }
+
+  return (
+    <div className="aa-colorpicker">
+      <div className="aa-colorpicker-presets">
+        {presets.map((c, i) => (
+          <div
+            key={i}
+            className={'aa-colorpicker-swatch' + (c.toLowerCase() === hex.toLowerCase() ? ' is-active' : '')}
+            style={{ background: c }}
+            onClick={() => { setHex(c); emit(c, alpha); }}
+          />
+        ))}
+      </div>
+      <div className="aa-colorpicker-row">
+        <div className="aa-colorpicker-preview" style={{ background: preview }} />
+        <input type="color" className="aa-colorpicker-native" value={hex} onChange={e => { setHex(e.target.value); emit(e.target.value, alpha); }} />
+        <input className="aa-colorpicker-hex" value={hex.toUpperCase()} maxLength={7} onChange={onHexInput} />
+      </div>
+      <div className="aa-colorpicker-alpha">
+        透明度
+        <input type="range" min="0" max="100" value={Math.round(alpha * 100)} onChange={e => { setAlpha(e.target.value / 100); emit(hex, e.target.value / 100); }} />
+        <span>{Math.round(alpha * 100)}%</span>
+      </div>
+    </div>
+  );
+}
@@ -0,0 +1,53 @@
+<template>
+  <div class="aa-colorpicker">
+    <div class="aa-colorpicker-presets">
+      <div v-for="(c, i) in presets" :key="i" class="aa-colorpicker-swatch"
+           :class="{ 'is-active': c.toLowerCase() === hex.toLowerCase() }"
+           :style="{ background: c }" @click="setHex(c)"></div>
+    </div>
+    <div class="aa-colorpicker-row">
+      <div class="aa-colorpicker-preview" :style="{ background: preview }"></div>
+      <input type="color" class="aa-colorpicker-native" :value="hex" @input="setHex($event.target.value)" />
+      <input class="aa-colorpicker-hex" :value="hex.toUpperCase()" maxlength="7" @input="onHexInput" />
+    </div>
+    <div class="aa-colorpicker-alpha">
+      透明度
+      <input type="range" min="0" max="100" :value="Math.round(alpha * 100)" @input="setAlpha($event.target.value / 100)" />
+      <span>{{ Math.round(alpha * 100) }}%</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AaColorPicker',
+  props: {
+    value: { type: String, default: '#2F54EB' },
+    presets: {
+      type: Array,
+      default: function () {
+        return ['#2F54EB','#1D39C4','#10239E','#CF1322','#8C5A00','#2E7D0A','#13C2C2','#722ED1',
+                '#EB2F96','#8C5A00','#A0D911','#1890FF','#000000','#595959','#6E6E6E','#BFBFBF'];
+      }
+    }
+  },
+  data: function () { return { hex: this.value, alpha: 1 }; },
+  computed: {
+    preview: function () {
+      var n = parseInt(this.hex.slice(1), 16);
+      return 'rgba(' + ((n >> 16) & 255) + ',' + ((n >> 8) & 255) + ',' + (n & 255) + ',' + this.alpha + ')';
+    }
+  },
+  methods: {
+    setHex: function (v) { this.hex = v; this.emit(); },
+    onHexInput: function (e) {
+      var v = e.target.value;
+      if (/^#[0-9a-fA-F]{6}$/.test(v)) { this.hex = v; this.emit(); }
+    },
+    setAlpha: function (a) { this.alpha = a; this.emit(); },
+    emit: function () { this.$emit('change', { hex: this.hex, alpha: this.alpha }); }
+  }
+};
+</script>
+
+<style src="./ColorPicker.css"></style>
@@ -0,0 +1,47 @@
+<template>
+  <div class="aa-colorpicker">
+    <div class="aa-colorpicker-presets">
+      <div v-for="(c, i) in presets" :key="i" class="aa-colorpicker-swatch"
+           :class="{ 'is-active': c.toLowerCase() === hex.toLowerCase() }"
+           :style="{ background: c }" @click="setHex(c)"></div>
+    </div>
+    <div class="aa-colorpicker-row">
+      <div class="aa-colorpicker-preview" :style="{ background: preview }"></div>
+      <input type="color" class="aa-colorpicker-native" :value="hex" @input="setHex($event.target.value)" />
+      <input class="aa-colorpicker-hex" :value="hex.toUpperCase()" maxlength="7" @input="onHexInput" />
+    </div>
+    <div class="aa-colorpicker-alpha">
+      透明度
+      <input type="range" min="0" max="100" :value="Math.round(alpha * 100)" @input="setAlpha($event.target.value / 100)" />
+      <span>{{ Math.round(alpha * 100) }}%</span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+const props = defineProps({
+  value: { type: String, default: '#2F54EB' },
+  presets: {
+    type: Array,
+    default: () => ['#2F54EB','#1D39C4','#10239E','#CF1322','#8C5A00','#2E7D0A','#13C2C2','#722ED1',
+                   '#EB2F96','#8C5A00','#A0D911','#1890FF','#000000','#595959','#6E6E6E','#BFBFBF']
+  }
+});
+const emit = defineEmits(['change']);
+const hex = ref(props.value);
+const alpha = ref(1);
+const preview = computed(() => {
+  const n = parseInt(hex.value.slice(1), 16);
+  return `rgba(${(n >> 16) & 255},${(n >> 8) & 255},${n & 255},${alpha.value})`;
+});
+function setHex(v) { hex.value = v; emitChange(); }
+function onHexInput(e) {
+  const v = e.target.value;
+  if (/^#[0-9a-fA-F]{6}$/.test(v)) { hex.value = v; emitChange(); }
+}
+function setAlpha(a) { alpha.value = a; emitChange(); }
+function emitChange() { emit('change', { hex: hex.value, alpha: alpha.value }); }
+</script>
+
+<style src="./ColorPicker.css"></style>