use a generated angular lib

src/api/.gitignore

+wwwroot/*.js
+node_modules
+typings
+dist

src/api/.npmignore

+wwwroot/*.js
+node
+node_modules
+typings
+dist

src/api/.swagger-codegen-ignore

+# Swagger Codegen Ignore
+# Generated by swagger-codegen https://github.com/swagger-api/swagger-codegen
+
+# Use this file to prevent files from being overwritten by the generator.
+# The patterns follow closely to .gitignore or .dockerignore.
+
+# As an example, the C# client generator defines ApiClient.cs.
+# You can make changes and tell Swagger Codgen to ignore just this file by uncommenting the following line:
+#ApiClient.cs
+
+# You can match any string of characters against a directory, file or extension with a single asterisk (*):
+#foo/*/qux
+# The above matches foo/bar/qux and foo/baz/qux, but not foo/bar/baz/qux
+
+# You can recursively match patterns against a directory, file or extension with a double asterisk (**):
+#foo/**/qux
+# This matches foo/bar/qux, foo/baz/qux, and foo/bar/baz/qux
+
+# You can also negate patterns with an exclamation (!).
+# For example, you can ignore all files in a docs folder with the file extension .md:
+#docs/*.md
+# Then explicitly reverse the ignore rule for a single file:
+#!docs/README.md

src/api/.swagger-codegen/VERSION

+3.0.25
\ No newline at end of file

src/api/api.module.ts

+import { NgModule, ModuleWithProviders, SkipSelf, Optional } from '@angular/core';
+import { Configuration } from './configuration';
+import { HttpClient } from '@angular/common/http';
+
+
+import { YunomiService } from './api/yunomi.service';
+
+@NgModule({
+  imports:      [],
+  declarations: [],
+  exports:      [],
+  providers: [
+    YunomiService ]
+})
+export class ApiModule {
+    public static forRoot(configurationFactory: () => Configuration): ModuleWithProviders<NgModule> {
+        return {
+            ngModule: ApiModule,
+            providers: [ { provide: Configuration, useFactory: configurationFactory } ]
+        };
+    }
+
+    constructor( @Optional() @SkipSelf() parentModule: ApiModule,
+                 @Optional() http: HttpClient) {
+        if (parentModule) {
+            throw new Error('ApiModule is already loaded. Import in your base AppModule only.');
+        }
+        if (!http) {
+            throw new Error('You need to import the HttpClientModule in your AppModule! \n' +
+            'See also https://github.com/angular/angular/issues/20575');
+        }
+    }
+}

src/api/api/api.ts

+export * from './yunomi.service';
+import { YunomiService } from './yunomi.service';
+export const APIS = [YunomiService];

src/api/api/yunomi.service.ts

