feat: finder part

src/core/apps/built-in/finder/finder-dir-block.vue

@@ -0,0 +1,92 @@
+<!--
+ * @Author: chenzhongsheng
+ * @Date: 2024-01-06 23:34:35
+ * @Description: Coding something
+-->
+<!--
+ * @Author: tackchen
+ * @Date: 2022-09-05 19:53:14
+ * @Description: Coding something
+-->
+<script setup lang="ts">
+import { createFinderStore } from './finder-store';
+import type { IFindMenuItem } from './finder-menu-data';
+const props = defineProps<{
+    id: number,
+    list: IFindMenuItem[],
+    title: string,
+    isTag?: boolean,
+    bgImage?: string,
+}>();
+const store = createFinderStore(props.id);
+
+const chooseItem = (item: any) => {
+    store.activeFinderItemName = item.name;
+};
+
+</script>
+
+<template>
+  <div class="left-title">{{ title }}</div>
+  <div class="finder-item-w flex flex-col mt-1">
+    <div
+      v-for="item in list" :key="item.name"
+      class="finder-item flex items-center"
+      :class="{active: store.activeFinderItemName===item.name}"
+      @click="chooseItem(item)"
+    >
+      <i
+        class="left-icon"
+        :class="{tag: isTag}"
+        :style="isTag ? {
+          backgroundColor: item.color,
+          border: `1px solid ${item.border || item.color}`
+        }: {
+          backgroundImage: `url(${bgImage})`,
+          'background-position-y': `-${item.posY}px`,
+        }"
+      />
+      <span class="left-name">{{ item.name }}</span>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+
+.left-title{
+    font-size: 12px;
+    color: #aaa;
+    font-weight: bold;
+    margin-top: 15px;
+    &:first-child{
+       margin-top: 0;
+    }
+}
+.left-icon{
+    width: 22px;
+    height: 22px;
+    background-size: 22px;
+    &.tag {
+        margin: 0 7px;
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+    }
+}
+.left-name{
+    font-size: 13px;
+    margin-left: 5px;
+}
+.finder-item-w{
+  gap: 2px;
+  padding-right: 10px;
+}
+.finder-item {
+    padding: 3px 2px;
+    border-radius: 5px;
+    &.active{
+        background-color: #fff2;
+    }
+}
+</style>
+

src/core/apps/built-in/finder/finder-header.vue

@@ -0,0 +1,29 @@
+<!--
+ * @Author: tackchen
+ * @Date: 2022-09-05 19:53:14
+ * @Description: Coding something
+-->
+<script setup lang="ts">
+import { createFinderStore } from './finder-store';
+
+const props = defineProps<{
+    id: number
+}>();
+const store = createFinderStore(props.id);
+</script>
+
+<template>
+  <div
+    class="flex items-center justify-between w-full h-full"
+  >
+    <div class="left-block  h-full" :style="{width: `${store.leftPanelWidth}px`}" />
+    <div class="flex-1 px-2 h-full flex items-center bg-header">
+      underDevelopment
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+@import url(./finder.less);
+</style>
+

src/core/apps/built-in/finder/finder-menu-data.ts

@@ -0,0 +1,97 @@
+
+let start = 7;
+const Pos = {
+    AirDrop: start,
+    Timer: start += 31,
+    App: start += 31,
+    Folder: start += 30,
+    Desktop: start += 93,
+    File: start += 31,
+    Download: start += 30,
+};
+
+export interface IFindMenuItem {
+    name: string,
+    posY?: number,
+    color?: string,
+    border?: string,
+}
+
+// todo 一部分数据存储到fileSystem
+export const faviList: IFindMenuItem[] = [
+    {
+        name: 'HomeDir',
+        posY: Pos.Folder,
+    },
+    {
+        name: 'AirDrop',
+        posY: Pos.AirDrop,
+    },
+    {
+        name: 'Recents',
+        posY: Pos.Timer,
+    },
+    {
+        name: 'Applications',
+        posY: Pos.App,
+    },
+    {
+        name: 'Desktop',
+        posY: Pos.Desktop,
+    },
+    {
+        name: 'Documents',
+        posY: Pos.File,
+    },
+    {
+        name: 'Downloads',
+        posY: Pos.Download,
+    },
+];
+
+export const iCloudList: IFindMenuItem[] = [
+    {
+        name: 'iCloud Drive',
+        posY: 0,
+    },
+    {
+        name: 'Shared',
+        posY: 25,
+    },
+];
+
+export const tagList: IFindMenuItem[] = [
+    {
+        name: 'Red',
+        color: '#ff5c53',
+    },
+    {
+        name: 'Orange',
+        color: '#faa513',
+    },
+    {
+        name: 'Yellow',
+        color: '#ffe118',
+    },
+    {
+        name: 'Green',
+        color: '#35db51',
+    },
+    {
+        name: 'Blue',
+        color: '#1c97ff',
+    },
+    {
+        name: 'Purple',
+        color: '#d771ff',
+    },
+    {
+        name: 'Gray',
+        color: '#92949b',
+    },
+    {
+        name: 'All',
+        color: 'transparent',
+        border: '#92949b',
+    },
+];

