rubick/feature/src/App.vue
2023-03-26 19:37:25 +08:00

97 lines
2.1 KiB
Vue

<template>
<div class="main-container">
<div class="slider-bar">
<a-menu
v-model:selectedKeys="active"
mode="horizontal"
@select="({ key }) => changeMenu(key)"
>
<a-menu-item key="market">
<template #icon>
<AppstoreOutlined />
</template>
插件市场
</a-menu-item>
<a-menu-item key="installed">
<template #icon>
<HeartOutlined />
</template>
已安装
</a-menu-item>
<a-menu-item key="settings">
<template #icon>
<SettingOutlined />
</template>
设置
</a-menu-item>
<a-menu-item key="account">
<template #icon>
<UserOutlined />
</template>
账户
</a-menu-item>
<a-menu-item key="dev">
<template #icon>
<BugOutlined />
</template>
开发者
</a-menu-item>
</a-menu>
</div>
<router-view />
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
import {
HeartOutlined,
UserOutlined,
AppstoreOutlined,
SettingOutlined,
BugOutlined
} from "@ant-design/icons-vue";
import { useStore } from "vuex";
const router = useRouter();
const active = ref(["market"]);
const changeMenu = (key: any) => {
router.push(key);
};
window.rubick.onPluginEnter(({ code }: { code: string }) => {
changeMenu(code);
active.value = [code];
});
const store = useStore();
const init = () => store.dispatch("init");
init();
</script>
<style lang="less" scoped>
* {
margin: 0;
padding: 0;
}
.main-container {
display: flex;
align-items: flex-start;
background: var(--color-body-bg);
flex-direction: column;
.slider-bar {
width: 100%;
.ant-menu {
background: var(--color-body-bg);
border-color: var(--color-border-light);
:deep(.ant-menu-item) {
&:not(.ant-menu-item-selected) {
color: var(--color-text-primary);
}
}
}
}
}
</style>