Ver código fonte

修改样式

yangg 5 meses atrás
pai
commit
554c4eea07
2 arquivos alterados com 200 adições e 48 exclusões
  1. 73 34
      src/components/KnowledgeConfig/index.vue
  2. 127 14
      src/views/report.vue

+ 73 - 34
src/components/KnowledgeConfig/index.vue

@@ -37,44 +37,16 @@
 </template>
 
 <script setup>
-import { ref, reactive } from 'vue';
+import { ref, reactive, onMounted } from 'vue';
 import { message } from 'ant-design-vue';
+import axios from 'axios';
 import upIcon from '@/assets/svg/ups.svg';
 import downIcon from '@/assets/svg/down.svg';
 
-const KNOWLEDGE_GROUPS = [
-  {
-    label: '产品文档',
-    key: 'product',
-    items: [
-      { label: 'Ant Design', value: 'antd', description: '企业级 UI 设计语言' },
-      { label: 'Vue.js', value: 'vue', description: '渐进式 JavaScript 框架' },
-      { label: 'React', value: 'react', description: '用于构建用户界面的库' }
-    ]
-  },
-  {
-    label: '技术文档',
-    key: 'tech',
-    items: [
-      { label: 'JavaScript', value: 'js', description: '编程语言基础' },
-      { label: 'TypeScript', value: 'ts', description: '类型系统扩展' },
-      { label: 'Node.js', value: 'node', description: '服务端运行时' }
-    ]
-  },
-  {
-    label: '行业资料',
-    key: 'industry',
-    items: [
-      { label: '前端开发', value: 'frontend', description: 'Web 开发技术' },
-      { label: '后端架构', value: 'backend', description: '服务器端开发' },
-      { label: '人工智能', value: 'ai', description: 'AI 与机器学习' }
-    ]
-  }
-];
-
+// 将 KNOWLEDGE_GROUPS 改为响应式数据
+const knowledgeGroups = ref([]);
 const isPanelOpen = ref(false);
 const saving = ref(false);
