最近这两天准备鼓捣一下markdown文本编辑器，现在写公众号一般用的都是 网页 的编辑器。

说实话，很方便，但是痛点也很明显。

研究过程中发现一个以前从未在意过的标签: <q> 标签。

官网解释

<p>孟子: <q>生于忧患，死于安乐。</q></p>

说实话原生效果比较难看。

仅仅是对文本增加了双引号，并且这个双引号效果在各个浏览器中好像还存在细微的区别。

另外就是效果对于常规文本而言没有什么问题，但是对于大段文字、需要重点突出的文字而言其实比较普通，混杂在海量的文字中间很难分辨出来效果。

所以可以通过css全局修改q标签的样式，使其更符合个性化样式的需求。

q {

    quotes: "「" "」";

    color: #3594F7;

    font-weight: bold;

}

最大限度模仿了markdown上面的样式效果。

其实上述样式中的双引号还可以被替换成图片、表情、文字等等，并且也可以通过伪元素对双引号进行操作。

q {

    quotes: "🙂" "🙃";

    color: #3594F7;

    font-weight: bold;

}



q::before {

    display: inline-block;

}



q::after {

    display: inline-block;

}



q:hover::before,

q:hover::after {

    animation: rotate 0.5s linear infinite;

}



@keyframes rotate {

    from {

        transform: rotate(0deg);

    }

    to {

        transform: rotate(360deg);

    }

}

注意：伪元素上必须添加 display: inline-block; ，否则动画不生效。

原因是伪元素默认为 inline，部分css样式对 inline 是不生效的。

上线前两个月，我们的权限系统崩了三次。

不是接口没权限，而是：

• 页面展示和真实权限不一致；


• 权限判断写得四分五裂；


• 权限数据和按钮逻辑耦合得死死的，测试一改就炸。

于是，我们老老实实把整个权限体系拆了重构，从接口到路由、到组件、到 v-permission 指令，走了一遍完整的流程。

结果：代码可维护，调试容易，后端调整也能快速兜底。

这篇文章不讲理论，只还原我们项目真踩过的 3 套失败方案和最终落地方案。

❌ 第一套：按钮级权限直接写死在模板里

当时我们的写法是这样的：

<!-- 用户管理页 -->

<el-button v-if="authList.includes('user:add')">添加用户</el-button>

接口返回的是一个权限数组：

["user:add", "user:delete", "user:list"]

然后整个项目几十个地方都这么判断。

结果：

• 不能重用，每个组件都判断一次；


• 权限粒度变更就全崩，比如从 user:add 改成 user:add_user；


• 后端权限更新后，前端要全局搜索权限 key 改代码；

典型的“写起来爽，维护时哭”方案。

❌ 第二套：用 router.meta.permission 统一控制，结果太抽象

重构后我们尝试统一控制页面级权限：

// router.ts

{

  path: '/user',

  component: User,

  meta: {

    permission: 'user:list'

  }

}

再通过导航守卫：

router.beforeEach((to, from, next) => {

  const p = to.meta.permission

  if (p && !authList.includes(p)) {

    return next('/403')

  }

  next()

})

这个方案页面级权限是解决了，但组件级 / 按钮级 / 表单字段级全都失效了。

而且你会发现，大量页面是“同路由但不同内容区域权限不同”，导致这种 meta.permission 方案显得太粗暴。

❌ 第三套：封装权限组件，结果被吐槽“反人类”

当时我们团队有人设计了一个组件：

<Permission code="user:add">

  <el-button>添加用户</el-button>

</Permission>

这个组件内部逻辑是：

const slots = useSlots()

if (!authList.includes(props.code)) return null

return slots.default()

结果：

• 逻辑上看似没问题，但使用非常反直觉；


• 特别是嵌套多个组件时，调试麻烦，断点打不进真实组件；


• TypeScript 报类型错误，编辑器无法识别 slot 类型；


• 更麻烦的是，权限失效的时候，组件不会渲染，开发环境都看不到是为什么！

最终方案：hook + 指令 + 路由统一层级设计

我们最后把权限体系重构为 3 层：

🔹1. 接口统一管理权限 key → 后端返回精简列表（扁平权限）

export type AuthCode =

  | 'user:add'

  | 'user:delete'

  | 'user:edit'

  | 'order:export'

  | 'dashboard:view'

服务端返回用户权限集，保存在 authStore（Pinia / Vuex / Context）中。

🔹2. 统一 Hook 调用：usePermission(code)

import { useAuthStore } from '@/store/auth'



export function usePermission(code: string): boolean {

  const store = useAuthStore()

  return store.permissionList.includes(code)

}

用法：

<el-button v-if="usePermission('user:add')">添加用户</el-button>

这才是真正组件内部逻辑干净、容易复用、TS 支持的方案。

🔹3. 封装一个 v-permission 指令（可选）

app.directive('permission', {

  mounted(el, binding) {

    const authList = getUserPermissions() // 从全局 store 获取

    if (!authList.includes(binding.value)) {

      el.remove()

    }

  }

})

模板中使用：

<el-button v-permission="'order:export'">导出订单</el-button>

适合动态组件、render 生成的按钮，不适合复杂嵌套逻辑，但实际项目中效果拔群。

🧪 页面级权限怎么做？

不再用 router.meta，而是把每个路由页封装为权限包裹组件：

<template>

  <PermissionView code="dashboard:view">

    <Dashboard />

  </PermissionView>

</template>

权限组件内部处理：

• 没权限 → 自动跳转 403


• 有权限 → 渲染内容

这样即使权限接口变了，组件逻辑也统一保留，避免页面空白或者闪跳。

权限这事，不是实现难，而是维护难。

最核心的不是你怎么控制显示，而是权限 key 的一致性、复用性、分层能力。

最终我们稳定版本满足了：

• 页面、按钮、字段统一接入权限


• 新增权限点只需要改枚举，不需要大改


• 新人接手也能一眼看懂逻辑，能调试

📌 你可以继续看我的系列文章

• 《用了三年 Vue，我终于理解为什么“组件设计”才是重灾区》


• 《我为什么觉得 React 正在逐渐失去吸引力？》


• 《为什么越来越多 Vue 项目用起了 UnoCSS？》


• 《为什么我放弃使用 Pinia？》


• 《为什么我不再相信 Tailwind？三个月重构项目教会我的事》

前言

大家好，我是奈德丽。

上周在做代码review的时候，看到同事小李写了这样一行代码：

<component :is="currentComponent" @vue:mounted="handleMounted" />

我第一反应是："这什么语法？似曾相识的样子，有点像在vue2中用过的@hook:mounted, 但我们项目是vue3，然后去Vue3官方文档搜索@vue:mounted，结果什么都没找到，一开始我以为是他研究了源码，结果他说是百度到的，那我们一起来来研究研究这个东西吧。

从一个动态组件说起

小李的需求其实很简单：在子组件加载或更新或销毁后，需要获取组件的某些信息。这家伙是不是还看源码了，有这种骚操作，他的代码是这样的：

<template>

  <div class="demo-container">

    <h2>动态组件加载监控</h2>

    <div class="status">当前组件状态：{{ componentStatus }}</div>

    

    <div class="controls">

      <button @click="loadComponent('ComponentA')">加载组件A</button>

      <button @click="loadComponent('ComponentB')">加载组件B</button>

      <button @click="unloadComponent">卸载组件</button>

    </div>

    

    <!-- 小李写的代码 -->

    <component 

      :is="currentComponent" 

      v-if="currentComponent"

      @vue:mounted="handleMounted"

      @vue:updated="handleUpdated"

      @vue:beforeUnmount="handleBeforeUnmount"

    />

  </div>

</template>



<script setup>

import { ref } from 'vue'



const currentComponent = ref(null)

const componentStatus = ref('无组件')



const handleMounted = () => {

  componentStatus.value = '✅ 组件已挂载'

  console.log('组件挂载完成')

}



const handleUpdated = () => {

  componentStatus.value = '🔄 组件已更新'

  console.log('组件更新完成')

}



const handleBeforeUnmount = () => {

  componentStatus.value = '❌ 组件即将卸载'

  console.log('组件即将卸载')

}



const loadComponent = (name) => {

  currentComponent.value = name

}



const unloadComponent = () => {

  currentComponent.value = null

  componentStatus.value = '无组件'

}

</script>

我仔细分析了一下，在这个动态组件的场景下，@vue:mounted确实有它的优势。最大的好处是只需要在父组件一个地方处理，不用去修改每个可能被动态加载的子组件。想象一下，如果有十几个不同的组件都可能被动态加载，你得在每个组件里都加上emit事件，维护起来确实麻烦。

而用@vue:mounted的话，所有的生命周期监听逻辑都集中在父组件这一个地方，代码看起来更集中，也更好管理。

但是，我心里还是有疑虑：这个语法为什么在官方文档里找不到？

深入探索：未文档化的功能

经过一番搜索，我在Vue的GitHub讨论区找到了答案。原来这个功能确实存在，但Vue核心团队明确表示：

"这个功能不是为用户应用程序设计的，这就是为什么我们决定不文档化它。"

引用来源：github.com/orgs/vuejs/…

换句话说：

• ✅ 这个功能确实存在且能用


• ❌ 但官方不保证稳定性


• ⚠️ 可能在未来版本中被移除


• 🚫 不推荐在生产环境使用

我们来看一下vue迁移文档中关于Vnode的部分，关键点我用下划线标红了。有趣的是这个@vue：[生命周期]语法不仅可以用在组件上，也可以用在所有虚拟节点中。

虽然在Vue 3迁移指南中有提到从@hook:（Vue 2）改为@vue:（Vue 3）的变化，但这更多是为了兼容性考虑，而不是鼓励使用。

为什么小李的代码"看起来"没问题？

回到小李的动态组件场景，@vue:mounted确实解决了问题：

但问题在于，这是一个不稳定的API，随时可能被移除。

我给出的review意见

考虑到安全性和稳定性，还是以下方案靠谱

方案一：子组件主动汇报（推荐）

虽然需要修改子组件，但这是最可靠的方案：

<!-- ComponentA.vue -->

<template>

  <div class="component-a">

    <h3>我是组件A</h3>

    <button @click="counter++">点击次数: {{ counter }}</button>

  </div>

</template>



<script setup>

import { ref, onMounted, onUpdated, onBeforeUnmount } from 'vue'



const emit = defineEmits(['lifecycle'])

const counter = ref(0)



onMounted(() => {

  emit('lifecycle', { type: 'mounted', componentName: 'ComponentA' })

})



onUpdated(() => {

  emit('lifecycle', { type: 'updated', componentName: 'ComponentA' })

})



onBeforeUnmount(() => {

  emit('lifecycle', { type: 'beforeUnmount', componentName: 'ComponentA' })

})

</script>

<!-- ComponentB.vue -->

<template>

  <div class="component-b">

    <h3>我是组件B</h3>

    <input v-model="text" placeholder="输入文字">

    <p>{{ text }}</p>

  </div>

</template>



<script setup>

import { ref, onMounted, onUpdated, onBeforeUnmount } from 'vue'



const emit = defineEmits(['lifecycle'])

const text = ref('')



onMounted(() => {

  emit('lifecycle', { type: 'mounted', componentName: 'ComponentB' })

})



onUpdated(() => {

  emit('lifecycle', { type: 'updated', componentName: 'ComponentB' })

})



onBeforeUnmount(() => {

  emit('lifecycle', { type: 'beforeUnmount', componentName: 'ComponentB' })

})

</script>

父组件使用：

<component 

  :is="currentComponent" 

  v-if="currentComponent"

  @lifecycle="handleLifecycle"

/>



<script setup>

const handleLifecycle = ({ type, componentName }) => {

  const statusMap = {

    mounted: '✅ 已挂载',

    updated: '🔄 已更新', 

    beforeUnmount: '❌ 即将卸载'

  }

  componentStatus.value = `${componentName} ${statusMap[type]}`

  console.log(`${componentName} ${type}`)

}

</script>

优点：稳定可靠，官方推荐

缺点：需要修改每个子组件，有一定的重复代码

方案二：通过ref访问（适合特定场景）

如果你确实需要访问组件实例：

<component 

  :is="currentComponent" 

  v-if="currentComponent"

  ref="dynamicComponentRef"

/>



<script setup>

import { ref, watch, nextTick } from 'vue'



const dynamicComponentRef = ref(null)



// 监听组件变化

watch(currentComponent, async (newComponent) => {

  if (newComponent) {

    await nextTick()

    console.log('组件实例:', dynamicComponentRef.value)

    componentStatus.value = '✅ 组件已挂载'

    // 可以访问组件的方法和数据

    if (dynamicComponentRef.value?.someMethod) {

      dynamicComponentRef.value.someMethod()

    }

  }

}, { immediate: true })

</script>

优点：可以直接访问组件实例和方法

缺点：只能监听到挂载，无法监听更新和卸载

方案三：provide/inject（深层通信）

如果是复杂的嵌套场景，组件层级深的时候我们可以使用这个：

<!-- 父组件 -->

<script setup>

import { provide, ref } from 'vue'



const componentStatus = ref('无组件')



const lifecycleHandler = {

  onMounted: (name) => {

    componentStatus.value = `✅ ${name} 已挂载`

    console.log(`${name} 已挂载`)

  },

  onUpdated: (name) => {

    componentStatus.value = `🔄 ${name} 已更新`

    console.log(`${name} 已更新`)

  },

  onBeforeUnmount: (name) => {

    componentStatus.value = `❌ ${name} 即将卸载`

    console.log(`${name} 即将卸载`)

  }

}



provide('lifecycleHandler', lifecycleHandler)

</script>



<template>

  <div>

    <div class="status">{{ componentStatus }}</div>

    <component :is="currentComponent" v-if="currentComponent" />

  </div>

</template>

<!-- 子组件 -->

<script setup>

import { inject, onMounted, onUpdated, onBeforeUnmount } from 'vue'



const lifecycleHandler = inject('lifecycleHandler', {})

const componentName = 'ComponentA' // 每个组件设置自己的名称



