# Joythink-AI **Repository Path**: 618lf/Joythink-AI ## Basic Information - **Project Name**: Joythink-AI - **Description**: Joythink-AI是一个专注于AI技术研究与应用的开源团队，涵盖机器学习、深度学习等领域，致力于打造高效、智能的解决方案。 - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2025-05-06 - **Last Updated**: 2026-01-29 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # joythink-ai An Electron application with Vue and TypeScript ## Recommended IDE Setup - [VSCode](https://code.visualstudio.com/) + [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) + [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) ## Project Setup ### Install ```bash $ npm install ``` ### Development ```bash $ npm run dev ``` ### Build ```bash # For windows $ npm run build:win # For macOS $ npm run build:mac # For Linux $ npm run build:linux ``` ### Generate Icons 生成基于 JOY 现代几何 Logo 的应用图标和托盘图标： ```bash $ npm run generate-icons ``` 这将生成4个核心图标文件： - **Windows**: `logo.ico`, `tray-icon.ico` - **通用**: `logo.png` (256×256), `tray-icon.png` (256×256) 所有图标都基于 SVG 矢量源文件生成，确保在任何尺寸下都清晰。 ## 技术架构 本项目是一个基于 **Electron** 和 **Vue.js 3** 构建的桌面应用程序。它使用 **TypeScript** 进行开发，以增强代码的健壮性和可维护性。 构建方面，项目采用了 **Vite** 作为底层的构建工具，并通过 **electron-vite** 进行了整合，以优化 Electron 环境下的开发和构建体验。代码的打包和分发则依赖 **Electron Builder**。 为了保证代码质量，项目集成了 **ESLint** (配合 Vue 和 TypeScript 的特定插件) 和 **Prettier**。 此外，项目还使用了 **@electron-toolkit** 提供的一些辅助工具库来简化 Electron preload 脚本的编写和提供常用工具函数，并且集成了 **electron-updater** 来支持应用的自动更新。 核心技术栈版本如下（基于 `package.json`）： - **Electron:** `^35.1.5` - **Vue.js:** `^3.5.13` - **TypeScript:** `^5.8.3` - **Vite:** `^6.2.6` - **electron-vite:** `^3.1.0` - **Electron Builder:** `^25.1.8` ### 项目目录结构 项目的关键目录结构如下，有助于理解代码的组织方式： - **`src/`**: 包含应用程序的核心源代码。 - **`src/main/`**: 存放 Electron 主进程相关的代码。 - `index.ts`: 主进程的入口文件，负责创建浏览器窗口、处理系统事件等。 - `core/`: 包含主进程的核心逻辑模块，例如： - `window.ts`: 窗口管理类，负责主窗口的创建和行为控制。 - `eventbus.ts`: 全局事件总线，用于主进程内部或主进程与渲染进程间的简单事件通信。 - `events.ts`: 定义事件相关的常量或类型。 - `preload/`: 存放 Electron preload 脚本。这些脚本在渲染进程的 Web 上下文中运行，但可以访问 Node.js API，是主进程和渲染进程之间安全通信的桥梁。 - `index.ts`: preload 脚本的入口。 - **`src/renderer/`**: 存放 Electron 渲染进程相关的代码，即应用程序的用户界面 (UI) 部分。 - `src/`: (注意：这里有一个嵌套的 `src` 目录，是 Vue 项目的常见结构) - `main.ts`: Vue 应用的入口文件，负责初始化 Vue 实例、插件、路由等。 - `App.vue`: Vue 应用的根组件。 - `assets/`: 存放静态资源，如全局 CSS/SCSS 文件 (`main.scss`)、图片、字体等。 - `components/`: 存放可复用的 Vue 组件。 - `router/`: (如果使用 Vue Router) 存放路由配置。 - `store/`: (如果使用 Pinia/Vuex) 存放状态管理相关的模块。 - `views/` 或 `pages/`: (根据约定) 存放视图级别的 Vue 组件，通常对应一个页面或一个主要功能区。 - `types/`: 存放前端代码中用到的 TypeScript 类型定义。 - `generated/`: (我们之前讨论过，但现在已移除) 曾用于存放自动生成的代码，如图标数据。 - **`resources/`**: 存放应用程序的外部资源，例如应用图标 (`logo.svg`, `logo.ico`, `logo-*.png`)、配置文件等。这些资源在构建时可能会被打包到应用中。 - **`scripts/`**: 存放辅助开发和构建的脚本，例如： - `generate-icons.js`: 用于从 SVG 源文件生成不同尺寸和格式的应用图标。 - **`electron-vite.config.ts`**: `electron-vite` 的配置文件，用于定制 Electron 环境下的 Vite 构建行为。 - **`tailwind.config.js`**: Tailwind CSS 的配置文件。 - **`tsconfig.json`** (及相关 `tsconfig.node.json`, `tsconfig.web.json`): TypeScript 的编译配置文件，分别用于不同部分的代码。 - **`README.md`**: 项目说明文档（就是当前这个文件）。 - **`package.json`**: 项目的配置文件，定义了依赖、脚本等。 这样的结构有助于将主进程逻辑、渲染进程 UI 和构建脚本清晰地分离开来。 ## 开发规范 在本项目中，我们约定遵循以下规范以保持代码的一致性和可维护性： ### UI 和样式 - **Tailwind CSS**: 项目全面采用 Tailwind CSS 作为主要的 CSS 框架。请优先使用 Tailwind CSS 的原子类进行样式定义，避免编写自定义的全局 CSS，除非在 Tailwind CSS 无法满足特定需求或为了定义基础组件样式时。 - [Tailwind CSS 官方文档](https://tailwindcss.com/docs) - **SCSS 使用**: - 当 Tailwind CSS 不足以满足需求，或需要为特定组件编写更复杂的自定义样式时，推荐在 Vue 单文件组件的 `