first commit

pages/bot-list/bot-list.wxss

@@ -0,0 +1,317 @@
+/* pages/bot-list/bot-list.wxss */
+
+.container {
+  padding: 24rpx;
+  min-height: 100vh;
+  background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ed 100%);
+}
+
+/* 功能介绍区域 */
+.guide-box {
+  background: white;
+  border-radius: 16rpx;
+  padding: 32rpx;
+  margin-bottom: 24rpx;
+  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
+  display: flex;
+  align-items: center;
+  animation: slideIn 0.5s ease-out;
+}
+
+.guide-icon {
+  width: 80rpx;
+  height: 80rpx;
+  margin-right: 24rpx;
+}
+
+.guide-text {
+  font-size: 28rpx;
+  color: #333;
+  line-height: 1.6;
+}
+
+/* 状态监控动画 */
+.monitoring-box {
+  background: rgba(255, 255, 255, 0.9);
+  border-radius: 12rpx;
+  padding: 16rpx 24rpx;
+  display: flex;
+  align-items: center;
+  margin-bottom: 24rpx;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+}
+
+.radar-icon {
+  width: 40rpx;
+  height: 40rpx;
+  margin-right: 16rpx;
+  animation: rotate 2s linear infinite;
+}
+
+@keyframes rotate {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+
+/* 加载状态 */
+.loading-box {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 48rpx 0;
+}
+
+.loading-icon {
+  width: 80rpx;
+  height: 80rpx;
+  margin-bottom: 16rpx;
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0% { transform: scale(0.95); }
+  50% { transform: scale(1.05); }
+  100% { transform: scale(0.95); }
+}
+
+/* 错误状态 */
+.error-box {
+  text-align: center;
+  padding: 48rpx 24rpx;
+  color: #ff4d4f;
+}
+
+.retry-btn {
+  margin-top: 24rpx;
+  background: #1890ff;
+  color: white;
+  border-radius: 8rpx;
+  font-size: 28rpx;
+  padding: 16rpx 32rpx;
+}
+
+/* 机器人列表 */
+.bot-list {
+  max-height: calc(100vh - 300rpx);
+}
+
+.bot-item {
+  background: white;
+  border-radius: 12rpx;
+  padding: 24rpx;
+  margin-bottom: 16rpx;
+  display: flex;
+  align-items: center;
+  transition: transform 0.2s ease;
+  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+}
+
+.bot-item:active {
+  transform: scale(0.98);
+}
+
+.status-indicator {
+  width: 16rpx;
+  height: 16rpx;
+  border-radius: 50%;
+  margin-right: 16rpx;
+}
+
+.status-indicator.normal {
+  background: #52c41a;
+  box-shadow: 0 0 12rpx rgba(82, 196, 26, 0.4);
+}
+
+.status-indicator.abnormal {
+  background: #ff4d4f;
+  box-shadow: 0 0 12rpx rgba(255, 77, 79, 0.4);
+}
+
+.status-indicator.full {
+  background: #faad14;
+  box-shadow: 0 0 12rpx rgba(250, 173, 20, 0.4);
+}
+
+.bot-info {
+  flex: 1;
+}
+
+.bot-account {
+  font-size: 32rpx;
+  font-weight: 500;
+  color: #333;
+  display: block;
+}
+
+.bot-status {
+  font-size: 24rpx;
+  color: #666;
+  margin-top: 8rpx;
+  display: block;
+}
+
+.bot-update {
+  font-size: 22rpx;
+  color: #999;
+  margin-top: 4rpx;
+  display: block;
+}
+
+.action-buttons {
+  display: flex;
+  flex-direction: column;
+  gap: 12rpx;
+}
+
+.btn {
+  font-size: 24rpx;
+  padding: 12rpx 24rpx;
+  border-radius: 6rpx;
+  border: none;
+}
+
+.copy-btn {
+  background: #e6f7ff;
+  color: #1890ff;
+}
+
+.qrcode-btn {
+  background: #f6ffed;
+  color: #52c41a;
+}
+
+/* 二维码弹窗 */
+/* pages/bot-list/bot-list.wxss */
+/* 添加或更新以下样式 */
+
+.qr-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  visibility: hidden;
+  transition: all 0.3s ease;
+  z-index: 999;
+}
+
+.qr-modal.show {
+  opacity: 1;
+  visibility: visible;
+}
+
+.modal-container {
+  width: 90%;
+  background: white;
+  border-radius: 12rpx;
+  transform: translateY(50rpx);
+  opacity: 0;
+  transition: all 0.3s ease;
+}
+
+.qr-modal.show .modal-container {
+  transform: translateY(0);
+  opacity: 1;
+}
+
+.modal-header {
+  padding: 24rpx;
+  border-bottom: 1px solid #eee;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.modal-title {
+  font-size: 32rpx;
+  font-weight: 500;
+  color: #333;
+}
+
+.close-btn {
+  width: 64rpx;
+  height: 64rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 40rpx;
+  color: #999;
+  cursor: pointer;
+}
+
+.modal-content {
+  padding: 32rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.qrcode-image {
+  width: 100%;
+  height: auto;
+  max-width: 500rpx;
+  margin: 0 auto;
+}
+
+.tip-text {
+  margin-top: 24rpx;
+  font-size: 26rpx;
+  color: #666;
+}
+
+.modal-footer {
+  padding: 24rpx;
+  border-top: 1px solid #eee;
+  display: flex;
+  justify-content: center;
+}
+
+.save-btn {
+  background: #07C160;
+  color: white;
+  font-size: 28rpx;
+  padding: 16rpx 48rpx;
+  border-radius: 8rpx;
+  border: none;
+  width: 80%;
+}
+
+.save-btn:active {
+  opacity: 0.9;
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(20rpx);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/* 添加响应式设计 */
+@media screen and (max-width: 375px) {
+  .container {
+    padding: 16rpx;
+  }
+  
+  .bot-item {
+    padding: 16rpx;
+  }
+  
+  .action-buttons {
+    gap: 8rpx;
+  }
+  
+  .btn {
+    padding: 8rpx 16rpx;
+    font-size: 22rpx;
+  }
+}