onMounted(() => {

  lifecycleHandler.onMounted?.(componentName)

})



onUpdated(() => {

  lifecycleHandler.onUpdated?.(componentName)

})



onBeforeUnmount(() => {

  lifecycleHandler.onBeforeUnmount?.(componentName)

})

</script>

优点：适合深层嵌套，可以跨多层传递

各种方案的对比

总结

通过这次code review，我们学到了：

虽然@vue:[生命周期]在动态组件场景下确实好用，但从工程化角度考虑，还是建议逐步迁移到官方推荐的方案。毕竟，今天的便利可能是明天的技术债务。

当然，如果你正在维护老项目，且迁移成本较高，也可以考虑先保留现有代码，但一定要有明确的迁移计划和风险控制措施。

恩恩……懦夫的味道

前言

我偶然间发现一个宝藏网站，aicut.online 是一款基于本地AI实现的背景移除工具。
我研究了一下，发现他是使用了u2net模型 + onnxruntime-web实现的本地模型推理能力，下面简单介绍一下这些概念。

github：github.com/yuedud/aicu…

体验网址：aicut.online

概念

WebAssembly

• 基本概念：  WebAssembly 是一种低级的二进制指令格式，设计目标是成为一种高效、可移植、安全的编译目标，使其能在现代 Web 浏览器中运行。你可以把它想象成一种为 Web 设计的“通用机器语言”。


• 核心特点：
  
  
  
  
  • 高性能：  它不是解释执行的（像传统 JavaScript），而是被设计成可以以接近原生代码的速度运行。它提供线性内存模型和低级操作，便于编译器优化。
  
  
  • 可移植性：  Wasm 模块是平台无关的，可以在支持 Wasm 的任何浏览器（或运行时环境）中运行，无需修改。
  
  
  • 安全性：  它在内存安全的沙箱环境中执行，无法直接访问主机操作系统或 DOM。只能通过明确定义的 API 与宿主环境（如浏览器）交互。
  
  
  • 多语言支持：  开发者可以使用 C、C++、Rust、Go 等多种语言编写代码，然后编译成 Wasm 模块，在浏览器中运行。这使得重用现有的高性能库或编写对性能要求极高的新功能成为可能。
  
  
  
  


• 目标：  解决 JavaScript 在处理计算密集型任务（如游戏物理引擎、视频编辑、3D渲染、科学计算、加密解密、机器学习模型推理等）时性能不足的问题，同时保持 Web 的安全性和可移植性。


• 简单比喻：  就像为浏览器引入了一个新的、更接近硬件的“CPU 指令集”，让浏览器能直接运行编译好的高性能代码。

Onnxruntime-Web

• 基本概念：  onnxruntime-web 是 ONNX Runtime 的一个专门构建的版本，目的是让开发者能够直接在 Web 浏览器中运行 ONNX 格式的机器学习模型。


• 核心特点：
  
  
  
  
  • ONNX 支持：  它理解并执行符合 ONNX 标准的模型文件。ONNX 是一个开放的模型格式，允许模型在各种框架之间转换和互操作。
  
  
  • 浏览器内推理：  最大的价值在于它允许 ML 模型的推理计算完全在用户的浏览器中发生，无需依赖远程服务器。这带来了低延迟、隐私保护（数据无需离开用户设备）和离线能力。
  
  
  • 多种后端执行引擎：  为了适应不同的浏览器环境、设备性能和模型需求，它提供了多种执行引擎后端：
    
    
    
    
    • WebAssembly (Wasm)：  提供接近原生的性能，是主要的跨浏览器高性能后端。支持单线程和多线程（需浏览器支持）。
    
    
    • WebGL：  利用 GPU 进行加速，尤其适合某些计算模式与图形处理相似的模型（如卷积神经网络）。性能潜力高，但兼容性和精度可能不如 Wasm。
    
    
    • WebNN (预览/实验性)：  旨在利用操作系统提供的原生 ML 硬件加速（如 NPU）。性能潜力最高，但目前浏览器支持有限。
    
    
    • JavaScript (CPU)：  兼容性最好但速度最慢的后备方案。
    
    
    
    
  
  
  • 优化：  包含针对 Web 环境（特别是 Wasm 和 WebGL）的特定优化，以提升模型在浏览器中的运行效率。
  
  
  
  


• 目标：  降低在 Web 应用中集成和部署机器学习模型的门槛，提供高性能、跨平台的浏览器内推理能力。


• 简单比喻：  它是一个专门为浏览器定制的“机器学习模型运行引擎”，支持多种“驱动方式”（Wasm, WebGL, WebNN），让各种 ONNX 格式的模型能在网页里“活”起来并高效工作。

u2net

• 基本概念：  u2net 是一种深度学习神经网络架构，特别设计用于显著目标检测任务。它的核心任务是从图像或视频中精确地分割出最吸引人注意的前景目标。


• 核心特点：
  
  
  
  
  • 嵌套 U 型结构：  这是其名称的由来（U^2-Net）。它包含一个主 U 型编码器-解码器网络，并且在每个阶段内部又嵌套了更小的 U 型块（ReSidual U-blocks, RSU）。这种设计能更有效地捕捉不同尺度的上下文信息，同时保持高分辨率的细节。
  
  
  • 多尺度特征融合：  通过嵌套的 RSU 块和跳跃连接，模型能融合来自不同深度和尺度的特征，这对精确描绘目标边界至关重要。
  
  
  • 高效性：  相比一些非常深的网络（如 ResNet），u2net 结构相对轻量，但性能优异。
  
  
  • 应用广泛：  主要用于高质量的图像/视频前景背景分割（抠图）。典型的应用包括：
    
    
    
    
    • 移除或替换图片/视频背景
    
    
    • 创建透明 PNG 图像
    
    
    • 人像分割
    
    
    • 视频会议虚拟背景
    
    
    • 图像编辑工具
    
    
    
    
  
  
  
  


• 目标：  提供一种高效且准确的架构，解决图像中前景目标的精确分割问题。


• 简单比喻：  u2net 是一个专门训练出来的“智能剪刀手”，它能自动识别图片里最重要的主体（比如人、动物、物体），并用极高的精度把它从背景中“剪”出来。

技术架构

架构图

+-------------------------------------------------------+

|                 **用户层 (Web Application)**          |

+-------------------------------------------------------+

|  - 用户界面 (HTML, CSS)                               |

|  - 业务逻辑 (JavaScript/TypeScript)                   |

|    * 捕获用户输入 (e.g., 上传图片/视频流)                |

|    * 调用 `onnxruntime-web` API 执行推理               |

|    * 处理输出 (e.g., 显示抠图结果，合成新背景)            |

+-------------------------------------------------------+

                            ↓ (JavaScript API 调用)

+-------------------------------------------------------+

|               **模型服务层 (ONNX Runtime Web)**        |

+-------------------------------------------------------+

|  - **onnxruntime-web** 库 (JavaScript)                |

|    * 加载并解析 **u2net.onnx** 模型文件                  |

|    * 管理输入/输出张量 (Tensor) 的内存                    |

|    * 调度计算任务到下层执行引擎                           |

|    * 提供统一的 JavaScript API 给上层应用                |

+-------------------------------------------------------+

                            ↓ (选择最佳后端执行)

+-------------------------------------------------------+

|            **执行引擎层 (Runtime Backends)**          |

+-------------------------------------------------------+

|  +---------------------+  +---------------------+     |

|  | **WebAssembly (Wasm)** | **WebGL**          | ...  |

|  +---------------------+  +---------------------+     |

|  | * **核心加速引擎**   | * 利用GPU加速            |      |

|  | * 接近原生CPU速度    | * 适合特定计算模式        |      |

|  | * 安全沙箱环境       | * 兼容性/精度限制         |      |

|  | * 多线程支持 (可选)  |                         |      |

|  +---------------------+  +---------------------+     |

|  **首选后端**           **备选/补充后端**                |

+-------------------------------------------------------+

                            ↓ (执行编译后的低级代码)

+-------------------------------------------------------+

|              **模型层 (U2Net 神经网络)**              |

+-------------------------------------------------------+

|  - **u2net.onnx** 模型文件                             |

|    * 包含训练好的 u2net 网络架构 (嵌套U型结构)            |

|    * 包含网络权重参数                                   |

|    * 格式：开放神经网络交换格式 (ONNX)                    |

|    * 任务：显著目标检测 / 图像抠图                        |

+-------------------------------------------------------+

                            ↓ (模型文件来源)

+-------------------------------------------------------+

|            **资源层 (Browser Environment)**           |

+-------------------------------------------------------+

|  - 模型文件存储: HTTP Server / IndexedDB / Cache API  |

|  - 浏览器提供: WebAssembly 引擎, WebGL API, WebNN API |

|  - 计算资源: CPU (Wasm), GPU (WebGL), NPU (WebNN)     |

+-------------------------------------------------------+

详细解释

源代码解析

Github：github.com/yuedud/aicu…

目录解析

public

public是存放静态资源的地方，存储了onnx模型和一些静态的资源图片

src

src是核心代码存放的地方，下面我们只来介绍一下关于抠图部分的代码，核心代码在src/components/ImageSegmentation.js

可以看到在进入网站之后，第一时间就开始加载模型,同时使用了indexedDB进行了模型缓存，二次使用的时候直接用indexedDB里获取模型，由于模型较大，所以加载时间会比较长。

  // 加载模型

  useEffect(() => {

    const loadModel = async () => {

      try {

        setError(null);

        const db = await openDB();

        let modelData = await getModelFromDB(db);

        if (modelData) {

          console.log('从IndexedDB加载模型.');

        } else {

          console.log('IndexedDB中未找到模型，从网络下载...');

          const response = await fetch('./u2net.onnx');

          if (!response.ok) {

            throw new Error(`网络请求模型失败: ${response.status} ${response.statusText}`);

          }

          modelData = await response.arrayBuffer();

          console.log('模型下载完成，存入IndexedDB...');

          await storeModelInDB(db, modelData);

          console.log('模型已存入IndexedDB.');

        }



        const newSession = await ort.InferenceSession.create(modelData, {

          executionProviders: ['wasm'], // 'webgl' 或 'wasm'

          graphOptimizationLevel: 'all',

        });

        setSession(newSession);

        console.log('ONNX模型加载并初始化成功');

      } catch (e) {

        console.error('ONNX模型加载或初始化失败:', e);

        setError(`模型处理失败: ${e.message}`);

      }

    };

    loadModel();

  }, []);

然后可以看到在上传完图片之后进行了图片的预处理，主要是将图片转换成了模型的入参Tensor

  const preprocess = async (imgElement) => {

    const canvas = document.createElement('canvas');

    const modelWidth = 320;

    const modelHeight = 320;

    canvas.width = modelWidth;

    canvas.height = modelHeight;

    const ctx = canvas.getContext('2d');

    ctx.drawImage(imgElement, 0, 0, modelWidth, modelHeight);

    const imageData = ctx.getImageData(0, 0, modelWidth, modelHeight);

    const data = imageData.data;



    const float32Data = new Float32Array(1 * 3 * modelHeight * modelWidth);

    const mean = [0.485, 0.456, 0.406];

    const std = [0.229, 0.224, 0.225];



    for (let i = 0; i < modelHeight * modelWidth; i++) {

      float32Data[i] = (data[i * 4] / 255 - mean[0]) / std[0]; // R

      float32Data[i + modelHeight * modelWidth] = (data[i * 4 + 1] / 255 - mean[1]) / std[1]; // G

      float32Data[i + 2 * modelHeight * modelWidth] = (data[i * 4 + 2] / 255 - mean[2]) / std[2]; // B

    }

    return new ort.Tensor('float32', float32Data, [1, 3, modelHeight, modelWidth]);

  };

然后就是将模型的入参放到模型中去推理

  const runSegmentation = async () => {

    if (!image || !session) {

      setError('请先上传图片并等待模型加载完成。');

      return;

    }

    setError(null);

    setOutputImage(null);



    try {

      const imgElement = imageRef.current;

      if (!imgElement) {

        throw new Error('图片元素未找到。');

      }



      // 确保图片完全加载

      if (!imgElement.complete) {

        await new Promise(resolve => { imgElement.onload = resolve; });

      }



      const inputTensor = await preprocess(imgElement);

      const feeds = { 'input.1': inputTensor }; // 确保输入名称与模型一致

      const results = await session.run(feeds);

      const outputTensor = results[session.outputNames[0]];

      const outputDataURL = postprocess(outputTensor, imgElement);

      setOutputImage(outputDataURL);

    } catch (e) {

      console.error('抠图失败:', e);

      setError(`抠图处理失败: ${e.message}`);

    }

  };

