frost-craft/frost-navigation
1
0
Fork 0
Code Releases Activity

优化

Browse Source
This commit is contained in:
Frost-ZX
2021-11-14 16:28:03 +08:00
parent 8617de5c38
commit 3a20686bfb
10 changed files with 301 additions and 286 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
postcss.config.js
View File

@@ -10,7 +10,7 @@ module.exports = {
mediaQuery: true, mediaQuery: true,
propList: ['*'], propList: ['*'],
rootValue: 16, rootValue: 16,
unitPrecision: 3, unitPrecision: 4,
} }
} }
}; };

5
src/assets/css/global.less
View File

@@ -142,6 +142,11 @@ body {
} }
.el-input { .el-input {
&.is-disabled .el-input__inner {
background-color: #FFF;
color: #888;
}
input::-webkit-inner-spin-button, input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button { input::-webkit-outer-spin-button {
-webkit-appearance: none; -webkit-appearance: none;

6
src/assets/js/utils.js
View File

@@ -10,11 +10,7 @@ class Utils {
* @param {string} [value] 新的标题 * @param {string} [value] 新的标题
*/ */
changeTitle(value) { changeTitle(value) {
if (value) { document.title = (value ? (value + ' - ') : '') + config.siteName;
document.title = config.siteName + ' - ' + value;
} else {
document.title = config.siteName;
}
} }
/** /**

2
src/components/tools/ConvertEncodeDecode.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="tool-elem"> <div class="tool-page">
<div class="ctrl"> <div class="ctrl">
<div class="title">控制</div> <div class="title">控制</div>

2
src/components/tools/GenRandomStr.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="tool-elem"> <div class="tool-page">
<div class="info"> <div class="info">
<div class="title">配置选项 &amp; 结果</div> <div class="title">配置选项 &amp; 结果</div>

2
src/components/tools/OtherNewWindow.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="tool-elem"> <div class="tool-page">
<div class="info"> <div class="info">
<div class="title">信息</div> <div class="title">信息</div>

4
src/components/tools/OtherRunJS.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="tool-elem"> <div class="tool-page">
<!-- 输入 --> <!-- 输入 -->
<div class="input"> <div class="input">
@@ -137,7 +137,7 @@ export default {
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.tool-elem { .tool-page {
@lineHeight: 1.25rem; @lineHeight: 1.25rem;
padding-bottom: 5rem; padding-bottom: 5rem;

2
src/components/tools/OtherWebSocket.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="tool-elem"> <div class="tool-page">
<!-- 操作 --> <!-- 操作 -->
<div class="ctrl"> <div class="ctrl">

421
src/views/Tools.vue
View File

@@ -1,251 +1,262 @@
<template> <template>
<el-container class="tools"> <el-container class="tools">
<div class="wrapper"> <div class="wrapper">
<!-- 工具分类 --> <!-- 工具分类 -->
<div v-for="(categoryItem, categoryKey) in toolList" :key="categoryKey" class="category"> <div
v-for="(categoryItem, categoryKey) in toolList"
:key="categoryKey"
class="category"
>
<!-- 标题 --> <!-- 标题 -->
<div class="title">{{ categoryItem.title }}</div> <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>
</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> </div>
<!-- 弹出 --> </div>
<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"
>
<!-- 标题区域 --> </div>
<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>
<!-- 内容区域 --> <!-- 弹出层 -->
<router-view></router-view> <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"
>
</el-drawer> <!-- 标题区域 -->
<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>
</el-container> <!-- 内容区域 -->
<router-view></router-view>
</el-drawer>
</el-container>
</template> </template>
<script> <script>
import navTools from '@/assets/js/navTools.js'; import navTools from '@/assets/js/navTools.js';
export default { export default {
name: 'Tools', name: 'Tools',
data() { data() {
return { return {
utils: this.$root.utils, utils: this.$root.utils,
toolList: navTools, toolList: navTools,
detail: { detail: {
show: false, show: false,
title: '' title: ''
}, },
} }
}, },
beforeRouteEnter(to, from, next) { beforeRouteEnter(to, from, next) {
next(vm => { next(vm => {
var route = vm.$route; const { name: rName, params: rParams } = vm.$route;
// 判断进入的路由 // 判断进入的路由
if (route.name === 'ToolsDetail') { if (rName === 'ToolsDetail') {
// 进入：工具内容页面 // [工具内容页面]
vm.detailOpen(route.params.category, route.params.name); vm.detailOpen(rParams.category, rParams.name);
} else { } else {
// 进入：工具列表页面 // [工具列表页面]
vm.utils.changeTitle('小工具'); vm.utils.changeTitle('小工具');
} }
});
},
methods: {
/**
* 关闭工具
*/
detailClose(done) {
this.$confirm('是否关闭？').then(() => {
// 关闭 drawer
done();
// 返回工具页面
this.$router.push({
name: 'Tools'
}).then(() => {
// 更新标题
this.utils.changeTitle('小工具');
}); });
}).catch(() => { });
}, },
methods: {
/** /**
* 关闭工具 * 打开工具
*/ *
detailClose(done) { * @param {string} toolCatrgory 工具分类
this.$confirm('是否关闭？').then(() => { * @param {string} toolName 工具名称
// 关闭 drawer */
done(); detailOpen(toolCatrgory, toolName) {
// 路由跳转 const errMsg = `无法打开该工具（分类：${toolCatrgory} 名称：${toolName}）`;
this.$router.push({
name: 'Tools'
});
// 更新页面标题
this.utils.changeTitle('小工具');
}).catch(() => { });
},
/** try {
* 打开工具
*
* @param {string} toolCatrgory 工具分类
* @param {string} toolName 工具名称
*/
detailOpen(toolCatrgory, toolName) {
// 当前工具信息
var info = {
title: '',
update: '',
version: '',
};
// 错误提示
var errMsg = `无法打开该工具（分类：${toolCatrgory} 名称：${toolName}）`;
try { var info = this.toolList[toolCatrgory]['list'][toolName];
if (info === undefined) {
throw new Error(errMsg);
}
info = this.toolList[toolCatrgory]['list'][toolName]; } catch (err) {
if (info === undefined) { console.warn('[打开工具]', err);
throw new Error(errMsg); this.$message({
} message: errMsg,
type: 'error'
});
return;
} catch (err) { }
console.warn('[打开工具]', err); // 禁用
this.$message({ if (!info.enabled) {
message: errMsg, this.$message({
type: 'warning' message: '该工具未启用',
}); type: 'warning'
return; });
return;
}
} const {
title: iTitle,
// 禁用 version: iVersion,
if (!info.enabled) { update: iUpdate,
this.$message({ } = info;
message: '该工具未启用',
type: 'warning'
});
return;
}
// 更新页面标题
this.utils.changeTitle(info.title);
// 更新 drawer 标题
this.detail.title = `${info.title} [${info.version || '未知'}][${info.update || '未知'}]`;
// 路由跳转
// 注：当前路由相同时也进行跳转，以更新 query
this.$router.push({
name: 'ToolsDetail',
params: {
category: toolCatrgory,
name: toolName
}
}).catch((err) => {
console.log('[路由跳转]', err.name);
});
// 显示 drawer
this.detail.show = true;
},
/**
* 打开工具（新标签页）
*/
detailOpenNewTab() {
const url = window.location.href;
window.open(url, '_blank');
},
// 路由跳转
// 注：当前路由相同时也进行跳转
this.$router.push({
name: 'ToolsDetail',
params: {
category: toolCatrgory,
name: toolName
}
}).catch((err) => {
console.log('[打开工具]', err.name);
}).finally(() => {
// 更新标题
this.utils.changeTitle(iTitle);
this.detail.title = `${iTitle} [${iVersion || '未知'}][${iUpdate || '未知'}]`;
// 显示 drawer
this.detail.show = true;
});
}, },
/**
* 打开工具（新标签页）
*/
detailOpenNewTab() {
const url = window.location.href;
window.open(url, '_blank');
},
},
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.tools { .tools {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 2rem; padding: 2rem;
background-color: @colorWhite; background-color: @colorWhite;
overflow-y: auto; overflow-y: auto;
}
.wrapper { .wrapper {
width: 100%; width: 100%;
}
.category {
display: flex;
align-items: flex-start;
flex-wrap: wrap;
justify-content: flex-start;
position: relative;
padding-top: 3rem;
width: 100%;
.title {
position: absolute;
top: 1rem;
left: 0;
font-weight: bold;
color: @textPrimary;
}
.tool-item {
flex-shrink: 0;
margin: 0.5rem;
padding: 1rem;
width: 16rem;
border-left: 0.2rem solid @colorPrimary;
border-radius: 0.25rem;
background-color: #FFF;
font-size: 0;
color: @textPrimary;
overflow: hidden;
transition: all @transitionTime;
cursor: pointer;
&:hover {
border-left-color: @colorSecondary;
transform: translateY(-0.2rem);
} }
.category { &.disabled {
display: flex; border-left-color: @colorGrey;
align-items: flex-start;
flex-wrap: wrap;
justify-content: flex-start;
position: relative;
padding-top: 3rem;
width: 100%;
.title {
position: absolute;
top: 1rem;
left: 0;
font-weight: bold;
color: @textPrimary;
}
.tool-item {
flex-shrink: 0;
margin: 0.5rem;
padding: 1rem;
width: 16rem;
border-left: 0.2rem solid @colorPrimary;
border-radius: 0.25rem;
background-color: #FFF;
font-size: 0;
color: @textPrimary;
overflow: hidden;
transition: all @transitionTime;
cursor: pointer;
&:hover {
border-left-color: @colorSecondary;
transform: translateY(-0.2rem);
}
&.disabled {
border-left-color: @colorGrey;
}
.item-title {
margin-bottom: 0.5rem;
font-weight: bold;
font-size: 0.9rem;
}
.item-content {
height: calc(1.5em * 2);
line-height: 1.5em;
font-size: 0.75rem;
color: @textSecondary;
}
}
} }
.item-title {
margin-bottom: 0.5rem;
font-weight: bold;
font-size: 0.9rem;
}
.item-content {
height: calc(1.5em * 2);
line-height: 1.5em;
font-size: 0.75rem;
color: @textSecondary;
}
}
} }
.drawer-full { .drawer-full {
.header { .header {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
.btn { .btn {
margin: 0 0.5rem; margin: 0 0.5rem;
font-size: inherit; font-size: inherit;
cursor: pointer; cursor: pointer;
}
} }
}
} }
</style> </style>

