如何为VSCode配置一个自定义的文档链接提供程序?

答案是利用VSCode扩展API实现自定义文档链接提供程序,通过正则识别文本模式并转换为可点击链接,提升开发效率。核心步骤包括创建扩展项目、实现DocumentLinkProvider接口的provideDocumentLinks和resolveDocumentLink方法,使用正则匹配特定格式如docs:path或ref:path,结合buildUri将匹配文本转为文件路径或URL,注册时指定适用语言类型,并在package.json中配置激活事件和用户可配置项。该方案解决了代码中“魔法字符串”难以导航的问题,支持快速跳转至文档、API或配置文件,减少上下文切换,增强代码可读与维护性,尤其适用于DSL或大型项目文档集成。性能优化建议包括精准选择文件类型、高效正则设计、利用CancellationToken取消冗余操作、避免重度同步解析及合理缓存结果。集成方面可结合内部Wiki、API文档、错误码说明等资源,提升代码审查效率与新人上手速度,并通过配置化支持多团队灵活使用。

如何为vscode配置一个自定义的文档链接提供程序?

要在VSCode里搞一个自定义的文档链接提供程序,核心就是利用VSCode的Extension API,特别是

vscode.languages.registerDocumentLinkProvider

这个接口。你需要写一个扩展,告诉VSCode哪些文本模式应该被识别为链接,以及这些链接最终指向哪里。这玩意儿能让你在代码、配置文件或者任何自定义格式的文档里,把特定文本变成可点击的超链接,直接跳转到对应的文件、URL或者甚至执行某个命令。

解决方案

配置自定义文档链接提供程序主要涉及创建一个VSCode扩展,并在其中实现

DocumentLinkProvider

接口。以下是一个基本的实现思路和代码结构:

创建VSCode扩展项目:使用

yo code

工具生成一个新扩展。

定义

DocumentLinkProvider

在你的扩展主文件(通常是

extension.ts

)中,你需要实现

DocumentLinkProvider

接口的两个核心方法:

provideDocumentLinks

resolveDocumentLink

