From 018815a82642d43c2075de5162e12ea3cf6ff543 Mon Sep 17 00:00:00 2001
From: tyh666999 <1469442737@qq.com>
Date: Thu, 21 Sep 2023 17:32:14 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=20hooks?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/fighting-design/_hooks/index.ts      |  1 +
 .../_hooks/use-watermark/index.ts             | 39 +++++++++++++++++++
 start/src/App.vue                             | 17 +++++++-
 3 files changed, 55 insertions(+), 2 deletions(-)
 create mode 100644 packages/fighting-design/_hooks/use-watermark/index.ts

diff --git a/packages/fighting-design/_hooks/index.ts b/packages/fighting-design/_hooks/index.ts
index 3159cb2381..02571c6528 100644
--- a/packages/fighting-design/_hooks/index.ts
+++ b/packages/fighting-design/_hooks/index.ts
@@ -26,3 +26,4 @@ export * from './use-form-check'
 export * from './use-transition'
 export * from './use-collapse-animation'
 export * from './use-confirm-box'
+export * from './use-watermark'
diff --git a/packages/fighting-design/_hooks/use-watermark/index.ts b/packages/fighting-design/_hooks/use-watermark/index.ts
new file mode 100644
index 0000000000..ab6500caf3
--- /dev/null
+++ b/packages/fighting-design/_hooks/use-watermark/index.ts
@@ -0,0 +1,39 @@
+import { computed } from 'vue'
+
+export const useWatermark = (prop) => {
+  return computed(() => {
+    /**
+    * 创建一个 canvas
+    *
+    * @see Canvas https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API
+    */
+    const canvas: HTMLCanvasElement = document.createElement('canvas')
+
+    /**
+    * 设备像素比率
+    *
+    * @see Window.devicePixelRatio https://developer.mozilla.org/zh-CN/docs/Web/API/Window/devicePixelRatio
+    */
+    const devicePixeRatio: number = window.devicePixelRatio || 1
+
+    /** 文字大小 */
+    const fontSize: number = prop.fontSize * devicePixeRatio
+
+    const font: string = fontSize + 'px serif'
+    /**
+     * 新建一个二维渲染上下文
+     *
+     * @see HTMLCanvasElement.getContext() https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/getContext
+     * @see CanvasRenderingContext2D https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D
+     */
+    const ctx = canvas.getContext('2d') as CanvasRenderingContext2D
+
+    ctx.font = font
+
+    const { width } = ctx.measureText(prop.text)
+
+    // const cavasSize = Math.
+
+    return {}
+  })
+}
diff --git a/start/src/App.vue b/start/src/App.vue
index 1c772edac4..d2261e5d20 100644
--- a/start/src/App.vue
+++ b/start/src/App.vue
@@ -1,3 +1,16 @@
-<script lang="ts" setup></script>
+<template>
+  <f-watermark content="机密文件" :height="100" :width="130">
+  </f-watermark>
+</template>
 
-<template></template>
+<style scoped>
+  .f-watermark {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 500px;
+  }
+  .f-card {
+    width: 240px;
+  }
+</style>