Fun/TeyvatGuide
1
0
Fork 0
mirror of https://github.com/BTMuli/TeyvatGuide.git synced 2025-12-13 09:28:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(ui): ui 替换，从 antdv 换成 vuetify

Browse Source
This commit is contained in:
BTMuli
2023-03-06 16:17:17 +08:00
parent b76b11f099
commit 5e5c84f596
10 changed files with 385 additions and 1708 deletions
Download Patch File Download Diff File Expand all files Collapse all files

77
src/components/t-sidebar.vue
View File

@@ -1,51 +1,62 @@
<template>
<a-layout-sider v-model:collapsed="collpased" collapsible :theme="theme">
<a-menu
v-model:selected-keys="selectedKeys"
:theme="theme"
mode="inline"
@select="selectMenu"
>
<a-menu-item key="home">
<HomeOutlined />
<span>首页</span>
</a-menu-item>
<a-menu-item key="news">
<ScheduleOutlined />
<span>咨讯</span>
</a-menu-item>
<a-menu-item key="config">
<SettingOutlined />
<span>设置</span>
</a-menu-item>
</a-menu>
</a-layout-sider>
<v-navigation-drawer permanent :rail="rail">
<v-list>
<!-- 第一个图标，负责收缩侧边栏 -->
<v-list-item @click="collapse">
<v-list-item-action>
<v-icon>mdi-menu</v-icon>
</v-list-item-action>
</v-list-item>
<!-- 菜单项 -->
<v-list-subheader>
<v-icon>mdi-bug-outline</v-icon>
<span v-show="!rail"> 测试功能 </span>
</v-list-subheader>
<v-list-item @click="toPage('/news')">
<template v-slot:prepend>
<v-icon>mdi-calendar-text-outline</v-icon>
</template>
<v-list-item-title v-show="!rail"> 咨讯 </v-list-item-title>
</v-list-item>
<v-list-subheader>
<v-icon>mdi-cog-outline</v-icon>
<span v-show="!rail"> 开发功能 </span>
</v-list-subheader>
<v-list-item @click="toPage('/config')">
<template v-slot:prepend>
<v-icon>mdi-cog-outline</v-icon>
</template>
<v-list-item-title v-show="!rail"> 设置 </v-list-item-title>
</v-list-item>
<v-list-subheader>
<v-icon>mdi-rocket-outline</v-icon>
<span v-show="!rail"> 预期功能 </span>
</v-list-subheader>
</v-list>
</v-navigation-drawer>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import { HomeOutlined, ScheduleOutlined, SettingOutlined } from "@ant-design/icons-vue";
import { useRouter } from "vue-router";
export default defineComponent({
name: "TSidebar",
components: {
HomeOutlined,
ScheduleOutlined,
SettingOutlined,
},
data() {
return {
rail: true,
router: useRouter(),
collpased: false,
selectedKeys: ["home"],
theme: "dark",
};
},
methods: {
selectMenu({ key }: { key: string }) {
this.selectedKeys = [key];
this.router.push(key);
collapse() {
this.rail = !this.rail;
},
toPage(path: string) {
if (this.router.currentRoute.path !== path) {
this.router.push(path);
}
},
},
});