feat(工具箱): 完善界面,显示工具箱列表
This commit is contained in:
@@ -4,15 +4,100 @@
|
|||||||
<span>{{ TOOLBOX_MODULE_TITLE }}</span>
|
<span>{{ TOOLBOX_MODULE_TITLE }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="app-view-content is-transparent">
|
<div class="app-view-content is-transparent">
|
||||||
|
<div class="tool-list">
|
||||||
|
<n-collapse
|
||||||
|
:default-expanded-names="toolList.map(item => item.id)"
|
||||||
|
>
|
||||||
|
|
||||||
|
<!-- 分类项 -->
|
||||||
|
<n-collapse-item
|
||||||
|
v-for="categoryItem in toolList"
|
||||||
|
:key="categoryItem.id"
|
||||||
|
:name="categoryItem.id"
|
||||||
|
:title="categoryItem.title"
|
||||||
|
>
|
||||||
|
|
||||||
|
<!-- 工具项 -->
|
||||||
|
<div
|
||||||
|
v-for="toolItem in categoryItem.items"
|
||||||
|
:key="toolItem.id"
|
||||||
|
class="tool-item shadow-1"
|
||||||
|
>
|
||||||
|
<div class="item-header">
|
||||||
|
<span :class="['item-icon', toolItem.iconClass || 'mdi mdi-package-variant-closed']"></span>
|
||||||
|
</div>
|
||||||
|
<div class="item-body">
|
||||||
|
<div class="item-title">{{ toolItem.title }}</div>
|
||||||
|
<n-ellipsis
|
||||||
|
class="item-desc"
|
||||||
|
:line-clamp="2"
|
||||||
|
:tooltip="true"
|
||||||
|
>{{ toolItem.desc }}</n-ellipsis>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</n-collapse-item>
|
||||||
|
|
||||||
|
</n-collapse>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
|
import {
|
||||||
|
NCollapse, NCollapseItem, NEllipsis,
|
||||||
|
} from 'naive-ui';
|
||||||
|
|
||||||
|
import {
|
||||||
|
toolList,
|
||||||
|
} from '@/assets/js/toolbox-data';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
TOOLBOX_MODULE_TITLE,
|
TOOLBOX_MODULE_TITLE,
|
||||||
} from '@/config/modules';
|
} from '@/config/modules';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
|
.tool-list {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tool-item {
|
||||||
|
display: inline-block;
|
||||||
|
margin: 16px;
|
||||||
|
padding: 16px;
|
||||||
|
vertical-align: middle;
|
||||||
|
width: 256px;
|
||||||
|
height: 132px;
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
outline: 2px solid transparent;
|
||||||
|
background-color: #FFF;
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1;
|
||||||
|
transition: outline 0.25s;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
outline-color: var(--color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-icon {
|
||||||
|
font-size: 32px;
|
||||||
|
opacity: 0.75;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-title {
|
||||||
|
margin: 8px 0;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.item-desc) {
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.2;
|
||||||
|
opacity: 0.75;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
Reference in New Issue
Block a user