liuguancen/gangyan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 新增4个工具(imgcompress/LamaCleaner/webp2jpg/Overleaf/LaTeX公式编辑器) + 应用广场布局优化

Browse Source 
新增工具部署：
- imgcompress (端口18087) - 图片压缩、格式转换、AI抠图
- Lama Cleaner (端口18088) - AI图像擦除/去水印
- webp2jpg-online (端口18089) - 图片格式批量互转
- Overleaf (端口18090) - 在线LaTeX论文编辑器(docker-compose + MongoDB 8.0)
- LaTeX公式编辑器 (端口18091) - 纯前端KaTeX公式编辑

应用广场优化：
- 去掉tab切换，所有分类平铺展示
- CSS Grid自适应布局，一行可排3-4个卡片
- 重新分为4个分类：文档处理、图片处理、创作绘图、科研写作

其他：
- 更新 CLAUDE.md 项目配置文档
- PPTist AI后端优化prompt和流式输出格式

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
liuguancen
2026-04-08 20:23:06 +08:00
parent 108022cebd
commit 6337af9481
5 changed files with 482 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

125
chat_web_front/src/views/applications/index.vue
View File

@@ -1,42 +1,36 @@
<template>
<div class="tools-page">
<!-- 工具列表视图 -->
<div class="tools-container">
<div class="tools-header">
<span class="tools-title">实用工具</span>
</div>
<div class="tab-bar">
<div v-for="(category, index) in toolCategories" :key="category.name"
class="tab-item" :class="{ active: activeTab === index }" @click="activeTab = index">
{{ category.name }}
</div>
</div>
<div class="tools-list">
<div v-for="tool in toolCategories[activeTab].tools" :key="tool.id" class="tool-item"
:class="{ disabled: !tool.enabled }" @click="openTool(tool)">
<div class="tool-icon">
<img v-if="tool.logoImg" :src="tool.logoImg" class="tool-logo-img" alt="">
<span v-else>{{ tool.icon }}</span>
</div>
<div class="tool-info">
<div class="tool-top">
<div class="tool-name">{{ tool.name }}</div>
<div class="tool-badge" v-if="!tool.enabled">即将上线</div>
<div v-for="category in toolCategories" :key="category.name" class="category-section">
<div class="category-name">{{ category.name }}</div>
<div class="tools-list">
<div v-for="tool in category.tools" :key="tool.id" class="tool-item"
:class="{ disabled: !tool.enabled }" @click="openTool(tool)">
<div class="tool-icon">
<img v-if="tool.logoImg" :src="tool.logoImg" class="tool-logo-img" alt="">
<span v-else>{{ tool.icon }}</span>
</div>
<div class="tool-desc">{{ tool.description }}</div>
<div class="tool-info">
<div class="tool-top">
<div class="tool-name">{{ tool.name }}</div>
<div class="tool-badge" v-if="!tool.enabled">即将上线</div>
</div>
<div class="tool-desc">{{ tool.description }}</div>
</div>
<img v-if="tool.enabled" src="@/assets/images/applications/right.png" class="tool-arrow" alt="">
</div>
<img v-if="tool.enabled" src="@/assets/images/applications/right.png" class="tool-arrow" alt="">
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import { reactive } from "vue";
import stirlingLogo from "@/assets/images/applications/stirling-pdf.svg";
import excalidrawLogo from "@/assets/images/applications/excalidraw.svg";
import trwebocrLogo from "@/assets/images/applications/trwebocr.png";
@@ -61,31 +55,35 @@ interface Category {
tools: Tool[];
}
const activeTab = ref(0);
const toolCategories = reactive<Category[]>([
{
name: '📄 文档处理',
tools: [
{ id: 'stirling-pdf', name: 'Stirling PDF', icon: '', logoImg: stirlingLogo, description: 'PDF 合并、拆分、压缩、转换、加水印、OCR 识别等 30+ 功能', port: 18080, enabled: true, type: 'newtab' },
{ id: 'trwebocr', name: '图片转文字 OCR', icon: '', logoImg: trwebocrLogo, description: '中文离线 OCR，识别图片中的文字和表格', port: 18083, enabled: true, type: 'newtab' },
{ id: 'libretranslate', name: '智能翻译', icon: '', logoImg: libretranslateLogo, description: '中英互译，支持文本和文件翻译，数据不出内网', port: 18084, enabled: true, type: 'newtab' },
]
},
{
name: '🖼️ 图片处理',
tools: [
{ id: 'imgcompress', name: '图片压缩转换', icon: '🗜️', description: '图片压缩、格式转换、批量处理、AI 智能抠图去背景', port: 18087, enabled: true, type: 'newtab' },
{ id: 'lama-cleaner', name: 'AI 图像擦除', icon: '🧹', description: 'AI 智能擦除图片中的水印、路人、瑕疵，自动修复画面', port: 18088, enabled: true, type: 'newtab' },
{ id: 'webp2jpg', name: '图片格式转换', icon: '🔄', description: '支持 PSD/HEIC/WebP/PNG/JPG 等格式批量互转，纯浏览器处理不上传', port: 18089, enabled: true, type: 'newtab' },
]
},
{
name: '🎨 创作绘图',
tools: [
{ id: 'excalidraw', name: 'Excalidraw', icon: '', logoImg: excalidrawLogo, description: '手绘风格白板，绘制流程图、架构图、示意图', port: 18081, enabled: true, type: 'newtab' },
{ id: 'mindmap', name: '思维导图', icon: '🧠', description: '创建和编辑思维导图，支持导出图片和 PDF', url: '', enabled: false, type: 'newtab' },
{ id: 'image-editor', name: '图片编辑', icon: '🖼️', description: '裁剪、滤镜、标注、调色，在线图片编辑器', url: '', enabled: false, type: 'newtab' },
{ id: 'pptist', name: 'AI PPT 编辑器', icon: '', logoImg: pptistLogo, description: 'AI 生成 PPT 大纲和演示文稿，在线编辑演示', port: 18085, enabled: true, type: 'newtab' },
]
},
{
name: '📊 数据与写作',
name: '📝 科研写作',
tools: [
{ id: 'pptist', name: 'AI PPT 编辑器', icon: '', logoImg: pptistLogo, description: 'AI 生成 PPT 大纲和演示文稿，在线编辑演示', port: 18085, enabled: true, type: 'newtab' },
{ id: 'libretranslate', name: '智能翻译', icon: '', logoImg: libretranslateLogo, description: '中英互译，支持文本和文件翻译，数据不出内网', port: 18084, enabled: true, type: 'newtab' },
{ id: 'spreadsheet', name: '在线表格', icon: '📊', description: '在线 Excel，支持公式计算、图表生成', url: '', enabled: false, type: 'newtab' },
{ id: 'markdown', name: 'Markdown 编辑器', icon: '📝', description: '所见即所得编辑，支持数学公式、流程图、导出', url: '', enabled: false, type: 'newtab' },
{ id: 'overleaf', name: 'LaTeX 论文编辑器', icon: '📐', description: '在线 LaTeX 编辑器，支持多人协作撰写论文，实时编译预览', port: 18090, enabled: true, type: 'newtab' },
{ id: 'latex-formula', name: 'LaTeX 公式编辑器', icon: '∑', description: '在线编辑数学公式，支持希腊字母、矩阵、积分等，可复制公式或图片', port: 18091, enabled: true, type: 'newtab' },
]
},
]);
@@ -107,7 +105,7 @@ const openTool = (tool: Tool) => {
}
.tools-container {
padding: 30px 50px;
padding: 24px 40px;
height: 100%;
overflow-y: auto;
@@ -115,40 +113,30 @@ const openTool = (tool: Tool) => {
margin-bottom: 20px;
.tools-title { font-size: 20px; font-weight: bold; color: #000; }
}
}
.tab-bar {
display: flex;
flex-wrap: wrap;
margin-bottom: 20px;
gap: 12px;
.category-section {
margin-bottom: 24px;
.tab-item {
padding: 6px 20px;
background: rgba(133, 138, 150, 0.1);
border-radius: 18px;
border: 1px solid #E6EDFF;
font-size: 14px;
color: #606771;
cursor: pointer;
transition: all 0.2s;
&:hover { border-color: #004EA0; color: #004EA0; }
&.active { background: #004EA0; color: #fff; border-color: #004EA0; }
}
.category-name {
font-size: 15px;
font-weight: bold;
color: #333;
margin-bottom: 12px;
padding-left: 4px;
}
}
.tools-list {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.tools-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 12px;
}
.tool-item {
display: flex;
align-items: center;
width: 340px;
padding: 16px;
padding: 14px;
background: #E6EDFF;
border-radius: 8px;
border: 1px solid #E6EDFF;
@@ -166,33 +154,33 @@ const openTool = (tool: Tool) => {
}
.tool-icon {
font-size: 28px;
width: 50px;
height: 50px;
font-size: 24px;
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
background: #fff;
border-radius: 10px;
border-radius: 8px;
flex-shrink: 0;
.tool-logo-img { width: 36px; height: 36px; object-fit: contain; }
.tool-logo-img { width: 30px; height: 30px; object-fit: contain; }
}
.tool-info {
flex: 1;
margin-left: 12px;
margin-left: 10px;
min-width: 0;
.tool-top {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 6px;
margin-bottom: 4px;
}
.tool-name {
font-size: 15px;
font-size: 14px;
font-weight: bold;
color: #000;
}
@@ -208,7 +196,7 @@ const openTool = (tool: Tool) => {
.tool-desc {
font-size: 12px;
color: #858A94;
line-height: 1.5;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
@@ -219,9 +207,8 @@ const openTool = (tool: Tool) => {
.tool-arrow {
width: 7px;
height: 14px;
margin-left: 12px;
margin-left: 10px;
flex-shrink: 0;
}
}
</style>