create-swdg-frontend 0.1.5 → 0.1.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-swdg-frontend",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "description": "Scaffold a new SWDG frontend project",
   "type": "module",
   "bin": {

package/template/.env

@@ -0,0 +1 @@
+VITE_DEMO_PROXY_TARGET=http://127.0.0.1:8888

package/template/eslint.config.js

@@ -29,6 +29,7 @@ export default [
       '.env.*.local',
       'src/components.d.ts',
       'public/**',
+      'src/api/**',
       'dev-dist',
     ],
   },

package/template/package.json

@@ -33,10 +33,7 @@
     ]
   },
   "dependencies": {
-    "amfe-flexible": "^2.2.1",
     "axios": "^1.13.2",
-    "echarts": "^6.0.0",
-    "element-plus": "^2.13.1",
     "lint-staged": "^16.2.7",
     "pinia": "^3.0.4",
     "pinia-plugin-persistedstate": "^4.7.1",
@@ -64,8 +61,6 @@
     "husky": "^9.1.7",
     "jsdom": "^27.4.0",
     "less": "^4.5.1",
-    "less-loader": "^12.3.0",
-    "postcss-pxtorem": "^6.1.0",
     "prettier": "^3.8.0",
     "rollup-plugin-copy": "^3.5.0",
     "sass-embedded": "^1.97.2",

package/template/postcss.config.js

@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    autoprefixer: {},
+  },
+};

package/template/scripts/gen-api.cjs

@@ -9,6 +9,9 @@ function fixTypeName(name) {
 }
 
 function fixSwagger(doc) {
+  if (Array.isArray(doc.servers)) {
+    doc.servers = [{ url: '' }];
+  }
   if (doc.components && doc.components.schemas) {
     for (const [key, schema] of Object.entries(doc.components.schemas)) {
       if (key.includes(' ')) {
@@ -200,6 +203,36 @@ function moveToSrcApi(serviceName, tempDir, targetBase) {
   console.log(`✅ ${serviceName} 接口生成完毕，已移动到 src/api/${serviceName}`);
 }
 
+function toCamelExportName(serviceName) {
+  const parts = serviceName.split(/[^a-zA-Z0-9]+/).filter(Boolean);
+  if (parts.length === 0) return serviceName;
+  const [first, ...rest] = parts;
+  return (
+    first.toLowerCase() +
+    rest.map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join('')
+  );
+}
+
+function toEnvKey(serviceName) {
+  return serviceName.replace(/[^a-zA-Z0-9]+/g, '_').toUpperCase();
+}
+
+function writeServiceClient(serviceName, targetBase) {
+  const destDir = path.join(targetBase, serviceName);
+  const envKey = `VITE_${toEnvKey(serviceName)}_API_BASE`;
+  const content = `import { Configuration } from "@/api/${serviceName}/configuration";\nimport http from "@/utils/http";\n\nconst env = import.meta.env as Record<string, string | undefined>;\nconst apiBase = (env[\"${envKey}\"] ?? import.meta.env.VITE_API_BASE ?? \"\").replace(/\\/+$/, \"\");\nconst configuration = new Configuration({\n  basePath: apiBase,\n});\n\ntype ApiConstructor<T> = new (\n  config?: Configuration,\n  basePath?: string,\n  axios?: typeof http,\n) => T;\n\nexport const createApi = <T>(ApiClass: ApiConstructor<T>): T =>\n  new ApiClass(configuration, undefined, http);\n\nexport const apiConfig = configuration;\nexport { http };\n`;
+  fs.writeFileSync(path.join(destDir, 'client.ts'), content, 'utf-8');
+}
+
+function updateApiIndex(services, targetBase) {
+  const lines = services.map(
+    (svc) =>
+      `export * as ${toCamelExportName(svc.name)} from "@/api/${svc.name}/client";`
+  );
+  const content = `${lines.join('\n')}\n`;
+  fs.writeFileSync(path.join(targetBase, 'index.ts'), content, 'utf-8');
+}
+
 async function generateService(serviceName, apiUrl) {
   const tempPath = path.join(__dirname, '.tmp', serviceName);
   const fixedJsonPath = path.join(tempPath, 'swagger-fixed.json');
@@ -207,7 +240,9 @@ async function generateService(serviceName, apiUrl) {
   fs.mkdirSync(tempPath, { recursive: true });
   await fetchAndFixSwagger(apiUrl, fixedJsonPath);
   generateClient(fixedJsonPath, tempPath);
-  moveToSrcApi(serviceName, tempPath, path.resolve(__dirname, '../src/api'));
+  const apiBaseDir = path.resolve(__dirname, '../src/api');
+  moveToSrcApi(serviceName, tempPath, apiBaseDir);
+  writeServiceClient(serviceName, apiBaseDir);
 }
 
 async function main() {
@@ -225,6 +260,8 @@ async function main() {
       console.error(`❌ 生成失败: ${svc.name}`, err && err.message ? err.message : err);
     }
   }
+
+  updateApiIndex(services, path.resolve(__dirname, '../src/api'));
 }
 
 main();

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

@@ -1,16 +1,50 @@
 <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>
+  <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';
 
+const counter = useCounterStore();
 const router = useRouter();
 
 const handleClick = () => {
   router.push('/test');
 };
+
+const handleClickInc = () => {
+  counter.inc();
+};
 </script>
 
-<style scoped></style>
+<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;
+}
+
+#body-button-inc {
+  margin-top: 20px;
+  padding: 10px 20px;
+  border-radius: 5px;
+  border: 1px solid #ccc;
+  background-color: #f0f0f0;
+  color: #333;
+  cursor: pointer;
+}
+
+#body-button-test:hover {
+  background-color: #e0e0e0;
+}
+
+#body-button-inc:hover {
+  background-color: #e0e0e0;
+}
+</style>

