1

demo/src/components/CustomPage.vue

@@ -0,0 +1,171 @@
+<template>
+  <div style="padding: 20px;">
+    <Card>
+      <p slot="title">
+        <Icon type="ios-cube" />
+        自定义页面示例
+      </p>
+      
+      <div style="margin-bottom: 20px;">
+        <Alert type="success" show-icon>
+          这是一个自定义页面组件示例，展示如何在 Admin Framework 中添加自定义页面。
+        </Alert>
+      </div>
+
+      <Row :gutter="16">
+        <Col span="12">
+          <Card title="基本信息" style="margin-bottom: 16px;">
+            <p><strong>当前时间:</strong> {{ currentTime }}</p>
+            <p><strong>页面路径:</strong> {{ $route.path }}</p>
+            <p><strong>框架版本:</strong> {{ framework.version }}</p>
+          </Card>
+        </Col>
+
+        <Col span="12">
+          <Card title="Vuex 状态" style="margin-bottom: 16px;">
+            <p><strong>自定义数据:</strong> {{ customData }}</p>
+            <p><strong>计数器:</strong> {{ count }}</p>
+            <div style="margin-top: 10px;">
+              <Button type="primary" @click="handleIncrement">增加计数</Button>
+              <Button type="default" @click="handleIncrementAsync" style="margin-left: 8px;">
+                异步增加
+              </Button>
+            </div>
+          </Card>
+        </Col>
+      </Row>
+
+      <Card title="API 测试" style="margin-bottom: 16px;">
+        <Form :label-width="80">
+          <FormItem label="请求地址">
+            <Input v-model="apiUrl" placeholder="输入 API 地址" />
+          </FormItem>
+          <FormItem>
+            <Button type="primary" @click="handleApiTest" :loading="apiLoading">
+              发送请求
+            </Button>
+            <Button @click="handleClear" style="margin-left: 8px;">清空结果</Button>
+          </FormItem>
+          <FormItem label="响应结果" v-if="apiResult">
+            <pre style="background: #f5f5f5; padding: 10px; border-radius: 4px;">{{ apiResult }}</pre>
+          </FormItem>
+        </Form>
+      </Card>
+
+      <Card title="UI 工具测试">
+        <Button type="success" @click="showSuccess">成功提示</Button>
+        <Button type="warning" @click="showWarning" style="margin-left: 8px;">警告提示</Button>
+        <Button type="error" @click="showError" style="margin-left: 8px;">错误提示</Button>
+        <Button type="info" @click="showConfirm" style="margin-left: 8px;">确认对话框</Button>
+      </Card>
+    </Card>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapActions, mapMutations } from 'vuex'
+
+export default {
+  name: 'CustomPage',
+  data() {
+    return {
+      currentTime: new Date().toLocaleString(),
+      timer: null,
+      apiUrl: '/api/test',
+      apiLoading: false,
+      apiResult: null,
+      framework: window.framework
+    }
+  },
+  computed: {
+    ...mapGetters('custom', ['customData', 'count'])
+  },
+  methods: {
+    ...mapMutations('custom', ['INCREMENT']),
+    ...mapActions('custom', ['incrementAsync', 'updateCustomData']),
+
+    // 增加计数
+    handleIncrement() {
+      this.INCREMENT()
+      this.$Message.success('计数已增加')
+    },
+
+    // 异步增加
+    handleIncrementAsync() {
+      this.$Message.info('1秒后增加计数...')
+      this.incrementAsync()
+    },
+
+    // API 测试
+    async handleApiTest() {
+      this.apiLoading = true
+      this.apiResult = null
+      
+      try {
+        const response = await this.$http.get(this.apiUrl)
+        this.apiResult = JSON.stringify(response.data, null, 2)
+        this.$Message.success('请求成功')
+      } catch (error) {
+        this.apiResult = JSON.stringify({
+          error: error.message,
+          details: error.toString()
+        }, null, 2)
+        this.$Message.error('请求失败: ' + error.message)
+      } finally {
+        this.apiLoading = false
+      }
+    },
+
+    // 清空结果
+    handleClear() {
+      this.apiResult = null
+    },
+
+    // UI 工具测试
+    showSuccess() {
+      this.$uiTool.success('这是一个成功提示')
+    },
+
+    showWarning() {
+      this.$uiTool.warning('这是一个警告提示')
+    },
+
+    showError() {
+      this.$uiTool.error('这是一个错误提示')
+    },
+
+    showConfirm() {
+      this.$uiTool.confirm('确定要执行此操作吗？').then(() => {
+        this.$Message.success('已确认')
+      }).catch(() => {
+        this.$Message.info('已取消')
+      })
+    }
+  },
+  mounted() {
+    // 定时更新时间
+    this.timer = setInterval(() => {
+      this.currentTime = new Date().toLocaleString()
+    }, 1000)
+
+    console.log('CustomPage 组件已挂载')
+    console.log('可用的工具函数:', this.$tools)
+    console.log('可用的 UI 工具:', this.$uiTool)
+  },
+  beforeDestroy() {
+    if (this.timer) {
+      clearInterval(this.timer)
+    }
+  }
+}
+</script>
+
+<style scoped>
+pre {
+  margin: 0;
+  font-size: 12px;
+  max-height: 300px;
+  overflow: auto;
+}
+</style>
+