v2.0.0

src/renderer/plugins/Dialog/Dialog.vue

@@ -1,26 +1,42 @@
 <template>
-<Modal :show="visible" @close="handleCancel" @after-leave="afterLeave" :closeBtn="false" :teleport="teleport">
-  <main class="scroll" :class="[$style.main, { 'select': selection }]">{{message}}</main>
-  <footer :class="$style.footer">
-    <Btn :class="$style.btn" v-if="showCancel" @click="handleCancel">{{cancelBtnText}}</Btn>
-    <Btn :class="$style.btn" @click="handleComfirm">{{confirmBtnText}}</Btn>
-  </footer>
-</Modal>
+  <Modal :show="visible" :close-btn="false" :teleport="teleport" @close="handleCancel" @after-leave="afterLeave">
+    <main class="scroll" :class="[$style.main, { 'select': selection }]">{{ message }}</main>
+    <footer :class="$style.footer">
+      <Btn v-if="showCancel" :class="$style.btn" @click="handleCancel">{{ cancelBtnText }}</Btn>
+      <Btn :class="$style.btn" @click="handleComfirm">{{ confirmBtnText }}</Btn>
+    </footer>
+  </Modal>
 </template>
 
 <script>
 import Modal from '@renderer/components/material/Modal'
 import Btn from '@renderer/components/base/Btn'
