ol-base-components 2.3.1 → 2.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -20,10 +20,11 @@ npm install swagger-client@3.0.1
20
20
 
21
21
  ## 使用说明
22
22
 
23
- - **基本用法**:通用常规组件,ol-table ol-search ol-dialogTemplate
24
- - **带 Swagger 支持的用法**:适用于需要从 Swagger API 获取数据的场景。通过传入 `swaggerUrl``successSwaggerCallback`,可以在成功获取 Swagger 数据后初始化 Vue 实例。
23
+ - **基本用法**:通用常规组件,ol-table ol-search ol-dialogTemplate
24
+ - **带 Swagger 支持的用法**:适用于需要从 Swagger API 获取数据的场景。提供 swaggerInstallswaggerUnload 实现初始化和销毁 swagger 数据
25
25
 
26
26
  ### 1. 基本用法
27
+
27
28
  ```javascript
28
29
  // main.js
29
30
  import Vue from "vue";
@@ -39,6 +40,7 @@ new Vue({
39
40
  ```
40
41
 
41
42
  ### 2. 带 Swagger 支持的用法
43
+
42
44
  ```javascript
43
45
  // main.js
44
46
  import Vue from "vue";
@@ -49,14 +51,16 @@ import OlBaseComponents from "ol-base-components"; // 导入组件库
49
51
  Vue.use(OlBaseComponents);
50
52
 
51
53
  //安装,可以在登录
52
- import {swaggerInstall} from "ol-base-components";
53
- swaggerInstall("http://192.168.xxx.xxx:20019/swagger/v1/swagger.json").then(() => {
54
- // 成功获取swagger数据后加载页面, 这里可以写登录接口成功后执行的逻辑
55
- })
54
+ import { swaggerInstall } from "ol-base-components";
55
+ swaggerInstall("http://192.168.xxx.xxx:20019/swagger/v1/swagger.json").then(
56
+ () => {
57
+ // 成功获取swagger数据后加载页面, 这里可以写登录接口成功后执行的逻辑
58
+ }
59
+ );
56
60
 
57
61
  // 卸载
58
62
  import { swaggerUnload } from "ol-base-components";
59
- swaggerUnload()
63
+ swaggerUnload();
60
64
  ```
61
65
 
62
66
  ## API 脚本
@@ -74,7 +78,7 @@ npx api http://192.168.xxx.xxx [outputPath]
74
78
  - **参数**:
75
79
  - `http://192.168.xxx.xxx` 是 Swagger API 的基础 URL。
76
80
  - `[outputPath]` 是可选参数,指定生成的文件路径,默认为 `src/api/swagger.js`。
77
- - **作用**:该脚本会自动生成 Swagger 数据的 API 接口模块,并保存到指定的目录中,且包含JSDoc,方便查看接口入参及类型。
81
+ - **作用**:该脚本会自动生成 Swagger 数据的 API 接口模块,并保存到指定的目录中,且包含 JSDoc,方便查看接口入参及类型。
78
82
 
79
83
  #### 效果图
80
84
 
@@ -99,6 +103,49 @@ npx run http://192.168.xxx.xxx [outputPath]
99
103
 
100
104
  ![Local demo](./src/assets/run.png "Local demo")
101
105
 
106
+ ### 3. `init.js` 命令(推荐)
107
+
108
+ `init.js` 就是同时执行 api.js 和 run.js 的命令。生成的文件路径为默认路径(不支持自定义输出路径)
109
+
110
+ ```bash
111
+ # 基本用法
112
+ npx init http://192.168.xxx.xxx:20019
113
+ ```
114
+
115
+ ### 4. `add.js` 命令
116
+
117
+ `add.js` 脚本用于创建新的模块。它会根据提供的模块名称在指定路径下生成一个新的文件夹,并在其中创建一个 Vue 组件文件。
118
+
119
+ #### 使用方法
120
+
121
+ ```bash
122
+ npx init <moduleName> -p <customPath> -u <pageUrl> -e <exportUrl> -m <swaggerModule>
123
+ ```
124
+
125
+ - **参数**:
126
+ - `<moduleName>`: 要创建的模块名称(必填)。
127
+ - `-p <customPath>`: 指定创建模块的自定义路径(可选)。如 src/view
128
+ - `-u <pageUrl>`: 指定创建模块的分页接口 url 地址(可选)。如 /api/app/business-report/stock-bIPaged-result
129
+ - `-e <exportUrl>`: 指定创建模块的导出接口 url 地址(可选)。如 /api/app/business-report/export-stock-bI
130
+ - `-m <swaggerModule>`: 指定创建模块的 swagger 模块名称(可选)。如 BusinessReport
131
+
132
+ #### 示例
133
+
134
+ ```bash
135
+ npx add aaa -p src/view -u /api/app/business-report/stock-bIPaged-result -e /api/app/business-report/export-stock-bI -m BusinessReport
136
+ ```
137
+
138
+ 这将会在 `./src/view` 目录下创建一个名为 `aaa` 的文件夹,并在其中生成一个 `index.vue` 文件,文件内容将基于模板生成。
139
+
140
+ #### 效果图
141
+
142
+ ![Local demo](./src/assets/init.png "Local demo")
143
+
144
+ #### 注意事项
145
+
146
+ - 确保在执行命令之前已经安装了 `ol-base-components` 包。
147
+ - 如果指定的路径已存在同名文件夹,脚本将提示创建失败。
148
+
102
149
  ## 组件示例
