56fda55709
- 新增 ArticleRewritePanel.vue 组件 - 支持从文稿库选择文章或粘贴输入 - 支持句子多选（连续文本流展示） - 支持基于范式 Prompt 进行 AI 检查 - 支持 AI 重写及选择性替换 - 新增全选/反选按钮 - 新增保存功能（创建版本历史） - 新增复检功能（对重写内容再次检查） - 在 GlobalSidebar.vue 添加导航入口 - 在 App.vue 添加路由渲染
81 lines
3.1 KiB
Vue
81 lines
3.1 KiB
Vue
<template>
|
||
<aside class="w-16 h-screen flex flex-col items-center py-6 bg-slate-900 border-r border-slate-800 shrink-0 z-50">
|
||
<!-- Logo/Home -->
|
||
<div class="mb-8 text-2xl filter drop-shadow-[0_0_8px_rgba(59,130,246,0.5)]">
|
||
🚀
|
||
</div>
|
||
|
||
<!-- 导航项 -->
|
||
<nav class="flex-1 w-full flex flex-col items-center gap-4">
|
||
<button
|
||
v-for="item in navItems"
|
||
:key="item.id"
|
||
@click="switchPage(item.id)"
|
||
:class="[
|
||
'group relative w-12 h-12 rounded-xl flex items-center justify-center transition-all duration-300',
|
||
currentPage === item.id
|
||
? 'bg-blue-600 text-white shadow-[0_0_15px_rgba(37,99,235,0.4)]'
|
||
: 'text-slate-500 hover:bg-slate-800 hover:text-slate-300'
|
||
]"
|
||
:title="item.label"
|
||
>
|
||
<span class="text-xl">{{ item.icon }}</span>
|
||
|
||
<!-- Tooltip -->
|
||
<div class="absolute left-full ml-3 px-2 py-1 bg-slate-800 text-white text-xs rounded opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all whitespace-nowrap z-50 shadow-xl border border-slate-700 pointer-events-none">
|
||
{{ item.label }}
|
||
<div class="absolute left-[-4px] top-1/2 -translate-y-1/2 w-2 h-2 bg-slate-800 border-l border-b border-slate-700 rotate-45"></div>
|
||
</div>
|
||
|
||
<!-- Active Indicator -->
|
||
<div
|
||
v-if="currentPage === item.id"
|
||
class="absolute -left-0 w-1 h-6 bg-blue-400 rounded-r-full"
|
||
></div>
|
||
</button>
|
||
</nav>
|
||
|
||
<!-- 底部：设置 -->
|
||
<div class="mt-auto">
|
||
<button
|
||
@click="switchPage('settings')"
|
||
:class="[
|
||
'group relative w-12 h-12 rounded-xl flex items-center justify-center transition-all duration-300',
|
||
currentPage === 'settings'
|
||
? 'bg-slate-700 text-white'
|
||
: 'text-slate-500 hover:bg-slate-800 hover:text-slate-300'
|
||
]"
|
||
title="设置"
|
||
>
|
||
<span class="text-xl">⚙️</span>
|
||
<div class="absolute left-full ml-3 px-2 py-1 bg-slate-800 text-white text-xs rounded opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all whitespace-nowrap z-50 shadow-xl border border-slate-700 pointer-events-none">
|
||
设置
|
||
<div class="absolute left-[-4px] top-1/2 -translate-y-1/2 w-2 h-2 bg-slate-800 border-l border-b border-slate-700 rotate-45"></div>
|
||
</div>
|
||
</button>
|
||
</div>
|
||
</aside>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed } from 'vue'
|
||
import { useAppStore } from '../stores/app'
|
||
|
||
const appStore = useAppStore()
|
||
const currentPage = computed(() => appStore.currentPage)
|
||
|
||
const navItems = [
|
||
{ id: 'writer', label: 'AI 写作', icon: '✍️' },
|
||
{ id: 'analysis', label: '范式库', icon: '🎯' },
|
||
{ id: 'documents', label: '文稿库', icon: '📂' },
|
||
{ id: 'materials', label: '素材库', icon: '📚' },
|
||
{ id: 'rewrite', label: '范式润色', icon: '🎨' },
|
||
{ id: 'compare', label: '对照检查', icon: '🔍' },
|
||
{ id: 'diffAnnotation', label: '差异标注', icon: '📊' }
|
||
]
|
||
|
||
const switchPage = (page) => {
|
||
appStore.setCurrentPage(page)
|
||
}
|
||
</script>
|