@liujitcn/kratos-uni-app-system 0.0.1

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

@@ -0,0 +1,190 @@
+import type { AiMessage, AiSession } from '../../../rpc/base/v1/ai_session'
+
+/** AI 助手 direct stream SSE 事件名称。 */
+export type AiStreamEventName = 'delta' | 'finish' | 'error'
+
+/** AI 助手 direct stream 事件负载。 */
+export type AiStreamPayload = {
+  /** 会话 ID。 */
+  session_id: string
+  /** 后端单轮消息 ID，用于关联当前轮次。 */
+  message_id: string
+  /** 本次新增文本分片。 */
+  delta?: string
+  /** 流式完成后的最终消息列表。 */
+  messages?: AiMessage[]
+  /** 流式完成后的最新会话。 */
+  session?: AiSession
+}
+
+/** AI 助手 direct stream 标准化事件。 */
+export type AiStreamEvent = {
+  /** SSE 事件名称。 */
+  event: AiStreamEventName
+  /** 已解析的 JSON 负载。 */
+  payload: AiStreamPayload
+}
+
+/** 读取到的原始 SSE 字段结构。 */
+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: unknown) {
+      buffer += String(value ?? '')
+      consumeBuffer()
+    },
+    flush() {
+      consumeBuffer(true)
+      parser.dispatchCurrentItem()
+    },
+  }
+}
+
+/** 判断 SSE 事件名称是否为 AI 助手 direct stream 支持的事件。 */
+function isAiStreamEventName(event?: unknown): event is AiStreamEventName {
+  return STREAM_EVENT_NAMES.has(String(event ?? '').trim() as AiStreamEventName)
+}
+
+/** 解析 SSE data 字段，兼容前导空格和空消息。 */
+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 项收敛为业务事件，避免页面直接处理字符串 JSON。 */
+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 助手 direct stream，支持同一页面同时消费多条会话流。 */
+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 (true) {
+      if (signal?.aborted) {
+        break
+      }
+      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.vue

@@ -0,0 +1,393 @@
+<script setup lang="ts">
+import { defAuthService } from '@liujitcn/kratos-uni-app-core/api/system/auth'
+import { useUserStore } from '@liujitcn/kratos-uni-app-core/stores'
+import type { UserProfileForm } from '@liujitcn/kratos-uni-app-core/rpc/system/app/v1/auth'
+import { onLoad } from '@dcloudio/uni-app'
+import { ref } from 'vue'
+import type { BaseDictForm_DictItem } from '@liujitcn/kratos-uni-app-core/rpc/system/app/v1/base_dict'
+import { defBaseDictService } from '@liujitcn/kratos-uni-app-core/api/system/base_dict'
+import { formatSrc } from '@liujitcn/kratos-uni-app-core/utils/index'
+import { uploadFile } from '@liujitcn/kratos-uni-app-core/utils/file'
+import { navigateToLogin } from '@liujitcn/kratos-uni-app-core/utils/navigation'
+import defaultAvatar from '@liujitcn/kratos-uni-app-core/static/images/avatar.png'
+import navigatorBackground from '@liujitcn/kratos-uni-app-core/static/images/navigator_bg.png'
+
+const userStore = useUserStore()
+
+// 获取屏幕边界到安全区域距离
+const { safeAreaInsets } = uni.getSystemInfoSync()
+
+const imgMaxSize = ref(1024 * 1024)
+
+// 获取个人信息，修改个人信息需提供初始值
+const userInfo = ref({} as UserProfileForm)
+const syncUserStoreProfile = (profile: UserProfileForm) => {
+  if (!userStore.userInfo) {
+    return
+  }
+
+  userStore.userInfo.user_name = profile.user_name
+  userStore.userInfo.nick_name = profile.nick_name
+  userStore.userInfo.gender = profile.gender
+  userStore.userInfo.phone = profile.phone
+  userStore.userInfo.avatar = profile.avatar
+}
+
+const getUserData = async () => {
+  const res = await defAuthService.GetUserProfile({})
+  userInfo.value = res
+  // 同步 Store 的头像和昵称，用于我的页面展示
+  syncUserStoreProfile(res)
+}
+
+const genderList = ref<BaseDictForm_DictItem[]>([])
+
+const getDictData = async () => {
+  const genderCode = 'base_user_gender'
+  const res = await defBaseDictService.GetBaseDict({
+    value: genderCode,
+  })
+  genderList.value = res.items || []
+}
+
+onLoad(() => {
+  if (!userStore.ensureAuthenticated()) {
+    navigateToLogin()
+    return
+  }
+
+  Promise.all([getUserData(), getDictData()])
+})
+// 修改头像
+const onAvatarChange = async () => {
+  if (!userStore.ensureAuthenticated()) {
+    navigateToLogin()
+    return
+  }
+
+  // 调用拍照/选择图片
+  // 选择图片条件编译
+  // #ifdef H5 || APP-PLUS
+  // 微信小程序从基础库 2.21.0 开始， wx.chooseImage 停止维护，请使用 uni.chooseMedia 代替
+  uni.chooseImage({
+    count: 1,
+    success: async (res: any) => {
+      const { path, size } = res.tempFiles[0]
+      if (size > imgMaxSize.value) {
+        await uni.showToast({
+          title: '请上传小于1M的照片',
+          icon: 'none',
+          duration: 1500,
+        })
+        return
+      }
+      // 上传
+      await uploadAvatar(path)
+    },
+  })
+  // #endif
+
+  // #ifdef MP-WEIXIN
+  // uni.chooseMedia 仅支持微信小程序端
+  uni.chooseMedia({
+    // 文件个数
+    count: 1,
+    // 文件类型
+    mediaType: ['image'],
+    success: async (res: any) => {
+      // 本地路径
+      const { tempFilePath, size } = res.tempFiles[0]
+      if (size > imgMaxSize.value) {
+        await uni.showToast({
+          title: '请上传小于1M的照片',
+          icon: 'none',
+          duration: 1500,
+        })
+        return
+      }
+      await uploadAvatar(tempFilePath)
+    },
+  })
+  // #endif
+}
+
+// 上传头像并同步个人资料与用户 Store。
+const uploadAvatar = async (file: string) => {
+  if (!userStore.ensureAuthenticated()) {
+    navigateToLogin()
+    return
+  }
+
+  try {
+    const fileInfo = await uploadFile('avatar', file)
+    userInfo.value.avatar = fileInfo.url
+    await defAuthService.UpdateUserProfile(userInfo.value)
+    syncUserStoreProfile(userInfo.value)
+    await uni.showToast({ icon: 'success', title: '更新成功' })
+  } catch {
+    await uni.showToast({ icon: 'error', title: '上传头像失败' })
+  }
+}
+
+// 修改性别
+const onGenderChange: UniHelper.RadioGroupOnChange = (ev) => {
+  userInfo.value.gender = Number(ev.detail.value)
+}
+
+// #ifdef MP-WEIXIN
+// 新增授权手机号处理
+const onGetPhoneNumber: UniHelper.ButtonOnGetphonenumber = async (e) => {
+  if (e.detail.errMsg !== 'getPhoneNumber:ok') return
+  if (!userStore.ensureAuthenticated()) {
+    navigateToLogin()
+    return
+  }
+
+  const res = await defAuthService.BindUserPhone({ code: e.detail.code || '' })
+  userInfo.value.phone = res.phone
+  syncUserStoreProfile(userInfo.value)
+  await uni.showToast({ icon: 'success', title: '授权成功' })
+}
+
+// #endif
+
+// 点击保存提交表单
+const onSubmit = async () => {
+  if (!userStore.ensureAuthenticated()) {
+    navigateToLogin()
+    return
+  }
+
+  const { nick_name, gender } = userInfo.value
+  await defAuthService.UpdateUserProfile({
+    nick_name: nick_name,
+    gender: gender,
+    avatar: userInfo.value.avatar,
+    phone: userInfo.value.phone,
+    user_name: userInfo.value.user_name,
+  })
+  // 更新Store昵称
+  syncUserStoreProfile(userInfo.value)
+  await uni.showToast({ icon: 'success', title: '保存成功' })
+  setTimeout(() => {
+    uni.navigateBack()
+  }, 400)
+}
+</script>
+
+<template>
+  <view class="viewport" :style="{ backgroundImage: `url(${navigatorBackground})` }">
+    <!-- 导航栏 -->
+    <view class="navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
+      <navigator open-type="navigateBack" class="back icon-left" hover-class="none"></navigator>
+      <view class="title">个人信息</view>
+    </view>
+    <view class="avatar">
+      <view @tap="onAvatarChange" class="avatar-content">
+        <image
+          v-if="userInfo?.avatar"
+          class="image"
+          :src="formatSrc(userInfo?.avatar)"
+          mode="aspectFill"
+        />
+        <image v-else class="image" :src="defaultAvatar" mode="aspectFill"></image>
+        <text class="text">点击修改头像</text>
+      </view>
+    </view>
+    <!-- 表单 -->
+    <view class="form">
+      <!-- 表单内容 -->
+      <view class="form-content">
+        <view class="form-item" v-if="userInfo?.user_name">
+          <text class="label">账号</text>
+          <text class="account placeholder">{{ userInfo?.user_name }}</text>
+        </view>
+        <!-- #ifdef MP-WEIXIN -->
+        <!-- 手机号 -->
+        <view class="form-item">
+          <text class="label">手机号</text>
+          <view class="input">
+            <text v-if="userInfo.phone" class="account">{{ userInfo.phone }}</text>
+            <button
+              v-else
+              class="auth-button"
+              open-type="getPhoneNumber"
+              @getphonenumber="onGetPhoneNumber"
+            >
+              微信授权手机号
+            </button>
+          </view>
+        </view>
+        <!-- #endif -->
+        <view class="form-item">
+          <text class="label">昵称</text>
+          <input class="input" type="text" placeholder="请填写昵称" v-model="userInfo.nick_name" />
+        </view>
+        <view class="form-item">
+          <text class="label">性别</text>
+          <radio-group @change="onGenderChange">
+            <label class="radio" v-for="(item, index) in genderList" :key="index">
+              <radio
+                :value="item.value"
+                color="#27ba9b"
+                :checked="userInfo?.gender === Number(item.value)"
+              />
+              {{ item.label }}
+            </label>
+          </radio-group>
+        </view>
+      </view>
+      <!-- 提交按钮 -->
+      <button @tap="onSubmit" class="form-button">保 存</button>
+    </view>
+  </view>
+</template>
+
+<style lang="scss">
+page {
+  background-color: #f4f4f4;
+}
+
+.viewport {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background-size: auto 420rpx;
+  background-repeat: no-repeat;
+}
+
+// 导航栏
+.navbar {
+  position: relative;
+
+  .title {
+    height: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 16px;
+    font-weight: 500;
+    color: #fff;
+  }
+
+  .back {
+    position: absolute;
+    height: 40px;
+    width: 40px;
+    left: 0;
+    font-size: 20px;
+    color: #fff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &::before {
+      content: '‹';
+    }
+  }
+}
+
+// 头像
+.avatar {
+  text-align: center;
+  width: 100%;
+  height: 260rpx;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  .image {
+    width: 160rpx;
+    height: 160rpx;
+    border-radius: 50%;
+    background-color: #eee;
+  }
+
+  .text {
+    display: block;
+    padding-top: 20rpx;
+    line-height: 1;
+    font-size: 26rpx;
+    color: #fff;
+  }
+}
+
+// 表单
+.form {
+  background-color: #f4f4f4;
+
+  &-content {
+    margin: 20rpx 20rpx 0;
+    padding: 0 20rpx;
+    border-radius: 10rpx;
+    background-color: #fff;
+  }
+
+  &-item {
+    display: flex;
+    height: 96rpx;
+    line-height: 46rpx;
+    padding: 25rpx 10rpx;
+    background-color: #fff;
+    font-size: 28rpx;
+    border-bottom: 1rpx solid #ddd;
+
+    &:last-child {
+      border: none;
+    }
+
+    .label {
+      width: 180rpx;
+      color: #333;
+    }
+
+    .account {
+      color: #666;
+    }
+
+    .input {
+      flex: 1;
+      display: block;
+      height: 46rpx;
+    }
+
+    .radio {
+      margin-right: 20rpx;
+    }
+
+    .picker {
+      flex: 1;
+    }
+    .placeholder {
+      color: #808080;
+    }
+  }
+
+  &-button {
+    height: 80rpx;
+    text-align: center;
+    line-height: 80rpx;
+    margin: 30rpx 20rpx;
+    color: #fff;
+    border-radius: 80rpx;
+    font-size: 30rpx;
+    background-color: #27ba9b;
+  }
+}
+.auth-button {
+  height: 60rpx;
+  line-height: 60rpx;
+  margin: 0;
+  padding: 0 20rpx;
+  font-size: 26rpx;
+  color: #27ba9b;
+  border: 1rpx solid #27ba9b;
+  border-radius: 30rpx;
+  background: none;
+
+  &::after {
+    border: none;
+  }
+}
+</style>

