feat: 优化和抽取数字模块

src/components/CommonItem/DigitalNumber.tsx

@@ -0,0 +1,20 @@
+import formatter from '@/utils/digte-formatter';
+
+/** 显示金额 */
+export const displayContent = (money) => {
+  const moneyString: string = formatter(money);
+  const moneyStringList = moneyString
+    .split(/(\d,)/g)
+    .filter((item) => item !== '')
+    .map((item) => (!item.includes(',') ? item.split('') : item))
+    .flat();
+
+  return (
+    <>
+      <span>¥</span>
+      {moneyStringList.map((item, index) => (
+        <span key={index}>{item}</span>
+      ))}
+    </>
+  );
+};

src/views/business-supervision/business-supervision-content/index.vue

@@ -1,15 +0,0 @@
-<script lang="ts" setup>
-import ContentBottom from '@/views/business-supervision/business-supervision-content/components/content-bottom.vue';
-import ContentMiddle from '@/views/business-supervision/business-supervision-content/components/content-middle.vue';
-import ContentTop from '@/views/business-supervision/business-supervision-content/components/content-top.vue';
-</script>
-
-<template>
-  <div class="business-supervision__content">
-    <content-top />
-    <content-middle />
-    <content-bottom />
-  </div>
-</template>
-
-<style lang="scss" scoped></style>

src/views/business-supervision/business-supervision-left/index.vue

@@ -1,13 +0,0 @@
-<script lang="tsx" setup>
-import SidebarLeftBottom from '@/views/business-supervision/business-supervision-left/components/sidebar-left-bottom.vue';
-import SidebarLeftMiddle from '@/views/business-supervision/business-supervision-left/components/sidebar-left-middle.vue';
-import SidebarLeftTop from '@/views/business-supervision/business-supervision-left/components/sidebar-left-top.vue';
-</script>
-
-<template>
-  <div class="business-supervision__sidebar">
-    <sidebar-left-top />
-    <sidebar-left-middle />
-    <sidebar-left-bottom />
-  </div>
-</template>

src/views/business-supervision/business-supervision-right/index.vue

@@ -1,17 +0,0 @@
-<script lang="ts" setup>
-import SidebarRightBottom from '@/views/business-supervision/business-supervision-right/components/sidebar-right-bottom.vue';
-import SidebarRightMiddle from '@/views/business-supervision/business-supervision-right/components/sidebar-right-middle.vue';
-import SidebarRightTop from '@/views/business-supervision/business-supervision-right/components/sidebar-right-top.vue';
-</script>
-
-<template>
-  <div class="business-supervision__sidebar flex-y-between">
-    <sidebar-right-top />
-
-    <sidebar-right-middle />
-
-    <sidebar-right-bottom />
-  </div>
-</template>
-
-<style lang="scss" scoped></style>

src/views/business-supervision/components/business-supervision-content/components/content-bottom.vue

@@ -3,7 +3,7 @@ import { onMounted, ref } from 'vue';
 
 import TimeSelect from '@/components/TimeSelect/index.vue';
 import { TimeSelectType } from '@/components/TimeSelect/type';
-import { renderEcharts } from '@/views/business-supervision/business-supervision-content/charts/contentBottom';
+import { renderEcharts } from '@/views/business-supervision/components/business-supervision-content/charts/contentBottom';
 
 const chartYear = ref();
 

src/views/business-supervision/components/business-supervision-content/components/content-top.vue

