From bfdde738d060c50f30a41595ffd6dfcd24abc3d4 Mon Sep 17 00:00:00 2001
From: jlzhou <12020042@qq.com>
Date: Mon, 24 Feb 2025 15:42:41 +0800
Subject: [PATCH] =?UTF-8?q?update=20=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 bi-ui/env/.env                                |   6 +-
 bi-ui/package.json                            |  11 +-
 bi-ui/pnpm-lock.yaml                          |  70 +++--
 bi-ui/src/assets/css/main.scss                |  37 ++-
 bi-ui/src/components/global/WCode.vue         | 228 ++++++++++++++++
 bi-ui/src/components/global/WEffectLight.vue  |  50 ++++
 bi-ui/src/components/global/WEffectNoise.vue  |  82 ++++++
 .../src/components/global/WEffectNoiseBg.vue  |  63 +++++
 bi-ui/src/components/global/WFullscreen.vue   |   2 +-
 bi-ui/src/pages/test.vue                      |   1 +
 bi-ui/src/pages/test/FlyingLine.vue           |   2 +
 bi-ui/src/pages/test/components.vue           | 252 ++++++++++++++++++
 bi-ui/src/pages/test/icon.vue                 |   4 +
 bi-ui/vite.config.mjs                         |   8 +-
 14 files changed, 776 insertions(+), 40 deletions(-)
 create mode 100644 bi-ui/src/components/global/WCode.vue
 create mode 100644 bi-ui/src/components/global/WEffectLight.vue
 create mode 100644 bi-ui/src/components/global/WEffectNoise.vue
 create mode 100644 bi-ui/src/components/global/WEffectNoiseBg.vue
 create mode 100644 bi-ui/src/pages/test/components.vue

diff --git a/bi-ui/env/.env b/bi-ui/env/.env
index 3995f5d..56ff2b4 100644
--- a/bi-ui/env/.env
+++ b/bi-ui/env/.env
@@ -1,5 +1,5 @@
 VITE_BASE_API='/api'
-VITE_APP_NAME='测试数据展示大屏'
+VITE_APP_NAME='智慧能源综合管控平台'
 VITE_APP_CONTEXT_PATH="/bi/"
-VITE_DEFAULT_USER="admin"
-VITE_DEFAULT_PASSWORD="Vy6uPKcsHe3GupRpXZA8tzV9/EDbzkJ8wl6TS0q88POF1jQbm1NLMxU9dYzxva0tWQx7JKOGNOkaAOdFqay5t/aXx2qVaIGCBTb9vuKnJbtxMRZZso5IgEpHbR945Vk65BQyrOopDdNdPEm8nqJGcG6hJUiZbaRcgDCcAC7Q9nY="
\ No newline at end of file
+VITE_DEFAULT_USER="bi"
+VITE_DEFAULT_PASSWORD="w8N9m8qQ+Z+skmrpPDl11TyJGTLX9hdwiA8DaeGxrS5peXwzcIwLiUUyzGJKUy/+BGZaSF40Y7fzUpjkAHvhwF9a7uZyzZlOhO+XSUUTgyj7bFNQCaYXFqb+ZAFpBWczopm95i/krFDfgiS4AmRv2Bb0wkegV5z071EjiCfOuPA="
\ No newline at end of file
diff --git a/bi-ui/package.json b/bi-ui/package.json
index 2f9d9b2..a25a796 100644
--- a/bi-ui/package.json
+++ b/bi-ui/package.json
@@ -13,17 +13,20 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@microsoft/fetch-event-source": "2.0.1",
     "@element-plus/icons-vue": "2.3.1",
+    "@microsoft/fetch-event-source": "2.0.1",
+    "@vueuse/components": "^12.7.0",
+    "@vueuse/core": "^12.7.0",
     "axios": "0.27.2",
+    "crypto-js": "4.2.0",
     "echarts": "5.4.2",
     "element-plus": "2.9.2",
-    "crypto-js": "4.2.0",
-    "jsencrypt": "^3.3.2",
     "file-saver": "2.0.5",
+    "highlight.js": "^11.11.1",
+    "jsencrypt": "^3.3.2",
+    "mescroll.js": "1.4.2",
     "mitt": "3.0.1",
     "normalize.css": "^8.0.1",
-    "mescroll.js": "1.4.2",
     "nprogress": "^0.2.0",
     "pinia": "2.0.22",
     "pinia-plugin-persist": "1.0.0",
diff --git a/bi-ui/pnpm-lock.yaml b/bi-ui/pnpm-lock.yaml
index 8a641ca..8c75685 100644
--- a/bi-ui/pnpm-lock.yaml
+++ b/bi-ui/pnpm-lock.yaml
@@ -14,6 +14,12 @@ importers:
       '@microsoft/fetch-event-source':
         specifier: 2.0.1
         version: 2.0.1
+      '@vueuse/components':
+        specifier: ^12.7.0
+        version: 12.7.0
+      '@vueuse/core':
+        specifier: ^12.7.0
+        version: 12.7.0
       axios:
         specifier: 0.27.2
         version: 0.27.2
@@ -29,6 +35,9 @@ importers:
       file-saver:
         specifier: 2.0.5
         version: 2.0.5
+      highlight.js:
+        specifier: ^11.11.1
+        version: 11.11.1
       jsencrypt:
         specifier: ^3.3.2
         version: 3.3.2
