assistant/components/ProfilePanel.uvue

<template>
  <!-- Overlay -->
  <view
    v-if="visible"
    class="profile-overlay"
    :class="{ 'profile-overlay--visible': visible }"
    @tap="close"
    @touchmove.stop.prevent="() => {}"
  ></view>

  <!-- Panel (slides from right) -->
  <view class="profile-panel" :class="{ 'profile-panel--open': visible }">
    <!-- Header: Avatar + Name -->
    <view class="profile-panel__header">
      <view class="profile-panel__avatar">
        <text class="profile-panel__avatar-emoji">🧑‍💻</text>
      </view>
      <text class="profile-panel__name">用户</text>
      <text class="profile-panel__id">ID: AI助手用户</text>
    </view>

    <!-- Stats -->
    <view class="profile-panel__stats">
      <view class="profile-panel__stat">
        <text class="profile-panel__stat-value">{{ conversationsCount }}</text>
        <text class="profile-panel__stat-label">对话数</text>
      </view>
      <view class="profile-panel__stat-divider"></view>
      <view class="profile-panel__stat">
        <text class="profile-panel__stat-value">{{ workspaceCount }}</text>
        <text class="profile-panel__stat-label">工作结果</text>
      </view>
    </view>

    <!-- Menu items -->
    <view class="profile-panel__menu">
      <view
        v-for="item in menuItems"
        :key="item.key"
        class="profile-panel__menu-item"
        @tap="onMenuItem(item.key)"
      >
        <text class="profile-panel__menu-icon">{{ item.icon }}</text>
        <text class="profile-panel__menu-label">{{ item.label }}</text>
        <text class="profile-panel__menu-arrow">›</text>
      </view>
    </view>

    <!-- Version -->
    <text class="profile-panel__version">AI助手 v1.0.0</text>
  </view>
</template>

<script setup lang="uts">
const props = defineProps<{
  visible: boolean
  conversationsCount: number
  workspaceCount: number
}>()

const emit = defineEmits<{
  close: []
}>()

const menuItems = [
  { key: 'settings', icon: '⚙️', label: '设置' },
  { key: 'about', icon: 'ℹ️', label: '关于' },
  { key: 'clear', icon: '🗑', label: '清除数据' },
]

function close(): void {
  emit('close')
}

function onMenuItem(key: string): void {
  if (key === 'clear') {
    uni.showModal({
      title: '确认清除',
      content: '将清除所有对话历史和工作空间数据，此操作不可恢复。',
      success: (res: any) => {
        if (res.confirm) {
          uni.clearStorageSync()
          uni.showToast({
            title: '数据已清除',
            icon: 'success',
          })
          close()
        }
      },
    })
  } else {
    uni.showToast({
      title: `功能开发中: ${key}`,
      icon: 'none',
    })
  }
}
</script>

<style scoped>
/* Overlay */
.profile-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 999;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.profile-overlay--visible {
  opacity: 1;
}

/* Panel */
.profile-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 600rpx;
  background: #1a1a2e;
  z-index: 1000;
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  box-shadow: -8rpx 0 40rpx rgba(0, 0, 0, 0.5);
}

.profile-panel--open {
  transform: translateX(0);
}

/* Header */
.profile-panel__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 64rpx 32rpx 32rpx;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.profile-panel__avatar {
  width: 112rpx;
  height: 112rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, #6c5ce7, #a29bfe);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20rpx;
  box-shadow: 0 8rpx 24rpx rgba(108, 92, 231, 0.3);
}

.profile-panel__avatar-emoji {
  font-size: 56rpx;
}

.profile-panel__name {
  font-size: 36rpx;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 8rpx;
}

.profile-panel__id {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.35);
}

/* Stats */
.profile-panel__stats {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 28rpx 32rpx;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.profile-panel__stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.profile-panel__stat-value {
  font-size: 40rpx;
  font-weight: 700;
  color: #a29bfe;
  margin-bottom: 4rpx;
}

.profile-panel__stat-label {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.4);
}

.profile-panel__stat-divider {
  width: 1px;
  height: 48rpx;
  background: rgba(255, 255, 255, 0.1);
}

/* Menu */
.profile-panel__menu {
  padding: 16rpx 0;
  flex: 1;
}

.profile-panel__menu-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 28rpx 32rpx;
  transition: background 0.2s ease;
}

.profile-panel__menu-item:active {
  background: rgba(255, 255, 255, 0.04);
}

.profile-panel__menu-icon {
  font-size: 32rpx;
  margin-right: 20rpx;
}

.profile-panel__menu-label {
  flex: 1;
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.8);
}

.profile-panel__menu-arrow {
  font-size: 36rpx;
  color: rgba(255, 255, 255, 0.25);
  font-weight: 300;
}

/* Version */
.profile-panel__version {
  text-align: center;
  padding: 24rpx;
  font-size: 22rpx;
  color: rgba(255, 255, 255, 0.2);
}
</style>