vscode go debug settings

in .vscode/launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch Package",
            "type": "go",
            "request": "launch",
            "mode": "auto",
            "program": "${workspaceFolder}/cmd/main.go",
            "cwd": "${workspaceFolder}",  // 添加工作目录

        }
    ]
}

使中文和日文分别应用自己的字体

由于中文和日文有一些字符是相同的，简单将字体加进fontFamily有时会导致两种字体混合出现的情况。

通过在font.css中设置，并且实现LocaleText组件，可以实现中文和日文分别应用自己的字体。

.chinese-text {
  font-family: var(--font-pangolin), var(--font-zcool-kuaile), system-ui, sans-serif;
}

.japanese-text {
  font-family: var(--font-pangolin), var(--font-zen-maru), system-ui, sans-serif;
}

// components/LocaleText.tsx
'use client'
import { useContext } from 'react'
import { LanguageContext } from 'utils/locale'

interface LocaleTextProps {
  children: React.ReactNode
  className?: string
}

export default function LocaleText({ children, className = '' }: LocaleTextProps) {
  const { currentLang } = useContext(LanguageContext)

  const textClass =
    currentLang === 'zh' ? 'chinese-text' : currentLang === 'ja' ? 'japanese-text' : ''

  return <span className={`${textClass} ${className}`}>{children}</span>
}

最后在自动翻译中调用LocaleText组件

// utils/locale.tsx

wsl-crashes

1, vscode server导致, 删除后自动重装即可

rm -rf ~/.vscode-server

2, 手动删除

