feat(工具箱): 实现“新窗口中打开”工具

This commit is contained in:
2025-02-04 18:05:32 +08:00
parent dab7d938f7
commit 3e526045bf
2 changed files with 102 additions and 6 deletions

View File

@@ -255,13 +255,13 @@ export const toolList = [
{
id: 'open-new-window',
component: 'Other/OpenNewWindow',
title: '新窗口(小窗)中打开',
title: '新窗口中打开',
iconClass: 'mdi mdi-window-maximize',
desc: '从新的小窗口中打开指定的链接(仅支持 PC 端浏览器)',
createdAt: '',
updatedAt: '',
version: '0',
enabled: false,
createdAt: '2025-02-04',
updatedAt: '2025-02-04',
version: '1',
enabled: true,
},
{
id: 'run-javascript',

View File

@@ -1,9 +1,105 @@
<template>
<div class="tool-detail-page"></div>
<div class="tool-detail-page">
<!-- 设置 -->
<n-card size="small" title="设置">
<n-form
class="form-no-feedback config-inputs"
label-align="left"
label-placement="left"
label-width="auto"
@contextmenu.stop
>
<n-form-item label="目标链接:">
<n-input
v-model:value="data.url"
placeholder="请输入需要打开的 URL需要包含协议部分https://"
type="text"
></n-input>
</n-form-item>
<n-form-item label="窗口大小:">
<n-flex align="center">
<span>宽度</span>
<n-input-number
v-model:value="data.width"
:min="0"
:max="9999999"
:precision="0"
:step="1"
></n-input-number>
<span>高度</span>
<n-input-number
v-model:value="data.height"
:min="0"
:max="9999999"
:precision="0"
:step="1"
></n-input-number>
</n-flex>
</n-form-item>
</n-form>
</n-card>
<!-- 操作 -->
<n-card size="small" title="操作">
<n-flex>
<n-button
type="primary"
@click="openWindow"
>打开窗口</n-button>
</n-flex>
</n-card>
</div>
</template>
<script setup>
import {
NButton, NCard, NCode, NFlex,
NForm, NFormItem,
NInput, NInputNumber, NSwitch,
} from 'naive-ui';
import {
reactive,
} from 'vue';
/** 数据 */
const data = reactive({
url: '',
width: 400,
height: 300,
});
/** 打开窗口 */
function openWindow() {
var link = data.url || 'https://github.com/Frost-ZX';
var width = data.width ?? 400;
var height = data.height ?? 300;
var features = `height=${height}, width=${width}, toolbar=no, menubar=no, scrollbars=yes, resizable=yes, location=yes, status=yes`;
window.open(link, '_blank', features);
}
</script>
<style lang="less" scoped>
.config-inputs {
.n-input-number {
flex-grow: 1;
width: 0;
}
.n-flex {
width: 100%;
}
:deep(.n-form-item-blank) {
max-width: 480px;
}
}
</style>