feat: 系统设置优化

web/src/components/GlobalProviders.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { appState } from "@/utils/app-state";
+import {
+  NDialogProvider,
+  NLoadingBarProvider,
+  NMessageProvider,
+  useLoadingBar,
+  useMessage,
+} from "naive-ui";
+import { defineComponent, watch } from "vue";
+
+function useGlobalMessage() {
+  window.$message = useMessage();
+}
+
+const LoadingBar = defineComponent({
+  setup() {
+    const loadingBar = useLoadingBar();
+    watch(
+      () => appState.loading,
+      loading => {
+        if (loading) {
+          loadingBar.start();
+        } else {
+          loadingBar.finish();
+        }
+      }
+    );
+    return () => null;
+  },
+});
+
+const Message = defineComponent({
+  setup() {
+    useGlobalMessage();
+    return () => null;
+  },
+});
+</script>
+
+<template>
+  <n-loading-bar-provider>
+    <n-message-provider>
+      <n-dialog-provider>
+        <slot />
+        <loading-bar />
+        <message />
+      </n-dialog-provider>
+    </n-message-provider>
+  </n-loading-bar-provider>
+</template>