refactor: 使用setup语法糖

Signed-off-by: crrashh1542 <[email protected]>

src/components/Appbar.vue

@@ -1,52 +1,41 @@
-<script>
-const linkList =
-   [{
-      'name': '主页',
-      'link': 'https://www.crrashh.com/',
-      'type': 'link'
-   }, {
-      'name': '分类',
-      'link': '/category',
-      'type': 'route'
-   }, {
-      'name': '关于',
-      'link': '/about',
-      'type': 'route'
-   }]
-
-export default {
-   name: 'MainAppbar',
-   data() {
-      return {
-         title: 'Windows Up-to-Date',
-         link: linkList
-      }
-   },
-   methods: {
-      dialogOpen(){
-         let dialogEl = document.getElementById('setting')
-         dialogEl.hidden = false
-      }
-   }
+<script setup>
+defineOptions({ name: 'WidgetAppbar' })
+
+const linkList = [{
+   'name': '主页',
+   'link': 'https://www.crrashh.com/',
+   'type': 'link'
+}, {
+   'name': '分类',
+   'link': '/category',
+   'type': 'route'
+}, {
+   'name': '关于',
+   'link': '/about',
+   'type': 'route'
+}]
+
+function dialogOpen() {
+   let dialogEl = document.getElementById('setting')
+   dialogEl.hidden = false
 }
 </script>
 
 <template>
    <div class="appbar">
 
       <!-- 左侧标题 -->
-      <router-link to="/" class="title">{{ title }}</router-link>
+      <router-link to="/" class="title">Windows Up-to-Date</router-link>
 
       <!-- 左右分隔 -->
       <div class="grow"></div>
 
       <!-- 右侧链接 -->
       <div class="external">
-         <span v-for="i in link" :key="i.name">
-            
+         <span v-for="i in linkList" :key="i.name">
+
             <!-- 如果类型是外部链接 → <a> -->
-            <a v-if="i.type == 'link'" :href="i.link" 
-               class="link item" target="_blank">{{ i.name }}</a>
+            <a v-if="i.type == 'link'" :href="i.link" class="link item" target="_blank">{{ i.name }}</a>
 
             <!-- 如果类型是项目内路由 → <router-link> -->
             <router-link class="item" v-if="i.type == 'route'" :to="i.link">
@@ -56,7 +45,7 @@ export default {
          <span><!-- 保留节目，选项必须在！ -->
             <a href="#" class="item stable" @click="dialogOpen">选项</a>
          </span>
-         
+
       </div>
    </div>
 </template>
@@ -96,7 +85,7 @@ export default {
       display: none;
    }
 
-   .external > span > a.item {
+   .external>span>a.item {
       // 链接
       margin: 0 15px;
       font-size: 17px;
@@ -136,4 +125,5 @@ export default {
    .appbar {
       --appbar-link-display: none;
    }
-}</style>
+}
+</style>

src/components/Card.vue

@@ -1,10 +1,8 @@
-<script>
-import { provideFluentDesignSystem, fluentCard } from "@fluentui/web-components"
-provideFluentDesignSystem().register(fluentCard())
+<script setup>
+defineOptions({ name: 'WidgetCard' })
 
-export default {
-    name: 'WidgetCard'
-}
+import { provideFluentDesignSystem, fluentCard } from '@fluentui/web-components'
+provideFluentDesignSystem().register(fluentCard())
 </script>
 
 <template>

src/components/Catalog.vue

@@ -1,7 +1,5 @@
-<script>
-export default {
-    name: 'WidgetCatalog'
-}
+<script setup>
+defineOptions({ name: 'WidgetCatalog' })
 </script>
 
 <template>

src/components/Footer.vue

@@ -1,7 +1,5 @@
-<script>
-export default {
-    name: 'MainFooter'
-}
+<script setup>
+defineOptions({ name: 'MainFooter' })
 </script>
 
 <template>

src/components/LoadAnim.vue

@@ -1,10 +1,8 @@
-<script>
+<script setup>
 import { fluentProgressRing, provideFluentDesignSystem } from '@fluentui/web-components'
 provideFluentDesignSystem().register(fluentProgressRing())
 
-export default {
-    name: 'MainLoadAnim'
-}
+defineOptions({ name: 'MainLoadAnim' })
 </script>
 
 <template>

src/components/Navbar.vue

@@ -1,35 +1,27 @@
-<script>
-const navSections = [
-    {
-        "path": "/",
-        "icon": "icon-home",
-        "text": "主页"
-    },
-    {
-        "path": "/category",
-        "icon": "icon-tag",
-        "text": "分类"
-    },
-    {
-        "path": "/about",
-        "icon": "icon-about",
-        "text": "关于"
-    }
-]
+<script setup>
+defineOptions({ name: 'WidgetNavBar' })
 
-export default {
-    name: 'WidgetNavBar',
-    data() {
-        return { navSections }
-    }
-}
+const navSections = [{
+    "path": "/",
+    "icon": "icon-home",
+    "text": "主页"
+},
+{
+    "path": "/category",
+    "icon": "icon-tag",
+    "text": "分类"
+},
+{
+    "path": "/about",
+    "icon": "icon-about",
+    "text": "关于"
+}]
 </script>
 
 <template>
     <div class="navbar flex flex-row fixed bottom-0 left-0 w-full">
 
-        <router-link v-for="s in navSections" :to="s.path" 
-            :key="s.value" class="inline text-center basis-1/3 py-2">
+        <router-link v-for="s in navSections" :to="s.path" :key="s.value" class="inline text-center basis-1/3 py-2">
 
             <span class="icon block text-xl pt-1 pb-0.5" :class="s.icon"></span>
             <span class="block text-sm py-0.5">{{ s.text }}</span>
@@ -47,9 +39,12 @@ export default {
     background-color: @wu-color-bar;
     backdrop-filter: blur(3px);
     border-top: 1px solid @wu-color-split-line;
-    .path-active { // router 活跃状态（处于当前页时）的配置 class
+
+    .path-active {
+        // router 活跃状态（处于当前页时）的配置 class
         color: @wu-color-theme;
     }
+
     .icon::before {
         height: 40px;
     }

src/components/TopNav.vue

@@ -1,7 +1,5 @@
-<script>
-export default {
-    name: 'WidgetTopNav'
-}
+<script setup>
+defineOptions({ name: 'WidgetTopNav' })
 </script>
 
 <template>

src/views/MainAbout.vue

@@ -1,27 +1,17 @@
-<script>
-import buildInfo from '../scripts/parseRepoInfo'
+<script setup>
+// 引入组件
 import Banner from '../components/Banner.vue'
 import Card from '../components/Card.vue'
 
+// 设定数据
+document.title = '关于项目 / Windows Up-to-Date'
+import buildInfo from '../scripts/parseRepoInfo'
 const sources = [
     ['https://msbuilds.rg-adguard.net', 'MSFT BUFFET DATABASE'],
     ['https://changewindows.org', 'ChangeWindows'],
     ['https://bbs.pcbeta.com/viewthread-1941423-1-1.html', '远景论坛 - 2262x(2263x).2715/2700更新包和修复包下载 & 内部版本进度 & .NET CU'],
     ['https://community.wvbtech.com', 'wvbCommunity']
 ]
-
-export default {
-    name: 'MainAbout',
-    components: { Banner, Card },
-    data() {
-        return {
-            buildInfo, sources
-        }
-    },
-    setup() {
-        document.title = '关于项目 / Windows Up-to-Date'
-    }
-}
 </script>
 
 <template>

src/views/MainCategory.vue

@@ -1,15 +1,11 @@
-<script>
+<script setup>
 // 引入组件
 import Card from '../components/Card.vue'
 
-export default {
-    name: 'MainCategory',
-    components: { Card }
-}
 </script>
 
 <template>
-    <!-- PlaceHolder 2024-02-01 by crrashh1542 -->
+    <!-- PlaceHolder 2024-02-19 by crrashh1542 -->
 </template>
 
 <style lang="less" scoped>

src/views/NotFound.vue

@@ -1,18 +1,8 @@
-<script>
+<script setup>
 import { provideFluentDesignSystem, fluentButton } from "@fluentui/web-components"
 provideFluentDesignSystem().register(fluentButton())
 
-export default {
-    name: 'OtherNotFound',
-    setup() {
-        document.title = '内容不见啦！ / Windows Up-to-Date'
-    },
-    methods: {
-        routerToHome() {
-            this.$router.push('/')
-        }
-    }
-}
+document.title = '内容不见啦！ / Windows Up-to-Date'
 </script>
 
 <template>