搜索结果列表页面开发

src/components/LabelCard/index.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+
+const props = withDefaults(defineProps<{ name?: string, description?: string, color?: string, editor?: boolean, confirmText?: string, cancelText?: string, insert?: boolean }>(), {
+  name: '',
+  description: '',
+  color: '#f66f6a',
+  editor: false,
+  confirmText: '',
+  cancelText: '取消',
+  insert: false
+});
+
+const labelName = ref(props.name);
+const labelDescription = ref(props.description);
+const labelColor = ref(props.color);
+const disabled = computed(() => {
+  return Boolean(labelName.value && labelName.value && labelColor.value);
+});
+
+const emits = defineEmits(['confirm', 'cancel']);
+
+const handleCancel = () => {
+  emits('cancel');
+};
+const handleConfirm = () => {
+  emits('confirm', {
+    name: labelName.value,
+    description: labelDescription.value,
+    color: labelColor.value
+  });
+};
+
+</script>
+
+<template>
+  <div :class="['label-card-context', { 'label-card-menu': insert }]">
+      <div class="label-card-l">
+        <div class="label-card-item">
+          <div class="label-card-item-text">Label名称</div>
+          <d-input  v-model="labelName" placeholder="Label名称"></d-input>
+        </div>
+        <div class="label-card-item">
+          <div class="label-card-item-text">Label描述</div>
+          <d-input v-model="labelDescription" placeholder="Label描述"></d-input>
+        </div>
+        <div class="label-card-item">
+          <div class="label-card-item-text">颜色</div>
+          <div class="label-card-item-wrap">
+            <div class="label-card-item-color"></div>
+            <d-input v-model="labelColor" placeholder="颜色"></d-input>
+          </div>
+        </div>
+      </div>
+      <div class="label-card-r">
+        <d-button color="secondary" variant="solid" style="marginRight: 24px;" @click="handleCancel">
+          {{ cancelText }}
+        </d-button>
+        <d-button color="primary" variant="solid" :disabled="!disabled" @click="handleConfirm">
+          {{ confirmText || editor ? '保存' : '创建' }}
+        </d-button>
+      </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.label-card {
+  overflow: hidden;
+  &-nav {
+    display: flex;
+    justify-content: space-between;
+    line-height: 28px;
+    font-size: 20px;
+    color: #000000;
+  }
+  &-tips {
+    line-height: 22px;
+    color: #606060;
+    font-size: 14px;
+    word-break: break-all;
+    margin: 24px auto;
+    font-weight: 400;
+  }
+  &-context {
+    display: flex;
+    white-space: nowrap;
+    justify-content: space-between;
+    align-items: center;
+    box-sizing: border-box;
+    padding: 24px 16px 16px;
+    border-radius: 4px;
+    border: 1px solid #D3D3D3;
+  }
+  &-menu {
+    border-width: 0;
+    padding: 24px 8px 8px;
+  }
+  &-l {
+    display: flex;
+    width: calc(100% - 200px);
+  }
+  &-r {
+    width: 160px;
+  }
+  &-item {
+    flex: 1;
+    margin-right: 24px;
+    &-text {
+      color: #333333;
+      overflow: hidden;
+      font-size: 16px;
+      margin-bottom: 8px;
+    }
+    &-wrap {
+      display: flex;
+      align-items: center;
+    }
+    &-color {
+      background-color: v-bind(labelColor);
+      width: 28px;
+      height: 28px;
+      border-radius: 4px;
+      margin-right: 8px;
+    }
+  }
+}
+</style>