import * as vscode from 'vscode';export class CustomLinkProvider implements vscode.DocumentLinkProvider {    // 假设我们想识别形如 'docs:some/path/to/doc.md' 的链接    // 这里的正则表达式需要根据你的实际链接格式来调整    private readonly linkPattern = /(docs|ref):([a-zA-Z0-9_-./]+)/g;    // provideDocumentLinks 负责识别文档中的所有潜在链接    public provideDocumentLinks(        document: vscode.TextDocument,        token: vscode.CancellationToken    ): vscode.ProviderResult {        const links: vscode.DocumentLink[] = [];        const text = document.getText();        let match;        while ((match = this.linkPattern.exec(text)) !== null) {            const fullMatch = match[0]; // 'docs:some/path/to/doc.md'            const linkType = match[1];  // 'docs' 或 'ref'            const linkTarget = match[2]; // 'some/path/to/doc.md'            const startPos = document.positionAt(match.index);            const endPos = document.positionAt(match.index + fullMatch.length);            const range = new vscode.Range(startPos, endPos);            // 初始创建 DocumentLink,可以先不设置 target,等到 resolveDocumentLink 时再处理            // 如果你的链接格式很简单,可以直接在这里构造 vscode.Uri            const targetUri = this.buildUri(linkType, linkTarget, document.uri);            links.push(new vscode.DocumentLink(range, targetUri));        }        return links;    }    // resolveDocumentLink 负责将 provideDocumentLinks 返回的链接转换为实际的 URI    // 这是一个可选方法,如果 provideDocumentLinks 已经提供了完整的 URI,则可以省略    // 但对于复杂或需要异步解析的链接,这个方法很有用    public resolveDocumentLink(        link: vscode.DocumentLink,        token: vscode.CancellationToken    ): vscode.ProviderResult {        // 假设 provideDocumentLinks 已经设置了 target,这里直接返回        // 如果 target 是一个占位符,你可以在这里进行更复杂的解析,        // 比如查询数据库、文件系统或者远程服务来确定最终的 URI        return link;    }    // 辅助函数:根据链接类型和目标构建实际的 URI    private buildUri(type: string, target: string, currentDocUri: vscode.Uri): vscode.Uri | undefined {        if (type === 'docs') {            // 假设 'docs:' 链接指向工作区根目录下的 'documentation' 文件夹            const workspaceFolder = vscode.workspace.getWorkspaceFolder(currentDocUri);            if (workspaceFolder) {                return vscode.Uri.joinPath(workspaceFolder.uri, 'documentation', target);            }        } else if (type === 'ref') {            // 假设 'ref:' 链接指向一个外部 URL            return vscode.Uri.parse(`https://example.com/references/${target}`);        }        return undefined;    }}// 注册你的 DocumentLinkProviderexport function activate(context: vscode.ExtensionContext) {    // 告诉 VSCode 哪些文件类型应该使用这个链接提供程序    // 这里以纯文本文件为例,你可以根据需要指定 'markdown', 'typescript', '{scheme:file, language:json}' 等    const selector: vscode.DocumentSelector = [        { scheme: 'file', language: 'plaintext' },        { scheme: 'file', language: 'markdown' }    ];    context.subscriptions.push(        vscode.languages.registerDocumentLinkProvider(selector, new CustomLinkProvider())    );}export function deactivate() {}

配置

package.json

确保你的

package.json

文件配置了激活事件,这样VSCode才能在适当的时候加载你的扩展。

{    "name": "my-custom-link-provider",    "displayName": "My Custom Link Provider",    "description": "Provides custom document links for specific patterns.",    "version": "0.0.1",    "engines": {        "vscode": "^1.80.0"    },    "categories": [        "Other"    ],    "activationEvents": [        "onLanguage:plaintext",        "onLanguage:markdown",        "workspaceContains:**/documentation/**/*.md" // 也可以根据文件路径激活    ],    "main": "./out/extension.js",    "contributes": {        // 可以在这里定义一些配置项,让用户自定义链接前缀或路径        "configuration": {            "title": "Custom Link Provider Settings",            "properties": {                "myCustomLinkProvider.docsBaseUrl": {                    "type": "string",                    "default": "https://example.com/docs/",                    "description": "Base URL for 'docs:' links."                }            }        }    },    "scripts": {        "vscode:prepublish": "npm run compile",        "compile": "tsc -p ./",        "watch": "tsc -watch -p ./",        "postinstall": "npm install --prefix .",        "test": "npm run compile && npm run unit-test"    },    "devDependencies": {        "@types/vscode": "^1.80.0",        "@types/node": "^18.15.11",        "@typescript-eslint/eslint-plugin": "^5.59.1",        "@typescript-eslint/parser": "^5.59.1",        "eslint": "^8.39.0",        "typescript": "^5.0.4",        "@vscode/test-electron": "^2.3.0"    }}

通过

activationEvents

,你可以指定当VSCode打开特定语言文件时,或者工作区包含特定文件时,你的扩展才会被激活,这有助于提高VSCode的启动性能。

这个例子展示了一个相对简单的场景,但它奠定了基础。实际应用中,

buildUri

方法会更复杂,可能需要处理相对路径、工作区根目录、甚至远程API调用来解析链接。

自定义文档链接提供程序能解决什么痛点?

说实话,这东西解决了我们日常开发中一个挺烦人的痛点:那些散落在代码、配置甚至注释里的“魔法字符串”或者特定格式的引用。你想想,项目大了,文档多了,或者你用了一些领域特定语言(DSL),里面总会有一些指向内部文档、API定义、配置项路径或者某个特定模块的文本。这些东西默认情况下就是普通文本,你得手动复制粘贴,然后去文件浏览器里找,或者去浏览器里输URL,效率低不说,还容易出错。

自定义文档链接提供程序,它就像给这些“魔法字符串”施加了魔法,让它们变成可点击的超链接。

提升导航效率: 最直接的好处就是,你看到一个

docs:api/user.md

,直接Ctrl+点击就能跳到对应的文档,不用再手动查找。这对于阅读和理解一个陌生项目,或者快速定位问题,简直是神器。增强代码可读性和可维护性: 当你的代码里有大量对内部资源的引用时,比如一个配置文件的路径,或者一个内部服务的ID,如果这些能直接点击跳转,那么代码的意图就更清晰了。维护者可以快速理解这个引用指向的是什么,而不是猜测。统一文档体验: 很多项目会有自己的内部Wiki、设计文档或者规范。通过自定义链接,你可以把这些外部资源无缝集成到VSCode的编辑体验中,让开发者在同一个IDE里完成大部分的信息获取和跳转。支持领域特定语言(DSL): 如果你的项目定义了自己的DSL,里面有各种自定义的引用语法,比如

@component(Button)

,通过链接提供程序,你可以让

Button

直接跳转到组件的定义文件,这对于DSL的开发和使用体验是质的飞跃。减少上下文切换: 频繁地在IDE和浏览器、文件管理器之间切换,会打断开发者的心流。有了自定义链接,很多信息可以在VSCode内部解决,保持专注度。

本质上,它把那些原本需要“人肉解析”的引用,变成了IDE能够理解和操作的结构化数据,极大地提升了开发效率和用户体验。

如何优化自定义文档链接的识别和解析性能?

性能问题在任何VSCode扩展中都是需要重点考虑的,尤其是文档链接提供程序,因为它可能需要扫描整个文件内容。如果处理不好,可能会导致VSCode卡顿,影响用户体验。这里有一些我个人觉得比较关键的优化点:

精准的

DocumentSelector

这是第一道防线。在

registerDocumentLinkProvider

的时候,通过

DocumentSelector

明确指定你的链接提供程序只对哪些语言或文件类型生效。比如,如果你的链接只出现在Markdown文件里,就不要让它去扫描TypeScript文件。这能显著减少不必要的处理。高效的正则表达式

provideDocumentLinks

方法中的正则表达式是性能瓶颈之一。一个设计不佳的正则表达式可能会导致灾难性的回溯(catastrophic backtracking),尤其是在大文件上。避免过度泛化: 尽量让模式更具体,减少不必要的通配符。使用非贪婪匹配:

*?

+?

通常比

*

+

更高效,尤其是在重复模式中。限制匹配范围: 如果你知道链接不会跨行,可以使用

[^n]

而不是

.

预编译正则: 在类构造函数中编译正则表达式,而不是在

provideDocumentLinks

每次调用时都重新创建。利用VSCode的CancellationToken:

provideDocumentLinks

resolveDocumentLink

都接收一个

CancellationToken

。当用户快速输入或者文件内容变化时,VSCode可能会取消之前的操作。在你的处理逻辑中,要定期检查

token.isCancellationRequested

,如果为

true

,就立即停止当前操作并返回,避免做无用功。异步处理和节流(Throttling)/防抖(Debouncing):

provideDocumentLinks

本身就是异步的: 它返回

Promise

,这意味着你可以在里面执行异步操作,比如读取其他文件、调用外部API。但要警惕,不要在每次文件内容变化时都触发耗时的异步操作。节流/防抖: 如果你的链接解析逻辑非常复杂或涉及外部IO,可以考虑在

provideDocumentLinks

的外部,通过监听

vscode.workspace.onDidChangeTextDocument

事件,配合节流或防抖机制,来控制

provideDocumentLinks

的触发频率。但这通常需要更高级的扩展架构,因为

registerDocumentLinkProvider

是直接被VSCode调用的,你无法直接控制它的触发。更实际的做法是,在

provideDocumentLinks

内部,如果发现是短时间内的重复调用,可以尝试缓存结果。增量更新(如果可能): 对于非常大的文件,如果链接只在文件的小部分区域发生变化,理论上只处理变化的部分会更高效。但VSCode的

DocumentLinkProvider

接口目前没有直接提供增量更新的机制,

provideDocumentLinks

总是接收整个

TextDocument

。所以,重点还是放在如何快速扫描整个文档。缓存解析结果: 如果

resolveDocumentLink

的解析过程很耗时(比如需要访问网络或文件系统),可以考虑缓存解析结果。当同一个链接再次被请求解析时,直接返回缓存结果。但要记得处理缓存失效的情况(比如目标文件被修改)。避免在

provideDocumentLinks

中做重度解析:

provideDocumentLinks

应该尽可能快地识别出所有潜在的链接范围,并返回一个初步的

DocumentLink

数组。实际的URI构建或更耗时的验证应该留到

resolveDocumentLink

中。因为

resolveDocumentLink

只会在用户悬停或点击链接时才被调用,这大大减少了不必要的计算。

记住,优化是一个持续的过程。先实现功能,然后用VSCode的Extension Host Profiler来找出真正的性能瓶颈,再针对性地进行优化。不要过度优化那些无关紧要的部分。

通义灵码 通义灵码

阿里云出品的一款基于通义大模型的智能编码辅助工具,提供代码智能生成、研发智能问答能力

通义灵码 31 查看详情 通义灵码

如何将自定义文档链接提供程序与现有工作流集成?

一个好的自定义文档链接提供程序,不仅仅是让文本能点击,更重要的是它能无缝地融入你的开发和协作流程,提升整体效率。这不仅仅是技术实现的问题,更是工作流程和工具链的思考。

与项目文档体系结合:

内部Wiki/知识库: 如果你们团队有Confluence、GitBook或者自建的Markdown Wiki,你的链接提供程序可以将代码中的引用(比如

wiki:feature/auth-flow

)直接指向这些外部平台的对应页面。这让开发者在阅读代码时,能快速获取到相关的设计文档、决策记录或操作指南。API文档: 对于内部API,可以将代码中的API调用(如

api:userService.getUser

)链接到自动生成的API文档(如Swagger UI或内部文档平台)的具体端点说明。错误码/日志参考: 在日志配置或错误处理代码中,将错误码(

err:1001

)链接到错误码的详细解释页面,这对于排查问题非常有帮助。

增强代码审查(Code Review)体验:

当评审者看到一个自定义链接时,可以直接点击跳转到相关的文档或资源,而不需要额外询问或查找。这可以加快评审速度,提高评审质量,确保代码变更符合现有规范或设计。在Pull Request描述中,也可以利用这些自定义链接,指向相关的设计稿、需求文档,让评审者更容易理解变更的背景。

提升新人上手速度:

新入职的开发者往往需要花费大量时间理解项目结构、内部约定和各种文档。通过自定义链接,他们可以更快地在代码和文档之间穿梭,快速构建对项目的整体认知。例如,在配置文件中看到一个

service:userService

,直接就能跳到

userService

的定义或相关文档。对于一些复杂的业务逻辑,可以在代码注释中加入指向详细设计文档的链接,帮助新人理解。

与CI/CD流程的潜在结合:

虽然链接提供程序本身不直接参与CI/CD,但它可以作为CI/CD产出的消费端。例如,如果你的CI/CD会生成一份最新的部署报告或测试报告,你可以在代码中添加指向这些报告的链接,开发者可以直接从代码跳转查看最新状态。在构建失败时,错误日志中可以包含指向具体构建步骤文档的链接,帮助开发者快速定位并解决问题。

配置化和可扩展性:

在你的扩展中提供配置项,允许用户自定义链接的前缀、基础路径或解析规则。这样,不同的项目或团队可以根据自己的实际情况进行调整,而不需要修改扩展代码。考虑支持多种链接类型,比如文件路径、HTTP URL、甚至是VSCode命令URI(

command:workbench.action.findInFiles

),以满足更广泛的需求。

集成不仅仅是技术层面的,它更关乎如何通过这个工具,优化团队的信息流转和协作效率。一个好的集成,会让开发者觉得这个功能是“自然而然”就应该存在的,而不是一个额外的负担。

以上就是如何为VSCode配置一个自定义的文档链接提供程序?的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/451672.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年11月7日 23:24:12
下一篇 2025年11月7日 23:27:55

相关推荐

  • Uniapp 中如何不拉伸不裁剪地展示图片?

    灵活展示图片:如何不拉伸不裁剪 在界面设计中,常常需要以原尺寸展示用户上传的图片。本文将介绍一种在 uniapp 框架中实现该功能的简单方法。 对于不同尺寸的图片,可以采用以下处理方式: 极端宽高比:撑满屏幕宽度或高度,再等比缩放居中。非极端宽高比:居中显示,若能撑满则撑满。 然而,如果需要不拉伸不…

    2025年12月24日
    400
  • 如何让小说网站控制台显示乱码,同时网页内容正常显示?

    如何在不影响用户界面的情况下实现控制台乱码? 当在小说网站上下载小说时,大家可能会遇到一个问题:网站上的文本在网页内正常显示,但是在控制台中却是乱码。如何实现此类操作,从而在不影响用户界面(UI)的情况下保持控制台乱码呢? 答案在于使用自定义字体。网站可以通过在服务器端配置自定义字体,并通过在客户端…

    2025年12月24日
    800
  • 如何在地图上轻松创建气泡信息框?

    地图上气泡信息框的巧妙生成 地图上气泡信息框是一种常用的交互功能,它简便易用,能够为用户提供额外信息。本文将探讨如何借助地图库的功能轻松创建这一功能。 利用地图库的原生功能 大多数地图库,如高德地图,都提供了现成的信息窗体和右键菜单功能。这些功能可以通过以下途径实现: 高德地图 JS API 参考文…

    2025年12月24日
    400
  • 如何使用 scroll-behavior 属性实现元素scrollLeft变化时的平滑动画?

    如何实现元素scrollleft变化时的平滑动画效果? 在许多网页应用中,滚动容器的水平滚动条(scrollleft)需要频繁使用。为了让滚动动作更加自然,你希望给scrollleft的变化添加动画效果。 解决方案:scroll-behavior 属性 要实现scrollleft变化时的平滑动画效果…

    2025年12月24日
    000
  • 如何为滚动元素添加平滑过渡,使滚动条滑动时更自然流畅?

    给滚动元素平滑过渡 如何在滚动条属性(scrollleft)发生改变时为元素添加平滑的过渡效果? 解决方案:scroll-behavior 属性 为滚动容器设置 scroll-behavior 属性可以实现平滑滚动。 html 代码: click the button to slide right!…

    2025年12月24日
    500
  • 如何选择元素个数不固定的指定类名子元素?

    灵活选择元素个数不固定的指定类名子元素 在网页布局中,有时需要选择特定类名的子元素,但这些元素的数量并不固定。例如,下面这段 html 代码中,activebar 和 item 元素的数量均不固定: *n *n 如果需要选择第一个 item元素,可以使用 css 选择器 :nth-child()。该…

    2025年12月24日
    200
  • 使用 SVG 如何实现自定义宽度、间距和半径的虚线边框?

    使用 svg 实现自定义虚线边框 如何实现一个具有自定义宽度、间距和半径的虚线边框是一个常见的前端开发问题。传统的解决方案通常涉及使用 border-image 引入切片图片,但是这种方法存在引入外部资源、性能低下的缺点。 为了避免上述问题,可以使用 svg(可缩放矢量图形)来创建纯代码实现。一种方…

    2025年12月24日
    100
  • 如何让“元素跟随文本高度,而不是撑高父容器?

    如何让 元素跟随文本高度,而不是撑高父容器 在页面布局中,经常遇到父容器高度被子元素撑开的问题。在图例所示的案例中,父容器被较高的图片撑开,而文本的高度没有被考虑。本问答将提供纯css解决方案,让图片跟随文本高度,确保父容器的高度不会被图片影响。 解决方法 为了解决这个问题,需要将图片从文档流中脱离…

    2025年12月24日
    000
  • 为什么 CSS mask 属性未请求指定图片?

    解决 css mask 属性未请求图片的问题 在使用 css mask 属性时,指定了图片地址,但网络面板显示未请求获取该图片,这可能是由于浏览器兼容性问题造成的。 问题 如下代码所示: 立即学习“前端免费学习笔记(深入)”; icon [data-icon=”cloud”] { –icon-cl…

    2025年12月24日
    200
  • 如何利用 CSS 选中激活标签并影响相邻元素的样式?

    如何利用 css 选中激活标签并影响相邻元素? 为了实现激活标签影响相邻元素的样式需求,可以通过 :has 选择器来实现。以下是如何具体操作: 对于激活标签相邻后的元素,可以在 css 中使用以下代码进行设置: li:has(+li.active) { border-radius: 0 0 10px…

    2025年12月24日
    100
  • 如何模拟Windows 10 设置界面中的鼠标悬浮放大效果?

    win10设置界面的鼠标移动显示周边的样式(探照灯效果)的实现方式 在windows设置界面的鼠标悬浮效果中,光标周围会显示一个放大区域。在前端开发中,可以通过多种方式实现类似的效果。 使用css 使用css的transform和box-shadow属性。通过将transform: scale(1.…

    2025年12月24日
    200
  • 为什么我的 Safari 自定义样式表在百度页面上失效了?

    为什么在 Safari 中自定义样式表未能正常工作? 在 Safari 的偏好设置中设置自定义样式表后,您对其进行测试却发现效果不同。在您自己的网页中,样式有效,而在百度页面中却失效。 造成这种情况的原因是,第一个访问的项目使用了文件协议,可以访问本地目录中的图片文件。而第二个访问的百度使用了 ht…

    2025年12月24日
    000
  • 如何用前端实现 Windows 10 设置界面的鼠标移动探照灯效果?

    如何在前端实现 Windows 10 设置界面中的鼠标移动探照灯效果 想要在前端开发中实现 Windows 10 设置界面中类似的鼠标移动探照灯效果,可以通过以下途径: CSS 解决方案 DEMO 1: Windows 10 网格悬停效果:https://codepen.io/tr4553r7/pe…

    2025年12月24日
    000
  • 使用CSS mask属性指定图片URL时,为什么浏览器无法加载图片?

    css mask属性未能加载图片的解决方法 使用css mask属性指定图片url时,如示例中所示: mask: url(“https://api.iconify.design/mdi:apple-icloud.svg”) center / contain no-repeat; 但是,在网络面板中却…

    2025年12月24日
    000
  • 如何用CSS Paint API为网页元素添加时尚的斑马线边框?

    为元素添加时尚的斑马线边框 在网页设计中,有时我们需要添加时尚的边框来提升元素的视觉效果。其中,斑马线边框是一种既醒目又别致的设计元素。 实现斜向斑马线边框 要实现斜向斑马线间隔圆环,我们可以使用css paint api。该api提供了强大的功能,可以让我们在元素上绘制复杂的图形。 立即学习“前端…

    2025年12月24日
    000
  • 图片如何不撑高父容器?

    如何让图片不撑高父容器? 当父容器包含不同高度的子元素时,父容器的高度通常会被最高元素撑开。如果你希望父容器的高度由文本内容撑开,避免图片对其产生影响,可以通过以下 css 解决方法: 绝对定位元素: .child-image { position: absolute; top: 0; left: …

    2025年12月24日
    000
  • 使用 Mask 导入本地图片时,如何解决跨域问题?

    跨域疑难:如何解决 mask 引入本地图片产生的跨域问题? 在使用 mask 导入本地图片时,你可能会遇到令人沮丧的跨域错误。为什么会出现跨域问题呢?让我们深入了解一下: mask 框架假设你以 http(s) 协议加载你的 html 文件,而当使用 file:// 协议打开本地文件时,就会产生跨域…

    2025年12月24日
    200
  • CSS 帮助

    我正在尝试将文本附加到棕色框的左侧。我不能。我不知道代码有什么问题。请帮助我。 css .hero { position: relative; bottom: 80px; display: flex; justify-content: left; align-items: start; color:…

    2025年12月24日 好文分享
    200
  • HTML、CSS 和 JavaScript 中的简单侧边栏菜单

    构建一个简单的侧边栏菜单是一个很好的主意,它可以为您的网站添加有价值的功能和令人惊叹的外观。 侧边栏菜单对于客户找到不同项目的方式很有用,而不会让他们觉得自己有太多选择,从而创造了简单性和秩序。 今天,我将分享一个简单的 HTML、CSS 和 JavaScript 源代码来创建一个简单的侧边栏菜单。…

    2025年12月24日
    200
  • 前端代码辅助工具:如何选择最可靠的AI工具?

    前端代码辅助工具:可靠性探讨 对于前端工程师来说,在HTML、CSS和JavaScript开发中借助AI工具是司空见惯的事情。然而,并非所有工具都能提供同等的可靠性。 个性化需求 关于哪个AI工具最可靠,这个问题没有一刀切的答案。每个人的使用习惯和项目需求各不相同。以下是一些影响选择的重要因素: 立…

    2025年12月24日
    300

发表回复

登录后才能评论
关注微信