From 4a6c7475bf97eac33e02632f3fe33bc47b9324d8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CDaisyWu=E2=80=9D?= <“18682150237@163.com”>
Date: Fri, 17 Jan 2025 10:52:47 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E5=8F=91=E5=B8=83?=
 =?UTF-8?q?=E8=AE=A1=E5=88=92=E9=A1=B5=E9=9D=A2UI=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/info-publish/add-release-plan.vue   | 281 ++++++++++++++++++
 .../info-publish/play-content-library.vue     |   3 +
 src/pages/info-publish/release-plan.vue       |   1 -
 3 files changed, 284 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/info-publish/add-release-plan.vue

diff --git a/src/pages/info-publish/add-release-plan.vue b/src/pages/info-publish/add-release-plan.vue
new file mode 100644
index 0000000..1651f5c
--- /dev/null
+++ b/src/pages/info-publish/add-release-plan.vue
@@ -0,0 +1,281 @@
+<route lang="json5" type="page">
+{
+  layout: 'default',
+  style: {
+    navigationStyle: 'custom'
+  }
+}
+</route>
+
+<template>
+  <view class="h-[calc(100vh-0px)] flex flex-col">
+    <TopNavigation title="添加发布计划"></TopNavigation>
+    <scroll-view class="flex-1 box-border" scroll-y>
+      <view class="plan-form">
+        <!-- 计划名称 -->
+        <view class="form-item">
+          <view class="form-label">
+            <text class="required">*</text>
+            <text>计划名称</text>
+          </view>
+          <input
+            type="text"
+            v-model="formData.name"
+            placeholder="智慧屏202501171038843"
+            class="form-input"
+          />
+        </view>
+
+        <!-- 计划描述 -->
+        <view class="form-item">
+          <view class="form-label">计划描述</view>
+          <input
+            type="text"
+            v-model="formData.description"
+            placeholder="请输入"
+            class="form-input"
+          />
+        </view>
+
+        <!-- 播放规则 -->
+        <view class="form-item">
+          <view class="form-label">
+            <text class="required">*</text>
+            <text>播放规则</text>
+          </view>
+          <view class="form-value" @click="handleSelectRule">
+            <text>每天循环播放</text>
+            <text class="arrow">></text>
+          </view>
+        </view>
+
+        <!-- 播放时间与内容 -->
+        <view class="form-section">
+          <view class="section-header">
+            <text class="required">*</text>
+            <text>播放时间与内容</text>
+          </view>
+
+          <view class="time-content-card">
+            <view class="time-row">
+              <text class="label">时段</text>
+              <text class="value">00:00– 23:59</text>
+              <text class="action-icon">▶</text>
+              <text class="delete-icon">🗑</text>
+            </view>
+            <view class="content-row">
+              <text class="label">内容</text>
+              <text class="value ellipsis">智慧屏节目2024...</text>
+            </view>
+          </view>
+
+          <view class="add-time-btn" @click="handleAddTime">
+            <text class="plus-icon">+</text>
+            <text>添加时段</text>
+          </view>
+        </view>
+
+        <!-- 关联设备 -->
+        <view class="form-item">
+          <view class="form-label">
+            <text class="required">*</text>
+            <text>关联设备</text>
+          </view>
+          <view class="form-value" @click="handleSelectDevice">
+            <text class="placeholder">请选择</text>
+            <text class="arrow">></text>
+          </view>
+        </view>
+      </view>
+    </scroll-view>
+
+    <!-- 底部按钮 -->
+    <view class="footer">
+      <button class="submit-btn" @click="handleSubmit">保存并发布</button>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue'
+
+  // 表单数据
+  const formData = ref({
+    name: '',
+    description: '',
+    rule: '每天循环播放',
+    timeSlots: [],
+    devices: []
+  })
+
+  // 选择播放规则
+  const handleSelectRule = () => {
+    // 实现规则选择逻辑
+  }
+
+  // 添加时段
+  const handleAddTime = () => {
+    // 实现添加时段逻辑
+  }
+
+  // 选择设备
+  const handleSelectDevice = () => {
+    // 实现设备选择逻辑
+  }
+
+  // 提交表单
+  const handleSubmit = () => {
+    // 实现表单提交逻辑
+  }
+</script>
+
+<style lang="scss" scoped>
+  page {
+    background-color: #f5f5f5;
+  }
+
+  .plan-form {
+    margin: 16px;
+  }
+
+  .form-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px;
+    margin-bottom: 12px;
+    background: #fff;
+    border-radius: 8px;
+  }
+
+  .form-label {
+    display: flex;
+    align-items: center;
+    font-size: 15px;
+    color: #333;
+
+    .required {
+      margin-right: 4px;
+      color: #ff4d4f;
+    }
+  }
+
+  .form-input {
+    flex: 1;
+    font-size: 14px;
+    color: #333;
+    text-align: right;
+  }
+
+  .form-value {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    color: #333;
+
+    .placeholder {
+      color: #999;
+    }
+
+    .arrow {
+      margin-left: 8px;
+      color: #ccc;
+    }
+  }
+
+  .form-section {
+    padding: 16px;
+    margin-bottom: 12px;
+    background: #fff;
+    border-radius: 8px;
+
+    .section-header {
+      display: flex;
+      align-items: center;
+      margin-bottom: 16px;
+      font-size: 15px;
+      color: #333;
+
+      .required {
+        margin-right: 4px;
+        color: #ff4d4f;
+      }
+    }
+  }
+
+  .time-content-card {
+    padding: 12px;
+    margin-bottom: 12px;
+    background: #f5f7fa;
+    border-radius: 4px;
+
+    .time-row,
+    .content-row {
+      display: flex;
+      align-items: center;
+      margin-bottom: 8px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      .label {
+        width: 40px;
+        font-size: 14px;
+        color: #666;
+      }
+
+      .value {
+        flex: 1;
+        margin: 0 8px;
+        font-size: 14px;
+        color: #333;
+      }
+
+      .action-icon,
+      .delete-icon {
+        padding: 4px;
+        color: #999;
+      }
+    }
+  }
+
+  .add-time-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 14px;
+    color: #4080ff;
+
+    .plus-icon {
+      margin-right: 4px;
+    }
+  }
+
+  .footer {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    padding: 16px;
+    background: #fff;
+    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.05);
+
+    .submit-btn {
+      width: 100%;
+      height: 40px;
+      font-size: 14px;
+      line-height: 40px;
+      color: #fff;
+      background: #4080ff;
+      border: none;
+      border-radius: 4px;
+    }
+  }
+
+  .ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+</style>
diff --git a/src/pages/info-publish/play-content-library.vue b/src/pages/info-publish/play-content-library.vue
index ae1602f..a318743 100644
--- a/src/pages/info-publish/play-content-library.vue
+++ b/src/pages/info-publish/play-content-library.vue
@@ -100,6 +100,9 @@
 
   const handlePublish = () => {
     // 实现发布逻辑
+    uni.navigateTo({
+      url: '/pages/info-publish/add-release-plan'
+    })
   }
 </script>
 
diff --git a/src/pages/info-publish/release-plan.vue b/src/pages/info-publish/release-plan.vue
index 1d74a88..bcf3b4c 100644
--- a/src/pages/info-publish/release-plan.vue
+++ b/src/pages/info-publish/release-plan.vue
@@ -64,7 +64,6 @@
 
   .device-tabs {
     display: flex;
-    padding: 4px;
     margin: 16px;
     background: #fff;
     border-radius: 8px;