@liujitcn/kratos-taro-app-core 0.1.4 → 0.1.11

package/package.json

@@ -7,7 +7,7 @@
     "type": "git",
     "url": "git@github.com:liujitcn/kratos-admin.git"
   },
-  "version": "0.1.4",
+  "version": "0.1.11",
   "type": "module",
   "files": [
     "dist",

package/src/components/KratosNavBar.scss

@@ -40,12 +40,14 @@
   width: 76px;
   height: 76px;
   border: 1PX solid var(--kratos-color-border);
-  border-radius: 24px;
+  border-radius: var(--kratos-page-radius);
   background: var(--kratos-color-surface);
   color: var(--kratos-color-text);
+  line-height: 0;
 }
 
 .kratos-nav-bar__back::before {
+  display: block;
   width: 16px;
   height: 16px;
   border-left: 2PX solid var(--kratos-color-primary);
@@ -69,6 +71,7 @@
 
 .kratos-nav-bar__icon {
   flex-shrink: 0;
+  display: block;
   width: 34px;
   height: 34px;
 }

package/src/components/KratosTabBar.scss

@@ -108,7 +108,7 @@
   height: 16px;
   box-sizing: border-box;
   border: 2px solid var(--kratos-color-surface-solid, #070d18);
-  border-radius: 18px;
+  border-radius: 50%;
   background: var(--kratos-color-danger, #ff4d6d);
   box-shadow: 0 0 12px var(--kratos-color-danger, #ff4d6d);
 }

package/src/components/MfaRecoveryCodesDialog.scss

@@ -13,7 +13,7 @@
   width: min(100%, 640px);
   overflow: hidden;
   background-color: var(--kratos-color-surface-solid);
-  border-radius: 16px;
+  border-radius: var(--kratos-page-radius);
   box-shadow: 0 20px 64px rgb(0 0 0 / 20%);
 }
 
@@ -43,7 +43,7 @@
   line-height: 1.6;
   border: 1PX solid var(--kratos-color-border);
   background-color: var(--kratos-color-surface-2);
-  border-radius: 8px;
+  border-radius: var(--kratos-page-radius);
   overflow-wrap: anywhere;
   white-space: pre-wrap;
 }
@@ -59,7 +59,7 @@
   line-height: 58px;
   background-color: var(--kratos-color-primary-soft);
   border: 0;
-  border-radius: 8px;
+  border-radius: var(--kratos-page-radius);
 }
 
 .mfa-recovery-dialog__copy::after,
@@ -91,5 +91,5 @@
   line-height: 72px;
   background-color: var(--kratos-color-primary);
   border: 0;
-  border-radius: 8px;
+  border-radius: var(--kratos-page-radius);
 }

package/src/components/MfaSetupPanel.scss

@@ -33,7 +33,7 @@
   color: var(--kratos-color-primary);
   background: var(--kratos-color-primary-soft);
   border: 0;
-  border-radius: 8px;
+  border-radius: var(--kratos-page-radius);
 }
 
 .mfa-setup-panel__copy::after {

package/src/components/PasswordVerifyDialog.scss

@@ -17,7 +17,7 @@
   width: 100%;
   max-width: 640px;
   overflow: hidden;
-  border-radius: 16px;
+  border-radius: var(--kratos-page-radius);
   background-color: var(--kratos-color-surface-solid);
   box-shadow: 0 20px 64px rgba(0, 0, 0, 0.2);
 }
@@ -79,7 +79,7 @@
   text-align: left;
   background: var(--kratos-color-surface-2);
   border: 1PX solid var(--kratos-color-border);
-  border-radius: 8px;
+  border-radius: var(--kratos-page-radius);
   outline: none;
 }
 
@@ -111,7 +111,7 @@
   line-height: 72px;
   text-align: center;
   border: 0;
-  border-radius: 8px;
+  border-radius: var(--kratos-page-radius);
 }
 
 .password-verify-dialog__button::after {

package/src/styles/components.scss

@@ -10,7 +10,7 @@
   position: relative;
   overflow: hidden;
   border: 1PX solid var(--kratos-color-border);
-  border-radius: 26px;
+  border-radius: var(--kratos-page-radius);
   background: var(--kratos-color-surface);
   box-shadow: inset 0 1PX 0 rgba(255, 255, 255, 0.05);
 }
