🎨 fix: sidebar skeleton background and icon spacing consistency

- Set sidebar skeleton background to use theme variable (--semi-color-bg-0) instead of hardcoded white for better dark mode compatibility
- Apply consistent background to both collapsed and expanded skeleton states
- Ensure sidebar container uses theme background when skeleton is loading
- Remove duplicate margin-right classes from skeleton wrapper components that conflicted with CSS definitions
- Simplify navigation text structure by removing unnecessary div wrappers to improve text truncation
- Add proper text layout styles for better truncation handling when menu items have long names
- Standardize icon-to-text spacing across all sidebar navigation items

web/src/components/layout/SiderBar.jsx

@@ -58,7 +58,7 @@ const SiderBar = ({ onNavigate = () => {} }) => {
     loading: sidebarLoading,
   } = useSidebar();
 
-  const showSkeleton = useMinimumLoadingTime(sidebarLoading, 500);
+  const showSkeleton = useMinimumLoadingTime(sidebarLoading);
 
   const [selectedKeys, setSelectedKeys] = useState(['home']);
   const [chatItems, setChatItems] = useState([]);
@@ -305,14 +305,12 @@ const SiderBar = ({ onNavigate = () => {} }) => {
         key={item.itemKey}
         itemKey={item.itemKey}
         text={
-          <div className='flex items-center'>
+          <span
-            <span
+            className='truncate font-medium text-sm'
-              className='truncate font-medium text-sm'
+            style={{ color: textColor }}
-              style={{ color: textColor }}
+          >
-            >
+            {item.text}
-              {item.text}
+          </span>
-            </span>
-          </div>
         }
         icon={
           <div className='sidebar-icon-container flex-shrink-0'>
@@ -335,14 +333,12 @@ const SiderBar = ({ onNavigate = () => {} }) => {
           key={item.itemKey}
           itemKey={item.itemKey}
           text={
-            <div className='flex items-center'>
+            <span
-              <span
+              className='truncate font-medium text-sm'
-                className='truncate font-medium text-sm'
+              style={{ color: textColor }}
-                style={{ color: textColor }}
+            >
-              >
+              {item.text}
-                {item.text}
+            </span>
-              </span>
-            </div>
           }
           icon={
             <div className='sidebar-icon-container flex-shrink-0'>
@@ -379,7 +375,10 @@ const SiderBar = ({ onNavigate = () => {} }) => {
   return (
     <div
       className='sidebar-container'
-      style={{ width: 'var(--sidebar-current-width)' }}
+      style={{
+        width: 'var(--sidebar-current-width)',
+        background: 'var(--semi-color-bg-0)',
+      }}
     >
       <SkeletonWrapper
         loading={showSkeleton}

web/src/components/layout/components/SkeletonWrapper.jsx

@@ -159,7 +159,7 @@ const SkeletonWrapper = ({
           className={`flex items-center p-2 mb-1 rounded-md ${className}`}
         >
           {/* 图标骨架屏 */}
-          <div className='sidebar-icon-container flex-shrink-0 mr-2'>
+          <div className='sidebar-icon-container flex-shrink-0'>
             <Skeleton
               loading={true}
               active
@@ -247,7 +247,7 @@ const SkeletonWrapper = ({
           margin: '3px 8px',
         }}
       >
-        <div className='sidebar-icon-container flex-shrink-0 mr-2'>
+        <div className='sidebar-icon-container flex-shrink-0'>
           {renderIcon()}
         </div>
         {renderLabel(labelWidth)}

web/src/index.css

@@ -71,6 +71,11 @@ code {
   margin-right: 0;
 }
 
+.sidebar-nav .semi-navigation-item-text {
+  flex: 1;
+  min-width: 0;
+}
+
 .semi-navigation-item,
 .semi-navigation-sub-title {
   height: 100% !important;