From 3e74856500fde16bf2a3db23915ea91659a85a9b Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Tue, 14 Mar 2023 15:24:26 +0800
Subject: [PATCH 1/6] up version

---
 packages/portal/package.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/portal/package.json b/packages/portal/package.json
index 8f044f614..164223504 100644
--- a/packages/portal/package.json
+++ b/packages/portal/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@opensig/opendesign": "workspace:^0.0.1",
+    "@opensig/opendesign": "workspace:^0.0.4",
     "normalize.css": "^8.0.1",
     "vue": "^3.2.41",
     "vue-router": "^4.1.6"
@@ -21,4 +21,4 @@
     "vite": "^3.2.3",
     "vue-tsc": "^1.0.13"
   }
-}
\ No newline at end of file
+}
-- 
Gitee


From acec4e5d2ab3f0828c22fc085fc0b4a209b54f44 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Tue, 14 Mar 2023 17:01:35 +0800
Subject: [PATCH 2/6] add dialog

---
 .../src/components/dialog/ODialog.vue         | 69 +++++++++++++++++++
 .../dialog/__demo__/DialogBasic.vue           | 42 +++++++++++
 .../dialog/__demo__/IndexDialog.vue           | 10 +++
 .../opendesign/src/components/dialog/index.ts | 12 ++++
 .../src/components/dialog/style/index.scss    | 59 ++++++++++++++++
 .../src/components/dialog/style/index.ts      |  2 +
 .../src/components/dialog/style/var.scss      |  9 +++
 .../opendesign/src/components/dialog/types.ts | 46 +++++++++++++
 packages/opendesign/src/components/index.scss |  1 +
 packages/opendesign/src/components/index.ts   |  1 +
 .../src/components/popup/style/index.scss     |  2 +-
 .../src/components/popup/style/var.scss       |  3 +
 .../src/components/style/index.scss           |  4 ++
 packages/portal/src/router.ts                 |  6 ++
 14 files changed, 265 insertions(+), 1 deletion(-)
 create mode 100644 packages/opendesign/src/components/dialog/ODialog.vue
 create mode 100644 packages/opendesign/src/components/dialog/__demo__/DialogBasic.vue
 create mode 100644 packages/opendesign/src/components/dialog/__demo__/IndexDialog.vue
 create mode 100644 packages/opendesign/src/components/dialog/index.ts
 create mode 100644 packages/opendesign/src/components/dialog/style/index.scss
 create mode 100644 packages/opendesign/src/components/dialog/style/index.ts
 create mode 100644 packages/opendesign/src/components/dialog/style/var.scss
 create mode 100644 packages/opendesign/src/components/dialog/types.ts

diff --git a/packages/opendesign/src/components/dialog/ODialog.vue b/packages/opendesign/src/components/dialog/ODialog.vue
new file mode 100644
index 000000000..4a59cdb82
--- /dev/null
+++ b/packages/opendesign/src/components/dialog/ODialog.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { ref, watch, computed } from 'vue';
+import { IconClose } from '../_shared/icons';
+
+import { dialogProps } from './types';
+
+const props = defineProps(dialogProps);
+
+const emits = defineEmits<{
+  (e: 'change', val: boolean): void;
+  (e: 'update:modelValue', val: boolean, evt: MouseEvent): void;
+}>();
+
+const toMount = ref(false);
+const isMounted = computed(() => {
+  return toMount.value || isShow.value || !props.unmountOnHide;
+});
+
+const isShow = ref(props.modelValue);
+watch(
+  () => props.modelValue,
+  (v: boolean) => {
+    if (isShow.value !== v) {
+      isShow.value = v;
+      emits('change', v);
+    }
+  }
+);
+
+const onCloseClick = (e: MouseEvent) => {
+  isShow.value = false;
+  emits('change', false);
+  emits('update:modelValue', false, e);
+};
+
+const onMaskClick = (e: MouseEvent) => {
+  isShow.value = false;
+  emits('change', false);
+  emits('update:modelValue', false, e);
+};
+</script>
+<template>
+  <teleport :to="props.wrapper">
+    <div
+      class="o-dialog"
+      :class="{
+        'is-show': isShow,
+      }"
+    >
+      <transition name="o-fade-up-enter">
+        <div v-if="isMounted" class="o-dlg-mask" @click="onMaskClick"></div>
+      </transition>
+      <transition :name="props.transition">
+        <div v-if="isMounted" class="o-dlg-main" :class="props.wrapClass">
+          <div class="o-dlg-btn-close" @click="onCloseClick"><IconClose /></div>
+          <div class="o-dlg-head">
+            <slot name="header"></slot>
+          </div>
+          <div class="o-dlg-body">
+            <slot></slot>
+          </div>
+          <div class="o-dlg-foot">
+            <slot name="footer"></slot>
+          </div>
+        </div>
+      </transition>
+    </div>
+  </teleport>
+</template>
diff --git a/packages/opendesign/src/components/dialog/__demo__/DialogBasic.vue b/packages/opendesign/src/components/dialog/__demo__/DialogBasic.vue
new file mode 100644
index 000000000..d7c175e93
--- /dev/null
+++ b/packages/opendesign/src/components/dialog/__demo__/DialogBasic.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+import { OButton } from '../../button';
+import '../../button/style';
+import { ODialog } from '../index';
+
+const showDlg = ref(true);
+
+const toggle = (show?: boolean) => {
+  if (show === undefined) {
+    showDlg.value = !showDlg.value;
+  } else {
+    showDlg.value = show;
+  }
+};
+const onChane = (v: boolean) => {
+  console.log('dialog change', v);
+};
+</script>
+<template>
+  <h4>基本</h4>
+  <section>
+    <OButton @click="toggle(true)">Open</OButton>
+    <ODialog v-model="showDlg" :unmount-on-hide="true" @change="onChane">
+      <template #header>Dialog Title</template>
+      This is Dialog
+      <template #footer>
+        <div class="dlg-action">
+          <OButton color="primary" variant="solid" @click="toggle(false)">确定</OButton>
+          <OButton @click="toggle(false)">取消</OButton>
+        </div>
+      </template>
+    </ODialog>
+  </section>
+</template>
+<style lang="scss">
+.dlg-action {
+  display: flex;
+  gap: 16px;
+  justify-content: flex-end;
+}
+</style>
diff --git a/packages/opendesign/src/components/dialog/__demo__/IndexDialog.vue b/packages/opendesign/src/components/dialog/__demo__/IndexDialog.vue
new file mode 100644
index 000000000..d90af5c2b
--- /dev/null
+++ b/packages/opendesign/src/components/dialog/__demo__/IndexDialog.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import '../style';
+import DialogBasic from './DialogBasic.vue';
+</script>
+<template>
+  <div class="page-demo">
+    <DialogBasic />
+  </div>
+</template>
+<style lang="scss"></style>
diff --git a/packages/opendesign/src/components/dialog/index.ts b/packages/opendesign/src/components/dialog/index.ts
new file mode 100644
index 000000000..4050065fb
--- /dev/null
+++ b/packages/opendesign/src/components/dialog/index.ts
@@ -0,0 +1,12 @@
+import _ODialog from './ODialog.vue';
+import type { App } from 'vue';
+
+const ODialog = Object.assign(_ODialog, {
+  install(app: App) {
+    app.component(_ODialog.name, _ODialog);
+  },
+});
+
+export {
+  ODialog,
+};
diff --git a/packages/opendesign/src/components/dialog/style/index.scss b/packages/opendesign/src/components/dialog/style/index.scss
new file mode 100644
index 000000000..2dd431028
--- /dev/null
+++ b/packages/opendesign/src/components/dialog/style/index.scss
@@ -0,0 +1,59 @@
+@use './var.scss';
+
+.o-dialog {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  align-items: center;
+  justify-content: center;
+  z-index: var(--dlg-z-index);
+  display: none;
+  &.is-show {
+    display: flex;
+  }
+}
+.o-dlg-mask {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background-color: var(--o-color-mask1);
+}
+.o-dlg-main {
+  position: relative;
+  background-color: var(--o-color-control-light);
+  min-width: 200px;
+  box-shadow: var(--o-shadow-1);
+}
+
+.o-dlg-btn-close {
+  position: absolute;
+  right: var(--o-gap-3);
+  top: var(--o-gap-3);
+  font-size: var(--o-icon_size-s);
+  color: var(--dlg-close-color);
+  border-radius: var(--dlg-close-radius);
+  display: flex;
+  &:hover {
+    text-decoration: none;
+    color: var(--dlg-close-color-hover);
+    background-color: var(--dlg-close-bg-color-hover);
+  }
+  &:active {
+    color: var(--dlg-close-color-active);
+    background-color: var(--dlg-close-bg-color-active);
+  }
+}
+
+.o-dlg-head {
+  padding: 8px 16px;
+}
+.o-dlg-body {
+  padding: 8px 16px;
+}
+.o-dlg-foot {
+  padding: 8px 16px;
+}
diff --git a/packages/opendesign/src/components/dialog/style/index.ts b/packages/opendesign/src/components/dialog/style/index.ts
new file mode 100644
index 000000000..591b2fbd7
--- /dev/null
+++ b/packages/opendesign/src/components/dialog/style/index.ts
@@ -0,0 +1,2 @@
+import '../../style';
+import './index.scss';
diff --git a/packages/opendesign/src/components/dialog/style/var.scss b/packages/opendesign/src/components/dialog/style/var.scss
new file mode 100644
index 000000000..664c3d71e
--- /dev/null
+++ b/packages/opendesign/src/components/dialog/style/var.scss
@@ -0,0 +1,9 @@
+.o-dialog {
+  --dlg-close-color: var(--o-color-info2);
+  --dlg-close-color-hover: var(--o-color-primary2);
+  --dlg-close-color-active: var(--o-color-primary3);
+  --dlg-close-bg-color-hover: var(--o-color-control1-light);
+  --dlg-close-bg-color-active: var(--o-color-control2-light);
+  --dlg-close-radius: 50%;
+  --dlg-z-index: calc(var(--o-z-index-base) + 10);
+}
diff --git a/packages/opendesign/src/components/dialog/types.ts b/packages/opendesign/src/components/dialog/types.ts
new file mode 100644
index 000000000..487360b54
--- /dev/null
+++ b/packages/opendesign/src/components/dialog/types.ts
@@ -0,0 +1,46 @@
+import { ExtractPropTypes, PropType } from 'vue';
+
+export const dialogProps = {
+  /**
+   * 控制对话框是否显示
+   */
+  modelValue: {
+    type: Boolean,
+  },
+  /**
+   * 挂载容器，默认为body
+   */
+  wrapper: {
+    type: [String, Object] as PropType<string | HTMLElement>,
+    default: 'body',
+  },
+  /**
+   * 是否隐藏可以关闭
+   */
+  hideClose: {
+    type: Boolean,
+  },
+  /**
+   * 是否在popup隐藏时unmout
+   */
+  unmountOnHide: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * 挂载容器，默认为body
+   */
+  wrapClass: {
+    type: String,
+  },
+  /**
+   * 过渡名称
+   */
+  transition: {
+    type: String,
+    default: 'o-zoom-fade',
+  },
+
+};
+
+export type DialogPropsT = ExtractPropTypes<typeof dialogProps>;
diff --git a/packages/opendesign/src/components/index.scss b/packages/opendesign/src/components/index.scss
index c7ffbf783..98be40f87 100644
--- a/packages/opendesign/src/components/index.scss
+++ b/packages/opendesign/src/components/index.scss
@@ -24,3 +24,4 @@
 @use './form/style//index.scss' as *;
 @use './menu/style//index.scss' as *;
 @use './breadcrumb/style//index.scss' as *;
