AI Summary如果 文件夹中仅有 文件, 则它是一个脚本项目. 脚本以无沙盒 iframe 的形式在酒馆后台运行, 没有自己的界面, 只有代码部分可供编写. 脚本中的 jquery 将直接作用于整个酒馆页面而非仅作用于脚本所在的 iframe, 因为它是通过 得到的. 例如 将选择酒馆网页的 标签, 而不是脚本所在的 iframe 的 标签.
Install
Copy this and paste it into Claude Code, Cursor, or any AI assistant:
I want to add the "tavern_helper_template — Cursor Rules" prompt rules to my project. Repository: https://github.com/StageDog/tavern_helper_template Please read the repo to find the rules/prompt file, then: 1. Download it to the correct location (.cursorrules, .windsurfrules, .github/prompts/, or project root — based on the file type) 2. If there's an existing rules file, merge the new rules in rather than overwriting 3. Confirm what was added
Description
当需要编写脚本时, 你应该参考本文件
脚本
如果 src/xxx 文件夹中仅有 index.ts 文件, 则它是一个脚本项目. 脚本以无沙盒 iframe 的形式在酒馆后台运行, 没有自己的界面, 只有代码部分可供编写.
jquery
脚本中的 jquery 将直接作用于整个酒馆页面而非仅作用于脚本所在的 iframe, 因为它是通过 window.$ = window.parent.$ 得到的. 例如 $('body') 将选择酒馆网页的 <body> 标签, 而不是脚本所在的 iframe 的 <body> 标签.
vue
由于脚本运行在 iframe 中, 当需要在脚本中向酒馆页面挂载 vue 组件时, 你应该使用 jquery 来创建一个要挂载的位置, 将其添加到酒馆网页上, 并使用 app.mount($app[0]) 来挂载.
向酒馆网页挂载 vue 组件时的样式问题
由于脚本运行在 iframe 中, 脚本所设置的 style (包括 tailwindcss 产生的) 仅会在 iframe 内生效而不会应用到整个酒馆网页; 也就是说, 当我们用 jquery 创建了挂载位置, 并想将 vue 组件挂载到酒馆网页上时, 组件所需要的样式、所填写的 tailwindcss class 都无法生效. 基于 vue 组件用途, 这有两个解决方案.
Discussion
Health Signals
My Fox Den
Community Rating
Sign in to rate this booster
Works With
Any AI assistant that accepts custom rules or system prompts