src/core/apps/built-in/finder/finder-store.ts

@@ -0,0 +1,17 @@
+/*
+ * @Author: theajack
+ * @Date: 2023-04-05 20:10:30
+ * @Description: Coding something
+ */
+import { defineStore } from 'pinia';
+import { createAppDataStore } from '@/ui/store/common';
+
+
+export const createFinderStore = createAppDataStore(id => {
+    return defineStore(`finder-store-${id}`, {
+        state: () => ({
+            leftPanelWidth: 150,
+            activeFinderItemName: '',
+        }),
+    });
+});

src/core/apps/built-in/finder/finder-ui.vue

@@ -1,24 +1,40 @@
+
 <!--
  * @Author: tackchen
  * @Date: 2022-09-05 19:53:14
  * @Description: Coding something
 -->
 <script setup lang="ts">
-
+import { resource } from '@/lib/utils';
+import { createFinderStore } from './finder-store';
+import FinderMenuBlock from './finder-dir-block.vue';
+import { faviList, iCloudList, tagList } from './finder-menu-data';
+const props = defineProps<{
+    id: number
+}>();
+const store = createFinderStore(props.id);
 </script>
 
 <template>
   <div class="flex-center text-white h-full">
-    In Development.
-    <!-- <iframe style="width: 400px; height: 300px;" src="https://github1s.com/" />
-      <iframe style="width: 400px; height: 300px;" src="https://bilibili.com/" />
-      <iframe style="width: 400px; height: 300px;" src="https://bing.com/" /> -->
-  </div>
-  <div class="flex-center text-white h-full">
-    Test ScrollBar.
+    <div class="left-block cursor-default select-none bg-header-op h-full" :style="{width: `${store.leftPanelWidth}px`}">
+      <FinderMenuBlock :id="id" :list="faviList" title="Favorites" :bg-image="resource('finder-icons.png')" />
+      <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="flex-1 px-2 h-full flex items-center bg-header">
+      underDevelopment
+    </div>
   </div>
 </template>
 
+
 <style scoped lang="less">
+@import url(./finder.less);
+.left-block{
+  padding-left: 10px;
+  overflow: auto;
+  padding-bottom: 10px;
+}
 </style>
 

src/core/apps/built-in/finder/finder.less

@@ -0,0 +1,7 @@
+
+.left-block{
+    box-shadow: 0px -3px 4px #111d;
+    position: relative;
+    z-index: 100;
+    background-color: rgba(56, 56, 56,.8);
+}

src/core/apps/built-in/finder/finder.ts

@@ -7,14 +7,23 @@ import { markRaw } from 'vue';
 import { App } from '../../app';
 import { AppNames, createEmptyStatus } from '../../app-config';
 import FinderUI from './finder-ui.vue';
+import FinderHeader from './finder-header.vue';
+import type { IWindowOptions } from '@/core/os/window/window';
 
 export class Finder extends App {
 
     statusMenu = createEmptyStatus('Finder');
 
-    newWindowOptions = markRaw({
+    newWindowOptions: IWindowOptions = markRaw({
         component: FinderUI,
-        height: 0.6
+        background: 'transparent',
+        height: 600,
+        width: 900,
+        header: {
+            component: FinderHeader,
+            height: 50,
+            bgColor: 'transparent'
+        }
     });
     constructor () {
         super({

src/core/apps/built-in/safari/safari-start.vue

@@ -243,7 +243,7 @@ function host (url: string) {
   border-radius: 10px;
 }
 .reading-item{
-  padding: 5px 15px;
+  padding: 10px;
   width: 32%;
 }
 </style>

src/core/apps/built-in/safari/safari-store.ts

@@ -8,6 +8,7 @@ import { isUrl } from '@/lib/utils';
 import { defineStore } from 'pinia';
 import { AppNames } from '../../app-config';
 import { underDevelopment } from '@/ui/components/common/toast/toast';
+import { createAppDataStore } from '@/ui/store/common';
 
 export interface IFavorite {
     name: string,
@@ -33,7 +34,7 @@ export interface ITabItem {
 
 export const DefaultPH = 'Search or enter website name';
 
-function createSingleStore (id: number) {
+export const createSafariStore = createAppDataStore((id: number) => {
     let pageId = 1;
     return defineStore(`safari-store-${id}`, {
         state: () => ({
@@ -194,17 +195,4 @@ function createSingleStore (id: number) {
             },
         }
     });
-}
-
-const storeMap: Record<number, ReturnType<typeof createSingleStore>> = {};
-
-export function createSafariStore (id: number) {
-
-    if (storeMap[id]) return storeMap[id]();
-
-    const useStore = createSingleStore(id);
-
-    storeMap[id] = useStore;
-
-    return useStore();
-}
+});