feat: 添加名单功能教程

typed-sigterm · Sep 30, 2024 · 6dce856 · 6dce856
1 parent 03a63c3
commit 6dce856
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 12 deletions.
diff --git a/app/components/settings.vue b/app/components/settings.vue
@@ -9,6 +9,12 @@ const show = defineModel<boolean>('show', { required: true });
 
 const { t } = useI18n({ useScope: 'local' });
 
+async function handleShowOrCloseNamelist(show: boolean) {
+  if (!show || !shouldStartGuide('namelist'))
+    return;
+  await promiseTimeout(500);
+  triggerNamelistGuide();
+}
 async function handleShowOrClosePlan(show: boolean) {
   if (!show || !shouldStartGuide('plan'))
     return;
@@ -54,7 +60,11 @@ function handleClose() {
         </I18nT>
       </NAlert>
 
-      <SettingsEntry :title="t('entry.namelist')">
+      <SettingsEntry
+        :title="t('entry.namelist')"
+        :drawer-attrs="{ 'data-guide-id': 'namelist-drawer' }"
+        @update:show="handleShowOrCloseNamelist"
+      >
         <SettingsNamelist />
         <template #icon>
           <LucideNotebookTabs :size="18" />

diff --git a/app/components/settings/namelist.vue b/app/components/settings/namelist.vue
@@ -52,7 +52,11 @@ function handleAddNamelist() {
 </script>
 
 <template>
-  <NFormItem :label="t('current')" label-placement="left">
+  <NFormItem
+    :label="t('current')"
+    label-placement="left"
+    data-guide-id="namelist-selector"
+  >
     <NSelect
       v-model:value="config.namelist"
       class="namelist-selector"

diff --git a/app/components/settings/namelist/operations.vue b/app/components/settings/namelist/operations.vue
@@ -29,7 +29,7 @@ async function handleExport() {
 </script>
 
 <template>
-  <NSpace>
+  <NSpace data-guide-id="namelist-operations">
     <NButton :disabled="limited" @click="showBatchInput = true">
       {{ t('batch-input') }}
       <template #icon>

diff --git a/app/locales/en.ts b/app/locales/en.ts
@@ -15,6 +15,11 @@ export default {
     stopRolling: {
       0: { title: 'Stop rolling', description: 'Click the red button to stop rolling.' },
     },
+    namelist: {
+      0: { title: 'Namelist feature', description: 'It is what you think it is.' },
+      1: { title: 'Batch import/export', description: 'You can batch add names, or import names from Excel. Of course, you can also export the list to a text file.' },
+      2: { title: 'Multiple lists', description: 'You can create multiple lists, and different lists do not interfere with each other. Click the dropdown box to switch the currently effective list.' },
+    },
     plan: {
       0: { title: 'Plan feature', description: 'You can enable Plan to control the next draws.' },
       1: { title: 'But to prevent abuse', description: 'After enabling the plan feature, the settings button will turn red.' },

diff --git a/app/locales/utils.ts b/app/locales/utils.ts
@@ -9,15 +9,10 @@ export interface I18nRequiedText {
   done: string
   error: string
   guide: {
-    welcome: {
-      [K in 0 | 1 | 2 | 3]: GuideInfo
-    }
-    stopRolling: {
-      0: GuideInfo
-    }
-    plan: {
-      [K in 0 | 1]: GuideInfo
-    }
+    welcome: Record<0 | 1 | 2 | 3, GuideInfo>
+    stopRolling: Record<0, GuideInfo>
+    namelist: Record<0 | 1 | 2, GuideInfo>
+    plan: Record<0 | 1, GuideInfo>
   }
   nextStep: string
   prevStep: string

diff --git a/app/locales/zh-CN.ts b/app/locales/zh-CN.ts
@@ -15,6 +15,11 @@ export default {
     stopRolling: [
       { title: '停止抽取', description: '点击红色按钮停止抽取。' },
     ],
+    namelist: [
+      { title: '名单功能', description: '似乎不需要解释。' },
+      { title: '批量导入/导出', description: '你可以批量添加名字，也可以 Excel 中导入名字。当然也支持把名单导出为文本文件。' },
+      { title: '多个名单', description: '你可以创建多个名单，不同名单之间互不干扰。点击下拉框即可切换当前生效的名单。' },
+    ],
     plan: [
       { title: '计划功能', description: '可以让你控制接下来的抽取结果。' },
       { title: '不过为了防止滥用', description: '启用计划后，设置按钮会变成红色。' },

diff --git a/app/utils/guide.ts b/app/utils/guide.ts
@@ -6,6 +6,7 @@ import 'driver.js/dist/driver.css';
 export const GuideSchema = z.object({
   welcome: z.boolean().default(false),
   stopRolling: z.boolean().default(false),
+  namelist: z.boolean().default(false),
   plan: z.boolean().default(false),
 });
 
@@ -76,6 +77,21 @@ export function triggerStopRollingGuide() {
   });
 }
 
+export function triggerNamelistGuide() {
+  drive('namelist', {
+    steps: [{
+      element: getElement('namelist-drawer'),
+      popover: getGuidePopover('namelist.0'),
+    }, {
+      element: getElement('namelist-operations'),
+      popover: getGuidePopover('namelist.1'),
+    }, {
+      element: getElement('namelist-selector'),
+      popover: getGuidePopover('namelist.2'),
+    }],
+  });
+}
+
 export function triggerPlanGuide() {
   drive('plan', {
     steps: [{