Compare commits

...

2 Commits

Author SHA1 Message Date
LSF
b79bbb28cb Merge branch 'main' of http://106.13.50.69:30257/LSF/LSF_Application 2025-07-14 17:35:32 +08:00
LSF
387bb36335 feat: add 2025-07-14 17:14:32 +08:00
40 changed files with 2070 additions and 134 deletions

4
.env.development Normal file
View File

@ -0,0 +1,4 @@
#变量必须以VITE_为前缀才能暴露给外部读取
NODE_ENV='development'
VITE_APP_TITLE='管理平台'
VITE_APP_BASE_URL='/api'

4
.env.production Normal file
View File

@ -0,0 +1,4 @@
#变量必须以VITE_为前缀才能暴露给外部读取
NODE_ENV='production'
VITE_APP_TITLE='管理平台'
VITE_APP_BASE_URL='/prod-api'

4
.env.test Normal file
View File

@ -0,0 +1,4 @@
#变量必须以VITE_为前缀才能暴露给外部读取
NODE_ENV='test'
VITE_APP_TITLE='管理平台'
VITE_APP_BASE_URL='/test-api'

View File

@ -4,7 +4,7 @@
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue + TS</title>
<title>我的应用</title>
</head>
<body>
<div id="app"></div>

69
mock/user.ts Normal file
View File

@ -0,0 +1,69 @@
//用户信息数据
function createUserList() {
return [
{
userId: 1,
avatar:
'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
username: 'admin',
password: '111111',
desc: '平台管理员',
roles: ['平台管理员'],
buttons: ['cuser.detail'],
routes: ['home'],
token: 'Admin Token',
},
{
userId: 2,
avatar:
'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
username: 'system',
password: '111111',
desc: '系统管理员',
roles: ['系统管理员'],
buttons: ['cuser.detail', 'cuser.user'],
routes: ['home'],
token: 'System Token',
},
]
}
export default [
// 用户登录接口
{
url: '/api/user/login', //请求地址
method: 'post', //请求方式
response: ({ body }) => {
//获取请求体携带过来的用户名与密码
const { username, password } = body
//调用获取用户信息函数,用于判断是否有此用户
const checkUser = createUserList().find(
(item) => item.username === username && item.password === password,
)
//没有用户返回失败信息
if (!checkUser) {
return { code: 201, data: { message: '账号或者密码不正确' } }
}
//如果有返回成功信息
const { token } = checkUser
return { code: 200, data: { token } }
},
},
// 获取用户信息
{
url: '/api/user/info',
method: 'get',
response: (request) => {
//获取请求头携带token
const token = request.headers.token
//查看用户信息是否包含有次token用户
const checkUser = createUserList().find((item) => item.token === token)
//没有返回失败的信息
if (!checkUser) {
return { code: 201, data: { message: '获取用户信息失败' } }
}
//如果有返回成功信息
return { code: 200, data: { checkUser } }
},
},
]

View File

@ -13,17 +13,24 @@
"lint:eslint": "eslint src/**/*.{ts,vue} --cache --fix",
"lint:style": "stylelint src/**/*.{css,scss,vue} --cache --fix",
"commitlint": "commitlint --config commitlint.config.cjs -e -V",
"prepare": "husky && husky install"
"prepare": "husky && husky install",
"preinstall": "node ./scripts/preinstall.js",
"build:test": "vue-tsc && vite build --mode test",
"build:pro": "vue-tsc && vite build --mode production"
},
"dependencies": {
"@element-plus/icons-vue": "^2.3.1",
"axios": "^1.10.0",
"element-plus": "^2.10.3",
"vue": "^3.5.13"
"vue": "^3.5.13",
"vue-router": "^4.5.1"
},
"devDependencies": {
"@babel/eslint-parser": "^7.28.0",
"@commitlint/cli": "^19.8.1",
"@commitlint/config-conventional": "^19.8.1",
"@eslint/js": "latest",
"@types/node": "^24.0.12",
"@vitejs/plugin-vue": "^5.2.3",
"@vue/tsconfig": "^0.7.0",
"eslint": "^9.30.1",
@ -34,6 +41,7 @@
"eslint-plugin-vue": "^10.3.0",
"globals": "^16.3.0",
"husky": "^8.0.0",
"mockjs": "^1.1.0",
"postcss": "^8.5.6",
"postcss-html": "^1.8.0",
"postcss-scss": "^4.0.9",
@ -52,6 +60,8 @@
"typescript": "~5.8.3",
"typescript-eslint": "^8.36.0",
"vite": "^6.3.5",
"vite-plugin-mock": "^3.0.2",
"vite-plugin-svg-icons": "^2.0.1",
"vue-tsc": "^2.2.8"
}
}