@@ -56,7 +56,7 @@
   width: 6px;
   height: 26px;
   margin-right: 16px;
-  border-radius: 4px;
+  border-radius: var(--kratos-page-radius);
   background: var(--kratos-color-primary);
   box-shadow: 0 0 8PX var(--kratos-color-primary-edge);
 }
@@ -96,7 +96,7 @@
   justify-content: center;
   height: 96px;
   margin-top: 36px;
-  border-radius: 20px;
+  border-radius: var(--kratos-page-radius);
   background: linear-gradient(135deg, var(--kratos-color-primary-deep), var(--kratos-color-primary));
   color: var(--kratos-color-on-primary);
   font-size: 30px;
@@ -113,7 +113,7 @@
   justify-content: center;
   width: 76px;
   height: 76px;
-  border-radius: 24px;
+  border-radius: var(--kratos-page-radius);
   background: var(--kratos-color-surface);
   border: 1PX solid var(--kratos-color-border);
   color: var(--kratos-color-text);
@@ -129,7 +129,7 @@
   min-width: 34px;
   height: 34px;
   padding: 0 8px;
-  border-radius: 18px;
+  border-radius: var(--kratos-page-radius);
   background: var(--kratos-color-danger);
   color: #fff;
   font-size: 21px;
@@ -171,7 +171,7 @@
   display: inline-flex;
   align-items: center;
   padding: 8px 20px;
-  border-radius: 999px;
+  border-radius: var(--kratos-page-radius);
   background: var(--kratos-color-primary-soft-2);
   border: 1PX solid var(--kratos-color-border-accent);
   color: var(--kratos-color-primary);
@@ -184,13 +184,13 @@
   display: inline-flex;
   gap: 8px;
   padding: 6px;
-  border-radius: 22px;
+  border-radius: var(--kratos-page-radius);
   background: var(--kratos-color-track);
   border: 1PX solid var(--kratos-color-border);
 }
 .k-pills__item {
   padding: 12px 24px;
-  border-radius: 16px;
+  border-radius: var(--kratos-page-radius);
   color: var(--kratos-color-text-muted);
   font-size: 22px;
   font-family: var(--kratos-font-mono);
@@ -223,7 +223,7 @@
   align-items: center;
   gap: 12px;
   padding: 14px 24px;
-  border-radius: 999px;
+  border-radius: var(--kratos-page-radius);
   background: var(--kratos-color-surface);
   border: 1PX solid var(--kratos-color-border);
   color: var(--kratos-color-text-muted);
@@ -253,7 +253,7 @@
   align-items: center;
   gap: 12px;
   padding: 12px 24px;
-  border-radius: 999px;
+  border-radius: var(--kratos-page-radius);
   background: var(--kratos-color-surface);
   border: 1PX solid var(--kratos-color-border);
   color: var(--kratos-color-text-muted);
@@ -268,7 +268,7 @@
   width: 148px;
   height: 148px;
   margin: 0 auto;
-  border-radius: 30px;
+  border-radius: var(--kratos-page-radius);
   background: linear-gradient(135deg, var(--kratos-color-primary-deep), var(--kratos-color-info));
   color: var(--kratos-color-on-primary);
   font-size: 48px;
@@ -283,7 +283,7 @@
   bottom: -12px;
   left: -12px;
   border: 1PX solid var(--kratos-color-border-accent);
-  border-radius: 38px;
+  border-radius: var(--kratos-page-radius);
   opacity: 0.55;
 }
 .k-lg-title {
@@ -306,7 +306,7 @@
   height: 100px;
   padding: 0 28px;
   margin-top: 24px;
-  border-radius: 20px;
+  border-radius: var(--kratos-page-radius);
   background: var(--kratos-color-surface);
   border: 1PX solid var(--kratos-color-border);
 }
@@ -325,7 +325,7 @@
   flex-shrink: 0;
   width: 180px;
   height: 72px;
-  border-radius: 16px;
+  border-radius: var(--kratos-page-radius);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -346,7 +346,7 @@
   width: 100%;
   height: 100px;
   margin-top: 36px;
-  border-radius: 20px;
+  border-radius: var(--kratos-page-radius);
   font-size: 30px;
   font-weight: 800;
 }
