Southern Wind-CSDN博客

原创从一段文字到一部动态漫：如何打造全流程分镜创作工作台 StoryCanvas AI

的实践表明：当生成式 AI 从孤立的“单点生成”走向结构化、以专业视听工作流为中心的图形工作台时，个人创作的生产力边界将被极大拓宽。我们通过结构化 Prompt 工程解决了剧情流水账的问题，通过全局资产锁定缓解了角色变脸问题，通过双模可视化编辑器与本地渲染管线打通了从文本到成片的最后一公里。

2026-08-27 15:34:11 459

原创 Container Queries + 现代 CSS：终于告别 Media Query 统治时代

摘要： Container Queries 彻底改变了响应式设计范式，从传统的页面级响应（Media Query）升级为组件级响应。它允许组件根据父容器尺寸（而非浏览器窗口）动态调整样式，解决了组件在不同容器（如侧边栏、弹窗）中布局错乱的问题。通过 container-type 声明容器，配合 @container 规则和 cq* 单位，开发者能实现更精准的响应式控制。结合 :has() 选择器、Subgrid 和原生 CSS 嵌套等现代特性，CSS 进入组件化新时代。该技术已获主流浏览器支持，尤其适合复杂

2026-06-12 13:33:54 389

原创低代码平台表单设计器项目源码解析

本文解析了一个低代码表单设计器项目的源码结构和核心功能实现。项目采用模块化目录结构，包含全局状态管理、组件注册、画布渲染等功能模块。核心数据模型基于JSON存储表单页面和元素，支持撤销/重做操作。画布初始化通过克隆模板实现多页面渲染，并提供元素选中高亮功能。拖拽引擎使用Sortable.js库，支持从物料区克隆组件到画布，并处理了DOM替换和动画过渡。特别实现了栅格布局的无限嵌套能力，通过递归初始化子区域拖拽功能完成。项目展示了低代码平台中表单设计器的关键技术方案。

2026-06-02 16:42:27 321

原创 8G 内存直接跑爆？我在浏览器里塞进了一个完整的 AI 工作台

做浏览器端 AI 工具时，有几条经验非常明显。第一，模型能力不是产品体验的全部。一个模型效果再好，如果下载失败、初始化慢、状态不可见，用户仍然会觉得产品不可用。第二，公开模型也要筛选。不是 Hugging Face 上能搜到，就适合放进前端。是否 gated、是否大文件、是否依赖特殊格式、是否适配 Transformers.js，都要提前验证。第三，AI 输出必须有防范手段。抠图需要手动修边，文本需要允许用户编辑结果。把模型输出当作最终答案，会让产品很脆弱。第四，工作流比模型列表重要。

2026-05-25 15:20:46 448

原创谷记账——一个 Vue 3 批次记账 App

一个基于Vue 3的批次记账应用开发过程。该项目从最初的通用记事应用Notely AI转型为专注批次核算的垂直工具，核心采用"Batch+Record"双层数据模型，通过Pinia实现本地领域状态管理，集成Vant组件库处理移动端交互，并利用ApexCharts实现数据可视化。重点探讨了AI助手在业务闭环中的定位——作为自然语言输入解释器而非内容生成器，强调用户确认环节的重要性。文章还分享了项目结构设计思路，展示了包括批次管

2026-05-14 17:41:25 540

原创 Vue 3 + Socket.io 实时聊天项目完整开发文档

基于Vue3和Socket.io的实时聊天系统前端开发过程。项目采用Vite+TypeScript+Vant+Pinia技术栈，实现了用户注册登录、好友管理、实时聊天等核心功能。主要内容包括：环境搭建与基础配置（Vite项目初始化、环境变量配置）请求层与Socket层封装（Axios请求实例、Socket.io客户端封装）状态管理与路由鉴权（Pinia全局状态管理）完整功能实现：用户认证、好友申请处理、实时消息收发、未读消息提示等项目前后端分离，与后端chat-server通过R

2026-04-23 18:45:00 511

原创别再用原生的 Socket 了！Nest.js 让你的实时聊天系统开发效率翻倍

