DevCloudFE · wangyaju · Jul 27, 2020 · Jul 27, 2020
diff --git a/devui/accordion/AccordionBaseComponent.ts b/devui/accordion/AccordionBaseComponent.ts
diff --git a/devui/accordion/accordion.component.html b/devui/accordion/accordion.component.html
@@ -1 +1,8 @@
-<d-accordion-list class="devui-accordion-menu devui-scrollbar" [data]="data" [deepth]="0" [parent]="null"> </d-accordion-list>
+<d-accordion-list
+  class="devui-accordion-menu devui-scrollbar"
+  [ngClass]="{ 'devui-accordion-menu-normal': accordionType === 'normal' }"
+  [data]="data"
+  [deepth]="0"
+  [parent]="null"
+>
+</d-accordion-list>
diff --git a/devui/accordion/accordion.component.scss b/devui/accordion/accordion.component.scss
@@ -17,12 +17,15 @@
 :host ::ng-deep .devui-accordion-menu {
   display: block;
   background: $bg-white;
-  box-shadow: 0 2px 4px 0 $dark-1-boxshadow;
   width: 100%;
   overflow-y: auto;
   border-radius: 2px;
   height: 100%;
 
+  &.devui-accordion-menu-normal {
+    box-shadow: 0 2px 4px 0 $dark-1-boxshadow;
+  }
+
   & > .devui-accordion-list {
     padding: 10px 0;
   }

diff --git a/devui/accordion/accordion.component.ts b/devui/accordion/accordion.component.ts
@@ -41,6 +41,8 @@ export class AccordionComponent implements AccordionOptions, OnChanges, OnInit,
   @Input() linkTargetKey = 'target'; // 链接目标窗口的key
   @Input() linkDefaultTarget = '_self'; // 不设置target的时候target默认值
 
+  @Input() accordionType: 'normal' | 'embed' = 'normal';
+
   activeItem; // 记录用户点击的激活菜单项
   i18nCommonText: I18nInterface['common'];
   i18nSubscription: Subscription;

diff --git a/devui/accordion/demo/basic/basic.component.html b/devui/accordion/demo/basic/basic.component.html
@@ -4,5 +4,8 @@
   [restrictOneOpen]="restrictOneOpen"
   (itemClick)="itemClick($event)"
   (menuToggle)="menuToggle($event)"
+  (activeItemChange)="log($event)"
+  [accordionType]="accordionTypeEmbed ? 'embed' : 'normal'"
 ></d-accordion>
 <div class="option"><d-toggle [(ngModel)]="restrictOneOpen"></d-toggle> 限制只能展开一个一级菜单</div>
+<div class="option"><d-toggle [(ngModel)]="accordionTypeEmbed"></d-toggle> 内嵌菜单形式（无阴影）</div>
diff --git a/devui/accordion/demo/basic/basic.component.ts b/devui/accordion/demo/basic/basic.component.ts
@@ -7,6 +7,7 @@ import { Component } from '@angular/core';
 })
 export class BasicComponent {
   restrictOneOpen = false;
+  accordionTypeEmbed = false;
   menu = [{
     title: '内容一',
     children: [
@@ -63,5 +64,8 @@ export class BasicComponent {
       }, 1000);
     }
   }
+  log(...v) {
+    console.log(...v);
+  }
 
 }
diff --git a/devui/accordion/demo/link/link.component.html b/devui/accordion/demo/link/link.component.html
@@ -4,7 +4,7 @@
 </div>
 <div class="menu-wrapper">
   <div>原生超链接（涉及跨站场景使用）</div>
-  <d-accordion [data]="menu2" class="menu" [linkType]="'hrefLink'"></d-accordion>
+  <d-accordion [data]="menu2" class="menu" [linkType]="'hrefLink'" [linkDefaultTarget]="'_self'"></d-accordion>
 </div>
 <div class="menu-wrapper">
   <div>混合链接（部分涉及跨站场景使用）</div>

