当前位置: 首页 > news >正文

TeaType 奶茶性格占卜机开发记录:一场俏皮的 UniApp 单页奇遇

我正在参加CodeBuddy「首席试玩官」内容创作大赛,本文所使用的 CodeBuddy 免费下载链接:腾讯云代码助手 CodeBuddy - AI 时代的智能编程伙伴

最近我突发奇想,想用 UniApp 做一个轻松又俏皮的小工具,叫做「TeaType 奶茶性格占卜机」。这个小应用的核心功能很简单:用户选择奶茶偏好(甜度、温度、加料),我就根据他们的选择生成一段带性格分析和奶茶推荐的图卡。灵感来自朋友圈那些「你是什么味道的奶茶」,但我希望它能更像一个可交互的“占卜机”,并且整体视觉风格偏向可爱、拟物、略带二次元感。

我一边录着屏,一边把这个想法丢给了 CodeBuddy,没想到它二话不说就开工了,而且是那种“我已经知道你想干嘛了”的状态,反应极其迅速。下面就来聊聊这个过程,顺便夸夸 CodeBuddy 编写代码时的细节处理,真的非常值得记录。


项目初始化与设计确认

我告诉 CodeBuddy 这将是一个单页应用,UI 要有粉橘色到奶白色的渐变背景,顶部一个茶杯+爱心的 logo,再配合焦糖棕字体风格的标题,整个页面要有卡片式的步骤选择,最后生成一张结果图卡并支持一键保存。整体风格就是“奶茶店点单 + 命运占卜”的感觉。

CodeBuddy 没有追问我是否准备好了素材、结构、目录,而是直接主动去查看了我的项目结构,然后给出一句非常职业的话:“我看到这是一个基础的 UniApp 项目结构,我们需要完全重构 index.vue。”

在这里插入图片描述


静态资源的自动生成

在我还没来得及准备素材时,CodeBuddy 已经自动生成了三个 SVG 文件:

  • 背景用的圆点图案 dot-pattern.svg
  • 茶杯+爱心的 Logo 图 tea-logo.svg
  • 奶茶图标 bubble-tea.svg 与变种 pudding-tea.svg

这些图标用来装饰首页和结果图卡,统一使用 SVG 格式,加载快又清晰,关键是还省去了我去找素材的时间。它甚至用心地画出了“奶茶杯壁的边缘光影”,这个细节我在需求里根本没说,但它自己就推断出来了。


页面结构重构:从零搭起

重构从 index.vue 文件开始,CodeBuddy 将整个页面分为几个部分:

  1. 渐变背景与圆点图案叠加,加入柔和投影模拟玻璃杯质感;
  2. 顶部区域显示 Logo + 标题,使用焦糖棕色 + 手写字体;
  3. 中部是交互卡片区域,使用 step 步进方式切换选择甜度、温度和加料;
  4. 底部点击生成结果,弹出仿菜单风格的图卡浮层。

这几部分之间过渡使用了渐隐、缩放、微旋动效,还有泡泡 SVG 上浮的动效(太可爱了)。我每点击一次选项,页面就流畅切换到下一步,完全没有割裂感。CodeBuddy 写这些动画的时候还特地用了一点 spring 的缓动效果,完全是现代 Web 的手感。


结果页生成 + 图卡保存

当三步选择完成后,CodeBuddy 让我点击“生成结果”。这时屏幕上出现了一张图卡,背景是漂浮的奶茶 emoji,前景是一段性格分析 + 推荐文案,比如:

你像一杯 全糖热波霸,是个热情不设防的社牛,适合一边爆笑一边喝奶茶!

然后我点击“一键保存”,它竟然已经帮我集成好了 html2canvas,并将整个卡片截图生成图片保存到了相册中。这一部分原本我以为要花很多精力调试,但 CodeBuddy 连 npm install 和引入逻辑都替我做好了,还考虑到了可能因中文字体丢失而导致图卡失真的问题,提前建议我使用内嵌字体文件。

在这里插入图片描述


中间出现的 Bug 和完美修复

开发过程中唯一一次出问题,是在定义温度选项数组时,CodeBuddy 不小心漏了一个冒号。这个错误导致页面加载失败,它很快发现后尝试了几种方式修复:

  1. 直接替换整个数组定义;
  2. 精确修改出错的那一行;
  3. 读取整段代码重新格式化后写回。

