create-swdg-frontend 0.2.0 → 0.2.2

package/template/scripts/test-pack.mjs

@@ -0,0 +1,101 @@
+#!/usr/bin/env node
+/**
+ * 发布物冒烟：npm pack create-swdg-frontend → 从 tarball 跑 CLI → 无 GIS 项目能 build。
+ */
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import os from 'node:os';
+import { spawn } from 'node:child_process';
+import { fileURLToPath } from 'node:url';
+
+const rootDir = path.resolve(
+  path.dirname(fileURLToPath(import.meta.url)),
+  '..'
+);
+const createDir = path.join(rootDir, 'create-swdg');
+const tmpBase = path.join(os.tmpdir(), 'swdg-pack-test');
+
+function run(cmd, args, cwd, env = process.env) {
+  return new Promise((resolve, reject) => {
+    const child = spawn(cmd, args, {
+      cwd,
+      stdio: 'inherit',
+      shell: cmd === 'pnpm' || cmd === 'npm',
+      env,
+    });
+    child.on('exit', (code) => {
+      if (code === 0) resolve();
+      else reject(new Error(`${cmd} ${args.join(' ')} exited ${code} in ${cwd}`));
+    });
+  });
+}
+
+async function readJson(filePath) {
+  return JSON.parse(await fs.readFile(filePath, 'utf8'));
+}
+
+async function main() {
+  console.log('\n▶ test:pack\n');
+
+  const pkg = await readJson(path.join(createDir, 'package.json'));
+  const version = pkg.version;
+  const packName = `${pkg.name}-${version}.tgz`;
+
+  await fs.rm(tmpBase, { recursive: true, force: true });
+  await fs.mkdir(tmpBase, { recursive: true });
+
+  console.log('  · npm pack (create-swdg-frontend)');
+  await run('npm', ['pack', '--pack-destination', tmpBase], createDir);
+
+  const tgzPath = path.join(tmpBase, packName);
+  try {
+    await fs.access(tgzPath);
+  } catch {
+    throw new Error(`expected tarball missing: ${tgzPath}`);
+  }
+
+  const workspace = path.join(tmpBase, 'workspace');
+  await fs.mkdir(workspace, { recursive: true });
+
+  console.log('  · install tarball');
+  await run('npm', ['install', tgzPath], workspace);
+
+  const cliBin = path.join(
+    workspace,
+    'node_modules',
+    pkg.name,
+    'bin/index.js'
+  );
+  try {
+    await fs.access(cliBin);
+  } catch {
+    throw new Error(`CLI bin missing in packed install: ${cliBin}`);
+  }
+
+  const appName = 'pack-smoke-app';
+  console.log('  · CLI create --no-gis');
+  await run(
+    process.execPath,
+    [cliBin, appName, '--no-gis', '--no-install', '--no-git', '--no-verify'],
+    workspace
+  );
+
+  const appDir = path.join(workspace, appName);
+  const appPkg = await readJson(path.join(appDir, 'package.json'));
+  if (appPkg.dependencies?.cesium) {
+    throw new Error('packed CLI produced project with cesium dependency');
+  }
+
+  console.log('  · generated project install + typecheck + build');
+  await run('pnpm', ['install'], appDir);
+  await run('pnpm', ['run', 'typecheck'], appDir);
+  await run('pnpm', ['run', 'build'], appDir);
+
+  await fs.rm(tmpBase, { recursive: true, force: true });
+  console.log('\n✓ test:pack passed\n');
+}
+
+main().catch((err) => {
+  console.error(`\n✗ test:pack failed: ${err.message}\n`);
+  process.exit(1);
+});

package/template/scripts/test-pipeline.mjs

@@ -6,8 +6,9 @@
  *   0. sync       — 生成 create-swdg/template（CI 全新 clone 必需）
  *   1. verify     — typecheck + eslint
  *   2. unit       — vitest
- *   3. scaffold   — 脚手架集成（无 install）
+ *   3. scaffold   — 脚手架集成（含 --no-gis 生成项目 build）
  *   4. template   — template install/typecheck/build
+ *   5. pack       — npm pack 后从 tarball 跑 CLI 并 build
  */
 import { spawn } from 'node:child_process';
 import path from 'node:path';
@@ -39,6 +40,11 @@ const stages = [
     cmd: process.execPath,
     args: ['scripts/test-template.mjs'],
   },
+  {
+    name: 'pack',
+    cmd: process.execPath,
+    args: ['scripts/test-pack.mjs'],
+  },
 ];
 
 function runStage(stage) {

package/template/scripts/test-scaffold.mjs

@@ -88,6 +88,23 @@ async function assertGisProject(dir) {
   }
 }
 
