feat: add app dot、appType safari Loading & bugfix

theajack · Dec 27, 2023 · fdbcc93 · fdbcc93
1 parent 3a713db
commit fdbcc93
Show file tree

Hide file tree

Showing 18 changed files with 174 additions and 92 deletions.
diff --git a/src/core/apps/app-config.ts b/src/core/apps/app-config.ts
@@ -80,15 +80,15 @@ export function createDefaultApps ():
     let dockIndex = 1;
     return {
         [AppNames.github]: { name: AppNames.github, dockIndex: dockIndex++ },
+        [AppNames.terminal]: { name: AppNames.terminal, dockIndex: dockIndex++ },
         [AppNames.safari]: { name: AppNames.safari, dockIndex: dockIndex++ },
+        [AppNames.calculator]: { name: AppNames.calculator, dockIndex: dockIndex++ },
         [AppNames.wechat]: { name: AppNames.wechat, dockIndex: dockIndex++ },
         [AppNames.vscode]: { name: AppNames.vscode, dockIndex: dockIndex++ },
         [AppNames.meitu]: { name: AppNames.meitu, dockIndex: dockIndex++ },
         [AppNames.bilibili]: { name: AppNames.bilibili, dockIndex: dockIndex++ },
         [AppNames.qqmusic]: { name: AppNames.qqmusic, dockIndex: dockIndex++ },
         [AppNames.kwai]: { name: AppNames.kwai, dockIndex: dockIndex++ },
-        [AppNames.terminal]: { name: AppNames.terminal, dockIndex: dockIndex++ },
-        [AppNames.calculator]: { name: AppNames.calculator, dockIndex: dockIndex++ },
         [AppNames.finder]: { name: AppNames.finder, dockIndex: dockIndex++ },
         [AppNames.launcher]: { name: AppNames.launcher, dockIndex: dockIndex++ },
         [AppNames.appStore]: { name: AppNames.appStore, dockIndex: dockIndex++ },

diff --git a/src/core/apps/app.ts b/src/core/apps/app.ts
@@ -12,7 +12,13 @@ import { appNameToTitle } from './app-config';
 import type { AppManager } from './app-manager';
 import type { IAppStatus, IApp, IAppMessageBase, IAppMessage } from './type';
 import { markRaw, type App as VueApp } from 'vue';
-import { cache, handleComponent, resource } from '@/lib/utils';
+import { cache, handleComponent, appIcon } from '@/lib/utils';
+
+export enum AppType {
+    Normal,
+    Web,
+    Link,
+}
 
 export interface IAppOptions {
     name?: string;
@@ -21,8 +27,10 @@ export interface IAppOptions {
     iconScale?: number|boolean;
     title?: string;
     status?: IAppStatus;
-    jumpUrl?: string;
+    link?: string;
+    msgCount?: number;
     onMessage?: (data: IAppMessage) => void;
+    appType?: AppType;
 }
 export class App implements IApp {
     name: string;
@@ -33,15 +41,17 @@ export class App implements IApp {
     title: string;
     status: IAppStatus;
     manager: AppManager;
-    jumpUrl: string;
+    link: string;
     iconScale: number;
+    msgCount: number; // 小红点数量
     onMessage?: (data: IAppMessage) => void;
 
     windows: Window[] = [];
 
     isRunning = false;
 
     canBackground = false;
+    appType: AppType;
 
     constructor ({
         name = '',
@@ -51,15 +61,21 @@ export class App implements IApp {
         title = '',
         status = {} as any,
         onMessage,
-        jumpUrl = '',
+        link = '',
+        msgCount = 0,
+        appType = AppType.Normal,
     }: IAppOptions) {
-        this.jumpUrl = jumpUrl;
+        this.link = link;
+        if (link) appType = AppType.Link;
         this.name = name;
+        this.status = status;
+        this.msgCount = msgCount;
+        this.appType = appType;
+
         this.manager = OS.instance.appManager;
-        this.icon = icon || resource(`icons/${name}.png`);
+        this.icon = icon || appIcon(name);
         this.iconRadius = iconRadius < 1 ? `${iconRadius * 100}%` : `${iconRadius}px`;
         this.title = title || appNameToTitle(name);
-        this.status = status;
         this.iconScale = typeof iconScale === 'number' ? iconScale : (iconScale ? 1.22 : 1);
         this.onMessage = onMessage;
 
@@ -90,8 +106,8 @@ export class App implements IApp {
     }
 
     onOpen () {
-        if (this.jumpUrl) {
-            window.open(this.jumpUrl);
+        if (this.link) {
+            window.open(this.link);
         } else {
             // todo
             toast({

diff --git a/src/core/apps/built-in/calculator/cal-core.ts b/src/core/apps/built-in/calculator/cal-core.ts
@@ -63,11 +63,11 @@ export function createCalculator () {
     let text = '0';
     const changeList: ((v: string)=>void)[] = [];
 
-    const setText = (v: string|number) => {
+    const setText = (v: string|number, fromAc = false) => {
         if (typeof v === 'number') v = v.toString();
         text = v;
         changeList.forEach(f => {f(text);});
-        setAC(false);
+        if (!fromAc) setAC(false);
         return v;
     };
 
@@ -102,7 +102,7 @@ export function createCalculator () {
                 setAC(true);
             } break;
             case 'AC': {
-                setText('0');
+                setText('0', true);
                 queue = [ E ];
                 setCurSign('');
             } break;

diff --git a/src/core/apps/built-in/calculator/calculator.ts b/src/core/apps/built-in/calculator/calculator.ts
@@ -11,11 +11,13 @@ export class Calculator extends App {
 
     constructor () {
         super({
-            name: AppNames.calculator
+            name: AppNames.calculator,
+            msgCount: 1,
         });
     }
 
     onOpen (): void {
+        this.msgCount = 0;
         this.openNewWindow({
             component: CalculatorUI,
             width: 250,

diff --git a/src/core/apps/built-in/github.ts b/src/core/apps/built-in/github.ts
@@ -11,7 +11,7 @@ export class Github extends App {
     constructor () {
         super({
             name: AppNames.github,
-            jumpUrl: 'https://github.com/theajack/mac',
+            link: 'https://github.com/theajack/mac',
         });
     }
 }
diff --git a/src/core/apps/built-in/prefer.ts b/src/core/apps/built-in/prefer.ts
@@ -10,7 +10,12 @@ export class SystemPreferences extends App {
 
     constructor () {
         super({
-            name: AppNames.systemPreferences
+            name: AppNames.systemPreferences,
+            msgCount: 3,
         });
     }
+    onOpen (): void {
+        super.onOpen();
+        this.msgCount = 0;
+    }
 }
diff --git a/src/core/apps/built-in/safari/safari-ui.vue b/src/core/apps/built-in/safari/safari-ui.vue
@@ -8,6 +8,7 @@ import { createSafariStore, 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 { ref } from 'vue';
 const props = defineProps<{
     status: IWindowStatus
 }>();
@@ -29,6 +30,7 @@ const {
     }
 });
 
+const loaded = ref(false);
 
 function clickTab (item: ITabItem) {
     store.setActiveId(item.id);
@@ -74,11 +76,14 @@ function clickTab (item: ITabItem) {
         class="h-full"
       >
         <SafariStart v-if="item.isStart" :id="status.id" />
-        <iframe
-          v-else-if="!item.fromPrev"
-          class="w-full h-full"
-          :src="item.url" frameborder="0"
-        />
+        <div v-else class="w-full h-full flex-center">
+          <i v-show="!loaded" class="absolute-center text-2xl mr-2 ei-spinner-snake ei-spin" />
+          <iframe
+            class="w-full h-full"
+            :src="item.url"
+            frameborder="0" @loadeddata="loaded = true"
+          />
+        </div>
       </div>
     </div>
   </div>

diff --git a/src/core/apps/built-in/safari/safari.ts b/src/core/apps/built-in/safari/safari.ts
@@ -15,7 +15,8 @@ export class Safari extends App {
 
     constructor () {
         super({
-            name: AppNames.safari
+            name: AppNames.safari,
+            msgCount: 1,
         });
 
         MacEvent.on('new-window', async ({ name, data }) => {
@@ -31,6 +32,7 @@ export class Safari extends App {
     }
 
     async onOpen () {
+        this.msgCount = 0;
         return await this.openNewWindow({
             component: SafariUI,
             header: {

diff --git a/src/core/apps/built-in/terminal.ts b/src/core/apps/built-in/terminal.ts
@@ -16,6 +16,7 @@ export class Terminal extends App {
         super({
             name: AppNames.terminal,
             status,
+            msgCount: 1,
         });
     }
 
@@ -25,5 +26,6 @@ export class Terminal extends App {
             height: 500,
         });
         createTerm({ container: window.dom });
+        this.msgCount = 0;
     }
 }
diff --git a/src/core/apps/built-in/trash.ts b/src/core/apps/built-in/trash.ts
@@ -3,6 +3,7 @@
  * @Date: 2022-09-22 11:22:43
  * @Description: Coding something
  */
+import { appIcon } from '@/lib/utils';
 import { App } from '../app';
 import { AppNames } from '../app-config';
 
@@ -12,5 +13,13 @@ export class Trash extends App {
             iconRadius: 0,
             name: AppNames.trash
         });
+        this.fullTrash();
+    }
+
+    fullTrash () {
+        this.icon = appIcon('trash-full');
+    }
+    emptyTrash () {
+        this.icon = appIcon(this.name);
     }
 }
diff --git a/src/core/apps/third/wechat.ts b/src/core/apps/third/wechat.ts
@@ -12,6 +12,11 @@ export class WeChat extends WebApp {
         super({
             name: AppNames.wechat,
             url: 'https://wx.qq.com/',
+            msgCount: 99,
         });
     }
+    onOpen (): void {
+        super.onOpen();
+        this.msgCount = 0;
+    }
 }
diff --git a/src/core/apps/web-app.ts b/src/core/apps/web-app.ts
@@ -5,15 +5,15 @@
  */
 import type { IWindowOptions } from '../os/window/window';
 import type { IAppOptions } from './app';
-import { App } from './app';
+import { App, AppType } from './app';
 import WebWindow from '@/ui/components/common/window/web-window-body.vue';
 
 export class WebApp extends App {
     url: string;
     constructor (options: IAppOptions & {
         url: string,
     }) {
-        super(options);
+        super(Object.assign(options, { appType: AppType.Web }));
         this.url = options.url;
     }
     onOpen (): void {

diff --git a/src/lib/utils.ts b/src/lib/utils.ts
@@ -193,6 +193,10 @@ export function resource (name: string) {
     return `${base}assets/${name}`;
 }
 
+export function appIcon (name: string) {
+    return resource(`icons/${name}.png`);
+}
+
 export function handleComponent (data: any) {
     if (data?.component) {
         data.component = markRaw(data.component);

diff --git a/src/ui/components/app-block.vue b/src/ui/components/app-block.vue
@@ -0,0 +1,63 @@
+<!--
+ * @Author: tackchen
+ * @Date: 2022-09-05 19:53:14
+ * @Description: Coding something
+-->
+<script setup lang="ts">
+import { AppType, type App } from '@/core/apps/app';
+
+defineEmits([ 'click' ]);
+
+defineProps<{
+    app: App,
+    height: number,
+}>();
+</script>
+
+<template>
+  <div class="app-block">
+    <span v-show="app.msgCount > 0" class="app-msg">{{ app.msgCount }}</span>
+    <i v-if="app.appType===AppType.Link" class="el-link" />
+    <i v-else-if="app.appType===AppType.Web" class="ei-chrome" />
+    <img
+      :src="app.icon"
+      :style="{
+        'border-radius': app.iconRadius,
+        scale: app.iconScale,
+        height: height+'px'
+      }"
+      @click="$emit('click')"
+    >
+  </div>
+</template>
+
+<style lang="less">
+.app-block{
+    position: relative;
+    img{
+        filter: drop-shadow(1px 1px 1px #2229) drop-shadow(-1px 1px 1px #2229);
+    }
+    .app-msg, i{
+        position: absolute;
+        z-index: 1;
+    }
+    i{
+        filter: drop-shadow(1px 1px 1px #222d) drop-shadow(-1px 1px 1px #222d);
+        right: -3px;
+        bottom: -1px;
+        font-size: 12px;
+    }
+    .app-msg{
+        background-color: rgb(237,57,47);
+        font-size: 12px;
+        line-height: 12px;
+        min-width: 18px;
+        border-radius: 10px;
+        padding: 3px 4px;
+        text-align: center;
+        right: -5px;
+        box-shadow: 1px 1px 1px #2229;
+        top: -5px
+    }
+}
+</style>
diff --git a/src/ui/components/common/window/web-window-body.vue b/src/ui/components/common/window/web-window-body.vue
@@ -6,23 +6,26 @@
 <script setup lang="ts">
 
 import type { IWindowStatus } from '@/core/os/window/window';
+import { ref } from 'vue';
 defineProps<{
     status: IWindowStatus
 }>();
+const loaded = ref(false);
 </script>
 
 <template>
   <div class="h-full w-full relative bg-gray">
-    <span class="absolute-center flex-center">
-      <i class="text-4xl mr-2 ei-spinner-snake ei-spin" />
+    <span v-show="!loaded" class="absolute-center flex-center">
+      <i class="text-2xl mr-2 ei-spinner-snake ei-spin" />
       <!-- <span class="text-xl">Loading...</span> -->
     </span>
-    <iframe :src="status.url" class="window-iframe" />
+    <iframe :src="status.url" class="window-iframe" @loadeddata="loaded = true" />
   </div>
 </template>
 
 <style scoped lang="less">
 .window-iframe{
+  user-select: none;
   position: relative;
   width: 100%;
   height: 100%;