Initial commit

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2026-09-17 12:02:35 +08:00
commit d999a5c0e6
643 changed files with 178681 additions and 0 deletions
@@ -0,0 +1,127 @@
+# Examples
+
+## 列表页最小骨架（Vue2 + Element UI）
+
+```vue
+<template>
+  <div class="page-wrap">
+    <el-form :inline="true" :model="queryForm">
+      <el-form-item label="关键词">
+        <el-input v-model="queryForm.keyword" clearable />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="handleSearch">查询</el-button>
+        <el-button @click="handleReset">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-table :data="tableData" v-loading="loading" border>
+      <el-table-column prop="id" label="ID" width="100" />
+      <el-table-column prop="name" label="名称" min-width="160" />
+    </el-table>
+
+    <el-pagination
+      :current-page="queryForm.pageNum"
+      :page-size="queryForm.pageSize"
+      :total="total"
+      layout="total, prev, pager, next"
+      @current-change="handlePageChange"
+    />
+  </div>
+</template>
+
+<script>
+import { getList } from "@/api/demo";
+
+export default {
+  name: "DemoList",
+  data() {
+    return {
+      loading: false,
+      tableData: [],
+      total: 0,
+      queryForm: {
+        keyword: "",
+        pageNum: 1,
+        pageSize: 20
+      }
+    };
+  },
+  created() {
+    this.fetchList();
+  },
+  methods: {
+    async fetchList() {
+      this.loading = true;
+      try {
+        const res = await getList(this.queryForm);
+        this.tableData = res?.data?.list || [];
+        this.total = res?.data?.total || 0;
+      } finally {
+        this.loading = false;
+      }
+    },
+    handleSearch() {
+      this.queryForm.pageNum = 1;
+      this.fetchList();
+    },
+    handleReset() {
+      this.queryForm.keyword = "";
+      this.queryForm.pageNum = 1;
+      this.fetchList();
+    },
+    handlePageChange(page) {
+      this.queryForm.pageNum = page;
+      this.fetchList();
+    }
+  }
+};
+</script>
+```
+
+## API 文件示例
+
+```js
+import request from "@/utils/request";
+
+export function getList(params) {
+  return request({
+    url: "/api/demo/list",
+    method: "get",
+    params
+  });
+}
+
+export function createItem(data) {
+  return request({
+    url: "/api/demo/create",
+    method: "post",
+    data
+  });
+}
+```
+
+## 表单弹窗处理示例
+
+```js
+methods: {
+  openDialog(row) {
+    this.dialogVisible = true;
+    this.formData = row
+      ? { id: row.id, name: row.name }
+      : { id: "", name: "" };
+  },
+  async handleSubmit() {
+    this.submitLoading = true;
+    try {
+      await this.$refs.formRef.validate();
+      await createItem(this.formData);
+      this.$message.success("保存成功");
+      this.dialogVisible = false;
+      this.fetchList();
+    } finally {
+      this.submitLoading = false;
+    }
+  }
+}
+```