1481
pnpm-lock.yaml generated

File diff suppressed because it is too large Load Diff

7
scritps/preinstall.js Normal file
View File

@ -0,0 +1,7 @@
if (!/pnpm/.test(process.env.npm_execpath || '')) {
console.warn(
`\u001b[33mThis repository must using pnpm as the package manager ` +
` for scripts to work properly.\u001b[39m\n`,
)
process.exit(1)
}

View File

@ -1,6 +1,6 @@
<template>
<div>
<h1>我增加l一个新标题</h1>
<h1>App根组件</h1>
</div>
</template>
<script lang="ts" setup></script>

17
src/api/user/index.ts Normal file
View File

@ -0,0 +1,17 @@
//统一管理用户相关的接口
import request from '@/utils/request'
import type { LoginForm, loginResponseData, UserInfoResponseData } from './type'
//统一管理接口
const enum API {
LOGIN_URL = '/user/login',
USER_INFO_URL = '/user/info',
}
//暴露请求函数
//登录接口方法
export const reqLogin = (data: LoginForm) =>
request.post<any, loginResponseData>(API.LOGIN_URL, data)
//获取用户信息接口方法
export const reqUserInfo = () =>
request.get<any, UserInfoResponseData>(API.USER_INFO_URL)

36
src/api/user/type.ts Normal file
View File

@ -0,0 +1,36 @@
//登录接口需要携带参数ts类型
export interface LoginForm {
username: string
password: string
}
//用户信息接口返回的类型
interface dataType {
token: string
}
export interface loginResponseData {
code: number
data: dataType
}
//用户信息接口返回的类型
interface userInfo {
userId: number
avatar: string
username: string
password: string
desc: string
roles: string[]
buttons: string[]
routes: string[]
token: string
}
interface user {
checkUser: userInfo
}
export interface UserInfoResponseData {
code: number
data: user
}

View File

@ -0,0 +1 @@
<svg t="1752202695559" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3557" width="16" height="16"><path d="M746.932 698.108" fill="#A9B7B7" p-id="3558"></path><path d="M925.731 288.698c-1.261-1.18-3.607-3.272-6.902-6.343-5.486-5.112-11.615-10.758-18.236-16.891-18.921-17.526-38.003-35.028-56.046-51.397-2.038-1.848-2.038-1.835-4.077-3.682-24.075-21.795-44.156-39.556-58.996-52.076-8.682-7.325-15.517-12.807-20.539-16.426-3.333-2.402-6.043-4.13-8.715-5.396-3.365-1.595-6.48-2.566-10.905-2.483C729.478 134.227 720 143.77 720 155.734l0 42.475 0 42.475 0 84.95L720 347l21.205 0L890 347l0 595L358.689 942C323.429 942 295 913.132 295 877.922L295 177l361.205 0c11.736 0 21.25-9.771 21.25-21.5s-9.514-21.5-21.25-21.5l-382.5 0L252 134l0 21.734L252 813l-52.421 0C166.646 813 140 786.928 140 754.678L140 72l566.286 0C739.29 72 766 98.154 766 130.404L766 134l40 0 0-3.596C806 76.596 761.271 33 706.286 33L119.958 33 100 33l0 19.506 0 702.172C100 808.463 144.642 852 199.579 852L252 852l0 25.922C252 936.612 299.979 984 358.689 984l552.515 0L932 984l0-21.237L932 325.635 932 304l0.433 0C932.432 299 930.196 292.878 925.731 288.698zM762 304l0-63.315L762 198.21l0-0.273c14 11.479 30.3 26.369 49.711 43.942 2.022 1.832 2.136 1.832 4.157 3.665 17.923 16.259 36.957 33.492 55.779 50.926 2.878 2.666 5.713 5.531 8.391 7.531L762 304.001z" fill="#272636" p-id="3559"></path><path d="M816.936 436 407.295 436c-10.996 0-19.91 8.727-19.91 19.5 0 10.77 8.914 19.5 19.91 19.5l409.641 0c11 0 19.914-8.73 19.914-19.5C836.85 444.727 827.936 436 816.936 436z" fill="#272636" p-id="3560"></path><path d="M816.936 553 407.295 553c-10.996 0-19.91 8.727-19.91 19.5 0 10.774 8.914 19.5 19.91 19.5l409.641 0c11 0 19.914-8.726 19.914-19.5C836.85 561.727 827.936 553 816.936 553z" fill="#272636" p-id="3561"></path><path d="M816.936 689 407.295 689c-10.996 0-19.91 8.729-19.91 19.503 0 10.769 8.914 19.497 19.91 19.497l409.641 0c11 0 19.914-8.729 19.914-19.497C836.85 697.729 827.936 689 816.936 689z" fill="#272636" p-id="3562"></path></svg>

