2021-12-02 17:55:45 +08:00

126 lines
2.7 KiB
Vue

<template>
<div class="market">
<div class="left-menu">
<div class="search-container">
<a-input-search
v-model:value="searchValue"
placeholder="搜索插件"
style="width: 100%"
@search="onSearch"
/>
</div>
<a-menu v-model:selectedKeys="current" mode="inline">
<a-menu-item key="finder">
<template #icon>
<StarOutlined />
</template>
探索
</a-menu-item>
<a-menu-item key="worker">
<template #icon>
<SendOutlined style="transform: rotate(-45deg)" />
</template>
效率
</a-menu-item>
<a-menu-item key="tools">
<template #icon>
<SearchOutlined />
</template>
搜索工具
</a-menu-item>
<a-menu-item key="image">
<template #icon>
<FileImageOutlined />
</template>
图像
</a-menu-item>
<a-menu-item key="dev">
<template #icon>
<CodeOutlined />
</template>
开发
</a-menu-item>
<a-menu-item key="system">
<template #icon>
<DatabaseOutlined />
</template>
系统
</a-menu-item>
</a-menu>
</div>
<div class="container">
<component :totalPlugins="totalPlugins" :is="Components[current[0]]" />
</div>
</div>
</template>
<script lang="ts" setup>
import {
StarOutlined,
SendOutlined,
SearchOutlined,
FileImageOutlined,
DatabaseOutlined,
CodeOutlined,
} from "@ant-design/icons-vue";
import { reactive, toRefs, computed } from "vue";
import { useStore } from "vuex";
import Finder from "./components/finder.vue";
const Components = {
finder: Finder,
};
const state = reactive({
searchValue: "",
current: ["finder"],
});
const store = useStore();
const init = () => store.dispatch("init");
init();
const totalPlugins = computed(() => store.state.totalPlugins);
const { searchValue, current } = toRefs(state);
</script>
<style lang="less">
.market {
display: flex;
box-sizing: border-box;
align-items: flex-start;
width: 100%;
overflow: hidden;
background: #F3EFEF;
.left-menu {
width: 200px;
height: 100vh;
.search-container {
padding: 10px;
}
.ant-input-affix-wrapper {
border: none;
}
.ant-menu {
background: #F3EFEF;
.ant-menu-item-selected {
background-color: #E2E2E2;
color: #141414;
&:after {
display: none;
}
}
}
}
.container {
background: #fff;
width: calc(~'100% - 200px');
height: 100vh;
box-sizing: border-box;
padding: 10px 20px;
position: relative;
}
}
</style>