本文介绍了使用Nest.js开发实时聊天系统的完整流程。主要内容包括：环境搭建与基础配置（初始化项目、安装依赖、数据库连接）；用户系统开发（创建User实体、实现注册登录功能）；以及WebSocket集成实现实时聊天功能。文章通过清晰的代码示例，展示了如何利用Nest.js的高效开发特性，结合TypeORM和Socket.IO，快速构建一个功能完备的实时通信系统。相比原生Socket实现，这种方案能显著提升开发效率和代码可维护性，特别适合需要快速迭代的现代Web应用开发。

2026-04-21 16:45:27 450

原创我在 Vue3 项目里接入 AI 后，发现前端完全变了

Vue3接入AI后，前端开发范式正经历从静态到流式、从模板到Schema驱动的转变。传统前端基于确定性数据流，而AI引入的流式输出（token逐个返回）打破了这一假设，要求UI实时适应不完整数据。本文探讨了三个关键问题：1）流式数据对前端架构的冲击（动态组件树、过渡状态管理）；2）Streaming UI的实现原理（响应式数据+ReadableStream API）；3）Schema驱动UI的架构优势。作者通过Vue3项目实践，展示了如何用Composition API管理流式状态，构建适应AI时代的前端系

2026-04-20 15:56:08 504

原创 Hermes Agent 深度解析：从概念到应用实战

Hermes Agent深度解析：从概念到应用实战 Hermes Agent是由Nous Research开发的自学习型AI智能体，具备独特的持续学习能力。本文系统剖析了这一创新技术：核心特性：内置学习循环，能从经验中积累技能支持跨会话知识整合与自我认知演进兼具自主性、交互性和目标导向性架构设计：模块化结构包含感知、决策、规划、执行、反馈和学习六大核心模块创新性记忆系统（短期/长期/程序记忆）支持知识持续进化采用混合决策机制（规则引擎+强化学习+概率推理）技术优势：相比传统AI系统具备主

2026-04-15 11:02:01 717

原创 AI Skill Server 动态技能中台

AI Skill Server 是一个基于 Node.js + Express + MySQL 的动态技能中台，采用"技能驱动型"架构实现 AI 能力的模块化和可插拔化。该系统通过统一接口契约模式（ISkill）实现技能动态注册，支持 Function Calling 实现工具自动决策调用，并采用流式响应（SSE）提供实时交互体验。核心设计包括技能注册表动态发现机制、工具执行流程自动化和完整交互日志审计功能，使 AI 系统具备自我认知、自动决策和多层次能力调用特性。

2026-04-07 18:30:36 613

原创 Vue 3 + Naive UI 企业级后台管理系统完整解析

Vue 3 + Naive UI 企业级后台管理系统摘要本项目是基于Vue 3、TypeScript和Naive UI构建的现代化后台管理系统模板，采用Vite构建工具。系统实现了完整的身份验证、权限管理、动态路由和数据可视化功能，支持多角色登录（管理员/普通用户）。核心架构特点：模块化API层设计（auth/user/system）全局配置中心化管理（环境变量/主题样式）组件化开发（ProTable等可复用组件）权限指令控制（v-permission） Pinia状态管理替代Vuex 技术栈占

2026-04-02 18:17:17 1553

原创 Rules、Skills、MCP 到底是什么？

本文清晰区分了AI开发中的三个核心概念：Rules（规则）、Skills（技能）和MCP（模型上下文协议）。Rules本质是系统提示词，用于定义AI的行为风格和安全边界；Skills基于函数调用技术，赋予AI执行具体任务的能力；MCP则是标准化接口协议，实现AI与外部工具的无缝连接。三者分别对应"立人设"、"长手眼"和"万能拓展坞"的功能层级，共同构建了AI的完整能力体系。通过Smithery等平台，开发者可以便捷获取各类MCP工具，显著提升开发效

2026-03-30 13:41:07 559

原创 Atlas —— 从零搭建一个 AI 增强的个人知识与生产力系统

