Merge remote-tracking branch 'origin/main' into ls_tev

package.json

@@ -40,7 +40,9 @@
     "eslint-plugin-vue": "^6.2.2",
     "less": "^3.0.4",
     "less-loader": "^5.0.0",
+    "node-sass": "^4.14.1",
     "postcss": "^7.0.36",
+    "sass-loader": "^7.3.1",
     "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.4",
     "typescript": "~4.1.5",
     "vue-template-compiler": "^2.6.11"

src/components/common/search-bar.vue

 <template>
-  <div class="top-0 left-0 w-full py-1.5 flex items-center" :class="bgColor">
+  <div class="py-1.5 flex items-center" :class="bgColor">
     <div class="input-wrapper flex-1 relative">
       <app-icon
         icon-name="search-light"
@@ -10,7 +10,7 @@
           ref="c-search-input"
           type="search"
           class="py-2 rounded-full w-full pl-9"
-          :class="clearable ? 'pr-9' : 'pr-4'"
+          :class="getInputClass"
           :placeholder="placeholder"
           :value="value"
           @input="handleInput"
@@ -29,7 +29,7 @@
         />
       </div>
     </div>
-    <div class="right flex-shrink-0 ml-4">
+    <div class="right flex-shrink-0 ml-4" v-if="showCancel">
       <slot name='action'>
         <div @click="$emit('cancel')">取消</div>
       </slot>
