feat: add vs query in trends (#78)

> 在 trends 页面添加 vs 参数，保存当前比对信息用以分享
* 添加 vs 参数，以 `,` 进行分割
* 仅查看当前包时候不进行添加


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

- **New Features**
- Enhanced the Trends page to manage query states, improving user
experience in filtering and viewing specific data sets based on query
parameters.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

src/slugs/trends/index.tsx

@@ -6,12 +6,15 @@ import { PageProps } from '@/pages/package/[...slug]';
 import { TotalDownloads } from '@/components/RecentDownloads';
 import { useCachedSearch } from '@/hooks/useSearch';
 import { DownOutlined } from '@ant-design/icons';
+import useQueryState from '@/hooks/useQueryState';
 
 const MAX_COUNT = 5;
 
-export default function Trends({ manifest: pkg, additionalInfo: needSync, version }: PageProps) {
+export default function Trends({ manifest: pkg }: PageProps) {
   const [search, setSearch] = useState('');
-  const [pkgs, setPkgs] = useState([pkg.name]);
+  const [vs, setVS] = useQueryState<string>('vs', '');
+  const [pkgs, setPkgs] = useState<string[]>(vs ? vs.split(',').slice(0, MAX_COUNT) : [pkg.name]);
+
   const { data: searchResult, isLoading } = useCachedSearch({
     keyword: search,
     page: 1,
@@ -37,8 +40,12 @@ export default function Trends({ manifest: pkg, additionalInfo: needSync, versio
           onSearch={setSearch}
           suffixIcon={suffix}
           placeholder="Please select"
-          defaultValue={pkgs}
-          onChange={setPkgs}
+          loading={isLoading}
+          defaultValue={[pkg.name]}
+          onChange={(v) => {
+            setPkgs(v);
+            setVS(v.join(','));
+          }}
           options={searchResult?.objects.map((object) => ({
             label: (
               <>