✅ 更新降温项目说明

docs/front-end/04-ES6/20-API.md

@@ -0,0 +1,76 @@
+# API
+
+## 全屏API
+
+可以通过浏览器的 `Fullscreen API` 将任意 DOM 元素或页面全屏化
+
+```ts
+<template>
+  <div>
+    <el-button type="primary" @click="toggleFullscreen">
+      {{ isFullscreen ? '退出全屏' : '全屏显示' }}
+    </el-button>
+    <div ref="fullscreenContent" class="fullscreen-content">
+      <el-card>
+        <h2>这里是全屏内容</h2>
+        <p>你可以将这个区域全屏显示。</p>
+      </el-card>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+  setup() {
+    const fullscreenContent = ref(null); // 引用需要全屏的 DOM 元素
+    const isFullscreen = ref(false); // 是否全屏的状态
+
+    const toggleFullscreen = () => {
+      const elem = fullscreenContent.value;
+      if (!isFullscreen.value) {
+        // 进入全屏
+        if (elem.requestFullscreen) {
+          elem.requestFullscreen();
+        } else if (elem.webkitRequestFullscreen) {
+          elem.webkitRequestFullscreen();
+        } else if (elem.mozRequestFullScreen) {
+          elem.mozRequestFullScreen();
+        } else if (elem.msRequestFullscreen) {
+          elem.msRequestFullscreen();
+        }
+      } else {
+        // 退出全屏
+        if (document.exitFullscreen) {
+          document.exitFullscreen();
+        } else if (document.webkitExitFullscreen) {
+          document.webkitExitFullscreen();
+        } else if (document.mozCancelFullScreen) {
+          document.mozCancelFullScreen();
+        } else if (document.msExitFullscreen) {
+          document.msExitFullscreen();
+        }
+      }
+      isFullscreen.value = !isFullscreen.value; // 切换状态
+    };
+
+    return {
+      fullscreenContent,
+      isFullscreen,
+      toggleFullscreen,
+    };
+  },
+};
+</script>
+
+<style>
+.fullscreen-content {
+  border: 1px solid #ebeef5;
+  padding: 20px;
+  margin-top: 20px;
+}
+</style>
+
+```
+

docs/front-end/13-project/05-设备列表页面.md

@@ -0,0 +1,51 @@
+# 设备列表
+
+## 背景图的样式
+
+```css
+background-image: url('@/assets/drawer-bg.jpg'); /* 使用本地图片 */
+background-size: cover; /* 背景填充整个容器 */
+background-position: center; /* 居中显示 */
+background-repeat: no-repeat; /* 不重复 */
+
+::v-deep(.el-drawer__body)  {
+    background-image: url(@/assets/nbBg.svg);
+}
+```
+
+## 正则表达式
+
+```ts
+^8986(11|06)\d{13}$|^898604\d{14}$
+const regex = /^8986(11|06)\d{13}$|^898604\d{14}$/;
+```
+
+`^8986`：匹配必须以 `8986` 开头的字符串。
+
+`(11|06)`：匹配 `8986` 后面的部分，如果是 `11` 或 `06`，则表示后面必须跟 **13 位数字**（总共 19 位）。
+
+- `\d{13}`：表示跟随 13 位数字。
+
+`|`：表示或者的关系。
+
+`898604`：匹配以 `898604` 开头的字符串，后面必须跟 **14 位数字**（总共 20 位）。
+
+- `\d{14}`：表示跟随 14 位数字。
+
+`$`：表示字符串的结尾。
+
+```ts
+const regex = /^8986(11|06)\d{13}$|^898604\d{14}$/;
+
+console.log(regex.test("8986111234567890123"));  // true
+console.log(regex.test("8986061234567890123"));  // true
+console.log(regex.test("89860412345678901234")); // true
+console.log(regex.test("8986121234567890123"));  // false
+```
+
+## 数据库删除表的数据
+
+```ts
+databae Ctrl+y 然后点击提交 ctrl+enter
+```
+