feat(projects): 新增主题配置

src/views/home/index.vue

@@ -1,6 +1,49 @@
 <template>
-  <div>Home</div>
+  <div>
+    <n-space>
+      <n-button v-for="item in actions" :key="item.key" type="primary" @click="handleClick(item.key)">
+        {{ item.label }}
+      </n-button>
+    </n-space>
+  </div>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { useLoadingBar, useDialog, useNotification, useMessage } from 'naive-ui';
+
+type ActionType = 'loading-bar' | 'dialog' | 'notification' | 'message';
+interface Action {
+  key: ActionType;
+  label: string;
+}
+
+const loadingBar = useLoadingBar();
+const dialog = useDialog();
+const notification = useNotification();
+const message = useMessage();
+
+const actions: Action[] = [
+  { key: 'loading-bar', label: 'loading bar' },
+  { key: 'dialog', label: 'dialog' },
+  { key: 'notification', label: 'notification' },
+  { key: 'message', label: 'message' }
+];
+function handleClick(type: ActionType) {
+  if (type === 'loading-bar') {
+    loadingBar.start();
+    setTimeout(() => {
+      loadingBar.finish();
+    }, 5000);
+  }
+  if (type === 'dialog') {
+    dialog.info({ content: '弹窗示例！' });
+  }
+  if (type === 'notification') {
+    notification.info({ content: '通知示例！' });
+  }
+  if (type === 'message') {
+    message.info('消息示例！');
+  }
+}
+</script>
 <style scoped></style>