Merge pull request #857 from didi/feature/dev-web

Feature/dev web

Web/packages/core/src/components/app.vue

@@ -46,10 +46,7 @@ export default {
   methods: {
     toggleShowContainer() {
       toggleContainer()
-    },
-  },
-  created(){
-    console.log("CurState: ",this.$store.state)
+    }
   }
 };
 </script>

Web/packages/core/src/components/independ-container.vue

@@ -17,9 +17,6 @@ export default {
       return this.$store.state.independPlugins
     }
   },
-  created(){
-    console.log(this.$router)
-  },
   methods: {
     toRaw: toRaw
   }

Web/packages/core/src/components/router-container.vue

@@ -28,9 +28,6 @@ export default {
     canBack(){
       return this.$route.name !== 'home'
     }
-  },
-  created(){
-    console.log(this.$router)
   }
 }
 </script>

Web/packages/utils/src/index.js

@@ -3,5 +3,5 @@ export * from './dom'
 export * from './dragable'
 export * from './eventEmiter'
 
-import request from './network'
-export { request }
\ No newline at end of file
+// import request from './network'
+export * from './network'

Web/packages/utils/src/network.js

@@ -14,7 +14,7 @@ const getAllResponseHeadersMap = function (xhr) {
   });
 }
 
-class Request extends EventEmitter{
+export class Request extends EventEmitter{
   constructor(){
     super()
     this.hookFetchConfig = {}
@@ -23,7 +23,13 @@ class Request extends EventEmitter{
   }
   initialize(){
     let Req = this
-    let {send:originSend, open:originOpen, setRequestHeader: originSetRequestHeader} = window.XMLHttpRequest.prototype;
+    // const {send:originSend, open:originOpen, setRequestHeader: originSetRequestHeader} = window.XMLHttpRequest.prototype;
+
+    const winXhrProto = window.XMLHttpRequest.prototype;
+
+    const originSend = winXhrProto.send;
+    const originOpen = winXhrProto.open;
+    const originSetRequestHeader = winXhrProto.setRequestHeader;
     // XMLHttp
     window.XMLHttpRequest.prototype.setRequestHeader = function(){
 
@@ -36,24 +42,38 @@ class Request extends EventEmitter{
         id: guid(),
         type: 'xhr',
         requestInfo: {
-          method: args[0],
+          method: args[0].toUpperCase(),
           url: args[1]
         }
       }
 
-      xhr.addEventListener('readystatechange', function () {
+      xhr.addEventListener('readystatechange', function (e) {
         switch (xhr.readyState) {
           case 2:
             // this.headersReceived();
+          break;
           case 4:
             Req.handleDone(xhr);
+          break;
         }
       });
+
+      xhr.addEventListener('error', function (e) {
+        Req.emit('REQUEST.ERROR', {
+          id: this.reqConf.id,
+          responseInfo: {
+            type: 'error'
+          }
+        })
+      });
   
       originOpen.apply(this, args);
     };
 
     window.XMLHttpRequest.prototype.send = function(){
+      if (arguments.length) {
+        this.reqConf.requestInfo.body = arguments[0]
+      }
       Req.emit('REQUEST.SEND', this.reqConf)
       originSend.apply(this, arguments);
     }
@@ -69,8 +89,9 @@ class Request extends EventEmitter{
         type: 'fetch',
         requestInfo: {
           url: args[0],
-          method: args.length > 1 ? (args[1].method || 'get') : 'get',
+          method: (args.length > 1 ? (args[1].method || 'get') : 'get').toUpperCase(),
           headers: args.length > 1 ? (args[1].headers || {}) : {},
+          body: args.length > 1 ? (args[1].body || '') : ''
         }
       })
       const fetchResult = origFetch(...args);
@@ -128,12 +149,13 @@ class Request extends EventEmitter{
   handleDone(xhr) {
     const resType = xhr.responseType;
     let resTxt = '';
-
     const update = () => {
       this.emit('REQUEST.DONE', {
         id: xhr.reqConf.id,
         responseInfo: {
-          resRaw: resTxt
+          resRaw: resTxt,
+          contentType: xhr.getResponseHeader('Content-Type'),
+          status: xhr.status,
         }
       })
     };
@@ -157,7 +179,4 @@ class Request extends EventEmitter{
     }
   }
 
-}
-
-// 单例，保证有且只有一个
-export default new Request()
\ No newline at end of file
+}
\ No newline at end of file

Web/packages/utils/src/utils.js

@@ -20,6 +20,20 @@ export const getPartUrlByParam = (url, param) => {
   return res[fields.indexOf(param)]
 }
 
+export const getQueryMap = (queryStr) => {
+  if (!queryStr) {
+    return null
+  }
+  let queryMap = {}
+  let queryList = queryStr.split('&')
+  queryList.forEach(query => {
+    if (query) {
+      queryMap[query.split('=')[0]] = query.split('=')[1]
+    }
+  });
+  return queryMap
+}
+
 export const guid = function () {
   function S4() { 
     return (((1+Math.random())*0x10000)|0).toString(16).substring(1)

Web/packages/web/src/assets/util.js

+import { Request } from "@dokit/web-utils";
+
+export const request = new Request()
+
 export const getDataType = function (arg) {
   if (arg === null ) {
     return 'Null'

Web/packages/web/src/common/info-card.vue

@@ -78,9 +78,8 @@ export default {
       }
     },
     refresh() {
-      console.log('refresh')
       this.$emit("refresh");
-    },
+    }
   },
 };
 </script>

Web/packages/web/src/plugins/api-mock/index.js

 import ApiMock from './main.vue'
 import {getGlobalData, RouterPlugin} from '@dokit/web-core'
-import { request, getPartUrlByParam } from "@dokit/web-utils";
+import { getPartUrlByParam } from "@dokit/web-utils";
+import { request } from './../../assets/util'
 
 const mockBaseUrl = "https://pre.dokit.cn";
 

Web/packages/web/src/plugins/api-mock/main.vue

@@ -11,7 +11,6 @@
   </div>
 </template>
 <script>
-import { request, getPartUrlByParam } from "@dokit/web-utils";
 import interfaceItem from "./interface-item";
 
 const mockBaseUrl = "https://pre.dokit.cn";

Web/packages/web/src/plugins/console/index.js

@@ -8,7 +8,6 @@ export default new RouterPlugin({
   component: Console,
   icon: 'https://pt-starimg.didistatic.com/static/starimg/img/PbNXVyzTbq1618997544543.png',
   onLoad(){
-    console.log('Load')
     overrideConsole(({name, type, value}) => {
       let state = getGlobalData();
       state.logList = state.logList || [];

Web/packages/web/src/plugins/h5-door/ToolH5Door.vue

@@ -90,7 +90,6 @@ export default {
   },
   methods: {
     jumpToTarget() {
-      console.log(this.url)
       if (!URL_REG.test(this.url)) {
         window.alert('输入的地址不符合URL规则')
         return

Web/packages/web/src/plugins/network/index.js

 import Network from './main.vue'
 import {getGlobalData, RouterPlugin} from '@dokit/web-core'
-import { request } from "@dokit/web-utils";
+import { request } from "./../../assets/util";
 
 
 export default new RouterPlugin({
@@ -19,6 +19,11 @@ export default new RouterPlugin({
       let index = state.requestList.findIndex(e => e.id === info.id)
       state.requestList[index].responseInfo = info.responseInfo
     })
+
+    request.on('REQUEST.ERROR', info => {
+      let index = state.requestList.findIndex(e => e.id === info.id)
+      state.requestList[index].responseInfo = {...state.requestList[index].responseInfo, ...info.responseInfo}
+    })
   },
   onUnload(){
 

Web/packages/web/src/plugins/network/js/request.js

-import {EventEmitter} from '@dokit/web-core'
+// import {EventEmitter} from '@dokit/web-core'
 
-class Request extends EventEmitter{
-  constructor(){
-    super()
-    this.initialize()
-  }
-  initialize(){
-    let _this = this
-    let {send:originSend, open:originOpen} = window.XMLHttpRequest.prototype;
-    // TODO 增加请求拦截器，增加单测
-    window.XMLHttpRequest.prototype.open = function(method, url){
-      originOpen.apply(this, arguments);
-    }
-    window.XMLHttpRequest.prototype.send = function(){
-      originSend.apply(this, arguments);
-    }
-  }
-}
+// class Request extends EventEmitter{
+//   constructor(){
+//     super()
+//     this.initialize()
+//   }
+//   initialize(){
+//     let _this = this
+//     let {send:originSend, open:originOpen} = window.XMLHttpRequest.prototype;
+//     // TODO 增加请求拦截器，增加单测
+//     window.XMLHttpRequest.prototype.open = function(method, url){
+//       originOpen.apply(this, arguments);
+//     }
+//     window.XMLHttpRequest.prototype.send = function(){
+//       originSend.apply(this, arguments);
+//     }
+//   }
+// }
 
-// 单例，保证有且只有一个
-export default new Request()
\ No newline at end of file
+// // 单例，保证有且只有一个
+// export default new Request()
\ No newline at end of file

Web/packages/web/src/plugins/network/main.vue

 <template>
   <div class="network-plugin">
+    <div class="network-header">
+      <do-row>
+        <do-col :span="12">url</do-col>
+        <do-col :span="3">type</do-col>
+        <do-col :span="4">method</do-col>
+        <do-col :span="3">status</do-col>
+      </do-row>
+    </div>
     <requestItem
-      v-for="requestItem in requestList"
+      v-for="(requestItem, index) in requestList"
       :key="requestItem.id"
+      :index="index"
       :requestItem="requestItem"
     ></requestItem>
   </div>
@@ -21,8 +30,13 @@ export default {
   }
 };
 </script>
-<style>
+<style lang="less">
 .network-plugin {
   padding: 5px;
+  .network-header{
+    text-align: center;
+    font-weight: bold;
+    font-size: 14px;
+  }
 }
 </style>
\ No newline at end of file

Web/packages/web/src/plugins/network/request-item.vue

 <template>
-  <div class="request-item">
-    <div class="request-info" @click="showContent = !showContent">
-      <div class="request-url">{{ requestItem.requestInfo.url }}</div>
-      <div class="request-type">{{requestItem.type}}</div>
-      <div class="request-method">{{ requestItem.requestInfo.method }}</div>
-      <div class="request-status">{{ requestItem.responseInfo && requestItem.responseInfo.status }}</div>
-    </div>
+  <div class="request-item" :class="requestInfo.resType === 'error' && 'request-item-error'">
+    <do-row class="request-info" @click="showContent = !showContent">
+        <do-col :span="12">
+          <div class="request-url">{{ requestInfo.path }}</div>
+        </do-col>
+        <do-col :span="3">
+          <div class="request-type">{{requestInfo.type}}</div>
+        </do-col>
+        <do-col :span="4">
+          <div class="request-method">{{ requestInfo.method }}</div>
+        </do-col>
+        <do-col :span="3">
+          <div class="request-status">{{ requestInfo.status }}</div>
+        </do-col>
+        <do-col :span="2">
+          <div class="request-toggle-icon">
+            <span v-if="!showContent">▸</span>
+            <span v-else>▾</span>
+          </div>
+        </do-col>
+    </do-row>
     <div class="response-info" v-show="showContent">
       <div class="response-info-item">
-        <div>headers</div>
-        <div>content-type: {{requestItem.responseInfo&&requestItem.responseInfo.contentType}}</div>
+        <div class="response-info-item_title">origin url</div>
+        <div class="response-info-item_content">
+          <span class="response-info-item_content-key">{{requestInfo.url}}</span>
+        </div>
       </div>
-      <div class="response-info-item">
-        <div>response</div>
-        <pre>{{requestItem.responseInfo&&JSON.parse(requestItem.responseInfo.resRaw)}}</pre>
+      <div class="response-info-item" v-if="requestInfo.queryMap">
+        <div class="response-info-item_title">query params</div>
+        <div class="response-info-item_content" v-for="(value, key) in requestInfo.queryMap" :key="key">
+          <span class="response-info-item_content-key">{{key}}</span>
+          <span class="response-info-item_content-value">{{value}}</span>
+        </div>
+      </div>
+      <div class="response-info-item" v-if="requestInfo.body">
+        <div class="response-info-item_title">body params</div>
+        <div class="response-info-item_content">
+          <span class="response-info-item_content-value">{{requestInfo.body}}</span>
+        </div>
+      </div>
+      <div class="response-info-item" v-if="requestInfo.headers && requestInfo.headers.contentType">
+        <div class="response-info-item_title">headers</div>
+        <div class="response-info-item_content">
+          <span class="response-info-item_content-key">content-type</span>
+          <span class="response-info-item_content-value">{{requestInfo.headers&&requestInfo.headers.contentType}}</span>
+        </div>
+      </div>
+      <div class="response-info-item" v-if="requestInfo.resRaw">
+        <div class="response-info-item_title">response</div>
+        <pre>{{requestInfo.resRaw}}</pre>
       </div>
     </div>
   </div>
 </template>
 <script>
+import { getPartUrlByParam, getQueryMap } from "@dokit/web-utils";
 export default {
   props: {
-    requestItem: [Object]
+    requestItem: [Object],
+    index: [Number]
+  },
+  computed: {
+    requestInfo() {
+      let { requestInfo: {url, method, contentType, body}, responseInfo: { status, resRaw, type: resType } = {}, type } = this.requestItem
+      
+      let queryString = getPartUrlByParam(url, 'query')
+      let queryMap = queryString ? getQueryMap(queryString) : null
+      try {
+        resRaw = JSON.stringify(JSON.parse(resRaw), null, 2)
+      } catch (error) {}
+      return {
+        path: getPartUrlByParam(url, 'path'),
+        url,
+        method,
+        status,
+        type,
+        resRaw,
+        headers: {
+          contentType: contentType
+        },
+        queryMap,
+        body,
+        resType
+      }
+
+    }
   },
   data() {
     return {
@@ -31,39 +95,52 @@ export default {
 }
 </script>
 <style lang="less" scoped>
+.request-item-error{
+  background-color:#FEF0F0;
+  border: 1px solid #F8D8D7 !important; 
+}
 .request-item{
+  margin-top: 10px;
+  border-radius: 5px;
+  overflow: hidden;
+  border: 1px solid #d6e4ef;
   font-size: 12px;
-  border-bottom: 1px solid #eee;
+  padding: 5px;
   .request-info{
     display: flex;
     line-height: 24px;
+    text-align: center;
     .request-url{
-      flex: 5;
-      overflow-x: scroll;
-      white-space: nowrap;
-    }
-    .request-type{
-      flex: 1;
-      text-align: center;
-      border-left: 1px solid #eee;
-    }
-    .request-method{
-      flex: 1;
-      text-align: center;
-      border-left: 1px solid #eee;
-    }
-    .request-status{
-      flex: 1;
-      text-align: center;
-            border-left: 1px solid #eee;
-
+      text-align: left;
+      word-wrap: break-word;
+      word-break:normal;
+      color: #1485ee;
     }
   }
   .response-info{
-    background-color: #f1f2f3;
+    border-top: 1px solid #d6e4ef;
+    .response-info-item{
+      margin-top: 5px;
+      .response-info-item_title{
+        font-size: 16px;
+      }
+      .response-info-item_content{
+        .response-info-item_content-key{
+          color: #1485ee;
+          margin-right: 10px;
+          word-break: break-all;
+          white-space: normal;
+        }
+      }
+    }
     pre{
       margin: 0;
-      overflow: auto;
+      margin-top: 5px;
+      min-height: 100px;
+      max-height: 300px;
+      overflow-y: scroll;
+      border: 1px solid #aaa;
+      border-radius: 5px;
       white-space: pre-wrap;
       word-break: break-word;
     }

Web/packages/web/src/plugins/resources/index.js

@@ -10,7 +10,7 @@ export default new RouterPlugin({
 
     onLoad() {
         //console.log(window.performance.now())
-        console.log('resources')
+        // console.log('resources')
     },
     onUnload() {
 

Web/packages/web/src/plugins/resources/js/resources.js

@@ -2,7 +2,7 @@ export const ResourceMap = {
     0: 'css',
     1: 'script',
     2: 'img',
-    3: 'other',
+    // 3: 'other',
 }
 export const ResourceEnum = {
     CSS: 0,
@@ -15,7 +15,7 @@ export const ResourceEntriesMap = {
     'css': ResourceEnum.CSS,
     'script': ResourceEnum.SCRIPT,
     'img': ResourceEnum.IMG,
-    'other': ResourceEnum.OTHER,
+    // 'other': ResourceEnum.OTHER,
 }
 
 export const Resource_METHODS = ["css", "script", "img"]
@@ -62,23 +62,29 @@ export const getResourceEntries = function(callback) {
                     entryType = ResourceEntriesMap[type];
                 }
             })
-            if (entryType === ResourceEntriesMap['img']) {
-                getBase64Image(entry.name, (res) => {
-                    callback({
-                        type: entryType,
-                        initiatorType: entry.initiatorType,
-                        entryName: entry.name,
-                        base64: res
-                    })
-                })
-            } else {
-                callback({
-                    type: entryType,
-                    initiatorType: entry.initiatorType,
-                    entryName: entry.name,
-                    base64: ''
-                })
-            }
+            callback({
+                type: entryType,
+                initiatorType: entry.initiatorType,
+                entryName: entry.name,
+                base64: ''
+            })
+            // if (entryType === ResourceEntriesMap['img']) {
+            //     getBase64Image(entry.name, (res) => {
+            //         callback({
+            //             type: entryType,
+            //             initiatorType: entry.initiatorType,
+            //             entryName: entry.name,
+            //             base64: res
+            //         })
+            //     })
+            // } else {
+            //     callback({
+            //         type: entryType,
+            //         initiatorType: entry.initiatorType,
+            //         entryName: entry.name,
+            //         base64: ''
+            //     })
+            // }
         })
     }
 }
@@ -141,11 +147,10 @@ export const url2blob = function(file_url, callback) {
 export const url2blobPromise = function(file_url) {
     return new Promise(function(resolve, reject) {
         let xhr = new XMLHttpRequest();
-        xhr.open("get", file_url, true);
+        xhr.open("get", file_url);
         xhr.responseType = "blob";
-        xhr.onload = function() {
+        xhr.addEventListener('load', function() {
             if (this.status == 200) {
-                //console.log(this.response)
                 const reader = new FileReader()
                 reader.onload = function() {
                     resolve(reader.result)
@@ -154,12 +159,13 @@ export const url2blobPromise = function(file_url) {
             } else {
                 reject()
             }
-        };
-        xhr.onerror = function(e) {
+        })
+
+        xhr.addEventListener('error', function() {
             reject()
-        }
-        xhr.send();
+        })
 
+        xhr.send();
     });
 }
 

Web/packages/web/src/plugins/resources/main.vue

 <template>
   <div class="all-resources-container">
-    <resource-tap :tabs="resourceTabs" @changeTap="handleChangeTab"></resource-tap>
+    <resource-tap :tabs="resourceTabs" @changeTap="handleChangeTab" @refreshResource="refreshResource"></resource-tap>
     <div class="resource-container">
       <resource-container :resourceList = "curResourceList"></resource-container>
     </div>
@@ -37,12 +37,19 @@ export default {
   },
   created () {
     //console.log(window.performance.now())
+    this.$nextTick(()=>{
+      this.refreshResource()
+    })
   },
   mounted (){
     
   },
-  activated(){
-    this.$nextTick(()=>{
+  methods: {
+    handleChangeTab(type){
+      this.curTab = type
+      //console.log(this.$store.state.resourceList)
+    },
+    refreshResource() {
       let resourceList = [];
       getResourceEntries(({ type, initiatorType, entryName, base64}) => {
         resourceList.push({
@@ -54,13 +61,8 @@ export default {
       })
       
       this.$store.state.resourceList = resourceList
-    })
-  },
-  methods: {
-    handleChangeTab(type){
-      this.curTab = type
-      //console.log(this.$store.state.resourceList)
     }
+
   }
 }
 </script>
@@ -72,15 +74,4 @@ export default {
   flex-direction: column;
   height: 100%;
 }
-.resource-container{
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  word-break: break-all;
-  overflow-y: scroll;
-  
-    background-color: @background-color;
-    border-bottom: 1px solid @border-color;
-    
-}
 </style>
\ No newline at end of file

Web/packages/web/src/plugins/resources/resource-container.vue

@@ -2,7 +2,7 @@
   <div class="resource-container">
     <resource-item
       v-for="(item, index) in resourceList"
-      :key="index"
+      :key="item.entryName"
       :index="index"
       :type="item.type"
       :initiatorType="item.initiatorType"
@@ -13,7 +13,9 @@
 </template>
 <style lang="less" scoped>
 @import "./css/var.less";
-
+.resource-container{
+  padding: 0 5px;
+}
 </style>
 <script>
 import ResourceItem from "./resource-item"

Web/packages/web/src/plugins/resources/resource-item.vue

 <template>
-  <div class="resource-ltem">
-    <div class="resource-preview" v-html="resourcePreview" @click="toggleDetail"></div>
-    <div v-if="canShowDetail">
+  <div class="resource-item">
+    <do-row>
+      <do-col :span="22">
+        <div
+          class="resource-preview"
+          v-html="resourcePreview"
+          @click="toggleDetail"
+        ></div>
+      </do-col>
+      <do-col :span="2">
+        <div class="resource-toggle-icon">
+          <span v-if="!showContent">▸</span>
+          <span v-else>▾</span>
+        </div>
+      </do-col>
+    </do-row>
+    <div v-if="showContent">
       <div class="resource-detail">
-        <div class="type" v-html="detailType"></div>
-        <div class="code" v-if="isCode" v-html="detailCode"></div>
-        <div class="img-thumb" v-if="isImg" v-html="detailImgThumb"></div>
-        <div class="img-size" v-if="isImg" v-html="detailImgSize"></div>
+        <div v-html="detailHtml"></div>
+        <div class="resource-empty" v-if="!detailHtml">Loading ~</div>
       </div>
-      
     </div>
   </div>
 </template>
 <script>
-import {ResourceMap, imgLoad, url2blobPromise,trimLeft} from './js/resources'
-
+import {
+  ResourceMap,
+  imgLoad,
+  url2blobPromise,
+  trimLeft,
+} from "./js/resources";
 
 export default {
-  components: {
-
-  },
+  components: {},
   props: {
     index: [Number],
     type: [Number],
@@ -27,188 +40,115 @@ export default {
     entryName: [String],
     base64: [String],
   },
-  data () {
+  data() {
     return {
-      showDetail: false,
-      codehtml: `Loading...`,
-      imghtml: `Loading...`,
-      sizehtml: `Loading...`,
-      base64img:'',
-    }
+      showContent: false,
+      detailImgThumb: "",
+      detailHtml: ""
+    };
   },
+
   computed: {
-    isImg(){
-      return ResourceMap[this.type]==="img"
+    resourcePreview() {
+      let index = this.index;
+      let url = this.entryName;
+      let html = `<div>${index + 1}.${url}</div>`;
+      return html;
     },
-    isCode(){
-      return ResourceMap[this.type]==="css" || ResourceMap[this.type]==="script"
-    },
-    canShowDetail () {
-      return this.showDetail
-    },
-    detailType(){
-      let typehtml = `initiatorType:${this.initiatorType}`
-      return typehtml
+  },
+  methods: {
+    toggleDetail() {
+      this.showContent = !this.showContent;
+      if (this.detailHtml) return;
+
+      if (ResourceMap[this.type] === "img") {
+        this.getDetailImgThumb((htmlSrc) => {
+          this.detailHtml = htmlSrc;
+        });
+      } else {
+        this.getDetailCode((htmlSrc) => {
+          this.detailHtml =
+            `<div style="max-height: 300px;overflow-y: scroll;overflow-x:hidden;word-break:break-all;text-align: left;">` +
+            htmlSrc +
+            `</div>`;
+        });
+      }
     },
-    detailImgThumb(){
+    getDetailImgThumb(callback) {
       let url;
-      if(this.base64 !== ""){
-        url = this.base64
-      }else{
-        url = this.entryName
+      if (this.base64 !== "") {
+        url = this.base64;
+      } else {
+        url = this.entryName;
       }
-      this.imghtml = `<img src = "${url}" style="object-fit: cover;height:100px" />`
-      return this.imghtml
+      let htmlSrc = "";
+      htmlSrc = `<img src = "${url}" style="object-fit: cover;height:100px" />`;
+      this.getDetailImgSize((r) => {
+        htmlSrc += r;
+        callback(htmlSrc);
+      });
     },
-    detailImgSize(){
+    getDetailImgSize(callback) {
       let url;
-      if(this.base64 !== ""){
-        url = this.base64
-      }else{
-        url = this.entryName
+      if (this.base64 !== "") {
+        url = this.base64;
+      } else {
+        url = this.entryName;
       }
-      imgLoad(url, (w, h) =>{
-        this.sizehtml =  `${w}*${h}`
-      })
-      return this.sizehtml
+      imgLoad(url, (w, h) => {
+        callback(`<div>${w}*${h}</div>`);
+      });
     },
-    detailCode(){
-      url2blobPromise(this.entryName).then((res)=>{
-          res = res.replace(/</g,'&lt;')
-          res = res.replace(/>/g,'&gt;')
-          let tmp = res
-          tmp = tmp.split('\n')
-          let len  = tmp.length
-          let r = ``
-          for(let i=0; i<len; i=i+1){
-            tmp[i] = trimLeft(tmp[i])
-            r += `<div class="codeline" style="display:flex;"><div class="codeindex" style="min-width: 40px;color: #1485ee;">${i+1}</div><div class="codevalue">${tmp[i]}</div></div>`
+    getDetailCode(callback) {
+      url2blobPromise(this.entryName)
+        .then((res) => {
+          res = res.replace(/</g, "&lt;");
+          res = res.replace(/>/g, "&gt;");
+          let tmp = res;
+          tmp = tmp.split("\n");
+          let len = tmp.length;
+          let r = ``;
+          for (let i = 0; i < len; i = i + 1) {
+            tmp[i] = trimLeft(tmp[i]);
+            r += `
+              <div class="codeline" style="display:flex;line-height:14px;">
+                <div class="codeindex" style="min-width: 40px;background-color:#F0F0F0;color: #808080;text-align:right;padding-right:5px;">${i + 1}</div>
+                <div class="codevalue">${tmp[i]}</div>
+              </div>
+            `;
           }
-          this.codehtml = r
-          
-        }).catch(()=>{
-          this.codehtml = `fail to load resource`
+          callback(r);
         })
-      return this.codehtml
+        .catch(() => {
+          callback(`fail to load resource`);
+        });
     },
-    resourcePreview () {
-      let index = this.index
-      let url = this.entryName
-      let html = `<div>${index+1}.${url}</div>`
-      return html
-    },
-    resourceDetail () {
-     
-      let type = ResourceMap[this.type]
-      let url = this.entryName
-      let initiatorType = this.initiatorType
-      let typehtml = `<div class="type">initiatorType:${initiatorType}</div>`
-
-      
-      if(type === 'script' || type === 'css'){
-        
-        url2blobPromise(url).then((res)=>{
-          res = res.replace(/</g,'&lt;')
-          res = res.replace(/>/g,'&gt;')
-          let tmp = res
-          tmp = tmp.split('\n')
-          let len  = tmp.length
-          let r = ``
-          for(let i=0; i<len; i=i+1){
-            tmp[i] = trimLeft(tmp[i])
-            r += `<div class="codeline"><div class="codeindex">${i+1}</div><div class="codevalue">${tmp[i]}</div></div>`
-          }
-          this.codehtml = `<div class="code">`+r+`</div>`
-        }).catch(()=>{
-          this.codehtml = `<div class="code">fail to load resource</div>`
-        })
-        return typehtml + this.codehtml
-        
-      }
-      
-      else if(type === 'img'){
-        
-        if(this.base64 !== ""){
-          this.imghtml = `<img src = "${this.base64}" class = "img-thumb" />`
-          imgLoad(this.base64, (w, h) =>{
-            this.sizehtml =  `<div class="img-size">${w}*${h}</div>`
-          })
-        }
-        else{
-          this.imghtml = `<img src = "${url}" class = "img-thumb" />`
-          imgLoad(url, (w, h) =>{
-            this.sizehtml =  `<div class="img-size">${w}*${h}</div>`
-          })
-        }
-        return typehtml+this.imghtml+this.sizehtml
-      }
-      else if(type === 'other'){
-        typehtml = `<div class="type" style="border:0">initiatorType:${initiatorType}</div>`
-        return typehtml
-      }
-      
-    }
   },
-
-  methods: {
-    toggleDetail () {
-      this.showDetail = !this.showDetail
-    },
-  }
-}
+};
 </script>
 <style lang="less" scoped>
-  .resource-ltem{
-    padding: 10px 20px;
-    border-top: 1px solid #eee;
-    text-align: left;
-    font-size: 12px;
-  }
-  .resource-ltem:first-child {
-    border: none;
-  }
-  .resource-ltem:nth-of-type(odd){
-    background:#f3f3f3;
-  }
-  .resource-preview{
-    
-  }
+.resource-item {
+  margin-top: 10px;
+  border-radius: 5px;
+  overflow: hidden;
+  border: 1px solid #d6e4ef;
+  font-size: 12px;
+}
+.resource-preview {
+  word-break: break-all;
+  color: #1485ee;
+  padding: 5px;
+}
+.resource-toggle-icon {
+  line-height: 24px;
+}
 
-  .resource-detail {
-    margin: 5px 10px;
-    border: 1px solid gray;
-    text-align: center;
-    .type  {
-      padding: 5px 10px;
-      font-size: 12px;
-      text-align: center;
-    }
-    .code{
-      border-top: 1px solid gray;
-      padding: 10px 10px;
-      max-height: 300px;
-      overflow-y: scroll;
-      text-align: left;
-      .codeline{
-        display: flex;
-        flex: 1;
-        .codeindex{
-          min-width: 40px;
-          color: #1485ee;
-        }
-        .codevalue{
-          
-        }
-      }
-    }
-    .img-thumb{
-      border-top: 1px solid gray;
-      padding: 5px 0px;
-      height: 100px;
-    }
-    .img-size{
-      padding:5px 0px;
-    }
+.resource-detail {
+  border-top: 1px solid #d6e4ef;
+  text-align: center;
+  .resource-empty {
+    padding: 10px;
+    font-size: 16px;
   }
-  
+}
 </style>
\ No newline at end of file

Web/packages/web/src/plugins/resources/resource-tap.vue

@@ -10,6 +10,9 @@
       >
         <span class="tab-item-text">{{ item.name }}</span>
       </div>
+      <div class="tab-item" @click="handleRefresh">
+        <img style="width:16px;margin-top:12px;" src="data:image/png;base64,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" alt="" srcset="">
+      </div>
     </div>
   </div>
 </template>
@@ -59,6 +62,9 @@ export default {
       this.curIndex = index;
       this.$emit("changeTap", type);
     },
+    handleRefresh() {
+      this.$emit("refreshResource");
+    }
   },
 };
 </script>
\ No newline at end of file

Web/packages/web/src/plugins/storage/info-card.vue

@@ -82,7 +82,6 @@ export default {
       }
     },
     refresh() {
-      console.log("refresh");
       this.$emit("refresh");
     },
   },

Web/playground/index.html

@@ -19,7 +19,12 @@
 </script>
 <script>
   setTimeout(() => {
-    // fetch('https://www.tianqiapi.com/free/week?appid=68852321&appsecret=BgGLDVc7')
+    // fetch('https://www.tianqiapi.com/free/day?appid=68852321&appsecret=BgGLDVc7', {
+    //   body: JSON.stringify({
+    //     a:1
+    //   }),
+    //   method: 'get',
+    // })
     //   .then((response) => {
     //     let weatherInfo = response.json();
     //     return weatherInfo;
@@ -33,8 +38,10 @@
     }
     var oReq = new XMLHttpRequest();
     oReq.addEventListener("load", reqListener);
-    oReq.open("GET", "https://www.tianqiapi.com/free/week?appid=68852321&appsecret=BgGLDVc7");
-    oReq.send();
+    oReq.open("post", "https://www.tianqiapi.com/free/week?appid=68852321&appsecret=BgGLDVc7");
+    oReq.send(JSON.stringify({
+      a:1
+    }));
   }, 5000);
 </script>
 </html>
\ No newline at end of file