feat: complete grounded digital avatar chat experience

digital-avatar-app/src/views/KnowledgeManage.vue

@@ -31,22 +31,21 @@
           <p v-if="uploadError" class="error-text">{{ uploadError }}</p>
         </div>
 
-        <div class="table-scroll">
-          <table class="knowledge-table">
-            <thead><tr><th>文档</th><th>类型</th><th>大小</th><th>状态</th><th>上传时间</th><th>操作</th></tr></thead>
-            <tbody v-if="docs.length">
-              <tr v-for="doc in docs" :key="doc.id">
-                <td><div class="file-cell"><span class="doc-icon">{{ fileEmoji(doc.fileType) }}</span><strong>{{ doc.filename }}</strong></div></td>
-                <td>{{ doc.fileType.toUpperCase() }}</td>
-                <td>{{ formatSize(doc.fileSize) }}</td>
-                <td><span class="status-pill" :class="{ pending: !doc.vectorized }">{{ doc.vectorized ? `已向量化 · ${doc.chunkCount || 0} 段` : '处理中' }}</span></td>
-                <td>{{ formatDate(doc.createdAt) }}</td>
-                <td><button class="table-delete" @click="removeDoc(doc.id)">删除</button></td>
-              </tr>
-            </tbody>
-          </table>
-          <div v-if="!docs.length" class="table-empty">📂 暂无文档，先上传一个知识文件</div>
+        <div v-if="docs.length" class="mobile-card-list">
+          <article v-for="doc in docs" :key="doc.id" class="knowledge-card">
+            <div class="card-icon">{{ fileEmoji(doc.fileType) }}</div>
+            <div class="card-content">
+              <div class="card-title-row">
+                <strong>{{ doc.filename }}</strong>
+                <span class="status-pill" :class="{ pending: !doc.vectorized }">{{ doc.vectorized ? '已入库' : '处理中' }}</span>
+              </div>
+              <p class="card-meta">{{ doc.fileType.toUpperCase() }} · {{ formatSize(doc.fileSize) }} · {{ formatDate(doc.createdAt) }}</p>
+              <p class="card-detail">{{ doc.vectorized ? `已切分 ${doc.chunkCount || 0} 段，可用于对话` : '正在解析并建立知识索引' }}</p>
+            </div>
+            <button class="card-delete" @click="removeDoc(doc.id)">删除</button>
+          </article>
         </div>
+        <div v-else class="card-empty">📂 暂无文档，先上传一个知识文件</div>
 
         <section class="search-section">
           <h3 class="section-title">向量检索测试</h3>
@@ -57,21 +56,22 @@
       </section>
 
       <section v-else class="knowledge-panel">
-        <div class="panel-heading"><div><h3 class="section-title">标准问答对</h3><p>命中后优先使用标准答案，不调用 Qwen。</p></div><button class="add-qa-btn" @click="goAddQa">＋ 添加</button></div>
-        <div class="table-scroll">
-          <table class="knowledge-table qa-table">
-            <thead><tr><th>问题</th><th>标准答案</th><th>状态</th><th>更新时间</th><th>操作</th></tr></thead>
-            <tbody v-if="qaPairs.length">
-              <tr v-for="qa in qaPairs" :key="qa.id" :class="{ 'qa-disabled': qa.enabled === false }">
-                <td class="question-cell">{{ qa.question }}</td><td class="answer-cell">{{ qa.answer }}</td>
-                <td><label class="switch" :title="qa.enabled === false ? '已停用' : '已启用'"><input type="checkbox" :checked="qa.enabled !== false" @change="toggleQa(qa, $event)" /><span class="slider"></span></label></td>
-                <td>{{ formatDate(qa.updatedAt || qa.createdAt) }}</td>
-                <td><div class="row-actions"><button class="qa-edit" @click="goEditQa(qa)">编辑</button><button class="qa-del" @click="removeQa(qa.id)">删除</button></div></td>
-              </tr>
-            </tbody>
-          </table>
-          <div v-if="!qaPairs.length" class="table-empty">💡 暂无问答对，添加后分身会优先按此作答</div>
+        <div class="panel-heading"><div><h3 class="section-title">标准问答对</h3><p>相似问法命中后优先使用标准答案。</p></div><button class="add-qa-btn" @click="goAddQa">＋ 添加</button></div>
+        <div v-if="qaPairs.length" class="mobile-card-list qa-card-list">
+          <article v-for="qa in qaPairs" :key="qa.id" class="knowledge-card qa-card" :class="{ 'qa-disabled': qa.enabled === false }">
+            <div class="card-content">
+              <div class="qa-card-head">
+                <span class="qa-label">标准问题</span>
+                <label class="switch" :title="qa.enabled === false ? '已停用' : '已启用'"><input type="checkbox" :checked="qa.enabled !== false" @change="toggleQa(qa, $event)" /><span class="slider"></span></label>
+              </div>
+              <strong class="qa-question">{{ qa.question }}</strong>
+              <p class="qa-answer">{{ qa.answer }}</p>
+              <p class="card-meta">更新于 {{ formatDate(qa.updatedAt || qa.createdAt) }}</p>
+              <div class="qa-card-actions"><button class="qa-edit" @click="goEditQa(qa)">编辑</button><button class="qa-del" @click="removeQa(qa.id)">删除</button></div>
+            </div>
+          </article>
         </div>
+        <div v-else class="card-empty">💡 暂无问答对，添加后分身会优先按此作答</div>
       </section>
     </template>
   </div>