After

Width:  |  Height:  |  Size: 2.0 KiB

View File

@ -0,0 +1 @@
<svg t="1752203041878" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8477" width="16" height="16"><path d="M466.45 819.6H239.809c-19.851 0-36-16.149-36-36V557.952c0-15.464-12.536-28-28-28s-28 12.536-28 28V783.6c0 50.729 41.271 92 92 92H466.45c15.464 0 28-12.536 28-28s-12.536-28-28-28zM846.574 528.133c-15.464 0-28 12.536-28 28V783.6c0 19.851-16.149 36-36 36h-225.17c-15.464 0-28 12.536-28 28s12.536 28 28 28h225.17c50.729 0 92-41.271 92-92V556.133c0-15.464-12.536-28-28-28zM175.809 494.997c15.464 0 28-12.536 28-28V240.834c0-19.851 16.149-36 36-36H464.63c15.464 0 28-12.536 28-28s-12.536-28-28-28H239.809c-50.729 0-92 41.271-92 92v226.163c0 15.464 12.536 28 28 28zM782.574 148.834H555.586c-15.464 0-28 12.536-28 28s12.536 28 28 28h226.988c19.851 0 36 16.149 36 36v224.344c0 15.464 12.536 28 28 28s28-12.536 28-28V240.834c0-50.729-41.271-92-92-92z" p-id="8478"></path></svg>

After

Width:  |  Height:  |  Size: 920 B

View File

@ -0,0 +1 @@
<svg t="1752202569118" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2845" width="16" height="16"><path d="M576.128 143.786667l277.333333 160.576A128 128 0 0 1 917.333333 415.125333V789.333333a128 128 0 0 1-128 128H234.666667a128 128 0 0 1-128-128V415.146667a128 128 0 0 1 63.872-110.784l277.333333-160.576a128 128 0 0 1 128.256 0z m-82.133333 72.106666l-3.370667 1.749334-277.333333 160.554666a42.666667 42.666667 0 0 0-21.141334 33.450667L192 415.125333V789.333333a42.666667 42.666667 0 0 0 39.466667 42.56L234.666667 832h234.666666v-192a42.666667 42.666667 0 1 1 85.333334 0v192h234.666666a42.666667 42.666667 0 0 0 42.56-39.466667L832 789.333333V415.146667a42.666667 42.666667 0 0 0-18.346667-35.072l-2.944-1.877334-277.333333-160.554666a42.666667 42.666667 0 0 0-39.381333-1.749334z" fill="#5F6A7A" p-id="2846"></path></svg>

After

Width:  |  Height:  |  Size: 875 B

View File

