Merge pull request #5 from element-plus-x/feat-20250617-coder_zr

Feat 20250617 coder zr

.env.development

@@ -11,6 +11,4 @@ VITE_WEB_ENV = 'development'
 VITE_WEB_BASE_API = '/dev-api'
 
 # 本地接口
-# VITE_API_URL = http://122.51.75.95:6039
+VITE_API_URL = *
-VITE_API_URL = http://129.211.24.7:6039
-# VITE_API_URL = https://mp.pandarobot.chat

.env.production

@@ -13,8 +13,4 @@ VITE_WEB_BASE_API = '/prod-api'
 # 是否在打包时开启压缩，支持 gzip 和 brotli
 VITE_BUILD_COMPRESS = gzip
 
-# VITE_API_URL = http://122.51.75.95:6039
+VITE_API_URL = *
-# VITE_API_URL = http://129.211.24.7:6039
-VITE_API_URL = https://mp.pandarobot.chat
-
-

.release-it.json

@@ -0,0 +1,33 @@
+{
+  "plugins": {
+    "@release-it/conventional-changelog": {
+      "preset": {
+        "name": "conventionalcommits",
+        "types": [
+          { "type": "feat", "section": "✨ Features | 新功能" },
+          { "type": "fix", "section": "🐛 Bug Fixes | Bug 修复" },
+          { "type": "chore", "section": "🎫 Chores | 其他更新" },
+          { "type": "docs", "section": "📝 Documentation | 文档" },
+          { "type": "style", "section": "💄 Styles | 风格" },
+          { "type": "refactor", "section": "♻ Code Refactoring | 代码重构" },
+          { "type": "perf", "section": "⚡ Performance Improvements | 性能优化" },
+          { "type": "test", "section": "✅ Tests | 测试" },
+          { "type": "revert", "section": "⏪ Reverts | 回退" },
+          { "type": "build", "section": "👷‍ Build System | 构建" },
+          { "type": "ci", "section": "🔧 Continuous Integration | CI 配置" },
+          { "type": "config", "section": "🔨 CONFIG | 配置" }
+        ]
+      },
+      "infile": "CHANGELOG.md",
+      "ignoreRecommendedBump": true,
+      "strictSemVer": true
+    }
+  },
+  "git": {
+    "commitMessage": "chore: Release v${version}"
+  },
+  "github": {
+    "release": true,
+    "draft": false
+  }
+}

README.md

@@ -6,18 +6,27 @@
 
 </div>
 
+<div align="center">
+<img src="https://cdn.element-plus-x.com/chat/1.webp" />
+</div>
+
 ## 🚀 项目亮点
 
-**ruoyi-element-ai** 是基于 **Vue3.5** + **Element-Plus-X** + **TypeScript** 的企业级AI应用模板，搭配 **ruoyi-ai** 后端，快速构建仿豆包/通义的全栈AI项目。
+**ruoyi-element-ai** 是基于 **Vue3.5** + **Element-Plus-X** + **hook-fetch** + **TypeScript** + **Eslint9** 开发的企业级AI应用模板，搭配 **ruoyi-ai** 后端，快速构建仿豆包/通义的全栈AI项目。
 
 ## 💡 核心优势
-- 最新技术栈：Vue3.5/Vite5/Pinia3/TypeScript5.8
+- 最新技术栈：Vue3.5+/Vite6/Pinia3/TypeScript5
-- 流式交互：Hook-Fetch支持Server-Sent Events
+- 流式交互：Hook-Fetch支持Server-Sent Events，插件化写法优雅的一批
 - 企业级规范：ESLint/Stylelint/husky/commitlint全链路校验
-- 开箱即用：内置动态路由、状态管理、组件库封装
+- 全栈项目：集成 ruoyi-ai 后端服务，快速开发
+- 开箱即用：内置动态路由、状态管理、组件库封装、hooks封装
+
+## 🎯 开发文档
+
+帮助你快速熟悉项目
 
 <div align="center">
-<img src="https://cdn.element-plus-x.com/chat/1.webp" calss="element-plus-x-bubble" />
+<img src="https://cdn.element-plus-x.com/chat/docs1.webp" />
 </div>
 
 ## 🔗 关键链接
