perf: trans ranking pange

public/locales/en/rank.json

@@ -0,0 +1,48 @@
+{
+  "tiobe": {
+    "title": "Programming Language Ranking",
+    "nav": "{{month}} {{year}} Programming Language Ranking",
+    "p_text": "<strong>The TIOBE Programming Community Index</strong> is an indicator of the popularity of programming languages, created and maintained by TIOBE Software BV, established in October 2000 in Eindhoven, the Netherlands. The index is calculated based on the number of search engine results for queries containing the name of the language. It includes results from Google, Baidu, Wikipedia, and YouTube.",
+    "thead": {
+      "position": "Rank",
+      "name": "Language",
+      "rating": "Ratings",
+      "change": "Change",
+      "md_change": "📊",
+      "star": "🏅️Year"
+    }
+  },
+  "db": {
+    "title": "Database Ranking",
+    "nav": "{{month}} {{year}} Database Ranking",
+    "p_text": "<strong>The DB-Engines Ranking</strong> ranks database management systems by popularity, covering over 380 databases, updated monthly. The ranking is based on various factors including search engine results for the database name, Google Trends, Stack Overflow, social networks, and job postings mentioning the database.",
+    "thead": {
+      "position": "Rank",
+      "name": "Database",
+      "rating": "Score",
+      "change": "Change",
+      "md_change": "📊",
+      "model": "Model"
+    }
+  },
+  "netcraft": {
+    "title": "Web Server Ranking",
+    "nav": "{{month}} {{year}} Web Server Ranking",
+    "p_text": "<strong>The Netcraft Ranking</strong> is a monthly ranking of web servers published by Netcraft, an internet services company founded in 1995. It is a major reference for understanding global web server market share and rankings, often cited by major media like The Wall Street Journal and Slashdot.",
+    "thead": {
+      "position": "Rank",
+      "name": "Server",
+      "rating": "Share",
+      "change": "Change",
+      "md_change": "📊",
+      "total": "Total"
+    },
+    "market_title": "Market Share Ranking",
+    "active_title": "Active Site Ranking",
+    "servers": {
+      "apache": "An open-source web server that can run on most computer operating systems. Widely used for its multi-platform support and security, making it one of the most popular web server software.",
+      "nginx": "A free, open-source, lightweight, high-performance web server developed by Igor Sysoev for Rambler.ru, the second most visited site in Russia.",
+      "openresty": "A web platform based on Nginx, using the LuaJIT engine to run Lua scripts, created by Yichun Zhang."
+    }
+  }
+}

public/locales/zh/rank.json

@@ -0,0 +1,48 @@
+{
+  "tiobe": {
+    "title": "编程语言排名",
+    "nav": "{{year}} 年 {{month}} 月编程语言排行榜",
+    "p_text": "<strong>「TIOBE 编程社区指数」</strong>是一种衡量编程语言流行度的标准，由成立于 2000 年 10 月位于荷兰埃因霍温的 TIOBE Software BV 创建和维护。该指数是根据网络搜索引擎对含有该语言名称的查询结果的数量计算出来的。该指数涵盖了 Google、百度、维基百科和 YouTube 的搜索结果。",
+    "thead": {
+      "position": "排名",
+      "name": "编程语言",
+      "rating": "流行度",
+      "change": "对比上月",
+      "md_change": "趋势",
+      "star": "年度明星"
+    }
+  },
+  "db": {
+    "title": "数据库排名",
+    "nav": "{{year}} 年 {{month}} 月数据库排行榜",
+    "p_text": "<strong>「DB-Engines 排名」</strong>是按流行程度对数据库管理系统进行排名，涵盖 380 多个数据库，每月更新一次。排名标准包括搜索数据库名称时的搜索引擎结果的数量、Google 趋势、Stack Overflow、社交网络和提及数据库的工作机会等数据，综合比较排名。",
+    "thead": {
+      "position": "排名",
+      "name": "数据库",
+      "rating": "分数",
+      "change": "对比上月",
+      "md_change": "趋势",
+      "model": "类型"
+    }
+  },
+  "netcraft": {
+    "title": "Web 服务器排名",
+    "nav": "{{year}} 年 {{month}} 月 Web 服务器排行榜",
+    "p_text": "<strong>「Netcraft 排名」</strong>是一个始于 1995 年的互联网服务公司发布的 Web 服务器排名，每月更新一次。目前已成为人们了解全球网站的服务器市场份额和排名情况的主要参考依据，时常被华尔街杂志、Slashdot 等知名媒体引用。",
+    "thead": {
+      "position": "排名",
+      "name": "服务器",
+      "rating": "占比",
+      "change": "对比上月",
+      "md_change": "趋势",
+      "total": "总数"
+    },
+    "market_title": "市场份额排名",
+    "active_title": "活跃网站排名",
+    "servers": {
+      "apache": "一个开放源码的网页服务器，可以在大多数计算机操作系统中运行。由于其多平台和安全性被广泛使用，是最流行的 Web服务器端软件之一。",
+      "nginx": "免费开源、轻量级、高性能 Web 服务器，由伊戈尔·赛索耶夫为俄罗斯访问量第二的 Rambler.ru 站点开发。",
+      "openresty": "一个基于 Nginx 的 Web 平台，可以使用其 LuaJIT 引擎运行 Lua 脚本，由章亦春创建。"
+    }
+  }
+}

src/components/navbar/Navbar.tsx

@@ -34,7 +34,7 @@ const Navbar = ({ middleText = '', endText }: Props) => {
             {endText}
           </div>
         ) : (
-          <div className='flex w-5'></div>
+          <div className='flex w-5' />
         )}
       </div>
     </div>

src/components/rankTable/RankTable.tsx

