|
|
@@ -2,7 +2,7 @@
|
|
|
<div class="collapsible-toolbar" :class="{ collapsed: isCollapsed }">
|
|
|
<div class="toolbar-content" v-show="!isCollapsed">
|
|
|
<div class="sidebar-content">
|
|
|
- <div class="sidebar-item" :class="{ active: activeSubmenu === 'cocoai' }" @click="toggleSubmenu('cocoai')">
|
|
|
+ <div class="sidebar-item feature-sidebar-item" :class="{ active: activeSubmenu === 'cocoai' }" @click="toggleSubmenu('cocoai')">
|
|
|
<svg class="item-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
|
<path d="M12 2L2 7l10 5 10-5-10-5z"></path>
|
|
|
<path d="M2 17l10 5 10-5"></path>
|
|
|
@@ -10,6 +10,17 @@
|
|
|
</svg>
|
|
|
<span class="item-label">Coco AI</span>
|
|
|
</div>
|
|
|
+ <div class="sidebar-item feature-sidebar-item" :class="{ active: activeSubmenu === 'uploadFile' }"
|
|
|
+ @click="toggleSubmenu('uploadFile')">
|
|
|
+ <svg class="item-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
|
+ <path d="M12 16V4"></path>
|
|
|
+ <path d="M7 9l5-5 5 5"></path>
|
|
|
+ <path d="M4 16.5v1.5A2 2 0 006 20h12a2 2 0 002-2v-1.5"></path>
|
|
|
+ <path d="M5 14h14"></path>
|
|
|
+ </svg>
|
|
|
+ <span class="item-label">{{ lang.ssUploadFile }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="sidebar-divider"></div>
|
|
|
<div class="sidebar-item" :class="{ active: activeSubmenu === 'page' }" @click="toggleSubmenu('page')">
|
|
|
<svg class="item-icon" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
|
<g id="Component 1">
|
|
|
@@ -78,10 +89,12 @@
|
|
|
</svg>
|
|
|
<span class="item-label">{{ lang.ssMultimedia }}</span>
|
|
|
</div>
|
|
|
- <div class="sidebar-item" :class="{ active: activeSubmenu === 'english' }"
|
|
|
- @click="toggleSubmenu('english')">
|
|
|
+ <div class="sidebar-item" :class="{ active: activeSubmenu === 'english' }" @click="toggleSubmenu('english')">
|
|
|
<svg class="item-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
|
- <path d="M12 1a3 3 0 00-3 3v8a3 3 0 006 0V4a3 3 0 00-3-3z"></path><path d="M19 10v2a7 7 0 01-14 0v-2"></path><line x1="12" y1="19" x2="12" y2="23"></line><line x1="8" y1="23" x2="16" y2="23"></line>
|
|
|
+ <path d="M12 1a3 3 0 00-3 3v8a3 3 0 006 0V4a3 3 0 00-3-3z"></path>
|
|
|
+ <path d="M19 10v2a7 7 0 01-14 0v-2"></path>
|
|
|
+ <line x1="12" y1="19" x2="12" y2="23"></line>
|
|
|
+ <line x1="8" y1="23" x2="16" y2="23"></line>
|
|
|
</svg>
|
|
|
<span class="item-label">{{ lang.ssEnglish }}</span>
|
|
|
</div>
|
|
|
@@ -104,6 +117,37 @@
|
|
|
<AiChat :userid="props.userid" />
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="submenu" :class="{ visible: activeSubmenu === 'uploadFile' }">
|
|
|
+ <div class="submenu-title" style="margin-bottom: 0;">
|
|
|
+ <div class="title">{{ lang.ssUploadFile }}</div>
|
|
|
+ <div class="close-icon" @click="toggleSubmenu('uploadFile')">
|
|
|
+ <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
|
+ <g id="Component 3">
|
|
|
+ <g id="Component 1">
|
|
|
+ <path id="Vector" d="M16 18L12 14L16 10" stroke="#9CA3AF" stroke-width="1.33333" />
|
|
|
+ </g>
|
|
|
+ </g>
|
|
|
+ </svg>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="submenu-content">
|
|
|
+ <FileInput accept=".pptx"
|
|
|
+ @change="handleFileUpload">
|
|
|
+ <div class="upload-dropzone">
|
|
|
+ <div class="upload-dropzone-icon">
|
|
|
+ <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
|
|
|
+ <path d="M12 15V4"></path>
|
|
|
+ <path d="M7 9l5-5 5 5"></path>
|
|
|
+ <path d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2"></path>
|
|
|
+ </svg>
|
|
|
+ </div>
|
|
|
+ <div class="upload-dropzone-title">拖拽文件至此，或点击选择</div>
|
|
|
+ <div class="upload-dropzone-subtitle">支持.pptx</div>
|
|
|
+ <!-- <div class="upload-dropzone-footnote">同类型文件支持批量导入，跨类型文件请分开处理</div> -->
|
|
|
+ </div>
|
|
|
+ </FileInput>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<div class="submenu" :class="{ visible: activeSubmenu === 'page' }">
|
|
|
<div class="submenu-title">
|
|
|
<div class="title">{{ lang.ssAddTemplatePage }}</div>
|
|
|
@@ -175,7 +219,7 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<FileInput accept="application/vnd.openxmlformats-officedocument.presentationml.presentation"
|
|
|
- @change="handleFileUpload">
|
|
|
+ @change="handleFileUpload" v-if="false">
|
|
|
<div class="submenu-upload">
|
|
|
<div class="submenu-icon">
|
|
|
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
|
@@ -253,25 +297,25 @@
|
|
|
<div class="submenu-item" @click="handleToolClick('vote')" @mouseenter="hoveredTool = 'vote'"
|
|
|
@mouseleave="hoveredTool = null">
|
|
|
<svg class="submenu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
|
- <polyline points="9 11 12 14 22 4"></polyline>
|
|
|
- <path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"></path>
|
|
|
+ <polyline points="9 11 12 14 22 4"></polyline>
|
|
|
+ <path d="M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"></path>
|
|
|
</svg>
|
|
|
<span class="submenu-label">{{ lang.ssVote }}</span>
|
|
|
</div>
|
|
|
<div class="submenu-item" @click="handleToolClick('photo')" @mouseenter="hoveredTool = 'photo'"
|
|
|
@mouseleave="hoveredTool = null">
|
|
|
<svg class="submenu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
|
- <path d="M23 19a2 2 0 01-2 2H3a2 2 0 01-2-2V8a2 2 0 012-2h4l2-3h6l2 3h4a2 2 0 012 2z"></path>
|
|
|
- <circle cx="12" cy="13" r="4"></circle>
|
|
|
+ <path d="M23 19a2 2 0 01-2 2H3a2 2 0 01-2-2V8a2 2 0 012-2h4l2-3h6l2 3h4a2 2 0 012 2z"></path>
|
|
|
+ <circle cx="12" cy="13" r="4"></circle>
|
|
|
</svg>
|
|
|
<span class="submenu-label">{{ lang.ssPhoto }}</span>
|
|
|
</div>
|
|
|
<div class="submenu-item" @click="handleToolClick('creative')" @mouseenter="hoveredTool = null"
|
|
|
@mouseleave="hoveredTool = null">
|
|
|
<svg class="submenu-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
|
- <circle cx="12" cy="12" r="10"/>
|
|
|
- <line x1="12" y1="8" x2="12" y2="16"/>
|
|
|
- <line x1="8" y1="12" x2="16" y2="12"/>
|
|
|
+ <circle cx="12" cy="12" r="10" />
|
|
|
+ <line x1="12" y1="8" x2="12" y2="16" />
|
|
|
+ <line x1="8" y1="12" x2="16" y2="12" />
|
|
|
</svg>
|
|
|
<span class="submenu-label">{{ lang.ssCreative }}</span>
|
|
|
</div>
|
|
|
@@ -862,7 +906,7 @@ const handleToolClick = _.debounce((tool: string) => {
|
|
|
}
|
|
|
else if (tool === 'photo') {
|
|
|
parentWindow?.addTool?.(79)
|
|
|
- }
|
|
|
+ }
|
|
|
else if (tool === 'qa') {
|
|
|
parentWindow?.addTool?.(15)
|
|
|
}
|
|
|
@@ -1065,6 +1109,44 @@ const handleParsingClose = () => {
|
|
|
position: relative;
|
|
|
}
|
|
|
|
|
|
+.sidebar-divider {
|
|
|
+ position: relative;
|
|
|
+ margin: 4px 2px 2px;
|
|
|
+ height: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.sidebar-divider::before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ top: 50%;
|
|
|
+ height: 1px;
|
|
|
+ background: #e8ddd0;
|
|
|
+}
|
|
|
+
|
|
|
+.feature-sidebar-item {
|
|
|
+ min-height: 82px;
|
|
|
+ padding-top: 12px;
|
|
|
+ padding-bottom: 12px;
|
|
|
+ gap: 7px;
|
|
|
+ border: 1px solid #f1e2cc;
|
|
|
+ background: #fffdfa;
|
|
|
+ box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: #fff2df !important;
|
|
|
+ border-color: rgba(247, 139, 34, 0.4) !important;
|
|
|
+ box-shadow: 0 14px 28px rgba(247, 139, 34, 0.18) !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ background: #fff2df !important;
|
|
|
+ border-color: rgba(247, 139, 34, 0.4) !important;
|
|
|
+ box-shadow: 0 14px 28px rgba(247, 139, 34, 0.18) !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
.sidebar-item {
|
|
|
width: 84px;
|
|
|
padding: 12px 8px;
|
|
|
@@ -1645,4 +1727,67 @@ const handleParsingClose = () => {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+.upload-dropzone{
|
|
|
+ position: relative;
|
|
|
+ border: 1.5px dashed rgba(247, 139, 34, 0.38);
|
|
|
+ border-radius: 20px;
|
|
|
+ background: #fffaf4;
|
|
|
+ min-height: 156px;
|
|
|
+ padding: 22px 20px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ text-align: center;
|
|
|
+ gap: 10px;
|
|
|
+ cursor: pointer;
|
|
|
+ transition: all 0.22s ease;
|
|
|
+ overflow: hidden;
|
|
|
+ width: calc(100% - 30px);
|
|
|
+ margin: 15px auto;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ &:hover{
|
|
|
+ border-style: solid;
|
|
|
+ border-color: #f78b22;
|
|
|
+ background: #fff3e2;
|
|
|
+ box-shadow: 0 18px 34px rgba(247, 139, 34, 0.16);
|
|
|
+ transform: translateY(-1px);
|
|
|
+ }
|
|
|
+ .upload-dropzone-icon{
|
|
|
+ width: 56px;
|
|
|
+ height: 56px;
|
|
|
+ border-radius: 18px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ color: #f78b22;
|
|
|
+ background: rgba(247, 139, 34, 0.10);
|
|
|
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
|
|
|
+
|
|
|
+ svg{
|
|
|
+ width: 28px;
|
|
|
+ height: 28px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .upload-dropzone-title{
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 700;
|
|
|
+ color: #111827;
|
|
|
+ }
|
|
|
+
|
|
|
+ .upload-dropzone-subtitle{
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 1.6;
|
|
|
+ color: #7c6d5d;
|
|
|
+ max-width: 320px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .upload-dropzone-footnote{
|
|
|
+ font-size: 11px;
|
|
|
+ color: #9a8a77;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
