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

<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>