@@ -80,7 +89,7 @@ importers:
         version: 1.84.0
       unplugin-auto-import:
         specifier: 0.11.4
-        version: 0.11.4(@vueuse/core@11.2.0(vue@3.5.13))(rollup@4.34.4)
+        version: 0.11.4(@vueuse/core@12.7.0)(rollup@4.34.4)
       vite:
         specifier: 5.4.11
         version: 5.4.11(@types/node@20.14.2)(sass@1.84.0)(terser@5.31.1)
@@ -615,20 +624,23 @@ packages:
   '@vue/shared@3.5.13':
     resolution: {integrity: sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==}
 
-  '@vueuse/core@11.2.0':
-    resolution: {integrity: sha512-JIUwRcOqOWzcdu1dGlfW04kaJhW3EXnnjJJfLTtddJanymTL7lF1C0+dVVZ/siLfc73mWn+cGP1PE1PKPruRSA==}
+  '@vueuse/components@12.7.0':
+    resolution: {integrity: sha512-LbaKPOx9sTPRxI8ymJt3VCm2CifmC432yaXxCGbjkuKIh2jyNlXvE7sGrLm7kbC7WkBJnUXzm3K/cI1pIE8ueQ==}
+
+  '@vueuse/core@12.7.0':
+    resolution: {integrity: sha512-jtK5B7YjZXmkGNHjviyGO4s3ZtEhbzSgrbX+s5o+Lr8i2nYqNyHuPVOeTdM1/hZ5Tkxg/KktAuAVDDiHMraMVA==}
 
   '@vueuse/core@9.13.0':
     resolution: {integrity: sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==}
 
-  '@vueuse/metadata@11.2.0':
-    resolution: {integrity: sha512-L0ZmtRmNx+ZW95DmrgD6vn484gSpVeRbgpWevFKXwqqQxW9hnSi2Ppuh2BzMjnbv4aJRiIw8tQatXT9uOB23dQ==}
+  '@vueuse/metadata@12.7.0':
+    resolution: {integrity: sha512-4VvTH9mrjXqFN5LYa5YfqHVRI6j7R00Vy4995Rw7PQxyCL3z0Lli86iN4UemWqixxEvYfRjG+hF9wL8oLOn+3g==}
 
   '@vueuse/metadata@9.13.0':
     resolution: {integrity: sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==}
 
-  '@vueuse/shared@11.2.0':
-    resolution: {integrity: sha512-VxFjie0EanOudYSgMErxXfq6fo8vhr5ICI+BuE3I9FnX7ePllEsVrRQ7O6Q1TLgApeLuPKcHQxAXpP+KnlrJsg==}
+  '@vueuse/shared@12.7.0':
+    resolution: {integrity: sha512-coLlUw2HHKsm7rPN6WqHJQr18WymN4wkA/3ThFaJ4v4gWGWAQQGK+MJxLuJTBs4mojQiazlVWAKNJNpUWGRkNw==}
 
   '@vueuse/shared@9.13.0':
     resolution: {integrity: sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==}
@@ -1161,6 +1173,10 @@ packages:
     resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
     hasBin: true
 
+  highlight.js@11.11.1:
+    resolution: {integrity: sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==}
+    engines: {node: '>=12.0.0'}
+
   htmlparser2@3.10.1:
     resolution: {integrity: sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==}
 
@@ -2375,8 +2391,7 @@ snapshots:
 
   '@types/web-bluetooth@0.0.16': {}
 
-  '@types/web-bluetooth@0.0.20':
-    optional: true
+  '@types/web-bluetooth@0.0.20': {}
 
   '@vitejs/plugin-vue@4.6.2(vite@5.4.11(@types/node@20.14.2)(sass@1.84.0)(terser@5.31.1))(vue@3.5.13)':
     dependencies:
@@ -2479,16 +2494,22 @@ snapshots:
 
   '@vue/shared@3.5.13': {}
 
-  '@vueuse/core@11.2.0(vue@3.5.13)':
+  '@vueuse/components@12.7.0':
+    dependencies:
+      '@vueuse/core': 12.7.0
+      '@vueuse/shared': 12.7.0
+      vue: 3.5.13
+    transitivePeerDependencies:
+      - typescript
+
+  '@vueuse/core@12.7.0':
     dependencies:
       '@types/web-bluetooth': 0.0.20
-      '@vueuse/metadata': 11.2.0
-      '@vueuse/shared': 11.2.0(vue@3.5.13)
-      vue-demi: 0.14.10(vue@3.5.13)
+      '@vueuse/metadata': 12.7.0
+      '@vueuse/shared': 12.7.0
+      vue: 3.5.13
     transitivePeerDependencies:
-      - '@vue/composition-api'
-      - vue
-    optional: true
+      - typescript
 
   '@vueuse/core@9.13.0(vue@3.5.13)':
     dependencies:
@@ -2500,18 +2521,15 @@ snapshots:
       - '@vue/composition-api'
       - vue
 
-  '@vueuse/metadata@11.2.0':
-    optional: true
+  '@vueuse/metadata@12.7.0': {}
 
   '@vueuse/metadata@9.13.0': {}
 
-  '@vueuse/shared@11.2.0(vue@3.5.13)':
+  '@vueuse/shared@12.7.0':
     dependencies:
-      vue-demi: 0.14.10(vue@3.5.13)
+      vue: 3.5.13
     transitivePeerDependencies:
-      - '@vue/composition-api'
-      - vue
-    optional: true
+      - typescript
 
   '@vueuse/shared@9.13.0(vue@3.5.13)':
     dependencies:
@@ -3174,6 +3192,8 @@ snapshots:
 
   he@1.2.0: {}
 
+  highlight.js@11.11.1: {}
+
   htmlparser2@3.10.1:
     dependencies:
       domelementtype: 1.3.1
@@ -4067,7 +4087,7 @@ snapshots:
 
   universalify@2.0.1: {}
 
-  unplugin-auto-import@0.11.4(@vueuse/core@11.2.0(vue@3.5.13))(rollup@4.34.4):
+  unplugin-auto-import@0.11.4(@vueuse/core@12.7.0)(rollup@4.34.4):
     dependencies:
       '@antfu/utils': 0.6.3
       '@rollup/pluginutils': 5.1.4(rollup@4.34.4)
@@ -4076,7 +4096,7 @@ snapshots:
       unimport: 0.7.1(rollup@4.34.4)
       unplugin: 0.10.2
     optionalDependencies:
-      '@vueuse/core': 11.2.0(vue@3.5.13)
+      '@vueuse/core': 12.7.0
     transitivePeerDependencies:
       - rollup
 
diff --git a/bi-ui/src/assets/css/main.scss b/bi-ui/src/assets/css/main.scss
index 3afe3d3..9a9db95 100644
--- a/bi-ui/src/assets/css/main.scss
+++ b/bi-ui/src/assets/css/main.scss
@@ -129,9 +129,40 @@
     width: 1em;
     height: 1em;
     border-radius: 1em;
