项目初始化

web-vue/packages/core/layouts/screen/welcome/Erp/index.vue

@@ -7,17 +7,9 @@
     </div>
 
     <div class="erp-section erp-upper-section">
-      <div 
+      <div v-for="item in getComponentsBySortRange(1, 3)" :key="item.sort" class="erp-col erp-col-1-3">
-        v-for="item in getComponentsBySortRange(1, 3)" 
-        :key="item.sort"
-        class="erp-col erp-col-1-3"
-      >
         <div class="erp-card">
-          <component
+          <component :is="componentMap[item.vueName]" :formParams="FormValues" v-if="componentMap[item.vueName]" />
-            :is="componentMap[item.vueName]"
-            :formParams="FormValues"
-            v-if="componentMap[item.vueName]"
-          />
         </div>
       </div>
     </div>
@@ -25,17 +17,9 @@
     <div class="erp-section erp-middle-section">
       <div class="erp-col erp-col-1-2">
         <div class="erp-inner-layout">
-          <div 
+          <div v-for="item in getComponentsBySortRange(4, 5)" :key="item.sort" class="erp-col erp-col-1-2">
-            v-for="item in getComponentsBySortRange(4, 5)" 
-            :key="item.sort"
-            class="erp-col erp-col-1-2"
-          >
             <div class="erp-card">
-              <component
+              <component :is="componentMap[item.vueName]" :formParams="FormValues" v-if="componentMap[item.vueName]" />
-                :is="componentMap[item.vueName]"
-                :formParams="FormValues"
-                v-if="componentMap[item.vueName]"
-              />
             </div>
           </div>
         </div>
@@ -54,17 +38,9 @@
     <div class="erp-section erp-lower-section">
       <div class="erp-col erp-col-1-2">
         <div class="erp-inner-layout">
-          <div 
+          <div v-for="item in getComponentsBySortRange(7, 8)" :key="item.sort" class="erp-col erp-col-1-2">
-            v-for="item in getComponentsBySortRange(7, 8)" 
-            :key="item.sort"
-            class="erp-col erp-col-1-2"
-          >
             <div class="erp-card">
-              <component
+              <component :is="componentMap[item.vueName]" :formParams="FormValues" v-if="componentMap[item.vueName]" />
-                :is="componentMap[item.vueName]"
-                :formParams="FormValues"
-                v-if="componentMap[item.vueName]"
-              />
             </div>
           </div>
         </div>
@@ -83,285 +59,279 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, watch, onMounted, defineAsyncComponent } from 'vue';
+  import { ref, watch, onMounted, defineAsyncComponent } from 'vue';
-import { useRoute } from 'vue-router';
+  import { useRoute } from 'vue-router';
-import type { Component } from 'vue';
+  import type { Component } from 'vue';
-import ChartTop from './components/ChartTop.vue';
+  import ChartTop from './components/ChartTop.vue';
-import { MyChartInfo, myChartInfoListAll } from '@jeesite/biz/api/biz/myChartInfo';
+  import { MyChartInfo, myChartInfoListAll } from '@jeesite/biz/api/biz/myChartInfo';
 
-const route = useRoute();
+  const route = useRoute();
 
