style: 格式化代码

2023-08-14 23:27:19 +08:00
parent e515ece5aa
commit 016f606769
7 changed files with 327 additions and 232 deletions
--- a/components/Bilibili.vue
+++ b/components/Bilibili.vue
@@ -1,25 +1,32 @@
 <template>
-  <iframe :src="`//player.bilibili.com/player.html?bvid=${bvid}&autoplay=false`" scrolling="no" border="0" frameborder="no"
-    framespacing="0" allowfullscreen="true" class="bili_iframe"/>
+  <iframe
+    :src="`//player.bilibili.com/player.html?bvid=${bvid}&autoplay=false`"
+    scrolling="no"
+    border="0"
+    frameborder="no"
+    framespacing="0"
+    allowfullscreen="true"
+    class="bili_iframe"
+  />
 </template>

 <script setup>
-  import { defineProps } from 'vue'
-  const { bvid } = defineProps({
+import { defineProps } from "vue";
+const { bvid } = defineProps({
  bvid: {
    type: String,
-      default: 'BV1GJ411x7h7',
+    default: "BV1GJ411x7h7",
    required: true,
    validator: (value) => {
-        return value.trim() !== ''
-      }
-    }
-  })
+      return value.trim() !== "";
+    },
+  },
+});
 </script>

 <style scoped>
-  .bili_iframe {
+.bili_iframe {
  width: 100%;
  height: 23rem;
-  }
+}
 </style>
--- a/components/Download.vue
+++ b/components/Download.vue
@@ -1,20 +1,20 @@
 <template>
  <div class="download">
-    <button @click='download()'>📎下载附件代码</button>
+    <button @click="download()">📎下载附件代码</button>
  </div>
 </template>

 <script setup>
-import { defineProps } from 'vue'
+import { defineProps } from "vue";
 const url = defineProps({
  url: {
    type: String,
-    default: ''
-  }
-})
+    default: "",
+  },
+});
 const download = () => {
-  window.open(url.url)
-}
+  window.open(url.url);
+};
 </script>

 <style scoped>
--- a/components/Parallax.vue
+++ b/components/Parallax.vue
@@ -1,99 +1,105 @@
 <script setup lang="ts">
-import { computed, reactive, ref } from 'vue'
-import type { CSSProperties } from 'vue'
-import { useMounted, useParallax } from '@vueuse/core'
-const target = ref(null)
+import { computed, reactive, ref } from "vue";
+import type { CSSProperties } from "vue";
+import { useMounted, useParallax } from "@vueuse/core";
+const target = ref(null);

