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
94
frontend/src/api/index.ts
Normal file
94
frontend/src/api/index.ts
Normal file
@@ -0,0 +1,94 @@
|
||||
import axios from 'axios'
|
||||
import type { AxiosInstance } from 'axios'
|
||||
import type { Project, ProjectCreate, ProjectUpdate } from '@/types'
|
||||
|
||||
const request: AxiosInstance = axios.create({
|
||||
baseURL: import.meta.env.PROD
|
||||
? '/api/v1'
|
||||
: 'http://10.10.10.77:8000/api/v1',
|
||||
timeout: 60000
|
||||
})
|
||||
|
||||
// Request interceptor
|
||||
request.interceptors.request.use(
|
||||
config => {
|
||||
return config
|
||||
},
|
||||
error => {
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
// Response interceptor
|
||||
request.interceptors.response.use(
|
||||
response => {
|
||||
const data = response.data
|
||||
// Handle new ApiResponse format
|
||||
if (data.success !== undefined) {
|
||||
if (data.success) {
|
||||
return data.data // Return the actual data
|
||||
} else {
|
||||
return Promise.reject(new Error(data.message || data.error || '请求失败'))
|
||||
}
|
||||
}
|
||||
return data
|
||||
},
|
||||
error => {
|
||||
const message = error.response?.data?.message || error.message || '请求失败'
|
||||
console.error('API Error:', message)
|
||||
return Promise.reject(error)
|
||||
}
|
||||
)
|
||||
|
||||
export const projectApi = {
|
||||
list: () => request.get<Project[]>('/projects/'),
|
||||
get: (id: string) => request.get<Project>(`/projects/${id}`),
|
||||
create: (data: ProjectCreate) => request.post<{ id: string }>('/projects/', data),
|
||||
update: (id: string, data: ProjectUpdate) => request.put<Project>(`/projects/${id}`, data),
|
||||
delete: (id: string) => request.delete(`/projects/${id}`)
|
||||
}
|
||||
|
||||
export const fileApi = {
|
||||
upload: (projectId: string, formData: FormData) =>
|
||||
request.post(`/projects/${projectId}/files/upload`, formData, {
|
||||
headers: { 'Content-Type': 'multipart/form-data' }
|
||||
}),
|
||||
list: (projectId: string) => request.get(`/projects/${projectId}/files/`),
|
||||
get: (projectId: string, fileId: string) => request.get(`/projects/${projectId}/files/${fileId}`),
|
||||
delete: (projectId: string, fileId: string) => request.delete(`/projects/${projectId}/files/${fileId}`)
|
||||
}
|
||||
|
||||
export const chunkApi = {
|
||||
split: (projectId: string, data: any) => request.post(`/projects/${projectId}/chunks/split`, data),
|
||||
list: (projectId: string, params?: any) => request.get(`/projects/${projectId}/chunks/`, { params }),
|
||||
get: (projectId: string, chunkId: string) => request.get(`/projects/${projectId}/chunks/${chunkId}`),
|
||||
update: (projectId: string, chunkId: string, data: any) => request.put(`/projects/${projectId}/chunks/${chunkId}`, data),
|
||||
delete: (projectId: string, chunkId: string) => request.delete(`/projects/${projectId}/chunks/${chunkId}`)
|
||||
}
|
||||
|
||||
export const questionApi = {
|
||||
generate: (projectId: string, data: any) => request.post(`/projects/${projectId}/generate-questions`, data),
|
||||
list: (projectId: string, params: { chunkId: string }) => request.get(`/projects/${projectId}/chunks/${params.chunkId}/questions`),
|
||||
update: (projectId: string, questionId: string, data: any) => request.put(`/projects/${projectId}/questions/${questionId}`, data),
|
||||
delete: (projectId: string, questionId: string) => request.delete(`/projects/${projectId}/questions/${questionId}`)
|
||||
}
|
||||
|
||||
export const datasetApi = {
|
||||
list: (projectId: string) => request.get(`/projects/${projectId}/datasets/`),
|
||||
create: (projectId: string, data: any) => request.post(`/projects/${projectId}/datasets/`, data),
|
||||
get: (projectId: string, datasetId: string) => request.get(`/projects/${projectId}/datasets/${datasetId}`),
|
||||
delete: (projectId: string, datasetId: string) => request.delete(`/projects/${projectId}/datasets/${datasetId}`),
|
||||
export: (projectId: string, datasetId: string, data: any) =>
|
||||
request.post(`/projects/${projectId}/datasets/${datasetId}/export`, data, {
|
||||
responseType: 'blob'
|
||||
})
|
||||
}
|
||||
|
||||
export const evalApi = {
|
||||
list: (projectId: string) => request.get(`/projects/${projectId}/eval-datasets/`),
|
||||
create: (projectId: string, data: any) => request.post(`/projects/${projectId}/eval-datasets/`, data),
|
||||
run: (projectId: string, evalId: string) => request.post(`/projects/${projectId}/eval-datasets/${evalId}/evaluate`),
|
||||
getResults: (projectId: string, taskId: string) => request.get(`/projects/${projectId}/eval-tasks/${taskId}`)
|
||||
}
|
||||
|
||||
export default request
|
||||
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>
|
||||
426
frontend/src/styles/home.scss
Normal file
426
frontend/src/styles/home.scss
Normal file
@@ -0,0 +1,426 @@
|
||||
/* ========================
|
||||
HomeView Styles
|
||||
======================== */
|
||||
|
||||
.home {
|
||||
min-height: 100vh;
|
||||
padding: 60px 40px 80px;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* Hero Section */
|
||||
.hero {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 60px;
|
||||
align-items: center;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.hero-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 14px;
|
||||
background: var(--accent-primary-muted);
|
||||
border: 1px solid rgba(0, 212, 255, 0.2);
|
||||
border-radius: 100px;
|
||||
font-size: 13px;
|
||||
color: var(--accent-primary);
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.badge-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: var(--accent-primary);
|
||||
border-radius: 50%;
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; transform: scale(1); }
|
||||
50% { opacity: 0.5; transform: scale(1.2); }
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 56px;
|
||||
font-weight: 700;
|
||||
line-height: 1.1;
|
||||
letter-spacing: -0.03em;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 18px;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.6;
|
||||
margin-bottom: 32px;
|
||||
max-width: 480px;
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
padding: 14px 28px;
|
||||
font-size: 15px;
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
padding: 14px 28px;
|
||||
font-size: 15px;
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--bg-tertiary);
|
||||
border: 1px solid var(--border-default);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: var(--bg-hover);
|
||||
border-color: var(--border-strong);
|
||||
}
|
||||
|
||||
/* ========================
|
||||
Hero Visual - 全息粒子矩阵
|
||||
======================== */
|
||||
.hero-visual {
|
||||
position: relative;
|
||||
height: 420px;
|
||||
perspective: 1000px;
|
||||
}
|
||||
|
||||
/* 全息卡片基础样式 */
|
||||
.hologram-card {
|
||||
position: absolute;
|
||||
width: 180px;
|
||||
padding: 24px 20px;
|
||||
background: linear-gradient(135deg, rgba(20, 20, 30, 0.9) 0%, rgba(10, 10, 18, 0.95) 100%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 20px;
|
||||
backdrop-filter: blur(20px);
|
||||
cursor: pointer;
|
||||
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
transform-style: preserve-3d;
|
||||
animation: hologramFloat 6s ease-in-out infinite;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 卡片位置 */
|
||||
.hologram-card.card-1 {
|
||||
top: 10px;
|
||||
right: 60px;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.hologram-card.card-2 {
|
||||
top: 130px;
|
||||
left: 30px;
|
||||
animation-delay: -2s;
|
||||
}
|
||||
|
||||
.hologram-card.card-3 {
|
||||
bottom: 20px;
|
||||
right: 80px;
|
||||
animation-delay: -4s;
|
||||
}
|
||||
|
||||
@keyframes hologramFloat {
|
||||
0%, 100% { transform: translateY(0) rotateX(0) rotateY(0); }
|
||||
25% { transform: translateY(-8px) rotateX(2deg) rotateY(-2deg); }
|
||||
50% { transform: translateY(0) rotateX(0) rotateY(0); }
|
||||
75% { transform: translateY(-5px) rotateX(-1deg) rotateY(2deg); }
|
||||
}
|
||||
|
||||
/* 悬浮时的3D效果 */
|
||||
.hologram-card:hover {
|
||||
transform: translateY(-15px) scale(1.05);
|
||||
border-color: rgba(0, 212, 255, 0.4);
|
||||
box-shadow:
|
||||
0 25px 50px -12px rgba(0, 0, 0, 0.5),
|
||||
0 0 30px rgba(0, 212, 255, 0.15),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.hologram-card:hover .scan-line {
|
||||
animation: scanMove 1.5s linear infinite;
|
||||
}
|
||||
|
||||
.hologram-card:hover .pulse-ring {
|
||||
animation: pulseRing 2s ease-out infinite;
|
||||
}
|
||||
|
||||
.hologram-card:hover .particle {
|
||||
animation: particleBurst 1s ease-out forwards;
|
||||
animation-delay: calc(var(--i, 0) * 0.1s);
|
||||
}
|
||||
|
||||
/* 卡片背景 */
|
||||
.card-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: radial-gradient(ellipse at top, rgba(0, 212, 255, 0.08) 0%, transparent 50%),
|
||||
radial-gradient(ellipse at bottom right, rgba(124, 58, 237, 0.08) 0%, transparent 50%);
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.card-2 .card-bg {
|
||||
background: radial-gradient(ellipse at top, rgba(124, 58, 237, 0.12) 0%, transparent 50%),
|
||||
radial-gradient(ellipse at bottom right, rgba(0, 212, 255, 0.06) 0%, transparent 50%);
|
||||
}
|
||||
|
||||
.card-3 .card-bg {
|
||||
background: radial-gradient(ellipse at top, rgba(6, 182, 212, 0.12) 0%, transparent 50%),
|
||||
radial-gradient(ellipse at bottom right, rgba(124, 58, 237, 0.06) 0%, transparent 50%);
|
||||
}
|
||||
|
||||
/* 扫描线效果 */
|
||||
.scan-line {
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: linear-gradient(
|
||||
transparent 0%,
|
||||
rgba(0, 212, 255, 0.03) 50%,
|
||||
transparent 100%
|
||||
);
|
||||
transform: rotate(30deg);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@keyframes scanMove {
|
||||
0% { transform: translateY(-100%) rotate(30deg); }
|
||||
100% { transform: translateY(100%) rotate(30deg); }
|
||||
}
|
||||
|
||||
/* 粒子容器 */
|
||||
.particles-container {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.particle {
|
||||
position: absolute;
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
border-radius: 50%;
|
||||
opacity: 0;
|
||||
left: var(--x);
|
||||
top: var(--y);
|
||||
}
|
||||
|
||||
.card-1 .particle {
|
||||
background: var(--accent-primary);
|
||||
box-shadow: 0 0 6px var(--accent-primary);
|
||||
}
|
||||
|
||||
.card-2 .particle {
|
||||
background: var(--accent-secondary);
|
||||
box-shadow: 0 0 6px var(--accent-secondary);
|
||||
}
|
||||
|
||||
.card-3 .particle {
|
||||
background: var(--accent-tertiary);
|
||||
box-shadow: 0 0 6px var(--accent-tertiary);
|
||||
}
|
||||
|
||||
@keyframes particleBurst {
|
||||
0% { opacity: 0; transform: scale(0); }
|
||||
20% { opacity: 1; transform: scale(1); }
|
||||
100% { opacity: 0; transform: scale(2); }
|
||||
}
|
||||
|
||||
/* 脉动光环 */
|
||||
.pulse-ring {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 50%;
|
||||
border: 1px solid rgba(0, 212, 255, 0.3);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.card-2 .pulse-ring { border-color: rgba(124, 58, 237, 0.3); }
|
||||
.card-3 .pulse-ring { border-color: rgba(6, 182, 212, 0.3); }
|
||||
|
||||
@keyframes pulseRing {
|
||||
0% { opacity: 0.6; transform: translate(-50%, -50%) scale(0.5); }
|
||||
100% { opacity: 0; transform: translate(-50%, -50%) scale(2); }
|
||||
}
|
||||
|
||||
/* 卡片内容 */
|
||||
.card-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
/* 图标包装器 */
|
||||
.icon-wrapper {
|
||||
position: relative;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 18px;
|
||||
background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.02) 100%);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.icon-wrapper.cyan {
|
||||
background: linear-gradient(135deg, rgba(0, 212, 255, 0.2) 0%, rgba(0, 212, 255, 0.05) 100%);
|
||||
border-color: rgba(0, 212, 255, 0.3);
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.icon-wrapper.violet {
|
||||
background: linear-gradient(135deg, rgba(124, 58, 237, 0.2) 0%, rgba(124, 58, 237, 0.05) 100%);
|
||||
border-color: rgba(124, 58, 237, 0.3);
|
||||
color: var(--accent-secondary);
|
||||
}
|
||||
|
||||
.icon-wrapper.teal {
|
||||
background: linear-gradient(135deg, rgba(6, 182, 212, 0.2) 0%, rgba(6, 182, 212, 0.05) 100%);
|
||||
border-color: rgba(6, 182, 212, 0.3);
|
||||
color: var(--accent-tertiary);
|
||||
}
|
||||
|
||||
/* 图标发光 */
|
||||
.icon-glow {
|
||||
position: absolute;
|
||||
inset: -2px;
|
||||
border-radius: 20px;
|
||||
background: inherit;
|
||||
filter: blur(15px);
|
||||
opacity: 0.5;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.hologram-card:hover .icon-wrapper {
|
||||
transform: scale(1.1);
|
||||
box-shadow: 0 0 30px rgba(0, 212, 255, 0.4);
|
||||
}
|
||||
|
||||
.hologram-card:hover .icon-glow { opacity: 0.8; }
|
||||
|
||||
/* 标签文字 */
|
||||
.card-label {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.card-sublabel {
|
||||
font-size: 11px;
|
||||
color: var(--text-muted);
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* 响应式 */
|
||||
@media (max-width: 1200px) {
|
||||
.hero-visual { display: none; }
|
||||
}
|
||||
|
||||
/* Quick Actions */
|
||||
.quick-actions { margin-bottom: 50px; }
|
||||
|
||||
.action-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
padding: 24px;
|
||||
background: var(--glass-bg);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: var(--radius-lg);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-base);
|
||||
}
|
||||
|
||||
.action-card:hover {
|
||||
border-color: var(--accent-primary);
|
||||
transform: translateX(6px);
|
||||
}
|
||||
|
||||
.action-icon {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--accent-primary-muted);
|
||||
border-radius: var(--radius-md);
|
||||
font-size: 24px;
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.action-info h3 { font-size: 16px; font-weight: 600; margin-bottom: 4px; }
|
||||
.action-info p { font-size: 14px; color: var(--text-tertiary); }
|
||||
|
||||
.action-arrow {
|
||||
margin-left: auto;
|
||||
font-size: 20px;
|
||||
color: var(--text-muted);
|
||||
transition: transform var(--transition-base);
|
||||
}
|
||||
|
||||
.action-card:hover .action-arrow {
|
||||
transform: translateX(4px);
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
|
||||
/* Projects Section */
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.section-title h2 { font-size: 24px; font-weight: 600; margin-bottom: 4px; }
|
||||
.section-title p { font-size: 14px; color: var(--text-tertiary); }
|
||||
|
||||
.add-btn { padding: 10px 18px; border-radius: var(--radius-md); }
|
||||
|
||||
.projects-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
@media (max-width: 1024px) {
|
||||
.hero {
|
||||
grid-template-columns: 1fr;
|
||||
text-align: center;
|
||||
}
|
||||
.hero-subtitle { max-width: 100%; }
|
||||
.hero-actions { justify-content: center; }
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.home { padding: 40px 20px 60px; }
|
||||
.hero-title { font-size: 36px; }
|
||||
.hero-actions { flex-direction: column; }
|
||||
.projects-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
32
frontend/src/types/api.d.ts
vendored
Normal file
32
frontend/src/types/api.d.ts
vendored
Normal file
@@ -0,0 +1,32 @@
|
||||
/**
|
||||
* API Response Types
|
||||
*/
|
||||
|
||||
// Base API response wrapper
|
||||
export interface ApiResponse<T = any> {
|
||||
success: boolean
|
||||
message: string
|
||||
data: T
|
||||
error: string | null
|
||||
timestamp: string
|
||||
}
|
||||
|
||||
// Paginated response
|
||||
export interface PaginatedResponse<T = any> extends ApiResponse<T> {
|
||||
page?: number
|
||||
page_size?: number
|
||||
total?: number
|
||||
}
|
||||
|
||||
// List items wrapper
|
||||
export interface ListResponse<T> {
|
||||
items: T[]
|
||||
total: number
|
||||
page: number
|
||||
page_size: number
|
||||
}
|
||||
|
||||
// Simple ID response
|
||||
export interface IdResponse {
|
||||
id: string
|
||||
}
|
||||
60
frontend/src/types/common.d.ts
vendored
Normal file
60
frontend/src/types/common.d.ts
vendored
Normal file
@@ -0,0 +1,60 @@
|
||||
/**
|
||||
* Common Types
|
||||
*/
|
||||
|
||||
// File types
|
||||
export interface FileItem {
|
||||
id: string
|
||||
filename: string
|
||||
file_type: string
|
||||
size?: number
|
||||
status: string
|
||||
created_at: string
|
||||
updated_at: string
|
||||
}
|
||||
|
||||
// Chunk types
|
||||
export interface Chunk {
|
||||
id: string
|
||||
name?: string
|
||||
content: string
|
||||
summary?: string
|
||||
word_count?: number
|
||||
file_id?: string
|
||||
created_at: string
|
||||
updated_at: string
|
||||
}
|
||||
|
||||
// Question types
|
||||
export interface Question {
|
||||
id: string
|
||||
content: string
|
||||
answer?: string
|
||||
question_type?: string
|
||||
chunk_id?: string
|
||||
source: string
|
||||
created_at: string
|
||||
updated_at: string
|
||||
}
|
||||
|
||||
// Dataset types
|
||||
export interface Dataset {
|
||||
id: string
|
||||
name: string
|
||||
description?: string
|
||||
dataset_type?: string
|
||||
question_count?: number
|
||||
created_at: string
|
||||
updated_at: string
|
||||
}
|
||||
|
||||
// Dialog props
|
||||
export interface DialogProps {
|
||||
visible: boolean
|
||||
loading?: boolean
|
||||
}
|
||||
|
||||
export interface DeleteDialogProps extends DialogProps {
|
||||
itemName?: string
|
||||
itemType?: string
|
||||
}
|
||||
7
frontend/src/types/index.ts
Normal file
7
frontend/src/types/index.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
/**
|
||||
* Type exports
|
||||
*/
|
||||
export * from './api'
|
||||
export * from './project'
|
||||
export * from './model'
|
||||
export * from './common'
|
||||
30
frontend/src/types/model.d.ts
vendored
Normal file
30
frontend/src/types/model.d.ts
vendored
Normal file
@@ -0,0 +1,30 @@
|
||||
/**
|
||||
* Model Configuration Types
|
||||
*/
|
||||
|
||||
export interface ModelConfig {
|
||||
id: string
|
||||
provider: ModelProvider
|
||||
model_name: string
|
||||
api_key?: string
|
||||
api_base?: string
|
||||
is_default: 'true' | 'false'
|
||||
created_at?: string
|
||||
updated_at?: string
|
||||
}
|
||||
|
||||
export type ModelProvider = 'openai' | 'anthropic' | 'google' | 'other'
|
||||
|
||||
export interface ModelCreate {
|
||||
provider: ModelProvider
|
||||
model_name: string
|
||||
api_key: string
|
||||
api_base?: string
|
||||
is_default: boolean
|
||||
}
|
||||
|
||||
export interface ProviderOption {
|
||||
value: ModelProvider
|
||||
label: string
|
||||
abbr: string
|
||||
}
|
||||
21
frontend/src/types/project.d.ts
vendored
Normal file
21
frontend/src/types/project.d.ts
vendored
Normal file
@@ -0,0 +1,21 @@
|
||||
/**
|
||||
* Project Types
|
||||
*/
|
||||
|
||||
export interface Project {
|
||||
id: string
|
||||
name: string
|
||||
description?: string
|
||||
created_at: string
|
||||
updated_at: string
|
||||
}
|
||||
|
||||
export interface ProjectCreate {
|
||||
name: string
|
||||
description?: string
|
||||
}
|
||||
|
||||
export interface ProjectUpdate {
|
||||
name?: string
|
||||
description?: string
|
||||
}
|
||||
Reference in New Issue
Block a user