city-life-line/src/components/WaterGisPageShell.vue

<template>
  <section class="water-gis-shell" :class="{ 'is-embedded': embedded }">
    <header class="gis-header">
      <div class="gis-heading">
        <p class="eyebrow">{{ eyebrow }}</p>
        <h2>{{ title }}</h2>
        <p v-if="subtitle" class="shell-subtitle">{{ subtitle }}</p>
      </div>
      <div class="header-actions">
        <slot name="actions" />
      </div>
    </header>

    <div class="gis-layout">
      <aside class="side-panel">
        <div class="side-panel-body">
          <div class="metric-grid">
            <slot name="metrics" />
          </div>
          <div class="panel-section controls-section">
            <slot name="controls" />
          </div>
          <div class="panel-section legend-panel">
            <slot name="legend" />
          </div>
          <div class="panel-section result-section">
            <slot name="results" />
          </div>
        </div>
      </aside>

      <main class="map-panel" v-loading="loading">
        <slot name="map" />
      </main>
    </div>

    <slot name="drawer" />
  </section>
</template>

<script setup>
defineProps({
  eyebrow: { type: String, default: '' },
  title: { type: String, required: true },
  subtitle: { type: String, default: '' },
  loading: { type: Boolean, default: false },
  embedded: { type: Boolean, default: false }
})
</script>

<style scoped>
.water-gis-shell {
  min-height: 100%;
  padding: 18px;
  background: linear-gradient(180deg, #edf6ff 0%, #f5f7fb 100%);
  color: #1f3b57;
}

.water-gis-shell.is-embedded {
  min-height: auto;
  padding: 0;
  background: transparent;
}

.gis-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.eyebrow {
  margin: 0 0 3px;
  font-size: 11px;
  letter-spacing: .12em;
  color: #5c93c7;
}

.gis-header h2 {
  margin: 0;
  font-size: 22px;
  color: #173a5e;
}

.shell-subtitle {
  margin: 4px 0 0;
  font-size: 13px;
  color: #678197;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.gis-layout {
  display: grid;
  grid-template-columns: minmax(280px, 330px) minmax(0, 1fr);
  gap: 16px;
  height: calc(100vh - 132px);
  min-height: 620px;
}

.is-embedded .gis-layout {
  height: clamp(560px, calc(100vh - 300px), 760px);
}

.side-panel,
.map-panel {
  background: rgba(255, 255, 255, .94);
  border: 1px solid #dbe8f5;
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(31, 74, 121, .08);
}

.side-panel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.side-panel-body {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  overflow-y: auto;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.panel-section :deep(h3) {
  margin: 0 0 8px;
  font-size: 14px;
  color: #29567e;
}

.legend-panel {
  border-top: 1px solid #e4eef8;
  padding-top: 12px;
}

.result-section {
  flex: 1;
  min-height: 0;
}

.map-panel {
  position: relative;
  overflow: hidden;
}

@media (max-width: 1200px) {
  .gis-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .gis-layout {
    grid-template-columns: 1fr;
    height: auto;
  }

  .is-embedded .gis-layout {
    height: auto;
  }

  .side-panel {
    min-height: 480px;
  }

  .map-panel {
    height: 560px;
  }

  .header-actions :deep(.search-input),
  .header-actions :deep(.type-select) {
    width: 180px;
  }
}
</style>