diff --git a/devui/accordion/doc/api.md b/devui/accordion/doc/api.md
diff --git a/devui/alert/alert.component.html b/devui/alert/alert.component.html
@@ -25,29 +25,18 @@
       version="1.1"
       xmlns="http://www.w3.org/2000/svg"
       xmlns:xlink="http://www.w3.org/1999/xlink"
-      *ngIf="type === 'success'"
-      class="devui-icon devui-icon-success"
+      class="devui-icon"
+      [ngClass]="type === 'danger'? 'devui-icon-error': 'devui-icon-' + type"
     >
-      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+      <g *ngIf="type === 'success'" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <path fill-rule="nonzero" d="M8,0 C3.6,0 0,3.6 0,8 C0,12.4 3.6,16 8,16 C12.4,16 16,12.4 16,8 C16,3.6 12.4,0 8,0 Z"></path>
         <polygon
           stroke-width="0.3"
           fill-rule="nonzero"
           points="6.82767602 11.5282799 3 7.24668779 3.89864233 6.37912367 6.82767602 9.04910002 12.2964408 4 13 4.64144383"
         ></polygon>
       </g>
-    </svg>
-    <svg
-      width="16px"
-      height="16px"
-      viewBox="0 0 16 16"
-      version="1.1"
-      xmlns="http://www.w3.org/2000/svg"
-      xmlns:xlink="http://www.w3.org/1999/xlink"
-      *ngIf="type === 'warning'"
-      class="devui-icon devui-icon-warning"
-    >
-      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+      <g *ngIf="type === 'warning'" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <path
           class="devui-icon-warning-outer"
           d="M8.96244623,0.57254229 L15.8714442,13.4101975 C16.1549662,13.9370117 15.9538562,14.5918482 15.4222523,14.8728158 C15.2642579,14.9563203 15.0879506,15 14.9088903,15 L1.09089441,15 C0.488410063,15 0,14.5159904 0,13.9189343 C0,13.7414873 0.0440768395,13.5667684 0.128340519,13.4101975 L7.03733844,0.57254229 C7.32086049,0.0457280838 7.98165058,-0.153569987 8.51325441,0.127397589 C8.70423071,0.228333932 8.8605922,0.383286648 8.96244623,0.57254229 Z"
@@ -59,18 +48,7 @@
           d="M8.87894737,13 L7.08947368,13 L7.08947368,11.2105263 L8.87894737,11.2105263 L8.87894737,13 Z M8.62102372,9.86842105 L7.32800539,9.86842105 L7,4.5 L8.96842105,4.5 L8.62102372,9.86842105 Z"
         ></path>
       </g>
-    </svg>
-    <svg
-      width="16px"
-      height="16px"
-      viewBox="0 0 16 16"
-      version="1.1"
-      xmlns="http://www.w3.org/2000/svg"
-      xmlns:xlink="http://www.w3.org/1999/xlink"
-      *ngIf="type === 'info'"
-      class="devui-icon devui-icon-info"
-    >
-      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+      <g *ngIf="type === 'info'" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g fill-rule="nonzero">
           <path
             class="devui-icon-info-outer"
@@ -83,18 +61,7 @@
           ></path>
         </g>
       </g>
-    </svg>
-    <svg
-      width="16px"
-      height="16px"
-      viewBox="0 0 16 16"
-      version="1.1"
-      xmlns="http://www.w3.org/2000/svg"
-      xmlns:xlink="http://www.w3.org/1999/xlink"
-      *ngIf="type === 'danger'"
-      class="devui-icon devui-icon-error"
-    >
-      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+      <g *ngIf="type === 'danger'" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g fill-rule="nonzero">
           <path
             class="devui-icon-error-outer"

