feature: 新增中国进口原研药目录

public/assets/icon/drugs.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M19.071 4.929a7 7 0 0 0-9.9 0L4.93 9.172a7 7 0 0 0 9.9 9.9l4.242-4.243a7 7 0 0 0 0-9.9Z" 
+    stroke="#6366F1" 
+    stroke-width="2" 
+    stroke-linecap="round" 
+    stroke-linejoin="round"
+  />
+  <path d="M11.101 12.9 12.9 11.1" 
+    stroke="#6366F1" 
+    stroke-width="2" 
+    stroke-linecap="round" 
+    stroke-linejoin="round"
+  />
+  <path d="m8.222 15.778 5.657-5.656" 
+    stroke="#6366F1" 
+    stroke-width="2" 
+    stroke-linecap="round" 
+    stroke-linejoin="round"
+  />
+</svg> 
\ No newline at end of file

public/assets/icon/model-price.svg

+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg height="800px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 512 512" xml:space="preserve">
+<path style="fill:#FFFFFF;" d="M256,504C119.248,504,8,392.752,8,256S119.248,8,256,8s248,111.248,248,248S392.752,504,256,504z"/>
+<path style="fill:#13B7E6;" d="M256,16c132.336,0,240,107.664,240,240S388.336,496,256,496S16,388.336,16,256S123.664,16,256,16
+	 M256,0C114.616,0,0,114.616,0,256s114.616,256,256,256s256-114.616,256-256S397.384,0,256,0L256,0z"/>
+<g>
+	<path style="fill:url(#gradient1);" d="M240.296,377.72v-28.328c-19.848-0.896-39.096-6.264-50.36-12.824l8.896-34.912
+		c12.448,6.848,29.904,13.12,49.176,13.12c16.88,0,28.432-6.56,28.432-18.488c0-11.344-9.48-18.512-31.4-25.968
+		c-31.688-10.736-53.32-25.656-53.32-54.584c0-26.264,18.376-46.84,50.064-53.104V134.28H270.8v26.264
+		c19.848,0.896,33.184,5.056,42.952,9.84l-8.584,33.72c-7.696-3.28-21.32-10.152-42.664-10.152c-19.248,0-25.472,8.36-25.472,16.712
+		c0,9.84,10.368,16.104,35.552,25.656c35.232,12.536,49.464,28.936,49.464,55.8c0,26.552-18.664,49.216-52.72,55.192v30.416h-29.032
+		V377.72z"/>
+	<path style="fill:url(#gradient1);" d="M108.6,334.936v-18.368c-12.872-0.584-25.352-4.064-32.656-8.32l5.768-22.64
+		c8.072,4.44,19.392,8.504,31.896,8.504c10.952,0,18.44-4.256,18.44-11.992c0-7.36-6.144-12.008-20.368-16.84
+		c-20.552-6.96-34.584-16.64-34.584-35.4c0-17.032,11.92-30.376,32.472-34.44v-18.384h18.816v17.032
+		c12.872,0.584,21.52,3.28,27.856,6.384l-5.568,21.864c-4.992-2.128-13.824-6.584-27.672-6.584c-12.48,0-16.52,5.416-16.52,10.84
+		c0,6.384,6.728,10.448,23.056,16.64c22.848,8.128,32.08,18.76,32.08,36.192c0,17.216-12.104,31.92-34.192,35.792v19.728H108.6
+		V334.936z"/>
+	<path style="fill:url(#gradient1);" d="M383.032,334.936v-18.368c-12.872-0.584-25.352-4.064-32.656-8.32l5.768-22.64
+		c8.072,4.44,19.392,8.504,31.896,8.504c10.952,0,18.44-4.256,18.44-11.992c0-7.36-6.144-12.008-20.368-16.84
+		c-20.552-6.96-34.584-16.64-34.584-35.4c0-17.032,11.92-30.376,32.472-34.44v-18.384h18.816v17.032
+		c12.872,0.584,21.52,3.28,27.856,6.384l-5.568,21.864c-4.992-2.128-13.824-6.584-27.672-6.584c-12.48,0-16.52,5.416-16.52,10.84
+		c0,6.384,6.728,10.448,23.056,16.64c22.848,8.128,32.08,18.76,32.08,36.192c0,17.216-12.104,31.92-34.192,35.792v19.728h-18.824
+		V334.936z"/>
+</g>
+<defs>
+  <linearGradient id="gradient1" x1="0%" y1="0%" x2="100%" y2="0%">
+    <stop offset="0%" style="stop-color:#5B8BFF;stop-opacity:1" />
+    <stop offset="100%" style="stop-color:#4E79B9;stop-opacity:1" />
+  </linearGradient>
+</defs>
+</svg>

