angular

things/angular/.eslintrc.js

+module.exports = {
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    project: 'tsconfig.json',
+    sourceType: 'module',
+  },
+  plugins: ['@typescript-eslint/eslint-plugin'],
+  extends: [
+    'plugin:@typescript-eslint/recommended',
+    'plugin:prettier/recommended',
+  ],
+  root: true,
+  env: {
+    node: true,
+    jest: true,
+  },
+  ignorePatterns: ['.*.js'],
+  rules: {
+    '@typescript-eslint/interface-name-prefix': 'off',
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
+  },
+};

things/angular/install-npm.sh

+#!/bin/bash
+npm install --save \
+	bootstrap \
+	@ng-bootstrap/ng-bootstrap \
+	open-iconic
+
+npm install --save-dev \
+	'@typescript-eslint/eslint-plugin@^4.28.2' \
+	'@typescript-eslint/parser@^4.28.2 '\
+	'eslint@^7.30.0' \
+	'eslint-config-prettier@^8.3.0' \
+	'eslint-plugin-prettier@^3.4.0'

things/angular/src/app/toast.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { ToastService } from './toast.service';
+
+describe('ToastService', () => {
+  let service: ToastService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ToastService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

things/angular/src/app/toast.service.ts

+import { Injectable } from '@angular/core';
+
+export interface ToastInfo {
+  id: number;
+  header: string;
+  body: string;
+  classname?: string;
+}
+
+@Injectable({
+  providedIn: 'root',
+})
+export class ToastService {
+  currentId = 0;
+
+  toasts: ToastInfo[] = [];
+
+  show(header: string, body: string, classname?: string) {
+    const id = ++this.currentId;
+    this.toasts.push({ id, header, body, classname });
+    return id;
+  }
+  hide(id: number) {
+    const index = this.toasts.findIndex((t) => t.id === id);
+    if (index !== -1) {
+      this.toasts.splice(index, 1);
+    }
+  }
+
+  error(message: string) {
+    this.show('错误', message, 'bg-danger text-light');
+  }
+
+  warn(message: string) {
+    this.show('警告', message, 'bg-warning');
+  }
+
+  success(message?: string) {
+    this.show('成功', message || '操作成功', 'bg-success text-light');
+  }
+
+  attention(message: string) {
+    this.show('注意', message, 'bg-primary');
+  }
+
+  info(message: string) {
+    this.show('消息', message);
+  }
+
+  constructor() {}
+}

things/angular/src/app/toast/toast.component.html

+<ngb-toast
+  *ngFor="let toast of toastService.toasts"
+  [class]="toast.classname"
+  [header]="toast.header" [autohide]="true" [delay]="5000"
+  (hidden)="toastService.hide(toast.id)"
+  class="ngb-toasts"
+>{{toast.body}}</ngb-toast>

things/angular/src/app/toast/toast.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ToastComponent } from './toast.component';
+
+describe('ToastComponent', () => {
+  let component: ToastComponent;
+  let fixture: ComponentFixture<ToastComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ToastComponent],
+    }).compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ToastComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

things/angular/src/app/toast/toast.component.ts

+import { Component, OnInit } from '@angular/core';
+import { ToastService } from '../toast.service';
+
+@Component({
+  selector: 'app-toasts',
+  templateUrl: './toast.component.html',
+  styleUrls: ['./toast.component.css'],
+})
+export class ToastComponent implements OnInit {
+  constructor(public toastService: ToastService) {}
+
+  ngOnInit(): void {}
+}

things/angular/src/styles.css

+/* You can add global styles to this file, and also import other style files */
+@import '~bootstrap';
+@import '~open-iconic/font/css/open-iconic-bootstrap.css';
+
+body {
+  min-height: 100vh;
+  min-height: -webkit-fill-available;
+}
+
+html {
+  height: -webkit-fill-available;
+}
+
+
+/*干掉站长统计的文本*/
+a[title="站长统计"] {
+  display: none;
+}
+
+/*标题*/
+h1.title {
+  font-family: 'Helvetica Neue', Helvetica, 'Microsoft Yahei', 'Hiragino Sans GB', 'WenQuanYi Micro Hei', sans-serif;
+  font-size: 22px;
+  padding-bottom: 15px;
+  border-bottom: 1px solid #eee;
+}
+
+.index .navbar-nav>li.index>a, .index .navbar-nav>li.index>a:focus, .index .navbar-nav>li.index>a:hover,
+.download .navbar-nav>li.download>a, .download .navbar-nav>li.download>a:focus, .download .navbar-nav>li.download>a:hover,
+.usage .navbar-nav>li.usage>a, .usage .navbar-nav>li.usage>a:focus, .usage .navbar-nav>li.usage>a:hover,
+.changelog .navbar-nav>li.changelog>a, .changelog .navbar-nav>li.changelog>a:focus, .changelog .navbar-nav>li.changelog>a:hover,
+.bugs .navbar-nav>li.bugs>a, .bugs .navbar-nav>li.bugs>a:focus, .bugs .navbar-nav>li.bugs>a:hover,
+.lab .navbar-nav>li.lab>a, .lab .navbar-nav>li.lab>a:focus, .lab .navbar-nav>li.lab>a:hover,
+.pre .navbar-nav>li.pre>a, .pre .navbar-nav>li.pre>a:focus, .pre .navbar-nav>li.pre>a:hover
+{
+  color: #555;
+  background-color: #e7e7e7;
+}
+
+h1.title .date {
+  font-size: 14px;
+  float: right;
+  padding-top: 10px;
+}
+
+h2.title {
+  font-family: 'Helvetica Neue', Helvetica, 'Microsoft Yahei', 'Hiragino Sans GB', 'WenQuanYi Micro Hei', sans-serif;
+  font-size: 16px;
+  padding: 8px 0 8px 8px;
+  border-left: 2px solid #ddd;
+}
+
+footer {
+  /*margin: 100px 0 10px 0;*/
+  color: #767676;
+  text-align: center;
+}