verce-vue-test 0.0.0

package/src/views/DashboardView.vue

@@ -0,0 +1,86 @@
+<template>
+  <el-row :gutter="20">
+    <el-col :span="6">
+      <el-card shadow="hover">
+        <template #header>
+          <span>总用户数</span>
+        </template>
+        <el-text size="large" tag="div" type="primary">1,280</el-text>
+      </el-card>
+    </el-col>
+    <el-col :span="6">
+      <el-card shadow="hover">
+        <template #header>
+          <span>今日访问</span>
+        </template>
+        <el-text size="large" tag="div" type="primary">5,420</el-text>
+      </el-card>
+    </el-col>
+    <el-col :span="6">
+      <el-card shadow="hover">
+        <template #header>
+          <span>订单总数</span>
+        </template>
+        <el-text size="large" tag="div" type="primary">836</el-text>
+      </el-card>
+    </el-col>
+    <el-col :span="6">
+      <el-card shadow="hover">
+        <template #header>
+          <span>销售额</span>
+        </template>
+        <el-text size="large" tag="div" type="primary">¥128,500</el-text>
+      </el-card>
+    </el-col>
+  </el-row>
+
+  <el-row :gutter="20" style="margin-top: 20px">
+    <el-col :span="16">
+      <el-card shadow="hover">
+        <template #header>
+          <span>最近活动</span>
+        </template>
+        <el-table :data="recentActivities" stripe>
+          <el-table-column prop="time" label="时间" width="180" />
+          <el-table-column prop="user" label="用户" width="120" />
+          <el-table-column prop="action" label="操作" />
+          <el-table-column prop="status" label="状态">
+            <template #default="{ row }">
+              <el-tag :type="row.status === '成功' ? 'success' : row.status === '处理中' ? 'warning' : 'danger'">
+                {{ row.status }}
+              </el-tag>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-card>
+    </el-col>
+    <el-col :span="8">
+      <el-card shadow="hover">
+        <template #header>
+          <span>待办事项</span>
+        </template>
+        <el-timeline>
+          <el-timeline-item timestamp="2026-05-13" placement="top">
+            审核新用户注册申请
+          </el-timeline-item>
+          <el-timeline-item timestamp="2026-05-12" placement="top">
+            处理退款订单
+          </el-timeline-item>
+          <el-timeline-item timestamp="2026-05-11" placement="top">
+            更新系统配置
+          </el-timeline-item>
+        </el-timeline>
+      </el-card>
+    </el-col>
+  </el-row>
+</template>
+
+<script setup lang="ts">
+const recentActivities = [
+  { time: '2026-05-13 10:30', user: '张三', action: '提交了订单', status: '成功' },
+  { time: '2026-05-13 09:15', user: '李四', action: '修改了个人资料', status: '成功' },
+  { time: '2026-05-12 18:00', user: '王五', action: '发起了退款', status: '处理中' },
+  { time: '2026-05-12 14:22', user: '赵六', action: '删除了评论', status: '失败' },
+  { time: '2026-05-12 11:05', user: '孙七', action: '注册了账号', status: '成功' },
+]
+</script>

package/src/views/FormView.vue

