From c3a49a26e76debb395aa7e85381f731dd17edafd Mon Sep 17 00:00:00 2001
From: devin <caowendong@huawei.com>
Date: Tue, 3 Jan 2023 21:44:10 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0link?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .eslintrc.js                                  |   8 +
 packages/docs/button.md                       |  36 +----
 packages/docs/select.md                       |  37 ++---
 .../src/components/_shared/constant.ts        |   1 +
 .../src/components/_shared/global.ts          |  10 --
 .../src/components/_shared/utils.ts           |  14 +-
 .../src/components/button/OButton.vue         |   9 ++
 .../button/__demo__/BtnDisabled.vue           |   5 +-
 .../opendesign/src/components/link/OLink.vue  |  75 +++++----
 .../components/link/__demo__/IndexLink.vue    |   1 +
 .../src/components/link/__demo__/LinkDemo.vue |  31 +++-
 .../src/components/link/style/index.scss      | 142 ++----------------
 .../src/components/link/style/var.scss        |  32 +---
 .../src/components/select/OSelect.vue         |   2 +-
 packages/portal/src/router.ts                 |   7 +
 15 files changed, 149 insertions(+), 261 deletions(-)
 create mode 100644 packages/opendesign/src/components/_shared/constant.ts

diff --git a/.eslintrc.js b/.eslintrc.js
index 113afb5f..b4acfe57 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -67,9 +67,17 @@ module.exports = {
         normal: 'never',
       },
     }],
+    // "vue/html-indent": ["error", type, {
+    //   "attribute": 1,
+    //   "baseIndent": 1,
+    //   "closeBracket": 2,
+    //   "alignAttributesVertically": true,
+    //   "ignores": []
+    // }],
 
     'vue/singleline-html-element-content-newline': 'off',
     'vue/html-closing-bracket-newline': 'off',
+    'vue/multiline-html-element-content-newline': 'warn',
 
     // for ts
     // '@typescript-eslint/strict-boolean-expressions': 'warn',
diff --git a/packages/docs/button.md b/packages/docs/button.md
index 3ec6b396..f68d921f 100644
--- a/packages/docs/button.md
+++ b/packages/docs/button.md
@@ -1,33 +1,13 @@
 # Button 按钮
 
-# props
+## props
 
-| name  | type       | 说明 |
-| :---- | :--------- | :--- |
-| type  | ButtonType | 类型 |
-| size  | SizeT      | 尺寸 |
-| shape | ShapeT     | 形状 |
+| name  | type        | 默认值    | 说明                                 |
+| :---- | :---------- | :-------- | :----------------------------------- |
+| shape | ShapeT      | 'normal'  | 形状: large \| normal \| small       |
+| size  | SizeT       | 'normal'  | 形状 normal \| round                 |
+| type  | ButtonTypeT | 'outline' | 形状 primary \|outline\| text \|link |
 
-```
-enum ButtonType {
-  PRIMARY = 'primary',
-  OUTLINE = 'outline',
-  TEXT = 'text',
-  LINK = 'link',
-}
+## event
 
-enum SizeT {
-  LARGE = 'large',
-  NORMAL = 'normal',
-  SMALL = 'small'
-}
-
-enum ShapeT {
-  ROUND = 'round',
-  NORMAL = 'normal'
-}
-```
-
-# event
-
-# expose
+## expose
diff --git a/packages/docs/select.md b/packages/docs/select.md
index 842df15a..85703397 100644
--- a/packages/docs/select.md
+++ b/packages/docs/select.md
@@ -1,35 +1,22 @@
 # Select 下拉选择器
 
-# props
+## props
 
-| name         | type     | 默认值        | 说明                                                          |
-| :----------- | :------- | :------------ | ------------------------------------------------------------- |
-| model:value  | Boolean  | false         | 开关状态                                                      |
-| shape        | ShapeT   | ShapeT.NORMAL | 形状                                                          |
-| size         | SizeT    | SizeT.NORMAL  | 形状                                                          |
-| disabled     | Boolean  | false         | 形状                                                          |
-| loading      | Boolean  | false         | 加载状态                                                      |
-| beforeChange | Function | ()=>true      | return Promise. resolve(true)继续切换，resolve(false)阻止切换 |
+| name         | type     | 默认值   | 说明                                                          |
+| :----------- | :------- | :------- | ------------------------------------------------------------- |
+| model:value  | boolean  | false    | 开关状态                                                      |
+| shape        | ShapeT   | 'normal' | 形状: large \| normal \| small                                |
+| size         | SizeT    | 'normal' | 形状 normal \| round                                          |
+| disabled     | boolean  | false    | 形状                                                          |
+| loading      | boolean  | false    | 加载状态                                                      |
+| beforeChange | function | ()=>true | return Promise. resolve(true)继续切换，resolve(false)阻止切换 |
 
