nanxun/ql_apimanager_frontend
2
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

1、新增alert插件

Browse Source 
2、新增登录凭证处理逻辑
3、新增AccessToken自动刷新机制
4、新增后台模板页
This commit is contained in:
南浔 2025-06-11 23:46:06 +08:00
parent 0b4018a3ec
commit b02c61ecd8
18 changed files with 1091 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
package-lock.json generated
View File

@ -9,6 +9,7 @@
"version": "0.1.0",
"dependencies": {
"axios": "^1.9.0",
"blueimp-md5": "^2.19.0",
"bootstrap": "^5.3.6",
"core-js": "^3.8.3",
"jquery": "^3.7.1",
@ -3417,6 +3418,12 @@
"dev": true,
"license": "MIT"
},
"node_modules/blueimp-md5": {
"version": "2.19.0",
"resolved": "https://registry.npmmirror.com/blueimp-md5/-/blueimp-md5-2.19.0.tgz",
"integrity": "sha512-DRQrD6gJyy8FbiE4s+bDoXS9hiW3Vbx5uCdwvcCf3zLHL+Iv7LtGHLpr+GZV8rHG8tK766FGYBwRbu8pELTt+w==",
"license": "MIT"
},
"node_modules/body-parser": {
"version": "1.20.3",
"resolved": "https://registry.npmmirror.com/body-parser/-/body-parser-1.20.3.tgz",

1
package.json
View File

@ -8,6 +8,7 @@
},
"dependencies": {
"axios": "^1.9.0",
"blueimp-md5": "^2.19.0",
"bootstrap": "^5.3.6",
"core-js": "^3.8.3",
"jquery": "^3.7.1",

1
public/index.html
View File

@ -5,6 +5,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Poppins:400,500,700,800&display=swap" rel="stylesheet">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>

17
src/App.vue
View File

@ -1,13 +1,24 @@
<template>
<div id="app" :class="mainClass">
<div class='loader' v-if="isLoading">
<div class='spinner-grow text-primary' role='status'>
<span class='sr-only'>Loading...</span>
</div>
</div>
<router-view/>
</div>
</template>
<script>
import Alert from '@/components/Alert.vue';
import { mapGetters, mapState } from 'vuex';
export default {
data(){
return {
isLoading:true
}
},
computed:{
/**
* 授权页面添加特定类名
@ -15,11 +26,13 @@ export default {
*/
mainClass(){
const path = this.$route.path
console.log(path)
if(path.startsWith('/auth')){
return 'login-page'
}
}
},
mounted(){
this.isLoading = false
}
}
</script>

95
src/components/Alert.vue Normal file
View File

@ -0,0 +1,95 @@
<template>
<transition name="fade">
<div
v-if="visible"
:class="`alert alert-${type} alert-dismissible centered-alert`"
role="alert"
>
<div class="alert-content">
<span class="alert-message">{{ message }}</span>
<button
type="button"
class="btn-close"
aria-label="Close"
@click="close"
></button>
</div>
</div>
</transition>
</template>
<script>
export default {
name: 'Alert',
props: {
type: {
type:String,
default:'success'
},
message:{
type:String
},
duration:{
type:Number,
default:5000
}
},
data() {
return {
visible: false
}
},
methods: {
close() {
this.visible = false
setTimeout(() => {
this.$emit('close')
}, 500);
}
},
mounted(){
this.$nextTick(() => {
this.visible = true
})
if(this.duration>0){
setTimeout(() => {
this.close()
}, this.duration);
}
}
}
</script>
<style scoped>
.centered-alert {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 1080;
min-width: 300px;
max-width: 600px;
}
.alert-content {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.alert-message {
flex: 1;
word-break: break-word;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity .5s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
</style>

20
src/main.js
View File

@ -1,6 +1,9 @@
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import api from './request/api'
import Alert from '@/plugins/alert'
import 'jquery'
import 'bootstrap/dist/js/bootstrap.bundle.min.js'
import 'bootstrap/dist/css/bootstrap.min.css'
@ -11,7 +14,22 @@ import "perfect-scrollbar/css/perfect-scrollbar.css"
Vue.config.productionTip = false
new Vue({
//挂载后端请求函数到全局
Vue.prototype.$api = api
Vue.use(Alert)
/**
* 初始化系统
*/
async function initApp() {
//初始化请求系统配置信息
await store.dispatch('config/fetch_config')
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
}
initApp()

24
src/plugins/alert.js Normal file
View File

@ -0,0 +1,24 @@
import Alert from "@/components/Alert.vue"
import Vue from "vue"
const AlertConstructor = Vue.extend(Alert)
function showAlert(message,type,duration = 5000){
const instance = new AlertConstructor({
propsData:{message,type,duration}
})
const vm = instance.$mount()
document.body.appendChild(vm.$el)
instance.$on('close',() => {
document.body.removeChild(vm.$el)
instance.$destroy()
})
return instance
}
export default {
install(){
Vue.prototype.$alert = showAlert
}
}

16
src/request/api.js
View File

@ -1,9 +1,19 @@
import request from "./request"
// 导出一个名为login_api的函数，该函数使用request.post方法发送post请求到/api/auth/login路径
export const login_api =(param)=> request.post('/api/auth/login',param)
const login = async (param)=> await request.post('/api/auth/login',param)
// 导出一个名为registered_api的函数，该函数接收一个参数param，并使用request.post方法发送一个POST请求到/api/Auth/Register接口，请求体为param
export const registered_api =(param)=> request.post('/api/Auth/Register',param)
const register = async (param)=> await request.post('/api/Auth/Register',param)
// 导出一个名为SendValidateCode_api的函数，该函数使用request.post方法发送POST请求，请求的URL为'/api/Auth/SendValidateCode'
export const SendValidateCode_api = (param)=> request.post(`/api/Auth/SendValidateCode?email=${param}`)
const SendValidateCode = async (param)=> await request.post(`/api/Auth/SendValidateCode?email=${param}`)
//获取所有系统配置
const getAllConfig = async ()=> await request.get('/api/systemconfig/getallsystemconfig')
export default {
login,
register,
SendValidateCode,
getAllConfig
}

27
src/request/request.js
View File

@ -1,24 +1,27 @@
import axios from "axios"
import {attachAccessToken,authRequestError} from '@/utils/intercaptors/request/auth'
import { handlerefresherror } from "@/utils/intercaptors/response/refresh"
const request = axios.create({
baseURL:'http://192.168.5.100:2088',
timeout:10000
timeout:10000,
// ✅ 只把 status >= 500 视为错误，401/402/403 等都当作正常返回
validateStatus: function (status) {
return status < 500 // 500以上才视为 error，其他都进 then
}
})
// request.interceptors.request.use(config=>{
// config.headers.Authorization = localStorage.getItem('token')
// return config
// },err=>{
// Promise.reject(err)
// }
// )
request.interceptors.request.use(attachAccessToken,authRequestError)
request.interceptors.response.use(
handlerefresherror,
undefined
)
request.interceptors.response.use(res=>{
alert(res.data.message)
return res.data
},err=>{
alert(err.response.data.message)
}
},undefined
)
export default request

19
src/router/index.js
View File

@ -12,23 +12,30 @@ const routes = [
name: 'home',
component: HomeView
}
,{
path:'',
redirect:'/home'
, {
path: '',
redirect: '/home'
},
{
path:'/auth',
path: '/auth',
component: Login,
children: [
{
path:'login',
path: 'login',
component: Login
},
{
path:'register',
path: 'register',
component: Register
}
]
},
{
path: '/layout',
component: () => import('@/views/layout/Home.vue'),
children: [
{ path: 'index', component: () => import('@/views/layout/Dashboard.vue') }
]
}
]

8
src/store/index.js
View File

@ -1,4 +1,12 @@
import Vue from 'vue'
import Vuex from 'vuex'
import config from './modules/config'
Vue.use(Vuex)
export default new Vuex.Store({
modules:{
config
}
})

54
src/store/modules/config.js Normal file
View File

@ -0,0 +1,54 @@
import api from '@/request/api'
const state = {
//全局系统配置
systemconfig:[]
}
const mutations = {
/**设置系统配置 */
SET_CONFIG(state,config){
state.systemconfig = config
}
}
const actions = {
/**
* 初始化配置
*/
async fetch_config({commit}){
try{
const res = await api.getAllConfig()
commit('SET_CONFIG',res.data)
}catch(e){
console.error('初始化配置失败'.e)
}
}
}
const getters = {
/**
* 将后端返回的系统配置数组转换为对象格式
* @returns {object}
*/
configMap: (state) => {
const map = {}
state.systemconfig.forEach(item => {
map[item.configName] = item.configBody
})
return map
},
systemname: (state,getters) => getters.configMap.SystemName || '青蓝',
systemdesc: (state,getters) => getters.configMap.SystemDescription || '无',
systemlogo: (state,getters) => getters.configMap.LogoLocation || 'https://img.picui.cn/free/2025/06/11/684900b15ecc4.jpg',
systemphone: (state,getters) => getters.configMap.Phone || '13000000000',
systememail: (state,getters) => getters.configMap.Email || 'admin@admin.com'
}
export default {
namespaced:true,
state,
mutations,
actions,
getters
}

26
src/utils/auth.js Normal file
View File

@ -0,0 +1,26 @@
export default {
getAccessToken(){
return sessionStorage.getItem('ACCESS_TOKEN') || ''
},
getRefreshToken(){
return localStorage.getItem('REFRESH_TOKEN') || ''
},
getUserId(){
return localStorage.getItem('USER_ID') || -2
},
setAccessToken(token){
sessionStorage.setItem('ACCESS_TOKEN',token)
},
setRefreshToken(token){
localStorage.setItem('REFRESH_TOKEN',token)
},
setUserId(id){
localStorage.setItem('USER_ID',id)
},
clear(){
sessionStorage.removeItem('ACCESS_TOKEN')
localStorage.removeItem('REFRESH_TOKEN')
localStorage.removeItem('USER_ID')
}
}

14
src/utils/intercaptors/request/auth.js Normal file
View File

@ -0,0 +1,14 @@
// src/utils/interceptors/request/auth.js
import auth from '@/utils/auth'
export function attachAccessToken(config) {
const token = auth.getAccessToken()
if (token) {
config.headers['Authorization'] = `Bearer ${token}`
}
return config
}
export function authRequestError(err) {
return Promise.reject(err)
}

60
src/utils/intercaptors/response/refresh.js Normal file
View File

@ -0,0 +1,60 @@
import request from "@/request/request"
import auth from "@/utils/auth"
let isrefreshing = false
//待刷新token任务列表
let queue = []
/**
* 运行任务队列
* @param {*} token
*/
function runqueque(token) {
queue.forEach(element => element(token))
queue = []
}
/**
* 处理accessToken自动刷新
* @param {*} response
* @returns
*/
export function handlerefresherror(response) {
const { config, data } = response
if (data.code == 2009 && !config._retry) {
config._retry = true
if (!isrefreshing) {
isrefreshing = true
return request.post('/auth/refreshToken', {
userid: auth.getUserId(),
refreshtoken: auth.getRefreshToken()
})
.then(r => {
const {Token , RefreshToken} = r.data.data
auth.setAccessToken(Token)
auth.setRefreshToken(RefreshToken)
runqueque(Token)
// 用新 token 重做原始请求
config.headers['Authorization'] = `Bearer ${Token}`
return request(config)
})
.catch(err => {
auth.clear()
window.location.href = '/auth/login'
return Promise.reject(err)
})
.finally(() => isrefreshing = false)
}
// 刷新中：队列化
return new Promise((resolve, reject) => {
queue.push(token => {
config.headers['Authorization'] = `Bearer ${token}`
resolve(request(config))
})
})
} else {
return response
}
}

77
src/views/auth/Login.vue
View File

@ -8,34 +8,36 @@
<img src="../../assets/images/logo@2x.png" alt="">
</div>
<div class="authent-text">
<p>Welcome to IO!</p>
<p>Please Sign-in to your account.</p>
<p>欢迎访问{{ systemname }}!</p>
<p>请登录你的账户.</p>
</div>
<form>
<div class="mb-3">
<div class="form-floating">
<input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
<label for="floatingInput">Email address</label>
<input v-model="formdata.username" type="text" class="form-control"
id="floatingInput" placeholder="username">
<label for="floatingInput">用户名</label>
</div>
</div>
<div class="mb-3">
<div class="form-floating">
<input type="password" class="form-control" id="floatingPassword" placeholder="Password">
<label for="floatingPassword">Password</label>
<input v-model="formdata.password" type="password" class="form-control"
id="floatingPassword" placeholder="Password">
<label for="floatingPassword">密码</label>
</div>
</div>
<div class="mb-3 form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
<label class="form-check-label" for="exampleCheck1">记住我</label>
</div>
<div class="d-grid">
<button type="submit" class="btn btn-info m-b-xs">Sign In</button>
<button class="btn btn-primary">Facebook</button>
<button type="button" class="btn btn-info m-b-xs" @click="login">登录</button>
<button class="btn btn-primary">三方登录</button>
</div>
</form>
<div class="authent-reg">
<p>Not registered? <a href="register.html">Create an account</a></p>
<p>没有账户？<router-link to="register">点击创建</router-link></p>
</div>
</div>
</div>
@ -45,10 +47,63 @@
</template>
<script>
import md5 from 'blueimp-md5';
import { mapGetters } from 'vuex';
import auth from '@/utils/auth';
export default {
data() {
return {
formdata: {
username: '',
password: ''
}
}
},
methods: {
/**
* 用户登录
*/
async login() {
//记录原始密码，用于修改MD5后还原原始文本
const passwordOld = this.formdata.password
this.formdata.password = md5(passwordOld)
try {
const res = await this.$api.login(this.formdata)
let msg = ''
switch (res.code) {
case 2000: msg = '登录成功'; break
case 2001: msg = '用户名或密码错误'; break
case 2002: msg = '账户被禁用'; break
case 2004: msg = '用户不存在'; break
default: msg = '登录失败'; break
}
if (res.code == 2000) {
//储存登录凭证
auth.setAccessToken(res.data.token)
auth.setRefreshToken(res.data.refreshToken)
}
this.$alert(msg,'success')
//this.$router.push()
} catch (e) {
console.log(e)
alert('未知错误')
} finally {
//还原密码文本
this.formdata.password = passwordOld
}
}
},
computed: {
/**
* 初始化系统配置
*/
...mapGetters('config', ['systemname'])
}
}
</script>
<style>
<style scoped>
</style>

387
src/views/layout/Dashboard.vue Normal file
View File

@ -0,0 +1,387 @@
<template>
<div class="main-wrapper">
<div class="row">
<div class="col-md-6 col-xl-3">
<div class="card stat-widget">
<div class="card-body">
<h5 class="card-title">New Customers</h5>
<h2>132</h2>
<p>From last week</p>
<div class="progress">
<div class="progress-bar bg-info progress-bar-striped" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-xl-3">
<div class="card stat-widget">
<div class="card-body">
<h5 class="card-title">Orders</h5>
<h2>287</h2>
<p>Orders in waitlist</p>
<div class="progress">
<div class="progress-bar bg-success progress-bar-striped" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-xl-3">
<div class="card stat-widget">
<div class="card-body">
<h5 class="card-title">Monthly Profit</h5>
<h2>7.4K</h2>
<p>For last 30 days</p>
<div class="progress">
<div class="progress-bar bg-danger progress-bar-striped" role="progressbar" style="width: 60%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-xl-3">
<div class="card stat-widget">
<div class="card-body">
<h5 class="card-title">Orders</h5>
<h2>87</h2>
<p>Orders in waitlist</p>
<div class="progress">
<div class="progress-bar bg-primary progress-bar-striped" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-xl-8">
<div class="card">
<div class="card-body">
<h5 class="card-title">Revenue</h5>
<div id="apex1"></div>
</div>
</div>
</div>
<div class="col-sm-6 col-xl-4">
<div class="card stat-widget">
<div class="card-body">
<h5 class="card-title">Social Media</h5>
<div class="transactions-list">
<div class="tr-item">
<div class="tr-company-name">
<div class="tr-icon tr-card-icon tr-card-bg-primary text-primary">
<i data-feather="thumbs-up"></i>
</div>
<div class="tr-text">
<h4>New post reached 7k+ likes</h4>
<p>02 March</p>
</div>
</div>
</div>
</div>
<div class="transactions-list">
<div class="tr-item">
<div class="tr-company-name">
<div class="tr-icon tr-card-icon tr-card-bg-info text-info">
<i data-feather="twitch"></i>
</div>
<div class="tr-text">
<h4>Developer AMA is now live</h4>
<p>01 March</p>
</div>
</div>
</div>
</div>
<div class="transactions-list">
<div class="tr-item">
<div class="tr-company-name">
<div class="tr-icon tr-card-icon tr-card-bg-danger text-danger">
<i data-feather="instagram"></i>
</div>
<div class="tr-text">
<h4>52 unread messages</h4>
<p>23 February</p>
</div>
</div>
</div>
</div>
<div class="transactions-list">
<div class="tr-item">
<div class="tr-company-name">
<div class="tr-icon tr-card-icon tr-card-bg-warning text-warning">
<i data-feather="shopping-bag"></i>
</div>
<div class="tr-text">
<h4>2 new orders from shop page</h4>
<p>17 February</p>
</div>
</div>
</div>
</div>
<div class="transactions-list">
<div class="tr-item">
<div class="tr-company-name">
<div class="tr-icon tr-card-icon tr-card-bg-info text-info">
<i data-feather="twitter"></i>
</div>
<div class="tr-text">
<h4>Hashtag #circl is trending</h4>
<p>03 February</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 col-lg-8">
<div class="card table-widget">
<div class="card-body">
<h5 class="card-title">Recent Orders</h5>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th scope="col">Customer</th>
<th scope="col">Product</th>
<th scope="col">Invoice</th>
<th scope="col">Price</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"><img src="../../assets/images/avatars/profile-image.png" alt="">Anna Doe</th>
<td>Modern</td>
<td>#53327</td>
<td>$20</td>
<td><span class="badge bg-info">Shipped</span></td>
</tr>
<tr>
<th scope="row"><img src="../../assets/images/avatars/profile-image.png" alt="">John Doe</th>
<td>Alpha</td>
<td>#13328</td>
<td>$25</td>
<td><span class="badge bg-success">Paid</span></td>
</tr>
<tr>
<th scope="row"><img src="../../assets/images/avatars/profile-image.png" alt="">Anna Doe</th>
<td>Lime</td>
<td>#35313</td>
<td>$20</td>
<td><span class="badge bg-danger">Pending</span></td>
</tr>
<tr>
<th scope="row"><img src="../../assets/images/avatars/profile-image.png" alt="">John Doe</th>
<td>Circl Admin</td>
<td>#73423</td>
<td>$23</td>
<td><span class="badge bg-primary">Shipped</span></td>
</tr>
<tr>
<th scope="row"><img src="../../assets/images/avatars/profile-image.png" alt="">Nina Doe</th>
<td>Space</td>
<td>#54773</td>
<td>$20</td>
<td><span class="badge bg-success">Paid</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="col-md-12 col-lg-4">
<div class="card stat-widget">
<div class="card-body">
<h5 class="card-title">Orders</h5>
<div id="apex2"></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-4">
<div class="card stat-widget">
<div class="card-body">
<h5 class="card-title">Tasks Overview</h5>
<div class="transactions-list">
<div class="tr-item">
<div class="tr-company-name">
<div class="tr-icon tr-card-icon tr-card-bg-primary text-primary">
<i data-feather="user"></i>
</div>
<div class="tr-text">
<a href="#"><h4>Project Managment</h4></a>
<p>Management</p>
</div>
</div>
</div>
</div>
<div class="transactions-list">
<div class="tr-item">
<div class="tr-company-name">
<div class="tr-icon tr-card-icon tr-card-bg-info text-info">
<i data-feather="user"></i>
</div>
<div class="tr-text">
<a href="#"><h4>Design</h4></a>
<p>Creative</p>
</div>
</div>
</div>
</div>
<div class="transactions-list">
<div class="tr-item">
<div class="tr-company-name">
<div class="tr-icon tr-card-icon tr-card-bg-secondary">
<i data-feather="user"></i>
</div>
<div class="tr-text">
<a href="#"><h4>Financial Accounting</h4></a>
<p>Finance</p>
</div>
</div>
</div>
</div>
<div class="transactions-list">
<div class="tr-item">
<div class="tr-company-name">
<div class="tr-icon tr-card-icon tr-card-bg-primary text-primary">
<i data-feather="user"></i>
</div>
<div class="tr-text">
<a href="#"><h4>Testing</h4></a>
<p>Manager</p>
</div>
</div>
</div>
</div>
<div class="transactions-list">
<div class="tr-item">
<div class="tr-company-name">
<div class="tr-icon tr-card-icon tr-card-bg-secondary text-secondary">
<i data-feather="user"></i>
</div>
<div class="tr-text">
<a href="#"><h4>Development</h4></a>
<p>Developers</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12 col-lg-4">
<div class="card">
<img src="../../assets/images/card-bg.png" class="card-img-top" alt="...">
<div class="card-body">
<div class="card-meet-header">
<div class="card-meet-day">
<h6>WED</h6>
<h3>7</h3>
</div>
<div class="card-meet-text">
<h6>Developer AMA</h6>
<p>Meet project developers</p>
</div>
</div>
<p class="card-text m-b-md">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
<a href="#" class="btn btn-info">Join</a>
<a href="#" class="btn btn-primary">Invite</a>
</div>
</div>
</div>
<div class="col-sm-12 col-md-4">
<div class="card stat-widget">
<div class="card-body">
<h5 class="card-title">Transactions</h5>
<div class="transactions-list">
<div class="tr-item">
<div class="tr-company-name">
<div class="tr-icon tr-card-icon tr-card-bg-primary text-primary">
<i data-feather="thumbs-up"></i>
</div>
<div class="tr-text">
<h4>Facebook</h4>
<p>02 March</p>
</div>
</div>
<div class="tr-rate">
<p><span class="text-success">+ $24</span></p>
</div>
</div>
</div>
<div class="transactions-list">
<div class="tr-item">
<div class="tr-company-name">
<div class="tr-icon tr-card-icon tr-card-bg-success text-success">
<i data-feather="credit-card"></i>
</div>
<div class="tr-text">
<h4>Visa</h4>
<p>02 March</p>
</div>
</div>
<div class="tr-rate">
<p><span class="text-success">+ $300</span></p>
</div>
</div>
</div>
<div class="transactions-list">
<div class="tr-item">
<div class="tr-company-name">
<div class="tr-icon tr-card-icon tr-card-bg-danger text-danger">
<i data-feather="tv"></i>
</div>
<div class="tr-text">
<h4>Netflix</h4>
<p>02 March</p>
</div>
</div>
<div class="tr-rate">
<p><span class="text-danger">- $17</span></p>
</div>
</div>
</div>
<div class="transactions-list">
<div class="tr-item">
<div class="tr-company-name">
<div class="tr-icon tr-card-icon tr-card-bg-warning text-warning">
<i data-feather="shopping-cart"></i>
</div>
<div class="tr-text">
<h4>Themeforest</h4>
<p>02 March</p>
</div>
</div>
<div class="tr-rate">
<p><span class="text-danger">- $220</span></p>
</div>
</div>
</div>
<div class="transactions-list">
<div class="tr-item">
<div class="tr-company-name">
<div class="tr-icon tr-card-icon tr-card-bg-info text-info">
<i data-feather="dollar-sign"></i>
</div>
<div class="tr-text">
<h4>PayPal</h4>
<p>02 March</p>
</div>
</div>
<div class="tr-rate">
<p><span class="text-success">+20%</span></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>

249
src/views/layout/Home.vue Normal file
View File

@ -0,0 +1,249 @@
<template>
<div class="page-container">
<div class="page-header">
<nav class="navbar navbar-expand-lg d-flex justify-content-between">
<div class="" id="navbarNav">
<ul class="navbar-nav" id="leftNav">
<li class="nav-item">
<a class="nav-link" id="sidebar-toggle" href="#"><i data-feather="arrow-left"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Settings</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Help</a>
</li>
</ul>
</div>
<div class="logo">
<a class="navbar-brand" href="index.html"></a>
</div>
<div class="" id="headerNav">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link search-dropdown" href="#" id="searchDropDown" role="button"
data-bs-toggle="dropdown" aria-expanded="false"><i data-feather="search"></i></a>
<div class="dropdown-menu dropdown-menu-end dropdown-lg search-drop-menu"
aria-labelledby="searchDropDown">
<form>
<input class="form-control" type="text" placeholder="Type something.."
aria-label="Search">
</form>
<h6 class="dropdown-header">Recent Searches</h6>
<a class="dropdown-item" href="#">charts</a>
<a class="dropdown-item" href="#">new orders</a>
<a class="dropdown-item" href="#">file manager</a>
<a class="dropdown-item" href="#">new users</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link notifications-dropdown" href="#" id="notificationsDropDown" role="button"
data-bs-toggle="dropdown" aria-expanded="false">3</a>
<div class="dropdown-menu dropdown-menu-end notif-drop-menu"
aria-labelledby="notificationsDropDown">
<h6 class="dropdown-header">Notifications</h6>
<a href="#">
<div class="header-notif">
<div class="notif-image">
<span class="notification-badge bg-info text-white">
<i class="fas fa-bullhorn"></i>
</span>
</div>
<div class="notif-text">
<p class="bold-notif-text">faucibus dolor in commodo lectus mattis</p>
<small>19:00</small>
</div>
</div>
</a>
<a href="#">
<div class="header-notif">
<div class="notif-image">
<span class="notification-badge bg-primary text-white">
<i class="fas fa-bolt"></i>
</span>
</div>
<div class="notif-text">
<p class="bold-notif-text">faucibus dolor in commodo lectus mattis</p>
<small>18:00</small>
</div>
</div>
</a>
<a href="#">
<div class="header-notif">
<div class="notif-image">
<span class="notification-badge bg-success text-white">
<i class="fas fa-at"></i>
</span>
</div>
<div class="notif-text">
<p>faucibus dolor in commodo lectus mattis</p>
<small>yesterday</small>
</div>
</div>
</a>
<a href="#">
<div class="header-notif">
<div class="notif-image">
<span class="notification-badge">
<img src="../../assets/images/avatars/profile-image.png" alt="">
</span>
</div>
<div class="notif-text">
<p>faucibus dolor in commodo lectus mattis</p>
<small>yesterday</small>
</div>
</div>
</a>
<a href="#">
<div class="header-notif">
<div class="notif-image">
<span class="notification-badge">
<img src="../../assets/images/avatars/profile-image.png" alt="">
</span>
</div>
<div class="notif-text">
<p>faucibus dolor in commodo lectus mattis</p>
<small>yesterday</small>
</div>
</div>
</a>
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link profile-dropdown" href="#" id="profileDropDown" role="button"
data-bs-toggle="dropdown" aria-expanded="false"><img
src="../../assets/images/avatars/profile-image.png" alt=""></a>
<div class="dropdown-menu dropdown-menu-end profile-drop-menu"
aria-labelledby="profileDropDown">
<a class="dropdown-item" href="#"><i data-feather="user"></i>Profile</a>
<a class="dropdown-item" href="#"><i data-feather="inbox"></i>Messages</a>
<a class="dropdown-item" href="#"><i data-feather="edit"></i>Activities<span
class="badge rounded-pill bg-success">12</span></a>
<a class="dropdown-item" href="#"><i data-feather="check-circle"></i>Tasks</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#"><i data-feather="settings"></i>Settings</a>
<a class="dropdown-item" href="#"><i data-feather="unlock"></i>Lock</a>
<a class="dropdown-item" href="#"><i data-feather="log-out"></i>Logout</a>
</div>
</li>
</ul>
</div>
</nav>
</div>
<div class="page-sidebar">
<ul class="list-unstyled accordion-menu">
<li class="sidebar-title">
Main
</li>
<li class="active-page">
<a href="index.html"><i data-feather="home"></i>Dashboard</a>
</li>
<li class="sidebar-title">
Apps
</li>
<li>
<a href="email.html"><i data-feather="inbox"></i>Email</a>
</li>
<li>
<a href="calendar.html"><i data-feather="calendar"></i>Calendar</a>
</li>
<li>
<a href="social.html"><i data-feather="user"></i>Social</a>
</li>
<li>
<a href="file-manager.html"><i data-feather="message-circle"></i>File Manager</a>
</li>
<li class="sidebar-title">
Elements
</li>
<li>
<a href="index.html"><i data-feather="code"></i>Components<i
class="fas fa-chevron-right dropdown-icon"></i></a>
<ul class="">
<li><a href="alerts.html"><i class="far fa-circle"></i>Alerts</a></li>
<li><a href="typography.html"><i class="far fa-circle"></i>Typography</a></li>
<li><a href="icons.html"><i class="far fa-circle"></i>Icons</a></li>
<li><a href="badge.html"><i class="far fa-circle"></i>Badge</a></li>
<li><a href="buttons.html"><i class="far fa-circle"></i>Buttons</a></li>
<li><a href="dropdowns.html"><i class="far fa-circle"></i>Dropdowns</a></li>
<li><a href="list-group.html"><i class="far fa-circle"></i>List Group</a></li>
<li><a href="toasts.html"><i class="far fa-circle"></i>Toasts</a></li>
<li><a href="modal.html"><i class="far fa-circle"></i>Modal</a></li>
<li><a href="pagination.html"><i class="far fa-circle"></i>Pagination</a></li>
<li><a href="popovers.html"><i class="far fa-circle"></i>Popovers</a></li>
<li><a href="progress.html"><i class="far fa-circle"></i>Progress</a></li>
<li><a href="spinners.html"><i class="far fa-circle"></i>Spinners</a></li>
<li><a href="accordion.html"><i class="far fa-circle"></i>Accordion</a></li>
</ul>
</li>
<li>
<a href="index.html"><i data-feather="gift"></i>Plugins<i
class="fas fa-chevron-right dropdown-icon"></i></a>
<ul class="">
<li><a href="block-ui.html"><i class="far fa-circle"></i>Block UI</a></li>
<li><a href="session-timeout.html"><i class="far fa-circle"></i>Session Timeout</a></li>
<li><a href="tree-view.html"><i class="far fa-circle"></i>Tree View</a></li>
</ul>
</li>
<li>
<a href="index.html"><i data-feather="edit"></i>Form<i
class="fas fa-chevron-right dropdown-icon"></i></a>
<ul class="">
<li><a href="form-elements.html"><i class="far fa-circle"></i>Form Elements</a></li>
<li><a href="form-layout.html"><i class="far fa-circle"></i>Form Layout</a></li>
<li><a href="form-validation.html"><i class="far fa-circle"></i>Form Validation</a></li>
</ul>
</li>
<li>
<a href="cards.html"><i data-feather="layers"></i>Cards</a>
</li>
<li>
<a href="index.html"><i data-feather="list"></i>Tables<i
class="fas fa-chevron-right dropdown-icon"></i></a>
<ul class="">
<li><a href="tables.html"><i class="far fa-circle"></i>Basic Tables</a></li>
<li><a href="data-tables.html"><i class="far fa-circle"></i>Data Tables</a></li>
</ul>
</li>
<li>
<a href="charts.html"><i data-feather="pie-chart"></i>Charts</a>
</li>
<li class="sidebar-title">
Other
</li>
<li>
<a href="index.html"><i data-feather="star"></i>Pages<i
class="fas fa-chevron-right dropdown-icon"></i></a>
<ul class="">
<li><a href="invoice.html"><i class="far fa-circle"></i>Invoice</a></li>
<li><a href="404.html"><i class="far fa-circle"></i>404 Page</a></li>
<li><a href="500.html"><i class="far fa-circle"></i>500 Page</a></li>
<li><a href="blank-page.html"><i class="far fa-circle"></i>Blank Page</a></li>
<li><a href="login.html"><i class="far fa-circle"></i>Login</a></li>
<li><a href="register.html"><i class="far fa-circle"></i>Register</a></li>
<li><a href="lockscreen.html"><i class="far fa-circle"></i>Lockscreen</a></li>
<li><a href="price.html"><i class="far fa-circle"></i>Price</a></li>
</ul>
</li>
<li>
<a href="#"><i data-feather="check-circle"></i>Documentation</a>
</li>
</ul>
</div>
<div class="page-content">
<router-view/>
</div>
</div>
</template>
<script>
</script>
<script>
</script>