增加异常模板处理

2025-04-06 03:58:04 +08:00 · 2022-04-29 12:49:12 +08:00 · 2022-04-29 12:49:12 +08:00 · ae9b846015
commit ae9b846015
parent 970edecac0
8 changed files with 480 additions and 18 deletions
--- a/app/admin/view/error.php
+++ b/app/admin/view/error.php
@ -9,7 +9,7 @@ if (!function_exists('parse_padding')) {
 }

 if (!function_exists('parse_class')) {
-    function parse_class($name)
+    function parse_class($name): string
    {
        $names = explode('\\', $name);
        return '<abbr title="' . $name . '">' . end($names) . '</abbr>';
@ -17,14 +17,14 @@ if (!function_exists('parse_class')) {
 }

 if (!function_exists('parse_file')) {
-    function parse_file($file, $line)
+    function parse_file($file, $line): string
    {
        return '<a class="toggle" title="' . "{$file} line {$line}" . '">' . basename($file) . " line {$line}" . '</a>';
    }
 }

 if (!function_exists('parse_args')) {
-    function parse_args($args)
+    function parse_args($args): string
    {
        $result = [];
        foreach ($args as $key => $item) {
@ -386,7 +386,9 @@ if (!function_exists('echo_value')) {
            </div>
            <?php if (!empty($trace['source'])) { ?>
                <div class="source-code">
-                    <pre class="prettyprint lang-php"><ol start="<?php echo $trace['source']['first']; ?>"><?php foreach ((array)$trace['source']['source'] as $key => $value) { ?><li class="line-<?php echo " {$index}-" . ($key + $trace['source']['first']) . ($trace['line'] === $key + $trace['source']['first'] ? ' line-error' : ''); ?>"><code><?php echo htmlentities($value); ?></code></li><?php } ?></ol></pre>
+<pre class="prettyprint lang-php">
+<ol start="<?php echo $trace['source']['first']; ?>"><!--<?php foreach ((array)$trace['source']['source'] as $key => $value) { ?>--><li class="line-<?php echo " {$index}-" . ($key + $trace['source']['first']) . ($trace['line'] === $key + $trace['source']['first'] ? ' line-error' : ''); ?>"><code><?php echo htmlentities($value); ?></code></li><!--<?php } ?>--></ol>
+</pre>
                </div>
            <?php } ?>
            <div class="trace">
@ -468,7 +470,6 @@ if (!function_exists('echo_value')) {
    <script>
        function $(selector, node) {
            var elements;
-
            node = node || document;
            if (document.querySelectorAll) {
                elements = node.querySelectorAll(selector);
--- a/config/app.php
+++ b/config/app.php
@ -16,29 +16,36 @@

 return [
    // 应用命名空间
-    'app_namespace'    => '',
+    'app_namespace'           => '',
    // 应用快速访问
-    'app_express'      => true,
+    'app_express'             => true,
    // 是否启用路由
-    'with_route'       => true,
+    'with_route'              => true,
    // 超级用户账号
-    'super_user'       => 'admin',
+    'super_user'              => 'admin',
    // 默认时区
-    'default_timezone' => 'Asia/Shanghai',
+    'default_timezone'        => 'Asia/Shanghai',
    // 应用映射（自动多应用模式有效）
-    'app_map'          => [],
+    'app_map'                 => [],
    // 域名绑定（自动多应用模式有效）
-    'domain_bind'      => [],
+    'domain_bind'             => [],
    // 禁止URL访问的应用列表（自动多应用模式有效）
-    'deny_app_list'    => [],
+    'deny_app_list'           => [],
    // 非调试模式时显示错误的消息
-    'error_message'    => '页面错误！请稍后再试～',
+    'error_message'           => '页面错误！请稍后再试～',
    // CORS 自动配置跨域
-    'cors_auto'        => true,
+    'cors_auto'               => true,
    // CORS 配置跨域域名
-    'cors_host'        => [],
+    'cors_host'               => [],
    // CORS 授权请求方法
-    'cors_methods'     => 'GET,PUT,POST,PATCH,DELETE',
+    'cors_methods'            => 'GET,PUT,POST,PATCH,DELETE',
    // CORS 跨域头部字段
-    'cors_headers'     => 'Api-Type,Api-Name,Api-Uuid,Api-Token,User-Form-Token,User-Token,Token',
+    'cors_headers'            => 'Api-Type,Api-Name,Api-Uuid,Api-Token,User-Form-Token,User-Token,Token',
+    // 异常模板路径配置
+    'exception_tmpl'          => app()->getAppPath() . 'admin/view/error.php',
+    // 异常状态模板配置，非开发模式有效
+    'http_exception_template' => [
+        404 => app()->getRootPath() . 'public/static/theme/err/404.html',
+        500 => app()->getRootPath() . 'public/static/theme/err/500.html'
+    ]
 ];
--- a/public/static/theme/err/404.html
+++ b/public/static/theme/err/404.html
@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+    <title>该页面不存在</title>
+    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
+    <link rel="stylesheet" type="text/css" href="__ROOT__/static/theme/err/404/reset.css">
+    <link rel="stylesheet" type="text/css" href="__ROOT__/static/theme/err/404/style.css">
+    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=0.6">
+</head>
+<body>
+<div class="system">
+    <img alt="404" src="__ROOT__/static/theme/err/404/404.png">
+    <div class="title">
+        <h2>页面走丢了...</h2>
+        <h4>远方的朋友你好！非常抱歉，您所请求的页面不存在！</h4>
+        <h4>请仔细检查您输入的网址是否正确。</h4>
+        <p><a style="color:#00F7DE;font-size:18px" href="{:url('@index')}">回到首页</a></p>
+    </div>
+</div>
+</body>
+</html>
--- a/public/static/theme/err/404/404.png
+++ b/public/static/theme/err/404/404.png
--- a/public/static/theme/err/404/reset.css
+++ b/public/static/theme/err/404/reset.css
@ -0,0 +1,225 @@
+@charset "utf-8";
+
+* {
+    word-wrap: break-word
+}
+
+html, body, h1, h2, h3, h4, h5, h6, hr, p, iframe, dl, dt, dd, ul, ol, li, pre, form, button, input, textarea, th, td, fieldset {
+    color: #666;
+    margin: 0;
+    padding: 0;
+    font-weight: normal;
+}
+
+ul, ol, dl {
+    list-style-type: none
+}
+
+html, body {
+    *position: static
+}
+
+html {
+    font-family: sans-serif;
+    -webkit-text-size-adjust: 100%;
+    -ms-text-size-adjust: 100%
+}
+
+address, caption, cite, code, dfn, em, th, var {
+    font-style: normal;
+    font-weight: 400
+}
+
+input, button, textarea, select, optgroup, option {
+    font-family: inherit;
+    font-size: inherit;
+    font-style: inherit;
+    font-weight: inherit
+}
+
+input, button {
+    overflow: visible;
+    vertical-align: middle;
+    outline: none
+}
+
+body, th, td, button, input, select, textarea {
+    font-family: "Microsoft Yahei", "Hiragino Sans GB", "Helvetica Neue", Helvetica, tahoma, arial, Verdana, sans-serif, "WenQuanYi Micro Hei", "\5B8B\4F53";
+    font-size: 12px;
+    color: #333;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale
+}
+
+body {
+    line-height: 1.6;
+    background: #7395ff;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    font-size: 100%
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+a, area {
+    outline: none;
+    blr: expression(this.onFocus=this.blur())
+}
+
+a {
+    text-decoration: none;
+    cursor: pointer
+}
+
+a:hover {
+    text-decoration: none;
+    outline: none
+}
+
+a.ie6:hover {
+    zoom: 1
+}
+
+a:focus {
+    outline: none
+}
+
+a:hover, a:active {
+    outline: none
+}
+
+:focus {
+    outline: none
+}
+
+sub, sup {
+    vertical-align: baseline
+}
+
+button, input[type="button"], input[type="submit"] {
+    line-height: normal !important;
+}
+
+/*img*/
+img {
+    border: 0;
+    vertical-align: middle
+}
+
+a img, img {
+    -ms-interpolation-mode: bicubic
+}
+
+.img-responsive {
+    max-width: 100%;
+    height: auto
+}
+
+.clears {
+    clear: both;
+}
+
+/*IE下a:hover 背景闪烁*/
+* html {
+    overflow: -moz-scrollbars-vertical;
+    zoom: expression(function(ele) {ele.style.zoom = "1";document.execCommand("BackgroundImageCache",false,true)}(this))
+}
+
+/*HTML5 reset*/
+header, footer, section, aside, details, menu, article, section, nav, address, hgroup, figure, figcaption, legend {
+    display: block;
+    margin: 0;
+    padding: 0
+}
+
+time {
+    display: inline
+}
+
+audio, canvas, video {
+    display: inline-block;
+    *display: inline;
+    *zoom: 1
+}
+
+audio:not([controls]) {
+    display: none
+}
+
+legend {
+    width: 100%;
+    margin-bottom: 20px;
+    font-size: 21px;
+    line-height: 40px;
+    border: 0;
+    border-bottom: 1px solid #e5e5e5
+}
+
+legend small {
+    font-size: 15px;
+    color: #999
+}
+
+svg:not(:root) {
+    overflow: hidden
+}
+
+fieldset {
+    margin: 0 2px;
+    border: 1px solid #c0c0c0;
+    padding: 0.35em 0.625em 0.75em;
+}
+
+input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
+    height: auto
+}
+
+input[type="search"] {
+    -webkit-appearance: textfield;
+    /* 1 */
+    -moz-box-sizing: content-box;
+    -webkit-box-sizing: content-box;
+    /* 2 */
+    box-sizing: content-box
+}
+
+input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none
+}
+
+/*
+	Name:style_clearfix
+	Example:class="clearfix|cl"
+	Explain:Clearfix（简写cl）避免因子元素浮动而导致的父元素高度缺失能问题
+*/
+.cl:after, .clearfix:after {
+    content: ".";
+    display: block;
+    height: 0;
+    clear: both;
+    visibility: hidden
+}
+
+.cl, .clearfix {
+    zoom: 1
+}
+
+.fl {
+    float: left;
+}
+
+.fr {
+    float: right;
+}
+
+/*a {
+    transition: all 0.6s ease;
+    -webkit-transition: all 0.6s ease;
+    -moz-transition: all 0.6s ease;
+    -ms-transition: all 0.6s ease;
+}*/
+
--- a/public/static/theme/err/404/style.css
+++ b/public/static/theme/err/404/style.css
@ -0,0 +1,45 @@
+@charset "utf-8";
+
+html {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-content: center;
+    justify-content: center;
+}
+
+body {
+    display: flex;
+    align-items: center;
+    align-content: center;
+    justify-content: center;
+}
+
+.system {
+    text-align: center;
+    margin: -20% auto 0;
+}
+
+.system img {
+    text-align: center;
+    width: 500px;
+}
+
+.title {
+
+}
+
+.title h2 {
+    color: #fff;
+    font-size: 36px;
+    letter-spacing: 4px;
+    text-align: center;
+    line-height: 120px;
+}
+
+.title h4 {
+    color: #fff;
+    font-size: 18px;
+    line-height: 38px;
+    text-align: center;
+}
--- a/public/static/theme/err/500.html
+++ b/public/static/theme/err/500.html
@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+    <title>系统发生错误</title>
+    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
+    <link rel="stylesheet" href="__ROOT__/static/theme/err/404/reset.css">
+    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=IBM+Plex+Mono:400|Oswald:600'>
+    <link rel="stylesheet" href="__ROOT__/static/theme/err/500/style.css">
+    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=0.6">
+</head>
+<body style="padding-bottom:10%">
+<div id="error"><?php echo htmlentities($message??'Error'); ?></div>
+<div class="error-num">500
+    <div class="error-num__clip">500</div>
+</div>
+<p id="desc">咦，系统似乎出问题了。</p>
+<p><a style="color:#00F7DE;font-size:28px" href="{:url('@index')}" target="_blank">回到首页</a></p>
+</body>
+</html>
--- a/public/static/theme/err/500/style.css
+++ b/public/static/theme/err/500/style.css
@ -0,0 +1,144 @@
+:root {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    line-height: 1.5;
+    color: rgba(255, 255, 255, 0.25);
+}
+
+html {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-content: center;
+    justify-content: center;
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    background: #2e3b64;
+    font-size: 30px;
+}
+
+a {
+    color: white;
+    display: inline;
+}
+
+#error {
+    margin-bottom: 1rem;
+    font-size: 2rem;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.075em;
+    color: #C94D4D;
+    -webkit-animation: pulse 4s infinite alternate;
+    animation: pulse 4s infinite alternate;
+    position: relative;
+}
+
+@-webkit-keyframes pulse {
+    from {
+        opacity: 0.5;
+    }
+    50% {
+        opacity: 0.5;
+    }
+}
+
+@keyframes pulse {
+    from {
+        opacity: 0.5;
+    }
+    50% {
+        opacity: 0.5;
+    }
+}
+
+#error::before {
+    content: "";
+    width: 0.75rem;
+    height: 50vh;
+    margin-bottom: 0.75em;
+    position: absolute;
+    left: 50%;
+    bottom: 100%;
+    transform: translateX(-50%);
+    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1) 60%, transparent 100%);
+}
+
+#desc {
+    color: #64acd2;
+    margin: 2em 0 1em;
+}
+
+.error-num, .error-num__clip, .error-num__clip-left, .error-num__clip-left::before, .error-num__clip::before {
+    position: relative;
+    font-size: 10rem;
+    font-family: "Oswald";
+    letter-spacing: -0.01em;
+    color: white;
+    -webkit-animation: colorSplit 1.25s steps(2, end) infinite;
+    animation: colorSplit 1.25s steps(2, end) infinite;
+}
+
+@-webkit-keyframes colorSplit {
+    25% {
+        text-shadow: -0.02em 0 0 #ED008C, 0.025em 0 0 #0087EF;
+    }
+    75% {
+        text-shadow: -0.035em 0 0 #ED008C, 0.04em 0 0 #0087EF;
+    }
+}
+
+@keyframes colorSplit {
+    25% {
+        text-shadow: -0.02em 0 0 #ED008C, 0.025em 0 0 #0087EF;
+    }
+    75% {
+        text-shadow: -0.035em 0 0 #ED008C, 0.04em 0 0 #0087EF;
+    }
+}
+
+.error-num__clip, .error-num__clip-left, .error-num__clip-left::before, .error-num__clip::before {
+    position: absolute;
+    top: 0;
+    left: -2px;
+    z-index: 10;
+    color: #333;
+    overflow: visible;
+    -webkit-clip-path: polygon(0% 0%, 100% 0, 100% 25%, 0 25%, 0 30%, 100% 30%, 100% 50%, 0 50%, 0 60%, 100% 60%, 100% 65%, 0 65%, 0 80%, 100% 80%, 100% 85%, 0 85%, 0% 0%);
+    clip-path: polygon(0% 0%, 100% 0, 100% 25%, 0 25%, 0 30%, 100% 30%, 100% 50%, 0 50%, 0 60%, 100% 60%, 100% 65%, 0 65%, 0 80%, 100% 80%, 100% 85%, 0 85%, 0% 0%);
+    -webkit-animation: glitch 1s steps(2, start) infinite;
+    animation: glitch 1s steps(2, start) infinite;
+}
+
+@-webkit-keyframes glitch {
+    30% {
+        left: 0;
+    }
+    to {
+        left: 0;
+    }
+}
+
+@keyframes glitch {
+    30% {
+        left: 0;
+    }
+    to {
+        left: 0;
+    }
+}
+
+.error-num__clip::before, .error-num__clip-left::before {
+    content: "500";
+    left: 0.05em;
+    color: white;
+    z-index: 9;
+    -webkit-clip-path: polygon(0% 0%, 100% 0, 100% 26%, 0 26%, 0 29%, 100% 29%, 100% 51%, 0 51%, 0 59%, 100% 59%, 100% 66%, 0 66%, 0 79%, 100% 79%, 100% 86%, 0 86%, 0% 0%);
+    clip-path: polygon(0% 0%, 100% 0, 100% 26%, 0 26%, 0 29%, 100% 29%, 100% 51%, 0 51%, 0 59%, 100% 59%, 100% 66%, 0 66%, 0 79%, 100% 79%, 100% 86%, 0 86%, 0% 0%);
+}