数据结构优化
This commit is contained in:
李琦
@@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<div id="inquiry-modal" class="fixed inset-0 z-[100] bg-[#050505]/95 backdrop-blur-xl hidden items-center justify-center p-4 transition-opacity duration-300">
|
||||
<Teleport to="body">
|
||||
<div id="inquiry-modal" class="fixed inset-0 z-[100] bg-[#050505]/95 backdrop-blur-xl hidden items-center justify-center p-4 transition-opacity duration-300">
|
||||
<div class="relative w-full max-w-4xl bg-[#080808] border border-white/10 overflow-hidden flex flex-col md:flex-row shadow-2xl">
|
||||
<div class="hidden md:flex w-1/3 bg-[#0c0c0c] border-r border-white/5 p-12 flex-col justify-between relative overflow-hidden">
|
||||
<div class="absolute top-0 left-0 w-full h-full bg-noise opacity-10"></div>
|
||||
@@ -163,6 +164,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@@ -1,9 +1,10 @@
|
||||
<template>
|
||||
<div
|
||||
v-if="isOpen"
|
||||
class="fixed inset-0 z-[100] flex items-center justify-center p-4 md:p-10 transition-opacity duration-300 pointer-events-auto"
|
||||
:class="{ 'opacity-0': isAnimating, 'opacity-100': !isAnimating }"
|
||||
>
|
||||
<Teleport to="body">
|
||||
<div
|
||||
v-if="isOpen"
|
||||
class="fixed inset-0 z-[100] flex items-center justify-center p-4 md:p-10 transition-opacity duration-300 pointer-events-auto"
|
||||
:class="{ 'opacity-0': isAnimating, 'opacity-100': !isAnimating }"
|
||||
>
|
||||
<div class="absolute inset-0 bg-black/90 backdrop-blur-sm" @click="close"></div>
|
||||
<div
|
||||
class="relative z-[101] bg-[#0a0a0c] border border-white/10 w-full max-w-6xl h-[80vh] rounded-2xl flex flex-col overflow-hidden shadow-2xl transform transition-transform duration-300"
|
||||
@@ -70,6 +71,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<div v-if="show" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50" @click.self="handleClose">
|
||||
<Teleport to="body">
|
||||
<div v-if="show" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50" @click.self="handleClose">
|
||||
<div class="admin-card max-w-2xl w-full mx-4 max-h-[90vh] overflow-y-auto">
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h2 class="text-xl font-serif italic text-white">附件详情</h2>
|
||||
@@ -90,6 +91,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
297
client/src/components/admin/AttachmentLibraryModal.vue
Normal file
297
client/src/components/admin/AttachmentLibraryModal.vue
Normal file
@@ -0,0 +1,297 @@
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<div v-if="show" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50" @click.self="handleClose">
|
||||
<div class="admin-card max-w-4xl w-full mx-4 max-h-[90vh] flex flex-col">
|
||||
<!-- 标题栏 -->
|
||||
<div class="flex items-center justify-between mb-4 pb-4 border-b border-white/10">
|
||||
<h2 class="text-xl font-serif italic text-white">从素材库选择</h2>
|
||||
<button @click="handleClose" class="text-white/40 hover:text-white transition-colors">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<line x1="18" y1="6" x2="6" y2="18"></line>
|
||||
<line x1="6" y1="6" x2="18" y2="18"></line>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 筛选栏 -->
|
||||
<div class="mb-4 space-y-3">
|
||||
<div class="flex gap-3">
|
||||
<!-- 搜索框 -->
|
||||
<div class="flex-1">
|
||||
<input
|
||||
v-model="searchKeyword"
|
||||
@input="handleSearch"
|
||||
type="text"
|
||||
placeholder="搜索文件名..."
|
||||
class="admin-input w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- 分类筛选 -->
|
||||
<div class="w-48">
|
||||
<CustomSelect
|
||||
v-model="filterCategoryId"
|
||||
:options="categoryOptions"
|
||||
placeholder="全部分类"
|
||||
@update:modelValue="loadAttachments"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 已选数量提示（多选模式） -->
|
||||
<div v-if="multiple" class="text-sm text-art-muted">
|
||||
已选择 {{ selectedUrls.length }} / {{ maxCount || '∞' }} 张图片
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 图片网格 -->
|
||||
<div class="flex-1 overflow-y-auto mb-4">
|
||||
<div v-if="loading" class="flex justify-center items-center h-64">
|
||||
<div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-art-accent"></div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="attachments.length === 0" class="text-center py-20 text-art-muted">
|
||||
<p>暂无图片</p>
|
||||
</div>
|
||||
|
||||
<div v-else class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
|
||||
<div
|
||||
v-for="attachment in attachments"
|
||||
:key="attachment.id"
|
||||
@click="toggleSelect(attachment)"
|
||||
class="relative group cursor-pointer"
|
||||
:class="[
|
||||
isSelected(attachment.fileUrl)
|
||||
? 'ring-2 ring-art-accent'
|
||||
: 'hover:ring-2 hover:ring-white/20'
|
||||
]"
|
||||
>
|
||||
<div class="aspect-square rounded-lg overflow-hidden bg-white/5 border border-white/10 transition-all"
|
||||
:class="isSelected(attachment.fileUrl) ? 'border-art-accent bg-art-accent/10' : ''">
|
||||
<img
|
||||
:src="attachment.fileUrl"
|
||||
:alt="attachment.originalName"
|
||||
class="w-full h-full object-cover"
|
||||
/>
|
||||
|
||||
<!-- 选中标记 -->
|
||||
<div v-if="isSelected(attachment.fileUrl)" class="absolute top-2 right-2 w-6 h-6 bg-art-accent rounded-full flex items-center justify-center">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="text-black">
|
||||
<polyline points="20 6 9 17 4 12"></polyline>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<!-- 文件名提示 -->
|
||||
<div class="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center p-2">
|
||||
<p class="text-xs text-white text-center truncate w-full">{{ attachment.originalName }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 分页 -->
|
||||
<div v-if="totalPages > 1" class="flex items-center justify-between mb-4 pt-4 border-t border-white/10">
|
||||
<div class="text-sm text-art-muted">
|
||||
共 {{ total }} 张图片，第 {{ currentPage }} / {{ totalPages }} 页
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
@click="goToPage(currentPage - 1)"
|
||||
:disabled="currentPage === 1"
|
||||
class="admin-btn-secondary text-sm px-3 py-1 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
上一页
|
||||
</button>
|
||||
<button
|
||||
@click="goToPage(currentPage + 1)"
|
||||
:disabled="currentPage === totalPages"
|
||||
class="admin-btn-secondary text-sm px-3 py-1 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
下一页
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 底部操作栏 -->
|
||||
<div class="flex items-center justify-between pt-4 border-t border-white/10">
|
||||
<div v-if="multiple" class="text-sm text-art-muted">
|
||||
已选择 {{ selectedUrls.length }} 张图片
|
||||
</div>
|
||||
<div v-else></div>
|
||||
<div class="flex gap-3">
|
||||
<button @click="handleClose" class="admin-btn-secondary">
|
||||
取消
|
||||
</button>
|
||||
<button
|
||||
@click="handleConfirm"
|
||||
:disabled="selectedUrls.length === 0"
|
||||
class="admin-btn-primary disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
确认选择 ({{ selectedUrls.length }})
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, watch, onMounted } from 'vue'
|
||||
import { useToast } from '../../composables/useToast'
|
||||
import { getAdminAttachments, getAttachmentCategories, type Attachment, type AttachmentCategory } from '../../services/api'
|
||||
import CustomSelect from '../CustomSelect.vue'
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
show: boolean
|
||||
multiple?: boolean
|
||||
maxCount?: number
|
||||
selectedUrls?: string[]
|
||||
}>(), {
|
||||
multiple: false,
|
||||
selectedUrls: () => []
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:show': [value: boolean]
|
||||
'confirm': [urls: string[]]
|
||||
}>()
|
||||
|
||||
const toast = useToast()
|
||||
|
||||
const attachments = ref<Attachment[]>([])
|
||||
const categories = ref<AttachmentCategory[]>([])
|
||||
const loading = ref(false)
|
||||
const searchKeyword = ref('')
|
||||
const filterCategoryId = ref(0)
|
||||
const currentPage = ref(1)
|
||||
const pageSize = ref(24)
|
||||
const total = ref(0)
|
||||
const selectedUrls = ref<string[]>([...props.selectedUrls])
|
||||
|
||||
const totalPages = computed(() => Math.ceil(total.value / pageSize.value))
|
||||
|
||||
const categoryOptions = computed(() => {
|
||||
return [
|
||||
{ value: 0, label: '全部分类' },
|
||||
...categories.value.map(cat => ({ value: cat.id, label: cat.name }))
|
||||
]
|
||||
})
|
||||
|
||||
// 搜索防抖
|
||||
let searchTimer: ReturnType<typeof setTimeout> | null = null
|
||||
const handleSearch = () => {
|
||||
if (searchTimer) clearTimeout(searchTimer)
|
||||
searchTimer = setTimeout(() => {
|
||||
currentPage.value = 1
|
||||
loadAttachments()
|
||||
}, 300)
|
||||
}
|
||||
|
||||
const loadAttachments = async () => {
|
||||
loading.value = true
|
||||
try {
|
||||
const result = await getAdminAttachments({
|
||||
page: currentPage.value,
|
||||
pageSize: pageSize.value,
|
||||
categoryId: filterCategoryId.value > 0 ? filterCategoryId.value : undefined,
|
||||
fileType: 'image',
|
||||
keyword: searchKeyword.value || undefined
|
||||
})
|
||||
attachments.value = result.list
|
||||
total.value = result.total
|
||||
} catch (err: any) {
|
||||
toast.showToast(err.message || '加载附件失败', 'error')
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const loadCategories = async () => {
|
||||
try {
|
||||
categories.value = await getAttachmentCategories()
|
||||
} catch (err) {
|
||||
console.error('Failed to load categories:', err)
|
||||
}
|
||||
}
|
||||
|
||||
const goToPage = (page: number) => {
|
||||
if (page < 1 || page > totalPages.value) return
|
||||
currentPage.value = page
|
||||
loadAttachments()
|
||||
}
|
||||
|
||||
const isSelected = (url: string): boolean => {
|
||||
return selectedUrls.value.includes(url)
|
||||
}
|
||||
|
||||
const toggleSelect = (attachment: Attachment) => {
|
||||
const url = attachment.fileUrl
|
||||
const index = selectedUrls.value.indexOf(url)
|
||||
|
||||
if (props.multiple) {
|
||||
// 多选模式
|
||||
if (index > -1) {
|
||||
// 取消选择
|
||||
selectedUrls.value.splice(index, 1)
|
||||
} else {
|
||||
// 检查是否超过最大数量
|
||||
if (props.maxCount && selectedUrls.value.length >= props.maxCount) {
|
||||
toast.showToast(`最多只能选择 ${props.maxCount} 张图片`, 'error')
|
||||
return
|
||||
}
|
||||
selectedUrls.value.push(url)
|
||||
}
|
||||
} else {
|
||||
// 单选模式
|
||||
if (index > -1) {
|
||||
// 取消选择
|
||||
selectedUrls.value = []
|
||||
} else {
|
||||
// 选择
|
||||
selectedUrls.value = [url]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleClose = () => {
|
||||
emit('update:show', false)
|
||||
}
|
||||
|
||||
const handleConfirm = () => {
|
||||
if (selectedUrls.value.length === 0) {
|
||||
toast.showToast('请至少选择一张图片', 'error')
|
||||
return
|
||||
}
|
||||
emit('confirm', [...selectedUrls.value])
|
||||
emit('update:show', false)
|
||||
}
|
||||
|
||||
// 监听show变化，重置状态
|
||||
watch(() => props.show, (newVal) => {
|
||||
if (newVal) {
|
||||
// 打开模态框时，重置搜索和筛选，但保持已选状态
|
||||
searchKeyword.value = ''
|
||||
filterCategoryId.value = 0
|
||||
currentPage.value = 1
|
||||
selectedUrls.value = [...props.selectedUrls]
|
||||
loadAttachments()
|
||||
}
|
||||
})
|
||||
|
||||
// 监听selectedUrls prop变化
|
||||
watch(() => props.selectedUrls, (newVal) => {
|
||||
if (props.show) {
|
||||
selectedUrls.value = [...newVal]
|
||||
}
|
||||
}, { deep: true })
|
||||
|
||||
onMounted(() => {
|
||||
loadCategories()
|
||||
if (props.show) {
|
||||
loadAttachments()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -37,6 +37,18 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 从素材库选择按钮 -->
|
||||
<div v-if="!imageUrl" class="mt-3 text-center">
|
||||
<button
|
||||
@click="openLibraryModal"
|
||||
type="button"
|
||||
class="text-sm text-art-accent hover:text-art-accent/80 transition-colors"
|
||||
:disabled="disabled"
|
||||
>
|
||||
或从素材库选择
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-else class="image-preview relative group">
|
||||
<img :src="imageUrl" alt="Preview" class="w-full h-auto rounded-lg max-h-64 object-contain bg-white/5" />
|
||||
<div class="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity rounded-lg flex items-center justify-center gap-2">
|
||||
@@ -132,6 +144,18 @@
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 从素材库选择按钮 -->
|
||||
<div v-if="imageUrls.length < (maxCount || Infinity)" class="mt-3 text-center">
|
||||
<button
|
||||
@click="openLibraryModal"
|
||||
type="button"
|
||||
class="text-sm text-art-accent hover:text-art-accent/80 transition-colors"
|
||||
:disabled="disabled"
|
||||
>
|
||||
或从素材库选择
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 上传进度 -->
|
||||
<div v-if="uploadingCount > 0" class="mt-4 text-center">
|
||||
@@ -147,6 +171,16 @@
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 素材库选择模态框 -->
|
||||
<AttachmentLibraryModal
|
||||
:show="showLibraryModal"
|
||||
:multiple="multiple"
|
||||
:max-count="maxCount"
|
||||
:selected-urls="multiple ? imageUrls : (imageUrl ? [imageUrl] : [])"
|
||||
@update:show="showLibraryModal = $event"
|
||||
@confirm="handleLibrarySelect"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -154,6 +188,7 @@
|
||||
import { ref, watch, computed } from 'vue'
|
||||
import { useToast } from '../../composables/useToast'
|
||||
import { API_BASE } from '../../services/api'
|
||||
import AttachmentLibraryModal from './AttachmentLibraryModal.vue'
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
modelValue?: string | string[]
|
||||
@@ -177,6 +212,7 @@ const uploading = ref(false)
|
||||
const uploadingCount = ref(0)
|
||||
const error = ref('')
|
||||
const isDragging = ref(false)
|
||||
const showLibraryModal = ref(false)
|
||||
|
||||
const toast = useToast()
|
||||
|
||||
@@ -365,6 +401,36 @@ const removeImage = (index?: number) => {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const openLibraryModal = () => {
|
||||
if (props.disabled) return
|
||||
showLibraryModal.value = true
|
||||
}
|
||||
|
||||
const handleLibrarySelect = (urls: string[]) => {
|
||||
if (props.multiple) {
|
||||
// 批量模式：添加选中的图片，考虑maxCount限制
|
||||
const currentCount = imageUrls.value.length
|
||||
const remainingCount = props.maxCount ? props.maxCount - currentCount : Infinity
|
||||
const urlsToAdd = urls.slice(0, remainingCount)
|
||||
|
||||
if (urlsToAdd.length > 0) {
|
||||
const newUrls = [...imageUrls.value, ...urlsToAdd]
|
||||
imageUrls.value = newUrls
|
||||
toast.showToast(`已添加 ${urlsToAdd.length} 张图片`, 'success')
|
||||
}
|
||||
|
||||
if (urls.length > urlsToAdd.length) {
|
||||
toast.showToast(`最多只能添加 ${props.maxCount} 张图片，已添加 ${urlsToAdd.length} 张`, 'error')
|
||||
}
|
||||
} else {
|
||||
// 单个模式：直接设置选中的第一张图片
|
||||
if (urls.length > 0) {
|
||||
imageUrl.value = urls[0]
|
||||
toast.showToast('图片选择成功', 'success')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<template>
|
||||
<div v-if="isOpen" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm" @click.self="close">
|
||||
<Teleport to="body">
|
||||
<div v-if="isOpen" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm" @click.self="close">
|
||||
<div class="bg-[#1a1a1a] border border-white/10 rounded-lg shadow-xl w-full max-w-2xl max-h-[90vh] overflow-hidden animate-reveal flex flex-col">
|
||||
<div class="p-4 border-b border-white/10 flex justify-between items-center shrink-0">
|
||||
<h3 class="text-lg font-serif italic text-white">管理文章关联</h3>
|
||||
@@ -131,6 +132,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
@@ -119,7 +119,7 @@ const latestWork = ref<Work>({
|
||||
desc: '',
|
||||
techStack: [],
|
||||
gallery: [],
|
||||
links: { live: '#' },
|
||||
links: {},
|
||||
next: ''
|
||||
})
|
||||
|
||||
|
||||
@@ -67,15 +67,48 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-12">
|
||||
<div class="mt-12 space-y-4">
|
||||
<!-- Live Link -->
|
||||
<a
|
||||
v-if="work.links.live"
|
||||
id="work-link-live"
|
||||
:href="work.links.live"
|
||||
target="_blank"
|
||||
class="group flex items-center justify-between w-full py-6 border-t border-white/10 hover:bg-white/5 transition-colors"
|
||||
class="group flex items-center justify-between w-full py-4 border-t border-white/10 hover:bg-white/5 transition-colors"
|
||||
>
|
||||
<span class="font-serif text-2xl italic text-white group-hover:text-art-accent transition-colors">访问线上项目</span>
|
||||
<i data-lucide="arrow-up-right" class="w-6 h-6 text-white group-hover:rotate-45 transition-transform"></i>
|
||||
<span class="font-serif text-xl italic text-white group-hover:text-art-accent transition-colors flex items-center gap-3">
|
||||
<i data-lucide="globe" class="w-5 h-5"></i>
|
||||
访问线上项目
|
||||
</span>
|
||||
<i data-lucide="arrow-up-right" class="w-5 h-5 text-white group-hover:rotate-45 transition-transform"></i>
|
||||
</a>
|
||||
<!-- Demo Link -->
|
||||
<a
|
||||
v-if="work.links.demo"
|
||||
id="work-link-demo"
|
||||
:href="work.links.demo"
|
||||
target="_blank"
|
||||
class="group flex items-center justify-between w-full py-4 border-t border-white/10 hover:bg-white/5 transition-colors"
|
||||
>
|
||||
<span class="font-serif text-xl italic text-white group-hover:text-art-accent transition-colors flex items-center gap-3">
|
||||
<i data-lucide="play-circle" class="w-5 h-5"></i>
|
||||
查看演示
|
||||
</span>
|
||||
<i data-lucide="arrow-up-right" class="w-5 h-5 text-white group-hover:rotate-45 transition-transform"></i>
|
||||
</a>
|
||||
<!-- GitHub Link -->
|
||||
<a
|
||||
v-if="work.links.github"
|
||||
id="work-link-github"
|
||||
:href="work.links.github"
|
||||
target="_blank"
|
||||
class="group flex items-center justify-between w-full py-4 border-t border-white/10 hover:bg-white/5 transition-colors"
|
||||
>
|
||||
<span class="font-serif text-xl italic text-white group-hover:text-art-accent transition-colors flex items-center gap-3">
|
||||
<i data-lucide="github" class="w-5 h-5"></i>
|
||||
查看源码
|
||||
</span>
|
||||
<i data-lucide="arrow-up-right" class="w-5 h-5 text-white group-hover:rotate-45 transition-transform"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
@@ -133,7 +166,7 @@ const work = ref<Work>({
|
||||
desc: '<p>加载中...</p>',
|
||||
techStack: [],
|
||||
gallery: [],
|
||||
links: { live: '#' },
|
||||
links: {},
|
||||
next: ''
|
||||
})
|
||||
|
||||
|
||||
@@ -68,6 +68,39 @@
|
||||
{{ stack }}
|
||||
</span>
|
||||
</div>
|
||||
<!-- 链接按钮 -->
|
||||
<div v-if="work.links && (work.links.live || work.links.github || work.links.demo)" class="flex flex-wrap gap-3" :class="[index % 2 === 1 ? 'md:justify-end' : '']">
|
||||
<a
|
||||
v-if="work.links.live"
|
||||
:href="work.links.live"
|
||||
target="_blank"
|
||||
@click.stop
|
||||
class="inline-flex items-center gap-2 px-4 py-2 border border-white/10 rounded-full text-xs text-white/70 hover:border-art-accent hover:text-art-accent transition-all"
|
||||
>
|
||||
<i data-lucide="globe" class="w-3 h-3"></i>
|
||||
线上项目
|
||||
</a>
|
||||
<a
|
||||
v-if="work.links.demo"
|
||||
:href="work.links.demo"
|
||||
target="_blank"
|
||||
@click.stop
|
||||
class="inline-flex items-center gap-2 px-4 py-2 border border-white/10 rounded-full text-xs text-white/70 hover:border-art-accent hover:text-art-accent transition-all"
|
||||
>
|
||||
<i data-lucide="play-circle" class="w-3 h-3"></i>
|
||||
演示
|
||||
</a>
|
||||
<a
|
||||
v-if="work.links.github"
|
||||
:href="work.links.github"
|
||||
target="_blank"
|
||||
@click.stop
|
||||
class="inline-flex items-center gap-2 px-4 py-2 border border-white/10 rounded-full text-xs text-white/70 hover:border-art-accent hover:text-art-accent transition-all"
|
||||
>
|
||||
<i data-lucide="github" class="w-3 h-3"></i>
|
||||
源码
|
||||
</a>
|
||||
</div>
|
||||
<!-- 查看详情按钮 -->
|
||||
<div class="pt-4" :class="[index % 2 === 1 ? 'flex md:justify-end' : '']">
|
||||
<span class="inline-flex items-center gap-2 text-sm font-medium text-white border-b border-transparent hover:border-art-accent hover:text-art-accent transition-all">
|
||||
|
||||
@@ -50,7 +50,7 @@ export interface Work {
|
||||
desc: string
|
||||
techStack: { category: string; items: string[] }[]
|
||||
gallery: string[]
|
||||
links: { live: string }
|
||||
links: { live?: string; github?: string; demo?: string }
|
||||
next: string
|
||||
}
|
||||
|
||||
@@ -405,7 +405,7 @@ export const fetchWorks = async (): Promise<Work[]> => {
|
||||
desc: work.desc || '',
|
||||
techStack: Array.isArray(work.techStack) ? work.techStack : [],
|
||||
gallery: Array.isArray(work.gallery) ? work.gallery : [],
|
||||
links: work.links || { live: '' },
|
||||
links: work.links || {},
|
||||
next: work.next || ''
|
||||
})) as Work[]
|
||||
} catch (error) {
|
||||
@@ -443,7 +443,7 @@ export const fetchWork = async (id: string): Promise<Work> => {
|
||||
desc: '',
|
||||
techStack: [],
|
||||
gallery: [],
|
||||
links: { live: '#' },
|
||||
links: {},
|
||||
next: ''
|
||||
}
|
||||
}
|
||||
@@ -1657,6 +1657,42 @@ export interface AttachmentCategory {
|
||||
}
|
||||
|
||||
// 附件管理API
|
||||
export const getAdminAttachments = async (params?: {
|
||||
page?: number
|
||||
pageSize?: number
|
||||
categoryId?: number
|
||||
fileType?: string
|
||||
keyword?: string
|
||||
}): Promise<{ list: Attachment[], total: number, page: number, size: number }> => {
|
||||
try {
|
||||
const queryParams = new URLSearchParams()
|
||||
if (params?.page) queryParams.append('page', params.page.toString())
|
||||
if (params?.pageSize) queryParams.append('pageSize', params.pageSize.toString())
|
||||
if (params?.categoryId) queryParams.append('categoryId', params.categoryId.toString())
|
||||
if (params?.fileType) queryParams.append('fileType', params.fileType)
|
||||
if (params?.keyword) queryParams.append('keyword', params.keyword)
|
||||
|
||||
const url = `${API_BASE}/admin/attachments${queryParams.toString() ? '?' + queryParams.toString() : ''}`
|
||||
const response = await fetch(url, {
|
||||
headers: getAuthHeaders()
|
||||
})
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json()
|
||||
throw new Error(errorData.message || '获取附件列表失败')
|
||||
}
|
||||
const data = await response.json()
|
||||
return {
|
||||
list: data.result?.list || [],
|
||||
total: data.result?.total || 0,
|
||||
page: data.result?.page || 1,
|
||||
size: data.result?.size || 20
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Get admin attachments error:', error)
|
||||
throw error
|
||||
}
|
||||
}
|
||||
|
||||
export const updateAttachment = async (id: number, data: { categoryId?: number | null }): Promise<Attachment> => {
|
||||
try {
|
||||
const response = await fetch(`${API_BASE}/admin/attachments/${id}`, {
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
Target Server Version : 80407 (8.4.7)
|
||||
File Encoding : 65001
|
||||
|
||||
Date: 19/01/2026 20:20:52
|
||||
Date: 19/01/2026 21:19:15
|
||||
*/
|
||||
|
||||
SET NAMES utf8mb4;
|
||||
@@ -111,7 +111,7 @@ CREATE TABLE `attachments` (
|
||||
INDEX `idx_storage_type`(`storage_type` ASC) USING BTREE,
|
||||
INDEX `idx_file_type`(`file_type` ASC) USING BTREE,
|
||||
INDEX `idx_created_at`(`created_at` ASC) USING BTREE
|
||||
) ENGINE = InnoDB AUTO_INCREMENT = 10 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_unicode_ci COMMENT = '附件表' ROW_FORMAT = DYNAMIC;
|
||||
) ENGINE = InnoDB AUTO_INCREMENT = 13 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_unicode_ci COMMENT = '附件表' ROW_FORMAT = DYNAMIC;
|
||||
|
||||
-- ----------------------------
|
||||
-- Records of attachments
|
||||
@@ -125,6 +125,9 @@ INSERT INTO `attachments` VALUES (6, 1, 'cc_upload_9AqkM4FiiRhzl1On693d6c27ce6eb
|
||||
INSERT INTO `attachments` VALUES (7, 1, 'cc_upload_gXTnJhQ2DSbBr3Ql693d6c27c0b62.jpg', 'cc_upload_gXTnJhQ2DSbBr3Ql693d6c27c0b62.jpg', 'uploads\\2026\\01\\19\\cc_upload_gXTnJhQ2DSbBr3Ql693d6c27c0b62_1768824028.jpg', '/uploads/2026/01/19/cc_upload_gXTnJhQ2DSbBr3Ql693d6c27c0b62_1768824028.jpg', 210572, 'image', 'image/jpeg', 'local', NULL, 0, 1768824029, 1768824029);
|
||||
INSERT INTO `attachments` VALUES (8, 1, 'cc_upload_etVM7GrPwl33KYzn693cc3016abdf.png', 'cc_upload_etVM7GrPwl33KYzn693cc3016abdf.png', 'uploads\\2026\\01\\19\\cc_upload_etVM7GrPwl33KYzn693cc3016abdf_1768824028.png', '/uploads/2026/01/19/cc_upload_etVM7GrPwl33KYzn693cc3016abdf_1768824028.png', 1161285, 'image', 'image/png', 'local', NULL, 0, 1768824029, 1768824029);
|
||||
INSERT INTO `attachments` VALUES (9, 1, 'cc_upload_HiPDFg6oL0Q5ijfo693ce1f5eb57c.jpg', 'cc_upload_HiPDFg6oL0Q5ijfo693ce1f5eb57c.jpg', 'uploads\\2026\\01\\19\\cc_upload_HiPDFg6oL0Q5ijfo693ce1f5eb57c_1768825204.jpg', '/uploads/2026/01/19/cc_upload_HiPDFg6oL0Q5ijfo693ce1f5eb57c_1768825204.jpg', 1674408, 'image', 'image/jpeg', 'local', NULL, 0, 1768825204, 1768825204);
|
||||
INSERT INTO `attachments` VALUES (10, 1, 'cc_upload_7BNbjCmbBatx3S4t6958b017537b6.jpg', 'cc_upload_7BNbjCmbBatx3S4t6958b017537b6.jpg', 'uploads\\2026\\01\\19\\cc_upload_7BNbjCmbBatx3S4t6958b017537b6_1768828219.jpg', '/uploads/2026/01/19/cc_upload_7BNbjCmbBatx3S4t6958b017537b6_1768828219.jpg', 104725, 'image', 'image/jpeg', 'local', NULL, 0, 1768828220, 1768828220);
|
||||
INSERT INTO `attachments` VALUES (11, 1, 'cc_upload_P17ls1spvgI0uDk56958b02daaf14.jpg', 'cc_upload_P17ls1spvgI0uDk56958b02daaf14.jpg', 'uploads\\2026\\01\\19\\cc_upload_P17ls1spvgI0uDk56958b02daaf14_1768828219.jpg', '/uploads/2026/01/19/cc_upload_P17ls1spvgI0uDk56958b02daaf14_1768828219.jpg', 305101, 'image', 'image/jpeg', 'local', NULL, 0, 1768828220, 1768828220);
|
||||
INSERT INTO `attachments` VALUES (12, 1, 'cc_upload_7BNbjCmbBatx3S4t6958b017537b6.jpg', 'cc_upload_7BNbjCmbBatx3S4t6958b017537b6.jpg', 'uploads\\2026\\01\\19\\cc_upload_7BNbjCmbBatx3S4t6958b017537b6_1768828707.jpg', '/uploads/2026/01/19/cc_upload_7BNbjCmbBatx3S4t6958b017537b6_1768828707.jpg', 104725, 'image', 'image/jpeg', 'local', NULL, 0, 1768828707, 1768828707);
|
||||
|
||||
-- ----------------------------
|
||||
-- Table structure for categories
|
||||
@@ -458,7 +461,7 @@ INSERT INTO `posts` VALUES (1, 'refactor', '重构的艺术：如何优雅地处
|
||||
INSERT INTO `posts` VALUES (2, 'shader', '着色器魔法：从零开始写一个噪声生成器', 2, NULL, '深入了解WebGL着色器，学习如何从零开始实现一个高性能的噪声生成器，为你的3D作品增添独特的视觉效果。', ' <p>GLSL (OpenGL Shading Language) 是一门让人生畏但也充满魅力的语言。它运行在 GPU 上，能够并行处理数百万个像素，创造出惊人的视觉效果。</p>\r\n <h2>什么是柏林噪声？</h2>\r\n <p>柏林噪声（Perlin Noise）是一种梯度噪声，它比普通的随机数生成的噪声看起来更自然、更平滑。它常被用来模拟云彩、地形、火焰等自然现象。</p>\r\n <h2>Three.js 中的实现</h2>\r\n <p>在 Three.js 中，我们可以通过 <code>ShaderMaterial</code> 直接编写 GLSL 代码。</p>\r\n <pre><code><span class=\"code-comment\">// 简单的顶点着色器</span>\r\n<span class=\"code-keyword\">varying</span> <span class=\"code-keyword\">vec2</span> vUv;\r\n<span class=\"code-keyword\">void</span> <span class=\"code-func\">main</span>() {\r\n vUv = uv;\r\n gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\r\n}</code></pre>\r\n <p>通过调整噪声的频率和振幅，我们可以得到各种不同的纹理效果。在我的个人网站背景中，就使用了这种技术来生成流动的极光效果。</p>\r\n ', 1, 1, 0, 1768291815, 1768538949);
|
||||
INSERT INTO `posts` VALUES (3, 'ux', '用户体验设计：从认知心理学到交互实践', 3, NULL, '探索用户体验设计的核心原理，结合认知心理学知识，学习如何设计出真正符合用户需求的交互界面。', '<h2>认知心理学在UX设计中的应用</h2><p>了解用户的认知过程是设计良好用户体验的基础...</p>', 0, 1, 0, 1768291816, 1768538949);
|
||||
INSERT INTO `posts` VALUES (4, 'goravel-guide-1', 'Goravel 入门指南 (一)：环境搭建与 Hello World', 4, 1, '本文将带你了解 Go 语言领域的 Laravel —— Goravel 框架，并演示如何快速搭建环境及运行第一个 Web 服务。', '## 什么是 Goravel？\n\nGoravel 是一个基于 Go 语言的 Web 开发框架，它的设计理念深受 PHP Laravel 框架的启发。如果你是一名从 PHP 转 Go 的开发者，或者你喜欢 Laravel 那种“开箱即用、优雅简洁”的开发体验，那么 Goravel 绝对是你的不二之选。\n\n它集成了丰富的功能模块，包括但不限于：\n- 强大的路由系统\n- ORM（基于 GORM 封装）\n- 依赖注入容器\n- 队列与任务调度\n- 缓存与文件存储\n\n## 环境搭建\n\nGoravel 提供了一个名为 `knit` 的命令行工具（类似 Laravel 的 artisan），可以帮助我们快速初始化项目。\n\n### 1. 安装 Knit CLI\n\n确保你已经安装了 Go (1.20+)，然后运行以下命令：\n\n```bash\ngo install github.com/goravel/knit/cmd/knit@latest\n```\n\n### 2. 创建新项目\n\n使用 `knit new` 命令创建项目：\n\n```bash\nknit new my-goravel-app\ncd my-goravel-app\n```\n\n### 3. 安装依赖\n\n```bash\ngo mod tidy\n```\n\n## 目录结构\n\n打开项目，你会发现它的目录结构非常清晰，带有浓厚的 Laravel 风格：\n\n- **app/**: 核心业务代码（Http 控制器、模型、服务提供者等）\n- **config/**: 配置文件（应用配置、数据库配置等）\n- **routes/**: 路由定义文件\n- **database/**: 数据库迁移与填充\n- **public/**: 静态资源文件\n\n## 运行 Hello World\n\nGoravel 的入口文件是根目录下的 `main.go`。在运行之前，我们先看一眼路由定义。打开 `routes/web.go`：\n\n```go\npackage routes\n\nimport (\n \"github.com/goravel/framework/contracts/http\"\n \"github.com/goravel/framework/facades\"\n)\n\nfunc Web() {\n facades.Route().Get(\"/\", func(ctx http.Context) http.Response {\n return ctx.Response().Json(200, http.Json{\n \"Hello\": \"Goravel\",\n })\n })\n}\n```\n\n非常直观！现在让我们启动服务：\n\n```bash\ngo run .\n```\n\n默认情况下，服务会运行在 `http://localhost:3000`。打开浏览器访问，你应该能看到 JSON 响应：\n\n```json\n{\n \"Hello\": \"Goravel\"\n}\n```\n\n至此，你已经成功运行了你的第一个 Goravel 应用！在下一篇文章中，我们将深入探讨路由与控制器的使用。', 1210, 1, 0, 1768465932, 1768538949);
|
||||
INSERT INTO `posts` VALUES (5, 'goravel-guide-2', 'Goravel 入门指南 (二)：路由与控制器', 4, 1, '深入理解 Goravel 的 HTTP 层，学习如何定义 RESTful 路由、创建控制器以及处理 HTTP 请求与响应。', '## 路由系统\n\n在 Goravel 中，路由定义通常位于 `routes/` 目录下。`api.go` 用于定义 API 路由，`web.go` 用于定义网页路由。Goravel 使用 `facades.Route()` 来定义路由，这得益于其强大的依赖注入系统。\n\n### 基础路由\n\n```go\n// GET 请求\nfacades.Route().Get(\"/users\", func(ctx http.Context) http.Response {\n return ctx.Response().String(200, \"User List\")\n})\n\n// POST 请求\nfacades.Route().Post(\"/users\", func(ctx http.Context) http.Response {\n return ctx.Response().Success().Json(http.Json{\"id\": 1})\n})\n```\n\n### 路由参数\n\n获取 URL 中的动态参数非常简单：\n\n```go\nfacades.Route().Get(\"/users/{id}\", func(ctx http.Context) http.Response {\n id := ctx.Request().Input(\"id\")\n return ctx.Response().Success().Json(http.Json{\"user_id\": id})\n})\n```\n\n## 控制器 (Controllers)\n\n随着应用变大，我们不可能把所有逻辑都写在路由闭包里。这时候就需要控制器了。\n\n### 创建控制器\n\n使用 `knit` 工具可以快速生成控制器：\n\n```bash\nknit make:controller UserController\n```\n\n这会在 `app/http/controllers` 目录下生成 `user_controller.go`。让我们修改它来添加一个 `Show` 方法：\n\n```go\npackage controllers\n\nimport (\n \"github.com/goravel/framework/contracts/http\"\n)\n\ntype UserController struct {\n // 可以在这里注入服务\n}\n\nfunc NewUserController() *UserController {\n return &UserController{}\n}\n\nfunc (r *UserController) Show(ctx http.Context) http.Response {\n id := ctx.Request().Input(\"id\")\n // 模拟数据库查询\n return ctx.Response().Success().Json(http.Json{\n \"id\": id,\n \"name\": \"Goravel User\",\n })\n}\n```\n\n### 注册控制器路由\n\n回到 `routes/api.go`，我们需要先实例化控制器，然后绑定路由：\n\n```go\nimport \"my-goravel-app/app/http/controllers\"\n\nfunc Api() {\n userController := controllers.NewUserController()\n \n // 绑定到控制器方法\n facades.Route().Get(\"/users/{id}\", userController.Show)\n}\n```\n\n## 请求与响应\n\n在控制器方法中，`ctx` (http.Context) 是核心：\n\n- **获取输入**: `ctx.Request().Input(\"key\")`\n- **获取 JSON**: `ctx.Request().Bind(&user)`\n- **返回 JSON**: `ctx.Response().Json(200, data)`\n- **设置状态码**: `ctx.Response().Status(404)`\n\n通过这种方式，Goravel 让 HTTP 层的处理变得异常清晰和标准化。下一章，我们将学习如何通过 ORM 操作数据库。', 903, 1, 0, 1768465933, 1768538949);
|
||||
INSERT INTO `posts` VALUES (5, 'goravel-guide-2', 'Goravel 入门指南 (二)：路由与控制器', 4, 1, '深入理解 Goravel 的 HTTP 层，学习如何定义 RESTful 路由、创建控制器以及处理 HTTP 请求与响应。', '## 路由系统\n\n在 Goravel 中，路由定义通常位于 `routes/` 目录下。`api.go` 用于定义 API 路由，`web.go` 用于定义网页路由。Goravel 使用 `facades.Route()` 来定义路由，这得益于其强大的依赖注入系统。\n\n### 基础路由\n\n```go\n// GET 请求\nfacades.Route().Get(\"/users\", func(ctx http.Context) http.Response {\n return ctx.Response().String(200, \"User List\")\n})\n\n// POST 请求\nfacades.Route().Post(\"/users\", func(ctx http.Context) http.Response {\n return ctx.Response().Success().Json(http.Json{\"id\": 1})\n})\n```\n\n### 路由参数\n\n获取 URL 中的动态参数非常简单：\n\n```go\nfacades.Route().Get(\"/users/{id}\", func(ctx http.Context) http.Response {\n id := ctx.Request().Input(\"id\")\n return ctx.Response().Success().Json(http.Json{\"user_id\": id})\n})\n```\n\n## 控制器 (Controllers)\n\n随着应用变大，我们不可能把所有逻辑都写在路由闭包里。这时候就需要控制器了。\n\n### 创建控制器\n\n使用 `knit` 工具可以快速生成控制器：\n\n```bash\nknit make:controller UserController\n```\n\n这会在 `app/http/controllers` 目录下生成 `user_controller.go`。让我们修改它来添加一个 `Show` 方法：\n\n```go\npackage controllers\n\nimport (\n \"github.com/goravel/framework/contracts/http\"\n)\n\ntype UserController struct {\n // 可以在这里注入服务\n}\n\nfunc NewUserController() *UserController {\n return &UserController{}\n}\n\nfunc (r *UserController) Show(ctx http.Context) http.Response {\n id := ctx.Request().Input(\"id\")\n // 模拟数据库查询\n return ctx.Response().Success().Json(http.Json{\n \"id\": id,\n \"name\": \"Goravel User\",\n })\n}\n```\n\n### 注册控制器路由\n\n回到 `routes/api.go`，我们需要先实例化控制器，然后绑定路由：\n\n```go\nimport \"my-goravel-app/app/http/controllers\"\n\nfunc Api() {\n userController := controllers.NewUserController()\n \n // 绑定到控制器方法\n facades.Route().Get(\"/users/{id}\", userController.Show)\n}\n```\n\n## 请求与响应\n\n在控制器方法中，`ctx` (http.Context) 是核心：\n\n- **获取输入**: `ctx.Request().Input(\"key\")`\n- **获取 JSON**: `ctx.Request().Bind(&user)`\n- **返回 JSON**: `ctx.Response().Json(200, data)`\n- **设置状态码**: `ctx.Response().Status(404)`\n\n通过这种方式，Goravel 让 HTTP 层的处理变得异常清晰和标准化。下一章，我们将学习如何通过 ORM 操作数据库。', 904, 1, 0, 1768465933, 1768538949);
|
||||
INSERT INTO `posts` VALUES (6, 'goravel-guide-3', 'Goravel 入门指南 (三)：ORM 数据库操作', 4, 1, '掌握 Goravel 强大的 ORM 功能，从数据库配置、模型定义到执行增删改查（CRUD）操作。', '## Goravel ORM 简介\r\nGoravel 的 ORM 基于著名的 GORM 库构建，但它进行了一层优雅的封装，使其调用方式更接近 Laravel 的 Eloquent ORM。这意味着你可以使用 Facade 模式轻松调用数据库，且支持自动迁移。\r\n## 配置数据库\r\n打开 `config/database.go` 或 `.env` 文件，配置你的 MySQL 连接信息：\r\n```env\r\nDB_CONNECTION=mysql\r\nDB_HOST=127.0.0.1\r\nDB_PORT=3306\r\nDB_DATABASE=goravel\r\nDB_USERNAME=root\r\nDB_PASSWORD=password\r\n```\r\n## 定义模型\r\n使用 `knit` 生成模型：\r\n```bash\r\nknit make:model Post\r\n```\r\n生成的模型文件位于 `app/models/post.go`。我们需要定义结构体字段：\r\n```go\r\npackage models\r\nimport (\r\n \\\"github.com/goravel/framework/database/orm\\\"\r\n )\r\ntype Post struct {\r\n orm.Model\r\n Title string `gorm:\\\"size:255;not null\\\"`\r\n Content string `gorm:\\\"type:text\\\"`\r\n UserID uint\r\n }\r\n ```\r\n## 数据库迁移\r\n虽然 GORM 支持 AutoMigrate，但 Goravel 推荐使用迁移文件来管理数据库变更。\r\n```bash\r\nknit make:migration create_posts_table\r\n```\r\n编辑生成的迁移文件 (`database/migrations/xxxx_create_posts_table.go`)，定义表结构，然后运行：\r\n```bash\r\nknit migrate\r\n```\r\n## CRUD 操作\r\n有了模型，我们就可以愉快地操作数据库了。所有操作都通过 `facades.Orm()` 入口。\r\n### 创建 (Create)\r\n```go\r\npost := models.Post{\r\n Title: \\\"My First Post\\\",\r\n Content: \\\"Content goes here...\\\",\r\n }\r\n err := facades.Orm().Query().Create(&post)\r\n ```\r\n### 查询 (Read)\r\n```go\r\nvar post models.Post\r\n// 根据主键查询\r\nfacades.Orm().Query().Find(&post, 1)\r\n// 条件查询\r\nvar posts []models.Post\r\nfacades.Orm().Query().Where(\\\"title\\\", \\\"My First Post\\\").Get(&posts)\r\n```\r\n### 更新 (Update)\r\n```go\r\nvar post models.Post\r\nfacades.Orm().Query().Find(&post, 1)\r\npost.Title = \\\"Updated Title\\\"\r\nfacades.Orm().Query().Save(&post)\r\n```\r\n### 删除 (Delete)\r\n```go\r\nvar post models.Post\r\nfacades.Orm().Query().Delete(&post, 1)\r\n```\r\nGoravel 的 ORM 让 Go 语言的数据库操作不再繁琐，极大地提高了开发效率。配合之前的路由和控制器知识，你现在已经具备了开发完整 RESTful API 的能力！', 1593, 1, 0, 1768465934, 1768809351);
|
||||
|
||||
-- ----------------------------
|
||||
@@ -734,18 +737,40 @@ CREATE TABLE `work_gallery` (
|
||||
PRIMARY KEY (`id`) USING BTREE,
|
||||
INDEX `idx_work_id`(`work_id` ASC) USING BTREE,
|
||||
INDEX `idx_sort_order`(`sort_order` ASC) USING BTREE
|
||||
) ENGINE = InnoDB AUTO_INCREMENT = 8 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_unicode_ci COMMENT = '作品图库表' ROW_FORMAT = DYNAMIC;
|
||||
) ENGINE = InnoDB AUTO_INCREMENT = 30 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_unicode_ci COMMENT = '作品图库表' ROW_FORMAT = DYNAMIC;
|
||||
|
||||
-- ----------------------------
|
||||
-- Records of work_gallery
|
||||
-- ----------------------------
|
||||
INSERT INTO `work_gallery` VALUES (1, 'nova', 'https://images.unsplash.com/photo-1642543492481-44e81e3914a7?q=80&w=2070', 1, 'Nova 交易平台首页', 1768825221, 1768291937);
|
||||
INSERT INTO `work_gallery` VALUES (2, 'nova', 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=2070', 2, 'Nova 交易平台交易界面', 1768825221, 1768291937);
|
||||
INSERT INTO `work_gallery` VALUES (3, 'archdaily', 'https://images.unsplash.com/photo-1503387762-592deb58ef4e?q=80&w=2089', 1, 'ArchDaily 网站首页', 0, 1768291937);
|
||||
INSERT INTO `work_gallery` VALUES (4, 'archdaily', 'https://images.unsplash.com/photo-1518005020951-ecc859466abc?q=80&w=1920', 2, 'ArchDaily 文章详情页', 0, 1768291937);
|
||||
INSERT INTO `work_gallery` VALUES (5, 'nova', 'https://images.unsplash.com/photo-1642543492481-44e81e3914a7?q=80&w=2070', 1, '', 0, 1768825221);
|
||||
INSERT INTO `work_gallery` VALUES (6, 'nova', 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=2070', 2, '', 0, 1768825221);
|
||||
INSERT INTO `work_gallery` VALUES (7, 'nova', '/uploads/2026/01/19/cc_upload_HiPDFg6oL0Q5ijfo693ce1f5eb57c_1768825204.jpg', 3, '', 0, 1768825221);
|
||||
INSERT INTO `work_gallery` VALUES (1, 'nova', 'https://images.unsplash.com/photo-1642543492481-44e81e3914a7?q=80&w=2070', 1, 'Nova 交易平台首页', 1768826702, 1768291937);
|
||||
INSERT INTO `work_gallery` VALUES (2, 'nova', 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=2070', 2, 'Nova 交易平台交易界面', 1768826702, 1768291937);
|
||||
INSERT INTO `work_gallery` VALUES (3, 'archdaily', 'https://images.unsplash.com/photo-1503387762-592deb58ef4e?q=80&w=2089', 1, 'ArchDaily 网站首页', 1768828228, 1768291937);
|
||||
INSERT INTO `work_gallery` VALUES (4, 'archdaily', 'https://images.unsplash.com/photo-1518005020951-ecc859466abc?q=80&w=1920', 2, 'ArchDaily 文章详情页', 1768828228, 1768291937);
|
||||
INSERT INTO `work_gallery` VALUES (5, 'nova', 'https://images.unsplash.com/photo-1642543492481-44e81e3914a7?q=80&w=2070', 1, '', 1768826702, 1768825221);
|
||||
INSERT INTO `work_gallery` VALUES (6, 'nova', 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=2070', 2, '', 1768826702, 1768825221);
|
||||
INSERT INTO `work_gallery` VALUES (7, 'nova', '/uploads/2026/01/19/cc_upload_HiPDFg6oL0Q5ijfo693ce1f5eb57c_1768825204.jpg', 3, '', 1768826702, 1768825221);
|
||||
INSERT INTO `work_gallery` VALUES (8, 'nova', 'https://images.unsplash.com/photo-1642543492481-44e81e3914a7?q=80&w=2070', 1, '', 0, 1768826702);
|
||||
INSERT INTO `work_gallery` VALUES (9, 'nova', 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=2070', 2, '', 0, 1768826702);
|
||||
INSERT INTO `work_gallery` VALUES (10, 'nova', '/uploads/2026/01/19/cc_upload_HiPDFg6oL0Q5ijfo693ce1f5eb57c_1768825204.jpg', 3, '', 0, 1768826702);
|
||||
INSERT INTO `work_gallery` VALUES (11, 'nova', 'https://images.unsplash.com/photo-1642543492481-44e81e3914a7?q=80&w=2070', 4, '', 0, 1768826702);
|
||||
INSERT INTO `work_gallery` VALUES (12, 'nova', 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=2070', 5, '', 0, 1768826702);
|
||||
INSERT INTO `work_gallery` VALUES (13, 'nova', '/uploads/2026/01/19/cc_upload_HiPDFg6oL0Q5ijfo693ce1f5eb57c_1768825204.jpg', 6, '', 0, 1768826702);
|
||||
INSERT INTO `work_gallery` VALUES (14, 'nova', '/uploads/2026/01/19/cc_upload_0NeLXeWx8AmBi7Mx693ce05fea320_1768824028.jpg', 7, '', 0, 1768826702);
|
||||
INSERT INTO `work_gallery` VALUES (15, 'nova', '/uploads/2026/01/19/cc_upload_62sXZ0HMvINRUYDO693d6c27c7045_1768824028.jpg', 8, '', 0, 1768826702);
|
||||
INSERT INTO `work_gallery` VALUES (16, 'nova', '/uploads/2026/01/19/cc_upload_9AqkM4FiiRhzl1On693d6c27ce6eb_1768824028.jpg', 9, '', 0, 1768826702);
|
||||
INSERT INTO `work_gallery` VALUES (17, 'nova', '/uploads/2026/01/19/cc_upload_gXTnJhQ2DSbBr3Ql693d6c27c0b62_1768824028.jpg', 10, '', 0, 1768826702);
|
||||
INSERT INTO `work_gallery` VALUES (18, 'nova', '/uploads/2026/01/19/cc_upload_etVM7GrPwl33KYzn693cc3016abdf_1768824028.png', 11, '', 0, 1768826702);
|
||||
INSERT INTO `work_gallery` VALUES (19, 'nova', '/uploads/2026/01/19/cc_upload_xTUFrRBdm7zWyjQs693a39ea93969_1768824015.jpg', 12, '', 0, 1768826702);
|
||||
INSERT INTO `work_gallery` VALUES (20, 'archdaily', 'https://images.unsplash.com/photo-1503387762-592deb58ef4e?q=80&w=2089', 1, '', 0, 1768828228);
|
||||
INSERT INTO `work_gallery` VALUES (21, 'archdaily', '/uploads/2026/01/19/cc_upload_7BNbjCmbBatx3S4t6958b017537b6_1768828219.jpg', 2, '', 0, 1768828228);
|
||||
INSERT INTO `work_gallery` VALUES (22, 'archdaily', '/uploads/2026/01/19/cc_upload_P17ls1spvgI0uDk56958b02daaf14_1768828219.jpg', 3, '', 0, 1768828228);
|
||||
INSERT INTO `work_gallery` VALUES (23, 'work_1768828710998326100', '/uploads/2026/01/19/cc_upload_HiPDFg6oL0Q5ijfo693ce1f5eb57c_1768825204.jpg', 1, '', 0, 1768828711);
|
||||
INSERT INTO `work_gallery` VALUES (24, 'work_1768828710998326100', '/uploads/2026/01/19/cc_upload_P17ls1spvgI0uDk56958b02daaf14_1768828219.jpg', 2, '', 0, 1768828711);
|
||||
INSERT INTO `work_gallery` VALUES (25, 'work_1768828710998326100', '/uploads/2026/01/19/cc_upload_7BNbjCmbBatx3S4t6958b017537b6_1768828219.jpg', 3, '', 0, 1768828711);
|
||||
INSERT INTO `work_gallery` VALUES (26, 'work_1768828710998326100', '/uploads/2026/01/19/cc_upload_gXTnJhQ2DSbBr3Ql693d6c27c0b62_1768824028.jpg', 4, '', 0, 1768828711);
|
||||
INSERT INTO `work_gallery` VALUES (27, 'work_1768828710998326100', '/uploads/2026/01/19/cc_upload_etVM7GrPwl33KYzn693cc3016abdf_1768824028.png', 5, '', 0, 1768828711);
|
||||
INSERT INTO `work_gallery` VALUES (28, 'work_1768828710998326100', '/uploads/2026/01/19/cc_upload_xTUFrRBdm7zWyjQs693a39ea93969_1768824015.jpg', 6, '', 0, 1768828711);
|
||||
INSERT INTO `work_gallery` VALUES (29, 'work_1768828710998326100', '/uploads/2026/01/19/cc_upload_9AqkM4FiiRhzl1On693d6c27ce6eb_1768824028.jpg', 7, '', 0, 1768828711);
|
||||
|
||||
-- ----------------------------
|
||||
-- Table structure for work_tech_stack
|
||||
@@ -761,25 +786,38 @@ CREATE TABLE `work_tech_stack` (
|
||||
PRIMARY KEY (`id`) USING BTREE,
|
||||
INDEX `idx_work_id`(`work_id` ASC) USING BTREE,
|
||||
INDEX `idx_category`(`category` ASC) USING BTREE
|
||||
) ENGINE = InnoDB AUTO_INCREMENT = 15 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_unicode_ci COMMENT = '作品技术栈表' ROW_FORMAT = DYNAMIC;
|
||||
) ENGINE = InnoDB AUTO_INCREMENT = 28 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_unicode_ci COMMENT = '作品技术栈表' ROW_FORMAT = DYNAMIC;
|
||||
|
||||
-- ----------------------------
|
||||
-- Records of work_tech_stack
|
||||
-- ----------------------------
|
||||
INSERT INTO `work_tech_stack` VALUES (1, 'nova', '前端层', 'React 18', 1768825220, 1768291937);
|
||||
INSERT INTO `work_tech_stack` VALUES (2, 'nova', '前端层', 'TypeScript', 1768825220, 1768291937);
|
||||
INSERT INTO `work_tech_stack` VALUES (3, 'nova', '前端层', 'D3.js', 1768825220, 1768291937);
|
||||
INSERT INTO `work_tech_stack` VALUES (4, 'nova', '后端服务', 'Golang', 1768825220, 1768291937);
|
||||
INSERT INTO `work_tech_stack` VALUES (5, 'nova', '后端服务', 'gRPC', 1768825220, 1768291937);
|
||||
INSERT INTO `work_tech_stack` VALUES (6, 'archdaily', '核心前端', 'Vue 3', 0, 1768291937);
|
||||
INSERT INTO `work_tech_stack` VALUES (7, 'archdaily', '核心前端', 'Nuxt.js', 0, 1768291937);
|
||||
INSERT INTO `work_tech_stack` VALUES (8, 'archdaily', '核心前端', 'GSAP', 0, 1768291937);
|
||||
INSERT INTO `work_tech_stack` VALUES (9, 'archdaily', 'CMS', 'Strapi', 0, 1768291937);
|
||||
INSERT INTO `work_tech_stack` VALUES (10, 'nova', '前端层', 'React 18', 0, 1768825220);
|
||||
INSERT INTO `work_tech_stack` VALUES (11, 'nova', '前端层', 'TypeScript', 0, 1768825220);
|
||||
INSERT INTO `work_tech_stack` VALUES (12, 'nova', '前端层', 'D3.js', 0, 1768825220);
|
||||
INSERT INTO `work_tech_stack` VALUES (13, 'nova', '后端服务', 'Golang', 0, 1768825220);
|
||||
INSERT INTO `work_tech_stack` VALUES (14, 'nova', '后端服务', 'gRPC', 0, 1768825220);
|
||||
INSERT INTO `work_tech_stack` VALUES (1, 'nova', '前端层', 'React 18', 1768826702, 1768291937);
|
||||
INSERT INTO `work_tech_stack` VALUES (2, 'nova', '前端层', 'TypeScript', 1768826702, 1768291937);
|
||||
INSERT INTO `work_tech_stack` VALUES (3, 'nova', '前端层', 'D3.js', 1768826702, 1768291937);
|
||||
INSERT INTO `work_tech_stack` VALUES (4, 'nova', '后端服务', 'Golang', 1768826702, 1768291937);
|
||||
INSERT INTO `work_tech_stack` VALUES (5, 'nova', '后端服务', 'gRPC', 1768826702, 1768291937);
|
||||
INSERT INTO `work_tech_stack` VALUES (6, 'archdaily', '核心前端', 'Vue 3', 1768828228, 1768291937);
|
||||
INSERT INTO `work_tech_stack` VALUES (7, 'archdaily', '核心前端', 'Nuxt.js', 1768828228, 1768291937);
|
||||
INSERT INTO `work_tech_stack` VALUES (8, 'archdaily', '核心前端', 'GSAP', 1768828228, 1768291937);
|
||||
INSERT INTO `work_tech_stack` VALUES (9, 'archdaily', 'CMS', 'Strapi', 1768828228, 1768291937);
|
||||
INSERT INTO `work_tech_stack` VALUES (10, 'nova', '前端层', 'React 18', 1768826702, 1768825220);
|
||||
INSERT INTO `work_tech_stack` VALUES (11, 'nova', '前端层', 'TypeScript', 1768826702, 1768825220);
|
||||
INSERT INTO `work_tech_stack` VALUES (12, 'nova', '前端层', 'D3.js', 1768826702, 1768825220);
|
||||
INSERT INTO `work_tech_stack` VALUES (13, 'nova', '后端服务', 'Golang', 1768826702, 1768825220);
|
||||
INSERT INTO `work_tech_stack` VALUES (14, 'nova', '后端服务', 'gRPC', 1768826702, 1768825220);
|
||||
INSERT INTO `work_tech_stack` VALUES (15, 'nova', '前端层', 'React 18', 0, 1768826702);
|
||||
INSERT INTO `work_tech_stack` VALUES (16, 'nova', '前端层', 'TypeScript', 0, 1768826702);
|
||||
INSERT INTO `work_tech_stack` VALUES (17, 'nova', '前端层', 'D3.js', 0, 1768826702);
|
||||
INSERT INTO `work_tech_stack` VALUES (18, 'nova', '后端服务', 'Golang', 0, 1768826702);
|
||||
INSERT INTO `work_tech_stack` VALUES (19, 'nova', '后端服务', 'gRPC', 0, 1768826702);
|
||||
INSERT INTO `work_tech_stack` VALUES (20, 'archdaily', 'CMS', 'Strapi', 0, 1768828228);
|
||||
INSERT INTO `work_tech_stack` VALUES (21, 'archdaily', '核心前端', 'Vue 3', 0, 1768828228);
|
||||
INSERT INTO `work_tech_stack` VALUES (22, 'archdaily', '核心前端', 'Nuxt.js', 0, 1768828228);
|
||||
INSERT INTO `work_tech_stack` VALUES (23, 'archdaily', '核心前端', 'GSAP', 0, 1768828228);
|
||||
INSERT INTO `work_tech_stack` VALUES (24, 'work_1768828710998326100', '前端', 'Vue3', 0, 1768828711);
|
||||
INSERT INTO `work_tech_stack` VALUES (25, 'work_1768828710998326100', '前端', 'Ts', 0, 1768828711);
|
||||
INSERT INTO `work_tech_stack` VALUES (26, 'work_1768828710998326100', '前端', 'Tailwindcss', 0, 1768828711);
|
||||
INSERT INTO `work_tech_stack` VALUES (27, 'work_1768828710998326100', '前端', 'IndexDB', 0, 1768828711);
|
||||
|
||||
-- ----------------------------
|
||||
-- Table structure for works
|
||||
@@ -806,7 +844,8 @@ CREATE TABLE `works` (
|
||||
-- ----------------------------
|
||||
-- Records of works
|
||||
-- ----------------------------
|
||||
INSERT INTO `works` VALUES ('archdaily', 'ArchDaily 网站重构', '建筑设计', '2022', 'https://images.unsplash.com/photo-1487958449943-2429e8be8625?q=80&w=2070', 'ArchDaily 是全球最受欢迎的建筑网站之一。这次重构的目标是提升移动端体验。我们使用了 Nuxt 3 进行服务端渲染（SSR）。', NULL, 0, 0, 1768291814, 1768812789);
|
||||
INSERT INTO `works` VALUES ('nova', 'Nova 交易平台', '金融科技', '2023', 'https://images.unsplash.com/photo-1487958449943-2429e8be8625?q=80&w=2070', 'Nova 是一个专为机构交易员设计的高频交易终端。我们面临的最大挑战是如何在处理毫秒级市场数据的同时，保持界面的流畅响应。我们采用 Web Worker 来处理繁重的数据计算，避免阻塞主线程。', '{\"demo\":\"http://localhost:3000/works/nova\",\"github\":\"http://localhost:3000/works/nova\",\"live\":\"http://localhost:3000/works/nova\"}', 0, 0, 1768291814, 1768825220);
|
||||
INSERT INTO `works` VALUES ('archdaily', 'ArchDaily 网站重构', '建筑设计', '2022', 'https://images.unsplash.com/photo-1487958449943-2429e8be8625?q=80&w=2070', 'ArchDaily 是全球最受欢迎的建筑网站之一。这次重构的目标是提升移动端体验。我们使用了 Nuxt 3 进行服务端渲染（SSR）。', '{\"demo\":\"http://localhost:3000/works\",\"github\":\"http://localhost:3000/works\",\"live\":\"http://localhost:3000/works\"}', 0, 0, 1768291814, 1768828228);
|
||||
INSERT INTO `works` VALUES ('nova', 'Nova 交易平台', '金融科技', '2023', 'https://images.unsplash.com/photo-1487958449943-2429e8be8625?q=80&w=2070', 'Nova 是一个专为机构交易员设计的高频交易终端。我们面临的最大挑战是如何在处理毫秒级市场数据的同时，保持界面的流畅响应。我们采用 Web Worker 来处理繁重的数据计算，避免阻塞主线程。', '{\"demo\":\"http://localhost:3000/works/nova\",\"github\":\"http://localhost:3000/works/nova\",\"live\":\"http://localhost:3000/works/nova\"}', 0, 0, 1768291814, 1768826701);
|
||||
INSERT INTO `works` VALUES ('work_1768828710998326100', 'Mac OS', '仿系统', '2025', '/uploads/2026/01/19/cc_upload_7BNbjCmbBatx3S4t6958b017537b6_1768828707.jpg', '这是一个基于Vue3的仿Mac风格系统前端项目，可以而开成企业网盘这些功能', '{\"demo\":\"\",\"github\":\"\",\"live\":\"\"}', 0, 0, 1768828711, 1768828711);
|
||||
|
||||
SET FOREIGN_KEY_CHECKS = 1;
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 102 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 102 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 298 KiB |
Reference in New Issue
Block a user