feat(exception): Add pc templates, document examples, and dark mode support

examples/sites/demos/apis/exception.js

@@ -1,5 +1,5 @@
 export default {
-  mode: ['mobile-first'],
+  mode: ['pc', 'mobile-first'],
   apis: [
     {
       name: 'Exception',
@@ -10,11 +10,12 @@ export default {
           type: 'boolean',
           defaultValue: '',
           desc: {
-            'zh-CN': '设置组件级空态',
-            'en-US': 'Set component-level empty state'
+            'zh-CN': '设置组件级异常',
+            'en-US': 'Set component-level exception'
           },
-          mode: ['mobile-first'],
-          mfDemo: 'component-empty'
+          mode: ['pc', 'mobile-first'],
+          mfDemo: 'component-page',
+          pcDemo: 'component-page'
         },
         {
           name: 'exception-class',
@@ -24,19 +25,21 @@ export default {
             'zh-CN': '设置自定义类',
             'en-US': 'Setting Custom Classes'
           },
-          mode: ['mobile-first'],
-          mfDemo: ''
+          mode: ['pc', 'mobile-first'],
+          mfDemo: 'exception-class',
+          pcDemo: 'exception-class'
         },
         {
           name: 'page-empty',
           type: 'boolean',
           defaultValue: '',
           desc: {
-            'zh-CN': '设置页面级空态',
-            'en-US': ''
+            'zh-CN': '设置页面级异常',
+            'en-US': 'Set page-level exception'
           },
-          mode: ['mobile-first'],
-          mfDemo: ''
+          mode: ['pc', 'mobile-first'],
+          mfDemo: 'page-empty',
+          pcDemo: 'page-empty'
         },
         {
           name: 'sub-message',
@@ -46,20 +49,22 @@ export default {
             'zh-CN': '设置二级标题',
             'en-US': 'Set Level-2 Title'
           },
-          mode: ['mobile-first'],
-          mfDemo: 'sub-message'
+          mode: ['pc', 'mobile-first'],
+          mfDemo: 'sub-message',
+          pcDemo: 'sub-message'
         },
         {
           name: 'type',
-          type: 'string',
+          typeAnchorName: 'IType',
+          type: 'IType',
           defaultValue: 'nodata',
           desc: {
-            'zh-CN':
-              '<p>设置缺省页类型，默认为nodata,可选值有 weaknet || noperm || busy || build || weaknet || pcview</p>',
-            'en-US': 'display different button'
+            'zh-CN': '<p>设置缺省页类型，默认为nodata</p>',
+            'en-US': '<p>Set exception type, The default value is nodata</p>'
           },
-          mode: ['mobile-first'],
-          mfDemo: 'page-empty'
+          mode: ['pc', 'mobile-first'],
+          mfDemo: 'page-empty',
+          pcDemo: 'page-empty'
         }
       ],
       events: [],
@@ -71,23 +76,34 @@ export default {
           defaultValue: '',
           desc: {
             'zh-CN': '<p>设置内容</p>',
-            'en-US': 'Click'
+            'en-US': '<p>Set content</p>'
           },
-          mode: ['mobile-first'],
-          mfDemo: 'content-slot'
+          mode: ['pc', 'mobile-first'],
+          mfDemo: 'slot',
+          pcDemo: 'slot'
         },
         {
-          name: 'default',
+          name: 'icon',
           type: '',
           defaultValue: '',
           desc: {
-            'zh-CN': '默认插槽',
-            'en-US': 'Default Slot'
+            'zh-CN': '图标插槽',
+            'en-US': 'Icon Slot'
           },
-          mode: ['mobile-first'],
-          mfDemo: ''
+          mode: ['pc', 'mobile-first'],
+          mfDemo: 'slot',
+          pcDemo: 'slot'
         }
       ]
     }
+  ],
+  types: [
+    {
+      name: 'IType',
+      type: 'type',
+      code: `
+type IType = 'noperm' | 'nodata' | 'weaknet' | 'noresult' | 'nonews' | 'pagenoperm' | 'pageweaknet' | 'pagenothing' | 'pageservererror'
+`
+    }
   ]
 }

examples/sites/demos/mobile-first/app/exception/webdoc/exception.js

