create-swdg-frontend 0.1.7 → 0.2.0

package/template/src/components/Body/index.vue

@@ -1,50 +1,80 @@
 <template>
-  <div class="body-wrapper">I am body</div>
-  <button id="body-button" @click="handleClick">go to test page</button>
-  <button id="body-button-inc" @click="handleClickInc">+1</button>
-</template>
-<script setup lang="ts">
-import { useRouter } from 'vue-router';
-import { useCounterStore } from '@stores/useCounter';
+  <main class="shell-main">
+    <OnboardingDeck />
+
+    <section v-if="showDevLinks" class="shell-examples">
+      <h3 class="shell-examples__title">开发示例</h3>
+      <div class="shell-grid">
+        <router-link class="shell-card" to="/examples/guide">
+          <span class="shell-card__icon">📖</span>
+          <h3 class="shell-card__title">全屏阅读指南</h3>
+          <p class="shell-card__desc">PPT 式翻页，适合 onboarding 演示。</p>
+          <span class="shell-card__arrow">全屏打开 →</span>
+        </router-link>
 
-const counter = useCounterStore();
-const router = useRouter();
+        <router-link class="shell-card" to="/examples/test">
+          <span class="shell-card__icon">🧪</span>
+          <h3 class="shell-card__title">Store / Alert</h3>
+          <p class="shell-card__desc">Pinia 计数、全局 Alert、路由返回首页。</p>
+          <span class="shell-card__arrow">打开示例 →</span>
+        </router-link>
 
-const handleClick = () => {
-  router.push('/test');
-};
+        <router-link v-if="hasGis" class="shell-card" to="/examples/cesium">
+          <span class="shell-card__icon">🌍</span>
+          <h3 class="shell-card__title">Cesium 三维地图</h3>
+          <p class="shell-card__desc">
+            OpenStreetMap 底图，npm 集成 Workers / Assets。
+          </p>
+          <span class="shell-card__arrow">打开地图 →</span>
+        </router-link>
+
+        <div v-else class="shell-card shell-card--disabled">
+          <span class="shell-card__icon">🌍</span>
+          <h3 class="shell-card__title">Cesium（未启用）</h3>
+          <p class="shell-card__desc">
+            在 <code>.env</code> 设置 <code>VITE_FEATURE_GIS=true</code> 后重启
+            dev。
+          </p>
+        </div>
+      </div>
+    </section>
+  </main>
+</template>
 
-const handleClickInc = () => {
-  counter.inc();
-};
+<script setup lang="ts">
+import OnboardingDeck from '@components/OnboardingDeck/index.vue';
+import { useFeatureGis } from '@composables/useFeatureGis';
+
+const showDevLinks = import.meta.env.DEV;
+const { hasGis } = useFeatureGis();
 </script>
 
 <style scoped>
-#body-button-test {
-  margin-top: 20px;
-  padding: 10px 20px;
-  border-radius: 5px;
-  border: 1px solid #ccc;
-  background-color: #f0f0f0;
-  color: #333;
-  cursor: pointer;
+.shell-examples {
+  margin-top: 28px;
+}
+
+.shell-examples__title {
+  margin: 0 0 14px;
+  font-size: 15px;
+  font-weight: 600;
+  color: #94a3b8;
 }
 
-#body-button-inc {
-  margin-top: 20px;
-  padding: 10px 20px;
-  border-radius: 5px;
-  border: 1px solid #ccc;
-  background-color: #f0f0f0;
-  color: #333;
-  cursor: pointer;
+.shell-card--disabled {
+  opacity: 0.72;
+  cursor: default;
+  pointer-events: none;
+  border-style: dashed;
 }
 
-#body-button-test:hover {
-  background-color: #e0e0e0;
+.shell-card--disabled:hover {
+  transform: none;
+  box-shadow: var(--shell-shadow);
+  border-color: var(--shell-border);
 }
 
-#body-button-inc:hover {
-  background-color: #e0e0e0;
+.shell-card--disabled code {
+  font-size: 12px;
 }
 </style>

package/template/src/components/CesiumViewer/index.vue

