Initial commit: AI chat assistant with workflow chat, workspace, and profile tabs
Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
251
components/ProfilePanel.uvue
Normal file
251
components/ProfilePanel.uvue
Normal file
@@ -0,0 +1,251 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user