本文介绍了从零开始搭建Atlas个人生产力系统的全过程。Atlas是一个纯前端的本地优先工具，整合了知识管理、任务跟踪、习惯养成、番茄钟和AI助手等功能。采用Vue3+TypeScript+Pinia技术栈，数据存储在IndexedDB中，确保隐私和离线可用性。文章详细阐述了项目的分层架构设计（模型层、存储层、服务层、状态管理层和视图层），技术选型理由，以及各模块的实现思路。重点介绍了知识库系统的构建过程，包括Markdown编辑器集成、双向链接功能和全文搜索实现。项目通过硅基流动API接入AI能力，支持多

2026-03-06 17:30:22 602

原创从零封装一套企业级表格组件库 - 基于 Layui 的实战教程

企业级表格组件库封装实战本文分享了基于Layui封装企业级表格组件库的实战经验，主要解决了原生表格组件的四大痛点：智能Tooltip - 自动判断内容溢出，悬浮显示完整内容并支持点击复制优雅固定列 - 解决CSS sticky与table布局的兼容性问题现代加载状态 - 实现骨架屏和Spinner两种加载效果子表格管理 - 支持手风琴式展开收起子表格组件采用模块化设计，拆分为TableTooltip、FixedColumnManager等6个独立组件，通过IIFE封装避免全局污染。核心功能包括：

2026-01-30 20:00:00 799

原创从零开始封装一个优雅的图片上传组件 - 二次改装 Layui-Upload 的教程（附完整封装代码）

写在前面：最近在做一个后台管理系统，需要实现头像上传和证件照上传的功能。市面上的上传组件要么太重，要么不够灵活，索性自己封装了两个组件。今天就来分享一下整个封装过程，希望能给大家一些启发。先看效果吧例1：默认效果：上传图片效果：点击Replace可进行替换，点击图片可以进行预览例2：还有一种样式是这样的效果预览效果：例3：这里又新增了一个预览效果（右侧上传完图片后会显示在左侧，然后右侧是空的可以重新添加，点击图片可以放大预览和例2一个效果）说实话，一开始我也想直接用现成的。Layui

2026-01-23 18:00:00 1469

原创实战专栏：手把手撸一个 H5 智能证件采集系统

本文探讨了H5拍照上传功能的优化方案，指出原生<input type="file">在界面控制、用户引导和图片预处理方面的不足，提出采用WebRTC+Canvas的自定义相机方案。文章从视觉层、WebRTC调用和前端环境感知三部分展开：通过100dvh解决移动端全屏适配，利用box-shadow实现高效遮罩，添加扫描线等微交互提升体验；详细解析了摄像头配置、权限管理和镜像问题的解决方案；最后介绍了通过像素分析实现光线检测和眩光预警的前端优化技巧。该方案显著提升了H5拍照的可用

2025-12-17 18:19:44 499

原创深入理解虚拟列表：从固定高度到不定高度前端实现（附完整代码）

本文深入解析虚拟列表技术原理与实现，通过固定高度和不定高度两种场景，展示如何优化长列表渲染性能。固定高度版本采用绝对定位和简单算式计算可见范围，实现O(1)复杂度的高效渲染；不定高度版本引入预计算高度数组和二分查找，解决动态高度问题。两种方案都通过"视窗+缓冲区"模式，仅渲染可视区域DOM，大幅降低内存消耗。文章提供完整原生代码实现，涵盖核心难点如位置计算、动态渲染等，帮助开发者彻底掌握这一经典性能优化技术。

2025-11-17 20:00:00 1869

原创 Vue3 后台分页开发终极指南：用 Hooks 删掉 90% 重复代码，实现高效、可复用分页系统（附完整源码与高级扩展）

摘要本文深入探讨如何利用 Vue3 的 Composition API 封装自定义 Hooks（useFetch 和 usePageFetch）来优化后台管理系统的分页开发。通过分析传统分页开发中的重复代码问题（如管理页码、加载状态等），提出了一种革命性的解决方案：基础请求 Hook（useFetch）封装了通用 API 请求逻辑，包含加载状态、错误处理和缓存机制分页专用 Hook（usePageFetch）基于 useFetch 实现，只需几行代码即可完成完整分页功能该方法可减少 90% 重复代码

2025-11-14 11:44:02 1241