@@ -393,7 +393,7 @@
   justify-content: center;
   width: 32px;
   height: 32px;
-  border-radius: 10px;
+  border-radius: var(--kratos-page-radius);
   border: 3px solid var(--kratos-color-primary);
   color: var(--kratos-color-primary);
   font-size: 22px;
@@ -422,7 +422,7 @@
   justify-content: center;
   width: 112px;
   height: 112px;
-  border-radius: 22px;
+  border-radius: var(--kratos-page-radius);
   background: linear-gradient(135deg, var(--kratos-color-primary-deep), var(--kratos-color-info));
   color: var(--kratos-color-on-primary);
   font-size: 44px;
@@ -443,7 +443,7 @@
 .k-pfx__ent {
   flex-shrink: 0;
   padding: 14px 22px;
-  border-radius: 999px;
+  border-radius: var(--kratos-page-radius);
   background: var(--kratos-color-primary-soft);
   border: 1PX solid var(--kratos-color-border-accent);
   color: var(--kratos-color-primary);
@@ -455,7 +455,7 @@
   align-items: center;
   gap: 26px;
   padding: 30px;
-  border-radius: 24px;
+  border-radius: var(--kratos-page-radius);
   background: linear-gradient(135deg, var(--kratos-color-primary-soft-2), var(--kratos-color-primary-soft));
   border: 1PX solid var(--kratos-color-border-accent);
 }
@@ -466,7 +466,7 @@
   justify-content: center;
   width: 92px;
   height: 92px;
-  border-radius: 20px;
+  border-radius: var(--kratos-page-radius);
   background: linear-gradient(135deg, var(--kratos-color-violet), var(--kratos-color-info));
   color: #fff;
   font-size: 30px;
@@ -486,7 +486,7 @@
 .k-aix__b {
   flex-shrink: 0;
   padding: 14px 24px;
-  border-radius: 999px;
+  border-radius: var(--kratos-page-radius);
   background: var(--kratos-color-primary-soft-2);
   border: 1PX solid var(--kratos-color-border-accent);
   color: var(--kratos-color-primary);
@@ -511,7 +511,7 @@
   justify-content: center;
   width: 92px;
   height: 92px;
-  border-radius: 20px;
+  border-radius: var(--kratos-page-radius);
   border: 1PX solid var(--kratos-color-border);
   color: var(--kratos-color-primary);
   background: var(--kratos-color-primary-soft);
@@ -538,7 +538,7 @@
   gap: 24px;
   padding: 28px 30px;
   margin-bottom: 20px;
-  border-radius: 20px;
+  border-radius: var(--kratos-page-radius);
   background: var(--kratos-color-surface);
   border: 1PX solid var(--kratos-color-border);
 }
@@ -564,7 +564,7 @@
   justify-content: center;
   width: 76px;
   height: 76px;
-  border-radius: 22px;
+  border-radius: var(--kratos-page-radius);
   border: 1PX solid var(--kratos-color-border);
   color: var(--kratos-color-primary);
 }
@@ -588,7 +588,7 @@
   justify-content: center;
   height: 100px;
   margin-top: 44px;
-  border-radius: 20px;
+  border-radius: var(--kratos-page-radius);
   color: var(--kratos-color-danger);
   background: var(--kratos-color-danger-soft);
   border: 1PX solid var(--kratos-color-danger);
@@ -608,7 +608,7 @@
   position: relative;
   overflow: hidden;
   padding: 26px 28px;
-  border-radius: 20px;
+  border-radius: var(--kratos-page-radius);
   background: var(--kratos-color-surface);
   border: 1PX solid var(--kratos-color-border);
 }
@@ -634,7 +634,7 @@
   justify-content: center;
   width: 76px;
   height: 76px;
-  border-radius: 22px;
+  border-radius: var(--kratos-page-radius);
   border: 1PX solid var(--kratos-color-border);
   color: var(--kratos-color-primary);
   background: var(--kratos-color-primary-soft);
@@ -700,7 +700,7 @@
   justify-content: center;
   width: 112px;
   height: 112px;
-  border-radius: 26px;
+  border-radius: var(--kratos-page-radius);
   border: 1PX solid var(--kratos-color-border-accent);
   background: var(--kratos-color-primary-soft-2);
   color: var(--kratos-color-primary);