@@ -0,0 +1,97 @@
+<template>
+  <el-card shadow="hover">
+    <template #header>
+      <span>信息录入</span>
+    </template>
+
+    <el-form :model="form" :rules="rules" ref="formRef" label-width="100px" style="max-width: 600px">
+      <el-form-item label="姓名" prop="name">
+        <el-input v-model="form.name" placeholder="请输入姓名" />
+      </el-form-item>
+
+      <el-form-item label="年龄" prop="age">
+        <el-input-number v-model="form.age" :min="1" :max="150" />
+      </el-form-item>
+
+      <el-form-item label="性别" prop="gender">
+        <el-radio-group v-model="form.gender">
+          <el-radio value="male">男</el-radio>
+          <el-radio value="female">女</el-radio>
+        </el-radio-group>
+      </el-form-item>
+
+      <el-form-item label="生日" prop="birthday">
+        <el-date-picker v-model="form.birthday" type="date" placeholder="选择日期" style="width: 100%" />
+      </el-form-item>
+
+      <el-form-item label="城市" prop="city">
+        <el-select v-model="form.city" placeholder="请选择城市" style="width: 100%">
+          <el-option label="北京" value="beijing" />
+          <el-option label="上海" value="shanghai" />
+          <el-option label="广州" value="guangzhou" />
+          <el-option label="深圳" value="shenzhen" />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item label="爱好" prop="hobbies">
+        <el-checkbox-group v-model="form.hobbies">
+          <el-checkbox value="reading" label="阅读" />
+          <el-checkbox value="sports" label="运动" />
+          <el-checkbox value="music" label="音乐" />
+          <el-checkbox value="travel" label="旅行" />
+        </el-checkbox-group>
+      </el-form-item>
+
+      <el-form-item label="评分" prop="rating">
+        <el-rate v-model="form.rating" />
+      </el-form-item>
+
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入备注" />
+      </el-form-item>
+
+      <el-form-item>
+        <el-button type="primary" @click="handleSubmit">提交</el-button>
+        <el-button @click="handleReset">重置</el-button>
+      </el-form-item>
+    </el-form>
+  </el-card>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+import type { FormInstance, FormRules } from 'element-plus'
+import { ElMessage } from 'element-plus'
+
+const formRef = ref<FormInstance>()
+
+const form = reactive({
+  name: '',
+  age: 18,
+  gender: '',
+  birthday: '',
+  city: '',
+  hobbies: [] as string[],
+  rating: 0,
+  remark: '',
+})
+
+const rules = reactive<FormRules>({
+  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
+  gender: [{ required: true, message: '请选择性别', trigger: 'change' }],
+  city: [{ required: true, message: '请选择城市', trigger: 'change' }],
+})
+
+const handleSubmit = async () => {
+  if (!formRef.value) return
+  await formRef.value.validate((valid) => {
+    if (valid) {
+      ElMessage.success('提交成功！')
+    }
+  })
+}
+
+const handleReset = () => {
+  formRef.value?.resetFields()
+}
+</script>

package/src/views/HomeView.vue

@@ -0,0 +1,35 @@
+<template>
+  <el-card shadow="hover">
+    <template #header>
+      <el-text tag="h1" size="large">欢迎使用管理系统</el-text>
+    </template>
+    <el-text>基于 Vue 3 + Element Plus 构建的管理系统模板</el-text>
+  </el-card>
+
+  <el-row :gutter="20" style="margin-top: 20px">
+    <el-col :span="8">
+      <el-card shadow="hover">
+        <template #header>
+          <el-text tag="h3">Vue 3</el-text>
+        </template>
+        <el-text>渐进式 JavaScript 框架</el-text>
+      </el-card>
+    </el-col>
+    <el-col :span="8">
+      <el-card shadow="hover">
+        <template #header>
+          <el-text tag="h3">Element Plus</el-text>
+        </template>
+        <el-text>基于 Vue 3 的组件库</el-text>
+      </el-card>
+    </el-col>
+    <el-col :span="8">
+      <el-card shadow="hover">
+        <template #header>
+          <el-text tag="h3">Vite</el-text>
+        </template>
+        <el-text>下一代前端构建工具</el-text>
+      </el-card>
+    </el-col>
+  </el-row>
+</template>

package/src/views/TableProView.vue

