feat: Style optimization

Author: dataeaseShu

frontend/src/views/work/DatasourceCard.vue

@@ -0,0 +1,53 @@
+<script lang="ts" setup>
+import { ref } from "vue";
+import { Document } from "@element-plus/icons-vue";
+const props = withDefaults(
+  defineProps<{
+    name: string;
+    description: string;
+    creator: string;
+  }>(),
+  {
+    name: "",
+    description: "",
+    creator: "",
+  }
+);
+</script>
+
+<template>
+  <div class="datasource-card">
+    <div class="description">
+      <el-icon size="20" style="margin-right: 12px">
+        <Document></Document>
+      </el-icon>
+      <span class="value">{{ name }}</span>
+    </div>
+    <div class="description">
+      <span class="key">describe:</span>
+      <span class="value">{{ description }}</span>
+    </div>
+    <div class="description">
+      <span class="key">Founder:</span>
+      <span class="value">{{ creator }}</span>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.datasource-card {
+  height: 120px;
+  padding: 16px;
+  border-radius: 4px;
+  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
+  .description {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    margin-bottom: 8px;
+    .key {
+      margin-right: 12px;
+    }
+  }
+}
+</style>

frontend/src/views/work/index.vue

@@ -0,0 +1,116 @@
+<script lang="ts" setup>
+import { ref, computed } from "vue";
+import DatasourceCard from "./DatasourceCard.vue";
+
+const props = withDefaults(
+  defineProps<{
+    datasourceList: Array<any>;
+  }>(),
+  {
+    datasourceList: () => [],
+  }
+);
+
+const datasourceName = ref("");
+const datasourceListComputed = computed(() =>
+  props.datasourceList.filter((val) =>
+    val.name.toLowerCase.includes(datasourceName.value.toLowerCase())
+  )
+);
+
+const dialogVisible = ref(false);
+</script>
+
+<template>
+  <div class="chat-init_tip">
+    <div class="hello-sqlbot">Hello, I'm SQLBot, happy to serve you!</div>
+    <div class="function-sqlbot">
+      I can help you query data, generate charts, detect data anomalies, predict
+      data, etc. Please select a data source and start intelligent data query~
+    </div>
+    <div class="select-datasource">
+      <span class="title">Select data source</span>
+      <el-button @click="dialogVisible = true" text>View more</el-button>
+    </div>
+    <div class="datasource-content">
+      <DatasourceCard
+        name="1"
+        v-for="ele in datasourceList"
+        :key="ele.id"
+      ></DatasourceCard>
+    </div>
+    <el-button type="primary">Create a new data source</el-button>
+  </div>
+  <el-dialog
+    v-model="dialogVisible"
+    title="Select data source"
+    width="800"
+    modal-class="select-datasource_dialog"
+  >
+    <div class="search-datasource">
+      <el-input
+        v-model="datasourceName"
+        style="width: 240px"
+        placeholder="Please input"
+      />
+    </div>
+    <div class="datasource-content">
+      <DatasourceCard
+        name="1"
+        v-for="ele in datasourceListComputed"
+        :key="ele.id"
+      ></DatasourceCard>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="dialogVisible = false">Cancel</el-button>
+        <el-button type="primary" @click="dialogVisible = false">
+          Confirm
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="less" scoped>
+.chat-init_tip {
+  width: 780px;
+  padding: 16px;
+  .hello-sqlbot {
+    margin-bottom: 12px;
+    font-size: 16px;
+    font-weight: 500;
+  }
+  .function-sqlbot {
+    margin-bottom: 12px;
+  }
+
+  .select-datasource {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .datasource-content {
+    margin: 12px 0;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 16px;
+  }
+}
+</style>
+
+<style lang="less">
+.select-datasource_dialog {
+  .search-datasource {
+    text-align: right;
+  }
+
+  .datasource-content {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    gap: 16px;
+    margin-top: 16px;
+  }
+}
+</style>