当模型推理完之后，进行模型推理结果的后处理，主要是将alpha通道和原图片进行合成

  // 后处理：将模型输出转换为透明背景图像

  const postprocess = (outputTensor, originalImgElement) => {

    const outputData = outputTensor.data;

    const [height, width] = outputTensor.dims.slice(-2); // 通常是 [1, 1, H, W]



    const canvas = document.createElement('canvas');

    canvas.width = originalImgElement.naturalWidth; // 使用原始图片尺寸

    canvas.height = originalImgElement.naturalHeight;

    const ctx = canvas.getContext('2d');



    // 1. 绘制原始图片

    ctx.drawImage(originalImgElement, 0, 0, canvas.width, canvas.height);

    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);

    const pixelData = imageData.data;



    // 2. 创建一个临时的canvas来处理和缩放mask

    const maskCanvas = document.createElement('canvas');

    maskCanvas.width = width; // U2Net输出mask的原始宽度

    maskCanvas.height = height; // U2Net输出mask的原始高度

    const maskCtx = maskCanvas.getContext('2d');

    const maskImageData = maskCtx.createImageData(width, height);



    // 归一化mask值 (通常U2Net输出在0-1之间，但最好检查一下)

    let minVal = Infinity;

    let maxVal = -Infinity;

    for (let i = 0; i < outputData.length; i++) {

      minVal = Math.min(minVal, outputData[i]);

      maxVal = Math.max(maxVal, outputData[i]);

    }



    for (let i = 0; i < height * width; i++) {

      let value = (outputData[i] - minVal) / (maxVal - minVal); // 归一化到 0-1

      value = Math.max(0, Math.min(1, value)); // 确保在0-1范围内

      const alpha = value * 255;

      maskImageData.data[i * 4] = 0;     // R

      maskImageData.data[i * 4 + 1] = 0; // G

      maskImageData.data[i * 4 + 2] = 0; // B

      maskImageData.data[i * 4 + 3] = alpha; // Alpha

    }

    maskCtx.putImageData(maskImageData, 0, 0);



    // 3. 将缩放后的mask应用到原始图像的alpha通道

    // 创建一个新的canvas用于绘制最终结果，并将mask缩放到原始图像尺寸

    const finalMaskCanvas = document.createElement('canvas');

    finalMaskCanvas.width = originalImgElement.naturalWidth;

    finalMaskCanvas.height = originalImgElement.naturalHeight;

    const finalMaskCtx = finalMaskCanvas.getContext('2d');

    finalMaskCtx.drawImage(maskCanvas, 0, 0, finalMaskCanvas.width, finalMaskCanvas.height);

    const finalMaskData = finalMaskCtx.getImageData(0, 0, finalMaskCanvas.width, finalMaskCanvas.height);



    for (let i = 0; i < pixelData.length / 4; i++) {

      pixelData[i * 4 + 3] = finalMaskData.data[i * 4 + 3]; // 将mask的alpha通道应用到原始图片

    }

    ctx.putImageData(imageData, 0, 0);



    return canvas.toDataURL();

  };

至此将合成的图片渲染到屏幕上就可以了。

如何启动

首先我们要对仓库进行克隆

git clone https://github.com/yuedud/aicut.git

然后安装依赖

npm install

然后直接启动项目

npm start

启动之后你就可以在本地尝试背景移除工具。

引言

🤡 年初立过的Flag中包含一条：开发开源个人效率APP——惜命，这都半年过去了，搞得怎么样啦~

🤣 em... 有在做的啦~

就是进度有点慢，搞了这么久，还TM在 搞天气的模块，em... 光UI都改几次了，第二版UI：

第三版UI：

归根结底还是一个字 "乱+完美主义"，对自己想要的目标非常模糊，以往都是 产品经理捋清交互出原型，设计师出设计稿，我照葫芦画瓢写界面就好了。🐶 而现在这两个都要我自己来做，产品功能还好，我自己梳理清楚逻辑就行，但 UI设计 这块，我是真的一窍不通，完全无从下手。🤡 上面两个界面都是写提示词让 Cursor 直接写的页面，主打一个 随缘，但也带来了问题：页面风格的不一致，上一个页面是 Material 风格，下一个页面秒变 iOS 风格，🙃 让人有一种撕裂感。

🤔 一种解法是写一堆长篇大论的 rule 来严格限制 Cursor 生成的画面风格，另一种就是自己整 UI设计稿 (原型)，我选择了后者，学PS是不可能的🐶，周期太长了，搜了圈"简单UI设计工具"，很多人安利用 Figma，直接B站搜 "Figma速成"，选了这个快速看完：

《Figma新手教程2025｜30分钟高效掌握Figma基础操作与UI设计流程》

😄 照着Up主的视频走了一遍案例，工具操作确实不复杂，然后觉得自己强得可怕💪，新建惜命项目，然后对着空白页面，我又陷入了呆滞，TM该怎么开始 ？？？根本不知道要弄成什么样的页面...

🤡 归根结底：工具是"术"，设计理论是"道" ，关于道我一点 经验积累 都没有，这需要大量的看和模仿练习。自己画不出来，但是画得好不好看，我是能评判的，突然有一个想法：🤔 能不能让 AI 出 线框图，我再自己调整和细化？😳 Figma 是有AI功能的，但现在只有 付费用户 能用，白嫖教育版 没法耍咯：

😏 没法用官方的AI功能，但有 MCP Server 啊！官方有一个 Dev Mode MCP，试了下不太好用🤷‍♀️：

《Introducing our Dev Mode MCP server: Bringing Figma int0 your workflow》

《Guide to the Dev Mode MCP Server》

🐶 也可能不太符合我们的场景，直接在它的 插件商店 搜了下，发现这个：Cursor Talk To Figma MCP Plugin

👍 这插件还是开源的：

sonnylazuardi/cursor-talk-to-figma-mcp

插件效果视频：

😋 体验了一下，确实是我们想要的 嘴遁出Figma设计稿的MCP，接着详细介绍下怎么用~

安装

① Clone 项目到本地

git clone https://github.com/sonnylazuardi/cursor-talk-to-figma-mcp.git

顺手让 Cursor 生成一份 详细的项目结构说明文档：

😄 不难看出这个MCP主要由三部分组成：MCP服务、WebSocket通信、Figma插件，对具体实现感兴趣的童鞋，可以自行看下生成的文档：

《项目结构详细说明文档》

② 安装 Bun

安装完，重启下 PowerShell，键入 bun -v 查看版本号，确定是否安装成功：

③ 初始化项目

接着 cd 到项目的根目录，执行 bun setup 进行 初始化，🐶 理论上是这样，但 Windows 运行会直接报错，原因是系统 不支持直接运行.sh脚本文件：

🤡 解法就是：手动执行 setup.sh 脚本里的命令：

😶 其实就是创建下 .cursor/mcp.json文件 和 执行 bun install (😄 搞不定就问Cursor~)，安装完后：

④ 启动Websocket

键入 bun socket 启动 Websocket：

⑤ Cursor 配置 MCP

Chat Settings → MCP Tools →TalkToFigma (一般默认有的，没有自己就配下，很简单) → 启用

🤡 我这里启用完是红的 (正常是绿色的)，说明有问题：

试了下文档中提到的 windows wsl 要去掉这行的注释：

然后 Ctrl+C 停掉 WebSocket 服务，然后再执行 bun socket，依旧爆红... 🐶 折腾了一会儿发现，是 Cursor 终端没有更新 (装了Bun要重启)，重启下 Cursor 就好了：

⑥ 安装Figma桌面端 + 配置Figma 插件

点击用户头像，下拉找到 Get desktop app 进行下载安装：

打开桌面端，进入 要生成设计稿的Page，点击 Actions：

底下会有弹窗，依次点击：Plugins & widgets → Import from manifest..

然后按照下图中的路径选中 manifest.json 文件:

接着点击这个插件：

会弹窗，显示正在连接上面启动的 Websocket 服务 (如果失败的话，重启试试，在 Cursor 的终端直接执行 bun socket！)

这个 Channel ID 等下 Cursor 也要用到，终端也会输出：

Cursor 切 Agent 模式，输入提示词进行链接，示例：

• 使用channel: channel ID 连接服务和Figma进行对话


• Talk to Figma, channel [您的Channel ID]

连接后会有输出信息：

接着让它开始整设计稿，弄个 简单的登录页 看看效果，Cursor 疯狂输出：

另一边 Figma桌面端 也是热火朝天的堆砌UI：

最终输出结果：

🐶 左上角这个 表单区域 有点迷，还有登录按钮上那个 紫色半透明圆形，Shift + 鼠标 选中 这三组件：

Cursor 的回答：

完全不懂这什么设计...

接着让它删掉这三，移动下组件，添加一个同意隐私协议的组件：

最终效果：

🐂🍺，Cursor 通过这个 MCP，不止能读，还能操作设计稿 👍。另外，除了用 Cursor 外，其它支持 MCP 调用的工具也是可以用的，自己做下配置就好，如：Trae、Cursor，甚至是 Cherry Studio：

修改后的设计稿：

以上就是这个MCP的基本用法，🤔 感觉很适合初期，没什么灵感时，让它来搭建基本的主体框架，然后自己再此基础上做精细化的调整。一些常规命令示例：

• create_rectangle：创建一个新的矩形。


• create_ellipse：创建一个新的椭圆或圆形。


• create_text：创建一个新的文本元素。


• create_frame：创建一个新的框架。


• set_fill_color：设置节点的填充颜色。


• set_stroke_color：设置节点的描边颜色。


• move_node：移动节点到新位置。


• resize_node：调整节点大小。

• set_font_name：设置文本节点的字体名称和样式。


• set_font_size：设置文本节点的字体大小。


• set_font_weight：设置文本节点的字体粗细。


• set_letter_spacing：设置文本节点的字母间距。


• set_line_height：设置文本节点的行高。


• set_paragraph_spacing：设置文本节点的段落间距。

别人分享的提示词

💁‍♂️ 有 生成HTML页面 需求的童鞋，可以在提示词里让 Cursor 直接生成对应代码，这是别处的看到的提示词：

获取Profile的所有信息，并根据设计稿信息进行开发

- 使用HTML，Tailwindcss

- 苹果、google等大厂设计配色风格

- 生成的文件保存到`figma-demo`目录下

- 无法下载的图片可以使用`export_node_as_image`生成或者使用unsplash

😶 没这个需求，就不尝试了，生成代码也是耗费点数的，Cursor Pro 一个月才500点，根本不够花，能省一点是一点🤷‍♀️。还看到一个更全提示词，也CV下，真正需要用到的时候参考着改就好了：

你是一名大厂资深UI/UX设计专家，拥有丰富的移动端应用设计经验，精通苹果人机界面设计指南。请帮我完成一款名为`百草集`iOS App的原型设计。请按照以下要求输出一套完整的高质量Figma APP原型图：

1. 设计目标

- 创建符合苹果人机界面指南(Human Interface Guidelines)的iOS原生风格设计

- 面向中草药爱好者和自然探索者，设计简洁直观的界面

- 确保原型图能直观展示APP的功能流程和用户体验

2. 用户需求分析

- 目标用户群体：对中草药、植物学、自然疗法感兴趣的用户，包括初学者和爱好者

- 用户痛点：缺乏系统化的中草药知识、难以识别野外植物及其药用价值、无法记录和整理自己的植物观察

- 用户期望：直观的植物识别功能、个性化学习路径和推荐、社区互动和知识分享

3. 功能规划

- 主页：提供快速访问草本图鉴、观察记录和社区的入口

- 草本图鉴：分类别展示中草药，配有详细图文介绍和音频讲解

- 观察记录：记录用户在野外的植物观察，支持拍照识别和地理位置标记

- 配方推荐：基于用户兴趣推荐草本配方和使用方法

- 社区互动：分享观察、交流经验、获取专业指导

- 设置：个人信息管理、通知设置等

4. 设计规范

- 使用最新的iOS设计元素和交互模式

- 遵循iPhone 6尺寸规格(宽度750px, 高度1624px)

- 采用自然、清新的配色方案，符合草本主题氛围

- 重视无障碍设计，确保文字对比度和交互区域大小合适

- 使用简洁清晰的图标和插图风格，融入自然元素

5. 原型图呈现要求

- 使用Figma创建所有设计稿

- 为每个功能设计一个到两个屏幕，如：登录/注册、主页、草本图鉴、观察记录、配方推荐、社区互动、设置

- 每行最多排列三个屏幕，之后换行继续展示

- 为每个屏幕添加设备边框和阴影，不要遮住屏幕内的内容

- 为每个屏幕添加简短说明，解释其功能和设计考虑

6. 关键用户旅程原型屏幕

- 6.1 登录/注册屏幕

- 功能：用户可以通过邮箱、手机号或社交媒体账号登录/注册

- 设计考虑：使用简洁的表单设计，提供快速登录选项，符合iOS设计规范

- 6.2 主页屏幕

- 功能：展示主要功能入口，包括草本图鉴、观察记录、配方推荐和社区动态

- 设计考虑：采用卡片式布局，突出视觉重点，使用自然色调

- 6.3 草本图鉴屏幕

- 功能：分类展示中草药，支持搜索和筛选

- 设计考虑：使用网格布局，提供清晰的视觉层次，支持图片预览

- 6.4 植物详情屏幕

- 功能：展示植物的详细信息，包括图片、文字介绍、音频讲解

- 设计考虑：采用上下滑动的单页布局，提供丰富的多媒体内容

- 6.5 观察记录屏幕

- 功能：记录用户的植物观察，支持拍照识别和地理位置标记

- 设计考虑：使用时间线布局，提供直观的记录展示方式

- 6.6 配方推荐屏幕

- 功能：基于用户兴趣推荐草本配方，支持收藏和分享

- 设计考虑：采用卡片式布局，突出配方的视觉吸引力

- 6.7 社区互动屏幕

- 功能：用户可以发布动态、浏览社区内容、与其他用户互动

- 设计考虑：使用流式布局，支持点赞、评论等社交互动

- 6.8 设计规范概述

