补充页面内容

pages/mall/admin/maintain/dev-config/custom-event.uvue

@@ -1,22 +1,155 @@
 <template>
-  <AdminLayout currentPage="dev-config-event">
-    <view class="page">
-    <view class="header">
-    <text class="title">自定事件</text>
-    </view>
-    <view class="content">
-    <text class="tip">TODO: 自定事件</text>
+  <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>
-</AdminLayout>
 </template>
-<script setup lang="uts">
-import AdminLayout from '@/layouts/admin/AdminLayout.uvue'
-</script> 
 
-<style scoped> 
-  .page { padding: 16px; }
-  .title { font-size: 18px; font-weight: 600; }
-  .tip { color: #999; margin-top: 8px; display: block; }
+<script setup lang="uts">
+function onAdd() {
+  uni.showToast({ title: '新增系统事件', icon: 'none' })
+}
+</script>
+
+<style scoped lang="scss">
+.admin-page {
+  padding: 20px;
+  background-color: #f5f7f9;
+  min-height: 100vh;
+}
+
+.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>
 
+