Merge branch 'dev'

trueleaf · Feb 28, 2021 · d9a45bd · d9a45bd
2 parents e42ab95 + 1f95454
commit d9a45bd
Show file tree

Hide file tree

Showing 84 changed files with 22,918 additions and 8,835 deletions.
diff --git a/babel.config.js b/babel.config.js
@@ -1,3 +1,12 @@
 module.exports = {
     presets: ["@vue/cli-plugin-babel/preset"],
+    plugins: [
+        [
+            "component",
+            {
+                libraryName: "element-ui",
+                styleLibraryName: "theme-chalk",
+            },
+        ],
+    ],
 };
diff --git a/package.json b/package.json
@@ -61,6 +61,7 @@
     "@vue/cli-service": "~4.5.0",
     "@vue/eslint-config-airbnb": "^5.3.0",
     "babel-eslint": "^10.1.0",
+    "babel-plugin-component": "^1.1.1",
     "base64-inline-loader": "^1.1.1",
     "electron": "^9.0.0",
     "electron-devtools-installer": "^3.1.0",

diff --git a/public/index.html b/public/index.html
@@ -13,8 +13,8 @@
                 <%= process.env.VUE_APP_TITLE %>
             <% } %>
         </title>
-        <link rel="stylesheet" href="https://at.alicdn.com/t/font_1072300_dkv7k4hoib.js"/>
-        <script src="https://at.alicdn.com/t/font_1072300_dkv7k4hoib.js"></script>
+        <link rel="stylesheet" href="https://at.alicdn.com/t/font_1072300_y60qe4owp3d.css"/>
+        <script src="https://at.alicdn.com/t/font_1072300_y60qe4owp3d.js"></script>
         <% if (process.env.NODE_ENV === "production") { %>
             <script>
                 var _hmt = _hmt || [];

diff --git a/src/config/config.default.js b/src/config/config.default.js
@@ -72,7 +72,7 @@ module.exports = {
     mainConfig: {
         width: 1440,
         height: 768,
-        useLocalFile: true, //使用本地文件作为主进程加载内容
+        useLocalFile: false, //使用本地文件作为主进程加载内容
         onlineUrl: "http://47.107.70.26/jobtool", //线上地址
     },
     //打包相关配置

diff --git a/src/renderer/components/apidoc/array-view/g-array-view.vue b/src/renderer/components/apidoc/array-view/g-array-view.vue
@@ -7,11 +7,14 @@
 <template>
     <div class="s-array-view">
         <div class="header">
+            <div class="search">
+                <input v-model="queryString" type="text" placeholder="关键词过滤...">
+            </div>
             <slot name="header"/>
         </div>
         <div class="content">
             <div class="code-banner">
-                <template v-for="(item, index) in astValue">
+                <template v-for="(item, index) in filterAstValue">
                     <div v-if="!item._hidden" :key="index" class="banner-wrap">
                         <span class="number-line">{{ item.line }}</span>
                         <span
@@ -24,19 +27,23 @@
                 </template>
             </div>
             <div class="code-wrap">
-                <template v-for="(item, index) in astValue">
+                <template v-for="(item, index) in filterAstValue">
                     <span v-show="!item._hidden" :key="index" class="line" :class="{active: item._close}" @mousedown.stop="handleCheckBraceMatch(item)">
                         <span v-for="(indent) in item.indent" :key="indent" class="indent"></span>
                         <span>
                             <!-- <label v-if="item.path.value" class="checkbox">
                                 <input type="checkbox">
                                 <i class="el-icon-check"></i>
                             </label> -->
-                            <span class="path">{{ item.path.value }}</span>
+                            <span class="path">
+                                <s-emphasize :value="item.path.value" :keyword="queryString"></s-emphasize>
+                            </span>
                             <span v-if="item.colon" class="colon">{{ item.colon }}&nbsp;</span>
                             <span v-if="item.leftBracket.value" class="bracket" :class="{active: activeBracketId && item.leftBracket.pairId === activeBracketId}">{{ item.leftBracket.value }}</span>
                             <span v-if="item.leftCurlBrace.value" class="curly-brace" :class="{active: activeCurlyBraceId && item.leftCurlBrace.pairId === activeCurlyBraceId}">{{ item.leftCurlBrace.value }}</span>
-                            <span v-if="item.valueType === 'string'" class="string-value">{{ item.value }}</span>
+                            <span v-if="item.valueType === 'string'" class="string-value">
+                                <s-emphasize :value="item.value" :keyword="queryString"></s-emphasize>
+                            </span>
                             <span v-if="item.valueType === 'number'" class="number-value">{{ item.value }}</span>
                             <span v-if="item.valueType === 'boolean'" class="boolean-value">{{ item.value }}</span>
                             <span v-if="item.valueType === 'null'" class="null-value">null</span>
@@ -45,7 +52,9 @@
                             <span class="bracket" :class="{active: activeBracketId && item.rightBracket.pairId === activeBracketId}">{{ item.rightBracket.value }}</span>
                             <span class="comma">{{ item.comma }}</span>
                             <span v-if="item.comma" class="orange ml-1">{{ item.required ? "" : "(可选)" }}</span>
-                            <span v-if="item.description" class="description ml-1">//{{ item.description }}</span>
+                            <span v-if="item.description" class="description ml-1">
+                                //<s-emphasize :value="item.description" :keyword="queryString"></s-emphasize>
+                            </span>
                         </span>
                         <span v-show="item._close" class="number-value"></span>
                     </span>
@@ -66,8 +75,28 @@ export default {
             },
         },
     },
