feat: finder 选中效果

theajack · Jan 15, 2024 · 5819a64 · 5819a64
1 parent e8a5532
commit 5819a64
Show file tree

Hide file tree

Showing 11 changed files with 121 additions and 25 deletions.
diff --git a/src/core/apps/built-in/finder/finder-dir-block.vue b/src/core/apps/built-in/finder/finder-dir-block.vue
@@ -9,7 +9,7 @@
  * @Description: Coding something
 -->
 <script setup lang="ts">
-import { createFinderStore } from './js/finder-store';
+import { useFinderStore } from './js/finder-store';
 import type { IFindMenuItem } from './js/finder-menu-data';
 const props = defineProps<{
     id: number,
@@ -18,7 +18,7 @@ const props = defineProps<{
     isTag?: boolean,
     bgImage?: string,
 }>();
-const store = createFinderStore(props.id);
+const store = useFinderStore(props.id);
 
 const chooseItem = (item: any) => {
     store.activeFinderItemName = item.name;

diff --git a/src/core/apps/built-in/finder/finder-file-item.vue b/src/core/apps/built-in/finder/finder-file-item.vue
@@ -6,7 +6,7 @@
 -->
 <script setup lang="ts">
 import { resource } from '@/lib/utils';
-import type { IFileInfo } from './js/finder-store';
+import { useFinderStore, type IFileInfo } from './js/finder-store';
 import { useContextMenuRef } from '@/ui/components/common/context-menu/context-menu';
 import { FileMenu, FolderMenu } from './js/finder-context-menu';
 const props = defineProps<{
@@ -15,10 +15,34 @@ const props = defineProps<{
 }>();
 const img = resource(props.file.isDir ? 'folder.png' : 'file.png');
 const { contextmenu } = useContextMenuRef(props.file.isDir ? FolderMenu : FileMenu);
+
+const store = useFinderStore(props.id);
+
+const fileContextMenu = (e: MouseEvent) => {
+    store.chooseSingleFile(props.file.id);
+    contextmenu(e);
+};
+
+// // 选择文件
+// const clickFile = (e: MouseEvent) => {
+//     if (e.metaKey || e.ctrlKey) {
+//         // 多选
+//     } else {
+
+//     }
+// };
+
 </script>
 
 <template>
-  <div class="file-item flex-center flex-col" :data-dir="file.isDir" @contextmenu.capture.stop="contextmenu">
+  <div
+    class="file-item items-start flex-col"
+    :class="{active: store.activeIds.has(file.id)}"
+    :data-dir="file.isDir"
+    :data-id="file.id"
+    data-type="file"
+    @contextmenu.capture.stop="fileContextMenu"
+  >
     <img :src="img" alt="">
     <div class="file-name">{{ file.name }}</div>
   </div>
@@ -30,6 +54,32 @@ const { contextmenu } = useContextMenuRef(props.file.isDir ? FolderMenu : FileMe
     width: 70px;
     height: 90px;
     user-select: none;
+    height: fit-content;
+    * {
+        pointer-events: none;
+    }
+    img{
+        padding: 3px;
+        border-radius: 5px;
+    }
+    .file-name{
+        width: 100%;
+        text-align: center;
+        margin-top: 3px;
+        border-radius: 5px;
+        padding: 2px 5px;
+        flex-shrink: 0;
+        word-break: break-all;
+    }
+    &.active{
+        img{
+            background-color: #fff2;
+        }
+        .file-name{
+            background-color: #2458ca;
+        }
+
+    }
 }
 </style>
 

diff --git a/src/core/apps/built-in/finder/finder-header.vue b/src/core/apps/built-in/finder/finder-header.vue
@@ -5,9 +5,9 @@
 -->
 <script setup lang="ts">
 import type { IWindowCompProp } from '@/core/os/window/window';
-import { createFinderStore } from './js/finder-store';
+import { useFinderStore } from './js/finder-store';
 const props = defineProps<IWindowCompProp>();
-const store = createFinderStore(props.id);
+const store = useFinderStore(props.id);
 </script>
 
 <template>

diff --git a/src/core/apps/built-in/finder/finder-ui.vue b/src/core/apps/built-in/finder/finder-ui.vue
@@ -6,18 +6,41 @@
 -->
 <script setup lang="ts">
 import { resource } from '@/lib/utils';
-import { createFinderStore } from './js/finder-store';
+import { useFinderStore } from './js/finder-store';
 import FinderMenuBlock from './finder-dir-block.vue';
 import FinderFile from './finder-file-item.vue';
 import { faviList, iCloudList, tagList } from './js/finder-menu-data';
 import { useContextMenuRef } from '@/ui/components/common/context-menu/context-menu';
 import { MainFinderMenu } from './js/finder-context-menu';
 import type { IWindowCompProp } from '@/core/os/window/window';
 const props = defineProps<IWindowCompProp>();
-const store = createFinderStore(props.id);
-
+const store = useFinderStore(props.id);
+// todo 滑动选择多个
 const { contextmenu } = useContextMenuRef(MainFinderMenu);
+const clickFinder = (e: MouseEvent) => {
+    const el = e.target as HTMLElement;
+
+    const type = el.dataset.type;
 
+    switch (type) {
+        case 'finder':
+            store.activeIds.clear();
+            break;
+        case 'file':
+            const id = parseInt(el.dataset.id as string);
+            if (e.metaKey || e.ctrlKey) {
+                if (store.activeIds.has(id)) {
+                    store.activeIds.delete(id);
+                } else {
+                    store.activeIds.add(id);
+                }
+            } else {
+                store.chooseSingleFile(id);
+            }
+            break;
+        default: return;
+    }
+};
 </script>
 
 <template>
@@ -30,8 +53,16 @@ const { contextmenu } = useContextMenuRef(MainFinderMenu);
       <FinderMenuBlock :id="id" :list="iCloudList" title="iClouds" :bg-image="resource('finder-icons-2.png')" />
       <FinderMenuBlock :id="id" :list="tagList" title="Tags" :is-tag="true" />
     </div>
-    <div class="right-block flex-1 h-full flex bg-header overflow-auto" @contextmenu.stop="contextmenu">
-      <div class="flex gap-8 flex-wrap h-fit flex-1 p-8">
+    <div
+      data-type="finder"
+      class="right-block flex-1 h-full flex bg-header overflow-auto"
+      @click="clickFinder"
+      @contextmenu.stop="contextmenu"
+    >
+      <div
+        data-type="finder"
+        class="flex gap-8 flex-wrap h-fit flex-1 p-8"
+      >
         <FinderFile
           v-for="item in store.curDirInfo"
           :id="id"

diff --git a/src/core/apps/built-in/finder/js/finder-store.ts b/src/core/apps/built-in/finder/js/finder-store.ts
@@ -16,28 +16,29 @@ export interface IFileInfo {
     kind: string,
 }
 
-export const createFinderStore = createAppDataStore(id => {
+export const useFinderStore = createAppDataStore(id => {
     return defineStore(`finder-store-${id}`, {
         state: () => {
             let id = 0;
             return {
                 leftPanelWidth: 150,
                 activeFinderItemName: '',
                 curDirName: 'Home Dir',
+                activeIds: new Set() as Set<number>,
                 curDirInfo: [
                     {
                         id: id++,
                         name: 'test1',
                         isDir: true
                     }, {
                         id: id++,
-                        name: 'test2',
-                        isDir: false
+                        name: 'looooooooooooooooog name test',
+                        isDir: true
                     },
                     {
                         id: id++,
                         name: 'test1',
-                        isDir: true
+                        isDir: false
                     }, {
                         id: id++,
                         name: 'test2',
@@ -46,7 +47,7 @@ export const createFinderStore = createAppDataStore(id => {
                     {
                         id: id++,
                         name: 'test1',
-                        isDir: true
+                        isDir: false
                     }, {
                         id: id++,
                         name: 'test2',
@@ -100,5 +101,11 @@ export const createFinderStore = createAppDataStore(id => {
                 ] as IFileInfo[]
             };
         },
+        actions: {
+            chooseSingleFile (id: number) {
+                this.activeIds.clear();
+                this.activeIds.add(id);
+            }
+        }
     });
 });
diff --git a/src/core/apps/built-in/safari/safari-header.vue b/src/core/apps/built-in/safari/safari-header.vue
@@ -5,14 +5,14 @@
 -->
 <script setup lang="ts">
 import { ref, watch } from 'vue';
-import { createSafariStore } from './safari-store';
+import { useSafariStore } from './safari-store';
 import type { IWindowStatus } from '@/core/os/window/window';
 import { underDevelopment } from '@/ui/components/common/toast/toast';
 
 const props = defineProps<{
     status: IWindowStatus
 }>();
-const store = createSafariStore(props.status.id);
+const store = useSafariStore(props.status.id);
 const queryInput = ref();
 const widthEle = ref();
 function queryKeyDown (e: KeyboardEvent) {

diff --git a/src/core/apps/built-in/safari/safari-start.vue b/src/core/apps/built-in/safari/safari-start.vue
@@ -5,12 +5,12 @@
 -->
 <script setup lang="ts">
 import { resource } from '@/lib/utils';
-import { createSafariStore, type IFavorite } from './safari-store';
+import { useSafariStore, type IFavorite } from './safari-store';
 import FaviIcon from './favi-icon.vue';
 const props = defineProps<{
     id: number
 }>();
-const store = createSafariStore(props.id);
+const store = useSafariStore(props.id);
 
 const favoritesList: IFavorite[] = [
     {

diff --git a/src/core/apps/built-in/safari/safari-store.ts b/src/core/apps/built-in/safari/safari-store.ts
@@ -34,7 +34,7 @@ export interface ITabItem {
 
 export const DefaultPH = 'Search or enter website name';
 
-export const createSafariStore = createAppDataStore((id: number) => {
+export const useSafariStore = createAppDataStore((id: number) => {
     let pageId = 1;
     return defineStore(`safari-store-${id}`, {
         state: () => ({

diff --git a/src/core/apps/built-in/safari/safari-ui.vue b/src/core/apps/built-in/safari/safari-ui.vue
@@ -4,15 +4,15 @@
  * @Description: Coding something
 -->
 <script setup lang="ts">
-import { createSafariStore, type ITabItem } from './safari-store';
+import { useSafariStore, type ITabItem } from './safari-store';
 import SafariStart from './safari-start.vue';
 import { createDragScope } from '@/ui/lib/drag-scope';
 import type { IWindowStatus } from '@/core/os/window/window';
 import IFrame from '@/ui/components/common/iframe.vue';
 const props = defineProps<{
     status: IWindowStatus
 }>();
-const store = createSafariStore(props.status.id);
+const store = useSafariStore(props.status.id);
 
 const TabHeight = 28;
 

diff --git a/src/core/apps/built-in/safari/safari.ts b/src/core/apps/built-in/safari/safari.ts
@@ -8,7 +8,7 @@ import { AppNames, createEmptyStatus } from '../../app-config';
 import SafariUI from './safari-ui.vue';
 import SafariHeader from './safari-header.vue';
 import { MacEvent } from '@/core/os/event-bus';
-import { createSafariStore } from './safari-store';
+import { useSafariStore } from './safari-store';
 import { markRaw, nextTick } from 'vue';
 
 export class Safari extends App {
@@ -33,7 +33,7 @@ export class Safari extends App {
             if (name === this.name) {
                 const window = this.openNewWindow();
                 await nextTick();
-                const store = createSafariStore(window.id);
+                const store = useSafariStore(window.id);
                 store.initNewWindow(data);
                 // await nextTick();
                 // document.getElementById(`SAFARI_ITEM_${window.id}_${data.id}`)?.appendChild(iframe);

diff --git a/src/ui/style/tailwind-output.css b/src/ui/style/tailwind-output.css
@@ -544,6 +544,10 @@ video {
   --tw-backdrop-sepia:  ;
 }
 
+.pointer-events-none {
+  pointer-events: none;
+}
+
 .visible {
   visibility: visible;
 }
@@ -709,6 +713,10 @@ video {
   flex-wrap: wrap;
 }
 
+.items-start {
+  align-items: flex-start;
+}
+
 .items-center {
   align-items: center;
 }