-    border: .2em solid currentColor;
-    border-top-color: #0000;
-    animation: w-am-loading 1s infinite;
+    border: solid .2em currentColor;
+    mask-image: conic-gradient(from 0deg, #0000 0%, #000 75%, #000 83%, #0000 85%);
+    animation: w-am-loading 1s ease infinite;
+  }
+
+  .w-inner-loading {
+    pointer-events: none;
+    user-select: none;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+
+    &::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background-color: var(--bg-color, #0003);
+      backdrop-filter: blur(.1em);
+    }
+
+    &::after {
+      position: absolute;
+      content: '';
+      font-size: var(--size,1em);
+      display: block;
+      width: 1em;
+      height: 1em;
+      border-radius: 1em;
+      border: solid .2em var(--loading-color, currentColor);
+      mask-image: conic-gradient(from 0deg, #0000 0%, #000 75%, #000 83%, #0000 85%);
+      animation: w-am-loading 1s ease infinite;
+    }
   }
 
   @keyframes w-am-loading {
diff --git a/bi-ui/src/components/global/WCode.vue b/bi-ui/src/components/global/WCode.vue
new file mode 100644
index 0000000..aa3877d
--- /dev/null
+++ b/bi-ui/src/components/global/WCode.vue
@@ -0,0 +1,228 @@
+<template>
+  <div class="w-code">
+    <w-icon icon-class="clipboard" @click="copy" />
+    <pre><code ref="codeRef" :class="props.language?['language-'+props.language]:[]"><slot></slot></code></pre>
+  </div>
+</template>
+<script setup>
+import hljs from 'highlight.js';
+import 'highlight.js/styles/github.css';
+import { ElMessage } from 'element-plus'
+
+import { onMounted } from 'vue';
+
+const props = defineProps({
+  language: {
+    type: String,
+    default: ''
+  }
+})
+
+const codeRef = ref(null);
+
+const copy = () => {
+  navigator.clipboard.writeText(codeRef.value.textContent).then(() => {
+    ElMessage.success('复制成功');
+  })
+}
+
+onMounted(() => {
+  hljs.highlightElement(codeRef.value);
+})
+
+const getCode = () => {
+  return codeRef.value.textContent;
+}
+
+const setCode = (code) => {
+  if(props.language){
+    codeRef.value.innerHTML = hljs.highlight(code, { language: props.language }).value;
+  }else{
+    codeRef.value.innerHTML = hljs.highlightAuto(code).value;
+  }
+}
+
+defineExpose({
+  copy,
+  getCode,
+  setCode,
+})
+</script>
+<style lang="scss">
+.w-code {
+
+  background-color: var(--w-bg-dark);
+  margin: 1em;
+  padding: 0em;
+  border: solid 1px var(--w-bg-dark-2);
+  border-radius: .5em;
+  position: relative;
+
+  &>:first-child {
+    position: absolute;
+    right: .5em;
+    top: .5em;
+    cursor: pointer;
+    opacity: 0;
+    transition: all .3s;
+
+  }
+
+  &:hover>:first-child {
+    opacity: 0.7;
+
+    &:hover {
+      opacity: 1;
+    }
+
+    &:active {
+      opacity: .85;
+    }
+  }
+
+
+
+  .hljs {
+    background: #0000 !important;
+  }
+
+}
+
+.dark {
+  pre code.hljs {
+    display: block;
+    overflow-x: auto;
+    padding: 1em
+  }
+
+  code.hljs {
+    padding: 3px 5px
+  }
+
+  /*!
+  Theme: GitHub Dark
+  Description: Dark theme as seen on github.com
+  Author: github.com
+  Maintainer: @Hirse
+  Updated: 2021-05-15
+
+  Outdated base version: https://github.com/primer/github-syntax-dark
+  Current colors taken from GitHub's CSS
+*/
+  .hljs {
+    color: #c9d1d9;
+    background: #0d1117
+  }
+
+  .hljs-doctag,
+  .hljs-keyword,
+  .hljs-meta .hljs-keyword,
+  .hljs-template-tag,
+  .hljs-template-variable,
+  .hljs-type,
+  .hljs-variable.language_ {
+    /* prettylights-syntax-keyword */
+    color: #ff7b72
+  }
+
+  .hljs-title,
+  .hljs-title.class_,
+  .hljs-title.class_.inherited__,
+  .hljs-title.function_ {
+    /* prettylights-syntax-entity */
+    color: #d2a8ff
+  }
+
+  .hljs-attr,
+  .hljs-attribute,
+  .hljs-literal,
+  .hljs-meta,
+  .hljs-number,
+  .hljs-operator,
+  .hljs-variable,
+  .hljs-selector-attr,
+  .hljs-selector-class,
+  .hljs-selector-id {
+    /* prettylights-syntax-constant */
+    color: #79c0ff
+  }
+
+  .hljs-regexp,
+  .hljs-string,
+  .hljs-meta .hljs-string {
+    /* prettylights-syntax-string */
+    color: #a5d6ff
+  }
+
+  .hljs-built_in,
+  .hljs-symbol {
+    /* prettylights-syntax-variable */
+    color: #ffa657
+  }
+
+  .hljs-comment,
+  .hljs-code,
+  .hljs-formula {
+    /* prettylights-syntax-comment */
+    color: #8b949e
+  }
+
+  .hljs-name,
+  .hljs-quote,
+  .hljs-selector-tag,
+  .hljs-selector-pseudo {
+    /* prettylights-syntax-entity-tag */
+    color: #7ee787
+  }
+
+  .hljs-subst {
+    /* prettylights-syntax-storage-modifier-import */
+    color: #c9d1d9
+  }
+
+  .hljs-section {
+    /* prettylights-syntax-markup-heading */
+    color: #1f6feb;
+    font-weight: bold
+  }
+
+  .hljs-bullet {
+    /* prettylights-syntax-markup-list */
+    color: #f2cc60
+  }
+
+  .hljs-emphasis {
+    /* prettylights-syntax-markup-italic */
+    color: #c9d1d9;
+    font-style: italic
+  }
+
+  .hljs-strong {
+    /* prettylights-syntax-markup-bold */
+    color: #c9d1d9;
+    font-weight: bold
+  }
+
+  .hljs-addition {
+    /* prettylights-syntax-markup-inserted */
+    color: #aff5b4;
+    background-color: #033a16
+  }
+
+  .hljs-deletion {
+    /* prettylights-syntax-markup-deleted */
+    color: #ffdcd7;
+    background-color: #67060c
+  }
+
+  .hljs-char.escape_,
+  .hljs-link,
+  .hljs-params,
+  .hljs-property,
+  .hljs-punctuation,
+  .hljs-tag {
+    /* purposely ignored */
+
+  }
+}
+</style>
\ No newline at end of file
diff --git a/bi-ui/src/components/global/WEffectLight.vue b/bi-ui/src/components/global/WEffectLight.vue
new file mode 100644
index 0000000..a1e8153
--- /dev/null
+++ b/bi-ui/src/components/global/WEffectLight.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="WEffectLight" :class="{ 'am': props.am }">
+    <slot></slot>
+  </div>
+</template>
+<script setup>
+import { IdGenerator } from "@/util";
+
+//唯一标识
+const uid = IdGenerator.next();
+
+const props = defineProps({
+  am: {
+    type: Boolean,
+    default: true
+  }
+})
+
+</script>
+<style lang="scss" scoped>
+@layer {
+  .WEffectLight {
+    --key: brightness(110%);
+    --time: 1.7s;
+    animation: am-WEffectLight var(--time) infinite alternate-reverse;
+    animation-play-state: paused;
+
+    &.am {
+      animation-play-state: running;
+    }
+  }
+
+
+  @keyframes am-WEffectLight {
+    0% {
+
+      // filter: brightness(100%);
+    }
+
+    40% {
+      filter: var(--key);
+    }
+
+    80% {
+
+      // filter: brightness(100%);
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/bi-ui/src/components/global/WEffectNoise.vue b/bi-ui/src/components/global/WEffectNoise.vue
new file mode 100644
index 0000000..3115efd
--- /dev/null
+++ b/bi-ui/src/components/global/WEffectNoise.vue
@@ -0,0 +1,82 @@
+<template>
+  <div class="WEffectNoise" ref="WEffectNoiseRef" :class="{ 'am': props.am }" :style="{ filter: 'url(#noiseFilter' + uid + ')' }">
+    <svg style="display: none;">
+      <defs>
+        <filter :id="'noiseFilter' + uid" color-interpolation-filters="linearRGB" filterUnits="objectBoundingBox"
+          primitiveUnits="userSpaceOnUse">
+          <feTurbulence type="turbulence" :baseFrequency="`0 ${base}`" numOctaves="2" seed="2" stitchTiles="stitch" x="0%"
+            y="0%" width="100%" height="100%" result="turbulence" />
+          <feDisplacementMap in="SourceGraphic" in2="turbulence" scale="10" xChannelSelector="R" yChannelSelector="B"
+            x="0%" y="0%" width="100%" height="100%" result="displacementMap" />
+        </filter>
+      </defs>
+    </svg>
+    <slot></slot>
+  </div>
+</template>
+<script setup>
+import { onMounted, useTemplateRef } from 'vue'
+import { IdGenerator } from "@/util";
+
+const props = defineProps({
+  am: {
+    type: Boolean,
+    default: true
+  }
+})
+
+//唯一标识
+const uid = IdGenerator.next();
+
+const noise = useTemplateRef('WEffectNoiseRef');
+
+const base = ref(0);
+
+onMounted(() => {
+  const noiseStyle = getComputedStyle(noise.value);
+  const noisePlayer = () => {
+  try {
+    base.value = noiseStyle.getPropertyValue('--noise-base');
+    requestAnimationFrame(noisePlayer);
+  } catch (e) { }
+}
+noisePlayer();
+})
+
+
+
+</script>
+<style lang="scss" scoped>
+@layer {
+  @property --noise-base {
+    syntax: '<number>';
+    inherits: true;
+    initial-value: 0;
+  }
+
+  .WEffectNoise {
+    position: relative;
+    inset: 0;
+    --noise-base: 0;
+    animation: none;
+
+    &.am {
+      animation: am-WEffectNoise var(--time, 5s) linear infinite;
+    }
+  }
+
+  @keyframes am-WEffectNoise {
+    0% {
+      --noise-base: 0;
+    }
+
+    10% {
+      --noise-base: 0.1;
+    }
+
+    20% {
+      --noise-base: 0;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/bi-ui/src/components/global/WEffectNoiseBg.vue b/bi-ui/src/components/global/WEffectNoiseBg.vue
new file mode 100644
index 0000000..9ac8e17
--- /dev/null
+++ b/bi-ui/src/components/global/WEffectNoiseBg.vue
@@ -0,0 +1,63 @@
+<template>
+  <div class="WEffectNoiseBg">
+    <svg style="display: none;">
+      <defs>
+        <filter :id="'WEffectNoiseBgFilter' + uid" color-interpolation-filters="linearRGB"
+          filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse">
+          <feTurbulence type="turbulence" :baseFrequency="`${props.base} ${props.base}`" numOctaves="100" seed="100" stitchTiles="stitch" x="-100%"
+            y="-100%" width="300%" height="300%" result="turbulence" />
+          <feDisplacementMap in="SourceGraphic" in2="turbulence" scale="200" xChannelSelector="R" yChannelSelector="A"
+            x="-100%" y="-100%" width="300%" height="300%" result="displacementMap" />
+        </filter>
+      </defs>
+    </svg>
+    <div class="bg">
+      <div :style="{ filter: `url(#WEffectNoiseBgFilter${uid})` }"></div>
+    </div>
+    <div>
+      <slot></slot>
+    </div>
+  </div>
+</template>
+<script setup>
+import { IdGenerator } from "@/util";
+
+//唯一标识
+const uid = IdGenerator.next();
+
+const props = defineProps({
+  base: {
+    type: Number,
+    default: 0.05
+  }
+})
+
+</script>
+<style lang="scss" scoped>
+@layer {
+  .WEffectNoiseBg {
+    position: relative;
+    inset: 0;
+    background-color: var(--bg, var(--w-main));
+
+    &>div {
+      position: absolute;
+      inset: 0;
+
+      &.bg {
+        overflow: hidden;
+
+        div {
+          position: absolute;
+          inset: 0;
+          background-image: repeating-linear-gradient(45deg, var(--noise, var(--w-main-dark-1)) 0, var(--noise, var(--w-main-dark-1)) 1em, #0000 1em, #0000 2em);
+          transform: scale(2);
+
+        }
+
+      }
+
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/bi-ui/src/components/global/WFullscreen.vue b/bi-ui/src/components/global/WFullscreen.vue
index 69d6e59..e00bac6 100644
--- a/bi-ui/src/components/global/WFullscreen.vue
+++ b/bi-ui/src/components/global/WFullscreen.vue
@@ -1,5 +1,5 @@
 <template>
-  <div @click="toggleFullScreen" title="全屏">
+  <div @click="toggleFullScreen" title="全屏" style="cursor: pointer;">
     <w-icon v-if="!isFullScreen" icon-class="fullscreen" />
     <w-icon v-else icon-class="fullscreen-exit" />
   </div>
diff --git a/bi-ui/src/pages/test.vue b/bi-ui/src/pages/test.vue
index 608c774..1917d54 100644
--- a/bi-ui/src/pages/test.vue
+++ b/bi-ui/src/pages/test.vue
@@ -50,6 +50,7 @@ list.value.unshift("index");
   display: grid;
   grid-template-columns: 10rem 1fr;
   gap: 2rem;
+  user-select: text;
 
   & > div {
     position: relative;
diff --git a/bi-ui/src/pages/test/FlyingLine.vue b/bi-ui/src/pages/test/FlyingLine.vue
index 43b2e4b..e870f2a 100644
--- a/bi-ui/src/pages/test/FlyingLine.vue
+++ b/bi-ui/src/pages/test/FlyingLine.vue
@@ -49,6 +49,8 @@
   time: "5s",
 },null,'  ') }}</pre>
       </div>
+      
+
     </div>
   </div>
 </template>
diff --git a/bi-ui/src/pages/test/components.vue b/bi-ui/src/pages/test/components.vue
new file mode 100644
index 0000000..f025d08
--- /dev/null
+++ b/bi-ui/src/pages/test/components.vue
@@ -0,0 +1,252 @@
+<template>
+  <div>
+    <h1>组件</h1>
+    <el-tabs v-model="tabIndex">
+
+
+      <el-tab-pane label="代码" name="code">
+        <h2>代码高亮显示</h2>
+        <w-code ref="codeRef">{{ `<w-code>//自动识别语言</w-code>
+          <w-code ref="codeRef" language="html">
+            <ul>
+              <li></li>
+              <li></li>
+              <li></li>
+            </ul>
+          </w-code>
+          <script>
+codeRef.copy();//执行复制
+codeRef.getCode();//获取代码
+codeRef.setCode('new code');//设置代码
+</script>` }}
+        </w-code>
+        <el-button @click="proxy.$refs.codeRef.copy();">copy</el-button>
+        <el-button @click="ElMessage.info(proxy.$refs.codeRef.getCode())">getCode</el-button>
+        <el-button @click="proxy.$refs.codeRef.setCode(`<div>新代码</div>`)">setCode</el-button>
+      </el-tab-pane>
+
+      <el-tab-pane label="杂项">
+        <h2>可切换的logo</h2>
+        <w-logo style="height: 10em;" />
+        <w-code language="html">{{ `<w-logo style="height: 10em;" />` }}</w-code>
+
+        <el-divider />
+        <h2>当前时间</h2>
+        <w-time />
+        <w-code language="html">{{ `<w-time />` }}</w-code>
+
+        <el-divider />
+        <h2>双击可以编辑的主标题</h2>
+        <w-main-title />
+        <w-code language="html">{{ `<w-main-title />` }}</w-code>
+
+        <el-divider />
+        <h2>渐变文字特效</h2>
+        <w-text>第一段文字</w-text>
+        <w-text style="font-size: 2em; color: red; --c:blue; --c-l: #FFF5; --d: 30deg; --move:10em;" am
+          time="10s">第二段很长很长很长很长的文字</w-text>
+        <w-code language="html">{{ `<w-text>第一段文字</w-text>
+          <w-text style="font-size: 2em; color: red; --c:blue; --c-l: #FFF5; --d: 30deg; --move:10em;" am
+            time="10s">第二段很长很长很长很长的文字</w-text>` }}</w-code>
+        <ol>
+          <li>am:是否启动光影特效</li>
+          <li>time: 光影特效执行时间,默认:随机5s-20s</li>
+          <li>--move: 光影移动距离</li>
+          <li>color: 文字颜色</li>
+          <li>--c: 文字渐变颜色</li>
+          <li>--c-l: 光影颜色</li>
+          <li>--d: 文字渐变方向</li>
+        </ol>
+
+
+
+
+        <el-divider />
+        <h2>全屏</h2>
+        <w-fullscreen />
+        <w-code language="html">{{ `<w-fullscreen />` }}</w-code>
+
+
+
+
+        <el-divider />
+        <h2>工具栏</h2>
+        <div style="display: flex; justify-content: flex-end; height: 3em; border: 1px solid var(--w-bg-dark-3);">
+          <w-toolbar /></div>
+        <w-code language="html">{{ `<div
+            style="display: flex; justify-content: flex-end; height: 3em; border: 1px solid var(--w-bg-dark-3);">
+            <w-toolbar /></div>` }}</w-code>
+
+
+
+
+
+        <el-divider />
+        <h2>滚动条</h2>
+        <w-scroll style="height: 10em;--c:red;">
+          <div
+            style="height: 40em; background-image: repeating-linear-gradient(to bottom, #0002 0, #0002 2em, #0001 2em, #0001 4em);">
+          </div>
+        </w-scroll>
+        <w-code language="html">{{ ` <w-scroll style="height: 10em;--c:red;">
+            <div
+              style="height: 40em; background-image: repeating-linear-gradient(to bottom, #0002 0, #0002 2em, #0001 2em, #0001 4em);">
+            </div>
+          </w-scroll>` }}</w-code>
+
+
+
+
+        <el-divider />
+        <h2>变化的数值</h2>
+        <w-num :to="100" /> :
+        <w-num :fixed="1" :time="3000" :to="to" />
+        <el-button @click="to = 1000;">to:1000</el-button>
+        <el-button @click="to = 500;">to:500</el-button>
+        <w-code language="html">{{ ` <w-num :to="100" />
+          <w-num :fixed="1" :time="3000" :to="to" />
+          <el-button @click="to=1000;">to:1000</el-button>
+          <el-button @click="to=500;">to:500</el-button>` }}</w-code>
+
+
+
+<el-divider />
+<h2>开关</h2>
+<w-switch :model-value="true" style="width: 4em; margin: .5em;" />
+<w-switch :model-value="false"  style="width: 4em; margin: .5em;" />
+<w-switch v-model="switchValue" off-text="关" on-text="开" :disabled="false"  style="width: 4em; margin: .5em; --on-color:red; --off-color: #ccc;" />
+{{ switchValue }}
+<w-code language="html">{{ `        <w-switch :model-value="true" style="width: 4em; margin: .5em;" />
+<w-switch :model-value="false"  style="width: 4em; margin: .5em;" />
+<w-switch v-model="switchValue" off-text="关" on-text="开" :disabled="false"  style="width: 4em; margin: .5em; --on-color:red; --off-color: #ccc;" />
+\{\{ switchValue \}\}` }}</w-code>
+
+
+
+<el-divider />
+<h2>主题切换</h2>
+<w-theme/>
+<w-theme>
+  <template #default="{ isDark }">
+    {{ isDark?'暗黑主题':'明亮主题' }}
+  </template>
+</w-theme>
+<w-code language="html">{{ `<w-theme/>
+<w-theme>
+  <template #default="{ isDark }">
+    \{\{ isDark?'暗黑主题':'明亮主题' \}\}
+  </template>
+</w-theme>` }}</w-code>
+
+      </el-tab-pane>
+
+
+      
+      <el-tab-pane label="隐私显示">
+        <div class="w-flex">手机号码: 15111047708 : <w-sensitive value="15111047708" /></div>
+        <div class="w-flex">手机号码: 15111047708 : <w-sensitive value="15111047708" len="3" /></div>
+        <div class="w-flex">手机号码: 15111047708 : <w-sensitive value="15111047708" len="3" char="X" show/></div>
+        <div class="w-flex">姓名: 张三丰 : <w-sensitive value="张三丰" len="1" char="某" show/></div>
+        <div class="w-flex">ipv4: 127.0.0.1 : <w-sensitive type="ipv4" value="127.0.0.1" char="X" show/></div>
+        <w-code language="html">{{ `        <div class="w-flex">手机号码: 15111047708 : <w-sensitive value="15111047708" /></div>
+        <div class="w-flex">手机号码: 15111047708 : <w-sensitive value="15111047708" len="3" /></div>
+        <div class="w-flex">手机号码: 15111047708 : <w-sensitive value="15111047708" len="3" char="X" show/></div>
+        <div class="w-flex">姓名: 张三丰 : <w-sensitive value="张三丰" len="1" char="某" show/></div>
+        <div class="w-flex">ipv4: 127.0.0.1 : <w-sensitive type="ipv4" value="127.0.0.1" char="X" show/></div>` }}</w-code>
+      </el-tab-pane>
+
+      <el-tab-pane label="特效">
+       <h2>杂点背景</h2>
+       <div style="display: flex; flex-wrap: wrap; color: #FFF;">
+        <w-effect-noise-bg style="width: 20em; height: 20em; margin: .1em;">内容</w-effect-noise-bg>
+        <w-effect-noise-bg style="width: 20em; height: 20em; margin: .1em;" :base="0.01">:base="0.01"</w-effect-noise-bg>
+        <w-effect-noise-bg style="width: 20em; height: 20em; margin: .1em;" :base="0.1">:base="0.1"</w-effect-noise-bg>
+        <w-effect-noise-bg style="width: 20em; height: 20em; margin: .1em;" :base="0.5">:base="0.5"</w-effect-noise-bg>
+        <w-effect-noise-bg style="width: 20em; height: 20em; margin: .1em;" :base="1">:base="1"</w-effect-noise-bg>
+        <w-effect-noise-bg style="width: 20em; height: 20em; margin: .1em;--bg:#0d0d0d; --noise: #FFF1;" :base="0.1">:base="0.1"</w-effect-noise-bg>
+        
+        <w-effect-noise-bg style="width: 20em; height: 20em; margin: .1em; background-image: linear-gradient(-15deg, #0d0d0d,#0d0d0d,#3d3d3d,#0d0d0d) ; --noise: #FFF1;" :base="0.2">:base="0.2"</w-effect-noise-bg>
+        <w-effect-noise-bg style="width: 20em; height: 20em; margin: .1em; background-image: linear-gradient(-15deg, #eee,#fff) ; --noise: #0001;" :base="0.3"><div style="padding: 1em; color: #000;">:base="0.3"</div></w-effect-noise-bg>
+       </div>
+       <ol>
+        <li>base: 杂点值,范围: 0~1, 默认:0.05</li>
+        <li>--bg: 背景颜色</li>
+        <li>--noise: 杂点颜色</li>
+       </ol>
+       <w-code language="html">{{ `       <div style="display: flex; flex-wrap: wrap; color: #FFF;">
+        <w-effect-noise-bg style="width: 20em; height: 20em; margin: .1em;">内容</w-effect-noise-bg>
+        <w-effect-noise-bg style="width: 20em; height: 20em; margin: .1em;" :base="0.01">:base="0.01"</w-effect-noise-bg>
+        <w-effect-noise-bg style="width: 20em; height: 20em; margin: .1em;" :base="0.1">:base="0.1"</w-effect-noise-bg>
+        <w-effect-noise-bg style="width: 20em; height: 20em; margin: .1em;" :base="0.5">:base="0.5"</w-effect-noise-bg>
+        <w-effect-noise-bg style="width: 20em; height: 20em; margin: .1em;" :base="1">:base="1"</w-effect-noise-bg>
+        <w-effect-noise-bg style="width: 20em; height: 20em; margin: .1em;--bg:#0d0d0d; --noise: #FFF1;" :base="0.1">:base="0.1"</w-effect-noise-bg>
+        
+        <w-effect-noise-bg style="width: 20em; height: 20em; margin: .1em; background-image: linear-gradient(-15deg, #0d0d0d,#0d0d0d,#3d3d3d,#0d0d0d) ; --noise: #FFF1;" :base="0.2">:base="0.2"</w-effect-noise-bg>
+        <w-effect-noise-bg style="width: 20em; height: 20em; margin: .1em; background-image: linear-gradient(-15deg, #eee,#fff) ; --noise: #0001;" :base="0.3"><div style="padding: 1em; color: #000;">:base="0.3"</div></w-effect-noise-bg>
+       </div>` }}</w-code>
+
+       <h2>呼吸灯效果</h2>
+       <w-effect-light><div style="height: 5em; width: 5em; background-color: var(--w-main);"></div></w-effect-light>
+       <w-effect-light :am="am" style="--key: brightness(150%); --time:1s;"><div style="height: 5em; width: 5em; background-color: var(--w-main);"></div></w-effect-light>
+        <el-button @click="am=!am;">{{ am?'暂停':'播放' }}</el-button>
+        <w-code language="html">
+          {{ `       <w-effect-light><div style="height: 5em; width: 5em; background-color: var(--w-main);"></div></w-effect-light>
+       <w-effect-light :am="am" style="--key: brightness(150%); --time:1s;"><div style="height: 5em; width: 5em; background-color: var(--w-main);"></div></w-effect-light>
+        <el-button @click="am=!am;">\{\{ am?'暂停':'播放' \}\}</el-button>` }}
+        </w-code>
+
+        <h2>干扰动画效果</h2>
+        <w-effect-noise :am="am1" style="--time:5s;"><div style="height: 5em; width: 5em; background-color: var(--w-main); border-radius: 10em;"></div></w-effect-noise>
+        <el-button @click="am1=!am1;">{{ am1?'暂停':'播放' }}</el-button>
+
+        <h2>加载动画效果</h2>
+        <div class="w-loading" ></div>
+        <div class="w-loading" style="font-size: 3em; color: red;" ></div>
+        <div class="w-inner-loading" style="width: 10em; height: 3em;">
+          内部加载动画
+        </div>
+        <div class="w-inner-loading" style="width: 10em; height: 5em; margin: 1em 0; --size:2em; --bg-color: #0001; --loading-color: red;">
+          内部加载动画
+        </div>
+        <w-code language="html">{{ `        <div class="w-loading" ></div>
+        <div class="w-loading" style="font-size: 3em; color: red;" ></div>
+        <div class="w-inner-loading" style="width: 10em; height: 3em;">
+          内部加载动画
+        </div>
+        <div class="w-inner-loading" style="width: 10em; height: 5em; margin: 1em 0; --size:2em; --bg-color: #0001; --loading-color: red;">
+          内部加载动画
+        </div>` }}</w-code>
+
+      </el-tab-pane>
+
+
+    </el-tabs>
+    <div style="height: 20vh;"></div>
+  </div>
+</template>
+<script setup>
+
+import { ElMessage } from 'element-plus';
+import { ref } from 'vue';
+
+const tabIndex = ref(localStorage.getItem('componentsTabIndex') || 'code');
+
+watch(tabIndex, (newValue) => {
+  localStorage.setItem('componentsTabIndex', newValue);
+});
+
+const { proxy } = getCurrentInstance();
+
+const to = ref(100)
+
+const switchValue = ref(true);
+
+const am = ref(true);
+const am1 = ref(true);
+
+</script>
+<style lang="scss" scoped>
+h2 {
+  margin: 2em 0 1em;
+}
+</style>
\ No newline at end of file
diff --git a/bi-ui/src/pages/test/icon.vue b/bi-ui/src/pages/test/icon.vue
index 107d525..22c23c1 100644
--- a/bi-ui/src/pages/test/icon.vue
+++ b/bi-ui/src/pages/test/icon.vue
@@ -1,10 +1,14 @@
 <template>
+<div>
+  <h1>图标</h1>
+  <w-code language="html">{{ `<w-icon icon-class="404" />` }}</w-code>
   <div class="w-flex icons">
     <div v-for="item in icons" :key="item" class="w-flex-column">
       <w-icon :icon-class="item" />
       {{ item }}
     </div>
   </div>
+</div>
 </template>
 <script setup>
 import { icons } from "@/util";
diff --git a/bi-ui/vite.config.mjs b/bi-ui/vite.config.mjs
index c6761a0..b9a7f5d 100644
--- a/bi-ui/vite.config.mjs
+++ b/bi-ui/vite.config.mjs
@@ -30,15 +30,15 @@ export default defineConfig(({ mode, command }) => {
             if (/.(png|jpg|gif|jpeg|webp|svg)$/.test(chunk.name || '')) {
               return 'assets/imgs/[name].[ext]';
             }
-  
+
             return `assets/other/[name].[ext]`;
           },
         },
-      }, 
+      },
     },
     optimizeDeps: {
       esbuildOptions: {
-        target: 'es2020', 
+        target: 'es2020',
       },
     },
     // 部署生产环境和开发环境下的URL。
@@ -78,7 +78,7 @@ export default defineConfig(({ mode, command }) => {
           changeOrigin: true
         },
         '/files': {
-          target: 'http://192.168.3.222:9000',
+          target: 'http://192.168.3.53:9000',
           changeOrigin: true
         }
       }