@@ -0,0 +1,111 @@
+<template>
+  <ElTablePro
+    :data="tableData"
+    :total="total"
+    v-model:page="query.page"
+    v-model:page-size="query.pageSize"
+    table-key="user"
+    row-key="id"
+    border
+    stripe
+    v-loading="loading"
+    @pagination-change="handlePaginationChange"
+  >
+    <template #toolbar>
+      <el-button type="primary" @click="handleAdd">新增</el-button>
+    </template>
+
+    <el-table-column type="index" label="序号" 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 prop="role" label="角色" width="120">
+      <template #default="{ row }">
+        <el-tag :type="row.role === '管理员' ? 'danger' : row.role === '编辑' ? 'warning' : 'info'">
+          {{ row.role }}
+        </el-tag>
+      </template>
+    </el-table-column>
+    <el-table-column prop="status" label="状态" width="100">
+      <template #default="{ row }">
+        <el-tag :type="row.status ? 'success' : 'danger'">
+          {{ row.status ? '启用' : '禁用' }}
+        </el-tag>
+      </template>
+    </el-table-column>
+    <el-table-column label="操作" width="180">
+      <template #default="{ row }">
+        <el-button link type="primary" @click="handleEdit(row)">编辑</el-button>
+        <el-button link type="danger" @click="handleDelete(row)">删除</el-button>
+      </template>
+    </el-table-column>
+  </ElTablePro>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import ElTablePro from '@/components/ElTablePro.vue'
+
+const loading = ref(false)
+const total = ref(0)
+
+const query = reactive({
+  page: 1,
+  pageSize: 10,
+})
+
+const allData = [
+  { id: 1, name: '张三', age: 28, email: 'zhangsan@example.com', role: '管理员', status: true },
+  { id: 2, name: '李四', age: 32, email: 'lisi@example.com', role: '编辑', status: true },
+  { id: 3, name: '王五', age: 25, email: 'wangwu@example.com', role: '用户', status: false },
+  { id: 4, name: '赵六', age: 29, email: 'zhaoliu@example.com', role: '用户', status: true },
+  { id: 5, name: '孙七', age: 35, email: 'sunqi@example.com', role: '编辑', status: true },
+  { id: 6, name: '周八', age: 27, email: 'zhouba@example.com', role: '用户', status: true },
+  { id: 7, name: '吴九', age: 31, email: 'wujiu@example.com', role: '管理员', status: true },
+  { id: 8, name: '郑十', age: 24, email: 'zhengshi@example.com', role: '用户', status: false },
+  { id: 9, name: '刘一', age: 33, email: 'liuyi@example.com', role: '编辑', status: true },
+  { id: 10, name: '陈二', age: 26, email: 'chener@example.com', role: '用户', status: true },
+  { id: 11, name: '杨三', age: 30, email: 'yangsan@example.com', role: '用户', status: true },
+  { id: 12, name: '黄四', age: 28, email: 'huangsi@example.com', role: '编辑', status: false },
+]
+
+const tableData = ref<any[]>([])
+
+const getList = () => {
+  loading.value = true
+  setTimeout(() => {
+    const start = (query.page - 1) * query.pageSize
+    const end = start + query.pageSize
+    tableData.value = allData.slice(start, end)
+    total.value = allData.length
+    loading.value = false
+  }, 300)
+}
+
+const handlePaginationChange = (_value: { page: number; pageSize: number }) => {
+  getList()
+}
+
+const handleAdd = () => {
+  ElMessage.info('新增用户')
+}
+
+const handleEdit = (row: any) => {
+  ElMessage.info(`编辑用户: ${row.name}`)
+}
+
+const handleDelete = (row: any) => {
+  ElMessageBox.confirm(`确认删除用户 ${row.name}？`, '提示', {
+    confirmButtonText: '确认',
+    cancelButtonText: '取消',
+    type: 'warning',
+  }).then(() => {
+    ElMessage.success('删除成功')
+  }).catch(() => {})
+}
+
+onMounted(() => {
+  getList()
+})
+</script>

package/src/views/UserView.vue

