更新 exception 组件

example/docs/zh-CN/components/exception.md

@@ -1,6 +1,34 @@
 ::: anchor
 :::
 
+::: title 401
+:::
+
+::: demo 使用 `lay-exception` 标签, 创建一个异常页面
+
+<template>
+  <lay-exception status="401" title="401" describe="暂无相关权限">
+      <template #action>
+        <lay-button>刷新</lay-button>
+        <lay-button type="primary">返回</lay-button>
+    </template>
+  </lay-exception>
+</template>
+
+<script>
+import { ref } from 'vue'
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::
+
 ::: title 403
 :::
 

src/component/exception/index.less

@@ -4,11 +4,13 @@
         display: inline-block;
         vertical-align: top;
         > div {
-            width: 200px;
             height: 200px;
             background-size: 100% 100%;
             background-repeat: no-repeat;
         }
+        .error-401 {
+            background-image: url(./image/401.svg);
+        }
         .error-403 {
             background-image: url(./image/403.svg);
         }
@@ -21,16 +23,17 @@
     }
     .layui-exception-details{
         .layui-exception-details-content {
+            margin-left: 100px;
             .layui-exception-details-title{
-                font-size: 68px;
+                font-size: 60px;
                 color: #434e59;
                 margin-bottom: 24px;
                 font-weight: 600;
             }
             .layui-exception-details-describe{
-                font-size: 20px;
+                font-size: 18px;
                 color: rgba(0, 0, 0, .45);
-                margin-bottom: 16px;
+                margin-bottom: 26px;
             }
         }
         width: 50%;

src/component/exception/index.vue

@@ -1,4 +1,5 @@
 <script lang="ts">
+import { useSlots } from '@vue/runtime-core';
 export default {
     name: "LayException"
 }
@@ -8,22 +9,27 @@ import "./index.less";
 
 export interface LayDropdownProps {
   title?: string,
-  status?: '403' | '404' | '500',
+  status?: '401' | '403' | '404' | '500',
   describe?: string
 }
 
+const slot = useSlots();
+
 const props = withDefaults(defineProps<LayDropdownProps>(), {
   title: "Exception",
   describe: "describe"
 });
-
 </script>
 <template>
     <div class="layui-exception">
         <div class="layui-exception-image">
-            <div v-if="status=='403'" class="error-403" />
+            <slot name="image" v-if="slot.default"></slot>
-            <div v-if="status=='404'" class="error-404" />
+            <template v-else>
-            <div v-if="status=='500'" class="error-500" />
+                <div v-if="status=='401'" class="error-401" />
+                <div v-if="status=='403'" class="error-403" />
+                <div v-if="status=='404'" class="error-404" />
+                <div v-if="status=='500'" class="error-500" />
+            </template>
         </div>
         <div class="layui-exception-details">
             <div class="layui-exception-details-content">