feat(omi-templates): unified color, organized catalog

Author: dntzhang

packages/omi-templates/src/components/appear.tsx

@@ -18,7 +18,6 @@ export class Appear extends Component {
         this.classList.add(item)
         this.classList.remove(item)
       })
-      // o-table 和 日历组件的切换时，需要刷新一下
       window.refreshDark()
     }, 10)
   }

packages/omi-templates/src/components/customize-button.tsx

@@ -2,9 +2,9 @@ import { showCustomize } from './customize.tsx'
 
 export function CustomizeButton() {
   return (
-    <div class="fixed right-0 bottom-0 m-6 bg-gray-300 dark:bg-background dark:text-foreground bg-opacity-40 backdrop-filter h-16 backdrop-blur-md py-2 px-3 rounded-full flex items-center">
+    <div class="fixed right-0 bottom-0 m-6 bg-zinc-300 dark:bg-background dark:text-foreground bg-opacity-40 backdrop-filter h-16 backdrop-blur-md py-2 px-3 rounded-full flex items-center">
       <button
-        class="flex border bg-gray-100 dark:bg-background dark:text-foreground p-2 rounded-full text-gray-600 hover:text-primary"
+        class="flex border bg-zinc-100 dark:bg-background dark:text-foreground p-2 rounded-full text-zinc-600 hover:text-primary"
         onClick={(evt) => {
           evt.stopPropagation()
           showCustomize()

packages/omi-templates/src/components/customize.tsx

@@ -83,7 +83,7 @@ class Customize extends Component {
           <div class="flex items-start pt-4 md:pt-0">
             <div class="space-y-1 pr-2">
               <div class="font-semibold leading-none tracking-tight text-lg dark:text-foreground">自定义</div>
-              <div class="text-muted-foreground text-gray-600 dark:text-foreground">为你的模板选择一个颜色和样式。</div>
+              <div class="text-muted-foreground text-zinc-600 dark:text-foreground">为你的模板选择一个颜色和样式。</div>
             </div>
           </div>
           <div class="flex flex-1 flex-col space-y-4 md:space-y-6">

packages/omi-templates/src/components/dark-switch.tsx

@@ -15,11 +15,11 @@ export class DarkSwitch extends Component {
 
   render() {
     return (
-      <div class="w-[60px] h-8 bg-gray-300 dark:bg-zinc-400 rounded-[2px] relative">
+      <div class="w-[60px] h-8 bg-zinc-300 dark:bg-zinc-400 rounded-[2px] relative">
         <div
           class={classNames('absolute z-0  w-[28px] h-[28px] top-[2px] rounded-[2px] transition-all duration-300', {
             'left-[2px] bg-white': !isDark.value,
-            'left-[30px] bg-gray-500': isDark.value,
+            'left-[30px] bg-zinc-500': isDark.value,
           })}
         ></div>
 
@@ -72,7 +72,7 @@ export class DarkSwitch extends Component {
         <div
           class={classNames('absolute transition-all duration-300 w-[30px] h-[30px] right-0 px-1.5 py-[7px]', {
             'text-white': isDark.value,
-            'text-gray-500 cursor-pointer': !isDark.value,
+            'text-zinc-500 cursor-pointer': !isDark.value,
           })}
           onClick={this.onDarkClick}
         >

packages/omi-templates/src/components/fallback.tsx

@@ -1,5 +1,5 @@
 export const fallback = (
-  <div class="flex items-center justify-center bg-gray-100" style="height:calc(100vh - 349px)">
+  <div class="flex items-center justify-center bg-zinc-100" style="height:calc(100vh - 349px)">
     <div class="p-8  text-center">
       <div class="mb-4 text-primary">
         <svg data-v-452ecc15="" xmlns="http://www.w3.org/2000/svg" width="200" height="140" fill="none">
@@ -30,15 +30,15 @@ export const fallback = (
         </svg>
       </div>
 
-      <h2 class="text-2xl font-bold mb-2 text-gray-700">网络异常</h2>
+      <h2 class="text-2xl font-bold mb-2 text-zinc-700">网络异常</h2>
 
-      <p class="text-gray-600 mb-6">网络异常，请稍后再试</p>
+      <p class="text-zinc-600 mb-6">网络异常，请稍后再试</p>
 
       <div class="flex justify-center space-x-4">
         <a href="#/" class="py-2 px-4 bg-primary text-white rounded hover:bg-primary/85">
           重新加载
         </a>
-        <a href="#/" class="py-2 px-4 bg-gray-200 text-gray-700 rounded hover:bg-gray-300">
+        <a href="#/" class="py-2 px-4 bg-zinc-200 text-zinc-700 rounded hover:bg-zinc-300">
           返回首页
         </a>
       </div>

packages/omi-templates/src/components/navbar.tsx

@@ -93,7 +93,7 @@ export class Navbar extends Component<Props> {
                 class={classNames(
                   'no-underline block px-4 py-2 hover:text-primary hover:bg-slate-100 dark:hover:bg-zinc-600  rounded-md p-2 dark:text-foreground',
                   {
-                    'text-gray-600 md:text-gray-800': this.state.active !== navbarItemChild.value,
+                    'text-zinc-600 md:text-zinc-800': this.state.active !== navbarItemChild.value,
                     'text-primary md:text-primary': this.state.active === navbarItemChild.value,
                     'dark:bg-zinc-200/20': this.state.active === navbarItemChild.value,
                   },
@@ -102,7 +102,7 @@ export class Navbar extends Component<Props> {
                 href={`${navbarItemChild.href}`}
               >
                 {navbarItemChild.text}
-                <div class="w-3 h-3 inline-block text-gray-600 ml-1">
+                <div class="w-3 h-3 inline-block text-zinc-600 ml-1">
                   <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="w-full h-full">
                     <path d="M0 0h24v24H0V0z" fill="none" />
                     <path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z" />
@@ -119,7 +119,7 @@ export class Navbar extends Component<Props> {
               class={classNames(
                 'no-underline block px-4 py-2 hover:text-primary hover:bg-slate-100 dark:hover:bg-zinc-600 rounded-md  p-2 dark:text-foreground',
                 {
-                  'text-gray-600 md:text-gray-800': this.state.active !== navbarItemChild.value,
+                  'text-zinc-600 md:text-zinc-800': this.state.active !== navbarItemChild.value,
                   'text-primary md:text-primary': this.state.active === navbarItemChild.value,
                   'dark:bg-zinc-200/20': this.state.active === navbarItemChild.value,
                 },
@@ -140,7 +140,7 @@ export class Navbar extends Component<Props> {
             onClick={this.onClick}
             data-collapse-toggle="navbar-multi-level"
             type="button"
-            class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
+            class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-zinc-500 rounded-lg md:hidden hover:bg-zinc-100 focus:outline-none focus:ring-2 focus:ring-zinc-200 dark:text-zinc-400 dark:hover:bg-zinc-700 dark:focus:ring-zinc-600"
             aria-controls="navbar-multi-level"
             aria-expanded="false"
           >
@@ -199,7 +199,7 @@ export class Navbar extends Component<Props> {
                   })}
                 >
                   <a
-                    class="block text-gray-800 cursor-pointer hover:text-primary p-2 md:py-1"
+                    class="block text-zinc-800 cursor-pointer hover:text-primary p-2 md:py-1"
                     target={navbarItem.href ? navbarItem.target || '_blank' : '_self'}
                     unsafeHTML={navbarItem.inner ? { html: navbarItem.inner } : null}
                     href={
@@ -221,7 +221,7 @@ export class Navbar extends Component<Props> {
                       {navbarItem.text}
                     </span>
                     {navbarItem.href && (
-                      <div class="w-3 h-3 inline-block text-gray-600 ml-1 dark:text-foreground">
+                      <div class="w-3 h-3 inline-block text-zinc-600 ml-1 dark:text-foreground">
                         <svg
                           xmlns="http://www.w3.org/2000/svg"
                           fill="currentColor"
@@ -251,7 +251,7 @@ export class Navbar extends Component<Props> {
                       </svg>
                     )}
                     {navbarItem.children && (
-                      <ul class="md:absolute md:left-1/2 md:-translate-x-1/2 w-auto  mt-2 text-sm md:text-base dark:bg-background bg-[#fafafa] md:border static text-gray-600 overflow-hidden md:shadow-md md:invisible group-hover:visible transition-all duration-150 delay-100 rounded-md hover:text-primary">
+                      <ul class="md:absolute md:left-1/2 md:-translate-x-1/2 w-auto  mt-2 text-sm md:text-base dark:bg-background bg-[#fafafa] md:border static text-zinc-600 overflow-hidden md:shadow-md md:invisible group-hover:visible transition-all duration-150 delay-100 rounded-md hover:text-primary">
                         {navbarItem.children.map((navbarItemChild: NavbarItem) => {
                           return this.renderNavbarItemChild(navbarItemChild)
                         })}

packages/omi-templates/src/components/button.tsx packages/omi-templates/src/components/omiu/button.tsx

@@ -105,7 +105,7 @@ export class Select extends Component<Props> {
             {this.props.options.map((option) => (
               <a
                 href="javascript:"
-                class="block px-4 py-2 text-sm  hover:bg-zinc-100 rounded dark:hover:bg-zinc-400 hover:text-gray-900"
+                class="block px-4 py-2 text-sm  hover:bg-zinc-100 rounded dark:hover:bg-zinc-400 hover:text-zinc-900"
                 role="menuitem"
                 onClick={() => this.onSelectOption(option)}
               >

packages/omi-templates/src/components/calendar/calendar.ts packages/omi-templates/src/components/omiu/calendar/calendar.ts

@@ -0,0 +1,95 @@
+import { Component, tag } from 'omi'
+
+@tag('o-table')
+export class Table extends Component {
+  render() {
+    return (
+      <div class="relative overflow-auto shadow-md sm:rounded-t-lg">
+        <table class="table-fixed w-full text-sm text-left rtl:text-right background text-card-foreground">
+          <thead class="text-xs uppercase">
+            <tr>
+              <th scope="col" class="p-4 w-4">
+                <div class="flex items-center">
+                  <input
+                    id="checkbox-all-search"
+                    type="checkbox"
+                    class="w-4 h-4  border-zinc-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-zinc-800 dark:focus:ring-offset-zinc-800 focus:ring-2 er-zinc-600"
+                  />
+                  <label for="checkbox-all-search" class="sr-only">
+                    checkbox
+                  </label>
+                </div>
+              </th>
+              <th scope="col" class="px-6 py-3 w-32">
+                产品名称
+              </th>
+              <th scope="col" class="px-6 py-3  w-24">
+                颜色
+              </th>
+              <th scope="col" class="px-6 py-3  w-24">
+                类型
+              </th>
+              <th scope="col" class="px-6 py-3  w-20">
+                附件
+              </th>
+              <th scope="col" class="px-6 py-3  w-20">
+                有货
+              </th>
+              <th scope="col" class="px-6 py-3 w-24">
+                价格
+              </th>
+              <th scope="col" class="px-6 py-3 w-24">
+                重量
+              </th>
+              <th scope="col" class="px-6 py-3 sticky w-32 background right-0 text-right">
+                操作
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            {Array(5)
+              .fill(0)
+              .map(() => {
+                return (
+                  <tr class="group  border-b  dark:border-zinc-700 hover:bg-zinc-50 dark:hover:bg-zinc-600">
+                    <td class="w-4 p-4">
+                      <div class="flex items-center">
+                        <input
+                          id="checkbox-table-search-1"
+                          type="checkbox"
+                          class="w-4 h-4 text-blue-600 bg-zinc-100 border-zinc-300 rounded focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-zinc-800 dark:focus:ring-offset-zinc-800 focus:ring-2 dark:bg-zinc-700 dark:border-zinc-600"
+                        />
+                        <label for="checkbox-table-search-1" class="sr-only">
+                          checkbox
+                        </label>
+                      </div>
+                    </td>
+                    <th
+                      scope="row"
+                      class="px-6 py-4 font-medium text-zinc-900 whitespace-nowrap text-ellipsis overflow-hidden dark:text-white w-32"
+                    >
+                      苹果笔记本
+                    </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">是</td>
+                    <td class="px-6 py-4 w-24">¥12999</td>
+                    <td class="px-6 py-4 w-24">3.0kg</td>
+                    <td class=" items-center px-6 py-4 sticky w-32 right-0 background group-hover:bg-zinc-50 dark:group-hover:bg-zinc-600 text-right">
+                      <a href="#" class="font-medium text-blue-600 dark:text-blue-500 hover:underline">
+                        编辑
+                      </a>
+                      <a href="#" class="font-medium text-red-600 dark:text-red-500 hover:underline ms-3">
+                        删除
+                      </a>
+                    </td>
+                  </tr>
+                )
+              })}
+          </tbody>
+        </table>
+      </div>
+    )
+  }
+}

packages/omi-templates/src/components/calendar/index.tsx packages/omi-templates/src/components/omiu/calendar/index.tsx

@@ -20,7 +20,7 @@ export function SiteLayout(props: { hideFooter?: boolean; current?: string; chil
       <header class="bg-white dark:bg-background/10 dark:text-foreground bg-opacity-40 backdrop-filter backdrop-blur-md py-2 top-0 shadow fixed w-full px-4 md:px-0 z-[100000]">
         <div class="container mx-auto flex justify-between items-center">
           <div class="text-xl font-bold">
-            <a class="text-gray-800 dark:text-white" title="TDesign" unsafeHTML={{ html: tdesignLogo }} href="#/"></a>
+            <a class="text-zinc-800 dark:text-white" title="TDesign" unsafeHTML={{ html: tdesignLogo }} href="#/"></a>
           </div>
 
           <div class="flex items-center">
@@ -36,7 +36,7 @@ export function SiteLayout(props: { hideFooter?: boolean; current?: string; chil
           <div class="container  mx-auto py-12 grid grid-cols-1 md:grid-cols-4 gap-8">
             <div>
               <h2 class="text-xl font-bold mb-4">友情链接1</h2>
-              <ul class="text-gray-600 dark:text-foreground">
+              <ul class="text-zinc-600 dark:text-foreground">
                 <li>
                   <a href="#">链接1</a>
                 </li>
@@ -50,7 +50,7 @@ export function SiteLayout(props: { hideFooter?: boolean; current?: string; chil
             </div>
             <div>
               <h2 class="text-xl font-bold mb-4">友情链接2</h2>
-              <ul class="text-gray-600 dark:text-foreground">
+              <ul class="text-zinc-600 dark:text-foreground">
                 <li>
                   <a href="#">链接1</a>
                 </li>
@@ -64,7 +64,7 @@ export function SiteLayout(props: { hideFooter?: boolean; current?: string; chil
             </div>
             <div>
               <h2 class="text-xl font-bold mb-4">友情链接3</h2>
-              <ul class="text-gray-600 dark:text-foreground">
+              <ul class="text-zinc-600 dark:text-foreground">
                 <li>
                   <a href="#">链接1</a>
                 </li>
@@ -78,7 +78,7 @@ export function SiteLayout(props: { hideFooter?: boolean; current?: string; chil
             </div>
             <div>
               <h2 class="text-xl font-bold mb-4">友情链接4</h2>
-              <ul class="text-gray-600 dark:text-foreground">
+              <ul class="text-zinc-600 dark:text-foreground">
                 <li>
                   <a href="#">链接1</a>
                 </li>
@@ -99,7 +99,7 @@ export function SiteLayout(props: { hideFooter?: boolean; current?: string; chil
       {!props.hideFooter && (
         <footer class="bg-[#e7e7e7] border-t dark:bg-background dark:text-foreground py-6">
           <div class="container mx-auto text-center">
-            <p class="text-gray-600 dark:text-foreground">© 2024 Tencent OMI. All rights reserved.</p>
+            <p class="text-zinc-600 dark:text-foreground">© 2024 Tencent OMI. All rights reserved.</p>
           </div>
         </footer>
       )}