angular

.prettierrc.json

+{
+  "printWidth": 140,
+  "singleQuote": true
+}

angular.json

@@ -45,9 +45,11 @@
               "src/assets"
             ],
             "styles": [
+              "node_modules/ng-zorro-antd/src/ng-zorro-antd.min.css",
               "src/styles.css"
             ],
-            "scripts": []
+            "scripts": [],
+            "i18nLocale": "zh-CN"
           },
           "configurations": {
             "production": {
@@ -94,6 +96,7 @@
             "tsConfig": "src/tsconfig.spec.json",
             "karmaConfig": "src/karma.conf.js",
             "styles": [
+              "node_modules/ng-zorro-antd/src/ng-zorro-antd.min.css",
               "src/styles.css"
             ],
             "scripts": [],

e2e/protractor.conf.js

-// Protractor configuration file, see link for more information
-// https://github.com/angular/protractor/blob/master/lib/config.ts
-
-const { SpecReporter } = require('jasmine-spec-reporter');
-
-exports.config = {
-  allScriptsTimeout: 11000,
-  specs: [
-    './src/**/*.e2e-spec.ts'
-  ],
-  capabilities: {
-    'browserName': 'chrome'
-  },
-  directConnect: true,
-  baseUrl: 'http://localhost:4200/',
-  framework: 'jasmine',
-  jasmineNodeOpts: {
-    showColors: true,
-    defaultTimeoutInterval: 30000,
-    print: function() {}
-  },
-  onPrepare() {
-    require('ts-node').register({
-      project: require('path').join(__dirname, './tsconfig.e2e.json')
-    });
-    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
-  }
-};
\ No newline at end of file

e2e/src/app.e2e-spec.ts

-import { AppPage } from './app.po';
-
-describe('workspace-project App', () => {
-  let page: AppPage;
-
-  beforeEach(() => {
-    page = new AppPage();
-  });
-
-  it('should display welcome message', () => {
-    page.navigateTo();
-    expect(page.getParagraphText()).toEqual('Welcome to mycard-store!');
-  });
-});

e2e/src/app.po.ts

-import { browser, by, element } from 'protractor';
-
-export class AppPage {
-  navigateTo() {
-    return browser.get('/');
-  }
-
-  getParagraphText() {
-    return element(by.css('app-root h1')).getText();
-  }
-}

e2e/tsconfig.e2e.json

-{
-  "extends": "../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../out-tsc/app",
-    "module": "commonjs",
-    "target": "es5",
-    "types": [
-      "jasmine",
-      "jasminewd2",
-      "node"
-    ]
-  }
-}
\ No newline at end of file

package.json

 {
   "name": "mycard-store",
-  "version": "0.0.0",
+  "version": "1.0.0",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve",
-    "build": "ng build",
-    "test": "ng test",
-    "lint": "ng lint",
-    "e2e": "ng e2e"
+    "start": "ng serve --aot --open",
+    "build": "npm run build:zh-CN && npm run build:en-US",
+    "build:zh-CN": "ng build --prod --source-map --deploy-url https://cdn01.moecube.com/store/zh-CN/ --outputPath dist/zh-CN --i18n-locale zh-CN",
+    "build:en-US": "ng build --aot --source-map --outputPath dist/en-US --i18n-locale en-US --i18n-file src/locale/messages.en-US.xlf",
+    "i18n": "ng xi18n --output-path locale --i18n-locale zh-CN"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^6.1.0",
-    "@angular/common": "^6.1.0",
-    "@angular/compiler": "^6.1.0",
-    "@angular/core": "^6.1.0",
-    "@angular/forms": "^6.1.0",
-    "@angular/http": "^6.1.0",
-    "@angular/platform-browser": "^6.1.0",
-    "@angular/platform-browser-dynamic": "^6.1.0",
-    "@angular/router": "^6.1.0",
+    "@angular/animations": "^6.1.1",
+    "@angular/common": "^6.1.1",
+    "@angular/compiler": "^6.1.1",
+    "@angular/core": "^6.1.1",
+    "@angular/forms": "^6.1.1",
+    "@angular/http": "^6.1.1",
+    "@angular/platform-browser": "^6.1.1",
+    "@angular/platform-browser-dynamic": "^6.1.1",
+    "@angular/router": "^6.1.1",
     "core-js": "^2.5.4",
+    "ng-zorro-antd": "^1.2.0",
     "rxjs": "^6.0.0",
+    "yaml": "^1.0.0-rc.7",
     "zone.js": "~0.8.26"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.7.0",
-    "@angular/cli": "~6.1.1",
-    "@angular/compiler-cli": "^6.1.0",
-    "@angular/language-service": "^6.1.0",
-    "@types/jasmine": "~2.8.6",
-    "@types/jasminewd2": "~2.0.3",
-    "@types/node": "~8.9.4",
-    "codelyzer": "~4.2.1",
-    "jasmine-core": "~2.99.1",
-    "jasmine-spec-reporter": "~4.2.1",
-    "karma": "~1.7.1",
-    "karma-chrome-launcher": "~2.2.0",
-    "karma-coverage-istanbul-reporter": "~2.0.0",
-    "karma-jasmine": "~1.1.1",
-    "karma-jasmine-html-reporter": "^0.2.2",
-    "protractor": "~5.3.0",
-    "ts-node": "~5.0.1",
-    "tslint": "~5.9.1",
-    "typescript": "~2.7.2"
+    "@angular-devkit/build-angular": "^0.7.2",
+    "@angular/cli": "^6.1.2",
+    "@angular/compiler-cli": "^6.1.1",
+    "@angular/language-service": "^6.1.1",
+    "codelyzer": "^4.4.2",
+    "prettier": "^1.14.0",
+    "tslint": "^5.11.0",
+    "typescript": "^2.9.2"
   }
 }

