Files
frost-navigation/src/views/Tools.vue

250 lines
6.5 KiB
Vue
Raw Normal View History

<template>
<el-container class="tools">
2021-04-06 20:51:00 +08:00
<div class="wrapper">
<!-- 工具分类 -->
<div v-for="(categoryItem, categoryKey) in toolList" :key="categoryKey" class="category">
<!-- 标题 -->
<div class="title">{{ categoryItem.title }}</div>
<!-- 工具项 -->
<div v-for="(toolItem, toolKey) in categoryItem.list" :key="toolKey"
:class="['tool-item', 'shadow-2', { disabled: !toolItem.enabled }]"
@click="detailOpen(categoryKey, toolKey)"
>
<div class="item-title limit-line-1">{{ toolItem.title }}</div>
<div class="item-content limit-line-3">{{ toolItem.desc || '无简介' }}</div>
</div>
2021-04-06 20:51:00 +08:00
</div>
</div>
<!-- 弹出 -->
2021-05-04 00:33:16 +08:00
<el-drawer custom-class="drawer-full" direction="btt" size="100%"
:append-to-body="true" :destroy-on-close="true" :title="detail.title"
:visible.sync="detail.show" :before-close="detailClose"
2021-04-06 20:51:00 +08:00
>
<!-- 标题区域 -->
<div slot="title" class="header">
<span class="title">{{ detail.title }}</span>
<el-tooltip content="在新标签页中打开本工具" placement="left">
<i class="btn el-icon-copy-document" @click="detailOpenNewTab()"></i>
</el-tooltip>
</div>
<!-- 内容区域 -->
2021-05-04 00:33:16 +08:00
<router-view></router-view>
2021-04-06 20:51:00 +08:00
</el-drawer>
</el-container>
</template>
<script>
import navTools from '@/assets/js/navTools.js';
export default {
name: 'Tools',
2021-05-23 23:35:58 +08:00
beforeRouteEnter(to, from, next) {
next(vm => {
var route = vm.$route;
// 判断进入的路由
if (route.name == 'ToolsDetail') {
// 进入:工具内容页面
vm.detailOpen(route.params.category, route.params.name);
} else {
// 进入:工具列表页面
vm.utils.changeTitle('小工具');
}
});
},
data() {
return {
2021-04-06 20:51:00 +08:00
utils: this.$root.utils,
toolList: navTools,
2021-04-06 20:51:00 +08:00
detail: {
show: false,
title: ''
}
};
},
2021-04-06 20:51:00 +08:00
methods: {
/**
* 关闭工具
*/
detailClose(done) {
this.$confirm('是否关闭?').then(() => {
// 关闭 drawer
done();
// 路由跳转
this.$router.push({
name: 'Tools'
});
// 更新页面标题
this.utils.changeTitle('小工具');
}).catch(() => { });
},
/**
* 打开工具
*
* @param {string} toolCatrgory 工具分类
* @param {string} toolName 工具名称
*/
detailOpen(toolCatrgory, toolName) {
var vm = this;
2021-04-06 20:51:00 +08:00
// 当前工具信息
var info = {};
// 错误提示
var errMsg = `无法打开该工具(分类:${toolCatrgory} 名称:${toolName}`;
try {
info = vm.toolList[toolCatrgory]['list'][toolName];
if (info === undefined) {
throw new Error(errMsg);
}
} catch (err) {
console.warn('[打开工具]', err);
vm.$message({
message: errMsg,
type: 'warning'
});
return;
2021-04-06 20:51:00 +08:00
}
// 禁用
if (!info.enabled) {
vm.$message({
message: '该工具未启用',
type: 'warning'
});
2021-04-06 20:51:00 +08:00
return;
}
// 更新页面标题
vm.utils.changeTitle(info.title);
2021-04-06 20:51:00 +08:00
// 更新 drawer 标题
vm.detail.title = `${info.title} [${info.version}_${info.update}]`;
2021-04-06 20:51:00 +08:00
// 路由跳转
2021-05-05 19:22:08 +08:00
// 注:当前路由相同时也进行跳转,以更新 query
vm.$router.push({
2021-04-06 20:51:00 +08:00
name: 'ToolsDetail',
params: {
category: toolCatrgory,
name: toolName
2021-04-06 20:51:00 +08:00
}
}).catch((err) => {
console.log('[路由跳转]', err.name);
2021-04-06 20:51:00 +08:00
});
// 显示 drawer
vm.detail.show = true;
2021-04-06 20:51:00 +08:00
},
/**
* 打开工具新标签页
*/
detailOpenNewTab() {
var url = window.location.href;
window.open(url, '_blank');
2021-04-06 20:51:00 +08:00
}
2021-04-06 20:51:00 +08:00
},
}
</script>
<style lang="less" scoped>
2021-04-06 20:51:00 +08:00
.tools {
display: flex;
flex-direction: column;
align-items: center;
padding: 2rem;
background-color: @colorWhite;
overflow-y: auto;
2021-04-06 20:51:00 +08:00
.wrapper {
width: 100%;
}
.category {
2021-04-06 20:51:00 +08:00
display: flex;
align-items: top;
flex-wrap: wrap;
justify-content: flex-start;
position: relative;
padding-top: 3rem;
2021-04-06 20:51:00 +08:00
width: 100%;
.title {
position: absolute;
top: 1rem;
left: 0;
2021-04-06 20:51:00 +08:00
font-weight: bold;
2021-06-14 00:58:13 +08:00
color: @textPrimary;
2021-04-06 20:51:00 +08:00
}
.tool-item {
flex-shrink: 0;
2021-06-05 11:08:28 +08:00
margin: 0.5rem;
padding: 1rem;
width: 16rem;
2021-06-05 11:08:28 +08:00
border-left: 0.2rem solid @colorPrimary;
border-radius: 0.25rem;
background-color: #FFF;
font-size: 0;
2021-06-14 00:58:13 +08:00
color: @textPrimary;
overflow: hidden;
transition: all @transitionTime;
cursor: pointer;
&:hover {
border-left-color: @colorSecondary;
2021-06-05 11:08:28 +08:00
transform: translateY(-0.2rem);
}
&.disabled {
border-left-color: @colorGrey;
}
.item-title {
2021-06-05 11:08:28 +08:00
margin-bottom: 0.5rem;
font-weight: bold;
2021-06-05 11:08:28 +08:00
font-size: 0.9rem;
}
.item-content {
height: calc(1.5em * 2);
line-height: 1.5em;
2021-06-05 11:08:28 +08:00
font-size: 0.75rem;
2021-06-14 00:58:13 +08:00
color: @textSecondary;
}
2021-04-06 20:51:00 +08:00
}
}
}
.drawer-full {
.header {
display: flex;
align-items: center;
justify-content: space-between;
.btn {
margin: 0 0.5rem;
font-size: inherit;
cursor: pointer;
}
}
}
</style>