hello/frontend/admin/views/Demo.vue

<template>
  <div class="hello-demo">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>🎮 功能演示</span>
          <el-tag type="warning">Keep-Alive 页面</el-tag>
        </div>
      </template>
      
      <div class="demo-sections">
        <!-- 示例 1: 基础交互 -->
        <div class="demo-section">
          <h3>🔘 基础交互</h3>
          <el-space wrap>
            <el-button @click="count++">点击次数：{{ count }}</el-button>
            <el-button type="primary" @click="showMessage">显示消息</el-button>
            <el-button type="success" @click="showSuccess">成功提示</el-button>
          </el-space>
        </div>
        
        <!-- 示例 2: 表单演示 -->
        <div class="demo-section">
          <h3>📝 表单演示</h3>
          <el-form :model="formData" label-width="100px" style="max-width: 500px;">
            <el-form-item label="用户名">
              <el-input v-model="formData.username" placeholder="请输入用户名" />
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input v-model="formData.email" placeholder="请输入邮箱" />
            </el-form-item>
            <el-form-item label="备注">
              <el-input 
                v-model="formData.note" 
                type="textarea" 
                :rows="3"
                placeholder="请输入备注"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitForm">提交表单</el-button>
              <el-button @click="resetForm">重置表单</el-button>
            </el-form-item>
          </el-form>
        </div>
        
        <!-- 示例 3: 数据表格 -->
        <div class="demo-section">
          <h3>📊 数据表格</h3>
          <el-table :data="tableData" style="width: 100%" border stripe>
            <el-table-column prop="id" label="ID" width="80" />
            <el-table-column prop="name" label="姓名" />
            <el-table-column prop="age" label="年龄" width="80" />
            <el-table-column prop="email" label="邮箱" />
            <el-table-column label="操作" width="150" fixed="right">
              <template #default="{ row }">
                <el-button size="small" type="primary" @click="handleEdit(row)">编辑</el-button>
                <el-button size="small" type="danger" @click="handleDelete(row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        
        <!-- 示例 4: Keep-Alive 测试 -->
        <div class="demo-section">
          <h3>⏸️ Keep-Alive 测试</h3>
          <el-alert
            title="此页面启用了 keep-alive，切换路由后状态会保留"
            type="info"
            :closable="false"
            show-icon
          />
          <p style="margin-top: 10px; color: #606266;">
            当前输入的内容：<strong>{{ formData.username || '无' }}</strong>
          </p>
          <p style="color: #606266;">
            点击次数：<strong>{{ count }}</strong>
          </p>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 基础交互
const count = ref(0)

const showMessage = () => {
  ElMessage.info('这是一个普通消息提示')
}

const showSuccess = () => {
  ElMessage.success('操作成功！')
}

// 表单演示
const formData = ref({
  username: '',
  email: '',
  note: ''
})

const submitForm = () => {
  if (!formData.value.username) {
    ElMessage.warning('请输入用户名')
    return
  }
  ElMessage.success(`表单已提交，用户名：${formData.value.username}`)
}

const resetForm = () => {
  formData.value = {
    username: '',
    email: '',
    note: ''
  }
}

// 数据表格
const tableData = ref([
  { id: 1, name: '张三', age: 25, email: 'zhangsan@example.com' },
  { id: 2, name: '李四', age: 30, email: 'lisi@example.com' },
  { id: 3, name: '王五', age: 28, email: 'wangwu@example.com' }
])

const handleEdit = (row) => {
  ElMessage.info(`编辑：${row.name}`)
}

const handleDelete = (row) => {
  ElMessageBox.confirm(`确定要删除 ${row.name} 吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    ElMessage.success('删除成功')
  }).catch(() => {
    ElMessage.info('已取消删除')
  })
}
</script>

<style scoped>
.hello-demo {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.demo-sections {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.demo-section {
  padding-bottom: 20px;
  border-bottom: 1px solid #ebeef5;
}

.demo-section:last-child {
  border-bottom: none;
}

.demo-section h3 {
  margin-bottom: 15px;
  color: #303133;
}
</style>