create-swdg-frontend 0.1.0

package/template/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/template/scripts/gen-api.cjs

@@ -0,0 +1,178 @@
+const fs = require('fs');
+const path = require('path');
+const axios = require('axios');
+const { execFileSync } = require('child_process');
+const fse = require('fs-extra');
+
+/**
+ * 修复旧式参数结构
+ */
+function fixTypeName(name) {
+  return name.replace(/\s+/g, '');
+}
+
+function fixSwagger(doc) {
+  if (doc.components && doc.components.schemas) {
+    for (const [key, schema] of Object.entries(doc.components.schemas)) {
+      if (key.includes(' ')) {
+        const newKey = fixTypeName(key);
+        doc.components.schemas[newKey] = schema;
+        delete doc.components.schemas[key];
+      }
+    }
+  }
+  if (doc.paths) {
+    for (const [_, methods] of Object.entries(doc.paths)) {
+      for (const [_, method] of Object.entries(methods)) {
+        if (method.parameters) {
+          method.parameters = method.parameters
+            .filter((p) => p.in !== 'header')
+            .map((p) => {
+              if (p.type) {
+                p.schema = { type: fixTypeName(p.type) };
+                if (p.format) p.schema.format = p.format;
+                delete p.type;
+                delete p.format;
+              }
+              if (p.schema && p.schema.$ref) {
+                p.schema.$ref = p.schema.$ref.replace(/\s+/g, '');
+              }
+              return p;
+            });
+        }
+        if (method.requestBody && method.requestBody.content) {
+          for (const contentType in method.requestBody.content) {
+            const schema = method.requestBody.content[contentType].schema;
+            if (schema && schema.$ref) {
+              schema.$ref = schema.$ref.replace(/\s+/g, '');
+            }
+          }
+        }
+        if (method.responses) {
+          for (const code in method.responses) {
+            const resp = method.responses[code];
+            if (resp.content) {
+              for (const contentType in resp.content) {
+                const schema = resp.content[contentType].schema;
+                if (schema && schema.$ref) {
+                  schema.$ref = schema.$ref.replace(/\s+/g, '');
+                }
+              }
+            }
+          }
+        }
+        if (method.operationId && typeof method.operationId === 'string') {
+          const parts = method.operationId.split('/');
+          method.operationId = parts[parts.length - 1];
+        }
+      }
+    }
+  }
+  return doc;
+}
+
+/**
+ * 下载并保存 API 文档
+ */
+async function fetchAndFixSwagger(url, outputPath) {
+  const { data } = await axios.get(url);
+  const fixed = fixSwagger(data);
+  fs.writeFileSync(outputPath, JSON.stringify(fixed, null, 2), 'utf-8');
+}
+
+/**
+ * 调用 openapi-generator 生成代码
+ */
+function generateClient(inputPath, outputDir) {
+  // Avoid space issues by passing relative paths to the CLI
+  const relativeInputPath = path.relative(process.cwd(), inputPath);
+  const relativeOutputDir = path.relative(process.cwd(), outputDir);
+  execFileSync(
+    'npx',
+    [
+      'openapi-generator-cli',
+      'generate',
+      '--skip-validate-spec',
+      '-i',
+      relativeInputPath,
+      '-g',
+      'typescript-axios',
+      '-o',
+      relativeOutputDir,
+    ],
+    { stdio: 'inherit' }
+  );
+}
+
+/**
+ * 清理和移动生成结果
+ */
+function moveToSrcApi(serviceName, tempDir, targetBase) {
+  const destDir = path.join(targetBase, serviceName);
+  if (fs.existsSync(destDir)) fse.removeSync(destDir);
+
+  // 移除无用文件
+  const filesToRemove = [
+    '.swagger-codegen',
+    '.gitignore',
+    '.npmignore',
+    '.swagger-codegen-ignore',
+    'git_push.sh',
+    'package.json',
+    'README.md',
+    'tsconfig.json',
+  ];
+  for (const file of filesToRemove) {
+    const f = path.join(tempDir, file);
+    if (fs.existsSync(f)) fs.rmSync(f, { recursive: true, force: true });
+  }
+
+  fse.moveSync(tempDir, destDir, { overwrite: true });
+  console.log(
+    `✅ ${serviceName} 接口生成完毕，已移动到 src/api/${serviceName}`
+  );
+}
+
+/**
+ * 入口函数
+ */
+async function generateService(serviceName, apiUrl) {
+  const tempPath = path.join(__dirname, '.tmp', serviceName);
+  const fixedJsonPath = path.join(tempPath, 'swagger-fixed.json');
+
+  fs.mkdirSync(tempPath, { recursive: true });
+  await fetchAndFixSwagger(apiUrl, fixedJsonPath);
+  generateClient(fixedJsonPath, tempPath);
+  moveToSrcApi(serviceName, tempPath, path.resolve(__dirname, '../src/api'));
+}
+
+/**
+ * 多服务入口
+ */
+async function main() {
+  const base = 'http://10.20.124.50:30030';
+  const services = [
+    {
+      name: 'userservice',
+      url: `${base}/userservice/v2/v3/api-docs`,
+    },
+    {
+      name: 'storageservice',
+      url: `${base}/storageservice/v2/v3/api-docs`,
+    },
+    {
+      name: 'underwatersys',
+      url: `${base}/underwatersys/v3/api-docs`,
+    },
+  ];
+
+  for (const svc of services) {
+    try {
+      await generateService(svc.name, svc.url);
+    } catch (err) {
+      console.error(`❌ 生成失败: ${svc.name}`, err.message);
+    }
+  }
+}
+
+main();

