Add configurable contact page management

ruoyi-admin/src/main/java/com/ruoyi/web/controller/app/AppContactController.java

@@ -0,0 +1,39 @@
+package com.ruoyi.web.controller.app;
+
+import com.ruoyi.app.domain.AppContactPage;
+import com.ruoyi.app.service.IAppContactService;
+import com.ruoyi.common.annotation.Log;
+import com.ruoyi.common.core.controller.BaseController;
+import com.ruoyi.common.core.domain.AjaxResult;
+import com.ruoyi.common.enums.BusinessType;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.security.access.prepost.PreAuthorize;
+import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.PutMapping;
+import org.springframework.web.bind.annotation.RequestBody;
+import org.springframework.web.bind.annotation.RequestMapping;
+import org.springframework.web.bind.annotation.RestController;
+
+@RestController
+@RequestMapping("/app/contact")
+public class AppContactController extends BaseController
+{
+    @Autowired
+    private IAppContactService contactService;
+
+    @PreAuthorize("@ss.hasPermi('app:contact:query')")
+    @GetMapping
+    public AjaxResult getInfo()
+    {
+        return success(contactService.selectAdminContactPage());
+    }
+
+    @PreAuthorize("@ss.hasPermi('app:contact:edit')")
+    @Log(title = "联系页面配置", businessType = BusinessType.UPDATE)
+    @PutMapping
+    public AjaxResult edit(@RequestBody AppContactPage page)
+    {
+        page.setUpdateBy(getUsername());
+        return toAjax(contactService.updateContactPage(page));
+    }
+}

ruoyi-admin/src/main/java/com/ruoyi/web/controller/app/PublicController.java

@@ -2,6 +2,7 @@ package com.ruoyi.web.controller.app;
 
 import com.ruoyi.app.domain.ShuiYinVo;
 import com.ruoyi.app.mapper.AppPunlicMapper;
+import com.ruoyi.app.service.IAppContactService;
 import com.ruoyi.common.core.controller.BaseController;
 import com.ruoyi.common.core.domain.AjaxResult;
 import com.ruoyi.system.service.ISysConfigService;
@@ -20,6 +21,8 @@ public class PublicController  extends BaseController {
     AppPunlicMapper appPunlicMapper;
     @Autowired
     private ISysConfigService configService;
+    @Autowired
+    private IAppContactService contactService;
     /**
      * 去水印 key 免费申请联系作者微信：yimoziyuan666
      * @return
@@ -76,4 +79,11 @@ public class PublicController  extends BaseController {
         return map;
     }
 
+    /** 获取小程序联系页面公开配置。 */
+    @GetMapping(value = "/contact-page")
+    public AjaxResult getContactPage()
+    {
+        return success(contactService.selectPublicContactPage());
+    }
+
 }

ruoyi-system/src/main/java/com/ruoyi/app/domain/AppContactItem.java

@@ -0,0 +1,42 @@
+package com.ruoyi.app.domain;
+
+import com.ruoyi.common.core.domain.BaseEntity;
+
+/**
+ * 小程序联系页面联系方式对象 app_contact_item。
+ */
+public class AppContactItem extends BaseEntity
+{
+    private static final long serialVersionUID = 1L;
+
+    private Long id;
+    private String type;
+    private String label;
+    private String value;
+    private String iconUrl;
+    private String qrCodeUrl;
+    /** copy复制，qrcode查看二维码 */
+    private String actionType;
+    /** 0启用，1停用 */
+    private String status;
+    private Integer sort;
+
+    public Long getId() { return id; }
+    public void setId(Long id) { this.id = id; }
+    public String getType() { return type; }
+    public void setType(String type) { this.type = type; }
+    public String getLabel() { return label; }
+    public void setLabel(String label) { this.label = label; }
+    public String getValue() { return value; }
+    public void setValue(String value) { this.value = value; }
+    public String getIconUrl() { return iconUrl; }
+    public void setIconUrl(String iconUrl) { this.iconUrl = iconUrl; }
+    public String getQrCodeUrl() { return qrCodeUrl; }
+    public void setQrCodeUrl(String qrCodeUrl) { this.qrCodeUrl = qrCodeUrl; }
+    public String getActionType() { return actionType; }
+    public void setActionType(String actionType) { this.actionType = actionType; }
+    public String getStatus() { return status; }
+    public void setStatus(String status) { this.status = status; }
+    public Integer getSort() { return sort; }
+    public void setSort(Integer sort) { this.sort = sort; }
+}