141
src/views/ToolsDetail.vue
View File

@@ -1,90 +1,93 @@
<template> <template>
<div class="tools-detail"> <div class="tools-detail">
<component :is="toolElem" /> <component :is="toolPage" />
</div> </div>
</template> </template>
<script> <script>
import navTools from '@/assets/js/navTools.js'; import navTools from '@/assets/js/navTools.js';
export default { export default {
name: 'ToolsDetail', name: 'ToolsDetail',
data() { data() {
return { return {
utils: this.$root.utils, utils: this.$root.utils,
toolList: navTools, toolList: navTools,
toolElem: null, toolPage: null,
} }
}, },
beforeRouteEnter(to, from, next) { beforeRouteEnter(to, from, next) {
next(vm => { next(vm => {
var params = vm.$route.params; const { params, query } = vm.$route;
var toolComponent = vm.toolList[params.category]['list'][params.name].component; const { category: cCategory, name: cName } = params;
var loading = null; const componentName = vm.toolList[cCategory]['list'][cName].component;
console.log('[打开工具] params', params); var loading = null;
// 异步，防止找不到 target console.log('[打开工具]', { params, query });
setTimeout(() => {
// 开启 Loading
loading = vm.$loading({
background: '#FFF',
lock: true,
// Loading 需要覆盖的 DOM 节点
target: '.drawer-full .el-drawer__body'
});
}, 0);
vm.toolElem = (() => { // 异步，防止找不到 target
// 动态引入组件 setTimeout(() => {
var elem = import(`@/components/tools/${toolComponent}.vue`); // 开启 Loading
loading = vm.$loading({
Promise.all([elem]).then(() => { background: '#FFF',
setTimeout(() => { lock: true,
// 关闭 Loading // Loading 需要覆盖的 DOM 节点
loading.close(); target: '.drawer-full .el-drawer__body'
}, 200);
});
return elem;
});
}); });
}, }, 0);
vm.toolPage = (() => {
// 动态引入组件
const component = import(`@/components/tools/${componentName}.vue`);
Promise.all([component]).then(() => {
setTimeout(() => {
// 关闭 Loading
loading.close();
}, 200);
});
return component;
});
});
},
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.tools-detail { .tools-detail {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
justify-content: center; justify-content: center;
}
/deep/ .tool-elem { /deep/ .tool-page {
width: 100%; width: 100%;
max-width: 60rem; max-width: 60rem;
> div { > div {
> .title { > .title {
position: relative; position: relative;
margin: 1.5rem 0; margin: 1.5rem 0;
font-size: 1rem; font-size: 1rem;
color: @textPrimary; color: @textPrimary;
}
> .title::before {
content: "";
position: absolute;
top: 0;
left: -0.5rem;
width: 0.2rem;
height: 100%;
background-color: @colorPrimary;
}
> .content {
font-size: 0.9rem;
}
}
} }
> .title::before {
content: "";
position: absolute;
top: 0;
left: -0.5rem;
width: 0.2rem;
height: 100%;
background-color: @colorPrimary;
}
> .content {
line-height: 1.6em;
font-size: 0.9rem;
}
}
} }
</style> </style>