<template>
    <view class="admin-page">
      <view class="admin-sections">
        <!-- 提示语 -->
        <view class="admin-card alert-card">
          <text class="alert-title">自定义事件说明：</text>
          <text class="alert-desc">1、新增的事件会在对应的事件类型相关的流程中触发，例：选择用户登录，则在用户登录时执行代码。</text>
          <text class="alert-desc">2、可以使用对应事件类型中的参数，例：$data['nickname'], $data['phone']等。</text>
          <text class="alert-desc">3、调用类的时请写入完整路径，例：\think\facade\Db、\app\services\other\CacheServices::class等。</text>
        </view>

        <!-- 内容区 -->
        <view class="admin-card content-card">
          <!-- 操作按钮行 -->
          <view class="action-bar">
            <button class="btn primary small" @click="onAdd">新增系统事件</button>
          </view>

          <!-- 表格（暂无数据） -->
          <view class="table-container list-table">
          <view class="table-header">
            <view class="col col-id"><text>编号</text></view>
            <view class="col col-name"><text>事件名</text></view>
            <view class="col col-type"><text>事件类型</text></view>
            <view class="col col-status"><text>是否开启</text></view>
            <view class="col col-time"><text>创建时间</text></view>
            <view class="col col-ops"><text>操作</text></view>
          </view>

          <view class="table-body">
            <view class="empty-row">
              <text class="empty-text">暂无数据</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="uts">

function onAdd() {
  uni.showToast({ title: '新增系统事件', icon: 'none' })
}
</script>

<style scoped lang="scss">
.admin-page {
  /* 使用 Layout 的背景和内边距 */
  padding: 0;
  background-color: transparent;
  min-height: auto;
}

.admin-card {
  background-color: #fff;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 20px;
}

.alert-card {
  background-color: #fff7e6;
  border: 1px solid #ffd591;
}

.alert-title {
  font-size: 14px;
  color: #fa8c16;
  margin-bottom: 8px;
  font-weight: bold;
}

.alert-desc {
  font-size: 13px;
  color: #fa8c16;
  line-height: 20px;
  margin-bottom: 4px;
}

.action-bar {
  margin-bottom: 16px;
}

.table-container {
  width: 100%;
  border: 1px solid #f0f0f0;
}

.table-header {
  display: flex;
  flex-direction: row;
  background-color: #fafafa;
  border-bottom: 1px solid #f0f0f0;
}

.table-row {
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #f0f0f0;
}

.col {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #333;
}

.col-id { width: 80px; }
.col-name { flex: 2; }
.col-type { flex: 2; }
.col-status { width: 100px; justify-content: center; }
.col-time { flex: 2; }
.col-ops { width: 100px; justify-content: center; }

.empty-row {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.empty-text {
  font-size: 14px;
  color: #bfbfbf;
}

.btn {
  height: 32px;
  padding: 0 20px;
  border-radius: 2px;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 1px solid #d9d9d9;
  background-color: #fff;
}

.btn.primary {
  background-color: #1890ff;
  border-color: #1890ff;
  color: #fff;
}

.btn.small {
  height: 28px;
  padding: 0 10px;
  font-size: 12px;
}
</style>