-const knowledgeGroups = ref(KNOWLEDGE_GROUPS);
 
 // 用于存储每个分组的选中状态
 const selectedKnowledge = reactive({
@@ -111,8 +83,74 @@ const initConfig = () => {
   }
 };
 
-// 组件挂载时加载配置
-initConfig();
+// 添加获取知识库子项的方法
+const fetchKnowledgeItems = async (kbId) => {
+  try {
+    // 方案1:使用 URLSearchParams
+    const params = new URLSearchParams();
+    params.append('page', 1);
+    params.append('kb_id', kbId);
+    params.append('pageSize', 9999);
+    
+    const response = await axios.post(`http://58.246.234.210:8084/docType/selectTypeList`, 
+      params,
+      {
+        headers: {
+          'Content-Type': 'application/x-www-form-urlencoded'
+        }
+      }
+    );
+    return response.data.data.dataList || []; // 假设返回数据在 records 字段中,根据实际调整
+  } catch (error) {
+    console.error('获取知识库子项失败:', error);
+    return [];
+  }
+};
+
+// 修改获取知识库信息的方法
+const fetchKnowledgeGroups = async () => {
+  try {
+    const userId = 2;
+    const response = await axios.post(`http://58.246.234.210:8084/kbm/selectBucketInfo`, {
+      user_id: userId
+    });
+    
+    // 获取每个知识库的子项
+    const groupsWithItems = await Promise.all(
+      response.data.data.map(async (group) => {
+        const items = await fetchKnowledgeItems(group.id);
+        console.log(items);
+        return {
+          label: group.name,
+          key: group.id,
+          items: items.map(item => ({
+            label: item.name,
+            value: item.id,
+           /*  description: item.desc */
+          }))
+        };
+      })
+    );
+    
+    knowledgeGroups.value = groupsWithItems;
+    
+    // 初始化选中状态对象
+    knowledgeGroups.value.forEach(group => {
+      if (!selectedKnowledge[group.key]) {
+        selectedKnowledge[group.key] = [];
+      }
+    });
+  } catch (error) {
+    message.error('获取知识库信息失败');
+    console.error('获取知识库信息失败:', error);
+  }
+};
+
+// 组件挂载时获取数据
+onMounted(async () => {
+  await fetchKnowledgeGroups();
+  initConfig(); // 在获取数据后再初始化配置
+});
 </script>
 
 <style scoped>
@@ -197,6 +235,7 @@ initConfig();
 
 :deep(.ant-checkbox-group) {
   width: 100%;
+  flex-direction: column;
 }
 
 :deep(.ant-checkbox-wrapper + .ant-checkbox-wrapper) {

+ 127 - 14
src/views/report.vue

@@ -224,7 +224,7 @@
       <div class="input-container">
         <!-- 标签栏 -->
         <div class="tabs-wrapper">
-          <div class="tab-item active">
+          <!-- <div class="tab-item active">
             <img
               src="../assets/svg/hot-for-ux.svg"
               alt="hot topics"
@@ -239,7 +239,7 @@
               class="tab-icon"
             />
             <span>Design Guide</span>
-          </div>
+          </div> -->
           <!-- 添加互联网搜索开关 -->
           <div class="web-search-toggle">
             <input
@@ -415,8 +415,21 @@
       </div>
     </div>
 
-    <div class="right_menu" :class="{ collapsed: isRightMenuCollapsed }">
-      <div class="collapse-button" @click="toggleRightMenu">
+    <div class="right_menu" :class="{ collapsed: isRightMenuCollapsed }" :style="{ width: rightMenuWidth + 'px' }">
+      <!-- 添加拖动条 -->
+      <div 
+        class="resize-handle"
+        @mousedown="startResize"
+        @touchstart="startResize"
+      ></div>
+      
+      <!-- 修改折叠按钮的样式和行为 -->
+      <div 
+        class="collapse-button" 
+        :class="{ 'menu-expanded': !isRightMenuCollapsed }"
+        :style="!isRightMenuCollapsed ? { left: `-20px` } : {}"
+        @click="toggleRightMenu"
+      >
         <img
           :src="isRightMenuCollapsed ? leftIcon : rightIcon"
           alt="toggle"
@@ -428,7 +441,6 @@
           :searchResults="searchResults"
           :loading="isSearchLoading"
           :total="searchTotal"
-          :message="searchMessage"
         />
       </div>
     </div>
@@ -529,7 +541,6 @@ let rotationInterval = null;
 const searchResults = ref([]);
 const isSearchLoading = ref(false);
 const searchTotal = ref(0);
-const searchMessage=ref('')
 
 // 添加互联网搜索开关状态
 const enableWebSearch = ref(false);
@@ -578,10 +589,23 @@ const toggleMenu = () => {
 // 修改右侧菜单切换逻辑
 const toggleRightMenu = () => {
   isRightMenuCollapsed.value = !isRightMenuCollapsed.value;
+  
+  if (isRightMenuCollapsed.value) {
+    // 收起菜单时的处理
+    if (document.querySelector('.chat')) {
+      document.querySelector('.chat').style.right = '0';
+    }
+  } else {
+    // 展开菜单时的处理
+    if (document.querySelector('.chat')) {
+      document.querySelector('.chat').style.right = `${rightMenuWidth.value}px`;
+    }
+  }
+
   if (isMobile.value) {
     document.body.style.overflow = isRightMenuCollapsed.value ? 'auto' : 'hidden';
     if (!isRightMenuCollapsed.value) {
-      isMenuCollapsed.value = true; // 确保左侧菜单关闭
+      isMenuCollapsed.value = true;
     }
   }
 };
@@ -981,7 +1005,6 @@ const sendMessageS = async (query) => {
     if (response.data && response.data.code === 200) {
       searchResults.value = response.data.data.results || [];
       searchTotal.value = response.data.data.total_results || 0;
-      searchMessage.value=query
     }
   } catch (error) {
     console.error("Web search failed:", error);
@@ -1166,6 +1189,47 @@ const renderMarkdown = (content) => {
   if (!content) return "";
   return md.render(content);
 };
+
+// 添加新的响应式变量
+const rightMenuWidth = ref(600); // 默认宽度
+const minWidth = 0; // 最小宽度
+const maxWidth = 800; // 最大宽度
+
+// 添加拖动相关方法
+const startResize = (e) => {
+  e.preventDefault();
+  
+  const startX = e.type === 'mousedown' ? e.clientX : e.touches[0].clientX;
+  const startWidth = rightMenuWidth.value;
+  
+  const handleMove = (e) => {
+    if (isRightMenuCollapsed.value) return;
+    
+    const currentX = e.type === 'mousemove' ? e.clientX : e.touches[0].clientX;
+    const diff = startX - currentX;
+    
+    let newWidth = Math.min(Math.max(startWidth + diff, minWidth), maxWidth);
+    rightMenuWidth.value = newWidth;
+    
+    // 更新聊天区域的右边距和按钮位置
+    if (document.querySelector('.chat')) {
+      document.querySelector('.chat').style.right = `${newWidth}px`;
+    }
+  };
+  
+  const handleEnd = () => {
+    document.removeEventListener('mousemove', handleMove);
+    document.removeEventListener('mouseup', handleEnd);
+    document.removeEventListener('touchmove', handleMove);
+    document.removeEventListener('touchend', handleEnd);
+  };
+  
+  document.addEventListener('mousemove', handleMove);
+  document.addEventListener('mouseup', handleEnd);
+  document.addEventListener('touchmove', handleMove);
+  document.addEventListener('touchend', handleEnd);
+};
+
 </script>
 
 <style scoped>
@@ -1892,12 +1956,12 @@ const renderMarkdown = (content) => {
 }
 
 .right_menu {
-  width: 600px;
+  /* 修改现有样式 */
+  position: absolute;
+  right: 0;
   height: 100%;
   background: #f7f7f8;
   border-left: 1px solid rgba(0, 0, 0, 0.06);
-  position: absolute; /* 改为绝对定位 */
-  right: 0;
   transform: translateX(0);
   transition: transform 0.3s ease;
   z-index: 2;
@@ -1954,7 +2018,15 @@ const renderMarkdown = (content) => {
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  z-index: 1;
+  z-index: 3;
+  transition: left 0.3s ease;
+}
+
+/* 添加展开状态的样式 */
+.collapse-button.menu-expanded {
+  border-right: 1px solid rgba(0, 0, 0, 0.06);
+  border-left: none;
+  border-radius: 0 4px 4px 0;
 }
 
 .collapse-button:hover {
@@ -2308,7 +2380,7 @@ const renderMarkdown = (content) => {
 .web-search-toggle {
   display: flex;
   align-items: center;
-  margin-left: auto;
+ /*  margin-left: auto; */
   padding: 0 12px;
 }
 
@@ -2513,6 +2585,15 @@ const renderMarkdown = (content) => {
   .message-bubble {
     max-width: 90%;
   }
+
+  .collapse-button {
+    left: -20px !important;
+  }
+
+  .collapse-button.menu-expanded {
+    left: auto !important;
+    right: 0;
+  }
 }
 
 /* 添加移动端手势支持 */
@@ -2631,7 +2712,7 @@ const renderMarkdown = (content) => {
   .web-search-toggle {
     position: relative;
     width: auto;
-    margin-left: auto;
+/*     margin-left: auto; */
   }
 
   /* 调整菜单样式 */
@@ -2730,6 +2811,38 @@ button,
 .conversation-item {
   touch-action: manipulation;
 }
+
+/* 添加拖动条样式 */
+.resize-handle {
+  position: absolute;
+  left: -5px;
+  top: 0;
+  width: 10px;
+  height: 100%;
+  cursor: col-resize;
+  background: transparent;
+  z-index: 3;
+}
+
+.resize-handle:hover {
+  background: rgba(0, 0, 0, 0.1);
+}
+
+/* 确保拖动时不会选中文本 */
+.resize-handle:active {
+  user-select: none;
+}
+
+/* 移动端样式调整 */
+@media screen and (max-width: 768px) {
+  .resize-handle {
+    display: none;
+  }
+  
+  .right_menu {
+    width: 100% !important;
+  }
+}
 </style>
 <style lang="less" scoped>
 ::v-deep .message-content {