2024-08-26 14:07:57 +08:00
|
|
|
<template>
|
2024-08-31 19:37:01 +08:00
|
|
|
<div class="toolbox-view flex-col">
|
|
|
|
<div class="app-view-header">
|
|
|
|
<span>{{ TOOLBOX_MODULE_TITLE }}</span>
|
|
|
|
</div>
|
|
|
|
<div class="app-view-content is-transparent">
|
2024-09-06 13:32:25 +08:00
|
|
|
<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>
|
2024-08-31 19:37:01 +08:00
|
|
|
</div>
|
|
|
|
</div>
|
2024-08-26 14:07:57 +08:00
|
|
|
</template>
|
|
|
|
|
|
|
|
<script setup>
|
2024-09-06 13:32:25 +08:00
|
|
|
import {
|
|
|
|
NCollapse, NCollapseItem, NEllipsis,
|
|
|
|
} from 'naive-ui';
|
|
|
|
|
|
|
|
import {
|
|
|
|
toolList,
|
|
|
|
} from '@/assets/js/toolbox-data';
|
|
|
|
|
2024-08-31 19:37:01 +08:00
|
|
|
import {
|
|
|
|
TOOLBOX_MODULE_TITLE,
|
|
|
|
} from '@/config/modules';
|
2024-08-26 14:07:57 +08:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="less" scoped>
|
2024-09-06 13:32:25 +08:00
|
|
|
.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;
|
|
|
|
}
|
|
|
|
}
|
2024-08-26 14:07:57 +08:00
|
|
|
</style>
|