-
-const parallax = reactive(useParallax(target))
+const parallax = reactive(useParallax(target));

 const targetStyle: CSSProperties = {
-  display: 'flex',
-  flexDirection: 'column',
-  justifyContent: 'center',
-  userSelect: 'none',
-  transition: '.3s ease-out all',
-}
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  userSelect: "none",
+  transition: ".3s ease-out all",
+};
 const cardWindowStyle: CSSProperties = {
-  overflow: 'hidden',
-  fontSize: '6rem',
-  position: 'absolute',
-  top: 'calc(50% - 1em)',
-  left: 'calc(50% - 1em)',
-  height: '2em',
-  width: '2em',
-  margin: 'auto',
-}
+  overflow: "hidden",
+  fontSize: "6rem",
+  position: "absolute",
+  top: "calc(50% - 1em)",
+  left: "calc(50% - 1em)",
+  height: "2em",
+  width: "2em",
+  margin: "auto",
+};
 const layerBase: CSSProperties = {
-  position: 'absolute',
-  userSelect: 'none',
+  position: "absolute",
+  userSelect: "none",
  "-webkit-user-drag": "none",
-  height: '100%',
-  width: '100%',
-  transition: '.3s ease-out all',
-}
+  height: "100%",
+  width: "100%",
+  transition: ".3s ease-out all",
+};
 const containerStyle: CSSProperties = {
-  margin: '3em auto',
-  perspective: '300px',
-}
+  margin: "3em auto",
+  perspective: "300px",
+};

 const layer0 = computed(() => ({
  ...layerBase,
-  content:'url(https://cdn.xyxsw.site/hdu-cs-wiki_main.png)',
-  transform: `translateX(${parallax.tilt * 10}px) translateY(${parallax.roll * 10
+  content: "url(https://cdn.xyxsw.site/hdu-cs-wiki_main.png)",
+  transform: `translateX(${parallax.tilt * 10}px) translateY(${
+    parallax.roll * 10
  }px) scale(1)`,
-}))
+}));

 const layer1 = computed(() => ({
-  content:'url(https://cdn.xyxsw.site/sparkles.gif)',
-  userSelect: 'none',
+  content: "url(https://cdn.xyxsw.site/sparkles.gif)",
+  userSelect: "none",
  "-webkit-user-drag": "none",
-  transform: `translateX(${parallax.tilt * 20}px) translateY(${parallax.roll * 20
+  transform: `translateX(${parallax.tilt * 20}px) translateY(${
+    parallax.roll * 20
  }px) scale(1.33)`,
-  'background-blend-mode': 'overlay',
-  filter: 'brightness(1) contrast(1)',
-  'mix-blend-mode': 'color-dodge',
-  opacity: '1',
-  position: 'absolute',
-}))
+  "background-blend-mode": "overlay",
+  filter: "brightness(1) contrast(1)",
+  "mix-blend-mode": "color-dodge",
+  opacity: "1",
+  position: "absolute",
+}));

 const layer2 = computed(() => ({
-  transform: `translateX(${parallax.tilt * 30}px) translateY(${parallax.roll * 30
+  transform: `translateX(${parallax.tilt * 30}px) translateY(${
+    parallax.roll * 30
  }px) scale(1.33)`,
-  'background-image': 'linear-gradient(115deg,transparent 0%,#ec9bb6 25%,transparent 47%,transparent 53%,#ccac6f 75%,transparent 100%)',
-  opacity: '.18',
-  filter: 'brightness(.5) contrast(1)',
-  width: '100%',
-  height: '100%',
-  position: 'absolute',
-}))
+  "background-image":
+    "linear-gradient(115deg,transparent 0%,#ec9bb6 25%,transparent 47%,transparent 53%,#ccac6f 75%,transparent 100%)",
+  opacity: ".18",
+  filter: "brightness(.5) contrast(1)",
+  width: "100%",
+  height: "100%",
+  position: "absolute",
+}));

 const layer3 = computed(() => ({
  ...layerBase,
-  transform: `translateX(${parallax.tilt * 40}px) translateY(${parallax.roll * 40
+  transform: `translateX(${parallax.tilt * 40}px) translateY(${
+    parallax.roll * 40
  }px) scale(1.33)`,
-}))
+}));

