fix: 修复 bangumi search API 中的流式接口，webui 对应接口定义方法改造

- StreamingResponse 换成 EventSourceResponse，即 Server Send Event Source 方式发送数据
- webui 中 search 接口改成 rxjs Observable 方式，
  这次来不及改到 vue 里，但是写了接口 usage example；
- 顺手补了一些 vscode 通用的开发配置，
  补了之前配置文件解析漏了一个可用环境变量的 host 字段

webui/package.json

@@ -24,6 +24,7 @@
     "lodash": "^4.17.21",
     "naive-ui": "^2.34.4",
     "pinia": "^2.1.3",
+    "rxjs": "^7.8.1",
     "vue": "^3.3.4",
     "vue-i18n": "^9.2.2",
     "vue-inline-svg": "^3.1.2",
@@ -42,9 +43,11 @@
     "@storybook/vue3-vite": "^7.0.12",
     "@types/lodash": "^4.14.194",
     "@types/node": "^18.16.14",
+    "@unocss/preset-attributify": "^0.55.3",
     "@unocss/preset-rem-to-px": "^0.51.13",
     "@unocss/reset": "^0.51.13",
     "@vitejs/plugin-vue": "^4.2.0",
+    "@vue/runtime-dom": "^3.3.4",
     "eslint": "^8.41.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-storybook": "^0.6.12",

webui/pnpm-lock.yaml

@@ -23,6 +23,9 @@ dependencies:
   pinia:
     specifier: ^2.1.3
     version: 2.1.3(typescript@4.9.5)(vue@3.3.4)
+  rxjs:
+    specifier: ^7.8.1
+    version: 7.8.1
   vue:
     specifier: ^3.3.4
     version: 3.3.4
@@ -73,6 +76,9 @@ devDependencies:
   '@types/node':
     specifier: ^18.16.14
     version: 18.16.14
+  '@unocss/preset-attributify':
+    specifier: ^0.55.3
+    version: 0.55.3
   '@unocss/preset-rem-to-px':
     specifier: ^0.51.13
     version: 0.51.13
@@ -82,6 +88,9 @@ devDependencies:
   '@vitejs/plugin-vue':
     specifier: ^4.2.0
     version: 4.2.3(vite@4.3.5)(vue@3.3.4)
+  '@vue/runtime-dom':
+    specifier: ^3.3.4
+    version: 3.3.4
   eslint:
     specifier: ^8.41.0
     version: 8.41.0
@@ -3549,6 +3558,10 @@ packages:
     resolution: {integrity: sha512-SclWkqY2c+p5+PiqrbQkhJNEExPdeo71/aGFye10tpBkgPJWd5xC7dhg5F8M4VPNBtuNCrvBWyqNnunMyuz/WQ==}
     dev: true
 
+  /@unocss/core@0.55.3:
+    resolution: {integrity: sha512-2hV9QlE/iOM4DHQ7i6L8sMC1t5/OVAz6AfGHjetTXcgbNfDCsHWqE8jhLZ1y2DeUvKwJvj2A09sYbYQ8E27+Gg==}
+    dev: true
+
   /@unocss/extractor-arbitrary-variants@0.51.13:
     resolution: {integrity: sha512-lF7p0ea/MeNf4IsjzNhRNYP8u+f1h5JjhTzcvFpQo/vpBvuM5ZCyqp4mkXxYnLNLFfTLsc+MxXaU34IXxpw1QA==}
     dependencies:
@@ -3582,6 +3595,12 @@ packages:
       '@unocss/core': 0.51.13
     dev: true
 
+  /@unocss/preset-attributify@0.55.3:
+    resolution: {integrity: sha512-h3t6hPIk8pll3LubIIIsgRigvJivK3PX308Pi9Q0IUdw0vFq4S80iLQ1N0kRchQtgOaAIGffo9ux+TCbyunP3A==}
+    dependencies:
+      '@unocss/core': 0.55.3
+    dev: true
+
   /@unocss/preset-icons@0.51.13:
     resolution: {integrity: sha512-iL9s1NUVeWe3WSh5LHn7vy+veCAag9AFA50IfNlHuAARhuI8JtrMQA8dOXrWrzM0zWBMB+BVIkVaMVrF257n+Q==}
     dependencies:
