PPtink桌面GUI框架 Vue3开发文档
项目概述
本项目使用Vue3 + TypeScript + Vite构建桌面应用的WebView界面,采用现代化的前端技术栈和最佳实践。
技术栈
- Vue 3.5.13
- TypeScript
- Vite 6.2.0
- Vue Router 4.5.0
- Pinia 3.0.1
- SASS
- Lucide Vue Next (图标库)
项目结构
vuecode/
├── src/ # 源代码目录
│ ├── assets/ # 静态资源
│ ├── components/ # 组件目录
│ ├── router/ # 路由配置
│ ├── App.vue # 根组件
│ ├── main.ts # 入口文件
│ └── style.css # 全局样式
├── public/ # 公共资源
├── dist/ # 构建输出目录
├── vite.config.ts # Vite配置
└── package.json # 项目配置
开发环境设置
- 安装依赖
bash
npm install
- 开发服务器
bash
npm run dev
- 构建生产版本
bash
npm run build
核心功能
1. 主题系统
- 支持亮色/暗色主题切换
- 主题状态持久化存储
- 响应式主题切换
typescript
// 主题切换实现
const currentTheme = ref('light');
const toggleTheme = (theme: string) => {
currentTheme.value = theme;
document.documentElement.setAttribute('data-theme', theme);
localStorage.setItem('theme', theme);
};
2. 窗口控制
- 最小化
- 关闭
- 全屏切换
typescript
// 窗口控制函数
function minimize() {
pywebview.api.minimize();
}
function destroy() {
pywebview.api.destroy();
}
function toggle_fullscreen() {
pywebview.api.toggle_fullscreen();
}
3. 导航系统
- 响应式侧边栏
- 路由导航
- 图标集成
vue
<template>
<div class="nav-items">
<router-link class="nav-item" to="/">
<UserIcon class="nav-icon" />
<span>软件主页</span>
</router-link>
<!-- 其他导航项 -->
</div>
</template>
组件开发规范
1. 组件命名
- 使用PascalCase命名组件
- 组件文件名与组件名保持一致
2. 组件结构
vue
<template>
<!-- 模板部分 -->
</template>
<script setup lang="ts">
// 逻辑部分
</script>
<style lang="scss" scoped>
// 样式部分
</style>
3. Props定义
typescript
interface Props {
title: string;
type?: 'primary' | 'secondary';
}
const props = withDefaults(defineProps<Props>(), {
type: 'primary'
});
状态管理
1. Pinia Store
typescript
// stores/app.ts
import { defineStore } from 'pinia';
export const useAppStore = defineStore('app', {
state: () => ({
theme: 'light',
userInfo: null
}),
actions: {
setTheme(theme: string) {
this.theme = theme;
}
}
});
路由配置
1. 路由定义
typescript
// router/index.ts
import { createRouter, createWebHistory } from 'vue-router';
const routes = [
{
path: '/',
component: () => import('../views/Home.vue')
},
{
path: '/chat',
component: () => import('../views/Chat.vue')
}
];
export const router = createRouter({
history: createWebHistory(),
routes
});
样式指南
1. SCSS变量
scss
// 主题变量
$primary-color: #031C25;
$body-color: #16232F;
$text-color: #333;
$border-color: #e8e8e8;
2. 响应式设计
scss
// 响应式断点
$breakpoints: (
'sm': 576px,
'md': 768px,
'lg': 992px,
'xl': 1200px
);
// 响应式混入
@mixin responsive($breakpoint) {
@media (min-width: map-get($breakpoints, $breakpoint)) {
@content;
}
}
与Python交互
1. PyWebView API
typescript
// 检查API可用性
const isPywebviewReady = ref(false);
onMounted(() => {
const checkReady = () => {
if (window.pywebview && window.pywebview.api) {
isPywebviewReady.value = true;
} else {
setTimeout(checkReady, 100);
}
};
checkReady();
});
2. 日志系统
typescript
function log(level: string, message: string) {
pywebview.api.log(level, message);
console.log(level, message);
}
性能优化
1. 组件懒加载
typescript
const AsyncComponent = defineAsyncComponent(() =>
import('./components/Heavy.vue')
);
2. 图片优化
- 使用适当的图片格式
- 实现懒加载
- 使用响应式图片