自前ルーティング (#6759)

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

src/client/components/page-window.vue

@@ -1,11 +1,18 @@
 <template>
-<XWindow ref="window" :initial-width="400" :initial-height="500" :can-resize="true" @closed="$emit('closed')">
+<XWindow ref="window"
+	:initial-width="400"
+	:initial-height="500"
+	:can-resize="true"
+	:close-right="true"
+	:contextmenu="contextmenu"
+	@closed="$emit('closed')"
+>
 	<template #header>
 		<XHeader :info="pageInfo" :with-back="false"/>
 	</template>
 	<template #buttons>
-		<button class="_button" @click="expand" v-tooltip="$t('showInPage')"><Fa :icon="faExpandAlt"/></button>
-		<button class="_button" @click="popout" v-tooltip="$t('popout')"><Fa :icon="faExternalLinkAlt"/></button>
+		<button class="_button" @click="back()" v-if="history.length > 0"><Fa :icon="faChevronLeft"/></button>
+		<button class="_button" style="pointer-events: none;" v-else><!-- マージンのバランスを取るためのダミー --></button>
 	</template>
 	<div class="yrolvcoq" style="min-height: 100%; background: var(--bg);">
 		<component :is="component" v-bind="props" :ref="changePage"/>
@@ -14,11 +21,13 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, markRaw } from 'vue';
-import { faExternalLinkAlt, faExpandAlt } from '@fortawesome/free-solid-svg-icons';
+import { defineComponent } from 'vue';
+import { faExternalLinkAlt, faExpandAlt, faLink, faChevronLeft } from '@fortawesome/free-solid-svg-icons';
 import XWindow from '@/components/ui/window.vue';
 import XHeader from '@/ui/_common_/header.vue';
 import { popout } from '@/scripts/popout';
+import copyToClipboard from '@/scripts/copy-to-clipboard';
+import { resolve } from '@/router';
 
 export default defineComponent({
 	components: {
@@ -26,6 +35,14 @@ export default defineComponent({
 		XHeader,
 	},
 
+	provide() {
+		return {
+			navHook: (url) => {
+				this.navigate(url);
+			}
+		};
+	},
+
 	props: {
 		initialUrl: {
 			type: String,
@@ -38,7 +55,7 @@ export default defineComponent({
 		initialProps: {
 			type: Object,
 			required: false,
-			default: {},
+			default: () => {},
 		},
 	},
 
@@ -50,18 +67,39 @@ export default defineComponent({
 			url: this.initialUrl,
 			component: this.initialComponent,
 			props: this.initialProps,
-			faExternalLinkAlt, faExpandAlt,
+			history: [],
+			faChevronLeft,
 		};
 	},
 
-	provide() {
-		return {
-			navHook: (url, component, props) => {
-				this.url = url;
-				this.component = markRaw(component);
-				this.props = props;
-			}
-		};
+	computed: {
+		contextmenu() {
+			return [{
+				type: 'label',
+				text: this.url,
+			}, {
+				icon: faExpandAlt,
+				text: this.$t('showInPage'),
+				action: this.expand
+			}, {
+				icon: faExternalLinkAlt,
+				text: this.$t('popout'),
+				action: this.popout
+			}, null, {
+				icon: faExternalLinkAlt,
+				text: this.$t('openInNewTab'),
+				action: () => {
+					window.open(this.url, '_blank');
+					this.$refs.window.close();
+				}
+			}, {
+				icon: faLink,
+				text: this.$t('copyLink'),
+				action: () => {
+					copyToClipboard(this.url);
+				}
+			}];
+		},
 	},
 
 	methods: {
@@ -72,6 +110,18 @@ export default defineComponent({
 			}
 		},
 
+		navigate(url, record = true) {
+			if (record) this.history.push(this.url);
+			this.url = url;
+			const { component, props } = resolve(url);
+			this.component = component;
+			this.props = props;
+		},
+
+		back() {
+			this.navigate(this.history.pop(), false);
+		},
+
 		expand() {
 			this.$router.push(this.url);
 			this.$refs.window.close();