From 61f5c545953bb4ee20b123bf9671ac35d7f1f3c1 Mon Sep 17 00:00:00 2001
From: "Somhairle H. Marisol" <muqiu-han@outlook.com>
Date: Fri, 18 Sep 2026 12:03:32 +0800
Subject: [变更性质] feat(frontend) [新增功能] round3 页面组件全量迁移
 shadcn-svelte（12 页面 + Modal/DatasetWizard/DatasetCard/Status） [实现方案]
 .btn→Button、.banner→Alert、table.data→Table.Root、.badge→Badge、.tabs→Tabs.Root、.metric-card/form.card→Card.Root；ProjectStrategyTab
 div 配对修复 [影响范围] src/pages/*.svelte、src/components/*.svelte
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/ProjectStrategyTab.svelte | 36 +++++++++++++++-------------
 1 file changed, 20 insertions(+), 16 deletions(-)

(limited to 'frontend/src/pages/ProjectStrategyTab.svelte')

diff --git a/frontend/src/pages/ProjectStrategyTab.svelte b/frontend/src/pages/ProjectStrategyTab.svelte
index 0df9f1a..8614cc0 100644
--- a/frontend/src/pages/ProjectStrategyTab.svelte
+++ b/frontend/src/pages/ProjectStrategyTab.svelte
@@ -5,6 +5,10 @@
   import Modal from '../components/Modal.svelte';
   import { Button } from '$lib/components/ui/button';
   import { Input } from '$lib/components/ui/input';
+  import { Label } from '$lib/components/ui/label';
+  import { Alert } from '$lib/components/ui/alert';
+  import { Badge } from '$lib/components/ui/badge';
+  import * as Card from '$lib/components/ui/card';
   import { projectsStore } from '../lib/listsStore.svelte';
   import {
     getProject,
@@ -261,14 +265,14 @@
   <Status busy={initBusy} error={initErr} busyText="加载策略草稿…" empty={null} />
 
   {#if !initBusy && !initErr}
-    <div class="card stack">
+    <Card.Root size="sm" class="stack">
       <div class="spread">
         <h2>策略代码（Backtrader Python）</h2>
         <span class="save-status" role="status">
           {saveStatus === 'saved' && `已保存${saveMsg ? ` · ${saveMsg}` : ''}`}
-          {#if saveStatus === 'dirty'}<span class="badge warn">有未保存修改</span>{/if}
-          {#if saveStatus === 'saving'}<span class="badge teal">保存中…</span>{/if}
-          {#if saveStatus === 'conflict'}<span class="badge danger">冲突</span>{/if}
+          {#if saveStatus === 'dirty'}<Badge variant="outline">有未保存修改</Badge>{/if}
+          {#if saveStatus === 'saving'}<Badge variant="secondary">保存中…</Badge>{/if}
+          {#if saveStatus === 'conflict'}<Badge variant="destructive">冲突</Badge>{/if}
         </span>
       </div>
       <p class="hint">
@@ -298,23 +302,23 @@
       <Status busy={false} error={snapshotErr} empty={snapshotMsg} />
 
       {#if conflictServer}
-        <div class="banner warn" role="alert">
+        <Alert variant="default" class="bg-[var(--warn-soft)] border-[#f0ddb4]">
           <span aria-hidden="true">⚠</span>
           <span>
             服务器上的草稿已被其他修改更新（代 {conflictServer.generation}），你正在编辑的本地内容不会自动覆盖。
           </span>
-        </div>
+        </Alert>
         <DiffView before={conflictServer.code} after={code} beforeLabel="服务器" afterLabel="本机" />
         <div class="row">
           <Button onclick={keepMine}>保留本机修改（覆盖服务器）</Button>
           <Button variant="outline" onclick={loadServer}>采用服务器版本</Button>
         </div>
       {/if}
-    </div>
+    </Card.Root>
 
     <div class="stack">
       <h2>AI 助手</h2>
-      <div class="card stack">
+      <Card.Root size="sm" class="stack">
         <label for="ai-instruction">希望 AI 帮你做什么？<span class="hint">例如：把均线周期改为两个可调参数并解释影响</span></label>
         <textarea id="ai-instruction" rows="3" bind:value={instruction} placeholder="描述对策略的修改意图，AI 返回完整新源码与差异预览"></textarea>
         <div class="row">
@@ -323,10 +327,10 @@
           </Button>
         </div>
         {#if aiErr}
-          <div class="banner error" role="alert">
+          <Alert variant="destructive" class="bg-[var(--danger-soft)] border-[#f2c7c7]">
             <span aria-hidden="true">⚠</span>
             <span>{aiErr}</span>
-          </div>
+          </Alert>
         {/if}
 
         {#if aiResult}
@@ -352,18 +356,18 @@
               </Button>
               <Button variant="ghost" disabled={aiAcceptBusy} onclick={discardAI}>放弃建议</Button>
               {#if aiResult.base_generation !== baseGeneration}
-                <span class="banner warn" role="alert">草稿代 {aiResult.base_generation} 与当前 {baseGeneration} 不一致，接受会失败；请重新发起说明</span>
+                <span class="text-[var(--warn)]">草稿代 {aiResult.base_generation} 与当前 {baseGeneration} 不一致，接受会失败；请重新发起说明</span>
               {/if}
               {#if aiAcceptErr}
-                <div class="banner error" role="alert">{aiAcceptErr}</div>
+                <Alert variant="destructive" class="bg-[var(--danger-soft)] border-[#f2c7c7]">{aiAcceptErr}</Alert>
               {/if}
             </div>
           </div>
         {/if}
         {#if aiNote}
-          <div class="banner info">{aiNote}</div>
+          <Alert variant="default" class="bg-[var(--brand-soft)] border-[#bfe9db]">{aiNote}</Alert>
         {/if}
-      </div>
+      </Card.Root>
     </div>
 
     <div class="stack">
@@ -373,7 +377,7 @@
         <Status busy={false} empty="还没有版本快照" emptyHint="保存第一个快照后可以在历史中查看完整代码与恢复" />
       {/if}
       {#if !versionsBusy && versions.length > 0}
-        <div class="card" style="padding:0.4rem 0.6rem">
+        <div class="px-3 py-2 rounded-[var(--radius-lg)] border border-border bg-card">
           <table class="data">
             <thead>
               <tr>
@@ -393,7 +397,7 @@
                     <span class="hint">版本代 {v.hash?.slice(0, 8) || '—'}</span>
                   </td>
                   <td class="num">{v.hash?.slice(0, 12)}</td>
-                  <td><span class="badge grey">{versionSourceLabel[v.source]}</span></td>
+                  <td><Badge variant="outline">{versionSourceLabel[v.source]}</Badge></td>
                   <td>
                     <div class="row">
                       <Button variant="outline" size="sm" onclick={() => void compareWithDraft(v)}>对比当前</Button>
-- 
cgit v1.2.3