mirror of
https://github.com/fawney19/Aether.git
synced 2026-09-02 01:10:23 +08:00
feat(frontend): 新增配置教程页面并优化暗色模式样式
- 添加 Guide 配置教程页面及路由 - 统一暗色模式配色方案,使用协调的暖色调 - 重新设计功能卡片,区分已完成与开发中状态 - 更新功能卡片描述,反映当前开发重点
This commit is contained in:
@@ -206,6 +206,11 @@ function highlightPlaceholders(html: string): string {
|
|||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.code-highlight :deep(.hljs-section) {
|
||||||
|
color: #cc785c;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
.code-highlight :deep(.hljs-number) {
|
.code-highlight :deep(.hljs-number) {
|
||||||
color: #005cc5;
|
color: #005cc5;
|
||||||
}
|
}
|
||||||
@@ -314,7 +319,13 @@ body[theme-mode='dark'] .code-highlight :deep(.hljs-comment) {
|
|||||||
.dark .code-highlight :deep(.hljs-title),
|
.dark .code-highlight :deep(.hljs-title),
|
||||||
body[theme-mode='dark'] .code-highlight :deep(.hljs-function),
|
body[theme-mode='dark'] .code-highlight :deep(.hljs-function),
|
||||||
body[theme-mode='dark'] .code-highlight :deep(.hljs-title) {
|
body[theme-mode='dark'] .code-highlight :deep(.hljs-title) {
|
||||||
color: #dcdcaa;
|
color: #d4a27f;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .code-highlight :deep(.hljs-section),
|
||||||
|
body[theme-mode='dark'] .code-highlight :deep(.hljs-section) {
|
||||||
|
color: #d4a27f;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -329,7 +340,7 @@ body[theme-mode='dark'] .code-highlight :deep(.hljs-number) {
|
|||||||
body[theme-mode='dark'] .code-highlight :deep(.hljs-literal),
|
body[theme-mode='dark'] .code-highlight :deep(.hljs-literal),
|
||||||
body[theme-mode='dark'] .code-highlight :deep(.language-json .hljs-literal),
|
body[theme-mode='dark'] .code-highlight :deep(.language-json .hljs-literal),
|
||||||
body[theme-mode='dark'] .code-highlight :deep(.language-json .hljs-literal .hljs-keyword) {
|
body[theme-mode='dark'] .code-highlight :deep(.language-json .hljs-literal .hljs-keyword) {
|
||||||
color: #e1e4e8;
|
color: #e3e0d3;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -342,7 +353,7 @@ body[theme-mode='dark'] .code-highlight :deep(.hljs-property) {
|
|||||||
|
|
||||||
.dark .code-highlight :deep(.hljs-punctuation),
|
.dark .code-highlight :deep(.hljs-punctuation),
|
||||||
body[theme-mode='dark'] .code-highlight :deep(.hljs-punctuation) {
|
body[theme-mode='dark'] .code-highlight :deep(.hljs-punctuation) {
|
||||||
color: #d4d4d4;
|
color: #c9c3b4;
|
||||||
opacity: 0.7;
|
opacity: 0.7;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -392,12 +403,12 @@ body[theme-mode='dark'] .code-highlight :deep(.language-bash .hljs-literal) {
|
|||||||
|
|
||||||
.dark .code-highlight :deep(.language-bash),
|
.dark .code-highlight :deep(.language-bash),
|
||||||
body[theme-mode='dark'] .code-highlight :deep(.language-bash) {
|
body[theme-mode='dark'] .code-highlight :deep(.language-bash) {
|
||||||
color: #e1e4e8;
|
color: #e3e0d3;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark .code-highlight :deep(.language-bash .hljs-string),
|
.dark .code-highlight :deep(.language-bash .hljs-string),
|
||||||
body[theme-mode='dark'] .code-highlight :deep(.language-bash .hljs-string) {
|
body[theme-mode='dark'] .code-highlight :deep(.language-bash .hljs-string) {
|
||||||
color: #e1e4e8;
|
color: #e3e0d3;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -13,6 +13,12 @@ const routes: RouteRecordRaw[] = [
|
|||||||
meta: { requiresAuth: false }
|
meta: { requiresAuth: false }
|
||||||
},
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
path: '/guide',
|
||||||
|
name: 'Guide',
|
||||||
|
component: () => importWithRetry(() => import('@/views/public/Guide.vue')),
|
||||||
|
meta: { requiresAuth: false }
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/logo-demo',
|
path: '/logo-demo',
|
||||||
name: 'LogoColorDemo',
|
name: 'LogoColorDemo',
|
||||||
|
|||||||
@@ -29,7 +29,7 @@
|
|||||||
|
|
||||||
<!-- Description -->
|
<!-- Description -->
|
||||||
<p
|
<p
|
||||||
class="text-lg text-[#666663] dark:text-gray-300 mb-4 transition-all duration-700"
|
class="text-lg text-[#666663] dark:text-[#c9c3b4] mb-4 transition-all duration-700"
|
||||||
:style="descStyle"
|
:style="descStyle"
|
||||||
>
|
>
|
||||||
{{ description }}
|
{{ description }}
|
||||||
@@ -81,7 +81,7 @@
|
|||||||
>
|
>
|
||||||
<div :class="panelClasses.panelHeader">
|
<div :class="panelClasses.panelHeader">
|
||||||
<div class="flex items-center justify-between">
|
<div class="flex items-center justify-between">
|
||||||
<span class="text-xs font-medium text-[#666663] dark:text-muted-foreground">
|
<span class="text-xs font-medium text-[#666663] dark:text-[#c9c3b4]">
|
||||||
{{ config.path }}
|
{{ config.path }}
|
||||||
</span>
|
</span>
|
||||||
<button
|
<button
|
||||||
|
|||||||
185
frontend/src/views/public/Guide.vue
Normal file
185
frontend/src/views/public/Guide.vue
Normal file
@@ -0,0 +1,185 @@
|
|||||||
|
<template>
|
||||||
|
<div class="min-h-screen literary-grid literary-paper">
|
||||||
|
<!-- Header -->
|
||||||
|
<header class="sticky top-0 z-50 border-b border-[#cc785c]/10 dark:border-[rgba(227,224,211,0.12)] bg-[#fafaf7]/90 dark:bg-[#191714]/95 backdrop-blur-xl transition-all">
|
||||||
|
<div class="h-14 sm:h-16 flex items-center px-3 sm:px-4 md:px-8">
|
||||||
|
<!-- Left: Logo & Brand -->
|
||||||
|
<RouterLink
|
||||||
|
to="/"
|
||||||
|
class="flex items-center gap-2 sm:gap-3 group/logo cursor-pointer shrink-0"
|
||||||
|
>
|
||||||
|
<HeaderLogo
|
||||||
|
size="h-7 w-7 sm:h-9 sm:w-9"
|
||||||
|
class-name="text-[#191919] dark:text-white"
|
||||||
|
/>
|
||||||
|
<div class="flex flex-col justify-center">
|
||||||
|
<h1 class="text-base sm:text-lg font-bold text-[#191919] dark:text-white leading-none">
|
||||||
|
Aether
|
||||||
|
</h1>
|
||||||
|
<span class="text-[9px] sm:text-[10px] text-[#91918d] dark:text-muted-foreground leading-none mt-1 sm:mt-1.5 font-medium tracking-wide">AI Gateway</span>
|
||||||
|
</div>
|
||||||
|
</RouterLink>
|
||||||
|
|
||||||
|
<!-- Spacer -->
|
||||||
|
<div class="flex-1" />
|
||||||
|
|
||||||
|
<!-- Right: Actions -->
|
||||||
|
<div class="flex items-center gap-1 sm:gap-2 shrink-0">
|
||||||
|
<!-- Theme Toggle + GitHub Icons -->
|
||||||
|
<div class="flex items-center gap-0.5 sm:gap-1">
|
||||||
|
<button
|
||||||
|
class="flex h-8 w-8 sm:h-9 sm:w-9 items-center justify-center rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted/50 transition"
|
||||||
|
:title="themeMode === 'system' ? '跟随系统' : themeMode === 'dark' ? '深色模式' : '浅色模式'"
|
||||||
|
@click="toggleDarkMode"
|
||||||
|
>
|
||||||
|
<SunMoon
|
||||||
|
v-if="themeMode === 'system'"
|
||||||
|
class="h-3.5 w-3.5 sm:h-4 sm:w-4"
|
||||||
|
/>
|
||||||
|
<Sun
|
||||||
|
v-else-if="themeMode === 'light'"
|
||||||
|
class="h-3.5 w-3.5 sm:h-4 sm:w-4"
|
||||||
|
/>
|
||||||
|
<Moon
|
||||||
|
v-else
|
||||||
|
class="h-3.5 w-3.5 sm:h-4 sm:w-4"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
<a
|
||||||
|
href="https://github.com/fawney19/Aether"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
class="flex h-8 w-8 sm:h-9 sm:w-9 items-center justify-center rounded-lg text-muted-foreground hover:text-foreground hover:bg-muted/50 transition"
|
||||||
|
title="GitHub 仓库"
|
||||||
|
>
|
||||||
|
<GithubIcon class="h-3.5 w-3.5 sm:h-4 sm:w-4" />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- Main Content -->
|
||||||
|
<main class="relative z-10 px-4 sm:px-8 md:px-16 lg:px-20 py-12 md:py-20">
|
||||||
|
<div class="max-w-4xl mx-auto">
|
||||||
|
<!-- Page Title -->
|
||||||
|
<div class="text-center mb-12">
|
||||||
|
<div
|
||||||
|
class="inline-flex items-center gap-1.5 md:gap-2 rounded-full bg-[#cc785c]/10 dark:bg-[#cc785c]/20 border border-[#cc785c]/20 dark:border-[#cc785c]/40 px-3 md:px-4 py-1.5 md:py-2 text-xs md:text-sm font-medium text-[#cc785c] dark:text-[#d4a27f] mb-4 md:mb-6 backdrop-blur-sm"
|
||||||
|
>
|
||||||
|
<BookOpen class="h-3.5 w-3.5 md:h-4 md:w-4" />
|
||||||
|
配置教程
|
||||||
|
</div>
|
||||||
|
<h1 class="text-3xl sm:text-4xl md:text-5xl font-bold text-[#191919] dark:text-white mb-4">
|
||||||
|
配置指南
|
||||||
|
</h1>
|
||||||
|
<p class="text-base md:text-lg text-[#666663] dark:text-[#c9c3b4] max-w-2xl mx-auto">
|
||||||
|
快速上手 Aether AI Gateway 的完整配置教程
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Wiki Content Placeholder -->
|
||||||
|
<div class="bg-white/70 dark:bg-[#262624]/80 backdrop-blur-sm rounded-2xl p-8 md:p-12 border border-[#e5e4df] dark:border-[rgba(227,224,211,0.16)]">
|
||||||
|
<div class="text-center py-16">
|
||||||
|
<div class="flex h-16 w-16 items-center justify-center rounded-2xl bg-[#cc785c]/10 dark:bg-[#cc785c]/15 mx-auto mb-6">
|
||||||
|
<FileText class="h-8 w-8 text-[#cc785c] dark:text-[#d4a27f]" />
|
||||||
|
</div>
|
||||||
|
<h2 class="text-xl md:text-2xl font-bold text-[#191919] dark:text-white mb-3">
|
||||||
|
教程文档即将上线
|
||||||
|
</h2>
|
||||||
|
<p class="text-[#666663] dark:text-[#c9c3b4] max-w-md mx-auto mb-8">
|
||||||
|
我们正在努力编写详细的配置教程,包括 Claude Code、Codex CLI 和 Gemini CLI 的完整配置指南。
|
||||||
|
</p>
|
||||||
|
<div class="flex flex-wrap items-center justify-center gap-3">
|
||||||
|
<div class="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-amber-500/10 text-amber-600 dark:text-amber-400 text-sm font-medium">
|
||||||
|
<Loader2 class="h-4 w-4 animate-spin" />
|
||||||
|
文档编写中
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Coming Soon Sections -->
|
||||||
|
<div class="mt-12 pt-8 border-t border-[#e5e4df] dark:border-[rgba(227,224,211,0.12)]">
|
||||||
|
<h3 class="text-lg font-semibold text-[#191919] dark:text-white mb-6 text-center">
|
||||||
|
即将推出的内容
|
||||||
|
</h3>
|
||||||
|
<div class="grid md:grid-cols-3 gap-4">
|
||||||
|
<div class="p-4 rounded-xl bg-[#fafaf7] dark:bg-[#1f1d1a] border border-[#e5e4df]/50 dark:border-[rgba(227,224,211,0.08)]">
|
||||||
|
<div class="flex items-center gap-3 mb-2">
|
||||||
|
<div class="flex h-8 w-8 items-center justify-center rounded-lg bg-amber-500/10">
|
||||||
|
<Code2 class="h-4 w-4 text-amber-500" />
|
||||||
|
</div>
|
||||||
|
<span class="font-medium text-[#191919] dark:text-white">Claude Code</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm text-[#666663] dark:text-[#c9c3b4]">
|
||||||
|
IDE 集成配置教程
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="p-4 rounded-xl bg-[#fafaf7] dark:bg-[#1f1d1a] border border-[#e5e4df]/50 dark:border-[rgba(227,224,211,0.08)]">
|
||||||
|
<div class="flex items-center gap-3 mb-2">
|
||||||
|
<div class="flex h-8 w-8 items-center justify-center rounded-lg bg-emerald-500/10">
|
||||||
|
<Terminal class="h-4 w-4 text-emerald-500" />
|
||||||
|
</div>
|
||||||
|
<span class="font-medium text-[#191919] dark:text-white">Codex CLI</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm text-[#666663] dark:text-[#c9c3b4]">
|
||||||
|
命令行工具配置教程
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="p-4 rounded-xl bg-[#fafaf7] dark:bg-[#1f1d1a] border border-[#e5e4df]/50 dark:border-[rgba(227,224,211,0.08)]">
|
||||||
|
<div class="flex items-center gap-3 mb-2">
|
||||||
|
<div class="flex h-8 w-8 items-center justify-center rounded-lg bg-primary/10">
|
||||||
|
<Sparkles class="h-4 w-4 text-primary" />
|
||||||
|
</div>
|
||||||
|
<span class="font-medium text-[#191919] dark:text-white">Gemini CLI</span>
|
||||||
|
</div>
|
||||||
|
<p class="text-sm text-[#666663] dark:text-[#c9c3b4]">
|
||||||
|
多模态 AI 配置教程
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { RouterLink } from 'vue-router'
|
||||||
|
import {
|
||||||
|
BookOpen,
|
||||||
|
Code2,
|
||||||
|
FileText,
|
||||||
|
Loader2,
|
||||||
|
Moon,
|
||||||
|
Sparkles,
|
||||||
|
Sun,
|
||||||
|
SunMoon,
|
||||||
|
Terminal
|
||||||
|
} from 'lucide-vue-next'
|
||||||
|
import GithubIcon from '@/components/icons/GithubIcon.vue'
|
||||||
|
import HeaderLogo from '@/components/HeaderLogo.vue'
|
||||||
|
import { useDarkMode } from '@/composables/useDarkMode'
|
||||||
|
|
||||||
|
const { themeMode, toggleDarkMode } = useDarkMode()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
/* Typography */
|
||||||
|
h1, h2, h3 {
|
||||||
|
font-family: var(--serif);
|
||||||
|
letter-spacing: -0.02em;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-family: var(--serif);
|
||||||
|
letter-spacing: 0.01em;
|
||||||
|
line-height: 1.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
button, nav, a, .inline-flex {
|
||||||
|
font-family: var(--sans-serif);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -183,7 +183,7 @@
|
|||||||
欢迎使用 <span class="text-primary typewriter">{{ aetherText }}<span class="cursor" :class="{ 'cursor-hidden': !showCursor }">_</span></span>
|
欢迎使用 <span class="text-primary typewriter">{{ aetherText }}<span class="cursor" :class="{ 'cursor-hidden': !showCursor }">_</span></span>
|
||||||
</h1>
|
</h1>
|
||||||
<p
|
<p
|
||||||
class="mb-8 text-base sm:text-lg md:text-xl text-[#666663] dark:text-gray-300 max-w-2xl mx-auto transition-all duration-700"
|
class="mb-8 text-base sm:text-lg md:text-xl text-[#666663] dark:text-[#c9c3b4] max-w-2xl mx-auto transition-all duration-700"
|
||||||
:style="getDescStyle(SECTIONS.HOME)"
|
:style="getDescStyle(SECTIONS.HOME)"
|
||||||
>
|
>
|
||||||
AI 开发工具统一接入平台<br>
|
AI 开发工具统一接入平台<br>
|
||||||
@@ -207,7 +207,7 @@
|
|||||||
description="直接在您的终端中释放Claude的原始力量。瞬间搜索百万行代码库。将数小时的流程转化为单一命令。您的工具。您的流程。您的代码库,以思维速度进化。"
|
description="直接在您的终端中释放Claude的原始力量。瞬间搜索百万行代码库。将数小时的流程转化为单一命令。您的工具。您的流程。您的代码库,以思维速度进化。"
|
||||||
:badge-icon="Code2"
|
:badge-icon="Code2"
|
||||||
badge-text="IDE 集成"
|
badge-text="IDE 集成"
|
||||||
badge-class="bg-[#cc785c]/10 dark:bg-amber-900/30 border border-[#cc785c]/20 dark:border-amber-800 text-[#cc785c] dark:text-amber-400"
|
badge-class="bg-[#cc785c]/10 dark:bg-[#cc785c]/20 border border-[#cc785c]/20 dark:border-[#d4a27f]/30 text-[#cc785c] dark:text-[#d4a27f]"
|
||||||
:platform-options="platformPresets.claude.options"
|
:platform-options="platformPresets.claude.options"
|
||||||
:install-command="claudeInstallCommand"
|
:install-command="claudeInstallCommand"
|
||||||
:config-files="[{ path: '~/.claude/settings.json', content: claudeConfig, language: 'json' }]"
|
:config-files="[{ path: '~/.claude/settings.json', content: claudeConfig, language: 'json' }]"
|
||||||
@@ -227,7 +227,7 @@
|
|||||||
description="Codex CLI 是一款可在本地终端运行的编程助手工具,它能够读取、修改并执行用户指定目录中的代码。"
|
description="Codex CLI 是一款可在本地终端运行的编程助手工具,它能够读取、修改并执行用户指定目录中的代码。"
|
||||||
:badge-icon="Terminal"
|
:badge-icon="Terminal"
|
||||||
badge-text="命令行工具"
|
badge-text="命令行工具"
|
||||||
badge-class="bg-[#cc785c]/10 dark:bg-emerald-900/30 border border-[#cc785c]/20 dark:border-emerald-800 text-[#cc785c] dark:text-emerald-400"
|
badge-class="bg-[#cc785c]/10 dark:bg-[#cc785c]/20 border border-[#cc785c]/20 dark:border-[#d4a27f]/30 text-[#cc785c] dark:text-[#d4a27f]"
|
||||||
:platform-options="platformPresets.codex.options"
|
:platform-options="platformPresets.codex.options"
|
||||||
:install-command="codexInstallCommand"
|
:install-command="codexInstallCommand"
|
||||||
:config-files="[
|
:config-files="[
|
||||||
@@ -250,7 +250,7 @@
|
|||||||
description="Gemini CLI 是一款开源人工智能代理,可将 Gemini 的强大功能直接带入你的终端。它提供了对 Gemini 的轻量级访问,为你提供了从提示符到我们模型的最直接路径。"
|
description="Gemini CLI 是一款开源人工智能代理,可将 Gemini 的强大功能直接带入你的终端。它提供了对 Gemini 的轻量级访问,为你提供了从提示符到我们模型的最直接路径。"
|
||||||
:badge-icon="Sparkles"
|
:badge-icon="Sparkles"
|
||||||
badge-text="多模态 AI"
|
badge-text="多模态 AI"
|
||||||
badge-class="bg-[#cc785c]/10 dark:bg-primary/20 border border-[#cc785c]/20 dark:border-primary/30 text-[#cc785c] dark:text-primary"
|
badge-class="bg-[#cc785c]/10 dark:bg-[#cc785c]/20 border border-[#cc785c]/20 dark:border-[#d4a27f]/30 text-[#cc785c] dark:text-[#d4a27f]"
|
||||||
:platform-options="platformPresets.gemini.options"
|
:platform-options="platformPresets.gemini.options"
|
||||||
:install-command="geminiInstallCommand"
|
:install-command="geminiInstallCommand"
|
||||||
:config-files="[
|
:config-files="[
|
||||||
@@ -272,7 +272,7 @@
|
|||||||
>
|
>
|
||||||
<div class="max-w-4xl mx-auto text-center relative z-10">
|
<div class="max-w-4xl mx-auto text-center relative z-10">
|
||||||
<div
|
<div
|
||||||
class="inline-flex items-center gap-1.5 md:gap-2 rounded-full bg-[#cc785c]/10 dark:bg-purple-500/20 border border-[#cc785c]/20 dark:border-purple-500/40 px-3 md:px-4 py-1.5 md:py-2 text-xs md:text-sm font-medium text-[#cc785c] dark:text-purple-300 mb-4 md:mb-6 backdrop-blur-sm transition-all duration-500"
|
class="inline-flex items-center gap-1.5 md:gap-2 rounded-full bg-[#cc785c]/10 dark:bg-[#cc785c]/20 border border-[#cc785c]/20 dark:border-[#d4a27f]/30 px-3 md:px-4 py-1.5 md:py-2 text-xs md:text-sm font-medium text-[#cc785c] dark:text-[#d4a27f] mb-4 md:mb-6 backdrop-blur-sm transition-all duration-500"
|
||||||
:style="getBadgeStyle(SECTIONS.FEATURES)"
|
:style="getBadgeStyle(SECTIONS.FEATURES)"
|
||||||
>
|
>
|
||||||
<Sparkles class="h-3.5 w-3.5 md:h-4 md:w-4" />
|
<Sparkles class="h-3.5 w-3.5 md:h-4 md:w-4" />
|
||||||
@@ -287,7 +287,7 @@
|
|||||||
</h2>
|
</h2>
|
||||||
|
|
||||||
<p
|
<p
|
||||||
class="text-base md:text-lg text-[#666663] dark:text-gray-300 mb-6 md:mb-12 max-w-2xl mx-auto transition-all duration-700"
|
class="text-base md:text-lg text-[#666663] dark:text-[#c9c3b4] mb-6 md:mb-12 max-w-2xl mx-auto transition-all duration-700"
|
||||||
:style="getDescStyle(SECTIONS.FEATURES)"
|
:style="getDescStyle(SECTIONS.FEATURES)"
|
||||||
>
|
>
|
||||||
核心 API 代理功能已完成,正在载入更多功能
|
核心 API 代理功能已完成,正在载入更多功能
|
||||||
@@ -297,59 +297,69 @@
|
|||||||
<div
|
<div
|
||||||
v-for="(feature, idx) in featureCards"
|
v-for="(feature, idx) in featureCards"
|
||||||
:key="idx"
|
:key="idx"
|
||||||
class="bg-white/70 dark:bg-[#262624]/80 backdrop-blur-sm rounded-xl md:rounded-2xl p-4 md:p-6 border border-[#e5e4df] dark:border-[rgba(227,224,211,0.16)] hover:border-[#cc785c]/30 dark:hover:border-[#d4a27f]/40 transition-all duration-700"
|
class="group bg-white/90 dark:bg-[#262624]/80 backdrop-blur-sm rounded-xl md:rounded-2xl p-4 md:p-6 border transition-all duration-700"
|
||||||
|
:class="feature.status === 'completed'
|
||||||
|
? 'border-[#cc785c]/20 dark:border-[#d4a27f]/20'
|
||||||
|
: 'border-[#e5e4df] dark:border-[rgba(227,224,211,0.16)] border-dashed'"
|
||||||
:style="getFeatureCardStyle(SECTIONS.FEATURES, idx)"
|
:style="getFeatureCardStyle(SECTIONS.FEATURES, idx)"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="flex h-10 w-10 md:h-12 md:w-12 items-center justify-center rounded-lg md:rounded-xl mb-2 md:mb-4 mx-auto"
|
class="flex h-10 w-10 md:h-12 md:w-12 items-center justify-center rounded-lg md:rounded-xl mb-2 md:mb-4 mx-auto bg-[#cc785c]/8 dark:bg-[#cc785c]/12"
|
||||||
:class="feature.status === 'completed'
|
|
||||||
? 'bg-emerald-500/10 dark:bg-emerald-500/15'
|
|
||||||
: 'bg-[#cc785c]/10 dark:bg-[#cc785c]/15'"
|
|
||||||
>
|
>
|
||||||
<component
|
<component
|
||||||
:is="feature.icon"
|
:is="feature.icon"
|
||||||
class="h-5 w-5 md:h-6 md:w-6"
|
class="h-5 w-5 md:h-6 md:w-6 text-[#cc785c] dark:text-[#d4a27f]"
|
||||||
:class="feature.status === 'completed'
|
:class="{ 'opacity-50': feature.status !== 'completed' }"
|
||||||
? 'text-emerald-500 dark:text-emerald-400'
|
|
||||||
: 'text-[#cc785c] dark:text-[#d4a27f] animate-spin'"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<h3 class="text-base md:text-lg font-bold text-[#191919] dark:text-white mb-1 md:mb-2">
|
<h3
|
||||||
|
class="text-base md:text-lg font-bold mb-1 md:mb-2"
|
||||||
|
:class="feature.status === 'completed'
|
||||||
|
? 'text-[#191919] dark:text-white'
|
||||||
|
: 'text-[#666663] dark:text-[#a0a0a0]'"
|
||||||
|
>
|
||||||
{{ feature.title }}
|
{{ feature.title }}
|
||||||
</h3>
|
</h3>
|
||||||
<p class="text-xs md:text-sm text-[#666663] dark:text-[#c9c3b4]">
|
<p class="text-xs md:text-sm text-[#666663] dark:text-[#c9c3b4]">
|
||||||
{{ feature.desc }}
|
{{ feature.desc }}
|
||||||
</p>
|
</p>
|
||||||
<div
|
<div
|
||||||
class="mt-2 md:mt-3 inline-flex items-center gap-1.5 px-2 md:px-2.5 py-0.5 md:py-1 rounded-full text-xs font-medium"
|
class="mt-2 md:mt-3 inline-flex items-center gap-1.5 px-2 md:px-2.5 py-0.5 md:py-1 rounded-full text-xs font-medium border"
|
||||||
:class="feature.status === 'completed'
|
:class="feature.status === 'completed'
|
||||||
? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
|
? 'bg-[#cc785c]/5 text-[#cc785c] dark:text-[#d4a27f] border-[#cc785c]/20 dark:border-[#d4a27f]/20'
|
||||||
: 'bg-amber-500/10 text-amber-600 dark:text-amber-400'"
|
: 'bg-transparent text-[#91918d] dark:text-[#808080] border-[#e5e4df] dark:border-[rgba(227,224,211,0.12)]'"
|
||||||
>
|
>
|
||||||
{{ feature.status === 'completed' ? '已完成' : '进行中' }}
|
{{ feature.status === 'completed' ? '已完成' : '开发中' }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
class="mt-6 md:mt-12 transition-all duration-700"
|
class="mt-6 md:mt-12 transition-all duration-700 flex items-center justify-center gap-4"
|
||||||
:style="getButtonsStyle(SECTIONS.FEATURES)"
|
:style="getButtonsStyle(SECTIONS.FEATURES)"
|
||||||
>
|
>
|
||||||
|
<RouterLink
|
||||||
|
to="/guide"
|
||||||
|
class="inline-flex items-center justify-center gap-2 rounded-xl bg-transparent border-2 border-[#cc785c] px-6 py-3 text-base font-semibold text-[#cc785c] dark:text-[#d4a27f] dark:border-[#d4a27f] transition hover:bg-[#cc785c]/10 dark:hover:bg-[#d4a27f]/10 hover:scale-105 w-[160px]"
|
||||||
|
>
|
||||||
|
<BookOpen class="h-5 w-5" />
|
||||||
|
配置教程
|
||||||
|
</RouterLink>
|
||||||
<RouterLink
|
<RouterLink
|
||||||
v-if="authStore.isAuthenticated"
|
v-if="authStore.isAuthenticated"
|
||||||
:to="dashboardPath"
|
:to="dashboardPath"
|
||||||
class="inline-flex items-center gap-2 rounded-xl bg-primary hover:bg-primary/90 px-6 py-3 text-base font-semibold text-white shadow-lg shadow-primary/30 transition hover:shadow-primary/50 hover:scale-105"
|
class="inline-flex items-center justify-center gap-2 rounded-xl bg-transparent border-2 border-[#cc785c] px-6 py-3 text-base font-semibold text-[#cc785c] dark:text-[#d4a27f] dark:border-[#d4a27f] transition hover:bg-[#cc785c]/10 dark:hover:bg-[#d4a27f]/10 hover:scale-105 w-[160px]"
|
||||||
>
|
>
|
||||||
<Rocket class="h-5 w-5" />
|
<Rocket class="h-5 w-5" />
|
||||||
立即开始使用
|
立即开始
|
||||||
</RouterLink>
|
</RouterLink>
|
||||||
<button
|
<button
|
||||||
v-else
|
v-else
|
||||||
class="inline-flex items-center gap-2 rounded-xl bg-primary hover:bg-primary/90 px-6 py-3 text-base font-semibold text-white shadow-lg shadow-primary/30 transition hover:shadow-primary/50 hover:scale-105"
|
class="inline-flex items-center justify-center gap-2 rounded-xl bg-transparent border-2 border-[#cc785c] px-6 py-3 text-base font-semibold text-[#cc785c] dark:text-[#d4a27f] dark:border-[#d4a27f] transition hover:bg-[#cc785c]/10 dark:hover:bg-[#d4a27f]/10 hover:scale-105 w-[160px]"
|
||||||
@click="showLoginDialog = true"
|
@click="showLoginDialog = true"
|
||||||
>
|
>
|
||||||
<Rocket class="h-5 w-5" />
|
<Rocket class="h-5 w-5" />
|
||||||
立即开始使用
|
立即开始
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -364,6 +374,7 @@
|
|||||||
import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
|
import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
|
||||||
import { RouterLink } from 'vue-router'
|
import { RouterLink } from 'vue-router'
|
||||||
import {
|
import {
|
||||||
|
BookOpen,
|
||||||
ChevronDown,
|
ChevronDown,
|
||||||
Code2,
|
Code2,
|
||||||
Moon,
|
Moon,
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { computed, type Ref } from 'vue'
|
import { computed, type Ref } from 'vue'
|
||||||
import { Apple, Box, Check, Loader2, Monitor, Terminal } from 'lucide-vue-next'
|
import { Apple, Box, Layers, Monitor, Puzzle, Terminal, Users } from 'lucide-vue-next'
|
||||||
import type { Component } from 'vue'
|
import type { Component } from 'vue'
|
||||||
|
|
||||||
// Section index constants
|
// Section index constants
|
||||||
@@ -25,21 +25,21 @@ export const sections = [
|
|||||||
// Feature cards data
|
// Feature cards data
|
||||||
export const featureCards = [
|
export const featureCards = [
|
||||||
{
|
{
|
||||||
icon: Check,
|
icon: Layers,
|
||||||
title: 'Claude / OpenAI / Gemini',
|
title: 'Claude / OpenAI / Gemini',
|
||||||
desc: '已完整接入三大主流 AI 编程助手的标准 API',
|
desc: '已完整接入三大主流 AI 编程助手的标准 API',
|
||||||
status: 'completed' as const
|
status: 'completed' as const
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: Check,
|
icon: Puzzle,
|
||||||
title: '灵活的 API 扩展',
|
title: '格式转换',
|
||||||
desc: '插件化架构,可快速接入其他 LLM Provider',
|
desc: '开启/关闭API格式相互转换、自定义请求头',
|
||||||
status: 'completed' as const
|
status: 'completed' as const
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
icon: Loader2,
|
icon: Users,
|
||||||
title: '项目追踪',
|
title: '协同开发',
|
||||||
desc: '开发日志、代码 Review、文档生成等功能即将到来',
|
desc: '远程开发、Skill分享、Playground等功能即将到来',
|
||||||
status: 'in-progress' as const
|
status: 'in-progress' as const
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|||||||
Reference in New Issue
Block a user