验前修改

删除了用处不大的插件以及修复了容易把我气死的bug（ps:at仍然存在

Author: Cksheuen

cksheuen/package.json

@@ -14,8 +14,7 @@
     "element-plus": "^2.3.14",
     "less": "^4.2.0",
     "pinia": "^2.1.6",
-    "vue": "^3.3.4",
-    "vue-router": "^4.2.4"
+    "vue": "^3.3.4"
   },
   "devDependencies": {
     "@tsconfig/node18": "^18.2.2",
@@ -24,7 +23,6 @@
     "@vue/tsconfig": "^0.4.0",
     "npm-run-all2": "^6.0.6",
     "typescript": "~5.2.0",
-    "unplugin-auto-import": "^0.16.6",
     "unplugin-vue-components": "^0.25.2",
     "vite": "^4.4.9",
     "vue-tsc": "^1.8.11"

cksheuen/src/App.vue

@@ -1,11 +1,26 @@
-<script setup lang="ts">
-import { RouterLink, RouterView } from 'vue-router';
-</script>
-
 <template>
-    <RouterView />
+    <div class="body">
+        <div class="title">title</div>
+        <Table></Table>
+        <Detail></Detail>
+    </div>
 </template>
+  
+<script lang="ts" setup>
+import Table from '@/components/Table.vue';
+import Detail from '@/components/Detail.vue';
+</script>
+  
 
+
+<style scoped lang='less'>
+.title {
+    position: absolute;
+    top: 10px;
+    left: 50%;
+    transform: (-50%);
+}
+</style>
 <style>
 * {
     padding: 0;
@@ -17,4 +32,5 @@ body,
 #app {
     height: 100vh;
     background-color: rgb(245, 245, 245);
-}</style>
+}
+</style>

cksheuen/src/components/Detail.vue

@@ -11,28 +11,26 @@
                     <div class="cell-item">
                         {{ item }}
                     </div>
-                </template>
-                <el-input id="newVal" v-model="controlData.data[controlData.detaiIndex]![item]"
+                </template><!-- v-model="controlData.data[controlData.detaiIndex]![item]" -->
+                <el-input id="newVal" :v-model="getVal(controlData.detaiIndex, item)"
                     v-if="controlData.editState && item != 'images' && item != 'thumbnail'" />
 
                 <div class="content" v-if="item != 'images' && item != 'thumbnail' && !controlData.editState">
-                    {{ controlData.data[controlData.detaiIndex]![item] }}
+                    {{ getVal(controlData.detaiIndex, item) }}
                 </div>
                 <img v-else-if="item != 'thumbnail' && !controlData.editState"
-                    :src="controlData.data[controlData.detaiIndex]?.images[0]"
-                    :alt="controlData.data[controlData.detaiIndex]?.title">
+                    :src="(getVal(controlData.detaiIndex, item) as string[])[0]"
+                    :alt="(getVal(controlData.detaiIndex, 'title') as string)">
             </el-descriptions-item>
         </el-descriptions>
     </el-drawer>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
 import { ElButton, ElDrawer } from 'element-plus'
 import { useControlData } from '@/stores/useControlData';
 
 const controlData = useControlData()
-
 const handleClose = () => {
     controlData.close()
     controlData.checkState(false)
@@ -49,6 +47,11 @@ const saveNewVal = () => {
 
     changeEditState()
 }
+
+const getVal = (index: number, item: string): number | string | string[] => {
+
+    return controlData.data && controlData.data[index] ? controlData.data[index]![item] : '---'
+}
 </script>
 
 <style scoped lang="less">

cksheuen/src/components/Table.vue

@@ -72,7 +72,10 @@ const emitDetail = (index: number) => {
 
 const addItem = () => {
     controlData.pushNewItem()
-    controlData.open(controlData.data.at(-1).id - 1)
+    console.log('id', controlData.data.at(-1).id - 1);
+    console.log('open', controlData.data.length);
+
+    controlData.open(controlData.data.length)
     controlData.checkState(true)
 }
 

cksheuen/src/components/elementPlus.d.ts

@@ -0,0 +1 @@
+declare module "element-plus";

cksheuen/src/main.ts

@@ -1,14 +1,15 @@
 import { createApp } from 'vue';
 import { createPinia } from 'pinia';
+import ElementPlus from 'element-plus';
+import 'element-plus/dist/index.css';
 
 import App from './App.vue';
-import router from './router';
 
 const APP = createApp(App);
 
 const pinia = createPinia();
 
-APP.use(router);
 APP.use(pinia);
+APP.use(ElementPlus);
 
 APP.mount('#app');

cksheuen/src/router/index.ts

@@ -20,16 +20,16 @@ export const useControlData = defineStore('useControlData', () => {
     let data = ref<Data[]>([]);
     let newItem: Data = {
         id: 0,
-        title: '',
-        description: '',
+        title: '--',
+        description: '--',
         price: 0,
         discountPercentage: 0,
         rating: 0,
         stock: 0,
-        brand: '',
-        category: '',
-        thumbnail: '',
-        images: [''],
+        brand: '--',
+        category: '--',
+        thumbnail: '--',
+        images: ['--'],
     };
     let dataKeyName: any[] = [];
 
@@ -65,6 +65,7 @@ export const useControlData = defineStore('useControlData', () => {
     function open(index: number): void {
         detailState.value = true;
         detaiIndex.value = index;
+        console.log('open', index, data.value);
     }
 
     function close(): void {

cksheuen/src/stores/counter.ts

@@ -2,21 +2,10 @@ import { fileURLToPath, URL } from 'node:url';
 
 import { defineConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
-import AutoImport from 'unplugin-auto-import/vite';
-import Components from 'unplugin-vue-components/vite';
-import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-    plugins: [
-        vue(),
-        AutoImport({
-            resolvers: [ElementPlusResolver()],
-        }),
-        Components({
-            resolvers: [ElementPlusResolver()],
-        }),
-    ],
+    plugins: [vue()],
     resolve: {
         alias: {
             '@': fileURLToPath(new URL('./src', import.meta.url)),