+function runInDir(cwd, cmd, args, env = process.env) {
+  return new Promise((resolve, reject) => {
+    const child = spawn(cmd, args, {
+      cwd,
+      stdio: 'inherit',
+      shell: cmd === 'pnpm',
+      env,
+    });
+    child.on('exit', (code) => {
+      if (code === 0) resolve();
+      else
+        reject(new Error(`${cmd} ${args.join(' ')} exited ${code} in ${cwd}`));
+    });
+    child.on('error', reject);
+  });
+}
+
 function runCli(cwd, args) {
   return new Promise((resolve, reject) => {
     const child = spawn(process.execPath, [cliBin, ...args], {
@@ -183,6 +200,19 @@ async function main() {
     }
   });
 
+  const buildDir = path.join(tmpBase, 'proj-no-gis-build');
+  await runCase('no-gis generated project install + typecheck + build', async () => {
+    await rmDir(buildDir);
+    await createProject(buildDir, {
+      projectName: 'swdg-no-gis-build',
+      gis: false,
+    });
+    await assertNoGisProject(buildDir);
+    await runInDir(buildDir, 'pnpm', ['install']);
+    await runInDir(buildDir, 'pnpm', ['run', 'typecheck']);
+    await runInDir(buildDir, 'pnpm', ['run', 'build']);
+  });
+
   await rmDir(tmpBase);
 
   console.log(`\n  scaffold: ${passed} passed, ${failed} failed\n`);

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

@@ -229,7 +229,7 @@ watch(
 
 .onboarding-deck--fullscreen {
   min-height: calc(100vh - 52px);
-  padding: 24px;
+  padding: var(--space-page-x);
   background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
 }
 
@@ -267,7 +267,7 @@ watch(
   flex: 1;
   display: flex;
   flex-direction: column;
-  padding: 28px 32px;
+  padding: clamp(1.25rem, 4vw, 1.75rem) clamp(1rem, 4vw, 2rem);
   border-radius: var(--shell-radius);
   background: var(--shell-surface);
   box-shadow: var(--shell-shadow);
@@ -446,4 +446,35 @@ watch(
   background: var(--shell-accent);
   transform: scale(1.15);
 }
+
+@media (width <= 47.99rem) {
+  .onboarding-deck__header {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .onboarding-deck__exit {
+    align-self: flex-end;
+  }
+
+  .onboarding-deck__footer {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .onboarding-deck__nav-btn {
+    min-width: 0;
+    width: 100%;
+  }
+
+  .onboarding-deck__dots {
+    order: -1;
+  }
+
+  .onboarding-slide__table {
+    display: block;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+}
 </style>

package/template/src/main.ts

@@ -1,9 +1,11 @@
 import { createApp } from 'vue';
 import { createPinia } from 'pinia';
 
+import './styles/tokens.css';
 import './styles/global.css';
+import './styles/responsive.css';
 import './styles/shell.css';
-import './styles/alerts.less';
+import './styles/alerts.css';
 
 import App from './App.vue';
 import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';

package/template/src/styles/alerts.css

@@ -0,0 +1,75 @@
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-out {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+.alerts-container {
+  position: fixed;
+  top: clamp(0.75rem, 3vw, 1.25rem);
+  left: 50%;
+  z-index: 9999;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.625rem;
+  width: min(100% - 2rem, 20rem);
+  transform: translateX(-50%);
+}
+
+.alert {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.625rem;
+  width: 100%;
+  padding: 0.625rem 1.25rem;
+  border-radius: 5px;
+  color: #fff;
+  font-size: clamp(0.875rem, 2.5vw, 1rem);
+  box-shadow: 0 2px 8px rgb(0 0 0 / 10%);
+  animation: fade-in 0.5s ease-out;
+}
+
+.alert div:last-child {
+  font-size: larger;
+  line-height: 100%;
+  cursor: pointer;
+  user-select: none;
+  vertical-align: middle;
+  transform: translateX(5px);
+}
+
+.alert div:last-child:hover {
+  color: #f4f4f4;
+}
+
+.alert-success {
+  background-color: #67c23a;
+}
+
+.alert-warning {
+  background-color: #e6a23c;
+}
+
+.alert-error {
+  background-color: #f56c6c;
+}
+
+.alert-info {
+  background-color: #909399;
+}

package/template/src/styles/global.css

@@ -5,7 +5,7 @@ body {
   margin: 0;
   padding: 0;
   font-family: '思源黑体', 'Microsoft YaHei', '黑体', '宋体', Arial, sans-serif;
-  font-size: 14px;
+  font-size: var(--font-size-fluid-body, 14px);
 }
 
 /* Flex 基础设置 */
@@ -167,25 +167,7 @@ body {
   height: 100%;
 }
 
-.grid-h-one-fourth {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-}
-
-.grid-h-one-third {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-}
-
-.grid-h-half {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-}
-
-.grid-h-ratio-1-2 {
-  display: grid;
-  grid-template-columns: 1fr 2fr;
-}
+/* 固定列 grid 的响应式断点见 responsive.css */
 
 .no-wrap {
   white-space: nowrap;
@@ -266,7 +248,6 @@ body {
 .common-dialog-form-item {
   display: flex;
   align-items: center;
-  width: 425px;
   height: 32px;
 }
 

package/template/src/styles/responsive.css

@@ -0,0 +1,48 @@
+/**
+ * 响应式工具类：补齐 global.css 中固定列数 grid 在小屏下的表现
+ */
+
+.grid-h-one-fourth,
+.grid-h-one-third,
+.grid-h-half,
+.grid-h-ratio-1-2 {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: 1fr;
+}
+
+@media (min-width: 40rem) {
+  .grid-h-half,
+  .grid-h-ratio-1-2 {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .grid-h-one-third {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  .grid-h-one-fourth {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (min-width: 48rem) {
+  .grid-h-one-third {
+    grid-template-columns: repeat(3, 1fr);
+  }
+
+  .grid-h-ratio-1-2 {
+    grid-template-columns: 1fr 2fr;
+  }
+}
+
+@media (min-width: 64rem) {
+  .grid-h-one-fourth {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+.common-dialog-form-item {
+  width: min(26.5rem, 100%);
+  max-width: 100%;
+}

package/template/src/styles/shell.css

@@ -18,9 +18,11 @@
 
 .shell-header {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
-  padding: 16px 28px;
+  gap: 0.75rem;
+  padding: var(--space-page-x) var(--space-page-x);
   color: #f8fafc;
   border-bottom: 1px solid rgb(255 255 255 / 8%);
   backdrop-filter: blur(8px);
@@ -34,7 +36,7 @@
 
 .shell-header__title {
   margin: 0;
-  font-size: 18px;
+  font-size: var(--font-size-fluid-title);
   font-weight: 600;
   letter-spacing: 0.02em;
 }
@@ -45,14 +47,14 @@
 }
 
 .shell-main {
-  max-width: 960px;
+  width: min(100%, var(--content-max));
   margin: 0 auto;
-  padding: 40px 24px 64px;
+  padding: var(--space-page-y) var(--space-page-x) clamp(2.5rem, 8vw, 4rem);
 }
 
 .shell-hero {
-  margin-bottom: 32px;
-  padding: 32px;
+  margin-bottom: clamp(1.25rem, 4vw, 2rem);
+  padding: clamp(1.25rem, 4vw, 2rem);
   border-radius: var(--shell-radius);
   background: var(--shell-surface);
   box-shadow: var(--shell-shadow);
@@ -60,7 +62,7 @@
 
 .shell-hero h2 {
   margin: 0 0 8px;
-  font-size: 26px;
+  font-size: clamp(1.25rem, 3vw, 1.625rem);
   font-weight: 700;
   color: var(--shell-text);
 }
@@ -81,8 +83,8 @@
 
 .shell-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
-  gap: 16px;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.25rem), 1fr));
+  gap: 1rem;
 }
 
 .shell-card {

package/template/src/styles/tokens.css

@@ -0,0 +1,16 @@
+/**
+ * 布局与设计 token（与 Tailwind 默认断点对齐，便于团队共识）
+ * 自适应优先：fluid spacing + CSS Grid/Flex，无需额外 UI 框架
+ */
+:root {
+  --bp-sm: 40rem; /* 640px */
+  --bp-md: 48rem; /* 768px */
+  --bp-lg: 64rem; /* 1024px */
+  --bp-xl: 80rem; /* 1280px */
+
+  --content-max: 60rem;
+  --space-page-x: clamp(1rem, 4vw, 1.75rem);
+  --space-page-y: clamp(1.5rem, 5vw, 2.5rem);
+  --font-size-fluid-body: clamp(0.875rem, 1.2vw, 1rem);
+  --font-size-fluid-title: clamp(1.375rem, 2.5vw, 1.625rem);
+}

package/template/vite.config.ts

@@ -67,13 +67,6 @@ export default defineConfig(({ mode }) => {
         '@interface': path.resolve(__dirname, './interface'),
       },
     },
-    css: {
-      preprocessorOptions: {
-        less: {
-          javascriptEnabled: true,
-        },
-      },
-    },
     server: {
       host: '0.0.0.0',
       port: 3000,

package/template/src/styles/alerts.less

@@ -1,85 +0,0 @@
-// 定义颜色变量
-@success-color: #67c23a;
-@warning-color: #e6a23c;
-@error-color: #f56c6c;
-@info-color: #909399;
-@text-color: #fff;
-@shadow-color: rgba(0, 0, 0, 0.1);
-
-// 基础字体大小和间距
-@font-size: 16px;
-@padding: 10px 20px;
-
-// 动画渐变定义
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
-@keyframes fadeOut {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-
-.alerts-container {
-  position: fixed;
-  top: 20px;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 9999;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 10px;
-}
-
-.alert {
-  padding: @padding;
-  color: @text-color;
-  border-radius: 5px;
-  box-shadow: 0 2px 8px @shadow-color;
-  font-size: @font-size;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-  width: 250px;
-  animation: fadeIn 0.5s ease-out;
-
-  div:last-child {
-    font-size: larger;
-    cursor: pointer;
-    user-select: none;
-    line-height: 100%;
-    vertical-align: middle;
-    transform: translateX(5px);
-
-    &:hover {
-      color: #f4f4f4;
-    }
-  }
-}
-
-.alert-success {
-  background-color: @success-color;
-}
-
-.alert-warning {
-  background-color: @warning-color;
-}
-
-.alert-error {
-  background-color: @error-color;
-}
-
-.alert-info {
-  background-color: @info-color;
-}