+/**
+ * Yunomi
+ * YGOPro 录像工具
+ *
+ * OpenAPI spec version: 1.0
+ *
+ *
+ * NOTE: This class is auto generated by the swagger code generator program.
+ * https://github.com/swagger-api/swagger-codegen.git
+ * Do not edit the class manually.
+ *//* tslint:disable:no-unused-variable member-ordering */
+
+import { Inject, Injectable, Optional }                      from '@angular/core';
+import { HttpClient, HttpHeaders, HttpParams,
+         HttpResponse, HttpEvent }                           from '@angular/common/http';
+import { CustomHttpUrlEncodingCodec }                        from '../encoder';
+
+import { Observable }                                        from 'rxjs';
+
+import { PostTaskMessage } from '../model/postTaskMessage';
+import { TaskReturnMessage } from '../model/taskReturnMessage';
+
+import { BASE_PATH, COLLECTION_FORMATS }                     from '../variables';
+import { Configuration }                                     from '../configuration';
+
+
+@Injectable()
+export class YunomiService {
+
+    protected basePath = 'https://yunomi.mycard.moe/video';
+    public defaultHeaders = new HttpHeaders();
+    public configuration = new Configuration();
+
+    constructor(protected httpClient: HttpClient, @Optional()@Inject(BASE_PATH) basePath: string, @Optional() configuration: Configuration) {
+        if (basePath) {
+            this.basePath = basePath;
+        }
+        if (configuration) {
+            this.configuration = configuration;
+            this.basePath = basePath || configuration.basePath || this.basePath;
+        }
+    }
+
+    /**
+     * @param consumes string[] mime-types
+     * @return true: consumes contains 'multipart/form-data', false: otherwise
+     */
+    private canConsumeForm(consumes: string[]): boolean {
+        const form = 'multipart/form-data';
+        for (const consume of consumes) {
+            if (form === consume) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+
+    /**
+     *
+     *
+     * @param body
+     * @param authorization 认证密钥
+     * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
+     * @param reportProgress flag to report request and response progress.
+     */
+    public appControllerAddTask(body: PostTaskMessage, authorization?: string, observe?: 'body', reportProgress?: boolean): Observable<TaskReturnMessage>;
+    public appControllerAddTask(body: PostTaskMessage, authorization?: string, observe?: 'response', reportProgress?: boolean): Observable<HttpResponse<TaskReturnMessage>>;
+    public appControllerAddTask(body: PostTaskMessage, authorization?: string, observe?: 'events', reportProgress?: boolean): Observable<HttpEvent<TaskReturnMessage>>;
+    public appControllerAddTask(body: PostTaskMessage, authorization?: string, observe: any = 'body', reportProgress: boolean = false ): Observable<any> {
+
+        if (body === null || body === undefined) {
+            throw new Error('Required parameter body was null or undefined when calling appControllerAddTask.');
+        }
+
+
+        let headers = this.defaultHeaders;
+        if (authorization !== undefined && authorization !== null) {
+            headers = headers.set('Authorization', String(authorization));
+        }
+
+        // to determine the Accept header
+        let httpHeaderAccepts: string[] = [
+            'application/json'
+        ];
+        const httpHeaderAcceptSelected: string | undefined = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        if (httpHeaderAcceptSelected != undefined) {
+            headers = headers.set('Accept', httpHeaderAcceptSelected);
+        }
+
+        // to determine the Content-Type header
+        const consumes: string[] = [
+            'application/json'
+        ];
+        const httpContentTypeSelected: string | undefined = this.configuration.selectHeaderContentType(consumes);
+        if (httpContentTypeSelected != undefined) {
+            headers = headers.set('Content-Type', httpContentTypeSelected);
+        }
+
+        return this.httpClient.request<TaskReturnMessage>('post',`${this.basePath}/task`,
+            {
+                body: body,
+                withCredentials: this.configuration.withCredentials,
+                headers: headers,
+                observe: observe,
+                reportProgress: reportProgress
+            }
+        );
+    }
+
+    /**
+     *
+     *
+     * @param id 录像 ID
+     * @param authorization 认证密钥
+     * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
+     * @param reportProgress flag to report request and response progress.
+     */
+    public appControllerGetTask(id: string, authorization?: string, observe?: 'body', reportProgress?: boolean): Observable<TaskReturnMessage>;
+    public appControllerGetTask(id: string, authorization?: string, observe?: 'response', reportProgress?: boolean): Observable<HttpResponse<TaskReturnMessage>>;
+    public appControllerGetTask(id: string, authorization?: string, observe?: 'events', reportProgress?: boolean): Observable<HttpEvent<TaskReturnMessage>>;
+    public appControllerGetTask(id: string, authorization?: string, observe: any = 'body', reportProgress: boolean = false ): Observable<any> {
+
+        if (id === null || id === undefined) {
+            throw new Error('Required parameter id was null or undefined when calling appControllerGetTask.');
+        }
+
+
+        let queryParameters = new HttpParams({encoder: new CustomHttpUrlEncodingCodec()});
+        if (id !== undefined && id !== null) {
+            queryParameters = queryParameters.set('id', <any>id);
+        }
+
+        let headers = this.defaultHeaders;
+        if (authorization !== undefined && authorization !== null) {
+            headers = headers.set('Authorization', String(authorization));
+        }
+
+        // to determine the Accept header
+        let httpHeaderAccepts: string[] = [
+            'application/json'
+        ];
+        const httpHeaderAcceptSelected: string | undefined = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        if (httpHeaderAcceptSelected != undefined) {
+            headers = headers.set('Accept', httpHeaderAcceptSelected);
+        }
+
+        // to determine the Content-Type header
+        const consumes: string[] = [
+        ];
+
+        return this.httpClient.request<TaskReturnMessage>('get',`${this.basePath}/task`,
+            {
+                params: queryParameters,
+                withCredentials: this.configuration.withCredentials,
+                headers: headers,
+                observe: observe,
+                reportProgress: reportProgress
+            }
+        );
+    }
+
+}

src/api/configuration.ts

+export interface ConfigurationParameters {
+    apiKeys?: {[ key: string ]: string};
+    username?: string;
+    password?: string;
+    accessToken?: string | (() => string);
+    basePath?: string;
+    withCredentials?: boolean;
+}
+
+export class Configuration {
+    apiKeys?: {[ key: string ]: string};
+    username?: string;
+    password?: string;
+    accessToken?: string | (() => string);
+    basePath?: string;
+    withCredentials?: boolean;
+
+    constructor(configurationParameters: ConfigurationParameters = {}) {
+        this.apiKeys = configurationParameters.apiKeys;
+        this.username = configurationParameters.username;
+        this.password = configurationParameters.password;
+        this.accessToken = configurationParameters.accessToken;
+        this.basePath = configurationParameters.basePath;
+        this.withCredentials = configurationParameters.withCredentials;
+    }
+
+    /**
+     * Select the correct content-type to use for a request.
+     * Uses {@link Configuration#isJsonMime} to determine the correct content-type.
+     * If no content type is found return the first found type if the contentTypes is not empty
+     * @param contentTypes - the array of content types that are available for selection
+     * @returns the selected content-type or <code>undefined</code> if no selection could be made.
+     */
+    public selectHeaderContentType (contentTypes: string[]): string | undefined {
+        if (contentTypes.length == 0) {
+            return undefined;
+        }
+
+        let type = contentTypes.find(x => this.isJsonMime(x));
+        if (type === undefined) {
+            return contentTypes[0];
+        }
+        return type;
+    }
+
+    /**
+     * Select the correct accept content-type to use for a request.
+     * Uses {@link Configuration#isJsonMime} to determine the correct accept content-type.
+     * If no content type is found return the first found type if the contentTypes is not empty
+     * @param accepts - the array of content types that are available for selection.
+     * @returns the selected content-type or <code>undefined</code> if no selection could be made.
+     */
+    public selectHeaderAccept(accepts: string[]): string | undefined {
+        if (accepts.length == 0) {
+            return undefined;
+        }
+
+        let type = accepts.find(x => this.isJsonMime(x));
+        if (type === undefined) {
+            return accepts[0];
+        }
+        return type;
+    }
+
+    /**
+     * Check if the given MIME is a JSON MIME.
+     * JSON MIME examples:
+     *   application/json
+     *   application/json; charset=UTF8
+     *   APPLICATION/JSON
+     *   application/vnd.company+json
+     * @param mime - MIME (Multipurpose Internet Mail Extensions)
+     * @return True if the given MIME is JSON, false otherwise.
+     */
+    public isJsonMime(mime: string): boolean {
+        const jsonMime: RegExp = new RegExp('^(application\/json|[^;/ \t]+\/[^;/ \t]+[+]json)[ \t]*(;.*)?$', 'i');
+        return mime != null && (jsonMime.test(mime) || mime.toLowerCase() === 'application/json-patch+json');
+    }
+}

src/api/encoder.ts

+    import { HttpUrlEncodingCodec } from '@angular/common/http';
+
+/**
+* CustomHttpUrlEncodingCodec
+* Fix plus sign (+) not encoding, so sent as blank space
+* See: https://github.com/angular/angular/issues/11058#issuecomment-247367318
+*/
+export class CustomHttpUrlEncodingCodec extends HttpUrlEncodingCodec {
+    encodeKey(k: string): string {
+        k = super.encodeKey(k);
+        return k.replace(/\+/gi, '%2B');
+    }
+    encodeValue(v: string): string {
+        v = super.encodeValue(v);
+        return v.replace(/\+/gi, '%2B');
+    }
+}
+

src/api/git_push.sh

+#!/bin/sh
+# ref: https://help.github.com/articles/adding-an-existing-project-to-github-using-the-command-line/
+#
+# Usage example: /bin/sh ./git_push.sh wing328 swagger-petstore-perl "minor update"
+
+git_user_id=$1
+git_repo_id=$2
+release_note=$3
+
+if [ "$git_user_id" = "" ]; then
+    git_user_id="GIT_USER_ID"
+    echo "[INFO] No command line input provided. Set \$git_user_id to $git_user_id"
+fi
+
+if [ "$git_repo_id" = "" ]; then
+    git_repo_id="GIT_REPO_ID"
+    echo "[INFO] No command line input provided. Set \$git_repo_id to $git_repo_id"
+fi
+
+if [ "$release_note" = "" ]; then
+    release_note="Minor update"
+    echo "[INFO] No command line input provided. Set \$release_note to $release_note"
+fi
+
+# Initialize the local directory as a Git repository
+git init
+
+# Adds the files in the local repository and stages them for commit.
+git add .
+
+# Commits the tracked changes and prepares them to be pushed to a remote repository. 
+git commit -m "$release_note"
+
+# Sets the new remote
+git_remote=`git remote`
+if [ "$git_remote" = "" ]; then # git remote not defined
+
+    if [ "$GIT_TOKEN" = "" ]; then
+        echo "[INFO] \$GIT_TOKEN (environment variable) is not set. Using the git credential in your environment."
+        git remote add origin https://github.com/${git_user_id}/${git_repo_id}.git
+    else
+        git remote add origin https://${git_user_id}:${GIT_TOKEN}@github.com/${git_user_id}/${git_repo_id}.git
+    fi
+
+fi
+
+git pull origin master
+
+# Pushes (Forces) the changes in the local repository up to the remote repository
+echo "Git pushing to https://github.com/${git_user_id}/${git_repo_id}.git"
+git push origin master 2>&1 | grep -v 'To https'
+

src/api/index.ts

+export * from './api/api';
+export * from './model/models';
+export * from './variables';
+export * from './configuration';
+export * from './api.module';
\ No newline at end of file

src/api/model/models.ts

+export * from './postTaskMessage';
+export * from './recordTask';
+export * from './taskReturnMessage';

src/api/model/postTaskMessage.ts

+/**
+ * Yunomi
+ * YGOPro 录像工具
+ *
+ * OpenAPI spec version: 1.0
+ * 
+ *
+ * NOTE: This class is auto generated by the swagger code generator program.
+ * https://github.com/swagger-api/swagger-codegen.git
+ * Do not edit the class manually.
+ */
+
+export interface PostTaskMessage { 
+    /**
+     * 录像内容，Base64，需要 EncodeURI
+     */
+    replay: string;
+}
\ No newline at end of file

src/api/model/recordTask.ts

+/**
+ * Yunomi
+ * YGOPro 录像工具
+ *
+ * OpenAPI spec version: 1.0
+ * 
+ *
+ * NOTE: This class is auto generated by the swagger code generator program.
+ * https://github.com/swagger-api/swagger-codegen.git
+ * Do not edit the class manually.
+ */
+
+export interface RecordTask { 
+    /**
+     * 录像 ID
+     */
+    id: string;
+    /**
+     * 录像内容，Base64 形式。注意 EncodeURI。
+     */
+    replayContent: string;
+    /**
+     * 录像状态
+     */
+    status: RecordTask.StatusEnum;
+    /**
+     * 下载完成后，录像存放链接。
+     */
+    downloadLink: string;
+    /**
+     * 运行失败的原因。
+     */
+    failMessage: string;
+    /**
+     * 运行完成/失败的时间。
+     */
+    completeTime: Date;
+}
+export namespace RecordTask {
+    export type StatusEnum = 'pending' | 'queue' | 'running' | 'finished' | 'failed';
+    export const StatusEnum = {
+        Pending: 'pending' as StatusEnum,
+        Queue: 'queue' as StatusEnum,
+        Running: 'running' as StatusEnum,
+        Finished: 'finished' as StatusEnum,
+        Failed: 'failed' as StatusEnum
+    };
+}
\ No newline at end of file

src/api/model/taskReturnMessage.ts

+/**
+ * Yunomi
+ * YGOPro 录像工具
+ *
+ * OpenAPI spec version: 1.0
+ * 
+ *
+ * NOTE: This class is auto generated by the swagger code generator program.
+ * https://github.com/swagger-api/swagger-codegen.git
+ * Do not edit the class manually.
+ */
+import { RecordTask } from './recordTask';
+
+export interface TaskReturnMessage { 
+    /**
+     * 是否成功
+     */
+    success: boolean;
+    /**
+     * 录像任务
+     */
+    task: RecordTask;
+    /**
+     * 错误信息
+     */
+    message: string;
+}
\ No newline at end of file

src/api/ng-package.json

+{
+  "$schema": "./node_modules/ng-packagr/ng-package.schema.json",
+  "lib": {
+    "entryFile": "index.ts"
+  }
+}

src/api/variables.ts

+import { InjectionToken } from '@angular/core';
+
+export const BASE_PATH = new InjectionToken<string>('basePath');
+export const COLLECTION_FORMATS = {
+    'csv': ',',
+    'tsv': '   ',
+    'ssv': ' ',
+    'pipes': '|'
+}

src/app/app.component.css

-form.form-example {
-  display: table;
-}
-
-div.form-example {
-  display: table-row;
-}
-
-label, input {
-  display: table-cell;
-  margin-bottom: 10px;
-}
-
-label {
-  padding-right: 10px;
-}

src/app/app.component.html

@@ -8,20 +8,20 @@
       <table class="table table-striped">
         <thead>
         <tr>
-          <th width="20%">文件名</th>
-          <th width="20%">ID</th>
+          <th width="15%">文件名</th>
+          <th width="25%">ID</th>
           <th width="10%">转换状况</th>
           <th width="30%">其他信息</th>
           <th width="20%">完成时间</th>
         </tr>
         </thead>
         <tbody>
-        <tr>
-          <td>test.ydk</td>
-          <td>1</td>
-          <td>已完成</td>
-          <td></td>
-          <td>2021-5-15 11:24:00</td>
+        <tr *ngFor="let record of recordTasks; index as i"  [class.selected]="record.selected" (click)="onSelectRecord(i, record, $event) ">
+          <td>{{record.filename}}</td>
+          <td [class.table-active]="record.selected">{{record.id}}</td>
+          <td>{{record.status}}</td>
+          <td>{{record.failMessage}}</td>
+          <td>{{record.completeTime | date:"medium"}}</td>
         </tr>
         </tbody>
       </table>
@@ -34,19 +34,19 @@
     <div class="col-lg-1">
       <p>认证密钥: </p>
     </div>
-    <div class="col-lg-4">
+    <div class="col-lg-3">
       <div class="input-area">
-        <input type="password" name="token" id="token" required>
+        <input type="password" [(ngModel)]="token" name="token" id="token" required>
       </div>
     </div>
-    <div class="col-lg-7">
-      <button type="button" class="btn btn-danger">删除选中</button>
-      <button type="button" class="btn btn-success">下载选中</button>
+    <div class="col-lg-8">
+      <button type="button" (click)="testHello()" class="btn btn-primary col-lg-1">刷新</button>
+      <button type="button" (click)="onDownloadSelected()" class="btn btn-danger col-lg-2">删除选中</button>
+      <button type="button" class="btn btn-success col-lg-2">下载选中</button>
 <!--      <div class="mb-3">-->
 <!--        <label for="formFileMultiple" class="form-label">上传录像</label>-->
-        <input class="form-control" type="file" id="formFileMultiple" multiple>
+        <input class="form-control" class="col-lg-3" type="file" id="formFileMultiple" multiple>
 <!--      </div>-->
-      <button type="button" class="btn btn-primary">刷新</button>
     </div>
   </div>
 </div>

src/app/app.component.ts

 import {Component, OnInit} from '@angular/core';
 import {HttpClient} from "@angular/common/http";
+import {YunomiService} from "../api";
+
+interface RecordStorageData {
+  filename: string;
+
+  id: string;
+}
+
+interface RecordTask extends RecordStorageData {
+
+  replayContent?: string | null;
+
+  status: string;
+
+  downloadLink?: string | null;
+
+  failMessage?: string | null;
+
+  completeTime?: Date | null;
+
+  selected?: boolean;
+}
+
+const demoRecordTasks: RecordTask[] = [
+  {
+    filename: '11111111.ydk',
+    id: 'fed54dbc-0133-4025-849c-c6779921dacd',
+    status: "finished",
+    downloadLink: "https://1.1.1.1",
+    failMessage: null,
+    completeTime: new Date(),
+    selected: false
+  },
+  {
+    filename: '11111112.ydk',
+    id: 'fed63dc1-a847-497a-921f-c4850e29f3dd',
+    status: "finished",
+    downloadLink: "https://1.1.1.1",
+    failMessage: null,
+    completeTime: null,
+    selected: false
+  },
+  {
+    filename: '11111113.ydk',
+    id: 'febe681a-2ee2-4b34-88a4-7535601e605c',
+    status: "finished",
+    downloadLink: "https://1.1.1.1",
+    failMessage: null,
+    completeTime: null,
+    selected: false
+  },
+  {
+    filename: '11111114.ydk',
+    id: 'fe954bba-72d1-4213-8ba2-8c53f38f5c6a',
+    status: "finished",
+    downloadLink: "https://1.1.1.1",
+    failMessage: null,
+    completeTime: null,
+    selected: false
+  }
+]
 
 @Component({
   selector: 'app-root',
@@ -8,10 +69,54 @@ import {HttpClient} from "@angular/common/http";
 })
 export class AppComponent implements OnInit {
   title = 'Yunomi';
-  constructor(private http: HttpClient) {
-
+  token = localStorage.getItem("token");
+  replays: RecordStorageData[] = [];
+  recordTasks: RecordTask[] = [];
+  lastSelectedIndex: number | null = null;
+  constructor(private yunomiService: YunomiService) {
+    const replaysStorageRawData = localStorage.getItem('replays');
+    if(replaysStorageRawData) {
+      try {
+        this.replays = JSON.parse(replaysStorageRawData);
+      }catch(e) {}
+    }
   }
 
   ngOnInit(): void {
+    this.recordTasks = demoRecordTasks;
+  }
+
+  saveReplayData() {
+    localStorage.setItem('replays', JSON.stringify(this.replays));
+  }
+
+  saveToken() {
+    localStorage.setItem('token', this.token || '');
+  }
+
+  async testHello() {
+    const data = this.yunomiService.appControllerGetTask('ff7e85c5-69ac-4847-9498-fb87fd408e89', this.token!);
+    alert(JSON.stringify(await data.toPromise()));
+  }
+
+  onSelectRecord(i: number, record: RecordTask, mouseEvent: MouseEvent) {
+    const shiftPressed = mouseEvent.shiftKey;
+    if(this.lastSelectedIndex == null || !shiftPressed || this.lastSelectedIndex === i) {
+      record.selected = !record.selected;
+      this.lastSelectedIndex = i;
+    } else {
+      const targetSelected = this.recordTasks[this.lastSelectedIndex].selected;
+      const fromIndex = Math.min(this.lastSelectedIndex, i);
+      const toIndex = Math.max(this.lastSelectedIndex, i);
+      const recordsToSelect = this.recordTasks.slice(fromIndex, toIndex + 1);
+      for(let record of recordsToSelect) {
+        record.selected = targetSelected;
+      }
+    }
+
+  }
+
+  onDownloadSelected() {
+    const recordsToDownload = this.recordTasks.filter(r => r.selected);
   }
 }

src/app/app.module.ts

@@ -4,6 +4,8 @@ import { BrowserModule } from '@angular/platform-browser';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import {HttpClient, HttpClientModule} from "@angular/common/http";
+import {FormsModule} from "@angular/forms";
+import {ApiModule} from "../api";
 
 @NgModule({
   declarations: [
@@ -12,7 +14,9 @@ import {HttpClient, HttpClientModule} from "@angular/common/http";
   imports: [
     BrowserModule,
     AppRoutingModule,
-    HttpClientModule
+    HttpClientModule,
+    FormsModule,
+    ApiModule
   ],
   providers: [],
   bootstrap: [AppComponent]