+    computed: {
+        filterAstValue() {
+            const result = this.astValue.map((val) => {
+                const matchedPath = this.queryString && val.path.value.toString().match(this.queryString);
+                const matchedValue = this.queryString && val.value.toString().match(this.queryString);
+                const matchedDescription = this.queryString && val.description.toString().match(this.queryString);
+                if (matchedPath || matchedValue || matchedDescription) {
+                    return {
+                        ...val,
+                        _matched: true,
+                    };
+                }
+                return {
+                    ...val,
+                };
+            })
+            return result;
+        },
+    },
     data() {
         return {
+            queryString: "", //查询字符串
             wordNum: 0, //字段数量
             astValue: [], //当前渲染树数据
             activeCurlyBraceId: "", //当前匹配的大括号id
@@ -160,7 +189,7 @@ export default {
                     const isObject = itemType === "object";
                     const isArray = itemType === "array";
                     const objectHasValue = (isObject && item.children.length > 0);
-                    const arrayHasValue = (isArray && item.children.length > 0);
+                    const arrayHasValue = (isArray && item.children.length > 0 && item.children.some((val) => val.key !== "" || val.value !== ""));
                     const isSimpleType = ((itemType === "string") || (itemType === "boolean") || (itemType === "number") || (itemType === "null") || (itemType === "undefined"));
                     const astInfo = this.generateAstInfo();
                     if (isSimpleType && !itemValue && !itemPath) {
@@ -209,6 +238,7 @@ export default {
                         const uuid = Math.random();
                         astInfo.path.value = itemPath;
                         astInfo.leftBracket.pairId = uuid;
+                        astInfo.colon = ":";
                         astInfo.leftBracket.value = "[";
                         astInfo.rightBracket.value = "]";
                         astInfo.rightBracket.pairId = uuid;
@@ -341,6 +371,23 @@ $theme-color: #282c34;
         color: $gray-300;
         display: flex;
         align-items: center;
+        position: relative;
+        justify-content: flex-end;
+        .search {
+            &>input {
+                height: size(20);
+                line-height: size(20);
+                margin-right: size(20);
+                border: lighten($theme-color, 10%);
+                background: lighten($theme-color, 20%);
+                color: $gray-300;
+                text-indent: size(5);
+                &::placeholder {
+                    color: $gray-300;
+                    font-size: fz(12);
+                }
+            }
+        }
     }
     .content {
         display: inline-flex;

diff --git a/src/renderer/components/apidoc/json-view/g-json-view.vue b/src/renderer/components/apidoc/json-view/g-json-view.vue
@@ -6,7 +6,9 @@
 */
 <template>
     <div class="s-json-view">
-        <slot name="header"/>
+        <div class="header">
+            <slot name="header"/>
+        </div>
         <div class="content">
             <div class="code-banner">
                 <template v-for="(item, index) in astValue">
@@ -166,7 +168,7 @@ export default {
                         const isObject = type === "object";
                         const isArray = type === "array";
                         const objectHasValue = (isObject && Object.keys(value).length > 0);
-                        const arrayHasValue = (isArray && value.length > 0);
+                        const arrayHasValue = (isArray && value.length > 0 && value.some((val) => val.key !== "" || val.value !== ""));
                         if (isSimpleType) { //简单类型数据 x: 1
                             const realValue = type === "string" ? `"${value}"` : value;
                             astInfo.indent = indent * objLevel;
@@ -361,6 +363,9 @@ export default {
     font-size: size(14);
     background: #282c34;
     font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
+    .header {
+        position: relative;
+    }
     .content {
         display: inline-flex;
         .code-banner {
@@ -410,7 +415,7 @@ export default {
         .code-wrap {
             flex: 1;
             .line {
-                height: size(20);
+                min-height: size(20);
                 display: flex;
                 align-items: center;
                 width: 100%;
@@ -445,7 +450,11 @@ export default {
                 justify-content: center;
             }
             .path {
-                color: #f8c555,
+                color: #f8c555;
+                vertical-align: top;
+            }
+            .colon {
+                vertical-align: top;
             }
             .colon, .bracket, .comma, .curly-brace {
                 color: #ccc;
@@ -468,6 +477,7 @@ export default {
             .string-value {
                 color: #7ec699;
                 font-size: .9em;
+                white-space: pre;
             }
             .boolean-value {
                 color: #cc99cd;

diff --git a/src/renderer/components/common/emphasize/g-emphasize.vue b/src/renderer/components/common/emphasize/g-emphasize.vue
@@ -7,7 +7,12 @@
 <template>
     <span>
         <span>{{ leftStr }}</span>
-        <span :style="{color: activeColor}">{{ emphasizeStr }}</span>
+       <span
+            :style="{
+                color: background ? '' : activeColor,
+                background: isMatched && background ? activeColor : '',
+            }"
+            >{{ emphasizeStr }}</span>
         <span>{{ rightStr }}</span>
     </span>
 </template>
@@ -27,6 +32,15 @@ export default {
             type: String,
             default: "#f60",
         },
+        background: {
+            type: Boolean,
+            default: false,
+        },
+    },
+    computed: {
+        isMatched() {
+            return this.keyword && this.value.match(this.keyword)
+        },
     },
     data() {
         return {

diff --git a/src/renderer/components/common/label-value/g-label-value.vue b/src/renderer/components/common/label-value/g-label-value.vue
@@ -57,9 +57,7 @@ export default {
     align-items: center;
     flex: 0 0 auto;
     max-width: 100%;
-    &:not(:last-child) {
-        margin-bottom: size(10);
-    }
+    margin-bottom: size(10);
     .label {
         color: $gray-800;
         display: inline-flex;