feat: 协作者管理优化和皮肤标签样式调整 (#333)

* feat: 皮肤设置内主题分类标签样式调整

* feat: 协作者管理优化

web/src/management/pages/edit/components/CooperationPanel.vue

@@ -0,0 +1,32 @@
+<template>
+  <slot name="content" :onCooper="onCooper"></slot>
+  <CooperModify :modifyId="cooperId" :visible="cooperModify" @on-close-codify="onCooperClose" />
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import 'element-plus/theme-chalk/src/message.scss'
+import CooperModify from '@/management/pages/list/components/CooperModify.vue';
+import { useRoute } from 'vue-router';
+
+defineSlots<{
+  content: (scope: { onCooper: () => void }) => any
+}>();
+
+const route = useRoute()
+const surveyId = route.params?.id as string;
+const cooperModify = ref<boolean>(false);
+const cooperId = ref<string>('');
+
+const onCooper = (): void => {
+  cooperId.value = surveyId;
+  cooperModify.value = true;
+};
+
+const onCooperClose = (): void => {
+  cooperModify.value = false;
+};
+
+</script>
+<style lang="scss" scoped>
+
+</style>

web/src/management/pages/edit/components/ModuleNavbar.vue

@@ -8,6 +8,14 @@
       <NavPanel></NavPanel>
     </div>
     <div class="right-group">
+      <CooperationPanel>
+        <template #content="{ onCooper }">
+          <div class="btn" @click="onCooper">
+            <i-ep-connection class="view-icon" :size="20" />
+            <span class="btn-txt">协作</span>
+          </div>
+        </template>
+      </CooperationPanel>
       <PreviewPanel></PreviewPanel>
       <HistoryPanel></HistoryPanel>
       <SavePanel></SavePanel>
@@ -27,11 +35,18 @@ import HistoryPanel from '../modules/contentModule/HistoryPanel.vue'
 import PreviewPanel from '../modules/contentModule/PreviewPanel.vue'
 import SavePanel from '../modules/contentModule/SavePanel.vue'
 import PublishPanel from '../modules/contentModule/PublishPanel.vue'
+import CooperationPanel from './CooperationPanel.vue';
 
 const store = useStore()
 const title = computed(() => _get(store.state, 'edit.schema.metaData.title'))
 </script>
 <style lang="scss" scoped>
+@import url('@/management/styles/edit-btn.scss');
+.view-icon {
+  font-size: 20px;
+  height: 29px;
+  line-height: 29px;
+}
 .nav {
   width: 100%;
   height: 56px;

web/src/management/pages/edit/modules/settingModule/skin/CatalogPanel.vue

@@ -108,8 +108,9 @@ const changePreset = (banner: any) => {
     display: flex;
     flex-wrap: wrap;
     .tag {
-      margin: 5px 8px;
       cursor: pointer;
+      width: 51px;
+      margin: 5px 2px;
       &.current {
         color: $primary-color;
         background-color: $primary-bg-color;

web/src/management/pages/list/components/CooperModify.vue

@@ -110,9 +110,6 @@ const rules = {
     {
       trigger: 'change',
       validator: (rule: any, value: IMember[], callback: Function) => {
-        if (value.length === 0) {
-          callback('请至少添加一名协作者')
-        }
         if (value.filter((item: IMember) => !item.role.length).length) {
           callback('请设置协作者对应权限')
         }
@@ -132,7 +129,6 @@ const rules = {
 const formDisabled = computed(() => {
   return false
 })
-
 const onClose = () => {
   emit('on-close-codify')
 }
@@ -140,7 +136,7 @@ const onConfirm = async () => {
   ruleForm.value?.validate(async (valid: boolean) => {
     if (valid) {
       try {
-        const collaborators = formModel.value.members.map((i: any) => {
+        const collaborators = formModel.value.members.map((i) => {
           const collaborator = {
             userId: i.userId,
             permissions: i.role