feat: print and perf style

src/views/able/watermark.vue

@@ -1,13 +1,34 @@
 <script setup lang="ts">
+import { ref } from "vue";
 import { useWatermark } from "/@/utils/watermark";
+
+let color = ref("#409EFF");
+let value = ref("vue-pure-admin");
 const { setWatermark, clear } = useWatermark();
 </script>
 
 <template>
-  <div>
-    <el-button @click="setWatermark('vue-pure-admin')">创建</el-button>
+  <el-card>
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">页面水印功能</span>
+      </div>
+    </template>
+    <span>请输入要创建水印的值：</span
+    ><el-input
+      class="mb-4 mr-4"
+      style="width: 200px"
+      v-model="value"
+      clearable
+    ></el-input>
+    <span>请选择要创建水印的颜色：</span
+    ><el-color-picker v-model="color" show-alpha />
+    <br />
+    <el-button @click="setWatermark(value, { fillStyle: color })"
+      >创建</el-button
+    >
     <el-button @click="clear">清除</el-button>
-  </div>
+  </el-card>
 </template>
 
 <style scoped></style>