feat(home): 主界面添加数据上传功能

- 集成 Upload 图标并导入 AddDataDialog 组件
- 添加显示添加数据对话框的响应式变量
- 新增成功样式按钮用于触发数据上传功能
- 在页面中添加 AddDataDialog 组件实例
- 调整搜索框布局样式以优化界面显示
This commit is contained in:
2026-04-25 13:22:00 +08:00
parent 462c476141
commit 1c7d71e688
+14 -4
View File
@@ -4,9 +4,10 @@ import axios from "@/axios.ts"
import {useRoute} from "vue-router" import {useRoute} from "vue-router"
import {ElMessage} from "element-plus" import {ElMessage} from "element-plus"
import { import {
Key, Refresh, Delete, DataAnalysis, Key, DataAnalysis,
Document, Warning, Search, InfoFilled Document, Warning, Search, Upload
} from '@element-plus/icons-vue' } from '@element-plus/icons-vue'
import AddDataDialog from "@/components/AddDataDialog.vue";
const route = useRoute() const route = useRoute()
const token = ref(route.query.token as string || '') const token = ref(route.query.token as string || '')
@@ -14,6 +15,7 @@ const input = ref(route.query.token as string || '')
const result = ref<any>(null) const result = ref<any>(null)
const loading = ref(false) const loading = ref(false)
const lastUpdate = ref('') const lastUpdate = ref('')
const showAddDataDialog = ref(false)
const updateTime = () => { const updateTime = () => {
const now = new Date() const now = new Date()
@@ -87,8 +89,16 @@ const statCards = [
<el-button type="primary" size="large" @click="fetchInfo" :loading="loading"> <el-button type="primary" size="large" @click="fetchInfo" :loading="loading">
查询 查询
</el-button> </el-button>
<el-button type="success" size="large" @click="showAddDataDialog = true">
<el-icon>
<Upload/>
</el-icon>
增加数据
</el-button>
</div> </div>
<AddDataDialog v-model="showAddDataDialog" :token="token"/>
<div v-if="result" class="result-section"> <div v-if="result" class="result-section">
<div class="result-header"> <div class="result-header">
<span class="section-title">Token 信息</span> <span class="section-title">Token 信息</span>
@@ -143,13 +153,13 @@ const statCards = [
.search-box { .search-box {
display: flex; display: flex;
//justify-content: center;
gap: 12px; gap: 12px;
margin-bottom: 32px; margin-bottom: 32px;
} }
.token-input { .token-input {
flex: 1; max-width: 400px;
max-width: 600px;
} }
.result-section { .result-section {