-// 1. 完善类型定义，避免 any 类型
+  const FormValues = ref({
-const FormValues = ref({
+    yearDate: route.query.yearDate || '',
-  yearDate: route.query.yearDate || ''
-});
-
-// 2. 定义组件映射的类型
-interface ComponentMap {
-  [key: string]: Component;
-}
-
-// 3. 初始化时赋空数组，避免 undefined 问题
-const componentMap = ref<ComponentMap>({});
-const chartData = ref<MyChartInfo[]>([]);
-
-// 4. 优化空值处理
-const getComponentBySort = (sort: number): MyChartInfo | undefined => {
-  if (!chartData.value.length) return undefined;
-  return chartData.value.find(item => item.sort === sort);
-};
-
-const getComponentsBySortRange = (start: number, end: number): MyChartInfo[] => {
-  if (!chartData.value.length) return [];
-  return chartData.value.filter(item => item.sort >= start && item.sort <= end);
-};
-
-// 5. 优化组件加载函数
-const loadComponent = (vueName: string) => {
-  return defineAsyncComponent({
-    loader: () => import(`./components/${vueName}.vue`),
-    delay: 200,
-    timeout: 5000
   });
-};
 
-// 6. 封装数据获取逻辑
+  interface ComponentMap {
-async function getChartList() {
+    [key: string]: Component;
-  try {
-    const reqParams = {
-      chartCode: 'erp'
-    };
-    const res = await myChartInfoListAll(reqParams);
-    chartData.value = res || [];
-    // 排序确保顺序正确
-    chartData.value.sort((a, b) => a.sort - b.sort);
-  } catch (error) {
-    console.error('获取数据失败:', error);
-    chartData.value = [];
   }
-}
 
-// 7. 监听路由参数变化
+  const componentMap = ref<ComponentMap>({});
-watch(
+  const chartData = ref<MyChartInfo[]>([]);
-  () => route.query.yearDate,
-  (newVal) => {
-    FormValues.value.yearDate = newVal || '';
-  },
-  { 
-    deep: true,
-    immediate: true
-  }
-);
 
-onMounted(async () => {
+  const getSortValue = (item: MyChartInfo) => Number(item.sort ?? 0);
-  try {
+
-    await getChartList();
+  const getComponentBySort = (sort: number): MyChartInfo | undefined => {
-    
+    if (!chartData.value.length) return undefined;
-    const newComponentMap: ComponentMap = {};
+    return chartData.value.find((item) => getSortValue(item) === sort);
-    // 获取唯一的组件名称
+  };
-    const uniqueComponents = [...new Set(chartData.value.map(item => item.vueName))];
+
-    
+  const getComponentsBySortRange = (start: number, end: number): MyChartInfo[] => {
-    // 加载所有需要的组件
+    if (!chartData.value.length) return [];
-    for (const vueName of uniqueComponents) {
+    return chartData.value.filter((item) => {
-      if (vueName) {
+      const sort = getSortValue(item);
-        newComponentMap[vueName] = loadComponent(vueName);
+      return sort >= start && sort <= end;
-      }
+    });
+  };
+
+  const loadComponent = (vueName: string) => {
+    return defineAsyncComponent({
+      loader: () => import(`./components/${vueName}.vue`),
+      delay: 200,
+      timeout: 5000,
+    });
+  };
+
+  async function getChartList() {
+    try {
+      const reqParams = {
+        chartCode: 'erp',
+      };
+      const res = await myChartInfoListAll(reqParams);
+      chartData.value = res || [];
+      chartData.value.sort((a, b) => getSortValue(a) - getSortValue(b));
+    } catch (error) {
+      console.error('获取数据失败:', error);
+      chartData.value = [];
     }
-    
-    componentMap.value = newComponentMap;
-  } catch (error) {
-    console.error('加载图表数据失败：', error);
   }
-});
+
+  watch(
+    () => route.query.yearDate,
+    (newVal) => {
+      FormValues.value.yearDate = newVal || '';
+    },
+    {
+      deep: true,
+      immediate: true,
+    },
+  );
+
+  onMounted(async () => {
+    try {
+      await getChartList();
+
+      const newComponentMap: ComponentMap = {};
+      const uniqueComponents = [...new Set(chartData.value.map((item) => item.vueName))];
+      for (const vueName of uniqueComponents) {
+        if (vueName) {
+          newComponentMap[vueName] = loadComponent(vueName);
+        }
+      }
+
+      componentMap.value = newComponentMap;
+    } catch (error) {
+      console.error('加载图表数据失败：', error);
+    }
+  });
 </script>
 
 <style scoped>
-.erp-layout-container {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  padding: 2px;
-  margin: 0 !important;
-  box-sizing: border-box;
-  background-color: transparent;
-  overflow: hidden;
-}
-
-.erp-section {
-  width: 100%;
-  display: flex;
-  gap: 2px;
-  box-sizing: border-box;
-  overflow: hidden;
-}
-
-.erp-top-header {
-  height: 10%;
-}
-
-.erp-upper-section,
-.erp-middle-section,
-.erp-lower-section {
-  height: 30%;
-}
-
-.erp-col {
-  height: 100%;
-  box-sizing: border-box;
-  overflow: hidden;
-}
-
-.erp-col-1-3 {
-  width: calc((100% - 4px) / 3);
-}
-
-.erp-col-1-2 {
-  width: calc((100% - 2px) / 2);
-}
-
-.erp-inner-layout {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  gap: 2px;
-  box-sizing: border-box;
-}
-
-.erp-card {
-  width: 100%;
-  height: 100%;
-  background-color: rgba(15, 52, 96, 0.1);
-  border: 1px solid rgba(26, 80, 139, 0.3);
-  border-radius: 8px;
-  padding: 2px;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  color: #e0e6ff;
-  backdrop-filter: blur(2px);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  min-height: 0;
-}
-
-.full-card {
-  width: 100%;
-}
-
-.erp-card:hover {
-  box-shadow: 0 4px 12px rgba(60, 156, 255, 0.2);
-  border-color: rgba(60, 156, 255, 0.6);
-  transition: all 0.3s ease;
-}
-
-.erp-card h3 {
-  font-size: 16px;
-  margin-bottom: 8px;
-  letter-spacing: 1px;
-  background: #3c9cff;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  font-weight: 600;
-}
-
-.erp-card p {
-  font-size: 13px;
-  opacity: 0.75;
-  color: #b4c7e7;
-  text-align: center;
-  line-height: 1.5;
-}
-
-.empty-card {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  color: #88a0c2;
-  font-size: 14px;
-}
-
-/* 优化移动端样式 */
-@media (max-width: 1600px) {
   .erp-layout-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
     padding: 2px;
-    gap: 2px;
+    margin: 0 !important;
+    box-sizing: border-box;
+    background-color: transparent;
+    overflow: hidden;
   }
+
   .erp-section {
+    width: 100%;
+    display: flex;
     gap: 2px;
+    box-sizing: border-box;
+    overflow: hidden;
   }
+
+  .erp-top-header {
+    height: 10%;
+  }
+
+  .erp-upper-section,
+  .erp-middle-section,
+  .erp-lower-section {
+    height: 30%;
+  }
+
+  .erp-col {
+    height: 100%;
+    box-sizing: border-box;
+    overflow: hidden;
+  }
+
   .erp-col-1-3 {
     width: calc((100% - 4px) / 3);
   }
+
   .erp-col-1-2 {
     width: calc((100% - 2px) / 2);
   }
-  .erp-inner-layout {
-    gap: 2px;
-  }
-  .erp-card {
-    padding: 2px;
-  }
-  .erp-card h3 {
-    font-size: 14px;
-  }
-  .erp-card p {
-    font-size: 12px;
-  }
-}
 
-@media (max-width: 768px) {
+  .erp-inner-layout {
-  .erp-layout-container {
-    flex-direction: column;
-    height: auto;
-    min-height: 100vh;
-    padding: 2px;
-    gap: 2px;
-    overflow-y: auto;
-  }
-  .erp-section {
-    flex-direction: column;
-    height: auto !important;
-    min-height: 120px;
-    gap: 2px;
-    margin-bottom: 8px;
-  }
-  .erp-col-1-3,
-  .erp-col-1-2 {
     width: 100%;
-    height: 120px; /* 固定高度，避免计算错误 */
-    margin-bottom: 2px;
-  }
-  .erp-inner-layout {
-    flex-direction: column;
     height: 100%;
+    display: flex;
     gap: 2px;
+    box-sizing: border-box;
   }
-  .erp-card {
-    padding: 8px; /* 增加移动端内边距，提升体验 */
-  }
-}
 
-@media (max-height: 900px) {
-  .erp-layout-container {
-    padding: 2px;
-    gap: 2px;
-  }
-  .erp-section {
-    gap: 2px;
-  }
   .erp-card {
+    width: 100%;
+    height: 100%;
+    background-color: rgba(15, 52, 96, 0.1);
+    border: 1px solid rgba(26, 80, 139, 0.3);
+    border-radius: 8px;
     padding: 2px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    color: #e0e6ff;
+    backdrop-filter: blur(2px);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    min-height: 0;
   }
+
+  .full-card {
+    width: 100%;
+  }
+
+  .erp-card:hover {
+    box-shadow: 0 4px 12px rgba(60, 156, 255, 0.2);
+    border-color: rgba(60, 156, 255, 0.6);
+    transition: all 0.3s ease;
+  }
+
   .erp-card h3 {
-    font-size: 14px;
+    font-size: 16px;
-    margin-bottom: 6px;
+    margin-bottom: 8px;
+    letter-spacing: 1px;
+    background: #3c9cff;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    font-weight: 600;
   }
+
   .erp-card p {
-    font-size: 12px;
+    font-size: 13px;
+    opacity: 0.75;
+    color: #b4c7e7;
+    text-align: center;
+    line-height: 1.5;
   }
-}
+
-</style>
+  .empty-card {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    color: #88a0c2;
+    font-size: 14px;
+  }
+
+  /* 优化移动端样式 */
+  @media (max-width: 1600px) {
+    .erp-layout-container {
+      padding: 2px;
+      gap: 2px;
+    }
+    .erp-section {
+      gap: 2px;
+    }
+    .erp-col-1-3 {
+      width: calc((100% - 4px) / 3);
+    }
+    .erp-col-1-2 {
+      width: calc((100% - 2px) / 2);
+    }
+    .erp-inner-layout {
+      gap: 2px;
+    }
+    .erp-card {
+      padding: 2px;
+    }
+    .erp-card h3 {
+      font-size: 14px;
+    }
+    .erp-card p {
+      font-size: 12px;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .erp-layout-container {
+      flex-direction: column;
+      height: auto;
+      min-height: 100vh;
+      padding: 2px;
+      gap: 2px;
+      overflow-y: auto;
+    }
+    .erp-section {
+      flex-direction: column;
+      height: auto !important;
+      min-height: 120px;
+      gap: 2px;
+      margin-bottom: 8px;
+    }
+    .erp-col-1-3,
+    .erp-col-1-2 {
+      width: 100%;
+      height: 120px; /* 固定高度，避免计算错误 */
+      margin-bottom: 2px;
+    }
+    .erp-inner-layout {
+      flex-direction: column;
+      height: 100%;
+      gap: 2px;
+    }
+    .erp-card {
+      padding: 8px; /* 增加移动端内边距，提升体验 */
+    }
+  }
+
+  @media (max-height: 900px) {
+    .erp-layout-container {
+      padding: 2px;
+      gap: 2px;
+    }
+    .erp-section {
+      gap: 2px;
+    }
+    .erp-card {
+      padding: 2px;
+    }
+    .erp-card h3 {
+      font-size: 14px;
+      margin-bottom: 6px;
+    }
+    .erp-card p {
+      font-size: 12px;
+    }
+  }
+</style>

web-vue/packages/core/layouts/screen/welcome/Home/index.vue

@@ -8,44 +8,20 @@
 
     <div class="work-section work-main-section">
       <div class="work-row work-row-1-3">
-        <div
+        <div v-for="item in getComponentsBySortRange(1, 3)" :key="item.sort" class="work-card work-card-1-3">
-          v-for="item in getComponentsBySortRange(1, 3)"
+          <component :is="componentMap[item.vueName]" :formParams="FormValues" v-if="componentMap[item.vueName]" />
-          :key="item.sort"
-          class="work-card work-card-1-3"
-        >
-          <component
-            :is="componentMap[item.vueName]"
-            :formParams="FormValues"
-            v-if="componentMap[item.vueName]"
-          />
         </div>
       </div>
 
       <div class="work-row work-row-1-3">
-        <div
+        <div v-for="item in getComponentsBySortRange(4, 5)" :key="item.sort" class="work-card work-card-1-2">
-          v-for="item in getComponentsBySortRange(4, 5)"
+          <component :is="componentMap[item.vueName]" :formParams="FormValues" v-if="componentMap[item.vueName]" />
-          :key="item.sort"
-          class="work-card work-card-1-2"
-        >
-          <component
-            :is="componentMap[item.vueName]"
-            :formParams="FormValues"
-            v-if="componentMap[item.vueName]"
-          />
         </div>
       </div>
 
       <div class="work-row work-row-1-3">
-        <div
+        <div v-for="item in getComponentsBySortRange(6, 7)" :key="item.sort" class="work-card work-card-1-2">
-          v-for="item in getComponentsBySortRange(6, 7)"
+          <component :is="componentMap[item.vueName]" :formParams="FormValues" v-if="componentMap[item.vueName]" />
-          :key="item.sort"
-          class="work-card work-card-1-2"
-        >
-          <component
-            :is="componentMap[item.vueName]"
-            :formParams="FormValues"
-            v-if="componentMap[item.vueName]"
-          />
         </div>
       </div>
     </div>
@@ -53,229 +29,239 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, watch, onMounted } from 'vue';
+  import { ref, watch, onMounted } from 'vue';
-import { useRoute } from 'vue-router';
+  import type { Component } from 'vue';
-import ChartTop from './components/ChartTop.vue';
+  import { useRoute } from 'vue-router';
-import { MyChartInfo, myChartInfoListAll } from '@jeesite/biz/api/biz/myChartInfo';
+  import ChartTop from './components/ChartTop.vue';
+  import { MyChartInfo, myChartInfoListAll } from '@jeesite/biz/api/biz/myChartInfo';
 
-const route = useRoute();
+  const route = useRoute();
 
-const FormValues = ref({
+  const FormValues = ref({
-  yearDate: route.query.yearDate
+    yearDate: route.query.yearDate || '',
-});
+  });
 
-watch(
+  watch(
-  () => route.query.yearDate,
+    () => route.query.yearDate,
-  (newVal) => {
+    (newVal) => {
-    FormValues.value.yearDate = newVal;
+      FormValues.value.yearDate = newVal || '';
-  },
+    },
-  {
+    {
-    deep: true,
+      deep: true,
-    immediate: true
+      immediate: true,
+    },
+  );
+
+  interface ComponentMap {
+    [key: string]: Component;
   }
-);
 
-const componentMap = ref({});
+  const componentMap = ref<ComponentMap>({});
-const chartData = ref([]);
+  const chartData = ref<MyChartInfo[]>([]);
 
-const getComponentsBySortRange = (start, end) => {
+  const getSortValue = (item: MyChartInfo) => Number(item.sort ?? 0);
-  return chartData.value.filter(item => item.sort >= start && item.sort <= end);
-};
 
-const loadComponent = async (vueName) => {
+  const getComponentsBySortRange = (start: number, end: number): MyChartInfo[] => {
-  try {
+    return chartData.value.filter((item) => {
-    const module = await import(`./components/${vueName}.vue`);
+      const sort = getSortValue(item);
-    return module.default;
+      return sort >= start && sort <= end;
-  } catch (error) {
+    });
-    console.error('加载组件失败', error);
+  };
-    return null;
-  }
-};
 
-async function getChartList(){
+  const loadComponent = async (vueName: string): Promise<Component | null> => {
-  try {
+    try {
-    const reqParams = {
+      const module = await import(`./components/${vueName}.vue`);
-      chartCode: 'home'
+      return module.default;
+    } catch (error) {
+      console.error('加载组件失败', error);
+      return null;
     }
-    const res = await myChartInfoListAll(reqParams)
+  };
-    chartData.value = res || []
-  } catch (error) {
-    console.error('获取数据失败:', error);
-    chartData.value = []
-  }
-}
 
-onMounted(async () => {
+  async function getChartList() {
-  try {
+    try {
-    await getChartList();
+      const reqParams = {
-    chartData.value = chartData.value.sort((a, b) => a.sort - b.sort);
+        chartCode: 'home',
-    const newComponentMap = {};
+      };
-    const uniqueComponents = [...new Set(chartData.value.map(item => item.vueName))];
+      const res = await myChartInfoListAll(reqParams);
-    for (const vueName of uniqueComponents) {
+      chartData.value = res || [];
-      const component = await loadComponent(vueName);
+    } catch (error) {
-      if (component) {
+      console.error('获取数据失败:', error);
-        newComponentMap[vueName] = component;
+      chartData.value = [];
+    }
+  }
+
+  onMounted(async () => {
+    try {
+      await getChartList();
+  
+      const newComponentMap: ComponentMap = {};
+      const uniqueComponents = [...new Set(chartData.value.map((item) => item.vueName))];
+      for (const vueName of uniqueComponents) {
+        if (vueName) {
+          newComponentMap[vueName] = loadComponent(vueName);
+        }
       }
+  
+      componentMap.value = newComponentMap;
+    } catch (error) {
+      console.error('加载图表数据失败：', error);
     }
-    componentMap.value = newComponentMap;
+  });
-  } catch (error) {
-    console.error('加载图表数据失败：', error);
-  }
-});
 </script>
 
 <style scoped>
-.work-layout-container {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  padding: 2px;
-  margin: 0 !important;
-  box-sizing: border-box;
-  background-color: transparent;
-  overflow: hidden;
-}
-
-.work-section {
-  width: 100%;
-  display: flex;
-  gap: 2px;
-  box-sizing: border-box;
-  overflow: hidden;
-}
-
-.work-top-header {
-  height: 10%;
-}
-
-.work-main-section {
-  height: 90%;
-  flex-direction: column;
-}
-
-/* 行样式 */
-.work-row {
-  width: 100%;
-  display: flex;
-  gap: 2px;
-  box-sizing: border-box;
-  overflow: hidden;
-}
-
-.work-row-1-3 {
-  height: calc((100% - 4px) / 3);
-}
-
-/* 一行 3 个时的卡片宽度 */
-.work-card-1-3 {
-  width: calc((100% - 4px) / 3);
-  height: 100%;
-}
-
-/* 一行 2 个时的卡片宽度 */
-.work-card-1-2 {
-  width: calc((100% - 2px) / 2);
-  height: 100%;
-}
-
-.work-card {
-  width: 100%;
-  background-color: rgba(15, 52, 96, 0.1);
-  border: 1px solid rgba(26, 80, 139, 0.3);
-  border-radius: 8px;
-  padding: 2px;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  color: #e0e6ff;
-  backdrop-filter: blur(2px);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  min-height: 0;
-  margin: 0;
-}
-
-.full-card {
-  width: 100%;
-  height: 100%;
-}
-
-.work-card:hover {
-  box-shadow: 0 4px 12px rgba(60, 156, 255, 0.2);
-  border-color: rgba(60, 156, 255, 0.6);
-  transition: all 0.3s ease;
-}
-
-.work-card h3 {
-  font-size: 16px;
-  margin-bottom: 8px;
-  letter-spacing: 1px;
-  background: #3c9cff;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  font-weight: 600;
-}
-
-.work-card p {
-  font-size: 13px;
-  opacity: 0.75;
-  color: #b4c7e7;
-  text-align: center;
-  line-height: 1.5;
-}
-
-.empty-card {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  color: #88a0c2;
-  font-size: 14px;
-}
-
-@media (max-width: 1600px) {
-  .work-card h3 {
-    font-size: 14px;
-  }
-  .work-card p {
-    font-size: 12px;
-  }
-}
-
-@media (max-width: 768px) {
   .work-layout-container {
-    flex-direction: column;
-    height: auto;
-    min-height: 100%;
-    overflow-y: auto;
-  }
-  .work-section {
-    flex-direction: column;
-    height: auto !important;
-    min-height: 120px;
-  }
-  .work-row-1-3 {
-    height: auto;
-    flex-direction: column;
-  }
-  .work-card-1-3,
-  .work-card-1-2 {
     width: 100%;
-    height: 120px;
+    height: 100%;
-    margin-bottom: 2px;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding: 2px;
+    margin: 0 !important;
+    box-sizing: border-box;
+    background-color: transparent;
+    overflow: hidden;
+  }
+
+  .work-section {
+    width: 100%;
+    display: flex;
+    gap: 2px;
+    box-sizing: border-box;
+    overflow: hidden;
+  }
+
+  .work-top-header {
+    height: 10%;
+  }
+
+  .work-main-section {
+    height: 90%;
+    flex-direction: column;
+  }
+
+  /* 行样式 */
+  .work-row {
+    width: 100%;
+    display: flex;
+    gap: 2px;
+    box-sizing: border-box;
+    overflow: hidden;
+  }
+
+  .work-row-1-3 {
+    height: calc((100% - 4px) / 3);
+  }
+
+  /* 一行 3 个时的卡片宽度 */
+  .work-card-1-3 {
+    width: calc((100% - 4px) / 3);
+    height: 100%;
+  }
+
+  /* 一行 2 个时的卡片宽度 */
+  .work-card-1-2 {
+    width: calc((100% - 2px) / 2);
+    height: 100%;
+  }
+
+  .work-card {
+    width: 100%;
+    background-color: rgba(15, 52, 96, 0.1);
+    border: 1px solid rgba(26, 80, 139, 0.3);
+    border-radius: 8px;
+    padding: 2px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    color: #e0e6ff;
+    backdrop-filter: blur(2px);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    min-height: 0;
+    margin: 0;
+  }
+
+  .full-card {
+    width: 100%;
+    height: 100%;
+  }
+
+  .work-card:hover {
+    box-shadow: 0 4px 12px rgba(60, 156, 255, 0.2);
+    border-color: rgba(60, 156, 255, 0.6);
+    transition: all 0.3s ease;
   }
-}
 
-@media (max-height: 900px) {
   .work-card h3 {
-    font-size: 14px;
+    font-size: 16px;
-    margin-bottom: 6px;
+    margin-bottom: 8px;
+    letter-spacing: 1px;
+    background: #3c9cff;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    font-weight: 600;
   }
+
   .work-card p {
-    font-size: 12px;
+    font-size: 13px;
+    opacity: 0.75;
+    color: #b4c7e7;
+    text-align: center;
+    line-height: 1.5;
   }
-}
+
-</style>
+  .empty-card {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    color: #88a0c2;
+    font-size: 14px;
+  }
+
+  @media (max-width: 1600px) {
+    .work-card h3 {
+      font-size: 14px;
+    }
+    .work-card p {
+      font-size: 12px;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .work-layout-container {
+      flex-direction: column;
+      height: auto;
+      min-height: 100%;
+      overflow-y: auto;
+    }
+    .work-section {
+      flex-direction: column;
+      height: auto !important;
+      min-height: 120px;
+    }
+    .work-row-1-3 {
+      height: auto;
+      flex-direction: column;
+    }
+    .work-card-1-3,
+    .work-card-1-2 {
+      width: 100%;
+      height: 120px;
+      margin-bottom: 2px;
+    }
+  }
+
+  @media (max-height: 900px) {
+    .work-card h3 {
+      font-size: 14px;
+      margin-bottom: 6px;
+    }
+    .work-card p {
+      font-size: 12px;
+    }
+  }
+</style>

web-vue/packages/core/layouts/screen/welcome/Sys/index.vue

@@ -8,44 +8,20 @@
 
     <div class="work-section work-main-section">
       <div class="work-row work-row-1-3">
-        <div
+        <div v-for="item in getComponentsBySortRange(1, 3)" :key="item.sort" class="work-card work-card-1-3">
-          v-for="item in getComponentsBySortRange(1, 3)"
+          <component :is="componentMap[item.vueName]" :formParams="FormValues" v-if="componentMap[item.vueName]" />
-          :key="item.sort"
-          class="work-card work-card-1-3"
-        >
-          <component
-            :is="componentMap[item.vueName]"
-            :formParams="FormValues"
-            v-if="componentMap[item.vueName]"
-          />
         </div>
       </div>
 
       <div class="work-row work-row-1-3">
-        <div
+        <div v-for="item in getComponentsBySortRange(4, 6)" :key="item.sort" class="work-card work-card-1-3">
-          v-for="item in getComponentsBySortRange(4, 6)"
+          <component :is="componentMap[item.vueName]" :formParams="FormValues" v-if="componentMap[item.vueName]" />
-          :key="item.sort"
-          class="work-card work-card-1-3"
-        >
-          <component
-            :is="componentMap[item.vueName]"
-            :formParams="FormValues"
-            v-if="componentMap[item.vueName]"
-          />
         </div>
       </div>
 
       <div class="work-row work-row-1-3">
-        <div
+        <div v-for="item in getComponentsBySortRange(7, 9)" :key="item.sort" class="work-card work-card-1-3">
-          v-for="item in getComponentsBySortRange(7, 9)"
+          <component :is="componentMap[item.vueName]" :formParams="FormValues" v-if="componentMap[item.vueName]" />
-          :key="item.sort"
-          class="work-card work-card-1-3"
-        >
-          <component
-            :is="componentMap[item.vueName]"
-            :formParams="FormValues"
-            v-if="componentMap[item.vueName]"
-          />
         </div>
       </div>
     </div>
@@ -53,220 +29,230 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, watch, onMounted } from 'vue';
+  import { ref, watch, onMounted } from 'vue';
-import { useRoute } from 'vue-router';
+  import type { Component } from 'vue';
-import ChartTop from './components/ChartTop.vue';
+  import { useRoute } from 'vue-router';
-import { MyChartInfo, myChartInfoListAll } from '@jeesite/biz/api/biz/myChartInfo';
+  import ChartTop from './components/ChartTop.vue';
+  import { MyChartInfo, myChartInfoListAll } from '@jeesite/biz/api/biz/myChartInfo';
 
-const route = useRoute();
+  const route = useRoute();
 
-const FormValues = ref({
+  const FormValues = ref({
-  yearDate: route.query.year
+    yearDate: route.query.yearDate || '',
-});
+  });
 
-watch(
+  watch(
-  () => route.query.yearDate,
+    () => route.query.yearDate,
-  (newVal) => {
+    (newVal) => {
-    FormValues.value.yearDate = newVal;
+      FormValues.value.yearDate = newVal || '';
-  },
+    },
-  { 
+    {
-    deep: true,
+      deep: true,
-    immediate: true
+      immediate: true,
+    },
+  );
+
+  interface ComponentMap {
+    [key: string]: Component;
   }
-);
 
-const componentMap = ref({});
+  const componentMap = ref<ComponentMap>({});
-const chartData = ref([]);
+  const chartData = ref<MyChartInfo[]>([]);
 
-const getComponentsBySortRange = (start, end) => {
+  const getSortValue = (item: MyChartInfo) => Number(item.sort ?? 0);
-  return chartData.value.filter(item => item.sort >= start && item.sort <= end);
-};
 
-const loadComponent = async (vueName) => {
+  const getComponentsBySortRange = (start: number, end: number): MyChartInfo[] => {
-  try {
+    return chartData.value.filter((item) => {
-    const module = await import(`./components/${vueName}.vue`);
+      const sort = getSortValue(item);
-    return module.default;
+      return sort >= start && sort <= end;
-  } catch (error) {
+    });
-    console.error('加载组件失败', error);
+  };
-    return null;
-  }
-};
 
-async function getChartList(){
+  const loadComponent = async (vueName: string): Promise<Component | null> => {
-	try {
+    try {
-	  const reqParams = {
+      const module = await import(`./components/${vueName}.vue`);
-	  		chartCode: 'sys'
+      return module.default;
-	  	}
+    } catch (error) {
-	  const res = await myChartInfoListAll(reqParams)
+      console.error('加载组件失败', error);
-	  chartData.value = res || []
+      return null;
-	} catch (error) {
+    }
-	  console.error('获取数据失败:', error);
+  };
-	  chartData.value = []
+
-	}
+  async function getChartList() {
-}
+    try {
-
+      const reqParams = {
-onMounted(async () => {
+        chartCode: 'sys',
-  try {
+      };
-    await getChartList();
+      const res = await myChartInfoListAll(reqParams);
-    chartData.value = chartData.value.sort((a, b) => a.sort - b.sort);
+      chartData.value = res || [];
-    const newComponentMap = {};
+    } catch (error) {
-    const uniqueComponents = [...new Set(chartData.value.map(item => item.vueName))];
+      console.error('获取数据失败:', error);
-    for (const vueName of uniqueComponents) {
+      chartData.value = [];
-      const component = await loadComponent(vueName);
-      if (component) {
-        newComponentMap[vueName] = component;
-      }
     }
-    componentMap.value = newComponentMap;
-  } catch (error) {
-    console.error('加载图表数据失败：', error);
   }
-});
+
+  onMounted(async () => {
+    try {
+      await getChartList();
+  
+      const newComponentMap: ComponentMap = {};
+      const uniqueComponents = [...new Set(chartData.value.map((item) => item.vueName))];
+      for (const vueName of uniqueComponents) {
+        if (vueName) {
+          newComponentMap[vueName] = loadComponent(vueName);
+        }
+      }
+  
+      componentMap.value = newComponentMap;
+    } catch (error) {
+      console.error('加载图表数据失败：', error);
+    }
+  });
 </script>
 
 <style scoped>
-.work-layout-container {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  padding: 2px;
-  margin: 0 !important;
-  box-sizing: border-box;
-  background-color: transparent;
-  overflow: hidden;
-}
-
-.work-section {
-  width: 100%;
-  display: flex;
-  gap: 2px;
-  box-sizing: border-box;
-  overflow: hidden;
-}
-
-.work-top-header {
-  height: 10%;
-}
-
-.work-main-section {
-  height: 90%;
-  flex-direction: column;
-}
-
-.work-row {
-  width: 100%;
-  display: flex;
-  gap: 2px;
-  box-sizing: border-box;
-  overflow: hidden;
-}
-
-.work-row-1-3 {
-  height: calc((100% - 4px) / 3);
-}
-
-.work-card-1-3 {
-  width: calc((100% - 4px) / 3);
-  height: 100%;
-}
-
-.work-card {
-  width: 100%;
-  background-color: rgba(15, 52, 96, 0.1);
-  border: 1px solid rgba(26, 80, 139, 0.3);
-  border-radius: 8px;
-  padding: 2px;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  color: #e0e6ff;
-  backdrop-filter: blur(2px);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  min-height: 0;
-  margin: 0;
-}
-
-.full-card {
-  width: 100%;
-  height: 100%;
-}
-
-.work-card:hover {
-  box-shadow: 0 4px 12px rgba(60, 156, 255, 0.2);
-  border-color: rgba(60, 156, 255, 0.6);
-  transition: all 0.3s ease;
-}
-
-.work-card h3 {
-  font-size: 16px;
-  margin-bottom: 8px;
-  letter-spacing: 1px;
-  background: #3c9cff;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  font-weight: 600;
-}
-
-.work-card p {
-  font-size: 13px;
-  opacity: 0.75;
-  color: #b4c7e7;
-  text-align: center;
-  line-height: 1.5;
-}
-
-.empty-card {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  color: #88a0c2;
-  font-size: 14px;
-}
-
-@media (max-width: 1600px) {
-  .work-card h3 {
-    font-size: 14px;
-  }
-  .work-card p {
-    font-size: 12px;
-  }
-}
-
-@media (max-width: 768px) {
   .work-layout-container {
-    flex-direction: column;
-    height: auto;
-    min-height: 100%;
-    overflow-y: auto;
-  }
-  .work-section {
-    flex-direction: column;
-    height: auto !important;
-    min-height: 120px;
-  }
-  .work-row-1-3 {
-    height: auto;
-    flex-direction: column;
-  }
-  .work-card-1-3 {
     width: 100%;
-    height: 120px;
+    height: 100%;
-    margin-bottom: 2px;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding: 2px;
+    margin: 0 !important;
+    box-sizing: border-box;
+    background-color: transparent;
+    overflow: hidden;
+  }
+
+  .work-section {
+    width: 100%;
+    display: flex;
+    gap: 2px;
+    box-sizing: border-box;
+    overflow: hidden;
+  }
+
+  .work-top-header {
+    height: 10%;
+  }
+
+  .work-main-section {
+    height: 90%;
+    flex-direction: column;
+  }
+
+  .work-row {
+    width: 100%;
+    display: flex;
+    gap: 2px;
+    box-sizing: border-box;
+    overflow: hidden;
+  }
+
+  .work-row-1-3 {
+    height: calc((100% - 4px) / 3);
+  }
+
+  .work-card-1-3 {
+    width: calc((100% - 4px) / 3);
+    height: 100%;
+  }
+
+  .work-card {
+    width: 100%;
+    background-color: rgba(15, 52, 96, 0.1);
+    border: 1px solid rgba(26, 80, 139, 0.3);
+    border-radius: 8px;
+    padding: 2px;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    color: #e0e6ff;
+    backdrop-filter: blur(2px);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    min-height: 0;
+    margin: 0;
+  }
+
+  .full-card {
+    width: 100%;
+    height: 100%;
+  }
+
+  .work-card:hover {
+    box-shadow: 0 4px 12px rgba(60, 156, 255, 0.2);
+    border-color: rgba(60, 156, 255, 0.6);
+    transition: all 0.3s ease;
   }
-}
 
-@media (max-height: 900px) {
   .work-card h3 {
-    font-size: 14px;
+    font-size: 16px;
-    margin-bottom: 6px;
+    margin-bottom: 8px;
+    letter-spacing: 1px;
+    background: #3c9cff;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    font-weight: 600;
   }
+
   .work-card p {
-    font-size: 12px;
+    font-size: 13px;
+    opacity: 0.75;
+    color: #b4c7e7;
+    text-align: center;
+    line-height: 1.5;
   }
-}
+
-</style>
+  .empty-card {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    color: #88a0c2;
+    font-size: 14px;
+  }
+
+  @media (max-width: 1600px) {
+    .work-card h3 {
+      font-size: 14px;
+    }
+    .work-card p {
+      font-size: 12px;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .work-layout-container {
+      flex-direction: column;
+      height: auto;
+      min-height: 100%;
+      overflow-y: auto;
+    }
+    .work-section {
+      flex-direction: column;
+      height: auto !important;
+      min-height: 120px;
+    }
+    .work-row-1-3 {
+      height: auto;
+      flex-direction: column;
+    }
+    .work-card-1-3 {
+      width: 100%;
+      height: 120px;
+      margin-bottom: 2px;
+    }
+  }
+
+  @media (max-height: 900px) {
+    .work-card h3 {
+      font-size: 14px;
+      margin-bottom: 6px;
+    }
+    .work-card p {
+      font-size: 12px;
+    }
+  }
+</style>

web-vue/packages/core/layouts/screen/welcome/Work/index.vue

@@ -7,35 +7,19 @@
     </div>
     <div class="work-section work-main-section">
       <div class="work-col work-col-1-3 work-left-col">
-        <div
+        <div v-for="item in getComponentsBySortRange(1, 3)" :key="item.sort" class="work-card work-card-1-3">
-          v-for="item in getComponentsBySortRange(1, 3)"
+          <component :is="componentMap[item.vueName]" :formParams="FormValues" v-if="componentMap[item.vueName]" />
-          :key="item.sort"
-          class="work-card work-card-1-3"
-        >
-          <component
-            :is="componentMap[item.vueName]"
-            :formParams="FormValues"
-            v-if="componentMap[item.vueName]"
-          />
         </div>
       </div>
       <div class="work-col work-col-1-3 work-middle-col">
-        <div
+        <div :key="getComponentBySort(4)?.sort" class="work-card work-card-2-3" v-if="getComponentBySort(4)">
-          :key="getComponentBySort(4)?.sort"
-          class="work-card work-card-2-3"
-          v-if="getComponentBySort(4)"
-        >
           <component
             :is="componentMap[getComponentBySort(4).vueName]"
             :formParams="FormValues"
             v-if="componentMap[getComponentBySort(4).vueName]"
           />
         </div>
-        <div
+        <div :key="getComponentBySort(5)?.sort" class="work-card work-card-1-3" v-if="getComponentBySort(5)">
-          :key="getComponentBySort(5)?.sort"
-          class="work-card work-card-1-3"
-          v-if="getComponentBySort(5)"
-        >
           <component
             :is="componentMap[getComponentBySort(5).vueName]"
             :formParams="FormValues"
@@ -44,16 +28,8 @@
         </div>
       </div>
       <div class="work-col work-col-1-3 work-right-col">
-        <div
+        <div v-for="item in getComponentsBySortRange(6, 8)" :key="item.sort" class="work-card work-card-1-3">
-          v-for="item in getComponentsBySortRange(6, 8)"
+          <component :is="componentMap[item.vueName]" :formParams="FormValues" v-if="componentMap[item.vueName]" />
-          :key="item.sort"
-          class="work-card work-card-1-3"
-        >
-          <component
-            :is="componentMap[item.vueName]"
-            :formParams="FormValues"
-            v-if="componentMap[item.vueName]"
-          />
         </div>
       </div>
     </div>
@@ -61,269 +37,284 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, watch, onMounted } from 'vue';
+  import { ref, watch, onMounted } from 'vue';
-import { useRoute } from 'vue-router';
+  import type { Component } from 'vue';
-import ChartTop from './components/ChartTop.vue';
+  import { useRoute } from 'vue-router';
-import { MyChartInfo, myChartInfoListAll } from '@jeesite/biz/api/biz/myChartInfo';
+  import ChartTop from './components/ChartTop.vue';
+  import { MyChartInfo, myChartInfoListAll } from '@jeesite/biz/api/biz/myChartInfo';
 
-const route = useRoute();
+  const route = useRoute();
 
-const FormValues = ref({
+  const FormValues = ref({
-  yearDate: route.query.yearDate
+    yearDate: route.query.yearDate || '',
-});
+  });
 
-watch(
+  watch(
-  () => route.query.yearDate,
+    () => route.query.yearDate,
-  (newVal) => {
+    (newVal) => {
-    FormValues.value.yearDate = newVal;
+      FormValues.value.yearDate = newVal || '';
-  },
+    },
-  { 
+    {
-    deep: true,
+      deep: true,
-    immediate: true
+      immediate: true,
+    },
+  );
+
+  interface ComponentMap {
+    [key: string]: Component;
   }
-);
 
-const componentMap = ref({});
+  const componentMap = ref<ComponentMap>({});
-const chartData = ref([]);
+  const chartData = ref<MyChartInfo[]>([]);
 
-const getComponentBySort = (sort) => {
+  const getSortValue = (item: MyChartInfo) => Number(item.sort ?? 0);
-  return chartData.value.find(item => item.sort === sort);
-};
 
-const getComponentsBySortRange = (start, end) => {
+  const getComponentBySort = (sort: number): MyChartInfo | undefined => {
-  return chartData.value.filter(item => item.sort >= start && item.sort <= end);
+    return chartData.value.find((item) => getSortValue(item) === sort);
-};
+  };
 
-const loadComponent = async (vueName) => {
+  const getComponentsBySortRange = (start: number, end: number): MyChartInfo[] => {
-  try {
+    return chartData.value.filter((item) => {
-    const module = await import(`./components/${vueName}.vue`);
+      const sort = getSortValue(item);
-    return module.default;
+      return sort >= start && sort <= end;
-  } catch (error) {
+    });
-    console.error('加载组件失败', error);
+  };
-    return null;
-  }
-};
 
-async function getChartList(){
+  const loadComponent = async (vueName: string): Promise<Component | null> => {
-	try {
+    try {
-	  const reqParams = {
+      const module = await import(`./components/${vueName}.vue`);
-	  			chartCode: 'work'
+      return module.default;
-	  		}
+    } catch (error) {
-	  const res = await myChartInfoListAll(reqParams)
+      console.error('加载组件失败', error);
-	  chartData.value = res || []
+      return null;
-	} catch (error) {
+    }
-	  console.error('获取数据失败:', error);
+  };
-	  chartData.value = []
+
-	}
+  async function getChartList() {
-}
+    try {
-
+      const reqParams = {
-onMounted(async () => {
+        chartCode: 'work',
-  try {
+      };
-    await getChartList();
+      const res = await myChartInfoListAll(reqParams);
-    chartData.value = chartData.value.sort((a, b) => a.sort - b.sort);
+      chartData.value = res || [];
-    const newComponentMap = {};
+    } catch (error) {
-    const uniqueComponents = [...new Set(chartData.value.map(item => item.vueName))];
+      console.error('获取数据失败:', error);
-    for (const vueName of uniqueComponents) {
+      chartData.value = [];
-      const component = await loadComponent(vueName);
-      if (component) {
-        newComponentMap[vueName] = component;
-      }
     }
-    componentMap.value = newComponentMap;
-  } catch (error) {
-    console.error('加载图表数据失败：', error);
   }
-});
+
+  onMounted(async () => {
+    try {
+      await getChartList();
+  
+      const newComponentMap: ComponentMap = {};
+      const uniqueComponents = [...new Set(chartData.value.map((item) => item.vueName))];
+      for (const vueName of uniqueComponents) {
+        if (vueName) {
+          newComponentMap[vueName] = loadComponent(vueName);
+        }
+      }
+  
+      componentMap.value = newComponentMap;
+    } catch (error) {
+      console.error('加载图表数据失败：', error);
+    }
+  });
 </script>
 
 <style scoped>
-.work-layout-container {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  padding: 2px;
-  margin: 0 !important;
-  box-sizing: border-box;
-  background-color: transparent;
-  overflow: hidden;
-}
-
-.work-section {
-  width: 100%;
-  display: flex;
-  gap: 2px;
-  box-sizing: border-box;
-  overflow: hidden;
-}
-
-.work-top-header {
-  height: 10%;
-}
-
-.work-main-section {
-  height: 90%;
-}
-
-.work-col {
-  height: 100%;
-  box-sizing: border-box;
-  overflow: hidden;
-}
-
-.work-col-1-3 {
-  width: calc((100% - 4px) / 3);
-}
-
-.work-left-col, .work-middle-col, .work-right-col {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.work-card-1-3 {
-  height: calc((100% - 4px) / 3);
-}
-
-.work-card-2-3 {
-  height: calc(2 * ((100% - 4px) / 3) + 2px);
-}
-
-.work-card {
-  width: 100%;
-  background-color: rgba(15, 52, 96, 0.1);
-  border: 1px solid rgba(26, 80, 139, 0.3);
-  border-radius: 8px;
-  padding: 2px;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  color: #e0e6ff;
-  backdrop-filter: blur(2px);
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  min-height: 0;
-  margin: 0;
-}
-
-.full-card {
-  width: 100%;
-  height: 100%;
-}
-
-.work-card:hover {
-  box-shadow: 0 4px 12px rgba(60, 156, 255, 0.2);
-  border-color: rgba(60, 156, 255, 0.6);
-  transition: all 0.3s ease;
-}
-
-.work-card h3 {
-  font-size: 16px;
-  margin-bottom: 8px;
-  letter-spacing: 1px;
-  background: #3c9cff;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  font-weight: 600;
-}
-
-.work-card p {
-  font-size: 13px;
-  opacity: 0.75;
-  color: #b4c7e7;
-  text-align: center;
-  line-height: 1.5;
-}
-
-.empty-card {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  color: #88a0c2;
-  font-size: 14px;
-}
-
-@media (max-width: 1600px) {
   .work-layout-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
     padding: 2px;
-    gap: 2px;
+    margin: 0 !important;
+    box-sizing: border-box;
+    background-color: transparent;
+    overflow: hidden;
   }
+
   .work-section {
+    width: 100%;
+    display: flex;
     gap: 2px;
+    box-sizing: border-box;
+    overflow: hidden;
   }
+
+  .work-top-header {
+    height: 10%;
+  }
+
+  .work-main-section {
+    height: 90%;
+  }
+
+  .work-col {
+    height: 100%;
+    box-sizing: border-box;
+    overflow: hidden;
+  }
+
   .work-col-1-3 {
     width: calc((100% - 4px) / 3);
   }
+
+  .work-left-col,
+  .work-middle-col,
+  .work-right-col {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
   .work-card-1-3 {
     height: calc((100% - 4px) / 3);
   }
+
   .work-card-2-3 {
     height: calc(2 * ((100% - 4px) / 3) + 2px);
   }
-  .work-card {
-    padding: 2px;
-  }
-  .work-card h3 {
-    font-size: 14px;
-  }
-  .work-card p {
-    font-size: 12px;
-  }
-}
 
-@media (max-width: 768px) {
+  .work-card {
-  .work-layout-container {
-    flex-direction: column;
-    height: auto;
-    min-height: 100%;
-    padding: 2px;
-    gap: 2px;
-    overflow-y: auto;
-  }
-  .work-section {
-    flex-direction: column;
-    height: auto !important;
-    min-height: 120px;
-    gap: 2px;
-  }
-  .work-col-1-3 {
     width: 100%;
-    height: auto;
+    background-color: rgba(15, 52, 96, 0.1);
-  }
+    border: 1px solid rgba(26, 80, 139, 0.3);
-  .work-left-col, .work-middle-col, .work-right-col {
+    border-radius: 8px;
+    padding: 2px;
+    box-sizing: border-box;
+    display: flex;
     flex-direction: column;
-    height: auto;
+    justify-content: center;
-    gap: 2px;
+    align-items: center;
+    color: #e0e6ff;
+    backdrop-filter: blur(2px);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    min-height: 0;
+    margin: 0;
   }
-  .work-card-1-3, .work-card-2-3 {
-    height: 120px;
-    margin-bottom: 2px;
-  }
-  .work-card {
-    padding: 2px;
-  }
-}
 
-@media (max-height: 900px) {
+  .full-card {
-  .work-layout-container {
+    width: 100%;
-    padding: 2px;
+    height: 100%;
-    gap: 2px;
   }
-  .work-section {
+
-    gap: 2px;
+  .work-card:hover {
-  }
+    box-shadow: 0 4px 12px rgba(60, 156, 255, 0.2);
-  .work-card {
+    border-color: rgba(60, 156, 255, 0.6);
-    padding: 2px;
+    transition: all 0.3s ease;
   }
+
   .work-card h3 {
-    font-size: 14px;
+    font-size: 16px;
-    margin-bottom: 6px;
+    margin-bottom: 8px;
+    letter-spacing: 1px;
+    background: #3c9cff;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    font-weight: 600;
   }
+
   .work-card p {
-    font-size: 12px;
+    font-size: 13px;
+    opacity: 0.75;
+    color: #b4c7e7;
+    text-align: center;
+    line-height: 1.5;
   }
-}
+
-</style>
+  .empty-card {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    color: #88a0c2;
+    font-size: 14px;
+  }
+
+  @media (max-width: 1600px) {
+    .work-layout-container {
+      padding: 2px;
+      gap: 2px;
+    }
+    .work-section {
+      gap: 2px;
+    }
+    .work-col-1-3 {
+      width: calc((100% - 4px) / 3);
+    }
+    .work-card-1-3 {
+      height: calc((100% - 4px) / 3);
+    }
+    .work-card-2-3 {
+      height: calc(2 * ((100% - 4px) / 3) + 2px);
+    }
+    .work-card {
+      padding: 2px;
+    }
+    .work-card h3 {
+      font-size: 14px;
+    }
+    .work-card p {
+      font-size: 12px;
+    }
+  }
+
+  @media (max-width: 768px) {
+    .work-layout-container {
+      flex-direction: column;
+      height: auto;
+      min-height: 100%;
+      padding: 2px;
+      gap: 2px;
+      overflow-y: auto;
+    }
+    .work-section {
+      flex-direction: column;
+      height: auto !important;
+      min-height: 120px;
+      gap: 2px;
+    }
+    .work-col-1-3 {
+      width: 100%;
+      height: auto;
+    }
+    .work-left-col,
+    .work-middle-col,
+    .work-right-col {
+      flex-direction: column;
+      height: auto;
+      gap: 2px;
+    }
+    .work-card-1-3,
+    .work-card-2-3 {
+      height: 120px;
+      margin-bottom: 2px;
+    }
+    .work-card {
+      padding: 2px;
+    }
+  }
+
+  @media (max-height: 900px) {
+    .work-layout-container {
+      padding: 2px;
+      gap: 2px;
+    }
+    .work-section {
+      gap: 2px;
+    }
+    .work-card {
+      padding: 2px;
+    }
+    .work-card h3 {
+      font-size: 14px;
+      margin-bottom: 6px;
+    }
+    .work-card p {
+      font-size: 12px;
+    }
+  }
+</style>