@@ -34,6 +34,14 @@ const list = [
 
 // 动态顶部元素
 const contentEl = () => {
+  const getImage = (index) => {
+    const image = new URL(
+      `../../../../../assets/images/business-supervision/bg/content/bg-card-${index + 1}.png`,
+      import.meta.url
+    );
+    return image.href;
+  };
+
   return (
     <>
       {list.map((item, index) => (
@@ -49,15 +57,7 @@ const contentEl = () => {
               ))}
             </section>
           </div>
-          <img
-            alt="card-1"
-            src={
-              new URL(
-                `../../../../assets/images/business-supervision/bg/content/bg-card-${index + 1}.png`,
-                import.meta.url
-              ).href
-            }
-          />
+          <img alt="card-1" src={getImage(index)} />
         </li>
       ))}
     </>

src/views/business-supervision/components/business-supervision-content/index.vue

@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import ContentBottom from '@/views/business-supervision/components/business-supervision-content/components/content-bottom.vue';
+import ContentMiddle from '@/views/business-supervision/components/business-supervision-content/components/content-middle.vue';
+import ContentTop from '@/views/business-supervision/components/business-supervision-content/components/content-top.vue';
+</script>
+
+<template>
+  <div class="business-supervision__content">
+    <content-top />
+    <content-middle />
+    <content-bottom />
+  </div>
+</template>
+
+<style lang="scss" scoped></style>

src/views/business-supervision/components/business-supervision-left/components/sidebar-left-middle.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 
-import { renderEcharts } from '@/views/business-supervision/business-supervision-left/charts/sidebarMiddle';
+import { renderEcharts } from '@/views/business-supervision/components/business-supervision-left/charts/sidebarMiddle';
 
 const chartPie = ref<HTMLDivElement>();
 

src/views/business-supervision/components/business-supervision-left/components/sidebar-left-top.vue

@@ -1,13 +1,13 @@
 <script lang="tsx" setup>
 import { onMounted, ref } from 'vue';
 
+import { displayContent } from '@/components/CommonItem/DigitalNumber';
 import TimeSelect from '@/components/TimeSelect/index.vue';
 import { TimeSelectType } from '@/components/TimeSelect/type';
-import formatter from '@/utils/digte-formatter';
-import { renderEcharts } from '@/views/business-supervision/business-supervision-left/charts/sidebarTop';
+import { renderEcharts } from '@/views/business-supervision/components/business-supervision-left/charts/sidebarTop';
 
 const chartProgress = ref<HTMLDivElement>();
-const money = ref('1386114');
+const money = '1386114';
 
 const timeList = ref<TimeSelectType[]>([
   { label: '2020.09', value: '2021' },
@@ -15,19 +15,6 @@ const timeList = ref<TimeSelectType[]>([
   { label: '2020.09', value: '2021' },
 ]);
 
-/** 显示金额 */
-const displayContent = () => {
-  formatter(money);
-  return (
-    <>
-      <span>¥</span>
-      {money.value.split('').map((item, index) => (
-        <span key={index}>{item}</span>
-      ))}
-    </>
-  );
-};
-
 onMounted(() => {
   renderEcharts(chartProgress);
 });
@@ -46,7 +33,7 @@ onMounted(() => {
     </div>
 
     <div class="business-supervision__sidebar-money-digit">
-      <component :is="displayContent()" />
+      <component :is="displayContent(money)" />
     </div>
 
     <div>

src/views/business-supervision/components/business-supervision-left/index.vue

@@ -0,0 +1,13 @@
+<script lang="tsx" setup>
+import SidebarLeftBottom from '@/views/business-supervision/components/business-supervision-left/components/sidebar-left-bottom.vue';
+import SidebarLeftMiddle from '@/views/business-supervision/components/business-supervision-left/components/sidebar-left-middle.vue';
+import SidebarLeftTop from '@/views/business-supervision/components/business-supervision-left/components/sidebar-left-top.vue';
+</script>
+
+<template>
+  <div class="business-supervision__sidebar">
+    <sidebar-left-top />
+    <sidebar-left-middle />
+    <sidebar-left-bottom />
+  </div>
+</template>

src/views/business-supervision/components/business-supervision-right/components/sidebar-right-bottom.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 
-import BottomChart from '@/views/business-supervision/business-supervision-right/chart/bottom-chart.vue';
+import BottomChart from '@/views/business-supervision/components/business-supervision-right/chart/bottom-chart.vue';
 
 const charData1 = ref(Math.round(Math.random() * 100));
 const charData2 = ref(Math.round(Math.random() * 100));

src/views/business-supervision/components/business-supervision-right/index.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import SidebarRightBottom from '@/views/business-supervision/components/business-supervision-right/components/sidebar-right-bottom.vue';
+import SidebarRightMiddle from '@/views/business-supervision/components/business-supervision-right/components/sidebar-right-middle.vue';
+import SidebarRightTop from '@/views/business-supervision/components/business-supervision-right/components/sidebar-right-top.vue';
+</script>
+
+<template>
+  <div class="business-supervision__sidebar flex-y-between">
+    <sidebar-right-top />
+
+    <sidebar-right-middle />
+
+    <sidebar-right-bottom />
+  </div>
+</template>
+
+<style lang="scss" scoped></style>

src/views/business-supervision/index.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import MangeContent from '@/views/business-supervision/business-supervision-content/index.vue';
-import BusinessSupervisionLeft from '@/views/business-supervision/business-supervision-left/index.vue';
-import BusinessSupervisionRight from '@/views/business-supervision/business-supervision-right/index.vue';
+import MangeContent from '@/views/business-supervision/components/business-supervision-content/index.vue';
+import BusinessSupervisionLeft from '@/views/business-supervision/components/business-supervision-left/index.vue';
+import BusinessSupervisionRight from '@/views/business-supervision/components/business-supervision-right/index.vue';
 </script>
 
 <template>

src/views/smart-park/components/smart-park-content/components/smart-park-content/components/content-item.vue

@@ -15,7 +15,7 @@ defineProps({
       <img
         alt="arrow-item"
         class="float-left h-[16px]"
-        src="../../../../../../assets/images/smart-park/arrow/arrow-item.png"
+        src="../../../../../../../assets/images/smart-park/arrow/arrow-item.png"
       />
     </div>
   </div>

src/views/smart-park/components/smart-park-content/components/smart-park-content/index.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import ContentItem from '@/views/smart-park/smart-park-content/components/smart-park-content/components/content-item.vue';
-import ContentPercent from '@/views/smart-park/smart-park-content/components/smart-park-content/components/content-percent.vue';
+import ContentItem from '@/views/smart-park/components/smart-park-content/components/smart-park-content/components/content-item.vue';
+import ContentPercent from '@/views/smart-park/components/smart-park-content/components/smart-park-content/components/content-percent.vue';
 </script>
 
 <template>

src/views/smart-park/components/smart-park-content/components/smart-park-sidebar-left/index.vue

@@ -11,22 +11,22 @@
       <!-- 汽车列表 -->
       <ul class="mt-[32px]">
         <li class="smart-park__sidebar--left-item">
-          <img alt="car-1" src="../../../../../assets/images/smart-park/car/car-1.png" />
+          <img alt="car-1" src="../../../../../../assets/images/smart-park/car/car-1.png" />
           <p>入卡口（西北门）</p>
           <span class="dashed-circle c-primary-secondary border-b-primary-secondary">畅通</span>
         </li>
         <li class="smart-park__sidebar--left-item">
-          <img alt="car-1" src="../../../../../assets/images/smart-park/car/car-1.png" />
+          <img alt="car-1" src="../../../../../../assets/images/smart-park/car/car-1.png" />
           <p>入卡口（东北门）</p>
           <span class="dashed-circle c-primary-secondary border-b-primary-secondary">畅通</span>
         </li>
         <li class="smart-park__sidebar--left-item">
-          <img alt="car-1" src="../../../../../assets/images/smart-park/car/car-2.png" />
+          <img alt="car-1" src="../../../../../../assets/images/smart-park/car/car-2.png" />
           <p>入卡口（东北门）</p>
           <span class="dashed-circle c-warning border-b-warning">拥堵</span>
         </li>
         <li class="smart-park__sidebar--left-item">
-          <img alt="car-1" src="../../../../../assets/images/smart-park/car/car-1.png" />
+          <img alt="car-1" src="../../../../../../assets/images/smart-park/car/car-1.png" />
           <p>入卡口（东南门）</p>
           <span class="dashed-circle c-primary-secondary border-b-primary-secondary">畅通</span>
         </li>

src/views/smart-park/components/smart-park-content/components/smart-park-sidebar-right/index.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
 
-import { renderEcharts } from '@/views/smart-park/smart-park-content/components/smart-park-sidebar-right/charts/charts';
+import { renderEcharts } from '@/views/smart-park/components/smart-park-content/components/smart-park-sidebar-right/charts/charts';
 
 const weekDataChart = ref<HTMLDivElement>();
 

src/views/smart-park/components/smart-park-content/index.vue

@@ -0,0 +1,13 @@
+<script lang="ts" setup>
+import SmartPartContent from '@/views/smart-park/components/smart-park-content/components/smart-park-content/index.vue';
+import SmartPartSidebarLeft from '@/views/smart-park/components/smart-park-content/components/smart-park-sidebar-left/index.vue';
+import SmartPartSidebarRight from '@/views/smart-park/components/smart-park-content/components/smart-park-sidebar-right/index.vue';
+</script>
+
+<template>
+  <main class="pt-[78px] mx-auto flex-center w-[1620px] h-[650px]">
+    <smart-part-sidebar-left />
+    <smart-part-content />
+    <smart-part-sidebar-right />
+  </main>
+</template>

src/views/smart-park/components/smart-park-footer/index.vue

@@ -4,7 +4,7 @@
   <footer>
     <ul class="smart-park__footer-nav">
       <li v-for="index in new Array(5)" :key="index" class="smart-park__footer-item">
-        <img alt="车辆管理" src="../../../assets/images/smart-park/car/car-39.png" />
+        <img alt="车辆管理" src="../../../../assets/images/smart-park/car/car-39.png" />
         <span class="text-white hover">车辆管理</span>
       </li>
     </ul>

src/views/smart-park/index.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import SmartPartContent from '@/views/smart-park/smart-park-content/index.vue';
-import SmartPartFooter from '@/views/smart-park/smart-park-footer/index.vue';
+import SmartPartContent from '@/views/smart-park/components/smart-park-content/index.vue';
+import SmartPartFooter from '@/views/smart-park/components/smart-park-footer/index.vue';
 </script>
 
 <template>

src/views/smart-park/smart-park-content/index.vue

@@ -1,15 +0,0 @@
-<script lang="ts" setup>
-import SmartPartContent from '@/views/smart-park/smart-park-content/components/smart-park-content/index.vue';
-import SmartPartSidebarLeft from '@/views/smart-park/smart-park-content/components/smart-park-sidebar-left/index.vue';
-import SmartPartSidebarRight from '@/views/smart-park/smart-park-content/components/smart-park-sidebar-right/index.vue';
-</script>
-
-<template>
-  <main class="pt-[78px] mx-auto flex-center w-[1620px] h-[650px]">
-    <smart-part-sidebar-left />
-    <smart-part-content />
-    <smart-part-sidebar-right />
-  </main>
-</template>
-
-<style lang="scss" scoped></style>

src/views/welcome/components/welcome-content/content-list.vue

@@ -7,23 +7,26 @@ const router = useRouter();
 <template>
   <ul class="welcome__content-list">
     <li @click="router.push('/smart-park')">
-      <img alt="car" src="@/assets/images/welcome/icon/center/car.png" />
+      <img alt="car" src="../../../../assets/images/welcome/icon/center/car.png" />
       <span>智慧停车</span>
     </li>
     <li>
-      <img alt="distribution" src="@/assets/images/welcome/icon/center/distribution.png" />
+      <img
+        alt="distribution"
+        src="../../../../assets/images/welcome/icon/center/distribution.png"
+      />
       <span>智慧配送</span>
     </li>
     <li>
-      <img alt="muck" src="@/assets/images/welcome/icon/center/muck.png" />
+      <img alt="muck" src="../../../../assets/images/welcome/icon/center/muck.png" />
       <span>智慧渣土</span>
     </li>
     <li>
-      <img alt="clean-city" src="@/assets/images/welcome/icon/center/clean-city.png" />
+      <img alt="clean-city" src="../../../../assets/images/welcome/icon/center/clean-city.png" />
       <span>智慧洁城</span>
     </li>
     <li>
-      <img alt="lamp" src="@/assets/images/welcome/icon/center/lamp.png" />
+      <img alt="lamp" src="../../../../assets/images/welcome/icon/center/lamp.png" />
       <span>智慧路灯</span>
     </li>
   </ul>

src/views/welcome/components/welcome-content/index.vue

@@ -1,12 +1,12 @@
 <script lang="ts" setup>
-import ContentList from '@/views/welcome/welcome-content/content-list.vue';
+import ContentList from '@/views/welcome/components/welcome-content/content-list.vue';
 </script>
 
 <template>
   <div class="welcome__content flex-y-around">
     <div class="mt-[158px]">
       <p>
-        <img alt="welcome-bg" src="@/assets/images/welcome/icon/welcome.png" />
+        <img alt="welcome-bg" src="../../../../assets/images/welcome/icon/welcome.png" />
         <i>xxxx</i>
         你好 欢迎使用xxxxxxxzz
       </p>

src/views/welcome/index.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import WelcomeContent from '@/views/welcome/welcome-content/index.vue';
-import WelcomeFooter from '@/views/welcome/welcome-footer.vue';
+import WelcomeContent from '@/views/welcome/components/welcome-content/index.vue';
+import WelcomeFooter from '@/views/welcome/components/welcome-footer.vue';
 </script>
 
 <template>