修改

src/lang/package/zh-cn/menus.js

@@ -9,7 +9,8 @@ export default {
   system_parameter: '系统参数',
   system_dict: '字典管理',
   system_dict_data: '字典数据',
-  system_tags: '网站导航设置',
+  system_tags: '导航设置',
+  system_design: '平台设置',
   user_admin: '管理员用户',
   user_user: '平台用户',
   platform: '信息管理',

src/store/api/platform/design.js

@@ -0,0 +1,40 @@
+import { defineStore } from 'pinia'
+import { AxiosWrapper } from '@/utils/axios-wrapper'
+import { get } from 'lodash-es'
+const url = '/design'
+const axios = new AxiosWrapper()
+
+export const DesignStore = defineStore('design', () => {
+  const query = async ({ skip = 0, limit = undefined, ...info } = {}) => {
+    let cond = {}
+    if (skip) cond.skip = skip
+    if (limit) cond.limit = limit
+    cond = { ...cond, ...info }
+    const res = await axios.$get(`${url}`, cond)
+    return res
+  }
+  const fetch = async (payload) => {
+    const res = await axios.$get(`${url}/${payload}`)
+    return res
+  }
+  const create = async (payload) => {
+    const res = await axios.$post(`${url}`, payload)
+    return res
+  }
+  const update = async (payload) => {
+    const id = get(payload, 'id', get(payload, '_id'))
+    const res = await axios.$post(`${url}/${id}`, payload)
+    return res
+  }
+  const del = async (payload) => {
+    const res = await axios.$delete(`${url}/${payload}`)
+    return res
+  }
+  return {
+    query,
+    fetch,
+    create,
+    update,
+    del
+  }
+})

src/views/system/design/index.vue

@@ -0,0 +1,144 @@
+<template>
+  <div id="index">
+    <el-row>
+      <el-col :span="24" class="main animate__animated animate__backInRight" v-loading="loading">
+        <el-col :span="24" class="one">
+          <custom-form v-model="form" :fields="fields" :rules="rules" @save="toSave">
+            <template #logoUrl>
+              <custom-upload
+                model="logoUrl"
+                :list="form.logoUrl"
+                :limit="1"
+                url="/files/web/template/design/upload"
+                @change="onUpload"
+              ></custom-upload>
+            </template>
+            <template #videoUrl>
+              <custom-upload
+                model="videoUrl"
+                :list="form.videoUrl"
+                :limit="1"
+                url="/files/web/template/design/upload"
+                @change="onUpload"
+              ></custom-upload>
+            </template>
+            <template #footInfo>
+              <div class="footInfo">
+                <custom-form
+                  v-model="form.footInfo"
+                  :fields="footFields"
+                  :rules="footRules"
+                  :useSave="false"
+                >
+                  <template #Code>
+                    <custom-upload
+                      model="Code"
+                      :list="form.footInfo.Code"
+                      :limit="1"
+                      url="/files/web/template/design/upload"
+                      @change="onFUpload"
+                    ></custom-upload>
+                  </template>
+                  <template #Unit>
+                    <custom-upload
+                      model="Unit"
+                      :list="form.footInfo.videoUrl"
+                      :limit="1"
+                      url="/files/web/template/design/upload"
+                      @change="onFUpload"
+                    ></custom-upload>
+                  </template>
+                </custom-form>
+              </div>
+            </template>
+          </custom-form>
+        </el-col>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script setup>
+import { cloneDeep, get } from 'lodash-es'
+import { DesignStore } from '@/store/api/platform/design'
+const store = DesignStore()
+const $checkRes = inject('$checkRes')
+// 加载中
+const loading = ref(false)
+// 表单
+const form = ref({ footInfo: {} })
+const fields = ref([
+  { label: '标题', model: 'zhTitle' },
+  { label: '英文标题', model: 'zhEnglish' },
+  { label: '短简介', model: 'zhBrief' },
+  { label: 'logo', model: 'logoUrl', custom: true },
+  { label: '视频', model: 'videoUrl', custom: true },
+  { label: '网站底部信息', model: 'footInfo', custom: true }
+])
+const rules = ref({
+  zhTitle: [{ required: true, message: '请输入标题' }],
+  zhEnglish: [{ required: true, message: '请输入英文标题' }],
+  zhBrief: [{ required: true, message: '请输入短简介' }],
+  logoUrl: [{ required: true, message: '请上传logo图片' }]
+})
+const footFields = ref([
+  { label: '联系电话', model: 'Phone' },
+  { label: '电子邮箱', model: 'Email' },
+  { label: '地址', model: 'Address' },
+  { label: '底部导航', model: 'Copyright' },
+  { label: '公司', model: 'Company' },
+  { label: '二维码图片', model: 'Code', custom: true },
+  { label: '事业编图片', model: 'Unit', custom: true }
+])
+const footRules = ref({
+  Phone: [{ required: true, message: '请输入联系电话' }],
+  Email: [{ required: true, message: '请输入电子邮箱' }],
+  Address: [{ required: true, message: '请输入地址' }],
+  Copyright: [{ required: true, message: '请输入底部导航' }],
+  Company: [{ required: true, message: '请输入公司' }],
+  Code: [{ required: true, message: '请上传二维码图片' }],
+  Unit: [{ required: true, message: '请上传事业编图片' }]
+})
+// 请求
+onMounted(async () => {
+  loading.value = true
+  await search()
+  loading.value = false
+})
+const search = async () => {
+  const res = await store.query()
+  if (res.errcode == '0') form.value = res.data[0] || { footInfo: {} }
+}
+// 提交保存
+const toSave = async () => {
+  const data = cloneDeep(form.value)
+  let res
+  if (get(data, '_id')) res = await store.update(data)
+  else res = await store.create(data)
+  if ($checkRes(res, true)) search()
+}
+// 上传图片
+const onUpload = (e) => {
+  const { model, value } = e
+  form.value[model] = value
+}
+// 上传图片
+const onFUpload = (e) => {
+  const { model, value } = e
+  form.value.footInfo[model] = value
+}
+</script>
+<style scoped lang="scss">
+.footInfo {
+  width: 100%;
+  border: 1px solid #dcdfe6;
+  padding: 10px;
+  border-radius: 5px;
+  :deep(.el-form-item) {
+    margin-bottom: 18px !important;
+  }
+  :deep(.el-form-item__label-wrap) {
+    margin-left: 0 !important;
+  }
+}
+</style>