zh-navigation-platform/src/components/Sidebar/index.vue

<template>
  <div class="sidebar" :class="{ 'sidebar--hidden': !visible }">
    <div class="sidebar-hide-btn" @click="toggle" />

    <img
      draggable="false"
      class="sidebar-logo"
      src="@/assets/images/logo.png"
      alt="logo"
    />

    <div class="sidebar-search">
      <input
        v-model="searchKeyword"
        name="search"
        placeholder="请搜索建筑名称"
      />
      <i class="sidebar-search-icon" />
    </div>

    <el-tabs
      v-model="activeTab"
      class="sidebar-tabs"
      stretch
      @tab-change="handleTabChange"
    >
      <el-tab-pane label="区域划分" name="area">
        <el-scrollbar>
          <div v-if="!areaGroups.length" class="sidebar-empty">
            {{ searchKeyword ? "无匹配结果" : "暂无数据" }}
          </div>
          <el-collapse v-else class="sidebar-collapse">
            <el-collapse-item
              v-for="(group, idx) in areaGroups"
              :key="'area-' + group.key"
              :name="'area-' + group.key"
            >
              <template #title>
                <span class="collapse-header">
                  <span class="tag">{{ group.items.length }}</span>
                  <span class="collapse-title">{{ group.key }}</span>
                </span>
              </template>
              <template #icon="{ isActive }">
                <span class="icon" :class="{ 'icon--active': isActive }" />
              </template>
              <ul>
                <li
                  v-for="item in group.items"
                  :key="item.id"
                  :class="{ active: isItemActive(item) }"
                  @click="handleItemClick(item)"
                >
                  ·{{ item.name }}
                </li>
              </ul>
            </el-collapse-item>
          </el-collapse>
        </el-scrollbar>
      </el-tab-pane>
      <el-tab-pane label="类型划分" name="type">
        <el-scrollbar>
          <div v-if="!typeGroups.length" class="sidebar-empty">
            {{ searchKeyword ? "无匹配结果" : "暂无数据" }}
          </div>
          <el-collapse v-else class="sidebar-collapse">
            <el-collapse-item
              v-for="(group, idx) in typeGroups"
              :key="'type-' + group.key"
              :name="'type-' + group.key"
            >
              <template #title>
                <span class="collapse-header">
                  <span class="tag">{{ group.items.length }}</span>
                  <span class="collapse-title">{{ group.key }}</span>
                </span>
              </template>
              <template #icon="{ isActive }">
                <span class="icon" :class="{ 'icon--active': isActive }" />
              </template>
              <ul>
                <li
                  v-for="item in group.items"
                  :key="item.id"
                  :class="{ active: isItemActive(item) }"
                  @click="handleItemClick(item)"
                >
                  ·{{ item.name }}
                </li>
              </ul>
            </el-collapse-item>
          </el-collapse>
        </el-scrollbar>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { storeToRefs } from "pinia";
import { useSidebarStore } from "@/stores/sidebar";

const emit = defineEmits(["select"]);
const router = useRouter();
const route = useRoute();
const { visible } = storeToRefs(useSidebarStore());
const { toggle } = useSidebarStore();

const searchKeyword = ref("");
const activeTab = ref("area");
const rawData = ref([]);

onMounted(async () => {
  try {
    const res = await fetch("/data.json");
    rawData.value = await res.json();
  } catch (e) {
    console.error("加载 data.json 失败:", e);
  }
});

/** 根据搜索关键词过滤后的数据 */
const filteredData = computed(() => {
  const list = rawData.value || [];
  const kw = (searchKeyword.value || "").trim().toLowerCase();
  if (!kw) return list;
  return list.filter((item) => (item.name || "").toLowerCase().includes(kw));
});

/** 按 area 分组，保持数据顺序 */
const areaGroups = computed(() => {
  const map = new Map();
  for (const item of filteredData.value) {
    const key = item.area || "未分类";
    if (!map.has(key)) map.set(key, []);
    map.get(key).push(item);
  }
  return Array.from(map.entries()).map(([key, items]) => ({ key, items }));
});

/** 按 type 分组，保持数据顺序 */
const typeGroups = computed(() => {
  const map = new Map();
  for (const item of filteredData.value) {
    const key = item.type || "未分类";
    if (!map.has(key)) map.set(key, []);
    map.get(key).push(item);
  }
  return Array.from(map.entries()).map(([key, items]) => ({ key, items }));
});

/** 当前选中的 item id（图文模式用 id，地图模式用 name 匹配） */
const activeItemId = computed(() => {
  if (route.name === "Picture" && route.query.id) return route.query.id;
  if (route.name === "MapView" && route.query.name) {
    const found = rawData.value.find(
      (i) => (i.name || "").trim() === String(route.query.name).trim(),
    );
    return found?.id;
  }
  return null;
});

const isItemActive = (item) => item?.id === activeItemId.value;

const handleTabChange = (tab) => {
  // 可在此处理 tab 切换逻辑
};

