feat: 苹果控制条

src/App.vue

@@ -4,38 +4,90 @@
 import {onMounted, ref} from "vue";
 import MacWindow from "./components/window/macWindow.vue";
 import MagnetView from "./components/magnetView.vue";
+import AppleBar from "@/components/appleBar/appleBar.vue";
+import {NavItem} from "@/components/appleBar/appleBar.ts";
 
 onMounted(() => {
 
 });
 
+let navItems:NavItem[] = [
+  {
+    id: 1,
+    name: '首页',
+    actionCode: 'toHome',
+    description: '返回首页',
+    icon: 'system',
+  },
+  {
+    id: 1,
+    name: '首页',
+    actionCode: 'toHome',
+    description: '返回首页',
+    icon: 'home',
+  },
+  {
+    id: 1,
+    name: '首页',
+    actionCode: 'toHome',
+    description: '返回首页',
+    icon: 'setting',
+  },
+]
 
 const title = ref("fc-ele");
 
+const navAction = (actionCode:string) => {
+  console.log(`action: ${actionCode}`);
+}
 </script>
 
 <template>
   <mac-window :title="title" :icon="'home'">
-    <magnet-view>
-    </magnet-view>
+    <div class="image-bg">
+      <img src="./assets/images/bg.jpg" alt="">
+    </div>
+    <div class="app-bar">
+      <apple-bar
+          :nav-items="navItems"
+          :hide-time="3000"
+          @action="navAction"
+      ></apple-bar>
+    </div>
+    <div class="app-content">
+      <magnet-view/>
+    </div>
+
   </mac-window>
 </template>
 
 <style scoped>
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
 
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
+.app-content {
+  width: 100%;
+  height: 100%;
+  background-color: var(--color-background-soft);
+  overflow: auto;
 }
