yurou/src/components/DirectorySidebar.vue

<script setup lang="ts">
import {ref, computed} from "vue";
import TreeEntry from "./TreeEntry.vue";

interface DirEntry {
  name: string;
  path: string;
  is_dir: boolean;
  children?: DirEntry[];
}

const props = withDefaults(
    defineProps<{
      folderPath: string;
      entries: DirEntry[];
      currentFilePath?: string | null;
    }>(),
    {
      currentFilePath: null,
    },
);

const emit = defineEmits<{
  openFolder: [];
  toggleFolder: [path: string];
  openFile: [path: string];
  createFile: [];
  createFolder: [];
}>();

// Wrap the workspace root as a top-level tree node
const rootEntry = computed<DirEntry | null>(() => {
  if (!props.folderPath) return null;
  const name = props.folderPath.split(/[/\\]/).pop() || props.folderPath;
  return {
    name,
    path: props.folderPath,
    is_dir: true,
    children: props.entries,
  };
});

// ---- sidebar view mode ----
type ViewMode = "folder" | "search" | "setting";
const activeView = ref<ViewMode>("folder");
const expanded = ref(true);

function switchView(view: ViewMode) {
  if (activeView.value === view) {
    expanded.value = !expanded.value;
  } else {
    activeView.value = view;
    expanded.value = true;
  }
}

// ---- settings modal ----
const showSettings = ref(false);
</script>

<template>
  <aside
      :class="['flex flex-row border-r border-[#e8e4da] bg-[#f4f1eb]/80 transition-all duration-300 ease-in-out overflow-hidden shrink-0', expanded ? 'w-72' : 'w-12']"
  >
    <!-- ============ Icon bar ============ -->
    <div class="w-12 shrink-0 flex flex-col items-center gap-1 py-3">
      <!-- Folder -->
      <button
          class="px-2 py-1 cursor-pointer rounded-md transition-colors"
          :class="activeView === 'folder' ? 'text-[#bf6a3b] bg-[#ede8de]' : 'text-[#b8b3a8] hover:text-[#5c574e] hover:bg-[#ede8de]'"
          title="文件"
          @click="switchView('folder')"
      >
        <i class="ri-folder-line text-base"></i>
      </button>
      <!-- Search -->
      <button
          class="px-2 py-1 cursor-pointer rounded-md transition-colors"
          :class="activeView === 'search' ? 'text-[#bf6a3b] bg-[#ede8de]' : 'text-[#b8b3a8] hover:text-[#5c574e] hover:bg-[#ede8de]'"
          title="搜索"
          @click="switchView('search')"
      >
        <i class="ri-search-line text-base"></i>
      </button>
      <!-- ===== Settings ===== -->
      <button
          class="px-2 py-1 cursor-pointer rounded-md transition-colors mt-auto"
          :class="activeView === 'setting' ? 'text-[#bf6a3b] bg-[#ede8de]' : 'text-[#b8b3a8] hover:text-[#5c574e] hover:bg-[#ede8de]'"
          title="设置"
          @click="showSettings = true"
      >
        <i class="ri-settings-line text-sm"></i>
      </button>
    </div>

    <!-- ============ Expanded panel ============ -->
    <div v-show="expanded" class="flex-1 flex flex-col overflow-hidden border-l border-[#e8e4da]">
      <!-- ===== FOLDER VIEW ===== -->
      <div v-if="activeView === 'folder'" class="flex flex-col flex-1 overflow-hidden">
        <!-- File tree -->
        <div class="flex-1 overflow-y-auto px-2 py-2 space-y-0.5">
          <!-- Workspace root as top-level tree node -->
          <TreeEntry
              v-if="rootEntry"
              :entry="rootEntry"
              :depth="0"
              :currentFilePath="currentFilePath"
              @toggle-folder="(path: string) => emit('toggleFolder', path)"
              @open-file="(path: string) => emit('openFile', path)"
          />

          <!-- Empty state -->
          <div
              v-if="!folderPath"
              class="px-2 py-4 text-xs text-[#b8b3a8] text-center"
          >
            <p class="mb-3">暂无打开的文件夹</p>
            <button
                class="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs cursor-pointer rounded-md bg-[#fdf0e5] text-[#bf6a3b] border border-[#d4a574]/40 hover:bg-[#fdf0e5]/80 hover:text-[#bf6a3b] transition-colors"
                @click="$emit('openFolder')"
            >
              <i class="ri-folder-open-line"></i>
              打开文件夹
            </button>
          </div>
        </div>
      </div>

      <!-- ===== SEARCH VIEW ===== -->
      <div v-if="activeView === 'search'" class="flex flex-col flex-1 overflow-hidden">
        <div class="px-3 py-3">
          <div class="relative">
            <i class="ri-search-line absolute left-2.5 top-1/2 -translate-y-1/2 text-sm text-[#b8b3a8]"></i>
            <input
                class="w-full pl-8 pr-3 py-1.5 text-xs bg-[#ede8de] border border-[#e0dbcf] rounded-md text-[#38342e] outline-none focus:border-[#bf6a3b] placeholder-[#b8b3a8]"
                placeholder="搜索文件内容..."
                disabled
            />
          </div>
        </div>
        <div class="flex-1 flex items-center justify-center px-3 pb-8">
          <p class="text-xs text-[#b8b3a8] text-center leading-relaxed">
            搜索功能即将上线
          </p>
        </div>
      </div>
    </div>
  </aside>

  <!-- ===== SETTINGS MODAL ===== -->
  <Teleport to="body">
    <div
        v-if="showSettings"
        class="fixed inset-0 z-50 flex items-center justify-center bg-[#38342e]/25 backdrop-blur-sm"
        @click.self="showSettings = false"
    >
      <div class="bg-white border border-[#e0dbcf] rounded-xl shadow-2xl w-80 max-h-[70vh] overflow-y-auto">
        <div class="flex items-center justify-between px-4 py-3 border-b border-[#e8e4da]">
          <span class="text-sm font-semibold text-[#38342e]">设置</span>
          <button
              class="p-1 rounded-md text-[#8c877d] hover:text-[#38342e] hover:bg-[#e0dbcf] transition-colors"
              @click="showSettings = false"
          >
            <i class="ri-close-line text-base"></i>
          </button>
        </div>
        <div class="px-4 py-6 space-y-5">
        </div>
      </div>
    </div>
  </Teleport>
</template>