@ -0,0 +1 @@
<svg t="1752199510453" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2322" width="16" height="16"><path d="M479.488 109.12v-1.472a32 32 0 0 1 31.488-31.488h1.472-0.512 1.472a32 32 0 0 1 31.424 32.96V218.88a32 32 0 0 1-31.424 31.488h-1.472 0.512-1.472a32 32 0 0 1-31.488-31.488V109.12z m243.008 57.664l0.896-1.152a32 32 0 0 1 45.12-6.144l-0.384-0.256 1.152 0.832a32 32 0 0 1 6.976 43.968l-0.896 1.216-63.68 87.68-0.896 1.152a32 32 0 0 1-43.904 7.04l-1.28-0.896 0.512 0.32-1.216-0.896a32 32 0 0 1-6.976-43.968l0.896-1.152 63.68-87.68z m162.688 189.568l1.408-0.448a32 32 0 0 1 39.68 20.224c0 0.256 0.128 0.512 0.384 1.344l-0.128-0.448 0.448 1.408a32 32 0 0 1-20.224 39.616l-1.408 0.448-103.04 33.536a32 32 0 0 1-41.088-19.776l-0.448-1.408 0.128 0.512a32 32 0 0 1 19.776-41.024l1.408-0.512 103.04-33.472z m20.096 248.896l1.408 0.448a32 32 0 0 1 20.224 39.68l-0.448 1.408 0.128-0.512-0.448 1.408a32 32 0 0 1-39.68 20.16l-1.344-0.448-103.104-33.472-1.408-0.448a32 32 0 0 1-19.776-41.088l-0.128 0.512 0.448-1.408a32 32 0 0 1 41.024-19.712l103.104 33.472z m-129.92 213.184l0.896 1.216a32 32 0 0 1-6.976 43.968l-1.152 0.832 0.384-0.32-1.152 0.896a32 32 0 0 1-43.968-6.976l-0.896-1.152-63.68-87.68a32 32 0 0 1 7.296-46.016l-0.448 0.256 1.216-0.832a32 32 0 0 1 43.904 6.976l0.896 1.152 63.68 87.68z m-230.464 96.192v1.472a32 32 0 0 1-31.488 31.488h-1.472 0.512-1.472a32 32 0 0 1-31.424-31.488V806.208v-1.472a32 32 0 0 1 31.424-31.424h1.472H512h1.472a32 32 0 0 1 31.488 32.896v108.416z m-243.008-57.728l-0.896 1.216a32 32 0 0 1-43.968 6.976l-1.152-0.896 0.384 0.32-1.152-0.896a32 32 0 0 1-6.976-43.904l0.832-1.216 63.744-87.68 0.896-1.216a32 32 0 0 1 43.904-6.912l1.216 0.832-0.448-0.32 1.216 0.896a32 32 0 0 1 6.08 45.12l-63.68 87.68z m-162.688-189.504l-1.408 0.448a32 32 0 0 1-40.128-21.632l0.192 0.512-0.448-1.408a32 32 0 0 1 21.632-40.128l103.04-33.472 1.408-0.448a32 32 0 0 1 39.68 20.224l0.448 1.344-0.192-0.448 0.448 1.408a32 32 0 0 1-20.16 39.616l-1.408 0.448-103.04 33.536z m-20.096-248.96a32 32 0 0 1-21.632-40.128l0.448-1.28-0.128 0.448 0.448-1.408a32 32 0 0 1 41.024-19.712l103.104 33.472 1.408 0.448a32 32 0 0 1 19.712 41.024l0.192-0.448-0.448 1.344a32 32 0 0 1-39.68 20.224l-1.408-0.448-103.04-33.472z m129.92-213.12a32 32 0 0 1 7.296-46.016l-0.448 0.256 1.152-0.832a32 32 0 0 1 43.968 6.912l0.896 1.216 63.68 87.68 0.896 1.216a32 32 0 0 1-8.192 44.8l0.448-0.32a32 32 0 0 1-45.12-6.08l-0.896-1.216-63.744-87.68z" fill="#263140" p-id="2323"></path></svg>

After

Width:  |  Height:  |  Size: 2.4 KiB

View File

@ -0,0 +1 @@
<svg t="1752199566735" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2551" width="16" height="16"><path d="M639.68 352.128H384.512v-44.608l0.192-6.848q2.688-44.608 38.464-75.968 37.12-32.576 88.96-32.576 53.568 0 91.136 34.56 36.48 33.536 36.48 80.384v45.056z m64 0v-45.056q0-74.88-57.024-127.424-55.936-51.52-134.528-51.52-75.904 0-131.2 48.448-56.064 49.216-60.16 120.896v0.448l-0.256 8.704v45.504H192a64 64 0 0 0-64 64v416a64 64 0 0 0 64 64h640a64 64 0 0 0 64-64v-416a64 64 0 0 0-64-64h-128.32z m128.32 480H192v-416h640v416zM509.312 576c16.192 0 29.376 13.12 29.376 29.312v97.792a29.312 29.312 0 0 1-58.688 0V605.312c0-16.192 13.12-29.312 29.312-29.312z" fill="#263140" p-id="2552"></path></svg>

After

Width:  |  Height:  |  Size: 744 B

View File

