Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin

playground/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vben/playground",
-  "version": "5.4.6",
+  "version": "5.4.7",
   "homepage": "https://vben.pro",
   "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
   "repository": {

playground/src/views/demos/features/watermark/index.vue

@@ -4,7 +4,12 @@ import { useWatermark } from '@vben/hooks';
 
 import { Button, Card } from 'ant-design-vue';
 
-const { destroyWatermark, updateWatermark } = useWatermark();
+const { destroyWatermark, updateWatermark, watermark } = useWatermark();
+
+async function recreateWaterMark() {
+  destroyWatermark();
+  await updateWatermark({});
+}
 
 async function createWaterMark() {
   await updateWatermark({
@@ -21,7 +26,7 @@ async function createWaterMark() {
       ],
       type: 'linear',
     },
-    content: 'hello my watermark',
+    content: `hello my watermark\n${new Date().toLocaleString()}`,
     globalAlpha: 0.5,
     gridLayoutOptions: {
       cols: 2,
@@ -57,10 +62,25 @@ async function createWaterMark() {
     </template>
 
     <Card title="使用">
-      <Button class="mr-2" type="primary" @click="createWaterMark()">
+      <Button
+        :disabled="!!watermark"
+        class="mr-2"
+        type="primary"
+        @click="recreateWaterMark"
+      >
         创建水印
       </Button>
-      <Button danger @click="destroyWatermark">移除水印</Button>
+      <Button
+        :disabled="!watermark"
+        class="mr-2"
+        type="primary"
+        @click="createWaterMark"
+      >
+        更新水印
+      </Button>
+      <Button :disabled="!watermark" danger @click="destroyWatermark">
+        移除水印
+      </Button>
     </Card>
   </Page>
 </template>

playground/src/views/examples/resize/basic.vue

@@ -3,42 +3,56 @@ import { ref } from 'vue';
 
 import { Page, VResize } from '@vben/common-ui';
 
-const width = ref(200);
-const height = ref(200);
-const top = ref(200);
-const left = ref(200);
+const colorMap = ['red', 'green', 'yellow', 'gray'];
 
-const resize = (newRect: {
+type TSize = {
   height: number;
   left: number;
   top: number;
   width: number;
-}) => {
-  width.value = newRect.width;
-  height.value = newRect.height;
-  top.value = newRect.top;
-  left.value = newRect.left;
+};
+
+const sizeList = ref<TSize[]>([
+  { height: 200, left: 200, top: 200, width: 200 },
+  { height: 300, left: 300, top: 300, width: 300 },
+  { height: 400, left: 400, top: 400, width: 400 },
+  { height: 500, left: 500, top: 500, width: 500 },
+]);
+
+const resize = (size?: TSize, rect?: TSize) => {
+  if (!size || !rect) return;
+
+  size.height = rect.height;
+  size.left = rect.left;
+  size.top = rect.top;
+  size.width = rect.width;
 };
 </script>
 
 <template>
   <Page description="Resize组件基础示例" title="Resize组件">
     <div class="m-4 bg-blue-500 p-48 text-xl">
-      {{
-        `width: ${width}px, height: ${height}px, top: ${top}px, left: ${left}px`
-      }}
+      <div v-for="size in sizeList" :key="size.width">
+        {{
+          `width: ${size.width}px, height: ${size.height}px, top: ${size.top}px, left: ${size.left}px`
+        }}
+      </div>
     </div>
 
-    <VResize
-      :h="200"
-      :is-active="true"
-      :w="200"
-      :x="200"
-      :y="200"
-      @dragging="resize"
-      @resizing="resize"
-    >
-      <div class="h-full w-full bg-red-500"></div>
-    </VResize>
+    <template v-for="(_, idx) of 4" :key="idx">
+      <VResize
+        :h="100 * (idx + 1)"
+        :w="100 * (idx + 1)"
+        :x="100 * (idx + 1)"
+        :y="100 * (idx + 1)"
+        @dragging="(rect) => resize(sizeList[idx], rect)"
+        @resizing="(rect) => resize(sizeList[idx], rect)"
+      >
+        <div
+          :style="{ backgroundColor: colorMap[idx] }"
+          class="h-full w-full"
+        ></div>
+      </VResize>
+    </template>
   </Page>
 </template>