package/src/views/pagesMember/settings/settings.vue

@@ -0,0 +1,129 @@
+<script setup lang="ts">
+import { useUserStore } from '@liujitcn/kratos-uni-app-core/stores'
+import { onLoad } from '@dcloudio/uni-app'
+import { ref } from 'vue'
+import { navigateToLogin } from '@liujitcn/kratos-uni-app-core/utils/navigation'
+
+const userStore = useUserStore()
+const logoutLoading = ref(false)
+
+// #ifndef MP-WEIXIN
+// 非微信小程序端未登录时没有可用设置项，直接引导登录以避免显示空白页面。
+onLoad(() => {
+  if (!userStore.ensureAuthenticated()) {
+    navigateToLogin()
+  }
+})
+// #endif
+
+// 退出登录
+const onLogout = () => {
+  if (logoutLoading.value) {
+    return
+  }
+  // 模态弹窗
+  uni.showModal({
+    content: '是否退出登录？',
+    confirmColor: '#27BA9B',
+    success: async (res) => {
+      if (!res.confirm) {
+        return
+      }
+
+      logoutLoading.value = true
+      try {
+        // 先完成退出和本地登录态清理，再返回个人中心，避免 onShow 读取到旧登录态。
+        await userStore.logout()
+        uni.navigateBack()
+      } catch (error) {
+        await uni.showToast({
+          icon: 'none',
+          title: '退出登录失败',
+        })
+      } finally {
+        logoutLoading.value = false
+      }
+    },
+  })
+}
+</script>
+
+<template>
+  <view class="viewport">
+    <!-- #ifdef MP-WEIXIN -->
+    <!-- 列表2 -->
+    <view class="list">
+      <button hover-class="none" class="item arrow" open-type="openSetting">授权管理</button>
+      <button hover-class="none" class="item arrow" open-type="feedback">问题反馈</button>
+      <button hover-class="none" class="item arrow" open-type="contact">联系我们</button>
+    </view>
+    <!-- #endif -->
+    <!-- 操作按钮 -->
+    <view class="action" v-if="userStore.isAuthenticated()">
+      <view @tap="onLogout" class="button">退出登录</view>
+    </view>
+  </view>
+</template>
+
+<style lang="scss">
+page {
+  background-color: #f4f4f4;
+}
+
+.viewport {
+  padding: 20rpx;
+}
+
+/* 列表 */
+.list {
+  padding: 0 20rpx;
+  background-color: #fff;
+  margin-bottom: 20rpx;
+  border-radius: 10rpx;
+  .item {
+    line-height: 90rpx;
+    padding-left: 10rpx;
+    font-size: 30rpx;
+    color: #333;
+    border-top: 1rpx solid #ddd;
+    position: relative;
+    text-align: left;
+    border-radius: 0;
+    background-color: #fff;
+    &::after {
+      width: auto;
+      height: auto;
+      left: auto;
+      border: none;
+    }
+    &:first-child {
+      border: none;
+    }
+    &::after {
+      right: 5rpx;
+    }
+  }
+  .arrow::after {
+    content: '›';
+    position: absolute;
+    top: 50%;
+    color: #ccc;
+    font-size: 36rpx;
+    transform: translateY(-50%);
+  }
+}
+
+/* 操作按钮 */
+.action {
+  text-align: center;
+  line-height: 90rpx;
+  margin-top: 40rpx;
+  font-size: 32rpx;
+  color: #333;
+  .button {
+    background-color: #fff;
+    margin-bottom: 20rpx;
+    border-radius: 10rpx;
+  }
+}
+</style>