feat:文件/分类/色值

src/services/common.ts

@@ -14,6 +14,7 @@ import { debounce } from './debouce';
 import { deepClone, isDomShapes } from '@meta2d/core';
 import { useSelection } from '@/services/selections';
 import { rootDomain } from './defaults';
+import { updateObject } from './object';
 
 const { select } = useSelection();
 
@@ -72,6 +73,28 @@ export const useAssets = () => {
   };
 };
 
+const meta2dData = reactive({
+  name:'新建项目'
+});
+
+export const useMeta2dData = () => {
+  const getMeta2dData = async () => {
+    return meta2dData;
+  };
+  const setMeta2dData = async (data:any) => {
+    for(const key in data){
+      meta2d.store.data[key] = data[key];
+    }
+    updateObject(meta2dData, data);
+  };
+
+  return {
+    meta2dData,
+    getMeta2dData,
+    setMeta2dData,
+  };
+};
+
 const dot = ref(false);
 
 export const useDot = () => {
@@ -455,7 +478,8 @@ export const save = async (
       image:comData.image,
       name:comData.name,
       folder: '',
-      userFlag
+      userFlag,
+      case:comData.case
     }
     let ret: any = await addCollection('v.component', body); // 新增
     if (ret.error) {
@@ -592,11 +616,13 @@ export const save = async (
     name:data.name,
     folder:data.folder,
     // shared:true,
-    userFlag
+    userFlag,
+    case:data.case
   }
   delete data.name;
   delete data.image;
   delete data.folder;
+  delete data.case;
   if (!data.tags || !data.tags.length) {
     data.tags = [thumbFolder];
   }

src/services/utils.ts

@@ -36,6 +36,7 @@ export interface Meta2dBackData extends Meta2dData {
   tags?: string[]; //标签数组
   filename?: string; //后端存储的文件名
   ownerId?:string;
+  case?:string;
 }
 
 const notification = ref<any>(null);

src/views/components/FileProps.vue

@@ -3,6 +3,25 @@
     <t-tabs v-model="data.tab">
       <t-tab-panel :value="1" label="画布">
         <t-space direction="vertical" size="small" class="panel">
+          <div class="form-item">
+            <label>文件名</label>
+            <t-input
+              class="w-full"
+              placeholder="文件名"
+              :value="meta2dData.name"
+              @change="changeName($event, 'name')"
+            />
+          </div>
+          <div class="form-item">
+            <label>分类</label>
+            <t-select
+              v-model="data.meta2dData.case"
+              @change="changeValue($event, 'case')"
+            >
+              <t-option v-for="_case in cases " :value="_case.value" :label="_case.label"> {{ _case.label }} </t-option>
+            </t-select>
+          </div>
+          <t-divider style="margin-left: -16px;width: 120%; " />
           <div class="form-item">
             <label>画布尺寸</label>
             <t-input-number
@@ -282,8 +301,10 @@ import { loadCss } from '@meta2d/core';
 import { defaultPureColor } from '@/services/defaults';
 import { useEnterprise } from '@/services/enterprise';
 import { MoreIcon, CloseIcon, EllipsisIcon} from 'tdesign-icons-vue-next';
+import { useMeta2dData } from '@/services/common';
 
 const { getEnterprise } = useEnterprise();
+const { meta2dData, setMeta2dData } = useMeta2dData();
 
 const headers = {
   Authorization: 'Bearer ' + (getCookie('token') || ''),
@@ -301,6 +322,57 @@ const data = reactive<any>({
   iconUrl: '',
 });
 
+const cases = [
+  {
+    label:'智慧物联',
+    value:'智慧物联'
+  },
+  {
+    label:'电力能源',
+    value:'电力能源'
+  },
+  {
+    label:'智慧水务',
+    value:'智慧水务'
+  },
+  {
+    label:'智慧工厂',
+    value:'智慧工厂'
+  },
+  {
+    label:'智慧校园',
+    value:'智慧校园'
+  },
+  {
+    label:'智慧园区',
+    value:'智慧园区'
+  },
+  {
+    label:'智慧交通',
+    value:'智慧交通'
+  },
+  {
+    label:'智慧城市',
+    value:'智慧城市'
+  },
+  {
+    label:'智慧农业',
+    value:'智慧农业'
+  },
+  {
+    label:'电信机房',
+    value:'电信机房'
+  },
+  {
+    label:'航空航天',
+    value:'航空航天'
+  },
+  {
+    label:'智能家居',
+    value:'智能家居'
+  }
+];
+
 const screenList = reactive([
   {
     name: '大屏',
@@ -405,6 +477,10 @@ const changeValue = (e: any, key: string) => {
   openData();
 };
 
+const changeName = (e: any, key: string) => {
+  setMeta2dData({name:e});
+};
+
 onMounted(() => {
   if (inTreePanel.value) {
     data.tab = 2;

src/views/components/Header.vue

@@ -230,7 +230,7 @@
     </t-dropdown>
 
     <div style="width: 148px; flex-shrink: 0"></div>
-    <input v-model="data.name" @input="onInputName" />
+    <input v-model="meta2dData.name" @change="onInputName($event)" />
 
     <a :href="enterprise.account" target="_blank">
       <!-- <t-icon name="home" /> -->
@@ -556,11 +556,12 @@ import {
 import { formComponents, rootDomain } from '@/services/defaults';
 import Pay from './Pay.vue';
 import {getNetJsDiagram} from '@/services/material';
+import { useMeta2dData } from '@/services/common';
 
 const { enterprise } = useEnterprise();
 const router = useRouter();
 const route = useRoute();
-
+const { meta2dData, setMeta2dData } = useMeta2dData();
 const baseUrl = import.meta.env.BASE_URL || '/';
 // const { assets, getAssets } = useAssets();
 
@@ -596,9 +597,10 @@ const logout = () => {
   signout();
   meta2d.emit('logout');
 };
-const onInputName = () => {
-  (meta2d.store.data as Meta2dBackData).name = data.name;
-  setDot();
+const onInputName = (e) => {
+  // (meta2d.store.data as Meta2dBackData).name = data.name;
+  setMeta2dData({ name: e.target.value });
+  setDot(true);
 };
 
 const initMeta2dName = () => {

src/views/components/View.vue

@@ -71,8 +71,8 @@
           @click="oneFormat"
           @dblclick="alwaysFormat"
           :style="{
-            background: one || always ? '#4583ff' : '',
-            color: one || always ?( theme==='light'?'#fff':''):''
+            background: one || always ? '#4480F929' : '',
+            color: one || always ?( theme==='light'?'#4480F9':'#4480F9'):''
           }"
         >
           <svg
@@ -143,8 +143,8 @@
           @click="oneDraw"
           @dblclick="alwaysDraw"
           :style="{
-            background: oneD || alwaysD ? '#4583ff' : '',
-            color: oneD || alwaysD ?( theme==='light'?'#fff':''):''
+            background: oneD || alwaysD ? '#4480F929' : '',
+            color: oneD || alwaysD ?( theme==='light'?'#4480F9':'#4480F9'):''
           }"
         >
           <svg
@@ -314,9 +314,7 @@
         </a>
       </t-tooltip>
       <t-tooltip content="分享" placement="bottom">
-        <a @click="share" :class="{ 'share-primary': shared }" :style="{
-           color: shared?(theme==='light'?'#fff':''):''
-        }">
+        <a @click="share" :class="{ 'share-primary': shared }">
           <share-icon />
           <!-- <t-icon name="share" :class="{ primary: shared }" /> -->
         </a>
@@ -957,6 +955,7 @@ const open = async (flag: boolean = false) => {
       ret.data.name = ret.name;
       ret.data.image = ret.image;
       ret.data.ownerId = ret.ownerId;
+      ret.data.case = ret.case;
       meta2d.open(ret.data);
       if (!route.query.c) {
         shared.value = ret.shared;
@@ -1938,7 +1937,8 @@ const theme = computed(() => {
   }
 
   .share-primary{
-    background-color: var(--color-primary);
+    color:  var(--color-primary) !important;
+    background-color:#4480F929;
   }
   #meta2d {
     /* border-top: 1px solid var(--color-background-input); */