first commit

src/views/system/siteSettings/components/normalSettings.vue

@@ -0,0 +1,195 @@
+<template>
+  <el-form
+    ref="normalFormRef"
+    :model="formData"
+    :rules="normalRules"
+    label-width="120px"
+    style="max-width: 600px"
+  >
+    <el-form-item label="站点名称" prop="sitename">
+      <el-input v-model="sitename" placeholder="请输入站点名称" />
+    </el-form-item>
+    <el-form-item label="站点Logo" prop="logo">
+      <el-upload
+        class="logo-uploader"
+        :show-file-list="false"
+        :auto-upload="false"
+        :on-change="handleLogoChange"
+      >
+        <img
+          v-if="logo"
+          :src="API_BASE_URL + logo.replace(/^\//, '/')"
+          class="logo-image"
+        />
+        <el-icon v-else class="logo-uploader-icon"><Plus /></el-icon>
+      </el-upload>
+    </el-form-item>
+    <el-form-item label="企业名称" prop="companyname">
+      <el-input v-model="companyname" placeholder="请输入企业名称" />
+    </el-form-item>
+    <el-form-item label="站点SEO描述" prop="description">
+      <el-input v-model="description" placeholder="请输入站点SEO描述" />
+    </el-form-item>
+    <el-form-item label="版权信息" prop="copyright">
+      <el-input v-model="copyright" placeholder="如：© 2026 公司名称" />
+    </el-form-item>
+    <el-form-item label="备案号 " prop="icp">
+      <el-input v-model="icp" placeholder="如：苏ICP备20260000号" />
+    </el-form-item>
+    <el-form-item>
+      <el-button type="primary" @click="handleSaveNormalInfos"
+        >保存设置</el-button
+      >
+      <el-button @click="resetnormalForm">重置</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from "vue";
+import { ElMessage } from "element-plus";
+import { Plus } from "@element-plus/icons-vue";
+import type { FormInstance, FormRules, UploadFile } from "element-plus";
+import { getNormalInfos, saveNormalInfos } from "@/api/sitesettings";
+import { uploadFile } from "@/api/file";
+
+const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;
+
+const normalFormRef = ref<FormInstance>();
+
+const sitename = ref("");
+const companyname = ref("");
+const logo = ref("");
+const description = ref("");
+const copyright = ref("");
+const icp = ref("");
+
+const formData = {
+  sitename,
+  companyname,
+  logo,
+  description,
+  copyright,
+  icp,
+};
+
+const normalRules: FormRules = {
+  sitename: [{ required: true, message: "请输入站点名称", trigger: "blur" }],
+};
+
+//调用基础数据
+const initNormalInfos = async () => {
+  const res = await getNormalInfos();
+  if (res.code === 200 && res.data) {
+    const data = res.data;
+    const dataMap: Record<string, string> = {};
+    data.forEach((item: any) => {
+      dataMap[item.label] = item.value;
+    });
+    sitename.value = dataMap["sitename"] || "";
+    logo.value = dataMap["logo"] || "";
+    description.value = dataMap["description"] || "";
+    copyright.value = dataMap["copyright"] || "";
+    icp.value = dataMap["icp"] || "";
+    companyname.value = dataMap["companyname"] || "";
+  }
+};
+
+const handleLogoChange = (file: UploadFile) => {
+  const uploadFormData = new FormData();
+  uploadFormData.append("file", file.raw);
+  uploadFormData.append("cate", "site");
+
+  uploadFile(uploadFormData).then((uploadRes) => {
+    if (
+      (uploadRes.code === 200 || uploadRes.code === 201) &&
+      uploadRes.data &&
+      uploadRes.data.url
+    ) {
+      logo.value = uploadRes.data.url.replace(/\\/g, "/");
+    } else {
+      ElMessage.error(uploadRes.msg || "上传失败");
+    }
+  });
+};
+
+const handleSaveNormalInfos = async () => {
+  if (!normalFormRef.value) return;
+  await normalFormRef.value.validate(async (valid) => {
+    if (valid) {
+      const data = [
+        { label: "sitename", value: sitename.value },
+        { label: "logo", value: logo.value },
+        { label: "description", value: description.value },
+        { label: "companyname", value: companyname.value },
+        { label: "copyright", value: copyright.value },
+        { label: "icp", value: icp.value },
+      ];
+      const res = await saveNormalInfos(data);
+      if (res.code === 200) {
+        ElMessage.success("保存成功");
+      } else {
+        ElMessage.error(res.msg || "保存失败");
+      }
+    }
+  });
+};
+
+const resetnormalForm = () => {
+  sitename.value = "";
+  companyname.value = "";
+  logo.value = "";
+  description.value = "";
+  copyright.value = ""; 
+  icp.value = "";
+};
+
+defineExpose({
+  sitename,
+  companyname,
+  logo,
+  description,
+  copyright,
+  icp,
+});
+
+// 初始化基础数据
+onMounted(() => {
+  initNormalInfos();
+});
+</script>
+
+<style lang="scss" scoped>
+.logo-uploader {
+  :deep(.el-upload) {
+    border: 1px dashed #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    position: relative;
+    overflow: hidden;
+    transition: all 0.3s;
+
+    &:hover {
+      border-color: #409eff;
+    }
+  }
+
+  .logo-uploader-icon {
+    font-size: 28px;
+    color: #8c939d;
+    width: 100px;
+    height: 100px;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .logo-image {
+    width: 100px;
+    height: 100px;
+    object-fit: contain;
+    display: block;
+  }
+}
+</style>