1.代码优化

src/components/model-user-info/index.vue

@@ -6,7 +6,7 @@
                     <img class="round" src="@/assets/images/components/model-user-info/avatar.png" :width="base_data.user_avatar_size" :height="base_data.user_avatar_size" />
                     <div class="flex-col gap-8">
                         <div class="size-16 fw" :style="user_name_style">昵称</div>
-                        <div v-if="id_bool" class="plr-6 ptb-1 radius-sm" :style="user_id_style">ID:88888888</div>
+                        <div v-if="id_bool" class="plr-6 ptb-1 radius-sm" :style="number_code_style">ID:88888888</div>
                     </div>
                 </div>
                 <div class="flex-row align-c" :class="'gap-' + base_data.img_space">
@@ -18,7 +18,7 @@
             </div>
             <div class="flex-row jc-sa align-c">
                 <template v-for="(item, index) in stats_list" :key="index">
-                    <div v-if="user_info.includes(item.id)" class="tc">
+                    <div v-if="config.includes(item.id)" class="tc">
                         <div class="size-16 fw mb-6" :style="stats_number_style">{{ item.value }}</div>
                         <div class="size-12" :style="stats_name_style">{{ item.name }}</div>
                     </div>
@@ -39,21 +39,21 @@ const style = ref('');
 const style_container = ref('');
 const id_bool = ref(true);
 const stats_list = reactive([
-    { id: '1', name: '订单总数', value: '100' },
+    { id: 'order_count', name: '订单总数', value: '100' },
-    { id: '2', name: '商品收藏', value: '10' },
+    { id: 'goods_favor_count', name: '商品收藏', value: '10' },
-    { id: '3', name: '我的足迹', value: '1000' },
+    { id: 'goods_browse_count', name: '我的足迹', value: '1000' },
-    { id: '4', name: '我的积分', value: '10000' },
+    { id: 'integral_number', name: '我的积分', value: '10000' },
 ]);
 interface icon_params {
     id: string;
     img: uploadList[];
     icon: string;
-    link: string;
+    link: pageLinkList;
 }
