# ng-componets-ui

**Repository Path**: blind181/ng-componets-ui

## Basic Information

- **Project Name**: ng-componets-ui
- **Description**: ng1.x 自建ui 库
- **Primary Language**: Unknown
- **License**: AGPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-10-19
- **Last Updated**: 2026-06-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ng-components-ui

基于 AngularJS 1.x 的通用组件库

## 组件列表

### 1. 确认对话框 (Confirm Dialog)

一个功能丰富的确认对话框组件。

**功能特性:**
- 支持多种对话框类型（信息、成功、警告、危险）
- 自定义标题和内容
- 可配置按钮文本和回调
- 支持HTML内容
- 优雅的动画效果

**使用示例:**

```javascript
angular.module('app', ['ngConfirm'])
  .controller('MyController', function($scope, $confirm) {
    $scope.showConfirm = function() {
      $confirm.show({
        title: '确认操作',
        content: '您确定要执行此操作吗？',
        type: 'warning',
        okText: '确定',
        cancelText: '取消'
      }).then(function() {
        // 用户点击确定
        console.log('确认');
      }, function() {
        // 用户点击取消
        console.log('取消');
      });
    };
  });
```

### 2. 多级树选择 (Multi-Level Tree)

支持无限层级的树形选择组件。

**功能特性:**
- 支持无限层级的树形结构
- 单选/多选模式
- 级联选择（选中父节点自动选中所有子节点）
- 父节点简化模式（选中所有子节点时只返回父节点ID）
- 半选状态显示
- 自定义ID和标签字段
- 流畅的展开/折叠动画

**使用示例:**

```html
<multi-level-tree
  tree-data="treeData"
  id="BpaId"
  label="cnName"
  cascade="true"
  multiple="true"
  cascade-return-parent-only="false"
  ng-model="selectedIds">
</multi-level-tree>
```

```javascript
angular.module('app', ['ngConfirm'])
  .controller('MyController', function($scope) {
    $scope.treeData = [
      {
        BpaId: "1",
        cnName: "一级节点",
        children: [
          {
            BpaId: "1-1",
            cnName: "二级节点",
            children: []
          }
        ]
      }
    ];

$scope.selectedIds = []; // 选中的节点ID数组
  });
```

**参数说明:**

| 参数 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| tree-data | Array | - | 树形数据 |
| id | String | 'BpaId' | ID字段名 |
| label | String | 'cnName' | 显示标签字段名 |
| cascade | Boolean | true | 是否启用级联选择 |
| multiple | Boolean | true | 是否支持多选 |
| cascade-return-parent-only | Boolean | false | 级联模式下，选中所有子节点时是否只返回父节点ID |
| ng-model | Array | - | 双向绑定的选中ID数组 |

### 3. 日期选择器 (Date Picker)

轻量的日期选择组件，支持字符串与 `Date` 对象双向绑定。

**功能特性:**
- 自动识别 `ngModel` 类型，字符串或 `Date` 对象均可
- 支持最小/最大日期范围、不可用状态、快捷操作
- 自定义日期格式与周起始日
- 纯前端实现，无额外依赖

**使用示例:**

```html
<!-- 返回 Date 对象 -->
<ng-date-picker
  ng-model="selectedDate"
  placeholder="请选择日期"
  clearable="true">
</ng-date-picker>

<!-- 返回字符串 -->
<ng-date-picker
  ng-model="birthdayString"
  format="YYYY/MM/DD"
  placeholder="请选择生日">
</ng-date-picker>
```

```javascript
angular.module('app', ['ngConfirm'])
  .controller('MyController', function($scope) {
    $scope.selectedDate = new Date();
    $scope.birthdayString = '1995/08/16';
    $scope.rangeStart = new Date(2024, 0, 1);
    $scope.rangeEnd = new Date(2024, 11, 31);
  });
```

**参数说明:**

| 参数 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| ng-model | String / Date | - | 双向绑定的值，初始类型决定返回类型 |
| placeholder | String | `请选择日期` | 输入框占位文本 |
| format | String | `YYYY-MM-DD` | 自定义输出格式（字符串返回时有效） |
| min-date | String / Date | - | 最小可选日期，超出时自动校准 |
| max-date | String / Date | - | 最大可选日期，超出时自动校准 |
| disabled | Boolean | false | 是否禁用组件 |
| clearable | Boolean | true | 是否显示清空按钮 |
| show-today | Boolean | true | 是否显示“今天”快捷按钮 |
| show-clear | Boolean | 与 `clearable` 同步 | 是否显示底部清空按钮 |
| start-week-on-monday | Boolean | false | 周视图是否从周一开始 |