- 配色方案：主色调为自然绿色(#4CAF50)，辅助色为棕色(#795548)和黄色(#FFC107)

- 图标：采用简洁的线性图标风格，融入自然元素

- 无障碍设计：确保文字对比度符合WCAG 2.1标准，交互区域大小合适

- 动效：使用微妙的过渡动画，提升用户体验但不干扰主要功能

😄 设计效果看起还是挺不错的：

😏 Figma 免费版：适合个人或小型团队，支持无限文件存储，但只能创建3个项目，最多2人协作，版本历史仅保留30天，不能共享设计文件进行多人实时编辑，离线时无法使用。专业版：适合2人以上设计团队，取消项目和编辑者数量限制，版本历史无限，支持团队组件库、Slack集成、私人项目等高级协作功能，价格约12-16美元/月/人（年付较便宜），可按月或按年订阅。😄 限于篇幅，怎么 白嫖专业版 可以参见另外一篇文章~

前端开发者应该对 Ant Design 不陌生，特别是 React 开发者，antd 应该是组件库的标配了。

近年来随着 AI 的爆火，凡是想要接入 AI 的都想搞一套自己的 AI 交互界面。专注于 AI 场景组件库的开源项目倒不是很多见，近日 antd 宣布推出 Ant Design X 1.0 🚀 ，这是一个基于 Ant Design 的全新 AGI 组件库，使用 React 构建 AI 驱动的用户交互变得更简单了，它可以无缝集成 AI 聊天组件和 API 服务，简化 AI 界面的开发流程。

该项目已在 Github 开源，拥有 1.6K Star！

看了网友的评论，看来大家还是需要的！当前的 Ant Design X 只支持 React 项目，看来 Vue 开发者要羡慕了...

ant-design-x 特性

• 🌈 源自企业级 AI 产品的最佳实践：基于 RICH 交互范式，提供卓越的 AI 交互体验


• 🧩 灵活多样的原子组件：覆盖绝大部分 AI 对话场景，助力快速构建个性化 AI 交互页面


• ⚡ 开箱即用的模型对接能力：轻松对接符合 OpenAI 标准的模型推理服务


• 🔄 高效管理对话数据流：提供好用的数据流管理功能，让开发更高效


• 📦 丰富的样板间支持：提供多种模板，快速启动 LUI 应用开发


• 🛡 TypeScript 全覆盖：采用 TypeScript 开发，提供完整类型支持，提升开发体验与可靠性


• 🎨 深度主题定制能力：支持细粒度的样式调整，满足各种场景的个性化需求

支持组件

以下圈中的部分为 ant-design-x 支持的组件。可以看到主要都是基于 AI Chat 场景的组件设计。现在你可以基于这些组件自由组装搭建一个自己的 AI 界面。

ant-design-x 也提供了一个完整 AI Chat 的 Demo 演示，可以查看 Demo 的代码并直接使用。

更多组件详细内容可参考 组件文档

使用

以下命令安装 @ant-design/x 依赖。

注意，ant-design-x 是基于 Ant Design，因此还需要安装依赖 antd。

yarn add antd @ant-design/x

import React from 'react';

import {

  // 消息气泡

  Bubble,

  // 发送框

  Sender,

} from '@ant-design/x';



const messages = [

  {

    content: 'Hello, Ant Design X!',

    role: 'user',

  },

];

const App = () => (

  <div>

    <Bubble.List items={messages} />

    <Sender />

  </div>

);



export default App;

Ant Design X 前生 ProChat

不知道有没有小伙伴们使用过 ProChat，这个库后面的维护可能会有些不确定性，其维护者表示 “24 年下半年后就没有更多精力来维护这个项目了，Github 上的 Issue 存留了很多，这边只能尽量把一些恶性 Bug 修复”

如上所示，也回答了其和 Ant Design X 的关系：ProChat 是 x 的前生，新用户请直接使用 x，老用户也请尽快迁移到 x。

感兴趣的朋友们可以去试试哦！

前言

最近感觉自己有点颓废，左思右想后觉得不能这样浪费时间，天天来摆烂。受到了群友的激励以及最近自己喜欢看小说。就想我能不能自己也做一款小说阅读器出来呢。在最开始的时候花了一段时间写了一个版本。当时用的是一个开源的接口，当我写好后使用了两天接口挂了我就只有大眼瞪小眼了。之后在 FlutterCandies里面咨询了群友，发现了一种使用外部提供书籍数据源的方法可以避免数据来源挂掉，说干就干vscode启动！

项目地址

github.com/fluttercand…

项目介绍

BITReader是一款基于Flutter实现的小说阅读器

当前功能包含：

• 源搜索：使用内置数据来源进行搜索数据（后续更新：用户可以自行导入来源进行源搜索


• 收藏书架


• 阅读历史记录


• 阅读设置：字号设置，字体颜色更改，自定义阅读背景（支持调色板自定义选择，支持image设置为背景


• 主题设置：支持九种颜色的主题样式


• 书籍详情：展示书籍信息以及章节目录等书籍信息

支持平台

项目截图

mac运行截图

windows运行截图

项目结构

lib

├── main.dart -- 入口

├── assets -- 本地资源生成

├── base -- 请求状态、页面状态

├── db -- 数据缓存

├── icons -- 图标

├── net -- 网络请求、网络状态

├── n_pages

    ├── detail -- 详情页

    ├── home -- 首页

    ├── search -- 全网搜索搜索页

    ├── history -- 历史记录 

    ├── read -- 小说阅读 

    └── like -- 收藏书架

├── pages  已废弃⚠

    ├── home -- 首页

    ├── novel -- 小说阅读

    ├── search -- 全网搜索

    ├── category -- 小说分类

    ├── detail_novel -- 小说详情

    ├── book_novel -- 书架、站源

    └── collect_novel -- 小说收藏

├── route -- 路由

└── theme -- 主题管理

    └── themes -- 主题颜色-9种颜色

├── tools -- 工具类 、解析工具、日志、防抖。。。

└── widget -- 自定义组件、工具 、加载、状态、图片 等。。。。。。

阅读器主要包含的模块

• 阅读显示：文本解析，对文本进行展示处理


• 数据解析： 数据源的解析，以及数据来源的解析（目前只支持简单数据源格式解析、后续可能会更新更多格式解析


• 功能：阅读翻页样式、字号、背景、背景图、切换章节、收藏、历史记录、本地缓存等

阅读显示

阅读文本展示我用的是extended_text因为支持自定义效果很好。

实现的效果把文本中 “ ” 引用起来的文本自定义成我自己想要的效果样式。

class MateText extends SpecialText {

  MateText(

    TextStyle? textStyle,

    SpecialTextGestureTapCallback? onTap, {

    this.showAtBackground = false,

    required this.start,

    required this.color,

  }) : super(flag, '”', textStyle, onTap: onTap);

  static const String flag = '“';

  final int start;

  final Color color;



  /// whether show background for @somebody

  final bool showAtBackground;



  @override

  InlineSpan finishText() {

    final TextStyle textStyle =

        this.textStyle?.copyWith(color: color) ?? const TextStyle();



    final String atText = toString();



    return showAtBackground

        ? BackgroundTextSpan(

            background: Paint()..color = Colors.blue.withOpacity(0.15),

            text: atText,

            actualText: atText,

            start: start,



            ///caret can move int0 special text

            deleteAll: true,

            style: textStyle,

            recognizer: (TapGestureRecognizer()

              ..onTap = () {

                if (onTap != null) {

                  onTap!(atText);

                }

              }))

        : SpecialTextSpan(

            text: atText,

            actualText: atText,

            start: start,

            style: textStyle,

            recognizer: (TapGestureRecognizer()

              ..onTap = () {

                if (onTap != null) {

                  onTap!(atText);

                }

              }));

  }

}

class NovelSpecialTextSpanBuilder extends SpecialTextSpanBuilder {

  NovelSpecialTextSpanBuilder({required this.color});

  Color color;

  set setColor(Color c) => color = c;

  @override

  SpecialText? createSpecialText(String flag,

      {TextStyle? textStyle,

      SpecialTextGestureTapCallback? onTap,

      int? index}) {

    if (flag == '') {

      return null;

    } else if (isStart(flag, AtText.flag)) {

      return AtText(

        textStyle,

        onTap,

        start: index! - (AtText.flag.length - 1),

        color: color,

      );

    } else if (isStart(flag, MateText.flag)) {

      return MateText(

        textStyle,

        onTap,

        start: index! - (MateText.flag.length - 1),

        color: color,

      );

    }

    // index is end index of start flag, so text start index should be index-(flag.length-1)

    return null;

  }

}

数据解析编码格式转换

首先数据是有不同的编码格式，否则我们直接展示可能会导致乱码问题。
先把数据给根据查找到的编码类型来做单独的处理转换。

/// 解析html数据 解码 不同编码

  static String parseHtmlDecode(dynamic htmlData) {

    String resultData = gbk.decode(htmlData);

    final charset = ParseSourceRule.parseCharset(htmlData: resultData) ?? "gbk";

    if (charset.toLowerCase() == "utf-8" || charset.toLowerCase() == "utf8") {

      resultData = utf8.decode(htmlData);

    }

    return resultData;

  }

 static String? parseCharset({

    required String htmlData,

  }) {   

    Document document = parse(htmlData);

  

    List<Element> metaTags = document.getElementsByTagName('meta').toList();

    for (Element meta in metaTags) {

      String? charset = meta.attributes['charset'];

      String content = meta.attributes['content'] ??

          ""; //<meta http-equiv="Content-Type" content="text/html; charset=utf-8">



      if (charset != null) {

        return charset; 

      }

      List<String> parts = content.split(';');

      for (String part in parts) {

        part = part.trim();

        if (part.startsWith('charset=')) {

          return part.split('=').last.trim();

        }

      }

    }



    return null; 

  }

数据结构解析-代码太多只展示部分

Document document = parse(htmlData);



    //

    List<Element> rootNodes = [];

    if (rootSelector != null && rootSelector.isNotEmpty) {

      // 

      List<String> rootParts = rootSelector.split(RegExp(r'[@>]'));

      String initialPart = rootParts[0].trim();



      //

      if (initialPart.startsWith('class.')) {

        String className = initialPart.split('.')[1];

        rootNodes = document.getElementsByClassName(className).toList();

      } else if (initialPart.startsWith('.')) {

        String className = initialPart.substring(1);

        rootNodes = document.getElementsByClassName(className).toList();

      } else if (initialPart.startsWith('#')) {

        String idSelector = initialPart.substring(1);

        rootNodes = document.querySelectorAll('#$idSelector').toList();

      } else if (initialPart.startsWith('id.')) {

        String idSelector = initialPart.split('.')[1];

        var element = document.querySelector('#$idSelector');

        if (element != null) {

          rootNodes.add(element);

        }

      } else if (initialPart.contains(' ')) {

        String idSelector = initialPart.replaceAll(' ', ">");

        var element = document.querySelector(idSelector);

        if (element != null) {

          rootNodes.add(element);

        }

      } else {

        rootNodes = document.getElementsByTagName(initialPart).toList();

      }

存储工具类 - 部分代码

/// shared_preferences

class PreferencesDB {

  PreferencesDB._();

  static final PreferencesDB instance = PreferencesDB._();

  SharedPreferencesAsync? _instance;

  SharedPreferencesAsync get sps => _instance ??= SharedPreferencesAsync();



  /*** APP相关 ***/



  /// 主题外观模式

  ///

  /// system(默认)：跟随系统 light：普通 dark：深色

  static const appThemeDarkMode = 'appThemeDarkMode';



  /// 多主题模式

  ///

  /// default(默认)

  static const appMultipleThemesMode = 'appMultipleThemesMode';



  /// 字体大小

  ///

  ///

  static const fontSize = 'fontSize';



  /// 字体粗细

  static const fontWeight = 'fontWeight';



  /// 设置-主题外观模式

  Future<void> setAppThemeDarkMode(ThemeMode themeMode) async {

    await sps.setString(appThemeDarkMode, themeMode.name);

  }



  /// 获取-主题外观模式

  Future<ThemeMode> getAppThemeDarkMode() async {

    final String themeDarkMode =

        await sps.getString(appThemeDarkMode) ?? 'system';

    return darkThemeMode(themeDarkMode);

  }



  /// 设置-多主题模式

  Future<void> setMultipleThemesMode(String value) async {

    await sps.setString(appMultipleThemesMode, value);

  }



  /// 获取-多主题模式

  Future<String> getMultipleThemesMode() async {

    return await sps.getString(appMultipleThemesMode) ?? 'default';

  }



  /// 获取-fontsize 大小 默认18

  Future<double> getNovelFontSize() async {

    return await sps.getDouble(fontSize) ?? 18;

  }



  /// 设置 -fontsize 大小

  Future<void> setNovelFontSize(double size) async {

    await sps.setDouble(fontSize, size);

  }



  /// 设置-多主题模式

  Future<void> setNovelFontWeight(NovelReadFontWeightEnum value) async {

    await sps.setString(fontWeight, value.id);

  }



  /// 获取-多主题模式

  Future<String> getNovelFontWeight() async {

    return await sps.getString(fontWeight) ?? 'w300';

  }

}

最后

特别鸣谢FlutterCandies糖果社区，也欢迎加入我们的大家庭。让我们一起学习共同进步

免责声明：本项目提供的源代码仅用学习，请勿用于商业盈利。

用 Cursor 做 UI，有两种最简单又有效的方法，一个免费一个付费，不管你要做网页 UI 还是应用程序 UI，都能用。

我这里不推荐直接用 Cursor 自带模型生成 UI，模型生成出来的效果比较差，就算是最强的 Claude 也不太行。

本文我分享的方法是我最近学到的，先说免费的。当我们手头有一张 UI 图片时，不要直接丢给 Cursor，而是先用 Google 的 Gemini 模型、Claude 或者 ChatGPT，这里我用的是 Gemini 并打开 Canvas 功能。

我把 UI 图片放到 Gemini 中，然后让它根据 UI 截图生成一份 JSON 格式的设计规范文件。

提示词参考：

Create a JSON-formatted design system profile. This profile should extract relevant visualdesign information from the provided screenshots. The JSON output must specifically include:

The overarching design style (e.g., color palette, typography, spacing, visual hierarchy).The structural elements and layout principles.Any other attributes crucial for an Al to consistently replicate these design systems.Crucially, do not include the specific content or data present within the images, focusing solely

生成出来的 JSON 包含整体设计风格、结构元素、布局原则，以及一些关键属性。

接着把这份 JSON 文件复制到 Cursor 中，让 Cursor 根据这份 JSON 来生成代码。

提示词参考：

参考 @design.json 设计规范，根据图片中的样式，生成一个网页。

生成效果如下：

对比一下如果直接用 Cursor 根据截图生成代码，不用 JSON 文件。

提示词：

按照图片中的UI样式，创建一个新的页面。注意：尽可能按照图片中的样子创建!!!

效果如下：

可以看到，效果差了很多，我原型 UI 的截图如下：

这是我随便找的一张图片作为例子，可以明显看出，先提取一份 JSON 文件，然后再让 Cursor 生成代码，效果要好很多。

为什么这种先提取 JSON 文件再生成代码的方法很有效？因为当任务涉及精确、结构化、无歧义的数据时，JSON 让模型理解更清晰，处理更高效，生成的结果也更稳定。

以上就是免费的方法。

接下来是付费的方法。

如果你对 UI 要求比较高，比如需要反复修改，那我推荐直接用 v0 API。v0 模型是 Vercel 推出的，专门针对 UI 和前端开发优化，所以在处理这类任务时，v0 比 Claude、Gemini、ChatGPT 都更强。

我一般会在需要大量生成 UI 时订阅 v0，一个月 20 美金，这个月把需要的 UI 全部生成完，然后就可以退订。

订阅后去后台生成 API Key，然后在 Cursor 中调用 v0 模型即可。

在 Cursor 模型设置中，把 v0 的 API Key 填进去，v0 模型是符合 OpenAI API 规范的，所以直接选择 OpenAI 模型即可。

实际使用时，你在对话中用的是 OpenAI 模型，但后台用的其实是 v0 模型。

好了，这就是免费和付费的两种方法。

最后再推荐两个动画工具：Framer Motion 和 React Bits，也都是很棒的选择。

你可以把 React Bits 中动画代码直接粘贴到 Cursor 中，让模型帮你集成即可。

• React：相当于项目经理和架构师


• Radix UI：相当于功能工程师


• Tailwind CSS：相当于视觉设计师


• Framer Motion：相当于动效设计师

以上就是一套现代强大 UI 开发工具箱，大家可以根据需要组合使用！

前言

Vue3.5在2024-09-03正式上线，目前在Vue官网显最新版本已经是Vue3.5，其中主要包含了几个小改动，我留意到日常最常用的改动就是props了，肯定是用Vue3的人必用的，所以针对性说一下props的两个小改动使我们日常使用更加灵活。

一、带响应式Props解构赋值

简述： 以前我们对Props直接进行解构赋值是会失去响应式的，需要配合使用toRefs或者toRef解构才会有响应式，那么就多了toRefs或者toRef这工序，而最新Vue3.5版本已经不需要了。

这样直接解构，testCount能直接渲染显示，但会失去响应式，当我们修改testCount时页面不更新。

<template>

  <div>

    {{ testCount }}

  </div>

</template>



<script setup>

  import { defineProps } from 'vue';

  const props = defineProps({

    testCount: {

      type: Number,

      default: 0,

    },

  });



  const { testCount } = props;

</script>

保留响应式的老写法，使用toRefs或者toRef解构

<template>

  <div>

    {{ testCount }}

  </div>

</template>



<script setup>

  import { defineProps, toRef, toRefs } from 'vue';

  const props = defineProps({

    testCount: {

      type: Number,

      default: 0,

    },

  });



  const { testCount } = toRefs(props);

  // 或者

  const testCount = toRef(props, 'testCount');

</script>

最新Vue3.5写法，不借助”外力“直接解构，依然保持响应式

<template>

  <div>

    {{ testCount }}

  </div>

</template>



<script setup>

  import { defineProps } from 'vue';

  const { testCount } = defineProps({

    testCount: {

      type: Number,

    },

  });



</script>

相比以前简洁了真的太多，直接解构使用省去了toRefs或者toRef

二、Props默认值新写法

简述： 以前默认值都是用default: ***去设置，现在不用了，现在只需要解构的时候直接设置默认值，不需要额外处理。

先看看旧的default: ***默认值写法

如下第12就是旧写法，其它以前Vue2也是这样设置默认值

<template>

  <div>

    {{ props.testCount }}

  </div>

</template>



<script setup>

  import { defineProps } from 'vue';

  const props = defineProps({

    testCount: {

      type: Number,

      default: 1

    },

  });

</script>

最新优化的写法
如下第9行，解构的时候直接一步到位设置默认值，更接近js语法的写法。

<template>

  <div>

    {{ testCount }}

  </div>

</template>



<script setup>

  import { defineProps } from 'vue';

  const { testCount=18 } = defineProps({

    testCount: {

      type: Number,

    },

  });

</script>

小结

这次更新其实props的本质功能并没有改变，但写法确实变的更加丝滑好用了，props使用非常高频感觉还是有必要跟进这种更简洁的写法。如果那里写的不对或者有更好建议欢迎大佬指点啊。

引言

最近我的小册《油猴脚本实战指南》上线了，很多同学都很感兴趣。

有些人学习后就私下问我，油猴既然能将任意前端js注入到当前网页中，是否能结合手势识别实现任意网页隔空控制，实现类似手机上的隔空翻页功能呢？

这是个非常好的想法，于是，我经过研究，将它实现出来了！先看看脚本效果：

1️⃣ 上下翻页功能

• 左手张开，右手可以控制网页向下翻页


• 左手握拳，右手可以控制网页向上翻页

2️⃣ 右手可以控制一个模拟光标移动

3️⃣ 右手握拳，实现点击效果

当然，还预设了很多手势，比如双手比✌🏻关闭当前网页，左手竖起大拇指，右手实现缩放网页等效果。

实现原理

其实实现原理非常简单，就是油猴+手势识别

油猴Tampermonkey

油猴（Tampermonkey）是一款浏览器插件，允许用户在网页加载时注入自定义的 JavaScript 脚本，来增强、修改或自动化网页行为。

通俗地说，借助油猴，你可以将自己的 JavaScript 代码“植入”任意网页，实现自动登录、抢单、签到、数据爬取、广告屏蔽等各种“开挂级”功能，彻底掌控页面行为。

如果你想深入了解，可以参考文章：juejin.cn/book/751468…

手势识别MediaPipe

手势识别其实已经不是一个新鲜词了，随着大模型的普及，AI识别手势非常简单方便。本示例中使用的AI模型识别，主要依赖了谷歌的MediaPipe。

MediaPipe 解决方案提供了一套库和工具，可帮助您快速在应用中应用人工智能 (AI) 和机器学习 (ML) 技术。

本示例中的demo就是借助它的手势识别能力实现的。在web中，我们可以借助MediaPipe @mediapipe/tasks-vision NPM 软件包获取手势识别器代码。

MediaPipe @mediapipe/tasks-vision

它的使用也非常简单

// Create task for image file processing:

const vision = await FilesetResolver.forVisionTasks(

  // path/to/wasm/root

  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm "

);

const gestureRecognizer = await GestureRecognizer.createFromOptions(vision, {

  baseOptions: {

    modelAssetPath: "https://storage.googleapis.com/mediapipe-tasks/gesture_recognizer/gesture_recognizer.task"

  },

  numHands: 2

});

如何将两者结合

借助油猴的脚本注入能力，我们能让我们的手势识别代码运行在任意网页，从而轻松实现隔空手势控制效果。

当然，脚本运行时必须开启摄像机权限，页面其实会有一个画面，但是很尴尬，于是实际脚本中，我将画面隐藏了。

手势识别的原理其实也不复杂，通过tasks-vision，我们可以拿到上图中各个关键的点的位置信息，通过判断不同点位之间的距离，实现不同的手势判断。

// 判定手势

// 手掌张开手势

function isHandOpen(hand) {

  const fingers = [[8, 5], [12, 9], [16, 13], [20, 17]];

  return fingers.filter(([tip, base]) => dist(hand[tip], hand[base]) > 0.1).length >= 4;

}

// 握拳手势

function isFist(hand) {

  const fingers = [[8, 5], [12, 9], [16, 13], [20, 17]];

  return fingers.filter(([tip, base]) => dist(hand[tip], hand[base]) < 0.06).length >= 3;

}

// 胜利手势

function isVictory(hand) {

  const extended = [8, 12];

  const folded = [16, 20];

  return (

    extended.every((i) => dist(hand[i], hand[i - 3]) > 0.1) &&

    folded.every((i) => dist(hand[i], hand[i - 3]) < 0.05)

  );

}

上述代码中的hand就是mediapipe/tasks-vision返回的手势信息。结合这些自定义的手势信息，我们就能实现各种花里胡哨的功能！

进一步学习

对于手势识别的学习，我们可以去学习官方的demo，在npmjs上，我们可以找到使用说明

这个包人脸识别、手势识别等非常多的功能，非常强大！

如果你对油猴脚本感兴趣，可以看看教程 《 油猴脚本实战指南 》， 本示例中的demo也会在这个教程中详细讲解。

当然，你也可以加我shc1139874527，我会拉你进学习交流群，一起体验油猴脚本开发的魅力！

你可能想不到，只用两行 CSS，就能让你的卡片、图片、内容块自动适应各种屏幕宽度，彻底摆脱复杂的媒体查询！
秘诀就是 CSS Grid 的 auto-fill 和 auto-fit。

马上教你用！✨

🧩 基础概念

假设你有这样一个需求：

• 一排展示很多卡片


• 每个卡片最小宽度 200px，剩余空间平均分配


• 屏幕变窄时自动换行

只需在父元素加两行 CSS 就能实现：

/* 父元素 */

.grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

}



/* 子元素 */

.item {

  height: 200px;

  background-color: rgb(141, 141, 255);

  border-radius: 10px;

}

下面详细解释这行代码的意思：

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

这是 CSS Grid 布局里定义列宽的常用写法，逐个拆解如下：

1. grid-template-columns

• 作用：定义网格容器里有多少列，以及每列的宽度。

2. repeat(auto-fit, ...)

• repeat 是个重复函数，表示后面的模式会被重复多次。


• auto-fit 是一个特殊值，意思是：自动根据容器宽度，能放下几个就放几个，每列都用后面的规则。
  
  
  
  • 容器宽度足够时，能多放就多放，放不下就自动换行。
  
  
  
  

3. minmax(200px, 1fr)

• minmax 也是一个函数，意思是：每列最小200px，最大可以占1fr（剩余空间的平分）


• 具体来说：
  
  
  
  • 当屏幕宽度很窄时，每列最小宽度是200px，再窄就会换行。
  
  
  • 当屏幕宽度变宽，卡片会自动拉伸，每列最大可以占据剩余空间的等分（1fr），让内容填满整行。
  
  
  
  

4. 综合起来

• 这行代码的意思就是：
  
  
  
  • 网格会自动生成多列，每列最小200px，最大可以平分一行的剩余空间。
  
  
  • 屏幕宽了就多显示几列，屏幕窄了就少显示几列，自动换行，自适应各种屏幕！
  
  
  • 不需要媒体查询，布局就能灵活响应。
  
  
  
  

总结一句话：

grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

让你的网格卡片最小200px，最大自动填满一行，自动适应任何屏幕，布局永远美观！

这里还能填 auto-fill，和 auto-fit 有啥区别？

🥇 auto-fill 和 auto-fit 有啥区别？

1. auto-fill

🧱 尽可能多地填充列，即使没有内容也会“占位”

• 会自动创建尽可能多的列轨道（包括空轨道），让网格尽量填满容器。


• 适合需要“列对齐”或“固定网格数”的场景。

2. auto-fit

🧱 自动适应内容，能合并多余空列，不占位

• 会自动“折叠”没有内容的轨道，让现有的内容尽量拉伸占满空间。


• 适合希望内容自适应填满整行的场景。

👀 直观对比

假设容器宽度能容纳 10 个 200px 的卡片，但你只放了 5 个卡片：

• auto-fill 会保留 10 列宽度，5 个卡片在前五列，后面五列是“空轨道”。


• auto-fit 会折叠掉后面五列，让这 5 个卡片拉伸填满整行。

👇 Demo 代码：

<h2>auto-fill</h2>

<div class="grid-fill">

    <div>item1</div>

    <div>item2</div>

    <div>item3</div>

    <div>item4</div>

    <div>item5</div>

</div>



<h2>auto-fit</h2>

<div class="grid-fit">

    <div>item1</div>

    <div>item2</div>

    <div>item3</div>

    <div>item4</div>

    <div>item5</div>

</div>

.grid-fill {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

  gap: 16px;

  margin-bottom: 40px;

}

.grid-fit {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

  gap: 16px;

}

.grid-fill div {

  background: #08f700;

}

.grid-fit div {

  background: #f7b500;

}

.grid-fill div,

.grid-fit div {

  padding: 24px;

  font-size: 18px;

  border-radius: 8px;

  text-align: center;

}

兼容性

caniuse.com/?search=aut…

🎯 什么时候用 auto-fill，什么时候用 auto-fit？

• 希望每行“有多少内容就撑多宽”，用 auto-fit
  
  适合卡片式布局、相册、响应式按钮等。


• 希望“固定列数/有占位”，用 auto-fill
  
  比如表格、日历，或者你希望网格始终对齐，即使内容不满。

📝 总结

🌟 小结

• auto-fill 更像“占位”，auto-fit 更像“自适应”


• 推荐大部分响应式卡片用 auto-fit


• 善用 minmax 配合，让列宽自适应得更自然

只需两行代码，你的页面就能优雅适配各种屏幕！

觉得有用就点赞收藏吧，更多前端干货持续更新中！🚀✨

最近跟同事闲聊，大家都在吐槽一个问题：
！
App 是越做越像平台了，但开发却越做越痛苦了。

你想加个活动页，产品说今晚上线；

你想做个业务扩展，运营说要不你再写个低代码工具；

你想适配鸿蒙，领导说最好做个 React Native 得了；

同事活成了“加班工具人”，App 也做成了臃肿的 “功能集成器”。

难道开发一个通用的 App ，就非得这么累吗？

于是，我们试着去找更轻、更灵活的解决方案。

我们只是想做一个“活动页托管方案”，不想每次上线都发版，更不想因为临时需求牵扯整个开发团队。

但随着调研的深入，我们发现这种痛点其实根本不是“活动页”本身，而是：App 缺乏一个**“包容性很强的容器”**。

比如：

• 新功能不用频繁发版；


• 能复用现有页面或者组件；


• 可以独立上线，不干扰主应用。

我们对比了几个方向：

• WebView + H5：快是快，但弱得可怕，尤其是 JSBridge 管理地狱，体验不佳；


• 低代码平台：适合特定场景，但定制性不足，复杂页面性能堪忧；


• RN/Flutter 微模块化：维护成本太高，涉及太多客户端改动。

直到我在调研中遇到了 FinClip，才意识到这事完全可以换个方式。

让人眼前一亮的 FinClip

FinClip 是什么？

一句话说完：把小程序能力，通用化、标准化，塞进任何 App。

从技术架构来说，FinClip 提供的是一个极其轻量的小程序容器 SDK（3MB都不到），可以直接嵌进你的 iOS、Android、HarmonyOS App，甚至 React Native、Flutter、macOS、车机都能跑。

开发者只要写一套小程序代码，放进去就能运行。不用重新适配底层系统，也不用改框架结构。

而且它兼容微信/支付宝/抖音小程序语法，意味着你过去写的项目，可能几乎零改动就能跑起来。

于是，我们立刻拉了群，软磨硬泡，搞来了二组同事开发的活动页项目，

需要的同学请戳这里：github.com/FernAbby/H5…

然后通过 FinClip Studio 打包上传，再嵌入 App。

FinClip Studio，真的有点香

讲真，刚开始用 FinClip Studio，我也做好了“将就一下”的心理准备。

结果没想到是真香警告。

首先，新建项目一键生成模板，跟微信小程序开发工具 99% 像；

你也可以和我一样选择导入已有的项目，

其次，模拟器支持多终端调试，拖拉缩放，全程无需真机；

另外，发布打包一条龙服务，你只需要上传至云端后台：

输入相关上传信息：

等待上传成功即可！

后台是平台运营的“指挥中心”

接下来的重头戏，需要我们登陆后台系统，

一个超级应用不是靠开发者单打独斗，而是靠多个角色协同。FinClip 的后台做得非常细腻，功能齐全，不管是开发还是运维同学，都可以轻松驾驭！

小程序管理模块，不仅可以新建、管理前面上传的小程序，还可以体验预览版、发布审核；

首先，在隐私设置栏目里设置隐私保护指引：

然后我们就可以配置审核版本或者体验版本了！

接着我们就可以直接跳转到待办中心通过审核！

除此之外，常用的灰度发布、权限范围、自动上架全都支持；

数据分析清晰易读，不需要 BI 工具也能看懂；

让你不再为如何做好运维而发愁！

用了一周的真实感受

流程

使用一周多了，整体的流程是这样的：

优点

我们没改动原生代码，甚至没有重新接入任何 SDK，只是增加一个容器模块 + 几行配置。

团队有个原来的 RN 老项目，直接用 FinClip 的容器跑起来，居然都不用重写，兼容度真的惊人。

缺点

但是缺点也有：

比如，导入已有项目会进行检测，并且明确的告知用户，其实可以后台默认执行，用户体验会更好！

另外最主要的是，后台和编辑器的登陆状态是临时的，不会长期保持！每次登陆挺麻烦的

彩蛋

首先，FinClip 贴心的内置了 AI 助手，你使用过程遇到的任何问题都可以在这里找到答案！

最重要的是，FinClip 提供了基于接口的 AI 能力，可以通过 RAG 技术为小程序注入了智能化能力，涵盖内容生成、上下文交互、数据分析等多方面功能。

这不仅提升了用户体验，也为开发者提供了便捷的 AI 集成工具，进一步增强了 FinClip 生态的竞争力！

总结

如果再给我造一次 App 的机会，我一定毫不犹豫地选择 FinClip！

当我们从“做功能”切换到“建生态”，思路就会完全不一样：

• App 不再是“巨石应用”，而是一个个业务模块的拼图


• 小程序就像“微服务 UI 化”，能独立更新、上线、下架


• 技术架构也从“一体化耦合”变成“解耦 + 动态加载”

而 FinClip 帮助开发者从“重复搬砖” 变成 “生态平台管理员”！

如果你也有和我一样的困惑，你也可以试试：

• 把一个已有的活动页，用 FinClip 打包成小程序；


• 嵌进你现有 App 中，再用 FinClip Studio 发布版本；


• 后台配置白名单，手机扫码预览。

1 天内，你就能体验一把“做平台”的感觉。

时代正在变化。我们不该再为“发布一个功能”耗尽精力，而应该把更多时间留给真正重要的东西 —— 创新、体验、增长。

FinClip 不只是工具，更是重构开发者角色的机会。

你准备好了吗？

blender导出的轿车🚗.glb：

最近因为有需求，不得不搞起3d这一块，说到3d，以为是学一个threejs就够了，结果是blender也要学。

blender可能有的前端开发或者后端开发没了解过，简单得说就是捏3d模型的这么一个东西。

经常听人家说建模建模，就是这个东西来着。

下载下来就是这么一个软件👇🏻：

通过对blender的学习可以做很多东西，那blender究竟可以做什么。要想知道能做什么，就要先知道blender是个啥。

blender是一个永久开源且免费的三维创作软件，支持建模、雕刻、骨骼、装配、动画模拟实时渲染合成和运动跟踪等等三维创作。

推荐一下大家一些现成的模型网站或插件或者材质贴图等：

• sketchfab.com


• cubebrush.co


• cgmodel.com


• free3d.co


• blender.org/download/de…


• blendermarket.com


• blender.kim/


• github.com/poly-haven/…

🔴 入门

⭕︎ 课程内容与目标

• 学习基本设置、模型变换、建模、UV编辑、材质与贴图、渲染等核心流程


• 掌握独立制作初级3D模型的能力

核心学习点

观察 -> 辅助建模，提供更好的视觉策略

变换 -> 基本变化，实现移动、旋转、复制图像等移动策略

建模 -> 重塑多边形，杜绝线建模障碍

修改器 -> 提供更便捷的迭代可能性

uv -> 纹理图层的映射到表面的方法

材质 -> 基本材质的属性设置，只需参照别人设置的方式即可

渲染 -> 了解基本的渲染设置，灯光

不要被界面中无关的设置项影响。每个三维软件都是复杂的，但是目的只是为了满足不同人的不同需求。使用时，只需要按照方法简单设置一些需要的参数即可。别的参数默认即可。

如果你看文字太多，觉得烦躁，那就记得：没有太多欲望的话，我们目的就是实现建模，表现它的材质，把它渲染出来就可以了。三点:建模->材质->渲染。

⭕︎ Blender核心优势

⭕︎ 基础设置指南

⭕︎ 视口操作

快捷键ESC下面的波浪键,英文模式下:

flowchart TD

    B[基本视图控制]

    

    B --> B1[旋转视图]

    B1 -->|操作方式| 鼠标中键

    B1 -->|效果| 围绕视点中心旋转

    

    B --> B2[平移视图]

    B2 -->|操作方式| Shift+鼠标中键

    B2 -->|效果| 平移观察视角

    

    B --> B3[缩放视图]

    B3 -->|操作方式1| 滚动鼠标中键

    B3 -->|操作方式2| Shift+B框选缩放

    

    B --> B4[快捷键ESC下面的波浪键,英文模式下]

    

    style B fill:#4b8bf5

🔴 基础操作

⭕︎ 语言的设置

⭕︎ 场景设置单位

⭕︎ 文件栏

文件 - 编辑 - 渲染 - 窗口 - 帮助

⭕︎ 工作台

比如说uv编辑器：

比如说贴图：

比如说着色器：

比如编辑多边形的工具台：

⭕︎ 快捷键操作

按住鼠标中键 -> 旋转

按住鼠标中键 + shift -> 平移

鼠标中键滚动 -> 放大缩小

⭕︎ 不同视口查看

切换四格图：

shift+a创建一个网格:

ctrl+alt+q切换成四格图，同样再按一遍就是退出四格图。

如果需要查看更多的视图，也可以按一下Tab上面的波浪键，像这样：

(按住左键长按选中某个物体，可以单独查看选中物体的视图。)

接下来看一下这些视图的小图标，具体代表什么，如果有不太会的（大家可以鼠标悬浮在图标上面，它会给出具体的提示，然后大家可以每个小图标点一下试一试，不用害怕软件会崩盘，怎么弄软件都不会出事，自己可以多研究研究，即使崩了也可以重下载，放心大胆去试）：

一个是叠加层：可以添加线框，统计信息等辅助观察。

一个是视图着色方式。

🔴 基本体

点击文件->新建->常规，之前的文件看需求看看要不要保存。

默认会出现一个立方体，我们按x键，它会提示我们要删除这个物体吗？我们先删掉这个立方体。

上面我们说过，shift+a可以弹出一个面板：

这样子，我们先创建一个立方体，网格+立方体。

游标（在游标模式下，可以任意拖动游标）：

或者在选择模式下，按住shift+右键也是可以拖动游标的。

拖动游标，然后去新建一个立方体，我们会发现物体会创建在以游标为中心的位置。所以我们去创建一个物体，首先先要把游标的位置给设好，创新物体就会直接在游标那个位置了。

物体的设置面板：

选择某些或者某个物体，按住左键进行框选即可。

有时候选择的时候会发现框选住的，有一个是红的，一个是黄的。黄的是后加选上的，可以作为移动物体这样子。

按a键就是全选。ctrl + i就是反选。shift是加选。

🔴 基本变换

纸上得来终觉浅，我们还是得多动手去尝试尝试，就算是做一个小物件小物体，前期也会觉得会有满满的成就感，用某个操作键的知识特定得做一个小小练习。

⭕︎ 对齐、捕捉、复制

选中圆锥体，然后按shift选中平面。

那么圆锥体就是选中项，然后平面就是活动项。

圆锥体相对于平面这个活动体Z轴对齐：

吸附相关：

shift+D复制选中物体。ctrl+c + ctrl+v也可以复制粘贴物体。

作为一款程序员或者建筑设计行业的一款建模软件来讲，跟我们在学校里学的photoshop一样，需要投入主动学习成本，还有一些习惯上的成本比如一些快捷键取代图形化界面是非常有必要的。

到最后再结合去做three.js或者cesium模型加载展示、材质处理和动画。

🔴 总结

当然，除了blender，还有很多优秀的流行的3d渲染软件：

• blender


• 3dx Max


• Maya


• Cinema4D


• KeyShot

一些室内设计师用的: cad、酷家乐（要钱）。

我们这篇讲的是blender和threejs的结合。就是说blender负责建模和导出，threejs负责加载和交互，去做出交互式3d网页应用。

⭕︎ 流程

⭕︎ 1、blender导出：

在blender中创建模型，然后导出格式为.glb（二进制格式，包含材质、动画等）或.gltf。

⭕︎ 2、加载模型并交互：

// 导出默认函数，用于创建城市场景

export default function createCity() {

  // 创建GLTF加载器实例，用于加载.glb/.gltf格式的3D模型

  const gltfLoader = new GLTFLoader();



  // 加载城市模型文件

  gltfLoader.load("./model/city.glb", (gltf) => {

    // 遍历模型中的所有子对象

    gltf.scene.traverse((item) => {

      // 只处理网格类型(Mesh)的对象

      if (item.type == "Mesh") {

        console.log(item); // 调试用，打印网格信息



        // 创建新的基础材质并设置为深蓝色

        const cityMaterial = new THREE.MeshBasicMaterial({

          color: new THREE.Color(0x0c0e33), // 十六进制颜色值

        });

        item.material = cityMaterial; // 应用新材质到当前网格



        // 调用自定义函数修改城市材质(函数实现未展示)

        modifyCityMaterial(item);



        // 特殊处理名为"Layerbuildings"的网格

        if (item.name == "Layerbuildings") {

          // 使用MeshLine库创建线框效果(需额外引入MeshLine库)

          const meshLine = new MeshLine(item.geometry);

          const size = item.scale.x; // 获取原始缩放值

          meshLine.mesh.scale.set(size, size, size); // 保持原始比例

          scene.add(meshLine.mesh); // 将线框添加到场景

        }

      }

    });



    // 将整个模型添加到场景中

    scene.add(gltf.scene);



    // 以下是被注释掉的可选效果，可根据需要取消注释:

    

    // 添加普通飞线效果

    const flyLine = new FlyLine();

    scene.add(flyLine.mesh);



    // 添加着色器实现的飞线(性能更好)

    const flyLineShader = new FlyLineShader();

    scene.add(flyLineShader.mesh);

    

    // 添加雷达扫描效果

    const lightRadar = new LightRadar();

    scene.add(lightRadar.mesh);



    // 添加光墙效果

    const lightWall = new LightWall();

    scene.add(lightWall.mesh);



    // 添加可交互的警告标识

    const alarmSprite = new AlarmSprite();

    scene.add(alarmSprite.mesh);

    // 绑定点击事件

    alarmSprite.onClick(function (e) {

      console.log("警告", e); // 点击时触发

    });

  });

}

原有的结论有问题，这是最新的弥补篇。如果您还没有看过，可以先看新篇提出的问题再看这个。如果您已看过，可以看下最新篇。希望不会给您带来困扰，随时接受大佬们的批评。

新篇戳这里。更崩溃！！感觉被偷家了！Element-plus组件测试的后续~

---------------------以下为原文---------------------------

进来着急的前端佬，我直接抛出结论吧！

Element-plus的组件，经过测验，如下组件存在内存泄漏。如下：

• el-carousel


• el-select + el-options


• el-descriptions


• el-tag


• el-dialog


• el-notification


• el-loading


• el-result


• el-message


• el-button


• el-tabs


• el-menu


• el-popper

验证环境为：

Vue Version: 3.5.13

Element Plus Version: 2.9.7

Browser / OS: window 10 / Edge 134.0.3124.85 (正式版本) (64 位)

Build Tool: Webpack

不排查ElementUI也存在这个问题。

好了。接下来细细聊。

前因

为什么检测到这种问题？主要因为一个项目引用了Element-plus。然后，你懂的，买的人永远都会想要最好的，然后买的人就这么一顿狂点Web页面，看见内存占用飙到老高。

于是...前端佬都懂的，来活了。

排查

一开始我是不敢怀疑这种高star开源组件的。总以为自己是写的代码有问题。

详细代码就不贴了，主要用ElDialog组件，封装成一个命令式的Dialog组件，避免频繁的使用v-modal参数。

然后，就直接怀疑上这个组件了。

经过测试，果不其然，从关闭到销毁，会导致内存猛增，因为Dialog中有各种表单组件，一打开就创建了一大堆的Element元素。

精确定位，使用了FinalizationRegistry类追踪创建的Dialog实体，代码如下：

const finalizerRegistry = new FinalizationRegistry((heldValue) => {

  console.log('Finalizing instance: ',heldValue);

});





// 在创建处监听

const heldValue = Symbol(`DialogCommandComponent_${Date.now()}`);

finalizerRegistry.register(this, heldValue);

console.log(`Constructed instance:`,heldValue);

发现一直没有Constructed instance销毁的信息输出。

随后，使用了Edge浏览器中的分离元素来打快照，步骤如下图。

经过反复的操作，然后点击主动垃圾回收，然后发现el-dialog的元素都会增加，基本确认无疑了。

但还是怀疑，会不会是Dialog中，引用的问题，导致元素一直没能销毁？所以，使用了纯纯的el-dialog来校验，同样的操作，既然如故。

然后的然后，我使用了如下的代码，去校验其它组件是否存在同样的问题。代码如下：

<template>

  <div>

    <el-button @click="fn2">Reset</el-button>

  </div>

  <el-dialog v-model="model" destroy-on-close @closed="fn1" append-to-body v-if="destroyDialogModelValue"></el-dialog>

  <el-button @click="fn0" v-if="!button" primse>Click</el-button>

  <div class="weak" v-if="!button">xxx</div>

  <el-input v-if="!button" />

  <el-border v-if="!button" />

  <el-select v-if="!button">

    <el-option>1111</el-option>

  </el-select>

  <el-switch v-if="!button" />

  <el-radio v-if="!button" />

  <el-rate v-if="!button" />

  <el-slider v-if="!button" />

  <el-time-picker v-if="!button" />

  <el-time-select v-if="!button" />

  <el-transfer v-if="!button" />

  <el-tree-select v-if="!button" />

  <el-calendar v-if="!button" />

  <el-card v-if="!button" />

  <el-carousel height="150px" v-if="!button">

    <el-carousel-item v-for="item in 4" :key="item">

      <h3 class="small justify-center" text="2xl">{{ item }}</h3>

    </el-carousel-item>

  </el-carousel>

  <el-descriptions title="User Info" v-if="!button">

    <el-descriptions-item label="Username">kooriookami</el-descriptions-item>

  </el-descriptions>

  <el-table style="width: 100%" v-if="!button">

    <el-table-column prop="date" label="Date" width="180" />

    <el-table-column prop="name" label="Name" width="180" />

    <el-table-column prop="address" label="Address" />

  </el-table>

  <el-avatar v-if="!button" />

  <el-pagination layout="prev, pager, next" :total="50" v-if="!button" />

  <el-progress :percentage="50" v-if="!button" />

  <el-result icon="success" title="Success Tip" sub-title="Please follow the instructions" v-if="!button">

    <template #extra>

      <el-button type="primary">Back</el-button>

    </template>

  </el-result>

  <el-skeleton v-if="!button" />

  <el-tag v-if="!button" />

  <el-timeline v-if="!button" />

  <el-tree v-if="!button" />

  <el-avatar v-if="!button" />

  <el-segmented size="large" v-if="!button" />

  <el-dropdown v-if="!button">

    <span class="el-dropdown-link">

      Dropdown List

      <el-icon class="el-icon--right">

        <arrow-down />

      </el-icon>

    </span>

    <template #dropdown>

      <el-dropdown-menu>

        <el-dropdown-item>Action 1</el-dropdown-item>

        <el-dropdown-item>Action 2</el-dropdown-item>

        <el-dropdown-item>Action 3</el-dropdown-item>

        <el-dropdown-item disabled>Action 4</el-dropdown-item>

        <el-dropdown-item divided>Action 5</el-dropdown-item>

      </el-dropdown-menu>

    </template>

  </el-dropdown>

  <el-menu class="el-menu-demo" mode="horizontal" v-if="!button">

    <el-menu-item index="1">Processing Center</el-menu-item>

    <el-sub-menu index="2">

      <template #title>Workspace</template>

      <el-menu-item index="2-1">item one</el-menu-item>

      <el-menu-item index="2-2">item two</el-menu-item>

      <el-menu-item index="2-3">item three</el-menu-item>

      <el-sub-menu index="2-4">

        <template #title>item four</template>

        <el-menu-item index="2-4-1">item one</el-menu-item>

        <el-menu-item index="2-4-2">item two</el-menu-item>

        <el-menu-item index="2-4-3">item three</el-menu-item>

      </el-sub-menu>

    </el-sub-menu>

    <el-menu-item index="3" disabled>Info</el-menu-item>

    <el-menu-item index="4">Orders</el-menu-item>

  </el-menu>



  <el-steps style="max-width: 600px" active="0" finish-status="success" v-if="!button">

    <el-step title="Step 1" />

    <el-step title="Step 2" />

    <el-step title="Step 3" />

  </el-steps>



  <el-tabs class="demo-tabs" v-if="!button">

    <el-tab-pane label="User" name="first">User</el-tab-pane>

    <el-tab-pane label="Config" name="second">Config</el-tab-pane>

    <el-tab-pane label="Role" name="third">Role</el-tab-pane>

    <el-tab-pane label="Task" name="fourth">Task</el-tab-pane>

  </el-tabs>



  <el-alert title="Success alert" type="success" v-if="!button" />

  <el-drawer title="I am the title" v-if="!button">

    <span>Hi, there!</span>

  </el-drawer>



  <div v-loading="model" v-if="!button"></div>



  <el-popconfirm confirm-button-text="Yes" cancel-button-text="No" icon-color="#626AEF"

    title="Are you sure to delete this?" v-if="!button">

    <template #reference>

      <el-button>Delete</el-button>

    </template>

  </el-popconfirm>



  <el-popover class="box-item" title="Title" content="Top Center prompts info" placement="top" v-if="!button">

    <template #reference>

      <div>top</div>

    </template>

  </el-popover>



  <el-tooltip class="box-item" effect="dark" content="Top Left prompts info" placement="top-start" v-if="!button">

    <div>top-start</div>

  </el-tooltip>

</template>

<script setup>

import { ref } from "vue";

import { ElMessage, ElMessageBox, ElNotification } from "element-plus";



const model = ref(false);

const destroyDialogModelValue = ref(false);

const button = ref(false);



function fn0() {

  model.value = true;

  destroyDialogModelValue.value = true;

  ElMessage("This is a message.");

  ElMessageBox.alert("This is a message", "Title");

  ElNotification({

    title: "Title",

    message: "This is a reminder",

  });

}

function fn1() {

  console.log("closed");

  destroyDialogModelValue.value = false;

  button.value = true;

}

function reset() {

  model.value = false

}

</script>



<style>

#app {

  font-family: Avenir, Helvetica, Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-align: center;

  color: #2c3e50;

  margin-top: 60px;

}

