style: 调整 Vue 组件内 script 标签到 template 标签之前

1.template 和 style 挨在一起，便于样式调整
2.打开文件，可以便于修改 Script 代码

src/views/dashboard/workplace/components/access-trend.vue

@@ -1,32 +1,3 @@
-<template>
-  <a-spin :loading="loading" style="width: 100%">
-    <a-card
-      class="general-card"
-      :header-style="{ paddingBottom: 0 }"
-      :body-style="{
-        paddingTop: '20px',
-      }"
-      :title="$t('workplace.accessTrend')"
-    >
-      <template #extra>
-        <a-radio-group
-          v-model:model-value="dateRange"
-          type="button"
-          @change="handleDateRangeChange as any"
-        >
-          <a-radio :value="7">
-            {{ $t('workplace.accessTrend.dateRange7') }}
-          </a-radio>
-          <a-radio :value="30">
-            {{ $t('workplace.accessTrend.dateRange30') }}
-          </a-radio>
-        </a-radio-group>
-      </template>
-      <Chart height="289px" :option="chartOption" />
-    </a-card>
-  </a-spin>
-</template>
-
 <script lang="ts" setup>
   import useLoading from '@/hooks/loading';
   import {
@@ -215,4 +186,33 @@
   getList(30);
 </script>
 
+<template>
+  <a-spin :loading="loading" style="width: 100%">
+    <a-card
+      class="general-card"
+      :header-style="{ paddingBottom: 0 }"
+      :body-style="{
+        paddingTop: '20px',
+      }"
+      :title="$t('workplace.accessTrend')"
+    >
+      <template #extra>
+        <a-radio-group
+          v-model:model-value="dateRange"
+          type="button"
+          @change="handleDateRangeChange as any"
+        >
+          <a-radio :value="7">
+            {{ $t('workplace.accessTrend.dateRange7') }}
+          </a-radio>
+          <a-radio :value="30">
+            {{ $t('workplace.accessTrend.dateRange30') }}
+          </a-radio>
+        </a-radio-group>
+      </template>
+      <Chart height="289px" :option="chartOption" />
+    </a-card>
+  </a-spin>
+</template>
+
 <style scoped lang="less"></style>

src/views/dashboard/workplace/components/announcement.vue

@@ -1,3 +1,55 @@
+<script lang="ts" setup>
+  import {
+    DashboardAnnouncementRecord,
+    listAnnouncement,
+  } from '@/api/common/dashboard';
+  import { DataRecord, get } from '@/api/system/announcement';
+
+  const { proxy } = getCurrentInstance() as any;
+  const { announcement_type } = proxy.useDict('announcement_type');
+
+  const dataList = ref<DashboardAnnouncementRecord[]>([]);
+  const dataDetail = ref<DataRecord>({});
+  const detailLoading = ref(false);
+  const detailVisible = ref(false);
+
+  /**
+   * 查询公告列表
+   */
+  const getList = () => {
+    listAnnouncement().then((res) => {
+      dataList.value = res.data;
+    });
+  };
+  getList();
+
+  /**
+   * 查看详情
+   *
+   * @param id ID
+   */
+  const toDetail = async (id: number) => {
+    if (detailLoading.value) return;
+    detailLoading.value = true;
+    detailVisible.value = true;
+    get(id)
+      .then((res) => {
+        dataDetail.value = res.data;
+      })
+      .finally(() => {
+        detailLoading.value = false;
+      });
+  };
+
+  /**
+   * 关闭详情
+   */
+  const handleDetailCancel = () => {
+    detailVisible.value = false;
+    dataDetail.value = {};
+  };
+</script>
+
 <template>
   <a-card
     class="general-card"
@@ -79,58 +131,6 @@
   </a-card>
 </template>
 
-<script lang="ts" setup>
-  import {
-    DashboardAnnouncementRecord,
-    listAnnouncement,
-  } from '@/api/common/dashboard';
-  import { DataRecord, get } from '@/api/system/announcement';
-
-  const { proxy } = getCurrentInstance() as any;
-  const { announcement_type } = proxy.useDict('announcement_type');
-
-  const dataList = ref<DashboardAnnouncementRecord[]>([]);
-  const dataDetail = ref<DataRecord>({});
-  const detailLoading = ref(false);
-  const detailVisible = ref(false);
-
-  /**
-   * 查询公告列表
-   */
-  const getList = () => {
-    listAnnouncement().then((res) => {
-      dataList.value = res.data;
-    });
-  };
-  getList();
-
-  /**
-   * 查看详情
-   *
-   * @param id ID
-   */
-  const toDetail = async (id: number) => {
-    if (detailLoading.value) return;
-    detailLoading.value = true;
-    detailVisible.value = true;
-    get(id)
-      .then((res) => {
-        dataDetail.value = res.data;
-      })
-      .finally(() => {
-        detailLoading.value = false;
-      });
-  };
-
-  /**
-   * 关闭详情
-   */
-  const handleDetailCancel = () => {
-    detailVisible.value = false;
-    dataDetail.value = {};
-  };
-</script>
-
 <style scoped lang="less">
   .item {
     display: flex;

src/views/dashboard/workplace/components/banner.vue

@@ -1,14 +1,3 @@
-<template>
-  <a-col class="banner">
-    <a-col :span="8">
-      <a-typography-title :heading="5" style="margin-top: 0">
-        {{ $t('workplace.welcome') }} {{ userInfo.nickname }}
-      </a-typography-title>
-    </a-col>
-    <a-divider class="panel-border" />
-  </a-col>
-</template>
-
 <script lang="ts" setup>
   import { useUserStore } from '@/store';
 
@@ -20,6 +9,17 @@
   });
 </script>
 
