@liujitcn/kratos-taro-app-system 0.0.78 → 0.0.80

package/src/views/pagesMember/profile/profile.scss

@@ -1,135 +1,79 @@
 .profile-viewport {
-  display: flex;
-  flex-direction: column;
   min-height: 100vh;
-  background-color: #f4f4f4;
-  background-size: auto 420px;
-  background-repeat: no-repeat;
+  background: var(--kratos-bg-gradient);
+  color: var(--kratos-color-text);
 }
 
-.profile-navbar {
-  position: relative;
+/* k-page-nav 自带安全区顶部内边距，这里只补水平与底部 */
+.profile-content {
+  padding: 0 32px calc(40px + env(safe-area-inset-bottom));
 }
 
-.profile-navbar__title {
-  display: flex;
-  height: 40PX;
-  align-items: center;
-  justify-content: center;
-  color: #fff;
-  font-size: 16PX;
-  font-weight: 500;
+/* 头像卡 */
+.profile-id {
+  margin-top: 8px;
+  padding: 36px 30px;
 }
 
-.profile-back {
-  position: absolute;
-  left: 0;
-  bottom: 0;
+.profile-id__main {
   display: flex;
-  width: 40PX;
-  height: 40PX;
   align-items: center;
-  justify-content: center;
-  color: #fff;
-  font-size: 30PX;
+  gap: 24px;
+  min-width: 0;
 }
 
-.profile-avatar {
-  display: flex;
-  width: 100%;
-  height: 260px;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
+.profile-id__meta {
+  min-width: 0;
 }
 
-.profile-avatar__image {
-  width: 160px;
-  height: 160px;
-  border-radius: 50%;
-  background-color: #eee;
-}
-
-.profile-avatar__text {
-  display: block;
-  padding-top: 20px;
-  color: #fff;
-  font-size: 26px;
-  line-height: 1;
+.profile-av-img {
+  width: 100%;
+  height: 100%;
+  border-radius: 22px;
 }
 
+/* 表单卡 */
 .profile-form {
-  background-color: #f4f4f4;
+  margin-top: 24px;
+  padding: 10px 28px 28px;
 }
 
-.profile-form__content {
-  padding: 0 20px;
-  margin: 20px 20px 0;
-  border-radius: 10px;
-  background-color: #fff;
-}
-
-.profile-form__item {
-  display: flex;
-  height: 96px;
-  padding: 25px 10px;
-  border-bottom: 1px solid #ddd;
-  background-color: #fff;
-  color: #333;
-  font-size: 28px;
-  line-height: 46px;
-
-  &:last-child {
-    border: 0;
-  }
-}
-
-.profile-label {
-  width: 180px;
-  color: #333;
-}
-
-.profile-account {
-  color: #666;
-}
-
-.profile-placeholder {
-  color: #808080;
+/* 子项字段包在 Picker 中会命中 :first-child，恢复分隔线 */
+.profile-field--sub {
+  border-top: 1PX solid var(--kratos-color-border);
 }
 
 .profile-input {
-  display: block;
   flex: 1;
-  height: 46px;
+  min-height: 46px;
 }
 
-.profile-radio {
-  margin-right: 20px;
+.profile-radios {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 24px;
 }
 
-.profile-form__button {
-  height: 80px;
-  margin: 30px 20px;
-  border-radius: 80px;
-  color: #fff;
-  font-size: 30px;
-  line-height: 80px;
-  text-align: center;
-  background-color: #27ba9b;
+.profile-radio {
+  display: flex;
+  align-items: center;
+  color: var(--kratos-color-text);
+  font-size: 25px;
 }
 
 .profile-auth-button {
   height: 60px;
-  padding: 0 20px;
   margin: 0;
-  border: 1px solid #27ba9b;
-  border-radius: 30px;
-  color: #27ba9b;
-  font-size: 26px;
-  line-height: 60px;
-  background: none;
+  padding: 0 24px;
+  border: 1PX solid var(--kratos-color-border-accent);
+  border-radius: 999px;
+  background: var(--kratos-color-primary-soft);
+  color: var(--kratos-color-primary);
+  font-size: 24px;
+  line-height: 58px;
 
   &::after {
-    border: 0;
+    border: none;
   }
 }

package/src/views/pagesMember/profile/profile.tsx

@@ -12,7 +12,6 @@ import {
 import Taro, { useLoad } from '@tarojs/taro'
 import { useEffect, useRef, useState } from 'react'
 import defaultAvatar from '@liujitcn/kratos-taro-app-core/static/images/avatar.png'
-import navigatorBackground from '@liujitcn/kratos-taro-app-core/static/images/navigator_bg.png'
 import { defAuthService } from '@liujitcn/kratos-taro-app-core/api/system/app/v1/auth'
 import { defBaseDictService } from '@liujitcn/kratos-taro-app-core/api/system/app/v1/base_dict'
 import type { BaseDictForm_DictItem } from '@liujitcn/kratos-taro-app-core/rpc/system/app/v1/base_dict'
@@ -23,6 +22,7 @@ import {
   navigateToLogin,
   uploadFile,
   useI18n,
+  useThemeStore,
   useUserStore,
 } from '@liujitcn/kratos-taro-app-core'
 import './profile.scss'
@@ -33,7 +33,8 @@ const ID_CODE_PATTERN = /^[A-Za-z0-9][A-Za-z0-9-]{0,63}$/
 
 /** 用户个人资料编辑页。 */
 export default function ProfilePage() {
-  const { locale, t } = useI18n()
+  const { t } = useI18n()
+  const themeStore = useThemeStore()
   const [userInfo, setUserInfo] = useState<UserProfileForm>({
     user_name: '',
     nick_name: '',
@@ -48,7 +49,6 @@ export default function ProfilePage() {
   const submittingRef = useRef(false)
   const navigateBackTimerRef = useRef<ReturnType<typeof setTimeout>>()
   const ensureAuthenticated = useUserStore((state) => state.ensureAuthenticated)
-  const safeTop = Taro.getWindowInfo().safeArea?.top || 0
   const idTypeOptions = [
     { label: t('system.profile.id_type.unspecified'), value: BaseUserIDType.BASE_USER_ID_TYPE_UNSPECIFIED },
     { label: t('system.profile.id_type.id_card'), value: BaseUserIDType.BASE_USER_ID_TYPE_ID_CARD },
@@ -63,10 +63,6 @@ export default function ProfilePage() {
   ]
   const idTypeIndex = Math.max(0, idTypeOptions.findIndex((item) => item.value === userInfo.id_type))
 
-  useEffect(() => {
-    void Taro.setNavigationBarTitle({ title: t('system.profile.title') })
-  }, [locale, t])
-
   useEffect(() => {
     return () => {
       if (navigateBackTimerRef.current) clearTimeout(navigateBackTimerRef.current)
@@ -153,44 +149,63 @@ export default function ProfilePage() {
   }
 
   return (
-    <View className='profile-viewport' style={{ backgroundImage: `url(${navigatorBackground})` }}>
-      <View className='profile-navbar' style={{ paddingTop: `${safeTop}px` }}>
-        <View className='profile-back' onClick={() => void Taro.navigateBack()}>‹</View>
-        <View className='profile-navbar__title'>{t('system.profile.title')}</View>
-      </View>
-      <View className='profile-avatar'>
-        <View className='profile-avatar__content' onClick={() => void onAvatarChange()}>
-          <Image className='profile-avatar__image' src={userInfo.avatar ? formatSrc(userInfo.avatar) : defaultAvatar} mode='aspectFill' />
-          <Text className='profile-avatar__text'>{t('system.profile.avatar_change')}</Text>
+    <View
+      className={`profile-viewport ${themeStore.theme === 'light' ? 'theme-light' : 'theme-dark'}`}
+    >
+      <View className='profile-content'>
+        <View className={`k-page-nav ${process.env.TARO_ENV === 'weapp' ? 'k-page-nav--weapp' : ''}`}>
+          <View
+            className='k-page-nav__back'
+            aria-label={t('common.action.back')}
+            onClick={() => void Taro.navigateBack()}
+          />
+          <View className='k-page-nav__title'>{t('system.profile.title')}</View>
+          <View className='k-page-nav__side' aria-hidden />
         </View>
-      </View>
-      <View className='profile-form'>
-        <View className='profile-form__content'>
+
+        <View className='k-glass k-glass--lit k-pfx profile-id' onClick={() => void onAvatarChange()}>
+          <View className='k-cnr k-cnr--tl' aria-hidden />
+          <View className='k-cnr k-cnr--br' aria-hidden />
+          <View className='profile-id__main'>
+            <View className='k-pfx__av'>
+              <Image className='profile-av-img' src={userInfo.avatar ? formatSrc(userInfo.avatar) : defaultAvatar} mode='aspectFill' />
+            </View>
+            <View className='profile-id__meta'>
+              <View className='k-pfx__nm'>{userInfo.nick_name || t('system.profile.title')}</View>
+              <View className='k-pfx__ac'>{userInfo.user_name}</View>
+            </View>
+          </View>
+          <View className='k-pfx__ent'>{t('system.profile.avatar_change')}</View>
+        </View>
+
+        <View className='k-glass profile-form'>
+          <View className='k-phd'>
+            <View className='k-phd__title'>{t('system.profile.title')}</View>
+          </View>
+
           {userInfo.user_name ? (
-            <View className='profile-form__item'>
-              <Text className='profile-label'>{t('system.profile.account')}</Text>
-              <Text className='profile-account profile-placeholder'>{userInfo.user_name}</Text>
+            <View className='k-field'>
+              <Text className='k-field__k'>{t('system.profile.account')}</Text>
+              <Text className='k-field__v'>{userInfo.user_name}</Text>
             </View>
           ) : null}
           {process.env.TARO_ENV === 'weapp' ? (
-            <View className='profile-form__item'>
-              <Text className='profile-label'>{t('system.profile.mobile')}</Text>
-              <View className='profile-input'>
-                {userInfo.phone ? (
-                  <Text className='profile-account'>{userInfo.phone}</Text>
-                ) : (
-                  <Button className='profile-auth-button' openType='getPhoneNumber' onGetPhoneNumber={onGetPhoneNumber}>{t('system.profile.phone_authorization')}</Button>
-                )}
-              </View>
+            <View className='k-field'>
+              <Text className='k-field__k'>{t('system.profile.mobile')}</Text>
+              {userInfo.phone ? (
+                <Text className='k-field__v'>{userInfo.phone}</Text>
+              ) : (
+                <Button className='profile-auth-button' openType='getPhoneNumber' onGetPhoneNumber={onGetPhoneNumber}>{t('system.profile.phone_authorization')}</Button>
+              )}
             </View>
           ) : null}
-          <View className='profile-form__item'>
-            <Text className='profile-label'>{t('system.profile.nick_name')}</Text>
-            <Input className='profile-input' placeholder={t('system.profile.nick_name_placeholder')} value={userInfo.nick_name} onInput={(event) => setUserInfo((current) => ({ ...current, nick_name: event.detail.value }))} />
+          <View className='k-field'>
+            <Text className='k-field__k'>{t('system.profile.nick_name')}</Text>
+            <Input className='k-field__v profile-input' placeholder={t('system.profile.nick_name_placeholder')} value={userInfo.nick_name} onInput={(event) => setUserInfo((current) => ({ ...current, nick_name: event.detail.value }))} />
           </View>
-          <View className='profile-form__item'>
-            <Text className='profile-label'>{t('system.profile.email')}</Text>
-            <Input className='profile-input' type='text' placeholder={t('system.profile.email_placeholder')} value={userInfo.email} onInput={(event) => setUserInfo((current) => ({ ...current, email: event.detail.value }))} />
+          <View className='k-field'>
+            <Text className='k-field__k'>{t('system.profile.email')}</Text>
+            <Input className='k-field__v profile-input' type='text' placeholder={t('system.profile.email_placeholder')} value={userInfo.email} onInput={(event) => setUserInfo((current) => ({ ...current, email: event.detail.value }))} />
           </View>
           <Picker
             mode='selector'
@@ -198,28 +213,33 @@ export default function ProfilePage() {
             value={idTypeIndex}
             onChange={(event) => setUserInfo((current) => ({ ...current, id_type: idTypeOptions[Number(event.detail.value)]?.value ?? BaseUserIDType.BASE_USER_ID_TYPE_UNSPECIFIED }))}
           >
-            <View className='profile-form__item'>
-              <Text className='profile-label'>{t('system.profile.id_type')}</Text>
-              <Text className='profile-input profile-account'>{idTypeOptions[idTypeIndex]?.label}</Text>
+            <View className='k-field profile-field--sub'>
+              <Text className='k-field__k'>{t('system.profile.id_type')}</Text>
+              <Text className='k-field__v'>{idTypeOptions[idTypeIndex]?.label}</Text>
             </View>
           </Picker>
-          <View className='profile-form__item'>
-            <Text className='profile-label'>{t('system.profile.id_code')}</Text>
-            <Input className='profile-input' type='text' placeholder={t('system.profile.id_code_placeholder')} value={userInfo.id_code} onInput={(event) => setUserInfo((current) => ({ ...current, id_code: event.detail.value }))} />
+          <View className='k-field'>
+            <Text className='k-field__k'>{t('system.profile.id_code')}</Text>
+            <Input className='k-field__v profile-input' type='text' placeholder={t('system.profile.id_code_placeholder')} value={userInfo.id_code} onInput={(event) => setUserInfo((current) => ({ ...current, id_code: event.detail.value }))} />
           </View>
-          <View className='profile-form__item'>
-            <Text className='profile-label'>{t('system.profile.gender')}</Text>
-            <RadioGroup onChange={(event) => setUserInfo((current) => ({ ...current, gender: Number(event.detail.value) }))}>
+          <View className='k-field'>
+            <Text className='k-field__k'>{t('system.profile.gender')}</Text>
+            <RadioGroup className='profile-radios' onChange={(event) => setUserInfo((current) => ({ ...current, gender: Number(event.detail.value) }))}>
               {genderList.map((item) => (
                 <Label className='profile-radio' key={item.value}>
-                  <Radio value={item.value} color='#27ba9b' checked={userInfo.gender === Number(item.value)} />
+                  <Radio
+                    value={item.value}
+                    color={themeStore.theme === 'light' ? '#039e8c' : '#28f0d4'}
+                    checked={userInfo.gender === Number(item.value)}
+                  />
                   {item.label}
                 </Label>
               ))}
             </RadioGroup>
           </View>
+
+          <Button className='k-save' onClick={() => void onSubmit()}>{t('common.action.save')}</Button>
         </View>
-        <Button className='profile-form__button' onClick={() => void onSubmit()}>{t('common.action.save')}</Button>
       </View>
     </View>
   )

package/src/views/pagesMember/settings/components/PasswordVerifyDialog.scss

@@ -17,7 +17,7 @@
   max-width: 680px;
   overflow: hidden;
   border-radius: 16px;
-  background-color: #fff;
+  background-color: var(--kratos-color-surface-solid);
   box-shadow: 0 20px 64px rgba(0, 0, 0, 0.2);
 }
 
@@ -26,18 +26,18 @@
   align-items: center;
   justify-content: space-between;
   padding: 28px 32px;
-  border-bottom: 1px solid #eee;
+  border-bottom: 1PX solid var(--kratos-color-border);
 }
 
 .mfa-bind-dialog__title {
-  color: #222;
+  color: var(--kratos-color-text);
   font-size: 34px;
   font-weight: 600;
 }
 
 .mfa-bind-dialog__close {
   padding: 0 8px;
-  color: #999;
+  color: var(--kratos-color-text-muted);
   font-size: 42px;
   line-height: 1;
 }
@@ -53,16 +53,17 @@
 .mfa-bind-dialog__label {
   display: block;
   margin-bottom: 12px;
-  color: #333;
+  color: var(--kratos-color-text);
   font-size: 28px;
 }
 
 .mfa-bind-dialog__input {
   width: 100%;
   padding: 20px 24px;
-  color: #222;
+  color: var(--kratos-color-text);
   font-size: 30px;
-  border: 1px solid #ddd;
+  border: 1PX solid var(--kratos-color-border);
+  background-color: var(--kratos-color-surface-2);
   border-radius: 8px;
   box-sizing: border-box;
 }
@@ -83,7 +84,7 @@
 }
 
 .mfa-bind-dialog__error {
-  color: #e64340;
+  color: var(--kratos-color-danger);
 }
 
 .mfa-bind-dialog__footer {
@@ -105,17 +106,17 @@
 }
 
 .mfa-bind-dialog__button--cancel {
-  color: #555;
-  background-color: #f3f3f3;
+  color: var(--kratos-color-text-muted);
+  background-color: var(--kratos-color-track);
 }
 
 .mfa-bind-dialog__button--confirm {
-  color: #fff;
-  background-color: #27ba9b;
+  color: var(--kratos-color-on-primary);
+  background-color: var(--kratos-color-primary);
 }
 
 .mfa-bind-dialog__button--danger {
-  background-color: #e64340;
+  background-color: var(--kratos-color-danger);
 }
 
 .mfa-bind-dialog__button[disabled] {

package/src/views/pagesMember/settings/settings.scss

@@ -1,82 +1,41 @@
-.settings-viewport {
-  min-height: 100vh;
-  padding: 20px;
-  background-color: #f4f4f4;
-}
-
-.settings-list {
-  padding: 0 20px;
-  margin-bottom: 20px;
-  border-radius: 10px;
-  background-color: #fff;
-}
-
-.settings-item {
-  position: relative;
-  padding-left: 10px;
-  border-top: 1px solid #ddd;
-  border-radius: 0;
-  color: #333;
-  font-size: 30px;
-  line-height: 90px;
-  text-align: left;
-  background-color: #fff;
-
-  &:first-child {
-    border: 0;
-  }
-
-  &::after {
-    border: 0;
-  }
-}
-
-.settings-arrow::before {
-  content: '›';
-  position: absolute;
-  top: 50%;
-  right: 5px;
-  color: #ccc;
-  font-size: 36px;
-  transform: translateY(-50%);
-}
-
-.settings-action {
-  margin-top: 40px;
-  color: #333;
-  font-size: 32px;
-  line-height: 90px;
-  text-align: center;
+page {
+  min-height: 100%;
+  background-color: #eef3f8;
 }
 
-.settings-locale {
-  display: flex;
-  justify-content: space-between;
-  padding-right: 42px;
+.settings-viewport {
+  min-height: 100vh;
+  box-sizing: border-box;
+  padding: 0 32px calc(40px + env(safe-area-inset-bottom));
+  background: var(--kratos-bg-gradient);
 }
 
-.settings-locale__value {
-  color: #888;
+.settings-content {
+  padding-bottom: 20px;
 }
 
-.settings-mfa {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding-right: 42px;
+/* 行图标图片尺寸（挂在 .k-set-row__icon 内的 Image 上） */
+.settings-row__icon {
+  width: 38px;
+  height: 38px;
 }
 
-.settings-mfa__value {
-  max-width: 55%;
+/* 行尾值文本截断（配合全局 .k-set-row__value 使用） */
+.settings-row__value {
+  min-width: 0;
+  max-width: 45%;
   overflow: hidden;
-  color: #888;
-  font-size: 26px;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.settings-button {
-  margin-bottom: 20px;
-  border-radius: 10px;
-  background-color: #fff;
+/* 小程序 Button 皮肤为 .k-set-row：去掉原生边框，保留箭头 ::after */
+.settings-row--button {
+  line-height: normal;
+
+  &::after {
+    position: static;
+    border-left: 0;
+    border-bottom: 0;
+  }
 }