create-swdg-frontend 0.1.6 → 0.2.0

package/template/src/styles/shell.css

@@ -0,0 +1,232 @@
+:root {
+  --shell-bg: #0f172a;
+  --shell-surface: #ffffff;
+  --shell-muted: #64748b;
+  --shell-text: #0f172a;
+  --shell-accent: #2563eb;
+  --shell-accent-soft: #dbeafe;
+  --shell-border: #e2e8f0;
+  --shell-radius: 12px;
+  --shell-shadow: 0 12px 40px rgb(15 23 42 / 12%);
+}
+
+.shell-page {
+  min-height: 100vh;
+  background: linear-gradient(160deg, #0f172a 0%, #1e3a5f 45%, #0f172a 100%);
+  color: var(--shell-text);
+}
+
+.shell-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 28px;
+  color: #f8fafc;
+  border-bottom: 1px solid rgb(255 255 255 / 8%);
+  backdrop-filter: blur(8px);
+}
+
+.shell-header__brand {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.shell-header__title {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 600;
+  letter-spacing: 0.02em;
+}
+
+.shell-header__tag {
+  font-size: 12px;
+  color: #94a3b8;
+}
+
+.shell-main {
+  max-width: 960px;
+  margin: 0 auto;
+  padding: 40px 24px 64px;
+}
+
+.shell-hero {
+  margin-bottom: 32px;
+  padding: 32px;
+  border-radius: var(--shell-radius);
+  background: var(--shell-surface);
+  box-shadow: var(--shell-shadow);
+}
+
+.shell-hero h2 {
+  margin: 0 0 8px;
+  font-size: 26px;
+  font-weight: 700;
+  color: var(--shell-text);
+}
+
+.shell-hero p {
+  margin: 0;
+  line-height: 1.6;
+  color: var(--shell-muted);
+}
+
+.shell-hero code {
+  padding: 2px 8px;
+  border-radius: 6px;
+  background: var(--shell-accent-soft);
+  color: var(--shell-accent);
+  font-size: 13px;
+}
+
+.shell-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+  gap: 16px;
+}
+
+.shell-card {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 20px;
+  border-radius: var(--shell-radius);
+  background: var(--shell-surface);
+  border: 1px solid var(--shell-border);
+  box-shadow: var(--shell-shadow);
+  text-decoration: none;
+  color: inherit;
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease,
+    border-color 0.2s ease;
+}
+
+.shell-card:hover {
+  transform: translateY(-2px);
+  border-color: var(--shell-accent);
+  box-shadow: 0 16px 48px rgb(37 99 235 / 18%);
+}
+
+.shell-card__icon {
+  font-size: 28px;
+  line-height: 1;
+}
+
+.shell-card__title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.shell-card__desc {
+  margin: 0;
+  font-size: 13px;
+  color: var(--shell-muted);
+  line-height: 1.5;
+}
+
+.shell-card__arrow {
+  margin-top: auto;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--shell-accent);
+}
+
+.shell-badge {
+  display: inline-block;
+  padding: 4px 10px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 500;
+  background: #fef3c7;
+  color: #92400e;
+}
+
+.shell-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 16px;
+  border: none;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.15s ease;
+}
+
+.shell-btn--ghost {
+  background: rgb(255 255 255 / 12%);
+  color: #f8fafc;
+}
+
+.shell-btn--ghost:hover {
+  background: rgb(255 255 255 / 20%);
+}
+
+.shell-btn--primary {
+  background: var(--shell-accent);
+  color: #fff;
+}
+
+.shell-btn--primary:hover {
+  background: #1d4ed8;
+}
+
+.example-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-shrink: 0;
+  padding: 12px 20px;
+  background: var(--shell-surface);
+  border-bottom: 1px solid var(--shell-border);
+  box-shadow: 0 1px 0 rgb(15 23 42 / 4%);
+}
+
+.example-toolbar__title {
+  flex: 1;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--shell-muted);
+}
+
+.example-panel {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  min-height: calc(100vh - 52px);
+  padding: 32px 24px;
+  background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
+}
+
+.example-panel__card {
+  width: min(420px, 100%);
+  padding: 32px;
+  border-radius: var(--shell-radius);
+  background: var(--shell-surface);
+  box-shadow: var(--shell-shadow);
+  text-align: center;
+}
+
+.example-panel__card h1 {
+  margin: 12px 0 8px;
+  font-size: 22px;
+}
+
+.example-panel__counter {
+  font-size: 32px;
+  font-weight: 700;
+  color: var(--shell-accent);
+  margin: 8px 0 20px;
+}
+
+.example-panel__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  justify-content: center;
+}

