@mijadesign/nut-mcp 1.0.0-alpha.0

package/dist/tools/search-components.tool.js

@@ -0,0 +1,61 @@
+import { z } from "zod";
+import { BaseTool } from "./base.tool.js";
+import { getIndex } from "../services/index.services.js";
+function tokenize(text) {
+    const tokens = new Set();
+    const lower = text.toLowerCase();
+    for (const word of lower.match(/[a-z]+/g) ?? []) {
+        if (word.length > 1)
+            tokens.add(word);
+    }
+    for (const char of lower.match(/[\u4e00-\u9fa5]/g) ?? []) {
+        tokens.add(char);
+    }
+    return [...tokens];
+}
+export class SearchComponentsTool extends BaseTool {
+    name = "search_components";
+    description = '按关键词搜索组件，支持中文别名（如"弹窗"→Dialog）、组件名、描述。' +
+        "结果按相关度排序，找到候选组件后必须调用 get_component_doc 获取详情再生成代码。";
+    inputSchema = z.object({
+        query: z.string().describe('搜索关键词，如"按钮"、"表单"、"Toast"'),
+    });
+    async execute(args) {
+        const { query } = args;
+        const idx = await getIndex();
+        const scoreMap = new Map();
+        // 别名直接命中
+        const aliasDir = idx.aliasMap.get(query);
+        if (aliasDir)
+            scoreMap.set(aliasDir, 999);
+        // 精确名称命中
+        const exact = idx.summaries.find((s) => s.dirName.toLowerCase() === query.toLowerCase() ||
+            s.name.split(/\s+/)[0].toLowerCase() === query.toLowerCase() ||
+            s.name.toLowerCase().includes(query.toLowerCase()));
+        if (exact) {
+            const key = exact.dirName.toLowerCase();
+            scoreMap.set(key, (scoreMap.get(key) ?? 0) + 100);
+        }
+        // 倒排检索
+        for (const token of tokenize(query)) {
+            for (const dirName of idx.invertedIndex.get(token) ?? []) {
+                const key = dirName.toLowerCase();
+                scoreMap.set(key, (scoreMap.get(key) ?? 0) + 1);
+            }
+        }
+        const results = [...scoreMap.entries()]
+            .sort((a, b) => b[1] - a[1])
+            .slice(0, 8)
+            .map(([dirKey]) => idx.byDirName.get(dirKey))
+            .filter((s) => s !== undefined);
+        if (results.length === 0) {
+            return `未找到"${query}"相关组件，请尝试其他关键词或调用 list_components 查看全部组件。`;
+        }
+        const lines = [
+            `找到 ${results.length} 个相关组件，请调用 get_component_doc 获取详情后再生成代码：`,
+            "",
+            ...results.map((s) => `- **${s.name}**（${s.dirName}）：${s.description}`),
+        ];
+        return lines.join("\n");
+    }
+}

package/dist/types/index.d.ts

@@ -0,0 +1,33 @@
+export interface ComponentSummary {
+    name: string;
+    dirName: string;
+    group?: string;
+    description: string;
+    whenToUse: string;
+}
+export interface ComponentDoc extends ComponentSummary {
+    version: string;
+    props: PropItem[];
+    demos: DemoItem[];
+}
+export interface PropItem {
+    name: string;
+    description: string;
+    type: string;
+    default: string;
+}
+export interface DemoItem {
+    title: string;
+    code: string;
+}
+export interface AliasesConfig {
+    aliases: Record<string, string>;
+}
+export interface RuntimeIndex {
+    summaries: ComponentSummary[];
+    byDirName: Map<string, ComponentSummary>;
+    byEnName: Map<string, ComponentSummary>;
+    invertedIndex: Map<string, string[]>;
+    aliasMap: Map<string, string>;
+    buildTime: number;
+}

package/dist/types/index.js

@@ -0,0 +1 @@
+export {};

package/docs/docs/aliases.json