@@ -8466,6 +8485,12 @@ packages:
       queue-microtask: 1.2.3
     dev: true
 
+  /rxjs@7.8.1:
+    resolution: {integrity: sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==}
+    dependencies:
+      tslib: 2.5.2
+    dev: false
+
   /safe-buffer@5.1.1:
     resolution: {integrity: sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==}
     dev: true
@@ -9104,7 +9129,6 @@ packages:
 
   /tslib@2.5.2:
     resolution: {integrity: sha512-5svOrSA2w3iGFDs1HibEVBGbDrAY82bFQ3HZ3ixB+88nsbsWQoKqDRb5UBYAUPEzbBn6dAp5gRNXglySbx1MlA==}
-    dev: true
 
   /tsutils@3.21.0(typescript@4.9.5):
     resolution: {integrity: sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==}

webui/src/api/search.ts

@@ -1,11 +1,80 @@
+import {
+  Observable,
+} from 'rxjs';
+
+import type { BangumiRule } from '#/bangumi';
+
 export const apiSearch = {
-  async get(keyword: string, site = 'mikan') {
-    const { data } = await axios.get('api/v1/search', {
-      params: {
-        site,
-        keyword,
-      },
+  /**
+   * 番剧搜索接口是 Server Send 流式数据，每条是一个 Bangumi JSON 字符串，
+   * 使用接口方式需要订阅使用
+   * 
+   * Usage Example:
+   * 
+   * ```ts
+   *   import {
+   *     Subject,
+   *     tap,
+   *     map,
+   *     switchMap,
+   *     debounceTime,
+   *   } from 'rxjs';
+   *
+   *   
+   *   const input$ = new Subject<string>();
+   *   const onInput = (e: Event) => input$.next(e.target);
+   * 
+   *   // vue: <input @input="onInput">
+   * 
+   *   const bangumiInfo$ = apiSearch.get('魔女之旅');
+   *   
+   *   // vue: start loading animation
+   * 
+   *   input$.pipe(
+   *     debounceTime(1000),
+   *     tap((input: string) => {
+   *       console.log('input', input)
+   *       // clear Search Result List
+   *     }),
+   *
+   *     // switchMap 把输入 keyword 查询为 bangumiInfo$ 流，多次输入停用前一次查询
+   *     switchMap((input: string) => apiSearch(input, site)),
+   *
+   *     tap((bangumi: BangumiRule) => console.log(bangumi)),
+   *     tap((bangumi: BangumiRule) => {
+   *       console.log('bangumi', bangumi)
+   *       // set bangumi info to Search Result List
+   *     }),
+   *   ).subscribe({
+   *     complete() {
+   *       // end of stream, stop loading animation 
+   *     },
+   *   })
+   * ```
+   */
+  get(keyword: string, site = 'mikan'): Observable<BangumiRule> { 
+    const bangumiInfo$ = new Observable<BangumiRule>(observer => {
+      const eventSource = new EventSource(
+        `api/v1/search?site=${site}&keyword=${encodeURIComponent(keyword)}`,
+        { withCredentials: true },
+      );
+
+      eventSource.onmessage = ev => {
+        try {
+          const data: BangumiRule = JSON.parse(ev.data);
+          observer.next(data);
+        } catch (error) {
+          observer.error(error);
+        }
+      };
+
+      eventSource.onerror = ev => observer.error(ev);
+
+      return () => {
+        eventSource.close();
+      };
     });
-    return data!;
+
+    return bangumiInfo$;
   },
 };

webui/types/bangumi.ts

@@ -1,3 +1,6 @@
+/**
+ * @type `Bangumi` in backend/src/module/models/bangumi.py
+ */
 export interface BangumiRule {
   added: boolean;
   deleted: boolean;

webui/types/dts/html.d.ts

@@ -0,0 +1,9 @@
+/**
+ * https://unocss.dev/presets/attributify#vue-3
+ */
+
+import type { AttributifyAttributes } from '@unocss/preset-attributify'
+
+declare module '@vue/runtime-dom' {
+  interface HTMLAttributes extends AttributifyAttributes {}
+}