vue2-client 1.8.65 → 1.8.67

package/src/pages/DynamicStatistics/QuestionHistoryAndFavorites.vue

@@ -1,280 +1,280 @@
-<template>
-  <a-card class="question-history" id="question-history" size="small" :bordered="false" :bodyStyle="{ height:'100%', overflowY: 'auto'}">
-    <a-tabs v-model="activeKey" :tabBarStyle="{ textAlign: 'center',height:'100%',postion:'' }" tabPosition="top">
-      <a-tab-pane key="1" tab="对话历史">
-        <a-list item-layout="horizontal" :data-source="questions">
-          <a-list-item
-            slot="renderItem"
-            :class="item.uuid === currentuuid ? 'question-history-active' : 'question-history-inactive'"
-            slot-scope="item,index"
-            @click="handleOpenFavorite(item)">
-            <a-list-item-meta
-              :title="item.question"
-              :description="item.date"
-            />
-            <a-space>
-              <a-icon
-                type="delete"
-                theme="filled"
-                class="delClass"
-                @click.stop="delQuestion(item,index)"
-              />
-              <span>&emsp;</span>
-              <a-icon
-                v-if="item.data"
-                type="star"
-                :class="item.isFavorite ? 'startActive' : 'startInactive'"
-                @click.stop="toFavorites(item,index)"
-                :theme=" item.isFavorite ? 'filled': 'twoTone'"
-                two-tone-color="#FFD700"/>
-              <a-icon
-                v-else
-                @click.stop="reTrySearch(item)"
-                type="sync"
-                class="reSearch"
-                title="重新查询"/>
-            </a-space>
-          </a-list-item>
-        </a-list>
-      </a-tab-pane>
-      <a-tab-pane key="2" tab="收藏的对话" force-render>
-        <a-list item-layout="horizontal" :data-source="favorites">
-          <a-list-item
-            slot="renderItem"
-            slot-scope="item, index"
-            :class="item.uuid === currentuuid ? 'question-history-active' : 'question-history-inactive'"
-            @click="handleOpenFavorite(item)">
-            <a-list-item-meta
-              :title="item.question"
-              :description="item.date"
-            />
-            <a-space>
-              <a-icon
-                type="star"
-                :class="item.isFavorite ? 'startActive' : 'startInactive'"
-                @click.stop="delFavorites(item,index)"
-                :theme=" item.isFavorite ? 'filled': 'twoTone'"
-                two-tone-color="#FFD700"/>
-            </a-space>
-          </a-list-item>
-        </a-list>
-      </a-tab-pane>
-    </a-tabs>
-  </a-card>
-</template>
-
-<script>
-import { indexedDB } from '@vue2-client/utils/indexedDB'
-import { formatDate } from '@vue2-client/utils/util'
-
-export default {
-  props: {
-    currentuuid: {
-      type: String,
-      default: ''
-    }
-  },
-  data () {
-    return {
-      activeKey: '1',
-      questions: [], // 你的问题历史
-      favorites: [] // 你的收藏问题
-    }
-  },
-  mounted () {
-    this.loadData()
-  },
-  methods: {
-    loadData () {
-      indexedDB.getAll((data) => {
-          // 遍历data，将question和favorites分别赋值给questions和favorites
-          for (const datum of data) {
-            if (datum.key.includes('question')) {
-              this.questions.push(datum.data)
-            } else if (datum.key.includes('favorites')) {
-              this.favorites.push(datum.data)
-            }
-          }
-        }
-      )
-    },
-    handleOpenFavorite (item) {
-      this.$emit('handleOpenFavorite', item)
-    },
-    reTrySearch (item) {
-      this.$emit('handleSearch', item.question, null, item.uuid)
-    },
-    add (question) {
-      // 检查 questions 数组中是否已经存在这个问题 替换掉
-      const index = this.questions.findIndex(item => item.uuid === question.uuid)
-      if (index !== -1) {
-        if (question.data) {
-          this.questions.splice(index, 1, Object.assign(question, { date: this.questions[index].date }))
-        } else {
-          this.questions.splice(index, 1, question)
-        }
-        this.updateQuestion(question)
-        return
-      }
-      this.questions.push(question)
-      indexedDB.add('question-' + question.uuid, question)
-    },
-    updateQuestion (question) {
-      const questionKey = 'question-' + question.uuid
-      indexedDB.delete(questionKey)
-      indexedDB.add(questionKey, question)
-    },
-
-    toFavorites (question, index) {
-      this.questions[index].isFavorite = !this.questions[index].isFavorite
-      if (this.questions[index].isFavorite) {
-        const key = 'favorites-' + question.uuid
-        question.date = formatDate('now')
-        question.isFavorite = true
-        indexedDB.add(key, question)
-        this.favorites.push(question)
-        this.$message.success('收藏成功')
-      } else {
-        // 根据 uuid 删除 favorites 中的对应项
-        this.favorites = this.favorites.filter(item => item.uuid !== question.uuid)
-        // 删除收藏的储存
-        const key = 'favorites-' + question.uuid
-        indexedDB.delete(key)
-      }
-      this.updateQuestion(question)
-    },
-    delQuestion (item, index) {
-      // 删除对话历史
-      this.questions.splice(index, 1)
-      const key = 'question-' + item.uuid
-      indexedDB.delete(key)
-      // 删除收藏
-      const favoritesKey = 'favorites-' + item.uuid
-      indexedDB.delete(favoritesKey)
-      // 删除收藏数组中的对应项
-      this.favorites = this.favorites.filter(favorite => favorite.uuid !== item.uuid)
-      this.$message.success('删除成功')
-    },
-    delFavorites (item, index) {
-      this.favorites.splice(index, 1)
-      // 根据uuid寻找 questions 中的对应项
-      // 重新赋值给 questions
-      this.questions = this.questions.map(_item => {
-        if (_item.uuid === item.uuid) {
-          _item.isFavorite = false
-        }
-        return _item
-      })
-      const key = 'favorites-' + item.uuid
-      indexedDB.delete(key)
-      this.$message.success('取消收藏成功')
-      // 如果favorites为空，切换到对话历史
-      if (this.favorites.length === 0) {
-        this.activeKey = '1'
-      }
-      this.updateQuestion(item)
-    }
-    ,
-  }
-}
-</script>
-
-<style scoped lang="less">
-
-#question-history {
-
-  margin-right: 10px;
-  height: 100%;
-  border-radius: 8px;
-
-  .question-history-active {
-    border-left: 4px solid #1890FF;
-    // 左上左下圆角
-    border-radius: 4px 0 0 4px;
-    padding-left : 14px;
-  }
-
-  .question-history-inactive {
-    padding-left : 18px;
-  }
-
-  .ant-list-item-meta /deep/ {
-    width: 60%;
-  }
-
-  .ant-list-item-meta-content /deep/ {
-    width: 98%;
-  }
-
-  .ant-list-item-meta-title /deep/ {
-    width: 90%;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .ant-card {
-    height: 100%;
-    overflow-y: auto;
-  }
-
-  .startActive {
-    color: #FFD700;
-    font-size: 1rem;
-  }
-
-  .startInactive {
-    font-size: 1rem;
-  }
-
-  .delClass {
-    font-size: 1rem;
-    color: #777;
-  }
-
-  .reSearch {
-    font-size: 1rem;
-    color: #1890FF;
-  }
-
-  .reSearch:hover {
-    animation: rotate 0.5s ease-in-out both;
-  }
-
-  @keyframes rotate {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(180deg);
-    }
-  }
-
-  .startActive, .startInactive, .reSearch {
-    transition: transform 0.1s;
-  }
-
-  .startActive:hover, .startInactive:hover {
-    animation: shake 0.5s ease-in-out both;
-  }
-
-  @keyframes shake {
-    0% {
-      transform: rotate(0deg);
-    }
-    25% {
-      transform: rotate(-20deg);
-    }
-    50% {
-      transform: rotate(0deg);
-    }
-    75% {
-      transform: rotate(20deg);
-    }
-    100% {
-      transform: rotate(0deg);
-    }
-  }
-}
-
-</style>
+<template>
+  <a-card class="question-history" id="question-history" size="small" :bordered="false" :bodyStyle="{ height:'100%', overflowY: 'auto'}">
+    <a-tabs v-model="activeKey" :tabBarStyle="{ textAlign: 'center',height:'100%',postion:'' }" tabPosition="top">
+      <a-tab-pane key="1" tab="对话历史">
+        <a-list item-layout="horizontal" :data-source="questions">
+          <a-list-item
+            slot="renderItem"
+            :class="item.uuid === currentuuid ? 'question-history-active' : 'question-history-inactive'"
+            slot-scope="item,index"
+            @click="handleOpenFavorite(item)">
+            <a-list-item-meta
+              :title="item.question"
+              :description="item.date"
+            />
+            <a-space>
+              <a-icon
+                type="delete"
+                theme="filled"
+                class="delClass"
+                @click.stop="delQuestion(item,index)"
+              />
+              <span>&emsp;</span>
+              <a-icon
+                v-if="item.data"
+                type="star"
+                :class="item.isFavorite ? 'startActive' : 'startInactive'"
+                @click.stop="toFavorites(item,index)"
+                :theme=" item.isFavorite ? 'filled': 'twoTone'"
+                two-tone-color="#FFD700"/>
+              <a-icon
+                v-else
+                @click.stop="reTrySearch(item)"
+                type="sync"
+                class="reSearch"
+                title="重新查询"/>
+            </a-space>
+          </a-list-item>
+        </a-list>
+      </a-tab-pane>
+      <a-tab-pane key="2" tab="收藏的对话" force-render>
+        <a-list item-layout="horizontal" :data-source="favorites">
+          <a-list-item
+            slot="renderItem"
+            slot-scope="item, index"
+            :class="item.uuid === currentuuid ? 'question-history-active' : 'question-history-inactive'"
+            @click="handleOpenFavorite(item)">
+            <a-list-item-meta
+              :title="item.question"
+              :description="item.date"
+            />
+            <a-space>
+              <a-icon
+                type="star"
+                :class="item.isFavorite ? 'startActive' : 'startInactive'"
+                @click.stop="delFavorites(item,index)"
+                :theme=" item.isFavorite ? 'filled': 'twoTone'"
+                two-tone-color="#FFD700"/>
+            </a-space>
+          </a-list-item>
+        </a-list>
+      </a-tab-pane>
+    </a-tabs>
+  </a-card>
+</template>
+
+<script>
+import { indexedDB } from '@vue2-client/utils/indexedDB'
+import { formatDate } from '@vue2-client/utils/util'
+
+export default {
+  props: {
+    currentuuid: {
+      type: String,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      activeKey: '1',
+      questions: [], // 你的问题历史
+      favorites: [] // 你的收藏问题
+    }
+  },
+  mounted () {
+    this.loadData()
+  },
+  methods: {
+    loadData () {
+      indexedDB.getAll((data) => {
+          // 遍历data，将question和favorites分别赋值给questions和favorites
+          for (const datum of data) {
+            if (datum.key.includes('question')) {
+              this.questions.push(datum.data)
+            } else if (datum.key.includes('favorites')) {
+              this.favorites.push(datum.data)
+            }
+          }
+        }
+      )
+    },
+    handleOpenFavorite (item) {
+      this.$emit('handleOpenFavorite', item)
+    },
+    reTrySearch (item) {
+      this.$emit('handleSearch', item.question, null, item.uuid)
+    },
+    add (question) {
+      // 检查 questions 数组中是否已经存在这个问题 替换掉
+      const index = this.questions.findIndex(item => item.uuid === question.uuid)
+      if (index !== -1) {
+        if (question.data) {
+          this.questions.splice(index, 1, Object.assign(question, { date: this.questions[index].date }))
+        } else {
+          this.questions.splice(index, 1, question)
+        }
+        this.updateQuestion(question)
+        return
+      }
+      this.questions.push(question)
+      indexedDB.add('question-' + question.uuid, question)
+    },
+    updateQuestion (question) {
+      const questionKey = 'question-' + question.uuid
+      indexedDB.delete(questionKey)
+      indexedDB.add(questionKey, question)
+    },
+
+    toFavorites (question, index) {
+      this.questions[index].isFavorite = !this.questions[index].isFavorite
+      if (this.questions[index].isFavorite) {
+        const key = 'favorites-' + question.uuid
+        question.date = formatDate('now')
+        question.isFavorite = true
+        indexedDB.add(key, question)
+        this.favorites.push(question)
+        this.$message.success('收藏成功')
+      } else {
+        // 根据 uuid 删除 favorites 中的对应项
+        this.favorites = this.favorites.filter(item => item.uuid !== question.uuid)
+        // 删除收藏的储存
+        const key = 'favorites-' + question.uuid
+        indexedDB.delete(key)
+      }
+      this.updateQuestion(question)
+    },
+    delQuestion (item, index) {
+      // 删除对话历史
+      this.questions.splice(index, 1)
+      const key = 'question-' + item.uuid
+      indexedDB.delete(key)
+      // 删除收藏
+      const favoritesKey = 'favorites-' + item.uuid
+      indexedDB.delete(favoritesKey)
+      // 删除收藏数组中的对应项
+      this.favorites = this.favorites.filter(favorite => favorite.uuid !== item.uuid)
+      this.$message.success('删除成功')
+    },
+    delFavorites (item, index) {
+      this.favorites.splice(index, 1)
+      // 根据uuid寻找 questions 中的对应项
+      // 重新赋值给 questions
+      this.questions = this.questions.map(_item => {
+        if (_item.uuid === item.uuid) {
+          _item.isFavorite = false
+        }
+        return _item
+      })
+      const key = 'favorites-' + item.uuid
+      indexedDB.delete(key)
+      this.$message.success('取消收藏成功')
+      // 如果favorites为空，切换到对话历史
+      if (this.favorites.length === 0) {
+        this.activeKey = '1'
+      }
+      this.updateQuestion(item)
+    }
+    ,
+  }
+}
+</script>
+
+<style scoped lang="less">
+
+#question-history {
+
+  margin-right: 10px;
+  height: 100%;
+  border-radius: 8px;
+
+  .question-history-active {
+    border-left: 4px solid #1890FF;
+    // 左上左下圆角
+    border-radius: 4px 0 0 4px;
+    padding-left : 14px;
+  }
+
+  .question-history-inactive {
+    padding-left : 18px;
+  }
+
+  .ant-list-item-meta /deep/ {
+    width: 60%;
+  }
+
+  .ant-list-item-meta-content /deep/ {
+    width: 98%;
+  }
+
+  .ant-list-item-meta-title /deep/ {
+    width: 90%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .ant-card {
+    height: 100%;
+    overflow-y: auto;
+  }
+
+  .startActive {
+    color: #FFD700;
+    font-size: 1rem;
+  }
+
+  .startInactive {
+    font-size: 1rem;
+  }
+
+  .delClass {
+    font-size: 1rem;
+    color: #777;
+  }
+
+  .reSearch {
+    font-size: 1rem;
+    color: #1890FF;
+  }
+
+  .reSearch:hover {
+    animation: rotate 0.5s ease-in-out both;
+  }
+
+  @keyframes rotate {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(180deg);
+    }
+  }
+
+  .startActive, .startInactive, .reSearch {
+    transition: transform 0.1s;
+  }
+
+  .startActive:hover, .startInactive:hover {
+    animation: shake 0.5s ease-in-out both;
+  }
+
+  @keyframes shake {
+    0% {
+      transform: rotate(0deg);
+    }
+    25% {
+      transform: rotate(-20deg);
+    }
+    50% {
+      transform: rotate(0deg);
+    }
+    75% {
+      transform: rotate(20deg);
+    }
+    100% {
+      transform: rotate(0deg);
+    }
+  }
+}
+
+</style>