update: api配置

2023-02-21 19:53:03 +08:00 · 2023-02-21 19:53:03 +08:00 · a9bb84ed6e
parent 58e9a993a3
commit a9bb84ed6e
5 changed files with 4582 additions and 4038 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -31,14 +31,15 @@
        "unplugin-vue-components": "^0.22.12",
        "vue": "^3.2.45",
        "vue-router": "^4.1.6",
-        "vue3-markdown-it": "^1.0.10"
+        "vue3-markdown-it": "^1.0.10",
+        "vue3-ts-jsoneditor": "^2.7.1"
      },
      "devDependencies": {
        "@commitlint/cli": "^17.4.1",
        "@commitlint/config-conventional": "^17.4.0",
        "@types/lodash-es": "^4.17.6",
        "@types/moment": "^2.13.0",
-        "@types/node": "^18.11.17",
+        "@types/node": "^18.14.0",
        "@vitejs/plugin-vue": "^4.0.0",
        "@vuemap/unplugin-resolver": "^1.0.4",
        "autoprefixer": "^10.4.13",
@ -1572,9 +1573,9 @@
      }
    },
    "node_modules/@types/node": {
-      "version": "18.11.18",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.18.tgz",
-      "integrity": "sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA=="
+      "version": "18.14.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.14.0.tgz",
+      "integrity": "sha512-5EWrvLmglK+imbCJY0+INViFWUHg1AHel1sq4ZVSfdcNqGy9Edv3UB9IIzzg+xPaUcAgZYcfVs2fBcwDeZzU0A=="
    },
    "node_modules/@types/normalize-package-data": {
      "version": "2.4.1",
@ -8883,6 +8884,11 @@
        "builtins": "^1.0.3"
      }
    },
+    "node_modules/vanilla-jsoneditor": {
+      "version": "0.7.11",
+      "resolved": "https://registry.npmjs.org/vanilla-jsoneditor/-/vanilla-jsoneditor-0.7.11.tgz",
+      "integrity": "sha512-DFm6Fg6gzP4FlOaydDCRWpqEsmI5umpb9fOV3hKbbNDO1ZHTUpuMwi1SmMyoEsSgdDGGzRLFNCrW0URQ9Skx4w=="
+    },
    "node_modules/vite": {
      "version": "4.0.3",
      "resolved": "https://registry.npmjs.org/vite/-/vite-4.0.3.tgz",
@ -9146,6 +9152,27 @@
        "markdown-it-toc-done-right": "^4.2.0"
      }
    },
+    "node_modules/vue3-ts-jsoneditor": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/vue3-ts-jsoneditor/-/vue3-ts-jsoneditor-2.7.1.tgz",
+      "integrity": "sha512-u8dWSG21dK0+iwbY6yhpcyRstQEKbO53+4Ma4Qhf9ED/wbGURjLvX/GTMbVsU7xB4gJKEs1a01AxBIgIab+4uA==",
+      "funding": [
+        "https://uahelp.monobank.ua/",
+        "https://bank.gov.ua/en/news/all/natsionalniy-bank-vidkriv-spetsrahunok-dlya-zboru-koshtiv-na-potrebi-armiyi",
+        "https://www.comebackalive.in.ua/",
+        "https://armysos.com.ua/donate/",
+        "http://wings-phoenix.org.ua/en/about-fund/",
+        "https://novaposhta.ua/eng/",
+        "https://voices.org.ua/en/donat/",
+        "https://www.unicef.org.uk/donate/donate-now-to-protect-children-in-ukraine/",
+        "https://www.paypal.com/donate/?cmd=_s-xclick&hosted_button_id=FYFZPVQN8J7YC&source=url",
+        "https://novaukraine.org/"
+      ],
+      "dependencies": {
+        "vanilla-jsoneditor": "^0.7.9",
+        "vue": "^3.2.37"
+      }
+    },
    "node_modules/warning": {
      "version": "4.0.3",
      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
@ -10594,9 +10621,9 @@
      }
    },
    "@types/node": {
-      "version": "18.11.18",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.11.18.tgz",
-      "integrity": "sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA=="
+      "version": "18.14.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.14.0.tgz",
+      "integrity": "sha512-5EWrvLmglK+imbCJY0+INViFWUHg1AHel1sq4ZVSfdcNqGy9Edv3UB9IIzzg+xPaUcAgZYcfVs2fBcwDeZzU0A=="
    },
    "@types/normalize-package-data": {
      "version": "2.4.1",
@ -16470,6 +16497,11 @@
        "builtins": "^1.0.3"
      }
    },