@@ -0,0 +1,36 @@
+<template>
+  <div ref="containerRef" class="cesium-viewer-host" />
+</template>
+
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref, shallowRef } from 'vue';
+import type { Viewer } from 'cesium';
+import { createViewer, destroyViewer } from '@utils/cesium';
+
+const props = defineProps<{
+  options?: Viewer.ConstructorOptions;
+}>();
+
+const containerRef = ref<HTMLDivElement | null>(null);
+const viewer = shallowRef<Viewer | null>(null);
+
+onMounted(() => {
+  if (!containerRef.value) return;
+  viewer.value = createViewer(containerRef.value, props.options);
+});
+
+onBeforeUnmount(() => {
+  destroyViewer(viewer.value);
+  viewer.value = null;
+});
+
+defineExpose({ viewer });
+</script>
+
+<style scoped>
+.cesium-viewer-host {
+  width: 100%;
+  height: 100%;
+  min-height: 320px;
+}
+</style>

package/template/src/components/Header/index.vue

@@ -1,8 +1,19 @@
 <template>
-  <div class="header-wrapper">
-    <h1>this is header</h1>
-  </div>
+  <header class="shell-header">
+    <div class="shell-header__brand">
+      <h1 class="shell-header__title">SWDG 前端模板</h1>
+      <span class="shell-header__tag">Vue 3 · Vite · TypeScript</span>
+    </div>
+    <router-link v-if="showHomeLink" class="shell-btn shell-btn--ghost" to="/">
+      首页
+    </router-link>
+  </header>
 </template>
-<script setup lang="ts"></script>
 
-<style scoped></style>
+<script setup lang="ts">
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+
+const route = useRoute();
+const showHomeLink = computed(() => route.path !== '/' && route.path !== '');
+</script>

package/template/src/components/OnboardingDeck/index.vue