package/template/src/utils/alert.ts

@@ -1,58 +1,58 @@
-import { App } from 'vue';
-
-export default {
-  install(app: App) {
-    // 创建或获取一个统一的alert容器
-    const getOrCreateAlertsContainer = () => {
-      let alertsContainer = document.querySelector('.alerts-container');
-      if (!alertsContainer) {
-        alertsContainer = document.createElement('div');
-        alertsContainer.setAttribute('class', 'alerts-container');
-        document.body.appendChild(alertsContainer);
-      }
-      return alertsContainer;
-    };
-
-    const alertMethod = (
-      message: string,
-      type: 'success' | 'warning' | 'error' | 'info',
-      duration = 3000
-    ) => {
-      const alertsContainer = getOrCreateAlertsContainer();
-      const alertContainer = document.createElement('div');
-      alertContainer.setAttribute('class', `alert alert-${type}`);
-      const alertContent = document.createElement('div');
-      alertContent.innerText = message;
-      const close = document.createElement('div');
-      close.innerText = '×';
-      const to1 = window.setTimeout(() => {
-        alertContainer.attributeStyleMap.set(
-          'animation',
-          'fadeOut 0.6s ease-out'
-        );
-        alertContainer.attributeStyleMap.set('animation-play-state', 'running');
-      }, duration - 450);
-      const to2 = window.setTimeout(() => {
-        alertsContainer.removeChild(alertContainer);
-      }, duration);
-      close.onclick = () => {
-        alertContainer.attributeStyleMap.set(
-          'animation',
-          'fadeOut 0.6s ease-out'
-        );
-        alertContainer.attributeStyleMap.set('animation-play-state', 'running');
-        window.setTimeout(() => {
-          alertsContainer.removeChild(alertContainer);
-          window.clearTimeout(to1);
-          window.clearTimeout(to2);
-        }, 450);
-      };
-      alertContainer.appendChild(alertContent);
-      alertContainer.appendChild(close);
-      alertsContainer.appendChild(alertContainer);
-    };
-
-    // 使用 app.provide 提供 alert 方法
-    app.provide('alert', alertMethod);
-  },
-};
+import { App } from 'vue';
+
+export default {
+  install(app: App) {
+    // 创建或获取一个统一的alert容器
+    const getOrCreateAlertsContainer = () => {
+      let alertsContainer = document.querySelector('.alerts-container');
+      if (!alertsContainer) {
+        alertsContainer = document.createElement('div');
+        alertsContainer.setAttribute('class', 'alerts-container');
+        document.body.appendChild(alertsContainer);
+      }
+      return alertsContainer;
+    };
+
+    const alertMethod = (
+      message: string,
+      type: 'success' | 'warning' | 'error' | 'info',
+      duration = 3000
+    ) => {
+      const alertsContainer = getOrCreateAlertsContainer();
+      const alertContainer = document.createElement('div');
+      alertContainer.setAttribute('class', `alert alert-${type}`);
+      const alertContent = document.createElement('div');
+      alertContent.innerText = message;
+      const close = document.createElement('div');
+      close.innerText = '×';
+      const to1 = window.setTimeout(() => {
+        alertContainer.attributeStyleMap.set(
+          'animation',
+          'fadeOut 0.6s ease-out'
+        );
+        alertContainer.attributeStyleMap.set('animation-play-state', 'running');
+      }, duration - 450);
+      const to2 = window.setTimeout(() => {
+        alertsContainer.removeChild(alertContainer);
+      }, duration);
+      close.onclick = () => {
+        alertContainer.attributeStyleMap.set(
+          'animation',
+          'fadeOut 0.6s ease-out'
+        );
+        alertContainer.attributeStyleMap.set('animation-play-state', 'running');
+        window.setTimeout(() => {
+          alertsContainer.removeChild(alertContainer);
+          window.clearTimeout(to1);
+          window.clearTimeout(to2);
+        }, 450);
+      };
+      alertContainer.appendChild(alertContent);
+      alertContainer.appendChild(close);
+      alertsContainer.appendChild(alertContainer);
+    };
+
+    // 使用 app.provide 提供 alert 方法
+    app.provide('alert', alertMethod);
+  },
+};