@@ -0,0 +1,59 @@
+{
+  "aliases": {
+    "弹窗": "Dialog",
+    "弹框": "Dialog",
+    "对话框": "Dialog",
+    "按钮": "Button",
+    "输入框": "Input",
+    "输入": "Input",
+    "卡片": "Cell",
+    "列表": "Cell",
+    "开关": "Switch",
+    "切换": "Switch",
+    "复选框": "Checkbox",
+    "多选": "Checkbox",
+    "单选": "Radio",
+    "单选框": "Radio",
+    "选择器": "Picker",
+    "下拉": "Picker",
+    "标签": "Tag",
+    "徽标": "Tag",
+    "角标": "Tag",
+    "提示": "Toast",
+    "吐司": "Toast",
+    "加载": "Loading",
+    "加载中": "Loading",
+    "骨架屏": "Skeleton",
+    "导航": "NavBar",
+    "导航栏": "NavBar",
+    "表单": "Form",
+    "图片": "Image",
+    "图标": "Icon",
+    "滑块": "Slider",
+    "步骤": "Steps",
+    "步骤条": "Steps",
+    "分页": "Pagination",
+    "抽屉": "Drawer",
+    "折叠": "Collapse",
+    "折叠面板": "Collapse",
+    "轮播": "Swiper",
+    "宫格": "Grid",
+    "空格": "Space",
+    "间距": "Space",
+    "安全区": "SafeArea",
+    "分割线": "Divider",
+    "遮罩": "Overlay",
+    "空状态": "Empty",
+    "拖拽": "Drag",
+    "公告": "NoticeBar",
+    "上拉": "PullToRefresh",
+    "无限滚动": "InfiniteLoading",
+    "搜索": "SearchBar",
+    "文本域": "TextArea",
+    "上传": "Uploader",
+    "级联": "Cascader",
+    "日期": "DatePicker",
+    "选择组": "Selector",
+    "均分": "Selector"
+  }
+}

package/docs/docs/components/base/button/index.md