ruoyi-system/src/main/java/com/ruoyi/app/domain/AppContactPage.java

@@ -0,0 +1,33 @@
+package com.ruoyi.app.domain;
+
+import java.util.ArrayList;
+import java.util.List;
+import com.ruoyi.common.core.domain.BaseEntity;
+
+/**
+ * 小程序联系页面配置对象 app_contact_page。
+ */
+public class AppContactPage extends BaseEntity
+{
+    private static final long serialVersionUID = 1L;
+
+    private Long id;
+    private String avatarUrl;
+    private String nickname;
+    private String bio;
+    private String backgroundUrl;
+    private List<AppContactItem> contacts = new ArrayList<>();
+
+    public Long getId() { return id; }
+    public void setId(Long id) { this.id = id; }
+    public String getAvatarUrl() { return avatarUrl; }
+    public void setAvatarUrl(String avatarUrl) { this.avatarUrl = avatarUrl; }
+    public String getNickname() { return nickname; }
+    public void setNickname(String nickname) { this.nickname = nickname; }
+    public String getBio() { return bio; }
+    public void setBio(String bio) { this.bio = bio; }
+    public String getBackgroundUrl() { return backgroundUrl; }
+    public void setBackgroundUrl(String backgroundUrl) { this.backgroundUrl = backgroundUrl; }
+    public List<AppContactItem> getContacts() { return contacts; }
+    public void setContacts(List<AppContactItem> contacts) { this.contacts = contacts; }
+}

ruoyi-system/src/main/java/com/ruoyi/app/mapper/AppContactMapper.java

@@ -0,0 +1,19 @@
+package com.ruoyi.app.mapper;
+
+import java.util.List;
+import com.ruoyi.app.domain.AppContactItem;
+import com.ruoyi.app.domain.AppContactPage;
+import org.apache.ibatis.annotations.Param;
+
+public interface AppContactMapper
+{
+    AppContactPage selectAppContactPage();
+
+    List<AppContactItem> selectAppContactItemList(@Param("status") String status);
+
+    int upsertAppContactPage(AppContactPage page);
+
+    int deleteAllAppContactItems();
+
+    int insertAppContactItem(AppContactItem item);
+}

ruoyi-system/src/main/java/com/ruoyi/app/service/IAppContactService.java

@@ -0,0 +1,15 @@
+package com.ruoyi.app.service;
+
+import com.ruoyi.app.domain.AppContactPage;
+
+public interface IAppContactService
+{
+    /** 查询后台维护用的完整配置。 */
+    AppContactPage selectAdminContactPage();
+
+    /** 查询小程序展示用的启用配置。 */
+    AppContactPage selectPublicContactPage();
+
+    /** 保存页面资料及完整联系方式列表。 */
+    int updateContactPage(AppContactPage page);
+}

ruoyi-system/src/main/java/com/ruoyi/app/service/impl/AppContactServiceImpl.java

