refactor(system): 优化游戏导航功能

- 移除了 GameNavigatorBo 接口中的重复属性
- 调整了导航栏样式，使用更浅的背景色和边框色
- 更新了 API 请求的 baseURL
- 优化了游戏导航组件的代码结构，提高了可维护性
- 移除了未使用的颜色转换函数，简化了颜色处理逻辑

src/api/system/common/nav/gameNavigator.ts

@@ -33,17 +33,6 @@ export interface GameNavigatorBo {
   sortNum?: number;
   status?: number;
   remark?: string;
-  navId?: number;
-  name?: string;
-  pic?: string;
-  color?: string;
-  jumpType?: number;
-  jumpPath?: string;
-  activityType?: number;
-  appId?: string;
-  sortNum?: number;
-  status?: number;
-  remark?: string;
 }
 
 // 赛事关联菜单查询参数
@@ -157,5 +146,4 @@ export function editRelate(data: EditRelateMenuParams) {
     method: 'post',
     data: data
   });
-  });
 }

src/layout/components/Navbar.vue

@@ -274,9 +274,9 @@ watch(
     gap: 8px;
     padding: 0 16px;
     height: 100%;
-    background: rgba(64, 158, 255, 0.1);
+    background: rgba(248, 249, 250, 0.1);
     border-radius: 4px;
-    border: 1px solid rgba(64, 158, 255, 0.2);
+    border: 1px solid rgba(243, 245, 247, 0.2);
 
     .event-icon {
       font-size: 16px;

src/utils/request.ts

@@ -27,9 +27,9 @@ axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8';
 axios.defaults.headers['clientid'] = import.meta.env.VITE_APP_CLIENT_ID;
 // 创建 axios 实例
 const service = axios.create({
-  baseURL: import.meta.env.VITE_APP_BASE_API,
+  // baseURL: import.meta.env.VITE_APP_BASE_API,
   // baseURL: 'http://192.168.1.126:8080',
-  // baseURL: 'http://meet2.sportsrobo.club:8080',
+  baseURL: 'http://meet2.sportsrobo.club:8080',
   // baseURL: 'http://localhost:8080',
   timeout: 300000 // 增加默认超时时间到5分钟
 });

src/views/system/common/nav/components/GameNavigator.vue

@@ -37,16 +37,6 @@
         <el-col :span="1.5">
           <el-button type="primary" icon="Plus" @click="handleAdd"> 添加菜单</el-button>
         </el-col>
-        <!-- <el-col :span="1.5">
-          <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()"
-            >修改
-          </el-button>
-        </el-col>
-        <el-col :span="1.5">
-          <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()"
-            >删除
-          </el-button>
-        </el-col> -->
         <right-toolbar v-model:showSearch="showSearch" :columns="columns" @queryTable="loadNavData"></right-toolbar>
       </el-row>
     </el-card>
@@ -54,13 +44,12 @@
     <!-- 菜单列表 -->
     <el-card class="list-card">
       <el-table v-loading="loading" :data="navItems" @selection-change="handleSelectionChange" style="width: 100%">
-      <template #header>
-        <div class="list-header">
-          <span>菜单列表</span>
-          <span class="result-count">共找到 {{ total }} 条记录</span>
-        </div>
-      </template>
-      <el-table v-loading="loading" :data="navItems" @selection-change="handleSelectionChange" style="width: 100%">
+        <template #header>
+          <div class="list-header">
+            <span>菜单列表</span>
+            <span class="result-count">共找到 {{ total }} 条记录</span>
+          </div>
+        </template>
         <el-table-column type="selection" width="55" align="center" />
         <el-table-column label="序号" align="center" width="80" v-if="columns[0].visible">
           <template #default="scope">
@@ -78,11 +67,6 @@
             <img :src="scope.row.pic" style="width: 50px; height: 50px" />
           </template>
         </el-table-column>
-        <el-table-column label="颜色" align="center" prop="color" width="150" v-if="columns[4].visible">
-          <template #default="scope">
-            <el-color-picker v-model="scope.row.color" size="large" :disabled="true" />
-          </template>
-        </el-table-column>
         <el-table-column label="颜色" align="center" prop="color" width="150" v-if="columns[4].visible">
           <template #default="scope">
             <div
@@ -191,8 +175,6 @@
               <div class="color-input-group">
                 <el-color-picker v-model="form.color" size="large" class="color-picker" @change="handleColorChange" />
                 <el-input v-model="colorInput" placeholder="#RRGGBB" class="color-input" @input="handleColorInput" @blur="validateColorInput" />
-                <el-color-picker v-model="form.color" show-alpha size="large" class="color-picker" @change="handleColorChange" />
-                <el-input v-model="colorInput" placeholder="#RRGGBB" class="color-input" @input="handleColorInput" @blur="validateColorInput" />
               </div>
             </el-form-item>
           </el-col>
@@ -335,9 +317,9 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted, computed } from 'vue';
+import { ref, reactive, onMounted, computed, getCurrentInstance, toRefs } from 'vue';
 import { ElMessage, ElMessageBox } from 'element-plus';
-import { HomeFilled, Plus } from '@element-plus/icons-vue';
+import { Plus, ArrowDown } from '@element-plus/icons-vue';
 import {
   getEnabledNavigator,
   getNavigator,
@@ -348,8 +330,16 @@ import {
   type GameNavigatorBo,
   listNavigator
 } from '@/api/system/common/nav/gameNavigator';
+import { globalHeaders } from '@/utils/request';
 
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+// 类型定义
+interface FieldOption {
+  key: number;
+  label: string;
+  visible: boolean;
+}
+
+const { proxy } = getCurrentInstance() as any;
 const { game_activity_type } = toRefs<any>(proxy?.useDict('game_activity_type'));
 
 // 计算下一个排序值
@@ -392,13 +382,6 @@ interface NavItem extends GameNavigatorVo {
 // 表单数据
 const navItems = ref<NavItem[]>([]);
 const formRef = ref();
-const form = reactive<
-  GameNavigatorBo & {
-    createTime?: string;
-    updateTime?: string;
-  }
->({
-const formRef = ref();
 const queryRef = ref();
 const form = reactive<
   GameNavigatorBo & {
@@ -414,7 +397,7 @@ const form = reactive<
   jumpPath: '',
   activityType: 1,
   appId: '',
-  sortNum: 1, // 初始值，会在使用时动态更新
+  sortNum: 1,
   status: 0,
   remark: '',
   createTime: '',
@@ -448,18 +431,7 @@ const rules = {
   sortNum: [{ required: true, message: '请输入排序', trigger: 'blur' }]
 };
 
-// 添加跳转链接验证函数
-function validateJumpPath(rule: any, value: string, callback: Function) {
-  if (value && !/^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/.test(value)) {
-    callback(new Error('请输入有效的URL'));
-  } else {
-    callback();
-  }
-}
-
 // 上传相关
-import { globalHeaders } from '@/utils/request';
-
 const uploadUrl = import.meta.env.VITE_APP_BASE_API + '/resource/oss/upload';
 const headers = globalHeaders();
 
@@ -523,9 +495,6 @@ function getMaxSortNum(): number {
 async function loadNavData() {
   loading.value = true
   try {
-    const response = await getEnabledNavigator();
-    if (response.code === 200 && response.data) {
-      navItems.value = response.data as unknown as NavItem[];
     // 构建查询参数
     const query: any = {
       pageNum: 1,
@@ -544,13 +513,10 @@ async function loadNavData() {
       navItems.value = (response as any).rows || [];
       total.value = (response as any).total || 0;
     } else {
-      navItems.value = [];
       navItems.value = [];
       total.value = 0;
     }
   } catch (error) {
-    console.error('加载数据失败:', error);
-    navItems.value = [];
     console.error('加载数据失败:', error);
     navItems.value = [];
     total.value = 0;
@@ -596,7 +562,6 @@ async function handleSortChange(row: NavItem) {
     const response = await updateNavigator({
       navId: row.navId,
       sortNum: row.sortNum
-      // type: '4'
     });
     if (response.code === 200) {
       ElMessage.success('排序更新成功');
@@ -646,7 +611,6 @@ function handleView(row: NavItem) {
 function handleEdit(item: NavItem) {
   reset();
   const normalizedColor = normalizeColor(item.color || '#409EFF');
-  reset();
   const formData = {
     navId: item.navId,
     name: item.name,
@@ -663,11 +627,6 @@ function handleEdit(item: NavItem) {
     updateTime: item.updateTime
   };
   Object.assign(form, formData);
-  colorInput.value = item.color || '#409EFF';
-  dialogVisible.value = true;
-  dialogTitle.value = '修改菜单';
-  };
-  Object.assign(form, formData);
   colorInput.value = normalizedColor;
   dialogVisible.value = true;
   dialogTitle.value = '修改菜单';
@@ -683,9 +642,6 @@ function handleAdd() {
   colorInput.value = form.color;
   dialogVisible.value = true;
   dialogTitle.value = '添加菜单';
-  form.sortNum = nextSortNum.value;
-  dialogVisible.value = true;
-  dialogTitle.value = '添加菜单';
 }
 
 // 处理删除
@@ -731,7 +687,6 @@ async function handleSubmit() {
       remark: form.remark,
       createTime: form.createTime,
       updateTime: form.updateTime,
-      // type: '4' // 菜单固定类型
     }
 
     let response
@@ -773,9 +728,6 @@ function reset() {
     createTime: '',
     updateTime: ''
   });
-  colorInput.value = defaultColor;
-  formRef.value?.clearValidate();
-  });
   colorInput.value = '#409EFF';
   formRef.value?.clearValidate();
 }
@@ -818,26 +770,6 @@ function handleIconSuccess(response: any) {
 // 颜色输入框的值
 const colorInput = ref('#409EFF')
 
-// 将RGB颜色转换为16进制
-const rgbToHex = (rgb: string): string => {
-  // 如果是16进制格式，直接返回
-  if (rgb.startsWith('#')) {
-    return rgb
-  }
-
-  // 如果是RGB格式，转换为16进制
-  const rgbMatch = rgb.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/)
-  if (rgbMatch) {
-    const r = parseInt(rgbMatch[1])
-    const g = parseInt(rgbMatch[2])
-    const b = parseInt(rgbMatch[3])
-    return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`
-  }
-
-  // 如果无法解析，返回默认值
-  return '#409EFF';
-};
-
 // 将任意颜色格式统一转换为16进制
 const normalizeColor = (color: string): string => {
   if (!color) return '#409EFF';
@@ -859,8 +791,6 @@ const normalizeColor = (color: string): string => {
   // 尝试解析其他格式或返回默认值
   return '#409EFF';
 };
-  return '#409EFF';
-};
 
 // 处理颜色输入框变化
 const handleColorInput = (value: string) => {
@@ -877,8 +807,6 @@ const handleColorChange = (value: string) => {
     const hexValue = normalizeColor(value);
     form.color = hexValue;
     colorInput.value = hexValue;
-    const hexValue = rgbToHex(value);
-    colorInput.value = hexValue;
   }
 }
 
@@ -888,8 +816,6 @@ const validateColorInput = () => {
   if (!hexRegex.test(colorInput.value)) {
     ElMessage.warning('请输入正确的16进制颜色格式，如 #FF0000');
     colorInput.value = form.color;
-    ElMessage.warning('请输入正确的16进制颜色格式，如 #FF0000');
-    colorInput.value = form.color;
   } else {
     // 验证通过，确保表单中的颜色值也是16进制格式
     form.color = colorInput.value;
@@ -898,7 +824,6 @@ const validateColorInput = () => {
 
 // 初始化数据
 onMounted(() => {
-  loadNavData();
   // 初始化排序值
   form.sortNum = nextSortNum.value;
   // 确保初始颜色值为16进制格式
@@ -906,8 +831,6 @@ onMounted(() => {
   colorInput.value = form.color;
   // 加载初始数据
   loadNavData();
-});
-  form.sortNum = nextSortNum.value;
 });
 </script>
 
@@ -1122,5 +1045,3 @@ onMounted(() => {
   min-width: 120px;
 }
 </style>
-
-</style>