增加 vue hooks plus 插件示例

package.json

@@ -56,6 +56,7 @@
     "vue": "^3.4.21",
     "vue-currency-input": "^3.1.0",
     "vue-esign": "^1.1.4",
+    "vue-hooks-plus": "^1.8.9",
     "vue-m-message": "^4.0.2",
     "vue-router": "^4.3.0",
     "vue3-count-to": "^1.1.2",

pnpm-lock.yaml

@@ -119,6 +119,9 @@ dependencies:
   vue-esign:
     specifier: ^1.1.4
     version: 1.1.4
+  vue-hooks-plus:
+    specifier: ^1.8.9
+    version: 1.8.9(vue@3.4.21)
   vue-m-message:
     specifier: ^4.0.2
     version: 4.0.2
@@ -3459,6 +3462,10 @@ packages:
       rxjs: 7.8.1
     dev: true
 
+  /@types/js-cookie@3.0.6:
+    resolution: {integrity: sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ==}
+    dev: false
+
   /@types/json-schema@7.0.15:
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
     dev: true
@@ -5664,6 +5671,11 @@ packages:
     engines: {node: '>=0.10'}
     dev: true
 
+  /decode-uri-component@0.2.2:
+    resolution: {integrity: sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==}
+    engines: {node: '>=0.10'}
+    dev: false
+
   /deep-equal@1.1.1:
     resolution: {integrity: sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==}
     dependencies:
@@ -6978,6 +6990,11 @@ packages:
       to-regex-range: 5.0.1
     dev: true
 