这种处理问题的方式让我印象非常深刻,不是一味瞎猜,而是精准查错、层层推进,最后采用重新写入的方式彻底修复了错误。相比我平时手动找 Bug 真的是高效太多了。


细节打磨与收尾

开发尾声,CodeBuddy 主动提示我是否要引入自定义字体,并预留了字体样式插入的位置;又检查了一遍所有静态资源是否可用;连动效加载时长、用户手指点击延迟等体验细节都考虑在内。

我惊讶的是,它并没有像普通代码生成工具那样只管功能,而是会以一种“设计+前端”合体视角来工作,简直就像一个审美在线、技术全面的前端搭档。


结语:这不是建议,而是主动完成

整个过程我没有写一行逻辑代码,几乎只是表达想法、调整小细节。CodeBuddy 真正让我感受到“AI 工程师”的能力,它不会只是被动地等待命令执行,而是能主动分析项目结构、预判需求、优雅写代码、自动修 Bug、贴心处理动效与视觉,还能兼顾用户体验的方方面面。

如果让我一句话总结 CodeBuddy 的代码风格,那就是:

功能完善、结构清晰、视觉美观、交互流畅,而且 全程自觉主动

以后我可能会考虑让它帮我做一个全套的主题生成器,或者更多趣味单页工具。TeaType 是个很小的项目,但从这个体验来看,CodeBuddy 足以完成更大的舞台。


如果你也在做有趣的前端项目,不妨试试看让 CodeBuddy 帮你“主动实现”,你会发现自己多了一个不仅懂代码、还懂审美、还能查错修复的“最强搭档”。

在这里插入图片描述

相关文章:

TeaType 奶茶性格占卜机开发记录:一场俏皮的 UniApp 单页奇遇

我正在参加CodeBuddy「首席试玩官」内容创作大赛,本文所使用的 CodeBuddy 免费下载链接:腾讯云代码助手 CodeBuddy - AI 时代的智能编程伙伴 最近我突发奇想,想用 UniApp 做一个轻松又俏皮的小工具,叫做「TeaType 奶茶性格占卜机」…...

AI神经网络降噪 vs 传统单/双麦克风降噪的核心优势对比

1. 降噪原理的本质差异 对比维度传统单/双麦克风降噪AI神经网络降噪技术基础基于固定规则的信号处理(如谱减法、维纳滤波)基于深度学习的动态建模(DNN/CNN/Transformer)噪声样本依赖预设有限噪声类型训练数据覆盖数十万种真实环境…...

【Nginx学习笔记】:Fastapi服务部署单机Nginx配置说明

