3 Commits
v1.1 ... v1.2

Author SHA1 Message Date
Ah jung
b4857a7559 fix Bug or add example 2021-07-16 17:41:11 +08:00
啊俊
a6aa6d4d6d 新增示例demo 2021-07-15 23:51:18 +08:00
Ah jung
8fd663e0e5 readme更新,删除无用文件 2021-07-15 15:18:00 +08:00
62 changed files with 1351 additions and 617 deletions

View File

@@ -1,3 +0,0 @@
> 1%
last 2 versions
not dead

View File

@@ -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

View File

@@ -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,
};

View File

@@ -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"

View File

@@ -1,3 +1,17 @@
# 1.2 (2021-07-16)
### 🐛 Bug Fixes
- 修复面包屑显示登录页面
- 菜单支持只展开当前父级菜单
- ### ✨ Features
- 新增 `列表页面-基础列表` 示例页面
- 新增 `异常页面-404-403-500` 示例页面
- 新增 `结果页面-成功-失败-信息` 示例页面
- 新增 `设置页面-个人设置-系统设置` 示例页面
- tips `示例页面,可能在深色主题显示不佳`
- 持续更新更多实用示例,同时也演示`Naive UI`使用方法
# 1.1 (2021-07-15)
- ### ✨ Features
- 新增 `基础表单` 示例页面

View File

@@ -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

View File

@@ -15,6 +15,11 @@ Naive Ui Admin 是一个免费开源的中后台模版,使用了最新的`vue3
- [x] 主控台
- [ ] 监控页
- [x] 工作台
- [x] 表单页面
- [x] 列表页面
- [x] 异常页面
- [x] 结果页面
- [x] 设置页面
### 页面组件
#### ProTable

View File

@@ -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>

View File

@@ -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",

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 18 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 30 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 32 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 24 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 31 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 20 KiB

View File

@@ -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'

View File

@@ -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;

View File

@@ -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;
}

View File

@@ -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',
}

View File

@@ -1,4 +1,4 @@
import { computed, unref, ref } from 'vue';
import { computed } from 'vue';
import { useDesignSettingStore } from '@/store/modules/designSetting';
export function useDesignSetting() {

View File

@@ -1,4 +1,4 @@
import { computed, unref, ref } from 'vue';
import { computed } from 'vue';
import { useProjectSettingStore } from '@/store/modules/projectSetting';
export function useProjectSetting() {

View File

@@ -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>

View File

@@ -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,

View File

@@ -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,

View File

@@ -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
}
}
})

View File

@@ -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
}
}
}

View File

@@ -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()

View File

@@ -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
]
})

View File

@@ -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,
});
});
};

View File

@@ -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)

View File

@@ -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')
}

View 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

View 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

View 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

View 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

View File

@@ -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, '路由错误')
})
}

View File

@@ -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;
}

View File

@@ -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'

View File

@@ -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: () => '编辑' }
)
]
}
}
]

View 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>

View File

@@ -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;

View 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>

View File

@@ -68,7 +68,7 @@
</div>
</template>
<script>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import { useMessage } from 'naive-ui'

View 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: () => '编辑' }
)
]
}
}
]

View 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
View 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
View 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****54261980</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****54262980</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>

View 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>

View 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>

View 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
View File

@@ -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
View 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
View 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
View File

@@ -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
View File

@@ -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[]
}
}

View File

@@ -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
}

View File

@@ -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
}
}
}

View File

@@ -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
}

View File

@@ -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
View File

@@ -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>
}
}

View File

@@ -21,6 +21,10 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
esbuild: {},
resolve: {
alias: [
{
find: /\/#\//,
replacement: pathResolve('types') + '/'
},
{
find: '@',
replacement: pathResolve('src') + '/'

View File

@@ -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"