@uxda/appkit 1.1.0 → 1.2.0

package/README.md

@@ -80,7 +80,7 @@ import { AccountView } from '@uxda/appkit'
 ```
 ```html
 <template>
-  <account-view @recharge=onAccountViewRecharge />
+  <account-view app="crm" @recharge=onAccountViewRecharge />
 <template>
 ```
 
@@ -95,11 +95,12 @@ import { BalanceCard } from '@uxda/appkit'
 
 ```html
 <template>
-  <balance-card @drill="onBalanceCardDrill" @recharge="onBalanceCardRecharge" />
+  <balance-card app="crm" @drill="onBalanceCardDrill" @recharge="onBalanceCardRecharge" />
 <template>
 ```
 
 #### 事件 emits 
+* app 配置到组件上的 app code
 * @drill 点击账户详情时发生
 * @recharge 点击充值按钮时发生
 
@@ -115,6 +116,10 @@ function onBalanceCardRecharge () {
 }
 ```
 
+### 方法 methods
+* reload() 刷新数据
+
+
 
 ### 4️⃣ 余额不足提示框 &lt;balance-reminder&gt;
 
@@ -156,3 +161,28 @@ $app.requestPayment({
 })
 ```
 
+## Hooks (Vue Composables)
+
+### useTabbar
+用于获取或设置 custom tab bar
+
+```typescript
+import { useTabbar } from '@uxda/appkit-next'
+
+onMounted(() => {
+  const { setTab } = useTabbar()
+  setTab('home')
+})
+```
+以上代码用于切换到 /pages/home/index 时, 设置 tab bar 选中项为 'home'
+在 custom-tab-bar/index.vue 需要做以下设置
+
+```typescript
+import { useSafeArea, useTabbar } from '@uxda/appkit-next'
+
+const { onTabChange } = useTabbar()
+onTabChange((value: string) => {
+  selected.value = value
+})
+```
+以上代码设置响应页面内的 setTab() 动作

package/dist/appkit.css

@@ -173,7 +173,7 @@ page {
   font-family: 'DIN alternate', 'Barlow Condensed', 'Roboto Condensed', sans-serif-condensed-light;
 }
 .account-card .card {
-  background: #2F2F2F;
+  background: #2f2f2f;
   border-radius: 10px;
   padding: 13px 20px;
   margin: 0;
@@ -203,7 +203,7 @@ page {
   height: 100%;
 }
 .account-card .card .card-row .card-row-left .bean-box .baan-name {
-  color: #F3D59D;
+  color: #f3d59d;
   font-weight: 600;
   font-size: 11px;
 }
@@ -228,8 +228,8 @@ page {
 .account-card .card .card-row-right .pay {
   padding: 0 8px;
   line-height: 18px;
-  color: #FFD6A5;
-  border: 1px solid #FFD6A5;
+  color: #ffd6a5;
+  border: 1px solid #ffd6a5;
   border-radius: 9px;
   font-size: 12px;
   display: flex;
@@ -249,7 +249,7 @@ page {
   height: 28px;
   line-height: 28px;
   border-radius: 14px;
-  background: linear-gradient(90deg, #FFEBC1 0%, #FFD7A7 52.29%, #FFB875 100%);
+  background: linear-gradient(90deg, #ffebc1 0%, #ffd7a7 52.29%, #ffb875 100%);
 }
 .account-card .card .card-row-right .account-info-entry .account-info-name {
   color: #975213;
@@ -504,7 +504,7 @@ page {
 }
 .second-balance .positions .position {
   border-radius: 5px;
-  background: #F7F8FA;
+  background: #f7f8fa;
   height: 54px;
   display: flex;
   align-items: center;
@@ -516,7 +516,7 @@ page {
 .second-balance .positions .position .icon {
   width: 30px;
   height: 30px;
-  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE3LjIyODUgMzcuMjY0M0wxMy43OTk5IDQyLjc1QzEzLjYyODUgNDMuMDkyOSAxMy43OTk5IDQzLjUyMTQgMTQuMjI4NSA0My41MjE0TDE4Ljg1NzEgNDMuNzc4NkMxOS4wMjg1IDQzLjc3ODYgMTkuMTE0MiA0My44NjQzIDE5LjE5OTkgNDMuOTVMMjIuMDI4NSA0Ny43MjE0QzIyLjI4NTcgNDcuOTc4NiAyMi43MTQyIDQ3Ljk3ODYgMjIuODg1NyA0Ny43MjE0TDI2LjE0MjggNDIuMzIxNEMyNi4zMTQyIDQyLjA2NDMgMjYuMjI4NSA0MS44MDcxIDI1Ljk3MTQgNDEuNjM1N0wxNy45MTQyIDM3LjA5MjlDMTcuNjU3MSAzNy4wMDcxIDE3LjM5OTkgMzcuMDkyOSAxNy4yMjg1IDM3LjI2NDNaTTQyLjc3MTQgMzcuMTc4Nkw0Ni4xOTk5IDQyLjY2NDNDNDYuMzcxNCA0My4wMDcxIDQ2LjE5OTkgNDMuNDM1NyA0NS43NzE0IDQzLjQzNTdMNDEuMTQyOCA0My42OTI5QzQwLjk3MTQgNDMuNjkyOSA0MC44ODU3IDQzLjc3ODYgNDAuNzk5OSA0My44NjQzTDM3Ljk3MTQgNDcuNjM1N0MzNy43MTQyIDQ3Ljg5MjkgMzcuMjg1NyA0Ny44OTI5IDM3LjExNDIgNDcuNjM1N0wzMy44NTcxIDQyLjIzNTdDMzMuNjg1NyA0MS45Nzg2IDMzLjc3MTQgNDEuNzIxNCAzNC4wMjg1IDQxLjU1TDQyLjA4NTcgMzcuMDA3MUM0Mi4zNDI4IDM2LjgzNTcgNDIuNTk5OSAzNi45MjE0IDQyLjc3MTQgMzcuMTc4NlpNNDIuMDg1NyAxOC40OTI5TDMxLjE5OTkgMTIuMzIxNEMzMC40Mjg1IDExLjg5MjkgMjkuMzk5OSAxMS44OTI5IDI4LjYyODUgMTIuMzIxNEwxNy44Mjg1IDE4LjQwNzFDMTcuMDU3MSAxOC44MzU3IDE2LjU0MjggMTkuNjkyOSAxNi41NDI4IDIwLjU1VjMyLjgwNzFDMTYuNTQyOCAzMy42NjQzIDE3LjA1NzEgMzQuNTIxNCAxNy44Mjg1IDM0Ljk1TDI4LjcxNDIgNDEuMTIxNEMyOS40ODU3IDQxLjU1IDMwLjUxNDIgNDEuNTUgMzEuMjg1NyA0MS4xMjE0TDQyLjA4NTcgMzUuMTIxNEM0Mi44NTcxIDM0LjY5MjkgNDMuMzcxNCAzMy44MzU3IDQzLjM3MTQgMzIuOTc4NlYyMC43MjE0QzQzLjM3MTQgMTkuNzc4NiA0Mi44NTcxIDE4LjkyMTQgNDIuMDg1NyAxOC40OTI5Wk0zNi45NDI4IDIzLjcyMTRMMzAuNTk5OSAzMi44OTI5QzMwLjQyODUgMzMuMTUgMzAuMDg1NyAzMy4zMjE0IDI5Ljc0MjggMzMuMzIxNEMyOS4zOTk5IDMzLjMyMTQgMjkuMDU3MSAzMy4xNSAyOC44ODU3IDMyLjg5MjlMMjIuNzk5OSAyMy43MjE0QzIyLjQ1NzEgMjMuMjkyOSAyMi42Mjg1IDIyLjYwNzEgMjMuMDU3MSAyMi4zNUMyMy40ODU3IDIyLjA5MjkgMjQuMTcxNCAyMi4xNzg2IDI0LjQyODUgMjIuNjA3MUwyOS42NTcxIDMwLjQ5MjlMMzUuMTQyOCAyMi41MjE0QzM1LjQ4NTcgMjIuMDkyOSAzNi4wODU3IDIxLjkyMTQgMzYuNTE0MiAyMi4yNjQzQzM3LjE5OTkgMjIuNjkyOSAzNy4yODU3IDIzLjI5MjkgMzYuOTQyOCAyMy43MjE0WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg=="), linear-gradient(100deg, #F4E2CE -67.2%, #DEBB9B 98.15%);
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE3LjIyODUgMzcuMjY0M0wxMy43OTk5IDQyLjc1QzEzLjYyODUgNDMuMDkyOSAxMy43OTk5IDQzLjUyMTQgMTQuMjI4NSA0My41MjE0TDE4Ljg1NzEgNDMuNzc4NkMxOS4wMjg1IDQzLjc3ODYgMTkuMTE0MiA0My44NjQzIDE5LjE5OTkgNDMuOTVMMjIuMDI4NSA0Ny43MjE0QzIyLjI4NTcgNDcuOTc4NiAyMi43MTQyIDQ3Ljk3ODYgMjIuODg1NyA0Ny43MjE0TDI2LjE0MjggNDIuMzIxNEMyNi4zMTQyIDQyLjA2NDMgMjYuMjI4NSA0MS44MDcxIDI1Ljk3MTQgNDEuNjM1N0wxNy45MTQyIDM3LjA5MjlDMTcuNjU3MSAzNy4wMDcxIDE3LjM5OTkgMzcuMDkyOSAxNy4yMjg1IDM3LjI2NDNaTTQyLjc3MTQgMzcuMTc4Nkw0Ni4xOTk5IDQyLjY2NDNDNDYuMzcxNCA0My4wMDcxIDQ2LjE5OTkgNDMuNDM1NyA0NS43NzE0IDQzLjQzNTdMNDEuMTQyOCA0My42OTI5QzQwLjk3MTQgNDMuNjkyOSA0MC44ODU3IDQzLjc3ODYgNDAuNzk5OSA0My44NjQzTDM3Ljk3MTQgNDcuNjM1N0MzNy43MTQyIDQ3Ljg5MjkgMzcuMjg1NyA0Ny44OTI5IDM3LjExNDIgNDcuNjM1N0wzMy44NTcxIDQyLjIzNTdDMzMuNjg1NyA0MS45Nzg2IDMzLjc3MTQgNDEuNzIxNCAzNC4wMjg1IDQxLjU1TDQyLjA4NTcgMzcuMDA3MUM0Mi4zNDI4IDM2LjgzNTcgNDIuNTk5OSAzNi45MjE0IDQyLjc3MTQgMzcuMTc4NlpNNDIuMDg1NyAxOC40OTI5TDMxLjE5OTkgMTIuMzIxNEMzMC40Mjg1IDExLjg5MjkgMjkuMzk5OSAxMS44OTI5IDI4LjYyODUgMTIuMzIxNEwxNy44Mjg1IDE4LjQwNzFDMTcuMDU3MSAxOC44MzU3IDE2LjU0MjggMTkuNjkyOSAxNi41NDI4IDIwLjU1VjMyLjgwNzFDMTYuNTQyOCAzMy42NjQzIDE3LjA1NzEgMzQuNTIxNCAxNy44Mjg1IDM0Ljk1TDI4LjcxNDIgNDEuMTIxNEMyOS40ODU3IDQxLjU1IDMwLjUxNDIgNDEuNTUgMzEuMjg1NyA0MS4xMjE0TDQyLjA4NTcgMzUuMTIxNEM0Mi44NTcxIDM0LjY5MjkgNDMuMzcxNCAzMy44MzU3IDQzLjM3MTQgMzIuOTc4NlYyMC43MjE0QzQzLjM3MTQgMTkuNzc4NiA0Mi44NTcxIDE4LjkyMTQgNDIuMDg1NyAxOC40OTI5Wk0zNi45NDI4IDIzLjcyMTRMMzAuNTk5OSAzMi44OTI5QzMwLjQyODUgMzMuMTUgMzAuMDg1NyAzMy4zMjE0IDI5Ljc0MjggMzMuMzIxNEMyOS4zOTk5IDMzLjMyMTQgMjkuMDU3MSAzMy4xNSAyOC44ODU3IDMyLjg5MjlMMjIuNzk5OSAyMy43MjE0QzIyLjQ1NzEgMjMuMjkyOSAyMi42Mjg1IDIyLjYwNzEgMjMuMDU3MSAyMi4zNUMyMy40ODU3IDIyLjA5MjkgMjQuMTcxNCAyMi4xNzg2IDI0LjQyODUgMjIuNjA3MUwyOS42NTcxIDMwLjQ5MjlMMzUuMTQyOCAyMi41MjE0QzM1LjQ4NTcgMjIuMDkyOSAzNi4wODU3IDIxLjkyMTQgMzYuNTE0MiAyMi4yNjQzQzM3LjE5OTkgMjIuNjkyOSAzNy4yODU3IDIzLjI5MjkgMzYuOTQyOCAyMy43MjE0WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg=="), linear-gradient(100deg, #f4e2ce -67.2%, #debb9b 98.15%);
   background-repeat: no-repeat;
   border-radius: 15px;
   background-size: 30px;
@@ -531,7 +531,7 @@ page {
 }
 .second-balance .positions .position .amount {
   flex-grow: 0;
-  color: #9E7B5A;
+  color: #9e7b5a;
   font-size: 14px;
   font-weight: 700;
 }
@@ -544,14 +544,14 @@ page {
   background-repeat: no-repeat;
 }
 .account-view .page-header {
-  background-color: #3B393C;
+  background-color: #3b393c;
   position: sticky;
   top: 0;
   z-index: 1;
   transition: background-color 0.3s;
 }
 .account-view .page-header.with-background {
-  background-color: #3B393C;
+  background-color: #3b393c;
 }
 .account-view.popupOpen {
   height: 100vh;
@@ -578,7 +578,7 @@ page {
   display: inline-block;
   padding: 0 10px;
   line-height: 22px;
-  color: #E7CAAD;
+  color: #e7caad;
   font-size: 12px;
 }
 .account-view .small-bean-button label {
@@ -590,7 +590,7 @@ page {
 }
 .account-view .balance {
   border-radius: 15px;
-  background: linear-gradient(105deg, #F4E2CE 1.88%, #DEBB9B 98.18%);
+  background: linear-gradient(105deg, #f4e2ce 1.88%, #debb9b 98.18%);
   box-shadow: 0px -10px 9px -3px rgba(0, 0, 0, 0.33);
   height: 112px;
   padding: 20px;
@@ -805,4 +805,87 @@ page {
 .balance-reminder .footer .recharge-button {
   color: #fff;
   background: var(--primary-button-background);
+}
+.ocr-id__img {
+  width: 20px;
+  height: 20px;
+}
+.dd-area {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+.dd-area-value {
+  text-align: right;
+  color: black;
+}
+.dd-area-label {
+  color: var(--placeholder-color);
+}
+.dd-selector {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+.dd-selector-value {
+  text-align: right;
+  color: black;
+}
+.dd-selector-label {
+  color: var(--placeholder-color);
+}
+.self-registration {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.self-registration-body {
+  flex: 1;
+  padding: 12px;
+  overflow: auto;
+}
+.self-registration-banner {
+  width: 100%;
+  height: 170px;
+}
+.self-registration .nut-cell-group__warp {
+  border-radius: 5px;
+  margin: 12px 0 0;
+}
+.self-registration__input {
+  display: flex;
+  align-items: center;
+}
+.self-registration-bottom {
+  background-color: white;
+  padding-bottom: var(--safe-bottom-height);
+}
+.self-registration .experience-button {
+  margin: 7.5px 12px;
+  border-radius: 5px;
+  width: calc(100% - 24px);
+}
+.self-registration .nut-input-text {
+  text-align: right !important;
+}
+.self-registration .nut-form-item__label.required::before {
+  display: none;
+}
+.self-registration .nut-form-item__label.required::after {
+  content: "*";
+  color: #fa2c19;
+  margin-right: 4px;
+}
+.self-registration .nut-form-item__label {
+  width: unset;
+}
+.self-registration .input-placeholder {
+  color: #cccccc;
+}
+.self-registration .nut-radio__icon {
+  font-size: 16px;
+}
+.self-registration .nut-radio__icon--unchecked {
+  font-size: 16px;
 }