收到字节的短信：Trae SOLO上线了？尝尝鲜，浅浅做个音乐播放器
前言
【字节跳动】亲爱的TRAE友，感谢您的耐心等待。TRAE中国版现已正式上线SOLO模式；请将TRAE中国版升级至最新版本，并使用您填写中国版官网waitlist所用的手机号登录，便可立即免费享受SOLO带来的开发体验！
当时还在想是谁哪个同学的恶作剧，点开一看真的是官方！
当时正好在听 周杰伦的 爱在西元前，这消息直接把我的摸鱼时间拐成了 “浅浅整活” 时间：不如用 Trae SOLO 搭个音乐播放器？毕竟主打的 “全流程打通”，正好能试试从架构到部署到底有多丝滑。
一、生成完整框架
我先写好了大致的音乐播放器框架，当然是非常简易的，就是简单的div了一堆，规划好了布局。
类似这样：
让SOLO帮我完善整个布局：
<
body>
<
div
class=
"music">
<
div
class=
"head">
<
div
class=
"back">
<
i
class=
"iconfont icon-zuojiantou">
</
i>
</
div>
<
div
class=
"title">
<
div
class=
"name">爱在西元前
</
div>
<
div
class=
"author">周杰伦
</
div>
</
div>
<
div
class=
"more">
<
i
class=
"iconfont icon-sandian">
</
i>
</
div>
</
div>
<
div
class=
"main">
<
div
class=
"logo">
<
img
src=
"https://img2.baidu.com/it/u=1469800619,2890014870&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
alt=
"">
</
div>
<
div
class=
"songs">
<
div
class=
"song-info">
<
div
class=
"song-name">爱在西元前
</
div>
<
div
class=
"song-author">周杰伦 - 范特西
</
div>
<
div
class=
"lyric">我给你的爱写在西元前
</
div>
</
div>
<
div
class=
"progress">
<
div
class=
"time current">1:17
</
div>
<
div
class=
"progress-bar">
<
div
class=
"progress-inner">
</
div>
<
div
class=
"progress-dot">
</
div>
</
div>
<
div
class=
"time total">3:54
</
div>
</
div>
</
div>
<
div
class=
"control">
<
div
class=
"prev">
<
i
class=
"iconfont icon-shangyishou">
</
i>
</
div>
<
div
class=
"play">
<
i
class=
"iconfont icon-bofang">
</
i>
</
div>
<
div
class=
"next">
<
i
class=
"iconfont icon-xiayishou">
</
i>
</
div>
</
div>
</
div>
<
div
class=
"foot">
<
div
class=
"foot-left">
<
div
class=
"foot-logo">
<
img
src=
"https://img2.baidu.com/it/u=1469800619,2890014870&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
alt=
"">
</
div>
<
div
class=
"foot-info">
<
div
class=
"foot-song-name">爱在西元前
</
div>
<
div
class=
"foot-song-author">周杰伦
</
div>
</
div>
</
div>
<
div
class=
"foot-right">
<
div
class=
"foot-heart">
<
i
class=
"iconfont icon-aixin_shixin">
</
i>
</
div>
<
div
class=
"foot-menu">
<
i
class=
"iconfont icon-caidan">
</
i>
</
div>
</
div>
</
div>
</
div>
</
body>
当然，图标是在 iconfont上面找的。10秒就给我生成了我想要的完整框架，而且自动帮我填充了所有代码，这...已经感受到强大了。
二、填充css文件
这个部分简直没动脑子，自己写了最上面的部分，然后中间的下面的部分直接帮我生成好了...
*{
padding:
0;
margin:
0;
}
body,
html{
height:
100%;
}
.music{
background-color:
#2A2A2A;
height:
100%;
display: flex;
flex-direction: column;
}
.head{
height:
76px;
background-color:
#161616;
color: white;
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
padding:
0
16px;
}
*{
padding:
0;
margin:
0;
}
body,
html{
height:
100%;
}
.music{
background-color:
#2A2A2A;
height:
100%;
display: flex;
flex-direction: column;
}
.head{
height:
76px;
background-color:
#161616;
color: white;
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
padding:
0
16px;
}
.back,
.more{
width:
40px;
height:
40px;
background:
rgba(
255,
255,
255,
0.05);
border-radius:
50%;
display: flex;
justify-content: center;
align-items: center;
}
.title {
text-align: center;
flex:
1;
}
.name {
font-family: Roboto, Roboto;
font-weight:
500;
font-size:
18px;
color:
#FFFFFF;
line-height:
28px;
}
.author {
font-family: Roboto, Roboto;
font-weight:
400;
font-size:
14px;
color:
rgba(
255,
255,
255,
0.8);
line-height:
20px;
}
.main{
padding:
10px
32px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex:
1;
overflow: hidden;
}
.logo{
width:
240px;
height:
240px;
background-color:
#fff;
border-radius:
24px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.logo
img{
width:
100%;
}
.songs {
margin-top:
20px;
color: white;
width:
100%;
max-width:
400px;
}
.song-info {
text-align: center;
margin-bottom:
20px;
}
.song-name {
font-size:
20px;
font-weight:
500;
margin-bottom:
8px;
color:
#FFFFFF;
}
.song-author {
font-size:
14px;
color:
rgba(
255,
255,
255,
0.6);
margin-bottom:
12px;
}
.lyric {
font-size:
16px;
color:
rgba(
255,
255,
255,
0.8);
font-style: italic;
}
.progress {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom:
20px;
}
.time {
font-size:
12px;
color:
rgba(
255,
255,
255,
0.6);
width:
40px;
text-align: center;
}
.progress-bar {
flex:
1;
height:
4px;
background-color:
rgba(
255,
255,
255,
0.2);
border-radius:
2px;
margin:
0
12px;
position: relative;
cursor: pointer;
}
.progress-inner {
height:
100%;
background-color: white;
border-radius:
2px;
width:
50%;
}
.progress-dot {
width:
12px;
height:
12px;
background-color: white;
border-radius:
50%;
position: absolute;
top:
50%;
left:
50%;
transform:
translate(-
50%, -
50%);
cursor: pointer;
}
.control {
display: flex;
align-items: center;
justify-content: center;
gap:
40px;
margin-top:
30px;
}
.prev,
.next {
width:
48px;
height:
48px;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size:
24px;
}
.play {
width:
56px;
height:
56px;
background-color: white;
border-radius:
50%;
display: flex;
justify-content: center;
align-items: center;
color:
#161616;
font-size:
24px;
}
.iconfont {
font-size: inherit;
}
.foot {
height:
80px;
background-color:
#161616;
display: flex;
align-items: center;
justify-content: space-between;
padding:
0
20px;
border-top:
1px solid
rgba(
255,
255,
255,
0.1);
}
.foot-left {
display: flex;
align-items: center;
gap:
12px;
}
.foot-logo {
width:
56px;
height:
56px;
border-radius:
8px;
overflow: hidden;
}
.foot-logo
img {
width:
100%;
height:
100%;
object-fit: cover;
}
.foot-info {
color: white;
}
.foot-song-name {
font-size:
14px;
font-weight:
500;
color:
#FFFFFF;
margin-bottom:
4px;
}
.foot-song-author {
font-size:
12px;
color:
rgba(
255,
255,
255,
0.6);
}
.foot-right {
display: flex;
align-items: center;
gap:
24px;
color: white;
font-size:
20px;
}
.foot-heart,
.foot-menu {
width:
40px;
height:
40px;
display: flex;
justify-content: center;
align-items: center;
}
到这里几乎已经出成果了：
三、最后神之一手(完善错误)
我发现下面的那一栏被撑下去了：
这样上面就看不到了，于是继续SOLO：
SOLO不但帮你完善代码，还自动帮你增添属性，让布局更加完善：
看看成果(用iPhone6视图)：
一段代码敲下来，发现自己只构建了一个框架和想法，程序员确实已经离不开AI了... 当然并不是说程序员会被取代，但是AI大模型很可能是未来的大方向。
结语
当我不到一节课的时间做完这个音乐播放器，我才算摸透 Trae SOLO 的 “省心”—— 从 SOLO coder 自动生成的接口文档，到 DiffView 帮我秒修的代码兼容问题，甚至部署时一键拉起的服务容器，都把 AI 开发里的 “脏活累活” 啃了个干净。要是你也想拿它练手，建议从 “小工具 + 强流程” 的场景切入，保准能 get 到它的香。
第一次用SOLO写网页，所以很多都不懂，但是SOLO每次都能get到我的点。可能结果没有符合我的要求，但是你SOLO，它马上又帮你完善了。
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/69921599/viewspace-3106319/ ，如需转载，请注明出处，否则将追究法律责任。
请登录后发表评论
登录
全部评论
