添加json格式化

.hbuilderx/launch.json

@@ -10,7 +10,11 @@
      	{
      		"launchtype" : "local"
      	},
-     	"type" : "uniCloud"
+     	"type" : "uniCloud",
+     	"uniapp" : 
+     	{
+     		"launchtype" : "local"
+     	}
      }
     ]
 }

components/y-json-view/readme.md

@@ -0,0 +1,23 @@
+### 1、使用
+``` html
+<scroll-view scroll-x="true">
+	<y-json-view :json="json"/>
+</scroll-view>
+```
+### 2、修改样式
+- 直接修改组件
+``` sass
+<style lang="scss">
+$tab:40upx;//缩进
+$font-size:16px;
+$colon-size:7px;//冒号两边的间隔
+//折叠箭头样式
+$arrow-size:7px;
+$arrow-color:#333;
+//颜色
+$key-color:#c35e00;
+$index-color:#0000ff;
+$vaule-color:#42c800;
+...
+</style>
+```

components/y-json-view/y-json-view.vue

@@ -0,0 +1,204 @@
+<template>
+	<view class="jsonview">
+		<view @click="toggleClose" :class="['angle', isShow ? 'closed' : '']" v-if="length"></view>
+		<view class="first-line">
+			<view v-if="jsonKey" class="json-key">"{{ jsonKey }}":</view>
+			<view v-if="length" class="json-fold">{{ prefix }} {{ isShow ? '...' + subfix : '' }}</view>
+			<view v-if="!length">{{ isArray ? '[]' : '{}' }}</view>
+		</view>
+		<view class="json-body" v-if="!isShow && length" v-for="(item, index) in items">
+			<y-json-view v-if="item.isJSON" :key="index" 
+			:json="item.value" :jsonKey="item.key"
+			 :isLast="index === items.length - 1"></y-json-view>
+			<view class="json-item" v-else>
+				<view class="json-index" v-if="isArray">{{ index }}</view>
+				<view class="json-key" v-else>{{ '"' + item.key + '"' }}</view>
+				<view class="json-colon"><view>:</view></view>
+				<view class="json-value">{{ item.value + (index === items.length - 1 ? '' : ',') }}</view>
+			</view>
+		</view>
+		<view v-if="!isShow && length" class="last-line">
+			<view>{{ subfix }}</view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	name: 'y-json-view',
+	props: {
+		json: {
+			type: [Object, Array],
+			default: null
+		},
+		jsonKey: {
+			type: String,
+			default: '' //第一个键
+		},
+		isLast: {
+			type: Boolean,
+			default: true
+		},
+		closed: {
+			type: Boolean,
+			default: false
+		}
+	},
+	mounted() {
+		this.isShow = this.closed;
+	},
+	watch: {
+		closed:function() {
+			this.isShow = this.closed;
+		},
+	},
+	data() {
+		return {
+			isShow: true
+		};
+	},
+	methods: {
+		isObjectOrArray(source) {
+			const type = Object.prototype.toString.call(source);
+			const res = type === '[object Array]' || type === '[object Object]';
+			return res;
+		},
+		toggleClose() {
+			if (this.isShow) {
+				this.isShow = false;
+			} else {
+				this.isShow = true;
+			}
+		}
+	},
+	computed: {
+		isArray() {
+			return Object.prototype.toString.call(this.json) === '[object Array]';
+		},
+		length() {
+			//返回数组长度或对象的属性个数
+			return this.isArray ? this.json.length : Object.keys(this.json).length;
+		},
+		subfix() {
+			return (this.isArray ? ']' : '}') + (this.isLast ? '' : ',');
+		},
+		prefix() {
+			return this.isArray ? '[' : '{';
+		},
+		items() {
+			const json = this.json;
+			if (this.isArray) {
+				return this.json.map(item => {
+					const isJSON = this.isObjectOrArray(item);
+					//console.log(item)
+					return {
+						value: item, // isJSON ? item : JSON.stringify(item),
+						isJSON, //相当于isJson:isJson
+						key: ''
+					};
+				});
+			} else {
+				return Object.keys(json).map(key => {
+					const item = json[key];
+					const isJSON = this.isObjectOrArray(item);
+					return {
+						value: item, // isJSON ? item : JSON.stringify(item),
+						isJSON,
+						key
+					};
+				});
+			}
+		}
+	}
+};
+</script>
+<style lang="scss">
+$tab:40upx;//缩进
+$font-size:16px;
+$colon-size:7px;//冒号两边的间隔
+$arrow-size:7px;
+$arrow-color:#333;
+$key-color:#c35e00;
+$index-color:#0000ff;
+$vaule-color:#42c800;
+.jsonview {
+	line-height:$font-size * 1.62;
+	font-size:$font-size;
+	margin: 0;
+	padding-left: $tab;
+	white-space: nowrap;
+}
+.first-line {
+	display: flex;
+	flex-direction: row;
+	justify-content: flex-start;
+	align-items: center;
+	text-align: center;
+	.json-key {
+		color:$key-color;
+	}
+	.json-fold {
+		display: flex;
+		flex-direction: row;
+		justify-content: flex-start;
+	}
+}
+.json-body {
+	position: relative;
+	padding: 0;
+	margin: 0;
+	display: flex;
+	flex-direction: row;
+	.json-item {
+		display: flex;
+		flex-direction: row;
+		justify-content: flex-start;
+		align-items: center;
+		text-align: center;
+		margin: 0;
+		padding-left: $tab;
+		.json-index {
+			color:$index-color;
+		}
+		.json-colon {
+			padding:0 $colon-size;
+		}
+		.json-key {
+			color:$key-color;
+		}
+		.json-value {
+			color:$vaule-color;
+		}
+	}
+}
+.last-line {
+	display: flex;
+	flex-direction: row;
+	padding-left: 0;
+}
+.angle {
+	position: absolute;
+	display: block;
+	left: 0;
+	text-align: center;
+
+	&::after {
+		content: '';
+		display: inline-block;
+		width: 0;
+		height: 0;
+		vertical-align: middle;
+		border-style: solid;
+		border-color:transparent;
+		border-top-color: $arrow-color;
+		border-width:$arrow-size;
+	}
+	&.closed::after {
+		border-style: solid;
+		border-color:transparent;
+		border-left-color: $arrow-color;
+		border-width:$arrow-size;
+	}
+	//}
+}
+</style>

