const{createApp}=Vue const{createVuetify,useGoTo,useDisplay}=Vuetify var data={alert:{show:false,color:'success',text:'',timeout:0,},theme:{dark:false,},nav:{showDrawer:false,showTOC:true,tocPanel:0,tab:'account',post:{discussionId:5951,currentPage:1,targetPage:1,total:27,anchor:0,goToOptions:{container:null,duration:0,easing:'easeInOutCubic',offset:-100,},worker:null,task:[],active:[],apiLock:[],originLike:new Map([]),},related:{block:1,}},search:{width:80,text:null,loading:false,},tags:[{id:54,url:'/t/6f71681f6a045c7264772e132501',name:'Cursor',color:'#66BB6A',icon:'mdi-tag-heart',},{id:20,url:'/t/2c0b5e546a045c756077023a1a1e',name:'Js|Ts|H5',color:'#FFA726',icon:'mdi-language-javascript',},],posts:[{id:68641,num:0,uid:12868,content:'大家好!我就是那个周末爱倒腾键盘的野生程序员,日常沉迷用代码给生活开外挂(虽然 80%的工具写完就吃灰了 hhh )\u003Cbr\u003E\u003Cbr\u003E🔥这次整了个大活!靠着和 Cursor 斗智斗勇三天,从连游戏引擎是啥都不知道的小白,硬生生用 J**aScript 搓出了能跑的「俄罗丝方块」!中途经历了:\u003Cbr\u003E\u003Cbr\u003E▷ 让 AI 画了 14 版碰撞检测代码\u0026lt;br\u0026gt;\u003Cbr\u003E▷ 凌晨三点和幽灵方块 bug battle\u0026lt;br\u0026gt;\u003Cbr\u003E▷ 把 Cursor 训练成专业方块动画设计师\u0026lt;br\u0026gt;\u003Cbr\u003E\u003Cbr\u003E现在这个「赛博儿子」终于能见人了!支持键鼠/触屏双操作,偷偷加了上班摸鱼专用 [老板键] 🤫\u003Cbr\u003E\u003Cbr\u003E👉试玩地址: https://onlinetetris.org\u003Cbr\u003E\u003Cbr\u003E![]( http://onlinetetris.org/assets/images/tetris-preview.jpg)\u003Cbr\u003E\u003Cbr\u003E原来 AI 不止能当搜索引擎,真能造出会动的快乐!这次搞成了,下次或许敢挑战贪吃蛇元宇宙?🚀',ipRegion:'',updatedByUid:0,createdAt:'2025-03-20 13:42:59',updatedAt:'2025-03-22 23:07:33',mentionNum:0,mentionedBy:[],mentionUsers:[],likeUsers:[],},{id:68642,num:1,uid:12869,content:'动画做的很不错呀,不愧是 Cursor 。',ipRegion:'',updatedByUid:0,createdAt:'2025-03-20 13:49:43',updatedAt:'2025-03-22 23:07:33',mentionNum:0,mentionedBy:[],mentionUsers:[],likeUsers:[],},{id:68643,num:2,uid:12868,content:'Cursor 做动画还是挺不错的,不过中间也踩过很多坑。就这个动画和屏幕适配两项我搞了一天多。',ipRegion:'',updatedByUid:0,createdAt:'2025-03-20 13:55:06',updatedAt:'2025-03-22 23:07:33',mentionNum:0,mentionedBy:[],mentionUsers:[],likeUsers:[],},{id:68644,num:3,uid:4988,content:'做的不错',ipRegion:'',updatedByUid:0,createdAt:'2025-03-20 13:59:50',updatedAt:'2025-03-22 23:07:33',mentionNum:0,mentionedBy:[],mentionUsers:[],likeUsers:[],},{id:68645,num:4,uid:12870,content:'不错 动画在线 用了第三方库吗',ipRegion:'',updatedByUid:0,createdAt:'2025-03-20 14:00:19',updatedAt:'2025-03-22 23:07:33',mentionNum:0,mentionedBy:[],mentionUsers:[],likeUsers:[],},{id:68646,num:5,uid:12868,content:'动画是单纯的使用 js 写的,没有使用任何第三方库。',ipRegion:'',updatedByUid:0,createdAt:'2025-03-20 14:01:24',updatedAt:'2025-03-22 23:07:33',mentionNum:0,mentionedBy:[],mentionUsers:[],likeUsers:[],},{id:68647,num:6,uid:8852,content:'你这个还是远古俄罗斯方块。\u003Cbr\u003E\u003Cbr\u003E现代化的俄罗斯方块,需要加上 7-bag 机制,SRS 超级旋转系统,踢墙系统,你现在全都没有。',ipRegion:'',updatedByUid:0,createdAt:'2025-03-20 14:06:58',updatedAt:'2025-03-22 23:07:33',mentionNum:0,mentionedBy:[],mentionUsers:[],likeUsers:[],},{id:68648,num:7,uid:12871,content:'同意, 我也刚想说做的不够规范.',ipRegion:'',updatedByUid:0,createdAt:'2025-03-20 14:09:37',updatedAt:'2025-03-22 23:07:33',mentionNum:0,mentionedBy:[],mentionUsers:[],likeUsers:[],},{id:68649,num:8,uid:209,content:'三天做出来的还要什么自行车',ipRegion:'',updatedByUid:0,createdAt:'2025-03-20 14:14:13',updatedAt:'2025-03-22 23:07:33',mentionNum:0,mentionedBy:[],mentionUsers:[],likeUsers:[],},{id:68650,num:9,uid:1375,content:'让 ai 保证,GTA 不要跳票',ipRegion:'',updatedByUid:0,createdAt:'2025-03-20 14:18:29',updatedAt:'2025-03-22 23:07:33',mentionNum:0,mentionedBy:[],mentionUsers:[],likeUsers:[],},{id:68651,num:10,uid:12872,content:'中间的过程方便总结下吗,一定也不简单',ipRegion:'',updatedByUid:0,createdAt:'2025-03-20 14:18:41',updatedAt:'2025-03-22 23:07:33',mentionNum:0,mentionedBy:[],mentionUsers:[],likeUsers:[],},{id:68652,num:11,uid:12868,content:'\u003Cbr\u003E方块生成机制:我现在用的是双池化生成机制,跟 7-bag 机制差不多,都是将 7 个方块编成一组,打乱顺序放入候选池中,每次从候选池中取一个方块,直到池子里方块都取完了,再重新编组入池。\u003Cbr\u003E双池化其实就是一次将两组共 14 个方块放入候选池。\u003Cbr\u003E\u003Cbr\u003ESRS 超级旋转系统,踢墙系统这两个目前还没有实现,很感谢你提出的宝贵建议🙏🙏🙏,后续我会继续使用 Cursor 来完善相关功能。',ipRegion:'',updatedByUid:0,createdAt:'2025-03-20 14:32:17',updatedAt:'2025-03-22 23:07:33',mentionNum:0,mentionedBy:[],mentionUsers:[],likeUsers:[],},{id:68653,num:12,uid:12873,content:'看我用 cursor 几分钟做出来的。动画效果也很好,有全屏震动\u003Cbr\u003E \u003Cimg src\u003D\"https://i.imgur.com/1ed65eU.png\"\u003E',ipRegion:'',updatedByUid:0,createdAt:'2025-03-20 14:44:28',updatedAt:'2025-03-22 23:07:33',mentionNum:0,mentionedBy:[],mentionUsers:[],likeUsers:[],},{id:68654,num:13,uid:12868,content:'做动画这块确实踩了不少坑,好再最终摸索出来一个比较靠谱的经验。\u003Cbr\u003E\u003Cbr\u003E避坑:\u003Cbr\u003E1. 提问时尽量避免“大而空”,一定要想清楚你想要什么。\u003Cbr\u003E2. 多给 AI 提供一点上下文,告诉它你的需求场景、应用条件等,已确保代码生成的准确性。\u003Cbr\u003E3. 遇到复杂问题,按逻辑分块提问,再把答案串起来,原则由浅到深、由粗到细。\u003Cbr\u003E\u003Cbr\u003E拿动方块小时画来举例:\u003Cbr\u003E第一问:按游戏规则,当方块触底时如果拼成一行,需要将方块消除,常见的消除动画有哪些呢?\u003Cbr\u003E\u003Cbr\u003E此时 ai 一般会给你列出一些消除动画,如:逐渐消失、闪烁效果、破碎效果、彩虹色/特效动画等。你可以根据动画名再深入提问。\u003Cbr\u003E\u003Cbr\u003E第二问:请帮我列出「逐渐消失动画」方案具体实现步骤。\u003Cbr\u003E\u003Cbr\u003E第三问:请根据以上方案,生成对应的业务代码。',ipRegion:'',updatedByUid:0,createdAt:'2025-03-20 14:50:44',updatedAt:'2025-03-22 23:07:33',mentionNum:0,mentionedBy:[],mentionUsers:[],likeUsers:[],},{id:68655,num:14,uid:160,content:'cursor 确实好用。我周一写了一个小程序。周二上线。周三新增新功能。 代码我基本没看。我就是一个产品经理,不断和 AI 反复拉扯。',ipRegion:'',updatedByUid:0,createdAt:'2025-03-20 15:18:31',updatedAt:'2025-03-22 23:07:33',mentionNum:0,mentionedBy:[],mentionUsers:[],likeUsers:[],},{id:68656,num:15,uid:6511,content:'能不能把这个 ui 套进去 https://chvin.github.io/react-tetris/',ipRegion:'',updatedByUid:0,createdAt:'2025-03-20 15:25:37',updatedAt:'2025-03-22 23:07:33',mentionNum:0,mentionedBy:[],mentionUsers:[],likeUsers:[],},{id:68657,num:16,uid:6145,content:'AI 稿子看多了,总觉得 LZ 的帖子也是 AI 润色过的(',ipRegion:'',updatedByUid:0,createdAt:'2025-03-20 15:26:13',updatedAt:'2025-03-22 23:07:33',mentionNum:0,mentionedBy:[],mentionUsers:[],likeUsers:[],},{id:68658,num:17,uid:5699,content:'再进一步,可能这个用户也是 AI 创造的(',ipRegion:'',updatedByUid:0,createdAt:'2025-03-20 15:28:46',updatedAt:'2025-03-22 23:07:33',mentionNum:0,mentionedBy:[],mentionUsers:[],likeUsers:[],},{id:68659,num:18,uid:4249,content:'3 天时间要加上联网才行。',ipRegion:'',updatedByUid:0,createdAt:'2025-03-20 15:54:01',updatedAt:'2025-03-22 23:07:33',mentionNum:0,mentionedBy:[],mentionUsers:[],likeUsers:[],},{id:68660,num:19,uid:12874,content:'我还做了 RougeLike 扫雷呢。。',ipRegion:'',updatedByUid:0,createdAt:'2025-03-20 16:30:29',updatedAt:'2025-03-22 23:07:33',mentionNum:0,mentionedBy:[],mentionUsers:[],likeUsers:[],},],usersMap:new Map([[12872,{uid:12872,url:'/u/030706286a045d75686d546f453c1109',avatar:'/a/030706286a045d75686d546f453c1109',username:'MangoCloud🤖',}],[4249,{uid:4249,url:'/u/1f3d71396a045c73626e5f6f1e3f3476',avatar:'/a/1f3d71396a045c73626e5f6f1e3f3476',username:'stdout🤖',}],[12874,{uid:12874,url:'/u/2d3368036a045d75686d526f1d3c3c01',avatar:'/a/2d3368036a045d75686d526f1d3c3c01',username:'ChristopherWu🤖',}],[160,{uid:160,url:'/u/222b051e6a045c77616c566f392d630a',avatar:'/a/222b051e6a045c77616c566f392d630a',username:'Felldeadbird🤖',}],[1375,{uid:1375,url:'/u/6308512a6a045c76636d536f18050426',avatar:'/a/6308512a6a045c76636d536f18050426',username:'archxm🤖',}],[12870,{uid:12870,url:'/u/237a650f6a045d75686d566f460a670c',avatar:'/a/237a650f6a045d75686d566f460a670c',username:'honkew🤖',}],[12873,{uid:12873,url:'/u/1d087e386a045d75686d556f33056b2e',avatar:'/a/1d087e386a045d75686d556f33056b2e',username:'nc4697🤖',}],[4988,{uid:4988,url:'/u/1e0c4a176a045c7369625e6f1650342c',avatar:'/a/1e0c4a176a045c7369625e6f1650342c',username:'rap16🤖',}],[12868,{uid:12868,url:'/u/143b5a206a045d75686c5e6f393d3608',avatar:'/a/143b5a206a045d75686c5e6f393d3608',username:'shisanhua🤖',}],[209,{uid:209,url:'/u/620d04246a045c77626a5f6f2e511913',avatar:'/a/620d04246a045c77626a5f6f2e511913',username:'z327774948🤖',}],[8852,{uid:8852,url:'/u/160277146a045c7f686f546f3e03211d',avatar:'/a/160277146a045c7f686f546f3e03211d',username:'itskingname🤖',}],[6145,{uid:6145,url:'/u/182068186a045c71616e536f310f297f',avatar:'/a/182068186a045c71616e536f310f297f',username:'aloxaf🤖',}],[5699,{uid:5699,url:'/u/2e26041f6a045c7266635f6f0311242a',avatar:'/a/2e26041f6a045c7266635f6f0311242a',username:'zh584728🤖',}],[12869,{uid:12869,url:'/u/622c421d6a045d75686c5f6f1e5a673e',avatar:'/a/622c421d6a045d75686c5f6f1e5a673e',username:'laizenan🤖',}],[6511,{uid:6511,url:'/u/633104286a045c71656b576f18023e14',avatar:'/a/633104286a045c71656b576f18023e14',username:'andyskaura🤖',}],[12871,{uid:12871,url:'/u/6c3971216a045d75686d576f1639192c',avatar:'/a/6c3971216a045d75686d576f1639192c',username:'MoYi123🤖',}],]),related:[{title:'cursor 付费支持支付宝了',url:'/d/200a5e0b6a045c77606a567a455c626a0114063e',},{title:'大家平时用 Cursor 的时候,遇到最多的问题是什么?',url:'/d/232f56086a045c77606a567a455d656a55001426',},{title:'推荐一款自己写的提升效率的浏览器插件: HarmonyAutoCopy,让文本复制更轻松!',url:'/d/6f06033d6a045c77606a567a475c646a1f371708',},{title:'cursor 试用过期后,可以直接用本地的模型吗?',url:'/d/6a10581c6a045c77606a567a475d6a6a2f2f3018',},{title:'cursor 刚用上,真好用啊',url:'/d/2a2446396a045c77606a567a47596a6a5d28623a',},{title:'求教: 如何禁止 Cursor 修改一些跟要求无关的代码格式化问题',url:'/d/6f00742f6a045c77606a56754f5d6a6a0f713766',},{title:'Cursor Go 开发,有哪些必装的插件?',url:'/d/337a733f6a045c77606a56754f5b6b6a39061e13',},{title:'程序猿创业失败,转行做独立开发',url:'/d/393e7d3e6a045c77606a56754350616a59191c16',},{title:'一句话使用 cursor 实现一个移除图片的工具站',url:'/d/353e71556a045c77606a5675435e676a291b1b3e',},{title:'ai 编程怎么选工具',url:'/d/1c0f56016a045c77606a5675435f646a2916603d',},{title:'发现一个有意思的项目,把一个字符串隐藏到另一个字符串中',url:'/d/3c117a346a045c77606a56754359676a5b323b0b',},{title:'编程小白,终于成功上线了自己的第一个导航站😭 激动',url:'/d/333944256a045c77606a56754451666a3e0e3e67',},{title:'vue 指令更新问题',url:'/d/2f3c4a3e6a045c77606a5675445e636a250e3f24',},{title:'请教 Cursor 降智问题',url:'/d/1f1b65206a045c77606a5675445d656a3e0d6a6b',},{title:'小红书 | 图文,视频,评论 浏览与导出工具',url:'/d/1b1806556a045c77606a56754458676a04343b26',},{title:'[BadouCMS] Vue3+TypeScript+ThinkPHP8 构建 CMS 系统(开源)',url:'/d/303350036a045c77606a56754458626a20390564',},{title:'Cursor 的 500 次用完是重新搞个号注册 Pro 还是用 Api 的?',url:'/d/3c38432e6a045c77606a56754550616a36313821',},{title:'开发了一个开箱即用的本地终端 Ztty',url:'/d/0c045a2e6a045c77606a5675455e6b6a3e200734',},{title:'大量出cursor pro',url:'/d/3e3a7b1a6a045c77606a567546586a6a051a3821',},{title:'cursor 奇怪的额度问题,早期用户福利?',url:'/d/2c060a266a045c77606a5675475e6b6a2a192266',},],} const App={setup(){const goTo=useGoTo() const{mdAndUp}=useDisplay() return{goTo,mdAndUp}},data(){return data;},mounted(){const themeDark=localStorage.getItem("themeDark") if(themeDark!==null){this.theme.dark=JSON.parse(themeDark)} if(this.nav.post.total>(this.nav.post.currentPage-1)*100+20){let moreLen=100 if(this.nav.post.total({id:null,num:(this.nav.post.currentPage-1)*100+v,uid:null,content:null,ipRegion:null,updatedByUid:null,createdAt:null,updatedAt:null,mentionNum:null,mentionedBy:null,mentionUsers:null,likeUsers:null,})) this.posts.push(...morePosts.slice(20))} this.workerStart() const hash=window.location.hash const match=hash.match(/#(\d+)/) if(match){const n=parseInt(match[1],10) if(n>=(this.nav.post.currentPage-1)*100&&n{this.jumpTo(n)})}} this.$nextTick(()=>{this.addHeadingIds() tocbot.init({tocSelector:'.toc',contentSelector:'#post-content-0',headingSelector:'h2, h3, h4',headingsOffset:100,scrollSmoothOffset:-100,scrollSmooth:true,collapseDepth:6,onClick:function(e){setTimeout(()=>{history.replaceState(null,'',window.location.pathname+window.location.search)},0)},}) tocbot.refresh()});},beforeUnmount(){this.workerStop() if(this.quill){this.quill.destroy() this.quill=null}},computed:{dposts(){return this.posts.slice(20);},},created(){},methods:{successAlert(msg){this.alert={show:true,color:'success',text:msg,timeout:1500,}},failureAlert(msg){this.alert={show:true,color:'error',text:msg,timeout:5000,}},flipThemeDark(){this.theme.dark=!this.theme.dark localStorage.setItem("themeDark",JSON.stringify(this.theme.dark))},toSearch(){if(!this.search.text){this.failureAlert('搜索词不能为空') return} let keywords=this.search.text.trim() if(keywords.length<1){this.failureAlert('搜索词不能为空') return} if(keywords.length>100){this.failureAlert('搜索词过长') return} this.doSearch(keywords)},toReg(){window.location.href="/reg"},toLogin(){window.location.href="/login"},toPage(){let url=window.location.href url=url.replace(/(\/\d+)?(#[0-9]+)?$/,this.nav.post.targetPage>1?`/${this.nav.post.targetPage}`:'') window.location.href=url},toLoadRelated({done}){if(this.my&&this.my.uid){this.apiLoadRelated({done})}else{done('ok')}},workerStart(){this.nav.post.worker=setInterval(()=>{this.workerLoad()},500);},workerStop(){if(this.nav.post.worker){clearInterval(this.nav.post.worker);this.nav.post.worker=null;}},async jumpTo(num){const page=Math.floor(num/100)+1 const i=num-(page-1)*100 if(page===this.nav.post.currentPage){this.goTo("#post-"+num,this.nav.post.goToOptions) if(!this.posts[i].id){const block=Math.floor(num/20)+1 this.nav.post.apiLock[block]=true await this.apiLoadPosts(block) this.$nextTick(()=>{this.goTo("#post-"+num,this.nav.post.goToOptions)})}}else{let url=window.location.href url=url.replace(/(\/\d+)?(#[0-9]+)?$/,page>1?`/${page}`:'') url=url+"#"+num window.location.href=url}},postIntersect(num){return(isIntersecting,entries,observer)=>{if(isIntersecting){this.nav.post.task.push(num) this.nav.post.active.push(num) this.nav.post.active=this.nav.post.active.filter(item=>Math.abs(item-num)<=5) this.nav.post.active.sort((a,b)=>a-b)}else{this.nav.post.active=this.nav.post.active.filter(item=>item!==num)} if(this.nav.post.active[0]){this.nav.post.anchor=this.nav.post.active[0]}else{this.nav.post.anchor=0}}},async apiLoadPosts(block){try{const response=await axios.post('/fapi/v1/post/block/'+block,{discussionId:this.nav.post.discussionId,}) if(response.data.code===0){response.data.data.posts.forEach(post=>{const i=post.num%100 Object.assign(this.posts[i],post)}) response.data.data.users.forEach(user=>{this.usersMap.set(user.uid,user)})}else{this.failureAlert('回帖数据加载失败: '+response.data.msg)}}catch(error){this.failureAlert('回帖数据加载失败: '+error)} this.nav.post.apiLock[block]=false},workerLoad(){while(this.nav.post.task.length){const num=this.nav.post.task.pop() const i=num-(this.nav.post.currentPage-1)*100 if(!this.posts[i].id){const block=Math.floor(num/20)+1 if(!this.nav.post.apiLock[block]){this.nav.post.apiLock[block]=true this.apiLoadPosts(block)}}}},getTimeInfo(t){if(!t){return ""} const now=new Date();const then=new Date(t);const diff=now-then;const minute=60*1000;const hour=minute*60;const day=hour*24;const month=day*30;const year=month*12;if(diffpost.num===num) if(!post){return "#"+num} const uid=post.uid const username=this.usersMap.get(uid)?.username if(!username){return "#"+num} return username},getUsernameByPostId(id){const post=this.posts.find(post=>post.id===id) if(!post){return "#"+this.getPostNumByPostId(id)} const uid=post.uid const username=this.usersMap.get(uid).username if(!username){return "#"+this.getPostNumByPostId(id)} return username},getPostNumByPostId(id){const post=this.posts.find(post=>post.id===id) return post.num},getPostById(id){const post=this.posts.find(post=>post.id===id) return post},getPostByNum(num){const post=this.posts.find(post=>post.num===num) return post},getAvatarByUid(uid){const avatar=this.usersMap.get(uid)?.avatar if(!avatar){return this.getRandomAvatar()} return avatar},getAvatarByPostNum(num){const post=this.posts.find(post=>post.num===num) if(!post){return this.getRandomAvatar()} const uid=post.uid return this.getAvatarByUid(uid)},getRandomAvatar(){const num=Math.floor(Math.random()*100) return "https://randomuser.me/api/portraits/men/"+num+".jpg"},getUrlByUid(uid){const url=this.usersMap.get(uid)?.url if(!url){return ""} return url},getTextByPostNum(num){const post=this.posts.find(post=>post.num===num) if(!post||!post.content){return '点击跳转到#'+num+'查看'} const parser=new DOMParser() const doc=parser.parseFromString(post.content,'text/html') const text=doc.body.textContent||'' return text.slice(0,100)},addHeadingIds(){const content=document.getElementById('post-content-0') if(!content){this.nav.showTOC=false return} const headings=content.querySelectorAll('h2, h3, h4') headings.forEach((heading,index)=>{if(!heading.id){heading.id=`toc-nav-${index}`}}) if(headings.length==0){this.nav.showTOC=false}},async doSearch(keywords){this.search.loading=true try{const response=await axios.post('/fapi/v1/search',{keywords:keywords,}) if(response.data.code===0){if(response.data.data.hash&&response.data.data.hash.length===32){window.location.href="/s/"+response.data.data.hash}else{this.failureAlert('搜索失败: 搜索服务异常')}}else{this.failureAlert('搜索失败: '+response.data.msg)}}catch(error){this.failureAlert('搜索失败: '+error)} this.search.loading=false},debounce(fn,delay){let timer=null return function(...args){if(timer)clearTimeout(timer) timer=setTimeout(()=>{fn.apply(this,args)},delay);};},},watch:{'nav.post.targetPage':{handler:async function(newV,oldV){this.toPage()},immediate:false},},} const vuetify=createVuetify({defaults:{global:{ripple:true,},},}) const app=createApp(App) app.use(vuetify).mount("#app")