From 2735c577784058710b5b2a0ecffd9019d72c8572 Mon Sep 17 00:00:00 2001
From: JiaoTianBo <jtb200411@qq.com>
Date: Tue, 31 Mar 2026 17:43:31 +0800
Subject: [PATCH] =?UTF-8?q?feat(project):=20=E5=A2=9E=E5=8A=A0=E8=B5=84?=
 =?UTF-8?q?=E6=BA=90=E7=B1=BB=E5=9E=8B=E7=9A=84=E5=9B=BE=E6=A0=87=E5=92=8C?=
 =?UTF-8?q?=E9=A2=9C=E8=89=B2=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 扩展资源类型，新增软件、资金和其他类别
- 实现获取资源类型图标的函数，提供对应图标映射
- 实现获取资源类型颜色的函数，定义各类型对应颜色
- 在资源名称栏增加图标显示，根据类型渲染对应颜色和图标
- 新增资源图标包装器样式，优化图标展示效果
- 保持鼠标悬停样式和整体界面风格一致
---
 src/views/project/detail.vue | 65 +++++++++++++++++++++++++++++++++---
 1 file changed, 61 insertions(+), 4 deletions(-)

diff --git a/src/views/project/detail.vue b/src/views/project/detail.vue
index 898634d..97e98f2 100644
--- a/src/views/project/detail.vue
+++ b/src/views/project/detail.vue
@@ -588,11 +588,42 @@ function getResourceTypeText(type?: string): string {
     equipment: "设备",
     material: "物料",
     human: "人力",
-    service: "服务"
+    software: "软件",
+    finance: "资金",
+    service: "服务",
+    other: "其他"
   };
   return typeMap[type || ""] || type || "其他";
 }
 
+// 获取资源类型图标
+function getResourceTypeIcon(type?: string): string {
+  const iconMap: Record<string, string> = {
+    equipment: "ri/server-line",
+    material: "ri/archive-line",
+    human: "ri/team-line",
+    software: "ri/code-line",
+    finance: "ri/money-cny-circle-line",
+    service: "ri/service-line",
+    other: "ri/file-list-line"
+  };
+  return iconMap[type || ""] || "ri/file-list-line";
+}
+
+// 获取资源类型颜色
+function getResourceTypeColor(type?: string): string {
+  const colorMap: Record<string, string> = {
+    equipment: "#409eff", // 设备 - 蓝色
+    material: "#67c23a", // 物料 - 绿色
+    human: "#e6a23c", // 人力 - 橙色
+    software: "#9b59b6", // 软件 - 紫色
+    finance: "#f56c6c", // 资金 - 红色
+    service: "#00bcd4", // 服务 - 青色
+    other: "#909399" // 其他 - 灰色
+  };
+  return colorMap[type || ""] || "#909399";
+}
+
 // 获取资源状态类型
 function getResourceStatusType(
   status?: string
@@ -1382,9 +1413,24 @@ onMounted(() => {
               <el-table-column label="资源名称" min-width="200">
                 <template #default="{ row }">
                   <div class="flex items-center gap-2">
-                    <el-avatar :size="32" shape="square" class="bg-gray-100">
-                      <component :is="useRenderIcon('ri/box-line')" />
-                    </el-avatar>
+                    <div
+                      class="resource-icon-wrapper"
+                      :style="{
+                        backgroundColor:
+                          getResourceTypeColor(row.resourceType) + '20'
+                      }"
+                    >
+                      <el-icon
+                        :size="18"
+                        :color="getResourceTypeColor(row.resourceType)"
+                      >
+                        <component
+                          :is="
+                            useRenderIcon(getResourceTypeIcon(row.resourceType))
+                          "
+                        />
+                      </el-icon>
+                    </div>
                     <div>
                       <div class="font-medium">{{ row.resourceName }}</div>
                       <div class="text-xs text-gray-400">
@@ -2193,6 +2239,17 @@ onMounted(() => {
   }
 }
 
+// 资源图标包装器
+.resource-icon-wrapper {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+}
+
 // 鼠标悬停效果
 .cursor-pointer {
   cursor: pointer;