@ -0,0 +1 @@
<svg t="1752202805307" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5775" width="16" height="16"><path d="M868 732h-70.3c-4.8 0-9.3 2.1-12.3 5.8-7 8.5-14.5 16.7-22.4 24.5-32.6 32.5-70.5 58.1-112.7 75.9-43.6 18.4-90 27.8-137.9 27.8-47.9 0-94.3-9.4-137.9-27.8-42.2-17.8-80.1-43.4-112.7-75.9-32.6-32.5-58.1-70.4-76-112.5C167.3 606.2 158 559.9 158 512s9.4-94.2 27.8-137.8c17.8-42.1 43.4-80 76-112.5s70.5-58.1 112.7-75.9c43.6-18.4 90-27.8 137.9-27.8 47.9 0 94.3 9.3 137.9 27.8 42.2 17.8 80.1 43.4 112.7 75.9 7.9 7.9 15.3 16.1 22.4 24.5 3 3.7 7.6 5.8 12.3 5.8H868c6.3 0 10.2-7 6.7-12.3C798 160.5 663.8 81.6 511.3 82 271.7 82.6 79.6 277.1 82 516.4 84.4 751.9 276.2 942 512.4 942c152.1 0 285.7-78.8 362.3-197.7 3.4-5.3-0.4-12.3-6.7-12.3z" p-id="5776"></path><path d="M956.9 505.7L815 393.7c-5.3-4.2-13-0.4-13 6.3v76H488c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h314v76c0 6.7 7.8 10.5 13 6.3l141.9-112c4.1-3.2 4.1-9.4 0-12.6z" p-id="5777"></path></svg>

After

Width:  |  Height:  |  Size: 984 B

View File

@ -0,0 +1 @@
<svg t="1752199349074" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1545" width="16" height="16"><path d="M512 96a32.832 32.832 0 0 0-32.896 32.832v277.312a32.832 32.832 0 0 0 65.728 0V128.832a32.832 32.832 0 0 0-32.896-32.832zM354.944 176.896a33.216 33.216 0 0 0-44.672-12.544C179.2 235.648 96 371.072 96 520.704 96 745.6 282.24 928 512 928s416-182.4 416-407.296c0-147.008-80.256-280.384-207.808-352.704a33.28 33.28 0 0 0-44.928 11.712 31.808 31.808 0 0 0 11.968 43.904c107.52 60.928 175.104 173.248 175.104 297.088 0 189.44-156.864 343.04-350.336 343.04s-350.336-153.6-350.336-343.04c0-126.08 70.016-240 180.544-300.16a31.808 31.808 0 0 0 12.8-43.648z" fill="#263140" p-id="1546"></path></svg>

After

Width:  |  Height:  |  Size: 742 B

View File

@ -0,0 +1 @@
<svg t="1752199401248" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1819" width="16" height="16"><path d="M254.336 131.968h108.224q43.968 0 65.28 38.4l52.224 94.08q19.072 34.368 1.472 69.568l-45.184 90.432q14.72 59.328 64.512 109.12 49.728 49.728 108.8 64.256l90.432-45.248q35.2-17.6 69.632 1.536l94.336 52.416q38.4 21.312 38.4 65.28v108.16q0 57.6-44.8 91.52-45.888 34.688-100.928 16.128-261.632-88.32-391.68-218.304-130.048-130.048-218.304-391.68-18.56-55.04 16.192-100.864 33.92-44.8 91.392-44.8z m0 64q-25.6 0-40.384 19.456-14.272 18.88-6.592 41.728 83.52 247.488 202.944 366.912 119.488 119.424 366.912 202.88 22.912 7.808 41.728-6.528 19.456-14.72 19.456-40.384v-108.224q0-6.272-5.44-9.344l-94.336-52.48q-4.864-2.688-9.92-0.192l-110.272 55.168-10.624-2.048q-84.288-16.192-152.256-84.096-67.84-67.904-84.288-152.448l-2.112-10.688 55.168-110.272q2.56-5.056-0.192-9.92l-52.224-94.08q-3.072-5.44-9.344-5.44h-108.16z" fill="#263140" p-id="1820"></path></svg>

After

Width:  |  Height:  |  Size: 1005 B

View File

@ -0,0 +1 @@
<svg t="1752199433386" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2093" width="16" height="16"><path d="M512 128Q348.992 128 235.712 245.312a32 32 0 0 0 46.08 44.48Q376.064 192 512 192q132.544 0 226.304 93.696Q831.936 379.392 832 511.808V512a32 32 0 0 0 64 0V199.104a32 32 0 0 0-64 0v99.456q-20.864-30.464-48.448-58.112Q671.04 128 512 128zM192 512q0 132.544 93.696 226.304Q379.52 832 512 832q129.28 0 222.208-89.728a32 32 0 1 1 44.48 46.08Q667.136 896 512 896q-159.04 0-271.552-112.448-27.584-27.648-48.448-58.112v99.456a32 32 0 0 1-64 0V512a31.872 31.872 0 0 1 40.832-30.72A32 32 0 0 1 192 512z" fill="#263140" p-id="2094"></path></svg>

After

Width:  |  Height:  |  Size: 686 B

View File

