diff --git a/apps/sspanel/static/sspanel/css/sspanel.css b/apps/sspanel/static/sspanel/css/sspanel.css
index 83ad014049..b8e899e345 100644
--- a/apps/sspanel/static/sspanel/css/sspanel.css
+++ b/apps/sspanel/static/sspanel/css/sspanel.css
@@ -1,28 +1,27 @@
 /* 动态为footer添加类fixed-bottom */
 
 .fixed-bottom {
-  position: fixed;
-  bottom: 0;
-  width: 100%;
+    position: fixed;
+    bottom: 0;
+    width: 100%;
 }
 
 .errorlist {
-  color: red;
+    color: red;
 }
 
 /* Navbar免js自动响应 */
-
 #nav-toggle-state {
-  display: none;
+    display: none;
 }
 
 #nav-toggle-state:checked ~ .nav-menu {
-  display: block;
+    display: block;
 }
 
 @media all and (max-width: 768px) {
-  body {
-    /* On modern browsers, prevent the whole page to bounce */
-    overflow: hidden;
-  }
+    body {
+        /* On modern browsers, prevent the whole page to bounce */
+        overflow: hidden;
+    }
 }
diff --git a/apps/sspanel/static/sspanel/js/sspanel.js b/apps/sspanel/static/sspanel/js/sspanel.js
index e30e6bc83b..5b6cda5568 100644
--- a/apps/sspanel/static/sspanel/js/sspanel.js
+++ b/apps/sspanel/static/sspanel/js/sspanel.js
@@ -1,3 +1,5 @@
+'use strict';
+
 $(function () {
   function footerPosition() {
     $("index-footer").removeClass("fixed-bottom");
@@ -12,7 +14,6 @@ $(function () {
   $(window).resize(footerPosition);
 });
 
-'use strict';
 
 document.addEventListener('DOMContentLoaded', function () {
 
@@ -140,122 +141,132 @@ var getRandomColorSets = function (num) {
   return colorData
 }
 
-
-var genChart = function (chartId, chartType, config) {
-  /**
-      charId : 元素id 定位canvas用
-      config : 配置信息 dict类型
-          congig = {
-              title: 图表名字
-              labels :data对应的label
-              data_title: data的标题
-              data: 数据
-              x_label : x轴的lable
-              y_label : y轴的lable
-          }
-  **/
-  data = {
-    labels: config.labels,
-    datasets: [{
-      label: config.data_title,
-      data: config.data,
-      backgroundColor: getRandomColorSets(config.data.length),
-      steppedLine: false,
-      fill: false,
-    }]
+var genLineChart = function (id, config_data) {
+  let chartStatus = Chart.getChart(id);
+  if (chartStatus != undefined) {
+    chartStatus.destroy();
   }
-  if (chartType == 'doughnut') {
-    options = {
-      title: {
-        display: true,
-        positon: 'top',
-        text: config.title,
+  var ctx = document.getElementById(id);
+  var myChart = new Chart(ctx, {
+    type: "line",
+    data: {
+      labels: config_data.labels,
+      datasets: [
+        {
+          label: config_data.title,
+          data: config_data.data,
+          backgroundColor: getRandomColor(),
+          borderColor: getRandomColor,
+          borderWidth: 1,
+        },
+      ],
+    },
+    options: {
+      hover: {
+        mode: "nearest",
+        intersect: true,
       },
-      legend: {
+      title: {
         display: true,
-        position: 'bottom',
-      },
-      tooltip: {
-        enabled: false,
+        text: config_data.title,
       },
-      scaleOverlay: true,
-    }
-    if (config.labels.length > 3) {
-      options.legend.display = false
-    }
-  }
-  if (chartType == 'line') {
-    data.datasets[0].backgroundColor = getRandomColor()
-    data.datasets[0].borderColor = getRandomColor()
-    options = {
       elements: {
         point: {
-          radius: 2
-        }
+          radius: 2,
+        },
       },
       responsive: true,
-      title: {
-        display: true,
-        text: config.title,
-      },
-      hover: {
-        mode: 'nearest',
-        intersect: true
-      },
+      maintainAspectRatio: false,
       legend: {
         display: true,
       },
       scales: {
-        xAxes: [{
-          display: true,
-          scaleLabel: {
+        xAxes: [
+          {
             display: true,
-            labelString: config.x_label,
-          }
-        }],
-        yAxes: [{
-          display: true,
-          ticks: { beginAtZero: true },
-          scaleLabel: {
+            scaleLabel: {
+              display: true,
+              labelString: config_data.x_label,
+            },
+          },
+        ],
+        yAxes: [
+          {
             display: true,
-            labelString: config.y_label,
-          }
-        }]
-      }
-    }
+            ticks: { beginAtZero: true },
+            scaleLabel: {
+              display: true,
+              labelString: config_data.y_label,
+            },
+          },
+        ],
+      },
+    },
+  });
+  return myChart;
+};
+
+var genBarChart = function (id, config_data) {
+  let chartStatus = Chart.getChart(id);
+  if (chartStatus != undefined) {
+    chartStatus.destroy();
   }
-  if (chartType == 'bar') {
-    options = {
+  var ctx = document.getElementById(id);
+  var myChart = new Chart(ctx, {
+    type: "bar",
+    data: {
+      labels: config_data.labels,
+      datasets: [
+        {
+          label: config_data.title,
+          data: config_data.data,
+          backgroundColor: getRandomColor(),
+          borderColor: getRandomColor,
+          borderWidth: 1,
+        },
+      ],
+    },
+    options: {
+      hover: {
+        mode: "nearest",
+        intersect: true,
+      },
       title: {
         display: true,
-        text: config.title,
+        text: config_data.title,
+      },
+      elements: {
+        point: {
+          radius: 2,
+        },
       },
+      responsive: true,
+      maintainAspectRatio: false,
       legend: {
-        display: false,
+        display: true,
       },
       scales: {
-        xAxes: [{
-          display: true,
-          scaleLabel: {
+        xAxes: [
+          {
             display: true,
-            labelString: config.x_label,
-          }
-        }],
-        yAxes: [{
-          scaleLabel: {
+            scaleLabel: {
+              display: true,
+              labelString: config_data.x_label,
+            },
+          },
+        ],
+        yAxes: [
+          {
             display: true,
-            labelString: config.y_label,
+            ticks: { beginAtZero: true },
+            scaleLabel: {
+              display: true,
+              labelString: config_data.y_label,
+            },
           },
-          ticks: {
-            beginAtZero: true,
-            stepSize: 1,
-            suggestedMax: 7
-          }
-        }]
-      }
-    }
-  }
-  var ctx = $('#' + chartId)
-  chart = new Chart(ctx, { type: chartType, data: data, options: options })
-  chart.update();
-}
+        ],
+      },
+    },
+  });
+  return myChart;
+};
diff --git a/pyproject.toml b/pyproject.toml
index c5f5aff209..0be44c864b 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -17,6 +17,9 @@ license = "GPL-3.0 License"
 name = "django-sspanel"
 version = "0.1.0"
 
+[tool.djlint]
+preserve_blank_lines = true
+
 [tool.poetry.dependencies]
 Django = "^4.2.6"
 Markdown = "^3.3.4"
diff --git a/templates/admin/home.html b/templates/admin/home.html
new file mode 100644
index 0000000000..64522951fd
--- /dev/null
+++ b/templates/admin/home.html
@@ -0,0 +1,142 @@
+<!-- copied from https://github.com/newpanjing/simpleui/blob/master/simpleui/templates/admin/home.html -->
+{% load static %}
+
+<script src="https://cdn.staticfile.org/jquery/3.7.1/jquery.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
+<script type="text/javascript"
+        src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
+<script type="text/javascript"
+        src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
+<script src="{% static 'sspanel/js/sspanel.js' %}"></script>
+<link rel="stylesheet"
+      type="text/css"
+      href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
+
+<div id="home">
+    <!-- quick action -->
+    <el-row class="info-card">
+    <el-col :span="24">
+    <el-card class="box-card">
+    <div slot="header" class="clearfix">
+        <i class="fas fa-link"></i>
+        <span v-text="getLanuage('Quick navigation')"></span>
+    </div>
+    <div class="clearfix">
+        <div v-for="(c,j) in models" :key="c.name" class="quick-wrap">
+            <a href="javascript:;" @click="openTab(c,(j+1)+'')">
+                <span class="icon" :class="c.icon"></span>
+                <span class="card-name" v-text="c.name"></span>
+            </a>
+        </div>
+    </div>
+    </el-card>
+    </el-col>
+    </el-row>
+
+    <!-- dashboard -->
+    <el-row class="info-card">
+    <el-col :span="24">
+    <el-card class="box-card">
+    <div slot="header" class="clearfix">
+        <el-row type="flex" class="row-bg" justify="end">
+        <el-col :span="18">
+        <i class="fas fa-dashboard"></i>
+        <span>系统状态</span>
+        </el-col>
+
+        <el-col :span="5">
+        <el-input placeholder="日期" name="daterange"></el-input>
+        </el-col>
+        <el-col :span="2">
+        <el-button type="primary" id="id-button-query">查询</el-button>
+        </el-col>
+        </el-row>
+    </div>
+    <div>
+        <el-row type="flex" class="row-bg" justify="center">
+        <el-col :span="12">
+        <canvas id="id-user-status"></canvas>
+        </el-col>
+        <el-col :span="12">
+        <canvas id="id-new-user-status"></canvas>
+        </el-col>
+        </el-row>
+
+        <el-row type="flex" class="row-bg" justify="center">
+        <el-col :span="12">
+        <canvas id="id-node-traffic-status"></canvas>
+        </el-col>
+        <el-col :span="12">
+        <canvas id="id-order-status"></canvas>
+        </el-col>
+        </el-row>
+
+        <el-row type="flex" class="row-bg" justify="center">
+        <el-col :span="24">
+        <canvas id="id-order-amount-status"></canvas>
+        </el-col>
+        </el-row>
+    </div>
+    </el-card>
+    </el-col>
+    </el-row>
+</div>
+
+<script>
+    var startStr = moment().subtract(7, "day").format("YYYY-MM-DD");
+    var endStr = moment().format("YYYY-MM-DD");
+
+
+    var getSystemStatus = function () {
+        url =
+            "{% url 'api:system_status' %}" +
+            "?start=" +
+            startStr +
+            "&end=" +
+            endStr;
+        $.getJSON(url, function (res) {
+            genLineChart(
+                "id-user-status",
+                res.user_status.active_user_line_config
+            );
+            genLineChart(
+                "id-new-user-status",
+                res.user_status.new_user_line_config
+            );
+            genLineChart(
+                "id-order-amount-status",
+                res.order_status.line_config
+            );
+
+            genBarChart("id-node-traffic-status", res.node_status.bar_config);
+            genBarChart("id-order-status", res.order_status.bar_config);
+        });
+    };
+    window.onload = function () {
+        $("#id-button-query").on("click", getSystemStatus);
+        $('input[name="daterange"]').daterangepicker(
+            {
+                opens: "left",
+                endDate: moment(),
+                startDate: moment().subtract(7, "days"),
+                ranges: {
+                    今天: [moment(), moment()],
+                    最近七天: [moment().subtract(7, "day"), moment()],
+                    最近一月: [moment().subtract(1, "month"), moment()],
+                    最近三月: [moment().subtract(3, "month"), moment()],
+                    最近一年: [moment().subtract(1, "year"), moment()],
+                },
+                autoApply: true,
+                locale: {
+                    format: "YYYY-MM-DD",
+                    customRangeLabel: "自定义",
+                },
+            },
+            function (start, end, label) {
+                startStr = start.format("YYYY-MM-DD");
+                endStr = end.format("YYYY-MM-DD");
+            }
+        );
+        getSystemStatus();
+    };
+</script>
diff --git a/templates/basehead.html b/templates/basehead.html
index ce5f1e5456..e6941412f8 100644
--- a/templates/basehead.html
+++ b/templates/basehead.html
@@ -1,34 +1,33 @@
 {% load static %}
 <!-- meta -->
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta charset="UTF-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
 <link rel="shortcut icon"
       href="{% static 'img/logo/logo.ico' %}"
       type="image/x-icon" />
 <!-- css -->
 {% if user.theme and user.theme != "default" %}
     <link href="https://cdn.staticfile.org/bulmaswatch/0.8.1/{{ user.theme }}/bulmaswatch.min.css"
-          rel="stylesheet">
+          rel="stylesheet" />
 {% else %}
     <link rel="stylesheet"
           href="https://cdn.staticfile.org/bulma/0.9.4/css/bulma.min.css"
-          rel="stylesheet">
+          rel="stylesheet" />
 {% endif %}
-<link rel="stylesheet" href="{% static 'sspanel/css/sspanel.css' %}">
+<link rel="stylesheet" href="{% static 'sspanel/css/sspanel.css' %}" />
 {% if not simple_extra_static or user.is_authenticated %}
     <link rel="stylesheet"
-          href="https://cdn.staticfile.org/flag-icon-css/3.5.0/css/flag-icon.min.css">
+          href="https://cdn.staticfile.org/flag-icon-css/3.5.0/css/flag-icon.min.css" />
     <link rel="stylesheet"
-          href="https://cdn.jsdelivr.net/npm/bulma-extensions@6.2.7/dist/css/bulma-extensions.min.css">
+          href="https://cdn.jsdelivr.net/npm/bulma-extensions@6.2.7/dist/css/bulma-extensions.min.css" />
     <link rel="stylesheet"
-          href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/fontawesome.min.css">
+          href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/fontawesome.min.css" />
 {% endif %}
 <!-- js -->
 <script src="https://cdn.staticfile.org/jquery/3.7.1/jquery.min.js"></script>
 <script src="https://cdn.staticfile.org/sweetalert/2.1.2/sweetalert.min.js"></script>
 <script src="{% static 'sspanel/js/sspanel.js' %}"></script>
 {% if not simple_extra_static or user.is_authenticated %}
-    <script src="https://cdn.staticfile.org/Chart.js/2.9.3/Chart.min.js"></script>
     <script src="https://cdn.staticfile.org/clipboard.js/1.7.1/clipboard.min.js"></script>
     <script src="https://cdn.staticfile.org/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/bulma-extensions@6.2.7/dist/js/bulma-extensions.min.js"></script>
diff --git a/templates/my_admin/index.html b/templates/my_admin/index.html
index 6e26f72132..f845498a13 100644
--- a/templates/my_admin/index.html
+++ b/templates/my_admin/index.html
@@ -64,52 +64,87 @@ <h2 class="subtitle">下面是系统运行状态简报</h2>
         <canvas id="id-order-amount-status"></canvas>
     </div>
     <script>
-    var startStr = moment().subtract(7, 'day').format('YYYY-MM-DD')
-    var endStr = moment().format('YYYY-MM-DD')
+    var startStr = moment().subtract(7, "day").format("YYYY-MM-DD");
+    var endStr = moment().format("YYYY-MM-DD");
     $(function () {
         $(function () {
-            $('input[name="daterange"]').daterangepicker({
-                opens: 'left',
-                endDate: moment(),
-                startDate: moment().subtract(7, 'days'),
-                ranges: {
-                    '今天': [moment(), moment()],
-                    '最近七天': [moment().subtract(7, 'day'), moment()],
-                    '最近一月': [moment().subtract(1, 'month'), moment()],
-                    '最近三月': [moment().subtract(3, 'month'), moment()],
-                    '最近一年': [moment().subtract(1, 'year'), moment()],
+            $('input[name="daterange"]').daterangepicker(
+                {
+                    opens: "left",
+                    endDate: moment(),
+                    startDate: moment().subtract(7, "days"),
+                    ranges: {
+                        今天: [moment(), moment()],
+                        最近七天: [moment().subtract(7, "day"), moment()],
+                        最近一月: [moment().subtract(1, "month"), moment()],
+                        最近三月: [moment().subtract(3, "month"), moment()],
+                        最近一年: [moment().subtract(1, "year"), moment()],
+                    },
+                    autoApply: true,
+                    locale: {
+                        format: "YYYY-MM-DD",
+                        customRangeLabel: "自定义",
+                    },
                 },
-                "autoApply": true,
-                "locale": {
-                    "format": "YYYY-MM-DD",
-                    "customRangeLabel": "自定义",
+                function (start, end, label) {
+                    startStr = start.format("YYYY-MM-DD");
+                    endStr = end.format("YYYY-MM-DD");
                 }
-            }, function (start, end, label) {
-                startStr = start.format('YYYY-MM-DD')
-                endStr = end.format('YYYY-MM-DD')
-            });
+            );
         });
     });
 
-
     // 获取后台首页状态
     var getSystemStatus = function () {
-        url = "{% url 'api:system_status' %}" + "?start=" + startStr + "&end=" + endStr
+        url =
+            "{% url 'api:system_status' %}" +
+            "?start=" +
+            startStr +
+            "&end=" +
+            endStr;
         $.getJSON(url, function (res) {
-            genChart('id-node-traffic-status', 'bar', res.node_status.bar_config)
-            genChart('id-node-status', 'doughnut', res.node_status.doughnut_config)
+            genChart(
+                "id-node-traffic-status",
+                "bar",
+                res.node_status.bar_config
+            );
+            genChart(
+                "id-node-status",
+                "doughnut",
+                res.node_status.doughnut_config
+            );
 
-            genChart('id-user-status', 'doughnut', res.user_status.doughnut_config)
-            genChart('id-new-user-status', 'line', res.user_status.new_user_line_config)
-            genChart('id-active-user-status', 'line', res.user_status.active_user_line_config)
+            genChart(
+                "id-user-status",
+                "doughnut",
+                res.user_status.doughnut_config
+            );
+            genChart(
+                "id-new-user-status",
+                "line",
+                res.user_status.new_user_line_config
+            );
+            genChart(
+                "id-active-user-status",
+                "line",
+                res.user_status.active_user_line_config
+            );
 
-            genChart('id-order-status', 'bar', res.order_status.bar_config)
-            genChart('id-order-amount-status', 'line', res.order_status.line_config)
-            genChart('id-amount-status', 'doughnut', res.order_status.doughnut_config)
-        })
-    }
-    getSystemStatus()
+            genChart("id-order-status", "bar", res.order_status.bar_config);
+            genChart(
+                "id-order-amount-status",
+                "line",
+                res.order_status.line_config
+            );
+            genChart(
+                "id-amount-status",
+                "doughnut",
+                res.order_status.doughnut_config
+            );
+        });
+    };
+    getSystemStatus();
 
-    $("#id-button-query").on("click", getSystemStatus)
+    $("#id-button-query").on("click", getSystemStatus);
     </script>
 {% endblock main %}