今天搭了一个门店资源中心，把会议记录和营销素材都搬上去了。之前这些东西散落在各处——会议记录没地方存，营销素材堆在飞书文档里翻半天找不到。现在总算有个统一的地方了。

怎么选的技术

我看了一圈，最后定下来这套门店资源管理方案：

  • 飞书多维表格存营销素材。能筛选、能协作，比文档好管理
  • JSON + JavaScript做前端。纯静态文件，不用搞数据库，Nginx 一挂就能跑
  • Python调飞书 API。主要是下载图片用
  • HTML/CSS写页面。响应式，手机上也能看

说白了就是：飞书管数据，JSON 做中间层，前端动态加载。

架构长这样

1
2
3
4
5
飞书多维表格（团队在这添加素材）
      ↓ 导出
marketing.json / meetings.json（中间数据层）
      ↓ JS 加载
Store 首页（用户看到的页面）

这个设计有个好处：团队在飞书中改东西，JSON 文件一更新，页面就跟着变。不用每次都改代码。

💡 相关阅读：飞书定时推送工作流完整指南 - 了解如何使用飞书 API 实现自动化推送

会议记录怎么做的

数据结构很简单：

1
2
3
4
5
6
7
{
  "date": "2026-04-19",
  "title": "门店周例会 — 2026年4月19日",
  "desc": "开票清零 · 老库存清库 · 业绩起量",
  "file": "weekly-meeting-2026-04-19.html",
  "tags": ["开票", "库存", "业绩"]
}

前端用 fetch() 加载这个 JSON，然后渲染成列表。加了分页功能，每页 10 条，不然会议多了会很长。

1
2
3
4
5
async function loadMeetings() {
  const response = await fetch('meetings.json');
  const meetings = await response.json();
  renderMeetings(meetings);
}

这块没什么技术难点，就是个JSON 动态加载。

💡 相关阅读：OpenClaw 零成本入门指南 - 学习如何快速搭建自动化系统

营销素材是重点

飞书多维表格中营销素材的数据结构稍微复杂点：

1
2
3
4
5
6
7
8
9
{
  "title": "MacBook Air M4 教育优惠促销",
  "product": "MacBook Air",
  "copy": "朋友圈文案内容...",
  "price": "256G: ¥5269 | 512G: ¥5864",
  "tags": ["教育优惠", "国补叠加"],
  "status": "启用中",
  "image": "images/marketing-macbook-air.webp"
}

展示方式我选了看板布局（CSS Grid），一行能排几个排几个，手机上自动变成单列。每个卡片显示产品、标题、价格、标签，右上角有个小圆点——绿色是”启用中”，红色是”已停用”，带脉冲动画。

点击卡片会弹出一个详情窗口，里面是完整的朋友圈文案、价格信息、营销图片。文案旁边有个复制按钮，点一下就复制到剪贴板。图片旁边有个保存按钮，点一下就下载。

图片的问题

飞书的图片链接不能直接用 <img> 标签引用，因为要 API 认证。我的做法是用 Python 把图片下载到本地，存到 images/ 目录，前端引用本地路径。

1
2
3
4
5
6
def download_image(file_token, save_path, token):
    url = f"https://open.feishu.cn/open-apis/drive/v1/medias/{file_token}/download"
    headers = {"Authorization": f"Bearer {token}"}
    response = requests.get(url, headers=headers)
    with open(save_path, 'wb') as f:
        f.write(response.content)

这样图片就能正常显示了。

📖 官方文档：飞书开放平台 - 文件下载 - 了解更多飞书文件下载 API

自动化做了哪些

会议 HTML 自动生成

我配了个 skill，只要给会议大纲，它就自动生成 HTML 文件、部署到 store 目录，更新 meetings.json。整个过程不用手动干预。

用的时候这样说：

1
2
3
4
生成周例会 HTML，今天 2026-04-26，议题：
1. 开票事项
2. 老库存清库
3. 业绩分析

然后它就全干完了。

营销素材同步

营销素材的同步目前还是手动的：从飞书多维表格导出数据，更新 JSON 文件。以后可以写个脚本定时自动同步，但暂时还没那个需求。

💡 相关阅读：OpenClaw 高级技能指南 - 深入了解如何创建自定义 skill

访问控制

Store 首页设了密码保护（Nginx Basic Auth），但会议 HTML 和营销素材是公开的。这样设计是因为会议内容可能要分享给其他人，直接发链接就行，不用每次都输密码。

踩过的坑

飞书图片下载：一开始以为能用图片链接直接引用，结果发现要认证。后来改成下载到本地，问题解决。

跨域问题：用 fetch() 加载 JSON 可能会遇到跨域问题，好在是同域，用相对路径就没问题了。

数据更新：营销素材更新后要同步到 store，目前是手动更新 JSON 文件。以后有空写个脚本自动同步。

后续想做的

  1. 自动同步脚本：定时从飞书多维表格拉数据
  2. 搜索功能：素材多了不好找，加个搜索框
  3. 使用统计：记录哪些素材被复制得最多，知道哪个效果好
  4. 移动端优化：虽然现在能用，但体验还能更好
  5. 权限管理：根据角色显示不同内容

算是个总结

这次搭建的核心就是”飞书管理 + JSON 中间层 + 前端动态加载“。团队在飞书改内容，JSON 文件同步一下，页面就更新了。简单、轻量、好维护。

功能上实现了：

  • 会议记录：浏览、分页
  • 营销素材：看板展示、详情弹窗、复制文案、保存图片
  • 状态标识：绿点=启用中，红点=已停用

从需求到上线，一天搞定。主要归功于技术选型清晰、模块化设计、还有 AI 帮忙生成 HTML 和写脚本。

如果你也想搭类似的门店资源中心，这个架构可以参考。有问题随时交流。

💡 延伸阅读：