src/.travis.yml

+language: node_js
+node_js: node
+
+env:
+  secure: QwnXsCYkcEftTWJShEVjVWuSkGu87sv/3yHx+JRPkdoqUHDlmWrS3Rl0LMBoJi9dJ/G7mIslKs89bzP0c8iPRiccwbc0tz/6AWwPYGYj7cHZcbH7wA0WEUpmOEO98I5x0Li6n+NK4DPTJTvGJjfWx4AQ4iTtsz/hTHDGYtMQuoY=
+cache:
+  directories:
+  - "$HOME/.npm"
+
+script: npm run build
+
+before_deploy:
+- curl --location --retry 5 --output ossutil "http://ossutil-version-update.oss-cn-hangzhou.aliyuncs.com/$(curl http://ossutil-version-update.oss-cn-hangzhou.aliyuncs.com/ossutilversion)/ossutil64"
+- chmod +x ossutil
+- ./ossutil config --endpoint oss-cn-hangzhou.aliyuncs.com --access-key-id $ALIYUN_ID
+  --access-key-secret $ALIYUN_SECRET
+deploy:
+  provider: script
+  script: ./ossutil cp -rf dist oss://mycard/store
+  skip_cleanup: true
+  on:
+    branch: master

src/app/app.component.css

+/*@import '~antd/dist/antd.css';*/
+
+.App-Logo {
+  width: 120px;
+  height: 31px;
+  border-radius: 6px;
+  margin: 16px 40px 16px 0;
+  float: left;
+  display: flex;
+  align-items: center;
+}
+
+.ant-menu {
+  padding-top: 2px;
+  font-size: 10pt;
+}
+
+.ant-menu-dark {
+  background-color: #404040;
+}
+
+.ant-menu-dark, .ant-menu-dark.ant-menu-horizontal {
+  border-bottom-color: #404040;
+}
+
+.ant-menu.ant-menu-dark .ant-menu-item-selected {
+  background-color: transparent;
+  color: #fff;
+}
+
+.App-Poster {
+  margin-top: 10px;
+  width: 295px;
+  height: auto;
+  max-width: 100%;
+}
+
+.App-Content1 {
+  height: 450px;
+  background: url(../assets/front-page-background.jpg);
+  background-size: cover;
+  background-position: center;
+  overflow: hidden;
+  width: 100%;
+  text-shadow: 0px 2px 10px rgba(0, 0, 0, 0.6);
+  padding-top: 18px;
+}
+
+.App-Content2 {
+  display: flex;
+  justify-content: space-between;
+  padding: 50px 0px 50px 60px;
+  background-image: radial-gradient(ellipse farthest-corner at 45px 45px, #3d75a2 0%, #091a4b 95%);
+  color: #eee;
+  text-shadow: 0px 2px 10px rgba(0, 0, 0, 0.6)
+}
+
+.App-CardList {
+  padding: 4vh 4vw;
+}
+
+.App-CardList .ant-row {
+  margin: -8px;
+}
+
+.App-CardList .ant-row > div {
+  padding: 1vh 1vw;
+}
+
+.App-CardList .ant-btn {
+  position: absolute;
+  bottom: 20px;
+}
+
+.App-Card-content {
+  margin-bottom: 2vh;
+  white-space: pre-line;
+  font-size: 12px;
+}
+
+nz-card {
+  padding-bottom: 26px;
+}
+
+.ant-card-bordered {
+  height: 100%;
+}
+
+.ant-col-12 {
+  padding: 10px;
+}
+
+.ant-card-body {
+  padding-bottom: 50px;
+}
+
+.ant-layout .ant-layout-header {
+  background: #404040
+}
+
+.font-C-Gray {
+  color: #ccc;
+}
+
+.App-Poster-Content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.App-Poster-Content .title {
+  margin-top: -20px;
+  margin-bottom: -5px;
+  font-size: 1.3rem;
+  color: #eee
+}
+
+.App-Poster-Content a:not(.ant-btn) {
+  padding: 0 .5vw;
+  margin-top: 8px
+}
+
+.App-Poster-Content .title .sub {
+  font-size: 0.7rem;
+  color: #eee;
+  padding: 0 0.4vw
+}
+
+.ant-layout-content > p {
+  color: #eee;
+  font-size: 1.2rem
+}
+
+.ant-layout-footer {
+  display: flex;
+  justify-content: space-between;
+}
+
+.ant-card-head-title {
+  font-size: 1.5rem;
+}
+
+.ant-timeline-item-content {
+  padding: 0 0 0px 24px;
+}
+
+nz-timeline-item::ng-deep .ant-timeline-item {
+  font-size: 12px;
+  padding-bottom: 12px;
+}
+
+nz-timeline-item::ng-deep .ant-timeline-item-last .ant-timeline-item-content {
+  min-height: initial;
+}
+
+.ant-timeline-item-last .ant-timeline-item-content {
+  min-height: 0px;
+}
+
+.ant-timeline > .ant-timeline-item-pending, .ant-timeline > .ant-timeline-item-pending > div {
+  padding-bottom: 0px;
+}
+
+#Card3Button {
+  margin-top: 20px;
+}
+
+.loading {
+  margin-top: 20px;
+  font-size: 20px;
+  color: white;
+}
+
+#Card4Button {
+  margin-top: 20px;
+}
+
+.square {
+  padding-right: 20px;
+  float: right;
+  cursor: pointer;
+  font-size: 22px;
+  color: #aaa;
+}
+
+.square:hover {
+  color: #fff;
+}
+
+.chidden {
+  animation: downotup 0.5s;
+  -webkit-animation: downotup 0.5s;
+  transform: translate(0, -1000px)
+}
+
+.cshow {
+  animation: uptodown 0.5s;
+  -webkit-animation: uptodown 0.5s;
+  transform: translate(0, 0px)
+}
+
+@keyframes uptodown {
+  from {
+    transform: translate(0, -1000px)
+  }
+  to {
+    transform: translate(0, 0px)
+  }
+}
+
+@keyframes downotup {
+  from {
+    transform: translate(0, 0px)
+  }
+  to {
+    transform: translate(0, -1000px)
+  }
+}
+
+.MoeCubeProduct {
+  max-width: 370px;
+}
+
+#Welcome {
+  margin-top: 10px;
+  font-size: 1.3rem;
+}
+.preline {
+  white-space: pre-line;
+}
+
+#downloadbot {
+  margin-top: 10px;
+  margin-bottom: 10px;
+  height: 40px;
+  width: 180px
+}
+
+.changelanguage {
+  display: flex;
+  line-height: 30px;
+}
+
+.changelanguage > i {
+  line-height: 30px;
+}
+.changelanguage > img {
+  margin-right: 10px;
+}
+li > .changelanguage {
+  display: flex;
+  line-height: 30px;
+}
+
+#apps {
+  padding: 1vh 4vw 4vh 4vw;
+}
+
+#apps img {
+  padding: 10px;
+  width: 100%;
+  object-fit: cover;
+  height: 16vw;
+}
+
+h2 {
+  padding-left: calc(4vw + 10px);
+  font-size: 1.5rem;
+  margin: 0;
+}
+
+nz-card::ng-deep .ant-card-head-title {
+  font-size: 1.5rem;
+  font-weight: initial;
+  color: rgba(0, 0, 0, .65);
+  line-height: 48px;
+  padding: 0;
+}
+
+p {
+  margin: 0;
+}