-```
-enum SizeT {
-  LARGE = 'large',
-  NORMAL = 'normal',
-  SMALL = 'small'
-}
-
-enum ShapeT {
-  ROUND = 'round',
-  NORMAL = 'normal'
-}
-```
-
-# event
+## event
 
 | name   | 参数                      | 说明           |
 | :----- | :------------------------ | :------------- |
 | change | value: boolean; ev: Event | 选择切换后触发 |
 
-# expose
+## expose
 
-# slot
+## slot
diff --git a/packages/opendesign/src/components/_shared/constant.ts b/packages/opendesign/src/components/_shared/constant.ts
new file mode 100644
index 00000000..8f26d900
--- /dev/null
+++ b/packages/opendesign/src/components/_shared/constant.ts
@@ -0,0 +1 @@
+export const ProvideOptionKey = Symbol('option-provide');
diff --git a/packages/opendesign/src/components/_shared/global.ts b/packages/opendesign/src/components/_shared/global.ts
index e5603c89..cca90c63 100644
--- a/packages/opendesign/src/components/_shared/global.ts
+++ b/packages/opendesign/src/components/_shared/global.ts
@@ -1,11 +1,6 @@
 import { ref } from 'vue';
 
 // 尺寸
-export enum Size {
-  LARGE = 'large',
-  NORMAL = 'normal',
-  SMALL = 'small'
-}
 export type SizeT = 'large' | 'normal' | 'small'
 
 export const defaultSize = ref<SizeT>('normal');
@@ -15,10 +10,6 @@ export function initSize(type: SizeT) {
 }
 
 // 形状
-export enum Shape {
-  ROUND = 'round',
-  NORMAL = 'normal'
-}
 export type ShapeT = 'round' | 'normal'
 
 export const defaultShape = ref<ShapeT>('normal');
@@ -27,7 +18,6 @@ export function initShape(shape: ShapeT) {
   defaultShape.value = shape;
 }
 