-
-.logo.vue:hover {
-  filter: drop-shadow(0 0 2em #42b883aa);
+.app-bar{
+  width: 100%;
+  height: 70px;
+  display: flex;
+  justify-content: center;
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  z-index: 1000;
 }
 
+@media screen and (max-width: 768px) {
+  .app-content {
+    height: calc(100% - 50px);
+  }
+  .app-bar {
+    position: relative;
+    bottom: 0;
+  }
+}
 
 </style>

src/assets/base.css

@@ -1,3 +1,6 @@
+
+
+
 .drag{
     -webkit-app-region: drag;
 }
@@ -64,7 +67,7 @@
 .control-box .close{
     background-color: #e74c3c;
 }
-.control-box .btn .showTip{
+.showTip{
     position: absolute;
     display: block;
     width: 90px;
@@ -81,11 +84,28 @@
     border-radius: 5px;
     opacity: 0;
     transition: all 0.3s;
+    z-index: 10;
 }
-.control-box .btn:hover .showTip{
+.showTopTip:hover .showTip{
     top: 30px;
     opacity: 1;
 }
+.showCenterTip:hover .showTip{
+    top: -25px;
+    right: -50%;
+    opacity: 1;
+    z-index: 10;
+}
+
+.noScroll::-webkit-scrollbar {
+    display: none; /* Chrome Safari */
+}
+
+.noScroll {
+    scrollbar-width: none; /* firefox */
+    -ms-overflow-style: none; /* IE 10+ */
+}
+
 
 .window-content{
     width: 100%;
@@ -95,5 +115,52 @@
     /*    允许被点击*/
 }
 
+/* 更细的滚动条 */
+.scroll::-webkit-scrollbar {
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 11px;
+    height: 11px;
+    background-color:  rgba(0, 0, 0, 0.2);
+}
+.scroll::-webkit-scrollbar-track {
+    display: none;
+    border-radius: 10px;
+    background-color: rgba(0, 0, 0, 0.2);
+    opacity: 0;
+    color: transparent;
+}
+
+.scroll::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    background-color: #4B5563;
+    border: 2px solid transparent;
+    background-clip: padding-box;
+}
+
+/*.scroll::-webkit-scrollbar {*/
+/*    width: 4px;*/
+/*    height: 4px;*/
+/*}*/
 
+.scroll::-webkit-scrollbar:hover {
+    width: 7px;
+    height: 7px;
+}
 
+
+.image-bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+.image-bg img{
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    object-position: center;
+}

src/assets/svg/system.svg

@@ -0,0 +1 @@
+<svg t="1637928171784" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11261" width="200" height="200"><path d="M947.188 835.927l-50.079-35.055c-18.559-12.992-56.418-22.725-85.694-22.725H585.19v-79.844h288.761c2.2 0 4-1.8 4-4V156.702c0-2.2-1.8-4-4-4H176.663c-2.2 0-4 1.8-4 4v537.601c0 2.2 1.8 4 4 4h302.069v79.844H212.585c-29.276 0-67.134 9.734-85.694 22.725l-50.079 35.055c-26.411 18.488-17.538 35.371 22.786 35.371h824.803c40.324 0 49.198-16.883 22.787-35.371zM427.175 491.008a16.001 16.001 0 0 1-27.018 4.917l-66.792-76.29-30.074 34.372a16.002 16.002 0 0 1-12.042 5.464h-38.742c-8.836 0-16-7.164-16-16s7.164-16 16-16h31.481l37.331-42.666a16 16 0 0 1 24.08-0.004l61.215 69.92 60.521-161.261a16 16 0 0 1 30.347 1.168l41.855 144.388c0.045 0.156 0.088 0.313 0.128 0.47l17.727 68.934 53.023-135.33a16.001 16.001 0 0 1 14.896-10.163h0.1a16 16 0 0 1 14.87 10.347l35.146 93.072 36.371-46.095a16 16 0 0 1 12.561-6.089H784.8c8.837 0 16 7.164 16 16s-7.163 16-16 16h-52.885l-49.098 62.224a16 16 0 1 1-27.529-4.259l-30.451-80.64-55.913 142.705a16 16 0 0 1-30.393-1.852l-29.996-116.649-28.371-97.873-52.989 141.19z" p-id="11262"></path></svg>

src/assets/svg/user.svg

@@ -0,0 +1 @@
+<svg t="1702880727120" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4238" width="200" height="200"><path d="M960.8 710.4l-17.9-40.3a4 4 0 0 0-4.7-2.2l-53.7 14.6-31-31 14.6-53.7a4 4 0 0 0-2.2-4.7l-40.3-17.9a4 4 0 0 0-5 1.6l-29.3 48.8h-41.4l-29.3-48.8a4 4 0 0 0-5-1.6l-40.5 18a4 4 0 0 0-2.3 4.4l9.7 53.9-31 31-53.7-14.6a4 4 0 0 0-4.7 2.2l-17.9 40.3a4 4 0 0 0 1.6 5l48.8 29.3v41.4l-48.8 29.3a4 4 0 0 0-1.6 5l18 40.5a4 4 0 0 0 4.4 2.3l53.9-9.7 31 31-14.6 53.7a4 4 0 0 0 2.2 4.7l40.3 17.9a4 4 0 0 0 5-1.6l29.3-48.8h41.4l29.3 48.8a4 4 0 0 0 5 1.6l40.3-17.9a4 4 0 0 0 2.2-4.7l-14.6-53.7 31-31 53.7 14.6a4 4 0 0 0 4.7-2.2l18.1-40.7a4 4 0 0 0-1.2-4.7l-44.2-34.4v-41.4l48.8-29.3a4 4 0 0 0 1.6-5zM768.2 846a78 78 0 1 1 78-78 78 78 0 0 1-78 78z m5.8-504c0-144.7-117.3-262-262-262S250 197.3 250 342a261.7 261.7 0 0 0 117.4 218.5c-140 57.4-239.3 195.4-239.3 355.5v25.5a4 4 0 0 0 4 4h64a4 4 0 0 0 4-4V916a307.1 307.1 0 0 1 24.6-120.9 315.1 315.1 0 0 1 166.4-166.5A307.9 307.9 0 0 1 512 604c144.7 0 262-117.3 262-262zM512 532a189.8 189.8 0 1 1 134.4-55.6A189.1 189.1 0 0 1 512 532z" p-id="4239"></path></svg>

src/components/appleBar/appleBar.ts

@@ -0,0 +1,8 @@
+export interface NavItem {
+    id: number,
+    name: string,
+    actionCode: string,
+    description: string,
+    icon: string,
+}
+

src/components/appleBar/appleBar.vue

@@ -0,0 +1,203 @@
+<script setup lang="ts">
+import {ref, onMounted} from 'vue'
+import type{PropType} from 'vue'
+import type{NavItem} from './appleBar.ts'
+
+let hideTimer:NodeJS.Timeout;
+
+let isHidden = ref(true);
+
+
+
+let props = defineProps({
+//   是否全屏
+  isFullScreen: {
+    type: Boolean,
+    default: false
+  },
+//   导航项
+  navItems:  {
+    type: Array as PropType<NavItem[]>,
+    default: ():NavItem[] => []
+  },
+  hideTime: {
+    type: Number,
+    default: 3000
+  }
+});
+
+
+onMounted(() => {
+  startHideTimer();
+})
+
+
+
+
+const emits = defineEmits<{
+  (e: 'action', actionCode: string): void
+}>()
+
+/**
+ * 用户交互时，重置隐藏计时器
+ */
+function barActiveHandle(): void{
+  isHidden.value = false;
+  if(hideTimer){
+    clearTimeout(hideTimer);
+  }
+}
+
+
+// 倒计时
+function startHideTimer(){
+  if(hideTimer){
+    clearTimeout(hideTimer);
+  }
+  hideTimer = setTimeout(() => {
+    isHidden.value = true;
+  }, props.hideTime);
+}
+
+
+function actionHandle(actionCode: string): void{
+  emits('action', actionCode);
+}
+
+</script>
+
+<template>
+  <div class="appleBarBox" :class="isHidden?'hidden':''">
+    <div class="appleBar" @mouseenter="barActiveHandle" @mouseleave="startHideTimer">
+      <div class="bgMask"></div>
+      <div class="appleItemGroup">
+        <div class="appleItem showCenterTip"
+             v-for="item in props.navItems"
+             :key="item.id"
+              @click="actionHandle(item.actionCode)"
+        >
+          <div class="appleItem-content">
+            <div class="showTip">{{item.description}}</div>
+            <icon-svg class="icon" :icon-name="item.icon"></icon-svg>
+          </div>
+        </div>
+      </div>
+<!--      右键-->
+      <div class="appleItem appleUser" @click="actionHandle('user')">
+        <div class="appleItem-content">
+          <icon-svg class="icon" icon-name="user"></icon-svg>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.appleBarBox{
+  width: 55%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: flex-end;
+}
+
+.appleBar{
+  width: 100%;
+  height: 50px;
+  border-radius: 10px;
+  box-shadow: 0 0 10px 0 var(--color-background-mute);
+  transition: all 0.8s;
+  margin-bottom: 20px;
+  display: flex;
+  align-items: center;
+  position: relative;
+  justify-content: space-between;
+}
+.appleBar .bgMask{
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 10px;
+  opacity: 0.6;
+  background-color: var(--color-background-soft);
+  z-index: 1;
+}
+.appleItemGroup{
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 2;
+  position: relative;
+}
+.appleItem{
+  width: 60px;
+  height: 60px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0 10px;
+
+  font-size: 20px;
+  font-weight: bold;
+  color: var(--color-text);
+  cursor: pointer;
+  opacity: 0.8;
+}
+.appleItem-content{
+  width: 45px;
+  height: 45px;
+  border-radius: 50%;
+  box-shadow: 0 0 3px 0 var(--color-text);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: all 0.8s;
+  background-color: var(--color-background-soft);
+}
+
+.appleUser{
+  width: 45px;
+  height: 45px;
+  display: flex;
+  flex-shrink: 0;
+  position: relative;
+  z-index: 2;
+}
+
+.appleItem .icon{
+  height: 100%;
+  font-size: 1.5em;
+  color: var(--color-text);
+  transition: all 0.8s;
+}
+
+.appleItem:hover .appleItem-content, .appleUser:hover .appleItem-content{
+  transform: scale(1.3);
+  box-shadow: 0 0 10px 0 rgba(0,0,0,0.2);
+  color: var(--color-text);
+  background-color: var(--color-background-soft);
+  transition: all 0.8s;
+}
+
+
+.hidden .appleBar{
+  width: 10%;
+  height: 10px;
+  border-radius: 5px;
+  opacity: 0.4;
+  margin-bottom: 5px;
+  cursor: pointer;
+}
+
+.hidden .appleBar .appleItem{
+  display: none;
+}
+
+
+
+</style>

src/components/magnetView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {ref, shallowRef} from "vue";
+import { shallowRef} from "vue";
 import {Magnet, MagnetEmit, MagnetSize} from "@/types/magnetType.ts";
 import {computeMagnetStyle, initTimeMagnetInfo} from "@/components/magnets/magnetInfo.ts";
 
@@ -28,7 +28,7 @@ const magnetItemInfos: vueMagnet[] = [
     id: `233`,
     type: timeMagnetInfo.type,
     x: 7,
-    y: 0,
+    y: 10,
     width: timeMagnetInfo.sizes.small?.width??0,
     height: timeMagnetInfo.sizes.small?.height??0,
     size: MagnetSize.small,
@@ -38,8 +38,6 @@ const magnetItemInfos: vueMagnet[] = [
   }
 ];
 
-
-
 const magnetItems = shallowRef(magnetItemInfos)
 
 function daySelect(calendar: Calendar){
@@ -51,10 +49,10 @@ function eventHandler(magnetEmit: MagnetEmit<any>){
     case timeMagnetInfo.event:
       daySelect(magnetEmit.data)
     break;
-      default:
-        console.log('no match event')
-        console.log(magnetEmit)
-        break;
+    default:
+      console.log('no match event')
+      console.log(magnetEmit)
+    break;
   }
 }
 
@@ -64,14 +62,14 @@ function eventHandler(magnetEmit: MagnetEmit<any>){
 
 <template>
 <!-- 磁帖 布局组件, -->
-<div class="magnet">
-
+<div class="magnet scroll">
   <!--    磁贴组件布局 -->
   <div class="magnet-item"
        v-for="magnet in magnetItems"
        :key="magnet.id"
        :style="computeMagnetStyle(magnet)"
   >
+    <div class="magnet-item-bg"></div>
     <component
         :is="magnet.component"
         :size="magnet.size"
@@ -88,13 +86,32 @@ function eventHandler(magnetEmit: MagnetEmit<any>){
   height: 100%;
   display: flex;
   position: relative;
+  overflow-y: auto;
+  padding-bottom: 60px;
 }
 
+
+
 .magnet-item {
   position: absolute;
-  border-radius: 10px;
-  box-shadow: 0px 1px 2px #ccc;
+  border-radius: 6px;
+  box-shadow: 0 1px 2px #ccc;
+  overflow: hidden;
 }
 
+.magnet-item > * {
+  position: relative;
+}
+
+.magnet-item::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  opacity: 0.5;
+}
 
 </style>

src/components/magnets/magnetInfo.ts

@@ -9,6 +9,7 @@ const cellMargin = 10;
 
 export const MagnetEvent = "magnet"
 
+// 时间组件
 export const timeMagnetInfo: MagnetInfo =
 {
     type: 'TimeMagnet',
@@ -27,6 +28,8 @@ export const timeMagnetInfo: MagnetInfo =
     component: null
 }
 
+
+
 export function initTimeMagnetInfo(component: any): MagnetInfo{
     timeMagnetInfo.component = component
     return timeMagnetInfo

src/components/magnets/timeMagnet.vue

@@ -132,9 +132,13 @@ function selectDay(calendarItem:  Calendar, index: number){
 .now-info {
   width: 100%;
   height: 80px;
+  box-sizing: border-box;
+  padding-left: 10px;
 }
 .now-info .hour {
   font-size: 30px;
+  font-weight: bold;
+  margin-left: -5px;
 }
 .now-info .year {
   margin-top: 5px;
@@ -182,7 +186,9 @@ function selectDay(calendarItem:  Calendar, index: number){
   -ms-user-select: none;
   -webkit-touch-callout: none;
   -webkit-tap-highlight-color: transparent;
-
+}
+.sty-medium .calendar-item{
+  margin-top: 3px;
 }
 .calendar-item:hover{
   border: 2px solid #42a4f1;

src/components/public/icon/iconSvg.vue

@@ -3,25 +3,29 @@ import {computed} from 'vue'
 // import type {PropType} from 'vue'
 
 let props = defineProps({
-  iconClass: {
+  iconName: {
     type: String,
     required: true,
   },
-  className: {
+  svgHref: {
     type: String,
     default: '',
   },
+  svgClass: {
+    type: String,
+    default: '',
+  }
 });
 
-let svgClass = computed(() => `svg-icon ${props.className ?? ''}`);
-
-let iconName = computed(() => `#icon-${props.className}`);
+let svgClass = computed(() => `svg-icon ${props.svgClass ?? ''}`);
+let _iconName = computed(() => `#icon-${props.iconName}`);
 
 </script>
 
 <template>
   <svg :class="svgClass" aria-hidden="true">
-    <use :xlink:href="iconName"/>
+    <image v-if="svgHref" :xlink:href="svgHref" />
+    <use v-else :xlink:href="_iconName"/>
   </svg>
 </template>
 

src/components/window/macWindow.vue

@@ -35,7 +35,7 @@ const btnClickHandel = (action: IpcAction) => {
       <div class="top-bar">
         <div class="drag top-title" >
           <slot name="top">
-            <icon-svg  :class-name="icon" :icon-class="icon"/>
+            <icon-svg  :icon-name="icon"/>
             <span class="ml-1.5 ">{{title}}</span>
           </slot>
 
@@ -43,16 +43,16 @@ const btnClickHandel = (action: IpcAction) => {
 
         <div class="control-box">
           <slot name="top"></slot>
-          <div :class="`no-drag btn ding ${isDing?'ding-is':''}`"  @click="switchDingHandle">
+          <div :class="`no-drag showTopTip btn ding ${isDing?'ding-is':''}`"  @click="switchDingHandle">
             <span class="showTip">{{isDing?"取消置顶":"置顶"}}</span>
           </div>
-          <div class="no-drag btn min" @click="btnClickHandel(windowAction.min)">
+          <div class="no-drag showTopTip btn min" @click="btnClickHandel(windowAction.min)">
             <span class="showTip">最小化</span>
           </div>
-          <div :class="`no-drag btn full ${isFull?'full-is':''}`"  @click="switchFullHandle">
+          <div :class="`no-drag showTopTip btn full ${isFull?'full-is':''}`"  @click="switchFullHandle">
             <span class="showTip">{{isFull?'取消全屏':'全屏'}}</span>
           </div>
-          <div class="no-drag btn close"  @click="btnClickHandel(windowAction.close)">
+          <div class="no-drag showTopTip btn close"  @click="btnClickHandel(windowAction.close)">
             <span class="showTip">关闭窗口</span>
           </div>
         </div>

src/style.css

@@ -1,6 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
 :root {
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
@@ -12,6 +13,63 @@
 
   font-synthesis: none;
   text-rendering: optimizeLegibility;
+  --vt-c-white: #ffffff;
+  --vt-c-white-soft: #f8f8f8;
+  --vt-c-white-mute: #f2f2f2;
+
+  --vt-c-black: #181818;
+  --vt-c-black-soft: #222222;
+  --vt-c-black-mute: #282828;
+
+  --vt-c-indigo: #2c3e50;
+
+  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
+  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
+  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
+  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
+
+  --vt-c-text-light-1: var(--vt-c-indigo);
+  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
+  --vt-c-text-light-3: #56a7fb;
+  --vt-c-text-light-title: #000000;
+  --vt-c-text-dark-1: var(--vt-c-white);
+  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
+  --vt-c-text-dark-3: #56a7fb;
+  --vt-c-text-light-title: #fffff;
+  --vt-c-text-red: #e74c3c;
+}
+
+:root {
+  --color-background: var(--vt-c-white);
+  --color-background-soft: var(--vt-c-white-soft);
+  --color-background-mute: var(--vt-c-white-mute);
+
+  --color-border: var(--vt-c-divider-light-2);
+  --color-border-hover: var(--vt-c-divider-light-1);
+
+  --color-heading: var(--vt-c-text-light-1);
+  --color-text: var(--vt-c-text-light-1);
+  --color-text-title: var(--vt-c-text-light-title);
+  --color-text-show: var(--vt-c-text-light-3);
+  --color-text-money: var(--vt-c-text-red);
+  --section-gap: 160px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-background: var(--vt-c-black);
+    --color-background-soft: var(--vt-c-black-soft);
+    --color-background-mute: var(--vt-c-black-mute);
+
+    --color-border: var(--vt-c-divider-dark-2);
+    --color-border-hover: var(--vt-c-divider-dark-1);
+
+    --color-heading: var(--vt-c-text-dark-1);
+    /*--color-text-title: var(--vt-c-text-dark-title);*/
+    --color-text: var(--vt-c-text-dark-2);
+    --color-text-show: var(--vt-c-text-dark-3);
+    --color-text-money: var(--vt-c-text-red);
+  }
 }
 
 *{

src/types/exVueType.ts

@@ -1,4 +1,4 @@
-import vue from 'vue'; // eslint-disable-line no-unused-vars
+// import vue from 'vue'; // eslint-disable-line no-unused-vars
 import {IpcAction} from "../tools/IpcCmd.ts";
 
 declare module '@vue/runtime-core' {

src/util/time.ts

@@ -56,7 +56,8 @@ export function timeFormat(t: Date, format: string): string {
     let tf = function(i: number) {
         return (i < 10 ? '0' : '') + i;
     };
-    format.replace(/yyyy/, tf(t.getFullYear()))
+
+    return format.replace(/yyyy/, tf(t.getFullYear()))
         .replace(/MM/, tf(t.getMonth() + 1))
         .replace(/M/, String(t.getMonth() + 1))
         .replace(/dd/, tf(t.getDate()))
@@ -67,7 +68,6 @@ export function timeFormat(t: Date, format: string): string {
         .replace(/m/, String(t.getMinutes()))
         .replace(/ss/, tf(t.getSeconds()))
         .replace(/s/, String(t.getSeconds()));
-    return format
 }
 
 /**