@@ -0,0 +1,449 @@
+<template>
+  <section
+    ref="deckRef"
+    class="onboarding-deck"
+    :class="{ 'onboarding-deck--fullscreen': fullscreen }"
+    tabindex="0"
+    @keydown="onKeydown"
+  >
+    <header v-if="showHeader" class="onboarding-deck__header">
+      <div>
+        <span class="shell-badge">使用指南</span>
+        <p class="onboarding-deck__progress-text">
+          第 {{ current + 1 }} / {{ total }} 页 · 方向键翻页
+        </p>
+      </div>
+      <button
+        v-if="fullscreen"
+        type="button"
+        class="shell-btn shell-btn--ghost onboarding-deck__exit"
+        @click="goHome"
+      >
+        退出全屏
+      </button>
+    </header>
+
+    <div :key="currentSlide.id" class="onboarding-deck__stage">
+      <article class="onboarding-slide">
+        <p v-if="currentSlide.tagline" class="onboarding-slide__tagline">
+          {{ currentSlide.tagline }}
+        </p>
+        <h2 class="onboarding-slide__title">{{ currentSlide.title }}</h2>
+
+        <div class="onboarding-slide__body">
+          <template v-for="(block, index) in currentSlide.blocks" :key="index">
+            <p v-if="block.type === 'p'" class="onboarding-slide__p">
+              {{ block.text }}
+            </p>
+
+            <ul v-else-if="block.type === 'ul'" class="onboarding-slide__ul">
+              <li v-for="(item, i) in block.items" :key="i">{{ item }}</li>
+            </ul>
+
+            <pre
+              v-else-if="block.type === 'code'"
+              class="onboarding-slide__code"
+            ><code>{{ block.text }}</code></pre>
+
+            <div
+              v-else-if="block.type === 'table'"
+              class="onboarding-slide__table-wrap"
+            >
+              <table class="onboarding-slide__table">
+                <thead>
+                  <tr>
+                    <th v-for="(h, hi) in block.headers" :key="hi">{{ h }}</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr v-for="(row, ri) in block.rows" :key="ri">
+                    <td v-for="(cell, ci) in row" :key="ci">{{ cell }}</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+
+            <div
+              v-else-if="block.type === 'links'"
+              class="onboarding-slide__links"
+            >
+              <router-link
+                v-for="(link, li) in block.items"
+                :key="li"
+                class="onboarding-slide__link"
+                :to="link.to"
+              >
+                {{ link.label }}
+              </router-link>
+            </div>
+          </template>
+        </div>
+      </article>
+    </div>
+
+    <footer class="onboarding-deck__footer">
+      <button
+        type="button"
+        class="shell-btn shell-btn--ghost onboarding-deck__nav-btn"
+        :disabled="current === 0"
+        aria-label="上一页"
+        @click="prev"
+      >
+        ← 上一页
+      </button>
+
+      <div class="onboarding-deck__dots" role="tablist">
+        <button
+          v-for="(slide, index) in slides"
+          :key="slide.id"
+          type="button"
+          class="onboarding-deck__dot"
+          :class="{ 'onboarding-deck__dot--active': index === current }"
+          :aria-label="`第 ${index + 1} 页`"
+          :aria-selected="index === current"
+          @click="goTo(index)"
+        />
+      </div>
+
+      <button
+        v-if="current < total - 1"
+        type="button"
+        class="shell-btn shell-btn--primary onboarding-deck__nav-btn"
+        @click="next"
+      >
+        下一页 →
+      </button>
+      <router-link
+        v-else
+        class="shell-btn shell-btn--primary onboarding-deck__nav-btn onboarding-deck__nav-btn--link"
+        to="/"
+      >
+        完成
+      </router-link>
+    </footer>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import {
+  onboardingSlides,
+  type OnboardingSlide,
+} from '@/data/onboardingSlides';
+
+const props = withDefaults(
+  defineProps<{
+    slides?: OnboardingSlide[];
+    fullscreen?: boolean;
+    showHeader?: boolean;
+    initialSlide?: number;
+  }>(),
+  {
+    slides: () => onboardingSlides,
+    fullscreen: false,
+    showHeader: true,
+    initialSlide: 0,
+  }
+);
+
+const route = useRoute();
+const router = useRouter();
+const deckRef = ref<HTMLElement | null>(null);
+const current = ref(Math.min(props.initialSlide, props.slides.length - 1));
+
+const total = computed(() => props.slides.length);
+const currentSlide = computed(
+  () => props.slides[current.value] ?? props.slides[0]
+);
+
+function syncFromQuery() {
+  const raw = route.query.slide;
+  const n = typeof raw === 'string' ? parseInt(raw, 10) : NaN;
+  if (!Number.isNaN(n) && n >= 0 && n < props.slides.length) {
+    current.value = n;
+  }
+}
+
+function updateQuery() {
+  if (!props.fullscreen) return;
+  const slide = String(current.value);
+  if (route.query.slide !== slide) {
+    router.replace({ query: { ...route.query, slide } });
+  }
+}
+
+function prev() {
+  if (current.value > 0) current.value -= 1;
+}
+
+function next() {
+  if (current.value < total.value - 1) current.value += 1;
+}
+
+function goTo(index: number) {
+  current.value = index;
+}
+
+function goHome() {
+  router.push('/');
+}
+
+function onKeydown(e: KeyboardEvent) {
+  if (e.key === 'ArrowLeft' || e.key === 'PageUp') {
+    e.preventDefault();
+    prev();
+  } else if (e.key === 'ArrowRight' || e.key === 'PageDown' || e.key === ' ') {
+    e.preventDefault();
+    next();
+  } else if (e.key === 'Home') {
+    e.preventDefault();
+    goTo(0);
+  } else if (e.key === 'End') {
+    e.preventDefault();
+    goTo(total.value - 1);
+  }
+}
+
+watch(current, updateQuery);
+
+onMounted(() => {
+  syncFromQuery();
+  updateQuery();
+  deckRef.value?.focus();
+});
+
+watch(
+  () => route.query.slide,
+  () => syncFromQuery()
+);
+</script>
+
+<style scoped>
+.onboarding-deck {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  outline: none;
+}
+
+.onboarding-deck--fullscreen {
+  min-height: calc(100vh - 52px);
+  padding: 24px;
+  background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
+}
+
+.onboarding-deck__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.onboarding-deck__progress-text {
+  margin: 8px 0 0;
+  font-size: 13px;
+  color: var(--shell-muted);
+}
+
+.onboarding-deck__exit {
+  background: #f1f5f9 !important;
+  color: var(--shell-text) !important;
+  flex-shrink: 0;
+}
+
+.onboarding-deck__stage {
+  flex: 1;
+  display: flex;
+  align-items: stretch;
+  min-height: 320px;
+}
+
+.onboarding-deck--fullscreen .onboarding-deck__stage {
+  min-height: min(520px, calc(100vh - 200px));
+}
+
+.onboarding-slide {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 28px 32px;
+  border-radius: var(--shell-radius);
+  background: var(--shell-surface);
+  box-shadow: var(--shell-shadow);
+  animation: slide-in 0.28s ease-out;
+}
+
+@keyframes slide-in {
+  from {
+    opacity: 0;
+    transform: translateX(12px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+.onboarding-slide__tagline {
+  margin: 0 0 4px;
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--shell-accent);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.onboarding-slide__title {
+  margin: 0 0 20px;
+  font-size: clamp(22px, 4vw, 32px);
+  font-weight: 700;
+  color: var(--shell-text);
+  line-height: 1.2;
+}
+
+.onboarding-slide__body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  overflow: auto;
+}
+
+.onboarding-slide__p {
+  margin: 0;
+  line-height: 1.65;
+  color: #334155;
+}
+
+.onboarding-slide__ul {
+  margin: 0;
+  padding-left: 1.25rem;
+  line-height: 1.75;
+  color: #334155;
+}
+
+.onboarding-slide__code {
+  margin: 0;
+  padding: 16px 18px;
+  border-radius: 10px;
+  background: #0f172a;
+  color: #e2e8f0;
+  font-size: 13px;
+  line-height: 1.55;
+  overflow-x: auto;
+  white-space: pre-wrap;
+}
+
+.onboarding-slide__table-wrap {
+  overflow-x: auto;
+}
+
+.onboarding-slide__table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 14px;
+}
+
+.onboarding-slide__table th,
+.onboarding-slide__table td {
+  padding: 10px 12px;
+  text-align: left;
+  border-bottom: 1px solid var(--shell-border);
+}
+
+.onboarding-slide__table th {
+  font-weight: 600;
+  color: var(--shell-muted);
+  background: #f8fafc;
+}
+
+.onboarding-slide__table td:first-child {
+  font-family: ui-monospace, monospace;
+  font-size: 13px;
+  color: #0f172a;
+}
+
+.onboarding-slide__links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  margin-top: 4px;
+}
+
+.onboarding-slide__link {
+  font-weight: 500;
+  color: var(--shell-accent);
+  text-decoration: none;
+}
+
+.onboarding-slide__link:hover {
+  text-decoration: underline;
+}
+
+.onboarding-deck__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.onboarding-deck__nav-btn {
+  min-width: 108px;
+  justify-content: center;
+}
+
+.onboarding-deck__nav-btn--link {
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+}
+
+.onboarding-deck__nav-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.onboarding-deck:not(.onboarding-deck--fullscreen)
+  .onboarding-deck__nav-btn.shell-btn--ghost {
+  background: #f1f5f9;
+  color: var(--shell-text);
+}
+
+.onboarding-deck:not(.onboarding-deck--fullscreen)
+  .onboarding-deck__nav-btn.shell-btn--ghost:hover:not(:disabled) {
+  background: #e2e8f0;
+}
+
+.onboarding-deck__dots {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 8px;
+  flex: 1;
+}
+
+.onboarding-deck__dot {
+  width: 10px;
+  height: 10px;
+  padding: 0;
+  border: none;
+  border-radius: 999px;
+  background: #cbd5e1;
+  cursor: pointer;
+  transition:
+    transform 0.15s ease,
+    background 0.15s ease;
+}
+
+.onboarding-deck__dot:hover {
+  background: #94a3b8;
+}
+
+.onboarding-deck__dot--active {
+  background: var(--shell-accent);
+  transform: scale(1.15);
+}
+</style>