├── .editorconfig ├── .gitignore ├── LICENSE ├── README.md ├── angular.json ├── e2e ├── app.e2e-spec.ts ├── app.po.ts └── tsconfig.e2e.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── protractor.conf.js ├── proxy-config.json ├── src ├── app │ ├── app.component.css │ ├── app.component.html │ ├── app.component.spec.ts │ ├── app.component.ts │ └── app.module.ts ├── assets │ └── .gitkeep ├── environments │ ├── environment.prod.ts │ └── environment.ts ├── favicon.ico ├── index.html ├── main.ts ├── polyfills.ts ├── styles.scss ├── test.ts ├── tsconfig.app.json ├── tsconfig.spec.json └── typings.d.ts ├── tools └── build.js ├── tsconfig.json └── tslint.json /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 4 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | max_line_length = off 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | 8 | # dependencies 9 | /node_modules 10 | 11 | # IDEs and editors 12 | /.idea 13 | .project 14 | .classpath 15 | .c9/ 16 | *.launch 17 | .settings/ 18 | *.sublime-workspace 19 | 20 | # IDE - VSCode 21 | .vscode/* 22 | !.vscode/settings.json 23 | !.vscode/tasks.json 24 | !.vscode/launch.json 25 | !.vscode/extensions.json 26 | 27 | # misc 28 | /.sass-cache 29 | /connect.lock 30 | /coverage 31 | /libpeerconnection.log 32 | npm-debug.log 33 | testem.log 34 | /typings 35 | /.angular 36 | 37 | # e2e 38 | /e2e/*.js 39 | /e2e/*.map 40 | 41 | # System Files 42 | .DS_Store 43 | Thumbs.db 44 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License 2 | 3 | Copyright (c) 2017 ZTE 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in 13 | all copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Jigsaw Seed 2 | 3 | 这是组件库[Jigsaw](https://github.com/rdkmaster/jigsaw)的种子工程，适用于开发**桌面端浅色系**的app，建议所有新增的app都以这个工程作为种子开始构建。[具体步骤看这里](http://rdk.zte.com.cn/components/guide/quick-start)。 4 | 5 | **所有可用的种子工程** 6 | 7 | 终端 | 链接 8 | -----|----- 9 | 桌面端 | [仓库](https://github.com/rdkmaster/jigsaw-seed) / [直接下载](https://github.com/rdkmaster/jigsaw-seed/archive/master.zip) 10 | 移动端 | [仓库](https://github.com/rdkmaster/jigsaw-seed-mobile) / [直接下载](https://github.com/rdkmaster/jigsaw-seed-mobile/archive/master.zip) 11 | 12 | 13 | **关于cnpm安装的依赖编译失败的说明** 14 | 15 | 重要提示： 16 | 1. 别用`cnpm`安装依赖，务必使用原生`npm`安装依赖！ 17 | 2. 别用`cnpm`安装依赖，务必使用原生`npm`安装依赖！ 18 | 3. 别用`cnpm`安装依赖，务必使用原生`npm`安装依赖！ 19 | 20 | 虽然不能使用`cnpm`安装依赖，但是可以使用淘宝镜像加速，方法如下： 21 | 22 | ``` 23 | cd jigsaw-seed # 请改为实际目录 24 | npm install --registry=https://registry.npm.taobao.org 25 | ``` 26 | 27 | > 不能使用`cnpm`安装依赖的原因[在这里](https://github.com/cnpm/cnpmjs.org/issues/1463)，感兴趣可以过去点个赞一下，促进cnpm改进。 28 | -------------------------------------------------------------------------------- /angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "jigsaw-seed": { 7 | "projectType": "application", 8 | "schematics": { 9 | "@schematics/angular:component": { 10 | "style": "scss" 11 | } 12 | }, 13 | "root": "", 14 | "sourceRoot": "src", 15 | "prefix": "app", 16 | "architect": { 17 | "build": { 18 | "builder": "@angular-devkit/build-angular:browser", 19 | "options": { 20 | "outputPath": "dist/jigsaw-seed", 21 | "index": "src/index.html", 22 | "main": "src/main.ts", 23 | "polyfills": "src/polyfills.ts", 24 | "tsConfig": "src/tsconfig.app.json", 25 | "sourceMap": true, 26 | "assets": [ 27 | "src/favicon.ico", 28 | "src/assets", 29 | { 30 | "glob": "*.css", 31 | "input": "node_modules/@rdkmaster/jigsaw/prebuilt-themes/", 32 | "output": "/themes/" 33 | }, 34 | { 35 | "glob": "*.css", 36 | "input": "node_modules/@rdkmaster/jigsaw/prebuilt-themes/wings-theme/", 37 | "output": "/themes/wings-theme/" 38 | }, 39 | { 40 | "glob": "*", 41 | "input": "node_modules/@rdkmaster/icon-font/", 42 | "output": "/" 43 | } 44 | ], 45 | "styles": [ 46 | "node_modules/ztree/css/zTreeStyle/zTreeStyle.css", 47 | "node_modules/perfect-scrollbar/css/perfect-scrollbar.css", 48 | "node_modules/@rdkmaster/icon-font/iconfont.css", 49 | "src/styles.scss" 50 | ], 51 | "scripts": [ 52 | "node_modules/jquery/dist/jquery.min.js", 53 | "node_modules/moment/min/moment.min.js", 54 | "node_modules/ztree/js/jquery.ztree.all.js", 55 | "node_modules/ztree/js/jquery.ztree.exhide.js", 56 | "node_modules/peity/jquery.peity.min.js", 57 | "node_modules/echarts/dist/echarts.js" 58 | ] 59 | }, 60 | "configurations": { 61 | "production": { 62 | "fileReplacements": [ 63 | { 64 | "replace": "src/environments/environment.ts", 65 | "with": "src/environments/environment.prod.ts" 66 | } 67 | ], 68 | "optimization": true, 69 | "outputHashing": "all", 70 | "sourceMap": false, 71 | "extractCss": true, 72 | "namedChunks": false, 73 | "aot": true, 74 | "extractLicenses": true, 75 | "vendorChunk": false, 76 | "buildOptimizer": true, 77 | "budgets": [ 78 | { 79 | "type": "initial", 80 | "maximumWarning": "2mb", 81 | "maximumError": "5mb" 82 | } 83 | ] 84 | } 85 | } 86 | }, 87 | "serve": { 88 | "builder": "@angular-devkit/build-angular:dev-server", 89 | "options": { 90 | "browserTarget": "jigsaw-seed:build" 91 | }, 92 | "configurations": { 93 | "production": { 94 | "browserTarget": "jigsaw-seed:build:production" 95 | } 96 | } 97 | }, 98 | "extract-i18n": { 99 | "builder": "@angular-devkit/build-angular:extract-i18n", 100 | "options": { 101 | "browserTarget": "jigsaw-seed:build" 102 | } 103 | }, 104 | "test": { 105 | "builder": "@angular-devkit/build-angular:karma", 106 | "options": { 107 | "main": "src/test.ts", 108 | "tsConfig": "src/tsconfig.spec.json", 109 | "karmaConfig": "karma.conf.js" 110 | } 111 | }, 112 | "lint": { 113 | "builder": "@angular-devkit/build-angular:tslint", 114 | "options": { 115 | "tsConfig": [ 116 | "tsconfig.app.json", 117 | "tsconfig.spec.json", 118 | "e2e/tsconfig.json" 119 | ], 120 | "exclude": [ 121 | "**/node_modules/**" 122 | ] 123 | } 124 | }, 125 | "e2e": { 126 | "builder": "@angular-devkit/build-angular:protractor", 127 | "options": { 128 | "protractorConfig": "e2e/protractor.conf.js", 129 | "devServerTarget": "jigsaw-seed:serve" 130 | }, 131 | "configurations": { 132 | "production": { 133 | "devServerTarget": "jigsaw-seed:serve:production" 134 | } 135 | } 136 | } 137 | } 138 | }}, 139 | "defaultProject": "jigsaw-seed" 140 | } 141 | -------------------------------------------------------------------------------- /e2e/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { FirstAppPage } from './app.po'; 2 | 3 | describe('Jigsaw Seed App', () => { 4 | let page: FirstAppPage; 5 | 6 | beforeEach(() => { 7 | page = new FirstAppPage(); 8 | }); 9 | 10 | it('should display welcome message', () => { 11 | page.navigateTo(); 12 | expect(page.getParagraphText()).toEqual('Welcome to Jigsaw Seed!!'); 13 | }); 14 | }); 15 | -------------------------------------------------------------------------------- /e2e/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class FirstAppPage { 4 | navigateTo() { 5 | return browser.get('/'); 6 | } 7 | 8 | getParagraphText() { 9 | return element(by.css('jigsaw-app h1')).getText(); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /e2e/tsconfig.e2e.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/e2e", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "types": [ 8 | "jasmine", 9 | "jasminewd2", 10 | "node" 11 | ] 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/0.13/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | //require('karma-chrome-launcher'), 11 | require('karma-phantomjs-launcher'), 12 | require('karma-jasmine-html-reporter'), 13 | require('karma-coverage-istanbul-reporter'), 14 | require('@angular-devkit/build-angular/plugins/karma') 15 | ], 16 | client: { 17 | clearContext: false // leave Jasmine Spec Runner output visible in browser 18 | }, 19 | coverageIstanbulReporter: { 20 | dir: require('path').join(__dirname, './coverage/jigsaw-app'), 21 | reports: ['html', 'lcovonly', 'text-summary'], 22 | fixWebpackSourcePaths: true 23 | }, 24 | reporters: ['progress', 'kjhtml'], 25 | port: 9876, 26 | colors: true, 27 | logLevel: config.LOG_INFO, 28 | autoWatch: true, 29 | browsers: [/*'Chrome', */'PhantomJS'], 30 | singleRun: false 31 | }); 32 | }; 33 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Jigsaw-Seed", 3 | "version": "1.0.0", 4 | "license": "MIT", 5 | "scripts": { 6 | "ng": "ng", 7 | "start": "node tools/build.js dev", 8 | "build": "node tools/build.js prod", 9 | "test": "ng test", 10 | "lint": "ng lint", 11 | "e2e": "ng e2e" 12 | }, 13 | "private": false, 14 | "dependencies": { 15 | "@angular/animations": "~13.3.0", 16 | "@angular/common": "~13.3.0", 17 | "@angular/compiler": "~13.3.0", 18 | "@angular/core": "~13.3.0", 19 | "@angular/forms": "~13.3.0", 20 | "@angular/platform-browser": "~13.3.0", 21 | "@angular/platform-browser-dynamic": "~13.3.0", 22 | "@angular/router": "~13.3.0", 23 | "@ngx-formly/core": "^5.0.0", 24 | "@ngx-formly/schematics": "^5.10.5", 25 | "@ngx-translate/core": "~11.0.1", 26 | "@rdkmaster/icon-font": "^5.0.0", 27 | "@rdkmaster/jigsaw": "^10.9.9", 28 | "core-js": "~3.0.1", 29 | "echarts": "~4.9.0", 30 | "file-saver": "~2.0.1", 31 | "jquery": "~3.5.1", 32 | "jszip": "3.7.0", 33 | "moment": "2.22.2", 34 | "ngx-color-picker": "~8.0.0", 35 | "ngx-perfect-scrollbar": "~8.0.0", 36 | "perfect-scrollbar": "~1.4.0", 37 | "peity": "~3.2.1", 38 | "rxjs": "~6.5.3", 39 | "web-animations-js": "~2.3.2", 40 | "zone.js": "~0.10.2", 41 | "ztree": "~3.5.24" 42 | }, 43 | "devDependencies": { 44 | "@angular-devkit/build-angular": "~13.3.11", 45 | "@angular/cli": "^13.3.11", 46 | "@angular/compiler-cli": "^13.4.0", 47 | "@angular/language-service": "^13.4.0", 48 | "@types/jasmine": "~3.3.8", 49 | "@types/node": "~12.11.1", 50 | "codelyzer": "~5.1.2", 51 | "fs-extra": "~3.0.1", 52 | "glob": "~7.1.6", 53 | "jasmine-core": "~3.4.0", 54 | "jasmine-spec-reporter": "~4.2.1", 55 | "karma": "~4.1.0", 56 | "karma-chrome-launcher": "~2.2.0", 57 | "karma-coverage-istanbul-reporter": "~2.0.1", 58 | "karma-jasmine": "~2.0.1", 59 | "karma-jasmine-html-reporter": "~1.4.0", 60 | "karma-phantomjs-launcher": "~1.0.4", 61 | "protractor": "~5.4.0", 62 | "stream": "0.0.2", 63 | "ts-node": "~7.0.0", 64 | "tslint": "~6.1.0", 65 | "typescript": "4.6.4", 66 | "uuid": "~3.4.0" 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /protractor.conf.js: -------------------------------------------------------------------------------- 1 | // Protractor configuration file, see link for more information 2 | // https://github.com/angular/protractor/blob/master/lib/config.ts 3 | 4 | const { SpecReporter } = require('jasmine-spec-reporter'); 5 | 6 | exports.config = { 7 | allScriptsTimeout: 11000, 8 | specs: [ 9 | './e2e/**/*.e2e-spec.ts' 10 | ], 11 | capabilities: { 12 | 'browserName': 'chrome' 13 | }, 14 | directConnect: true, 15 | baseUrl: 'http://localhost:4200/', 16 | framework: 'jasmine', 17 | jasmineNodeOpts: { 18 | showColors: true, 19 | defaultTimeoutInterval: 30000, 20 | print: function() {} 21 | }, 22 | onPrepare() { 23 | require('ts-node').register({ 24 | project: 'e2e/tsconfig.e2e.json' 25 | }); 26 | jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } })); 27 | } 28 | }; 29 | -------------------------------------------------------------------------------- /proxy-config.json: -------------------------------------------------------------------------------- 1 | { 2 | "/rdk/service/": "http://rdk.zte.com.cn:5812" 3 | } 4 | -------------------------------------------------------------------------------- /src/app/app.component.css: -------------------------------------------------------------------------------- 1 | .header { 2 | height: 48px; 3 | display: flex; 4 | align-items: center; 5 | position: relative; 6 | } 7 | 8 | .header .name { 9 | font-size: 18px; 10 | color: var(--bg-disabled); 11 | margin-left: 10px; 12 | margin-top: 10px; 13 | } 14 | 15 | .header img { 16 | margin-left: 8px; 17 | height: 32px; 18 | } 19 | 20 | .header jigsaw-button-bar { 21 | position: absolute; 22 | right: 176px; 23 | } 24 | 25 | .header jigsaw-search-input { 26 | position: absolute; 27 | right: 8px; 28 | } 29 | -------------------------------------------------------------------------------- /src/app/app.component.html: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 11 |
12 | 13 | Jigsaw 14 | 17 | 18 | 19 |
20 |
21 |