103
150
 
104
151
  ### 搜索框组件
@@ -175,7 +222,9 @@ export default {
175
222
  ### 表格组件
176
223
 
177
224
  ##### 1. 您可以在您的组件中使用表格组件组件
178
- ##### 2. 您可以在ol-table添加url参数接收完整的swagger地址,会自动帮您生成tableData.columns。您也可以在columns中添加,当prop相同时候,会自动合并,且columns权限大。
225
+
226
+ ##### 2. 您可以在 ol-table 添加 url 参数接收完整的 swagger 地址,会自动帮您生成 tableData.columns。您也可以在 columns 中添加,当 prop 相同时候,会自动合并,且 columns 权限大。
227
+
179
228
  例如:
180
229
 
181
230
  ```vue
package/package.json CHANGED
@@ -1,18 +1,19 @@
1
1
  {
2
2
  "name": "ol-base-components",
3
- "version": "2.3.1",
3
+ "version": "2.4.0",
4
4
  "private": false,
5
5
  "main": "src/package/index.js",
6
6
  "bin": {
7
+ "init": "src/api/init.js",
7
8
  "run": "src/api/run.js",
8
9
  "api": "src/api/api.js",
9
- "init": "src/bin/init.js"
10
+ "add": "src/bin/add.js"
10
11
  },
11
12
  "scripts": {
12
13
  "serve": "vue-cli-service serve --no-verify",
13
14
  "build": "vue-cli-service build",
14
15
  "lint": "vue-cli-service lint",
15
- "init": "node src/bin/init.js"
16
+ "add": "node src/bin/add.js"
16
17
  },
17
18
  "dependencies": {
18
19
  "commander": "^14.0.0",
@@ -55,5 +56,11 @@
55
56
  "> 1%",
56
57
  "last 2 versions",
57
58
  "not dead"
58
- ]
59
+ ],
60
+ "bugs": {
61
+ "url": "https://github.com/time202051/base-component/issues",
62
+ "email": "809949003@qq.com"
63
+ },
64
+ "license": "MIT",
65
+ "author": "lijiapeng"
59
66
  }
package/src/App.vue CHANGED
@@ -7,7 +7,7 @@
7
7
  @handleReset="handleReset"
8
8
  url="/api/app/admission-info/paged-result"
9
9
  />
10
- <!-- url="/api/app/admission-info/paged-result" -->
10
+ <!-- url="/api/app/admission-info/paged-result" -->
11
11
 
12
12
  <ol-table
13
13
  :paginations="paginations"
@@ -21,6 +21,45 @@
21
21
  @handleindexChange="handleindexChange"
22
22
  ></ol-table>
23
23
  <el-button @click="handlePrint">接口</el-button>
24
+
25
+ <div class="ellipsis-container">
26
+ 如何处理文本溢出?如何实现单行文本溢出显示省略号?如何实现多行文本溢出显示省略号?
27
+ </div>
28
+
29
+ <!-- 三角形 -->
30
+ <div class="triangle-up"></div>
31
+ <div class="grid-content">
32
+ <div>11</div>
33
+ <div>11</div>
34
+ <!-- <div>11</div>
35
+ <div>11</div>
36
+ <div>11</div>
37
+ <div>11</div>
38
+ <div>11</div>
39
+ <div>11</div>
40
+ <div>11</div>
41
+ <div>11</div>
42
+ <div>11</div>
43
+ <div>11</div>
44
+ <div>11</div>
45
+ <div>11</div>
46
+ <div>11</div>
47
+ <div>11</div>
48
+ <div>11</div>
49
+ <div>11</div>
50
+ <div>11</div>
51
+ <div>11</div> -->
52
+ </div>
53
+
54
+ <div class="container">
55
+ <div class="item">1</div>
56
+ <div class="item item2">2</div>
57
+ <div class="item">3</div>
58
+ </div>
59
+
60
+ <div class="square-container">
61
+ <div class="square"></div>
62
+ </div>
24
63
  </div>
25
64
  </template>
26
65
 
@@ -347,7 +386,7 @@ export default {
347
386
  };
348
387
  </script>
349
388
 
350
- <style>
389
+ <style lang="scss" scoped>
351
390
  /* #app {
352
391
  font-family: Avenir, Helvetica, Arial, sans-serif;
353
392
  -webkit-font-smoothing: antialiased;
@@ -356,4 +395,63 @@ export default {
356
395
  color: #2c3e50;
357
396
  margin-top: 60px;
358
397
  } */
398
+ .grid-content {
399
+ display: grid;
400
+ // grid-template-columns: repeat(2, 1fr);
401
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
402
+ // align-items: center;
403
+ // justify-items: center;
404
+ // justify-content: center;
405
+ align-content: center;
406
+ height: 300px; /* 你想要的高度 */
407
+ gap: 10px;
408
+ div {
409
+ background-color: aqua;
410
+ }
411
+ }
412
+
413
+ .container {
414
+ display: flex;
415
+ align-items: center; /* 默认让所有子项在垂直方向居中 */
416
+ height: 200px;
417
+ background: #eee;
418
+ }
419
+ .item {
420
+ width: 60px;
421
+ height: 60px;
422
+ background: orange;
423
+ margin: 5px;
424
+ }
425
+ .item2 {
426
+ align-self: flex-start; /* 只让这个item到底部对齐 */
427
+ }
428
+
429
+ .triangle-up {
430
+ margin-left: 400px;
431
+ width: 100px;
432
+ height: 100px;
433
+ background-color: purple;
434
+ clip-path: polygon(50% 0%, 0% 0%, 0% 100%, 100% 100%);
435
+ }
436
+
437
+ .square-container {
438
+ width: 100px; /* 控制容器宽度 */
439
+ }
440
+
441
+ .square {
442
+ width: 100%;
443
+ aspect-ratio: 1 / 1;
444
+ background-color: red;
445
+ }
446
+
447
+ .ellipsis-container {
448
+ width: 100px;
449
+ // height: 100px;
450
+ border: 1px solid #ccc;
451
+ overflow: hidden;
452
+ text-overflow: ellipsis;
453
+ display: -webkit-box;
454
+ -webkit-line-clamp: 4; /* 设置行数,例如3行 */
455
+ -webkit-box-orient: vertical;
456
+ }
359
457
  </style>
package/src/api/api.js CHANGED
@@ -1,16 +1,43 @@
1
- #!/usr/bin/env node
1
+ #!/usr/bin/env node
2
2
  const fs = require("fs");
3
3
  const path = require("path");
4
4
  const SwaggerClient = require("swagger-client");
5
5
 
6
6
  // eg:node api http://220.179.249.140:20019 ./modules
7
7
 
8
- // const swaggerUrl = "http://220.179.249.140:20019/swagger/v1/swagger.json";
9
8
  const swaggerUrl = process.argv[2]
10
9
  ? `${process.argv[2]}/swagger/v1/swagger.json`
11
10
  : "";
12
11
  const modulesDir = process.argv[3] ? process.argv[3] : "src/api/modules";
13
- // process.argv[3] || "src/api/modules" || path.join(__dirname, "./modules");
12
+
13
+ let defaultRemark = `/**
14
+ * ⚠️ 警告:此文件由脚本自动生成,请勿手动编辑!
15
+ * �� 如需修改,请重新运行生成脚本
16
+ * 📅 生成时间: ${new Date().toLocaleString()}
17
+ *
18
+ */\n\n`;
19
+ const spinnerChars = ["|", "/", "-", "\\"];
20
+ let spinnerIndex = 0;
21
+ let dotCount = 0;
22
+ const maxDots = 3;
23
+ const spinner = setInterval(() => {
24
+ const dots = ".".repeat(dotCount);
25
+ process.stdout.write(`\r${spinnerChars[spinnerIndex]} 正在玩命加载中${dots}`);
26
+ spinnerIndex = (spinnerIndex + 1) % spinnerChars.length;
27
+ dotCount = (dotCount + 1) % (maxDots + 1);
28
+ }, 300);
29
+
30
+ // 设置文件为只读权限
31
+ function setFileReadOnly(filePath) {
32
+ try {
33
+ // 获取当前文件权限
34
+ const stats = fs.statSync(filePath);
35
+ // 设置只读权限 (444: 所有者、组、其他用户都只有读权限)
36
+ fs.chmodSync(filePath, 0o444);
37
+ } catch (error) {
38
+ console.warn(`⚠️ 设置文件权限失败: ${filePath}`, error.message);
39
+ }
40
+ }
14
41
 
15
42
  SwaggerClient(swaggerUrl)
16
43
  .then((client) => {
@@ -18,7 +45,6 @@ SwaggerClient(swaggerUrl)
18
45
 
19
46
  const apiModules = generateApiModules(swaggerData);
20
47
  // 创建文件夹
21
- // const modulesDir = path.join(__dirname, "./modules");
22
48
  if (!fs.existsSync(modulesDir)) {
23
49
  fs.mkdirSync(modulesDir);
24
50
  console.log(`创建了文件夹: ${modulesDir}`);
@@ -27,7 +53,8 @@ SwaggerClient(swaggerUrl)
27
53
  Object.keys(apiModules).forEach((fileName) => {
28
54
  const outputPath = path.join(modulesDir, `${fileName}.js`);
29
55
  fs.writeFileSync(outputPath, apiModules[fileName], "utf-8");
30
- console.log(`API接口已生成并保存到 ${outputPath}`);
56
+ setFileReadOnly(outputPath);
57
+ console.log(`API接口已生成并保存到 ${outputPath}(只读)`);
31
58
  });
32
59
 
33
60
  // 生成index.js入口文件
@@ -35,15 +62,22 @@ SwaggerClient(swaggerUrl)
35
62
  })
36
63
  .catch((err) => {
37
64
  console.error("获取 Swagger 数据时出错:", err);
65
+ })
66
+ .finally(() => {
67
+ clearInterval(spinner);
68
+ process.stdout.write("\r");
38
69
  });
39
70
 
40
71
  function createIndexFile(apiModules) {
41
- let str = "";
72
+ let str = defaultRemark;
42
73
  Object.keys(apiModules).forEach((fileName) => {
43
74
  str += `export * from "./${fileName}";\n`;
44
75
  });
45
76
  const outputPath = path.join(modulesDir, `index.js`);
46
77
  fs.writeFileSync(outputPath, str, "utf-8");
78
+ // 设置 index.js 也为只读
79
+ setFileReadOnly(outputPath);
80
+ console.log(`API接口已生成并保存到 ${outputPath}(只读)`);
47
81
  }
48
82
 
49
83
  // url转成键名规则
@@ -115,7 +149,9 @@ const generateApiModules = (swagger) => {
115
149
  const apiModules = {};
116
150
  // 初始化模块对象
117
151
  tags.forEach((tag) => {
118
- apiModules[tag.name] = `import { api } from "@/api/request/sendRuest"\n`;
152
+ apiModules[
153
+ tag.name
154
+ ] = `${defaultRemark}import { api } from "@/api/request/sendRuest"\n`;
119
155
  });
120
156
 
121
157
  for (const [url, methods] of Object.entries(paths)) {
@@ -0,0 +1,82 @@
1
+ #!/usr/bin/env node
2
+ // 就是执行api.js和run.js脚本 npx init http://xxxx
3
+ const { spawn } = require("child_process");
4
+ const path = require("path");
5
+
6
+ // 获取命令行参数并设置默认值
7
+ const swaggerUrl = process.argv[2];
8
+
9
+ // 执行 api.js 脚本
10
+ function runApiScript() {
11
+ return new Promise((resolve, reject) => {
12
+ console.log("📝 正在执行 swagger 脚本...");
13
+
14
+ const apiProcess = spawn(
15
+ "node",
16
+ [path.join(__dirname, "api.js"), swaggerUrl],
17
+ {
18
+ stdio: "inherit",
19
+ }
20
+ );
21
+
22
+ apiProcess.on("close", (code) => {
23
+ if (code === 0) {
24
+ console.log("✅ swagger脚本执行完成\n");
25
+ resolve();
26
+ } else {
27
+ reject(new Error(`swagger 脚本执行失败,退出码: ${code}`));
28
+ }
29
+ });
30
+
31
+ apiProcess.on("error", (err) => {
32
+ reject(new Error(`执行 swagger 时出错: ${err.message}`));
33
+ });
34
+ });
35
+ }
36
+
37
+ // 执行 run.js 脚本
38
+ function runRunScript() {
39
+ return new Promise((resolve, reject) => {
40
+ console.log("🔧 正在执行 接口 脚本...");
41
+
42
+ const runProcess = spawn(
43
+ "node",
44
+ [path.join(__dirname, "run.js"), swaggerUrl],
45
+ {
46
+ stdio: "inherit",
47
+ }
48
+ );
49
+
50
+ runProcess.on("close", (code) => {
51
+ if (code === 0) {
52
+ console.log("✅ 接口 脚本执行完成\n");
53
+ resolve();
54
+ } else {
55
+ reject(new Error(`接口 脚本执行失败,退出码: ${code}`));
56
+ }
57
+ });
58
+
59
+ runProcess.on("error", (err) => {
60
+ reject(new Error(`执行 接口 时出错: ${err.message}`));
61
+ });
62
+ });
63
+ }
64
+
65
+ // 主执行函数
66
+ async function main() {
67
+ try {
68
+ // 先执行 api.js
69
+ await runApiScript();
70
+
71
+ // 再执行 run.js
72
+ await runRunScript();
73
+
74
+ console.log("🎉 所有脚本执行完成!");
75
+ } catch (error) {
76
+ console.error("❌ 执行过程中出现错误:", error.message);
77
+ process.exit(1);
78
+ }
79
+ }
80
+
81
+ // 执行主函数
82
+ main();
package/src/api/run.js CHANGED
@@ -1,15 +1,36 @@
1
- #!/usr/bin/env node
1
+ #!/usr/bin/env node
2
2
  const http = require("http");
3
3
  const fs = require("fs");
4
4
  const path = require("path");
5
5
 
6
6
  // eg:node api http://220.179.249.140:20019 swagger.js
7
7
 
8
- // const swaggerUrl = "http://220.179.249.140:20019/swagger/v1/swagger.json";
9
8
  const swaggerUrl = process.argv[2]
10
9
  ? `${process.argv[2]}/swagger/v1/swagger.json`
11
10
  : "";
12
- const outputPath = process.argv[3] || "src/api/swagger.js" || "swagger.js";
11
+ const outputPath = process.argv[3] || "src/api/swagger.js";
12
+
13
+ const spinnerChars = ["|", "/", "-", "\\"];
14
+ let spinnerIndex = 0;
15
+ let dotCount = 0;
16
+ const maxDots = 3;
17
+ const spinner = setInterval(() => {
18
+ const dots = ".".repeat(dotCount);
19
+ process.stdout.write(`\r${spinnerChars[spinnerIndex]} 正在玩命加载中${dots}`);
20
+ spinnerIndex = (spinnerIndex + 1) % spinnerChars.length;
21
+ dotCount = (dotCount + 1) % (maxDots + 1);
22
+ }, 300);
23
+
24
+ // 设置文件为只读权限
25
+ function setFileReadOnly(filePath) {
26
+ try {
27
+ const stats = fs.statSync(filePath);
28
+ // 设置只读权限 (444: 所有者、组、其他用户都只有读权限)
29
+ fs.chmodSync(filePath, 0o444);
30
+ } catch (error) {
31
+ console.warn(`⚠️ 设置文件权限失败: ${filePath}`, error.message);
32
+ }
33
+ }
13
34
 
14
35
  http
15
36
  .get(swaggerUrl, (response) => {
@@ -28,10 +49,16 @@ http
28
49
  // 输出到文件
29
50
  // const outputPath = path.join(__dirname, "swagger.js");
30
51
  fs.writeFileSync(outputPath, apiEndpoints, "utf-8");
31
- console.log(`API地址对象已生成并保存到 ${outputPath}`);
52
+ clearInterval(spinner);
53
+ process.stdout.write("\r");
54
+ console.log(`API地址对象已生成并保存到 ${outputPath}(只读)`);
55
+ // 设置文件为只读
56
+ setFileReadOnly(outputPath);
32
57
  });
33
58
  })
34
59
  .on("error", (err) => {
60
+ clearInterval(spinner);
61
+ process.stdout.write("\r");
35
62
  console.error("获取swagger.json时出错:", err);
36
63
  });
37
64
 
@@ -91,7 +118,6 @@ const generateApiModules = (swagger) => {
91
118
  for (const [method, details] of Object.entries(methods)) {
92
119
  // 获取接口的tags
93
120
  const tags = details.tags || [];
94
- // const summary = details.summary.replace(/\s+/g, "");
95
121
  tags.forEach((tag) => {
96
122
  const key = generateKeyName(url, method);
97
123
  if (apiModules[tag]) {
@@ -105,7 +131,12 @@ const generateApiModules = (swagger) => {
105
131
  }
106
132
 
107
133
  // 生成最终的输出字符串
108
- let output = "";
134
+ let output = `/**
135
+ * ⚠️ 警告:此文件由脚本自动生成,请勿手动编辑!
136
+ * �� 如需修改,请重新运行生成脚本
137
+ * 📅 生成时间: ${new Date().toLocaleString()}
138
+ *
139
+ */\n\n`;
109
140
  for (const [moduleName, methods] of Object.entries(apiModules)) {
110
141
  const description = tags.find((e) => e.name === moduleName).description;
111
142
  output += `// ${description}\n`;
Binary file
package/src/bin/add.js ADDED
@@ -0,0 +1,78 @@
1
+ #!/usr/bin/env node
2
+ const { Command } = require("commander");
3
+ const fs = require("fs");
4
+ const path = require("path");
5
+ const vue2Template = require("./initTemplate");
6
+ const program = new Command();
7
+
8
+ const spinnerChars = ["|", "/", "-", "\\"];
9
+ let spinnerIndex = 0;
10
+ let dotCount = 0;
11
+ const maxDots = 3;
12
+ const spinner = setInterval(() => {
13
+ const dots = ".".repeat(dotCount);
14
+ process.stdout.write(`\r${spinnerChars[spinnerIndex]} 正在玩命加载中${dots}`);
15
+ spinnerIndex = (spinnerIndex + 1) % spinnerChars.length;
16
+ dotCount = (dotCount + 1) % (maxDots + 1);
17
+ }, 300);
18
+
19
+ // 自定义错误处理 - 必须在使用 program.parse() 之前调用
20
+ program.exitOverride();
21
+
22
+ try {
23
+ program
24
+ .version("0.1.0")
25
+ .argument("<moduleName>", "name of the module to create")
26
+ .option("-p, --path <customPath>", "文件路径")
27
+ .option(
28
+ "-u, --url <pageUrl>",
29
+ "分页接口URL (可选)",
30
+ "/api/app/business-report/stock-bIPaged-result"
31
+ )
32
+ .option(
33
+ "-e, --export <exportUrl>",
34
+ "分页接口导出URL (可选)",
35
+ "/api/app/business-report/export-stock-bI"
36
+ )
37
+ .option(
38
+ "-m, --swaggerModule <swaggerModule>",
39
+ "swagger.js模块名称 (可选)",
40
+ "BusinessReport"
41
+ )
42
+ .action((moduleName, options) => {
43
+ console.log(111, options);
44
+
45
+ const dir = path.join(options.path || process.cwd(), moduleName);
46
+ // 启动加载动画
47
+ if (!fs.existsSync(dir)) {
48
+ fs.mkdirSync(dir);
49
+ console.log(`创建文件夹: ${dir}`);
50
+
51
+ const templateContent = vue2Template(moduleName, options);
52
+ fs.writeFileSync(path.join(dir, `index.vue`), templateContent);
53
+ } else {
54
+ console.log(`创建失败,文件夹 ${dir} 已存在`);
55
+ }
56
+ if (options.debug) {
57
+ console.log("调试信息:", options);
58
+ }
59
+ clearInterval(spinner);
60
+ process.stdout.write("\r");
61
+ });
62
+ program.parse(process.argv);
63
+ } catch (err) {
64
+ // 捕获 commander 的错误
65
+ if (err.code === "commander.missingArgument") {
66
+ console.log("❌ 错误:缺少必需的文件名称");
67
+ console.log("📖 使用方法:");
68
+ console.log(" npx add <文件名> -p <路径>");
69
+ console.log("�� 示例:");
70
+ console.log(" npx add demo -p src/view");
71
+ process.exit(1);
72
+ } else {
73
+ // 处理其他错误
74
+ // console.error("❌ 发生错误:", err.message);
75
+ process.exit(1);
76
+ }
77
+ }
78
+ // program.parse(process.argv);
@@ -1,4 +1,49 @@
1
- const vue2Template = (moduleName) => {
1
+ function generateKeyName(url, method) {
2
+ // 移除前缀 "/api/app"
3
+ const cleanedUrl = url.replace(/\/api\/app/, "");
4
+ const arr = cleanedUrl.split("/");
5
+
6
+ // 处理 {xxx} 转换为 ByXxx
7
+ const processedArr = arr.map(
8
+ (item) =>
9
+ item
10
+ .replace(
11
+ /{(.*?)}/,
12
+ (_, param) => `By${param.charAt(0).toUpperCase() + param.slice(1)}`
13
+ ) // 处理 {xxx}
14
+ .replace(/[-_]/g, "") // 去除 - 和 _
15
+ );
16
+
17
+ // 删除第一个空项
18
+ if (processedArr[0] === "") {
19
+ processedArr.shift();
20
+ }
21
+
22
+ // 去重和拼接相邻相同的项
23
+ const resultArr = [];
24
+ for (let i = 0; i < processedArr.length; i++) {
25
+ if (i === 0 || processedArr[i] !== processedArr[i - 1]) {
26
+ // 将每项首字母大写
27
+ const capitalizedItem =
28
+ processedArr[i].charAt(0).toUpperCase() + processedArr[i].slice(1);
29
+ resultArr.push(capitalizedItem);
30
+ }
31
+ }
32
+ const key = resultArr.join("");
33
+ return `${method.toLowerCase()}${key}`;
34
+ }
35
+
36
+ const vue2Template = (moduleName, options = {}) => {
37
+ // 只有当提供了 URL 时才调用 generateKeyName
38
+ let pageUrl = "";
39
+ let exportUrl = "";
40
+ if (options.url) {
41
+ pageUrl = generateKeyName(options.url, "get");
42
+ }
43
+ if (options.export) {
44
+ exportUrl = generateKeyName(options.export, "post");
45
+ }
46
+
2
47
  return `<!--
3
48
  Filename: ${moduleName}.vue
4
49
  name: ${moduleName}
@@ -8,13 +53,13 @@ const vue2Template = (moduleName) => {
8
53
  <template>
9
54
  <div>
10
55
  <ol-search
11
- :url="swaggerUrl.getAdmissioninfoPagedresult"
56
+ :url="swaggerUrl.${pageUrl}"
12
57
  :form-search-data="formSearchData"
13
58
  @handleSearch="handleSearch"
14
59
  @handleReset="handleReset"
15
60
  />
16
61
  <ol-table
17
- :url="swaggerUrl.getAdmissioninfoPagedresult"
62
+ :url="swaggerUrl.${pageUrl}"
18
63
  :paginations="paginations"
19
64
  :btnlist="this.hasBtn(this)"
20
65
  :empty-img="tableData.emptyImg"
@@ -27,13 +72,13 @@ const vue2Template = (moduleName) => {
27
72
  </div>
28
73
  </template>
29
74
  <script>
30
- import { getAdmissioninfoPagedresult } from "@/api/modules";
31
- import { AdmissionInfo } from '@/api/swagger'
75
+ import { ${pageUrl} } from "@/api/modules";
76
+ import { ${options.swaggerModule} } from '@/api/swagger'
32
77
  export default {
33
78
  name: "${moduleName}",
34
79
  data() {
35
80
  return {
36
- swaggerUrl: AdmissionInfo,
81
+ swaggerUrl: ${options.swaggerModule},
37
82
  multipleSelection: [],
38
83
  // 查询表单
39
84
  formSearchData: {
@@ -77,7 +122,7 @@ export default {
77
122
  Page: this.paginations.page,
78
123
  MaxResultCount: this.paginations.limit
79
124
  };
80
- const { result: { items = [], totalCount = 0 } = {} } = await getAdmissioninfoPagedresult(params, {
125
+ const { result: { items = [], totalCount = 0 } = {} } = await ${pageUrl}(params, {
81
126
  isLoading: true
82
127
  });
83
128
  this.tableData.rows = items;
@@ -107,6 +152,23 @@ export default {
107
152
  this.paginations.page = val;
108
153
  this.init();
109
154
  },
155
+ export() {
156
+ let timer = this.formSearchData.value.createdTime
157
+ ;
158
+ this.formSearchData.value.BeginTime = timer ? timer[0] : "";
159
+ this.formSearchData.value.EndTime = timer ? timer[1] : "";
160
+ this.post({
161
+ url: ${options.swaggerModule}.${exportUrl},
162
+ isLoading: true,
163
+ responseType: "blob",
164
+ data: Object.assign(this.formSearchData.value, {
165
+ Page: this.paginations.page,
166
+ MaxResultCount: this.paginations.limit
167
+ })
168
+ }).then(res => {
169
+ this.fnexsl(res);
170
+ });
171
+ },
110
172
  }
111
173
  }
112
174
  </script>
@@ -115,4 +177,4 @@ export default {
115
177
  `;
116
178
  };
117
179
 
118
- module.exports = vue2Template; // Use CommonJS export
180
+ module.exports = vue2Template;
@@ -23,6 +23,25 @@ ${cyan}${bold}${star.repeat(
23
23
  ${cyan}感谢使用我们的组件库,期待你的精彩应用!${reset}
24
24
  `);
25
25
  };
26
+ const consoleSwagger = () => {
27
+ // 定义颜色和样式
28
+ const reset = "\x1b[0m"; // 重置样式
29
+ const green = "\x1b[32m"; // 绿色
30
+ const cyan = "\x1b[36m"; // 青色
31
+ const bold = "\x1b[1m"; // 粗体
32
+ const underline = "\x1b[4m"; // 下划线
33
+
34
+ // 定义图案
35
+ const star = "⭐";
36
+ const checkMark = "✔️";
37
+
38
+ // 输出成功提示
39
+ console.log(`
40
+ ${cyan}${bold}${star.repeat(
41
+ 3
42
+ )}${green}${bold}${underline}ol-base-components swagger服务加载成功! ${checkMark}
43
+ `);
44
+ };
26
45
 
27
46
  const DB_NAME = "SwaggerDB";
28
47
  const DB_VERSION = 1;
@@ -100,7 +119,7 @@ const swaggerInstall = async (swaggerUrl) => {
100
119
  // IndexedDB 获取 Swagger 数据
101
120
  const cachedData = await getData();
102
121
  if (cachedData) {
103
- consoleTooltip();
122
+ consoleSwagger();
104
123
  return Promise.resolve(cachedData);
105
124
  } else {
106
125
  // 如果没有缓存数据,重新请求 Swagger 数据
@@ -110,7 +129,7 @@ const swaggerInstall = async (swaggerUrl) => {
110
129
  const swaggerData = client.spec;
111
130
  await storeData(swaggerData);
112
131
  hideLoading();
113
- consoleTooltip();
132
+ consoleSwagger();
114
133
  return Promise.resolve(swaggerData);
115
134
  } catch (error) {
116
135
  hideLoading();
@@ -184,13 +203,7 @@ function hideLoading() {
184
203
  }
185
204
  }
186
205
 
187
- const install = async function (
188
- Vue,
189
- options = {
190
- swaggerUrl: "",
191
- outputDir: "",
192
- }
193
- ) {
206
+ const install = async function (Vue) {
194
207
  // 设置全局数据
195
208
  components.map((item) => {
196
209
  Vue.component(`ol-${item.name}`, item);
package/src/bin/init.js DELETED
@@ -1,27 +0,0 @@
1
- #!/usr/bin/env node
2
- const { Command } = require("commander");
3
- const fs = require("fs");
4
- const path = require("path");
5
- const vue2Template = require("./initTemplate");
6
- const program = new Command();
7
-
8
- program
9
- .version("0.1.0")
10
- .argument("<moduleName>", "name of the module to create")
11
- .option("-p, --path <customPath>", "custom path to create the module")
12
- .action((moduleName, options) => {
13
- const dir = path.join(options.path || process.cwd(), moduleName);
14
- if (!fs.existsSync(dir)) {
15
- fs.mkdirSync(dir);
16
- console.log(`创建文件夹: ${dir}`);
17
- const templateContent = vue2Template(moduleName);
18
- fs.writeFileSync(path.join(dir, `index.vue`), templateContent);
19
- } else {
20
- console.log(`创建失败,文件夹 ${dir} 已存在`);
21
- }
22
- if (options.debug) {
23
- console.log("调试信息:", options);
24
- }
25
- });
26
-
27
- program.parse(process.argv);