原创 Vue3——Transition和TransitionGroup的区别以及最佳实践

Vue 过渡系统利用 CSS 过渡、动画或 JavaScript 钩子管理视觉变化。其核心在于检测元素插入（enter）或移除（leave）DOM 的时机，并应用预定义类或回调。这在数据驱动可见性的响应式 UI 中尤为实用。提升用户体验：平滑动画引导注意力，降低感知加载时间。易于使用：基础功能无需外部依赖，复杂场景可引入库。灵活性：支持声明式 CSS 与命令式 JS 两种方式。然而，动画并非免费——实现不当会导致卡顿、可访问性问题或代码冗余。

2025-11-13 15:31:23 1303

原创 Vue 3 多实例 + 缓存复用：理念及实践

本文探讨了在 Vue 3 中实现多实例动态创建与缓存复用的架构方案。针对传统单实例模式的局限性，提出基于"实例工厂+缓存池"的设计模式，通过Map结构管理实例，确保状态隔离与高效复用。重点介绍了初始化数据注入、Pinia状态隔离、隐藏/显示切换策略等关键技术实现，并设计了实例过期销毁机制以优化性能。该方案适用于插件嵌入、多浮窗等需要独立实例的场景，在保留状态的同时减少资源消耗，为复杂Web应用提供可扩展的架构思路。

2025-10-17 15:00:41 1304

原创 RAGFlow——结合本地知识库检索开发实战指南（包含聊天、检索本地的知识库文档和Agent模式）

《RAGFlow——知识库检索系统开发实战指南》介绍了基于Vue 3 + TypeScript的智能对话系统开发实践。系统采用模块化架构设计，实现核心功能包括：1）结构化消息数据模型支持多场景对话；2）流式响应处理提升用户体验；3）思考过程可视化展示AI推理逻辑；4）复杂引用系统处理多源文档关联。文中详细讲解了技术实现细节，如路由配置、数据结构和响应机制，并重点分析了引用系统等复杂功能的解决方案。该系统已成功应用于思想文化数智平台，具备良好的可维护性和扩展性。

2025-09-02 11:15:28 1171

原创 Vista AI 演示—— 提示词优化功能

AI提示词优化功能：基于Deepseek API的智能文本转换工具，提供4种优化模式（对话优化、专业表达、创意增强、深度分析），可将简单描述转换为精准有效的AI提示词。该功能通过优化表达清晰度、专业术语使用、创意激发和深度分析维度，显著提升AI交互质量。操作流程包括输入文本、选择模式、查看优化结果和应用优化。核心代码展示了关键词转换服务和提示词生成的实现逻辑，适用于从日常对话到专业分析的多种场景。

2025-06-30 12:26:11 1119

原创构建知识库和联网搜索对话平台：从零到一的完整开发指南

AI对话平台开发指南摘要本文详细介绍了如何从零开始开发一个集成知识库和联网搜索功能的AI对话平台。项目采用分层架构设计，前端使用原生JavaScript+TailwindCSS，后端调用RAGFlow API实现AI功能。核心功能包括：智能思维链 - 实时可视化AI思考过程文档引用系统 - 支持PDF预览和引用标记流式响应 - 实时显示AI回复内容企业级UI - 采用LayUI组件库构建响应式界面开发流程涵盖项目初始化、消息系统设计、思维链处理、文档引用和流式响应实现等关键阶段，并提供完整的

2025-06-03 13:20:47 1249

原创 Vue3+TS——打造AIVista Image Studio的在线生图工具

总的来说，结合了 Vue 3、Element Plus和强大的 AI 画图技术，做出了这个叫 AIVista Image Studio 的在线工具。它不仅能让你细致地调整各种画图参数，还通过模板、预设、参考图这些功能，让你用起来更方便、更有趣。分工合作: 把界面显示和跟 AI 沟通的代码分开写。记住状态: 用 Vue 的方法来管理用户输入和界面状态。用户感觉: 从引导页面到加载动画，再到按钮样式，都尽量做得好用、好看。安全第一。

2025-04-10 11:04:14 1525 1