@@ -9,14 +9,32 @@ type column = {
   key: string;
   title: string;
   width: number | string;
-  render: (row: any, index: number) => any;
+  percent?: boolean;
+  render: (row: any, showPercent?: boolean) => any;
 };
 
 type TableProps = {
   columns: column[];
   list: RankDataItem[];
 };
 
+export const getMonthName = (
+  month: number,
+  i18n_lang: string,
+  options: { format?: 'short' | 'long'; forceEnglish?: boolean } = {}
+) => {
+  const { format = 'short', forceEnglish = false } = options;
+  const date = new Date(2023, month - 1, 1);
+
+  if (forceEnglish) {
+    return i18n_lang === 'en'
+      ? date.toLocaleString('en', { month: 'long' })
+      : month;
+  }
+
+  return date.toLocaleString(i18n_lang, { month: format });
+};
+
 export const Table = ({ columns, list }: TableProps) => {
   return (
     <div className='overflow-hidden rounded-lg border shadow dark:border-gray-700 dark:shadow-none'>
@@ -28,7 +46,7 @@ export const Table = ({ columns, list }: TableProps) => {
                 key={key}
                 scope='col'
                 style={{ width: width }}
-                className='px-4 py-2 text-left text-sm font-medium uppercase text-gray-500 dark:text-gray-300 md:px-6 md:py-3'
+                className='px-4 py-2 text-left text-sm font-medium text-gray-500 dark:text-gray-300 md:px-6 md:py-3'
               >
                 {title}
               </th>
@@ -39,10 +57,10 @@ export const Table = ({ columns, list }: TableProps) => {
         <tbody className='divide-y divide-gray-200 dark:divide-gray-700'>
           {list?.map((row: RankDataItem, index) => (
             <tr key={index}>
-              {columns.map(({ key, render }) => {
+              {columns.map(({ key, render, percent }) => {
                 let content = row[key];
                 if (render) {
-                  content = render(row, index);
+                  content = render(row, percent);
                 }
                 return (
                   <td
@@ -70,6 +88,7 @@ type RankSearchBarProps = {
   logo: string;
   options?: any[];
   monthList: number[];
+  i18n_lang: string;
   onChange: (key: string, value: string) => void;
 };
 
@@ -78,6 +97,7 @@ export const RankSearchBar = ({
   logo,
   monthList = [],
   options = [],
+  i18n_lang,
   onChange,
 }: RankSearchBarProps) => {
   const router = useRouter();
@@ -91,18 +111,29 @@ export const RankSearchBar = ({
   }, [router]);
 
   const typeOptions = useMemo(() => {
-    return options.length
-      ? options
-      : [
-          { key: '/report/tiobe', value: '编程语言' },
-          { key: '/report/netcraft', value: '服务器' },
-          { key: '/report/db-engines', value: '数据库' },
-        ];
-  }, [options]);
+    if (options.length) {
+      return options;
+    } else {
+      return i18n_lang == 'en'
+        ? [
+            { key: '/report/tiobe', value: 'Language' },
+            { key: '/report/netcraft', value: 'Server' },
+            { key: '/report/db-engines', value: 'Database' },
+          ]
+        : [
+            { key: '/report/tiobe', value: '编程语言' },
+            { key: '/report/netcraft', value: '服务器' },
+            { key: '/report/db-engines', value: '数据库' },
+          ];
+    }
+  }, [options, i18n_lang]);
 
   const monthOptions = useMemo(() => {
-    return monthList?.map((m) => ({ key: m, value: `${m}月` }));
-  }, [monthList]);
+    return monthList?.map((m) => ({
+      key: m,
+      value: getMonthName(m, i18n_lang) as string,
+    }));
+  }, [monthList, i18n_lang]);
 
   return (
     <div className='mb-2 flex items-center justify-between rounded-lg border bg-gray-50 py-2 px-2 shadow dark:border-gray-700 dark:bg-gray-800 dark:shadow-gray-800'>

src/components/report/Report.tsx

@@ -3,34 +3,18 @@ import { IoMdRemove, IoMdTrendingDown, IoMdTrendingUp } from 'react-icons/io';
 
 import { RankDataItem } from '@/types/rank';
 
-export const ChangeColumnRender = (row: RankDataItem) => {
-  let text = '新上榜';
+export const ChangeColumnRender = (row: RankDataItem, showPercent = false) => {
+  let text = '-';
   if (row.change !== null) {
-    text = `${row.change}`;
+    text = showPercent ? `${row.change}%` : `${row.change}`;
   }
-  return (
-    <div className='flex items-center'>
-      {row.change < 0 ? (
-        <AiFillCaretDown className='text-red-500' />
-      ) : (
-        <AiFillCaretUp className='text-green-500' />
-      )}
-      <span className='ml-1'>{text}</span>
-    </div>
-  );
-};
 
-export const ChangePercentColumnRender = (row: RankDataItem) => {
-  let text = '新上榜';
-  if (row.change !== null) {
-    text = `${row.change}%`;
-  }
   return (
     <div className='flex items-center'>
       {row.change < 0 ? (
-        <AiFillCaretDown className='text-red-500' />
+        <AiFillCaretDown className='text-green-500' />
       ) : (
-        <AiFillCaretUp className='text-green-500' />
+        <AiFillCaretUp className='text-red-500' />
       )}
       <span className='ml-1'>{text}</span>
     </div>
@@ -46,9 +30,5 @@ export const TrendColumnRender = (row: RankDataItem) => {
       icon = <IoMdTrendingDown size={16} className=' text-green-500' />;
     }
   }
-  return (
-    <>
-      <span>{icon}</span>
-    </>
-  );
+  return <span>{icon}</span>;
 };