@liujitcn/kratos-taro-app-system 0.0.1

package/src/views/pages/my/my.tsx

@@ -0,0 +1,82 @@
+import { Image, ScrollView, Text, View } from '@tarojs/components'
+import {
+  formatSrc,
+  navigateAppRoute,
+  navigateToLogin,
+  resolveBundledAsset,
+  useUserStore,
+} from '@liujitcn/kratos-taro-app-core'
+import './my.scss'
+
+const defaultAvatar = resolveBundledAsset('static/images/avatar.png')
+const centerBackground = resolveBundledAsset('static/images/center_bg.png')
+
+/** 个人中心首页。 */
+export default function MyPage() {
+  const profile = useUserStore((state) => state.userInfo)
+  const isLoggedIn = useUserStore((state) => state.isAuthenticated())
+  const ensureAuthenticated = useUserStore((state) => state.ensureAuthenticated)
+
+  const openAuthenticatedPage = (route: string) => {
+    if (!ensureAuthenticated()) {
+      navigateToLogin()
+      return
+    }
+    navigateAppRoute(route)
+  }
+
+  return (
+    <ScrollView
+      enableBackToTop
+      scrollY
+      className='my-viewport'
+      style={{ backgroundImage: `url(${centerBackground})` }}
+    >
+      <View className={`my-profile${process.env.TARO_ENV === 'weapp' ? ' my-profile--weapp' : ''}`}>
+        {isLoggedIn && profile ? (
+          <View className='my-overview'>
+            <View onClick={() => navigateAppRoute('app/profile')}>
+              <Image
+                className='my-avatar'
+                src={profile.avatar ? formatSrc(profile.avatar) : defaultAvatar}
+                mode='aspectFill'
+              />
+            </View>
+            <View className='my-meta'>
+              <View className='my-nickname'>{profile.nick_name}</View>
+              <View className='my-extra' onClick={() => navigateAppRoute('app/profile')}>
+                <Text className='my-update'>更新头像昵称</Text>
+              </View>
+            </View>
+          </View>
+        ) : (
+          <View className='my-overview'>
+            <View onClick={() => navigateToLogin()}>
+              <Image className='my-avatar my-avatar--gray' src={defaultAvatar} mode='aspectFill' />
+            </View>
+            <View className='my-meta'>
+              <View className='my-nickname' onClick={() => navigateToLogin()}>
+                未登录
+              </View>
+              <View className='my-extra'>
+                <Text className='my-tips'>点击登录账号</Text>
+              </View>
+            </View>
+          </View>
+        )}
+        <View className='my-settings' onClick={() => openAuthenticatedPage('app/settings')}>
+          设置
+        </View>
+      </View>
+
+      <View className='my-ai-entry' onClick={() => openAuthenticatedPage('app/ai')}>
+        <View className='my-ai-entry__icon'>AI</View>
+        <View className='my-ai-entry__content'>
+          <View className='my-ai-entry__title'>智能助手</View>
+          <View className='my-ai-entry__desc'>帮你整理信息、回答问题并处理日常任务</View>
+        </View>
+        <View className='my-ai-entry__action'>去提问</View>
+      </View>
+    </ScrollView>
+  )
+}

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

