🔖 v0.6.1

.github/workflows/release.yml

@@ -1,4 +1,4 @@
-name: Monit Release
+name: release
 
 on:
  push:

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022 你们的小f
+Copyright (c) 2022 fzf404
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

app/components/setting.vue

@@ -0,0 +1,110 @@
+<!--
+ * @Author: fzf404
+ * @Date: 2022-07-23 21:02:45
+ * @LastEditors: fzf404 [email protected]
+ * @LastEditTime: 2022-08-13 18:28:37
+ * @Description: setting 组件
+-->
+<template>
+ <!-- 设置模态框 -->
+ <aside class="setting" :class="{ 'setting-sm': size === 'small' }" v-show="store.setting.show">
+ <!-- 设置框 -->
+ <ul>
+ <!-- 设置列表 -->
+ <li v-for="item in setting">
+ <!-- 设置标签 -->
+ <label :for="item.id">{{ item.label }}</label>
+ <!-- 选择框 -->
+ <select v-if="item.type === 'select'" v-model.lazy="config[item.id]">
+ <option v-for="option in item.options" :value="option.value">
+ {{ option.label }}
+ </option>
+ </select>
+ <!-- 输入框 -->
+ <input
+ v-else
+ :id="item.id"
+ :type="item.type"
+ v-model.lazy="config[item.id]"
+ @keyup.enter="onSave"
+ @input="
+ (event) => {
+ // number 最大长度
+ if (item.type === 'number' && (event.target as HTMLInputElement).value.length > item.options.len)
+ (event.target as HTMLInputElement).value = (event.target as HTMLInputElement).value.slice(0, item.options.len)
+ }
+ "
+ />
+ </li>
+ <!-- 保存 -->
+ <ol>
+ <button @click="onSave">保存</button>
+ </ol>
+ </ul>
+ </aside>
+</template>
+
+<script setup lang="ts">
+import { onMounted, watchEffect } from 'vue'
+
+import { useStore } from '@/store'
+import { storage } from '~/storage'
+
+// 初始化 props
+interface Props {
+ // 尺寸
+ size?: 'small'
+ // 配置
+ config: {
+ [key: string]: any
+ }
+ // 信息
+ setting: (
+ | {
+ id: string
+ label: string
+ type: 'text' | 'checkbox'
+ }
+ | {
+ id: string
+ label: string
+ type: 'number'
+ options: { len: number }
+ }
+ | {
+ id: string
+ label: string
+ type: 'select'
+ options: { label: string; value: string }[]
+ }
+ )[]
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits(['save'])
+
+// 初始化 store
+const store = useStore()
+// 初始化 storage
+const { set } = storage()
+
+// 初始化设置
+onMounted(() => {
+ store.setting.has = true
+})
+
+// 保存数据
+watchEffect(() => {
+ for (const key in props.config) {
+ set(key, props.config[key])
+ }
+})
+
+// 保存
+const onSave = () => {
+ // 隐藏设置框
+ store.setting.show = false
+ // 发送保存事件
+ emit('save')
+}
+</script>

app/layouts/layout.vue

@@ -0,0 +1,69 @@
+<!--
+ * @Author: fzf404
+ * @Date: 2022-08-12 10:39:12
+ * @LastEditors: fzf404 [email protected]
+ * @LastEditTime: 2022-08-13 15:39:12
+ * @Description: 布局切换
+-->
+<template>
+ <component :is="layout[state.layout]" :layouts="layouts" :themes="themes" :state="state"></component>
+</template>
+
+<script setup>
+import { onMounted, reactive, watch } from 'vue'
+
+import { storage } from '~/storage'
+
+import maco from './maco.vue'
+import wine from './wine.vue'
+
+// 引入主题样式
+import '@/themes/basic.scss'
+
+// 初始化 storage
+const { get, set } = storage()
+
+// 布局
+const layout = {
+ maco,
+ wine,
+}
+// 布局列表
+const layouts = ['maco', 'wine']
+// 主题列表
+const themes = ['dark', 'light']
+
+const state = reactive({
+ top: get('top', false), // 置顶
+ layout: get('layout', 'maco'), // 布局
+ theme: get('theme', 'dark'), // 主题
+})
+
+onMounted(() => {
+ document.body.classList = [state.theme]
+})
+
+// 监听状态变化
+watch(
+ () => state.top,
+ (val) => {
+ set('top', val)
+ sendEvent('window-top', state.top)
+ }
+)
+
+watch(
+ () => state.layout,
+ (val) => {
+ set('layout', val)
+ }
+)
+
+watch(
+ () => state.theme,
+ (val) => {
+ set('theme', val)
+ document.body.classList = [val]
+ }
+)
+</script>

app/layouts/maco.vue

@@ -0,0 +1,63 @@
+<!--
+ * @Author: fzf404
+ * @Date: 2022-05-23 17:03:20
+ * @LastEditors: fzf404 [email protected]
+ * @LastEditTime: 2022-08-13 18:33:46
+ * @Description: maco 布局
+-->
+<template>
+ <nav>
+ <!-- 窗口控制器 -->
+ <ul class="absolute left-2 z-40 space-x-1">
+ <!-- 关闭 -->
+ <CloseSVG class="w-3.5 p-0.5 btn-svg rounded-full bg-red-400 text-primary" @click="sendEvent('window-close')" />
+ <!-- 最小化 -->
+ <MiniSVG class="w-3.5 p-0.5 btn-svg rounded-full bg-yellow-300 text-primary" @click="sendEvent('window-mini')" />
+ <!-- 置顶 -->
+ <UpSVG
+ class="w-3.5 p-0.5 btn-svg rounded-full bg-green-400 text-primary"
+ :class="{ 'rotate-180': state.top }"
+ @click="state.top = !state.top"
+ />
+ </ul>
+ <!-- 状态控制器 -->
+ <ul class="absolute right-2 z-40 space-x-1">
+ <!-- 断网提示 -->
+ <WifiSVG v-show="!store.network" class="w-4 btn-svg text-red-400" />
+ <!-- 布局 -->
+ <MacoSVG class="w-4 btn-svg text-cyan-500" @click="state.layout = layouts[1]" />
+ <!-- 主题 -->
+ <LightSVG v-if="state.theme === themes[0]" class="w-4 btn-svg text-orange-400" @click="state.theme = themes[1]" />
+ <DarkSVG
+ v-else="state.theme === themes[1]"
+ class="w-4 btn-svg text-indigo-300"
+ @click="state.theme = themes[0]"
+ />
+ <!-- 设置 -->
+ <SettingSVG v-show="store.setting.has" class="w-4 btn-svg text-blue-400" @click="store.setting.show = true" />
+ </ul>
+ </nav>
+</template>
+
+<script setup>
+import { sendEvent } from '#/ipc'
+import { useStore } from '@/store'
+
+import CloseSVG from '@/assets/layout/close.svg'
+import MiniSVG from '@/assets/layout/mini.svg'
+import UpSVG from '@/assets/layout/up.svg'
+
+import MacoSVG from '@/assets/layout/maco.svg'
+
+import DarkSVG from '@/assets/layout/dark.svg'
+import LightSVG from '@/assets/layout/light.svg'
+
+import SettingSVG from '@/assets/layout/setting.svg'
+import WifiSVG from '@/assets/layout/wifi.svg'
+
+// 初始化 props
+const props = defineProps(['layouts', 'themes', 'state'])
+
+// 初始化 store
+const store = useStore()
+</script>