package.json

@@ -1,93 +1,9 @@
 {
-	"name": "uni-admin 基础框架（原名 uniCloud admin）",
-	"id": "uni-template-admin",
-	"displayName": "uni-admin 基础框架",
-	"version": "2.0.2",
-	"description": "基于uni-app & uniCloud的后台管理项目模板（管理后台开发必备神器）",
-	"main": "main.js",
-	"scripts": {
-		"test": "echo \"Error: no test specified\" && exit 1"
-	},
-	"repository": "https://github.com/dcloudio/uni-admin.git",
-	"keywords": [
-        "admin",
-        "uniCloud",
-        "管理后台",
-        "云后台",
-        "uni-admin"
-    ],
-	"engines": {
-		"HBuilderX": "^3.6.0"
-	},
-	"author": "",
-	"license": "MIT",
-	"bugs": {
-		"url": "https://github.com/dcloudio/uni-admin/issues"
-	},
-	"homepage": "https://github.com/dcloudio/uni-admin#readme",
-    "dcloudext": {
-        "sale": {
-			"regular": {
-				"price": "0.00"
-			},
-			"sourcecode": {
-				"price": "0.00"
-			}
-		},
-		"contact": {
-			"qq": ""
-		},
-		"declaration": {
-			"ads": "无",
-			"data": "无",
-			"permissions": "无"
-		},
-        "npmurl": "",
-        "type": "unicloud-template-project"
-	},
-	"uni_modules": {
-		"dependencies": [],
-		"encrypt": [],
-		"platforms": {
-			"cloud": {
-				"tcb": "y",
-				"aliyun": "y"
-			},
-			"client": {
-				"App": {
-					"app-vue": "y",
-					"app-nvue": "y"
-				},
-				"H5-mobile": {
-					"Safari": "y",
-					"Android Browser": "y",
-					"微信浏览器(Android)": "y",
-					"QQ浏览器(Android)": "y"
-				},
-				"H5-pc": {
-					"Chrome": "y",
-					"IE": "n",
-					"Edge": "y",
-					"Firefox": "y",
-					"Safari": "y"
-				},
-				"小程序": {
-					"微信": "y",
-					"阿里": "y",
-					"百度": "y",
-					"字节跳动": "y",
-                    "QQ": "y",
-                    "京东": "u"
-				},
-				"快应用": {
-					"华为": "u",
-					"联盟": "u"
-                },
-                "Vue": {
-                    "vue2": "y",
-                    "vue3": "y"
-                }
-			}
-		}
-	}
-}
+    "id": "y-json-view",
+    "name": "jsonView",
+    "version": "0.0.1",
+    "description": "格式化显示json数据",
+    "keywords": [
+        "jsonview，json显示，json格式化"
+    ]
+}

pages/cyt-logs/list.vue

@@ -55,7 +55,10 @@
 						<uni-td align="center">{{item.user_model}}</uni-td>
 						<uni-td align="center">{{item.api_src}}</uni-td>
 						<uni-td align="center">{{item.request_parameters}}</uni-td>
-						<uni-td align="center">{{item.response_parameters}} change()</uni-td>
+						<uni-td align="center">
+							<y-json-view :json="item.response_parameters"/>
+							<!-- {{item.response_parameters}} change() -->
+							</uni-td>
 						<uni-td align="center">{{item.api_status}}</uni-td>
 						<uni-td align="center">{{item.error_info}}</uni-td>
 						<uni-td align="center">
@@ -140,6 +143,9 @@
 			this.$refs.udb.loadData()
 		},
 		methods: {
+			lookdetails(){
+				
+			},
 			onqueryload(data) {
 				this.exportExcelData = data
 			},