open-index/open-npm huggingface dataset:
npm package: @giszhc/tree-line-style
Description: 一个扩展El-Tree树组件连接线样式库
Latest version: 0.0.1

# @giszhc/tree-line-style

一个扩展 Element Plus `el-tree` 树组件连接线样式的 CSS 库，让树组件的层级关系更加清晰美观。

## ✨ 特性

- 🎨 自定义连接线颜色、宽度、样式
- 🔧 可配置的节点缩进和横线长度
- 📱 支持 dashed 和 solid 两种线型
- 🚀 开箱即用，无需复杂配置
- 💡 优化叶子节点的图标占位

## 📦 安装

```bash
npm install @giszhc/tree-line-style
# 或
pnpm add @giszhc/tree-line-style
# 或
yarn add @giszhc/tree-line-style
```

## 🚀 快速使用

在项目中引入样式后，直接在 `el-tree` 组件上添加类名即可：

```html
<el-tree class="normal-tree-line-style" :data="data" />
```

## ⚙️ 自定义配置

通过 CSS 变量来自定义连接线的样式：

```html
<el-tree 
  class="normal-tree-line-style"
  style="--tree-line-color: #409EFF; --tree-line-width: 2px;"
  :data="data" 
/>
```

### 可用的 CSS 变量

| 变量名 | 默认值 | 说明 |
|--------|--------|------|
| `--tree-line-color` | `#DCDFE6` | 连接线颜色 |
| `--tree-line-width` | `1px` | 连接线宽度 |
| `--tree-line-style` | `dashed` | 线条类型：`dashed` / `solid` |
| `--tree-node-padding` | `16px` | 节点缩进距离 |
| `--tree-horizontal-line-width` | `20px` | 横线长度 |
| `--tree-line-top` | `18px` | 横线距离节点顶部距离 |
| `--tree-line-left-offset` | `-2px` | 连接线左偏移 |
| `--tree-no-icon-placeholder-size` | `4px` | 叶子节点图标占位大小 |

## 📝 完整示例

```html
<el-tree 
  class="normal-tree-line-style"
  style="
    --tree-line-color: #67C23A;
    --tree-line-width: 2px;
    --tree-line-style: solid;
    --tree-node-padding: 20px;
  "
  :data="treeData" 
  :expand-on-click-node="false"
/>
```

## 🎯 注意事项

1. **直接使用**：直接在 `el-tree` 组件上添加 `normal-tree-line-style` 类名即可
2. **Element Plus 依赖**：本库基于 Element Plus 的 `el-tree` 组件，请确保已安装并引入 Element Plus
3. **样式优先级**：如果与其他样式冲突，可以通过提高选择器优先级或使用 `!important` 解决

## 📄 许可证

MIT License

## 🤝 贡献

欢迎提交 Issue 和 Pull Request！

---

用心打造，专为 Element Plus 用户而作 ❤️
npm package: @giszhc/viewer-utils
Description: 一个基于 [viewerjs](https://github.com/fengyuanchen/viewerjs) 封装的轻量级图片预览库，支持多种输入格式，开箱即用，并针对现代前端开发进行了 Tree Shaking 优化。
Latest version: 0.0.2

# viewer-utils 图片预览工具库

一个基于 [viewerjs](https://github.com/fengyuanchen/viewerjs) 封装的轻量级图片预览库，支持多种输入格式，开箱即用，并针对现代前端开发进行了 Tree Shaking 优化。

支持以下特性：

- **单图预览**：支持直接传入 URL、事件对象或 DOM 元素
- **列表预览**：支持字符串数组或对象数组，自动识别数据格式
- **本地预览**：支持 `File` 对象预览（如文件上传前的预览）
- **自动清理**：预览关闭后自动销毁实例并移除临时 DOM 节点
- **TypeScript**：完善的类型定义支持

------

## 安装

你可以通过 npm 安装该库：

```bash
pnpm install @giszhc/viewer-utils
```

------

## 使用方法

### previewSingle(source: string | Event | HTMLImageElement): void

预览单张图片。支持传入图片 URL 字符串、点击事件对象或直接传入图片 DOM 元素。

```ts
import { previewSingle } from '@giszhc/viewer-utils';
import "@giszhc/viewer-utils/dist/viewer-utils.css"

// 方式 1: 传入 URL
previewSingle('https://example.com/photo.jpg');

// 方式 2: 在点击事件中使用
const handleClick = (e: MouseEvent) => {
    previewSingle(e);
};
```

### previewList(imgList: (string | IImageItem)[], index: number = 0): void

预览图片列表。支持纯地址数组或带信息的对象数组。

```ts
import { previewList } from '@giszhc/viewer-utils';
import "@giszhc/viewer-utils/dist/viewer-utils.css"

const images = [
    'https://example.com/1.jpg',
    { name: '图片2', url: 'https://example.com/2.jpg', thumb: 'https://example.com/2_thumb.jpg' }
];

// 预览并定位到第二张图
previewList(images, 1);
```

### previewFiles(fileList: File[], index: number = 0): void

预览 `File` 对象数组。通常用于表单上传前的文件预览，内部会自动处理 `Blob URL` 的生成。

```ts
import { previewFiles } from '@giszhc/viewer-utils';
import "@giszhc/viewer-utils/dist/viewer-utils.css"

const input = document.querySelector('input[type="file"]');
input.addEventListener('change', (e) => {
    const files = Array.from(e.target.files);
    previewFiles(files);
});
```

### previewPicture(imgList: IImageItem[], index: number = 0): void

核心预览方法。接收标准化的对象数组，提供最完整的自定义能力。

```ts
import { previewPicture, type IImageItem } from '@giszhc/viewer-utils';
import "@giszhc/viewer-utils/dist/viewer-utils.css"

const items: IImageItem[] = [
    { name: '风景', url: 'full.jpg', thumb: 'thumb.jpg' }
];
previewPicture(items, 0);
```

------

## 接口定义

```ts
interface IImageItem {
    name: string;   // 图片名称（预览时显示的标题）
    url: string;    // 高清图地址（data-original）
    thumb: string;  // 缩略图地址（src）
}
```

------

## 样式自定义

库会默认注入一些基础样式（如背景毛玻璃效果）。如果你需要覆盖样式，可以针对以下类名编写 CSS：

- `.viewer-backdrop`: 背景遮罩
- `.viewer-toolbar`: 工具栏样式