+@use './dialog/style//index.scss' as *;
diff --git a/packages/opendesign/src/components/index.ts b/packages/opendesign/src/components/index.ts
index c3df0fb14..d5aeec58b 100644
--- a/packages/opendesign/src/components/index.ts
+++ b/packages/opendesign/src/components/index.ts
@@ -28,6 +28,7 @@ export * from './menu';
 export * from './breadcrumb';
 // export * from './dropdown';
 // export * from './scrollbar';
+export * from './dialog';
 
 export * from './intersection-observer';
 export * from './resize-observer';
diff --git a/packages/opendesign/src/components/popup/style/index.scss b/packages/opendesign/src/components/popup/style/index.scss
index dcb74c0fe..6d58d2919 100644
--- a/packages/opendesign/src/components/popup/style/index.scss
+++ b/packages/opendesign/src/components/popup/style/index.scss
@@ -2,7 +2,7 @@
 
 .o-popup {
   position: absolute;
-  z-index: 100;
+  z-index: var(--popup-z-index);
   opacity: 1;
   transition: opacity var(--o-duration-m1) var(--o-easing-standard);
   &.out-view {
diff --git a/packages/opendesign/src/components/popup/style/var.scss b/packages/opendesign/src/components/popup/style/var.scss
index e69de29bb..dc25e3cc3 100644
--- a/packages/opendesign/src/components/popup/style/var.scss
+++ b/packages/opendesign/src/components/popup/style/var.scss
@@ -0,0 +1,3 @@
+.o-popup {
+  --popup-z-index: var(--o-z-index-base);
+}
diff --git a/packages/opendesign/src/components/style/index.scss b/packages/opendesign/src/components/style/index.scss
index 910d07e82..8fa3561de 100644
--- a/packages/opendesign/src/components/style/index.scss
+++ b/packages/opendesign/src/components/style/index.scss
@@ -5,6 +5,10 @@
   box-sizing: border-box;
 }
 
+:root {
+  --o-z-index-base: 100;
+}
+
 // icons
 .o-icon {
   --icon-g1: var(--o-color-text1);
diff --git a/packages/portal/src/router.ts b/packages/portal/src/router.ts
index af82290c4..946fe5815 100644
--- a/packages/portal/src/router.ts
+++ b/packages/portal/src/router.ts
@@ -146,6 +146,12 @@ export const routes = [
     label: '进度条',
     component: () => import('@components/progress/__demo__/IndexProgress.vue'),
   },
+  {
+    path: '/dialog',
+    name: 'Dialog',
+    label: '对话框',
+    component: () => import('@components/dialog/__demo__/IndexDialog.vue'),
+  },
   {
     path: '/resize-observer',
     name: 'ResizeObserver',
-- 
Gitee


From b071c2f8569c23c0396f832441ffe09a9d04e1ce Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Tue, 14 Mar 2023 18:56:44 +0800
Subject: [PATCH 3/6] =?UTF-8?q?=E6=B7=BB=E5=8A=A0figure?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/_shared/utils.ts           |  35 ++++++
 .../src/components/dialog/ODialog.vue         |   4 +-
 .../src/components/figure/OFigure.vue         | 119 ++++++++++++++++++
 .../figure/__demo__/FigureBasic.vue           |  28 +++++
 .../figure/__demo__/IndexFigure.vue           |  10 ++
 .../opendesign/src/components/figure/index.ts |  12 ++
 .../src/components/figure/style/index.scss    |  59 +++++++++
 .../src/components/figure/style/index.ts      |   2 +
 .../src/components/figure/style/var.scss      |   9 ++
 .../opendesign/src/components/figure/types.ts |  44 +++++++
 packages/portal/src/router.ts                 |   6 +
 11 files changed, 326 insertions(+), 2 deletions(-)
 create mode 100644 packages/opendesign/src/components/figure/OFigure.vue
 create mode 100644 packages/opendesign/src/components/figure/__demo__/FigureBasic.vue
 create mode 100644 packages/opendesign/src/components/figure/__demo__/IndexFigure.vue
 create mode 100644 packages/opendesign/src/components/figure/index.ts
 create mode 100644 packages/opendesign/src/components/figure/style/index.scss
 create mode 100644 packages/opendesign/src/components/figure/style/index.ts
 create mode 100644 packages/opendesign/src/components/figure/style/var.scss
 create mode 100644 packages/opendesign/src/components/figure/types.ts

diff --git a/packages/opendesign/src/components/_shared/utils.ts b/packages/opendesign/src/components/_shared/utils.ts
index c600242b4..aacccf1fe 100644
--- a/packages/opendesign/src/components/_shared/utils.ts
+++ b/packages/opendesign/src/components/_shared/utils.ts
@@ -45,3 +45,38 @@ export function throttleRAF<T extends (...args: Array<unknown>) => unknown>(fn:
   };
   return rlt;
 }
+
+/**
+ * 颜色池
+ */
+class ColorPool {
+  pool: Array<string>;
+  tmpPool: Array<string>;
+
+  constructor(pool: Array<string>) {
+    this.pool = pool;
+    this.tmpPool = [...pool];
+  }
+  /**
+   * 返回指定位置颜色，或者从颜色池随机返回一个颜色
+   * @param index
+   * @returns
+   */
+  pick(index?: number): string {
+    if (index !== undefined) {
+      return this.pool[index % this.pool.length];
+    }
+    const { length } = this.tmpPool;
+    if (length === 0) {
+      this.tmpPool = [...this.pool];
+    }
+    const idx = Math.floor(Math.random() * length);
+    const color = this.tmpPool[idx];
+    this.tmpPool.splice(idx, 1);
+
+    return color;
+  }
+}
+
+const PrestColor = ['#d9e6c3', '#ebd5be', '#d1e6de', '#e0ceeb', '#ebd3c7', '#e6dada', '#e3deeb', '#dedae6', '#cad0e8', '#cedeeb'];
+export const PrestColorPool = new ColorPool(PrestColor);
\ No newline at end of file
diff --git a/packages/opendesign/src/components/dialog/ODialog.vue b/packages/opendesign/src/components/dialog/ODialog.vue
index 4a59cdb82..8f0bd25ef 100644
--- a/packages/opendesign/src/components/dialog/ODialog.vue
+++ b/packages/opendesign/src/components/dialog/ODialog.vue
@@ -53,13 +53,13 @@ const onMaskClick = (e: MouseEvent) => {
       <transition :name="props.transition">
         <div v-if="isMounted" class="o-dlg-main" :class="props.wrapClass">
           <div class="o-dlg-btn-close" @click="onCloseClick"><IconClose /></div>
-          <div class="o-dlg-head">
+          <div v-if="$slots.header" class="o-dlg-head">
             <slot name="header"></slot>
           </div>
           <div class="o-dlg-body">
             <slot></slot>
           </div>
-          <div class="o-dlg-foot">
+          <div v-if="$slots.footer" class="o-dlg-foot">
             <slot name="footer"></slot>
           </div>
         </div>
diff --git a/packages/opendesign/src/components/figure/OFigure.vue b/packages/opendesign/src/components/figure/OFigure.vue
new file mode 100644
index 000000000..08efb04b5
--- /dev/null
+++ b/packages/opendesign/src/components/figure/OFigure.vue
@@ -0,0 +1,119 @@
+<script setup lang="ts">
+import { ref, watch, computed } from 'vue';
+import { PrestColorPool } from '../_shared/utils';
+
+import { figureProps } from './types';
+
+const props = defineProps(figureProps);
+
+const emits = defineEmits<{ (e: 'error'): void }>();
+
+const isLoading = ref(true);
+const isError = ref(false);
+const prestColor = PrestColorPool.pick();
+
+const bgSrc = computed(() => {
+  if (props.background && props.ratio) {
+    return `url(${props.src})`;
+  }
+  return '';
+});
+
+const paddingTop = computed(() => {
+  if (props.ratio) {
+    return `${((1 / props.ratio) * 100).toFixed(2)}%`;
+  }
+  return '';
+});
+
+const fit = computed(() => props.fit);
+const position = computed(() => props.position);
+
+const onImgLoaded = () => {
+  isLoading.value = false;
+  isError.value = false;
+};
+const onImgError = () => {
+  isLoading.value = false;
+  isError.value = true;
+  emits('error');
+};
+
+watch(
+  () => props.src,
+  (src?: string) => {
+    if (src && props.background) {
+      const img = document.createElement('img');
+      img.onload = onImgLoaded;
+      img.onerror = onImgError;
+      img.src = src;
+    }
+  },
+  { immediate: true }
+);
+</script>
+<template>
+  <div
+    class="o-figure"
+    :class="{
+      'is-loading': isLoading,
+      'is-error': isError,
+    }"
+  >
+    <template v-if="props.src">
+      <div
+        v-if="paddingTop"
+        class="o-figure-wrapper"
+        :class="{
+          'o-figure-bg': props.background,
+        }"
+        :style="{
+          backgroundImage: bgSrc,
+        }"
+      >
+        <img v-if="!props.background && !isError" :src="props.src" :alt="props.alt" class="o-figure-img-ratio" @load="onImgLoaded" @error="onImgError" />
+      </div>
+      <img v-else-if="!isError" :src="props.src" :alt="props.alt" class="o-figure-img" @load="onImgLoaded" @error="onImgError" />
+    </template>
+    <slot></slot>
+  </div>
+</template>
+<style lang="scss">
+.o-figure {
+  display: inline-flex;
+  overflow: hidden;
+  transition: background-color var(--o-duration-m2);
+  &.is-loading {
+    background-color: v-bind(prestColor);
+    img {
+      opacity: 0;
+    }
+  }
+  img {
+    opacity: 1;
+    transition: opacity var(--o-duration-m2);
+  }
+  &.is-error {
+    background-color: var(--o-color-control4);
+  }
+}
+.o-figure-wrapper {
+  position: relative;
+  width: 100%;
+  padding-top: v-bind(paddingTop);
+}
+.o-figure-bg {
+  background-size: v-bind(fit);
+  background-position: v-bind(position);
+  background-repeat: no-repeat;
+}
+.o-figure-img-ratio {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: v-bind(fit);
+  object-position: v-bind(position);
+}
+</style>
diff --git a/packages/opendesign/src/components/figure/__demo__/FigureBasic.vue b/packages/opendesign/src/components/figure/__demo__/FigureBasic.vue
new file mode 100644
index 000000000..6bbc4724c
--- /dev/null
+++ b/packages/opendesign/src/components/figure/__demo__/FigureBasic.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { OFigure } from '../index';
+</script>
+<template>
+  <h4>基本</h4>
+  <section>
+    <OFigure class="img" src="https://foruda.gitee.com/avatar/1677182905922288888/9670565_devin-cwd_1644483194.png!avatar60" />
+    <OFigure class="img" src="https://foruda.gitee.com/avatar/1677182905922288888/9670565_devin-cwd_1644483194.png!avatar60" :ratio="16 / 9" fit="contain" />
+    <OFigure class="img" src="https://foruda.gitee.com/avatar/1677182905922288888/9670565_devin-cwd_16444831941.png!avatar601" :ratio="16 / 9" fit="cover" />
+    <OFigure
+      class="img"
+      src="https://foruda.gitee.com/avatar/1677182905922288888/9670565_devin-cwd_1644483194.png!avatar60"
+      :ratio="16 / 9"
+      fit="cover"
+      background
+    />
+  </section>
+</template>
+<style lang="scss">
+.dlg-action {
+  display: flex;
+  gap: 16px;
+  justify-content: flex-end;
+}
+.img {
+  width: 100px;
+}
+</style>
diff --git a/packages/opendesign/src/components/figure/__demo__/IndexFigure.vue b/packages/opendesign/src/components/figure/__demo__/IndexFigure.vue
new file mode 100644
index 000000000..0e8aec369
--- /dev/null
+++ b/packages/opendesign/src/components/figure/__demo__/IndexFigure.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import '../style';
+import FigureBasic from './FigureBasic.vue';
+</script>
+<template>
+  <div class="page-demo">
+    <FigureBasic />
+  </div>
+</template>
+<style lang="scss"></style>
diff --git a/packages/opendesign/src/components/figure/index.ts b/packages/opendesign/src/components/figure/index.ts
new file mode 100644
index 000000000..f94942b8c
--- /dev/null
+++ b/packages/opendesign/src/components/figure/index.ts
@@ -0,0 +1,12 @@
+import _OFigure from './OFigure.vue';
+import type { App } from 'vue';
+
+const OFigure = Object.assign(_OFigure, {
+  install(app: App) {
+    app.component(_OFigure.name, _OFigure);
+  },
+});
+
+export {
+  OFigure,
+};
diff --git a/packages/opendesign/src/components/figure/style/index.scss b/packages/opendesign/src/components/figure/style/index.scss
new file mode 100644
index 000000000..2dd431028
--- /dev/null
+++ b/packages/opendesign/src/components/figure/style/index.scss
@@ -0,0 +1,59 @@
+@use './var.scss';
+
+.o-dialog {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  align-items: center;
+  justify-content: center;
+  z-index: var(--dlg-z-index);
+  display: none;
+  &.is-show {
+    display: flex;
+  }
+}
+.o-dlg-mask {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background-color: var(--o-color-mask1);
+}
+.o-dlg-main {
+  position: relative;
+  background-color: var(--o-color-control-light);
+  min-width: 200px;
+  box-shadow: var(--o-shadow-1);
+}
+
+.o-dlg-btn-close {
+  position: absolute;
+  right: var(--o-gap-3);
+  top: var(--o-gap-3);
+  font-size: var(--o-icon_size-s);
+  color: var(--dlg-close-color);
+  border-radius: var(--dlg-close-radius);
+  display: flex;
+  &:hover {
+    text-decoration: none;
+    color: var(--dlg-close-color-hover);
+    background-color: var(--dlg-close-bg-color-hover);
+  }
+  &:active {
+    color: var(--dlg-close-color-active);
+    background-color: var(--dlg-close-bg-color-active);
+  }
+}
+
+.o-dlg-head {
+  padding: 8px 16px;
+}
+.o-dlg-body {
+  padding: 8px 16px;
+}
+.o-dlg-foot {
+  padding: 8px 16px;
+}
diff --git a/packages/opendesign/src/components/figure/style/index.ts b/packages/opendesign/src/components/figure/style/index.ts
new file mode 100644
index 000000000..591b2fbd7
--- /dev/null
+++ b/packages/opendesign/src/components/figure/style/index.ts
@@ -0,0 +1,2 @@
+import '../../style';
+import './index.scss';
diff --git a/packages/opendesign/src/components/figure/style/var.scss b/packages/opendesign/src/components/figure/style/var.scss
new file mode 100644
index 000000000..664c3d71e
--- /dev/null
+++ b/packages/opendesign/src/components/figure/style/var.scss
@@ -0,0 +1,9 @@
+.o-dialog {
+  --dlg-close-color: var(--o-color-info2);
+  --dlg-close-color-hover: var(--o-color-primary2);
+  --dlg-close-color-active: var(--o-color-primary3);
+  --dlg-close-bg-color-hover: var(--o-color-control1-light);
+  --dlg-close-bg-color-active: var(--o-color-control2-light);
+  --dlg-close-radius: 50%;
+  --dlg-z-index: calc(var(--o-z-index-base) + 10);
+}
diff --git a/packages/opendesign/src/components/figure/types.ts b/packages/opendesign/src/components/figure/types.ts
new file mode 100644
index 000000000..2f9a51701
--- /dev/null
+++ b/packages/opendesign/src/components/figure/types.ts
@@ -0,0 +1,44 @@
+import { ExtractPropTypes } from 'vue';
+
+export const figureProps = {
+  /**
+   * 地址
+   */
+  src: {
+    type: String,
+  },
+  /**
+   * 长宽比
+   */
+  ratio: {
+    type: Number,
+  },
+  /**
+   * 适配方式
+   */
+  position: {
+    type: String,
+    default: 'center'
+  },
+  /**
+   * 适配方式
+   */
+  fit: {
+    type: String,
+    default: 'cover'
+  },
+  /**
+   * img alt
+   */
+  alt: {
+    type: String,
+  },
+  /**
+   * 使用背景
+   */
+  background: {
+    type: Boolean,
+  },
+};
+
+export type FigurePropsT = ExtractPropTypes<typeof figureProps>;
diff --git a/packages/portal/src/router.ts b/packages/portal/src/router.ts
index 946fe5815..3dac78d2d 100644
--- a/packages/portal/src/router.ts
+++ b/packages/portal/src/router.ts
@@ -152,6 +152,12 @@ export const routes = [
     label: '对话框',
     component: () => import('@components/dialog/__demo__/IndexDialog.vue'),
   },