原创从零开始打造HTML5拼图游戏：一个Canvas实战项目

在开始动手之前，我想分享一下为什么选择HTML5 Canvas来开发拼图游戏。相比于传统的DOM操作，Canvas提供了更高效的图形渲染能力和更灵活的像素级控制。对于拼图这种需要处理不规则形状和复杂交互的游戏来说，Canvas无疑是最佳选择。性能优异：即使在移动设备上也能流畅运行视觉效果好：支持不规则拼图形状、平滑动画和精确的图像裁剪交互体验佳：磁性吸附、拖放操作和触摸支持让游戏体验更加友好代码结构清晰：便于理解和扩展。

2025-03-31 16:14:10 1561 1

原创 Vista AI 演示——游戏开发指南

本指南详细介绍了基于大模型开发交互式文字游戏的方法，包括场景生成、角色关系管理和故事线构建。"最强剑魔是高三生"是一款基于AI生成的交互式文字冒险游戏，玩家扮演一位高三学生兼游戏主播，需要在学习和游戏之间寻找平衡。场景生成是游戏的核心机制，DeepseekClient提供了专门的API：场景结构每个生成的场景包含以下结构：进度系统设计游戏进度通过以下结构管理：游戏结束机制当玩家的任一进度指标（游戏成就、学习进度、社交关系、神秘能力）达到1

2025-03-25 11:45:21 1383

原创探索AI的无限可能，体验智能对话的未来，大模型 API 演示

这是一个基于 Vue 3 + TypeScript + Vite 构建的 Vista AI 演示项目，旨在提供一个简洁易用的界面来展示 Vista AI 大语言模型的能力。项目包含 API 演示和交互式游戏两个主要功能模块，同时支持两种不同风格的 API 调用方式。

2025-03-24 21:00:00 975

原创用cursor接入mcp协议并体验Magic生成AI网站

在开始使用之前，我们要稍微理解一下什么是mcp协议。（模型上下文协议）MCP 是一种开放式协议，它规范了应用程序向 LLM 提供上下文的方式。把 MCP 想象成人工智能应用的 USB-C 接口。

2025-03-18 16:30:09 1799

原创打造智能聊天体验：前端集成 DeepSeek AI 助你快速上手

先看完整效果：Deepseek语言模型视频演示效果图：基于 Vue 3 + TypeScript + Element Plus 开发的 AI 聊天助手，集成了 DeepSeek 的 API 服务。提供打字机模式和流式输出两种对话模式，支持多种 AI 模型切换。2. 环境配置创建文件：项目结构组件详解1. ChatContainer.vue聊天界面的核心容器组件。完整代码如下：2. ChatInput.vue输入组件特点：完整代码如下：3. MessageBubble.vue消

2025-02-08 15:46:34 7962 21

原创 vue3封装el-tour漫游式引导

这里需要注意一下第四个部分，我这里因为要直接绑定第三方组件Vant的。如果是引导饿了么的组件获取dom类型可以从官网上查看，比如绑定在。如果不用官网的方法也可以直接使用js方法获取，当然你也不需要。引入的第三方库方法我这里就不写了，可以自行去官网查找。// 引导组件显示状态（双向绑定）// 跳过按钮处理函数（暂未启用）的所以需要使用Vant中自带的。// 引导步骤项目接口定义。// 上一步按钮处理函数。// 下一步按钮处理函数。// Props 定义。// 步骤变化处理函数。// 下一步按钮文本。

2025-01-15 11:04:41 1720

原创 TypeScript 中 `type` 和 `interface` 的区别有哪些？

对比了 TypeScript 中 `type` 和 `interface` 的区别：`type` 更灵活，适合复杂类型；`interface` 更适合对象结构和类设计，两者可互补使用。

2024-12-11 10:44:59 752

原创如何用 Vue3 和 Element-Plus 打造一个交互式音乐播放器

如何用 Vue3 和 Element-Plus 打造一个交互式音乐播放器

2024-12-03 09:59:41 2224 3

原创 H5页面在线预览pdf

