// main.js
const { app, BrowserWindow, ipcMain } = require('electron')
const path = require('path')

function createWindow() {
  const win = new BrowserWindow({
    width: 1000,
    height: 700,
    webPreferences: {
      // 关键安全配置：开启上下文隔离，渲染进程无法直接访问 Node
      contextIsolation: true,
      // 使用 preload 脚本做桥接
      preload: path.join(__dirname, 'preload.js')
    }
  })

  win.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()

  // macOS：点击 Dock 图标时重建窗口
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// 除 macOS 外，全部窗口关闭时退出
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

// 处理渲染进程发来的 read-file 请求
ipcMain.handle('read-file', async (event, filePath) => {
  const fs = require('fs/promises')
  try {
    const content = await fs.readFile(filePath, 'utf-8')
    return { ok: true, content }
  } catch (e) {
    return { ok: false, message: e.message }
  }
})

// preload.js
const { contextBridge, ipcRenderer } = require('electron')

// 只暴露白名单方法，不直接暴露 ipcRenderer 本身
contextBridge.exposeInMainWorld('api', {
  readFile: (filePath) => ipcRenderer.invoke('read-file', filePath)
})

// 主进程
function sendProgress(win, percent) {
  win.webContents.send('progress', percent)
}

// 渲染进程：preload 里加
// onProgress: (cb) => ipcRenderer.on('progress', (_e, p) => cb(p))

webPreferences: {
  contextIsolation: true,   // 必须开启，隔离 Node 环境
  nodeIntegration: false,   // 禁止渲染进程直接使用 Node
  preload: path.join(__dirname, 'preload.js'),
  sandbox: true             // 开启沙箱（Electron 20+ 默认）
}

// useFetch.js
import { useState, useEffect, useCallback } from 'react'

export function useFetch(url) {
  const [data, setData] = useState(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(null)

  useEffect(() => {
    let ignore = false // 防止竞态：组件卸载或 url 变化后不更新旧结果

    async function load() {
      setLoading(true)
      setError(null)
      try {
        const res = await fetch(url)
        if (!res.ok) throw new Error(`HTTP ${res.status}`)
        const json = await res.json()
        if (!ignore) setData(json)
      } catch (e) {
        if (!ignore) setError(e)
      } finally {
        if (!ignore) setLoading(false)
      }
    }

    load()
    return () => {
      ignore = true // 清理函数：下一次 effect 运行前标记旧请求失效
    }
  }, [url])

  const refresh = useCallback(() => {
    // 触发重新请求：改一个内部 state 即可
    setVersion((v) => v + 1)
  }, [])
  // 实际使用时可把 version 也放进依赖里

  return { data, loading, error, refresh }
}

// useDebounce.js
import { useState, useEffect } from 'react'

export function useDebounce(value, delay = 300) {
  const [debounced, setDebounced] = useState(value)

  useEffect(() => {
    const timer = setTimeout(() => {
      setDebounced(value)
    }, delay)

    // 每次 value 变化都会清除上一个定时器，实现防抖
    return () => clearTimeout(timer)
  }, [value, delay])

  return debounced
}

// useLocalStorage.js
import { useState, useEffect } from 'react'

export function useLocalStorage(key, initialValue) {
  // 惰性初始化：第一次渲染时从 localStorage 读取
  const [value, setValue] = useState(() => {
    try {
      const stored = window.localStorage.getItem(key)
      return stored !== null ? JSON.parse(stored) : initialValue
    } catch {
      return initialValue
    }
  })

  // 值变化时写回，并监听其他标签页的修改
  useEffect(() => {
    try {
      window.localStorage.setItem(key, JSON.stringify(value))
    } catch {
      // 隐私模式或存储满时静默失败
    }
  }, [key, value])

  return [value, setValue]
}

// useSearchUsers.js —— 把防抖 + 请求 + 状态串成一条完整的搜索链路
import { useState, useEffect } from 'react'
import { useDebounce } from './useDebounce'

export function useSearchUsers() {
  const [keyword, setKeyword] = useState('')
  const debouncedKeyword = useDebounce(keyword, 400)
  const [users, setUsers] = useState([])
  const [loading, setLoading] = useState(false)

  useEffect(() => {
    if (!debouncedKeyword) {
      setUsers([])
      return
    }
    let ignore = false
    setLoading(true)
    fetch(`/api/users?q=${debouncedKeyword}`)
      .then((r) => r.json())
      .then((data) => {
        if (!ignore) setUsers(data)
      })
      .finally(() => {
        if (!ignore) setLoading(false)
      })
    return () => {
      ignore = true
    }
  }, [debouncedKeyword])

  return { keyword, setKeyword, users, loading }
}

import { ref, reactive } from 'vue'

// ref 用于基本类型，也可以包对象（访问时自动解包）
const name = ref('张三')
console.log(name.value) // 张三

// reactive 用于对象，成员访问无需 .value
const user = reactive({
  name: '张三',
  age: 25
})
user.age++ // 直接改，无需 .value

// 错误写法：解构后 age 不再是响应式的
const { age } = user

// 正确写法：用 toRefs 解构
import { toRefs } from 'vue'
const { age } = toRefs(user)

import { ref, computed } from 'vue'

const price = ref(100)
const quantity = ref(2)

const total = computed(() => price.value * quantity.value)

// 计算属性默认是只读的，需要可写时传入 get/set
const totalEditable = computed({
  get: () => price.value * quantity.value,
  set: (val) => {
    price.value = val / quantity.value
  }
})

import { ref, watch, watchEffect } from 'vue'

const keyword = ref('')

// 侦听单个数据源
watch(keyword, (newVal, oldVal) => {
  console.log('搜索词变化：', oldVal, '->', newVal)
})

// 侦听多个数据源
watch([keyword, page], ([newK, newP], [oldK, oldP]) => {
  // ...
})

// 侦听对象中的某个属性，需要传 getter
watch(
  () => user.age,
  (val) => {
    console.log('年龄变为', val)
  }
)

// watchEffect：自动追踪依赖，依赖变化即执行
watchEffect(() => {
  console.log('当前搜索词：', keyword.value)
})

import { onMounted, onUpdated, onUnmounted } from 'vue'

onMounted(() => {
  // DOM 已挂载，适合发请求、初始化第三方库
})

onUpdated(() => {
  // 组件更新后
})

onUnmounted(() => {
  // 组件卸载，清理定时器、取消订阅
})

// useCounter.js
import { ref, computed } from 'vue'

export function useCounter(initialValue = 0) {
  const count = ref(initialValue)
  const double = computed(() => count.value * 2)

  function increment() {
    count.value++
  }

  function reset() {
    count.value = initialValue
  }

  return { count, double, increment, reset }
}

// useRequest.js
import { ref } from 'vue'

export function useRequest(fetcher) {
  const data = ref(null)
  const loading = ref(false)
  const error = ref(null)

  async function run(...args) {
    loading.value = true
    error.value = null
    try {
      data.value = await fetcher(...args)
    } catch (e) {
      error.value = e
    } finally {
      loading.value = false
    }
  }

  return { data, loading, error, run }
}

const Redis = require('ioredis')

const redis = new Redis({
  host: '127.0.0.1',
  port: 6379,
  password: process.env.REDIS_PASSWORD,
  // 连接池 + 重试
  maxRetriesPerRequest: 3,
  retryStrategy: (times) => Math.min(times * 200, 2000)
})

// 基本的缓存读写
async function getUser(id) {
  const cached = await redis.get(`user:${id}`)
  if (cached) return JSON.parse(cached)   // 缓存命中

  const user = await db.query('SELECT * FROM users WHERE id = ?', [id])
  await redis.set(`user:${id}`, JSON.stringify(user), 'EX', 600)  // 10 分钟
  return user
}

const cached = await redis.get(`user:${id}`)
if (cached !== null) {
  // 缓存了空值（'null'）也直接返回，不查库
  return cached === 'NULL' ? null : JSON.parse(cached)
}
const user = await db.query(...)
// 查不到也缓存空值，短过期防止穿透
await redis.set(`user:${id}`, user ? JSON.stringify(user) : 'NULL', 'EX', 300)

async function getHotData() {
  const cached = await redis.get('hot:data')
  if (cached) return JSON.parse(cached)

  // 抢锁：拿不到锁说明别人正在重建，短暂等待后重试
  const lock = await redis.set('lock:hot:data', '1', 'EX', 10, 'NX')
  if (lock) {
    try {
      const data = await db.query(...)
      await redis.set('hot:data', JSON.stringify(data), 'EX', 600)
      return data
    } finally {
      await redis.del('lock:hot:data')
    }
  } else {
    await sleep(50)
    return getHotData()   // 重试读缓存
  }
}

// 过期时间 = 基准 + 随机 0~60 秒
await redis.set(key, value, 'EX', 600 + Math.floor(Math.random() * 60))

// 更新
await db.query('UPDATE users SET name=? WHERE id=?', [name, id])
await redis.del(`user:${id}`)   // 删缓存，下次读取时重建

// 路由懒加载（Vue）
const Admin = () => import('./views/Admin.vue')
// 配合 webpackChunkName 控制分包命名

// 反模式：循环里反复读写布局属性，强制同步重排
for (let i = 0; i < items.length; i++) {
  el.style.left = items[i].x + 'px'   // 每行都触发重排
}

// 好做法：用 transform 做动画（GPU 合成，不触发重排）
el.style.transform = `translateX(${items[i].x}px)`

// 简单思路（社区库 vue-virtual-scroller / react-window 同理）
// 1. 计算可视区起始/结束 index
// 2. 只渲染 [start, end] 之间的项
// 3. 外层容器 padding 撑出总高度，保持滚动条正确

// React：memo 防止无关 props 变化触发渲染
const Item = React.memo(function Item({ data }) {
  return <div>{data.name}</div>
})

// Vue：computed 缓存计算结果，避免模板里反复计算
const filteredList = computed(() =>
  list.value.filter((i) => i.visible)
)

// 防抖：停止触发后才执行（搜索输入）
function debounce(fn, delay = 300) {
  let timer
  return (...args) => {
    clearTimeout(timer)
    timer = setTimeout(() => fn(...args), delay)
  }
}

// 节流：固定频率执行（滚动、resize）
function throttle(fn, interval = 100) {
  let last = 0
  return (...args) => {
    const now = Date.now()
    if (now - last >= interval) {
      last = now
      fn(...args)
    }
  }
}

// 反模式：1000 个 li 每个绑一个监听
document.querySelectorAll('.item').forEach((el) =>
  el.addEventListener('click', handler)
)

// 好做法：一个监听挂到父元素
list.addEventListener('click', (e) => {
  const item = e.target.closest('.item')
  if (item) handler(item)
})

// 主线程不卡
const worker = new Worker('compute.js')
worker.postMessage(bigData)
worker.onmessage = (e) => {
  // 拿到计算结果
}