前端 on Rui blog

MCP配置

Wed, 08 Apr 2026 10:42:56 +0800

https://alekschen.github.io/post/2504-cursor-figma-mcp/ figma mcp 配置：全局下载，启动本地端口：

pnpx figma-developer-mcp --figma-api-key=<YOUR_FIGMA_API_KEY>

cursor中配置：

{
 "mcpServers": {
 "Figma": {
 "url": "http://localhost:3333/sse"
 }
 }
}

mastergo

{
  "mcpServers": {
    "mastergo-magic-mcp": {
      "command": "npx",
      "args": [
        "-y",
        "@mastergo/magic-mcp",
        "--token=<YOUR_MASTERGO_TOKEN>",
        "--url=https://mastergo.com"
      ],
      "env": {
        "NPM_CONFIG_REGISTRY": "https://registry.npmjs.org/"
      }
    }
  }
}

mcp-feedback-enhanced：

{
  "mcpServers": {
    "mcp-feedback-enhanced": {
      "command": "uvx",
      "args": [
        "mcp-feedback-enhanced@latest"
      ]
    }
  }
}

context7：

React

Wed, 08 Apr 2026 10:42:56 +0800

文档：[https://17.reactjs.org/docs/getting-started.html]

核心要点

你想做的事	React 里常用	Vue 里常用
页面加载后执行一次	useEffect(…, [])	onMounted
页面销毁前清理	useEffect 返回清理函数	onUnmounted
监听某个值变化	useEffect(…, [value])	watch
自动追踪依赖执行副作用	useEffect（手动写依赖）	watchEffect
根据状态计算新值	useMemo	computed

代码整理：

hello world 注意需要使用==type=“text/jsx”==

CSS省略号

Wed, 08 Apr 2026 10:42:55 +0800

单行文本

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

多行文本

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;/* 设置为想要的行数 */
overflow: hidden;
text-overflow: ellipsis;

nvue

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1; /* 显示的行数 */
lines: 1; /* NVUE下要用这个属性，来让文字超出隐藏变省略号 */

Git提交规范

Wed, 08 Apr 2026 10:42:55 +0800

feat: 新功能、新特性
fix: 修改 bug
perf: 更改代码，以提高性能
refactor: 代码重构（重构，在不影响代码内部行为、功能下的代码修改）
docs: 文档修改
style: 代码格式修改, 注意不是 css 修改（例如分号修改）
test: 测试用例新增、修改
build: 影响项目构建或依赖项修改
revert: 恢复上一次提交
ci: 持续集成相关文件修改
chore: 其他修改（不在上述类型中的修改）
release: 发布新版本
workflow: 工作流相关文件修改

scope: commit 影响的范围, 比如: route, component, utils, build…
subject: commit 的概述
body: commit 具体修改内容, 可以分为多行.
footer: 一些备注, 通常是 BREAKING CHANGE 或修复的 bug 的链接.

示例：

nacos安装

Wed, 08 Apr 2026 10:42:55 +0800

官方文档： https://nacos.io/docs/latest/quickstart/quick-start/?spm=5238cd80.72a042d5.0.0.5bc0cd36gYSNAV

bin目录下启动命令：

startup.cmd -m standalone

启动报错指南： https://blog.csdn.net/qq_45063782/article/details/119751892 https://blog.csdn.net/weixin_45396074/article/details/135177158

需要在本地mysql手动创建nacos数据库修改配置： secret.key 不得少于32位，不然会报错，直接把官方的注释解开即可

FigmaMCP提示词

Wed, 08 Apr 2026 10:42:53 +0800

你是一名资深全栈工程师，请基于我提供的 Figma 设计链接生成响应式小程序页面，并使用Figma mcp工具查看UI设计稿。
要求：

严格还原间距和颜色
对移动设备做适配处理
其中若涉及图标、背景图等信息，告知我代码中对应图标的名称，我会手动下载保存在腾讯云cos上
若涉及新功能开发，你是一名优秀的经验丰富的全栈工程师，需要完成sql表创建、后端编写以及前端编写工作
若需要顶部导航栏，则使用小程序原生的顶部导航栏，页面的宽高需要考虑padding的距离，必要时使用calc设置宽高

设计链接： https://www.figma.com/design/xXcKJz1amnqrNGR32JSWoI/Untitled?node-id=30-299&t=g9zYjchPWTYzvXoA-0

React全家桶技术栈

Wed, 08 Apr 2026 10:42:53 +0800

层级	技术选型
语言	TypeScript
前端（Web）	Next.js + Tailwind + shadcn/ui
移动端（App）	React Native + Expo + NativeWind
小程序	Taro（React 语法）
数据库	Supabase（数据库 + Auth + Realtime + Edge Functions）
AI 层	OpenAI SDK + LangChain + pgvector
状态管理	Zustand / React Query
部署	Vercel（Web） + Expo EAS（App） + 微信开发者工具（小程序）

Web：Next.js+Supabase App: React Native+Next.js+Supabase 小程序：Taro+Next.js+Supabase

如何使用 MuMu模拟器和 Android Studio 调试应用

Wed, 08 Apr 2026 10:42:50 +0800

https://mumu.163.com/help/20240903/40912_1178625.html

D:\App\MuMuPlayer\nx_device\12.0\shell> adb.exe connect 127.0.0.1:7555

新版本adb.exe 路径 “D:\App\MuMuPlayer\nx_device\12.0\shell\adb.exe” “D:\App\MuMuPlayer\nx_main\adb.exe”

uniapp调试运行到mumu模拟器

D:\App\HBuilderX\plugins\launcher-tools\tools\adbs\adb.exe