@@ -722,7 +722,7 @@
 .k-empty__act {
   margin-top: 32px;
   padding: 16px 40px;
-  border-radius: 999px;
+  border-radius: var(--kratos-page-radius);
   border: 1PX solid var(--kratos-color-border-accent);
   background: var(--kratos-color-primary-soft-2);
   color: var(--kratos-color-primary);

package/src/views/pages/index/index.scss

@@ -29,7 +29,7 @@ page {
   flex: 0 0 auto;
   width: 104px;
   height: 104px;
-  border-radius: 26px;
+  border-radius: var(--kratos-page-radius);
   border: 1PX solid var(--kratos-color-border-accent);
   background: var(--kratos-color-surface-2);
 }
@@ -81,7 +81,7 @@ page {
   flex: 0 0 auto;
   width: 48px;
   height: 48px;
-  border-radius: 14px;
+  border-radius: var(--kratos-page-radius);
   background: var(--kratos-color-primary-soft);
   border: 1PX solid var(--kratos-color-primary-edge);
   color: var(--kratos-color-primary);

package/src/views/pages/login/login.scss

@@ -154,7 +154,7 @@ page {
   width: auto;
   max-width: 100%;
   padding: 24px;
-  border-radius: 24px;
+  border-radius: var(--kratos-page-radius);
   box-sizing: border-box;
   background: #fff;
   box-shadow: 0 24px 70px rgba(15, 23, 42, 0.18);
@@ -167,7 +167,7 @@ page {
   right: 24px;
   left: 24px;
   height: 44px;
-  border-radius: 999px;
+  border-radius: var(--kratos-page-radius);
   color: #28bb9c;
   font-size: 24px;
   line-height: 44px;
@@ -191,7 +191,7 @@ page {
 
   .gc-body {
     margin-top: 0;
-    border-radius: 18px;
+    border-radius: var(--kratos-page-radius);
   }
 
   .gc-footer {
@@ -204,7 +204,7 @@ page {
 
   .gc-drag-line {
     height: 18px;
-    border-radius: 999px;
+    border-radius: var(--kratos-page-radius);
     background: #dbe7e3;
   }
 
@@ -212,7 +212,7 @@ page {
     width: 92px;
     height: 56px;
     margin-top: -28px;
-    border-radius: 999px;
+    border-radius: var(--kratos-page-radius);
     color: var(--kratos-color-on-primary);
     fill: var(--kratos-color-on-primary);
     background: linear-gradient(135deg, var(--kratos-color-primary-deep) 0%, var(--kratos-color-primary) 100%);
@@ -245,7 +245,7 @@ page {
   max-width: 520px;
   padding: 32px;
   border: 1PX solid var(--kratos-color-border-accent);
-  border-radius: 24px;
+  border-radius: var(--kratos-page-radius);
   background: var(--kratos-color-surface-solid);
   box-sizing: border-box;
 }
@@ -274,7 +274,7 @@ page {
   margin-bottom: 20px;
   padding: 0 30px;
   border: 1PX solid var(--kratos-color-border);
-  border-radius: 20px;
+  border-radius: var(--kratos-page-radius);
   box-sizing: border-box;
   color: var(--kratos-color-text);
   font-size: 28px;
@@ -288,7 +288,7 @@ page {
   width: 100%;
   height: 96px;
   margin-top: 12px;
-  border-radius: 20px;
+  border-radius: var(--kratos-page-radius);
   color: var(--kratos-color-on-primary);
   font-size: 30px;
   font-weight: 800;

package/src/views/pages/login/protocal.scss

@@ -9,7 +9,7 @@
   overflow: hidden;
   padding: 40px 32px 56px;
   border: 1PX solid var(--kratos-color-border);
-  border-radius: 24px;
+  border-radius: var(--kratos-page-radius);
   background-color: var(--kratos-color-surface);
   box-shadow: var(--kratos-glow-soft);
 }

package/src/views/pages/webview/webview.scss

@@ -37,7 +37,7 @@
   width: 240px;
   height: 72px;
   line-height: 72px;
-  border-radius: 72px;
+  border-radius: var(--kratos-page-radius);
   background: linear-gradient(135deg, var(--kratos-color-primary-deep), var(--kratos-color-primary));
   color: var(--kratos-color-on-primary);
   font-size: 26px;