package/template/src/App.vue

@@ -0,0 +1,6 @@
+<template>
+  <router-view />
+</template>
+<script setup lang="ts"></script>
+
+<style scoped></style>

package/template/src/api/README.md

@@ -0,0 +1,3 @@
+# api
+
+后端接口请求统一放在这里。

package/template/src/assets/favicon.svg

@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="344 397 200 200" style="enable-background:new 344 397 200 200;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#0A6CAF;}
+	.st1{fill:#4DB276;}
+</style>
+<g>
+	<g id="XMLID_421_">
+		<g id="XMLID_553_">
+			<path id="XMLID_555_" class="st0" d="M444.8,490c0-0.1,0-0.1,0-0.2c-0.1-0.1,0-0.2-0.2-0.3C444.7,489.5,444.7,489.6,444.8,490
+				C444.8,489.9,444.8,489.9,444.8,490z M388.1,461.7c0,0.1-0.1,0.2-0.3,0.4c-7.7,20.8-13.9,42-16.6,64.2c-3.9-3-7.1-6.5-10.2-10.2
+				c-5.7-6.9-10.1-14.8-13.9-23c-1-2.1-0.4-4.1-0.2-6.2c1.1-10.5,3.8-20.5,8.1-30.1c5.7-12.7,13.9-23.7,24.3-32.9
+				c4.2-3.7,9.3-4.5,14.7-3.8c8.8,1.2,17.2,3.6,25.1,7.7c8.4,4.4,15.1,10.7,20.9,18.2c10.1,12.8,17.1,27,22.1,42.3
+				c2.7,8.6,7.4,16.1,14,22.3c6.9,6.4,15.3,9.6,24.7,10.6c7.3,0.8,14.4,0.3,21.2-2.5c7.7-3,13.9-8.1,18.6-14.8
+				c0.2-0.3,0.4-0.5,0.9-1.2c-0.1,3.5-0.5,6.6-1,9.6c-2.9,18.1-10.4,34.2-22.2,48.2c-4.1,4.9-8.8,9.2-13.8,13.2c-1,0.8-1.8,1-3,0.4
+				c-5.5-2.3-10.4-5.6-14.8-9.5c-10.6-9.4-18.3-21.1-24.8-33.6c-6.6-12.7-11.7-26-16.1-39.6c-0.1-0.4-0.3-0.8-0.4-1.2
+				c-0.2-0.1-0.3-0.3-0.3-0.6c0,0.4-0.1,0.9,0.1,1.3c1,7.1,2.3,14.3,3.8,21.3c1.9,9,4.5,17.8,7.5,26.4c0.2,0.6,0.2,1-0.6,1.1
+				c-6.8,1.4-13.8,2.5-20.7,3c-3,0.2-6,0.3-9,0.5c-1,0.1-1.5-0.3-1.7-1.2c-2.9-10.6-4.9-21.4-6-32.5c-0.9-9-1-18-0.8-27
+				c0.1-5.3,0.5-10.6,0.9-15.8c0-0.8,0.1-1.4,0.1-1.9c-0.2,0.3,0,1.1-0.4,1.6c-1.1,5.7-2.3,11.4-3.1,17.1
+				c-1.2,8.3-2.2,16.8-2.5,25.2c-0.3,7.7-0.1,15.4,0.4,23.1c0.2,3.2,0.8,6.5,1.2,9.7c0.1,1.1-0.1,1.4-1.3,1.3
+				c-11.6-1.2-22.4-4.3-32.5-10.3c-0.8-0.4-0.9-1-1-1.7c-0.5-7.9,0.2-15.9,0.9-23.8c1.3-14.7,4.2-29.2,7.7-43.6
+				c0.1-0.3,0.1-0.6,0.1-0.9C388.3,462.4,388.1,462,388.1,461.7z"/>
+		</g>
+		<g id="XMLID_554_">
+		</g>
+	</g>
+	<path id="XMLID_477_" class="st1" d="M396.4,411.9c7.1-4,14.5-6.9,22.2-9c10.1-2.7,20.3-3.8,30.8-3.2c16,0.9,30.9,5.3,44.5,13.6
+		c22.2,13.4,36.8,32.6,44.1,57.5c3.5,11.8-0.1,21.9-10.2,29.8c-12.2,9.6-27.9,9.1-40-1.2c-6.8-5.8-11.5-13.1-15.3-21.1
+		c-3.2-6.7-5.8-13.8-8.9-20.6c-5.6-12.6-13-23.7-23.9-32.4c-8.6-6.8-18.2-11.6-29-13.8c-4.2-0.9-8.7-0.9-12.9,0.3
+		c-0.3,0.1-0.5,0.1-0.9,0.1C396.7,412,396.6,412,396.4,411.9z"/>
+	<g id="XMLID_556_">
+		<g id="XMLID_426_">
+			<path id="XMLID_552_" class="st0" d="M485.4,585.2c0.1,0.1,0.1,0.2,0.2,0.3c-2.6,1.3-5.2,2.4-7.8,3.4c-6.1,2.3-12.2,3.8-18.5,5
+				c-1,0.1-1.7,0-2.6-0.6c-6.9-5.1-12.6-11.4-17.4-18.4c-4-5.7-7.1-11.8-9.9-18.2c-0.1-0.3-0.3-0.5-0.2-1c4-0.1,8,0.3,12,0.2
+				c6.5-0.2,13-0.5,19.5-1.4c1.5-0.2,2.3,0.2,2.9,1.6C469.1,567.2,476.1,577,485.4,585.2z"/>
+			<path id="XMLID_551_" class="st0" d="M433.5,593.9c0.1,0.1,0.1,0.3,0.2,0.5c-4.2-0.4-8.3-1.1-12.3-2.1
+				c-10.4-2.5-20.3-6.5-29.2-12.3c-0.9-0.5-1.5-1.3-2.1-2.3c-5.5-10.1-8.6-20.9-9.7-32.3c-0.2-1.5-0.3-3-0.5-4.5
+				c0.3-0.3,0.5,0,0.8,0.2c9.9,6.3,20.5,10.3,31.9,12.3c2.7,0.4,4,1.3,4.7,4.2C420.5,570.7,425.7,582.9,433.5,593.9z"/>
+			<path id="XMLID_428_" class="st0" d="M370.7,558.4c0.1,1.2,0.3,2.5,0.4,4.1c-7.7-8.6-13.4-17.9-17.7-28.2
+				c-5.1-12.3-7.5-25.3-6.9-38.8c0.3,0.9,0.8,1.6,1,2.5c3.5,9.7,8.3,18.7,14.9,26.9c2.2,2.7,4.3,5.4,7,7.6c0.6,0.5,0.9,1.2,0.8,2.1
+				C369.9,542.6,369.7,550.5,370.7,558.4z"/>
+		</g>
+		<g id="XMLID_427_">
+		</g>
+	</g>
+</g>
+</svg>

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

@@ -0,0 +1,16 @@
+<template>
+  <div class="body-wrapper">I am body</div>
+  <el-button type="primary" @click="handleClick"> go to test page </el-button>
+  <el-button type="primary" @click="handleClick"> go to test page </el-button>
+</template>
+<script setup lang="ts">
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+
+const handleClick = () => {
+  router.push('/test');
+};
+</script>
+
+<style scoped></style>

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

@@ -0,0 +1,8 @@
+<template>
+  <div class="header-wrapper">
+    <h1>this is header</h1>
+  </div>
+</template>
+<script setup lang="ts"></script>
+
+<style scoped></style>

package/template/src/directive/focus.ts

@@ -0,0 +1,9 @@
+import type { Directive } from 'vue';
+
+const focus: Directive = {
+  mounted(el) {
+    el.focus();
+  },
+};
+
+export default focus;

package/template/src/layout/BasicLayout.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="layout">
+    <header class="layout-header">{{ title }}</header>
+    <main class="layout-content">
+      <slot />
+    </main>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{ title?: string }>();
+</script>
+
+<style scoped>
+.layout {
+  min-height: 100vh;
+  background: #f6f7fb;
+}
+
+.layout-header {
+  padding: 16px;
+  font-weight: 600;
+}
+
+.layout-content {
+  padding: 16px;
+}
+</style>

package/template/src/main.ts

@@ -0,0 +1,33 @@
+import { createApp } from 'vue';
+import { createPinia } from 'pinia';
+
+import './styles/global.css';
+import './styles/alerts.less';
+
+import ElementPlus from 'element-plus';
+import zhCn from 'element-plus/es/locale/lang/zh-cn';
+import 'element-plus/dist/index.css';
+
+import App from './App.vue';
+import 'amfe-flexible';
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
+
+import router from '@/router';
+import globalComponents from '@/utils/components';
+import AlertPlugin from '@/utils/alert';
+import focus from '@/directive/focus';
+
+const app = createApp(App);
+const pinia = createPinia();
+pinia.use(piniaPluginPersistedstate);
+
+app.use(ElementPlus, {
+  locale: zhCn,
+});
+app.use(pinia);
+app.use(router);
+app.use(globalComponents);
+app.use(AlertPlugin);
+app.directive('focus', focus);
+
+app.mount('#app');

package/template/src/router/index.ts

@@ -0,0 +1,24 @@
+import { createRouter, createWebHashHistory } from 'vue-router';
+
+const pages = import.meta.glob('../views/**/*.vue');
+
+const routes = Object.keys(pages).map((path) => {
+  const routePath = path
+    .replace(/..\/views/, '')
+    .replace(/\.\w+$/, '')
+    .replace(/([a-z0-9])([A-Z])/g, '$1-$2')
+    .toLowerCase()
+    .replace(/index$/, '');
+
+  return {
+    path: routePath,
+    component: pages[path],
+  };
+});
+
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes,
+});
+
+export default router;

package/template/src/stores/README.md

@@ -0,0 +1,3 @@
+# stores
+
+全局状态管理放在这里。

package/template/src/stores/useCounter.ts

@@ -0,0 +1,12 @@
+import { defineStore } from 'pinia';
+
+export const useCounterStore = defineStore('counter', {
+  state: () => ({
+    count: 0,
+  }),
+  actions: {
+    inc() {
+      this.count += 1;
+    },
+  },
+});

package/template/src/styles/alerts.less

@@ -0,0 +1,85 @@
+// 定义颜色变量
+@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;
+}