From d728b0c751de9289ff3a60d5a6f2378d3d8b04dc Mon Sep 17 00:00:00 2001
From: wangdan-fit2cloud <dan.wang@fit2cloud.com>
Date: Fri, 19 Jul 2024 10:44:55 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=A8=A1=E5=9E=8B=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/enums/model.ts                         |  8 ++++++
 .../template/component/CreateModelDialog.vue  | 24 +++++++++++++++---
 ui/src/views/template/component/EditModel.vue | 25 ++++++++++++++++---
 3 files changed, 50 insertions(+), 7 deletions(-)
 create mode 100644 ui/src/enums/model.ts

diff --git a/ui/src/enums/model.ts b/ui/src/enums/model.ts
new file mode 100644
index 000000000..342f0ccb9
--- /dev/null
+++ b/ui/src/enums/model.ts
@@ -0,0 +1,8 @@
+export enum PermissionType {
+  PRIVATE = '私有',
+  PUBLIC = '公用'
+}
+export enum PermissionDesc {
+  PRIVATE = '仅自己使用',
+  PUBLIC = '所有用户都可使用，不能编辑'
+}
diff --git a/ui/src/views/template/component/CreateModelDialog.vue b/ui/src/views/template/component/CreateModelDialog.vue
index a4aed1c22..6dd8df67b 100644
--- a/ui/src/views/template/component/CreateModelDialog.vue
+++ b/ui/src/views/template/component/CreateModelDialog.vue
@@ -59,9 +59,26 @@
           <template #label>
             <span>权限</span>
           </template>
-          <el-radio-group v-model="base_form_data.permission_type">
-            <el-radio value="PRIVATE" size="large" border>私有</el-radio>
-            <el-radio value="PUBLIC" size="large" border>公用</el-radio>
+
+          <el-radio-group v-model="base_form_data.permission_type" class="card__radio">
+            <el-row :gutter="16">
+              <template v-for="(value, key) of PermissionType" :key="key">
+                <el-col :span="12">
+                  <el-card
+                    shadow="never"
+                    class="mb-16"
+                    :class="base_form_data.permission_type === key ? 'active' : ''"
+                  >
+                    <el-radio :value="key" size="large">
+                      <p class="mb-4">{{ value }}</p>
+                      <el-text type="info">
+                        {{ PermissionDesc[key] }}
+                      </el-text>
+                    </el-radio>
+                  </el-card>
+                </el-col>
+              </template>
+            </el-row>
           </el-radio-group>
         </el-form-item>
         <el-form-item prop="model_type" :rules="base_form_data_rule.model_type">
@@ -145,6 +162,7 @@ import type { FormField } from '@/components/dynamics-form/type'
 import DynamicsForm from '@/components/dynamics-form/index.vue'
 import type { FormRules } from 'element-plus'
 import { MsgSuccess } from '@/utils/message'
+import { PermissionType, PermissionDesc } from '@/enums/model'
 
 const providerValue = ref<Provider>()
 const dynamicsFormRef = ref<InstanceType<typeof DynamicsForm>>()
diff --git a/ui/src/views/template/component/EditModel.vue b/ui/src/views/template/component/EditModel.vue
index 6a8451169..9278906f3 100644
--- a/ui/src/views/template/component/EditModel.vue
+++ b/ui/src/views/template/component/EditModel.vue
@@ -52,9 +52,26 @@
           <template #label>
             <span>权限</span>
           </template>
-          <el-radio-group v-model="base_form_data.permission_type">
-            <el-radio value="PRIVATE" size="large" border>私有</el-radio>
-            <el-radio value="PUBLIC" size="large" border>公用</el-radio>
+
+          <el-radio-group v-model="base_form_data.permission_type" class="card__radio">
+            <el-row :gutter="16">
+              <template v-for="(value, key) of PermissionType" :key="key">
+                <el-col :span="12">
+                  <el-card
+                    shadow="never"
+                    class="mb-16"
+                    :class="base_form_data.permission_type === key ? 'active' : ''"
+                  >
+                    <el-radio :value="key" size="large">
+                      <p class="mb-4">{{ value }}</p>
+                      <el-text type="info">
+                        {{ PermissionDesc[key] }}
+                      </el-text>
+                    </el-radio>
+                  </el-card>
+                </el-col>
+              </template>
+            </el-row>
           </el-radio-group>
         </el-form-item>
         <el-form-item prop="model_type" :rules="base_form_data_rule.model_type">
@@ -137,7 +154,7 @@ import type { FormField } from '@/components/dynamics-form/type'
 import DynamicsForm from '@/components/dynamics-form/index.vue'
 import type { FormRules } from 'element-plus'
 import { MsgSuccess } from '@/utils/message'
-import AppIcon from '@/components/icons/AppIcon.vue'
+import { PermissionType, PermissionDesc } from '@/enums/model'
 
 const providerValue = ref<Provider>()
 const dynamicsFormRef = ref<InstanceType<typeof DynamicsForm>>()