模型管理页面开发

src/views/dmx/model/components/addModel.vue

@@ -0,0 +1,187 @@
+
+<template>
+  <a-button type="primary" @click="handleClick" style="margin-left: 10px">
+    <template #icon>
+      <icon-plus />
+    </template>
+  </a-button>
+  <a-modal v-model:visible="visible" title="添加模式"
+           @before-open="handleOpened"
+           @cancel="handleCancel"
+           :footer="false"
+           title-align="start"
+           width="600px"
+  >
+    <a-form ref="formRef" :rules="rules" :model="form" @submit="handleSubmit" :style="{width:'90%',margin:'0 auto'}" layout="vertical" >
+      <a-form-item field="name" label="模型类型">
+        <a-select v-model="form.section" placeholder="请选择">
+          <a-option value="section one">Section One</a-option>
+          <a-option value="section two">Section Two</a-option>
+          <a-option value="section three">Section Three</a-option>
+        </a-select>
+      </a-form-item>
+      <a-form-item field="name" label="模型名称">
+        <a-input v-model="form.name" placeholder="请输入名称"/>
+      </a-form-item>
+      <a-form-item field="section" label="模型图片">
+        <a-space direction="vertical" :style="{ width: '100%' }">
+          <a-upload
+            action="/"
+            :fileList="file ? [file] : []"
+            :show-file-list="false"
+            @change="onChange"
+            @progress="onProgress"
+          >
+            <template #upload-button>
+              <div
+                :class="`arco-upload-list-item${
+            file && file.status === 'error' ? ' arco-upload-list-item-error' : ''
+          }`"
+              >
+                <div
+                  class="arco-upload-list-picture custom-upload-avatar"
+                  v-if="file && file.url"
+                >
+                  <img :src="file.url" />
+                  <div class="arco-upload-list-picture-mask">
+                    <IconEdit />
+                  </div>
+                  <a-progress
+                    v-if="file.status === 'uploading' && file.percent < 100"
+                    :percent="file.percent"
+                    type="circle"
+                    size="mini"
+                    :style="{
+                position: 'absolute',
+                left: '50%',
+                top: '50%',
+                transform: 'translateX(-50%) translateY(-50%)',
+              }"
+                  />
+                </div>
+                <div class="arco-upload-picture-card" v-else>
+                  <div class="arco-upload-picture-card-text">
+                    <IconPlus />
+                    <div style="margin-top: 10px; font-weight: 600">上传</div>
+                  </div>
+                </div>
+              </div>
+            </template>
+          </a-upload>
+        </a-space>
+      </a-form-item>
+      <a-form-item field="name" label="基础Url">
+        <a-input v-model="form.name" placeholder="请输入名称"/>
+      </a-form-item>
+      <a-form-item field="raptor" label="是否支持 Vision">
+        <a-switch v-model="form.raptor" />
+      </a-form-item>
+
+      <a-form-item>
+        <div style="width: 100%;text-align: right">
+          <a-button @click="visible = false">取消</a-button>
+          <a-button style="margin-left: 10px" type="primary" html-type="submit">确定</a-button>
+        </div>
+      </a-form-item>
+    </a-form>
+  </a-modal>
+</template>
+
+<script lang="ts" setup>
+import { onMounted ,onBeforeMount, reactive, ref } from "vue";
+
+const visible = ref(false);
+const loading = ref(false);
+const form = reactive({
+  size: "medium",
+  name: "",
+  age: undefined,
+  section: "0",
+  province: "haidian",
+  options: [],
+  date: "",
+  time: "",
+  radio: "radio one",
+  slider: 5,
+  score: 5,
+  switch: false,
+  multiSelect: ["section one"],
+  treeSelect: "",
+  raptor: false,
+  prompt: '请总结以下段落。 小心数字，不要编造。 段落如下：\n' +
+    '      {cluster_content}\n' +
+    '以上就是你需要总结的内容。',
+});
+const formRef = ref(null);
+
+const rules = {
+  name: [
+    {
+      required: true,
+      message:'名称不允许为空',
+    },
+  ],
+}
+
+
+const handleSubmit = ({values, errors}) => {
+  console.log('values:', values, '\nerrors:', errors)
+}
+
+const handleClick = () => {
+  visible.value = true;
+};
+const handleBeforeOk = (done) => {
+    formRef.value.validate().then(res => {
+      console.log('form:', form)
+      if (!form.name) {
+        done(false)
+      }else {
+        console.log('请求数据');
+
+      }
+    })
+};
+const handleCancel = () => {
+  visible.value = false;
+}
+
+const handleOpened =(el) => {
+  Object.assign(form,{
+    name: '',// 用户名
+    nameJoin: '',// 昵称
+    post: '',// 岗位
+    txt: '',// 备注
+  });
+  formRef.value.resetFields();
+}
+
+const file = ref();
+
+const onChange = (_, currentFile) => {
+  file.value = {
+    ...currentFile,
+    // url: URL.createObjectURL(currentFile.file),
+  };
+};
+const onProgress = (currentFile) => {
+  file.value = currentFile;
+};
+
+onBeforeMount(()=>{
+
+})
+onMounted(()=>{
+
+
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'add',
+  methods: {
+
+  }
+};
+</script>

src/views/dmx/model/components/editModel.vue

@@ -0,0 +1,186 @@
+
+<template>
+  <a-button type="primary" @click="handleClick">
+    编辑
+  </a-button>
+
+  <a-modal v-model:visible="visible" title="添加模式"
+           @before-open="handleOpened"
+           @cancel="handleCancel"
+           :footer="false"
+           title-align="start"
+           width="600px"
+  >
+    <a-form ref="formRef" :rules="rules" :model="form" @submit="handleSubmit" :style="{width:'90%',margin:'0 auto'}" layout="vertical" >
+      <a-form-item field="name" label="模型类型">
+        <a-select v-model="form.section" placeholder="请选择">
+          <a-option value="section one">Section One</a-option>
+          <a-option value="section two">Section Two</a-option>
+          <a-option value="section three">Section Three</a-option>
+        </a-select>
+      </a-form-item>
+      <a-form-item field="name" label="模型名称">
+        <a-input v-model="form.name" placeholder="请输入名称"/>
+      </a-form-item>
+      <a-form-item field="section" label="模型图片">
+        <a-space direction="vertical" :style="{ width: '100%' }">
+          <a-upload
+            action="/"
+            :fileList="file ? [file] : []"
+            :show-file-list="false"
+            @change="onChange"
+            @progress="onProgress"
+          >
+            <template #upload-button>
+              <div
+                :class="`arco-upload-list-item${
+            file && file.status === 'error' ? ' arco-upload-list-item-error' : ''
+          }`"
+              >
+                <div
+                  class="arco-upload-list-picture custom-upload-avatar"
+                  v-if="file && file.url"
+                >
+                  <img :src="file.url" />
+                  <div class="arco-upload-list-picture-mask">
+                    <IconEdit />
+                  </div>
+                  <a-progress
+                    v-if="file.status === 'uploading' && file.percent < 100"
+                    :percent="file.percent"
+                    type="circle"
+                    size="mini"
+                    :style="{
+                position: 'absolute',
+                left: '50%',
+                top: '50%',
+                transform: 'translateX(-50%) translateY(-50%)',
+              }"
+                  />
+                </div>
+                <div class="arco-upload-picture-card" v-else>
+                  <div class="arco-upload-picture-card-text">
+                    <IconPlus />
+                    <div style="margin-top: 10px; font-weight: 600">上传</div>
+                  </div>
+                </div>
+              </div>
+            </template>
+          </a-upload>
+        </a-space>
+      </a-form-item>
+      <a-form-item field="name" label="基础Url">
+        <a-input v-model="form.name" placeholder="请输入名称"/>
+      </a-form-item>
+      <a-form-item field="raptor" label="是否支持 Vision">
+        <a-switch v-model="form.raptor" />
+      </a-form-item>
+
+      <a-form-item>
+        <div style="width: 100%;text-align: right">
+          <a-button @click="visible = false">取消</a-button>
+          <a-button style="margin-left: 10px" type="primary" html-type="submit">确定</a-button>
+        </div>
+      </a-form-item>
+    </a-form>
+  </a-modal>
+</template>
+
+<script lang="ts" setup>
+import { onMounted ,onBeforeMount, reactive, ref } from "vue";
+
+const visible = ref(false);
+const loading = ref(false);
+const form = reactive({
+  size: "medium",
+  name: "",
+  age: undefined,
+  section: "0",
+  province: "haidian",
+  options: [],
+  date: "",
+  time: "",
+  radio: "radio one",
+  slider: 5,
+  score: 5,
+  switch: false,
+  multiSelect: ["section one"],
+  treeSelect: "",
+  raptor: false,
+  prompt: '请总结以下段落。 小心数字，不要编造。 段落如下：\n' +
+    '      {cluster_content}\n' +
+    '以上就是你需要总结的内容。',
+});
+const formRef = ref(null);
+
+const rules = {
+  name: [
+    {
+      required: true,
+      message:'名称不允许为空',
+    },
+  ],
+}
+
+
+const handleSubmit = ({values, errors}) => {
+  console.log('values:', values, '\nerrors:', errors)
+}
+
+const handleClick = () => {
+  visible.value = true;
+};
+const handleBeforeOk = (done) => {
+    formRef.value.validate().then(res => {
+      console.log('form:', form)
+      if (!form.name) {
+        done(false)
+      }else {
+        console.log('请求数据');
+
+      }
+    })
+};
+const handleCancel = () => {
+  visible.value = false;
+}
+
+const handleOpened =(el) => {
+  Object.assign(form,{
+    name: '',// 用户名
+    nameJoin: '',// 昵称
+    post: '',// 岗位
+    txt: '',// 备注
+  });
+  formRef.value.resetFields();
+}
+
+const file = ref();
+
+const onChange = (_, currentFile) => {
+  file.value = {
+    ...currentFile,
+    // url: URL.createObjectURL(currentFile.file),
+  };
+};
+const onProgress = (currentFile) => {
+  file.value = currentFile;
+};
+
+onBeforeMount(()=>{
+
+})
+onMounted(()=>{
+
+
+})
+</script>
+
+<script lang="ts">
+export default {
+  name: 'add',
+  methods: {
+
+  }
+};
+</script>

src/views/dmx/model/index.vue

@@ -10,75 +10,61 @@
                 :active-key="activeKey"
                 type="line"
                 :editable="true"
-                show-add-button
                 @tab-click="changeTabs"
                 @add="handleAdd"
                 @delete="handleDelete"
               >
-                <!--                <a-tab-pane key="1" :title="$t('cardList.tab.title.all')">-->
-                <!--                  <QualityInspection />-->
-                <!--                  <TheService />-->
-                <!--                  <RulesPreset />-->
-                <!--                </a-tab-pane>-->
-                <!--                <a-tab-pane key="2" :title="$t('cardList.tab.title.content')">-->
-                <!--                  <QualityInspection />-->
-                <!--                </a-tab-pane>-->
-                <!--                <a-tab-pane key="3" :title="$t('cardList.tab.title.service')">-->
-                <!--                  <TheService />-->
-                <!--                </a-tab-pane>-->
-                <!--                <a-tab-pane key="4" :title="$t('cardList.tab.title.preset')">-->
-                <!--                  <RulesPreset />-->
-                <!--                </a-tab-pane>-->
-
                 <a-tab-pane
                   v-for="(item, index) of data"
                   :key="item.key"
                   :title="item.title"
                   :closable="index >= 4"
                 >
-                  <QualityInspection v-if="activeKey === 1" />
-                  <TheService v-if="activeKey === 1" />
-                  <RulesPreset v-if="activeKey === 1" />
-
-                  <QualityInspection v-if="activeKey === 2" />
-
-                  <TheService v-if="activeKey === 3" />
-                  <RulesPreset v-if="activeKey === 4" />
-                  <CustomSettings v-if="activeKey > 4" />
+                  <div style="display: flex; flex-wrap: wrap;justify-content: space-between;">
+                    <div class="card-wrap"    v-for="(item, index) of data" :key="index">
+                      <a-card :bordered="false" hoverable >
+                        <template #cover>
+                          <div
+                          >
+                            <img
+                              :style="{ width: '100%', transform: 'translateY(-20px)' }"
+                              alt="dessert"
+                              src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a20012a2d4d5b9db43dfc6a01fe508c0.png~tplv-uwbnlip3yd-webp.webp"
+                            />
+                          </div>
+                        </template>
+                        <div class="arco-card-body-content">
+                          <div class="arco-card-body-content-title">
+                            {{ item.title }}
+                          </div>
+                        </div>
+                        <div style="position: absolute; bottom: 1rem; right: 1rem;">
+                          <a-space>
+                            <a-button>
+                              删除
+                            </a-button>
+                            <editModel></editModel>
+                          </a-space>
+                        </div>
+                      </a-card>
+                    </div>
+                  </div>
                 </a-tab-pane>
               </a-tabs>
             </a-col>
             <div> </div>
             <a-input-search
               :placeholder="$t('cardList.searchInput.placeholder')"
-              style="width: 240px; position: absolute; top: 60px; right: 20px"
+              style="width: 240px; position: absolute; top: 60px; right: 60px"
             />
+            <div style="position: absolute; top: 60px; right: 20px">
+              <addModel></addModel>
+            </div>
+
           </a-row>
         </a-card>
       </a-col>
     </a-row>
-
-    <a-modal v-model:visible="visible" @Ok="handleOk" @cancel="handleCancel">
-      <template #title> 添加框架 </template>
-      <a-form
-        ref="formRef"
-        :size="form.size"
-        :model="form"
-        @submit="handleSubmit"
-      >
-        <a-form-item
-          field="name"
-          label="标签名"
-          :rules="[
-            { required: true, message: '不能为空' },
-            { minLength: 1, message: '至少一个字符' },
-          ]"
-          :validate-trigger="['change', 'input']"
-        >
-          <a-input v-model="form.name" placeholder="请输入标签名" />
-        </a-form-item>
-      </a-form>
-    </a-modal>
   </div>
 </template>
 
@@ -89,6 +75,8 @@
   import TheService from './components/the-service.vue';
   import RulesPreset from './components/rules-preset.vue';
   import CustomSettings from './components/custom-settings.vue';
+  import addModel from "@/views/dmx/model/components/addModel.vue";
+  import editModel from "@/views/dmx/model/components/editModel.vue";
 
   let count = 5;
   const activeKey = ref(1);
@@ -211,4 +199,65 @@ const changeTabs = (val) => {
       }
     }
   }
+  .card-wrap {
+    width: 320px;
+    height: 350px;
+    margin: 30px;
+    transition: all 0.3s;
+    border: 1px solid var(--color-neutral-3);
+    border-radius: 4px;
+    position: relative;
+    &:hover {
+      transform: translateY(-4px);
+      // box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.1);
+    }
+    :deep(.arco-card) {
+      height: 100%;
+      border-radius: 4px;
+      .arco-card-body {
+        height: 100%;
+        .arco-space {
+          width: 100%;
+          height: 100%;
+          .arco-space-item {
+            height: 100%;
+            &:last-child {
+              flex: 1;
+            }
+            .arco-card-meta {
+              height: 100%;
+              display: flex;
+              flex-flow: column;
+              .arco-card-meta-content {
+                flex: 1;
+                .arco-card-meta-description {
+                  margin-top: 8px;
+                  color: rgb(var(--gray-6));
+                  line-height: 20px;
+                  font-size: 12px;
+                }
+              }
+              .arco-card-meta-footer {
+                margin-top: 0;
+              }
+            }
+          }
+        }
+      }
+    }
+    :deep(.arco-card-meta-title) {
+      display: flex;
+      align-items: center;
+
+      // To prevent the shaking
+      line-height: 28px;
+    }
+    :deep(.arco-skeleton-line) {
+      &:last-child {
+        display: flex;
+        justify-content: flex-end;
+        margin-top: 20px;
+      }
+    }
+  }
 </style>