update

2025-05-11 18:23:00 +08:00
parent 4c634c6fde
commit 80d5ab46ff
5 changed files with 1192 additions and 1079 deletions
@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+import TagInput from './TagInput.vue'; // Assuming TagInput is used here
+import type { ProxyInfo } from '../stores/proxies.store'; // Corrected Proxy to ProxyInfo
+import type { TagInfo } from '../stores/tags.store';     // Corrected Tag to TagInfo
+
+// Define Props.
+const props = defineProps<{
+  formData: {
+    type: 'SSH' | 'RDP' | 'VNC'; // Needed to conditionally show proxy selector
+    proxy_id: number | null;
+    tag_ids: number[];
+    notes: string;
+  };
+  proxies: ProxyInfo[]; // List of available proxies
+  tags: TagInfo[];    // List of available tags
+  isProxyLoading: boolean;
+  proxyStoreError: string | null;
+  isTagLoading: boolean;
+  tagStoreError: string | null;
+}>();
+
+// Define Emits for tag creation and deletion
+const emit = defineEmits<{
+  (e: 'create-tag', tagName: string): void;
+  (e: 'delete-tag', tagId: number): void;
+}>();
+
+const { t } = useI18n();
+
+const handleCreateTagEvent = (tagName: string) => {
+  emit('create-tag', tagName);
+};
+
+const handleDeleteTagEvent = (tagId: number) => {
+  emit('delete-tag', tagId);
+};
+</script>
+
+<template>
+  <!-- Advanced Options Section -->
+  <div class="space-y-4 p-4 border border-border rounded-md bg-header/30">
+    <h4 class="text-base font-semibold mb-3 pb-2 border-b border-border/50">{{ t('connections.form.sectionAdvanced', '高级选项') }}</h4>
+    
+    <!-- Proxy Select - Show only for SSH -->
+    <div v-if="props.formData.type === 'SSH'">
+      <label for="conn-proxy" class="block text-sm font-medium text-text-secondary mb-1">{{ t('connections.form.proxy') }} ({{ t('connections.form.optional') }})</label>
+      <select id="conn-proxy" v-model="props.formData.proxy_id"
+              class="w-full px-3 py-2 border border-border rounded-md shadow-sm bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary appearance-none bg-no-repeat bg-right pr-8"
+              style="background-image: url('data:image/svg+xml,%3csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 16 16\'%3e%3cpath fill=\'none\' stroke=\'%236c757d\' stroke-linecap=\'round\' stroke-linejoin=\'round\' stroke-width=\'2\' d=\'M2 5l6 6 6-6\'/%3e%3c/svg%3e'); background-position: right 0.75rem center; background-size: 16px 12px;">
+        <option :value="null">{{ t('connections.form.noProxy') }}</option>
+        <option v-for="proxy in props.proxies" :key="proxy.id" :value="proxy.id">
+          {{ proxy.name }} ({{ proxy.type }} - {{ proxy.host }}:{{ proxy.port }})
+        </option>
+      </select>
+      <div v-if="props.isProxyLoading" class="mt-1 text-xs text-text-secondary">{{ t('proxies.loading') }}</div>
+      <div v-if="props.proxyStoreError" class="mt-1 text-xs text-error">{{ t('proxies.error', { error: props.proxyStoreError }) }}</div>
+    </div>
+
+    <div>
+      <label class="block text-sm font-medium text-text-secondary mb-1">{{ t('connections.form.tags') }} ({{ t('connections.form.optional') }})</label>
+      <TagInput
+          v-model="props.formData.tag_ids"
+          :available-tags="props.tags"
+          :allow-create="true"
+          :allow-delete="true"
+          @create-tag="handleCreateTagEvent"
+          @delete-tag="handleDeleteTagEvent"
+          :placeholder="t('tags.inputPlaceholder', '添加或选择标签...')"
+      />
+      <div v-if="props.isTagLoading" class="mt-1 text-xs text-text-secondary">{{ t('tags.loading') }}</div>
+      <div v-if="props.tagStoreError" class="mt-1 text-xs text-error">{{ t('tags.error', { error: props.tagStoreError }) }}</div>
+    </div>
+    
+    <!-- Notes Section -->
+    <div>
+      <label for="conn-notes" class="block text-sm font-medium text-text-secondary mb-1">{{ t('connections.form.notes', '备注') }}</label>
+      <textarea id="conn-notes" v-model="props.formData.notes" rows="3"
+                class="w-full px-3 py-2 border border-border rounded-md shadow-sm bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary"
+                :placeholder="t('connections.form.notesPlaceholder', '输入连接备注...')"></textarea>
+    </div>
+  </div>
+</template>
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n';
+import SshKeySelector from './SshKeySelector.vue'; // Assuming SshKeySelector is used here
+
+// Define Props. formData is expected to be a reactive object from the parent composable.
+const props = defineProps<{
+  formData: {
+    type: 'SSH' | 'RDP' | 'VNC';
+    username: string;
+    auth_method: 'password' | 'key'; // SSH specific
+    password?: string; // Optional because it might not be set or sent
+    selected_ssh_key_id: number | null; // SSH specific
+    vncPassword?: string; // VNC specific, optional for the same reasons as password
+  };
+  isEditMode: boolean; // To determine if fields are required
+}>();
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <!-- Authentication Section -->
+  <div class="space-y-4 p-4 border border-border rounded-md bg-header/30">
+    <h4 class="text-base font-semibold mb-3 pb-2 border-b border-border/50">{{ t('connections.form.sectionAuth', '认证信息') }}</h4>
+    <div>
+      <label for="conn-username" class="block text-sm font-medium text-text-secondary mb-1">{{ t('connections.form.username') }}</label>
+      <input type="text" id="conn-username" v-model="props.formData.username" required
+             class="w-full px-3 py-2 border border-border rounded-md shadow-sm bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary" />
+    </div>
+
+    <!-- SSH Specific Auth -->
+    <template v-if="props.formData.type === 'SSH'">
+      <div>
+        <label class="block text-sm font-medium text-text-secondary mb-1">{{ t('connections.form.authMethod') }}</label>
+        <div class="flex rounded-md shadow-sm">
+          <button type="button"
+                  @click="props.formData.auth_method = 'password'"
+                  :class="['flex-1 px-3 py-2 border border-border text-sm font-medium focus:outline-none',
+                           props.formData.auth_method === 'password' ? 'bg-primary text-white' : 'bg-background text-foreground hover:bg-border',
+                           'rounded-l-md']">
+            {{ t('connections.form.authMethodPassword') }}
+          </button>
+          <button type="button"
+                  @click="props.formData.auth_method = 'key'"
+                  :class="['flex-1 px-3 py-2 border-t border-b border-r border-border text-sm font-medium focus:outline-none -ml-px',
+                           props.formData.auth_method === 'key' ? 'bg-primary text-white' : 'bg-background text-foreground hover:bg-border',
+                           'rounded-r-md']">
+            {{ t('connections.form.authMethodKey') }}
+          </button>
+        </div>
+      </div>
+
+      <div v-if="props.formData.auth_method === 'password'">
+        <label for="conn-password" class="block text-sm font-medium text-text-secondary mb-1">{{ t('connections.form.password') }}</label>
+        <input type="password" id="conn-password" v-model="props.formData.password" :required="props.formData.auth_method === 'password' && !isEditMode" autocomplete="new-password"
+               class="w-full px-3 py-2 border border-border rounded-md shadow-sm bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary" />
+      </div>
+
+      <div v-if="props.formData.auth_method === 'key'" class="space-y-4">
+        <div>
+            <label class="block text-sm font-medium text-text-secondary mb-1">{{ t('connections.form.sshKey') }}</label>
+            <SshKeySelector v-model="props.formData.selected_ssh_key_id" />
+        </div>
+      </div>
+    </template>
+
+    <!-- RDP Specific Auth -->
+    <template v-if="props.formData.type === 'RDP'">
+       <div>
+         <label for="conn-password-rdp" class="block text-sm font-medium text-text-secondary mb-1">{{ t('connections.form.password') }}</label>
+         <input type="password" id="conn-password-rdp" v-model="props.formData.password" :required="!isEditMode" autocomplete="new-password"
+                class="w-full px-3 py-2 border border-border rounded-md shadow-sm bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary" />
+       </div>
+     </template>
+
+    <!-- VNC Specific Auth -->
+    <template v-if="props.formData.type === 'VNC'">
+      <div>
+        <label for="conn-password-vnc" class="block text-sm font-medium text-text-secondary mb-1">{{ t('connections.form.vncPassword', 'VNC 密码') }}</label>
+        <input type="password" id="conn-password-vnc" v-model="props.formData.vncPassword" :required="!isEditMode" autocomplete="new-password"
+               class="w-full px-3 py-2 border border-border rounded-md shadow-sm bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary" />
+      </div>
+    </template>
+  </div>
+</template>
@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import { ref, nextTick, Teleport } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+// Define Props. formData is expected to be a reactive object from the parent composable.
+const props = defineProps<{
+  formData: {
+    name: string;
+    type: 'SSH' | 'RDP' | 'VNC';
+    host: string;
+    port: number;
+  };
+}>();
+
+const { t } = useI18n();
+
+// Tooltip state and refs for the host input
+const showHostTooltip = ref(false);
+const hostTooltipStyle = ref({});
+const hostIconRef = ref<HTMLElement | null>(null);
+const hostTooltipContentRef = ref<HTMLElement | null>(null);
+
+const handleHostIconMouseEnter = async () => {
+  showHostTooltip.value = true;
+  await nextTick(); // Wait for DOM update so tooltipRect can be calculated
+
+  if (hostIconRef.value && hostTooltipContentRef.value) {
+    const iconRect = hostIconRef.value.getBoundingClientRect();
+    const tooltipRect = hostTooltipContentRef.value.getBoundingClientRect();
+
+    let top = iconRect.top - tooltipRect.height - 8; // 8px offset above the icon
+    let left = iconRect.left + (iconRect.width / 2) - (tooltipRect.width / 2); // Center the tooltip
+
+    // Boundary checks to keep tooltip within viewport
+    if (top < 0) { // If not enough space on top, show below
+      top = iconRect.bottom + 8;
+    }
+    if (left < 0) {
+      left = 0;
+    }
+    if (left + tooltipRect.width > window.innerWidth) {
+      left = window.innerWidth - tooltipRect.width;
+    }
+
+    hostTooltipStyle.value = {
+      position: 'fixed', // Ensure positioning is relative to viewport
+      top: `${top}px`,
+      left: `${left}px`,
+    };
+  }
+};
+
+const handleHostIconMouseLeave = () => {
+  showHostTooltip.value = false;
+};
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      v-if="showHostTooltip"
+      ref="hostTooltipContentRef"
+      :style="hostTooltipStyle"
+      class="fixed w-max max-w-xs p-2 text-xs text-white bg-gray-800 rounded shadow-lg z-[1000] whitespace-pre-wrap pointer-events-none"
+      role="tooltip"
+    >
+      {{ t('connections.form.hostTooltip', '支持 IP 范围, 例如 192.168.1.10~192.168.1.15 (仅限添加模式)') }}
+    </div>
+  </Teleport>
+  <!-- Basic Info Section -->
+  <div class="space-y-4 p-4 border border-border rounded-md bg-header/30">
+    <h4 class="text-base font-semibold mb-3 pb-2 border-b border-border/50">{{ t('connections.form.sectionBasic', '基本信息') }}</h4>
+    <div>
+      <label for="conn-name" class="block text-sm font-medium text-text-secondary mb-1">{{ t('connections.form.name') }} ({{ t('connections.form.optional') }})</label>
+      <input type="text" id="conn-name" v-model="props.formData.name"
+             class="w-full px-3 py-2 border border-border rounded-md shadow-sm bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary" />
+    </div>
+    <!-- Connection Type -->
+    <div>
+      <label class="block text-sm font-medium text-text-secondary mb-1">{{ t('connections.form.connectionType', '连接类型') }}</label>
+      <div class="flex rounded-md shadow-sm">
+        <button type="button"
+                @click="props.formData.type = 'SSH'"
+                :class="['flex-1 px-3 py-2 border border-border text-sm font-medium focus:outline-none',
+                         props.formData.type === 'SSH' ? 'bg-primary text-white' : 'bg-background text-foreground hover:bg-border',
+                         'rounded-l-md']">
+          {{ t('connections.form.typeSsh', 'SSH') }}
+        </button>
+        <button type="button"
+                @click="props.formData.type = 'RDP'"
+                :class="['flex-1 px-3 py-2 border-t border-b border-r border-border text-sm font-medium focus:outline-none -ml-px',
+                         props.formData.type === 'RDP' ? 'bg-primary text-white' : 'bg-background text-foreground hover:bg-border']">
+          {{ t('connections.form.typeRdp', 'RDP') }}
+        </button>
+        <button type="button"
+                @click="props.formData.type = 'VNC'"
+                :class="['flex-1 px-3 py-2 border border-border text-sm font-medium focus:outline-none -ml-px',
+                         props.formData.type === 'VNC' ? 'bg-primary text-white' : 'bg-background text-foreground hover:bg-border',
+                         'rounded-r-md']">
+          {{ t('connections.form.typeVnc', 'VNC') }}
+        </button>
+      </div>
+    </div>
+    <!-- Host and Port Row -->
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+      <div class="md:col-span-2">
+        <label for="conn-host" class="block text-sm font-medium text-text-secondary mb-1">
+          {{ t('connections.form.host') }}
+          <span class="relative ml-1" @mouseenter="handleHostIconMouseEnter" @mouseleave="handleHostIconMouseLeave">
+            <i ref="hostIconRef" class="fas fa-exclamation-circle text-text-secondary cursor-help"></i>
+          </span>
+        </label>
+        <input type="text" id="conn-host" v-model="props.formData.host" required
+               class="w-full px-3 py-2 border border-border rounded-md shadow-sm bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary" />
+      </div>
+      <div>
+        <label for="conn-port" class="block text-sm font-medium text-text-secondary mb-1">{{ t('connections.form.port') }}</label>
+        <input type="number" id="conn-port" v-model.number="props.formData.port" required min="1" max="65535"
+               class="w-full px-3 py-2 border border-border rounded-md shadow-sm bg-background text-foreground focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary" />
+      </div>
+    </div>
+  </div>
+</template>