@liujitcn/kratos-taro-app-system 0.0.1

package/src/views/pagesMember/ai/stream.ts

@@ -0,0 +1,152 @@
+import type { AiMessage, AiSession } from '../../../rpc/base/v1/ai_session'
+
+/** AI 助手流事件名称。 */
+export type AiStreamEventName = 'delta' | 'finish' | 'error'
+
+/** AI 助手流事件负载。 */
+export type AiStreamPayload = {
+  session_id: string
+  message_id: string
+  delta?: string
+  messages?: AiMessage[]
+  session?: AiSession
+}
+
+/** AI 助手标准化流事件。 */
+export type AiStreamEvent = {
+  event: AiStreamEventName
+  payload: AiStreamPayload
+}
+
+type SseOutput = Partial<Record<'data' | 'event' | 'id' | 'retry', unknown>>
+
+/** AI 助手流事件消费回调。 */
+export type AiStreamEventHandler = (event: AiStreamEvent) => void
+
+/** 增量 SSE 文本解析器。 */
+export type AiEventStreamTextParser = {
+  push: (value: unknown) => void
+  flush: () => void
+}
+
+const STREAM_EVENT_NAMES = new Set<AiStreamEventName>(['delta', 'finish', 'error'])
+
+function createSseTextParser(handler: AiStreamEventHandler) {
+  let currentItem: SseOutput = {}
+
+  const dispatchCurrentItem = () => {
+    const event = normalizeAiStreamItem(currentItem)
+    currentItem = {}
+    if (event) handler(event)
+  }
+
+  const handleLine = (line: string) => {
+    if (line === '') {
+      dispatchCurrentItem()
+      return
+    }
+    if (line.startsWith(':')) return
+
+    const separatorIndex = line.indexOf(':')
+    const field = separatorIndex >= 0 ? line.slice(0, separatorIndex) : line
+    let value = separatorIndex >= 0 ? line.slice(separatorIndex + 1) : ''
+    if (value.startsWith(' ')) value = value.slice(1)
+
+    if (field === 'data') {
+      currentItem.data = currentItem.data === undefined ? value : `${currentItem.data}\n${value}`
+      return
+    }
+    if (field === 'event' || field === 'id' || field === 'retry') currentItem[field] = value
+  }
+
+  return { dispatchCurrentItem, handleLine }
+}
+
+/** 创建可增量消费的 AI 助手 SSE 文本解析器。 */
+export function createAiEventStreamTextParser(
+  handler: AiStreamEventHandler,
+): AiEventStreamTextParser {
+  const parser = createSseTextParser(handler)
+  let buffer = ''
+
+  const consumeBuffer = (flush = false) => {
+    let lineBreakIndex = buffer.indexOf('\n')
+    while (lineBreakIndex >= 0) {
+      const line = buffer.slice(0, lineBreakIndex).replace(/\r$/, '')
+      buffer = buffer.slice(lineBreakIndex + 1)
+      parser.handleLine(line)
+      lineBreakIndex = buffer.indexOf('\n')
+    }
+    if (flush && buffer) {
+      parser.handleLine(buffer.replace(/\r$/, ''))
+      buffer = ''
+    }
+  }
+
+  return {
+    push(value) {
+      buffer += String(value ?? '')
+      consumeBuffer()
+    },
+    flush() {
+      consumeBuffer(true)
+      parser.dispatchCurrentItem()
+    },
+  }
+}
+
+function isAiStreamEventName(event?: unknown): event is AiStreamEventName {
+  return STREAM_EVENT_NAMES.has(String(event ?? '').trim() as AiStreamEventName)
+}
+
+function parseStreamPayload(data?: unknown): AiStreamPayload | null {
+  const rawData = String(data ?? '').trimStart()
+  if (!rawData) return null
+  try {
+    return JSON.parse(rawData) as AiStreamPayload
+  } catch {
+    return null
+  }
+}
+
+/** 将原始 SSE 项收敛为业务事件。 */
+export function normalizeAiStreamItem(item?: SseOutput): AiStreamEvent | null {
+  if (!item || !isAiStreamEventName(item.event)) return null
+  const payload = parseStreamPayload(item.data)
+  if (!payload?.session_id || !payload.message_id) return null
+  return { event: String(item.event).trim() as AiStreamEventName, payload }
+}
+
+/** 解析一次性取得的 SSE 文本。 */
+export function parseAiEventStreamText(value: unknown) {
+  const events: AiStreamEvent[] = []
+  const parser = createAiEventStreamTextParser((event) => events.push(event))
+  parser.push(value)
+  parser.flush()
+  return events
+}
+
+/** 读取并解析 AI 助手流式响应。 */
+export async function readAiEventStream(
+  readableStream: ReadableStream<Uint8Array>,
+  handler: AiStreamEventHandler,
+  signal?: AbortSignal,
+) {
+  const reader = readableStream.getReader()
+  const decoder = new TextDecoder()
+  const parser = createAiEventStreamTextParser(handler)
+  const abortReader = () => void reader.cancel()
+  signal?.addEventListener('abort', abortReader, { once: true })
+  try {
+    while (!signal?.aborted) {
+      const { value, done } = await reader.read()
+      if (done) break
+      parser.push(decoder.decode(value, { stream: true }))
+    }
+    parser.push(decoder.decode())
+    parser.flush()
+  } finally {
+    signal?.removeEventListener('abort', abortReader)
+    reader.releaseLock()
+  }
+}

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