@@ -0,0 +1,85 @@
+<template>
+  <el-card shadow="hover">
+    <template #header>
+      <el-row justify="space-between" align="middle">
+        <el-text tag="span" size="large">用户管理</el-text>
+        <el-button type="primary" @click="dialogVisible = true">新增用户</el-button>
+      </el-row>
+    </template>
+
+    <el-table :data="users" stripe>
+      <el-table-column prop="id" label="ID" width="80" />
+      <el-table-column prop="name" label="姓名" width="120" />
+      <el-table-column prop="email" label="邮箱" />
+      <el-table-column prop="role" label="角色" width="120">
+        <template #default="{ row }">
+          <el-tag :type="row.role === '管理员' ? 'danger' : row.role === '编辑' ? 'warning' : 'info'">
+            {{ row.role }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column prop="status" label="状态" width="100">
+        <template #default="{ row }">
+          <el-switch v-model="row.status" />
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="180">
+        <template #default>
+          <el-button size="small" type="primary" link>编辑</el-button>
+          <el-button size="small" type="danger" link>删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-row justify="end" style="margin-top: 20px">
+      <el-pagination
+        background
+        layout="prev, pager, next"
+        :total="100"
+        :page-size="10"
+      />
+    </el-row>
+  </el-card>
+
+  <el-dialog v-model="dialogVisible" title="新增用户" width="500px">
+    <el-form :model="form" label-width="80px">
+      <el-form-item label="姓名">
+        <el-input v-model="form.name" placeholder="请输入姓名" />
+      </el-form-item>
+      <el-form-item label="邮箱">
+        <el-input v-model="form.email" placeholder="请输入邮箱" />
+      </el-form-item>
+      <el-form-item label="角色">
+        <el-select v-model="form.role" placeholder="请选择角色" style="width: 100%">
+          <el-option label="管理员" value="管理员" />
+          <el-option label="编辑" value="编辑" />
+          <el-option label="用户" value="用户" />
+        </el-select>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <el-button @click="dialogVisible = false">取消</el-button>
+      <el-button type="primary" @click="dialogVisible = false">确认</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive } from 'vue'
+
+const dialogVisible = ref(false)
+
+const form = reactive({
+  name: '',
+  email: '',
+  role: '',
+})
+
+const users = ref([
+  { id: 1, name: '张三', email: 'zhangsan@example.com', role: '管理员', status: true },
+  { id: 2, name: '李四', email: 'lisi@example.com', role: '编辑', status: true },
+  { id: 3, name: '王五', email: 'wangwu@example.com', role: '用户', status: false },
+  { id: 4, name: '赵六', email: 'zhaoliu@example.com', role: '用户', status: true },
+  { id: 5, name: '孙七', email: 'sunqi@example.com', role: '编辑', status: true },
+])
+</script>

package/tsconfig.app.json

@@ -0,0 +1,18 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
+  "exclude": ["src/**/__tests__/*"],
+  "compilerOptions": {
+    // Extra safety for array and object lookups, but may have false positives.
+    "noUncheckedIndexedAccess": true,
+
+    // Path mapping for cleaner imports.
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+
+    // `vue-tsc --build` produces a .tsbuildinfo file for incremental type-checking.
+    // Specified here to keep it out of the root directory.
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo"
+  }
+}

package/tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
+    }
+  ]
+}

package/tsconfig.node.json

@@ -0,0 +1,27 @@
+// TSConfig for modules that run in Node.js environment via either transpilation or type-stripping.
+{
+  "extends": "@tsconfig/node24/tsconfig.json",
+  "include": [
+    "vite.config.*",
+    "vitest.config.*",
+    "cypress.config.*",
+    "playwright.config.*",
+    "eslint.config.*"
+  ],
+  "compilerOptions": {
+    // Most tools use transpilation instead of Node.js's native type-stripping.
+    // Bundler mode provides a smoother developer experience.
+    "module": "preserve",
+    "moduleResolution": "bundler",
+
+    // Include Node.js types and avoid accidentally including other `@types/*` packages.
+    "types": ["node"],
+
+    // Disable emitting output during `vue-tsc --build`, which is used for type-checking only.
+    "noEmit": true,
+
+    // `vue-tsc --build` produces a .tsbuildinfo file for incremental type-checking.
+    // Specified here to keep it out of the root directory.
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo"
+  }
+}

package/vite.config.ts

@@ -0,0 +1,18 @@
+import { fileURLToPath, URL } from 'node:url'
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+import vueDevTools from 'vite-plugin-vue-devtools'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [
+    vue(),
+    vueDevTools(),
+  ],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    },
+  },
+})