From 60a4898cfc6251623f92bde98c67d26d782eab62 Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Tue, 3 Jan 2023 20:19:28 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96demo=E7=9B=AE=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/button/__demo__/IndexBtn.vue}  |  12 +-
 .../__demo__/IndexIntersection.vue}           |   2 +-
 ...nObserverDemo.vue => IntersectionDemo.vue} |   0
 .../opendesign/src/components/link/OLink.vue  |  35 +++++
 .../components/link/__demo__/IndexLink.vue    |   9 ++
 .../src/components/link/__demo__/LinkDemo.vue |  12 ++
 .../opendesign/src/components/link/index.ts   |  12 ++
 .../src/components/link/style/index.scss      | 140 ++++++++++++++++++
 .../src/components/link/style/index.ts        |   1 +
 .../src/components/link/style/var.scss        |  25 ++++
 .../popover/__demo__/IndexPopover.vue}        |   6 +-
 .../components/popup/__demo__/IndexPopup.vue} |   8 +-
 .../resize-observer/__demo__/IndexResize.vue} |   4 +-
 ...{ResizeObserverDemo.vue => ResizeDemo.vue} |   0
 .../select/__demo__/IndexSelect.vue}          |  10 +-
 .../switch/__demo__/IndexSwitch.vue}          |  12 +-
 packages/portal/src/router.ts                 |  14 +-
 17 files changed, 267 insertions(+), 35 deletions(-)
 rename packages/{portal/src/pages/TheButton.vue => opendesign/src/components/button/__demo__/IndexBtn.vue} (46%)
 rename packages/{portal/src/pages/TheIntersectionObserver.vue => opendesign/src/components/intersection-observer/__demo__/IndexIntersection.vue} (59%)
 rename packages/opendesign/src/components/intersection-observer/__demo__/{IntersectionObserverDemo.vue => IntersectionDemo.vue} (100%)
 create mode 100644 packages/opendesign/src/components/link/OLink.vue
 create mode 100644 packages/opendesign/src/components/link/__demo__/IndexLink.vue
 create mode 100644 packages/opendesign/src/components/link/__demo__/LinkDemo.vue
 create mode 100644 packages/opendesign/src/components/link/index.ts
 create mode 100644 packages/opendesign/src/components/link/style/index.scss
 create mode 100644 packages/opendesign/src/components/link/style/index.ts
 create mode 100644 packages/opendesign/src/components/link/style/var.scss
 rename packages/{portal/src/pages/ThePopover.vue => opendesign/src/components/popover/__demo__/IndexPopover.vue} (43%)
 rename packages/{portal/src/pages/ThePopup.vue => opendesign/src/components/popup/__demo__/IndexPopup.vue} (41%)
 rename packages/{portal/src/pages/TheResizeObserver.vue => opendesign/src/components/resize-observer/__demo__/IndexResize.vue} (50%)
 rename packages/opendesign/src/components/resize-observer/__demo__/{ResizeObserverDemo.vue => ResizeDemo.vue} (100%)
 rename packages/{portal/src/pages/TheSelect.vue => opendesign/src/components/select/__demo__/IndexSelect.vue} (36%)
 rename packages/{portal/src/pages/TheSwitch.vue => opendesign/src/components/switch/__demo__/IndexSwitch.vue} (44%)

diff --git a/packages/portal/src/pages/TheButton.vue b/packages/opendesign/src/components/button/__demo__/IndexBtn.vue
similarity index 46%
rename from packages/portal/src/pages/TheButton.vue
rename to packages/opendesign/src/components/button/__demo__/IndexBtn.vue
index 2a2f0c96..b50b9690 100644
--- a/packages/portal/src/pages/TheButton.vue
+++ b/packages/opendesign/src/components/button/__demo__/IndexBtn.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import '@opensig/opendesign/src/components/button/style';
+import '../style';
 
-import BtnType from '@demo/button/__demo__/BtnType.vue';
-import BtnSize from '@demo/button/__demo__/BtnSize.vue';
-import BtnDisabled from '@demo/button/__demo__/BtnDisabled.vue';
-import BtnIcon from '@demo/button/__demo__/BtnIcon.vue';
-import BtnShape from '@demo/button/__demo__/BtnShape.vue';
+import BtnType from './BtnType.vue';
+import BtnSize from './BtnSize.vue';
+import BtnDisabled from './BtnDisabled.vue';
+import BtnIcon from './BtnIcon.vue';
+import BtnShape from './BtnShape.vue';
 </script>
 <template>
   <div class="page-demo">
