mirror of
https://github.com/jekip/naive-ui-admin.git
synced 2026-02-05 14:12:26 +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)
|
||||
- ### ✨ Features
|
||||
- 新增 `基础表单` 示例页面
|
||||
|
||||
2
LICENSE
2
LICENSE
@@ -1,6 +1,6 @@
|
||||
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
|
||||
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] 设置页面
|
||||
|
||||
### 页面组件
|
||||
#### ProTable
|
||||
|
||||
76
index.html
76
index.html
@@ -10,81 +10,13 @@
|
||||
/>
|
||||
<link rel="icon" href="/favicon.ico"/>
|
||||
<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>
|
||||
<body>
|
||||
<div id="app">
|
||||
<style>
|
||||
.app-loading-main {
|
||||
display: flex;
|
||||
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 class="first-loading-wrp">
|
||||
<div class="loading-wrp">
|
||||
<span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "naive-ui-admin",
|
||||
"version": "1.1",
|
||||
"version": "1.2",
|
||||
"author": {
|
||||
"name": "Ahjung",
|
||||
"email": "735878602@qq.com",
|
||||
@@ -33,7 +33,7 @@
|
||||
"lodash-es": "^4.17.21",
|
||||
"mitt": "^2.1.0",
|
||||
"mockjs": "^1.1.0",
|
||||
"naive-ui": "^2.15.4",
|
||||
"naive-ui": "^2.15.5",
|
||||
"nprogress": "^1.0.0-1",
|
||||
"pinia": "^2.0.0-beta.3",
|
||||
"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>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, computed, ref, onMounted, onUnmounted } from 'vue'
|
||||
import { defineComponent } from 'vue'
|
||||
import { MessageContent } from '@/components/MessageContent'
|
||||
import { DialogContent } from '@/components/DialogContent'
|
||||
|
||||
|
||||
@@ -2,20 +2,22 @@
|
||||
<div class="table-toolbar">
|
||||
|
||||
<!--顶部左侧区域-->
|
||||
<n-space align="center" class="table-toolbar-left">
|
||||
<div class="table-toolbar-left-title" v-if="title">
|
||||
{{ title }}
|
||||
<n-tooltip trigger="hover" v-if="titleTooltip">
|
||||
<template #trigger>
|
||||
<n-icon size="18" class="ml-1 cursor-pointer text-gray-400">
|
||||
<QuestionCircleOutlined/>
|
||||
</n-icon>
|
||||
</template>
|
||||
{{ titleTooltip }}
|
||||
</n-tooltip>
|
||||
</div>
|
||||
<div class="flex items-center table-toolbar-left ">
|
||||
<template v-if="title">
|
||||
<div class="table-toolbar-left-title">
|
||||
{{ title }}
|
||||
<n-tooltip trigger="hover" v-if="titleTooltip">
|
||||
<template #trigger>
|
||||
<n-icon size="18" class="ml-1 cursor-pointer text-gray-400">
|
||||
<QuestionCircleOutlined/>
|
||||
</n-icon>
|
||||
</template>
|
||||
{{ titleTooltip }}
|
||||
</n-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
<slot name="tableTitle"></slot>
|
||||
</n-space>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center table-toolbar-right">
|
||||
|
||||
@@ -276,7 +278,6 @@ export default defineComponent({
|
||||
flex: 1;
|
||||
|
||||
&-icon {
|
||||
height: 18px;
|
||||
margin-left: 12px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
|
||||
@@ -222,12 +222,10 @@ export default defineComponent({
|
||||
}
|
||||
&-right {
|
||||
&-icon {
|
||||
height: 18px;
|
||||
margin-left: 12px;
|
||||
font-size: 16px;
|
||||
color:var(--text-color);
|
||||
cursor: pointer;
|
||||
|
||||
:hover {
|
||||
color: #1890ff;
|
||||
}
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
export enum PageEnum {
|
||||
// basic login path
|
||||
// 登录
|
||||
BASE_LOGIN = '/login',
|
||||
// basic home path
|
||||
//重定向
|
||||
REDIRECT = '/Redirect',
|
||||
// 首页
|
||||
BASE_HOME = '/dashboard',
|
||||
// error page path
|
||||
// 错误
|
||||
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';
|
||||
|
||||
export function useDesignSetting() {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { computed, unref, ref } from 'vue';
|
||||
import { computed } from 'vue';
|
||||
import { useProjectSettingStore } from '@/store/modules/projectSetting';
|
||||
|
||||
export function useProjectSetting() {
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
</a>
|
||||
</div>
|
||||
<div class="copyright">
|
||||
naive-ui-admin 1.1 · Made by Ah jung
|
||||
naive-ui-admin 1.2 · Made by Ah jung
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
import { NLayout, NAvatar, NMenu, NDropdown, NBreadcrumb, NTooltip } from 'naive-ui'
|
||||
|
||||
import {
|
||||
SettingOutlined,
|
||||
SearchOutlined,
|
||||
@@ -18,7 +16,6 @@ import {
|
||||
|
||||
export default {
|
||||
SettingOutlined,
|
||||
NDropdown,
|
||||
LockOutlined,
|
||||
GithubOutlined,
|
||||
SearchOutlined,
|
||||
|
||||
@@ -256,7 +256,7 @@ export default defineComponent({
|
||||
]
|
||||
const avatarOptions = [
|
||||
{
|
||||
label: '个人中心',
|
||||
label: '个人设置',
|
||||
key: 1
|
||||
},
|
||||
{
|
||||
@@ -269,7 +269,7 @@ export default defineComponent({
|
||||
const avatarSelect = (key) => {
|
||||
switch (key) {
|
||||
case 1:
|
||||
openUserCentre()
|
||||
router.push({name:'Setting'})
|
||||
break;
|
||||
case 2:
|
||||
doLogout()
|
||||
@@ -282,13 +282,6 @@ export default defineComponent({
|
||||
openDrawer()
|
||||
}
|
||||
|
||||
function openUserCentre() {
|
||||
notification.info({
|
||||
content: '提示',
|
||||
meta: '客官,该功能正在开发中呢...'
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
iconList,
|
||||
|
||||
@@ -1,14 +1,22 @@
|
||||
<template>
|
||||
<NMenu :options="menus" :inverted="inverted" :mode="mode" :collapsed="collapsed" :collapsed-width="64"
|
||||
:collapsed-icon-size="20"
|
||||
@update:value="clickMenuItem" :default-expanded-keys="openKeys" v-model:value="selectedKeys">
|
||||
<NMenu
|
||||
:options="menus"
|
||||
: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>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, reactive, computed, watch, toRefs, ref } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { useUserStore } from '@/store/modules/user'
|
||||
import { useAsyncRouteStore } from '@/store/modules/asyncRoute'
|
||||
import { generatorMenu } from '@/utils/index'
|
||||
import { useProjectSettingStore } from "@/store/modules/projectSetting";
|
||||
@@ -32,14 +40,16 @@ export default defineComponent({
|
||||
const currentRoute = useRoute()
|
||||
const router = useRouter()
|
||||
const asyncRouteStore = useAsyncRouteStore()
|
||||
const userStore = useUserStore()
|
||||
const settingStore = useProjectSettingStore()
|
||||
const { mode } = props
|
||||
|
||||
// 获取当前打开的子菜单
|
||||
const getOpenKeys = () => [currentRoute.matched[0]?.name]
|
||||
const matched = currentRoute.matched
|
||||
|
||||
const getOpenKeys = matched && matched.length ? [matched[0]?.name] : []
|
||||
|
||||
const state = reactive({
|
||||
openKeys: getOpenKeys(),
|
||||
openKeys: getOpenKeys,
|
||||
selectedKeys: currentRoute.name,
|
||||
})
|
||||
|
||||
@@ -53,25 +63,23 @@ export default defineComponent({
|
||||
|
||||
// 监听菜单收缩状态
|
||||
watch(
|
||||
() => props.collapsed,
|
||||
(newVal) => {
|
||||
state.openKeys = newVal ? [] : getOpenKeys()
|
||||
state.selectedKeys = currentRoute.name
|
||||
}
|
||||
() => props.collapsed,
|
||||
(newVal) => {
|
||||
state.openKeys = newVal ? [] : getOpenKeys
|
||||
state.selectedKeys = currentRoute.name
|
||||
}
|
||||
)
|
||||
|
||||
// 跟随页面路由变化,切换菜单选中状态
|
||||
watch(
|
||||
() => currentRoute.fullPath,
|
||||
() => {
|
||||
if (currentRoute.name == 'login' || props.collapsed) return
|
||||
state.openKeys = getOpenKeys()
|
||||
state.selectedKeys = currentRoute.name
|
||||
}
|
||||
() => currentRoute.fullPath,
|
||||
() => {
|
||||
state.selectedKeys = currentRoute.name
|
||||
}
|
||||
)
|
||||
|
||||
// 点击菜单
|
||||
const clickMenuItem = (key, item) => {
|
||||
function clickMenuItem(key: string) {
|
||||
if (/http(s)?:/.test(key)) {
|
||||
window.open(key)
|
||||
} else {
|
||||
@@ -79,12 +87,20 @@ export default defineComponent({
|
||||
}
|
||||
}
|
||||
|
||||
//展开菜单
|
||||
function menuExpanded(openKeys: string[]) {
|
||||
if (!openKeys) return
|
||||
const latestOpenKey = openKeys.pop();
|
||||
state.openKeys = latestOpenKey ? [latestOpenKey] : []
|
||||
}
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
inverted,
|
||||
menus,
|
||||
mode,
|
||||
clickMenuItem
|
||||
clickMenuItem,
|
||||
menuExpanded
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@@ -22,7 +22,10 @@
|
||||
<div ref="navRef" class="tabs-card-nav" :style="getNavStyle">
|
||||
<Draggable :list="tabsList" animation="300" item-key="fullPath">
|
||||
<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>
|
||||
<n-icon size="14" @click.stop="closeTabItem(element)">
|
||||
<CloseOutlined/>
|
||||
@@ -59,6 +62,7 @@ import { RouteItem } from '@/store/modules/tabsView'
|
||||
import { useProjectSetting } from '@/hooks/setting/useProjectSetting'
|
||||
import { useMessage } from 'naive-ui'
|
||||
import Draggable from 'vuedraggable/src/vuedraggable'
|
||||
import { PageEnum } from '@/enums/pageEnum'
|
||||
import {
|
||||
DownOutlined,
|
||||
ReloadOutlined,
|
||||
@@ -199,8 +203,7 @@ export default defineComponent({
|
||||
|
||||
// 标签页列表
|
||||
const tabsList: any = computed(() => tabsViewStore.tabsList)
|
||||
|
||||
const whiteList = ['Redirect', 'login']
|
||||
const whiteList = [PageEnum.REDIRECT, PageEnum.BASE_LOGIN]
|
||||
|
||||
watch(
|
||||
() => 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 { setupNaive, setupDirectives, setupGlobalMethods, setupCustomComponents } from '@/plugins'
|
||||
|
||||
const app = createApp(App)
|
||||
async function bootstrap() {
|
||||
const app = createApp(App)
|
||||
|
||||
// 注册全局常用的 naive-ui 组件
|
||||
setupNaive(app)
|
||||
// 注册全局常用的 naive-ui 组件
|
||||
setupNaive(app)
|
||||
|
||||
// 注册全局自定义组件,如:<svg-icon />
|
||||
setupCustomComponents(app)
|
||||
// 注册全局自定义组件,如:<svg-icon />
|
||||
setupCustomComponents(app)
|
||||
|
||||
// 注册全局自定义指令,如:v-permission权限指令
|
||||
setupDirectives(app)
|
||||
// 注册全局自定义指令,如:v-permission权限指令
|
||||
setupDirectives(app)
|
||||
|
||||
// 注册全局方法,如:app.config.globalProperties.$message = message
|
||||
setupGlobalMethods(app)
|
||||
// 注册全局方法,如:app.config.globalProperties.$message = message
|
||||
setupGlobalMethods(app)
|
||||
|
||||
// 挂载状态管理
|
||||
setupStore(app)
|
||||
// 挂载状态管理
|
||||
setupStore(app)
|
||||
|
||||
// 挂载路由
|
||||
setupRouter(app)
|
||||
// 挂载路由
|
||||
await setupRouter(app)
|
||||
|
||||
// 路由准备就绪后挂载APP实例
|
||||
router.isReady().then(() => app.mount('#app'))
|
||||
// 路由准备就绪后挂载APP实例
|
||||
await router.isReady();
|
||||
|
||||
app.mount('#app', true);
|
||||
}
|
||||
|
||||
void bootstrap()
|
||||
|
||||
@@ -56,7 +56,10 @@ import {
|
||||
NResult,
|
||||
NDescriptions,
|
||||
NDescriptionsItem,
|
||||
NTable
|
||||
NTable,
|
||||
NInputNumber,
|
||||
NLoadingBarProvider,
|
||||
NModal
|
||||
} from 'naive-ui'
|
||||
|
||||
const naive = create({
|
||||
@@ -116,7 +119,10 @@ const naive = create({
|
||||
NResult,
|
||||
NDescriptions,
|
||||
NDescriptionsItem,
|
||||
NTable
|
||||
NTable,
|
||||
NInputNumber,
|
||||
NLoadingBarProvider,
|
||||
NModal
|
||||
]
|
||||
})
|
||||
|
||||
|
||||
@@ -1,24 +1,6 @@
|
||||
import { MainView } from '@/layout/components/Main'
|
||||
|
||||
export const RedirectName = 'Redirect';
|
||||
|
||||
export const ParentLayout = 'ParentLayout';
|
||||
|
||||
export const ErrorPage = () => import('@/views/exception/404.vue');
|
||||
|
||||
/**
|
||||
* @description: default layout
|
||||
*/
|
||||
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 { constantRouterComponents, constantRouterIcon } from './constantRouterComponents'
|
||||
import router from '@/router/index'
|
||||
import { constantRouter, asyncRoutes } from '@/router/index'
|
||||
import { NEmpty } from 'naive-ui'
|
||||
import { constantRouter } from '@/router/index'
|
||||
import { RouteRecordRaw } from 'vue-router'
|
||||
|
||||
/**
|
||||
@@ -12,9 +11,9 @@ import { RouteRecordRaw } from 'vue-router'
|
||||
* @param parent
|
||||
* @returns {*}
|
||||
*/
|
||||
export const routerGenerator = (routerMap, parent) => {
|
||||
export const routerGenerator = (routerMap, parent?):any[] => {
|
||||
return routerMap.map(item => {
|
||||
const currentRouter = {
|
||||
const currentRouter:any = {
|
||||
// 路由地址 动态拼接生成如 /dashboard/workplace
|
||||
path: `${ parent && parent.path || '' }/${ item.path }`,
|
||||
// 路由名称,建议唯一
|
||||
@@ -53,12 +52,6 @@ export const generatorDynamicRouter = (): Promise<RouteRecordRaw[]> => {
|
||||
adminMenus()
|
||||
.then((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]
|
||||
asyncRoutesList.forEach(item => {
|
||||
router.addRoute(item)
|
||||
|
||||
@@ -24,16 +24,16 @@ const routes: Array<RouteRecordRaw> = [
|
||||
redirect: '/comp/console',
|
||||
component: Layout,
|
||||
meta: {
|
||||
title: '组件',
|
||||
title: '组件示例',
|
||||
icon: renderIcon(WalletOutlined ),
|
||||
sort: 1
|
||||
sort: 8
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: 'table',
|
||||
name: `${ routeName }_table`,
|
||||
meta: {
|
||||
title: '基础表格',
|
||||
title: '表格',
|
||||
},
|
||||
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 { storage } from '@/utils/Storage'
|
||||
import { debounce } from '@/utils/lodashChunk'
|
||||
import { useGlobSetting } from '@/hooks/setting'
|
||||
import { PageEnum } from '@/enums/pageEnum'
|
||||
|
||||
const globSetting = useGlobSetting()
|
||||
|
||||
|
||||
NProgress.configure({ showSpinner: false }) // NProgress Configuration
|
||||
|
||||
const whitePathList = ['/login'] // no redirect whitelist
|
||||
|
||||
const LOGIN_PATH = PageEnum.BASE_LOGIN
|
||||
const DEFAULT_PATH = PageEnum.BASE_HOME
|
||||
|
||||
|
||||
const permissionMode = globSetting.permissionMode //ROLE 前端固定角色 BACK 动态获取
|
||||
const whitePathList = [LOGIN_PATH] // no redirect whitelist
|
||||
|
||||
// 是否需要从后端获取菜单
|
||||
const isGetMenus = debounce(
|
||||
({ to, from, next, hasRoute, router }) => {
|
||||
const userStore = useUserStoreWidthOut();
|
||||
const asyncRouteStore = useAsyncRouteStoreWidthOut();
|
||||
userStore.GetInfo().then(res => {
|
||||
asyncRouteStore.generateRoutes(res).then(() => {
|
||||
// 根据roles权限生成可访问的路由表
|
||||
// 动态添加可访问路由表
|
||||
asyncRouteStore.getRouters().forEach((item) => {
|
||||
router.addRoute(item)
|
||||
});
|
||||
debugger
|
||||
// if (whitePathList.includes(to.name as string)) return
|
||||
if (!hasRoute) {
|
||||
// 请求带有 redirect 重定向时,登录自动重定向到该地址
|
||||
const redirect = decodeURIComponent((from.query.redirect || '') as string)
|
||||
if (to.path === redirect) {
|
||||
next({ ...to, replace: true })
|
||||
} else {
|
||||
// 跳转到目的路由
|
||||
next({ ...to, replace: true })
|
||||
}
|
||||
} else {
|
||||
next()
|
||||
}
|
||||
}).catch(() => next({ path: defaultRoutePath }))
|
||||
})
|
||||
},
|
||||
1800,
|
||||
{ leading: true }
|
||||
({ to, from, next, hasRoute, router }) => {
|
||||
const userStore = useUserStoreWidthOut();
|
||||
const asyncRouteStore = useAsyncRouteStoreWidthOut();
|
||||
userStore.GetInfo().then(res => {
|
||||
asyncRouteStore.generateRoutes(res).then(() => {
|
||||
// 根据roles权限生成可访问的路由表
|
||||
// 动态添加可访问路由表
|
||||
asyncRouteStore.getRouters().forEach((item) => {
|
||||
router.addRoute(item)
|
||||
});
|
||||
// if (whitePathList.includes(to.name as string)) return
|
||||
if (!hasRoute) {
|
||||
// 请求带有 redirect 重定向时,登录自动重定向到该地址
|
||||
const redirect = decodeURIComponent((from.query.redirect || '') as string)
|
||||
if (to.path === redirect) {
|
||||
next({ ...to, replace: true })
|
||||
} else {
|
||||
// 跳转到目的路由
|
||||
next({ ...to, replace: true })
|
||||
}
|
||||
} else {
|
||||
next()
|
||||
}
|
||||
}).catch(() => next({ path: defaultRoutePath }))
|
||||
})
|
||||
},
|
||||
1800,
|
||||
{ leading: true }
|
||||
)
|
||||
|
||||
|
||||
export function createRouterGuards(router: Router) {
|
||||
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 userStore = useUserStoreWidthOut();
|
||||
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.beforeEach(async (to, from, next) => {
|
||||
NProgress.start()
|
||||
if (from.path === LOGIN_PATH && to.name === 'errorPage') {
|
||||
next(PageEnum.BASE_HOME);
|
||||
return;
|
||||
}
|
||||
|
||||
router.onError((error) => {
|
||||
console.log(error, '路由错误')
|
||||
})
|
||||
// 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 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;
|
||||
}
|
||||
|
||||
body .n-icon{
|
||||
vertical-align:middle;
|
||||
}
|
||||
|
||||
body .proCard {
|
||||
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 {
|
||||
margin: 0 -10px;
|
||||
}
|
||||
|
||||
@@ -3,10 +3,8 @@
|
||||
import { VAxios } from './Axios'
|
||||
import { AxiosTransform } from './axiosTransform'
|
||||
import axios, { AxiosResponse } from 'axios'
|
||||
import qs from 'qs'
|
||||
import { checkStatus } from './checkStatus'
|
||||
import { joinTimestamp, formatRequestDate } from './helper'
|
||||
import { useDialog } from 'naive-ui'
|
||||
import { RequestEnum, ResultEnum, ContentTypeEnum } from '@/enums/httpEnum'
|
||||
|
||||
import { useGlobSetting } from '@/hooks/setting'
|
||||
@@ -24,8 +22,6 @@ const urlPrefix = globSetting.urlPrefix || '';
|
||||
const Message = window.$message
|
||||
const Modal = window.$dialog
|
||||
|
||||
const isDev = import.meta.env.DEV
|
||||
|
||||
import router from '@/router'
|
||||
import { storage } from '@/utils/Storage'
|
||||
|
||||
|
||||
@@ -42,16 +42,31 @@ export const columns = [
|
||||
{
|
||||
title: '操作',
|
||||
key: 'actions',
|
||||
render(row) {
|
||||
return h(
|
||||
NButton,
|
||||
{
|
||||
size: 'small',
|
||||
onClick: () => {
|
||||
}
|
||||
},
|
||||
{ default: () => '编辑' }
|
||||
)
|
||||
width:150,
|
||||
//简单写一下例子,不建议这么写,过段时间,这里封二次封装
|
||||
render() {
|
||||
return [
|
||||
h(
|
||||
NButton,
|
||||
{
|
||||
size: 'small',
|
||||
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>
|
||||
<div class="flex flex-col align-center justify-center page-container">
|
||||
<div class="flex flex-col justify-center page-container">
|
||||
<div class="text-center">
|
||||
<h1 class="text-base text-gray-500">哎哟喂,您好像走丢了...</h1>
|
||||
<router-link to="/" class="n-btn n-btn-primary">回到首页</router-link>
|
||||
<img src="~@/assets/images/exception/404.svg" alt=""/>
|
||||
</div>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
import { routes } from '@/router'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
export default defineComponent({
|
||||
name: '404'
|
||||
setup() {
|
||||
const router = useRouter()
|
||||
return {
|
||||
goHome(){
|
||||
router.push('/')
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.page-container {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-color: white;
|
||||
border-radius: 4px;
|
||||
|
||||
padding: 50px 0;
|
||||
.text-center{
|
||||
h1{ color: #666;padding: 20px 0}
|
||||
}
|
||||
img {
|
||||
width: 350px;
|
||||
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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref } from 'vue'
|
||||
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 {
|
||||
// Site title
|
||||
title: string;
|
||||
// Service interface url
|
||||
apiUrl: string;
|
||||
// Upload url
|
||||
uploadUrl?: string;
|
||||
// Service interface url prefix
|
||||
urlPrefix?: string;
|
||||
// Project abbreviation
|
||||
shortName: string;
|
||||
export interface ProjectSettingState {
|
||||
navMode: string,//导航模式
|
||||
navTheme: string,//导航风格
|
||||
headerSetting: object,//顶部设置
|
||||
showFooter: boolean, //页脚
|
||||
menuSetting: object, //多标签
|
||||
multiTabsSetting: object,//多标签
|
||||
crumbsSetting: object,//面包屑
|
||||
permissionMode: 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' {
|
||||
import mitt from 'mitt'
|
||||
export default mitt
|
||||
declare module '*.vue' {
|
||||
import { DefineComponent } from 'vue';
|
||||
const Component: DefineComponent<{}, {}, any>;
|
||||
export default Component;
|
||||
}
|
||||
|
||||
declare module 'blueimp-md5' {
|
||||
import md5 from 'blueimp-md5'
|
||||
export default md5
|
||||
declare module 'virtual:*' {
|
||||
const result: any;
|
||||
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: {},
|
||||
resolve: {
|
||||
alias: [
|
||||
{
|
||||
find: /\/#\//,
|
||||
replacement: pathResolve('types') + '/'
|
||||
},
|
||||
{
|
||||
find: '@',
|
||||
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"
|
||||
integrity sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s=
|
||||
|
||||
naive-ui@^2.15.4:
|
||||
version "2.15.4"
|
||||
resolved "https://registry.nlark.com/naive-ui/download/naive-ui-2.15.4.tgz#56c53b03e277ac9e55396bfb85dc2b49293ca6c3"
|
||||
integrity sha1-VsU7A+J3rJ5VOWv7hdwrSSk8psM=
|
||||
naive-ui@^2.15.5:
|
||||
version "2.15.5"
|
||||
resolved "https://registry.nlark.com/naive-ui/download/naive-ui-2.15.5.tgz#50ffc1834fd64765621a31f0b09e64d72770cd6c"
|
||||
integrity sha1-UP/Bg0/WR2ViGjHwsJ5k1ydwzWw=
|
||||
dependencies:
|
||||
"@css-render/plugin-bem" "^0.15.4"
|
||||
"@css-render/vue3-ssr" "^0.15.4"
|
||||
@@ -3578,7 +3578,7 @@ naive-ui@^2.15.4:
|
||||
lodash "^4.17.21"
|
||||
lodash-es "^4.17.21"
|
||||
seemly "^0.3.1"
|
||||
treemate "^0.2.11"
|
||||
treemate "^0.2.12"
|
||||
vdirs "^0.1.4"
|
||||
vfonts "^0.1.0"
|
||||
vooks "^0.2.6"
|
||||
@@ -4967,10 +4967,10 @@ to-regex-range@^5.0.1:
|
||||
dependencies:
|
||||
is-number "^7.0.0"
|
||||
|
||||
treemate@^0.2.11:
|
||||
version "0.2.11"
|
||||
resolved "https://registry.nlark.com/treemate/download/treemate-0.2.11.tgz#cffa37051e613beaa82fd3fce56300e8e4d8328f"
|
||||
integrity sha1-z/o3BR5hO+qoL9P85WMA6OTYMo8=
|
||||
treemate@^0.2.12:
|
||||
version "0.2.12"
|
||||
resolved "https://registry.nlark.com/treemate/download/treemate-0.2.12.tgz#eed8ce0cd5a03f11c090c43d08f548694eead4b5"
|
||||
integrity sha1-7tjODNWgPxHAkMQ9CPVIaU7q1LU=
|
||||
|
||||
trim-newlines@^3.0.0:
|
||||
version "3.0.1"
|
||||
|
||||
Reference in New Issue
Block a user