easy-component-ui 2.0.5 → 2.1.0

package/components/ea-option-gropu/index.js

@@ -1 +1,57 @@
-import Base from"../Base.js";import"../ea-icon/index.js";const stylesheet="\n.ea-option-group_wrap .ea-option-group_title {\n  padding-left: 20px;\n  font-size: 12px;\n  color: #909399;\n  line-height: 30px;\n}\n";export class EaOptionGroup extends Base{#t;#e;constructor(){super();const t=this.attachShadow({mode:"open"});t.innerHTML="\n            <div class='ea-option-group_wrap' part='container'>\n                <div class='ea-option-group_title' part='title-wrap'></div>\n                <slot></slot>\n            </div>\n        ",this.#t=t.querySelector(".ea-option-group_wrap"),this.#e=t.querySelector(".ea-option-group_title"),this.build(t,stylesheet)}get label(){return this.getAttribute("label")||""}set label(t){this.setAttribute("label",t),this.#e.innerHTML=t}connectedCallback(){this.label=this.label}}customElements.get("ea-option-group")||customElements.define("ea-option-group",EaOptionGroup);
+// @ts-nocheck
+import Base from '../Base.js';
+import '../ea-icon/index.js'
+
+const stylesheet = `
+.ea-option-group_wrap .ea-option-group_title {
+  padding-left: 20px;
+  font-size: 12px;
+  color: #909399;
+  line-height: 30px;
+}
+`;
+
+export class EaOptionGroup extends Base {
+    #container;
+
+    #titleWrap;
+    constructor() {
+        super();
+
+        const shadowRoot = this.attachShadow({ mode: 'open' });
+
+        shadowRoot.innerHTML = `
+            <div class='ea-option-group_wrap' part='container'>
+                <div class='ea-option-group_title' part='title-wrap'></div>
+                <slot></slot>
+            </div>
+        `;
+
+        this.#container = shadowRoot.querySelector('.ea-option-group_wrap');
+        this.#titleWrap = shadowRoot.querySelector('.ea-option-group_title');
+
+        this.build(shadowRoot, stylesheet);
+    }
+
+    // ------- label 标题  -------
+    // #region
+    get label() {
+        return this.getAttribute('label') || '';
+    }
+
+    set label(val) {
+        this.setAttribute('label', val);
+
+        this.#titleWrap.innerHTML = val;
+    }
+    // #endregion
+    // ------- end -------
+
+    connectedCallback() {
+        this.label = this.label;
+    }
+}
+
+if (!customElements.get('ea-option-group')) {
+    customElements.define('ea-option-group', EaOptionGroup);
+}

package/components/ea-option-gropu/index.scss

@@ -0,0 +1,8 @@
+.ea-option-group_wrap {
+  .ea-option-group_title {
+    padding-left: 20px;
+    font-size: 12px;
+    color: #909399;
+    line-height: 30px;
+  }
+}

package/components/ea-page-header/index.css

@@ -0,0 +1,33 @@
+.ea-page-header_wrap {
+  display: flex;
+  align-items: center;
+  line-height: 24px;
+}
+.ea-page-header_wrap .ea-page-header_title-wrap,
+.ea-page-header_wrap .ea-page-header_divider,
+.ea-page-header_wrap .ea-page-header_content-wrap {
+  line-height: 24px;
+}
+.ea-page-header_wrap .ea-page-header_title-wrap {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1;
+  cursor: pointer;
+}
+.ea-page-header_wrap .ea-page-header_divider {
+  margin: 0 1rem;
+  margin-bottom: 1px;
+  font-size: 14px;
+  height: 14px;
+  overflow: hidden;
+  color: #dcdfe6;
+  line-height: 1;
+  vertical-align: middle;
+}
+.ea-page-header_wrap .ea-page-header_content-wrap {
+  font-size: 18px;
+  color: #303133;
+  line-height: 1;
+}

package/components/ea-page-header/index.js

@@ -1 +1,91 @@
-import Base from"../Base.js";import"../ea-icon/index.js";import{createSlotElement,createElement}from"../../utils/createElement.js";import{stylesheet}from"./src/style/stylesheet.js";export class EaPageHeader extends Base{#t;#e;#n;#a;#i;constructor(){super();const t=this.attachShadow({mode:"open"});t.innerHTML="\n            <div class='ea-page-header_wrap' part='container'>\n                <div class='ea-page-header_title-wrap' part='title-wrap'>\n                    <ea-icon class='ea-page-header_back-icon' part='back-icon' icon=\"icon-angle-left\"></ea-icon>\n                    <slot name=\"title\"></slot>\n                </div>\n                <div class='ea-page-header_divider' part='divider'>|</div>\n                <div class='ea-page-header_content-wrap' part='content-wrap'>\n                    <slot name=\"content\"></slot>\n                </div>\n            </div>\n        ",this.#t=t.querySelector(".ea-page-header_wrap"),this.#e=t.querySelector(".ea-page-header_title-wrap"),this.#a=t.querySelector('slot[name="title"]'),this.#n=t.querySelector(".ea-page-header_content-wrap"),this.#i=t.querySelector('slot[name="content"]'),this.build(t,stylesheet)}get title(){return this.getAttribute("title")||""}set title(t){t?(this.setAttribute("title",t),this.#a.innerText=t):(this.setAttribute("title","返回"),this.#a.innerText="返回")}get content(){return this.getAttribute("content")||""}set content(t){t?(this.setAttribute("content",t),this.#i.innerText=t):(this.setAttribute("content",""),this.#i.innerText="")}connectedCallback(){this.title=this.title,this.content=this.content,this.#e.addEventListener("click",(()=>{this.dispatchEvent(new CustomEvent("back"))}))}}customElements.get("ea-page-header")||customElements.define("ea-page-header",EaPageHeader);
+// @ts-nocheck
+import Base from '../Base.js';
+import '../ea-icon/index.js'
+import { createSlotElement, createElement } from '../../utils/createElement.js';
+
+import { stylesheet } from './src/style/stylesheet.js';
+
+export class EaPageHeader extends Base {
+    #wrap;
+
+    #titleWrap;
+    #contentWrap
+
+    #titleSlot;
+    #contentSlot;
+    constructor() {
+        super();
+
+        const shadowRoot = this.attachShadow({ mode: 'open' });
+        shadowRoot.innerHTML = `
+            <div class='ea-page-header_wrap' part='container'>
+                <div class='ea-page-header_title-wrap' part='title-wrap'>
+                    <ea-icon class='ea-page-header_back-icon' part='back-icon' icon="icon-angle-left"></ea-icon>
+                    <slot name="title"></slot>
+                </div>
+                <div class='ea-page-header_divider' part='divider'>|</div>
+                <div class='ea-page-header_content-wrap' part='content-wrap'>
+                    <slot name="content"></slot>
+                </div>
+            </div>
+        `;
+
+        this.#wrap = shadowRoot.querySelector('.ea-page-header_wrap');
+        this.#titleWrap = shadowRoot.querySelector('.ea-page-header_title-wrap');
+        this.#titleSlot = shadowRoot.querySelector('slot[name="title"]');
+        this.#contentWrap = shadowRoot.querySelector('.ea-page-header_content-wrap');
+        this.#contentSlot = shadowRoot.querySelector('slot[name="content"]');
+
+        this.build(shadowRoot, stylesheet);
+    }
+
+    // ------- title 返回区域的内容 -------
+    // #region
+    get title() {
+        return this.getAttribute('title') || '';
+    }
+
+    set title(value) {
+        if (value) {
+            this.setAttribute('title', value);
+            this.#titleSlot.innerText = value;
+        } else {
+            this.setAttribute('title', '返回');
+            this.#titleSlot.innerText = '返回';
+        }
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- content 页面标题 -------
+    // #region
+    get content() {
+        return this.getAttribute('content') || '';
+    }
+
+    set content(value) {
+        if (value) {
+            this.setAttribute('content', value);
+            this.#contentSlot.innerText = value;
+        } else {
+            this.setAttribute('content', '');
+            this.#contentSlot.innerText = '';
+        }
+    }
+    // #endregion
+    // ------- end -------
+
+    connectedCallback() {
+        this.title = this.title;
+
+        this.content = this.content;
+
+        this.#titleWrap.addEventListener('click', () => {
+            this.dispatchEvent(new CustomEvent('back'));
+        });
+    }
+}
+
+if (!customElements.get('ea-page-header')) {
+    customElements.define('ea-page-header', EaPageHeader);
+}

package/components/ea-page-header/index.scss

@@ -0,0 +1,44 @@
+.ea-page-header_wrap {
+  display: flex;
+  align-items: center;
+
+  line-height: 24px;
+
+  .ea-page-header_title-wrap,
+  .ea-page-header_divider,
+  .ea-page-header_content-wrap {
+    line-height: 24px;
+  }
+
+  .ea-page-header_title-wrap {
+    display: flex;
+    align-items: center;
+
+    font-size: 14px;
+    font-weight: 500;
+
+    line-height: 1;
+
+    cursor: pointer;
+  }
+
+  .ea-page-header_divider {
+    margin: 0 1rem;
+    margin-bottom: 1px;
+    font-size: 14px;
+    height: 14px;
+    overflow: hidden;
+
+    color: #dcdfe6;
+
+    line-height: 1;
+    vertical-align: middle;
+  }
+
+  .ea-page-header_content-wrap {
+    font-size: 18px;
+    color: #303133;
+
+    line-height: 1;
+  }
+}

package/components/ea-page-header/src/style/stylesheet.js

@@ -1 +1,35 @@
-export const stylesheet="\n.ea-page-header_wrap {\n  display: flex;\n  align-items: center;\n  line-height: 24px;\n}\n.ea-page-header_wrap .ea-page-header_title-wrap,\n.ea-page-header_wrap .ea-page-header_divider,\n.ea-page-header_wrap .ea-page-header_content-wrap {\n  line-height: 24px;\n}\n.ea-page-header_wrap .ea-page-header_title-wrap {\n  display: flex;\n  align-items: center;\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 1;\n  cursor: pointer;\n}\n.ea-page-header_wrap .ea-page-header_divider {\n  margin: 0 1rem;\n  margin-bottom: 1px;\n  font-size: 14px;\n  height: 14px;\n  overflow: hidden;\n  color: #dcdfe6;\n  line-height: 1;\n  vertical-align: middle;\n}\n.ea-page-header_wrap .ea-page-header_content-wrap {\n  font-size: 18px;\n  color: #303133;\n  line-height: 1;\n}\n";
+export const stylesheet = `
+.ea-page-header_wrap {
+  display: flex;
+  align-items: center;
+  line-height: 24px;
+}
+.ea-page-header_wrap .ea-page-header_title-wrap,
+.ea-page-header_wrap .ea-page-header_divider,
+.ea-page-header_wrap .ea-page-header_content-wrap {
+  line-height: 24px;
+}
+.ea-page-header_wrap .ea-page-header_title-wrap {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 1;
+  cursor: pointer;
+}
+.ea-page-header_wrap .ea-page-header_divider {
+  margin: 0 1rem;
+  margin-bottom: 1px;
+  font-size: 14px;
+  height: 14px;
+  overflow: hidden;
+  color: #dcdfe6;
+  line-height: 1;
+  vertical-align: middle;
+}
+.ea-page-header_wrap .ea-page-header_content-wrap {
+  font-size: 18px;
+  color: #303133;
+  line-height: 1;
+}
+`;

package/components/ea-pagination/index.css

@@ -0,0 +1,69 @@
+.ea-pagination_wrap {
+  display: flex;
+  align-items: center;
+  font-size: 0.9rem;
+}
+.ea-pagination_wrap .ea-pagination_item_wrap {
+  display: flex;
+  align-items: center;
+}
+.ea-pagination_wrap .ea-pagination_item_wrap .ea-pagination_item,
+.ea-pagination_wrap .ea-pagination_item_wrap .ea-pagination_more {
+  cursor: pointer;
+  box-sizing: border-box;
+  margin: 0 5px;
+  padding: 0 4px;
+  min-width: 30px;
+  height: 28px;
+  line-height: 28px;
+  font-size: 13px;
+  text-align: center;
+}
+.ea-pagination_wrap .ea-pagination_item_wrap .ea-pagination_item.ea-pagination_item--active {
+  color: #409eff;
+}
+.ea-pagination_wrap .ea-pagination_item_wrap .ea-pagination_more {
+  cursor: pointer;
+  user-select: none;
+}
+.ea-pagination_wrap .ea-pagination_item_wrap .ea-pagination_more.ea-pagination_more--active {
+  color: #409eff;
+}
+.ea-pagination_wrap .ea-pagination_arrow {
+  user-select: none;
+  cursor: pointer;
+  padding: 0 10px;
+  line-height: 28px;
+}
+.ea-pagination_wrap .ea-pagination_arrow.disabled {
+  cursor: default;
+  pointer-events: none;
+  color: #c0c4cc;
+}
+.ea-pagination_wrap .ea-pagination_arrow:first-child {
+  margin-right: 0.25rem;
+}
+.ea-pagination_wrap .ea-pagination_arrow:last-child {
+  margin-left: 0.25rem;
+}
+.ea-pagination_wrap .ea-pagination_item.background,
+.ea-pagination_wrap .ea-pagination_more.background,
+.ea-pagination_wrap .ea-pagination_arrow.background {
+  background-color: #f4f4f5;
+  border-radius: 3px;
+}
+.ea-pagination_wrap .ea-pagination_item.background:hover,
+.ea-pagination_wrap .ea-pagination_more.background:hover,
+.ea-pagination_wrap .ea-pagination_arrow.background:hover {
+  color: #409eff;
+}
+.ea-pagination_wrap .ea-pagination_item.background.active,
+.ea-pagination_wrap .ea-pagination_more.background.active,
+.ea-pagination_wrap .ea-pagination_arrow.background.active {
+  background-color: #409eff;
+  color: #f4f4f5;
+}
+.ea-pagination_wrap .ea-pagination_show_total {
+  margin-right: 0.5rem;
+  font-size: 13px;
+}

package/components/ea-pagination/index.js

@@ -1 +1,305 @@
-import Base from"../Base.js";import{stylesheet}from"./src/style/stylesheet.js";import{getMoreItem}from"./src/components/getMoreItem.js";import{getPageItem}from"./src/components/getPageItem.js";import{getShowTotalItem}from"./src/components/getShowTotalItem.js";export class EaPagination extends Base{#t;#e;#i;#a;constructor(){super();const t=this.attachShadow({mode:"open"});t.innerHTML=`\n            <div class="ea-pagination_wrap" part="container">\n                <span class="ea-pagination_arrow prev ${this.background?"background":""}" part="arrow">&lt;</span>\n                <div class="ea-pagination_item_wrap" part="item-wrap"></div>\n                <span class="ea-pagination_arrow next ${this.background?"background":""}" part="arrow">&gt;</span>\n            </div>\n        `,this.#t=t.querySelector(".ea-pagination_wrap"),this.#i=t.querySelector(".prev"),this.#e=t.querySelector(".ea-pagination_item_wrap"),this.#a=t.querySelector(".next"),this.build(t,stylesheet)}get layout(){return this.getAttribute("layout").split(",").map((t=>t.trim()))||["prev","pager","next"]}set layout(t){this.setAttribute("layout",t)}get sizes(){return this.getAttrNumber("sizes")||10}set sizes(t){this.setAttribute("sizes",t)}get currentPage(){return this.getAttrNumber("current-page")||1}set currentPage(t){this.setAttribute("current-page",t)}get pageCount(){return this.getAttrNumber("page-count")||6}set pageCount(t){this.setAttribute("page-count",t)}get total(){return this.getAttrNumber("total")}set total(t){this.setAttribute("total",t)}get paginationCount(){return Math.ceil(this.total/this.sizes)}get background(){return this.getAttrBoolean("background")}set background(t){t&&this.setAttribute("background",t)}#n(t,e){this.dispatchEvent(new CustomEvent(t,e))}#s(){this.#r(),this.layout.includes("prev")?this.#i.addEventListener("click",(()=>{this.currentPage<=1||(this.currentPage--,this.#o(),this.#n("change",{detail:{currentPage:this.currentPage}}))})):this.#i.style.display="none",this.layout.includes("next")?this.#a.addEventListener("click",(()=>{this.currentPage>=this.paginationCount||(this.currentPage++,this.#o(),this.#n("change",{detail:{currentPage:this.currentPage}}))})):this.#a.style.display="none"}#r(){(this.layout.includes("prev")||this.layout.includes("next"))&&(1===this.currentPage&&this.layout.includes("prev")?this.#i.classList.add("disabled"):this.currentPage>=this.paginationCount&&this.layout.includes("next")?this.#a.classList.add("disabled"):(this.#i.classList.remove("disabled"),this.#a.classList.remove("disabled")))}#h(t,e){t.addEventListener("click",(t=>{this.currentPage=e,this.#o(),this.#n("change",{detail:{currentPage:this.currentPage}})}))}#g(t,e){t.addEventListener("click",(t=>{this.currentPage+="prev"===e?-5:5,this.currentPage<1?this.currentPage=1:this.currentPage>this.paginationCount&&(this.currentPage=this.paginationCount),this.#o(),this.#n("change",{detail:{currentPage:this.currentPage}})}))}#c(){if(!this.layout.includes("pager"))return;this.#e.innerHTML="";const t=Math.floor(this.pageCount/2);let e=this.currentPage-t,i=this.currentPage+t;e<=1?(e=1,i=this.pageCount<this.paginationCount?this.pageCount:this.paginationCount):i>=this.paginationCount?(e=this.paginationCount-this.pageCount+1,i=this.paginationCount):i--;for(let t=e;t<=i;t++){const e=getPageItem(t,this.background);this.#e.appendChild(e),t===this.currentPage&&(e.classList.add("ea-pagination_item--active"),this.background&&e.classList.add("active")),this.#h(e,t)}if(this.total>this.pageCount&&this.currentPage>=this.pageCount&&this.paginationCount!==this.pageCount){const t=getMoreItem("prev",this.background);this.#g(t,"prev");const e=getPageItem(1,this.background);this.#h(e,1),this.#e.insertBefore(t,this.#e.firstChild),this.#e.insertBefore(e,this.#e.firstChild)}if(this.total>this.pageCount&&this.currentPage<this.paginationCount-t&&this.paginationCount!==this.pageCount){const t=getMoreItem("next",this.background);this.#g(t,"next");const e=getPageItem(this.paginationCount,this.background);this.#h(e,this.paginationCount),this.#e.appendChild(t),this.#e.appendChild(e)}}#o(){this.#r(),this.#c()}#u(){if(!this.layout.includes("total"))return;const t=getShowTotalItem();t.innerHTML=`共 ${this.total} 条`,this.#t.insertBefore(t,this.#t.firstChild)}connectedCallback(){this.sizes=this.sizes,this.currentPage=this.currentPage,this.total=this.total,this.#s(),this.#c(),this.#u()}}customElements.get("ea-pagination")||customElements.define("ea-pagination",EaPagination);
+import Base from '../Base.js';
+
+import { stylesheet } from './src/style/stylesheet.js';
+
+import { getMoreItem } from './src/components/getMoreItem.js';
+import { getPageItem } from './src/components/getPageItem.js';
+import { getShowTotalItem } from './src/components/getShowTotalItem.js';
+
+export class EaPagination extends Base {
+    #container;
+
+    // 页码元素的容器
+    #paginationWrap;
+
+    // 箭头
+    #prevArrow;
+    #nextArrow;
+
+    constructor() {
+        super();
+
+        const shadowRoot = this.attachShadow({ mode: 'open' });
+
+        shadowRoot.innerHTML = `
+            <div class="ea-pagination_wrap" part="container">
+                <span class="ea-pagination_arrow prev ${this.background ? 'background' : ''}" part="arrow">&lt;</span>
+                <div class="ea-pagination_item_wrap" part="item-wrap"></div>
+                <span class="ea-pagination_arrow next ${this.background ? 'background' : ''}" part="arrow">&gt;</span>
+            </div>
+        `;
+
+        this.#container = shadowRoot.querySelector('.ea-pagination_wrap');
+        this.#prevArrow = shadowRoot.querySelector('.prev');
+        this.#paginationWrap = shadowRoot.querySelector('.ea-pagination_item_wrap');
+        this.#nextArrow = shadowRoot.querySelector('.next');
+
+        this.build(shadowRoot, stylesheet);
+    }
+
+    // ------- layout 布局(前一页, 页码, 后一页) -------
+    // #region
+    get layout() {
+        const arr = this.getAttribute('layout').split(',').map(item => item.trim());
+
+        return arr || ['prev', 'pager', 'next'];
+    }
+
+    set layout(value) {
+        this.setAttribute('layout', value);
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- sizes 分页中每页多少记录 -------
+    // #region
+    get sizes() {
+        return this.getAttrNumber('sizes') || 10;
+    }
+
+    set sizes(value) {
+        this.setAttribute('sizes', value);
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- current-page 当前页码 -------
+    // #region
+    get currentPage() {
+        return this.getAttrNumber('current-page') || 1;
+    }
+
+    set currentPage(value) {
+        this.setAttribute('current-page', value);
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- page-count 总显示的页码数量 -------
+    // #region
+    get pageCount() {
+        return this.getAttrNumber('page-count') || 6;
+    }
+
+    set pageCount(value) {
+        this.setAttribute('page-count', value);
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- total 总记录数 -------
+    // #region
+    get total() {
+        return this.getAttrNumber('total');
+    }
+
+    set total(value) {
+        this.setAttribute('total', value);
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- paginationCount 分页总数 -------
+    // #region
+    get paginationCount() {
+        return Math.ceil(this.total / this.sizes);
+    }
+    // #endregion
+    // ------- end -------
+
+    // ------- background 背景颜色 -------
+    // #region
+    get background() {
+        return this.getAttrBoolean('background');
+    }
+
+    set background(value) {
+        if (!value) return;
+
+        this.setAttribute('background', value);
+    }
+    // #endregion
+    // ------- end -------
+
+    #handleDispatchEvent(event, options) {
+        this.dispatchEvent(new CustomEvent(event, options));
+    }
+
+    // 初始化箭头元素
+    #initArrowItem() {
+        this.#handleArrowStatus();
+
+        if (this.layout.includes('prev')) {
+            this.#prevArrow.addEventListener('click', () => {
+                if (this.currentPage <= 1) return;
+
+                this.currentPage--;
+                this.#handlePaginationChange();
+
+                this.#handleDispatchEvent("change", { detail: { currentPage: this.currentPage } });
+            })
+        } else {
+            this.#prevArrow.style.display = 'none';
+        }
+
+        if (this.layout.includes('next')) {
+            this.#nextArrow.addEventListener('click', () => {
+                if (this.currentPage >= this.paginationCount) return;
+
+                this.currentPage++;
+                this.#handlePaginationChange();
+
+                this.#handleDispatchEvent("change", { detail: { currentPage: this.currentPage } });
+            })
+        } else {
+            this.#nextArrow.style.display = 'none';
+        }
+    }
+
+    // 处理箭头状态
+    #handleArrowStatus() {
+        if (!this.layout.includes('prev') && !this.layout.includes('next')) return;
+
+        if (this.currentPage === 1 && this.layout.includes('prev')) this.#prevArrow.classList.add('disabled');
+        else if (this.currentPage >= this.paginationCount && this.layout.includes('next')) this.#nextArrow.classList.add('disabled');
+        else {
+            this.#prevArrow.classList.remove('disabled');
+            this.#nextArrow.classList.remove('disabled');
+        }
+    }
+
+    // 处理分页点击事件
+    #handlePaginationClick(pageItem, index) {
+        pageItem.addEventListener('click', (e) => {
+            this.currentPage = index;
+            this.#handlePaginationChange();
+
+            this.#handleDispatchEvent('change', {
+                detail: {
+                    currentPage: this.currentPage
+                }
+            });
+        })
+    }
+
+    // 处理更多按钮点击事件
+    #handleMoreItemClick(moreItem, arrow) {
+        moreItem.addEventListener('click', (e) => {
+
+            // 跳转到指定页码
+            this.currentPage += arrow === "prev" ? -5 : 5;
+
+            /**
+             * 边界处理: 
+             * 页码数量小于1, 跳转到第一页
+             * 页码数量大于总页数, 跳转到最后一页
+             */
+            if (this.currentPage < 1) this.currentPage = 1;
+            else if (this.currentPage > this.paginationCount) this.currentPage = this.paginationCount;
+
+            this.#handlePaginationChange();
+
+            this.#handleDispatchEvent('change', {
+                detail: {
+                    currentPage: this.currentPage
+                }
+            });
+        })
+    }
+
+    // 处理分页的页码
+    #handlePaginationItemChange() {
+        if (!this.layout.includes('pager')) return;
+
+        this.#paginationWrap.innerHTML = '';
+
+        const interval = Math.floor(this.pageCount / 2);
+        let start = this.currentPage - interval;
+        let end = this.currentPage + interval;
+
+        // 边界处理
+        if (start <= 1) {
+            start = 1;
+            end = this.pageCount < this.paginationCount ? this.pageCount : this.paginationCount;
+        } else if (end >= this.paginationCount) {
+            start = this.paginationCount - this.pageCount + 1;
+            end = this.paginationCount;
+        } else {
+            end--;
+        }
+
+        // 添加页码
+        for (let i = start; i <= end; i++) {
+            const pageItem = getPageItem(i, this.background);
+            this.#paginationWrap.appendChild(pageItem);
+
+            // 设置当前页码选中后的样式
+            if (i === this.currentPage) {
+                pageItem.classList.add('ea-pagination_item--active');
+                if (this.background) pageItem.classList.add('active');
+            }
+
+            // 添加点击事件
+            this.#handlePaginationClick(pageItem, i);
+        }
+
+        // 添加 更多(左) + 第一页
+        if (this.total > this.pageCount && this.currentPage >= this.pageCount && this.paginationCount !== this.pageCount) {
+            const more = getMoreItem('prev', this.background);
+            this.#handleMoreItemClick(more, 'prev');
+
+            const firstPage = getPageItem(1, this.background);
+            this.#handlePaginationClick(firstPage, 1);
+
+            this.#paginationWrap.insertBefore(more, this.#paginationWrap.firstChild);
+            this.#paginationWrap.insertBefore(firstPage, this.#paginationWrap.firstChild);
+        }
+
+        // 添加 更多(右) + 最后一页
+        if (this.total > this.pageCount && this.currentPage < this.paginationCount - interval && this.paginationCount !== this.pageCount) {
+            const more = getMoreItem('next', this.background);
+            this.#handleMoreItemClick(more, 'next');
+
+            const lastPage = getPageItem(this.paginationCount, this.background);
+            this.#handlePaginationClick(lastPage, this.paginationCount);
+
+            this.#paginationWrap.appendChild(more);
+            this.#paginationWrap.appendChild(lastPage);
+        }
+    }
+
+    // 处理分页变化
+    #handlePaginationChange() {
+        this.#handleArrowStatus();
+        this.#handlePaginationItemChange();
+    }
+
+    // 处理显示总数
+    #initTotalShow() {
+        if (!this.layout.includes('total')) return;
+
+        const totalItem = getShowTotalItem();
+        totalItem.innerHTML = `共 ${this.total} 条`;
+
+        this.#container.insertBefore(totalItem, this.#container.firstChild);
+    }
+
+    connectedCallback() {
+        // 设置sizes
+        this.sizes = this.sizes;
+
+        // 设置current-page
+        this.currentPage = this.currentPage;
+
+        // 设置total
+        this.total = this.total;
+
+        this.#initArrowItem();
+        this.#handlePaginationItemChange();
+        this.#initTotalShow();
+    }
+}
+
+if (!customElements.get('ea-pagination')) {
+    customElements.define('ea-pagination', EaPagination);
+}