使用 AI 生成 页面
当前使用的是 火山引擎 提供的 deepseek-v3-241226
思考
如何让AI可以按自己的想法一步步生成页面？
我们要把要生成的内容分段的给到它，让它按步聚完成。
如生成一个列表页
- 依据所定义的接口。生成API
- 依赖定义接口 生成 状态管理模块
- 依赖上状态管理模块生成 LIST 页面，以及增、删、改、查的UI接口
- 完善 创建模块，同时修正列表的引用关系
- 完善 修改模块，同步修正列表的引用关系
将生成的内容转化为文件输出
生成代码
生成API 以及 Store
{
role: 'system',
content: '\n' +
'你是一个前端开发人员,擅长使用VUE开发，熟悉 [arco.design UI 框架](https://arco.design/vue/docs/start).\n' +
'\n' +
'#开发组件时严格遵守MVVM框架进行开发。\n' +
'- 写业种是按照 API - store - view 的顺序书写。\n' +
'- 请使用 TypeScript 语言\n' +
'\n' +
'## 定义 API\n' +
'- 请求数据使用 [axios](https://www.npmjs.com/package/axios). 使用 Promise 处理异步请求，并处理异常。\n' +
'- 定义出数据的结构。并导出数据结构供 Store 或者其他需要数据结构的地方使用。\n' +
'- 定义出查询、添加、删除、修改等接口。\n' +
'\n' +
'## 定义 Store\n' +
'- 使用 [pinia](https://pinia.vuejs.org/zh/core-concepts/) 的 defineStore 定义当前 Store\n' +
'- 依据在API中已经定义好的数据结构，定义出 Store 中的 state.\n' +
'- 依据在API中已经定义好的数据结构，定义出 Store 中的 getters.\n' +
'- 依赖在API中已经定义出的 查询、添加、删除、修改等接口，定义出 Store 中的 action.\n' +
'\n' +
'请根据用户提交的 数据结构以及接口生成 API、Store\n' +
'\n' +
'输出格式，请以 JSON 的形式输出。不需要使用 markdown 语法 json 进行标记\n' +
'如：{\n' +
' "/api/user.ts": "user api file content",\n' +
' "/store/user.ts": "user store ts file content"\n' +
'}\n'
},
{
role: 'user',
content: '\n' +
'有数据结构如下\n' +
'interface IUserInfo {\n' +
' name: string;\n' +
' age: number;\n' +
' role: string;\n' +
' school: string;\n' +
'}\n' +
'\n' +
'有 API 如下\n' +
'- GET /user/list\n' +
'- GET /user/{id}\n' +
'- PUT /user/{id}\n' +
'- POST /user\n' +
'- DELETE /user/{id}\n'
},
{
content: '{\n' +
' "/api/user.ts": "import axios from \'axios\';\\n\\n// 定义数据结构\\nexport interface IUserInfo {\\n name: string;\\n age: number;\\n role: string;\\n school: string;\\n}\\n\\n// 获取用户列表\\nexport const getUserList = async (): Promise<IUserInfo[]> => {\\n try {\\n const response = await axios.get(\'/user/list\');\\n return response.data;\\n } catch (error) {\\n console.error(\'Error fetching user list:\', error);\\n throw error;\\n }\\n};\\n\\n// 获取单个用户信息\\nexport const getUserById = async (id: string): Promise<IUserInfo> => {\\n try {\\n const response = await axios.get(`/user/${id}`);\\n return response.data;\\n } catch (error) {\\n console.error(\'Error fetching user by id:\', error);\\n throw error;\\n }\\n};\\n\\n// 更新用户信息\\nexport const updateUser = async (id: string, userInfo: IUserInfo): Promise<IUserInfo> => {\\n try {\\n const response = await axios.put(`/user/${id}`, userInfo);\\n return response.data;\\n } catch (error) {\\n console.error(\'Error updating user:\', error);\\n throw error;\\n }\\n};\\n\\n// 创建新用户\\nexport const createUser = async (userInfo: IUserInfo): Promise<IUserInfo> => {\\n try {\\n const response = await axios.post(\'/user\', userInfo);\\n return response.data;\\n } catch (error) {\\n console.error(\'Error creating user:\', error);\\n throw error;\\n }\\n};\\n\\n// 删除用户\\nexport const deleteUser = async (id: string): Promise<void> => {\\n try {\\n await axios.delete(`/user/${id}`);\\n } catch (error) {\\n console.error(\'Error deleting user:\', error);\\n throw error;\\n }\\n};",\n' +
` "/store/user.ts": "import { defineStore } from 'pinia';\\nimport { IUserInfo, getUserList, getUserById, updateUser, createUser, deleteUser } from '../api/user';\\n\\n// 定义用户 store\\nexport const useUserStore = defineStore('user', {\\n state: () => ({\\n userList: [] as IUserInfo[],\\n currentUser: null as IUserInfo | null,\\n }),\\n getters: {\\n getUserList: (state) => state.userList,\\n getCurrentUser: (state) => state.currentUser,\\n },\\n actions: {\\n async fetchUserList() {\\n this.userList = await getUserList();\\n },\\n async fetchUserById(id: string) {\\n this.currentUser = await getUserById(id);\\n },\\n async updateUserInfo(id: string, userInfo: IUserInfo) {\\n const updatedUser = await updateUser(id, userInfo);\\n const index = this.userList.findIndex(user => user.name === updatedUser.name);\\n if (index !== -1) {\\n this.userList[index] = updatedUser;\\n }\\n },\\n async createNewUser(userInfo: IUserInfo) {\\n const newUser = await createUser(userInfo);\\n this.userList.push(newUser);\\n },\\n async removeUser(id: string) {\\n await deleteUser(id);\\n this.userList = this.userList.filter(user => user.name !== id);\\n },\\n },\\n});"\n` +
'}',
role: 'assistant'
},
生成列表页
{
role: 'user',
content: '\n' +
'依据上述生成的 API 以及 Store 写一个 列表页，\n' +
'\n' +
'功能要求\n' +
'- 列表页有搜索功能，列表顶部有添加功能，\n' +
'- 列表中有操作项，如修改，删除\n' +
'- 删除时请使用 Popconfirm 实现二次确认\n' +
'\n' +
'书写规范\n' +
'- 请严格使用 MVVM 模式开发项目\n' +
'- 使用 vue 3.0 setup 模型\n' +
'\n' +
'注：这里尽可能完善列表页相关的功能，添加、修改等功能只需要有接口即可。\n' +
'\n' +
'请以JSON的形式输出 如：{\n' +
' "/view/user/list.vue": "list vue file content",\n' +
'}\n'
},
{
content: '{\n' +
` "/view/user/list.vue": "<template>\\n <a-card>\\n <a-space direction=\\"vertical\\" style=\\"width: 100%\\">\\n <!-- 搜索和添加按钮 -->\\n <a-space>\\n <a-input-search\\n v-model:value=\\"searchKeyword\\"\\n placeholder=\\"请输入姓名搜索\\"\\n @search=\\"handleSearch\\"\\n />\\n <a-button type=\\"primary\\" @click=\\"handleAdd\\">添加用户</a-button>\\n </a-space>\\n\\n <!-- 用户列表 -->\\n <a-table :data-source=\\"filteredUserList\\" :columns=\\"columns\\" :rowKey=\\"(record) => record.name\\">\\n <template #bodyCell=\\"{ column, record }\\">\\n <!-- 操作列 -->\\n <template v-if=\\"column.key === 'action'\\">\\n <a-space>\\n <a-button type=\\"link\\" @click=\\"handleEdit(record)\\">修改</a-button>\\n <a-popconfirm\\n title=\\"确定删除该用户吗？\\"\\n @confirm=\\"handleDelete(record.name)\\"\\n >\\n <a-button type=\\"link\\" danger>删除</a-button>\\n </a-popconfirm>\\n </a-space>\\n </template>\\n </template>\\n </a-table>\\n </a-space>\\n </a-card>\\n</template>\\n\\n<script setup lang=\\"ts\\">\\nimport { ref, computed, onMounted } from 'vue';\\nimport { useUserStore } from '@/store/user';\\nimport { IUserInfo } from '@/api/user';\\n\\n// 使用 Pinia Store\\nconst userStore = useUserStore();\\n\\n// 搜索关键字\\nconst searchKeyword = ref<string>('');\\n\\n// 表格列定义\\nconst columns = [\\n {\\n title: '姓名',\\n dataIndex: 'name',\\n key: 'name',\\n },\\n {\\n title: '年龄',\\n dataIndex: 'age',\\n key: 'age',\\n },\\n {\\n title: '角色',\\n dataIndex: 'role',\\n key: 'role',\\n },\\n {\\n title: '学校',\\n dataIndex: 'school',\\n key: 'school',\\n },\\n {\\n title: '操作',\\n key: 'action',\\n },\\n];\\n\\n// 获取用户列表\\nonMounted(() => {\\n userStore.fetchUserList();\\n});\\n\\n// 过滤后的用户列表\\nconst filteredUserList = computed(() => {\\n return userStore.getUserList.filter((user) =>\\n user.name.includes(searchKeyword.value)\\n );\\n});\\n\\n// 搜索处理\\nconst handleSearch = () => {\\n // 搜索逻辑已通过 computed 实现\\n};\\n\\n// 添加用户\\nconst handleAdd = () => {\\n // 这里可以跳转到添加页面或弹出添加模态框\\n console.log('添加用户');\\n};\\n\\n// 修改用户\\nconst handleEdit = (record: IUserInfo) => {\\n // 这里可以跳转到编辑页面或弹出编辑模态框\\n console.log('修改用户:', record);\\n};\\n\\n// 删除用户\\nconst handleDelete = async (id: string) => {\\n try {\\n await userStore.removeUser(id);\\n console.log('删除成功');\\n } catch (error) {\\n console.error('删除失败:', error);\\n }\\n};\\n</script>\\n\\n<style scoped>\\n/* 样式可以根据需要添加 */\\n</style>"\n` +
'}',
role: 'assistant'
},
生成创建弹窗
{
role: 'user',
content: '\n' +
'依据上述生成的列表页和API以及Store写一个 创建数据的弹窗，创建数据需要与 Store 联动。\n' +
'\n' +
'功能要求\n' +
'- 使用 Modal 的 on-before-ok 方法等创建接口完成后再关闭弹窗,发起请求后 ok-loading 处理 true 状态。\n' +
'- 组件添加数据校验功能。同时数据提交时也需要检验。\n' +
'\n' +
'注：这里尽可能完善《添加数据窗口》相关的功能，同时修改一个 list.vue 中引用的部分。\n' +
'\n' +
'请以JSON的形式输出 如：{\n' +
' "/view/user/create-modal.vue": "create vue file content"，\n' +
' "/view/user/list.vue": "list vue file content"\n' +
'}\n'
},
{
content: '{\n' +
` "/view/user/create-modal.vue": "<template>\\n <a-modal\\n v-model:visible=\\"visible\\"\\n title=\\"添加用户\\"\\n @before-ok=\\"handleSubmit\\"\\n :ok-loading=\\"loading\\"\\n >\\n <a-form :model=\\"formState\\" :rules=\\"rules\\" ref=\\"formRef\\">\\n <a-form-item label=\\"姓名\\" field=\\"name\\">\\n <a-input v-model=\\"formState.name\\" placeholder=\\"请输入姓名\\" />\\n </a-form-item>\\n <a-form-item label=\\"年龄\\" field=\\"age\\">\\n <a-input-number v-model=\\"formState.age\\" placeholder=\\"请输入年龄\\" />\\n </a-form-item>\\n <a-form-item label=\\"角色\\" field=\\"role\\">\\n <a-input v-model=\\"formState.role\\" placeholder=\\"请输入角色\\" />\\n </a-form-item>\\n <a-form-item label=\\"学校\\" field=\\"school\\">\\n <a-input v-model=\\"formState.school\\" placeholder=\\"请输入学校\\" />\\n </a-form-item>\\n </a-form>\\n </a-modal>\\n</template>\\n\\n<script setup lang=\\"ts\\">\\nimport { ref, reactive } from 'vue';\\nimport { useUserStore } from '@/store/user';\\nimport { IUserInfo } from '@/api/user';\\nimport { FormInstance } from '@arco-design/web-vue/es/form';\\n\\n// 使用 Pinia Store\\nconst userStore = useUserStore();\\n\\n// 控制弹窗显示\\nconst visible = ref<boolean>(false);\\n\\n// 表单引用\\nconst formRef = ref<FormInstance | null>(null);\\n\\n// 表单数据\\nconst formState = reactive<IUserInfo>({\\n name: '',\\n age: 0,\\n role: '',\\n school: '',\\n});\\n\\n// 表单校验规则\\nconst rules = {\\n name: [{ required: true, message: '姓名不能为空' }],\\n age: [{ required: true, message: '年龄不能为空' }],\\n role: [{ required: true, message: '角色不能为空' }],\\n school: [{ required: true, message: '学校不能为空' }],\\n};\\n\\n// 提交按钮加载状态\\nconst loading = ref<boolean>(false);\\n\\n// 打开弹窗\\nconst openModal = () => {\\n visible.value = true;\\n};\\n\\n// 提交表单\\nconst handleSubmit = async () => {\\n try {\\n // 校验表单\\n await formRef.value?.validate();\\n loading.value = true;\\n // 调用 Store 创建用户\\n await userStore.createNewUser(formState);\\n // 关闭弹窗\\n visible.value = false;\\n } catch (error) {\\n console.error('创建用户失败:', error);\\n } finally {\\n loading.value = false;\\n }\\n};\\n\\n// 暴露 openModal 方法\\ndefineExpose({ openModal });\\n</script>\\n\\n<style scoped>\\n/* 样式可以根据需要添加 */\\n</style>",\n` +
` "/view/user/list.vue": "<template>\\n <a-card>\\n <a-space direction=\\"vertical\\" style=\\"width: 100%\\">\\n <!-- 搜索和添加按钮 -->\\n <a-space>\\n <a-input-search\\n v-model:value=\\"searchKeyword\\"\\n placeholder=\\"请输入姓名搜索\\"\\n @search=\\"handleSearch\\"\\n />\\n <a-button type=\\"primary\\" @click=\\"handleAdd\\">添加用户</a-button>\\n </a-space>\\n\\n <!-- 用户列表 -->\\n <a-table :data-source=\\"filteredUserList\\" :columns=\\"columns\\" :rowKey=\\"(record) => record.name\\">\\n <template #bodyCell=\\"{ column, record }\\">\\n <!-- 操作列 -->\\n <template v-if=\\"column.key === 'action'\\">\\n <a-space>\\n <a-button type=\\"link\\" @click=\\"handleEdit(record)\\">修改</a-button>\\n <a-popconfirm\\n title=\\"确定删除该用户吗？\\"\\n @confirm=\\"handleDelete(record.name)\\"\\n >\\n <a-button type=\\"link\\" danger>删除</a-button>\\n </a-popconfirm>\\n </a-space>\\n </template>\\n </template>\\n </a-table>\\n </a-space>\\n </a-card>\\n\\n <!-- 添加用户弹窗 -->\\n <create-modal ref=\\"createModalRef\\" />\\n</template>\\n\\n<script setup lang=\\"ts\\">\\nimport { ref, computed, onMounted } from 'vue';\\nimport { useUserStore } from '@/store/user';\\nimport { IUserInfo } from '@/api/user';\\nimport CreateModal from './create-modal.vue';\\n\\n// 使用 Pinia Store\\nconst userStore = useUserStore();\\n\\n// 搜索关键字\\nconst searchKeyword = ref<string>('');\\n\\n// 添加用户弹窗引用\\nconst createModalRef = ref<any>(null);\\n\\n// 表格列定义\\nconst columns = [\\n {\\n title: '姓名',\\n dataIndex: 'name',\\n key: 'name',\\n },\\n {\\n title: '年龄',\\n dataIndex: 'age',\\n key: 'age',\\n },\\n {\\n title: '角色',\\n dataIndex: 'role',\\n key: 'role',\\n },\\n {\\n title: '学校',\\n dataIndex: 'school',\\n key: 'school',\\n },\\n {\\n title: '操作',\\n key: 'action',\\n },\\n];\\n\\n// 获取用户列表\\nonMounted(() => {\\n userStore.fetchUserList();\\n});\\n\\n// 过滤后的用户列表\\nconst filteredUserList = computed(() => {\\n return userStore.getUserList.filter((user) =>\\n user.name.includes(searchKeyword.value)\\n );\\n});\\n\\n// 搜索处理\\nconst handleSearch = () => {\\n // 搜索逻辑已通过 computed 实现\\n};\\n\\n// 添加用户\\nconst handleAdd = () => {\\n createModalRef.value?.openModal();\\n};\\n\\n// 修改用户\\nconst handleEdit = (record: IUserInfo) => {\\n // 这里可以跳转到编辑页面或弹出编辑模态框\\n console.log('修改用户:', record);\\n};\\n\\n// 删除用户\\nconst handleDelete = async (id: string) => {\\n try {\\n await userStore.removeUser(id);\\n console.log('删除成功');\\n } catch (error) {\\n console.error('删除失败:', error);\\n }\\n};\\n</script>\\n\\n<style scoped>\\n/* 样式可以根据需要添加 */\\n</style>"\n` +
'}',
role: 'assistant'
},
生成编辑弹窗
{
role: 'user',
content: '\n' +
'依据上述生成的创建弹窗和API以及Store写一个 编辑数据的弹窗，编辑数据需要与 Store 联动。\n' +
'\n' +
'功能要求\n' +
'- 使用 Modal 的 on-before-ok 方法等编辑接口完成后再关闭弹窗,发起请求后 ok-loading 处理 true 状态\n' +
'- 组件添加数据校验功能。同时数据提交时也需要检验。\n' +
'\n' +
'注：这里尽可能完善《编辑数据弹窗》相关的功能，同时修改一个 list.vue 中引用的部分。\n' +
'\n' +
'请以JSON的形式输出 如：{\n' +
' "/view/user/edit-modal.vue": "edit vue file content",\n' +
' "/view/user/list.vue": "list vue file content"\n' +
'}\n'
},
{
content: '{\n' +
` "/view/user/edit-modal.vue": "<template>\\n <a-modal\\n v-model:visible=\\"visible\\"\\n title=\\"编辑用户\\"\\n @before-ok=\\"handleSubmit\\"\\n :ok-loading=\\"loading\\"\\n >\\n <a-form :model=\\"formState\\" :rules=\\"rules\\" ref=\\"formRef\\">\\n <a-form-item label=\\"姓名\\" field=\\"name\\">\\n <a-input v-model=\\"formState.name\\" placeholder=\\"请输入姓名\\" />\\n </a-form-item>\\n <a-form-item label=\\"年龄\\" field=\\"age\\">\\n <a-input-number v-model=\\"formState.age\\" placeholder=\\"请输入年龄\\" />\\n </a-form-item>\\n <a-form-item label=\\"角色\\" field=\\"role\\">\\n <a-input v-model=\\"formState.role\\" placeholder=\\"请输入角色\\" />\\n </a-form-item>\\n <a-form-item label=\\"学校\\" field=\\"school\\">\\n <a-input v-model=\\"formState.school\\" placeholder=\\"请输入学校\\" />\\n </a-form-item>\\n </a-form>\\n </a-modal>\\n</template>\\n\\n<script setup lang=\\"ts\\">\\nimport { ref, reactive } from 'vue';\\nimport { useUserStore } from '@/store/user';\\nimport { IUserInfo } from '@/api/user';\\nimport { FormInstance } from '@arco-design/web-vue/es/form';\\n\\n// 使用 Pinia Store\\nconst userStore = useUserStore();\\n\\n// 控制弹窗显示\\nconst visible = ref<boolean>(false);\\n\\n// 表单引用\\nconst formRef = ref<FormInstance | null>(null);\\n\\n// 表单数据\\nconst formState = reactive<IUserInfo>({\\n name: '',\\n age: 0,\\n role: '',\\n school: '',\\n});\\n\\n// 表单校验规则\\nconst rules = {\\n name: [{ required: true, message: '姓名不能为空' }],\\n age: [{ required: true, message: '年龄不能为空' }],\\n role: [{ required: true, message: '角色不能为空' }],\\n school: [{ required: true, message: '学校不能为空' }],\\n};\\n\\n// 提交按钮加载状态\\nconst loading = ref<boolean>(false);\\n\\n// 打开弹窗并初始化表单数据\\nconst openModal = (userInfo: IUserInfo) => {\\n Object.assign(formState, userInfo);\\n visible.value = true;\\n};\\n\\n// 提交表单\\nconst handleSubmit = async () => {\\n try {\\n // 校验表单\\n await formRef.value?.validate();\\n loading.value = true;\\n // 调用 Store 更新用户\\n await userStore.updateUserInfo(formState.name, formState);\\n // 关闭弹窗\\n visible.value = false;\\n } catch (error) {\\n console.error('更新用户失败:', error);\\n } finally {\\n loading.value = false;\\n }\\n};\\n\\n// 暴露 openModal 方法\\ndefineExpose({ openModal });\\n</script>\\n\\n<style scoped>\\n/* 样式可以根据需要添加 */\\n</style>",\n` +
` "/view/user/list.vue": "<template>\\n <a-card>\\n <a-space direction=\\"vertical\\" style=\\"width: 100%\\">\\n <!-- 搜索和添加按钮 -->\\n <a-space>\\n <a-input-search\\n v-model:value=\\"searchKeyword\\"\\n placeholder=\\"请输入姓名搜索\\"\\n @search=\\"handleSearch\\"\\n />\\n <a-button type=\\"primary\\" @click=\\"handleAdd\\">添加用户</a-button>\\n </a-space>\\n\\n <!-- 用户列表 -->\\n <a-table :data-source=\\"filteredUserList\\" :columns=\\"columns\\" :rowKey=\\"(record) => record.name\\">\\n <template #bodyCell=\\"{ column, record }\\">\\n <!-- 操作列 -->\\n <template v-if=\\"column.key === 'action'\\">\\n <a-space>\\n <a-button type=\\"link\\" @click=\\"handleEdit(record)\\">修改</a-button>\\n <a-popconfirm\\n title=\\"确定删除该用户吗？\\"\\n @confirm=\\"handleDelete(record.name)\\"\\n >\\n <a-button type=\\"link\\" danger>删除</a-button>\\n </a-popconfirm>\\n </a-space>\\n </template>\\n </template>\\n </a-table>\\n </a-space>\\n </a-card>\\n\\n <!-- 添加用户弹窗 -->\\n <create-modal ref=\\"createModalRef\\" />\\n <!-- 编辑用户弹窗 -->\\n <edit-modal ref=\\"editModalRef\\" />\\n</template>\\n\\n<script setup lang=\\"ts\\">\\nimport { ref, computed, onMounted } from 'vue';\\nimport { useUserStore } from '@/store/user';\\nimport { IUserInfo } from '@/api/user';\\nimport CreateModal from './create-modal.vue';\\nimport EditModal from './edit-modal.vue';\\n\\n// 使用 Pinia Store\\nconst userStore = useUserStore();\\n\\n// 搜索关键字\\nconst searchKeyword = ref<string>('');\\n\\n// 添加用户弹窗引用\\nconst createModalRef = ref<any>(null);\\n// 编辑用户弹窗引用\\nconst editModalRef = ref<any>(null);\\n\\n// 表格列定义\\nconst columns = [\\n {\\n title: '姓名',\\n dataIndex: 'name',\\n key: 'name',\\n },\\n {\\n title: '年龄',\\n dataIndex: 'age',\\n key: 'age',\\n },\\n {\\n title: '角色',\\n dataIndex: 'role',\\n key: 'role',\\n },\\n {\\n title: '学校',\\n dataIndex: 'school',\\n key: 'school',\\n },\\n {\\n title: '操作',\\n key: 'action',\\n },\\n];\\n\\n// 获取用户列表\\nonMounted(() => {\\n userStore.fetchUserList();\\n});\\n\\n// 过滤后的用户列表\\nconst filteredUserList = computed(() => {\\n return userStore.getUserList.filter((user) =>\\n user.name.includes(searchKeyword.value)\\n );\\n});\\n\\n// 搜索处理\\nconst handleSearch = () => {\\n // 搜索逻辑已通过 computed 实现\\n};\\n\\n// 添加用户\\nconst handleAdd = () => {\\n createModalRef.value?.openModal();\\n};\\n\\n// 修改用户\\nconst handleEdit = (record: IUserInfo) => {\\n editModalRef.value?.openModal(record);\\n};\\n\\n// 删除用户\\nconst handleDelete = async (id: string) => {\\n try {\\n await userStore.removeUser(id);\\n console.log('删除成功');\\n } catch (error) {\\n console.error('删除失败:', error);\\n }\\n};\\n</script>\\n\\n<style scoped>\\n/* 样式可以根据需要添加 */\\n</style>"\n` +
'}',
role: 'assistant'
},
整理上述内容统一格式输出
{
role: 'user',
content: '\n' +
'上述已经生成了,将上述内容整体输出一下。输出格式为\n' +
'{\n' +
' "/api/user.ts": "user api file content",\n' +
' "/store/user.ts": "user store ts file content",\n' +
' "/view/user/list.vue": "list vue file content",\n' +
' "/view/user/create-modal.vue": "create vue file content",\n' +
' "/view/user/edit-modal.vue": "edit vue file content"\n' +
'}\n'
},
{
content: '{\n' +
' "/api/user.ts": "import axios from \'axios\';\\n\\n// 定义数据结构\\nexport interface IUserInfo {\\n name: string;\\n age: number;\\n role: string;\\n school: string;\\n}\\n\\n// 获取用户列表\\nexport const getUserList = async (): Promise<IUserInfo[]> => {\\n try {\\n const response = await axios.get(\'/user/list\');\\n return response.data;\\n } catch (error) {\\n console.error(\'Error fetching user list:\', error);\\n throw error;\\n }\\n};\\n\\n// 获取单个用户信息\\nexport const getUserById = async (id: string): Promise<IUserInfo> => {\\n try {\\n const response = await axios.get(`/user/${id}`);\\n return response.data;\\n } catch (error) {\\n console.error(\'Error fetching user by id:\', error);\\n throw error;\\n }\\n};\\n\\n// 更新用户信息\\nexport const updateUser = async (id: string, userInfo: IUserInfo): Promise<IUserInfo> => {\\n try {\\n const response = await axios.put(`/user/${id}`, userInfo);\\n return response.data;\\n } catch (error) {\\n console.error(\'Error updating user:\', error);\\n throw error;\\n }\\n};\\n\\n// 创建新用户\\nexport const createUser = async (userInfo: IUserInfo): Promise<IUserInfo> => {\\n try {\\n const response = await axios.post(\'/user\', userInfo);\\n return response.data;\\n } catch (error) {\\n console.error(\'Error creating user:\', error);\\n throw error;\\n }\\n};\\n\\n// 删除用户\\nexport const deleteUser = async (id: string): Promise<void> => {\\n try {\\n await axios.delete(`/user/${id}`);\\n } catch (error) {\\n console.error(\'Error deleting user:\', error);\\n throw error;\\n }\\n};",\n' +
` "/store/user.ts": "import { defineStore } from 'pinia';\\nimport { IUserInfo, getUserList, getUserById, updateUser, createUser, deleteUser } from '../api/user';\\n\\n// 定义用户 store\\nexport const useUserStore = defineStore('user', {\\n state: () => ({\\n userList: [] as IUserInfo[],\\n currentUser: null as IUserInfo | null,\\n }),\\n getters: {\\n getUserList: (state) => state.userList,\\n getCurrentUser: (state) => state.currentUser,\\n },\\n actions: {\\n async fetchUserList() {\\n this.userList = await getUserList();\\n },\\n async fetchUserById(id: string) {\\n this.currentUser = await getUserById(id);\\n },\\n async updateUserInfo(id: string, userInfo: IUserInfo) {\\n const updatedUser = await updateUser(id, userInfo);\\n const index = this.userList.findIndex(user => user.name === updatedUser.name);\\n if (index !== -1) {\\n this.userList[index] = updatedUser;\\n }\\n },\\n async createNewUser(userInfo: IUserInfo) {\\n const newUser = await createUser(userInfo);\\n this.userList.push(newUser);\\n },\\n async removeUser(id: string) {\\n await deleteUser(id);\\n this.userList = this.userList.filter(user => user.name !== id);\\n },\\n },\\n});",\n` +
` "/view/user/list.vue": "<template>\\n <a-card>\\n <a-space direction=\\"vertical\\" style=\\"width: 100%\\">\\n <!-- 搜索和添加按钮 -->\\n <a-space>\\n <a-input-search\\n v-model:value=\\"searchKeyword\\"\\n placeholder=\\"请输入姓名搜索\\"\\n @search=\\"handleSearch\\"\\n />\\n <a-button type=\\"primary\\" @click=\\"handleAdd\\">添加用户</a-button>\\n </a-space>\\n\\n <!-- 用户列表 -->\\n <a-table :data-source=\\"filteredUserList\\" :columns=\\"columns\\" :rowKey=\\"(record) => record.name\\">\\n <template #bodyCell=\\"{ column, record }\\">\\n <!-- 操作列 -->\\n <template v-if=\\"column.key === 'action'\\">\\n <a-space>\\n <a-button type=\\"link\\" @click=\\"handleEdit(record)\\">修改</a-button>\\n <a-popconfirm\\n title=\\"确定删除该用户吗？\\"\\n @confirm=\\"handleDelete(record.name)\\"\\n >\\n <a-button type=\\"link\\" danger>删除</a-button>\\n </a-popconfirm>\\n </a-space>\\n </template>\\n </template>\\n </a-table>\\n </a-space>\\n </a-card>\\n\\n <!-- 添加用户弹窗 -->\\n <create-modal ref=\\"createModalRef\\" />\\n <!-- 编辑用户弹窗 -->\\n <edit-modal ref=\\"editModalRef\\" />\\n</template>\\n\\n<script setup lang=\\"ts\\">\\nimport { ref, computed, onMounted } from 'vue';\\nimport { useUserStore } from '@/store/user';\\nimport { IUserInfo } from '@/api/user';\\nimport CreateModal from './create-modal.vue';\\nimport EditModal from './edit-modal.vue';\\n\\n// 使用 Pinia Store\\nconst userStore = useUserStore();\\n\\n// 搜索关键字\\nconst searchKeyword = ref<string>('');\\n\\n// 添加用户弹窗引用\\nconst createModalRef = ref<any>(null);\\n// 编辑用户弹窗引用\\nconst editModalRef = ref<any>(null);\\n\\n// 表格列定义\\nconst columns = [\\n {\\n title: '姓名',\\n dataIndex: 'name',\\n key: 'name',\\n },\\n {\\n title: '年龄',\\n dataIndex: 'age',\\n key: 'age',\\n },\\n {\\n title: '角色',\\n dataIndex: 'role',\\n key: 'role',\\n },\\n {\\n title: '学校',\\n dataIndex: 'school',\\n key: 'school',\\n },\\n {\\n title: '操作',\\n key: 'action',\\n },\\n];\\n\\n// 获取用户列表\\nonMounted(() => {\\n userStore.fetchUserList();\\n});\\n\\n// 过滤后的用户列表\\nconst filteredUserList = computed(() => {\\n return userStore.getUserList.filter((user) =>\\n user.name.includes(searchKeyword.value)\\n );\\n});\\n\\n// 搜索处理\\nconst handleSearch = () => {\\n // 搜索逻辑已通过 computed 实现\\n};\\n\\n// 添加用户\\nconst handleAdd = () => {\\n createModalRef.value?.openModal();\\n};\\n\\n// 修改用户\\nconst handleEdit = (record: IUserInfo) => {\\n editModalRef.value?.openModal(record);\\n};\\n\\n// 删除用户\\nconst handleDelete = async (id: string) => {\\n try {\\n await userStore.removeUser(id);\\n console.log('删除成功');\\n } catch (error) {\\n console.error('删除失败:', error);\\n }\\n};\\n</script>\\n\\n<style scoped>\\n/* 样式可以根据需要添加 */\\n</style>",\n` +
` "/view/user/create-modal.vue": "<template>\\n <a-modal\\n v-model:visible=\\"visible\\"\\n title=\\"添加用户\\"\\n @before-ok=\\"handleSubmit\\"\\n :ok-loading=\\"loading\\"\\n >\\n <a-form :model=\\"formState\\" :rules=\\"rules\\" ref=\\"formRef\\">\\n <a-form-item label=\\"姓名\\" field=\\"name\\">\\n <a-input v-model=\\"formState.name\\" placeholder=\\"请输入姓名\\" />\\n </a-form-item>\\n <a-form-item label=\\"年龄\\" field=\\"age\\">\\n <a-input-number v-model=\\"formState.age\\" placeholder=\\"请输入年龄\\" />\\n </a-form-item>\\n <a-form-item label=\\"角色\\" field=\\"role\\">\\n <a-input v-model=\\"formState.role\\" placeholder=\\"请输入角色\\" />\\n </a-form-item>\\n <a-form-item label=\\"学校\\" field=\\"school\\">\\n <a-input v-model=\\"formState.school\\" placeholder=\\"请输入学校\\" />\\n </a-form-item>\\n </a-form>\\n </a-modal>\\n</template>\\n\\n<script setup lang=\\"ts\\">\\nimport { ref, reactive } from 'vue';\\nimport { useUserStore } from '@/store/user';\\nimport { IUserInfo } from '@/api/user';\\nimport { FormInstance } from '@arco-design/web-vue/es/form';\\n\\n// 使用 Pinia Store\\nconst userStore = useUserStore();\\n\\n// 控制弹窗显示\\nconst visible = ref<boolean>(false);\\n\\n// 表单引用\\nconst formRef = ref<FormInstance | null>(null);\\n\\n// 表单数据\\nconst formState = reactive<IUserInfo>({\\n name: '',\\n age: 0,\\n role: '',\\n school: '',\\n});\\n\\n// 表单校验规则\\nconst rules = {\\n name: [{ required: true, message: '姓名不能为空' }],\\n age: [{ required: true, message: '年龄不能为空' }],\\n role: [{ required: true, message: '角色不能为空' }],\\n school: [{ required: true, message: '学校不能为空' }],\\n};\\n\\n// 提交按钮加载状态\\nconst loading = ref<boolean>(false);\\n\\n// 打开弹窗\\nconst openModal = () => {\\n visible.value = true;\\n};\\n\\n// 提交表单\\nconst handleSubmit = async () => {\\n try {\\n // 校验表单\\n await formRef.value?.validate();\\n loading.value = true;\\n // 调用 Store 创建用户\\n await userStore.createNewUser(formState);\\n // 关闭弹窗\\n visible.value = false;\\n } catch (error) {\\n console.error('创建用户失败:', error);\\n } finally {\\n loading.value = false;\\n }\\n};\\n\\n// 暴露 openModal 方法\\ndefineExpose({ openModal });\\n</script>\\n\\n<style scoped>\\n/* 样式可以根据需要添加 */\\n</style>",\n` +
` "/view/user/edit-modal.vue": "<template>\\n <a-modal\\n v-model:visible=\\"visible\\"\\n title=\\"编辑用户\\"\\n @before-ok=\\"handleSubmit\\"\\n :ok-loading=\\"loading\\"\\n >\\n <a-form :model=\\"formState\\" :rules=\\"rules\\" ref=\\"formRef\\">\\n <a-form-item label=\\"姓名\\" field=\\"name\\">\\n <a-input v-model=\\"formState.name\\" placeholder=\\"请输入姓名\\" />\\n </a-form-item>\\n <a-form-item label=\\"年龄\\" field=\\"age\\">\\n <a-input-number v-model=\\"formState.age\\" placeholder=\\"请输入年龄\\" />\\n </a-form-item>\\n <a-form-item label=\\"角色\\" field=\\"role\\">\\n <a-input v-model=\\"formState.role\\" placeholder=\\"请输入角色\\" />\\n </a-form-item>\\n <a-form-item label=\\"学校\\" field=\\"school\\">\\n <a-input v-model=\\"formState.school\\" placeholder=\\"请输入学校\\" />\\n </a-form-item>\\n </a-form>\\n </a-modal>\\n</template>\\n\\n<script setup lang=\\"ts\\">\\nimport { ref, reactive } from 'vue';\\nimport { useUserStore } from '@/store/user';\\nimport { IUserInfo } from '@/api/user';\\nimport { FormInstance } from '@arco-design web-vue/es/form';\\n\\n// 使用 Pinia Store\\nconst userStore = useUserStore();\\n\\n// 控制弹窗显示\\nconst visible = ref<boolean>(false);\\n\\n// 表单引用\\nconst formRef = ref<FormInstance | null>(null);\\n\\n// 表单数据\\nconst formState = reactive<IUserInfo>({\\n name: '',\\n age: 0,\\n role: '',\\n school: '',\\n});\\n\\n// 表单校验规则\\nconst rules = {\\n name: [{ required: true, message: '姓名不能为空' }],\\n age: [{ required: true, message: '年龄不能为空' }],\\n role: [{ required: true, message: '角色不能为空' }],\\n school: [{ required: true, message: '学校不能为空' }],\\n};\\n\\n// 提交按钮加载状态\\nconst loading = ref<boolean>(false);\\n\\n// 打开弹窗并初始化表单数据\\nconst openModal = (userInfo: IUserInfo) => {\\n Object.assign(formState, userInfo);\\n visible.value = true;\\n};\\n\\n// 提交表单\\nconst handleSubmit = async () => {\\n try {\\n // 校验表单\\n await formRef.value?.validate();\\n loading.value = true;\\n // 调用 Store 更新用户\\n await userStore.updateUserInfo(formState.name, formState);\\n // 关闭弹窗\\n visible.value = false;\\n } catch (error) {\\n console.error('更新用户失败:', error);\\n } finally {\\n loading.value = false;\\n }\\n};\\n\\n// 暴露 openModal 方法\\ndefineExpose({ openModal });\\n</script>\\n\\n<style scoped>\\n/* 样式可以根据需要添`... 17 more characters,
role: 'assistant'
}
完整代码
用户修改 apikey 即可使用
import OpenAI from "openai";
import fs from "fs";
import { fileURLToPath } from "url";
import path, { dirname } from "path";
// 获取当前文件的完整路径
const __filename = fileURLToPath(import.meta.url);
// 获取当前文件所在的目录
const __dirname = dirname(__filename);
const APIKEY = "";
const MODEL = "deepseek-v3-241226";
const wirteFile = (dataJSON) => {
for (const [filePath, content] of Object.entries(dataJSON)) {
const absolutePath = path.join(__dirname, `./dist/${filePath}`);
const dir = path.dirname(absolutePath);
// 创建目录
if (!fs.existsSync(dir)) {
fs.mkdirSync(dir, { recursive: true });
}
// 写入文件
fs.writeFile(absolutePath, content, (err) => {
if (err) {
console.error(`写入文件 ${absolutePath} 时出错:`, err);
} else {
console.log(`文件 ${absolutePath} 已成功创建。`);
}
});
}
};
const openai = new OpenAI({
apiKey: APIKEY,
baseURL: "https://ark.cn-beijing.volces.com/api/v3",
});
const chatAi = (messages) =>
new Promise((resolve, reject) => {
openai.chat.completions
.create({
messages,
model: MODEL,
response_format: {
type: "json_object",
},
temperature: 0.8,
})
.then((res) => {
resolve(res);
});
});
const systemMessage = `
你是一个前端开发人员,擅长使用VUE开发，熟悉 [arco.design UI 框架](https://arco.design/vue/docs/start).
#开发组件时严格遵守MVVM框架进行开发。
- 写业种是按照 API - store - view 的顺序书写。
- 请使用 TypeScript 语言
## 定义 API
- 请求数据使用 [axios](https://www.npmjs.com/package/axios). 使用 Promise 处理异步请求，并处理异常。
- 定义出数据的结构。并导出数据结构供 Store 或者其他需要数据结构的地方使用。
- 定义出查询、添加、删除、修改等接口。
## 定义 Store
- 使用 [pinia](https://pinia.vuejs.org/zh/core-concepts/) 的 defineStore 定义当前 Store
- 依据在API中已经定义好的数据结构，定义出 Store 中的 state.
- 依据在API中已经定义好的数据结构，定义出 Store 中的 getters.
- 依赖在API中已经定义出的 查询、添加、删除、修改等接口，定义出 Store 中的 action.
请根据用户提交的 数据结构以及接口生成 API、Store
输出格式，请以 JSON 的形式输出。不需要使用 markdown 语法 json 进行标记
如：{
"/api/user.ts": "user api file content",
"/store/user.ts": "user store ts file content"
}
`;
const userMessage = `
有数据结构如下
interface IUserInfo {
name: string;
age: number;
role: string;
school: string;
}
有 API 如下
- GET /user/list
- GET /user/{id}
- PUT /user/{id}
- POST /user
- DELETE /user/{id}
`;
const messages = [
{
role: "system",
content: systemMessage,
},
];
const userCreateListMessage = `
依据上述生成的 API 以及 Store 写一个 列表页，
功能要求
- 列表页有搜索功能，列表顶部有添加功能，
- 列表中有操作项，如修改，删除
- 删除时请使用 Popconfirm 实现二次确认
书写规范
- 请严格使用 MVVM 模式开发项目
- 使用 vue 3.0 setup 模型
注：这里尽可能完善列表页相关的功能，添加、修改等功能只需要有接口即可。
请以JSON的形式输出 如：{
"/view/user/list.vue": "list vue file content",
}
`;
const userCreateModalMessage = `
依据上述生成的列表页和API以及Store写一个 创建数据的弹窗，创建数据需要与 Store 联动。
功能要求
- 使用 Modal 的 on-before-ok 方法等创建接口完成后再关闭弹窗,发起请求后 ok-loading 处理 true 状态。
- 组件添加数据校验功能。同时数据提交时也需要检验。
注：这里尽可能完善《添加数据窗口》相关的功能，同时修改一个 list.vue 中引用的部分。
请以JSON的形式输出 如：{
"/view/user/create-modal.vue": "create vue file content"，
"/view/user/list.vue": "list vue file content"
}
`;
const userEditModalMessage = `
依据上述生成的创建弹窗和API以及Store写一个 编辑数据的弹窗，编辑数据需要与 Store 联动。
功能要求
- 使用 Modal 的 on-before-ok 方法等编辑接口完成后再关闭弹窗,发起请求后 ok-loading 处理 true 状态
- 组件添加数据校验功能。同时数据提交时也需要检验。
注：这里尽可能完善《编辑数据弹窗》相关的功能，同时修改一个 list.vue 中引用的部分。
请以JSON的形式输出 如：{
"/view/user/edit-modal.vue": "edit vue file content",
"/view/user/list.vue": "list vue file content"
}
`;
const outputALLMessage = `
上述已经生成了,将上述内容整体输出一下。输出格式为
{
"/api/user.ts": "user api file content",
"/store/user.ts": "user store ts file content",
"/view/user/list.vue": "list vue file content",
"/view/user/create-modal.vue": "create vue file content",
"/view/user/edit-modal.vue": "edit vue file content"
}
`;
[
userMessage,
userCreateListMessage,
userCreateModalMessage,
userEditModalMessage,
outputALLMessage,
]
.reduce((prePromise, message) => {
return prePromise.then((preMessages) => {
preMessages.push({ role: "user", content: message });
debugger;
return chatAi(preMessages).then(
({ choices }) =>
new Promise((resolve) => {
debugger;
preMessages.push(choices[0].message);
resolve(preMessages);
})
);
});
}, Promise.resolve(messages))
.then((messages) => {
console.log("last", messages);
const result = messages.pop();
const dataJSON = JSON.parse(result.content);
wirteFile(dataJSON);
});
生成的内容展示
import axios from 'axios';
// 定义数据结构
export interface IUserInfo {
name: string;
age: number;
role: string;
school: string;
}
// 获取用户列表
export const getUserList = async (): Promise<IUserInfo[]> => {
try {
const response = await axios.get('/user/list');
return response.data;
} catch (error) {
console.error('Error fetching user list:', error);
throw error;
}
};
// 获取单个用户信息
export const getUserById = async (id: string): Promise<IUserInfo> => {
try {
const response = await axios.get(`/user/${id}`);
return response.data;
} catch (error) {
console.error('Error fetching user by id:', error);
throw error;
}
};
// 更新用户信息
export const updateUser = async (id: string, userInfo: IUserInfo): Promise<IUserInfo> => {
try {
const response = await axios.put(`/user/${id}`, userInfo);
return response.data;
} catch (error) {
console.error('Error updating user:', error);
throw error;
}
};
// 创建新用户
export const createUser = async (userInfo: IUserInfo): Promise<IUserInfo> => {
try {
const response = await axios.post('/user', userInfo);
return response.data;
} catch (error) {
console.error('Error creating user:', error);
throw error;
}
};
// 删除用户
export const deleteUser = async (id: string): Promise<void> => {
try {
await axios.delete(`/user/${id}`);
} catch (error) {
console.error('Error deleting user:', error);
throw error;
}
};
import { defineStore } from 'pinia';
import { IUserInfo, getUserList, getUserById, updateUser, createUser, deleteUser } from '../api/user';
// 定义用户 store
export const useUserStore = defineStore('user', {
state: () => ({
userList: [] as IUserInfo[],
currentUser: null as IUserInfo | null,
}),
getters: {
getUserList: (state) => state.userList,
getCurrentUser: (state) => state.currentUser,
},
actions: {
async fetchUserList() {
this.userList = await getUserList();
},
async fetchUserById(id: string) {
this.currentUser = await getUserById(id);
},
async updateUserInfo(id: string, userInfo: IUserInfo) {
const updatedUser = await updateUser(id, userInfo);
const index = this.userList.findIndex(user => user.name === updatedUser.name);
if (index !== -1) {
this.userList[index] = updatedUser;
}
},
async createNewUser(userInfo: IUserInfo) {
const newUser = await createUser(userInfo);
this.userList.push(newUser);
},
async removeUser(id: string) {
await deleteUser(id);
this.userList = this.userList.filter(user => user.name !== id);
},
},
});
<template>
<a-card>
<a-space direction="vertical" style="width: 100%">
<!-- 搜索和添加按钮 -->
<a-space>
<a-input-search
v-model:value="searchKeyword"
placeholder="请输入姓名搜索"
@search="handleSearch"
/>
<a-button type="primary" @click="handleAdd">添加用户</a-button>
</a-space>
<!-- 用户列表 -->
<a-table :data-source="filteredUserList" :columns="columns" :rowKey="(record) => record.name">
<template #bodyCell="{ column, record }">
<!-- 操作列 -->
<template v-if="column.key === 'action'">
<a-space>
<a-button type="link" @click="handleEdit(record)">修改</a-button>
<a-popconfirm
title="确定删除该用户吗？"
@confirm="handleDelete(record.name)"
>
<a-button type="link" danger>删除</a-button>
</a-popconfirm>
</a-space>
</template>
</template>
</a-table>
</a-space>
</a-card>
<!-- 添加用户弹窗 -->
<create-modal ref="createModalRef" />
<!-- 编辑用户弹窗 -->
<edit-modal ref="editModalRef" />
</template>
<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { useUserStore } from '@/store/user';
import { IUserInfo } from '@/api/user';
import CreateModal from './create-modal.vue';
import EditModal from './edit-modal.vue';
// 使用 Pinia Store
const userStore = useUserStore();
// 搜索关键字
const searchKeyword = ref<string>('');
// 添加用户弹窗引用
const createModalRef = ref<any>(null);
// 编辑用户弹窗引用
const editModalRef = ref<any>(null);
// 表格列定义
const columns = [
{
title: '姓名',
dataIndex: 'name',
key: 'name',
},
{
title: '年龄',
dataIndex: 'age',
key: 'age',
},
{
title: '角色',
dataIndex: 'role',
key: 'role',
},
{
title: '学校',
dataIndex: 'school',
key: 'school',
},
{
title: '操作',
key: 'action',
},
];
// 获取用户列表
onMounted(() => {
userStore.fetchUserList();
});
// 过滤后的用户列表
const filteredUserList = computed(() => {
return userStore.getUserList.filter((user) =>
user.name.includes(searchKeyword.value)
);
});
// 搜索处理
const handleSearch = () => {
// 搜索逻辑已通过 computed 实现
};
// 添加用户
const handleAdd = () => {
createModalRef.value?.openModal();
};
// 修改用户
const handleEdit = (record: IUserInfo) => {
editModalRef.value?.openModal(record);
};
// 删除用户
const handleDelete = async (id: string) => {
try {
await userStore.removeUser(id);
console.log('删除成功');
} catch (error) {
console.error('删除失败:', error);
}
};
</script>
<style scoped>
/* 样式可以根据需要添加 */
</style>
<template>
<a-modal
v-model:visible="visible"
title="添加用户"
@before-ok="handleSubmit"
:ok-loading="loading"
>
<a-form :model="formState" :rules="rules" ref="formRef">
<a-form-item label="姓名" field="name">
<a-input v-model="formState.name" placeholder="请输入姓名" />
</a-form-item>
<a-form-item label="年龄" field="age">
<a-input-number v-model="formState.age" placeholder="请输入年龄" />
</a-form-item>
<a-form-item label="角色" field="role">
<a-input v-model="formState.role" placeholder="请输入角色" />
</a-form-item>
<a-form-item label="学校" field="school">
<a-input v-model="formState.school" placeholder="请输入学校" />
</a-form-item>
</a-form>
</a-modal>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue';
import { useUserStore } from '@/store/user';
import { IUserInfo } from '@/api/user';
import { FormInstance } from '@arco-design/web-vue/es/form';
// 使用 Pinia Store
const userStore = useUserStore();
// 控制弹窗显示
const visible = ref<boolean>(false);
// 表单引用
const formRef = ref<FormInstance | null>(null);
// 表单数据
const formState = reactive<IUserInfo>({
name: '',
age: 0,
role: '',
school: '',
});
// 表单校验规则
const rules = {
name: [{ required: true, message: '姓名不能为空' }],
age: [{ required: true, message: '年龄不能为空' }],
role: [{ required: true, message: '角色不能为空' }],
school: [{ required: true, message: '学校不能为空' }],
};
// 提交按钮加载状态
const loading = ref<boolean>(false);
// 打开弹窗
const openModal = () => {
visible.value = true;
};
// 提交表单
const handleSubmit = async () => {
try {
// 校验表单
await formRef.value?.validate();
loading.value = true;
// 调用 Store 创建用户
await userStore.createNewUser(formState);
// 关闭弹窗
visible.value = false;
} catch (error) {
console.error('创建用户失败:', error);
} finally {
loading.value = false;
}
};
// 暴露 openModal 方法
defineExpose({ openModal });
</script>
<style scoped>
/* 样式可以根据需要添加 */
</style>
<template>
<a-modal
v-model:visible="visible"
title="编辑用户"
@before-ok="handleSubmit"
:ok-loading="loading"
>
<a-form :model="formState" :rules="rules" ref="formRef">
<a-form-item label="姓名" field="name">
<a-input v-model="formState.name" placeholder="请输入姓名" />
</a-form-item>
<a-form-item label="年龄" field="age">
<a-input-number v-model="formState.age" placeholder="请输入年龄" />
</a-form-item>
<a-form-item label="角色" field="role">
<a-input v-model="formState.role" placeholder="请输入角色" />
</a-form-item>
<a-form-item label="学校" field="school">
<a-input v-model="formState.school" placeholder="请输入学校" />
</a-form-item>
</a-form>
</a-modal>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue';
import { useUserStore } from '@/store/user';
import { IUserInfo } from '@/api/user';
import { FormInstance } from '@arco-design web-vue/es/form';
// 使用 Pinia Store
const userStore = useUserStore();
// 控制弹窗显示
const visible = ref<boolean>(false);
// 表单引用
const formRef = ref<FormInstance | null>(null);
// 表单数据
const formState = reactive<IUserInfo>({
name: '',
age: 0,
role: '',
school: '',
});
// 表单校验规则
const rules = {
name: [{ required: true, message: '姓名不能为空' }],
age: [{ required: true, message: '年龄不能为空' }],
role: [{ required: true, message: '角色不能为空' }],
school: [{ required: true, message: '学校不能为空' }],
};
// 提交按钮加载状态
const loading = ref<boolean>(false);
// 打开弹窗并初始化表单数据
const openModal = (userInfo: IUserInfo) => {
Object.assign(formState, userInfo);
visible.value = true;
};
// 提交表单
const handleSubmit = async () => {
try {
// 校验表单
await formRef.value?.validate();
loading.value = true;
// 调用 Store 更新用户
await userStore.updateUserInfo(formState.name, formState);
// 关闭弹窗
visible.value = false;
} catch (error) {
console.error('更新用户失败:', error);
} finally {
loading.value = false;
}
};
// 暴露 openModal 方法
defineExpose({ openModal });
</script>
<style scoped>
/* 样式可以根据需要添加 */
</style>