docs: 修订部分文档内容；新增感悟

docs/usage-diaries/感悟.md

@@ -67,3 +67,11 @@
 举个例子来说，比如一个通用的表格结构，包含了表头搜索及操作、表体的分类和展示、表体操作栏、表尾分页等等。对于符合这种通俗且规则相同的，可以使用该种结构，若有些表格过于简洁，则可以使用文档中的方式而非设计的组件，若表格的规则过于复杂且和当前通用组件的规则不同，也应参照文档而非使用复杂的封装。
 
 优美的组件设计能力可以通过阅读代码的方式进行学习，望共勉！
+
+`**2024-07-05 14:10:52**`
+
+多虑的心态，最终受伤的还是自身，出门在外，不需要完全考虑别人的感受，只要不违背约定俗成的社会规范，就应该大胆的去做，而不是一味的吐槽自身，一味地去思索为啥会这样，这是完全没必要的，因为最终消耗的还是自身的心神，让自己心神疲惫。
+
+因为人一味的退让，会让别人以为这是一件理所当然的事情，从而变本加厉的索取。
+
+意外真的不是自己能够控制和预料到的，就像今天下午吃饭，突然就被一个电动车压到的碎瓷片弹到肚子上了，好在威力不大。这种完全避不开的事件，防不胜防，只能看命了。很多东西，根本不是自己能预测并按照预期目标行进的，所以，坦然面对而非内耗自己很重要，不要去做那些还未进入正轨的事情，毕竟这些很有可能不会发生。过去的这些年，内耗太过严重，同时，一些所谓的预测和计划，也是这般的无力，根本试行不起来。故而，当下做到能够做到的，而不是预测所有的事情，没有任何的事件都会按照你的预测进行，毕竟仅仅是一个普通人罢了。

docs/usage-frame/vue/Pinia.md

@@ -660,7 +660,7 @@ export const useStore = defineStore('user', {
   // 第一种，默认保存
   persist: true,
   // 第二种，选择性保存
-  perist: {
+  persist: {
     paths: ['name', 'info.des']
   }
 })

docs/usage-frame/vue/nuxtjs-demo-doc.md

@@ -85,7 +85,7 @@ export default defineNuxtConfig({
       '/**': { isr: true }
     }
   },
-  $development: {}
+  $development: {},
 
   // 导出全局可用的环境变量，给server-side和client-side使用；
   // 在构建后需要指定的变量（比如私有token）

docs/usage-frame/vue/vite.md

@@ -283,6 +283,13 @@ degit anncwb/vue-vben-admin project-name
 - 较小的资源（小于`assetsInlineLimit`选项配置的）会被内联为base64
 - git lfs占位符会自动排除在内联之外，因为他们不包含他们所表示的文件的内容，要获得内联，需确保在构建之前通过git lfs下载文件内容
 - 默认typescript不会将静态资源导入视为有效的模块，解决这个问题，需添加`vite/client`
+- 通过 url() 内联 SVG，当在 JS 中手动构造 url() 并传入一个 SVG 的 URL 时，应该用双引号将变量包裹起来。
+
+```typescript
+// 通过 url() 内联 SVG
+import imgUrl from './img.svg'
+document.getElementById('hero-img').style.background = `url("${imgUrl}")`
+```
 
 **public目录**：
 
@@ -299,9 +306,16 @@ degit anncwb/vue-vben-admin project-name
 
 - `import.meta.url`是esm原生功能，会暴露当前模块的url，和原生url构造器`new URL`一起使用，可得到一个完整解析的静态资源url，比如`const imgurl = new URL('./img.png', import.meta.url).href`，这能在现代浏览器中直接使用，不需vite处理
 - 还支持动态url，通过模板字符串引入动态变量路径
-- 不支持完全的变量名作为路径，出上面的模板字符串外，必须是静态字符串
+- 不支持完全的变量名作为路径，除上面的模板字符串外，必须是静态字符串
 - 无法在ssr中使用
 
+```typescript
+// 模板字符串动态url
+function getImageUrl (name) {
+  return new URL(`./dir/${name}.png`, import.meta.url).href
+}
+```
+
 ## 使用插件
 
 前置信息：

docs/usage-frame/vue/vue-router迁移指南.md

@@ -297,7 +297,7 @@ const routes = [
 ## 路由组件传参
 
 场景解释：
-- 用于路由和组件解耦，即不通过$route.params获取路由的参数，而是直接通过porps获取
+- 用于路由和组件解耦，即不通过$route.params获取路由的参数，而是直接通过props获取
 
 用法：
 - 当路径对象中包含路由参数（以`:`开头的）时，在path属性的同级设置属性props为true之后，在组件中获取到的路由参数(`route.params`的属性)会当作组件的props传入组件，此时只需要在组件中定义好对应的props即可。之后可以直接通过对应的prop获取到相关路由参数的值