src/app/app.component.ts

-import { Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Inject, LOCALE_ID } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { map } from 'rxjs/operators';
+import yaml from 'yaml';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.css'],
+  preserveWhitespaces: true,
+  changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class AppComponent {
-  title = 'mycard-store';
+  latest_win32 = this.http
+    .get('https://cdn01.moecube.com/downloads/latest.yml', { responseType: 'text' })
+    .pipe(map(rawData => 'https://cdn01.moecube.com/downloads/' + yaml.parse(rawData).path));
+
+  latest_drawin = this.http
+    .get('https://cdn01.moecube.com/downloads/latest-mac.json')
+    .pipe(map((data: any) => data.url.replace('-mac.zip', '.dmg')));
+
+  latest_current = navigator.platform.match(/Mac/i) ? this.latest_drawin : this.latest_win32;
+
+  stats_signups = this.http
+    .get('https://ygobbs.com/admin/dashboard.json', {
+      params: { api_key: 'dc7298a754828b3d26b709f035a0eeceb43e73cbd8c4fa8dec18951f8a95d2bc', api_username: 'zh99998' }
+    })
+    .pipe(map((data: any) => data.global_reports.find(item => item.type === 'signups').total));
+
+  stats_online = this.http.get('https://api.moecube.com/stats/online', { responseType: 'text' }).pipe(
+    map(rawText => {
+      const doc = new DOMParser().parseFromString(rawText, 'text/xml');
+      const node = doc.querySelector('#content > table > tbody > tr:nth-child(2) > td:nth-child(2)');
+      return parseInt(node.textContent);
+    })
+  );
+
+  constructor(private http: HttpClient, @Inject(LOCALE_ID) public locale: string) {}
+
+  setLocale(locale) {
+    document.cookie = `locale=${locale}`;
+    location.reload();
+  }
 }

