ChatESG_new

ESG永續報告書生成系統規劃

前端標準化工作項目

1. 身份驗證相關頁面

   • 登入頁面 (Login.vue)
     • 登入表單
     • 忘記密碼功能
     • 組織選擇下拉選單 (暫時不用)
     • 記住登入狀態選項
   • 註冊頁面 (Signup.vue)
     • 註冊表單
     • 組織選擇
     • 驗證郵件功能 (暫時不需驗證)
     • 註冊後，使用者的組織加入申請會送到組織的管理成員介面，等待組織管理員審核，審核通過後，使用者才算完成註冊。
   • 創建組織頁面 (CreateOrganization.vue)
     • 創建組織表單
     • 組織名稱輸入
     • 組織描述輸入
     • 組織標誌上傳
     • 組織類型選擇

2. 組織管理相關頁面

   • 組織管理主頁面 (OrganizationDashboard.vue)
     • 組織基本訊息展示 (組織名稱、組織擁有者、組織成員數量、組織報告書數量、組織身份組數量)
     • 成員列表與管理
     • 報告書列表
     • 快速操作按鈕（新增報告書、邀請成員等）
   • 組織設置頁面 (OrganizationSettings.vue)
     • 組織基本訊息編輯
     • 成員權限管理
     • 組織刪除功能（僅限擁有者）
     • 身份組管理，管理身份組設置、分配成員至身份組，新增、刪除、編輯身份組
     • 成員多重身份組管理（允許一個成員擁有多個身份組，如管理員和資訊部） (系統在權限判斷上需要明確定義，避免權限衝突或遺漏。) 擁有者>管理員
     • 擁有者身份組管理（每個組織僅限一位擁有者），擁有者也會有管理員身份組
   • 操作日誌與歷史記錄頁面 (AuditLog.vue)
     • 獨立記錄關鍵操作，如成員變更、身份組編輯、組織設置更改等，供組織管理員查看，便於問題追蹤和安全稽核。
   • 成員管理頁面 (MemberManagement.vue)
     • 成員列表
     • 權限(身份組)設置
     • 成員加入審核功能
     • 成員邀請功能
     • 成員移除功能
     • 成員身份組分配

3. 報告書相關頁面

   • 報告書列表頁面 (ReportList.vue)
     • 報告書卡片式展示
     • 篩選功能（按狀態、時間等）
     • 快速操作按鈕
     • 複製現有的報告書(建立副本)
   • 報告書創建頁面 (CreateReport.vue)
     • 報告書基本信息設置
     • 產業選擇
     • 準則模板選擇
     • 公司資料選擇
   • 報告書編輯頁面 (ReportEditor.vue)
     • 左側章節導航（支持拖移調整順序）
     • 大章節可收合子章節，點擊大章節可在右側編輯窗查看所有內容
       • 前端實作上需要考慮效能問題，若大章節內容過多，一次載入可能會影響使用者體驗。
       • 延遲加載 (Lazy Loading)：只在用戶需要查看時才加載子章節內容。
       • 虛擬滾動 (Virtual Scrolling)：對於長列表或大章節內容，只渲染可見區域的內容。
     • 點擊子章節，右側編輯窗僅顯示該子章節內容
     • 右側富文本編輯器
     • 工具列功能：
       • 加入表格
       • 插入圖片
       • 重新使用AI生成內容
     • 圖表插入功能
     • 圖片插入功能，允許在報告書中嵌入圖片
     • 表格編輯功能，方便使用者輸入和管理表格數據
     • 自動儲存設定：每30秒會自動存檔
       • 自動儲存的頻率在報告書編輯頁面可調整
       • 若使用者正在輸入不會存檔，當使用者停止輸入30秒(使用者可自訂)後，自動存檔
       • 使用者可以自訂自動儲存的頻率
       • 有手動儲存的按鈕
     • 版本歷史記錄（使用 Tiptap 和 Y.js 實現）
       • 需要考慮版本數量過多時的儲存和載入效率問題。
     • 準則檢驗功能 (使用者可選擇，針對報告書全文還是特定章節進行檢驗)
     • 使用 Delta 格式進行版本控管，支持回朔功能，類似 Google Docs 的「檢視版本紀錄」
     • 大章節與小章節結構支持 例如：
       • 永續發展策略 (有四個章節)
         • A. 永續治理架構
         • B. 永續發展藍圖
         • C. 重大主題分析
         • D. 利害關係人溝通
       • 稅務管理 (只有一個章節)
         • A. 稅務管理
     • 註解與評論功能：每一個子章節都可以加入註解功能，方便協作者在報告書內容上進行註解與討論
   • 報告書設定頁面 (ReportSettings.vue)
     • 僅限組織管理員進入
     • 報告書發布與分享管理
       • 完成審核的報告書發布功能
       • 設定公開或僅限組織內查看
     • 章節權限設置：設定不同成員對報告書"各大章節"的權限
       • 編輯者（Editor）：可以編輯被授權的章節，並上傳圖表（這些權限可以透過身份組設定）
       • 審核者（Reviewer）：可以審核指定的章節，並添加審核意見（這些權限可以透過身份組設定）
       • 檢視者（Viewer）：只能查看內容，無法進行編輯或審核（這些權限可以透過身份組設定）
     • 刪除報告書功能
       • 允許管理員刪除報告書

4. 資產管理相關頁面

   • 準則模板管理頁面 (StandardTemplateManagement.vue)
     • 準則列表展示
     • 準則分類管理
     • 模板創建和編輯功能
     • 準則關聯性說明：在勾選準則時，能提供準則之間的關聯性和適用性說明
   • 公司資料管理頁面 (CompanyInfoManagement.vue)
     • 公司基本資料表單 (使用 Json 格式)
     • 分章節資料管理

5. 審核相關頁面

   • 審核管理頁面 (ReviewManagement.vue)
     • 待審核列表
     • 審核歷史記錄
     • 審核意見管理
     • 審核流程管理：記錄誰審核了哪個章節、審核的時間以及詳細的審核狀態（例如：「待主管審核」、「審核中」、「退回修改」等）
   • 審核詳情頁面 (ReviewDetail.vue)
     • 報告書內容展示
     • 審核意見添加
     • 修改建議標註

6. 系統設置頁面 (SystemSettings.vue)

   • 功能：
     • 查看系統狀態
       • 組織數量
       • 成員數量
       • 報告書數量
       • 身份組數量
     • 系統日誌檢視
     • 系統資源使用情況
     • 系統版本信息
     • 系統配置管理
       • 資料庫連接設置
       • API 密鑰管理
       • 其他系統參數設置

技術要點建議：

• 狀態管理
  • 使用 Vuex 管理全局狀態
  • 實現用戶身份驗證狀態持久化
• 路由管理
  • 實現路由守衛
  • 權限控制路由訪問
• 數據持久化
  • 使用 LocalStorage 實現數據暫存
  • 定期自動保存功能
• 組件設計
  • 設計可複用的通用組件
  • 實現組件間的數據通信
• API 設計
  • 使用 FastAPI 實現後端 API
  • 提供高效的數據處理和響應
  • 支持異步請求處理