diff --git a/devui/alert/alert.component.ts b/devui/alert/alert.component.ts
@@ -26,9 +26,6 @@ export class AlertComponent {
 
   hide = false;
 
-  constructor() {
-  }
-
   close() {
     this.closeEvent.emit(this);
     this.hide = true;

diff --git a/devui/alert/alert.spec.ts b/devui/alert/alert.spec.ts
@@ -7,7 +7,7 @@ import { doesNotThrow } from 'assert';
 @Component({
   template: `
   <d-alert [type]="type" [showIcon]= "showIcon" (closeEvent)="handleClose($event)" [cssClass]="cssClass">
-    <span>成功。</span>
+    <span>成功。devcloud一站式云端DevOps平台。</span>
   </d-alert>
   `
 })
@@ -59,7 +59,7 @@ describe('alert', () => {
       });
 
       it('Alert should have content', () => {
-        expect(alertElement.querySelector('.devui-alert').textContent).toBe('成功。');
+        expect(alertElement.querySelector('.devui-alert').textContent).toBe('成功。devcloud一站式云端DevOps平台。');
       });
     });
     describe('alert type', () => {

diff --git a/devui/anchor/anchor-link.directive.ts b/devui/anchor/anchor-link.directive.ts
@@ -72,13 +72,17 @@ export class AnchorLinkDirective implements OnInit, OnDestroy {
     };
     ((container: Element, anchor: Element) => {
       let containerScrollTop = container.scrollTop;
+      let containerOffsetTop = container.getBoundingClientRect().top;
       if (container === document.documentElement) {
-        containerScrollTop += document.body.scrollTop;
+        containerScrollTop += document.body.scrollTop; // scrollTop兼容性问题
+        containerOffsetTop = 0; // offsettop抵消
       }
       this.scrollAnimate(
         container,
         containerScrollTop,
-        (containerScrollTop + anchor.getBoundingClientRect().top - (this.boxElement.view && this.boxElement.view.top || 0)),
+        (containerScrollTop + anchor.getBoundingClientRect().top
+        - containerOffsetTop
+        - (this.boxElement.view && this.boxElement.view.top || 0)),
         undefined, undefined, callback
       );
     })( this.boxElement.scrollTarget || document.documentElement, this.anchorBlock.element);

diff --git a/devui/anchor/demo/anchor-demo.component.html b/devui/anchor/demo/anchor-demo.component.html
@@ -19,6 +19,17 @@
       <d-anchor-async demo></d-anchor-async>
     </d-codebox>
   </div>
+
+  <div class="demo-example" [dAnchor]="'scroll-target'">
+    <div class="demo-title">更换滚动容器</div>
+    <div class="demo-text">
+      通过scrollTarget更换滚动容器
+    </div>
+    <d-codebox id="components-tabs-scroll-target" [sourceData]="ScrollTargetSource">
+      <d-anchor-scroll-target demo></d-anchor-scroll-target>
+    </d-codebox>
+  </div>
+
   <div class="demo-example" [dAnchor]="'support-hash'">
     <div class="demo-title">支持url锚点</div>
     <div class="demo-text">

diff --git a/devui/anchor/demo/anchor-demo.component.ts b/devui/anchor/demo/anchor-demo.component.ts
@@ -23,13 +23,18 @@ export class AnchorDemoComponent {
     {title: 'CSS', language: 'css', code:  require('!!raw-loader!./hash/hash.component.css')}
   ];
 
+  ScrollTargetSource: Array<DevuiSourceData> = [
+    {title: 'HTML', language: 'xml', code:  require('!!raw-loader!./scroll-target/scroll-target.component.html')},
+    {title: 'TS', language: 'typescript', code:  require('!!raw-loader!./scroll-target/scroll-target.component.ts')},
+    {title: 'CSS', language: 'css', code:  require('!!raw-loader!./scroll-target/scroll-target.component.css')}
+  ];
+
+
   navItems = [
     { dAnchorLink: 'basic-usage', value: '基本用法'},
     { dAnchorLink: 'asynchronous-loading', value: '异步加载'},
+    { dAnchorLink: 'scroll-target', value: '更换滚动容器'},
     { dAnchorLink: 'support-hash', value: '支持url锚点'}
   ];
 
-  constructor() {
-
-  }
 }
diff --git a/devui/anchor/demo/anchor-demo.module.ts b/devui/anchor/demo/anchor-demo.module.ts
@@ -15,12 +15,15 @@ import { ButtonModule } from 'ng-devui/button';
 import { StickyModule } from 'ng-devui/sticky';
 import { DDemoNavModule } from 'src/app/component/d-demo-nav.module';
 import { HashComponent } from './hash/hash.component';
+import { ToggleModule } from 'ng-devui/toggle';
+import { ScrollTargetComponent } from './scroll-target/scroll-target.component';
 
 @NgModule({
   imports: [
     CommonModule,
     FormsModule,
     ButtonModule,
+    ToggleModule,
     StickyModule,
     AnchorModule,
     DevUICodeboxModule,
@@ -39,7 +42,8 @@ import { HashComponent } from './hash/hash.component';
     AnchorDemoComponent,
     BasicComponent,
     AsyncComponent,
-    HashComponent
+    HashComponent,
+    ScrollTargetComponent
   ],
   entryComponents: [
     AnchorDemoComponent,

diff --git a/devui/anchor/demo/async/async.component.ts b/devui/anchor/demo/async/async.component.ts
@@ -8,6 +8,4 @@ import { Component} from '@angular/core';
 export class AsyncComponent {
   loadMenu = false;
   loadContent = false;
-  constructor() { }
-
 }
diff --git a/devui/anchor/demo/basic/basic.component.ts b/devui/anchor/demo/basic/basic.component.ts
@@ -6,7 +6,4 @@ import { Component } from '@angular/core';
   styleUrls: ['./basic.component.css']
 })
 export class BasicComponent {
-  constructor() {
-
-  }
 }
diff --git a/devui/anchor/demo/hash/hash.component.css b/devui/anchor/demo/hash/hash.component.css
@@ -6,57 +6,56 @@
 
 .step-nav > li {
   list-style: none;
-  counter-increment: stepli;
   padding: 0;
   cursor: pointer;
   height: 30px;
-  line-height: 30px;
-  font-size: 14px;
+  line-height: 1.5;
+  font-size: 12px;
   color: #5e6678;
   position: relative;
+  display: flex;
+  align-items: center;
 }
 
 .step-nav > li:hover {
-  color: #405dff;
+  color: #526ecc;
 }
 
 .step-nav > li.active {
-  color: #5170ff;
+  color: #526ecc;
+}
+
+.step-nav > li.active::before {
+  border-color: #526ecc;
 }
 
 .step-nav > li::before {
-  content: counter(stepli);
+  content: '';
   display: inline-block;
-  width: 30px;
-  height: 30px;
+  width: 12px;
+  height: 12px;
   text-align: center;
   line-height: 26px;
   border-radius: 50%;
   background-color: #ffffff;
-  color: #5170ff;
-  margin-right: 10px;
-  border: 2px solid #5170ff;
-}
-
-.step-nav > li.active::before {
-  background-color: #5170ff;
-  color: #ffffff;
+  margin-right: 18px;
+  border: 2px solid #dfe1e6;
 }
 
 /* 左侧线 */
 .step-nav > li:not(:first-of-type) {
-  margin-top: 30px;
+  margin-top: 32px;
 }
 
 .step-nav > li:not(:first-of-type)::after {
   content: '';
   display: block;
   position: absolute;
-  top: -30px;
-  left: 15px;
+  top: -32px;
+  left: 5px;
   width: 1px;
-  height: 30px;
-  border-left: 1px solid #5170ff;
+  height: 32px;
+  border-left: 2px solid #dfe1e6;
 }
 
 .mymain {
@@ -116,3 +115,12 @@
     outline: invert none medium;
   }
 }
+
+.option {
+  height: 40px;
+}
+
+.option > d-toggle {
+  display: inline-block;
+  vertical-align: middle;
+}