@@ -0,0 +1,71 @@
+import { Button, Text, Textarea, View } from '@tarojs/components'
+import { Microphone, Plus, Share } from '@liujitcn/kratos-taro-app-ui'
+import type { AiAttachment } from '../../../../rpc/base/v1/ai_session'
+import './composer.scss'
+
+type ComposerProps = {
+  value: string
+  attachments: AiAttachment[]
+  placeholder: string
+  bottom: string
+  recording: boolean
+  sending: boolean
+  disabled: boolean
+  onChange: (value: string) => void
+  onAttach: () => void
+  onRecord: () => void
+  onSend: () => void
+  onRemoveAttachment: (attachment: AiAttachment) => void
+}
+
+/** AI 助手消息输入器。 */
+export default function Composer(props: ComposerProps) {
+  return (
+    <View className='composer' style={{ paddingBottom: props.bottom }}>
+      <View className='composer-main'>
+        <Button className='attach-button' hoverClass='none' onClick={props.onAttach}>
+          <Plus size={30} color='#111' />
+        </Button>
+        <View className='composer-card'>
+          {props.attachments.length ? (
+            <View className='composer-attachments'>
+              {props.attachments.map((attachment) => (
+                <View
+                  key={attachment.id || attachment.url || attachment.name}
+                  className='composer-attachment'
+                  onClick={() => props.onRemoveAttachment(attachment)}
+                >
+                  <Text>{attachment.name} ×</Text>
+                </View>
+              ))}
+            </View>
+          ) : null}
+          <Textarea
+            className='composer-input'
+            autoHeight
+            maxlength={500}
+            value={props.value}
+            placeholder={props.placeholder}
+            placeholderClass='composer-placeholder'
+            onInput={(event) => props.onChange(event.detail.value)}
+          />
+          <Button
+            className={`voice-button${props.recording ? ' active' : ''}`}
+            hoverClass='none'
+            onClick={props.onRecord}
+          >
+            <Microphone size={28} color={props.recording ? '#00a96b' : '#111'} />
+          </Button>
+        </View>
+        <Button
+          className={`send-button${props.disabled ? ' is-disabled' : ''}${props.sending ? ' is-sending' : ''}`}
+          disabled={props.disabled}
+          hoverClass='none'
+          onClick={props.onSend}
+        >
+          <Share size={28} color={props.disabled ? '#111' : '#00a96b'} />
+        </Button>
+      </View>
+    </View>
+  )
+}

package/src/views/pagesMember/ai/components/SessionDrawer.tsx

@@ -0,0 +1,100 @@
+import { Button, Input, ScrollView, Text, View } from '@tarojs/components'
+import { More, Plus, Search } from '@liujitcn/kratos-taro-app-ui'
+import type { AiSession } from '../../../../rpc/base/v1/ai_session'
+import './session-drawer.scss'
+
+type SessionDrawerProps = {
+  open: boolean
+  topPadding: string
+  keyword: string
+  loading: boolean
+  sessions: AiSession[]
+  activeSessionId: string
+  onClose: () => void
+  onCreate: () => void
+  onSelect: (sessionID: string) => void
+  onAction: (session: AiSession) => void
+  onKeywordChange: (value: string) => void
+}
+
+function formatSessionTime(session: AiSession) {
+  const seconds = Number(session.updated_at?.seconds ?? 0)
+  const nanos = Number(session.updated_at?.nanos ?? 0)
+  const timestamp = seconds * 1000 + Math.floor(nanos / 1_000_000)
+  if (!timestamp) return ''
+  const date = new Date(timestamp)
+  const now = new Date()
+  const isToday =
+    date.getFullYear() === now.getFullYear() &&
+    date.getMonth() === now.getMonth() &&
+    date.getDate() === now.getDate()
+  const month = `${date.getMonth() + 1}`.padStart(2, '0')
+  const day = `${date.getDate()}`.padStart(2, '0')
+  const hour = `${date.getHours()}`.padStart(2, '0')
+  const minute = `${date.getMinutes()}`.padStart(2, '0')
+  return isToday ? `${hour}:${minute}` : `${month}-${day}`
+}
+
+/** AI 助手历史会话抽屉。 */
+export default function SessionDrawer(props: SessionDrawerProps) {
+  return (
+    <>
+      {props.open ? <View className='session-mask' onClick={props.onClose} /> : null}
+      <View
+        className={`session-drawer${props.open ? ' is-open' : ''}`}
+        style={{ paddingTop: props.topPadding }}
+      >
+        <View className='session-drawer__head'>
+          <View className='session-drawer__title'>历史会话</View>
+          <Button className='session-create' hoverClass='none' onClick={props.onCreate}>
+            <Plus size={16} color='#27ba9b' />
+            <Text>新建</Text>
+          </Button>
+        </View>
+        <View className='session-search'>
+          <Search size={16} color='#898b94' />
+          <Input
+            className='session-search-input'
+            confirmType='search'
+            placeholder='搜索会话'
+            placeholderClass='session-search-placeholder'
+            value={props.keyword}
+            onInput={(event) => props.onKeywordChange(event.detail.value)}
+          />
+        </View>
+        <ScrollView className='session-list' scrollY showScrollbar={false}>
+          {props.loading ? <View className='session-empty'>正在加载会话...</View> : null}
+          {props.sessions.map((session) => (
+            <View
+              key={session.id}
+              className={`session-item${session.id === props.activeSessionId ? ' is-active' : ''}`}
+              onClick={() => props.onSelect(session.id)}
+              onLongPress={() => props.onAction(session)}
+            >
+              <View className='session-content'>
+                <View className='session-row'>
+                  <View className='session-title'>{session.title}</View>
+                  <View className='session-time'>{formatSessionTime(session)}</View>
+                </View>
+                <View className='session-summary'>{session.summary || '暂无摘要'}</View>
+              </View>
+              <Button
+                className='session-more'
+                hoverClass='none'
+                onClick={(event) => {
+                  event.stopPropagation()
+                  props.onAction(session)
+                }}
+              >
+                <More size={22} color='#9ca3af' />
+              </Button>
+            </View>
+          ))}
+          {!props.loading && !props.sessions.length ? (
+            <View className='session-empty'>没有匹配的会话</View>
+          ) : null}
+        </ScrollView>
+      </View>
+    </>
+  )
+}