</style>

如上代码，进入页面后，点击click，然后关闭所有的弹窗。然后再次点击reset按钮，然后再次点击click，关闭所有弹窗。如此可以多操作几次。

就发现了开头的组件，都存在内存泄漏问题。

未能解决

有问题，当然首先看看别人有没有出现过。各种搜索就不说了，大掘金也搜过，在Element-plus的github仓里的Issues中找过，发现的办法基本无用。

以下是自己思考的几条路子：

结尾

还是在这里，求助大佬，看以上思路是否有错，然后跪求orz解决办法。

自己后续如果解决对应一些问题，会即时和大家分享。

Vue实现一个“液态玻璃”效果登录卡片

效果介绍

液态玻璃（Liquid Glass）是一种极具现代感的UI视觉风格，常见于高端网站和操作系统界面。它通过多层叠加、模糊、光泽、滤镜等技术，模拟出玻璃的通透、折射和高光质感。苹果的这次系统设计更新，带火了这一设计效果，本教程将带你一步步实现一个带有3D灵动倾斜交互的液态玻璃登录卡片。

实际效果：

技术原理解析

1. 多层叠加

液态玻璃效果的核心是多层视觉叠加：

• 模糊层（blur）：让背景内容变得虚化，产生玻璃的通透感。


• 色调层（tint）：为玻璃加上一层淡淡的色彩，提升质感。