+<template>
+  <a-col class="banner">
+    <a-col :span="8">
+      <a-typography-title :heading="5" style="margin-top: 0">
+        {{ $t('workplace.welcome') }} {{ userInfo.nickname }}
+      </a-typography-title>
+    </a-col>
+    <a-divider class="panel-border" />
+  </a-col>
+</template>
+
 <style scoped lang="less">
   .banner {
     width: 100%;

src/views/dashboard/workplace/components/carousel.vue

@@ -1,3 +1,9 @@
+<script lang="ts" setup>
+  const imageSrc = [
+    `https://doc.charles7c.top/qrcode.jpg?${new Date().getTime()}`,
+  ];
+</script>
+
 <template>
   <a-carousel
     indicator-type="slider"
@@ -16,9 +22,3 @@
     </a-carousel-item>
   </a-carousel>
 </template>
-
-<script lang="ts" setup>
-  const imageSrc = [
-    `https://doc.charles7c.top/qrcode.jpg?${new Date().getTime()}`,
-  ];
-</script>

src/views/dashboard/workplace/components/data-panel.vue

@@ -1,3 +1,31 @@
+<script lang="ts" setup>
+  import { DashboardTotalRecord, getTotal } from '@/api/common/dashboard';
+  import PvCountIcon from '@/assets/icons/png/popularity.png';
+  import IpCountIcon from '@/assets/icons/png/same-city.png';
+  import TodayPvCountIcon from '@/assets/icons/png/hot.png';
+  import NewPvFromYesterdayIcon from '@/assets/icons/png/data.png';
+
+  const totalData = ref<DashboardTotalRecord>({
+    pvCount: 0,
+    ipCount: 0,
+    todayPvCount: 0,
+    newPvFromYesterday: 0.0,
+  });
+
+  /**
+   * 查询总计信息
+   */
+  const getData = async () => {
+    try {
+      const { data } = await getTotal();
+      totalData.value = data;
+    } catch (err) {
+      // you can report use errorHandler or other
+    }
+  };
+  getData();
+</script>
+
 <template>
   <a-grid :cols="24" :row-gap="16" class="panel">
     <a-grid-item
@@ -99,34 +127,6 @@
   </a-grid>
 </template>
 
-<script lang="ts" setup>
-  import { DashboardTotalRecord, getTotal } from '@/api/common/dashboard';
-  import PvCountIcon from '@/assets/icons/png/popularity.png';
-  import IpCountIcon from '@/assets/icons/png/same-city.png';
-  import TodayPvCountIcon from '@/assets/icons/png/hot.png';
-  import NewPvFromYesterdayIcon from '@/assets/icons/png/data.png';
-
-  const totalData = ref<DashboardTotalRecord>({
-    pvCount: 0,
-    ipCount: 0,
-    todayPvCount: 0,
-    newPvFromYesterday: 0.0,
-  });
-
-  /**
-   * 查询总计信息
-   */
-  const getData = async () => {
-    try {
-      const { data } = await getTotal();
-      totalData.value = data;
-    } catch (err) {
-      // you can report use errorHandler or other
-    }
-  };
-  getData();
-</script>
-
 <style lang="less" scoped>
   .arco-grid.panel {
     margin-bottom: 0;

src/views/dashboard/workplace/components/docs.vue

@@ -1,3 +1,5 @@
+<script setup lang="ts"></script>
+
 <template>
   <a-card
     class="general-card"
@@ -70,8 +72,6 @@
   </a-card>
 </template>
 
-<script setup lang="ts"></script>
-
 <style lang="less" scoped>
   .arco-card-body .arco-link {
     margin: 10px 0;

src/views/dashboard/workplace/components/geo-distribution.vue

@@ -1,20 +1,3 @@
-<template>
-  <a-spin :loading="loading" style="width: 100%">
-    <a-card
-      class="general-card"
-      :header-style="{ paddingBottom: '0' }"
-      :body-style="{
-        padding: '0 20px 15px 20px',
-      }"
-    >
-      <template #title>
-        {{ $t('workplace.geoDistribution') }}
-      </template>
-      <Chart height="480px" :option="chartOption" />
-    </a-card>
-  </a-spin>
-</template>
-
 <script lang="ts" setup>
   import useLoading from '@/hooks/loading';
   import useChartOption from '@/hooks/chart-option';
@@ -85,6 +68,23 @@
   });
 </script>
 
+<template>
+  <a-spin :loading="loading" style="width: 100%">
+    <a-card
+      class="general-card"
+      :header-style="{ paddingBottom: '0' }"
+      :body-style="{
+        padding: '0 20px 15px 20px',
+      }"
+    >
+      <template #title>
+        {{ $t('workplace.geoDistribution') }}
+      </template>
+      <Chart height="480px" :option="chartOption" />
+    </a-card>
+  </a-spin>
+</template>
+
 <style scoped lang="less">
   .general-card {
     min-height: 566.14px;