feat: 自定义quickpick

package.json

@@ -2,7 +2,7 @@
   "publisher": "oeyoews",
   "name": "usewiki2",
   "displayName": "usewiki2",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "private": true,
   "packageManager": "[email protected]",
   "description": "",

packages/react/src/App.tsx

@@ -87,7 +87,6 @@ function App() {
     // language
 
     messenger.on('changeLanguage', ({ text }) => {
-      console.log('change language', text);
       changeLanguage(text);
       // 由于切换lang的情况过多， 暂时不支持用户自定义placeholder
       setPlaceholder(t('placeholder'));
@@ -113,7 +112,7 @@ function App() {
         UseWiki2{' '}
         <span
           className="i-lucide-languages size-4"
-          onClick={showVsCodeLanguageInputBox}></span>{' '}
+          onClick={showVsCodeLanguageInputBox}></span>
       </h1>
       <ContextMenu>
         <ContextMenuTrigger className="i-lucide-more-horizontal hidden"></ContextMenuTrigger>

src/generated/meta.ts

@@ -4,7 +4,7 @@
 // Meta info
 export const publisher = "oeyoews"
 export const name = "usewiki2"
-export const version = "2.1.0"
+export const version = "2.2.0"
 export const displayName = "usewiki2"
 export const description = undefined
 export const extensionId = `${publisher}.${name}`

src/webviews/index.ts

@@ -4,6 +4,7 @@ import * as openWikiCmd from '../commands/openWikiCmd';
 import { WebviewMessenger } from '../utils/extensionMessenger';
 import { config, enableSendSound, getLang } from '../config';
 import { ILanguage } from '../../packages/react/src/i18n';
+import { showLanguagePicker } from './showLangPicker';
 
 interface ILanguageOptions extends vscode.QuickPickItem {
   value: ILanguage;
@@ -66,19 +67,7 @@ export class usewikiViewProvider implements vscode.WebviewViewProvider {
     // console.log('current lang is', getLang());
     messenger.send('changeLanguage', { text: getLang() });
     messenger.on('showVsCodeLanguageInputBox', async () => {
-      // 选择不同的语言 en, zhCN 下拉框
-      const langItem = await vscode.window.showQuickPick(langOptions, {
-        title: 'Setup Usewiki2 Language',
-        placeHolder: 'Select Language',
-        canPickMany: false,
-        matchOnDetail: true,
-        onDidSelectItem: (item) => {
-          // TODO: 如何实时预览切换， 并且在取消时恢复, 是否回多次触发输入时
-        },
-      });
-      if (!langItem) return;
-      messenger.send('changeLanguage', { text: langItem.value });
-      config().update('lang', langItem.value, true);
+      showLanguagePicker(messenger);
     });
 
     messenger.on('openLink', (data) => {

src/webviews/showLangPicker.ts

@@ -0,0 +1,49 @@
+import * as vscode from 'vscode';
+import { config, getLang } from '../config';
+
+import { WebviewMessenger } from '../utils/extensionMessenger';
+
+export async function showLanguagePicker(messenger: WebviewMessenger) {
+  const langOptions: vscode.QuickPickItem[] = [
+    { label: 'English', description: 'en' },
+    { label: '中文', description: 'zhCN' },
+  ];
+
+  // 存储原始语言设置，用于恢复
+  const originalLanguage = getLang(); // 自定义函数，假设获取当前语言
+  const activeItemIndex = langOptions.findIndex(
+    (opt) => opt.description === originalLanguage
+  );
+
+  // 创建自定义 QuickPick
+  const quickPick = vscode.window.createQuickPick();
+  quickPick.items = langOptions;
+  quickPick.title = 'Setup Usewiki2 Language';
+  quickPick.placeholder = 'Select Language';
+  quickPick.activeItems = [langOptions[activeItemIndex]];
+
+  // TODO: selection 不起作用， 用active 的话accept 的时候也会触发active 事件
+  // 当选择变化时实时预览
+  //   quickPick.onDidChangeSelection((selectedItems) => {
+  //     console.log(selectedItems[0].description, 'active');
+  //     if (selectedItems.length > 0) {
+  //       const selectedLanguage = selectedItems[0].description;
+  //       messenger.send('changeLanguage', { text: selectedLanguage });
+  //     }
+  //   });
+
+  // 监听取消操作，恢复原始语言设置
+  //   quickPick.onDidHide((item) => {
+  //     messenger.send('changeLanguage', { text: originalLanguage });
+  //     quickPick.dispose();
+  //   });
+
+  // 确认选择并应用
+  quickPick.onDidAccept(() => {
+    const selectedLanguage = quickPick.selectedItems[0].description;
+    config().update('lang', selectedLanguage, true);
+    quickPick.dispose();
+  });
+
+  quickPick.show();
+}