• 高光层（shine）：模拟玻璃边缘的高光和内阴影，增强立体感。


• SVG滤镜：通过 SVG 的 feTurbulence 和 feDisplacementMap，让玻璃表面产生微妙的扭曲和流动感。

2. 3D灵动倾斜

通过监听鼠标在卡片上的移动，动态计算并设置 transform: perspective(...) rotateX(...) rotateY(...)，让卡片随鼠标灵动倾斜，增强交互体验。

3. 背景与环境

背景可以是渐变色，也可以是图片。玻璃卡片通过 backdrop-filter 与背景内容产生交互，形成真实的玻璃质感。

实现步骤详解

1. 结构搭建

<template>

  <div class="login-container animated-background">

    <!-- SVG滤镜库 -->

    <svg style="display: none">...</svg>

    <!-- 登录卡片 -->

    <div

      class="glass-component login-card"

      ref="tiltCard"

      @mousemove="handleMouseMove"

      @mouseleave="handleMouseLeave"

    >

      <div class="glass-effect"></div>

      <div class="glass-tint"></div>

      <div class="glass-shine"></div>

      <div class="glass-content">

        <!-- 登录表单内容 -->

      </div>

    </div>

  </div>

</template>

2. SVG滤镜实现液态扭曲

<svg style="display: none">

  <filter id="glass-distortion" x="0%" y="0%" width="100%" height="100%" filterUnits="objectBoundingBox">

    <feTurbulence type="fractalNoise" baseFrequency="0.001 0.005" numOctaves="1" seed="17" result="turbulence" />

    <feComponentTransfer in="turbulence" result="mapped">

      <feFuncR type="gamma" amplitude="1" exponent="10" offset="0.5" />

      <feFuncG type="gamma" amplitude="0" exponent="1" offset="0" />

      <feFuncB type="gamma" amplitude="0" exponent="1" offset="0.5" />

    </feComponentTransfer>

    <feGaussianBlur in="turbulence" stdDeviation="3" result="softMap" />

    <feSpecularLighting in="softMap" surfaceScale="5" specularConstant="1" specularExponent="100" lighting-color="white" result="specLight">

      <fePointLight x="-200" y="-200" z="300" />

    </feSpecularLighting>

    <feComposite in="specLight" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litImage" />

    <feDisplacementMap in="SourceGraphic" in2="softMap" scale="200" xChannelSelector="R" yChannelSelector="G" />

  </filter>

