chore: 模板脚本

.github/ISSUE_TEMPLATE/1-bug-report.yml

@@ -0,0 +1,74 @@
+name: 向 color-gradient-picker-vue3 提交 Bug
+description: 创建一个 Issue 描述你遇到的问题。
+title: "[Bug 上报] 请在此填写标题"
+labels: ["🐞bug: need confirm"]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        在向我们提交 Bug 报告前，请优先使用以下方式尝试解决问题：
+        - 在文档 [docs](https://qiu-jun.github.io/color-gradient-picker-vue3/index.html) 确认使用方法是否正确
+        - 尝试在 [Issue](https://github.com/Qiu-Jun/color-gradient-picker-vue3/issues) 列表中搜索相同问题
+        
+
+  - type: input
+    id: version
+    attributes:
+      label: color-gradient-picker-vue3 版本号
+      description: 你正在使用的组件库版本号
+      placeholder: 例如：0.1.1
+    validations:
+      required: true
+
+  - type: dropdown
+    id: platform
+    attributes:
+      label: 浏览器
+      multiple: true
+      description: 选择对应的平台
+      options:
+        - chrome
+        - 火狐
+        - Edge
+        - 其他
+    validations:
+      required: true
+
+  - type: input
+    id: reproduce
+    attributes:
+      label: 复现Demo地址
+      description: |
+        我们需要你提供一个最小重现demo，以便于我们帮你排查问题。
+    validations:
+      required: true
+
+  - type: textarea
+    id: reproduce-steps
+    attributes:
+      label: 重现步骤
+      description: |
+        请提供一个最简洁清晰的重现步骤，方便我们快速重现问题。
+    validations:
+      required: true
+
+  - type: textarea
+    id: expected
+    attributes:
+      label: 期望的结果是什么？
+    validations:
+      required: true
+
+  - type: textarea
+    id: actually-happening
+    attributes:
+      label: 实际的结果是什么？
+    validations:
+      required: true
+
+  - type: textarea
+    id: extra
+    attributes:
+      label: 其他补充信息
+      description: |
+        根据你的分析，出现这个问题的原因可能在哪里，或者你认为可能产生关联的信息：比如 Vue 版本、vite 版本、Node 版本、采用哪种自动引入方案等，或者进行了哪些配置，使用了哪些插件等信息。

.github/ISSUE_TEMPLATE/2-feature-request.yml

@@ -0,0 +1,29 @@
+name: 向 color-gradient-picker-vue3 提出新功能需求
+description: 创建一个 Issue 描述一下你的功能需求。
+title: "[新功能需求] 请在此填写标题"
+labels: ["feature: need confirm"]
+body:
+  - type: markdown
+    attributes:
+      value: |
+        在提交功能需求前，请注意：
+
+        - 确认这是一个通用功能，并且无法通过现有的 API 或 Slot 实现。
+        - 尝试在 [Issue](https://github.com/Qiu-Jun/color-gradient-picker-vue3/issues)列表中搜索，并且没有发现同样的需求。
+        - 请确保描述清楚你的需求，以便其他开发者更好地理解你的需求。
+
+  - type: textarea
+    id: description
+    attributes:
+      label: 这个功能解决了什么问题？
+      description: 请尽可能详细地说明这个功能的使用场景。
+    validations:
+      required: true
+
+  - type: textarea
+    id: api
+    attributes:
+      label: 你期望的 API 是什么样子的？
+      description: 描述一下这个新功能的 API，并提供一些代码示例。
+    validations:
+      required: true

lib/package.json

@@ -67,6 +67,7 @@
     "vue-tsc": "^1.0.11"
   },
   "dependencies": {
+    "html2canvas": "^1.4.1",
     "lodash-es": "^4.17.21",
     "tinycolor2": "^1.6.0",
     "uuid": "^9.0.1"

lib/src/components/ColorPicker/components/Operation.vue

@@ -35,9 +35,17 @@
           @click="toggleShowAdvancedControl"
         />
       </div> -->
-      <!-- <div class="cpg-controls-item-btn cpg-cursor-pointer">
-        <SvgIcon ext-class="text-14px " icon="guide" />
-      </div> -->
+      <div class="cpg-controls-item-btn cpg-cursor-pointer">
+        <span
+          :class="
+            showInputTypes
+              ? 'text-14px iconfont cpg-xise text-#568cf5'
+              : 'iconfont cpg-xise text-14px'
+          "
+          icon=""
+          @click="handleXise"
+        />
+      </div>
       <div
         class="cpg-controls-item-btn cpg-cursor-pointer"
         :class="{ 'cpg-control-active': showInputTypes }"
@@ -79,6 +87,7 @@ import { debounce } from 'lodash-es'
 import { inputTypes } from '@/constants'
 import { InputType, Modes } from '@/enums'
 import { config } from '@/constants'
+import html2canvas from 'html2canvas'
 import type { IMode } from '@/interfaces'
 
 const { defaultColor, defaultGradient } = config
@@ -94,6 +103,29 @@ const toggleShowInputType = debounce(function () {
 const handleSetInputType = debounce(function (type: InputType) {
   setInputType(type)
   toggleShowInputType()
+}, 180)
+
+// 吸色
+const coverUp = ref(false)
+const handleXise = debounce(function() {
+  // @ts-ignore
+  if (!window?.EyeDropper) {
+    return;
+  }
+  const root = document.getElementById('app')
+  console.log(root, 'xxxxsss')
+  html2canvas(root!).then((canvas: any) => {
+    const blankCanvas = document.createElement('canvas')
+    const ctx = blankCanvas.getContext('2d', { willReadFrequently: true })
+
+    if (root && ctx) {
+      blankCanvas.width = root.offsetWidth * 2
+      blankCanvas.height = root.offsetHeight * 2
+      ctx.drawImage(canvas, 0, 0)
+    }
+
+
+  })
 }, 250)
 
 // toggleShowAdvancedControl

lib/src/styles/iconfont.css

@@ -1,35 +1,40 @@
 @font-face {
-  font-family: 'iconfont'; /* Project id 4773720 */
-  src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAUMAAsAAAAACgwAAAS+AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDQAqGfIYQATYCJAMYCw4ABCAFhGcHUhvOCCMRJmzyG9lfHNjGmsQeqS1qTrf3it/dGanRlpX+SJrnCOLvzdnXrlKjO2v0BYPpYp0CWikBgFipAv+H98wXVTkDaXsCks3J5mKC/o7YvugvIQAatxj+n4VzbmzsC1WStSOPPksuXPr+6Pp7jdP8R2At1e2l1oqfovFQMBSs5XojvDmPqJ8C7AzWIv/XCGDMQxj0IC6FArXr0o4mMIIz+gPExXFdW10KAl4Hr6EGgZKHHiyAvAIB0jM6Cbz4vx//vEIAkBAZjKucVsVWwIPXxh/aMfo/DZDfuH0CuTgBFchAtzBD3NXbbgELYx2MqCyCiwJQzyGAQr/Wry1fiz+0/x++jAnR1mwiKua/PBBQOAwBooEhm1KUQ2k9Or5NI8CXCY0EvixpFPAlppHBf7tOJVVtwMYFiBVA3JOUbnKDIPCgS11NVeMSAhw3EIm09VVVhUJtnX5OvGRiNLWIsZJljJE+1IrZtJQulXKklCHHUtzSEr24uAygVBO9tMQ9fMgs14jZ8HnMw4eR7I0z9Nmb3O3zzLlb0u7Tcw4dJ+arSVSUb38JwpwSqbAnAMbIQt8lVbn7CEEiZYySJDk5wPSCPlH5RacQQrVXg1UolPr9yuNHd+r0aHJyWlYmYhX6SoRZlih27T6uO7+pQOvIZPmsgtGXKuVyHUpGsnoSBZPQ6IobX0XK3mPuc3fpOxL2CH2UO84c6x+QM5JSvX6CXCbrUDJ6EnXOdStEGmxSIi/ZwBUgLH6gNrQqOLgqtPaHhbzhVcG1oT9yE/sDGgp8c318cn0LHlGIQhFK4j8Sy+oTpQqxRHHO2qx4noMk5wQnpwSX5AsuSU6JNKInSwMS+uLje7fF9/XFbaWQh8JJvX3xCa1OsQ6OsRSFxTpSfLLWQWk0tsdnz5iPWwVzm8zMPt1+7LDB/i8WGRb70zObv5SoWqla2Owlsx4lHkZiowccOuN/OH8d/ynpiYAhvUp6oMmTnkLAaXAqf6TQDDfG9UVDdaQqXu18OUqP/Lz87HNZX/lkrKJZV3CLCu+0eRDVmR/rXelb162tJvy48eWfVKdqain1neoxtbUxZfwEJeYq6iejVhtRvmLfWN8Yo3xS3UBd394EgefOTsKJ2YTw++o1lVrBRPHJU9Euyce6bSq1KnOy78VpTvxjyS7R3FPFWjAAgB5sNCcAkA/RSdCH0ZgGs1xsP1YJ0I+dwZC/6HngOvKGUbF6yFcBiQPgvfePwvf24IDz/mJyUHh/SHkBiFtUP62Udbd5kKMp+4CRBIzNHvAfdM08Hkoxh2X+8QrtGBI+Y8gErAiF4gQVyQsagVAYcxZ7fEJbC2CQIgSwt5IAhIaTgFJzEzAaRgg45SEQ9LwBHg1/QUSCqF6OZBcD9IGhBIZefwp66K2lFH/UK9w7Ky4KP8FzIINUF1U2eUEP7mPL/HGNiCXLQ0dn9m7IeaCRhwgthRcZ27K0ZT9S6KFbHBhKYOj1p6CH3rr4kv57V7h3VgwSnjGeAzk61UUFEC6yHuq6kOnzxzUill5meejorFqQzdhAY/m8CC2F7xAZ25LCs6ismF7R3eIBGC+MT2nLFDlK1GgxsGNlgsq7HHoo3hlkCNbeLLfHT3vlsFgAAAA=')
-      format('woff2'),
-    url('iconfont.woff?t=1733577750913') format('woff'),
-    url('iconfont.ttf?t=1733577750913') format('truetype');
+  font-family: "iconfont"; /* Project id 4773720 */
+  src: 
+       url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAWsAAsAAAAACsQAAAVdAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDVgqIEIcCATYCJAMcCxAABCAFhGcHWRthCciOkcvLsvLHyrH6edy095NgCaJt55kYq4jTiQdo50ig1A/SiYY7D3eOTM0oZ8rOHYJsuObYCxojcBjZFF241uJLlzikRiji0e3/j3uVs/wHcD3LdJt72adobFIwVFxjivcqUOY+wDMMVDfvAwgAKVM5rNYYx4ByPeA6oDdCMIxAXYrWC7cNpLoeMUNEpCqxdN8M6A4igN2w2wDwWv7z6B+ykxQAIwoITjJpWueE8/E+3/hwPsED/AXpECC4PgZABAAHkHpkRnSat8+Hl9LUXE6O/Q1hHAA5KQzx7hsfGDc/Wf6NL5Eg3qclDpKInDJsBMDgRIgz++ehIpBcjoRGrdg1FMQ0gIF4XxrAQXwgDYhA3EwDBHiynAYQ+MangKuKk2ysBJAEUA2gBxByszFiiCjNxMoig0GjCL5TShApJKlLVihkMp1+ETM5tGL59s1bkyzOoJ4J7ky2RpLdlvC6XccMk627YtEH0cdznIzVvShgjoYIzzxGBEsP4rfGdGahLeNHZQGU+XFJJhCN8o8f9wg4rRY+Gg3EYv6eGYlQ3s4fi1UJx3fze04ETu3z7z1pnbfrwQhu+0M3hZHT4xdJ/p2kXNgOQKIyf4ZSBM4hEYXs1whFBUIA8sVl++QL7UQixYKSEA5HkhdFtm1ZoZ+vCYT4oJ0UwskR5O+xhFeu2mY4vGrg9cHgdCHsPz/uLPdMMyghyRL2N7QG8+KTWYWz/nOBM/xpi7CZ3xLY5t+6SC3MmCjV/DKhYJCL+JMsqkDqCZNqoSkNjVwvkPf0kKZptSsWtuYc3bai3nT6tLnr2ZQLg/qmPCthnOVNpu/JD9Z/zzQ1vVilDrWgTo9dUn70qLqxUXX0GNBhOnjKXCUlrjLPnxEnm+8q8ZT92Vt2UWHbjLym3NymvBlvE4c4FaeJ/rZZ0TraGjZbwnuj7cOWvTCm0mA0NqSO3Z86xjiaOby8tbBhocm04E3TwoX1bxAn45TLLVhoanjKWDdiZB1DSN1IRoD1IyK9b6zOXX0jN62BB6/27//dqQ8TNlj3Az2JXjcxu/OHOYpBCjpmn/PMnJPZ29z7PJezEhWSFyUfo7dSZ2dKtn7JjT6Gwm7JeMm1mf1r0z5rc1cpCHflUHUS9b3h+9xb/ZIfkXJNy4yTTEX3kPPV3dPrcti8lnk6pezbwXmSHSpm7mFUK1S1C0+tXdIg1J5EtaP6ud5MnjmvLq+293RKlaJKjreDov4oo+yW9pbsj+eeZ7XFsuYdO2tSx26dN4TVsj35H8MZRsnWsak12k3NWlgKACBxMJ7BcYDE8biONwAAvFm4rZB+DB5Xb3wl1uEsSCRiN46+5uvB2Ycz+s1Wlf4mpT76I5/daxmX+xIHM8j5X1MFOPwvtWKGEJVwAwCSPNY/5pNTwv72RzEAZDgA8D12a324PaVOLIf/jVJXA0aiD+CkBmEIghFEKNkgJlUGpFHqDqbodMGhLAOAYZ4BQNR2AEbpBODUrmEIQgxEkjwBMbX/gGRJiuNRhiVH1cvaONZJ2xfQHkdnhytScfmiU1h3d5vNOxSxsF6fB0N0VnpmN2ViO1jvJnbwzXVnc5yLdnk72+l69WJsW1sn3eXtbGEdXHozx3UVZ2S4xt4k3dHZDjW8WDYclhPNbgGah0OnDq4UnWv/vilYbt3a2HiFGIvVy8c8WpyWJV2mAGOSd4h6Hkm1z1xu2TiKutBcWnGndrT69aystjDeidY1vlYLlgMnXfMa0S7FMgjNJZWn71/Z/iDPAEAKnlOSMIQjAomQGEmQFIjNwseKvQOnx9Ymblt0sDav2DlpYzkWz1ZzS9iNo9nmZgEAAAAA') format('woff2'),
+       url('iconfont.woff?t=1739176396764') format('woff'),
+       url('iconfont.ttf?t=1739176396764') format('truetype');
 }
 
 .iconfont {
-  font-family: 'iconfont' !important;
+  font-family: "iconfont" !important;
   font-size: 16px;
   font-style: normal;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
+.cpg-xise:before {
+  content: "\e798";
+}
+
 .cpg-radial:before {
-  content: '\e61b';
+  content: "\e61b";
 }
 
 .cpg-linear:before {
-  content: '\e61c';
+  content: "\e61c";
 }
 
 .cpg-delete:before {
-  content: '\e655';
+  content: "\e655";
 }
 
 .cpg-deg:before {
-  content: '\e621';
+  content: "\e621";
 }
 
 .cpg-exchage:before {
-  content: '\eb73';
+  content: "\eb73";
 }
+