@@ -0,0 +1,135 @@
+.profile-viewport {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  background-color: #f4f4f4;
+  background-size: auto 420px;
+  background-repeat: no-repeat;
+}
+
+.profile-navbar {
+  position: relative;
+}
+
+.profile-navbar__title {
+  display: flex;
+  height: 40PX;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 16PX;
+  font-weight: 500;
+}
+
+.profile-back {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  display: flex;
+  width: 40PX;
+  height: 40PX;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 30PX;
+}
+
+.profile-avatar {
+  display: flex;
+  width: 100%;
+  height: 260px;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+.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-form {
+  background-color: #f4f4f4;
+}
+
+.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;
+}
+
+.profile-input {
+  display: block;
+  flex: 1;
+  height: 46px;
+}
+
+.profile-radio {
+  margin-right: 20px;
+}
+
+.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-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;
+
+  &::after {
+    border: 0;
+  }
+}

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

@@ -0,0 +1,159 @@
+import {
+  Button,
+  Image,
+  Input,
+  Label,
+  Radio,
+  RadioGroup,
+  Text,
+  View,
+} from '@tarojs/components'
+import Taro, { useLoad } from '@tarojs/taro'
+import { useState } from 'react'
+import { defAuthService } from '@liujitcn/kratos-taro-app-core/api/system/auth'
+import { defBaseDictService } from '@liujitcn/kratos-taro-app-core/api/system/base_dict'
+import type { BaseDictForm_DictItem } from '@liujitcn/kratos-taro-app-core/rpc/system/app/v1/base_dict'
+import type { UserProfileForm } from '@liujitcn/kratos-taro-app-core/rpc/system/app/v1/auth'
+import {
+  formatSrc,
+  navigateToLogin,
+  resolveBundledAsset,
+  uploadFile,
+  useUserStore,
+} from '@liujitcn/kratos-taro-app-core'
+import './profile.scss'
+
+const IMG_MAX_SIZE = 1024 * 1024
+const defaultAvatar = resolveBundledAsset('static/images/avatar.png')
+const navigatorBackground = resolveBundledAsset('static/images/navigator_bg.png')
+
+/** 用户个人资料编辑页。 */
+export default function ProfilePage() {
+  const [userInfo, setUserInfo] = useState<UserProfileForm>({
+    user_name: '',
+    nick_name: '',
+    gender: 0,
+    phone: '',
+    avatar: '',
+  })
+  const [genderList, setGenderList] = useState<BaseDictForm_DictItem[]>([])
+  const ensureAuthenticated = useUserStore((state) => state.ensureAuthenticated)
+  const safeTop = Taro.getWindowInfo().safeArea?.top || 0
+
+  const requireAuth = () => {
+    if (ensureAuthenticated()) return true
+    navigateToLogin()
+    return false
+  }
+
+  const loadData = async () => {
+    const [profile, gender] = await Promise.all([
+      useUserStore.getState().getUserProfile(),
+      defBaseDictService.GetBaseDict({ value: 'base_user_gender' }),
+    ])
+    setUserInfo(profile)
+    setGenderList(gender.items || [])
+  }
+
+  useLoad(() => {
+    if (requireAuth()) void loadData()
+  })
+
+  const uploadAvatar = async (filePath: string) => {
+    if (!requireAuth()) return
+    try {
+      const fileInfo = await uploadFile('avatar', filePath)
+      const nextProfile = { ...userInfo, avatar: fileInfo.url }
+      await defAuthService.UpdateUserProfile(nextProfile)
+      setUserInfo(nextProfile)
+      await useUserStore.getState().getUserProfile()
+      await Taro.showToast({ icon: 'success', title: '更新成功' })
+    } catch {
+      await Taro.showToast({ icon: 'error', title: '上传头像失败' })
+    }
+  }
+
+  const onAvatarChange = async () => {
+    if (!requireAuth()) return
+    const selected =
+      process.env.TARO_ENV === 'weapp'
+        ? await Taro.chooseMedia({ count: 1, mediaType: ['image'] })
+        : await Taro.chooseImage({ count: 1 })
+    const file = selected.tempFiles[0]
+    const filePath = 'tempFilePath' in file ? file.tempFilePath : file.path
+    if (file.size > IMG_MAX_SIZE) {
+      await Taro.showToast({ title: '请上传小于1M的照片', icon: 'none', duration: 1500 })
+      return
+    }
+    await uploadAvatar(filePath)
+  }
+
+  const onGetPhoneNumber = async (event: { detail: { errMsg?: string; code?: string } }) => {
+    if (event.detail.errMsg !== 'getPhoneNumber:ok' || !requireAuth()) return
+    const response = await defAuthService.BindUserPhone({ code: event.detail.code || '' })
+    setUserInfo((current) => ({ ...current, phone: response.phone }))
+    await useUserStore.getState().getUserProfile()
+    await Taro.showToast({ icon: 'success', title: '授权成功' })
+  }
+
+  const onSubmit = async () => {
+    if (!requireAuth()) return
+    await defAuthService.UpdateUserProfile(userInfo)
+    await useUserStore.getState().getUserProfile()
+    await Taro.showToast({ icon: 'success', title: '保存成功' })
+    setTimeout(() => void Taro.navigateBack(), 400)
+  }
+
+  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'>个人信息</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'>点击修改头像</Text>
+        </View>
+      </View>
+      <View className='profile-form'>
+        <View className='profile-form__content'>
+          {userInfo.user_name ? (
+            <View className='profile-form__item'>
+              <Text className='profile-label'>账号</Text>
+              <Text className='profile-account profile-placeholder'>{userInfo.user_name}</Text>
+            </View>
+          ) : null}
+          {process.env.TARO_ENV === 'weapp' ? (
+            <View className='profile-form__item'>
+              <Text className='profile-label'>手机号</Text>
+              <View className='profile-input'>
+                {userInfo.phone ? (
+                  <Text className='profile-account'>{userInfo.phone}</Text>
+                ) : (
+                  <Button className='profile-auth-button' openType='getPhoneNumber' onGetPhoneNumber={onGetPhoneNumber}>微信授权手机号</Button>
+                )}
+              </View>
+            </View>
+          ) : null}
+          <View className='profile-form__item'>
+            <Text className='profile-label'>昵称</Text>
+            <Input className='profile-input' 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'>性别</Text>
+            <RadioGroup 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)} />
+                  {item.label}
+                </Label>
+              ))}
+            </RadioGroup>
+          </View>
+        </View>
+        <Button className='profile-form__button' onClick={() => void onSubmit()}>保 存</Button>
+      </View>
+    </View>
+  )
+}

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

