feat(admin/components/button): 添加了 LinkButton

issue9 · Sep 4, 2024 · c0e64b7 · c0e64b7
1 parent 4f33959
commit c0e64b7
Show file tree

Hide file tree

Showing 7 changed files with 137 additions and 14 deletions.
diff --git a/admin/src/components/button/demo.tsx b/admin/src/components/button/demo.tsx
@@ -4,7 +4,7 @@
 
 import { Accessor, createSignal, For, JSX, Setter } from 'solid-js';
 
-import { Button, ButtonGroup, ConfirmButton, SplitButton } from '@/components';
+import { Button, ButtonGroup, ConfirmButton, LinkButton, SplitButton } from '@/components';
 import { boolSelector, Demo, palettesWithUndefined } from '@/components/base/demo';
 import { Style, styles } from './types';
 
@@ -33,6 +33,19 @@ export default function() {
     const [disabledS, disabled] = boolSelector('disabled');
     const [roundedS, rounded] = boolSelector('rounded');
 
+    const Links = () => <div class="flex flex-wrap items-center gap-2 my-4">
+        <For each={palettesWithUndefined}>
+            {(c) => (
+                <LinkButton href="./" disabled={disabled()} rounded={rounded()} style={style()} palette={c}>{c ? c : 'undefined'}</LinkButton>
+            )}
+        </For>
+        <LinkButton href="./" disabled={disabled()} rounded={rounded()} style={style()} palette="primary">
+            <span class="c--icon mr-1">face</span>with icon
+        </LinkButton>
+
+        <Button rounded style='fill' palette='tertiary'>对比按钮</Button>
+    </div>;
+
     const Buttons = () => <div class="flex flex-wrap items-center gap-2 my-4">
         <For each={palettesWithUndefined}>
             {(c) => (
@@ -99,6 +112,36 @@ export default function() {
         </For>
     </div>;
 
+    const LinkButtonGroups = () => <div class="flex flex-wrap items-center gap-2">
+        <For each={palettesWithUndefined}>
+            {(c) => (
+                <>
+                    <ButtonGroup rounded={rounded()} palette={c} style={style()} disabled={disabled()}>
+                        <LinkButton href='.'>abc</LinkButton>
+                        <LinkButton href='.'>def</LinkButton>
+                        <LinkButton href='.'>hij</LinkButton>
+                    </ButtonGroup>
+                    <br />
+                </>
+            )}
+        </For>
+    </div>;
+
+    const LinkIconButtonGroups = () => <div class="flex flex-wrap items-center gap-2">
+        <For each={palettesWithUndefined}>
+            {(c) => (
+                <>
+                    <ButtonGroup rounded={rounded()} palette={c} style={style()} disabled={disabled()}>
+                        <LinkButton icon href="">face</LinkButton>
+                        <LinkButton icon href="">close</LinkButton>
+                        <LinkButton icon href="">sync</LinkButton>
+                    </ButtonGroup>
+                    <br />
+                </>
+            )}
+        </For>
+    </div>;
+
     const Block = () => <div class="flex flex-col gap-y-2">
         <Button disabled={disabled()} rounded={rounded()} style={style()} palette='primary'>block</Button>
 
@@ -127,6 +170,11 @@ export default function() {
                 <Buttons />
             </div>
 
+            <div class="w-full">
+                <h1 class="my-4">link</h1>
+                <Links />
+            </div>
+
             <div class="w-full">
                 <h1 class="my-4">icon-button</h1>
                 <IconButtons />
@@ -147,6 +195,16 @@ export default function() {
                 <IconButtonGroups />
             </div>
 
+            <div class="w-full">
+                <h1 class="my-4">link-button-group</h1>
+                <LinkButtonGroups />
+            </div>
+
+            <div class="w-full">
+                <h1 class="my-4">link-icon-button-group</h1>
+                <LinkIconButtonGroups />
+            </div>
+
             <div class="w-full">
                 <h1 class="my-4">block</h1>
                 <Block />

diff --git a/admin/src/components/button/group.tsx b/admin/src/components/button/group.tsx
@@ -8,7 +8,7 @@ import { Props as BaseProps, defaultProps } from './types';
 
 export interface Props extends BaseProps {
     /**
-     * 子元素，必须得是 Button 类型。
+     * 子元素，必须得是 Button 或是 LinkButton 类型。
      */
     children: JSX.Element;
 }

diff --git a/admin/src/components/button/index.ts b/admin/src/components/button/index.ts
@@ -5,6 +5,9 @@
 export { default as Button } from './button';
 export type { Props as ButtonProps } from './button';
 
+export { default as LinkButton } from './link';
+export type { Props as LinkButtonProps } from './link';
+
 export { default as ConfirmButton } from './confirm';
 export type { Props as ConfirmButtonProps } from './confirm';
 

diff --git a/admin/src/components/button/link.tsx b/admin/src/components/button/link.tsx
@@ -0,0 +1,58 @@
+// SPDX-FileCopyrightText: 2024 caixw
+//
+// SPDX-License-Identifier: MIT
+
+
+import { A } from '@solidjs/router';
+import { JSX, mergeProps } from 'solid-js';
+
+import { Props as BaseProps, defaultProps as defaultBaseProps } from './types';
+
+/**
+ * 将 {@link A} 以按钮的形式展示
+ */
+export interface Props extends BaseProps {
+    /**
+     * 跳转的链接
+     */
+    href: string;
+
+    /**
+     * 是否为图标按钮
+     *
+     * 如果为 true，表示将 children 作为图标内容进行解析。
+     */
+    icon?: boolean;
+
+    /**
+     * 按钮内容，如果 icon 为 true，那么内容应该是图标名称，否则不能显示为正确图标。
+     */
+    children: JSX.Element;
+
+    title?: string;
+    accessKey?: string;
+}
+
+export const defaultProps: Readonly<Partial<Props>> = {
+    ...defaultBaseProps,
+};
+
+/**
+ * 普通的按钮组件
+ */
+export default function(props: Props) {
+    props = mergeProps(defaultProps, props);
+
+    // A.href 无法设置为 javascript:void(0)
+    return <A href={props.disabled ? '' : props.href} replace={!props.disabled} accessKey={props.accessKey} title={props.title} classList={{
+        'c--button': true,
+        'c--icon-container': true,
+        'c--icon': props.icon,
+        'c--button-icon': props.icon,
+        [`c--button-${props.style}`]: true,
+        [`palette--${props.palette}`]: !!props.palette,
+        'rounded-full': props.rounded,
+        'link-enabled': !props.disabled,
+        'link-disabled': props.disabled
+    }}>{props.children}</A>;
+}
diff --git a/admin/src/components/button/style.css b/admin/src/components/button/style.css
@@ -18,6 +18,7 @@
     }
 
     .c--button.c--button-fill:enabled:hover,
+    .c--button.c--button-fill.link-enabled:hover,
     .c--button.c--button-fill:focus-visible {
         @apply bg-[var(--bg-high)];
     }
@@ -27,6 +28,7 @@
     }
 
     .c--button.c--button-border:enabled:hover,
+    .c--button.c--button-border.link-enabled:hover,
     .c--button.c--button-border:focus-visible {
         @apply bg-[var(--bg)];
     }
@@ -36,10 +38,12 @@
     }
 
     .c--button.c--button-flat:enabled:hover,
+    .c--button.c--button-flat.link-enabled:hover,
     .c--button.c--button-flat:focus-visible {
         @apply bg-[var(--bg-high)] border-[var(--bg-high)];
     }
 
+    .c--button.link-disabled,
     .c--button:disabled {
         @apply cursor-not-allowed bg-[var(--bg)] text-[var(--bg-high)];
     }
@@ -86,6 +90,7 @@
         }
 
         .c--button:enabled:hover,
+        .c--button.link-enabled:hover,
         .c--button:focus-visible {
             @apply bg-[var(--bg-high)];
         }
@@ -99,6 +104,7 @@
         }
 
         .c--button:enabled:hover,
+        .c--button.link-enabled:hover,
         .c--button:focus-visible {
             @apply bg-[var(--bg)];
         }
@@ -112,11 +118,13 @@
         }
 
         .c--button:enabled:hover,
