feat(工具箱): 完善工具箱页面,添加返回按钮和工具版本信息
This commit is contained in:
@@ -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%;
|
||||||
|
Reference in New Issue
Block a user