refactor: migrate to Vant and set up auto-imports

- replace uni-ui drawer and icon components with Vant equivalents - add unplugin-auto-import and unplugin-vue-components to Vite config - update project dependencies to compatible versions - generate auto-import and component type declaration files - clean up deprecated imports and commented code in home page components - fix App.vue to use lowercase router-view and script setup
2026-05-27 09:43:29 +08:00
parent 9282b2a9c5
commit e2e5a750fb
8 changed files with 725 additions and 347 deletions
--- a/auto-imports.d.ts
+++ b/auto-imports.d.ts
@@ -0,0 +1,10 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+// biome-ignore lint: disable
+export {}
+declare global {
+
+}
--- a/components.d.ts
+++ b/components.d.ts
@@ -0,0 +1,96 @@
+/* eslint-disable */
+// @ts-nocheck
+// biome-ignore lint: disable
+// oxlint-disable
+// ------
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+import { GlobalComponents } from 'vue'
+
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    AddCarCrad: typeof import('./src/components/AddCarCrad/index.vue')['default']
+    AiTabSwitch: typeof import('./src/components/AiTabSwitch/index.vue')['default']
+    Calender: typeof import('./src/components/Calender/index.vue')['default']
+    CheckBox: typeof import('./src/components/CheckBox/index.vue')['default']
+    CommandWrapper: typeof import('./src/components/CommandWrapper/index.vue')['default']
+    CreateServiceOrder: typeof import('./src/components/CreateServiceOrder/index.vue')['default']
+    CustomEmpty: typeof import('./src/components/CustomEmpty/index.vue')['default']
+    DateRangeSection: typeof import('./src/components/DateRangeSection/index.vue')['default']
+    Demo: typeof import('./src/components/FormCard/demo.vue')['default']
+    DetailPopup: typeof import('./src/components/DetailPopup/index.vue')['default']
+    Divider: typeof import('./src/components/Divider/index.vue')['default']
+    Feedback: typeof import('./src/components/Feedback/index.vue')['default']
+    FormCard: typeof import('./src/components/FormCard/index.vue')['default']
+    GoodDetail: typeof import('./src/components/GoodDetail/index.vue')['default']
+    ImageSwiper: typeof import('./src/components/ImageSwiper/index.vue')['default']
+    LocationCard: typeof import('./src/components/LocationCard/index.vue')['default']
+    LocationInfo: typeof import('./src/components/LocationInfo/index.vue')['default']
+    ModuleTitle: typeof import('./src/components/ModuleTitle/index.vue')['default']
+    Privacy: typeof import('./src/components/Privacy/index.vue')['default']
+    Qrcode: typeof import('./src/components/Qrcode/index.vue')['default']
+    RecordingWaveBtn: typeof import('./src/components/Speech/RecordingWaveBtn.vue')['default']
+    RefundPopup: typeof import('./src/components/RefundPopup/index.vue')['default']
+    ResponseIntro: typeof import('./src/components/ResponseIntro/index.vue')['default']
+    ResponseWrapper: typeof import('./src/components/ResponseWrapper/index.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    ServiceTipsWord: typeof import('./src/components/ServiceTipsWord/index.vue')['default']
+    SpriteAnimator: typeof import('./src/components/Sprite/SpriteAnimator.vue')['default']
+    Stepper: typeof import('./src/components/Stepper/index.vue')['default']
+    SumCard: typeof import('./src/components/SumCard/index.vue')['default']
+    SurveyQuestionnaire: typeof import('./src/components/SurveyQuestionnaire/index.vue')['default']
+    SwipeCards: typeof import('./src/components/SwipeCards/index.vue')['default']
+    TagsGroup: typeof import('./src/components/TagsGroup/index.vue')['default']
+    TopNavBar: typeof import('./src/components/TopNavBar/index.vue')['default']
+    UseDateRange: typeof import('./src/components/UseDateRange/index.vue')['default']
+    VanIcon: typeof import('vant/es')['Icon']
+    VanPopup: typeof import('vant/es')['Popup']
+    ZnIcon: typeof import('./src/components/ZnIcon/index.vue')['default']
+  }
+}
+
+// For TSX support
+declare global {
+  const AddCarCrad: typeof import('./src/components/AddCarCrad/index.vue')['default']
+  const AiTabSwitch: typeof import('./src/components/AiTabSwitch/index.vue')['default']
+  const Calender: typeof import('./src/components/Calender/index.vue')['default']
+  const CheckBox: typeof import('./src/components/CheckBox/index.vue')['default']
+  const CommandWrapper: typeof import('./src/components/CommandWrapper/index.vue')['default']
+  const CreateServiceOrder: typeof import('./src/components/CreateServiceOrder/index.vue')['default']
+  const CustomEmpty: typeof import('./src/components/CustomEmpty/index.vue')['default']
+  const DateRangeSection: typeof import('./src/components/DateRangeSection/index.vue')['default']
+  const Demo: typeof import('./src/components/FormCard/demo.vue')['default']
+  const DetailPopup: typeof import('./src/components/DetailPopup/index.vue')['default']
+  const Divider: typeof import('./src/components/Divider/index.vue')['default']
+  const Feedback: typeof import('./src/components/Feedback/index.vue')['default']
+  const FormCard: typeof import('./src/components/FormCard/index.vue')['default']
+  const GoodDetail: typeof import('./src/components/GoodDetail/index.vue')['default']
+  const ImageSwiper: typeof import('./src/components/ImageSwiper/index.vue')['default']
+  const LocationCard: typeof import('./src/components/LocationCard/index.vue')['default']
+  const LocationInfo: typeof import('./src/components/LocationInfo/index.vue')['default']
+  const ModuleTitle: typeof import('./src/components/ModuleTitle/index.vue')['default']
+  const Privacy: typeof import('./src/components/Privacy/index.vue')['default']
+  const Qrcode: typeof import('./src/components/Qrcode/index.vue')['default']
+  const RecordingWaveBtn: typeof import('./src/components/Speech/RecordingWaveBtn.vue')['default']
+  const RefundPopup: typeof import('./src/components/RefundPopup/index.vue')['default']
+  const ResponseIntro: typeof import('./src/components/ResponseIntro/index.vue')['default']
+  const ResponseWrapper: typeof import('./src/components/ResponseWrapper/index.vue')['default']
+  const RouterLink: typeof import('vue-router')['RouterLink']
+  const RouterView: typeof import('vue-router')['RouterView']
+  const ServiceTipsWord: typeof import('./src/components/ServiceTipsWord/index.vue')['default']
+  const SpriteAnimator: typeof import('./src/components/Sprite/SpriteAnimator.vue')['default']
+  const Stepper: typeof import('./src/components/Stepper/index.vue')['default']
+  const SumCard: typeof import('./src/components/SumCard/index.vue')['default']
+  const SurveyQuestionnaire: typeof import('./src/components/SurveyQuestionnaire/index.vue')['default']
+  const SwipeCards: typeof import('./src/components/SwipeCards/index.vue')['default']
+  const TagsGroup: typeof import('./src/components/TagsGroup/index.vue')['default']
+  const TopNavBar: typeof import('./src/components/TopNavBar/index.vue')['default']
+  const UseDateRange: typeof import('./src/components/UseDateRange/index.vue')['default']
+  const VanIcon: typeof import('vant/es')['Icon']
+  const VanPopup: typeof import('vant/es')['Popup']
+  const ZnIcon: typeof import('./src/components/ZnIcon/index.vue')['default']
+}
--- a/package.json
+++ b/package.json
@@ -11,12 +11,11 @@
    "test": "node --test src/**/*.test.ts"
  },
  "dependencies": {
-    "@vitejs/plugin-vue": "^6.0.7",
    "axios": "^1.16.1",
    "mitt": "^3.0.1",
    "pinia": "^3.0.3",
    "vant": "^4.9.24",
-    "vue": "^3.4.21",
+    "vue": "^3.5.13",
    "vue-i18n": "11.4.4",
    "vue-router": "^4.5.1"
  },
