fix(web): show project icons beside project names

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;

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>
+  )
+}

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>

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)} />