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

package/package.json

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

package/src/api/base/v1/account.ts

@@ -0,0 +1,38 @@
+import { http } from '../../../utils/http'
+import type {
+  AccountService,
+  CurrentPasswordPolicy,
+  GetCurrentPasswordPolicyRequest,
+  UpdateUserPasswordRequest,
+} from '../../../rpc/base/v1/account'
+import type { Empty } from '../../../rpc/google/protobuf/empty'
+
+const ACCOUNT_URL = '/v1/base/account'
+
+/** 账户安全公共服务。 */
+export class AccountServiceImpl implements AccountService {
+  /** 获取当前用户生效的密码策略。 */
+  GetCurrentPasswordPolicy(
+    request: GetCurrentPasswordPolicyRequest,
+  ): Promise<CurrentPasswordPolicy> {
+    return http<CurrentPasswordPolicy>({
+      url: `${ACCOUNT_URL}/password-policy`,
+      method: 'GET',
+      authMode: 'required',
+      data: request,
+    })
+  }
+
+  /** 修改当前用户密码。 */
+  UpdateUserPassword(request: UpdateUserPasswordRequest): Promise<Empty> {
+    return http<Empty>({
+      url: `${ACCOUNT_URL}/password`,
+      method: 'PUT',
+      authMode: 'required',
+      data: request.user_password,
+    })
+  }
+}
+
+/** 当前用户账户安全公共服务实例。 */
+export const defAccountService = new AccountServiceImpl()

package/src/components/KratosNavBar.scss

@@ -23,9 +23,9 @@
   max-width: calc(100% - 190px);
   overflow: hidden;
   color: var(--kratos-color-text);
-  font-size: 16PX;
+  font-size: 32px;
   font-weight: 700;
-  line-height: 22PX;
+  line-height: 44px;
   text-overflow: ellipsis;
   white-space: nowrap;
   transform: translate(-50%, -50%);

package/src/components/KratosTabBar.scss

