vue3-admin-gpt 1.0.0

package/src/views/vab/upload.vue

@@ -0,0 +1,180 @@
+<template>
+  <div class="upload-container">
+    <el-card shadow="never">
+      <template #header>
+        <div class="card-header">
+          <span>文件上传</span>
+        </div>
+      </template>
+      
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-card shadow="hover">
+            <div class="upload-demo">
+              <h3>点击上传</h3>
+              <el-upload
+                class="upload-demo"
+                drag
+                action="https://jsonplaceholder.typicode.com/posts/"
+                multiple
+                :on-success="handleSuccess"
+                :on-error="handleError"
+                :before-remove="beforeRemove"
+                :on-exceed="handleExceed"
+                :file-list="fileList"
+              >
+                <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+                <div class="el-upload__text">
+                  将文件拖到此处，或<em>点击上传</em>
+                </div>
+                <template #tip>
+                  <div class="el-upload__tip">
+                    只能上传jpg/png文件，且不超过500kb
+                  </div>
+                </template>
+              </el-upload>
+            </div>
+          </el-card>
+        </el-col>
+        
+        <el-col :span="12">
+          <el-card shadow="hover">
+            <div class="upload-demo">
+              <h3>照片墙</h3>
+              <el-upload
+                action="https://jsonplaceholder.typicode.com/posts/"
+                list-type="picture-card"
+                :on-preview="handlePictureCardPreview"
+                :on-success="handleAvatarSuccess"
+                :file-list="imageList"
+              >
+                <el-icon><Plus /></el-icon>
+              </el-upload>
+              
+              <el-dialog v-model="dialogVisible">
+                <img w-full :src="dialogImageUrl" alt="Preview Image" />
+              </el-dialog>
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
+      
+      <el-row :gutter="20" style="margin-top: 20px">
+        <el-col :span="24">
+          <el-card shadow="hover">
+            <div class="upload-demo">
+              <h3>手动上传</h3>
+              <el-upload
+                ref="uploadRef"
+                class="upload-demo"
+                action="https://jsonplaceholder.typicode.com/posts/"
+                :auto-upload="false"
+                :on-change="handleChange"
+                :file-list="manualFiles"
+              >
+                <template #trigger>
+                  <el-button type="primary">选取文件</el-button>
+                </template>
+                <el-button 
+                  class="ml-3" 
+                  type="success" 
+                  @click="submitUpload"
+                  :loading="uploadLoading"
+                >
+                  上传到服务器
+                </el-button>
+                <template #tip>
+                  <div class="el-upload__tip">
+                    文件会先保存到本地，点击上传按钮后才会上传到服务器
+                  </div>
+                </template>
+              </el-upload>
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { UploadFilled, Plus } from "@element-plus/icons-vue";
+
+export default {
+  name: "Upload",
+  components: {
+    UploadFilled,
+    Plus
+  },
+  data() {
+    return {
+      fileList: [],
+      imageList: [],
+      manualFiles: [],
+      dialogImageUrl: "",
+      dialogVisible: false,
+      uploadLoading: false,
+      uploadRef: null
+    };
+  },
+  methods: {
+    handleSuccess(response, file, fileList) {
+      this.$message.success("文件上传成功");
+      console.log("上传成功:", response, file, fileList);
+    },
+    handleError(error, file, fileList) {
+      this.$message.error("文件上传失败");
+      console.error("上传失败:", error, file, fileList);
+    },
+    beforeRemove(uploadFile, uploadFiles) {
+      return this.$confirm(`确定移除 ${uploadFile.name}？`);
+    },
+    handleExceed(files, fileList) {
+      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
+    },
+    handlePictureCardPreview(uploadFile) {
+      this.dialogImageUrl = uploadFile.url;
+      this.dialogVisible = true;
+    },
+    handleAvatarSuccess(response, uploadFile) {
+      this.$message.success("图片上传成功");
+      console.log("图片上传成功:", response, uploadFile);
+    },
+    handleChange(file, fileList) {
+      this.manualFiles = fileList;
+    },
+    async submitUpload() {
+      this.uploadLoading = true;
+      // 模拟上传过程
+      await new Promise(resolve => setTimeout(resolve, 2000));
+      this.uploadLoading = false;
+      this.$message.success("手动上传成功");
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.upload-container {
+  padding: 20px;
+  
+  .card-header {
+    font-weight: bold;
+  }
+  
+  .upload-demo {
+    h3 {
+      margin-bottom: 20px;
+      color: #333;
+    }
+    
+    :deep(.el-upload-dragger) {
+      width: 100%;
+    }
+    
+    :deep(.el-upload-list__item) {
+      transition: none !important;
+    }
+  }
+}
+</style>

package/src/views/vab/vue3Demo/index.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="vue3-demo-container">
+    <el-card class="box-card">
+      <template #header>
+        <div class="card-header">
+          <h3>Vue 3 setup 语法糖示例</h3>
+        </div>
+      </template>
+      <div>
+        <p>计数器: {{ count }}</p>
+        <el-button type="primary" @click="increment"> 增加 </el-button>
+        <el-button type="danger" @click="decrement"> 减少 </el-button>
+      </div>
+      <el-divider />
+      <div>
+        <h4>用户信息</h4>
+        <p>用户名: {{ user.name }}</p>
+        <p>邮箱: {{ user.email }}</p>
+        <el-input v-model="user.name" placeholder="输入用户名" />
+        <el-input v-model="user.email" placeholder="输入邮箱" />
+      </div>
+      <el-divider />
+      <div>
+        <h4>计算属性示例</h4>
+        <p>全名: {{ fullName }}</p>
+      </div>
+      <el-divider />
+      <div>
+        <h4>Element Plus组件示例</h4>
+        <el-date-picker v-model="date" type="date" placeholder="选择日期" />
+        <div style="margin-top: 20px">
+          <el-tag v-if="date"> 选择的日期: {{ formatDate(date) }} </el-tag>
+        </div>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, computed } from "vue";
+import { ElMessage } from "element-plus";
+import dayjs from "dayjs";
+
+// 定义组件名，用于 keep-alive 缓存匹配
+defineOptions({
+  name: "Vue3Demo",
+});
+
+// 响应式变量
+const count = ref(0);
+const date = ref("");
+
+// 响应式对象
+const user = reactive({
+  name: "张三",
+  email: "zhangsan@example.com",
+});
+
+// 计算属性
+const fullName = computed(() => {
+  return `${user.name} (${user.email})`;
+});
+
+// 方法
+const increment = () => {
+  count.value++;
+  ElMessage.success(`计数器增加到: ${count.value}`);
+};
+
+const decrement = () => {
+  if (count.value > 0) {
+    count.value--;
+    ElMessage.info(`计数器减少到: ${count.value}`);
+  } else {
+    ElMessage.warning("计数器已经为0");
+  }
+};
+
+const formatDate = (date) => {
+  return dayjs(date).format("YYYY-MM-DD");
+};
+</script>
+
+<style lang="scss" scoped>
+.vue3-demo-container {
+  padding: 20px;
+
+  .box-card {
+    max-width: 600px;
+    margin: 0 auto;
+
+    .card-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .el-input {
+      margin-bottom: 10px;
+    }
+  }
+}
+</style>