├── public
    ├── CNAME
    ├── favicon.svg
    ├── element-plus-logo-small.svg
    └── vite.svg
├── src
    ├── composables
    │   ├── index.ts
    │   └── dark.ts
    ├── assets
    │   ├── fonts
    │   │   ├── Poppins-Bold.ttf
    │   │   └── Poppins-Regular.otf
    │   ├── vue.svg
    │   └── images
    │   │   └── logo.svg
    ├── types
    │   ├── common_type.ts
    │   └── user_type.ts
    ├── pages
    │   ├── front
    │   │   ├── UserInfo.vue
    │   │   ├── Notice.vue
    │   │   ├── Wanted.vue
    │   │   ├── Home.vue
    │   │   └── Publish.vue
    │   ├── error
    │   │   └── 404.vue
    │   └── Login
    │   │   └── index.vue
    ├── router
    │   ├── index.ts
    │   └── routes.ts
    ├── styles
    │   ├── element
    │   │   ├── dark.scss
    │   │   └── index.scss
    │   └── index.scss
    ├── App.vue
    ├── api
    │   ├── common.ts
    │   ├── user.ts
    │   └── request.ts
    ├── env.d.ts
    ├── main.ts
    ├── components
    │   ├── layouts
    │   │   ├── index.vue
    │   │   ├── BaseHeader.vue
    │   │   ├── BaseSide.vue
    │   │   └── BaseFooter.vue
    │   └── Logos.vue
    ├── utils
    │   ├── validate.ts
    │   └── message.ts
    ├── store
    │   └── user.ts
    ├── components.d.ts
    └── auto-imports.d.ts
├── .npmrc
├── .vscode
    └── extensions.json
├── scanshoot
    └── kd-shop.png
├── .env.development
├── .gitignore
├── index.html
├── tsconfig.json
├── package.json
├── README.md
└── vite.config.ts


/public/CNAME:
--------------------------------------------------------------------------------
1 | vite-starter.element-plus.org
2 | 


--------------------------------------------------------------------------------
/src/composables/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./dark";
2 | 


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | shamefully-hoist=true
2 | strict-peer-dependencies=false
3 | 


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | 
2 | {
3 |   "recommendations": ["Vue.volar"]
4 | }
5 | 


--------------------------------------------------------------------------------
/scanshoot/kd-shop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lvr1997/kd-shop-web/HEAD/scanshoot/kd-shop.png


--------------------------------------------------------------------------------
/src/assets/fonts/Poppins-Bold.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lvr1997/kd-shop-web/HEAD/src/assets/fonts/Poppins-Bold.ttf


--------------------------------------------------------------------------------
/src/assets/fonts/Poppins-Regular.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/lvr1997/kd-shop-web/HEAD/src/assets/fonts/Poppins-Regular.otf


--------------------------------------------------------------------------------
/.env.development:
--------------------------------------------------------------------------------
1 | NODE_ENV=development
2 | VITE_APP_BASE_URL=/devApi
3 | VITE_APP_BASE_API=http://localhost:3000
4 | VITE_APP_TITLE=I have


--------------------------------------------------------------------------------
/src/composables/dark.ts:
--------------------------------------------------------------------------------
1 | import { useDark, useToggle } from "@vueuse/core";
2 | 
3 | export const isDark = useDark();
4 | export const toggleDark = useToggle(isDark);
5 | 


--------------------------------------------------------------------------------
/src/types/common_type.ts:
--------------------------------------------------------------------------------
 1 | type ResponseType = {
 2 |     code: number,
 3 |     data: any,
 4 |     msg: string
 5 | }
 6 | 
 7 | export {
 8 |     ResponseType
 9 | }
10 | 


--------------------------------------------------------------------------------
/src/types/user_type.ts:
--------------------------------------------------------------------------------
 1 | type RequestData = {
 2 |     username: string,
 3 |     password: string,
 4 |     code: string
 5 | }
 6 | 
 7 | export {
 8 |     RequestData
 9 | }
10 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .vite-ssg-temp
 2 | 
 3 | node_modules
 4 | .DS_Store
 5 | dist
 6 | dist-ssr
 7 | *.local
 8 | 
 9 | # lock
10 | yarn.lock
11 | package-lock.json
12 | pnpm-lock.yaml
13 | 
14 | *.log
15 | 
16 | .vscode/
17 | 


--------------------------------------------------------------------------------
/src/pages/front/UserInfo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <section class="UserInfo">
 3 |     
 4 |   </section>
 5 | </template>
 6 | 
 7 | <script setup lang="ts">
 8 | </script>
 9 | 
10 | <style scoped>
11 | 
12 | </style>
13 | 


--------------------------------------------------------------------------------
/src/pages/error/404.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <section class="404">
 3 |     Not Fround Page
 4 |   </section>
 5 | </template>
 6 | 
 7 | <script setup lang="ts">
 8 | </script>
 9 | 
10 | <style scoped>
11 | 
12 | </style>
13 | 


--------------------------------------------------------------------------------
/src/router/index.ts:
--------------------------------------------------------------------------------
1 | import { createRouter, createWebHashHistory } from 'vue-router'
2 | import routes from './routes'
3 | 
4 | const router = createRouter({
5 |     history: createWebHashHistory(),
6 |     routes
7 | })
8 | 
9 | export default router


--------------------------------------------------------------------------------
/src/styles/element/dark.scss:
--------------------------------------------------------------------------------
 1 | // only scss variables
 2 | 
 3 | $--colors: (
 4 |   "primary": (
 5 |     "base": #589ef8,
 6 |   ),
 7 | );
 8 | 
 9 | @forward "element-plus/theme-chalk/src/dark/var.scss" with (
10 |   $colors: $--colors
11 | );
12 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <el-config-provider namespace="ep">
 3 |     <RouterView/>
 4 |   </el-config-provider>
 5 | </template>
 6 | 
 7 | <script setup lang="ts">
 8 | 
 9 | </script>
10 | 
11 | <style>
12 | #app {
13 |   text-align: center;
14 |   color: var(--ep-text-color-primary);
15 | }
16 | </style>
17 | 


--------------------------------------------------------------------------------
/src/api/common.ts:
--------------------------------------------------------------------------------
 1 | import instance from "./request";
 2 | /**
 3 |  * 获取验证码
 4 |  */
 5 | export function GetCode(data: any) {
 6 |   return instance.request({
 7 |     method: "POST",
 8 |     url: "/getCode/",
 9 |     data,
10 |   });
11 | }
12 | 
13 | /**
14 |  * http状态码异常演示接口
15 |  */
16 | export function ErrorHttp(data: any) {
17 |   return instance.request({
18 |     method: "POST",
19 |     url: "/error/",
20 |     data,
21 |   });
22 | }
23 | 


--------------------------------------------------------------------------------
/src/env.d.ts:
--------------------------------------------------------------------------------
 1 | /// <reference types="vite/client" />
 2 | 
 3 | declare module '*.vue' {
 4 |   import { DefineComponent } from 'vue'
 5 |   const component: DefineComponent<{}, {}, any>
 6 |   export default component
 7 | }
 8 | 
 9 | interface ImportMetaEnv {
10 |   readonly VITE_APP_TITLE: string
11 |   readonly VITE_APP_BASE_URL: string
12 |   readonly VITE_APP_BASE_API: string
13 | }
14 | 
15 | interface ImportMeta {
16 |   readonly env: ImportMetaEnv
17 | }


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { createPinia } from 'pinia';
 2 | import { createApp } from "vue";
 3 | import App from "./App.vue";
 4 | import router from "./router";
 5 | 
 6 | // import "~/styles/element/index.scss";
 7 | 
 8 | import "element-plus/theme-chalk/src/message.scss";
 9 | 
10 | import "uno.css";
11 | import "~/styles/index.scss";
12 | 
13 | const pinia = createPinia()
14 | 
15 | const app = createApp(App);
16 | 
17 | app.use(router);
18 | app.use(pinia)
19 | app.mount("#app");
20 | 


--------------------------------------------------------------------------------
/src/assets/vue.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
2 | 


--------------------------------------------------------------------------------
/src/components/layouts/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <BaseHeader />
 3 |   <div class="flex main-container">
 4 |     <div w="full">
 5 |       <RouterView />
 6 |     </div>
 7 |   </div>
 8 |   <BaseFooter />
 9 | 
10 |   <!-- 新增：返回顶部按钮 -->
11 |   <el-backtop :right="100" :bottom="120" />
12 | </template>
13 | 
14 | <script setup lang="ts">
15 | import BaseHeader from './BaseHeader.vue';
16 | </script>
17 | 
18 | <style scoped>
19 | .main-container {
20 |   padding-bottom: var(--footer); /* 新增：防止内容被 BaseFooter 遮挡 */
21 | }
22 | </style>


--------------------------------------------------------------------------------
/src/api/user.ts:
--------------------------------------------------------------------------------
 1 | import instance from "./request";
 2 | /**
 3 |  * 注册接口
 4 |  */
 5 | export function Register(data = {}) {
 6 |   return instance.request({
 7 |     method: "POST",
 8 |     url: "/register/",
 9 |     data,
10 |   });
11 | }
12 | 
13 | /** 登录 */
14 | export function Login(data = {}) {
15 |   return instance.request({
16 |     method: "post",
17 |     url: "/login/",
18 |     data,
19 |   });
20 | }
21 | 
22 | /** 登出 */
23 | export function Logout() {
24 |   return instance.request({
25 |     method: "post",
26 |     url: "/logout/",
27 |   });
28 | }
29 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <link rel="icon" href="/favicon.svg" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 |     <title>Element Plus Vite Starter</title>
 8 |     <!-- element css cdn, if you use custom theme, remove it. -->
 9 |     <!-- <link
10 |       rel="stylesheet"
11 |       href="https://cdn.jsdelivr.net/npm/element-plus/dist/index.css"
12 |     /> -->
13 |   </head>
14 |   <body>
15 |     <div id="app"></div>
16 |     <script type="module" src="/src/main.ts"></script>
17 |   </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "baseUrl": ".",
 4 |     "target": "esnext",
 5 |     "useDefineForClassFields": true,
 6 |     "module": "esnext",
 7 |     "moduleResolution": "node",
 8 |     "strict": true,
 9 |     "jsx": "preserve",
10 |     "sourceMap": true,
11 |     "resolveJsonModule": true,
12 |     "esModuleInterop": true,
13 |     "lib": ["esnext", "dom"],
14 |     "paths": {
15 |       "~/*": ["src/*"]
16 |     },
17 |     "skipLibCheck": true,
18 |     "types": ["element-plus/global"]
19 |   },
20 |   "vueCompilerOptions": {
21 |     "target": 3
22 |   },
23 |   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
24 |   "exclude": ["node_modules"]
25 | }
26 | 


--------------------------------------------------------------------------------
/src/styles/index.scss:
--------------------------------------------------------------------------------
 1 | // import dark theme
 2 | @use "element-plus/theme-chalk/src/dark/css-vars.scss" as *;
 3 | 
 4 | :root {
 5 |   // --ep-color-primary: red;
 6 |   --footer: 96px;
 7 | }
 8 | 
 9 | body {
10 |   font-family: Inter, system-ui, Avenir, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
11 |     "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
12 |   -webkit-font-smoothing: antialiased;
13 |   -moz-osx-font-smoothing: grayscale;
14 |   margin: 0;
15 |   // overflow: hidden;
16 | }
17 | 
18 | a {
19 |   color: var(--ep-color-primary);
20 | }
21 | 
22 | code {
23 |   border-radius: 2px;
24 |   padding: 2px 4px;
25 |   background-color: var(--ep-color-primary-light-9);
26 |   color: var(--ep-color-primary);
27 | }
28 | 


--------------------------------------------------------------------------------
/src/utils/validate.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * 校验规则
 3 |  */
 4 | const regEmail = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
 5 | const regPhone = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/;
 6 | const reg_username = /^[a-zA-Z][a-zA-Z0-9]{4,15}$/;
 7 | const regPassword = /^(?!\D+$)(?![^a-zA-Z]+$)\S{6,20}$/;
 8 | const regCode = /^[a-z0-9]{6}$/;
 9 | 
10 | // 校验手机号
11 | export const validate_phone = (value: string) : boolean => regPhone.test(value);
12 | 
13 | //校验邮箱
14 | export const validate_email = (value: string) : boolean => regEmail.test(value);
15 | 
16 | // 校验密码
17 | export const validate_password = (value: string) : boolean => regPassword.test(value);
18 | 
19 | // 校验验证码
20 | export const validate_code = (value: any) : boolean => regCode.test(value);
21 | 


--------------------------------------------------------------------------------
/src/components/Logos.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <a href="https://vitejs.dev" target="_blank">
 4 |       <img src="/vite.svg" class="logo" alt="Vite logo" />
 5 |     </a>
 6 |     <a href="https://vuejs.org/" target="_blank">
 7 |       <img src="../assets/vue.svg" class="logo vue" alt="Vue logo" />
 8 |     </a>
 9 |     <a href="https://element-plus.org/" target="_blank">
