|
| 1 | +<script setup lang="ts"> |
| 2 | +import { ref, computed } from 'vue' |
| 3 | +import { useData } from 'vitepress' |
| 4 | +
|
| 5 | +const { lang, page } = useData() |
| 6 | +const question = ref('') |
| 7 | +const isSubmitting = ref(false) |
| 8 | +
|
| 9 | +// 检测中文页面:通过 lang 值或路径判断 |
| 10 | +const isZh = computed(() => { |
| 11 | + const langValue = lang.value |
| 12 | + const path = page.value?.relativePath || page.value?.filePath || '' |
| 13 | + const route = page.value?.route || '' |
| 14 | + |
| 15 | + // 检查 lang 值(可能是 'zh-Hans', 'zh-CN', 'zh' 等) |
| 16 | + if (langValue && (langValue.includes('zh') || langValue.includes('ZH'))) { |
| 17 | + return true |
| 18 | + } |
| 19 | + |
| 20 | + // 检查路径是否包含 /zh/ |
| 21 | + if (path.includes('/zh/') || route.includes('/zh/')) { |
| 22 | + return true |
| 23 | + } |
| 24 | + |
| 25 | + return false |
| 26 | +}) |
| 27 | +
|
| 28 | +const texts = computed(() => { |
| 29 | + if (isZh.value) { |
| 30 | + return { |
| 31 | + title: '快速提问', |
| 32 | + description: '输入您的问题,复制提示词后可在任何 AI 助手(如 ChatGPT、Claude、Cursor、GitHub Copilot 等)中使用', |
| 33 | + placeholder: '例如:如何配置一个使用 C++20 模块的目标?', |
| 34 | + button: '复制提示词', |
| 35 | + submitting: '复制中...', |
| 36 | + hint: '提示:按', |
| 37 | + hintKey: 'Ctrl/Cmd + Enter', |
| 38 | + hintSuffix: '快速复制', |
| 39 | + alertEmpty: '请输入您的问题', |
| 40 | + copySuccess: '提示词已复制到剪贴板!您可以在任何 AI 助手中粘贴使用。', |
| 41 | + copyFailed: '复制失败,请手动复制', |
| 42 | + promptTemplate: `请参考 https://xmake.io/llms-full.txt 了解 xmake 的完整 API 和功能。 |
| 43 | +
|
| 44 | +我的问题: |
| 45 | +` |
| 46 | + } |
| 47 | + } else { |
| 48 | + return { |
| 49 | + title: 'Quick Question', |
| 50 | + description: 'Enter your question, copy the prompt and use it in any AI assistant (such as ChatGPT, Claude, Cursor, GitHub Copilot, etc.)', |
| 51 | + placeholder: 'For example: How do I configure a target that uses C++20 modules?', |
| 52 | + button: 'Copy Prompt', |
| 53 | + submitting: 'Copying...', |
| 54 | + hint: 'Tip: Press', |
| 55 | + hintKey: 'Ctrl/Cmd + Enter', |
| 56 | + hintSuffix: 'to copy quickly', |
| 57 | + alertEmpty: 'Please enter your question', |
| 58 | + copySuccess: 'Prompt copied to clipboard! You can paste it in any AI assistant.', |
| 59 | + copyFailed: 'Copy failed, please copy manually', |
| 60 | + promptTemplate: `Please refer to https://xmake.io/llms-full.txt to understand xmake's complete API and features. |
| 61 | +
|
| 62 | +My question: |
| 63 | +` |
| 64 | + } |
| 65 | + } |
| 66 | +}) |
| 67 | +
|
| 68 | +function copyPrompt() { |
| 69 | + if (!question.value.trim()) { |
| 70 | + alert(texts.value.alertEmpty) |
| 71 | + return |
| 72 | + } |
| 73 | +
|
| 74 | + isSubmitting.value = true |
| 75 | +
|
| 76 | + const fullPrompt = texts.value.promptTemplate + question.value.trim() |
| 77 | + |
| 78 | + navigator.clipboard.writeText(fullPrompt).then(() => { |
| 79 | + alert(texts.value.copySuccess) |
| 80 | + isSubmitting.value = false |
| 81 | + }).catch(() => { |
| 82 | + alert(texts.value.copyFailed) |
| 83 | + isSubmitting.value = false |
| 84 | + }) |
| 85 | +} |
| 86 | +
|
| 87 | +function handleKeyPress(event: KeyboardEvent) { |
| 88 | + if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) { |
| 89 | + event.preventDefault() |
| 90 | + copyPrompt() |
| 91 | + } |
| 92 | +} |
| 93 | +</script> |
| 94 | + |
| 95 | +<template> |
| 96 | + <div class="ai-assistant"> |
| 97 | + <div class="ai-assistant-header"> |
| 98 | + <h3>{{ texts.title }}</h3> |
| 99 | + <p>{{ texts.description }}</p> |
| 100 | + </div> |
| 101 | + <div class="ai-assistant-form"> |
| 102 | + <textarea |
| 103 | + v-model="question" |
| 104 | + class="ai-assistant-input" |
| 105 | + :placeholder="texts.placeholder" |
| 106 | + rows="4" |
| 107 | + @keydown="handleKeyPress" |
| 108 | + ></textarea> |
| 109 | + <button |
| 110 | + class="ai-assistant-button" |
| 111 | + :disabled="isSubmitting || !question.trim()" |
| 112 | + @click="copyPrompt" |
| 113 | + > |
| 114 | + {{ isSubmitting ? texts.submitting : texts.button }} |
| 115 | + </button> |
| 116 | + <p class="ai-assistant-hint"> |
| 117 | + {{ texts.hint }} <kbd>{{ texts.hintKey }}</kbd> {{ texts.hintSuffix }} |
| 118 | + </p> |
| 119 | + </div> |
| 120 | + </div> |
| 121 | +</template> |
| 122 | + |
| 123 | +<style scoped> |
| 124 | +.ai-assistant { |
| 125 | + margin: 2rem 0; |
| 126 | + padding: 1.5rem; |
| 127 | + border: 1px solid var(--vp-c-divider); |
| 128 | + border-radius: 8px; |
| 129 | + background: var(--vp-c-bg-soft); |
| 130 | +} |
| 131 | +
|
| 132 | +.ai-assistant-header h3 { |
| 133 | + margin: 0 0 0.5rem 0; |
| 134 | + font-size: 1.25rem; |
| 135 | + font-weight: 600; |
| 136 | + color: var(--vp-c-text-1); |
| 137 | +} |
| 138 | +
|
| 139 | +.ai-assistant-header p { |
| 140 | + margin: 0 0 1rem 0; |
| 141 | + font-size: 0.9rem; |
| 142 | + color: var(--vp-c-text-2); |
| 143 | +} |
| 144 | +
|
| 145 | +.ai-assistant-form { |
| 146 | + display: flex; |
| 147 | + flex-direction: column; |
| 148 | + gap: 0.75rem; |
| 149 | +} |
| 150 | +
|
| 151 | +.ai-assistant-input { |
| 152 | + width: 100%; |
| 153 | + padding: 0.75rem; |
| 154 | + font-size: 0.95rem; |
| 155 | + font-family: inherit; |
| 156 | + line-height: 1.5; |
| 157 | + border: 1px solid var(--vp-c-divider); |
| 158 | + border-radius: 6px; |
| 159 | + background: var(--vp-c-bg); |
| 160 | + color: var(--vp-c-text-1); |
| 161 | + resize: vertical; |
| 162 | + transition: border-color 0.2s; |
| 163 | +} |
| 164 | +
|
| 165 | +.ai-assistant-input:focus { |
| 166 | + outline: none; |
| 167 | + border-color: var(--vp-c-brand); |
| 168 | + box-shadow: 0 0 0 3px var(--vp-c-brand-soft); |
| 169 | +} |
| 170 | +
|
| 171 | +.ai-assistant-button { |
| 172 | + padding: 0.75rem 1.5rem; |
| 173 | + font-size: 0.95rem; |
| 174 | + font-weight: 500; |
| 175 | + color: var(--vp-c-bg); |
| 176 | + background: var(--vp-c-brand); |
| 177 | + border: none; |
| 178 | + border-radius: 6px; |
| 179 | + cursor: pointer; |
| 180 | + transition: background-color 0.2s, transform 0.1s; |
| 181 | + align-self: flex-start; |
| 182 | +} |
| 183 | +
|
| 184 | +.ai-assistant-button:hover:not(:disabled) { |
| 185 | + background: var(--vp-c-brand-dark); |
| 186 | + transform: translateY(-1px); |
| 187 | +} |
| 188 | +
|
| 189 | +.ai-assistant-button:active:not(:disabled) { |
| 190 | + transform: translateY(0); |
| 191 | +} |
| 192 | +
|
| 193 | +.ai-assistant-button:disabled { |
| 194 | + opacity: 0.6; |
| 195 | + cursor: not-allowed; |
| 196 | +} |
| 197 | +
|
| 198 | +.ai-assistant-hint { |
| 199 | + margin: 0; |
| 200 | + font-size: 0.85rem; |
| 201 | + color: var(--vp-c-text-2); |
| 202 | +} |
| 203 | +
|
| 204 | +.ai-assistant-hint kbd { |
| 205 | + padding: 0.2rem 0.4rem; |
| 206 | + font-size: 0.8rem; |
| 207 | + font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; |
| 208 | + background: var(--vp-c-bg-alt); |
| 209 | + border: 1px solid var(--vp-c-divider); |
| 210 | + border-radius: 3px; |
| 211 | + box-shadow: 0 1px 0 var(--vp-c-divider); |
| 212 | +} |
| 213 | +</style> |
| 214 | + |
0 commit comments