搜索结果列表页面开发

src/components/CodeComparisonMenu/README.md

@@ -0,0 +1,73 @@
+# CodeComparisonMenu
+
+### 说明
+- CodeComparisonMenu组件为代码对比功能菜单组件，demo如下
+``` js
+// tempalte
+<code-comparison-menu
+selected="1"
+:options= "[{name:'option_01',value:'1'}]"
+:total="12"
+:addNum="8"
+:reduceNum="4"
+searchWord=""
+@selected-change="selectedChangeCode"
+@handle-expand="handleExpandCode"
+@handle-setting="handleSettingCode"
+@handle-search="handleSearchCode"
+@change-search="changeSearchCode"
+>
+</code-comparison-menu>
+// script 
+const selectedChangeCode = (value:string) => {
+  
+};
+const handleExpandCode = (props:object) => {
+  
+};
+const handleSettingCode = (props:object) => {
+  
+};
+const handleSearchCode = (props:object) => {
+  
+};
+const changeSearchCode = (props:object) => {
+  
+};
+```
+### Props
+
+| 参数       | 说明                   | 类型                        | 可选值    | 默认值     |
+|-----------|------------------------|----------------------------|----------|-----------|
+| id? | 卡片唯一id | string | -- | -- |
+| selected? | 下拉框选择值 | string | -- | -- |
+| options | 下拉框options,例：[{name:'option_01',value:'1'}] | array   | -- | [] |
+| total? | 变更文件总数 | number | 0 | --     |
+| addNum? | 增加数 | number | -- | 0 |
+| reduceNum? | 减少数 | number | -- | 0      |
+| searchWord? | 搜索值 | string | -- | -- |
+| hideSelect? | 隐藏下拉框 | boolean | -- | false |
+| hideSearch? | 隐藏搜索 | boolean | -- | false |
+| hideExpand? | 隐藏展开全部 | boolean | -- | false |
+| hideSetting? | 隐藏设置 | boolean | -- | false |
+
+
+### Emits
+
+| 方法             | 说明                               | 返回值               |
+|-----------------|------------------------------------|---------------------|
+| selectedChange | 下拉框选择后触发 | value:下拉框选择值 |
+| handleExpand | 点击展开全部触发 | props(当前组件props对象) |
+| handleSetting | 点击设置触发 | props(当前组件props对象) |
+| handleSearch | 搜索框enter触发 | value：搜索框输入值 |
+| changeSearch | 搜索框实时输入触发 | value：搜索框输入值 |
+
+
+### Slots
+
+| 名称                 | 说明                                        |
+|---------------------|---------------------------------------------|
+| left | 左侧布局区域插槽     |
+| info | 查看文件文案区域插槽 |
+| search | 搜索区域插槽 |
+| right | 右侧按钮区域插槽 |

src/components/CodeComparisonMenu/index.vue

@@ -0,0 +1,128 @@
+<template>
+    <div class="g-code-menu" >
+        <div class="g-code-menu-left">
+            <slot name="left">
+                <div v-if="!hideSelect">
+                    <d-select class="g-code-menu-width" v-model="curVal" :options="options" @value-change="emits('selectedChange',curVal)"></d-select>
+                </div>
+                <div class="g-code-menu-left-desc"  v-if="!hideSelect">
+                    <slot name="info">
+                        <template v-if="total">
+                            <p class="g-code-menu-left-desc-text">查看全部 {{ total }} 个文件变更</p>
+                            <p class="g-code-menu-left-desc-add">+{{ addNum }}</p>
+                            <p class="g-code-menu-left-desc-reduce">-{{ reduceNum }}</p>
+                        </template>
+                   </slot>
+                </div>
+                <div class="g-code-menu-line"  v-if="!hideSelect && !hideSearch" ></div>
+                <div>
+                    <slot name="search">
+                       <d-input v-model="search" v-if="!hideSearch" placeholder="搜索(Command + P)" clearable prefix="search" @input="emits('changeSearch',search)"  @change="emits('handleSearch',search)"  @clear="emits('handleSearch','')" />
+                    </slot>
+                </div>
+            </slot>
+        </div>
+        <div class="g-code-menu-right">
+            <slot name="right">
+                <span class="g-code-menu-pointer g-code-menu-center" v-if="!hideExpand" @click="emits('handleExpand',props)">
+                    <d-icon name="icon-expand"></d-icon> 展开全部
+                </span>
+                <span class="g-code-menu-line" v-if="!hideExpand && !hideSetting"></span>
+                <span class="g-code-menu-pointer g-code-menu-center" v-if="!hideSetting" @click="emits('handleSetting',props)">
+                    <d-icon name="icon-local-parameter"></d-icon> 设置
+                </span>
+            </slot>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const props = withDefaults(defineProps<{
+    id?: string
+    selected?: string
+    options: Array<object>
+    total?: number
+    addNum?: number
+    reduceNum?: number
+    searchWord?: string
+    hideSelect?: boolean
+    hideSearch?: boolean
+    hideExpand?: boolean
+    hideSetting?: boolean
+}>(), {
+  id: '',
+  selected: '',
+  options: () => [],
+  total: 0,
+  addNum: 0,
+  reduceNum: 0,
+  searchWord: '',
+  hideSelect: false,
+  hideSearch: false,
+  hideExpand: false,
+  hideSetting: false
+});
+const curVal = ref(props.selected);
+const search = ref(props.searchWord);
+const emits = defineEmits(['selectedChange', 'handleExpand', 'handleSetting', 'handleSearch', 'changeSearch']);
+
+</script>
+
+<style scoped lang="scss">
+$g-code-menu-border-color: #D3D3D3;
+$g-code-menu-border-radius: 4px;
+$g-code-menu-text-color: #606060;
+$g-code-menu-text-h1: #000000;
+$g-code-menu-text-success: #0C974F;
+$g-code-menu-text-error: #DC0010;
+.g-code-menu {
+    display: flex;
+    justify-content: space-between;
+    &-pointer {
+        cursor: pointer;
+    }
+    &-center {
+        align-self: center;
+    }
+    &-line {
+        width: 1px;
+        height: 24px;
+        background-color: $g-code-menu-border-color;
+        margin: 4px 16px;
+    }
+    &-left {
+        display: flex;
+        align-self: center;
+        &-desc  {
+          display: flex;
+          align-self: center;
+          margin-left: 16px;
+          p {
+            display: block;
+            width: max-content;
+            margin-left: 2px;
+          }
+          &-text {
+            color: $g-code-menu-text-h1;
+          }
+          &-add {
+            color: $g-code-menu-text-success;
+          }
+          &-reduce {
+            color: $g-code-menu-text-error;
+          }
+        }
+    }
+    &-right {
+        display: flex;
+        align-self: center;
+        flex-shrink: 0;
+        color: $g-code-menu-text-color;
+        :deep(.devui-icon__container) {
+            vertical-align: middle;
+        }
+    }
+}
+</style>