+    "vanilla-jsoneditor": {
+      "version": "0.7.11",
+      "resolved": "https://registry.npmjs.org/vanilla-jsoneditor/-/vanilla-jsoneditor-0.7.11.tgz",
+      "integrity": "sha512-DFm6Fg6gzP4FlOaydDCRWpqEsmI5umpb9fOV3hKbbNDO1ZHTUpuMwi1SmMyoEsSgdDGGzRLFNCrW0URQ9Skx4w=="
+    },
    "vite": {
      "version": "4.0.3",
      "resolved": "https://registry.npmjs.org/vite/-/vite-4.0.3.tgz",
@ -16657,6 +16689,15 @@
        "markdown-it-toc-done-right": "^4.2.0"
      }
    },
+    "vue3-ts-jsoneditor": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/vue3-ts-jsoneditor/-/vue3-ts-jsoneditor-2.7.1.tgz",
+      "integrity": "sha512-u8dWSG21dK0+iwbY6yhpcyRstQEKbO53+4Ma4Qhf9ED/wbGURjLvX/GTMbVsU7xB4gJKEs1a01AxBIgIab+4uA==",
+      "requires": {
+        "vanilla-jsoneditor": "^0.7.9",
+        "vue": "^3.2.37"
+      }
+    },
    "warning": {
      "version": "4.0.3",
      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
--- a/package.json
+++ b/package.json
@ -36,7 +36,8 @@
    "unplugin-vue-components": "^0.22.12",
    "vue": "^3.2.45",
    "vue-router": "^4.1.6",
-    "vue3-markdown-it": "^1.0.10"
+    "vue3-markdown-it": "^1.0.10",
+    "vue3-ts-jsoneditor": "^2.7.1"
  },
  "devDependencies": {
    "@commitlint/cli": "^17.4.1",
--- a/src/views/system/Apply/Api/components/ApiDoes.vue
+++ b/src/views/system/Apply/Api/components/ApiDoes.vue
@ -69,13 +69,17 @@
                </JTable>
            </div>

-            <!-- <CodeEditor v-model:model-value="111" /> -->
+            <MonacoEditor
+                v-model:modelValue="codeText"
+                style="height: 300px; width: 100%"
+                theme="vs"
+            />
        </div>
    </div>
 </template>

 <script setup lang="ts">
-import CodeEditor from '@/components/MonacoEditor/index.vue'
+import MonacoEditor from '@/components/MonacoEditor/index.vue';
 import type { apiDetailsType } from '../typing';
 import InputCard from './InputCard.vue';
 import { PropType } from 'vue';
@ -95,7 +99,7 @@ const { selectApi } = toRefs(props);
 type tableCardType = {
    columns: object[];
    tableData: object[];
-    codeText?: string;
+    codeText?: any;
    activeKey?: any;
    getData?: any;
 };
@ -199,7 +203,7 @@ const respParamsCard = reactive<tableCardType>({
        type schemaObjType = {
            paramsName: string;
            paramsType: string;
-            desc: string;
+            desc?: string;
            children?: schemaObjType[];
        };

@ -207,14 +211,20 @@ const respParamsCard = reactive<tableCardType>({
            (item: any) => item.code === code,
        )?.schema;
        const schemas = toRaw(props.schemas);
-        function findData(schemaName: string) {
+        const basicType = ['string', 'integer', 'boolean'];

+        const tableData = findData(schemaName);
+        const codeText = getCodeText(tableData, 3);
+
+        respParamsCard.tableData = tableData;
+        respParamsCard.codeText = JSON.stringify(codeText);
+
+        function findData(schemaName: string) {
            if (!schemaName || !schemas[schemaName]) {
                return [];
            }
            const result: schemaObjType[] = [];
            const schema = schemas[schemaName];
-            const basicType = ['string', 'integer', 'boolean'];
            Object.entries(schema.properties).forEach((item: [string, any]) => {
                const paramsType =
                    item[1].type ||
@ -233,14 +243,58 @@ const respParamsCard = reactive<tableCardType>({

            return result;
        }
-        console.log(Object.entries(schemas[schemaName].properties));
+        function getCodeText(arr: schemaObjType[], level: number): object {
+            const result = {};

-        respParamsCard.tableData = findData(schemaName);
+            arr.forEach((item) => {
+                switch (item.paramsType) {
+                    case 'string':
+                        result[item.paramsName] = '';
+                        break;
+                    case 'integer':
+                        result[item.paramsName] = 0;
+                        break;
+                    case 'boolean':
+                        result[item.paramsName] = true;
+                        break;
+                    case 'array':
+                        result[item.paramsName] = [];
+                        break;
+                    case 'object':
+                        result[item.paramsName] = {};
+                        break;
+                    default: {
+                        const properties = schemas[item.paramsType]
+                            .properties as object;
+                        const newArr = Object.entries(properties).map(
+                            (item: [string, any]) => ({
+                                paramsName: item[0],
+                                paramsType: level
+                                    ? (item[1].$ref &&
+                                          item[1].$ref.split('/').pop()) ||
+                                      (item[1].items &&
+                                          item[1].items.$ref
+                                              .split('/')
+                                              .pop()) ||
+                                      item[1].type ||
+                                      ''
+                                    : item[1].type,
+                            }),
+                        );
+                        result[item.paramsName] = getCodeText(
+                            newArr,
+                            level - 1,
+                        );
+                    }
+                }
+            });
+
+            return result;
+        }
    },
 });

-
-
+const { codeText } = toRefs(requestCard);

 const getContent = (data: any) => {
    if (data && data.content) {
--- a/src/views/system/Apply/Api/components/ApiTest.vue
+++ b/src/views/system/Apply/Api/components/ApiTest.vue
@ -1,18 +1,51 @@
 <template>
    <div class="api-test-container">
        <div class="top">
-            <h5>{{ selectApi.summary }}</h5>
+            <h5>{{ props.selectApi.summary }}</h5>
            <div class="input">
-                <InputCard :value="selectApi.method" />
-                <a-input :value="selectApi?.url" disabled />
+                <InputCard :value="props.selectApi.method" />
+                <a-input :value="props.selectApi?.url" disabled />
                <span class="send">发送</span>
            </div>
        </div>
+
+        <div class="api-card">
+            <h5>请求参数</h5>
+            <div class="content">
+                <VueJsoneditor
+                    height="400"
+                    mode="tree"
+                    v-model:text="requestBody.paramsText"
+                />
+                <!-- <MonacoEditor
+                    v-model:modelValue="requestBody.paramsText"
+                    style="height: 300px; width: 100%"
+                    theme="vs"
+                /> -->
+            </div>
+        </div>
+        <div class="api-card">
+            <h5>响应参数</h5>
+            <div class="content">
+                <VueJsoneditor
+                    height="400"
+                    mode="tree"
+                    v-model:text="responsesContent"
+                />
+                <!-- <MonacoEditor
+                    v-model:modelValue="responsesContent"
+                    style="height: 300px; width: 100%"
+                    theme="vs"
+                /> -->
+            </div>
+        </div>
    </div>
 </template>

 <script setup lang="ts">
-import { apiDetailsType } from '../typing';
+import VueJsoneditor from 'vue3-ts-jsoneditor';
+import MonacoEditor from '@/components/MonacoEditor/index.vue';
+import type { apiDetailsType } from '../typing';
 import InputCard from './InputCard.vue';
 import { PropType } from 'vue';

@ -22,7 +55,13 @@ const props = defineProps({
        required: true,
    },
 });
-const { selectApi } = toRefs(props);
+
+const requestBody = reactive({
+    paramsTable: [],
+    paramsText: '',
+});
+
+const responsesContent = ref('{"a":123}');
 </script>

 <style lang="less" scoped>
@ -47,5 +86,36 @@ const { selectApi } = toRefs(props);
            }
        }
    }
+    .api-card {
+        margin-top: 24px;
+        h5 {
+            position: relative;
+            padding-left: 10px;
+            font-weight: 600;
+            font-size: 16px;
+
+            &::before {
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 4px;
+                height: 100%;
+                background-color: #1d39c4;
+                border-radius: 0 3px 3px 0;
+                content: ' ';
+            }
+        }
+        .content {
+            padding-left: 10px;
+
+            :deep(.jtable-body) {
+                padding: 0;
+
+                .jtable-body-header {
+                    display: none;
+                }
+            }
+        }
+    }
 }
 </style>
--- a/yarn.lock
+++ b/yarn.lock