refactor: extract image form to standalone page and implement tags view store
- Created ImageForm.vue as standalone page for add/edit image functionality - Removed dialog-based image form from VmImages.vue - Implemented tagsViewStore for global tab state management - Added automatic tab closing on form cancel/back - Fixed data persistence issue when switching between image edits - Removed quick actions section from ImageForm - Updated router configuration for new image form route
This commit is contained in:
@@ -0,0 +1,825 @@
|
||||
<template>
|
||||
<div class="image-form-container">
|
||||
<!-- 顶部导航 -->
|
||||
<div class="page-header">
|
||||
<div class="header-left">
|
||||
<el-button @click="goBack" class="back-btn" circle>
|
||||
<el-icon><ArrowLeft /></el-icon>
|
||||
</el-button>
|
||||
<div class="header-title-area">
|
||||
<h1 class="page-title">{{ isEdit ? '编辑镜像' : '添加镜像' }}</h1>
|
||||
<span class="page-subtitle">{{ isEdit ? '修改现有镜像的配置信息' : '上传并配置新的虚拟机镜像' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<el-button @click="goBack" size="large">取消</el-button>
|
||||
<el-button type="primary" @click="submitForm" :loading="submitting" size="large" class="submit-btn">
|
||||
{{ isEdit ? '保存修改' : '立即创建' }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 主表单区域 -->
|
||||
<div class="form-wrapper">
|
||||
<el-form :model="form" label-position="top" :rules="rules" ref="formRef" class="main-form" size="large">
|
||||
|
||||
<!-- 左侧：主要配置 -->
|
||||
<div class="form-main-col">
|
||||
<el-card class="premium-card" shadow="never">
|
||||
<div class="section-header">
|
||||
<div class="section-icon"><el-icon><Monitor /></el-icon></div>
|
||||
<div class="section-info">
|
||||
<h3>基础信息</h3>
|
||||
<p>配置镜像的基本标识与文件信息</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-grid-2">
|
||||
<el-form-item label="镜像名称" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入镜像名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="展示名称" prop="show_name">
|
||||
<el-input v-model="form.show_name" placeholder="请输入展示名称" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<el-form-item label="文件路径" prop="path">
|
||||
<el-input v-model="form.path" placeholder="请输入镜像文件在服务器上的绝对路径">
|
||||
<template #prefix><el-icon><Folder /></el-icon></template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="镜像描述" prop="description">
|
||||
<el-input
|
||||
v-model="form.description"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="请输入关于此镜像的详细描述"
|
||||
resize="none"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-divider />
|
||||
|
||||
<div class="section-header">
|
||||
<div class="section-icon"><el-icon><SetUp /></el-icon></div>
|
||||
<div class="section-info">
|
||||
<h3>分类与版本</h3>
|
||||
<p>管理镜像的分类归属与版本信息</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-grid-2">
|
||||
<el-form-item label="所属分类" prop="class_id">
|
||||
<el-select
|
||||
v-model="form.class_id"
|
||||
placeholder="请选择分类"
|
||||
clearable
|
||||
style="width: 100%"
|
||||
@change="handleCategoryChange"
|
||||
>
|
||||
<el-option v-for="item in categoryList" :key="item.class_id" :label="item.name" :value="item.class_id" />
|
||||
<el-option label="+ 创建新分类" value="" class="create-new-option" />
|
||||
</el-select>
|
||||
|
||||
<div class="new-category-input" v-if="showNewCategoryInput">
|
||||
<el-input
|
||||
v-model="form.class_name"
|
||||
placeholder="输入新分类名称"
|
||||
>
|
||||
<template #append>
|
||||
<el-button @click="createNewCategory">创建</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="版本号" prop="vm_gen">
|
||||
<el-input v-model="form.vm_gen" placeholder="例如：v1.0.0" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<el-form-item label="关联套餐" prop="plan_id">
|
||||
<el-select v-model="form.plan_id" placeholder="请选择适用的套餐" style="width: 100%">
|
||||
<el-option v-for="item in planList" :key="item.id" :label="item.name" :value="item.id" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-card>
|
||||
</div>
|
||||
|
||||
<!-- 右侧：图标与高级 -->
|
||||
<div class="form-side-col">
|
||||
<el-card class="premium-card" shadow="never">
|
||||
<div class="section-header small">
|
||||
<div class="section-info">
|
||||
<h3>镜像图标</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="icon-uploader">
|
||||
<div class="icon-preview" v-if="form.image_ico">
|
||||
<img :src="mainUrl + form.image_ico" />
|
||||
<div class="icon-actions">
|
||||
<el-button size="small" circle @click="form.image_ico = ''"><el-icon><Delete /></el-icon></el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="upload-area" v-else>
|
||||
<div class="upload-placeholder">
|
||||
<el-icon class="upload-icon"><Picture /></el-icon>
|
||||
<div class="upload-text">点击上传或选择图标</div>
|
||||
</div>
|
||||
<div class="upload-buttons">
|
||||
<el-button type="primary" size="small" @click="$refs.fileInput.click()">本地上传</el-button>
|
||||
<el-button size="small" @click="openPicLibrary">素材库</el-button>
|
||||
</div>
|
||||
<input ref="fileInput" type="file" style="display: none" @change="onFileSelected" accept="image/*" />
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<!-- 素材库对话框 -->
|
||||
<el-dialog v-model="picSwitch" title="选择图标" width="800px" append-to-body>
|
||||
<div class="pic-search">
|
||||
<el-input
|
||||
v-model="picPagin.key"
|
||||
placeholder="搜索图标..."
|
||||
prefix-icon="Search"
|
||||
clearable
|
||||
@change="getpicList"
|
||||
/>
|
||||
</div>
|
||||
<div class="pic-grid" v-loading="picLoading">
|
||||
<div
|
||||
v-for="(item, index) in picList"
|
||||
:key="index"
|
||||
class="pic-item"
|
||||
:class="{ active: currentIndex === index }"
|
||||
@click="selectImage(index)"
|
||||
>
|
||||
<img :src="`${mainUrl}/v1/attachment/get_attachment?aid=${item.attachment_id}`" />
|
||||
<div class="pic-name">{{ item.title || '未命名' }}</div>
|
||||
<div class="pic-check" v-if="currentIndex === index"><el-icon><Check /></el-icon></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pagination-wrapper">
|
||||
<el-pagination
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
:total="total"
|
||||
:current-page="picPagin.page"
|
||||
:page-size="picPagin.count"
|
||||
@current-change="CurrentPageChange"
|
||||
/>
|
||||
</div>
|
||||
<template #footer>
|
||||
<el-button @click="picSwitch = false">取消</el-button>
|
||||
<el-button type="primary" @click="confirmPicSelection" :disabled="currentIndex === null">确定选择</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted, watch } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { ElMessage, ElNotification } from 'element-plus'
|
||||
import {
|
||||
ArrowLeft, Monitor, Folder, SetUp, Picture, Delete,
|
||||
Search, Check
|
||||
} from '@element-plus/icons-vue'
|
||||
import { getServerPlan } from '@/utils/acs/server'
|
||||
import {
|
||||
editMirror, addVirtualMirror, getImageTypeList, createImageType, getUserMirrorList
|
||||
} from '@/utils/acs/mirror'
|
||||
import { uploadFile, getFileList } from '@/utils/acs/message'
|
||||
import { mainUrl } from '@/utils/request'
|
||||
|
||||
import { useTagsViewStore } from '@/store/tagsViewStore'
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const tagsViewStore = useTagsViewStore()
|
||||
const formRef = ref(null)
|
||||
const submitting = ref(false)
|
||||
|
||||
const goBack = () => {
|
||||
tagsViewStore.delVisitedView(route)
|
||||
router.back()
|
||||
}
|
||||
const isEdit = computed(() => !!route.query.id)
|
||||
const serverId = computed(() => route.query.server_id)
|
||||
|
||||
const form = reactive({
|
||||
id: '',
|
||||
name: '',
|
||||
show_name: '',
|
||||
description: '',
|
||||
server_type: 'hyperV',
|
||||
plan_id: '',
|
||||
image_ico: '',
|
||||
server_id: '',
|
||||
path: '',
|
||||
class_id: '',
|
||||
class_name: '',
|
||||
vm_gen: ''
|
||||
})
|
||||
|
||||
const rules = {
|
||||
name: [{ required: true, message: '请输入镜像名称', trigger: 'blur' }],
|
||||
path: [{ required: true, message: '请输入文件路径', trigger: 'blur' }],
|
||||
show_name: [{ required: true, message: '请输入展示名称', trigger: 'blur' }]
|
||||
}
|
||||
|
||||
const categoryList = ref([])
|
||||
const planList = ref([])
|
||||
const showNewCategoryInput = ref(false)
|
||||
|
||||
// 素材库相关
|
||||
const picSwitch = ref(false)
|
||||
const picLoading = ref(false)
|
||||
const picPagin = reactive({
|
||||
count: 20,
|
||||
page: 1,
|
||||
key: '',
|
||||
user_type: 1
|
||||
})
|
||||
const picList = ref([])
|
||||
const total = ref(0)
|
||||
const currentIndex = ref(null)
|
||||
|
||||
// 重置表单
|
||||
const resetForm = () => {
|
||||
Object.assign(form, {
|
||||
id: '',
|
||||
name: '',
|
||||
show_name: '',
|
||||
description: '',
|
||||
server_type: 'hyperV',
|
||||
plan_id: '',
|
||||
image_ico: '',
|
||||
server_id: '',
|
||||
path: '',
|
||||
class_id: '',
|
||||
class_name: '',
|
||||
vm_gen: ''
|
||||
})
|
||||
}
|
||||
|
||||
// 初始化数据
|
||||
const initData = async () => {
|
||||
resetForm()
|
||||
|
||||
if (!serverId.value) {
|
||||
ElMessage.error('缺少服务器ID参数')
|
||||
return
|
||||
}
|
||||
|
||||
form.server_id = serverId.value
|
||||
|
||||
try {
|
||||
// 获取套餐列表
|
||||
const planRes = await getServerPlan({ server_id: serverId.value })
|
||||
if (planRes.data.code === 200) {
|
||||
planList.value = planRes.data.data.map(item => ({
|
||||
name: item.name,
|
||||
id: item.plan_id
|
||||
}))
|
||||
}
|
||||
|
||||
// 获取分类列表
|
||||
await fetchCategoryList()
|
||||
|
||||
// 如果是编辑模式，填充数据
|
||||
if (isEdit.value) {
|
||||
const id = route.query.id
|
||||
// 尝试从 history.state 获取数据
|
||||
const stateData = history.state.params ? JSON.parse(JSON.stringify(history.state.params)) : null
|
||||
|
||||
if (stateData && stateData.id == id) {
|
||||
Object.keys(form).forEach(key => {
|
||||
if (key in stateData) {
|
||||
form[key] = stateData[key]
|
||||
}
|
||||
})
|
||||
// 确保 ID 类型一致性 (有些时候 API 返回的是数字，有些时候是字符串)
|
||||
if (form.plan_id) form.plan_id = Number(form.plan_id) || form.plan_id
|
||||
if (form.class_id) form.class_id = Number(form.class_id) || form.class_id
|
||||
} else {
|
||||
// Fallback: fetch list and find item
|
||||
const listRes = await getUserMirrorList({
|
||||
server_id: serverId.value,
|
||||
count: 100,
|
||||
page: 1
|
||||
})
|
||||
if (listRes.data.code === 200) {
|
||||
const found = listRes.data.data.find(item => item.id == id)
|
||||
if (found) {
|
||||
Object.keys(form).forEach(key => {
|
||||
if (key in found) form[key] = found[key]
|
||||
})
|
||||
if (form.plan_id) form.plan_id = Number(form.plan_id) || form.plan_id
|
||||
if (form.class_id) form.class_id = Number(form.class_id) || form.class_id
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('初始化数据失败:', error)
|
||||
ElMessage.error('数据加载失败')
|
||||
}
|
||||
}
|
||||
|
||||
const fetchCategoryList = async () => {
|
||||
try {
|
||||
const res = await getImageTypeList(serverId.value)
|
||||
if (res.data.code === 200) {
|
||||
categoryList.value = res.data.data || []
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取分类失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const handleCategoryChange = (val) => {
|
||||
if (val === '') {
|
||||
// 选择了创建新分类
|
||||
form.class_id = ''
|
||||
showNewCategoryInput.value = true
|
||||
} else {
|
||||
showNewCategoryInput.value = false
|
||||
form.class_name = ''
|
||||
}
|
||||
}
|
||||
|
||||
const createNewCategory = async () => {
|
||||
if (!form.class_name.trim()) {
|
||||
ElMessage.warning('请输入分类名称')
|
||||
return
|
||||
}
|
||||
try {
|
||||
const res = await createImageType(serverId.value, form.class_name.trim(), '')
|
||||
if (res.data.code === 200) {
|
||||
ElMessage.success('分类创建成功')
|
||||
await fetchCategoryList()
|
||||
// 选中新创建的分类
|
||||
const newCat = categoryList.value.find(c => c.name === form.class_name.trim())
|
||||
if (newCat) {
|
||||
form.class_id = newCat.class_id
|
||||
showNewCategoryInput.value = false
|
||||
form.class_name = ''
|
||||
}
|
||||
} else {
|
||||
ElMessage.error(res.data.msg || '创建失败')
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error('创建分类失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 图片上传与选择
|
||||
const onFileSelected = async (event) => {
|
||||
const file = event.target.files[0]
|
||||
if (!file) return
|
||||
|
||||
try {
|
||||
const res = await uploadFile({ file })
|
||||
if (res.data.code === 200) {
|
||||
form.image_ico = '/v1/attachment/get_attachment?aid=' + res.data.data.attachment_id
|
||||
ElMessage.success('上传成功')
|
||||
} else {
|
||||
ElMessage.error('上传失败')
|
||||
}
|
||||
} catch (error) {
|
||||
ElMessage.error('上传出错')
|
||||
}
|
||||
}
|
||||
|
||||
const openPicLibrary = () => {
|
||||
picSwitch.value = true
|
||||
getpicList()
|
||||
}
|
||||
|
||||
const getpicList = async () => {
|
||||
picLoading.value = true
|
||||
try {
|
||||
const res = await getFileList(picPagin)
|
||||
if (res.data.code === 200) {
|
||||
picList.value = res.data.data
|
||||
total.value = res.data.count
|
||||
}
|
||||
} finally {
|
||||
picLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const selectImage = (index) => {
|
||||
currentIndex.value = index
|
||||
}
|
||||
|
||||
const confirmPicSelection = () => {
|
||||
if (currentIndex.value !== null) {
|
||||
const item = picList.value[currentIndex.value]
|
||||
form.image_ico = `/v1/attachment/get_attachment?aid=${item.attachment_id}`
|
||||
picSwitch.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const CurrentPageChange = (page) => {
|
||||
picPagin.page = page
|
||||
getpicList()
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
const submitForm = async () => {
|
||||
if (!formRef.value) return
|
||||
|
||||
await formRef.value.validate(async (valid) => {
|
||||
if (valid) {
|
||||
submitting.value = true
|
||||
try {
|
||||
const submitData = { ...form }
|
||||
|
||||
// 处理分类逻辑
|
||||
if (submitData.class_id) {
|
||||
submitData.class_name = ''
|
||||
} else if (submitData.class_name) {
|
||||
submitData.class_id = ''
|
||||
} else {
|
||||
submitData.class_id = ''
|
||||
submitData.class_name = ''
|
||||
}
|
||||
|
||||
let res
|
||||
if (isEdit.value) {
|
||||
submitData.image_id = submitData.id
|
||||
delete submitData.id
|
||||
res = await editMirror(submitData)
|
||||
} else {
|
||||
res = await addVirtualMirror(submitData)
|
||||
}
|
||||
|
||||
if (res.data.code === 200) {
|
||||
ElNotification({
|
||||
title: '操作成功',
|
||||
message: isEdit.value ? '镜像更新成功' : '镜像创建成功',
|
||||
type: 'success'
|
||||
})
|
||||
goBack()
|
||||
} else {
|
||||
ElMessage.error(res.data.msg || '操作失败')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
ElMessage.error('提交失败')
|
||||
} finally {
|
||||
submitting.value = false
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
initData()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.image-form-container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
/* 顶部导航 */
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
background: #ffffff;
|
||||
padding: 20px 32px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #e4e7ed;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
border: none;
|
||||
background: #f2f3f5;
|
||||
color: #606266;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.back-btn:hover {
|
||||
background-color: #e6e8eb;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.header-title-area {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
margin: 0;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: #1a1a1a;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
font-size: 13px;
|
||||
color: #909399;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
padding: 10px 24px;
|
||||
font-weight: 600;
|
||||
box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
|
||||
}
|
||||
|
||||
/* 表单布局 */
|
||||
.form-wrapper {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.main-form {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.form-main-col {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.form-side-col {
|
||||
width: 320px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* 卡片样式 */
|
||||
.premium-card {
|
||||
border: 1px solid #e4e7ed;
|
||||
border-radius: 12px;
|
||||
background: #ffffff;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.premium-card:hover {
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.premium-card :deep(.el-card__body) {
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
/* 章节标题 */
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 24px;
|
||||
padding-bottom: 16px;
|
||||
border-bottom: 1px solid #f0f2f5;
|
||||
}
|
||||
|
||||
.section-header.small {
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 12px;
|
||||
}
|
||||
|
||||
.section-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 8px;
|
||||
background: linear-gradient(135deg, #ecf5ff 0%, #d9ecff 100%);
|
||||
color: #409EFF;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.section-info h3 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: #303133;
|
||||
}
|
||||
|
||||
.section-info p {
|
||||
margin: 2px 0 0 0;
|
||||
font-size: 12px;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
/* 表单网格 */
|
||||
.form-grid-2 {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
/* 新分类输入 */
|
||||
.new-category-input {
|
||||
margin-top: 12px;
|
||||
padding: 12px;
|
||||
background: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
border: 1px dashed #dcdfe6;
|
||||
}
|
||||
|
||||
/* 图标上传器 */
|
||||
.icon-uploader {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.icon-preview {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 160px;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
border: 1px solid #e4e7ed;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.icon-preview img {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.icon-actions {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
}
|
||||
|
||||
.upload-area {
|
||||
border: 2px dashed #e4e7ed;
|
||||
border-radius: 8px;
|
||||
padding: 24px;
|
||||
text-align: center;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.upload-area:hover {
|
||||
border-color: #409EFF;
|
||||
background: #f2f6fc;
|
||||
}
|
||||
|
||||
.upload-placeholder {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.upload-icon {
|
||||
font-size: 32px;
|
||||
color: #909399;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.upload-text {
|
||||
font-size: 13px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.upload-buttons {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* 素材库网格 */
|
||||
.pic-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 16px;
|
||||
margin: 20px 0;
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.pic-item {
|
||||
position: relative;
|
||||
border: 1px solid #e4e7ed;
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.pic-item:hover {
|
||||
border-color: #409EFF;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.pic-item.active {
|
||||
border-color: #409EFF;
|
||||
background: #ecf5ff;
|
||||
}
|
||||
|
||||
.pic-item img {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.pic-name {
|
||||
font-size: 12px;
|
||||
color: #606266;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.pic-check {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
color: #409EFF;
|
||||
}
|
||||
|
||||
.pagination-wrapper {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
/* 响应式 */
|
||||
@media screen and (max-width: 992px) {
|
||||
.main-form {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.form-side-col {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.image-form-container {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.header-actions .el-button {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.form-grid-2 {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.pic-grid {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user