-const user_info = ref<string[]>(['1', '2', '3', '4']);
+const config = ref<string[]>(['order_count', 'goods_favor_count', 'goods_browse_count', 'integral_number']);
 const icon_setting = ref<icon_params[]>([
-    { id: '1', img: [], icon: '', link: 'a' },
+    { id: '1', img: [], icon: '', link: {} },
-    { id: '2', img: [], icon: '', link: 'a' },
+    { id: '2', img: [], icon: '', link: {} },
 ]);
 const base_data = reactive({
     // 头像大小
@@ -65,18 +65,18 @@ const base_data = reactive({
     // 用户名字号
     user_name_size: 16,
     // 用户ID颜色
-    user_id_color_list: [
+    number_code_color_list: [
         { color: 'rgba(254, 184, 143, 1)', color_percentage: undefined },
         { color: 'rgba(255, 227, 220, 1)', color_percentage: undefined },
     ],
     // 用户ID颜色
-    user_id_color: 'rgba(0, 0, 0, 1)',
+    number_code_color: 'rgba(0, 0, 0, 1)',
     // 用户ID方向
-    user_id_direction: '90deg',
+    number_code_direction: '90deg',
     // 用户ID样式
-    user_id_weight: '400',
+    number_code_weight: '400',
     // 用户ID字号
-    user_id_size: 10,
+    number_code_size: 10,
     // 图片大小
     img_size: '23',
     // 图片间距
@@ -96,7 +96,7 @@ const base_data = reactive({
 });
 // 样式
 const user_name_style = ref('');
-const user_id_style = ref('');
+const number_code_style = ref('');
 const stats_name_style = ref('');
 const stats_number_style = ref('');
 watch(
@@ -105,9 +105,9 @@ watch(
         const content = newVal?.content;
         const new_style = newVal?.style;
         if (content) {
-            user_info.value = content?.user_info;
+            config.value = content?.config;
             icon_setting.value = content?.icon_setting;
-            id_bool.value = user_info.value ? user_info.value.includes('5') : true;
+            id_bool.value = config.value ? config.value.includes('5') : true;
         }
         if (new_style) {
             // 头像
@@ -117,11 +117,11 @@ watch(
             base_data.user_name_weight = new_style.user_name_weight;
             base_data.user_name_size = new_style.user_name_size;
             // id
-            base_data.user_id_color_list = new_style.user_id_color_list;
+            base_data.number_code_color_list = new_style.number_code_color_list;
-            base_data.user_id_color = new_style.user_id_color;
+            base_data.number_code_color = new_style.number_code_color;
-            base_data.user_id_direction = new_style.user_id_direction;
+            base_data.number_code_direction = new_style.number_code_direction;
-            base_data.user_id_weight = new_style.user_id_weight;
+            base_data.number_code_weight = new_style.number_code_weight;
-            base_data.user_id_size = new_style.user_id_size;
+            base_data.number_code_size = new_style.number_code_size;
             // 图标设置
             base_data.img_size = new_style.img_size;
             base_data.img_space = new_style.img_space;
@@ -139,10 +139,10 @@ watch(
 
         // id样式
         const new_gradient_obj = {
-            color_list: base_data.user_id_color_list,
+            color_list: base_data.number_code_color_list,
-            direction: base_data.user_id_direction,
+            direction: base_data.number_code_direction,
         };
-        user_id_style.value = gradient_computer(new_gradient_obj) + 'color:' + base_data.user_id_color + ';' + 'font-size:' + base_data.user_id_size + 'px;' + 'font-weight:' + base_data.user_id_weight + ';';
+        number_code_style.value = gradient_computer(new_gradient_obj) + 'color:' + base_data.number_code_color + ';' + 'font-size:' + base_data.number_code_size + 'px;' + 'font-weight:' + base_data.number_code_weight + ';';
 
         // 统计名称样式
         stats_name_style.value = 'color:' + base_data.stats_name_color + ';' + 'font-size:' + base_data.stats_name_size + 'px;' + 'font-weight:' + base_data.stats_name_weight + ';';

src/components/model-user-info/model-user-info-content.vue

@@ -4,7 +4,7 @@
             <card-container class="mb-8">
                 <div class="mb-12">展示设置</div>
                 <el-form-item label="是否展示">
-                    <el-checkbox-group v-model="form.user_info">
+                    <el-checkbox-group v-model="form.config">
                         <el-checkbox v-for="(item, index) in base_info_list" :key="index" :value="item.value">{{ item.name }}</el-checkbox>
                     </el-checkbox-group>
                 </el-form-item>

src/components/model-user-info/model-user-info-styles.vue

@@ -33,19 +33,19 @@
                 <el-form-item label="底部背景">
                     <div class="flex-col gap-10 w">
                         <div class="size-12">背景色</div>
-                        <mult-color-picker :value="form.user_id_color_list" :type="form.user_id_direction" @update:value="mult_color_picker_event"></mult-color-picker>
+                        <mult-color-picker :value="form.number_code_color_list" :type="form.number_code_direction" @update:value="mult_color_picker_event"></mult-color-picker>
                     </div>
                 </el-form-item>
                 <el-form-item label="id颜色">
-                    <color-picker v-model="form.user_id_color"></color-picker>
+                    <color-picker v-model="form.number_code_color"></color-picker>
                 </el-form-item>
                 <el-form-item label="名称样式">
-                    <el-radio-group v-model="form.user_id_weight">
+                    <el-radio-group v-model="form.number_code_weight">
                         <el-radio v-for="item in font_weight" :key="item.value" :value="item.value">{{ item.name }}</el-radio>
                     </el-radio-group>
                 </el-form-item>
                 <el-form-item label="字号">
-                    <slider v-model="form.user_id_size"></slider>
+                    <slider v-model="form.number_code_size"></slider>
                 </el-form-item>
             </card-container>
 
@@ -113,8 +113,8 @@ const font_weight = reactive([
 // 默认值
 let form = ref(props.value);
 const mult_color_picker_event = (arry: string[], type: number) => {
-    form.value.user_id_color_list = arry;
+    form.value.number_code_color_list = arry;
-    form.value.user_id_direction = type.toString();
+    form.value.number_code_direction = type.toString();
 };
 const common_styles_update = (val: Object) => {
     form.value.common_style = val;

src/views/layout/components/main/default/user-info.ts

@@ -1,7 +1,7 @@
 import defaultCommon from './index';
 interface DefaultUserInfo {
     content: {
-        user_info: string[];
+        config: string[];
         icon_setting: { id: string; img: uploadList[]; link: object; icon: string }[];
     };
     style: {
@@ -9,11 +9,11 @@ interface DefaultUserInfo {
         user_name_color: string;
         user_name_weight: string;
         user_name_size: number;
-        user_id_color_list: color_list[];
+        number_code_color_list: color_list[];
-        user_id_color: string;
+        number_code_color: string;
-        user_id_direction: string;
+        number_code_direction: string;
-        user_id_weight: string;
+        number_code_weight: string;
-        user_id_size: number;
+        number_code_size: number;
         img_size: string;
         img_space: string;
         stats_name_color: string;
@@ -27,7 +27,7 @@ interface DefaultUserInfo {
 }
 const defaultUserInfo: DefaultUserInfo = {
     content: {
-        user_info: ['1', '2', '3', '4', '5'],
+        config: ['order_count', 'goods_favor_count', 'goods_browse_count', 'integral_number'],
         icon_setting: [
             { id: '1', img: [], icon: 'applet-me-settings-acquiesce', link: {} },
             { id: '2', img: [], icon: 'applet-me-message-acquiesce', link: {} },
@@ -38,14 +38,14 @@ const defaultUserInfo: DefaultUserInfo = {
         user_name_color: 'rgba(0, 0, 0, 1)',
         user_name_weight: '500',
         user_name_size: 16,
-        user_id_color_list: [
+        number_code_color_list: [
             { color: 'rgba(254, 184, 143, 1)', color_percentage: undefined },
             { color: 'rgba(255, 227, 220, 1)', color_percentage: undefined },
         ],
-        user_id_color: 'rgba(0, 0, 0, 1)',
+        number_code_color: 'rgba(0, 0, 0, 1)',
-        user_id_direction: '90deg',
+        number_code_direction: '90deg',
-        user_id_weight: '400',
+        number_code_weight: '400',
-        user_id_size: 10,
+        number_code_size: 10,
         img_size: '23',
         img_space: '25',
         stats_name_color: 'rgba(0, 0, 0, 1)',