mirror of
https://github.com/jekip/naive-ui-admin.git
synced 2026-02-09 16:02:27 +08:00
Compare commits
3 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
b4857a7559 | ||
|
|
a6aa6d4d6d | ||
|
|
8fd663e0e5 |
@@ -1,3 +0,0 @@
|
|||||||
> 1%
|
|
||||||
last 2 versions
|
|
||||||
not dead
|
|
||||||
@@ -1,19 +0,0 @@
|
|||||||
root = true
|
|
||||||
|
|
||||||
[*]
|
|
||||||
charset=utf-8
|
|
||||||
end_of_line=lf
|
|
||||||
insert_final_newline=true
|
|
||||||
indent_style=space
|
|
||||||
indent_size=2
|
|
||||||
max_line_length = 100
|
|
||||||
|
|
||||||
[*.{yml,yaml,json}]
|
|
||||||
indent_style = space
|
|
||||||
indent_size = 2
|
|
||||||
|
|
||||||
[*.md]
|
|
||||||
trim_trailing_whitespace = false
|
|
||||||
|
|
||||||
[Makefile]
|
|
||||||
indent_style = tab
|
|
||||||
@@ -1,20 +0,0 @@
|
|||||||
module.exports = {
|
|
||||||
printWidth: 100,
|
|
||||||
tabWidth: 2,
|
|
||||||
useTabs: false,
|
|
||||||
semi: true,
|
|
||||||
vueIndentScriptAndStyle: true,
|
|
||||||
singleQuote: true,
|
|
||||||
quoteProps: 'as-needed',
|
|
||||||
bracketSpacing: true,
|
|
||||||
trailingComma: 'es5',
|
|
||||||
jsxBracketSameLine: false,
|
|
||||||
jsxSingleQuote: false,
|
|
||||||
arrowParens: 'always',
|
|
||||||
insertPragma: false,
|
|
||||||
requirePragma: false,
|
|
||||||
proseWrap: 'never',
|
|
||||||
htmlWhitespaceSensitivity: 'strict',
|
|
||||||
endOfLine: 'lf',
|
|
||||||
rangeStart: 0,
|
|
||||||
};
|
|
||||||
8
.yarnrc
8
.yarnrc
@@ -1,8 +0,0 @@
|
|||||||
registry "https://registry.npm.taobao.org"
|
|
||||||
|
|
||||||
sass_binary_site "https://npm.taobao.org/mirrors/node-sass/"
|
|
||||||
phantomjs_cdnurl "http://cnpmjs.org/downloads"
|
|
||||||
electron_mirror "https://npm.taobao.org/mirrors/electron/"
|
|
||||||
sqlite3_binary_host_mirror "https://foxgis.oss-cn-shanghai.aliyuncs.com/"
|
|
||||||
profiler_binary_host_mirror "https://npm.taobao.org/mirrors/node-inspector/"
|
|
||||||
chromedriver_cdnurl "https://cdn.npm.taobao.org/dist/chromedriver"
|
|
||||||
14
CHANGELOG.md
14
CHANGELOG.md
@@ -1,3 +1,17 @@
|
|||||||
|
# 1.2 (2021-07-16)
|
||||||
|
### 🐛 Bug Fixes
|
||||||
|
- 修复面包屑显示登录页面
|
||||||
|
- 菜单支持只展开当前父级菜单
|
||||||
|
|
||||||
|
- ### ✨ Features
|
||||||
|
- 新增 `列表页面-基础列表` 示例页面
|
||||||
|
- 新增 `异常页面-404-403-500` 示例页面
|
||||||
|
- 新增 `结果页面-成功-失败-信息` 示例页面
|
||||||
|
- 新增 `设置页面-个人设置-系统设置` 示例页面
|
||||||
|
- tips `示例页面，可能在深色主题显示不佳`
|
||||||
|
- 持续更新更多实用示例，同时也演示`Naive UI`使用方法
|
||||||
|
|
||||||
|
|
||||||
# 1.1 (2021-07-15)
|
# 1.1 (2021-07-15)
|
||||||
- ### ✨ Features
|
- ### ✨ Features
|
||||||
- 新增 `基础表单` 示例页面
|
- 新增 `基础表单` 示例页面
|
||||||
|
|||||||
2
LICENSE
2
LICENSE
@@ -1,6 +1,6 @@
|
|||||||
MIT License
|
MIT License
|
||||||
|
|
||||||
Copyright (c) 2020 bqy
|
Copyright (c) 2021-present Naive Ui Admin
|
||||||
|
|
||||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
of this software and associated documentation files (the "Software"), to deal
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
|||||||
@@ -15,6 +15,11 @@ Naive Ui Admin 是一个免费开源的中后台模版，使用了最新的`vue3
|
|||||||
- [x] 主控台
|
- [x] 主控台
|
||||||
- [ ] 监控页
|
- [ ] 监控页
|
||||||
- [x] 工作台
|
- [x] 工作台
|
||||||
|
- [x] 表单页面
|
||||||
|
- [x] 列表页面
|
||||||
|
- [x] 异常页面
|
||||||
|
- [x] 结果页面
|
||||||
|
- [x] 设置页面
|
||||||
|
|
||||||
### 页面组件
|
### 页面组件
|
||||||
#### ProTable
|
#### ProTable
|
||||||
|
|||||||
76
index.html
76
index.html
@@ -10,81 +10,13 @@
|
|||||||
/>
|
/>
|
||||||
<link rel="icon" href="/favicon.ico"/>
|
<link rel="icon" href="/favicon.ico"/>
|
||||||
<title><%= title %></title>
|
<title><%= title %></title>
|
||||||
|
<style>.first-loading-wrp{display:flex;justify-content:center;align-items:center;flex-direction:column;min-height:420px;height:100%}.first-loading-wrp>h1{font-size:128px}.first-loading-wrp .loading-wrp{padding:98px;display:flex;justify-content:center;align-items:center}.dot{animation:antRotate 1.2s infinite linear;transform:rotate(45deg);position:relative;display:inline-block;font-size:32px;width:32px;height:32px;box-sizing:border-box}.dot i{width:14px;height:14px;position:absolute;display:block;background-color:#1890ff;border-radius:100%;transform:scale(.75);transform-origin:50% 50%;opacity:.3;animation:antSpinMove 1s infinite linear alternate}.dot i:nth-child(1){top:0;left:0}.dot i:nth-child(2){top:0;right:0;-webkit-animation-delay:.4s;animation-delay:.4s}.dot i:nth-child(3){right:0;bottom:0;-webkit-animation-delay:.8s;animation-delay:.8s}.dot i:nth-child(4){bottom:0;left:0;-webkit-animation-delay:1.2s;animation-delay:1.2s}@keyframes antRotate{to{-webkit-transform:rotate(405deg);transform:rotate(405deg)}}@-webkit-keyframes antRotate{to{-webkit-transform:rotate(405deg);transform:rotate(405deg)}}@keyframes antSpinMove{to{opacity:1}}@-webkit-keyframes antSpinMove{to{opacity:1}}</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app">
|
<div id="app">
|
||||||
<style>
|
<div class="first-loading-wrp">
|
||||||
.app-loading-main {
|
<div class="loading-wrp">
|
||||||
display: flex;
|
<span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
min-width: 100%;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
flex-direction: column;
|
|
||||||
background-color: #f4f7f9;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app-loading {
|
|
||||||
position: relative;
|
|
||||||
-webkit-transform: translateY(-15px);
|
|
||||||
-ms-transform: translateY(-15px);
|
|
||||||
transform: translateY(-15px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.app-loading > div {
|
|
||||||
-webkit-animation-fill-mode: both;
|
|
||||||
animation-fill-mode: both;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
border-radius: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app-loading > div:first-child {
|
|
||||||
background: #2d8cf0;
|
|
||||||
height: 16px;
|
|
||||||
width: 16px;
|
|
||||||
top: 9px;
|
|
||||||
left: 9px;
|
|
||||||
-webkit-animation: scale 1s 0s cubic-bezier(.09, .57, .49, .9) infinite;
|
|
||||||
animation: scale 1s 0s cubic-bezier(.09, .57, .49, .9) infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.app-loading > div:last-child {
|
|
||||||
position: absolute;
|
|
||||||
border: 2px solid #2d8cf0;
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
background: transparent;
|
|
||||||
border: 2px solid;
|
|
||||||
border-color: #2d8cf0 transparent #2d8cf0 transparent;
|
|
||||||
-webkit-animation: rotate 1s 0s cubic-bezier(.09, .57, .49, .9) infinite;
|
|
||||||
animation: rotate 1s 0s cubic-bezier(.09, .57, .49, .9) infinite;
|
|
||||||
-webkit-animation-duration: 1s;
|
|
||||||
animation-duration: 1s;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes rotate {
|
|
||||||
0% {
|
|
||||||
-webkit-transform: rotate(0deg) scale(1);
|
|
||||||
transform: rotate(0deg) scale(1);
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
-webkit-transform: rotate(180deg) scale(0.6);
|
|
||||||
transform: rotate(180deg) scale(0.6);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
-webkit-transform: rotate(360deg) scale(1);
|
|
||||||
transform: rotate(360deg) scale(1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<div class="app-loading-main">
|
|
||||||
<div class="app-loading">
|
|
||||||
<div></div>
|
|
||||||
<div></div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "naive-ui-admin",
|
"name": "naive-ui-admin",
|
||||||
"version": "1.1",
|
"version": "1.2",
|
||||||
"author": {
|
"author": {
|
||||||
"name": "Ahjung",
|
"name": "Ahjung",
|
||||||
"email": "735878602@qq.com",
|
"email": "735878602@qq.com",
|
||||||
@@ -33,7 +33,7 @@
|
|||||||
"lodash-es": "^4.17.21",
|
"lodash-es": "^4.17.21",
|
||||||
"mitt": "^2.1.0",
|
"mitt": "^2.1.0",
|
||||||
"mockjs": "^1.1.0",
|
"mockjs": "^1.1.0",
|
||||||
"naive-ui": "^2.15.4",
|
"naive-ui": "^2.15.5",
|
||||||
"nprogress": "^1.0.0-1",
|
"nprogress": "^1.0.0-1",
|
||||||
"pinia": "^2.0.0-beta.3",
|
"pinia": "^2.0.0-beta.3",
|
||||||
"qs": "^6.10.1",
|
"qs": "^6.10.1",
|
||||||
|
|||||||
1
src/assets/images/exception/403.svg
Normal file
1
src/assets/images/exception/403.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 18 KiB |
1
src/assets/images/exception/404.svg
Normal file
1
src/assets/images/exception/404.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 30 KiB |
1
src/assets/images/exception/500.svg
Normal file
1
src/assets/images/exception/500.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 32 KiB |
1
src/assets/images/exception/developing.svg
Normal file
1
src/assets/images/exception/developing.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 24 KiB |
1
src/assets/images/exception/load-error.svg
Normal file
1
src/assets/images/exception/load-error.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 31 KiB |
1
src/assets/images/exception/nodata.svg
Normal file
1
src/assets/images/exception/nodata.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 20 KiB |
@@ -11,7 +11,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent, computed, ref, onMounted, onUnmounted } from 'vue'
|
import { defineComponent } from 'vue'
|
||||||
import { MessageContent } from '@/components/MessageContent'
|
import { MessageContent } from '@/components/MessageContent'
|
||||||
import { DialogContent } from '@/components/DialogContent'
|
import { DialogContent } from '@/components/DialogContent'
|
||||||
|
|
||||||
|
|||||||
@@ -2,20 +2,22 @@
|
|||||||
<div class="table-toolbar">
|
<div class="table-toolbar">
|
||||||
|
|
||||||
<!--顶部左侧区域-->
|
<!--顶部左侧区域-->
|
||||||
<n-space align="center" class="table-toolbar-left">
|
<div class="flex items-center table-toolbar-left ">
|
||||||
<div class="table-toolbar-left-title" v-if="title">
|
<template v-if="title">
|
||||||
{{ title }}
|
<div class="table-toolbar-left-title">
|
||||||
<n-tooltip trigger="hover" v-if="titleTooltip">
|
{{ title }}
|
||||||
<template #trigger>
|
<n-tooltip trigger="hover" v-if="titleTooltip">
|
||||||
<n-icon size="18" class="ml-1 cursor-pointer text-gray-400">
|
<template #trigger>
|
||||||
<QuestionCircleOutlined/>
|
<n-icon size="18" class="ml-1 cursor-pointer text-gray-400">
|
||||||
</n-icon>
|
<QuestionCircleOutlined/>
|
||||||
</template>
|
</n-icon>
|
||||||
{{ titleTooltip }}
|
</template>
|
||||||
</n-tooltip>
|
{{ titleTooltip }}
|
||||||
</div>
|
</n-tooltip>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
<slot name="tableTitle"></slot>
|
<slot name="tableTitle"></slot>
|
||||||
</n-space>
|
</div>
|
||||||
|
|
||||||
<div class="flex items-center table-toolbar-right">
|
<div class="flex items-center table-toolbar-right">
|
||||||
|
|
||||||
@@ -276,7 +278,6 @@ export default defineComponent({
|
|||||||
flex: 1;
|
flex: 1;
|
||||||
|
|
||||||
&-icon {
|
&-icon {
|
||||||
height: 18px;
|
|
||||||
margin-left: 12px;
|
margin-left: 12px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|||||||
@@ -222,12 +222,10 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
&-right {
|
&-right {
|
||||||
&-icon {
|
&-icon {
|
||||||
height: 18px;
|
|
||||||
margin-left: 12px;
|
margin-left: 12px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
color:var(--text-color);
|
color:var(--text-color);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
:hover {
|
:hover {
|
||||||
color: #1890ff;
|
color: #1890ff;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,10 +1,10 @@
|
|||||||
export enum PageEnum {
|
export enum PageEnum {
|
||||||
// basic login path
|
// 登录
|
||||||
BASE_LOGIN = '/login',
|
BASE_LOGIN = '/login',
|
||||||
// basic home path
|
//重定向
|
||||||
|
REDIRECT = '/Redirect',
|
||||||
|
// 首页
|
||||||
BASE_HOME = '/dashboard',
|
BASE_HOME = '/dashboard',
|
||||||
// error page path
|
// 错误
|
||||||
ERROR_PAGE = '/exception',
|
ERROR_PAGE = '/exception',
|
||||||
// error log page path
|
|
||||||
ERROR_LOG_PAGE = '/error-log/list',
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { computed, unref, ref } from 'vue';
|
import { computed } from 'vue';
|
||||||
import { useDesignSettingStore } from '@/store/modules/designSetting';
|
import { useDesignSettingStore } from '@/store/modules/designSetting';
|
||||||
|
|
||||||
export function useDesignSetting() {
|
export function useDesignSetting() {
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { computed, unref, ref } from 'vue';
|
import { computed } from 'vue';
|
||||||
import { useProjectSettingStore } from '@/store/modules/projectSetting';
|
import { useProjectSettingStore } from '@/store/modules/projectSetting';
|
||||||
|
|
||||||
export function useProjectSetting() {
|
export function useProjectSetting() {
|
||||||
|
|||||||
@@ -12,7 +12,7 @@
|
|||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="copyright">
|
<div class="copyright">
|
||||||
naive-ui-admin 1.1 · Made by Ah jung
|
naive-ui-admin 1.2 · Made by Ah jung
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -1,5 +1,3 @@
|
|||||||
import { NLayout, NAvatar, NMenu, NDropdown, NBreadcrumb, NTooltip } from 'naive-ui'
|
|
||||||
|
|
||||||
import {
|
import {
|
||||||
SettingOutlined,
|
SettingOutlined,
|
||||||
SearchOutlined,
|
SearchOutlined,
|
||||||
@@ -18,7 +16,6 @@ import {
|
|||||||
|
|
||||||
export default {
|
export default {
|
||||||
SettingOutlined,
|
SettingOutlined,
|
||||||
NDropdown,
|
|
||||||
LockOutlined,
|
LockOutlined,
|
||||||
GithubOutlined,
|
GithubOutlined,
|
||||||
SearchOutlined,
|
SearchOutlined,
|
||||||
|
|||||||
@@ -256,7 +256,7 @@ export default defineComponent({
|
|||||||
]
|
]
|
||||||
const avatarOptions = [
|
const avatarOptions = [
|
||||||
{
|
{
|
||||||
label: '个人中心',
|
label: '个人设置',
|
||||||
key: 1
|
key: 1
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
@@ -269,7 +269,7 @@ export default defineComponent({
|
|||||||
const avatarSelect = (key) => {
|
const avatarSelect = (key) => {
|
||||||
switch (key) {
|
switch (key) {
|
||||||
case 1:
|
case 1:
|
||||||
openUserCentre()
|
router.push({name:'Setting'})
|
||||||
break;
|
break;
|
||||||
case 2:
|
case 2:
|
||||||
doLogout()
|
doLogout()
|
||||||
@@ -282,13 +282,6 @@ export default defineComponent({
|
|||||||
openDrawer()
|
openDrawer()
|
||||||
}
|
}
|
||||||
|
|
||||||
function openUserCentre() {
|
|
||||||
notification.info({
|
|
||||||
content: '提示',
|
|
||||||
meta: '客官，该功能正在开发中呢...'
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
...toRefs(state),
|
...toRefs(state),
|
||||||
iconList,
|
iconList,
|
||||||
|
|||||||
@@ -1,14 +1,22 @@
|
|||||||
<template>
|
<template>
|
||||||
<NMenu :options="menus" :inverted="inverted" :mode="mode" :collapsed="collapsed" :collapsed-width="64"
|
<NMenu
|
||||||
:collapsed-icon-size="20"
|
:options="menus"
|
||||||
@update:value="clickMenuItem" :default-expanded-keys="openKeys" v-model:value="selectedKeys">
|
:inverted="inverted"
|
||||||
|
:mode="mode"
|
||||||
|
:collapsed="collapsed"
|
||||||
|
:collapsed-width="64"
|
||||||
|
:collapsed-icon-size="20"
|
||||||
|
:expanded-keys="openKeys"
|
||||||
|
v-model:value="selectedKeys"
|
||||||
|
@update:value="clickMenuItem"
|
||||||
|
@update:expanded-keys="menuExpanded"
|
||||||
|
>
|
||||||
</NMenu>
|
</NMenu>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent, reactive, computed, watch, toRefs, ref } from 'vue'
|
import { defineComponent, reactive, computed, watch, toRefs, ref } from 'vue'
|
||||||
import { useRoute, useRouter } from 'vue-router'
|
import { useRoute, useRouter } from 'vue-router'
|
||||||
import { useUserStore } from '@/store/modules/user'
|
|
||||||
import { useAsyncRouteStore } from '@/store/modules/asyncRoute'
|
import { useAsyncRouteStore } from '@/store/modules/asyncRoute'
|
||||||
import { generatorMenu } from '@/utils/index'
|
import { generatorMenu } from '@/utils/index'
|
||||||
import { useProjectSettingStore } from "@/store/modules/projectSetting";
|
import { useProjectSettingStore } from "@/store/modules/projectSetting";
|
||||||
@@ -32,14 +40,16 @@ export default defineComponent({
|
|||||||
const currentRoute = useRoute()
|
const currentRoute = useRoute()
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const asyncRouteStore = useAsyncRouteStore()
|
const asyncRouteStore = useAsyncRouteStore()
|
||||||
const userStore = useUserStore()
|
|
||||||
const settingStore = useProjectSettingStore()
|
const settingStore = useProjectSettingStore()
|
||||||
const { mode } = props
|
const { mode } = props
|
||||||
|
|
||||||
// 获取当前打开的子菜单
|
// 获取当前打开的子菜单
|
||||||
const getOpenKeys = () => [currentRoute.matched[0]?.name]
|
const matched = currentRoute.matched
|
||||||
|
|
||||||
|
const getOpenKeys = matched && matched.length ? [matched[0]?.name] : []
|
||||||
|
|
||||||
const state = reactive({
|
const state = reactive({
|
||||||
openKeys: getOpenKeys(),
|
openKeys: getOpenKeys,
|
||||||
selectedKeys: currentRoute.name,
|
selectedKeys: currentRoute.name,
|
||||||
})
|
})
|
||||||
|
|
||||||
@@ -53,25 +63,23 @@ export default defineComponent({
|
|||||||
|
|
||||||
// 监听菜单收缩状态
|
// 监听菜单收缩状态
|
||||||
watch(
|
watch(
|
||||||
() => props.collapsed,
|
() => props.collapsed,
|
||||||
(newVal) => {
|
(newVal) => {
|
||||||
state.openKeys = newVal ? [] : getOpenKeys()
|
state.openKeys = newVal ? [] : getOpenKeys
|
||||||
state.selectedKeys = currentRoute.name
|
state.selectedKeys = currentRoute.name
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
|
||||||
// 跟随页面路由变化，切换菜单选中状态
|
// 跟随页面路由变化，切换菜单选中状态
|
||||||
watch(
|
watch(
|
||||||
() => currentRoute.fullPath,
|
() => currentRoute.fullPath,
|
||||||
() => {
|
() => {
|
||||||
if (currentRoute.name == 'login' || props.collapsed) return
|
state.selectedKeys = currentRoute.name
|
||||||
state.openKeys = getOpenKeys()
|
}
|
||||||
state.selectedKeys = currentRoute.name
|
|
||||||
}
|
|
||||||
)
|
)
|
||||||
|
|
||||||
// 点击菜单
|
// 点击菜单
|
||||||
const clickMenuItem = (key, item) => {
|
function clickMenuItem(key: string) {
|
||||||
if (/http(s)?:/.test(key)) {
|
if (/http(s)?:/.test(key)) {
|
||||||
window.open(key)
|
window.open(key)
|
||||||
} else {
|
} else {
|
||||||
@@ -79,12 +87,20 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//展开菜单
|
||||||
|
function menuExpanded(openKeys: string[]) {
|
||||||
|
if (!openKeys) return
|
||||||
|
const latestOpenKey = openKeys.pop();
|
||||||
|
state.openKeys = latestOpenKey ? [latestOpenKey] : []
|
||||||
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
...toRefs(state),
|
...toRefs(state),
|
||||||
inverted,
|
inverted,
|
||||||
menus,
|
menus,
|
||||||
mode,
|
mode,
|
||||||
clickMenuItem
|
clickMenuItem,
|
||||||
|
menuExpanded
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -22,7 +22,10 @@
|
|||||||
<div ref="navRef" class="tabs-card-nav" :style="getNavStyle">
|
<div ref="navRef" class="tabs-card-nav" :style="getNavStyle">
|
||||||
<Draggable :list="tabsList" animation="300" item-key="fullPath">
|
<Draggable :list="tabsList" animation="300" item-key="fullPath">
|
||||||
<template #item="{element}">
|
<template #item="{element}">
|
||||||
<div class="tabs-card-scroll-item" @click.stop="goPage(element)" @contextmenu="handleContextMenu">
|
<div class="tabs-card-scroll-item"
|
||||||
|
:class="{'active-item':activeKey === element.path }"
|
||||||
|
@click.stop="goPage(element)"
|
||||||
|
@contextmenu="handleContextMenu">
|
||||||
<span>{{ element.meta.title }}</span>
|
<span>{{ element.meta.title }}</span>
|
||||||
<n-icon size="14" @click.stop="closeTabItem(element)">
|
<n-icon size="14" @click.stop="closeTabItem(element)">
|
||||||
<CloseOutlined/>
|
<CloseOutlined/>
|
||||||
@@ -59,6 +62,7 @@ import { RouteItem } from '@/store/modules/tabsView'
|
|||||||
import { useProjectSetting } from '@/hooks/setting/useProjectSetting'
|
import { useProjectSetting } from '@/hooks/setting/useProjectSetting'
|
||||||
import { useMessage } from 'naive-ui'
|
import { useMessage } from 'naive-ui'
|
||||||
import Draggable from 'vuedraggable/src/vuedraggable'
|
import Draggable from 'vuedraggable/src/vuedraggable'
|
||||||
|
import { PageEnum } from '@/enums/pageEnum'
|
||||||
import {
|
import {
|
||||||
DownOutlined,
|
DownOutlined,
|
||||||
ReloadOutlined,
|
ReloadOutlined,
|
||||||
@@ -199,8 +203,7 @@ export default defineComponent({
|
|||||||
|
|
||||||
// 标签页列表
|
// 标签页列表
|
||||||
const tabsList: any = computed(() => tabsViewStore.tabsList)
|
const tabsList: any = computed(() => tabsViewStore.tabsList)
|
||||||
|
const whiteList = [PageEnum.REDIRECT, PageEnum.BASE_LOGIN]
|
||||||
const whiteList = ['Redirect', 'login']
|
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => route.fullPath,
|
() => route.fullPath,
|
||||||
@@ -516,6 +519,9 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.active-item{
|
||||||
|
color: #2d8cf0
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
36
src/main.ts
36
src/main.ts
@@ -5,25 +5,31 @@ import router, { setupRouter } from './router'
|
|||||||
import { setupStore } from '@/store'
|
import { setupStore } from '@/store'
|
||||||
import { setupNaive, setupDirectives, setupGlobalMethods, setupCustomComponents } from '@/plugins'
|
import { setupNaive, setupDirectives, setupGlobalMethods, setupCustomComponents } from '@/plugins'
|
||||||
|
|
||||||
const app = createApp(App)
|
async function bootstrap() {
|
||||||
|
const app = createApp(App)
|
||||||
|
|
||||||
// 注册全局常用的 naive-ui 组件
|
// 注册全局常用的 naive-ui 组件
|
||||||
setupNaive(app)
|
setupNaive(app)
|
||||||
|
|
||||||
// 注册全局自定义组件,如：<svg-icon />
|
// 注册全局自定义组件,如：<svg-icon />
|
||||||
setupCustomComponents(app)
|
setupCustomComponents(app)
|
||||||
|
|
||||||
// 注册全局自定义指令，如：v-permission权限指令
|
// 注册全局自定义指令，如：v-permission权限指令
|
||||||
setupDirectives(app)
|
setupDirectives(app)
|
||||||
|
|
||||||
// 注册全局方法，如：app.config.globalProperties.$message = message
|
// 注册全局方法，如：app.config.globalProperties.$message = message
|
||||||
setupGlobalMethods(app)
|
setupGlobalMethods(app)
|
||||||
|
|
||||||
// 挂载状态管理
|
// 挂载状态管理
|
||||||
setupStore(app)
|
setupStore(app)
|
||||||
|
|
||||||
// 挂载路由
|
// 挂载路由
|
||||||
setupRouter(app)
|
await setupRouter(app)
|
||||||
|
|
||||||
// 路由准备就绪后挂载APP实例
|
// 路由准备就绪后挂载APP实例
|
||||||
router.isReady().then(() => app.mount('#app'))
|
await router.isReady();
|
||||||
|
|
||||||
|
app.mount('#app', true);
|
||||||
|
}
|
||||||
|
|
||||||
|
void bootstrap()
|
||||||
|
|||||||
@@ -56,7 +56,10 @@ import {
|
|||||||
NResult,
|
NResult,
|
||||||
NDescriptions,
|
NDescriptions,
|
||||||
NDescriptionsItem,
|
NDescriptionsItem,
|
||||||
NTable
|
NTable,
|
||||||
|
NInputNumber,
|
||||||
|
NLoadingBarProvider,
|
||||||
|
NModal
|
||||||
} from 'naive-ui'
|
} from 'naive-ui'
|
||||||
|
|
||||||
const naive = create({
|
const naive = create({
|
||||||
@@ -116,7 +119,10 @@ const naive = create({
|
|||||||
NResult,
|
NResult,
|
||||||
NDescriptions,
|
NDescriptions,
|
||||||
NDescriptionsItem,
|
NDescriptionsItem,
|
||||||
NTable
|
NTable,
|
||||||
|
NInputNumber,
|
||||||
|
NLoadingBarProvider,
|
||||||
|
NModal
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@@ -1,24 +1,6 @@
|
|||||||
import { MainView } from '@/layout/components/Main'
|
|
||||||
|
|
||||||
export const RedirectName = 'Redirect';
|
export const RedirectName = 'Redirect';
|
||||||
|
|
||||||
export const ParentLayout = 'ParentLayout';
|
|
||||||
|
|
||||||
export const ErrorPage = () => import('@/views/exception/404.vue');
|
export const ErrorPage = () => import('@/views/exception/404.vue');
|
||||||
|
|
||||||
/**
|
|
||||||
* @description: default layout
|
|
||||||
*/
|
|
||||||
export const Layout = () => import('@/layout/index.vue');
|
export const Layout = () => import('@/layout/index.vue');
|
||||||
|
|
||||||
/**
|
|
||||||
* @description: parent-layout
|
|
||||||
*/
|
|
||||||
export const getParentLayout = (_name?: string) => {
|
|
||||||
return () =>
|
|
||||||
new Promise((resolve) => {
|
|
||||||
resolve({
|
|
||||||
name: PARENT_LAYOUT_NAME,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|||||||
@@ -1,8 +1,7 @@
|
|||||||
import { adminMenus } from '@/api/system/menu'
|
import { adminMenus } from '@/api/system/menu'
|
||||||
import { constantRouterComponents, constantRouterIcon } from './constantRouterComponents'
|
import { constantRouterComponents, constantRouterIcon } from './constantRouterComponents'
|
||||||
import router from '@/router/index'
|
import router from '@/router/index'
|
||||||
import { constantRouter, asyncRoutes } from '@/router/index'
|
import { constantRouter } from '@/router/index'
|
||||||
import { NEmpty } from 'naive-ui'
|
|
||||||
import { RouteRecordRaw } from 'vue-router'
|
import { RouteRecordRaw } from 'vue-router'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -12,9 +11,9 @@ import { RouteRecordRaw } from 'vue-router'
|
|||||||
* @param parent
|
* @param parent
|
||||||
* @returns {*}
|
* @returns {*}
|
||||||
*/
|
*/
|
||||||
export const routerGenerator = (routerMap, parent) => {
|
export const routerGenerator = (routerMap, parent?):any[] => {
|
||||||
return routerMap.map(item => {
|
return routerMap.map(item => {
|
||||||
const currentRouter = {
|
const currentRouter:any = {
|
||||||
// 路由地址 动态拼接生成如 /dashboard/workplace
|
// 路由地址 动态拼接生成如 /dashboard/workplace
|
||||||
path: `${ parent && parent.path || '' }/${ item.path }`,
|
path: `${ parent && parent.path || '' }/${ item.path }`,
|
||||||
// 路由名称，建议唯一
|
// 路由名称，建议唯一
|
||||||
@@ -53,12 +52,6 @@ export const generatorDynamicRouter = (): Promise<RouteRecordRaw[]> => {
|
|||||||
adminMenus()
|
adminMenus()
|
||||||
.then((result) => {
|
.then((result) => {
|
||||||
const routeList = routerGenerator(result)
|
const routeList = routerGenerator(result)
|
||||||
// 设置模块重定向到菜单
|
|
||||||
// routeList.forEach((item) => {
|
|
||||||
// if (item.children?.length > 0 && !item.redirect) {
|
|
||||||
// item.redirect = { name: item.children[0].name }
|
|
||||||
// }
|
|
||||||
// })
|
|
||||||
const asyncRoutesList = [...constantRouter, ...routeList]
|
const asyncRoutesList = [...constantRouter, ...routeList]
|
||||||
asyncRoutesList.forEach(item => {
|
asyncRoutesList.forEach(item => {
|
||||||
router.addRoute(item)
|
router.addRoute(item)
|
||||||
|
|||||||
@@ -24,16 +24,16 @@ const routes: Array<RouteRecordRaw> = [
|
|||||||
redirect: '/comp/console',
|
redirect: '/comp/console',
|
||||||
component: Layout,
|
component: Layout,
|
||||||
meta: {
|
meta: {
|
||||||
title: '组件',
|
title: '组件示例',
|
||||||
icon: renderIcon(WalletOutlined ),
|
icon: renderIcon(WalletOutlined ),
|
||||||
sort: 1
|
sort: 8
|
||||||
},
|
},
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
path: 'table',
|
path: 'table',
|
||||||
name: `${ routeName }_table`,
|
name: `${ routeName }_table`,
|
||||||
meta: {
|
meta: {
|
||||||
title: '基础表格',
|
title: '表格',
|
||||||
},
|
},
|
||||||
component: () => import('@/views/comp/table/list.vue')
|
component: () => import('@/views/comp/table/list.vue')
|
||||||
}
|
}
|
||||||
|
|||||||
57
src/router/modules/exception.ts
Normal file
57
src/router/modules/exception.ts
Normal file
@@ -0,0 +1,57 @@
|
|||||||
|
import { RouteRecordRaw } from 'vue-router'
|
||||||
|
import { Layout } from '@/router/constant';
|
||||||
|
import { ExclamationCircleOutlined } from '@vicons/antd'
|
||||||
|
import { renderIcon } from '@/utils/index'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param name 路由名称, 必须设置,且不能重名
|
||||||
|
* @param meta 路由元信息（路由附带扩展信息）
|
||||||
|
* @param redirect 重定向地址, 访问这个路由时,自定进行重定向
|
||||||
|
* @param meta.disabled 禁用整个菜单
|
||||||
|
* @param meta.title 菜单名称
|
||||||
|
* @param meta.icon 菜单图标
|
||||||
|
* @param meta.keepAlive 缓存该路由
|
||||||
|
* @param meta.sort 排序越小越排前
|
||||||
|
*
|
||||||
|
* */
|
||||||
|
const routes: Array<RouteRecordRaw> = [
|
||||||
|
{
|
||||||
|
path: '/exception',
|
||||||
|
name: 'Exception',
|
||||||
|
redirect: '/exception/403',
|
||||||
|
component: Layout,
|
||||||
|
meta: {
|
||||||
|
title: '异常页面',
|
||||||
|
icon: renderIcon(ExclamationCircleOutlined),
|
||||||
|
sort: 3
|
||||||
|
},
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: '403',
|
||||||
|
name: 'exception-403',
|
||||||
|
meta: {
|
||||||
|
title: '403',
|
||||||
|
},
|
||||||
|
component: () => import('@/views/exception/403.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '404',
|
||||||
|
name: 'exception-404',
|
||||||
|
meta: {
|
||||||
|
title: '404',
|
||||||
|
},
|
||||||
|
component: () => import('@/views/exception/404.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '500',
|
||||||
|
name: 'exception-500',
|
||||||
|
meta: {
|
||||||
|
title: '500',
|
||||||
|
},
|
||||||
|
component: () => import('@/views/exception/500.vue')
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
export default routes
|
||||||
41
src/router/modules/list.ts
Normal file
41
src/router/modules/list.ts
Normal file
@@ -0,0 +1,41 @@
|
|||||||
|
import { RouteRecordRaw } from 'vue-router'
|
||||||
|
import { Layout } from '@/router/constant';
|
||||||
|
import { TableOutlined } from '@vicons/antd'
|
||||||
|
import { renderIcon } from '@/utils/index'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param name 路由名称, 必须设置,且不能重名
|
||||||
|
* @param meta 路由元信息（路由附带扩展信息）
|
||||||
|
* @param redirect 重定向地址, 访问这个路由时,自定进行重定向
|
||||||
|
* @param meta.disabled 禁用整个菜单
|
||||||
|
* @param meta.title 菜单名称
|
||||||
|
* @param meta.icon 菜单图标
|
||||||
|
* @param meta.keepAlive 缓存该路由
|
||||||
|
* @param meta.sort 排序越小越排前
|
||||||
|
*
|
||||||
|
* */
|
||||||
|
const routes: Array<RouteRecordRaw> = [
|
||||||
|
{
|
||||||
|
path: '/list',
|
||||||
|
name: 'List',
|
||||||
|
redirect: '/list/basic-list',
|
||||||
|
component: Layout,
|
||||||
|
meta: {
|
||||||
|
title: '列表页面',
|
||||||
|
icon: renderIcon(TableOutlined),
|
||||||
|
sort: 1
|
||||||
|
},
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: 'basic-list',
|
||||||
|
name: 'basic-list',
|
||||||
|
meta: {
|
||||||
|
title: '基础列表',
|
||||||
|
},
|
||||||
|
component: () => import('@/views/list/basicList/index.vue')
|
||||||
|
}
|
||||||
|
],
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
export default routes
|
||||||
57
src/router/modules/result.ts
Normal file
57
src/router/modules/result.ts
Normal file
@@ -0,0 +1,57 @@
|
|||||||
|
import { RouteRecordRaw } from 'vue-router'
|
||||||
|
import { Layout } from '@/router/constant';
|
||||||
|
import { CheckCircleOutlined } from '@vicons/antd'
|
||||||
|
import { renderIcon } from '@/utils/index'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param name 路由名称, 必须设置,且不能重名
|
||||||
|
* @param meta 路由元信息（路由附带扩展信息）
|
||||||
|
* @param redirect 重定向地址, 访问这个路由时,自定进行重定向
|
||||||
|
* @param meta.disabled 禁用整个菜单
|
||||||
|
* @param meta.title 菜单名称
|
||||||
|
* @param meta.icon 菜单图标
|
||||||
|
* @param meta.keepAlive 缓存该路由
|
||||||
|
* @param meta.sort 排序越小越排前
|
||||||
|
*
|
||||||
|
* */
|
||||||
|
const routes: Array<RouteRecordRaw> = [
|
||||||
|
{
|
||||||
|
path: '/result',
|
||||||
|
name: 'Result',
|
||||||
|
redirect: '/result/success',
|
||||||
|
component: Layout,
|
||||||
|
meta: {
|
||||||
|
title: '结果页面',
|
||||||
|
icon: renderIcon(CheckCircleOutlined),
|
||||||
|
sort: 4
|
||||||
|
},
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: 'success',
|
||||||
|
name: 'result-success',
|
||||||
|
meta: {
|
||||||
|
title: '成功页',
|
||||||
|
},
|
||||||
|
component: () => import('@/views/result/success.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'fail',
|
||||||
|
name: 'result-fail',
|
||||||
|
meta: {
|
||||||
|
title: '失败页',
|
||||||
|
},
|
||||||
|
component: () => import('@/views/result/fail.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'info',
|
||||||
|
name: 'result-info',
|
||||||
|
meta: {
|
||||||
|
title: '信息页',
|
||||||
|
},
|
||||||
|
component: () => import('@/views/result/info.vue')
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
export default routes
|
||||||
49
src/router/modules/setting.ts
Normal file
49
src/router/modules/setting.ts
Normal file
@@ -0,0 +1,49 @@
|
|||||||
|
import { RouteRecordRaw } from 'vue-router'
|
||||||
|
import { Layout } from '@/router/constant';
|
||||||
|
import { SettingOutlined } from '@vicons/antd'
|
||||||
|
import { renderIcon } from '@/utils/index'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param name 路由名称, 必须设置,且不能重名
|
||||||
|
* @param meta 路由元信息（路由附带扩展信息）
|
||||||
|
* @param redirect 重定向地址, 访问这个路由时,自定进行重定向
|
||||||
|
* @param meta.disabled 禁用整个菜单
|
||||||
|
* @param meta.title 菜单名称
|
||||||
|
* @param meta.icon 菜单图标
|
||||||
|
* @param meta.keepAlive 缓存该路由
|
||||||
|
* @param meta.sort 排序越小越排前
|
||||||
|
*
|
||||||
|
* */
|
||||||
|
const routes: Array<RouteRecordRaw> = [
|
||||||
|
{
|
||||||
|
path: '/setting',
|
||||||
|
name: 'Setting',
|
||||||
|
redirect: '/setting/account',
|
||||||
|
component: Layout,
|
||||||
|
meta: {
|
||||||
|
title: '设置页面',
|
||||||
|
icon: renderIcon(SettingOutlined),
|
||||||
|
sort: 5
|
||||||
|
},
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: 'account',
|
||||||
|
name: 'setting-account',
|
||||||
|
meta: {
|
||||||
|
title: '个人设置',
|
||||||
|
},
|
||||||
|
component: () => import('@/views/setting/account/account.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: 'system',
|
||||||
|
name: 'setting-system',
|
||||||
|
meta: {
|
||||||
|
title: '系统设置',
|
||||||
|
},
|
||||||
|
component: () => import('@/views/setting/system/system.vue')
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
export default routes
|
||||||
@@ -6,146 +6,137 @@ import NProgress from 'nprogress' // progress bar
|
|||||||
import { ACCESS_TOKEN } from '@/store/mutation-types'
|
import { ACCESS_TOKEN } from '@/store/mutation-types'
|
||||||
import { storage } from '@/utils/Storage'
|
import { storage } from '@/utils/Storage'
|
||||||
import { debounce } from '@/utils/lodashChunk'
|
import { debounce } from '@/utils/lodashChunk'
|
||||||
import { useGlobSetting } from '@/hooks/setting'
|
|
||||||
import { PageEnum } from '@/enums/pageEnum'
|
import { PageEnum } from '@/enums/pageEnum'
|
||||||
|
|
||||||
const globSetting = useGlobSetting()
|
|
||||||
|
|
||||||
|
|
||||||
NProgress.configure({ showSpinner: false }) // NProgress Configuration
|
NProgress.configure({ showSpinner: false }) // NProgress Configuration
|
||||||
|
|
||||||
const whitePathList = ['/login'] // no redirect whitelist
|
|
||||||
|
|
||||||
const LOGIN_PATH = PageEnum.BASE_LOGIN
|
const LOGIN_PATH = PageEnum.BASE_LOGIN
|
||||||
const DEFAULT_PATH = PageEnum.BASE_HOME
|
|
||||||
|
|
||||||
|
const whitePathList = [LOGIN_PATH] // no redirect whitelist
|
||||||
const permissionMode = globSetting.permissionMode //ROLE 前端固定角色 BACK 动态获取
|
|
||||||
|
|
||||||
// 是否需要从后端获取菜单
|
// 是否需要从后端获取菜单
|
||||||
const isGetMenus = debounce(
|
const isGetMenus = debounce(
|
||||||
({ to, from, next, hasRoute, router }) => {
|
({ to, from, next, hasRoute, router }) => {
|
||||||
const userStore = useUserStoreWidthOut();
|
const userStore = useUserStoreWidthOut();
|
||||||
const asyncRouteStore = useAsyncRouteStoreWidthOut();
|
const asyncRouteStore = useAsyncRouteStoreWidthOut();
|
||||||
userStore.GetInfo().then(res => {
|
userStore.GetInfo().then(res => {
|
||||||
asyncRouteStore.generateRoutes(res).then(() => {
|
asyncRouteStore.generateRoutes(res).then(() => {
|
||||||
// 根据roles权限生成可访问的路由表
|
// 根据roles权限生成可访问的路由表
|
||||||
// 动态添加可访问路由表
|
// 动态添加可访问路由表
|
||||||
asyncRouteStore.getRouters().forEach((item) => {
|
asyncRouteStore.getRouters().forEach((item) => {
|
||||||
router.addRoute(item)
|
router.addRoute(item)
|
||||||
});
|
});
|
||||||
debugger
|
// if (whitePathList.includes(to.name as string)) return
|
||||||
// if (whitePathList.includes(to.name as string)) return
|
if (!hasRoute) {
|
||||||
if (!hasRoute) {
|
// 请求带有 redirect 重定向时，登录自动重定向到该地址
|
||||||
// 请求带有 redirect 重定向时，登录自动重定向到该地址
|
const redirect = decodeURIComponent((from.query.redirect || '') as string)
|
||||||
const redirect = decodeURIComponent((from.query.redirect || '') as string)
|
if (to.path === redirect) {
|
||||||
if (to.path === redirect) {
|
next({ ...to, replace: true })
|
||||||
next({ ...to, replace: true })
|
} else {
|
||||||
} else {
|
// 跳转到目的路由
|
||||||
// 跳转到目的路由
|
next({ ...to, replace: true })
|
||||||
next({ ...to, replace: true })
|
}
|
||||||
}
|
} else {
|
||||||
} else {
|
next()
|
||||||
next()
|
}
|
||||||
}
|
}).catch(() => next({ path: defaultRoutePath }))
|
||||||
}).catch(() => next({ path: defaultRoutePath }))
|
})
|
||||||
})
|
},
|
||||||
},
|
1800,
|
||||||
1800,
|
{ leading: true }
|
||||||
{ leading: true }
|
|
||||||
)
|
)
|
||||||
|
|
||||||
|
|
||||||
export function createRouterGuards(router: Router) {
|
export function createRouterGuards(router: Router) {
|
||||||
const userStore = useUserStoreWidthOut();
|
const userStore = useUserStoreWidthOut();
|
||||||
const asyncRouteStore = useAsyncRouteStoreWidthOut();
|
|
||||||
router.beforeEach(async (to, from, next) => {
|
|
||||||
NProgress.start()
|
|
||||||
|
|
||||||
if (from.path === LOGIN_PATH && to.name === 'errorPage') {
|
|
||||||
next(PageEnum.BASE_HOME);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Whitelist can be directly entered
|
|
||||||
if (whitePathList.includes(to.path as PageEnum)) {
|
|
||||||
next();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const token = storage.get(ACCESS_TOKEN)
|
|
||||||
const roles = storage.get('roles')
|
|
||||||
|
|
||||||
if (!token) {
|
|
||||||
|
|
||||||
// You can access without permission. You need to set the routing meta.ignoreAuth to true
|
|
||||||
if (to.meta.ignoreAuth) {
|
|
||||||
next();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
// redirect login page
|
|
||||||
const redirectData: { path: string; replace: boolean; query?: Recordable<string> } = {
|
|
||||||
path: LOGIN_PATH,
|
|
||||||
replace: true,
|
|
||||||
};
|
|
||||||
if (to.path) {
|
|
||||||
redirectData.query = {
|
|
||||||
...redirectData.query,
|
|
||||||
redirect: to.path,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
next(redirectData);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (asyncRouteStore.getIsDynamicAddedRoute) {
|
|
||||||
next();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const userInfo = await userStore.GetInfo()
|
|
||||||
|
|
||||||
const routes = await asyncRouteStore.generateRoutes(userInfo)
|
|
||||||
|
|
||||||
// 动态添加可访问路由表
|
|
||||||
routes.forEach((item) => {
|
|
||||||
router.addRoute(item)
|
|
||||||
});
|
|
||||||
|
|
||||||
const redirectPath = (from.query.redirect || to.path) as string;
|
|
||||||
const redirect = decodeURIComponent(redirectPath);
|
|
||||||
const nextData = to.path === redirect ? { ...to, replace: true } : { path: redirect };
|
|
||||||
asyncRouteStore.setDynamicAddedRoute(true);
|
|
||||||
next(nextData);
|
|
||||||
NProgress.done()
|
|
||||||
})
|
|
||||||
|
|
||||||
router.afterEach((to, from, failure) => {
|
|
||||||
document.title = (to?.meta?.title as string) || document.title
|
|
||||||
if (isNavigationFailure(failure)) {
|
|
||||||
//console.log('failed navigation', failure)
|
|
||||||
}
|
|
||||||
const asyncRouteStore = useAsyncRouteStoreWidthOut();
|
const asyncRouteStore = useAsyncRouteStoreWidthOut();
|
||||||
// 在这里设置需要缓存的组件名称
|
router.beforeEach(async (to, from, next) => {
|
||||||
const keepAliveComponents = asyncRouteStore.keepAliveComponents
|
NProgress.start()
|
||||||
const currentComName: any = to.matched.find((item) => item.name == to.name)?.name
|
if (from.path === LOGIN_PATH && to.name === 'errorPage') {
|
||||||
if (currentComName && !keepAliveComponents.includes(currentComName) && to.meta?.keepAlive) {
|
next(PageEnum.BASE_HOME);
|
||||||
// 需要缓存的组件
|
return;
|
||||||
keepAliveComponents.push(currentComName)
|
}
|
||||||
} else if (!to.meta?.keepAlive || to.name == 'Redirect') {
|
|
||||||
// 不需要缓存的组件
|
|
||||||
const index = asyncRouteStore.keepAliveComponents.findIndex(
|
|
||||||
(name) => name == currentComName
|
|
||||||
)
|
|
||||||
if (index != -1) {
|
|
||||||
keepAliveComponents.splice(index, 1)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
asyncRouteStore.setKeepAliveComponents(keepAliveComponents)
|
|
||||||
NProgress.done() // finish progress bar
|
|
||||||
})
|
|
||||||
|
|
||||||
router.onError((error) => {
|
// Whitelist can be directly entered
|
||||||
console.log(error, '路由错误')
|
if (whitePathList.includes(to.path as PageEnum)) {
|
||||||
})
|
next();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const token = storage.get(ACCESS_TOKEN)
|
||||||
|
const roles = storage.get('roles')
|
||||||
|
|
||||||
|
if (!token) {
|
||||||
|
|
||||||
|
// You can access without permission. You need to set the routing meta.ignoreAuth to true
|
||||||
|
if (to.meta.ignoreAuth) {
|
||||||
|
next();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// redirect login page
|
||||||
|
const redirectData: { path: string; replace: boolean; query?: Recordable<string> } = {
|
||||||
|
path: LOGIN_PATH,
|
||||||
|
replace: true,
|
||||||
|
};
|
||||||
|
if (to.path) {
|
||||||
|
redirectData.query = {
|
||||||
|
...redirectData.query,
|
||||||
|
redirect: to.path,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
next(redirectData);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (asyncRouteStore.getIsDynamicAddedRoute) {
|
||||||
|
next();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const userInfo = await userStore.GetInfo()
|
||||||
|
|
||||||
|
const routes = await asyncRouteStore.generateRoutes(userInfo)
|
||||||
|
|
||||||
|
// 动态添加可访问路由表
|
||||||
|
routes.forEach((item) => {
|
||||||
|
router.addRoute(item)
|
||||||
|
});
|
||||||
|
|
||||||
|
const redirectPath = (from.query.redirect || to.path) as string;
|
||||||
|
const redirect = decodeURIComponent(redirectPath);
|
||||||
|
const nextData = to.path === redirect ? { ...to, replace: true } : { path: redirect };
|
||||||
|
asyncRouteStore.setDynamicAddedRoute(true);
|
||||||
|
next(nextData);
|
||||||
|
NProgress.done()
|
||||||
|
})
|
||||||
|
|
||||||
|
router.afterEach((to, from, failure) => {
|
||||||
|
document.title = (to?.meta?.title as string) || document.title
|
||||||
|
if (isNavigationFailure(failure)) {
|
||||||
|
//console.log('failed navigation', failure)
|
||||||
|
}
|
||||||
|
const asyncRouteStore = useAsyncRouteStoreWidthOut();
|
||||||
|
// 在这里设置需要缓存的组件名称
|
||||||
|
const keepAliveComponents = asyncRouteStore.keepAliveComponents
|
||||||
|
const currentComName: any = to.matched.find((item) => item.name == to.name)?.name
|
||||||
|
if (currentComName && !keepAliveComponents.includes(currentComName) && to.meta?.keepAlive) {
|
||||||
|
// 需要缓存的组件
|
||||||
|
keepAliveComponents.push(currentComName)
|
||||||
|
} else if (!to.meta?.keepAlive || to.name == 'Redirect') {
|
||||||
|
// 不需要缓存的组件
|
||||||
|
const index = asyncRouteStore.keepAliveComponents.findIndex(
|
||||||
|
(name) => name == currentComName
|
||||||
|
)
|
||||||
|
if (index != -1) {
|
||||||
|
keepAliveComponents.splice(index, 1)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
asyncRouteStore.setKeepAliveComponents(keepAliveComponents)
|
||||||
|
NProgress.done() // finish progress bar
|
||||||
|
})
|
||||||
|
|
||||||
|
router.onError((error) => {
|
||||||
|
console.log(error, '路由错误')
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -94,6 +94,10 @@ body .n-card {
|
|||||||
transition: all .2s ease-in-out;
|
transition: all .2s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
body .n-icon{
|
||||||
|
vertical-align:middle;
|
||||||
|
}
|
||||||
|
|
||||||
body .proCard {
|
body .proCard {
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
|
|
||||||
@@ -106,6 +110,11 @@ body .proCard {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//body .proCardTabs{
|
||||||
|
// .n-card__content{ padding-top: 3px}
|
||||||
|
// .n-card__content:first-child{ padding-top: 3px}
|
||||||
|
//}
|
||||||
|
|
||||||
.n-layout-page-header {
|
.n-layout-page-header {
|
||||||
margin: 0 -10px;
|
margin: 0 -10px;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -3,10 +3,8 @@
|
|||||||
import { VAxios } from './Axios'
|
import { VAxios } from './Axios'
|
||||||
import { AxiosTransform } from './axiosTransform'
|
import { AxiosTransform } from './axiosTransform'
|
||||||
import axios, { AxiosResponse } from 'axios'
|
import axios, { AxiosResponse } from 'axios'
|
||||||
import qs from 'qs'
|
|
||||||
import { checkStatus } from './checkStatus'
|
import { checkStatus } from './checkStatus'
|
||||||
import { joinTimestamp, formatRequestDate } from './helper'
|
import { joinTimestamp, formatRequestDate } from './helper'
|
||||||
import { useDialog } from 'naive-ui'
|
|
||||||
import { RequestEnum, ResultEnum, ContentTypeEnum } from '@/enums/httpEnum'
|
import { RequestEnum, ResultEnum, ContentTypeEnum } from '@/enums/httpEnum'
|
||||||
|
|
||||||
import { useGlobSetting } from '@/hooks/setting'
|
import { useGlobSetting } from '@/hooks/setting'
|
||||||
@@ -24,8 +22,6 @@ const urlPrefix = globSetting.urlPrefix || '';
|
|||||||
const Message = window.$message
|
const Message = window.$message
|
||||||
const Modal = window.$dialog
|
const Modal = window.$dialog
|
||||||
|
|
||||||
const isDev = import.meta.env.DEV
|
|
||||||
|
|
||||||
import router from '@/router'
|
import router from '@/router'
|
||||||
import { storage } from '@/utils/Storage'
|
import { storage } from '@/utils/Storage'
|
||||||
|
|
||||||
|
|||||||
@@ -42,16 +42,31 @@ export const columns = [
|
|||||||
{
|
{
|
||||||
title: '操作',
|
title: '操作',
|
||||||
key: 'actions',
|
key: 'actions',
|
||||||
render(row) {
|
width:150,
|
||||||
return h(
|
//简单写一下例子，不建议这么写，过段时间，这里封二次封装
|
||||||
NButton,
|
render() {
|
||||||
{
|
return [
|
||||||
size: 'small',
|
h(
|
||||||
onClick: () => {
|
NButton,
|
||||||
}
|
{
|
||||||
},
|
size: 'small',
|
||||||
{ default: () => '编辑' }
|
type:'error',
|
||||||
)
|
style:'margin-right:10px',
|
||||||
|
onClick: () => {
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ default: () => '删除' }
|
||||||
|
),
|
||||||
|
h(
|
||||||
|
NButton,
|
||||||
|
{
|
||||||
|
size: 'small',
|
||||||
|
onClick: () => {
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ default: () => '编辑' }
|
||||||
|
)
|
||||||
|
]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|||||||
43
src/views/exception/403.vue
Normal file
43
src/views/exception/403.vue
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
<template>
|
||||||
|
<div class="flex flex-col justify-center page-container">
|
||||||
|
<div class="text-center">
|
||||||
|
<img src="~@/assets/images/exception/403.svg" alt=""/>
|
||||||
|
</div>
|
||||||
|
<div class="text-center">
|
||||||
|
<h1 class="text-base text-gray-500">抱歉，你无权访问该页面</h1>
|
||||||
|
<n-button type="info" @click="goHome">回到首页</n-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent } from 'vue'
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
setup() {
|
||||||
|
const router = useRouter()
|
||||||
|
return {
|
||||||
|
goHome(){
|
||||||
|
router.push('/')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.page-container {
|
||||||
|
width: 100%;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 50px 0;
|
||||||
|
.text-center{
|
||||||
|
h1{ color: #666;padding: 20px 0}
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
width: 350px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -1,31 +1,40 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="flex flex-col align-center justify-center page-container">
|
<div class="flex flex-col justify-center page-container">
|
||||||
<div class="text-center">
|
<div class="text-center">
|
||||||
<h1 class="text-base text-gray-500">哎哟喂，您好像走丢了...</h1>
|
<img src="~@/assets/images/exception/404.svg" alt=""/>
|
||||||
<router-link to="/" class="n-btn n-btn-primary">回到首页</router-link>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="text-center">
|
<div class="text-center">
|
||||||
<img src="~@/assets/images/Error.svg" alt=""/>
|
<h1 class="text-base text-gray-500">抱歉，你访问的页面不存在</h1>
|
||||||
|
<n-button type="info" @click="goHome">回到首页</n-button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent } from 'vue'
|
import { defineComponent } from 'vue'
|
||||||
import { routes } from '@/router'
|
import { useRouter } from 'vue-router'
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: '404'
|
setup() {
|
||||||
|
const router = useRouter()
|
||||||
|
return {
|
||||||
|
goHome(){
|
||||||
|
router.push('/')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.page-container {
|
.page-container {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100vh;
|
|
||||||
background-color: white;
|
background-color: white;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
|
padding: 50px 0;
|
||||||
|
.text-center{
|
||||||
|
h1{ color: #666;padding: 20px 0}
|
||||||
|
}
|
||||||
img {
|
img {
|
||||||
width: 350px;
|
width: 350px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
|
|||||||
43
src/views/exception/500.vue
Normal file
43
src/views/exception/500.vue
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
<template>
|
||||||
|
<div class="flex flex-col justify-center page-container">
|
||||||
|
<div class="text-center">
|
||||||
|
<img src="~@/assets/images/exception/500.svg" alt=""/>
|
||||||
|
</div>
|
||||||
|
<div class="text-center">
|
||||||
|
<h1 class="text-base text-gray-500">抱歉，服务器出错了</h1>
|
||||||
|
<n-button type="info" @click="goHome">回到首页</n-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent } from 'vue'
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
setup() {
|
||||||
|
const router = useRouter()
|
||||||
|
return {
|
||||||
|
goHome(){
|
||||||
|
router.push('/')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.page-container {
|
||||||
|
width: 100%;
|
||||||
|
background-color: white;
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 50px 0;
|
||||||
|
.text-center{
|
||||||
|
h1{ color: #666;padding: 20px 0}
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
width: 350px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -68,7 +68,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script lang="ts">
|
||||||
import { defineComponent, ref } from 'vue'
|
import { defineComponent, ref } from 'vue'
|
||||||
import { useMessage } from 'naive-ui'
|
import { useMessage } from 'naive-ui'
|
||||||
|
|
||||||
|
|||||||
72
src/views/list/basicList/columns.ts
Normal file
72
src/views/list/basicList/columns.ts
Normal file
@@ -0,0 +1,72 @@
|
|||||||
|
import { h } from 'vue'
|
||||||
|
import { NAvatar, NButton } from 'naive-ui'
|
||||||
|
|
||||||
|
export const columns = [
|
||||||
|
{
|
||||||
|
title: 'id',
|
||||||
|
key: 'id'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '名称',
|
||||||
|
key: 'name'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '头像',
|
||||||
|
key: 'avatar',
|
||||||
|
render(row) {
|
||||||
|
return h(
|
||||||
|
NAvatar,
|
||||||
|
{
|
||||||
|
size: 48,
|
||||||
|
src: row.avatar
|
||||||
|
}
|
||||||
|
)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '地址',
|
||||||
|
key: 'address'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '开始日期',
|
||||||
|
key: 'beginTime',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '结束日期',
|
||||||
|
key: 'endTime',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '创建时间',
|
||||||
|
key: 'date',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作',
|
||||||
|
key: 'actions',
|
||||||
|
width:150,
|
||||||
|
//简单写一下例子，不建议这么写，过段时间，这里封二次封装
|
||||||
|
render() {
|
||||||
|
return [
|
||||||
|
h(
|
||||||
|
NButton,
|
||||||
|
{
|
||||||
|
size: 'small',
|
||||||
|
type:'error',
|
||||||
|
style:'margin-right:10px',
|
||||||
|
onClick: () => {
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ default: () => '删除' }
|
||||||
|
),
|
||||||
|
h(
|
||||||
|
NButton,
|
||||||
|
{
|
||||||
|
size: 'small',
|
||||||
|
onClick: () => {
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{ default: () => '编辑' }
|
||||||
|
)
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
156
src/views/list/basicList/index.vue
Normal file
156
src/views/list/basicList/index.vue
Normal file
@@ -0,0 +1,156 @@
|
|||||||
|
<template>
|
||||||
|
<n-card :bordered="false" class="proCard">
|
||||||
|
<ProTable
|
||||||
|
:columns="columns"
|
||||||
|
:request="loadDataTable"
|
||||||
|
:row-key="row => row.id"
|
||||||
|
ref="actionRef"
|
||||||
|
@update:checked-row-keys="onCheckedRow"
|
||||||
|
>
|
||||||
|
<template #tableTitle>
|
||||||
|
<n-button type="primary" @click="addTable">
|
||||||
|
<template #icon>
|
||||||
|
<n-icon>
|
||||||
|
<PlusOutlined/>
|
||||||
|
</n-icon>
|
||||||
|
</template>
|
||||||
|
新建
|
||||||
|
</n-button>
|
||||||
|
</template>
|
||||||
|
<template #toolbar>
|
||||||
|
<n-button type="primary" @click="reloadTable">刷新数据</n-button>
|
||||||
|
</template>
|
||||||
|
</ProTable>
|
||||||
|
|
||||||
|
<n-modal v-model:show="showModal" :show-icon="false" preset="dialog" title="新建">
|
||||||
|
<n-form
|
||||||
|
:model="formParams"
|
||||||
|
:rules="rules"
|
||||||
|
ref="formRef"
|
||||||
|
label-placement="left"
|
||||||
|
:label-width="80"
|
||||||
|
class="py-4"
|
||||||
|
>
|
||||||
|
<n-form-item label="名称" path="name">
|
||||||
|
<n-input placeholder="请输入名称" v-model:value="formParams.name"/>
|
||||||
|
</n-form-item>
|
||||||
|
<n-form-item label="地址" path="address">
|
||||||
|
<n-input type="textarea" placeholder="请输入地址" v-model:value="formParams.address"/>
|
||||||
|
</n-form-item>
|
||||||
|
<n-form-item label="日期" path="date">
|
||||||
|
<n-date-picker type="datetime" placeholder="请选择日期" v-model:value="formParams.date"/>
|
||||||
|
</n-form-item>
|
||||||
|
</n-form>
|
||||||
|
|
||||||
|
<template #action>
|
||||||
|
<n-space>
|
||||||
|
<n-button @click="()=> showModal = false">取消</n-button>
|
||||||
|
<n-button type="info" :loading="formBtnLoading" @click="confirmForm">确定</n-button>
|
||||||
|
</n-space>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
</n-modal>
|
||||||
|
|
||||||
|
</n-card>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, reactive, toRefs, ref, h } from 'vue'
|
||||||
|
import { useMessage } from 'naive-ui'
|
||||||
|
import { ProTable } from '@/components/ProTable'
|
||||||
|
import { getTableList } from '@/api/table/list'
|
||||||
|
import { columns } from './columns'
|
||||||
|
import { PlusOutlined } from '@vicons/antd'
|
||||||
|
|
||||||
|
const rules = {
|
||||||
|
name: {
|
||||||
|
required: true,
|
||||||
|
trigger: ['blur', 'input'],
|
||||||
|
message: '请输入名称'
|
||||||
|
},
|
||||||
|
address: {
|
||||||
|
required: true,
|
||||||
|
trigger: ['blur', 'input'],
|
||||||
|
message: '请输入地址'
|
||||||
|
},
|
||||||
|
date: {
|
||||||
|
type: 'number',
|
||||||
|
required: true,
|
||||||
|
trigger: ['blur', 'change'],
|
||||||
|
message: '请选择日期'
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
components: { ProTable, PlusOutlined },
|
||||||
|
setup() {
|
||||||
|
const formRef: any = ref(null)
|
||||||
|
const message = useMessage()
|
||||||
|
const actionRef = ref()
|
||||||
|
const state = reactive({
|
||||||
|
showModal: false,
|
||||||
|
formBtnLoading: false,
|
||||||
|
formParams: {
|
||||||
|
name: '',
|
||||||
|
address: '',
|
||||||
|
date: []
|
||||||
|
},
|
||||||
|
params: {
|
||||||
|
pageSize: 5,
|
||||||
|
name: 'xiaoMa'
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
function addTable() {
|
||||||
|
state.showModal = true
|
||||||
|
}
|
||||||
|
|
||||||
|
const loadDataTable = async (params) => {
|
||||||
|
const data = await getTableList(params);
|
||||||
|
return data
|
||||||
|
}
|
||||||
|
|
||||||
|
function onCheckedRow(rowKeys) {
|
||||||
|
console.log(rowKeys)
|
||||||
|
}
|
||||||
|
|
||||||
|
function reloadTable() {
|
||||||
|
actionRef.value.reload()
|
||||||
|
}
|
||||||
|
|
||||||
|
function confirmForm(e) {
|
||||||
|
e.preventDefault()
|
||||||
|
state.formBtnLoading = true
|
||||||
|
formRef.value.validate((errors) => {
|
||||||
|
if (!errors) {
|
||||||
|
message.success('新建成功')
|
||||||
|
setTimeout(() => {
|
||||||
|
state.showModal = false
|
||||||
|
reloadTable()
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
message.error('请填写完整信息')
|
||||||
|
}
|
||||||
|
state.formBtnLoading = false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
...toRefs(state),
|
||||||
|
formRef,
|
||||||
|
columns,
|
||||||
|
rules,
|
||||||
|
actionRef,
|
||||||
|
confirmForm,
|
||||||
|
loadDataTable,
|
||||||
|
onCheckedRow,
|
||||||
|
reloadTable,
|
||||||
|
addTable
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang='less' scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
69
src/views/result/fail.vue
Normal file
69
src/views/result/fail.vue
Normal file
@@ -0,0 +1,69 @@
|
|||||||
|
<template>
|
||||||
|
<n-card :bordered="false" class="proCard">
|
||||||
|
<div class="result-box">
|
||||||
|
<n-result status="error" title="操作失败" description="请核对并修改以下信息后，再重新提交。">
|
||||||
|
<div class="result-box-extra">
|
||||||
|
<p>您提交的内容有如下错误：</p>
|
||||||
|
<p class="mt-3">
|
||||||
|
<n-space align="center">
|
||||||
|
<n-icon size="20" color="#f0a020">
|
||||||
|
<InfoCircleOutlined />
|
||||||
|
</n-icon>
|
||||||
|
<span>认证照片不够清晰</span>
|
||||||
|
<n-button type="info" text>立即修改</n-button>
|
||||||
|
</n-space>
|
||||||
|
</p>
|
||||||
|
<p class="mt-3">
|
||||||
|
<n-space>
|
||||||
|
<n-icon size="20" color="#f0a020">
|
||||||
|
<InfoCircleOutlined />
|
||||||
|
</n-icon>
|
||||||
|
<span>备注包含敏感字符，并且不能包含政治相关</span>
|
||||||
|
<n-button type="info" text>立即修改</n-button>
|
||||||
|
</n-space>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<template #footer>
|
||||||
|
<div class="flex justify-center mb-4">
|
||||||
|
<n-space align="center">
|
||||||
|
<n-button type="info" @click="goHome">回到首页</n-button>
|
||||||
|
<n-button>查看详情</n-button>
|
||||||
|
<n-button>打印</n-button>
|
||||||
|
</n-space>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</n-result>
|
||||||
|
</div>
|
||||||
|
</n-card>
|
||||||
|
</template>
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent } from 'vue'
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
import { InfoCircleOutlined } from '@vicons/antd'
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
components:{ InfoCircleOutlined },
|
||||||
|
setup() {
|
||||||
|
const router = useRouter()
|
||||||
|
return {
|
||||||
|
goHome() {
|
||||||
|
router.push('/')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.result-box {
|
||||||
|
width: 72%;
|
||||||
|
margin: 0 auto;
|
||||||
|
text-align: center;
|
||||||
|
padding-top: 5px;
|
||||||
|
&-extra {
|
||||||
|
padding: 24px 40px;
|
||||||
|
text-align: left;
|
||||||
|
background: #f8f8f9;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
69
src/views/result/info.vue
Normal file
69
src/views/result/info.vue
Normal file
@@ -0,0 +1,69 @@
|
|||||||
|
<template>
|
||||||
|
<n-card :bordered="false" class="proCard">
|
||||||
|
<div class="result-box">
|
||||||
|
<n-result status="info" title="提示" description="本次提交，将在24小时候内自动转入对方账户，如操作失误，请及时撤回">
|
||||||
|
<div class="result-box-extra">
|
||||||
|
<p>您提交的内容如下：</p>
|
||||||
|
<p class="mt-3">
|
||||||
|
<n-space align="center">
|
||||||
|
<n-icon size="20" color="#18a058">
|
||||||
|
<CheckCircleOutlined />
|
||||||
|
</n-icon>
|
||||||
|
<span>转入支付宝账户（189****5426）：￥1980元</span>
|
||||||
|
<n-button type="info" text>立即撤回</n-button>
|
||||||
|
</n-space>
|
||||||
|
</p>
|
||||||
|
<p class="mt-3">
|
||||||
|
<n-space>
|
||||||
|
<n-icon size="20" color="#18a058">
|
||||||
|
<CheckCircleOutlined />
|
||||||
|
</n-icon>
|
||||||
|
<span>转入支付宝账户（187****5426）：￥2980元</span>
|
||||||
|
<n-button type="info" text>立即撤回</n-button>
|
||||||
|
</n-space>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<template #footer>
|
||||||
|
<div class="flex justify-center mb-4">
|
||||||
|
<n-space align="center">
|
||||||
|
<n-button type="info" @click="goHome">回到首页</n-button>
|
||||||
|
<n-button>查看详情</n-button>
|
||||||
|
<n-button>全部撤回</n-button>
|
||||||
|
</n-space>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</n-result>
|
||||||
|
</div>
|
||||||
|
</n-card>
|
||||||
|
</template>
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent } from 'vue'
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
import { CheckCircleOutlined } from '@vicons/antd'
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
components:{ CheckCircleOutlined },
|
||||||
|
setup() {
|
||||||
|
const router = useRouter()
|
||||||
|
return {
|
||||||
|
goHome() {
|
||||||
|
router.push('/')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.result-box {
|
||||||
|
width: 72%;
|
||||||
|
margin: 0 auto;
|
||||||
|
text-align: center;
|
||||||
|
padding-top: 5px;
|
||||||
|
&-extra {
|
||||||
|
padding: 24px 40px;
|
||||||
|
text-align: left;
|
||||||
|
background: #f8f8f9;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
49
src/views/result/success.vue
Normal file
49
src/views/result/success.vue
Normal file
@@ -0,0 +1,49 @@
|
|||||||
|
<template>
|
||||||
|
<n-card :bordered="false" class="proCard">
|
||||||
|
<div class="result-box">
|
||||||
|
<n-result status="success" title="操作成功" description="提交结果页用于反馈一系列操作任务的处理结果，如果仅是简单操作，灰色区域可以显示一些补充的信息。">
|
||||||
|
<div class="result-box-extra">
|
||||||
|
<p>已提交申请，等待财务部门审核。</p>
|
||||||
|
</div>
|
||||||
|
<template #footer>
|
||||||
|
<div class="flex justify-center mb-4">
|
||||||
|
<n-space align="center">
|
||||||
|
<n-button type="info" @click="goHome">回到首页</n-button>
|
||||||
|
<n-button>查看详情</n-button>
|
||||||
|
<n-button>打印</n-button>
|
||||||
|
</n-space>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</n-result>
|
||||||
|
</div>
|
||||||
|
</n-card>
|
||||||
|
</template>
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent } from 'vue'
|
||||||
|
import { useRouter } from 'vue-router'
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
setup() {
|
||||||
|
const router = useRouter()
|
||||||
|
return {
|
||||||
|
goHome() {
|
||||||
|
router.push('/')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.result-box {
|
||||||
|
width: 72%;
|
||||||
|
margin: 0 auto;
|
||||||
|
text-align: center;
|
||||||
|
padding-top: 5px;
|
||||||
|
&-extra {
|
||||||
|
padding: 24px 40px;
|
||||||
|
text-align: left;
|
||||||
|
background: #f8f8f9;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
95
src/views/setting/account/BasicSetting.vue
Normal file
95
src/views/setting/account/BasicSetting.vue
Normal file
@@ -0,0 +1,95 @@
|
|||||||
|
<template>
|
||||||
|
<n-grid cols="2 s:2 m:2 l:3 xl:3 2xl:3" responsive="screen">
|
||||||
|
<n-grid-item>
|
||||||
|
<n-form
|
||||||
|
:label-width="80"
|
||||||
|
:model="formValue"
|
||||||
|
:rules="rules"
|
||||||
|
ref="formRef"
|
||||||
|
>
|
||||||
|
<n-form-item label="昵称" path="name">
|
||||||
|
<n-input v-model:value="formValue.name" placeholder="请输入昵称"/>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="邮箱" path="email">
|
||||||
|
<n-input placeholder="请输入备案编号" v-model:value="formValue.email"/>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
|
||||||
|
<n-form-item label="联系电话" path="mobile">
|
||||||
|
<n-input placeholder="请输入联系电话" v-model:value="formValue.mobile"/>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<n-form-item label="联系地址" path="address">
|
||||||
|
<n-input
|
||||||
|
v-model:value="formValue.address"
|
||||||
|
type="textarea"
|
||||||
|
placeholder="请输入联系地址"
|
||||||
|
/>
|
||||||
|
</n-form-item>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<n-space>
|
||||||
|
<n-button type="primary" @click="formSubmit">更新基本信息</n-button>
|
||||||
|
</n-space>
|
||||||
|
</div>
|
||||||
|
</n-form>
|
||||||
|
</n-grid-item>
|
||||||
|
</n-grid>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, reactive, ref, toRefs } from 'vue'
|
||||||
|
import { useMessage } from 'naive-ui'
|
||||||
|
|
||||||
|
const rules = {
|
||||||
|
name: {
|
||||||
|
required: true,
|
||||||
|
message: '请输入昵称',
|
||||||
|
trigger: 'blur'
|
||||||
|
},
|
||||||
|
email: {
|
||||||
|
required: true,
|
||||||
|
message: '请输入邮箱',
|
||||||
|
trigger: 'blur'
|
||||||
|
},
|
||||||
|
mobile: {
|
||||||
|
required: true,
|
||||||
|
message: '请输入联系电话',
|
||||||
|
trigger: 'input'
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
setup() {
|
||||||
|
const formRef: any = ref(null)
|
||||||
|
const message = useMessage()
|
||||||
|
|
||||||
|
const state = reactive({
|
||||||
|
formValue: {
|
||||||
|
name: '',
|
||||||
|
mobile: '',
|
||||||
|
email: '',
|
||||||
|
address: '',
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
function formSubmit() {
|
||||||
|
formRef.value.validate((errors) => {
|
||||||
|
if (!errors) {
|
||||||
|
message.success('验证成功')
|
||||||
|
} else {
|
||||||
|
message.error('验证失败，请填写完整信息')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
formRef,
|
||||||
|
...toRefs(state),
|
||||||
|
rules,
|
||||||
|
formSubmit
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
96
src/views/setting/account/SafetySetting.vue
Normal file
96
src/views/setting/account/SafetySetting.vue
Normal file
@@ -0,0 +1,96 @@
|
|||||||
|
<template>
|
||||||
|
<n-grid cols="1" responsive="screen" class="-mt-5">
|
||||||
|
<n-grid-item>
|
||||||
|
<n-list>
|
||||||
|
<n-list-item>
|
||||||
|
<template #suffix>
|
||||||
|
<n-button type="primary" text>修改</n-button>
|
||||||
|
</template>
|
||||||
|
<n-thing title="账户密码">
|
||||||
|
<template #description><span class="text-gray-400">绑定手机和邮箱，并设置密码，帐号更安全</span></template>
|
||||||
|
</n-thing>
|
||||||
|
</n-list-item>
|
||||||
|
<n-list-item>
|
||||||
|
<template #suffix>
|
||||||
|
<n-button type="primary" text>修改</n-button>
|
||||||
|
</template>
|
||||||
|
<n-thing title="绑定手机">
|
||||||
|
<template #description><span class="text-gray-400">已绑定手机号：+86189****4877</span></template>
|
||||||
|
</n-thing>
|
||||||
|
</n-list-item>
|
||||||
|
<n-list-item>
|
||||||
|
<template #suffix>
|
||||||
|
<n-button type="primary" text>设置</n-button>
|
||||||
|
</template>
|
||||||
|
<n-thing title="密保问题">
|
||||||
|
<template #description><span class="text-gray-400">未设置密保问题，密保问题可有效保护账户安全</span></template>
|
||||||
|
</n-thing>
|
||||||
|
</n-list-item>
|
||||||
|
<n-list-item>
|
||||||
|
<template #suffix>
|
||||||
|
<n-button type="primary" text>修改</n-button>
|
||||||
|
</template>
|
||||||
|
<n-thing title="个性域名">
|
||||||
|
<template #description><span class="text-gray-400">已绑定域名：https://www.naiveui.com</span></template>
|
||||||
|
</n-thing>
|
||||||
|
</n-list-item>
|
||||||
|
</n-list>
|
||||||
|
</n-grid-item>
|
||||||
|
</n-grid>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, reactive, ref, toRefs } from 'vue'
|
||||||
|
import { useMessage } from 'naive-ui'
|
||||||
|
|
||||||
|
const rules = {
|
||||||
|
name: {
|
||||||
|
required: true,
|
||||||
|
message: '请输入昵称',
|
||||||
|
trigger: 'blur'
|
||||||
|
},
|
||||||
|
email: {
|
||||||
|
required: true,
|
||||||
|
message: '请输入邮箱',
|
||||||
|
trigger: 'blur'
|
||||||
|
},
|
||||||
|
mobile: {
|
||||||
|
required: true,
|
||||||
|
message: '请输入联系电话',
|
||||||
|
trigger: 'input'
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
setup() {
|
||||||
|
const formRef: any = ref(null)
|
||||||
|
const message = useMessage()
|
||||||
|
|
||||||
|
const state = reactive({
|
||||||
|
formValue: {
|
||||||
|
name: '',
|
||||||
|
mobile: '',
|
||||||
|
email: '',
|
||||||
|
address: '',
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
function formSubmit() {
|
||||||
|
formRef.value.validate((errors) => {
|
||||||
|
if (!errors) {
|
||||||
|
message.success('验证成功')
|
||||||
|
} else {
|
||||||
|
message.error('验证失败，请填写完整信息')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
formRef,
|
||||||
|
...toRefs(state),
|
||||||
|
rules,
|
||||||
|
formSubmit
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
20
types/config.d.ts
vendored
20
types/config.d.ts
vendored
@@ -1,12 +1,10 @@
|
|||||||
export interface GlobConfig {
|
export interface ProjectSettingState {
|
||||||
// Site title
|
navMode: string,//导航模式
|
||||||
title: string;
|
navTheme: string,//导航风格
|
||||||
// Service interface url
|
headerSetting: object,//顶部设置
|
||||||
apiUrl: string;
|
showFooter: boolean, //页脚
|
||||||
// Upload url
|
menuSetting: object, //多标签
|
||||||
uploadUrl?: string;
|
multiTabsSetting: object,//多标签
|
||||||
// Service interface url prefix
|
crumbsSetting: object,//面包屑
|
||||||
urlPrefix?: string;
|
permissionMode: string//权限模式
|
||||||
// Project abbreviation
|
|
||||||
shortName: string;
|
|
||||||
}
|
}
|
||||||
|
|||||||
97
types/global.d.ts
vendored
Normal file
97
types/global.d.ts
vendored
Normal file
@@ -0,0 +1,97 @@
|
|||||||
|
import type {
|
||||||
|
ComponentRenderProxy,
|
||||||
|
VNode,
|
||||||
|
VNodeChild,
|
||||||
|
ComponentPublicInstance,
|
||||||
|
FunctionalComponent,
|
||||||
|
PropType as VuePropType,
|
||||||
|
} from 'vue';
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
const __APP_INFO__: {
|
||||||
|
pkg: {
|
||||||
|
name: string;
|
||||||
|
version: string;
|
||||||
|
dependencies: Recordable<string>;
|
||||||
|
devDependencies: Recordable<string>;
|
||||||
|
};
|
||||||
|
lastBuildTime: string;
|
||||||
|
};
|
||||||
|
// declare interface Window {
|
||||||
|
// // Global vue app instance
|
||||||
|
// __APP__: App<Element>;
|
||||||
|
// }
|
||||||
|
|
||||||
|
// vue
|
||||||
|
declare type PropType<T> = VuePropType<T>;
|
||||||
|
declare type VueNode = VNodeChild | JSX.Element;
|
||||||
|
|
||||||
|
export type Writable<T> = {
|
||||||
|
-readonly [P in keyof T]: T[P];
|
||||||
|
};
|
||||||
|
|
||||||
|
declare type Nullable<T> = T | null;
|
||||||
|
declare type NonNullable<T> = T extends null | undefined ? never : T;
|
||||||
|
declare type Recordable<T = any> = Record<string, T>;
|
||||||
|
declare type ReadonlyRecordable<T = any> = {
|
||||||
|
readonly [key: string]: T;
|
||||||
|
};
|
||||||
|
declare type Indexable<T = any> = {
|
||||||
|
[key: string]: T;
|
||||||
|
};
|
||||||
|
declare type DeepPartial<T> = {
|
||||||
|
[P in keyof T]?: DeepPartial<T[P]>;
|
||||||
|
};
|
||||||
|
declare type TimeoutHandle = ReturnType<typeof setTimeout>;
|
||||||
|
declare type IntervalHandle = ReturnType<typeof setInterval>;
|
||||||
|
|
||||||
|
declare interface ChangeEvent extends Event {
|
||||||
|
target: HTMLInputElement;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare interface WheelEvent {
|
||||||
|
path?: EventTarget[];
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ImportMetaEnv extends ViteEnv {
|
||||||
|
__: unknown;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare interface ViteEnv {
|
||||||
|
VITE_PORT: number;
|
||||||
|
VITE_USE_MOCK: boolean;
|
||||||
|
VITE_PUBLIC_PATH: string;
|
||||||
|
VITE_GLOB_APP_TITLE: string;
|
||||||
|
VITE_GLOB_APP_SHORT_NAME: string;
|
||||||
|
VITE_DROP_CONSOLE: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare function parseInt(s: string | number, radix?: number): number;
|
||||||
|
|
||||||
|
declare function parseFloat(string: string | number): number;
|
||||||
|
|
||||||
|
namespace JSX {
|
||||||
|
// tslint:disable no-empty-interface
|
||||||
|
type Element = VNode;
|
||||||
|
// tslint:disable no-empty-interface
|
||||||
|
type ElementClass = ComponentRenderProxy;
|
||||||
|
|
||||||
|
interface ElementAttributesProperty {
|
||||||
|
$props: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface IntrinsicElements {
|
||||||
|
[elem: string]: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface IntrinsicAttributes {
|
||||||
|
[elem: string]: any;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
declare module 'vue' {
|
||||||
|
export type JSXComponent<Props = any> =
|
||||||
|
| { new(): ComponentPublicInstance<Props> }
|
||||||
|
| FunctionalComponent<Props>;
|
||||||
|
}
|
||||||
22
types/index.d.ts
vendored
Normal file
22
types/index.d.ts
vendored
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
declare interface Fn<T = any, R = T> {
|
||||||
|
(...arg: T[]): R;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare interface PromiseFn<T = any, R = T> {
|
||||||
|
(...arg: T[]): Promise<R>;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare type RefType<T> = T | null;
|
||||||
|
|
||||||
|
|
||||||
|
declare type EmitType = (event: string, ...args: any[]) => void;
|
||||||
|
|
||||||
|
declare type TargetContext = '_self' | '_blank';
|
||||||
|
|
||||||
|
declare interface ComponentElRef<T extends HTMLElement = HTMLDivElement> {
|
||||||
|
$el: T;
|
||||||
|
}
|
||||||
|
|
||||||
|
declare type ComponentRef<T extends HTMLElement = HTMLDivElement> = ComponentElRef<T> | null;
|
||||||
|
|
||||||
|
declare type ElRef<T extends HTMLElement = HTMLDivElement> = Nullable<T>;
|
||||||
13
types/modules.d.ts
vendored
13
types/modules.d.ts
vendored
@@ -1,9 +1,10 @@
|
|||||||
declare module 'mitt' {
|
declare module '*.vue' {
|
||||||
import mitt from 'mitt'
|
import { DefineComponent } from 'vue';
|
||||||
export default mitt
|
const Component: DefineComponent<{}, {}, any>;
|
||||||
|
export default Component;
|
||||||
}
|
}
|
||||||
|
|
||||||
declare module 'blueimp-md5' {
|
declare module 'virtual:*' {
|
||||||
import md5 from 'blueimp-md5'
|
const result: any;
|
||||||
export default md5
|
export default result;
|
||||||
}
|
}
|
||||||
|
|||||||
59
types/schema.d.ts
vendored
59
types/schema.d.ts
vendored
@@ -1,59 +0,0 @@
|
|||||||
import { VNode, ComponentInternalInstance, HTMLAttributes, CSSProperties } from 'vue'
|
|
||||||
import { RuleObject } from 'ant-design-vue/lib/form/interface'
|
|
||||||
import { FormItemProps } from 'ant-design-vue/lib/form/FormItem'
|
|
||||||
import { FormProps, ValidationRule } from 'ant-design-vue/lib/form/Form'
|
|
||||||
|
|
||||||
declare global {
|
|
||||||
declare interface OptionItem {
|
|
||||||
label: string
|
|
||||||
value: string | number
|
|
||||||
[key: string]: any
|
|
||||||
}
|
|
||||||
|
|
||||||
declare type Rule =
|
|
||||||
| ValidationRule
|
|
||||||
| {
|
|
||||||
trigger?: 'blur' | 'change' | string['blur' | 'change']
|
|
||||||
}
|
|
||||||
|
|
||||||
declare interface FormItem extends Partial<typeof FormItemProps> {
|
|
||||||
type?:
|
|
||||||
| 'input'
|
|
||||||
| 'textarea'
|
|
||||||
| 'select'
|
|
||||||
| 'radio'
|
|
||||||
| 'checkbox'
|
|
||||||
| 'input-number'
|
|
||||||
| 'inputRange'
|
|
||||||
| 'switch'
|
|
||||||
| VNode
|
|
||||||
label?: string // 表单标签
|
|
||||||
field: string // 表单字段
|
|
||||||
value: any // 表单默认值
|
|
||||||
props?: Partial<
|
|
||||||
HTMLAttributes | HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | any
|
|
||||||
> // 表单属性
|
|
||||||
rules?: Rule[] // 表单验证规则
|
|
||||||
options?: OptionItem[] // 可选项
|
|
||||||
eventObject?: object // 事件对象，例如：{ mousedown: doThis, mouseup: doThat } 将会动态绑定为：v-on="{ mousedown: doThis, mouseup: doThat }"
|
|
||||||
loading?: boolean // 异步数据是否加载
|
|
||||||
asyncValue?: (
|
|
||||||
formItem: FormItem,
|
|
||||||
formInstance: ComponentInternalInstance | null
|
|
||||||
) => Promise<any> // 异步数据
|
|
||||||
asyncOptions?: (
|
|
||||||
formItem: FormItem,
|
|
||||||
formInstance: ComponentInternalInstance | null
|
|
||||||
) => Promise<OptionItem[]> // 异步选项的数据
|
|
||||||
hidden?: boolean // 是否隐藏表单项
|
|
||||||
placeholder?: string
|
|
||||||
}
|
|
||||||
|
|
||||||
interface FormSchema extends Partial<typeof FormProps> {
|
|
||||||
style?: CSSProperties // 表单样式
|
|
||||||
formItemLayout?: object // 表单布局
|
|
||||||
watchKeys?: string[]
|
|
||||||
watchCallback?: (watchKeys: string[], { dynamicForm, modelRef }) => any
|
|
||||||
formItem: FormItem[]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
67
types/shims/shims-app.d.ts
vendored
67
types/shims/shims-app.d.ts
vendored
@@ -1,67 +0,0 @@
|
|||||||
declare module '*.bmp' {
|
|
||||||
const src: string
|
|
||||||
export default src
|
|
||||||
}
|
|
||||||
|
|
||||||
declare module '*.gif' {
|
|
||||||
const src: string
|
|
||||||
export default src
|
|
||||||
}
|
|
||||||
|
|
||||||
declare module '*.jpg' {
|
|
||||||
const src: string
|
|
||||||
export default src
|
|
||||||
}
|
|
||||||
|
|
||||||
declare module '*.jpeg' {
|
|
||||||
const src: string
|
|
||||||
export default src
|
|
||||||
}
|
|
||||||
|
|
||||||
declare module '*.png' {
|
|
||||||
const src: string
|
|
||||||
export default src
|
|
||||||
}
|
|
||||||
|
|
||||||
declare module '*.webp' {
|
|
||||||
const src: string
|
|
||||||
export default src
|
|
||||||
}
|
|
||||||
|
|
||||||
declare module '*.module.css' {
|
|
||||||
const classes: { readonly [key: string]: string }
|
|
||||||
export default classes
|
|
||||||
}
|
|
||||||
|
|
||||||
declare module '*.module.scss' {
|
|
||||||
const classes: { readonly [key: string]: string }
|
|
||||||
export default classes
|
|
||||||
}
|
|
||||||
|
|
||||||
declare module '*.module.less' {
|
|
||||||
const classes: { readonly [key: string]: string }
|
|
||||||
export default classes
|
|
||||||
}
|
|
||||||
|
|
||||||
declare module '*.module.sass' {
|
|
||||||
const classes: { readonly [key: string]: string }
|
|
||||||
export default classes
|
|
||||||
}
|
|
||||||
|
|
||||||
declare module 'moment/locale/*' {
|
|
||||||
const LocaleMessage: { [key: string]: any }
|
|
||||||
export default LocaleMessage
|
|
||||||
}
|
|
||||||
|
|
||||||
declare module 'ant-design-vue/es/locale-provider/*' {
|
|
||||||
const LocaleMessage: { [key: string]: any }
|
|
||||||
export default LocaleMessage
|
|
||||||
}
|
|
||||||
|
|
||||||
// ant-design-vue/es/base
|
|
||||||
declare module 'ant-design-vue/es/base' {
|
|
||||||
class Base {
|
|
||||||
static install(vue: typeof Vue): void
|
|
||||||
}
|
|
||||||
export default Base
|
|
||||||
}
|
|
||||||
18
types/shims/shims-tsx.d.ts
vendored
18
types/shims/shims-tsx.d.ts
vendored
@@ -1,18 +0,0 @@
|
|||||||
import Vue, { VNode } from 'vue'
|
|
||||||
|
|
||||||
declare module '*.tsx' {
|
|
||||||
import Vue from 'compatible-vue'
|
|
||||||
export default Vue
|
|
||||||
}
|
|
||||||
|
|
||||||
declare global {
|
|
||||||
namespace JSX {
|
|
||||||
// tslint:disable no-empty-interface
|
|
||||||
type Element = VNode
|
|
||||||
// tslint:disable no-empty-interface
|
|
||||||
type ElementClass = Vue
|
|
||||||
interface IntrinsicElements {
|
|
||||||
[elem: string]: any
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
24
types/shims/shims-vue.d.ts
vendored
24
types/shims/shims-vue.d.ts
vendored
@@ -1,24 +0,0 @@
|
|||||||
declare module '*.vue' {
|
|
||||||
import { defineComponent } from 'vue'
|
|
||||||
const component: ReturnType<typeof defineComponent>
|
|
||||||
export default component
|
|
||||||
}
|
|
||||||
|
|
||||||
// declare module '*.vue' {
|
|
||||||
// import * as vue from 'vue';
|
|
||||||
// export declare const render: vue.RootRenderFunction<Element | DocumentFragment>
|
|
||||||
// }
|
|
||||||
|
|
||||||
// declare module '@vue/runtime-core' {
|
|
||||||
// interface ComponentCustomProperties {
|
|
||||||
// $createLoading: () => any
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
declare type Nullable<T> = T | null
|
|
||||||
|
|
||||||
declare type CustomizedHTMLElement<T> = HTMLElement & T
|
|
||||||
|
|
||||||
declare type Indexable<T> = {
|
|
||||||
[key: string]: T
|
|
||||||
}
|
|
||||||
27
types/tableColumn.d.ts
vendored
27
types/tableColumn.d.ts
vendored
@@ -1,27 +0,0 @@
|
|||||||
import { ColumnProps, TableProps } from 'ant-design-vue/lib/table/interface'
|
|
||||||
|
|
||||||
declare global {
|
|
||||||
interface ActionOptions {
|
|
||||||
type: 'select' | 'button' | 'text' | 'popconfirm' // 控制类型，默认为a,可选： select | button | text
|
|
||||||
text: string
|
|
||||||
permission?: {
|
|
||||||
// 权限
|
|
||||||
action?: 'create' | 'delete' | 'update' | 'retrieve' // CRUD权限：创建（Create）、更新（Update）、读取（Retrieve）和删除（Delete）操作
|
|
||||||
effect?: 'disabled'
|
|
||||||
}
|
|
||||||
props?: any // 组件属性，v-bind="props"
|
|
||||||
func?: ({ text, record, index }, callback: (...rest) => any) => any // 动作事件触发回调
|
|
||||||
}
|
|
||||||
|
|
||||||
interface TableColumn extends ColumnProps {
|
|
||||||
title: string
|
|
||||||
dataIndex: string
|
|
||||||
width?: number
|
|
||||||
slots?: {
|
|
||||||
customRender: string
|
|
||||||
}
|
|
||||||
slotsType?: 'format' | 'link' | 'component'
|
|
||||||
slotsFunc?: (...rest) => any
|
|
||||||
actions?: ActionOptions[]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
14
types/vuex.d.ts
vendored
14
types/vuex.d.ts
vendored
@@ -1,14 +0,0 @@
|
|||||||
import { ComponentCustomProperties } from 'vue'
|
|
||||||
import { Store } from 'vuex'
|
|
||||||
|
|
||||||
declare module '@vue/runtime-core' {
|
|
||||||
// declare your own store states
|
|
||||||
interface State {
|
|
||||||
count: number
|
|
||||||
}
|
|
||||||
|
|
||||||
// provide typings for `this.$store`
|
|
||||||
interface ComponentCustomProperties {
|
|
||||||
$store: Store<State>
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -21,6 +21,10 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
|
|||||||
esbuild: {},
|
esbuild: {},
|
||||||
resolve: {
|
resolve: {
|
||||||
alias: [
|
alias: [
|
||||||
|
{
|
||||||
|
find: /\/#\//,
|
||||||
|
replacement: pathResolve('types') + '/'
|
||||||
|
},
|
||||||
{
|
{
|
||||||
find: '@',
|
find: '@',
|
||||||
replacement: pathResolve('src') + '/'
|
replacement: pathResolve('src') + '/'
|
||||||
|
|||||||
18
yarn.lock
18
yarn.lock
@@ -3561,10 +3561,10 @@ mute-stream@0.0.7:
|
|||||||
resolved "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
|
resolved "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.7.tgz#3075ce93bc21b8fab43e1bc4da7e8115ed1e7bab"
|
||||||
integrity sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s=
|
integrity sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s=
|
||||||
|
|
||||||
naive-ui@^2.15.4:
|
naive-ui@^2.15.5:
|
||||||
version "2.15.4"
|
version "2.15.5"
|
||||||
resolved "https://registry.nlark.com/naive-ui/download/naive-ui-2.15.4.tgz#56c53b03e277ac9e55396bfb85dc2b49293ca6c3"
|
resolved "https://registry.nlark.com/naive-ui/download/naive-ui-2.15.5.tgz#50ffc1834fd64765621a31f0b09e64d72770cd6c"
|
||||||
integrity sha1-VsU7A+J3rJ5VOWv7hdwrSSk8psM=
|
integrity sha1-UP/Bg0/WR2ViGjHwsJ5k1ydwzWw=
|
||||||
dependencies:
|
dependencies:
|
||||||
"@css-render/plugin-bem" "^0.15.4"
|
"@css-render/plugin-bem" "^0.15.4"
|
||||||
"@css-render/vue3-ssr" "^0.15.4"
|
"@css-render/vue3-ssr" "^0.15.4"
|
||||||
@@ -3578,7 +3578,7 @@ naive-ui@^2.15.4:
|
|||||||
lodash "^4.17.21"
|
lodash "^4.17.21"
|
||||||
lodash-es "^4.17.21"
|
lodash-es "^4.17.21"
|
||||||
seemly "^0.3.1"
|
seemly "^0.3.1"
|
||||||
treemate "^0.2.11"
|
treemate "^0.2.12"
|
||||||
vdirs "^0.1.4"
|
vdirs "^0.1.4"
|
||||||
vfonts "^0.1.0"
|
vfonts "^0.1.0"
|
||||||
vooks "^0.2.6"
|
vooks "^0.2.6"
|
||||||
@@ -4967,10 +4967,10 @@ to-regex-range@^5.0.1:
|
|||||||
dependencies:
|
dependencies:
|
||||||
is-number "^7.0.0"
|
is-number "^7.0.0"
|
||||||
|
|
||||||
treemate@^0.2.11:
|
treemate@^0.2.12:
|
||||||
version "0.2.11"
|
version "0.2.12"
|
||||||
resolved "https://registry.nlark.com/treemate/download/treemate-0.2.11.tgz#cffa37051e613beaa82fd3fce56300e8e4d8328f"
|
resolved "https://registry.nlark.com/treemate/download/treemate-0.2.12.tgz#eed8ce0cd5a03f11c090c43d08f548694eead4b5"
|
||||||
integrity sha1-z/o3BR5hO+qoL9P85WMA6OTYMo8=
|
integrity sha1-7tjODNWgPxHAkMQ9CPVIaU7q1LU=
|
||||||
|
|
||||||
trim-newlines@^3.0.0:
|
trim-newlines@^3.0.0:
|
||||||
version "3.0.1"
|
version "3.0.1"
|
||||||
|
|||||||
Reference in New Issue
Block a user