app: debug: add hot routes

index.js

@@ -36,6 +36,7 @@ app.use(header);
 app.context.debug = {
     hitCache: 0,
     request: 0,
+    routes: [],
 };
 app.use(debug);
 

middleware/debug.js

@@ -1,8 +1,16 @@
 module.exports = async (ctx, next) => {
-    await next();
+    if (!ctx.debug.routes[ctx.request.path]) {
+        ctx.debug.routes[ctx.request.path] = 0;
+    }
+    ctx.debug.routes[ctx.request.path]++;
 
     if (ctx.request.path !== '/') {
         ctx.debug.request++;
+    }
+
+    await next();
+
+    if (ctx.request.path !== '/') {
         if (ctx.response.get('X-Koa-Redis-Cache') || ctx.response.get('X-Koa-Memory-Cache')) {
             ctx.debug.hitCache++;
         }

router.js

@@ -16,7 +16,15 @@ router.get('/', async (ctx) => {
     ctx.set({
         'Content-Type': 'text/html; charset=UTF-8',
     });
+
     const time = (+new Date() - startTime) / 1000;
+    const routes = Object.keys(ctx.debug.routes).sort((a, b) => ctx.debug.routes[b] - ctx.debug.routes[a]);
+    const hotRoutes = routes.slice(0, 10);
+    let hotRoutesValue = '';
+    hotRoutes.forEach((item) => {
+        hotRoutesValue += `${ctx.debug.routes[item]}&nbsp;&nbsp;${item}<br>`;
+    });
+
     ctx.body = art(path.resolve(__dirname, './views/welcome.art'), {
         debug: [
             {
@@ -43,6 +51,10 @@ router.get('/', async (ctx) => {
                 name: '运行时间',
                 value: time + ' 秒',
             },
+            {
+                name: '热门路由',
+                value: hotRoutesValue,
+            },
         ],
     });
 });

views/welcome.art

@@ -28,7 +28,7 @@
         }
 
         summary {
-            margin-bottom: 20px;
+            margin-bottom: 10px;
             outline: none;
             cursor: pointer;
         }
@@ -41,8 +41,14 @@
         }
 
         .debug-item {
-            margin: 10px 0;
+            margin: 5px 0;
-            font-size: 14px;
+            font-size: 12px;
+            line-height: 24px;
+        }
+
+        .debug-value {
+            display: inline-block;
+            vertical-align: top;
         }
 
     </style>
@@ -72,7 +78,7 @@
             {{ each debug }}
             <div class="debug-item">
                 <span class="debug-key">{{ $value.name }}: </span>
-                <span class="debug-value">{{ $value.value }}</span>
+                <span class="debug-value">{{@ $value.value }}</span>
             </div>
             {{ /each }}
         </details>