中后台项目中的进度条实现：Naive Ui Admin加载状态指示-CSDN博客

中后台项目中的进度条实现：Naive Ui Admin加载状态指示

【免费下载链接】naive-ui-admin Naive Ui Admin 是一个基于 vue3,vite2,TypeScript 的中后台解决方案，它使用了最新的前端技术栈，并提炼了典型的业务模型，页面，包括二次封装组件、动态菜单、权限校验、粒子化权限控制等功能，它可以帮助你快速搭建企业级中后台项目，相信不管是从新技术使用还是其他方面，都能帮助到你，持续更新中。项目地址: https://gitcode.com/gh_mirrors/na/naive-ui-admin

引言：加载状态在中后台系统中的重要性

在中后台系统开发中，用户经常需要等待数据加载、表单提交或页面切换等操作完成。如果没有适当的加载状态指示，用户可能会感到困惑，不确定操作是否正在进行或是否已经失败。一个良好的加载状态设计可以显著提升用户体验，减少用户焦虑，并提高系统的感知性能。

Naive Ui Admin作为一个基于Vue3、Vite2和TypeScript的中后台解决方案，提供了多种加载状态指示方式。本文将深入探讨这些实现方式，并分析它们在不同场景下的应用。

Naive Ui Admin中的加载状态实现方式

1. 按钮加载状态

按钮加载状态是中后台系统中最常见的加载指示方式之一，通常用于表单提交、数据保存等操作。

<n-button type="primary" :loading="formBtnLoading" @click="confirmForm">提交</n-button>

在这个实现中，我们使用了Naive UI的n-button组件，并通过:loading属性控制加载状态的显示。当formBtnLoading为true时，按钮会显示加载动画并禁用交互。

在TypeScript代码中，我们通常这样控制这个状态：

const formBtnLoading = ref(false);

const confirmForm = async () => {
  formBtnLoading.value = true;
  try {
    await submitFormData(formData);
    message.success('提交成功');
  } catch (error) {
    message.error('提交失败');
  } finally {
    formBtnLoading.value = false;
  }
};

这种实现方式的优点是简单直观，用户可以清晰地知道哪个操作正在进行中。在Naive Ui Admin中，这种模式被广泛应用于各种表单提交场景，如：

系统菜单创建（src/views/system/menu/CreateDrawer.vue）
角色管理（src/views/system/role/role.vue）
基础列表操作（src/views/list/basicList/index.vue）

2. 骨架屏（Skeleton）加载状态

骨架屏是一种在数据加载过程中显示的占位符UI，它可以给用户一个页面最终会是什么样子的预览，从而减少感知等待时间。

<n-skeleton v-if="loading" :width="100" size="medium" />
<template v-else>
  日同比
  <CountTo :startVal="1" suffix="%" :endVal="visits.rise" />
  <n-icon size="12" color="#00ff6f">
    <CaretUpOutlined />
  </n-icon>
</template>

在这个实现中，我们使用v-if="loading"来控制骨架屏和实际内容的显示。当loading为true时，显示骨架屏；当数据加载完成后，显示实际内容。

骨架屏特别适合在数据卡片、统计数字等场景中使用。在Naive Ui Admin的控制台页面（src/views/dashboard/console/console.vue）中，骨架屏被广泛应用于各种数据指标的加载状态显示：

<n-grid cols="1 s:2 m:3 l:4 xl:4 2xl:4" responsive="screen" :x-gap="12" :y-gap="8">
  <n-grid-item>
    <NCard title="访问量" size="small">
      <div class="flex justify-between px-1 py-1">
        <n-skeleton v-if="loading" :width="100" size="medium" />
        <CountTo v-else :startVal="1" :endVal="visits.dayVisits" class="text-3xl" />
      </div>
      <!-- 更多内容 -->
    </NCard>
  </n-grid-item>
  <!-- 更多卡片 -->
</n-grid>

骨架屏的优点是可以提供更丰富的视觉反馈，让用户对即将加载的内容有一个预期。Naive Ui Admin中的骨架屏实现支持多种自定义选项，如宽度、大小等，可以根据不同的内容需求进行调整。

3. 加载中（Spin）组件

Spin组件是一种全屏或局部的加载指示器，通常用于整个页面或较大区域的加载状态指示。

<n-spin :show="loading">
  <div class="frame">
    <iframe :src="frameSrc" class="frame-iframe" ref="frameRef"></iframe>
  </div>
</n-spin>

在这个实现中，n-spin组件包裹了需要加载的内容。当loading为true时，会在内容区域中央显示一个旋转的加载动画，并遮挡住下面的内容。

在TypeScript代码中，我们可以这样控制iframe的加载状态：

const loading = ref(false);
const frameRef = ref<HTMLFrameElement | null>(null);
const frameSrc = ref<string>('');

onMounted(() => {
  loading.value = true;
  frameSrc.value = 'https://example.com';
  
  const iframe = unref(frameRef);
  if (iframe) {
    iframe.onload = () => {
      loading.value = false;
    };
  }
});

