至今开发项目遇到的问题收集

1. 项目中遇到问题的记录

在用NextUI开发Autovideo遇到一些问题，记录如下：

1.1 项目中使用NextUI的Button组件，遇到router会出现点击动画播放不完整的情况

解决办法:你可以使用 useNavigate 钩子来替代 Link，这样可以保持 Button 的点击动画，同时实现路由跳转

    // 原代码
<Link to="/Recommend">
    <Button
        className="w-44 h-11 justify-start text-regal-blue"
        color="primary"
        variant="light"
        startContent={<IconHome style={{ color: '#66aaf9' }} />}
    >
    推荐
    </Button>
</Link>

// 改进后代码  去掉 Link组件，使用 useNavigate 钩子
import { useNavigate } from 'react-router-dom'

const navigate = useNavigate();
<Button
    className="w-96 h-11 justify-start text-regal-blue"
    color="primary"
    variant="light"
    startContent={<IconHome style={{ color: '#66aaf9' }} />}
    onClick={() => navigate('/Recommend')} // 在点击时执行路由跳转
    >
    推荐
</Button>

1.2 Tauri2开发中开启多窗口

在Vue3+Tauri开发遇到多窗口只支持静态页面,解决办法：

const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        name: 'LoginIndex',
        component: () => import('../components/Login/LoginIndex.vue')
    },
    {
        path: '/index',
        name: 'Index',
        component: () => import('../components/Main/Main.vue')
    }
]

const router = createRouter({
    history: createWebHashHistory(),
    routes
})

export default router;

使用vue-router中的hash模式,并且在创建WebviewWindow实例中的url改为如下即可解决

// 创建主窗口
const createMainWindow = () => {
  const webView = new WebviewWindow('rs12306-main', {
    url: '#/index',
    title: '主界面',
    width: 800,
    height: 600,
    decorations: false,
    x: 100,
    y: 100,
  });

  webView.once('tauri://created', () => {
    console.log('主窗口创建成功');
  });

  webView.once('tauri://error', (error) => {
    console.log('主窗口创建失败', error);
  });
};