Dev iview UI

.gitignore

@@ -4,6 +4,7 @@
 .vscode
 .DS_Store
 
+.env
 # ignore file
 taskman-server/taskman-server
 taskman-server/logs

taskman-ui/src/App.vue

@@ -1,13 +1,24 @@
 <template>
   <div id="app">
     <div class="app-content-container">
-      <BackTop :height="100" :bottom="100" />
+      <BackTop :height="100" :bottom="100">
+        <div class="w-back-top">
+          <img :src="fesUpIcon" style="width: 24px;"/>
+
+        </div>
+      </BackTop>
       <router-view />
     </div>
   </div>
 </template>
 <script>
+import fesUpIcon from '@/images/icon/fes_up.svg'
 export default {
+  data () {
+    return {
+      fesUpIcon
+    }
+  },
   methods: {
     jump (path) {
       this.$router.push({ path: path })
@@ -20,19 +31,33 @@ export default {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-  color: #2c3e50;
+  color: #0F1222; // Fes字体颜色规范
   height: 100%;
   min-width: 1280px;
 
   .app-content-container {
     height: 100%;
+
+    .w-back-top {
+      width: 44px;
+      height: 44px;
+      background-color: #fff;
+      border-radius: 22px;
+      box-shadow: 0 2px 8px 0 rgba(15, 18, 34, 0.1);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      &:hover {
+        background-color: #f5f8ff;
+      }
+    }
   }
 }
 #nav {
   padding: 30px;
   a {
     font-weight: bold;
-    color: #2c3e50;
+    color: #0F1222; // Fes字体颜色规范
     &.router-link-exact-active {
       color: #42b983;
     }

taskman-ui/src/main-plugin.js

@@ -1,7 +1,7 @@
 import 'regenerator-runtime/runtime'
 import router from './router-plugin'
 import routerP from './router-plugin-p'
-import 'view-design/dist/styles/iview.css'
+
 // import './locale/i18n'
 import zhCN from '@/locale/i18n/zh-CN.json'
 import enUS from '@/locale/i18n/en-US.json'

taskman-ui/src/main.js

@@ -3,8 +3,10 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import ViewUI from 'view-design'
-import 'view-design/dist/styles/iview.css'
 import VueI18n from 'vue-i18n'
+
+import './styles/index.less'
+
 import { i18n } from './locale/i18n/index.js'
 import viewDesignEn from 'view-design/dist/locale/en-US'
 import viewDesignZh from 'view-design/dist/locale/zh-CN'

taskman-ui/src/pages/components/base-search.vue

@@ -98,8 +98,9 @@
                 v-model="value[i.key]"
                 @on-change="handleSearch"
                 style="margin-right:32px;"
+                button-style="solid"
               >
-                <Radio v-for="(j, idx) in i.list" :label="j.value" :key="idx" border>{{ j.label }}</Radio>
+                <Radio v-for="(j, idx) in i.list" :label="j.value" :key="idx">{{ j.label }}</Radio>
               </RadioGroup>
               <!--自定义时间选择器-->
               <div v-else-if="i.component === 'custom-time'" class="custom-time">
@@ -110,8 +111,10 @@
                   type="button"
                   size="small"
                   style="margin-top:-2px;"
+                button-style="solid"
+
                 >
-                  <Radio v-for="(j, idx) in dateTypeList" :label="j.value" :key="idx" border>{{ j.label }}</Radio>
+                  <Radio v-for="(j, idx) in dateTypeList" :label="j.value" :key="idx">{{ j.label }}</Radio>
                 </RadioGroup>
                 <div v-else>
                   <DatePicker

taskman-ui/src/styles/alert.less

@@ -0,0 +1,40 @@
+@alert-prefix-cls: ~"@{css-prefix}alert";
+@icon-prefix-cls: ~"@{css-prefix}icon";
+
+.@{alert-prefix-cls}{
+
+    &-success {
+        border: @border-width-base @border-style-base @success-color;
+        background-color: fade(@success-color, 6);
+        color: @success-color;
+    }
+
+    &-info {
+        border: @border-width-base @border-style-base @primary-color;
+        background-color: fade(@primary-color, 6);
+        color: @primary-color;
+    }
+
+    &-warning {
+        border: @border-width-base @border-style-base @warning-color;
+        background-color: fade(@warning-color, 6);
+        color: @warning-color;
+    }
+
+    &-error {
+        border: @border-width-base @border-style-base @error-color;
+        background-color: fade(@error-color, 6);
+        color: @error-color;
+    }
+
+
+    &-with-desc &-desc{
+        color: inherit;
+        opacity: 0.45;
+    }
+
+    &-with-desc &-message {
+        color: inherit;
+    }
+
+}

taskman-ui/src/styles/checkbox.less

@@ -0,0 +1,3 @@
+.ivu-checkbox .ivu-checkbox-inner:after {
+  border-width: 1px;
+}

taskman-ui/src/styles/collapse.less

@@ -0,0 +1,14 @@
+@collapse-prefix-cls: ~"@{css-prefix}collapse";
+
+.@{collapse-prefix-cls}{
+
+
+    & > &-item{
+
+        > .@{collapse-prefix-cls}-header{
+
+            color: @text-color;
+
+        }
+    }
+}

taskman-ui/src/styles/custom.less

@@ -0,0 +1,52 @@
+// Color
+@primary-color          : #5384FF;
+
+@success-color          : #00CB91;
+@processing-color       : @primary-color;
+@warning-color          : #F29360;
+@error-color            : #FF4D4F;
+
+// Base
+
+@text-color             : #0F1222;
+@link-color             : #5384FF;
+
+
+
+// Border color
+@border-color-base      : #CFD0D3;  // outside
+@border-color-split     : #F0F0F0;  // inside
+
+// Background color
+@background-color-base        : rgba(@text-color, 0.03);  // base
+@background-color-select-hover: fade(@primary-color, 6%);
+@tooltip-bg                   : rgba(@text-color, .7);
+
+@table-thead-bg               : #F7F7F8;
+@table-td-stripe-bg           : #f8f8f9;
+@table-td-hover-bg            : #F3F7FF;  
+@table-td-highlight-bg        : #ebf7ff;
+
+
+// Shadow
+@shadow-color           : rgba(#0F1222, 0.1);
+@shadow-base            : @shadow-card;
+@shadow-card            : 0 2px 12px 0 @shadow-color;
+@shadow-up              : 0 -1px 6px @shadow-color;
+@shadow-down            : 0 1px 6px @shadow-color;
+@shadow-left            : -1px 0 6px @shadow-color;
+@shadow-right           : 1px 0 6px @shadow-color;
+
+
+// Button
+
+
+@btn-disable-color      : rgba(@text-color, 0.3);;
+
+// Input
+
+@input-disabled-bg           : fade(@text-color, 3);
+
+// Slider
+@slider-color              : @primary-color;
+@slider-disabled-color     : #B7B7BC;

taskman-ui/src/styles/index.less

@@ -0,0 +1,20 @@
+
+// @import '~view-design/src/styles/index.less';
+
+@import '~view-design/src/styles/index.less';
+@import './custom.less';
+@import './checkbox.less';
+@import './select.less';
+@import './switch.less';
+@import './input.less';
+@import './message.less';
+@import './modal.less';
+@import './slider.less';
+@import './alert.less';
+@import './table.less';
+@import './collapse.less';
+@import './menu.less';
+@import './page.less';
+
+
+

taskman-ui/src/styles/input.less

@@ -0,0 +1,27 @@
+.hover(@color: @input-hover-border-color) {
+    border-color: @color;
+}
+.hover-error() {
+    border-color: @error-color;
+}
+
+.active(@color: @input-hover-border-color) {
+    border-color: @color;
+    outline: 0;
+    box-shadow: 0 0 0 2px fade(@color, 20%);
+}
+.active-error() {
+    border-color: @error-color;
+    outline: 0;
+    box-shadow: 0 0 0 2px fade(@error-color, 20%);
+}
+
+.disabled() {
+    background-color: @input-disabled-bg;
+    opacity: 1;
+    cursor: @cursor-disabled;
+    color: #ccc;
+    &:hover {
+        .hover(@input-border-color);
+    }
+}

taskman-ui/src/styles/menu.less

@@ -0,0 +1,11 @@
+@menu-prefix-cls: ~"@{css-prefix}menu";
+@menu-dropdown-item-prefix-cls: ~"@{menu-prefix-cls}-horizontal .@{menu-prefix-cls}-submenu .@{select-dropdown-prefix-cls} .@{menu-prefix-cls}-item";
+
+.@{menu-prefix-cls} {
+    &-item{
+      &:hover {
+        text-decoration: none;
+        color: @primary-color;
+      }
+    }
+}

taskman-ui/src/styles/message.less

@@ -0,0 +1,24 @@
+@message-prefix-cls: ~"@{css-prefix}message";
+@icon-prefix-cls: ~"@{css-prefix}icon";
+
+.@{message-prefix-cls} {
+
+    &-success {
+        color: @success-color;
+    }
+
+    &-error {
+        color: @error-color;
+    }
+
+    &-warning {
+        color: @warning-color;
+    }
+
+    &-info,
+    &-loading {
+        color: @primary-color;
+    }
+
+
+}

taskman-ui/src/styles/modal.less

@@ -0,0 +1,23 @@
+@modal-prefix-cls: ~"@{css-prefix}modal";
+@confirm-prefix-cls: ~"@{css-prefix}modal-confirm";
+
+.@{modal-prefix-cls} {
+
+
+
+
+
+    &-header {
+        border-bottom: none;
+        padding-left: 24px;
+    }
+
+
+    &-footer {
+        border-top: none;
+        padding: 12px 24px 24px 18px;
+    }
+}
+
+
+

taskman-ui/src/styles/page.less

@@ -0,0 +1,20 @@
+@page-prefix-cls: ~"@{css-prefix}page";
+
+.@{page-prefix-cls} {
+
+
+    &-item {
+
+
+        &-active {
+            border-color: @primary-color;
+            background-color: @primary-color;
+            a, &:hover a {
+                color: #fff !important;
+            }
+        }
+    }
+
+
+}
+

taskman-ui/src/styles/select.less

@@ -0,0 +1,18 @@
+@select-prefix-cls: ~"@{css-prefix}select";
+@select-item-prefix-cls: ~"@{css-prefix}select-item";
+@select-group-prefix-cls: ~"@{css-prefix}select-group";
+
+.@{select-prefix-cls} {
+    &-disabled {
+        .@{select-prefix-cls}-selection {
+          color: @border-color-base;
+          background-color: rgba(@text-color, 0.03);
+        }
+    }
+}
+
+
+
+
+
+