@@ -0,0 +1,152 @@
+package com.ruoyi.app.service.impl;
+
+import java.util.ArrayList;
+import java.util.Date;
+import java.util.List;
+import com.ruoyi.app.domain.AppContactItem;
+import com.ruoyi.app.domain.AppContactPage;
+import com.ruoyi.app.mapper.AppContactMapper;
+import com.ruoyi.app.service.IAppContactService;
+import com.ruoyi.common.exception.ServiceException;
+import com.ruoyi.common.utils.StringUtils;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.stereotype.Service;
+import org.springframework.transaction.annotation.Transactional;
+
+@Service
+public class AppContactServiceImpl implements IAppContactService
+{
+    private static final int MAX_CONTACTS = 30;
+
+    @Autowired
+    private AppContactMapper contactMapper;
+
+    @Override
+    public AppContactPage selectAdminContactPage()
+    {
+        return buildContactPage(null);
+    }
+
+    @Override
+    public AppContactPage selectPublicContactPage()
+    {
+        return buildContactPage("0");
+    }
+
+    private AppContactPage buildContactPage(String status)
+    {
+        AppContactPage page = contactMapper.selectAppContactPage();
+        if (page == null)
+        {
+            page = defaultPage();
+        }
+        page.setContacts(contactMapper.selectAppContactItemList(status));
+        return page;
+    }
+
+    @Override
+    @Transactional
+    public int updateContactPage(AppContactPage page)
+    {
+        if (page == null)
+        {
+            throw new ServiceException("页面配置不能为空");
+        }
+        normalizePage(page);
+        List<AppContactItem> contacts = page.getContacts();
+        if (contacts == null)
+        {
+            contacts = new ArrayList<>();
+            page.setContacts(contacts);
+        }
+        if (contacts.size() > MAX_CONTACTS)
+        {
+            throw new ServiceException("联系方式最多可配置" + MAX_CONTACTS + "条");
+        }
+
+        Date now = new Date();
+        page.setId(1L);
+        page.setUpdateTime(now);
+        contactMapper.upsertAppContactPage(page);
+        contactMapper.deleteAllAppContactItems();
+
+        int index = 0;
+        for (AppContactItem item : contacts)
+        {
+            normalizeItem(item, index++);
+            item.setId(null);
+            item.setCreateBy(page.getUpdateBy());
+            item.setUpdateBy(page.getUpdateBy());
+            item.setCreateTime(now);
+            item.setUpdateTime(now);
+            contactMapper.insertAppContactItem(item);
+        }
+        return 1;
+    }
+
+    private void normalizePage(AppContactPage page)
+    {
+        page.setAvatarUrl(trimAndCheck(page.getAvatarUrl(), 500, "头像地址"));
+        page.setNickname(trimAndCheck(page.getNickname(), 100, "昵称"));
+        page.setBio(trimAndCheck(page.getBio(), 500, "个人简介"));
+        page.setBackgroundUrl(trimAndCheck(page.getBackgroundUrl(), 500, "背景图地址"));
+        if (StringUtils.isEmpty(page.getNickname()))
+        {
+            throw new ServiceException("昵称不能为空");
+        }
+    }
+
+    private void normalizeItem(AppContactItem item, int index)
+    {
+        if (item == null)
+        {
+            throw new ServiceException("第" + (index + 1) + "条联系方式不能为空");
+        }
+        item.setType(trimAndCheck(item.getType(), 30, "联系方式类型"));
+        item.setLabel(trimAndCheck(item.getLabel(), 50, "联系方式名称"));
+        item.setValue(trimAndCheck(item.getValue(), 500, "联系方式内容"));
+        item.setIconUrl(trimAndCheck(item.getIconUrl(), 500, "图标地址"));
+        item.setQrCodeUrl(trimAndCheck(item.getQrCodeUrl(), 500, "二维码地址"));
+        if (StringUtils.isEmpty(item.getType()))
+        {
+            item.setType("custom");
+        }
+        if (StringUtils.isEmpty(item.getLabel()))
+        {
+            throw new ServiceException("第" + (index + 1) + "条联系方式名称不能为空");
+        }
+        if (StringUtils.isEmpty(item.getValue()))
+        {
+            throw new ServiceException("第" + (index + 1) + "条联系方式内容不能为空");
+        }
+        if (!"qrcode".equals(item.getActionType()) || StringUtils.isEmpty(item.getQrCodeUrl()))
+        {
+            item.setActionType("copy");
+        }
+        item.setStatus("1".equals(item.getStatus()) ? "1" : "0");
+        if (item.getSort() == null || item.getSort() < 0)
+        {
+            item.setSort((index + 1) * 10);
+        }
+    }
+
+    private String trimAndCheck(String value, int maxLength, String fieldName)
+    {
+        String result = StringUtils.trim(value);
+        if (result != null && result.length() > maxLength)
+        {
+            throw new ServiceException(fieldName + "不能超过" + maxLength + "个字符");
+        }
+        return result;
+    }
+
+    private AppContactPage defaultPage()
+    {
+        AppContactPage page = new AppContactPage();
+        page.setId(1L);
+        page.setAvatarUrl("https://img.yidaima.cn/%E5%A4%B4%E5%83%8F/9b889964f97e4d0c8f52f7b9ec0d04da.jpg");
+        page.setNickname("Nan Yin");
+        page.setBio("如果爱意难平，那就把它藏在心底吧！");
+        return page;
+    }
+}

