create-swdg-frontend 0.1.0

package/template/src/styles/global.css

@@ -0,0 +1,326 @@
+html,
+body {
+  height: 100%;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  font-family: '思源黑体', 'Microsoft YaHei', '黑体', '宋体', Arial, sans-serif;
+  font-size: 14px;
+}
+
+/* Flex 基础设置 */
+.flex-h,
+.flex-h-right,
+.flex-h-left-center,
+.flex-h-top,
+.flex-h-top-wrap,
+.flex-h-space,
+.flex-h-wrap,
+.flex-h-center {
+  display: flex;
+  flex-direction: row;
+}
+
+.flex-v,
+.flex-v-center {
+  display: flex;
+  flex-direction: column;
+}
+
+.flex-v-left {
+  display: flex;
+  flex-flow: column nowrap;
+  place-content: left left;
+  align-items: left;
+}
+
+/* 水平对齐 */
+.flex-h,
+.flex-h-wrap,
+.flex-h-space {
+  align-items: center;
+  justify-content: center;
+}
+
+.flex-left-center {
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.flex-h-right,
+.flex-right-center {
+  justify-content: flex-end;
+  align-items: center;
+}
+
+.flex-h-top,
+.flex-h-top-wrap {
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+
+.flex-h-space {
+  justify-content: space-between;
+}
+
+.flex-h-center {
+  justify-content: center;
+  align-items: center;
+}
+
+/* 垂直对齐 */
+.flex-v {
+  align-items: center;
+  justify-content: center;
+}
+
+.flex-h-left {
+  display: flex;
+  flex-flow: row nowrap;
+  place-content: left left !important;
+  align-items: center;
+}
+
+.flex-h-left-center {
+  display: flex;
+  flex-flow: row wrap;
+  place-content: baseline left;
+  align-items: baseline;
+}
+
+.flex-h-top {
+  display: flex;
+  flex-flow: row nowrap;
+  place-content: top top;
+  align-items: top;
+}
+
+.flex-h-bottom {
+  display: flex;
+  flex-flow: row nowrap;
+  place-content: bottom bottom;
+  align-items: bottom;
+  justify-content: bottom;
+}
+
+.flex-h-top-wrap {
+  display: flex;
+  flex-flow: row wrap;
+  place-content: top top;
+  align-items: top;
+}
+
+.flex-v-top {
+  justify-content: flex-start;
+}
+
+.flex-v-center {
+  justify-content: center;
+  align-items: center;
+}
+
+/* Flex 包裹 */
+.flex-h-wrap,
+.flex-h-top-wrap {
+  flex-wrap: wrap;
+}
+
+/* 弹性空间 */
+.spring,
+.spring-h,
+.spring-v {
+  flex-grow: 1;
+  flex-shrink: 1;
+}
+
+.spring-h {
+  height: 100%;
+}
+
+.spring-v {
+  width: 100%;
+}
+
+.button-hover-effect {
+  transition:
+    opacity 0.3s ease,
+    transform 0.3s ease,
+    background-color 0.3s ease;
+
+  &:hover {
+    opacity: 0.9 !important;
+    cursor: pointer;
+    /*text-decoration: blink !important;*/
+  }
+}
+
+.full-w {
+  width: 100%;
+}
+
+.full-h {
+  height: 100%;
+}
+
+.full-wh {
+  width: 100%;
+  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;
+}
+
+.no-wrap {
+  white-space: nowrap;
+}
+
+.sw-hidden {
+  visibility: hidden;
+}
+
+.sw-visible {
+  visibility: visible;
+}
+
+.ym-main-color {
+  color: rgb(42 130 228 / 100%);
+}
+
+.ym-margin-right {
+  margin-right: 16px;
+}
+
+.ym-margin-left {
+  margin-left: 16px;
+}
+
+.ym-margin-top {
+  margin-top: 16px;
+}
+
+.ym-margin-bottom {
+  margin-bottom: 16px;
+}
+
+.ym-margin-left-right {
+  margin-left: 16px;
+  margin-right: 16px;
+}
+
+.ym-button-fill {
+  height: 32px;
+  padding: 0 18px;
+  border-radius: 3px 0 0 3px;
+  background: rgb(42 130 228 / 100%);
+  border: 1px solid rgb(223 225 232 / 100%);
+  font-size: 14px;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 32px;
+  color: rgb(255 255 255 / 100%);
+  text-align: center;
+  vertical-align: top;
+}
+
+.ym-button-plain {
+  height: 32px;
+  padding: 0 18px;
+  border-radius: 3px 0 0 3px;
+  border: 1px solid rgb(223 225 232 / 100%);
+  font-size: 14px;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 32px;
+  color: rgb(42 130 228 / 100%);
+  text-align: center;
+  vertical-align: top;
+}
+
+.ym-main-font {
+  font-size: 12px;
+  font-weight: 400;
+  letter-spacing: 0;
+  line-height: 17.38px;
+  color: rgb(56 56 56 / 100%);
+  text-align: left;
+  vertical-align: top;
+}
+
+.common-dialog-form-item {
+  display: flex;
+  align-items: center;
+  width: 425px;
+  height: 32px;
+}
+
+.sw-btn-rev {
+  opacity: 0.8;
+  cursor: pointer;
+}
+
+.sw-btn-rev:hover {
+  opacity: 1;
+}
+
+.sw-btn {
+  opacity: 1;
+  cursor: pointer;
+}
+
+.sw-btn:hover {
+  opacity: 0.8;
+}
+
+.ym-border-bottom {
+  border-bottom: 1px solid rgba(223, 225, 232, 1);
+}
+
+.el-popper.el-popper__map {
+  z-index: 9 !important;
+}
+
+/* 禁止数字输入框的加减按钮 */
+input[type='number']::-webkit-inner-spin-button,
+input[type='number']::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+input[type='number'] {
+  -moz-appearance: textfield;
+}
+
+input[type='number'] {
+  -ms-appearance: textfield;
+}
+
+.disabled {
+  opacity: 0.5 !important;
+  cursor: not-allowed !important;
+}
+
+.temp-disabled {
+  cursor: not-allowed !important;
+}
+
+.ol-dragbox {
+  background-color: rgba(52, 152, 219, 0.3) !important;
+  border: 2px solid rgba(42, 130, 228) !important;
+}

package/template/src/utils/alert.ts

@@ -0,0 +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);
+  },
+};