@@ -3,19 +3,17 @@
   --kratos-tab-bar-active-color: var(--kratos-color-primary, #28f0d4);
 
   position: fixed;
-  right: 20px;
-  bottom: env(safe-area-inset-bottom);
-  left: 20px;
+  right: 0;
+  bottom: 0;
+  left: 0;
   z-index: 999;
   box-sizing: border-box;
   display: flex;
-  height: 104px;
+  height: var(--kratos-tab-bar-space, calc(104px + env(safe-area-inset-bottom)));
   padding: 0 8px;
-  border: 1PX solid var(--kratos-color-border-accent, rgba(120, 230, 215, 0.16));
-  border-radius: 30px;
-  background: var(--kratos-dock-bg, rgba(10, 18, 30, 0.72));
-  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
-  backdrop-filter: blur(32px);
+  border-top: 1px solid var(--kratos-color-border-accent, rgba(120, 230, 215, 0.16));
+  background: var(--kratos-color-surface-solid, #070d18);
+  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12);
 }
 
 .kratos-tab-bar__item {
@@ -25,50 +23,52 @@
   align-items: center;
   justify-content: center;
   flex-direction: column;
+  height: 104px;
+  padding: 10px 0 8px;
   color: var(--kratos-tab-bar-color);
-  font-size: 10PX;
-  line-height: 12PX;
+  font-size: 20px;
+  line-height: 28px;
 }
 
 .kratos-tab-bar__icon {
   flex-shrink: 0;
-  width: 28PX;
-  height: 28PX;
-  margin-bottom: 4PX;
+  width: 44px;
+  height: 44px;
+  margin-bottom: 4px;
 }
 
 .kratos-tab-bar__message-icon {
   position: relative;
-  width: 22PX;
-  height: 18PX;
-  margin-bottom: 6PX;
-  border: 2PX solid var(--kratos-tab-bar-color);
-  border-radius: 6PX;
+  width: 36px;
+  height: 30px;
+  margin-bottom: 8px;
+  border: 2px solid var(--kratos-tab-bar-color);
+  border-radius: 8px;
   box-sizing: border-box;
 }
 .kratos-tab-bar__message-icon::before {
   position: absolute;
-  top: 5PX;
-  left: 4PX;
-  width: 3PX;
-  height: 3PX;
+  top: 8px;
+  left: 7px;
+  width: 4px;
+  height: 4px;
   border-radius: 50%;
   background: var(--kratos-tab-bar-color);
   box-shadow:
-    5PX 0 var(--kratos-tab-bar-color),
-    10PX 0 var(--kratos-tab-bar-color);
+    8px 0 var(--kratos-tab-bar-color),
+    16px 0 var(--kratos-tab-bar-color);
   content: '';
 }
 
 .kratos-tab-bar__message-icon::after {
   position: absolute;
-  bottom: -5PX;
-  left: 3PX;
-  width: 7PX;
-  height: 7PX;
-  border-right: 2PX solid var(--kratos-tab-bar-color);
-  border-bottom: 2PX solid var(--kratos-tab-bar-color);
-  background: var(--kratos-dock-bg, rgba(10, 18, 30, 0.72));
+  bottom: -8px;
+  left: 5px;
+  width: 10px;
+  height: 10px;
+  border-right: 2px solid var(--kratos-tab-bar-color);
+  border-bottom: 2px solid var(--kratos-tab-bar-color);
+  background: var(--kratos-color-surface-solid, #070d18);
   content: '';
   transform: rotate(45deg);
 }
@@ -80,8 +80,8 @@
 .kratos-tab-bar__message-icon--active::before {
   background: var(--kratos-tab-bar-active-color);
   box-shadow:
-    5PX 0 var(--kratos-tab-bar-active-color),
-    10PX 0 var(--kratos-tab-bar-active-color);
+    8px 0 var(--kratos-tab-bar-active-color),
+    16px 0 var(--kratos-tab-bar-active-color);
 }
 
 .kratos-tab-bar__message-icon--active::after {
@@ -91,18 +91,24 @@
 .kratos-tab-bar__text--active {
   color: var(--kratos-tab-bar-active-color);
   font-weight: 700;
-  text-shadow: 0 0 12px currentColor;
+}
+
+.kratos-tab-bar__text {
+  display: block;
+  min-height: 28px;
+  text-align: center;
+  white-space: nowrap;
 }
 
 .kratos-tab-bar__badge {
   position: absolute;
   top: 0;
-  right: calc(50% - 19PX);
-  width: 10PX;
-  height: 10PX;
+  right: calc(50% - 30px);
+  width: 16px;
+  height: 16px;
   box-sizing: border-box;
-  border: 2PX solid var(--kratos-dock-bg, rgba(10, 18, 30, 0.72));
-  border-radius: 50%;
+  border: 2px solid var(--kratos-color-surface-solid, #070d18);
+  border-radius: 18px;
   background: var(--kratos-color-danger, #ff4d6d);
   box-shadow: 0 0 12px var(--kratos-color-danger, #ff4d6d);
 }

package/src/components/KratosTabBar.tsx

@@ -67,7 +67,9 @@ export function KratosTabBar({ route }: KratosTabBarProps) {
             {item.viewKey === 'MESSAGE_INBOX' && messageBadge ? (
               <View className='kratos-tab-bar__badge' aria-hidden='true' />
             ) : null}
-            <Text className={active ? 'kratos-tab-bar__text--active' : ''}>{item.title}</Text>
+            <Text className={`kratos-tab-bar__text${active ? ' kratos-tab-bar__text--active' : ''}`}>
+              {item.title}
+            </Text>
           </View>
         )
       })}

package/src/rpc/base/v1/account.ts

@@ -0,0 +1,49 @@
+// Code generated by protoc-gen-ts_proto. DO NOT EDIT.
+// versions:
+//   protoc-gen-ts_proto  v2.12.1
+//   protoc               unknown
+// source: base/v1/account.proto
+
+/* eslint-disable */
+import type { SecretCrypto } from "../../common/v1/types";
+import type { Empty } from "../../google/protobuf/empty";
+
+/** 获取当前用户密码策略请求参数。 */
+export interface GetCurrentPasswordPolicyRequest {
+}
+
+/** 当前用户生效的密码策略。 */
+export interface CurrentPasswordPolicy {
+  /** 密码最小长度 */
+  min_length: number;
+  /** 密码至少满足的字符类别数量 */
+  min_complexity_classes: number;
+  /** 禁止重复使用的历史密码数量 */
+  history_count: number;
+  /** 密码有效期天数 */
+  max_age_days: number;
+}
+
+/** 更新当前用户密码请求参数。 */
+export interface UpdateUserPasswordRequest {
+  /** 当前用户密码 */
+  user_password: UserPasswordForm | undefined;
+}
+
+/** 当前用户密码表单。 */
+export interface UserPasswordForm {
+  /** 原密码 */
+  old_pwd:
+    | SecretCrypto
+    | undefined;
+  /** 新密码 */
+  new_pwd: SecretCrypto | undefined;
+}
+
+/** Base 账户安全服务。 */
+export interface AccountService {
+  /** 获取当前用户生效的密码策略。 */
+  GetCurrentPasswordPolicy(request: GetCurrentPasswordPolicyRequest): Promise<CurrentPasswordPolicy>;
+  /** 修改当前用户密码。 */
+  UpdateUserPassword(request: UpdateUserPasswordRequest): Promise<Empty>;
+}

package/src/styles/base.scss

@@ -75,6 +75,57 @@ html.theme-dark page {
  * 取不到页面根类，用 theme store 镜像到 html 上的主题类着色。
  * ============================================================ */
 /* #ifdef h5 */
+html .taro-modal__content {
+  box-sizing: border-box;
+  background: var(--kratos-color-surface-solid, #ffffff) !important;
+  color: var(--kratos-color-text, #102232) !important;
+  font-family: var(--kratos-font-sans, sans-serif);
+}
+
+html .taro-modal__content * {
+  box-sizing: border-box;
+}
+
+html .taro-modal__title {
+  padding: 16PX 24PX 8PX !important;
+  color: var(--kratos-color-text, #102232) !important;
+  font-size: 18PX !important;
+  line-height: 25PX !important;
+}
+
+html .taro-modal__text {
+  min-height: 40PX !important;
+  padding: 8PX 24PX 16PX !important;
+  color: var(--kratos-color-text-muted, #5a7083) !important;
+  font-size: 15PX !important;
+  line-height: 21PX !important;
+}
+
+html .taro-modal__foot {
+  font-size: 18PX !important;
+  line-height: 48PX !important;
+}
+
+html .taro-modal__foot::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  height: 1PX;
+  border-top: 1PX solid var(--kratos-color-border, #e3eaf2);
+  content: '';
+  transform: scaleY(0.5);
+  transform-origin: 0 0;
+}
+
+html .taro-model__confirm {
+  color: var(--kratos-color-primary, #039e8c) !important;
+}
+
+html .taro-model__cancel {
+  color: var(--kratos-color-text-muted, #5a7083) !important;
+}
+
 html.theme-dark .taro-modal__mask {
   background: var(--kratos-color-mask) !important;
 }

package/src/styles/components.scss

@@ -526,11 +526,10 @@
  * ============================================================ */
 .k-set-cat {
   margin: 32px 4px 20px;
-  font-size: 21px;
-  letter-spacing: 2px;
-  color: var(--kratos-color-text-dim);
-  font-family: var(--kratos-font-mono);
-  text-transform: uppercase;
+  color: var(--kratos-color-text-muted);
+  font-size: 26px;
+  font-family: var(--kratos-font-sans);
+  font-weight: 700;
 }
 .k-set-row {
   display: flex;

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

@@ -8,7 +8,7 @@ page {
   flex-direction: column;
   justify-content: center;
   min-height: 100vh;
-  padding: 48px 40px calc(56px + env(safe-area-inset-bottom));
+  padding: 48px 20px calc(56px + env(safe-area-inset-bottom));
   background: var(--kratos-bg-gradient);
   box-sizing: border-box;
 }
@@ -24,7 +24,7 @@ page {
   align-items: center;
   justify-content: space-between;
   height: 44PX;
-  padding: env(safe-area-inset-top) 28px 0;
+  padding: env(safe-area-inset-top) 20px 0;
   box-sizing: content-box;
 }