@@ -0,0 +1,56 @@
+.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;
+}
+
+.settings-button {
+  margin-bottom: 20px;
+  border-radius: 10px;
+  background-color: #fff;
+}

package/src/views/pagesMember/settings/settings.tsx

@@ -0,0 +1,60 @@
+import { Button, View } from '@tarojs/components'
+import Taro, { useLoad } from '@tarojs/taro'
+import { useState } from 'react'
+import {
+  navigateToLogin,
+  useUserStore,
+} from '@liujitcn/kratos-taro-app-core'
+import './settings.scss'
+
+/** 应用设置页。 */
+export default function SettingsPage() {
+  const [logoutLoading, setLogoutLoading] = useState(false)
+  const authenticated = useUserStore((state) => state.isAuthenticated())
+  const ensureAuthenticated = useUserStore((state) => state.ensureAuthenticated)
+  const logout = useUserStore((state) => state.logout)
+
+  useLoad(() => {
+    if (process.env.TARO_ENV !== 'weapp' && !ensureAuthenticated()) navigateToLogin()
+  })
+
+  const onLogout = async () => {
+    if (logoutLoading) return
+    const result = await Taro.showModal({ content: '是否退出登录？', confirmColor: '#27BA9B' })
+    if (!result.confirm) return
+    setLogoutLoading(true)
+    try {
+      await logout()
+      await Taro.navigateBack()
+    } catch {
+      await Taro.showToast({ icon: 'none', title: '退出登录失败' })
+    } finally {
+      setLogoutLoading(false)
+    }
+  }
+
+  return (
+    <View className='settings-viewport'>
+      {process.env.TARO_ENV === 'weapp' ? (
+        <View className='settings-list'>
+          <Button className='settings-item settings-arrow' hoverClass='none' openType='openSetting'>
+            授权管理
+          </Button>
+          <Button className='settings-item settings-arrow' hoverClass='none' openType='feedback'>
+            问题反馈
+          </Button>
+          <Button className='settings-item settings-arrow' hoverClass='none' openType='contact'>
+            联系我们
+          </Button>
+        </View>
+      ) : null}
+      {authenticated ? (
+        <View className='settings-action'>
+          <View className='settings-button' onClick={() => void onLogout()}>
+            退出登录
+          </View>
+        </View>
+      ) : null}
+    </View>
+  )
+}