From 47c3ac60d54883103ec5cd6609443e18aa8b3f07 Mon Sep 17 00:00:00 2001
From: yanweidong <david.yan@qq.com>
Date: Wed, 22 Jul 2026 15:27:41 +0800
Subject: [PATCH] fix(web): show project icons beside project names

---
 apps/web_v1/src/App.css                             |  5 +++++
 apps/web_v1/src/pages/projects/project-icon.tsx     | 11 +++++++++++
 apps/web_v1/src/pages/projects/project-overview.tsx |  3 ++-
 apps/web_v1/src/pages/projects/project-sidebar.tsx  |  4 ++--
 4 files changed, 20 insertions(+), 3 deletions(-)
 create mode 100644 apps/web_v1/src/pages/projects/project-icon.tsx

diff --git a/apps/web_v1/src/App.css b/apps/web_v1/src/App.css
index 37e78d5..3af913b 100644
--- a/apps/web_v1/src/App.css
+++ b/apps/web_v1/src/App.css
@@ -465,6 +465,11 @@
   font-weight: 700;
 }
 
+.project-title-icon .arco-icon,
+.project-overview-icon .arco-icon {
+  font-size: 1.2em;
+}
+
 .channel-list {
   display: grid;
   gap: 4px;
diff --git a/apps/web_v1/src/pages/projects/project-icon.tsx b/apps/web_v1/src/pages/projects/project-icon.tsx
new file mode 100644
index 0000000..8695f9e
--- /dev/null
+++ b/apps/web_v1/src/pages/projects/project-icon.tsx
@@ -0,0 +1,11 @@
+import { IconFolder } from '@arco-design/web-react/icon'
+
+export function ProjectIcon({ icon, className }: { icon: string; className: string }) {
+  const value = icon.trim()
+
+  return (
+    <span className={className} aria-hidden="true">
+      {value || <IconFolder />}
+    </span>
+  )
+}
diff --git a/apps/web_v1/src/pages/projects/project-overview.tsx b/apps/web_v1/src/pages/projects/project-overview.tsx
index b39f5a9..f0109da 100644
--- a/apps/web_v1/src/pages/projects/project-overview.tsx
+++ b/apps/web_v1/src/pages/projects/project-overview.tsx
@@ -2,6 +2,7 @@ import { useMemo, useState } from 'react'
 import { Button, Card, Grid, Space, Tag, Typography } from '@arco-design/web-react'
 import { IconCheckCircleFill, IconClockCircle, IconFile, IconLink } from '@arco-design/web-react/icon'
 import { ProjectFileGrid } from './project-file-grid'
+import { ProjectIcon } from './project-icon'
 import { ProjectTaskEditModal, type ProjectTaskUpdate } from './project-task-edit-modal'
 import type { ProjectWorkspace, TaskItem } from './project-types'
 
@@ -33,7 +34,7 @@ export function ProjectOverview({
     <div className="overview-page project-overview-page">
       <section className="project-overview-hero" style={{ background: projectHeroBackground(project.background, project.color) }}>
         <div className="project-overview-identity">
-          <span className="project-overview-icon">{project.short}</span>
+          <ProjectIcon className="project-overview-icon" icon={project.icon} />
           <div>
             <Title heading={3}>{project.name}</Title>
             <Paragraph ellipsis={{ rows: 2 }}>{project.description || '暂无简介'}</Paragraph>
diff --git a/apps/web_v1/src/pages/projects/project-sidebar.tsx b/apps/web_v1/src/pages/projects/project-sidebar.tsx
index 73eff41..1b0be25 100644
--- a/apps/web_v1/src/pages/projects/project-sidebar.tsx
+++ b/apps/web_v1/src/pages/projects/project-sidebar.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react'
 import { Alert, Badge, Button, Divider, Input, Layout, Modal, Space, Typography } from '@arco-design/web-react'
 import { IconApps, IconDashboard, IconMore, IconPlus, IconSettings } from '@arco-design/web-react/icon'
+import { ProjectIcon } from './project-icon'
 import type { ChannelKey, ProjectChannel, ProjectWorkspace, WorkbenchView } from './project-types'
 
 const { Sider } = Layout
@@ -56,12 +57,11 @@ export function ProjectSidebar({
     })
   }, [activeWorkspace.project, settingsOpen])
 
-  const projectIcon = activeWorkspace.project.short || activeWorkspace.project.identifier || activeWorkspace.project.name.slice(0, 2)
   return (
     <Sider className="channel-sidebar" width={248}>
       <div className="project-title">
         <Space>
-          {workspaceMode ? <IconApps /> : <span className="project-title-icon">{projectIcon}</span>}
+          {workspaceMode ? <IconApps /> : <ProjectIcon className="project-title-icon" icon={activeWorkspace.project.icon} />}
           <Title heading={5}>{workspaceMode ? '工作台' : activeWorkspace.project.name}</Title>
         </Space>
         <Button aria-label="编辑项目设置" icon={<IconSettings />} size="mini" onClick={() => setSettingsOpen(true)} />