feat(工具箱): 完善工具箱页面,添加返回按钮和工具版本信息
This commit is contained in:
@@ -1,7 +1,20 @@
|
||||
<template>
|
||||
<div class="toolbox-view flex-col">
|
||||
<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>
|
||||
|
||||
</div>
|
||||
<div class="app-view-content is-transparent">
|
||||
|
||||
@@ -29,14 +42,23 @@
|
||||
@click="handleOpenTool(toolItem)"
|
||||
>
|
||||
<div class="item-header">
|
||||
<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 class="item-body">
|
||||
<div class="item-title">{{ toolItem.title }}</div>
|
||||
<n-ellipsis
|
||||
class="item-desc"
|
||||
:line-clamp="2"
|
||||
:tooltip="true"
|
||||
:tooltip="{ placement: 'bottom-start' }"
|
||||
>{{ toolItem.desc }}</n-ellipsis>
|
||||
</div>
|
||||
</div>
|
||||
@@ -60,7 +82,7 @@
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
NCollapse, NCollapseItem, NEllipsis,
|
||||
NButton, NCollapse, NCollapseItem, NEllipsis, NTooltip,
|
||||
} from 'naive-ui';
|
||||
|
||||
import {
|
||||
@@ -91,18 +113,29 @@ const routeTitle = computed(() => {
|
||||
return route.meta.title;
|
||||
});
|
||||
|
||||
/** 关闭工具 */
|
||||
function handleCloseTool() {
|
||||
return router.push({
|
||||
name: 'ToolboxView',
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 打开工具
|
||||
* @param {ToolboxItem} data
|
||||
*/
|
||||
function handleOpenTool(data) {
|
||||
router.push({
|
||||
return router.push({
|
||||
name: `Toolbox/${data.component}`,
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.back-button {
|
||||
margin-right: 0.5em;
|
||||
font-size: 24px;
|
||||
}
|
||||
.tool-list {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
Reference in New Issue
Block a user