fix(card): adaptive

frontend/src/views/chat/ChatCreator.vue

@@ -142,18 +142,30 @@ defineExpose({
       </el-icon>
     </template>
     <div v-if="datasourceListWithSearch.length" class="card-content">
-      <Card
-        v-for="ele in datasourceListWithSearch"
-        :id="ele.id"
-        :key="ele.id"
-        :name="ele.name"
-        :type="ele.type"
-        :type-name="ele.type_name"
-        :num="ele.num"
-        :is-selected="ele.id === innerDs"
-        :description="ele.description"
-        @select-ds="selectDsInDialog(ele)"
-      ></Card>
+      <el-row :gutter="16" class="w-full">
+        <el-col
+          v-for="ele in datasourceListWithSearch"
+          :key="ele.id"
+          :xs="24"
+          :sm="12"
+          :md="12"
+          :lg="8"
+          :xl="6"
+          class="mb-16"
+        >
+          <Card
+            :id="ele.id"
+            :key="ele.id"
+            :name="ele.name"
+            :type="ele.type"
+            :type-name="ele.type_name"
+            :num="ele.num"
+            :is-selected="ele.id === innerDs"
+            :description="ele.description"
+            @select-ds="selectDsInDialog(ele)"
+          ></Card>
+        </el-col>
+      </el-row>
     </div>
     <template v-if="!keywords && !datasourceListWithSearch.length && !searchLoading">
       <EmptyBackground
@@ -196,11 +208,21 @@ defineExpose({
 
 <style lang="less">
 .datasource-drawer-chat {
+  .ed-drawer__body {
+    padding: 16px 0 16px 0;
+  }
   .card-content {
-    display: flex;
-    flex-wrap: wrap;
-    max-height: 100%;
+    max-height: calc(100% - 40px);
     overflow-y: auto;
+    padding: 0 8px 0 24px;
+
+    .w-full {
+      width: 100%;
+    }
+
+    .mb-16 {
+      margin-bottom: 16px;
+    }
   }
 
   .datasource-yet {

frontend/src/views/chat/ChatSelectDs.vue

@@ -1,170 +0,0 @@
-<script lang="ts" setup>
-import { onMounted, ref, computed, shallowRef } from 'vue'
-import icon_close_outlined from '@/assets/svg/operate/ope-close.svg'
-import icon_searchOutline_outlined from '@/assets/svg/icon_search-outline_outlined.svg'
-import { chatApi, ChatInfo } from '@/api/chat.ts'
-import { datasourceApi } from '@/api/datasource.ts'
-import Card from '@/views/ds/ChatCard.vue'
-
-const props = withDefaults(
-  defineProps<{
-    hidden?: boolean
-  }>(),
-  {
-    hidden: false,
-  }
-)
-
-const datasourceConfigvVisible = ref(false)
-const keywords = ref('')
-const datasourceList = shallowRef([] as any[])
-const datasourceListWithSearch = computed(() => {
-  if (!keywords.value) return datasourceList.value
-  return datasourceList.value.filter((ele) =>
-    ele.name.toLowerCase().includes(keywords.value.toLowerCase())
-  )
-})
-const beforeClose = () => {
-  datasourceConfigvVisible.value = false
-  keywords.value = ''
-}
-
-const emits = defineEmits(['onChatCreated'])
-
-function listDs() {
-  datasourceApi.list().then((res) => {
-    datasourceList.value = res
-  })
-}
-
-const dialogVisible = ref(false)
-
-const innerDs = ref()
-
-const loading = ref(false)
-
-function showDs() {
-  listDs()
-  dialogVisible.value = true
-}
-
-function hideDs() {
-  innerDs.value = undefined
-  dialogVisible.value = false
-}
-
-function selectDsInDialog(ds: any) {
-  innerDs.value = ds.id
-}
-
-function confirmSelectDs() {
-  if (innerDs.value) {
-    createChat(innerDs.value)
-  }
-}
-
-function createChat(datasource: number) {
-  loading.value = true
-  chatApi
-    .startChat({
-      datasource: datasource,
-    })
-    .then((res) => {
-      const chat: ChatInfo | undefined = chatApi.toChatInfo(res)
-      if (chat == undefined) {
-        throw Error('chat is undefined')
-      }
-      emits('onChatCreated', chat)
-      hideDs()
-    })
-    .catch((e) => {
-      console.error(e)
-    })
-    .finally(() => {
-      loading.value = false
-    })
-}
-
-onMounted(() => {
-  if (props.hidden) {
-    return
-  }
-})
-
-defineExpose({
-  showDs,
-  hideDs,
-  createChat,
-})
-</script>
-
-<template>
-  <el-drawer
-    v-model="datasourceConfigvVisible"
-    :close-on-click-modal="false"
-    size="calc(100% - 100px)"
-    modal-class="datasource-drawer-chat"
-    direction="btt"
-    :before-close="beforeClose"
-    :show-close="false"
-  >
-    <template #header="{ close }">
-      <span style="white-space: nowrap">{{ $t('qa.select_datasource') }}</span>
-      <div class="flex-center" style="width: 100%">
-        <el-input
-          v-model="keywords"
-          clearable
-          style="width: 320px"
-          :placeholder="$t('datasource.search')"
-        >
-          <template #prefix>
-            <el-icon>
-              <icon_searchOutline_outlined />
-            </el-icon>
-          </template>
-        </el-input>
-      </div>
-      <el-icon style="cursor: pointer" @click="close">
-        <icon_close_outlined></icon_close_outlined>
-      </el-icon>
-    </template>
-    <div class="card-content">
-      <Card
-        v-for="ele in datasourceListWithSearch"
-        :id="ele.id"
-        :key="ele.id"
-        :name="ele.name"
-        :type="ele.type"
-        :type-name="ele.type_name"
-        :num="ele.num"
-        :description="ele.description"
-        @select-ds="selectDsInDialog(ele)"
-      ></Card>
-    </div>
-    <template #footer>
-      <div class="dialog-footer">
-        <el-button secondary :disabled="loading" @click="hideDs">{{
-          $t('common.cancel')
-        }}</el-button>
-        <el-button
-          type="primary"
-          :disabled="loading || innerDs === undefined"
-          @click="confirmSelectDs"
-        >
-          {{ $t('datasource.confirm') }}
-        </el-button>
-      </div>
-    </template>
-  </el-drawer>
-</template>
-
-<style lang="less">
-.datasource-drawer-chat {
-  .card-content {
-    display: flex;
-    flex-wrap: wrap;
-    max-height: calc(100% - 40px);
-    overflow-y: auto;
-  }
-}
-</style>

frontend/src/views/ds/ChatCard.vue

@@ -60,12 +60,11 @@ const SelectDs = () => {
 
 <style lang="less" scoped>
 .card {
-  width: 370px;
+  width: 100%;
   border: 1px solid #dee0e3;
   padding: 16px;
   border-radius: 12px;
   cursor: pointer;
-  margin: 0 16px 16px 0;
 
   &:hover {
     box-shadow: 0px 6px 24px 0px #1f232914;

frontend/src/views/system/permission/Card.vue

@@ -76,12 +76,11 @@ const setUser = () => {
 
 <style lang="less" scoped>
 .card {
-  width: 371px;
+  width: 100%;
   height: 176px;
   border: 1px solid #dee0e3;
   padding: 16px;
   border-radius: 12px;
-  margin: 0 16px 16px 0;
   &:hover {
     box-shadow: 0px 6px 24px 0px #1f232914;
   }

frontend/src/views/system/permission/index.vue

@@ -516,7 +516,7 @@ const columnRules = {
 </script>
 
 <template>
-  <div v-loading="searchLoading" class="permission">
+  <div v-loading="searchLoading" class="permission no-padding">
     <div class="tool-left">
       <span class="page-title">{{ $t('workspace.permission_configuration') }}</span>
       <div>
@@ -549,17 +549,29 @@ const columnRules = {
     />
 
     <div v-else class="card-content">
-      <Card
-        v-for="ele in ruleListWithSearch"
-        :id="ele.id"
-        :key="ele.id"
-        :name="ele.name"
-        :type="ele.users.length"
-        :num="ele.permissions.length"
-        @edit="handleEditRule(ele)"
-        @del="deleteHandler(ele)"
-        @set-user="setUser(ele)"
-      ></Card>
+      <el-row :gutter="16" class="w-full">
+        <el-col
+          v-for="ele in ruleListWithSearch"
+          :key="ele.id"
+          :xs="24"
+          :sm="12"
+          :md="12"
+          :lg="8"
+          :xl="6"
+          class="mb-16"
+        >
+          <Card
+            :id="ele.id"
+            :key="ele.id"
+            :name="ele.name"
+            :type="ele.users.length"
+            :num="ele.permissions.length"
+            @edit="handleEditRule(ele)"
+            @del="deleteHandler(ele)"
+            @set-user="setUser(ele)"
+          ></Card>
+        </el-col>
+      </el-row>
     </div>
     <template v-if="!keywords && !ruleListWithSearch.length && !searchLoading">
       <EmptyBackground
@@ -857,6 +869,8 @@ const columnRules = {
 .permission {
   height: 100%;
   width: 100%;
+  padding: 16px 0 16px 0;
+
   .ed-empty_200 {
     padding-top: 200px;
     padding-bottom: 0;
@@ -867,6 +881,7 @@ const columnRules = {
     align-items: center;
     justify-content: space-between;
     margin-bottom: 16px;
+    padding: 0 24px 0 24px;
 
     .page-title {
       font-weight: 500;
@@ -876,10 +891,17 @@ const columnRules = {
   }
 
   .card-content {
-    display: flex;
-    flex-wrap: wrap;
     max-height: calc(100% - 40px);
     overflow-y: auto;
+    padding: 0 8px 0 24px;
+
+    .w-full {
+      width: 100%;
+    }
+
+    .mb-16 {
+      margin-bottom: 16px;
+    }
   }
 }
 </style>