open-index/open-npm huggingface dataset:
npm package: @lizhengen/sfhk-styled
Description: 原子类库基于 `Tailwind CSS` 生成，包含兼容小程序的预设文件。
Author: lizhengen
Latest version: 0.0.1

# 门店原子类库

原子类库基于 `Tailwind CSS` 生成，包含兼容小程序的预设文件。

## 文档
npm package: @lizhengen/styled
Description: 原子类库基于 `Tailwind CSS` 生成，包含兼容小程序的预设文件。
Author: lizhengen
Latest version: 0.0.3

# 门店原子类库

原子类库基于 `Tailwind CSS` 生成，包含兼容小程序的预设文件。

## 文档
npm package: @lizheyong/api-hub
Description: Terminal-based API management tool for various AI services
Author: zheyong
Latest version: 1.0.1

# API Hub

一个终端下的API管理工具，用于管理各种AI服务的API配置，支持模型列表获取、连接测试和对话测试。

## 功能特性

- 🔧 **API配置管理**: 添加、查看、更新、删除API配置
- 🌐 **多平台支持**: 支持OpenAI格式API、Claude等
- 💰 **免费/付费标识**: 区分公益站和付费API，支持筛选
- 📋 **模型列表**: 获取API提供的可用模型列表
- 🔍 **连接测试**: 测试API连接状态和可用性，支持特定模型测试
- 📊 **状态跟踪**: 显示最后测试时间和连接状态
- 💬 **对话测试**: 与指定模型进行实时对话测试
- 🔒 **安全存储**: 配置信息安全存储在本地
- 🎨 **彩色界面**: 关键信息高亮显示，易于阅读

## 安装

```bash
# 克隆项目
git clone <repository-url>
cd api-hub

# 安装依赖
npm install

# 构建项目
npm run build

# 全局安装（可选）
npm link
```

## 使用方法

### 1. 添加API配置

```bash
api-hub add
```

交互式添加新的API配置，包括：
- 渠道名称
- API URL（如: https://api.openai.com）
- API Key
- API类型（OpenAI格式/Claude/其他）
- 是否为免费/公益站
- 描述信息（可选）

### 2. 查看API配置

```bash
# 列出所有API配置
api-hub list

# 只列出免费/公益站
api-hub list free

# 查看指定API的详细信息（显示完整KEY）
api-hub get <api名称或ID>
```

**list命令显示格式：**
- ✅/❌/❓ 最后测试状态图标
- [FREE]/[PAID] 免费/付费标识
- 渠道、URL、KEY 彩色高亮显示
- 最后测试时间（多久前）
- 创建时间、描述、ID等详细信息

### 3. 测试API连接

```bash
api-hub test <api名称或ID>
```

- 测试API连接状态
- 显示可用模型列表
- 可选择特定模型进行功能测试
- 自动更新最后测试时间和状态

### 4. 获取模型列表

```bash
api-hub models <api名称或ID>
```

### 5. 模型对话测试

```bash
api-hub chat <api名称或ID>
```

选择模型后可进行实时对话，输入 `exit` 或 `quit` 退出。

### 6. 删除API配置

```bash
api-hub delete <api名称或ID>
```

## 配置文件

配置文件存储在 `~/.api-hub/config.json`，包含所有API配置信息。

## 支持的API格式

- **OpenAI格式**: 包括OpenAI官方API和各种兼容的中转站
- **Claude**: Anthropic Claude API
- **其他**: 自定义格式的API

## 开发

```bash
# 开发模式运行
npm run dev

# 构建
npm run build

# 启动
npm start
```

## 示例

```bash
# 添加一个OpenAI API配置
api-hub add
# 输入: 名称=OpenAI, URL=https://api.openai.com, Key=sk-xxx, 类型=openai

# 测试连接
api-hub test OpenAI

# 查看可用模型
api-hub models OpenAI

# 开始对话
api-hub chat OpenAI
```

## 注意事项

- API Key将以明文形式存储在本地配置文件中，请确保文件安全
- 网络连接超时设置为10秒
- 对话模式下默认使用较低的温度值以获得更稳定的回复
npm package: @lizhijundev/lzj-cli
Description: 荔枝前端脚手架
Author: lizhijun
Latest version: 1.0.0

# LZJ CLI
前端构建脚手架

# 快速上手
## 安装
```
npm i -g lzj-cli
```

## 创建项目
```
rol-cli create [-f] [-s coding|github] 项目名
```

`-f` 参数，覆盖并创建项目

`-s` 参数，切换安装模板托管平台，可选 `coding` 或者 `github`
npm package: @lizhisheng/js-avue
Description: 基于avue3.2.21进行简单修改，增加autoMinWidth属性动态计算列宽
Author: lzs
Latest version: 1.0.1

#介绍

基于avue3.2.21进行简单修改，增加autoMinWidth属性动态计算列宽


#文档
要查看Live Examples和文档，请访问https://avuejs.com.
npm package: @lizhizhi7/oliver-graph
Description: A workflow manage system with React.
Author: Oliver Li
Latest version: 0.5.9

<p align="center">
  <a href="https://ant.design">
    <img width="200" src="https://pic.intellizhi.cn/avatar/IMG_1138.JPG">
  </a>
</p>

<h1 align="center">Oliver Graph</h1>

<div align="center">

A Graph Render Engine and React Graph library.

