{"id":22316969,"url":"https://github.com/wszgrcy/ng-window","last_synced_at":"2025-07-29T12:30:41.273Z","repository":{"id":34807609,"uuid":"182515468","full_name":"wszgrcy/ng-window","owner":"wszgrcy","description":"基于angular和material-design设计的多窗口操作页面","archived":false,"fork":false,"pushed_at":"2023-01-07T04:52:34.000Z","size":6920,"stargazers_count":12,"open_issues_count":38,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-05T12:23:01.036Z","etag":null,"topics":["angular","angular-material"],"latest_commit_sha":null,"homepage":"https://wszgrcy.github.io/ng-window/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wszgrcy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-04-21T09:41:05.000Z","updated_at":"2022-04-25T05:22:22.000Z","dependencies_parsed_at":"2023-01-15T09:30:53.141Z","dependency_job_id":null,"html_url":"https://github.com/wszgrcy/ng-window","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/wszgrcy/ng-window","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wszgrcy%2Fng-window","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wszgrcy%2Fng-window/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wszgrcy%2Fng-window/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wszgrcy%2Fng-window/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wszgrcy","download_url":"https://codeload.github.com/wszgrcy/ng-window/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wszgrcy%2Fng-window/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267686336,"owners_count":24127715,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-29T02:00:12.549Z","response_time":2574,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-material"],"created_at":"2024-12-03T23:08:22.604Z","updated_at":"2025-07-29T12:30:40.849Z","avatar_url":"https://github.com/wszgrcy.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# NgWindow\n\n## 安装\n- `npm i`\n- e2e部分(如果要跑),可能需要通过某种方式进行下载(仅在启动e2e测试时需要)\n- puppeteer 如果不跑e2e可以去掉此依赖包增加安装速度和未知报错(需要某种方式进行下载)\n## 启动\n- `npm start`\n\n## 端对端测试\n- `npm run e2e`\n\n## 构建\n- `npm run build`\n## 说明\n- 支持各种框架的web-componet组件及原生写法的引入\n- 支持angular的模块懒加载\n- 窗口模式,支持多任务切换和显示\n- 通过网络调试模块,拦截请求返回模拟数据,加快调试\n- 组件引入简单,耦合度低\n\n---\n\n## 组件(平时写的组件库展示在这里,更新延迟)\n- [项目地址](https://github.com/wszgrcy/cyia-ngx-component)\n- 需要安装`cyia-ngx-component`\n- 所有组件均有实例\n\n\n| 组件名     | 描述                                                | 引入模块                  | 选择器                | 备注                                                                                                                                    |\n| ---------- | --------------------------------------------------- | ------------------------- | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |\n|自定义选择器|仿照日期选择器的风格,为了适应不同的输入模式开发|CyiaCustompickerModule|`cyia-custompicker-toggle`,`cyia-custompicker-wrapper`|支持弹窗模式与附加模式,弹窗模式因为无法手动传入相关参数,导致不能支持异步加载|\n| 颜色选择器 | 为了支持(补全)ie11上无法应用选择器而开发的组件,     | CyiaColorPickerModule     | cyia-colorpicker      |\n| 上传       | 为了补全material-design上没有相关上传组件而开发     | CyiaUploadModule          | cyia-upload           | 引入后其父元素的点击事件会触发上传,建议如下使用 ```\u003cbutton mat-button color=\"primary\"\u003ePrimary\u003ccyia-upload\u003e\u003c/cyia-upload\u003e\u003c/button\u003e   ``` |\n| 时间选择器 | 为了给material-design的日期选择增加小时和分钟的设置 | CyiaDatePickerModule      | cyia-datepicker       | 与日期选择器中的`\u003cinput matInput [matDatepicker]=\"picker\" \u003e`使用一致,替换其标签                                                         |\n| 切换组件   | 类似名片的正反面,通过切换显示另一面                 | CyiaComponentToggleModule | cyia-component-toggle | 需要两个模板作为正面显示和反面显示                                                                                                      |\n\n### 自定义选择器\n- 通过自己定义相关逻辑,将控件融合到matd风格的表单中\n- 支持同步加载和异步加载组件\n- 支持dialog和overlay两种显示模式\n\n### 颜色选择器\n- 一个angular的自定义表单控件\n- 支持模板驱动表单和动态表单\n- 返回16进制的颜色\n### 上传\n- 两种上传均需要父元素包裹.均基于`mat-button`设计,但是可通过`depth`调整所属父元素\n#### 通用上传\n- 一个angular的自定义表单控件\n- 支持模板驱动表单和动态表单\n\n\n| 属性               | 类型                                                                                                                      | 描述                                                                      | 默认值 |\n| ------------------ | ------------------------------------------------------------------------------------------------------------------------- |-|-|\n| acceptType         | [与file类型的input相同](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#Unique_file_type_specifiers) |\n| multiple           | boolean                                                                                                                   | 是否是多文件                                                              |\n| depth              | number                                                                                                                    | 和父元素相隔的层级,默认为依据mat-button设计                               | 2      |\n| nameInput          | HTMLInputElement                                                                                                          | 如果设置了该属性,上传文件的文件名将显示在nameInput元素中,仅限为单文件状态 |\n| disabled           | boolean                                                                                                                   | 是否禁用                                                                  |\n| fileOnBeforeUpload | (_value, value: File[]) =\u003e Promise\u003cany\u003e                                                                                   | 一般选择文件是为了上传,此属性是处理文件在上传前的操作                     |\n| fileOnUpload       | `(_value, value: File[]) =\u003e Promise\u003cany\u003e`,value为上一个返回值                                                             | 一般选择文件是为了上传,此属性是处理文件如何上传                           |\n| fileOnAfterUpload  | `(_value, value: File[]) =\u003e Promise\u003cany\u003e`,value为上一个返回值                                                             | 一般选择文件是为了上传,此属性是处理文件上传后,返回值为表单控件的值        |\n\n#### 图片上传\n\n- 选择器`cyia-upload4image`\n- 一个angular的自定义表单控件\n- 支持模板驱动表单和动态表单\n\n| 属性       | 类型          | 描述                                                  | 默认值                                               |\n| ---------- | ------------- | ----------------------------------------------------- | ---------------------------------------------------- |\n| hasBtnView | boolean       | 是否有查询按钮                                        | false                                                |\n| accept     | string        | 接受的图片类型                                        | 'image/gif,image/jpeg,image/jpg,image/png,image/svg' |\n| unit       | {value,label} | 显示大小,value:b,kb,mb,gb;label为要显示的单位,例如:兆 |\n| depth      | number        | 和父元素相隔的层级,默认为依据mat-button设计           | 2                                                    |\n| multiple   | boolean       | 是否是多文件                                          | false                                                |\n\n\n### 时间选择器\n- 一个angular的自定义表单控件\n- 支持模板驱动表单和动态表单\n\n| 属性          | 类型          | 描述                      | 默认值 |\n| ------------- | ------------- | ------------------------- | ------ |\n| accurate      | boolean       | 用来决定是否显示小时,分钟 | false  |\n| matDatepicker | MatDatepicker |\n\n### 切换组件\n| 属性      | 类型   | 描述                             | 默认值 |\n| --------- | ------ | -------------------------------- | ------ |\n| direction | string | 动画选择方向,x,y,z               |\n| duration  | number | 动画持续时间,毫秒数              |\n| origin    | string | 与`transform-origin`设置属性一致 |\n\n--------\n\n## 指令\n- 引入包`cyia-ngx-component`\n- 引入模块 `CyiaDirectiveModule`\n\n\n| 指令名       | 描述                                                                                                                       | 选择器               |\n| ------------ | -------------------------------------------------------------------------------------------------------------------------- | -------------------- |\n| 附加组件     | 指令所在的元素上,通过点击显示出被附加组件,可以设置附加组件策略                                                             | [cyiaFabList]        |\n| 拖动上传     | 指令所在的元素上,可以通过拖动上传文件                                                                                      | [cyiaFileDropzone]   |\n| 分页器补丁   | 指令所在的分页器组件上(mat-paginator),用来注入页面的序号(原组件没有相关页面序号显示,只能点击上一页下一页,第一页和最后一页) | [cyiaPaginatorPatch] |\n| 文本复制指令 | 监听点击事件发生copy事件(告知已经复制)                                                                                     | [cyiaTextCopy]       |\n\n### 附加组件\n- 通过查询子元素的`TemplateRef`,作为显示的附加组件\n\n| 属性        | 类型    | 描述         | 默认值 |\n| ----------- | ------- | ------------ | ------ |\n| cyiaFabList | FabItem | 设置附加策略 |\n\n```ts\nexport interface FabItem {\n    origin?: number//如果有多个模板,则可以指定附加在哪个模板上,进行多级附加\n    positionStrategyList?: PositionStrategy[]\n}\nexport interface PositionStrategy {\n    offsetX?: number;\n    offsetY?: number;\n    //doc @angular/cdk/overlay\n    originPos: OriginConnectionPosition,\n    overlayPos: OverlayConnectionPosition\n}\n```\n\n### 拖动上传\n\n| 属性        | 类型    | 描述         | 默认值 |\n| ----------- | ------- | ------------ | ------ |\n|files|File[]|双向绑定,拖动后从这里获取拖动文件\n\n### 分页器补丁\n- 附加在`mat-paginator`即可\n\n### 文本复制\n| 属性        | 类型    | 描述         | 默认值 |\n| ----------- | ------- | ------------ | ------ |\n|copy|事件|复制成功发送事件\n|value|string|要复制的文本\n\n---\n\n## 待完善文档\n- `markdown`\n\u003e 使用monaco-editor来实现的编辑功能,显示功能可以通过自定义的类名对不同标签处理  \n\u003e 支持自定义编辑,可以将自己的组件用angular的自定义元素的方法(angular官网采用的方法)进行显示\n- `formgroup`\n\u003e 将matd的多种输入控件融合在一起的表单,通过配置显示\n- `dynamic-component/dynamic-control`\n\u003e 用于解决某些组件使用较少,但是确实会被使用,而采用按需加载,减少请求时间\n\n## 已知问题\n- 当angular编写的组件封装为web-component引入时,先点击angular的封装组件,再点击其他的web-component组件时,会引入失效\n\u003e 封装的angular组件自身的路由会将项目的路由覆盖掉,导致其他的组件无法加载.  \n\u003e 可能要从angular自身的编译配置查看为何会失效\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwszgrcy%2Fng-window","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwszgrcy%2Fng-window","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwszgrcy%2Fng-window/lists"}