游乐游手机版
首页/AI教程/文章详情

PHP转型AI与Golang实战:附件管理及文件后缀生成SVG图标接口

时间:2026-08-14 21:18
这是一个持续更新的 Blog 系列。作者将以 PHP 全栈工程师的视角,借助 AI 工具(claude code、codex、deepseek、豆包等),从零系统学习 Golang 语言,并最终完成 ai-go-admin 开源项目的开发与落地,整个过程都会进行完整记录与实战分享。在上一期中,我们完
这是一个持续更新的 Blog 系列。作者将以 PHP 全栈工程师的视角,借助 AI 工具(claude code、codex、deepseek、豆包等),从零系统学习 Golang 语言,并最终完成 ai-go-admin 开源项目的开发与落地,整个过程都会进行完整记录与实战分享。

在上一期中,我们完成了“新增 area 接口与区域选择组件”;而本期将继续推进两个核心功能:附件管理,以及“根据文件后缀动态生成 SVG 文件图标”的接口。

# 增加根据文件后缀生成 SVG 文件图标的接口

这同样属于一个实用型工具接口。它的作用是:传入文件后缀名,例如 `zip`,接口即可直接输出一张对应的 `svg` 图片,效果如下:

![1.png](https://developer.qcloudimg.com/http-sa ve/yehe-7863164/1693d9c4e8bf7633e956cfde43b6c90f.png)

这个接口的实际价值,主要体现在后续要开发的 `附件管理` 功能中。对于 `图片` 以外的文件类型,它可以作为文件预览图标来使用,从而提升后台文件管理的可视化体验。

这里依然让 AI 参考了 BuildAdmin 中对应的实现方案,直接完成 GO 版本开发:参考 `@../ba238/app/api/controller/Ajax.php` 的 `buildSuffixSvg` 方法及其内部逻辑,在 `@internalhandlercommonutil.go` 中实现一个可直接返回 `svg` 内容的方法,并注册为 `/common/file-svg` 路由。

AI 完成后,人工 `review` 时发现,在 GO 中直接输出 SVG 实际上非常简单(这部分我以前也没有实际写过):

```go

c.Header("Content-Type", "image/svg xml; charset=utf-8")

c.Header("Cache-Control", "public, max-age=604800")

c.String(http.StatusOK, buildSuffixSvg(suffix, background))

```

如上所示,只需要设置两个 `Header`,其中一个用于控制缓存,然后直接通过 `c.String` 输出即可。`buildSuffixSvg` 本身返回的就是 `SVG` 的 `string` 内容,核心代码如下:

```go

r, g, b := hsvToRGB(float64(hue)/360.0, 0.3, 0.9)

if background == "" {

background = fmt.Sprintf("rgb(%d,%d,%d)", r, g, b)

}

return fmt.Sprintf(`

%s

`, background, suffix)

```

此外,代码中还额外调用了 hsvToRGB 函数。它的核心职责,是将 HSV 颜色空间稳定映射为固定的 RGB 整数值,根本目的在于保证图标颜色的一致性:当传入相同文件后缀时,生成的 SVG 背景色必须始终保持一致。比如 ZIP 文件的背景色被定义为紫色,那么无论何时调用接口,都应该稳定输出这一特定紫色,而不是随机生成。否则,当页面中同时展示多个 SVG 文件图标时,如果颜色不断变化,整体视觉会显得混乱,严重影响后台界面的统一性与观感。

# 附件管理

用户上传的文件本质上就是附件。此前我们已经实现了 `上传接口`,并且具备了:`向附件表写入上传记录的功能`。因此,本次的重点只是补齐对应数据表的后台管理能力。提示词如下:

要实现后台附件管理的 CRUD 功能,可以参考 @../ba238/web/src/views/backend/routine/attachment/index.vue 中的实现思路。具体还可借鉴本项目现有的服务端代码 @internal/handler/admin/auth/admin.go,以及前端页面 @web/src/views/admin/auth/admin/index.vue。另外,附件管理相关的数据迁移脚本位于 @cmd/migrate/migrations/000002_common.up.sql,模型定义则存放在 @internal/model/common.go

不过,这次生成出来的 `CRUD` 结果并不算理想,主要存在以下几个问题:

1. 前端缺少英文语言包

2. `created_at` 字段的翻译也没有复用 `common.createdAt`,而是在语言包中额外重复定义了一次

3. 它还把文件位置放错了:路由、服务、控制器等内容,全部放到了 `common`,实际上应该归属到 `admin`,因为我们做的是后台管理功能;不过附件仓储放在 `common` 是合理的,毕竟上传接口同样需要复用

针对以上问题,让 AI 逐项修正。人工 `review` 完成后,下一步还需要继续完善一个关键细节:当后台删除某条附件记录时,要同步删除对应的实际文件,因此需要让 AI 覆写服务层 Delete 方法:

覆写 `internalserviceadminroutineattachment.go` 的 `Delete` 方法,删除附件记录时,同时根据 `driver` 字段实例化对应的存储驱动,并使用驱动删除实际文件:

1. 附件模型位于 `internalmodelcommon.go` 的 `Attachment`

2. 附件相关的全部驱动位于 `internalinfrauploaddriver` 文件夹,如果不清楚驱动如何调用,也可以参考 `internalinfrauploadupload.go`

全部完成后,经过人工 `review` 与测试验证,功能顺利通过:最终我们得到了如下所示的附件管理功能页面:

![2.png](https://developer.qcloudimg.com/http-sa ve/yehe-7863164/dc2a3e2828e6bea41b167d2b0045198f.png)

![3.png](https://developer.qcloudimg.com/http-sa ve/yehe-7863164/a042c1e5a2a19a7330cca073429df29d.png)","createTime":1786096799,"ext":{"closeTextLink":0,"comment_ban":0,"description":"","focusRead":0},"fa vNum":0,"html":"","isOriginal":0,"likeNum":0,
来源:https://cloud.tencent.com.cn/developer/article/2722637
上一篇AI数字员工时代ITSM平台选型的10大核心考察点 下一篇从0到1搭建私域直播平台需准备哪些核心功能
本站内容用于信息整理与展示,如有侵权或内容问题请及时联系处理。

相关推荐

补充同频道和同主题内容,方便继续浏览更多相关内容。

同类最新

继续查看同栏目最近更新的文章。

更多
CAD零基础入门教程:坐标输入、图层管理与基础绘图命令
AI教程 · 2026-09-01

CAD零基础入门教程:坐标输入、图层管理与基础绘图命令

本文面向CAD零基础学习者,系统讲解坐标输入、图层管理与基础绘图命令的核心用法。通过分步实操与常见问题排查,帮助新手建立精确绘图习惯,掌握规范出图的基础能力。

CAD从入门到项目交付:绘图、标注、图块与实战工作流
AI教程 · 2026-09-01

CAD从入门到项目交付:绘图、标注、图块与实战工作流

掌握CAD的核心在于建立“画得准、标得清、复用快、交付稳”的工作流。本文提供从环境设置、高频命令组合、标注规范、图块标准化到项目分阶段交付的完整路径,帮助初学者避免常见返工陷阱,独立完成可检查、可复用、可打印的工程图纸。

Claude Code 登录指南:个人、Teams 与企业账号区分与授权步骤
AI教程 · 2026-09-01

Claude Code 登录指南:个人、Teams 与企业账号区分与授权步骤

本文详细解析 Claude Code 登录前的账号类型区分方法,涵盖个人订阅、Teams 席位与企业 Enterprise 席位的授权路径差异。提供终端登录命令、环境变量排查及常见异常处理步骤,帮助用户快速完成正确授权并避免登录路径混淆。

Claude Code 文件修改前的权限模式配置与命令审批指南
AI教程 · 2026-09-01

Claude Code 文件修改前的权限模式配置与命令审批指南

本文详细介绍Claude Code在修改文件前的权限模式配置方法,包括defaultMode可选值、permissions allow与deny规则设置、多层级配置文件管理以及 status验证技巧,帮助开发者安全高效地使用AI编程助手。

Claude Code接入VS Code后先测扩展和终端命令
AI教程 · 2026-09-01

Claude Code接入VS Code后先测扩展和终端命令

在VS Code中接入Claude Code后,建议优先验证扩展面板与集成终端两条入口。本文提供标准检查顺序、关键命令与常见故障排查路径,帮助你快速确认环境就绪,避免后续开发受阻。