Compare commits
2 Commits
12f46e6f8e
...
main
| Author | SHA1 | Date | |
|---|---|---|---|
| f80c1863b9 | |||
| ff4791922e |
35
README.md
35
README.md
@@ -1,37 +1,2 @@
|
||||
# vue-desktop
|
||||
|
||||
浏览器：Chrome 84+、Edge 84+、Firefox 79+、Safari 14+
|
||||
|
||||
Node.js：v14+
|
||||
|
||||
不支持IE
|
||||
|
||||
## Recommended IDE Setup
|
||||
|
||||
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
|
||||
|
||||
## Type Support for `.vue` Imports in TS
|
||||
|
||||
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) to make the TypeScript language service aware of `.vue` types.
|
||||
|
||||
## Customize configuration
|
||||
|
||||
See [Vite Configuration Reference](https://vite.dev/config/).
|
||||
|
||||
## Project Setup
|
||||
|
||||
```sh
|
||||
pnpm install
|
||||
```
|
||||
|
||||
### Compile and Hot-Reload for Development
|
||||
|
||||
```sh
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
### Type-Check, Compile and Minify for Production
|
||||
|
||||
```sh
|
||||
pnpm build
|
||||
```
|
||||
|
||||
18
src/App.vue
Normal file
18
src/App.vue
Normal file
@@ -0,0 +1,18 @@
|
||||
<template>
|
||||
<div id="root" ref="root-dom" class="w-100vw h-100vh"></div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import XSystem from '@/core/XSystem.ts'
|
||||
import { onMounted, useTemplateRef } from 'vue'
|
||||
|
||||
const dom = useTemplateRef<HTMLDivElement>('root-dom')
|
||||
|
||||
onMounted(() => {
|
||||
XSystem.instance.initialization(dom.value!);
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,65 +0,0 @@
|
||||
import { onMounted, onBeforeUnmount, type Ref, watch } from "vue";
|
||||
|
||||
interface ClickFocusOptions {
|
||||
once?: boolean; // 点击一次后解绑
|
||||
}
|
||||
|
||||
/**
|
||||
* Vue3 Hook：点击自身聚焦 / 点击外部失焦
|
||||
* @param targetRef 元素的 ref
|
||||
* @param onFocus 点击自身回调
|
||||
* @param onBlur 点击外部回调
|
||||
* @param options 配置项 { once }
|
||||
*/
|
||||
export function useClickFocus(
|
||||
targetRef: Ref<HTMLElement | null>,
|
||||
onFocus?: () => void,
|
||||
onBlur?: () => void,
|
||||
options: ClickFocusOptions = {}
|
||||
) {
|
||||
let cleanupFn: (() => void) | null = null;
|
||||
|
||||
const bindEvents = (el: HTMLElement) => {
|
||||
if (!el.hasAttribute("tabindex")) el.setAttribute("tabindex", "0");
|
||||
|
||||
const handleClick = (e: MouseEvent) => {
|
||||
if (!el.isConnected) return cleanup();
|
||||
|
||||
if (el.contains(e.target as Node)) {
|
||||
el.focus();
|
||||
onFocus?.();
|
||||
} else {
|
||||
el.blur();
|
||||
onBlur?.();
|
||||
}
|
||||
|
||||
if (options.once) cleanup();
|
||||
};
|
||||
|
||||
document.addEventListener("click", handleClick);
|
||||
|
||||
cleanupFn = () => {
|
||||
document.removeEventListener("click", handleClick);
|
||||
cleanupFn = null;
|
||||
};
|
||||
};
|
||||
|
||||
const cleanup = () => {
|
||||
cleanupFn?.();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
const el = targetRef.value;
|
||||
if (el) bindEvents(el);
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
cleanup();
|
||||
});
|
||||
|
||||
// 支持动态 ref 变化
|
||||
watch(targetRef, (newEl, oldEl) => {
|
||||
if (oldEl) cleanup();
|
||||
if (newEl) bindEvents(newEl);
|
||||
});
|
||||
}
|
||||
@@ -1,87 +0,0 @@
|
||||
import { reactive, onBeforeUnmount, type Reactive } from 'vue'
|
||||
import type { IObservable } from '@/core/state/IObservable.ts'
|
||||
|
||||
/**
|
||||
* Vue Hook: useObservable
|
||||
* 支持深层解构赋值，直接修改触发 ObservableImpl 通知 + Vue 响应式更新
|
||||
* @example
|
||||
* interface AppState {
|
||||
* count: number
|
||||
* user: { name: string; age: number }
|
||||
* items: number[]
|
||||
* }
|
||||
*
|
||||
* // 创建 ObservableImpl
|
||||
* const obs = new ObservableImpl<AppState>({
|
||||
* count: 0,
|
||||
* user: { name: 'Alice', age: 20 },
|
||||
* items: []
|
||||
* })
|
||||
*
|
||||
* export default defineComponent({
|
||||
* setup() {
|
||||
* // 深层解构 Hook
|
||||
* const { count, user, items } = useObservable(obs)
|
||||
*
|
||||
* const increment = () => {
|
||||
* count += 1 // 触发 ObservableImpl 通知 + Vue 更新
|
||||
* }
|
||||
*
|
||||
* const changeAge = () => {
|
||||
* user.age = 30 // 深层对象也能触发通知
|
||||
* }
|
||||
*
|
||||
* const addItem = () => {
|
||||
* items.push(42) // 数组方法拦截，触发通知
|
||||
* }
|
||||
*
|
||||
* return { count, user, items, increment, changeAge, addItem }
|
||||
* }
|
||||
* })
|
||||
*/
|
||||
export function useObservable<T extends object>(observable: IObservable<T>): Reactive<T> {
|
||||
// 创建 Vue 响应式对象
|
||||
const state = reactive({} as T)
|
||||
|
||||
/**
|
||||
* 将 ObservableImpl Proxy 映射到 Vue 响应式对象
|
||||
* 递归支持深层对象
|
||||
*/
|
||||
function mapKeys(obj: any, proxy: any) {
|
||||
(Object.keys(proxy) as (keyof typeof proxy)[]).forEach(key => {
|
||||
const value = proxy[key]
|
||||
if (typeof value === 'object' && value !== null) {
|
||||
// 递归创建子对象 Proxy
|
||||
obj[key] = reactive({} as typeof value)
|
||||
mapKeys(obj[key], value)
|
||||
} else {
|
||||
// 基本类型通过 getter/setter 同步
|
||||
Object.defineProperty(obj, key, {
|
||||
enumerable: true,
|
||||
configurable: true,
|
||||
get() {
|
||||
return proxy[key]
|
||||
},
|
||||
set(val) {
|
||||
proxy[key] = val
|
||||
},
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 获取 ObservableImpl 的 Proxy
|
||||
const refsProxy = observable.toRefsProxy()
|
||||
mapKeys(state, refsProxy)
|
||||
|
||||
// 订阅 ObservableImpl，保持响应式同步
|
||||
const unsubscribe = observable.subscribe(() => {
|
||||
// 空实现即可，getter/setter 已同步
|
||||
})
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
unsubscribe()
|
||||
})
|
||||
|
||||
return state
|
||||
}
|
||||
@@ -1,10 +0,0 @@
|
||||
import {
|
||||
create,
|
||||
NButton,
|
||||
NCard,
|
||||
NConfigProvider,
|
||||
} from 'naive-ui'
|
||||
|
||||
export const naiveUi = create({
|
||||
components: [NButton, NCard, NConfigProvider]
|
||||
})
|
||||
@@ -1,21 +0,0 @@
|
||||
import { createDiscreteApi } from 'naive-ui'
|
||||
import { configProviderProps } from './theme.ts'
|
||||
|
||||
const { message, notification, dialog, loadingBar, modal } = createDiscreteApi(
|
||||
['message', 'dialog', 'notification', 'loadingBar', 'modal'],
|
||||
{
|
||||
configProviderProps: configProviderProps,
|
||||
notificationProviderProps: {
|
||||
placement: 'bottom-right',
|
||||
max: 3
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
export const { messageApi, notificationApi, dialogApi, loadingBarApi, modalApi } = {
|
||||
messageApi: message,
|
||||
notificationApi: notification,
|
||||
dialogApi: dialog,
|
||||
loadingBarApi: loadingBar,
|
||||
modalApi: modal
|
||||
}
|
||||
@@ -1,15 +0,0 @@
|
||||
import { type ConfigProviderProps, darkTheme, dateZhCN, type GlobalTheme, lightTheme, zhCN } from 'naive-ui'
|
||||
|
||||
const lTheme: GlobalTheme = {
|
||||
...lightTheme,
|
||||
common: {
|
||||
...lightTheme.common,
|
||||
primaryColor: '#0070f3'
|
||||
}
|
||||
}
|
||||
|
||||
export const configProviderProps: ConfigProviderProps = {
|
||||
theme: lTheme,
|
||||
dateLocale: dateZhCN,
|
||||
locale: zhCN,
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
/**
|
||||
* 可销毁接口
|
||||
* 销毁实例,清理副作用,让内存可以被回收
|
||||
*/
|
||||
export interface IDestroyable {
|
||||
/** 销毁实例,清理副作用,让内存可以被回收 */
|
||||
destroy(): void
|
||||
}
|
||||
@@ -1,29 +0,0 @@
|
||||
/**
|
||||
* 版本信息
|
||||
*/
|
||||
export interface IVersion {
|
||||
/**
|
||||
* 公司名称
|
||||
*/
|
||||
company: string
|
||||
|
||||
/**
|
||||
* 版本号
|
||||
*/
|
||||
major: number
|
||||
|
||||
/**
|
||||
* 子版本号
|
||||
*/
|
||||
minor: number
|
||||
|
||||
/**
|
||||
* 修订号
|
||||
*/
|
||||
build: number
|
||||
|
||||
/**
|
||||
* 私有版本号
|
||||
*/
|
||||
private: number
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
import { EventBuilderImpl } from '@/events/impl/EventBuilderImpl.ts'
|
||||
import type { IEventMap } from '@/events/IEventBuilder.ts'
|
||||
import type { IDesktopAppIcon } from '@/ui/types/IDesktopAppIcon.ts'
|
||||
|
||||
/**
|
||||
* 桌面相关的事件
|
||||
*/
|
||||
export interface IDesktopEvent extends IEventMap {
|
||||
/**
|
||||
* 桌面应用位置改变
|
||||
*/
|
||||
desktopAppPosChange: (info: IDesktopAppIcon) => void;
|
||||
}
|
||||
|
||||
/** 窗口事件管理器 */
|
||||
export const desktopEM = new EventBuilderImpl<IDesktopEvent>()
|
||||
@@ -1,35 +0,0 @@
|
||||
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 {}
|
||||
@@ -1,47 +0,0 @@
|
||||
import type { IDestroyable } from '@/core/common/types/IDestroyable.ts'
|
||||
|
||||
/**
|
||||
* 事件定义
|
||||
* @interface IEventMap 事件定义 键是事件名称，值是事件处理函数
|
||||
*/
|
||||
export interface IEventMap {
|
||||
[key: string]: (...args: any[]) => void
|
||||
}
|
||||
|
||||
/**
|
||||
* 事件管理器接口定义
|
||||
*/
|
||||
export interface IEventBuilder<Events extends IEventMap> extends IDestroyable {
|
||||
/**
|
||||
* 添加事件监听
|
||||
* @param eventName 事件名称
|
||||
* @param handler 事件处理函数
|
||||
* @param options 配置项 { immediate: 立即执行一次 immediateArgs: 立即执行的参数 once: 只监听一次 }
|
||||
* @returns void
|
||||
*/
|
||||
addEventListener<E extends keyof Events, F extends Events[E]>(
|
||||
eventName: E,
|
||||
handler: F,
|
||||
options?: {
|
||||
immediate?: boolean
|
||||
immediateArgs?: Parameters<F>
|
||||
once?: boolean
|
||||
},
|
||||
): void
|
||||
|
||||
/**
|
||||
* 移除事件监听
|
||||
* @param eventName 事件名称
|
||||
* @param handler 事件处理函数
|
||||
* @returns void
|
||||
*/
|
||||
removeEventListener<E extends keyof Events, F extends Events[E]>(eventName: E, handler: F): void
|
||||
|
||||
/**
|
||||
* 触发事件
|
||||
* @param eventName 事件名称
|
||||
* @param args 参数
|
||||
* @returns void
|
||||
*/
|
||||
notifyEvent<E extends keyof Events, F extends Events[E]>(eventName: E, ...args: Parameters<F>): void
|
||||
}
|
||||
@@ -1,61 +0,0 @@
|
||||
import { EventBuilderImpl } from '@/events/impl/EventBuilderImpl.ts'
|
||||
import type { IEventMap } from '@/events/IEventBuilder.ts'
|
||||
import type { TWindowFormState } from '@/ui/types/WindowFormTypes.ts'
|
||||
|
||||
/**
|
||||
* 窗口的事件
|
||||
*/
|
||||
export interface IWindowFormEvent extends IEventMap {
|
||||
/**
|
||||
* 窗口最小化
|
||||
* @param id 窗口id
|
||||
*/
|
||||
windowFormMinimize: (id: string) => void;
|
||||
/**
|
||||
* 窗口最大化
|
||||
* @param id 窗口id
|
||||
*/
|
||||
windowFormMaximize: (id: string) => void;
|
||||
/**
|
||||
* 窗口还原
|
||||
* @param id 窗口id
|
||||
*/
|
||||
windowFormRestore: (id: string) => void;
|
||||
/**
|
||||
* 窗口关闭
|
||||
* @param id 窗口id
|
||||
*/
|
||||
windowFormClose: (id: string) => void;
|
||||
/**
|
||||
* 窗口聚焦
|
||||
* @param id 窗口id
|
||||
*/
|
||||
windowFormFocus: (id: string) => void;
|
||||
/**
|
||||
* 窗口数据更新
|
||||
* @param data 窗口数据
|
||||
*/
|
||||
windowFormDataUpdate: (data: IWindowFormDataUpdateParams) => void;
|
||||
/**
|
||||
* 窗口创建完成
|
||||
*/
|
||||
windowFormCreated: () => void;
|
||||
}
|
||||
|
||||
interface IWindowFormDataUpdateParams {
|
||||
/** 窗口id */
|
||||
id: string;
|
||||
/** 窗口状态 */
|
||||
state: TWindowFormState,
|
||||
/** 窗口宽度 */
|
||||
width: number,
|
||||
/** 窗口高度 */
|
||||
height: number,
|
||||
/** 窗口x坐标(左上角) */
|
||||
x: number,
|
||||
/** 窗口y坐标(左上角) */
|
||||
y: number
|
||||
}
|
||||
|
||||
/** 窗口事件管理器 */
|
||||
export const wfem = new EventBuilderImpl<IWindowFormEvent>()
|
||||
@@ -1,96 +0,0 @@
|
||||
import type { IEventBuilder, IEventMap } from '@/core/events/IEventBuilder.ts'
|
||||
|
||||
interface HandlerWrapper<T extends (...args: any[]) => any> {
|
||||
fn: T
|
||||
once: boolean
|
||||
}
|
||||
|
||||
export class EventBuilderImpl<Events extends IEventMap> implements IEventBuilder<Events> {
|
||||
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)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
destroy() {
|
||||
this._eventHandlers.clear()
|
||||
}
|
||||
}
|
||||
15
src/main.ts
15
src/main.ts
@@ -1,15 +1,16 @@
|
||||
import { createApp } from 'vue'
|
||||
import { createPinia } from 'pinia'
|
||||
import { naiveUi } from '@/common/naive-ui/components.ts'
|
||||
|
||||
import 'virtual:uno.css'
|
||||
import './css/basic.css'
|
||||
|
||||
import App from './ui/App.vue'
|
||||
// import App from './App.vue'
|
||||
|
||||
const app = createApp(App)
|
||||
// const app = createApp(App)
|
||||
//
|
||||
// app.use(createPinia())
|
||||
//
|
||||
// app.mount('#app')
|
||||
|
||||
app.use(createPinia())
|
||||
app.use(naiveUi)
|
||||
|
||||
app.mount('#app')
|
||||
import XSystem from '@/core/XSystem.ts'
|
||||
XSystem.instance.initialization(document.querySelector('#app')!);
|
||||
@@ -1,53 +0,0 @@
|
||||
<template>
|
||||
<n-config-provider
|
||||
:config-provider-props="configProviderProps"
|
||||
class="pos-relative w-screen h-vh"
|
||||
>
|
||||
<div class="desktop-root" @contextmenu="onContextMenu">
|
||||
<div class="desktop-bg">
|
||||
<DesktopContainer/>
|
||||
</div>
|
||||
<div class="task-bar">
|
||||
<div id="taskbar" class="w-[80px] h-full flex justify-center items-center bg-blue">
|
||||
测试
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</n-config-provider>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { configProviderProps } from '@/core/common/naive-ui/theme.ts'
|
||||
import DesktopContainer from '@/ui/desktop-container/DesktopContainer.vue'
|
||||
|
||||
const onContextMenu = (e: MouseEvent) => {
|
||||
e.preventDefault()
|
||||
e.stopPropagation()
|
||||
console.log(e)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
$taskBarHeight: 40px;
|
||||
.desktop-root {
|
||||
@apply w-full h-full flex flex-col;
|
||||
|
||||
.desktop-bg {
|
||||
@apply w-full h-full flex-1 p-2 pos-relative;
|
||||
background-image: url('imgs/desktop-bg-2.jpeg');
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
height: calc(100% - #{$taskBarHeight});
|
||||
}
|
||||
|
||||
.desktop-icons-container {
|
||||
@apply w-full h-full flex-1 grid grid-auto-flow-col pos-relative;
|
||||
}
|
||||
|
||||
.task-bar {
|
||||
@apply w-full bg-gray-200 flex justify-center items-center;
|
||||
height: $taskBarHeight;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,52 +0,0 @@
|
||||
<template>
|
||||
<div
|
||||
class="icon-container"
|
||||
:style="`grid-column: ${iconInfo.x}/${iconInfo.x + 1};grid-row: ${iconInfo.y}/${iconInfo.y + 1};`"
|
||||
draggable="true"
|
||||
@dragstart="onDragStart"
|
||||
@dragend="onDragEnd"
|
||||
>
|
||||
{{ iconInfo.name }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { IDesktopAppIcon } from '@/ui/types/IDesktopAppIcon.ts'
|
||||
import type { IGridTemplateParams } from '@/ui/types/IGridTemplateParams.ts'
|
||||
|
||||
const { iconInfo, gridTemplate } = defineProps<{ iconInfo: IDesktopAppIcon, gridTemplate: IGridTemplateParams }>()
|
||||
|
||||
const onDragStart = (e: DragEvent) => {}
|
||||
|
||||
const onDragEnd = (e: DragEvent) => {
|
||||
const el = e.target as HTMLElement | null
|
||||
if (!el) return
|
||||
// 鼠标所在位置已存在图标元素
|
||||
const pointTarget = document.elementFromPoint(e.clientX, e.clientY)
|
||||
if (!pointTarget) return
|
||||
if (pointTarget.classList.contains('icon-container')) return
|
||||
if (!pointTarget.classList.contains('desktop-icons-container')) return
|
||||
|
||||
// 获取容器边界
|
||||
const rect = el.parentElement!.getBoundingClientRect()
|
||||
|
||||
// 鼠标相对容器左上角坐标
|
||||
const mouseX = e.clientX - rect.left
|
||||
const mouseY = e.clientY - rect.top
|
||||
|
||||
// 计算鼠标所在单元格坐标（向上取整，从1开始）
|
||||
const gridX = Math.ceil(mouseX / gridTemplate.cellRealWidth)
|
||||
const gridY = Math.ceil(mouseY / gridTemplate.cellRealHeight)
|
||||
|
||||
iconInfo.x = gridX
|
||||
iconInfo.y = gridY
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.icon-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@apply flex flex-col items-center justify-center bg-gray-200;
|
||||
}
|
||||
</style>
|
||||
@@ -1,23 +0,0 @@
|
||||
<template>
|
||||
<div class="desktop-icons-container" :style="gridStyle">
|
||||
<AppIcon
|
||||
v-for="(appIcon, i) in appIconsRef"
|
||||
:key="i"
|
||||
:iconInfo="appIcon"
|
||||
:gridTemplate="gridTemplate"
|
||||
@dblclick="runApp(appIcon)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import AppIcon from '@/ui/desktop-container/AppIcon.vue'
|
||||
import type { IDesktopAppIcon } from '@/ui/types/IDesktopAppIcon.ts'
|
||||
import { useDesktopContainerInit } from '@/ui/desktop-container/useDesktopContainerInit.ts'
|
||||
|
||||
const { appIconsRef, gridStyle, gridTemplate } = useDesktopContainerInit('.desktop-icons-container')
|
||||
|
||||
const runApp = (appIcon: IDesktopAppIcon) => {}
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -1,164 +0,0 @@
|
||||
import type { IDesktopAppIcon } from '@/ui/types/IDesktopAppIcon.ts'
|
||||
import {
|
||||
computed,
|
||||
onMounted,
|
||||
onUnmounted,
|
||||
reactive,
|
||||
ref,
|
||||
toRaw,
|
||||
toValue,
|
||||
watch,
|
||||
} from 'vue'
|
||||
import type { IGridTemplateParams } from '@/ui/types/IGridTemplateParams.ts'
|
||||
import type { IProcessInfo } from '@/core/process/IProcessInfo.ts'
|
||||
|
||||
export function useDesktopContainerInit(containerStr: string) {
|
||||
let container:HTMLElement
|
||||
// 初始值
|
||||
const gridTemplate = reactive<IGridTemplateParams>({
|
||||
cellExpectWidth: 90,
|
||||
cellExpectHeight: 110,
|
||||
cellRealWidth: 90,
|
||||
cellRealHeight: 110,
|
||||
gapX: 4,
|
||||
gapY: 4,
|
||||
colCount: 1,
|
||||
rowCount: 1
|
||||
})
|
||||
|
||||
const gridStyle = computed(() => ({
|
||||
gridTemplateColumns: `repeat(${gridTemplate.colCount}, minmax(${gridTemplate.cellExpectWidth}px, 1fr))`,
|
||||
gridTemplateRows: `repeat(${gridTemplate.rowCount}, minmax(${gridTemplate.cellExpectHeight}px, 1fr))`,
|
||||
gap: `${gridTemplate.gapX}px ${gridTemplate.gapY}px`
|
||||
}))
|
||||
|
||||
const ro = new ResizeObserver(entries => {
|
||||
const containerRect = container.getBoundingClientRect()
|
||||
gridTemplate.colCount = Math.floor((containerRect.width + gridTemplate.gapX) / (gridTemplate.cellExpectWidth + gridTemplate.gapX));
|
||||
gridTemplate.rowCount = Math.floor((containerRect.height + gridTemplate.gapY) / (gridTemplate.cellExpectHeight + gridTemplate.gapY));
|
||||
|
||||
const w = containerRect.width - (gridTemplate.gapX * (gridTemplate.colCount - 1))
|
||||
const h = containerRect.height - (gridTemplate.gapY * (gridTemplate.rowCount - 1))
|
||||
gridTemplate.cellRealWidth = Number((w / gridTemplate.colCount).toFixed(2))
|
||||
gridTemplate.cellRealHeight = Number((h / gridTemplate.rowCount).toFixed(2))
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
container = document.querySelector(containerStr)!
|
||||
ro.observe(container)
|
||||
})
|
||||
onUnmounted(() => {
|
||||
ro.unobserve(container)
|
||||
ro.disconnect()
|
||||
})
|
||||
|
||||
// 有桌面图标的app
|
||||
// const appInfos = processManager.processInfos.filter(processInfo => !processInfo.isJustProcess)
|
||||
const appInfos: IProcessInfo[] = []
|
||||
const oldAppIcons: IDesktopAppIcon[] = JSON.parse(localStorage.getItem('desktopAppIconInfo') || '[]')
|
||||
const appIcons: IDesktopAppIcon[] = appInfos.map((processInfo, index) => {
|
||||
const oldAppIcon = oldAppIcons.find(oldAppIcon => oldAppIcon.name === processInfo.name)
|
||||
|
||||
// 左上角坐标原点，从上到下从左到右 索引从1开始
|
||||
const x = index % gridTemplate.rowCount + 1
|
||||
const y = Math.floor(index / gridTemplate.rowCount) + 1
|
||||
|
||||
return {
|
||||
name: processInfo.name,
|
||||
icon: processInfo.icon,
|
||||
path: processInfo.startName,
|
||||
x: oldAppIcon ? oldAppIcon.x : x,
|
||||
y: oldAppIcon ? oldAppIcon.y : y
|
||||
}
|
||||
})
|
||||
|
||||
const appIconsRef = ref(appIcons)
|
||||
const exceedApp = ref<IDesktopAppIcon[]>([])
|
||||
|
||||
watch(() => [gridTemplate.colCount, gridTemplate.rowCount], ([nCols, nRows], [oCols, oRows]) => {
|
||||
// if (oCols == 1 && oRows == 1) return
|
||||
if (oCols === nCols && oRows === nRows) return
|
||||
const { appIcons, hideAppIcons } = rearrangeIcons(toRaw(appIconsRef.value), nCols, nRows)
|
||||
appIconsRef.value = appIcons
|
||||
exceedApp.value = hideAppIcons
|
||||
})
|
||||
|
||||
watch(() => appIconsRef.value, (appIcons) => {
|
||||
localStorage.setItem('desktopAppIconInfo', JSON.stringify(appIcons))
|
||||
})
|
||||
|
||||
return {
|
||||
gridTemplate,
|
||||
appIconsRef,
|
||||
gridStyle
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 重新安排图标位置
|
||||
* @param appIconInfos 图标信息
|
||||
* @param maxCol 列数
|
||||
* @param maxRow 行数
|
||||
*/
|
||||
function rearrangeIcons(
|
||||
appIconInfos: IDesktopAppIcon[],
|
||||
maxCol: number,
|
||||
maxRow: number
|
||||
): IRearrangeInfo {
|
||||
const occupied = new Set<string>();
|
||||
|
||||
function key(x: number, y: number) {
|
||||
return `${x},${y}`;
|
||||
}
|
||||
|
||||
const appIcons: IDesktopAppIcon[] = []
|
||||
const hideAppIcons: IDesktopAppIcon[] = []
|
||||
const temp: IDesktopAppIcon[] = []
|
||||
|
||||
for (const appIcon of appIconInfos) {
|
||||
const { x, y } = appIcon;
|
||||
|
||||
if (x <= maxCol && y <= maxRow) {
|
||||
if (!occupied.has(key(x, y))) {
|
||||
occupied.add(key(x, y))
|
||||
appIcons.push({ ...appIcon, x, y })
|
||||
}
|
||||
} else {
|
||||
temp.push(appIcon)
|
||||
}
|
||||
}
|
||||
|
||||
const max = maxCol * maxRow
|
||||
for (const appIcon of temp) {
|
||||
if (appIcons.length < max) {
|
||||
// 最后格子也被占 → 从 (1,1) 开始找空位
|
||||
let placed = false;
|
||||
for (let c = 1; c <= maxCol; c++) {
|
||||
for (let r = 1; r <= maxRow; r++) {
|
||||
if (!occupied.has(key(c, r))) {
|
||||
occupied.add(key(c, r));
|
||||
appIcons.push({ ...appIcon, x: c, y: r });
|
||||
placed = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (placed) break;
|
||||
}
|
||||
} else {
|
||||
// 放不下了
|
||||
hideAppIcons.push(appIcon)
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
appIcons,
|
||||
hideAppIcons
|
||||
};
|
||||
}
|
||||
|
||||
interface IRearrangeInfo {
|
||||
/** 正常的桌面图标信息 */
|
||||
appIcons: IDesktopAppIcon[];
|
||||
/** 隐藏的桌面图标信息(超出屏幕显示的) */
|
||||
hideAppIcons: IDesktopAppIcon[];
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 58 KiB |
@@ -1,15 +0,0 @@
|
||||
/**
|
||||
* 桌面应用图标信息
|
||||
*/
|
||||
export interface IDesktopAppIcon {
|
||||
/** 图标name */
|
||||
name: string;
|
||||
/** 图标 */
|
||||
icon: string;
|
||||
/** 图标路径 */
|
||||
path: string;
|
||||
/** 图标在grid布局中的列 */
|
||||
x: number;
|
||||
/** 图标在grid布局中的行 */
|
||||
y: number;
|
||||
}
|
||||
@@ -1,21 +0,0 @@
|
||||
/**
|
||||
* 桌面网格模板参数
|
||||
*/
|
||||
export interface IGridTemplateParams {
|
||||
/** 单元格预设宽度 */
|
||||
readonly cellExpectWidth: number
|
||||
/** 单元格预设高度 */
|
||||
readonly cellExpectHeight: number
|
||||
/** 单元格实际宽度 */
|
||||
cellRealWidth: number
|
||||
/** 单元格实际高度 */
|
||||
cellRealHeight: number
|
||||
/** 列间距 */
|
||||
gapX: number
|
||||
/** 行间距 */
|
||||
gapY: number
|
||||
/** 总列数 */
|
||||
colCount: number
|
||||
/** 总行数 */
|
||||
rowCount: number
|
||||
}
|
||||
@@ -1,10 +0,0 @@
|
||||
/**
|
||||
* 窗体位置坐标 - 左上角
|
||||
*/
|
||||
export interface WindowFormPos {
|
||||
x: number;
|
||||
y: number;
|
||||
}
|
||||
|
||||
/** 窗口状态 */
|
||||
export type TWindowFormState = 'default' | 'minimized' | 'maximized';
|
||||
Reference in New Issue
Block a user