perf: 优化 demo 页面

un-pany · Nov 28, 2024 · 6fd7dfe · 6fd7dfe
1 parent 8e42395
commit 6fd7dfe
Show file tree

Hide file tree

Showing 5 changed files with 89 additions and 61 deletions.
diff --git a/src/pages/demo/composable-demo/apis/use-fetch-select.ts b/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)
   })

diff --git a/src/pages/demo/composable-demo/use-fetch-select.vue b/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>
-    <h5>Select 示例</h5>
-    <el-select v-model="value" :loading="loading" filterable>
-      <el-option v-for="(item, index) in options" v-bind="item" :key="index" placeholder="请选择" />
-    </el-select>
-    <h5>Select V2 示例（如果数据量过多，可以选择该组件）</h5>
-    <el-select-v2 v-model="value" :loading="loading" :options="options" filterable placeholder="请选择" />
+    <el-card shadow="never">
+      该示例是演示：通过 composable 自动调用 api 后拿到 Select 组件需要的数据并传递给 Select 组件
+    </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>
+    </el-card>
+    <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>
diff --git a/src/pages/demo/composable-demo/use-fullscreen-loading.vue b/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-button type="primary" @click="querySuccess">
-      查询成功
-    </el-button>
-    <el-button type="danger" @click="queryError">
-      查询失败
-    </el-button>
+    <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>
diff --git a/src/pages/demo/composable-demo/use-watermark.vue b/src/pages/demo/composable-demo/use-watermark.vue
@@ -9,47 +9,52 @@ const { setWatermark: setGlobalWatermark, clearWatermark: clearGlobalWatermark }
 
 <template>
   <div class="app-container">
-    <h4>
+    <el-card shadow="never">
       该示例是演示：通过调用 composable 开启或关闭水印，
       支持局部、全局、自定义样式（颜色、透明度、字体大小、字体、倾斜角度等），并自带防御（防删、防隐藏）和自适应功能
-    </h4>
-    <div ref="localRef" class="local" />
-    <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">
-        清除局部水印
-      </el-button>
-    </el-button-group>
-    <el-button-group>
-      <el-button type="primary" @click="setGlobalWatermark('全局水印', { color: '#409eff' })">
-        创建全局水印
-      </el-button>
-      <el-button
-        type="warning"
-        @click="setGlobalWatermark('没有防御功能的全局水印', { color: '#e6a23c', defense: false })"
-      >
-        关闭防御功能
-      </el-button>
-      <el-button type="danger" @click="clearGlobalWatermark">
-        清除全局水印
-      </el-button>
-    </el-button-group>
+    </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">
+            清除局部水印
+          </el-button>
+        </el-button-group>
+        <el-button-group>
+          <el-button type="primary" @click="setGlobalWatermark('全局水印', { color: '#409eff' })">
+            创建全局水印
+          </el-button>
+          <el-button 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>
+.el-card {
+  margin-bottom: 20px;
+}
+
 .local {
-  height: 30vh;
+  height: 35vh;
   border: 2px dashed var(--el-color-primary);
-  margin-bottom: 20px;
 }
 
 .el-button-group {
   margin-right: 12px;
+  margin-bottom: 5px;
 }
 </style>
diff --git a/src/pages/demo/unocss/index.vue b/src/pages/demo/unocss/index.vue
@@ -1,18 +1,16 @@
 <template>
-  <div h-full uno-padding-20>
-    <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>
-          UnoCSS
-        </div>
-        <div op30 dark:op60 text-lg fw300 m1>
-          该页面是一个 UnoCSS 的使用案例，其他页面依旧采用 Scss
-        </div>
-        <div m2 flex justify-center text-lg op30 dark:op60 hover="op80" dark:hover="op80">
-          <a href="https://antfu.me/posts/reimagine-atomic-css-zh" target="_blank">
-            推荐阅读：重新构想原子化 CSS
-          </a>
-        </div>
+  <div uno-padding-20 h-full text-center flex select-none all:transition-400>
+    <div ma>
+      <div text-5xl fw100 animate-bounce-alt animate-count-infinite animate-duration-1s>
+        UnoCSS
+      </div>
+      <div op30 text-lg fw300 m1 dark:op60>
+        该页面是一个 UnoCSS 的使用案例，其他页面依旧采用 Scss
+      </div>
+      <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>