{
+ if (route.path) {
+ navigate(route.path);
+ }
+ }}
+ className={`p-2 cursor-pointer ${
+ isActive ? "bg-blue-100 text-blue-600" : "bg-transparent text-black"
+ } transition-all duration-300`}
+ >
+ {route.path}
+
+ );
+ };
+
+ return (
+
+
+
+ {!isCollapsed && (
+ <>
+
+ );
+}
+
+export default Sidebar;
+```
+
+## 2. combine the self config and automatically generated config together
+
+since the dirs of the `vite-plugin-pages` plugin is `src/views` (we config it in the step 2), so we can combine the self config and automatically generated config together.
+
+we need to create a dir which is not in the `src/views` dir(such as `src/pages`)
+
+``` tsx
+import routes from "~react-pages";
+import HomePage from 'src/pages/home/index.tsx';
+
+const pathsRouterConfig = routes
+const pathsManualConfig = [
+ {
+ path: '/home',
+ component: {routes.map(renderMenuItem)}
+
+ )}
+ 
+
+### 开启元素查看
+
+会在面板上显示当前的元素，以及它的 props,context,state。
+
+如果发生变化，会变为紫色，这样可以方便你排查是什么值的变化导致了 re-render。
+
+在某些元素的 props 中会显示一个⚠️警告标志（isBadRender），提醒开发者这里可能存在性能优化的空间
+
+``` ts
+const isBadRender =
+ isChanged &&
+ ['object', 'function'].includes(typeof lastValue) &&
+ fastSerialize(lastValue) === fastSerialize(contextObj[key]);
+```
+
+为什么情况下会出现：
+
+- 组件发生了重新渲染（isChanged 为 true）
+- 变化的值是对象或函数类型（['object', 'function'].includes(typeof lastValue)）
+- 但是当我们序列化新旧值时，它们是完全相同的（fastSerialize(lastValue) === fastSerialize(contextObj[key])）
+
+### 开启 re-render 查看
+
+会显示当前的 re-render 的次数，以及每个 re-render 的组件。
+
+## 为什么觉得好用
+
+虽然 devtool 也可以查看 re-render 的情况，但是 react-scan 把 component 的 props,context,state 都显示出来并且标记了 bad render,让问题的排查更加方便。
+
+并且 react-scan 自带面板，不需要像 devtool 一样首先需要打开 devtool 再勾选上 re-render 的画面闪烁监听。
+
+
+
+## 参考
+
+[还有这种前端技巧？REACT-SCAN 代码鉴赏｜精简版\_哔哩哔哩\_bilibili](https://www.bilibili.com/video/BV1JrzvYgERi/)
\ No newline at end of file
diff --git a/src/content/note/search params 请求参数的获取与更新.md b/src/content/note/search params 请求参数的获取与更新.md
new file mode 100644
index 0000000..9ae4e5c
--- /dev/null
+++ b/src/content/note/search params 请求参数的获取与更新.md
@@ -0,0 +1,98 @@
+---
+title: search params 请求参数
+date: 2024-11-13
+author: KazooTTT
+type: Post
+status: Published
+tags:
+ - useSearchParams
+ - React Router
+ - qs
+ - window.location.search
+finished: true
+published: true
+category: 前端
+slug: search-params
+description: >-
+ React Router 的 `useSearchParams` Hook 提供了一个内建的 API，允许直接获取查询参数的值，比如 `.get()`,
+ `.set()`, `.append()` 等。该 hook 可以帮助开发者轻松地处理 URL 中的 query parameters。
+ 使用 `qs` 库和 `window.location.search` 的方法也是可以实现解析 query parameters
+ 的效果。但需要注意的是，`qs.parse(window.location.search)`
+ 会将带有问号的字符串直接返回，而不对其进行处理。在正确的情况下，将需要手动去掉问号，以得到期望的结果。
+ React Router 的 `useSearchParams` Hook 和 `qs` 库结合使用，可以帮助开发者更容易地管理 URL 中的 query
+ parameters。
+NotionID-notionnext: 13d55568-fd75-81f5-be1b-e0a4f8137355
+link-notionnext: 'https://kazoottt.notion.site/search-params-13d55568fd7581f5be1be0a4f8137355'
+toAstro: true
+date_created: 2025-01-04T11:44:53+08:00
+date_modified: 2025-01-22T13:39:19+08:00
+---
+
+## react router `useSearchParams`
+
+[useSearchParams | React Router](https://reactrouter.com/en/main/hooks/use-search-params#usesearchparams)
+
+``` ts
+interface URLSearchParams {
+ /** Appends a specified key/value pair as a new search parameter. */
+ append(name: string, value: string): void;
+ /** Deletes the given search parameter, and its associated value, from the list of all search parameters. */
+ delete(name: string): void;
+ /** Returns the first value associated to the given search parameter. */
+ get(name: string): string | null;
+ /** Returns all the values association with a given search parameter. */
+ getAll(name: string): string[];
+ /** Returns a Boolean indicating if such a search parameter exists. */
+ has(name: string): boolean;
+ /** Sets the value associated to a given search parameter to the given value. If there were several values, delete the others. */
+ set(name: string, value: string): void;
+ sort(): void;
+ /** Returns a string containing a query string suitable for use in a URL. Does not include the question mark. */
+ toString(): string;
+ forEach(callbackfn: (value: string, key: string, parent: URLSearchParams) => void, thisArg?: any): void;
+}
+
+```
+
+它提供了内建的 API，允许直接获取查询参数的值，比如 `.get()`, `.set()`, `.append()` 等。
+
+``` ts
+ const [queryParams, setQueryParams] = useSearchParams();
+ console.log('%c Line:52 🍿 queryParams', 'color:#33a5ff', queryParams.get('medicalRecordID'));
+```
+
+## qs + window.location
+
+[GitHub - ljharb/qs: A querystring parser with nesting support](https://github.com/ljharb/qs)
+
+
+
+使用 window.location.search 获取到请求参数对应的字符串（需要注意的是：字符串是带有?的）
+
+然后使用 qs.parse 方法来解析查询字符串
+
+案例：localhost?medicalRecordID=1
+
+错误使用:
+
+``` ts
+const getQueryParam = (): QueryParams => {
+ // use qs to parse the query params
+ const queryParams: QueryParams = qs.parse(window.location.search);
+ return queryParams;
+};
+```
+
+
+
+正确使用：
+
+``` ts
+const getQueryParam = (): QueryParams => {
+ // use qs to parse the query params
+ const queryParams: QueryParams = qs.parse(window.location.search.slice(1));
+ return queryParams;
+};
+```
+
+
diff --git a/src/content/note/shot.so - 图片美化工具.md b/src/content/note/shot.so - 图片美化工具.md
new file mode 100644
index 0000000..b2b38c3
--- /dev/null
+++ b/src/content/note/shot.so - 图片美化工具.md
@@ -0,0 +1,29 @@
+---
+title: shot.so
+date: 2023-09-17
+author: KazooTTT
+tags:
+ - 软件推荐
+ - 图片处理
+ - 设计
+ - 图片美化工具
+finished: true
+published: true
+slug: shotso-image-beautification-tool
+description: shot.so是一个图片美化工具，主要用于快速美化截图。它支持设备模拟，允许用户修改阴影、边框、比例等属性。该工具内置了大量免费模板，方便用户快速创建精美的图片效果。
+rinId: 62
+category: 软件
+toAstro: true
+date_created: 2024-12-02T11:03:24+08:00
+date_modified: 2025-01-22T13:39:19+08:00
+---
+
+# shot.so - 图片美化工具
+
+
+
+昨天在超话看到了杂货铺的小说的翻译
+
+[中字自翻《Whale... - @Co_Shean01的微博 - 微博](https://weibo.com/6515676456/P4RZHdySF#comment)
+
+
+
+然后由于是分章节每个章节有对应的 pdf，而我比较喜欢使用微信读书来进行阅读，所以产生了想要把所有的 pdf 合并为一个的需求。
+
+虽然现在随便搜索都能搜到有这样现成的工具，但是出于学习目的，还是自己写了一个合并 pdf 的网站。
+
+## 鸣谢
+
+使用了 [GitHub - nbesli/pdf-merger-js](https://github.com/nbesli/pdf-merger-js) 这个库来进行 pdf 的合并
\ No newline at end of file
diff --git a/src/content/note/在react中不要滥用 short-circuit &&.md b/src/content/note/在react中不要滥用 short-circuit &&.md
new file mode 100644
index 0000000..3a5829c
--- /dev/null
+++ b/src/content/note/在react中不要滥用 short-circuit &&.md
@@ -0,0 +1,58 @@
+---
+title: 在react中不要滥用 &&
+date: 2024-10-16
+author: KazooTTT
+tags:
+ - bug
+ - react
+ - jsx
+ - short-circuit
+ - 前端
+finished: true
+published: true
+description: >-
+ 在React中使用短路运算符（&&）时，0 会被错误地渲染为内容。通过避免使用 && 判断数字，特别是可能为 0 的值，可以确保正确的内容显示，例如显示
+ 0号相机 而非仅仅显示 0。
+slug: do-not-misuse-short-circuiting-in-react
+category: 前端
+NotionID-notionnext: 12b55568-fd75-815c-ba9c-ff587a86a262
+link-notionnext: >-
+ https://kazoottt.notion.site/react-short-circuit-12b55568fd75815cba9cff587a86a262
+toAstro: true
+date_created: 2025-01-04T11:44:53+08:00
+date_modified: 2025-01-22T13:39:19+08:00
+---
+
+## 错误现象
+
+代码如下：
+
+``` jsx
+{camera_id && (
+ {camera_id}号相机
+)}
+```
+
+当 camera_id>0 的时候，正常显示 x 号相机
+
+当 camera_id=0 的时候，**异常**显示 0,而不是 0 号相机
+
+## 错误原因
+
+这是因为在 JavaScript 中，`0` 被视为 falsy 值，因此当 `camera_id` 为 `0` 时，条件判断 `camera_id &&` 会返回 `false`。所以后面的内容不被渲染。
+
+但是 0 是可以被 react 渲染的，所以最后显示的是 0，而不是不显示。
+
+## 解决方法
+
+涉及到数字且可能为 0 的时候，不要直接使用&&来判断，而是使用
+
+``` jsx
+{camera_id !== undefined && (
+ {camera_id}号相机
+)}
+```
+
+## 参考
+
+[reactjs - React showing 0 instead of nothing with short-circuit (&&) conditional component - Stack Overflow](https://stackoverflow.com/questions/53048037/react-showing-0-instead-of-nothing-with-short-circuit-conditional-component)
diff --git a/src/content/note/在vtk.js中stl和json的互相转化.md b/src/content/note/在vtk.js中stl和json的互相转化.md
new file mode 100644
index 0000000..44980d5
--- /dev/null
+++ b/src/content/note/在vtk.js中stl和json的互相转化.md
@@ -0,0 +1,79 @@
+---
+title: 在vtk.js中stl和json的互相转化
+date: 2024-11-22
+author: KazooTTT
+type: Post
+status: Published
+tags:
+ - stl
+ - json
+ - vtkjs
+ - 3D模型
+ - 数据转换
+finished: true
+published: true
+category: 前端
+slug: in-vtkjs-stl-and-json-are-converted-to-each-other
+description: >-
+ STL模型可以通过 JavaScript 的 `vtk.js` 库以 JSON 格式进行读写。将 STL 模型读入 JSON 格式的方法是使用
+ `vtkPolyData.toJSON()` 方法，反之，则需要使用 `vtkSTLWriter.newInstance()` 和
+ `writer.getOutputData()` 来生成 STL 模型的文件内容。
+noteId_x: 15
+create_time: '2024/11/22 13:35:36'
+update_time: '2024/11/22 14:40:08'
+publish_time: '2024/11/22 14:38:29'
+toAstro: true
+date_created: 2025-01-04T11:44:53+08:00
+date_modified: 2025-01-22T13:39:19+08:00
+---
+
+## stl 如何转为 json
+
+``` ts
+import vtkSTLReader from '@kitware/vtk.js/IO/Geometry/STLReader';
+
+const getStlModelFromPath = async (path: string) => {
+ const response = await fetch(path);
+ const stlArrayBuffer = await response.arrayBuffer();
+
+ const stlReader = vtkSTLReader.newInstance();
+ stlReader.parseAsArrayBuffer(stlArrayBuffer);
+
+ const polyData = stlReader.getOutputData();
+ return polyData;
+};
+
+const stlPath = '/path/to/your/model.stl';
+const polyData = await getStlModelFromPath(stlPath);
+const jsonData = polyData.toJSON();
+```
+
+## json 如何转为 stl
+
+``` ts
+import modelJSON from './model.json';
+
+const convertPolyDataJSONToStl = (polyDataJSON: string, fileName: string = 'model.stl') => {
+ const polyData = vtkPolyData.newInstance(polyDataJSON);
+ const writer = vtkSTLWriter.newInstance();
+
+ writer.setInputData(polyData);
+ const fileContents = writer.getOutputData();
+
+ // Create a blob and download link
+ const blob = new Blob([fileContents], { type: 'application/octet-stream' });
+ const a = window.document.createElement('a');
+ a.href = window.URL.createObjectURL(blob);
+ a.download = fileName;
+
+ // Trigger download
+ document.body.appendChild(a);
+ a.click();
+ document.body.removeChild(a);
+ window.URL.revokeObjectURL(a.href);
+};
+
+
+convertPolyDataJSONToStl(modelJSON);
+
+```
diff --git a/src/content/note/在前端使用abort取消请求.md b/src/content/note/在前端使用abort取消请求.md
new file mode 100644
index 0000000..9543c75
--- /dev/null
+++ b/src/content/note/在前端使用abort取消请求.md
@@ -0,0 +1,231 @@
+---
+title: 在前端使用abort取消请求
+date: 2024-04-17
+author: KazooTTT
+type: Post
+status: Draft
+tags:
+ - 前端
+ - request
+ - 网络
+ - abortController
+ - 实践
+finished: true
+published: true
+slug: use-abort-on-the-frontend-to-cancel-the-request
+description: 本文介绍了在不同前端框架中如何取消HTTP请求的方法。在原生JavaScript中，使用AbortController接口来实现请求的取消。在React中，通过useState和useEffect钩子管理AbortController的状态，并在组件卸载时自动取消请求。在SolidJS中，利用createSignal和onCleanup来处理AbortController，确保在需要时可以中断请求。这些方法都通过创建AbortController实例，并在fetch请求中使用其signal属性来控制请求的取消。
+NotionID-notionnext: 801e2fa1-dfa9-4b4f-b579-ef7f6658b9d3
+link-notionnext: https://kazoottt.notion.site/abort-801e2fa1dfa94b4fb579ef7f6658b9d3
+rinId: 53
+toAstro: true
+date_created: 2025-01-04T11:34:08+08:00
+date_modified: 2025-01-22T13:39:19+08:00
+---
+
+# 在前端使用 abort 取消请求
+
+举个例子，在写 llm 的 chat 的时候，经常会出现需要取消请求的场景。
+
+如何在**前端**取消请求，涉及到一个接口：[AbortController.AbortController() - Web API 接口参考 | MDN](https://developer.mozilla.org/zh-CN/docs/Web/API/AbortController/AbortController)
+
+在原生的 js 的写法，参考 mdn 的写法。
+
+```js
+let controller
+const url = "video.mp4"
+
+const downloadBtn = document.querySelector(".download")
+const abortBtn = document.querySelector(".abort")
+
+downloadBtn.addEventListener("click", fetchVideo)
+
+abortBtn.addEventListener("click", () => {
+ if (controller) {
+ controller.abort()
+ controller = null
+ console.log("Download aborted")
+ }
+})
+
+function fetchVideo() {
+ controller = new AbortController()
+ const signal = controller.signal
+ fetch(url, { signal })
+ .then((response) => {
+ console.log("Download complete", response)
+ })
+ .catch((err) => {
+ console.error(`Download error: ${err.message}`)
+ })
+}
+```
+
+在 react 的写法
+
+```jsx
+import React, { useState, useEffect } from "react"
+
+const RequestComponent = () => {
+ const [responseData, setResponseData] = useState(null)
+ const [error, setError] = useState(null)
+ const [loading, setLoading] = useState(false)
+ const [controller, setController] = useState(null)
+
+ useEffect(() => {
+ // 组件被卸载的时候，取消请求
+ return () => {
+ if (controller) {
+ controller.abort()
+ }
+ }
+ }, [controller])
+
+ const fetchData = async () => {
+ setLoading(true)
+ setError(null)
+
+ const abortController = new AbortController()
+ setController(abortController)
+
+ try {
+ const response = await fetch("https://api.example.com/data", {
+ signal: abortController.signal,
+ })
+
+ if (!response.ok) {
+ throw new Error("Network response was not ok")
+ }
+
+ const data = await response.json()
+ setResponseData(data)
+ } catch (error) {
+ if (error.name === "AbortError") {
+ console.log("Request canceled by user")
+ } else {
+ setError(error)
+ }
+ } finally {
+ setLoading(false)
+ }
+ }
+
+ const cancelRequest = () => {
+ if (controller) {
+ controller.abort()
+ }
+ }
+
+ return (
+
+
+
+ {error &&
+ )
+}
+
+export default RequestComponent
+```
+
+在 solidjs 中的写法，可以参考 diu 老师的 [GitHub - anse-app/chatgpt-demo: Minimal web UI for ChatGPT.](https://github.com/anse-app/chatgpt-demo)
+
+```js
+import { Index, Show, createEffect, createSignal, onCleanup, onMount } from 'solid-js'
+import { useThrottleFn } from 'solidjs-use'
+import { generateSignature } from '@/utils/auth'
+import IconClear from './icons/Clear'
+import MessageItem from './MessageItem'
+import SystemRoleSettings from './SystemRoleSettings'
+import ErrorMessageItem from './ErrorMessageItem'
+import type { ChatMessage, ErrorMessage } from '@/types'
+
+export default () => {
+ const [controller, setController] = createSignalError: {error.message}
}
+ {responseData && Data: {JSON.stringify(responseData)}
}
+