package/template/src/utils/axios-middleware.js

@@ -0,0 +1,180 @@
+/**
+ * @file axios-middleware.js
+ * @description 该模块为 Axios 提供设置全局请求和响应拦截器的工具。
+ * 主要功能包括：
+ * - 缓存机制：减少重复请求，提高性能；
+ * - 错误处理：包括业务逻辑错误和网络错误的统一处理；
+ * - 基于令牌的身份验证：在请求中自动附加身份验证信息。
+ * @author inupedia
+ */
+
+import axios from 'axios';
+import { useAuthStore } from '@/stores/authStore';
+
+let vueRouter;
+
+let globalReqInterceptor = null;
+let globalRespInterceptor = null;
+
+const TTL_CACHE_PERIOD = 500; // 默认0.5秒
+
+const requestCache = new Map();
+
+const generateCacheKey = (config) => {
+  const base = config.url;
+  if (config.method === 'post') {
+    return `${base}-${JSON.stringify(config.data)}`;
+  } else if (config.method === 'get' && config.params) {
+    return `${base}-${JSON.stringify(config.params)}`;
+  }
+  return base;
+};
+
+const setCache = (key, data, ttl = TTL_CACHE_PERIOD) => {
+  const existingCache = requestCache.get(key);
+
+  if (existingCache && existingCache.expiry > Date.now()) {
+    return;
+  }
+
+  const expiry = Date.now() + ttl;
+  requestCache.set(key, { data, expiry });
+};
+
+const getCache = (key) => {
+  const cached = requestCache.get(key);
+  if (cached && cached.expiry > Date.now()) {
+    return cached.data;
+  }
+  requestCache.delete(key);
+  return null;
+};
+
+const extractApiPath = (url) => {
+  const match = url.match(/\/v2\/(.*)/);
+  return match ? match[1] : 'Unknown API';
+};
+
+const _handleBusinessError = (response) => {
+  if (response.data.code === 0) {
+    const apiPath = extractApiPath(response.config.url);
+    if (process.env.NODE_ENV === 'development') {
+      alert(`接口错误: ${apiPath}`);
+    }
+  }
+};
+
+const handleError = (error) => {
+  if (window == undefined) {
+    //console.error('代码在非浏览器环境中运行，无法访问 window 对象');
+    alert('浏览器版本过低，请升级浏览器后访问');
+    return Promise.reject(new Error('浏览器版本过低，请升级浏览器后访问'));
+  }
+  if (!error?.response || error.isOffline || error.code == 'ERR_NETWORK') {
+    //alert('网络错误');
+    return Promise.reject(new Error('网络错误'));
+  }
+  const authStore = useAuthStore();
+  if (error.response?.status == 401 && !window.hasShownUnauthorizedAlert) {
+    alert('您的登录信息已过期，请重新登录');
+    authStore.clearToken();
+    window.hasShownUnauthorizedAlert = true; // 设置标志为true，表示已经弹出过提示
+    vueRouter.push('/login');
+  } else if (error.response?.status == 403) {
+    alert('您没有权限访问该资源');
+  } else if (error.response?.status == 500) {
+    //alert('服务器内部错误');
+  } else if (error.response?.status == 400) {
+    const errorMessage = error.response.data?.message || '参数错误';
+    alert(errorMessage);
+  }
+  return Promise.reject(error);
+};
+
+const checkOnlineStatus = () => {
+  return navigator.onLine;
+};
+
+const setXTokenInterceptor = (token) => {
+  // 移除已存在的拦截器
+  if (globalReqInterceptor !== null) {
+    axios.interceptors.request.eject(globalReqInterceptor);
+  }
+  if (globalRespInterceptor !== null) {
+    axios.interceptors.response.eject(globalRespInterceptor);
+  }
+
+  // 设置新的请求拦截器
+  globalReqInterceptor = axios.interceptors.request.use(
+    (config) => {
+      if (!checkOnlineStatus()) {
+        return Promise.reject(new Error('网络连接不可用，请检查您的网络设置'));
+      }
+
+      if (!token) {
+        return config;
+      }
+
+      config.headers['X-APP-ID'] = 'selectsys';
+      config.headers['X-TOKEN'] = token;
+
+      const cacheKey = generateCacheKey(config);
+      const cachedData = getCache(cacheKey);
+
+      if (cachedData && config.method.toLowerCase() === 'get') {
+        config.adapter = () =>
+          Promise.resolve({
+            data: cachedData.data,
+            status: cachedData.status,
+            statusText: cachedData.statusText,
+            headers: cachedData.headers,
+            config,
+            request: cachedData.request,
+          });
+      }
+
+      return config;
+    },
+    (error) => handleError(error)
+  );
+
+  // 设置新的响应拦截器
+  globalRespInterceptor = axios.interceptors.response.use(
+    (response) => {
+      //handleBusinessError(response);
+
+      // 只缓存GET请求的响应数据
+      if (response.config.method.toLowerCase() === 'get') {
+        const cacheKey = generateCacheKey(response.config);
+        setCache(cacheKey, {
+          data: response.data,
+          status: response.status,
+          statusText: response.statusText,
+          headers: response.headers,
+          config: response.config,
+          request: response.request,
+        });
+      }
+
+      return response;
+    },
+    (error) => handleError(error)
+  );
+};
+
+export const setInterceptorVueRouter = (router) => {
+  if (router) {
+    console.log('拦截器router设置成功');
+    vueRouter = router;
+  } else {
+    console.warn('拦截器router设置失败，自动跳转功能不可用');
+  }
+};
+
+export const initAxiosInterceptors = (token) => {
+  if (token) {
+    console.log('拦截器token设置成功');
+    setXTokenInterceptor(token);
+  }
+  window.hasShownUnauthorizedAlert = false;
+};

