@gcsa/console-vue 0.1.0

package/src/components/GcsaChatPanel.vue

@@ -0,0 +1,249 @@
+<template>
+  <section class="gcsa-chat gcsa-ui-surface">
+    <Transition name="gcsa-chat-toast">
+      <div
+        v-if="copyToast"
+        class="gcsa-chat__toast gcsa-toast"
+        :class="`gcsa-toast--${copyToast.type}`"
+        role="status"
+      >
+        <span class="gcsa-toast__icon" aria-hidden="true">
+          <svg v-if="copyToast.type === 'success'" width="14" height="14" viewBox="0 0 24 24" fill="none">
+            <path d="M20 6 9 17l-5-5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
+          </svg>
+          <svg v-else width="14" height="14" viewBox="0 0 24 24" fill="none">
+            <path d="M15 9l-6 6M9 9l6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+            <circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="1.75" />
+          </svg>
+        </span>
+        <span class="gcsa-toast__content">{{ copyToast.text }}</span>
+      </div>
+    </Transition>
+
+    <header v-if="$slots.header" class="gcsa-chat__header">
+      <slot name="header" />
+    </header>
+
+    <div ref="listRef" class="gcsa-chat__messages">
+      <div v-if="!messages.length" class="gcsa-chat__empty">
+        <slot name="empty">{{ resolvedEmptyText }}</slot>
+      </div>
+
+      <template v-for="(message, index) in messages" :key="message.id">
+        <slot name="message" :message="message" :index="index">
+          <article
+            class="gcsa-chat__message"
+            :class="[
+              `gcsa-chat__message--${message.role}`,
+              {
+                'gcsa-chat__message--system-ready': message.systemReady,
+                'gcsa-chat__message--error': message.error || message.status === 'error',
+                'gcsa-chat__message--streaming': message.status === 'streaming'
+              }
+            ]"
+          >
+            <div
+              v-if="showAvatars && message.role !== 'system'"
+              class="gcsa-chat__avatar"
+              :class="`gcsa-chat__avatar--${message.role}`"
+            >
+              <slot name="avatar" :message="message" :index="index">
+                <GcsaAvatar :text="avatarLabel(message)" />
+              </slot>
+            </div>
+
+            <div class="gcsa-chat__message-body">
+              <div
+                class="gcsa-chat__bubble"
+                :class="[
+                  `gcsa-chat__bubble--${message.role}`,
+                  { 'gcsa-chat__bubble--rich': useMarkdown(message) }
+                ]"
+              >
+                <slot name="message-content" :message="message" :index="index">
+                  <GcsaMarkdownRenderer
+                    v-if="useMarkdown(message)"
+                    :content="message.content"
+                  />
+                  <p v-else class="gcsa-chat__plain">{{ message.content }}</p>
+                  <span
+                    v-if="message.status === 'streaming'"
+                    class="gcsa-chat__cursor"
+                    aria-hidden="true"
+                  >{{ streamingCursor }}</span>
+                </slot>
+
+                <div
+                  v-if="copyable && message.role === 'assistant' && message.content"
+                  class="gcsa-chat__bubble-actions"
+                >
+                  <slot name="message-actions" :message="message" :index="index">
+                    <button
+                      type="button"
+                      class="gcsa-chat__action-btn"
+                      :title="resolvedCopyLabel"
+                      :aria-label="resolvedCopyLabel"
+                      @click.stop="copyMessage(message)"
+                    >
+                      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true">
+                        <rect x="9" y="9" width="13" height="13" rx="2" stroke="currentColor" stroke-width="1.5" />
+                        <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" stroke="currentColor" stroke-width="1.5" />
+                      </svg>
+                    </button>
+                  </slot>
+                </div>
+              </div>
+
+              <footer
+                v-if="showTimestamp && message.role !== 'system'"
+                class="gcsa-chat__meta"
+              >
+                <slot name="message-footer" :message="message" :index="index">
+                  <time v-if="formatTime(message.createdAt)" :datetime="timeIso(message.createdAt)">
+                    {{ formatTime(message.createdAt) }}
+                  </time>
+                </slot>
+              </footer>
+            </div>
+          </article>
+        </slot>
+      </template>
+    </div>
+
+    <slot name="composer">
+      <div class="gcsa-chat__composer">
+        <slot name="composer-prefix" />
+        <textarea
+          v-model="draft"
+          class="gcsa-textarea gcsa-chat__input"
+          :placeholder="resolvedPlaceholder"
+          :disabled="disabled || loading"
+          rows="1"
+          @keydown.enter.exact.prevent="submit"
+        />
+        <slot name="composer-actions">
+          <GcsaButton :disabled="!draft.trim() || loading || disabled" @click="submit">
+            {{ loading ? resolvedSendingLabel : resolvedSendLabel }}
+          </GcsaButton>
+        </slot>
+      </div>
+    </slot>
+  </section>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, nextTick, onUnmounted, ref, watch } from 'vue';
+import type { GcsaChatMessage, GcsaChatMessageRole } from '@gcsa/console-core';
+import {
+  copyGcsaText,
+  formatGcsaChatTime,
+  gcsaChatAvatarLabel,
+  shouldRenderGcsaChatMarkdown
+} from '@gcsa/console-core';
+import { GCSA_MESSAGE_KEY } from '../composables/useMessage';
+import type { GcsaChatPanelProps } from '../types/componentProps';
+import GcsaAvatar from './GcsaAvatar.vue';
+import GcsaButton from './GcsaButton.vue';
+import GcsaMarkdownRenderer from './GcsaMarkdownRenderer.vue';
+import { useGcsaLocaleMessages } from '../composables/useGcsaLocale';
+
+defineOptions({ name: 'GcsaChatPanel' });
+
+const props = withDefaults(
+  defineProps<GcsaChatPanelProps>(),
+  {
+    loading: false,
+    disabled: false,
+    renderMarkdown: 'assistant',
+    showTimestamp: true,
+    showAvatars: true,
+    copyable: true,
+    streamingCursor: '▍'
+  }
+);
+
+const localeMessages = useGcsaLocaleMessages();
+const resolvedPlaceholder = computed(() => props.placeholder ?? localeMessages.value.chatPlaceholder);
+const resolvedSendLabel = computed(() => props.sendLabel ?? localeMessages.value.chatSend);
+const resolvedSendingLabel = computed(() => props.sendingLabel ?? localeMessages.value.chatSending);
+const resolvedEmptyText = computed(() => props.emptyText ?? localeMessages.value.chatEmpty);
+const resolvedCopyLabel = computed(() => props.copyLabel ?? localeMessages.value.chatCopy);
+const resolvedCopySuccessLabel = computed(() => props.copySuccessLabel ?? localeMessages.value.chatCopySuccess);
+const resolvedCopyErrorLabel = computed(() => props.copyErrorLabel ?? localeMessages.value.chatCopyError);
+
+const emit = defineEmits<{
+  send: [content: string];
+  copy: [message: GcsaChatMessage];
+}>();
+
+const draft = ref('');
+const listRef = ref<HTMLElement | null>(null);
+const copyToast = ref<{ text: string; type: 'success' | 'error' } | null>(null);
+const messageApi = inject(GCSA_MESSAGE_KEY, null);
+let copyToastTimer: ReturnType<typeof setTimeout> | null = null;
+
+function useMarkdown(message: GcsaChatMessage) {
+  return shouldRenderGcsaChatMarkdown(message, props.renderMarkdown);
+}
+
+function avatarLabel(message: GcsaChatMessage) {
+  return gcsaChatAvatarLabel(message, props.avatarLabels);
+}
+
+function formatTime(value?: string | number | Date) {
+  return formatGcsaChatTime(value);
+}
+
+function timeIso(value?: string | number | Date) {
+  if (value == null || value === '') return undefined;
+  const date = value instanceof Date ? value : new Date(value);
+  if (Number.isNaN(date.getTime())) return undefined;
+  return date.toISOString();
+}
+
+function submit() {
+  const content = draft.value.trim();
+  if (!content || props.loading || props.disabled) return;
+  emit('send', content);
+  draft.value = '';
+}
+
+async function copyMessage(message: GcsaChatMessage) {
+  const ok = await copyGcsaText(message.content);
+  emit('copy', message);
+  showCopyFeedback(ok ? resolvedCopySuccessLabel.value : resolvedCopyErrorLabel.value, ok ? 'success' : 'error');
+}
+
+function showCopyFeedback(text: string, tone: 'success' | 'error' = 'success') {
+  if (messageApi) {
+    messageApi[tone](text);
+    return;
+  }
+
+  copyToast.value = { text, type: tone };
+  if (copyToastTimer) clearTimeout(copyToastTimer);
+  copyToastTimer = setTimeout(() => {
+    copyToast.value = null;
+    copyToastTimer = null;
+  }, 2000);
+}
+
+onUnmounted(() => {
+  if (copyToastTimer) clearTimeout(copyToastTimer);
+});
+
+async function scrollToBottom() {
+  await nextTick();
+  if (listRef.value) {
+    listRef.value.scrollTop = listRef.value.scrollHeight;
+  }
+}
+
+watch(
+  () => {
+    const last = props.messages[props.messages.length - 1];
+    return [props.messages.length, last?.content, last?.status] as const;
+  },
+  scrollToBottom
+);
+</script>

