2023-06-28 00:47:44 +08:00
|
|
|
<script setup>
|
2023-07-01 02:05:30 +08:00
|
|
|
import ContentPane from './components/content/ContentPane.vue'
|
2023-07-03 23:48:41 +08:00
|
|
|
import BrowserPane from './components/sidebar/BrowserPane.vue'
|
2023-08-02 19:42:05 +08:00
|
|
|
import { computed, reactive, ref, watch } from 'vue'
|
2023-07-12 15:48:49 +08:00
|
|
|
import { debounce, get } from 'lodash'
|
2023-06-28 00:47:44 +08:00
|
|
|
import { useThemeVars } from 'naive-ui'
|
2023-07-03 23:48:41 +08:00
|
|
|
import NavMenu from './components/sidebar/NavMenu.vue'
|
2023-07-01 02:05:30 +08:00
|
|
|
import ConnectionPane from './components/sidebar/ConnectionPane.vue'
|
|
|
|
import ContentServerPane from './components/content/ContentServerPane.vue'
|
|
|
|
import useTabStore from './stores/tab.js'
|
2023-07-11 18:06:44 +08:00
|
|
|
import usePreferencesStore from './stores/preferences.js'
|
2023-07-12 15:48:49 +08:00
|
|
|
import useConnectionStore from './stores/connections.js'
|
2023-07-16 01:50:01 +08:00
|
|
|
import ContentLogPane from './components/content/ContentLogPane.vue'
|
2023-09-02 18:23:40 +08:00
|
|
|
import ContentValueTab from '@/components/content/ContentValueTab.vue'
|
|
|
|
import ToolbarControlWidget from '@/components/common/ToolbarControlWidget.vue'
|
2023-09-22 18:31:50 +08:00
|
|
|
import { WindowIsFullscreen, WindowToggleMaximise } from 'wailsjs/runtime/runtime.js'
|
2023-09-02 18:23:40 +08:00
|
|
|
import { isMacOS } from '@/utils/platform.js'
|
|
|
|
import iconUrl from '@/assets/images/icon.png'
|
2023-06-28 00:47:44 +08:00
|
|
|
|
|
|
|
const themeVars = useThemeVars()
|
|
|
|
|
2023-09-05 14:43:43 +08:00
|
|
|
const props = defineProps({
|
|
|
|
loading: Boolean,
|
|
|
|
})
|
|
|
|
|
2023-06-28 00:47:44 +08:00
|
|
|
const data = reactive({
|
2023-07-01 02:05:30 +08:00
|
|
|
navMenuWidth: 60,
|
2023-06-28 00:47:44 +08:00
|
|
|
hoverResize: false,
|
|
|
|
resizing: false,
|
2023-09-02 18:23:40 +08:00
|
|
|
toolbarHeight: 45,
|
2023-06-28 00:47:44 +08:00
|
|
|
})
|
|
|
|
|
2023-07-01 02:05:30 +08:00
|
|
|
const tabStore = useTabStore()
|
2023-07-12 11:48:08 +08:00
|
|
|
const prefStore = usePreferencesStore()
|
2023-07-12 15:48:49 +08:00
|
|
|
const connectionStore = useConnectionStore()
|
2023-08-02 19:42:05 +08:00
|
|
|
const logPaneRef = ref(null)
|
2023-07-11 18:06:44 +08:00
|
|
|
// const preferences = ref({})
|
|
|
|
// provide('preferences', preferences)
|
2023-06-28 00:47:44 +08:00
|
|
|
|
2023-07-12 15:48:49 +08:00
|
|
|
const saveWidth = debounce(prefStore.savePreferences, 1000, { trailing: true })
|
2023-06-28 00:47:44 +08:00
|
|
|
const handleResize = (evt) => {
|
|
|
|
if (data.resizing) {
|
2023-07-13 15:46:12 +08:00
|
|
|
prefStore.setAsideWidth(Math.max(evt.clientX - data.navMenuWidth, 300))
|
2023-07-12 15:48:49 +08:00
|
|
|
saveWidth()
|
2023-06-28 00:47:44 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const stopResize = () => {
|
|
|
|
data.resizing = false
|
|
|
|
document.removeEventListener('mousemove', handleResize)
|
|
|
|
document.removeEventListener('mouseup', stopResize)
|
|
|
|
// TODO: Save sidebar x-position
|
|
|
|
}
|
|
|
|
|
|
|
|
const startResize = () => {
|
|
|
|
data.resizing = true
|
|
|
|
document.addEventListener('mousemove', handleResize)
|
|
|
|
document.addEventListener('mouseup', stopResize)
|
|
|
|
}
|
|
|
|
|
|
|
|
const asideWidthVal = computed(() => {
|
2023-07-13 15:46:12 +08:00
|
|
|
return prefStore.general.asideWidth + 'px'
|
2023-06-28 00:47:44 +08:00
|
|
|
})
|
|
|
|
|
|
|
|
const dragging = computed(() => {
|
|
|
|
return data.hoverResize || data.resizing
|
|
|
|
})
|
2023-08-02 19:42:05 +08:00
|
|
|
|
|
|
|
watch(
|
|
|
|
() => tabStore.nav,
|
|
|
|
(nav) => {
|
|
|
|
if (nav === 'log') {
|
|
|
|
logPaneRef.value?.refresh()
|
|
|
|
}
|
|
|
|
},
|
|
|
|
)
|
2023-09-24 22:48:41 +08:00
|
|
|
|
|
|
|
const borderRadius = computed(() => {
|
|
|
|
if (isMacOS()) {
|
|
|
|
return WindowIsFullscreen().then((full) => {
|
|
|
|
return full ? '0' : '10px'
|
|
|
|
})
|
|
|
|
}
|
|
|
|
return '10px'
|
|
|
|
})
|
2023-09-25 17:30:01 +08:00
|
|
|
|
|
|
|
const border = computed(() => {
|
2023-09-25 19:47:26 +08:00
|
|
|
const color = isMacOS() ? '#0000' : themeVars.value.borderColor
|
|
|
|
return `1px solid ${color}`
|
2023-09-25 17:30:01 +08:00
|
|
|
})
|
2023-06-28 00:47:44 +08:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<template>
|
|
|
|
<!-- app content-->
|
2023-09-05 14:43:43 +08:00
|
|
|
<n-spin
|
|
|
|
:show="props.loading"
|
|
|
|
:theme-overrides="{ opacitySpinning: 0 }"
|
2023-09-25 17:30:01 +08:00
|
|
|
:style="{ backgroundColor: themeVars.bodyColor, borderRadius, border }">
|
2023-09-02 18:23:40 +08:00
|
|
|
<div
|
2023-09-05 14:43:43 +08:00
|
|
|
id="app-content-wrapper"
|
|
|
|
class="flex-box-v"
|
|
|
|
:style="{
|
|
|
|
backgroundColor: themeVars.bodyColor,
|
|
|
|
color: themeVars.textColorBase,
|
|
|
|
}">
|
|
|
|
<!-- title bar -->
|
2023-09-02 18:23:40 +08:00
|
|
|
<div
|
2023-09-05 14:43:43 +08:00
|
|
|
id="app-toolbar"
|
|
|
|
class="flex-box-h"
|
|
|
|
style="--wails-draggable: drag"
|
|
|
|
:style="{ height: data.toolbarHeight + 'px' }"
|
|
|
|
@dblclick="WindowToggleMaximise">
|
|
|
|
<!-- title -->
|
|
|
|
<div
|
|
|
|
id="app-toolbar-title"
|
|
|
|
:style="{
|
|
|
|
width: `${data.navMenuWidth + prefStore.general.asideWidth - 4}px`,
|
|
|
|
paddingLeft: isMacOS() ? '70px' : '10px',
|
|
|
|
}">
|
|
|
|
<n-space align="center" :wrap-item="false" :wrap="false" :size="3">
|
|
|
|
<n-avatar :src="iconUrl" color="#0000" :size="35" style="min-width: 35px" />
|
|
|
|
<div style="min-width: 68px; font-weight: 800">Tiny RDM</div>
|
|
|
|
<transition name="fade">
|
|
|
|
<n-text v-if="tabStore.nav === 'browser'" strong class="ellipsis" style="font-size: 13px">
|
|
|
|
- {{ get(tabStore.currentTab, 'name') }}
|
|
|
|
</n-text>
|
|
|
|
</transition>
|
|
|
|
</n-space>
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
:class="{
|
|
|
|
'resize-divider-hover': data.hoverResize,
|
|
|
|
'resize-divider-drag': data.resizing,
|
|
|
|
}"
|
|
|
|
class="resize-divider resize-divider-hide"
|
|
|
|
@mousedown="startResize"
|
|
|
|
@mouseout="data.hoverResize = false"
|
|
|
|
@mouseover="data.hoverResize = true" />
|
|
|
|
<!-- browser tabs -->
|
|
|
|
<div v-show="tabStore.nav === 'browser'" class="app-toolbar-tab flex-item-expand">
|
|
|
|
<content-value-tab />
|
|
|
|
</div>
|
|
|
|
<div class="flex-item-expand"></div>
|
|
|
|
<!-- simulate window control buttons -->
|
|
|
|
<toolbar-control-widget v-if="!isMacOS()" :size="data.toolbarHeight" style="align-self: flex-start" />
|
2023-09-02 18:23:40 +08:00
|
|
|
</div>
|
2023-07-01 02:05:30 +08:00
|
|
|
|
2023-09-05 14:43:43 +08:00
|
|
|
<!-- content -->
|
2023-09-06 16:07:20 +08:00
|
|
|
<div
|
|
|
|
id="app-content"
|
|
|
|
:style="prefStore.generalFont"
|
|
|
|
style="--wails-draggable: none"
|
|
|
|
class="flex-box-h flex-item-expand">
|
2023-09-05 14:43:43 +08:00
|
|
|
<nav-menu v-model:value="tabStore.nav" :width="data.navMenuWidth" />
|
2023-09-22 18:31:50 +08:00
|
|
|
<!-- browser page -->
|
2023-09-05 14:43:43 +08:00
|
|
|
<div v-show="tabStore.nav === 'browser'" :class="{ dragging }" class="flex-box-h flex-item-expand">
|
|
|
|
<div id="app-side" :style="{ width: asideWidthVal }" class="flex-box-h flex-item">
|
|
|
|
<browser-pane
|
|
|
|
v-for="t in tabStore.tabs"
|
|
|
|
v-show="get(tabStore.currentTab, 'name') === t.name"
|
|
|
|
:key="t.name"
|
|
|
|
class="flex-item-expand" />
|
|
|
|
<div
|
|
|
|
:class="{
|
|
|
|
'resize-divider-hover': data.hoverResize,
|
|
|
|
'resize-divider-drag': data.resizing,
|
|
|
|
}"
|
|
|
|
class="resize-divider"
|
|
|
|
@mousedown="startResize"
|
|
|
|
@mouseout="data.hoverResize = false"
|
|
|
|
@mouseover="data.hoverResize = true" />
|
|
|
|
</div>
|
|
|
|
<content-pane class="flex-item-expand" />
|
2023-09-02 18:23:40 +08:00
|
|
|
</div>
|
|
|
|
|
2023-09-05 14:43:43 +08:00
|
|
|
<!-- server list page -->
|
|
|
|
<div v-show="tabStore.nav === 'server'" :class="{ dragging }" class="flex-box-h flex-item-expand">
|
|
|
|
<div id="app-side" :style="{ width: asideWidthVal }" class="flex-box-h flex-item">
|
|
|
|
<connection-pane class="flex-item-expand" />
|
|
|
|
<div
|
|
|
|
:class="{
|
|
|
|
'resize-divider-hover': data.hoverResize,
|
|
|
|
'resize-divider-drag': data.resizing,
|
|
|
|
}"
|
|
|
|
class="resize-divider"
|
|
|
|
@mousedown="startResize"
|
|
|
|
@mouseout="data.hoverResize = false"
|
|
|
|
@mouseover="data.hoverResize = true" />
|
|
|
|
</div>
|
|
|
|
<content-server-pane class="flex-item-expand" />
|
2023-09-02 18:23:40 +08:00
|
|
|
</div>
|
2023-07-13 15:46:12 +08:00
|
|
|
|
2023-09-05 14:43:43 +08:00
|
|
|
<!-- log page -->
|
|
|
|
<div v-show="tabStore.nav === 'log'" class="flex-box-h flex-item-expand">
|
|
|
|
<content-log-pane ref="logPaneRef" class="flex-item-expand" />
|
|
|
|
</div>
|
2023-09-02 18:23:40 +08:00
|
|
|
</div>
|
2023-07-16 01:50:01 +08:00
|
|
|
</div>
|
2023-09-05 14:43:43 +08:00
|
|
|
</n-spin>
|
2023-06-28 00:47:44 +08:00
|
|
|
</template>
|
|
|
|
|
2023-08-02 19:42:05 +08:00
|
|
|
<style lang="scss" scoped>
|
2023-07-15 01:54:40 +08:00
|
|
|
#app-content-wrapper {
|
2023-09-25 17:30:01 +08:00
|
|
|
width: calc(100vw - 2px);
|
|
|
|
height: calc(100vh - 2px);
|
2023-06-28 00:47:44 +08:00
|
|
|
overflow: hidden;
|
|
|
|
box-sizing: border-box;
|
2023-09-05 14:43:43 +08:00
|
|
|
border-radius: 10px;
|
2023-06-28 00:47:44 +08:00
|
|
|
|
|
|
|
#app-toolbar {
|
2023-09-02 18:23:40 +08:00
|
|
|
background-color: v-bind('themeVars.tabColor');
|
|
|
|
border-bottom: 1px solid v-bind('themeVars.borderColor');
|
|
|
|
|
|
|
|
&-title {
|
|
|
|
padding-left: 10px;
|
|
|
|
padding-right: 10px;
|
|
|
|
box-sizing: border-box;
|
|
|
|
align-self: center;
|
|
|
|
align-items: baseline;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.app-toolbar-tab {
|
|
|
|
align-self: flex-end;
|
|
|
|
margin-bottom: -1px;
|
2023-09-03 00:15:31 +08:00
|
|
|
margin-left: 3px;
|
2023-09-02 18:23:40 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
#app-content {
|
|
|
|
height: calc(100% - 60px);
|
2023-06-28 00:47:44 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
#app-side {
|
|
|
|
//overflow: hidden;
|
|
|
|
height: 100%;
|
2023-07-15 01:54:40 +08:00
|
|
|
background-color: v-bind('themeVars.tabColor');
|
2023-09-03 00:15:31 +08:00
|
|
|
}
|
|
|
|
}
|
2023-06-28 00:47:44 +08:00
|
|
|
|
2023-09-03 00:15:31 +08:00
|
|
|
.resize-divider {
|
|
|
|
width: 3px;
|
|
|
|
border-right: 1px solid v-bind('themeVars.borderColor');
|
|
|
|
}
|
2023-06-28 00:47:44 +08:00
|
|
|
|
2023-09-03 00:15:31 +08:00
|
|
|
.resize-divider-hide {
|
|
|
|
background-color: #0000;
|
|
|
|
border-right-color: #0000;
|
|
|
|
}
|
2023-06-28 00:47:44 +08:00
|
|
|
|
2023-09-03 00:15:31 +08:00
|
|
|
.resize-divider-hover {
|
|
|
|
background-color: v-bind('themeVars.borderColor');
|
|
|
|
border-right-color: v-bind('themeVars.borderColor');
|
|
|
|
}
|
|
|
|
|
|
|
|
.resize-divider-drag {
|
|
|
|
background-color: v-bind('themeVars.primaryColor');
|
|
|
|
border-right-color: v-bind('themeVars.primaryColor');
|
2023-06-28 00:47:44 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
.dragging {
|
|
|
|
cursor: col-resize !important;
|
|
|
|
}
|
2023-09-02 18:23:40 +08:00
|
|
|
|
|
|
|
.fade-enter-from,
|
|
|
|
.fade-leave-to {
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.fade-enter-active,
|
|
|
|
.fade-leave-active {
|
|
|
|
transition: opacity 0.3s ease;
|
|
|
|
}
|
2023-06-28 00:47:44 +08:00
|
|
|
</style>
|