fix: 完成首页静态展示内容

src/components/AppleControlBtn/index.ts

@@ -0,0 +1,3 @@
+import AppleControlBtn from './index.vue';
+
+export { AppleControlBtn };

src/components/AppleControlBtn/index.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="go-apple-control-btn">
+    <template v-for="item in btnList" :key="item.key">
+      <div
+        class="btn"
+        :class="[item.key, disabled && 'disabled']"
+        @click="handleClick(item.key)"
+      >
+        <n-icon size="10" class="icon-base" :class="{ hover: !disabled }">
+          <component :is="item.icon" />
+        </n-icon>
+      </div>
+    </template>
+  </div>
+</template>
+<script lang="ts" setup>
+import { renderIcon } from '@/utils/index'
+import { icon } from '@/plugins'
+
+const emit = defineEmits(['close', 'remove', 'resize'])
+
+const props = defineProps({
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const { CloseIcon, RemoveIcon, ResizeIcon } = icon.ionicons5
+
+const btnList = [
+  {
+    title: '关闭',
+    key: 'close',
+    icon: CloseIcon
+  },
+  {
+    title: '缩小',
+    key: 'remove',
+    icon: RemoveIcon
+  },
+  {
+    title: '放大',
+    key: 'resize',
+    icon: ResizeIcon
+  }
+]
+
+const handleClick = (key: 'close' | 'remove' | 'resize') => {
+  console.log(key)
+  emit(key)
+}
+</script>
+
+<style lang="scss" scoped>
+@include go('apple-control-btn') {
+  display: flex;
+  &:hover {
+    .btn {
+      .hover {
+        cursor: pointer;
+        opacity: 1;
+      }
+    }
+  }
+  .btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 14px;
+    height: 14px;
+    margin: 0 4px;
+    color: $--color-text;
+    font-weight: bold;
+    border-radius: 50%;
+    &.disabled {
+      pointer-events:none;
+    }
+    .icon-base {
+      opacity: 0;
+    }
+    .hover {
+      @extend .go-transition;
+    }
+  }
+  .close {
+    background-color: $--color-red;
+  }
+  .remove {
+    background-color: $--color-warn;
+  }
+  .resize {
+    background-color: $--color-success;
+  }
+}
+</style>

src/components/MessageContent/index.vue

@@ -1,4 +1,3 @@
-<template></template>
 <script lang="ts">
   import { useMessage } from 'naive-ui';
 

src/components/Skeleton/index.ts

@@ -0,0 +1,3 @@
+import Skeleton from './index.vue';
+
+export { Skeleton };

src/components/Skeleton/index.vue

@@ -0,0 +1,29 @@
+<template>
+  <div v-show="load">
+    <div v-show="repeat == 1">
+      <n-skeleton v-bind="$attrs" />
+    </div>
+    <div v-show="repeat == 2">
+      <n-skeleton v-bind="$attrs" />
+      <n-skeleton v-bind="$attrs" style="width: 60%;" />
+    </div>
+    <div v-show="repeat > 2">
+      <n-skeleton v-bind="$attrs" :repeat="repeat - 2" />
+      <n-skeleton v-bind="$attrs" style="width: 60%;" />
+      <n-skeleton v-bind="$attrs" style="width: 50%;" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps({
+  repeat: {
+    type: Number,
+    default: 1
+  },
+  load: {
+    type: Boolean,
+    default: true
+  }
+})
+</script>