</svg>

• 这段 SVG 代码必须放在页面结构内，供 CSS filter 调用。

3. 背景设置

.animated-background {

  width: 100vw;

  height: 100vh;

  background-image: url('你的背景图片路径');

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

  position: fixed;

  top: 0;

  left: 0;

  z-index: -1;

}

• 建议用高质量渐变或壁纸，能更好衬托玻璃质感。

4. 卡片多层玻璃结构

.login-card {

  width: 400px;

  border-radius: 24px;

  overflow: hidden;

  box-shadow: 0 4px 24px 0 rgba(0,0,0,0.10), 0 1.5px 6px 0 rgba(0,0,0,0.08);

  background: transparent;

  position: relative;

}

.glass-effect {

  position: absolute;

  inset: 0;

  z-index: 0;

  backdrop-filter: blur(5px);

  filter: url(#glass-distortion);

  isolation: isolate;

  border-radius: 24px;

}

.glass-tint {

  position: absolute;

  inset: 0;

  z-index: 1;

  background: rgba(0, 0, 0, 0.15);

  border-radius: 24px;

}

.glass-shine {

  position: absolute;

  inset: 0;

  z-index: 2;

  border: 1px solid rgba(255, 255, 255, 0.13);

  border-radius: 24px;

  box-shadow:

    inset 1px 1px 8px 0 rgba(255, 255, 255, 0.18),

    inset -1px -1px 8px 0 rgba(255, 255, 255, 0.08);

  pointer-events: none;

}

.glass-content {

  position: relative;

  z-index: 3;

  padding: 2rem;

  color: white;

}

• 每一层都要有一致的 border-radius，才能保证圆角处无割裂。

5. 3D灵动倾斜交互

methods: {

  handleMouseMove (e) {

    const card = this.$refs.tiltCard

    const rect = card.getBoundingClientRect()

    const x = e.clientX - rect.left

    const y = e.clientY - rect.top

    const centerX = rect.width / 2

    const centerY = rect.height / 2

    const maxTilt = 18

    const rotateY = ((x - centerX) / centerX) * maxTilt

    const rotateX = -((y - centerY) / centerY) * maxTilt

    card.style.transform = `perspective(600px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(1.03)`

  },

  handleMouseLeave () {

    const card = this.$refs.tiltCard

    card.style.transform = 'perspective(600px) rotateX(0deg) rotateY(0deg) scale(1)'

  }

}

• 鼠标移动时，卡片会根据指针位置灵动倾斜。


• 鼠标移出时，卡片平滑恢复。

6. 细节优化

• 阴影柔和：避免黑色边缘过重，提升高级感。


• 高光线条：用低透明度白色边框和内阴影，模拟玻璃高光。


• 所有层的圆角一致：防止割裂。


• 表单输入框：用半透明背景和模糊，保持整体风格统一。

7.完整代码

<template>

  <div class="login-container animated-background">

    <!-- SVG滤镜库 -->

    <svg style="display: none">

      <filter id="glass-distortion" x="0%" y="0%" width="100%" height="100%" filterUnits="objectBoundingBox">

        <feTurbulence type="fractalNoise" baseFrequency="0.001 0.005" numOctaves="1" seed="17" result="turbulence" />

        <feComponentTransfer in="turbulence" result="mapped">

          <feFuncR type="gamma" amplitude="1" exponent="10" offset="0.5" />

          <feFuncG type="gamma" amplitude="0" exponent="1" offset="0" />

          <feFuncB type="gamma" amplitude="0" exponent="1" offset="0.5" />

        </feComponentTransfer>

        <feGaussianBlur in="turbulence" stdDeviation="3" result="softMap" />

        <feSpecularLighting in="softMap" surfaceScale="5" specularConstant="1" specularExponent="100" lighting-color="white" result="specLight">

          <fePointLight x="-200" y="-200" z="300" />

        </feSpecularLighting>

        <feComposite in="specLight" operator="arithmetic" k1="0" k2="1" k3="1" k4="0" result="litImage" />

        <feDisplacementMap in="SourceGraphic" in2="softMap" scale="200" xChannelSelector="R" yChannelSelector="G" />

      </filter>

    </svg>



    <!-- 登录卡片 -->

    <div

      class="glass-component login-card"

      ref="tiltCard"

      @mousemove="handleMouseMove"

      @mouseleave="handleMouseLeave"

    >

      <div class="glass-effect"></div>

      <div class="glass-tint"></div>

      <div class="glass-shine"></div>

      <div class="glass-content">

        <h2 class="login-title">欢迎登录</h2>

        <form class="login-form">

          <div class="form-group">

            <input type="text" placeholder="用户名" class="glass-input">

          </div>

          <div class="form-group">

            <input type="password" placeholder="密码" class="glass-input">

          </div>

          <button type="submit" class="glass-button">登录</button>

        </form>

      </div>

    </div>

  </div>

</template>



<script>

export default {

  name: 'LiquidGlass',

  data () {

    return {

      // 可以添加需要的数据

    }

  },

  methods: {

    handleMouseMove (e) {

      const card = this.$refs.tiltCard

      const rect = card.getBoundingClientRect()

      const x = e.clientX - rect.left

      const y = e.clientY - rect.top

      const centerX = rect.width / 2

      const centerY = rect.height / 2

      // 最大旋转角度

      const maxTilt = 18

      const rotateY = ((x - centerX) / centerX) * maxTilt

      const rotateX = -((y - centerY) / centerY) * maxTilt

      card.style.transform = `perspective(600px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale(1.03)`

    },

    handleMouseLeave () {

      const card = this.$refs.tiltCard

      card.style.transform = 'perspective(600px) rotateX(0deg) rotateY(0deg) scale(1)'

    }

  }

}

</script>



<style lang="scss" scoped>

.login-container {

  min-height: 100vh;

  display: flex;

  align-items: center;

  justify-content: center;

  position: relative;

  overflow: hidden;

}



.animated-background {

  width: 100%;

  height: 100%;

  background-image: url('../../assets/macwallpaper.jpg');

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

}



.login-card {

  width: 400px;

  position: relative;

  border-radius: 24px;

  overflow: hidden;

  box-shadow: 0 4px 24px 0 rgba(0,0,0,0.10), 0 1.5px 6px 0 rgba(0,0,0,0.08);

  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.6);

  cursor: pointer;

  background: transparent;

}



