框架搭建，登录、注册、密码重置
This commit is contained in:
junleea
commit
04955c9d4d
|
|
@ -0,0 +1,12 @@
|
|||
# These are supported funding model platforms
|
||||
|
||||
github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
|
||||
patreon: # Replace with a single Patreon username
|
||||
open_collective: # Replace with a single Open Collective username
|
||||
ko_fi: # Replace with a single Ko-fi username
|
||||
tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
|
||||
community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
|
||||
liberapay: # Replace with a single Liberapay username
|
||||
issuehunt: # Replace with a single IssueHunt username
|
||||
otechie: # Replace with a single Otechie username
|
||||
custom: https://lin-xin.gitee.io/images/weixin.jpg
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
.DS_Store
|
||||
node_modules
|
||||
/dist
|
||||
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# Log files
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
MIT License
|
||||
|
||||
Copyright (c) 2016-2023 vue-manage-system
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
# vue-manage-system
|
||||
|
||||
<a href="https://github.com/lin-xin/vue-manage-system/releases">
|
||||
<img src="https://img.shields.io/github/release/lin-xin/vue-manage-system.svg" alt="GitHub release">
|
||||
</a>
|
||||
<a href="https://github.com/lin-xin/vue-manage-system/blob/master/LICENSE">
|
||||
<img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license">
|
||||
</a>
|
||||
|
||||
基于 Vue3 + pinia + Element Plus 的后台管理系统解决方案。[线上演示](https://lin-xin.gitee.io/example/vue-manage-system/)
|
||||
|
||||
> Vue2 版本请看 [tag-V4.2.0](https://github.com/lin-xin/vue-manage-system/tree/V4.2.0)，带后台功能请看 [tsrpc-manage-system](https://github.com/lin-xin/tsrpc-manage-system)
|
||||
|
||||
[文档地址](https://lin-xin.gitee.io/example/vuems-doc/)
|
||||
[English document](https://github.com/lin-xin/manage-system/blob/master/README_EN.md)
|
||||
|
||||
## 赞助商
|
||||
|
||||
### 好问
|
||||
|
||||
[<img src="https://static.bestqa.net/logo/bestqa_haowen.png" width="220" height="100">](https://www.bestqa.net/home/index.html)
|
||||
|
||||
专业问卷服务，一对一客服，按需定制
|
||||
|
||||
## 支持作者
|
||||
|
||||
请作者喝杯咖啡吧！(微信号：linxin_20)
|
||||
|
||||
|
||||
|
||||
## 前言
|
||||
|
||||
该方案作为一套多功能的后台框架模板，适用于绝大部分的后台管理系统开发。基于 Vue3 + pinia + typescript，引用 Element Plus 组件库，方便开发。实现逻辑简单，适合外包项目，快速交付。
|
||||
|
||||
## 功能
|
||||
|
||||
- [x] Element Plus
|
||||
- [x] vite 3
|
||||
- [x] pinia
|
||||
- [x] typescript
|
||||
- [x] 登录/注册
|
||||
- [x] Dashboard
|
||||
- [x] 表格/表单
|
||||
- [x] 图表 :bar_chart:
|
||||
- [x] 富文本/markdown 编辑器
|
||||
- [x] 图片拖拽/裁剪上传
|
||||
- [x] 权限管理
|
||||
- [x] 三级菜单
|
||||
- [x] 自定义图标
|
||||
- [x] 主题切换
|
||||
|
||||
## 安装步骤
|
||||
|
||||
> 因为使用 vite3，node 版本需要 14.18+
|
||||
|
||||
```
|
||||
git clone https://github.com/lin-xin/vue-manage-system.git // 把模板下载到本地
|
||||
cd vue-manage-system // 进入模板目录
|
||||
npm install // 安装项目依赖，等待安装完成之后，安装失败可用 cnpm 或 yarn
|
||||
|
||||
// 运行
|
||||
npm run dev
|
||||
|
||||
// 执行构建命令，生成的dist文件夹放在服务器下即可访问
|
||||
npm run build
|
||||
```
|
||||
|
||||
## 项目截图
|
||||
|
||||
### 首页
|
||||
|
||||
|
||||
|
||||
### 登录
|
||||
|
||||
|
||||
|
||||
## License
|
||||
|
||||
[MIT](https://github.com/lin-xin/vue-manage-system/blob/master/LICENSE)
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
# vue-manage-system
|
||||
|
||||
<a href="https://github.com/vuejs/vue">
|
||||
<img src="https://img.shields.io/badge/vue-2.6.10-brightgreen.svg" alt="vue">
|
||||
</a>
|
||||
<a href="https://github.com/ElemeFE/element">
|
||||
<img src="https://img.shields.io/badge/element--ui-2.8.2-brightgreen.svg" alt="element-ui">
|
||||
</a>
|
||||
<a href="https://github.com/lin-xin/vue-manage-system/blob/master/LICENSE">
|
||||
<img src="https://img.shields.io/github/license/mashape/apistatus.svg" alt="license">
|
||||
</a>
|
||||
<a href="https://github.com/lin-xin/vue-manage-system/releases">
|
||||
<img src="https://img.shields.io/github/release/lin-xin/vue-manage-system.svg" alt="GitHub release">
|
||||
</a>
|
||||
<a href="https://lin-xin.gitee.io/example/work/#/donate">
|
||||
<img src="https://img.shields.io/badge/%24-donate-ff69b4.svg" alt="donate">
|
||||
</a>
|
||||
|
||||
The web management system solution based on Vue3 and ElementPlus。[live demo](https://lin-xin.gitee.io/example/work/)
|
||||
|
||||
Please check the version of vue2 in [tag V4.2.0](https://github.com/lin-xin/vue-manage-system/tree/V4.2.0)
|
||||
|
||||
## Donation
|
||||
|
||||
|
||||
|
||||
## Preface
|
||||
|
||||
The scheme as a set of multi-function background frame templates, suitable for most of the WEB management system development. Convenient development fast simple good components based on Vue3 and ElementPlus. Color separation of color style, support manual switch themes, and it is convenient to use a custom theme color.
|
||||
|
||||
## Function
|
||||
|
||||
- [x] Element-UI
|
||||
- [x] Login/Logout
|
||||
- [x] Dashboard
|
||||
- [x] Table
|
||||
- [x] Tabs
|
||||
- [x] From
|
||||
- [x] Chart :bar_chart:
|
||||
- [x] Editor
|
||||
- [x] Markdown
|
||||
- [x] Upload pictures by clipping or dragging
|
||||
- [x] Permission
|
||||
- [x] Three level menu
|
||||
- [x] Custom icon
|
||||
|
||||
## Installation steps
|
||||
|
||||
git clone https://github.com/lin-xin/vue-manage-system.git // Clone templates
|
||||
cd vue-manage-system // Enter template directory
|
||||
npm install // Installation dependency
|
||||
|
||||
## Local development
|
||||
|
||||
npm run dev
|
||||
|
||||
## Constructing production
|
||||
|
||||
// Constructing project
|
||||
npm run build
|
||||
|
||||
## Component description and presentation
|
||||
|
||||
### vue-schart
|
||||
|
||||
Vue.js wrapper for sChart.js. Github : [vue-schart](https://github.com/lin-xin/vue-schart#/)
|
||||
|
||||
```html
|
||||
<template>
|
||||
<div>
|
||||
<schart class="wrapper" canvasId="myCanvas" :options="options"></schart>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
import Schart from "vue-schart"; // 导入Schart组件
|
||||
const options = ref({
|
||||
type: "bar",
|
||||
title: {
|
||||
text: "最近一周各品类销售图",
|
||||
},
|
||||
labels: ["周一", "周二", "周三", "周四", "周五"],
|
||||
datasets: [
|
||||
{
|
||||
label: "家电",
|
||||
data: [234, 278, 270, 190, 230],
|
||||
},
|
||||
{
|
||||
label: "百货",
|
||||
data: [164, 178, 190, 135, 160],
|
||||
},
|
||||
{
|
||||
label: "食品",
|
||||
data: [144, 198, 150, 235, 120],
|
||||
},
|
||||
],
|
||||
})
|
||||
</script>
|
||||
<style>
|
||||
.wrapper {
|
||||
width: 7rem;
|
||||
height: 5rem;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## Screenshot
|
||||
|
||||
### Default theme
|
||||
|
||||
|
||||
|
||||
### Login
|
||||
|
||||
|
||||
|
||||
## License
|
||||
|
||||
[MIT](https://github.com/lin-xin/vue-manage-system/blob/master/LICENSE)
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
// Generated by 'unplugin-auto-import'
|
||||
export {}
|
||||
declare global {
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
// generated by unplugin-vue-components
|
||||
// We suggest you to commit this file into source control
|
||||
// Read more: https://github.com/vuejs/core/pull/3399
|
||||
import '@vue/runtime-core'
|
||||
|
||||
export {}
|
||||
|
||||
declare module '@vue/runtime-core' {
|
||||
export interface GlobalComponents {
|
||||
Countup: typeof import('./src/components/countup.vue')['default']
|
||||
ElAvatar: typeof import('element-plus/es')['ElAvatar']
|
||||
ElButton: typeof import('element-plus/es')['ElButton']
|
||||
ElCalendar: typeof import('element-plus/es')['ElCalendar']
|
||||
ElCard: typeof import('element-plus/es')['ElCard']
|
||||
ElCarousel: typeof import('element-plus/es')['ElCarousel']
|
||||
ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
|
||||
ElCascader: typeof import('element-plus/es')['ElCascader']
|
||||
ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
|
||||
ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
|
||||
ElCol: typeof import('element-plus/es')['ElCol']
|
||||
ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
|
||||
ElCountdown: typeof import('element-plus/es')['ElCountdown']
|
||||
ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
|
||||
ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
|
||||
ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
|
||||
ElDialog: typeof import('element-plus/es')['ElDialog']
|
||||
ElDivider: typeof import('element-plus/es')['ElDivider']
|
||||
ElDropdown: typeof import('element-plus/es')['ElDropdown']
|
||||
ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
|
||||
ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
|
||||
ElForm: typeof import('element-plus/es')['ElForm']
|
||||
ElFormItem: typeof import('element-plus/es')['ElFormItem']
|
||||
ElIcon: typeof import('element-plus/es')['ElIcon']
|
||||
ElImage: typeof import('element-plus/es')['ElImage']
|
||||
ElInput: typeof import('element-plus/es')['ElInput']
|
||||
ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
|
||||
ElLink: typeof import('element-plus/es')['ElLink']
|
||||
ElMenu: typeof import('element-plus/es')['ElMenu']
|
||||
ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
|
||||
ElOption: typeof import('element-plus/es')['ElOption']
|
||||
ElPagination: typeof import('element-plus/es')['ElPagination']
|
||||
ElProgress: typeof import('element-plus/es')['ElProgress']
|
||||
ElRadio: typeof import('element-plus/es')['ElRadio']
|
||||
ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
|
||||
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
|
||||
ElRate: typeof import('element-plus/es')['ElRate']
|
||||
ElResult: typeof import('element-plus/es')['ElResult']
|
||||
ElRow: typeof import('element-plus/es')['ElRow']
|
||||
ElSelect: typeof import('element-plus/es')['ElSelect']
|
||||
ElSlider: typeof import('element-plus/es')['ElSlider']
|
||||
ElSpace: typeof import('element-plus/es')['ElSpace']
|
||||
ElStatistic: typeof import('element-plus/es')['ElStatistic']
|
||||
ElStep: typeof import('element-plus/es')['ElStep']
|
||||
ElSteps: typeof import('element-plus/es')['ElSteps']
|
||||
ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
|
||||
ElSwitch: typeof import('element-plus/es')['ElSwitch']
|
||||
ElTable: typeof import('element-plus/es')['ElTable']
|
||||
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
|
||||
ElTabPane: typeof import('element-plus/es')['ElTabPane']
|
||||
ElTabs: typeof import('element-plus/es')['ElTabs']
|
||||
ElTag: typeof import('element-plus/es')['ElTag']
|
||||
ElTimeline: typeof import('element-plus/es')['ElTimeline']
|
||||
ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
|
||||
ElTimePicker: typeof import('element-plus/es')['ElTimePicker']
|
||||
ElTooltip: typeof import('element-plus/es')['ElTooltip']
|
||||
ElTour: typeof import('element-plus/es')['ElTour']
|
||||
ElTourStep: typeof import('element-plus/es')['ElTourStep']
|
||||
ElTransfer: typeof import('element-plus/es')['ElTransfer']
|
||||
ElUpload: typeof import('element-plus/es')['ElUpload']
|
||||
ElWatermark: typeof import('element-plus/es')['ElWatermark']
|
||||
Header: typeof import('./src/components/header.vue')['default']
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
Sidebar: typeof import('./src/components/sidebar.vue')['default']
|
||||
TableCustom: typeof import('./src/components/table-custom.vue')['default']
|
||||
TableDetail: typeof import('./src/components/table-detail.vue')['default']
|
||||
TableEdit: typeof import('./src/components/table-edit.vue')['default']
|
||||
TableSearch: typeof import('./src/components/table-search.vue')['default']
|
||||
Tabs: typeof import('./src/components/tabs.vue')['default']
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<title>vue-manage-system后台管理系统</title>
|
||||
<link rel="stylesheet" href="//at.alicdn.com/t/c/font_830376_92o68tc95je.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
|
||||
Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,45 @@
|
|||
{
|
||||
"name": "vue-manage-system",
|
||||
"version": "5.5.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vue-tsc --noEmit && vite build",
|
||||
"serve": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@element-plus/icons-vue": "*",
|
||||
"@wangeditor/editor": "^5.1.23",
|
||||
"@wangeditor/editor-for-vue": "^5.1.12",
|
||||
"axios": "^1.6.3",
|
||||
"countup.js": "^2.8.0",
|
||||
"echarts": "^5.5.0",
|
||||
"echarts-wordcloud": "^2.1.0",
|
||||
"element-plus": "^2.6.3",
|
||||
"js-md5": "^0.8.3",
|
||||
"md-editor-v3": "^2.11.2",
|
||||
"nprogress": "^0.2.0",
|
||||
"pinia": "^2.1.7",
|
||||
"vue": "^3.4.5",
|
||||
"vue-cropper": "1.1.1",
|
||||
"vue-echarts": "^6.6.9",
|
||||
"vue-router": "^4.2.5",
|
||||
"vue-schart": "^2.0.0",
|
||||
"xlsx": "^0.18.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vitejs/plugin-vue": "^3.0.0",
|
||||
"@vue/compiler-sfc": "^3.1.2",
|
||||
"typescript": "^4.6.4",
|
||||
"unplugin-auto-import": "^0.11.2",
|
||||
"unplugin-vue-components": "^0.22.4",
|
||||
"vite": "^3.0.0",
|
||||
"vite-plugin-vue-setup-extend": "^0.4.0",
|
||||
"vue-tsc": "^0.38.4"
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"not dead"
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
{
|
||||
"list": [
|
||||
{
|
||||
"id": 1,
|
||||
"name": "管理员",
|
||||
"key": "admin",
|
||||
"status": true,
|
||||
"permiss": [
|
||||
"0",
|
||||
"1",
|
||||
"11",
|
||||
"12",
|
||||
"13",
|
||||
"2",
|
||||
"21",
|
||||
"22",
|
||||
"23",
|
||||
"24",
|
||||
"3",
|
||||
"31",
|
||||
"32",
|
||||
"33",
|
||||
"331",
|
||||
"332",
|
||||
"4",
|
||||
"41",
|
||||
"42",
|
||||
"5"
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"name": "普通用户",
|
||||
"key": "user",
|
||||
"status": true,
|
||||
"permiss": [
|
||||
"0",
|
||||
"1",
|
||||
"11",
|
||||
"12",
|
||||
"13"
|
||||
]
|
||||
}
|
||||
],
|
||||
"pageTotal": 2
|
||||
}
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
{
|
||||
"list": [
|
||||
{
|
||||
"id": 1,
|
||||
"name": "张三",
|
||||
"money": 123,
|
||||
"address": "广东省东莞市长安镇",
|
||||
"state": true,
|
||||
"date": "2019-11-1",
|
||||
"thumb": "https://lin-xin.gitee.io/images/post/wms.png"
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"name": "李四",
|
||||
"money": 456,
|
||||
"address": "广东省广州市白云区",
|
||||
"state": true,
|
||||
"date": "2019-10-11",
|
||||
"thumb": "https://lin-xin.gitee.io/images/post/node3.png"
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"name": "王五",
|
||||
"money": 789,
|
||||
"address": "湖南省长沙市",
|
||||
"state": false,
|
||||
"date": "2019-11-11",
|
||||
"thumb": "https://lin-xin.gitee.io/images/post/parcel.png"
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"name": "赵六",
|
||||
"money": 1011,
|
||||
"address": "福建省厦门市鼓浪屿",
|
||||
"state": true,
|
||||
"date": "2019-10-20",
|
||||
"thumb": "https://lin-xin.gitee.io/images/post/notice.png"
|
||||
}
|
||||
],
|
||||
"pageTotal": 4
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
{
|
||||
"list": [
|
||||
{
|
||||
"id": 1,
|
||||
"name": "张三",
|
||||
"password": "123",
|
||||
"email": "123@qq.com",
|
||||
"phone": "12345678944",
|
||||
"date": "2024-01-01",
|
||||
"role": "管理员"
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"name": "李四",
|
||||
"password": "123",
|
||||
"email": "1234@qq.com",
|
||||
"phone": "12345678945",
|
||||
"date": "2024-01-01",
|
||||
"role": "普通用户"
|
||||
}
|
||||
],
|
||||
"pageTotal": 2
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 121 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 425 KiB |
|
|
@ -0,0 +1,17 @@
|
|||
<template>
|
||||
<el-config-provider :locale="zhCn">
|
||||
<router-view />
|
||||
</el-config-provider>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ElConfigProvider } from 'element-plus';
|
||||
import zhCn from 'element-plus/es/locale/lang/zh-cn';
|
||||
import { useThemeStore } from './store/theme';
|
||||
|
||||
const theme = useThemeStore();
|
||||
theme.initTheme();
|
||||
</script>
|
||||
<style>
|
||||
@import './assets/css/main.css';
|
||||
</style>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import request from '../utils/request';
|
||||
|
||||
export const fetchData = () => {
|
||||
return request({
|
||||
url: './mock/table.json',
|
||||
method: 'get'
|
||||
});
|
||||
};
|
||||
|
||||
export const fetchUserData = () => {
|
||||
return request({
|
||||
url: './mock/user.json',
|
||||
method: 'get'
|
||||
});
|
||||
};
|
||||
|
||||
export const fetchRoleData = () => {
|
||||
return request({
|
||||
url: './mock/role.json',
|
||||
method: 'get'
|
||||
});
|
||||
};
|
||||
|
|
@ -0,0 +1,181 @@
|
|||
import request from '@/utils/request2';
|
||||
import md5 from 'js-md5';
|
||||
|
||||
export const loginService = (loginData) => {
|
||||
const params = new URLSearchParams();
|
||||
loginData = loginData._value;
|
||||
for (let key in loginData) {
|
||||
if (key === "username") {
|
||||
//婵犳鍠楃换鎰緤娴犲鍨傛い鏍ㄧ矋閸嬫﹢鏌曟繛鍨鐟滄妸鍛亾濞堝灝鏋涚紒缁樺姍瀹曡绂掔€ｎ亝顥濆銈嗘尪閸ㄨ绂掕箛鏇犵＜闁绘瑥鎳忕€氾拷
|
||||
if (RegExp(/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/).test(loginData[key])) {
|
||||
loginData['email'] = loginData[key]
|
||||
loginData[key] = ''
|
||||
}
|
||||
}
|
||||
// if (key === 'password') {
|
||||
// loginData[key] = md5(loginData[key])
|
||||
// }
|
||||
params.append(key, loginData[key])
|
||||
}
|
||||
return request.post('/user/login', params)
|
||||
}
|
||||
|
||||
export const registerService = (registerData) => {
|
||||
const params = new URLSearchParams();
|
||||
registerData = registerData._value;
|
||||
for (let key in registerData) {
|
||||
params.append(key, registerData[key])
|
||||
}
|
||||
console.log("registerdata:",registerData)
|
||||
return request.post('/user/register', params)
|
||||
}
|
||||
|
||||
|
||||
|
||||
export const getUUIDService = (registerData) => {
|
||||
const params = new URLSearchParams();
|
||||
for (let key in registerData) {
|
||||
params.append(key, registerData[key])
|
||||
}
|
||||
return request.post('/user/uuid', params)
|
||||
}
|
||||
|
||||
export const addGroupRequestService = (Data) => {
|
||||
const params = new URLSearchParams();
|
||||
for (let key in Data) {
|
||||
params.append(key, Data[key])
|
||||
}
|
||||
return request.post('/im/send_message', params,{
|
||||
headers: {
|
||||
'token': Data.token, // 闂佽绻愭蹇涘箯閿燂拷 token 闂備礁鎼ú锔锯偓绗涘啰鏆﹂柛娆忣槺閳绘棃鏌ｉ幋鐏活亝绂嶉崼鏇熺厽闁靛ǹ鍎遍褔鏌熼煬鎻掆偓婵嬪箖瑜忔禒锔炬喆閿濆懍澹曢梺璺ㄥ櫐閹凤拷
|
||||
}
|
||||
})
|
||||
}
|
||||
export const getFriendReqService = (Data) => {
|
||||
const params = new URLSearchParams();
|
||||
for (let key in Data) {
|
||||
params.append(key, Data[key])
|
||||
}
|
||||
return request.post('/im/get_friend_request', params, {
|
||||
headers: {
|
||||
'token': Data.token, // 闂佽绻愭蹇涘箯閿燂拷 token 闂備礁鎼ú锔锯偓绗涘啰鏆﹂柛娆忣槺閳绘棃鏌ｉ幋鐏活亝绂嶉崼鏇熺厽闁靛ǹ鍎遍褔鏌熼煬鎻掆偓婵嬪箖瑜忔禒锔炬喆閿濆懍澹曢梺璺ㄥ櫐閹凤拷
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export const GetUserInfoService = (Data) => {
|
||||
const params = new URLSearchParams();
|
||||
for (let key in Data) {
|
||||
params.append(key, Data[key])
|
||||
}
|
||||
return request.post('/user/info', params, {
|
||||
headers: {
|
||||
'token': Data.token, // 闂佽绻愭蹇涘箯閿燂拷 token 闂備礁鎼ú锔锯偓绗涘啰鏆﹂柛娆忣槺閳绘棃鏌ｉ幋鐏活亝绂嶉崼鏇熺厽闁靛ǹ鍎遍褔鏌熼煬鎻掆偓婵嬪箖瑜忔禒锔炬喆閿濆懍澹曢梺璺ㄥ櫐閹凤拷
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
//闂備礁鎲＄敮鐐寸箾閳ь剚绻涢崨顓烆劉缂佽桨绮欓幐濠冨緞婵犲倸娈ら梻浣烘嚀閻°劑鎮ч悙鍝勭劦妞ゆ巻鍋撻柟铏姍瀹曟濮€閵忋垻锛滈梺璺ㄥ櫐閹凤拷
|
||||
export const DelFGService =(Data) =>{
|
||||
const params = new URLSearchParams();
|
||||
for (let key in Data) {
|
||||
params.append(key, Data[key])
|
||||
}
|
||||
return request.post('/im/del_friend_or_group', params, {
|
||||
headers: {
|
||||
'token': Data.token, // 闂佽绻愭蹇涘箯閿燂拷 token 闂備礁鎼ú锔锯偓绗涘啰鏆﹂柛娆忣槺閳绘棃鏌ｉ幋鐏活亝绂嶉崼鏇熺厽闁靛ǹ鍎遍褔鏌熼煬鎻掆偓婵嬪箖瑜忔禒锔炬喆閿濆懍澹曢梺璺ㄥ櫐閹凤拷
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export const updateUserInfoService = (Data) => {
|
||||
const params = new URLSearchParams();
|
||||
for (let key in Data) {
|
||||
params.append(key, Data[key])
|
||||
}
|
||||
return request.post('/user/update', params, {
|
||||
headers: {
|
||||
'token': Data.token, // 闂佽绻愭蹇涘箯閿燂拷 token 闂備浇娉曢崰鎰板几婵犳艾绠柣鎴ｆ缁犲弶銇勯顐㈠绩缂佲偓鐎ｎ喗鐓欐い鏂挎惈婵℃寧绻涢崼鐔风仸缂佸倹甯℃俊鍫曞炊瑜滈弶娲⒑缁嬪簱搴烽柟鍑ゆ嫹
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export const acceptInviteService =(Data)=> {
|
||||
const params = new URLSearchParams();
|
||||
for (let key in Data) {
|
||||
params.append(key, Data[key])
|
||||
}
|
||||
return request.post('/im/accept_invite', params, {
|
||||
headers: {
|
||||
'token': Data.token, // 闂佽绻愭蹇涘箯閿燂拷 token 闂備礁鎼ú锔锯偓绗涘啰鏆﹂柛娆忣槺閳绘棃鏌ｉ幋鐏活亝绂嶉崼鏇熺厽闁靛ǹ鍎遍褔鏌熼煬鎻掆偓婵嬪箖瑜忔禒锔炬喆閿濆懍澹曢梺璺ㄥ櫐閹凤拷
|
||||
}
|
||||
})
|
||||
}
|
||||
export const rejectInviteService =(Data)=> {
|
||||
const params = new URLSearchParams();
|
||||
for (let key in Data) {
|
||||
params.append(key, Data[key])
|
||||
}
|
||||
return request.post('/im/reject_invite', params, {
|
||||
headers: {
|
||||
'token': Data.token, // 闂佽绻愭蹇涘箯閿燂拷 token 闂備礁鎼ú锔锯偓绗涘啰鏆﹂柛娆忣槺閳绘棃鏌ｉ幋鐏活亝绂嶉崼鏇熺厽闁靛ǹ鍎遍褔鏌熼煬鎻掆偓婵嬪箖瑜忔禒锔炬喆閿濆懍澹曢梺璺ㄥ櫐閹凤拷
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export const SearchUserService = (Data) => {
|
||||
const params = new URLSearchParams();
|
||||
for (let key in Data) {
|
||||
params.append(key, Data[key])
|
||||
}
|
||||
return request.post('/user/search', params,{
|
||||
headers: {
|
||||
'token': Data.token, // 闂佽绻愭蹇涘箯閿燂拷 token 闂備礁鎼ú锔锯偓绗涘啰鏆﹂柛娆忣槺閳绘棃鏌ｉ幋鐏活亝绂嶉崼鏇熺厽闁靛ǹ鍎遍褔鏌熼煬鎻掆偓婵嬪箖瑜忔禒锔炬喆閿濆懍澹曢梺璺ㄥ櫐閹凤拷
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
export const getQRService = (qrData) => {
|
||||
const params = new URLSearchParams();
|
||||
//console.log("qrdata=",qrData);
|
||||
for (let key in qrData) {
|
||||
params.append(key, qrData[key])
|
||||
}
|
||||
return request.post('/user/gqr', params)
|
||||
}
|
||||
|
||||
export const genResetPassword = (Data) => {
|
||||
const params = new URLSearchParams();
|
||||
//console.log("qrdata=",qrData);
|
||||
for (let key in Data) {
|
||||
params.append(key, Data[key])
|
||||
}
|
||||
return request.post('/user/reset', params)
|
||||
}
|
||||
|
||||
export const fetchUserData = () => {
|
||||
return {
|
||||
"list": [
|
||||
{
|
||||
"id": 1,
|
||||
"name": "张三",
|
||||
"password": "123",
|
||||
"email": "123@qq.com",
|
||||
"phone": "12345678944",
|
||||
"date": "2024-01-01",
|
||||
"role": "管理员"
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"name": "李四",
|
||||
"password": "123",
|
||||
"email": "1234@qq.com",
|
||||
"phone": "12345678945",
|
||||
"date": "2024-01-01",
|
||||
"role": "普通用户"
|
||||
}
|
||||
],
|
||||
"pageTotal": 2
|
||||
}
|
||||
};
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
[class*=" el-icon-lx"],
|
||||
[class^=el-icon-lx] {
|
||||
font-family: lx-iconfont !important;
|
||||
}
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
outline: 0 !important;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#app,
|
||||
.wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, 'microsoft yahei', arial, STHeiTi, sans-serif;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
i {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 30px;
|
||||
background: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.el-table th {
|
||||
background-color: #f5f7fa !important;
|
||||
}
|
||||
|
||||
.plugins-tips {
|
||||
padding: 20px 10px;
|
||||
margin-bottom: 20px;
|
||||
background: #eef1f6;
|
||||
}
|
||||
|
||||
.plugins-tips a {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.el-button + .el-tooltip {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.mgb20 {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.mgb10 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.mr10 {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.move-enter-active,
|
||||
.move-leave-active {
|
||||
transition: opacity 0.1s ease;
|
||||
}
|
||||
|
||||
.move-enter-from,
|
||||
.move-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.el-time-panel__content::after,
|
||||
.el-time-panel__content::before {
|
||||
margin-top: -7px;
|
||||
}
|
||||
|
||||
.el-time-spinner__wrapper .el-scrollbar__wrap:not(.el-scrollbar__wrap--hidden-default) {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
[hidden] {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.flex-center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
:root {
|
||||
--header-bg-color: #242f42;
|
||||
--header-text-color: #fff;
|
||||
--active-color: var(--el-color-primary);
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 227 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144.08 128.61"><title>资源 82</title><path d="M72.23 128.61c-7.1-.23-11.51-3.72-14.76-9.36C48 102.87 38.43 86.59 29.1 70.16a36 36 0 0 1-4.47-11.35A14.61 14.61 0 0 1 34 42.51c7.49-2.71 15.71-.21 19.67 6.43 7.52 12.56 14.77 25.27 22.12 37.92 3 5.17 5.89 10.43 9 15.51 5 8 3.45 18-4.22 23.31-2.3 1.62-5.52 1.99-8.34 2.93z" fill="#2ef2e9"/><path d="M72.66.33c6-.57 10.39 2.6 13.51 8C95.61 24.69 105 41.1 114.52 57.4c3.9 6.65-.28 17.13-6.39 20.44-8.93 4.83-17.88 1.28-21.86-5.62C76.82 55.86 67.14 39.62 58.11 23 52.06 12 59.61.24 72.66.33z" fill="#fa6663"/><path d="M144.08 15.83c-.58 8.62-6.73 15.57-15.51 15.66-9.31.09-16.87-7-16.95-15.62S119 0 127.87 0c9.13.09 16.22 7 16.21 15.83z" fill="#fbb355"/><path d="M16.24 31.5C7 31.33-.19 24.42 0 15.8.19 7.5 7.19-.06 14.64 0c10.53.08 18.27 6.73 17.61 15.9-.64 8.96-6.25 15.28-16.01 15.6z" fill="#8a56c2"/></svg>
|
||||
|
After Width: | Height: | Size: 918 B |
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
|
|
@ -0,0 +1,39 @@
|
|||
<template>
|
||||
<span ref="countRef"></span>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref, watch } from 'vue';
|
||||
import { CountUp } from 'countup.js';
|
||||
|
||||
const props = defineProps({
|
||||
end: {
|
||||
type: Number,
|
||||
required: true,
|
||||
},
|
||||
options: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
required: false,
|
||||
},
|
||||
});
|
||||
|
||||
const countRef = ref<any>(null);
|
||||
let countUp: any;
|
||||
onMounted(() => {
|
||||
countUp = new CountUp(countRef.value, props.end, props.options);
|
||||
if (countUp.error) {
|
||||
console.error(countUp.error);
|
||||
return;
|
||||
}
|
||||
countUp.start();
|
||||
});
|
||||
|
||||
watch(() => props.end, (newVal) => {
|
||||
if (countUp) {
|
||||
countUp.update(newVal);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,200 @@
|
|||
<template>
|
||||
<div class="header">
|
||||
<!-- 折叠按钮 -->
|
||||
<div class="header-left">
|
||||
<img class="logo" src="../assets/img/logo.svg" alt="">
|
||||
<div class="web-title">
|
||||
大学生学业作品AI生成工具
|
||||
</div>
|
||||
<div class="collapse-btn" @click="collapseChage">
|
||||
<el-icon v-if="sidebar.collapse">
|
||||
<Expand />
|
||||
</el-icon>
|
||||
<el-icon v-else>
|
||||
<Fold />
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<div class="header-user-con">
|
||||
<div class="btn-icon" @click="router.push('/theme')">
|
||||
<el-tooltip effect="dark" content="设置主题" placement="bottom">
|
||||
<i class="el-icon-lx-skin"></i>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div class="btn-icon" @click="router.push('/ucenter')">
|
||||
<el-tooltip effect="dark" :content="message ? `有${message}条未读消息` : `消息中心`" placement="bottom">
|
||||
<i class="el-icon-lx-notice"></i>
|
||||
</el-tooltip>
|
||||
<span class="btn-bell-badge" v-if="message"></span>
|
||||
</div>
|
||||
<div class="btn-icon" @click="setFullScreen">
|
||||
<el-tooltip effect="dark" content="全屏" placement="bottom">
|
||||
<i class="el-icon-lx-full"></i>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<!-- 用户头像 -->
|
||||
<el-avatar class="user-avator" :size="30" :src="imgurl" />
|
||||
<!-- 用户名下拉菜单 -->
|
||||
<el-dropdown class="user-name" trigger="click" @command="handleCommand">
|
||||
<span class="el-dropdown-link">
|
||||
{{ username }}
|
||||
<el-icon class="el-icon--right">
|
||||
<arrow-down />
|
||||
</el-icon>
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<a href="https://github.com/lin-xin/vue-manage-system" target="_blank">
|
||||
<el-dropdown-item>项目仓库</el-dropdown-item>
|
||||
</a>
|
||||
<el-dropdown-item command="user">个人中心</el-dropdown-item>
|
||||
<el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { onMounted } from 'vue';
|
||||
import { useSidebarStore } from '../store/sidebar';
|
||||
import { useRouter } from 'vue-router';
|
||||
import imgurl from '../assets/img/img.jpg';
|
||||
|
||||
const username: string | null = localStorage.getItem('ms_username');
|
||||
const message: number = 2;
|
||||
|
||||
const sidebar = useSidebarStore();
|
||||
// 侧边栏折叠
|
||||
const collapseChage = () => {
|
||||
sidebar.handleCollapse();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
if (document.body.clientWidth < 1500) {
|
||||
collapseChage();
|
||||
}
|
||||
});
|
||||
|
||||
// 用户名下拉菜单选择事件
|
||||
const router = useRouter();
|
||||
const handleCommand = (command: string) => {
|
||||
if (command == 'loginout') {
|
||||
localStorage.removeItem('ms_username');
|
||||
router.push('/login');
|
||||
} else if (command == 'user') {
|
||||
router.push('/ucenter');
|
||||
}
|
||||
};
|
||||
|
||||
const setFullScreen = () => {
|
||||
if (document.fullscreenElement) {
|
||||
document.exitFullscreen();
|
||||
} else {
|
||||
document.body.requestFullscreen.call(document.body);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
color: var(--header-text-color);
|
||||
background-color: var(--header-bg-color);
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 20px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 35px;
|
||||
}
|
||||
|
||||
.web-title {
|
||||
margin: 0 40px 0 10px;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.collapse-btn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
padding: 0 10px;
|
||||
cursor: pointer;
|
||||
opacity: 0.8;
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.collapse-btn:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
float: right;
|
||||
padding-right: 50px;
|
||||
}
|
||||
|
||||
.header-user-con {
|
||||
display: flex;
|
||||
height: 70px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.btn-fullscreen {
|
||||
transform: rotate(45deg);
|
||||
margin-right: 5px;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
position: relative;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--header-text-color);
|
||||
margin: 0 5px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
.btn-bell-badge {
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
top: 0px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 4px;
|
||||
background: #f56c6c;
|
||||
color: var(--header-text-color);
|
||||
}
|
||||
|
||||
|
||||
.user-avator {
|
||||
margin: 0 10px 0 20px;
|
||||
}
|
||||
|
||||
.el-dropdown-link {
|
||||
color: var(--header-text-color);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.el-dropdown-menu__item {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,221 @@
|
|||
import { Menus } from '@/types/menu';
|
||||
|
||||
export const menuData: Menus[] = [
|
||||
{
|
||||
id: '0',
|
||||
title: '系统首页',
|
||||
index: '/dashboard',
|
||||
icon: 'Odometer',
|
||||
},
|
||||
{
|
||||
id: '1',
|
||||
title: '系统管理',
|
||||
index: '1',
|
||||
icon: 'HomeFilled',
|
||||
children: [
|
||||
{
|
||||
id: '11',
|
||||
pid: '1',
|
||||
index: '/system-user',
|
||||
title: '用户管理',
|
||||
},
|
||||
{
|
||||
id: '12',
|
||||
pid: '1',
|
||||
index: '/system-role',
|
||||
title: '角色管理',
|
||||
},
|
||||
{
|
||||
id: '13',
|
||||
pid: '1',
|
||||
index: '/system-menu',
|
||||
title: '菜单管理',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
title: '组件',
|
||||
index: '2-1',
|
||||
icon: 'Calendar',
|
||||
children: [
|
||||
{
|
||||
id: '21',
|
||||
pid: '3',
|
||||
index: '/form',
|
||||
title: '表单',
|
||||
},
|
||||
{
|
||||
id: '22',
|
||||
pid: '3',
|
||||
index: '/upload',
|
||||
title: '上传',
|
||||
},
|
||||
{
|
||||
id: '23',
|
||||
pid: '2',
|
||||
index: '/carousel',
|
||||
title: '走马灯',
|
||||
},
|
||||
{
|
||||
id: '24',
|
||||
pid: '2',
|
||||
index: '/calendar',
|
||||
title: '日历',
|
||||
},
|
||||
{
|
||||
id: '25',
|
||||
pid: '2',
|
||||
index: '/watermark',
|
||||
title: '水印',
|
||||
},
|
||||
{
|
||||
id: '26',
|
||||
pid: '2',
|
||||
index: '/tour',
|
||||
title: '分布引导',
|
||||
},
|
||||
{
|
||||
id: '27',
|
||||
pid: '2',
|
||||
index: '/steps',
|
||||
title: '步骤条',
|
||||
},
|
||||
{
|
||||
id: '28',
|
||||
pid: '2',
|
||||
index: '/statistic',
|
||||
title: '统计',
|
||||
},
|
||||
{
|
||||
id: '29',
|
||||
pid: '3',
|
||||
index: '29',
|
||||
title: '三级菜单',
|
||||
children: [
|
||||
{
|
||||
id: '291',
|
||||
pid: '29',
|
||||
index: '/editor',
|
||||
title: '富文本编辑器',
|
||||
},
|
||||
{
|
||||
id: '292',
|
||||
pid: '29',
|
||||
index: '/markdown',
|
||||
title: 'markdown编辑器',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
title: '表格',
|
||||
index: '3',
|
||||
icon: 'Calendar',
|
||||
children: [
|
||||
{
|
||||
id: '31',
|
||||
pid: '3',
|
||||
index: '/table',
|
||||
title: '基础表格',
|
||||
},
|
||||
{
|
||||
id: '32',
|
||||
pid: '3',
|
||||
index: '/table-editor',
|
||||
title: '可编辑表格',
|
||||
},
|
||||
{
|
||||
id: '33',
|
||||
pid: '3',
|
||||
index: '/import',
|
||||
title: '导入Excel',
|
||||
},
|
||||
{
|
||||
id: '34',
|
||||
pid: '3',
|
||||
index: '/export',
|
||||
title: '导出Excel',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
icon: 'PieChart',
|
||||
index: '4',
|
||||
title: '图表',
|
||||
children: [
|
||||
{
|
||||
id: '41',
|
||||
pid: '4',
|
||||
index: '/schart',
|
||||
title: 'schart图表',
|
||||
},
|
||||
{
|
||||
id: '42',
|
||||
pid: '4',
|
||||
index: '/echarts',
|
||||
title: 'echarts图表',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '5',
|
||||
icon: 'Guide',
|
||||
index: '/icon',
|
||||
title: '图标',
|
||||
permiss: '5',
|
||||
},
|
||||
{
|
||||
id: '7',
|
||||
icon: 'Brush',
|
||||
index: '/theme',
|
||||
title: '主题',
|
||||
},
|
||||
{
|
||||
id: '6',
|
||||
icon: 'DocumentAdd',
|
||||
index: '6',
|
||||
title: '附加页面',
|
||||
children: [
|
||||
{
|
||||
id: '61',
|
||||
pid: '6',
|
||||
index: '/ucenter',
|
||||
title: '个人中心',
|
||||
},
|
||||
{
|
||||
id: '62',
|
||||
pid: '6',
|
||||
index: '/login',
|
||||
title: '登录',
|
||||
},
|
||||
{
|
||||
id: '63',
|
||||
pid: '6',
|
||||
index: '/register',
|
||||
title: '注册',
|
||||
},
|
||||
{
|
||||
id: '64',
|
||||
pid: '6',
|
||||
index: '/reset-pwd',
|
||||
title: '重设密码',
|
||||
},
|
||||
{
|
||||
id: '65',
|
||||
pid: '6',
|
||||
index: '/403',
|
||||
title: '403',
|
||||
},
|
||||
{
|
||||
id: '66',
|
||||
pid: '6',
|
||||
index: '/404',
|
||||
title: '404',
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
<template>
|
||||
<div class="sidebar">
|
||||
<el-menu
|
||||
class="sidebar-el-menu"
|
||||
:default-active="onRoutes"
|
||||
:collapse="sidebar.collapse"
|
||||
:background-color="sidebar.bgColor"
|
||||
:text-color="sidebar.textColor"
|
||||
router
|
||||
>
|
||||
<template v-for="item in menuData">
|
||||
<template v-if="item.children">
|
||||
<el-sub-menu :index="item.index" :key="item.index" v-permiss="item.id">
|
||||
<template #title>
|
||||
<el-icon>
|
||||
<component :is="item.icon"></component>
|
||||
</el-icon>
|
||||
<span>{{ item.title }}</span>
|
||||
</template>
|
||||
<template v-for="subItem in item.children">
|
||||
<el-sub-menu
|
||||
v-if="subItem.children"
|
||||
:index="subItem.index"
|
||||
:key="subItem.index"
|
||||
v-permiss="item.id"
|
||||
>
|
||||
<template #title>{{ subItem.title }}</template>
|
||||
<el-menu-item
|
||||
v-for="(threeItem, i) in subItem.children"
|
||||
:key="i"
|
||||
:index="threeItem.index"
|
||||
>
|
||||
{{ threeItem.title }}
|
||||
</el-menu-item>
|
||||
</el-sub-menu>
|
||||
<el-menu-item v-else :index="subItem.index" v-permiss="item.id">
|
||||
{{ subItem.title }}
|
||||
</el-menu-item>
|
||||
</template>
|
||||
</el-sub-menu>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-menu-item :index="item.index" :key="item.index" v-permiss="item.id">
|
||||
<el-icon>
|
||||
<component :is="item.icon"></component>
|
||||
</el-icon>
|
||||
<template #title>{{ item.title }}</template>
|
||||
</el-menu-item>
|
||||
</template>
|
||||
</template>
|
||||
</el-menu>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { useSidebarStore } from '../store/sidebar';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { menuData } from '@/components/menu';
|
||||
|
||||
const route = useRoute();
|
||||
const onRoutes = computed(() => {
|
||||
return route.path;
|
||||
});
|
||||
|
||||
const sidebar = useSidebarStore();
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.sidebar {
|
||||
display: block;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 70px;
|
||||
bottom: 0;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.sidebar::-webkit-scrollbar {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.sidebar-el-menu:not(.el-menu--collapse) {
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
.sidebar-el-menu {
|
||||
min-height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,211 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="table-toolbar" v-if="hasToolbar">
|
||||
<div class="table-toolbar-left">
|
||||
<slot name="toolbarBtn"></slot>
|
||||
</div>
|
||||
<div class="table-toolbar-right flex-center">
|
||||
<template v-if="multipleSelection.length > 0">
|
||||
<el-tooltip effect="dark" content="删除选中" placement="top">
|
||||
<el-icon class="columns-setting-icon" @click="delSelection(multipleSelection)">
|
||||
<Delete />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
<el-divider direction="vertical" />
|
||||
</template>
|
||||
<el-tooltip effect="dark" content="刷新" placement="top">
|
||||
<el-icon class="columns-setting-icon" @click="refresh">
|
||||
<Refresh />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
<el-divider direction="vertical" />
|
||||
<el-tooltip effect="dark" content="列设置" placement="top">
|
||||
<el-dropdown :hide-on-click="false" size="small" trigger="click">
|
||||
<el-icon class="columns-setting-icon">
|
||||
<Setting />
|
||||
</el-icon>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item v-for="c in columns">
|
||||
<el-checkbox v-model="c.visible" :label="c.label" />
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<el-table class="mgb20" :style="{ width: '100%' }" border :data="tableData" :row-key="rowKey"
|
||||
@selection-change="handleSelectionChange" table-layout="auto">
|
||||
<template v-for="item in columns" :key="item.prop">
|
||||
<el-table-column v-if="item.visible" :prop="item.prop" :label="item.label" :width="item.width"
|
||||
:type="item.type" :align="item.align || 'center'">
|
||||
|
||||
<template #default="{ row, column, $index }" v-if="item.type === 'index'">
|
||||
{{ getIndex($index) }}
|
||||
</template>
|
||||
<template #default="{ row, column, $index }" v-if="!item.type">
|
||||
<slot :name="item.prop" :rows="row" :index="$index">
|
||||
<template v-if="item.prop == 'operator'">
|
||||
<el-button type="warning" size="small" :icon="View" @click="viewFunc(row)">
|
||||
查看
|
||||
</el-button>
|
||||
<el-button type="primary" size="small" :icon="Edit" @click="editFunc(row)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button type="danger" size="small" :icon="Delete" @click="handleDelete(row)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
<span v-else-if="item.formatter">
|
||||
{{ item.formatter(row[item.prop]) }}
|
||||
</span>
|
||||
<span v-else>
|
||||
{{ row[item.prop] }}
|
||||
</span>
|
||||
</slot>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
</el-table>
|
||||
<el-pagination v-if="hasPagination" :current-page="currentPage" :page-size="pageSize" :background="true"
|
||||
:layout="layout" :total="total" @current-change="handleCurrentChange" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { toRefs, PropType, ref } from 'vue'
|
||||
import { Delete, Edit, View, Refresh } from '@element-plus/icons-vue';
|
||||
import { ElMessageBox } from 'element-plus';
|
||||
|
||||
const props = defineProps({
|
||||
// 表格相关
|
||||
tableData: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
columns: {
|
||||
type: Array as PropType<any[]>,
|
||||
default: []
|
||||
},
|
||||
rowKey: {
|
||||
type: String,
|
||||
default: 'id'
|
||||
},
|
||||
hasToolbar: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 分页相关
|
||||
hasPagination: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
total: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
currentPage: {
|
||||
type: Number,
|
||||
default: 1
|
||||
},
|
||||
pageSize: {
|
||||
type: Number,
|
||||
default: 10
|
||||
},
|
||||
|
||||
layout: {
|
||||
type: String,
|
||||
default: 'total, prev, pager, next'
|
||||
},
|
||||
delFunc: {
|
||||
type: Function,
|
||||
default: () => { }
|
||||
},
|
||||
viewFunc: {
|
||||
type: Function,
|
||||
default: () => { }
|
||||
},
|
||||
editFunc: {
|
||||
type: Function,
|
||||
default: () => { }
|
||||
},
|
||||
delSelection: {
|
||||
type: Function,
|
||||
default: () => { }
|
||||
},
|
||||
refresh: {
|
||||
type: Function,
|
||||
default: () => { }
|
||||
},
|
||||
changePage: {
|
||||
type: Function,
|
||||
default: () => { }
|
||||
}
|
||||
})
|
||||
|
||||
let {
|
||||
tableData,
|
||||
columns,
|
||||
rowKey,
|
||||
hasToolbar,
|
||||
hasPagination,
|
||||
total,
|
||||
currentPage,
|
||||
pageSize,
|
||||
layout,
|
||||
} = toRefs(props)
|
||||
|
||||
columns.value.forEach((item) => {
|
||||
if (item.visible === undefined) {
|
||||
item.visible = true
|
||||
}
|
||||
})
|
||||
|
||||
// 当选择项发生变化时会触发该事件
|
||||
const multipleSelection = ref([])
|
||||
const handleSelectionChange = (selection: any[]) => {
|
||||
multipleSelection.value = selection
|
||||
}
|
||||
|
||||
// 当前页码变化的事件
|
||||
const handleCurrentChange = (val: number) => {
|
||||
props.changePage(val)
|
||||
}
|
||||
|
||||
const handleDelete = (row) => {
|
||||
ElMessageBox.confirm('确定要删除吗？', '提示', {
|
||||
type: 'warning'
|
||||
})
|
||||
.then(async () => {
|
||||
props.delFunc(row);
|
||||
})
|
||||
.catch(() => { });
|
||||
};
|
||||
|
||||
const getIndex = (index: number) => {
|
||||
return index + 1 + (currentPage.value - 1) * pageSize.value
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.table-toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.columns-setting-icon {
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
color: #676767;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.table-header .cell {
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<template>
|
||||
<el-descriptions :title="title" :column="column" border>
|
||||
<el-descriptions-item v-for="item in list" :span="item.span">
|
||||
<template #label> {{ item.label }} </template>
|
||||
<slot :name="item.prop" :rows="row">
|
||||
{{ item.value || row[item.prop] }}
|
||||
</slot>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
const props = defineProps({
|
||||
data: {
|
||||
type: Object,
|
||||
required: true,
|
||||
}
|
||||
});
|
||||
const { row, title, column = 2, list } = props.data;
|
||||
|
||||
</script>
|
||||
|
|
@ -0,0 +1,111 @@
|
|||
<template>
|
||||
<el-form ref="formRef" :model="form" :rules="rules" :label-width="options.labelWidth">
|
||||
<el-row>
|
||||
<el-col :span="options.span" v-for="item in options.list">
|
||||
<el-form-item :label="item.label" :prop="item.prop">
|
||||
<!-- 文本框、数字框、下拉框、日期框、开关、上传 -->
|
||||
<el-input v-if="item.type === 'input'" v-model="form[item.prop]" :disabled="item.disabled"
|
||||
:placeholder="item.placeholder" clearable></el-input>
|
||||
<el-input-number v-else-if="item.type === 'number'" v-model="form[item.prop]"
|
||||
:disabled="item.disabled" controls-position="right"></el-input-number>
|
||||
<el-select v-else-if="item.type === 'select'" v-model="form[item.prop]" :disabled="item.disabled"
|
||||
:placeholder="item.placeholder" clearable>
|
||||
<el-option v-for="opt in item.opts" :label="opt.label" :value="opt.value"></el-option>
|
||||
</el-select>
|
||||
<el-date-picker v-else-if="item.type === 'date'" type="date" v-model="form[item.prop]"
|
||||
:value-format="item.format"></el-date-picker>
|
||||
<el-switch v-else-if="item.type === 'switch'" v-model="form[item.prop]"
|
||||
:active-value="item.activeValue" :inactive-value="item.inactiveValue"
|
||||
:active-text="item.activeText" :inactive-text="item.inactiveText"></el-switch>
|
||||
<el-upload v-else-if="item.type === 'upload'" class="avatar-uploader" action="#"
|
||||
:show-file-list="false" :on-success="handleAvatarSuccess">
|
||||
<img v-if="form[item.prop]" :src="form[item.prop]" class="avatar" />
|
||||
<el-icon v-else class="avatar-uploader-icon">
|
||||
<Plus />
|
||||
</el-icon>
|
||||
</el-upload>
|
||||
<slot :name="item.prop" v-else>
|
||||
|
||||
</slot>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="saveEdit(formRef)">保 存</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { FormOption } from '@/types/form-option';
|
||||
import { FormInstance, FormRules, UploadProps } from 'element-plus';
|
||||
import { PropType, ref } from 'vue';
|
||||
|
||||
const { options, formData, edit, update } = defineProps({
|
||||
options: {
|
||||
type: Object as PropType<FormOption>,
|
||||
required: true
|
||||
},
|
||||
formData: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
edit: {
|
||||
type: Boolean,
|
||||
required: false
|
||||
},
|
||||
update: {
|
||||
type: Function,
|
||||
required: true
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
const form = ref({ ...(edit ? formData : {}) });
|
||||
|
||||
const rules: FormRules = options.list.map(item => {
|
||||
if (item.required) {
|
||||
return { [item.prop]: [{ required: true, message: `${item.label}不能为空`, trigger: 'blur' }] };
|
||||
}
|
||||
return {};
|
||||
}).reduce((acc, cur) => ({ ...acc, ...cur }), {});
|
||||
|
||||
|
||||
const formRef = ref<FormInstance>();
|
||||
const saveEdit = (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return;
|
||||
formEl.validate(valid => {
|
||||
if (!valid) return false;
|
||||
update(form.value);
|
||||
});
|
||||
};
|
||||
|
||||
const handleAvatarSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
|
||||
form.value.thumb = URL.createObjectURL(uploadFile.raw!);
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.avatar-uploader .el-upload {
|
||||
border: 1px dashed var(--el-border-color);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: var(--el-transition-duration-fast);
|
||||
}
|
||||
|
||||
.avatar-uploader .el-upload:hover {
|
||||
border-color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.el-icon.avatar-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
width: 178px;
|
||||
height: 178px;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
<template>
|
||||
<div class="search-container">
|
||||
<el-form ref="searchRef" :model="query" :inline="true">
|
||||
<el-form-item :label="item.label" :prop="item.prop" v-for="item in options">
|
||||
<!-- 文本框、下拉框、日期框 -->
|
||||
<el-input v-if="item.type === 'input'" v-model="query[item.prop]" :disabled="item.disabled"
|
||||
:placeholder="item.placeholder" clearable></el-input>
|
||||
<el-select v-else-if="item.type === 'select'" v-model="query[item.prop]" :disabled="item.disabled"
|
||||
:placeholder="item.placeholder" clearable>
|
||||
<el-option v-for="opt in item.opts" :label="opt.label" :value="opt.value"></el-option>
|
||||
</el-select>
|
||||
<el-date-picker v-else-if="item.type === 'date'" type="date" v-model="query[item.prop]"
|
||||
:value-format="item.format"></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" :icon="Search" @click="search">搜索</el-button>
|
||||
<el-button :icon="Refresh" @click="resetForm(searchRef)">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { FormInstance } from 'element-plus';
|
||||
import { Search, Refresh } from '@element-plus/icons-vue';
|
||||
import { PropType, ref } from 'vue';
|
||||
import { FormOptionList } from '@/types/form-option';
|
||||
|
||||
const props = defineProps({
|
||||
query: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
options: {
|
||||
type: Array as PropType<Array<FormOptionList>>,
|
||||
required: true
|
||||
},
|
||||
search: {
|
||||
type: Function,
|
||||
default: () => { }
|
||||
}
|
||||
});
|
||||
|
||||
const searchRef = ref<FormInstance>();
|
||||
const resetForm = (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return
|
||||
formEl.resetFields()
|
||||
props.search();
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.search-container {
|
||||
padding: 20px 30px 0;
|
||||
background-color: #fff;
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 5px
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,149 @@
|
|||
<template>
|
||||
<div class="tabs-container">
|
||||
<el-tabs v-model="activePath" class="tabs" type="card" closable @tab-click="clickTabls" @tab-remove="closeTabs">
|
||||
<el-tab-pane v-for="item in tabs.list" :key="item.path" :label="item.title" :name="item.path"
|
||||
@click="setTags(item)"></el-tab-pane>
|
||||
</el-tabs>
|
||||
<div class="Tabs-close-box">
|
||||
<el-dropdown @command="handleTags">
|
||||
<el-button size="small" type="primary" plain>
|
||||
标签选项
|
||||
<el-icon class="el-icon--right">
|
||||
<arrow-down />
|
||||
</el-icon>
|
||||
</el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu size="small">
|
||||
<el-dropdown-item command="other">关闭其他</el-dropdown-item>
|
||||
<el-dropdown-item command="current">关闭当前</el-dropdown-item>
|
||||
<el-dropdown-item command="all">关闭所有</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue';
|
||||
import { useTabsStore } from '../store/tabs';
|
||||
import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const activePath = ref(route.fullPath)
|
||||
const tabs = useTabsStore();
|
||||
// 设置标签
|
||||
const setTags = (route: any) => {
|
||||
const isExist = tabs.list.some(item => {
|
||||
return item.path === route.fullPath;
|
||||
});
|
||||
if (!isExist) {
|
||||
tabs.setTabsItem({
|
||||
name: route.name,
|
||||
title: route.meta.title,
|
||||
path: route.fullPath
|
||||
});
|
||||
}
|
||||
};
|
||||
setTags(route);
|
||||
onBeforeRouteUpdate(to => {
|
||||
setTags(to);
|
||||
});
|
||||
|
||||
// 关闭全部标签
|
||||
const closeAll = () => {
|
||||
tabs.clearTabs();
|
||||
router.push('/');
|
||||
};
|
||||
// 关闭其他标签
|
||||
const closeOther = () => {
|
||||
const curItem = tabs.list.filter(item => {
|
||||
return item.path === route.fullPath;
|
||||
});
|
||||
tabs.closeTabsOther(curItem);
|
||||
};
|
||||
const handleTags = (command: string) => {
|
||||
switch (command) {
|
||||
case 'current':
|
||||
// 关闭当前页面的标签页
|
||||
tabs.closeCurrentTag({
|
||||
$router: router,
|
||||
$route: route
|
||||
});
|
||||
break;
|
||||
case 'all':
|
||||
closeAll();
|
||||
break;
|
||||
|
||||
case 'other':
|
||||
closeOther();
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const clickTabls = (item: any) => {
|
||||
router.push(item.props.name);
|
||||
}
|
||||
const closeTabs = (path: any) => {
|
||||
console.log(path);
|
||||
const index = tabs.list.findIndex((item) => item.path === path);
|
||||
tabs.delTabsItem(index);
|
||||
const item = tabs.list[index] ? tabs.list[index] : tabs.list[index - 1];
|
||||
if (item) {
|
||||
path === route.fullPath && router.push(item.path);
|
||||
} else {
|
||||
router.push('/');
|
||||
}
|
||||
}
|
||||
|
||||
watch(() => route.fullPath, (newVal, oldVal) => {
|
||||
activePath.value = newVal;
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style scss>
|
||||
.tabs-container {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
padding: 2px 120px 0 0;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
|
||||
.el-tabs__header {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.el-tabs__nav {
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.el-tabs__nav-next,
|
||||
.el-tabs__nav-prev {
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
&.el-tabs {
|
||||
--el-tabs-header-height: 28px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.Tabs-close-box {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
box-sizing: border-box;
|
||||
padding-top: 1px;
|
||||
text-align: center;
|
||||
width: 110px;
|
||||
height: 30px;
|
||||
background: #fff;
|
||||
box-shadow: -3px 0 15px 3px rgba(0, 0, 0, 0.1);
|
||||
z-index: 10;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
import { createApp } from 'vue';
|
||||
import { createPinia } from 'pinia';
|
||||
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
|
||||
import App from './App.vue';
|
||||
import router from './router';
|
||||
import { usePermissStore } from './store/permiss';
|
||||
import globalData from '@/utils/global'
|
||||
import 'element-plus/dist/index.css';
|
||||
import './assets/css/icon.css';
|
||||
|
||||
const app = createApp(App);
|
||||
app.use(createPinia());
|
||||
app.provide('globalData',globalData);
|
||||
app.use(router);
|
||||
|
||||
// 注册elementplus图标
|
||||
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
||||
app.component(key, component);
|
||||
}
|
||||
// 自定义权限指令
|
||||
const permiss = usePermissStore();
|
||||
app.directive('permiss', {
|
||||
mounted(el, binding) {
|
||||
if (binding.value && !permiss.key.includes(String(binding.value))) {
|
||||
el['hidden'] = true;
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
app.mount('#app');
|
||||
|
|
@ -0,0 +1,293 @@
|
|||
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router';
|
||||
import { usePermissStore } from '../store/permiss';
|
||||
import Home from '../views/home.vue';
|
||||
import NProgress from 'nprogress';
|
||||
import 'nprogress/nprogress.css';
|
||||
|
||||
const routes: RouteRecordRaw[] = [
|
||||
{
|
||||
path: '/',
|
||||
redirect: '/dashboard',
|
||||
},
|
||||
{
|
||||
path: '/',
|
||||
name: 'Home',
|
||||
component: Home,
|
||||
children: [
|
||||
{
|
||||
path: '/dashboard',
|
||||
name: 'dashboard',
|
||||
meta: {
|
||||
title: '系统首页',
|
||||
permiss: '0',
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "dashboard" */ '../views/dashboard.vue'),
|
||||
},
|
||||
{
|
||||
path: '/system-user',
|
||||
name: 'system-user',
|
||||
meta: {
|
||||
title: '用户管理',
|
||||
permiss: '11',
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "system-user" */ '../views/system/user.vue'),
|
||||
},
|
||||
{
|
||||
path: '/system-role',
|
||||
name: 'system-role',
|
||||
meta: {
|
||||
title: '角色管理',
|
||||
permiss: '12',
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "system-role" */ '../views/system/role.vue'),
|
||||
},
|
||||
{
|
||||
path: '/system-menu',
|
||||
name: 'system-menu',
|
||||
meta: {
|
||||
title: '菜单管理',
|
||||
permiss: '13',
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "system-menu" */ '../views/system/menu.vue'),
|
||||
},
|
||||
{
|
||||
path: '/table',
|
||||
name: 'basetable',
|
||||
meta: {
|
||||
title: '基础表格',
|
||||
permiss: '31',
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "table" */ '../views/table/basetable.vue'),
|
||||
},
|
||||
{
|
||||
path: '/table-editor',
|
||||
name: 'table-editor',
|
||||
meta: {
|
||||
title: '可编辑表格',
|
||||
permiss: '32',
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "table-editor" */ '../views/table/table-editor.vue'),
|
||||
},
|
||||
{
|
||||
path: '/schart',
|
||||
name: 'schart',
|
||||
meta: {
|
||||
title: 'schart图表',
|
||||
permiss: '41',
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "schart" */ '../views/chart/schart.vue'),
|
||||
},
|
||||
{
|
||||
path: '/echarts',
|
||||
name: 'echarts',
|
||||
meta: {
|
||||
title: 'echarts图表',
|
||||
permiss: '42',
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "echarts" */ '../views/chart/echarts.vue'),
|
||||
},
|
||||
|
||||
{
|
||||
path: '/icon',
|
||||
name: 'icon',
|
||||
meta: {
|
||||
title: '图标',
|
||||
permiss: '5',
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "icon" */ '../views/pages/icon.vue'),
|
||||
},
|
||||
{
|
||||
path: '/ucenter',
|
||||
name: 'ucenter',
|
||||
meta: {
|
||||
title: '个人中心',
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "ucenter" */ '../views/pages/ucenter.vue'),
|
||||
},
|
||||
{
|
||||
path: '/editor',
|
||||
name: 'editor',
|
||||
meta: {
|
||||
title: '富文本编辑器',
|
||||
permiss: '291',
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "editor" */ '../views/pages/editor.vue'),
|
||||
},
|
||||
{
|
||||
path: '/markdown',
|
||||
name: 'markdown',
|
||||
meta: {
|
||||
title: 'markdown编辑器',
|
||||
permiss: '292',
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "markdown" */ '../views/pages/markdown.vue'),
|
||||
},
|
||||
{
|
||||
path: '/export',
|
||||
name: 'export',
|
||||
meta: {
|
||||
title: '导出Excel',
|
||||
permiss: '34',
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "export" */ '../views/table/export.vue'),
|
||||
},
|
||||
{
|
||||
path: '/import',
|
||||
name: 'import',
|
||||
meta: {
|
||||
title: '导入Excel',
|
||||
permiss: '33',
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "import" */ '../views/table/import.vue'),
|
||||
},
|
||||
{
|
||||
path: '/theme',
|
||||
name: 'theme',
|
||||
meta: {
|
||||
title: '主题设置',
|
||||
permiss: '7',
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "theme" */ '../views/pages/theme.vue'),
|
||||
},
|
||||
{
|
||||
path: '/calendar',
|
||||
name: 'calendar',
|
||||
meta: {
|
||||
title: '日历',
|
||||
permiss: '24',
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "calendar" */ '../views/element/calendar.vue'),
|
||||
},
|
||||
{
|
||||
path: '/watermark',
|
||||
name: 'watermark',
|
||||
meta: {
|
||||
title: '水印',
|
||||
permiss: '25',
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "watermark" */ '../views/element/watermark.vue'),
|
||||
},
|
||||
{
|
||||
path: '/carousel',
|
||||
name: 'carousel',
|
||||
meta: {
|
||||
title: '走马灯',
|
||||
permiss: '23',
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "carousel" */ '../views/element/carousel.vue'),
|
||||
},
|
||||
{
|
||||
path: '/tour',
|
||||
name: 'tour',
|
||||
meta: {
|
||||
title: '分步引导',
|
||||
permiss: '26',
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "tour" */ '../views/element/tour.vue'),
|
||||
},
|
||||
{
|
||||
path: '/steps',
|
||||
name: 'steps',
|
||||
meta: {
|
||||
title: '步骤条',
|
||||
permiss: '27',
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "steps" */ '../views/element/steps.vue'),
|
||||
},
|
||||
{
|
||||
path: '/form',
|
||||
name: 'forms',
|
||||
meta: {
|
||||
title: '表单',
|
||||
permiss: '21',
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "form" */ '../views/element/form.vue'),
|
||||
},
|
||||
{
|
||||
path: '/upload',
|
||||
name: 'upload',
|
||||
meta: {
|
||||
title: '上传',
|
||||
permiss: '22',
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "upload" */ '../views/element/upload.vue'),
|
||||
},
|
||||
{
|
||||
path: '/statistic',
|
||||
name: 'statistic',
|
||||
meta: {
|
||||
title: '统计',
|
||||
permiss: '28',
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "statistic" */ '../views/element/statistic.vue'),
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
path: '/login',
|
||||
meta: {
|
||||
title: '登录',
|
||||
noAuth: true,
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "login" */ '../views/pages/login.vue'),
|
||||
},
|
||||
{
|
||||
path: '/register',
|
||||
meta: {
|
||||
title: '注册',
|
||||
noAuth: true,
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "register" */ '../views/pages/register.vue'),
|
||||
},
|
||||
{
|
||||
path: '/reset-pwd',
|
||||
meta: {
|
||||
title: '重置密码',
|
||||
noAuth: true,
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "reset-pwd" */ '../views/pages/reset-pwd.vue'),
|
||||
},
|
||||
{
|
||||
path: '/403',
|
||||
meta: {
|
||||
title: '没有权限',
|
||||
noAuth: true,
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "403" */ '../views/pages/403.vue'),
|
||||
},
|
||||
{
|
||||
path: '/404',
|
||||
meta: {
|
||||
title: '找不到页面',
|
||||
noAuth: true,
|
||||
},
|
||||
component: () => import(/* webpackChunkName: "404" */ '../views/pages/404.vue'),
|
||||
},
|
||||
{ path: '/:path(.*)', redirect: '/404' },
|
||||
];
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHashHistory(),
|
||||
routes,
|
||||
});
|
||||
|
||||
router.beforeEach((to, from, next) => {
|
||||
NProgress.start();
|
||||
const role = localStorage.getItem('ms_username');
|
||||
const permiss = usePermissStore();
|
||||
|
||||
if (!role && to.meta.noAuth !== true) {
|
||||
next('/login');
|
||||
} else if (to.meta.permiss && !permiss.key.includes(to.meta.permiss)) {
|
||||
// 如果没有权限，则进入403
|
||||
next('/403');
|
||||
} else {
|
||||
next();
|
||||
}
|
||||
});
|
||||
|
||||
router.afterEach(() => {
|
||||
NProgress.done();
|
||||
});
|
||||
|
||||
export default router;
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
import { defineStore } from 'pinia';
|
||||
|
||||
interface ObjectList {
|
||||
[key: string]: string[];
|
||||
}
|
||||
|
||||
export const usePermissStore = defineStore('permiss', {
|
||||
state: () => {
|
||||
const keys = localStorage.getItem('ms_keys');
|
||||
return {
|
||||
key: keys ? JSON.parse(keys) : <string[]>[],
|
||||
defaultList: <ObjectList>{
|
||||
admin: [
|
||||
'0',
|
||||
'1',
|
||||
'11',
|
||||
'12',
|
||||
'13',
|
||||
'2',
|
||||
'21',
|
||||
'22',
|
||||
'23',
|
||||
'24',
|
||||
'25',
|
||||
'26',
|
||||
'27',
|
||||
'28',
|
||||
'29',
|
||||
'291',
|
||||
'292',
|
||||
'3',
|
||||
'31',
|
||||
'32',
|
||||
'33',
|
||||
'34',
|
||||
'4',
|
||||
'41',
|
||||
'42',
|
||||
'5',
|
||||
'7',
|
||||
'6',
|
||||
'61',
|
||||
'62',
|
||||
'63',
|
||||
'64',
|
||||
'65',
|
||||
'66',
|
||||
],
|
||||
user: ['0', '1', '11', '12', '13'],
|
||||
},
|
||||
};
|
||||
},
|
||||
actions: {
|
||||
handleSet(val: string[]) {
|
||||
this.key = val;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
import { defineStore } from 'pinia';
|
||||
|
||||
export const useSidebarStore = defineStore('sidebar', {
|
||||
state: () => {
|
||||
return {
|
||||
collapse: false,
|
||||
bgColor: localStorage.getItem('sidebar-bg-color') || '#324157',
|
||||
textColor: localStorage.getItem('sidebar-text-color') || '#bfcbd9'
|
||||
};
|
||||
},
|
||||
getters: {},
|
||||
actions: {
|
||||
handleCollapse() {
|
||||
this.collapse = !this.collapse;
|
||||
},
|
||||
setBgColor(color: string) {
|
||||
this.bgColor = color;
|
||||
localStorage.setItem('sidebar-bg-color', color);
|
||||
},
|
||||
setTextColor(color: string) {
|
||||
this.textColor = color;
|
||||
localStorage.setItem('sidebar-text-color', color);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
import { defineStore } from 'pinia';
|
||||
|
||||
interface ListItem {
|
||||
name: string;
|
||||
path: string;
|
||||
title: string;
|
||||
}
|
||||
|
||||
export const useTabsStore = defineStore('tabs', {
|
||||
state: () => {
|
||||
return {
|
||||
list: <ListItem[]>[]
|
||||
};
|
||||
},
|
||||
getters: {
|
||||
show: state => {
|
||||
return state.list.length > 0;
|
||||
},
|
||||
nameList: state => {
|
||||
return state.list.map(item => item.name);
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
delTabsItem(index: number) {
|
||||
this.list.splice(index, 1);
|
||||
},
|
||||
setTabsItem(data: ListItem) {
|
||||
this.list.push(data);
|
||||
},
|
||||
clearTabs() {
|
||||
this.list = [];
|
||||
},
|
||||
closeTabsOther(data: ListItem[]) {
|
||||
this.list = data;
|
||||
},
|
||||
closeCurrentTag(data: any) {
|
||||
for (let i = 0, len = this.list.length; i < len; i++) {
|
||||
const item = this.list[i];
|
||||
if (item.path === data.$route.fullPath) {
|
||||
if (i < len - 1) {
|
||||
data.$router.push(this.list[i + 1].path);
|
||||
} else if (i > 0) {
|
||||
data.$router.push(this.list[i - 1].path);
|
||||
} else {
|
||||
data.$router.push('/');
|
||||
}
|
||||
this.list.splice(i, 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
import { mix, setProperty } from '@/utils';
|
||||
import { defineStore } from 'pinia';
|
||||
|
||||
export const useThemeStore = defineStore('theme', {
|
||||
state: () => {
|
||||
return {
|
||||
primary: '',
|
||||
success: '',
|
||||
warning: '',
|
||||
danger: '',
|
||||
info: '',
|
||||
headerBgColor: '#242f42',
|
||||
headerTextColor: '#fff',
|
||||
};
|
||||
},
|
||||
getters: {},
|
||||
actions: {
|
||||
initTheme() {
|
||||
['primary', 'success', 'warning', 'danger', 'info'].forEach((type) => {
|
||||
const color = localStorage.getItem(`theme-${type}`) || '';
|
||||
if (color) {
|
||||
this.setPropertyColor(color, type); // 设置主题色
|
||||
}
|
||||
});
|
||||
const headerBgColor = localStorage.getItem('header-bg-color');
|
||||
headerBgColor && this.setHeaderBgColor(headerBgColor);
|
||||
const headerTextColor = localStorage.getItem('header-text-color');
|
||||
headerTextColor && this.setHeaderTextColor(headerTextColor);
|
||||
},
|
||||
resetTheme() {
|
||||
['primary', 'success', 'warning', 'danger', 'info'].forEach((type) => {
|
||||
this.setPropertyColor('', type); // 重置主题色
|
||||
});
|
||||
},
|
||||
setPropertyColor(color: string, type: string = 'primary') {
|
||||
this[type] = color;
|
||||
setProperty(`--el-color-${type}`, color);
|
||||
localStorage.setItem(`theme-${type}`, color);
|
||||
this.setThemeLight(type);
|
||||
},
|
||||
setThemeLight(type: string = 'primary') {
|
||||
[3, 5, 7, 8, 9].forEach((v) => {
|
||||
setProperty(`--el-color-${type}-light-${v}`, mix('#ffffff', this[type], v / 10));
|
||||
});
|
||||
setProperty(`--el-color-${type}-dark-2`, mix('#ffffff', this[type], 0.2));
|
||||
},
|
||||
setHeaderBgColor(color: string) {
|
||||
this.headerBgColor = color;
|
||||
setProperty('--header-bg-color', color);
|
||||
localStorage.setItem(`header-bg-color`, color);
|
||||
},
|
||||
setHeaderTextColor(color: string) {
|
||||
this.headerTextColor = color;
|
||||
setProperty('--header-text-color', color);
|
||||
localStorage.setItem(`header-text-color`, color);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
export interface FormOption {
|
||||
list: FormOptionList[];
|
||||
labelWidth?: number | string;
|
||||
span?: number;
|
||||
|
||||
}
|
||||
|
||||
export interface FormOptionList {
|
||||
prop: string;
|
||||
label: string;
|
||||
type: string;
|
||||
placeholder?: string;
|
||||
disabled?: boolean;
|
||||
opts?: any[];
|
||||
format?: string;
|
||||
activeValue?: any;
|
||||
inactiveValue?: any;
|
||||
activeText?: string;
|
||||
inactiveText?: string;
|
||||
required?: boolean;
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
export interface Menus {
|
||||
id: string;
|
||||
pid?: string;
|
||||
icon?: string;
|
||||
index: string;
|
||||
title: string;
|
||||
permiss?: string;
|
||||
children?: Menus[];
|
||||
}
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
|
||||
export interface Role {
|
||||
id: number;
|
||||
name: string;
|
||||
key: string;
|
||||
status: boolean;
|
||||
permiss: string[]
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
export interface TableItem {
|
||||
id: number;
|
||||
name: string;
|
||||
thumb: string;
|
||||
money: number;
|
||||
state: string;
|
||||
date: string;
|
||||
address: string;
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
|
||||
export interface User {
|
||||
id: number;
|
||||
name: string;
|
||||
password: string;
|
||||
email: string;
|
||||
phone: string;
|
||||
role: string;
|
||||
date: string;
|
||||
}
|
||||
|
||||
export interface Register {
|
||||
username: string;
|
||||
password: string;
|
||||
email: string;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,10 @@
|
|||
import { ref } from "vue";
|
||||
|
||||
const globalData=ref({
|
||||
token:"",
|
||||
userId:0,
|
||||
videoId:0,
|
||||
videoName:"",
|
||||
})
|
||||
|
||||
export default globalData;
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
export const setProperty = (prop: string, val: any, dom = document.documentElement) => {
|
||||
dom.style.setProperty(prop, val);
|
||||
};
|
||||
|
||||
export const mix = (color1: string, color2: string, weight: number = 0.5): string => {
|
||||
let color = '#';
|
||||
for (let i = 0; i <= 2; i++) {
|
||||
const c1 = parseInt(color1.substring(1 + i * 2, 3 + i * 2), 16);
|
||||
const c2 = parseInt(color2.substring(1 + i * 2, 3 + i * 2), 16);
|
||||
const c = Math.round(c1 * weight + c2 * (1 - weight));
|
||||
color += c.toString(16).padStart(2, '0');
|
||||
}
|
||||
return color;
|
||||
};
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
import axios, { AxiosInstance, AxiosError, AxiosResponse, InternalAxiosRequestConfig } from 'axios';
|
||||
|
||||
const service: AxiosInstance = axios.create({
|
||||
timeout: 5000
|
||||
});
|
||||
|
||||
service.interceptors.request.use(
|
||||
(config: InternalAxiosRequestConfig) => {
|
||||
return config;
|
||||
},
|
||||
(error: AxiosError) => {
|
||||
console.log(error);
|
||||
return Promise.reject();
|
||||
}
|
||||
);
|
||||
|
||||
service.interceptors.response.use(
|
||||
(response: AxiosResponse) => {
|
||||
if (response.status === 200) {
|
||||
return response;
|
||||
} else {
|
||||
Promise.reject();
|
||||
}
|
||||
},
|
||||
(error: AxiosError) => {
|
||||
console.log(error);
|
||||
return Promise.reject();
|
||||
}
|
||||
);
|
||||
|
||||
export default service;
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
import axios from "axios";
|
||||
import router from "@/router/index.js";
|
||||
import { ElMessage } from 'element-plus';
|
||||
//const baseURL = "https://gep.ljsea.top/";
|
||||
const baseURL = "https://tx.ljsea.top/";
|
||||
//const baseURL= "http://localhost:8083";
|
||||
//const baseURL="https://pm.ljsea.top";
|
||||
//const baseURL = "https://gep.ljsea.xyz/";
|
||||
const request = axios.create({
|
||||
baseURL: baseURL,
|
||||
});
|
||||
|
||||
request.interceptors.response.use(
|
||||
result => {
|
||||
if(result.status!==200 ){
|
||||
router.push("/login")
|
||||
}
|
||||
if(result.data.message==="NOT_LOGIN"|| [2, 3, 4].includes(result.data.code)){
|
||||
//alert("登录失效，请重新登录！")
|
||||
ElMessage.error('登录失效，请重新登录！');
|
||||
localStorage.removeItem("token");
|
||||
router.push("/login")
|
||||
return
|
||||
}
|
||||
if(result.data.code == 7){
|
||||
//alert("该用户已存在，请重新输入！");
|
||||
ElMessage.error('该用户已存在，请重新输入！');
|
||||
return null
|
||||
}
|
||||
|
||||
if(result.data.code == 1){
|
||||
//alert("请求失败，请稍后重试！");
|
||||
ElMessage.error('请求失败，请稍后重试！');
|
||||
}else{
|
||||
return result.data
|
||||
}
|
||||
},
|
||||
error => {
|
||||
//alert("请求失败，请稍后重试！");
|
||||
ElMessage.error('请求失败，请稍后重试！');
|
||||
return Promise.reject(error);
|
||||
}
|
||||
)
|
||||
request.interceptors.request.use(
|
||||
|
||||
)
|
||||
export default request;
|
||||
|
|
@ -0,0 +1,87 @@
|
|||
<template>
|
||||
<div class="container">
|
||||
<div class="plugins-tips">
|
||||
vue-echarts：Apache ECharts™ 的 Vue.js 组件。 访问地址：
|
||||
<a href="https://github.com/ecomfe/vue-echarts" target="_blank">vue-echarts</a>
|
||||
</div>
|
||||
<el-card class="mgb20" shadow="hover">
|
||||
<template #header>
|
||||
<div class="content-title">柱状图</div>
|
||||
</template>
|
||||
<v-chart class="schart" :option="barOptions" />
|
||||
</el-card>
|
||||
<el-card class="mgb20" shadow="hover">
|
||||
<template #header>
|
||||
<div class="content-title">折线图</div>
|
||||
</template>
|
||||
<v-chart class="schart" :option="lineOptions" />
|
||||
</el-card>
|
||||
<el-card class="mgb20" shadow="hover">
|
||||
<template #header>
|
||||
<div class="content-title">饼状图</div>
|
||||
</template>
|
||||
<v-chart class="schart" :option="pieOptions" />
|
||||
</el-card>
|
||||
<el-card class="mgb20" shadow="hover">
|
||||
<template #header>
|
||||
<div class="content-title">环形图</div>
|
||||
</template>
|
||||
<v-chart class="schart" :option="ringOptions" />
|
||||
</el-card>
|
||||
<el-card class="mgb20" shadow="hover">
|
||||
<template #header>
|
||||
<div class="content-title">词云图</div>
|
||||
</template>
|
||||
<v-chart class="schart" :option="wordOptions" />
|
||||
</el-card>
|
||||
<el-card class="mgb20" shadow="hover">
|
||||
<template #header>
|
||||
<div class="content-title">地图</div>
|
||||
</template>
|
||||
<v-chart class="schart" :option="mapOptions" />
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="echarts">
|
||||
import { registerMap, use } from 'echarts/core';
|
||||
import { BarChart, LineChart, PieChart, MapChart } from 'echarts/charts';
|
||||
import {
|
||||
GridComponent,
|
||||
TooltipComponent,
|
||||
LegendComponent,
|
||||
TitleComponent,
|
||||
VisualMapComponent,
|
||||
} from 'echarts/components';
|
||||
import { CanvasRenderer } from 'echarts/renderers';
|
||||
import VChart from 'vue-echarts';
|
||||
import 'echarts-wordcloud';
|
||||
import { barOptions, lineOptions, pieOptions, ringOptions, wordOptions, mapOptions } from './options';
|
||||
import chinaMap from '@/utils/china';
|
||||
use([
|
||||
CanvasRenderer,
|
||||
BarChart,
|
||||
GridComponent,
|
||||
LineChart,
|
||||
PieChart,
|
||||
MapChart,
|
||||
TooltipComponent,
|
||||
LegendComponent,
|
||||
TitleComponent,
|
||||
VisualMapComponent,
|
||||
]);
|
||||
registerMap('china', chinaMap);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.schart {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.content-title {
|
||||
font-weight: 400;
|
||||
font-size: 22px;
|
||||
color: #1f2f3d;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,345 @@
|
|||
import { graphic } from 'echarts/core';
|
||||
export const barOptions = {
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
},
|
||||
color: ['#009688', '#f44336'],
|
||||
series: [
|
||||
{
|
||||
data: [120, 200, 150, 80, 70, 110, 130],
|
||||
type: 'bar',
|
||||
},
|
||||
{
|
||||
data: [180, 230, 190, 120, 110, 230, 235],
|
||||
type: 'bar',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export const lineOptions = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
},
|
||||
color: ['#009688', '#f44336'],
|
||||
series: [
|
||||
{
|
||||
name: 'Email',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
areaStyle: {},
|
||||
smooth: true,
|
||||
data: [120, 132, 101, 134, 90, 230, 210],
|
||||
},
|
||||
{
|
||||
name: 'Union Ads',
|
||||
type: 'line',
|
||||
stack: 'Total',
|
||||
areaStyle: {},
|
||||
smooth: true,
|
||||
data: [220, 182, 191, 234, 290, 330, 310],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export const pieOptions = {
|
||||
title: {
|
||||
text: 'Referer of a Website',
|
||||
subtext: 'Fake Data',
|
||||
left: 'center',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: '50%',
|
||||
data: [
|
||||
{ value: 1048, name: 'Search Engine' },
|
||||
{ value: 735, name: 'Direct' },
|
||||
{ value: 580, name: 'Email' },
|
||||
{ value: 484, name: 'Union Ads' },
|
||||
{ value: 300, name: 'Video Ads' },
|
||||
],
|
||||
emphasis: {
|
||||
itemStyle: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export const wordOptions = {
|
||||
series: [
|
||||
{
|
||||
type: 'wordCloud',
|
||||
rotationRange: [0, 0],
|
||||
autoSize: {
|
||||
enable: true,
|
||||
minSize: 14,
|
||||
},
|
||||
textStyle: {
|
||||
fontFamily: '微软雅黑,sans-serif',
|
||||
color: function () {
|
||||
return (
|
||||
'rgb(' +
|
||||
[
|
||||
Math.round(Math.random() * 160),
|
||||
Math.round(Math.random() * 160),
|
||||
Math.round(Math.random() * 160),
|
||||
].join(',') +
|
||||
')'
|
||||
);
|
||||
},
|
||||
},
|
||||
data: [
|
||||
{
|
||||
name: 'Vue',
|
||||
value: 10000,
|
||||
},
|
||||
{
|
||||
name: 'React',
|
||||
value: 9000,
|
||||
},
|
||||
{
|
||||
name: '图表',
|
||||
value: 4000,
|
||||
},
|
||||
{
|
||||
name: '产品',
|
||||
value: 7000,
|
||||
},
|
||||
{
|
||||
name: 'vue-manage-system',
|
||||
value: 2000,
|
||||
},
|
||||
{
|
||||
name: 'element-plus',
|
||||
value: 6000,
|
||||
},
|
||||
{
|
||||
name: '管理系统',
|
||||
value: 5000,
|
||||
},
|
||||
{
|
||||
name: '前端',
|
||||
value: 4000,
|
||||
},
|
||||
{
|
||||
name: '测试',
|
||||
value: 3000,
|
||||
},
|
||||
{
|
||||
name: '后端',
|
||||
value: 8000,
|
||||
},
|
||||
{
|
||||
name: '软件开发',
|
||||
value: 6000,
|
||||
},
|
||||
{
|
||||
name: '程序员',
|
||||
value: 4000,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export const ringOptions = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
},
|
||||
legend: {
|
||||
top: '5%',
|
||||
left: 'center',
|
||||
},
|
||||
|
||||
series: [
|
||||
{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2,
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: 'center',
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 40,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data: [
|
||||
{ value: 1048, name: 'Search Engine' },
|
||||
{ value: 735, name: 'Direct' },
|
||||
{ value: 580, name: 'Email' },
|
||||
{ value: 484, name: 'Union Ads' },
|
||||
{ value: 300, name: 'Video Ads' },
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export const dashOpt1 = {
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
},
|
||||
grid: {
|
||||
top: '2%',
|
||||
left: '2%',
|
||||
right: '3%',
|
||||
bottom: '2%',
|
||||
containLabel: true,
|
||||
},
|
||||
color: ['#009688', '#f44336'],
|
||||
series: [
|
||||
{
|
||||
type: 'line',
|
||||
areaStyle: {
|
||||
color: new graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(0, 150, 136,0.8)',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(0, 150, 136,0.2)',
|
||||
},
|
||||
]),
|
||||
},
|
||||
smooth: true,
|
||||
data: [120, 132, 301, 134, 90, 230, 210],
|
||||
},
|
||||
{
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
data: [220, 122, 191, 234, 190, 130, 310],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export const dashOpt2 = {
|
||||
legend: {
|
||||
bottom: '1%',
|
||||
left: 'center',
|
||||
},
|
||||
color: ['#3f51b5', '#009688', '#f44336', '#00bcd4', '#1ABC9C'],
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
radius: ['40%', '70%'],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderColor: '#fff',
|
||||
borderWidth: 2,
|
||||
},
|
||||
data: [
|
||||
{ value: 1048, name: '数码' },
|
||||
{ value: 735, name: '食品' },
|
||||
{ value: 580, name: '母婴' },
|
||||
{ value: 484, name: '家电' },
|
||||
{ value: 300, name: '运动' },
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
export const mapOptions = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
},
|
||||
geo: {
|
||||
map: 'china',
|
||||
roam: false,
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
visualMap: {
|
||||
show: false,
|
||||
min: 0,
|
||||
max: 100,
|
||||
realtime: false,
|
||||
calculable: false,
|
||||
inRange: {
|
||||
color: ['#d2e0f5', '#71A9FF'],
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
geoIndex: 0,
|
||||
name: '地域分布',
|
||||
type: 'map',
|
||||
coordinateSystem: 'geo',
|
||||
map: 'china',
|
||||
data: [
|
||||
{ name: '北京', value: 100 },
|
||||
{ name: '上海', value: 100 },
|
||||
{ name: '广东', value: 100 },
|
||||
{ name: '浙江', value: 90 },
|
||||
{ name: '江西', value: 80 },
|
||||
{ name: '山东', value: 70 },
|
||||
{ name: '广西', value: 60 },
|
||||
{ name: '河南', value: 50 },
|
||||
{ name: '河南', value: 40 },
|
||||
{ name: '青海', value: 70 },
|
||||
{ name: '河南', value: 30 },
|
||||
{ name: '黑龙江', value: 20 },
|
||||
{ name: '新疆', value: 20 },
|
||||
{ name: '云南', value: 20 },
|
||||
{ name: '甘肃', value: 20 },
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
|
|
@ -0,0 +1,129 @@
|
|||
<template>
|
||||
<div class="container">
|
||||
<div class="plugins-tips">
|
||||
vue-schart：vue.js封装sChart.js的图表组件。 访问地址：
|
||||
<a href="https://github.com/lin-xin/vue-schart" target="_blank">vue-schart</a>
|
||||
</div>
|
||||
<el-card class="mgb20" shadow="hover">
|
||||
<template #header>
|
||||
<div class="content-title">柱状图</div>
|
||||
</template>
|
||||
<schart class="schart" canvasId="bar" :options="options1"></schart>
|
||||
</el-card>
|
||||
<el-card class="mgb20" shadow="hover">
|
||||
<template #header>
|
||||
<div class="content-title">折线图</div>
|
||||
</template>
|
||||
<schart class="schart" canvasId="line" :options="options2"></schart>
|
||||
</el-card>
|
||||
<el-card class="mgb20" shadow="hover">
|
||||
<template #header>
|
||||
<div class="content-title">饼状图</div>
|
||||
</template>
|
||||
<schart class="schart" canvasId="pie" :options="options3"></schart>
|
||||
</el-card>
|
||||
<el-card class="mgb20" shadow="hover">
|
||||
<template #header>
|
||||
<div class="content-title">环形图</div>
|
||||
</template>
|
||||
<schart class="schart" canvasId="ring" :options="options4"></schart>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="schart">
|
||||
import Schart from 'vue-schart';
|
||||
|
||||
const options1 = {
|
||||
type: 'bar',
|
||||
title: {
|
||||
text: '最近一周各品类销售图'
|
||||
},
|
||||
colorList: ["#3f51b5", "#009688", "#f44336", "#00bcd4", "#1ABC9C"],
|
||||
labels: ['周一', '周二', '周三', '周四', '周五'],
|
||||
datasets: [
|
||||
{
|
||||
label: '家电',
|
||||
// fillColor: 'rgba(241, 49, 74, 0.5)',
|
||||
data: [234, 278, 270, 190, 230]
|
||||
},
|
||||
{
|
||||
label: '百货',
|
||||
data: [164, 178, 190, 135, 160]
|
||||
},
|
||||
{
|
||||
label: '食品',
|
||||
data: [144, 198, 150, 235, 120]
|
||||
}
|
||||
]
|
||||
};
|
||||
const options2 = {
|
||||
type: 'line',
|
||||
title: {
|
||||
text: '最近几个月各品类销售趋势图'
|
||||
},
|
||||
colorList: ["#3f51b5", "#009688", "#f44336", "#00bcd4", "#1ABC9C"],
|
||||
labels: ['6月', '7月', '8月', '9月', '10月'],
|
||||
datasets: [
|
||||
{
|
||||
label: '家电',
|
||||
data: [234, 278, 270, 190, 230]
|
||||
},
|
||||
{
|
||||
label: '百货',
|
||||
data: [164, 178, 150, 135, 160]
|
||||
},
|
||||
{
|
||||
label: '食品',
|
||||
data: [114, 138, 200, 235, 190]
|
||||
}
|
||||
]
|
||||
};
|
||||
const options3 = {
|
||||
type: 'pie',
|
||||
title: {
|
||||
text: '服装品类销售饼状图'
|
||||
},
|
||||
legend: {
|
||||
position: 'left'
|
||||
},
|
||||
colorList: ["#2196f3", '#673ab7', "#009688", "#1ABC9C", "#3f51b5", "#f44336", "#00bcd4"],
|
||||
labels: ['T恤', '牛仔裤', '连衣裙', '毛衣', '七分裤', '短裙', '羽绒服'],
|
||||
datasets: [
|
||||
{
|
||||
data: [334, 278, 190, 235, 260, 200, 141]
|
||||
}
|
||||
]
|
||||
};
|
||||
const options4 = {
|
||||
type: 'ring',
|
||||
title: {
|
||||
text: '环形三等分'
|
||||
},
|
||||
showValue: false,
|
||||
legend: {
|
||||
position: 'bottom',
|
||||
bottom: 40
|
||||
},
|
||||
colorList: ["#3f51b5", "#009688", "#f44336", "#00bcd4", "#1ABC9C"],
|
||||
labels: ['vue', 'react', 'angular'],
|
||||
datasets: [
|
||||
{
|
||||
data: [500, 500, 500]
|
||||
}
|
||||
]
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.schart {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.content-title {
|
||||
font-weight: 400;
|
||||
font-size: 22px;
|
||||
color: #1f2f3d;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,357 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-row :gutter="20" class="mgb20">
|
||||
<el-col :span="6">
|
||||
<el-card shadow="hover" body-class="card-body">
|
||||
<el-icon class="card-icon bg1">
|
||||
<User />
|
||||
</el-icon>
|
||||
<div class="card-content">
|
||||
<countup class="card-num color1" :end="6666" />
|
||||
<div>用户访问量</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-card shadow="hover" body-class="card-body">
|
||||
<el-icon class="card-icon bg2">
|
||||
<ChatDotRound />
|
||||
</el-icon>
|
||||
<div class="card-content">
|
||||
<countup class="card-num color2" :end="168" />
|
||||
<div>系统消息</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-card shadow="hover" body-class="card-body">
|
||||
<el-icon class="card-icon bg3">
|
||||
<Goods />
|
||||
</el-icon>
|
||||
<div class="card-content">
|
||||
<countup class="card-num color3" :end="8888" />
|
||||
<div>商品数量</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-card shadow="hover" body-class="card-body">
|
||||
<el-icon class="card-icon bg4">
|
||||
<ShoppingCartFull />
|
||||
</el-icon>
|
||||
<div class="card-content">
|
||||
<countup class="card-num color4" :end="568" />
|
||||
<div>今日订单量</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20" class="mgb20">
|
||||
<el-col :span="18">
|
||||
<el-card shadow="hover">
|
||||
<div class="card-header">
|
||||
<p class="card-header-title">订单动态</p>
|
||||
<p class="card-header-desc">最近一周订单状态，包括订单成交量和订单退货量</p>
|
||||
</div>
|
||||
<v-chart class="chart" :option="dashOpt1" />
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-card shadow="hover">
|
||||
<div class="card-header">
|
||||
<p class="card-header-title">品类分布</p>
|
||||
<p class="card-header-desc">最近一个月销售商品的品类情况</p>
|
||||
</div>
|
||||
<v-chart class="chart" :option="dashOpt2" />
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="7">
|
||||
<el-card shadow="hover" :body-style="{ height: '400px' }">
|
||||
<div class="card-header">
|
||||
<p class="card-header-title">时间线</p>
|
||||
<p class="card-header-desc">最新的销售动态和活动信息</p>
|
||||
</div>
|
||||
<el-timeline>
|
||||
<el-timeline-item v-for="(activity, index) in activities" :key="index" :color="activity.color">
|
||||
<div class="timeline-item">
|
||||
<div>
|
||||
<p>{{ activity.content }}</p>
|
||||
<p class="timeline-desc">{{ activity.description }}</p>
|
||||
</div>
|
||||
<div class="timeline-time">{{ activity.timestamp }}</div>
|
||||
</div>
|
||||
</el-timeline-item>
|
||||
</el-timeline>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="10">
|
||||
<el-card shadow="hover" :body-style="{ height: '400px' }">
|
||||
<div class="card-header">
|
||||
<p class="card-header-title">渠道统计</p>
|
||||
<p class="card-header-desc">最近一个月的订单来源统计</p>
|
||||
</div>
|
||||
<v-chart class="map-chart" :option="mapOptions" />
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="7">
|
||||
<el-card shadow="hover" :body-style="{ height: '400px' }">
|
||||
<div class="card-header">
|
||||
<p class="card-header-title">排行榜</p>
|
||||
<p class="card-header-desc">销售商品的热门榜单Top5</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="rank-item" v-for="(rank, index) in ranks">
|
||||
<div class="rank-item-avatar">{{ index + 1 }}</div>
|
||||
<div class="rank-item-content">
|
||||
<div class="rank-item-top">
|
||||
<div class="rank-item-title">{{ rank.title }}</div>
|
||||
<div class="rank-item-desc">销量：{{ rank.value }}</div>
|
||||
</div>
|
||||
<el-progress
|
||||
:show-text="false"
|
||||
striped
|
||||
:stroke-width="10"
|
||||
:percentage="rank.percent"
|
||||
:color="rank.color"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="dashboard">
|
||||
import countup from '@/components/countup.vue';
|
||||
import { use, registerMap } from 'echarts/core';
|
||||
import { BarChart, LineChart, PieChart, MapChart } from 'echarts/charts';
|
||||
import {
|
||||
GridComponent,
|
||||
TooltipComponent,
|
||||
LegendComponent,
|
||||
TitleComponent,
|
||||
VisualMapComponent,
|
||||
} from 'echarts/components';
|
||||
import { CanvasRenderer } from 'echarts/renderers';
|
||||
import VChart from 'vue-echarts';
|
||||
import { dashOpt1, dashOpt2, mapOptions } from './chart/options';
|
||||
import chinaMap from '@/utils/china';
|
||||
use([
|
||||
CanvasRenderer,
|
||||
BarChart,
|
||||
GridComponent,
|
||||
LineChart,
|
||||
PieChart,
|
||||
TooltipComponent,
|
||||
LegendComponent,
|
||||
TitleComponent,
|
||||
VisualMapComponent,
|
||||
MapChart,
|
||||
]);
|
||||
registerMap('china', chinaMap);
|
||||
const activities = [
|
||||
{
|
||||
content: '收藏商品',
|
||||
description: 'xxx收藏了你的商品，就是不买',
|
||||
timestamp: '30分钟前',
|
||||
color: '#00bcd4',
|
||||
},
|
||||
{
|
||||
content: '用户评价',
|
||||
description: 'xxx给了某某商品一个差评，吐血啊',
|
||||
timestamp: '55分钟前',
|
||||
color: '#1ABC9C',
|
||||
},
|
||||
{
|
||||
content: '订单提交',
|
||||
description: 'xxx提交了订单，快去收钱吧',
|
||||
timestamp: '1小时前',
|
||||
color: '#3f51b5',
|
||||
},
|
||||
{
|
||||
content: '退款申请',
|
||||
description: 'xxx申请了仅退款，又要亏钱了',
|
||||
timestamp: '15小时前',
|
||||
color: '#f44336',
|
||||
},
|
||||
{
|
||||
content: '商品上架',
|
||||
description: '运营专员瞒着你上架了一辆飞机',
|
||||
timestamp: '1天前',
|
||||
color: '#009688',
|
||||
},
|
||||
];
|
||||
|
||||
const ranks = [
|
||||
{
|
||||
title: '手机',
|
||||
value: 10000,
|
||||
percent: 80,
|
||||
color: '#f25e43',
|
||||
},
|
||||
{
|
||||
title: '电脑',
|
||||
value: 8000,
|
||||
percent: 70,
|
||||
color: '#00bcd4',
|
||||
},
|
||||
{
|
||||
title: '相机',
|
||||
value: 6000,
|
||||
percent: 60,
|
||||
color: '#64d572',
|
||||
},
|
||||
{
|
||||
title: '衣服',
|
||||
value: 5000,
|
||||
percent: 55,
|
||||
color: '#e9a745',
|
||||
},
|
||||
{
|
||||
title: '书籍',
|
||||
value: 4000,
|
||||
percent: 50,
|
||||
color: '#009688',
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.card-body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100px;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
<style scoped>
|
||||
.card-content {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.card-num {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
font-size: 50px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
text-align: center;
|
||||
line-height: 100px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.bg1 {
|
||||
background: #2d8cf0;
|
||||
}
|
||||
|
||||
.bg2 {
|
||||
background: #64d572;
|
||||
}
|
||||
|
||||
.bg3 {
|
||||
background: #f25e43;
|
||||
}
|
||||
|
||||
.bg4 {
|
||||
background: #e9a745;
|
||||
}
|
||||
|
||||
.color1 {
|
||||
color: #2d8cf0;
|
||||
}
|
||||
|
||||
.color2 {
|
||||
color: #64d572;
|
||||
}
|
||||
|
||||
.color3 {
|
||||
color: #f25e43;
|
||||
}
|
||||
|
||||
.color4 {
|
||||
color: #e9a745;
|
||||
}
|
||||
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
padding-left: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.card-header-title {
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.card-header-desc {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.timeline-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 16px;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.timeline-time,
|
||||
.timeline-desc {
|
||||
font-size: 12px;
|
||||
color: #787878;
|
||||
}
|
||||
|
||||
.rank-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.rank-item-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
background: #f2f2f2;
|
||||
text-align: center;
|
||||
line-height: 40px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.rank-item-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.rank-item-top {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
color: #343434;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.rank-item-desc {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
}
|
||||
.map-chart {
|
||||
width: 100%;
|
||||
height: 350px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
<template>
|
||||
<div class="container">
|
||||
<el-calendar v-model="value">
|
||||
<template #date-cell="{ data }">
|
||||
<div>{{ data.date.getDate() }}</div>
|
||||
<div class="notes-container" v-if="notes[data.day.toString()]">
|
||||
<div class="notes" v-for="note in notes[data.day.toString()]">
|
||||
<span :class="note.status === 1 ? 'text-success' : 'text-danger'"></span>
|
||||
<div class="note-title">{{ note.title }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-calendar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const today = new Date();
|
||||
const yesterday = new Date(today.getTime() - 24 * 60 * 60 * 1000);
|
||||
const value = ref(today);
|
||||
|
||||
const todayDate = today.toISOString().slice(0, 10);
|
||||
const yesterdayDate = yesterday.toISOString().slice(0, 10);
|
||||
|
||||
const notes: any = {
|
||||
[todayDate]: [
|
||||
{ title: '吃饭', status: 1 },
|
||||
{ title: '睡觉', status: 0 },
|
||||
{ title: '吃饭', status: 1 },
|
||||
{ title: '睡觉', status: 0 },
|
||||
{ title: '吃饭', status: 1 },
|
||||
{ title: '睡觉', status: 0 },
|
||||
],
|
||||
[yesterdayDate]: [{ title: '参加会议', status: 0 }],
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.notes-container {
|
||||
height: 60px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.notes-container::-webkit-scrollbar {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.notes {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.notes:hover {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.note-title {
|
||||
flex: 1;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.notes span {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.text-success {
|
||||
background-color: #5cb85c;
|
||||
}
|
||||
|
||||
.text-danger {
|
||||
background-color: #d9534f;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-card class="mgb20">
|
||||
<template #header>基础用法</template>
|
||||
<el-carousel height="400px">
|
||||
<el-carousel-item v-for="item in 4" :key="item">
|
||||
<h3>{{ item }}</h3>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</el-card>
|
||||
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-card class="mgb20">
|
||||
<template #header>轮播图</template>
|
||||
<el-carousel height="300px">
|
||||
<el-carousel-item v-for="item in imgs" :key="item">
|
||||
<el-image class="carousel-img" :src="item" fit="cover" />
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-card class="mgb20">
|
||||
<template #header>卡片模式</template>
|
||||
<el-carousel height="300px" type="card">
|
||||
<el-carousel-item v-for="item in imgs" :key="item">
|
||||
<el-image class="carousel-img" :src="item" fit="cover" />
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
const imgs = [
|
||||
'https://cdn.pixabay.com/photo/2017/08/07/08/23/sea-2601374_640.jpg',
|
||||
'https://cdn.pixabay.com/photo/2020/02/11/10/24/lake-4839058_640.jpg',
|
||||
'https://cdn.pixabay.com/photo/2024/02/21/08/06/coast-8587004_640.jpg',
|
||||
'https://cdn.pixabay.com/photo/2023/07/29/10/21/grasshopper-8156626_640.jpg',
|
||||
];
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.el-carousel__item h3 {
|
||||
color: #475669;
|
||||
line-height: 400px;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.el-carousel__item:nth-child(2n) {
|
||||
background-color: #99a9bf;
|
||||
}
|
||||
|
||||
.el-carousel__item:nth-child(2n + 1) {
|
||||
background-color: #d3dce6;
|
||||
}
|
||||
|
||||
.carousel-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,189 @@
|
|||
<template>
|
||||
<div class="container">
|
||||
<el-radio-group class="mgb20" v-model="labelPosition">
|
||||
<el-radio-button value="left">Left</el-radio-button>
|
||||
<el-radio-button value="right">Right</el-radio-button>
|
||||
<el-radio-button value="top">Top</el-radio-button>
|
||||
</el-radio-group>
|
||||
<el-form ref="formRef" :rules="rules" :model="form" label-width="120px" :label-position="labelPosition">
|
||||
<el-row :gutter="50">
|
||||
<el-col :span="10">
|
||||
<el-form-item label="文本框" prop="name">
|
||||
<el-input v-model="form.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="数字框" prop="num">
|
||||
<el-input-number v-model="form.num" :min="1" :max="10" />
|
||||
</el-form-item>
|
||||
<el-form-item label="日期选择" prop="date">
|
||||
<el-date-picker type="date" placeholder="选择日期" v-model="form.date"></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="时间选择" prop="time">
|
||||
<el-time-picker placeholder="选择时间" v-model="form.time">
|
||||
</el-time-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="选择器" prop="region">
|
||||
<el-select v-model="form.region" placeholder="请选择">
|
||||
<el-option key="小明" label="小明" value="小明"></el-option>
|
||||
<el-option key="小红" label="小红" value="小红"></el-option>
|
||||
<el-option key="小白" label="小白" value="小白"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="城市级联" prop="options">
|
||||
<el-cascader :options="options" v-model="form.options"></el-cascader>
|
||||
</el-form-item>
|
||||
<el-form-item label="文本框" prop="desc">
|
||||
<el-input type="textarea" rows="5" v-model="form.desc"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="评分" prop="rate">
|
||||
<el-rate v-model="form.rate" allow-half />
|
||||
</el-form-item>
|
||||
<el-form-item label="滑块" prop="num">
|
||||
<el-slider v-model="form.num" :step="1" show-stops :max="10" />
|
||||
</el-form-item>
|
||||
<el-form-item label="开关" prop="delivery">
|
||||
<el-switch v-model="form.delivery"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="颜色选择" prop="color">
|
||||
<el-color-picker v-model="form.color" />
|
||||
</el-form-item>
|
||||
<el-form-item label="多选框" prop="type">
|
||||
<el-checkbox-group v-model="form.type">
|
||||
<el-checkbox label="小明" value="小明" name="type"></el-checkbox>
|
||||
<el-checkbox label="小红" value="小红" name="type"></el-checkbox>
|
||||
<el-checkbox label="小白" value="小白" name="type"></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="单选框" prop="resource">
|
||||
<el-radio-group v-model="form.resource">
|
||||
<el-radio label="小明" value="小明"></el-radio>
|
||||
<el-radio label="小红" value="小红"></el-radio>
|
||||
<el-radio label="小白" value="小白"></el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="穿梭框" prop="transfer">
|
||||
<el-transfer v-model="form.transfer" :data="transferData" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24">
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit(formRef)">表单提交</el-button>
|
||||
<el-button @click="onReset(formRef)">重置表单</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="forms">
|
||||
import { reactive, ref } from 'vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import type { FormInstance, FormProps, FormRules } from 'element-plus';
|
||||
const labelPosition = ref<FormProps['labelPosition']>('right')
|
||||
const options = [
|
||||
{
|
||||
value: 'guangdong',
|
||||
label: '广东省',
|
||||
children: [
|
||||
{
|
||||
value: 'guangzhou',
|
||||
label: '广州市',
|
||||
children: [
|
||||
{
|
||||
value: 'tianhe',
|
||||
label: '天河区',
|
||||
},
|
||||
{
|
||||
value: 'haizhu',
|
||||
label: '海珠区',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: 'dongguan',
|
||||
label: '东莞市',
|
||||
children: [
|
||||
{
|
||||
value: 'changan',
|
||||
label: '长安镇',
|
||||
},
|
||||
{
|
||||
value: 'humen',
|
||||
label: '虎门镇',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
value: 'hunan',
|
||||
label: '湖南省',
|
||||
children: [
|
||||
{
|
||||
value: 'changsha',
|
||||
label: '长沙市',
|
||||
children: [
|
||||
{
|
||||
value: 'yuelu',
|
||||
label: '岳麓区',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
const rules: FormRules = {
|
||||
name: [{ required: true, message: '请输入表单名称', trigger: 'blur' }],
|
||||
};
|
||||
const formRef = ref<FormInstance>();
|
||||
const form = reactive({
|
||||
name: '',
|
||||
region: '',
|
||||
date: '',
|
||||
time: '',
|
||||
delivery: true,
|
||||
type: ['小明'],
|
||||
resource: '小红',
|
||||
desc: '',
|
||||
options: [],
|
||||
color: '',
|
||||
num: 1,
|
||||
rate: 0,
|
||||
transfer: [],
|
||||
|
||||
});
|
||||
const generateData = () => {
|
||||
const data = []
|
||||
for (let i = 1; i <= 15; i++) {
|
||||
data.push({
|
||||
key: i,
|
||||
label: `Option ${i}`,
|
||||
disabled: i % 4 === 0,
|
||||
})
|
||||
}
|
||||
return data
|
||||
}
|
||||
|
||||
const transferData = ref(generateData())
|
||||
// 提交
|
||||
const onSubmit = (formEl: FormInstance | undefined) => {
|
||||
// 表单校验
|
||||
if (!formEl) return;
|
||||
formEl.validate((valid) => {
|
||||
if (valid) {
|
||||
console.log(form);
|
||||
ElMessage.success('提交成功！');
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
});
|
||||
};
|
||||
// 重置
|
||||
const onReset = (formEl: FormInstance | undefined) => {
|
||||
if (!formEl) return;
|
||||
formEl.resetFields();
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,340 @@
|
|||
<template>
|
||||
<div>
|
||||
|
||||
|
||||
<el-card class="mgb20" shadow="hover">
|
||||
<template #header>基础用法</template>
|
||||
<el-row>
|
||||
<el-col :span="6" style="text-align: center">
|
||||
<el-statistic title="Daily active users" :value="268500" />
|
||||
</el-col>
|
||||
<el-col :span="6" style="text-align: center">
|
||||
<el-statistic :value="138">
|
||||
<template #title>
|
||||
<div style="display: inline-flex; align-items: center">
|
||||
Ratio of men to women
|
||||
</div>
|
||||
</template>
|
||||
<template #suffix>/100</template>
|
||||
</el-statistic>
|
||||
</el-col>
|
||||
<el-col :span="6" style="text-align: center">
|
||||
<el-statistic title="数字滚动" :value="outputValue" />
|
||||
</el-col>
|
||||
<el-col :span="6" style="text-align: center">
|
||||
<el-countdown title="倒计时" :value="value" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<el-card class="mgb20" shadow="hover">
|
||||
<template #header>CountUp.js</template>
|
||||
<div class="plugins-tips">
|
||||
countup.js：用于快速创建以更有趣的方式显示数字数据的动画。 访问地址：
|
||||
<a href="https://github.com/inorganik/countUp.js" target="_blank">countUp.js</a>
|
||||
</div>
|
||||
<el-row>
|
||||
<el-col :span="8" style="text-align: center">
|
||||
<p>基础用法</p>
|
||||
<countup class="countup" :end="6666" />
|
||||
</el-col>
|
||||
<el-col :span="8" style="text-align: center">
|
||||
<p>具体配置</p>
|
||||
<countup class="countup" :end="8888.5" :options="options" />
|
||||
</el-col>
|
||||
<el-col :span="8" style="text-align: center">
|
||||
<p>更新数值</p>
|
||||
<countup class="countup" :end="value1" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
<el-card class="mgb20" shadow="never">
|
||||
<template #header>统计卡片</template>
|
||||
|
||||
<el-row :gutter="20" class="mgb20">
|
||||
<el-col :span="6">
|
||||
<el-card shadow="hover" body-class="card-body">
|
||||
<el-icon class="card-icon color1">
|
||||
<User />
|
||||
</el-icon>
|
||||
<div class="card-content text-right">
|
||||
<el-statistic title="日活跃用户量" :value="268500" />
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-card shadow="hover" body-class="card-body">
|
||||
<el-icon class="card-icon color2">
|
||||
<ChatDotRound />
|
||||
</el-icon>
|
||||
<div class="card-content text-right">
|
||||
<el-statistic title="系统消息" :value="16800" />
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-card shadow="hover" body-class="card-body">
|
||||
<el-icon class="card-icon color3">
|
||||
<Goods />
|
||||
</el-icon>
|
||||
<div class="card-content text-right">
|
||||
<el-statistic title="商品数量" :value="8888" />
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-card shadow="hover" body-class="card-body">
|
||||
<el-icon class="card-icon color4">
|
||||
<ShoppingCartFull />
|
||||
</el-icon>
|
||||
<div class="card-content text-right">
|
||||
<el-statistic title="今日订单量" :value="56888" />
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20" class="mgb20">
|
||||
<el-col :span="6">
|
||||
<el-card shadow="hover" body-class="card-body">
|
||||
<div class="card-content text-left">
|
||||
<el-statistic :value-style="{ color: '#2d8cf0' }" title="日活跃用户量" :value="268500" />
|
||||
</div>
|
||||
<el-icon class="card-icon color1">
|
||||
<User />
|
||||
</el-icon>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-card shadow="hover" body-class="card-body">
|
||||
<div class="card-content text-left">
|
||||
<el-statistic :value-style="{ color: '#64d572' }" title="系统消息" :value="16800" />
|
||||
</div>
|
||||
<el-icon class="card-icon color2">
|
||||
<ChatDotRound />
|
||||
</el-icon>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-card shadow="hover" body-class="card-body">
|
||||
<div class="card-content text-left">
|
||||
<el-statistic :value-style="{ color: '#f25e43' }" title="商品数量" :value="8888" />
|
||||
</div>
|
||||
<el-icon class="card-icon color3">
|
||||
<Goods />
|
||||
</el-icon>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-card shadow="hover" body-class="card-body">
|
||||
<div class="card-content text-left">
|
||||
<el-statistic :value-style="{ color: '#e9a745' }" title="今日订单量" :value="56888" />
|
||||
</div>
|
||||
<el-icon class="card-icon color4">
|
||||
<ShoppingCartFull />
|
||||
</el-icon>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20" class="mgb20">
|
||||
<el-col :span="6">
|
||||
<el-card shadow="hover" body-class="card-body">
|
||||
<el-icon class="card-icon bg1">
|
||||
<User />
|
||||
</el-icon>
|
||||
<div class="card-content">
|
||||
<countup class="card-num color1" :end="6666" />
|
||||
<div>用户访问量</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-card shadow="hover" body-class="card-body">
|
||||
<el-icon class="card-icon bg2">
|
||||
<ChatDotRound />
|
||||
</el-icon>
|
||||
<div class="card-content">
|
||||
<countup class="card-num color2" :end="168" />
|
||||
<div>系统消息</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-card shadow="hover" body-class="card-body">
|
||||
<el-icon class="card-icon bg3">
|
||||
<Goods />
|
||||
</el-icon>
|
||||
<div class="card-content">
|
||||
<countup class="card-num color3" :end="8888" />
|
||||
<div>商品数量</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-card shadow="hover" body-class="card-body">
|
||||
<el-icon class="card-icon bg4">
|
||||
<ShoppingCartFull />
|
||||
</el-icon>
|
||||
<div class="card-content">
|
||||
<countup class="card-num color4" :end="568" />
|
||||
<div>今日订单量</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20" class="mgb20">
|
||||
<el-col :span="6">
|
||||
<el-card shadow="hover" body-class="card-body bg1">
|
||||
<el-icon class="card-icon ">
|
||||
<User />
|
||||
</el-icon>
|
||||
<div class="card-content color0">
|
||||
<countup class="card-num" :end="6666" />
|
||||
<div>用户访问量</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-card shadow="hover" body-class="card-body bg2">
|
||||
<el-icon class="card-icon">
|
||||
<ChatDotRound />
|
||||
</el-icon>
|
||||
<div class="card-content color0">
|
||||
<countup class="card-num" :end="168" />
|
||||
<div>系统消息</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-card shadow="hover" body-class="card-body bg3">
|
||||
<el-icon class="card-icon">
|
||||
<Goods />
|
||||
</el-icon>
|
||||
<div class="card-content color0">
|
||||
<countup class="card-num " :end="8888" />
|
||||
<div>商品数量</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-card shadow="hover" body-class="card-body bg4">
|
||||
<el-icon class="card-icon">
|
||||
<ShoppingCartFull />
|
||||
</el-icon>
|
||||
<div class="card-content color0">
|
||||
<countup class="card-num " :end="568" />
|
||||
<div>今日订单量</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
import { useTransition } from '@vueuse/core'
|
||||
import countup from '@/components/countup.vue';
|
||||
|
||||
const source = ref(0)
|
||||
const outputValue = useTransition(source, {
|
||||
duration: 1500,
|
||||
})
|
||||
source.value = 172000
|
||||
|
||||
const value = ref(Date.now() + 1000 * 60 * 60 * 7)
|
||||
const value1 = ref(1000);
|
||||
setTimeout(() => {
|
||||
value1.value = 8000;
|
||||
}, 5000);
|
||||
const options = {
|
||||
startVal: 1000,
|
||||
decimalPlaces: 2,
|
||||
duration: 5,
|
||||
useGrouping: false,
|
||||
prefix: '$',
|
||||
separator: ',',
|
||||
decimal: '.',
|
||||
suffix: '',
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.card-body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.bg1 {
|
||||
background: #2d8cf0;
|
||||
}
|
||||
|
||||
.bg2 {
|
||||
background: #64d572;
|
||||
}
|
||||
|
||||
.bg3 {
|
||||
background: #f25e43;
|
||||
}
|
||||
|
||||
.bg4 {
|
||||
background: #e9a745;
|
||||
}
|
||||
</style>
|
||||
<style scoped>
|
||||
.countup {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.card-num {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.card-icon {
|
||||
font-size: 50px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
text-align: center;
|
||||
line-height: 100px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
|
||||
.color0 {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.color1 {
|
||||
color: #2d8cf0;
|
||||
}
|
||||
|
||||
.color2 {
|
||||
color: #64d572;
|
||||
}
|
||||
|
||||
.color3 {
|
||||
color: #f25e43;
|
||||
}
|
||||
|
||||
.color4 {
|
||||
color: #e9a745;
|
||||
}
|
||||
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.text-left {
|
||||
text-align: left;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
<template>
|
||||
<div class="container">
|
||||
<div class="step-div" v-if="step === 0">
|
||||
<p>输入注册时的邮箱，我们会发送验证码到您的邮箱</p>
|
||||
<el-input placeholder="请输入邮箱"></el-input>
|
||||
<el-button class="step-btn" type="primary" @click="step++">下一步</el-button>
|
||||
</div>
|
||||
<div class="step-div" v-else-if="step === 1">
|
||||
<p>验证码已发送至您的邮箱，请输入验证码</p>
|
||||
<el-input placeholder="请输入验证码"></el-input>
|
||||
<el-button class="step-btn" type="primary" @click="step++">下一步</el-button>
|
||||
</div>
|
||||
|
||||
<div class="step-div" v-else-if="step === 2">
|
||||
<p>请输入6位以上密码</p>
|
||||
<el-input placeholder="请输入新密码"></el-input>
|
||||
<el-button class="step-btn" type="primary" @click="step++">保存</el-button>
|
||||
</div>
|
||||
<div v-else>
|
||||
<el-result icon="success" title="保存成功" sub-title="请退出后重新登录"></el-result>
|
||||
</div>
|
||||
<el-steps class="step-style" :active="step" align-center finish-status="success">
|
||||
<el-step title="Step 1" description="填写邮箱" />
|
||||
<el-step title="Step 2" description="填写验证码" />
|
||||
<el-step title="Step 3" description="修改密码" />
|
||||
</el-steps>
|
||||
<el-steps class="step-style" :active="step" finish-status="success" simple>
|
||||
<el-step title="填写邮箱" />
|
||||
<el-step title="填写验证码" />
|
||||
<el-step title="修改密码" />
|
||||
</el-steps>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
const step = ref(0)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.step-div {
|
||||
max-width: 500px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.step-div p {
|
||||
margin-bottom: 20px;
|
||||
color: #787878;
|
||||
}
|
||||
|
||||
.step-btn {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
.step-style {
|
||||
max-width: 800px;
|
||||
margin: 40px auto;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,116 @@
|
|||
<template>
|
||||
<el-tabs v-model="message" type="card">
|
||||
<el-tab-pane :label="`未读消息(${state.unread.length})`" name="first">
|
||||
<el-table :data="state.unread" :show-header="false" style="width: 100%">
|
||||
<el-table-column>
|
||||
<template #default="scope">
|
||||
<span class="message-title">{{ scope.row.title }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="date" width="180"></el-table-column>
|
||||
<el-table-column width="120">
|
||||
<template #default="scope">
|
||||
<el-button size="small" @click="handleRead(scope.$index)">标为已读</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="handle-row">
|
||||
<el-button type="primary">全部标为已读</el-button>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="`已读消息(${state.read.length})`" name="second">
|
||||
<template v-if="message === 'second'">
|
||||
<el-table :data="state.read" :show-header="false" style="width: 100%">
|
||||
<el-table-column>
|
||||
<template #default="scope">
|
||||
<span class="message-title">{{ scope.row.title }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="date" width="180"></el-table-column>
|
||||
<el-table-column width="120">
|
||||
<template #default="scope">
|
||||
<el-button type="danger" size="small" @click="handleDel(scope.$index)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="handle-row">
|
||||
<el-button type="danger">删除全部</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane :label="`回收站(${state.recycle.length})`" name="third">
|
||||
<template v-if="message === 'third'">
|
||||
<el-table :data="state.recycle" :show-header="false" style="width: 100%">
|
||||
<el-table-column>
|
||||
<template #default="scope">
|
||||
<span class="message-title">{{ scope.row.title }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="date" width="180"></el-table-column>
|
||||
<el-table-column width="120">
|
||||
<template #default="scope">
|
||||
<el-button size="small" @click="handleRestore(scope.$index)">还原</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<div class="handle-row">
|
||||
<el-button type="danger">清空回收站</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="tabs">
|
||||
import { ref, reactive } from 'vue';
|
||||
|
||||
const message = ref('first');
|
||||
const state = reactive({
|
||||
unread: [
|
||||
{
|
||||
date: '2018-04-19 20:00:00',
|
||||
title: '【系统通知】该系统将于今晚凌晨2点到5点进行升级维护'
|
||||
},
|
||||
{
|
||||
date: '2018-04-19 21:00:00',
|
||||
title: '今晚12点整发大红包，先到先得'
|
||||
}
|
||||
],
|
||||
read: [
|
||||
{
|
||||
date: '2018-04-19 20:00:00',
|
||||
title: '【系统通知】该系统将于今晚凌晨2点到5点进行升级维护'
|
||||
}
|
||||
],
|
||||
recycle: [
|
||||
{
|
||||
date: '2018-04-19 20:00:00',
|
||||
title: '【系统通知】该系统将于今晚凌晨2点到5点进行升级维护'
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
const handleRead = (index: number) => {
|
||||
const item = state.unread.splice(index, 1);
|
||||
state.read = item.concat(state.read);
|
||||
};
|
||||
const handleDel = (index: number) => {
|
||||
const item = state.read.splice(index, 1);
|
||||
state.recycle = item.concat(state.recycle);
|
||||
};
|
||||
const handleRestore = (index: number) => {
|
||||
const item = state.recycle.splice(index, 1);
|
||||
state.read = item.concat(state.read);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.message-title {
|
||||
cursor: pointer;
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.handle-row {
|
||||
margin-top: 30px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<template>
|
||||
<div class="container">
|
||||
<el-button type="primary" @click="open = true">开始引导</el-button>
|
||||
|
||||
<el-divider />
|
||||
|
||||
<el-space>
|
||||
<el-button ref="ref1">上传</el-button>
|
||||
<el-button ref="ref2" type="primary">保存</el-button>
|
||||
<el-button ref="ref3" :icon="MoreFilled" />
|
||||
</el-space>
|
||||
|
||||
<el-tour v-model="open">
|
||||
<el-tour-step :target="ref1?.$el" title="上传文件">
|
||||
<img style="width: 120px" src="../../assets/img/img.jpg" alt="tour.png" />
|
||||
<div>点击这里选择文件</div>
|
||||
</el-tour-step>
|
||||
<el-tour-step :target="ref2?.$el" title="保存" description="点击进行上传" />
|
||||
<el-tour-step :target="ref3?.$el" title="更多操作" description="点击查看更多操作" />
|
||||
</el-tour>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { MoreFilled } from '@element-plus/icons-vue'
|
||||
|
||||
const ref1 = ref()
|
||||
const ref2 = ref()
|
||||
const ref3 = ref()
|
||||
|
||||
const open = ref(false)
|
||||
</script>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<template>
|
||||
<div class="container">
|
||||
<div class="content-title">支持拖拽</div>
|
||||
<div class="plugins-tips">
|
||||
Element Plus自带上传组件。 访问地址：
|
||||
<a href="https://element-plus.org/zh-CN/component/upload.html" target="_blank">Element Plus Upload</a>
|
||||
</div>
|
||||
<el-upload class="upload-demo" drag action="http://jsonplaceholder.typicode.com/api/posts/" multiple
|
||||
:on-change="handle">
|
||||
<el-icon class="el-icon--upload"><upload-filled /></el-icon>
|
||||
<div class="el-upload__text">
|
||||
将文件拖到此处，或
|
||||
<em>点击上传</em>
|
||||
</div>
|
||||
</el-upload>
|
||||
|
||||
<div class="content-title">支持裁剪</div>
|
||||
<div class="plugins-tips">
|
||||
vue-cropper：一个简单的vue图片裁剪插件。 访问地址：
|
||||
<a href="https://github.com/xyxiao001/vue-cropper" target="_blank">vue-cropper</a>。 示例请查看
|
||||
<router-link to="/ucenter">个人中心-我的头像</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const handle = (rawFile: any) => {
|
||||
console.log(rawFile);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.content-title {
|
||||
font-weight: 400;
|
||||
line-height: 50px;
|
||||
margin: 10px 0;
|
||||
font-size: 22px;
|
||||
color: #1f2f3d;
|
||||
}
|
||||
|
||||
.upload-demo {
|
||||
width: 360px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
<template>
|
||||
<div class="container">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="18">
|
||||
<el-watermark :content="config.content" :font="config.font" :z-index="config.zIndex"
|
||||
:rotate="config.rotate" :gap="config.gap" :offset="config.offset">
|
||||
<div style="height: 600px" />
|
||||
</el-watermark>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-form class="form" :model="config" label-position="top" label-width="50px">
|
||||
<el-form-item label="Content">
|
||||
<el-input v-model="config.content" />
|
||||
</el-form-item>
|
||||
<el-form-item label="Color">
|
||||
<el-color-picker v-model="config.font.color" show-alpha />
|
||||
</el-form-item>
|
||||
<el-form-item label="FontSize">
|
||||
<el-slider v-model="config.font.fontSize" />
|
||||
</el-form-item>
|
||||
<el-form-item label="zIndex">
|
||||
<el-slider v-model="config.zIndex" />
|
||||
</el-form-item>
|
||||
<el-form-item label="Rotate">
|
||||
<el-slider v-model="config.rotate" :min="-180" :max="180" />
|
||||
</el-form-item>
|
||||
<el-form-item label="Gap">
|
||||
<el-space>
|
||||
<el-input-number v-model="config.gap[0]" controls-position="right" />
|
||||
<el-input-number v-model="config.gap[1]" controls-position="right" />
|
||||
</el-space>
|
||||
</el-form-item>
|
||||
<el-form-item label="Offset">
|
||||
<el-space>
|
||||
<el-input-number v-model="config.offset[0]" placeholder="offsetLeft"
|
||||
controls-position="right" />
|
||||
<el-input-number v-model="config.offset[1]" placeholder="offsetTop"
|
||||
controls-position="right" />
|
||||
</el-space>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive } from 'vue'
|
||||
|
||||
const config = reactive({
|
||||
content: 'vue-manage-system',
|
||||
font: {
|
||||
fontSize: 16,
|
||||
color: 'rgba(0, 0, 0, 0.15)',
|
||||
},
|
||||
zIndex: -1,
|
||||
rotate: -22,
|
||||
gap: [100, 100] as [number, number],
|
||||
offset: [] as unknown as [number, number],
|
||||
})
|
||||
</script>
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<template>
|
||||
<v-header />
|
||||
<v-sidebar />
|
||||
<div class="content-box" :class="{ 'content-collapse': sidebar.collapse }">
|
||||
<v-tabs></v-tabs>
|
||||
<div class="content">
|
||||
<router-view v-slot="{ Component }">
|
||||
<transition name="move" mode="out-in">
|
||||
<keep-alive :include="tabs.nameList">
|
||||
<component :is="Component"></component>
|
||||
</keep-alive>
|
||||
</transition>
|
||||
</router-view>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { useSidebarStore } from '@/store/sidebar';
|
||||
import { useTabsStore } from '@/store/tabs';
|
||||
import vHeader from '@/components/header.vue';
|
||||
import vSidebar from '@/components/sidebar.vue';
|
||||
import vTabs from '@/components/tabs.vue';
|
||||
|
||||
const sidebar = useSidebarStore();
|
||||
const tabs = useTabsStore();
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.content-box {
|
||||
position: absolute;
|
||||
left: 250px;
|
||||
right: 0;
|
||||
top: 70px;
|
||||
bottom: 0;
|
||||
padding-bottom: 30px;
|
||||
-webkit-transition: left 0.3s ease-in-out;
|
||||
transition: left 0.3s ease-in-out;
|
||||
background: #eef0fc;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: auto;
|
||||
height: 100%;
|
||||
padding: 20px;
|
||||
overflow-y: scroll;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.content::-webkit-scrollbar {
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.content-collapse {
|
||||
left: 65px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<template>
|
||||
<div class="error-page">
|
||||
<div class="error-box">
|
||||
<div class="error-code">403</div>
|
||||
<div class="error-desc">啊哦~ 你没有权限访问该页面哦</div>
|
||||
<div class="error-handle">
|
||||
<router-link to="/">
|
||||
<el-button type="primary" size="large">返回首页</el-button>
|
||||
</router-link>
|
||||
<el-button class="error-btn" size="large" @click="goBack">返回上一页</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="403">
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
const router = useRouter();
|
||||
const goBack = () => {
|
||||
router.go(-2);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.error-page {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #eef0fc;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.error-box {
|
||||
width: 400px;
|
||||
background-color: #fff;
|
||||
padding: 80px 50px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.error-code {
|
||||
line-height: 1;
|
||||
font-size: 100px;
|
||||
font-weight: bold;
|
||||
color: var(--el-color-primary);
|
||||
margin-bottom: 20px;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.error-desc {
|
||||
font-size: 20px;
|
||||
color: #777;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.error-handle {
|
||||
margin-top: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.error-btn {
|
||||
margin-left: 100px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
<template>
|
||||
<div class="error-page">
|
||||
<div class="error-box">
|
||||
<div class="error-code">404</div>
|
||||
<div class="error-desc">啊哦~ 你所访问的页面不存在</div>
|
||||
<div class="error-handle">
|
||||
<router-link to="/">
|
||||
<el-button type="primary" size="large">返回首页</el-button>
|
||||
</router-link>
|
||||
<el-button class="error-btn" size="large" @click="goBack">返回上一页</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="404">
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
const router = useRouter();
|
||||
const goBack = () => {
|
||||
router.go(-1);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.error-page {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #eef0fc;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.error-box {
|
||||
width: 400px;
|
||||
background-color: #fff;
|
||||
padding: 80px 50px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.error-code {
|
||||
line-height: 1;
|
||||
font-size: 100px;
|
||||
font-weight: bold;
|
||||
color: var(--el-color-primary);
|
||||
margin-bottom: 20px;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.error-desc {
|
||||
font-size: 20px;
|
||||
color: #777;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
.error-handle {
|
||||
margin-top: 50px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.error-btn {
|
||||
margin-left: 100px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<template>
|
||||
<div class="container">
|
||||
<div class="plugins-tips">
|
||||
wangEditor：轻量级 web 富文本编辑器，配置方便，使用简单。 访问地址：
|
||||
<a href="https://www.wangeditor.com/doc/" target="_blank">wangEditor</a>
|
||||
</div>
|
||||
<div style="border: 1px solid #ccc; margin-bottom: 10px">
|
||||
<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" />
|
||||
<Editor
|
||||
style="height: 500px; overflow-y: hidden"
|
||||
v-model="valueHtml"
|
||||
:defaultConfig="editorConfig"
|
||||
@onCreated="handleCreated"
|
||||
/>
|
||||
</div>
|
||||
<el-button type="primary" @click="syncHTML">提交</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="editor">
|
||||
import '@wangeditor/editor/dist/css/style.css'; // 引入 css
|
||||
import { onBeforeUnmount, ref, reactive, shallowRef, onMounted } from 'vue';
|
||||
import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
|
||||
// 编辑器实例，必须用 shallowRef
|
||||
const editorRef = shallowRef();
|
||||
|
||||
// 内容 HTML
|
||||
const valueHtml = ref('<p>hello</p>');
|
||||
|
||||
// 模拟 ajax 异步获取内容
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>';
|
||||
}, 1500);
|
||||
});
|
||||
|
||||
const toolbarConfig = {};
|
||||
const editorConfig = { placeholder: '请输入内容...' };
|
||||
|
||||
// 组件销毁时，也及时销毁编辑器
|
||||
onBeforeUnmount(() => {
|
||||
const editor = editorRef.value;
|
||||
if (editor == null) return;
|
||||
editor.destroy();
|
||||
});
|
||||
|
||||
const handleCreated = (editor: any) => {
|
||||
editorRef.value = editor; // 记录 editor 实例，重要！
|
||||
};
|
||||
const syncHTML = () => {
|
||||
console.log(valueHtml.value);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
|
|
@ -0,0 +1,257 @@
|
|||
<template>
|
||||
|
||||
<el-tabs type="border-card">
|
||||
<el-tab-pane label="自定义图标">
|
||||
<h2>使用方法</h2>
|
||||
<p style="line-height: 50px">
|
||||
直接通过设置类名为 el-icon-lx-iconName 来使用即可。例如：（共{{ iconList.length }}个图标）
|
||||
</p>
|
||||
<p class="example-p">
|
||||
<i class="el-icon-lx-redpacket_fill" style="font-size: 30px; color: #ff5900"></i>
|
||||
<span><i class="el-icon-lx-redpacket_fill"></i></span>
|
||||
</p>
|
||||
<p class="example-p">
|
||||
<i class="el-icon-lx-weibo" style="font-size: 30px; color: #fd5656"></i>
|
||||
<span><i class="el-icon-lx-weibo"></i></span>
|
||||
</p>
|
||||
<p class="example-p">
|
||||
<i class="el-icon-lx-emojifill" style="font-size: 30px; color: #ffc300"></i>
|
||||
<span><i class="el-icon-lx-emojifill"></i></span>
|
||||
</p>
|
||||
<br />
|
||||
<h2>图标</h2>
|
||||
<div class="search-box">
|
||||
<el-input class="search" size="large" v-model="keyword" clearable placeholder="请输入图标名称"></el-input>
|
||||
</div>
|
||||
<ul>
|
||||
<li class="icon-li" v-for="(item, index) in list" :key="index">
|
||||
<div class="icon-li-content">
|
||||
<i :class="`el-icon-lx-${item}`"></i>
|
||||
<span>{{ item }}</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="Element图标">
|
||||
<el-link type="primary" href="https://element-plus.org/zh-CN/component/icon.html#icon-collection"
|
||||
target="_blank">前往官方文档查看</el-link>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="icon">
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
const iconList: Array<string> = [
|
||||
'attentionforbid',
|
||||
'attentionforbidfill',
|
||||
'attention',
|
||||
'attentionfill',
|
||||
'tag',
|
||||
'tagfill',
|
||||
'people',
|
||||
'peoplefill',
|
||||
'notice',
|
||||
'noticefill',
|
||||
'mobile',
|
||||
'mobilefill',
|
||||
'voice',
|
||||
'voicefill',
|
||||
'unlock',
|
||||
'lock',
|
||||
'home',
|
||||
'homefill',
|
||||
'delete',
|
||||
'deletefill',
|
||||
'notification',
|
||||
'notificationfill',
|
||||
'notificationforbidfill',
|
||||
'like',
|
||||
'likefill',
|
||||
'comment',
|
||||
'commentfill',
|
||||
'camera',
|
||||
'camerafill',
|
||||
'warn',
|
||||
'warnfill',
|
||||
'time',
|
||||
'timefill',
|
||||
'location',
|
||||
'locationfill',
|
||||
'favor',
|
||||
'favorfill',
|
||||
'skin',
|
||||
'skinfill',
|
||||
'news',
|
||||
'newsfill',
|
||||
'record',
|
||||
'recordfill',
|
||||
'emoji',
|
||||
'emojifill',
|
||||
'message',
|
||||
'messagefill',
|
||||
'goods',
|
||||
'goodsfill',
|
||||
'crown',
|
||||
'crownfill',
|
||||
'move',
|
||||
'add',
|
||||
'hot',
|
||||
'hotfill',
|
||||
'service',
|
||||
'servicefill',
|
||||
'present',
|
||||
'presentfill',
|
||||
'pic',
|
||||
'picfill',
|
||||
'rank',
|
||||
'rankfill',
|
||||
'male',
|
||||
'female',
|
||||
'down',
|
||||
'top',
|
||||
'recharge',
|
||||
'rechargefill',
|
||||
'forward',
|
||||
'forwardfill',
|
||||
'info',
|
||||
'infofill',
|
||||
'redpacket',
|
||||
'redpacket_fill',
|
||||
'roundadd',
|
||||
'roundaddfill',
|
||||
'friendadd',
|
||||
'friendaddfill',
|
||||
'cart',
|
||||
'cartfill',
|
||||
'more',
|
||||
'moreandroid',
|
||||
'back',
|
||||
'right',
|
||||
'shop',
|
||||
'shopfill',
|
||||
'question',
|
||||
'questionfill',
|
||||
'roundclose',
|
||||
'roundclosefill',
|
||||
'roundcheck',
|
||||
'roundcheckfill',
|
||||
'global',
|
||||
'mail',
|
||||
'punch',
|
||||
'exit',
|
||||
'upload',
|
||||
'read',
|
||||
'file',
|
||||
'link',
|
||||
'full',
|
||||
'group',
|
||||
'friend',
|
||||
'profile',
|
||||
'addressbook',
|
||||
'calendar',
|
||||
'text',
|
||||
'copy',
|
||||
'share',
|
||||
'wifi',
|
||||
'vipcard',
|
||||
'weibo',
|
||||
'remind',
|
||||
'refresh',
|
||||
'filter',
|
||||
'settings',
|
||||
'scan',
|
||||
'qrcode',
|
||||
'cascades',
|
||||
'apps',
|
||||
'sort',
|
||||
'searchlist',
|
||||
'search',
|
||||
'edit',
|
||||
'apple-line',
|
||||
'baidu-fill',
|
||||
'amazon-fill',
|
||||
'netease-cloud-music-fill',
|
||||
'qq-line',
|
||||
'wechat-fill',
|
||||
'alipay-fill',
|
||||
'android-fill',
|
||||
'android-line',
|
||||
'whatsapp-line',
|
||||
'whatsapp-fill',
|
||||
'bilibili-fill',
|
||||
'chrome-fill',
|
||||
'dingding-fill',
|
||||
'dingding-line',
|
||||
'apple-fill',
|
||||
'github-fill',
|
||||
'qq-fill',
|
||||
'wechat-pay-fill',
|
||||
'windows-line',
|
||||
'windows-fill',
|
||||
'youtube-line',
|
||||
'youtube-fill',
|
||||
'wechat-pay-line',
|
||||
'zhihu-line'
|
||||
];
|
||||
|
||||
const keyword = ref('');
|
||||
const list = computed(() => {
|
||||
return iconList.filter(item => {
|
||||
return item.indexOf(keyword.value) !== -1;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.example-p {
|
||||
height: 45px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
text-align: center;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.search {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
ul,
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.icon-li {
|
||||
display: inline-block;
|
||||
padding: 10px;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.icon-li-content {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.icon-li-content i {
|
||||
font-size: 36px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.icon-li-content span {
|
||||
margin-top: 10px;
|
||||
color: #787878;
|
||||
}
|
||||
|
||||
.iframe {
|
||||
width: 100%;
|
||||
height: 700px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,218 @@
|
|||
<template>
|
||||
<div class="login-bg">
|
||||
<div class="login-container">
|
||||
<div class="login-header">
|
||||
<img class="logo mr10" src="../../assets/img/logo.svg" alt="" />
|
||||
<div class="login-title">大学生学业作品AI生成工具</div>
|
||||
</div>
|
||||
<el-form :model="param" :rules="rules" ref="login" size="large">
|
||||
<el-form-item prop="username">
|
||||
<el-input v-model="param.username" placeholder="用户名或邮箱">
|
||||
<template #prepend>
|
||||
<el-icon>
|
||||
<User />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<el-input
|
||||
type="password"
|
||||
placeholder="密码"
|
||||
v-model="param.password"
|
||||
@keyup.enter="submitForm(login)"
|
||||
>
|
||||
<template #prepend>
|
||||
<el-icon>
|
||||
<Lock />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<div class="pwd-tips">
|
||||
<el-checkbox class="pwd-checkbox" v-model="checked" label="记住密码" />
|
||||
<el-link type="primary" @click="$router.push('/reset-pwd')">忘记密码</el-link>
|
||||
</div>
|
||||
<el-button class="login-btn" type="primary" size="large" @click="onLogin">登录</el-button>
|
||||
<p class="login-text">
|
||||
没有账号？<el-link type="primary" @click="$router.push('/register')">立即注册</el-link>
|
||||
</p>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive,inject } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import {loginService} from "@/api/user";
|
||||
import {GetUserInfoService} from "@/api/user";
|
||||
import { usePermissStore } from '@/store/permiss';
|
||||
|
||||
|
||||
// 从本地存储获取登录参数
|
||||
const lgStr = localStorage.getItem('login-param');
|
||||
const defParam = lgStr ? JSON.parse(lgStr) : null;
|
||||
const globalData = inject("globalData");
|
||||
const permiss = usePermissStore();
|
||||
// 记住密码状态
|
||||
const checked = ref(lgStr ? true : false);
|
||||
|
||||
const router = useRouter();
|
||||
// 登录表单数据
|
||||
const param = reactive({
|
||||
username: defParam ? defParam.username : '',
|
||||
password: defParam ? defParam.password : ''
|
||||
});
|
||||
|
||||
// 表单验证规则
|
||||
const rules = {
|
||||
username: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入用户名',
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
password: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入密码',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
};
|
||||
// 表单引用
|
||||
const login = ref(null);
|
||||
|
||||
//表单数据
|
||||
var loginData = ref({
|
||||
username: "",
|
||||
email: "",
|
||||
password: "",
|
||||
ip: "",
|
||||
});
|
||||
|
||||
//登录接口调用
|
||||
const onLogin = async () => {
|
||||
console.log("params:",param)
|
||||
|
||||
loginData.value.username = param.username;
|
||||
loginData.value.password = param.password;
|
||||
let result = await loginService(loginData);
|
||||
console.log("login result:", result);
|
||||
if (result.code !== 0) {
|
||||
//alert(result.message);
|
||||
ElMessage.error("登录失败！用户名或密码错误");
|
||||
return
|
||||
}
|
||||
globalData.token = result.data;
|
||||
localStorage.setItem("token", result.data.token);
|
||||
localStorage.setItem("userId", result.data.id);
|
||||
localStorage.setItem("username", result.data.username);
|
||||
let now = new Date();
|
||||
localStorage.setItem("end_time", now.setDate(now.getHours() + 12)); //过期时间
|
||||
await getMyUserInfo(result.data.id);
|
||||
//token.value= result.data;
|
||||
ElMessage.success('登录成功');
|
||||
localStorage.setItem('ms_username', result.data.username);
|
||||
const keys = permiss.defaultList[result.data.username == 'admin' ? 'admin' : 'user'];
|
||||
permiss.handleSet(keys);
|
||||
localStorage.setItem('ms_keys', JSON.stringify(keys));
|
||||
router.push("/");
|
||||
};
|
||||
|
||||
|
||||
const getMyUserInfo = async (id) => {
|
||||
let result = {};
|
||||
try {
|
||||
let tokenData ={
|
||||
token: localStorage.getItem("token"),
|
||||
id: id,
|
||||
}
|
||||
result = await GetUserInfoService(tokenData);
|
||||
if (result.code === 0) {
|
||||
//console.log("token data:",this.tokenData)
|
||||
localStorage.setItem("video_func", result.data.VideoFunc);
|
||||
localStorage.setItem("device_func", result.data.DeviceFunc);
|
||||
localStorage.setItem("cid_func", result.data.CIDFunc);
|
||||
localStorage.setItem("role", result.data.Role);
|
||||
|
||||
//alert("video_func:" + localStorage.getItem("video_func")+" type:" +typeof(localStorage.getItem("video_func")));
|
||||
}
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
}
|
||||
};
|
||||
|
||||
// 获取标签存储并清空标签
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.login-bg {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url(../../assets/img/login-bg3.jpg) center/cover no-repeat;
|
||||
}
|
||||
|
||||
.login-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 35px;
|
||||
}
|
||||
|
||||
.login-title {
|
||||
font-size: 22px;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.login-container {
|
||||
width: 450px;
|
||||
border-radius: 5px;
|
||||
background: #fff;
|
||||
padding: 40px 50px 50px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.pwd-tips {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
margin: -10px 0 10px;
|
||||
color: #787878;
|
||||
}
|
||||
|
||||
.pwd-checkbox {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.login-tips {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.login-text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
font-size: 14px;
|
||||
color: #787878;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<template>
|
||||
<div class="container">
|
||||
<div class="plugins-tips">
|
||||
md-editor-v3：vue3版本的 markdown 编辑器，配置丰富，请详看文档。 访问地址：
|
||||
<a href="https://imzbf.github.io/md-editor-v3/index" target="_blank">md-editor-v3</a>
|
||||
</div>
|
||||
<md-editor class="mgb20" v-model="text" @on-upload-img="onUploadImg" />
|
||||
<el-button type="primary">提交</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="md">
|
||||
import { ref } from 'vue';
|
||||
import MdEditor from 'md-editor-v3';
|
||||
import 'md-editor-v3/lib/style.css';
|
||||
|
||||
const text = ref('Hello Editor!');
|
||||
const onUploadImg = (files: any) => {
|
||||
console.log(files);
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,195 @@
|
|||
<template>
|
||||
<div class="login-bg">
|
||||
<div class="login-container">
|
||||
<div class="login-header">
|
||||
<img class="logo mr10" src="../../assets/img/logo.svg" alt="">
|
||||
<div class="login-title">
|
||||
大学生学业作品AI生成工具
|
||||
</div>
|
||||
</div>
|
||||
<el-form :model="param" :rules="rules" ref="register" size="large">
|
||||
<el-form-item prop="username">
|
||||
<el-input v-model="param.username" placeholder="用户名">
|
||||
<template #prepend>
|
||||
<el-icon>
|
||||
<User />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="email">
|
||||
<el-input v-model="param.email" placeholder="邮箱">
|
||||
<template #prepend>
|
||||
<el-icon>
|
||||
<Message />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<el-input type="password" placeholder="密码" v-model="param.password"
|
||||
@keyup.enter="submitForm(register)">
|
||||
<template #prepend>
|
||||
<el-icon>
|
||||
<Lock />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<el-input type="password" placeholder="密码" v-model="param.repassword"
|
||||
@keyup.enter="submitForm(register)">
|
||||
<template #prepend>
|
||||
<el-icon>
|
||||
<Lock />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-button class="login-btn" type="primary" size="large" @click="onRegister">注册</el-button>
|
||||
<p class="login-text">已有账号，<el-link type="primary" @click="$router.push('/login')">立即登录</el-link></p>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive,inject } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { registerService } from "@/api/user";
|
||||
import {GetUserInfoService} from "@/api/user";
|
||||
const router = useRouter();
|
||||
|
||||
const globalData = inject("globalData");
|
||||
const param = reactive({
|
||||
username: '',
|
||||
password: '',
|
||||
repassword: '',
|
||||
email: '',
|
||||
});
|
||||
|
||||
const registerData = ref({
|
||||
username: "",
|
||||
email: "",
|
||||
password: "",
|
||||
repassword: "",
|
||||
});
|
||||
|
||||
const rules = {
|
||||
username: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入用户名',
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
|
||||
email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
|
||||
};
|
||||
|
||||
const register = ref();
|
||||
|
||||
const getMyUserInfo = async (id) => {
|
||||
let result = {};
|
||||
try {
|
||||
let tokenData ={
|
||||
token: localStorage.getItem("token"),
|
||||
id: id,
|
||||
}
|
||||
result = await GetUserInfoService(tokenData);
|
||||
if (result.code === 0) {
|
||||
//console.log("token data:",this.tokenData)
|
||||
localStorage.setItem("video_func", result.data.VideoFunc);
|
||||
localStorage.setItem("device_func", result.data.DeviceFunc);
|
||||
localStorage.setItem("cid_func", result.data.CIDFunc);
|
||||
localStorage.setItem("role", result.data.Role);
|
||||
|
||||
//alert("video_func:" + localStorage.getItem("video_func")+" type:" +typeof(localStorage.getItem("video_func")));
|
||||
}
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
}
|
||||
};
|
||||
//注册接口调用
|
||||
const onRegister = async () => {
|
||||
registerData.value = param;
|
||||
|
||||
//校验密码是否一致
|
||||
if (registerData.value.password !== registerData.value.repassword) {
|
||||
//alert("两次密码不一致");
|
||||
ElMessage.error("两次密码不一致");
|
||||
return;
|
||||
}
|
||||
//校验邮箱是否合法
|
||||
let email = registerData.value.email;
|
||||
let reg = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
|
||||
if (!reg.test(email)) {
|
||||
//alert("邮箱格式不正确");
|
||||
ElMessage.error("邮箱格式不正确");
|
||||
return;
|
||||
}
|
||||
|
||||
let result = await registerService(registerData);
|
||||
if (result !== null) {
|
||||
globalData.token = result.data;
|
||||
localStorage.setItem("token", result.data.token);
|
||||
localStorage.setItem("userId", result.data.id);
|
||||
localStorage.setItem("username", result.data.username);
|
||||
let now = new Date();
|
||||
localStorage.setItem("end_time", now.setDate(now.getHours() + 12)); //过期时间
|
||||
//token.value= result.data;
|
||||
await getMyUserInfo(result.data.id);
|
||||
router.push("/home");
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.login-bg {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: url(../../assets/img/login-bg3.jpg) center/cover no-repeat;
|
||||
}
|
||||
|
||||
.login-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 35px;
|
||||
}
|
||||
|
||||
.login-title {
|
||||
font-size: 22px;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.login-container {
|
||||
width: 450px;
|
||||
border-radius: 5px;
|
||||
background: #fff;
|
||||
padding: 40px 50px 50px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.login-text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
font-size: 14px;
|
||||
color: #787878;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,203 @@
|
|||
<template>
|
||||
<div class="login-bg">
|
||||
<div class="login-container">
|
||||
<div class="reset-title">重置密码</div>
|
||||
<p class="reset-text">输入你的邮箱，发送重置密码邮件</p>
|
||||
<el-form :model="param" :rules="rules" ref="register" size="large">
|
||||
<el-form-item prop="email">
|
||||
<el-input v-model="param.email" placeholder="邮箱">
|
||||
<template #prepend>
|
||||
<el-icon>
|
||||
<Message />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-button type="primary" class="login-btn" :disabled="isCountingDown" @click="sendCodeMail">{{ buttonText }}</el-button>
|
||||
<p class="login-text" />
|
||||
<el-form-item prop="email">
|
||||
<el-input v-model="param.code" placeholder="验证码">
|
||||
<template #prepend>
|
||||
<el-icon>
|
||||
<Message />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="email">
|
||||
<el-input v-model="param.password" placeholder="新密码">
|
||||
<template #prepend>
|
||||
<el-icon>
|
||||
<Lock />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="email">
|
||||
<el-input v-model="param.repassword" placeholder="重复新密码">
|
||||
<template #prepend>
|
||||
<el-icon>
|
||||
<Lock />
|
||||
</el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-button class="login-btn" type="primary" size="large" @click="resetPassword">确认重置</el-button>
|
||||
<p class="login-text"><el-link type="primary" @click="$router.push('/login')">返回登录</el-link></p>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup >
|
||||
import { ref,inject } from 'vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import {genResetPassword} from "@/api/user";
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
const param = ref({
|
||||
email: '',
|
||||
code: '',
|
||||
password: '',
|
||||
repassword: ''
|
||||
});
|
||||
|
||||
const buttonText = ref('发送验证码');
|
||||
const countdown = ref(60); // 初始倒计时时间
|
||||
const isCountingDown = ref(false);
|
||||
const COUNT_DOWN_TIME = 60; // 倒计时总时间
|
||||
const globalData = inject("globalData");
|
||||
const router = useRouter();
|
||||
|
||||
const rules = {
|
||||
email: [
|
||||
{ required: true, message: '请输入邮箱', trigger: 'blur' },
|
||||
{ pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, message: '请输入正确的邮箱格式', trigger: 'blur' }
|
||||
],
|
||||
};
|
||||
|
||||
const resetPassword = async () =>{
|
||||
if (param.value.password !== param.value.repassword) {
|
||||
ElMessage.error('两次输入的密码不一致');
|
||||
return;
|
||||
}
|
||||
let req={
|
||||
email: param.value.email,
|
||||
code: param.value.code,
|
||||
new_password: param.value.password,
|
||||
type: 2 // 2表示验证码重置密码
|
||||
}
|
||||
|
||||
try{
|
||||
let result = await genResetPassword(req);
|
||||
if (result.code === 0) {
|
||||
//重置成功，返回新token，直接登录
|
||||
if (result.data.token) {
|
||||
localStorage.setItem('token', result.data.token);
|
||||
globalData.token = result.data.token;
|
||||
ElMessage.success('重置密码成功');
|
||||
router.push('/home');
|
||||
} else {
|
||||
ElMessage.success('重置密码成功，请登录');
|
||||
router.push('/login');
|
||||
}
|
||||
} else {
|
||||
ElMessage.error(result.msg);
|
||||
}
|
||||
|
||||
}catch(err){
|
||||
ElMessage.error('重置密码失败');
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
const sendCodeMail = async () => {
|
||||
if (isCountingDown.value) return;
|
||||
|
||||
let req={
|
||||
email: param.value.email,
|
||||
type: 0 //获取验证码
|
||||
}
|
||||
|
||||
|
||||
try{
|
||||
let result = await genResetPassword(req);
|
||||
if (result.code === 0) {
|
||||
//重置成功，返回新token，直接登录
|
||||
ElMessage.success('邮件已成功发送，请查收');
|
||||
} else {
|
||||
ElMessage.error(result.message);
|
||||
return;
|
||||
}
|
||||
|
||||
}catch(err){
|
||||
ElMessage.error('重置密码失败');
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 开始倒计时
|
||||
isCountingDown.value = true;
|
||||
buttonText.value = `${COUNT_DOWN_TIME}秒后重新发送`;
|
||||
|
||||
const timer = setInterval(() => {
|
||||
countdown.value -= 1;
|
||||
if (countdown.value <= 0) {
|
||||
clearInterval(timer);
|
||||
isCountingDown.value = false;
|
||||
countdown.value = COUNT_DOWN_TIME;
|
||||
buttonText.value = '发送邮件';
|
||||
} else {
|
||||
buttonText.value = `${countdown.value}秒后可重新发送`;
|
||||
}
|
||||
}, 1000);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.login-bg {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background: url(../../assets/img/login-bg3.jpg) center/cover no-repeat;
|
||||
}
|
||||
|
||||
.reset-title {
|
||||
text-align: center;
|
||||
font-size: 22px;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.reset-text {
|
||||
text-align: center;
|
||||
font-size: 14px;
|
||||
color: #787878;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.login-container {
|
||||
width: 450px;
|
||||
border-radius: 5px;
|
||||
background: #fff;
|
||||
padding: 40px 50px 50px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.login-text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 20px;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,205 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-card class="mgb20" shadow="hover">
|
||||
<template #header>
|
||||
<div class="content-title">系统主题</div>
|
||||
</template>
|
||||
<div class="theme-list mgb20">
|
||||
<div class="theme-item" @click="setSystemTheme(item)" v-for="item in system"
|
||||
:style="{ backgroundColor: item.color, color: '#fff' }">{{ item.name }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-center">
|
||||
<el-button @click="resetSystemTheme">重置主题</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card class="mgb20" shadow="hover">
|
||||
<template #header>
|
||||
<div class="content-title">Element-Plus主题</div>
|
||||
</template>
|
||||
<div class="theme-list mgb20">
|
||||
<div class="theme-item" v-for="theme in themes">
|
||||
<el-button :type="theme.name">{{ theme.name }}</el-button>
|
||||
<div class="theme-color">{{ theme.color }}</div>
|
||||
<el-color-picker v-model="color[theme.name]" @change="changeColor(theme.name)" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-center">
|
||||
<el-button @click="resetTheme">重置主题</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-row :gutter="50">
|
||||
<el-col :span="12">
|
||||
<el-card class="mgb20" shadow="hover">
|
||||
<template #header>
|
||||
<div class="content-title">头部主题</div>
|
||||
</template>
|
||||
<div class="theme-list mgb20">
|
||||
<div class="theme-item">
|
||||
<el-button :color="color.headerBgColor">背景颜色</el-button>
|
||||
<div class="theme-color">{{ color.headerBgColor }}</div>
|
||||
<el-color-picker v-model="color.headerBgColor"
|
||||
@change="themeStore.setHeaderBgColor(color.headerBgColor)" />
|
||||
</div>
|
||||
<div class="theme-item">
|
||||
<el-button :color="color.headerTextColor">文字颜色</el-button>
|
||||
<div class="theme-color">{{ color.headerTextColor }}</div>
|
||||
<el-color-picker v-model="color.headerTextColor"
|
||||
@change="themeStore.setHeaderTextColor(color.headerTextColor)" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-center">
|
||||
<el-button @click="resetHeader">重置主题</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="12">
|
||||
<el-card class="mgb20" shadow="hover">
|
||||
<template #header>
|
||||
<div class="content-title">菜单主题</div>
|
||||
</template>
|
||||
<div class="theme-list mgb20">
|
||||
<div class="theme-item">
|
||||
<el-button :color="sidebar.bgColor">背景颜色</el-button>
|
||||
<div class="theme-color">{{ sidebar.bgColor }}</div>
|
||||
<el-color-picker v-model="sidebarColor.bgColor"
|
||||
@change="sidebar.setBgColor(sidebarColor.bgColor)" />
|
||||
</div>
|
||||
<div class="theme-item">
|
||||
<el-button :color="sidebar.textColor">文字颜色</el-button>
|
||||
<div class="theme-color">{{ sidebar.textColor }}</div>
|
||||
<el-color-picker v-model="sidebarColor.textColor"
|
||||
@change="sidebar.setTextColor(sidebarColor.textColor)" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-center">
|
||||
<el-button @click="resetSidebar">重置主题</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useSidebarStore } from '@/store/sidebar';
|
||||
import { useThemeStore } from '@/store/theme'
|
||||
import { reactive } from 'vue';
|
||||
const themeStore = useThemeStore();
|
||||
const sidebar = useSidebarStore();
|
||||
|
||||
const color = reactive({
|
||||
primary: localStorage.getItem('theme-primary') || '#409eff',
|
||||
success: localStorage.getItem('theme-success') || '#67c23a',
|
||||
warning: localStorage.getItem('theme-warning') || '#e6a23c',
|
||||
danger: localStorage.getItem('theme-danger') || '#f56c6c',
|
||||
info: localStorage.getItem('theme-info') || '#909399',
|
||||
headerBgColor: themeStore.headerBgColor,
|
||||
headerTextColor: themeStore.headerTextColor,
|
||||
})
|
||||
const sidebarColor = reactive({
|
||||
bgColor: sidebar.bgColor,
|
||||
textColor: sidebar.textColor
|
||||
})
|
||||
const themes = [
|
||||
{
|
||||
name: 'primary',
|
||||
color: themeStore.primary || color.primary
|
||||
},
|
||||
{
|
||||
name: 'success',
|
||||
color: themeStore.success || color.success
|
||||
},
|
||||
{
|
||||
name: 'warning',
|
||||
color: themeStore.warning || color.warning
|
||||
},
|
||||
{
|
||||
name: 'danger',
|
||||
color: themeStore.danger || color.danger
|
||||
},
|
||||
{
|
||||
name: 'info',
|
||||
color: themeStore.info || color.info
|
||||
}
|
||||
]
|
||||
|
||||
const changeColor = (name: string) => {
|
||||
themeStore.setPropertyColor(color[name], name)
|
||||
}
|
||||
|
||||
const resetTheme = () => {
|
||||
themeStore.resetTheme()
|
||||
}
|
||||
const resetHeader = () => {
|
||||
localStorage.removeItem('header-bg-color')
|
||||
localStorage.removeItem('header-text-color')
|
||||
location.reload()
|
||||
}
|
||||
const resetSidebar = () => {
|
||||
localStorage.removeItem('sidebar-bg-color')
|
||||
localStorage.removeItem('sidebar-text-color')
|
||||
location.reload()
|
||||
}
|
||||
const system = [
|
||||
{
|
||||
name: '默认',
|
||||
color: '#242f42'
|
||||
},
|
||||
{
|
||||
name: '健康',
|
||||
color: '#1ABC9C'
|
||||
},
|
||||
{
|
||||
name: '优雅',
|
||||
color: '#722ed1'
|
||||
},
|
||||
{
|
||||
name: '热情',
|
||||
color: '#f44336'
|
||||
},
|
||||
{
|
||||
name: '宁静',
|
||||
color: '#00bcd4'
|
||||
}
|
||||
]
|
||||
const setSystemTheme = (data: any) => {
|
||||
if (data.name === '默认') {
|
||||
resetSystemTheme()
|
||||
} else {
|
||||
themeStore.setHeaderBgColor(data.color)
|
||||
themeStore.setHeaderTextColor('#fff')
|
||||
sidebar.setBgColor('#fff')
|
||||
sidebar.setTextColor('#5b6e88')
|
||||
themeStore.setPropertyColor(data.color, 'primary')
|
||||
}
|
||||
}
|
||||
const resetSystemTheme = () => {
|
||||
resetTheme();
|
||||
resetHeader();
|
||||
resetSidebar();
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.theme-list {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.theme-item {
|
||||
margin-right: 20px;
|
||||
padding: 30px;
|
||||
border: 1px solid #dcdfe6;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.theme-color {
|
||||
color: #787878;
|
||||
margin: 20px 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,270 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="user-container">
|
||||
<el-card class="user-profile" shadow="hover" :body-style="{ padding: '0px' }">
|
||||
<div class="user-profile-bg"></div>
|
||||
<div class="user-avatar-wrap">
|
||||
<el-avatar class="user-avatar" :size="120" :src="avatarImg" />
|
||||
</div>
|
||||
<div class="user-info">
|
||||
<div class="info-name">{{ name }}</div>
|
||||
<div class="info-desc">
|
||||
<span>@lin-xin</span>
|
||||
<el-divider direction="vertical" />
|
||||
<el-link href="https://lin-xin.gitee.io" target="_blank">lin-xin.gitee.io</el-link>
|
||||
</div>
|
||||
<div class="info-desc">FE Developer</div>
|
||||
<div class="info-icon">
|
||||
<a href="https://github.com/lin-xin" target="_blank"> <i class="el-icon-lx-github-fill"></i></a>
|
||||
<i class="el-icon-lx-qq-fill"></i>
|
||||
<i class="el-icon-lx-facebook-fill"></i>
|
||||
<i class="el-icon-lx-twitter-fill"></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="user-footer">
|
||||
<div class="user-footer-item">
|
||||
<el-statistic title="Follower" :value="1800" />
|
||||
</div>
|
||||
<div class="user-footer-item">
|
||||
<el-statistic title="Following" :value="666" />
|
||||
</div>
|
||||
<div class="user-footer-item">
|
||||
<el-statistic title="Total Post" :value="888" />
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card
|
||||
class="user-content"
|
||||
shadow="hover"
|
||||
:body-style="{ padding: '20px 50px', height: '100%', boxSizing: 'border-box' }"
|
||||
>
|
||||
<el-tabs tab-position="left" v-model="activeName">
|
||||
<el-tab-pane name="label1" label="消息通知" class="user-tabpane">
|
||||
<TabsComp />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane name="label2" label="我的头像" class="user-tabpane">
|
||||
<div class="crop-wrap" v-if="activeName === 'label2'">
|
||||
<vueCropper
|
||||
ref="cropper"
|
||||
:img="imgSrc"
|
||||
:autoCrop="true"
|
||||
:centerBox="true"
|
||||
:full="true"
|
||||
mode="contain"
|
||||
>
|
||||
</vueCropper>
|
||||
</div>
|
||||
<el-button class="crop-demo-btn" type="primary"
|
||||
>选择图片
|
||||
<input class="crop-input" type="file" name="image" accept="image/*" @change="setImage" />
|
||||
</el-button>
|
||||
<el-button type="success" @click="saveAvatar">上传并保存</el-button>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane name="label3" label="修改密码" class="user-tabpane">
|
||||
<el-form class="w500" label-position="top">
|
||||
<el-form-item label="旧密码：">
|
||||
<el-input type="password" v-model="form.old"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="新密码：">
|
||||
<el-input type="password" v-model="form.new"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="确认新密码：">
|
||||
<el-input type="password" v-model="form.new1"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">保存</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane name="label4" label="赞赏作者" class="user-tabpane">
|
||||
<div class="plugins-tips">
|
||||
如果该框架
|
||||
<el-link href="https://github.com/lin-xin/vue-manage-system" target="_blank"
|
||||
>vue-manage-system</el-link
|
||||
>
|
||||
对你有帮助，那就请作者喝杯饮料吧！<el-icon>
|
||||
<ColdDrink />
|
||||
</el-icon>
|
||||
加微信号 linxin_20 探讨问题。
|
||||
</div>
|
||||
<div>
|
||||
<img src="https://lin-xin.gitee.io/images/weixin.jpg" />
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="ucenter">
|
||||
import { reactive, ref } from 'vue';
|
||||
import { VueCropper } from 'vue-cropper';
|
||||
import 'vue-cropper/dist/index.css';
|
||||
import avatar from '@/assets/img/img.jpg';
|
||||
import TabsComp from '../element/tabs.vue';
|
||||
|
||||
const name = localStorage.getItem('ms_username');
|
||||
const form = reactive({
|
||||
new1: '',
|
||||
new: '',
|
||||
old: '',
|
||||
});
|
||||
const onSubmit = () => {};
|
||||
|
||||
const activeName = ref('label1');
|
||||
|
||||
const avatarImg = ref(avatar);
|
||||
const imgSrc = ref(avatar);
|
||||
const cropImg = ref('');
|
||||
const cropper: any = ref();
|
||||
|
||||
const setImage = (e: any) => {
|
||||
const file = e.target.files[0];
|
||||
if (!file.type.includes('image/')) {
|
||||
return;
|
||||
}
|
||||
const reader = new FileReader();
|
||||
reader.onload = (event: any) => {
|
||||
imgSrc.value = event.target.result;
|
||||
cropper.value && cropper.value.replace(event.target.result);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
};
|
||||
|
||||
const cropImage = () => {
|
||||
cropImg.value = cropper.value?.getCroppedCanvas().toDataURL();
|
||||
};
|
||||
|
||||
const saveAvatar = () => {
|
||||
avatarImg.value = cropImg.value;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.user-container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.user-profile {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.user-profile-bg {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
background-image: url('../../assets/img/ucenter-bg.jpg');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.user-profile {
|
||||
width: 500px;
|
||||
margin-right: 20px;
|
||||
flex: 0 0 auto;
|
||||
align-self: flex-start;
|
||||
}
|
||||
|
||||
.user-avatar-wrap {
|
||||
position: absolute;
|
||||
top: 135px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
border: 5px solid #fff;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 7px 12px 0 rgba(62, 57, 107, 0.16);
|
||||
}
|
||||
|
||||
.user-info {
|
||||
text-align: center;
|
||||
padding: 80px 0 30px;
|
||||
}
|
||||
|
||||
.info-name {
|
||||
margin: 0 0 20px;
|
||||
font-size: 22px;
|
||||
font-weight: 500;
|
||||
color: #373a3c;
|
||||
}
|
||||
|
||||
.info-desc {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.info-desc,
|
||||
.info-desc a {
|
||||
font-size: 18px;
|
||||
color: #55595c;
|
||||
}
|
||||
|
||||
.info-icon {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.info-icon i {
|
||||
font-size: 30px;
|
||||
margin: 0 10px;
|
||||
color: #343434;
|
||||
}
|
||||
|
||||
.user-content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.user-tabpane {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
.crop-wrap {
|
||||
width: 600px;
|
||||
height: 350px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.crop-demo-btn {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.crop-input {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.w500 {
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
.user-footer {
|
||||
display: flex;
|
||||
border-top: 1px solid rgba(83, 70, 134, 0.1);
|
||||
}
|
||||
|
||||
.user-footer-item {
|
||||
padding: 20px 0;
|
||||
width: 33.3333333333%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.user-footer > div + div {
|
||||
border-left: 1px solid rgba(83, 70, 134, 0.1);
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.el-tabs.el-tabs--left {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,253 @@
|
|||
<template>
|
||||
<div class="user-container">
|
||||
<el-card class="user-profile mgb20" shadow="hover" :body-style="{ padding: '0px' }">
|
||||
<div class="user-profile-bg"></div>
|
||||
<div class="user-avatar-wrap">
|
||||
<el-avatar class="user-avatar" :size="120" :src="avatarImg" />
|
||||
</div>
|
||||
<div class="user-info">
|
||||
<div class="info-name">{{ name }}</div>
|
||||
<div class="info-desc">
|
||||
<!-- <span>{{ name }}</span>
|
||||
<el-divider direction="vertical" /> -->
|
||||
<span>FE Developer</span>
|
||||
<el-divider direction="vertical" />
|
||||
<el-link href="https://lin-xin.gitee.io" target="_blank">lin-xin.gitee.io</el-link>
|
||||
</div>
|
||||
<!-- <div class="info-icon">
|
||||
<a href="https://github.com/lin-xin" target="_blank"> <i class="el-icon-lx-github-fill"></i></a>
|
||||
<i class="el-icon-lx-qq-fill"></i>
|
||||
<i class="el-icon-lx-facebook-fill"></i>
|
||||
<i class="el-icon-lx-twitter-fill"></i>
|
||||
</div> -->
|
||||
</div>
|
||||
<!-- <div class="user-footer">
|
||||
<div class="user-footer-item">
|
||||
<el-statistic title="Follower" value="18K" />
|
||||
</div>
|
||||
<div class="user-footer-item">
|
||||
<el-statistic title="Following" :value="666" />
|
||||
</div>
|
||||
<div class="user-footer-item">
|
||||
<el-statistic title="Total Post" :value="888" />
|
||||
</div>
|
||||
</div> -->
|
||||
</el-card>
|
||||
<el-card class="user-content" shadow="hover"
|
||||
:body-style="{ padding: '20px 50px', height: '100%', boxSizing: 'border-box' }">
|
||||
<el-tabs v-model="activeName">
|
||||
|
||||
<el-tab-pane name="label1" label="消息通知" class="user-tabpane">
|
||||
<TabsComp />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane name="label2" label="我的头像" class="user-tabpane">
|
||||
<div class="crop-wrap" v-if="activeName === 'label2'">
|
||||
<vueCropper ref="cropper" :img="imgSrc" :autoCrop="true" :centerBox="true" :full="true"
|
||||
mode="contain">
|
||||
</vueCropper>
|
||||
</div>
|
||||
<el-button class="crop-demo-btn" type="primary">选择图片
|
||||
<input class="crop-input" type="file" name="image" accept="image/*" @change="setImage" />
|
||||
</el-button>
|
||||
<el-button type="success" @click="saveAvatar">上传并保存</el-button>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane name="label3" label="修改密码" class="user-tabpane">
|
||||
<el-form class="w500" label-position="top">
|
||||
<el-form-item label="旧密码：">
|
||||
<el-input type="password" v-model="form.old"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="新密码：">
|
||||
<el-input type="password" v-model="form.new"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="确认新密码：">
|
||||
<el-input type="password" v-model="form.new1"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit">保存</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane name="label4" label="赞赏作者" class="user-tabpane">
|
||||
<div class="plugins-tips">
|
||||
如果该框架 <el-link href="https://github.com/lin-xin/vue-manage-system"
|
||||
target="_blank">vue-manage-system</el-link> 对你有帮助，那就请作者喝杯饮料吧！<el-icon>
|
||||
<ColdDrink />
|
||||
</el-icon> 加微信号 linxin_20 探讨问题。
|
||||
</div>
|
||||
<div>
|
||||
<img src="https://lin-xin.gitee.io/images/weixin.jpg" />
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="ucenter">
|
||||
import { reactive, ref } from 'vue';
|
||||
import { VueCropper } from "vue-cropper"
|
||||
import 'vue-cropper/dist/index.css'
|
||||
import avatar from '@/assets/img/img.jpg';
|
||||
import TabsComp from '../element/tabs.vue';
|
||||
|
||||
const name = localStorage.getItem('ms_username');
|
||||
const form = reactive({
|
||||
new1: '',
|
||||
new: '',
|
||||
old: ''
|
||||
});
|
||||
const onSubmit = () => { };
|
||||
|
||||
const activeName = ref('label1');
|
||||
|
||||
const avatarImg = ref(avatar);
|
||||
const imgSrc = ref(avatar);
|
||||
const cropImg = ref('');
|
||||
const cropper: any = ref();
|
||||
|
||||
const setImage = (e: any) => {
|
||||
const file = e.target.files[0];
|
||||
if (!file.type.includes('image/')) {
|
||||
return;
|
||||
}
|
||||
const reader = new FileReader();
|
||||
reader.onload = (event: any) => {
|
||||
imgSrc.value = event.target.result;
|
||||
cropper.value && cropper.value.replace(event.target.result);
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
};
|
||||
|
||||
const cropImage = () => {
|
||||
cropImg.value = cropper.value?.getCroppedCanvas().toDataURL();
|
||||
};
|
||||
|
||||
const saveAvatar = () => {
|
||||
avatarImg.value = cropImg.value;
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* .user-container {
|
||||
display: flex;
|
||||
} */
|
||||
|
||||
.user-profile-bg {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
background-image: url('../../assets/img/bahnhofsidylle.jpg');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.user-profile {
|
||||
position: relative;
|
||||
/* width: 500px; */
|
||||
/* margin-right: 20px; */
|
||||
/* flex: 0 0 auto;
|
||||
align-self: flex-start;
|
||||
} */
|
||||
}
|
||||
|
||||
.user-avatar-wrap {
|
||||
position: absolute;
|
||||
top: 90px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.user-avatar {
|
||||
border: 5px solid #fff;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 7px 12px 0 rgba(62, 57, 107, .16)
|
||||
}
|
||||
|
||||
.user-info {
|
||||
text-align: center;
|
||||
padding: 70px 0 20px;
|
||||
}
|
||||
|
||||
.info-name {
|
||||
margin: 0 0 10px;
|
||||
font-size: 22px;
|
||||
font-weight: 500;
|
||||
color: #373a3c;
|
||||
}
|
||||
|
||||
.info-desc {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.info-desc,
|
||||
.info-desc a {
|
||||
font-size: 18px;
|
||||
color: #55595c;
|
||||
}
|
||||
|
||||
.info-icon {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.info-icon i {
|
||||
font-size: 30px;
|
||||
margin: 0 10px;
|
||||
color: #343434;
|
||||
}
|
||||
|
||||
.user-content {
|
||||
flex: 1
|
||||
}
|
||||
|
||||
.user-tabpane {
|
||||
padding: 10px 20px;
|
||||
}
|
||||
|
||||
.crop-wrap {
|
||||
width: 600px;
|
||||
height: 350px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.crop-demo-btn {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.crop-input {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.w500 {
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
.user-footer {
|
||||
display: flex;
|
||||
border-top: 1px solid rgba(83, 70, 134, 0.1);
|
||||
}
|
||||
|
||||
.user-footer-item {
|
||||
padding: 20px 0;
|
||||
width: 33.3333333333%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.user-footer>div+div {
|
||||
border-left: 1px solid rgba(83, 70, 134, 0.1);
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.el-tabs.el-tabs--left {
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,144 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="container">
|
||||
<TableCustom :columns="columns" :tableData="menuData" row-key="index" :has-pagination="false"
|
||||
:viewFunc="handleView" :delFunc="handleDelete" :editFunc="handleEdit">
|
||||
<template #toolbarBtn>
|
||||
<el-button type="warning" :icon="CirclePlusFilled" @click="visible = true">新增</el-button>
|
||||
</template>
|
||||
<template #icon="{ rows }">
|
||||
<el-icon>
|
||||
<component :is="rows.icon"></component>
|
||||
</el-icon>
|
||||
</template>
|
||||
</TableCustom>
|
||||
|
||||
</div>
|
||||
<el-dialog :title="isEdit ? '编辑' : '新增'" v-model="visible" width="700px" destroy-on-close
|
||||
:close-on-click-modal="false" @close="closeDialog">
|
||||
<TableEdit :form-data="rowData" :options="options" :edit="isEdit" :update="updateData">
|
||||
<template #parent>
|
||||
<el-cascader v-model="rowData.pid" :options="cascaderOptions" :props="{ checkStrictly: true }"
|
||||
clearable />
|
||||
</template>
|
||||
</TableEdit>
|
||||
</el-dialog>
|
||||
<el-dialog title="查看详情" v-model="visible1" width="700px" destroy-on-close>
|
||||
<TableDetail :data="viewData">
|
||||
<template #icon="{ rows }">
|
||||
<el-icon>
|
||||
<component :is="rows.icon"></component>
|
||||
</el-icon>
|
||||
</template>
|
||||
</TableDetail>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="system-menu">
|
||||
import { ref } from 'vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { CirclePlusFilled } from '@element-plus/icons-vue';
|
||||
import { Menus } from '@/types/menu';
|
||||
import TableCustom from '@/components/table-custom.vue';
|
||||
import TableDetail from '@/components/table-detail.vue';
|
||||
import { FormOption } from '@/types/form-option';
|
||||
import { menuData } from '@/components/menu';
|
||||
|
||||
// 表格相关
|
||||
let columns = ref([
|
||||
{ prop: 'title', label: '菜单名称', align: 'left' },
|
||||
{ prop: 'icon', label: '图标' },
|
||||
{ prop: 'index', label: '路由路径' },
|
||||
{ prop: 'permiss', label: '权限标识' },
|
||||
{ prop: 'operator', label: '操作', width: 250 },
|
||||
])
|
||||
|
||||
const getOptions = (data: any) => {
|
||||
return data.map(item => {
|
||||
const a: any = {
|
||||
label: item.title,
|
||||
value: item.id,
|
||||
}
|
||||
if (item.children) {
|
||||
a.children = getOptions(item.children)
|
||||
}
|
||||
return a
|
||||
})
|
||||
}
|
||||
const cascaderOptions = ref(getOptions(menuData));
|
||||
|
||||
|
||||
// 新增/编辑弹窗相关
|
||||
let options = ref<FormOption>({
|
||||
labelWidth: '100px',
|
||||
span: 12,
|
||||
list: [
|
||||
{ type: 'input', label: '菜单名称', prop: 'title', required: true },
|
||||
{ type: 'input', label: '路由路径', prop: 'index', required: true },
|
||||
{ type: 'input', label: '图标', prop: 'icon' },
|
||||
{ type: 'input', label: '权限标识', prop: 'permiss' },
|
||||
{ type: 'parent', label: '父菜单', prop: 'parent' },
|
||||
]
|
||||
})
|
||||
const visible = ref(false);
|
||||
const isEdit = ref(false);
|
||||
const rowData = ref<any>({});
|
||||
const handleEdit = (row: Menus) => {
|
||||
rowData.value = { ...row };
|
||||
isEdit.value = true;
|
||||
visible.value = true;
|
||||
};
|
||||
const updateData = () => {
|
||||
closeDialog();
|
||||
};
|
||||
|
||||
const closeDialog = () => {
|
||||
visible.value = false;
|
||||
isEdit.value = false;
|
||||
};
|
||||
|
||||
// 查看详情弹窗相关
|
||||
const visible1 = ref(false);
|
||||
const viewData = ref({
|
||||
row: {},
|
||||
list: []
|
||||
});
|
||||
const handleView = (row: Menus) => {
|
||||
viewData.value.row = { ...row }
|
||||
viewData.value.list = [
|
||||
{
|
||||
prop: 'id',
|
||||
label: '菜单ID',
|
||||
},
|
||||
{
|
||||
prop: 'pid',
|
||||
label: '父菜单ID',
|
||||
},
|
||||
{
|
||||
prop: 'title',
|
||||
label: '菜单名称',
|
||||
},
|
||||
{
|
||||
prop: 'index',
|
||||
label: '路由路径',
|
||||
},
|
||||
{
|
||||
prop: 'permiss',
|
||||
label: '权限标识',
|
||||
},
|
||||
{
|
||||
prop: 'icon',
|
||||
label: '图标',
|
||||
},
|
||||
]
|
||||
visible1.value = true;
|
||||
};
|
||||
|
||||
// 删除相关
|
||||
const handleDelete = (row: Menus) => {
|
||||
ElMessage.success('删除成功');
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-tree
|
||||
class="mgb10"
|
||||
ref="tree"
|
||||
:data="data"
|
||||
node-key="id"
|
||||
default-expand-all
|
||||
show-checkbox
|
||||
:default-checked-keys="checkedKeys"
|
||||
/>
|
||||
<el-button type="primary" @click="onSubmit">保存权限</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue';
|
||||
import { ElTree } from 'element-plus';
|
||||
import { menuData } from '@/components/menu';
|
||||
|
||||
const props = defineProps({
|
||||
permissOptions: {
|
||||
type: Object,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
|
||||
const menuObj = ref({});
|
||||
// const data = menuData.map((item) => {
|
||||
// if (item.children) {
|
||||
// menuObj.value[item.id] = item.children.map((sub) => sub.id);
|
||||
// }
|
||||
// return {
|
||||
// id: item.id,
|
||||
// label: item.title,
|
||||
// children: item.children?.map((child) => {
|
||||
// return {
|
||||
// id: child.id,
|
||||
// label: child.title,
|
||||
// };
|
||||
// }),
|
||||
// };
|
||||
// });
|
||||
|
||||
const getTreeData = (data) => {
|
||||
return data.map((item) => {
|
||||
const obj: any = {
|
||||
id: item.id,
|
||||
label: item.title,
|
||||
};
|
||||
if (item.children) {
|
||||
menuObj.value[item.id] = item.children.map((sub) => sub.id);
|
||||
obj.children = getTreeData(item.children);
|
||||
}
|
||||
return obj;
|
||||
});
|
||||
};
|
||||
const data = getTreeData(menuData);
|
||||
const checkData = (data: string[]) => {
|
||||
return data.filter((item) => {
|
||||
return !menuObj.value[item] || data.toString().includes(menuObj.value[item].toString());
|
||||
});
|
||||
};
|
||||
// 获取当前权限
|
||||
const checkedKeys = ref<string[]>(checkData(props.permissOptions.permiss));
|
||||
|
||||
// 保存权限
|
||||
const tree = ref<InstanceType<typeof ElTree>>();
|
||||
const onSubmit = () => {
|
||||
// 获取选中的权限
|
||||
const keys = [...tree.value!.getCheckedKeys(false), ...tree.value!.getHalfCheckedKeys()] as number[];
|
||||
console.log(keys);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -0,0 +1,162 @@
|
|||
<template>
|
||||
<div>
|
||||
<TableSearch :query="query" :options="searchOpt" :search="handleSearch" />
|
||||
<div class="container">
|
||||
|
||||
<TableCustom :columns="columns" :tableData="tableData" :total="page.total" :viewFunc="handleView"
|
||||
:delFunc="handleDelete" :page-change="changePage" :editFunc="handleEdit">
|
||||
<template #toolbarBtn>
|
||||
<el-button type="warning" :icon="CirclePlusFilled" @click="visible = true">新增</el-button>
|
||||
</template>
|
||||
<template #status="{ rows }">
|
||||
<el-tag type="success" v-if="rows.status">启用</el-tag>
|
||||
<el-tag type="danger" v-else>禁用</el-tag>
|
||||
</template>
|
||||
<template #permissions="{ rows }">
|
||||
<el-button type="primary" size="small" plain @click="handlePermission(rows)">管理</el-button>
|
||||
</template>
|
||||
</TableCustom>
|
||||
</div>
|
||||
<el-dialog :title="isEdit ? '编辑' : '新增'" v-model="visible" width="700px" destroy-on-close
|
||||
:close-on-click-modal="false" @close="closeDialog">
|
||||
<TableEdit :form-data="rowData" :options="options" :edit="isEdit" :update="updateData" />
|
||||
</el-dialog>
|
||||
<el-dialog title="查看详情" v-model="visible1" width="700px" destroy-on-close>
|
||||
<TableDetail :data="viewData">
|
||||
<template #status="{ rows }">
|
||||
<el-tag type="success" v-if="rows.status">启用</el-tag>
|
||||
<el-tag type="danger" v-else>禁用</el-tag>
|
||||
</template>
|
||||
</TableDetail>
|
||||
</el-dialog>
|
||||
<el-dialog title="权限管理" v-model="visible2" width="500px" destroy-on-close>
|
||||
<RolePermission :permiss-options="permissOptions" />
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="system-role">
|
||||
import { ref, reactive } from 'vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { Role } from '@/types/role';
|
||||
import { fetchRoleData } from '@/api';
|
||||
import TableCustom from '@/components/table-custom.vue';
|
||||
import TableDetail from '@/components/table-detail.vue';
|
||||
import RolePermission from './role-permission.vue'
|
||||
import { CirclePlusFilled } from '@element-plus/icons-vue';
|
||||
import { FormOption, FormOptionList } from '@/types/form-option';
|
||||
|
||||
// 查询相关
|
||||
const query = reactive({
|
||||
name: '',
|
||||
});
|
||||
const searchOpt = ref<FormOptionList[]>([
|
||||
{ type: 'input', label: '角色名称：', prop: 'name' }
|
||||
])
|
||||
const handleSearch = () => {
|
||||
changePage(1);
|
||||
};
|
||||
|
||||
// 表格相关
|
||||
let columns = ref([
|
||||
{ type: 'index', label: '序号', width: 55, align: 'center' },
|
||||
{ prop: 'name', label: '角色名称' },
|
||||
{ prop: 'key', label: '角色标识' },
|
||||
{ prop: 'status', label: '状态' },
|
||||
{ prop: 'permissions', label: '权限管理' },
|
||||
{ prop: 'operator', label: '操作', width: 250 },
|
||||
])
|
||||
const page = reactive({
|
||||
index: 1,
|
||||
size: 10,
|
||||
total: 0,
|
||||
})
|
||||
const tableData = ref<Role[]>([]);
|
||||
const getData = async () => {
|
||||
const res = await fetchRoleData()
|
||||
tableData.value = res.data.list;
|
||||
page.total = res.data.pageTotal;
|
||||
};
|
||||
getData();
|
||||
const changePage = (val: number) => {
|
||||
page.index = val;
|
||||
getData();
|
||||
};
|
||||
|
||||
// 新增/编辑弹窗相关
|
||||
const options = ref<FormOption>({
|
||||
labelWidth: '100px',
|
||||
span: 24,
|
||||
list: [
|
||||
{ type: 'input', label: '角色名称', prop: 'name', required: true },
|
||||
{ type: 'input', label: '角色标识', prop: 'key', required: true },
|
||||
{ type: 'switch', label: '状态', prop: 'status', required: false, activeText: '启用', inactiveText: '禁用' },
|
||||
]
|
||||
})
|
||||
const visible = ref(false);
|
||||
const isEdit = ref(false);
|
||||
const rowData = ref({});
|
||||
const handleEdit = (row: Role) => {
|
||||
rowData.value = { ...row };
|
||||
isEdit.value = true;
|
||||
visible.value = true;
|
||||
};
|
||||
const updateData = () => {
|
||||
closeDialog();
|
||||
getData();
|
||||
};
|
||||
const closeDialog = () => {
|
||||
visible.value = false;
|
||||
isEdit.value = false;
|
||||
rowData.value = {};
|
||||
};
|
||||
|
||||
// 查看详情弹窗相关
|
||||
const visible1 = ref(false);
|
||||
const viewData = ref({
|
||||
row: {},
|
||||
list: [],
|
||||
column: 1
|
||||
});
|
||||
const handleView = (row: Role) => {
|
||||
viewData.value.row = { ...row }
|
||||
viewData.value.list = [
|
||||
{
|
||||
prop: 'id',
|
||||
label: '角色ID',
|
||||
},
|
||||
{
|
||||
prop: 'name',
|
||||
label: '角色名称',
|
||||
},
|
||||
{
|
||||
prop: 'key',
|
||||
label: '角色标识',
|
||||
},
|
||||
{
|
||||
prop: 'status',
|
||||
label: '角色状态',
|
||||
},
|
||||
]
|
||||
visible1.value = true;
|
||||
};
|
||||
|
||||
// 删除相关
|
||||
const handleDelete = (row: Role) => {
|
||||
ElMessage.success('删除成功');
|
||||
}
|
||||
|
||||
|
||||
// 权限管理弹窗相关
|
||||
const visible2 = ref(false);
|
||||
const permissOptions = ref({})
|
||||
const handlePermission = (row: Role) => {
|
||||
visible2.value = true;
|
||||
permissOptions.value = {
|
||||
id: row.id,
|
||||
permiss: row.permiss
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -0,0 +1,148 @@
|
|||
<template>
|
||||
<div>
|
||||
<TableSearch :query="query" :options="searchOpt" :search="handleSearch" />
|
||||
<div class="container">
|
||||
<TableCustom :columns="columns" :tableData="tableData" :total="page.total" :viewFunc="handleView"
|
||||
:delFunc="handleDelete" :page-change="changePage" :editFunc="handleEdit">
|
||||
<template #toolbarBtn>
|
||||
<el-button type="warning" :icon="CirclePlusFilled" @click="visible = true">新增</el-button>
|
||||
</template>
|
||||
</TableCustom>
|
||||
|
||||
</div>
|
||||
<el-dialog :title="isEdit ? '编辑' : '新增'" v-model="visible" width="700px" destroy-on-close
|
||||
:close-on-click-modal="false" @close="closeDialog">
|
||||
<TableEdit :form-data="rowData" :options="options" :edit="isEdit" :update="updateData" />
|
||||
</el-dialog>
|
||||
<el-dialog title="查看详情" v-model="visible1" width="700px" destroy-on-close>
|
||||
<TableDetail :data="viewData"></TableDetail>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="system-user">
|
||||
import { ref, reactive } from 'vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { CirclePlusFilled } from '@element-plus/icons-vue';
|
||||
import { User } from '@/types/user';
|
||||
import { fetchUserData } from '@/api';
|
||||
import TableCustom from '@/components/table-custom.vue';
|
||||
import TableDetail from '@/components/table-detail.vue';
|
||||
import TableSearch from '@/components/table-search.vue';
|
||||
import { FormOption, FormOptionList } from '@/types/form-option';
|
||||
|
||||
// 查询相关
|
||||
const query = reactive({
|
||||
name: '',
|
||||
});
|
||||
const searchOpt = ref<FormOptionList[]>([
|
||||
{ type: 'input', label: '用户名：', prop: 'name' }
|
||||
])
|
||||
const handleSearch = () => {
|
||||
changePage(1);
|
||||
};
|
||||
|
||||
// 表格相关
|
||||
let columns = ref([
|
||||
{ type: 'index', label: '序号', width: 55, align: 'center' },
|
||||
{ prop: 'name', label: '用户名' },
|
||||
{ prop: 'phone', label: '手机号' },
|
||||
{ prop: 'role', label: '角色' },
|
||||
{ prop: 'operator', label: '操作', width: 250 },
|
||||
])
|
||||
const page = reactive({
|
||||
index: 1,
|
||||
size: 10,
|
||||
total: 0,
|
||||
})
|
||||
const tableData = ref<User[]>([]);
|
||||
const getData = async () => {
|
||||
const res = await fetchUserData()
|
||||
tableData.value = res.data.list;
|
||||
page.total = res.data.pageTotal;
|
||||
};
|
||||
getData();
|
||||
|
||||
const changePage = (val: number) => {
|
||||
page.index = val;
|
||||
getData();
|
||||
};
|
||||
|
||||
// 新增/编辑弹窗相关
|
||||
let options = ref<FormOption>({
|
||||
labelWidth: '100px',
|
||||
span: 12,
|
||||
list: [
|
||||
{ type: 'input', label: '用户名', prop: 'name', required: true },
|
||||
{ type: 'input', label: '手机号', prop: 'phone', required: true },
|
||||
{ type: 'input', label: '密码', prop: 'password', required: true },
|
||||
{ type: 'input', label: '邮箱', prop: 'email', required: true },
|
||||
{ type: 'input', label: '角色', prop: 'role', required: true },
|
||||
]
|
||||
})
|
||||
const visible = ref(false);
|
||||
const isEdit = ref(false);
|
||||
const rowData = ref({});
|
||||
const handleEdit = (row: User) => {
|
||||
rowData.value = { ...row };
|
||||
isEdit.value = true;
|
||||
visible.value = true;
|
||||
};
|
||||
const updateData = () => {
|
||||
closeDialog();
|
||||
getData();
|
||||
};
|
||||
|
||||
const closeDialog = () => {
|
||||
visible.value = false;
|
||||
isEdit.value = false;
|
||||
};
|
||||
|
||||
// 查看详情弹窗相关
|
||||
const visible1 = ref(false);
|
||||
const viewData = ref({
|
||||
row: {},
|
||||
list: []
|
||||
});
|
||||
const handleView = (row: User) => {
|
||||
viewData.value.row = { ...row }
|
||||
viewData.value.list = [
|
||||
{
|
||||
prop: 'id',
|
||||
label: '用户ID',
|
||||
},
|
||||
{
|
||||
prop: 'name',
|
||||
label: '用户名',
|
||||
},
|
||||
{
|
||||
prop: 'password',
|
||||
label: '密码',
|
||||
},
|
||||
{
|
||||
prop: 'email',
|
||||
label: '邮箱',
|
||||
},
|
||||
{
|
||||
prop: 'phone',
|
||||
label: '电话',
|
||||
},
|
||||
{
|
||||
prop: 'role',
|
||||
label: '角色',
|
||||
},
|
||||
{
|
||||
prop: 'date',
|
||||
label: '注册日期',
|
||||
},
|
||||
]
|
||||
visible1.value = true;
|
||||
};
|
||||
|
||||
// 删除相关
|
||||
const handleDelete = (row: User) => {
|
||||
ElMessage.success('删除成功');
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -0,0 +1,169 @@
|
|||
<template>
|
||||
<div>
|
||||
<TableSearch :query="query" :options="searchOpt" :search="handleSearch" />
|
||||
<div class="container">
|
||||
<TableCustom :columns="columns" :tableData="tableData" :total="page.total" :viewFunc="handleView"
|
||||
:delFunc="handleDelete" :editFunc="handleEdit" :refresh="getData" :currentPage="page.index"
|
||||
:changePage="changePage">
|
||||
<template #toolbarBtn>
|
||||
<el-button type="warning" :icon="CirclePlusFilled" @click="visible = true">新增</el-button>
|
||||
</template>
|
||||
<template #money="{ rows }">
|
||||
￥{{ rows.money }}
|
||||
</template>
|
||||
<template #thumb="{ rows }">
|
||||
<el-image class="table-td-thumb" :src="rows.thumb" :z-index="10" :preview-src-list="[rows.thumb]"
|
||||
preview-teleported>
|
||||
</el-image>
|
||||
</template>
|
||||
<template #state="{ rows }">
|
||||
<el-tag :type="rows.state ? 'success' : 'danger'">
|
||||
{{ rows.state ? '正常' : '异常' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</TableCustom>
|
||||
|
||||
</div>
|
||||
<el-dialog :title="isEdit ? '编辑' : '新增'" v-model="visible" width="700px" destroy-on-close
|
||||
:close-on-click-modal="false" @close="closeDialog">
|
||||
<TableEdit :form-data="rowData" :options="options" :edit="isEdit" :update="updateData">
|
||||
<template #thumb="{ rows }">
|
||||
<img class="table-td-thumb" :src="rows.thumb"></img>
|
||||
</template>
|
||||
</TableEdit>
|
||||
</el-dialog>
|
||||
<el-dialog title="查看详情" v-model="visible1" width="700px" destroy-on-close>
|
||||
<TableDetail :data="viewData">
|
||||
<template #thumb="{ rows }">
|
||||
<el-image :src="rows.thumb"></el-image>
|
||||
</template>
|
||||
</TableDetail>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="basetable">
|
||||
import { ref, reactive } from 'vue';
|
||||
import { ElMessage, } from 'element-plus';
|
||||
import { CirclePlusFilled } from '@element-plus/icons-vue';
|
||||
import { fetchData } from '@/api/index';
|
||||
import TableCustom from '@/components/table-custom.vue';
|
||||
import TableDetail from '@/components/table-detail.vue';
|
||||
import TableSearch from '@/components/table-search.vue';
|
||||
import { TableItem } from '@/types/table';
|
||||
import { FormOption, FormOptionList } from '@/types/form-option';
|
||||
|
||||
// 查询相关
|
||||
const query = reactive({
|
||||
name: '',
|
||||
});
|
||||
const searchOpt = ref<FormOptionList[]>([
|
||||
{ type: 'input', label: '用户名：', prop: 'name' }
|
||||
])
|
||||
const handleSearch = () => {
|
||||
changePage(1);
|
||||
};
|
||||
|
||||
// 表格相关
|
||||
let columns = ref([
|
||||
{ type: 'selection' },
|
||||
{ type: 'index', label: '序号', width: 55, align: 'center' },
|
||||
{ prop: 'name', label: '用户名' },
|
||||
{ prop: 'money', label: '账户余额' },
|
||||
{ prop: 'thumb', label: '头像' },
|
||||
{ prop: 'state', label: '账户状态' },
|
||||
{ prop: 'operator', label: '操作', width: 250 },
|
||||
])
|
||||
const page = reactive({
|
||||
index: 1,
|
||||
size: 10,
|
||||
total: 200,
|
||||
})
|
||||
const tableData = ref<TableItem[]>([]);
|
||||
const getData = async () => {
|
||||
const res = await fetchData()
|
||||
tableData.value = res.data.list;
|
||||
};
|
||||
getData();
|
||||
|
||||
const changePage = (val: number) => {
|
||||
page.index = val;
|
||||
getData();
|
||||
};
|
||||
|
||||
// 新增/编辑弹窗相关
|
||||
let options = ref<FormOption>({
|
||||
labelWidth: '100px',
|
||||
span: 24,
|
||||
list: [
|
||||
{ type: 'input', label: '用户名', prop: 'name', required: true },
|
||||
{ type: 'number', label: '账户余额', prop: 'money', required: true },
|
||||
{ type: 'switch', activeText: '正常', inactiveText: '异常', label: '账户状态', prop: 'state', required: true },
|
||||
{ type: 'upload', label: '头像', prop: 'thumb', required: true },
|
||||
]
|
||||
})
|
||||
const visible = ref(false);
|
||||
const isEdit = ref(false);
|
||||
const rowData = ref({});
|
||||
const handleEdit = (row: TableItem) => {
|
||||
rowData.value = { ...row };
|
||||
isEdit.value = true;
|
||||
visible.value = true;
|
||||
};
|
||||
const updateData = () => {
|
||||
closeDialog();
|
||||
getData();
|
||||
};
|
||||
|
||||
const closeDialog = () => {
|
||||
visible.value = false;
|
||||
isEdit.value = false;
|
||||
};
|
||||
|
||||
// 查看详情弹窗相关
|
||||
const visible1 = ref(false);
|
||||
const viewData = ref({
|
||||
row: {},
|
||||
list: []
|
||||
});
|
||||
const handleView = (row: TableItem) => {
|
||||
viewData.value.row = { ...row }
|
||||
viewData.value.list = [
|
||||
{
|
||||
prop: 'id',
|
||||
label: '用户ID',
|
||||
},
|
||||
{
|
||||
prop: 'name',
|
||||
label: '用户名',
|
||||
},
|
||||
{
|
||||
prop: 'money',
|
||||
label: '账户余额',
|
||||
},
|
||||
{
|
||||
prop: 'state',
|
||||
label: '账户状态',
|
||||
},
|
||||
{
|
||||
prop: 'thumb',
|
||||
label: '头像',
|
||||
},
|
||||
]
|
||||
visible1.value = true;
|
||||
};
|
||||
|
||||
// 删除相关
|
||||
const handleDelete = (row: TableItem) => {
|
||||
ElMessage.success('删除成功');
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.table-td-thumb {
|
||||
display: block;
|
||||
margin: auto;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="container">
|
||||
<div class="handle-box">
|
||||
<el-button type="primary" @click="exportXlsx">导出Excel</el-button>
|
||||
</div>
|
||||
<el-table :data="tableData" border class="table" header-cell-class-name="table-header">
|
||||
<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
|
||||
<el-table-column prop="name" label="姓名"></el-table-column>
|
||||
<el-table-column prop="sno" label="学号"></el-table-column>
|
||||
<el-table-column prop="class" label="班级"></el-table-column>
|
||||
<el-table-column prop="age" label="年龄"></el-table-column>
|
||||
<el-table-column prop="sex" label="性别"></el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="export">
|
||||
import { ref } from 'vue';
|
||||
import * as XLSX from 'xlsx';
|
||||
|
||||
interface TableItem {
|
||||
id: number;
|
||||
name: string;
|
||||
sno: string;
|
||||
class: string;
|
||||
age: string;
|
||||
sex: string;
|
||||
}
|
||||
|
||||
const tableData = ref<TableItem[]>([]);
|
||||
// 获取表格数据
|
||||
const getData = () => {
|
||||
tableData.value = [
|
||||
{
|
||||
id: 1,
|
||||
name: '小明',
|
||||
sno: 'S001',
|
||||
class: '一班',
|
||||
age: '10',
|
||||
sex: '男',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '小红',
|
||||
sno: 'S002',
|
||||
class: '一班',
|
||||
age: '9',
|
||||
sex: '女',
|
||||
},
|
||||
];
|
||||
};
|
||||
getData();
|
||||
|
||||
const list = [['序号', '姓名', '学号', '班级', '年龄', '性别']];
|
||||
const exportXlsx = () => {
|
||||
tableData.value.map((item: any, i: number) => {
|
||||
const arr: any[] = [i + 1];
|
||||
arr.push(...[item.name, item.sno, item.class, item.age, item.sex]);
|
||||
list.push(arr);
|
||||
});
|
||||
let WorkSheet = XLSX.utils.aoa_to_sheet(list);
|
||||
let new_workbook = XLSX.utils.book_new();
|
||||
XLSX.utils.book_append_sheet(new_workbook, WorkSheet, '第一页');
|
||||
XLSX.writeFile(new_workbook, `表格.xlsx`);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.handle-box {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.handle-select {
|
||||
width: 120px;
|
||||
}
|
||||
|
||||
.handle-input {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.red {
|
||||
color: #f56c6c;
|
||||
}
|
||||
|
||||
.table-td-thumb {
|
||||
display: block;
|
||||
margin: auto;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,109 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="container">
|
||||
<div class="handle-box">
|
||||
<el-upload action="#" :limit="1" accept=".xlsx, .xls" :show-file-list="false"
|
||||
:before-upload="beforeUpload" :http-request="handleMany">
|
||||
<el-button class="mr10" type="success">批量导入</el-button>
|
||||
</el-upload>
|
||||
<el-link href="/template.xlsx" target="_blank">下载模板</el-link>
|
||||
</div>
|
||||
<el-table :data="tableData" border class="table" header-cell-class-name="table-header">
|
||||
<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
|
||||
<el-table-column prop="name" label="姓名"></el-table-column>
|
||||
<el-table-column prop="sno" label="学号"></el-table-column>
|
||||
<el-table-column prop="class" label="班级"></el-table-column>
|
||||
<el-table-column prop="age" label="年龄"></el-table-column>
|
||||
<el-table-column prop="sex" label="性别"></el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="import">
|
||||
import { UploadProps } from 'element-plus';
|
||||
import { ref, reactive } from 'vue';
|
||||
import * as XLSX from 'xlsx';
|
||||
|
||||
interface TableItem {
|
||||
id: number;
|
||||
name: string;
|
||||
sno: string;
|
||||
class: string;
|
||||
age: string;
|
||||
sex: string;
|
||||
}
|
||||
|
||||
const tableData = ref<TableItem[]>([]);
|
||||
// 获取表格数据
|
||||
const getData = () => {
|
||||
tableData.value = [
|
||||
{
|
||||
id: 1,
|
||||
name: '小明',
|
||||
sno: 'S001',
|
||||
class: '一班',
|
||||
age: '10',
|
||||
sex: '男',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: '小红',
|
||||
sno: 'S002',
|
||||
class: '一班',
|
||||
age: '9',
|
||||
sex: '女',
|
||||
},
|
||||
];
|
||||
};
|
||||
getData();
|
||||
|
||||
const importList = ref<any>([]);
|
||||
const beforeUpload: UploadProps['beforeUpload'] = async (rawFile) => {
|
||||
importList.value = await analysisExcel(rawFile);
|
||||
return true;
|
||||
};
|
||||
const analysisExcel = (file: any) => {
|
||||
return new Promise(function (resolve, reject) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = function (e: any) {
|
||||
const data = e.target.result;
|
||||
let datajson = XLSX.read(data, {
|
||||
type: 'binary',
|
||||
});
|
||||
|
||||
const sheetName = datajson.SheetNames[0];
|
||||
const result = XLSX.utils.sheet_to_json(datajson.Sheets[sheetName]);
|
||||
resolve(result);
|
||||
};
|
||||
reader.readAsBinaryString(file);
|
||||
});
|
||||
};
|
||||
|
||||
const handleMany = async () => {
|
||||
// 把数据传给服务器后获取最新列表，这里只是示例，不做请求
|
||||
const list = importList.value.map((item: any, index: number) => {
|
||||
return {
|
||||
id: index,
|
||||
name: item['姓名'],
|
||||
sno: item['学号'],
|
||||
class: item['班级'],
|
||||
age: item['年龄'],
|
||||
sex: item['性别'],
|
||||
};
|
||||
});
|
||||
tableData.value.push(...list);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.handle-box {
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
<template>
|
||||
<div class="container">
|
||||
<TableCustom :columns="columns" :tableData="tableData" :hasToolbar="false" :hasPagination="false">
|
||||
<template #name="{ rows }">
|
||||
<el-input v-if="rows.editing" v-model="rows.name"></el-input>
|
||||
<span v-else>{{ rows.name }}</span>
|
||||
</template>
|
||||
<template #password="{ rows }">
|
||||
<el-input v-if="rows.editing" v-model="rows.password"></el-input>
|
||||
<span v-else>{{ rows.password }}</span>
|
||||
</template>
|
||||
<template #email="{ rows }">
|
||||
<el-input v-if="rows.editing" v-model="rows.email"></el-input>
|
||||
<span v-else>{{ rows.email }}</span>
|
||||
</template>
|
||||
<template #role="{ rows }">
|
||||
<el-select v-if="rows.editing" v-model="rows.role">
|
||||
<el-option label="管理员" value="管理员"></el-option>
|
||||
<el-option label="普通用户" value="普通用户"></el-option>
|
||||
</el-select>
|
||||
<span v-else>{{ rows.role }}</span>
|
||||
</template>
|
||||
<template #operator="{ rows, index }">
|
||||
<template v-if="!rows.editing">
|
||||
<el-button type="primary" size="small" :icon="Edit" @click="handleEdit(rows)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button type="danger" size="small" :icon="Delete" @click="">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-button type="success" size="small" :icon="Select" @click="rows.editing = false">
|
||||
保存
|
||||
</el-button>
|
||||
<el-button type="default" size="small" :icon="CloseBold" @click="handleCancel(rows, index)">
|
||||
取消
|
||||
</el-button>
|
||||
</template>
|
||||
</template>
|
||||
</TableCustom>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="table-editor">
|
||||
import { ref } from 'vue';
|
||||
import { Delete, Edit, CloseBold, Select } from '@element-plus/icons-vue';
|
||||
import TableCustom from '@/components/table-custom.vue';
|
||||
import { fetchUserData } from '@/api/index';
|
||||
|
||||
let columns = ref([
|
||||
{ type: 'index', label: '序号', width: 55, align: 'center' },
|
||||
{ prop: 'name', label: '用户名' },
|
||||
{ prop: 'password', label: '密码' },
|
||||
{ prop: 'email', label: '邮箱' },
|
||||
{ prop: 'role', label: '角色' },
|
||||
{ prop: 'operator', label: '操作', width: 180 },
|
||||
])
|
||||
const tableData = ref([]);
|
||||
const getData = async () => {
|
||||
const res = await fetchUserData();
|
||||
tableData.value = res.data.list;
|
||||
};
|
||||
getData();
|
||||
|
||||
const rowData = ref({})
|
||||
|
||||
const handleEdit = (row) => {
|
||||
rowData.value = { ...row };
|
||||
row.editing = true;
|
||||
};
|
||||
|
||||
const handleCancel = (row, index) => {
|
||||
row.editing = false;
|
||||
tableData.value[index] = { ...rowData.value };
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
/// <reference types="vite/client" />
|
||||
|
||||
declare module '*.vue' {
|
||||
import type { DefineComponent } from 'vue'
|
||||
const component: DefineComponent<{}, {}, any>
|
||||
export default component
|
||||
}
|
||||
|
||||
declare module 'vue-schart';
|
||||
declare module 'nprogress'
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "ESNext",
|
||||
"useDefineForClassFields": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Node",
|
||||
"strict": false,
|
||||
"jsx": "preserve",
|
||||
"sourceMap": true,
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"esModuleInterop": true,
|
||||
"lib": ["ESNext", "DOM"],
|
||||
"skipLibCheck": true,
|
||||
"baseUrl": "./",
|
||||
"paths": {
|
||||
"@/*": ["src/*"]
|
||||
}
|
||||
},
|
||||
"include": ["src/**/*.ts", "src/**/*.d.ts","src/**/*.vue"],
|
||||
"references": [{ "path": "./tsconfig.node.json" }]
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Node",
|
||||
"allowSyntheticDefaultImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
import { defineConfig } from 'vite';
|
||||
import vue from '@vitejs/plugin-vue';
|
||||
import VueSetupExtend from 'vite-plugin-vue-setup-extend';
|
||||
import AutoImport from 'unplugin-auto-import/vite';
|
||||
import Components from 'unplugin-vue-components/vite';
|
||||
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
|
||||
export default defineConfig({
|
||||
base: './',
|
||||
plugins: [
|
||||
vue(),
|
||||
VueSetupExtend(),
|
||||
AutoImport({
|
||||
resolvers: [ElementPlusResolver()]
|
||||
}),
|
||||
Components({
|
||||
resolvers: [ElementPlusResolver()]
|
||||
})
|
||||
],
|
||||
optimizeDeps: {
|
||||
include: ['schart.js']
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': '/src',
|
||||
'~': '/src/assets'
|
||||
}
|
||||
},
|
||||
define: {
|
||||
__VUE_PROD_HYDRATION_MISMATCH_DETAILS__: "true",
|
||||
},
|
||||
});
|
||||
Loading…
Reference in New Issue