[![NPM version](http://img.shields.io/npm/v/@lizhizhi7/oliver-graph.svg?style=flat-square)](https://www.npmjs.com/package/@lizhizhi7/oliver-graph)
[![NPM downloads](https://img.shields.io/npm/dm/@lizhizhi7/oliver-graph.svg?style=flat-square)](https://www.npmjs.com/package/@lizhizhi7/oliver-graph)
[![FOSSA Status](https://app.fossa.com/api/projects/git%2Bgithub.com%2Flizhizhi7%2Foliver-graph.svg?type=shield)](https://app.fossa.com/projects/git%2Bgithub.com%2Flizhizhi7%2Foliver-graph?ref=badge_shield)
[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)


</div>

English | [简体中文](./README-zh_CN.md)

## ✨ Features

## 🖥 Environment Support

- Modern browsers and Internet Explorer 11 (with [polyfills](https://stackoverflow.com/questions/57020976/polyfills-in-2019-for-ie11))
- Server-side Rendering
- [Electron](https://www.electronjs.org/)

| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Electron |
| --- | --- | --- | --- | --- |
| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |

## 📦 Install

```bash
npm install @lizhizhi7/oliver-graph
```

```bash
yarn add @lizhizhi7/oliver-graph
```

## 🔨 Usage


### TypeScript

## 🌍 Internationalization

## 🔗 Links
npm package: @lizhogn/image-sync-diff
Description: A React image comparison component with split/swipe/mixup modes
Latest version: 1.0.0

# @lizhogn/image-sync-diff

A powerful React image comparison component with Split, Swipe, Mixup modes, and Deep Zoom support.


### View Modes

| Side-by-Side (Split) | Swipe Mode |
| -------------------- | ---------- |
| <img src="./public/side-by-side.png" height="200" /> | <img src="./public/swipe.png" height="200" /> |
| **Strictly synced zoom & pan** | **Interactive peel slider** |

| Mixup (Overlay) | Single View |
| --------------- | ------------------ |
| <img src="./public/mixup.png" height="200" /> | <img src="./public/single_view.png" height="200" /> |
| **Opacity blending** | **Quick toggle between versions** |

### Difference (Delta)

<img src="./public/difference.png" height="200" />

*Pixel-level difference highlight*

## Features

- 🖼️ **4 View Modes**: 
  - **Split**: Side-by-side comparison with synced zoom/pan
  - **Swipe**: Interactive slider to peel between layers
  - **Mixup**: Overlay blending with opacity control
  - **Single**: One-tap toggle between images
- 🔍 **Deep Zoom**: Powered by OpenSeadragon for gigapixel image support
- ⚡ **High Performance**: 
  - Web Worker powered difference calculation
  - Canvas-based rendering
  - Tiled image loading optimization
- 🎨 **Theming**: Light/Dark mode support (system detection available)
- 🛠️ **Fully Configurable**: Extensive props for UI customization and callbacks

## Installation

```bash
npm install @lizhogn/image-sync-diff
# or
yarn add @lizhogn/image-sync-diff
# or
pnpm add @lizhogn/image-sync-diff
```

## Basic Usage

```tsx
import { ImageDiff } from '@lizhogn/image-sync-diff'
import '@lizhogn/image-sync-diff/dist/style.css' // Import styles if needed (depending on build)

function App() {
  return (
    <div style={{ height: '600px' }}>
      <ImageDiff
        baseImage="https://example.com/base.jpg"
        resultImage="https://example.com/result.jpg"
        baseLabel="Original"
        resultLabel="Processed"
      />
    </div>
  )
}
```

> **Note**: This component uses Tailwind CSS classes internally. If your project uses Tailwind, it should work out of the box. If not, the styles are bundled (check `dist/style.css` if exported).

## Props API

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `baseImage` | `string` | **Required** | URL of the base image |
| `resultImage` | `string` | **Required** | URL of the result image |
| `defaultViewMode` | `'single' \| 'split' \| 'swipe' \| 'mixup'` | `'split'` | Initial view mode |
| `defaultDiffEnabled` | `boolean` | `false` | Initial diff mode state |
| `theme` | `'light' \| 'dark' \| 'system'` | `'light'` | Color theme |
| `hideToolbar` | `boolean` | `false` | Hide the bottom toolbar |
| `disableZoomDisplay` | `boolean` | `false` | Hide zoom percentage in toolbar |
| `onViewportChange` | `(state) => void` | - | Callback on zoom/pan |
| `onViewModeChange` | `(mode) => void` | - | Callback on mode switch |

## Contributing

Pull requests are welcome!

## License

MIT
npm package: @lizikai/vue3-hooks
Description: A vue3 hooks library
Author: Lizikkai
Latest version: 1.0.3
Deprecated: This package has been renamed. Please use hooks-nice-use instead.

# Vue 项目自用hooks库

## 安装
```bash
npm install hook-lib
```
## 引入
```ts
import { useDevice, useEnv } from 'hook-lib'
```

## 示例
```vue
<template>
  <div>
    <div>是PC端吗？{{ isPC ? '是' : '不是' }}</div>
    <div>是移动端吗？{{ isMobile ? '是' : '不是' }}</div>
    <div>是否是企业微信工作环境？{{ isWxWork ? '是' : '不是' }}</div>
    <div>是否是微信工作环境？{{ isWeChat ? '是' : '不是' }}</div>
    <div>是否是浏览器环境？{{ isBroswer ? '是' : '不是' }}</div>
    <div>当前环境类型？{{ envType }}</div>
    <div>当前用户代理{{ userAgent }}</div>
  </div>
</template>

<script setup lang="ts">
    import { useDevice, usePlatformEnv } from './index'
    const { isPC, isMobile } = useDevice()
    const { isWxWork, isWeChat, isBroswer, userAgent, envType } = usePlatformEnv()
</script>
```