22 | Welcome to {{title}}!! 23 |

24 |

Every awesome application starts from this seed.

25 | 26 |

27 | 28 | {{ 'get-started' | translate }} 29 | 30 | 31 | {{ 'give-star' | translate }} 32 | 33 |

34 |

35 | 切换皮肤： 36 | 浅色 37 | 深色 38 |

39 |

header的色调永远与主题色相反，注意观察header里的组件可以自适应

40 |
41 | 42 | 43 | -------------------------------------------------------------------------------- /src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, async } from '@angular/core/testing'; 2 | 3 | import { AppComponent } from './app.component'; 4 | 5 | describe('AppComponent', () => { 6 | beforeEach(async(() => { 7 | TestBed.configureTestingModule({ 8 | declarations: [ 9 | AppComponent 10 | ], 11 | }).compileComponents(); 12 | })); 13 | 14 | it('should create the app', async(() => { 15 | const fixture = TestBed.createComponent(AppComponent); 16 | const app = fixture.debugElement.componentInstance; 17 | expect(app).toBeTruthy(); 18 | })); 19 | 20 | it(`should have as title 'app'`, async(() => { 21 | const fixture = TestBed.createComponent(AppComponent); 22 | const app = fixture.debugElement.componentInstance; 23 | expect(app.title).toEqual('Jigsaw Seed'); 24 | })); 25 | 26 | it('should render title in a h1 tag', async(() => { 27 | const fixture = TestBed.createComponent(AppComponent); 28 | fixture.detectChanges(); 29 | const compiled = fixture.debugElement.nativeElement; 30 | expect(compiled.querySelector('h1').textContent).toContain('Welcome to Jigsaw Seed!!'); 31 | })); 32 | }); 33 | -------------------------------------------------------------------------------- /src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import {Component} from '@angular/core'; 2 | import {JigsawTheme, MajorStyle} from '@rdkmaster/jigsaw'; 3 | 4 | @Component({ 5 | selector: 'jigsaw-app', 6 | templateUrl: './app.component.html', 7 | styleUrls: ['./app.component.css'] 8 | }) 9 | export class AppComponent { 10 | mixingTheme = 'light'; 11 | title = 'Jigsaw Seed'; 12 | headerBg = '#fff'; 13 | 14 | constructor() { 15 | this.changeTheme('dark'); 16 | } 17 | 18 | gotoTourist() { 19 | window.open('https://github.com/rdkmaster/jigsaw/blob/master/docs/tourist/index.md', '_blank'); 20 | } 21 | 22 | gotoGithub() { 23 | window.open('https://github.com/rdkmaster/jigsaw', '_blank'); 24 | } 25 | 26 | changeTheme(style: MajorStyle) { 27 | JigsawTheme.changeTheme('paletx-pro', style); 28 | this.mixingTheme = style == 'light' ? 'dark' : 'light'; 29 | this.headerBg = style == 'light' ? '#181a2a' : '#fff'; 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import {BrowserModule} from '@angular/platform-browser'; 2 | import {NgModule} from '@angular/core'; 3 | import {FormsModule} from '@angular/forms'; 4 | import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; 5 | import {TranslateModule, TranslateService} from "@ngx-translate/core"; 6 | import {JigsawModule,JigsawThemeService} from '@rdkmaster/jigsaw'; 7 | 8 | import {AppComponent} from './app.component'; 9 | 10 | 11 | @NgModule({ 12 | declarations: [ 13 | AppComponent 14 | ], 15 | imports: [ 16 | BrowserModule, FormsModule, BrowserAnimationsModule, 17 | JigsawModule, TranslateModule.forRoot() 18 | ], 19 | providers: [TranslateService,JigsawThemeService], 20 | bootstrap: [AppComponent], 21 | entryComponents: [] 22 | }) 23 | export class AppModule { 24 | constructor(translateService: TranslateService) { 25 | translateService.setTranslation('zh', { 26 | 'get-started': '马上开始', 27 | 'give-star': '给 Jigsaw 点个星星' 28 | }, true); 29 | translateService.setTranslation('en', { 30 | 'get-started': 'Get started', 31 | 'give-star': 'Give us a star on Github.com' 32 | }, true); 33 | 34 | const lang: string = translateService.getBrowserLang(); 35 | translateService.setDefaultLang(lang); 36 | translateService.use(lang); 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rdkmaster/jigsaw-seed/7d4f67023f6202b0ee3f23d7b30b56717920e09a/src/assets/.gitkeep -------------------------------------------------------------------------------- /src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // The file contents for the current environment will overwrite these during build. 2 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do 3 | // `ng build --env=prod` then `environment.prod.ts` will be used instead. 4 | // The list of which env maps to which file can be found in `.angular-cli.json`. 5 | 6 | export const environment = { 7 | production: false 8 | }; 9 | -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rdkmaster/jigsaw-seed/7d4f67023f6202b0ee3f23d7b30b56717920e09a/src/favicon.ico -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Jigsaw Seed 6 | 7 | 8 | 10 | 11 | 12 | 13 | 26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule, { preserveWhitespaces: true }); 12 | 13 | -------------------------------------------------------------------------------- /src/polyfills.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file includes polyfills needed by Angular and is loaded before the app. 3 | * You can add your own extra polyfills to this file. 4 | * 5 | * This file is divided into 2 sections: 6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. 7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main 8 | * file. 9 | * 10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that 11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), 12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. 13 | * 14 | * Learn more in https://angular.io/guide/browser-support 15 | */ 16 | 17 | /*************************************************************************************************** 18 | * BROWSER POLYFILLS 19 | */ 20 | 21 | /** IE9, IE10 and IE11 requires all of the following polyfills. **/ 22 | import 'core-js/es/symbol'; 23 | import 'core-js/es/object'; 24 | import 'core-js/es/function'; 25 | import 'core-js/es/parse-int'; 26 | import 'core-js/es/parse-float'; 27 | import 'core-js/es/number'; 28 | import 'core-js/es/math'; 29 | import 'core-js/es/string'; 30 | import 'core-js/es/date'; 31 | import 'core-js/es/array'; 32 | import 'core-js/es/regexp'; 33 | import 'core-js/es/map'; 34 | import 'core-js/es/set'; 35 | 36 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */ 37 | // import 'classlist.js'; // Run `npm install --save classlist.js`. 38 | 39 | /** 40 | * Web Animations `@angular/platform-browser/animations` 41 | * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari. 42 | * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0). 43 | */ 44 | import 'web-animations-js'; // Run `npm install --save web-animations-js`. 45 | 46 | 47 | /** Evergreen browsers require these. **/ 48 | import 'core-js/es/reflect'; 49 | 50 | 51 | /*************************************************************************************************** 52 | * Zone JS is required by Angular itself. 53 | */ 54 | import 'zone.js/dist/zone'; // Included with Angular CLI. 55 | 56 | 57 | /*************************************************************************************************** 58 | * APPLICATION IMPORTS 59 | */ 60 | 61 | /** 62 | * Date, currency, decimal and percent pipes. 63 | * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10 64 | */ 65 | // import 'intl'; // Run `npm install --save intl`. 66 | -------------------------------------------------------------------------------- /src/styles.scss: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | 3 | //@include setTableBody(#333, 12px , red, blue ); 4 | @import "../node_modules/@rdkmaster/jigsaw/prebuilt-themes/paletx-pro-dark.css"; 5 | -------------------------------------------------------------------------------- /src/test.ts: -------------------------------------------------------------------------------- 1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files 2 | 3 | //import 'zone.js/dist/zone-testing'; 4 | import { getTestBed } from '@angular/core/testing'; 5 | import { 6 | BrowserDynamicTestingModule, 7 | platformBrowserDynamicTesting 8 | } from '@angular/platform-browser-dynamic/testing'; 9 | 10 | declare const require: any; 11 | 12 | // First, initialize the Angular testing environment. 13 | getTestBed().initTestEnvironment( 14 | BrowserDynamicTestingModule, 15 | platformBrowserDynamicTesting() 16 | ); 17 | // Then we find all the tests. 18 | const context = require.context('./', true, /\.spec\.ts$/); 19 | // And load the modules. 20 | context.keys().map(context); 21 | -------------------------------------------------------------------------------- /src/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "module": "es2015", 6 | "baseUrl": "", 7 | "types": [] 8 | }, 9 | "exclude": [ 10 | "test.ts", 11 | "**/*.spec.ts" 12 | ], 13 | "files": [ 14 | "main.ts", 15 | "polyfills.ts" 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /src/tsconfig.spec.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/spec", 5 | "module": "commonjs", 6 | "target": "es5", 7 | "baseUrl": "", 8 | "types": [ 9 | "jasmine", 10 | "node" 11 | ] 12 | }, 13 | "files": [ 14 | "test.ts", 15 | "polyfills.ts" 16 | ], 17 | "include": [ 18 | "**/*.spec.ts", 19 | "**/*.d.ts" 20 | ] 21 | } 22 | -------------------------------------------------------------------------------- /src/typings.d.ts: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rdkmaster/jigsaw-seed/7d4f67023f6202b0ee3f23d7b30b56717920e09a/src/typings.d.ts -------------------------------------------------------------------------------- /tools/build.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs-extra'); 2 | const {execSync, spawn} = require("child_process"); 3 | const chokidar = require("chokidar"); 4 | const path = require("path"); 5 | const processSource = require("../node_modules/@rdkmaster/jigsaw/tools/create-tmp-src"); 6 | const generateGetterSetter = require('../node_modules/@rdkmaster/jigsaw/tools/generate-getter-setter.js'); 7 | 8 | const buildMode = process.argv[2]; 9 | if (buildMode !== 'prod' && buildMode !== 'dev') { 10 | printUsage(`无效的输出类型"${buildMode}"，必须是 prod/dev 之一`); 11 | process.exit(1); 12 | } 13 | 14 | console.log(`building app in ${buildMode} mode ...`); 15 | process.chdir(path.join(__dirname, '../')); 16 | 17 | processSource(); 18 | generateGetterSetter(['src-tmp']); 19 | 20 | if (buildMode === 'dev') { 21 | watchFiles(); 22 | runNgServe(); 23 | } else { 24 | runNgBuild(); 25 | } 26 | 27 | function exec(cmd) { 28 | try { 29 | execSync(cmd, {stdio: 'inherit'}); 30 | return 0; 31 | } catch (e) { 32 | return e.status; 33 | } 34 | } 35 | 36 | function watchFiles() { 37 | console.log('watching files ....'); 38 | const dirs = [ 39 | 'src' 40 | ]; 41 | const watcher = chokidar.watch(dirs, { 42 | ignored: [/.*\.(.*___jb_\w+___|gitkeep)$/, `**/node_modules/**`, `**/mock-data/**`, '**/dist/**'], 43 | persistent: true, awaitWriteFinish: {stabilityThreshold: 100, pollInterval: 100} 44 | }); 45 | let isInitialScanComplete = false; 46 | const callback = debouncePathChange(function (paths) { 47 | // 初始化的时候会触发一次全量文件的change，需要过滤掉，不然会影响ng serve的编译 48 | if (!isInitialScanComplete) { 49 | isInitialScanComplete = true; 50 | return; 51 | } 52 | const tmpTsPaths = []; 53 | paths.forEach(pt => { 54 | const tmpPath = path.join(pt.replace(/^src[\/\\]/, 'src-tmp/')); 55 | console.log(`====Copy file ${pt} to ${tmpPath}`); 56 | fs.copySync(pt, tmpPath); 57 | if (path.extname(tmpPath).toLowerCase() == '.ts') { 58 | tmpTsPaths.push(tmpPath); 59 | } 60 | }) 61 | generateGetterSetter(tmpTsPaths); 62 | }, 2000); 63 | 64 | const callbackUnlink = debouncePathChange(function (paths) { 65 | console.log('removed paths: ', paths.join('\n')); 66 | paths.forEach(pt => { 67 | const tmpPath = path.join(pt.replace(/[\/\\]src[\/\\]/, '/src-tmp/')); 68 | fs.removeSync(tmpPath); 69 | }) 70 | }, 2000); 71 | watcher.on('ready', () => { 72 | console.log('Initial scan complete. Ready for changes.'); 73 | }).on('add', callback).on('change', callback).on('unlink', callbackUnlink); 74 | } 75 | 76 | function debouncePathChange(func, wait) { 77 | let timeout, paths = []; 78 | return function (path) { 79 | paths.push(path); 80 | clearTimeout(timeout); 81 | timeout = setTimeout(function () { 82 | timeout = null; 83 | func.apply(this, [paths]); 84 | paths = []; 85 | }, wait); 86 | }; 87 | } 88 | 89 | function runNgServe() { 90 | const port = process.argv[3] || 4200; 91 | const ngServeParams = ['serve', '--poll', '500', '--disable-host-check', '--host', '0.0.0.0', 92 | '--port', port, '--proxy-config', 'proxy-config.json']; 93 | console.log('running ng serve in spawn ...'); 94 | const ngServe = spawn('node', [ 95 | '--max_old_space_size=4096', 96 | 'node_modules/@angular/cli/bin/ng', 97 | ...ngServeParams 98 | ]) 99 | 100 | ngServe.stdout.on('data', (data) => { 101 | process.stdout.write(data); 102 | }); 103 | 104 | ngServe.stderr.on('data', (data) => { 105 | process.stderr.write(data); 106 | }); 107 | 108 | ngServe.on('close', (code) => { 109 | process.stdout.write(`子进程退出，退出码 ${code}`); 110 | }); 111 | } 112 | 113 | function runNgBuild() { 114 | const code = exec(`node --max_old_space_size=4096 node_modules/@angular/cli/bin/ng build ` + 115 | `--aot --prod --base-href /lui/web/ --configuration=ume`); 116 | process.exit(code); 117 | } 118 | 119 | function printUsage(extra) { 120 | console.error('Error:', extra); 121 | console.error('用法'); 122 | console.error(' - 生成环境编译：node tools/build.js prod'); 123 | console.error(' - 开发环境编译：node tools/build.js dev'); 124 | } 125 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "outDir": "./dist/out-tsc", 5 | "baseUrl": "src", 6 | "sourceMap": true, 7 | "declaration": false, 8 | "moduleResolution": "node", 9 | "emitDecoratorMetadata": true, 10 | "experimentalDecorators": true, 11 | "target": "es5", 12 | "typeRoots": [ 13 | "node_modules/@types" 14 | ], 15 | "lib": [ 16 | "es2016", 17 | "dom" 18 | ] 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "rulesDirectory": [ 3 | "node_modules/codelyzer" 4 | ], 5 | "rules": { 6 | "arrow-return-shorthand": true, 7 | "callable-types": true, 8 | "class-name": true, 9 | "comment-format": [ 10 | true, 11 | "check-space" 12 | ], 13 | "curly": true, 14 | "eofline": true, 15 | "forin": true, 16 | "import-blacklist": [ 17 | true, 18 | "rxjs" 19 | ], 20 | "import-spacing": true, 21 | "indent": [ 22 | true, 23 | "spaces" 24 | ], 25 | "interface-over-type-literal": true, 26 | "label-position": true, 27 | "max-line-length": [ 28 | true, 29 | 140 30 | ], 31 | "member-access": false, 32 | "member-ordering": [ 33 | true, 34 | "static-before-instance", 35 | "variables-before-functions" 36 | ], 37 | "no-arg": true, 38 | "no-bitwise": true, 39 | "no-console": [ 40 | true, 41 | "debug", 42 | "info", 43 | "time", 44 | "timeEnd", 45 | "trace" 46 | ], 47 | "no-construct": true, 48 | "no-debugger": true, 49 | "no-duplicate-super": true, 50 | "no-empty": false, 51 | "no-empty-interface": true, 52 | "no-eval": true, 53 | "no-inferrable-types": [ 54 | true, 55 | "ignore-params" 56 | ], 57 | "no-misused-new": true, 58 | "no-non-null-assertion": true, 59 | "no-shadowed-variable": true, 60 | "no-string-literal": false, 61 | "no-string-throw": true, 62 | "no-switch-case-fall-through": true, 63 | "no-trailing-whitespace": true, 64 | "no-unnecessary-initializer": true, 65 | "no-unused-expression": true, 66 | "no-use-before-declare": true, 67 | "no-var-keyword": true, 68 | "object-literal-sort-keys": false, 69 | "one-line": [ 70 | true, 71 | "check-open-brace", 72 | "check-catch", 73 | "check-else", 74 | "check-whitespace" 75 | ], 76 | "prefer-const": true, 77 | "quotemark": [ 78 | true, 79 | "single" 80 | ], 81 | "radix": true, 82 | "semicolon": [ 83 | "always" 84 | ], 85 | "triple-equals": [ 86 | true, 87 | "allow-null-check" 88 | ], 89 | "typedef-whitespace": [ 90 | true, 91 | { 92 | "call-signature": "nospace", 93 | "index-signature": "nospace", 94 | "parameter": "nospace", 95 | "property-declaration": "nospace", 96 | "variable-declaration": "nospace" 97 | } 98 | ], 99 | "typeof-compare": true, 100 | "unified-signatures": true, 101 | "variable-name": false, 102 | "whitespace": [ 103 | true, 104 | "check-branch", 105 | "check-decl", 106 | "check-operator", 107 | "check-separator", 108 | "check-type" 109 | ], 110 | "directive-selector": [ 111 | true, 112 | "attribute", 113 | "app", 114 | "camelCase" 115 | ], 116 | "component-selector": [ 117 | true, 118 | "element", 119 | "app", 120 | "kebab-case" 121 | ], 122 | "use-input-property-decorator": true, 123 | "use-output-property-decorator": true, 124 | "use-host-property-decorator": true, 125 | "no-input-rename": true, 126 | "no-output-rename": true, 127 | "use-life-cycle-interface": true, 128 | "use-pipe-transform-interface": true, 129 | "component-class-suffix": true, 130 | "directive-class-suffix": true, 131 | "no-access-missing-member": true, 132 | "templates-use-public": true, 133 | "invoke-injectable": true 134 | } 135 | } 136 | --------------------------------------------------------------------------------