package/src/components/GcsaCheckbox.vue

@@ -0,0 +1,45 @@
+<template>
+  <Checkbox.Root
+    :checked="modelValue"
+    :disabled="disabled"
+    :aria-label="ariaLabel"
+    class="gcsa-checkbox gcsa-focus-ring"
+    @checked-change="onChange"
+  >
+    <Checkbox.Control class="gcsa-checkbox__box">
+      <Checkbox.Indicator class="gcsa-checkbox__indicator">
+        <svg viewBox="0 0 12 12" width="10" height="10" aria-hidden="true">
+          <path
+            d="M2 6.2L4.8 9 10 3.2"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.8"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </svg>
+      </Checkbox.Indicator>
+    </Checkbox.Control>
+    <Checkbox.Label v-if="label || $slots.default" class="gcsa-checkbox__label">
+      <slot>{{ label }}</slot>
+    </Checkbox.Label>
+    <Checkbox.HiddenInput />
+  </Checkbox.Root>
+</template>
+
+<script setup lang="ts">
+import { Checkbox } from '@ark-ui/vue/checkbox';
+import type { GcsaCheckboxProps } from '../types/componentProps';
+
+defineOptions({ name: 'GcsaCheckbox' });
+
+defineProps<GcsaCheckboxProps>();
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean];
+}>();
+
+function onChange(details: { checked: boolean | 'indeterminate' }) {
+  emit('update:modelValue', details.checked === true);
+}
+</script>