@@ -0,0 +1,415 @@
+---
+order: 1
+demoUrl: 'https://frontend.mishudata.com/mobile/demo/#/base/pages/button/index'
+group:
+    title: 基础组件
+    order: 2
+---
+
+# Button 按钮 <Badge>2.0.0</Badge>
+
+
+按钮用于触发一个操作，如提交表单。
+
+## 引入
+
+```tsx
+import { Button } from '@mijadesign/mjui-react-taro';
+```
+
+## 示例代码
+
+### 按钮类型
+
+按钮支持 `default`、`primary`、`info`、`warning`、`danger`、`success` 六种类型，默认为 `default`。
+
+
+```tsx
+import { Button, Space } from '@mijadesign/mjui-react-taro'
+import React from 'react'
+
+const Demo2 = () => {
+  return (
+    <Space wrap>
+      <Button type="primary">主要按钮</Button>
+      <Button type="default">次要按钮</Button>
+      <Button type="primary" fill="outline">
+        幽灵按钮
+      </Button>
+      <Button type="primary" fill="dashed">
+        虚线按钮
+      </Button>
+      <Button type="primary" fill="none">
+        文字按钮
+      </Button>
+    </Space>
+  )
+}
+export default Demo2
+
+```
+    
+### 填充模式
+
+按钮支持 `solid`、 `outline`、 `dashed`、`none`四种类型，默认为 `solid`。
+
+
+```tsx
+import { Button, Space } from '@mijadesign/mjui-react-taro'
+import React from 'react'
+
+const Demo3 = () => {
+  return (
+    <Space wrap>
+      <Button loading type="primary" />
+      <Button loading type="primary">
+        加载中
+      </Button>
+    </Space>
+  )
+}
+export default Demo3
+
+```
+    
+### 图标按钮
+
+通过 `icon` 属性来设置按钮图标，并提供`rightIcon`属性使图标在右侧显示。
+
+
+```tsx
+import { Button, Space } from '@mijadesign/mjui-react-taro'
+import { Plus, ArrowDown } from '@mijadesign/mobile-icons'
+import React from 'react'
+
+const Demo4 = () => {
+  return (
+    <Space wrap>
+      <Button type="primary" icon={<Plus />}>
+        主要按钮
+      </Button>
+      <Button type="primary" rightIcon={<ArrowDown />}>
+        主要按钮
+      </Button>
+      <Button type="primary" icon={<Plus />} rightIcon={<ArrowDown />}>
+        主要按钮
+      </Button>
+      <Button type="primary" icon={<Plus />} />
+    </Space>
+  )
+}
+export default Demo4
+
+```
+    
+### 禁用状态
+
+通过 `disabled` 属性来禁用按钮，禁用状态下按钮不可点击。
+
+
+```tsx
+import { Button, Space } from '@mijadesign/mjui-react-taro'
+import React from 'react'
+
+const Demo5 = () => {
+  return (
+    <Space wrap>
+      <Button type="primary" disabled>
+        禁用状态
+      </Button>
+      <Button type="default" fill="outline" disabled>
+        禁用状态
+      </Button>
+      <Button type="primary" fill="outline" disabled>
+        禁用状态
+      </Button>
+      <Button type="primary" fill="dashed" disabled>
+        禁用状态
+      </Button>
+    </Space>
+  )
+}
+export default Demo5
+
+```
+    
+### 按钮形状
+
+通过 `shape` 属性设置按钮形状，支持圆形、方形按钮，默认圆角为8px。
+
+
+```tsx
+import { Button } from '@mijadesign/mjui-react-taro'
+import React from 'react'
+
+const Demo6 = () => {
+  const marginStyle = { margin: '5px 0' }
+  return (
+    <>
+      <Button type="primary" block style={marginStyle}>
+        巨大52、大48、中40圆角12px
+      </Button>
+      <Button type="primary" block size="small" style={marginStyle}>
+        小32、迷你24圆角8px
+      </Button>
+      <Button shape="round" type="primary" block style={marginStyle}>
+        全圆角
+      </Button>
+      <Button shape="square" type="primary" block style={marginStyle}>
+        无圆角
+      </Button>
+    </>
+  )
+}
+export default Demo6
+
+```
+    
+### 按钮尺寸
+
+支持 `xlarge` 、 `large`、`normal`、`small`、`mini` 尺寸，默认为 `normal`。
+
+
+```tsx
+import { Button, Space } from '@mijadesign/mjui-react-taro'
+import React from 'react'
+
+const Demo8 = () => {
+  return (
+    <Space wrap align="end">
+      <Button size="xlarge" type="primary">
+        巨大52
+      </Button>
+      <Button size="large" type="primary">
+        大48
+      </Button>
+      <Button size="normal" type="primary">
+        中40
+      </Button>
+      <Button size="small" type="primary">
+        小32
+      </Button>
+      <Button size="mini" type="primary">
+        迷你24
+      </Button>
+    </Space>
+  )
+}
+export default Demo8
+
+```
+    
+### 块级元素
+
+按钮在默认情况下为行内块级元素，通过 `block` 属性可以将按钮的元素类型设置为块级元素，常用来实现通栏按钮。
+
+
+```tsx
+import { Button, Col, Row } from '@mijadesign/mjui-react-taro'
+import React from 'react'
+
+const App = () => {
+  const marginStyle = { margin: '6px 0' }
+  return (
+    <>
+      <div style={marginStyle}>01 组合按钮</div>
+      <Row gutter="12">
+        <Col span="12">
+          <Button block fill="outline">
+            次要按钮
+          </Button>
+        </Col>
+        <Col span="12">
+          <Button block type="primary">
+            主要按钮
+          </Button>
+        </Col>
+      </Row>
+      <div style={marginStyle}>02 通栏按钮</div>
+      <Button block type="primary" style={marginStyle}>
+        主要按钮
+      </Button>
+      <Button block fill="outline" style={marginStyle}>
+        次要按钮
+      </Button>
+    </>
+  )
+}
+export default App
+
+```
+    
+### 自定义颜色
+
+通过 color 属性可以自定义按钮的颜色。
+
+
+```tsx
+import React from 'react'
+import { Button, Space } from '@mijadesign/mjui-react-taro'
+
+const App = () => {
+  return (
+    <Space wrap>
+      <Button type="danger">自定义颜色</Button>
+      <Button type="primary" color="linear-gradient(270deg, #FF4949 0%, #FF7070 100%)">
+        自定义渐变
+      </Button>
+      <Button type="danger" fill="outline">
+        自定义颜色
+      </Button>
+      <Button shape="round" fill="outline" color="green">
+        自定义颜色
+      </Button>
+    </Space>
+  )
+}
+export default App
+
+```
+    
+### 设置 open-type
+
+
+```tsx
+import { Button } from '@mijadesign/mjui-react-taro'
+import React from 'react'
+
+const Demo1 = () => {
+  const marginStyle = { margin: 8 }
+  return (
+    <>
+      <Button type="primary" openType="share" style={marginStyle}>
+        Share
+      </Button>
+      <Button type="primary" openType="openSetting" style={marginStyle}>
+        打开授权设置页
+      </Button>
+    </>
+  )
+}
+export default Demo1
+
+```
+    
+### 加载状态
+
+
+```tsx
+import { Button } from '@mijadesign/mjui-react-taro'
+import React, { useState } from 'react'
+
+const Demo7 = () => {
+  const [loading, setLoading] = useState(false)
+  const marginStyle = { margin: 8 }
+  return (
+    <>
+      <Button
+        loading={loading}
+        type="primary"
+        onClick={() => {
+          setTimeout(() => {
+            setLoading(false)
+          }, 1500)
+          setLoading(!loading)
+        }}
+        style={marginStyle}
+      >
+        点击
+      </Button>
+    </>
+  )
+}
+export default Demo7
+
+```
+    
+
+## Button
+
+### Props
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| type | 按钮的样式 | `default` \| `primary` \| `warning` \| `danger` \| `success` \| `info` | `default` |
+| size | 按钮的尺寸 | `normal` \|`xlarge` \|  `large` \| `small` \| `mini` | `normal` |
+| shape | 按钮的形状 | `square` \| `round` \| `default` | `default` |
+| color | 按钮颜色，支持传入 linear-gradient 渐变色, outline 和 dashed 模式下设置的是 color，其他情况设置的是background，建议使用CSS变量实现的颜色配置 | `string` | `-` |
+| fill | 填充模式 | `solid` \| `outline`  \| `dashed` \| `none` | `solid` |
+| disabled | 是否禁用按钮 | `boolean` | `false` |
+| block | 是否为块级元素 | `boolean` | `false` |
+| icon | 按钮图标 | `ReactNode` | `-` |
+| rightIcon | 右侧按钮图标 | `ReactNode` | `-` |
+| loading | 按钮loading状态 | `boolean` | `false` |
+| nativeType | 按钮原始类型 | `submit` \| `reset` \| `button` | `button` |
+| onClick | 点击按钮时触发 | `(e: MouseEvent<HTMLButtonElement>) => void` | `-` |
+
+### 支持小程序API能力
+
+ 如果你是需要使用原生小程序 `Button` 组件能力的用户，关于原生小程序 `Button` 组件的详细API请前往[查阅更多文档](https://taro-docs.jd.com/docs/components/forms/button)
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
+
+| 名称 | 说明 | 默认值 |
+| --- | --- | --- |
+| \--nutui-button-border-radius | 按钮的默认圆角 | `$radius-2` |
+| \--nutui-button-border-width | 除 size 为 mini 的按钮的边框宽度 | `1px` |
+| \--nutui-button-danger-background-color | type 为 danger 的按钮的背景色 | `$color-danger` |
+| \--nutui-button-danger-border-color | type 为 danger 的按钮的边框色 | `$color-danger` |
+| \--nutui-button-danger-color | type 为 danger 的按钮的文本色 | `$color-primary-text` |
+| \--nutui-button-danger-disabled | type 为 danger 的按钮的禁用色 | `$color-danger-disabled` |
+| \--nutui-button-default-background-color | type 为 default 的按钮的背景色 | `$color-white` |
+| \--nutui-button-default-border-color | type 为 default 的按钮的边框色 | `$color-border-secondary` |
+| \--nutui-button-default-color | type 为 default 的按钮的文本色 | `$color-text` |
+| \--nutui-button-default-disabled | type 为 default 的按钮的禁用色 | `$color-border-secondary` |
+| \--nutui-button-default-disabled-color | type 为 default 的按钮的禁用文本色 | `$color-text` |
+| \--nutui-button-default-font-size | type 为 default 的按钮的字号 | `$font-size-3` |
+| \--nutui-button-default-height | type 为 default 的按钮的高度 | `40px` |
+| \--nutui-button-default-padding | type 为 default 的按钮的内边距 | `0px $spacing-3` |
+| \--nutui-button-icon-font-size | 按钮 icon 的字号 | `20px` |
+| \--nutui-button-info-background-color | type 为 info 的按钮的背景色 | `$color-info` |
+| \--nutui-button-info-border-color | type 为 info 的按钮的边框色 | `$color-info` |
+| \--nutui-button-info-color | type 为 info 的按钮的文本色 | `$color-primary-text` |
+| \--nutui-button-info-disabled | type 为 info 的按钮的禁用文本色 | `$color-info-disabled` |
+| \--nutui-button-large-border-radius | size 为 large 的按钮的圆角 | `$radius-2` |
+| \--nutui-button-large-font-size | size 为 large 的按钮的字号 | `$font-size-3` |
+| \--nutui-button-large-font-weight | size 为 large 的按钮的字号权重 | `$font-weight-bold` |
+| \--nutui-button-large-height | size 为 large 的按钮的高度 | `48px` |
+| \--nutui-button-large-padding | size 为 large 的按钮的内边距 | `0px $spacing-3` |
+| \--nutui-button-mini-border-radius | size 为 mini 的按钮的圆角 | `$radius-1` |
+| \--nutui-button-mini-font-size | size 为 mini 的按钮的字号 | `$font-size-1` |
+| \--nutui-button-mini-font-weight | size 为 mini 的按钮的字号权重 | `$font-weight-bold` |
+| \--nutui-button-mini-height | size 为 mini 的按钮的高度 | `24px` |
+| \--nutui-button-mini-icon-font-size | size 为 mini 的按钮的 icon 的字号 | `14px` |
+| \--nutui-button-mini-padding | size 为 mini 的按钮的内边距 | `0px $spacing-3` |
+| \--nutui-button-normal-padding | size normal 时的 padding 值 | `0px 12px` |
+| \--nutui-button-primary-border-color | type 为 primary 的按钮的边框色 | `$color-primary` |
+| \--nutui-button-primary-color | type 为 primary 的按钮的文本色 | `$color-primary-text` |
+| \--nutui-button-primary-disabled | type 为 primary 的按钮的禁用色 | `$color-primary-disabled-special` |
+| \--nutui-button-small-border-radius | size 为 small 的按钮的圆角 | `$radius-1` |
+| \--nutui-button-small-font-size | size 为 small 的按钮的字号 | `$font-size-2` |
+| \--nutui-button-small-font-weight | size 为 small 的按钮的字号权重 | `$font-weight-bold` |
+| \--nutui-button-small-height | size 为 small 的按钮的高度 | `32px` |
+| \--nutui-button-small-icon-font-size | size 为 small 的按钮的 icon 的字号 | `16px` |
+| \--nutui-button-small-padding | size 为 small 的按钮的内边距 | `0px $spacing-3` |
+| \--nutui-button-success-background-color | type 为 success 的按钮的背景色 | `$color-success` |
+| \--nutui-button-success-border-color | type 为 success 的按钮的边框色 | `$color-success` |
+| \--nutui-button-success-color | type 为 success 的按钮的文本色 | `$color-primary-text` |
+| \--nutui-button-success-disabled | type 为 success 的按钮的禁用色 | `$color-success-disabled` |
+| \--nutui-button-text-icon-margin | 带 icon 按钮的文本的边距 | `4px` |
+| \--nutui-button-warning-background-color | type 为 warning 的按钮的背景色 | `$color-warning` |
+| \--nutui-button-warning-border-color | type 为 warning 的按钮的边框色 | `$color-warning` |
+| \--nutui-button-warning-color | type 为 warning 的按钮的文本色 | `$color-primary-text` |
+| \--nutui-button-warning-disabled | type 为 warning 的按钮的禁用色 | `$color-warning-disabled` |
+| \--nutui-button-xlarge-border-radius | size 为 xlarge 的按钮的圆角 | `$radius-2` |
+| \--nutui-button-xlarge-font-size | size 为 xlarge 的按钮的字号 | `$font-size-3` |
+| \--nutui-button-xlarge-font-weight | size 为 xlarge 的按钮的字号权重 | `$font-weight-bold` |
+| \--nutui-button-xlarge-height | size 为 xlarge 的按钮的高度 | `52px` |
+| \--nutui-button-xlarge-padding | size 为 xlarge 的按钮的内边距 | `0 $spacing-3` |
+| \--nutui-button-xlarge-text-icon-margin | 带 icon 的 xlarge 按钮的文本的边距 | `6px` |
+
+