@ -2,124 +2,162 @@
< div class = "upload-page" >
< NavBar / >
< div class = "container" >
< h1 > { { isEditMode ? '编辑项目' : '上传项目' } } < / h1 >
< form @submit.prevent ="handleSubmit" class = "upload-form" >
< div class = "page-header" >
< h1 class = "glitch-text" : data -text = " isEditMode ? ' UPDATE PROTOCOL ' : ' INITIATE UPLOAD ' " >
{ { isEditMode ? 'UPDATE PROTOCOL' : 'INITIATE UPLOAD' } }
< / h1 >
< p class = "subtitle" > { { isEditMode ? 'MODIFY EXISTING PARAMETERS' : 'DEPLOY NEW MODULE TO NETWORK' } } < / p >
< / div >
< form @submit.prevent ="handleSubmit" class = "upload-form acid-card" >
< div class = "form-section" >
< h2 > 基本信息 < / h2 >
< div class = "form-group" >
< label > 标题 * < / label >
< input
v - model = "form.title"
type = "text"
required
placeholder = "请输入项目标题"
class = "form-input"
/ >
< / div >
< div class = "form-group" >
< label > 描述 < / label >
< textarea
v - model = "form.description"
placeholder = "请输入项目描述"
rows = "4"
class = "form-textarea"
> < / textarea >
< / div >
< div class = "form-group" >
< label > 分类 < / label >
< input
v - model = "form.category"
type = "text"
placeholder = "请输入分类"
class = "form-input"
/ >
< div class = "section-header" >
< span class = "section-icon" > 📝 < / span >
< h2 > CORE_DATA < / h2 >
< / div >
< div class = "form-group" >
< label > 标签 （ 用逗号分隔 ） < / label >
< input
v - model = "form.tags"
type = "text"
placeholder = "例如：vue, react, demo"
class = "form-input"
/ >
< div class = "form-grid" >
< div class = "form-group full-width" >
< label > PROJECT TITLE < span class = "required" > * < / span > < / label >
< input
v - model = "form.title"
type = "text"
required
placeholder = "ENTER IDENTIFIER"
class = "form-input"
/ >
< / div >
< div class = "form-group full-width" >
< label > DESCRIPTION < / label >
< textarea
v - model = "form.description"
placeholder = "SYSTEM FUNCTIONS AND SPECS..."
rows = "4"
class = "form-textarea"
> < / textarea >
< / div >
< div class = "form-group" >
< label > CATEGORY < / label >
< div class = "input-wrapper" >
< input
v - model = "form.category"
type = "text"
placeholder = "CLASSIFICATION"
class = "form-input"
/ >
< / div >
< / div >
< div class = "form-group" >
< label > TAGS < / label >
< div class = "input-wrapper" >
< input
v - model = "form.tags"
type = "text"
placeholder = "KEYWORDS (COMMA SEPARATED)"
class = "form-input"
/ >
< / div >
< / div >
< / div >
< / div >
< div v-if ="!isEditMode" class="form-section" >
< h2 > 网页文件 * < / h2 >
< div class = "file-upload" >
< div class = "section-header" >
< span class = "section-icon" > 📦 < / span >
< h2 > SOURCE_FILE < span class = "required" > * < / span > < / h2 >
< / div >
< div class = "file-upload-area" : class = "{ 'has-file': form.file }" >
< input
ref = "fileInput"
type = "file"
accept = ".html,.zip"
@ change = "handleFileChange"
class = "file-input"
class = "file-input-hidden "
/ >
< div class = "file-display" >
< p v-if ="form.file" > {{ form.file.name }} < / p >
< p v -else class = "placeholder" > 请选择HTML文件或ZIP压缩包 < / p >
< div class = "upload-content" @click ="$refs.fileInput.click()" >
< div class = "upload-icon" > { { form . file ? '📄' : '☁️' } } < / div >
< div class = "upload-text" >
< p class = "main-text" > { { form . file ? form . file . name : 'DRAG & DROP OR CLICK' } } < / p >
< p class = "sub-text" > { { form . file ? ( form . file . size / 1024 ) . toFixed ( 2 ) + ' KB' : 'ACCEPTS .HTML OR .ZIP ARCHIVE' } } < / p >
< / div >
< button type = "button" class = "btn-select" >
{ { form . file ? 'REPLACE FILE' : 'SELECT FILE' } }
< / button >
< / div >
< button type = "button" @click ="$refs.fileInput.click()" class = "btn-select" >
选择文件
< / button >
< / div >
< / div >
< div v-if ="!isEditMode" class="form-section" >
< h2 > 附件 （ 可选 ） < / h2 >
< div class = "file-upload" >
< div class = "section-header" >
< span class = "section-icon" > 📎 < / span >
< h2 > ATTACHMENTS < span class = "optional" > ( OPTIONAL ) < / span > < / h2 >
< / div >
< div class = "file-list-upload" >
< input
ref = "attachmentInput"
type = "file"
multiple
@ change = "handleAttachmentChange"
class = "file-input"
class = "file-input-hidden "
/ >
< div class = "file-list" >
< div class = "file-list" v-if ="form.attachments.length > 0" >
< div v-for ="(file, index) in form.attachments" :key="index" class="file-item" >
< span > { { file . name } } < / span >
< span class = "file-icon" > 📎 < / span >
< span class = "file-name" > { { file . name } } < / span >
< span class = "file-size" > { { ( file . size / 1024 ) . toFixed ( 2 ) } } KB < / span >
< button type = "button" @click ="removeAttachment(index)" class = "btn-remove" > × < / button >
< / div >
< / div >
< button type = "button" @click ="$refs.attachmentInput.click()" class = "btn-select " >
添加附件
< button type = "button" @click ="$refs.attachmentInput.click()" class = "btn-add-file " >
[ + ADD ATTACHMENT ]
< / button >
< / div >
< / div >
< div v-if ="!isEditMode" class="form-section" >
< h2 > Markdown文档 （ 可选 ） < / h2 >
< div class = "file-upload" >
< div class = "section-header" >
< span class = "section-icon" > 📘 < / span >
< h2 > DOCUMENTATION < span class = "optional" > ( MARKDOWN ) < / span > < / h2 >
< / div >
< div class = "file-list-upload" >
< input
ref = "documentInput"
type = "file"
accept = ".md,.markdown"
multiple
@ change = "handleDocumentChange"
class = "file-input"
class = "file-input-hidden "
/ >
< div class = "file-list" >
< div v-for ="(file, index) in form.documents" :key="index" class="file-item" >
< span > { { file . name } } < / span >
< div class = "file-list" v-if ="form.documents.length > 0" >
< div v-for ="(file, index) in form.documents" :key="index" class="file-item document-type" >
< span class = "file-icon" > 📝 < / span >
< span class = "file-name" > { { file . name } } < / span >
< button type = "button" @click ="removeDocument(index)" class = "btn-remove" > × < / button >
< / div >
< / div >
< button type = "button" @click ="$refs.documentInput.click()" class = "btn-select " >
添加文档
< button type = "button" @click ="$refs.documentInput.click()" class = "btn-add-file " >
[ + ADD DOC ]
< / button >
< / div >
< / div >
< div v-if ="error" class="error-message" > {{ error }} < / div >
< div v-if ="uploadProgress > 0 && uploadProgress < 100" class="progress" >
< div class = "progress-bar" : style = "{ width: uploadProgress + '%' }" > < / div >
< span class = "progress-text" > { { uploadProgress } } % < / span >
< div v-if ="error" class="error-message" >
< span class = "error-icon" > ⚠ ️ < / span > { { error } }
< / div >
< div v-if ="uploadProgress > 0 && uploadProgress < 100" class="progress-container" >
< div class = "progress-info" >
< span > UPLOADING ... < / span >
< span > { { uploadProgress } } % < / span >
< / div >
< div class = "progress-track" >
< div class = "progress-bar" : style = "{ width: uploadProgress + '%' }" > < / div >
< / div >
< / div >
< div class = "form-actions" >
< button type = "button" @click ="$router.back()" class = "btn-cancel" > 取消 < / button >
< button type = "submit" : disabled = "loading || (!isEditMode && !form.file)" class = "btn-submit" >
{ { loading ? ( isEditMode ? '保存中...' : '上传中...' ) : ( isEditMode ? '保存' : '上传' ) } }
< button type = "button" @click ="$router.back()" class = "btn-cancel" > CANCEL < / button >
< button type = "submit" : disabled = "loading || (!isEditMode && !form.file)" class = "btn btn-primary btn -submit" >
{ { loading ? ( isEditMode ? 'SAVING...' : 'UPLOADING ...' ) : ( isEditMode ? 'SAVE CHANGES' : 'DEPLOY NOW ' ) } }
< / button >
< / div >
< / form >
@ -152,6 +190,9 @@ const form = ref({
const loading = ref ( false ) ;
const error = ref ( '' ) ;
const uploadProgress = ref ( 0 ) ;
const fileInput = ref < HTMLInputElement | null > ( null ) ;
const attachmentInput = ref < HTMLInputElement | null > ( null ) ;
const documentInput = ref < HTMLInputElement | null > ( null ) ;
const handleFileChange = ( e : Event ) => {
const target = e . target as HTMLInputElement ;
@ -163,14 +204,14 @@ const handleFileChange = (e: Event) => {
const handleAttachmentChange = ( e : Event ) => {
const target = e . target as HTMLInputElement ;
if ( target . files ) {
form . value . attachments = Array . from ( target . files ) ;
form . value . attachments = [ ... form . value . attachments , ... Array . from ( target . files ) ] ;
}
} ;
const handleDocumentChange = ( e : Event ) => {
const target = e . target as HTMLInputElement ;
if ( target . files ) {
form . value . documents = Array . from ( target . files ) ;
form . value . documents = [ ... form . value . documents , ... Array . from ( target . files ) ] ;
}
} ;
@ -189,15 +230,14 @@ const loadProjectForEdit = async (id: number) => {
form . value . description = project . description || '' ;
form . value . category = project . category || '' ;
form . value . tags = project . tags ? project . tags . join ( ', ' ) : '' ;
/ / 编 辑 模 式 下 文 件 是 可 选 的
} catch ( err : any ) {
error . value = '加载项目失败 ' ;
error . value = 'LOAD FAILED ' ;
}
} ;
const handleSubmit = async ( ) => {
if ( ! isEditMode . value && ! form . value . file ) {
error . value = '请选择网页文件 ' ;
error . value = 'SOURCE FILE REQUIRED ' ;
return ;
}
@ -207,7 +247,6 @@ const handleSubmit = async () => {
try {
if ( isEditMode . value && editProjectId . value ) {
/ / 编 辑 模 式 ： 只 更 新 基 本 信 息
const updateData : any = {
title : form . value . title ,
description : form . value . description ,
@ -215,19 +254,17 @@ const handleSubmit = async () => {
tags : form . value . tags
} ;
const response = await projectApi . update ( editProjectId . value , updateData ) ;
await projectApi . update ( editProjectId . value , updateData ) ;
router . push ( ` /project/ ${ editProjectId . value } ` ) ;
return ;
}
/ / 创 建 模 式 ： 上 传 文 件
const formData = new FormData ( ) ;
formData . append ( 'title' , form . value . title ) ;
if ( form . value . description ) formData . append ( 'description' , form . value . description ) ;
if ( form . value . category ) formData . append ( 'category' , form . value . category ) ;
if ( form . value . tags ) formData . append ( 'tags' , form . value . tags ) ;
/ / 判 断 是 H T M L 还 是 Z I P
const isZip = form . value . file ! . name . endsWith ( '.zip' ) ;
if ( isZip ) {
formData . append ( 'file' , form . value . file ! ) ;
@ -243,7 +280,6 @@ const handleSubmit = async () => {
formData . append ( 'documents' , file ) ;
} ) ;
/ / 模 拟 上 传 进 度
const progressInterval = setInterval ( ( ) => {
if ( uploadProgress . value < 90 ) {
uploadProgress . value += 10 ;
@ -258,11 +294,10 @@ const handleSubmit = async () => {
router . replace ( ` /project/ ${ response . project . id } ` ) ;
} , 500 ) ;
} catch ( err : any ) {
const errorMessage = err . response ? . data ? . error ? . message || '操作失败，请重试 ' ;
const errorMessage = err . response ? . data ? . error ? . message || 'OPERATION FAILED ' ;
error . value = errorMessage ;
uploadProgress . value = 0 ;
/ / 如 果 是 4 0 1 错 误 ， 不 显 示 错 误 信 息 ， 让 拦 截 器 处 理 跳 转
if ( err . response ? . status === 401 ) {
return ;
}
@ -287,95 +322,217 @@ onMounted(() => {
< style scoped >
. upload - page {
min - height : 100 vh ;
background : # f5f5f5 ;
background : var ( -- bg - body ) ;
}
. container {
max - width : 8 00px ;
max - width : 9 00px ;
margin : 0 auto ;
padding : 2 rem ;
}
. container h1 {
margin - bottom : 2 rem ;
color : # 333 ;
. page - header {
text - align : center ;
margin - bottom : 3 rem ;
}
. page - header h1 {
font - size : 2.5 rem ;
color : white ;
margin - bottom : 0.5 rem ;
font - weight : 900 ;
letter - spacing : - 1 px ;
}
. subtitle {
color : var ( -- color - text - muted ) ;
font - size : 1 rem ;
font - family : var ( -- font - family - mono ) ;
letter - spacing : 2 px ;
}
. upload - form {
background : white ;
border - radius : 12 px ;
padding : 2 rem ;
box - shadow : 0 2 px 8 px rgba ( 0 , 0 , 0 , 0.1 ) ;
padding : 2.5 rem ;
background : rgba ( var ( -- color - surface - rgb ) , 0.8 ) ;
backdrop - filter : blur ( 10 px ) ;
}
. form - section {
margin - bottom : 2 rem ;
margin - bottom : 2.5 rem ;
padding - bottom : 2 rem ;
border - bottom : 1 px solid # eee ;
border - bottom : 1 px dashed var ( -- border - color ) ;
}
. form - section : last - child {
. form - section : last - of - type {
border - bottom : none ;
}
. form - section h2 {
font - size : 1.25 rem ;
margin - bottom : 1 rem ;
color : # 333 ;
. section - header {
display : flex ;
align - items : center ;
gap : 1 rem ;
margin - bottom : 1.5 rem ;
}
. section - icon {
font - size : 1.5 rem ;
filter : drop - shadow ( 0 0 5 px var ( -- secondary ) ) ;
}
. section - header h2 {
font - size : 1.2 rem ;
color : var ( -- secondary ) ;
margin : 0 ;
font - weight : 700 ;
font - family : var ( -- font - family - mono ) ;
letter - spacing : 1 px ;
}
. optional {
font - size : 0.8 rem ;
color : var ( -- color - text - muted ) ;
font - weight : normal ;
margin - left : 0.5 rem ;
}
. required {
color : var ( -- accent ) ;
margin - left : 4 px ;
}
. form - grid {
display : grid ;
grid - template - columns : 1 fr 1 fr ;
gap : 1.5 rem ;
}
. full - width {
grid - column : span 2 ;
}
. form - group {
margin - bottom : 1.5 rem ;
display : flex ;
flex - direction : column ;
gap : 0.5 rem ;
}
. form - group label {
display : block ;
margin - bottom : 0.5 rem ;
font - weight : 500 ;
color : # 666 ;
font - weight : 600 ;
color : var ( -- primary ) ;
font - size : 0.7 rem ;
font - family : var ( -- font - family - mono ) ;
letter - spacing : 1 px ;
}
. input - wrapper {
position : relative ;
}
. form - input ,
. form - textarea {
width : 100 % ;
padding : 0.75 rem ;
border : 1 px solid # ddd ;
border - radius : 8 px ;
font - size : 1 rem ;
padding : 0.8 rem 1 rem ;
border : 1 px solid var ( -- border - color ) ;
background : rgba ( 0 , 0 , 0 , 0.3 ) ;
color : white ;
font - family : var ( -- font - family - mono ) ;
font - size : 0.9 rem ;
outline : none ;
transition : border - color 0.2 s ;
font - family : inherit ;
transition : all var ( -- transition - fast ) ;
}
. form - input : focus ,
. form - textarea : focus {
border - color : # 667 eea ;
border - color : var ( -- primary ) ;
box - shadow : 0 0 10 px rgba ( var ( -- color - primary - rgb ) , 0.2 ) ;
background : black ;
}
. file - upload {
display : flex ;
flex - direction : column ;
gap : 1 rem ;
/* File Upload Styling */
. file - upload - area {
border : 1 px dashed var ( -- border - color ) ;
padding : 3 rem ;
text - align : center ;
cursor : pointer ;
transition : all var ( -- transition - fast ) ;
background : rgba ( 0 , 0 , 0 , 0.2 ) ;
position : relative ;
overflow : hidden ;
}
. file - input {
. file - upload - area : hover {
border - color : var ( -- primary ) ;
background : rgba ( var ( -- color - primary - rgb ) , 0.05 ) ;
box - shadow : inset 0 0 20 px rgba ( var ( -- color - primary - rgb ) , 0.1 ) ;
}
. file - upload - area . has - file {
border - style : solid ;
border - color : var ( -- primary ) ;
background : rgba ( var ( -- color - primary - rgb ) , 0.05 ) ;
}
. file - input - hidden {
display : none ;
}
. file - display {
padding : 1 rem ;
background : # f9f9f9 ;
border - radius : 8 px ;
min - height : 3 rem ;
. upload - content {
display : flex ;
flex - direction : column ;
align - items : center ;
gap : 1 rem ;
position : relative ;
z - index : 1 ;
}
. upload - icon {
font - size : 3 rem ;
margin - bottom : 0.5 rem ;
filter : drop - shadow ( 0 0 10 px var ( -- primary ) ) ;
}
. upload - text . main - text {
font - weight : 700 ;
color : white ;
margin - bottom : 0.2 rem ;
font - family : var ( -- font - family - mono ) ;
letter - spacing : 1 px ;
}
. upload - text . sub - text {
color : var ( -- color - text - muted ) ;
font - size : 0.8 rem ;
font - family : var ( -- font - family - mono ) ;
}
. placeholder {
color : # 999 ;
. btn - select {
padding : 0.6 rem 1.5 rem ;
background : transparent ;
border : 1 px solid var ( -- primary ) ;
font - weight : 600 ;
color : var ( -- primary ) ;
cursor : pointer ;
transition : all var ( -- transition - fast ) ;
font - family : var ( -- font - family - mono ) ;
margin - top : 1 rem ;
}
. file - upload - area : hover . btn - select {
background : var ( -- primary ) ;
color : black ;
box - shadow : 0 0 10 px var ( -- primary ) ;
}
/* File List */
. file - list - upload {
display : flex ;
flex - direction : column ;
gap : 1 rem ;
align - items : flex - start ;
}
. file - list {
width : 100 % ;
display : flex ;
flex - direction : column ;
gap : 0.5 rem ;
@ -383,109 +540,140 @@ onMounted(() => {
. file - item {
display : flex ;
justify - content : space - between ;
align - items : center ;
padding : 0.5 rem ;
background : # f9f9f9 ;
border - radius : 6 px ;
gap : 1 rem ;
padding : 0.8 rem ;
background : rgba ( 255 , 255 , 255 , 0.05 ) ;
border : 1 px solid var ( -- border - color ) ;
transition : all var ( -- transition - fast ) ;
}
. btn - remove {
background : # e74c3c ;
color : white ;
border : none ;
border - radius : 4 px ;
width : 24 px ;
height : 24 px ;
cursor : pointer ;
font - size : 1.2 rem ;
line - height : 1 ;
. file - item : hover {
border - color : var ( -- secondary ) ;
background : rgba ( var ( -- color - secondary - rgb ) , 0.1 ) ;
}
. btn - select {
padding : 0.75 rem 1.5 rem ;
background : # 667 eea ;
color : white ;
border : none ;
border - radius : 8 px ;
cursor : pointer ;
. file - name {
flex : 1 ;
font - weight : 500 ;
align - self : flex - start ;
color : white ;
font - family : var ( -- font - family - mono ) ;
font - size : 0.9 rem ;
}
. btn - select : hover {
background : # 5568 d3 ;
. file - size {
color : var ( -- color - text - muted ) ;
font - size : 0.8 rem ;
font - family : var ( -- font - family - mono ) ;
}
. progress {
margin : 1 rem 0 ;
background : # f0f0f0 ;
border - radius : 8 px ;
height : 32 px ;
position : relative ;
overflow : hidden ;
. btn - remove {
width : 24 px ;
height : 24 px ;
border - radius : 0 ;
border : 1 px solid var ( -- accent ) ;
background : transparent ;
color : var ( -- accent ) ;
cursor : pointer ;
display : flex ;
align - items : center ;
justify - content : center ;
font - size : 1 rem ;
line - height : 1 ;
transition : all var ( -- transition - fast ) ;
}
. progress - bar {
height : 100 % ;
background : linear - gradient ( 135 deg , # 667 eea 0 % , # 764 ba2 100 % ) ;
transition : width 0.3 s ;
. btn - remove : hove r{
background : var ( -- accent ) ;
color : white ;
box - shadow : 0 0 8 px var ( -- accent ) ;
}
. progress - text {
position : absolute ;
top : 50 % ;
left : 50 % ;
transform : translate ( - 50 % , - 50 % ) ;
. btn - add - file {
padding : 0.6 rem 1.2 rem ;
background : transparent ;
border : 1 px dashed var ( -- border - color ) ;
color : var ( -- color - text - muted ) ;
font - weight : 600 ;
color : # 333 ;
cursor : pointer ;
transition : all var ( -- transition - fast ) ;
font - family : var ( -- font - family - mono ) ;
font - size : 0.8 rem ;
}
. error - message {
color : # e74c3c ;
padding : 1 rem ;
background : # fee ;
border - radius : 8 px ;
margin - bottom : 1 rem ;
. btn - add - file : hover {
border - color : var ( -- secondary ) ;
color : var ( -- secondary ) ;
background : rgba ( var ( -- color - secondary - rgb ) , 0.1 ) ;
box - shadow : 0 0 10 px rgba ( var ( -- color - secondary - rgb ) , 0.2 ) ;
}
/* Actions */
. form - actions {
display : flex ;
justify - content : flex - end ;
gap : 1 rem ;
margin - top : 2 rem ;
margin - top : 3 rem ;
padding - top : 2 rem ;
border - top : 1 px solid var ( -- border - color ) ;
}
. btn - cancel {
padding : 0.75 rem 2 rem ;
background : # f0f0f0 ;
border : none ;
border - radius : 8 px ;
padding : 0.8 rem 2 rem ;
background : transparent ;
border : 1 px solid var ( -- border - color ) ;
color : var ( -- color - text - muted ) ;
font - weight : 600 ;
cursor : pointer ;
font - weight : 500 ;
transition : all var ( -- transition - fast ) ;
font - family : var ( -- font - family - mono ) ;
}
. btn - cancel : hover {
background : # e0e0e0 ;
border - color : white ;
color : white ;
}
. btn - submit {
padding : 0.75 rem 2 rem ;
background : linear - gradient ( 135 deg , # 667 eea 0 % , # 764 ba2 100 % ) ;
color : white ;
border : none ;
border - radius : 8 px ;
cursor : pointer ;
font - weight : 600 ;
transition : transform 0.2 s ;
min - width : 160 px ;
}
. error - message {
margin - top : 1.5 rem ;
background : rgba ( var ( -- color - accent - rgb ) , 0.1 ) ;
color : var ( -- accent ) ;
padding : 1 rem ;
border : 1 px solid var ( -- accent ) ;
display : flex ;
align - items : center ;
gap : 0.5 rem ;
font - family : var ( -- font - family - mono ) ;
font - size : 0.9 rem ;
}
. progress - container {
margin - top : 1.5 rem ;
}
. btn - submit : hover : not ( : disabled ) {
transform : translateY ( - 2 px ) ;
. progress - info {
display : flex ;
justify - content : space - between ;
font - size : 0.8 rem ;
color : var ( -- primary ) ;
margin - bottom : 0.5 rem ;
font - family : var ( -- font - family - mono ) ;
}
. btn - submit : disabled {
opacity : 0.6 ;
cursor : not - allowed ;
. progress - track {
height : 4 px ;
background : # 333 ;
overflow : hidden ;
}
. progress - bar {
height : 100 % ;
background : var ( -- primary ) ;
transition : width 0.2 s ease ;
box - shadow : 0 0 10 px var ( -- primary ) ;
}
< / style >
