mirror of
https://github.com/flipped-aurora/gin-vue-admin.git
synced 2026-09-23 13:03:07 +00:00
15e6e7685c
* feat: 调整AI工作模式，更符合harness基准 * feat: 添加BusinessDB字段到PluginInitializeGorm结构体，并增加相关测试用例 * [middleware/jwt.go]: fix #2192 issues bug * docs: add auto plugin design spec * chore: ignore worktrees directory * feat: 调整代码辅助能力至插件 * feat: 添加警告条组件，提示授权用户访问限制 * fix: 修正商业用途版权声明链接 * feat: 调整agent.md 更加节省token * fix: 修改casbin版本为v3 * feat: 更新JSONMap和JSONSlice类型，优化GORM数据类型处理 * feat: 添加数据库就绪通知机制，优化插件注册流程 * feat: 重构API路径和描述，优化代码生成器和模板配置分组 * feat: 优化 person 页面的 css 作用域限制 * feat: 更新 vite 至 vite8 * 新增：MCP工具为指定URL的角色ID授权 * fix: 增加文件名合法性检查，拒绝包含非法字符的文件写入 * chore: 更新CI配置，升级Node.js和Go版本，调整checkout和setup动作版本 * feat: 为数据库连接增加最大复用时间配置 * feat: 为各数据库连接配置增加最大连接生命周期设置 * feat: 更新插件注册逻辑并优化API和菜单组件的标签显示 * feat: 更新版本号至v2.9.2并添加新插件路径信息 --------- Co-authored-by: taincheng <zhangtc@gmail.com> Co-authored-by: Azir-11 <2075125282@qq.com> Co-authored-by: lanxi <1220lanxi@gmail.com>
2.0 KiB
2.0 KiB
View 示例
这个文件负责什么
页面组件负责查询表单、表格、弹窗、抽屉和交互流程，是用户真正接触到的界面层。
什么时候应该这样写
- 新增后台管理页面
- 新增列表页 + 搜索 + 分页
- 新增表单弹窗或抽屉流程
推荐写法示例
<template>
<div>
<div class="gva-search-box">
<el-form :inline="true" :model="searchInfo">
<el-form-item label="名称">
<el-input v-model="searchInfo.name" placeholder="请输入名称" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
<el-button @click="onReset">重置</el-button>
</el-form-item>
</el-form>
</div>
<div class="gva-table-box">
<el-table :data="tableData" row-key="ID">
<el-table-column label="ID" prop="ID" width="80" />
<el-table-column label="名称" prop="name" />
</el-table>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { getOrderList } from '@/api/order'
const searchInfo = ref({})
const tableData = ref([])
const getTableData = async () => {
const res = await getOrderList(searchInfo.value)
if (res.code === 0) {
tableData.value = res.data.list
}
}
const onSubmit = () => {
getTableData()
}
const onReset = () => {
searchInfo.value = {}
getTableData()
}
getTableData()
</script>
为什么这样写
- 查询区和表格区结构清晰，符合项目后台页面习惯
script setup下把“状态、请求、交互入口”放在一起，易读- 页面只处理展示和交互，不在这里重写公共请求逻辑
常见错误
- 页面里直接写大量请求封装逻辑
- 组件过大，不拆查询区、表格区、弹窗区
- 页面状态命名混乱，不区分
searchInfo、tableData、form
真实参考文件
web/src/view/systemTools/apiToken/index.vueweb/src/view/superAdmin/api/api.vue