feat(frontend): 添加 TypeScript 类型定义和组件
- 添加 TypeScript API 客户端 (api/index.ts) - 添加全局样式 (styles/) - 添加类型定义 (types/) - 添加 Vue 组件 (components/) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Developer
423
frontend/src/components/common/CreateProjectDialog.vue
Normal file
423
frontend/src/components/common/CreateProjectDialog.vue
Normal file
@@ -0,0 +1,423 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
:model-value="visible"
|
||||
title=""
|
||||
width="480px"
|
||||
class="create-dialog"
|
||||
:show-close="false"
|
||||
align-center
|
||||
@update:model-value="$emit('update:visible', $event)"
|
||||
>
|
||||
<template #header>
|
||||
<div class="dialog-header">
|
||||
<div class="header-glow"></div>
|
||||
<div class="header-content">
|
||||
<div class="dialog-icon-new">
|
||||
<el-icon size="24"><FolderAdd /></el-icon>
|
||||
</div>
|
||||
<div class="header-text">
|
||||
<h3>创建新项目</h3>
|
||||
<p>开始构建您的AI训练数据集</p>
|
||||
</div>
|
||||
</div>
|
||||
<button class="close-btn" @click="handleClose">
|
||||
<el-icon><Close /></el-icon>
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
<div class="dialog-body">
|
||||
<div class="form-card">
|
||||
<div class="input-group">
|
||||
<label class="input-label">
|
||||
<span class="label-icon">✦</span>
|
||||
项目名称
|
||||
</label>
|
||||
<el-input
|
||||
v-model="formData.name"
|
||||
placeholder="例如：客服问答数据集"
|
||||
size="large"
|
||||
class="custom-input"
|
||||
/>
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<label class="input-label">
|
||||
<span class="label-icon">✦</span>
|
||||
项目描述
|
||||
</label>
|
||||
<el-input
|
||||
v-model="formData.description"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="描述这个项目的用途和数据类型..."
|
||||
class="custom-input"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Templates -->
|
||||
<div class="templates-section">
|
||||
<span class="templates-label">快速开始模板</span>
|
||||
<div class="templates-grid">
|
||||
<div class="template-card" @click="useTemplate('qa')">
|
||||
<el-icon><ChatDotRound /></el-icon>
|
||||
<span>问答对</span>
|
||||
</div>
|
||||
<div class="template-card" @click="useTemplate('conversation')">
|
||||
<el-icon><ChatLineRound /></el-icon>
|
||||
<span>对话</span>
|
||||
</div>
|
||||
<div class="template-card" @click="useTemplate('instruction')">
|
||||
<el-icon><Promotion /></el-icon>
|
||||
<span>指令</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="handleClose" class="btn-cancel">取消</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
:loading="loading"
|
||||
@click="handleSubmit"
|
||||
class="btn-create"
|
||||
>
|
||||
<el-icon v-if="!loading"><Plus /></el-icon>
|
||||
创建项目
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, watch } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:visible', 'submit'])
|
||||
|
||||
const formData = reactive({
|
||||
name: '',
|
||||
description: ''
|
||||
})
|
||||
|
||||
const templates = {
|
||||
qa: { name: '问答数据集', description: '基于文档生成问答对训练数据' },
|
||||
conversation: { name: '对话数据集', description: '创建多轮对话训练数据' },
|
||||
instruction: { name: '指令数据集', description: '构建指令跟随训练数据' }
|
||||
}
|
||||
|
||||
const useTemplate = (type) => {
|
||||
const t = templates[type]
|
||||
formData.name = t.name
|
||||
formData.description = t.description
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
emit('update:visible', false)
|
||||
}
|
||||
|
||||
const handleSubmit = () => {
|
||||
emit('submit', { ...formData })
|
||||
}
|
||||
|
||||
// Reset form when dialog opens
|
||||
watch(() => props.visible, (newVal) => {
|
||||
if (newVal) {
|
||||
formData.name = ''
|
||||
formData.description = ''
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.create-dialog :deep(.el-dialog) {
|
||||
border-radius: 20px;
|
||||
background: linear-gradient(145deg, rgba(20, 20, 30, 0.98) 0%, rgba(15, 15, 25, 0.98) 100%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
box-shadow:
|
||||
0 25px 50px -12px rgba(0, 0, 0, 0.6),
|
||||
0 0 40px rgba(0, 212, 255, 0.1),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.create-dialog :deep(.el-dialog__header) {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dialog-header {
|
||||
position: relative;
|
||||
padding: 24px 28px;
|
||||
background: linear-gradient(135deg, rgba(0, 212, 255, 0.08) 0%, rgba(124, 58, 237, 0.08) 100%);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header-glow {
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: radial-gradient(circle at 30% 50%, rgba(0, 212, 255, 0.15) 0%, transparent 50%);
|
||||
animation: headerGlow 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes headerGlow {
|
||||
0%, 100% { opacity: 0.5; transform: scale(1); }
|
||||
50% { opacity: 0.8; transform: scale(1.1); }
|
||||
}
|
||||
|
||||
.header-content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.dialog-icon-new {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, rgba(0, 212, 255, 0.2) 0%, rgba(124, 58, 237, 0.2) 100%);
|
||||
border: 1px solid rgba(0, 212, 255, 0.3);
|
||||
border-radius: 14px;
|
||||
color: var(--accent-primary);
|
||||
animation: iconPulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes iconPulse {
|
||||
0%, 100% { box-shadow: 0 0 0 0 rgba(0, 212, 255, 0.4); }
|
||||
50% { box-shadow: 0 0 20px 5px rgba(0, 212, 255, 0.2); }
|
||||
}
|
||||
|
||||
.header-text h3 {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin: 0 0 4px 0;
|
||||
}
|
||||
|
||||
.header-text p {
|
||||
font-size: 13px;
|
||||
color: var(--text-tertiary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 8px;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: var(--text-primary);
|
||||
border-color: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
/* Dialog Body */
|
||||
.create-dialog :deep(.el-dialog__body) {
|
||||
padding: 28px;
|
||||
}
|
||||
|
||||
.dialog-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.form-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
padding: 24px;
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.input-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.label-icon {
|
||||
color: var(--accent-primary);
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.custom-input :deep(.el-input__wrapper) {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 10px;
|
||||
box-shadow: none;
|
||||
padding: 4px 14px;
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
|
||||
.custom-input :deep(.el-input__wrapper:hover) {
|
||||
border-color: rgba(0, 212, 255, 0.3);
|
||||
}
|
||||
|
||||
.custom-input :deep(.el-input__wrapper.is-focus) {
|
||||
border-color: var(--accent-primary);
|
||||
box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.15);
|
||||
}
|
||||
|
||||
.custom-input :deep(.el-input__inner) {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.custom-input :deep(.el-input__inner::placeholder) {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.custom-input :deep(.el-textarea__inner) {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 10px;
|
||||
box-shadow: none;
|
||||
padding: 12px 14px;
|
||||
color: var(--text-primary);
|
||||
resize: none;
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
|
||||
.custom-input :deep(.el-textarea__inner:hover) {
|
||||
border-color: rgba(0, 212, 255, 0.3);
|
||||
}
|
||||
|
||||
.custom-input :deep(.el-textarea__inner:focus) {
|
||||
border-color: var(--accent-primary);
|
||||
box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.15);
|
||||
}
|
||||
|
||||
/* Templates Section */
|
||||
.templates-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.templates-label {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.templates-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.template-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 16px 12px;
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
|
||||
.template-card:hover {
|
||||
background: rgba(0, 212, 255, 0.08);
|
||||
border-color: rgba(0, 212, 255, 0.25);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.template-card .el-icon {
|
||||
font-size: 22px;
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.template-card span {
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* Dialog Footer */
|
||||
.create-dialog :deep(.el-dialog__footer) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
padding: 20px 28px;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.btn-cancel {
|
||||
padding: 10px 20px;
|
||||
background: transparent;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 10px;
|
||||
color: var(--text-secondary);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.btn-cancel:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-color: rgba(255, 255, 255, 0.15);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.btn-create {
|
||||
padding: 10px 24px;
|
||||
background: linear-gradient(135deg, var(--accent-primary) 0%, #0891b2 100%);
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
font-weight: 500;
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
|
||||
.btn-create:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 15px rgba(0, 212, 255, 0.35);
|
||||
}
|
||||
</style>
|
||||
188
frontend/src/components/common/DeleteDialog.vue
Normal file
188
frontend/src/components/common/DeleteDialog.vue
Normal file
@@ -0,0 +1,188 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
:model-value="visible"
|
||||
title=""
|
||||
width="420px"
|
||||
class="delete-dialog"
|
||||
:show-close="false"
|
||||
align-center
|
||||
:close-on-click-modal="false"
|
||||
@update:model-value="$emit('update:visible', $event)"
|
||||
>
|
||||
<template #header>
|
||||
<div class="delete-dialog-header">
|
||||
<div class="delete-icon-wrapper">
|
||||
<el-icon size="28"><WarningFilled /></el-icon>
|
||||
</div>
|
||||
<h3>{{ title }}</h3>
|
||||
</div>
|
||||
</template>
|
||||
<div class="delete-dialog-body">
|
||||
<p>
|
||||
确定要删除 <strong>{{ itemName }}</strong> 吗？
|
||||
</p>
|
||||
<p class="warning-text">{{ warningText }}</p>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="delete-dialog-footer">
|
||||
<el-button
|
||||
@click="handleCancel"
|
||||
class="btn-cancel-delete"
|
||||
>
|
||||
取消
|
||||
</el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
:loading="loading"
|
||||
@click="handleConfirm"
|
||||
class="btn-delete"
|
||||
>
|
||||
<el-icon v-if="!loading"><Delete /></el-icon>
|
||||
确认删除
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: '删除项目'
|
||||
},
|
||||
itemName: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
warningText: {
|
||||
type: String,
|
||||
default: '此操作不可恢复，所有相关数据将被永久删除'
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
})
|
||||
|
||||
const emit = defineEmits(['update:visible', 'confirm', 'cancel'])
|
||||
|
||||
const handleConfirm = () => {
|
||||
emit('confirm')
|
||||
}
|
||||
|
||||
const handleCancel = () => {
|
||||
emit('update:visible', false)
|
||||
emit('cancel')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.delete-dialog :deep(.el-dialog) {
|
||||
background: linear-gradient(145deg, #1a1a2e 0%, #16162a 100%);
|
||||
border: 1px solid rgba(239, 68, 68, 0.2);
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(239, 68, 68, 0.1);
|
||||
}
|
||||
|
||||
.delete-dialog :deep(.el-dialog__header) {
|
||||
padding: 24px 24px 12px;
|
||||
}
|
||||
|
||||
.delete-dialog :deep(.el-dialog__body) {
|
||||
padding: 0 24px 24px;
|
||||
}
|
||||
|
||||
.delete-dialog :deep(.el-dialog__footer) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.delete-dialog-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.delete-icon-wrapper {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, rgba(239, 68, 68, 0.2) 0%, rgba(239, 68, 68, 0.1) 100%);
|
||||
border: 1px solid rgba(239, 68, 68, 0.3);
|
||||
border-radius: 50%;
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.delete-dialog-header h3 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.delete-dialog-body {
|
||||
text-align: center;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.delete-dialog-body p {
|
||||
margin: 0;
|
||||
color: #ccc;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.delete-dialog-body p strong {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.delete-dialog-body .warning-text {
|
||||
margin-top: 8px;
|
||||
color: #ef4444;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.delete-dialog-footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
padding: 20px 24px;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.btn-cancel-delete {
|
||||
padding: 10px 24px;
|
||||
background: transparent;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 10px;
|
||||
color: #ccc;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.btn-cancel-delete:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-delete {
|
||||
padding: 10px 24px;
|
||||
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
|
||||
border: none;
|
||||
border-radius: 10px;
|
||||
font-weight: 500;
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
|
||||
.btn-delete:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
|
||||
}
|
||||
</style>
|
||||
96
frontend/src/components/common/EmptyState.vue
Normal file
96
frontend/src/components/common/EmptyState.vue
Normal file
@@ -0,0 +1,96 @@
|
||||
<template>
|
||||
<div class="empty-state">
|
||||
<div class="empty-illustration">
|
||||
<div class="circle-1"></div>
|
||||
<div class="circle-2"></div>
|
||||
<div class="circle-3"></div>
|
||||
<el-icon size="48"><component :is="icon" /></el-icon>
|
||||
</div>
|
||||
<h3>{{ title }}</h3>
|
||||
<p>{{ description }}</p>
|
||||
<el-button v-if="actionText" type="primary" @click="$emit('action')">
|
||||
{{ actionText }}
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
icon: {
|
||||
type: Object,
|
||||
default: () => null
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: '暂无数据'
|
||||
},
|
||||
description: {
|
||||
type: String,
|
||||
default: '暂无相关内容'
|
||||
},
|
||||
actionText: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
|
||||
defineEmits(['action'])
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.empty-state {
|
||||
grid-column: 1 / -1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 80px 40px;
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px dashed var(--border-default);
|
||||
border-radius: var(--radius-xl);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-illustration {
|
||||
position: relative;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.empty-illustration .el-icon {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.circle-1, .circle-2, .circle-3 {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
border: 1px solid var(--border-default);
|
||||
}
|
||||
|
||||
.circle-1 { width: 100%; height: 100%; animation: rotate 20s linear infinite; }
|
||||
.circle-2 { width: 70%; height: 70%; animation: rotate 15s linear infinite reverse; }
|
||||
.circle-3 { width: 40%; height: 40%; background: var(--bg-tertiary); }
|
||||
|
||||
@keyframes rotate {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.empty-state h3 {
|
||||
font-size: 20px;
|
||||
margin-bottom: 8px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.empty-state p {
|
||||
color: var(--text-tertiary);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
</style>
|
||||
202
frontend/src/components/common/ProjectCard.vue
Normal file
202
frontend/src/components/common/ProjectCard.vue
Normal file
@@ -0,0 +1,202 @@
|
||||
<template>
|
||||
<div
|
||||
class="project-card"
|
||||
:style="{ '--delay': delay }"
|
||||
@click="$emit('click', project)"
|
||||
>
|
||||
<div class="card-glow"></div>
|
||||
<button
|
||||
v-if="showDelete"
|
||||
class="card-delete-btn"
|
||||
@click.stop="$emit('delete', project)"
|
||||
>
|
||||
<el-icon><Delete /></el-icon>
|
||||
</button>
|
||||
<div class="card-header">
|
||||
<div class="card-avatar">
|
||||
<el-icon><Folder /></el-icon>
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="card-title">{{ project.name }}</h3>
|
||||
<p class="card-desc">{{ project.description || '暂无描述' }}</p>
|
||||
<div class="card-footer">
|
||||
<span class="card-date">
|
||||
<el-icon><Calendar /></el-icon>
|
||||
{{ formattedDate }}
|
||||
</span>
|
||||
<div class="card-status">
|
||||
<span class="status-dot"></span>
|
||||
{{ statusText }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
project: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
index: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
showDelete: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
statusText: {
|
||||
type: String,
|
||||
default: '活跃'
|
||||
}
|
||||
})
|
||||
|
||||
defineEmits(['click', 'delete'])
|
||||
|
||||
const delay = computed(() => `${props.index * 0.1}s`)
|
||||
|
||||
const formattedDate = computed(() => {
|
||||
if (!props.project.created_at) return ''
|
||||
const d = new Date(props.project.created_at)
|
||||
return d.toLocaleDateString('zh-CN', { month: 'short', day: 'numeric', year: 'numeric' })
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.project-card {
|
||||
position: relative;
|
||||
padding: 24px;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: var(--radius-lg);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-base);
|
||||
overflow: hidden;
|
||||
animation: cardFadeIn 0.5s ease backwards;
|
||||
animation-delay: var(--delay);
|
||||
}
|
||||
|
||||
@keyframes cardFadeIn {
|
||||
from { opacity: 0; transform: translateY(20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.project-card:hover {
|
||||
border-color: var(--accent-primary);
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
.card-glow {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, transparent, var(--accent-primary), transparent);
|
||||
opacity: 0;
|
||||
transition: opacity var(--transition-base);
|
||||
}
|
||||
|
||||
.project-card:hover .card-glow { opacity: 1; }
|
||||
|
||||
.card-delete-btn {
|
||||
position: absolute;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: var(--danger);
|
||||
border: none;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transform: scale(0.8);
|
||||
transition: all 0.2s ease;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.card-delete-btn:hover {
|
||||
transform: scale(1.1);
|
||||
background: #dc2626;
|
||||
}
|
||||
|
||||
.project-card:hover .card-delete-btn {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.card-avatar {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--accent-primary-muted);
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 20px;
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 17px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
font-size: 14px;
|
||||
color: var(--text-tertiary);
|
||||
line-height: 1.5;
|
||||
margin-bottom: 20px;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid var(--border-subtle);
|
||||
}
|
||||
|
||||
.card-date {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 13px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.card-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 13px;
|
||||
color: var(--success);
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: var(--success);
|
||||
border-radius: 50%;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user