一般的做法是在浏览器中打开pdf文件，但是这种方式会导致浏览器的工具栏和地址栏也一起显示出来，影响用户体验。因此，我们需要在H5页面中实现一个预览pdf的功能，例如在网页或微信小程序中嵌入 PDF 文档，方便用户直接预览文件。在 HTML 中，创建一个全屏的容器 pdf-container 用于展示 PDF 页面，并通过 CSS 设置其宽高为 100vw 和 100vh，确保容器充满屏幕。由于 PDF.js 默认使用 1 倍的缩放比例，导致生成的图片在移动端显示模糊。为了解决这个问题，我们可以通过设置。

2024-10-30 11:10:32 3843 2

原创关于使用CDN方式引入原子化js时出现闪屏问题解决方法

先看问题在使用原子化 CSS（如、或）时，可能会遇到页面刷新后所有样式类丢失，再加载时体验较差的问题。这是因为样式通过 JavaScript 动态加载渲染，页面初始时 JavaScript 尚未解析完成，导致样式无法获取。通过给元素设置，等到 JavaScript 完成解析后再显示页面内容，可以解决这个问题。CSS 部分：JavaScript 部分：引入 JavaScript 文件：这样，页面在加载完成后才显示内容，避免用户看到样式丢失的过程，提升了用户体验。

2024-09-13 10:50:37 546

原创 vite6 + vue3.5 + ts 移动端开箱即用现代开发模板

vite + vue3 + ts 移动端开箱即用现代开发模板。

2024-09-13 10:33:27 2095 1

原创 Vue3+Ts+Element-Plus多级表头以及动态合并单元格

【代码】Vue3+Ts+Element-Plus多级表头以及动态合并单元格。

2024-08-06 13:58:04 1551 3

原创 TypeScript—— 泛型

用来约束泛型类型，比如我想写一个函数，用来检查对象中是否存在某个 key，如果存在则返回 true，否则返回 false，我们可以使用泛型约束来实现这个功能(此处后面会提到)比如我想写一个函数，用来检查对象中是否存在某个 key，如果存在则返回 true，否则返回 false，我们可以使用泛型约束来实现这个功能。用来获取对象的 key，比如我想写一个函数，用来获取对象的 key，我们可以使用泛型约束来实现这个功能。泛型类型允许我们创建可以适用于多种类型的类，类中的成员可以使用泛型类型进行声明和使用。

2024-07-30 15:19:54 1070 1

原创判断对象是否为空的多种方式

本文介绍了 6 种判断对象是否为空的方法，并对比了它们的性能。其中，是最快的方法，适合在性能要求较高的场景中使用。而性能较差，不建议用于大对象的判空操作。

2024-06-25 10:38:20 1001

原创我的创作纪念日

我大概是从2022年的时候了解IT行业并首次注册CSDN这个关于IT网站的账号，也是我做前端开发的开始，到如今已经差不多三年了，写博客的初衷也就是想自己学习一些技术并实时分享，记录等，当然也是对我文章感兴趣的同学们老师们进行技术的沟通，当然在这里也遇到很多的未知的坑。我希望能够在技术分享的领域更加深入和专业，不仅仅局限于基础知识的传播，更能够参与到前沿技术的讨论和研究中。那些来自读者的反馈，无论是肯定的赞扬，还是指导性的批评，都成为了我不断改进和进步的动力。每一次数字的跳动，都仿佛是在为我的努力鼓掌。

2024-06-24 10:14:41 502

原创原生js制作svg 图标生成动态 tab栏切换效果(结尾附代码)

先看效果：我想做一个 tab 栏比较美观的效果，当然切换的数据可以自己做一下，这里不演示，说一下特效如何制作。当我点击时要将空心变为实心的这么一个效果，所以准备两个五角星样式一个是空的一个是实心的 svg 图片结构大致是这样首先需要一个父元素可以定义一个标签然后就是需要一个数组里面存放文字，颜色，填充色以及描边的阴影，我这里用六个色调为一组，如果自己想设置什么颜色或者想要每个不同可以自行考虑更换2. 创建遍历元素，并添加到父级中。其中是用来做五角星发光的边框阴影接下来就是做竖着的线条的

2024-06-19 17:06:22 1448