+        .c--button.link-enabled:hover,
         .c--button:focus-visible {
             @apply bg-[var(--bg)];
         }
     }
 
+    .c--button.link-disabled *,
     .c--button-group:disabled * {
         @apply cursor-not-allowed bg-[var(--bg)] text-[var(--bg-high)];
     }

diff --git a/admin/src/pages/admins/admins.tsx b/admin/src/pages/admins/admins.tsx
@@ -2,11 +2,13 @@
 //
 // SPDX-License-Identifier: MIT
 
-import { useNavigate } from '@solidjs/router';
 import { JSX } from 'solid-js';
 
 import { useApp } from '@/app';
-import { buildEnumsOptions, Button, Choice, Column, Page, RemoteTable, RemoteTableMethods, TextField, translateEnum } from '@/components';
+import {
+    buildEnumsOptions, Choice, Column, LinkButton,
+    Page, RemoteTable, RemoteTableMethods, TextField, translateEnum
+} from '@/components';
 import type { Admin, Query, Sex, State } from './types';
 import { sexesMap, statesMap } from './types';
 
@@ -28,13 +30,10 @@ export default function(props: Props): JSX.Element {
     };
 
     let ref: RemoteTableMethods<Admin>;
-    const nav = useNavigate();
 
     return <Page title="_i.page.admin.adminsManager">
         <RemoteTable ref={(el)=>ref=el} inSearch paging path='/admins' queries={q} systemToolbar toolbar={
-            <>
-                <Button palette='primary'>{ctx.t('_i.page.newItem')}</Button>
-            </>
+            <LinkButton palette='primary' href={`${props.routePrefix}/0`}>{ctx.t('_i.page.newItem')}</LinkButton>
         } queryForm={(qa) => (
             <>
                 <TextField accessor={qa.accessor<string>('text')} />
@@ -60,7 +59,7 @@ export default function(props: Props): JSX.Element {
             {
                 id: 'actions', label: ctx.t('_i.page.actions'), isUnexported: true, renderContent: ((id, _, obj) => {
                     return <div class="flex gap-x-2">
-                        <Button icon rounded palette='tertiary' onClick={()=>nav(`${props.routePrefix}/${obj!['id']}`)} title={ctx.t('_i.page.editItem')}>edit</Button>
+                        <LinkButton icon rounded palette='tertiary' href={`${props.routePrefix}/${obj!['id']}`} title={ctx.t('_i.page.editItem')}>edit</LinkButton>
                         {ref.DeleteAction(obj!['id'])}
                     </div>;
                 }) as Column<Admin>['renderContent']

diff --git a/admin/src/pages/roles/roles.tsx b/admin/src/pages/roles/roles.tsx
@@ -2,12 +2,11 @@
 //
 // SPDX-License-Identifier: MIT
 
-import { useNavigate } from '@solidjs/router';
 import { JSX } from 'solid-js';
 
 import { useApp } from '@/app';
 import {
-    Button, Column, Dialog, DialogMethods, ObjectAccessor,
+    Button, Column, Dialog, DialogMethods, LinkButton, ObjectAccessor,
     Page, RemoteTable, RemoteTableMethods, TextArea, TextField
 } from '@/components';
 import { Return } from '@/core';
@@ -70,8 +69,6 @@ export default function Roles(props: Props): JSX.Element {
         dialogRef.showModal();
     };
 
-    const nav = useNavigate();
-
     return <Page title="_i.page.roles.rolesManager">
         <Dialog ref={(el)=>dialogRef=el}
             header={currentID.getValue() ? ctx.t('_i.page.editItem') : ctx.t('_i.page.newItem')}
@@ -89,7 +86,7 @@ export default function Roles(props: Props): JSX.Element {
             {
                 id: 'actions', label: ctx.t('_i.page.actions'), renderContent: ((id, _, obj) => <div class="flex gap-x-2">
                     <Button icon rounded palette='tertiary' onClick={()=>edit(obj!['id']!)} title={ctx.t('_i.page.editItem')}>edit</Button>
-                    <Button icon rounded palette='tertiary' onClick={()=>nav(`${props.routePrefix}/${obj!['id']}/permission`) } title={ctx.t('_i.page.roles.editPermission')}>passkey</Button>
+                    <LinkButton icon rounded palette='tertiary' href={`${props.routePrefix}/${obj!['id']}/permission`} title={ctx.t('_i.page.roles.editPermission')}>passkey</LinkButton>
                     {tableRef.DeleteAction(obj!['id']!)}
                 </div>) as Column<Role>['renderContent']
             },