feat(omi-templates): tag components & modify default font family

Tencent · Feb 12, 2024 · fdb7085 · fdb7085
1 parent 2809f3c
commit fdb7085
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 4 deletions.
diff --git a/packages/omi-templates/src/components/omiu/table.tsx b/packages/omi-templates/src/components/omiu/table.tsx
@@ -1,4 +1,5 @@
 import { Component, tag } from 'omi'
+import './tag.tsx'
 
 @tag('o-table')
 export class Table extends Component {
@@ -72,7 +73,9 @@ export class Table extends Component {
                     </th>
                     <td class="px-6 py-4 w-24">银色</td>
                     <td class="px-6 py-4 w-24">Laptop</td>
-                    <td class="px-6 py-4 w-20">是</td>
+                    <td class="px-6 py-4 w-20">
+                      <o-tag>带有</o-tag>
+                    </td>
                     <td class="px-6 py-4 w-20">是</td>
                     <td class="px-6 py-4 w-24">¥12999</td>
                     <td class="px-6 py-4 w-24">3.0kg</td>

diff --git a/packages/omi-templates/src/components/omiu/tag.tsx b/packages/omi-templates/src/components/omiu/tag.tsx
@@ -0,0 +1,61 @@
+import { Component, tag } from 'omi'
+
+@tag('o-tag')
+export class Tag extends Component {
+  static defaultProps = {
+    closable: false,
+    default: null,
+    disabled: false,
+    icon: undefined,
+    maxWidth: null,
+    shape: 'square',
+    size: 'medium', // small, medium, large
+    theme: 'default',
+    variant: 'dark',
+  }
+
+  onClose = (e: MouseEvent) => {
+    e.stopPropagation()
+    this.fire('close')
+  }
+
+  render() {
+    // @ts-ignore
+    const { closable, disabled, icon, maxWidth, shape, size, theme, variant } = this.props
+
+    const baseClasses =
+      'inline-flex items-center justify-center border border-transparent text-base font-medium rounded-sm focus:outline-none transition duration-150 ease-in-out whitespace-nowrap'
+    const sizeClasses =
+      size === 'small' ? 'px-1 text-xs h-5' : size === 'medium' ? 'px-3 text-xs h-6' : 'px-4 text-sm h-8'
+    const shapeClasses = shape === 'square' ? '' : shape === 'round' ? 'rounded' : 'rounded-full'
+    const themeClasses =
+      theme === 'default'
+        ? 'bg-zinc-200'
+        : theme === 'primary'
+        ? 'bg-blue-600'
+        : theme === 'warning'
+        ? 'bg-yellow-400'
+        : theme === 'danger'
+        ? 'bg-red-600'
+        : 'bg-green-500'
+    const variantClasses =
+      variant === 'dark'
+        ? 'text-zinc-700'
+        : variant === 'light'
+        ? 'text-zinc-700'
+        : variant === 'outline'
+        ? `border ${themeClasses}`
+        : `border ${themeClasses} bg-white`
+    const disabledClasses = disabled ? 'cursor-not-allowed' : 'cursor-pointer'
+
+    const cls = `${baseClasses} ${sizeClasses} ${shapeClasses} ${themeClasses} ${variantClasses} ${disabledClasses}`
+
+    return (
+      <div className={cls} style={{ maxWidth }}>
+        {icon && <span className="mr-2">{typeof icon === 'function' ? icon() : icon}</span>}
+        <slot></slot>
+        {closable && <i class="t-icon t-icon-close"></i>}
+      </div>
+    )
+  }
+}
diff --git a/packages/omi-templates/src/components/sidebar.tsx b/packages/omi-templates/src/components/sidebar.tsx
@@ -129,9 +129,7 @@ export class Sidebar extends Component<Props> {
           })}
         >
           <div>
-            <div
-              class={classNames('flex items-center h-[50px] space-x-2 justify-center')}
-            >
+            <div class={classNames('flex items-center h-[50px] space-x-2 justify-center')}>
               <i class="h-8 w-8">
                 <img src="https://omi.cdn-go.cn/admin/latest/home/omi.svg"></img>
               </i>

diff --git a/packages/omi-templates/tailwind.config.js b/packages/omi-templates/tailwind.config.js
@@ -6,6 +6,10 @@ export default {
     "./src/**/*.{js,ts,jsx,tsx}",
   ],
   theme: {
+    fontFamily: {
+      // https://tailwindcss.com/docs/font-family#customizing-the-default-font
+      sans: '-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Hiragino Sans GB,Microsoft YaHei UI,Microsoft YaHei,Source Han Sans CN,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol'
+    },
     extend: {
       typography: {
         DEFAULT: {