admin_core/demo/src/components/CustomPage.vue

<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>