Browse Source

add:移动端适配

master
tiantian 5 months ago
parent
commit
731054d371
  1. 12
      frontend/src/App.vue
  2. 42
      frontend/src/components/builtin/FileList.vue
  3. 54
      frontend/src/components/desktop/DeskItem.vue
  4. 17
      frontend/src/components/desktop/Desktop.vue
  5. 19
      frontend/src/components/window/MobileTemplate.vue
  6. 7
      frontend/src/components/window/WindowNode.vue

12
frontend/src/App.vue

@ -1,18 +1,18 @@
<script setup lang="ts">
import { System } from "@/system/index.ts";
import { onMounted} from "vue";
import { isMobileDevice } from "@/util/device";
import { onMounted } from "vue";
// import { isMobileDevice } from "@/util/device";
onMounted(() => {
new System();
isMobile.value = isMobileDevice();
// isMobile.value = isMobileDevice();
//console.log(isMobile.value);
});
const isMobile = ref<boolean>(false);
// const isMobile = ref<boolean>(false);
</script>
<template>
<screen v-if="!isMobile"/>
<mobile v-else></Mobile>
<screen />
<!-- <mobile v-else></Mobile> -->
</template>

42
frontend/src/components/builtin/FileList.vue

@ -32,7 +32,7 @@
@touchstart.passive="doubleTouch($event, item)"
@contextmenu.stop.prevent="handleRightClick($event, item, index)" @drop="hadnleDrop($event, item.path)"
@dragenter.prevent="handleDragEnter(index)" @dragover.prevent @dragleave="handleDragLeave()"
@dragstart.stop="startDragApp($event, item)" @click="handleClick(index)" @mousedown.stop :ref="(ref: any) => {
@dragstart.stop="startDragApp($event, item)" @click="handleClick(index, item)" @mousedown.stop :ref="(ref: any) => {
if (ref) {
appPositions[index] = markRaw(ref as Element);
}
@ -130,6 +130,7 @@ function getName(item: any) {
return name;
}
}
function handleOnOpen(item: OsFileWithoutContent) {
// props.onOpen(item);
// emitEvent('desktop.app.open');
@ -199,10 +200,16 @@ const hoverIndex = ref<number>(-1);
const appPositions = ref<Array<Element>>([]);
const chosenIndexs = ref<Array<number>>([]);
function handleClick(index: number) {
import { isMobileDevice } from "@/util/device";
const isMobile = ref<boolean>(false);
function handleClick(index: number, item: OsFileWithoutContent) {
chosenIndexs.value = [index];
if (isMobile.value) {
handleOnOpen(item)
}
}
onMounted(() => {
isMobile.value = isMobileDevice();
chosenIndexs.value = [];
props.onChosen(
throttle((rect: Rect) => {
@ -651,4 +658,35 @@ function handleDragLeave() {
background-color: unset;
user-select: none;
}
@media screen and (max-width: 768px) {
.file-item {
height: vh(70);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow: hidden;
&:hover {
background-color: transparent;
}
.icon {
width: vw(40);
height: vh(40);
}
.title {
font-size: vw(12);
text-align: center;
}
}
.chosen {
background-color: transparent;
border: 1px solid transparent;
}
}
</style>

54
frontend/src/components/desktop/DeskItem.vue

@ -1,10 +1,15 @@
<template>
<div class="desk-group">
<FileList
:on-chosen="props.onChosen"
:on-open="openapp"
:file-list="appList"
></FileList>
<div v-if="!isMobileDevice()" class="desk-group">
<FileList :on-chosen="props.onChosen" :on-open="openapp" :file-list="appList"></FileList>
</div>
<div v-else>
<swiper :modules="modules" :loop="true" :slides-per-view="1" :space-between="20"
:pagination="{ type: 'bullets', clickable: true }" class="swiperBox">
<swiper-slide class="swiper-slide">
<FileList :on-chosen="props.onChosen" :on-open="openapp" :file-list="appList"></FileList>
</swiper-slide>
<swiper-slide></swiper-slide>
</swiper>
</div>
</template>
<script lang="ts" setup>
@ -12,6 +17,14 @@ import { mountEvent } from "@/system/event";
import { useSystem } from "@/system/index.ts";
import { useAppOpen } from "@/hook/useAppOpen";
import { onMounted } from "vue";
import { isMobileDevice } from "@/util/device";
import { Swiper, SwiperSlide } from 'swiper/vue'
// swiper
import 'swiper/swiper-bundle.css';
// swiper
import { Pagination } from 'swiper/modules'
// modules使
const modules = [Pagination]
const { openapp, appList } = useAppOpen("apps");
const props = defineProps({
onChosen: {
@ -32,14 +45,33 @@ onMounted(() => {
flex-wrap: wrap;
height: 100%;
//
color: transparent; /* 文字颜色设为透明 */
text-shadow: 0 0 0.5px white, 0 0 1px black, 0 0 2px rgba(0, 0, 0, 2); /* 多层阴影 */
color: transparent;
/* 文字颜色设为透明 */
text-shadow: 0 0 0.5px white, 0 0 1px black, 0 0 2px rgba(0, 0, 0, 2);
/* 多层阴影 */
//
> * {
color: inherit; /* 继承颜色 */
text-shadow: inherit; /* 继承描边效果 */
>* {
color: inherit;
/* 继承颜色 */
text-shadow: inherit;
/* 继承描边效果 */
font-size: 0.8rem;
}
}
.swiperBox {
width: 100vw;
padding-top: vh(20);
// position: absolute;
// top:0;
// left: 0;
height: vh(560);
.swiper-slide {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(5, vh(100))
}
}
</style>

17
frontend/src/components/desktop/Desktop.vue

@ -1,13 +1,8 @@
<template>
<div
class="desktop"
@dragenter.prevent
@dragover.prevent
@drop="dragFileToDrop($event, `${system._options.userLocation}Desktop`)"
:style="{
<div class="desktop" @dragenter.prevent @dragover.prevent
@drop="dragFileToDrop($event, `${system._options.userLocation}Desktop`)" :style="{
filter: `brightness(${system._rootState.info.brightness * 2}%)`,
}"
>
}">
<div class="userarea" @contextmenu.stop="handleRightClick" @mousedown="userareaDown">
<div @mousedown="backgroundDown">
<DeskItem class="userarea-upper zhighher" :on-chosen="onChosen"></DeskItem>
@ -119,4 +114,10 @@ onErrorCaptured((err) => {
}
}
}
@media screen and (max-width: 768px) {
.bottom {
display: none;
}
}
</style>

19
frontend/src/components/window/MobileTemplate.vue

@ -0,0 +1,19 @@
<template>
<div class="mobile-template">
111
</div>
</template>
<script setup>
</script>
<style lang="scss" scoped>
.mobile-template {
position: absolute;
z-index: 9999;
width: 100vw;
height: 100vh;
background-color: #fff;
}
</style>

7
frontend/src/components/window/WindowNode.vue

@ -1,14 +1,13 @@
<template>
<Transition name="windowanimate" appear>
<WindowTemplate
v-if="window.windowInfo.isCreated"
:browser-window="window"
></WindowTemplate>
<WindowTemplate v-if="window.windowInfo.isCreated && !isMobileDevice()" :browser-window="window"></WindowTemplate>
<MobileTemplate v-else></MobileTemplate>
</Transition>
<WindowNode v-for="node in window.children" :key="node.id" :window="node" />
</template>
<script lang="ts" setup>
import { BrowserWindow } from "@/system/window/BrowserWindow";
import { isMobileDevice } from "@/util/device";
import { UnwrapNestedRefs } from "vue";
defineProps<{
window: UnwrapNestedRefs<BrowserWindow>;

Loading…
Cancel
Save