refactor: polish integrations and main nav UI

Reuse shared base controls in MainNav and Integrations, add active integration icons, and keep compact integration content framing covered by targeted tests.
This commit is contained in:
Jingyi-Dify 2026-05-12 16:04:18 -07:00
parent a917a49f66
commit d076fc35b7
24 changed files with 172 additions and 58 deletions

View File

@ -0,0 +1,3 @@
<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 15.3333 14.6667" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="Vector" d="M13.1423 4.75207L12.9779 5.12919C12.8576 5.40528 12.4757 5.40528 12.3554 5.12919L12.1911 4.75207C11.8981 4.07965 11.3703 3.54427 10.7118 3.25139L10.2053 3.02615C9.93153 2.90435 9.93153 2.50587 10.2053 2.38408L10.6835 2.17143C11.3589 1.87101 11.8961 1.31582 12.1841 0.620552L12.3529 0.213023C12.4705 -0.0710075 12.8628 -0.0710075 12.9804 0.213023L13.1492 0.620552C13.4372 1.31582 13.9744 1.87101 14.6499 2.17143L15.1279 2.38408C15.4018 2.50587 15.4018 2.90435 15.1279 3.02615L14.6215 3.25139C13.963 3.54427 13.4353 4.07965 13.1423 4.75207ZM5.33333 1.33333C8.045 1.33333 10.284 3.35708 10.6225 5.97663L12.1228 8.3358C12.2216 8.49113 12.2017 8.72313 11.9729 8.82113L10.6667 9.38067V11.3333C10.6667 12.0697 10.0697 12.6667 9.33333 12.6667H8.00067L8 14.6667H2L2.00017 12.2041C2.00022 11.4168 1.70901 10.6725 1.17033 10.0007C0.438047 9.08753 0 7.92827 0 6.66667C0 3.72115 2.38781 1.33333 5.33333 1.33333ZM13.4357 12.0683L12.3262 11.3286C12.9624 10.3761 13.3333 9.2314 13.3333 8.00007C13.3333 7.65933 13.3049 7.3252 13.2504 7L14.5457 6.66667C14.6252 7.09907 14.6667 7.54467 14.6667 8.00007C14.6667 9.50507 14.2133 10.9041 13.4357 12.0683Z" fill="var(--fill-0, #18222F)"/>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

@ -0,0 +1,10 @@
<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Icon">
<g id="Vector">
<path d="M5.92578 11.0095C5.92578 10.0175 5.12163 9.21267 4.12956 9.21267C3.13752 9.21271 2.33333 10.0175 2.33333 11.0095C2.33349 12.0015 3.13762 12.8057 4.12956 12.8058C5.12153 12.8058 5.92562 12.0015 5.92578 11.0095ZM13.6667 11.0095C13.6667 10.0175 12.8625 9.21271 11.8704 9.21267C10.8784 9.21267 10.0742 10.0175 10.0742 11.0095C10.0744 12.0015 10.8785 12.8058 11.8704 12.8058C12.8624 12.8057 13.6665 12.0015 13.6667 11.0095ZM9.79622 4.324C9.79619 3.33197 8.99205 2.52778 8 2.52778C7.00795 2.52778 6.20382 3.33197 6.20378 4.324C6.20378 5.31607 7.00793 6.12023 8 6.12023C8.99207 6.12023 9.79622 5.31607 9.79622 4.324ZM11.1296 4.324C11.1296 5.82362 10.0748 7.07639 8.66667 7.38194V7.9197L9.74284 8.71398C10.3012 8.19618 11.0489 7.87934 11.8704 7.87934C13.5989 7.87938 15 9.28112 15 11.0095C14.9998 12.7378 13.5988 14.1391 11.8704 14.1391C10.1421 14.1391 8.74104 12.7379 8.74089 11.0095C8.74089 10.5838 8.82585 10.1777 8.97982 9.80772L8 9.08377L7.01953 9.80772C7.17356 10.1778 7.25911 10.5837 7.25911 11.0095C7.25896 12.7379 5.85791 14.1391 4.12956 14.1391C2.40124 14.1391 1.00016 12.7378 1 11.0095C1 9.28112 2.40114 7.87938 4.12956 7.87934C4.95094 7.87934 5.69819 8.19637 6.25651 8.71398L7.33333 7.9197V7.38194C5.92523 7.07639 4.87044 5.82362 4.87044 4.324C4.87048 2.59559 6.27158 1.19444 8 1.19444C9.72842 1.19444 11.1295 2.59559 11.1296 4.324Z" fill="var(--fill-0, #18222F)"/>
<path d="M9.79622 4.324C9.79619 3.33197 8.99205 2.52778 8 2.52778C7.00795 2.52778 6.20382 3.33197 6.20378 4.324C6.20378 5.31607 7.00793 6.12023 8 6.12023C8.99207 6.12023 9.79622 5.31607 9.79622 4.324Z" fill="var(--fill-0, #18222F)"/>
<path d="M5.92578 11.0095C5.92578 10.0175 5.12163 9.21267 4.12956 9.21267C3.13752 9.21271 2.33333 10.0175 2.33333 11.0095C2.33349 12.0015 3.13762 12.8057 4.12956 12.8058C5.12153 12.8058 5.92562 12.0015 5.92578 11.0095Z" fill="var(--fill-0, #18222F)"/>
<path d="M13.6667 11.0095C13.6667 10.0175 12.8625 9.21271 11.8704 9.21267C10.8784 9.21267 10.0742 10.0175 10.0742 11.0095C10.0744 12.0015 10.8785 12.8058 11.8704 12.8058C12.8624 12.8057 13.6665 12.0015 13.6667 11.0095Z" fill="var(--fill-0, #18222F)"/>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.3 KiB

View File

@ -0,0 +1,3 @@
<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 12.6667 14.2807" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="Vector" d="M12.0014 3.2815L6.33333 0L0.665287 3.2815L6.33333 6.563L12.0014 3.2815ZM0 4.437V11L5.66667 14.2807V7.71767L0 4.437ZM7 14.2807L12.6667 11V4.437L7 7.71767V14.2807Z" fill="var(--fill-0, #18222F)"/>
</svg>

After

Width:  |  Height:  |  Size: 403 B

View File

@ -0,0 +1,3 @@
<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 12 13.3333" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="Vector" d="M3.33333 2C3.33333 0.895433 4.22877 0 5.33333 0C6.43793 0 7.33333 0.895433 7.33333 2C7.33333 2.23376 7.2932 2.45815 7.21953 2.66667H11.3333C11.7015 2.66667 12 2.96515 12 3.33333V5.41735C12 5.62345 11.9047 5.81796 11.7418 5.94423C11.5789 6.07053 11.3667 6.11433 11.1671 6.063C11.0079 6.022 10.8403 6 10.6667 6C9.56207 6 8.66667 6.8954 8.66667 8C8.66667 9.1046 9.56207 10 10.6667 10C10.8403 10 11.0079 9.978 11.1671 9.937C11.3667 9.88567 11.5789 9.92947 11.7418 10.0557C11.9047 10.1821 12 10.3765 12 10.5827V12.6667C12 13.0349 11.7015 13.3333 11.3333 13.3333H0.666667C0.29848 13.3333 0 13.0349 0 12.6667V3.33333C0 2.96515 0.29848 2.66667 0.666667 2.66667H3.44714C3.37343 2.45815 3.33333 2.23376 3.33333 2Z" fill="var(--fill-0, #18222F)"/>
</svg>

After

Width:  |  Height:  |  Size: 940 B

View File

@ -0,0 +1,3 @@
<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 12.3333 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="Vector" d="M9.66667 4V0H11.6667C12.0349 0 12.3333 0.29848 12.3333 0.666667V3.33333C12.3333 3.70152 12.0349 4 11.6667 4H9.66667ZM8.33333 13.3333C8.33333 13.7015 8.03487 14 7.66667 14H5C4.63181 14 4.33333 13.7015 4.33333 13.3333V4H0V2.71625C0 2.47913 0.12594 2.25987 0.330753 2.14039L4 0H8.33333V13.3333Z" fill="var(--fill-0, #18222F)"/>
</svg>

After

Width:  |  Height:  |  Size: 528 B

View File

@ -0,0 +1,10 @@
<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 13.325 13.325" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Vector">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.81641 5.01888L5.91797 5.04883L12.8913 7.70573L12.9837 7.7487C13.3889 7.97463 13.4445 8.54581 13.0905 8.8457L13.0085 8.9056L10.4837 10.4837L8.9056 13.0085C8.62921 13.4507 7.99075 13.4178 7.7487 12.9837L7.70573 12.8913L5.04883 5.91797C4.85479 5.40863 5.31088 4.90871 5.81641 5.01888Z" fill="var(--fill-0, #18222F)"/>
<path d="M3.87891 9.06445L2.22917 10.7142L1.28646 9.77148L2.9362 8.12175L3.87891 9.06445Z" fill="var(--fill-0, #18222F)"/>
<path d="M2.33333 6.66667H0V5.33333H2.33333V6.66667Z" fill="var(--fill-0, #18222F)"/>
<path d="M3.87891 2.93555L2.9362 3.87826L1.28646 2.22852L2.22917 1.28581L3.87891 2.93555Z" fill="var(--fill-0, #18222F)"/>
<path d="M10.7142 2.22852L9.06445 3.87826L8.12175 2.93555L9.77148 1.28581L10.7142 2.22852Z" fill="var(--fill-0, #18222F)"/>
<path d="M6.66667 2.33333H5.33333V0H6.66667V2.33333Z" fill="var(--fill-0, #18222F)"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -0,0 +1,9 @@
<svg preserveAspectRatio="none" width="100%" height="100%" overflow="visible" style="display: block;" viewBox="0 0 12.1 11.4333" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="Vector">
<path d="M1.71667 0C0.768578 0 0 0.768578 0 1.71667C0 2.66476 0.768578 3.43333 1.71667 3.43333H3.71667C4.66475 3.43333 5.43333 2.66476 5.43333 1.71667C5.43333 0.768578 4.66476 0 3.71667 0H1.71667Z" fill="var(--fill-0, #18222F)"/>
<path d="M8.38333 4C7.43524 4 6.66667 4.76858 6.66667 5.71667C6.66667 6.66476 7.43524 7.43333 8.38333 7.43333H10.3833C11.3314 7.43333 12.1 6.66476 12.1 5.71667C12.1 4.76858 11.3314 4 10.3833 4H8.38333Z" fill="var(--fill-0, #18222F)"/>
<path d="M0 9.71667C0 8.76858 0.768578 8 1.71667 8H3.71667C4.66476 8 5.43333 8.76858 5.43333 9.71667C5.43333 10.6648 4.66475 11.4333 3.71667 11.4333H1.71667C0.768578 11.4333 0 10.6648 0 9.71667Z" fill="var(--fill-0, #18222F)"/>
<path d="M7.05001 2.38334H6.38334V1.05001H7.05001C8.15458 1.05001 9.05001 1.94544 9.05001 3.05001H7.71667C7.71667 2.68182 7.4182 2.38334 7.05001 2.38334Z" fill="var(--fill-0, #18222F)"/>
<path d="M9.05001 8.38334C9.05001 9.48791 8.15458 10.3833 7.05001 10.3833H6.38334V9.05001H7.05001C7.4182 9.05001 7.71667 8.75153 7.71667 8.38334H9.05001Z" fill="var(--fill-0, #18222F)"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -1,6 +1,6 @@
{
"prefix": "custom-vender",
"lastModified": 1778535177,
"lastModified": 1778624737,
"icons": {
"features-citations": {
"body": "<g fill=\"none\"><path d=\"M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12ZM7 11.9702V14.958H11.0356V11.2339H8.8125C8.78418 10.8185 8.85498 10.4173 9.0249 10.0303C9.35531 9.29395 10.002 8.77474 10.9648 8.47266V7C9.67155 7.25488 8.68506 7.79297 8.00537 8.61426C7.33512 9.43555 7 10.5542 7 11.9702ZM15.0391 10.0586C15.3695 9.29395 16.0114 8.7653 16.9648 8.47266V7C15.7093 7.25488 14.7323 7.78825 14.0337 8.6001C13.3446 9.41195 13 10.5353 13 11.9702V14.958H17.0356V11.2339H14.8125C14.7747 10.8563 14.8503 10.4645 15.0391 10.0586Z\" fill=\"currentColor\"/></g>",
@ -57,21 +57,41 @@
"width": 15.3333,
"height": 14.6667
},
"integrations-agent-strategy-active": {
"body": "<g fill=\"none\" display=\"block\"><path id=\"Vector\" d=\"M13.1423 4.75207L12.9779 5.12919C12.8576 5.40528 12.4757 5.40528 12.3554 5.12919L12.1911 4.75207C11.8981 4.07965 11.3703 3.54427 10.7118 3.25139L10.2053 3.02615C9.93153 2.90435 9.93153 2.50587 10.2053 2.38408L10.6835 2.17143C11.3589 1.87101 11.8961 1.31582 12.1841 0.620552L12.3529 0.213023C12.4705-0.0710075 12.8628-0.0710075 12.9804 0.213023L13.1492 0.620552C13.4372 1.31582 13.9744 1.87101 14.6499 2.17143L15.1279 2.38408C15.4018 2.50587 15.4018 2.90435 15.1279 3.02615L14.6215 3.25139C13.963 3.54427 13.4353 4.07965 13.1423 4.75207ZM5.33333 1.33333C8.045 1.33333 10.284 3.35708 10.6225 5.97663L12.1228 8.3358C12.2216 8.49113 12.2017 8.72313 11.9729 8.82113L10.6667 9.38067V11.3333C10.6667 12.0697 10.0697 12.6667 9.33333 12.6667H8.00067L8 14.6667H2L2.00017 12.2041C2.00022 11.4168 1.70901 10.6725 1.17033 10.0007C0.438047 9.08753 0 7.92827 0 6.66667C0 3.72115 2.38781 1.33333 5.33333 1.33333ZM13.4357 12.0683L12.3262 11.3286C12.9624 10.3761 13.3333 9.2314 13.3333 8.00007C13.3333 7.65933 13.3049 7.3252 13.2504 7L14.5457 6.66667C14.6252 7.09907 14.6667 7.54467 14.6667 8.00007C14.6667 9.50507 14.2133 10.9041 13.4357 12.0683Z\" fill=\"currentColor\"/></g>",
"width": 15.3333,
"height": 14.6667
},
"integrations-api-extension": {
"body": "<g fill=\"none\" display=\"block\"><path id=\"Vector\" d=\"M4.92578 9.8151C4.92578 8.82303 4.12163 8.01823 3.12956 8.01823C2.13752 8.01827 1.33333 8.82306 1.33333 9.8151C1.33349 10.807 2.13762 11.6113 3.12956 11.6113C4.12153 11.6113 4.92563 10.807 4.92578 9.8151ZM12.6667 9.8151C12.6667 8.82306 11.8625 8.01827 10.8704 8.01823C9.87837 8.01823 9.07422 8.82303 9.07422 9.8151C9.07438 10.807 9.87847 11.6113 10.8704 11.6113C11.8624 11.6113 12.6665 10.807 12.6667 9.8151ZM8.79622 3.12956C8.79619 2.13752 7.99205 1.33333 7 1.33333C6.00795 1.33333 5.20382 2.13752 5.20378 3.12956C5.20378 4.12163 6.00793 4.92578 7 4.92578C7.99207 4.92578 8.79622 4.12163 8.79622 3.12956ZM10.1296 3.12956C10.1296 4.62918 9.07477 5.88194 7.66667 6.1875V6.72526L8.74284 7.51953C9.3012 7.00174 10.0489 6.6849 10.8704 6.6849C12.5989 6.68493 14 8.08668 14 9.8151C13.9998 11.5434 12.5988 12.9446 10.8704 12.9447C9.14209 12.9447 7.74104 11.5434 7.74089 9.8151C7.74089 9.38937 7.82585 8.98325 7.97982 8.61328L7 7.88932L6.01953 8.61328C6.17356 8.98332 6.25911 9.38929 6.25911 9.8151C6.25896 11.5434 4.85791 12.9447 3.12956 12.9447C1.40124 12.9446 0.000156326 11.5434 0 9.8151C0 8.08668 1.40114 6.68493 3.12956 6.6849C3.95094 6.6849 4.69819 7.00193 5.25651 7.51953L6.33333 6.72526V6.1875C4.92523 5.88194 3.87044 4.62918 3.87044 3.12956C3.87048 1.40114 5.27158 0 7 0C8.72843 0 10.1295 1.40114 10.1296 3.12956Z\" fill=\"currentColor\"/></g>",
"width": 14,
"height": 12.9447
},
"integrations-api-extension-active": {
"body": "<g fill=\"none\" display=\"block\"><g id=\"Icon\"><g id=\"Vector\"><path d=\"M5.92578 11.0095C5.92578 10.0175 5.12163 9.21267 4.12956 9.21267C3.13752 9.21271 2.33333 10.0175 2.33333 11.0095C2.33349 12.0015 3.13762 12.8057 4.12956 12.8058C5.12153 12.8058 5.92562 12.0015 5.92578 11.0095ZM13.6667 11.0095C13.6667 10.0175 12.8625 9.21271 11.8704 9.21267C10.8784 9.21267 10.0742 10.0175 10.0742 11.0095C10.0744 12.0015 10.8785 12.8058 11.8704 12.8058C12.8624 12.8057 13.6665 12.0015 13.6667 11.0095ZM9.79622 4.324C9.79619 3.33197 8.99205 2.52778 8 2.52778C7.00795 2.52778 6.20382 3.33197 6.20378 4.324C6.20378 5.31607 7.00793 6.12023 8 6.12023C8.99207 6.12023 9.79622 5.31607 9.79622 4.324ZM11.1296 4.324C11.1296 5.82362 10.0748 7.07639 8.66667 7.38194V7.9197L9.74284 8.71398C10.3012 8.19618 11.0489 7.87934 11.8704 7.87934C13.5989 7.87938 15 9.28112 15 11.0095C14.9998 12.7378 13.5988 14.1391 11.8704 14.1391C10.1421 14.1391 8.74104 12.7379 8.74089 11.0095C8.74089 10.5838 8.82585 10.1777 8.97982 9.80772L8 9.08377L7.01953 9.80772C7.17356 10.1778 7.25911 10.5837 7.25911 11.0095C7.25896 12.7379 5.85791 14.1391 4.12956 14.1391C2.40124 14.1391 1.00016 12.7378 1 11.0095C1 9.28112 2.40114 7.87938 4.12956 7.87934C4.95094 7.87934 5.69819 8.19637 6.25651 8.71398L7.33333 7.9197V7.38194C5.92523 7.07639 4.87044 5.82362 4.87044 4.324C4.87048 2.59559 6.27158 1.19444 8 1.19444C9.72842 1.19444 11.1295 2.59559 11.1296 4.324Z\" fill=\"currentColor\"/><path d=\"M9.79622 4.324C9.79619 3.33197 8.99205 2.52778 8 2.52778C7.00795 2.52778 6.20382 3.33197 6.20378 4.324C6.20378 5.31607 7.00793 6.12023 8 6.12023C8.99207 6.12023 9.79622 5.31607 9.79622 4.324Z\" fill=\"currentColor\"/><path d=\"M5.92578 11.0095C5.92578 10.0175 5.12163 9.21267 4.12956 9.21267C3.13752 9.21271 2.33333 10.0175 2.33333 11.0095C2.33349 12.0015 3.13762 12.8057 4.12956 12.8058C5.12153 12.8058 5.92562 12.0015 5.92578 11.0095Z\" fill=\"currentColor\"/><path d=\"M13.6667 11.0095C13.6667 10.0175 12.8625 9.21271 11.8704 9.21267C10.8784 9.21267 10.0742 10.0175 10.0742 11.0095C10.0744 12.0015 10.8785 12.8058 11.8704 12.8058C12.8624 12.8057 13.6665 12.0015 13.6667 11.0095Z\" fill=\"currentColor\"/></g></g></g>",
"width": 16,
"height": 16
},
"integrations-custom-tool": {
"body": "<g fill=\"none\" display=\"block\"><path id=\"Vector\" d=\"M6.33333 0L12.6667 3.66667V11L6.33333 14.6667L0 11V3.66667L6.33333 0ZM1.99592 4.0518L6.3334 6.56293L10.6708 4.05183L6.33333 1.54067L1.99592 4.0518ZM1.33333 5.20886V10.2313L5.66673 12.7401V7.71767L1.33333 5.20886ZM7.00007 12.74L11.3333 10.2313V5.20891L7.00007 7.71767V12.74Z\" fill=\"currentColor\"/></g>",
"width": 12.6667,
"height": 14.6667
},
"integrations-custom-tool-active": {
"body": "<g fill=\"none\" display=\"block\"><path id=\"Vector\" d=\"M12.0014 3.2815L6.33333 0L0.665287 3.2815L6.33333 6.563L12.0014 3.2815ZM0 4.437V11L5.66667 14.2807V7.71767L0 4.437ZM7 14.2807L12.6667 11V4.437L7 7.71767V14.2807Z\" fill=\"currentColor\"/></g>",
"height": 14.2807,
"width": 12.6667
},
"integrations-extension": {
"body": "<g fill=\"none\" display=\"block\"><path id=\"Vector\" d=\"M2.66667 2.66667C2.66667 1.19391 3.86057 0 5.33333 0C6.80607 0 8 1.19391 8 2.66667H11.3333C11.7015 2.66667 12 2.96515 12 3.33333V6.1138C12 6.3302 11.8949 6.53313 11.7183 6.65813C11.5415 6.78307 11.3152 6.81447 11.1112 6.74233C10.973 6.69353 10.8237 6.66667 10.6667 6.66667C9.93027 6.66667 9.33333 7.2636 9.33333 8C9.33333 8.7364 9.93027 9.33333 10.6667 9.33333C10.8237 9.33333 10.973 9.30647 11.1112 9.25767C11.3152 9.18553 11.5415 9.21693 11.7183 9.34187C11.8949 9.46687 12 9.6698 12 9.8862V12.6667C12 13.0349 11.7015 13.3333 11.3333 13.3333H0.666667C0.29848 13.3333 0 13.0349 0 12.6667V3.33333C0 2.96515 0.29848 2.66667 0.666667 2.66667H2.66667ZM5.33333 1.33333C4.59695 1.33333 4 1.93029 4 2.66667C4 2.82369 4.02687 2.97301 4.0757 3.11117C4.14781 3.31521 4.11641 3.54157 3.99145 3.71826C3.86649 3.89495 3.66355 4 3.44714 4H1.33333V12H10.6667V10.6667C9.19393 10.6667 8 9.47273 8 8C8 6.52727 9.19393 5.33333 10.6667 5.33333V4H7.21953C7.00313 4 6.8002 3.89495 6.6752 3.71826C6.55027 3.54157 6.51887 3.31521 6.591 3.11117C6.6398 2.97301 6.66667 2.8237 6.66667 2.66667C6.66667 1.93029 6.06973 1.33333 5.33333 1.33333Z\" fill=\"currentColor\"/></g>",
"width": 12,
"height": 13.3333
},
"integrations-extension-active": {
"body": "<g fill=\"none\" display=\"block\"><path id=\"Vector\" d=\"M3.33333 2C3.33333 0.895433 4.22877 0 5.33333 0C6.43793 0 7.33333 0.895433 7.33333 2C7.33333 2.23376 7.2932 2.45815 7.21953 2.66667H11.3333C11.7015 2.66667 12 2.96515 12 3.33333V5.41735C12 5.62345 11.9047 5.81796 11.7418 5.94423C11.5789 6.07053 11.3667 6.11433 11.1671 6.063C11.0079 6.022 10.8403 6 10.6667 6C9.56207 6 8.66667 6.8954 8.66667 8C8.66667 9.1046 9.56207 10 10.6667 10C10.8403 10 11.0079 9.978 11.1671 9.937C11.3667 9.88567 11.5789 9.92947 11.7418 10.0557C11.9047 10.1821 12 10.3765 12 10.5827V12.6667C12 13.0349 11.7015 13.3333 11.3333 13.3333H0.666667C0.29848 13.3333 0 13.0349 0 12.6667V3.33333C0 2.96515 0.29848 2.66667 0.666667 2.66667H3.44714C3.37343 2.45815 3.33333 2.23376 3.33333 2Z\" fill=\"currentColor\"/></g>",
"width": 12,
"height": 13.3333
},
"integrations-mcp": {
"body": "<g fill=\"none\" display=\"block\"><g id=\"Vector\"><path d=\"M7.873 1.01976C8.28503 1.01976 8.68078 1.18055 8.97605 1.46791C9.12039 1.60841 9.23516 1.77638 9.31357 1.96193C9.39199 2.14747 9.43248 2.34683 9.43265 2.54827C9.43282 2.7497 9.39267 2.94913 9.31457 3.13481C9.23647 3.32048 9.12199 3.48865 8.97788 3.62939L4.53331 7.98841C4.48512 8.03528 4.44681 8.09133 4.42065 8.15326C4.39449 8.21519 4.38102 8.28173 4.38102 8.34896C4.38102 8.41619 4.39449 8.48273 4.42065 8.54466C4.44681 8.60659 4.48512 8.66264 4.53331 8.70951C4.63178 8.80538 4.76378 8.85902 4.9012 8.85902C5.03862 8.85902 5.17062 8.80538 5.26908 8.70951L5.32897 8.65024L5.33019 8.64901L9.71304 4.3505C10.0085 4.06393 10.404 3.90381 10.8155 3.90415C11.2271 3.90449 11.6224 4.06527 11.9173 4.35233L11.9479 4.38228C12.0924 4.52293 12.2072 4.69111 12.2856 4.87689C12.3641 5.06267 12.4045 5.26228 12.4045 5.46393C12.4045 5.66559 12.3641 5.8652 12.2856 6.05098C12.2072 6.23676 12.0924 6.40494 11.9479 6.54559L6.62757 11.7632C6.51503 11.8726 6.42557 12.0034 6.36448 12.1479C6.30339 12.2925 6.27191 12.4478 6.27191 12.6047C6.27191 12.7616 6.30339 12.9169 6.36448 13.0615C6.42557 13.206 6.51503 13.3368 6.62757 13.4462L7.72023 14.5175C7.81867 14.6131 7.95053 14.6667 8.08781 14.6667C8.22508 14.6667 8.35695 14.6131 8.45539 14.5175C8.50358 14.4706 8.54189 14.4145 8.56805 14.3526C8.59421 14.2907 8.60769 14.2241 8.60769 14.1569C8.60769 14.0897 8.59421 14.0231 8.56805 13.9612C8.54189 13.8993 8.50358 13.8432 8.45539 13.7964L7.36273 12.7245C7.34667 12.7089 7.33391 12.6902 7.32519 12.6696C7.31647 12.649 7.31198 12.6268 7.31198 12.6044C7.31198 12.582 7.31647 12.5598 7.32519 12.5392C7.33391 12.5186 7.34667 12.4999 7.36273 12.4843L12.683 7.2673C12.924 7.03296 13.1155 6.75268 13.2463 6.44304C13.3771 6.1334 13.4445 5.80068 13.4445 5.46454C13.4445 5.12841 13.3771 4.79569 13.2463 4.48605C13.1155 4.17641 12.924 3.89613 12.683 3.66178L12.6525 3.63123C12.3646 3.35023 12.016 3.13908 11.6336 3.01405C11.2512 2.88903 10.8453 2.85347 10.447 2.91012C10.5038 2.51705 10.4668 2.1161 10.3389 1.74009C10.211 1.36408 9.99593 1.0237 9.71121 0.746808C9.21914 0.267942 8.55962 0 7.873 0C7.18639 0 6.52687 0.267942 6.0348 0.746808L0.152297 6.51564C0.104103 6.56251 0.0657945 6.61857 0.039636 6.6805C0.0134776 6.74243 0 6.80897 0 6.8762C0 6.94342 0.0134776 7.00997 0.039636 7.0719C0.0657945 7.13382 0.104103 7.18988 0.152297 7.23675C0.250735 7.33243 0.382601 7.38595 0.519877 7.38595C0.657153 7.38595 0.789019 7.33243 0.887457 7.23675L6.76996 1.46791C7.06523 1.18055 7.46098 1.01976 7.873 1.01976Z\" fill=\"currentColor\"/><path d=\"M8.35362 2.74526C8.32747 2.80719 8.28916 2.86324 8.24096 2.91011L3.88989 7.17685C3.74539 7.3175 3.63053 7.48568 3.5521 7.67146C3.47367 7.85724 3.43327 8.05685 3.43327 8.25851C3.43327 8.46016 3.47367 8.65977 3.5521 8.84555C3.63053 9.03133 3.74539 9.19951 3.88989 9.34017C4.18516 9.62753 4.58092 9.78832 4.99294 9.78832C5.40496 9.78832 5.80072 9.62753 6.09598 9.34017L10.4464 5.07343C10.5449 4.97756 10.6769 4.92392 10.8143 4.92392C10.9518 4.92392 11.0837 4.97756 11.1822 5.07343C11.2304 5.1203 11.2687 5.17635 11.2949 5.23828C11.321 5.30021 11.3345 5.36675 11.3345 5.43398C11.3345 5.5012 11.321 5.56775 11.2949 5.62968C11.2687 5.69161 11.2304 5.74766 11.1822 5.79453L6.83114 10.0613C6.339 10.54 5.67951 10.8078 4.99294 10.8078C4.30636 10.8078 3.64688 10.54 3.15473 10.0613C2.91376 9.82692 2.72222 9.54664 2.59143 9.237C2.46064 8.92736 2.39325 8.59464 2.39325 8.25851C2.39325 7.92238 2.46064 7.58966 2.59143 7.28001C2.72222 6.97037 2.91376 6.69009 3.15473 6.45575L7.50519 2.18901C7.60366 2.09315 7.73566 2.03951 7.87308 2.03951C8.0105 2.03951 8.1425 2.09315 8.24096 2.18901C8.28916 2.23588 8.32747 2.29193 8.35362 2.35386C8.37978 2.41579 8.39326 2.48233 8.39326 2.54956C8.39326 2.61679 8.37978 2.68333 8.35362 2.74526Z\" fill=\"currentColor\"/></g></g>",
"width": 13.4445,
@ -87,16 +107,31 @@
"width": 12.3333,
"height": 14
},
"integrations-tools-active": {
"body": "<g fill=\"none\" display=\"block\"><path id=\"Vector\" d=\"M9.66667 4V0H11.6667C12.0349 0 12.3333 0.29848 12.3333 0.666667V3.33333C12.3333 3.70152 12.0349 4 11.6667 4H9.66667ZM8.33333 13.3333C8.33333 13.7015 8.03487 14 7.66667 14H5C4.63181 14 4.33333 13.7015 4.33333 13.3333V4H0V2.71625C0 2.47913 0.12594 2.25987 0.330753 2.14039L4 0H8.33333V13.3333Z\" fill=\"currentColor\"/></g>",
"width": 12.3333,
"height": 14
},
"integrations-trigger": {
"body": "<g fill=\"none\" display=\"block\"><g id=\"Vector\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M5.81641 5.01888L5.91797 5.04883L12.8913 7.70573L12.9837 7.7487C13.3889 7.97463 13.4445 8.54581 13.0905 8.8457L13.0085 8.9056L10.4837 10.4837L8.9056 13.0085C8.62921 13.4507 7.99075 13.4178 7.7487 12.9837L7.70573 12.8913L5.04883 5.91797C4.85479 5.40863 5.31088 4.90871 5.81641 5.01888ZM8.47852 11.1751L9.43359 9.64779L9.47786 9.58529C9.52536 9.52564 9.5828 9.47422 9.64779 9.43359L11.1751 8.47852L6.81901 6.81901L8.47852 11.1751Z\" fill=\"currentColor\"/><path d=\"M3.87891 9.06445L2.22917 10.7142L1.28646 9.77148L2.9362 8.12175L3.87891 9.06445Z\" fill=\"currentColor\"/><path d=\"M2.33333 6.66667H0V5.33333H2.33333V6.66667Z\" fill=\"currentColor\"/><path d=\"M3.87891 2.93555L2.9362 3.87826L1.28646 2.22852L2.22917 1.28581L3.87891 2.93555Z\" fill=\"currentColor\"/><path d=\"M10.7142 2.22852L9.06445 3.87826L8.12175 2.93555L9.77148 1.28581L10.7142 2.22852Z\" fill=\"currentColor\"/><path d=\"M6.66667 2.33333H5.33333V0H6.66667V2.33333Z\" fill=\"currentColor\"/></g></g>",
"width": 13.325,
"height": 13.325
},
"integrations-trigger-active": {
"body": "<g fill=\"none\" display=\"block\"><g id=\"Vector\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M5.81641 5.01888L5.91797 5.04883L12.8913 7.70573L12.9837 7.7487C13.3889 7.97463 13.4445 8.54581 13.0905 8.8457L13.0085 8.9056L10.4837 10.4837L8.9056 13.0085C8.62921 13.4507 7.99075 13.4178 7.7487 12.9837L7.70573 12.8913L5.04883 5.91797C4.85479 5.40863 5.31088 4.90871 5.81641 5.01888Z\" fill=\"currentColor\"/><path d=\"M3.87891 9.06445L2.22917 10.7142L1.28646 9.77148L2.9362 8.12175L3.87891 9.06445Z\" fill=\"currentColor\"/><path d=\"M2.33333 6.66667H0V5.33333H2.33333V6.66667Z\" fill=\"currentColor\"/><path d=\"M3.87891 2.93555L2.9362 3.87826L1.28646 2.22852L2.22917 1.28581L3.87891 2.93555Z\" fill=\"currentColor\"/><path d=\"M10.7142 2.22852L9.06445 3.87826L8.12175 2.93555L9.77148 1.28581L10.7142 2.22852Z\" fill=\"currentColor\"/><path d=\"M6.66667 2.33333H5.33333V0H6.66667V2.33333Z\" fill=\"currentColor\"/></g></g>",
"width": 13.325,
"height": 13.325
},
"integrations-workflow-as-tool": {
"body": "<g fill=\"none\" display=\"block\"><path id=\"Vector\" d=\"M2 12C0.895401 12 7.95946e-07 11.1046 6.99382e-07 10C6.02818e-07 8.89543 0.8954 8 2 8H4C4.8706 8 5.61127 8.55625 5.886 9.33273L6.66667 9.33333C7.4 9.33333 8 8.73333 8 8L7.9994 7.88599C7.22293 7.61125 6.66667 6.8706 6.66667 6C6.66667 5.1294 7.22293 4.38873 7.9994 4.114L8 4C8 3.26667 7.4 2.66667 6.66667 2.66667L5.8862 2.6666C5.61167 3.4434 4.87087 4 4 4L2 4C0.8954 4 9.65672e-08 3.1046 0 2C-9.65672e-08 0.8954 0.8954 2.71413e-07 2 1.74846e-07L4 0C4.8706-7.61103e-08 5.61127 0.556266 5.886 1.33273L6.66667 1.33333C8.14 1.33333 9.33333 2.52667 9.33333 4L10.6667 4C11.7712 4 12.6667 4.8954 12.6667 6C12.6667 7.1046 11.7712 8 10.6667 8H9.33333C9.33333 9.47276 8.13943 10.6667 6.66667 10.6667L5.8862 10.6666C5.61167 11.4434 4.87087 12 4 12H2ZM2 2.66667L4 2.66667C4.3682 2.66667 4.66667 2.3682 4.66667 2C4.66667 1.6318 4.3682 1.33333 4 1.33333L2 1.33333C1.6318 1.33333 1.33333 1.6318 1.33333 2C1.33333 2.3682 1.6318 2.66667 2 2.66667ZM8.66667 6.66667H10.6667C11.0349 6.66667 11.3333 6.3682 11.3333 6C11.3333 5.6318 11.0349 5.33333 10.6667 5.33333L8.66667 5.33333C8.29848 5.33333 8 5.6318 8 6C8 6.3682 8.29848 6.66667 8.66667 6.66667ZM2 10.6667H4C4.3682 10.6667 4.66667 10.3682 4.66667 10C4.66667 9.63181 4.3682 9.33333 4 9.33333H2C1.6318 9.33333 1.33333 9.63181 1.33333 10C1.33333 10.3682 1.6318 10.6667 2 10.6667Z\" fill=\"currentColor\"/></g>",
"height": 12,
"width": 12.6667
},
"integrations-workflow-as-tool-active": {
"body": "<g fill=\"none\" display=\"block\"><g id=\"Vector\"><path d=\"M1.71667 0C0.768578 0 0 0.768578 0 1.71667C0 2.66476 0.768578 3.43333 1.71667 3.43333H3.71667C4.66475 3.43333 5.43333 2.66476 5.43333 1.71667C5.43333 0.768578 4.66476 0 3.71667 0H1.71667Z\" fill=\"currentColor\"/><path d=\"M8.38333 4C7.43524 4 6.66667 4.76858 6.66667 5.71667C6.66667 6.66476 7.43524 7.43333 8.38333 7.43333H10.3833C11.3314 7.43333 12.1 6.66476 12.1 5.71667C12.1 4.76858 11.3314 4 10.3833 4H8.38333Z\" fill=\"currentColor\"/><path d=\"M0 9.71667C0 8.76858 0.768578 8 1.71667 8H3.71667C4.66476 8 5.43333 8.76858 5.43333 9.71667C5.43333 10.6648 4.66475 11.4333 3.71667 11.4333H1.71667C0.768578 11.4333 0 10.6648 0 9.71667Z\" fill=\"currentColor\"/><path d=\"M7.05001 2.38334H6.38334V1.05001H7.05001C8.15458 1.05001 9.05001 1.94544 9.05001 3.05001H7.71667C7.71667 2.68182 7.4182 2.38334 7.05001 2.38334Z\" fill=\"currentColor\"/><path d=\"M9.05001 8.38334C9.05001 9.48791 8.15458 10.3833 7.05001 10.3833H6.38334V9.05001H7.05001C7.4182 9.05001 7.71667 8.75153 7.71667 8.38334H9.05001Z\" fill=\"currentColor\"/></g></g>",
"width": 12.1,
"height": 11.4333
},
"knowledge-add-chunks": {
"body": "<g fill=\"none\"><path d=\"M10.0855 2.50411C10.5056 2.54689 10.8333 2.90198 10.8333 3.33337C10.8333 3.79361 10.4602 4.16671 10 4.16671H6.00017C5.51971 4.16671 5.20926 4.16776 4.97315 4.18705C4.74683 4.20555 4.66278 4.23686 4.62159 4.25785C4.46494 4.33771 4.33768 4.46498 4.25782 4.62162C4.23683 4.66282 4.20551 4.74687 4.18702 4.97319C4.16772 5.2093 4.16667 5.51975 4.16667 6.0002V13.9999C4.16667 14.4803 4.16772 14.7908 4.18702 15.0269C4.20551 15.2532 4.23684 15.3373 4.25782 15.3785C4.33771 15.5351 4.465 15.6624 4.62159 15.7422C4.66278 15.7632 4.74684 15.7945 4.97315 15.813C5.20926 15.8323 5.51971 15.8334 6.00017 15.8334H13.9998C14.4803 15.8334 14.7907 15.8323 15.0269 15.813C15.2532 15.7945 15.3372 15.7632 15.3784 15.7422C15.5351 15.6624 15.6624 15.5351 15.7422 15.3785C15.7632 15.3373 15.7945 15.2532 15.813 15.0269C15.8323 14.7908 15.8333 14.4803 15.8333 13.9999V10C15.8333 9.53981 16.2064 9.16671 16.6667 9.16671C17.1269 9.16671 17.5 9.53981 17.5 10V13.9999C17.5 14.4528 17.5009 14.8431 17.4748 15.1628C17.4478 15.4922 17.388 15.82 17.2274 16.1353C16.9878 16.6055 16.6054 16.9878 16.1353 17.2274C15.82 17.3881 15.4922 17.4479 15.1628 17.4748C14.843 17.5009 14.4528 17.5 13.9998 17.5H6.00017C5.54721 17.5 5.15697 17.5009 4.83724 17.4748C4.50786 17.4479 4.18 17.3881 3.86475 17.2274C3.39449 16.9878 3.01223 16.6054 2.77263 16.1353C2.61199 15.82 2.55216 15.4922 2.52523 15.1628C2.49911 14.8431 2.5 14.4528 2.5 13.9999V6.0002C2.5 5.54725 2.49911 5.15701 2.52523 4.83728C2.55216 4.5079 2.612 4.18003 2.77263 3.86479C3.01227 3.3946 3.39456 3.0123 3.86475 2.77266C4.18 2.61203 4.50786 2.55219 4.83724 2.52527C5.15697 2.49915 5.54721 2.50004 6.00017 2.50004H10L10.0855 2.50411Z\" fill=\"currentColor\"/><path d=\"M10.8333 12.5C11.2936 12.5 11.6667 12.8731 11.6667 13.3334C11.6667 13.7936 11.2936 14.1667 10.8333 14.1667H6.66667C6.20643 14.1667 5.83334 13.7936 5.83334 13.3334C5.83334 12.8731 6.20643 12.5 6.66667 12.5H10.8333Z\" fill=\"currentColor\"/><path d=\"M8.33334 9.16671C8.79357 9.16671 9.16667 9.5398 9.16667 10C9.16667 10.4603 8.79357 10.8334 8.33334 10.8334H6.66667C6.20643 10.8334 5.83334 10.4603 5.83334 10C5.83334 9.5398 6.20643 9.16671 6.66667 9.16671H8.33334Z\" fill=\"currentColor\"/><path d=\"M13.3333 9.16671C13.7936 9.16671 14.1667 9.5398 14.1667 10C14.1667 10.4603 13.7936 10.8334 13.3333 10.8334H10.8333C10.3731 10.8334 10 10.4603 10 10C10 9.5398 10.3731 9.16671 10.8333 9.16671H13.3333Z\" fill=\"currentColor\"/><path d=\"M10 5.83337C10.4602 5.83337 10.8333 6.20647 10.8333 6.66671C10.8333 7.12694 10.4602 7.50004 10 7.50004H6.66667C6.20643 7.50004 5.83334 7.12694 5.83334 6.66671C5.83334 6.20647 6.20643 5.83338 6.66667 5.83337H10Z\" fill=\"currentColor\"/><path d=\"M15.8333 0.833374C16.2936 0.833374 16.6667 1.20647 16.6667 1.66671V3.33337H18.3333C18.7936 3.33337 19.1667 3.70647 19.1667 4.16671C19.1667 4.62694 18.7936 5.00004 18.3333 5.00004H16.6667V6.66671C16.6667 7.12694 16.2936 7.50004 15.8333 7.50004C15.3731 7.50004 15 7.12694 15 6.66671V5.00004H13.3333C12.8731 5.00004 12.5 4.62694 12.5 4.16671C12.5 3.70647 12.8731 3.33338 13.3333 3.33337H15V1.66671C15 1.20647 15.3731 0.833376 15.8333 0.833374Z\" fill=\"currentColor\"/></g>",
"width": 20,

View File

@ -1,7 +1,7 @@
{
"prefix": "custom-vender",
"name": "Dify Custom Vender",
"total": 300,
"total": 307,
"version": "0.0.0-private",
"author": {
"name": "LangGenius, Inc.",

View File

@ -13,6 +13,7 @@ import { cn } from '@langgenius/dify-ui/cn'
import { toast } from '@langgenius/dify-ui/toast'
import { useMemo, useState } from 'react'
import { useTranslation } from 'react-i18next'
import Input from '@/app/components/base/input'
import AppNavItem from '@/app/components/explore/sidebar/app-nav-item'
import { usePathname } from '@/next/navigation'
import { useGetInstalledApps, useUninstallApp, useUpdateAppPinStatus } from '@/service/use-explore'
@ -79,21 +80,23 @@ const WebAppsSection = () => {
</div>
{appsExpanded && searchVisible && (
<div className="px-2 pb-2">
<input
<Input
value={searchText}
onChange={e => setSearchText(e.target.value)}
onClear={() => setSearchText('')}
placeholder={t('mainNav.webApps.searchPlaceholder', { ns: 'common' })}
className="h-8 w-full rounded-lg border border-transparent bg-components-input-bg-normal px-2 system-sm-regular text-text-secondary outline-none placeholder:text-text-quaternary hover:border-components-input-border-hover focus:border-components-input-border-active"
showClearIcon
className="h-8 px-2"
/>
</div>
)}
{appsExpanded && (
<div className="min-h-0 flex-1 space-y-0.5 overflow-x-hidden overflow-y-auto px-2 pb-2">
{isPending && (
<div className="px-2 py-1 system-xs-regular text-components-main-nav-text">{t('loading', { ns: 'common' })}</div>
<div className="text-components-main-nav-text px-2 py-1 system-xs-regular">{t('loading', { ns: 'common' })}</div>
)}
{!isPending && filteredApps.length === 0 && (
<div className="px-2 py-1 system-xs-regular text-components-main-nav-text">
<div className="text-components-main-nav-text px-2 py-1 system-xs-regular">
{searchText ? t('mainNav.webApps.noResults', { ns: 'common' }) : t('sidebar.noApps.title', { ns: 'explore' })}
</div>
)}

View File

@ -103,7 +103,7 @@ const WorkspaceCard = () => {
type="button"
className={cn(
'flex w-full items-center gap-1.5 py-1.5 pr-3 pl-1.5 text-left transition-colors',
open && 'bg-gradient-to-b from-background-section-burn to-background-section',
open && 'bg-linear-to-b from-background-section-burn to-background-section',
)}
aria-expanded={open}
aria-label={t('mainNav.workspace.openMenu', { ns: 'common' })}
@ -151,7 +151,7 @@ const WorkspaceCard = () => {
</div>
{open && (
<div className="absolute top-0 right-0 left-0 z-20 flex flex-col overflow-hidden rounded-xl border border-components-panel-border bg-components-panel-bg-blur p-1 shadow-lg backdrop-blur-[5px]">
<div className="rounded-xl bg-gradient-to-b from-background-section-burn to-background-section pb-2">
<div className="rounded-xl bg-linear-to-b from-background-section-burn to-background-section pb-2">
<button
type="button"
className="flex w-full items-start gap-2 rounded-xl p-3 text-left transition-colors hover:bg-state-base-hover"
@ -160,7 +160,7 @@ const WorkspaceCard = () => {
onClick={() => setOpen(false)}
>
<div className="flex min-w-0 grow flex-col items-start justify-center gap-1">
<div className="max-w-[120px] shrink-0 truncate system-xl-medium leading-5 text-text-primary" title={currentWorkspace.name}>{currentWorkspace.name}</div>
<div className="max-w-[120px] shrink-0 truncate text-base/5 font-medium text-text-primary" title={currentWorkspace.name}>{currentWorkspace.name}</div>
{renderWorkspaceStatus()}
</div>
<WorkspaceIcon name={currentWorkspace.name} className="h-9 w-9" />

View File

@ -152,6 +152,7 @@ describe('PluginsPanel', () => {
render(<PluginsPanel />)
expect(screen.getByTestId('filter-management').parentElement).toHaveClass('px-12')
expect(screen.getByTestId('filter-management').parentElement).not.toHaveClass('max-w-[1600px]')
expect(screen.getByTestId('empty-state')).toHaveAttribute('data-content-inset', 'default')
})
@ -159,6 +160,7 @@ describe('PluginsPanel', () => {
render(<PluginsPanel contentInset="compact" />)
expect(screen.getByTestId('filter-management').parentElement).toHaveClass('px-6')
expect(screen.getByTestId('filter-management').parentElement).toHaveClass('max-w-[1600px]')
expect(screen.getByTestId('empty-state')).toHaveAttribute('data-content-inset', 'compact')
})

View File

@ -1,5 +1,10 @@
export type PluginPageContentInset = 'default' | 'compact'
export const pluginPageContentFrameClassNames: Record<PluginPageContentInset, string> = {
default: 'w-full',
compact: 'mx-auto box-border w-full max-w-[1600px]',
}
export const pluginPageContentInsetClassNames: Record<PluginPageContentInset, string> = {
default: 'px-12',
compact: 'px-6',

View File

@ -17,7 +17,7 @@ import { SUPPORT_INSTALL_LOCAL_FILE_EXTENSIONS } from '@/config'
import { systemFeaturesQueryOptions } from '@/service/system-features'
import { useInstalledPluginList } from '@/service/use-plugins'
import Line from '../../marketplace/empty/line'
import { pluginPageContentInsetClassNames } from '../content-inset'
import { pluginPageContentFrameClassNames, pluginPageContentInsetClassNames } from '../content-inset'
import { usePluginPageContext } from '../context'
type InstallMethod = {
@ -77,11 +77,12 @@ const Empty = ({
return methods
}, [plugin_installation_permission, enable_marketplace, t])
const contentPaddingClassName = pluginPageContentInsetClassNames[contentInset]
const contentFrameClassName = cn(pluginPageContentFrameClassNames[contentInset], contentPaddingClassName)
return (
<div className="relative z-0 w-full grow">
{/* skeleton */}
<div className={cn('absolute top-0 z-10 grid h-full w-full grid-cols-2 gap-2 overflow-hidden', contentPaddingClassName)}>
<div className={cn('absolute top-0 left-1/2 z-10 grid h-full -translate-x-1/2 grid-cols-2 gap-2 overflow-hidden', contentFrameClassName)}>
{Array.from({ length: 20 }).fill(0).map((_, i) => (
<div key={i} className="h-24 rounded-xl bg-components-card-bg" />
))}

View File

@ -13,7 +13,7 @@ import { useGetLanguage } from '@/context/i18n'
import { renderI18nObject } from '@/i18n-config'
import { useInstalledPluginList, useInvalidateInstalledPluginList } from '@/service/use-plugins'
import { usePluginsWithLatestVersion } from '../hooks'
import { pluginPageContentInsetClassNames } from './content-inset'
import { pluginPageContentFrameClassNames, pluginPageContentInsetClassNames } from './content-inset'
import { usePluginPageContext } from './context'
import Empty from './empty'
import FilterManagement from './filter-management'
@ -84,10 +84,11 @@ const PluginsPanel = ({
const handleHide = () => setCurrentPluginID(undefined)
const contentPaddingClassName = pluginPageContentInsetClassNames[contentInset]
const contentFrameClassName = cn(pluginPageContentFrameClassNames[contentInset], contentPaddingClassName)
return (
<>
<div className={cn('flex flex-col items-start justify-center gap-3 self-stretch pt-1 pb-3', contentPaddingClassName)}>
<div className={cn('flex flex-col items-start justify-center gap-3 self-stretch pt-1 pb-3', contentFrameClassName)}>
<div className="h-px self-stretch bg-divider-subtle"></div>
<FilterManagement
onFilterChange={handleFilterChange}
@ -98,7 +99,7 @@ const PluginsPanel = ({
<>
{(filteredList?.length ?? 0) > 0
? (
<div className={cn('flex grow flex-wrap content-start items-start justify-center gap-2 self-stretch overflow-y-auto', contentPaddingClassName)}>
<div className={cn('flex grow flex-wrap content-start items-start justify-center gap-2 self-stretch overflow-y-auto', contentFrameClassName)}>
<div className="w-full">
<List pluginList={filteredList || []} />
</div>

View File

@ -281,14 +281,18 @@ describe('ProviderList', () => {
const { container } = renderProviderList()
expect(container.querySelector('.sticky')).toHaveClass('px-12')
expect(container.querySelector('.sticky')).not.toHaveClass('max-w-[1600px]')
expect(screen.getByTestId('card-google-search').closest('.grid')).toHaveClass('px-12')
expect(screen.getByTestId('card-google-search').closest('.grid')).not.toHaveClass('max-w-[1600px]')
})
it('uses compact content inset when rendered by integrations layout', () => {
const { container } = renderProviderList(undefined, 'builtin', 'compact')
expect(container.querySelector('.sticky')).toHaveClass('px-6')
expect(container.querySelector('.sticky')).toHaveClass('max-w-[1600px]')
expect(screen.getByTestId('card-google-search').closest('.grid')).toHaveClass('px-6')
expect(screen.getByTestId('card-google-search').closest('.grid')).toHaveClass('max-w-[1600px]')
})
})

View File

@ -1,5 +1,10 @@
export type ToolsContentInset = 'default' | 'compact'
export const toolsContentFrameClassNames: Record<ToolsContentInset, string> = {
default: 'w-full',
compact: 'mx-auto box-border w-full max-w-[1600px]',
}
export const toolsContentInsetClassNames: Record<ToolsContentInset, string> = {
default: 'px-12',
compact: 'px-6',

View File

@ -5,6 +5,7 @@ import ApiBasedExtensionPage from '@/app/components/header/account-setting/api-b
import DataSourcePage from '@/app/components/header/account-setting/data-source-page-new'
import ModelProviderPage from '@/app/components/header/account-setting/model-provider-page'
import { PluginCategoryEnum } from '@/app/components/plugins/types'
import { toolsContentFrameClassNames, toolsContentInsetClassNames } from './content-inset'
import PluginCategoryPage from './plugin-category-page'
import ToolProviderList from './provider-list'
@ -22,7 +23,7 @@ const IntegrationSectionRenderer = ({
switch (section) {
case 'provider':
return (
<div className="px-6 pt-6">
<div className={`${toolsContentFrameClassNames.compact} ${toolsContentInsetClassNames.compact} pt-6`}>
<ModelProviderPage
searchText={providerSearchText}
onSearchTextChange={onProviderSearchTextChange}
@ -39,13 +40,13 @@ const IntegrationSectionRenderer = ({
return <ToolProviderList category="workflow" contentInset="compact" />
case 'data-source':
return (
<div className="px-6 pt-6">
<div className={`${toolsContentFrameClassNames.compact} ${toolsContentInsetClassNames.compact} pt-6`}>
<DataSourcePage />
</div>
)
case 'api-based-extension':
return (
<div className="px-6 pt-6">
<div className={`${toolsContentFrameClassNames.compact} ${toolsContentInsetClassNames.compact} pt-6`}>
<ApiBasedExtensionPage />
</div>
)

View File

@ -5,6 +5,7 @@ import type { IntegrationSection } from '@/app/components/tools/integration-rout
import { Button } from '@langgenius/dify-ui/button'
import { cn } from '@langgenius/dify-ui/cn'
import { Popover, PopoverContent, PopoverTrigger } from '@langgenius/dify-ui/popover'
import { ToggleGroup, ToggleGroupItem } from '@langgenius/dify-ui/toggle-group'
import { parseAsStringLiteral, useQueryState } from 'nuqs'
import { useMemo, useState } from 'react'
import { useTranslation } from 'react-i18next'
@ -83,32 +84,31 @@ const PermissionQuickPanel = ({
<div className="flex min-h-6 items-center system-sm-semibold whitespace-nowrap text-text-secondary">
{row.label}
</div>
<div
role="group"
<ToggleGroup<PermissionType>
value={[row.value]}
onValueChange={(value) => {
const nextValue = value[0]
if (nextValue)
onChange(row.key, nextValue)
}}
aria-label={row.label}
className="inline-flex w-fit items-center gap-px rounded-[10px] bg-components-segmented-control-bg-normal p-0.5"
className="w-fit"
>
{permissionSettingOptions.map((option) => {
const selected = row.value === option
const optionLabel = t(`privilege.${option}`, { ns: 'plugin' })
return (
<button
<ToggleGroupItem
key={option}
type="button"
aria-pressed={selected}
value={option}
aria-label={`${row.label}: ${optionLabel}`}
className={cn(
'flex h-7 shrink-0 items-center justify-center rounded-lg border-[0.5px] border-transparent px-2 py-1 system-sm-medium whitespace-nowrap text-text-secondary transition-colors hover:bg-state-base-hover hover:text-text-secondary focus-visible:ring-2 focus-visible:ring-components-input-border-hover focus-visible:outline-hidden',
selected && 'border-components-segmented-control-item-active-border bg-components-segmented-control-item-active-bg text-text-accent-light-mode-only shadow-xs shadow-shadow-shadow-3 hover:bg-components-segmented-control-item-active-bg hover:text-text-accent-light-mode-only',
)}
onClick={() => onChange(row.key, option)}
className="shrink-0"
>
<span className="px-0.5 py-0.5">{optionLabel}</span>
</button>
</ToggleGroupItem>
)
})}
</div>
</ToggleGroup>
</div>
))}
</div>
@ -222,18 +222,21 @@ export default function IntegrationsPage({
section: 'custom-tool',
label: t('settings.swaggerAPIAsTool', { ns: 'common' }),
icon: 'i-custom-vender-integrations-custom-tool',
activeIcon: 'i-custom-vender-integrations-custom-tool-active',
iconClassName: 'h-[14.5px] w-[12.5px]',
},
{
section: 'workflow-tool',
label: t('common.workflowAsTool', { ns: 'workflow' }),
icon: 'i-custom-vender-integrations-workflow-as-tool',
activeIcon: 'i-custom-vender-integrations-workflow-as-tool-active',
iconClassName: 'h-3 w-[12.5px]',
},
{
section: 'api-based-extension',
label: t('settings.apiBasedExtension', { ns: 'common' }),
icon: 'i-custom-vender-integrations-api-extension',
activeIcon: 'i-custom-vender-integrations-api-extension-active',
iconClassName: 'h-[13px] w-3.5',
},
], [t])
@ -242,24 +245,28 @@ export default function IntegrationsPage({
section: 'data-source',
label: t('settings.dataSource', { ns: 'common' }),
icon: DatasourceIcon,
activeIcon: 'i-ri-database-2-fill',
iconClassName: 'size-4',
},
{
section: 'trigger',
label: t('settings.trigger', { ns: 'common' }),
icon: 'i-custom-vender-integrations-trigger',
activeIcon: 'i-custom-vender-integrations-trigger-active',
iconClassName: 'h-[13.5px] w-[13.5px]',
},
{
section: 'agent-strategy',
label: t('settings.agentStrategy', { ns: 'common' }),
icon: 'i-custom-vender-integrations-agent-strategy',
activeIcon: 'i-custom-vender-integrations-agent-strategy-active',
iconClassName: 'h-[14.5px] w-[15.5px]',
},
{
section: 'extension',
label: t('settings.extension', { ns: 'common' }),
icon: 'i-custom-vender-integrations-extension',
activeIcon: 'i-custom-vender-integrations-extension-active',
iconClassName: 'h-[13.5px] w-3',
},
], [t])
@ -385,18 +392,15 @@ export default function IntegrationsPage({
<Popover>
<PopoverTrigger
render={(
<button
type="button"
<Button
variant="secondary"
disabled={!showPermissionQuickPanel}
className={cn(
'flex size-8 shrink-0 items-center justify-center rounded-lg border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg text-components-button-secondary-text shadow-xs transition-colors hover:border-components-button-secondary-border-hover hover:bg-components-button-secondary-bg-hover focus-visible:ring-2 focus-visible:ring-components-input-border-hover focus-visible:outline-hidden',
!showPermissionQuickPanel && 'cursor-not-allowed opacity-60 hover:bg-components-button-secondary-bg hover:text-components-button-secondary-text',
)}
className="size-8 shrink-0 p-0"
aria-label={t('privilege.permissions', { ns: 'plugin' })}
title={t('privilege.permissions', { ns: 'plugin' })}
>
<span aria-hidden className="i-ri-equalizer-2-line size-4" />
</button>
</Button>
)}
/>
{showPermissionQuickPanel && (
@ -428,7 +432,11 @@ export default function IntegrationsPage({
)}
>
<span aria-hidden className="flex size-5 shrink-0 items-center justify-center">
<span className="i-custom-vender-integrations-tools h-3.5 w-[12.5px]" />
<span className={cn(
'h-3.5 w-[12.5px]',
section === 'builtin' ? 'i-custom-vender-integrations-tools-active' : 'i-custom-vender-integrations-tools',
)}
/>
</span>
{!sidebarCollapsed && (
<>

View File

@ -188,9 +188,11 @@ describe('Marketplace', () => {
/>,
)
const sections = container.querySelectorAll('.bg-background-default-subtle')
expect(sections[0]).toHaveClass('px-6')
expect(sections[1]).toHaveClass('px-6')
const contentFrames = Array.from(container.querySelectorAll('div'))
.filter(el => el.classList.contains('max-w-[1600px]'))
expect(contentFrames).toHaveLength(2)
expect(contentFrames[0]).toHaveClass('px-6')
expect(contentFrames[1]).toHaveClass('px-6')
})
})
})

View File

@ -11,7 +11,7 @@ import { useTranslation } from 'react-i18next'
import Loading from '@/app/components/base/loading'
import List from '@/app/components/plugins/marketplace/list'
import { getMarketplaceUrl } from '@/utils/var'
import { toolsContentInsetClassNames } from '../content-inset'
import { toolsContentFrameClassNames, toolsContentInsetClassNames } from '../content-inset'
type MarketplaceProps = {
searchPluginText: string
@ -40,17 +40,18 @@ const Marketplace = ({
page,
} = marketplaceContext
const contentPaddingClassName = toolsContentInsetClassNames[contentInset]
const contentFrameClassName = cn(toolsContentFrameClassNames[contentInset], contentPaddingClassName)
return (
<>
<div className={cn('sticky bottom-0 flex shrink-0 flex-col bg-background-default-subtle pt-2 pb-[14px]', contentPaddingClassName)}>
<div className="sticky bottom-0 flex shrink-0 flex-col bg-background-default-subtle pt-2 pb-[14px]">
{isMarketplaceArrowVisible && (
<RiArrowUpDoubleLine
className="absolute top-2 left-1/2 z-10 h-4 w-4 -translate-x-1/2 cursor-pointer text-text-quaternary"
onClick={showMarketplacePanel}
/>
)}
<div className="pt-4 pb-3">
<div className={cn('pt-4 pb-3', contentFrameClassName)}>
<div className="bg-linear-to-r from-[rgba(11,165,236,0.95)] to-[rgba(21,90,239,0.95)] bg-clip-text title-2xl-semi-bold text-transparent">
{t('marketplace.moreFrom', { ns: 'plugin' })}
</div>
@ -95,7 +96,7 @@ const Marketplace = ({
</div>
</div>
</div>
<div className={cn('mt-[-14px] shrink-0 grow bg-background-default-subtle pb-2', contentPaddingClassName)}>
<div className="mt-[-14px] shrink-0 grow bg-background-default-subtle pb-2">
{
isLoading && page === 1 && (
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
@ -105,12 +106,14 @@ const Marketplace = ({
}
{
(!isLoading || page > 1) && (
<List
marketplaceCollections={marketplaceCollections || []}
marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap || {}}
plugins={plugins}
showInstallButton
/>
<div className={contentFrameClassName}>
<List
marketplaceCollections={marketplaceCollections || []}
marketplaceCollectionPluginsMap={marketplaceCollectionPluginsMap || {}}
plugins={plugins}
showInstallButton
/>
</div>
)
}
</div>

View File

@ -346,6 +346,7 @@ describe('MCPList', () => {
const grid = document.querySelector('.grid')
expect(grid).toHaveClass('px-6')
expect(grid).toHaveClass('max-w-[1600px]')
expect(grid).not.toHaveClass('px-12')
})
})

View File

@ -6,7 +6,7 @@ import { useMemo, useState } from 'react'
import {
useAllToolProviders,
} from '@/service/use-tools'
import { toolsContentInsetClassNames } from '../content-inset'
import { toolsContentFrameClassNames, toolsContentInsetClassNames } from '../content-inset'
import NewMCPCard from './create-card'
import MCPDetailPanel from './detail/provider-detail'
import MCPCard from './provider-card'
@ -68,12 +68,13 @@ const MCPList = ({
setIsTriggerAuthorize(true)
}
const contentPaddingClassName = toolsContentInsetClassNames[contentInset]
const contentFrameClassName = cn(toolsContentFrameClassNames[contentInset], contentPaddingClassName)
return (
<>
<div
className={cn(
'relative grid shrink-0 grid-cols-1 content-start gap-4 pt-2 pb-4 2k:grid-cols-6 sm:grid-cols-1 md:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-5',
contentPaddingClassName,
contentFrameClassName,
!list.length && 'h-[calc(100vh-136px)] overflow-hidden',
)}
>

View File

@ -23,7 +23,7 @@ import WorkflowToolEmpty from '@/app/components/tools/provider/empty'
import { systemFeaturesQueryOptions } from '@/service/system-features'
import { useCheckInstalled, useInvalidateInstalledPluginList } from '@/service/use-plugins'
import { useAllToolProviders } from '@/service/use-tools'
import { toolsContentInsetClassNames } from './content-inset'
import { toolsContentFrameClassNames, toolsContentInsetClassNames } from './content-inset'
import Marketplace from './marketplace'
import { useMarketplace } from './marketplace/hooks'
import MCPList from './mcp'
@ -61,6 +61,7 @@ const ProviderList = ({
const activeTab = category ?? categoryParam
const isRouteCategory = !!category
const contentPaddingClassName = toolsContentInsetClassNames[contentInset]
const contentFrameClassName = cn(toolsContentFrameClassNames[contentInset], contentPaddingClassName)
const options = [
{ value: 'builtin', text: t('type.builtIn', { ns: 'tools' }) },
{ value: 'api', text: t('type.custom', { ns: 'tools' }) },
@ -146,7 +147,7 @@ const ProviderList = ({
<div
className={cn(
'sticky top-0 z-10 flex flex-wrap items-center justify-start gap-x-4 gap-y-2 bg-background-body pt-4 pb-2',
contentPaddingClassName,
contentFrameClassName,
currentProviderId && 'pr-6',
)}
>
@ -182,7 +183,7 @@ const ProviderList = ({
<div
className={cn(
'relative grid shrink-0 grid-cols-1 content-start gap-4 pt-2 pb-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4',
contentPaddingClassName,
contentFrameClassName,
!filteredCollectionList.length && activeTab === 'workflow' && 'grow',
)}
>
@ -216,7 +217,7 @@ const ProviderList = ({
</div>
)}
{!filteredCollectionList.length && activeTab === 'builtin' && (
<Empty lightCard text={t('noTools', { ns: 'tools' })} className={cn('h-[224px] shrink-0', contentPaddingClassName)} />
<Empty lightCard text={t('noTools', { ns: 'tools' })} className={cn('h-[224px] shrink-0', contentFrameClassName)} />
)}
<div ref={toolListTailRef} />
{enable_marketplace && activeTab === 'builtin' && (