zsjz-ai/ai-electron/frontend/src/codex/components/codexWorkspacePicker.vue

<template>
  <a-modal
    :open="open"
    title="工作目录"
    wrap-class-name="codex-workspace-modal"
    :width="560"
    :footer="null"
    @cancel="emit('update:open', false)"
  >
    <p class="codex-workspace-modal__desc">
      Codex 会在该目录里取数与生成文件，产物栏也指向它。目录按会话固定，改目录请新建会话。
    </p>

    <!-- 案件工作空间：进案件后由后端回传，新会话默认走它 -->
    <div v-if="store.caseWorkspace" class="codex-workspace-modal__current is-case">
      <Icon icon="mdi:briefcase-outline" :size="14" />
      <span class="codex-workspace-modal__label">案件工作空间</span>
      <span class="codex-workspace-modal__path" :title="store.caseWorkspace">{{ store.caseWorkspace }}</span>
      <span class="codex-workspace-modal__tag">新会话默认</span>
    </div>
    <p v-else class="codex-workspace-modal__desc codex-workspace-modal__desc--warn">
      当前未进入案件，或案件未回传工作空间：新会话将使用下面指定的目录，没指定则用客户端默认目录。
    </p>

    <div class="codex-workspace-modal__current">
      <Icon icon="mdi:folder-outline" :size="14" />
      <span class="codex-workspace-modal__label">手动指定</span>
      <span class="codex-workspace-modal__path" :title="store.workspaceOverride || '未指定'">
        {{ store.workspaceOverride || '未指定' }}
      </span>
      <a-button size="small" @click="onPick">选择目录…</a-button>
      <a-button v-if="store.workspaceOverride" size="small" @click="onClearOverride">清除</a-button>
    </div>

    <div class="codex-workspace-modal__section">最近使用</div>

    <div v-if="!recent.length" class="codex-placeholder">还没有记录。选择一个目录后会出现在这里。</div>

    <ul v-else class="codex-workspace-modal__list">
      <li v-for="dir in recent" :key="dir" class="codex-workspace-modal__item">
        <Icon icon="mdi:folder-outline" :size="14" class="codex-workspace-modal__icon" />
        <span class="codex-workspace-modal__path" :title="dir">{{ dir }}</span>
        <div class="codex-workspace-modal__actions">
          <button class="codex-btn" type="button" :disabled="creating" @click="onUse(dir)">用此目录新建会话</button>
          <button class="codex-btn" type="button" @click="store.removeRecentCwd(dir)">移除</button>
        </div>
      </li>
    </ul>

    <div class="codex-workspace-modal__footer">
      <a-button size="small" :disabled="creating" @click="onCreateHere">
        用「{{ effectiveDir }}」新建会话
      </a-button>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
  /**
   * 工作目录弹窗：查看/切换默认目录，并从最近目录一键开新会话。
   *
   * 「最近目录」存 localStorage；切换默认目录只影响**新会话**，
   * 因为 Codex 的 cwd 在 threadStart 时就固定了（老会话改不了，改了也是撒谎）。
   */
  import { computed, ref } from 'vue';
  import { Button, Modal } from 'ant-design-vue';
  import Icon from '@/core/components/Icon/src/Icon.vue';
  import { useMessage } from '@/core/hooks/web/useMessage';
  import { selectDirectory } from '../api/codexApi';
  import { useCodexChatStore } from '../store/codexChatStore';

  defineProps<{ open: boolean }>();
  const emit = defineEmits<{
    (e: 'update:open', value: boolean): void;
    (e: 'created'): void;
  }>();

  const AModal = Modal;
  const AButton = Button;

  const store = useCodexChatStore();
  const { showMessage } = useMessage();
  const creating = ref(false);

  const recent = computed(() => store.recentCwds);
  /** 新建会话实际会用的目录（与 store 的优先级一致，便于用户核对） */
  const effectiveDir = computed(() => store.activeCwd || '客户端默认目录');

  async function onPick() {
    try {
      const dir = await selectDirectory();
      if (!dir) return;
      store.setWorkspaceDir(dir);
      showMessage('已指定工作目录，新建会话后生效', 'success');
    } catch (error: any) {
      showMessage(error?.message || '选择目录失败', 'error');
    }
  }

  /** 清掉手动指定，回落到案件工作空间 / 客户端默认目录 */
  function onClearOverride() {
    store.setWorkspaceDir('');
    showMessage('已清除手动指定，新建会话后生效', 'success');
  }

  /** 用指定目录新建会话（目录不可用时给出明确报错，不静默失败） */
  async function createWith(dir: string | null) {
    if (creating.value) return;
    creating.value = true;
    try {
      if (dir) store.setWorkspaceDir(dir);
      await store.createSession({ cwd: dir ?? undefined });
      emit('update:open', false);
      emit('created');
    } catch (error: any) {
      showMessage(error?.message || '新建会话失败', 'error');
    } finally {
      creating.value = false;
    }
  }

  function onUse(dir: string) {
    createWith(dir);
  }

  function onCreateHere() {
    createWith(store.activeCwd || null);
  }
</script>

<style lang="less">
  .codex-workspace-modal__desc {
    margin: 0 0 var(--codex-sp-3);
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--codex-text-2);

    &--warn {
      color: var(--codex-warning);
    }
  }

  .codex-workspace-modal__current {
    display: flex;
    align-items: center;
    gap: var(--codex-sp-2);
    padding: var(--codex-sp-2) var(--codex-sp-3);
    margin-bottom: var(--codex-sp-2);
    background: var(--codex-bg-subtle);
    border: 1px solid var(--codex-border);
    border-radius: var(--codex-radius);

    /* 案件工作空间：强调它是「新会话默认从这儿取」 */
    &.is-case {
      background: var(--codex-primary-softer);
      border-color: fade(@primary-color, 25%);
    }

    &:last-of-type {
      margin-bottom: var(--codex-sp-4);
    }
  }

  .codex-workspace-modal__tag {
    flex: 0 0 auto;
    padding: 0 6px;
    font-size: 10.5px;
    line-height: 16px;
    color: var(--codex-primary);
    background: var(--codex-primary-soft);
    border-radius: 8px;
  }

  .codex-workspace-modal__label {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 600;
    color: var(--codex-text-2);
  }

  .codex-workspace-modal__path {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    font-size: 12px;
    color: var(--codex-text);
    white-space: nowrap;
    text-overflow: ellipsis;
    /* 长路径保留尾部（盘符 + 末尾目录）更有辨识度 */
    direction: rtl;
    text-align: left;
  }

  .codex-workspace-modal__section {
    margin-bottom: var(--codex-sp-2);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--codex-text-2);
    border-bottom: 1px solid var(--codex-border);
    padding-bottom: 4px;
  }

  .codex-workspace-modal__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .codex-workspace-modal__item {
    display: flex;
    align-items: center;
    gap: var(--codex-sp-2);
    padding: 4px 6px;
    border-radius: var(--codex-radius-sm);

    &:hover {
      background: var(--codex-bg-hover);
    }

    .codex-workspace-modal__actions {
      display: none;
      align-items: center;
      gap: 2px;
      flex: 0 0 auto;
    }

    &:hover .codex-workspace-modal__actions {
      display: flex;
    }
  }

  .codex-workspace-modal__icon {
    flex: 0 0 auto;
    color: var(--codex-text-2);
  }

  .codex-workspace-modal__footer {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--codex-sp-4);
    padding-top: var(--codex-sp-3);
    border-top: 1px solid var(--codex-border);
  }
</style>