+  {
+    path: '/figure',
+    name: 'Figure',
+    label: '图片',
+    component: () => import('@components/figure/__demo__/IndexFigure.vue'),
+  },
   {
     path: '/resize-observer',
     name: 'ResizeObserver',
-- 
Gitee


From 3adbc39d2e375215ca066d108bcfd8f7016ece65 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Wed, 15 Mar 2023 14:31:50 +0800
Subject: [PATCH 4/6] =?UTF-8?q?=E5=9B=BE=E7=89=87=E6=94=AF=E6=8C=81hover?=
 =?UTF-8?q?=20=E6=88=96=E9=93=BE=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/_shared/DivOrA.vue         | 15 +++
 .../src/components/figure/OFigure.vue         | 53 +++-------
 .../figure/__demo__/FigureBasic.vue           | 19 ++--
 .../src/components/figure/style/index.scss    | 96 ++++++++++---------
 .../src/components/figure/style/var.scss      | 12 +--
 .../opendesign/src/components/figure/types.ts | 12 +++
 6 files changed, 101 insertions(+), 106 deletions(-)
 create mode 100644 packages/opendesign/src/components/_shared/DivOrA.vue

diff --git a/packages/opendesign/src/components/_shared/DivOrA.vue b/packages/opendesign/src/components/_shared/DivOrA.vue
new file mode 100644
index 000000000..4d60cdb32
--- /dev/null
+++ b/packages/opendesign/src/components/_shared/DivOrA.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+const props = defineProps({
+  isA: {
+    type: Boolean,
+  },
+});
+</script>
+<template>
+  <a v-if="props.isA">
+    <slot></slot>
+  </a>
+  <div v-else>
+    <slot></slot>
+  </div>
+</template>
diff --git a/packages/opendesign/src/components/figure/OFigure.vue b/packages/opendesign/src/components/figure/OFigure.vue
index 08efb04b5..c43425745 100644
--- a/packages/opendesign/src/components/figure/OFigure.vue
+++ b/packages/opendesign/src/components/figure/OFigure.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, watch, computed } from 'vue';
 import { PrestColorPool } from '../_shared/utils';
