@huyooo/ai-chat-frontend-vue 0.1.6 → 0.1.7

package/src/components/common/SettingsPanel.vue

@@ -0,0 +1,293 @@
+<template>
+  <div v-if="visible" class="settings-panel-overlay" @click.self="visible = false">
+    <div class="settings-panel">
+      <!-- 左侧导航 -->
+      <div class="settings-sidebar">
+        <div class="sidebar-header">
+          <h3 class="sidebar-title">设置</h3>
+        </div>
+        <div class="sidebar-content">
+          <button
+            v-for="section in sections"
+            :key="section.id"
+            :class="['sidebar-item', { active: currentSection === section.id }]"
+            @click="currentSection = section.id"
+          >
+            <Icon :icon="section.icon" width="18" />
+            <span>{{ section.label }}</span>
+          </button>
+        </div>
+      </div>
+
+      <!-- 右侧内容 -->
+      <div class="settings-content">
+        <div class="content-header">
+          <h2 class="content-title">{{ currentSectionLabel }}</h2>
+          <button class="close-btn" @click="visible = false">
+            <Icon icon="lucide:x" width="20" />
+          </button>
+        </div>
+        <div class="content-body">
+          <!-- Agent 设置 -->
+          <template v-if="currentSection === 'agent'">
+            <!-- 自动运行模式 -->
+            <div class="setting-item">
+              <div class="setting-info">
+                <div class="setting-label">自动运行模式</div>
+                <div class="setting-description">控制工具执行的自动运行行为</div>
+              </div>
+              <div class="setting-control">
+                <DropdownSelector
+                  :value="config.mode ?? 'run-everything'"
+                  :options="modeOptions"
+                  align="right"
+                  @select="handleModeChange"
+                />
+              </div>
+            </div>
+          </template>
+
+          <!-- 索引与文档设置 -->
+          <template v-if="currentSection === 'indexing'">
+            <IndexingSettings />
+          </template>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { Icon } from '@iconify/vue'
+import type { AutoRunConfig, AutoRunMode } from '@huyooo/ai-chat-bridge-electron/renderer'
+import DropdownSelector from '../input/DropdownSelector.vue'
+import ToggleSwitch from './ToggleSwitch.vue'
+import IndexingSettings from './IndexingSettings.vue'
+
+// 双向绑定：visible 和 config
+const visible = defineModel<boolean>('visible', { required: true })
+const config = defineModel<AutoRunConfig>('config', { required: true })
+
+const emit = defineEmits<{
+  save: [config: AutoRunConfig]
+}>()
+
+// 设置分类
+const sections = [
+  { id: 'agent', label: 'Agent', icon: 'solar:link-round-angle-line-duotone' },
+  { id: 'indexing', label: '索引与文档', icon: 'lucide:database' },
+] as const
+
+const currentSection = ref<string>('agent')
+
+const currentSectionLabel = computed(() => 
+  sections.find(s => s.id === currentSection.value)?.label ?? ''
+)
+
+// 模式选项
+const modeOptions = [
+  { value: 'run-everything', label: '运行所有内容（自动执行）' },
+  { value: 'manual', label: '手动批准（每次执行前询问）' },
+]
+
+/** 更新配置项并触发保存 */
+function updateConfig<K extends keyof AutoRunConfig>(key: K, value: AutoRunConfig[K]) {
+  // 直接修改引用类型的属性，v-model 会自动同步
+  config.value[key] = value
+  emit('save', config.value)
+}
+
+/** 处理模式变化 */
+function handleModeChange(value: string) {
+  updateConfig('mode', value as AutoRunMode)
+}
+</script>
+
+<style scoped>
+.settings-panel-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+}
+
+.settings-panel {
+  background: var(--chat-bg, #1e1e1e);
+  border: 1px solid var(--chat-border, #333);
+  border-radius: 12px;
+  width: 90%;
+  max-width: 900px;
+  height: 80vh;
+  max-height: 700px;
+  display: flex;
+  flex-direction: row;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
+  overflow: hidden;
+}
+
+/* 左侧导航 */
+.settings-sidebar {
+  width: 240px;
+  background: var(--chat-muted, #2a2a2a);
+  border-right: 1px solid var(--chat-border, #333);
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+}
+
+.sidebar-header {
+  display: flex;
+  align-items: center;
+  height: 50px;
+  padding: 0 16px;
+  border-bottom: 1px solid var(--chat-border, #333);
+}
+
+.sidebar-title {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--chat-text, #fff);
+}
+
+.sidebar-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px;
+}
+
+.sidebar-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+  padding: 10px 12px;
+  margin-bottom: 2px;
+  background: transparent;
+  border: none;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--chat-text-muted, #888);
+  cursor: pointer;
+  transition: all 0.15s ease;
+  text-align: left;
+}
+
+.sidebar-item:hover {
+  background: rgba(255, 255, 255, 0.05);
+  color: var(--chat-text, #ccc);
+}
+
+.sidebar-item.active {
+  background: rgba(255, 255, 255, 0.1);
+  color: var(--chat-text, #fff);
+}
+
+/* 右侧内容 */
+.settings-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.content-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 50px;
+  padding: 0 16px;
+  border-bottom: 1px solid var(--chat-border, #333);
+}
+
+.content-title {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--chat-text, #fff);
+}
+
+.close-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  color: var(--chat-text-muted, #888);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.close-btn:hover {
+  background: var(--chat-muted, #2a2a2a);
+  color: var(--chat-text, #fff);
+}
+
+.content-body {
+  flex: 1;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  padding: 16px;
+}
+
+.section-title {
+  font-size: 16px;
+  font-weight: 500;
+  color: var(--chat-text, #fff);
+  margin-bottom: 4px;
+}
+
+.section-description {
+  font-size: 13px;
+  color: var(--chat-text-muted, #888);
+  margin-bottom: 16px;
+}
+
+.setting-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 0;
+  border-bottom: 1px solid var(--chat-border, #333);
+}
+
+.setting-item:last-child {
+  border-bottom: none;
+}
+
+.setting-info {
+  flex: 1;
+  margin-right: 24px;
+}
+
+.setting-label {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--chat-text, #fff);
+  margin-bottom: 4px;
+}
+
+.setting-description {
+  font-size: 13px;
+  color: var(--chat-text-muted, #888);
+  line-height: 1.5;
+}
+
+.setting-control {
+  flex-shrink: 0;
+}
+</style>

package/src/components/common/Toast.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+
+const props = withDefaults(
+  defineProps<{
+    message: string;
+    type?: 'info' | 'success' | 'warning' | 'error';
+    duration?: number;
+  }>(),
+  {
+    type: 'info',
+    duration: 2000,
+  }
+);
+
+const visible = defineModel<boolean>('visible', { default: false });
+
+// 自动关闭
+watch(visible, (val) => {
+  if (val && props.duration > 0) {
+    setTimeout(() => {
+      visible.value = false;
+    }, props.duration);
+  }
+});
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="toast">
+      <div v-if="visible" class="toast-container">
+        <div :class="['toast', `toast-${type}`]">
+          {{ message }}
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.toast-container {
+  position: fixed;
+  top: 60px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 10000;
+  pointer-events: none;
+}
+
+.toast {
+  padding: 8px 16px;
+  border-radius: 6px;
+  font-size: 13px;
+  border: 1px solid;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}
+
+/* 正常/成功 - 灰色 */
+.toast-info,
+.toast-success {
+  background: var(--chat-bg-secondary, #2a2a2a);
+  color: var(--chat-text, #fff);
+  border-color: var(--chat-border, #444);
+}
+
+/* 警告 - 黄色 */
+.toast-warning {
+  background: rgba(245, 158, 11, 0.15);
+  color: #f59e0b;
+  border-color: rgba(245, 158, 11, 0.3);
+}
+
+/* 错误 - 红色 */
+.toast-error {
+  background: rgba(239, 68, 68, 0.15);
+  color: #ef4444;
+  border-color: rgba(239, 68, 68, 0.3);
+}
+
+.toast-enter-active,
+.toast-leave-active {
+  transition: all 0.2s ease;
+}
+
+.toast-enter-from,
+.toast-leave-to {
+  opacity: 0;
+  transform: translateX(-50%) translateY(-10px);
+}
+</style>

package/src/components/common/ToggleSwitch.vue

@@ -0,0 +1,75 @@
+<template>
+  <label class="toggle-switch">
+    <input
+      type="checkbox"
+      :checked="checked"
+      @change="emit('change', ($event.target as HTMLInputElement).checked)"
+    />
+    <span class="toggle-slider"></span>
+  </label>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  checked?: boolean
+}>()
+
+const emit = defineEmits<{
+  change: [value: boolean]
+}>()
+</script>
+
+<style scoped>
+.toggle-switch {
+  position: relative;
+  display: inline-block;
+  width: 44px;
+  height: 24px;
+  cursor: pointer;
+}
+
+.toggle-switch input {
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.toggle-slider {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--chat-muted, #3c3c3c);
+  border-radius: 24px;
+  transition: all 0.2s;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.toggle-slider::before {
+  position: absolute;
+  content: "";
+  height: 18px;
+  width: 18px;
+  left: 3px;
+  top: 50%;
+  transform: translateY(-50%);
+  background-color: #fff;
+  border-radius: 50%;
+  transition: all 0.2s;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+
+.toggle-switch input:checked + .toggle-slider {
+  background-color: rgb(153, 207, 140);
+  border-color: rgba(255, 255, 255, 0.2);
+}
+
+.toggle-switch input:checked + .toggle-slider::before {
+  transform: translate(20px, -50%);
+}
+
+.toggle-switch input:focus + .toggle-slider {
+  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
+}
+</style>