🔖 v0.6.0

README.md

@@ -2,7 +2,7 @@
  * @Author: fzf404
  * @Date: 2022-06-18 17:15:15
  * @LastEditors: fzf404 [email protected]
- * @LastEditTime: 2022-07-17 18:40:48
+ * @LastEditTime: 2022-07-22 17:36:57
  * @Description: Monit 说明文档
 -->
 
@@ -14,13 +14,11 @@
 
 > 使用 Github Action 自动打包，无需担心安全问题
 
-前往 [Release](https://github.com/fzf404/Monit/releases) 寻找操作系统对应的安装包
-
-[国内镜像](https://hub.fastgit.xyz/fzf404/Monit/releases)
+前往 [Release](https://github.com/fzf404/Monit/releases) / [国内镜像](https://hub.fastgit.xyz/fzf404/Monit/releases) 寻找操作系统对应的安装包
 
 - Windows
 
- > 全功能支持：开机自启、自动更新、权限获取等
+ > 全功能支持
 
 - Linux
 
@@ -36,31 +34,32 @@
 
 ## ✨ 功能
 
-> Vue 指 Composition API，Vue2 指 Options API
-
-| 插件名 | 功能 | 技术 | 状态 |
-| -------- | ----------------- | --------------------------- | ---- |
-| welcome | 使用指引 | Vue Composition API | ✅ |
-| count | 计数器 | Vue Options API | ✅ |
-| github | github 信息监控 | Vue2 + Axios + Grid | ✅ |
-| clock | 时钟翻牌器 | Vue + Scss + Keyframes | ✅ |
-| todo | 待办事项管理 | Vue + Pug + Draggable | ✅ |
-| camera | 摄像头监控 | Vue + Navigator + Canvas | ✅ |
-| live2d | 虚拟角色跟踪 | Vue + MediaPipe + Kalidokit | ⛔️ |
-| music | 网易云音乐播放 | | ⛔️ |
-| bilibili | bilibili 信息监控 | | ⛔️ |
+> VueC 指 Composition API，VueO 指 Options API
+
+| 插件名 | 功能 | 技术 | 状态 |
+| -------- | ----------------- | ---------------------------- | ---- |
+| welcome | 使用指引 | Vue Composition API | ✅ |
+| count | 计数器 | Vue Options API | ✅ |
+| github | github 信息监控 | VueO + Axios + Grid | ✅ |
+| clock | 时钟翻牌器 | VueC + Scss + Keyframes | ✅ |
+| todo | 待办事项管理 | VueC + Pug + Draggable | ✅ |
+| camera | 相机监控 | VueC + Canvas + MediaPipe | ✅ |
+| live2d | 虚拟角色跟踪 | VueC + Kalidokit + MediaPipe | ⛔️ |
+| music | 网易云音乐播放 | | ⛔️ |
+| bilibili | bilibili 信息监控 | | ⛔️ |
+| weather | 天气信息监控 | | ⛔️ |
 
 ## 📝 开发
 
 Monit 是一个开源的桌面小组件，使用 MIT 协议开源，您可以自由使用项目中的代码。
 
 基于 Electron + Vue 开发，渲染进程使用 JS + Vue，主进程使用 JS 调用 Electron API。
 
-如果您了解 Vue，并不了解 Electron，使用本项目即可快速开发出自己的桌面小组件。
+- 如果您了解 Vue，并不了解 Electron，使用本项目即可快速开发出自己的桌面小组件。
 
-如果您初学 Vue，对其他技术一无所知，可以通过本项目继续了解 Vue 及 `package.json` 里包含的所有库的基本使用。
+- 如果您初学 Vue，对其他技术一无所知，可以通过本项目继续了解 Vue 及 `package.json` 里包含的所有库的基本使用。
 
-如果您对 Vue 和 NodeJS 一无所知，请先去了解相关技术后再来查看本项目，在失望的离开之前别忘了留下一个 star。
+- 如果您对 Vue 和 NodeJS 一无所知，请先去了解相关技术后再来查看本项目，在失望的离开之前别忘了留下一个 star。
 
 ### 🍀 代码结构
 
@@ -69,23 +68,33 @@ Monit 是一个开源的桌面小组件，使用 MIT 协议开源，您可以自
 > 文件头部均有功能描述
 
 ```bash
+Monit
 ├── app # 渲染进程
 │ ├── assets # 静态资源
 │ ├── layouts # 布局组件
-│ ├── plugins # 插件
-│ └── utils # 工具类
-├── custom # 自定义工具
-│ ├── ... # 公用工具类
-│ └── plugin.js # 插件配置
+│ ├── themes # 主题
+│ └── plugins # 插件
 ├── core # 主进程
-│ ├── event.js # 事件处理
 │ ├── main.js # 应用入口
 │ ├── tray.js # 托盘进程
 │ └── window.js # 窗口管理
+├── custom # 自定义工具
+│ ├── access.ts # 权限获取
+│ ├── event.ts # 事件处理
+│ ├── ipc.ts # IPC通信
+│ ├── plugin.ts # 插件配置
+│ └── store.ts # Pinia 配置
+├── lib # 库文件
+│ ├── camera.ts # 摄像头控制
+│ ├── hoslistic.ts # MediaPipe 控制
+│ ├── request.ts # 请求封装
+│ ├── statistic.ts # 统计封装
+│ └── storage.ts # 本地存储封装
 ├── public # 静态文件
 ├── .prettier # 代码格式化配置
-├── postcss.config.js # postcss 配置
 ├── tailwind.config.js # tailwindcss 配置
+├── postcss.config.js # postcss 配置
+├── tsconfig.json # typescript 配置
 └── vue.config.js # vue-cli 配置 & electron 打包配置
 ```
 
@@ -94,6 +103,7 @@ Monit 是一个开源的桌面小组件，使用 MIT 协议开源，您可以自
 - Electron 18
  - 跨平台的桌面应用程序构建工具
  - [官方文档](https://www.electronjs.org/zh/docs/latest)
+ - 可跨平台使用多种操作系统 API
 - Vue 3
  - JavaScript 前端框架
  - [官方文档](https://v3.cn.vuejs.org/guide/introduction.html)
@@ -102,6 +112,10 @@ Monit 是一个开源的桌面小组件，使用 MIT 协议开源，您可以自
  - 功能类 CSS 语法糖
  - [官方文档](https://www.tailwindcss.cn/docs)
  - 可选功能，可只使用 css 进行插件开发
+- TypeScript 4
+ - JavaScript 类型系统
+ - [官方文档](https://www.tslang.cn/docs/home.html)
+ - 支持类型定义
 
 ### 🚀 快速开始
 
@@ -117,24 +131,24 @@ Monit 是一个开源的桌面小组件，使用 MIT 协议开源，您可以自
  ```
 2. 安装项目依赖
 
-```bash
- # 假如您使用 npm，请安装 pnpm
- npm i -g pnpm
- # 使用 pnpm 安装依赖
- pnpm i
-```
+ ```bash
+  # 假如您使用 npm，请安装 pnpm
+  npm i -g pnpm
+  # 使用 pnpm 安装依赖
+  pnpm i
+ ```
 
-3. 编写插件页面 `app/plugins/count.vue`
+3. 编写插件页面 `app/plugins/count-new.vue`
 
  ```vue
  <template>
  <main>
  <!-- 窗口控制器 -->
- <Layout v-model:setting="setting" />
+ <Layout />
  <!-- 页面内容 -->
  <article class="h-screen">
  <!-- 设置 -->
- <aside class="setting setting-sm" v-show="setting">
+ <aside class="setting setting-sm" v-show="store.setting">
  <!-- 中心框 -->
  <ul>
  <!-- 数值 -->
@@ -145,7 +159,7 @@ Monit 是一个开源的桌面小组件，使用 MIT 协议开源，您可以自
  type="number"
  oninput="if(value.length > 5) value = value.slice(0, 5)"
  v-model.lazy="count"
- @keyup.enter="this.setting = false"
+ @keyup.enter="store.setting = false"
  />
  </li>
  <!-- 步长 -->
@@ -156,21 +170,21 @@ Monit 是一个开源的桌面小组件，使用 MIT 协议开源，您可以自
  type="number"
  oninput="if(value.length > 3) value = value.slice(0, 3)"
  v-model.lazy="step"
- @keyup.enter="this.setting = false"
+ @keyup.enter="store.setting = false"
  />
  </li>
  <!-- 保存 -->
  <ol>
- <button @click="this.setting = false">OK</button>
+ <button @click="store.setting = false">OK</button>
  </ol>
  </ul>
  </aside>
  <!-- 主体 -->
- <section class="flex-col-center space-y-3">
- <h1 class="text-gray-400">计数器</h1>
+ <section class="h-full flex-col-center space-y-2">
+ <h1 class="text-intro">计数器</h1>
  <p class="text-5xl">{{ count }}</p>
  <!-- 增加 & 减少 -->
- <p class="space-x-4">
+ <p class="space-x-4 pt-2">
  <button class="btn btn-sq bg-red-500 hover:bg-red-600" @click="reduce"><SubSVG class="w-5" /></button>
  <button class="btn btn-sq bg-green-500 hover:bg-green-600" @click="increase">
  <AddSVG class="w-5" />
@@ -182,23 +196,28 @@ Monit 是一个开源的桌面小组件，使用 MIT 协议开源，您可以自
  </template>
 
  <script>
- import { storage } from '../../custom/storage'
- import Layout from '../layouts/custom.vue'
- import AddSVG from '../assets/count/add.svg'
- import SubSVG from '../assets/count/sub.svg'
+ import { useMainStore } from '#/store'
+ import { storage } from '~/storage'
+
+ import AddSVG from '@/assets/count/add.svg'
+ import SubSVG from '@/assets/count/sub.svg'
+ import Layout from '@/layouts/macto.vue'
 
- // 信息存储 & 读取
+ // 初始化 storage
  const { set, get } = storage('count')
 
  export default {
+ setup() {
+ // 初始化 store
+ return { store: useMainStore() }
+ },
  components: {
  Layout,
  AddSVG,
  SubSVG,
  },
  data() {
  return {
- setting: false, // 设置是否开启
  // 读取 count 值
  count: get('count', 0), // 数字
  // 读取 step 值
@@ -226,25 +245,14 @@ Monit 是一个开源的桌面小组件，使用 MIT 协议开源，您可以自
  },
  }
  </script>
-
- <style scoped>
- /* flex 竖向居中 */
- .flex-col-center {
- @apply h-screen flex flex-col justify-center items-center;
- }
- /* flex 横向居中 */
- .flex-row-center {
- @apply flex flex-row flex-nowrap justify-center items-center;
- }
- </style>
  ```
 
-4. 增加插件配置 `common/plugin.js`
+4. 增加插件配置 `coustom/plugin.ts`
 
- ```js
- export const pluginList = [
+ ```ts
+ export const pluginList: pluginList[] = [
  // ...添加如下行
- { name: 'count', size: [1, 1], description: '计数器', debug: true },
+ { name: 'count-new', size: [1, 1], description: '计数器', debug: true },
  ]
  ```
 
@@ -260,16 +268,27 @@ Monit 是一个开源的桌面小组件，使用 MIT 协议开源，您可以自
  # 构建成功后即可在 dist_electron 找到安装包
  ```
 
+### 主题开发
+
+参考：`app/layouts/macto.vue`
+
+...待续
+
 ### 🍻 API 说明
 
-1. 通用布局：`./app/layouts/custom.vue`
-2. Axios 封装：`./custom/request.js`
-3. Store 封装：`./custom/storage.js`
-4. Notice 封装：`./custom/ipc.js`
+1. Layout 布局：`app/layouts/macto.vue`
+2. Pinia 封装：`custom/store.ts`
+3. Notice 封装：`custom/ipc.ts`
+4. Axios 封装：`lib/request.ts`
+5. Storage 封装：`lib/storage.ts`
+ - 配置文件
+ - Mac：`/Users/[user]/Library/Application Support/monit/config.json`
+ - Windows：`C:\Users\[user]\AppData\Roaming\monit\config.json`
+ - Linux：`/home/[user]/.config/monit/config.json`
 
 > 待续...
 
 ### 🔥 提交代码
 
-1. 执行 commit 时会自动进行代码格式化
-2. 提交代码到 beta 分支
+1. 提交代码请到 beta 分支
+2. 执行 commit 操作时会自动进行代码格式化

app/app.vue

@@ -2,8 +2,8 @@
  * @Author: fzf404
  * @Date: 2022-05-25 23:36:33
  * @LastEditors: fzf404 [email protected]
- * @LastEditTime: 2022-06-21 09:49:20
- * @Description: app 组件
+ * @LastEditTime: 2022-07-22 00:50:16
+ * @Description: app 入口
 -->
 
 <template>