docs(look for jobs): 第一天，更新诸多知识点

docs/.vitepress/theme/custom.css

@@ -88,3 +88,8 @@ html:not(.dark) .vp-doc [class*='language-'] > span.lang {
     width: calc(100% - var(--vp-sidebar-width)) !important;
   }
 }
+
+/* 修改details块内多个div之间的隔离 */
+div[class*='language-'] + div[class*='language-'] {
+  margin-top: 16px !important;;
+}

docs/usage-frame/vue/Pinia.md

@@ -623,6 +623,49 @@ declare module 'pinia' {
   }
 }
 ```
+
+:::
+
+### 数据持久化插件
+
+**pinia-plugin-persistedstate**：
+
+::: details 用法
+
+引入插件：
+
+```typescript
+// main.ts
+import { createPinia } from 'pinia'
+import piniaPersist from 'pinia-plugin-persistedstate'
+
+const pinia = createPinia()
+pinia.use(piniaPersist)
+createApp(App).use(pinia).mount('#app')
+```
+
+数据保存：
+
+```typescript
+import { defineStore } from 'pinia'
+
+export const useStore = defineStore('user', {
+  state: () => ({
+    name: null,
+    age: null,
+    info: {
+      des: null
+    }
+  }),
+  // 第一种，默认保存
+  persist: true,
+  // 第二种，选择性保存
+  perist: {
+    paths: ['name', 'info.des']
+  }
+})
+```
+
 :::
 
 ## 在组件外使用store

docs/usage-frame/vue/vite.md

@@ -201,7 +201,7 @@ degit anncwb/vue-vben-admin project-name
   - 加载为web worker（获取一个worker函数）：`import worker from './worker.js?worker'`
   - 构建web worker时，内联为base64字符串：`import inlineWorker from './worker.js?worker&inline'`
 - json文件可以直接被导入，且支持具名导入  
-- vite导入多个模块：`import.meta.glob('./dir/*.js')`，这将会导入dir目录下的所有js文件，返回一个以文件名路径为key，模块对象为value的对象；
+- vite导入多个模块：`import.meta.glob('./dir/*.js')`，这将会导入dir目录下的所有js文件，返回一个以文件名路径为key，模块对象为value的对象；可用于组件批量注册
   - 匹配到的文件默认是懒加载的，通过动态导入实现，会在构建时分离为独立的chunk；
   - 若想直接导入所有模块，可以传入`{eager: true}`作为第二个参数；
   - glob的导入形式可以通过第二个参数选项as属性实现，比如获取文件的内容`{as: 'raw'}`，获取文件的url`{ as: 'url'}`
@@ -505,6 +505,16 @@ interface ImportMeta {
 > - https://github.com/pure-admin/vue-pure-admin
 
 ```typescript
-
+module.exports = {
+  proxy: {
+    // string shorthand
+    '/foo': 'http://localhost:4567/foo',
+    // with options
+    '/api': {
+      target: 'http://jsonplaceholder.typicode.com',
+      changeOrigin: true,
+      rewrite: path => path.replace(/^\/api/, '')
+    }
+  }
+ }
 ```
-

docs/usage-frame/vue/vue3保点.md

@@ -1832,6 +1832,27 @@ import ComponentA from './ComponentA.vue'
 - 在dom中，使用闭合标签，即`</div>`
 - 特定元素仅在特定元素内部，比如tr在table内部，若想使用自定义组件替换tr，应使用`<tr is="vue:自定义组件名"></tr>`，在原生元素上is必须加前缀vue才会解析为一个vue组件。
 
+**自定义注册组件**：
+
+```javascript
+import { defineAsyncComponent } from 'vue'
+import JdBtn from './jdbtn/index.vue'
+
+export default {
+  install (app) {
+    const components = import.meta.glob('./*/index.vue')
+
+    for (let [key, component] of Object.entries(components)) {
+      const componentName = 'jd-' + key.replace('./', '').split('/')[0]
+      app.component(componentName, defineAsyncComponent(component))
+    }
+
+    // 非异步直接这样注册：
+    app.component('jd-btn', JdBtn)
+  }
+}
+```
+
 ### 动态组件
 
 语法：`<component :is="xxx">`，其中xxx可以是：

docs/usage-frame/基础/CSS知识点.md

@@ -393,6 +393,17 @@ dd + dd {
 
 **修改滚动条样式**：
 
+方法1：
+
+```scss
+html.dark {
+   // 将系统滚动条设为黑色模式
+   color-scheme: dark;
+}
+```
+
+方法2：
+
 ::: code-group
 
 ```scss [chrome-css]

docs/usage-frame/基础/JavaScript知识点.md

@@ -86,6 +86,72 @@ function callback (mutationList, observer) {
 
 ```
 
+### 获取系统主题`MatchMedia`
+
+**通过JavaScript**：
+
+```javascript [获取系统主题]
+// 判断是否是dark模式
+const mediaQueryListDark = window.matchMedia('(prefers-color-scheme: dark)')
+if (mediaQueryListDark.matches) {
+  // 系统主题为dark
+} else {
+  // 系统主题为light
+}
+
+// 判断是否是light模式
+const mediaQueryListLight = window.matchMedia('(prefers-color-scheme: light)')
+
+// 监听系统主题变化
+mediaQueryListDark.addEventListener('change', (evt) => {
+  if (evt.matches) {
+    // 切换到了dark模式
+  } else {
+    // 切换到了light模式
+  }
+})
+```
+
+**通过css**：
+
+```css [获取系统主题]
+/* 第一种： */
+body {
+  color: #ccc;
+}
+/* 利用媒体查询检测用户是否将系统主题色设置为light或dark */
+@media (prefers-color-scheme: light) {
+  /* 系统主题为light时的样式 */
+  body {
+    color: #eee;
+  }
+}
+@media (prefers-color-scheme: dark) {
+  /* 系统主题为dark时的样式 */
+  body {
+    color: #000;
+  }
+}
+
+/* 第二种：结合css变量 */
+:root {
+  --color: #ccc;
+}
+@media (prefers-color-scheme: light) {
+  :root {
+    --color: #eee;
+  }
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color: #000;
+  }
+}
+body {
+  color: var(--color);
+}
+```
+
 ## 其他
 
 ### js引擎

docs/usage-frame/工具链/前端开发工具库.md

@@ -22,3 +22,4 @@
 - `screenfull`: 全屏
 - `vue-i18n`: 多语言
 - `mitt`: vue3组件通信
+- `SliderCaptcha`: 滑块验证码

docs/usage-interview/速记手册/vue.md

@@ -91,4 +91,3 @@ this.$bus.$emit('receiveParams', data)
 - css in js：使用js编写css，让css拥有独立的作用域，阻止代码泄露到外部，防止样式冲突
 - 预处理器
 - shadow DOM（比如微前端）
-