open-index/open-npm huggingface dataset:
npm package: @jiayangbot/use-modal
Description: Simple way to control your modal
Author: jiayangbot
Latest version: 1.0.0

# @jiayangbot/use-modal

> Simple way to control modal

[![NPM](https://img.shields.io/npm/v/@jiayangbot/use-modal.svg)](https://www.npmjs.com/package/@jiayangbot/use-modal) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @jiayangbot/use-modal
```

## Usage

### Call function
in Modal.js
```tsx
import { closeModal, useModal } from '@jiayangbot/use-modal'

const Modal = () => {
  const { open, data } = useModal('modal_name')

  if (!open) return null
  return (
    <div>
      {/* modal content */}
      <Button onClick={() => closeModal('modal_name')}>close</Button>
    </div>
  )
}

export default Modal
```

in somewhere
```tsx
import { openModal } from '@jiayangbot/use-modal'

openModal('modal_name')
```

### use InitModal
in MyModal.js
```tsx
import { closeModal, useModal, initModal } from '@jiayangbot/use-modal'

export const MyModal = initModal('modal_name')

const Modal = () => {
  const { open, data } = MyModal.useModal()

  if (!open) return null
  return (
    <div>
      {/* modal content */}
      <Button onClick={() => MyModal.close()}>close</Button>
    </div>
  )
}

export default Modal
```

in somewhere
```tsx
import { MyModal } from 'path/MyModal.js'

MyModal.open({ data:['a'] })
```

## License

MIT
npm package: @jiayouzuo/css-scope-vite
Description: Vite插件：通过hash前缀实现CSS作用域隔离，解决模块联邦中的样式冲突
Latest version: 0.1.8

# @jiayouzuo/css-scope-vite

Vite插件：通过hash前缀实现CSS作用域隔离，解决模块联邦中的样式冲突问题。

## 核心场景

在模块联邦（微前端）架构中，主应用和远端应用可能使用不同版本的antd，导致样式冲突：

```
主应用（antd 5.x）：.ant-btn { color: blue; }
远端应用（antd 4.x）：.ant-btn { color: red; }
→ 样式互相覆盖！
```

使用本插件后：

```
主应用：.ha1b2c3d-ant-btn { color: blue; }
远端应用：.he5f6g7h-ant-btn { color: red; }
→ 完全隔离！
```

## 支持的库

- **antd** 4.x / 5.x
- **@designable/react** (低代码设计器)
- **@formily/antd** (通过 antd 的 ConfigProvider 自动支持)
- 用户自定义的 CSS 类名

## 安装

```bash
npm install @jiayouzuo/css-scope-vite -D
# 或
pnpm add @jiayouzuo/css-scope-vite -D
```

## 使用

```typescript
// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import cssScopePlugin from '@jiayouzuo/css-scope-vite'

export default defineConfig({
  plugins: [
    // ⚠️ 重要：cssScopePlugin 必须放在 react() 之前！
    cssScopePlugin({
      scope: '[hash:8]',           // hash长度，默认8位
      projectId: 'my-app',         // 项目标识，用于生成唯一hash
      include: [
        'src/',                    // 处理用户代码
        'node_modules/antd/',      // 处理antd的CSS和JS
        'node_modules/@designable/' // 处理@designable的CSS和JS
      ],
      exclude: []                  // 排除的目录（可选）
    }),
    react()
  ]
})
```

### 为什么必须放在 React 插件之前？

Vite插件按数组顺序执行。本插件需要处理**原始的JSX代码**来识别和替换className：

```jsx
// 原始JSX代码
<div className="header-box">

// cssScopePlugin处理后
<div className="ha1b2c3d-header-box">

// 最后由react()编译成
React.createElement("div", { className: "ha1b2c3d-header-box" })
```

如果react()先执行，JSX会被编译成`React.createElement`调用，本插件就无法识别className属性了。

## 配置选项

| 选项 | 类型 | 必填 | 默认值 | 说明 |
|------|------|------|--------|------|
| scope | string | 是 | - | hash格式，如 `[hash:8]` |
| projectId | string | 否 | package.json的name | 项目标识，用于生成唯一hash |
| include | string[] | 是 | - | 需要处理的目录列表 |
| exclude | string[] | 否 | [] | 排除的目录列表 |

### include 配置说明

**重要**：只有在 `include` 中配置的路径才会被处理，包括：
- CSS/Less 文件的选择器转换
- JSX/TSX 文件的 className 转换
- antd/@designable 的 prefixCls 修改

```typescript
include: [
  'src/',                     // 用户代码
  'node_modules/antd/',       // antd 的 CSS 和 JS
  'node_modules/@designable/' // @designable 的 CSS 和 JS
]
```

如果只配置了 `'src/'`，则 antd 和 @designable 的样式不会被处理。

## 工作原理

1. **CSS处理**：使用PostCSS给所有类选择器添加hash前缀
2. **JS处理**：
   - 用户代码：使用Babel替换className字符串
   - antd：修改 `defaultPrefixCls` 变量
   - @designable：修改 `Layout.defaultProps.prefixCls`
3. **Hash生成**：`'h' + md5(projectId).slice(0, hashLength)`

### 转换示例

```css
/* 原CSS */
.ant-btn { color: blue; }
.dn-app { background: #fff; }
.header-box { padding: 10px; }

/* 转换后 */
.ha1b2c3d-ant-btn { color: blue; }
.ha1b2c3d-dn-app { background: #fff; }
.ha1b2c3d-header-box { padding: 10px; }
```

```jsx
/* 原JSX */
<div className="header-box">
<Button className="my-btn">

/* 转换后 */
<div className="ha1b2c3d-header-box">
<Button className="ha1b2c3d-my-btn">
```

## 注意事项

- 与CSS Modules互斥，不能同时使用
- 处理第三方库会增加构建时间
- DevTools中看到的是带hash的类名
- 修改 `include` 配置后需要清除 `node_modules/.vite` 缓存

## 调试

启动时控制台会输出：
```
[css-scope-plugin] 项目ID: my-app, Hash前缀: ha1b2c3d
```

## License

MIT
npm package: @jiayouzuo/mcp-web-search
Description: MCP Server for web search and content fetching
Author: jiayouzuo
Latest version: 0.1.1

# @jiayouzuo/mcp-web-search

MCP Server for web search and content fetching - 网络搜索与内容抓取的 MCP 服务器

## 功能特性

- 🔍 **网络搜索**：使用 DuckDuckGo 搜索引擎（免费，无需 API Key）
- 📄 **内容抓取**：获取网页内容并智能提取主体文本
- 🔗 **链接提取**：从网页中提取所有链接
- 💾 **智能缓存**：15 分钟缓存减少重复请求
- 🎯 **内容解析**：使用 Readability 算法提取核心内容

## 安装

### 全局安装（推荐）

```bash
npm install -g @jiayouzuo/mcp-web-search
```

### 本地安装

```bash
npm install @jiayouzuo/mcp-web-search
```

## 配置

在 Claude Code 配置文件中添加：

**位置：** `~/.claude/config.json` 或 `~/.config/claude/config.json`

```json
{
  "mcpServers": {
    "web-search": {
      "command": "mcp-web-search"
    }
  }
}
```

或使用 npx：

```json
{
  "mcpServers": {
    "web-search": {
      "command": "npx",
      "args": ["@jiayouzuo/mcp-web-search"]
    }
  }
}
```

## 可用工具

### 1. web_search

搜索网络内容

**参数：**
- `query` (string, 必需): 搜索关键词
- `maxResults` (number, 可选): 最多返回结果数，默认 5
- `language` (string, 可选): 语言偏好，默认 zh-cn

**示例：**
```typescript
{
  "query": "Vue 3 最新特性",
  "maxResults": 5,
  "language": "zh-cn"
}
```

### 2. fetch_url

获取 URL 内容并提取主体文本

**参数：**
- `url` (string, 必需): 要获取的 URL
- `extractContent` (boolean, 可选): 是否提取主体内容，默认 true
- `format` (string, 可选): 返回格式 (text/markdown/html)，默认 text

**示例：**
```typescript
{
  "url": "https://example.com/article",
  "extractContent": true,
  "format": "markdown"
}
```

### 3. extract_links

从 URL 提取所有链接

**参数：**
- `url` (string, 必需): 要提取链接的 URL
- `filter` (string, 可选): 正则表达式过滤器

**示例：**
```typescript
{
  "url": "https://example.com",
  "filter": "^https://example\\.com/docs"
}
```

## 开发

### 本地开发

```bash
# 安装依赖
npm install

# 开发模式
npm run dev

# 构建
npm run build

# 监听模式
npm run watch
```

### 项目结构

```
mcp-web-search/
├── src/
│   ├── index.ts           # MCP Server 入口
│   ├── tools/             # 工具实现
│   │   ├── search.ts      # web_search
│   │   ├── fetch.ts       # fetch_url
│   │   └── links.ts       # extract_links
│   ├── services/          # 核心服务
│   │   ├── http.ts        # HTTP 客户端
│   │   ├── parser.ts      # HTML 解析
│   │   └── search.ts      # 搜索服务
│   └── types/             # 类型定义
│       └── index.ts
├── build/                 # 编译输出
├── package.json
└── tsconfig.json
```

## 技术栈

- **TypeScript**: 类型安全
- **@modelcontextprotocol/sdk**: MCP 官方 SDK
- **axios**: HTTP 客户端
- **cheerio**: HTML 解析
- **@mozilla/readability**: 内容提取
- **jsdom**: DOM 模拟
- **node-cache**: 内存缓存

## 许可证

MIT

## 作者

jiayouzuo
npm package: @jiayouzuo/module-federation-vite
Description: Enhanced Vite plugin for Module Federation with auto CSS injection support
Author: ZY Team
Latest version: 1.0.3

# @jiayouzuo/module-federation-vite

Enhanced Vite plugin for Module Federation with automatic CSS injection support.

## Features

- ✅ Full Module Federation support for Vite
- ✅ **Auto CSS injection** when `bundleAllCSS: true` is enabled
- ✅ CSS files are automatically loaded with remote modules
- ✅ Based on `@module-federation/vite` v1.9.4

## Installation

```bash
npm install @jiayouzuo/module-federation-vite
# or
pnpm add @jiayouzuo/module-federation-vite
# or
yarn add @jiayouzuo/module-federation-vite
```

## Usage

Replace `@module-federation/vite` with `@jiayouzuo/module-federation-vite` in your `vite.config.ts`:

```typescript
import { defineConfig } from 'vite';
import { federation } from '@jiayouzuo/module-federation-vite';

export default defineConfig({
  plugins: [
    federation({
      name: 'remote_app',
      filename: 'remoteEntry.js',
      exposes: {
        './Component': './src/Component.tsx',
      },
      shared: {
        react: { singleton: true },
        'react-dom': { singleton: true },
      },
      bundleAllCSS: true,  // Enable auto CSS injection
      manifest: true,      // Required for CSS injection
    }),
  ],
});
```

## What's Enhanced?

### Auto CSS Injection

When `bundleAllCSS: true` and `manifest: true` are enabled, this plugin automatically:

1. Collects all CSS files from the bundle
2. Injects CSS loading code into `remoteEntry.js`
3. Uses `import.meta.url` to resolve CSS paths dynamically
4. Loads CSS files automatically when the remote module is loaded

**Before (original plugin):**
- CSS files are collected but not loaded
- Manual CSS imports required in every component
- CSS may not load correctly in production

**After (this plugin):**
- CSS files are automatically loaded with the remote module
- No manual CSS imports needed
- Works correctly in both development and production

## Implementation Details

The plugin injects the following code into `remoteEntry.js`:

```javascript
// Auto-inject CSS files (bundleAllCSS patch)
(function() {
  const cssFiles = ["style-hash.css"];
  const loadedCss = new Set();
  const baseUrl = import.meta.url.substring(0, import.meta.url.lastIndexOf('/'));
  cssFiles.forEach(cssFile => {
    if (loadedCss.has(cssFile)) return;
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = baseUrl + '/' + cssFile;
    document.head.appendChild(link);
    loadedCss.add(cssFile);
  });
})();
```

## Configuration

All configuration options from `@module-federation/vite` are supported. See the [original documentation](https://github.com/module-federation/vite) for details.

## License

MIT

## Credits

Based on [@module-federation/vite](https://github.com/module-federation/vite) by Giorgio Boa.
npm package: @jiayouzuo/shared-js
Description: 通用JavaScript工具函数库
Author: ZY Team
Latest version: 1.0.9

# @jiayouzuo/shared-js

通用 JavaScript 工具函数库，支持 ESM / CommonJS / UMD。

## 安装

```bash
npm install @jiayouzuo/shared-js
```

## 功能模块

| 模块 | 说明 |
|------|------|
| `http` | HTTP 请求封装（拦截器、重试、取消） |
| `timer` | 定时器工具（rafTimeout、idleCallback） |
| `format` | 格式化工具（数值、日期、中文大写金额） |
| `validate` | 验证工具（类型判断、格式校验） |
| `uid` | 唯一ID生成（uuid、雪花ID、时间戳ID） |
| `ws` | WebSocket 封装（自动重连、心跳） |
| `safe` | 安全函数（JSON、Storage、属性访问） |
| `worker` | Web Worker 封装（内联函数、Promise 化） |
| `transport` | WebTransport 封装（HTTP/3、双向流、数据报） |

## 快速使用

```typescript
import {
  http,              // HTTP 客户端
  formatDate,        // 日期格式化
  isEmptyValue,      // 空值判断
  uuid,              // UUID 生成
  safeLocalStorage,  // 安全 localStorage
  createWebSocket,   // WebSocket 客户端
  runInWorker        // Worker 执行
} from '@jiayouzuo/shared-js'

// HTTP 请求
const users = await http.get('/api/users')

// 日期格式化
formatDate(new Date(), 'YYYY-MM-DD HH:mm:ss')

// 空值判断
isEmptyValue(null)  // true
isEmptyValue('')    // true
isEmptyValue([])    // true

// UUID
uuid()  // 'a1b2c3d4-e5f6-7890-abcd-ef1234567890'

// 安全存储
safeLocalStorage.set('user', { name: '张三' })
safeLocalStorage.get('user')  // { name: '张三' }

// Worker 执行（不阻塞主线程）
const sum = await runInWorker(
  (nums) => nums.reduce((a, b) => a + b, 0),
  [1, 2, 3, 4, 5]
)  // 15
```

## License

MIT
npm package: @jiayouzuo/uniapp-shared-js
Description: uni-app 通用工具函数库
Author: ZY Team
Latest version: 1.5.2

# @jiayouzuo/uniapp-shared-js

uni-app 通用工具函数库

## 安装

```bash
npm install @jiayouzuo/uniapp-shared-js
```

## API 速查表

### 📡 request.ts - 网络请求

| 导出项 | 类型 | 作用 |
|--------|------|------|
| `createRequest` | 函数 | 创建请求实例，支持自动重试、401重登录、文件上传 |
| `ApiResponse` | 类型 | 响应数据结构 |
| `RequestOptions` | 类型 | 请求配置 |
| `UploadOptions` | 类型 | 上传配置 |
| `RequestConfig` | 类型 | 请求实例配置 |

### 💾 storage.ts - 本地存储

| 导出项 | 类型 | 作用 |
|--------|------|------|
| `setStorage` | 函数 | 设置存储，支持过期时间 |
| `getStorage` | 函数 | 获取存储，自动处理过期 |
| `removeStorage` | 函数 | 移除存储 |
| `clearStorage` | 函数 | 清空存储 |
| `StorageOptions` | 类型 | 存储配置 |

### ⏱️ timer.ts - 定时器工具

| 导出项 | 类型 | 作用 |
|--------|------|------|
| `createTimer` | 函数 | 创建定时器，支持立即执行、次数限制 |
| `createCountdown` | 函数 | 创建倒计时定时器 |
| `delay` | 函数 | 延时执行（Promise版本） |
| `debounce` | 函数 | 防抖函数 |
| `throttle` | 函数 | 节流函数 |
| `TimerOptions` | 类型 | 定时器配置 |
| `TimerInstance` | 类型 | 定时器实例 |

### 🔒 safe.ts - 安全工具

| 导出项 | 类型 | 作用 |
|--------|------|------|
| `jsonParse` | 函数 | 安全的JSON解析，失败返回默认值 |
| `jsonStringify` | 函数 | 安全的JSON序列化，失败返回默认值 |
| `toNumber` | 函数 | 安全的数字转换，失败返回默认值 |
| `arrayAt` | 函数 | 安全的数组访问，越界返回默认值 |

### 🔐 crypto.ts - 加密工具

| 导出项 | 类型 | 作用 |
|--------|------|------|
| `aesCBCDecrypt` | 函数 | AES-CBC解密 |
| `aesCBCEncrypt` | 函数 | AES-CBC加密 |
| `base64Encode` | 函数 | Base64编码 |
| `base64Decode` | 函数 | Base64解码 |
| `simpleHash` | 函数 | 简单哈希（非安全场景） |

### 🆔 uid.ts - UUID生成

| 导出项 | 类型 | 作用 |
|--------|------|------|
| `uuid` | 函数 | 生成UUID v4 |
| `shortId` | 函数 | 生成短ID（8位） |
| `timestampId` | 函数 | 生成时间戳ID |

### 🔌 socket.ts - WebSocket管理

| 导出项 | 类型 | 作用 |
|--------|------|------|
| `createWebSocketManager` | 函数 | 创建WebSocket管理器，支持心跳、自动重连、消息分发 |
| `WebSocketOptions` | 类型 | WebSocket配置 |
| `WebSocketMessage` | 类型 | WebSocket消息结构 |
| `WebSocketManager` | 类型 | WebSocket管理器实例 |

### 📁 fileSystem.ts - 文件系统

| 导出项 | 类型 | 作用 |
|--------|------|------|
| `getUserDir` | 函数 | 获取用户文件根目录 |
| `resolvePath` | 函数 | 拼接完整文件路径 |
| `writeFile` | 函数 | 写入文件 |
| `readFile` | 函数 | 读取文件 |
| `appendFile` | 函数 | 追加内容到文件末尾 |
| `removeFile` | 函数 | 删除文件 |
| `copyFile` | 函数 | 复制文件 |
| `renameFile` | 函数 | 重命名/移动文件 |
| `mkdir` | 函数 | 创建目录（支持递归） |
| `rmdir` | 函数 | 删除目录 |
| `readDir` | 函数 | 读取目录内容 |
| `readDirWithStats` | 函数 | 读取目录详细内容（含文件信息） |
| `getFileStats` | 函数 | 获取文件/目录信息 |
| `exists` | 函数 | 检查文件/目录是否存在 |
| `getFileSize` | 函数 | 获取文件大小 |
| `saveTempFile` | 函数 | 保存临时文件到用户目录 |
| `readJSON` | 函数 | 读取JSON文件 |
| `writeJSON` | 函数 | 写入JSON文件 |
| `clearDir` | 函数 | 清空指定目录下的所有文件 |

### 📅 date.ts - 时间格式化

| 导出项 | 类型 | 作用 |
|--------|------|------|
| `formatDate` | 函数 | 格式化时间，返回多种格式（formatted、dateStr、timeStr、relative等） |
| `DateResult` | 类型 | 时间格式化结果 |

### 📝 format.ts - 数字格式化

| 导出项 | 类型 | 作用 |
|--------|------|------|
| `formatThousand` | 函数 | 千分位格式化 |
| `formatNumber` | 函数 | 数字简化显示（1.2万、1.2亿） |
| `formatFileSize` | 函数 | 格式化文件大小（KB、MB、GB） |
| `formatPercent` | 函数 | 格式化百分比 |
| `FormatNumberOptions` | 类型 | 数字简化配置 |

## License

MIT
npm package: @jiazhiwei/dev-server
Description: a mock server: you can config api response with typescript through web page.
Author: jiaZhiWei
Latest version: 1.1.2

# 一个开发用mock服务器



## 1、安装

使用npm：

```bash
npm i @easily-tools/mock-server --save-dev
```

使用yarn：

```bash
yarn add @easily-tools/mock-server -D
```

使用pnpm：

```bash
pnpm add @easily-tools/mock-server -D
```

----

## 2、Configuration

A sample **mock.config.json** configuration is provided below:

```json
{
  "$schema": "https://raw.githubusercontent.com/a-super-cat/dev-server/main/mock-config-schema.json",
  "serverPort": 3000,		// mock 服务端口，不是必须的，默认：3000,
  "wsServerPort": 3001,		// mock 服务的ws端口，用来向管理页面推送消息
  "mockDir": "mock",		// 存储mock文件的文件夹默认mock
  "proxy": {
    "/test": {				// 代理网站后请求的前缀
      "target": "http://example.com/", // 支持http和https
    }
  }
}
```

例子：访问  "http://localhost:3000/test/api/xxx" 等于访问 "http://example.com/api/xxx"

## 3、启动服务

使用npm：

```bash
npx mock
```

使用yarn：

```bash
yarn mock
```

使用pnpm：

```bash
pnpm mock
```

**Notice:**
如果命令mock已经被别的package占用，可使用mock-server命令替代

----

## 4、使用

### 4.1 安装并启动

[![add-start.gif](https://i.postimg.cc/vBwMcxjM/add-start.gif)](https://postimg.cc/zL74Qv8P)

### 4.2 添加一个mockItem

**Note:**  返回值配置是一个函数，它接收实际的请求参数（对于GET请求，它们也会作为对象传入函数中）。你可以根据这些参数灵活配置返回值

[![useCase.gif](https://i.postimg.cc/vTM0gGbc/useCase.gif)](https://postimg.cc/YGn6TK4H)

### 4.3 添加一个带有路径参数的Api

**Note:**  如果API有路径参数，配置API时请在开头使用冒号标记该位置是一个路径参数。在场景的响应配置中，你可以使用`pathParams`来获取请求时的实际参数。它是一个字符串类型的数组，数组中参数的顺序与定义API时的路径参数顺序相同。

[![with-Path-Param.gif](https://i.postimg.cc/x1kdf7Tr/with-Path-Param.gif)](https://postimg.cc/sMrzKThK)

### 4.4 自动计算响应

**Note:**  如果没有选择场景，将返回与请求参数最匹配的场景配置的返回值（基于场景参数的字段和值以及实际请求参数计算），如果有多个匹配，将返回最近配置的场景的结果。

[![auto-Response.gif](https://i.postimg.cc/MTvkVcXv/auto-Response.gif)](https://postimg.cc/gXFBP2VW)

### 4.5 选中场景

**Note:** 如果你选择了一个场景，当有请求进来时，将返回对应选择场景的返回值配置。如果你再次点击场景名称，可以取消选择。

[![when-Selected-Scene.gif](https://i.postimg.cc/Y0bBWJwz/when-Selected-Scene.gif)](https://postimg.cc/XBGPM1qr)



### 4.6 精简模式

**Note:** 你可以选择简洁模式，它以简洁的方式显示信息。要查看完整信息的模拟项，请点击模拟项左侧的图标。此外，如果你对模拟项进行了修改，它将切换到正常模式。

[![brief-Model.gif](https://i.postimg.cc/N01ksXTR/brief-Model.gif)](https://postimg.cc/v1ZVXc0m)



### 4.7 使用迭代期管理场景

[![use-Iteration.gif](https://i.postimg.cc/c4X7nBkm/use-Iteration.gif)](https://postimg.cc/jLnJVPbw)

### 4.8 设置

**Note:** 如果你想通过真实请求创建一个模拟项，你需要在设置中进行配置。你可以选择密码加密方法和盐值。如果没有加密，请选择'none'。在'Login Api'的末尾，你可以选择使用头部或查询方法来加密信息。在'Auth Conf'中，左侧的字段是系统所需的字段，而右侧的字段是你的登录接口所需的字段，用于字段映射。

​	auth配置用于定义认证信息的格式。如果你的格式与默认的不同，请相应地进行修改。

[![setting.gif](https://i.postimg.cc/VNngCCF1/setting.gif)](https://postimg.cc/v185RDjS)

### 4.9 在项目中使用

**Note：** 你可以在env文件中配置，以在开发的时候请求mock服务

[![screenshots.gif](https://i.postimg.cc/qMp6FgWv/screenshots.gif)](https://postimg.cc/F1nKdF9M)

### 联系信息:

如果你在使用的过程中发现了什么bug，或者有什么可以优化的地方可以在我的github提交issue，也可以通过邮箱联系to_great_again@outlook.com.