原型改了

package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "element-plus": "^2.6.1",
+        "pinia": "^2.1.7",
         "vue": "^3.4.21",
         "vue-router": "^4.3.0"
       },
@@ -1009,6 +1010,56 @@
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
       "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
     },
+    "node_modules/pinia": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.1.7.tgz",
+      "integrity": "sha512-+C2AHFtcFqjPih0zpYuvof37SFxMQ7OEG2zV9jRI12i9BOy3YQVAHwdKtyyc8pDcDyIc33WCIsZaCFWU7WWxGQ==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.5.0",
+        "vue-demi": ">=0.14.5"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.4.0",
+        "typescript": ">=4.4.4",
+        "vue": "^2.6.14 || ^3.3.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pinia/node_modules/vue-demi": {
+      "version": "0.14.7",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz",
+      "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/postcss": {
       "version": "8.4.36",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.36.tgz",
@@ -1764,6 +1815,23 @@
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
       "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
     },
+    "pinia": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.1.7.tgz",
+      "integrity": "sha512-+C2AHFtcFqjPih0zpYuvof37SFxMQ7OEG2zV9jRI12i9BOy3YQVAHwdKtyyc8pDcDyIc33WCIsZaCFWU7WWxGQ==",
+      "requires": {
+        "@vue/devtools-api": "^6.5.0",
+        "vue-demi": ">=0.14.5"
+      },
+      "dependencies": {
+        "vue-demi": {
+          "version": "0.14.7",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz",
+          "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==",
+          "requires": {}
+        }
+      }
+    },
     "postcss": {
       "version": "8.4.36",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.36.tgz",

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "element-plus": "^2.6.1",
+    "pinia": "^2.1.7",
     "vue": "^3.4.21",
     "vue-router": "^4.3.0"
   },

src/main.js

@@ -4,5 +4,6 @@ import App from './App.vue'
 import router from './router'
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
+import { createPinia } from 'pinia'
 
-createApp(App).use(router).use(ElementPlus).mount('#app')
+createApp(App).use(router).use(ElementPlus).use(createPinia()).mount('#app')

src/store/project.js

@@ -0,0 +1,7 @@
+import { defineStore } from "pinia"
+
+export const usrProjectStore = defineStore("project", {
+    state: () => ({
+        list: [],
+    }),
+})

src/views/Home copy.vue

@@ -0,0 +1,52 @@
+<template>
+    <el-button type="success" round @click="new_project.name = ''; new_project.description = ''; add_project_enable = true;"
+        :icon="Plus">新建</el-button>
+    <el-table :data="project_data.list" style="width: 100%">
+        <el-table-column prop="name" label="项目名称" width="300" />
+        <el-table-column prop="description" label="项目描述" width="500" />
+        <el-table-column label="菜单" width="200">
+            <template #default="scope">
+                <el-button type="primary" size="small" round @click="remove_project(scope)">管理</el-button>
+                <el-button type="danger" size="small" round @click="remove_project(scope.$index)">删除</el-button>
+            </template>
+        </el-table-column>
+    </el-table>
+    <el-dialog v-model="add_project_enable" title="新增项目" width="500">
+        <el-form :model="new_project">
+            <el-form-item label="项目名称">
+                <el-input v-model="new_project.name" />
+            </el-form-item>
+            <el-form-item label="项目描述">
+                <el-input v-model="new_project.description" type="textarea" />
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary" @click="add_project">确定</el-button>
+                <el-button @click="add_project_enable = false">取消</el-button>
+            </el-form-item>
+        </el-form>
+    </el-dialog>
+</template>
+<script setup>
+import { ref, reactive } from 'vue'
+import { usrProjectStore } from '../store/project'
+import { Plus } from '@element-plus/icons-vue'
+
+const project_data = usrProjectStore();
+
+const add_project_enable = ref(false);
+const new_project = reactive({
+    name: '',
+    description: '',
+});
+const add_project = () => {
+    project_data.list.push({
+        name: new_project.name,
+        description: new_project.description,
+        room:[],
+    });
+    add_project_enable.value = false;
+}
+const remove_project = (index) => {
+    project_data.list.splice(index, 1);
+}
+</script>

src/views/Home.vue

@@ -1,6 +1,52 @@
 <template>
-    home
+    <el-card>
+        <el-row>
+            <el-col :span="6">
+                <el-card>
+                    <el-button :icon="Plus" circle @click="new_project.name = ''; new_project.description = ''; add_project_enable = true;" />
+                </el-card>
+            </el-col>
+            <el-col :span="6" v-for="item in project_data.list">
+                <el-card>
+                    <p>{{ item.name }}</p>
+                    <p>{{ item.description }}</p>
+                    <el-button type="primary" round>管理</el-button>
+                    <el-button type="danger" round @click="console.log("11",item,index)">删除</el-button>
+                </el-card>
+            </el-col>
+        </el-row>
+    </el-card>
+    <el-dialog v-model="add_project_enable" title="新增项目" width="500">
+        <el-form :model="new_project">
+            <el-form-item label="项目名称">
+                <el-input v-model="new_project.name" />
+            </el-form-item>
+            <el-form-item label="项目描述">
+                <el-input v-model="new_project.description" type="textarea" />
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary" @click="add_project">确定</el-button>
+                <el-button @click="add_project_enable = false">取消</el-button>
+            </el-form-item>
+        </el-form>
+    </el-dialog>
 </template>
 <script setup>
+import { Plus } from '@element-plus/icons-vue'
+import { ref, reactive } from 'vue'
+import { usrProjectStore } from '../store/project'
 
+const project_data = usrProjectStore();
+const add_project_enable = ref(false);
+const new_project = reactive({
+    name: '',
+    description: '',
+});
+const add_project = () => {
+    project_data.list.push({
+        name: new_project.name,
+        description: new_project.description,
+    });
+    add_project_enable.value = false;
+}
 </script>

src/views/Project.vue

@@ -1,6 +1,54 @@
 <template>
-    project
+    <el-card header="项目信息">
+        <p>项目信息:{{ project_data.list[0].name }}</p>
+        <p>项目描述:{{ project_data.list[0].description }}</p>
+        <el-button type="success" round :icon="CircleCheck">保存</el-button>
+        <el-button type="success" round :icon="Printer">预览</el-button>
+    </el-card>
+
+    <el-card>
+        <el-row>
+            <el-col :span="6">
+                <el-card>
+                    <el-button :icon="Plus" circle @click="add_room" />
+                </el-card>
+            </el-col>
+            <el-col :span="6" v-for="item in rooms">
+                <el-card>
+                    <p>{{ item.name }}</p>
+                    <p>{{ item.count }}</p>
+                    <el-button type="primary" round>设计</el-button>
+                    <el-button type="danger" round>删除</el-button>
+                </el-card>
+            </el-col>
+        </el-row>
+
+    </el-card>
 </template>
 <script setup>
+import { Printer, CircleCheck, Plus } from '@element-plus/icons-vue'
+import { ref, reactive } from 'vue'
+import { usrProjectStore } from '../store/project'
+import { ElMessage } from 'element-plus'
 
+const project_data = usrProjectStore();
+project_data.list.push({
+    name: "222",
+    description: "333",
+    room: [],
+});
+const rooms = project_data.list[0].room;
+const add_room = () => {
+    if (rooms.length > 6) {
+        ElMessage({
+            message: '房型数量已达上限！',
+            type: 'warning',
+        })
+    } else {
+        rooms.push({
+            name: "123",
+            count: 123,
+        });
+    }
+}
 </script>