feat: 添加标签页页面

Author: Ohh-889

src/pages/(base)/function/tab/index.tsx

@@ -0,0 +1,104 @@
+import { useRouter } from '@/features/router';
+import type { LocationQueryRaw } from '@/features/router/query';
+import { useTabActions, useTabLabel } from '@/features/tab/tabHooks';
+
+const Tab = () => {
+  const { t } = useTranslation();
+
+  const { resetTabLabel, setTabLabel } = useTabLabel();
+
+  const { removeActiveTab, removeTabById } = useTabActions();
+
+  const { navigate, push } = useRouter();
+
+  function changeTabLabel(value: string) {
+    setTabLabel(value);
+  }
+
+  function resetLabel() {
+    resetTabLabel();
+  }
+
+  function goMultiTab(query?: LocationQueryRaw) {
+    push('/function/multi-tab', query);
+  }
+
+  function removeAboutTab() {
+    removeTabById('/about');
+  }
+
+  function goAbout() {
+    navigate('/about');
+  }
+
+  return (
+    <ASpace
+      className="w-full"
+      direction="vertical"
+      size={16}
+    >
+      <ACard
+        className='"card-wrapper'
+        size="small"
+        title={t('page.function.tab.tabOperate.title')}
+        variant="borderless"
+      >
+        <ADivider orientation="left">{t('page.function.tab.tabOperate.addTab')}</ADivider>
+        <AButton onClick={goAbout}>{t('page.function.tab.tabOperate.addTabDesc')}</AButton>
+
+        <ADivider orientation="left">{t('page.function.tab.tabOperate.closeTab')}</ADivider>
+        <ASpace size={16}>
+          <AButton onClick={removeActiveTab}>{t('page.function.tab.tabOperate.closeCurrentTab')}</AButton>
+
+          <AButton onClick={removeAboutTab}>{t('page.function.tab.tabOperate.closeAboutTab')}</AButton>
+        </ASpace>
+
+        <ADivider orientation="left">{t('page.function.tab.tabOperate.addMultiTab')}</ADivider>
+        <ASpace
+          wrap
+          className="m-0!"
+          size={16}
+        >
+          <AButton onClick={() => goMultiTab()}>{t('page.function.tab.tabOperate.addMultiTabDesc1')}</AButton>
+
+          <AButton
+            onClick={() => {
+              goMultiTab({ a: '1' });
+            }}
+          >
+            {t('page.function.tab.tabOperate.addMultiTabDesc2')}
+          </AButton>
+        </ASpace>
+      </ACard>
+
+      <ACard
+        className='"card-wrapper'
+        size="small"
+        title={t('page.function.tab.tabTitle.title')}
+        variant="borderless"
+      >
+        <ADivider orientation="left">{t('page.function.tab.tabTitle.changeTitle')}</ADivider>
+
+        <AInput.Search
+          allowClear
+          className="max-w-240px"
+          enterButton={t('page.function.tab.tabTitle.change')}
+          onSearch={changeTabLabel}
+        />
+
+        <ADivider orientation="left">{t('page.function.tab.tabTitle.resetTitle')}</ADivider>
+        <AButton onClick={resetLabel}>{t('page.function.tab.tabTitle.reset')}</AButton>
+      </ACard>
+    </ASpace>
+  );
+};
+
+export const handle = {
+  i18nKey: 'route.function_tab',
+  icon: 'ic:round-tab',
+  keepAlive: true,
+  order: 1,
+  title: 'function_tab'
+};
+
+export default Tab;