v2

src/modules/home/components/Card.vue

@@ -6,18 +6,9 @@ defineProps({ data: { type: Object, default: () => ({}) } })
 </script>
 
 <template>
-  <AppCard :title="data.title" :class="data.className">
+  <AppCard :title="data.title">
     <div class="box">
-      <div class="box-left">
-        <div class="box-row" v-for="(row, index) in data.leftItems" :key="index">
-          <CardBoxCell v-for="(cell, index) in row" :data="cell" :key="index"></CardBoxCell>
-        </div>
-      </div>
-      <div class="box-right" v-if="data.rightItems">
-        <div class="box-row" v-for="(row, index) in data.rightItems" :key="index">
-          <CardBoxCell v-for="(cell, index) in row" :data="cell" :key="index"></CardBoxCell>
-        </div>
-      </div>
+      <CardBoxCell v-for="(cell, index) in data.items" :data="cell" :key="index"></CardBoxCell>
     </div>
   </AppCard>
 </template>
@@ -25,37 +16,12 @@ defineProps({ data: { type: Object, default: () => ({}) } })
 <style lang="scss">
 .box {
   display: flex;
-}
-.box-left {
-  flex: 1;
-  .box-cell:hover {
-    background-color: #aa1941;
-  }
-}
-.box-right {
-  flex: 1;
-  margin-left: 20px;
-  padding-left: 20px;
-  border-left: 1px dashed #c1c1c1;
-  .box-cell:hover {
-    background-color: #136ca8;
-  }
+  padding: 10px 0;
 }
 .box-row {
   display: flex;
 }
-.box-row + .box-row {
-  margin-top: 20px;
-}
-.box-cell + .box-cell {
-  margin-left: 20px;
-}
-.is-blue {
-  .app-card-hd__title {
-    border-color: #136ca8;
-  }
-  .box-cell:hover {
-    background-color: #136ca8;
-  }
-}
+// .box-cell + .box-cell {
+//   margin-left: 20px;
+// }
 </style>

src/modules/home/components/CardBoxCell.vue

@@ -6,33 +6,20 @@ function handleClick() {
 </script>
 
 <template>
-  <div class="box-cell" v-if="data.href">
+  <div class="box-cell" :class="data.className" @click="handleClick">
     <a :href="data.href" target="_blank">
       <div class="box-cell-icon">
         <img :src="data.icon" class="icon-normal" />
         <img :src="data.hoverIcon" class="icon-hover" />
       </div>
-      <div class="box-cell-name">{{ data.title }}</div>
+      <div class="box-cell-name" v-html="data.title"></div>
     </a>
   </div>
-  <div class="box-cell" @click="handleClick" v-else>
-    <div class="box-cell-icon">
-      <img :src="data.icon" class="icon-normal" />
-      <img :src="data.hoverIcon" class="icon-hover" />
-    </div>
-    <div class="box-cell-name">{{ data.title }}</div>
-  </div>
 </template>
 
 <style lang="scss">
 .box-cell {
   flex: 1;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  background-color: #f7f5f5;
-  height: 150px;
   border-radius: 20px;
   color: #333;
   cursor: pointer;
@@ -40,33 +27,43 @@ function handleClick() {
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: center;
     color: inherit;
     width: 100%;
     height: 100%;
   }
   &:hover {
-    color: #fff;
-    box-shadow: 4px 3px 14px rgba(0, 0, 0, 0.37);
-    a {
-      color: #fff;
+    .box-cell-icon {
+      background-color: #aa1941;
+      box-shadow: 0px 3px 18px rgba(0, 0, 0, 0.27);
     }
     .icon-normal {
       display: none;
     }
     .icon-hover {
-      display: block;
+      display: unset;
+    }
+  }
+  &.is-blue {
+    &:hover {
+      .box-cell-icon {
+        background-color: #005690;
+      }
     }
   }
 }
 .box-cell-icon {
-  height: 46px;
+  width: 80px;
+  height: 80px;
+  background-color: #f7f5f5;
+  text-align: center;
+  line-height: 80px;
+  border-radius: 50%;
   img {
-    height: 100%;
+    height: 34px;
     object-fit: contain;
   }
   .icon-normal {
-    display: block;
+    display: unset;
   }
   .icon-hover {
     display: none;
@@ -77,5 +74,7 @@ function handleClick() {
   font-size: 16px;
   font-weight: 400;
   line-height: 28px;
+  text-align: center;
+  white-space: nowrap;
 }
 </style>

src/modules/index.ts

-import type { Router } from 'vue-router'
-import type { AppModule } from '@/types'
+import type { Router, RouteRecordRaw } from 'vue-router'
 
 export default function ({ router }: { router: Router }) {
-  const modules: Array<AppModule> = Object.values(import.meta.globEager('./**/index.ts'))
+  const modules: Array<{ routes: Array<RouteRecordRaw> }> = Object.values(import.meta.globEager('./**/index.ts'))
   modules.forEach(({ routes = [] }) => {
     // 注册路由
     routes.forEach(route => {

src/types.ts

-import type { RouteRecordRaw } from 'vue-router'
-
 export interface UserState {
   id: string
   avatar: string
@@ -8,7 +6,3 @@ export interface UserState {
   nickname: string
   username: string
 }
-
-export interface AppModule {
-  routes: Array<RouteRecordRaw>
-}

vite.config.ts

@@ -9,7 +9,7 @@ import checker from 'vite-plugin-checker'
 export default defineConfig(({ mode }) => {
   return {
     base: mode === 'prod' ? 'https://webapp-pub.ezijing.com/website/prod/sass/' : '/',
-    plugins: [checker({ eslint: { lintCommand: 'eslint "./src/**/*.{vue,js,jsx,ts,tsx}"' } }), vue()],
+    plugins: [checker({ vueTsc: true, eslint: { lintCommand: 'eslint "./src/**/*.{vue,js,jsx,ts,tsx}"' } }), vue()],
     server: {
       open: true,
       host: 'dev.ezijing.com',