@fjyueke/bify-mcp 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Taroify
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,34 @@
+![MseeP.ai Security Assessment Badge](https://mseep.net/pr/taroify-taroify-mcp-badge.png)
+
+<p align="center">
+  <img alt="logo" src="https://img.yzcdn.cn/vant/logo.png" width="120" style="margin-bottom: 10px;">
+</p>
+<h3 align="center">可靠的小程序端 Taro React UI 组件库 MCP</h3>
+
+## 介绍
+
+Tify 是基于 Taroify 的移动端组件库，基于 Vant 视觉规范，提供一致的 API 接口，助力开发者快速搭建小程序应用。
+
+Tify MCP 是一项独立的 MCP（模型上下文协议）服务，旨在将 Tify 与大模型连接起来。它使大模型能够直接从文档中检索组件、API数据。
+
+- 直接使用 npx 运行
+- 无需外部依赖，只需要 Node 环境
+
+## Cursor 用法
+
+Cursor Mcp 使用指南参考：<https://docs.cursor.com/context/model-context-protocol#using-mcp-tools-in-agent>
+
+``` json
+{
+  "mcpServers": {
+    "@fjyueke/tify-mcp": {
+      "command": "npx",
+      "args": [
+        "-y",
+        "@fjyueke/tify-mcp",
+      ],
+      "env": {}
+    }
+  }
+}
+```

package/dist/index.d.ts

@@ -0,0 +1 @@
+#!/usr/bin/env node

package/dist/index.js

@@ -0,0 +1,248 @@
+#!/usr/bin/env node
+
+// src/index.ts
+import { McpServer } from "@modelcontextprotocol/sdk/server/mcp.js";
+import { StdioServerTransport } from "@modelcontextprotocol/sdk/server/stdio.js";
+
+// src/tools/components.ts
+import { z } from "zod";
+
+// src/services/component.service.ts
+import { existsSync, readdirSync } from "node:fs";
+import { readFile } from "node:fs/promises";
+import { join as join2 } from "node:path";
+
+// src/config.ts
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+var __dirname = dirname(fileURLToPath(import.meta.url));
+var config = {
+  paths: {
+    dataDir: resolve(__dirname, "../metaData"),
+    componentsDir: resolve(__dirname, "../metaData/components"),
+    componentsIndexPath: resolve(
+      __dirname,
+      "../metaData/components-index.json"
+    )
+  },
+  server: {
+    name: "tify-mcp",
+    version: "1.0.0",
+    description: "Provides documentation and example for Tify components"
+  }
+};
+
+// src/utils/logger.ts
+import { appendFile, mkdir } from "node:fs/promises";
+import { dirname as dirname2, resolve as resolve2 } from "node:path";
+import { fileURLToPath as fileURLToPath2 } from "node:url";
+var __dirname2 = dirname2(fileURLToPath2(import.meta.url));
+var logDir = resolve2(__dirname2, "../../logs");
+var logFile = resolve2(logDir, "mcp.log");
+var formatMessage = (level, message) => {
+  const timestamp = (/* @__PURE__ */ new Date()).toISOString();
+  return `${timestamp} [${level}] ${message}
+`;
+};
+var writeLog = async (level, message) => {
+  try {
+    await mkdir(logDir, { recursive: true });
+    await appendFile(logFile, formatMessage(level, message));
+  } catch {
+  }
+};
+var logService = {
+  info: async (message) => {
+    await writeLog("INFO", message);
+  },
+  warn: async (message) => {
+    await writeLog("WARN", message);
+  },
+  error: async (message) => {
+    await writeLog("ERROR", message);
+  },
+  debug: async (message) => {
+    if (process.env.DEBUG) {
+      await writeLog("DEBUG", message);
+    }
+  }
+};
+
+// src/services/component.service.ts
+var componentRegistryCache = null;
+var fetchComponentRegistry = async () => {
+  if (componentRegistryCache) {
+    return componentRegistryCache;
+  }
+  try {
+    const indexData = await readFile(config.paths.componentsIndexPath, "utf-8");
+    componentRegistryCache = JSON.parse(indexData);
+    return componentRegistryCache;
+  } catch (error) {
+    await logService.error(error.message);
+    return [];
+  }
+};
+var locateComponentByName = async (componentName) => {
+  const components = await fetchComponentRegistry();
+  return components.find(
+    (c) => c.name.toLowerCase() === componentName.toLowerCase() || c.dirName.toLowerCase() === componentName.toLowerCase()
+  );
+};
+var retrieveComponentDocumentation = async (componentName) => {
+  const component = await locateComponentByName(componentName);
+  if (!component) {
+    return `Documentation for component "${componentName}" not found`;
+  }
+  const docPath = join2(config.paths.componentsDir, component.dirName, "doc.md");
+  try {
+    if (existsSync(docPath)) {
+      return await readFile(docPath, "utf-8");
+    } else {
+      return `Documentation for ${component.name} not found`;
+    }
+  } catch (error) {
+    await logService.error(`${component.name}: ${error.message}`);
+    return `Failed to load documentation for ${component.name}`;
+  }
+};
+var fetchComponentApiDetails = async (componentName) => {
+  const component = await locateComponentByName(componentName);
+  if (!component) {
+    return `API documentation for component "${componentName}" not found`;
+  }
+  try {
+    const apiPath = join2(
+      config.paths.componentsDir,
+      component.dirName,
+      "api.md"
+    );
+    if (existsSync(apiPath)) {
+      return await readFile(apiPath, "utf-8");
+    }
+    return `API documentation for ${component.name} not found`;
+  } catch (error) {
+    await logService.error(`${component.name}: ${error.message}`);
+    return `Failed to load API documentation for ${component.name}`;
+  }
+};
+var fetchComponentExamples = async (componentName) => {
+  const component = await locateComponentByName(componentName);
+  if (!component) {
+    return "Component not found";
+  }
+  const examplesDir = join2(
+    config.paths.componentsDir,
+    component.dirName,
+    "example"
+  );
+  if (!existsSync(examplesDir)) {
+    return `No example found for ${component.name}`;
+  }
+  try {
+    const files = readdirSync(examplesDir);
+    const tsxFiles = files.filter((file) => file.endsWith(".tsx"));
+    if (tsxFiles.length === 0) {
+      return `No example found for ${component.name}`;
+    }
+    const examples = [];
+    for (const tsxFile of tsxFiles) {
+      const content = await readFile(join2(examplesDir, tsxFile), "utf-8");
+      examples.push(`## ${tsxFile}
+
+\`\`\`tsx
+${content}
+\`\`\``);
+    }
+    return examples.join("\n\n");
+  } catch (error) {
+    await logService.error(`${component.name}: ${error.message}`);
+    return `Failed to load examples for ${component.name}`;
+  }
+};
+
+// src/tools/components.ts
+function registerTifyTools(server) {
+  server.tool(
+    "list-components",
+    "Lists all available Tify components",
+    async () => {
+      const components = await fetchComponentRegistry();
+      return {
+        content: [
+          {
+            type: "text",
+            text: components.map((c) => c.name).join(", ")
+          }
+        ]
+      };
+    }
+  );
+  server.tool(
+    "get-component-docs",
+    "Gets detailed documentation for a specific component",
+    { componentName: z.string() },
+    async (args) => {
+      const documentation = await retrieveComponentDocumentation(
+        args.componentName
+      );
+      return {
+        content: [
+          {
+            type: "text",
+            text: documentation
+          }
+        ]
+      };
+    }
+  );
+  server.tool(
+    "get-component-props",
+    "Gets the props and API documentation for a specific component",
+    { componentName: z.string() },
+    async (args) => {
+      const propsSection = await fetchComponentApiDetails(args.componentName);
+      return {
+        content: [
+          {
+            type: "text",
+            text: propsSection
+          }
+        ]
+      };
+    }
+  );
+  server.tool(
+    "list-component-example",
+    "Lists all example available for a specific component with descriptions",
+    { componentName: z.string() },
+    async (args) => {
+      const examplesMarkdown = await fetchComponentExamples(args.componentName);
+      return {
+        content: [
+          {
+            type: "text",
+            text: examplesMarkdown
+          }
+        ]
+      };
+    }
+  );
+}
+
+// src/index.ts
+async function startMcpServer() {
+  const server = new McpServer({
+    name: config.server.name,
+    version: config.server.version,
+    description: config.server.description
+  });
+  await logService.info("\u670D\u52A1\u542F\u52A8\u6210\u529F");
+  registerTifyTools(server);
+  const transport = new StdioServerTransport();
+  await server.connect(transport);
+}
+startMcpServer().catch(async (error) => {
+  await logService.error(`\u670D\u52A1\u542F\u52A8\u5931\u8D25: ${error.message}`);
+  process.exit(1);
+});

package/metaData/components/action-sheet/api.md

@@ -0,0 +1,74 @@
+## API
+
+### ActionSheet Props
+
+| 参数                             | 说明                                  | 类型                        | 默认值   |
+| -------------------------------- | ------------------------------------- | --------------------------- | -------- |
+| defaultOpen                      | 默认是否显示动作面板                  | _boolean_                   | `false`  |
+| open                             | 是否显示动作面板                      | _boolean_                   | `false`  |
+| description <br>`v0.3.0-alpha.0` | 选项上方的描述信息                    | _ReactNode_                 | -        |
+| cancelText <br>`v0.3.0-alpha.0`  | 取消按钮文字                          | _ReactNode_                 | -        |
+| actions <br>`v0.3.0-alpha.0`     | 面板选项列表                          | _ActionSheetActionObject[]_ | -        |
+| className                        | 样式类名                              | _string_                    | -        |
+| style                            | 样式对象                              | _CSSProperties_             | -        |
+| rounded                          | 是否为圆角                            | _string_                    | -        |
+| safeArea                         | 安全区的位置，可选值为 `top` `bottom` | _string_                    | `bottom` |
+
+### ActionSheetActionObject 数据结构
+
+| 参数      | 说明           | 类型        |
+| --------- | -------------- | ----------- |
+| name      | 标题           | _ReactNode_ |
+| subname   | 二级标题       | _ReactNode_ |
+| disabled  | 是否为禁用状态 | _boolean_   |
+| loading   | 是否为加载状态 | _boolean_   |
+| value     | 值             | _any_       |
+| style     |                |             |
+| className |                |             |
+
+### ActionSheet.Backdrop Props
+
+| 参数      | 说明               | 类型               | 默认值 |
+| --------- | ------------------ | ------------------ | ------ |
+| className | 样式类名           | _string_           | -      |
+| style     | 样式对象           | _CSSProperties_    | -      |
+| duration  | 动画时长，单位毫秒 | _number \| string_ | `300`  |
+| closeable | 点击是否可以关闭   | _boolean_          | `true` |
+
+### ActionSheet.Header Props
+
+| 参数      | 说明     | 类型            | 默认值 |
+| --------- | -------- | --------------- | ------ |
+| className | 样式类名 | _string_        | -      |
+| style     | 样式对象 | _CSSProperties_ | -      |
+| title     | 标题     | _string_        | -      |
+| children  | 描述信息 | _string_        | -      |
+
+### ActionSheet.Action Props
+
+| 参数      | 说明           | 类型            | 默认值 |
+| --------- | -------------- | --------------- | ------ |
+| className | 样式类名       | _string_        | -      |
+| style     | 样式对象       | _CSSProperties_ | -      |
+| name      | 标题           | _string_        | -      |
+| value     | 选项值         | _string_        | -      |
+| disabled  | 是否为禁用状态 | _boolean_       | -      |
+| loading   | 是否为加载状态 | _boolean_       | -      |
+| children  | 描述信息       | _string_        | -      |
+
+### ActionSheet.Button Props
+
+| 参数      | 说明                        | 类型            | 默认值   |
+| --------- | --------------------------- | --------------- | -------- |
+| className | 按钮类名                    | _string_        | -        |
+| style     | 按钮样式                    | _CSSProperties_ | -        |
+| type      | 按钮类型，可选值为 `cancel` | _string_        | `button` |
+| children  | 按钮内容                    | _string_        | -        |
+
+### ActionSheet Events
+
+| 事件名   | 说明                                     | 回调参数                         |
+| -------- | ---------------------------------------- | -------------------------------- |
+| onSelect | 点击选项时触发，禁用或加载状态下不会触发 | _event: ActionSheet.ActionEvent_ |
+| onCancel | 点击取消按钮时触发                       | -                                |
+| onClose  | 关闭面板时触发                           | -                                |

package/metaData/components/action-sheet/doc.md

@@ -0,0 +1,243 @@
+# ActionSheet 动作面板
+
+### 介绍
+
+底部弹起的模态面板，包含与当前情境相关的多个选项。
+
+### 引入
+
+```tsx
+import { ActionSheet } from "@fjyueke/bify-core"
+```
+
+## 代码演示
+
+### 基础用法
+
+```tsx
+function BasicActionSheet() {
+  const [open, setOpen] = useState(false)
+  const actions = useMemo(
+    () => [
+      { name: "选项一", value: "1" },
+      { name: "选项二", value: "2" },
+      { name: "选项三", value: "3" },
+    ],
+    [],
+  )
+  return (
+    <>
+      <Cell clickable isLink title="基础用法" onClick={() => setOpen(true)} />
+      <ActionSheet
+        actions={actions}
+        open={open}
+        onSelect={() => setOpen(false)}
+        onClose={setOpen}
+      />
+    </>
+  )
+}
+```
+
+### 展示取消按钮
+
+添加`cancelText`后，会在底部展示取消按钮，点击后关闭当前面板并触发 `onCancel` 事件。
+
+```tsx
+function ActionSheetWithCancel() {
+  const [open, setOpen] = useState(false)
+  const actions = useMemo(
+    () => [
+      { name: "选项一", value: "1" },
+      { name: "选项二", value: "2" },
+      { name: "选项三", value: "3" },
+    ],
+    [],
+  )
+  return (
+    <>
+      <Cell clickable isLink title="展示取消按钮" onClick={() => setOpen(true)} />
+      <ActionSheet
+        cancelText="取消"
+        actions={actions}
+        open={open}
+        onSelect={() => setOpen(false)}
+        onCancel={() => setOpen(false)}
+        onClose={setOpen}
+      />
+    </>
+  )
+}
+```
+
+### 展示描述信息
+
+通过 `description` 和 `subname` 添加描述信息
+
+```tsx
+function ActionSheetWithDescription() {
+  const [open, setOpen] = useState(false)
+  const actions = useMemo(
+    () => [
+      { name: "选项一", value: "1", subname: "这是一段描述信息" },
+      { name: "选项二", value: "2" },
+      { name: "选项三", value: "3" },
+    ],
+    [],
+  )
+  return (
+    <>
+      <Cell clickable title="展示描述信息" isLink onClick={() => setOpen(true)} />
+      <ActionSheet
+        description="这是一段描述信息"
+        cancelText="取消"
+        actions={actions}
+        open={open}
+        onSelect={() => setOpen(false)}
+        onCancel={() => setOpen(false)}
+        onClose={setOpen}
+      />
+    </>
+  )
+}
+```
+
+### 选项状态
+
+通过 `loading` 和 `disabled` 将选项设置为加载状态或禁用状态，通过 `style`，`className` 修改样式
+
+```tsx
+function ActionSheetWithStatuses() {
+  const [open, setOpen] = useState(false)
+  const actions = useMemo(
+    () => [
+      { name: "选项一", value: "1", style: { color: "#ee0a24" } },
+      { name: "选项二", value: "2", disabled: true },
+      { name: "选项三", value: "3", loading: true },
+    ],
+    [],
+  )
+  return (
+    <>
+      <Cell clickable title="选项状态" isLink onClick={() => setOpen(true)} />
+      <ActionSheet
+        actions={actions}
+        cancelText="取消"
+        open={open}
+        onSelect={() => setOpen(false)}
+        onCancel={() => setOpen(false)}
+        onClose={setOpen}
+      />
+    </>
+  )
+}
+```
+
+### 手动控制 DOM
+
+使用 `ActionSheet.Button` 组件后，会在底部展示取消按钮，点击后关闭当前面板并触发 `onCancel` 事件。<br>
+使用`ActionSheet.Action`组件添加选项， 通过 `loading` 和 `disabled` 将选项设置为加载状态或禁用状态 <br>
+通过 `ActionSheet.Header` 组件可以在菜单顶部显示描述信息，通过选项的 `ActionSheet.Action.children` 属性可以在 `Action` 文字的下侧展示描述信息。
+
+```tsx
+function ActionSheetWithStatuses() {
+  const [open, setOpen] = useState(true)
+  return (
+    <ActionSheet open={open} onSelect={() => setOpen(false)} onClose={setOpen}>
+      <ActionSheet.Action value="1" style={{ color: "#ee0a24" }} name="着色选项" />
+      <ActionSheet.Action value="2" disabled name="禁止选项" />
+      <ActionSheet.Action value="3" loading name="选项三" />
+      <ActionSheet.Button onClick={() => setOpen(false)}>取消</ActionSheet.Button>
+    </ActionSheet>
+  )
+}
+```
+
+## API
+
+### ActionSheet Props
+
+| 参数                             | 说明                                  | 类型                        | 默认值   |
+| -------------------------------- | ------------------------------------- | --------------------------- | -------- |
+| defaultOpen                      | 默认是否显示动作面板                  | _boolean_                   | `false`  |
+| open                             | 是否显示动作面板                      | _boolean_                   | `false`  |
+| description <br>`v0.3.0-alpha.0` | 选项上方的描述信息                    | _ReactNode_                 | -        |
+| cancelText <br>`v0.3.0-alpha.0`  | 取消按钮文字                          | _ReactNode_                 | -        |
+| actions <br>`v0.3.0-alpha.0`     | 面板选项列表                          | _ActionSheetActionObject[]_ | -        |
+| className                        | 样式类名                              | _string_                    | -        |
+| style                            | 样式对象                              | _CSSProperties_             | -        |
+| rounded                          | 是否为圆角                            | _string_                    | -        |
+| safeArea                         | 安全区的位置，可选值为 `top` `bottom` | _string_                    | `bottom` |
+
+### ActionSheetActionObject 数据结构
+
+| 参数      | 说明           | 类型        |
+| --------- | -------------- | ----------- |
+| name      | 标题           | _ReactNode_ |
+| subname   | 二级标题       | _ReactNode_ |
+| disabled  | 是否为禁用状态 | _boolean_   |
+| loading   | 是否为加载状态 | _boolean_   |
+| value     | 值             | _any_       |
+| style     |                |             |
+| className |                |             |
+
+### ActionSheet.Backdrop Props
+
+| 参数      | 说明               | 类型               | 默认值 |
+| --------- | ------------------ | ------------------ | ------ |
+| className | 样式类名           | _string_           | -      |
+| style     | 样式对象           | _CSSProperties_    | -      |
+| duration  | 动画时长，单位毫秒 | _number \| string_ | `300`  |
+| closeable | 点击是否可以关闭   | _boolean_          | `true` |
+
+### ActionSheet.Header Props
+
+| 参数      | 说明     | 类型            | 默认值 |
+| --------- | -------- | --------------- | ------ |
+| className | 样式类名 | _string_        | -      |
+| style     | 样式对象 | _CSSProperties_ | -      |
+| title     | 标题     | _string_        | -      |
+| children  | 描述信息 | _string_        | -      |
+
+### ActionSheet.Action Props
+
+| 参数      | 说明           | 类型            | 默认值 |
+| --------- | -------------- | --------------- | ------ |
+| className | 样式类名       | _string_        | -      |
+| style     | 样式对象       | _CSSProperties_ | -      |
+| name      | 标题           | _string_        | -      |
+| value     | 选项值         | _string_        | -      |
+| disabled  | 是否为禁用状态 | _boolean_       | -      |
+| loading   | 是否为加载状态 | _boolean_       | -      |
+| children  | 描述信息       | _string_        | -      |
+
+### ActionSheet.Button Props
+
+| 参数      | 说明                        | 类型            | 默认值   |
+| --------- | --------------------------- | --------------- | -------- |
+| className | 按钮类名                    | _string_        | -        |
+| style     | 按钮样式                    | _CSSProperties_ | -        |
+| type      | 按钮类型，可选值为 `cancel` | _string_        | `button` |
+| children  | 按钮内容                    | _string_        | -        |
+
+### ActionSheet Events
+
+| 事件名   | 说明                                     | 回调参数                         |
+| -------- | ---------------------------------------- | -------------------------------- |
+| onSelect | 点击选项时触发，禁用或加载状态下不会触发 | _event: ActionSheet.ActionEvent_ |
+| onCancel | 点击取消按钮时触发                       | -                                |
+| onClose  | 关闭面板时触发                           | -                                |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider](/components/config-provider/) 组件。
+
+| 名称                                      | 默认值                  | 描述 |
+| ----------------------------------------- | ----------------------- | ---- |
+| --action-sheet-description-padding-bottom | _var(--padding-md)_     | -    |
+| --action-sheet-subname-margin-top         | _var(--padding-xs)_     | -    |
+| --action-sheet-subname-color              | _var(--gray-6)_         | -    |
+| --action-sheet-subname-font-size          | _var(--font-size-sm)_   | -    |
+| --action-sheet-subname-line-height        | _var(--line-height-sm)_ | -    |