Aurora Admin v1.2.0: 79 components x 5 ends, doc site, contracts batch 1, playground, regression, deploy ready

frameworks/Watermark.vue3.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="aa-watermark" :class="{ 'is-fullscreen': fullscreen }" :style="{ backgroundImage: bg }"></div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+const props = defineProps({
+  text: { type: String, default: 'Aurora Admin' },
+  color: { type: String, default: 'rgba(0,0,0,0.10)' },
+  fontSize: { type: Number, default: 14 },
+  rotate: { type: Number, default: -22 },
+  gap: { type: Number, default: 160 },
+  fullscreen: { type: Boolean, default: false }
+});
+
+const bg = computed(() => {
+  const svg = "<svg xmlns='http://www.w3.org/2000/svg' width='" + props.gap + "' height='" + props.gap + "'>" +
+    "<text x='0' y='" + (props.fontSize + 6) + "' font-family='sans-serif' font-size='" + props.fontSize +
+    "' fill='" + props.color + "' transform='rotate(" + props.rotate + " 0 " + (props.fontSize + 6) + ")'> " + props.text + " </text></svg>";
+  return "url(\"data:image/svg+xml;utf8," + encodeURIComponent(svg) + "\")";
+});
+</script>
+
+<style src="./Watermark.css"></style>