mirror of
https://github.com/rubickCenter/rubick
synced 2025-07-25 02:09:32 +08:00
97 lines
2.1 KiB
Vue
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>
|