This commit is contained in:
Baobhan Sith
2025-05-13 12:48:43 +08:00
parent bdcf449cb9
commit 39fd152aa5
2 changed files with 23 additions and 13 deletions
@@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref, computed, onMounted, onBeforeUnmount, nextTick, watch, watchEffect, type PropType, readonly, defineExpose, shallowRef } from 'vue'; import { ref, computed, onMounted, onBeforeUnmount, nextTick, watch, watchEffect, type PropType, readonly, defineExpose, shallowRef, toRef } from 'vue';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useRoute } from 'vue-router'; import { useRoute } from 'vue-router';
import { storeToRefs } from 'pinia'; import { storeToRefs } from 'pinia';
@@ -44,6 +44,10 @@ const props = defineProps({
type: Object as PropType<WebSocketDependencies>, type: Object as PropType<WebSocketDependencies>,
required: true, required: true,
}, },
isMobile: {
type: Boolean,
default: false
}
}); });
// --- 核心 Composables --- // --- 核心 Composables ---
@@ -651,6 +655,7 @@ const {
isConnected: props.wsDeps.isConnected, isConnected: props.wsDeps.isConnected,
isSftpReady: props.wsDeps.isSftpReady, isSftpReady: props.wsDeps.isSftpReady,
clipboardState: readonly(clipboardState), // +++ 传递剪贴板状态 (只读) +++ clipboardState: readonly(clipboardState), // +++ 传递剪贴板状态 (只读) +++
isMobile: toRef(props, 'isMobile'), // +++ 传递 isMobile prop 作为 ref +++
t, t,
// --- 传递回调函数 --- // --- 传递回调函数 ---
// 修改:确保在调用前检查 currentSftpManager.value // 修改:确保在调用前检查 currentSftpManager.value
@@ -1322,7 +1327,7 @@ const handleOpenEditorClick = () => {
<!-- Path Bar --> <!-- Path Bar -->
<div class="flex items-center bg-background border border-border rounded px-1.5 py-0.5 overflow-hidden min-w-[100px] flex-shrink"> <div class="flex items-center bg-background border border-border rounded px-1.5 py-0.5 overflow-hidden min-w-[100px] flex-shrink">
<span v-show="!isEditingPath" class="text-text-secondary whitespace-nowrap overflow-x-auto pr-2"> <span v-show="!isEditingPath" class="text-text-secondary whitespace-nowrap overflow-x-auto pr-2">
{{ t('fileManager.currentPath') }}: <span v-if="!props.isMobile">{{ t('fileManager.currentPath') }}:</span>
<strong <strong
@click="startPathEdit" @click="startPathEdit"
:title="t('fileManager.editPathTooltip')" :title="t('fileManager.editPathTooltip')"
@@ -1358,9 +1363,10 @@ const handleOpenEditorClick = () => {
:disabled="!currentSftpManager || !props.wsDeps.isConnected.value" :disabled="!currentSftpManager || !props.wsDeps.isConnected.value"
:title="t('fileManager.actions.openEditor', 'Open Popup Editor')" :title="t('fileManager.actions.openEditor', 'Open Popup Editor')"
class="flex items-center gap-1 px-2.5 py-1 bg-background border border-border rounded text-foreground text-xs transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed hover:enabled:bg-header hover:enabled:border-primary hover:enabled:text-primary" class="flex items-center gap-1 px-2.5 py-1 bg-background border border-border rounded text-foreground text-xs transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed hover:enabled:bg-header hover:enabled:border-primary hover:enabled:text-primary"
:class="{ 'px-1.5': props.isMobile }"
> >
<i class="far fa-edit text-sm"></i> <!-- 使用编辑图标 --> <i class="far fa-edit text-sm"></i> <!-- 使用编辑图标 -->
<span>{{ t('fileManager.actions.openEditor', 'Open Editor') }}</span> <!-- 添加 i18n key --> <span v-if="!props.isMobile">{{ t('fileManager.actions.openEditor', 'Open Editor') }}</span> <!-- 添加 i18n key -->
</button> </button>
<!-- 上传按钮 --> <!-- 上传按钮 -->
<button <button
@@ -1368,27 +1374,30 @@ const handleOpenEditorClick = () => {
:disabled="!currentSftpManager || !props.wsDeps.isConnected.value" :disabled="!currentSftpManager || !props.wsDeps.isConnected.value"
:title="t('fileManager.actions.uploadFile')" :title="t('fileManager.actions.uploadFile')"
class="flex items-center gap-1 px-2.5 py-1 bg-background border border-border rounded text-foreground text-xs transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed hover:enabled:bg-header hover:enabled:border-primary hover:enabled:text-primary" class="flex items-center gap-1 px-2.5 py-1 bg-background border border-border rounded text-foreground text-xs transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed hover:enabled:bg-header hover:enabled:border-primary hover:enabled:text-primary"
:class="{ 'px-1.5': props.isMobile }"
> >
<i class="fas fa-upload text-sm"></i> <i class="fas fa-upload text-sm"></i>
<span>{{ t('fileManager.actions.upload') }}</span> <span v-if="!props.isMobile">{{ t('fileManager.actions.upload') }}</span>
</button> </button>
<button <button
@click="handleNewFolderContextMenuClick" @click="handleNewFolderContextMenuClick"
:disabled="!currentSftpManager || !props.wsDeps.isConnected.value" :disabled="!currentSftpManager || !props.wsDeps.isConnected.value"
:title="t('fileManager.actions.newFolder')" :title="t('fileManager.actions.newFolder')"
class="flex items-center gap-1 px-2.5 py-1 bg-background border border-border rounded text-foreground text-xs transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed hover:enabled:bg-header hover:enabled:border-primary hover:enabled:text-primary" class="flex items-center gap-1 px-2.5 py-1 bg-background border border-border rounded text-foreground text-xs transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed hover:enabled:bg-header hover:enabled:border-primary hover:enabled:text-primary"
:class="{ 'px-1.5': props.isMobile }"
> >
<i class="fas fa-folder-plus text-sm"></i> <i class="fas fa-folder-plus text-sm"></i>
<span>{{ t('fileManager.actions.newFolder') }}</span> <span v-if="!props.isMobile">{{ t('fileManager.actions.newFolder') }}</span>
</button> </button>
<button <button
@click="handleNewFileContextMenuClick" @click="handleNewFileContextMenuClick"
:disabled="!currentSftpManager || !props.wsDeps.isConnected.value" :disabled="!currentSftpManager || !props.wsDeps.isConnected.value"
:title="t('fileManager.actions.newFile')" :title="t('fileManager.actions.newFile')"
class="flex items-center gap-1 px-2.5 py-1 bg-background border border-border rounded text-foreground text-xs transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed hover:enabled:bg-header hover:enabled:border-primary hover:enabled:text-primary" class="flex items-center gap-1 px-2.5 py-1 bg-background border border-border rounded text-foreground text-xs transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed hover:enabled:bg-header hover:enabled:border-primary hover:enabled:text-primary"
:class="{ 'px-1.5': props.isMobile }"
> >
<i class="far fa-file-alt text-sm"></i> <i class="far fa-file-alt text-sm"></i>
<span>{{ t('fileManager.actions.newFile') }}</span> <span v-if="!props.isMobile">{{ t('fileManager.actions.newFile') }}</span>
</button> </button>
</div> </div>
</div> </div>
@@ -807,13 +807,14 @@ const closeFileManagerModal = () => {
</button> </button>
</div> </div>
<div class="flex-grow overflow-hidden"> <div class="flex-grow overflow-hidden">
<template v-for="props in fileManagerPropsMap.values()" :key="props.sessionId"> <template v-for="propsData in fileManagerPropsMap.values()" :key="`${propsData.sessionId}-${isMobile}`">
<div v-show="props.sessionId === currentFileManagerSessionId" class="h-full"> <div v-show="propsData.sessionId === currentFileManagerSessionId" class="h-full">
<FileManager <FileManager
:session-id="props.sessionId" :session-id="propsData.sessionId"
:instance-id="props.instanceId" :instance-id="propsData.instanceId"
:db-connection-id="props.dbConnectionId" :db-connection-id="propsData.dbConnectionId"
:ws-deps="props.wsDeps" :ws-deps="propsData.wsDeps"
:is-mobile="isMobile"
class="h-full" class="h-full"
/> />
</div> </div>