azure/vue-desktop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

保存一下

Browse Source
This commit is contained in:
Azure
2025-08-29 14:22:20 +08:00
parent edb725354e
commit 17024fbf89
15 changed files with 74 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/core/XSystem.ts
View File

@@ -1,12 +1,7 @@
import ProcessManageImpl from './process/impl/ProcessManageImpl.ts'
import ProcessImpl from './process/impl/ProcessImpl.ts'
import { isUndefined } from 'lodash'
import { BasicSystemProcess } from '@/core/system/BasicSystemProcess.ts'
import { DesktopProcess } from '@/core/desktop/DesktopProcess.ts'
import type { IAllEvent } from '@/core/events/EventTypes.ts'
import type { IEventBuilder } from '@/core/events/IEventBuilder.ts'
import { EventBuilderImpl } from '@/core/events/impl/EventBuilderImpl.ts'
import type { IProcessManage } from '@/core/process/IProcessManage.ts'
import type { IProcess } from '@/core/process/IProcess.ts'
import type { IProcessInfo } from '@/core/process/IProcessInfo.ts'
import { ObservableWeakRefImpl } from '@/core/state/impl/ObservableWeakRefImpl.ts'
@@ -15,6 +10,7 @@ import { NotificationService } from '@/core/service/services/NotificationService
import { SettingsService } from '@/core/service/services/SettingsService.ts'
import { WindowFormService } from '@/core/service/services/WindowFormService.ts'
import { UserService } from '@/core/service/services/UserService.ts'
import { processManager } from '@/core/process/ProcessManager.ts'
interface IGlobalState {
isLogin: boolean
@@ -23,8 +19,6 @@ interface IGlobalState {
export default class XSystem {
private static _instance: XSystem = new XSystem()
private _processManage: IProcessManage = new ProcessManageImpl()
private _eventManage: IEventBuilder<IAllEvent> = new EventBuilderImpl()
private _globalState: IObservable<IGlobalState> = new ObservableWeakRefImpl<IGlobalState>({
isLogin: false
})
@@ -41,12 +35,6 @@ export default class XSystem {
public static get instance() {
return this._instance
}
public get processManage() {
return this._processManage
}
public get eventManage() {
return this._eventManage
}
public get globalState() {
return this._globalState
}
@@ -69,14 +57,14 @@ export default class XSystem {
proc: string | IProcessInfo,
constructor?: new (info: IProcessInfo) => T,
): Promise<T> {
let info = typeof proc === 'string' ? this._processManage.findProcessInfoByName(proc)! : proc
let info = typeof proc === 'string' ? processManager.findProcessInfoByName(proc)! : proc
if (isUndefined(info)) {
throw new Error(`未找到进程信息：${proc}`)
}
// 是单例应用
if (info.singleton) {
let process = this._processManage.findProcessByName(info.name)
let process = processManager.findProcessByName(info.name)
if (process) {
return process as T
}

13
src/core/desktop/DesktopProcess.ts
View File

@@ -1,13 +1,12 @@
import ProcessImpl from '@/core/process/impl/ProcessImpl.ts'
import type { ProcessInfoImpl } from '@/core/process/impl/ProcessInfoImpl.ts'
import XSystem from '@/core/XSystem.ts'
import { BasicSystemProcess } from '@/core/system/BasicSystemProcess.ts'
import { createApp, h } from 'vue'
import DesktopComponent from '@/core/desktop/ui/DesktopComponent.vue'
import { naiveUi } from '@/core/common/naive-ui/components.ts'
import { DesktopEventEnum } from '@/core/events/EventTypes.ts'
import { debounce } from 'lodash'
import type { IProcessInfo } from '@/core/process/IProcessInfo.ts'
import { eventManager } from '@/core/events/EventManager.ts'
import { processManager } from '@/core/process/ProcessManager.ts'
export class DesktopProcess extends ProcessImpl {
private _desktopRootDom: HTMLElement;
@@ -23,7 +22,7 @@ export class DesktopProcess extends ProcessImpl {
return this._isMounted;
}
public get basicSystemProcess() {
return XSystem.instance.processManage.findProcessByName<BasicSystemProcess>('basic-system')
return processManager.findProcessByName<BasicSystemProcess>('basic-system')
}
public get width() {
@@ -58,15 +57,11 @@ export class DesktopProcess extends ProcessImpl {
if (this._pendingResize) {
this._pendingResize = false;
console.log('onDesktopRootDomResize')
this.eventManages.notifyEvent(DesktopEventEnum.onDesktopRootDomResize, this._width, this._height);
eventManager.notifyEvent('onDesktopRootDomResize', this._width, this._height);
}
});
}
private get eventManages() {
return XSystem.instance.eventManage;
}
constructor(info: IProcessInfo) {
super(info)
console.log('DesktopProcess')

6
src/core/desktop/ui/DesktopComponent.vue
View File

@@ -24,18 +24,16 @@ import type { DesktopProcess } from '@/core/desktop/DesktopProcess.ts'
import XSystem from '@/core/XSystem.ts'
import { notificationApi } from '@/core/common/naive-ui/discrete-api.ts'
import { configProviderProps } from '@/core/common/naive-ui/theme.ts'
import { DesktopEventEnum } from '@/core/events/EventTypes.ts'
import { useDesktopInit } from '@/core/desktop/ui/hooks/useDesktopInit.ts'
import AppIcon from '@/core/desktop/ui/components/AppIcon.vue'
import { watch } from 'vue'
import type { IDesktopAppIcon } from '@/core/desktop/types/IDesktopAppIcon.ts'
import { eventManager } from '@/core/events/EventManager.ts'
const props = defineProps<{ process: DesktopProcess }>()
const { appIconsRef, gridStyle, gridTemplate } = useDesktopInit('.desktop-icons-container')
XSystem.instance.eventManage.addEventListener(
DesktopEventEnum.onDesktopRootDomResize,
eventManager.addEventListener('onDesktopRootDomResize',
(width, height) => {
console.log(width, height)
notificationApi.create({

7
src/core/desktop/ui/components/AppIcon.vue
View File

@@ -13,8 +13,7 @@
<script setup lang="ts">
import type { IDesktopAppIcon } from '@/core/desktop/types/IDesktopAppIcon.ts'
import type { IGridTemplateParams } from '@/core/desktop/types/IGridTemplateParams.ts'
import XSystem from '@/core/XSystem.ts'
import { DesktopEventEnum } from '@/core/events/EventTypes.ts'
import { eventManager } from '@/core/events/EventManager.ts'
const { iconInfo, gridTemplate } = defineProps<{ iconInfo: IDesktopAppIcon, gridTemplate: IGridTemplateParams }>()
@@ -27,7 +26,7 @@ const onDragEnd = (e: DragEvent) => {
const pointTarget = document.elementFromPoint(e.clientX, e.clientY)
if (!pointTarget) return
if (pointTarget.classList.contains('icon-container')) return
if (!pointTarget.classList.contains('desktop-container')) return
if (!pointTarget.classList.contains('desktop-icons-container')) return
// 获取容器边界
const rect = el.parentElement!.getBoundingClientRect()
@@ -43,7 +42,7 @@ const onDragEnd = (e: DragEvent) => {
iconInfo.x = gridX
iconInfo.y = gridY
XSystem.instance.eventManage.notifyEvent(DesktopEventEnum.onDesktopAppIconPos, iconInfo)
eventManager.notifyEvent('onDesktopAppIconPos', iconInfo)
}
</script>

9
src/core/desktop/ui/hooks/useDesktopInit.ts
View File

@@ -1,4 +1,3 @@
import XSystem from '@/core/XSystem.ts'
import type { IDesktopAppIcon } from '@/core/desktop/types/IDesktopAppIcon.ts'
import {
computed,
@@ -14,9 +13,9 @@ import {
watch,
watchEffect,
} from 'vue'
import { DesktopEventEnum } from '@/core/events/EventTypes.ts'
import { useDraggable } from '@vueuse/core'
import type { IGridTemplateParams } from '@/core/desktop/types/IGridTemplateParams.ts'
import { eventManager } from '@/core/events/EventManager.ts'
import { processManager } from '@/core/process/ProcessManager.ts'
export function useDesktopInit(containerStr: string) {
let container:HTMLElement
@@ -60,7 +59,7 @@ export function useDesktopInit(containerStr: string) {
})
// 有桌面图标的app
const appInfos = XSystem.instance.processManage.processInfos.filter(processInfo => !processInfo.isJustProcess)
const appInfos = processManager.processInfos.filter(processInfo => !processInfo.isJustProcess)
const oldAppIcons: IDesktopAppIcon[] = JSON.parse(localStorage.getItem('desktopAppIconInfo') || '[]')
const appIcons: IDesktopAppIcon[] = appInfos.map((processInfo, index) => {
const oldAppIcon = oldAppIcons.find(oldAppIcon => oldAppIcon.name === processInfo.name)
@@ -89,7 +88,7 @@ export function useDesktopInit(containerStr: string) {
exceedApp.value = hideAppIcons
})
XSystem.instance.eventManage.addEventListener(DesktopEventEnum.onDesktopAppIconPos, (iconInfo) => {
eventManager.addEventListener('onDesktopAppIconPos', (iconInfo) => {
localStorage.setItem('desktopAppIconInfo', JSON.stringify(toValue(appIconsRef.value)))
})

35
src/core/events/EventManager.ts Normal file
View File

@@ -0,0 +1,35 @@
import { EventBuilderImpl } from '@/core/events/impl/EventBuilderImpl.ts'
import type { IEventMap } from '@/core/events/IEventBuilder.ts'
import type { IDesktopAppIcon } from '@/core/desktop/types/IDesktopAppIcon.ts'
export const eventManager = new EventBuilderImpl<IAllEvent>()
/**
* 系统进程的事件
* @description
* <p>onAuthChange - 认证状态改变</p>
* <p>onThemeChange - 主题改变</p>
*/
export interface IBasicSystemEvent extends IEventMap {
/** 认证状态改变 */
onAuthChange: () => {},
/** 主题改变 */
onThemeChange: (theme: string) => void
}
/**
* 桌面进程的事件
* @description
* <p>onDesktopRootDomResize - 桌面根dom尺寸改变</p>
* <p>onDesktopProcessInitialize - 桌面进程初始化完成</p>
*/
export interface IDesktopEvent extends IEventMap {
/** 桌面根dom尺寸改变 */
onDesktopRootDomResize: (width: number, height: number) => void
/** 桌面进程初始化完成 */
onDesktopProcessInitialize: () => void
/** 桌面应用图标位置改变 */
onDesktopAppIconPos: (iconInfo: IDesktopAppIcon) => void
}
export interface IAllEvent extends IDesktopEvent, IBasicSystemEvent {}

63
src/core/events/EventTypes.ts
View File

@@ -1,63 +0,0 @@
import type { IEventMap } from '@/core/events/IEventBuilder.ts'
import type { IDesktopAppIcon } from '@/core/desktop/types/IDesktopAppIcon.ts'
/**
* 基础系统进程事件枚举
* @description
* <p>onAuthenticationChange - 认证状态改变</p>
* <p>onBasicSystemProcessInitialize - 主题改变</p>
*/
export enum BasicSystemEventEnum {
/** 基础系统进程初始化完成 */
onBasicSystemProcessInitialize = 'onBasicSystemProcessInitialize',
/** 认证状态改变 */
onAuthChange = 'onAuthChange',
/** 主题改变 */
onThemeChange = 'onThemeChange'
}
/**
* 系统进程的事件
* @description
* <p>onAuthChange - 认证状态改变</p>
* <p>onThemeChange - 主题改变</p>
*/
export interface IBasicSystemEvent extends IEventMap {
/** 认证状态改变 */
[BasicSystemEventEnum.onAuthChange]: () => {},
/** 主题改变 */
[BasicSystemEventEnum.onThemeChange]: (theme: string) => void
}
/**
* 桌面进程事件枚举
* @description
* <p>onDesktopRootDomResize - 桌面根dom尺寸改变</p>
* <p>onDesktopProcessInitialize - 桌面进程初始化完成</p>
*/
export enum DesktopEventEnum {
/** 桌面进程初始化完成 */
onDesktopRootDomResize = 'onDesktopRootDomResize',
/** 桌面进程初始化完成 */
onDesktopProcessInitialize = 'onDesktopProcessInitialize',
/** 桌面应用图标位置改变 */
onDesktopAppIconPos = 'onDesktopAppIconPos'
}
/**
* 桌面进程的事件
* @description
* <p>onDesktopRootDomResize - 桌面根dom尺寸改变</p>
* <p>onDesktopProcessInitialize - 桌面进程初始化完成</p>
*/
export interface IDesktopEvent extends IEventMap {
/** 桌面根dom尺寸改变 */
[DesktopEventEnum.onDesktopRootDomResize]: (width: number, height: number) => void
/** 桌面进程初始化完成 */
[DesktopEventEnum.onDesktopProcessInitialize]: () => void
/** 桌面应用图标位置改变 */
[DesktopEventEnum.onDesktopAppIconPos]: (iconInfo: IDesktopAppIcon) => void
}
export interface IAllEvent extends IDesktopEvent, IBasicSystemEvent {}

2
src/core/process/IProcessManage.ts → src/core/process/IProcessManager.ts
View File

@@ -5,7 +5,7 @@ import type { IProcessInfo } from '@/core/process/IProcessInfo.ts'
/**
* 进程管理
*/
export interface IProcessManage {
export interface IProcessManager {
/** 所有进程信息 */
get processInfos(): IProcessInfo[];
/**

3
src/core/process/ProcessManager.ts Normal file
View File

@@ -0,0 +1,3 @@
import ProcessManagerImpl from '@/core/process/impl/ProcessManagerImpl.ts'
export const processManager = new ProcessManagerImpl();

4
src/core/process/impl/ProcessImpl.ts
View File

@@ -1,9 +1,9 @@
import { v4 as uuidV4 } from 'uuid';
import XSystem from '../../XSystem.ts'
import WindowFormImpl from '../../window/impl/WindowFormImpl.ts'
import type { IProcess } from '@/core/process/IProcess.ts'
import type { IProcessInfo } from '@/core/process/IProcessInfo.ts'
import type { IWindowForm } from '@/core/window/IWindowForm.ts'
import { processManager } from '@/core/process/ProcessManager.ts'
/**
* 进程
@@ -30,7 +30,7 @@ export default class ProcessImpl implements IProcess {
const startName = info.startName;
XSystem.instance.processManage.registerProcess(this);
processManager.registerProcess(this);
// 通过设置 isJustProcess 为 true，则不会创建窗体
if (!info.isJustProcess) {
this.openWindowForm(startName)

4
src/core/process/impl/ProcessManageImpl.ts → src/core/process/impl/ProcessManagerImpl.ts
View File

@@ -3,14 +3,14 @@ import { ProcessInfoImpl } from '@/core/process/impl/ProcessInfoImpl.ts'
import { BasicSystemProcessInfo } from '@/core/system/BasicSystemProcessInfo.ts'
import { DesktopProcessInfo } from '@/core/desktop/DesktopProcessInfo.ts'
import type { IAppProcessInfoParams } from '@/core/process/types/IAppProcessInfoParams.ts'
import type { IProcessManage } from '@/core/process/IProcessManage.ts'
import type { IProcessManager } from '@/core/process/IProcessManager.ts'
import type { IProcess } from '@/core/process/IProcess.ts'
import type { IProcessInfo } from '@/core/process/IProcessInfo.ts'
/**
* 进程管理
*/
export default class ProcessManageImpl implements IProcessManage {
export default class ProcessManagerImpl implements IProcessManager {
private _processPool: Map<string, IProcess> = new Map<string, IProcess>();
private _processInfos: IProcessInfo[] = new Array<ProcessInfoImpl>();

98
src/core/service/kernel/EventService.ts
View File

@@ -1,98 +0,0 @@
/**
* 事件定义
* @interface IEventMap 事件定义 键是事件名称，值是事件处理函数
*/
export interface IEventMap {
[key: string]: (...args: any[]) => void
}
interface HandlerWrapper<T extends (...args: any[]) => any> {
fn: T
once: boolean
}
export class EventService<Events extends IEventMap> {
private _eventHandlers = new Map<keyof Events, Set<HandlerWrapper<Events[keyof Events]>>>()
/**
* 添加事件监听器
* @param eventName 事件名称
* @param handler 监听器
* @param options { immediate: 立即执行一次 immediateArgs: 立即执行的参数 once: 只监听一次 }
* @example
* eventBus.addEventListener('noArgs', () => {})
* eventBus.addEventListener('greet', name => {}, { immediate: true, immediateArgs: ['abc'] })
* eventBus.addEventListener('onResize', (w, h) => {}, { immediate: true, immediateArgs: [1, 2] })
*/
addEventListener<E extends keyof Events, F extends Events[E]>(
eventName: E,
handler: F,
options?: {
immediate?: boolean;
immediateArgs?: Parameters<F>;
once?: boolean;
},
) {
if (!handler) return
if (!this._eventHandlers.has(eventName)) {
this._eventHandlers.set(eventName, new Set<HandlerWrapper<F>>())
}
const set = this._eventHandlers.get(eventName)!
if (![...set].some((wrapper) => wrapper.fn === handler)) {
set.add({ fn: handler, once: options?.once ?? false })
}
if (options?.immediate) {
try {
handler(...(options.immediateArgs ?? []))
} catch (e) {
console.error(e)
}
}
}
/**
* 移除事件监听器
* @param eventName 事件名称
* @param handler 监听器
* @example
* eventBus.removeEventListener('noArgs', () => {})
*/
removeEventListener<E extends keyof Events, F extends Events[E]>(eventName: E, handler: F) {
const set = this._eventHandlers.get(eventName)
if (!set) return
for (const wrapper of set) {
if (wrapper.fn === handler) {
set.delete(wrapper)
}
}
}
/**
* 通知事件
* @param eventName 事件名称
* @param args 参数
* @example
* eventBus.notifyEvent('noArgs')
* eventBus.notifyEvent('greet', 'Alice')
* eventBus.notifyEvent('onResize', 1, 2)
*/
notifyEvent<E extends keyof Events, F extends Events[E]>(eventName: E, ...args: Parameters<F>) {
if (!this._eventHandlers.has(eventName)) return
const set = this._eventHandlers.get(eventName)!
for (const wrapper of set) {
try {
wrapper.fn(...args)
} catch (e) {
console.error(e)
}
if (wrapper.once) {
set.delete(wrapper)
}
}
}
}

12
src/core/service/services/UserService.ts
View File

@@ -1,6 +1,18 @@
import { AService } from '@/core/service/kernel/AService.ts'
import type { IObservable } from '@/core/state/IObservable.ts'
interface IUserInfo {
id: string;
name: string;
token: string;
}
export class UserService extends AService {
private _userInfo: IObservable<IUserInfo>;
get userInfo() {
return this._userInfo;
}
constructor() {
super("UserService");
console.log("UserService - 服务注册")

2
src/core/state/impl/ObservableImpl.ts
View File

@@ -73,7 +73,7 @@ import type {
* // 9️⃣ 销毁 ObservableImpl
* obs.dispose()
*/
export class Observable<T extends TNonFunctionProperties<T>> implements IObservable<T> {
export class ObservableImpl<T extends TNonFunctionProperties<T>> implements IObservable<T> {
/** Observable 状态对象，深层 Proxy */
public readonly state: TObservableState<T>

3
src/core/window/impl/WindowFormImpl.ts
View File

@@ -4,6 +4,7 @@ import type { IProcess } from '@/core/process/IProcess.ts'
import type { IWindowForm } from '@/core/window/IWindowForm.ts'
import type { IWindowFormConfig } from '@/core/window/types/IWindowFormConfig.ts'
import type { WindowFormPos } from '@/core/window/types/WindowFormTypes.ts'
import { processManager } from '@/core/process/ProcessManager.ts'
export default class WindowFormImpl implements IWindowForm {
private readonly _id: string = uuidV4();
@@ -16,7 +17,7 @@ export default class WindowFormImpl implements IWindowForm {
return this._id;
}
public get proc() {
return XSystem.instance.processManage.findProcessById(this._procId)
return processManager.findProcessById(this._procId)
}
private get desktopRootDom() {
return XSystem.instance.desktopRootDom;