package/src/views/pagesMember/ai/components/WelcomePanel.tsx

@@ -0,0 +1,75 @@
+import { Button, Text, View } from '@tarojs/components'
+import { ArrowRight, Refresh } from '@liujitcn/kratos-taro-app-ui'
+import type { AiShortcut } from '../../../../rpc/base/v1/ai_tool'
+import './welcome-panel.scss'
+
+type WelcomePanelProps = {
+  greetingMessage: string
+  loading: boolean
+  shortcuts: AiShortcut[]
+  canRefresh: boolean
+  onRefresh: () => void
+  onShortcutTap: (shortcut: AiShortcut) => void
+}
+
+/** AI 助手空会话欢迎面板。 */
+export default function WelcomePanel(props: WelcomePanelProps) {
+  return (
+    <View className='welcome-panel'>
+      <View className='welcome-row is-hello'>
+        <View className='ai-avatar'>
+          <View className='ai-avatar__halo' />
+          <View className='ai-avatar__hair-back' />
+          <View className='ai-avatar__face'>
+            <View className='ai-avatar__bang' />
+            <View className='ai-avatar__eyes'><View /><View /></View>
+            <View className='ai-avatar__blush is-left' />
+            <View className='ai-avatar__blush is-right' />
+            <View className='ai-avatar__smile' />
+          </View>
+          <View className='ai-avatar__hair-side is-left' />
+          <View className='ai-avatar__hair-side is-right' />
+          <View className='ai-avatar__body' />
+          <View className='ai-avatar__bow' />
+          <View className='ai-avatar__spark' />
+        </View>
+        <View className='welcome-bubble is-hello'>您好，AI助手为您服务！</View>
+      </View>
+      <View className='welcome-bubble is-intro'>{props.greetingMessage}</View>
+      <View className='prompt-card'>
+        <View className='prompt-card__head'>
+          <View>
+            <View className='prompt-card__eyebrow'>快捷操作</View>
+            <View className='prompt-card__title'>您可以这样问</View>
+          </View>
+          {props.canRefresh ? (
+            <Button className='prompt-refresh' hoverClass='none' onClick={props.onRefresh}>
+              <Text>换一换</Text><Refresh size={25} color='#00a96b' />
+            </Button>
+          ) : null}
+        </View>
+        {props.loading ? <View className='prompt-loading'>正在加载...</View> : null}
+        {!props.loading && !props.shortcuts.length ? (
+          <View className='prompt-loading'>暂无可用快捷助手</View>
+        ) : null}
+        {!props.loading
+          ? props.shortcuts.map((shortcut, index) => (
+              <Button
+                key={shortcut.key || shortcut.title}
+                className='prompt-item'
+                hoverClass='none'
+                onClick={() => props.onShortcutTap(shortcut)}
+              >
+                <Text className='prompt-index'>{index + 1}</Text>
+                <View className='prompt-content'>
+                  <Text className='prompt-text'>{shortcut.title}</Text>
+                  <Text className='prompt-meta'>{shortcut.group || '通用助手'}</Text>
+                </View>
+                <ArrowRight size={20} color='#9aa0aa' />
+              </Button>
+            ))
+          : null}
+      </View>
+    </View>
+  )
+}

package/src/views/pagesMember/ai/components/composer.scss