@ -0,0 +1 @@
<svg t="1752198366392" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1155" width="16" height="16"><path d="M285.9 625H738c93.6 0 169.5 75.9 169.5 169.5V851c0 31.2-25.3 56.5-56.5 56.5H172.9c-31.2 0-56.5-25.3-56.5-56.5v-56.5c0-93.5 75.9-169.5 169.5-169.5z m-113 226.1h678.2v-56.5c0-30.2-11.7-58.5-33.1-79.9-21.4-21.4-49.7-33.1-79.9-33.1H285.9c-30.2 0-58.5 11.7-79.9 33.1-21.4 21.4-33.1 49.7-33.1 79.9v56.5zM512 568.5c-124.9 0-226.1-101.2-226.1-226.1s101.2-226 226.1-226 226.1 101.2 226.1 226.1-101.2 226-226.1 226z m119.9-346c-32.1-32-74.6-49.6-119.9-49.6s-87.9 17.7-119.9 49.6c-32 32.1-49.6 74.6-49.6 119.9 0 45.3 17.7 87.9 49.6 119.9 32.1 32 74.6 49.6 119.9 49.6s87.9-17.7 119.9-49.6c32-32.1 49.6-74.6 49.6-119.9 0-45.2-17.6-87.8-49.6-119.9z" p-id="1156"></path></svg>

After

Width:  |  Height:  |  Size: 814 B

View File

@ -0,0 +1 @@
<svg t="1752202755075" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4739" width="16" height="16"><path d="M85.333333 170.666667v682.666666h853.333334V170.666667H85.333333z m0-85.333334h853.333334a85.333333 85.333333 0 0 1 85.333333 85.333334v682.666666a85.333333 85.333333 0 0 1-85.333333 85.333334H85.333333a85.333333 85.333333 0 0 1-85.333333-85.333334V170.666667a85.333333 85.333333 0 0 1 85.333333-85.333334z" fill="#000000" p-id="4740"></path><path d="M256 298.666667m64 0l0 0q64 0 64 64l0 42.666666q0 64-64 64l0 0q-64 0-64-64l0-42.666666q0-64 64-64Z" fill="#000000" p-id="4741"></path><path d="M640 298.666667m64 0l0 0q64 0 64 64l0 42.666666q0 64-64 64l0 0q-64 0-64-64l0-42.666666q0-64 64-64Z" fill="#000000" p-id="4742"></path><path d="M288.170667 674.346667a42.666667 42.666667 0 1 1 61.781333-58.88C390.229333 657.792 448.725333 682.666667 512 682.666667c63.914667 0 122.88-25.386667 163.157333-68.352a42.666667 42.666667 0 1 1 62.293334 58.325333C680.96 732.885333 599.381333 768 512 768c-86.570667 0-167.424-34.432-223.829333-93.653333z" fill="#000000" p-id="4743"></path></svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -1,41 +0,0 @@
<script setup lang="ts">
import { ref } from 'vue'
defineProps<{ msg: string }>()
const count = ref(0)
</script>
<template>
<h1>{{ msg }}</h1>
<div class="card">
<button type="button" @click="count++">count is {{ count }}</button>
<p>
Edit
<code>components/HelloWorld.vue</code> to test HMR
</p>
</div>
<p>
Check out
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
>create-vue</a
>, the official Vue + Vite starter
</p>
<p>
Learn more about IDE Support for Vue in the
<a
href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
target="_blank"
>Vue Docs Scaling up Guide</a
>.
</p>
<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
</template>
<style scoped>
.read-the-docs {
color: #888;
}
</style>

View File

@ -0,0 +1,7 @@
<template>
<div>分页器全局组件</div>
</template>
<script setup lang="ts"></script>
<style scoped></style>

View File

@ -0,0 +1,30 @@
<template>
<svg :style="{ width, height }">
<use :href="`${prefix}${name}`" :fill="color"></use>
</svg>
</template>
<script lang="ts" setup>
defineProps({
prefix: {
type: String,
default: '#icon-',
},
name: {
type: String,
required: true,
},
color: {
type: String,
default: 'currentColor', // 使
},
width: {
type: String,
default: '16px',
},
height: {
type: String,
default: '16px',
},
})
</script>

16
src/components/index.ts Normal file
View File

@ -0,0 +1,16 @@
import type { App, DefineComponent } from 'vue' // 所有类型都加上 type
import SvgIcon from './SvgIcon/index.vue'
import Pagination from './Pagination/index.vue'
const components = {
SvgIcon,
Pagination,
}
export default {
install(app: App) {
Object.entries(components).forEach(([name, component]) => {
app.component(name, component)
})
},
}

