optimize ui

2026-04-10 21:46:25 -04:00
parent ce67ae56bd
commit 5d872f7bf1
1 changed files with 81 additions and 12 deletions
--- a/content.js
+++ b/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">
-                    <h3>创建分类</h3>
+                <div class="teams-alias-panel ${chatOrganizerState.createPanelOpen ? "" : "teams-alias-collapsed"}">
+                    <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">
-                    <h3>加入聊天</h3>
+                <div class="teams-alias-panel ${chatOrganizerState.addPanelOpen ? "" : "teams-alias-collapsed"}">
+                    <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">
-                    <h3>分类内容</h3>
+                    <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>