@@ -29,18 +29,18 @@ export default {
       codeFiles: ['page-empty.vue']
     },
     {
-      demoId: 'component-empty',
+      demoId: 'component-page',
       name: {
         'zh-CN': '组件级空态',
         'en-US': 'Component-level empty state'
       },
       desc: {
         'zh-CN':
-          '<p>通过添加`component-empty`属性展示组件级空态，其中 type 类型有`noperm、 nodata、 weaknet、noresult、 nonews`<br> 对应场景：<br>`noperm` ：无访问权限<br>`nodata` ：暂无数据<br>`weaknet` ：网络不给力<br>`noresult`：无相关搜索结果<br>`nonews`：暂无最新消息<br></p>',
+          '<p>通过添加`component-page`属性展示组件级空态，其中 type 类型有`noperm、 nodata、 weaknet、noresult、 nonews`<br> 对应场景：<br>`noperm` ：无访问权限<br>`nodata` ：暂无数据<br>`weaknet` ：网络不给力<br>`noresult`：无相关搜索结果<br>`nonews`：暂无最新消息<br></p>',
         'en-US':
-          '<p>Add the `component-empty` attribute to display the component-level empty state. The type type can be `noperm, nodata, weaknet, noresult, or nonews`<br>The corresponding scenario is as follows: <br>`noperm`: No access<br>`nodata`: no data<br>`weaknet`: network is not powerful<br>`noresult`: no related search results<br>`nonews`: no latest news<br></p>'
+          '<p>Add the `component-page` attribute to display the component-level empty state. The type type can be `noperm, nodata, weaknet, noresult, or nonews`<br>The corresponding scenario is as follows: <br>`noperm`: No access<br>`nodata`: no data<br>`weaknet`: network is not powerful<br>`noresult`: no related search results<br>`nonews`: no latest news<br></p>'
       },
-      codeFiles: ['component-empty.vue']
+      codeFiles: ['component-page.vue']
     },
     {
       demoId: 'sub-message',

examples/sites/demos/pc/app/exception/basic-usage-composition-api.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="exception-demo">
+    <tiny-exception type="nodata"></tiny-exception>
+  </div>
+</template>
+
+<script setup>
+import { TinyException } from '@opentiny/vue'
+</script>
+
+<style scoped>
+.exception-demo {
+  padding: 20px;
+}
+</style>

examples/sites/demos/pc/app/exception/basic-usage.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="exception-demo">
+    <tiny-exception type="nodata"></tiny-exception>
+  </div>
+</template>
+
+<script>
+import { TinyException } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyException
+  }
+}
+</script>
+
+<style scoped>
+.exception-demo {
+  padding: 20px;
+}
+</style>

examples/sites/demos/pc/app/exception/button-text-composition-api.vue

@@ -0,0 +1,13 @@
+<template>
+  <tiny-exception type="pagenoperm">
+    <tiny-button type="primary" @click="test">自定义按钮</tiny-button>
+  </tiny-exception>
+</template>
+
+<script setup>
+import { TinyException, TinyModal, TinyButton } from '@opentiny/vue'
+
+const test = () => {
+  TinyModal.message({ status: 'info', message: '自定义按钮被点击' })
+}
+</script>

examples/sites/demos/pc/app/exception/button-text.vue

@@ -0,0 +1,21 @@
+<template>
+  <tiny-exception type="pagenoperm">
+    <tiny-button type="primary" @click="test">立即新建</tiny-button>
+  </tiny-exception>
+</template>
+
+<script>
+import { TinyException, TinyModal, TinyButton } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyException,
+    TinyButton
+  },
+  methods: {
+    test() {
+      TinyModal.message({ status: 'info', message: '自定义按钮被点击' })
+    }
+  }
+}
+</script>

examples/sites/demos/pc/app/exception/component-page-composition-api.vue

@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <tiny-grid :data="tableData" height="300">
+      <tiny-grid-column type="index" width="5%"></tiny-grid-column>
+      <tiny-grid-column field="name" title="名称"></tiny-grid-column>
+      <tiny-grid-column field="area" title="区域"></tiny-grid-column>
+      <tiny-grid-column field="address" title="地址"></tiny-grid-column>
+      <tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
+      <template #empty>
+        <tiny-exception component-page type="nodata"></tiny-exception>
+      </template>
+    </tiny-grid>
+    <div class="demo-split">
+      <tiny-split v-model="split2">
+        <template #left>
+          <tiny-exception component-page type="nodata"></tiny-exception>
+        </template>
+        <template #right>
+          <tiny-exception component-page type="nodata"></tiny-exception>
+        </template>
+      </tiny-split>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { TinyGrid, TinyGridColumn, TinyException, TinySplit } from '@opentiny/vue'
+import { ref } from 'vue'
+
+const tableData = ref([])
+const split2 = ref(0.4)
+</script>
+
+<style scoped>
+.demo-split {
+  height: 200px;
+  border: 1px solid #d9d9d9;
+  margin-bottom: 20px;
+}
+
+.demo-split-pane {
+  padding: 10px;
+}
+</style>