### 4. 时间选择器 (Time Picker)

轻量的时间选择组件，支持字符串、`Date` 与时间范围双向绑定。

**功能特性:**
- 自动识别 `ngModel` 类型，字符串或 `Date` 对象均可
- 支持单值时间与开始/结束范围时间
- 支持只读、禁用、手动输入、清空和不同尺寸
- 单值时间与范围时间统一使用滚轮式时间面板
- 提供轻量 `popper-class` / `popper-style` / `popper-options` 扩展能力

**使用示例:**

```html
<!-- 单值时间 -->
<ng-time-picker
  ng-model="meetingTime"
  placeholder="请选择会议时间"
  clearable="true">
</ng-time-picker>

<!-- 范围时间 -->
<ng-time-picker
  ng-model="officeHours"
  is-range="true"
  start-placeholder="上班时间"
  end-placeholder="下班时间">
</ng-time-picker>
```

```javascript
angular.module('app', ['ngConfirm'])
  .controller('MyController', function($scope) {
    $scope.meetingTime = '09:30:00';
    $scope.officeHours = ['09:00:00', '18:00:00'];
    $scope.deliveryCutoff = new Date();
  });
```

**参数说明:**

| 参数 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| ng-model | String / Date / Array | - | 单值时支持字符串或 `Date`，范围模式支持长度为 2 的数组 |
| readonly | Boolean | false | 完全只读，不允许打开面板或手动输入 |
| disabled | Boolean | false | 是否禁用组件 |
| editable | Boolean | true | 输入框是否允许手动输入 |
| clearable | Boolean | true | 是否显示清空按钮 |
| size | String | `default` | 输入框尺寸，支持 `small / default / large` |
| placeholder | String | `请选择时间` | 单值模式占位文本 |
| start-placeholder | String | `开始时间` | 范围模式开始占位文本 |
| end-placeholder | String | `结束时间` | 范围模式结束占位文本 |
| minute-step | Number | `1` | 分钟列步长，按步长生成可选项并自动吸附输入值 |
| second-step | Number | `1` | 秒列步长，按步长生成可选项并自动吸附输入值 |
| is-range | Boolean | false | 是否启用时间范围选择 |
| arrow-control | Boolean | false | 兼容保留属性，当前统一使用滚轮式时间面板 |
| format | String | `HH:mm:ss` | 面板展示和输入解析格式 |
| value-format | String | 跟随 `format` | 字符串模式输出格式 |
| popper-class | String | `''` | 下拉面板额外类名 |
| popper-style | String / Object | - | 下拉面板自定义样式 |
| popper-options | Object | `{ placement: 'bottom-left', offset: 4, appendToBody: false, matchTriggerWidth: true }` | 轻量弹层定位配置 |
| on-change | Function | - | 选中值变化回调 |
| on-blur | Function | - | 输入框失焦回调 |

### 5. 图片预览 (Image Preview)

为任意图片提供双击放大预览与缩放控制。

**功能特性:**
- 双击图片打开全屏预览对话框
- 内置放大、缩小、重置缩放控制
- 支持自定义高清原图地址与标题文案
- 背景点击、`Esc` 键均可关闭，自动屏蔽滚动条

**使用示例:**

```html
<img
  ng-image-preview
  src="/assets/thumb.jpg"
  preview-src="/assets/fullsize.jpg"
  preview-title="产品海报"
  alt="产品海报缩略图">
```

```javascript
angular.module('app', ['ngConfirm'])
  .controller('MyController', function($scope) {
    $scope.disablePreview = false;
  });
```

```html
<!-- 禁用预览 -->
<img ng-image-preview preview-disabled="disablePreview" src="/assets/sample.png">
```

**参数说明:**

| 参数 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| preview-src | String | `img` 的 `src` | 预览时使用的高清大图地址 |
| preview-title | String | `img` 的 `title` | 预览对话框底部文案 |
| preview-alt | String | `img` 的 `alt` | 预览图片的 `alt` 属性 |
| preview-disabled | Boolean | false | 是否禁用预览功能 |

### 6. 富文本编辑器 (TinyMCE)

使用 TinyMCE 封装的富文本编辑器组件，支持快速按需加载与自定义配置。