@@ -25,9 +34,9 @@
 | 功能模块         | 说明                          | 链接                                                                 |
 |------------------|-------------------------------|----------------------------------------------------------------------|
 | 🚀 前端仓库 | Gitee/GitHub 代码仓库(感谢 star🥰爱你爱你😘) | [Gitee](https://gitee.com/he-jiayue/ruoyi-element-ai) <br> [GitHub](https://github.com/element-plus-x/ruoyi-element-ai) |
-| 🛠️ 后端仓库 | 待补充（支持Java/Node）        | 待更新                                                               |
+| 🛠️ 后端仓库 | Java服务，功能丰富强大      |   [Gitee](https://gitee.com/ageerle/ruoyi-ai) <br> [GitHub](https://github.com/ageerle/ruoyi-ai)    |
-| 📚 前端文档 | 开发指南/组件说明              | [快速了解项目](https://chat-docs.element-plus-x.com)                 |
+| 📚 前端文档 | 开发指南/项目说明              | [快速了解项目](https://chat-docs.element-plus-x.com)       |
-| 📡 在线演示 | 实时交互体验                    | [立即访问](https://chat.element-plus-x.com)                          |
+| 📡 在线演示 | 实时交互体验                    | [在线预览](https://chat.element-plus-x.com)                          |
 
 ## 🧰 核心功能
 
@@ -68,16 +77,51 @@ pnpm lint:stylelint # 样式格式化
 pnpm cz            # 规范提交（自动执行lint）
 ```
 
+开发模式配置远程服务器地址:
+
+根目录下新建 `.env.development.local` 文件
+
+```bash
+VITE_API_URL = xxxxxxxxxxxxxxxxxxxxx
+```
+
+## 🪼 项目发版
+
+项目使用 `release-it` 进行发版
+
+默认更新次版本号，如果想每次更新修订号，可执行 pnpm release patch
+
+```bash
+# 更新主版本号
+ pnpm release major
+
+ # 更新次版本号
+ pnpm release minor
+
+ # 更新修订号
+ pnpm release patch
+```
+
+## 🧸 即将推出 （含 ruoyi-ai 接口联调）
+- [x] 会话管理
+- [x] 发送消息
+- [x] 登录注册
+- [ ] md 渲染
+- [ ] 编辑输入框
+- [ ] 文件上传
+- [ ] 其他...
+
 ## 🤝 社区支持
 | 👨‍👨‍👧‍👦 微信交流群                          | 💩 作者微信                          |
 |---------------------------------------|-------------------------------------|
-| <img src="https://cdn.element-plus-x.com/vx-2025-06-06.png" alt="微信交流群" width="100%"><br>扫码加入交流群<br>获取最新动态与技术支持 | <img src="https://cdn.element-plus-x.com/element-plus-x-author-vx.png" alt="作者vx" width="100%" ><br>群过期或失效？<br>扫码添加作者微信 |
+| <img src="https://cdn.element-plus-x.com/vx-2025-06-16.png" alt="微信交流群" width="230px" height="300px" ><br>扫码加入交流群<br>获取最新动态与技术支持 | <img src="https://cdn.element-plus-x.com/vx.png" alt="作者vx" width="230px" height="300px" ><br>群过期或失效？<br>扫码添加作者微信 |
 
-## 🌟 留下赞赏，助力开源
+## 🌹 赠人玫瑰，手有余香
 <div align="center">
-<h3 style="color: #fa8c16; margin-bottom: 10px;">🙊感谢您的支持！🙊</h3>
 <p>😍开源是热爱的坚持，您的每一份心意都让我们走得更远～😍</p>
-<p style="color: #666; margin: 15px 0;">💌 扫码赞赏，后续将截图保留，并公示赞赏记录💌<br>💖感谢每一份温暖助力 💖</p>
+<img src="https://cdn.element-plus-x.com/zs1.webp" alt="赞赏" width="230px" height="100%" />
-<img src="https://cdn.element-plus-x.com/zs.png" alt="赞赏" width="180" style="margin-bottom: 20px; border-radius: 4px;" />
+<h3 style="color: #fa8c16; margin-bottom: 10px;">🙊扫码赞赏，感谢您的支持！🙊</h3>
+<p style="color: #666; margin: 15px 0;">💖感谢每一份温暖助力💖</p>
+<p style="color: #666; margin: 15px 0;">💌 后续将截图保留，并公示赞赏记录 💌</p>
 </div>
 </div>

package.json

@@ -24,6 +24,7 @@
     "preview": "vite preview",
     "prepare": "husky",
     "lint": "eslint .",
+    "release": "release-it",
     "lint:stylelint": "stylelint --cache --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
     "fix": "eslint . --fix"
   },
@@ -37,6 +38,7 @@
     "@vueuse/integrations": "^13.3.0",
     "element-plus": "^2.9.11",
     "hook-fetch": "^1.1.3",
+    "moment": "^2.30.1",
     "nprogress": "^0.2.0",
     "pinia": "^3.0.3",
     "pinia-plugin-persistedstate": "^4.3.0",
@@ -51,6 +53,7 @@
     "@antfu/eslint-config": "^4.13.3",
     "@changesets/cli": "^2.29.4",
     "@commitlint/config-conventional": "^19.8.1",
+    "@release-it/conventional-changelog": "^10.0.1",
     "@vitejs/plugin-vue": "^5.2.4",
     "@vue/tsconfig": "^0.7.0",
     "commitlint": "^19.8.1",
@@ -59,6 +62,7 @@
     "husky": "^9.1.7",
     "lint-staged": "^16.1.0",
     "prettier": "^3.5.3",
+    "release-it": "^19.0.3",
     "sass-embedded": "^1.89.1",
     "stylelint": "^16.20.0",
     "stylelint-config-html": "^1.1.0",

src/App.vue

@@ -1,4 +1,5 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+</script>
 
 <template>
   <router-view />

src/components/LoginDialog/index.vue

@@ -113,8 +113,8 @@ function onAfterLeave() {
 /* 动画样式（仅作用于弹框） */
 .dialog-zoom-enter-active,
 .dialog-zoom-leave-active {
-  transition: all 0.3s ease-in-out;
   transform-origin: center;
+  transition: all 0.3s ease-in-out;
 }
 .dialog-zoom-enter-from,
 .dialog-zoom-leave-to {
@@ -141,8 +141,8 @@ function onAfterLeave() {
   overflow: hidden;
   user-select: none;
   background-color: rgb(0 0 0 / 50%);
-  backdrop-filter: blur(3px);
   opacity: 1;
+  backdrop-filter: blur(3px);
   transition: opacity 0.3s;
 }
 .mask[hidden] {
@@ -189,9 +189,9 @@ function onAfterLeave() {
   height: 40px;
   padding: 4px;
   background: var(--login-dialog-logo-background);
-  filter: drop-shadow(0 4px 4px rgb(0 0 0 / 10%));
   border-radius: 12px;
   box-shadow: 0 2px 12px 0 rgb(0 0 0 / 8%);
+  filter: drop-shadow(0 4px 4px rgb(0 0 0 / 10%));
 }
 .left-section .logo-wrap .logo-text {
   font-size: 16px;

src/hooks/useCurrentInstance.ts

@@ -0,0 +1,53 @@
+import type { ComponentInternalInstance } from 'vue';
+import type { RouteLocationNormalizedLoaded, Router } from 'vue-router';
+import { getCurrentInstance } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+interface Utils {
+  $is: {
+    [key: string]: (...args: any[]) => boolean;
+  };
+  $dataHelpers: {
+    [key: string]: (...args: any[]) => any;
+  };
+  $common: {
+    [key: string]: (...args: any[]) => any;
+  };
+}
+
+interface UseCurrentInstanceReturn {
+  currentInstance: ComponentInternalInstance;
+  proxy: ComponentInternalInstance['proxy'] & Utils;
+  router: Router;
+  route: RouteLocationNormalizedLoaded;
+  $is: Utils['$is'];
+  $dataHelpers: Utils['$dataHelpers'];
+  $common: Utils['$common'];
+}
+
+export function useCurrentInstance(): UseCurrentInstanceReturn {
+  const router = useRouter();
+  const route = useRoute();
+
+  const currentInstance = getCurrentInstance();
+
+  if (!currentInstance) {
+    throw new Error('useCurrentInstance必须在setup函数中调用💘');
+  }
+
+  const { proxy } = currentInstance as ComponentInternalInstance & { proxy: Utils };
+
+  const $is = proxy.$is;
+  const $dataHelpers = proxy.$dataHelpers;
+  const $common = proxy.$common;
+
+  return {
+    currentInstance,
+    proxy,
+    router,
+    route,
+    $is,
+    $dataHelpers,
+    $common,
+  };
+}

src/layouts/components/Aside/index.vue

@@ -329,12 +329,12 @@ function handleMenuCommand(command: string, item: ConversationItem<ChatSessionVo
     0 10px 20px 0 rgb(0 0 0 / 10%),
     0 0 1px 0 rgb(0 0 0 / 15%);
   opacity: 0;
-  transition: opacity 0.3s ease 0.3s, transform 0.3s ease 0.3s;
 
   // 指定样式过渡
 
   // 向左偏移一个宽度
   transform: translateX(-100%);
+  transition: opacity 0.3s ease 0.3s, transform 0.3s ease 0.3s;
 
   /* 新增：未激活悬停时覆盖延迟 */
   &.no-delay {
@@ -358,10 +358,10 @@ function handleMenuCommand(command: string, item: ConversationItem<ChatSessionVo
 
   // 直接在这里写悬停时的样式（与 aside-container-suspended 一致）
   opacity: 1;
-  transition: opacity 0.3s ease 0s, transform 0.3s ease 0s;
 
   // 过渡动画沿用原有设置
   transform: translateX(15px);
+  transition: opacity 0.3s ease 0s, transform 0.3s ease 0s;
 
   // 会话列表高度-悬停样式
   .conversations-wrap {

src/main.ts

@@ -1,9 +1,8 @@
-// 引入ElementPlus所有图标
-import * as ElementPlusIconsVue from '@element-plus/icons-vue';
 import { ElMessage } from 'element-plus';
 import { createApp } from 'vue';
 import ElementPlusX from 'vue-element-plus-x';
 import App from './App.vue';
+import { registerPlugins } from './plugins';
 import router from './routers';
 import store from './stores';
 import './styles/index.scss';
@@ -14,13 +13,13 @@ import 'virtual:svg-icons-register';
 
 const app = createApp(App);
 
+// 插件安装
+registerPlugins(app);
+
 app.use(router);
 app.use(ElMessage);
 app.use(ElementPlusX);
-// 注册ElementPlus所有图标
+
-for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
-  app.component(key, component);
-}
 app.use(store);
 
 app.mount('#app');

src/plugins/index.ts

@@ -0,0 +1,19 @@
+import type { App, Plugin } from 'vue';
+
+interface PluginModule { default: Plugin }
+
+const modules = import.meta.glob<PluginModule>('./modules/*.ts', { eager: true });
+
+export function registerPlugins(app: App) {
+  Object.values(modules).forEach((module) => {
+    if (typeof module.default === 'object' && module.default && typeof module.default.install === 'function') {
+      app.use(module.default);
+    }
+    else if (typeof module.default === 'function') {
+      app.use(module.default);
+    }
+    else {
+      console.warn('插件模块无效:', module);
+    }
+  });
+}

src/plugins/modules/elementPlusIconsPlugin.ts

@@ -0,0 +1,13 @@
+import type { App } from 'vue';
+import * as ElementPlusIconsVue from '@element-plus/icons-vue';
+
+const elementPlusIconsPlugin = {
+  install(app: App) {
+    // 注册所有ElementPlus图标
+    for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+      app.component(key, component);
+    }
+  },
+};
+
+export default elementPlusIconsPlugin;

src/plugins/modules/utilsPlugin.ts

@@ -0,0 +1,26 @@
+import type { App, InjectionKey } from 'vue';
+import * as common from '../../utils/helper/common';
+import * as dataHelpers from '../../utils/helper/dataHelpers';
+import * as is from '../../utils/helper/is';
+
+export const COMMON_KEY: InjectionKey<typeof common> = Symbol('$common');
+export const IS_KEY: InjectionKey<typeof is> = Symbol('$is');
+export const DATA_HELPERS_KEY: InjectionKey<typeof dataHelpers> = Symbol('$dataHelpers');
+
+const utilsPlugin = {
+  install(app: App) {
+    // common工具
+    app.config.globalProperties.$common = common;
+    app.provide(COMMON_KEY, common);
+
+    // 类型检测工具
+    app.config.globalProperties.$is = is;
+    app.provide(IS_KEY, is);
+
+    // 数据处理工具
+    app.config.globalProperties.$dataHelpers = dataHelpers;
+    app.provide(DATA_HELPERS_KEY, dataHelpers);
+  },
+};
+
+export default utilsPlugin;

src/routers/modules/staticRouter.ts

@@ -16,9 +16,9 @@ export const layoutRouter: RouteRecordRaw[] = [
           // title: '通用聊天页面',
           isDefaultChat: true,
           icon: 'HomeFilled',
-          isHide: '1',
+          // isHide: '1', // 是否在菜单中隐藏[0是，1否] 预留
-          isKeepAlive: '0', // 是否缓存路由数据[0是，1否]
+          // isKeepAlive: '0', // 是否缓存路由数据[0是，1否] 预留
-          isFull: '1', // 是否缓存全屏[0是，1否]
+          // isFull: '1', // 是否全屏[0是，1否] 预留
           // enName: "Master Station", // 英文名称 预留
         },
       },

src/styles/element-plus.scss

@@ -1,15 +1,15 @@
 .el-form{
   .el-form-item{
     &:nth-last-child(1){
-      margin-bottom: 0px;
+      margin-bottom: 0;
     }
   }
 }
 
 // el 弹框不知道为啥宽度会变大
 .el-popup-parent--hidden {
-  overflow: hidden;
   width: 100% !important;
+  overflow: hidden;
 }
 
 
@@ -22,29 +22,73 @@
 
 // rounded-tooltip 提示框样式
 .rounded-tooltip {
-  border-radius: 10px !important;
   display: flex;
   align-items: center;
   height: fit-content;
+  border-radius: 10px !important;
 }
-
 .rounded-tooltip-enter-from {
-  transform: scale(0.9); /* 进入前：缩小隐藏 */
   opacity: 0;
+  transform: scale(0.9); /* 进入前：缩小隐藏 */
 }
 .rounded-tooltip-enter-active,
 .rounded-tooltip-leave-active {
   transition: transform 0.3s, opacity 0.3s; /* 缓入动画 */
 }
 .rounded-tooltip-enter-to {
-  transform: scale(1); /* 进入后：正常大小 */
   opacity: 1;
+  transform: scale(1); /* 进入后：正常大小 */
 }
 .rounded-tooltip-leave-from {
-  transform: scale(1); /* 离开前：正常大小 */
   opacity: 1;
+  transform: scale(1); /* 离开前：正常大小 */
 }
 .rounded-tooltip-leave-to {
-  transform: scale(0.9); /* 离开后：缩小隐藏 */
   opacity: 0;
+  transform: scale(0.9); /* 离开后：缩小隐藏 */
 }
+
+/* S Dialog 样式行为 */
+.dialog-fade-enter-active .el-dialog {
+  animation: dialog-open 0.2s cubic-bezier(0.33, 0.89, 0.25, 1.02);
+}
+.dialog-fade-leave-active {
+  animation: fade-out 0.2s linear;
+}
+.dialog-fade-leave-active .el-dialog {
+  animation: dialog-close 0.2s cubic-bezier(0.78, 0.14, 0.15, 0.86);
+}
+
+@keyframes dialog-open {
+  0% {
+    opacity: 0;
+    transform: scale(0.2);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes dialog-close {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0.2);
+  }
+}
+
+// 遮罩层动画
+@keyframes fade-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+/* E Dialog 样式行为 */

src/styles/var.scss

@@ -13,7 +13,7 @@
   --login-dialog-section-padding: 0px;
   --login-dialog-border-radius: 24px;
   --login-dialog-mode-toggle-color: #409eff;
-  --login-dialog-logo-background: #fff;
+  --login-dialog-logo-background: #ffffff;
   --login-dialog-logo-text-color: #191919;
 
 

src/utils/helper/common.ts

@@ -0,0 +1,7 @@
+/**
+ * 非处理数据的功能性工具汇总
+ *
+ */
+export function test() {
+  return '';
+}

src/utils/helper/dataHelpers.ts

@@ -0,0 +1,30 @@
+import type { MomentInput } from 'moment';
+import moment from 'moment';
+
+/**
+ * 数据处理工具汇总
+ * formatDate 日期格式化
+ */
+
+/**
+ * 日期格式化字符串形式
+ * @param date 日期输入（支持时间戳、日期字符串、Date 对象或 Moment 对象）
+ * @param format 模式，默认为 'YYYY-MM-DD HH:mm:ss'
+ * @returns 格式化时间字符串，若输入无效则返回空字符串
+ */
+export function formatDate(
+  date: MomentInput | null | undefined,
+  format: string = 'YYYY-MM-DD HH:mm:ss',
+): string {
+  if (!date) {
+    return '';
+  }
+
+  const momentDate = moment(date);
+  if (!momentDate.isValid()) {
+    console.warn('Invalid date input:', date);
+    return '';
+  }
+
+  return momentDate.format(format);
+}

src/utils/helper/is.ts

@@ -0,0 +1,59 @@
+/*
+ * 数据类型检测工具汇总
+ * * * @function isArray: 检测给定的值是否为数组
+ * * * @function isObject: 检测给定的值是否为对象（注意：在JavaScript中，数组和null也会被认为是对象）
+ * * * @function isString: 检测给定的值是否为字符串
+ * * * @function isNumber: 检测给定的值是否为数字
+ * * * @function isFunction: 检测给定的值是否为函数（包括异步函数）
+ * * * @function isAsyncFunction: 检测给定的值是否为异步函数
+ * * * @function isRegExp: 检测给定的值是否为正则表达式对象
+ * * * @function isDef: 检测给定的值是否已定义（即不是undefined）
+ * * * @function isUnDef: 检测给定的值是否未定义（即为undefined）
+ * * * @function isNull: 检测给定的值是否为null
+ */
+
+type DataType = 'Array' | 'Object' | 'String' | 'Number' | 'Function' | 'AsyncFunction' | 'RegExp' | 'Undefined' | 'Null';
+
+export function dataTypeCheck<T extends DataType>(value: unknown, type: T): value is T extends 'Array' ? unknown[] : T extends 'Object' ? object : T extends 'String' ? string : T extends 'Number' ? number : T extends 'Function' ? (...args: any[]) => any : T extends 'AsyncFunction' ? (...args: any[]) => Promise<any> : T extends 'RegExp' ? RegExp : T extends 'Undefined' ? undefined : T extends 'Null' ? null : never {
+  return Object.prototype.toString.call(value) === `[object ${type}]`;
+}
+
+export function isArray(value: unknown): value is unknown[] {
+  return dataTypeCheck(value, 'Array');
+}
+
+export function isObject(value: unknown): value is object {
+  return dataTypeCheck(value, 'Object');
+}
+
+export function isString(value: unknown): value is string {
+  return dataTypeCheck(value, 'String');
+}
+
+export function isNumber(value: unknown): value is number {
+  return dataTypeCheck(value, 'Number');
+}
+
+export function isFunction(value: unknown): value is (...args: any[]) => any {
+  return dataTypeCheck(value, 'Function') || isAsyncFunction(value);
+}
+
+export function isAsyncFunction(value: unknown): value is (...args: any[]) => Promise<any> {
+  return dataTypeCheck(value, 'AsyncFunction');
+}
+
+export function isRegExp(value: unknown): value is RegExp {
+  return dataTypeCheck(value, 'RegExp');
+}
+
+export function isDef<T>(value: T): value is NonNullable<T> {
+  return !dataTypeCheck(value, 'Undefined');
+}
+
+export function isUnDef(value: unknown): value is undefined {
+  return !isDef(value);
+}
+
+export function isNull(value: unknown): value is null {
+  return dataTypeCheck(value, 'Null');
+}

types/auto-imports.d.ts

@@ -6,85 +6,68 @@
 // biome-ignore lint: disable
 export {}
 declare global {
-  const EffectScope: (typeof import("vue"))["EffectScope"];
+  const EffectScope: typeof import('vue')['EffectScope']
-  const ElMessage: (typeof import("element-plus/es"))["ElMessage"];
+  const ElMessage: typeof import('element-plus/es')['ElMessage']
-  const ElMessageBox: (typeof import("element-plus/es"))["ElMessageBox"];
+  const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']
-  const computed: (typeof import("vue"))["computed"];
+  const computed: typeof import('vue')['computed']
-  const createApp: (typeof import("vue"))["createApp"];
+  const createApp: typeof import('vue')['createApp']
-  const customRef: (typeof import("vue"))["customRef"];
+  const customRef: typeof import('vue')['customRef']
-  const defineAsyncComponent: (typeof import("vue"))["defineAsyncComponent"];
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
-  const defineComponent: (typeof import("vue"))["defineComponent"];
+  const defineComponent: typeof import('vue')['defineComponent']
-  const effectScope: (typeof import("vue"))["effectScope"];
+  const effectScope: typeof import('vue')['effectScope']
-  const getCurrentInstance: (typeof import("vue"))["getCurrentInstance"];
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
-  const getCurrentScope: (typeof import("vue"))["getCurrentScope"];
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
-  const h: (typeof import("vue"))["h"];
+  const h: typeof import('vue')['h']
-  const inject: (typeof import("vue"))["inject"];
+  const inject: typeof import('vue')['inject']
-  const isProxy: (typeof import("vue"))["isProxy"];
+  const isProxy: typeof import('vue')['isProxy']
-  const isReactive: (typeof import("vue"))["isReactive"];
+  const isReactive: typeof import('vue')['isReactive']
-  const isReadonly: (typeof import("vue"))["isReadonly"];
+  const isReadonly: typeof import('vue')['isReadonly']
-  const isRef: (typeof import("vue"))["isRef"];
+  const isRef: typeof import('vue')['isRef']
-  const markRaw: (typeof import("vue"))["markRaw"];
+  const markRaw: typeof import('vue')['markRaw']
-  const nextTick: (typeof import("vue"))["nextTick"];
+  const nextTick: typeof import('vue')['nextTick']
-  const onActivated: (typeof import("vue"))["onActivated"];
+  const onActivated: typeof import('vue')['onActivated']
-  const onBeforeMount: (typeof import("vue"))["onBeforeMount"];
+  const onBeforeMount: typeof import('vue')['onBeforeMount']
-  const onBeforeUnmount: (typeof import("vue"))["onBeforeUnmount"];
+  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
-  const onBeforeUpdate: (typeof import("vue"))["onBeforeUpdate"];
+  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
-  const onDeactivated: (typeof import("vue"))["onDeactivated"];
+  const onDeactivated: typeof import('vue')['onDeactivated']
-  const onErrorCaptured: (typeof import("vue"))["onErrorCaptured"];
+  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
-  const onMounted: (typeof import("vue"))["onMounted"];
+  const onMounted: typeof import('vue')['onMounted']
-  const onRenderTracked: (typeof import("vue"))["onRenderTracked"];
+  const onRenderTracked: typeof import('vue')['onRenderTracked']
-  const onRenderTriggered: (typeof import("vue"))["onRenderTriggered"];
+  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
-  const onScopeDispose: (typeof import("vue"))["onScopeDispose"];
+  const onScopeDispose: typeof import('vue')['onScopeDispose']
-  const onServerPrefetch: (typeof import("vue"))["onServerPrefetch"];
+  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
-  const onUnmounted: (typeof import("vue"))["onUnmounted"];
+  const onUnmounted: typeof import('vue')['onUnmounted']
-  const onUpdated: (typeof import("vue"))["onUpdated"];
+  const onUpdated: typeof import('vue')['onUpdated']
-  const onWatcherCleanup: (typeof import("vue"))["onWatcherCleanup"];
+  const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
-  const provide: (typeof import("vue"))["provide"];
+  const provide: typeof import('vue')['provide']
-  const reactive: (typeof import("vue"))["reactive"];
+  const reactive: typeof import('vue')['reactive']
-  const readonly: (typeof import("vue"))["readonly"];
+  const readonly: typeof import('vue')['readonly']
-  const ref: (typeof import("vue"))["ref"];
+  const ref: typeof import('vue')['ref']
-  const resolveComponent: (typeof import("vue"))["resolveComponent"];
+  const resolveComponent: typeof import('vue')['resolveComponent']
-  const shallowReactive: (typeof import("vue"))["shallowReactive"];
+  const shallowReactive: typeof import('vue')['shallowReactive']
-  const shallowReadonly: (typeof import("vue"))["shallowReadonly"];
+  const shallowReadonly: typeof import('vue')['shallowReadonly']
-  const shallowRef: (typeof import("vue"))["shallowRef"];
+  const shallowRef: typeof import('vue')['shallowRef']
-  const toRaw: (typeof import("vue"))["toRaw"];
+  const toRaw: typeof import('vue')['toRaw']
-  const toRef: (typeof import("vue"))["toRef"];
+  const toRef: typeof import('vue')['toRef']
-  const toRefs: (typeof import("vue"))["toRefs"];
+  const toRefs: typeof import('vue')['toRefs']
-  const toValue: (typeof import("vue"))["toValue"];
+  const toValue: typeof import('vue')['toValue']
-  const triggerRef: (typeof import("vue"))["triggerRef"];
+  const triggerRef: typeof import('vue')['triggerRef']
-  const unref: (typeof import("vue"))["unref"];
+  const unref: typeof import('vue')['unref']
-  const useAttrs: (typeof import("vue"))["useAttrs"];
+  const useAttrs: typeof import('vue')['useAttrs']
-  const useCssModule: (typeof import("vue"))["useCssModule"];
+  const useCssModule: typeof import('vue')['useCssModule']
-  const useCssVars: (typeof import("vue"))["useCssVars"];
+  const useCssVars: typeof import('vue')['useCssVars']
-  const useId: (typeof import("vue"))["useId"];
+  const useId: typeof import('vue')['useId']
-  const useModel: (typeof import("vue"))["useModel"];
+  const useModel: typeof import('vue')['useModel']
-  const useSlots: (typeof import("vue"))["useSlots"];
+  const useSlots: typeof import('vue')['useSlots']
-  const useTemplateRef: (typeof import("vue"))["useTemplateRef"];
+  const useTemplateRef: typeof import('vue')['useTemplateRef']
-  const watch: (typeof import("vue"))["watch"];
+  const watch: typeof import('vue')['watch']
-  const watchEffect: (typeof import("vue"))["watchEffect"];
+  const watchEffect: typeof import('vue')['watchEffect']
-  const watchPostEffect: (typeof import("vue"))["watchPostEffect"];
+  const watchPostEffect: typeof import('vue')['watchPostEffect']
-  const watchSyncEffect: (typeof import("vue"))["watchSyncEffect"];
+  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
 }
 // for type re-export
 declare global {
   // @ts-ignore
-  export type {
+  export type { Component, Slot, Slots, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
-    Component,
+  import('vue')
-    Slot,
-    Slots,
-    ComponentPublicInstance,
-    ComputedRef,
-    DirectiveBinding,
-    ExtractDefaultPropTypes,
-    ExtractPropTypes,
-    ExtractPublicPropTypes,
-    InjectionKey,
-    PropType,
-    Ref,
-    MaybeRef,
-    MaybeRefOrGetter,
-    VNode,
-    WritableComputedRef,
-  } from "vue";
-  import("vue");
 }

types/components.d.ts

@@ -3,7 +3,7 @@
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
 // biome-ignore lint: disable
-export {};
+export {}
 
 /* prettier-ignore */
 declare module 'vue' {

vite.config.ts

@@ -13,6 +13,8 @@ export default defineConfig((cnf) => {
     resolve: {
       alias: {
         "@": path.resolve(__dirname, "./src"),
+        "~": path.resolve(__dirname, "./src/assets"),
+        "GCnps": path.resolve(__dirname, "./src/components"),
       },
     },
     css: {