这种实现方式适用于加载整个页面或较大组件的场景，如iframe嵌入页面（src/views/iframe/index.vue）。它的优点是可以明确地指示整个区域正在加载，防止用户在内容未完全加载时进行交互。

4. 表格加载状态

表格是中后台系统中最常用的数据展示组件之一，Naive Ui Admin为表格加载状态提供了专门的实现。

<n-data-table
  ref="tableElRef"
  v-bind="getBindValues"
  :striped="isStriped"
  :pagination="pagination"
  @update:page="updatePage"
  @update:page-size="updatePageSize"
>
  <!-- 表格内容 -->
</n-data-table>

在TypeScript代码中，表格的加载状态通常通过useLoading hook来管理：

const { getLoading, setLoading } = useLoading(getProps);

const reload = async () => {
  setLoading(true);
  try {
    const newData = await fetchTableData();
    tableData.value = newData;
  } catch (error) {
    message.error('数据加载失败');
  } finally {
    setLoading(false);
  }
};

这种实现方式的优点是将加载状态与表格组件紧密集成，可以很方便地实现表格数据的刷新和加载状态管理。在Naive Ui Admin中，这种模式被应用于各种数据表格，如菜单管理（src/views/system/menu/menu.vue）等。

加载状态实现的最佳实践

1. 状态管理模式

在Naive Ui Admin中，加载状态的管理遵循了一致的模式：

// 声明加载状态变量
const loading = ref(false);

// 异步操作函数
const asyncOperation = async () => {
  // 开始：设置加载状态为true
  loading.value = true;
  try {
    // 执行异步操作
    await someAsyncFunction();
    // 成功处理
    message.success('操作成功');
  } catch (error) {
    // 错误处理
    message.error('操作失败');
  } finally {
    // 结束：无论成功失败，都设置加载状态为false
    loading.value = false;
  }
};

这种模式确保了无论操作成功还是失败，加载状态最终都会被重置，避免了界面永久停留在加载状态的问题。

2. 不同加载状态的适用场景

加载方式	适用场景	优点	缺点
按钮加载	独立操作，如表单提交	直观，指示明确	只能指示单个按钮的操作
骨架屏	数据卡片，列表项	提供内容预览，减少感知等待时间	实现相对复杂，需要为不同内容定制
Spin组件	整个页面或大组件加载	覆盖整个区域，防止用户交互	遮挡内容，用户无法进行其他操作
表格加载	表格数据加载	与表格集成良好	仅适用于表格组件

3. 加载状态设计的注意事项

避免过度使用：不是所有操作都需要加载状态指示。对于非常快速的操作（<100ms），加载指示器可能会闪烁，反而影响用户体验。
提供取消选项：对于可能耗时较长的操作，考虑提供取消功能。
错误处理：加载失败时，应提供清晰的错误信息和重试选项。
进度指示：对于长时间运行的操作，考虑使用进度条代替无限旋转的加载动画，让用户了解操作的进度。

在Naive Ui Admin中，我们可以看到一个使用进度条的例子：

<n-progress
  type="line"
  :percentage="saleroom.degree"
  :indicator-placement="'inside'"
  processing
/>

这个进度条组件可以直观地展示销售目标的完成进度。

加载状态实现的演进与优化

1. 从简单到复杂的演进

Naive Ui Admin中的加载状态实现经历了从简单到复杂的演进过程：

mermaid

2. 性能优化

随着应用规模的增长，加载状态的管理也面临性能优化的挑战。Naive Ui Admin采用了以下优化策略：

组件懒加载：结合Vue的异步组件和代码分割，减少初始加载时间。
缓存机制：对于不常变化的数据，实现缓存机制，避免重复加载。
加载状态合并：当多个相关操作同时进行时，合并加载状态指示，避免界面上出现过多的加载指示器。

总结与展望

Naive Ui Admin提供了丰富的加载状态实现方式，从简单的按钮加载到复杂的骨架屏和表格加载，覆盖了中后台系统中各种常见场景。这些实现遵循了一致的设计模式，既保证了用户体验的连贯性，又提高了代码的可维护性。

随着Web技术的发展，我们可以期待未来加载状态实现的进一步优化：

智能预加载：基于用户行为预测，提前加载可能需要的数据。
渐进式加载：优先加载可视区域内容，提升感知性能。
个性化加载状态：根据用户角色或偏好定制加载状态的展示方式。

通过合理选择和实现加载状态指示，我们可以显著提升中后台系统的用户体验，减少用户等待的焦虑感，提高工作效率。Naive Ui Admin在这方面提供了良好的实践范例，值得我们在实际项目中学习和借鉴。

参考资料

Naive UI官方文档 - 加载组件
Vue3官方文档 - 组合式API
"Designing for Performance" - Google Web.dev
Naive Ui Admin源代码
- src/views/dashboard/console/console.vue
- src/views/iframe/index.vue
- src/components/Table/src/Table.vue

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考