Toolbox/public/tools/plant_home/index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>绿植的流浪家园</title>
  <link rel="stylesheet" href="plant_home.css">
</head>
<body>
  <div class="plant-app">
    <header class="plant-header">
      <div class="plant-brand">
        <div class="plant-brand-icon">🌿</div>
        <div>
          <h1>绿植的流浪家园</h1>
          <div class="plant-subtitle">上海宝山区 · 17楼室内 · 养护与生长日志</div>
        </div>
      </div>
      <div class="summary-grid" id="summary-grid"></div>
      <div class="plant-tabs">
        <button class="tab-btn active" data-tab="home">首页</button>
        <button class="tab-btn" data-tab="plants">我的植物</button>
        <button class="tab-btn" data-tab="logs">养护日志</button>
        <button class="tab-btn" data-tab="gallery">相册</button>
        <button class="tab-btn" data-tab="settings">设置</button>
      </div>
    </header>

    <main class="plant-main">
      <section id="tab-home" class="tab-panel active">
        <div class="weather-bar" id="weather-bar">天气加载中...</div>

        <div class="section-card">
          <div class="section-head">
            <h2>提醒</h2>
            <div class="section-actions">
              <button id="btn-refresh-dashboard" class="ghost-btn">刷新</button>
            </div>
          </div>
          <div class="reminder-tabs">
            <button class="reminder-tab-btn active" data-reminder-tab="weekly">一周内待提醒</button>
            <button class="reminder-tab-btn" data-reminder-tab="important">重要提醒</button>
          </div>
          <div id="home-reminders-weekly" class="reminder-list"></div>
          <div id="home-reminders-important" class="reminder-list hidden"></div>
        </div>
      </section>

      <section id="tab-plants" class="tab-panel">
        <div class="split-layout">
          <div class="section-card">
            <div class="section-head">
              <h2>植物列表</h2>
              <div class="section-actions">
                <button id="btn-add-plant" class="primary-btn">新增植物</button>
              </div>
            </div>
            <div id="plant-list" class="plant-grid"></div>
          </div>

          <div class="section-card" id="plant-detail-card">
            <div class="section-head">
              <h2>植物详情</h2>
              <div class="section-actions">
                <button id="btn-import-profile" class="ghost-btn">AI导入习性</button>
                <button id="btn-pattern-analysis" class="ghost-btn">AI分析规律</button>
                <button id="btn-add-log" class="primary-btn">记一笔</button>
              </div>
            </div>
            <div id="plant-detail" class="empty-text">请选择一棵植物</div>
          </div>
        </div>
      </section>

      <section id="tab-logs" class="tab-panel">
        <div class="section-card">
          <div class="section-head">
            <h2>生长日志</h2>
            <div class="section-actions">
              <button id="btn-add-log-logs" class="primary-btn">新增日志</button>
            </div>
          </div>
          <div id="log-list" class="timeline-list"></div>
        </div>
      </section>

      <section id="tab-gallery" class="tab-panel">
        <div class="section-card">
          <div class="section-head">
            <h2>相册</h2>
            <div class="section-actions">
              <button id="btn-upload-photo" class="primary-btn">上传照片</button>
            </div>
          </div>
          <div id="gallery-list" class="photo-grid"></div>
        </div>
      </section>

      <section id="tab-settings" class="tab-panel">
        <div class="section-card">
          <div class="section-head">
            <h2>工具设置</h2>
            <div class="section-actions">
              <button id="btn-refresh-weather" class="ghost-btn">刷新天气</button>
              <button id="btn-run-scheduler" class="primary-btn">立即检查提醒</button>
            </div>
          </div>
          <div class="settings-grid">
            <div class="setting-box">
              <div class="setting-title">提醒逻辑</div>
              <div class="setting-text">提醒时间完全以你的日记设置为准。AI 只负责分析和辅助，不再自动决定下次提醒。</div>
            </div>
            <div class="setting-box">
              <div class="setting-title">网页提醒</div>
              <div class="setting-text">
                <button id="btn-enable-notify" class="ghost-btn">开启浏览器提醒</button>
                <span id="notify-status">尚未授权</span>
              </div>
            </div>
            <div class="setting-box">
              <div class="setting-title">AI固定上下文</div>
              <div class="setting-text" id="settings-context">加载中...</div>
            </div>
          </div>
        </div>
      </section>
    </main>
  </div>

  <dialog id="log-detail-dialog" class="plant-dialog plant-dialog-mobile">
    <div class="dialog-form">
      <h3>养护日志详情</h3>
      <div id="log-detail-content" class="log-detail-content">
        <div class="empty-text">加载中...</div>
      </div>
      <div class="dialog-actions">
        <button type="button" class="primary-btn" data-close-dialog="log-detail-dialog">关闭</button>
      </div>
    </div>
  </dialog>

  <dialog id="plant-dialog" class="plant-dialog plant-dialog-wide">
    <form method="dialog" id="plant-form" class="dialog-form">
      <h3 id="plant-dialog-title">新增植物</h3>
      <input type="hidden" name="plant_id">
      <div class="dialog-grid-2">
        <div class="dialog-section">
          <div class="section-subtitle">基础信息</div>
          <label>名称</label>
          <div class="inline-action-row">
            <input name="name" required>
            <button type="button" id="btn-assist-plant" class="ghost-btn">辅助填写</button>
          </div>
          <label>别名<input name="alias"></label>
          <label>学名<input name="scientific_name"></label>
          <label>摆放位置<input name="room_area" placeholder="客厅 / 阳台 / 书房"></label>
          <label>光照环境<input name="light_env" placeholder="散射光 / 双层玻璃阳台"></label>
          <label>植物分类<input name="plant_group" placeholder="观叶 / 多肉 / 仙人掌"></label>
          <label>当前状态<input name="status_label" placeholder="状态良好 / 需浇水"></label>
          <label>档案摘要<textarea name="ai_summary" rows="4" placeholder="辅助填写后会把植物档案摘要放这里"></textarea></label>
          <label>备注<textarea name="note" rows="4"></textarea></label>
        </div>

        <div class="dialog-section">
          <div class="section-subtitle">养护规则与本次照片</div>
          <label>光照说明<textarea name="light_text" rows="2" placeholder="例如：明亮散射光，避免盛夏午后直晒"></textarea></label>
          <label>浇水说明<textarea name="watering_text" rows="2" placeholder="例如：盆土 2/3 干后再浇透"></textarea></label>
          <label>温度说明<textarea name="temp_text" rows="2" placeholder="例如：18~30℃ 生长较稳"></textarea></label>
          <label>通风说明<textarea name="ventilation_text" rows="2" placeholder="例如：保持基本通风，梅雨期避免闷根"></textarea></label>
          <label>补光说明<textarea name="grow_light_text" rows="2" placeholder="例如：光照不足时每晚补光 2~4 小时"></textarea></label>
          <label>施肥说明<textarea name="fertilizing_text" rows="2" placeholder="例如：生长期薄肥少量，冬季减肥或停肥"></textarea></label>
          <label>土壤说明<textarea name="soil_text" rows="2" placeholder="例如：疏松透气、排水良好的颗粒土"></textarea></label>

          <div class="compact-grid">
            <label>浇水周期(天)<input name="watering_interval_days" type="number" min="1" value="7"></label>
            <label>施肥周期(天)<input name="fertilizing_interval_days" type="number" min="1" value="30"></label>
            <label>修剪周期(天)<input name="pruning_interval_days" type="number" min="1" value="90"></label>
            <label>换盆周期(天)<input name="repot_interval_days" type="number" min="1" value="180"></label>
            <label>高温浇水修正(天)<input name="watering_hot_delta" type="number" value="-1"></label>
            <label>高湿浇水修正(天)<input name="watering_humid_delta" type="number" value="1"></label>
            <label>低温浇水修正(天)<input name="watering_cold_delta" type="number" value="2"></label>
          </div>

          <div class="upload-box">
            <div class="upload-box-title">编辑时可顺手上传一张自己的植物照片</div>
            <label>照片文件<input type="file" name="cover_photo" accept="image/*"></label>
            <div class="compact-grid">
              <label>拍摄日期<input name="cover_shot_at" type="date"></label>
              <label>照片备注<input name="cover_note" placeholder="例如：换盆后一周状态"></label>
            </div>
            <label class="inline-check"><input type="checkbox" name="cover_make_avatar" value="1" checked> 设为植物封面</label>
            <div class="form-tip">每棵植物最多只能设置 3 张封面图，植物卡片会在这 3 张里自动滚动。</div>
          </div>
        </div>
      </div>
      <div class="dialog-actions">
        <button type="button" class="ghost-btn" data-close-dialog="plant-dialog">取消</button>
        <button type="submit" class="primary-btn">保存</button>
      </div>
    </form>
  </dialog>

  <dialog id="log-dialog" class="plant-dialog plant-dialog-mobile">
    <form method="dialog" id="log-form" class="dialog-form" enctype="multipart/form-data">
      <h3>记录生长日记</h3>
      <input type="hidden" name="mood_tag">
      <input type="hidden" name="override_existing_rule" value="0">
      <input type="hidden" name="stop_existing_rule_id" value="">
      <div class="dialog-section">
        <div class="section-subtitle">基础信息</div>
        <label>植物
          <select name="plant_id" required id="log-plant-select"></select>
        </label>
        <label>动作
          <select name="action_type" id="log-action-type">
            <option value="watering">浇水</option>
            <option value="fertilizing">施肥</option>
            <option value="pruning">修剪</option>
            <option value="repot">换盆</option>
            <option value="observe">观察</option>
          </select>
        </label>
        <div class="compact-grid">
          <label>日期<input name="action_at" type="date"></label>
          <label>用量 / 说明<input name="amount_text" placeholder="例如 250ml / 薄肥一次"></label>
        </div>
        <label>备注<textarea name="note" rows="4" placeholder="记录今天的状态、变化、你的观察"></textarea></label>
      </div>

      <div class="dialog-section">
        <div class="section-subtitle">心情标签</div>
        <div id="log-mood-tag-list" class="tag-chip-list"></div>
        <div class="inline-action-row">
          <input id="log-new-tag-name" placeholder="新增一个自己的标签">
          <button type="button" id="btn-log-add-tag" class="ghost-btn">加入标签</button>
        </div>
        <div class="form-tip">第一版先单选，点一下就能切换。</div>
      </div>

      <div class="dialog-section">
        <div class="section-subtitle">图片 / 视频 / 附件</div>
        <label>过程图片
          <input type="file" name="photos" accept="image/*" capture="environment" multiple>
        </label>
        <label>视频与附件
          <input type="file" name="attachments" accept="video/*,.pdf,.doc,.docx,.xls,.xlsx,.txt,.zip,.rar" multiple>
        </label>
        <label class="inline-check"><input type="checkbox" name="log_make_cover" value="1"> 第一张图片同时设为植物封面</label>
        <div class="form-tip">图片会进入现有植物图片库；视频和文档作为本条日记附件保存。</div>
      </div>

      <div class="dialog-section">
        <div class="section-subtitle">下次提醒</div>
        <label class="inline-check"><input type="checkbox" name="reminder_enabled" value="1" id="log-reminder-enabled"> 这条日记同时设置提醒</label>
        <div id="log-existing-rule-box" class="rule-hint-box empty-text">当前没有同类提醒</div>
        <div id="log-reminder-fields" class="dialog-subsection hidden">
          <div class="compact-grid">
            <label>提醒类型
              <select name="reminder_type" id="log-reminder-type">
                <option value="watering">浇水</option>
                <option value="fertilizing">施肥</option>
                <option value="pruning">修剪</option>
                <option value="repot">换盆</option>
                <option value="observe">观察</option>
              </select>
            </label>
            <label>提醒时间<input name="reminder_time" type="time" value="09:00"></label>
          </div>
          <label>提醒模式
            <select name="reminder_rule_mode" id="log-reminder-mode">
              <option value="once">单次</option>
              <option value="every_n_days">每N天</option>
              <option value="weekly">每周</option>
              <option value="monthly">每月</option>
            </select>
          </label>
          <div id="log-reminder-once" class="compact-grid">
            <label>几天后<input name="reminder_after_days" type="number" min="0" value="7"></label>
            <label>或直接选日期<input name="reminder_once_date" type="date"></label>
          </div>
          <div id="log-reminder-every-n" class="compact-grid hidden">
            <label>间隔天数<input name="reminder_interval_n" type="number" min="1" value="7"></label>
          </div>
          <div id="log-reminder-weekly" class="hidden">
            <div class="field-title">选择周几</div>
            <div class="weekday-chip-list" id="log-weekday-list">
              <label class="tag-chip-option"><input type="checkbox" value="1">周一</label>
              <label class="tag-chip-option"><input type="checkbox" value="2">周二</label>
              <label class="tag-chip-option"><input type="checkbox" value="3">周三</label>
              <label class="tag-chip-option"><input type="checkbox" value="4">周四</label>
              <label class="tag-chip-option"><input type="checkbox" value="5">周五</label>
              <label class="tag-chip-option"><input type="checkbox" value="6">周六</label>
              <label class="tag-chip-option"><input type="checkbox" value="7">周日</label>
            </div>
            <input type="hidden" name="reminder_weekly_days_json" value="[]">
          </div>
          <div id="log-reminder-monthly" class="compact-grid hidden">
            <label>每月几号<input name="reminder_monthly_day" type="number" min="1" max="31" value="1"></label>
          </div>
          <label>提醒备注<textarea name="reminder_note" rows="2" placeholder="留空则使用系统默认提醒文案"></textarea></label>
        </div>
      </div>
      <div class="dialog-actions">
        <button type="button" class="ghost-btn" data-close-dialog="log-dialog">取消</button>
        <button type="submit" class="primary-btn">保存日记</button>
      </div>
    </form>
  </dialog>

  <dialog id="photo-dialog" class="plant-dialog">
    <form method="dialog" id="photo-form" class="dialog-form" enctype="multipart/form-data">
      <h3>上传植物照片</h3>
      <label>植物
        <select name="plant_id" required id="photo-plant-select"></select>
      </label>
      <label>拍摄日期<input name="shot_at" type="date"></label>
      <label>照片<input type="file" name="photo" accept="image/*" required></label>
      <label>备注<textarea name="note" rows="3"></textarea></label>
      <label class="inline-check"><input type="checkbox" name="make_avatar" value="1"> 设为植物封面</label>
      <label class="inline-check"><input type="checkbox" name="ai_diagnose" value="1"> 上传后立即 AI 问诊</label>
      <div class="dialog-actions">
        <button type="button" class="ghost-btn" data-close-dialog="photo-dialog">取消</button>
        <button type="submit" class="primary-btn">上传</button>
      </div>
    </form>
  </dialog>

  <dialog id="reminder-dialog" class="plant-dialog">
    <form method="dialog" id="reminder-form" class="dialog-form">
      <h3>完成提醒并记一笔</h3>
      <input type="hidden" name="reminder_id">
      <label>处理日期<input name="action_at" type="date"></label>
      <input type="hidden" name="mood_tag">
      <div id="reminder-mood-tag-list" class="tag-chip-list"></div>
      <label>备注<textarea name="note" rows="3" placeholder="例如：今天已浇透，叶片状态不错"></textarea></label>
      <div class="dialog-actions">
        <button type="button" class="ghost-btn" data-close-dialog="reminder-dialog">取消</button>
        <button type="submit" class="primary-btn">确认完成</button>
      </div>
    </form>
  </dialog>

  <dialog id="analysis-dialog" class="plant-dialog">
    <div class="dialog-form">
      <h3>AI 分析结果</h3>
      <pre id="analysis-output" class="analysis-output"></pre>
      <div class="dialog-actions">
        <button type="button" class="primary-btn" data-close-dialog="analysis-dialog">关闭</button>
      </div>
    </div>
  </dialog>

  <dialog id="interaction-dialog" class="plant-dialog interaction-dialog">
    <div class="dialog-form">
      <div class="interaction-header">
        <div>
          <h3 id="interaction-title">本次交互详情</h3>
          <div id="interaction-subtitle" class="photo-meta">等待开始...</div>
        </div>
        <div class="interaction-actions">
          <button type="button" id="btn-copy-interaction" class="ghost-btn">复制</button>
          <button type="button" class="ghost-btn" data-close-dialog="interaction-dialog">关闭</button>
        </div>
      </div>
      <div id="interaction-status" class="interaction-status">待开始</div>
      <pre id="interaction-output" class="analysis-output interaction-output"></pre>
    </div>
  </dialog>

  <dialog id="confirm-dialog" class="plant-dialog confirm-dialog">
    <div class="dialog-form">
      <h3 id="confirm-title">请确认</h3>
      <div id="confirm-message" class="confirm-message">确认继续吗？</div>
      <pre id="confirm-detail" class="analysis-output confirm-detail"></pre>
      <div class="dialog-actions">
        <button type="button" id="btn-copy-confirm" class="ghost-btn">复制</button>
        <button type="button" id="btn-cancel-confirm" class="ghost-btn">取消</button>
        <button type="button" id="btn-ok-confirm" class="primary-btn">确认</button>
      </div>
    </div>
  </dialog>

  <dialog id="name-choice-dialog" class="plant-dialog">
    <div class="dialog-form">
      <h3>名称校准</h3>
      <div id="name-choice-message" class="confirm-message">请选择具体植物名称</div>
      <div id="name-choice-list" class="choice-list"></div>
      <div class="dialog-actions">
        <button type="button" class="ghost-btn" data-close-dialog="name-choice-dialog">取消</button>
      </div>
    </div>
  </dialog>

  <script src="plant_home.js"></script>
</body>
</html>