+import { useI18n } from '@renderer/plugins/i18n'
+import { computed } from '@common/utils/vueTools'
 export default {
+  components: {
+    Modal,
+    Btn,
+  },
   props: {
     afterLeave: {
       type: Function,
       default: () => {},
     },
   },
-  components: {
-    Modal,
-    Btn,
+  setup() {
+    const t = useI18n()
+
+    const defaultBtnTexts = computed(() => {
+      return {
+        confirm: t('confirm_button_text'),
+        cancel: t('cancel_button_text'),
+      }
+    })
+
+    return {
+      defaultBtnTexts,
+    }
   },
   data() {
     return {
@@ -35,10 +51,10 @@ export default {
   },
   computed: {
     cancelBtnText() {
-      return this.cancelButtonText || this.$t('cancel_button_text')
+      return this.cancelButtonText || this.defaultBtnTexts.cancel
     },
     confirmBtnText() {
-      return this.confirmButtonText || this.$t('confirm_button_text')
+      return this.confirmButtonText || this.defaultBtnTexts.confirm
     },
   },
   beforeUnmount() {

src/renderer/plugins/Dialog/index.js

@@ -1,6 +1,4 @@
 import Dialog from './Dialog'
-import i18n from '../i18n'
-import store from '@renderer/store'
 import { createApp } from 'vue'
 
 
@@ -22,7 +20,7 @@ export const dialog = function(options) {
         app?.unmount()
         app = null
       },
-    }).use(i18n).use(store)
+    })
 
     let instance = app.mount(document.createElement('div'))
 

src/renderer/plugins/Tips/Tips.vue

@@ -1,6 +1,11 @@
 <template>
   <transition name="tips-fade" @after-leave="afterLeave">
-    <div v-show="visible" :style="{ left: position.left + 'px' , top: position.top + 'px', transform: transform }" ref="dom_tips" :class="$style.tips" role="presentation">{{message}}</div>
+    <div
+      v-show="visible" ref="dom_tips" :style="{ left: position.left + 'px' , top: position.top + 'px', transform: transform }"
+      :class="$style.tips" role="presentation"
+    >
+      {{ message }}
+    </div>
   </transition>
 </template>
 
@@ -69,12 +74,12 @@ export default {
   line-height: 1.2;
   word-wrap: break-word;
   padding: 4px 5px;
-  z-index: 999;
+  z-index: 10001;
   font-size: 12px;
   max-width: 80%;
-  color: @color-theme_2-font;
+  color: var(--color-font);
   border-radius: 3px;
-  background: @color-green-theme_2-background_1;
+  background: var(--color-content-background);
   overflow: hidden;
   pointer-events: none;
   // text-align: justify;
@@ -88,14 +93,5 @@ export default {
   opacity: 0;
 }
 
-each(@themes, {
-  :global(#root.@{value}) {
-    ~.tips {
-      color: ~'@{color-@{value}-theme_2-font}';
-      background: ~'@{color-@{value}-theme_2-background_1}';
-    }
-  }
-})
-
 
 </style>

src/renderer/plugins/Tips/index.js

@@ -1,6 +1,5 @@
 import tips from './Tips'
-import { debounce } from '../../utils'
-import { base as eventBaseName } from '@renderer/event/names'
+import { debounce } from '@common/utils'
 
 let instance
 let prevTips
@@ -23,7 +22,7 @@ const getTips = el =>
 
 const showTips = debounce(event => {
   if (isDraging) return
-  let msg = getTips(event.target)
+  let msg = getTips(event.target)?.trim()
   if (!msg) return
   prevTips = msg
   instance = tips({
@@ -63,25 +62,27 @@ const updateTips = event => {
   })
 }
 
-document.body.addEventListener('mousemove', event => {
-  if ((event.x == prevX && event.y == prevY) || isDraging) return
-  prevX = event.x
-  prevY = event.y
-  hideTips()
-  showTips(event)
-})
+setTimeout(() => {
+  document.body.addEventListener('mousemove', event => {
+    if ((event.x == prevX && event.y == prevY) || isDraging) return
+    prevX = event.x
+    prevY = event.y
+    hideTips()
+    showTips(event)
+  })
 
-document.body.addEventListener('click', updateTips)
+  document.body.addEventListener('click', updateTips)
 
-document.body.addEventListener('contextmenu', updateTips)
+  document.body.addEventListener('contextmenu', updateTips)
 
-window.eventHub.on(eventBaseName.focus, () => {
-  hideTips()
-})
-window.eventHub.on(eventBaseName.dragStart, () => {
-  isDraging = true
-  hideTips()
-})
-window.eventHub.on(eventBaseName.dragEnd, () => {
-  isDraging = false
+  window.app_event.on('focus', () => {
+    hideTips()
+  })
+  window.app_event.on('dragStart', () => {
+    isDraging = true
+    hideTips()
+  })
+  window.app_event.on('dragEnd', () => {
+    isDraging = false
+  })
 })

src/renderer/plugins/i18n.js

@@ -1,23 +0,0 @@
-/**
- * Vue i18n
- *
- * @library
- *
- * http://kazupon.github.io/vue-i18n/en/
- */
-
-// Lib imports
-import { createI18n } from 'vue-i18n'
-import { messages } from '@/lang'
-
-
-const i18n = createI18n({
-  locale: 'zh-cn',
-  fallbackLocale: 'zh-cn',
-  allowComposition: true,
-  messages,
-})
-
-window.i18n = i18n.global
-
-export default i18n

src/renderer/plugins/i18n.ts

@@ -0,0 +1,9 @@
+import { createI18n, i18nPlugin, useI18n, I18n } from '@/lang'
+
+window.i18n = createI18n()
+
+export {
+  i18nPlugin,
+  useI18n,
+  I18n,
+}

src/renderer/plugins/index.ts

@@ -1,9 +1,10 @@
 // import './axios'
+import { App } from 'vue'
 import dialog from './Dialog'
 import './Tips'
 import svgIcon from './SvgIcon'
 
-export default app => {
+export default (app: App) => {
   app.use(dialog)
 
   svgIcon(app)

src/renderer/plugins/player.js

@@ -1,165 +0,0 @@
-let audio
-let audioContext
-let mediaSource
-let analyser
-export const createAudio = () => {
-  if (audio) return
-  window.audio = audio = new window.Audio()
-  audio.controls = false
-  audio.autoplay = true
-  audio.preload = 'auto'
-}
-
-export const getAnalyser = () => {
-  if (audioContext == null) {
-    audioContext = new window.AudioContext()
-    mediaSource = audioContext.createMediaElementSource(audio)
-    analyser = audioContext.createAnalyser()
-    mediaSource.connect(analyser)
-    analyser.connect(audioContext.destination)
-  }
-  return analyser
-}
-
-export const hasInitedAnalyser = () => audioContext != null
-
-export const setResource = src => {
-  if (audio) audio.src = src
-}
-
-export const setPlay = () => {
-  audio?.play()
-}
-
-export const setPause = () => {
-  audio?.pause()
-}
-
-export const setStop = () => {
-  if (audio) {
-    audio.src = null
-    audio.removeAttribute('src')
-  }
-}
-
-export const isEmpty = () => !audio?.src
-
-export const setLoopPlay = isLoop => {
-  if (audio) audio.loop = isLoop
-}
-
-export const getMute = () => {
-  return audio?.muted ?? false
-}
-
-export const setMute = isMute => {
-  if (audio) audio.muted = isMute
-}
-
-export const getCurrentTime = () => {
-  return audio?.currentTime ?? 0
-}
-
-export const setCurrentTime = time => {
-  if (audio) audio.currentTime = time
-}
-
-export const setMediaDeviceId = mediaDeviceId => {
-  return audio ? audio.setSinkId(mediaDeviceId) : Promise.resolve()
-}
-
-export const setVolume = volume => {
-  if (audio) audio.volume = volume
-}
-
-export const getDuration = () => {
-  return audio?.duration ?? 0
-}
-
-export const getPlaybackRate = () => {
-  return audio?.playbackRate ?? 1
-}
-
-export const onPlaying = callback => {
-  audio.addEventListener('playing', callback)
-  return () => {
-    audio.removeEventListener('playing', callback)
-  }
-}
-
-export const onPause = callback => {
-  audio.addEventListener('pause', callback)
-  return () => {
-    audio.removeEventListener('pause', callback)
-  }
-}
-
-export const onEnded = callback => {
-  audio.addEventListener('ended', callback)
-  return () => {
-    audio.removeEventListener('ended', callback)
-  }
-}
-
-export const onError = callback => {
-  audio.addEventListener('error', callback)
-  return () => {
-    audio.removeEventListener('error', callback)
-  }
-}
-
-export const onLoadeddata = callback => {
-  audio.addEventListener('loadeddata', callback)
-  return () => {
-    audio.removeEventListener('loadeddata', callback)
-  }
-}
-
-export const onLoadstart = callback => {
-  audio.addEventListener('loadstart', callback)
-  return () => {
-    audio.removeEventListener('loadstart', callback)
-  }
-}
-
-export const onCanplay = callback => {
-  audio.addEventListener('canplay', callback)
-  return () => {
-    audio.removeEventListener('canplay', callback)
-  }
-}
-
-export const onEmptied = callback => {
-  audio.addEventListener('emptied', callback)
-  return () => {
-    audio.removeEventListener('emptied', callback)
-  }
-}
-
-export const onTimeupdate = callback => {
-  audio.addEventListener('timeupdate', callback)
-  return () => {
-    audio.removeEventListener('timeupdate', callback)
-  }
-}
-
-// 缓冲中
-export const onWaiting = callback => {
-  audio.addEventListener('waiting', callback)
-  return () => {
-    audio.removeEventListener('waiting', callback)
-  }
-}
-
-// 可见性改变
-export const onVisibilityChange = callback => {
-  document.addEventListener('visibilitychange', callback)
-  return () => {
-    document.removeEventListener('visibilitychange', callback)
-  }
-}
-
-
-export const getErrorCode = () => {
-  return audio?.error?.code
-}

src/renderer/plugins/player.ts

@@ -0,0 +1,192 @@
+let audio: HTMLAudioElement | null = null
+let audioContext: AudioContext
+let mediaSource: MediaElementAudioSourceNode
+let analyser: AnalyserNode
+
+export const createAudio = () => {
+  if (audio) return
+  audio = new window.Audio()
+  audio.controls = false
+  audio.autoplay = true
+  audio.preload = 'auto'
+}
+
+export const getAnalyser = (): AnalyserNode | null => {
+  if (!audio) throw new Error('audio not defined')
+
+  if (audioContext == null) {
+    audioContext = new window.AudioContext()
+    mediaSource = audioContext.createMediaElementSource(audio)
+    analyser = audioContext.createAnalyser()
+    analyser.fftSize = 256
+    mediaSource.connect(analyser)
+    analyser.connect(audioContext.destination)
+  }
+  return analyser
+}
+
+export const hasInitedAnalyser = (): boolean => audioContext != null
+
+export const setResource = (src: string) => {
+  if (audio) audio.src = src
+}
+
+export const setPlay = () => {
+  void audio?.play()
+}
+
+export const setPause = () => {
+  audio?.pause()
+}
+
+export const setStop = () => {
+  if (audio) {
+    audio.src = ''
+    audio.removeAttribute('src')
+  }
+}
+
+export const isEmpty = (): boolean => !audio?.src
+
+export const setLoopPlay = (isLoop: boolean) => {
+  if (audio) audio.loop = isLoop
+}
+
+export const getMute = (): boolean => {
+  return audio?.muted ?? false
+}
+
+export const setMute = (isMute: boolean) => {
+  if (audio) audio.muted = isMute
+}
+
+export const getCurrentTime = () => {
+  return audio?.currentTime ?? 0
+}
+
+export const setCurrentTime = (time: number) => {
+  if (audio) audio.currentTime = time
+}
+
+export const setMediaDeviceId = (mediaDeviceId: string) => {
+  // @ts-expect-error
+  return audio ? audio.setSinkId(mediaDeviceId) : Promise.resolve()
+}
+
+export const setVolume = (volume: number) => {
+  if (audio) audio.volume = volume
+}
+
+export const getDuration = () => {
+  return audio?.duration ?? 0
+}
+
+export const getPlaybackRate = () => {
+  return audio?.playbackRate ?? 1
+}
+
+type Noop = () => void
+
+export const onPlaying = (callback: Noop) => {
+  if (!audio) throw new Error('audio not defined')
+
+  audio.addEventListener('playing', callback)
+  return () => {
+    audio?.removeEventListener('playing', callback)
+  }
+}
+
+export const onPause = (callback: Noop) => {
+  if (!audio) throw new Error('audio not defined')
+
+  audio?.addEventListener('pause', callback)
+  return () => {
+    audio?.removeEventListener('pause', callback)
+  }
+}
+
+export const onEnded = (callback: Noop) => {
+  if (!audio) throw new Error('audio not defined')
+
+  audio.addEventListener('ended', callback)
+  return () => {
+    audio?.removeEventListener('ended', callback)
+  }
+}
+
+export const onError = (callback: Noop) => {
+  if (!audio) throw new Error('audio not defined')
+
+  audio.addEventListener('error', callback)
+  return () => {
+    audio?.removeEventListener('error', callback)
+  }
+}
+
+export const onLoadeddata = (callback: Noop) => {
+  if (!audio) throw new Error('audio not defined')
+
+  audio.addEventListener('loadeddata', callback)
+  return () => {
+    audio?.removeEventListener('loadeddata', callback)
+  }
+}
+
+export const onLoadstart = (callback: Noop) => {
+  if (!audio) throw new Error('audio not defined')
+
+  audio.addEventListener('loadstart', callback)
+  return () => {
+    audio?.removeEventListener('loadstart', callback)
+  }
+}
+
+export const onCanplay = (callback: Noop) => {
+  if (!audio) throw new Error('audio not defined')
+
+  audio.addEventListener('canplay', callback)
+  return () => {
+    audio?.removeEventListener('canplay', callback)
+  }
+}
+
+export const onEmptied = (callback: Noop) => {
+  if (!audio) throw new Error('audio not defined')
+
+  audio.addEventListener('emptied', callback)
+  return () => {
+    audio?.removeEventListener('emptied', callback)
+  }
+}
+
+export const onTimeupdate = (callback: Noop) => {
+  if (!audio) throw new Error('audio not defined')
+
+  audio.addEventListener('timeupdate', callback)
+  return () => {
+    audio?.removeEventListener('timeupdate', callback)
+  }
+}
+
+// 缓冲中
+export const onWaiting = (callback: Noop) => {
+  if (!audio) throw new Error('audio not defined')
+
+  audio.addEventListener('waiting', callback)
+  return () => {
+    audio?.removeEventListener('waiting', callback)
+  }
+}
+
+// 可见性改变
+export const onVisibilityChange = (callback: Noop) => {
+  document.addEventListener('visibilitychange', callback)
+  return () => {
+    document.removeEventListener('visibilitychange', callback)
+  }
+}
+
+
+export const getErrorCode = () => {
+  return audio?.error?.code
+}