@@ -24,15 +23,19 @@
    "@tailwindcss/vite": "^4.1.12",
    "@tsconfig/node20": "^20.1.6",
    "@types/node": "^22.13.14",
-    "@vitejs/plugin-legacy": "^8.0.2",
-    "@vitejs/plugin-vue-jsx": "^5.1.5",
+    "@vant/auto-import-resolver": "^1.3.0",
+    "@vitejs/plugin-legacy": "^6.0.1",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vitejs/plugin-vue-jsx": "^4.1.1",
    "@vue/tsconfig": "^0.7.0",
    "concurrently": "^9.2.1",
-    "sass": "1.58.3",
+    "sass": "^1.70.0",
    "tailwindcss": "^4.1.12",
    "typescript": "^5.8.3",
+    "unplugin-auto-import": "^21.0.0",
+    "unplugin-vue-components": "^32.1.0",
    "vconsole": "^3.15.1",
-    "vite": "5.2.8",
-    "vue-tsc": "^2.2.10"
+    "vite": "^6.1.1",
+    "vue-tsc": "^2.1.10"
  }
 }
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="app-viewport text-ink-900">
-    <RouterView />
-  </div>
+  <router-view />
 </template>
+
+<script setup lang="ts">
+
+</script>
--- a/src/pages/home/components/DrawerSection/index.vue
+++ b/src/pages/home/components/DrawerSection/index.vue
@@ -1,14 +1,14 @@
 <template>
