mkm/goview_vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 新增侧边栏和首页

Browse Source
This commit is contained in:
MTrun 2021-12-18 22:05:00 +08:00
parent 90e45f6c23
commit c1daa231b6
29 changed files with 451 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -8,7 +8,6 @@
"lint": "eslint \"{src}/**/*.{vue,ts,tsx}\" --fix --ext"
},
"dependencies": {
"@vicons/ionicons5": "~0.11.0",
"axios": "^0.23.0",
"mockjs": "^1.1.0",
"naive-ui": "^2.19.9",
@ -18,6 +17,7 @@
"vue-router": "4.0.12"
},
"devDependencies": {
"@vicons/ionicons5": "~0.11.0",
"@types/node": "^16.11.1",
"@typescript-eslint/eslint-plugin": "^5.6.0",
"@typescript-eslint/parser": "^5.6.0",

BIN
src/assets/images/project/project-top-bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 287 KiB

7
src/components/Application/Application.vue
View File

@ -12,13 +12,6 @@
</n-loading-bar-provider>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
name: 'Application'
})
</script>
<script lang="ts" setup>
import {
NDialogProvider,

33
src/components/UserInfo/index.vue
View File

@ -5,18 +5,17 @@
:show-arrow="true"
:options="options"
>
<n-button quaternary circle>
<n-icon size="20" :depth="1">
<PersonOutlineIcon v-show="fallback" />
</n-icon>
<div class="user-info-box">
<PersonIcon v-if="fallback" />
<n-avatar
v-show="!fallback"
v-if="!fallback"
round
size="small"
object-fit="cover"
size="medium"
:src="imageUrl"
@error="errorHandle"
/>
</n-button>
</div>
</n-dropdown>
</template>
@ -26,9 +25,10 @@ import { NAvatar, NText } from 'naive-ui'
import { renderIcon } from '@/utils/index'
import { openDoc, logout } from '@/utils/page'
import {
Person as PersonOutlineIcon,
Person as PersonIcon,
LogOutOutline as LogOutOutlineIcon,
DocumentText as DocumentTextIcon
DocumentText as DocumentTextIcon,
ChatboxEllipses as ChatboxEllipsesIcon
} from '@vicons/ionicons5'
const imageUrl = 'https://www.naiveui.com/assets/naivelogo.93278402.svg'
@ -74,6 +74,11 @@ const options = [
key: 'doc',
icon: renderIcon(DocumentTextIcon)
},
{
label: '联系我们',
key: 'contact',
icon: renderIcon(ChatboxEllipsesIcon)
},
{
type: 'divider',
key: 'd2'
@ -95,9 +100,19 @@ const handleSelect = (key: string) => {
case 'doc':
openDoc()
break
case 'contact':
openDoc()
break
case 'logout':
logout()
break
}
}
</script>
<style lang="scss" scoped>
.user-info-box {
cursor: pointer;
transform: scale(.7);
}
</style>

12
src/enums/pageEnum.ts
View File

@ -13,9 +13,17 @@ export enum PageEnum {
BASE_HOME = '/project',
BASE_HOME_NAME = 'Project',
// 我的项目
BASE_HOME_ITEMS = '/project/items',
BASE_HOME_ITEMS_NAME = 'Project-Ttems',
// 我的模板
BASE_HOME_TEMPLATE = '/project/my-template',
BASE_HOME_TEMPLATE_NAME = 'Project-My-Template',
// 模板市场
BASE_HOME_Template_Market = '/project/templateMarket',
BASE_HOME_Template_Market_NAME = 'Project-TemplateMarket',
BASE_HOME_TEMPLATE_MARKET = '/project/template-market',
BASE_HOME_TEMPLATE_MARKET_NAME = 'Project-Template-Market',
// 错误
ERROR_PAGE_NAME_403 = 'ErrorPage403',

4
src/layout/components/Header/index.vue
View File

@ -32,9 +32,5 @@ import { LangSelect } from '@/components/LangSelect'
padding: 0 60px;
height: $--header-height;
}
&-divider {
margin: 0;
padding-top: 0;
}
}
</style>

6
src/layout/components/Main/index.vue
View File

@ -1,11 +1,7 @@
<template>
<router-view>
<template #default="{ Component, route }">
<transition name="list-complete" mode="out-in" appear>
<keep-alive>
<component :is="Component" :key="route.fullPath" />
</keep-alive>
</transition>
<component :is="Component" :key="route.fullPath" />
</template>
</router-view>
</template>

