Skip to content

Commit

Permalink
feat(omi-templates): unified color, organized catalog
Browse files Browse the repository at this point in the history
  • Loading branch information
dntzhang committed Feb 11, 2024
1 parent 9568564 commit 5a474aa
Show file tree
Hide file tree
Showing 32 changed files with 280 additions and 447 deletions.
1 change: 0 additions & 1 deletion packages/omi-templates/src/components/appear.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ export class Appear extends Component {
this.classList.add(item)
this.classList.remove(item)
})
// o-table 和 日历组件的切换时,需要刷新一下
window.refreshDark()
}, 10)
}
Expand Down
4 changes: 2 additions & 2 deletions packages/omi-templates/src/components/customize-button.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand Down
2 changes: 1 addition & 1 deletion packages/omi-templates/src/components/customize.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
6 changes: 3 additions & 3 deletions packages/omi-templates/src/components/dark-switch.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down Expand Up @@ -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}
>
Expand Down
8 changes: 4 additions & 4 deletions packages/omi-templates/src/components/fallback.tsx
Original file line number Diff line number Diff line change
@@ -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">
Expand Down Expand Up @@ -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>
Expand Down
14 changes: 7 additions & 7 deletions packages/omi-templates/src/components/navbar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
},
Expand All @@ -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" />
Expand All @@ -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,
},
Expand All @@ -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"
>
Expand Down Expand Up @@ -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={
Expand All @@ -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"
Expand Down Expand Up @@ -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)
})}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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)}
>
Expand Down
95 changes: 95 additions & 0 deletions packages/omi-templates/src/components/omiu/table.tsx
Original file line number Diff line number Diff line change
@@ -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>
)
}
}
Empty file.
12 changes: 6 additions & 6 deletions packages/omi-templates/src/components/site-layout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
)}
Expand Down
Loading

0 comments on commit 5a474aa

Please sign in to comment.