feat: 引导页
This commit is contained in:
wf
parent
674e868691
commit
0f59405e16
@ -2,7 +2,7 @@
|
||||
<div>
|
||||
<div class="header_crumb">
|
||||
<div class="menu_fold">
|
||||
<a-button size="mini" type="text" class="menu_fold_icon" @click="onCollapsed">
|
||||
<a-button size="mini" type="text" class="menu_fold_icon" id="system-collapsed" @click="onCollapsed">
|
||||
<template #icon>
|
||||
<icon-menu-fold :size="18" v-if="!collapsed" />
|
||||
<icon-menu-unfold :size="18" v-if="collapsed" />
|
||||
@ -10,7 +10,7 @@
|
||||
</a-button>
|
||||
</div>
|
||||
<div class="breadcrumb" v-if="isBreadcrumb">
|
||||
<Breadcrumb />
|
||||
<Breadcrumb id="system-breadcrumb" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<div class="header_setting">
|
||||
<!-- 国际化 -->
|
||||
<a-dropdown trigger="hover" @select="onLange">
|
||||
<a-button size="mini" type="text" class="icon_btn">
|
||||
<a-button size="mini" type="text" class="icon_btn" id="system-language">
|
||||
<template #icon>
|
||||
<icon-language :size="18" />
|
||||
</template>
|
||||
@ -15,7 +15,7 @@
|
||||
</a-dropdown>
|
||||
<!-- 切换黑夜模式 -->
|
||||
<a-tooltip :content="$t(`language.${!darkMode ? 'switch-to-night-mode' : 'switch-to-daytime-mode'}`)">
|
||||
<a-button size="mini" type="text" class="icon_btn" @click="onNightMode">
|
||||
<a-button size="mini" type="text" class="icon_btn" id="system-dark" @click="onNightMode">
|
||||
<template #icon>
|
||||
<icon-sun-fill :size="18" v-if="!darkMode" />
|
||||
<icon-moon-fill :size="18" v-else />
|
||||
@ -24,7 +24,7 @@
|
||||
</a-tooltip>
|
||||
<!-- 通知 -->
|
||||
<a-popover position="bottom" trigger="click">
|
||||
<a-button size="mini" type="text" class="icon_btn notice">
|
||||
<a-button size="mini" type="text" class="icon_btn notice" id="system-notice">
|
||||
<template #icon>
|
||||
<icon-notification :size="18" />
|
||||
</template>
|
||||
@ -33,7 +33,7 @@
|
||||
</a-popover>
|
||||
<!-- 全屏 -->
|
||||
<a-tooltip :content="$t(`language.${fullScreen ? 'full-screen' : 'exit-full-screen'}`)">
|
||||
<a-button size="mini" type="text" class="icon_btn" @click="onFullScreen">
|
||||
<a-button size="mini" type="text" class="icon_btn" id="system-fullscreen" @click="onFullScreen">
|
||||
<template #icon>
|
||||
<icon-fullscreen :size="18" v-if="fullScreen" />
|
||||
<icon-fullscreen-exit :size="18" v-else />
|
||||
@ -42,7 +42,7 @@
|
||||
</a-tooltip>
|
||||
<!-- 系统设置 -->
|
||||
<a-tooltip :content="$t(`language.system-settings`)">
|
||||
<a-button size="mini" type="text" class="icon_btn" @click="onSystemSetting">
|
||||
<a-button size="mini" type="text" class="icon_btn" id="system-settings" @click="onSystemSetting">
|
||||
<template #icon>
|
||||
<icon-settings :size="18" />
|
||||
</template>
|
||||
@ -50,7 +50,7 @@
|
||||
</a-tooltip>
|
||||
<!-- 主题设置 -->
|
||||
<a-tooltip :content="$t(`language.theme-settings`)">
|
||||
<a-button size="mini" type="text" class="icon_btn" @click="onThemeSetting">
|
||||
<a-button size="mini" type="text" class="icon_btn" id="system-theme" @click="onThemeSetting">
|
||||
<template #icon>
|
||||
<icon-skin :size="18" />
|
||||
</template>
|
||||
@ -58,7 +58,7 @@
|
||||
</a-tooltip>
|
||||
<!-- 我的 -->
|
||||
<a-dropdown trigger="hover">
|
||||
<div class="my_setting">
|
||||
<div class="my_setting" id="system-my-setting">
|
||||
<a-image width="32" height="32" fit="cover" :src="myImage" class="my_image" />
|
||||
<span>admin</span>
|
||||
<div class="icon_down">
|
||||
|
||||
@ -19,10 +19,12 @@
|
||||
<div class="tabs_setting">
|
||||
<a-space>
|
||||
<a-tooltip :content="$t(`language.refresh`)" position="bottom" mini>
|
||||
<span ref="refreshRef" :class="rotateOpen && 'refresh'"><icon-refresh :size="18" @click="refresh" /></span>
|
||||
<span ref="refreshRef" id="system-tabs-refresh" :class="rotateOpen && 'refresh'">
|
||||
<icon-refresh :size="18" @click="refresh" />
|
||||
</span>
|
||||
</a-tooltip>
|
||||
<a-dropdown trigger="hover" :popup-max-height="false">
|
||||
<div class="setting"><icon-apps :size="18" /></div>
|
||||
<div class="setting" id="system-tabs-setting"><icon-apps :size="18" /></div>
|
||||
<template #content>
|
||||
<a-doption @click="closeCurrent">
|
||||
<template #icon><icon-close /></template>
|
||||
|
||||
@ -8,7 +8,10 @@
|
||||
<a-typography-text id="newbie-title-5"> 清新丰富的主题配置：内置多样的主题配置。</a-typography-text>
|
||||
</a-space>
|
||||
<div class="margin-top">
|
||||
<a-button type="primary" @click="openNewbie">打开指引</a-button>
|
||||
<a-space >
|
||||
<a-button type="primary" @click="openNewbie">打开指引</a-button>
|
||||
<a-button type="primary" @click="openSystemNewbie">系统指引</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
<div class="margin-top">新手指引，基于<a-link href="https://driver.employleague.cn/" target="_blank">driver.js</a-link></div>
|
||||
</div>
|
||||
@ -46,7 +49,7 @@ const openNewbie = () => {
|
||||
popover: {
|
||||
title: "严格的代码规范",
|
||||
description: "严格遵循开发设计规范，保证代码的规范性",
|
||||
side: "left"
|
||||
side: "right"
|
||||
}
|
||||
},
|
||||
{
|
||||
@ -54,7 +57,7 @@ const openNewbie = () => {
|
||||
popover: {
|
||||
title: "内置国际化方案",
|
||||
description: "轻松实现多语言支持",
|
||||
side: "left"
|
||||
side: "right"
|
||||
}
|
||||
},
|
||||
{
|
||||
@ -62,13 +65,113 @@ const openNewbie = () => {
|
||||
popover: {
|
||||
title: "清新丰富的主题配置",
|
||||
description: "内置多样的主题配置",
|
||||
side: "left"
|
||||
side: "right"
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
driverObj.drive();
|
||||
};
|
||||
|
||||
let systemList = ref<any>([{
|
||||
element: "#system-collapsed",
|
||||
popover: {
|
||||
title: "折叠菜单",
|
||||
description: "菜单的展开收起",
|
||||
side: "right"
|
||||
}
|
||||
},
|
||||
{
|
||||
element: "#system-breadcrumb",
|
||||
popover: {
|
||||
title: "面包屑",
|
||||
description: "页面路径",
|
||||
side: "right"
|
||||
}
|
||||
},
|
||||
{
|
||||
element: "#system-language",
|
||||
popover: {
|
||||
title: "国际化",
|
||||
description: "切换系统语言",
|
||||
side: "left"
|
||||
}
|
||||
},
|
||||
{
|
||||
element: "#system-dark",
|
||||
popover: {
|
||||
title: "黑暗模式",
|
||||
description: "切换黑暗和白天模式",
|
||||
side: "left"
|
||||
}
|
||||
},
|
||||
{
|
||||
element: "#system-notice",
|
||||
popover: {
|
||||
title: "通知",
|
||||
description: "系统通知信息",
|
||||
side: "left"
|
||||
}
|
||||
},
|
||||
{
|
||||
element: "#system-fullscreen",
|
||||
popover: {
|
||||
title: "全屏",
|
||||
description: "系统全屏显示",
|
||||
side: "left"
|
||||
}
|
||||
},
|
||||
{
|
||||
element: "#system-settings",
|
||||
popover: {
|
||||
title: "系统设置",
|
||||
description: "修改系统的渲染配置",
|
||||
side: "left"
|
||||
}
|
||||
},
|
||||
{
|
||||
element: "#system-theme",
|
||||
popover: {
|
||||
title: "主题设置",
|
||||
description: "修改系统的主题配置",
|
||||
side: "left"
|
||||
}
|
||||
},
|
||||
{
|
||||
element: "#system-my-setting",
|
||||
popover: {
|
||||
title: "我的",
|
||||
description: "个人中心设置",
|
||||
side: "left"
|
||||
},
|
||||
|
||||
}, {
|
||||
element: "#system-tabs-setting",
|
||||
popover: {
|
||||
title: "Tabs栏功能",
|
||||
description: "Tabs栏的关闭、刷新等功能",
|
||||
side: "left"
|
||||
},
|
||||
|
||||
}, {
|
||||
element: "#system-tabs-refresh",
|
||||
popover: {
|
||||
title: "页面刷新",
|
||||
description: "刷新当前窗口页面",
|
||||
side: "left"
|
||||
},
|
||||
|
||||
}])
|
||||
const openSystemNewbie = () => {
|
||||
const driverObj = driver({
|
||||
allowClose: true,
|
||||
doneBtnText: "结束",
|
||||
nextBtnText: "下一步",
|
||||
prevBtnText: "上一步",
|
||||
steps: systemList.value
|
||||
});
|
||||
driverObj.drive();
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user