perf: 增加模板、UI调整

This commit is contained in:
zxc 2025-03-02 16:24:13 +08:00
parent f0127686a2
commit 8ff505c884
3 changed files with 24 additions and 6 deletions

View File

@ -53,8 +53,10 @@ export const useSlidesStore = defineStore('slides', {
viewportSize: 1000, // 可视区域宽度基数
viewportRatio: 0.5625, // 可视区域比例默认16:9
templates: [
{ name: '红色通用模板', id: 'template_1', cover: 'https://asset.pptist.cn/img/template_1.jpg' },
{ name: '蓝色通用模板', id: 'template_2', cover: 'https://asset.pptist.cn/img/template_2.jpg' },
{ name: '红色通用', id: 'template_1', cover: 'https://asset.pptist.cn/img/template_1.jpg' },
{ name: '蓝色通用', id: 'template_2', cover: 'https://asset.pptist.cn/img/template_2.jpg' },
{ name: '紫色通用', id: 'template_3', cover: 'https://asset.pptist.cn/img/template_3.jpg' },
{ name: '莫兰迪配色', id: 'template_4', cover: 'https://asset.pptist.cn/img/template_4.jpg' },
], // 模板
}),

View File

@ -22,7 +22,7 @@
</template>
</Input>
<div class="recommends">
<div class="recommend" v-for="(item, index) in recommends" :key="index" @click="keyword = item">{{ item }}</div>
<div class="recommend" v-for="(item, index) in recommends" :key="index" @click="setKeyword(item)">{{ item }}</div>
</div>
<div class="model-selector">
<div class="label">选择AI模型</div>
@ -116,6 +116,11 @@ onMounted(() => {
}, 500)
})
const setKeyword = (value: string) => {
keyword.value = value
inputRef.value!.focus()
}
const createOutline = async () => {
if (!keyword.value) return message.error('请先输入PPT主题')
@ -194,8 +199,13 @@ const createPPT = async () => {
.title {
font-weight: 700;
font-size: 18px;
font-size: 20px;
margin-right: 8px;
background: linear-gradient(270deg, #d897fd, #33bcfc);
background-clip: text;
color: transparent;
vertical-align: text-bottom;
line-height: 1.1;
}
.subtite {
color: #888;

View File

@ -57,7 +57,7 @@
</Popover>
</div>
<div class="menu-item" v-tooltip="'AI生成PPT'" @click="openAIPPTDialog(); mainMenuVisible = false">
<span class="text">AI</span>
<span class="text ai">AI</span>
</div>
<div class="menu-item" v-tooltip="'导出'" @click="setDialogForExport('pptx')">
<IconDownload class="icon" />
@ -171,7 +171,13 @@ const openAIPPTDialog = () => {
.text {
width: 18px;
text-align: center;
font-size: 16px;
font-size: 17px;
}
.ai {
background: linear-gradient(270deg, #d897fd, #33bcfc);
background-clip: text;
color: transparent;
font-weight: 700;
}
&:hover {