服务部署单机Nginx配置说明 服务.conf配置文件: upstream asr_backend {server 127.0.0.1:8010; }server {listen 80;server_name your_domain.com;location / {proxy_pass http://localhost:8000;proxy_set_header Host $host;proxy_set_header X-Real-IP $remot…...

JAVA Web 期末速成

一、专业术语及名词 1. Web 的特点 定义:web 是分布在全世界,基于 HTTP 通信协议,存储在 Web 服务器中的所有相互链接的超文本集 Web 是一种分布式超媒体系统Web 是多媒体化 和 易于导航的Web 与平台无关Web 是动态、交互的 2. TCP/IP 结…...

iOS:重新定义移动交互,引领智能生活新潮流

在当今智能手机与移动设备充斥的时代,操作系统作为其 “灵魂”,掌控着用户体验的方方面面。iOS 系统,这一由苹果公司精心雕琢的杰作,自诞生起便以独特魅力与卓越性能,在移动操作系统领域独树一帜,深刻影响着…...

LabVIEW数据库使用说明

介绍LabVIEW如何在数据库中插入记录以及执行 SQL 查询,适用于对数据库进行数据管理和操作的场景。借助 Database Connectivity Toolkit,可便捷地与指定数据库交互。 各 VI 功能详述 左侧 VI 功能概述:实现向数据库表中插入数据的操作。当输入…...

Linux多进程 写时拷贝 物理地址和逻辑地址

如果不采用写时拷贝技术 直接fork子进程 会发生什么? 如上图所示 橙色为父进程所占内存空间 绿色为子进程所占内存空间。 如果子进程只是需要做出一点点和父进程不一样的 其余和父进程均为相同 第一 就会出现复制开销比较大;第二占用内存空间 所以 …...

在 CentOS 7.9 上部署 node_exporter 并接入 Prometheus + Grafana 实现主机监控

文章目录 在 CentOS 7.9 上部署 node_exporter 并接入 Prometheus Grafana 实现主机监控环境说明node_exporter 安装与配置下载并解压 node_exporter创建 Systemd 启动服务验证服务状态验证端口监听 Prometheus 配置 node_exporter 监控项修改 prometheus.yml重新加载 Prometh…...

Java 反射(Reflection)技术

反射是 Java 提供的一种强大机制,允许程序在运行时(Runtime)动态地获取类的信息、操作类的属性和方法。这种能力使得 Java 程序可以突破编译时的限制,实现更灵活的设计。 一、反射的核心概念 1. 什么是反射 反射是指在程序运行…...

【SpringBoot】从零开始全面解析SpringMVC (三)

本篇博客给大家带来的是SpringBoot的知识点, 本篇是SpringBoot入门, 介绍SpringMVC相关知识. 🐎文章专栏: JavaEE进阶 🚀若有问题 评论区见 ❤ 欢迎大家点赞 评论 收藏 分享 如果你不知道分享给谁,那就分享给薯条. 你们的支持是我不断创作的动力 . 王子,…...

DeerFlow安装配置及使用案例

DeerFlow安装配置及使用案例 简介 ​ DeerFlow项目由字节跳动技术团队发起和主导开发,作为一个开源深度研究框架,于2025年年初正式开源。该项目基于LangStack生态,构建于LangChain与LangGraph的开源技术栈之上,充分利用语言模型…...

吉林省建筑工程专业技术人员职称评审实施办法

吉林省人力资源和社会保障厅 吉林省建筑工程专业技术人员职称评审实施办法 吉林省建筑工程技术人才之技术员评审条件 吉林省建筑工程技术人才之助理工程师评审条件 吉林省建筑工程技术人才之工程师评审条件 吉林省建筑工程技术人才之高级工程师评审条件 吉林省建筑工程技术人才…...

React组件开发流程-03.1

此章先以一个完整的例子来全面了解下React组件开发的流程,主要是以代码为主,在不同的章节中会把重点标出来,要完成的例子如下,也可从官网中找到。 React组件开发流程 这只是一个通用流程,在熟悉后不需要完全遵从。 …...

Vue 中 v-model 的三种使用方式对比与实践

在 Vue 3 中,v-model 是组件双向数据绑定的核心特性。随着 Vue 的版本演进,v-model 的使用方式也在不断优化。本文将基于您提供的代码示例,详细分析三种不同的 v-model 实现方式:基础用法、useVModel Hook(vueuse/core…...

Adminer:一个基于Web的轻量级数据库管理工具

Adminer 是一个由单个 PHP 文件实现的免费数据库管理工具,支持 MySQL、MariaDB、PostgreSQL、CockroachDB、SQLite、SQL Server、Oracle、Elasticsearch、SimpleDB、MongoDB、Firebird、Clickhouse 等数据库。 Adminer 支持的主要功能如下: 连接数据库服…...

Linux笔记---内核态与用户态

用户态(User Mode) 权限级别:较低,限制应用程序直接访问硬件或关键系统资源。 适用场景:普通应用程序的运行环境。 限制:无法执行特权指令(如操作I/O端口、修改内存管理单元配置等&#xff09…...

MFC 编程中 OnInitDialog 函数

核心作用 对话框初始化入口 :创建完成后第一个执行的函数。是对话框的起点。控件操作安全期 :此时所有控件已创建完成。可以安全地进行控件的初始化、属性设置等操作。界面布局最佳时机 :窗口显示前完成初始化设置。可以进行布局调整、数据初…...

Java高频面试之并发编程-18

hello啊,各位观众姥爷们!!!本baby今天又来报道了!哈哈哈哈哈嗝🐶 面试官:详细说说synchronized synchronized 是 Java 中实现线程同步的核心关键字,用于解决多线程环境下的资源竞争…...

深入探究AKS Workload Identity

Azure Kubernetes 服务 (AKS) 提供了一项名为 Workload Identity 的强大功能,它可以增强安全性并简化在 Kubernetes 集群中运行的应用程序的身份验证。以下是 Workload Identity 在 AKS 环境中的工作原理概述: AKS 中的 Workload Identity 允许 Pod 无需…...

【MySQL基础】MySQL基础:MySQL基本操作与架构

MySQL学习: https://blog.csdn.net/2301_80220607/category_12971838.html?spm1001.2014.3001.5482 前言: 这里是MySQL学习的第一篇,本篇主要是讲解一些MySQL的基础操作,但这并不是重点,本篇我们主要是要理解MySQL…...

【线下沙龙】NineData x Apache Doris x 阿里云联合举办数据库技术Meetup,5月24日深圳见!

5月24日下午,NineData 将联合 Apache Doris、阿里云一起,在深圳举办数据库技术Meetup。本次技术沙龙聚焦「数据实时分析」与「数据同步迁移」 两大核心领域,针对企业数据战略中的痛点,特邀行业资深技术大咖,结合多年技…...

【Unity网络编程知识】Unity的 UnityWebRequest相关类学习

1、UnityWebRequest类介绍 UnityWebRequest是一个unity提供的一个模块化的系统类,用于构成HTTP请求和处理HTTP响应,它主要目标是让unity游戏和Web服务端进行交互,它将之前WWW的相关功能都集成在了其中,所以新版本中都建议使用unit…...

STM32实战指南——DHT11温湿度传感器驱动开发与避坑指南

知识点1【DHT11的概述】 1、概述 DHT是一款温湿度一体化的数字传感器(无需AD转换)。 2、驱动方式 通过单片机等微处理器简单的电路连接就能实时采集本地湿度和温度。DHT11与单片机之间采用单总线进行通信,仅需要一个IO口。 相对于单片机…...

SVG 与 Canvas 技术调研对比

在 画布 中进行 大量矩形框绘制 时,SVG 和 Canvas 都是可行的技术方案,但它们适用于不同的场景,技术特性也有明显区别。下面我从性能、灵活性、可维护性、适用场景等方面做一个系统性的对比,帮助你做出更合适的选择。 &#x1f9e…...

Ubuntu 远程桌面配置指南

概述: 本文主要介绍在Ubuntu 22.04中通过VNC实现远程连接的方法。首先需安装图形化界面和VNC工具x11vnc,设置开机启动服务;然后在Windows客户端用VNC Viewer通过局域网IP和端口5900连接。 总结: 一、VNC配置与安装 安装图形化界面 在Ubuntu 22.04中需先安装: sudo apt …...

146. LRU 缓存

一、题目 二、思路 题目要求 O(1) 的平均时间复杂度运行 -> 使用Map空间换时间 Map<Integer, Node>Map 通过 key 直接找到对应节点 getNode(key) -> Node记得只要查过该节点之后就应该把该节点放到最前面 pushFront(Node)put 元素后&#xff0c;在map中添加&…...

微信学习之导航功能

先看这个功能的效果&#xff1a; 然后开始学习吧。 一、我们这里用的是vant的Grid控件&#xff0c;首先我们导入&#xff1a; { "usingComponents": {"van-search": "vant/weapp/search/index","my-swiper":"../../components…...

MySQL替换瀚高数据库报错: TO_DAYS()不存在(APP)

文章目录 环境症状问题原因解决方案报错编码 环境 系统平台&#xff1a;中标麒麟&#xff08;海光&#xff09;7,中标麒麟&#xff08;飞腾&#xff09;7 版本&#xff1a;4.5 症状 MySQL替换为瀚高数据库进行应用系统适配报错&#xff1a;TO_DAYS&#xff08;&#xff09;不…...

FPGA:高速接口JESD204B以及FPGA实现

本文将先介绍JESD204B高速接口的基本概念和特性&#xff0c;然后详细说明如何基于Xilinx Kintex-7系列FPGA实现JESD204B高速接口。 一、JESD204B高速接口介绍 JESD204B是由JEDEC&#xff08;固态技术协会&#xff09;制定的一种高速串行通信标准&#xff0c;主要用于数据转换器…...

HarmonyOS Navigation组件深度解析与应用实践

HarmonyOS Navigation组件深度解析与应用实践 一、组件架构与核心能力 HarmonyOS Navigation组件作为路由导航的根视图容器&#xff0c;采用三层架构设计&#xff1a; 标题层&#xff1a;支持主副标题配置&#xff0c;提供Mini/Free/Full三种显示模式内容层&#xff1a;默认…...

C#中的ThreadStart委托

ThreadStart 委托&#xff1a; ThreadStart 是 .NET 中的一个内置委托类型&#xff0c;表示无参数且无返回值的方法。其定义如下&#xff1a; public delegate void ThreadStart(); 通常用于定义线程的入口方法。 List<ThreadStart>&#xff1a; 这是一个泛型集合&…...

Spring boot 集成 Knife4j

knife4j官网&#xff1a;https://doc.xiaominfo.com/docs/quick-start 1. 引入Knife4j相关依赖 <!-- knife4j--> <dependency><groupId>com.github.xiaoymin</groupId><artifactId>knife4j-spring-boot-starter</artifactId><version…...

基于Java在高德地图面查询检索中使用WGS84坐标的一种方法-以某商场的POI数据检索为例

前言 随着移动互联网的飞速发展&#xff0c;基于位置的服务&#xff08;LBS&#xff09;需求日益增长&#xff0c;越来越多的应用需要从地图中检索特定区域内的地理信息&#xff0c;例如商业场所、公共服务设施等。商场作为城市商业活动的重要载体&#xff0c;其周边的地理信息…...

6K型护套连接器DLJ0601(2000)-00

6K型护套连接器DLJ0601(2000)-00简介 6K型护套连接器DLJ0601(2000)-00是一种用于电气连接的组件&#xff0c;广泛应用于工业设备、通信系统和电子设备中。该连接器设计紧凑&#xff0c;具有高可靠性和耐用性&#xff0c;适用于多种环境条件下的电气连接需求。 主要特点 高可…...

Hexo的Next主题的Config文件内方便修改的参数(Chat-Gpt)

这是对 Hexo 的 Next 主题 _config.yml 文件各部分配置项的中文解释&#xff0c;帮助你更方便地进行定制&#xff1a; &#x1f680; 核心设置 cache / minify cache.enable: 启用缓存&#xff0c;加快生成速度。minify: 是否压缩生成的 HTML/CSS/JS。 custom_file_path 自…...

【three】给立方体的每个面加载不同贴图

效果图&#xff1a; 主要代码&#xff1a; initCube() {let _this thisconst geometry new Three.BoxGeometry(1, .3, .5)let TextureLoader new Three.TextureLoader()let mater1TextureLoader.load(require(/assets/images/bg2.jpg),function (texture){console.log(tex…...

vscode怎么关闭自动定位文件

关闭自动定位文件功能 方式1 在设置中搜索: explorer.autoReveal 方式2 直接在settings.json中增加"explorer.autoReveal": false 添加类似jetbrains IDE的文件定位功能 可以直接安装插件市场搜索niushuaibing.vs-location, 安装后会有文件定位按钮, 点击后即可…...

2025-5-19Vue3快速上手

1、toRefs和toRef 当解构一个响应式对象&#xff08;如 reactive 创建的对象&#xff09;时&#xff0c;直接解构会失去响应性&#xff0c;此时可用 toRefs或toRef 保持响应性 toRef 的核心作用是将对象的属性转换为 ref&#xff0c;保持与原属性的双向绑定&#xff0c;无论原…...

HDMI 屏幕 电脑HDMI HDMI采集卡的关系

一、HDMI接口方向性原理 普通设备的HDMI接口方向&#xff1a; 电脑的HDMI接口&#xff1a;无论是显卡还是主板上的HDMI&#xff0c;均为输出端&#xff08;信号源&#xff09;&#xff0c;只能向外发送视频信号&#xff0c;无法接收输入信号。 显示器的HDMI接口&#xff1a;均…...

JESD204 ip核使用与例程分析(二)

JESD204 ip核使用与例程分析(二) JESD204时钟方案专用差分时钟对例程分析jesd204_0_transport_layer_demapperjesd204_0_sig_chkjesd204_0_clockingjesd204_0 ip核port寄存器AXI-LITE寄存器配置jesd204_phy ip核JESD204时钟方案 图3-1所示为最通用、灵活的时钟解决方案。在图…...

如何使用VCS+XA加密verilog和spice网表

如果要交付verilog&#xff0c;但是需要对方进行VCS仿真&#xff0c;那么可以用以下方法&#xff1a; 一、基于编译指令的局部加密​ ​适用场景​&#xff1a;需精确控制加密范围&#xff08;如仅加密核心算法或敏感逻辑&#xff09;。 ​实现步骤​&#xff1a; ​代码标注…...

Grafana之Dashboard(仪表盘)

在前面的小节中介绍了Grafana中4中常用的可视化面板的使用&#xff0c;通过在面板中使用PromQL表达式&#xff0c;Grafana能够方便的将Prometheus返回的数据进行可视化展示。例如&#xff0c;在展示主机CPU使用率时&#xff0c;我们使用了如下表达式&#xff1a; 1 - (avg(ira…...

AOSP 中常见的键值对存储方式全解析(适用于系统开发与应用开发)

在 Android 系统开发&#xff08;AOSP&#xff09;中&#xff0c;键值对&#xff08;Key-Value&#xff09;存储是一种基础且广泛使用的数据持久化方式。从系统属性、用户设置&#xff0c;到应用配置&#xff0c;都依赖于这种结构的存储方式。本文将全面梳理 AOSP 中主流的键值…...

集合进阶2

Java不可变集合、Stream流与方法引用深度解析 一、不可变集合&#xff08;Immutable Collections&#xff09;进阶指南 1.1 不可变集合核心特性 防御性编程&#xff1a;防止外部修改数据&#xff08;如传递集合给第三方库时&#xff09;线程安全&#xff1a;天然支持多线程读…...

eMMC深度解析:嵌入式多媒体卡的硬件电路设计要点

一、eMMC 技术深度解析 1.定义与背景 eMMC&#xff08;Embedded Multi Media Card&#xff09;是一种专为嵌入式系统设计的非易失性存储解决方案&#xff0c;它将 NAND 闪存、主控芯片和接口协议封装在一个 BGA&#xff08;Ball Grid Array&#xff09;封装中。其核心目标是简…...

【SPIN】PROMELA语言编程入门同步机制(SPIN学习系列--4)

同步机制 PROMELA 不包含信号量、锁或监控器等常见的同步原语&#xff0c;而是通过语句的**可执行性&#xff08;executability&#xff09;**概念来建模同步机制。计算机系统的架构限制了同步机制的设计&#xff1a;本章主要介绍适用于共享内存系统的同步机制&#xff0c;第7…...

整数的个数

【描述】 给定k&#xff08;1< k < 100&#xff09;个正整数&#xff0c;其中每个数都是大于等于1&#xff0c;小于等于10的数。写程序计算给定的k个正整数中&#xff0c;1&#xff0c;5和10出现的次数。 【输入】 输入有两行&#xff1a;第一行包含一个正整数k&#xff…...

AWS EKS IP 耗尽:原因、解决方案和最佳实践

想象一下&#xff0c;您的 AWS EKS 集群在生产环境中运行顺畅&#xff0c;所有 CI/CD 管道运行正常&#xff0c;服务优雅地扩展&#xff0c;一切都像自动驾驶模式一样。——直到有一天&#xff0c;新的 Pod 无法启动。 您深入研究 kubectl get pods 命令&#xff0c;发现一堆 P…...

艾默生流量计与Profibus DP主站转Modbus RTU/TCP网关通讯案例

艾默生流量计与Profibus DP主站转Modbus RTU/TCP网关通讯案例 在现代工业自动化控制系统中&#xff0c;艾默生流量计因其高精度、稳定性和易用性而备受青睐。然而&#xff0c;为了实现与不同协议设备之间的无缝通信&#xff0c;经常需要借助专业的通讯网关进行协议转换。本文将…...

Python测试单例模式

单例模式的核心思想 单例模式确保一个类只有一个实例&#xff0c;并提供一个全局访问点。这在需要控制资源访问&#xff08;如配置文件、数据库连接等&#xff09;时非常有用。 一个简单的示例&#xff1a; import threading import timeclass Singleton:instance Nonelock…...