kangwan/20260512-skg-tk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: rotate short canvas suggestions

Browse Source
This commit is contained in:
kang
2026-05-26 10:38:51 +08:00
parent 97f617197c
commit d01fdc5508
3 changed files with 59 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
web/canvas-app/src/views/Canvas.vue
View File

@@ -196,17 +196,23 @@
</div>
<!-- Quick suggestions | 快捷建议 -->
<div class="flex flex-wrap items-center justify-center gap-2 mt-2">
<span class="text-xs text-[var(--text-secondary)]">推荐：</span>
<div class="flex flex-nowrap items-center justify-center gap-2 mt-2 h-7 overflow-hidden">
<span class="shrink-0 text-xs text-[var(--text-secondary)]">推荐：</span>
<button
v-for="tag in suggestions"
:key="tag"
:key="`${suggestionPage}-${tag}`"
@click="chatInput = tag"
class="px-2 py-0.5 text-xs rounded-full bg-[var(--bg-secondary)]/80 border border-[var(--border-color)] hover:border-[var(--accent-color)] transition-colors"
:title="tag"
class="min-w-0 max-w-[118px] truncate px-2 py-0.5 text-xs rounded-full bg-[var(--bg-secondary)]/80 border border-[var(--border-color)] hover:border-[var(--accent-color)] transition-colors"
>
{{ tag }}
</button>
<button class="p-1 hover:bg-[var(--bg-tertiary)] rounded-lg transition-colors">
<button
@click="refreshSuggestions"
class="shrink-0 p-1 hover:bg-[var(--bg-tertiary)] rounded-lg transition-colors"
title="换一组推荐"
aria-label="换一组推荐"
>
<n-icon :size="14"><RefreshOutline /></n-icon>
</button>
</div>
@@ -437,13 +443,20 @@ const nodeTypeOptions = [
const inputPlaceholder = '你可以试着说"帮我生成一个二次元的卡通角色"'
// Quick suggestions | 快捷建议
const suggestions = [
'像个魔法森林',
'三只不同的小猫',
'生成多角度分镜',
'夏日田野环绕漫步'
const suggestionPage = ref(0)
const suggestionGroups = [
['魔法森林', '三只小猫', '多角度分镜', '夏日田野'],
['雨夜街摊', '产品特写', '水花慢镜', '极简桌面'],
['无人物街景', '夜市霓虹', '电商白底', '咖啡窗边'],
['插画封面', '厨房晨光', '3D 产品', '海边慢步']
]
const suggestions = computed(() => suggestionGroups[suggestionPage.value % suggestionGroups.length])
const refreshSuggestions = () => {
suggestionPage.value = (suggestionPage.value + 1) % suggestionGroups.length
}
// Add new node | 添加新节点
const addNewNode = async (type) => {
// Calculate viewport center position | 计算视口中心位置

33
web/canvas-app/src/views/Home.vue
View File

@@ -54,17 +54,23 @@
</div>
<!-- Quick suggestions | 快捷建议 -->
<div class="flex flex-wrap items-center justify-center gap-2 mt-4">
<span class="text-sm text-[var(--text-secondary)]">推荐：</span>
<div class="flex flex-nowrap items-center justify-center gap-2 mt-4 h-8 overflow-hidden">
<span class="shrink-0 text-sm text-[var(--text-secondary)]">推荐：</span>
<button
v-for="tag in suggestions"
:key="tag"
:key="`${suggestionPage}-${tag}`"
@click="inputText = tag"
class="px-3 py-1.5 text-sm rounded-full bg-[var(--bg-secondary)] border border-[var(--border-color)] hover:border-[var(--accent-color)] transition-colors"
:title="tag"
class="min-w-0 max-w-[132px] truncate px-3 py-1.5 text-sm rounded-full bg-[var(--bg-secondary)] border border-[var(--border-color)] hover:border-[var(--accent-color)] transition-colors"
>
{{ tag }}
</button>
<button class="p-1.5 hover:bg-[var(--bg-tertiary)] rounded-lg transition-colors">
<button
@click="refreshSuggestions"
class="shrink-0 p-1.5 hover:bg-[var(--bg-tertiary)] rounded-lg transition-colors"
title="换一组推荐"
aria-label="换一组推荐"
>
<n-icon :size="16"><RefreshOutline /></n-icon>
</button>
</div>
@@ -278,13 +284,20 @@ const renameValue = ref('')
const renameTargetId = ref(null)
// Suggestions tags | 建议标签
const suggestions = [
'雨中魔法森林',
'日式街面美食摄影',
'瀑布水流飞溅',
'雨天富声旁边花语'
const suggestionPage = ref(0)
const suggestionGroups = [
['魔法森林', '三只小猫', '多角度分镜', '夏日田野'],
['雨夜街摊', '产品特写', '水花慢镜', '极简桌面'],
['无人物街景', '夜市霓虹', '电商白底', '咖啡窗边'],
['插画封面', '厨房晨光', '3D 产品', '海边慢步']
]
const suggestions = computed(() => suggestionGroups[suggestionPage.value % suggestionGroups.length])
const refreshSuggestions = () => {
suggestionPage.value = (suggestionPage.value + 1) % suggestionGroups.length
}
// Format date | 格式化日期
const formatDate = (date) => {
if (!date) return ''