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

package/src/views/pages/login/login.tsx

@@ -6,9 +6,9 @@ import { defLoginService } from '../../../api/base/v1/login'
 import { defMfaService } from '../../../api/base/v1/mfa'
 import { navigateAppRoute } from '../../../navigation'
 import { LoginStatus, type LoginRequest, type LoginResponse } from '../../../rpc/base/v1/login'
-import { useSettingStore, useUserStore } from '../../../stores'
+import { useSettingStore, useThemeStore, useUserStore } from '../../../stores'
 import { formatSrc } from '../../../utils'
-import { restoreLoginRedirect } from '../../../utils/navigation'
+import { homeTabPage, restoreLoginRedirect } from '../../../utils/navigation'
 import { encryptPassword } from '../../../utils/secretCrypto'
 import { createWebAuthnCredential, getWebAuthnAssertion } from '../../../utils/webauthn'
 import MfaRecoveryCodesDialog from '../../../components/MfaRecoveryCodesDialog'
@@ -21,6 +21,12 @@ import { t as translate, useLocaleStore, useI18n, type SupportedLocale } from '.
 const behaviorCaptchaTypes = new Set(['slide', 'click', 'rotate'])
 const wechatMiniProvider = 'wechatmini'
 
+/** 参考管理端 View、Hide 图标视觉的本端 SVG 路径。 */
+const passwordIconPaths = {
+  view: 'M512 160c320 0 512 352 512 352S832 864 512 864 0 512 0 512s192-352 512-352m0 64c-225.28 0-384.128 208.064-436.8 288 52.608 79.872 211.456 288 436.8 288 225.28 0 384.128-208.064 436.8-288-52.608-79.872-211.456-288-436.8-288m0 64a224 224 0 1 1 0 448 224 224 0 0 1 0-448m0 64a160.19 160.19 0 0 0-160 160c0 88.192 71.744 160 160 160s160-71.808 160-160-71.744-160-160-160',
+  hide: 'M876.8 156.8c0-9.6-3.2-16-9.6-22.4s-12.8-9.6-22.4-9.6-16 3.2-22.4 9.6L736 220.8c-64-32-137.6-51.2-224-60.8-160 16-288 73.6-377.6 176S0 496 0 512s48 73.6 134.4 176c22.4 25.6 44.8 48 73.6 67.2l-86.4 89.6c-6.4 6.4-9.6 12.8-9.6 22.4s3.2 16 9.6 22.4 12.8 9.6 22.4 9.6 16-3.2 22.4-9.6l704-710.4c3.2-6.4 6.4-12.8 6.4-22.4m-646.4 528Q115.2 579.2 76.8 512q43.2-72 153.6-172.8C304 272 400 230.4 512 224c64 3.2 124.8 19.2 176 44.8l-54.4 54.4C598.4 300.8 560 288 512 288c-64 0-115.2 22.4-160 64s-64 96-64 160c0 48 12.8 89.6 35.2 124.8L256 707.2c-9.6-6.4-19.2-16-25.6-22.4m140.8-96Q352 555.2 352 512c0-44.8 16-83.2 48-112s67.2-48 112-48c28.8 0 54.4 6.4 73.6 19.2zM889.599 336c-12.8-16-28.8-28.8-41.6-41.6l-48 48c73.6 67.2 124.8 124.8 150.4 169.6q-43.2 72-153.6 172.8c-73.6 67.2-172.8 108.8-284.8 115.2-51.2-3.2-99.2-12.8-140.8-28.8l-48 48c57.6 22.4 118.4 38.4 188.8 44.8 160-16 288-73.6 377.6-176S1024 528 1024 512s-48.001-73.6-134.401-176M511.998 672c-12.8 0-25.6-3.2-38.4-6.4l-51.2 51.2c28.8 12.8 57.6 19.2 89.6 19.2 64 0 115.2-22.4 160-64 41.6-41.6 64-96 64-160 0-32-6.4-64-19.2-89.6l-51.2 51.2c3.2 12.8 6.4 25.6 6.4 38.4 0 44.8-16 83.2-48 112s-67.2 48-112 48',
+} as const
+
 type BehaviorPayload = BehaviorCaptchaData & {
   type?: string
   width?: number
@@ -76,6 +82,14 @@ export default function LoginPage() {
   const { locale, setLocale, t } = useI18n()
   const languageOptions = useLocaleStore((state) => state.languageOptions)
   const settings = useSettingStore((state) => state.data)
+  const themeStore = useThemeStore()
+
+  /** 返回上一页；登录页可能是冷启动首页，无上级页面时回主页。 */
+  const goBack = () => {
+    Taro.navigateBack({
+      fail: () => void Taro.reLaunch({ url: homeTabPage }),
+    })
+  }
   const loadSettings = useSettingStore((state) => state.loadData)
   const userStore = useUserStore.getState()
   const [agreed, setAgreed] = useState(false)
@@ -85,6 +99,7 @@ export default function LoginPage() {
   const settingsPromise = useRef<Promise<boolean>>()
   const [form, setForm] = useState<LoginRequest>(emptyLoginForm)
   const [password, setPassword] = useState('')
+  const [passwordVisible, setPasswordVisible] = useState(false)
   const [captchaImage, setCaptchaImage] = useState('')
   const [captchaType, setCaptchaType] = useState('')
   const [behaviorVisible, setBehaviorVisible] = useState(false)
@@ -95,6 +110,7 @@ export default function LoginPage() {
   const [miniCaptchaImage, setMiniCaptchaImage] = useState('')
   const [miniForm, setMiniForm] = useState(emptyLoginForm)
   const [miniPassword, setMiniPassword] = useState('')
+  const [miniPasswordVisible, setMiniPasswordVisible] = useState(false)
   const [mfaVisible, setMfaVisible] = useState(false)
   const [mfaLoading, setMfaLoading] = useState(false)
   const [mfaChallengeId, setMfaChallengeId] = useState('')
@@ -122,6 +138,13 @@ export default function LoginPage() {
   const configuredLogoUrl = configuredAppLogo ? formatSrc(configuredAppLogo) : defaultLogo
   const [appLogo, setAppLogo] = useState(configuredLogoUrl)
   const showTenantCode = settings?.get('showTenantCode') !== 'false'
+  /** 按管理端 View、Hide 视觉生成本端密码可见性图标。 */
+  const passwordIconSrc = (visible: boolean) => {
+    const color = themeStore.theme === 'light' ? '#5a7083' : '#8aa0b4'
+    const path = visible ? passwordIconPaths.hide : passwordIconPaths.view
+    const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="${color}"><path d="${path}"/></svg>`
+    return `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svg)}`
+  }
   const configuredCaptchaType = settings?.get('captchaType') || ''
   const isBehaviorCaptcha = behaviorCaptchaTypes.has(captchaType)
   const behaviorWidth = Math.round(
@@ -169,10 +192,6 @@ export default function LoginPage() {
     setAppLogo(configuredLogoUrl)
   }, [configuredLogoUrl])
 
-  useEffect(() => {
-    void Taro.setNavigationBarTitle({ title: t('common.action.login') })
-  }, [locale, t])
-
   useEffect(() => {
     return () => {
       if (shakeTimerRef.current) clearTimeout(shakeTimerRef.current)
@@ -288,6 +307,8 @@ export default function LoginPage() {
       content: t('core.login.protocol_prompt'),
       confirmText: t('common.action.confirm'),
       cancelText: t('common.action.cancel'),
+      confirmColor: themeStore.theme === 'light' ? '#039e8c' : '#28f0d4',
+      cancelColor: themeStore.theme === 'light' ? '#5a7083' : '#8aa0b4',
     })
     if (result.confirm) setAgreed(true)
     return result.confirm
@@ -558,11 +579,11 @@ export default function LoginPage() {
 
   const agreement = (
     <View className={`login-tips${shake ? ' login-tips--shake' : ''}`}>
-      <View className='login-agreement' onClick={() => setAgreed((value) => !value)}>
-        <View className={`login-agree-icon${agreed ? ' checked' : ''}`} />
+      <View className='k-lg-agree login-agreement' onClick={() => setAgreed((value) => !value)}>
+        <View className={`k-lg-chk${agreed ? '' : ' k-lg-chk--off'}`}>✓</View>
         <Text className='login-agree-desc'>{t('core.login.agree_prefix')}</Text>
         <Text
-          className='login-agree-link'
+          className='k-lg-link login-agree-link'
           onClick={(event) => {
             event.stopPropagation()
             navigateAppRoute('app/protocol/service')
@@ -572,7 +593,7 @@ export default function LoginPage() {
         </Text>
         <Text className='login-agree-separator'>{t('core.login.agree_separator')}</Text>
         <Text
-          className='login-agree-link'
+          className='k-lg-link login-agree-link'
           onClick={(event) => {
             event.stopPropagation()
             navigateAppRoute('app/protocol/privacy')
@@ -585,78 +606,100 @@ export default function LoginPage() {
   )
 
   return (
-    <View className='login-page'>
-      <Picker
-        className='login-locale'
-        mode='selector'
-        range={languageOptions.map((item) => item.native_name)}
-        value={Math.max(
-          0,
-          languageOptions.findIndex((item) => item.language_code === locale),
-        )}
-        onChange={(event) => {
-          const nextLocale = languageOptions[Number(event.detail.value)]?.language_code as
-            | SupportedLocale
-            | undefined
-          if (nextLocale) void setLocale(nextLocale)
-        }}
-      >
-        <View className='login-locale__value'>{currentLanguageName}</View>
-      </Picker>
+    <View className={`login-page ${themeStore.theme === 'light' ? 'theme-light' : 'theme-dark'}`}>
+      <View className='login-header'>
+        <View className='k-ic login-back' aria-hidden onClick={goBack}>
+          ‹
+        </View>
+        <Picker
+          className='login-locale'
+          mode='selector'
+          range={languageOptions.map((item) => item.native_name)}
+          value={Math.max(
+            0,
+            languageOptions.findIndex((item) => item.language_code === locale),
+          )}
+          onChange={(event) => {
+            const nextLocale = languageOptions[Number(event.detail.value)]?.language_code as
+              | SupportedLocale
+              | undefined
+            if (nextLocale) void setLocale(nextLocale)
+          }}
+        >
+          <View className='k-lg-lang login-locale__value'>{currentLanguageName}</View>
+        </Picker>
+      </View>
       <View className='login-hero'>
-        <View className='login-logo-shell'>
+        <View className='k-lg-logo login-logo-shell'>
           <Image className='login-logo' src={appLogo} onError={() => setAppLogo(defaultLogo)} />
         </View>
         <View className='login-hero-copy'>
-          <Text className='login-title'>{mainTitle}</Text>
-          <Text className='login-subtitle'>{subTitle}</Text>
+          <Text className='k-lg-title login-title'>{mainTitle}</Text>
+          <Text className='k-lg-sub login-subtitle'>{subTitle}</Text>
         </View>
       </View>
-      <View className='login-panel'>
+      <View className='k-glass k-glass--lit login-panel'>
+        <View className='k-cnr k-cnr--tl' aria-hidden />
+        <View className='k-cnr k-cnr--tr' aria-hidden />
+        <View className='k-cnr k-cnr--bl' aria-hidden />
+        <View className='k-cnr k-cnr--br' aria-hidden />
         {process.env.TARO_ENV === 'h5' ? (
           <View className='login-form'>
             {showTenantCode ? (
+              <View className='k-lg-field'>
+                <Input
+                  className='k-lg-field__input'
+                  placeholder={t('core.login.tenant')}
+                  value={form.tenant_code}
+                  onInput={(event) => updateForm('tenant_code', event.detail.value)}
+                />
+              </View>
+            ) : null}
+            <View className='k-lg-field'>
               <Input
-                className='login-input'
-                placeholder={t('core.login.tenant')}
-                value={form.tenant_code}
-                onInput={(event) => updateForm('tenant_code', event.detail.value)}
+                className='k-lg-field__input'
+                placeholder={t('core.login.user_name_mobile')}
+                value={form.user_name}
+                onInput={(event) => updateForm('user_name', event.detail.value)}
               />
-            ) : null}
-            <Input
-              className='login-input'
-              placeholder={t('core.login.user_name_mobile')}
-              value={form.user_name}
-              onInput={(event) => updateForm('user_name', event.detail.value)}
-            />
-            <Input
-              className='login-input'
-              password
-              placeholder={t('core.login.password')}
-              value={password}
-              onInput={(event) => setPassword(event.detail.value)}
-              onConfirm={() => void onSubmit()}
-            />
+            </View>
+            <View className='k-lg-field'>
+              <Input
+                className='k-lg-field__input'
+                password={!passwordVisible}
+                placeholder={t('core.login.password')}
+                value={password}
+                onInput={(event) => setPassword(event.detail.value)}
+                onConfirm={() => void onSubmit()}
+              />
+              <View
+                className='password-toggle'
+                aria-label={passwordVisible ? '隐藏密码' : '显示密码'}
+                onClick={() => setPasswordVisible((visible) => !visible)}
+              >
+                <Image
+                  className='password-toggle-icon'
+                  src={passwordIconSrc(passwordVisible)}
+                  mode='aspectFit'
+                />
+              </View>
+            </View>
             {!isBehaviorCaptcha ? (
-              <View className='captcha-row'>
+              <View className='k-lg-field'>
                 <Input
-                  className='login-input captcha-input'
+                  className='k-lg-field__input'
                   placeholder={t('core.login.captcha')}
                   value={form.captcha_code}
                   onInput={(event) => updateForm('captcha_code', event.detail.value)}
                   onConfirm={() => void onSubmit()}
                 />
                 <View className='captcha-divider' />
-                <View className='captcha-trigger' onClick={() => void refreshCaptcha()}>
+                <View className='k-lg-cap captcha-trigger' onClick={() => void refreshCaptcha()}>
                   <Image className='captcha-image' src={captchaImage} mode='aspectFit' />
                 </View>
               </View>
             ) : null}
-            <Button
-              className='login-button login-button-primary'
-              loading={loading}
-              onClick={() => void onSubmit()}
-            >
+            <Button className='k-lg-btn k-lg-btn--pri' loading={loading} onClick={() => void onSubmit()}>
               {t('common.action.login')}
             </Button>
             {behaviorVisible ? (
@@ -681,7 +724,7 @@ export default function LoginPage() {
           </View>
         ) : !miniBinding ? (
           <Button
-            className='login-button login-button-primary'
+            className='k-lg-btn k-lg-btn--wx'
             loading={loading}
             onClick={() => void wxLogin()}
           >
@@ -692,40 +735,57 @@ export default function LoginPage() {
           <View className='login-form'>
             <View className='login-bind-tip'>{t('core.login.wechat_bind_tip')}</View>
             {showTenantCode ? (
+              <View className='k-lg-field'>
+                <Input
+                  className='k-lg-field__input'
+                  placeholder={t('core.login.tenant')}
+                  value={miniForm.tenant_code}
+                  onInput={(event) => updateMiniForm('tenant_code', event.detail.value)}
+                />
+              </View>
+            ) : null}
+            <View className='k-lg-field'>
               <Input
-                className='login-input'
-                placeholder={t('core.login.tenant')}
-                value={miniForm.tenant_code}
-                onInput={(event) => updateMiniForm('tenant_code', event.detail.value)}
+                className='k-lg-field__input'
+                placeholder={t('core.login.user_name_mobile')}
+                value={miniForm.user_name}
+                onInput={(event) => updateMiniForm('user_name', event.detail.value)}
               />
-            ) : null}
-            <Input
-              className='login-input'
-              placeholder={t('core.login.user_name_mobile')}
-              value={miniForm.user_name}
-              onInput={(event) => updateMiniForm('user_name', event.detail.value)}
-            />
-            <Input
-              className='login-input'
-              password
-              placeholder={t('core.login.password')}
-              value={miniPassword}
-              onInput={(event) => setMiniPassword(event.detail.value)}
-            />
-            <View className='captcha-row'>
+            </View>
+            <View className='k-lg-field'>
+              <Input
+                className='k-lg-field__input'
+                password={!miniPasswordVisible}
+                placeholder={t('core.login.password')}
+                value={miniPassword}
+                onInput={(event) => setMiniPassword(event.detail.value)}
+              />
+              <View
+                className='password-toggle'
+                aria-label={miniPasswordVisible ? '隐藏密码' : '显示密码'}
+                onClick={() => setMiniPasswordVisible((visible) => !visible)}
+              >
+                <Image
+                  className='password-toggle-icon'
+                  src={passwordIconSrc(miniPasswordVisible)}
+                  mode='aspectFit'
+                />
+              </View>
+            </View>
+            <View className='k-lg-field'>
               <Input
-                className='login-input captcha-input'
+                className='k-lg-field__input'
                 placeholder={t('core.login.captcha')}
                 value={miniForm.captcha_code}
                 onInput={(event) => updateMiniForm('captcha_code', event.detail.value)}
               />
               <View className='captcha-divider' />
-              <View className='captcha-trigger' onClick={() => void refreshMiniCaptcha()}>
+              <View className='k-lg-cap captcha-trigger' onClick={() => void refreshMiniCaptcha()}>
                 <Image className='captcha-image' src={miniCaptchaImage} mode='aspectFit' />
               </View>
             </View>
             <Button
-              className='login-button login-button-primary'
+              className='k-lg-btn k-lg-btn--pri'
               loading={loading}
               onClick={() => void bindMiniAccount()}
             >

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

@@ -2,28 +2,28 @@
   min-height: 100vh;
   padding: 24px;
   box-sizing: border-box;
-  background-color: #f5f7f6;
+  background: var(--kratos-bg-gradient);
 }
 
 .protocol-card {
   overflow: hidden;
   padding: 40px 32px 56px;
-  border: 1px solid #edf1ef;
+  border: 1PX solid var(--kratos-color-border);
   border-radius: 24px;
-  background-color: #fff;
-  box-shadow: 0 8px 24px rgba(33, 54, 48, 0.05);
+  background-color: var(--kratos-color-surface);
+  box-shadow: var(--kratos-glow-soft);
 }
 
 .protocol-content {
   display: block;
-  color: #53635d;
+  color: var(--kratos-color-text-muted);
   font-size: 28px;
   line-height: 1.85;
   word-break: break-word;
 
   .protocol-title {
     margin: 0 0 28px;
-    color: #1f2d29;
+    color: var(--kratos-color-text);
     font-size: 42px;
     font-weight: 700;
     line-height: 1.35;
@@ -32,8 +32,8 @@
   .protocol-section-title {
     margin: 38px 0 14px;
     padding-left: 16px;
-    border-left: 6px solid #27ba9b;
-    color: #263a34;
+    border-left: 6px solid var(--kratos-color-primary);
+    color: var(--kratos-color-text);
     font-size: 31px;
     font-weight: 600;
     line-height: 1.45;
@@ -41,7 +41,7 @@
 
   .protocol-paragraph {
     margin: 0 0 22px;
-    color: #53635d;
+    color: var(--kratos-color-text-muted);
     font-size: 28px;
     line-height: 1.85;
   }
@@ -58,12 +58,12 @@
   }
 
   .protocol-emphasis {
-    color: #263a34;
+    color: var(--kratos-color-text);
     font-weight: 600;
   }
 
   .protocol-link {
-    color: #16806d;
+    color: var(--kratos-color-primary);
     text-decoration: underline;
   }
 
@@ -77,8 +77,8 @@
   .protocol-quote {
     margin: 24px 0;
     padding: 18px 22px;
-    border-left: 6px solid #b8e8dc;
-    color: #6c7b75;
-    background-color: #f3fbf8;
+    border-left: 6px solid var(--kratos-color-primary-edge);
+    color: var(--kratos-color-text-muted);
+    background-color: var(--kratos-color-primary-soft);
   }
 }

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

@@ -1,8 +1,9 @@
 import { RichText, View } from '@tarojs/components'
 import Taro, { useLoad } from '@tarojs/taro'
 import { useState } from 'react'
-import { useSettingStore } from '../../../stores'
+import { useSettingStore, useThemeStore } from '../../../stores'
 import { useI18n } from '../../../locales'
+import { homeTabPage } from '../../../utils/navigation'
 import './protocal.scss'
 
 const protocolClassMap: Record<string, string> = {
@@ -41,11 +42,14 @@ function decorateProtocolContent(html: string): string {
 /** 服务条款与隐私协议页。 */
 export default function ProtocolPage() {
   const { t } = useI18n()
+  const themeStore = useThemeStore()
   const [content, setContent] = useState('')
+  const [pageTitle, setPageTitle] = useState(t('core.navigation.protocol'))
 
   useLoad((query) => {
     const isPrivacy = query?.type === 'privacy'
     const title = isPrivacy ? t('core.protocol.privacy') : t('core.protocol.service')
+    setPageTitle(title)
     const key = isPrivacy ? 'privacyProtocol' : 'serviceProtocol'
     const settingStore = useSettingStore.getState()
     void settingStore
@@ -53,7 +57,6 @@ export default function ProtocolPage() {
       .then(() => {
         const protocol = settingStore.getData(key)
         if (!protocol) throw new Error(t('core.protocol.not_configured', { title }))
-        void Taro.setNavigationBarTitle({ title })
         setContent(decorateProtocolContent(protocol))
       })
       .catch(async (error: unknown) => {
@@ -65,8 +68,18 @@ export default function ProtocolPage() {
       })
   })
 
+  /** 返回来源页，页面栈为空时回到首页。 */
+  const onBack = () => {
+    void Taro.navigateBack({ fail: () => void Taro.reLaunch({ url: homeTabPage }) })
+  }
+
   return (
-    <View className='protocol-page'>
+    <View className={`protocol-page ${themeStore.theme === 'light' ? 'theme-light' : 'theme-dark'}`}>
+      <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={onBack} />
+        <View className='k-page-nav__title'>{pageTitle}</View>
+        <View className='k-page-nav__side' aria-hidden />
+      </View>
       <View className='protocol-card'>
         <RichText className='protocol-content' nodes={content} />
       </View>

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

@@ -2,6 +2,7 @@
   position: relative;
   flex: 1;
   height: 100vh;
+  background: var(--kratos-bg-gradient);
 }
 
 .webview-empty {
@@ -13,19 +14,19 @@
   justify-content: center;
   padding: 48px;
   text-align: center;
-  background-color: #fff;
+  background: var(--kratos-bg-gradient);
 }
 
 .webview-empty__title {
   font-size: 32px;
   font-weight: 600;
-  color: #333;
+  color: var(--kratos-color-text);
 }
 
 .webview-empty__desc {
   margin-top: 16px;
   font-size: 26px;
-  color: #888;
+  color: var(--kratos-color-text-muted);
 }
 
 .webview-open-button {
@@ -37,7 +38,7 @@
   height: 72px;
   line-height: 72px;
   border-radius: 72px;
-  background-color: #27ba9b;
-  color: #fff;
+  background: linear-gradient(135deg, var(--kratos-color-primary-deep), var(--kratos-color-primary));
+  color: var(--kratos-color-on-primary);
   font-size: 26px;
 }

package/src/views/pages/webview/webview.tsx

@@ -3,6 +3,7 @@ import Taro, { useLoad } from '@tarojs/taro'
 import { useEffect, useState } from 'react'
 import './webview.scss'
 import { useI18n } from '../../../locales'
+import { useThemeStore } from '../../../stores'
 
 /** 只放行 http(s) 外链，其它协议按非法地址处理。 */
 const isAllowedUrl = (value: string) => /^https?:\/\//i.test(value)
@@ -18,6 +19,7 @@ const safeDecodeURIComponent = (value: string) => {
 /** 统一外链承载页。 */
 export default function WebViewPage() {
   const { t } = useI18n()
+  const themeStore = useThemeStore()
   const [url, setUrl] = useState('')
   const [iframeLoaded, setIframeLoaded] = useState(false)
   const [iframeTimedOut, setIframeTimedOut] = useState(false)
@@ -44,7 +46,7 @@ export default function WebViewPage() {
     : t('core.webview.invalid_url')
 
   return (
-    <View className='webview-container'>
+    <View className={`webview-container ${themeStore.theme === 'light' ? 'theme-light' : 'theme-dark'}`}>
       {url ? (
         <WebView src={url} onLoad={() => setIframeLoaded(true)} />
       ) : null}