package/src/components/GcsaCollapse.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="gcsa-collapse" :class="{ 'gcsa-collapse--bordered': bordered }">
+    <section v-for="item in items" :key="item.key" class="gcsa-collapse__item" :data-open="isOpen(item.key) || undefined">
+      <button type="button" class="gcsa-collapse__trigger gcsa-focus-ring" :disabled="item.disabled" :aria-expanded="isOpen(item.key)" :aria-controls="`gcsa-collapse-${item.key}`" @click="toggle(item.key)">
+        <span class="gcsa-collapse__indicator" aria-hidden="true">{{ isOpen(item.key) ? '−' : '+' }}</span>
+        <span class="gcsa-collapse__title">{{ item.title }}</span>
+        <slot name="extra" :item="item" />
+      </button>
+      <div v-show="isOpen(item.key)" :id="`gcsa-collapse-${item.key}`" class="gcsa-collapse__content" role="region">
+        <slot :name="`content-${item.key}`" :item="item">{{ item.content }}</slot>
+      </div>
+    </section>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import type { GcsaCollapseProps } from '../types/componentProps';
+
+const props = withDefaults(defineProps<GcsaCollapseProps>(), { modelValue: undefined, accordion: false, bordered: true, defaultOpenKeys: () => [] });
+
+const emit = defineEmits<{ 'update:modelValue': [keys: string[]] }>();
+
+const uncontrolledOpen = ref<string[]>([...props.defaultOpenKeys]);
+
+watch(
+  () => props.defaultOpenKeys,
+  (keys) => {
+    if (props.modelValue === undefined) {
+      uncontrolledOpen.value = [...keys];
+    }
+  }
+);
+
+const openKeys = computed(() => props.modelValue ?? uncontrolledOpen.value);
+
+function isOpen(key: string) { return openKeys.value.includes(key); }
+
+function toggle(key: string) {
+  if (props.items.find(item => item.key === key)?.disabled) return;
+  const next = isOpen(key)
+    ? openKeys.value.filter(value => value !== key)
+    : props.accordion ? [key] : [...openKeys.value, key];
+
+  if (props.modelValue === undefined) {
+    uncontrolledOpen.value = next;
+  }
+
+  emit('update:modelValue', next);
+}
+</script>