View File

@ -1,13 +1,31 @@
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import App from '@/App.vue'
//导入element-plus插件和样式
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
//导入element-plus的中文语言包
import zhCn from 'element-plus/es/locale/lang/zh-cn'
//获取APP实例
const app = createApp(App)
//使用element-plus插件
app.use(ElementPlus)
app.use(ElementPlus, {
locale: zhCn, //设置语言为中文国际化
})
//svg插件需要配置代码
import 'virtual:svg-icons-register'
//引入自定义插件对象,注册整个项目全局组件
import gloabalComponents from '@/components'
//console.log('gloabalComponents:', gloabalComponents) //输出插件对象
//使用自定义插件对象
app.use(gloabalComponents)
//console.log('当前环境:', import.meta.env) //输出当前环境
//引入模板的全局样式
import '@/styles/index.scss'
//挂载APP实例到#app元素上
app.mount('#app')

11
src/router/index.ts Normal file
View File

@ -0,0 +1,11 @@
//通过vue-router插件实现模板路由配置
import { createRouter, createWebHashHistory } from 'vue-router'
import { constantRoute } from './routes'
//创建路由器
let router = createRouter({
//路由模式hash
history: createWebHashHistory(),
routes: constantRoute, //路由表
})
export default router

25
src/router/routes.ts Normal file
View File

@ -0,0 +1,25 @@
//对外暴露配置路由(常量路由)
export const constantRoute = [
{
//登录路由
path: '/login',
component: () => import('@/views/login/index.vue'),
name: 'login', //命名路由
},
{
//登录成功展示数据的路由
path: '/',
component: () => import('@/views/home/index.vue'),
name: 'layout', //命名路由
},
{
path: '/404',
component: () => import('@/views/404/index.vue'),
name: '404',
},
{
path: '/:pathMatch(.*)*', //匹配所有未定义的路由
redirect: '/404', //重定向到404页面
name: 'Any', //命名路由
},
] //路由表

View File

@ -1,79 +0,0 @@
:root {
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
color-scheme: light dark;
color: rgba(255, 255, 255, 0.87);
background-color: #242424;
font-synthesis: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
font-weight: 500;
color: #646cff;
text-decoration: inherit;
}
a:hover {
color: #535bf2;
}
body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}
h1 {
font-size: 3.2em;
line-height: 1.1;
}
button {
border-radius: 8px;
border: 1px solid transparent;
padding: 0.6em 1.2em;
font-size: 1em;
font-weight: 500;
font-family: inherit;
background-color: #1a1a1a;
cursor: pointer;
transition: border-color 0.25s;
}
button:hover {
border-color: #646cff;
}
button:focus,
button:focus-visible {
outline: 4px auto -webkit-focus-ring-color;
}
.card {
padding: 2em;
}
#app {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
@media (prefers-color-scheme: light) {
:root {
color: #213547;
background-color: #ffffff;
}
a:hover {
color: #747bff;
}
button {
background-color: #f9f9f9;
}
}

5
src/styles/index.scss Normal file
View File

@ -0,0 +1,5 @@
//引入清楚默认样式
@use './reset.scss';
//设置scss全局变量
$color: #409eff;

161
src/styles/reset.scss Normal file
View File

