diff --git a/spx-gui/src/components/editor/code-editor/common.ts b/spx-gui/src/components/editor/code-editor/common.ts index 57d8c3a02..eed8b3d56 100644 --- a/spx-gui/src/components/editor/code-editor/common.ts +++ b/spx-gui/src/components/editor/code-editor/common.ts @@ -48,8 +48,10 @@ export enum ResourceReferenceKind { */ export type ResourceURI = string +const resourceURIPrefix = 'spx://resources/' + export function isResourceUri(uri: string): uri is ResourceURI { - return uri.startsWith('spx://resources/') + return uri.startsWith(resourceURIPrefix) } export type ResourceIdentifier = { @@ -468,8 +470,7 @@ export type ResourceNameWithType = { export function parseResourceURI(uri: string): ResourceNameWithType[] { if (!isResourceUri(uri)) throw new Error(`Invalid resource URI: ${uri}`) - const url = new URL(uri) - const parts = url.pathname.slice(1).split('/').map(decodeURIComponent) + const parts = uri.slice(resourceURIPrefix.length).split('/').map(decodeURIComponent) const parsed: ResourceNameWithType[] = [] for (let i = 0; i < parts.length; ) { const type = ( diff --git a/spx-gui/src/components/editor/code-editor/ui/CodeEditorUI.vue b/spx-gui/src/components/editor/code-editor/ui/CodeEditorUI.vue index b17e23538..45f6f13f7 100644 --- a/spx-gui/src/components/editor/code-editor/ui/CodeEditorUI.vue +++ b/spx-gui/src/components/editor/code-editor/ui/CodeEditorUI.vue @@ -61,6 +61,7 @@ import APIReferenceUI from './api-reference/APIReferenceUI.vue' import HoverUI from './hover/HoverUI.vue' import CompletionUI from './completion/CompletionUI.vue' import CopilotUI from './copilot/CopilotUI.vue' +import CopilotTrigger from './copilot/CopilotTrigger.vue' import DiagnosticsUI from './diagnostics/DiagnosticsUI.vue' import ResourceReferenceUI from './resource-reference/ResourceReferenceUI.vue' import ContextMenuUI from './context-menu/ContextMenuUI.vue' @@ -248,25 +249,7 @@ function zoomReset() { @@ -316,25 +299,6 @@ function zoomReset() { padding: 12px 16px; display: flex; border-top: 1px solid var(--ui-color-dividing-line-2); - - .copilot-trigger { - flex: 1 1 0; - padding: 8px 12px; - display: flex; - align-items: center; - justify-content: center; - gap: 12px; - border-radius: var(--ui-border-radius-1); - background-color: var(--ui-color-grey-300); - cursor: pointer; - transition: 0.2s; - - &:hover { - // TODO: confirm hover style - color: var(--ui-color-title); - background-color: var(--ui-color-grey-400); - } - } } .copilot { diff --git a/spx-gui/src/components/editor/code-editor/ui/api-reference/APIReferenceItem.vue b/spx-gui/src/components/editor/code-editor/ui/api-reference/APIReferenceItem.vue index 4bca7c2ec..08a96f7d6 100644 --- a/spx-gui/src/components/editor/code-editor/ui/api-reference/APIReferenceItem.vue +++ b/spx-gui/src/components/editor/code-editor/ui/api-reference/APIReferenceItem.vue @@ -68,7 +68,7 @@ const handleExplain = useMessageHandle( diff --git a/spx-gui/src/components/editor/code-editor/ui/copilot/CopilotTrigger.vue b/spx-gui/src/components/editor/code-editor/ui/copilot/CopilotTrigger.vue new file mode 100644 index 000000000..c7b5e41c2 --- /dev/null +++ b/spx-gui/src/components/editor/code-editor/ui/copilot/CopilotTrigger.vue @@ -0,0 +1,39 @@ + + + + + diff --git a/spx-gui/src/components/editor/code-editor/ui/copilot/CopilotUI.vue b/spx-gui/src/components/editor/code-editor/ui/copilot/CopilotUI.vue index 6b2939c1c..f5c5bf65a 100644 --- a/spx-gui/src/components/editor/code-editor/ui/copilot/CopilotUI.vue +++ b/spx-gui/src/components/editor/code-editor/ui/copilot/CopilotUI.vue @@ -3,8 +3,9 @@ import { computed, nextTick, ref, watch } from 'vue' import { UIIcon } from '@/components/ui' import { useCodeEditorUICtx } from '../CodeEditorUI.vue' import CopilotInput from './CopilotInput.vue' -import type { CopilotController } from '.' import CopilotRound from './CopilotRound.vue' +import logoSrc from './logo.svg' +import type { CopilotController } from '.' const props = defineProps<{ controller: CopilotController @@ -57,91 +58,7 @@ watch( />
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + Copilot

{{ $t({ @@ -153,8 +70,8 @@ watch(

{{ $t({ - en: 'TODO', - zh: 'TODO' + en: 'Copilot may help you write or understand code, find and fix problems', + zh: 'Copilot 可以帮助你编写或理解代码，发现并修复问题' }) }}

@@ -236,6 +153,8 @@ watch( margin-top: 16px; font-size: 13px; line-height: 20px; + text-align: center; + color: var(--ui-color-grey-800); } } } diff --git a/spx-gui/src/components/editor/code-editor/ui/copilot/logo.svg b/spx-gui/src/components/editor/code-editor/ui/copilot/logo.svg new file mode 100644 index 000000000..1ba6235ad --- /dev/null +++ b/spx-gui/src/components/editor/code-editor/ui/copilot/logo.svg @@ -0,0 +1,91 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/spx-gui/src/components/editor/code-editor/ui/definition/DefinitionItem.vue b/spx-gui/src/components/editor/code-editor/ui/definition/DefinitionItem.vue index 401d56b69..afa9d1d32 100644 --- a/spx-gui/src/components/editor/code-editor/ui/definition/DefinitionItem.vue +++ b/spx-gui/src/components/editor/code-editor/ui/definition/DefinitionItem.vue @@ -21,4 +21,8 @@ const props = defineProps<{ flex-direction: column; gap: 2px; } + +.definition-item + .definition-item { + margin-top: 8px; +} diff --git a/spx-gui/src/components/editor/code-editor/ui/definition/DefinitionOverviewWrapper.vue b/spx-gui/src/components/editor/code-editor/ui/definition/DefinitionOverviewWrapper.vue index 854735a5a..624a078b7 100644 --- a/spx-gui/src/components/editor/code-editor/ui/definition/DefinitionOverviewWrapper.vue +++ b/spx-gui/src/components/editor/code-editor/ui/definition/DefinitionOverviewWrapper.vue @@ -12,10 +12,10 @@ const childrenText = useSlotText('default', true) diff --git a/spx-gui/src/components/editor/code-editor/ui/markdown/DiagnosticItem.vue b/spx-gui/src/components/editor/code-editor/ui/markdown/DiagnosticItem.vue index 791e34f00..e70c45954 100644 --- a/spx-gui/src/components/editor/code-editor/ui/markdown/DiagnosticItem.vue +++ b/spx-gui/src/components/editor/code-editor/ui/markdown/DiagnosticItem.vue @@ -25,7 +25,7 @@ defineProps<{ } .icon { - margin-top: 1px; + margin-top: 3px; } .body { diff --git a/spx-gui/src/components/editor/code-editor/ui/markdown/MarkdownView.vue b/spx-gui/src/components/editor/code-editor/ui/markdown/MarkdownView.vue index be78a9aee..d8ab645fe 100644 --- a/spx-gui/src/components/editor/code-editor/ui/markdown/MarkdownView.vue +++ b/spx-gui/src/components/editor/code-editor/ui/markdown/MarkdownView.vue @@ -120,6 +120,7 @@ const markdownValue = computed(() => (typeof props.value === 'string' ? props.va display: flex; flex-direction: column; padding-left: 1.5em; + gap: 8px; } :deep(ul) { list-style: square; @@ -127,6 +128,9 @@ const markdownValue = computed(() => (typeof props.value === 'string' ? props.va :deep(ol) { list-style: decimal; } + :deep(li > *:not(:last-child)) { + margin-bottom: 8px; + } :deep(a) { color: inherit; @@ -159,10 +163,10 @@ const markdownValue = computed(() => (typeof props.value === 'string' ? props.va // TODO: keep consistent with component `UICode` font-size: 0.83em; line-height: 1.6; - padding: 4px 4px; + padding: 2px 4px; border-radius: 4px; border: 1px solid var(--ui-color-grey-500); - background: var(--ui-color-grey-100); + background: var(--ui-color-grey-300); word-break: break-word; overflow-wrap: break-word; } diff --git a/spx-gui/src/components/editor/code-editor/ui/markdown/common/BlockActionBtn.vue b/spx-gui/src/components/editor/code-editor/ui/markdown/common/BlockActionBtn.vue index 4c4252e43..5e92d0d14 100644 --- a/spx-gui/src/components/editor/code-editor/ui/markdown/common/BlockActionBtn.vue +++ b/spx-gui/src/components/editor/code-editor/ui/markdown/common/BlockActionBtn.vue @@ -28,7 +28,7 @@ defineProps<{ cursor: pointer; &:hover { - color: var(--ui-color-title); + color: var(--ui-color-grey-700); } .icon {