package/template/src/utils/cesium/index.ts

@@ -0,0 +1,71 @@
+import {
+  EllipsoidTerrainProvider,
+  Ion,
+  OpenStreetMapImageryProvider,
+  Viewer,
+  type ImageryProvider,
+} from 'cesium';
+import 'cesium/Build/Cesium/Widgets/widgets.css';
+
+let configured = false;
+
+/** Apply ion token when provided (optional; default map does not require Ion). */
+export function configureCesium(): void {
+  if (configured) return;
+
+  const token = import.meta.env.VITE_CESIUM_ION_ACCESS_TOKEN;
+  if (token) {
+    Ion.defaultAccessToken = token;
+  }
+
+  configured = true;
+}
+
+/** OpenStreetMap 栅格底图（开源、免费，无需 Ion token）。 */
+export function createOsmImageryProvider(): ImageryProvider {
+  return new OpenStreetMapImageryProvider({
+    url: 'https://tile.openstreetmap.org/',
+  });
+}
+
+const defaultUiOptions: Viewer.ConstructorOptions = {
+  animation: false,
+  timeline: false,
+  baseLayerPicker: false,
+  geocoder: false,
+  homeButton: false,
+  sceneModePicker: false,
+  navigationHelpButton: false,
+  fullscreenButton: false,
+  // 不加载 Ion 默认影像（无 token 时易出现 InvalidStateError: image decode）
+  baseLayer: false,
+  terrainProvider: new EllipsoidTerrainProvider(),
+};
+
+export function createViewer(
+  container: HTMLElement | string,
+  options?: Viewer.ConstructorOptions
+): Viewer {
+  configureCesium();
+
+  const { baseLayer, ...rest } = options ?? {};
+  const useCustomBaseLayer = baseLayer !== undefined && baseLayer !== false;
+
+  const viewer = new Viewer(container, {
+    ...defaultUiOptions,
+    ...rest,
+    baseLayer: useCustomBaseLayer ? baseLayer : false,
+  });
+
+  if (!useCustomBaseLayer) {
+    viewer.imageryLayers.removeAll();
+    viewer.imageryLayers.addImageryProvider(createOsmImageryProvider());
+  }
+
+  return viewer;
+}
+
+export function destroyViewer(viewer: Viewer | null | undefined): void {
+  if (!viewer || viewer.isDestroyed()) return;
+  viewer.destroy();
+}