@@ -258,20 +258,23 @@ onMounted(async () => {
 .tab-btn b { margin-left: 4px; font-size: 12px; color: #B0896C; }
 .tab-btn.active { background: white; border-color: #F97316; color: #F97316; font-weight: 700; }
 .tab-btn.active b { color: #F97316; }
-.knowledge-panel { padding: 0 20px; }
+.knowledge-panel { min-width: 0; padding: 0 16px; }
 .panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0 12px; }
 .panel-heading p { margin: -5px 0 0; color: #9398AE; font-size: 12px; }
-.table-scroll { max-height: 420px; overflow: auto; border: 1px solid #F1E1D3; border-radius: 14px; background: white; }
-.knowledge-table { width: 100%; min-width: 720px; border-collapse: collapse; text-align: left; font-size: 13px; }
-.knowledge-table th { position: sticky; top: 0; z-index: 1; padding: 12px 14px; background: #FFF8F1; color: #8B6B58; font-weight: 600; white-space: nowrap; }
-.knowledge-table td { padding: 13px 14px; border-top: 1px solid #F5EEE7; color: #6B7280; vertical-align: middle; }
-.knowledge-table tr.qa-disabled { opacity: .55; }
-.file-cell { display: flex; align-items: center; gap: 9px; min-width: 190px; color: #27201C; }.file-cell strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.status-pill { display: inline-flex; padding: 4px 8px; border-radius: 999px; color: #15803D; background: #ECFDF3; font-size: 11px; white-space: nowrap; }.status-pill.pending { color: #B45309; background: #FFFBEB; }
-.table-delete { border: 0; color: #EF4444; background: #FEF2F2; border-radius: 7px; padding: 6px 10px; cursor: pointer; }
-.table-empty { padding: 48px 20px; color: #9398AE; text-align: center; }
-.question-cell { min-width: 190px; max-width: 280px; color: #27201C !important; font-weight: 600; }.answer-cell { min-width: 240px; max-width: 360px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.row-actions { display: flex; gap: 6px; white-space: nowrap; }
+.mobile-card-list { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; min-width: 0; gap: 10px; }
+.knowledge-card { display: flex; align-items: center; width: 100%; min-width: 0; box-sizing: border-box; gap: 11px; padding: 14px; background: #fff; border: 1px solid #F1E1D3; border-radius: 16px; box-shadow: 0 5px 16px rgba(112, 62, 22, .04); }
+.card-icon { flex: 0 0 auto; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: #FFF3E6; font-size: 22px; }
+.card-content { min-width: 0; flex: 1; overflow: hidden; }
+.card-title-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
+.card-title-row strong { min-width: 0; flex: 1; overflow: hidden; color: #27201C; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
+.status-pill { flex: 0 0 auto; display: inline-flex; padding: 4px 7px; border-radius: 999px; color: #15803D; background: #ECFDF3; font-size: 10px; white-space: nowrap; }.status-pill.pending { color: #B45309; background: #FFFBEB; }
+.card-meta, .card-detail { margin: 5px 0 0; color: #9398AE; font-size: 11px; line-height: 1.4; }.card-detail { color: #8B6B58; }
+.card-delete { flex: 0 0 auto; align-self: center; border: 0; color: #EF4444; background: #FEF2F2; border-radius: 8px; padding: 7px 9px; font-size: 12px; cursor: pointer; }
+.card-empty { padding: 42px 16px; border: 1px dashed #F1D9C3; border-radius: 16px; color: #9398AE; background: #fff; font-size: 14px; text-align: center; }
+.qa-card { align-items: stretch; }.qa-card.qa-disabled { opacity: .58; }
+.qa-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }.qa-label { color: #C15F18; font-size: 11px; font-weight: 700; }
+.qa-question { display: block; color: #27201C; font-size: 15px; line-height: 1.5; }.qa-answer { display: -webkit-box; margin: 7px 0 0; overflow: hidden; color: #6B7280; font-size: 13px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
+.qa-card-actions { display: flex; gap: 8px; margin-top: 11px; }
 
 .page-header {
   display: flex;
@@ -304,7 +307,7 @@ onMounted(async () => {
 
 /* 上传区 */
 .upload-section {
-  padding: 16px 20px;
+  padding: 16px 0;
 }
 
 .upload-zone {
@@ -369,7 +372,7 @@ onMounted(async () => {
 .docs-section,
 .qa-section,
 .search-section {
-  padding: 0 20px 16px;
+  padding: 16px 0 0;
 }
 
 .section-title {
@@ -455,6 +458,7 @@ onMounted(async () => {
 }
 
 .search-input {
+  min-width: 0;
   flex: 1;
   border: 1px solid #E5E7EB;
   border-radius: 8px;
@@ -483,6 +487,17 @@ onMounted(async () => {
   flex-shrink: 0;
 }
 
+@media (max-width: 520px) {
+  .knowledge-panel { padding: 0 12px; }
+  .knowledge-card { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: start; gap: 10px; padding: 13px; }
+  .card-content { grid-column: 2; }
+  .card-delete { grid-column: 2; justify-self: end; margin-top: -2px; }
+  .card-title-row { align-items: flex-start; flex-wrap: wrap; gap: 5px 7px; }
+  .status-pill { order: 2; }
+  .search-bar { gap: 8px; }
+  .search-btn { width: 68px; }
+}
+
 .search-btn:disabled {
   opacity: 0.6;
   cursor: not-allowed;