-const layer4 = layerBase
+const layer4 = layerBase;

 const cardStyle = computed(() => ({
-  background: '',
-  height: '14rem',
-  width: '20rem',
-  borderRadius: '20px',
-  border: '1px solid #000000',
-  overflow: 'hidden',
-  transition: '.3s ease-out all',
-  boxShadow: '-20px -20px 30px -25px #11e8da, 20px 20px 30px -25px #1ea5e6, -7px -7px 10px -5px #11e8da, 7px 7px 10px -5px #1ea5e6, 0 0 13px 4px rgba(255,255,255,0.3),0 55px 35px -20px rgba(0, 0, 0, 0.5)',
-  transform: `rotateX(${parallax.roll * 20}deg) rotateY(${parallax.tilt * 20
+  background: "",
+  height: "14rem",
+  width: "20rem",
+  borderRadius: "20px",
+  border: "1px solid #000000",
+  overflow: "hidden",
+  transition: ".3s ease-out all",
+  boxShadow:
+    "-20px -20px 30px -25px #11e8da, 20px 20px 30px -25px #1ea5e6, -7px -7px 10px -5px #11e8da, 7px 7px 10px -5px #1ea5e6, 0 0 13px 4px rgba(255,255,255,0.3),0 55px 35px -20px rgba(0, 0, 0, 0.5)",
+  transform: `rotateX(${parallax.roll * 20}deg) rotateY(${
+    parallax.tilt * 20
  }deg)`,
-}))
+}));
 </script>

 <script lang="ts">
 export default {
-  inheritAttrs: false
-}
+  inheritAttrs: false,
+};
 </script>

 <template>
@@ -103,10 +109,9 @@ export default {
        <div :style="cardStyle">
          <div id="kirakira"></div>
          <div :style="layer2"></div>
-          <img :style="layer1"
-            class="image">
+          <img :style="layer1" class="image" />
          <div :style="cardWindowStyle">
-            <img :style="layer0" class="image">
+            <img :style="layer0" class="image" />
          </div>
        </div>
      </div>
@@ -122,58 +127,60 @@ export default {
  top: 0;
  left: 0;
  z-index: 1;
-  transition: .3s ease-out;
+  transition: 0.3s ease-out;
 }

 #kirakira:hover {
-  background-image: linear-gradient(110deg,
+  background-image: linear-gradient(
+    110deg,
    transparent 25%,
    #ec9bb6 48%,
    #ccac6f 52%,
-      transparent 75%);
+    transparent 75%
+  );
  background-position: 50% 50%;
  background-size: 250% 250%;
-  opacity: .18;
-  filter: brightness(.66) contrast(1.33);
+  opacity: 0.18;
+  filter: brightness(0.66) contrast(1.33);
  transition: none;
  background-repeat: no-repeat;
  mix-blend-mode: color-dodge;
-  transition: all .33s ease;
-  animation: holoGradient 12s ease 0s 1,
+  transition: all 0.33s ease;
+  animation: holoGradient 12s ease 0s 1;
 }

@keyframes holoGradient {
-
  0%,
  100% {
    opacity: 0.3;
    background-position: 50% 50%;
-    filter: brightness(.5) contrast(1);
+    filter: brightness(0.5) contrast(1);
  }

  5%,
  9% {
    background-position: 100% 100%;
    opacity: 0.1;
-    filter: brightness(.75) contrast(1.25);
+    filter: brightness(0.75) contrast(1.25);
  }

  13%,
  17% {
    background-position: 0% 0%;
-    opacity: .18;
+    opacity: 0.18;
  }

  35%,
  39% {
    background-position: 100% 100%;
    opacity: 0.2;
-    filter: brightness(.5) contrast(1);
+    filter: brightness(0.5) contrast(1);
  }

  55% {
    background-position: 0% 0%;
    opacity: 0.3;
-    filter: brightness(.75) contrast(1.25);
+    filter: brightness(0.75) contrast(1.25);
  }
-}</style>
+}
+</style>
--- a/components/PostItem.vue
+++ b/components/PostItem.vue
@@ -8,9 +8,16 @@
          {{ Content }}
        </div>
        <div class="badge-list" v-if="!inMobile">
-          <a class="split" v-if="Author" :href="withBase(AuthorURL)" @click.stop target="_blank">{{ Author }}</a>
+          <a
+            class="split"
+            v-if="Author"
+            :href="withBase(AuthorURL)"
+            @click.stop
+            target="_blank"
+            >{{ Author }}</a
+          >
          <span class="split">{{ showTime }}</span>
-          <span class="split" v-if="tag?.length">{{ tag.join(' · ') }}</span>
+          <span class="split" v-if="tag?.length">{{ tag.join(" · ") }}</span>
        </div>
      </div>
      <div
@@ -20,40 +27,47 @@
      ></div>
    </div>
    <div class="badge-list" v-if="inMobile">
-      <a class="split" v-if="Author" :href="withBase(AuthorURL)" @click.stop target="_blank">{{ Author }}</a>
+      <a
+        class="split"
+        v-if="Author"
+        :href="withBase(AuthorURL)"
+        @click.stop
+        target="_blank"
+        >{{ Author }}</a
+      >
      <span class="split">{{ showTime }}</span>
-      <span class="split" v-if="tag?.length">{{ tag.join(' · ') }}</span>
+      <span class="split" v-if="tag?.length">{{ tag.join(" · ") }}</span>
    </div>
  </div>
 </template>

 <script setup>
-import { withBase } from 'vitepress'
-import { computed } from 'vue'
-import { useWindowSize } from '@vueuse/core'
+import { withBase } from "vitepress";
+import { computed } from "vue";
+import { useWindowSize } from "@vueuse/core";
 const openBlog = (url) => {
-  window.open(url, '_blank')
-}
-const { width } = useWindowSize()
-const inMobile = computed(() => width.value <= 500)
-function formatDate(d, fmt = 'yyyy-MM-dd hh:mm:ss') {
+  window.open(url, "_blank");
+};
+const { width } = useWindowSize();
+const inMobile = computed(() => width.value <= 500);
+function formatDate(d, fmt = "yyyy-MM-dd hh:mm:ss") {
  if (!(d instanceof Date)) {
-    d = new Date(d)
+    d = new Date(d);
  }
  const o = {
-    'M+': d.getMonth() + 1, // 月份
-    'd+': d.getDate(), // 日
-    'h+': d.getHours(), // 小时
-    'm+': d.getMinutes(), // 分
-    's+': d.getSeconds(), // 秒
-    'q+': Math.floor((d.getMonth() + 3) / 3), // 季度
-    S: d.getMilliseconds() // 毫秒
-  }
+    "M+": d.getMonth() + 1, // 月份
+    "d+": d.getDate(), // 日
+    "h+": d.getHours(), // 小时
+    "m+": d.getMinutes(), // 分
+    "s+": d.getSeconds(), // 秒
+    "q+": Math.floor((d.getMonth() + 3) / 3), // 季度
+    S: d.getMilliseconds(), // 毫秒
+  };
  if (/(y+)/.test(fmt)) {
    fmt = fmt.replace(
      RegExp.$1,
      `${d.getFullYear()}`.substr(4 - RegExp.$1.length)
-    )
+    );
  }
  // eslint-disable-next-line no-restricted-syntax
  for (const k in o) {
@@ -61,33 +75,33 @@ function formatDate(d, fmt = 'yyyy-MM-dd hh:mm:ss') {
      fmt = fmt.replace(
        RegExp.$1,
        RegExp.$1.length === 1 ? o[k] : `00${o[k]}`.substr(`${o[k]}`.length)
-      )
+      );
  }
-  return fmt
+  return fmt;
 }
 function formatShowDate(date) {
-  const source = date ? +new Date(date) : +new Date()
-  const now = +new Date()
-  const diff = now - source
-  const oneSeconds = 1000
-  const oneMinute = oneSeconds * 60
-  const oneHour = oneMinute * 60
-  const oneDay = oneHour * 24
-  const oneWeek = oneDay * 7
+  const source = date ? +new Date(date) : +new Date();
+  const now = +new Date();
+  const diff = now - source;
+  const oneSeconds = 1000;
+  const oneMinute = oneSeconds * 60;
+  const oneHour = oneMinute * 60;
+  const oneDay = oneHour * 24;
+  const oneWeek = oneDay * 7;
  if (diff < oneMinute) {
-    return `${Math.floor(diff / oneSeconds)}秒前`
+    return `${Math.floor(diff / oneSeconds)}秒前`;
  }
  if (diff < oneHour) {
-    return `${Math.floor(diff / oneMinute)}分钟前`
+    return `${Math.floor(diff / oneMinute)}分钟前`;
  }
  if (diff < oneDay) {
-    return `${Math.floor(diff / oneHour)}小时前`
+    return `${Math.floor(diff / oneHour)}小时前`;
  }
  if (diff < oneWeek) {
-    return `${Math.floor(diff / oneDay)}天前`
+    return `${Math.floor(diff / oneDay)}天前`;
  }

-  return formatDate(new Date(date), 'yyyy-MM-dd')
+  return formatDate(new Date(date), "yyyy-MM-dd");
 }

 const props = defineProps({
@@ -104,13 +118,12 @@ const props = defineProps({
    required: false,
  },
  PostURL: String,
-  AuthorURL: String
-})
+  AuthorURL: String,
+});

 const showTime = computed(() => {
-  return formatShowDate(props.Date)
-})
-
+  return formatShowDate(props.Date);
+});
 </script>

 <style scoped>
@@ -127,7 +140,7 @@ const showTime = computed(() => {
  opacity: 1;
 }
 .blog-item .pin::before {
-  content: '';
+  content: "";
  position: absolute;
  width: 120%;
  height: 30px;
@@ -145,8 +158,8 @@ const showTime = computed(() => {

 .blog-item {
  position: relative;
-  border: 1px solid rgba(82, 82, 89, .32);
-  border-radius: .5rem;
+  border: 1px solid rgba(82, 82, 89, 0.32);
+  border-radius: 0.5rem;
  padding: 1.5rem;
  width: 100%;
  overflow: hidden;
@@ -154,11 +167,10 @@ const showTime = computed(() => {
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
-  transition: border-color .25s;
+  transition: border-color 0.25s;
  cursor: pointer;
 }

-
 .blog-item:hover {
  border: 1px solid #09f;
 }
@@ -196,7 +208,7 @@ const showTime = computed(() => {
  margin-top: 8px;
 }
 .badge-list .split:not(:last-child)::after {
-  content: '';
+  content: "";
  display: inline-block;
  width: 1px;
  height: 8px;
--- a/components/PostList.vue
+++ b/components/PostList.vue
@@ -1,23 +1,31 @@
 <script setup>
-import { ref, computed } from 'vue';
-import Pagination from './Pagination.vue';
-import PostItem from './PostItem.vue';
-const props= {data:(await (await fetch("https://ghproxy.com/https://raw.githubusercontent.com/NX-Official/friends-link-plus/main/output/friends.json")).json()).posts}
-const pageSize = 10
+import { ref, computed } from "vue";
+import Pagination from "./Pagination.vue";
+import PostItem from "./PostItem.vue";
+const props = {
+  data: (
+    await (
+      await fetch(
+        "https://ghproxy.com/https://raw.githubusercontent.com/NX-Official/friends-link-plus/main/output/friends.json"
+      )
+    ).json()
+  ).posts,
+};
+const pageSize = 10;
 // const Date = ref('')
-const pageTotal = ref(Math.ceil(props.data.length / pageSize))
-const pageNum = ref(1)
+const pageTotal = ref(Math.ceil(props.data.length / pageSize));
+const pageNum = ref(1);
 // const searchText = ref('')
 // const onsearchText = ref('')
 const pluginLists = computed(() => {
-  let data_ = props.data//.filter(item => item.Date == Date.value)
+  let data_ = props.data; //.filter(item => item.Date == Date.value)
  // if (!!onsearchText.value) {
  //   data_ = data_.filter(item => item.name.indexOf(onsearchText.value) > -1)
  // }
-  pageTotal.value = Math.ceil(data_.length / pageSize)
-  data_ = data_.slice((pageNum.value - 1) * pageSize, pageNum.value * pageSize)
-  return data_
-})
+  pageTotal.value = Math.ceil(data_.length / pageSize);
+  data_ = data_.slice((pageNum.value - 1) * pageSize, pageNum.value * pageSize);
+  return data_;
+});
 // const setDate = (Date_) => {
 //   Date.value = Date_
 //   searchText.value = ""
@@ -59,43 +67,62 @@ const pluginLists = computed(() => {
      </div>
      <div class="divider" style="margin-bottom: 1rem;" />
    </div> -->
-    <Pagination :pageTotal="pageTotal" v-model="pageNum" style="width: 100%;padding: 1rem 0;" key="0" />
+    <Pagination
+      :pageTotal="pageTotal"
+      v-model="pageNum"
+      style="width: 100%; padding: 1rem 0"
+      key="0"
+    />
    <div class="card-list">
-      <PostItem v-for="(item, index) in pluginLists" :key="index" :Title="item.Title" :Content="item.Content"
-        :Date="item.Date" :Author="item.Author" :tag="item?.tag" :cover="item?.cover" :PostURL="item.PostURL" :AuthorURL="item.AuthorURL"/>
+      <PostItem
+        v-for="(item, index) in pluginLists"
+        :key="index"
+        :Title="item.Title"
+        :Content="item.Content"
+        :Date="item.Date"
+        :Author="item.Author"
+        :tag="item?.tag"
+        :cover="item?.cover"
+        :PostURL="item.PostURL"
+        :AuthorURL="item.AuthorURL"
+      />
    </div>
-    <Pagination :pageTotal="pageTotal" v-model="pageNum" style="width: 100%;padding: 1rem 0;" key="1" />
+    <Pagination
+      :pageTotal="pageTotal"
+      v-model="pageNum"
+      style="width: 100%; padding: 1rem 0"
+      key="1"
+    />
  </div>
 </template>

-
 <style scoped>
 .tab {
-  grid-row-gap: .5rem;
-  row-gap: .5rem;
+  grid-row-gap: 0.5rem;
+  row-gap: 0.5rem;
  margin-top: 2.5rem;
  grid-template-columns: 80px auto;
  display: grid;
 }

 .sm {
-  font-size: .875rem;
+  font-size: 0.875rem;
  line-height: 1.25rem;
 }

 .select-list {
-  grid-gap: .5rem;
-  gap: .5rem;
+  grid-gap: 0.5rem;
+  gap: 0.5rem;
  flex-wrap: wrap;
  display: flex;
-  margin-bottom: .5rem;
+  margin-bottom: 0.5rem;
 }

 .select-button {
-  border-radius: .25rem;
+  border-radius: 0.25rem;
  background-color: #9ca3af0d;
-  padding: .125rem .5rem;
-  font-size: .875rem;
+  padding: 0.125rem 0.5rem;
+  font-size: 0.875rem;
  line-height: 1.25rem;
 }

@@ -111,17 +138,17 @@ const pluginLists = computed(() => {
 }

 .divider {
-  background-color: rgba(60, 60, 67, .12);
+  background-color: rgba(60, 60, 67, 0.12);
  height: 1px;
 }

 .search {
-  padding: .5rem;
+  padding: 0.5rem;
  display: flex;
 }

 .icon {
-  margin-right: .5rem;
+  margin-right: 0.5rem;
 }

 .search-input {
@@ -138,12 +165,12 @@ const pluginLists = computed(() => {

 .card {
  display: block;
-  border: 1px solid rgba(82, 82, 89, .32);
-  border-radius: .5rem;
+  border: 1px solid rgba(82, 82, 89, 0.32);
+  border-radius: 0.5rem;
  padding: 1.5rem;
  width: 100%;
  height: 100%;
-  transition: border-color .25s;
+  transition: border-color 0.25s;
  cursor: pointer;
 }

@@ -173,24 +200,24 @@ const pluginLists = computed(() => {
 }

 .card-des {
-  color: #3C3C43;
-  opacity: .7;
-  font-size: .875rem;
+  color: #3c3c43;
+  opacity: 0.7;
+  font-size: 0.875rem;
  line-height: 1.25rem;
-  margin-top: .3rem;
+  margin-top: 0.3rem;
 }

 .card-tags {
  display: flex;
-  margin-top: .5rem;
-  margin-bottom: .5rem;
-  font-size: .875rem;
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+  font-size: 0.875rem;
  line-height: 1.25rem;
 }

 .card-tag {
-  margin: 0 .5rem;
-  padding: 0 .5rem;
+  margin: 0 0.5rem;
+  padding: 0 0.5rem;
  background-color: #9ca3af2b;
 }

@@ -200,12 +227,12 @@ const pluginLists = computed(() => {
 }

 .card-details {
-  margin: .8rem 0 .5rem 0;
+  margin: 0.8rem 0 0.5rem 0;
 }

 .card-text {
-  margin-left: .5rem;
-  font-size: .95rem;
+  margin-left: 0.5rem;
+  font-size: 0.95rem;
  line-height: 1.5rem;
 }

@@ -219,9 +246,9 @@ const pluginLists = computed(() => {
  justify-content: center;
  align-items: center;
  width: 100%;
-  padding: .4rem 1rem;
+  padding: 0.4rem 1rem;
  background-color: #f6f6f7;
-  border-radius: .5rem;
+  border-radius: 0.5rem;
  cursor: pointer;
 }

@@ -234,7 +261,6 @@ const pluginLists = computed(() => {
 }

@media (prefers-color-scheme: dark) {
-
  .card-button {
    background-color: #9ca3af0d;
  }
@@ -242,6 +268,5 @@ const pluginLists = computed(() => {
  .card-des {
    color: #9ca3af;
  }
-
 }
 </style>
--- a/components/RenderJupyterNotebook.vue
+++ b/components/RenderJupyterNotebook.vue
@@ -1,21 +1,65 @@
 <template>
  <div ref="NotebookFragment" class="notebook-fragment">
    <div ref="loading" id="loading">
-      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" id="loadingsvg">
-        <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2">
-          <path stroke-dasharray="2 4" stroke-dashoffset="6"
-            d="M12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3">
-            <animate attributeName="stroke-dashoffset" dur="0.6s" repeatCount="indefinite" values="6;0" />
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="32"
+        height="32"
+        viewBox="0 0 24 24"
+        id="loadingsvg"
+      >
+        <g
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-width="2"
+        >
+          <path
+            stroke-dasharray="2 4"
+            stroke-dashoffset="6"
+            d="M12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3"
+          >
+            <animate
+              attributeName="stroke-dashoffset"
+              dur="0.6s"
+              repeatCount="indefinite"
+              values="6;0"
+            />
          </path>
-          <path stroke-dasharray="30" stroke-dashoffset="30"
-            d="M12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21">
-            <animate fill="freeze" attributeName="stroke-dashoffset" begin="0.1s" dur="0.3s" values="30;0" />
+          <path
+            stroke-dasharray="30"
+            stroke-dashoffset="30"
+            d="M12 3C16.9706 3 21 7.02944 21 12C21 16.9706 16.9706 21 12 21"
+          >
+            <animate
+              fill="freeze"
+              attributeName="stroke-dashoffset"
+              begin="0.1s"
+              dur="0.3s"
+              values="30;0"
+            />
          </path>
          <path stroke-dasharray="10" stroke-dashoffset="10" d="M12 16v-7.5">
-            <animate fill="freeze" attributeName="stroke-dashoffset" begin="0.5s" dur="0.2s" values="10;0" />
+            <animate
+              fill="freeze"
+              attributeName="stroke-dashoffset"
+              begin="0.5s"
+              dur="0.2s"
+              values="10;0"
+            />
          </path>
-          <path stroke-dasharray="6" stroke-dashoffset="6" d="M12 8.5l3.5 3.5M12 8.5l-3.5 3.5">
-            <animate fill="freeze" attributeName="stroke-dashoffset" begin="0.7s" dur="0.2s" values="6;0" />
+          <path
+            stroke-dasharray="6"
+            stroke-dashoffset="6"
+            d="M12 8.5l3.5 3.5M12 8.5l-3.5 3.5"
+          >
+            <animate
+              fill="freeze"
+              attributeName="stroke-dashoffset"
+              begin="0.7s"
+              dur="0.2s"
+              values="6;0"
+            />
          </path>
        </g>
      </svg>
@@ -49,7 +93,7 @@ onMounted(async () => {
  flex-direction: column;
  align-items: center;
  gap: 2rem;
-  animation: rainbow 10s cubic-bezier(0.1, 0.7, 1.0, 0.1) infinite !important;
+  animation: rainbow 10s cubic-bezier(0.1, 0.7, 1, 0.1) infinite !important;
 }

 #loadingsvg {
--- a/components/pdf.vue
+++ b/components/pdf.vue
@@ -1,20 +1,20 @@
 <template>
  <div class="pdf">
-    <button @click='open'>打开PDF</button>
+    <button @click="open">打开PDF</button>
  </div>
 </template>

 <script setup>
-import { defineProps } from 'vue'
+import { defineProps } from "vue";
 const url = defineProps({
  url: {
    type: String,
-    default: ''
-  }
-})
+    default: "",
+  },
+});
 const open = () => {
-  window.open(url.url)
-}
+  window.open(url.url);
+};
 </script>

 <style scoped>