diff --git a/packages/portal/src/pages/TheIntersectionObserver.vue b/packages/opendesign/src/components/intersection-observer/__demo__/IndexIntersection.vue
similarity index 59%
rename from packages/portal/src/pages/TheIntersectionObserver.vue
rename to packages/opendesign/src/components/intersection-observer/__demo__/IndexIntersection.vue
index f773d957..402de8cf 100644
--- a/packages/portal/src/pages/TheIntersectionObserver.vue
+++ b/packages/opendesign/src/components/intersection-observer/__demo__/IndexIntersection.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import IntersectionObserverDemo from '@demo/intersection-observer/__demo__/IntersectionObserverDemo.vue';
+import IntersectionObserverDemo from './IntersectionDemo.vue';
 </script>
 <template>
   <div class="page-demo">
diff --git a/packages/opendesign/src/components/intersection-observer/__demo__/IntersectionObserverDemo.vue b/packages/opendesign/src/components/intersection-observer/__demo__/IntersectionDemo.vue
similarity index 100%
rename from packages/opendesign/src/components/intersection-observer/__demo__/IntersectionObserverDemo.vue
rename to packages/opendesign/src/components/intersection-observer/__demo__/IntersectionDemo.vue
diff --git a/packages/opendesign/src/components/link/OLink.vue b/packages/opendesign/src/components/link/OLink.vue
new file mode 100644
index 00000000..e5e97e04
--- /dev/null
+++ b/packages/opendesign/src/components/link/OLink.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { defaultSize, defaultShape } from '../_shared/global';
+import type { SizeT, ShapeT } from '../_shared/global';
+import { ButtonTypeT } from './types';
+
+interface ButtonPropT {
+  type?: ButtonTypeT;
+  size?: SizeT;
+  shape?: ShapeT;
+}
+const props = withDefaults(defineProps<ButtonPropT>(), {
+  type: 'outline',
+  size: defaultSize.value,
+  shape: defaultShape.value,
+});
+</script>
+<template>
+  <button
+    type="button"
+    class="o-btn"
+    :class="[
+      `o-btn-${props.type}`,
+      `o-btn-size-${props.size}`,
+      `o-btn-shape-${props.shape}`,
+      {
+        'o-btn-icon-only': $slots.icon && !$slots.default,
+      },
+    ]"
+  >
+    <span v-if="$slots.icon" class="o-btn-icon">
+      <slot name="icon"></slot>
+    </span>
+    <slot></slot>
+  </button>
+</template>
diff --git a/packages/opendesign/src/components/link/__demo__/IndexLink.vue b/packages/opendesign/src/components/link/__demo__/IndexLink.vue
new file mode 100644
index 00000000..80022ef7
--- /dev/null
+++ b/packages/opendesign/src/components/link/__demo__/IndexLink.vue
@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import BtnIndex from './LinkDemo.vue';
+</script>
+<template>
+  <div class="page-demo">
+    <BtnIndex />
+  </div>
+</template>
+<style lang="scss"></style>
diff --git a/packages/opendesign/src/components/link/__demo__/LinkDemo.vue b/packages/opendesign/src/components/link/__demo__/LinkDemo.vue
new file mode 100644
index 00000000..cd607a52
--- /dev/null
+++ b/packages/opendesign/src/components/link/__demo__/LinkDemo.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { OButton } from '../index';
+</script>
+<template>
+  <section>
+    <OButton type="primary" disabled>Primary Button</OButton>
+    <OButton type="outline" disabled>Outline Button</OButton>
+    <OButton type="text" disabled>Text Button</OButton>
+    <OButton type="link" disabled>Link Button</OButton>
+  </section>
+</template>
+<style lang="scss"></style>
diff --git a/packages/opendesign/src/components/link/index.ts b/packages/opendesign/src/components/link/index.ts
new file mode 100644
index 00000000..7b8e241b
--- /dev/null
+++ b/packages/opendesign/src/components/link/index.ts
@@ -0,0 +1,12 @@
+import _OLink from './OLink.vue';
+import type { App } from 'vue';
+
+const OLink = Object.assign(_OLink, {
+  install(app: App) {
+    app.component(_OLink.name, _OLink);
+  },
+});
+
+export {
+  OLink,
+};
diff --git a/packages/opendesign/src/components/link/style/index.scss b/packages/opendesign/src/components/link/style/index.scss
new file mode 100644
index 00000000..878347d4
--- /dev/null
+++ b/packages/opendesign/src/components/link/style/index.scss
@@ -0,0 +1,140 @@
+@import './var.scss';
+
+.o-btn {
+  outline: none;
+  border: 1px solid transparent;
+  font-size: var(--btn-text-size);
+  line-height: var(--btn-text-height);
+  transition: all 0.2s ease-in-out;
+  white-space: nowrap;
+  cursor: pointer;
+
+  &:focus-visible {
+    outline: 4px solid var(--btn-primary_hover);
+    outline-offset: 1px;
+  }
+
+  &:disabled {
+    color: var(--btn-color_disabled);
+    cursor: not-allowed;
+  }
+}
+
+.o-btn-size-small {
+  padding: 0 7px;
+  height: var(--btn-height-s);
+  border-radius: var(--btn-radius-s);
+  &.o-btn-icon-only {
+    width: var(--btn-height-s);
+  }
+}
+
+.o-btn-size-normal {
+  padding: 4px 15px;
+  height: var(--btn-height-m);
+  border-radius: var(--btn-radius-m);
+  &.o-btn-icon-only {
+    width: var(--btn-height-m);
+  }
+}
+
+.o-btn-size-large {
+  padding: 4px 19px;
+  height: var(--btn-height-l);
+  border-radius: var(--btn-radius-l);
+
+  &.o-btn-icon-only {
+    width: var(--btn-height-l);
+  }
+}
+
+.o-btn-primary {
+  color: var(--btn-color_inverse);
+  background-color: var(--btn-primary);
+
+  &:not(:disabled) {
+    &:hover {
+      background-color: var(--btn-primary_hover);
+    }
+
+    &:active {
+      background-color: var(--btn-primary_active);
+    }
+  }
+
+  &:disabled {
+    border-color: var(--btn-bg);
+    background-color: var(--btn-bg_disabled);
+  }
+}
+
+.o-btn-outline {
+  color: var(--btn-color);
+  background-color: transparent;
+  border-color: var(--btn-bg);
+
+  &:not(:disabled) {
+    &:hover {
+      color: var(--btn-primary_hover);
+      border-color: var(--btn-primary_hover);
+    }
+
+    &:active {
+      color: var(--btn-primary_active);
+      border-color: var(--btn-primary_active);
+    }
+  }
+
+  &:disabled {
+    background-color: var(--btn-bg_disabled);
+  }
+}
+
+.o-btn-text {
+  color: var(--btn-color);
+  background-color: transparent;
+
+  &:not(:disabled) {
+    &:hover {
+      background-color: var(--btn-bg_hover);
+    }
+
+    &:active {
+      background-color: var(--btn-bg_active);
+    }
+  }
+}
+
+.o-btn-link {
+  color: var(--btn-primary);
+  background-color: transparent;
+
+  &:not(:disabled) {
+    &:hover {
+      color: var(--btn-primary_hover);
+    }
+
+    &:active {
+      color: var(--btn-primary_active);
+    }
+  }
+}
+
+.o-btn-icon-only {
+  padding: 0;
+}
+.o-btn-icon {
+  vertical-align: middle;
+  margin-right: 6px;
+
+  .o-btn-icon-only & {
+    margin-right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+.o-btn-shape-round {
+  border-radius: var(--btn-height-l);
+}
diff --git a/packages/opendesign/src/components/link/style/index.ts b/packages/opendesign/src/components/link/style/index.ts
new file mode 100644
index 00000000..67aac616
--- /dev/null
+++ b/packages/opendesign/src/components/link/style/index.ts
@@ -0,0 +1 @@
+import './index.scss';
diff --git a/packages/opendesign/src/components/link/style/var.scss b/packages/opendesign/src/components/link/style/var.scss
new file mode 100644
index 00000000..ca8adcf1
--- /dev/null
+++ b/packages/opendesign/src/components/link/style/var.scss
@@ -0,0 +1,25 @@
+.o-btn {
+  --btn-primary: var(--o-color-primary1);
+  --btn-primary_hover: var(--o-color-primary2);
+  --btn-primary_active: var(--o-color-primary3);
+
+  --btn-bg: var(--o-color-info1);
+  --btn-bg_hover: var(--o-color-info2);
+  --btn-bg_active: var(--o-color-info3);
+  --btn-bg_disabled: var(--o-color-info4);
+
+  --btn-color: var(--o-color-text2);
+  --btn-color_inverse: var(--o-color-text2_inverse);
+  --btn-color_disabled: var(--o-color-text4);
+
+  --btn-text-size: var(--o-font_size-text);
+  --btn-text-height: var(--o-line_height-text);
+
+  --btn-height-s: var(--o-size-s);
+  --btn-height-m: var(--o-size-m);
+  --btn-height-l: var(--o-size-l);
+
+  --btn-radius-s: var(--o-radius-s);
+  --btn-radius-m: var(--o-radius-s);
+  --btn-radius-l: var(--o-radius-s);
+}
diff --git a/packages/portal/src/pages/ThePopover.vue b/packages/opendesign/src/components/popover/__demo__/IndexPopover.vue
similarity index 43%
rename from packages/portal/src/pages/ThePopover.vue
rename to packages/opendesign/src/components/popover/__demo__/IndexPopover.vue
index a16f012b..f03510f9 100644
--- a/packages/portal/src/pages/ThePopover.vue
+++ b/packages/opendesign/src/components/popover/__demo__/IndexPopover.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import '@opensig/opendesign/src/components/popup/style';
-import '@opensig/opendesign/src/components/popover/style';
+import '../../popup/style';
+import '../style';
 
-import PopoverPosition from '@demo/popover/__demo__/PopoverPosition.vue';
+import PopoverPosition from './PopoverPosition.vue';
 </script>
 <template>
   <div class="page-demo">
diff --git a/packages/portal/src/pages/ThePopup.vue b/packages/opendesign/src/components/popup/__demo__/IndexPopup.vue
similarity index 41%
rename from packages/portal/src/pages/ThePopup.vue
rename to packages/opendesign/src/components/popup/__demo__/IndexPopup.vue
index 900d72c4..29a44a15 100644
--- a/packages/portal/src/pages/ThePopup.vue
+++ b/packages/opendesign/src/components/popup/__demo__/IndexPopup.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import '@opensig/opendesign/src/components/popup/style';
+import '../style';
 
-import PopupPosition from '@demo/popup/__demo__/PopupPosition.vue';
-import PopupVisible from '@demo/popup/__demo__/PopupVisible.vue';
-import PopupContainer from '@demo/popup/__demo__/PopupContainer.vue';
+import PopupPosition from './PopupPosition.vue';
+import PopupVisible from './PopupVisible.vue';
+import PopupContainer from './PopupContainer.vue';
 </script>
 <template>
   <div class="page-demo">
diff --git a/packages/portal/src/pages/TheResizeObserver.vue b/packages/opendesign/src/components/resize-observer/__demo__/IndexResize.vue
similarity index 50%
rename from packages/portal/src/pages/TheResizeObserver.vue
rename to packages/opendesign/src/components/resize-observer/__demo__/IndexResize.vue
index 9c5d0acf..75df8370 100644
--- a/packages/portal/src/pages/TheResizeObserver.vue
+++ b/packages/opendesign/src/components/resize-observer/__demo__/IndexResize.vue
@@ -1,10 +1,8 @@
 <script setup lang="ts">
-import ResizeObserver from '@demo/resize-observer/__demo__/ResizeObserverDemo.vue';
+import ResizeObserver from './ResizeDemo.vue';
 </script>
 <template>
   <div class="page-demo">
-    <!-- <SelectSize /> -->
-    <!-- <SelectDisabled /> -->
     <ResizeObserver />
   </div>
 </template>
diff --git a/packages/opendesign/src/components/resize-observer/__demo__/ResizeObserverDemo.vue b/packages/opendesign/src/components/resize-observer/__demo__/ResizeDemo.vue
similarity index 100%
rename from packages/opendesign/src/components/resize-observer/__demo__/ResizeObserverDemo.vue
rename to packages/opendesign/src/components/resize-observer/__demo__/ResizeDemo.vue
diff --git a/packages/portal/src/pages/TheSelect.vue b/packages/opendesign/src/components/select/__demo__/IndexSelect.vue
similarity index 36%
rename from packages/portal/src/pages/TheSelect.vue
rename to packages/opendesign/src/components/select/__demo__/IndexSelect.vue
index 91b4680e..c9b842f0 100644
--- a/packages/portal/src/pages/TheSelect.vue
+++ b/packages/opendesign/src/components/select/__demo__/IndexSelect.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import '@opensig/opendesign/src/components/select/style';
-import '@opensig/opendesign/src/components/option/style';
+import '../style';
+import '../../option/style';
 
-import SelectSize from '@demo/select/__demo__/SelectSize.vue';
-import SelectDisabled from '@demo/select/__demo__/SelectDisabled.vue';
-import SelectPopupposition from '@demo/select/__demo__/SelectPopupposition.vue';
+import SelectSize from './SelectSize.vue';
+import SelectDisabled from './SelectDisabled.vue';
+import SelectPopupposition from './SelectPopupposition.vue';
 </script>
 <template>
   <div class="page-demo">
diff --git a/packages/portal/src/pages/TheSwitch.vue b/packages/opendesign/src/components/switch/__demo__/IndexSwitch.vue
similarity index 44%
rename from packages/portal/src/pages/TheSwitch.vue
rename to packages/opendesign/src/components/switch/__demo__/IndexSwitch.vue
index 5db6a02f..4123a145 100644
--- a/packages/portal/src/pages/TheSwitch.vue
+++ b/packages/opendesign/src/components/switch/__demo__/IndexSwitch.vue
@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import '@opensig/opendesign/es/switch/style';
+import '../style';
 
-import SwitchShape from '@demo/switch/__demo__/SwitchShape.vue';
-import SwitchSize from '@demo/switch/__demo__/SwitchSize.vue';
-import SwitchDisabledAndLoading from '@demo/switch/__demo__/SwitchDisabledAndLoading.vue';
-import SwitchBeforeChange from '@demo/switch/__demo__/SwitchBeforeChange.vue';
-import SwitchSlots from '@demo/switch/__demo__/SwitchSlots.vue';
+import SwitchShape from './SwitchShape.vue';
+import SwitchSize from './SwitchSize.vue';
+import SwitchDisabledAndLoading from './SwitchDisabledAndLoading.vue';
+import SwitchBeforeChange from './SwitchBeforeChange.vue';
+import SwitchSlots from './SwitchSlots.vue';
 </script>
 <template>
   <div class="page-demo">
diff --git a/packages/portal/src/router.ts b/packages/portal/src/router.ts
index c7ab0998..dc9e0338 100644
--- a/packages/portal/src/router.ts
+++ b/packages/portal/src/router.ts
@@ -12,43 +12,43 @@ export const routes = [
     path: '/button',
     name: 'Button',
     label: '按钮',
-    component: () => import('./pages/TheButton.vue'),
+    component: () => import('@demo/button/__demo__/IndexBtn.vue'),
   },
   {
     path: '/switch',
     name: 'Switch',
     label: '开关',
-    component: () => import('./pages/TheSwitch.vue'),
+    component: () => import('@demo/switch/__demo__/IndexSwitch.vue'),
   },
   {
     path: '/resize-observer',
     name: 'ResizeObserver',
     label: 'resize监听',
-    component: () => import('./pages/TheResizeObserver.vue'),
+    component: () => import('@demo/resize-observer/__demo__/IndexResize.vue'),
   },
   {
     path: '/intersection-observer',
     name: 'IntersectionObserver',
     label: 'Intersection监听',
-    component: () => import('./pages/TheIntersectionObserver.vue'),
+    component: () => import('@demo/intersection-observer/__demo__/IndexIntersection.vue'),
   },
   {
     path: '/popup',
     name: 'Popup',
     label: '弹层',
-    component: () => import('./pages/ThePopup.vue'),
+    component: () => import('@demo/popup/__demo__/IndexPopup.vue'),
   },
   {
     path: '/popover',
     name: 'Popover',
     label: '弹出框',
-    component: () => import('./pages/ThePopover.vue'),
+    component: () => import('@demo/popover/__demo__/IndexPopover.vue'),
   },
   {
     path: '/select',
     name: 'Select',
     label: '下拉框',
-    component: () => import('./pages/TheSelect.vue'),
+    component: () => import('@demo/select/__demo__/IndexSelect.vue'),
   },
 
 
-- 
Gitee