feat(web): update components

- PersonalWorkbench.vue: update personal workbench component
- SidebarRail.vue: update sidebar rail component
- TopBar.vue: update top bar component
- ConfirmDialog.vue: update confirm dialog component
This commit is contained in:
caoxiaozhu
2026-05-13 13:12:28 +00:00
parent 97b0851e26
commit eec4efe207
4 changed files with 129 additions and 135 deletions

View File

@@ -42,27 +42,18 @@
</div>
<div class="assistant-tools">
<button type="button" class="ghost-action" :disabled="Boolean(pendingAction) || confirmDialogBusy" @click="triggerFileUpload">
<button type="button" class="ghost-action" :disabled="Boolean(pendingAction)" @click="triggerFileUpload">
<i class="mdi mdi-upload-outline"></i>
<span>上传票据</span>
</button>
<button
type="button"
class="secondary-action"
:disabled="Boolean(pendingAction) || confirmDialogBusy"
@click="handleContinueConversation"
>
<i :class="pendingAction === 'continue' ? 'mdi mdi-loading mdi-spin' : 'mdi mdi-history'"></i>
<span>{{ pendingAction === 'continue' ? '恢复中...' : '继续会话' }}</span>
</button>
<button
type="button"
class="hero-action"
:disabled="Boolean(pendingAction) || confirmDialogBusy"
@click="handleNewConversation"
:disabled="Boolean(pendingAction)"
@click="handleExpenseConversationAction"
>
<i :class="pendingAction === 'new' ? 'mdi mdi-loading mdi-spin' : 'mdi mdi-magnify-scan'"></i>
<span>{{ pendingAction === 'new' ? '处理中...' : '新建会话' }}</span>
<i :class="pendingAction === 'expense' ? 'mdi mdi-loading mdi-spin' : expenseActionIcon"></i>
<span>{{ pendingAction === 'expense' ? '处理中...' : expenseActionLabel }}</span>
</button>
</div>
</div>
@@ -146,34 +137,19 @@
</article>
</section>
<ConfirmDialog
:open="confirmDialogOpen"
badge="新建会话"
badge-tone="info"
title="开始新会话会清空当前历史对话"
description="检测到你还有未清除的会话记录。确认后会删除当前用户的全部历史对话,再开启新的智能体会话。"
cancel-text="取消"
confirm-text="确认删除并新建"
busy-text="清空中..."
confirm-tone="primary"
confirm-icon="mdi mdi-delete-sweep-outline"
:busy="confirmDialogBusy"
@close="closeConfirmDialog"
@confirm="confirmStartNewConversation"
/>
</template>
<script setup>
import { ref } from 'vue'
import { computed, onMounted, ref, watch } from 'vue'
import PanelHead from '../shared/PanelHead.vue'
import ConfirmDialog from '../shared/ConfirmDialog.vue'
import robotAssistant from '../../assets/robot-helper.png'
import { useSystemState } from '../../composables/useSystemState.js'
import { useToast } from '../../composables/useToast.js'
import { clearUserConversations, fetchLatestConversation } from '../../services/orchestrator.js'
defineProps({
showHeader: { type: Boolean, default: true }
const props = defineProps({
showHeader: { type: Boolean, default: true },
assistantModalOpen: { type: Boolean, default: false }
})
const emit = defineEmits(['openAssistant'])
@@ -183,9 +159,48 @@ const assistantDraft = ref('')
const fileInputRef = ref(null)
const selectedFiles = ref([])
const pendingAction = ref('')
const confirmDialogOpen = ref(false)
const confirmDialogBusy = ref(false)
const pendingAssistantPayload = ref(null)
const latestExpenseConversation = ref(null)
const MAX_ATTACHMENTS = 10
const SESSION_TYPE_EXPENSE = 'expense'
const SESSION_TYPE_KNOWLEDGE = 'knowledge'
const hasExpenseConversation = computed(() => Boolean(latestExpenseConversation.value?.conversation_id || latestExpenseConversation.value?.conversationId))
const expenseActionLabel = computed(() => (hasExpenseConversation.value ? '继续报销' : '新建报销'))
const expenseActionIcon = computed(() => (hasExpenseConversation.value ? 'mdi mdi-history' : 'mdi mdi-magnify-scan'))
function buildSelectedFileKey(file) {
return [file?.name, file?.size, file?.lastModified, file?.type].join('__')
}
function mergeSelectedFiles(existingFiles, incomingFiles) {
const nextFiles = []
const seen = new Set()
for (const file of existingFiles) {
const key = buildSelectedFileKey(file)
if (seen.has(key)) continue
seen.add(key)
nextFiles.push(file)
}
let overflowCount = 0
for (const file of incomingFiles) {
const key = buildSelectedFileKey(file)
if (seen.has(key)) continue
if (nextFiles.length >= MAX_ATTACHMENTS) {
overflowCount += 1
continue
}
seen.add(key)
nextFiles.push(file)
}
return {
files: nextFiles,
overflowCount
}
}
function resolveCurrentUserId() {
const user = currentUser.value || {}
@@ -218,7 +233,7 @@ function emitAssistant(payload) {
}
async function loadLatestConversation() {
const payload = await fetchLatestConversation(resolveCurrentUserId())
const payload = await fetchLatestConversation(resolveCurrentUserId(), SESSION_TYPE_EXPENSE)
return payload?.found ? payload.conversation || null : null
}
@@ -227,7 +242,7 @@ function handleWorkbenchEnter(event) {
return
}
handleContinueConversation()
handleExpenseConversationAction()
}
function triggerFileUpload() {
@@ -235,87 +250,53 @@ function triggerFileUpload() {
}
function handleWorkbenchFilesChange(event) {
selectedFiles.value = Array.from(event.target.files ?? [])
const mergeResult = mergeSelectedFiles(selectedFiles.value, Array.from(event.target.files ?? []))
selectedFiles.value = mergeResult.files
if (mergeResult.overflowCount > 0) {
toast(`一次最多上传 ${MAX_ATTACHMENTS} 份附件,已保留前 ${MAX_ATTACHMENTS} 份。`)
}
if (fileInputRef.value) {
fileInputRef.value.value = ''
}
}
async function handleContinueConversation() {
if (pendingAction.value || confirmDialogBusy.value) {
async function refreshLatestExpenseConversation() {
try {
latestExpenseConversation.value = await loadLatestConversation()
} catch (error) {
console.warn('Failed to refresh latest expense conversation:', error)
latestExpenseConversation.value = null
}
}
async function clearKnowledgeHistoryBeforeExpense() {
await clearUserConversations(resolveCurrentUserId(), SESSION_TYPE_KNOWLEDGE)
}
async function handleExpenseConversationAction() {
if (pendingAction.value) {
return
}
pendingAction.value = 'continue'
pendingAction.value = 'expense'
const nextPayload = buildAssistantPayload()
try {
await clearKnowledgeHistoryBeforeExpense()
const conversation = await loadLatestConversation()
latestExpenseConversation.value = conversation
emitAssistant({
...nextPayload,
conversation
})
} catch (error) {
console.warn('Failed to load latest conversation:', error)
emitAssistant(nextPayload)
console.warn('Failed to open expense conversation:', error)
toast(error?.message || '打开报销会话失败,请稍后重试。')
} finally {
pendingAction.value = ''
}
}
async function handleNewConversation() {
if (pendingAction.value || confirmDialogBusy.value) {
return
}
pendingAction.value = 'new'
const nextPayload = buildAssistantPayload()
try {
const conversation = await loadLatestConversation()
if (!conversation) {
emitAssistant(nextPayload)
pendingAction.value = ''
return
}
pendingAssistantPayload.value = nextPayload
confirmDialogOpen.value = true
} catch (error) {
console.warn('Failed to inspect latest conversation before reset:', error)
emitAssistant(nextPayload)
pendingAction.value = ''
}
}
function closeConfirmDialog() {
if (confirmDialogBusy.value) {
return
}
confirmDialogOpen.value = false
pendingAssistantPayload.value = null
pendingAction.value = ''
}
async function confirmStartNewConversation() {
if (confirmDialogBusy.value) {
return
}
confirmDialogBusy.value = true
try {
await clearUserConversations(resolveCurrentUserId())
const nextPayload = pendingAssistantPayload.value || buildAssistantPayload()
confirmDialogOpen.value = false
pendingAssistantPayload.value = null
pendingAction.value = ''
emitAssistant(nextPayload)
} catch (error) {
toast(error?.message || '清空历史会话失败,请稍后重试。')
} finally {
confirmDialogBusy.value = false
}
}
const todoItems = [
{
title: '业务招待报销建议补参与人员',
@@ -402,6 +383,19 @@ const policyItems = [
date: '2026-04-25'
}
]
onMounted(() => {
refreshLatestExpenseConversation()
})
watch(
() => props.assistantModalOpen,
(open, previous) => {
if (previous && !open) {
refreshLatestExpenseConversation()
}
}
)
</script>
<style scoped>

View File

@@ -75,7 +75,7 @@ const sidebarMeta = {
workbench: { label: '个人工作台' },
requests: { label: '个人报销' },
approval: { label: '审批中心', badge: '12' },
chat: { label: 'AI 助手' },
chat: { label: '财务知识问答' },
policies: { label: '知识管理' },
audit: { label: '任务规则中心' },
employees: { label: '员工管理' },

View File

@@ -7,17 +7,17 @@
</div>
<div class="top-actions">
<template v-if="isChat">
<div class="kpi-chips">
<div v-for="kpi in chatKpis" :key="kpi.label" class="kpi-chip" :style="{ '--chip-color': kpi.color }">
<span class="chip-value">{{ kpi.value }}<small>{{ kpi.unit }}</small></span>
<span class="chip-label">{{ kpi.label }}</span>
<span class="chip-delta" :class="kpi.trend">{{ kpi.meta }}</span>
</div>
</div>
</template>
<template v-else-if="isOverview">
<template v-if="isChat">
<div class="kpi-chips">
<div v-for="kpi in chatKpis" :key="kpi.label" class="kpi-chip" :style="{ '--chip-color': kpi.color }">
<span class="chip-value">{{ kpi.value }}<small>{{ kpi.unit }}</small></span>
<span class="chip-label">{{ kpi.label }}</span>
<span class="chip-delta" :class="kpi.trend">{{ kpi.meta }}</span>
</div>
</div>
</template>
<template v-else-if="isOverview">
<div class="range-combo" aria-label="首页时间范围">
<div class="range-shell">
<span class="range-meta">
@@ -158,17 +158,17 @@ const props = defineProps({
}
})
const emit = defineEmits([
'update:search',
'update:activeRange',
'update:customRange',
'batchApprove',
'openChat',
'newApplication'
])
const isChat = computed(() => props.activeView === 'chat')
const isOverview = computed(() => props.activeView === 'overview')
const emit = defineEmits([
'update:search',
'update:activeRange',
'update:customRange',
'batchApprove',
'openChat',
'newApplication'
])
const isChat = computed(() => props.activeView === 'chat')
const isOverview = computed(() => props.activeView === 'overview')
const isRequests = computed(() => props.activeView === 'requests')
const isApproval = computed(() => props.activeView === 'approval')
const isPolicies = computed(() => props.activeView === 'policies')
@@ -614,10 +614,10 @@ function formatRangeLabel(start, end) {
min-width: 0;
}
.create-top-btn {
height: 40px;
display: inline-flex;
align-items: center;
.create-top-btn {
height: 40px;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0 18px;
border: 0;
@@ -630,11 +630,11 @@ function formatRangeLabel(start, end) {
white-space: nowrap;
}
.create-top-btn:hover {
background: #047857;
}
@media (max-width: 1120px) {
.create-top-btn:hover {
background: #047857;
}
@media (max-width: 1120px) {
.range-combo {
width: 100%;
justify-content: flex-end;

View File

@@ -95,7 +95,7 @@ function handleCancel() {
.shared-confirm-mask {
position: fixed;
inset: 0;
z-index: 1200;
z-index: 10020;
display: grid;
place-items: center;
padding: 24px;
@@ -201,8 +201,8 @@ function handleCancel() {
}
.shared-confirm-btn.confirm.danger {
background: linear-gradient(135deg, #f97316, #ea580c);
box-shadow: 0 12px 24px rgba(234, 88, 12, 0.22);
background: linear-gradient(135deg, #ef4444, #dc2626);
box-shadow: 0 12px 24px rgba(220, 38, 38, 0.22);
}
.shared-confirm-btn.cancel:hover:not(:disabled) {