占位符方案

A 谢先森人气设计师

154人浏览 · 2026-06-11 10:49:52

A 谢先森人气设计师 · 2026-06-11 10:49:52 发布

完全可以实现。你截图中展示的文案段落，比如“618美发狂欢”、“夏日焕新美出新高度”、“01【剪发秒杀仅需6.18元】…”等，后台可以按段落选取，然后标记为占位符。没有被标记的段落前端直接不显示。

下面我根据你的截图场景，给出一个可直接落地的实现方案（含前端交互、数据结构、后端存储、前端渲染）。

一、核心需求回顾

后台有一篇生成好的AI海报文案（多段落）。
运营人员可以选择任意段落，为该段落设置一个“占位符标识”（比如 title、subTitle、promo1）。
设置过占位符的段落 → 前端可见，并且允许用户修改。
未设置占位符的段落 → 前端完全不显示（就像被隐藏了）。
前端修改文案后，可以把新内容提交给后台，用于生成最终海报图片。

二、后台实现方案（以你的截图界面为例）

1. 文案分段展示 + 可勾选

在后台编辑页，把AI生成的文案按自然段落拆分成多个块（可以按换行符自动拆分，也支持手动拆分）。

每个段落旁边提供一个复选框 + 占位符Key输入框：

[✓] 段落1: 618美发狂欢         占位符key: [main_title    ]
[✓] 段落2: CARNIVAL夏日焕新美出新高度  占位符key: [sub_title    ]
[ ] 段落3: 01【剪发秒杀仅需6.18元】每日限5名...   （未勾选，前端不显示）
[✓] 段落4: 02【疯狂R潮色焕新焕新低至6.8折】...  占位符key: [promo_color  ]
[ ] 段落5: 03【老带新礼...】        （未勾选）
[✓] 段落6: 活动最终解释权归门店所有    占位符key: [disclaimer   ]

勾选 = 作为占位符暴露给前端。
填入的 key 是唯一标识（英文+下划线），前端用这个key来提交修改值。
不勾选的段落 → 在保存模板时，后台直接丢弃（不存入模板配置中）。

你截图里的“设置成占位符”按钮，可以这样用：先选中一段文字，点击按钮，自动为该段落生成一个key（或弹窗输入key）。

2. 保存的数据结构（JSON）

{
  "templateId": "poster_001",
  "segments": [
    {
      "placeholderKey": "main_title",
      "originalText": "618美发狂欢",
      "style": { "fontSize": 48, "bold": true, "color": "#FF3366" }
    },
    {
      "placeholderKey": "sub_title",
      "originalText": "CARNIVAL夏日焕新美出新高度",
      "style": { "fontSize": 28, "color": "#333333" }
    },
    {
      "placeholderKey": "promo_color",
      "originalText": "02【疯狂R潮色焕新焕新低至6.8折】PERMING&DIYINGCARNIVAL03",
      "style": { "fontSize": 20 }
    },
    {
      "placeholderKey": "disclaimer",
      "originalText": "活动最终解释权归门店所有",
      "style": { "fontSize": 12, "color": "#999999" }
    }
  ]
}

没有占位符key的段落根本不存入这个数组 → 前端永远拿不到 → 实现“不显示”。
originalText 作为默认展示文案，前端首次渲染就用它。
还可以保存每个段落的坐标(x,y)和样式，方便canvas直接绘制。

3. 接口设计

GET /api/template/:id
返回上述 segments 数组（只包含有 placeholderKey 的段落）。

POST /api/template/:id/content
前端提交修改后的文案：

{
  "main_title": "618狂欢节",
  "sub_title": "夏日限定 焕新特惠",
  "promo_color": "潮色焕新6折起",
  "disclaimer": "最终解释权归本店"
}

后台根据这些新文案重新生成海报图片（或更新模板的默认文案）。

三、前端实现（用户端展示与修改）

1. 拉取并渲染可编辑区域

前端拿到 segments 数组后，只渲染有 placeholderKey 的段落。每个段落渲染为一个可编辑组件（输入框/富文本）。

示例（Vue 3）：

<template>
  <div class="poster-editor">
    <div v-for="seg in segments" :key="seg.placeholderKey" class="editable-line">
      <label>{{ seg.placeholderKey }}</label>
      <input 
        v-model="userInputs[seg.placeholderKey]" 
        :placeholder="seg.originalText"
      />
    </div>
    <button @click="updatePoster">更新海报</button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const segments = ref([])
const userInputs = ref({})

onMounted(async () => {
  const res = await fetch('/api/template/123')
  const data = await res.json()
  segments.value = data.segments
  
  // 用原始文案初始化用户输入
  segments.value.forEach(seg => {
    userInputs.value[seg.placeholderKey] = seg.originalText
  })
})

const updatePoster = async () => {
  await fetch('/api/template/123/content', {
    method: 'POST',
    body: JSON.stringify(userInputs.value)
  })
  alert('海报已更新')
}
</script>

2. 最终海报生成（两种方案）

方案A：后端生成图片
前端提交修改文案后，后端根据模板配置（坐标、样式）和用户新文案，用Canvas或图像库生成新海报图片，返回图片URL给前端展示。
优点：对前端性能无要求，保证不同设备显示一致。
方案B：前端Canvas绘制
后端下发每个段落的坐标、字体样式，前端直接在Canvas上绘制用户修改后的文案。
优点：实时预览，无需反复请求后端。

如果你的用户端主要是修改文案后“保存并下载海报”，推荐后端生成，更可控。