@@ -59,7 +59,12 @@ export default Vue.extend({
       type: String,
       default: '请输入..'
     },
-    value: String
+    value: String,
+    showCancel: {
+      type: Boolean,
+      default: true
+    },
+    inputClass: String
   },
   data() {
     return  {
@@ -68,6 +73,11 @@ export default Vue.extend({
       showError: false
     }
   },
+  computed: {
+    getInputClass() {
+      return `${this.inputClass || ''} ${this.clearable ? 'pr-9' : 'pr-4'}`
+    }
+  },
   mounted() {
     (this.$refs['c-search-input'] as HTMLInputElement).focus()
   },

src/router/schedule.ts

@@ -59,6 +59,22 @@ export const scheduleRoutes: Array<RouteConfig> = [
         }
       },
       {
+        path: 'test',
+        name: 'Test',
+        component: () => import('@/views/schedule/test.vue'),
+        meta: {
+          title: 'Test'
+        }
+      },
+      {
+        path: 'file',
+        name: 'File',
+        component: () => import('@/views/schedule/file.vue'),
+        meta: {
+          title: '附件'
+        }
+      },
+      {
         path: 'speech-recognition',
         name: 'SpeechRecognition',
         component: () => import('@/views/schedule/speech-recognition.vue'),

src/views/client/search-result.vue

@@ -25,7 +25,7 @@
         <div
           slot="action"
           class="text-color-primary font-medium"
-          @click="$router.replace('/search-client')"
+          @click="$router.replace('/client/search-client')"
         >
           取消
         </div>

src/views/schedule/file.vue

+<template>
+  <!-- 附件 -->
+  <main-page
+    left-arrow
+    main-bg="bg-white"
+    header-bg="bg-white"
+    @click-left="$router.go(-1)"
+  >
+    <div
+      slot="right"
+      class="text-color-primary font-medium"
+      @click="select"
+    >
+      {{ checkBox ? '取消' : '选择' }}
+    </div>
+    <!-- <div class="sticky top-12 pt-2 px-4 bg-white">
+      <div class="input-wrapper relative">
+        <div class="absolute left-1 top-1/2 transform -translate-y-1/2">
+          <app-icon icon-name="search-light" />
+        </div>
+        <input
+          class="w-full rounded-full py-2 px-8 bg-common-bg"
+          placeholder="输入文件名、上传人昵称"
+          type="text"
+        >
+      </div>
+    </div> -->
+    <div class="pt-12 px-4 pb-4">
+      <search-bar
+        v-model="search"
+        :show-cancel="false"
+        placeholder="输入文件名、上传人昵称"
+        class="sticky top-12"
+        bg-color="bg-white"
+        input-class="bg-common-bg"
+        @search="handleSearch"
+      />
+      <div
+        v-for="f in files"
+        :key="f.id"
+        class="py-2.5 border-b flex items-center"
+        @click="handleSelect(f)"
+      >
+        <div class="mr-4" v-if="checkBox">
+          <app-icon
+            :icon-name="checked.indexOf(f.id) > -1 ? 'radio-checked' : 'radio'"
+            class-name="h-4 w-4"
+          />
+        </div>
+        <div class="flex items-center flex-1 overflow-hidden">
+          <app-icon
+            :icon-name="f.type"
+            class-name="h-15 w-15"
+          />
+          <div class="ml-2.5 flex-1 overflow-hidden">
+            <div class="title truncate">{{ f.fileName }}</div>
+            <div class="text-sm text-text-secondary">
+              <span class="">{{ f.time }}</span>
+              <span class="ml-5">{{ f.size }}</span>
+            </div>
+            <div class="text-sm font-medium text-text-secondary truncate">{{ f.uploader }}</div>
+          </div>
+        </div>
+      </div>
+      <!-- <div class="py-2.5 border-b flex items-center">
+        <div class="mr-4">
+          <app-icon
+            icon-name="radio"
+            class-name="h-4 w-4"
+          />
+        </div>
+        <div class="flex items-center flex-1 overflow-hidden">
+          <app-icon
+            icon-name="xlsx"
+            class-name="h-15 w-15"
+          />
+          <div class="ml-2.5 flex-1 overflow-hidden">
+            <div class="title truncate">文件名.xlsx</div>
+            <div class="text-sm text-text-secondary">
+              <span class="">2019/02/11</span>
+              <span class="ml-5">1.3MB</span>
+            </div>
+            <div class="text-sm font-medium text-text-secondary truncate">备注/昵称</div>
+          </div>
+        </div>
+      </div> -->
+    </div>
+  </main-page>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+
+interface File {
+  id: number,
+  fileName: string,
+  type: string,
+  size: string,
+  uploader: string,
+  time: string
+}
+
+const files: Array<File> = [
+  {
+    id: 1,
+    fileName: '文件名.xlsx',
+    type: 'xlsx',
+    size: '1.3MB',
+    uploader: '上传备注/昵称',
+    time: '2019/02/11'
+  },
+  {
+    id: 2,
+    fileName: '文件名文件名文件名文件名文件名文件名.docx',
+    type: 'docx',
+    size: '666.66KB',
+    uploader: '上传备注/昵称',
+    time: '2019/02/11'
+  }
+]
+
+export default Vue.extend({
+  name: "File",
+  components: {
+    'main-page': () => import('@/layout/main-page.vue'),
+    'app-icon': () => import('@/components/common/Icon.vue'),
+    'search-bar': () => import('@/components/common/search-bar.vue')
+  },
+  created() {
+    // console.log(Mock, 'mock')
+  },
+  data() {
+    const checked: Array<Number> = []
+    return {
+      files,
+      checked,
+      search: '',
+      checkBox: false
+    }
+  },
+  methods: {
+    handleSearch() {
+      console.log(this.search, 'kk')
+    },
+    select() {
+      this.checkBox = !this.checkBox
+      this.checked = this.checkBox ? this.checked : []
+    },
+    handleSelect(file: File) {
+      if (this.checkBox) {
+        // const index = this.checked.findIndex(id => id === file.id)
+        // if (index < 0) {
+        //   this.checked.push(file.id)
+        // } else {
+        //   this.checked.splice(index, 1)
+        // }
+        this.checked = [file.id]
+      }
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file

src/views/schedule/speech-recognition.vue

@@ -84,7 +84,7 @@ export default Vue.extend({
 <style lang="less" scoped>
 
   .larg{
-    animation:larg 2s linear infinite alternate ;
+    animation:larg 1s linear infinite alternate ;
   }
   .long{
     animation:long 1s linear infinite alternate;

src/views/schedule/test.vue

@@ -5,7 +5,35 @@
     @click-left="$router.go(-1)"
   >
     <div class="pt-14 px-4">
-      Test
+      <div class="h-80 w-80 mx-auto flex items-center justify-center relative border rounded-full border-text-extreme-light">
+        <div class="h-64 w-64 relative">
+          <div class="line-wrapper relative">
+            <div
+              v-for="i of 6"
+              :key="i"
+              class="h-64 w-px bg-schedule-timeline line"
+              :class="`line-${i}`"
+            />
+          </div>
+          <div class="h-56 w-56 bg-common-bg rounded-full center" />
+          <div class="h-48 w-48 border center rounded-full flex items-center justify-center">
+            Time
+          </div>
+        </div>
+        <div class="absolute top-0 right-0 w-40 h-40">
+          <div class="h-full w-full overflow-hidden relative">
+            <div class="h-full w-full circle xxx absolute top-0 left-0"></div>
+            <div class="h-full w-full circle yyy absolute top-0 left-0"></div>
+            <div class="h-full w-full circle zzz absolute -top-px left-px"></div>
+          </div>
+        </div>
+        <div class="absolute top-0 right-0 w-40 h-40 zzz">
+          <div class="h-full w-full overflow-hidden relative">
+            <div class="h-full w-full circle xxx absolute top-0 left-0"></div>
+            <div class="h-full w-full circle yyy absolute top-0 left-0"></div>
+          </div>
+        </div>
+      </div>
     </div>
   </main-page>
 </template>
@@ -27,4 +55,50 @@ export default Vue.extend({
 </script>
 
 <style lang="scss" scoped>
+
+@mixin center {
+  left: 50%;
+  top: 50%;
+  position: absolute;
+  transform: translate(-50%,-50%)
+}
+
+.center {
+  @include center;
+}
+
+.line {
+  position: absolute;
+  left: 50%;
+}
+
+@for $i from 1 to 6 {
+  .line-#{$i} {
+    transform: rotate(30deg * $i) translateX(-50%);
+  }
+}
+
+.circle {
+  border: solid;
+  border-width: 8px 8px 0 0;
+  border-top-right-radius: 400px;
+  transform-origin: bottom left;
+  &.xxx {
+    border-color: green;
+  }
+  &.yyy {
+    border-color: blue;
+    transform: rotate(18deg)
+  }
+  &.zzz {
+    border-width: 10px 10px 0 0;
+    border-color: #f6f7f8;
+    transform: rotate(45deg)
+  }
+}
+
+.zzz {
+  transform-origin: bottom left;
+  transform: rotate(-115deg)
+}
 </style>
\ No newline at end of file