AI 应用Agent 工作流开发工具MCP 服务【免费下载链接】cc-wf-studioCC Workflow Studio项目地址https://gitcode.com/gh_mirrors/cc/cc-wf-studio点击查看免费下载CC Workflow StudioClaude Code Workflow Studio内置了 Slack 集成型工作流共享能力让开发者可以把在 VS Code 中搭建的工作流定义文件JSON直接分享到团队 Slack 频道并以富消息卡片Rich Message Card展示工作流名称、作者、描述等元数据团队成员从 Slack 消息一键即可把工作流导入自己的 VS Code。本文以仓库内001-slack-workflow-sharing特性的 quickstart 快速上手文档 为核心骨架结合 spec.md 功能规格、data-model.md 数据模型 与 API 契约文档 以及仓库实际源码完整讲解环境搭建、Slack App 配置、本地开发调试、核心实现原理、测试清单与故障排查读者读完可独立完成该特性的开发接入与端到端验证。1. 功能定位与文档体系该特性Feature001-slack-workflow-sharing围绕四条按优先级排序的用户故事展开用户故事 1P1— VS Code → Slack 共享将工作流 JSON 直接分享到 Slack 频道共享前执行敏感信息检测与警告Slack 上以富消息卡片展示名称、作者、描述等元数据用户故事 2P1— Slack → VS Code 一键导入团队成员点击消息卡片上的导入按钮即可在 VS Code 中自动下载、校验、落盘并打开工作流无需手动下载/放置文件用户故事 3P2— 历史工作流搜索与复用在 VS Code 内按名称、作者、频道、日期过滤搜索历史共享的工作流用户故事 4P3— Bot User Token 管理首次使用时输入并安全保存令牌自动校验有效性支持重设。与此相关的设计文档位于packages/vscode/specs/001-slack-workflow-sharing/目录下功能规格 spec.md、数据模型># 项目根目录执行 npm install # 新增 Slack 依赖Slack Web API SDK npm install slack/web-api # TypeScript 类型定义 npm install --save-dev types/node在仓库现状中slack/web-api已以^7.13.0版本声明在 packages/vscode/package.json 的dependencies中Webview 与 Extension Host 通过 pnpm workspace 统一管理。若要在 monorepo 中安装等价依赖可执行pnpm --filter cc-wf-studio add slack/web-api3. Slack App 配置3.1 创建 Slack App打开 Slack API 应用管理页面https://api.slack.com/apps选择「Create New App」→「From scratch」App Name 填写CC Workflow Studio示例选择开发用 Workspace。3.2 配置 Bot Token Scopes进入「OAuth Permissions」→「Scopes」→「Bot Token Scopes」按 quickstart 文档添加以下四项Scope用途chat:write消息投稿发送富消息卡片files:write文件上传上传工作流 JSON 附件channels:read频道列表获取groups:read消息检索Slack API 契约文档 中还额外列出files:read文件信息获取与下载即导入功能所需的下载权限实际 OAuth 配置中用户令牌User Token请求的 scope 为channels:read,groups:read,chat:write,files:read,files:write见 slack-oauth-service.ts 的userScopes配置。建议按完整链路一并配置避免导入时报missing_scope。3.3 安装 App 到工作区在「OAuth Permissions」页面顶部点击「Install to Workspace」确认访问权限后点击「Allow」安装完成后会显示「Bot User OAuth Token」。3.4 获取并保存 Bot User Token在「OAuth Permissions」页面查看「Bot User OAuth Token」令牌是以xoxb-开头的字符串示例xoxb-YOUR-TOKEN-HERE该令牌用于 VS Code 扩展首次共享时会弹出输入对话框。重要安全提醒原文明确强调Bot User Token 属于机密信息严禁硬编码进代码、严禁提交到公开仓库。实现层面说明仓库实际实现的令牌体系已演进为User Tokenxoxp-前缀优先。在 slack-token-manager.ts 中validateTokenFormat校验 Bot Token^xoxb-[A-Za-z0-9-]{36,}$validateUserTokenFormat校验 User Token^xoxp-[A-Za-z0-9-]{36,}$且storeManualConnection明确要求 User Token 必填——因为只有用 User Token 调conversations.list才能准确返回当前登录用户已加入的频道保证共享目标频道的合法性详见 slack-api-service.ts 的getChannels。4. 本地开发与调试4.1 构建扩展# TypeScript 编译 npm run build # 或使用 watch 模式开发 npm run watch实际仓库packages/vscode/package.json的build脚本是一条链式任务sync:license复制 LICENSE→sync:schema同步 workflow schema→generate:editing-flow→build:webview构建 React Webview→build:extensionvite 打包 Extension Hostwatch则由vite build --config vite.extension.config.ts --watch实现配合watch:webview可分别热更两端。4.2 调试扩展在 VS Code 中按F5打开 Extension Development Host 窗口打开 Workflow Studio点击工具栏的「Share to Slack」按钮若 Bot User Token 未配置会弹出令牌输入对话框输入在 Slack App 配置中获取的xoxb-开头的 Bot User Token。4.3 热重载修改 TypeScript 文件后运行npm run build或 watch 模式在 Extension Development Host 中按Ctrl/CmdRReload Window重新加载。5. 实现指南5.1 项目结构quickstart 规划的目标结构在仓库中均已落地路径以packages/vscode/为根src/extension/ ├── services/ │ ├── slack-api-service.ts # Slack API 集成已实现 │ ├── slack-oauth-service.ts # OAuth 认证流程已实现 │ └── ... ├── commands/ │ ├── slack-share-workflow.ts # 工作流共享命令已实现 │ └── slack-import-workflow.ts # 工作流导入命令已实现 └── utils/ ├── sensitive-data-detector.ts # 敏感信息检测已实现 ├── slack-token-manager.ts # 令牌管理已实现 ├── slack-message-builder.ts # Block Kit 消息构造已实现 └── slack-error-handler.ts # 统一错误处理已实现 src/webview/src/ ├── components/ │ └── dialogs/ │ ├── SlackShareDialog.tsx # 共享对话框已实现 │ └── SlackManualTokenDialog.tsx # 连接/令牌输入对话框已实现 └── services/ └── slack-integration-service.ts # Webview 侧通信服务已实现各文件的实际实现位于packages/vscode/src/extension/与packages/vscode/src/webview/src/源码头部注释均标注了对应契约文档方便对照阅读。5.2 实现优先级按 quickstart 划分的四个 PhasePhase 1令牌管理・基础功能SlackManualTokenDialog.tsx令牌输入对话框 UI已实现→slack-api-service.tsSlack API 集成与令牌校验Phase 2共享功能sensitive-data-detector.ts敏感信息检测→slack-share-workflow.ts共享命令→SlackShareDialog.tsx共享对话框 UI已实现Phase 3导入功能slack-import-workflow.ts导入命令→ 导入按钮 UIPhase 4搜索功能slack-api-service.ts搜索 API 扩展 Webview 搜索 UI。5.3 核心代码骨架quickstart 原例slack-api-service.ts 骨架 —— 令牌校验import * as vscode from vscode; import { WebClient } from slack/web-api; export class SlackApiService { private client: WebClient | null null; constructor(private context: vscode.ExtensionContext) {} /** * 校验 Bot User Token有效则初始化客户端 */ async validateAndStoreToken(token: string): Promise{ valid: boolean; workspaceName?: string; error?: string } { try { const client new WebClient(token); const authTest await client.auth.test(); if (!authTest.ok) { return { valid: false, error: Token validation failed }; } // 安全保存令牌 await this.context.secrets.store(slack-bot-token, token); this.client client; return { valid: true, workspaceName: authTest.team as string }; } catch (error) { return { valid: false, error: error instanceof Error ? error.message : Unknown error }; } } /** * 获取已保存的令牌 */ async getStoredToken(): Promisestring | undefined { return await this.context.secrets.get(slack-bot-token); } /** * 获取 Slack API 客户端令牌已保存时 */ async getClient(): PromiseWebClient | null { if (this.client) { return this.client; } const token await this.getStoredToken(); if (!token) { return null; } this.client new WebClient(token); return this.client; } }sensitive-data-detector.ts 骨架 —— 敏感信息检测export const SENSITIVE_PATTERNS { AWS_ACCESS_KEY: /AKIA[0-9A-Z]{16}/g, SLACK_TOKEN: /xox[baprs]-[0-9a-zA-Z-]{10,}/g, API_KEY: /api[_-]?key[\s:][]?([0-9a-zA-Z-_]{20,})/gi, // ... 其他模式 }; export class SensitiveDataDetector { detect(content: string): SensitiveDataFinding[] { const findings: SensitiveDataFinding[] []; for (const [type, pattern] of Object.entries(SENSITIVE_PATTERNS)) { const matches content.matchAll(pattern); for (const match of matches) { findings.push({ type, maskedValue: this.maskValue(match[0]), position: match.index!, severity: this.getSeverity(type) }); } } return findings; } private maskValue(value: string): string { if (value.length 8) return ***; return ${value.substring(0, 4)}...${value.substring(value.length - 4)}; } private getSeverity(type: string): low | medium | high { const highSeverity [AWS_ACCESS_KEY, PRIVATE_KEY]; const mediumSeverity [API_KEY, TOKEN, SLACK_TOKEN]; if (highSeverity.includes(type)) return high; if (mediumSeverity.includes(type)) return medium; return low; } }5.4 实际实现要点源码级印证敏感信息检测的最终形态仓库中的 sensitive-data-detector.ts 将检测器实现为一组独立的导出函数detectSensitiveData/hasSensitiveData/getHighSeverityFindings/groupFindingsByType内置 9 类检测模式比骨架更完整类型SensitiveDataType匹配模式严重级别AWS_ACCESS_KEYAKIA后接 16 位字母数字highAWS_SECRET_KEYaws_secret_access_key/aws_secret等键名后接 40 位 base64 风格串highSLACK_TOKENxox[bpoa]-前缀highGITHUB_TOKENghp_前缀 36 位highAPI_KEYapi_key/apikey键值对值 ≥ 20 位mediumTOKENtoken/auth_token/access_token键值对值 ≥ 20 位mediumPRIVATE_KEY-----BEGIN ... PRIVATE KEY-----highPASSWORDpassword/passwd/pwd键值对值 ≥ 8 位low掩码规则与骨架一致长度 ≤ 8 时整体掩码为****否则保留首尾各 4 位如AKIA...MPLE并额外提取命中位置前后各 50 字符作为上下文敏感部分以[REDACTED]占位。与>赞分享AI 应用Agent 工作流开发工具MCP 服务【免费下载链接】cc-wf-studioCC Workflow Studio项目地址https://gitcode.com/gh_mirrors/cc/cc-wf-studio点击查看免费下载相关推荐Linux 内核模块加载指南insmod 命令详解与实战Linux 内核模块加载指南insmod 命令详解与实战 Linux 内核采用模块化设计许多功能尤其是设备驱动程序以可加载内核模块Loadable KAI 应用Agent 工作流开发工具MCP 服务如何扩展py12306购票助手第三方通知集成与功能扩展全指南如何扩展py12306购票助手第三方通知集成与功能扩展全指南 py12306是一款功能强大的12306购票助手支持集群部署、多账号管理和Web页面控制。本文AI 应用Agent 工作流开发工具MCP 服务FanControl 风扇控制完整教程3 分钟装好3 套散热曲线直接照抄FanControl 风扇控制完整教程3 分钟装好3 套散热曲线直接照抄 游戏一开风扇就咆哮切回文档又嗡嗡作响问题都出在主板的固定策略上。FanContAI 应用Agent 工作流开发工具MCP 服务上一篇AO3 镜像站实操指南三步搭好一条稳定阅读链路下一篇Win11Debloat 完整指南免费一键给 Windows 11 系统瘦身提速创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考 SEO 优化官网定制响应式建站教育培训建站