package/template/src/utils/components.ts

@@ -1,21 +1,21 @@
-import { App } from 'vue';
-
-export default {
-  install(app: App) {
-    const components = import.meta.glob('../components/**/*.vue');
-
-    for (const path in components) {
-      if (Object.prototype.hasOwnProperty.call(components, path)) {
-        const componentName = path
-          .split('/')
-          .slice(2) // 去掉 `../components/`
-          .join('/')
-          .replace('.vue', '');
-
-        components[path]().then((module: any) => {
-          app.component(componentName, module.default);
-        });
-      }
-    }
-  },
-};
+import { App } from 'vue';
+
+export default {
+  install(app: App) {
+    const components = import.meta.glob('../components/**/*.vue');
+
+    for (const path in components) {
+      if (Object.prototype.hasOwnProperty.call(components, path)) {
+        const componentName = path
+          .split('/')
+          .slice(2) // 去掉 `../components/`
+          .join('/')
+          .replace('.vue', '');
+
+        components[path]().then((module: any) => {
+          app.component(componentName, module.default);
+        });
+      }
+    }
+  },
+};

package/template/src/utils/composables/useAlert.ts

@@ -1,14 +1,14 @@
-// src/composables/useAlert.ts
-import { inject } from 'vue';
-
-export const useAlert = () => {
-  const alert = inject('alert') as (
-    message: string,
-    type: 'success' | 'warning' | 'error' | 'info',
-    duration?: number
-  ) => void;
-  if (!alert) {
-    throw new Error('No alert provided!');
-  }
-  return alert;
-};
+// src/composables/useAlert.ts
+import { inject } from 'vue';
+
+export const useAlert = () => {
+  const alert = inject('alert') as (
+    message: string,
+    type: 'success' | 'warning' | 'error' | 'info',
+    duration?: number
+  ) => void;
+  if (!alert) {
+    throw new Error('No alert provided!');
+  }
+  return alert;
+};

package/template/src/utils/composables/useFeatureGis.ts

@@ -0,0 +1,24 @@
+import { computed } from 'vue';
+
+/** 纯函数，便于单测 */
+export function resolveFeatureGis(
+  flag: string | undefined,
+  isDev: boolean
+): boolean {
+  if (flag === 'true') return true;
+  if (flag === 'false') return false;
+  return isDev;
+}
+
+/**
+ * GIS 是否可用：
+ * - 显式 VITE_FEATURE_GIS=true / false
+ * - 开发环境未配置时默认 true（模板仓库自带 Cesium，避免漏配 .env）
+ */
+export function useFeatureGis() {
+  const hasGis = computed(() =>
+    resolveFeatureGis(import.meta.env.VITE_FEATURE_GIS, import.meta.env.DEV)
+  );
+
+  return { hasGis };
+}

package/template/src/utils/http.ts

@@ -0,0 +1,5 @@
+import axios from 'axios';
+
+const http = axios.create();
+
+export default http;