feat: 基本结构
This commit is contained in:
parent
de1dd98c7f
commit
89d45dcf56
|
@ -12,6 +12,7 @@
|
||||||
"type-check": "vue-tsc --build --force"
|
"type-check": "vue-tsc --build --force"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@element-plus/icons-vue": "^2.3.1",
|
||||||
"axios": "^1.7.7",
|
"axios": "^1.7.7",
|
||||||
"element-plus": "^2.8.2",
|
"element-plus": "^2.8.2",
|
||||||
"pinia": "^2.1.7",
|
"pinia": "^2.1.7",
|
||||||
|
|
|
@ -0,0 +1,15 @@
|
||||||
|
/**
|
||||||
|
* api 管理
|
||||||
|
*/
|
||||||
|
|
||||||
|
import request from "@/utils/request"
|
||||||
|
|
||||||
|
export default {
|
||||||
|
login(params: any) {
|
||||||
|
return request({
|
||||||
|
url: '/user/login',
|
||||||
|
method: 'post',
|
||||||
|
data: params
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,86 +0,0 @@
|
||||||
/* color palette from <https://github.com/vuejs/theme> */
|
|
||||||
:root {
|
|
||||||
--vt-c-white: #ffffff;
|
|
||||||
--vt-c-white-soft: #f8f8f8;
|
|
||||||
--vt-c-white-mute: #f2f2f2;
|
|
||||||
|
|
||||||
--vt-c-black: #181818;
|
|
||||||
--vt-c-black-soft: #222222;
|
|
||||||
--vt-c-black-mute: #282828;
|
|
||||||
|
|
||||||
--vt-c-indigo: #2c3e50;
|
|
||||||
|
|
||||||
--vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
|
|
||||||
--vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
|
|
||||||
--vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
|
|
||||||
--vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
|
|
||||||
|
|
||||||
--vt-c-text-light-1: var(--vt-c-indigo);
|
|
||||||
--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
|
|
||||||
--vt-c-text-dark-1: var(--vt-c-white);
|
|
||||||
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* semantic color variables for this project */
|
|
||||||
:root {
|
|
||||||
--color-background: var(--vt-c-white);
|
|
||||||
--color-background-soft: var(--vt-c-white-soft);
|
|
||||||
--color-background-mute: var(--vt-c-white-mute);
|
|
||||||
|
|
||||||
--color-border: var(--vt-c-divider-light-2);
|
|
||||||
--color-border-hover: var(--vt-c-divider-light-1);
|
|
||||||
|
|
||||||
--color-heading: var(--vt-c-text-light-1);
|
|
||||||
--color-text: var(--vt-c-text-light-1);
|
|
||||||
|
|
||||||
--section-gap: 160px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
:root {
|
|
||||||
--color-background: var(--vt-c-black);
|
|
||||||
--color-background-soft: var(--vt-c-black-soft);
|
|
||||||
--color-background-mute: var(--vt-c-black-mute);
|
|
||||||
|
|
||||||
--color-border: var(--vt-c-divider-dark-2);
|
|
||||||
--color-border-hover: var(--vt-c-divider-dark-1);
|
|
||||||
|
|
||||||
--color-heading: var(--vt-c-text-dark-1);
|
|
||||||
--color-text: var(--vt-c-text-dark-2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
*,
|
|
||||||
*::before,
|
|
||||||
*::after {
|
|
||||||
box-sizing: border-box;
|
|
||||||
margin: 0;
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
min-height: 100vh;
|
|
||||||
color: var(--color-text);
|
|
||||||
background: var(--color-background);
|
|
||||||
transition:
|
|
||||||
color 0.5s,
|
|
||||||
background-color 0.5s;
|
|
||||||
line-height: 1.6;
|
|
||||||
font-family:
|
|
||||||
Inter,
|
|
||||||
-apple-system,
|
|
||||||
BlinkMacSystemFont,
|
|
||||||
'Segoe UI',
|
|
||||||
Roboto,
|
|
||||||
Oxygen,
|
|
||||||
Ubuntu,
|
|
||||||
Cantarell,
|
|
||||||
'Fira Sans',
|
|
||||||
'Droid Sans',
|
|
||||||
'Helvetica Neue',
|
|
||||||
sans-serif;
|
|
||||||
font-size: 15px;
|
|
||||||
text-rendering: optimizeLegibility;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
}
|
|
|
@ -1,34 +0,0 @@
|
||||||
@import './base.css';
|
|
||||||
|
|
||||||
#app {
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 2rem;
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
a,
|
|
||||||
.green {
|
|
||||||
text-decoration: none;
|
|
||||||
color: hsla(160, 100%, 37%, 1);
|
|
||||||
transition: 0.4s;
|
|
||||||
padding: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (hover: hover) {
|
|
||||||
a:hover {
|
|
||||||
background-color: hsla(160, 100%, 37%, 0.2);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 1024px) {
|
|
||||||
body {
|
|
||||||
display: flex;
|
|
||||||
place-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#app {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
padding: 0 2rem;
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,15 +1,101 @@
|
||||||
<template>
|
<template>
|
||||||
|
<div class="login-wrapper">
|
||||||
|
<div class="model">
|
||||||
|
<el-form :model="user" status-icon :rules="rules">
|
||||||
|
<div class="title">Login</div>
|
||||||
|
<el-form-item prop="userName">
|
||||||
|
<el-input
|
||||||
|
type="text"
|
||||||
|
:prefix-icon="User"
|
||||||
|
placeholder="account"
|
||||||
|
v-model="user.userName"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item prop="userPwd">
|
||||||
|
<el-input
|
||||||
|
type="text"
|
||||||
|
:prefix-icon="Lock"
|
||||||
|
placeholder="password"
|
||||||
|
v-model="user.userPwd"
|
||||||
|
/>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" class="btn-login" @click="login"
|
||||||
|
>登录</el-button
|
||||||
|
>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { defineComponent } from 'vue'
|
import { Lock, User } from '@element-plus/icons-vue'
|
||||||
|
import { defineComponent, getCurrentInstance, reactive } from 'vue'
|
||||||
|
|
||||||
|
const instance = getCurrentInstance()
|
||||||
|
const api = instance?.appContext.config.globalProperties.$api
|
||||||
|
|
||||||
|
const user = reactive({
|
||||||
|
userName: '',
|
||||||
|
userPwd: '',
|
||||||
|
})
|
||||||
|
|
||||||
|
const rules = {
|
||||||
|
userName: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入用户名',
|
||||||
|
trigger: 'blur',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
userPwd: [
|
||||||
|
{
|
||||||
|
required: true,
|
||||||
|
message: '请输入密码',
|
||||||
|
trigger: 'blur',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
|
||||||
|
const login = () => {
|
||||||
|
const data = api.login({
|
||||||
|
userName: 'root',
|
||||||
|
userPwd: 'root',
|
||||||
|
})
|
||||||
|
console.log(data)
|
||||||
|
}
|
||||||
defineComponent({
|
defineComponent({
|
||||||
name: 'LoginA',
|
name: 'LoginA',
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style lang="scss">
|
||||||
|
.login-wrapper {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background-color: #f9fcff;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
|
||||||
|
.model {
|
||||||
|
width: 500px;
|
||||||
|
padding: 50px;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: 0px 0px 10px 3px #c7c9cbd4;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 38px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 1.5;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-login {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -5,8 +5,8 @@
|
||||||
const env = import.meta.env.MODE == "development" ? 'dev' : 'prod'
|
const env = import.meta.env.MODE == "development" ? 'dev' : 'prod'
|
||||||
const EnvConfig = {
|
const EnvConfig = {
|
||||||
dev: {
|
dev: {
|
||||||
baseApi: '/',
|
baseApi: 'http://localhost:9000/api/v1',
|
||||||
mockApi: 'https://mock.presstime.cn/mock/668987cbcb2f4f1158f47e0e/manager-fe',
|
mockApi: 'http://localhost:9000/api/v1',
|
||||||
},
|
},
|
||||||
test: {
|
test: {
|
||||||
baseApi: '//test.demo/api',
|
baseApi: '//test.demo/api',
|
||||||
|
|
|
@ -1,15 +1,18 @@
|
||||||
// 程序入口
|
// 程序入口
|
||||||
|
import api from "@/api"
|
||||||
|
import App from '@/App.vue'
|
||||||
|
import router from '@/router'
|
||||||
import storage from '@/stores/storage'
|
import storage from '@/stores/storage'
|
||||||
import request from '@/utils/request'
|
import request from '@/utils/request'
|
||||||
import ElementPlus from 'element-plus'
|
import ElementPlus from 'element-plus'
|
||||||
import 'element-plus/dist/index.css'
|
import 'element-plus/dist/index.css'
|
||||||
import { createPinia } from 'pinia'
|
import { createPinia } from 'pinia'
|
||||||
import { createApp } from 'vue'
|
import { createApp } from 'vue'
|
||||||
import App from './App.vue'
|
|
||||||
import router from './router'
|
|
||||||
const app = createApp(App)
|
const app = createApp(App)
|
||||||
|
|
||||||
app.config.globalProperties.$request = request
|
app.config.globalProperties.$request = request
|
||||||
|
app.config.globalProperties.$api = api
|
||||||
app.config.globalProperties.$storage = storage
|
app.config.globalProperties.$storage = storage
|
||||||
|
|
||||||
app.use(ElementPlus)
|
app.use(ElementPlus)
|
||||||
|
|
|
@ -1,11 +1,11 @@
|
||||||
// index.js - router
|
// index.js - router
|
||||||
|
import LoginA from "@/components/Login/LoginA.vue"
|
||||||
import storage from "@/stores/storage"
|
import storage from "@/stores/storage"
|
||||||
import useColorLogOutPut from "@/utils/color_log"
|
import useColorLogOutPut from "@/utils/color_log"
|
||||||
import About from "@/views/About.vue"
|
import About from "@/views/About.vue"
|
||||||
import ApiPage from '@/views/ApiPage.vue'
|
import ApiPage from '@/views/ApiPage.vue'
|
||||||
import Base from "@/views/Base.vue"
|
import Base from "@/views/Base.vue"
|
||||||
import Home from "@/views/Home.vue"
|
import Home from "@/views/Home.vue"
|
||||||
import Login from "@/views/Login.vue"
|
|
||||||
import Welcome from "@/views/Welcome.vue"
|
import Welcome from "@/views/Welcome.vue"
|
||||||
import { createRouter, createWebHashHistory } from "vue-router"
|
import { createRouter, createWebHashHistory } from "vue-router"
|
||||||
|
|
||||||
|
@ -34,7 +34,7 @@ const routes = [
|
||||||
{
|
{
|
||||||
name: 'Login',
|
name: 'Login',
|
||||||
path: '/Login',
|
path: '/Login',
|
||||||
component: Login,
|
component: LoginA,
|
||||||
meta: {
|
meta: {
|
||||||
title: "登陆页^_^"
|
title: "登陆页^_^"
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,10 +1,10 @@
|
||||||
import config from "@/config"
|
import config from '@/config'
|
||||||
import router from "@/router"
|
import router from '@/router'
|
||||||
import axios from "axios"
|
import axios from 'axios'
|
||||||
import { ElMessage } from "element-plus"
|
import { ElMessage } from 'element-plus'
|
||||||
|
|
||||||
const TOKEN_ERROR = "Token 已过期"
|
const TOKEN_ERROR = 'Token 已过期'
|
||||||
const NETWORK_ERROR = "网络异常"
|
const NETWORK_ERROR = '网络异常'
|
||||||
|
|
||||||
const service = axios.create({
|
const service = axios.create({
|
||||||
baseURL: config.baseApi,
|
baseURL: config.baseApi,
|
||||||
|
@ -16,7 +16,7 @@ service.interceptors.request.use((req: any) => {
|
||||||
const headers = req.headers
|
const headers = req.headers
|
||||||
|
|
||||||
if (!headers.Authorization) {
|
if (!headers.Authorization) {
|
||||||
headers.Authorization = "bear fromsko"
|
headers.Authorization = 'bear fromsko'
|
||||||
}
|
}
|
||||||
return req
|
return req
|
||||||
})
|
})
|
||||||
|
@ -40,39 +40,39 @@ service.interceptors.response.use((res: any) => {
|
||||||
})
|
})
|
||||||
|
|
||||||
interface RequestOptions {
|
interface RequestOptions {
|
||||||
method?: string;
|
method?: string
|
||||||
params?: any;
|
mock?: boolean
|
||||||
data?: any;
|
params?: any
|
||||||
url: string;
|
data?: any
|
||||||
|
url: string
|
||||||
}
|
}
|
||||||
|
|
||||||
function request(options: RequestOptions): any {
|
function request(options: RequestOptions): any {
|
||||||
options.method = options.method || 'get';
|
options.method = options.method || 'get'
|
||||||
|
|
||||||
if (options.method.toLowerCase() === 'get') {
|
if (options.method.toLowerCase() === 'get') {
|
||||||
options.params = options.data;
|
options.params = options.data
|
||||||
}
|
}
|
||||||
|
|
||||||
if (config.env === "prod") {
|
if (config.env === 'prod') {
|
||||||
service.defaults.baseURL = config.baseApi;
|
service.defaults.baseURL = config.baseApi
|
||||||
} else {
|
} else {
|
||||||
service.defaults.baseURL = config.mock ? config.mockApi : config.baseApi;
|
service.defaults.baseURL = config.mock ? config.mockApi : config.baseApi
|
||||||
}
|
}
|
||||||
|
|
||||||
return service(options);
|
return service(options)
|
||||||
}
|
}
|
||||||
|
|
||||||
['get', 'post', 'delete', 'put'].forEach((item) => {
|
['get', 'post', 'delete', 'put'].forEach((item) => {
|
||||||
// 使用 as any 来避免类型检查错误
|
// 使用 as any 来避免类型检查错误
|
||||||
(request as any)[item] = (url: string, data: any, options: any) => {
|
; (request as any)[item] = (url: string, data: any, options: any) => {
|
||||||
return request({
|
return request({
|
||||||
url,
|
url,
|
||||||
data,
|
data,
|
||||||
method: item,
|
method: item,
|
||||||
...options
|
...options,
|
||||||
});
|
})
|
||||||
};
|
}
|
||||||
});
|
})
|
||||||
|
|
||||||
|
export default request
|
||||||
export default request
|
|
||||||
|
|
|
@ -1,69 +1,69 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="basic-layout">
|
<div class="basic-layout">
|
||||||
<div class="nav-side"></div>
|
<div class="nav-side"></div>
|
||||||
<div class="content-right">
|
<div class="content-right">
|
||||||
<div class="nav-top">
|
<div class="nav-top">
|
||||||
<div class="bread">面包屑</div>
|
<div class="bread">面包屑</div>
|
||||||
<div class="user-info">用户</div>
|
<div class="user-info">用户</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="wrapper">
|
<div class="wrapper">
|
||||||
<div class="main-page">
|
<div class="main-page">
|
||||||
<router-view></router-view>
|
<router-view></router-view>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name: 'home',
|
name: 'home',
|
||||||
methods: {},
|
methods: {},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.basic-layout {
|
.basic-layout {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
.nav-side {
|
.nav-side {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
width: 200px;
|
width: 200px;
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
background-color: #001529;
|
background-color: #001529;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
transition: width 0.5s;
|
transition: width 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-right {
|
||||||
|
margin-left: 200px;
|
||||||
|
|
||||||
|
.nav-top {
|
||||||
|
height: 50px;
|
||||||
|
line-height: 50px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
border-bottom: 1px solid #ddd;
|
||||||
|
padding: 0 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.content-right {
|
.wrapper {
|
||||||
margin-left: 200px;
|
background: #eef0f3;
|
||||||
|
padding: 20px;
|
||||||
|
height: calc(100vh - 50px);
|
||||||
|
|
||||||
.nav-top {
|
.main-page {
|
||||||
height: 50px;
|
height: 100%;
|
||||||
line-height: 50px;
|
background: #fff;
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
border-bottom: 1px solid #ddd;
|
|
||||||
padding: 0 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wrapper {
|
-webkit-user-drag: none;
|
||||||
background: #eef0f3;
|
-webkit-user-select: none;
|
||||||
padding: 20px;
|
-moz-user-select: none;
|
||||||
height: calc(100vh - 50px);
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
.main-page {
|
}
|
||||||
height: 100%;
|
|
||||||
background: #fff;
|
|
||||||
|
|
||||||
-webkit-user-drag: none;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
-ms-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import { fileURLToPath, URL } from 'node:url'
|
import { fileURLToPath, URL } from 'node:url'
|
||||||
|
|
||||||
import { defineConfig } from 'vite'
|
|
||||||
import vue from '@vitejs/plugin-vue'
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
|
||||||
// https://vitejs.dev/config/
|
// https://vitejs.dev/config/
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
|
@ -12,5 +12,8 @@ export default defineConfig({
|
||||||
alias: {
|
alias: {
|
||||||
'@': fileURLToPath(new URL('./src', import.meta.url))
|
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
server: {
|
||||||
|
ws: false
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
Loading…
Reference in New Issue