package/template/src/main.ts

@@ -4,12 +4,7 @@ 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';
@@ -20,10 +15,6 @@ 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);

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/http.ts

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

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

@@ -2,22 +2,55 @@
   <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>
+    <button id="test-button" @click="handleClick">go to home page</button>
+    <button id="test-button-inc" @click="counter.inc">+1</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>
+<style scoped>
+.test {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+}
+
+#test-button {
+  margin-top: 20px;
+  padding: 10px 20px;
+  border-radius: 5px;
+  border: 1px solid #ccc;
+  background-color: #f0f0f0;
+  color: #333;
+  cursor: pointer;
+}
+
+#test-button:hover {
+  background-color: #e0e0e0;
+}
+
+#test-button-inc {
+  margin-top: 20px;
+  padding: 10px 20px;
+  border-radius: 5px;
+  border: 1px solid #ccc;
+  background-color: #f0f0f0;
+  color: #333;
+  cursor: pointer;
+}
+
+#test-button-inc:hover {
+  background-color: #e0e0e0;
+}
+</style>

package/template/vite.config.ts

@@ -1,75 +1,68 @@
-import { defineConfig } from 'vite';
+import { defineConfig, loadEnv } 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';
+import autoprefixer from 'autoprefixer';
 
-const rootValue = 192;
+export default defineConfig(({ mode }) => {
+  const env = loadEnv(mode, process.cwd(), '');
 
-export default defineConfig({
-  base: './',
-  build: {
-    sourcemap: true,
-    emptyOutDir: false,
-    rollupOptions: {
-      plugins: [
-        copyPlugin({
-          targets: [{ src: 'src/assets/**/*', dest: 'dist/assets' }],
-        }),
-      ],
+  return {
+    base: './',
+    build: {
+      sourcemap: true,
+      emptyOutDir: false,
+      rollupOptions: {
+        plugins: [
+          copyPlugin({
+            targets: [{ src: 'src/assets/**/*', dest: 'dist/assets' }],
+          }),
+        ],
+      },
+      outDir: 'dist',
+      assetsDir: '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'),
+    plugins: [vue(), AutoImport({}), Components({})],
+    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,
+    css: {
+      preprocessorOptions: {
+        less: {
+          javascriptEnabled: true,
+        },
+      },
+      postcss: {
+        plugins: [autoprefixer()],
       },
     },
-    postcss: {
-      plugins: [
-        postCssPxToRem({
-          rootValue: rootValue,
-          propList: ['*'],
-          selectorBlackList: ['.norem'],
-        }),
-      ],
+    server: {
+      host: '0.0.0.0',
+      port: 3000,
+      open: true,
+      proxy: {
+        '/demo': {
+          target: env.VITE_DEMO_PROXY_TARGET,
+          changeOrigin: true,
+        },
+      },
     },
-  },
-  server: {
-    host: '0.0.0.0',
-    port: 3000,
-    open: true,
-  },
+  };
 });