optimize ui

content.js

@@ -26,7 +26,9 @@ const chatOrganizerState = {
     draftCategoryName: "",
     draftChatId: "",
     visibleChatsExpanded: false,
-    expandedCategoryIds: {}
+    expandedCategoryIds: {},
+    createPanelOpen: false,
+    addPanelOpen: false
 };
 
 function getOrganizerRoot() {
@@ -294,6 +296,22 @@ function toggleVisibleChatsExpanded() {
     renderChatOrganizer();
 }
 
+function toggleCreatePanel() {
+    chatOrganizerState.createPanelOpen = !chatOrganizerState.createPanelOpen;
+    if (chatOrganizerState.createPanelOpen) {
+        chatOrganizerState.addPanelOpen = false;
+    }
+    renderChatOrganizer();
+}
+
+function toggleAddPanel() {
+    chatOrganizerState.addPanelOpen = !chatOrganizerState.addPanelOpen;
+    if (chatOrganizerState.addPanelOpen) {
+        chatOrganizerState.createPanelOpen = false;
+    }
+    renderChatOrganizer();
+}
+
 function renderChatCard(chatId, categoryId) {
     const meta = getChatMeta(chatId) || { id: chatId, name: chatId, avatarUrl: "" };
     const avatar = meta.avatarUrl
@@ -417,6 +435,20 @@ function ensureChatOrganizerUI() {
                 gap: 16px;
             }
 
+            .teams-alias-toolbar {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                gap: 12px;
+                padding: 16px 20px 0;
+            }
+
+            .teams-alias-toolbar-actions {
+                display: flex;
+                gap: 10px;
+                flex-wrap: wrap;
+            }
+
             .teams-alias-panel {
                 border: 1px solid #e5e7eb;
                 border-radius: 14px;
@@ -459,6 +491,17 @@ function ensureChatOrganizerUI() {
                 color: #fff;
             }
 
+            .teams-alias-primary-button {
+                border: none;
+                border-radius: 10px;
+                padding: 9px 14px;
+                font-size: 13px;
+                cursor: pointer;
+                background: #2563eb;
+                color: #fff;
+                font-weight: 600;
+            }
+
             .teams-alias-category-list,
             .teams-alias-visible-list,
             .teams-alias-chat-list {
@@ -592,6 +635,13 @@ function ensureChatOrganizerUI() {
                 display: none;
             }
 
+            .teams-alias-main-title {
+                margin: 0;
+                font-size: 14px;
+                font-weight: 600;
+                color: #334155;
+            }
+
             @media (max-width: 900px) {
                 .teams-alias-modal {
                     left: 12px;
@@ -635,6 +685,7 @@ function ensureChatOrganizerUI() {
             const input = root.querySelector('[data-role="new-category-name"]');
             createCategory(input?.value || "");
             chatOrganizerState.draftCategoryName = "";
+            chatOrganizerState.createPanelOpen = false;
             return;
         }
 
@@ -643,6 +694,16 @@ function ensureChatOrganizerUI() {
             return;
         }
 
+        if (action === "toggle-create-panel") {
+            toggleCreatePanel();
+            return;
+        }
+
+        if (action === "toggle-add-panel") {
+            toggleAddPanel();
+            return;
+        }
+
         if (action === "toggle-category") {
             toggleCategoryExpanded(actionElement.getAttribute("data-category-id"));
             return;
@@ -657,6 +718,7 @@ function ensureChatOrganizerUI() {
             const input = root.querySelector('[data-role="chat-id-input"]');
             addChatToCategory(chatOrganizerState.selectedCategoryId, input?.value || "");
             chatOrganizerState.draftChatId = "";
+            renderChatOrganizer();
             return;
         }
 
@@ -750,16 +812,26 @@ function renderChatOrganizer() {
                 <h2>聊天分类管理</h2>
                 <button class="teams-alias-close" data-action="close-modal">×</button>
             </div>
+            <div class="teams-alias-toolbar">
+                <p class="teams-alias-main-title">分类是主视图，添加和识别列表作为辅助面板使用。</p>
+                <div class="teams-alias-toolbar-actions">
+                    <button class="teams-alias-primary-button" data-action="toggle-create-panel">${chatOrganizerState.createPanelOpen ? "收起新建" : "新建分类"}</button>
+                    <button class="teams-alias-primary-button" data-action="toggle-add-panel">${chatOrganizerState.addPanelOpen ? "收起添加" : "添加聊天"}</button>
+                </div>
+            </div>
             <div class="teams-alias-modal-body">
-                <div class="teams-alias-panel">
+                <div class="teams-alias-panel ${chatOrganizerState.createPanelOpen ? "" : "teams-alias-collapsed"}">
-                    <h3>创建分类</h3>
+                    <h3>新建分类</h3>
                     <div class="teams-alias-row">
                         <input type="text" placeholder="例如：重点客户 / 项目群" data-role="new-category-name" value="${escapeHtml(chatOrganizerState.draftCategoryName)}">
                         <button data-action="create-category">创建</button>
                     </div>
                 </div>
-                <div class="teams-alias-panel">
+                <div class="teams-alias-panel ${chatOrganizerState.addPanelOpen ? "" : "teams-alias-collapsed"}">
-                    <h3>加入聊天</h3>
+                    <div class="teams-alias-section-header">
+                        <h3>添加聊天</h3>
+                        <button class="teams-alias-ghost-button" data-action="toggle-visible-chats">${chatOrganizerState.visibleChatsExpanded ? "收起识别列表" : "展开识别列表"}</button>
+                    </div>
                     <div class="teams-alias-row">
                         <select data-role="category-select">
                             <option value="">请选择分类</option>
@@ -769,16 +841,13 @@ function renderChatOrganizer() {
                         <button data-action="add-chat-by-id">按 ID 添加</button>
                     </div>
                     <div class="teams-alias-feedback">${escapeHtml(chatOrganizerState.feedback || "点击聊天卡片会在原 Teams 界面中打开会话。")}</div>
-                </div>
-                <div class="teams-alias-panel">
-                    <div class="teams-alias-section-header">
-                        <h3>当前识别到的聊天</h3>
-                        <button class="teams-alias-ghost-button" data-action="toggle-visible-chats">${chatOrganizerState.visibleChatsExpanded ? "收起" : "展开"}</button>
-                    </div>
                     <div class="teams-alias-visible-list ${chatOrganizerState.visibleChatsExpanded ? "" : "teams-alias-collapsed"}">${visibleChatsMarkup}</div>
                 </div>
                 <div class="teams-alias-panel">
+                    <div class="teams-alias-section-header">
                         <h3>分类内容</h3>
+                        <span class="teams-alias-feedback">${chatOrganizerState.categories.length} 个分类</span>
+                    </div>
                     <div class="teams-alias-category-list">${categoriesMarkup}</div>
                 </div>
             </div>