diff --git a/demo/src/routes/+layout.svelte b/demo/src/routes/+layout.svelte
index 3305905..c869d03 100644
--- a/demo/src/routes/+layout.svelte
+++ b/demo/src/routes/+layout.svelte
@@ -38,9 +38,9 @@
 
 	// mode 是否是指定组件模式
 	// whether mode is specified component mode
-	const isComponentMode = mode != 'production' && mode != 'development' && mode != 'english' ? true : false;
+	const isComponentMode = mode != 'production' && mode != 'development' && mode != 'english';
 
-	$: showLeft = isIframe === '1' || $page.url.pathname === '/' || isComponentMode ? false : true;
+	$: showLeft = !(isIframe === '1' || $page.url.pathname === '/' || isComponentMode);
 
 	let theme = localStorage.getItem('theme') === 'dark' ? 'dark' : 'light';
 	// 设置主题
@@ -113,7 +113,7 @@
 		}
 	}
 	sessionStorage.setItem('lang', lang);
-	const isZh = lang === 'zh_CN' ? true : false;
+	const isZh = lang === 'zh_CN';
 	setContext('STDF_lang', isZh ? zh_CN : en_US);
 
 	onMount(() => {
diff --git a/doc/components/pagination/version.md b/doc/components/pagination/version.md
index 00d9531..81198a5 100644
--- a/doc/components/pagination/version.md
+++ b/doc/components/pagination/version.md
@@ -1,18 +1,8 @@
-<!-- "[!tag|A|0|]"表示一个 tag，其中A表示新增，B表示 BUG，O表示优化，第二个数字表示 BUG 等级，0暂无意义。 -->
-<!-- "[!issue|dufu1991|]"表示一个 issue 提出者，其中 dufu1991 是提出者的id。 -->
-<!-- "[!contribute|dufu1991|]"表示一个贡献者，其中 eric1932 是贡献者的id。 -->
+## 0.4.5
 
-<!-- 记得带上版本号和更新日期，以下是一个示例：
+- [!tag|B|1|]修复页码显示错乱问题，关联 [#22](https://github.com/any-tdf/stdf/pull/22) 。[!contribute|lemonTree345|]
 
-## 0.0.1
-
--   [!tag|B|1|]严重 BUG。[!contribute|dufu1991|][!issue|dufu1991|]
--   [!tag|B|2|]一般 BUG。
--   [!tag|B|3|]轻微 BUG。
--   [!tag|O|0|]优化。
--   [!tag|A|0|]新增。
-
-<font size=1>2022-07-18</font> -->
+<font size=1>2024-03-28</font>
 
 ## 0.1.3
 
diff --git a/doc/components/pagination/version_en.md b/doc/components/pagination/version_en.md
index 9365c20..42b38ac 100644
--- a/doc/components/pagination/version_en.md
+++ b/doc/components/pagination/version_en.md
@@ -1,18 +1,8 @@
-<!-- "[!tag|A|0|]" This represents a tag, where A stands for addition, B stands for bug, and O stands for optimization. The second digit represents the severity level of the bug, with 0 having no significance. -->
-<!-- "[!issue|dufu1991|]" Indicates an issue submitter, where dufu1991 is the submitter's ID. -->
-<!-- "[!contribute|dufu1991|]" Indicates a contributor, where dufu1991 is the ID of the contributor. -->
+## 0.4.5
 
-<!-- Remember to include the version number and update date. Here is an example:
+- [!tag|B|1|]Fixed the problem of incorrect page number display. Related to [#22](https://github.com/any-tdf/stdf/pull/22). [!contribute|lemonTree345|]
 
-## 0.0.1
-
--   [!tag|B|1|]严重 BUG。[!contribute|dufu1991|][!issue|dufu1991|]
--   [!tag|B|2|]一般 BUG。
--   [!tag|B|3|]轻微 BUG。
--   [!tag|O|0|]优化。
--   [!tag|A|0|]新增。
-
-<font size=1>2022-07-18</font> -->
+<font size=1>2024-03-28</font>
 
 ## 0.1.3
 
diff --git a/doc/guide/changelog.md b/doc/guide/changelog.md
index 65e3943..932a2bb 100644
--- a/doc/guide/changelog.md
+++ b/doc/guide/changelog.md
@@ -1,3 +1,7 @@
+## 0.4.5
+
+- 修复 Pagination 组件，详见 [Pagination](https://stdf.design/#/components?nav=pagination&tab=4)。
+
 ## 0.4.4
 
 - 增强 Tabs 组件，详见 [Tabs](https://stdf.design/#/components?nav=tabs&tab=4)。
diff --git a/doc/guide/changelog_en.md b/doc/guide/changelog_en.md
index 8af69b5..7bdbe15 100644
--- a/doc/guide/changelog_en.md
+++ b/doc/guide/changelog_en.md
@@ -1,3 +1,7 @@
+## 0.4.5
+
+- Fixed the Pagination component, please see [Pagination](https://stdf.design/#/components?nav=pagination&tab=4).
+
 ## 0.4.4
 
 - Enhanced Tabs components, please see [Tabs](https://stdf.design/#/components?nav=tabs&tab=4).
diff --git a/packages/stdf/components/modal/Modal.svelte b/packages/stdf/components/modal/Modal.svelte
index 4bfa931..cc639f0 100644
--- a/packages/stdf/components/modal/Modal.svelte
+++ b/packages/stdf/components/modal/Modal.svelte
@@ -129,7 +129,7 @@
 	size={0}
 	duration={300}
 	outDuration={150}
-	maskClosable={showBtn ? false : true}
+	maskClosable={!showBtn}
 	position="center"
 	radiusPosition="all"
 	radius="lg"
diff --git a/packages/stdf/components/pagination/Page.svelte b/packages/stdf/components/pagination/Page.svelte
index a92d12c..8fc1d7b 100644
--- a/packages/stdf/components/pagination/Page.svelte
+++ b/packages/stdf/components/pagination/Page.svelte
@@ -11,14 +11,7 @@
 		bold: 'font-bold text-primary dark:text-dark border-transparent',
 	};
 
-	const radiusClass = {
-		base: 'rounded',
-		md: 'rounded-md',
-		lg: 'rounded-lg',
-		xl: 'rounded-xl',
-		full: 'rounded-full',
-		none: 'rounded-none',
-	};
+	const radiusClass = { base: 'rounded', md: 'rounded-md', lg: 'rounded-lg', xl: 'rounded-xl', full: 'rounded-full', none: 'rounded-none' };
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
diff --git a/packages/stdf/package.json b/packages/stdf/package.json
index 280e4c4..962c1aa 100644
--- a/packages/stdf/package.json
+++ b/packages/stdf/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "stdf",
-	"version": "0.4.4",
+	"version": "0.4.5",
 	"description": "Mobile web component library based on Svelte and Tailwind",
 	"main": "./components/index.js",
 	"svelte": "./components/index.js",