+  /filter-obj@1.1.0:
+    resolution: {integrity: sha512-8rXg1ZnX7xzy2NGDVkBVaAy+lSlPNwad13BtgSlLuxfIslyt5Vg64U7tFcCt4WS1R0hvtnQybT/IyCkGZ3DpXQ==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
   /find-up@4.1.0:
     resolution: {integrity: sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==}
     engines: {node: '>=8'}
@@ -8338,6 +8355,11 @@ packages:
     resolution: {integrity: sha512-pZe//GGmwJndub7ZghVHz7vjb2LgC1m8B07Au3eYqeqv9emhESByMXxaEgkUkEqJe87oBbSniGYoQNIBklc7IQ==}
     dev: true
 
+  /js-cookie@3.0.5:
+    resolution: {integrity: sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==}
+    engines: {node: '>=14'}
+    dev: false
+
   /js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
     dev: true
@@ -10325,6 +10347,16 @@ packages:
       strict-uri-encode: 1.1.0
     dev: true
 
+  /query-string@7.1.3:
+    resolution: {integrity: sha512-hh2WYhq4fi8+b+/2Kg9CEge4fDPvHS534aOOvOZeQ3+Vf2mCFsaFBYj0i+iXcAq6I9Vzp5fjMFBlONvayDC1qg==}
+    engines: {node: '>=6'}
+    dependencies:
+      decode-uri-component: 0.2.2
+      filter-obj: 1.1.0
+      split-on-first: 1.1.0
+      strict-uri-encode: 2.0.0
+    dev: false
+
   /queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
     dev: true
@@ -10785,6 +10817,11 @@ packages:
       source-map-js: 1.0.2
     dev: true
 
+  /screenfull@5.2.0:
+    resolution: {integrity: sha512-9BakfsO2aUQN2K9Fdbj87RJIEZ82Q9IGim7FqM5OsebfoFC6ZHXgDq/KvniuLTPdeM8wY2o6Dj3WQ7KeQCj3cA==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
   /scule@1.3.0:
     resolution: {integrity: sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==}
 
@@ -11173,6 +11210,11 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /split-on-first@1.1.0:
+    resolution: {integrity: sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==}
+    engines: {node: '>=6'}
+    dev: false
+
   /split-string@3.1.0:
     resolution: {integrity: sha512-NzNVhJDYpwceVVii8/Hu6DKfD2G+NrQHlS/V/qgv763EYudVwEcMQNxd2lh+0VrUByXN/oJkl5grOhYWvQUYiw==}
     engines: {node: '>=0.10.0'}
@@ -11232,6 +11274,11 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
+  /strict-uri-encode@2.0.0:
+    resolution: {integrity: sha512-QwiXZgpRcKkhTj2Scnn++4PKtWsH0kpzZ62L2R6c/LUVYv7hVnZqcg2+sMuT6R7Jusu1vviK/MFsu6kNJfWlEQ==}
+    engines: {node: '>=4'}
+    dev: false
+
   /string-argv@0.3.2:
     resolution: {integrity: sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==}
     engines: {node: '>=0.6.19'}
@@ -12688,6 +12735,21 @@ packages:
       - supports-color
     dev: true
 
+  /vue-hooks-plus@1.8.9(vue@3.4.21):
+    resolution: {integrity: sha512-XscyVXQOqe3V5YTQa7E7w1WXOBZMp85dJ9js2H0RJ9ktatmeABQYxqBqsDSCpETBz+OoNXQxamFggTccwsK+jg==}
+    peerDependencies:
+      vue: ^3.2.25
+    dependencies:
+      '@types/js-cookie': 3.0.6
+      '@vue/devtools-api': 6.6.1
+      js-cookie: 3.0.5
+      lodash: 4.17.21
+      qs: 6.12.0
+      query-string: 7.1.3
+      screenfull: 5.2.0
+      vue: 3.4.21(typescript@5.4.3)
+    dev: false
+
   /vue-m-message@4.0.2:
     resolution: {integrity: sha512-6rTKtIzj2vXyyY6YIcSHDmJNz4R1HuxATgr8gf0c+DjcknwCkmfBggKNDIgshnCyqgL70TWsVrgcqQzl4xsYfQ==}
     dev: false

src/router/modules/plugin.example.ts

@@ -14,6 +14,15 @@ const routes: RouteRecordRaw = {
     icon: 'i-clarity:plugin-outline-alerted',
   },
   children: [
+    {
+      path: 'hooksplus',
+      name: 'pluginExampleHooksPlus',
+      component: () => import('@/views/plugin_example/hooks.plus.vue'),
+      meta: {
+        title: 'VueHooks Plus',
+        icon: 'https://inhiblabcore.github.io/docs/hooks/logo.svg',
+      },
+    },
     {
       path: 'qrcode',
       name: 'pluginExampleQrcode',

src/views/plugin_example/hooks.plus.vue

@@ -0,0 +1,78 @@
+<route lang="yaml">
+meta:
+  enabled: false
+</route>
+
+<script lang="ts" setup>
+import { useRequest } from 'vue-hooks-plus'
+import Alert from './components/alert.vue'
+
+function getUsername(): Promise<string> {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(String(Date.now()))
+    }, 1000)
+  })
+}
+
+const time = ref(900)
+
+const computedTime = computed(() => time.value + 100)
+
+const { data, run, loading, cancel } = useRequest(() => getUsername(), {
+  manual: true,
+  pollingInterval: computedTime,
+  pollingWhenHidden: false,
+})
+
+function start() {
+  run()
+}
+
+function update() {
+  time.value += 100
+}
+
+function open(url: string) {
+  window.open(url, '_blank')
+}
+</script>
+
+<template>
+  <div>
+    <Alert />
+    <PageHeader title="VueHooks Plus">
+      <template #content>
+        <p>提供基础和高级的 hook ，高性能逻辑的抽象封装，满足大量场景，更多 API 和例子请查看 VueHooks Plus 官网。</p>
+        <p style="margin-bottom: 0;">
+          安装命令：<ElTag>pnpm add vue-hooks-plus</ElTag>
+        </p>
+      </template>
+      <ElButton @click="open('https://github.com/InhiblabCore/vue-hooks-plus')">
+        <template #icon>
+          <SvgIcon name="i-ep:link" />
+        </template>
+        访问 VueHooks Plus
+      </ElButton>
+    </PageHeader>
+    <PageMain title="轮询">
+      <div class="mb-4">
+        Data：<span>{{ loading ? 'loading' : data }}</span>
+      </div>
+      <div class="mb-4">
+        PollingInterval：{{ computedTime }}ms
+      </div>
+      <div>
+        <el-button @click="start()">
+          Start
+        </el-button>
+        <el-button @click="update()">
+          time + 100ms
+        </el-button>
+        <el-button @click="cancel()">
+          Stop
+        </el-button>
+      </div>
+    </PageMain>
+  </div>
+</template>