Skip to content

Commit

Permalink
Add the Menu component & Layout the Settings app
Browse files Browse the repository at this point in the history
  • Loading branch information
@Barry-Flynn
Barry-Flynn committed Aug 25, 2024
1 parent 5e1dada commit b109761
Show file tree
Hide file tree
Showing 9 changed files with 389 additions and 197 deletions.
91 changes: 91 additions & 0 deletions src/components/Menu/index.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
<template>
<div class="menu">
<div
class="menu-item"
:class="{ active: item.active }"
v-for="(item, index) in menuList"
:key="index"
@click="$router.push(item.path)"
>
<div class="menu-item-icon">
<Button :icon="item.icon" />
</div>
<div class="menu-item-name ellipsis">{{ item.name }}</div>
</div>
</div>
</template>

<script setup lang="ts">
defineOptions({
name: 'TheMenu'
})
import Button from '@/components/Button/index.vue'
// 接收参数
defineProps<{
menuList: {
icon: string
name: string
path: string
active: boolean
}[]
}>()
</script>

<style scoped lang="scss">
.menu {
// border: 1px solid red;
text-align: left;
padding: 0 8px;
// 禁止鼠标选中
user-select: none;
.menu-item {
height: 36px;
transition: background-color 0.2s;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
border-radius: 10px;
// 消除空白节点，避免 inline-block 间距
font-size: 0;
&:hover {
background-color: rgba(255, 255, 255, 0.1);
}
&:not(:first-child) {
margin-top: 4px;
}
&:active {
background-color: rgba(255, 255, 255, 0.2);
}
&.active {
background-color: rgba(255, 255, 255, 0.2);
}
.menu-item-icon {
margin: 7px 7px;
button,
img {
width: 22px;
height: 22px;
border: none;
border-radius: 4px;
}
.playlist-cover {
background-color: rgba(255, 255, 255, 0.2);
}
}
.menu-item-name {
font-size: 11px;
color: rgba(255, 255, 255, 0.9);
}
}
}
</style>
24 changes: 13 additions & 11 deletions src/components/Window/index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,19 @@
<template>
<div class="window glass-material">
<!-- 默认插槽 -->
<slot></slot>
</div>
<div>
<div class="window glass-material">
<!-- 默认插槽 -->
<slot></slot>
</div>

<div class="above-window">
<slot name="navigation"></slot>
</div>
<div class="above-window">
<slot name="navigation"></slot>
</div>

<div class="below-window">
<!-- 装饰插槽 -->
<slot name="ornaments"></slot>
<div class="window-controls"></div>
<div class="below-window">
<!-- 装饰插槽 -->
<slot name="ornaments"></slot>
<div class="window-controls"></div>
</div>
</div>
</template>

Expand Down
56 changes: 29 additions & 27 deletions src/views/apps/index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,40 +1,42 @@
<template>
<div class="window canvas">
<div class="apps-row">
<!-- 循环渲染第1-4个app-item -->
<div class="app-item" v-for="(app, index) in appList.slice(0, 4)" :key="index">
<div class="app-icon glass-material" @click="goTo(app.path)">
<img :src="getAppIconUrl(app.icon)" :alt="app.name" />
<div>
<div class="window canvas">
<div class="apps-row">
<!-- 循环渲染第1-4个app-item -->
<div class="app-item" v-for="(app, index) in appList.slice(0, 4)" :key="index">
<div class="app-icon glass-material" @click="goTo(app.path)">
<img :src="getAppIconUrl(app.icon)" :alt="app.name" />
</div>
<div class="app-name ellipsis">{{ app.name }}</div>
</div>
<div class="app-name ellipsis">{{ app.name }}</div>
</div>
</div>
<div class="apps-row">
<!-- 循环渲染第5-9个app-item -->
<div class="app-item" v-for="(app, index) in appList.slice(4, 9)" :key="index">
<div class="app-icon glass-material" @click="goTo(app.path)">
<img :src="getAppIconUrl(app.icon)" alt="app.name" />
<div class="apps-row">
<!-- 循环渲染第5-9个app-item -->
<div class="app-item" v-for="(app, index) in appList.slice(4, 9)" :key="index">
<div class="app-icon glass-material" @click="goTo(app.path)">
<img :src="getAppIconUrl(app.icon)" alt="app.name" />
</div>
<div class="app-name ellipsis">{{ app.name }}</div>
</div>
<div class="app-name ellipsis">{{ app.name }}</div>
</div>
</div>
<div class="apps-row">
<!-- 循环渲染第10-13个app-item -->
<div class="app-item" v-for="(app, index) in appList.slice(9, 13)" :key="index">
<div class="app-icon glass-material" @click="goTo(app.path)">
<img :src="getAppIconUrl(app.icon)" alt="app.name" />
<div class="apps-row">
<!-- 循环渲染第10-13个app-item -->
<div class="app-item" v-for="(app, index) in appList.slice(9, 13)" :key="index">
<div class="app-icon glass-material" @click="goTo(app.path)">
<img :src="getAppIconUrl(app.icon)" alt="app.name" />
</div>
<div class="app-name ellipsis">{{ app.name }}</div>
</div>
<div class="app-name ellipsis">{{ app.name }}</div>
</div>
</div>

<!-- 分页器 -->
<div class="canvas-bottom">
<PaginationDots />
<!-- 分页器 -->
<div class="canvas-bottom">
<PaginationDots />
</div>
</div>
</div>

<TabBar :tabs="tabs" />
<TabBar :tabs="tabs" />
</div>
</template>

<script setup lang="ts">
Expand Down
18 changes: 8 additions & 10 deletions src/views/hello/index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,12 @@
<template>
<div class="mask-for-animation" ref="containerRef"></div>

<div class="mask-for-waiting" @click="animationFunction" v-show="waiting">
<span class="waiting-icon mgc_mouse_line animation-scale"></span>
<div class="waiting-tip">Click anywhere to enter</div>
<div class="waiting-tip">点击任意位置进入</div>
<div>
<div class="mask-for-animation" ref="containerRef"></div>

<div class="mask-for-waiting" @click="animationFunction" v-show="waiting">
<span class="waiting-icon mgc_mouse_line animation-scale"></span>
<div class="waiting-tip">Click anywhere to enter</div>
<div class="waiting-tip">点击任意位置进入</div>
</div>
</div>
</template>

Expand All @@ -18,10 +20,6 @@ import { useRouter } from 'vue-router'
// Lottie动画
import lottie from 'lottie-web'
// import animationData from '@/assets/lottie/welcome-green.json'
// import animationData from '@/assets/lottie/welcome.json'
// import animationData from '@/assets/lottie/hello-black.json'
// import animationData from '@/assets/lottie/hello-white.json'
import animationData from '@/assets/lottie/hello.json'
// 路由
Expand Down
Loading

0 comments on commit b109761

Please sign in to comment.