**功能特性:**
- 默认按需从 CDN 加载 TinyMCE，亦可自定义脚本与资源地址
- 暴露完整 TinyMCE 配置对象，可配置插件、工具栏、语言等
- 与 `ngModel` 双向绑定，支持禁用态和初始化回调
- 自动同步外部值变化，并在配置变更后重新构建实例
- 通过 `readonly-config` 为只读模式提供预览、全屏等个性化工具栏
- 可选的 `image-preview-enabled` 让编辑器内图片支持 Ant Design 风格的“双击查看大图”：包含放大/缩小、旋转、镜像、重置等操作，且不修改原始内容；同时支持 `data-preview-src` 指定高清图
- 通过 `language` 属性可快速在中英文之间切换；当设置为 `zh_CN` 且未自定义 `language_url` 时，会自动使用官方中文语言包 CDN

**使用示例:**

```html
<ng-tinymce
  ng-model="article.content"
  placeholder="请输入内容..."
  config="tinymceOptions"
  readonly-config="tinymceReadonlyConfig"
  language="zh_CN"
  image-preview-enabled="true"
  on-init="handleEditorInit($editor)">
</ng-tinymce>

<!-- 在富文本中可使用 data-preview-src / data-preview-title 指定大图 -->
<img src="/assets/thumb.jpg" data-preview-src="/assets/hires.jpg" data-preview-title="海报大图">
```

```javascript
angular.module('app', ['ngComponents'])
  .controller('ArticleEditorCtrl', function($scope) {
    $scope.article = {
      content: '<p>欢迎使用 TinyMCE 富文本组件。</p>'
    };

    $scope.tinymceOptions = {
      plugins: 'lists link image table code fullscreen',
      toolbar: 'undo redo | bold italic underline | bullist numlist | link image | code fullscreen',
      height: 360
    };

    $scope.tinymceReadonlyConfig = {
      toolbar: 'preview fullscreen',
      plugins: 'fullscreen preview',
      menubar: false
    };
    $scope.enableTinymceImagePreview = true;

    $scope.handleEditorInit = function(editor) {
      console.log('TinyMCE ready', editor.id);
    };
  });
```

**参数说明:**

| 参数 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| ng-model | String | - | 双向绑定的 HTML 内容 |
| config | Object | `{ menubar: false, plugins: 'lists link image table code fullscreen', ... }` | TinyMCE 初始化配置，支持覆盖所有官方参数 |
| placeholder | String | - | 未输入时显示的占位文本 |
| disabled | Boolean | false | 是否只读 |
| readonly-config | Object / Boolean | - | 只读模式下的额外配置；对象可包含 TinyMCE 配置项以及 `preserveToolbar`（默认 `true`）；传 `true` 使用内置预览+全屏工具栏 |
| image-preview-enabled | Boolean | false | 是否启用编辑器内图片双击预览大图功能（不改变富文本内容，使用独立浮层展示） |
| language | String | - | 编辑器语言标识，例如 `'en'` / `'zh_CN'`；实际语言包加载建议通过 npm 引入对应的 TinyMCE 语言文件（如 `tinymce-i18n` 包）或在项目构建中自行处理，不在组件内部依赖在线 CDN |
| on-init | Function | - | 初始化完成回调，接收 `$editor` 实例 |

> 预览大图支持在富文本图片节点上添加 `data-preview-src`（或 `preview-src`）及 `data-preview-title`（或 `preview-title`），双击时会优先使用这些属性。

## 安装

```bash
npm install
```

## 开发

```bash
npm run dev
```

浏览器访问 `http://localhost:8080/demo/index.html` 查看组件演示；也可直接打开 `http://localhost:8080/demo/angular-strap.html` 体验 Angular-Strap 全组件示例。

## 构建

```bash
npm run build
```

构建后的文件位于 `dist/` 目录。

## 在项目中使用

1. 引入构建后的文件:

```html
<link rel="stylesheet" href="path/to/ng-confirm.css">
<script src="https://cdn.jsdelivr.net/npm/angular@1.8.3/angular.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/angular-strap@2.3.12/dist/angular-strap.min.js"></script>
<script src="path/to/ng-confirm.js"></script>
```

2. 在AngularJS模块中注入依赖:

```javascript
angular.module('yourApp', ['ngConfirm']);
```

3. 使用组件:

```javascript
// 确认对话框
$confirm.show({
  title: '提示',
  content: '确认删除吗？',
  type: 'danger'
}).then(function() {
  // 确认操作
});

// 树选择
<multi-level-tree
  tree-data="data"
  ng-model="selected">
</multi-level-tree>
```

## 依赖

- AngularJS 1.8.x
- angular-strap 2.3.x

## 许可证

MIT