rm -rf /mnt/c/Users/CamTrik/AppData/Local/Temp/wsl-crashes/*

在wsl中设置定时任务：
运行crontab -e，在文件末尾添加每分钟执行一次上面命令

*/1 * * * * rm -rf /mnt/c/Users/CamTrik/AppData/Local/Temp/wsl-crashes/*

保证cron已经在运行

sudo service cron start

3, 在.wslconfig中设置 (没起作用)

[wsl2]
kernelCommandLine = sysctl.kernel.core_pattern=/dev/null

react-slick问题

react-slick导入后无法Build成功

'Slider' cannot be used as a JSX component.
  Its instance type 'Slider' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'React.ReactNode' is not assignable to type 'import("c:/Users/bello/node_modules/@types/react/ts5.0/index").ReactNode'.
        Type 'PromiseLikeOfReactNode' is not assignable to type 'ReactNode'.ts(2786)

yarn dedupe '@types/react'

Next.js的TOC类型问题

TOC的类型认证报错：

{toc && <TOC toc={toc as TOCItem[]} />}

# error info
Conversion of type 'string' to type 'TOCItem[]' may be a mistake because neither type
sufficiently overlaps with the other. If this was intentional,
convert the expression to 'unknown' first.

将contentlayer.config.ts中toc的类型改为json即可。

VSCode缩进问题

在 VSCode 中，您可以为不同的项目分别设置不同的缩进规则。这可以通过项目级别的设置文件来实现。以下是设置方法：

为每个项目创建一个项目级别的设置文件：
- 在项目根目录下创建一个 .vscode 文件夹
- 在该文件夹中创建一个 settings.json 文件
在 TypeScript 项目的 settings.json 中添加以下配置：

{
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "[typescript]": {
    "editor.tabSize": 2,
    "editor.insertSpaces": true
  },
  "[typescriptreact]": {
    "editor.tabSize": 2,
    "editor.insertSpaces": true
  }
}

在 Go 项目的 settings.json 中添加以下配置：

{
  "editor.tabSize": 4,
  "editor.insertSpaces": true,
  "[go]": {
    "editor.tabSize": 4,
    "editor.insertSpaces": false
  }
}

这样，当您在 TypeScript 项目中创建新文件时，缩进将默认为 2 个空格，而在 Go 项目中创建新文件时，缩进将默认为 4 个空格（实际上 Go 通常使用制表符而非空格，所以我设置了 "editor.insertSpaces": false）。

VSCode 会自动识别并应用项目级别的设置，这样您就可以在不同项目中拥有不同的默认缩进了。

Eslint jsx-a11y问题

81:13  Error: Visible, non-interactive elements with click handlers must have at least one keyboard listener.  jsx-a11y/click-events-have-key-events
81:13  Error: Avoid non-native interactive elements. If using native HTML is not possible, add an appropriate role and support for tabbing, mouse, keyboard, and touch inputs to an interactive content element.  jsx-a11y/no-static-element-interactions

解决方法：在有onClick的元素上添加role和tabIndex，并处理onKeyDown事件如：

<motion.div
  initial={{ opacity: 0 }}
  animate={{ opacity: 1 }}
  exit={{ opacity: 0 }}
  className="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
  onClick={onClose}
  role="button"
  tabIndex={0}
  onKeyDown={(e) => {
    console.log('key down', e.key)
    if (e.key === 'Escape') {
      onClose()
    }
  }}
/>

onKeyDown也可以设置为全局事件

// ESC close modal
useEffect(() => {
  const handleKeyDown = (e: KeyboardEvent) => {
    if (isOpen && e.key === 'Escape') {
      onClose()
    }
  }

  window.addEventListener('keydown', handleKeyDown)

  return () => {
    window.removeEventListener('keydown', handleKeyDown)
  }
}, [isOpen, onClose])

用户登录状态管理方法

1 回调函数

这种模式的核心思想是：子组件不需要知道登录成功后应该如何更新应用状态，它只需要在适当的时机调用父组件提供的回调函数，具体的状态更新逻辑由父组件负责。

// 父组件定义了一个函数
const handleLoginSuccess = (userData) => {
  setUser(userData) // 更新状态
}

// 将这个函数作为prop传递给子组件
;<AuthModal
  onLoginSuccess={handleLoginSuccess}
  // ...其他props
/>

// 在子组件内部，当登录成功时"回调"这个函数
const handleSubmit = async () => {
  // ...登录逻辑
  if (loginSuccessful) {
    // 登录成功时调用父组件提供的回调函数
    onLoginSuccess(userData)
  }
}

2 React Context API

调用React Context API来进行状态管理，在我的case中，直接创建一个context组件：

'use client'

import { User } from '../types/user'
import { createContext, useContext, useState, useEffect, ReactNode } from 'react'

interface AuthContextType {
  user: User | null
  login: (userData: User) => void
  logout: () => void
}

const AuthContext = createContext<AuthContextType | undefined>(undefined)

export function AuthProvider({ children }: { children: ReactNode }) {
  const [user, setUser] = useState<User | null>(null)

  // check if user is logged in
  useEffect(() => {
    const storedUser = localStorage.getItem('user')
    if (storedUser) {
      setUser(JSON.parse(storedUser))
    }
  }, [])

  // login func
  const login = (userData: User) => {
    localStorage.setItem('user', JSON.stringify(userData))
    setUser(userData)
  }

  // logout func
  const logout = () => {
    localStorage.removeItem('user')
    localStorage.removeItem('token')
    setUser(null)
  }

  // context value
  const value = {
    user,
    login,
    logout,
  }

  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>
}

// custom hook
export function useAuth() {
  const context = useContext(AuthContext)
  if (context === undefined) {
    throw new Error('useAuth must be used within a AuthProvider')
  }
  return context
}

需要在layout.tsx外层包裹上AuthProvider:

        <AuthProvider>
          <ThemeProviders>
            <LanguageProvider>
              <SectionContainer>
                <div className="flex h-screen flex-col justify-between font-sans">
                  <SearchProvider searchConfig={siteMetadata.search as SearchConfig}>
                    <ImageOverlayProvider>
                      <Header />
                      <main className="mb-auto mt-20">{children}</main>
                      <ImageViewOverlay />
                      <ChatButton />
                    </ImageOverlayProvider>
                  </SearchProvider>
                  <Footer />
                </div>
              </SectionContainer>
            </LanguageProvider>
          </ThemeProviders>
        </AuthProvider>

这样在其他地方调用的时候，就可以：

const { user, login, logout } = useAuth()
login(userData)
logout()

JAVA版本问题

更改默认版本：

sudo update-alternatives --config java

初始化admin用户对不上的问题

在mysql创建初始化admin用户的时候可以正常登录，但是postgres不行。原因疑似是初始化文件的用户名后面多了一个空格。

postgres常用命令

进入postgres:

psql -U postgres

# 有时这个不行，则用：
sudo -u postgres psql

列出数据库：

\l

列出表：

\dt

创建数据库：

CREATE DATABASE db_name;

删除数据库：

DROP DATABASE db_name;