10 |       <img src="/element-plus-logo-small.svg" class="logo element-plus" alt="Element Plus logo" />
11 |     </a>
12 |   </div>
13 | </template>
14 | 
15 | <style scoped>
16 | .logo {
17 |   height: 6em;
18 |   padding: 1.5em;
19 |   will-change: filter;
20 |   transition: filter 300ms;
21 | }
22 | .logo:hover {
23 |   filter: drop-shadow(0 0 2em #646cffaa);
24 | }
25 | .logo.vue:hover {
26 |   filter: drop-shadow(0 0 2em #42b883aa);
27 | }
28 | .logo.element-plus:hover {
29 |   filter: drop-shadow(0 0 2em #409effaa);
30 | }
31 | </style>
32 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "element-plus-vite-starter",
 3 |   "private": true,
 4 |   "version": "0.1.0",
 5 |   "scripts": {
 6 |     "dev": "vite",
 7 |     "build": "vite build",
 8 |     "generate": "vite-ssg build",
 9 |     "preview": "vite preview",
10 |     "typecheck": "vue-tsc --noEmit"
11 |   },
12 |   "dependencies": {
13 |     "axios": "^1.7.7",
14 |     "element-plus": "^2.8.5",
15 |     "pinia": "^2.2.4",
16 |     "vue": "^3.5.12",
17 |     "vue-router": "^4.4.5",
18 |     "zod": "^3.23.8"
19 |   },
20 |   "devDependencies": {
21 |     "@iconify-json/ep": "^1.1.15",
22 |     "@types/node": "^20.11.30",
23 |     "@vitejs/plugin-vue": "^5.0.4",
24 |     "sass": "^1.79.3",
25 |     "typescript": "^5.4.3",
26 |     "unocss": "^0.58.6",
27 |     "unplugin-auto-import": "^0.18.3",
28 |     "unplugin-vue-components": "^0.26.0",
29 |     "vite": "^5.2.5",
30 |     "vite-ssg": "^0.23.6",
31 |     "vue-tsc": "^2.0.7"
32 |   },
33 |   "license": "MIT"
34 | }
35 | 


--------------------------------------------------------------------------------
/public/favicon.svg:
--------------------------------------------------------------------------------
1 | <svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><defs><style>.cls-1{fill:#409eff;fill-rule:evenodd;}</style></defs><title>element plus-logo-small 副本</title><path id="element_plus-logo-small" data-name="element plus-logo-small" class="cls-1" d="M37.41,32.37c0,1.57-.83,1.93-.83,1.93L21.51,43A1.69,1.69,0,0,1,20,43S5.2,34.4,4.66,34a1.29,1.29,0,0,1-.55-1V15.24c0-.78,1-1.33,1-1.33L19.86,5.36a2,2,0,0,1,1.79,0l14.46,8.41a2.06,2.06,0,0,1,1.25,2.06V32.37Zm-5.9-17L21.35,9.5a1.59,1.59,0,0,0-1.41,0L8.33,16.15s-.77.46-.76,1.08,0,13.92,0,13.92A1,1,0,0,0,8,31.9c.43.3,12,7,12,7a1.31,1.31,0,0,0,1.19,0C21.91,38.5,33,32.11,33,32.11s.65-.28.65-1.51V27.13l-13,7.9V32a3.05,3.05,0,0,1,1-2.07L33.2,23a2.44,2.44,0,0,0,.55-1.46V18.43L20.64,26.35v-3.2a2.22,2.22,0,0,1,.83-1.79ZM41.07,4.22a.39.39,0,0,0-.37-.42H38V1.06c0-.16-.26-.22-.53-.22L36,1.08c-.18,0-.31.12-.31.23V3.8H33a.4.4,0,0,0-.36.37v2h3V9c0,.16.26.27.54.23l1.51-.25c.18,0,.29-.13.29-.23V6.14h3Z"/></svg>


--------------------------------------------------------------------------------
/public/element-plus-logo-small.svg:
--------------------------------------------------------------------------------
1 | <svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><defs><style>.cls-1{fill:#409eff;fill-rule:evenodd;}</style></defs><title>element plus-logo-small 副本</title><path id="element_plus-logo-small" data-name="element plus-logo-small" class="cls-1" d="M37.41,32.37c0,1.57-.83,1.93-.83,1.93L21.51,43A1.69,1.69,0,0,1,20,43S5.2,34.4,4.66,34a1.29,1.29,0,0,1-.55-1V15.24c0-.78,1-1.33,1-1.33L19.86,5.36a2,2,0,0,1,1.79,0l14.46,8.41a2.06,2.06,0,0,1,1.25,2.06V32.37Zm-5.9-17L21.35,9.5a1.59,1.59,0,0,0-1.41,0L8.33,16.15s-.77.46-.76,1.08,0,13.92,0,13.92A1,1,0,0,0,8,31.9c.43.3,12,7,12,7a1.31,1.31,0,0,0,1.19,0C21.91,38.5,33,32.11,33,32.11s.65-.28.65-1.51V27.13l-13,7.9V32a3.05,3.05,0,0,1,1-2.07L33.2,23a2.44,2.44,0,0,0,.55-1.46V18.43L20.64,26.35v-3.2a2.22,2.22,0,0,1,.83-1.79ZM41.07,4.22a.39.39,0,0,0-.37-.42H38V1.06c0-.16-.26-.22-.53-.22L36,1.08c-.18,0-.31.12-.31.23V3.8H33a.4.4,0,0,0-.36.37v2h3V9c0,.16.26.27.54.23l1.51-.25c.18,0,.29-.13.29-.23V6.14h3Z"/></svg>


--------------------------------------------------------------------------------
/src/styles/element/index.scss:
--------------------------------------------------------------------------------
 1 | $--colors: (
 2 |   "primary": (
 3 |     "base": green,
 4 |   ),
 5 |   "success": (
 6 |     "base": #21ba45,
 7 |   ),
 8 |   "warning": (
 9 |     "base": #f2711c,
10 |   ),
11 |   "danger": (
12 |     "base": #db2828,
13 |   ),
14 |   "error": (
15 |     "base": #db2828,
16 |   ),
17 |   "info": (
18 |     "base": #42b8dd,
19 |   ),
20 | );
21 | 
22 | // we can add this to custom namespace, default is 'el'
23 | @forward "element-plus/theme-chalk/src/mixins/config.scss" with (
24 |   $namespace: "ep"
25 | );
26 | 
27 | // You should use them in scss, because we calculate it by sass.
28 | // comment next lines to use default color
29 | @forward "element-plus/theme-chalk/src/common/var.scss" with (
30 |   // do not use same name, it will override.
31 |   $colors: $--colors,
32 |   $button-padding-horizontal: ("default": 50px)
33 | );
34 | 
35 | // if you want to import all
36 | // @use "element-plus/theme-chalk/src/index.scss" as *;
37 | 
38 | // You can comment it to hide debug info.
39 | // @debug $--colors;
40 | 
41 | // custom dark variables
42 | @use "./dark.scss";
43 | 


--------------------------------------------------------------------------------
/src/store/user.ts:
--------------------------------------------------------------------------------
 1 | import { defineStore } from "pinia";
 2 | import { Login } from "~/api/user";
 3 | import { RequestData } from "~/types/user_type";
 4 | 
 5 | export const useUserStore = defineStore("user", {
 6 |     state: () => ({
 7 |         username: "",
 8 |         role: 'STUDENT',
 9 |     }),
10 |     getters: {
11 |        
12 |     },
13 |     actions: {
14 |         //执行登录请求
15 |         LoginAction(requestData: RequestData) {
16 |             return new Promise((resolve) => {
17 |                 Login(requestData).then((res) => {
18 |                     resolve(res)
19 |                 }).catch(err => {
20 |                     resolve(err)
21 |                 })
22 |             });
23 |         },
24 |         testlogin(requestData: RequestData) {
25 |             let res: any;
26 |             if(requestData.username === '13212341234' && requestData.password === '123456aa') {
27 |                 this.username = requestData.username
28 |                 this.role = 'STUDENT'
29 |                 res =  { code: 200, msg: '登录成功', role: 'STUDENT' }
30 |             } else {
31 |                 res = { code: 400, msg: '账号或密码错误' }
32 |             }
33 |             return new Promise((resolve) => {
34 |                 resolve(res)
35 |             })
36 |            
37 |         }
38 |     },
39 | });


--------------------------------------------------------------------------------
/public/vite.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # 『kd-shop』科大二手工坊V2.0
 2 | 
 3 | > 2024年9月3日，我再次回到这个项目，最重要的是积累和坚持✊
 4 | > 不能放弃！！
 5 | 
 6 | ![images](https://img.shields.io/badge/vue-3.4-green)
 7 | ![Static Badge](https://img.shields.io/badge/Radixvue-1.9.5-darkgreen)
 8 | 
 9 | 🙆‍♀️项目的灵感是来源于我的2019年毕业设计：[科大二手工坊](https://github.com/lvr1997/kd-second-hand-workshop)；科大二手工坊是基于Java语言编写由SSM框架构建，页面是基于jsp+layui编写的，项目相关技术还比较老旧
10 | 
11 | 🙋‍♀️而如今，由于我个人职业发展因素的变更以及前端技术的不断更新迭代，我想就这个项目，完成一个新的尝试。也作为我毕业这么长时间以来，对前端方面学习上的一些总结吧。
12 | 
13 | ## ⚒️技术选型
14 | 
15 | 前端页面使用Vue3+pinia+vue-router。使用Vite构建工具搭建项目
16 | 
17 | 学生端：[kd-shop-web](https://github.com/lvr1997/kd-shop-web)
18 | 
19 | 管理端+后台 [kd-shop](https://github.com/lvr1997/kd-shop)
20 | 
21 | kd-shop项目对我而言，我想实现在我职业技术生涯中的一项新的挑战。
22 | 
23 | ## 📖项目介绍
24 | 
25 | 一个专为各大高校开发的校园二手交易平台。实现校园内闲置物品的流通交易。真正让闲置物品“活”起来。
26 | 
27 | ## 🧠项目脑图
28 | 
29 | ![kd-shop.png](./src/scanshoot/kd-shop.png)
30 | 
31 | ## 📑项目需求
32 | 
33 | 按学生、管理员不同角色登录，学生用户跳转到商铺页，管理用户登入到管理端页面
34 | 
35 | ## ⏰更新记录
36 | 
37 | - [X] 2022/8/17 项目搭建
38 | - [X] 2022/8/18 首页导航部分完成
39 | - [X] 2022/8/19 首页大图及Banner区
40 | - [x] 学生用户登录（前后端）
41 | - [x] 学生用户注册
42 | - [x] 解决kd-shop-web启动报错问题
43 | 
44 | ## 🐞项目Bug与踩坑
45 | 
46 | 1. 前端在配置axios请求代理时一定要加上请求前缀baseUrl，否则当前端路由地址刚好与后端接口地址一样时，你会发现惊喜🙃
47 | 
48 | ## ⛏️项目二次开发
49 | 
50 | ① `Star`本项目；
51 | 
52 | ② `Fork`本仓库；
53 | 
54 | ③ `clone`项目到本地
55 | 
56 | ④ 安装依赖
57 | 
58 | ```sh
59 | npm install
60 | ```
61 | ⑤ 编译并热启动
62 | 
63 | ```sh
64 | npm run dev
65 | ```
66 | 
67 | ## 致谢
68 | 
69 | ♪(･ω･)ﾉ最后感谢各位小伙伴们的支持，也希望项目会对你们有所帮助
70 | 
71 | 


--------------------------------------------------------------------------------
/src/assets/images/logo.svg:
--------------------------------------------------------------------------------
 1 | <svg width="320" height="94" xmlns="http://www.w3.org/2000/svg" fill="none">
 2 |  <defs>
 3 |   <linearGradient id="paint1_linear_501_142" x1="-3.92616" y1="0" x2="1.5254" y2="1.31369">
 4 |    <stop stop-color="#BF66FF"/>
 5 |    <stop offset="0.51042" stop-color="#6248FF"/>
 6 |    <stop offset="1" stop-color="#00DDEB"/>
 7 |   </linearGradient>
 8 |   <linearGradient id="paint2_linear_501_142" x1="0" y1="-5.02186" x2="1.09282" y2="0.59129">
 9 |    <stop stop-color="#BF66FF"/>
10 |    <stop offset="0.51042" stop-color="#6248FF"/>
11 |    <stop offset="1" stop-color="#00DDEB"/>
12 |   </linearGradient>
13 |  </defs>
14 |  <g>
15 |   <title>Layer 1</title>
16 |   <path stroke="null" id="svg_8" d="m0,83.2195c0,-2.6671 2.44005,-4.8293 5.45,-4.8293l98.1,0c3.01001,0 5.45,2.1622 5.45,4.8293l0,5.9512c0,2.6672 -2.43999,4.8293 -5.45,4.8293l-98.1,0c-3.00995,0 -5.45,-2.1621 -5.45,-4.8293l0,-5.9512z" fill="url(#paint2_linear_501_142)"/>
17 |   <text style="cursor: move;" transform="matrix(1.14267 0 0 1.07572 -2.17366 0.989688)" stroke="null" font-weight="bold" xml:space="preserve" text-anchor="start" font-family="'Azeret Mono'" font-size="70" stroke-width="0" id="svg_10" y="58.21116" x="-2.25388" fill="url(#paint1_linear_501_142)">KD.</text>
18 |   <text style="cursor: move;" font-weight="bold" xml:space="preserve" text-anchor="start" font-family="'Azeret Mono'" font-size="70" id="svg_11" y="61.33349" x="135.49998" stroke-width="0" fill="url(#paint2_linear_501_142)">Shop</text>
19 |  </g>
20 | </svg>


--------------------------------------------------------------------------------
/src/router/routes.ts:
--------------------------------------------------------------------------------
 1 | import Layout from '~/components/layouts/index.vue';
 2 | 
 3 | const routes = [
 4 |     { 
 5 |       path: '/', 
 6 |       name: 'Layout',
 7 |       redirect: '/home',
 8 |       component: Layout,
 9 |       children: [
10 |         {
11 |           path: '/home',
12 |           name: 'FrontHome',
13 |           component: () => import(`~/pages/front/Home.vue`),
14 |           meta: {
15 |             title: '首页'
16 |           }
17 |         },
18 |         {
19 |           path: '/notice',
20 |           name: 'FrontNotice',
21 |           component: () => import(`~/pages/front/Notice.vue`),
22 |           meta: {
23 |             title: '公告'
24 |           }
25 |         },
26 |         {
27 |           path: '/wanted',
28 |           name: 'FrontWanted',
29 |           component: () => import(`~/pages/front/Wanted.vue`),
30 |           meta: {
31 |             title: '公告'
32 |           }
33 |         },
34 |         {
35 |           path: '/publish',
36 |           name: 'FrontPublish',
37 |           component: () => import(`~/pages/front/Publish.vue`),
38 |           meta: {
39 |             title: '发布闲置'
40 |           }
41 |         }
42 |       ]
43 |     },
44 |     {
45 |       path: '/login',
46 |       name: 'Login',
47 |       component: () => import(`~/pages/Login/index.vue`),
48 |       meta: {
49 |         title: '登录'
50 |       }
51 |     },
52 |     { path: '/:pathMatch(.*)*', name: '404', component: () => import(`~/pages/error/404.vue`) }
53 | 
54 | ]
55 | 
56 | export default routes


--------------------------------------------------------------------------------
/src/api/request.ts:
--------------------------------------------------------------------------------
 1 | import axios from "axios";
 2 |  
 3 | console.log(`====================当前环境：${import.meta.env.VITE_APP_BASE_URL}=======================`);
 4 | 
 5 | 
 6 | //创建实例
 7 | const service = axios.create({
 8 |   baseURL: import.meta.env.VITE_APP_BASE_URL,
 9 |   timeout: 5000, //超时
10 | });
11 |  
12 | //添加请求拦截器
13 | service.interceptors.request.use(
14 |   function (config) {
15 |     //在发送请求之前做些什么
16 |     return config;
17 |   },
18 |   function (error) {
19 |     console.log(error.request);
20 |     const errorData = JSON.parse(error.request.response);
21 |     if (errorData.message) {
22 |       //判断是否具有message属性
23 |       ElMessage({
24 |         message: errorData.message,
25 |         type: "error",
26 |       });
27 |     }
28 |     //对请求错误做些什么
29 |     return Promise.reject(errorData);
30 |   }
31 | );
32 |  
33 | //添加响  应拦截器
34 | service.interceptors.response.use(
35 |   function (response) {
36 |     //对响应数据做些什么
37 |     console.log("响应数据", response);
38 |     const data = response.data;
39 |     if (data.resCode === 0) {
40 |       return Promise.resolve(data);
41 |     } else {
42 |       ElMessage({
43 |         message: data.message,
44 |         type: "error",
45 |       });
46 |       return Promise.reject(data);
47 |     }
48 |   },
49 |   function (error) {
50 |     //对响应错误做些什么
51 |     const errorData = JSON.parse(error.request.response);
52 |     if (errorData.message) {
53 |       //判断是否具有message属性
54 |       ElMessage({
55 |         message: errorData.message,
56 |         type: "error",
57 |       });
58 |     }
59 |  
60 |     return Promise.reject(errorData);
61 |   }
62 | );
63 |  
64 | //暴露service
65 | export default service;


--------------------------------------------------------------------------------
/src/components/layouts/BaseHeader.vue:
--------------------------------------------------------------------------------
 1 | <script lang="ts" setup>
 2 | import { useRouter } from "vue-router";
 3 | import { toggleDark } from "~/composables";
 4 | import { useUserStore } from "~/store/user";
 5 | 
 6 | const router = useRouter();
 7 | 
 8 | const userStore = useUserStore();
 9 | 
10 | // 跳转登录
11 | const toLogin = () => {
12 |   router.push("/login");
13 | };
14 | </script>
15 | 
16 | <template>
17 |   <!-- 学生端前台导航栏 -->
18 |   <header class="bg-white dark:bg-gray-900">
19 |     <nav class="bg-white dark:bg-gray-900">
20 |       <div class="container flex flex-col items-center pt-6 lg:px-6 mx-auto">
21 |         <a href="#" class="mx-auto">
22 |           <img class="w-auto h-6 sm:h-7" src="../../assets/images/logo.svg" alt="">
23 |         </a>
24 | 
25 |         <el-menu class="w-full justify-center" mode="horizontal" router default-active="/home">
26 |           <el-menu-item index="/home">首页</el-menu-item>
27 |           <el-menu-item index="/notice">公告</el-menu-item>
28 |           <el-menu-item index="/wanted">求购</el-menu-item>
29 |           <el-menu-item h="full" @click="toggleDark()">
30 |             <button class="border-none w-full bg-transparent cursor-pointer" style="height: var(--ep-menu-item-height)">
31 |               <i inline-flex i="dark:ep-moon ep-sunny" />
32 |             </button>
33 |           </el-menu-item>
34 |           <el-sub-menu index="4" v-if="userStore.username">
35 |             <template #title>{{ userStore.username }}</template>
36 |             <el-menu-item index="/userInfo">个人中心</el-menu-item>
37 |             <el-menu-item>退出登录</el-menu-item>
38 |           </el-sub-menu>
39 |           <div v-else class="ep-menu-item" @click="toLogin">
40 |             <span link>登录</span>
41 |           </div>
42 |         </el-menu>
43 |       </div>
44 |     </nav>
45 |   </header>
46 | </template>
47 | <style scoped>
48 | /* .ep-menu--horizontal > .ep-menu-item:nth-child(1) {
49 |   margin-right: auto;
50 | } */
51 | </style>
52 | 


--------------------------------------------------------------------------------
/src/utils/message.ts:
--------------------------------------------------------------------------------
 1 | // import { ElMessage, ElMessageBox } from 'element-plus';
 2 | 
 3 | // 普通信息提示
 4 | export const infoMsg = (msgInfo: string) => {
 5 |   ElMessage({
 6 |     type: 'info',
 7 |     showClose: true,
 8 |     dangerouslyUseHTMLString: true,
 9 |     message: msgInfo,
10 |     plain: true,
11 |   })
12 | }
13 | 
14 | // 成功提示
15 | export const successMsg = (msgInfo: string) => {
16 |   ElMessage({
17 |     type: 'success',
18 |     showClose: true,
19 |     dangerouslyUseHTMLString: true,
20 |     message: msgInfo,
21 |     plain: true,
22 |   })
23 | }
24 | 
25 | // 错误提示
26 | export const errorMsg = (msgInfo: string) => {
27 |   ElMessage({
28 |     type: 'error',
29 |     showClose: true,
30 |     dangerouslyUseHTMLString: true,
31 |     message: msgInfo,
32 |     plain: true,
33 |   })
34 | }
35 | 
36 | // 警告提示
37 | export const warnMsg = (msgInfo: string) => {
38 |   ElMessage({
39 |     type: 'warning',
40 |     showClose: true,
41 |     dangerouslyUseHTMLString: true,
42 |     message: msgInfo,
43 |     plain: true,
44 |   })
45 | }
46 | 
47 | // 带一个确定按钮或是按钮的alertBox
48 | export const alertBox = (msg: string, btnName: string, type: any, title?: string,) => {
49 |   let confirmName = btnName == '确定' ? '确定' : '是'
50 |   return ElMessageBox.alert(msg, title || '提示', {
51 |     type: type || 'warning',
52 |     confirmButtonText: confirmName,
53 |     buttonSize: "default",
54 |     dangerouslyUseHTMLString: true
55 |   });
56 | 
57 | }
58 | // 带确定取消按钮或者是否按钮的弹出提示框
59 | export const confirmBox = (msg: string, btnName: string, type: any, title?: string,) => {
60 |   let confirmName = btnName == '确定' ? '确定' : '是'
61 |   let cancelsName = btnName == '确定' ? '取消' : '否'
62 |   return ElMessageBox.confirm(msg, title || '提示', {
63 |     type: type || 'warning',
64 |     confirmButtonText: confirmName,
65 |     cancelButtonText: cancelsName,
66 |     buttonSize: "default",
67 |     closeOnClickModal: false,
68 |     closeOnPressEscape: false,
69 |     dangerouslyUseHTMLString: true
70 |   })
71 | }
72 | 


--------------------------------------------------------------------------------
/src/pages/front/Notice.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <section class="my-6">
 3 |     <div class="flex flex-col items-center justify-center gap-5 w-full">
 4 |       <el-card
 5 |         class="bg-white dark:bg-gray-900 rounded-lg shadow-md w-1/2 text-left"
 6 |         v-for="(notice, index) in notices"
 7 |         :key="index"
 8 |       >
 9 |         <h3 class="text-xl font-bold my-2">{{ notice.title }}</h3>
10 |         <div class="flex items-center text-sm text-gray-600 gap-2 mb-2">
11 |           <el-icon><User /></el-icon>
12 |           <span>{{ notice.name }}</span>
13 |           <el-icon><Clock /></el-icon>
14 |           <span>{{ notice.time }}</span>
15 |         </div>
16 |         <p class="text-base">{{ notice.content }}</p>
17 |         <!-- 新增：阅读全文按钮 -->
18 |         <el-button type="text" @click="dialogVisible = true; currentNotice = notice">阅读全文</el-button>
19 |       </el-card>
20 |     </div>
21 | 
22 |     <!-- 新增：公告详情弹窗 -->
23 |     <el-dialog v-model="dialogVisible" title="公告详情" width="50%">
24 |       <p>{{ currentNotice?.content }}</p>
25 |     </el-dialog>
26 |   </section>
27 | </template>
28 | 
29 | <script setup lang="ts">
30 | import { Clock, User } from '@element-plus/icons-vue';
31 | import { ref } from 'vue';
32 | 
33 | const notices = [
34 |   { title: '系统维护通知', time: '2023-10-01 10:00', content: '系统将于本周六进行维护，请提前做好准备。',name:'系统管理员' },
35 |   { title: '新功能上线', time: '2023-09-25 15:30', content: '新增商品推荐功能，提升购物体验！',name:'系统管理员' },
36 |   { title: '活动预告', time: '2023-10-15 14:00', content: '双十一大促即将开启，敬请期待！',name:'系统管理员' },
37 |   { title: '支付方式更新', time: '2023-10-05 09:00', content: '新增微信支付和支付宝支付选项。',name:'系统管理员' },
38 |   { title: '用户反馈奖励', time: '2023-09-30 18:00', content: '提交有效反馈即可获得积分奖励！',name:'系统管理员' },
39 |   { title: '会员日福利', time: '2023-10-10 12:00', content: '会员日专属折扣，限时优惠不容错过！',name:'系统管理员' },
40 |   { title: '物流升级', time: '2023-10-08 16:00', content: '新增多家快递合作，配送速度更快！',name:'系统管理员' }
41 | ];
42 | 
43 | // 新增：控制弹窗显示状态
44 | const dialogVisible = ref(false);
45 | // 新增：存储当前选中的公告
46 | const currentNotice = ref();
47 | </script>
48 | 
49 | <style scoped>
50 | </style>


--------------------------------------------------------------------------------
/src/components/layouts/BaseSide.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <!-- 后台界面  菜单栏 -->
 3 |   <el-menu
 4 |     :default-active="route.path"
 5 |     class="el-menu-vertical-demo"
 6 |     :collapse="isCollapse"
 7 |     router
 8 |     @open="handleOpen"
 9 |     @close="handleClose"
10 |   >
11 |     <el-menu-item index="/admin">
12 |       <el-icon><House /></el-icon>
13 |       <template #title>首页</template>
14 |     </el-menu-item>
15 |     <el-sub-menu index="2">
16 |       <template #title>
17 |         <el-icon><location /></el-icon>
18 |         <span>后台数据管理</span>
19 |       </template>
20 |       <el-menu-item index="/admin/carousel">轮播图管理</el-menu-item>
21 |       <el-menu-item index="/admin/goods">闲置管理</el-menu-item>
22 |       <el-menu-item index="/admin/category">分类管理</el-menu-item>
23 |       <el-menu-item index="/admin/report">举报管理</el-menu-item>
24 |       <el-menu-item index="/admin/message">留言管理</el-menu-item>
25 |       <el-menu-item index="/admin/orders">订单管理</el-menu-item>
26 |       <el-menu-item index="/admin/notice">公告管理</el-menu-item>
27 |     </el-sub-menu> 
28 |     <el-sub-menu index="3">
29 |       <template #title>
30 |         <el-icon><setting /></el-icon>
31 |         <span>系统管理</span>
32 |       </template>
33 |       <el-menu-item index="/admin/user">用户管理</el-menu-item>
34 |       <el-menu-item index="/admin/role" disabled>角色管理</el-menu-item>
35 |       <el-menu-item index="/admin/school" disabled>学校管理</el-menu-item>
36 |       <el-menu-item index="/admin/dirt">数据字典</el-menu-item>
37 |     </el-sub-menu>
38 |     <el-menu-item index="4">
39 |       <el-icon><User /></el-icon>
40 |       <template #title>个人中心</template>
41 |     </el-menu-item>
42 |   </el-menu>
43 | </template>
44 | 
45 | <script lang="ts" setup>
46 | import {
47 |   House,
48 |   Location,
49 |   Setting,
50 |   User
51 | } from "@element-plus/icons-vue";
52 | import { ref } from "vue";
53 | import { useRoute } from "vue-router";
54 | 
55 | const route = useRoute();
56 | 
57 | const isCollapse = ref(false);
58 | const handleOpen = (key: string, keyPath: string[]) => {
59 |   console.log(key, keyPath);
60 | };
61 | const handleClose = (key: string, keyPath: string[]) => {
62 |   console.log(key, keyPath);
63 | };
64 | </script>


--------------------------------------------------------------------------------
/src/pages/front/Wanted.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <section class="Wanted my-6">
 3 |     <div class="flex flex-col items-center gap-5 w-full">
 4 |       <el-card
 5 |         class="bg-white dark:bg-gray-900 rounded-lg shadow-md w-1/2 text-left"
 6 |         v-for="(item, index) in wantedList"
 7 |         :key="index"
 8 |       >
 9 |         <h3 class="text-xl font-bold my-2">{{ item.title }}</h3>
10 |         <!-- 修改：发布人和发布时间在同一行显示 -->
11 |         <div class="flex items-center text-sm text-gray-600 gap-2 mb-2">
12 |           <el-icon><User /></el-icon>
13 |           <span>{{ item.name }}</span>
14 |           <el-icon><Clock /></el-icon>
15 |           <span>{{ item.time }}</span>
16 |         </div>
17 |         <p class="text-base">{{ item.description }}</p>
18 |         <!-- 新增：查看详情按钮 -->
19 |         <el-button type="text" @click="viewDetails(item)">查看详情</el-button>
20 |         <!-- 新增：联系TA按钮 -->
21 |         <el-button type="primary" size="small" @click="contactUser(item)">联系TA</el-button>
22 |       </el-card>
23 |     </div>
24 | 
25 |     <!-- 新增：详情弹窗 -->
26 |     <el-dialog v-model="dialogVisible" title="求购详情" width="50%">
27 |       <p>{{ currentWanted?.description }}</p>
28 |     </el-dialog>
29 |   </section>
30 | </template>
31 | 
32 | <script setup lang="ts">
33 | import { ref } from 'vue';
34 | // 引入 element-plus 图标组件
35 | import { Clock, User } from '@element-plus/icons-vue';
36 | 
37 | // 模拟的求购信息数据
38 | const wantedList = [
39 |   { title: '求购笔记本电脑', time: '2023-10-01 10:00', description: '求购二手笔记本电脑，预算不超过3000元。', name: '张三' },
40 |   { title: '求购二手手机', time: '2023-09-25 15:30', description: '求购苹果iPhone 12，成色九成新。', name: '李四' },
41 |   { title: '求购自行车', time: '2023-10-15 14:00', description: '求购山地自行车，适合骑行运动。', name: '王五' }
42 | ];
43 | 
44 | // 控制弹窗显示状态
45 | const dialogVisible = ref(false);
46 | // 存储当前选中的求购信息
47 | const currentWanted = ref();
48 | 
49 | // 查看详情方法
50 | const viewDetails = (item: any) => {
51 |   currentWanted.value = item;
52 |   dialogVisible.value = true;
53 | };
54 | 
55 | // 新增：联系TA方法
56 | const contactUser = (item: any) => {
57 |   alert(`正在联系 ${item.name}...`);
58 | };
59 | </script>
60 | 
61 | <style scoped>
62 | /* 基础样式 */
63 | .Wanted {
64 |   padding: 2rem;
65 | }
66 | </style>


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import vue from '@vitejs/plugin-vue'
 2 | import path from 'path'
 3 | import { defineConfig } from 'vite'
 4 | 
 5 | import AutoImport from 'unplugin-auto-import/vite'
 6 | import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 7 | import Components from 'unplugin-vue-components/vite'
 8 | 
 9 | import {
10 |   presetAttributify,
11 |   presetIcons,
12 |   presetUno,
13 |   transformerDirectives,
14 |   transformerVariantGroup,
15 | } from 'unocss'
16 | import Unocss from 'unocss/vite'
17 | 
18 | const pathSrc = path.resolve(__dirname, 'src')
19 | 
20 | // https://vitejs.dev/config/
21 | export default defineConfig({
22 |   server: {
23 |     port: 8080,
24 |     proxy: {
25 |       '/devApi': {
26 |         target: 'http://localhost:3000',
27 |         changeOrigin: true,
28 |         rewrite: (path) => path.replace(/^\/devApi/, ''),
29 |       }
30 |     }
31 |   },
32 |   resolve: {
33 |     alias: {
34 |       '~/': `${pathSrc}/`,
35 |     },
36 |   },
37 |   css: {
38 |     preprocessorOptions: {
39 |       scss: {
40 |         api: 'modern-compiler',
41 |         additionalData: `@use "~/styles/element/index.scss" as *;`,
42 |       },
43 |     },
44 |   },
45 |   plugins: [
46 |     vue(),
47 |     AutoImport({
48 |       imports: ["vue", "@vueuse/core", "pinia", "vue-router"],
49 |       dts: 'src/auto-imports.d.ts',
50 |       //elements
51 |       resolvers: [ElementPlusResolver()],
52 |       vueTemplate: true,
53 |     }),
54 |     Components({
55 |       // allow auto load markdown components under `./src/components/`
56 |       extensions: ['vue', 'md'],
57 |       // allow auto import and register components used in markdown
58 |       include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
59 |       resolvers: [
60 |         ElementPlusResolver({
61 |           importStyle: 'sass',
62 |         }),
63 |       ],
64 |       dts: 'src/components.d.ts',
65 |     }),
66 | 
67 |     // https://github.com/antfu/unocss
68 |     // see unocss.config.ts for config
69 |     Unocss({
70 |       presets: [
71 |         presetUno(),
72 |         presetAttributify(),
73 |         presetIcons({
74 |           scale: 1.2,
75 |           warn: true,
76 |         }),
77 |       ],
78 |       transformers: [
79 |         transformerDirectives(),
80 |         transformerVariantGroup(),
81 |       ]
82 |     }),
83 |   ],
84 | })
85 | 


--------------------------------------------------------------------------------
/src/components/layouts/BaseFooter.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <footer class="border-t-blueGray bg-white dark:bg-gray-900 fixed bottom-0 left-0 right-0">
 3 |         <div class="w-4/5 lg:px-5 py-6 mx-auto flex items-center sm:flex-row flex-col">
 4 |             <a class="flex title-font font-medium items-center md:justify-start justify-center text-gray-500 text-sm">
 5 |                 科大二手工坊V2.0
 6 |             </a>
 7 |             <p class="text-sm text-gray-500 sm:ml-4 sm:pl-4 sm:border-l-2 sm:border-gray-200 dark:sm:border-gray-700 ">© 2023 kd-shop —
 8 |                 <a href="https://github.com/lvr1997" class="text-gray-600 ml-1" rel="noopener noreferrer" target="_blank">@Lavrena</a>
 9 |             </p>
10 |             <span class="inline-flex sm:ml-auto sm:mt-0 mt-4 justify-center sm:justify-start">
11 |                 <a class="text-gray-500">
12 |                     <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
13 |                         <path d="M18 2h-3a5 5 0 00-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 011-1h3z"></path>
14 |                     </svg>
15 |                 </a>
16 |                 <a class="ml-3 text-gray-500">
17 |                     <svg fill="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
18 |                         <path
19 |                               d="M23 3a10.9 10.9 0 01-3.14 1.53 4.48 4.48 0 00-7.86 3v1A10.66 10.66 0 013 4s-4 9 5 13a11.64 11.64 0 01-7 2c9 5 20 0 20-11.5a4.5 4.5 0 00-.08-.83A7.72 7.72 0 0023 3z">
20 |                         </path>
21 |                     </svg>
22 |                 </a>
23 |                 <a class="ml-3 text-gray-500">
24 |                     <svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="w-5 h-5" viewBox="0 0 24 24">
25 |                         <rect width="20" height="20" x="2" y="2" rx="5" ry="5"></rect>
26 |                         <path d="M16 11.37A4 4 0 1112.63 8 4 4 0 0116 11.37zm1.5-4.87h.01"></path>
27 |                     </svg>
28 |                 </a>
29 |                 <a class="ml-3 text-gray-500">
30 |                     <svg fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="0" class="w-5 h-5" viewBox="0 0 24 24">
31 |                         <path stroke="none" d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"></path>
32 |                         <circle cx="4" cy="4" r="2" stroke="none"></circle>
33 |                     </svg>
34 |                 </a>
35 |             </span>
36 |         </div>
37 |     </footer>
38 | </template>
39 | 
40 | <script setup>
41 | </script>


--------------------------------------------------------------------------------
/src/pages/front/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <section>
 3 |     <!-- 轮播图 -->
 4 |     <div class="flex text-center"> 
 5 |       <div class="w-50% bg-white dark:bg-gray-900">
 6 |         <h1 class="mt-20">你想要的，这儿都有~</h1>
 7 |         <p class="text-gray-500">让闲置不再闲置...</p>
 8 |         <el-button type="primary" @click="toPublish">立即发布</el-button>
 9 |       </div>
10 |       <el-carousel class="w-50%" motion-blur>
11 |         <el-carousel-item class="bg-blue-2" v-for="item in 4" :key="item">
12 |           <h3 class="small justify-center leading-9" text="2xl">{{ item }}</h3>
13 |         </el-carousel-item>
14 |       </el-carousel>
15 |     </div>
16 | 
17 |     <!-- 首页商品展示 -->
18 |     <div class="block text-center my-6"> 
19 |       <h2>最新发布</h2>
20 |       <div class="flex justify-around ">
21 |         <el-radio-group v-model="categoryId" size="large">
22 |           <el-radio-button label="电子数码" value="New York" />
23 |           <el-radio-button label="棋牌休闲" value="Washington" />
24 |           <el-radio-button label="书籍刊物" value="Los Angeles" />
25 |           <el-radio-button label="服装衣物" value="Chicago" />
26 |         </el-radio-group>
27 | 
28 |         <el-input
29 |           size="large"
30 |           v-model="searchKey"
31 |           style="width: 300px"
32 |           placeholder="请输入关键字"
33 |           :prefix-icon="Search">
34 |           <template #append>
35 |             <el-button type="primary">搜索</el-button>
36 |           </template>
37 |         </el-input>
38 |       </div>
39 | 
40 |       <div class="flex flex-wrap justify-center">
41 |         <el-card class="m-4" style="max-width: 480px" v-for="(item, index) in 8" :key="index">
42 |           <template #header>Yummy hamburger</template>
43 |           <img
44 |             src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
45 |             style="width: 100%"
46 |           />
47 |         </el-card>
48 |       </div>
49 |     </div>
50 |   </section>
51 | </template>
52 | 
53 | <script setup lang="ts">
54 | import { Search } from '@element-plus/icons-vue';
55 | import { useUserStore } from "~/store/user";
56 | const router = useRouter();
57 | const userStore = useUserStore();
58 | 
59 | 
60 | const categoryId = ref('New York')
61 | const searchKey = ref('')
62 | 
63 | // 跳转发布闲置
64 | const toPublish = () => {
65 |   if (!userStore.username) {
66 |     ElMessage.warning('您还未登录，请登录后再发布闲置！');
67 |     router.push("/login");
68 |   } else {
69 |     // 跳转发布闲置
70 |     router.push("/publish");
71 |   }
72 | };
73 | </script>
74 | 
75 | <style scoped>
76 | .demonstration {
77 |   color: var(--el-text-color-secondary);
78 | }
79 | 
80 | .el-carousel__item h3 {
81 |   color: #475669;
82 |   opacity: 0.75;
83 |   line-height: 200px;
84 |   margin: 0;
85 |   text-align: center;
86 | }
87 | 
88 | .el-carousel__item:nth-child(2n) {
89 |   background-color: #99a9bf;
90 | }
91 | 
92 | .el-carousel__item:nth-child(2n + 1) {
93 |   background-color: #d3dce6;
94 | }
95 | </style>
96 | 


--------------------------------------------------------------------------------
/src/components.d.ts:
--------------------------------------------------------------------------------
 1 | /* eslint-disable */
 2 | /* prettier-ignore */
 3 | // @ts-nocheck
 4 | // Generated by unplugin-vue-components
 5 | // Read more: https://github.com/vuejs/core/pull/3399
 6 | export {}
 7 | 
 8 | declare module 'vue' {
 9 |   export interface GlobalComponents {
10 |     BaseFooter: typeof import('./components/layouts/BaseFooter.vue')['default']
11 |     BaseHeader: typeof import('./components/layouts/BaseHeader.vue')['default']
12 |     BaseSide: typeof import('./components/layouts/BaseSide.vue')['default']
13 |     ElBacktop: typeof import('element-plus/es')['ElBacktop']
14 |     ElButton: typeof import('element-plus/es')['ElButton']
15 |     ElCard: typeof import('element-plus/es')['ElCard']
16 |     ElCarousel: typeof import('element-plus/es')['ElCarousel']
17 |     ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
18 |     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
19 |     ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
20 |     ElCol: typeof import('element-plus/es')['ElCol']
21 |     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
22 |     ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
23 |     ElDialog: typeof import('element-plus/es')['ElDialog']
24 |     ElForm: typeof import('element-plus/es')['ElForm']
25 |     ElFormItem: typeof import('element-plus/es')['ElFormItem']
26 |     ElIcon: typeof import('element-plus/es')['ElIcon']
27 |     ElInput: typeof import('element-plus/es')['ElInput']
28 |     ElMenu: typeof import('element-plus/es')['ElMenu']
29 |     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
30 |     ElMenuItemGroup: typeof import('element-plus/es')['ElMenuItemGroup']
31 |     ElOption: typeof import('element-plus/es')['ElOption']
32 |     ElPopover: typeof import('element-plus/es')['ElPopover']
33 |     ElRadio: typeof import('element-plus/es')['ElRadio']
34 |     ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
35 |     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
36 |     ElRow: typeof import('element-plus/es')['ElRow']
37 |     ElSelect: typeof import('element-plus/es')['ElSelect']
38 |     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
39 |     ElSwitch: typeof import('element-plus/es')['ElSwitch']
40 |     ElTable: typeof import('element-plus/es')['ElTable']
41 |     ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
42 |     ElTag: typeof import('element-plus/es')['ElTag']
43 |     ElTimePicker: typeof import('element-plus/es')['ElTimePicker']
44 |     ElUpload: typeof import('element-plus/es')['ElUpload']
45 |     HelloWorld: typeof import('./components/HelloWorld.vue')['default']
46 |     Layouts: typeof import('./components/layouts/index.vue')['default']
47 |     Login: typeof import('./components/Login/index.vue')['default']
48 |     Logos: typeof import('./components/Logos.vue')['default']
49 |     RouterLink: typeof import('vue-router')['RouterLink']
50 |     RouterView: typeof import('vue-router')['RouterView']
51 |   }
52 | }
53 | 


--------------------------------------------------------------------------------
/src/pages/front/Publish.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="my-6 mx-10">
  3 |         <el-form :model="form" label-width="auto">
  4 |             <el-form-item label="上传图片">
  5 |                 <el-upload v-model:file-list="fileList" action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" list-type="picture-card"
  6 |                            :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
  7 |                     <el-icon>
  8 |                         <Plus />
  9 |                     </el-icon>
 10 |                 </el-upload>
 11 | 
 12 |                 <el-dialog v-model="dialogVisible">
 13 |                     <img w-full :src="dialogImageUrl" alt="Preview Image" />
 14 |                 </el-dialog>
 15 |             </el-form-item>
 16 |             <el-form-item label="选择学校">
 17 |                 <el-select v-model="form.region" placeholder="请选择学校">
 18 |                     <el-option label="黑龙江科技大学" value="1" />
 19 |                 </el-select>
 20 |             </el-form-item>
 21 |             <el-form-item label="闲置名称">
 22 |                 <el-input v-model="form.name" />
 23 |             </el-form-item>
 24 |             <el-form-item label="闲置详情">
 25 |                 <el-input v-model="form.desc" type="textarea" />
 26 |             </el-form-item>
 27 |             <el-row :gutter="10">
 28 |                 <el-col :span="8">
 29 |                     <el-form-item label="价格">
 30 |                         <el-input v-model="form.price" />
 31 |                     </el-form-item>
 32 |                 </el-col>
 33 |                 <el-col :span="8">
 34 |                     <el-form-item label="原价">
 35 |                         <el-input v-model="form.realPrice" />
 36 |                     </el-form-item>
 37 |                 </el-col>
 38 |                 <el-col :span="8">
 39 |                     <el-form-item label="插入原购买链接">
 40 |                         <el-switch v-model="form.delivery" />
 41 |                     </el-form-item>
 42 |                 </el-col>
 43 |             </el-row>
 44 | 
 45 |             <el-form-item v-show="form.delivery" label="原购买链接">
 46 |                 <el-input v-model="form.buyUrl" />
 47 |             </el-form-item>
 48 | 
 49 |             <el-form-item label="闲置分类">
 50 |                 <el-select v-model="form.type" placeholder="请选择分类">
 51 |                     <el-option label="电子数码" value="1"></el-option>
 52 |                 </el-select>
 53 |             </el-form-item>
 54 |             <el-form-item label="交易方式">
 55 |                 <el-radio-group v-model="form.buyMethod">
 56 |                     <el-radio value="1">在线交易</el-radio>
 57 |                     <el-radio value="2">线下交易</el-radio>
 58 |                     <el-radio value="3">在线交易/线下交易</el-radio>
 59 |                 </el-radio-group>
 60 |             </el-form-item>
 61 |             <el-form-item label="交易地址">
 62 |                 <el-input v-model="form.address" />
 63 |             </el-form-item>
 64 |             <el-form-item>
 65 |                 <el-button type="primary" @click="onSubmit">确认发布</el-button>
 66 |                 <el-button>取消</el-button>
 67 |             </el-form-item>
 68 |         </el-form>
 69 |     </div>
 70 | </template>
 71 | 
 72 | <script lang="ts" setup>
 73 | import { Plus } from '@element-plus/icons-vue'
 74 | import type { UploadProps, UploadUserFile } from 'element-plus'
 75 | import { reactive } from 'vue'
 76 | 
 77 | const fileList = ref<UploadUserFile[]>([
 78 |     {
 79 |         name: 'food.jpeg',
 80 |         url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
 81 |     }
 82 | ])
 83 | 
 84 | const dialogImageUrl = ref('')
 85 | const dialogVisible = ref(false)
 86 | 
 87 | const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
 88 |     console.log(uploadFile, uploadFiles)
 89 | }
 90 | 
 91 | const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
 92 |     dialogImageUrl.value = uploadFile.url!
 93 |     dialogVisible.value = true
 94 | }
 95 | 
 96 | // do not use same name with ref
 97 | const form = reactive({
 98 |     name: '',
 99 |     region: '',
100 |     date1: '',
101 |     date2: '',
102 |     delivery: false,
103 |     type: [],
104 |     resource: '',
105 |     desc: '',
106 | })
107 | 
108 | const onSubmit = () => {
109 |     console.log('submit!')
110 | }
111 | </script>


--------------------------------------------------------------------------------
/src/pages/Login/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8">
  3 |         <div class="sm:mx-auto sm:w-full sm:max-w-sm text-center">
  4 |             <img class="mx-auto h-10 w-auto" src="../../assets/images/logo.svg" alt="logo_kdshop">
  5 |             <h2 class="mt-8 text-center text-2xl font-bold leading-9 tracking-tight">{{ data.type === "login" ? "登 录" : "注 册" }}</h2>
  6 |         </div>
  7 |         <div class="sm:mx-auto sm:w-full sm:max-w-sm">
  8 |             <el-form class="space-y-6 mt-5" ref="account_form" :model="data.form" :rules="data.form_rules" label-position="top" size="large">
  9 |                 <el-form-item prop="phone">
 10 |                     <el-input v-model="data.form.phone" placeholder="用户名/手机号"></el-input>
 11 |                 </el-form-item>
 12 |                 <el-form-item prop="password">
 13 |                     <el-input type="password" v-model="data.form.password" placeholder="密码"></el-input>
 14 |                 </el-form-item>
 15 |                 <el-form-item prop="passwords" v-if="data.type === 'register'">
 16 |                     <el-input type="password" v-model="data.form.passwords" placeholder="确认密码"></el-input>
 17 |                 </el-form-item>
 18 |                 <el-form-item prop="code">
 19 |                     <el-row :gutter="5">
 20 |                         <el-col :span="12">
 21 |                             <el-input v-model="data.form.code" placeholder="验证码"></el-input>
 22 |                         </el-col>
 23 |                         <el-col :span="12">
 24 |                             <el-button class="w-full" type="success" :loading="data.code_button_loading" :disabled="data.code_button_disabled" @click="handlerGetCode">
 25 |                                 {{ data.code_button_text }}
 26 |                             </el-button>
 27 |                         </el-col>
 28 |                     </el-row>
 29 |                 </el-form-item>
 30 |                 <el-form-item label-position="left">
 31 |                     <template #label>
 32 |                         <a class="text-xs font-display font-semibold text-gray-500 hover:text-gray-600 cursor-pointer" href="#">
 33 |                             忘记密码？
 34 |                         </a>
 35 |                     </template>
 36 |                 </el-form-item>
 37 |                 <el-form-item>
 38 |                     <el-button class="w-full" type="primary" @click="submitForm" :disabled="data.submit_button_disabled" :loading="data.loading">
 39 |                         {{ data.type === "login" ? "登录" : "注册" }}
 40 |                     </el-button>
 41 |                 </el-form-item>
 42 |                 <el-form-item>
 43 |                     <template #label>
 44 |                         <div class="text-center">
 45 |                             <el-button v-show="data.type === 'login'" link class="text-xs text-gray-500 uppercase dark:text-gray-400 hover:underline"  
 46 |                                             @click="data.type = 'register'">
 47 |                                 还没有账号? 去注册
 48 |                             </el-button>
 49 |                             <el-button link v-show="data.type === 'register'" class="text-xs text-gray-500 uppercase dark:text-gray-400 hover:underline"  
 50 |                                             @click="data.type = 'login'">
 51 |                                 已有账号? 去登录
 52 |                             </el-button>
 53 |                         </div>
 54 |                     </template>
 55 |                 </el-form-item>
 56 |             </el-form>
 57 |         </div>
 58 |     </div>
 59 | </template>
 60 | 
 61 | <script setup lang="ts">
 62 | import { onBeforeUnmount, reactive, ref } from "vue";
 63 | import { useUserStore } from "~/store/user";
 64 | import { validate_password, validate_phone } from "~/utils/validate";
 65 | // import sha1 from "js-sha1";
 66 | // API
 67 | import { Register } from "~/api/user";
 68 | import { errorMsg, successMsg, warnMsg } from "~/utils/message";
 69 | 
 70 | const userStore = useUserStore();
 71 | const emits = defineEmits(["closeDialog"]);
 72 | 
 73 | const data = reactive({
 74 |     form: {
 75 |         phone: "", // 手机号
 76 |         password: "", // 密码
 77 |         passwords: "", // 确认密码
 78 |         code: "", // 验证码
 79 |     },
 80 |     form_rules: {
 81 |         phone: [{ required: true, pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }],
 82 |         password: [{ required: true, message: "用户密码不能为空", trigger: "blur" }, { min: 5, max: 20, message: "用户密码长度必须介于 5 和 20 之间", trigger: "blur" }, { pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符：< > \" ' \\\ |", trigger: "blur" }],
 83 |         passwords: [{ required: true, message: "用户密码不能为空", trigger: "blur" }, { min: 5, max: 20, message: "用户密码长度必须介于 5 和 20 之间", trigger: "blur" }, { pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符：< > \" ' \\\ |", trigger: "blur" }],
 84 |         code: [{ required: true, message: "验证码不能为空", trigger: "blur" }],
 85 |     },
 86 |     tab_menu: [
 87 |         { type: "login", label: "登录" },
 88 |         { type: "register", label: "注册" },
 89 |     ],
 90 |     type: 'login',
 91 |     show_text: "Sign in to your account",
 92 |     /**
 93 |      * 获取验证码按钮交互
 94 |      */
 95 |     code_button_disabled: false,
 96 |     code_button_loading: false,
 97 |     code_button_text: "获取验证码",
 98 |     code_button_timer: null,
 99 |     // 提交按钮
100 |     submit_button_disabled: true,
101 |     loading: false,
102 | });
103 | 
104 | // 获取验证码
105 | const handlerGetCode = () => {
106 |     const username = data.form.phone;
107 |     const password = data.form.password;
108 |     const passwords = data.form.passwords;
109 |     // 校验用户名
110 |     if (!validate_phone(username)) {
111 |         warnMsg("手机号格式不正确");
112 |         return false;
113 |     }
114 |     // 校验密码
115 |     if (!validate_password(password)) {
116 |         warnMsg("密码格式不正确")
117 |         return false;
118 |     }
119 |     // 判断非 登录 时，校验两次密码
120 |     if (data.type === "register" && password !== passwords) {
121 |         warnMsg("两次密码不一致")
122 |         return false;
123 |     }
124 | 
125 |     // 获取验证码接口
126 |     const requestData = {
127 |         username: data.form.phone,
128 |     };
129 |     data.code_button_loading = true;
130 |     data.code_button_text = "发送中";
131 | 
132 |     setTimeout(() => {
133 |         const resData = 1234;
134 |         // 激活提交按钮
135 |         data.submit_button_disabled = false;
136 |         // 成功 Elementui 提示
137 |         successMsg(resData)
138 |         // 执行倒计时
139 |         countdown();
140 |     }, 2000);   
141 |     // GetCode(requestData).then((response) => {
142 |     //     const resData = response;
143 |     //     // 激活提交按钮
144 |     //     data.submit_button_disabled = false;
145 |     //     // 用户名存在
146 |     //     if (resData.resCode === 1024) {
147 |     //         warnMsg(resData.message);
148 |     //         return false;
149 |     //     }
150 |     //     // 成功 Elementui 提示
151 |     //     successMsg(resData.message)
152 |     //     // 执行倒计时
153 |     //     countdown();
154 |     // }).catch(() => {
155 |     //     data.code_button_loading = false;
156 |     //     data.code_button_text = "获取验证码";
157 |     // });
158 | };
159 | 
160 | /** 倒计时 */
161 | const countdown = (time?: number) => {
162 |     if (time && typeof time !== "number") {
163 |         return false;
164 |     }
165 |     let second = time || 60; // 默认时间
166 |     data.code_button_loading = false; // 取消加载
167 |     data.code_button_disabled = true; // 禁用按钮
168 |     data.code_button_text = `倒计时${second}秒`; // 按钮文本
169 |     // 判断是否存在定时器，存在则先清除
170 |     if (data.code_button_timer) {
171 |         clearInterval(data.code_button_timer);
172 |     }
173 |     // 开启定时器
174 |     data.code_button_timer = setInterval(() => {
175 |         second--;
176 |         data.code_button_text = `倒计进${second}秒`; // 按钮文本
177 |         if (second <= 0) {
178 |             data.code_button_text = `重新获取`; // 按钮文本
179 |             data.code_button_disabled = false; // 启用按钮
180 |             clearInterval(data.code_button_timer); // 清除倒计时
181 |         }
182 |     }, 1000);
183 | };
184 | /** 表单提交 */
185 | const account_form = ref();
186 | // formName
187 | const submitForm = () => {
188 |     account_form.value.validate((valid) => {
189 |         if (valid) {
190 |             data.type === "login" ? login() : register();
191 |         } else {
192 |             warnMsg("表单验证不通过");
193 |             return false;
194 |         }
195 |     });
196 | };
197 | /** 注册 */
198 | const register = () => {
199 |     const requestData = {
200 |         username: data.form.phone,
201 |         password: data.form.password,
202 |         code: data.form.code,
203 |         create: 1,
204 |     };
205 |     data.loading = true;
206 |     Register(requestData)
207 |         .then((response) => {
208 |             successMsg(response.message)
209 |             reset();
210 |         })
211 |         .catch(() => {
212 |             data.loading = false;
213 |         });
214 | };
215 | /** 登录 */
216 | const login = () => {
217 |     const requestData = {
218 |         username: data.form.phone,
219 |         password: data.form.password,
220 |         code: data.form.code,
221 |     };
222 |     data.loading = true;
223 |     userStore.testlogin(requestData).then(res => {
224 |         if (res.code === 200) {
225 |             data.loading = false;
226 |             emits("closeDialog", false);
227 |             reset();
228 |         } else {
229 |             errorMsg(res.msg)
230 |         }
231 |     })
232 |     // userStore.LoginAction(requestData).then((response) => {
233 |     //     data.submit_button_loading = false;
234 |     //     successMsg(response.message)
235 |     //     //路由跳转
236 |     //     router.push({ path: "/" });
237 |     //     reset();
238 |     // }).catch(() => {
239 |     //     data.submit_button_loading = false;
240 |     //     console.log("失败");
241 |     // });
242 | };
243 | 
244 | /** 重置 */
245 | const reset = () => {
246 |     // 重置表单
247 |     // proxy.$refs.form.resetFields();
248 |     // 切回登录模式
249 |     data.type = "login";
250 |     // 清除定时器
251 |     data.code_button_timer && clearInterval(data.code_button_timer);
252 |     // 获取验证码重置文本
253 |     data.code_button_text = "获取验证码";
254 |     // 获取验证码激活
255 |     data.code_button_disabled = false;
256 |     // 禁用提交按钮
257 |     data.submit_button_disabled = true;
258 |     // 取消提交按钮加载
259 |     data.loading = false;
260 | };
261 | // 组件销毁之前 - 生命周期
262 | onBeforeUnmount(() => {
263 |     clearInterval(data.code_button_timer); // 清除倒计时
264 | });
265 | 
266 | </script>
267 | 
268 | <style scoped lang="scss"></style>
269 | 


--------------------------------------------------------------------------------
/src/auto-imports.d.ts:
--------------------------------------------------------------------------------
  1 | /* eslint-disable */
  2 | /* prettier-ignore */
  3 | // @ts-nocheck
  4 | // noinspection JSUnusedGlobalSymbols
  5 | // Generated by unplugin-auto-import
  6 | // biome-ignore lint: disable
  7 | export {}
  8 | declare global {
  9 |   const EffectScope: typeof import('vue')['EffectScope']
 10 |   const ElMessage: typeof import('element-plus/es')['ElMessage']
 11 |   const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']
 12 |   const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
 13 |   const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
 14 |   const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
 15 |   const computed: typeof import('vue')['computed']
 16 |   const computedAsync: typeof import('@vueuse/core')['computedAsync']
 17 |   const computedEager: typeof import('@vueuse/core')['computedEager']
 18 |   const computedInject: typeof import('@vueuse/core')['computedInject']
 19 |   const computedWithControl: typeof import('@vueuse/core')['computedWithControl']
 20 |   const controlledComputed: typeof import('@vueuse/core')['controlledComputed']
 21 |   const controlledRef: typeof import('@vueuse/core')['controlledRef']
 22 |   const createApp: typeof import('vue')['createApp']
 23 |   const createEventHook: typeof import('@vueuse/core')['createEventHook']
 24 |   const createGlobalState: typeof import('@vueuse/core')['createGlobalState']
 25 |   const createInjectionState: typeof import('@vueuse/core')['createInjectionState']
 26 |   const createPinia: typeof import('pinia')['createPinia']
 27 |   const createReactiveFn: typeof import('@vueuse/core')['createReactiveFn']
 28 |   const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
 29 |   const createUnrefFn: typeof import('@vueuse/core')['createUnrefFn']
 30 |   const customRef: typeof import('vue')['customRef']
 31 |   const debouncedRef: typeof import('@vueuse/core')['debouncedRef']
 32 |   const debouncedWatch: typeof import('@vueuse/core')['debouncedWatch']
 33 |   const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
 34 |   const defineComponent: typeof import('vue')['defineComponent']
 35 |   const defineStore: typeof import('pinia')['defineStore']
 36 |   const eagerComputed: typeof import('@vueuse/core')['eagerComputed']
 37 |   const effectScope: typeof import('vue')['effectScope']
 38 |   const extendRef: typeof import('@vueuse/core')['extendRef']
 39 |   const getActivePinia: typeof import('pinia')['getActivePinia']
 40 |   const getCurrentInstance: typeof import('vue')['getCurrentInstance']
 41 |   const getCurrentScope: typeof import('vue')['getCurrentScope']
 42 |   const h: typeof import('vue')['h']
 43 |   const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
 44 |   const inject: typeof import('vue')['inject']
 45 |   const isDefined: typeof import('@vueuse/core')['isDefined']
 46 |   const isProxy: typeof import('vue')['isProxy']
 47 |   const isReactive: typeof import('vue')['isReactive']
 48 |   const isReadonly: typeof import('vue')['isReadonly']
 49 |   const isRef: typeof import('vue')['isRef']
 50 |   const makeDestructurable: typeof import('@vueuse/core')['makeDestructurable']
 51 |   const mapActions: typeof import('pinia')['mapActions']
 52 |   const mapGetters: typeof import('pinia')['mapGetters']
 53 |   const mapState: typeof import('pinia')['mapState']
 54 |   const mapStores: typeof import('pinia')['mapStores']
 55 |   const mapWritableState: typeof import('pinia')['mapWritableState']
 56 |   const markRaw: typeof import('vue')['markRaw']
 57 |   const nextTick: typeof import('vue')['nextTick']
 58 |   const onActivated: typeof import('vue')['onActivated']
 59 |   const onBeforeMount: typeof import('vue')['onBeforeMount']
 60 |   const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
 61 |   const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
 62 |   const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
 63 |   const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
 64 |   const onClickOutside: typeof import('@vueuse/core')['onClickOutside']
 65 |   const onDeactivated: typeof import('vue')['onDeactivated']
 66 |   const onErrorCaptured: typeof import('vue')['onErrorCaptured']
 67 |   const onKeyStroke: typeof import('@vueuse/core')['onKeyStroke']
 68 |   const onLongPress: typeof import('@vueuse/core')['onLongPress']
 69 |   const onMounted: typeof import('vue')['onMounted']
 70 |   const onRenderTracked: typeof import('vue')['onRenderTracked']
 71 |   const onRenderTriggered: typeof import('vue')['onRenderTriggered']
 72 |   const onScopeDispose: typeof import('vue')['onScopeDispose']
 73 |   const onServerPrefetch: typeof import('vue')['onServerPrefetch']
 74 |   const onStartTyping: typeof import('@vueuse/core')['onStartTyping']
 75 |   const onUnmounted: typeof import('vue')['onUnmounted']
 76 |   const onUpdated: typeof import('vue')['onUpdated']
 77 |   const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
 78 |   const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
 79 |   const provide: typeof import('vue')['provide']
 80 |   const reactify: typeof import('@vueuse/core')['reactify']
 81 |   const reactifyObject: typeof import('@vueuse/core')['reactifyObject']
 82 |   const reactive: typeof import('vue')['reactive']
 83 |   const reactiveComputed: typeof import('@vueuse/core')['reactiveComputed']
 84 |   const reactiveOmit: typeof import('@vueuse/core')['reactiveOmit']
 85 |   const reactivePick: typeof import('@vueuse/core')['reactivePick']
 86 |   const readonly: typeof import('vue')['readonly']
 87 |   const ref: typeof import('vue')['ref']
 88 |   const refAutoReset: typeof import('@vueuse/core')['refAutoReset']
 89 |   const refDebounced: typeof import('@vueuse/core')['refDebounced']
 90 |   const refDefault: typeof import('@vueuse/core')['refDefault']
 91 |   const refThrottled: typeof import('@vueuse/core')['refThrottled']
 92 |   const refWithControl: typeof import('@vueuse/core')['refWithControl']
 93 |   const resolveComponent: typeof import('vue')['resolveComponent']
 94 |   const resolveRef: typeof import('@vueuse/core')['resolveRef']
 95 |   const resolveUnref: typeof import('@vueuse/core')['resolveUnref']
 96 |   const setActivePinia: typeof import('pinia')['setActivePinia']
 97 |   const setMapStoreSuffix: typeof import('pinia')['setMapStoreSuffix']
 98 |   const shallowReactive: typeof import('vue')['shallowReactive']
 99 |   const shallowReadonly: typeof import('vue')['shallowReadonly']
100 |   const shallowRef: typeof import('vue')['shallowRef']
101 |   const storeToRefs: typeof import('pinia')['storeToRefs']
102 |   const syncRef: typeof import('@vueuse/core')['syncRef']
103 |   const syncRefs: typeof import('@vueuse/core')['syncRefs']
104 |   const templateRef: typeof import('@vueuse/core')['templateRef']
105 |   const throttledRef: typeof import('@vueuse/core')['throttledRef']
106 |   const throttledWatch: typeof import('@vueuse/core')['throttledWatch']
107 |   const toRaw: typeof import('vue')['toRaw']
108 |   const toReactive: typeof import('@vueuse/core')['toReactive']
109 |   const toRef: typeof import('vue')['toRef']
110 |   const toRefs: typeof import('vue')['toRefs']
111 |   const toValue: typeof import('vue')['toValue']
112 |   const triggerRef: typeof import('vue')['triggerRef']
113 |   const tryOnBeforeMount: typeof import('@vueuse/core')['tryOnBeforeMount']
114 |   const tryOnBeforeUnmount: typeof import('@vueuse/core')['tryOnBeforeUnmount']
115 |   const tryOnMounted: typeof import('@vueuse/core')['tryOnMounted']
116 |   const tryOnScopeDispose: typeof import('@vueuse/core')['tryOnScopeDispose']
117 |   const tryOnUnmounted: typeof import('@vueuse/core')['tryOnUnmounted']
118 |   const unref: typeof import('vue')['unref']
119 |   const unrefElement: typeof import('@vueuse/core')['unrefElement']
120 |   const until: typeof import('@vueuse/core')['until']
121 |   const useActiveElement: typeof import('@vueuse/core')['useActiveElement']
122 |   const useArrayEvery: typeof import('@vueuse/core')['useArrayEvery']
123 |   const useArrayFilter: typeof import('@vueuse/core')['useArrayFilter']
124 |   const useArrayFind: typeof import('@vueuse/core')['useArrayFind']
125 |   const useArrayFindIndex: typeof import('@vueuse/core')['useArrayFindIndex']
126 |   const useArrayFindLast: typeof import('@vueuse/core')['useArrayFindLast']
127 |   const useArrayJoin: typeof import('@vueuse/core')['useArrayJoin']
128 |   const useArrayMap: typeof import('@vueuse/core')['useArrayMap']
129 |   const useArrayReduce: typeof import('@vueuse/core')['useArrayReduce']
130 |   const useArraySome: typeof import('@vueuse/core')['useArraySome']
131 |   const useArrayUnique: typeof import('@vueuse/core')['useArrayUnique']
132 |   const useAsyncQueue: typeof import('@vueuse/core')['useAsyncQueue']
133 |   const useAsyncState: typeof import('@vueuse/core')['useAsyncState']
134 |   const useAttrs: typeof import('vue')['useAttrs']
135 |   const useBase64: typeof import('@vueuse/core')['useBase64']
136 |   const useBattery: typeof import('@vueuse/core')['useBattery']
137 |   const useBluetooth: typeof import('@vueuse/core')['useBluetooth']
138 |   const useBreakpoints: typeof import('@vueuse/core')['useBreakpoints']
139 |   const useBroadcastChannel: typeof import('@vueuse/core')['useBroadcastChannel']
140 |   const useBrowserLocation: typeof import('@vueuse/core')['useBrowserLocation']
141 |   const useCached: typeof import('@vueuse/core')['useCached']
142 |   const useClipboard: typeof import('@vueuse/core')['useClipboard']
143 |   const useCloned: typeof import('@vueuse/core')['useCloned']
144 |   const useColorMode: typeof import('@vueuse/core')['useColorMode']
145 |   const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
146 |   const useCounter: typeof import('@vueuse/core')['useCounter']
147 |   const useCssModule: typeof import('vue')['useCssModule']
148 |   const useCssVar: typeof import('@vueuse/core')['useCssVar']
149 |   const useCssVars: typeof import('vue')['useCssVars']
150 |   const useCurrentElement: typeof import('@vueuse/core')['useCurrentElement']
151 |   const useCycleList: typeof import('@vueuse/core')['useCycleList']
152 |   const useDark: typeof import('@vueuse/core')['useDark']
153 |   const useDateFormat: typeof import('@vueuse/core')['useDateFormat']
154 |   const useDebounce: typeof import('@vueuse/core')['useDebounce']
155 |   const useDebounceFn: typeof import('@vueuse/core')['useDebounceFn']
156 |   const useDebouncedRefHistory: typeof import('@vueuse/core')['useDebouncedRefHistory']
157 |   const useDeviceMotion: typeof import('@vueuse/core')['useDeviceMotion']
158 |   const useDeviceOrientation: typeof import('@vueuse/core')['useDeviceOrientation']
159 |   const useDevicePixelRatio: typeof import('@vueuse/core')['useDevicePixelRatio']
160 |   const useDevicesList: typeof import('@vueuse/core')['useDevicesList']
161 |   const useDisplayMedia: typeof import('@vueuse/core')['useDisplayMedia']
162 |   const useDocumentVisibility: typeof import('@vueuse/core')['useDocumentVisibility']
163 |   const useDraggable: typeof import('@vueuse/core')['useDraggable']
164 |   const useDropZone: typeof import('@vueuse/core')['useDropZone']
165 |   const useElementBounding: typeof import('@vueuse/core')['useElementBounding']
166 |   const useElementByPoint: typeof import('@vueuse/core')['useElementByPoint']
167 |   const useElementHover: typeof import('@vueuse/core')['useElementHover']
168 |   const useElementSize: typeof import('@vueuse/core')['useElementSize']
169 |   const useElementVisibility: typeof import('@vueuse/core')['useElementVisibility']
170 |   const useEventBus: typeof import('@vueuse/core')['useEventBus']
171 |   const useEventListener: typeof import('@vueuse/core')['useEventListener']
172 |   const useEventSource: typeof import('@vueuse/core')['useEventSource']
173 |   const useEyeDropper: typeof import('@vueuse/core')['useEyeDropper']
174 |   const useFavicon: typeof import('@vueuse/core')['useFavicon']
175 |   const useFetch: typeof import('@vueuse/core')['useFetch']
176 |   const useFileDialog: typeof import('@vueuse/core')['useFileDialog']
177 |   const useFileSystemAccess: typeof import('@vueuse/core')['useFileSystemAccess']
178 |   const useFocus: typeof import('@vueuse/core')['useFocus']
179 |   const useFocusWithin: typeof import('@vueuse/core')['useFocusWithin']
180 |   const useFps: typeof import('@vueuse/core')['useFps']
181 |   const useFullscreen: typeof import('@vueuse/core')['useFullscreen']
182 |   const useGamepad: typeof import('@vueuse/core')['useGamepad']
183 |   const useGeolocation: typeof import('@vueuse/core')['useGeolocation']
184 |   const useId: typeof import('vue')['useId']
185 |   const useIdle: typeof import('@vueuse/core')['useIdle']
186 |   const useImage: typeof import('@vueuse/core')['useImage']
187 |   const useInfiniteScroll: typeof import('@vueuse/core')['useInfiniteScroll']
188 |   const useIntersectionObserver: typeof import('@vueuse/core')['useIntersectionObserver']
189 |   const useInterval: typeof import('@vueuse/core')['useInterval']
190 |   const useIntervalFn: typeof import('@vueuse/core')['useIntervalFn']
191 |   const useKeyModifier: typeof import('@vueuse/core')['useKeyModifier']
192 |   const useLastChanged: typeof import('@vueuse/core')['useLastChanged']
193 |   const useLink: typeof import('vue-router')['useLink']
194 |   const useLocalStorage: typeof import('@vueuse/core')['useLocalStorage']
195 |   const useMagicKeys: typeof import('@vueuse/core')['useMagicKeys']
196 |   const useManualRefHistory: typeof import('@vueuse/core')['useManualRefHistory']
197 |   const useMediaControls: typeof import('@vueuse/core')['useMediaControls']
198 |   const useMediaQuery: typeof import('@vueuse/core')['useMediaQuery']
199 |   const useMemoize: typeof import('@vueuse/core')['useMemoize']
200 |   const useMemory: typeof import('@vueuse/core')['useMemory']
201 |   const useModel: typeof import('vue')['useModel']
202 |   const useMounted: typeof import('@vueuse/core')['useMounted']
203 |   const useMouse: typeof import('@vueuse/core')['useMouse']
204 |   const useMouseInElement: typeof import('@vueuse/core')['useMouseInElement']
205 |   const useMousePressed: typeof import('@vueuse/core')['useMousePressed']
206 |   const useMutationObserver: typeof import('@vueuse/core')['useMutationObserver']
207 |   const useNavigatorLanguage: typeof import('@vueuse/core')['useNavigatorLanguage']
208 |   const useNetwork: typeof import('@vueuse/core')['useNetwork']
209 |   const useNow: typeof import('@vueuse/core')['useNow']
210 |   const useObjectUrl: typeof import('@vueuse/core')['useObjectUrl']
211 |   const useOffsetPagination: typeof import('@vueuse/core')['useOffsetPagination']
212 |   const useOnline: typeof import('@vueuse/core')['useOnline']
213 |   const usePageLeave: typeof import('@vueuse/core')['usePageLeave']
214 |   const useParallax: typeof import('@vueuse/core')['useParallax']
215 |   const usePermission: typeof import('@vueuse/core')['usePermission']
216 |   const usePointer: typeof import('@vueuse/core')['usePointer']
217 |   const usePointerLock: typeof import('@vueuse/core')['usePointerLock']
218 |   const usePointerSwipe: typeof import('@vueuse/core')['usePointerSwipe']
219 |   const usePreferredColorScheme: typeof import('@vueuse/core')['usePreferredColorScheme']
220 |   const usePreferredContrast: typeof import('@vueuse/core')['usePreferredContrast']
221 |   const usePreferredDark: typeof import('@vueuse/core')['usePreferredDark']
222 |   const usePreferredLanguages: typeof import('@vueuse/core')['usePreferredLanguages']
223 |   const usePreferredReducedMotion: typeof import('@vueuse/core')['usePreferredReducedMotion']
224 |   const usePrevious: typeof import('@vueuse/core')['usePrevious']
225 |   const useRafFn: typeof import('@vueuse/core')['useRafFn']
226 |   const useRefHistory: typeof import('@vueuse/core')['useRefHistory']
227 |   const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver']
228 |   const useRoute: typeof import('vue-router')['useRoute']
229 |   const useRouter: typeof import('vue-router')['useRouter']
230 |   const useScreenOrientation: typeof import('@vueuse/core')['useScreenOrientation']
231 |   const useScreenSafeArea: typeof import('@vueuse/core')['useScreenSafeArea']
232 |   const useScriptTag: typeof import('@vueuse/core')['useScriptTag']
233 |   const useScroll: typeof import('@vueuse/core')['useScroll']
234 |   const useScrollLock: typeof import('@vueuse/core')['useScrollLock']
235 |   const useSessionStorage: typeof import('@vueuse/core')['useSessionStorage']
236 |   const useShare: typeof import('@vueuse/core')['useShare']
237 |   const useSlots: typeof import('vue')['useSlots']
238 |   const useSorted: typeof import('@vueuse/core')['useSorted']
239 |   const useSpeechRecognition: typeof import('@vueuse/core')['useSpeechRecognition']
240 |   const useSpeechSynthesis: typeof import('@vueuse/core')['useSpeechSynthesis']
241 |   const useStepper: typeof import('@vueuse/core')['useStepper']
242 |   const useStorage: typeof import('@vueuse/core')['useStorage']
243 |   const useStorageAsync: typeof import('@vueuse/core')['useStorageAsync']
244 |   const useStyleTag: typeof import('@vueuse/core')['useStyleTag']
245 |   const useSupported: typeof import('@vueuse/core')['useSupported']
246 |   const useSwipe: typeof import('@vueuse/core')['useSwipe']
247 |   const useTemplateRef: typeof import('vue')['useTemplateRef']
248 |   const useTemplateRefsList: typeof import('@vueuse/core')['useTemplateRefsList']
249 |   const useTextDirection: typeof import('@vueuse/core')['useTextDirection']
250 |   const useTextSelection: typeof import('@vueuse/core')['useTextSelection']
251 |   const useTextareaAutosize: typeof import('@vueuse/core')['useTextareaAutosize']
252 |   const useThrottle: typeof import('@vueuse/core')['useThrottle']
253 |   const useThrottleFn: typeof import('@vueuse/core')['useThrottleFn']
254 |   const useThrottledRefHistory: typeof import('@vueuse/core')['useThrottledRefHistory']
255 |   const useTimeAgo: typeof import('@vueuse/core')['useTimeAgo']
256 |   const useTimeout: typeof import('@vueuse/core')['useTimeout']
257 |   const useTimeoutFn: typeof import('@vueuse/core')['useTimeoutFn']
258 |   const useTimeoutPoll: typeof import('@vueuse/core')['useTimeoutPoll']
259 |   const useTimestamp: typeof import('@vueuse/core')['useTimestamp']
260 |   const useTitle: typeof import('@vueuse/core')['useTitle']
261 |   const useToNumber: typeof import('@vueuse/core')['useToNumber']
262 |   const useToString: typeof import('@vueuse/core')['useToString']
263 |   const useToggle: typeof import('@vueuse/core')['useToggle']
264 |   const useTransition: typeof import('@vueuse/core')['useTransition']
265 |   const useUrlSearchParams: typeof import('@vueuse/core')['useUrlSearchParams']
266 |   const useUserMedia: typeof import('@vueuse/core')['useUserMedia']
267 |   const useVModel: typeof import('@vueuse/core')['useVModel']
268 |   const useVModels: typeof import('@vueuse/core')['useVModels']
269 |   const useVibrate: typeof import('@vueuse/core')['useVibrate']
270 |   const useVirtualList: typeof import('@vueuse/core')['useVirtualList']
271 |   const useWakeLock: typeof import('@vueuse/core')['useWakeLock']
272 |   const useWebNotification: typeof import('@vueuse/core')['useWebNotification']
273 |   const useWebSocket: typeof import('@vueuse/core')['useWebSocket']
274 |   const useWebWorker: typeof import('@vueuse/core')['useWebWorker']
275 |   const useWebWorkerFn: typeof import('@vueuse/core')['useWebWorkerFn']
276 |   const useWindowFocus: typeof import('@vueuse/core')['useWindowFocus']
277 |   const useWindowScroll: typeof import('@vueuse/core')['useWindowScroll']
278 |   const useWindowSize: typeof import('@vueuse/core')['useWindowSize']
279 |   const watch: typeof import('vue')['watch']
280 |   const watchArray: typeof import('@vueuse/core')['watchArray']
281 |   const watchAtMost: typeof import('@vueuse/core')['watchAtMost']
282 |   const watchDebounced: typeof import('@vueuse/core')['watchDebounced']
283 |   const watchEffect: typeof import('vue')['watchEffect']
284 |   const watchIgnorable: typeof import('@vueuse/core')['watchIgnorable']
285 |   const watchOnce: typeof import('@vueuse/core')['watchOnce']
286 |   const watchPausable: typeof import('@vueuse/core')['watchPausable']
287 |   const watchPostEffect: typeof import('vue')['watchPostEffect']
288 |   const watchSyncEffect: typeof import('vue')['watchSyncEffect']
289 |   const watchThrottled: typeof import('@vueuse/core')['watchThrottled']
290 |   const watchTriggerable: typeof import('@vueuse/core')['watchTriggerable']
291 |   const watchWithFilter: typeof import('@vueuse/core')['watchWithFilter']
292 |   const whenever: typeof import('@vueuse/core')['whenever']
293 | }
294 | // for type re-export
295 | declare global {
296 |   // @ts-ignore
297 |   export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
298 |   import('vue')
299 | }
300 | // for vue template auto import
301 | import { UnwrapRef } from 'vue'
302 | declare module 'vue' {
303 |   interface GlobalComponents {}
304 |   interface ComponentCustomProperties {
305 |     readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
306 |     readonly ElMessage: UnwrapRef<typeof import('element-plus/es')['ElMessage']>
307 |     readonly ElMessageBox: UnwrapRef<typeof import('element-plus/es')['ElMessageBox']>
308 |     readonly acceptHMRUpdate: UnwrapRef<typeof import('pinia')['acceptHMRUpdate']>
309 |     readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
310 |     readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']>
311 |     readonly computed: UnwrapRef<typeof import('vue')['computed']>
312 |     readonly computedAsync: UnwrapRef<typeof import('@vueuse/core')['computedAsync']>
313 |     readonly computedEager: UnwrapRef<typeof import('@vueuse/core')['computedEager']>
314 |     readonly computedInject: UnwrapRef<typeof import('@vueuse/core')['computedInject']>
315 |     readonly computedWithControl: UnwrapRef<typeof import('@vueuse/core')['computedWithControl']>
316 |     readonly controlledComputed: UnwrapRef<typeof import('@vueuse/core')['controlledComputed']>
317 |     readonly controlledRef: UnwrapRef<typeof import('@vueuse/core')['controlledRef']>
318 |     readonly createApp: UnwrapRef<typeof import('vue')['createApp']>
319 |     readonly createEventHook: UnwrapRef<typeof import('@vueuse/core')['createEventHook']>
320 |     readonly createGlobalState: UnwrapRef<typeof import('@vueuse/core')['createGlobalState']>
321 |     readonly createInjectionState: UnwrapRef<typeof import('@vueuse/core')['createInjectionState']>
322 |     readonly createPinia: UnwrapRef<typeof import('pinia')['createPinia']>
323 |     readonly createReactiveFn: UnwrapRef<typeof import('@vueuse/core')['createReactiveFn']>
324 |     readonly createSharedComposable: UnwrapRef<typeof import('@vueuse/core')['createSharedComposable']>
325 |     readonly createUnrefFn: UnwrapRef<typeof import('@vueuse/core')['createUnrefFn']>
326 |     readonly customRef: UnwrapRef<typeof import('vue')['customRef']>
327 |     readonly debouncedRef: UnwrapRef<typeof import('@vueuse/core')['debouncedRef']>
328 |     readonly debouncedWatch: UnwrapRef<typeof import('@vueuse/core')['debouncedWatch']>
329 |     readonly defineAsyncComponent: UnwrapRef<typeof import('vue')['defineAsyncComponent']>
330 |     readonly defineComponent: UnwrapRef<typeof import('vue')['defineComponent']>
331 |     readonly defineStore: UnwrapRef<typeof import('pinia')['defineStore']>
332 |     readonly eagerComputed: UnwrapRef<typeof import('@vueuse/core')['eagerComputed']>
333 |     readonly effectScope: UnwrapRef<typeof import('vue')['effectScope']>
334 |     readonly extendRef: UnwrapRef<typeof import('@vueuse/core')['extendRef']>
335 |     readonly getActivePinia: UnwrapRef<typeof import('pinia')['getActivePinia']>
336 |     readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']>
337 |     readonly getCurrentScope: UnwrapRef<typeof import('vue')['getCurrentScope']>
338 |     readonly h: UnwrapRef<typeof import('vue')['h']>
339 |     readonly ignorableWatch: UnwrapRef<typeof import('@vueuse/core')['ignorableWatch']>
340 |     readonly inject: UnwrapRef<typeof import('vue')['inject']>
341 |     readonly isDefined: UnwrapRef<typeof import('@vueuse/core')['isDefined']>
342 |     readonly isProxy: UnwrapRef<typeof import('vue')['isProxy']>
343 |     readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']>
344 |     readonly isReadonly: UnwrapRef<typeof import('vue')['isReadonly']>
345 |     readonly isRef: UnwrapRef<typeof import('vue')['isRef']>
346 |     readonly makeDestructurable: UnwrapRef<typeof import('@vueuse/core')['makeDestructurable']>
347 |     readonly mapActions: UnwrapRef<typeof import('pinia')['mapActions']>
348 |     readonly mapGetters: UnwrapRef<typeof import('pinia')['mapGetters']>
349 |     readonly mapState: UnwrapRef<typeof import('pinia')['mapState']>
350 |     readonly mapStores: UnwrapRef<typeof import('pinia')['mapStores']>
351 |     readonly mapWritableState: UnwrapRef<typeof import('pinia')['mapWritableState']>
352 |     readonly markRaw: UnwrapRef<typeof import('vue')['markRaw']>
353 |     readonly nextTick: UnwrapRef<typeof import('vue')['nextTick']>
354 |     readonly onActivated: UnwrapRef<typeof import('vue')['onActivated']>
355 |     readonly onBeforeMount: UnwrapRef<typeof import('vue')['onBeforeMount']>
356 |     readonly onBeforeRouteLeave: UnwrapRef<typeof import('vue-router')['onBeforeRouteLeave']>
357 |     readonly onBeforeRouteUpdate: UnwrapRef<typeof import('vue-router')['onBeforeRouteUpdate']>
358 |     readonly onBeforeUnmount: UnwrapRef<typeof import('vue')['onBeforeUnmount']>
359 |     readonly onBeforeUpdate: UnwrapRef<typeof import('vue')['onBeforeUpdate']>
360 |     readonly onClickOutside: UnwrapRef<typeof import('@vueuse/core')['onClickOutside']>
361 |     readonly onDeactivated: UnwrapRef<typeof import('vue')['onDeactivated']>
362 |     readonly onErrorCaptured: UnwrapRef<typeof import('vue')['onErrorCaptured']>
363 |     readonly onKeyStroke: UnwrapRef<typeof import('@vueuse/core')['onKeyStroke']>
364 |     readonly onLongPress: UnwrapRef<typeof import('@vueuse/core')['onLongPress']>
365 |     readonly onMounted: UnwrapRef<typeof import('vue')['onMounted']>
366 |     readonly onRenderTracked: UnwrapRef<typeof import('vue')['onRenderTracked']>
367 |     readonly onRenderTriggered: UnwrapRef<typeof import('vue')['onRenderTriggered']>
368 |     readonly onScopeDispose: UnwrapRef<typeof import('vue')['onScopeDispose']>
369 |     readonly onServerPrefetch: UnwrapRef<typeof import('vue')['onServerPrefetch']>
370 |     readonly onStartTyping: UnwrapRef<typeof import('@vueuse/core')['onStartTyping']>
371 |     readonly onUnmounted: UnwrapRef<typeof import('vue')['onUnmounted']>
372 |     readonly onUpdated: UnwrapRef<typeof import('vue')['onUpdated']>
373 |     readonly onWatcherCleanup: UnwrapRef<typeof import('vue')['onWatcherCleanup']>
374 |     readonly pausableWatch: UnwrapRef<typeof import('@vueuse/core')['pausableWatch']>
375 |     readonly provide: UnwrapRef<typeof import('vue')['provide']>
376 |     readonly reactify: UnwrapRef<typeof import('@vueuse/core')['reactify']>
377 |     readonly reactifyObject: UnwrapRef<typeof import('@vueuse/core')['reactifyObject']>
378 |     readonly reactive: UnwrapRef<typeof import('vue')['reactive']>
379 |     readonly reactiveComputed: UnwrapRef<typeof import('@vueuse/core')['reactiveComputed']>
380 |     readonly reactiveOmit: UnwrapRef<typeof import('@vueuse/core')['reactiveOmit']>
381 |     readonly reactivePick: UnwrapRef<typeof import('@vueuse/core')['reactivePick']>
382 |     readonly readonly: UnwrapRef<typeof import('vue')['readonly']>
383 |     readonly ref: UnwrapRef<typeof import('vue')['ref']>
384 |     readonly refAutoReset: UnwrapRef<typeof import('@vueuse/core')['refAutoReset']>
385 |     readonly refDebounced: UnwrapRef<typeof import('@vueuse/core')['refDebounced']>
386 |     readonly refDefault: UnwrapRef<typeof import('@vueuse/core')['refDefault']>
387 |     readonly refThrottled: UnwrapRef<typeof import('@vueuse/core')['refThrottled']>
388 |     readonly refWithControl: UnwrapRef<typeof import('@vueuse/core')['refWithControl']>
389 |     readonly resolveComponent: UnwrapRef<typeof import('vue')['resolveComponent']>
390 |     readonly resolveRef: UnwrapRef<typeof import('@vueuse/core')['resolveRef']>
391 |     readonly resolveUnref: UnwrapRef<typeof import('@vueuse/core')['resolveUnref']>
392 |     readonly setActivePinia: UnwrapRef<typeof import('pinia')['setActivePinia']>
393 |     readonly setMapStoreSuffix: UnwrapRef<typeof import('pinia')['setMapStoreSuffix']>
394 |     readonly shallowReactive: UnwrapRef<typeof import('vue')['shallowReactive']>
395 |     readonly shallowReadonly: UnwrapRef<typeof import('vue')['shallowReadonly']>
396 |     readonly shallowRef: UnwrapRef<typeof import('vue')['shallowRef']>
397 |     readonly storeToRefs: UnwrapRef<typeof import('pinia')['storeToRefs']>
398 |     readonly syncRef: UnwrapRef<typeof import('@vueuse/core')['syncRef']>
399 |     readonly syncRefs: UnwrapRef<typeof import('@vueuse/core')['syncRefs']>
400 |     readonly templateRef: UnwrapRef<typeof import('@vueuse/core')['templateRef']>
401 |     readonly throttledRef: UnwrapRef<typeof import('@vueuse/core')['throttledRef']>
402 |     readonly throttledWatch: UnwrapRef<typeof import('@vueuse/core')['throttledWatch']>
403 |     readonly toRaw: UnwrapRef<typeof import('vue')['toRaw']>
404 |     readonly toReactive: UnwrapRef<typeof import('@vueuse/core')['toReactive']>
405 |     readonly toRef: UnwrapRef<typeof import('vue')['toRef']>
406 |     readonly toRefs: UnwrapRef<typeof import('vue')['toRefs']>
407 |     readonly toValue: UnwrapRef<typeof import('vue')['toValue']>
408 |     readonly triggerRef: UnwrapRef<typeof import('vue')['triggerRef']>
409 |     readonly tryOnBeforeMount: UnwrapRef<typeof import('@vueuse/core')['tryOnBeforeMount']>
410 |     readonly tryOnBeforeUnmount: UnwrapRef<typeof import('@vueuse/core')['tryOnBeforeUnmount']>
411 |     readonly tryOnMounted: UnwrapRef<typeof import('@vueuse/core')['tryOnMounted']>
412 |     readonly tryOnScopeDispose: UnwrapRef<typeof import('@vueuse/core')['tryOnScopeDispose']>
413 |     readonly tryOnUnmounted: UnwrapRef<typeof import('@vueuse/core')['tryOnUnmounted']>
414 |     readonly unref: UnwrapRef<typeof import('vue')['unref']>
415 |     readonly unrefElement: UnwrapRef<typeof import('@vueuse/core')['unrefElement']>
416 |     readonly until: UnwrapRef<typeof import('@vueuse/core')['until']>
417 |     readonly useActiveElement: UnwrapRef<typeof import('@vueuse/core')['useActiveElement']>
418 |     readonly useArrayEvery: UnwrapRef<typeof import('@vueuse/core')['useArrayEvery']>
419 |     readonly useArrayFilter: UnwrapRef<typeof import('@vueuse/core')['useArrayFilter']>
420 |     readonly useArrayFind: UnwrapRef<typeof import('@vueuse/core')['useArrayFind']>
421 |     readonly useArrayFindIndex: UnwrapRef<typeof import('@vueuse/core')['useArrayFindIndex']>
422 |     readonly useArrayFindLast: UnwrapRef<typeof import('@vueuse/core')['useArrayFindLast']>
423 |     readonly useArrayJoin: UnwrapRef<typeof import('@vueuse/core')['useArrayJoin']>
424 |     readonly useArrayMap: UnwrapRef<typeof import('@vueuse/core')['useArrayMap']>
425 |     readonly useArrayReduce: UnwrapRef<typeof import('@vueuse/core')['useArrayReduce']>
426 |     readonly useArraySome: UnwrapRef<typeof import('@vueuse/core')['useArraySome']>
427 |     readonly useArrayUnique: UnwrapRef<typeof import('@vueuse/core')['useArrayUnique']>
428 |     readonly useAsyncQueue: UnwrapRef<typeof import('@vueuse/core')['useAsyncQueue']>
429 |     readonly useAsyncState: UnwrapRef<typeof import('@vueuse/core')['useAsyncState']>
430 |     readonly useAttrs: UnwrapRef<typeof import('vue')['useAttrs']>
431 |     readonly useBase64: UnwrapRef<typeof import('@vueuse/core')['useBase64']>
432 |     readonly useBattery: UnwrapRef<typeof import('@vueuse/core')['useBattery']>
433 |     readonly useBluetooth: UnwrapRef<typeof import('@vueuse/core')['useBluetooth']>
434 |     readonly useBreakpoints: UnwrapRef<typeof import('@vueuse/core')['useBreakpoints']>
435 |     readonly useBroadcastChannel: UnwrapRef<typeof import('@vueuse/core')['useBroadcastChannel']>
436 |     readonly useBrowserLocation: UnwrapRef<typeof import('@vueuse/core')['useBrowserLocation']>
437 |     readonly useCached: UnwrapRef<typeof import('@vueuse/core')['useCached']>
438 |     readonly useClipboard: UnwrapRef<typeof import('@vueuse/core')['useClipboard']>
439 |     readonly useCloned: UnwrapRef<typeof import('@vueuse/core')['useCloned']>
440 |     readonly useColorMode: UnwrapRef<typeof import('@vueuse/core')['useColorMode']>
441 |     readonly useConfirmDialog: UnwrapRef<typeof import('@vueuse/core')['useConfirmDialog']>
442 |     readonly useCounter: UnwrapRef<typeof import('@vueuse/core')['useCounter']>
443 |     readonly useCssModule: UnwrapRef<typeof import('vue')['useCssModule']>
444 |     readonly useCssVar: UnwrapRef<typeof import('@vueuse/core')['useCssVar']>
445 |     readonly useCssVars: UnwrapRef<typeof import('vue')['useCssVars']>
446 |     readonly useCurrentElement: UnwrapRef<typeof import('@vueuse/core')['useCurrentElement']>
447 |     readonly useCycleList: UnwrapRef<typeof import('@vueuse/core')['useCycleList']>
448 |     readonly useDark: UnwrapRef<typeof import('@vueuse/core')['useDark']>
449 |     readonly useDateFormat: UnwrapRef<typeof import('@vueuse/core')['useDateFormat']>
450 |     readonly useDebounce: UnwrapRef<typeof import('@vueuse/core')['useDebounce']>
451 |     readonly useDebounceFn: UnwrapRef<typeof import('@vueuse/core')['useDebounceFn']>
452 |     readonly useDebouncedRefHistory: UnwrapRef<typeof import('@vueuse/core')['useDebouncedRefHistory']>
453 |     readonly useDeviceMotion: UnwrapRef<typeof import('@vueuse/core')['useDeviceMotion']>
454 |     readonly useDeviceOrientation: UnwrapRef<typeof import('@vueuse/core')['useDeviceOrientation']>
455 |     readonly useDevicePixelRatio: UnwrapRef<typeof import('@vueuse/core')['useDevicePixelRatio']>
456 |     readonly useDevicesList: UnwrapRef<typeof import('@vueuse/core')['useDevicesList']>
457 |     readonly useDisplayMedia: UnwrapRef<typeof import('@vueuse/core')['useDisplayMedia']>
458 |     readonly useDocumentVisibility: UnwrapRef<typeof import('@vueuse/core')['useDocumentVisibility']>
459 |     readonly useDraggable: UnwrapRef<typeof import('@vueuse/core')['useDraggable']>
460 |     readonly useDropZone: UnwrapRef<typeof import('@vueuse/core')['useDropZone']>
461 |     readonly useElementBounding: UnwrapRef<typeof import('@vueuse/core')['useElementBounding']>
462 |     readonly useElementByPoint: UnwrapRef<typeof import('@vueuse/core')['useElementByPoint']>
463 |     readonly useElementHover: UnwrapRef<typeof import('@vueuse/core')['useElementHover']>
464 |     readonly useElementSize: UnwrapRef<typeof import('@vueuse/core')['useElementSize']>
465 |     readonly useElementVisibility: UnwrapRef<typeof import('@vueuse/core')['useElementVisibility']>
466 |     readonly useEventBus: UnwrapRef<typeof import('@vueuse/core')['useEventBus']>
467 |     readonly useEventListener: UnwrapRef<typeof import('@vueuse/core')['useEventListener']>
468 |     readonly useEventSource: UnwrapRef<typeof import('@vueuse/core')['useEventSource']>
469 |     readonly useEyeDropper: UnwrapRef<typeof import('@vueuse/core')['useEyeDropper']>
470 |     readonly useFavicon: UnwrapRef<typeof import('@vueuse/core')['useFavicon']>
471 |     readonly useFetch: UnwrapRef<typeof import('@vueuse/core')['useFetch']>
472 |     readonly useFileDialog: UnwrapRef<typeof import('@vueuse/core')['useFileDialog']>
473 |     readonly useFileSystemAccess: UnwrapRef<typeof import('@vueuse/core')['useFileSystemAccess']>
474 |     readonly useFocus: UnwrapRef<typeof import('@vueuse/core')['useFocus']>
475 |     readonly useFocusWithin: UnwrapRef<typeof import('@vueuse/core')['useFocusWithin']>
476 |     readonly useFps: UnwrapRef<typeof import('@vueuse/core')['useFps']>
477 |     readonly useFullscreen: UnwrapRef<typeof import('@vueuse/core')['useFullscreen']>
478 |     readonly useGamepad: UnwrapRef<typeof import('@vueuse/core')['useGamepad']>
479 |     readonly useGeolocation: UnwrapRef<typeof import('@vueuse/core')['useGeolocation']>
480 |     readonly useId: UnwrapRef<typeof import('vue')['useId']>
481 |     readonly useIdle: UnwrapRef<typeof import('@vueuse/core')['useIdle']>
482 |     readonly useImage: UnwrapRef<typeof import('@vueuse/core')['useImage']>
483 |     readonly useInfiniteScroll: UnwrapRef<typeof import('@vueuse/core')['useInfiniteScroll']>
484 |     readonly useIntersectionObserver: UnwrapRef<typeof import('@vueuse/core')['useIntersectionObserver']>
485 |     readonly useInterval: UnwrapRef<typeof import('@vueuse/core')['useInterval']>
486 |     readonly useIntervalFn: UnwrapRef<typeof import('@vueuse/core')['useIntervalFn']>
487 |     readonly useKeyModifier: UnwrapRef<typeof import('@vueuse/core')['useKeyModifier']>
488 |     readonly useLastChanged: UnwrapRef<typeof import('@vueuse/core')['useLastChanged']>
489 |     readonly useLink: UnwrapRef<typeof import('vue-router')['useLink']>
490 |     readonly useLocalStorage: UnwrapRef<typeof import('@vueuse/core')['useLocalStorage']>
491 |     readonly useMagicKeys: UnwrapRef<typeof import('@vueuse/core')['useMagicKeys']>
492 |     readonly useManualRefHistory: UnwrapRef<typeof import('@vueuse/core')['useManualRefHistory']>
493 |     readonly useMediaControls: UnwrapRef<typeof import('@vueuse/core')['useMediaControls']>
494 |     readonly useMediaQuery: UnwrapRef<typeof import('@vueuse/core')['useMediaQuery']>
495 |     readonly useMemoize: UnwrapRef<typeof import('@vueuse/core')['useMemoize']>
496 |     readonly useMemory: UnwrapRef<typeof import('@vueuse/core')['useMemory']>
497 |     readonly useModel: UnwrapRef<typeof import('vue')['useModel']>
498 |     readonly useMounted: UnwrapRef<typeof import('@vueuse/core')['useMounted']>
499 |     readonly useMouse: UnwrapRef<typeof import('@vueuse/core')['useMouse']>
500 |     readonly useMouseInElement: UnwrapRef<typeof import('@vueuse/core')['useMouseInElement']>
501 |     readonly useMousePressed: UnwrapRef<typeof import('@vueuse/core')['useMousePressed']>
502 |     readonly useMutationObserver: UnwrapRef<typeof import('@vueuse/core')['useMutationObserver']>
503 |     readonly useNavigatorLanguage: UnwrapRef<typeof import('@vueuse/core')['useNavigatorLanguage']>
504 |     readonly useNetwork: UnwrapRef<typeof import('@vueuse/core')['useNetwork']>
505 |     readonly useNow: UnwrapRef<typeof import('@vueuse/core')['useNow']>
506 |     readonly useObjectUrl: UnwrapRef<typeof import('@vueuse/core')['useObjectUrl']>
507 |     readonly useOffsetPagination: UnwrapRef<typeof import('@vueuse/core')['useOffsetPagination']>
508 |     readonly useOnline: UnwrapRef<typeof import('@vueuse/core')['useOnline']>
509 |     readonly usePageLeave: UnwrapRef<typeof import('@vueuse/core')['usePageLeave']>
510 |     readonly useParallax: UnwrapRef<typeof import('@vueuse/core')['useParallax']>
511 |     readonly usePermission: UnwrapRef<typeof import('@vueuse/core')['usePermission']>
512 |     readonly usePointer: UnwrapRef<typeof import('@vueuse/core')['usePointer']>
513 |     readonly usePointerLock: UnwrapRef<typeof import('@vueuse/core')['usePointerLock']>
514 |     readonly usePointerSwipe: UnwrapRef<typeof import('@vueuse/core')['usePointerSwipe']>
515 |     readonly usePreferredColorScheme: UnwrapRef<typeof import('@vueuse/core')['usePreferredColorScheme']>
516 |     readonly usePreferredContrast: UnwrapRef<typeof import('@vueuse/core')['usePreferredContrast']>
517 |     readonly usePreferredDark: UnwrapRef<typeof import('@vueuse/core')['usePreferredDark']>
518 |     readonly usePreferredLanguages: UnwrapRef<typeof import('@vueuse/core')['usePreferredLanguages']>
519 |     readonly usePreferredReducedMotion: UnwrapRef<typeof import('@vueuse/core')['usePreferredReducedMotion']>
520 |     readonly usePrevious: UnwrapRef<typeof import('@vueuse/core')['usePrevious']>
521 |     readonly useRafFn: UnwrapRef<typeof import('@vueuse/core')['useRafFn']>
522 |     readonly useRefHistory: UnwrapRef<typeof import('@vueuse/core')['useRefHistory']>
523 |     readonly useResizeObserver: UnwrapRef<typeof import('@vueuse/core')['useResizeObserver']>
524 |     readonly useRoute: UnwrapRef<typeof import('vue-router')['useRoute']>
525 |     readonly useRouter: UnwrapRef<typeof import('vue-router')['useRouter']>
526 |     readonly useScreenOrientation: UnwrapRef<typeof import('@vueuse/core')['useScreenOrientation']>
527 |     readonly useScreenSafeArea: UnwrapRef<typeof import('@vueuse/core')['useScreenSafeArea']>
528 |     readonly useScriptTag: UnwrapRef<typeof import('@vueuse/core')['useScriptTag']>
529 |     readonly useScroll: UnwrapRef<typeof import('@vueuse/core')['useScroll']>
530 |     readonly useScrollLock: UnwrapRef<typeof import('@vueuse/core')['useScrollLock']>
531 |     readonly useSessionStorage: UnwrapRef<typeof import('@vueuse/core')['useSessionStorage']>
532 |     readonly useShare: UnwrapRef<typeof import('@vueuse/core')['useShare']>
533 |     readonly useSlots: UnwrapRef<typeof import('vue')['useSlots']>
534 |     readonly useSorted: UnwrapRef<typeof import('@vueuse/core')['useSorted']>
535 |     readonly useSpeechRecognition: UnwrapRef<typeof import('@vueuse/core')['useSpeechRecognition']>
536 |     readonly useSpeechSynthesis: UnwrapRef<typeof import('@vueuse/core')['useSpeechSynthesis']>
537 |     readonly useStepper: UnwrapRef<typeof import('@vueuse/core')['useStepper']>
538 |     readonly useStorage: UnwrapRef<typeof import('@vueuse/core')['useStorage']>
539 |     readonly useStorageAsync: UnwrapRef<typeof import('@vueuse/core')['useStorageAsync']>
540 |     readonly useStyleTag: UnwrapRef<typeof import('@vueuse/core')['useStyleTag']>
541 |     readonly useSupported: UnwrapRef<typeof import('@vueuse/core')['useSupported']>
542 |     readonly useSwipe: UnwrapRef<typeof import('@vueuse/core')['useSwipe']>
543 |     readonly useTemplateRef: UnwrapRef<typeof import('vue')['useTemplateRef']>
544 |     readonly useTemplateRefsList: UnwrapRef<typeof import('@vueuse/core')['useTemplateRefsList']>
545 |     readonly useTextDirection: UnwrapRef<typeof import('@vueuse/core')['useTextDirection']>
546 |     readonly useTextSelection: UnwrapRef<typeof import('@vueuse/core')['useTextSelection']>
547 |     readonly useTextareaAutosize: UnwrapRef<typeof import('@vueuse/core')['useTextareaAutosize']>
548 |     readonly useThrottle: UnwrapRef<typeof import('@vueuse/core')['useThrottle']>
549 |     readonly useThrottleFn: UnwrapRef<typeof import('@vueuse/core')['useThrottleFn']>
550 |     readonly useThrottledRefHistory: UnwrapRef<typeof import('@vueuse/core')['useThrottledRefHistory']>
551 |     readonly useTimeAgo: UnwrapRef<typeof import('@vueuse/core')['useTimeAgo']>
552 |     readonly useTimeout: UnwrapRef<typeof import('@vueuse/core')['useTimeout']>
553 |     readonly useTimeoutFn: UnwrapRef<typeof import('@vueuse/core')['useTimeoutFn']>
554 |     readonly useTimeoutPoll: UnwrapRef<typeof import('@vueuse/core')['useTimeoutPoll']>
555 |     readonly useTimestamp: UnwrapRef<typeof import('@vueuse/core')['useTimestamp']>
556 |     readonly useTitle: UnwrapRef<typeof import('@vueuse/core')['useTitle']>
557 |     readonly useToNumber: UnwrapRef<typeof import('@vueuse/core')['useToNumber']>
558 |     readonly useToString: UnwrapRef<typeof import('@vueuse/core')['useToString']>
559 |     readonly useToggle: UnwrapRef<typeof import('@vueuse/core')['useToggle']>
560 |     readonly useTransition: UnwrapRef<typeof import('@vueuse/core')['useTransition']>
561 |     readonly useUrlSearchParams: UnwrapRef<typeof import('@vueuse/core')['useUrlSearchParams']>
562 |     readonly useUserMedia: UnwrapRef<typeof import('@vueuse/core')['useUserMedia']>
563 |     readonly useVModel: UnwrapRef<typeof import('@vueuse/core')['useVModel']>
564 |     readonly useVModels: UnwrapRef<typeof import('@vueuse/core')['useVModels']>
565 |     readonly useVibrate: UnwrapRef<typeof import('@vueuse/core')['useVibrate']>
566 |     readonly useVirtualList: UnwrapRef<typeof import('@vueuse/core')['useVirtualList']>
567 |     readonly useWakeLock: UnwrapRef<typeof import('@vueuse/core')['useWakeLock']>
568 |     readonly useWebNotification: UnwrapRef<typeof import('@vueuse/core')['useWebNotification']>
569 |     readonly useWebSocket: UnwrapRef<typeof import('@vueuse/core')['useWebSocket']>
570 |     readonly useWebWorker: UnwrapRef<typeof import('@vueuse/core')['useWebWorker']>
571 |     readonly useWebWorkerFn: UnwrapRef<typeof import('@vueuse/core')['useWebWorkerFn']>
572 |     readonly useWindowFocus: UnwrapRef<typeof import('@vueuse/core')['useWindowFocus']>
573 |     readonly useWindowScroll: UnwrapRef<typeof import('@vueuse/core')['useWindowScroll']>
574 |     readonly useWindowSize: UnwrapRef<typeof import('@vueuse/core')['useWindowSize']>
575 |     readonly watch: UnwrapRef<typeof import('vue')['watch']>
576 |     readonly watchArray: UnwrapRef<typeof import('@vueuse/core')['watchArray']>
577 |     readonly watchAtMost: UnwrapRef<typeof import('@vueuse/core')['watchAtMost']>
578 |     readonly watchDebounced: UnwrapRef<typeof import('@vueuse/core')['watchDebounced']>
579 |     readonly watchEffect: UnwrapRef<typeof import('vue')['watchEffect']>
580 |     readonly watchIgnorable: UnwrapRef<typeof import('@vueuse/core')['watchIgnorable']>
581 |     readonly watchOnce: UnwrapRef<typeof import('@vueuse/core')['watchOnce']>
582 |     readonly watchPausable: UnwrapRef<typeof import('@vueuse/core')['watchPausable']>
583 |     readonly watchPostEffect: UnwrapRef<typeof import('vue')['watchPostEffect']>
584 |     readonly watchSyncEffect: UnwrapRef<typeof import('vue')['watchSyncEffect']>
585 |     readonly watchThrottled: UnwrapRef<typeof import('@vueuse/core')['watchThrottled']>
586 |     readonly watchTriggerable: UnwrapRef<typeof import('@vueuse/core')['watchTriggerable']>
587 |     readonly watchWithFilter: UnwrapRef<typeof import('@vueuse/core')['watchWithFilter']>
588 |     readonly whenever: UnwrapRef<typeof import('@vueuse/core')['whenever']>
589 |   }
590 | }
591 | 


--------------------------------------------------------------------------------