src/App.jsx

@@ -28,6 +28,7 @@ const ImageWatermark = lazy(() => import('./components/ImageWatermark'));
 const TextBehindImage = lazy(() => import('./components/TextBehindImage'));
 const BackgroundRemover = lazy(() => import('./components/BackgroundRemover'));
 const AnthropicTimeline = lazy(() => import('./components/AnthropicTimeline'));
+const DrugsList = lazy(() => import('./components/DrugsList'));
 
 function App() {
   return (
@@ -51,7 +52,9 @@ function App() {
                 <Route path="/json-formatter" element={<JsonFormatter />} />
                 <Route path="/url-encode-and-decode" element={<UrlEnDecode />} />
                 <Route path="/openai-timeline" element={<OpenAITimeline />} />
+                <Route path="/anthropic-timeline" element={<AnthropicTimeline />} />
                 <Route path="/llm-model-price" element={<PricingCharts />} />
+                <Route path="/drugs-list" element={<DrugsList />} />
                 <Route path="/handwriting" element={<HandwriteGen />} />
                 <Route path="/image-base64" element={<ImageBase64Converter />} />
                 <Route path="/quote-card" element={<QuoteCard />} />
@@ -62,7 +65,6 @@ function App() {
                 <Route path="/image-watermark" element={<ImageWatermark />} />
                 <Route path="/text-behind-image" element={<TextBehindImage />} /> 
                 <Route path="/background-remover" element={<BackgroundRemover />} />
-                <Route path="/anthropic-timeline" element={<AnthropicTimeline />} />
                 <Route path="*" element={<NotFound />} />
 
               </Routes>

src/components/DrugsList.jsx

+import React, { useState, useEffect } from 'react';
+import { useScrollToTop } from '../hooks/useScrollToTop';
+import '../styles/DrugsList.css';
+import drugs from '../data/original-drugs-chn.json';
+import SEO from '../components/SEO';
+import { useTranslation } from '../js/i18n';
+import { usePageLoading } from '../hooks/usePageLoading';
+import LoadingOverlay from './LoadingOverlay';
+
+const DrugsList = () => {
+  useScrollToTop();
+  const { t } = useTranslation();
+  const isLoading = usePageLoading();
+  const [searchTerm, setSearchTerm] = useState('');
+  const [selectedCategory, setSelectedCategory] = useState('all');
+  const [isSearchFocused, setIsSearchFocused] = useState(false);
+
+  // Filter drugs based on search term and category
+  const filteredDrugs = drugs
+    .filter(category => selectedCategory === 'all' || category.category === selectedCategory)
+    .map(category => ({
+      ...category,
+      list: category.list.filter(drug => 
+        drug.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
+        drug.factory.toLowerCase().includes(searchTerm.toLowerCase())
+      )
+    }))
+    .filter(category => category.list.length > 0);
+
+  const totalDrugs = drugs.reduce((acc, curr) => acc + curr.list.length, 0);
+  const filteredTotalDrugs = filteredDrugs.reduce((acc, curr) => acc + curr.list.length, 0);
+
+  // Add schema.org structured data for SEO
+  useEffect(() => {
+    const schema = {
+      "@context": "https://schema.org",
+      "@type": "Dataset",
+      "name": t('tools.drugsList.title'),
+      "description": t('tools.drugsList.description'),
+      "keywords": ["drugs", "medicine", "China", "NMPA", "pharmaceutical"],
+      "url": "https://fishersama.com/drugs-list",
+      "creator": {
+        "@type": "Organization",
+        "name": "National Medical Products Administration",
+        "url": "https://www.nmpa.gov.cn/"
+      },
+      "dateModified": new Date().toISOString().split('T')[0],
+      "license": "https://www.nmpa.gov.cn/",
+      "numberOfItems": totalDrugs
+    };
+
+    const script = document.createElement('script');
+    script.type = 'application/ld+json';
+    script.text = JSON.stringify(schema);
+    document.head.appendChild(script);
+
+    return () => {
+      document.head.removeChild(script);
+    };
+  }, [t, totalDrugs]);
+
+  return (
+    <>
+      <SEO
+        title={t('tools.drugsList.title')}
+        description={t('tools.drugsList.description')}
+        keywords="drugs,medicine,China,NMPA,pharmaceutical,original drugs"
+      />
+      {isLoading && <LoadingOverlay />}
+      <div className="drugs-container">
+        <header className="page-header">
+          <h1 className="drugs-title">{t('tools.drugsList.title')}</h1>
+          <p className="page-description">{t('tools.drugsList.description')}</p>
+        </header>
+        
+        {/* Search and Filter Section */}
+        <div className={`search-section ${isSearchFocused ? 'focused' : ''}`}>
+          <div className="search-container">
+            <div className="search-wrapper">
+              <div className="search-input-wrapper">
+                <input
+                  type="text"
+                  placeholder={t('tools.drugsList.searchPlaceholder')}
+                  value={searchTerm}
+                  onChange={(e) => setSearchTerm(e.target.value)}
+                  onFocus={() => setIsSearchFocused(true)}
+                  onBlur={() => setIsSearchFocused(false)}
+                  className="search-input"
+                  aria-label={t('tools.drugsList.searchPlaceholder')}
+                />
+                {searchTerm && (
+                  <button
+                    className="clear-search"
+                    onClick={() => setSearchTerm('')}
+                    aria-label={t('tools.drugsList.clearSearch')}
+                  >
+                    ×
+                  </button>
+                )}
+              </div>
+              <div className="search-stats" role="status" aria-live="polite">
+                {t('tools.drugsList.showing')} {filteredTotalDrugs} / {totalDrugs} {t('tools.drugsList.items')}
+              </div>
+            </div>
+            <div className="category-filter">
+              <select 
+                value={selectedCategory}
+                onChange={(e) => setSelectedCategory(e.target.value)}
+                className="category-select"
+                aria-label={t('tools.drugsList.selectCategory')}
+              >
+                <option value="all">{t('tools.drugsList.allCategories')}</option>
+                {drugs.map(category => (
+                  <option key={category.category} value={category.category}>
+                    {category.category} ({category.list.length})
+                  </option>
+                ))}
+              </select>
+            </div>
+          </div>
+        </div>
+
+        {/* Drugs List */}
+        <div className="drugs-list" role="main">
+          {filteredDrugs.length === 0 ? (
+            <div className="no-results">
+              <p>{t('tools.drugsList.noResults')}</p>
+            </div>
+          ) : (
+            filteredDrugs.map((category, categoryIndex) => (
+              <section key={categoryIndex} className="category-section">
+                <div className="category-header">
+                  <h2 className="category-title">{category.category}</h2>
+                  <span className="category-count">
+                    {category.list.length} {t('tools.drugsList.items')}
+                  </span>
+                </div>
+                <div className="table-container">
+                  <table>
+                    <thead>
+                      <tr>
+                        <th scope="col">{t('tools.drugsList.drugName')}</th>
+                        <th scope="col">{t('tools.drugsList.manufacturer')}</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {category.list.map((drug, drugIndex) => (
+                        <tr key={drugIndex}>
+                          <td>{drug.name}</td>
+                          <td>{drug.factory}</td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              </section>
+            ))
+          )}
+        </div>
+
+        {/* Source Information */}
+        <footer className="source-info">
+          <h3>{t('tools.drugsList.sourceTitle')}</h3>
+          <p>{t('tools.drugsList.sourceDescription')}</p>
+          <a 
+            href="https://mp.weixin.qq.com/s/EBu_ZTy5uovPa_8kCs_TBQ" 
+            target="_blank" 
+            rel="noopener noreferrer"
+            className="source-link"
+          >
+            {t('tools.drugsList.sourceUrl')}
+          </a>
+          <p className="update-time">
+            {t('tools.drugsList.lastUpdate')}: {new Date().toLocaleDateString()}
+          </p>
+        </footer>
+      </div>
+    </>
+  );
+};
+
+export default DrugsList; 
\ No newline at end of file

src/locales/en/drugsList.json

+{
+  "tools": {
+    "drugsList": {
+      "title": "China Imported Original Drug List",
+      "description": "Complete list of imported original drugs in China, including drug names, manufacturers, and categories",
+      "searchPlaceholder": "Search by drug name or manufacturer...",
+      "drugName": "Drug Name",
+      "manufacturer": "Manufacturer",
+      "sourceTitle": "Data Source",
+      "sourceDescription": "Data sourced from the official imported original drug list published by National Medical Products Administration (NMPA)",
+      "sourceUrl": "View Original",
+      "showing": "Showing",
+      "items": "items",
+      "allCategories": "All Categories",
+      "selectCategory": "Select Category",
+      "clearSearch": "Clear search",
+      "noResults": "No matching drugs found",
+      "lastUpdate": "Last Updated"
+    }
+  }
+} 
\ No newline at end of file

src/locales/zh/drugsList.json

+ 
\ No newline at end of file

src/locales/zh/tools.json

@@ -224,5 +224,17 @@
     "anthropicTimeline": {
       "title": "Anthropic 产品发布",
       "description": "Anthropic 公司重要产品及事件发布时间表"
+    },
+    "drugsList": {
+      "title": "中国进口原研药目录",
+      "description": "药品名称、生产厂商和类别信息",
+      "searchPlaceholder": "搜索药品名称或生产厂商...",
+      "drugName": "药品名称",
+      "manufacturer": "生产厂商",
+      "sourceTitle": "数据来源",
+      "sourceUrl": "mRNA福星情报局",
+      "showing": "显示",
+      "items": "个项目",
+      "allCategories": "所有类别"
     }
 }

src/pages/Blog.jsx

@@ -6,7 +6,8 @@ import SEO from '../components/SEO';
 const tools = [
   { id: 'openAITimeline', icon: '/assets/icon/openai_small.svg', path: '/openai-timeline' },
   { id: 'anthropicTimeline', icon: '/assets/icon/anthropic_small.svg', path: '/anthropic-timeline' },
-  { id: 'modelPrice', icon: '/assets/icon/openai_small.svg', path: '/llm-model-price' },
+  { id: 'modelPrice', icon: '/assets/icon/model-price.svg', path: '/llm-model-price' },
+  { id: 'drugsList', icon: '/assets/icon/drugs.svg', path: '/drugs-list' },
 ];
 
 const Home = () => {

src/pages/Home.jsx

@@ -19,7 +19,8 @@ const tools = [
   { id: 'textDiff', icon: '/assets/icon/diff.png', path: '/text-diff' },
   { id: 'openAITimeline', icon: '/assets/icon/openai_small.svg', path: '/openai-timeline' },
   { id: 'anthropicTimeline', icon: '/assets/icon/anthropic_small.svg', path: '/anthropic-timeline' },
-  { id: 'modelPrice', icon: '/assets/icon/openai_small.svg', path: '/llm-model-price' },
+  { id: 'modelPrice', icon: '/assets/icon/model-price.svg', path: '/llm-model-price' },
+  { id: 'drugsList', icon: '/assets/icon/drugs.svg', path: '/drugs-list' },
   { id: 'fisherai', icon: '/assets/icon/fisherai.png', path: 'https://chromewebstore.google.com/detail/fisherai-your-best-summar/ipfiijaobcenaibdpaacbbpbjefgekbj', external: true }
 ];
 

src/styles/DrugsList.css

+.drugs-container {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  line-height: 1.6;
+  max-width: 1000px;
+  margin: 0 auto;
+  padding: 6rem 2rem 2rem;
+  position: relative;
+  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.95));
+  min-height: 100vh;
+}
+
+.drugs-container::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: 
+    linear-gradient(90deg, rgba(99, 102, 241, 0.05) 1px, transparent 1px),
+    linear-gradient(rgba(99, 102, 241, 0.05) 1px, transparent 1px);
+  background-size: 20px 20px;
+  pointer-events: none;
+  z-index: -1;
+}
+
+.page-header {
+  text-align: center;
+  margin-bottom: 3rem;
+}
+
+.drugs-title {
+  text-align: center;
+  font-size: 2.5rem;
+  margin-bottom: 3rem;
+  background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+}
+
+.page-description {
+  max-width: 600px;
+  margin: 1rem auto 0;
+  color: #6B7280;
+  font-size: 1.1rem;
+  line-height: 1.6;
+}
+
+.search-section {
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
+  margin: 0 -2rem;
+  padding: 1.5rem 2rem;
+  backdrop-filter: blur(10px);
+  border-bottom: 1px solid rgba(99, 102, 241, 0.1);
+  transition: all 0.3s ease;
+}
+
+.search-section.focused {
+  background: rgba(255, 255, 255, 0.98);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
+}
+
+.search-container {
+  max-width: 900px;
+  margin: 0 auto;
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: 2fr 1fr;
+}
+
+.search-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.search-input-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.search-input {
+  width: 100%;
+  padding: 0.875rem 1rem;
+  padding-right: 2.5rem;
+  border: 2px solid rgba(99, 102, 241, 0.2);
+  border-radius: 8px;
+  font-size: 1rem;
+  transition: all 0.2s ease;
+  background: rgba(255, 255, 255, 0.9);
+}
+
+.search-input:focus {
+  border-color: #6366F1;
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+  outline: none;
+}
+
+.clear-search {
+  position: absolute;
+  right: 0.75rem;
+  background: none;
+  border: none;
+  color: #9CA3AF;
+  font-size: 1.25rem;
+  cursor: pointer;
+  padding: 0.25rem;
+  transition: all 0.2s ease;
+}
+
+.clear-search:hover {
+  color: #6B7280;
+}
+
+.search-stats {
+  font-size: 0.875rem;
+  color: #6B7280;
+  text-align: right;
+}
+
+.category-select {
+  width: 100%;
+  padding: 0.875rem 1rem;
+  border: 2px solid rgba(99, 102, 241, 0.2);
+  border-radius: 8px;
+  font-size: 1rem;
+  background: rgba(255, 255, 255, 0.9);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236B7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 1rem center;
+  background-size: 1.25rem;
+  padding-right: 2.5rem;
+}
+
+.category-select:focus {
+  border-color: #6366F1;
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+  outline: none;
+}
+
+.drugs-list {
+  margin-top: 2rem;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+.no-results {
+  text-align: center;
+  padding: 4rem 2rem;
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: 16px;
+  color: #6B7280;
+}
+
+.category-section {
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: 16px;
+  overflow: hidden;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  transition: all 0.3s ease;
+}
+
+.category-section:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 16px -2px rgba(0, 0, 0, 0.1), 0 4px 8px -2px rgba(0, 0, 0, 0.06);
+}
+
+.category-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1.25rem 1.5rem;
+  background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
+  color: white;
+}
+
+.category-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin: 0;
+  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.category-count {
+  font-size: 0.875rem;
+  opacity: 0.9;
+  background: rgba(255, 255, 255, 0.2);
+  padding: 0.25rem 0.75rem;
+  border-radius: 9999px;
+}
+
+.table-container {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(99, 102, 241, 0.3) transparent;
+}
+
+.table-container::-webkit-scrollbar {
+  height: 6px;
+}
+
+.table-container::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.table-container::-webkit-scrollbar-thumb {
+  background-color: rgba(99, 102, 241, 0.3);
+  border-radius: 3px;
+}
+
+table {
+  width: 100%;
+  border-collapse: collapse;
+  background: white;
+}
+
+th {
+  background: rgba(99, 102, 241, 0.05);
+  color: #4F46E5;
+  font-weight: 600;
+  text-transform: uppercase;
+  font-size: 0.75rem;
+  letter-spacing: 0.05em;
+  padding: 1rem 1.5rem;
+  text-align: left;
+  border-bottom: 2px solid rgba(99, 102, 241, 0.1);
+  white-space: nowrap;
+}
+
+td {
+  padding: 1rem 1.5rem;
+  font-size: 0.875rem;
+  color: #1F2937;
+  border-bottom: 1px solid rgba(99, 102, 241, 0.05);
+  transition: background-color 0.15s ease;
+}
+
+tr:last-child td {
+  border-bottom: none;
+}
+
+tr:hover td {
+  background: rgba(99, 102, 241, 0.02);
+}
+
+.source-info {
+  margin-top: 4rem;
+  padding: 2rem;
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: 16px;
+  text-align: center;
+  border: 1px solid rgba(99, 102, 241, 0.1);
+}
+
+.source-info h3 {
+  color: #1F2937;
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin-bottom: 1rem;
+}
+
+.source-info p {
+  color: #6B7280;
+  margin-bottom: 1rem;
+  max-width: 600px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.source-link {
+  display: inline-block;
+  color: #6366F1;
+  text-decoration: none;
+  font-weight: 500;
+  transition: all 0.2s ease;
+  padding: 0.5rem 1rem;
+  border-radius: 8px;
+  background: rgba(99, 102, 241, 0.05);
+}
+
+.source-link:hover {
+  color: #4F46E5;
+  background: rgba(99, 102, 241, 0.1);
+}
+
+.update-time {
+  margin-top: 1rem;
+  font-size: 0.875rem;
+  color: #9CA3AF;
+}
+
+@media (max-width: 768px) {
+  .search-container {
+    grid-template-columns: 1fr;
+  }
+
+  .search-section {
+    margin: 0 -1rem;
+    padding: 1rem;
+  }
+
+  .category-header {
+    flex-direction: column;
+    gap: 0.5rem;
+    align-items: flex-start;
+  }
+
+  th, td {
+    padding: 0.75rem 1rem;
+  }
+
+  .source-info {
+    padding: 1.5rem;
+    margin: 2rem -1rem 0;
+    border-radius: 0;
+  }
+
+  .drugs-title {
+    font-size: 1.75rem;
+  }
+
+  .page-description {
+    font-size: 1rem;
+    padding: 0 1rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .drugs-container {
+    padding: 5rem 1rem 1rem;
+  }
+
+  .category-section {
+    border-radius: 12px;
+  }
+
+  td {
+    font-size: 0.8125rem;
+  }
+} 
\ No newline at end of file