perf: 优化 demo 页面

src/pages/demo/composable-demo/apis/use-fetch-select.ts

@@ -1,3 +1,5 @@
+import { ElMessage } from "element-plus"
+
 /** 模拟接口响应数据 */
 const SELECT_RESPONSE_DATA = {
   code: 0,
@@ -19,17 +21,20 @@ const SELECT_RESPONSE_DATA = {
   message: "获取 Select 数据成功"
 }
 
+const ERROR_MESSAGE = "接口发生错误"
+
 /** 模拟接口 */
 export function getSelectDataApi() {
   return new Promise<typeof SELECT_RESPONSE_DATA>((resolve, reject) => {
     // 模拟接口响应时间 2s
     setTimeout(() => {
-      // 模拟接口调用成功
       if (Math.random() < 0.8) {
+        // 模拟接口调用成功
         resolve(SELECT_RESPONSE_DATA)
       } else {
         // 模拟接口调用出错
-        reject(new Error("接口发生错误"))
+        reject(new Error(ERROR_MESSAGE))
+        ElMessage.error(ERROR_MESSAGE)
       }
     }, 2000)
   })

src/pages/demo/composable-demo/use-fetch-select.vue

@@ -9,12 +9,22 @@ const { loading, options, value } = useFetchSelect({
 
 <template>
   <div class="app-container">
-    <h4>该示例是演示：通过 composable 自动调用 api 后拿到 Select 组件需要的数据并传递给 Select 组件</h4>
+    <el-card shadow="never">
-    <h5>Select 示例</h5>
+      该示例是演示：通过 composable 自动调用 api 后拿到 Select 组件需要的数据并传递给 Select 组件
-    <el-select v-model="value" :loading="loading" filterable>
+    </el-card>
+    <el-card header="Select 示例" shadow="never" v-loading="loading">
+      <el-select v-model="value" filterable>
         <el-option v-for="(item, index) in options" v-bind="item" :key="index" placeholder="请选择" />
       </el-select>
-    <h5>Select V2 示例（如果数据量过多，可以选择该组件）</h5>
+    </el-card>
-    <el-select-v2 v-model="value" :loading="loading" :options="options" filterable placeholder="请选择" />
+    <el-card header="Select V2 示例（如果数据量过多，可以选择该组件）" shadow="never" v-loading="loading">
+      <el-select-v2 v-model="value" :options="options" filterable placeholder="请选择" />
+    </el-card>
   </div>
 </template>
+
+<style lang="scss" scoped>
+.el-card {
+  margin-bottom: 20px;
+}
+</style>

src/pages/demo/composable-demo/use-fullscreen-loading.vue

@@ -25,7 +25,7 @@ async function querySuccess() {
   // 注意：
   // 1. getSuccessApi 是一个函数而非函数调用
   // 2. 如需给 getSuccessApi 函数传递参数，请在后面的括号中进行（真正的 getSuccessApi 调用）
-  const res = await useFullscreenLoading(getSuccessApi)([2, 3, 3])
+  const res = await useFullscreenLoading(getSuccessApi)([1, 2, 3])
   ElMessage.success(`${res.message}，传参为 ${res.data.list.toString()}`)
 }
 
@@ -40,12 +40,22 @@ async function queryError() {
 
 <template>
   <div class="app-container">
-    <h4>该示例是演示：通过将要执行的函数传递给 composable，让 composable 自动开启全屏 loading，函数执行结束后自动关闭 loading</h4>
+    <el-card shadow="never">
+      该示例是演示：通过将要执行的函数传递给 composable，让 composable 自动开启全屏 loading，函数执行结束后自动关闭 loading
+    </el-card>
+    <el-card header="示例" shadow="never">
       <el-button type="primary" @click="querySuccess">
         查询成功
       </el-button>
       <el-button type="danger" @click="queryError">
         查询失败
       </el-button>
+    </el-card>
   </div>
 </template>
+
+<style lang="scss" scoped>
+.el-card {
+  margin-bottom: 20px;
+}
+</style>

src/pages/demo/composable-demo/use-watermark.vue

@@ -9,17 +9,19 @@ const { setWatermark: setGlobalWatermark, clearWatermark: clearGlobalWatermark }
 
 <template>
   <div class="app-container">
-    <h4>
+    <el-card shadow="never">
       该示例是演示：通过调用 composable 开启或关闭水印，
       支持局部、全局、自定义样式（颜色、透明度、字体大小、字体、倾斜角度等），并自带防御（防删、防隐藏）和自适应功能
-    </h4>
+    </el-card>
+    <el-card header="示例" shadow="never">
       <div ref="localRef" class="local" />
+      <template #footer>
         <el-button-group>
           <el-button type="primary" @click="setWatermark('局部水印', { color: '#409eff' })">
             创建局部水印
           </el-button>
           <el-button type="warning" @click="setWatermark('没有防御功能的局部水印', { color: '#e6a23c', defense: false })">
-        关闭防御功能
+            创建无防御局部水印
           </el-button>
           <el-button type="danger" @click="clearWatermark">
             清除局部水印
@@ -29,27 +31,30 @@ const { setWatermark: setGlobalWatermark, clearWatermark: clearGlobalWatermark }
           <el-button type="primary" @click="setGlobalWatermark('全局水印', { color: '#409eff' })">
             创建全局水印
           </el-button>
-      <el-button
+          <el-button type="warning" @click="setGlobalWatermark('没有防御功能的全局水印', { color: '#e6a23c', defense: false })">
-        type="warning"
+            创建无防御全局水印
-        @click="setGlobalWatermark('没有防御功能的全局水印', { color: '#e6a23c', defense: false })"
-      >
-        关闭防御功能
           </el-button>
           <el-button type="danger" @click="clearGlobalWatermark">
             清除全局水印
           </el-button>
         </el-button-group>
+      </template>
+    </el-card>
   </div>
 </template>
 
 <style lang="scss" scoped>
-.local {
+.el-card {
-  height: 30vh;
-  border: 2px dashed var(--el-color-primary);
   margin-bottom: 20px;
 }
 
+.local {
+  height: 35vh;
+  border: 2px dashed var(--el-color-primary);
+}
+
 .el-button-group {
   margin-right: 12px;
+  margin-bottom: 5px;
 }
 </style>

src/pages/demo/unocss/index.vue

@@ -1,19 +1,17 @@
 <template>
-  <div h-full uno-padding-20>
+  <div uno-padding-20 h-full text-center flex select-none all:transition-400>
-    <div h-full text-center flex select-none all:transition-400>
     <div ma>
-        <div text-5xl fw100 animate-bounce-alt animate-count-infinite animate-1s>
+      <div text-5xl fw100 animate-bounce-alt animate-count-infinite animate-duration-1s>
         UnoCSS
       </div>
-        <div op30 dark:op60 text-lg fw300 m1>
+      <div op30 text-lg fw300 m1 dark:op60>
         该页面是一个 UnoCSS 的使用案例，其他页面依旧采用 Scss
       </div>
-        <div m2 flex justify-center text-lg op30 dark:op60 hover="op80" dark:hover="op80">
+      <div m2 uno-flex-x-center text-lg op30 hover="op80" dark:op60 dark:hover="op80">
         <a href="https://antfu.me/posts/reimagine-atomic-css-zh" target="_blank">
           推荐阅读：重新构想原子化 CSS
         </a>
       </div>
     </div>
   </div>
-  </div>
 </template>