ruoyi-system/src/main/resources/mapper/app/AppContactMapper.xml

@@ -0,0 +1,74 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<!DOCTYPE mapper
+PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
+"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
+<mapper namespace="com.ruoyi.app.mapper.AppContactMapper">
+
+    <resultMap type="AppContactPage" id="AppContactPageResult">
+        <result property="id" column="id" />
+        <result property="avatarUrl" column="avatar_url" />
+        <result property="nickname" column="nickname" />
+        <result property="bio" column="bio" />
+        <result property="backgroundUrl" column="background_url" />
+        <result property="createBy" column="create_by" />
+        <result property="createTime" column="create_time" />
+        <result property="updateBy" column="update_by" />
+        <result property="updateTime" column="update_time" />
+    </resultMap>
+
+    <resultMap type="AppContactItem" id="AppContactItemResult">
+        <result property="id" column="id" />
+        <result property="type" column="type" />
+        <result property="label" column="label" />
+        <result property="value" column="contact_value" />
+        <result property="iconUrl" column="icon_url" />
+        <result property="qrCodeUrl" column="qr_code_url" />
+        <result property="actionType" column="action_type" />
+        <result property="status" column="status" />
+        <result property="sort" column="sort" />
+        <result property="createBy" column="create_by" />
+        <result property="createTime" column="create_time" />
+        <result property="updateBy" column="update_by" />
+        <result property="updateTime" column="update_time" />
+    </resultMap>
+
+    <select id="selectAppContactPage" resultMap="AppContactPageResult">
+        select id, avatar_url, nickname, bio, background_url,
+               create_by, create_time, update_by, update_time
+        from app_contact_page
+        where id = 1
+    </select>
+
+    <select id="selectAppContactItemList" resultMap="AppContactItemResult">
+        select id, type, label, contact_value, icon_url, qr_code_url, action_type,
+               status, sort, create_by, create_time, update_by, update_time
+        from app_contact_item
+        <if test="status != null and status != ''">where status = #{status}</if>
+        order by sort asc, id asc
+    </select>
+
+    <insert id="upsertAppContactPage" parameterType="AppContactPage">
+        insert into app_contact_page
+            (id, avatar_url, nickname, bio, background_url, create_by, create_time, update_by, update_time)
+        values
+            (1, #{avatarUrl}, #{nickname}, #{bio}, #{backgroundUrl},
+             #{updateBy}, #{updateTime}, #{updateBy}, #{updateTime})
+        on duplicate key update
+            avatar_url = values(avatar_url), nickname = values(nickname), bio = values(bio),
+            background_url = values(background_url), update_by = values(update_by),
+            update_time = values(update_time)
+    </insert>
+
+    <delete id="deleteAllAppContactItems">
+        delete from app_contact_item
+    </delete>
+
+    <insert id="insertAppContactItem" parameterType="AppContactItem" useGeneratedKeys="true" keyProperty="id">
+        insert into app_contact_item
+            (type, label, contact_value, icon_url, qr_code_url, action_type, status, sort,
+             create_by, create_time, update_by, update_time)
+        values
+            (#{type}, #{label}, #{value}, #{iconUrl}, #{qrCodeUrl}, #{actionType}, #{status}, #{sort},
+             #{createBy}, #{createTime}, #{updateBy}, #{updateTime})
+    </insert>
+</mapper>

ruoyi-ui/src/api/app/contact.js

@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function getContactConfig() {
+  return request({ url: '/app/contact', method: 'get' })
+}
+
+export function updateContactConfig(data) {
+  return request({ url: '/app/contact', method: 'put', data })
+}

ruoyi-ui/src/views/app/contact/index.vue

@@ -0,0 +1,270 @@
+<template>
+  <div v-loading="loading" class="app-container contact-config">
+    <el-alert
+      title="这里保存后，小程序会动态展示启用的联系方式；页面导航标题保持现状。"
+      type="info"
+      :closable="false"
+      show-icon
+      class="page-alert"
+    />
+
+    <el-form ref="form" :model="form" :rules="rules" label-width="96px">
+      <el-card shadow="never" class="config-card">
+        <div slot="header" class="card-header">
+          <div>
+            <div class="card-title">页面资料</div>
+            <div class="card-desc">配置头像、昵称和简介，背景图不上传时使用默认渐变背景。</div>
+          </div>
+        </div>
+
+        <el-row :gutter="28">
+          <el-col :xs="24" :sm="12">
+            <el-form-item label="头像" prop="avatarUrl">
+              <image-upload v-model="form.avatarUrl" :limit="1" :file-size="5" />
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12">
+            <el-form-item label="顶部背景图" prop="backgroundUrl">
+              <image-upload v-model="form.backgroundUrl" :limit="1" :file-size="8" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="28">
+          <el-col :xs="24" :sm="12">
+            <el-form-item label="昵称" prop="nickname">
+              <el-input v-model.trim="form.nickname" maxlength="100" show-word-limit placeholder="请输入昵称" />
+            </el-form-item>
+          </el-col>
+          <el-col :xs="24" :sm="12">
+            <el-form-item label="个人简介" prop="bio">
+              <el-input v-model.trim="form.bio" maxlength="500" show-word-limit placeholder="请输入个人简介" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-card>
+
+      <el-card shadow="never" class="config-card">
+        <div slot="header" class="card-header">
+          <div>
+            <div class="card-title">联系方式</div>
+            <div class="card-desc">可新增、删除、启停和排序；未上传图标时小程序会使用对应类型的文字图标。</div>
+          </div>
+          <el-button type="primary" plain icon="el-icon-plus" size="small" @click="addContact">新增联系方式</el-button>
+        </div>
+
+        <el-table :data="form.contacts" border row-key="rowKey" empty-text="暂无联系方式，请点击右上角新增">
+          <el-table-column label="排序" width="90" align="center">
+            <template slot-scope="scope">
+              <el-input-number v-model="scope.row.sort" :min="0" :max="9999" :controls="false" size="small" />
+            </template>
+          </el-table-column>
+          <el-table-column label="类型" width="130">
+            <template slot-scope="scope">
+              <el-select v-model="scope.row.type" size="small" @change="applyTypePreset(scope.row)">
+                <el-option v-for="item in contactTypes" :key="item.value" :label="item.label" :value="item.value" />
+              </el-select>
+            </template>
+          </el-table-column>
+          <el-table-column label="显示名称" min-width="145">
+            <template slot-scope="scope">
+              <el-input v-model.trim="scope.row.label" maxlength="50" size="small" placeholder="如：微信" />
+            </template>
+          </el-table-column>
+          <el-table-column label="联系内容" min-width="220">
+            <template slot-scope="scope">
+              <el-input v-model.trim="scope.row.value" maxlength="500" size="small" placeholder="账号、邮箱或网址" />
+            </template>
+          </el-table-column>
+          <el-table-column label="点击操作" width="130">
+            <template slot-scope="scope">
+              <el-select v-model="scope.row.actionType" size="small">
+                <el-option label="复制内容" value="copy" />
+                <el-option label="查看二维码" value="qrcode" :disabled="!scope.row.qrCodeUrl" />
+              </el-select>
+            </template>
+          </el-table-column>
+          <el-table-column label="自定义图标" width="112" align="center">
+            <template slot-scope="scope">
+              <image-upload v-model="scope.row.iconUrl" class="compact-uploader" :limit="1" :file-size="2" :is-show-tip="false" />
+            </template>
+          </el-table-column>
+          <el-table-column label="二维码" width="112" align="center">
+            <template slot-scope="scope">
+              <image-upload v-model="scope.row.qrCodeUrl" class="compact-uploader" :limit="1" :file-size="5" :is-show-tip="false" />
+            </template>
+          </el-table-column>
+          <el-table-column label="状态" width="90" align="center">
+            <template slot-scope="scope">
+              <el-switch v-model="scope.row.status" active-value="0" inactive-value="1" />
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="80" align="center" fixed="right">
+            <template slot-scope="scope">
+              <el-button type="text" class="danger-button" @click="removeContact(scope.$index)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-card>
+
+      <div class="save-bar">
+        <el-button type="primary" icon="el-icon-check" :loading="saving" @click="submitForm">保存配置</el-button>
+      </div>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { getContactConfig, updateContactConfig } from '@/api/app/contact'
+
+export default {
+  name: 'ContactConfig',
+  data() {
+    return {
+      loading: false,
+      saving: false,
+      rowSequence: 0,
+      contactTypes: [
+        { label: 'QQ', value: 'qq' },
+        { label: '微信', value: 'wechat' },
+        { label: '邮箱', value: 'email' },
+        { label: '博客/网站', value: 'blog' },
+        { label: '自定义', value: 'custom' }
+      ],
+      form: this.emptyForm(),
+      rules: {
+        nickname: [{ required: true, message: '请输入昵称', trigger: 'blur' }]
+      }
+    }
+  },
+  created() {
+    this.loadConfig()
+  },
+  methods: {
+    emptyForm() {
+      return { id: 1, avatarUrl: '', nickname: '', bio: '', backgroundUrl: '', contacts: [] }
+    },
+    loadConfig() {
+      this.loading = true
+      getContactConfig().then(response => {
+        const data = response.data || this.emptyForm()
+        data.contacts = (data.contacts || []).map(item => this.withRowKey(item))
+        this.form = data
+      }).finally(() => { this.loading = false })
+    },
+    withRowKey(item) {
+      this.rowSequence += 1
+      return Object.assign({
+        id: undefined,
+        type: 'custom',
+        label: '',
+        value: '',
+        iconUrl: '',
+        qrCodeUrl: '',
+        actionType: 'copy',
+        status: '0',
+        sort: this.rowSequence * 10
+      }, item, { rowKey: `contact-${this.rowSequence}` })
+    },
+    addContact() {
+      if (this.form.contacts.length >= 30) {
+        this.$modal.msgWarning('最多可配置30条联系方式')
+        return
+      }
+      this.form.contacts.push(this.withRowKey({ sort: (this.form.contacts.length + 1) * 10 }))
+    },
+    removeContact(index) {
+      this.form.contacts.splice(index, 1)
+    },
+    applyTypePreset(row) {
+      const labels = { qq: 'QQ', wechat: '微信', email: '邮箱', blog: '博客' }
+      if (labels[row.type] && !row.label) row.label = labels[row.type]
+      if (row.type === 'email' || row.type === 'blog') row.actionType = 'copy'
+    },
+    validateContacts() {
+      for (let i = 0; i < this.form.contacts.length; i += 1) {
+        const item = this.form.contacts[i]
+        if (!item.label) return `第${i + 1}条联系方式缺少显示名称`
+        if (!item.value) return `第${i + 1}条联系方式缺少联系内容`
+        if (item.actionType === 'qrcode' && !item.qrCodeUrl) return `第${i + 1}条联系方式选择了二维码操作，但尚未上传二维码`
+      }
+      return ''
+    },
+    submitForm() {
+      this.$refs.form.validate(valid => {
+        if (!valid) return
+        const message = this.validateContacts()
+        if (message) {
+          this.$modal.msgWarning(message)
+          return
+        }
+        this.saving = true
+        const payload = JSON.parse(JSON.stringify(this.form))
+        payload.contacts.forEach(item => { delete item.rowKey })
+        updateContactConfig(payload).then(() => {
+          this.$modal.msgSuccess('保存成功')
+          this.loadConfig()
+        }).finally(() => { this.saving = false })
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.contact-config {
+  padding-bottom: 84px;
+}
+.page-alert {
+  margin-bottom: 18px;
+}
+.config-card {
+  margin-bottom: 18px;
+  border-radius: 8px;
+}
+.card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.card-title {
+  color: #303133;
+  font-size: 16px;
+  font-weight: 600;
+}
+.card-desc {
+  margin-top: 6px;
+  color: #909399;
+  font-size: 13px;
+}
+.danger-button {
+  color: #f56c6c;
+}
+.save-bar {
+  position: sticky;
+  z-index: 20;
+  bottom: 0;
+  display: flex;
+  justify-content: flex-end;
+  margin: 0 -20px -84px;
+  padding: 14px 24px;
+  border-top: 1px solid #ebeef5;
+  background: rgba(255, 255, 255, 0.96);
+  box-shadow: 0 -4px 14px rgba(31, 45, 61, 0.06);
+}
+::v-deep .compact-uploader .el-upload--picture-card,
+::v-deep .compact-uploader .el-upload-list--picture-card .el-upload-list__item {
+  width: 58px;
+  height: 58px;
+  line-height: 58px;
+  margin: 0;
+}
+::v-deep .compact-uploader .el-upload-list--picture-card .el-upload-list__item-actions {
+  font-size: 14px;
+}
+::v-deep .el-input-number {
+  width: 62px;
+}
+@media (max-width: 992px) {
+  .card-header { align-items: flex-start; gap: 16px; }
+}
+</style>

sql/contact_page.sql

@@ -0,0 +1,95 @@
+-- 小程序“关注我们”页面配置及后台菜单。
+
+CREATE TABLE IF NOT EXISTS `app_contact_page` (
+  `id` bigint NOT NULL COMMENT '配置主键，固定为1',
+  `avatar_url` varchar(500) DEFAULT NULL COMMENT '头像地址',
+  `nickname` varchar(100) NOT NULL COMMENT '昵称',
+  `bio` varchar(500) DEFAULT NULL COMMENT '个人简介',
+  `background_url` varchar(500) DEFAULT NULL COMMENT '背景图地址，为空使用页面渐变背景',
+  `create_by` varchar(64) DEFAULT '' COMMENT '创建者',
+  `create_time` datetime DEFAULT NULL COMMENT '创建时间',
+  `update_by` varchar(64) DEFAULT '' COMMENT '更新者',
+  `update_time` datetime DEFAULT NULL COMMENT '更新时间',
+  PRIMARY KEY (`id`)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='小程序联系页面配置';
+
+CREATE TABLE IF NOT EXISTS `app_contact_item` (
+  `id` bigint NOT NULL AUTO_INCREMENT COMMENT '联系方式主键',
+  `type` varchar(30) NOT NULL DEFAULT 'custom' COMMENT '类型：qq/wechat/email/blog/custom',
+  `label` varchar(50) NOT NULL COMMENT '显示名称',
+  `contact_value` varchar(500) NOT NULL COMMENT '联系方式内容',
+  `icon_url` varchar(500) DEFAULT NULL COMMENT '自定义图标地址',
+  `qr_code_url` varchar(500) DEFAULT NULL COMMENT '二维码地址',
+  `action_type` varchar(20) NOT NULL DEFAULT 'copy' COMMENT '操作：copy/qrcode',
+  `status` char(1) NOT NULL DEFAULT '0' COMMENT '状态：0启用，1停用',
+  `sort` int NOT NULL DEFAULT 0 COMMENT '显示排序',
+  `create_by` varchar(64) DEFAULT '' COMMENT '创建者',
+  `create_time` datetime DEFAULT NULL COMMENT '创建时间',
+  `update_by` varchar(64) DEFAULT '' COMMENT '更新者',
+  `update_time` datetime DEFAULT NULL COMMENT '更新时间',
+  PRIMARY KEY (`id`),
+  KEY `idx_app_contact_item_status_sort` (`status`, `sort`)
+) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='小程序联系方式';
+
+INSERT INTO `app_contact_page`
+  (`id`, `avatar_url`, `nickname`, `bio`, `background_url`, `create_by`, `create_time`, `update_by`, `update_time`)
+SELECT
+  1,
+  'https://img.yidaima.cn/%E5%A4%B4%E5%83%8F/9b889964f97e4d0c8f52f7b9ec0d04da.jpg',
+  'Nan Yin', '如果爱意难平，那就把它藏在心底吧！', NULL, 'admin', NOW(), '', NULL
+WHERE NOT EXISTS (SELECT 1 FROM `app_contact_page` WHERE `id` = 1);
+
+SET @contact_seed_needed := (SELECT COUNT(*) = 0 FROM `app_contact_item`);
+
+INSERT INTO `app_contact_item`
+  (`type`, `label`, `contact_value`, `icon_url`, `qr_code_url`, `action_type`, `status`, `sort`, `create_by`, `create_time`)
+SELECT 'qq', 'QQ', '594458910', NULL, 'https://img.yidaima.cn/feast/qq_qrcode.jpg', 'qrcode', '0', 10, 'admin', NOW()
+WHERE @contact_seed_needed = 1;
+
+INSERT INTO `app_contact_item`
+  (`type`, `label`, `contact_value`, `icon_url`, `qr_code_url`, `action_type`, `status`, `sort`, `create_by`, `create_time`)
+SELECT 'wechat', '微信', 'forfeastcoding', NULL, 'https://img.yidaima.cn/feast/wx_qrcode.jpg', 'qrcode', '0', 20, 'admin', NOW()
+WHERE @contact_seed_needed = 1;
+
+INSERT INTO `app_contact_item`
+  (`type`, `label`, `contact_value`, `icon_url`, `qr_code_url`, `action_type`, `status`, `sort`, `create_by`, `create_time`)
+SELECT 'email', '邮箱', '594458910@qq.com', NULL, NULL, 'copy', '0', 30, 'admin', NOW()
+WHERE @contact_seed_needed = 1;
+
+INSERT INTO `app_contact_item`
+  (`type`, `label`, `contact_value`, `icon_url`, `qr_code_url`, `action_type`, `status`, `sort`, `create_by`, `create_time`)
+SELECT 'blog', '博客', 'http://www.yidaima.cn/', NULL, NULL, 'copy', '0', 40, 'admin', NOW()
+WHERE @contact_seed_needed = 1;
+
+SET @contact_parent_id := COALESCE(
+  (SELECT parent_id FROM sys_menu WHERE perms = 'app:resource:list' LIMIT 1),
+  (SELECT parent_id FROM sys_menu WHERE perms = 'app:article:list' LIMIT 1),
+  0
+);
+
+SET @contact_order_num := COALESCE(
+  (SELECT MAX(order_num) + 1 FROM sys_menu WHERE parent_id = @contact_parent_id),
+  1
+);
+
+INSERT INTO sys_menu
+  (menu_name, parent_id, order_num, path, component, query, is_frame, is_cache,
+   menu_type, visible, status, perms, icon, create_by, create_time, update_by, update_time, remark)
+SELECT
+  '联系页面配置', @contact_parent_id, @contact_order_num,
+  'contact', 'app/contact/index', '', 1, 0,
+  'C', '0', '0', 'app:contact:query', 'phone', 'admin', NOW(), '', NULL,
+  '维护小程序关注页面资料和联系方式'
+WHERE NOT EXISTS (SELECT 1 FROM sys_menu WHERE perms = 'app:contact:query');
+
+SET @contact_menu_id := (
+  SELECT menu_id FROM sys_menu WHERE perms = 'app:contact:query' LIMIT 1
+);
+
+INSERT INTO sys_menu
+  (menu_name, parent_id, order_num, path, component, query, is_frame, is_cache,
+   menu_type, visible, status, perms, icon, create_by, create_time, update_by, update_time, remark)
+SELECT '联系页面修改', @contact_menu_id, 1, '', '', '', 1, 0,
+       'F', '0', '0', 'app:contact:edit', '#', 'admin', NOW(), '', NULL, ''
+WHERE @contact_menu_id IS NOT NULL
+  AND NOT EXISTS (SELECT 1 FROM sys_menu WHERE perms = 'app:contact:edit');