feat(components): 新增创建分类和笔记对话框及头部组件

- 新增 CreateGroupDialog 组件用于创建分类
- 新增 CreateNoteDialog 组件用于创建笔记
- 新增 HomeHeader 组件用于显示主页头部信息
- 对话框组件使用 Element Plus 样式- 头部组件包含用户操作按钮和搜索功能

biji-qianduan/src/components/home/dialogs/SystemSettingsDialog.vue

@@ -0,0 +1,98 @@
+<template>
+  <el-dialog
+      :model-value="visible"
+      title="系统管理"
+      width="500px"
+      @close="handleClose"
+      :close-on-click-modal="false"
+  >
+    <el-form label-width="120px">
+      <el-form-item label="开放注册">
+        <el-switch v-model="isRegistrationEnabled" @change="handleToggleRegistration"></el-switch>
+      </el-form-item>
+      <el-form-item label="生成注册码">
+        <el-button type="primary" @click="handleGenerateCode">生成</el-button>
+      </el-form-item>
+      <el-form-item v-if="generatedCode" label="新注册码">
+        <el-input v-model="generatedCode" readonly>
+          <template #append>
+            <el-button @click="copyToClipboard(generatedCode)">复制</el-button>
+          </template>
+        </el-input>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="handleClose">关闭</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref, watch, onMounted } from 'vue';
+import { ElMessage } from 'element-plus';
+import {
+  getRegistrationStatus,
+  toggleRegistration,
+  generateRegistrationCode,
+} from '@/api/CommonApi.js';
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const emit = defineEmits(['update:visible']);
+
+const isRegistrationEnabled = ref(true);
+const generatedCode = ref('');
+
+watch(() => props.visible, (newVal) => {
+  if (newVal) {
+    fetchRegistrationStatus();
+    generatedCode.value = ''; // Reset code when dialog opens
+  }
+});
+
+const fetchRegistrationStatus = async () => {
+  try {
+    isRegistrationEnabled.value = await getRegistrationStatus();
+  } catch (error) {
+    console.error("Failed to fetch registration status:", error);
+    ElMessage.error('获取注册状态失败');
+  }
+};
+
+const handleToggleRegistration = async (value) => {
+  try {
+    await toggleRegistration(value);
+    ElMessage.success(`注册功能已${value ? '开启' : '关闭'}`);
+  } catch (error) {
+    ElMessage.error('操作失败');
+    isRegistrationEnabled.value = !value; // Revert on failure
+  }
+};
+
+const handleGenerateCode = async () => {
+  try {
+    const code = await generateRegistrationCode();
+    generatedCode.value = code;
+    ElMessage.success('注册码生成成功');
+  } catch (error) {
+    ElMessage.error('生成注册码失败: ' + error.message);
+  }
+};
+
+const copyToClipboard = (text) => {
+  navigator.clipboard.writeText(text).then(() => {
+    ElMessage.success('已复制到剪贴板');
+  }, () => {
+    ElMessage.error('复制失败');
+  });
+};
+
+const handleClose = () => {
+  emit('update:visible', false);
+};
+</script>