feat: Add deprecated messages for cnpmweb (#96)

为 cnpmweb 添加 deprecated 提示，类似于 npm 官方站点中的如下信息


![屏幕截图_20241230_192514](https://github.com/user-attachments/assets/514b9aae-b06f-43f9-ade4-b02f544ce2a8)

最终效果如下，为了避免切换包的时候 deprecated 区块部分抖动，因此选择放在标签下面


![屏幕截图_20241230_192008](https://github.com/user-attachments/assets/3400b8ae-bc2f-458b-8814-16773d745efb)

修复了侧边栏宽度超过容器的问题


![屏幕截图_20241230_192348](https://github.com/user-attachments/assets/5dee9fb6-2ee1-4a8a-b1bd-42c56af91716)

![屏幕截图_20241230_192210](https://github.com/user-attachments/assets/43e89f06-642b-41fb-82fc-6113124251a5)

为`版本列表`增加 `title` 属性提示


![屏幕截图_20241230_192130](https://github.com/user-attachments/assets/53eec131-c096-4709-9184-88abdbb84c1f)

为`最近更新`增加`title`属性提示，并修复了 `line-through` 样式不生效的问题


![屏幕截图_20241230_192937](https://github.com/user-attachments/assets/8ccfbddb-30e5-4f24-a76d-20d6f19fc0a5)

![屏幕截图_20241230_192109](https://github.com/user-attachments/assets/50aa7abc-185d-4637-acc5-4ee926ce67ac)


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **New Features**
- Added visual indicators for deprecated package versions across
multiple components
	- Implemented warning alerts for deprecated packages on the home page

- **Improvements**
	- Enhanced user interface to clearly show deprecated version status
- Added hover tooltips to provide additional information about
deprecated versions
	- Adjusted layout styling for better readability of version information

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

src/components/RecentVersion.tsx

@@ -74,21 +74,19 @@ export default function RecentVersion({ pkg }: PresetCardProps) {
 
         return (
           <div className={styles.version} key={index}>
-            <Link href={`/package/${pkg?.name}?version=${item.version}`}>
+            <Link href={`/package/${pkg?.name}?version=${item.version}`} title={deprecated}>
               <Typography.Title level={3} className={styles.title}>
-                <span
-                  className={styles.content}
-                  style={
-                    deprecated
-                      ? {
-                          color: 'rgba(0,0,0,.25)',
-                          textDecoration: 'line-through',
-                        }
-                      : {}
-                  }
-                >
+                <span className={styles.content}>
                   <Space size="small" style={{ flex: 1 }}>
-                    {item.version}
+                    <span style={
+                      deprecated
+                        ? {
+                            color: 'rgba(0,0,0,.25)',
+                            textDecoration: 'line-through',
+                          }
+                        : {}
+                      }>{item.version}
+                    </span>
                     <VersionTags
                       tags={tags[item.version]}
                       style={{

src/slugs/home/index.tsx

@@ -1,5 +1,5 @@
 'use client';
-import { Col, Row, Space, Tooltip, Typography } from 'antd';
+import { Alert, Col, Row, Space, Tooltip, Typography } from 'antd';
 import SizeContainer from '@/components/SizeContainer';
 import PresetCard from '@/components/PresetCard';
 import ReadmeContent from '@/components/ReadmeContent';
@@ -40,6 +40,7 @@ const useStyles = createStyles(({ token, css }) => {
 export default function Home({ manifest, version, additionalInfo: needSync }: PageProps) {
   const pkg = manifest;
   const tags: string[] = pkg?.keywords || [];
+  const deprecated = pkg?.versions?.[version!]?.deprecated;
   const { styles: style } = useStyles();
 
   const contentNode = (
@@ -58,7 +59,7 @@ export default function Home({ manifest, version, additionalInfo: needSync }: Pa
           <ReadmeContent name={manifest.name} version={version} content={pkg.readme}/>
         </PresetCard>
       </Col>
-      <Col flex="0 0 378px">
+      <Col flex="0 0 378px" style={{ minWidth: "auto" }}>
         <Space direction={'vertical'} size="middle" style={{ minWidth: 378 }}>
           <AdVPS />
           <PresetCard title="下载趋势">
@@ -97,6 +98,9 @@ export default function Home({ manifest, version, additionalInfo: needSync }: Pa
           <div className={style.tagCon}>
             <PackageTag tags={tags?.map((tag) => ({ label: tag, href: `/packages?q=${tag}` }))} />
           </div>
+          {deprecated && <div style={{ marginBottom: 16 }}>
+            <Alert message={`Deprecated: ${deprecated}`} type="warning" />
+          </div>}
         </div>
         {contentNode}
       </SizeContainer>

src/slugs/versions/index.tsx

@@ -157,6 +157,7 @@ function VersionsList({ versions, pkg }: { versions: NpmPackageVersion[]; pkg: P
                 <span>
                   <Link
                     prefetch={false}
+                    title={item.deprecated}
                     style={
                       item.deprecated
                         ? {