diff --git a/backend b/backend
new file mode 100644
index 00000000..69bf9209
--- /dev/null
+++ b/backend
@@ -0,0 +1,332 @@
+面试题1：Java中实现线程安全有哪些方式？请举例说明。
+考察点： 线程安全的基本概念、同步机制、并发工具类
+
+答案要点：
+
+线程安全定义：多个线程访问共享资源时，不会产生不确定的结果。
+
+实现方式：
+
+使用 synchronized 关键字：修饰方法或代码块，保证同一时刻只有一个线程执行。
+java
+public synchronized void increment() { count++; }
+使用 Lock 接口：如 ReentrantLock，提供更灵活的锁操作（可中断、可超时、公平锁）。
+java
+Lock lock = new ReentrantLock();
+lock.lock();
+try { count++; } finally { lock.unlock(); }
+使用原子类：如 AtomicInteger，基于CAS（无锁）实现线程安全。
+java
+AtomicInteger count = new AtomicInteger();
+count.incrementAndGet();
+使用并发容器：如 ConcurrentHashMap、CopyOnWriteArrayList，内部已经处理好线程安全。
+使用 ThreadLocal：每个线程拥有自己的变量副本，避免共享。
+使用 volatile 关键字：保证可见性，但不保证原子性（适合状态标志位）。
+选择依据：根据并发度、竞争激烈程度、代码复杂度选择合适的方式。
+
+面试题2：什么是死锁？如何避免死锁？
+考察点： 死锁的四个必要条件、预防与避免策略
+
+答案要点：
+
+死锁定义：两个或更多线程互相持有对方所需的资源，导致彼此永远等待。
+
+产生死锁的四个必要条件（缺一不可）：
+
+互斥：资源一次只能被一个线程占用。
+持有并等待：线程持有资源的同时等待其他资源。
+非抢占：线程已获得的资源不能被强行剥夺。
+循环等待：存在线程间的循环等待链。
+避免方法：
+
+破坏“持有并等待”：一次性申请所有资源。
+破坏“非抢占”：如果线程申请不到新资源，则释放已占有的资源（Lock 的 tryLock 支持超时释放）。
+破坏“循环等待”：按固定顺序申请资源（如锁顺序），避免环路。
+使用锁超时：lock.tryLock(timeout) 在规定时间内获取不到就放弃。
+使用并发工具：如 Semaphore、CountDownLatch 等高级工具，减少手动锁的使用。
+🔒 1. 乐观锁、悲观锁，如何实现
+面试题3：乐观锁和悲观锁的区别是什么？在Java中如何实现？
+考察点： 两种锁的思想、适用场景、实现技术
+
+答案要点：
+
+悲观锁：
+
+思想：认为并发冲突的概率很高，所以在操作数据前先加锁，阻塞其他线程。
+
+实现：Java 中的 synchronized、ReentrantLock；数据库中的 select ... for update。
+
+适用场景：写操作频繁、冲突严重的情况。
+
+乐观锁：
+
+思想：认为并发冲突的概率较低，不加锁，在更新时检查数据是否被修改过，如果被修改则重试或失败。
+
+实现：
+
+版本号机制：在数据表中加一个 version 字段，更新时检查 version 是否匹配。
+
+sql
+update table set count = ?, version = version + 1 where id = ? and version = oldVersion;
+CAS（Compare And Swap）：Java 原子类（如 AtomicInteger）底层使用 Unsafe 的 CAS 指令实现。
+
+适用场景：读多写少、冲突概率低的场景，可以提高并发性能。
+
+📦 2. JPA 的 N+1 问题
+面试题4：什么是 JPA 的 N+1 问题？如何解决？
+考察点： ORM 性能问题、懒加载、查询优化
+
+答案要点：
+
+N+1 问题定义：当查询一个实体及其关联集合时，如果先查主实体（1条SQL），然后遍历每个主实体去懒加载关联集合（N条SQL），总共执行了 N+1 条SQL，造成性能低下。
+
+例如：查询所有用户（1条SQL），然后对每个用户查询其订单（N条SQL）。
+
+产生原因：默认的懒加载策略（FetchType.LAZY）在访问关联属性时触发额外查询。
+
+解决方法：
+
+使用 JOIN FETCH：在 JPQL 中显式指定关联抓取。
+sql
+select u from User u join fetch u.orders
+使用 @EntityGraph：通过注解定义抓取计划。
+java
+@EntityGraph(attributePaths = "orders")
+List<User> findAll();
+使用批量抓取（Batch Fetch）：设置 @BatchSize(size = 10)，将 N 次查询合并为 N/size 次。
+使用 DTO 投影：只查询需要的字段，避免加载整个实体和关联。
+二级缓存：如果数据变动少，可以缓存关联对象，减少重复查询。
+注意：FetchType.EAGER 虽然能避免 N+1，但可能导致不必要的关联加载，需权衡使用。
+
+♻️ 3. 幂等
+面试题5：什么是幂等性？在分布式系统中如何保证接口的幂等性？
+考察点： 幂等概念、常见实现方案
+
+答案要点：
+
+幂等性定义：无论调用一次还是多次，对系统的副作用（即状态变化）是相同的。例如 GET 请求天然幂等，DELETE 重复删除同一资源也是幂等的（结果都是删除成功或资源已不存在）。
+
+为什么需要：防止重复提交（如订单创建、支付扣款）导致数据错误。
+
+常见实现方案：
+
+唯一索引：数据库表中对关键字段（如订单号）建唯一索引，重复插入时抛异常。
+去重表：利用数据库的唯一约束，插入前先查去重表，若存在则直接返回结果。
+状态机：业务状态流转只能单向变化，例如订单状态“待支付”只能改为“支付成功”，不能重复支付。
+Token 机制：服务端生成 token 返回给前端，每次请求携带 token，服务端校验 token 是否存在（redis），存在则处理并删除 token，重复请求 token 已失效。
+分布式锁：使用 Redis 或 Zookeeper 实现锁，在业务执行前加锁，执行后释放，防止并发重复处理。
+全局唯一请求 ID：客户端生成 UUID 作为请求 ID，服务端根据请求 ID 进行幂等校验（结合 Redis 存储处理过的 ID）。
+🐘 4. PostgreSQL 索引与优化
+面试题6：PostgreSQL 中有哪些索引类型？如何选择合适的索引？
+考察点： 索引类型、适用场景
+
+答案要点：
+
+B-Tree 索引（默认）：
+
+适用于等值查询和范围查询（=、<、>、BETWEEN、LIKE 'abc%'）。
+
+支持排序和唯一约束。
+
+Hash 索引：
+
+仅适用于等值查询（=），但不常用（PostgreSQL 10 后改进，但仍不如 B-Tree 通用）。
+
+GIN（Generalized Inverted Index）索引：
+
+适用于包含多个值的列，如数组、JSONB、全文检索。
+
+例如：查询数组包含某元素 WHERE arr @> '[1,2]'。
+
+GiST（Generalized Search Tree）索引：
+
+适用于几何类型、范围类型、全文检索（相比 GIN 更灵活但性能稍低）。
+
+支持位置搜索、重叠判断等。
+
+BRIN（Block Range INdex）索引：
+
+适用于超大型表且数据与物理存储顺序相关性高的列（如时间序列）。
+
+只存储每块数据的摘要，占用空间极小，但扫描效率低于 B-Tree。
+
+选择原则：
+
+根据查询条件（等值、范围、全文）、数据类型、数据分布选择。
+
+对于高基数列（如主键），B-Tree 最合适。
+
+对于多值类型，GIN 是首选。
+
+对于只追加的日志表，BRIN 可以大幅节省空间。
+
+面试题7：如何分析 PostgreSQL 中的慢查询？请列出关键步骤和常用命令。
+考察点： SQL 调优、执行计划解读
+
+答案要点：
+
+启用慢查询日志：在 postgresql.conf 中设置：
+
+text
+log_min_duration_statement = 1000  # 记录超过1秒的SQL
+log_connections = on
+log_disconnections = on
+使用 EXPLAIN 分析执行计划：
+
+EXPLAIN (ANALYZE, BUFFERS) your_sql; 实际执行 SQL 并输出真实统计信息。
+
+关键指标解读：
+
+Seq Scan：全表扫描，通常需要优化（除非表很小）。
+
+Index Scan：使用索引扫描，效率较高。
+
+Bitmap Heap Scan：结合多个索引扫描的结果。
+
+cost：启动成本和总成本，估算值。
+
+actual time：实际执行时间（ms）。
+
+rows：预估行数与实际行数（若偏差大，说明统计信息过时，需执行 ANALYZE）。
+
+Buffers：读取的缓存块数，可判断是否大量 I/O。
+
+优化措施：
+
+创建合适的索引。
+
+更新统计信息：ANALYZE table;
+
+调整 work_mem、shared_buffers 等参数。
+
+改写 SQL（避免函数在索引列上，使用 JOIN 代替子查询等）。
+
+🏗️ 5. Java 设计模式
+面试题8：你熟悉哪些设计模式？请举例说明在 Spring 框架中的应用。
+考察点： 设计模式掌握程度、与实际框架结合
+
+答案要点：
+
+单例模式（Singleton）：
+
+Spring 中 Bean 默认作用域为单例，容器中只存在一个实例。
+
+工厂模式（Factory）：
+
+BeanFactory 和 ApplicationContext 负责创建和管理 Bean 实例。
+
+代理模式（Proxy）：
+
+Spring AOP 基于动态代理（JDK 动态代理或 CGLIB）实现切面功能。
+
+模板方法模式（Template Method）：
+
+JdbcTemplate、RestTemplate 封装固定流程，子类或回调实现可变部分。
+
+观察者模式（Observer）：
+
+Spring 事件机制（ApplicationEvent 和 ApplicationListener）。
+
+策略模式（Strategy）：
+
+Resource 接口的不同实现（如 ClassPathResource、FileSystemResource）。
+
+适配器模式（Adapter）：
+
+Spring MVC 中的 HandlerAdapter 适配不同类型的处理器（Controller、HttpRequestHandler 等）。
+
+装饰器模式（Decorator）：
+
+BeanWrapper 对 Bean 实例进行包装，添加属性编辑功能。
+
+🔍 6. 接口与抽象类的区别及使用场景
+面试题9：Java 中接口和抽象类有什么区别？各自在什么场景下使用？
+考察点： 面向对象基础、设计原则
+
+答案要点：
+
+语法区别：
+
+抽象类：用 abstract 修饰，可以有抽象方法和具体方法，可以有成员变量、构造方法。
+
+接口：用 interface 修饰，方法默认 public abstract（Java 8 后可以有 default 和 static 方法），变量默认 public static final。
+
+设计思想区别：
+
+抽象类：表示“是什么”（is-a）关系，定义一类事物的共同属性和行为，可以有状态（成员变量）。
+
+接口：表示“能做什么”（like-a）关系，定义行为规范，强调能力，不能有状态。
+
+使用场景：
+
+抽象类适用场景：
+
+多个类有公共代码，需要代码复用。
+
+需要控制子类的访问权限或提供默认行为。
+
+例如：HttpServlet 抽象类提供 service() 模板方法。
+
+接口适用场景：
+
+需要定义多个不相关类的共同行为（如 Comparable、Runnable）。
+
+需要实现多继承（一个类可以实现多个接口）。
+
+解耦调用方与实现方，定义契约（如 API 接口）。
+
+Java 8 后变化：接口可以有 default 方法，可以在不破坏实现类的情况下新增方法；可以有 static 方法，提供工具方法。但接口仍不能有实例变量。
+
+📋 7. 数据库事务
+面试题10：什么是数据库事务的 ACID 特性？事务隔离级别有哪些？MySQL 默认隔离级别是什么？
+考察点： 事务基本概念、隔离级别、并发问题
+
+答案要点：
+
+ACID 特性：
+
+原子性（Atomicity）：事务是一个不可分割的单元，要么全部成功，要么全部失败回滚。
+
+一致性（Consistency）：事务执行前后，数据库完整性约束没有被破坏（数据状态一致）。
+
+隔离性（Isolation）：多个事务并发执行时，相互隔离，互不干扰。
+
+持久性（Durability）：事务一旦提交，对数据的修改是永久性的。
+
+事务并发问题：
+
+脏读：读到另一个事务未提交的数据。
+不可重复读：同一事务内多次读取同一数据，结果不一致（因其他事务修改并提交）。
+幻读：同一事务内多次查询，返回的记录数不同（因其他事务插入或删除）。
+事务隔离级别（由低到高）：
+
+读未提交（Read Uncommitted）：可能发生脏读、不可重复读、幻读。
+读已提交（Read Committed）：避免脏读，但可能发生不可重复读和幻读（Oracle 默认）。
+可重复读（Repeatable Read）：避免脏读和不可重复读，但可能发生幻读（MySQL InnoDB 默认，通过 MVCC 和间隙锁解决幻读）。
+可串行化（Serializable）：最高级别，所有事务串行执行，无并发问题，但性能最低。
+MySQL InnoDB 默认隔离级别：可重复读（Repeatable Read）。
+
+如何选择：根据业务对一致性的要求与并发性能的权衡，选择合适的隔离级别。
+
+补充题：Spring 中如何使用事务？@Transactional 的常用属性有哪些？
+考察点： Spring 事务管理
+
+答案要点：
+
+声明式事务：使用 @Transactional 注解，可作用于类或方法。
+
+常用属性：
+
+propagation：事务传播行为（REQUIRED、REQUIRES_NEW、NESTED 等）。
+
+isolation：事务隔离级别（DEFAULT、READ_COMMITTED 等）。
+
+timeout：事务超时时间（秒）。
+
+readOnly：是否为只读事务（优化数据库连接，适合查询）。
+
+rollbackFor：指定哪些异常触发回滚（默认运行时异常回滚，受检异常不回滚）。
+
+noRollbackFor：指定哪些异常不回滚。
+
+原理：基于 AOP 动态代理，在方法前后开启、提交或回滚事务
diff --git a/front b/front
new file mode 100644
index 00000000..68f9d1fe
--- /dev/null
+++ b/front
@@ -0,0 +1,722 @@
+ JavaScript 篇
+1. 说说JavaScript中事件循环（Event Loop）的执行顺序？
+考察点： 异步编程、宏任务与微任务、代码执行结果分析。
+答案：
+JavaScript是单线程的，事件循环是其处理异步回调的机制。执行顺序如下：
+
+执行当前调用栈中的同步代码（也就是宏任务，如整个script）。
+
+执行完同步代码后，检查微任务队列，如果有微任务（如 Promise.then、MutationObserver、queueMicrotask），则清空整个微任务队列。
+
+从宏任务队列中取出一个任务执行（如 setTimeout、setInterval、I/O）。
+
+执行完一个宏任务后，再次检查并清空微任务队列。
+
+重复此过程，这就是事件循环。
+
+面试必杀技： 可以顺便举例 console.log(1); setTimeout(() => console.log(2)); Promise.resolve().then(() => console.log(3)); console.log(4); 的输出顺序是 1, 4, 3, 2 。
+
+2. 什么是闭包？在实际项目中有什么用？
+考察点： 作用域链、内存泄漏、模块化思想。
+答案：
+闭包是指一个函数能够访问其外部函数作用域中变量的能力（即使外部函数已经执行完毕）。
+实际应用场景：
+
+防抖/节流函数： 需要保存 timer 定时器 ID，防止被污染。
+
+Vue3 / React Hooks： 为什么 Hooks 能记住上一次的状态？底层原理依赖了闭包。
+
+创建私有变量： 模拟私有方法，实现数据隐藏和封装。
+
+避坑： 闭包使用不当可能导致内存泄漏（因为变量一直被引用，无法被垃圾回收）。解决方法是在不需要使用时，将引用置为 null 。
+
+📘 TypeScript 篇
+3. 说说interface（接口）与type（类型别名）的区别？
+考察点： 类型系统、扩展方式、使用场景。
+答案：
+两者在多数情况下可以互换，但核心区别在于：
+
+扩展方式： interface 使用 extends 继承，type 使用 & 实现交叉类型（联合类型）。
+
+重复定义： interface 支持声明合并（重名时会自动合并属性），而 type 不允许重复定义。
+
+适用范围： type 更灵活，可以定义原始类型（type Name = string）、联合类型（type ID = string | number）和元组。interface 更适合用于定义对象的形状，尤其是在面向对象编程或定义类的契约时。
+
+面试官追问： 如果是写Vue3组件库或库文件，推荐用 interface 还是 type？通常对于对外暴露的API，优先用 interface，因为它更稳定且支持声明合并，方便用户扩展 。
+
+4. 什么是类型守卫？如何自定义？
+考察点： 类型收缩、is 关键字。
+答案：
+类型守卫是一种在运行时检查以确保某个值属于特定类型的行为，它帮助TS在特定代码块中将变量推断为更具体的类型。
+
+内置守卫： typeof、instanceof、in 操作符。
+
+自定义守卫： 通过返回一个 参数名 is 类型 的谓词函数。
+
+typescript
+// 自定义守卫，判断是否是数组
+function isArray(value: any): value is any[] {
+  return Array.isArray(value);
+}
+
+function foo(value: string | string[]) {
+  if (isArray(value)) {
+    value.map(···); // 在此作用域内，TS 能确定 value 是数组类型
+  }
+}
+``` [citation:7]
+
+### 🧩 Element Plus 篇
+
+#### 5. 如何自定义Element Plus的主题色？
+**考察点：** 样式覆盖、SCSS变量、工程化配置。
+**答案：**
+Element Plus 支持灵活的样式定制，主要有两种方式：
+1.  **仅替换颜色（简单项目）：** 在 `vite.config.js` 或 `vue.config.js` 中，通过配置 `scss` 预处理器选项，覆盖 Element Plus 内部定义的 SCSS 变量，例如 `$--color-primary: #409EFF;` 改为自定义的颜色。
+2.  **全量样式覆盖（复杂项目）：** 使用官方提供的主题生成工具，或者创建一个自定义的 SCSS 文件，引入 Element Plus 的 SCSS 变量文件，并在引入前修改所有需要覆盖的变量。
+
+#### 6. 说说你在使用El-Table时，遇到过哪些性能问题？怎么解决的？
+**考察点：** 大数据渲染、虚拟滚动、树形表格。
+**答案：**
+当表格有上千行数据时，直接渲染会导致页面卡顿甚至崩溃，因为浏览器 DOM 节点过多。
+**解决方案：**
+1.  **分页：** 最简单有效的方式，前端分页或后端分页。
+2.  **虚拟滚动：** Element Plus 的 Table 组件支持虚拟滚动（需设置 `v-virtual-scroll` 指令或结合 `el-table-v2` 虚拟化表格组件）。它只渲染可视区域内的数据行，极大减少 DOM 节点数量。
+3.  **按需加载：** 如果是树形表格，使用懒加载模式，展开时再去请求子节点数据。
+
+### 🎨 Tailwind CSS 篇
+
+#### 7. Tailwind CSS相比传统CSS最大的区别是什么？
+**考察点：** 原子化CSS、实用优先、可维护性。
+**答案：**
+最大的区别在于**开发思想**的不同：
+*   **传统CSS（语义化）：** 我们倾向于先起一个类名（如 `.user-card`），然后在 CSS/SCSS 文件里定义这个类有哪些样式。
+*   **Tailwind（原子化/实用优先）：** 它提供大量的工具类（如 `flex`、`pt-4`、`text-center`），直接在 HTML/组件中组合这些类来实现样式，而不用离开模板去写自定义 CSS。
+*   **优势：** 避免了命名焦虑，减少了 CSS 文件体积（通过 PurgeCSS 摇树优化），样式与组件耦合更紧密，修改样式不用在多个文件间跳转 [citation:8]。
+
+#### 8. 在Tailwind中，如何复用一组复杂的样式类？
+**考察点：** `@apply` 指令、组件抽象、代码复用。
+**答案：**
+虽然 Tailwind 鼓励在模板中直接使用类，但当一组样式重复出现时，主要有两种复用方式：
+1.  **组件抽象（推荐）：** 如果是前端框架（如 Vue/React），可以将这组样式封装成一个单独的组件（如 `BaseButton.vue`），然后在各处引用该组件。
+2.  **使用 `@apply` 指令：** 在你的 CSS 文件中，可以通过 `@apply` 将多个工具类组合成一个自定义类。
+    ```css
+    .btn-primary {
+      @apply py-2 px-4 bg-blue-500 text-white rounded-lg hover:bg-blue-700;
+    }
+这种方式适合需要兼容传统思路或在特定情况下简化类名列表 。
+
+💼 综合场景题
+9. 用Element Plus的Table组件展示数据，如何实现某一列根据条件显示不同颜色的Tag？
+考察点： 作用域插槽、动态类绑定、状态切换。
+答案：
+这属于典型的自定义列模板场景。
+
+在 el-table-column 中使用 v-slot 作用域插槽，获取当前行数据 row。
+
+根据 row 中的状态字段（如 status），动态绑定 el-tag 的 type 属性或自定义类名。
+
+vue
+<el-table-column prop="status" label="状态">
+  <template #default="{ row }">
+    <el-tag :type="row.status === '启用' ? 'success' : 'danger'">
+      {{ row.status }}
+    </el-tag>
+  </template>
+</el-table-column>
+10. 在Vue3 + TypeScript项目中，如何为Element Plus的组件实例添加类型声明？
+考察点： 类型导入、InstanceType、组件引用。
+答案：
+在 Vue3 中使用 <script setup> 配合 TS 时，如果要获取组件实例（例如通过 ref 调用 ElInput 的 focus() 方法），需要正确导入组件类型。
+
+首先从 element-plus 导入对应的组件类型。
+
+使用 InstanceType<typeof 组件> 来声明 ref 的类型。
+
+typescript
+import { ref } from 'vue'
+import { ElInput } from 'element-plus' // 导入组件
+
+// 声明一个 ref，其类型是 ElInput 的实例类型
+const inputRef = ref<InstanceType<typeof ElInput>>()
+
+// 使用
+const focusInput = () => {
+  inputRef.value?.focus()
+}
+这样写能有完美的 TS 类型提示和检查。
+
+
+
+
+11. 手写一个防抖函数（debounce）
+解题思路：
+
+核心： 返回一个函数，每次调用时清除之前的定时器，重新设置。
+
+进阶： 支持 immediate 参数（第一次立即执行），处理 this 指向和事件对象。
+
+javascript
+function debounce(func, wait, immediate = false) {
+  let timeout;
+  return function executedFunction(...args) {
+    const context = this;
+    const later = () => {
+      timeout = null;
+      if (!immediate) func.apply(context, args);
+    };
+    const callNow = immediate && !timeout;
+    clearTimeout(timeout);
+    timeout = setTimeout(later, wait);
+    if (callNow) func.apply(context, args);
+  };
+}
+12. 手写深拷贝（处理循环引用和特殊对象）
+解题思路：
+
+使用 WeakMap 存储已拷贝的对象，解决循环引用。
+
+判断对象类型：Object.prototype.toString.call(obj)。
+
+分别处理 Date、RegExp、Map、Set、Array 和普通对象。
+
+javascript
+function deepClone(obj, hash = new WeakMap()) {
+  if (obj === null || typeof obj !== 'object') return obj;
+  if (hash.has(obj)) return hash.get(obj);
+  
+  let clone;
+  const Ctor = obj.constructor;
+  switch (Ctor) {
+    case Date:
+    case RegExp:
+      return new Ctor(obj);
+    case Map:
+      clone = new Map();
+      hash.set(obj, clone);
+      obj.forEach((value, key) => clone.set(deepClone(key, hash), deepClone(value, hash)));
+      return clone;
+    case Set:
+      clone = new Set();
+      hash.set(obj, clone);
+      obj.forEach(value => clone.add(deepClone(value, hash)));
+      return clone;
+    default:
+      clone = new Ctor();
+      hash.set(obj, clone);
+      for (let key in obj) {
+        if (obj.hasOwnProperty(key)) {
+          clone[key] = deepClone(obj[key], hash);
+        }
+      }
+      return clone;
+  }
+}
+13. 实现 DeepPartial<T>
+解题思路： 递归使用映射类型和条件类型。
+
+typescript
+type DeepPartial<T> = T extends object ? {
+  [P in keyof T]?: DeepPartial<T[P]>;
+} : T;
+注意：需要处理函数、数组等情况，可进一步细化。
+
+14. 类型安全的 EventEmitter
+解题思路： 定义一个类型映射，泛型约束事件名与回调参数。
+
+typescript
+type EventMap = {
+  click: [x: number, y: number];
+  change: [newValue: string];
+  // ...
+};
+
+class EventEmitter<T extends Record<string, any[]>> {
+  private listeners: { [K in keyof T]?: ((...args: T[K]) => void)[] } = {};
+
+  on<K extends keyof T>(event: K, callback: (...args: T[K]) => void) {
+    if (!this.listeners[event]) this.listeners[event] = [];
+    this.listeners[event]!.push(callback);
+  }
+
+  emit<K extends keyof T>(event: K, ...args: T[K]) {
+    this.listeners[event]?.forEach(cb => cb(...args));
+  }
+}
+15. Element Plus 可编辑表格
+解题思路： 使用 el-table 的插槽，动态切换显示模式。
+
+为每个单元格绑定一个编辑状态（例如 editIndex 和 editProp）。
+
+在插槽内根据状态显示文本或 el-input，并监听 blur 或 keyup.enter 保存。
+
+vue
+<el-table-column prop="name" label="姓名">
+  <template #default="{ row, $index }">
+    <div v-if="editingIndex === $index && editingProp === 'name'">
+      <el-input v-model="row.name" @blur="stopEdit" @keyup.enter="stopEdit" />
+    </div>
+    <span v-else @click="startEdit($index, 'name')">{{ row.name }}</span>
+  </template>
+</el-table-column>
+16. 分片上传与断点续传（Element Plus Upload）
+解题思路：
+
+分片： 利用 File 对象的 slice 方法将文件切成多个块。
+
+上传： 并发上传分片，每个分片带序号、文件标识等。
+
+断点续传： 本地记录已上传分片（如 localStorage 或 IndexedDB），上传前先向后端查询已上传列表，跳过已上传的分片。
+
+Element Plus 集成： 使用 http-request 自定义上传方法覆盖默认行为。
+
+javascript
+// 自定义上传
+const customUpload = async (options) => {
+  const { file } = options;
+  const chunkSize = 2 * 1024 * 1024; // 2MB
+  const chunks = Math.ceil(file.size / chunkSize);
+  // 循环分片上传...
+};
+17. Tailwind 深色模式
+解题思路： 配置 tailwind.config.js 的 darkMode 为 'class' 或 'media'。
+
+media：根据系统主题自动切换（使用 @media (prefers-color-scheme: dark)）。
+
+class：手动控制，通过给父元素添加 dark 类来切换。
+
+在模板中使用 dark:bg-black 等变体。
+
+手动切换时，用 JS 操作 document.documentElement.classList.toggle('dark')。
+
+18. 响应式汉堡菜单
+解题思路： 使用 Tailwind 的响应式前缀（如 hidden md:flex）。
+
+PC端：md:flex 显示水平菜单。
+
+移动端：默认隐藏菜单，显示汉堡图标；点击图标用 v-show 控制菜单显示。
+
+vue
+<template>
+  <div>
+    <!-- 汉堡图标（移动端） -->
+    <button @click="menuOpen = !menuOpen" class="md:hidden">☰</button>
+    <!-- 导航菜单 -->
+    <ul :class="['md:flex', menuOpen ? 'block' : 'hidden']">
+      <li>首页</li>
+      ...
+    </ul>
+  </div>
+</template>
+19. 通用对话框组件设计
+解题思路： 封装 el-dialog，暴露 v-model 控制显示。
+
+异步关闭： 在确定按钮上绑定异步函数，使用 loading 状态防止重复点击，完成后关闭对话框。
+
+自定义内容： 使用插槽 (#default)。
+
+拖拽： 可以自定义指令或使用 vue-draggable 等库，监听标题栏的鼠标事件修改对话框位置。
+
+vue
+<template>
+  <el-dialog v-model="visible" :before-close="handleClose" draggable>
+    <template #header>...</template>
+    <slot></slot>
+    <template #footer>
+      <slot name="footer" :confirm="confirm" :cancel="cancel">
+        <el-button @click="cancel">取消</el-button>
+        <el-button type="primary" :loading="loading" @click="confirm">确定</el-button>
+      </slot>
+    </template>
+  </el-dialog>
+</template>
+20. 项目组织与架构设计
+解题思路： 给出典型的目录结构和关键配置。
+
+text
+src/
+├── types/               # 全局 TS 类型声明
+│   ├── api.d.ts         # API 接口返回类型
+│   ├── global.d.ts      # 全局变量/类型扩展
+│   └── components.d.ts  # 组件类型（自动生成）
+├── utils/               # 工具函数
+│   ├── request.ts       # axios 封装
+│   └── storage.ts       # 本地存储
+├── styles/              # 样式
+│   ├── main.css         # 入口样式（包含 Tailwind 指令）
+│   └── variables.css    # CSS 变量（主题色等）
+├── composables/         # 可组合逻辑
+├── components/          # 公共组件
+├── views/               # 页面
+└── plugins/             # 插件配置（Element Plus 按需引入、自定义插件）
+关键点：
+
+TS 配置 compilerOptions 开启 strict，路径别名。
+
+Tailwind 配置 content 包含所有模板文件。
+
+Element Plus 按需引入，配合 unplugin-vue-components 自动解析组件和类型。
+
+
+
+21. Vue 3 的生命周期钩子（Options API）
+beforeCreate：实例初始化后，数据观测和事件配置之前。此时 data、computed、methods 都不可用。
+
+created：实例创建完成后，可访问 data、computed、methods，但尚未挂载 DOM，$el 不可用。
+
+beforeMount：挂载开始之前，模板编译完成，但尚未将真实 DOM 替换到 $el。
+
+mounted：实例挂载到 DOM 上，可以访问 $el，可进行 DOM 操作。
+
+beforeUpdate：响应式数据更新时，虚拟 DOM 重新渲染和打补丁之前调用。
+
+updated：数据更改导致虚拟 DOM 重新渲染和打补丁之后调用。注意不要在此修改数据，避免无限循环。
+
+beforeUnmount（Vue 3）/ beforeDestroy（Vue 2）：实例销毁之前调用，此时实例仍然完全可用。
+
+unmounted（Vue 3）/ destroyed（Vue 2）：实例销毁后调用，所有事件监听、子实例都会被移除。
+
+Vue 3 新增调试钩子：
+
+renderTracked：跟踪虚拟 DOM 重新渲染时调用。
+
+renderTriggered：当虚拟 DOM 重新渲染被触发时调用。
+
+22. Composition API 中的生命周期
+使用 onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount、onUnmounted 等。
+
+beforeCreate 和 created 被 setup() 本身替代（因为 setup 执行时机就在这两个钩子之前）。
+
+23. 父子组件生命周期执行顺序（关键考点）
+加载渲染过程：
+父 beforeCreate → 父 created → 父 beforeMount → 子 beforeCreate → 子 created → 子 beforeMount → 子 mounted → 父 mounted
+即：父组件等待所有子组件挂载完成后，自身才完成挂载。
+
+更新过程（父组件更新引起）：
+父 beforeUpdate → 子 beforeUpdate → 子 updated → 父 updated
+父更新前会先触发子更新。
+
+销毁过程：
+父 beforeUnmount → 子 beforeUnmount → 子 unmounted → 父 unmounted
+父销毁前先销毁子组件。
+
+24. 常见面试追问
+在哪个生命周期可以访问 DOM？ mounted 及之后。
+
+在哪个生命周期可以发起异步请求？ 通常 created 或 mounted 都可以，但 created 更早，能减少白屏时间。
+
+为什么不在 beforeCreate 里请求？ 因为此时 data 未初始化，无法将数据赋值给响应式数据。
+
+父子组件 mounted 顺序为什么先子后父？ 因为组件树是深度优先遍历：父组件开始挂载，发现子组件，先完成子组件的挂载，最后才回溯完成父组件的挂载。
+
+
+
+
+布局
+ CSS 布局（Flex / Grid / Tailwind）必备 10 题
+题目	核心考察点
+1. Flex 布局的核心概念是什么？请解释 flex container 和 flex item 的常用属性。	Flex 容器与项目属性、主轴交叉轴
+2. 如何使用 Flex 实现一个完美的垂直水平居中？	居中布局、justify-content、align-items
+3. Flex 布局中 flex: 1 是什么意思？它与 flex-grow、flex-shrink、flex-basis 的关系？	flex 简写属性、伸缩计算
+4. 如何用 Flex 实现一个等分布局（比如每行 3 列，间距相等）？	等高、间距、flex-basis
+5. Grid 布局和 Flex 布局有什么区别？分别在什么场景下使用？	一维 vs 二维布局、适用场景
+6. 如何使用 CSS Grid 实现一个经典的“圣杯布局”（header, footer, 三栏内容）？	Grid 区域、响应式
+7. Tailwind CSS 中如何快速实现 Flex 布局？请列举常用的 Flex 相关类名。	Tailwind 实用类、flex 系列
+8. 在 Tailwind 中如何实现响应式布局？例如在大屏时一行显示 4 列，在小屏时显示 2 列。	响应式断点、栅格系统
+9. 说说你对 BFC（块级格式化上下文）的理解，以及它如何帮助解决布局问题？	清除浮动、防止 margin 塌陷
+10. 实现一个左侧固定宽度，右侧自适应的两栏布局，你能写出几种方法？	多种布局方案（flex、float、grid、calc）
+1. Flex 布局的核心概念是什么？请解释 flex container 和 flex item 的常用属性。
+考察点： Flex 基础、容器与项目属性
+
+答案要点：
+
+核心概念：Flex 布局是一种一维布局模型，可以在主轴和交叉轴上灵活控制子元素的排列、对齐、伸缩。
+
+容器属性（设置在父元素上）：
+
+display: flex / inline-flex：定义 flex 容器。
+
+flex-direction：主轴方向（row 默认、column）。
+
+flex-wrap：是否换行。
+
+justify-content：主轴对齐方式（flex-start、flex-end、center、space-between、space-around、space-evenly）。
+
+align-items：交叉轴对齐方式（stretch 默认、center、flex-start、flex-end、baseline）。
+
+align-content：多根轴线对齐（当换行时有效）。
+
+项目属性（设置在子元素上）：
+
+order：排列顺序。
+
+flex-grow：放大比例（默认 0，不放大）。
+
+flex-shrink：缩小比例（默认 1，空间不足时缩小）。
+
+flex-basis：项目在分配多余空间前的初始大小。
+
+flex：是 grow、shrink、basis 的简写（常用 flex: 1 表示等分剩余空间）。
+
+align-self：覆盖容器的 align-items。
+
+2. 如何使用 Flex 实现一个完美的垂直水平居中？
+考察点： 居中布局
+
+答案要点：
+
+css
+.container {
+  display: flex;
+  justify-content: center; /* 水平居中 */
+  align-items: center;     /* 垂直居中 */
+  height: 100vh;           /* 容器需要有高度 */
+}
+对于单行文本或行内元素，也可以使用 text-align: center 配合 line-height 实现，但 Flex 是最通用且简单的方法。
+
+注意：容器必须设置高度，否则 align-items: center 无法感知垂直居中（高度由内容撑开时，居中效果不明显）。
+
+3. Flex 布局中 flex: 1 是什么意思？它与 flex-grow、flex-shrink、flex-basis 的关系？
+考察点： flex 简写属性、伸缩计算
+
+答案要点：
+
+flex: 1 是以下属性的简写：
+
+flex-grow: 1 （可以放大，占据多余空间）
+
+flex-shrink: 1 （空间不足时可以缩小）
+
+flex-basis: 0% （初始大小为 0，让所有可伸缩项目平均分配剩余空间）
+
+常见值：
+
+flex: 0 1 auto（默认值）：不放大，可缩小，初始大小由内容决定。
+
+flex: 1 1 auto：可放大可缩小，初始大小由内容决定（等价于 flex: auto）。
+
+flex: 1 1 0%：可放大可缩小，初始大小为 0，用于等分剩余空间（即 flex: 1）。
+
+作用：flex: 1 通常用于让多个子元素平分容器的剩余宽度（或高度），常用于等分布局。
+
+4. 如何用 Flex 实现一个等分布局（比如每行 3 列，间距相等）？
+考察点： 等分、间距处理
+
+答案要点：
+
+html
+<div class="container">
+  <div class="item">1</div>
+  <div class="item">2</div>
+  <div class="item">3</div>
+</div>
+css
+.container {
+  display: flex;
+  gap: 20px;        /* 使用 gap 设置间距（推荐） */
+  flex-wrap: wrap;   /* 允许换行 */
+}
+.item {
+  flex: 1 1 0;       /* 或者 flex: 1; 让每个项目等分剩余空间 */
+  min-width: 200px;  /* 可选，防止过小 */
+}
+如果每行固定 3 列且需要等宽，可使用 flex: 1 配合 flex-wrap: wrap，当容器宽度不足以放下 3 列时会换行。
+
+更精确控制每行列数可使用 calc() 结合 flex-basis：flex: 1 1 calc(33.333% - 20px)，但需注意间距计算。
+
+新特性：gap 属性（flex、grid 均支持）可以方便地设置行列间距，无需再通过 margin hack。
+
+5. Grid 布局和 Flex 布局有什么区别？分别在什么场景下使用？
+考察点： 一维 vs 二维布局、适用场景
+
+答案要点：
+
+维度区别：
+
+Flex：一维布局，主要处理一个维度（行或列）的排列。可以在主轴和交叉轴控制，但本质上还是沿着一条线排列。
+
+Grid：二维布局，可以同时处理行和列，将容器划分为网格，项目可以放在任意单元格内。
+
+适用场景：
+
+Flex：适合组件内部的排列（如导航栏、按钮组、卡片列表），内容大小不确定，需要沿一个方向灵活伸缩的场景。
+
+Grid：适合整体页面布局（如大结构、仪表盘、图片墙），需要行列对齐，或者项目需要跨越多个行/列的场景。
+
+结合使用：实际开发中经常两者结合，Grid 负责宏观布局，Flex 负责微观组件。
+
+6. 如何使用 CSS Grid 实现一个经典的“圣杯布局”（header, footer, 三栏内容）？
+考察点： Grid 区域、响应式
+
+答案要点：
+
+html
+<div class="grid">
+  <header>Header</header>
+  <nav>Left</nav>
+  <main>Main</main>
+  <aside>Right</aside>
+  <footer>Footer</footer>
+</div>
+css
+.grid {
+  display: grid;
+  grid-template-areas:
+    "header header header"
+    "nav    main   aside"
+    "footer footer footer";
+  grid-template-columns: 200px 1fr 200px; /* 左右固定，中间自适应 */
+  grid-template-rows: auto 1fr auto;       /* 头部底部根据内容高度，中间占满剩余 */
+  min-height: 100vh;
+}
+header { grid-area: header; }
+nav    { grid-area: nav;    }
+main   { grid-area: main;   }
+aside  { grid-area: aside;  }
+footer { grid-area: footer; }
+使用 grid-template-areas 可以直观地定义布局区域。
+
+响应式：在移动端可以通过媒体查询重新定义 grid-template-areas 和 grid-template-columns，例如让三栏堆叠。
+
+7. Tailwind CSS 中如何快速实现 Flex 布局？请列举常用的 Flex 相关类名。
+考察点： Tailwind 实用类、flex 系列
+
+答案要点：
+
+容器类：
+
+flex：display: flex
+
+inline-flex：display: inline-flex
+
+flex-row / flex-col：主轴方向（行/列）
+
+flex-wrap / flex-nowrap：换行控制
+
+justify-start / justify-center / justify-between / justify-around / justify-evenly：主轴对齐
+
+items-start / items-center / items-end / items-stretch / items-baseline：交叉轴对齐
+
+content-start / content-center / content-between：多行对齐（align-content）
+
+gap-{size}：设置间距（如 gap-4 表示 1rem）
+
+项目类：
+
+flex-initial / flex-1 / flex-auto / flex-none：对应 flex 简写
+
+grow / grow-0：flex-grow
+
+shrink / shrink-0：flex-shrink
+
+basis-{size}：flex-basis（如 basis-64 表示 16rem）
+
+order-{number}：order
+
+self-start / self-center / self-end：align-self
+
+示例：实现水平垂直居中
+
+html
+<div class="flex justify-center items-center h-screen">
+  <div>Centered</div>
+</div>
+8. 在 Tailwind 中如何实现响应式布局？例如在大屏时一行显示 4 列，在小屏时显示 2 列。
+考察点： 响应式断点、栅格系统
+
+答案要点：
+
+Tailwind 使用移动优先的断点前缀：
+
+sm: (640px)
+
+md: (768px)
+
+lg: (1024px)
+
+xl: (1280px)
+
+2xl: (1536px)
+
+实现示例：
+
+html
+<div class="flex flex-wrap -mx-2">
+  <div class="w-full sm:w-1/2 md:w-1/4 px-2">Item 1</div>
+  <div class="w-full sm:w-1/2 md:w-1/4 px-2">Item 2</div>
+  <div class="w-full sm:w-1/2 md:w-1/4 px-2">Item 3</div>
+  <div class="w-full sm:w-1/2 md:w-1/4 px-2">Item 4</div>
+</div>
+解释：
+
+默认（移动端）：w-full 占满一行。
+
+sm: 断点：sm:w-1/2 表示每行 2 列（宽度 50%）。
+
+md: 断点：md:w-1/4 表示每行 4 列（宽度 25%）。
+
+也可使用 Tailwind 的 Grid 工具类：grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4。
+
+9. 说说你对 BFC（块级格式化上下文）的理解，以及它如何帮助解决布局问题？
+考察点： BFC 概念、清除浮动、margin 塌陷
+
+答案要点：
+
+BFC 定义：BFC 是页面上的一个独立渲染区域，内部元素的布局不会影响外部元素。
+
+触发 BFC 的条件：
+
+float 不为 none
+
+position 为 absolute 或 fixed
+
+display 为 inline-block、flex、grid、table-cell 等
+
+overflow 不为 visible
+
+BFC 解决布局问题：
+
+清除浮动：父元素设置 overflow: hidden 或 display: flow-root，触发 BFC 后可以包含浮动子元素，避免高度塌陷。
+
+防止 margin 塌陷：两个相邻块级元素的上下 margin 可能合并，若其中一个触发 BFC，则不会合并。
+
+自适应两栏布局：左侧浮动，右侧触发 BFC 可避免环绕，实现自适应。
+
+10. 实现一个左侧固定宽度，右侧自适应的两栏布局，你能写出几种方法？
+考察点： 多种布局方案
+
+答案要点：
+
+Flex 方法（推荐）：
+
+css
+.container { display: flex; }
+.left { width: 200px; }
+.right { flex: 1; }
+Grid 方法：
+
+css
+.container { display: grid; grid-template-columns: 200px 1fr; }
+浮动 + margin 方法：
+
+css
+.left { float: left; width: 200px; }
+.right { margin-left: 200px; } /* 或 overflow: hidden 触发 BFC */
+绝对定位方法：
+
+css
+.container { position: relative; }
+.left { position: absolute; left: 0; width: 200px; }
+.right { margin-left: 200px; }
+calc 方法（配合浮动）：
+
+css
+.left { float: left; width: 200px; }
+.right { float: left; width: calc(100% - 200px); }
+表格布局（不推荐）：
+
+css
+.container { display: table; width: 100%; }
+.left, .right { display: table-cell; }
+.left { width: 200px; }
+
diff --git a/sql b/sql
new file mode 100644
index 00000000..5e41ae47
--- /dev/null
+++ b/sql
@@ -0,0 +1,40 @@
+查询每个部门的最高工资
+sql
+Copy
+-- 员工表 employees (id, name, salary, department_id)
+-- 部门表 departments (id, name)
+
+SELECT 
+    d.name as department_name,
+    MAX(e.salary) as max_salary
+FROM employees e
+JOIN departments d ON e.department_id = d.id
+GROUP BY d.id, d.name
+ORDER BY max_salary DESC;
+2. 查询工资第N高的员工
+sql
+Copy
+-- 查询工资第二高的员工
+-- 方法1：使用子查询
+SELECT 
+    name,
+    salary
+FROM employees
+WHERE salary = (
+    SELECT DISTINCT salary
+    FROM employees
+    ORDER BY salary DESC
+    LIMIT 1 OFFSET 1
+);
+
+-- 方法2：使用窗口函数
+WITH ranked_employees AS (
+    SELECT 
+        name,
+        salary,
+        DENSE_RANK() OVER (ORDER BY salary DESC) as salary_rank
+    FROM employees
+)
+SELECT name, salary
+FROM ranked_employees
+WHERE salary_rank = 2;
diff --git "a/\345\211\215\347\253\257\350\241\250\346\240\274" "b/\345\211\215\347\253\257\350\241\250\346\240\274"
new file mode 100644
index 00000000..4533304a
--- /dev/null
+++ "b/\345\211\215\347\253\257\350\241\250\346\240\274"
@@ -0,0 +1,40 @@
+https://chat.deepseek.com/share/e8wybb8tckg22vx6v4
+
+按需导入，树摇优化
+https://chat.deepseek.com/share/l1yl3adomerqz22jht 
+
+import Components from 'unplugin-vue-components/vite'
+作用：从 unplugin-vue-components 中导入专为 Vite 设计的插件函数。
+
+用法：在 vite.config.js 中作为插件调用，例如：
+
+js
+plugins: [
+  Components({ /* 配置项 */ })
+]
+效果：插件会自动扫描项目中使用的组件（比如 <el-button>），然后按需导入它们，无需手动写 import 语句。同时它支持 tree‑shaking，未使用的组件不会被打包。
+
+第二行
+js
+import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
+作用：导入一个解析器（resolver），专门用于 Element Plus 组件库。
+
+用途：将 ElementPlusResolver 传给插件的 resolvers 选项，告诉插件如何正确解析 Element Plus 组件的导入路径（例如 ElButton 应该从 element-plus/es/components/button 导入，而不是全量导入）。
+
+示例配置：
+
+js
+Components({
+  resolvers: [ElementPlusResolver()]  // 支持 Element Plus 按需导入
+})
+除了 Element Plus，该插件还提供了其他常见 UI 库的解析器，如 VantResolver、AntDesignVueResolver 等。
+
+整体作用
+这两行代码配合使用，可以实现：
+
+在模板中直接写 <el-button>，无需手动 import
+
+构建时自动只打包实际用到的 Element Plus 组件
+
+配合 tree‑shaking 大幅减小打包体积
+如果没有这个插件，你通常需要手动按需导入每个组件，或者全量导入整个 Element Plus（体积很大）
diff --git "a/\345\211\215\347\253\257\350\277\233\351\230\266" "b/\345\211\215\347\253\257\350\277\233\351\230\266"
new file mode 100644
index 00000000..ece38ebc
--- /dev/null
+++ "b/\345\211\215\347\253\257\350\277\233\351\230\266"
@@ -0,0 +1,413 @@
+https://chat.deepseek.com/share/j8nyst8bdgu21arts8
+Promise/Async async/await 是什么，解决了什么，注意事项是什么？
+async/await 是 Promise 的语法糖，让异步代码写起来像同步代码。错误处理推荐使用 try-catch，但要注意 try-catch 只能捕获 await 所在的错误，未 await 的 Promise 或回调中的错误仍需 .catch。
+同时要避免在循环中滥用 await 导致性能问题，可以用 Promise.all 并发执行。
+
+开始Vue 3项目
+    ↓
+选择构建工具(Vite)
+    ↓
+项目初始化 + 安装核心依赖
+    ├── Vue 3
+    ├── Vue Router (SPA需要)
+    ├── Pinia (状态管理)
+    └── Tailwind CSS  
+    ↓
+配置Tailwind (tailwind.config.js)
+    ↓
+组件开发流程：
+    1. 创建.vue单文件组件
+    2. 使用<script setup>语法糖  https://chat.deepseek.com/share/1vlgnq1ef0srk5ek48
+    3. 定义响应式数据(ref/reactive)
+    4. 计算属性(computed)和侦听器(watch)
+    5. 生命周期钩子(onMounted等)
+    6. 模板编写(结合Tailwind类)
+    7. 样式作用域(scoped或CSS模块)
+    ↓
+路由配置(如需)
+    ↓
+状态管理设计(如需)
+    ↓
+优化与打包
+
+<script setup>语法糖{
+与普通 <script> 的区别：无需 export default，顶层变量自动暴露。
+无法定义 name 选项（可通过额外 <script> 或 vite-plugin-vue 解决）。
+不支持 inheritAttrs、components 等选项，需使用 defineOptions 或普通 <script> 配合。
+
+编译器宏的使用：
+defineProps：声明 props，支持运行时声明和纯类型声明。
+defineEmits：声明可触发的事件。
+defineExpose：暴露组件内部属性/方法给父组件的模板 ref。
+defineOptions（Vue 3.3+）：定义组件名、inheritAttrs 等。
+这些宏无需手动导入，编译时自动处理。
+
+响应式 API 的使用：ref、reactive、computed、watch 等用法与普通 setup() 完全一致。
+注意 ref 在模板中自动解包，但在函数中需 .value。
+组件递归 / 动态组件： 递归组件需要显式指定 name（使用 defineOptions 或第二个 <script>）。
+动态组件 <component :is="Component"> 直接传入组件对象即可。
+
+生命周期钩子：可直接调用 onMounted、onUpdated 等，无需写在 setup() 内部。
+与 TypeScript 的结合
+defineProps<{ msg: string }>() 实现纯类型声明。
+从 vue 导入 PropType 用于复杂类型。
+
+编译时优化原理
+模板中的变量引用被静态提升，减少运行时代理。
+编译后的代码比普通 setup() 更简洁高效。
+}
+
+
+浏览器原生功能：
+1 输入框聚焦了，父元素也该有反应。
+用focus-within
+2 对于没网络了情况，页面应该怎么办？
+浏览器最基础能力windows.addEventListener("offline")
+windows.addEventListener("online")
+3 不重要的任务慢慢跑：
+function showMessage(){
+console.log(" ran when browser was idle");
+}
+if("requstIdleCallback" in window){
+requstIdleCallback(showMessage)
+}
+适合：分析埋点，可以延迟的非关键任务，后台数据整理，琐碎工作。
+
+4 如何让组件根据自身容器尺寸来响应，而不是盯着整个屏幕视口？
+用container query。如：@用container （min-width:400px）
+5 唯一id 用const bytes=new Uint8Array(8);
+crypto.getRandomValues(bytes);
+const uniqueID=Array.from(bytes).map(b=>b.toString(16).padStart(2,"0")).join("");
+6 别一做弹窗就装modal库。
+简单用<dialog>.
+它自带了对话框行为，焦点管理更自然，可访问性更好，背景区域会失活，ESC可关闭，不必靠一堆css，js拼出来。
+
+
+组合式API对比选项API ?
+https://chat.deepseek.com/share/ax5600ycq181ccngtq
+为什么组合式 API 更优？
+对比维度	选项式 API	组合式 API
+逻辑聚合	一个功能的代码（data/methods/mounted）散落在各处	 ;  所有相关代码（状态、方法、生命周期）写在一起，内聚性强
+逻辑复用	需要 mixins，存在命名冲突、隐式依赖等问题	 ; 封装成普通函数（useFetch），在任何组件中直接调用，清晰且无副作用
+TypeScript 支持	this 上下文类型推导困难 ; 	普通变量和函数，类型推断完美
+代码组织	文件变大后难以维护（上千行 options 混乱）	;按功能拆分多个 useXXX 函数，每个函数职责单一
+Tree Shaking	未使用的生命周期/选项无法被摇掉; 	只导入用到的 API（ref、onMounted），打包更小
+
+CSS3 关键特性
+css
+复制
+/* Flex布局 */
+.container {
+  display: flex;
+  justify-content: center;  /* 主轴对齐 */
+  align-items: center;      /* 交叉轴对齐 */
+  flex-wrap: wrap;         /* 换行 */
+}
+
+/* Grid布局 */
+.grid-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 1rem;
+}
+
+/* CSS变量 */
+:root {
+  --primary-color: #3b82f6;
+  --spacing: 1rem;
+}
+.element {
+  color: var(--primary-color);
+  margin: var(--spacing);
+}
+
+ref 和 reactive 有什么区别？
+A：
+ref：
+javascript
+
+const count = ref(0) // 包装基本类型
+count.value = 1      // 访问需要 .value
+// 在模板中自动解包：{{ count }}
+
+reactive：
+const state = reactive({ count: 0 }) // 包装对象
+state.count = 1                      // 直接访问
+// 重新赋值会丢失响应性
+
+Q3：什么时候用 ref，什么时候用 reactive？
+A：
+基本类型、DOM引用 → ref
+复杂对象、嵌套结构 → reactive
+函数返回响应式数据 → 统一用 ref（避免解构丢失响应性）
+
+对比。async  await 比Promise链 更好？
+https://chat.deepseek.com/share/84zehc5e5mu2ucbo5t
+优势对比
+维度	Promise 链 (.then/.catch)	async/await
+可读性	链式调用，多步骤时缩进层级深，逻辑易分散； 	同步写法，线性流程，更接近人类思维
+错误处理	需在链尾统一 .catch()，或每个 .then() 里单独捕获，易遗漏；	标准 try-catch，与同步代码一致，更直观
+调试	断点难以追踪 .then() 内部的异步堆栈；	await 行可直接打断点，调用栈更清晰
+条件/循环	需要递归或 Promise 构造器配合，容易出错；	直接使用 if/while/for，自然流畅
+中间值传递	需层层嵌套或通过外部变量保存； 	普通变量赋值即可
+
+async/await 的缺点（何时 Promise 链更好）
+简单单次异步：.then() 更简洁
+js
+fetch(url).then(res => res.json()).then(data => console.log(data))
+// vs
+const res = await fetch(url)
+const data = await res.json()
+console.log(data)
+并发任务：Promise.all + async/await 仍需组合 Promise 方法
+js
+// 正确做法
+const [user, products] = await Promise.all([getUser(), getProducts()])
+// 错误做法（串行）
+const user = await getUser()
+const products = await getProducts()  // 等待 user 返回后才请求，性能差
+如果开发者不了解并发控制，容易写出低效的串行代码。而 Promise 链天然鼓励用 Promise.all。
+需要在非 async 函数中（如顶级作用域、事件监听）：要么立即执行 async 函数，要么用 .then()。
+
+
+
+JavaScript 高频考点
+
+Q17：let、const、var 的区别？
+
+A：
+
+特性
+
+	
+
+var
+
+	
+
+let
+
+	
+
+const
+
+
+
+
+作用域
+
+	
+
+函数作用域
+
+	
+
+块级作用域
+
+	
+
+块级作用域
+
+
+
+
+变量提升
+
+	
+
+提升并初始化undefined
+
+	
+
+提升但不初始化
+
+	
+
+提升但不初始化
+
+
+
+
+重复声明
+
+	
+
+允许
+
+	
+
+不允许
+
+	
+
+不允许
+
+
+
+
+暂时性死区
+
+	
+
+无
+
+	
+
+有
+
+	
+
+有
+
+
+
+
+推荐程度
+
+	
+
+不推荐
+
+	
+
+推荐
+
+	
+
+最推荐
+
+Q18：箭头函数和普通函数的区别？
+
+A：
+
+this 绑定：箭头函数没有自己的 this，继承外层
+
+arguments 对象：箭头函数没有 arguments
+
+构造函数：箭头函数不能作为构造函数
+
+原型属性：箭头函数没有 prototype
+
+yield 关键字：箭头函数不能用作 Generator
+
+Q19：Event Loop 输出顺序题
+
+javascript
+下载
+复制
+console.log(1)
+
+setTimeout(() => console.log(2), 0)
+
+Promise.resolve().then(() => console.log(3))
+
+console.log(4)
+
+// 输出：1, 4, 3, 2
+// 解析：同步 → 微任务 → 宏任务
+5.3 CSS/Tailwind 高频考点
+
+Q20：Flexbox 和 Grid 如何选择？
+
+A：
+
+Flexbox：一维布局（行或列）
+
+css
+复制
+/* 适合：导航栏、卡片列表、对齐元素 */
+.container {
+  display: flex;
+  justify-content: space-between; /* 主轴 */
+  align-items: center;           /* 交叉轴 */
+}
+
+Grid：二维布局（行和列）
+
+css
+复制
+/* 适合：整体页面布局、复杂网格 */
+.container {
+  display: grid;
+  grid-template-columns: 1fr 2fr 1fr;
+  grid-template-rows: auto 1fr auto;
+  gap: 1rem;
+}
+
+Q21：CSS 选择器优先级计算规则？
+
+A：
+
+优先级（从高到低）：
+
+!important（避免使用）
+
+行内样式 style="color: red"
+
+ID 选择器 #id
+
+类/属性/伪类 .class, [type="text"], :hover
+
+元素/伪元素 div, ::before
+
+通配/继承 *, 继承样式
+
+计算规则：(A, B, C, D)
+
+A: 行内样式个数
+
+B: ID 选择器个数
+
+C: 类/伪类/属性个数
+
+D: 元素/伪元素个数
+
+比较时从A到D依次比较
+
+🎯 六、实战最佳实践总结
+6.1 项目结构规范
+复制
+src/
+├── assets/           # 静态资源
+├── components/       # 公共组件
+│   ├── common/      # 全局通用组件
+│   └── layout/      # 布局组件
+├── composables/      # 组合式函数
+├── stores/          # Pinia状态管理
+├── router/          # 路由配置
+├── views/           # 页面组件
+├── utils/           # 工具函数
+├── styles/          # 全局样式
+├── types/           # TypeScript类型
+└── main.ts          # 入口文件
+6.2 性能优化清单
+
+组件懒加载：路由和组件按需加载
+
+图片优化：WebP格式、懒加载、CDN
+
+代码分割：利用Vite/Rollup的代码分割
+
+Tree-shaking：移除未使用代码
+
+Gzip/Brotli压缩：服务器配置
+
+缓存策略：合理的Cache-Control
+
+第三方库按需引入：如lodash-es
+
+虚拟滚动：长列表优化
+
+6.3 常见错误与解决方案
+
+响应式丢失：使用 toRefs解构reactive对象
+
+内存泄漏：及时清理定时器、事件监听器
+
+重复渲染：合理使用 v-memo、computed缓存
+
+样式冲突：使用CSS Modules或Scoped样式
+
+TypeScript类型错误：正确定义组件Props类型
+
+这个深度解析涵盖了现代前端开发的核心概念、高频考点和最佳实践。掌握这些知识点，不仅能提高开发效率，也能在面试中展现扎实的技术功底。建议结合实际项目，深入理解每个概念的应用场景。
diff --git "a/\347\273\204\344\273\266\344\274\240\345\200\274.png" "b/\347\273\204\344\273\266\344\274\240\345\200\274.png"
new file mode 100644
index 00000000..be38689d
Binary files /dev/null and "b/\347\273\204\344\273\266\344\274\240\345\200\274.png" differ