|
@@ -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 {
|