const handleItemClick = (item) => {
  emit("select", item);
  // 图文模式页：点击 item 则显示该 item
  if (route.name === "Picture") {
    router.replace({ name: "Picture", query: { id: item.id } });
    return;
  }
  if (item.scene) {
    window.open(item.scene.trim(), "_blank");
  } else if (item.lng && item.lat) {
    router.push({
      name: "MapView",
      query: { lng: item.lng, lat: item.lat, name: item.name },
    });
  }
};
</script>

<style scoped lang="scss">
@use "@/assets/utils.scss";

.sidebar {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: utils.vh-calc(300);
  background: linear-gradient(rgba(217, 191, 157, 1), rgba(207, 172, 125, 0.8));
  backdrop-filter: blur(10px);
  transition: transform 0.3s ease;

  &--hidden {
    transform: translateX(100%);

    .sidebar-hide-btn::before {
      transform: translate(-50%, -50%) rotate(180deg);
    }
  }

  :deep(.sidebar-tabs) {
    --el-text-color-primary: #4e1a00;
    --el-font-size-base: utils.vh-calc(20);
    --el-border-color-light: #98382e;
    margin: utils.vh-calc(25) 0;
    width: 100%;
    height: 0;
    flex: 1;

    .el-tabs__item.is-active {
      font-family: "SourceHanSerifSC-Bold";
    }
    .el-tabs__nav-wrap::after {
      height: 1px;
    }
    .el-tabs__item {
      padding: 0;
    }
    .el-tabs__active-bar {
      height: utils.vh-calc(3);
    }
    .el-tab-pane {
      height: 100%;
    }
    .el-tabs__header {
      padding: 0 utils.vh-calc(15);
    }
    .el-scrollbar {
      padding: 0 utils.vh-calc(15);
      height: 100%;
    }
  }
  .sidebar-empty {
    padding: utils.vh-calc(30);
    text-align: center;
    color: #4e1a00;
    font-size: utils.vh-calc(16);
    opacity: 0.7;
  }
  :deep(.sidebar-collapse) {
    --el-fill-color-blank: transparent;
    --el-collapse-border-color: transparent;
    --el-collapse-header-text-color: #4e1a00;

    .el-collapse-item__header {
      padding-left: utils.vh-calc(5);
      height: utils.vh-calc(45);
      line-height: utils.vh-calc(45);
      min-height: utils.vh-calc(45);
      font-size: utils.vh-calc(18);
    }
    .el-collapse-item__content {
      padding-bottom: 0;
    }
    .tag {
      flex-shrink: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: utils.vh-calc(28);
      height: utils.vh-calc(18);
      padding: 0 utils.vh-calc(6);
      color: #f8d561;
      font-size: utils.vh-calc(14);
      border-radius: 100px;
      background: #98382e;
    }
    .collapse-header {
      display: flex;
      align-items: center;
      flex: 1;
      min-width: 0;
    }
    .collapse-title {
      margin-left: utils.vh-calc(8);
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .icon {
      margin-left: utils.vh-calc(12);
      width: utils.vh-calc(18);
      height: utils.vh-calc(10);
      transition: transform 0.3s ease;
      background: url("@/assets/images/icon-xia.png") no-repeat center / contain;

      &--active {
        transform: rotate(180deg);
      }
    }
    ul {
      padding: 0 utils.vh-calc(7);

      li {
        height: utils.vh-calc(40);
        line-height: utils.vh-calc(40);
        font-size: utils.vh-calc(16);
        color: #4e1a00;
        cursor: pointer;

        &:hover {
          color: #98382e;
        }
        &.active {
          color: #98382e;
          font-family: "SourceHanSerifSC-Bold";
        }
      }
    }
  }
  &-search {
    flex-shrink: 0;
    position: relative;
    display: flex;
    align-items: center;
    width: utils.vh-calc(270);
    height: utils.vh-calc(44);
    background: url("./images/search-bg.png") no-repeat center / contain;

    input {
      flex: 1;
      width: 0;
      padding: 0 utils.vh-calc(20);
      height: 100%;
      background: transparent;
      border: none;
      color: #f7e8d4;
      font-size: utils.vh-calc(18);

      &::placeholder {
        color: #f7e8d4;
      }
      &:focus {
        outline: none;
      }
    }
    i {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: utils.vh-calc(46);
      height: 100%;
      cursor: pointer;

      &::before {
        content: "";
        display: block;
        width: utils.vh-calc(24);
        height: utils.vh-calc(22);
        background: url("./images/search-icon.png") no-repeat center / contain;
      }
    }
  }
  &-logo {
    margin: utils.vh-calc(36) 0 utils.vh-calc(54);
    width: utils.vh-calc(252);
    height: utils.vh-calc(89);
  }
  &-hide-btn {
    position: absolute;
    top: 50%;
    left: utils.vh-calc(-18);
    transform: translateY(-50%);
    width: utils.vh-calc(18);
    height: utils.vh-calc(70);
    cursor: pointer;
    background: url("./images/sidebar-hide-bg.png") no-repeat center / contain;

    &::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: utils.vh-calc(11);
      height: utils.vh-calc(18);
      transform: translate(-50%, -50%);
      background: url("./images/sidebar-hide-icon.png") no-repeat center /
        contain;
    }
  }
}
</style>