package/src/components/GcsaConfigProvider.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="gcsa-console-root" :data-gcsa-theme="theme">
+    <slot />
+    <Teleport to="body">
+      <div
+        class="gcsa-portal-scope gcsa-toast-portal"
+        :data-gcsa-theme="props.theme"
+        :style="toastPortalStyle"
+      >
+        <GcsaToastStack :toasts="toasts" />
+      </div>
+    </Teleport>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, onMounted, onUnmounted, provide, ref, watch } from 'vue';
+import type { GcsaConsoleTheme, GcsaConsoleLocale, GcsaComponentSize } from '@gcsa/console-core';
+import type { GcsaConfigProviderProps } from '../types/componentProps';
+import type { GcsaMessageType } from '@gcsa/console-core';
+import { GCSA_MESSAGE_DURATION_MS } from '@gcsa/console-core';
+import GcsaToastStack from './GcsaToastStack.vue';
+import { GCSA_MESSAGE_KEY, type GcsaMessageApi } from '../composables/useMessage';
+import { GCSA_LOCALE_KEY } from '../composables/useGcsaLocale';
+import { GCSA_THEME_KEY } from '../composables/useGcsaTheme';
+import { GCSA_RESTORE_DOCUMENT_THEME_KEY } from '../composables/useDocumentThemeSync';
+import { GCSA_Z_INDEX_KEY, provideGcsaZIndex, readToastZIndex, type GcsaZIndexApi } from '../composables/useGcsaZIndex';
+import {
+  GCSA_COMPONENT_SIZE_KEY,
+  provideGcsaComponentSize
+} from '../composables/useGcsaComponentSize';
+
+defineOptions({ name: 'GcsaConfigProvider' });
+
+const GCSA_CONFIG_PROVIDER_KEY = Symbol('gcsa-config-provider');
+
+const props = withDefaults(
+  defineProps<GcsaConfigProviderProps>(),
+  { theme: 'dark', locale: 'zh-CN', syncDocument: true }
+);
+
+const parentSize = inject(GCSA_COMPONENT_SIZE_KEY, null);
+const resolvedSize = computed(
+  () => props.size ?? parentSize?.value ?? ('md' as GcsaComponentSize)
+);
+provideGcsaComponentSize(resolvedSize);
+
+const parentProvider = inject(GCSA_CONFIG_PROVIDER_KEY, false);
+const restoreDocumentTheme = inject(GCSA_RESTORE_DOCUMENT_THEME_KEY, null);
+
+function shouldSyncDocument() {
+  return !parentProvider && props.syncDocument;
+}
+
+const toasts = ref<Array<{ id: number; message: string; type: GcsaMessageType }>>([]);
+const toastZIndex = ref<number>(readToastZIndex());
+let id = 0;
+const MAX_TOASTS = 4;
+
+const zIndexApi: GcsaZIndexApi = !parentProvider
+  ? provideGcsaZIndex()
+  : inject(GCSA_Z_INDEX_KEY, null) ?? provideGcsaZIndex();
+
+if (parentProvider) {
+  provide(GCSA_Z_INDEX_KEY, zIndexApi);
+}
+
+const api: GcsaMessageApi = {
+  success(message: string) {
+    push(message, 'success');
+  },
+  error(message: string) {
+    push(message, 'error');
+  },
+  info(message: string) {
+    push(message, 'info');
+  }
+};
+
+function claimToastZIndex() {
+  // Toast 使用独立浮层，不与 Modal / Select 共用动态栈
+  return readToastZIndex();
+}
+
+const toastPortalStyle = computed(() => ({ zIndex: toastZIndex.value }));
+
+function refreshToastZIndex() {
+  toastZIndex.value = claimToastZIndex();
+}
+
+function push(message: string, type: GcsaMessageType) {
+  refreshToastZIndex();
+  const current = ++id;
+  toasts.value = [...toasts.value, { id: current, message, type }].slice(-MAX_TOASTS);
+  setTimeout(() => {
+    toasts.value = toasts.value.filter(t => t.id !== current);
+  }, GCSA_MESSAGE_DURATION_MS);
+}
+
+function syncDocumentTheme(theme: GcsaConsoleTheme) {
+  if (!shouldSyncDocument() || typeof document === 'undefined') return;
+  document.documentElement.setAttribute('data-gcsa-theme', theme);
+}
+
+function clearDocumentTheme() {
+  if (parentProvider || typeof document === 'undefined') return;
+  if (restoreDocumentTheme) {
+    restoreDocumentTheme();
+    return;
+  }
+  document.documentElement.removeAttribute('data-gcsa-theme');
+}
+
+onMounted(() => {
+  syncDocumentTheme(props.theme);
+  refreshToastZIndex();
+});
+
+watch(
+  () => props.theme,
+  theme => {
+    syncDocumentTheme(theme);
+  }
+);
+
+watch(
+  () => props.syncDocument,
+  sync => {
+    if (sync) {
+      syncDocumentTheme(props.theme);
+    } else {
+      clearDocumentTheme();
+    }
+  }
+);
+
+onUnmounted(() => {
+  if (shouldSyncDocument()) {
+    clearDocumentTheme();
+  }
+});
+
+provide(GCSA_CONFIG_PROVIDER_KEY, true);
+provide(GCSA_MESSAGE_KEY, api);
+provide(GCSA_THEME_KEY, computed(() => props.theme));
+provide(GCSA_LOCALE_KEY, computed(() => props.locale));
+</script>