Merge branch 'main' into refactor/tailwindcss

2025-11-15 14:03:36 +08:00 · 2025-03-28 08:50:40 +08:00
parent ab1c7f8bcc a9ee9ebcf9
commit b7d3dc1170
111 changed files with 3853 additions and 2095 deletions
--- a/src/views/able/menu-tree.vue
+++ b/src/views/able/menu-tree.vue
@@ -7,7 +7,7 @@ import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 import { extractPathList, deleteChildren } from "@/utils/tree";
 import { usePermissionStoreHook } from "@/store/modules/permission";
 import type { TreeNode } from "element-plus/es/components/tree-v2/src/types";
-import NodeTree from "@iconify-icons/ri/node-tree";
+import NodeTree from "~icons/ri/node-tree";

 defineOptions({
  name: "MenuTree"
--- a/src/views/able/video.vue
+++ b/src/views/able/video.vue
@@ -2,7 +2,7 @@
 import { onMounted } from "vue";
 import { deviceDetection } from "@pureadmin/utils";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
-import VideoPlay from "@iconify-icons/ep/video-play";
+import VideoPlay from "~icons/ep/video-play";

 import Player from "xgplayer";
 import "xgplayer/dist/index.min.css";
--- a/src/views/account-settings/components/Profile.vue
+++ b/src/views/account-settings/components/Profile.vue
@@ -6,7 +6,7 @@ import { type UserInfo, getMine } from "@/api/user";
 import type { FormInstance, FormRules } from "element-plus";
 import ReCropperPreview from "@/components/ReCropperPreview";
 import { createFormData, deviceDetection } from "@pureadmin/utils";
-import uploadLine from "@iconify-icons/ri/upload-line";
+import uploadLine from "~icons/ri/upload-line";

 defineOptions({
  name: "Profile"
--- a/src/views/account-settings/index.vue
+++ b/src/views/account-settings/index.vue
@@ -11,11 +11,11 @@ import AccountManagement from "./components/AccountManagement.vue";
 import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
 import LaySidebarTopCollapse from "@/layout/components/lay-sidebar/components/SidebarTopCollapse.vue";

-import leftLine from "@iconify-icons/ri/arrow-left-s-line";
-import ProfileIcon from "@iconify-icons/ri/user-3-line";
-import PreferencesIcon from "@iconify-icons/ri/settings-3-line";
-import SecurityLogIcon from "@iconify-icons/ri/window-line";
-import AccountManagementIcon from "@iconify-icons/ri/profile-line";
+import leftLine from "~icons/ri/arrow-left-s-line";
+import ProfileIcon from "~icons/ri/user-3-line";
+import PreferencesIcon from "~icons/ri/settings-3-line";
+import SecurityLogIcon from "~icons/ri/window-line";
+import AccountManagementIcon from "~icons/ri/profile-line";

 defineOptions({
  name: "AccountSettings"
@@ -158,8 +158,8 @@ getMine().then(res => {
      &::before {
        position: absolute;
        inset: 0 8px;
-        margin: 4px 0;
        clear: both;
+        margin: 4px 0;
        content: "";
        background: var(--el-color-primary);
        border-radius: 3px;
--- a/src/views/chatai/components/Bard.vue
+++ b/src/views/chatai/components/Bard.vue
@@ -0,0 +1,142 @@
+<script setup lang="ts">
+import "deep-chat";
+import { ref, onMounted } from "vue";
+
+const chatRef = ref();
+
+onMounted(() => {
+  chatRef.value.demo = {
+    response: message => {
+      console.log(message);
+      return {
+        text: "仅演示，如需AI服务，请参考 https://deepchat.dev/docs/connect"
+      };
+    }
+  };
+});
+</script>
+
+<template>
+  <deep-chat
+    ref="chatRef"
+    style="
+      background-color: #f3f6fc;
+      border-color: #dcdcdc;
+      border-radius: 10px;
+    "
+    :textInput="{
+      styles: {
+        container: {
+          borderRadius: '20px',
+          border: '1px solid #969696',
+          boxShadow: 'unset',
+          width: '78%',
+          marginLeft: '-15px'
+        },
+        text: { padding: '10px', paddingLeft: '15px', paddingRight: '34px' }
+      },
+      placeholder: { text: '发送消息', style: { color: '#bcbcbc' } }
+    }"
+    :messageStyles="{
+      default: {
+        shared: {
+          bubble: {
+            maxWidth: '100%',
+            backgroundColor: 'unset',
+            marginTop: '10px',
+            marginBottom: '10px'
+          }
+        },
+        user: { bubble: { marginLeft: '0px', color: 'black' } },
+        ai: {
+          innerContainer: { borderRadius: '15px', backgroundColor: 'white' }
+        }
+      }
+    }"
+    :avatars="{
+      default: {
+        styles: {
+          position: 'left',
+          container: { marginLeft: '12px', marginRight: '5px' }
+        }
+      },
+      ai: {
+        src: 'https://xiaoxian521.github.io/hyperlink/img/vue-pure-admin/chatai/gemini.png',
+        styles: { position: 'left', avatar: { paddingTop: '6px' } }
+      }
+    }"
+    :speechToText="{
+      webSpeech: { language: 'zh-CN' },
+      button: {
+        default: {
+          container: {
+            default: {
+              bottom: '1em',
+              right: '0.6em',
+              borderRadius: '20px',
+              width: '1.9em',
+              height: '1.9em'
+            }
+          },
+          svg: { styles: { default: { bottom: '0.35em', left: '0.35em' } } }
+        },
+        position: 'inside-right'
+      }
+    }"
+    :submitButtonStyles="{
+      position: 'outside-right',
+      submit: {
+        container: {
+          default: {
+            bottom: '0.9em',
+            borderRadius: '25px',
+            padding: '6px 5px 4px',
+            backgroundColor: '#f3f6fc'
+          },
+          hover: { backgroundColor: '#b0deff4f' },
+          click: { backgroundColor: '#b0deffb5' }
+        },
+        svg: {
+          content:
+            '<?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> <svg viewBox=&quot;0 0 24 24&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;><path d=&quot;m21.426 11.095-17-8A.999.999 0 0 0 3.03 4.242L4.969 12 3.03 19.758a.998.998 0 0 0 1.396 1.147l17-8a1 1 0 0 0 0-1.81zM5.481 18.197l.839-3.357L12 12 6.32 9.16l-.839-3.357L18.651 12l-13.17 6.197z&quot;/></svg>',
+          styles: {
+            default: {
+              filter:
+                'brightness(0) saturate(100%) invert(10%) sepia(86%) saturate(6044%) hue-rotate(205deg) brightness(100%) contrast(100%)'
+            }
+          }
+        }
+      },
+      loading: {
+        svg: {
+          styles: {
+            default: {
+              filter:
+                'brightness(0) saturate(100%) invert(72%) sepia(0%) saturate(3044%) hue-rotate(322deg) brightness(100%) contrast(96%)'
+            }
+          }
+        }
+      },
+      stop: {
+        container: { hover: { backgroundColor: '#ededed' } },
+        svg: {
+          styles: {
+            default: {
+              filter:
+                'brightness(0) saturate(100%) invert(59%) sepia(0%) saturate(0%) hue-rotate(348deg) brightness(96%) contrast(93%)'
+            }
+          }
+        }
+      }
+    }"
+    :history="[
+      { text: '韩信是谁？', role: 'user' },
+      {
+        text: '韩信（约前231年－前196年），是秦末汉初时期的杰出军事家和战略家，被后世誉为“兵仙”。',
+        role: 'ai'
+      }
+    ]"
+    :demo="true"
+    :connect="{ stream: true }"
+  />
+</template>
--- a/src/views/chatai/components/Bing.vue
+++ b/src/views/chatai/components/Bing.vue
@@ -0,0 +1,147 @@
+<script setup lang="ts">
+import "deep-chat";
+import { ref, onMounted } from "vue";
+
+const chatRef = ref();
+
+onMounted(() => {
+  chatRef.value.demo = {
+    response: message => {
+      console.log(message);
+      return {
+        text: "仅演示，如需AI服务，请参考 https://deepchat.dev/docs/connect"
+      };
+    }
+  };
+});
+</script>
+
+<template>
+  <deep-chat
+    ref="chatRef"
+    style="
+      background: linear-gradient(
+        90deg,
+        rgb(239 242 247) 0%,
+        7.6029%,
+        rgb(237 240 249) 15.2057%,
+        20.7513%,
+        rgb(235 239 248) 26.297%,
+        27.6386%,
+        rgb(235 239 248) 28.9803%,
+        38.2826%,
+        rgb(231 237 249) 47.585%,
+        48.1216%,
+        rgb(230 236 250) 48.6583%,
+        53.1306%,
+        rgb(228 236 249) 57.6029%,
+        61.5385%,
+        rgb(227 234 250) 65.4741%,
+        68.7835%,
+        rgb(222 234 250) 72.093%,
+        75.7603%,
+        rgb(219 230 248) 79.4275%,
+        82.8265%,
+        rgb(216 229 248) 86.2254%,
+        87.8354%,
+        rgb(213 228 249) 89.4454%,
+        91.8605%,
+        rgb(210 226 249) 94.2755%,
+        95.4383%,
+        rgb(209 225 248) 96.6011%,
+        98.3005%,
+        rgb(208 224 247) 100%
+      );
+      border-color: #e4e4e4;
+      border-radius: 10px;
+    "
+    :textInput="{
+      styles: {
+        container: {
+          borderRadius: '20px',
+          border: 'unset',
+          width: '78%',
+          marginLeft: '-15px',
+          boxShadow:
+            '0px 0.3px 0.9px rgba(0, 0, 0, 0.12), 0px 1.6px 3.6px rgba(0, 0, 0, 0.16)'
+        },
+        text: { padding: '10px', paddingLeft: '15px', paddingRight: '34px' }
+      },
+      placeholder: { text: '发送消息', style: { color: '#606060' } }
+    }"
+    :messageStyles="{
+      default: {
+        shared: {
+          bubble: {
+            backgroundColor: 'unset',
+            marginTop: '10px',
+            marginBottom: '10px',
+            boxShadow:
+              '0px 0.3px 0.9px rgba(0, 0, 0, 0.12), 0px 1.6px 3.6px rgba(0, 0, 0, 0.16)'
+          }
+        },
+        user: {
+          bubble: {
+            background: 'linear-gradient(130deg, #2870EA 20%, #1B4AEF 77.5%)'
+          }
+        },
+        ai: { bubble: { background: 'rgba(255,255,255,0.7)' } }
+      }
+    }"
+    :submitButtonStyles="{
+      position: 'outside-right',
+      submit: {
+        container: {
+          default: {
+            bottom: '0.8em',
+            borderRadius: '25px',
+            padding: '6px 5px 4px',
+            backgroundColor: 'unset'
+          },
+          hover: { backgroundColor: '#b0deff4f' },
+          click: { backgroundColor: '#b0deffb5' }
+        },
+        svg: {
+          content:
+            '<?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> <svg viewBox=&quot;0 0 24 24&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;><path d=&quot;m21.426 11.095-17-8A.999.999 0 0 0 3.03 4.242L4.969 12 3.03 19.758a.998.998 0 0 0 1.396 1.147l17-8a1 1 0 0 0 0-1.81zM5.481 18.197l.839-3.357L12 12 6.32 9.16l-.839-3.357L18.651 12l-13.17 6.197z&quot;/></svg>',
+          styles: {
+            default: {
+              filter:
+                'brightness(0) saturate(100%) invert(10%) sepia(86%) saturate(6044%) hue-rotate(205deg) brightness(100%) contrast(100%)'
+            }
+          }
+        }
+      },
+      loading: {
+        svg: {
+          styles: {
+            default: {
+              filter:
+                'brightness(0) saturate(100%) invert(72%) sepia(0%) saturate(3044%) hue-rotate(322deg) brightness(100%) contrast(96%)'
+            }
+          }
+        }
+      },
+      stop: {
+        container: { hover: { backgroundColor: '#ededed94' } },
+        svg: {
+          styles: {
+            default: {
+              filter:
+                'brightness(0) saturate(100%) invert(72%) sepia(0%) saturate(3044%) hue-rotate(322deg) brightness(100%) contrast(96%)'
+            }
+          }
+        }
+      }
+    }"
+    :history="[
+      { text: '赵云是谁？', role: 'user' },
+      {
+        text: '赵云（约168年－229年），字子龙，是三国时期蜀汉的重要将领，以其忠诚和勇敢著称。',
+        role: 'ai'
+      }
+    ]"
+    :demo="true"
+    :connect="{ stream: true }"
+  />
+</template>
--- a/src/views/chatai/components/Blue.vue
+++ b/src/views/chatai/components/Blue.vue
@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import "deep-chat";
+import { ref, onMounted } from "vue";
+
+const chatRef = ref();
+
+onMounted(() => {
+  chatRef.value.demo = {
+    response: message => {
+      console.log(message);
+      return {
+        text: "仅演示，如需AI服务，请参考 https://deepchat.dev/docs/connect"
+      };
+    }
+  };
+});
+</script>
+
+<template>
+  <deep-chat
+    ref="chatRef"
+    style="
+      border-radius: 10px;
+      border: unset;
+      background-image: url(&quot;https://xiaoxian521.github.io/hyperlink/img/vue-pure-admin/chatai/blue.jpg&quot;);
+      background-size: cover;
+    "
+    :messageStyles="{
+      default: {
+        user: {
+          bubble: { backgroundColor: '#2670ff' }
+        },
+        ai: { bubble: { backgroundColor: '#004f97', color: 'white' } }
+      }
+    }"
+    :submitButtonStyles="{
+      submit: {
+        svg: {
+          styles: {
+            default: {
+              filter:
+                'brightness(0) saturate(100%) invert(60%) sepia(79%) saturate(643%) hue-rotate(185deg) brightness(102%) contrast(100%)'
+            }
+          }
+        }
+      }
+    }"
+    :textInput="{
+      styles: {
+        container: {
+          backgroundColor: '#004f97',
+          color: 'white',
+          boxShadow: 'unset'
+        }
+      },
+      placeholder: { text: '发送消息', style: { color: '#d1d1d1' } }
+    }"
+    auxiliaryStyle="
+    ::-webkit-scrollbar-thumb {
+      background-color: #0174db;
+    }
+    ::-webkit-scrollbar-track {
+      background-color: unset;
+    }"
+    :history="[
+      { text: '熬夜都有哪些坏处？', role: 'user' },
+      {
+        text: '熬夜会损害身体健康，导致免疫力下降、精神不振和工作效率降低。',
+        role: 'ai'
+      }
+    ]"
+    :demo="true"
+    :connect="{ stream: true }"
+  />
+</template>
--- a/src/views/chatai/components/ChatGPT.vue
+++ b/src/views/chatai/components/ChatGPT.vue
@@ -0,0 +1,114 @@
+<script setup lang="ts">
+import "deep-chat";
+import { ref, onMounted } from "vue";
+
+const chatRef = ref();
+
+onMounted(() => {
+  chatRef.value.demo = {
+    response: message => {
+      console.log(message);
+      return {
+        text: "仅演示，如需AI服务，请参考 https://deepchat.dev/docs/connect"
+      };
+    }
+  };
+});
+</script>
+
+<template>
+  <deep-chat
+    ref="chatRef"
+    style="border-radius: 10px"
+    :messageStyles="{
+      default: {
+        shared: {
+          bubble: {
+            maxWidth: '100%',
+            backgroundColor: 'unset',
+            marginTop: '10px',
+            marginBottom: '10px'
+          }
+        },
+        user: {
+          bubble: {
+            marginLeft: '0px',
+            color: 'black'
+          }
+        },
+        ai: {
+          outerContainer: {
+            backgroundColor: 'rgba(247,247,248)',
+            borderTop: '1px solid rgba(0,0,0,.1)',
+            borderBottom: '1px solid rgba(0,0,0,.1)'
+          }
+        }
+      }
+    }"
+    :avatars="{
+      default: { styles: { position: 'left' } },
+      ai: { src: 'https://xiaoxian521.github.io/hyperlink/svg/openai.svg' }
+    }"
+    :submitButtonStyles="{
+      submit: {
+        container: {
+          default: {
+            padding: '1px 0 0 5px',
+            backgroundColor: '#19c37d'
+          },
+          hover: { backgroundColor: '#0bab69' },
+          click: { backgroundColor: '#068e56' }
+        },
+        svg: {
+          content:
+            '<?xml version=&quot;1.0&quot; ?> <svg viewBox=&quot;0 0 28 28&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;> <g> <path d=&quot;M21.66,12a2,2,0,0,1-1.14,1.81L5.87,20.75A2.08,2.08,0,0,1,5,21a2,2,0,0,1-1.82-2.82L5.46,13H11a1,1,0,0,0,0-2H5.46L3.18,5.87A2,2,0,0,1,5.86,3.25h0l14.65,6.94A2,2,0,0,1,21.66,12Z&quot;> </path> </g> </svg>',
+          styles: {
+            default: {
+              filter:
+                'brightness(0) saturate(100%) invert(100%) sepia(28%) saturate(2%) hue-rotate(69deg) brightness(107%) contrast(100%)'
+            }
+          }
+        }
+      },
+      loading: {
+        container: { default: { backgroundColor: 'white' } },
+        svg: {
+          styles: {
+            default: {
+              filter:
+                'brightness(0) saturate(100%) invert(72%) sepia(0%) saturate(3044%) hue-rotate(322deg) brightness(100%) contrast(96%)'
+            }
+          }
+        }
+      },
+      stop: {
+        container: {
+          default: { backgroundColor: 'white' },
+          hover: { backgroundColor: '#dadada52' }
+        },
+        svg: {
+          content:
+            '<?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?> <svg viewBox=&quot;0 0 24 24&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;> <rect width=&quot;24&quot; height=&quot;24&quot; rx=&quot;4&quot; ry=&quot;4&quot; /> </svg>',
+          styles: {
+            default: {
+              width: '0.95em',
+              marginTop: '0.32em',
+              filter:
+                'brightness(0) saturate(100%) invert(72%) sepia(0%) saturate(3044%) hue-rotate(322deg) brightness(100%) contrast(96%)'
+            }
+          }
+        }
+      }
+    }"
+    :textInput="{ placeholder: { text: '发送消息' } }"
+    :history="[
+      { text: '李白是谁？', role: 'user' },
+      {
+        text: '李白（701年2月28日－762年），号青莲居士，又号“谪仙人”，是唐代著名的浪漫主义诗人，被后人誉为“诗仙”。',
+        role: 'ai'
+      }
+    ]"
+    :demo="true"
+    :connect="{ stream: true }"
+  />
+</template>
--- a/src/views/chatai/components/Dark.vue
+++ b/src/views/chatai/components/Dark.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import "deep-chat";
+import { ref, onMounted } from "vue";
+
+const chatRef = ref();
+
+onMounted(() => {
+  chatRef.value.demo = {
+    response: message => {
+      console.log(message);
+      return {
+        text: "仅演示，如需AI服务，请参考 https://deepchat.dev/docs/connect"
+      };
+    }
+  };
+});
+</script>
+
+<template>
+  <deep-chat
+    ref="chatRef"
+    style="background-color: #292929; border: unset; border-radius: 10px"
+    :messageStyles="{
+      default: {
+        ai: { bubble: { backgroundColor: '#545454', color: 'white' } }
+      },
+      loading: {
+        message: {
+          styles: {
+            bubble: { backgroundColor: '#545454', color: 'white' }
+          }
+        }
+      }
+    }"
+    :textInput="{
+      styles: {
+        container: {
+          backgroundColor: '#666666',
+          border: 'unset',
+          color: '#e8e8e8'
+        }
+      },
+      placeholder: {
+        text: '发送消息',
+        style: { color: '#bcbcbc' }
+      }
+    }"
+    :submitButtonStyles="{
+      submit: {
+        container: {
+          default: { bottom: '0.7rem' }
+        },
+        svg: {
+          styles: {
+            default: {
+              filter:
+                'brightness(0) saturate(100%) invert(70%) sepia(52%) saturate(5617%) hue-rotate(185deg) brightness(101%) contrast(101%)'
+            }
+          }
+        }
+      }
+    }"
+    auxiliaryStyle="
+    ::-webkit-scrollbar {
+      width: 10px;
+      height: 10px;
+    }
+    ::-webkit-scrollbar-thumb {
+      background-color: grey;
+      border-radius: 5px;
+    }
+    ::-webkit-scrollbar-track {
+      background-color: unset;
+    }"
+    :history="[
+      { text: '什么水果适合减脂期间吃？', role: 'user' },
+      {
+        text: '减脂期间适合吃苹果、柑橘类水果、蓝莓和草莓等低热量、高纤维的水果，有助于增加饱腹感并促进新陈代谢。',
+        role: 'ai'
+      }
+    ]"
+    :demo="true"
+    :connect="{ stream: true }"
+  />
+</template>
--- a/src/views/chatai/components/FullInput.vue
+++ b/src/views/chatai/components/FullInput.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import "deep-chat";
+import { ref, onMounted } from "vue";
+
+const chatRef = ref();
+
+onMounted(() => {
+  chatRef.value.demo = {
+    response: message => {
+      console.log(message);
+      return {
+        text: "仅演示，如需AI服务，请参考 https://deepchat.dev/docs/connect"
+      };
+    }
+  };
+});
+</script>
+
+<template>
+  <deep-chat
+    ref="chatRef"
+    style="border-radius: 10px"
+    :textInput="{
+      styles: {
+        container: {
+          width: '100%',
+          margin: '0',
+          border: 'unset',
+          borderTop: '1px solid #d5d5d5',
+          borderRadius: '0px',
+          boxShadow: 'unset'
+        },
+        text: {
+          fontSize: '1.05em',
+          paddingTop: '11px',
+          paddingBottom: '13px',
+          paddingLeft: '12px',
+          paddingRight: '2.4em'
+        }
+      },
+      placeholder: { text: '发送消息', style: { color: '#bcbcbc' } }
+    }"
+    :submitButtonStyles="{
+      submit: {
+        container: {
+          default: {
+            transform: 'scale(1.21)',
+            marginBottom: '-3px',
+            marginRight: '0.4em'
+          }
+        }
+      }
+    }"
+    :history="[
+      { text: '预防心梗、脑梗的方法？', role: 'user' },
+      {
+        text: '预防心梗和脑梗的关键方法包括保持健康的生活方式，如均衡饮食、定期锻炼、控制血压和血脂、戒烟限酒以及管理压力。',
+        role: 'ai'
+      }
+    ]"
+    :demo="true"
+    :connect="{ stream: true }"
+  />
+</template>
--- a/src/views/chatai/components/Group.vue
+++ b/src/views/chatai/components/Group.vue
@@ -0,0 +1,60 @@
+<script setup lang="ts">
+import "deep-chat";
+import { ref, onMounted } from "vue";
+
+const chatRef = ref();
+
+onMounted(() => {
+  chatRef.value.demo = {
+    response: message => {
+      console.log(message);
+      return {
+        text: "仅演示，如需AI服务，请参考 https://deepchat.dev/docs/connect"
+      };
+    }
+  };
+});
+</script>
+
+<template>
+  <deep-chat
+    ref="chatRef"
+    auxiliaryStyle="
+    .deep-chat-top-message .message-bubble {
+        border-top-left-radius: 5px !important;
+        border-top-right-radius: 5px !important;
+    }
+    .deep-chat-middle-message .message-bubble {
+        margin-top: 0px;
+    }
+    .deep-chat-bottom-message .message-bubble {
+        margin-top: 0px;
+        border-bottom-left-radius: 5px !important;
+        border-bottom-right-radius: 5px !important;
+    }
+    .deep-chat-top-message.deep-chat-bottom-message .message-bubble {
+      margin-top: 10px;
+    }"
+    :messageStyles="{
+      default: {
+        shared: {
+          bubble: {
+            borderRadius: '0px'
+          }
+        }
+      }
+    }"
+    :textInput="{
+      placeholder: { text: '发送消息' }
+    }"
+    :history="[
+      { text: '组1', role: 'group1' },
+      { text: '组2-1', role: 'group2' },
+      { text: '组2-2', role: 'group2' },
+      { text: '组2-3', role: 'group2' },
+      { text: '组3-1', role: 'group3' },
+      { text: '组3-2', role: 'group3' }
+    ]"
+    :demo="true"
+  />
+</template>
--- a/src/views/chatai/components/IntroPanel.vue
+++ b/src/views/chatai/components/IntroPanel.vue
@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import "deep-chat";
+import { ref, onMounted } from "vue";
+
+const chatRef = ref();
+
+onMounted(() => {
+  chatRef.value.demo = {
+    response: message => {
+      console.log(message);
+      return {
+        text: "仅演示，如需AI服务，请参考 https://deepchat.dev/docs/connect"
+      };
+    }
+  };
+});
+</script>
+
+<template>
+  <deep-chat
+    ref="chatRef"
+    :textInput="{
+      placeholder: { text: '发送消息' }
+    }"
+    demo="true"
+    style="border-radius: 8px"
+  >
+    <div
+      style="
+        display: none;
+        width: 200px;
+        padding: 12px;
+        padding-bottom: 15px;
+        background-color: #f3f3f3;
+        border-radius: 10px;
+      "
+    >
+      <div>
+        <div style="margin-bottom: 8px; font-size: 16px; text-align: center">
+          <b>简介面板</b>
+        </div>
+        <div style="font-size: 15px; line-height: 20px">
+          插入描述以帮助您的用户了解如何使用该组件
+        </div>
+      </div>
+    </div>
+  </deep-chat>
+</template>
--- a/src/views/chatai/components/LoFi.vue
+++ b/src/views/chatai/components/LoFi.vue
@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import "deep-chat";
+import { ref, onMounted } from "vue";
+
+const chatRef = ref();
+
+onMounted(() => {
+  chatRef.value.demo = {
+    response: message => {
+      console.log(message);
+      return {
+        text: "仅演示，如需AI服务，请参考 https://deepchat.dev/docs/connect"
+      };
+    }
+  };
+});
+</script>
+
+<template>
+  <deep-chat
+    ref="chatRef"
+    style="
+      border-radius: 10px;
+      border: unset;
+      background-image: url(&quot;https://xiaoxian521.github.io/hyperlink/img/vue-pure-admin/chatai/lofi.png&quot;);
+      background-size: cover;
+    "
+    :messageStyles="{
+      default: {
+        user: {
+          bubble: {
+            background:
+              'linear-gradient(90deg, rgb(225 37 255) 0%, rgb(161, 99, 233) 100%)',
+            color: 'white'
+          }
+        },
+        ai: {
+          bubble: {
+            background:
+              'linear-gradient(90deg, rgb(0, 162, 255) 30%, rgb(197 119 255) 100%)',
+            color: 'white'
+          }
+        }
+      },
+      loading: {
+        message: {
+          styles: {
+            bubble: {
+              background:
+                'linear-gradient(90deg, rgb(0, 162, 255) 30%, rgb(197 119 255) 100%)',
+              color: 'white'
+            }
+          }
+        }
+      }
+    }"
+    :textInput="{
+      placeholder: { text: '发送消息' },
+      styles: {
+        container: {
+          backgroundColor: 'rgb(239 245 255)',
+          color: '#0d008d'
+        }
+      }
+    }"
+    :submitButtonStyles="{
+      submit: {
+        svg: {
+          styles: {
+            default: {
+              filter:
+                'brightness(0) saturate(100%) invert(26%) sepia(95%) saturate(6989%) hue-rotate(288deg) brightness(107%) contrast(122%)'
+            }
+          }
+        }
+      }
+    }"
+    auxiliaryStyle="
+    ::-webkit-scrollbar {
+      width: 10px;
+      height: 10px;
+    }
+    ::-webkit-scrollbar-thumb {
+      background-color: #54a7ff;
+      border-radius: 5px;
+    }
+    ::-webkit-scrollbar-track {
+      background-color: unset;
+    }"
+    :history="[
+      { text: '公认的最减肥运动推荐一个？', role: 'user' },
+      {
+        text: '公认的最减肥运动之一是高强度间歇训练（HIIT），它通过短时间内的高强度运动和短暂休息交替进行，不仅在运动过程中燃烧大量卡路里，还能通过“后燃效应”让身体在运动结束后继续消耗热量。',
+        role: 'ai'
+      }
+    ]"
+    :demo="true"
+    :connect="{ stream: true }"
+  />
+</template>
--- a/src/views/chatai/components/MessageCode.vue
+++ b/src/views/chatai/components/MessageCode.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import "deep-chat";
+import { ref, onMounted } from "vue";
+import hljs from "highlight.js";
+// @ts-expect-error
+window.hljs = hljs;
+
+const chatRef = ref();
+
+onMounted(() => {
+  chatRef.value.demo = {
+    response: message => {
+      console.log(message);
+      return {
+        text: "仅演示，如需AI服务，请参考 https://deepchat.dev/docs/connect"
+      };
+    }
+  };
+});
+</script>
+
+<template>
+  <deep-chat
+    ref="chatRef"
+    style="border-radius: 8px"
+    :history="[
+      {
+        text: '```java\nwhile (i < 5) {\n console.log(&quot;hi&quot;);\n i+= 1;\n}\n```',
+        role: 'ai'
+      }
+    ]"
+    :textInput="{
+      placeholder: { text: '发送消息' }
+    }"
+    :messageStyles="{
+      default: {
+        shared: {
+          bubble: { maxWidth: '270px' }
+        }
+      }
+    }"
+    :demo="true"
+  />
+</template>
--- a/src/views/chatai/components/Red.vue
+++ b/src/views/chatai/components/Red.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import "deep-chat";
+import { ref, onMounted } from "vue";
+
+const chatRef = ref();
+
+onMounted(() => {
+  chatRef.value.demo = {
+    response: message => {
+      console.log(message);
+      return {
+        text: "仅演示，如需AI服务，请参考 https://deepchat.dev/docs/connect"
+      };
+    }
+  };
+});
+</script>
+
+<template>
+  <deep-chat
+    ref="chatRef"
+    :messageStyles="{
+      default: { user: { bubble: { backgroundColor: '#ff2020' } } }
+    }"
+    :avatars="{
+      ai: {
+        src: 'https://xiaoxian521.github.io/hyperlink/img/vue-pure-admin/chatai/robot.png'
+      }
+    }"
+    :submitButtonStyles="{
+      submit: {
+        svg: {
+          styles: {
+            default: {
+              filter:
+                'brightness(0) saturate(100%) invert(15%) sepia(50%) saturate(6203%) hue-rotate(352deg) brightness(111%) contrast(127%)'
+            }
+          }
+        }
+      }
+    }"
+    :textInput="{
+      styles: {
+        container: {
+          border: '1px solid #ffd9d9',
+          backgroundColor: '#fffcfc'
+        }
+      },
+      placeholder: { text: '发送消息' }
+    }"
+    auxiliaryStyle="
+    ::-webkit-scrollbar-thumb {
+      background-color: red;
+    }"
+    :history="[
+      { text: '健身的最佳时间？', role: 'user' },
+      {
+        text: '健身的最佳时间是根据个人作息和偏好而定，但一般建议在下午或傍晚进行锻炼以达到最佳状态。',
+        role: 'ai'
+      }
+    ]"
+    :demo="true"
+    :connect="{ stream: true }"
+  />
+</template>
--- a/src/views/chatai/components/Speech.vue
+++ b/src/views/chatai/components/Speech.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import "deep-chat";
+import { ref, onMounted } from "vue";
+
+const chatRef = ref();
+
+onMounted(() => {
+  chatRef.value.demo = {
+    response: message => {
+      console.log(message);
+      return {
+        text: "仅演示，如需AI服务，请参考 https://deepchat.dev/docs/connect"
+      };
+    }
+  };
+});
+</script>
+
+<template>
+  <deep-chat
+    ref="chatRef"
+    style="border-radius: 8px"
+    :speechToText="{
+      webSpeech: { language: 'zh-CN' },
+      button: { position: 'outside-left' }
+    }"
+    :textInput="{
+      placeholder: { text: '发送消息' }
+    }"
+    :introMessage="{
+      text: '单击左下角麦克风开始转录您的讲话。'
+    }"
+    :demo="true"
+  />
+</template>
--- a/src/views/chatai/components/iMessage.vue
+++ b/src/views/chatai/components/iMessage.vue
@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import "deep-chat";
+import { ref, onMounted } from "vue";
+
+const chatRef = ref();
+
+onMounted(() => {
+  chatRef.value.demo = {
+    response: message => {
+      console.log(message);
+      return {
+        text: "仅演示，如需AI服务，请参考 https://deepchat.dev/docs/connect"
+      };
+    }
+  };
+});
+</script>
+
+<template>
+  <deep-chat
+    ref="chatRef"
+    style="
+      border-radius: 10px;
+      font-size: 16px;
+      font-family:
+        system-ui, &quot;Segoe UI&quot;, Roboto, Helvetica, Arial, sans-serif,
+        &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;,
+        &quot;Segoe UI Symbol&quot;;
+    "
+    :messageStyles="{
+      default: {
+        shared: {
+          bubble: {
+            maxWidth: '75%',
+            borderRadius: '1em',
+            padding: '.42em .7em',
+            fontSize: '15px'
+          }
+        },
+        user: { bubble: { backgroundColor: '#00c82a' } }
+      },
+      loading: {
+        message: {
+          styles: {
+            bubble: { padding: '0.6em 0.75em 0.6em 1.3em' }
+          }
+        }
+      }
+    }"
+    :submitButtonStyles="{
+      submit: {
+        container: {
+          default: {
+            width: '0.95em',
+            height: '0.95em',
+            justifyContent: 'center',
+            display: 'flex',
+            borderRadius: '25px',
+            padding: '0.3em',
+            backgroundColor: '#00c82a'
+          }
+        },
+        svg: {
+          content:
+            '<svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 115.4 122.88&quot;><path d=&quot;M24.94,67.88A14.66,14.66,0,0,1,4.38,47L47.83,4.21a14.66,14.66,0,0,1,20.56,0L111,46.15A14.66,14.66,0,0,1,90.46,67.06l-18-17.69-.29,59.17c-.1,19.28-29.42,19-29.33-.25L43.14,50,24.94,67.88Z&quot;/></svg>',
+          styles: {
+            default: {
+              filter:
+                'brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(315deg) brightness(99%) contrast(102%)',
+              transform: 'scale(0.95)'
+            }
+          }
+        }
+      }
+    }"
+    :textInput="{
+      placeholder: { text: '发送消息' },
+      styles: {
+        container: {
+          boxShadow: 'none',
+          borderRadius: '1em',
+          border: '1px solid rgba(0,0,0,0.2)'
+        },
+        text: {
+          padding: '0.4em 0.8em',
+          paddingRight: '2.5em'
+        }
+      }
+    }"
+    :images="true"
+    :dropupStyles="{
+      button: {
+        styles: {
+          container: {
+            default: {
+              width: '1.6em',
+              height: '1.6em',
+              borderRadius: '25px',
+              backgroundColor: '#8282821a'
+            }
+          },
+          svg: {
+            styles: {
+              default: {
+                width: '1em',
+                left: '5px',
+                top: '0.2em',
+                filter:
+                  'brightness(0) saturate(100%) invert(56%) sepia(0%) saturate(2755%) hue-rotate(104deg) brightness(96%) contrast(93%)'
+              }
+            },
+            content:
+              '<?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?><svg viewBox=&quot;0 0 24 24&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;><path d=&quot;M3,11h8V3a1,1,0,0,1,2,0v8h8a1,1,0,0,1,0,2H13v8a1,1,0,0,1-2,0V13H3a1,1,0,0,1,0-2Z&quot;/></svg>'
+          }
+        }
+      }
+    }"
+    :attachmentContainerStyle="{
+      backgroundColor: 'rgba(255, 255, 255, 0.6)',
+      borderRadius: '5px 5px 0 0',
+      border: '1px solid rgba(0,0,0,0.2)',
+      top: '-2.6em',
+      height: '4em'
+    }"
+    :history="[
+      { text: '钓鱼需要准备什么东西？', role: 'user' },
+      {
+        text: '钓鱼需要准备鱼竿、渔轮、钓线、鱼钩、浮漂、铅坠和适合的饵料。',
+        role: 'ai'
+      }
+    ]"
+    :demo="true"
+    :connect="{ stream: true }"
+  />
+</template>
--- a/src/views/chatai/components/index.ts
+++ b/src/views/chatai/components/index.ts
@@ -0,0 +1,13 @@
+export { default as ChatGPT } from "./ChatGPT.vue";
+export { default as Bard } from "./Bard.vue";
+export { default as Bing } from "./Bing.vue";
+export { default as iMessage } from "./iMessage.vue";
+export { default as Blue } from "./Blue.vue";
+export { default as LoFi } from "./LoFi.vue";
+export { default as Red } from "./Red.vue";
+export { default as Dark } from "./Dark.vue";
+export { default as FullInput } from "./FullInput.vue";
+export { default as Group } from "./Group.vue";
+export { default as MessageCode } from "./MessageCode.vue";
+export { default as Speech } from "./Speech.vue";
+export { default as IntroPanel } from "./IntroPanel.vue";
--- a/src/views/chatai/index.vue
+++ b/src/views/chatai/index.vue
@@ -0,0 +1,150 @@
+<script setup lang="ts">
+import { h } from "vue";
+import { ElEmpty } from "element-plus";
+import { deviceDetection } from "@pureadmin/utils";
+import {
+  ChatGPT,
+  Bard,
+  Bing,
+  iMessage,
+  Blue,
+  LoFi,
+  Red,
+  Dark,
+  FullInput,
+  Group,
+  MessageCode,
+  Speech,
+  IntroPanel
+} from "./components";
+
+defineOptions({
+  name: "ChatAi"
+});
+
+const swiperExample: any[] = [
+  { id: 0, label: "ChatGPT 风格", component: ChatGPT },
+  {
+    id: 1,
+    label: "Gemini 风格",
+    component: Bard
+  },
+  {
+    id: 2,
+    label: "BingChat 风格",
+    component: Bing
+  },
+  {
+    id: 3,
+    label: "iMessage 风格",
+    component: iMessage
+  },
+  {
+    id: 4,
+    label: "蓝色主题且可设置背景图像",
+    component: Blue
+  },
+  {
+    id: 5,
+    label: "渐变主题且可设置背景图像",
+    component: LoFi
+  },
+  {
+    id: 6,
+    label: "红色风格",
+    component: Red
+  },
+  {
+    id: 7,
+    label: "深色模式",
+    component: Dark
+  },
+  {
+    id: 8,
+    label: "全宽输入框",
+    component: FullInput
+  },
+  {
+    id: 9,
+    label: "分组消息",
+    component: Group
+  },
+  {
+    id: 10,
+    label: "代码消息",
+    component: MessageCode
+  },
+  {
+    id: 11,
+    label: "语音输入",
+    component: Speech
+  },
+  {
+    id: 12,
+    label: "简介面板",
+    component: IntroPanel
+  },
+  {
+    id: 13,
+    label: "更多示例",
+    component: h(ElEmpty, {
+      description: "敬请期待",
+      style: { minWidth: "320px", height: "350px" }
+    })
+  }
+];
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">
+          Ai聊天组件，采用开源的
+          <el-link
+            href="https://deepchat.dev/"
+            target="_blank"
+            style="margin: 0 4px 5px; font-size: 16px"
+          >
+            deep-chat
+          </el-link>
+        </span>
+      </div>
+      <el-link
+        class="mt-2"
+        href="https://github.com/pure-admin/vue-pure-admin/blob/main/src/views/chatai"
+        target="_blank"
+      >
+        代码位置 src/views/chatai
+      </el-link>
+    </template>
+    <el-space wrap>
+      <el-card
+        v-for="item in swiperExample"
+        :key="item.id"
+        :class="['mt-4', !deviceDetection() && 'ml-16']"
+      >
+        <template #header>
+          {{ item.label }}
+        </template>
+        <component :is="item.component" />
+      </el-card>
+    </el-space>
+  </el-card>
+</template>
+
+<style lang="scss" scoped>
+:deep(.el-card__body) {
+  overflow: auto;
+}
+
+@media screen and (width <= 750px) {
+  :deep(.el-card__body) {
+    padding: 12px;
+  }
+
+  .main-content {
+    margin: 0 !important;
+  }
+}
+</style>
--- a/src/views/components/el-button.vue
+++ b/src/views/components/el-button.vue
@@ -233,10 +233,10 @@ watch(size, val =>

 .el-button .custom-loading .circular .path {
  stroke: var(--el-button-text-color);
+  stroke-width: 2;
+  stroke-linecap: round;
  stroke-dasharray: 90, 150;
  stroke-dashoffset: 0;
-  stroke-linecap: round;
-  stroke-width: 2;
  animation: loading-dash 1.5s ease-in-out infinite;
 }
 </style>
--- a/src/views/components/message.vue
+++ b/src/views/components/message.vue
@@ -3,7 +3,7 @@ import { h } from "vue";
 import hot from "@/assets/svg/hot.svg?component";
 import { message, closeAllMessage } from "@/utils/message";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
-import Check from "@iconify-icons/ep/check";
+import Check from "~icons/ep/check";

 defineOptions({
  name: "Message"
--- a/src/views/components/segmented.vue
+++ b/src/views/components/segmented.vue
@@ -1,7 +1,7 @@
 <script setup lang="tsx">
 import { h, ref, watch } from "vue";
 import { message } from "@/utils/message";
-import HomeFilled from "@iconify-icons/ep/home-filled";
+import HomeFilled from "~icons/ep/home-filled";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 import Segmented, { type OptionsType } from "@/components/ReSegmented";

--- a/src/views/components/slider/components/Base.vue
+++ b/src/views/components/slider/components/Base.vue
@@ -51,10 +51,10 @@ const formatTooltip = (val: number) => {
  flex: 1;
  margin-bottom: 0;
  overflow: hidden;
+  text-overflow: ellipsis;
  font-size: 14px;
  line-height: 44px;
  color: var(--el-text-color-secondary);
-  text-overflow: ellipsis;
  white-space: nowrap;
 }

--- a/src/views/components/slider/components/Step.vue
+++ b/src/views/components/slider/components/Step.vue
@@ -32,10 +32,10 @@ const value2 = ref(0);
  flex: 1;
  margin-bottom: 0;
  overflow: hidden;
+  text-overflow: ellipsis;
  font-size: 14px;
  line-height: 44px;
  color: var(--el-text-color-secondary);
-  text-overflow: ellipsis;
  white-space: nowrap;
 }

--- a/src/views/components/timeline.vue
+++ b/src/views/components/timeline.vue
@@ -3,7 +3,7 @@ import { markRaw } from "vue";
 import { randomGradient } from "@pureadmin/utils";
 import { useRenderFlicker } from "@/components/ReFlicker";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
-import Iphone from "@iconify-icons/ep/iphone";
+import Iphone from "~icons/ep/iphone";

 defineOptions({
  name: "TimeLine"
--- a/src/views/components/upload/form.vue
+++ b/src/views/components/upload/form.vue
@@ -4,7 +4,7 @@ import { formUpload } from "@/api/mock";
 import { message } from "@/utils/message";
 import { createFormData } from "@pureadmin/utils";

-import UploadIcon from "@iconify-icons/ri/upload-2-line";
+import UploadIcon from "~icons/ri/upload-2-line";

 const formRef = ref();
 const uploadRef = ref();
--- a/src/views/components/upload/index.vue
+++ b/src/views/components/upload/index.vue
@@ -8,9 +8,9 @@ import { message } from "@/utils/message";
 import type { UploadFile } from "element-plus";
 import { getKeyList, extractFields, downloadByData } from "@pureadmin/utils";

-import Add from "@iconify-icons/ep/plus";
-import Eye from "@iconify-icons/ri/eye-line";
-import Delete from "@iconify-icons/ri/delete-bin-7-line";
+import Add from "~icons/ep/plus";
+import Eye from "~icons/ri/eye-line";
+import Delete from "~icons/ri/delete-bin-7-line";

 defineOptions({
  name: "PureUpload"
--- a/src/views/list/card/components/ListCard.vue
+++ b/src/views/list/card/components/ListCard.vue
@@ -5,7 +5,7 @@ import laptopIcon from "@/assets/svg/laptop.svg?component";
 import serviceIcon from "@/assets/svg/service.svg?component";
 import calendarIcon from "@/assets/svg/calendar.svg?component";
 import userAvatarIcon from "@/assets/svg/user_avatar.svg?component";
-import More2Fill from "@iconify-icons/ri/more-2-fill";
+import More2Fill from "~icons/ri/more-2-fill";

 defineOptions({
  name: "ReCard"
@@ -139,10 +139,10 @@ const cardLogoClass = computed(() => [
      height: 40px;
      margin-bottom: 24px;
      overflow: hidden;
-      font-size: 12px;
-      line-height: 20px;
      text-overflow: ellipsis;
      -webkit-line-clamp: 2;
+      font-size: 12px;
+      line-height: 20px;
      -webkit-box-orient: vertical;
    }
  }
--- a/src/views/list/card/index.vue
+++ b/src/views/list/card/index.vue
@@ -6,7 +6,7 @@ import { ref, onMounted, nextTick } from "vue";
 import ListCard from "./components/ListCard.vue";
 import ListDialogForm from "./components/ListDialogForm.vue";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
-import AddFill from "@iconify-icons/ri/add-circle-line";
+import AddFill from "~icons/ri/add-circle-line";

 defineOptions({
  name: "CardList"
--- a/src/views/login/components/LoginPhone.vue
+++ b/src/views/login/components/LoginPhone.vue
@@ -9,7 +9,8 @@ import { $t, transformI18n } from "@/plugins/i18n";
 import { useVerifyCode } from "../utils/verifyCode";
 import { useUserStoreHook } from "@/store/modules/user";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
-import Iphone from "@iconify-icons/ep/iphone";
+import Iphone from "~icons/ep/iphone";
+import Keyhole from "~icons/ri/shield-keyhole-line";

 const { t } = useI18n();
 const loading = ref(false);
@@ -64,7 +65,7 @@ function onBack() {
            v-model="ruleForm.verifyCode"
            clearable
            :placeholder="t('login.pureSmsVerifyCode')"
-            :prefix-icon="useRenderIcon('ri:shield-keyhole-line')"
+            :prefix-icon="useRenderIcon(Keyhole)"
          />
          <el-button
            :disabled="isDisabled"
--- a/src/views/login/components/LoginRegist.vue
+++ b/src/views/login/components/LoginRegist.vue
@@ -9,9 +9,10 @@ import { useVerifyCode } from "../utils/verifyCode";
 import { $t, transformI18n } from "@/plugins/i18n";
 import { useUserStoreHook } from "@/store/modules/user";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
-import Lock from "@iconify-icons/ri/lock-fill";
-import Iphone from "@iconify-icons/ep/iphone";
-import User from "@iconify-icons/ri/user-3-fill";
+import Lock from "~icons/ri/lock-fill";
+import Iphone from "~icons/ep/iphone";
+import User from "~icons/ri/user-3-fill";
+import Keyhole from "~icons/ri/shield-keyhole-line";

 const { t } = useI18n();
 const checked = ref(false);
@@ -118,7 +119,7 @@ function onBack() {
            v-model="ruleForm.verifyCode"
            clearable
            :placeholder="t('login.pureSmsVerifyCode')"
-            :prefix-icon="useRenderIcon('ri:shield-keyhole-line')"
+            :prefix-icon="useRenderIcon(Keyhole)"
          />
          <el-button
            :disabled="isDisabled"
--- a/src/views/login/components/LoginUpdate.vue
+++ b/src/views/login/components/LoginUpdate.vue
@@ -9,8 +9,9 @@ import { useVerifyCode } from "../utils/verifyCode";
 import { $t, transformI18n } from "@/plugins/i18n";
 import { useUserStoreHook } from "@/store/modules/user";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
-import Lock from "@iconify-icons/ri/lock-fill";
-import Iphone from "@iconify-icons/ep/iphone";
+import Lock from "~icons/ri/lock-fill";
+import Iphone from "~icons/ep/iphone";
+import Keyhole from "~icons/ri/shield-keyhole-line";

 const { t } = useI18n();
 const loading = ref(false);
@@ -88,7 +89,7 @@ function onBack() {
            v-model="ruleForm.verifyCode"
            clearable
            :placeholder="t('login.pureSmsVerifyCode')"
-            :prefix-icon="useRenderIcon('ri:shield-keyhole-line')"
+            :prefix-icon="useRenderIcon(Keyhole)"
          />
          <el-button
            :disabled="isDisabled"
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -28,10 +28,11 @@ import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
 import dayIcon from "@/assets/svg/day.svg?component";
 import darkIcon from "@/assets/svg/dark.svg?component";
 import globalization from "@/assets/svg/globalization.svg?component";
-import Lock from "@iconify-icons/ri/lock-fill";
-import Check from "@iconify-icons/ep/check";
-import User from "@iconify-icons/ri/user-3-fill";
-import Info from "@iconify-icons/ri/information-line";
+import Lock from "~icons/ri/lock-fill";
+import Check from "~icons/ep/check";
+import User from "~icons/ri/user-3-fill";
+import Info from "~icons/ri/information-line";
+import Keyhole from "~icons/ri/shield-keyhole-line";

 defineOptions({
  name: "Login"
@@ -224,7 +225,7 @@ watch(loginDay, value => {
                  v-model="ruleForm.verifyCode"
                  clearable
                  :placeholder="t('login.pureVerifyCode')"
-                  :prefix-icon="useRenderIcon('ri:shield-keyhole-line')"
+                  :prefix-icon="useRenderIcon(Keyhole)"
                >
                  <template v-slot:append>
                    <ReImageVerify v-model:code="imgCode" />
--- a/src/views/monitor/logs/login/index.vue
+++ b/src/views/monitor/logs/login/index.vue
@@ -5,8 +5,8 @@ import { getPickerShortcuts } from "../../utils";
 import { PureTableBar } from "@/components/RePureTableBar";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";

-import Delete from "@iconify-icons/ep/delete";
-import Refresh from "@iconify-icons/ep/refresh";
+import Delete from "~icons/ep/delete";
+import Refresh from "~icons/ep/refresh";

 defineOptions({
  name: "LoginLog"
--- a/src/views/monitor/logs/operation/index.vue
+++ b/src/views/monitor/logs/operation/index.vue
@@ -5,8 +5,8 @@ import { getPickerShortcuts } from "../../utils";
 import { PureTableBar } from "@/components/RePureTableBar";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";

-import Delete from "@iconify-icons/ep/delete";
-import Refresh from "@iconify-icons/ep/refresh";
+import Delete from "~icons/ep/delete";
+import Refresh from "~icons/ep/refresh";

 defineOptions({
  name: "OperationLog"
--- a/src/views/monitor/logs/system/hook.tsx
+++ b/src/views/monitor/logs/system/hook.tsx
@@ -6,7 +6,7 @@ import type { PaginationProps } from "@pureadmin/table";
 import { type Ref, reactive, ref, onMounted, toRaw } from "vue";
 import { getKeyList, useCopyToClipboard } from "@pureadmin/utils";
 import { getSystemLogsList, getSystemLogsDetail } from "@/api/system";
-import Info from "@iconify-icons/ri/question-line";
+import Info from "~icons/ri/question-line";

 export function useRole(tableRef: Ref) {
  const form = reactive({
--- a/src/views/monitor/logs/system/index.vue
+++ b/src/views/monitor/logs/system/index.vue
@@ -5,9 +5,9 @@ import { getPickerShortcuts } from "../../utils";
 import { PureTableBar } from "@/components/RePureTableBar";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";

-import View from "@iconify-icons/ep/view";
-import Delete from "@iconify-icons/ep/delete";
-import Refresh from "@iconify-icons/ep/refresh";
+import View from "~icons/ep/view";
+import Delete from "~icons/ep/delete";
+import Refresh from "~icons/ep/refresh";

 defineOptions({
  name: "SystemLog"
--- a/src/views/monitor/online/index.vue
+++ b/src/views/monitor/online/index.vue
@@ -4,8 +4,8 @@ import { useRole } from "./hook";
 import { PureTableBar } from "@/components/RePureTableBar";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";

-import Plane from "@iconify-icons/ri/plane-line";
-import Refresh from "@iconify-icons/ep/refresh";
+import Plane from "~icons/ri/plane-line";
+import Refresh from "~icons/ep/refresh";

 defineOptions({
  name: "OnlineUser"
--- a/src/views/result/columns.tsx
+++ b/src/views/result/columns.tsx
@@ -1,5 +1,5 @@
-import ArrowRightSLine from "@iconify-icons/ri/arrow-right-s-line";
-import CloseCircleLine from "@iconify-icons/ri/close-circle-line";
+import ArrowRightSLine from "~icons/ri/arrow-right-s-line";
+import CloseCircleLine from "~icons/ri/close-circle-line";

 export function useColumns() {
  const columns = [
--- a/src/views/system/dept/index.vue
+++ b/src/views/system/dept/index.vue
@@ -4,10 +4,10 @@ import { useDept } from "./utils/hook";
 import { PureTableBar } from "@/components/RePureTableBar";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";

-import Delete from "@iconify-icons/ep/delete";
-import EditPen from "@iconify-icons/ep/edit-pen";
-import Refresh from "@iconify-icons/ep/refresh";
-import AddFill from "@iconify-icons/ri/add-circle-line";
+import Delete from "~icons/ep/delete";
+import EditPen from "~icons/ep/edit-pen";
+import Refresh from "~icons/ep/refresh";
+import AddFill from "~icons/ri/add-circle-line";

 defineOptions({
  name: "SystemDept"
--- a/src/views/system/menu/index.vue
+++ b/src/views/system/menu/index.vue
@@ -5,10 +5,10 @@ import { transformI18n } from "@/plugins/i18n";
 import { PureTableBar } from "@/components/RePureTableBar";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";

-import Delete from "@iconify-icons/ep/delete";
-import EditPen from "@iconify-icons/ep/edit-pen";
-import Refresh from "@iconify-icons/ep/refresh";
-import AddFill from "@iconify-icons/ri/add-circle-line";
+import Delete from "~icons/ep/delete";
+import EditPen from "~icons/ep/edit-pen";
+import Refresh from "~icons/ep/refresh";
+import AddFill from "~icons/ri/add-circle-line";

 defineOptions({
  name: "SystemMenu"
--- a/src/views/system/role/index.vue
+++ b/src/views/system/role/index.vue
@@ -10,15 +10,15 @@ import {
  useResizeObserver
 } from "@pureadmin/utils";

-// import Database from "@iconify-icons/ri/database-2-line";
-// import More from "@iconify-icons/ep/more-filled";
-import Delete from "@iconify-icons/ep/delete";
-import EditPen from "@iconify-icons/ep/edit-pen";
-import Refresh from "@iconify-icons/ep/refresh";
-import Menu from "@iconify-icons/ep/menu";
-import AddFill from "@iconify-icons/ri/add-circle-line";
-import Close from "@iconify-icons/ep/close";
-import Check from "@iconify-icons/ep/check";
+// import Database from "~icons/ri/database-2-line";
+// import More from "~icons/ep/more-filled";
+import Delete from "~icons/ep/delete";
+import EditPen from "~icons/ep/edit-pen";
+import Refresh from "~icons/ep/refresh";
+import Menu from "~icons/ep/menu";
+import AddFill from "~icons/ri/add-circle-line";
+import Close from "~icons/ep/close";
+import Check from "~icons/ep/check";

 defineOptions({
  name: "SystemRole"
--- a/src/views/system/user/index.vue
+++ b/src/views/system/user/index.vue
@@ -5,14 +5,14 @@ import { useUser } from "./utils/hook";
 import { PureTableBar } from "@/components/RePureTableBar";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";

-import Upload from "@iconify-icons/ri/upload-line";
-import Role from "@iconify-icons/ri/admin-line";
-import Password from "@iconify-icons/ri/lock-password-line";
-import More from "@iconify-icons/ep/more-filled";
-import Delete from "@iconify-icons/ep/delete";
-import EditPen from "@iconify-icons/ep/edit-pen";
-import Refresh from "@iconify-icons/ep/refresh";
-import AddFill from "@iconify-icons/ri/add-circle-line";
+import Upload from "~icons/ri/upload-line";
+import Role from "~icons/ri/admin-line";
+import Password from "~icons/ri/lock-password-line";
+import More from "~icons/ep/more-filled";
+import Delete from "~icons/ep/delete";
+import EditPen from "~icons/ep/edit-pen";
+import Refresh from "~icons/ep/refresh";
+import AddFill from "~icons/ri/add-circle-line";

 defineOptions({
  name: "SystemUser"
--- a/src/views/system/user/tree.vue
+++ b/src/views/system/user/tree.vue
@@ -2,11 +2,11 @@
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
 import { ref, computed, watch, getCurrentInstance } from "vue";

-import Dept from "@iconify-icons/ri/git-branch-line";
-// import Reset from "@iconify-icons/ri/restart-line";
-import More2Fill from "@iconify-icons/ri/more-2-fill";
-import OfficeBuilding from "@iconify-icons/ep/office-building";
-import LocationCompany from "@iconify-icons/ep/add-location";
+import Dept from "~icons/ri/git-branch-line";
+// import Reset from "~icons/ri/restart-line";
+import More2Fill from "~icons/ri/more-2-fill";
+import OfficeBuilding from "~icons/ep/office-building";
+import LocationCompany from "~icons/ep/add-location";
 import ExpandIcon from "./svg/expand.svg?component";
 import UnExpandIcon from "./svg/unexpand.svg?component";

--- a/src/views/table/base/header-renderer/index.vue
+++ b/src/views/table/base/header-renderer/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useColumns } from "./columns";
-import Calendar from "@iconify-icons/ri/calendar-2-line";
+import Calendar from "~icons/ri/calendar-2-line";

 const { columns, filterTableData } = useColumns();
 </script>
--- a/src/views/table/edit/demo1/index.vue
+++ b/src/views/table/edit/demo1/index.vue
@@ -2,8 +2,8 @@
 import { useColumns } from "./columns";
 import Empty from "../empty.svg?component";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
-import AddFill from "@iconify-icons/ep/plus";
-import Delete from "@iconify-icons/ep/delete";
+import AddFill from "~icons/ep/plus";
+import Delete from "~icons/ep/delete";

 const { columns, dataList, onAdd, onDel } = useColumns();
 </script>
--- a/src/views/table/edit/demo3/columns.tsx
+++ b/src/views/table/edit/demo3/columns.tsx
@@ -1,8 +1,8 @@
 import { ref, computed } from "vue";
 import { tableDataEdit } from "../data";

-import EditPen from "@iconify-icons/ep/edit-pen";
-import Check from "@iconify-icons/ep/check";
+import EditPen from "~icons/ep/edit-pen";
+import Check from "~icons/ep/check";

 export function useColumns() {
  const editMap = ref({});
--- a/src/views/welcome/components/table/columns.tsx
+++ b/src/views/welcome/components/table/columns.tsx
@@ -2,8 +2,8 @@ import { tableData } from "../../data";
 import { delay } from "@pureadmin/utils";
 import { ref, onMounted, reactive } from "vue";
 import type { PaginationProps } from "@pureadmin/table";
-import ThumbUp from "@iconify-icons/ri/thumb-up-line";
-import Hearts from "@iconify-icons/ri/hearts-line";
+import ThumbUp from "~icons/ri/thumb-up-line";
+import Hearts from "~icons/ri/hearts-line";
 import Empty from "./empty.svg?component";

 export function useColumns() {
--- a/src/views/welcome/data.ts
+++ b/src/views/welcome/data.ts
@@ -1,8 +1,8 @@
 import { dayjs, cloneDeep, getRandomIntBetween } from "./utils";
-import GroupLine from "@iconify-icons/ri/group-line";
-import Question from "@iconify-icons/ri/question-answer-line";
-import CheckLine from "@iconify-icons/ri/chat-check-line";
-import Smile from "@iconify-icons/ri/star-smile-line";
+import GroupLine from "~icons/ri/group-line";
+import Question from "~icons/ri/question-answer-line";
+import CheckLine from "~icons/ri/chat-check-line";
+import Smile from "~icons/ri/star-smile-line";

 const days = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];