feat: add reize components & demo (#4862)

* feat: resize component

* chore: change positon of resize components

* feat: add resize demo

* chore: resize demo completed

* chore: fix display number

* chore: add infer comment

* fix: move reszie demo to examples

* fix: fix icon & removed scss

playground/src/locales/langs/zh-CN/examples.json

@@ -9,6 +9,9 @@
   "ellipsis": {
     "title": "文本省略"
   },
+  "resize": {
+    "title": "拖动调整"
+  },
   "form": {
     "title": "表单",
     "basic": "基础表单",

playground/src/router/routes/modules/examples.ts

@@ -228,6 +228,15 @@ const routes: RouteRecordRaw[] = [
           title: $t('examples.ellipsis.title'),
         },
       },
+      {
+        name: 'VueResizeDemo',
+        path: '/demos/resize/basic',
+        component: () => import('#/views/examples/resize/basic.vue'),
+        meta: {
+          icon: 'material-symbols:resize',
+          title: $t('examples.resize.title'),
+        },
+      },
     ],
   },
 ];

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

@@ -0,0 +1,44 @@
+<script lang="ts" setup>
+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 resize = (newRect: {
+  height: number;
+  left: number;
+  top: number;
+  width: number;
+}) => {
+  width.value = newRect.width;
+  height.value = newRect.height;
+  top.value = newRect.top;
+  left.value = newRect.left;
+};
+</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>
+
+    <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>
+  </Page>
+</template>