3
src/layout/components/TransitionMain/index.ts Normal file
View File

@ -0,0 +1,3 @@
import TransitionMain from './index.vue';
export { TransitionMain };

18
src/layout/components/TransitionMain/index.vue Normal file
View File

@ -0,0 +1,18 @@
<template>
<router-view #default="{ Component, route }">
<n-collapse-transition appear>
<component :is="Component" :key="route.fullPath" />
</n-collapse-transition>
<!-- todo 暂时不生效，待处理 -->
<!-- <transition name="v-modal" mode="out-in" appear>
<component
v-if="route.noKeepAlive"
:is="Component"
:key="route.fullPath"
/>
<keep-alive v-else>
<component :is="Component" :key="route.fullPath" />
</keep-alive>
</transition> -->
</router-view>
</template>

9
src/layout/index.vue
View File

@ -6,17 +6,8 @@
import { ref, onMounted } from 'vue'
import { useLoadingBar } from 'naive-ui'
import { MainView } from '@/layout/components/Main/index'
const collapsed = ref<boolean>(false)
const watchWidth = () => {
const Width = document.body.clientWidth
if (Width <= 950) {
collapsed.value = true
} else collapsed.value = false
}
onMounted(() => {
window.addEventListener('resize', watchWidth)
//挂载在 window 方便与在js中使用
window['$loading'] = useLoadingBar()
window['$loading'].finish()

10
src/plugins/naive.ts
View File

@ -2,6 +2,11 @@ import type { App } from 'vue';
import {
create,
NA,
NP,
NH1,
NH2,
NH3,
NH4,
NText,
NConfigProvider,
NMessageProvider,
@ -76,6 +81,11 @@ import {
const naive = create({
components: [
NA,
NP,
NH1,
NH2,
NH3,
NH4,
NText,
NMessageProvider,
NDialogProvider,

1
src/router/base.ts
View File

@ -40,7 +40,6 @@ export const HttpErrorPage: RouteRecordRaw[] = [
},
]
// 404 on a page
export const ErrorPageRoute: AppRouteRecordRaw = {
path: '/:path(.*)*',
name: 'ErrorPage',

40
src/router/modules/project.router.ts
View File

@ -1,14 +1,50 @@
import { RouteRecordRaw } from 'vue-router'
import { PageEnum } from '@/enums/pageEnum'
// 引入路径
const importPath = {
'PageEnum.BASE_HOME_NAME': () => import('@/views/project/index.vue'),
'PageEnum.BASE_HOME_ITEMS_NAME': () => import('@/views/project/items/index.vue'),
'PageEnum.BASE_HOME_TEMPLATE_NAME': () => import('@/views/project/mtTemplate/index.vue'),
'PageEnum.BASE_HOME_TEMPLATE_MARKET_NAME': () => import('@/views/project/templateMarket/index.vue')
}
const projectRoutes: RouteRecordRaw = {
path: PageEnum.BASE_HOME,
name: PageEnum.BASE_HOME_NAME,
component: () => import('@/views/project/index.vue'),
component: importPath['PageEnum.BASE_HOME_NAME'],
redirect: PageEnum.BASE_HOME_ITEMS,
meta: {
title: '项目',
isRoot: true
}
},
// todo 可采用循环动态插入
children: [
{
path: PageEnum.BASE_HOME_ITEMS,
name: PageEnum.BASE_HOME_ITEMS_NAME,
component: importPath['PageEnum.BASE_HOME_ITEMS_NAME'],
meta: {
title: PageEnum.BASE_HOME_ITEMS_NAME
}
},
{
path: PageEnum.BASE_HOME_TEMPLATE,
name: PageEnum.BASE_HOME_TEMPLATE_NAME,
component: importPath['PageEnum.BASE_HOME_TEMPLATE_NAME'],
meta: {
title: PageEnum.BASE_HOME_TEMPLATE_NAME
}
},
{
path: PageEnum.BASE_HOME_TEMPLATE_MARKET,
name: PageEnum.BASE_HOME_TEMPLATE_MARKET_NAME,
component: importPath['PageEnum.BASE_HOME_TEMPLATE_MARKET_NAME'],
meta: {
title: PageEnum.BASE_HOME_TEMPLATE_MARKET_NAME
}
}
]
}
export default projectRoutes

2
src/settings/designSetting.ts
View File

@ -47,7 +47,7 @@ export const theme = {
}
// 侧边栏宽度
export const asideWidth = '240'
export const asideWidth = '270'
// 侧边栏缩小后的宽度
export const asideCollapsedWidth = '60'

2
src/styles/common/_dark.scss
View File

@ -8,4 +8,6 @@ $dark: (
linear-gradient(120deg, $--color-dark-bg-1 0%, $--color-dark-bg-1 100%),
//毛玻璃
filter-color: $--filter-color-login-dark,
// 物料市场背景
items-top-bg: linear-gradient(180deg, $--color-dark-bg-1, rgba(23, 23, 26, 0))
);

3
src/styles/common/_light.scss
View File

@ -8,7 +8,4 @@ $light: (
linear-gradient(120deg, $--color-text-1 0%, $--color-text-1 100%),
//毛玻璃
filter-color: $--filter-color-login-light,
// 侧边栏
aside-bg: #fff,
aside-color: rgb(239, 239, 245)
);

2
src/styles/common/animation.scss
View File

@ -34,4 +34,4 @@
}
.list-complete-leave-active {
position: absolute;
}
}

5
src/views/project/index.vue
View File

@ -12,7 +12,9 @@
:native-scrollbar="false"
>
<n-layout-content>
<router-view></router-view>
<TransitionMain>
<router-view />
</TransitionMain>
</n-layout-content>
</n-layout>
</n-layout>
@ -23,6 +25,7 @@
<script setup lang="ts">
import { Sider } from './layout/components/Sider'
import { Header } from './layout/components/Header/index'
import { TransitionMain } from '@/layout/components/TransitionMain/index'
</script>
<style lang="scss" scoped>

3
src/views/project/items/List/index.ts Normal file
View File

@ -0,0 +1,3 @@
import List from './index.vue'
export { List }

105
src/views/project/items/List/index.vue Normal file
View File

@ -0,0 +1,105 @@
<template>
<div class="go-items-list">
<n-grid
:x-gap="20"
:y-gap="20"
cols="2 s:2 m:3 l:4 xl:4 xxl:4"
responsive="screen"
>
<n-grid-item v-for="item in list" :key="item.id">
<n-card hoverable size="small">
<div class="list-content">
<n-space>
<n-button size="small">
<template #icon>
<n-icon>
<EllipsisHorizontalCircleSharpIcon />
</n-icon>
</template>
</n-button>
</n-space>
<div class="list-content-top"></div>
<n-image
object-fit="cover"
width="100"
src="https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg"
:alt="item.title"
/>
</div>
<template #action>
<n-skeleton v-if="loading" round size="medium" />
<n-space v-else justify="space-between">
<n-text>
奔跑的模板
</n-text>
<!-- 工具 -->
<n-space>
<n-button size="small">
<template #icon>
<n-icon>
<EllipsisHorizontalCircleSharpIcon />
</n-icon>
</template>
</n-button>
<n-button size="small">
<template #icon>
<n-icon>
<CopyIcon />
</n-icon>
</template>
</n-button>
</n-space>
<!-- end -->
</n-space>
</template>
</n-card>
</n-grid-item>
</n-grid>
</div>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
import {
EllipsisHorizontalSharp as EllipsisHorizontalCircleSharpIcon,
CopyOutline as CopyIcon
} from '@vicons/ionicons5'
const loading = ref<boolean>(true)
setTimeout(() => {
loading.value = false
}, 200)
const list = reactive([
{
id: 1,
title: '物料1'
},
{
id: 2,
title: '物料1'
},
{
id: 3,
title: '物料1'
},
{
id: 4,
title: '物料1'
},
{
id: 5,
title: '物料1'
}
])
</script>
<style lang="scss" scoped>
$contentHeight: 250px;
@include go('items-list') {
.list-content {
position: relative;
height: $contentHeight;
}
}
</style>

15
src/views/project/items/index.vue Normal file
View File

@ -0,0 +1,15 @@
<template>
<div class="go-project-items">
<List />
</div>
</template>
<script setup lang="ts">
import { List } from './List'
</script>
<style lang="scss" scoped>
@include go(project-items) {
padding: 30px 20px;
}
</style>

44
src/views/project/layout/components/AsideFooter/index.vue
View File

@ -1,8 +1,24 @@
<template>
<div class="go-aside-footer">
<n-divider class="go-mt-0" />
<n-space justify="space-around" :wrap="false">
<n-button secondary @click="handleDoc">
<n-space justify="space-around">
<n-tooltip v-if="collapsed" placement="right" trigger="hover">
<template #trigger>
<n-button secondary @click="handleDoc">
<template #icon>
<n-icon size="18">
<HelpOutlineIcon />
</n-icon>
</template>
</n-button>
</template>
<n-text>
帮助中心
</n-text>
</n-tooltip>
<n-button v-else secondary @click="handleDoc">
<template #icon>
<n-icon size="18">
<HelpOutlineIcon />
@ -10,13 +26,29 @@
</template>
<n-text>帮助中心</n-text>
</n-button>
<n-button secondary @click="handleCode">
<n-tooltip v-if="collapsed" placement="right" trigger="hover">
<template #trigger>
<n-button secondary @click="handleDoc">
<template #icon>
<n-icon size="18">
<CodeSlashIcon />
</n-icon>
</template>
</n-button>
</template>
<n-text>
仓库地址
</n-text>
</n-tooltip>
<n-button v-else secondary @click="handleCode">
<template #icon>
<n-icon size="18">
<CodeSlashIcon />
</n-icon>
</template>
<n-text>仓库地址</n-text>
<n-text v-show="!collapsed">仓库地址</n-text>
</n-button>
</n-space>
</div>
@ -29,6 +61,10 @@ import {
CodeSlash as CodeSlashIcon
} from '@vicons/ionicons5'
const props = defineProps({
collapsed: Boolean
})
const handleDoc = () => {
openDoc()
}

25
src/views/project/layout/components/Create/index.vue
View File

@ -1,20 +1,27 @@
<template>
<n-button v-if="collapsed" ghost type="primary" size="small">
<template #icon>
<n-icon>
<DuplicateIcon />
</n-icon>
<n-tooltip v-if="collapsed" placement="right" trigger="hover">
<template #trigger>
<n-button ghost type="primary" size="small">
<template #icon>
<n-icon>
<DuplicateIcon />
</n-icon>
</template>
</n-button>
</template>
</n-button>
<n-text>
新建
</n-text>
</n-tooltip>
<n-button v-else ghost type="primary" size="large">
<template #icon>
<n-icon>
<DuplicateIcon />
</n-icon>
</template>
<span>
新建项目
</span>
<n-text>
新建
</n-text>
</n-button>
</template>
<script setup lang="ts">

26
src/views/project/layout/components/Sider/index.vue
View File

@ -2,8 +2,8 @@
<n-layout-sider
class="go-project-layout-sider"
bordered
inverted
collapse-mode="width"
show-trigger="bar"
:collapsed="collapsed"
:native-scrollbar="false"
:collapsed-width="asideCollapsedWidth"
@ -21,32 +21,46 @@
:options="menuOptions"
:collapsed-width="asideCollapsedWidth"
:collapsed-icon-size="22"
:default-expanded-keys="defaultExpandedKeys"
@update:value="handleUpdateValue"
/>
</aside>
<!-- 底部提示 -->
<div class="sider-bottom">
<AsideFooter />
<AsideFooter :collapsed="collapsed" />
</div>
</div>
</n-layout-sider>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
import { ref, computed, onMounted } from 'vue'
import { Create } from '../Create/index'
import { AsideFooter } from '../AsideFooter/index'
import { asideWidth, asideCollapsedWidth } from '@/settings/designSetting'
import { menuOptionsInit } from './menu'
import { menuOptionsInit, expandedKeys } from './menu'
import { useRoute } from 'vue-router'
const collapsed = ref(false)
const collapsed = ref<boolean>(false)
const route = useRoute()
const routeRame = computed(() => route.name)
const menuValue = ref(routeRame)
const menuOptions = menuOptionsInit()
const defaultExpandedKeys = expandedKeys()
const watchWidth = () => {
const Width = document.body.clientWidth
if (Width <= 950) {
collapsed.value = true
} else collapsed.value = false
}
onMounted(() => {
window.addEventListener('resize', watchWidth)
})
</script>
<style lang="scss" scoped>
@ -71,8 +85,6 @@ $siderHeight: 100vh;
}
&-layout-sider {
height: $siderHeight;
@include filter-bg-color('aside-bg');
@include filter-border-color('aside-color');
}
.content-top {
top: $--header-height;

69
src/views/project/layout/components/Sider/menu.ts
View File

@ -3,12 +3,19 @@ import { renderIcon } from '@/utils'
import { RouterLink } from 'vue-router'
import { PageEnum } from '@/enums/pageEnum'
import { MenuOption, MenuGroupOption } from 'naive-ui'
import { FolderOpen as FolderOpenIcon, LogoAppleAppstore as LogoAppleAppstoreIcon, } from '@vicons/ionicons5'
import {
Grid as GridIcon,
LogoAppleAppstore as LogoAppleAppstoreIcon,
TvOutline as DesktopIcon,
LaptopOutline as LaptopOutlineIcon,
} from '@vicons/ionicons5'
export const renderMenuLabel = (option: MenuOption | MenuGroupOption) => {
return option.label
}
export const expandedKeys = () => ['all-project']
export const menuOptionsInit = () => {
return reactive([
{
@ -16,28 +23,50 @@ export const menuOptionsInit = () => {
type: 'divider'
},
{
type: 'group',
label: '我的',
key: 'people',
label: '项目',
key: 'all-project',
icon: renderIcon(GridIcon),
children: [
{
label: () =>
h(
RouterLink,
{
to: {
name: PageEnum.BASE_HOME_NAME
}
},
{ default: () => '全部项目' }
),
key: PageEnum.BASE_HOME_NAME,
icon: renderIcon(FolderOpenIcon)
type: 'group',
label: '我的',
key: 'my-project',
children: [
{
label: () =>
h(
RouterLink,
{
to: {
name: PageEnum.BASE_HOME_ITEMS_NAME
}
},
{ default: () => '全部项目' }
),
key: PageEnum.BASE_HOME_ITEMS_NAME,
icon: renderIcon(DesktopIcon)
},
{
label: () =>
h(
RouterLink,
{
to: {
name: PageEnum.BASE_HOME_TEMPLATE_NAME
}
},
{ default: () => '我的物料' }
),
key: PageEnum.BASE_HOME_TEMPLATE_NAME,
icon: renderIcon(LaptopOutlineIcon)
}
]
}
]
},
{
key: 'divider-1',
key: 'divider-2',
type: 'divider'
},
{
@ -46,12 +75,12 @@ export const menuOptionsInit = () => {
RouterLink,
{
to: {
name: PageEnum.BASE_HOME_NAME
name: PageEnum.BASE_HOME_TEMPLATE_MARKET_NAME
}
},
{ default: () => '模板市场' }
{ default: () => '物料市场' }
),
key: 'store',
key: PageEnum.BASE_HOME_TEMPLATE_MARKET_NAME,
icon: renderIcon(LogoAppleAppstoreIcon)
}
])

14
src/views/project/mtTemplate/index.vue Normal file
View File

@ -0,0 +1,14 @@
<template>
<div class="go-project-my-template">
<h1>
我的模板
</h1>
</div>
</template>
<script setup lang="ts"></script>
<style lang="scss" scoped>
@include go('project-my-template') {
}
</style>

3
src/views/project/templateMarket/components/TopCarousel/index.ts Normal file
View File

@ -0,0 +1,3 @@
import TopCarousel from './index.vue'
export { TopCarousel }

12
src/views/project/templateMarket/components/TopCarousel/index.vue Normal file
View File

@ -0,0 +1,12 @@
<template>
<div class="go-template-market-top-carousel">
<h1>轮播图</h1>
</div>
</template>
<script setup lang="ts"></script>
<style lang="scss" scoped>
@include go('project-template-market-top-carousel') {
}
</style>

62
src/views/project/templateMarket/index.vue Normal file
View File

@ -0,0 +1,62 @@
<template>
<div class="go-project-template-market">
<header class="top-box">
<div class="top-box-bg"></div>
<div class="top-content">
<n-carousel class="top-content-carousel" show-arrow>
<n-card title="模板1" hoverable>
<img
class="carousel-img"
src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel1.jpeg"
/>
</n-card>
<n-card title="模板2" hoverable>
<img
class="carousel-img"
src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel2.jpeg"
/>
</n-card>
<n-card title="模板2" hoverable>
<img
class="carousel-img"
src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel3.jpeg"
/>
</n-card>
<n-card title="模板2" hoverable>
<img
class="carousel-img"
src="https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel4.jpeg"
/>
</n-card>
</n-carousel>
</div>
<n-divider />
</header>
</div>
</template>
<script setup lang="ts"></script>
<style lang="scss" scoped>
@include go('project-template-market') {
.top-box {
background: url('@/assets/images/project/project-top-bg.png');
background-position: top -185px left -1560px;
&-bg {
position: absolute;
width: 100%;
height: 100%;
@include background-image('items-top-bg');
}
.top-content {
display: flex;
justify-content: center;
position: relative;
padding-top: 30px;
&-carousel {
width: 70%;
}
}
}
}
</style>