.glass-effect {

  position: absolute;

  inset: 0;

  z-index: 0;

  backdrop-filter: blur(5px);

  filter: url(#glass-distortion);

  isolation: isolate;

  border-radius: 24px;

}



.glass-tint {

  position: absolute;

  inset: 0;

  z-index: 1;

  background: rgba(0, 0, 0, 0.15);

  border-radius: 24px;

}



.glass-shine {

  position: absolute;

  inset: 0;

  z-index: 2;

  border: 1px solid rgba(255, 255, 255, 0.13);

  border-radius: 24px;

  box-shadow:

    inset 1px 1px 8px 0 rgba(255, 255, 255, 0.18),

    inset -1px -1px 8px 0 rgba(255, 255, 255, 0.08);

  pointer-events: none;

}



.glass-content {

  position: relative;

  z-index: 3;

  padding: 2rem;

  color: white;

}



.login-title {

  text-align: center;

  color: #fff;

  margin-bottom: 2rem;

  font-size: 2rem;

  font-weight: 600;

  text-shadow: 0 1px 3px rgba(0,0,0,0.2);

}



.form-group {

  margin-bottom: 1.5rem;

}



.glass-input {

  width: 90%;

  padding: 12px 20px;

  border: none;

  border-radius: 10px;

  background: rgba(255, 255, 255, 0.1);

  color: #fff;

  font-size: 1rem;

  backdrop-filter: blur(5px);

  transition: all 0.3s ease;



  &::placeholder {

    color: rgba(255, 255, 255, 0.7);

  }



  &:focus {

    outline: none;

    background: rgba(255, 255, 255, 0.2);

    box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);

  }

}



.glass-button {

  width: 100%;

  padding: 12px;

  border: none;

  border-radius: 10px;

  background: rgba(255, 255, 255, 0.2);

  color: #fff;

  font-size: 1rem;

  font-weight: 600;

  cursor: pointer;

  transition: all 0.3s ease;

  backdrop-filter: blur(5px);

  position: relative;

  overflow: hidden;



  &:hover {

    background: rgba(255, 255, 255, 0.3);

    transform: translateY(-2px);

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);

  }



  &:active {

    transform: translateY(0);

  }

}



// 添加点击波纹效果

.click-gradient {

  position: absolute;

  border-radius: 50%;

  background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, rgba(180,180,255,0.2) 40%, rgba(100,100,255,0.1) 70%, rgba(50,50,255,0) 100%);

  transform: translate(-50%, -50%) scale(0);

  opacity: 0;

  pointer-events: none;

  z-index: 4;

}



.glass-component.clicked .click-gradient {

  animation: gradient-ripple 0.6s ease-out;

}



@keyframes gradient-ripple {

  0% {

    transform: translate(-50%, -50%) scale(0);

    opacity: 1;

  }

  100% {

    transform: translate(-50%, -50%) scale(3);

    opacity: 0;

  }

}



.glass-component {

  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);

  will-change: transform;

}

</style>

常见问题与优化建议

技术要点总结

• SVG滤镜：让玻璃表面有微妙的流动和扭曲感。


• backdrop-filter: blur：实现背景虚化。


• 多层叠加：色调、高光、阴影共同营造真实玻璃质感。


• 3D transform：提升交互体验。


• 细节打磨：阴影、边框、圆角、色彩都要精细调整。

结语

液态玻璃效果是现代前端视觉的代表之一。只要理解其原理，分层实现、细致调优，任何人都能做出媲美 macOS、Win11 的高端玻璃UI。希望本教程能帮助你掌握这项技术，做出属于自己的酷炫界面！

前言

你说，为什么❓尤雨溪搞响应式，他为什么要换掉Object.defineProperty呢❓

proxy什么来头❓

有一次👀看他直播，说去面试人家问他原型链，他不会，GG了面试黄了，你说他是不是无中生有暗度陈仓凭空想象凭空捏造new Proxy来换掉Object.defineProperty的呢？

还真不是，尤雨溪的响应式，我们暂且叫成插一脚吧👇，请听我细细道来👂

在前端开发中，响应式系统是现代框架的核心特性。无论是 Vue 还是 React，它们都需要实现一个基本功能：当数据变化时，自动更新相关的视图。用通俗的话说，就是要在数据被读取或修改时"插一脚"，去执行一些额外的操作（比如界面刷新、计算属性重新计算等）。

// 读取属性时

obj.a; // 需要知道这个属性被读取了



// 修改属性时

obj.a = 3; // 需要知道这个属性被修改了

但原生 JavaScript 对象不会告诉我们这些操作的发生。那么，尤雨溪是如何实现这种"插一脚"的能力的呢？

正文

Vue 2 的"插一脚"方案 - Object.defineProperty

基本实现原理

Vue 2 使用的是 ES5 的 Object.defineProperty API。这个 API 允许我们定义或修改对象的属性，并为其添加 getter 和 setter。

const obj = { a: 1 };



let v = obj.a;

Object.defineProperty(obj, 'a', {

  get() {

    console.log('读取 a'); // 插一脚：知道属性被读取了

    return v;

  },

  set(val) {

    console.log('更新 a'); // 插一脚：知道属性被修改了

    v = val;

  }

});



obj.a;     // 输出"读取 a"

obj.a = 3; // 输出"更新 a"

完整对象监听

为了让整个对象可响应，Vue 2 需要遍历对象的所有属性：

function observe(obj) {

  for (const k in obj) {

    let v = obj[k];

    Object.defineProperty(obj, k, {

      get() {

        console.log('读取', k);

        return v;

      },

      set(val) {

        console.log('更新', k);

        v = val;

      }

    });

  }

}

处理嵌套对象

对于嵌套对象，还需要递归地进行观察：

function _isObject(v) {

  return typeof v === 'object' && v !== null;

}



function observe(obj) {

  for (const k in obj) {

    let v = obj[k];

    if (_isObject(v)) {

      observe(v); // 递归处理嵌套对象

    }

    Object.defineProperty(obj, k, {

      get() {

        console.log('读取', k);

        return v;

      },

      set(val) {

        console.log('更新', k);

        v = val;

      }

    });

  }

}

Vue 2 方案的两大缺陷

缺陷一：效率问题

在这种模式下，他就必须要去遍历这个对象里边的每一个属性...这是第一个缺陷：必须遍历对象的所有属性，对于大型对象或深层嵌套对象，这会带来性能开销。

缺陷二：新增属性问题

无法检测到对象属性的添加或删除：

obj.d = 2; // 这个操作不会被监听到

因为一开始遍历的时候没有这个属性，后续添加的属性不会被自动观察。

Vue 3 的"插一脚"方案 - Proxy

基本实现原理

Vue 3 使用 ES6 的 Proxy 来重构响应式系统。Proxy 可以拦截整个对象的操作，而不是单个属性。

const obj = { a: 1 };



const proxy = new Proxy(obj, {

  get(target, k) {

    console.log('读取', k); // 插一脚

    return target[k];

  },

  set(target, k, val) {

    if (target[k] === val) return true;

    console.log('更新', k); // 插一脚

    target[k] = val;

    return true;

  }

});



proxy.a;     // 输出"读取 a"

proxy.a = 3; // 输出"更新 a"

proxy.d;     // 输出"读取 d" - 连不存在的属性也能监听到！

完整实现

function _isObject(v) {

  return typeof v === 'object' && v !== null;

}



function reactive(obj) {

  const proxy = new Proxy(obj, {

    get(target, k) {

      console.log('读取', k);

      const v = target[k];

      if (_isObject(v)) {

        return reactive(v); // 惰性递归

      }

      return v;

    },

    set(target, k, val) {

      if (target[k] === val) return true;

      console.log('更新', k);

      target[k] = val;

      return true;

    }

  });

  return proxy;

}

Proxy 的优势

"proxy 它解决了什么问题？两个问题。

第一个问题不需要深度遍历了，因为它不再监听属性了，而是监听的什么？整个对象。

同时也由于它监听了整个对象，就解决了第二个问题：能监听这个对象的所有操作，包括你去读写一些不存在的属性，都能监听到。"

原理对比与源码解析

原理对比

源码实现差异

Vue 2 实现：

• 在 src/core/observer 目录下


• 初始化时递归遍历整个对象


• 需要特殊处理数组方法

Vue 3 实现：

• 独立的 @vue/reactivity 包


• 使用 Proxy 实现基础响应式


• 惰性处理嵌套对象


• 更简洁的 API 设计

为什么 Proxy 是更好的选择？

总结

需显式操作（defineProperty）-> 声明式编程（Proxy）

局部监听（属性级别）-> 全局拦截（对象级别）。

从 Object.defineProperty 到 Proxy 的转变，不仅是 API 的升级，更是前端框架设计理念的进步。Vue 3 的响应式系统通过 Proxy 实现了更高效、更全面的数据监听。

作为一名后端开发工程师，当你面对复杂的业务流程时，是否常感到逻辑混乱、边界不清？学会状态机设计，让你的代码优雅如诗！

引言：为什么需要状态机？

在后台系统开发中，我们经常需要处理对象的状态流转问题：订单从"待支付"到"已支付"再到"已发货"，工单系统从"打开"到"处理中"再到"解决"，这些场景都涉及状态管理。

如果不使用状态机设计，我们可能会写出这样的面条式代码：

func HandleOrderEvent(order *Order, event Event) error {

    if order.Status == "待支付" {

        if event.Type == "支付成功" {

            order.Status = "已支付"

            // 执行支付成功逻辑...

        } else if event.Type == "取消订单" {

            order.Status = "已取消"

            // 执行取消逻辑...

        } else {

            return errors.New("非法事件")

        }

    } else if order.Status == "已支付" {

        if event.Type == "发货" {

            order.Status = "已发货"

            // 执行发货逻辑...

        }

        // 更多else if...

    }

    // 更多else if...

}

这种代码存在几个致命问题：

状态机正是解决这类问题的银弹！

状态机设计核心概念

状态机三要素

状态机的类型

graph LR

    A[待支付] -->|支付成功| B[已支付]

    B -->|发货| C[已发货]

    B -->|申请退款| D[退款中]

    A -->|取消订单| E[已取消]

    D -->|退款成功| E

    D -->|退款失败| B

Go实现状态机实战

基本结构定义

package main



import "fmt"



// 定义状态类型

type State string



// 定义事件类型

type Event string



// 状态转移函数类型

type TransitionHandler func() error



// 状态转移定义

type Transition struct {

    From   State

    Event  Event

    To     State

    Handle TransitionHandler

}



// 状态机定义

type StateMachine struct {

    Current     State

    transitions []Transition

}



// 注册状态转移规则

func (sm *StateMachine) AddTransition(from State, event Event, to State, handler TransitionHandler) {

    sm.transitions = append(sm.transitions, Transition{

        From:   from,

        Event:  event,

        To:     to,

        Handle: handler,

    })

}



// 处理事件

func (sm *StateMachine) Trigger(event Event) error {

    for _, trans := range sm.transitions {

        if trans.From == sm.Current && trans.Event == event {

            // 执行处理函数

            if err := trans.Handle(); err != nil {

                return err

            }

            // 更新状态

            sm.Current = trans.To

            return nil

        }

    }

    return fmt.Errorf("非法事件[%s]或当前状态[%s]不支持", event, sm.Current)

}