+import DivOrA from '../_shared/DivOrA.vue';
 
 import { figureProps } from './types';
 
@@ -53,11 +54,20 @@ watch(
 );
 </script>
 <template>
-  <div
+  <DivOrA
+    :is-a="!!props.href"
     class="o-figure"
+    :href="props.href"
     :class="{
       'is-loading': isLoading,
       'is-error': isError,
+      'o-figure-hoverable': props.hoverable || !!props.href,
+    }"
+    :style="{
+      '--figure-prest-color': prestColor,
+      '--figure-padding-top': paddingTop,
+      '--figure-fit': fit,
+      '--figure-position': position,
     }"
   >
     <template v-if="props.src">
@@ -76,44 +86,5 @@ watch(
       <img v-else-if="!isError" :src="props.src" :alt="props.alt" class="o-figure-img" @load="onImgLoaded" @error="onImgError" />
     </template>
     <slot></slot>
-  </div>
+  </DivOrA>
 </template>
-<style lang="scss">
-.o-figure {
-  display: inline-flex;
-  overflow: hidden;
-  transition: background-color var(--o-duration-m2);
-  &.is-loading {
-    background-color: v-bind(prestColor);
-    img {
-      opacity: 0;
-    }
-  }
-  img {
-    opacity: 1;
-    transition: opacity var(--o-duration-m2);
-  }
-  &.is-error {
-    background-color: var(--o-color-control4);
-  }
-}
-.o-figure-wrapper {
-  position: relative;
-  width: 100%;
-  padding-top: v-bind(paddingTop);
-}
-.o-figure-bg {
-  background-size: v-bind(fit);
-  background-position: v-bind(position);
-  background-repeat: no-repeat;
-}
-.o-figure-img-ratio {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  object-fit: v-bind(fit);
-  object-position: v-bind(position);
-}
-</style>
diff --git a/packages/opendesign/src/components/figure/__demo__/FigureBasic.vue b/packages/opendesign/src/components/figure/__demo__/FigureBasic.vue
index 6bbc4724c..3a127b6a8 100644
--- a/packages/opendesign/src/components/figure/__demo__/FigureBasic.vue
+++ b/packages/opendesign/src/components/figure/__demo__/FigureBasic.vue
@@ -1,19 +1,16 @@
 <script setup lang="ts">
 import { OFigure } from '../index';
+const img = 'https://www.hiascend.com/p/resource/202303/0a66367d573f4369a6d160909c33fa6e.png';
 </script>
 <template>
   <h4>基本</h4>
   <section>
-    <OFigure class="img" src="https://foruda.gitee.com/avatar/1677182905922288888/9670565_devin-cwd_1644483194.png!avatar60" />
-    <OFigure class="img" src="https://foruda.gitee.com/avatar/1677182905922288888/9670565_devin-cwd_1644483194.png!avatar60" :ratio="16 / 9" fit="contain" />
-    <OFigure class="img" src="https://foruda.gitee.com/avatar/1677182905922288888/9670565_devin-cwd_16444831941.png!avatar601" :ratio="16 / 9" fit="cover" />
-    <OFigure
-      class="img"
-      src="https://foruda.gitee.com/avatar/1677182905922288888/9670565_devin-cwd_1644483194.png!avatar60"
-      :ratio="16 / 9"
-      fit="cover"
-      background
-    />
+    <OFigure class="img" :src="img" />
+    <OFigure class="img" :src="img" :ratio="16 / 9" fit="contain" />
+    <OFigure class="img" src="123" :ratio="16 / 9" fit="cover" />
+    <OFigure class="img" :src="img" :ratio="16 / 9" fit="cover" background />
+    <OFigure class="img" hoverable :src="img" />
+    <OFigure class="img" href="https://hiascend.com" target="__blank" :src="img" />
   </section>
 </template>
 <style lang="scss">
@@ -23,6 +20,6 @@ import { OFigure } from '../index';
   justify-content: flex-end;
 }
 .img {
-  width: 100px;
+  width: 25%;
 }
 </style>