examples/sites/demos/pc/app/exception/component-page.vue

@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <tiny-grid :data="tableData" height="300">
+      <tiny-grid-column type="index" width="5%"></tiny-grid-column>
+      <tiny-grid-column field="name" title="名称"></tiny-grid-column>
+      <tiny-grid-column field="area" title="区域"></tiny-grid-column>
+      <tiny-grid-column field="address" title="地址"></tiny-grid-column>
+      <tiny-grid-column field="introduction" title="公司简介" show-overflow></tiny-grid-column>
+      <template #empty>
+        <tiny-exception component-page type="nodata"></tiny-exception>
+      </template>
+    </tiny-grid>
+    <div class="demo-split">
+      <tiny-split v-model="split2">
+        <template #left>
+          <tiny-exception component-page type="nodata"></tiny-exception>
+        </template>
+        <template #right>
+          <tiny-exception component-page type="nodata"></tiny-exception>
+        </template>
+      </tiny-split>
+    </div>
+  </div>
+</template>
+
+<script>
+import { TinyGrid, TinyGridColumn, TinyException, TinySplit } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyGrid,
+    TinyGridColumn,
+    TinyException,
+    TinySplit
+  },
+  data() {
+    return {
+      tableData: [],
+      split2: 0.4
+    }
+  }
+}
+</script>
+
+<style scoped>
+.demo-split {
+  height: 200px;
+  border: 1px solid #d9d9d9;
+  margin-bottom: 20px;
+}
+
+.demo-split-pane {
+  padding: 10px;
+}
+</style>

examples/sites/demos/pc/app/exception/page-empty-composition-api.vue

@@ -0,0 +1,7 @@
+<template>
+  <tiny-exception page-empty type="pageservererror" sub-message="服务器错误" />
+</template>
+
+<script setup>
+import { TinyException } from '@opentiny/vue'
+</script>

examples/sites/demos/pc/app/exception/page-empty.vue

@@ -0,0 +1,13 @@
+<template>
+  <tiny-exception page-empty type="pageservererror" sub-message="服务器错误" />
+</template>
+
+<script>
+import { TinyException } from '@opentiny/vue'
+
+export default {
+  components: {
+    TinyException
+  }
+}
+</script>

examples/sites/demos/pc/app/exception/slot-composition-api.vue

@@ -0,0 +1,29 @@
+<template>
+  <tiny-exception type="pagenoperm">
+    <template #icon>
+      <TinyIconSuccess class="custom-icon" />
+    </template>
+    <template #content>
+      <div class="content">content插槽</div>
+      <tiny-button type="primary">自定义按钮</tiny-button>
+    </template>
+  </tiny-exception>
+</template>
+
+<script setup>
+import { TinyException, TinyButton } from '@opentiny/vue'
+import { IconSuccess } from '@opentiny/vue-icon'
+
+const TinyIconSuccess = IconSuccess()
+</script>
+
+<style scoped>
+.content {
+  padding-bottom: 15px;
+  font-size: 16px;
+}
+.custom-icon {
+  width: 50px;
+  height: 50px;
+}
+</style>

examples/sites/demos/pc/app/exception/slot.vue

@@ -0,0 +1,23 @@
+<template>
+  <tiny-exception>
+    <template #icon>
+      <IconSuccess />
+    </template>
+    <template #content>
+      <div>content插槽</div>
+    </template>
+    <tiny-button type="primary">立即新建</tiny-button>
+  </tiny-exception>
+</template>
+
+<script>
+import { TinyException } from '@opentiny/vue'
+import { IconSuccess } from '@opentiny/vue-icon'
+
+export default {
+  components: {
+    TinyException,
+    IconSuccess: IconSuccess()
+  }
+}
+</script>