update

2025-04-16 19:17:44 +08:00
parent 679d38f502
commit 716d84463a
11 changed files with 1080 additions and 286 deletions
@@ -0,0 +1,157 @@
+<script setup lang="ts">
+import type { PropType } from 'vue';
+import { useI18n } from 'vue-i18n';
+import type { EditorTab } from '../stores/fileEditor.store'; // 导入 EditorTab 类型
+
+defineProps({
+  tabs: {
+    type: Array as PropType<EditorTab[]>,
+    required: true,
+  },
+  activeTabId: {
+    type: String as PropType<string | null>,
+    default: null,
+  },
+});
+
+const emit = defineEmits<{
+  (e: 'activate-tab', tabId: string): void;
+  (e: 'close-tab', tabId: string): void;
+}>();
+
+const { t } = useI18n();
+
+const handleActivate = (tabId: string) => {
+  emit('activate-tab', tabId);
+};
+
+const handleClose = (event: MouseEvent, tabId: string) => {
+  event.stopPropagation(); // 防止触发 activateTab
+  emit('close-tab', tabId);
+};
+</script>
+
+<template>
+  <div class="file-editor-tabs">
+    <div
+      v-for="tab in tabs"
+      :key="tab.id"
+      class="tab-item"
+      :class="{ active: tab.id === activeTabId }"
+      @click="handleActivate(tab.id)"
+      :title="tab.filePath"
+    >
+      <span class="tab-filename">{{ tab.filename }}</span>
+      <span v-if="tab.isModified" class="modified-indicator">*</span>
+      <button
+        class="close-tab-btn"
+        @click.stop="handleClose($event, tab.id)"
+        :title="t('fileManager.actions.closeTab')"
+      >
+        ×
+      </button>
+    </div>
+    <div v-if="tabs.length === 0" class="no-tabs-placeholder">
+      <!-- 可以留空或添加提示 -->
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.file-editor-tabs {
+  display: flex;
+  flex-wrap: nowrap; /* 防止标签换行 */
+  overflow-x: auto; /* 水平滚动 */
+  background-color: #252526; /* VSCode 风格的标签背景 */
+  border-bottom: 1px solid #3f3f46; /* 分隔线 */
+  flex-shrink: 0; /* 防止标签栏被压缩 */
+  scrollbar-width: thin; /* Firefox */
+  scrollbar-color: #555 #252526; /* Firefox */
+}
+/* Webkit 滚动条样式 */
+.file-editor-tabs::-webkit-scrollbar {
+  height: 4px; /* 滚动条高度 */
+}
+.file-editor-tabs::-webkit-scrollbar-track {
+  background: #252526;
+}
+.file-editor-tabs::-webkit-scrollbar-thumb {
+  background-color: #555;
+  border-radius: 2px;
+}
+.file-editor-tabs::-webkit-scrollbar-thumb:hover {
+  background-color: #666;
+}
+
+
+.tab-item {
+  display: flex;
+  align-items: center;
+  padding: 6px 10px 6px 12px; /* 调整内边距 */
+  cursor: pointer;
+  border-right: 1px solid #3f3f46; /* 标签分隔线 */
+  color: #cccccc; /* 未激活标签颜色 */
+  background-color: #2d2d2d; /* 未激活标签背景 */
+  white-space: nowrap; /* 防止文件名换行 */
+  font-size: 0.85em;
+  position: relative; /* 用于关闭按钮定位 */
+  transition: background-color 0.1s ease-in-out;
+}
+
+.tab-item:hover {
+  background-color: #3e3e42; /* 悬停背景 */
+}
+
+.tab-item.active {
+  background-color: #1e1e1e; /* 激活标签背景 (编辑器背景色) */
+  color: #ffffff; /* 激活标签文字颜色 */
+  border-bottom: 1px solid #1e1e1e; /* 覆盖下边框，使其看起来连接内容 */
+  margin-bottom: -1px; /* 轻微上移以覆盖边框 */
+}
+
+.tab-filename {
+  margin-right: 4px;
+  max-width: 150px; /* 限制文件名最大宽度 */
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.modified-indicator {
+  color: #cccccc; /* 修改指示器颜色 */
+  margin-left: 2px;
+  margin-right: 4px; /* 与关闭按钮保持距离 */
+  font-weight: normal;
+}
+.tab-item.active .modified-indicator {
+    color: #ffffff; /* 激活标签的修改指示器颜色 */
+}
+
+
+.close-tab-btn {
+  background: none;
+  border: none;
+  color: #cccccc;
+  font-size: 1.1em; /* 调整大小 */
+  line-height: 1;
+  padding: 0 4px;
+  margin-left: 4px;
+  border-radius: 3px;
+  opacity: 0.6; /* 默认稍透明 */
+  transition: opacity 0.1s ease-in-out, background-color 0.1s ease-in-out;
+}
+
+.tab-item:hover .close-tab-btn,
+.tab-item.active .close-tab-btn {
+    opacity: 1; /* 悬停或激活时完全显示 */
+}
+
+.close-tab-btn:hover {
+  background-color: rgba(255, 255, 255, 0.15); /* 悬停背景 */
+  color: #ffffff;
+}
+
+.no-tabs-placeholder {
+    flex-grow: 1; /* 占据剩余空间 */
+    /* 可以添加样式 */
+}
+</style>