feat: add desktop workspace directory picker (#10222)

* feat: add desktop workspace directory picker * feat: make desktop folder picker prominent * feat: sync project name with selected folder * feat: streamline project emoji settings * fix: refine project dialog controls * fix: adjust project dialog settings placement * fix: unify project dialog layout * fix: align project dialog and workspace select with chatui styles * fix: place knowledge base icon and name on one row
2026-10-16 15:06:04 +08:00 · 2026-09-25 14:23:45 +08:00
parent 26ff7673f5
commit 69ae35a359
8 changed files with 648 additions and 132 deletions
@@ -1,19 +1,111 @@
 <template>
-    <v-dialog v-model="isOpen" max-width="640" @update:model-value="handleDialogChange">
-        <v-card>
-            <v-card-title class="text-h3 pa-4 pb-0 pl-6">
+    <v-dialog v-model="isOpen" max-width="460" @update:model-value="handleDialogChange">
+        <v-card class="project-dialog-card">
+            <v-card-title class="text-h3 pa-4 pb-0 pl-6 project-dialog-title">
                {{ isEditing ? tm('project.edit') : tm('project.create') }}
            </v-card-title>
-            <v-card-text>
-                <v-text-field v-model="form.emoji" :label="tm('project.emoji')" variant="outlined" hide-details class="mb-3" />
-                <v-text-field v-model="form.title" :label="tm('project.name')" variant="outlined" hide-details class="mb-3" autofocus
-                    @keyup.enter="handleSave" />
-                <v-textarea v-model="form.description" :label="tm('project.description')" variant="outlined" hide-details rows="3" />
-                <v-divider class="my-4" />
-                <v-select v-model="form.workspace_type" :items="workspaceTypeItems" item-title="label" item-value="value"
-                    :label="tm('project.workspace.type')" variant="outlined" hide-details class="mb-3" />
-                <v-text-field v-if="form.workspace_type === 'custom'" v-model="form.workspace_path"
-                    :label="tm('project.workspace.path')" variant="outlined" hide-details class="mb-1" />
+            <v-card-text class="project-dialog-content">
+                <div class="project-name-row">
+                    <EmojiPicker v-model="form.emoji" />
+                    <input
+                        v-model="form.title"
+                        class="project-name-input"
+                        type="text"
+                        :placeholder="tm('project.name')"
+                        :aria-label="tm('project.name')"
+                        autofocus
+                        @keyup.enter="handleSave"
+                    />
+                </div>
+
+                <div class="project-field">
+                    <label class="field-label" for="project-workspace-type">{{ tm('project.workspace.type') }}</label>
+                    <v-menu location="bottom start" offset="6">
+                        <template #activator="{ props: activatorProps }">
+                            <button
+                                id="project-workspace-type"
+                                ref="workspaceSelectTrigger"
+                                v-bind="activatorProps"
+                                type="button"
+                                class="project-select-trigger"
+                                :aria-label="tm('project.workspace.type')"
+                                aria-haspopup="listbox"
+                                @click="syncWorkspaceMenuWidth"
+                            >
+                                <span>{{ currentWorkspaceLabel }}</span>
+                                <v-icon class="select-chevron" size="18" aria-hidden="true">mdi-chevron-down</v-icon>
+                            </button>
+                        </template>
+                        <div
+                            class="project-select-menu"
+                            role="listbox"
+                            :style="{ minWidth: workspaceMenuWidth ? `${workspaceMenuWidth}px` : undefined }"
+                        >
+                            <button
+                                v-for="item in workspaceTypeItems"
+                                :key="item.value"
+                                type="button"
+                                role="option"
+                                class="project-select-option"
+                                :class="{ 'is-selected': form.workspace_type === item.value }"
+                                :aria-selected="form.workspace_type === item.value"
+                                @click="form.workspace_type = item.value"
+                            >
+                                <span>{{ item.label }}</span>
+                                <v-icon v-if="form.workspace_type === item.value" size="16" aria-hidden="true">mdi-check</v-icon>
+                            </button>
+                        </div>
+                    </v-menu>
+                </div>
+
+                <div v-if="form.workspace_type === 'custom'" class="project-field">
+                    <label class="field-label" for="project-workspace-path">{{ tm('project.workspace.path') }}</label>
+                    <div class="workspace-path-row">
+                        <input
+                            id="project-workspace-path"
+                            v-model="form.workspace_path"
+                            class="project-path-input"
+                            type="text"
+                            :aria-label="tm('project.workspace.path')"
+                        />
+                        <button
+                            v-if="canPickWorkspaceDirectory"
+                            type="button"
+                            class="folder-picker-button"
+                            :disabled="props.saving"
+                            @click.stop="handlePickWorkspaceDirectory"
+                        >
+                            <v-icon size="18">mdi-folder-open-outline</v-icon>
+                            <span>{{ tm('project.workspace.selectPath') }}</span>
+                        </button>
+                    </div>
+                </div>
+
+                <div class="more-settings">
+                    <button
+                        type="button"
+                        class="more-settings-toggle"
+                        :aria-expanded="moreSettingsOpen"
+                        @click="moreSettingsOpen = !moreSettingsOpen"
+                    >
+                        <span>{{ tm('project.moreSettings') }}</span>
+                        <v-icon
+                            size="18"
+                            class="more-settings-chevron"
+                            :class="{ 'is-open': moreSettingsOpen }"
+                            aria-hidden="true"
+                        >mdi-chevron-down</v-icon>
+                    </button>
+                    <textarea
+                        v-if="moreSettingsOpen"
+                        v-model="form.description"
+                        class="project-description-input"
+                        :placeholder="tm('project.description')"
+                        :aria-label="tm('project.description')"
+                        rows="3"
+                    />
+                </div>
+
                <v-alert
                    v-if="props.errorMessage"
                    class="mt-3"
@@ -24,11 +116,20 @@
                    {{ props.errorMessage }}
                </v-alert>
            </v-card-text>
-            <v-card-actions>
-                <v-spacer></v-spacer>
-                <v-btn variant="text" @click="handleCancel" color="grey-darken-1" :disabled="props.saving">{{ t('core.common.cancel') }}</v-btn>
-                <v-btn variant="text" @click="handleSave" color="primary" :disabled="!canSave || props.saving" :loading="props.saving">{{ t('core.common.save') }}</v-btn>
-            </v-card-actions>
+            <div class="project-dialog-actions">
+                <button type="button" class="dialog-action" :disabled="props.saving" @click="handleCancel">
+                    {{ t('core.common.cancel') }}
+                </button>
+                <button
+                    type="button"
+                    class="dialog-action dialog-action-save"
+                    :disabled="!canSave || props.saving"
+                    :aria-busy="props.saving"
+                    @click="handleSave"
+                >
+                    {{ t('core.common.save') }}
+                </button>
+            </div>
        </v-card>
    </v-dialog>
 </template>
@@ -36,6 +137,8 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue';
 import { useI18n, useModuleI18n } from '@/i18n/composables';
+import { getDesktopRuntimeInfo } from '@/utils/desktopRuntime';
+import EmojiPicker from '@/components/shared/EmojiPicker.vue';

 export type WorkspaceType = 'session' | 'project' | 'custom';

@@ -83,6 +186,9 @@ const { tm } = useModuleI18n('features/chat');

 const isOpen = ref(props.modelValue);
 const isEditing = ref(false);
+const moreSettingsOpen = ref(false);
+const canPickWorkspaceDirectory = ref(false);
+const pickingWorkspaceDirectory = ref(false);
 const form = ref<ProjectFormData>({
    emoji: '📁',
    title: '',
@@ -90,19 +196,32 @@ const form = ref<ProjectFormData>({
    workspace_type: 'project',
    workspace_path: ''
 });
-const workspaceTypeItems = computed(() => [
+const workspaceTypeItems = computed<{ label: string; value: WorkspaceType }[]>(() => [
    { label: tm('project.workspace.project'), value: 'project' },
    { label: tm('project.workspace.session'), value: 'session' },
    { label: tm('project.workspace.custom'), value: 'custom' }
 ]);
+const currentWorkspaceLabel = computed(() =>
+    workspaceTypeItems.value.find((item) => item.value === form.value.workspace_type)?.label || ''
+);
+const workspaceSelectTrigger = ref<HTMLElement | null>(null);
+const workspaceMenuWidth = ref(0);
+
+// The dropdown is teleported to the body, so its width has to be synced from the trigger.
+function syncWorkspaceMenuWidth() {
+    workspaceMenuWidth.value = workspaceSelectTrigger.value?.getBoundingClientRect().width ?? 0;
+}
+
 const canSave = computed(() => {
    if (!form.value.title.trim()) return false;
    if (form.value.workspace_type !== 'custom') return true;
    return form.value.workspace_path.trim().length > 0;
 });

-watch(() => props.modelValue, (newVal) => {
+watch(() => props.modelValue, async (newVal) => {
    isOpen.value = newVal;
+    moreSettingsOpen.value = false;
+    canPickWorkspaceDirectory.value = false;
    if (newVal) {
        if (props.project) {
            isEditing.value = true;
@@ -123,6 +242,10 @@ watch(() => props.modelValue, (newVal) => {
                workspace_path: ''
            };
        }
+
+        const runtimeInfo = await getDesktopRuntimeInfo();
+        canPickWorkspaceDirectory.value = runtimeInfo.isDesktopRuntime &&
+            typeof runtimeInfo.bridge?.pickDirectory === 'function';
    }
 });

@@ -141,6 +264,30 @@ function handleCancel() {
    emit('update:modelValue', false);
 }

+async function handlePickWorkspaceDirectory() {
+    const pickDirectory = window.astrbotDesktop?.pickDirectory;
+    if (!canPickWorkspaceDirectory.value || !pickDirectory || pickingWorkspaceDirectory.value) {
+        return;
+    }
+
+    pickingWorkspaceDirectory.value = true;
+    try {
+        const selectedPath = await pickDirectory(form.value.workspace_path || null);
+        if (selectedPath) {
+            form.value.workspace_path = selectedPath;
+            const normalizedPath = selectedPath.replace(/[\\/]+$/, '');
+            const folderName = normalizedPath.split(/[\\/]/).pop();
+            if (folderName) {
+                form.value.title = folderName;
+            }
+        }
+    } catch (error) {
+        console.warn('[chat-project] Failed to pick workspace directory.', error);
+    } finally {
+        pickingWorkspaceDirectory.value = false;
+    }
+}
+
 function handleSave() {
    if (!canSave.value) {
        return;
@@ -155,8 +302,284 @@ function handleSave() {
 </script>

 <style scoped>
-.dialog-title {
-    font-size: 22px;
-    font-weight: 500;
+.project-dialog-card {
+    --project-border: rgba(var(--v-theme-on-surface), 0.13);
+    --project-divider: rgba(var(--v-theme-on-surface), 0.09);
+    --project-muted: rgba(var(--v-theme-on-surface), 0.64);
+    overflow: hidden !important;
+    border: 1px solid var(--project-border);
+    border-radius: 20px !important;
+    background: rgb(var(--v-theme-surface));
+}
+
+.project-dialog-title {
+    font-weight: 780;
+    line-height: 1.25;
+}
+
+.project-dialog-content {
+    padding: 20px 24px 0 !important;
+}
+
+.project-name-row {
+    display: flex;
+    align-items: center;
+    height: 40px;
+    border: 1px solid var(--project-border);
+    border-radius: 10px;
+    transition: border-color 120ms ease, box-shadow 120ms ease;
+}
+
+.project-name-row:focus-within {
+    border-color: rgb(var(--v-theme-primary));
+    box-shadow: 0 0 0 3px rgba(var(--v-theme-primary), 0.14);
+}
+
+.project-name-row :deep(.emoji-picker-trigger) {
+    flex: 0 0 auto;
+    min-width: 40px;
+    height: 38px;
+    padding: 0;
+    border-radius: 9px 0 0 9px;
+    font-size: 20px;
+}
+
+.project-name-input,
+.project-path-input {
+    flex: 1 1 auto;
+    min-width: 0;
+    height: 100%;
+    padding: 0 12px;
+    border: 0;
+    background: transparent;
+    color: rgb(var(--v-theme-on-surface));
+    font: inherit;
+    font-size: 0.86rem;
+    outline: none;
+}
+
+.project-name-input {
+    padding-left: 2px;
+}
+
+.project-name-input::placeholder,
+.project-path-input::placeholder,
+.project-description-input::placeholder {
+    color: var(--project-muted);
+}
+
+.project-field {
+    margin-top: 16px;
+}
+
+.field-label {
+    display: block;
+    margin-bottom: 6px;
+    color: var(--project-muted);
+    font-size: 0.78rem;
+}
+
+.project-select-trigger {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    width: 100%;
+    height: 40px;
+    padding: 0 10px 0 12px;
+    border: 1px solid var(--project-border);
+    border-radius: 10px;
+    background: transparent;
+    color: rgb(var(--v-theme-on-surface));
+    font: inherit;
+    font-size: 0.86rem;
+    text-align: left;
+    cursor: pointer;
+    outline: none;
+    transition: border-color 120ms ease, box-shadow 120ms ease;
+}
+
+.project-select-trigger:hover {
+    border-color: rgba(var(--v-theme-on-surface), 0.24);
+}
+
+.project-select-trigger:focus-visible {
+    border-color: rgb(var(--v-theme-primary));
+    box-shadow: 0 0 0 3px rgba(var(--v-theme-primary), 0.14);
+}
+
+.select-chevron {
+    flex: 0 0 auto;
+    color: var(--project-muted);
+}
+
+.project-select-menu {
+    --project-border: rgba(var(--v-theme-on-surface), 0.13);
+    --project-muted: rgba(var(--v-theme-on-surface), 0.64);
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding: 4px;
+    border: 1px solid var(--project-border);
+    border-radius: 12px;
+    background: rgb(var(--v-theme-surface));
+    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.36);
+}
+
+.project-select-option {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    height: 34px;
+    padding: 0 10px;
+    border: 0;
+    border-radius: 8px;
+    background: transparent;
+    color: rgb(var(--v-theme-on-surface));
+    cursor: pointer;
+    font: inherit;
+    font-size: 0.86rem;
+    text-align: left;
+}
+
+.project-select-option:hover {
+    background: rgba(var(--v-theme-on-surface), 0.06);
+}
+
+.project-select-option.is-selected {
+    background: rgba(var(--v-theme-primary), 0.14);
+    color: rgb(var(--v-theme-primary));
+    font-weight: 600;
+}
+
+.workspace-path-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.project-path-input {
+    height: 40px;
+    border: 1px solid var(--project-border);
+    border-radius: 10px;
+    transition: border-color 120ms ease, box-shadow 120ms ease;
+}
+
+.project-path-input:focus {
+    border-color: rgb(var(--v-theme-primary));
+    box-shadow: 0 0 0 3px rgba(var(--v-theme-primary), 0.14);
+}
+
+.folder-picker-button {
+    display: inline-flex;
+    flex: 0 0 auto;
+    align-items: center;
+    gap: 6px;
+    height: 40px;
+    padding: 0 12px;
+    border: 0;
+    border-radius: 10px;
+    background: rgba(var(--v-theme-primary), 0.14);
+    color: rgb(var(--v-theme-primary));
+    cursor: pointer;
+    font: inherit;
+    font-size: 0.82rem;
+    white-space: nowrap;
+}
+
+.folder-picker-button:hover:not(:disabled) {
+    background: rgba(var(--v-theme-primary), 0.22);
+}
+
+.folder-picker-button:disabled {
+    cursor: default;
+    opacity: 0.5;
+}
+
+.more-settings {
+    margin-top: 14px;
+}
+
+.more-settings-toggle {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    color: var(--project-muted);
+    cursor: pointer;
+    font: inherit;
+    font-size: 0.78rem;
+}
+
+.more-settings-toggle:hover {
+    color: rgb(var(--v-theme-on-surface));
+}
+
+.more-settings-chevron {
+    transition: transform 140ms ease;
+}
+
+.more-settings-chevron.is-open {
+    transform: rotate(180deg);
+}
+
+.project-description-input {
+    display: block;
+    width: 100%;
+    min-height: 76px;
+    margin-top: 10px;
+    padding: 10px 12px;
+    border: 1px solid var(--project-border);
+    border-radius: 10px;
+    background: transparent;
+    color: rgb(var(--v-theme-on-surface));
+    font: inherit;
+    font-size: 0.86rem;
+    line-height: 1.5;
+    outline: none;
+    resize: vertical;
+    transition: border-color 120ms ease, box-shadow 120ms ease;
+}
+
+.project-description-input:focus {
+    border-color: rgb(var(--v-theme-primary));
+    box-shadow: 0 0 0 3px rgba(var(--v-theme-primary), 0.14);
+}
+
+.project-dialog-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 4px;
+    padding: 16px 16px 16px;
+}
+
+.dialog-action {
+    min-width: 60px;
+    height: 36px;
+    padding: 0 12px;
+    border: 0;
+    border-radius: 8px;
+    background: transparent;
+    color: rgb(var(--v-theme-on-surface));
+    cursor: pointer;
+    font: inherit;
+    font-size: 0.86rem;
+    font-weight: 600;
+}
+
+.dialog-action-save {
+    color: rgb(var(--v-theme-primary));
+}
+
+.dialog-action:hover:not(:disabled) {
+    background: rgba(var(--v-theme-on-surface), 0.06);
+}
+
+.dialog-action:disabled {
+    cursor: default;
+    opacity: 0.4;
 }
 </style>
@@ -0,0 +1,170 @@
+<template>
+  <v-menu
+    v-model="menuOpen"
+    location="bottom start"
+    :close-on-content-click="false"
+    offset="8"
+  >
+    <template #activator="{ props: activatorProps }">
+      <button
+        v-bind="activatorProps"
+        type="button"
+        class="emoji-picker-trigger"
+        :aria-label="tm('emoji.title')"
+      >
+        <span aria-hidden="true">{{ modelValue || '📚' }}</span>
+      </button>
+    </template>
+
+    <v-card class="emoji-picker-menu" min-width="300" max-width="340">
+      <v-card-title class="text-body-1 pa-3">{{ tm('emoji.title') }}</v-card-title>
+      <div class="emoji-category-tabs">
+        <button
+          v-for="category in emojiCategories"
+          :key="category.key"
+          type="button"
+          class="emoji-category-tab"
+          :class="{ 'is-active': activeCategory === category.key }"
+          :aria-label="tm(`emoji.categories.${category.key}`)"
+          @click="activeCategory = category.key"
+        >
+          <span aria-hidden="true">{{ category.icon }}</span>
+        </button>
+      </div>
+      <v-divider />
+      <v-card-text class="pa-2">
+        <div class="emoji-grid">
+          <button
+            v-for="emoji in activeEmojis"
+            :key="emoji"
+            type="button"
+            class="emoji-option"
+            :aria-label="emoji"
+            @click="selectEmoji(emoji)"
+          >
+            {{ emoji }}
+          </button>
+        </div>
+      </v-card-text>
+    </v-card>
+  </v-menu>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useModuleI18n } from '@/i18n/composables'
+
+defineProps<{
+  modelValue: string
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string]
+}>()
+
+const { tm } = useModuleI18n('features/knowledge-base/index')
+const menuOpen = ref(false)
+const activeCategory = ref('books')
+
+const emojiCategories = [
+  {
+    key: 'books',
+    icon: '📚',
+    emojis: ['📚', '📖', '📕', '📗', '📘', '📙', '📓', '📔', '📒', '📑', '🗂️', '📂', '📁', '🗃️', '🗄️']
+  },
+  {
+    key: 'emotions',
+    icon: '🙂',
+    emojis: ['😀', '😃', '😄', '😁', '😆', '😅', '🤣', '😂', '🙂', '🙃', '😉', '😊', '😇', '🥰', '😍']
+  },
+  {
+    key: 'objects',
+    icon: '💡',
+    emojis: ['💡', '🔬', '🔭', '🗿', '🏆', '🎯', '🎓', '🔑', '🔒', '🔓', '🔔', '🔕', '🔨', '🛠️', '⚙️']
+  },
+  {
+    key: 'symbols',
+    icon: '⭐',
+    emojis: ['❤️', '🧡', '💛', '💚', '💙', '💜', '🖤', '🤍', '🤎', '⭐', '🌟', '✨', '💫', '⚡', '🔥']
+  }
+]
+
+const activeEmojis = computed(() =>
+  emojiCategories.find((category) => category.key === activeCategory.value)?.emojis || []
+)
+
+function selectEmoji(emoji: string) {
+  emit('update:modelValue', emoji)
+  menuOpen.value = false
+}
+</script>
+
+<style scoped>
+.emoji-picker-trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 56px;
+  height: 48px;
+  padding: 0 10px;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  font-size: 24px;
+}
+
+.emoji-picker-trigger:hover {
+  background: rgba(var(--v-theme-on-surface), 0.06);
+}
+
+.emoji-picker-menu {
+  overflow: hidden;
+  border: 1px solid rgba(var(--v-theme-on-surface), 0.13);
+  border-radius: 16px;
+}
+
+.emoji-grid {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  gap: 2px;
+}
+
+.emoji-category-tabs {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 2px;
+  padding: 0 8px 8px;
+}
+
+.emoji-category-tab {
+  height: 32px;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  cursor: pointer;
+  font-size: 18px;
+}
+
+.emoji-category-tab:hover,
+.emoji-category-tab.is-active {
+  background: rgba(var(--v-theme-primary), 0.12);
+}
+
+.emoji-option {
+  min-width: 0;
+  padding: 0;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  font-size: 22px;
+  line-height: 36px;
+}
+
+.emoji-option:hover {
+  background: rgba(var(--v-theme-primary), 0.12);
+}
+</style>
@@ -165,12 +165,14 @@
    "name": "Project Name",
    "emoji": "Icon (Emoji)",
    "description": "Description (Optional)",
+    "moreSettings": "More settings",
    "workspace": {
      "type": "Workspace",
      "session": "Per-session workspace",
      "project": "Shared project workspace",
      "custom": "Custom path",
-      "path": "Workspace path"
+      "path": "Workspace path",
+      "selectPath": "Select folder"
    },
    "loadingSessions": "Loading conversations...",
    "noSessions": "No conversations in this project",
@@ -165,12 +165,14 @@
    "name": "プロジェクト名",
    "emoji": "アイコン（Emoji）",
    "description": "プロジェクトの説明（任意）",
+    "moreSettings": "その他の設定",
    "workspace": {
      "type": "ワークスペース",
      "session": "セッションごとに分離",
      "project": "プロジェクト共有ワークスペース",
      "custom": "カスタムパス",
-      "path": "ワークスペースのパス"
+      "path": "ワークスペースのパス",
+      "selectPath": "フォルダーを選択"
    },
    "loadingSessions": "会話を読み込み中…",
    "noSessions": "このプロジェクトには会話がありません",
@@ -165,12 +165,14 @@
    "name": "Имя проекта",
    "emoji": "Иконка (Emoji)",
    "description": "Описание проекта (опционально)",
+    "moreSettings": "Дополнительные настройки",
    "workspace": {
      "type": "Рабочая область",
      "session": "Отдельно для каждого чата",
      "project": "Общая область проекта",
      "custom": "Пользовательский путь",
-      "path": "Путь рабочей области"
+      "path": "Путь рабочей области",
+      "selectPath": "Выбрать папку"
    },
    "loadingSessions": "Загрузка диалогов...",
    "noSessions": "В этом проекте пока нет диалогов",
@@ -165,12 +165,14 @@
    "name": "项目名称",
    "emoji": "图标 (Emoji)",
    "description": "项目描述（可选）",
+    "moreSettings": "更多设置",
    "workspace": {
      "type": "工作区",
      "session": "按会话分开",
      "project": "项目共享工作区",
      "custom": "自定义路径",
-      "path": "工作区路径"
+      "path": "工作区路径",
+      "selectPath": "选择文件夹"
    },
    "loadingSessions": "加载对话中...",
    "noSessions": "该项目暂无对话",
@@ -46,6 +46,7 @@ declare global {
        ok: boolean;
        reason: string | null;
      }>;
+      pickDirectory?: (defaultPath?: string | null) => Promise<string | null>;
      onTrayRestartBackend?: (callback: () => void) => () => void;
    };
  }
@@ -151,19 +151,16 @@
        <v-divider />

        <v-card-text class="pa-6">
-          <!-- Emoji 选择器 -->
-          <div class="text-center mb-6">
-            <div class="emoji-display" @click="showEmojiPicker = true">
-              {{ formData.emoji }}
-            </div>
-            <p class="text-caption text-medium-emphasis mt-2">{{ t('create.emojiLabel') }}</p>
-          </div>
-
          <!-- 表单 -->
          <v-form ref="formRef" @submit.prevent="submitForm">
            <v-text-field v-model="formData.kb_name" :label="t('create.nameLabel')"
              :placeholder="t('create.namePlaceholder')" variant="outlined"
-              :rules="[v => !!v || t('create.nameRequired')]" required class="mb-4" :hint="t('create.nameChangeHint')" persistent-hint />
+              :rules="[v => !!v || t('create.nameRequired')]" required
+              class="mb-4 kb-name-field" :hint="t('create.nameChangeHint')" persistent-hint>
+              <template #prepend-inner>
+                <EmojiPicker v-model="formData.emoji" />
+              </template>
+            </v-text-field>

            <v-textarea v-model="formData.description" :label="t('create.descriptionLabel')"
              :placeholder="t('create.descriptionPlaceholder')" variant="outlined" rows="3" class="mb-4" />
@@ -213,31 +210,6 @@
      </v-card>
    </v-dialog>

-    <!-- Emoji 选择器对话框 -->
-    <v-dialog v-model="showEmojiPicker" max-width="500px">
-      <v-card>
-        <v-card-title class="text-h3 pa-4 pb-0 pl-6">{{ t('emoji.title') }}</v-card-title>
-        <v-divider />
-        <v-card-text class="pa-4">
-          <div v-for="category in emojiCategories" :key="category.key" class="mb-4">
-            <p class="text-subtitle-2 mb-2">{{ t(`emoji.categories.${category.key}`) }}</p>
-            <div class="emoji-grid">
-              <div v-for="emoji in category.emojis" :key="emoji" class="emoji-item" @click="selectEmoji(emoji)">
-                {{ emoji }}
-              </div>
-            </div>
-          </div>
-        </v-card-text>
-        <v-divider />
-        <v-card-actions class="pa-4">
-          <v-spacer />
-          <v-btn variant="text" @click="showEmojiPicker = false">
-            {{ t('emoji.close') }}
-          </v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
-
    <!-- 删除确认对话框 -->
    <v-dialog v-model="showDeleteDialog" max-width="450px" persistent>
      <v-card>
@@ -280,6 +252,7 @@ import { useRouter } from 'vue-router'
 import { knowledgeApi, providerApi } from '@/api/v1'
 import { useModuleI18n } from '@/i18n/composables'
 import OutlinedActionListItem from '@/components/shared/OutlinedActionListItem.vue'
+import EmojiPicker from '@/components/shared/EmojiPicker.vue'

 const { tm: t } = useModuleI18n('features/knowledge-base/index')
 const router = useRouter()
@@ -302,7 +275,6 @@ const pendingEmbeddingProvider = ref<string | null>(null)

 // 对话框
 const showCreateDialog = ref(false)
-const showEmojiPicker = ref(false)
 const showDeleteDialog = ref(false)

 // Snackbar 通知
@@ -324,26 +296,6 @@ const formData = ref({
  rerank_provider_id: null
 })

-// Emoji 分类
-const emojiCategories = [
-  {
-    key: 'books',
-    emojis: ['📚', '📖', '📕', '📗', '📘', '📙', '📓', '📔', '📒', '📑', '🗂️', '📂', '📁', '🗃️', '🗄️']
-  },
-  {
-    key: 'emotions',
-    emojis: ['😀', '😃', '😄', '😁', '😆', '😅', '🤣', '😂', '🙂', '🙃', '😉', '😊', '😇', '🥰', '😍']
-  },
-  {
-    key: 'objects',
-    emojis: ['💡', '🔬', '🔭', '🗿', '🏆', '🎯', '🎓', '🔑', '🔒', '🔓', '🔔', '🔕', '🔨', '🛠️', '⚙️']
-  },
-  {
-    key: 'symbols',
-    emojis: ['❤️', '🧡', '💛', '💚', '💙', '💜', '🖤', '🤍', '🤎', '⭐', '🌟', '✨', '💫', '⚡', '🔥']
-  }
-]
-
 // 加载知识库列表
 const loadKnowledgeBases = async (refreshStats = false) => {
  loading.value = true
@@ -509,12 +461,6 @@ const closeCreateDialog = () => {
  formRef.value?.reset()
 }

-// 选择 emoji
-const selectEmoji = (emoji: string) => {
-  formData.value.emoji = emoji
-  showEmojiPicker.value = false
-}
-
 // 显示通知
 const showSnackbar = (text: string, color: string = 'success') => {
  snackbar.value.text = text
@@ -544,6 +490,18 @@ onMounted(() => {
  line-height: 1;
 }

+.kb-name-field :deep(.v-field__prepend-inner) {
+  padding-inline-end: 0;
+}
+
+.kb-name-field :deep(.emoji-picker-trigger) {
+  min-width: 32px;
+  height: 32px;
+  padding: 0;
+  border-radius: 8px;
+  font-size: 20px;
+}
+
 .kb-description {
  display: -webkit-box;
  -webkit-box-orient: vertical;
@@ -645,48 +603,4 @@ onMounted(() => {
  min-height: 400px;
 }

-/* Emoji 显示和选择器 */
-.emoji-display {
-  font-size: 72px;
-  cursor: pointer;
-  transition: transform 0.2s ease;
-  display: inline-block;
-  padding: 0px 16px;
-  border-radius: 12px;
-  background: rgba(var(--v-theme-primary), 0.05);
-}
-
-.emoji-display:hover {
-  transform: scale(1.1);
-  background: rgba(var(--v-theme-primary), 0.1);
-}
-
-.emoji-grid {
-  display: grid;
-  grid-template-columns: repeat(8, 1fr);
-  gap: 8px;
-}
-
-.emoji-item {
-  font-size: 32px;
-  padding: 12px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  border-radius: 8px;
-  transition: all 0.2s ease;
-}
-
-.emoji-item:hover {
-  background: rgba(var(--v-theme-primary), 0.1);
-  transform: scale(1.2);
-}
-
-/* 响应式设计 */
-@media (max-width: 768px) {
-  .emoji-grid {
-    grid-template-columns: repeat(6, 1fr);
-  }
-}
 </style>