feat(工具箱): 完善工具箱页面,添加返回按钮和工具版本信息

This commit is contained in:
2024-09-08 16:27:42 +08:00
parent a31ad98a9e
commit b852159e39

View File

@@ -1,7 +1,20 @@
<template> <template>
<div class="toolbox-view flex-col"> <div class="toolbox-view flex-col">
<div class="app-view-header"> <div class="app-view-header">
<!-- 返回上一级 -->
<n-button
v-show="isToolDetail"
class="back-button"
:text="true"
@click="handleCloseTool"
>
<span class="mdi mdi-arrow-left"></span>
</n-button>
<!-- 标题 -->
<span>{{ routeTitle }}</span> <span>{{ routeTitle }}</span>
</div> </div>
<div class="app-view-content is-transparent"> <div class="app-view-content is-transparent">
@@ -29,14 +42,23 @@
@click="handleOpenTool(toolItem)" @click="handleOpenTool(toolItem)"
> >
<div class="item-header"> <div class="item-header">
<span :class="['item-icon', toolItem.iconClass || 'mdi mdi-package-variant-closed']"></span> <n-tooltip placement="top-start" trigger="hover">
<template #trigger>
<span :class="['item-icon', toolItem.iconClass || 'mdi mdi-package-variant-closed']"></span>
</template>
<div>
<div>创建:{{ toolItem.createdAt }}</div>
<div>更新:{{ toolItem.updatedAt }}</div>
<div>版本:{{ toolItem.version }}</div>
</div>
</n-tooltip>
</div> </div>
<div class="item-body"> <div class="item-body">
<div class="item-title">{{ toolItem.title }}</div> <div class="item-title">{{ toolItem.title }}</div>
<n-ellipsis <n-ellipsis
class="item-desc" class="item-desc"
:line-clamp="2" :line-clamp="2"
:tooltip="true" :tooltip="{ placement: 'bottom-start' }"
>{{ toolItem.desc }}</n-ellipsis> >{{ toolItem.desc }}</n-ellipsis>
</div> </div>
</div> </div>
@@ -60,7 +82,7 @@
<script setup> <script setup>
import { import {
NCollapse, NCollapseItem, NEllipsis, NButton, NCollapse, NCollapseItem, NEllipsis, NTooltip,
} from 'naive-ui'; } from 'naive-ui';
import { import {
@@ -91,18 +113,29 @@ const routeTitle = computed(() => {
return route.meta.title; return route.meta.title;
}); });
/** 关闭工具 */
function handleCloseTool() {
return router.push({
name: 'ToolboxView',
});
}
/** /**
* @description 打开工具 * @description 打开工具
* @param {ToolboxItem} data * @param {ToolboxItem} data
*/ */
function handleOpenTool(data) { function handleOpenTool(data) {
router.push({ return router.push({
name: `Toolbox/${data.component}`, name: `Toolbox/${data.component}`,
}); });
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.back-button {
margin-right: 0.5em;
font-size: 24px;
}
.tool-list { .tool-list {
width: 100%; width: 100%;
height: 100%; height: 100%;