[duoyun-ui] Add <dy-pat-footer> <dy-pat-nav>

mantou132 · Jan 21, 2024 · 28c46c0 · 28c46c0
1 parent 046bad3
commit 28c46c0
Show file tree

Hide file tree

Showing 11 changed files with 790 additions and 32 deletions.
diff --git a/packages/duoyun-ui/docs/zh/01-guide/55-pattern.md b/packages/duoyun-ui/docs/zh/01-guide/55-pattern.md
@@ -17,7 +17,7 @@ render(
   html`
     <dy-pat-console
       name="DuoyunUI"
-      logo="https://duoyun-ui.gemjs.org/logo.png"
+      .logo=${'https://duoyun-ui.gemjs.org/logo.png'}
       .routes=${routes}
       .navItems=${navItems}
       .contextMenus=${contextMenus}

diff --git a/packages/duoyun-ui/docs/zh/30-blog/200-crud.md b/packages/duoyun-ui/docs/zh/30-blog/200-crud.md
@@ -140,7 +140,7 @@ render(
   html`
     <dy-pat-console
       name="DuoyunUI"
-      logo="https://duoyun-ui.gemjs.org/logo.png"
+      .logo=${'https://duoyun-ui.gemjs.org/logo.png'}
       .routes=${routes}
       .navItems=${navItems}
       .contextMenus=${contextMenus}

diff --git a/packages/duoyun-ui/src/lib/icons.ts b/packages/duoyun-ui/src/lib/icons.ts
@@ -55,6 +55,12 @@ const defaultIcons = {
   search: genIcon(
     `M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z`,
   ),
+  outward: genIcon(
+    '',
+    raw`
+      <polygon points="6,6 6,8 14.59,8 5,17.59 6.41,19 16,9.41 16,18 18,18 18,6" />
+    `,
+  ),
   menu: genIcon(`M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z`),
   filter: genIcon(`M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z`),
   more: genIcon(

diff --git a/packages/duoyun-ui/src/lib/styles.ts b/packages/duoyun-ui/src/lib/styles.ts
@@ -6,12 +6,12 @@ import { theme } from '../lib/theme';
 // global style: `::selection`, `::target-text`, `::highlight`
 // https://bugzilla.mozilla.org/show_bug.cgi?id=1868009
 export const focusStyle = createCSSSheet(css`
-  :host(:focus),
-  :focus {
+  :host(:where(:focus)),
+  :where(:focus) {
     outline: none;
   }
-  :host(:focus-visible),
-  :focus-visible {
+  :host(:where(:focus-visible)),
+  :where(:focus-visible) {
     outline: 2px solid ${theme.focusColor};
     outline-offset: -2px;
   }

diff --git a/packages/duoyun-ui/src/lib/utils.ts b/packages/duoyun-ui/src/lib/utils.ts
@@ -389,3 +389,8 @@ export function createCacheStore<T extends Record<string, any>>(
   const [store, , save] = useCacheStore(storageKey, initStore, options);
   return [store, save] as const;
 }
+
+// 是链接需要使用 img 渲染
+export function isRemoteIcon(icon: string | Element | DocumentFragment): icon is string {
+  return typeof icon === 'string' && !!icon.trim().match(/^(http|[./])/);
+}
diff --git a/packages/duoyun-ui/src/patterns/console.ts b/packages/duoyun-ui/src/patterns/console.ts
@@ -12,6 +12,7 @@ import type { NavItems } from '../elements/side-navigation';
 import type { DuoyunUseElement } from '../elements/use';
 import { DuoyunRouteElement, RouteItem, RoutesObject } from '../elements/route';
 import { ContextMenu, ContextMenuItem } from '../elements/contextmenu';
+import { isRemoteIcon } from '../lib/utils';
 
 import '../elements/title';
 import '../elements/use';
@@ -142,7 +143,8 @@ const style = createCSSSheet(
     : rules,
 );
 
-const globalStyle = createCSSSheet(css`
+// 禁止向皮条
+const consoleStyle = createCSSSheet(css`
   ::selection,
   ::target-text {
     color: white;
@@ -152,22 +154,19 @@ const globalStyle = createCSSSheet(css`
     color: white;
     background: ${theme.informativeColor};
   }
-  :root {
+  :where(:root) {
     font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans',
       'PingFang SC', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
-  }
-  html {
     height: 100%;
     overflow: hidden;
   }
-  body {
+  :where(body) {
     height: 100%;
     overflow: auto;
-    scrollbar-width: thin;
+    overscroll-behavior: none;
     margin: 0;
-    padding: 0;
   }
 `);
 
@@ -176,14 +175,14 @@ const globalStyle = createCSSSheet(css`
  */
 @customElement('dy-pat-console')
 @adoptedStyle(style)
-@adoptedStyle(globalStyle)
+@adoptedStyle(consoleStyle)
 export class DyPatConsoleElement extends GemElement {
   @boolattribute keyboardAccess: boolean;
   @boolattribute screencastMode: boolean;
   @boolattribute responsive: boolean;
-  @attribute logo: string;
   @attribute name: string;
 
+  @property logo: string | Element | DocumentFragment;
   @property routes?: Routes;
   @property navItems?: NavItems;
   @property contextMenus?: ContextMenus;
@@ -224,7 +223,7 @@ export class DyPatConsoleElement extends GemElement {
     return html`
       <dy-title hidden .suffix=${mediaQuery.isPWA ? '' : this.name && ` - ${this.name}`}></dy-title>
       <div class="sidebar">
-        ${this.logo.trim().match(/^(http|[./])/)
+        ${isRemoteIcon(this.logo)
           ? html`<img class="logo" alt="Logo" src=${this.logo}></img>`
           : html`<dy-use class="logo" .element=${this.logo}></dy-use>`}
         <dy-side-navigation class="navigation" .items=${this.navItems}></dy-side-navigation>