diff --git a/packages/opendesign/src/components/figure/style/index.scss b/packages/opendesign/src/components/figure/style/index.scss
index 2dd431028..8a220011d 100644
--- a/packages/opendesign/src/components/figure/style/index.scss
+++ b/packages/opendesign/src/components/figure/style/index.scss
@@ -1,59 +1,63 @@
 @use './var.scss';
 
-.o-dialog {
-  position: fixed;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  align-items: center;
-  justify-content: center;
-  z-index: var(--dlg-z-index);
-  display: none;
-  &.is-show {
-    display: flex;
+.o-figure {
+  display: inline-block;
+  vertical-align: top;
+  overflow: hidden;
+  transition: background-color var(--o-duration-m2);
+  &.is-loading {
+    background-color: var(--figure-prest-color);
+    img {
+      opacity: 0;
+    }
+  }
+  img {
+    vertical-align: top;
+    opacity: 1;
+    transition: opacity var(--o-duration-m2), transform var(--o-duration-m2);
+  }
+  &.is-error {
+    background-color: var(--o-color-control4);
   }
 }
-.o-dlg-mask {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  background-color: var(--o-color-mask1);
-}
-.o-dlg-main {
-  position: relative;
-  background-color: var(--o-color-control-light);
-  min-width: 200px;
-  box-shadow: var(--o-shadow-1);
-}
+.o-figure-hoverable {
+  cursor: pointer;
 
-.o-dlg-btn-close {
-  position: absolute;
-  right: var(--o-gap-3);
-  top: var(--o-gap-3);
-  font-size: var(--o-icon_size-s);
-  color: var(--dlg-close-color);
-  border-radius: var(--dlg-close-radius);
-  display: flex;
   &:hover {
-    text-decoration: none;
-    color: var(--dlg-close-color-hover);
-    background-color: var(--dlg-close-bg-color-hover);
+    img {
+      transform: scale(1.05);
+    }
   }
   &:active {
-    color: var(--dlg-close-color-active);
-    background-color: var(--dlg-close-bg-color-active);
+    img {
+      transform: scale(1.02);
+    }
   }
 }
-
-.o-dlg-head {
-  padding: 8px 16px;
+.o-figure-wrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  padding-top: var(--figure-padding-top);
 }
-.o-dlg-body {
-  padding: 8px 16px;
+.o-figure-bg {
+  background-size: var(--figure-fit);
+  background-position: var(--figure-position);
+  background-repeat: no-repeat;
 }
-.o-dlg-foot {
-  padding: 8px 16px;
+.o-figure-img-ratio {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: var(--figure-fit);
+  object-position: var(--figure-position);
+}
+
+.o-figure-img {
+  width: 100%;
+  height: 100%;
+  object-fit: var(--figure-fit);
+  object-position: var(--figure-position);
 }
diff --git a/packages/opendesign/src/components/figure/style/var.scss b/packages/opendesign/src/components/figure/style/var.scss
index 664c3d71e..1f49819f9 100644
--- a/packages/opendesign/src/components/figure/style/var.scss
+++ b/packages/opendesign/src/components/figure/style/var.scss
@@ -1,9 +1,5 @@
-.o-dialog {
-  --dlg-close-color: var(--o-color-info2);
-  --dlg-close-color-hover: var(--o-color-primary2);
-  --dlg-close-color-active: var(--o-color-primary3);
-  --dlg-close-bg-color-hover: var(--o-color-control1-light);
-  --dlg-close-bg-color-active: var(--o-color-control2-light);
-  --dlg-close-radius: 50%;
-  --dlg-z-index: calc(var(--o-z-index-base) + 10);
+.o-figure {
+  --figure-padding-top: 50%;
+  --figure-fit: 'cover';
+  --figure-position: 'center';
 }
diff --git a/packages/opendesign/src/components/figure/types.ts b/packages/opendesign/src/components/figure/types.ts
index 2f9a51701..9a5642446 100644
--- a/packages/opendesign/src/components/figure/types.ts
+++ b/packages/opendesign/src/components/figure/types.ts
@@ -39,6 +39,18 @@ export const figureProps = {
   background: {
     type: Boolean,
   },
+  /**
+   * 可hover
+   */
+  hoverable: {
+    type: Boolean,
+  },
+  /**
+   * 链接跳转
+   */
+  href: {
+    type: String,
+  }
 };
 
 export type FigurePropsT = ExtractPropTypes<typeof figureProps>;
-- 
Gitee


From 262c3ce4021cf2668257c1a0e2b5ae68228726e3 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Wed, 15 Mar 2023 15:18:37 +0800
Subject: [PATCH 5/6] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=8D=A1=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../opendesign/src/components/card/OCard.vue  |  61 ++++++++++
 .../components/card/__demo__/CardBasic.vue    | 104 +++++++++++++++++
 .../components/card/__demo__/IndexCard.vue    |  10 ++
 .../opendesign/src/components/card/index.ts   |  12 ++
 .../src/components/card/style/index.scss      | 108 ++++++++++++++++++
 .../src/components/card/style/index.ts        |   3 +
 .../src/components/card/style/var.scss        |  12 ++
 .../opendesign/src/components/card/types.ts   |  75 ++++++++++++
 packages/portal/src/router.ts                 |   6 +
 9 files changed, 391 insertions(+)
 create mode 100644 packages/opendesign/src/components/card/OCard.vue
 create mode 100644 packages/opendesign/src/components/card/__demo__/CardBasic.vue
 create mode 100644 packages/opendesign/src/components/card/__demo__/IndexCard.vue
 create mode 100644 packages/opendesign/src/components/card/index.ts
 create mode 100644 packages/opendesign/src/components/card/style/index.scss
 create mode 100644 packages/opendesign/src/components/card/style/index.ts
 create mode 100644 packages/opendesign/src/components/card/style/var.scss
 create mode 100644 packages/opendesign/src/components/card/types.ts

diff --git a/packages/opendesign/src/components/card/OCard.vue b/packages/opendesign/src/components/card/OCard.vue
new file mode 100644
index 000000000..432a2ab36
--- /dev/null
+++ b/packages/opendesign/src/components/card/OCard.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { ref, watch, computed } from 'vue';
+import { dialogProps } from './types';
+import { OFigure } from '../figure';
+import HtmlTag from '../_shared/components/tag';
+
+const props = defineProps(dialogProps);
+
+const hasContent = computed(() => {
+  return props.title || props.content;
+});
+</script>
+<template>
+  <HtmlTag
+    :tag="!!props.href ? 'a' : 'div'"
+    :href="props.href"
+    class="o-card"
+    tabindex="-1"
+    :class="[
+      `o-card-${props.size}`,
+      `o-card-layout-${props.layout}`,
+      {
+        'o-card-hoverable': props.hoverable || !!props.href,
+      },
+    ]"
+    :style="{
+      '--card-title-max-row': props.titleMaxRow,
+      '--card-detail-max-row': props.detailMaxRow,
+    }"
+  >
+    <div
+      v-if="$slots.cover || props.cover"
+      class="o-card-cover"
+      :class="[
+        props.coverClass,
+        `o-card-cover-${props.layout}`,
+        {
+          'o-card-only-cover': !hasContent && !$slots.title && !$slots.default,
+        },
+      ]"
+    >
+      <slot name="cover">
+        <OFigure :ratio="props.coverRatio" class="o-card-cover-img" :src="props.cover" :class="{ 'is-full': !props.coverRatio }" />
+      </slot>
+    </div>
+    <div v-if="hasContent || $slots.title || $slots.default" class="o-card-main">
+      <div>
+        <div class="o-card-title">
+          <slot name="title">{{ props.title }}</slot>
+        </div>
+        <div class="o-card-content">
+          <div class="o-card-detail">{{ props.content }}</div>
+          <slot></slot>
+        </div>
+      </div>
+      <div v-if="$slots.actions" class="o-card-actions">
+        <slot name="actions"></slot>
+      </div>
+    </div>
+  </HtmlTag>
+</template>
diff --git a/packages/opendesign/src/components/card/__demo__/CardBasic.vue b/packages/opendesign/src/components/card/__demo__/CardBasic.vue
new file mode 100644
index 000000000..835fbac39
--- /dev/null
+++ b/packages/opendesign/src/components/card/__demo__/CardBasic.vue
@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { OCard } from '../index';
+import { IconStar } from '../../icons';
+
+const card = {
+  cover: 'https://www.hiascend.com/p/resource/202303/0a66367d573f4369a6d160909c33fa6e.png',
+  title: '荆棘鸟携手昇腾AI，打造总控室“大屏”变“小屏”的秘密武器',
+  content:
+    '传统的工厂安全总控室里，都是一整面墙花花绿绿的屏幕，安全员要在屏幕前目不转睛的24小时监督，不但费神费力，还难免疏漏。但现在，这一方小屏就能实现整个工厂的安全监察。',
+};
+</script>
+<template>
+  <h4>基本</h4>
+  <section>
+    <div class="row">
+      <OCard class="card col3" asdf :cover="card.cover" :cover-ratio="16 / 9" :title="card.title" :content="card.content" />
+      <OCard class="card col3" :cover="card.cover" :cover-ratio="16 / 9" :title="card.title" :content="card.content" hoverable />
+    </div>
+
+    <div class="flex">
+      <OCard
+        class="card col2 card2"
+        :cover="card.cover"
+        :cover-ratio="16 / 9"
+        :title="card.title"
+        :content="card.content"
+        layout="h"
+        cover-class="card-cover"
+        :title-max-row="1"
+        :detail-max-row="2"
+      >
+        <template #actions>
+          <div class="actions">
+            <div class="date">2023/02/09</div>
+            <div class="btns">
+              <div class="btn"><IconStar /> 文本</div>
+            </div>
+          </div>
+        </template>
+      </OCard>
+    </div>
+    <div>
+      <OCard
+        class="card card2"
+        :cover="card.cover"
+        :cover-ratio="16 / 9"
+        size="large"
+        :title="card.title"
+        :content="card.content"
+        layout="h"
+        cover-class="card-cover"
+      >
+        <template #actions>
+          <div class="actions">
+            <div class="date">2023/02/09</div>
+            <div class="btns">
+              <div class="btn"><IconStar /> 文本</div>
+            </div>
+          </div>
+        </template>
+      </OCard>
+    </div>
+
+    <div class="flex">
+      <OCard class="card col3" :title="card.title" :content="card.content" />
+      <OCard class="card col3" :title="card.title" :content="card.content" hoverable>
+        <template #actions>
+          <div class="actions">
+            <div class="date">2023/02/09</div>
+            <div class="btns">
+              <div class="btn"><IconStar /> 文本</div>
+            </div>
+          </div>
+        </template>
+      </OCard>
+    </div>
+  </section>
+</template>
+<style lang="scss">
+.flex {
+  display: flex;
+  gap: 8px;
+}
+.row {
+  gap: 8px;
+}
+.col2 {
+  width: calc(50% - 4px);
+}
+.col3 {
+  width: calc(33.333% - 5px);
+}
+.col4 {
+  width: calc(25% - 6px);
+}
+.actions {
+  // margin-top: ;
+  display: flex;
+  justify-content: space-between;
+}
+.card2 {
+  // height: 260px;
+}
+</style>
diff --git a/packages/opendesign/src/components/card/__demo__/IndexCard.vue b/packages/opendesign/src/components/card/__demo__/IndexCard.vue
new file mode 100644
index 000000000..ab6c75049
--- /dev/null
+++ b/packages/opendesign/src/components/card/__demo__/IndexCard.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import '../style';
+import CardBasic from './CardBasic.vue';
+</script>
+<template>
+  <div class="page-demo">
+    <CardBasic />
+  </div>
+</template>
+<style lang="scss"></style>
diff --git a/packages/opendesign/src/components/card/index.ts b/packages/opendesign/src/components/card/index.ts
new file mode 100644
index 000000000..99344ab48
--- /dev/null
+++ b/packages/opendesign/src/components/card/index.ts
@@ -0,0 +1,12 @@
+import _OCard from './OCard.vue';
+import type { App } from 'vue';
+
+const OCard = Object.assign(_OCard, {
+  install(app: App) {
+    app.component(_OCard.name, _OCard);
+  },
+});
+
+export {
+  OCard,
+};
diff --git a/packages/opendesign/src/components/card/style/index.scss b/packages/opendesign/src/components/card/style/index.scss
new file mode 100644
index 000000000..38bc00870
--- /dev/null
+++ b/packages/opendesign/src/components/card/style/index.scss
@@ -0,0 +1,108 @@
+@use './var.scss';
+
+.o-card {
+  background-color: var(--o-color-control-light);
+  border-radius: var(--card-radius);
+  overflow: hidden;
+}
+.o-card-cover {
+  flex-shrink: 0;
+}
+.o-card-cover-v {
+  padding: 8px 8px 0;
+}
+.o-card-cover-h {
+  padding: 8px 0 8px 8px;
+}
+.o-card-cover-hr {
+  padding: 8px 8px 8px 0;
+}
+
+.o-card-only-cover {
+  padding: 0;
+}
+
+.o-card-cover-img {
+  width: 100%;
+  border-radius: calc(var(--card-radius) / 2);
+  &.is-full {
+    height: 100%;
+  }
+}
+
+.o-card-title {
+  font-size: var(--o-font_size-h3);
+  line-height: var(--o-line_height-h3);
+  color: var(--o-color-info1);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: var(--card-title-max-row);
+  -webkit-box-orient: vertical;
+}
+
+.o-card-main {
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.o-card-content {
+  font-size: var(--o-font_size-text1);
+  line-height: var(--o-line_height-text1);
+  color: var(--o-color-info2);
+  .o-card-title + & {
+    margin-top: 12px;
+  }
+}
+.o-card-detail {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: var(--card-detail-max-row);
+  -webkit-box-orient: vertical;
+}
+
+.o-card-hoverable {
+  position: relative;
+  cursor: pointer;
+  transition: box-shadow var(--o-easing-standard) var(--o-duration-m2);
+
+  &:hover {
+    box-shadow: var(--o-shadow-2);
+    .o-card-cover img {
+      transform: scale(1.05);
+    }
+  }
+  &:active {
+    box-shadow: var(--o-shadow-1);
+    .o-card-cover img {
+      transform: scale(1.02);
+    }
+  }
+}
+.o-card-actions {
+  margin-top: 24px;
+  font-size: var(--o-font_size-tip1);
+  line-height: var(--o-line_height-tip1);
+  color: var(--o-color-info3);
+}
+
+.o-card-layout-h {
+  display: flex;
+}
+.o-card-layout-hr {
+  display: flex;
+  flex-direction: row-reverse;
+}
+.o-card-cover-h,
+.o-card-cover-hr {
+  width: var(--card-h-cover-width);
+}
+
+.o-card-large {
+  .o-card-main {
+    padding: 24px 32px;
+  }
+}
diff --git a/packages/opendesign/src/components/card/style/index.ts b/packages/opendesign/src/components/card/style/index.ts
new file mode 100644
index 000000000..8da214d05
--- /dev/null
+++ b/packages/opendesign/src/components/card/style/index.ts
@@ -0,0 +1,3 @@
+import '../../style';
+import '../../figure/style';
+import './index.scss';
diff --git a/packages/opendesign/src/components/card/style/var.scss b/packages/opendesign/src/components/card/style/var.scss
new file mode 100644
index 000000000..6b71a6757
--- /dev/null
+++ b/packages/opendesign/src/components/card/style/var.scss
@@ -0,0 +1,12 @@
+.o-card {
+  --card-radius: var(--o-radius-control-l);
+  --card-title-max-row: 0;
+  --card-detail-max-row: 0;
+}
+
+.o-card-medium {
+  --card-h-cover-width: 274px;
+}
+.o-card-large {
+  --card-h-cover-width: 442px;
+}
diff --git a/packages/opendesign/src/components/card/types.ts b/packages/opendesign/src/components/card/types.ts
new file mode 100644
index 000000000..0f4a32fdd
--- /dev/null
+++ b/packages/opendesign/src/components/card/types.ts
@@ -0,0 +1,75 @@
+import { ExtractPropTypes, PropType } from 'vue';
+
+export const dialogProps = {
+  /**
+   * 封面
+   */
+  layout: {
+    type: String as PropType<'h' | 'v' | 'hr'>,
+    default: 'v'
+  },
+  /**
+   * 封面
+   */
+  cover: {
+    type: String,
+  },
+  /**
+   * 封面长宽比
+   */
+  coverRatio: {
+    type: Number,
+  },
+  /**
+   * 标题
+   */
+  title: {
+    type: String,
+  },
+  /**
+   * 标题
+   */
+  content: {
+    type: String,
+  },
+  /**
+   * 可hover
+   */
+  hoverable: {
+    type: Boolean,
+  },
+  /**
+   * cover classname
+   */
+  coverClass: {
+    type: String,
+  },
+  /**
+   * 尺寸
+   */
+  size: {
+    type: String as PropType<'medium' | 'large'>,
+    default: 'medium'
+  },
+  /**
+   * 标题最大行数
+   */
+  titleMaxRow: {
+    type: Number,
+  },
+  /**
+   * 详情最大行数
+   */
+  detailMaxRow: {
+    type: Number,
+  },
+  /**
+   * 链接跳转
+   */
+  href: {
+    type: String,
+  }
+
+};
+
+export type DialogPropsT = ExtractPropTypes<typeof dialogProps>;
diff --git a/packages/portal/src/router.ts b/packages/portal/src/router.ts
index 3dac78d2d..f57e6dfad 100644
--- a/packages/portal/src/router.ts
+++ b/packages/portal/src/router.ts
@@ -158,6 +158,12 @@ export const routes = [
     label: '图片',
     component: () => import('@components/figure/__demo__/IndexFigure.vue'),
   },
+  {
+    path: '/card',
+    name: 'Card',
+    label: '卡片',
+    component: () => import('@components/card/__demo__/IndexCard.vue'),
+  },
   {
     path: '/resize-observer',
     name: 'ResizeObserver',
-- 
Gitee


From 61dd53c6495166a27c774430efcd03f97165c497 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Wed, 15 Mar 2023 15:22:43 +0800
Subject: [PATCH 6/6] =?UTF-8?q?=E5=A2=9E=E5=8A=A0html-tag=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/_shared/DivOrA.vue         | 15 --------------
 .../_shared/{ => components}/client-only.ts   |  0
 .../components/_shared/components/html-tag.ts | 20 +++++++++++++++++++
 .../src/components/button/OButton.vue         |  7 +++++--
 .../components/button/__demo__/BtnLoading.vue |  8 ++++----
 .../src/components/button/style/index.scss    |  4 ++--
 .../opendesign/src/components/button/types.ts |  6 ++++++
 .../opendesign/src/components/card/OCard.vue  |  4 ++--
 .../dialog/__demo__/DialogBasic.vue           |  2 +-
 .../src/components/figure/OFigure.vue         |  8 ++++----
 .../src/components/figure/style/index.scss    |  3 ++-
 .../src/components/input/OInput.vue           |  2 +-
 .../src/components/popup/OPopup.vue           |  2 +-
 .../src/components/select/OSelect.vue         |  2 +-
 .../src/components/tabs/OTabPane.vue          |  2 +-
 .../src/components/textarea/OTextarea.vue     |  2 +-
 16 files changed, 51 insertions(+), 36 deletions(-)
 delete mode 100644 packages/opendesign/src/components/_shared/DivOrA.vue
 rename packages/opendesign/src/components/_shared/{ => components}/client-only.ts (100%)
 create mode 100644 packages/opendesign/src/components/_shared/components/html-tag.ts

diff --git a/packages/opendesign/src/components/_shared/DivOrA.vue b/packages/opendesign/src/components/_shared/DivOrA.vue
deleted file mode 100644
index 4d60cdb32..000000000
--- a/packages/opendesign/src/components/_shared/DivOrA.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<script setup lang="ts">
-const props = defineProps({
-  isA: {
-    type: Boolean,
-  },
-});
-</script>
-<template>
-  <a v-if="props.isA">
-    <slot></slot>
-  </a>
-  <div v-else>
-    <slot></slot>
-  </div>
-</template>
diff --git a/packages/opendesign/src/components/_shared/client-only.ts b/packages/opendesign/src/components/_shared/components/client-only.ts
similarity index 100%
rename from packages/opendesign/src/components/_shared/client-only.ts
rename to packages/opendesign/src/components/_shared/components/client-only.ts
diff --git a/packages/opendesign/src/components/_shared/components/html-tag.ts b/packages/opendesign/src/components/_shared/components/html-tag.ts
new file mode 100644
index 000000000..c8fee7e7c
--- /dev/null
+++ b/packages/opendesign/src/components/_shared/components/html-tag.ts
@@ -0,0 +1,20 @@
+import { defineComponent, h } from 'vue';
+
+/**
+ * 只渲染一个子元素
+ */
+export default defineComponent({
+  name: 'HtmlTag',
+  props: {
+    tag: {
+      type: String,
+      default: 'div'
+    }
+  },
+  setup(props, { slots, attrs }) {
+
+    return () => {
+      return h(props.tag, attrs, slots.default?.());
+    };
+  },
+});
diff --git a/packages/opendesign/src/components/button/OButton.vue b/packages/opendesign/src/components/button/OButton.vue
index fe91c6479..a5cd049c5 100644
--- a/packages/opendesign/src/components/button/OButton.vue
+++ b/packages/opendesign/src/components/button/OButton.vue
@@ -3,13 +3,16 @@ import { defaultSize } from '../_shared/global';
 import { IconLoading } from '../_shared/icons';
 import { getRoundClass } from '../_shared/style-class';
 import { buttonProps } from './types';
+import HtmlTag from '../_shared/components/html-tag';
 
 const props = defineProps(buttonProps);
 
 const round = getRoundClass(props, 'btn');
 </script>
 <template>
-  <button
+  <HtmlTag
+    :tag="!!props.href ? 'a' : 'button'"
+    :href="props.href"
     type="button"
     class="o-btn"
     :class="[
@@ -32,5 +35,5 @@ const round = getRoundClass(props, 'btn');
     <span v-if="$slots.iconSuffix" class="o-btn-icon suffix">
       <slot name="iconSuffix"></slot>
     </span>
-  </button>
+  </HtmlTag>
 </template>
diff --git a/packages/opendesign/src/components/button/__demo__/BtnLoading.vue b/packages/opendesign/src/components/button/__demo__/BtnLoading.vue
index d90811ebe..475ceec11 100644
--- a/packages/opendesign/src/components/button/__demo__/BtnLoading.vue
+++ b/packages/opendesign/src/components/button/__demo__/BtnLoading.vue
@@ -17,12 +17,12 @@ const showLoading = (key: 'loading1' | 'loading2' | 'loading3', val: boolean) =>
 <template>
   <h4>Loading</h4>
   <section>
-    <OButton type="primary" :loading="rlt.loading1" @click="showLoading('loading1', true)">Primary Button</OButton>
-    <OButton type="outline" :loading="rlt.loading2" @click="showLoading('loading2', true)">
+    <OButton color="primary" :loading="rlt.loading1" @click="showLoading('loading1', true)">Primary Button</OButton>
+    <OButton variant="outline" :loading="rlt.loading2" @click="showLoading('loading2', true)">
       <template #icon><IconAdd /></template>Outline Button
     </OButton>
-    <OButton type="text" :loading="rlt.loading3" @click="showLoading('loading3', true)">Text Button</OButton>
-    <OButton type="link" :loading="!rlt.loading3" @click="showLoading('loading3', true)">Link Button</OButton>
+    <OButton variant="text" :loading="rlt.loading3" @click="showLoading('loading3', true)">Text Button</OButton>
+    <OButton :loading="!rlt.loading3" href="https://hiascend.com" target="__blank">Link Button</OButton>
   </section>
 </template>
 <style lang="scss"></style>
diff --git a/packages/opendesign/src/components/button/style/index.scss b/packages/opendesign/src/components/button/style/index.scss
index 478de982f..ed75acbd7 100644
--- a/packages/opendesign/src/components/button/style/index.scss
+++ b/packages/opendesign/src/components/button/style/index.scss
@@ -6,12 +6,12 @@
   border: 1px solid transparent;
   transition: all var(--o-duration-s) var(--o-easing-standard);
   white-space: nowrap;
-
+  text-decoration: none;
   border-radius: var(--btn-radius);
-
   display: inline-flex;
   align-items: center;
   justify-content: center;
+
   &:hover {
     cursor: pointer;
   }
diff --git a/packages/opendesign/src/components/button/types.ts b/packages/opendesign/src/components/button/types.ts
index 9aec18fee..98dcbc539 100644
--- a/packages/opendesign/src/components/button/types.ts
+++ b/packages/opendesign/src/components/button/types.ts
@@ -42,6 +42,12 @@ export const buttonProps = {
   disabled: {
     type: Boolean
   },
+  /**
+   * 链接跳转
+   */
+  href: {
+    type: String,
+  }
 };
 
 export type ButtonPropsT = ExtractPropTypes<typeof buttonProps>;
diff --git a/packages/opendesign/src/components/card/OCard.vue b/packages/opendesign/src/components/card/OCard.vue
index 432a2ab36..d856473d2 100644
--- a/packages/opendesign/src/components/card/OCard.vue
+++ b/packages/opendesign/src/components/card/OCard.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { ref, watch, computed } from 'vue';
+import { computed } from 'vue';
 import { dialogProps } from './types';
 import { OFigure } from '../figure';
-import HtmlTag from '../_shared/components/tag';
+import HtmlTag from '../_shared/components/html-tag';
 
 const props = defineProps(dialogProps);
 
diff --git a/packages/opendesign/src/components/dialog/__demo__/DialogBasic.vue b/packages/opendesign/src/components/dialog/__demo__/DialogBasic.vue
index d7c175e93..ac12485b4 100644
--- a/packages/opendesign/src/components/dialog/__demo__/DialogBasic.vue
+++ b/packages/opendesign/src/components/dialog/__demo__/DialogBasic.vue
@@ -4,7 +4,7 @@ import { OButton } from '../../button';
 import '../../button/style';
 import { ODialog } from '../index';
 
-const showDlg = ref(true);
+const showDlg = ref(false);
 
 const toggle = (show?: boolean) => {
   if (show === undefined) {
diff --git a/packages/opendesign/src/components/figure/OFigure.vue b/packages/opendesign/src/components/figure/OFigure.vue
index c43425745..5abeeb81f 100644
--- a/packages/opendesign/src/components/figure/OFigure.vue
+++ b/packages/opendesign/src/components/figure/OFigure.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, watch, computed } from 'vue';
 import { PrestColorPool } from '../_shared/utils';
-import DivOrA from '../_shared/DivOrA.vue';
+import HtmlTag from '../_shared/components/html-tag';
 
 import { figureProps } from './types';
 
@@ -54,8 +54,8 @@ watch(
 );
 </script>
 <template>
-  <DivOrA
-    :is-a="!!props.href"
+  <HtmlTag
+    :tag="!!props.href ? 'a' : 'div'"
     class="o-figure"
     :href="props.href"
     :class="{
@@ -86,5 +86,5 @@ watch(
       <img v-else-if="!isError" :src="props.src" :alt="props.alt" class="o-figure-img" @load="onImgLoaded" @error="onImgError" />
     </template>
     <slot></slot>
-  </DivOrA>
+  </HtmlTag>
 </template>
diff --git a/packages/opendesign/src/components/figure/style/index.scss b/packages/opendesign/src/components/figure/style/index.scss
index 8a220011d..9ad288474 100644
--- a/packages/opendesign/src/components/figure/style/index.scss
+++ b/packages/opendesign/src/components/figure/style/index.scss
@@ -14,7 +14,8 @@
   img {
     vertical-align: top;
     opacity: 1;
-    transition: opacity var(--o-duration-m2), transform var(--o-duration-m2);
+    transition: opacity var(--o-duration-m2), transform var(--o-easing-standard) var(--o-duration-m2);
+    will-change: transform;
   }
   &.is-error {
     background-color: var(--o-color-control4);
diff --git a/packages/opendesign/src/components/input/OInput.vue b/packages/opendesign/src/components/input/OInput.vue
index 7bc488124..d021b666a 100644
--- a/packages/opendesign/src/components/input/OInput.vue
+++ b/packages/opendesign/src/components/input/OInput.vue
@@ -9,7 +9,7 @@ import { toInputString } from './input';
 import { OResizeObserver } from '../resize-observer';
 import { inputProps } from './types';
 import { getRoundClass } from '../_shared/style-class';
-import ClientOnly from '../_shared/client-only';
+import ClientOnly from '../_shared/components/client-only';
 
 const props = defineProps(inputProps);
 
diff --git a/packages/opendesign/src/components/popup/OPopup.vue b/packages/opendesign/src/components/popup/OPopup.vue
index 8a1a4640b..3adb62348 100644
--- a/packages/opendesign/src/components/popup/OPopup.vue
+++ b/packages/opendesign/src/components/popup/OPopup.vue
@@ -15,7 +15,7 @@ import { OResizeObserver } from '../resize-observer';
 import { useIntersectionObserver } from '../hooks';
 import type { IntersectionListenerT } from '../hooks';
 import { OChildOnly } from '../child-only';
-import ClientOnly from '../_shared/client-only';
+import ClientOnly from '../_shared/components/client-only';
 
 // TODO 处理嵌套
 
diff --git a/packages/opendesign/src/components/select/OSelect.vue b/packages/opendesign/src/components/select/OSelect.vue
index 114a5de92..334e2f868 100644
--- a/packages/opendesign/src/components/select/OSelect.vue
+++ b/packages/opendesign/src/components/select/OSelect.vue
@@ -6,7 +6,7 @@ import { OPopup } from '../popup';
 import { selectOptionInjectKey } from './provide';
 import { SelectOptionT, selectProps } from './types';
 import { getRoundClass } from '../_shared/style-class';
-import ClientOnly from '../_shared/client-only';
+import ClientOnly from '../_shared/components/client-only';
 
 const props = defineProps(selectProps);
 const emits = defineEmits<{
diff --git a/packages/opendesign/src/components/tabs/OTabPane.vue b/packages/opendesign/src/components/tabs/OTabPane.vue
index 60abf5db7..4a6afa76b 100644
--- a/packages/opendesign/src/components/tabs/OTabPane.vue
+++ b/packages/opendesign/src/components/tabs/OTabPane.vue
@@ -8,7 +8,7 @@ import { computed, getCurrentInstance, inject, onMounted, nextTick, ref, watch }
 import { tabsInjectKey } from './provide';
 import { tabPaneProps } from './types';
 import { IconClose } from '../_shared/icons';
-import ClientOnly from '../_shared/client-only';
+import ClientOnly from '../_shared/components/client-only';
 
 const props = defineProps(tabPaneProps);
 
diff --git a/packages/opendesign/src/components/textarea/OTextarea.vue b/packages/opendesign/src/components/textarea/OTextarea.vue
index c16be7b7b..16409d646 100644
--- a/packages/opendesign/src/components/textarea/OTextarea.vue
+++ b/packages/opendesign/src/components/textarea/OTextarea.vue
@@ -8,7 +8,7 @@ import { toInputString } from './textarea';
 import { OResizeObserver } from '../resize-observer';
 import { textareaProps } from './types';
 import { getRoundClass } from '../_shared/style-class';
-import ClientOnly from '../_shared/client-only';
+import ClientOnly from '../_shared/components/client-only';
 
 const props = defineProps(textareaProps);
 
-- 
Gitee