@ -0,0 +1,161 @@
* {
box-sizing: border-box;
background-repeat: no-repeat;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
margin: 0;
line-height: 1;
}
article,
aside,
footer,
header,
nav,
section,
main,
figcaption,
figure,
menu,
details {
display: block;
}
audio,
canvas,
video {
display: inline-block;
}
img {
display: block;
border: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0;
padding: 0;
font-weight: normal;
}
p {
margin: 0;
padding: 0;
}
address,
cite,
dfn,
em,
var {
font-style: normal;
}
ul,
ol {
margin: 0;
padding: 0;
list-style-type: none;
}
a {
background-color: transparent;
font-size: inherit;
color: inherit;
text-decoration: none;
&:active,
&:hover {
outline: 0;
}
}
:focus {
outline: 0;
}
button,
input,
select,
textarea {
margin: 0;
font-size: inherit;
}
button,
html [type='button'],
[type='reset'],
[type='submit'] {
padding: 0;
border: 0;
color: inherit;
background-color: transparent;
-webkit-appearance: button;
cursor: pointer;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
input {
padding: 0;
line-height: normal;
&::-webkit-input-placeholder {
font-weight: 300;
}
&::-ms-input-placeholder {
font-weight: 300;
}
&::-moz-placeholder {
font-weight: 300;
}
}
[type='number'] {
-moz-appearance: textfield;
&::-webkit-inner-spin-button,
&::-webkit-outer-spin-button {
margin: 0;
height: auto;
-webkit-appearance: none;
}
}
[type='search'] {
-webkit-appearance: textfield;
&::-webkit-search-cancel-button,
&::-webkit-search-decoration {
-webkit-appearance: none;
}
}
textarea {
overflow: auto;
resize: none;
-webkit-appearance: none;
}
select {
-webkit-appearance: none;
background-color: #fff;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

3
src/styles/variable.scss Normal file
View File

@ -0,0 +1,3 @@
//给项目模板提供的scss全局变量
// 使用 !default 允许覆盖
$color: #409eff !default;

74
src/utils/request.ts Normal file
View File

@ -0,0 +1,74 @@
//进行axios的二次封装使用请求和响应拦截器
import axios from 'axios'
import { ElMessage } from 'element-plus'
//利用axios.create()方法创建一个新的axios实例可以配置一些其他的配置
let request = axios.create({
// 基础路径
baseURL: import.meta.env.VITE_APP_BASE_URL,
// 超时时间
timeout: 5000,
})
//添加请求与相应拦截器
request.interceptors.request.use(
(config) => {
// 在发送请求之前做些什么
// 可以在这里添加token等信息
//headers属性请求头经常给服务器端携带公共参数
//console.log(config)
return config
},
(error) => {
// 对请求错误做些什么
return Promise.reject(error)
},
)
//添加响应拦截器
request.interceptors.response.use(
(response) => {
// 对响应数据做点什么
// 可以在这里处理响应数据
// 简化数据
//console.log(response)
return response.data
},
(error) => {
// 对响应错误做点什么
// 可以在这里处理错误信息
// 失败回调 处理HTTP网络错误
// 定义一个变量,用来存储错误信息
let message = ''
let status = error.response.status
switch (status) {
case 401:
message = 'Token已过期请重新登录'
break
case 403:
message = '没有权限访问'
break
case 404:
message = '请求的资源不存在'
break
case 500:
message = '服务器内部错误'
break
default:
message = '网络异常,请稍后再试'
break
}
//提示错误信息
ElMessage({
type: 'error',
message: message,
})
return Promise.reject(error)
},
)
//console.log(axios)
//console.log(request)
//对外暴露request实例
export default request

9
src/views/404/index.vue Normal file
View File

@ -0,0 +1,9 @@
<template>
<div>
<h1>我是一级路由404</h1>
</div>
</template>
<script setup lang="ts"></script>
<style lang="scss" scoped></style>

9
src/views/home/index.vue Normal file
View File

@ -0,0 +1,9 @@
<template>
<div>
<h1>我是一级路由展示登录成功的数据</h1>
</div>
</template>
<script setup lang="ts"></script>
<style lang="scss" scoped></style>

View File

@ -0,0 +1,9 @@
<template>
<div>
<h1>我是一级路由</h1>
</div>
</template>
<script setup lang="ts"></script>
<style lang="scss" scoped></style>

View File

@ -7,9 +7,14 @@
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"erasableSyntaxOnly": true,
"erasableSyntaxOnly": false,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true
"noUncheckedSideEffectImports": true,
"skipLibCheck": true,
"baseUrl": "./", //
"paths": {
"@/*": ["src/*"] //
}
},
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
}

View File

@ -17,9 +17,14 @@
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"erasableSyntaxOnly": true,
"erasableSyntaxOnly": false,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true
"noUncheckedSideEffectImports": true,
"baseUrl": "./", //
"paths": {
//baseUrl
"@/*": ["src/*"]
}
},
"include": ["vite.config.ts"]
}

View File

@ -1,7 +1,33 @@
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import { viteMockServe } from 'vite-plugin-mock'
import path from 'path'
// https://vite.dev/config/
export default defineConfig({
plugins: [vue()],
export default defineConfig(({ command }) => {
return {
plugins: [
vue(),
createSvgIconsPlugin({
iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
symbolId: 'icon-[dir]-[name]',
}),
viteMockServe({
enable: command === 'serve', // 仅在开发环境启用
}),
],
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
},
},
//SCSS全部变量配置
css: {
preprocessorOptions: {
scss: {
additionalData: `@use "@/styles/variable.scss" as *;`, // 推荐使用 @use
},
},
},
}
})