-  <uni-drawer ref="drawerRef" mode="left" :width="320">
+  <van-popup v-model:show="show" ref="drawerRef" position="left">
    <div class="drawer-home">
      <div class="drawer-home-nav">
-        <uni-icons type="closeempty" size="22" color="#333333" class="close-icon" @click="close" />
+        <van-icon name="cross" size="22" color="#333333" class="close-icon" @click="close" />
        <span class="title">我的</span>
      </div>

-      <MineSetting ref="mineSettingRef" @close="close" />
+      <!-- <MineSetting ref="mineSettingRef" @close="close" /> -->
    </div>
-  </uni-drawer>
+  </van-popup>
 </template>

 <script setup>
@@ -20,10 +20,12 @@ const drawerRef = ref(null);

 // 监听抽屉显示事件
 const mineSettingRef = ref(null);
+const show = ref(false);
+
 const open = async () => {
  await checkToken();

-  drawerRef.value?.open?.();
+  show.value = true;

  try {
    await mineSettingRef.value?.getLoginUserPhoneInfo?.();
@@ -33,7 +35,7 @@ const open = async () => {
 };

 // 监听抽屉隐藏事件
-const close = () => drawerRef.value?.close?.();
+const close = () => show.value = false;

 defineExpose({
  open,
--- a/src/pages/home/index.vue
+++ b/src/pages/home/index.vue
@@ -1,69 +1,70 @@
 <template>
  <div class="index-page w-full h-screen overflow-hidden bg-liner">
-    <ChatMainList @showDrawer="showDrawer" />
+    <!-- <ChatMainList @showDrawer="showDrawer" /> -->

    <!-- 日历组件 -->
-    <Calender :visible="calendarVisible" mode="single" :default-value="selectedDate" @close="handleCalendarClose"
-      @select="handleDateSelect" />
+    <!-- <Calender :visible="calendarVisible" mode="single" :default-value="selectedDate" @close="handleCalendarClose"
+      @select="handleDateSelect" /> -->

    <!-- 更多服务 -->
-    <MoreService />
+    <!-- <MoreService /> -->

    <!-- 抽屉组件 -->
    <DrawerSection ref="drawerRef" @close="closeDrawer" />
  </div>
 </template>

-<script setup>
+<script setup lang="ts">
 import { ref, onUnmounted, onMounted } from "vue";
-import { getUrlParams } from "@/utils/UrlParams";
-import { useAppStore } from "@/store";
-import { checkToken } from "@/hooks/useGoLogin";
-import ChatMainList from "./components/ChatMainList/index.vue";
-import MoreService from "./components/MoreService/index.vue";
+import { emitter } from '@/utils/events'
+// import { getUrlParams } from "@/utils/UrlParams";
+// import { useAppStore } from "@/store";
+// import { checkToken } from "@/hooks/useGoLogin";
+// import ChatMainList from "./components/ChatMainList/index.vue";
+// import MoreService from "./components/MoreService/index.vue";
 import DrawerSection from "./components/DrawerSection/index.vue";
-import Calender from "@/components/Calender/index.vue";
+// import Calender from "@/components/Calender/index.vue";

-const appStore = useAppStore();
-const calendarVisible = ref(false);
-const selectedDate = ref("");
+// const appStore = useAppStore();
+// const calendarVisible = ref(false);
+// const selectedDate = ref("");

-// 处理日历关闭
-const handleCalendarClose = () => {
-  calendarVisible.value = false;
-};
+// // 处理日历关闭
+// const handleCalendarClose = () => {
+//   calendarVisible.value = false;
+// };

-// 处理日期选择
-const handleDateSelect = (data) => {
-  selectedDate.value = data.date;
-  calendarVisible.value = false;
-  console.log("选择的日期:", data.date);
-  uni.$emit("selectCalendarDate", selectedDate.value); // 传回父组件
-};
+// // 处理日期选择
+// const handleDateSelect = (data) => {
+//   selectedDate.value = data.date;
+//   calendarVisible.value = false;
+//   console.log("选择的日期:", data.date);
+//   uni.$emit("selectCalendarDate", selectedDate.value); // 传回父组件
+// };

-const openCalendar = () => {
-  calendarVisible.value = true;
-};
+// const openCalendar = () => {
+//   calendarVisible.value = true;
+// };

 // 打开窗口
 const drawerRef = ref(null);
-const showDrawer = async (e) => {
-  await checkToken();
+const showDrawer = async () => {
+  // await checkToken();

  drawerRef.value?.open?.();
 };
 // 关闭窗口
-const closeDrawer = (e) => drawerRef.value?.close?.();
+const closeDrawer = () => drawerRef.value?.close?.();

-///获取到二维码原始链接内容
-const getWeixinMiniProgramParams = (e) => {
-  console.log("Params:", e);
-  if (e.q && e.q != "undefined") {
-    const qrUrl = decodeURIComponent(e.q);
-    const params = getUrlParams(qrUrl);
-    appStore.setSceneId(params.sceneId || params.tagId);
-  }
-};
+// ///获取到二维码原始链接内容
+// const getWeixinMiniProgramParams = (e) => {
+//   console.log("Params:", e);
+//   if (e.q && e.q != "undefined") {
+//     const qrUrl = decodeURIComponent(e.q);
+//     const params = getUrlParams(qrUrl);
+//     appStore.setSceneId(params.sceneId || params.tagId);
+//   }
+// };

 // TODO
 // onLoad((e) => {
@@ -71,13 +72,13 @@ const getWeixinMiniProgramParams = (e) => {
 // });

 onMounted(() => {
-  uni.$on("openCalendar", openCalendar);
-  uni.$on("SHOW_DRAWER", showDrawer);
+  // uni.$on("openCalendar", openCalendar);
+  emitter.on("SHOW_DRAWER", showDrawer);
 });

 onUnmounted(() => {
-  uni.$off("openCalendar", openCalendar);
-  uni.$off("SHOW_DRAWER", showDrawer);
+  // uni.$off("openCalendar", openCalendar);
+  emitter.off("SHOW_DRAWER", showDrawer);
 });
 </script>

--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,12 +1,26 @@
+import vue from "@vitejs/plugin-vue";
+import AutoImport from "unplugin-auto-import/vite";
+import Components from "unplugin-vue-components/vite";
+import { VantResolver } from "@vant/auto-import-resolver";
 import tailwindcss from "@tailwindcss/vite";
 import viteLegacy from "@vitejs/plugin-legacy";
-import viteVue from "@vitejs/plugin-vue";
 import viteVueJsx from "@vitejs/plugin-vue-jsx";
 import path from "path";
 import { defineConfig } from "vite";

 export default defineConfig({
-  plugins: [viteVue(), viteLegacy(), viteVueJsx(), tailwindcss()],
+  plugins: [
+    vue(),
+    AutoImport({
+      resolvers: [VantResolver()],
+    }),
+    Components({
+      resolvers: [VantResolver()],
+    }),
+    viteLegacy(),
+    viteVueJsx(),
+    tailwindcss(),
+  ],
  resolve: {
    alias: {
      "@": path.join(__dirname, "./src"),
--- a/yarn.lock
+++ b/yarn.lock