src/app/app.module.ts

@@ -2,15 +2,20 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 
 import { AppComponent } from './app.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { FormsModule } from '@angular/forms';
+import { HttpClientModule } from '@angular/common/http';
+import { NgZorroAntdModule, NZ_I18N, zh_CN } from 'ng-zorro-antd';
+// import { registerLocaleData } from '@angular/common';
+// import zh from '@angular/common/locales/zh';
+import { TitleComponent } from './title/title.component';
+
+// registerLocaleData(zh);
 
 @NgModule({
-  declarations: [
-    AppComponent
-  ],
-  imports: [
-    BrowserModule
-  ],
-  providers: [],
+  declarations: [AppComponent, TitleComponent],
+  imports: [BrowserModule, BrowserAnimationsModule, FormsModule, HttpClientModule, NgZorroAntdModule],
+  // providers: [{ provide: NZ_I18N, useValue: zh_CN }],
   bootstrap: [AppComponent]
 })
-export class AppModule { }
+export class AppModule {}

src/app/title/title.component.ts

+import { Component, Input, OnInit } from '@angular/core';
+import { Title } from '@angular/platform-browser';
+
+@Component({
+  selector: 'app-title',
+  template: ''
+})
+export class TitleComponent implements OnInit {
+
+  @Input()
+  title: string;
+  constructor(private titleService: Title) {}
+
+  ngOnInit() {
+    this.titleService.setTitle(this.title);
+  }
+
+}

src/index.html

 <!doctype html>
-<html lang="en">
+<html>
 <head>
   <meta charset="utf-8">
-  <title>MycardStore</title>
+  <title>MyCard</title>
   <base href="/">
 
   <meta name="viewport" content="width=device-width, initial-scale=1">

src/polyfills.ts

@@ -43,7 +43,7 @@
 
 /** Evergreen browsers require these. **/
 // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
-import 'core-js/es7/reflect';
+// import 'core-js/es7/reflect';
 
 
 /**
@@ -58,9 +58,9 @@ import 'core-js/es7/reflect';
  * user can disable parts of macroTask/DomEvents patch by setting following flags
  */
 
- // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
- // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
- // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
 
  /*
  * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js

src/styles.css

 /* You can add global styles to this file, and also import other style files */
+body {
+  font-family: sans-serif;
+  font-size: 12px;
+}

src/tslint.json

 {
   "extends": "../tslint.json",
   "rules": {
-        "directive-selector": [
-            true,
-            "attribute",
-            "app",
-            "camelCase"
-        ],
-        "component-selector": [
-            true,
-            "element",
-            "app",
-            "kebab-case"
-        ]
+    "directive-selector": [true, "attribute", "app", "camelCase"],
+    "component-selector": [true, "element", "app", "kebab-case"],
+    "radix": false
   }
 }