@liujitcn/kratos-uni-app-system 0.0.1

package/src/views/pages/my/my.vue

@@ -0,0 +1,238 @@
+<script setup lang="ts">
+import { useUserStore } from '@liujitcn/kratos-uni-app-core/stores'
+import { computed } from 'vue'
+import { formatSrc } from '@liujitcn/kratos-uni-app-core/utils/index'
+import { navigateToLogin } from '@liujitcn/kratos-uni-app-core/utils/navigation'
+import { navigateAppRoute } from '@liujitcn/kratos-uni-app-core'
+import defaultAvatar from '@liujitcn/kratos-uni-app-core/static/images/avatar.png'
+import centerBackground from '@liujitcn/kratos-uni-app-core/static/images/center_bg.png'
+
+// 获取会员信息
+const userStore = useUserStore()
+const isLoggedIn = computed(() => userStore.isAuthenticated())
+const profile = computed(() => userStore.userInfo)
+
+/** 打开移动端 AI 助手静态页，未登录时先进入登录流程。 */
+const navigateToAi = () => {
+  console.log('[DEBUG-login-click] ai')
+  if (!userStore.ensureAuthenticated()) {
+    navigateToLogin()
+    return
+  }
+  navigateAppRoute('app/ai')
+}
+
+/** 打开设置页，未登录时先进入登录流程。 */
+const navigateToSettings = () => {
+  console.log('[DEBUG-login-click] settings')
+  if (!userStore.ensureAuthenticated()) {
+    navigateToLogin()
+    return
+  }
+  navigateAppRoute('app/settings')
+}
+
+/** 打开当前用户资料。 */
+const navigateToProfile = () => navigateAppRoute('app/profile')
+</script>
+
+<template>
+  <scroll-view
+    enable-back-to-top
+    class="viewport"
+    scroll-y
+    :style="{ backgroundImage: `url(${centerBackground})` }"
+  >
+    <!-- 个人资料 -->
+    <view class="profile">
+      <!-- 情况1：已登录 -->
+      <view class="overview" v-if="isLoggedIn && profile">
+        <view @tap="navigateToProfile">
+          <image
+            v-if="profile.avatar"
+            class="avatar"
+            :src="formatSrc(profile.avatar)"
+            mode="aspectFill"
+          ></image>
+          <image v-else class="avatar" :src="defaultAvatar" mode="aspectFill"></image>
+        </view>
+        <view class="meta">
+          <view class="nickname">
+            {{ profile.nick_name }}
+          </view>
+          <view class="extra" @tap="navigateToProfile">
+            <text class="update">更新头像昵称</text>
+          </view>
+        </view>
+      </view>
+      <!-- 情况2：未登录 -->
+      <view class="overview" v-else>
+        <view @tap="navigateToLogin">
+          <image class="avatar gray" mode="aspectFill" :src="defaultAvatar"></image>
+        </view>
+        <view class="meta">
+          <view @tap="navigateToLogin" class="nickname"> 未登录 </view>
+          <view class="extra">
+            <text class="tips">点击登录账号</text>
+          </view>
+        </view>
+      </view>
+      <view class="settings" @tap="navigateToSettings">设置</view>
+    </view>
+    <!-- AI 助手入口 -->
+    <view class="ai-entry" @tap="navigateToAi">
+      <view class="ai-entry__icon">AI</view>
+      <view class="ai-entry__content">
+        <view class="ai-entry__title">智能助手</view>
+        <view class="ai-entry__desc">帮你整理信息、回答问题并处理日常任务</view>
+      </view>
+      <view class="ai-entry__action">去提问</view>
+    </view>
+  </scroll-view>
+</template>
+
+<style lang="scss">
+page {
+  height: 100%;
+  overflow: hidden;
+  background-color: #f7f7f8;
+}
+
+/* AI 助手入口 */
+.ai-entry {
+  position: relative;
+  z-index: 99;
+  display: flex;
+  align-items: center;
+  margin: 20rpx 20rpx 0;
+  padding: 26rpx 24rpx;
+  border-radius: 10rpx;
+  background-color: #fff;
+  box-shadow: 0 4rpx 6rpx rgba(240, 240, 240, 0.6);
+}
+
+.ai-entry__icon {
+  flex-shrink: 0;
+  width: 92rpx;
+  height: 92rpx;
+  border-radius: 24rpx;
+  color: #fff;
+  font-size: 28rpx;
+  font-weight: 700;
+  line-height: 92rpx;
+  text-align: center;
+  background-color: #27ba9b;
+}
+
+.ai-entry__content {
+  flex: 1;
+  min-width: 0;
+  margin-left: 18rpx;
+}
+
+.ai-entry__title {
+  color: #1e1e1e;
+  font-size: 30rpx;
+  font-weight: 600;
+  line-height: 40rpx;
+}
+
+.ai-entry__desc {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-top: 8rpx;
+  color: #747f7c;
+  font-size: 24rpx;
+  line-height: 32rpx;
+}
+
+.ai-entry__action {
+  flex-shrink: 0;
+  margin-left: 16rpx;
+  padding: 10rpx 18rpx;
+  border-radius: 999rpx;
+  color: #16806d;
+  font-size: 24rpx;
+  background-color: #e8f8f4;
+}
+
+.viewport {
+  height: 100%;
+  background-repeat: no-repeat;
+  background-size: 100% auto;
+}
+
+/* 用户信息 */
+.profile {
+  margin-top: 30rpx;
+  position: relative;
+
+  /* #ifdef MP-WEIXIN */
+  padding-top: 44px;
+  /* #endif */
+
+  .overview {
+    display: flex;
+    height: 120rpx;
+    padding: 0 36rpx;
+    color: #fff;
+  }
+
+  .avatar {
+    width: 120rpx;
+    height: 120rpx;
+    border-radius: 50%;
+    background-color: #eee;
+  }
+
+  .gray {
+    filter: grayscale(100%);
+  }
+
+  .meta {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    line-height: 30rpx;
+    padding: 16rpx 0;
+    margin-left: 20rpx;
+  }
+
+  .nickname {
+    max-width: 180rpx;
+    margin-bottom: 16rpx;
+    font-size: 30rpx;
+
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .extra {
+    display: flex;
+    font-size: 20rpx;
+  }
+
+  .tips {
+    font-size: 22rpx;
+  }
+
+  .update {
+    padding: 3rpx 10rpx 1rpx;
+    color: rgba(255, 255, 255, 0.8);
+    border: 1rpx solid rgba(255, 255, 255, 0.8);
+    margin-right: 10rpx;
+    border-radius: 30rpx;
+  }
+
+  .settings {
+    position: absolute;
+    bottom: 0;
+    right: 40rpx;
+    font-size: 30rpx;
+    color: #fff;
+  }
+}
+</style>

package/src/views/pagesMember/ai/components/Composer.vue

@@ -0,0 +1,219 @@
+<script setup lang="ts">
+import type { AiAttachment } from '../../../../rpc/base/v1/ai_session'
+
+type InputEventValue = {
+  detail: {
+    value: string
+  }
+}
+
+defineProps<{
+  modelValue: string
+  attachments: AiAttachment[]
+  placeholder: string
+  bottom: string
+  recording: boolean
+  sending: boolean
+  disabled: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+  attach: []
+  record: []
+  send: []
+  'remove-attachment': [attachment: AiAttachment]
+}>()
+
+function handleInput(event: Event) {
+  emit('update:modelValue', ((event as unknown as InputEventValue).detail?.value || '').toString())
+}
+</script>
+
+<template>
+  <view class="composer" :style="{ paddingBottom: bottom }">
+    <view class="composer-main">
+      <button class="attach-button" hover-class="none" @tap="emit('attach')">
+        <uni-icons type="plusempty" size="30" color="#111" />
+      </button>
+      <view class="composer-card">
+        <view v-if="attachments.length" class="composer-attachments">
+          <view
+            v-for="attachment in attachments"
+            :key="attachment.id || attachment.url || attachment.name"
+            class="composer-attachment"
+            @tap="emit('remove-attachment', attachment)"
+          >
+            {{ attachment.name }} ×
+          </view>
+        </view>
+        <textarea
+          class="composer-input"
+          auto-height
+          :maxlength="500"
+          :value="modelValue"
+          :placeholder="placeholder"
+          placeholder-class="composer-placeholder"
+          @input="handleInput"
+        />
+        <button
+          class="voice-button"
+          :class="{ active: recording }"
+          hover-class="none"
+          @tap="emit('record')"
+        >
+          <uni-icons type="mic" size="28" :color="recording ? '#00a96b' : '#111'" />
+        </button>
+      </view>
+      <button
+        class="send-button"
+        :class="{ 'is-disabled': disabled, 'is-sending': sending }"
+        :disabled="disabled"
+        hover-class="none"
+        @tap="emit('send')"
+      >
+        <uni-icons type="paperplane" size="28" :color="disabled ? '#111' : '#00a96b'" />
+      </button>
+    </view>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+.attach-button,
+.voice-button,
+.send-button {
+  padding: 0;
+  margin: 0;
+  border-radius: 0;
+  background: transparent;
+  line-height: normal;
+
+  &::after {
+    border: none;
+  }
+}
+
+.composer {
+  flex-shrink: 0;
+  width: 100%;
+  padding: 14rpx 24rpx 18rpx;
+  overflow: hidden;
+  background-color: transparent;
+  box-sizing: border-box;
+}
+
+.composer-main {
+  display: flex;
+  align-items: center;
+  gap: 16rpx;
+  min-height: 124rpx;
+  padding: 22rpx 18rpx;
+  border-radius: 24rpx;
+  background-color: #fff;
+  box-shadow: 0 12rpx 34rpx rgba(15, 23, 42, 0.08);
+  box-sizing: border-box;
+}
+
+.attach-button {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 72rpx;
+  height: 72rpx;
+  border: 2rpx solid #d6dae2;
+  border-radius: 50%;
+  background-color: #fff;
+  box-shadow: none;
+  box-sizing: border-box;
+}
+
+.composer-card {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 10rpx;
+  min-height: 72rpx;
+  padding: 0 12rpx 0 28rpx;
+  border: 2rpx solid #d6dae2;
+  border-radius: 38rpx;
+  background-color: #fff;
+  box-shadow: none;
+  box-sizing: border-box;
+}
+
+.composer-attachments {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8rpx;
+  width: 100%;
+  padding-top: 4rpx;
+}
+
+.composer-attachment {
+  max-width: 240rpx;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 6rpx 12rpx;
+  border-radius: 8rpx;
+  color: #16806d;
+  font-size: 20rpx;
+  line-height: 28rpx;
+  background-color: #e8f8f4;
+}
+
+.composer-input {
+  flex: 1;
+  min-width: 0;
+  min-height: 42rpx;
+  max-height: 126rpx;
+  padding: 14rpx 0;
+  box-sizing: border-box;
+  color: #333;
+  font-size: 29rpx;
+  line-height: 42rpx;
+  overflow-y: auto;
+  background-color: transparent;
+}
+
+.composer-placeholder {
+  color: #8d929c;
+  font-size: 29rpx;
+}
+
+.voice-button,
+.send-button {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+}
+
+.voice-button {
+  width: 60rpx;
+  height: 60rpx;
+  background-color: transparent;
+}
+
+.voice-button.active {
+  background-color: #e8f8f4;
+}
+
+.send-button {
+  width: 74rpx;
+  height: 74rpx;
+  background-color: #f2f2f2;
+}
+
+.send-button.is-disabled {
+  background-color: #f2f2f2;
+}
+
+.send-button:not(.is-disabled) {
+  background-color: #e7f7f2;
+}
+</style>