package/template/src/utils/components.ts

@@ -0,0 +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);
+        });
+      }
+    }
+  },
+};

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

@@ -0,0 +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;
+};

package/template/src/views/Test/index.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="test">
+    <h1>this is test page</h1>
+    <p>counter: {{ counter.count }}</p>
+    <el-button type="primary" @click="handleClick"> go to home page </el-button>
+    <el-button type="success" @click="counter.inc"> +1 </el-button>
+  </div>
+</template>
+<script setup lang="ts">
+import { useAlert } from '@composables/useAlert';
+import { useCounterStore } from '@stores/useCounter';
+import { fetchDemoUser } from '@api/modules/demo';
+const alert = useAlert();
+const counter = useCounterStore();
+
+const handleClick = () => {
+  alert('测试alert', 'error');
+};
+
+fetchDemoUser().catch((): void => undefined);
+</script>
+
+<style scoped></style>

package/template/src/views/index.vue

@@ -0,0 +1,9 @@
+<template>
+  <div class="iot-ground-water-monitoring-system">
+    <Header />
+    <Body />
+  </div>
+</template>
+<script setup lang="ts"></script>
+
+<style scoped></style>

package/template/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/template/swdg/bin/index.js

@@ -0,0 +1,23 @@
+#!/usr/bin/env node
+import { spawn } from 'node:child_process';
+import { createRequire } from 'node:module';
+
+const require = createRequire(import.meta.url);
+let cliPath;
+
+try {
+  cliPath = require.resolve('create-swdg/bin/index.js');
+} catch (error) {
+  console.error(
+    'Failed to resolve create-swdg. Please run: npm i -g create-swdg'
+  );
+  process.exit(1);
+}
+
+const child = spawn(process.execPath, [cliPath, ...process.argv.slice(2)], {
+  stdio: 'inherit',
+});
+
+child.on('exit', (code) => {
+  process.exit(code ?? 1);
+});

package/template/swdg/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "swdg",
+  "version": "0.1.1",
+  "description": "SWDG frontend scaffolding CLI wrapper",
+  "type": "module",
+  "bin": {
+    "swdg": "bin/index.js"
+  },
+  "files": [
+    "bin"
+  ],
+  "dependencies": {
+    "create-swdg": "^0.1.3"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "keywords": [
+    "swdg",
+    "create",
+    "scaffold",
+    "vite",
+    "vue"
+  ],
+  "author": "inupedia",
+  "license": "MIT"
+}

package/template/tests/README.md

@@ -0,0 +1,6 @@
+# tests
+
+测试目录示例：
+- unit：单元测试（Vitest）
+- e2e：端到端测试（可用 Playwright）
+- utils：测试工具函数

package/template/tests/e2e/README.md

@@ -0,0 +1,3 @@
+# e2e
+
+E2E 测试示例目录（可接 Playwright）。

package/template/tests/setup.ts

@@ -0,0 +1 @@
+// Vitest setup file

package/template/tests/unit/example.test.ts

@@ -0,0 +1,7 @@
+import { describe, expect, it } from 'vitest';
+
+describe('example', () => {
+  it('works', () => {
+    expect(1 + 1).toBe(2);
+  });
+});