-export const OptionProvideKey = 'option-provide';
 export interface OptionValueT {
   label: string;
   value: string | number;
diff --git a/packages/opendesign/src/components/_shared/utils.ts b/packages/opendesign/src/components/_shared/utils.ts
index 07591204..3e1e96c1 100644
--- a/packages/opendesign/src/components/_shared/utils.ts
+++ b/packages/opendesign/src/components/_shared/utils.ts
@@ -1,21 +1,21 @@
 import { throttle as _throttle, debounce as _debounce } from 'lodash-es';
 import type { ThrottleSettings, DebounceSettings } from 'lodash-es';
 
-export function isFunction(fn: any) {
+export function isFunction(fn: unknown) {
   return typeof fn === 'function';
 }
 // 防抖
-export function debounce<T extends (...args: any) => any>(fn: T, wait?: number, ctx?: any | null, opts?: ThrottleSettings) {
+export function debounce<T extends (...args: Array<unknown>) => unknown>(fn: T, wait?: number, ctx?: unknown | null, opts?: ThrottleSettings) {
   return _debounce.apply(ctx, [fn, wait, opts]);
 }
 // 节流
-export function throttle<T extends (...args: any) => any>(fn: T, wait?: number, ctx?: any | null, opts?: DebounceSettings) {
+export function throttle<T extends (...args: Array<unknown>) => unknown>(fn: T, wait?: number, ctx?: unknown | null, opts?: DebounceSettings) {
   return _throttle.apply(ctx, [fn, wait, opts]);
 }
 // 防抖 时间为一个一帧
-export function debounceRAF<T extends (...args: any) => any>(fn: T) {
+export function debounceRAF<T extends (...args: Array<unknown>) => any>(fn: T) {
   let handle = 0;
-  const rlt = (...args: any[]) => {
+  const rlt = (...args: Array<unknown>) => {
     if (handle) {
       cancelAnimationFrame(handle);
     }
@@ -31,9 +31,9 @@ export function debounceRAF<T extends (...args: any) => any>(fn: T) {
   return rlt;
 }
 // 节流 时间为一个一帧
-export function throttleRAF<T extends (...args: any) => any>(fn: T) {
+export function throttleRAF<T extends (...args: Array<unknown>) => unknown>(fn: T) {
   let handle = 0;
-  const rlt = (...args: any[]) => {
+  const rlt = (...args: Array<unknown>) => {
     if (handle) {
       return;
     }
diff --git a/packages/opendesign/src/components/button/OButton.vue b/packages/opendesign/src/components/button/OButton.vue
index e5e97e04..9e4d5334 100644
--- a/packages/opendesign/src/components/button/OButton.vue
+++ b/packages/opendesign/src/components/button/OButton.vue
@@ -4,8 +4,17 @@ import type { SizeT, ShapeT } from '../_shared/global';
 import { ButtonTypeT } from './types';
 
 interface ButtonPropT {
+  /**
+   * 按钮类型：'primary' | 'outline' | 'text' | 'link'
+   */
   type?: ButtonTypeT;
+  /**
+   * 按钮尺寸：'primary' | 'outline' | 'text' | 'link'
+   */
   size?: SizeT;
+  /**
+   * 按钮形状：'primary' | 'outline' | 'text' | 'link'
+   */
   shape?: ShapeT;
 }
 const props = withDefaults(defineProps<ButtonPropT>(), {
diff --git a/packages/opendesign/src/components/button/__demo__/BtnDisabled.vue b/packages/opendesign/src/components/button/__demo__/BtnDisabled.vue
index cd607a52..2239bec3 100644
--- a/packages/opendesign/src/components/button/__demo__/BtnDisabled.vue
+++ b/packages/opendesign/src/components/button/__demo__/BtnDisabled.vue
@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import { OButton } from '../index';
+const btnClick = () => {
+  alert('clicked');
+};
 </script>
 <template>
   <section>
-    <OButton type="primary" disabled>Primary Button</OButton>
+    <OButton type="primary" disabled @click="btnClick">Primary Button</OButton>
     <OButton type="outline" disabled>Outline Button</OButton>
     <OButton type="text" disabled>Text Button</OButton>
     <OButton type="link" disabled>Link Button</OButton>
diff --git a/packages/opendesign/src/components/link/OLink.vue b/packages/opendesign/src/components/link/OLink.vue
index e5e97e04..d1b22848 100644
--- a/packages/opendesign/src/components/link/OLink.vue
+++ b/packages/opendesign/src/components/link/OLink.vue
@@ -1,35 +1,56 @@
 <script setup lang="ts">
-import { defaultSize, defaultShape } from '../_shared/global';
-import type { SizeT, ShapeT } from '../_shared/global';
-import { ButtonTypeT } from './types';
+import { emit } from 'process';
 
-interface ButtonPropT {
-  type?: ButtonTypeT;
-  size?: SizeT;
-  shape?: ShapeT;
+interface LinkPropsT {
+  /**
+   * 包含超链接指向的 URL 或 URL 片段。
+   */
+  href?: string;
+  /**
+   * 指定在何处显示链接的资源。
+   */
+  target?: '_blank' | '_parent' | '_self' | '_top' | '';
+  /**
+   * 指定目标对象到链接对象的关系。
+   */
+  rel?:
+    | 'alternate'
+    | 'author'
+    | 'bookmark'
+    | 'external'
+    | 'help'
+    | 'license'
+    | 'next'
+    | 'nofollow'
+    | 'noreferrer'
+    | 'noopener'
+    | 'prev'
+    | 'search'
+    | 'tag'
+    | '';
+  disabled?: boolean;
+  icon?: boolean;
 }
-const props = withDefaults(defineProps<ButtonPropT>(), {
-  type: 'outline',
-  size: defaultSize.value,
-  shape: defaultShape.value,
+const props = withDefaults(defineProps<LinkPropsT>(), {
+  href: '',
+  target: '',
+  rel: '',
 });
+const emits = defineEmits<{ (e: 'click', val: MouseEvent): void }>();
+const onClick = (e: MouseEvent) => {
+  if (props.disabled) {
+    e.preventDefault();
+    return;
+  }
+  if (!props.href) {
+    e.preventDefault();
+  }
+  emits('click', e);
+};
 </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>
+  <a class="o-link" :href="props.href" :target="props.target" :rel="props.rel" v-bind="$attrs" :class="{ 'is-disabled': props.disabled }" @click="onClick">
+    <span class="o-link-icon"></span>
     <slot></slot>
-  </button>
+  </a>
 </template>
diff --git a/packages/opendesign/src/components/link/__demo__/IndexLink.vue b/packages/opendesign/src/components/link/__demo__/IndexLink.vue
index 80022ef7..ec0975a4 100644
--- a/packages/opendesign/src/components/link/__demo__/IndexLink.vue
+++ b/packages/opendesign/src/components/link/__demo__/IndexLink.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import '../style';
 import BtnIndex from './LinkDemo.vue';
 </script>
 <template>
diff --git a/packages/opendesign/src/components/link/__demo__/LinkDemo.vue b/packages/opendesign/src/components/link/__demo__/LinkDemo.vue
index cd607a52..73292fd4 100644
--- a/packages/opendesign/src/components/link/__demo__/LinkDemo.vue
+++ b/packages/opendesign/src/components/link/__demo__/LinkDemo.vue
@@ -1,12 +1,33 @@
 <script setup lang="ts">
-import { OButton } from '../index';
+import { ref } from 'vue';
+import { OLink } from '../index';
+
+const link = 'https://www.hiascend.com';
+
+const onLinkClick = (e: MouseEvent) => {
+  alert(`浮层${(e.target as HTMLElement).innerHTML}`);
+};
+
+const loading = ref(false);
+const onLinkClick2 = () => {
+  loading.value = true;
+  setTimeout(() => {
+    loading.value = false;
+  }, 3000);
+};
 </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>
+    <p>
+      这是一段文本中，掺杂了一些<OLink :href="link">链接</OLink>和<OLink :href="link">禁用的链接</OLink>，可以使用<OLink :href="link" target="_blank">
+        新页签打开的链接
+      </OLink>
+      ，当然也有<OLink :href="link" icon>图标链接</OLink>，这个<OLink :loading="loading" @click="onLinkClick2">链接</OLink>点击有loading效果，这个<OLink
+        @click="onLinkClick"
+      >
+        链接 </OLink
+      >点击会弹出弹窗。
+    </p>
   </section>
 </template>
 <style lang="scss"></style>
diff --git a/packages/opendesign/src/components/link/style/index.scss b/packages/opendesign/src/components/link/style/index.scss
index 878347d4..ed3d853b 100644
--- a/packages/opendesign/src/components/link/style/index.scss
+++ b/packages/opendesign/src/components/link/style/index.scss
@@ -1,140 +1,16 @@
 @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;
+.o-link {
   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);
-    }
+  color: var(--link-color);
+  &:hover {
+    color: var(--link-color_hover);
   }
-}
-
-.o-btn-link {
-  color: var(--btn-primary);
-  background-color: transparent;
-
-  &:not(:disabled) {
-    &:hover {
-      color: var(--btn-primary_hover);
-    }
-
-    &:active {
-      color: var(--btn-primary_active);
-    }
+  &:active {
+    color: var(--link-color_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;
+  &.is-disabled {
+    color: var(--link-color_disabled);
+    cursor: not-allowed;
   }
 }
-
-.o-btn-shape-round {
-  border-radius: var(--btn-height-l);
-}
diff --git a/packages/opendesign/src/components/link/style/var.scss b/packages/opendesign/src/components/link/style/var.scss
index ca8adcf1..215bfec4 100644
--- a/packages/opendesign/src/components/link/style/var.scss
+++ b/packages/opendesign/src/components/link/style/var.scss
@@ -1,25 +1,9 @@
-.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);
+.o-link {
+  --link-color: var(--o-color-primary1);
+  --link-color_hover: var(--o-color-primary2);
+  --link-color_active: var(--o-color-primary3);
+  --link-color_disabled: var(--o-color-info4);
+
+  --link-text-size: var(--o-font_size-text);
+  --link-text-height: var(--o-line_height-text);
 }
diff --git a/packages/opendesign/src/components/select/OSelect.vue b/packages/opendesign/src/components/select/OSelect.vue
index 73a767e4..7093cbbc 100644
--- a/packages/opendesign/src/components/select/OSelect.vue
+++ b/packages/opendesign/src/components/select/OSelect.vue
@@ -2,7 +2,7 @@
 import { provide, ref } from 'vue';
 import { defaultSize, defaultShape } from '../_shared/global';
 import type { SizeT, ShapeT } from '../_shared/global';
-import { OptionProvideKey } from '../_shared/global';
+import { ProvideOptionKey } from '../_shared/constant';
 import type { OptionValueT } from '../_shared/global';
 import { IconArrowTraingleDown } from '../icons';
 import { OPopup, PopupPositionT } from '../popup';
diff --git a/packages/portal/src/router.ts b/packages/portal/src/router.ts
index dc9e0338..a55adc35 100644
--- a/packages/portal/src/router.ts
+++ b/packages/portal/src/router.ts
@@ -14,6 +14,13 @@ export const routes = [
     label: '按钮',
     component: () => import('@demo/button/__demo__/IndexBtn.vue'),
   },
+  {
+    path: '/link',
+    name: 'Link',
+    label: '链接',
+    component: () => import('@demo/link/__demo__/IndexLink.vue'),
+  },
+
   {
     path: '/switch',
     name: 'Switch',
-- 
Gitee