@@ -0,0 +1,114 @@
+.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: 14px 24px 18px;
+  overflow: hidden;
+  background-color: transparent;
+  box-sizing: border-box;
+}
+
+.composer-main {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  min-height: 124px;
+  padding: 22px 18px;
+  border-radius: 24px;
+  background-color: #fff;
+  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.08);
+  box-sizing: border-box;
+}
+
+.attach-button {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 72px;
+  height: 72px;
+  border: 2px 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: 10px;
+  min-height: 72px;
+  padding: 0 12px 0 28px;
+  border: 2px solid #d6dae2;
+  border-radius: 38px;
+  background-color: #fff;
+  box-shadow: none;
+  box-sizing: border-box;
+}
+
+.composer-attachments {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  width: 100%;
+  padding-top: 4px;
+}
+
+.composer-attachment {
+  max-width: 240px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 6px 12px;
+  border-radius: 8px;
+  color: #16806d;
+  font-size: 20px;
+  line-height: 28px;
+  background-color: #e8f8f4;
+}
+
+.composer-input {
+  flex: 1;
+  min-width: 0;
+  min-height: 42px;
+  max-height: 126px;
+  padding: 14px 0;
+  box-sizing: border-box;
+  color: #333;
+  font-size: 29px;
+  line-height: 42px;
+  overflow-y: auto;
+  background-color: transparent;
+}
+
+.composer-placeholder { color: #8d929c; font-size: 29px; }
+
+.voice-button,
+.send-button {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+}
+
+.voice-button { width: 60px; height: 60px; background-color: transparent; }
+.voice-button.active { background-color: #e8f8f4; }
+.send-button { width: 74px; height: 74px; background-color: #f2f2f2; }
+.send-button.is-disabled { background-color: #f2f2f2; }
+.send-button:not(.is-disabled) { background-color: #e7f7f2; }

package/src/views/pagesMember/ai/components/session-drawer.scss

@@ -0,0 +1,135 @@
+.session-create,
+.session-more {
+  padding: 0;
+  margin: 0;
+  border-radius: 0;
+  background: transparent;
+  line-height: normal;
+  &::after { border: none; }
+}
+
+.session-mask {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 560px;
+  z-index: 20;
+  background-color: rgba(0, 0, 0, 0.18);
+}
+
+.session-drawer {
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  z-index: 21;
+  width: 560px;
+  padding: 0 24px 36px;
+  background-color: #fff;
+  box-shadow: none;
+  box-sizing: border-box;
+  transform: translateX(-100%);
+  transition: transform 0.2s ease;
+}
+
+.session-drawer.is-open {
+  box-shadow: 24px 0 60px rgba(0, 0, 0, 0.12);
+  transform: translateX(0);
+}
+
+.session-drawer__head {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 76px;
+  margin-bottom: 18px;
+}
+
+.session-drawer__title { color: #333; font-size: 32px; font-weight: 700; line-height: 40px; }
+
+.session-create {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  width: 112px;
+  height: 52px;
+  border-radius: 8px;
+  color: #27ba9b;
+  font-size: 24px;
+  line-height: 52px;
+  background-color: #e8f8f4;
+}
+
+.session-search {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  height: 64px;
+  padding: 0 18px;
+  margin-bottom: 18px;
+  border-radius: 10px;
+  background-color: #f6f7f9;
+  box-sizing: border-box;
+}
+
+.session-search-input { flex: 1; min-width: 0; color: #333; font-size: 24px; }
+.session-search-placeholder { color: #b8bcc5; }
+.session-list { flex: 1; min-height: 0; }
+
+.session-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 22px 16px 22px 22px;
+  border: 1px solid #eee;
+  border-radius: 10px;
+  background-color: #fff;
+}
+
+.session-item + .session-item { margin-top: 18px; }
+.session-item.is-active { border-color: #c7eee4; background-color: #e8f8f4; }
+.session-content { flex: 1; min-width: 0; }
+.session-row { display: flex; align-items: center; gap: 14px; }
+
+.session-title {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: #333;
+  font-size: 26px;
+  font-weight: 600;
+  line-height: 34px;
+}
+
+.session-time { flex-shrink: 0; color: #a6abb3; font-size: 20px; line-height: 30px; }
+
+.session-summary {
+  margin-top: 10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: #777;
+  font-size: 22px;
+  line-height: 32px;
+}
+
+.session-more {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  background-color: transparent;
+}
+
+.session-empty { padding: 60px 0; color: #999; font-size: 24px; text-align: center; }