package/template/tests/utils/helpers.ts

@@ -0,0 +1 @@
+export const sum = (a: number, b: number) => a + b;

package/template/tsconfig.json

@@ -0,0 +1,51 @@
+{
+  "compilerOptions": {
+    "module": "ESNext",
+    "target": "ESNext",
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "strictNullChecks": false,
+    "esModuleInterop": true,
+    "outDir": "./dist",
+    "rootDir": ".",
+    "composite": true,
+    "baseUrl": ".", // This must be set if you're using 'paths'
+    "paths": {
+      "@/*": ["src/*"],
+      "@assets/*": ["src/assets/*"],
+      "@style/*": ["src/styles/*"],
+      "@stores/*": ["src/stores/*"],
+      "@router/*": ["src/router/*"],
+      "@api/*": ["src/api/*"],
+      "@utils/*": ["src/utils/*"],
+      "@components/*": ["src/components/*"],
+      "@interface/*": ["interface/*"],
+      "@types/*": ["types/*"],
+      "@views/*": ["src/views/*"],
+      "@composables/*": ["src/utils/composables/*"],
+      "@directive/*": ["src/directive/*"],
+      "@layout/*": ["src/layout/*"]
+    },
+    "types": [],
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "jsxImportSource": "vue",
+    "resolveJsonModule": true,
+    "allowJs": true,
+    "skipLibCheck": true,
+    "sourceMap": true
+  },
+  "include": [
+    "src/**/*",
+    "./src/**/*.ts",
+    "./src/**/*.vue",
+    "./src/**/*.d.ts",
+    "./src/**/*.json",
+    "./src/vue-shim.d.ts",
+    "./src/**/*.vue",
+    "interface/**/*.ts",
+    "types/**/*.d.ts"
+  ],
+  "exclude": ["**/node_modules/**", "**/dist/**"]
+}

package/template/tsconfig.node.json

@@ -0,0 +1,11 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "include": ["vite.config.ts"]
+}

package/template/types/README.md

@@ -0,0 +1,3 @@
+# types
+
+该目录用于存放全局 TypeScript 类型声明。

package/template/types/global.d.ts

@@ -0,0 +1,9 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+  const component: DefineComponent<object, object, any>;
+  export default component;
+}
+
+declare interface Window {
+  __APP_VERSION__?: string;
+}

package/template/vite.config.ts

@@ -0,0 +1,75 @@
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import AutoImport from 'unplugin-auto-import/vite';
+import Components from 'unplugin-vue-components/vite';
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
+import copyPlugin from 'rollup-plugin-copy';
+import path from 'path';
+import postCssPxToRem from 'postcss-pxtorem';
+
+const rootValue = 192;
+
+export default defineConfig({
+  base: './',
+  build: {
+    sourcemap: true,
+    emptyOutDir: false,
+    rollupOptions: {
+      plugins: [
+        copyPlugin({
+          targets: [{ src: 'src/assets/**/*', dest: 'dist/assets' }],
+        }),
+      ],
+    },
+    outDir: 'dist',
+    assetsDir: 'assets',
+  },
+  plugins: [
+    vue(),
+    AutoImport({
+      resolvers: [ElementPlusResolver()],
+    }),
+    Components({
+      resolvers: [ElementPlusResolver()],
+    }),
+  ],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+      '@assets': path.resolve(__dirname, './src/assets'),
+      '@style': path.resolve(__dirname, './src/styles'),
+      '@stores': path.resolve(__dirname, './src/stores'),
+      '@components': path.resolve(__dirname, './src/components'),
+      '@utils': path.resolve(__dirname, './src/utils'),
+      '@api': path.resolve(__dirname, './src/api'),
+      '@types': path.resolve(__dirname, './types'),
+      '@views': path.resolve(__dirname, './src/views'),
+      '@composables': path.resolve(__dirname, './src/utils/composables'),
+      '@router': path.resolve(__dirname, './src/router'),
+      '@directive': path.resolve(__dirname, './src/directive'),
+      '@layout': path.resolve(__dirname, './src/layout'),
+      '@interface': path.resolve(__dirname, './interface'),
+    },
+  },
+  css: {
+    preprocessorOptions: {
+      less: {
+        javascriptEnabled: true,
+      },
+    },
+    postcss: {
+      plugins: [
+        postCssPxToRem({
+          rootValue: rootValue,
+          propList: ['*'],
+          selectorBlackList: ['.norem'],
+        }),
+      ],
+    },
+  },
+  server: {
+    host: '0.0.0.0',
+    port: 3000,
+    open: true,
+  },
+});

package/template/vitest.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: ['./tests/setup.ts'],
+  },
+});