大屏页面初始化

screen-vue/src/components/Layout/index.vue

@@ -163,10 +163,6 @@
 import { ref, watch, onMounted, onUnmounted, nextTick } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import {
-  ArrowDown, Lock, SwitchButton, User, FullScreen, Monitor,
-  Expand, Fold, Close, ArrowLeft, ArrowRight, Menu, House
-} from '@element-plus/icons-vue'
 import { getUserMenuList } from '@/api/bizMenu'
 import LogoImg from '@/assets/logo.png'
 import EditPswd from './components/editPswd.vue'

screen-vue/src/router/index.js

@@ -5,7 +5,7 @@ import Layout from '@/components/Layout/index.vue'
 import Dashboard from '@/views/desktop/index.vue'
 import bigScreen from '@/views/screen/index.vue'
 
-const modules = import.meta.glob('../views/**/index.vue', { 
+const modules = import.meta.glob('../views/**/{index,list}.vue', { 
   eager: false,
   import: 'default'
 })
@@ -41,7 +41,7 @@ const generateRoutes = () => {
       component: module
     })
   })
-
+  
   return routes
 }
 

screen-vue/src/views/desktop/index.vue

@@ -1,313 +1,203 @@
 <template>
-  <div class="search-list-page">
+  <div class="layout-container">
-    <div class="search-section">
+    <div class="header-section">
-      <div class="search-wrapper">
+      <el-card shadow="hover" class="header-card">
-        <el-input
+        <div class="header-content">
-          v-model="searchForm.websiteName"
+          <UserTop 
-          placeholder="请输入搜索网站名称"
+            userName="超级管理员"
-          class="search-input"
+            weatherInfo="今日小雪;夜间:多云;温度:(-4.0℃ 至 2.0℃);东北风/1-3级"
-          clearable
+          />
-          @keyup.enter="handleSearch"
-        />
-        <div class="search-btn-group">
-          <el-button type="primary" icon="Search" @click="handleSearch">查询</el-button>
-          <el-button icon="Refresh" @click="handleReset">重置</el-button>
         </div>
-      </div>
+      </el-card>
     </div>
-
+    <div class="main-section">
-    <div class="list-wrapper">
+      <div class="left-section">
-      <div class="list-section">
+        <el-card shadow="hover" class="card-item card-1">
-        <div v-if="listData.length === 0" class="empty-tip">
+          <NoteLeft />
-          <el-empty description="暂无数据" />
+        </el-card>
+        <el-card shadow="hover" class="card-item card-2">
+          <AlertMain />
+        </el-card>
+        <el-card shadow="hover" class="card-item card-3">
+          <QuickLogin />
+        </el-card>
+      </div>
+      <div class="right-section">
+        <div class="right-top-section">
+          <el-card class="right-card right-top-card">
+            <div class="right-placeholder">上区域内容</div>
+          </el-card>
         </div>
-        <div v-else class="card-list">
+        <div class="right-bottom-section">
-          <el-card
+          <el-card class="right-card right-bottom-card">
-            v-for="item in listData"
+            <div class="right-placeholder">下区域内容</div>
-            :key="item.websiteId"
-            class="list-card"
-            shadow="hover"
-          >
-            <div class="card-top">
-              <div class="site-main">
-                <el-tooltip :content="item.websiteName" placement="top">
-                  <div class="site-name">{{ item.websiteName }}</div>
-                </el-tooltip>
-                <el-tooltip :content="item.websiteUrl" placement="top">
-                  <div class="site-url">{{ item.websiteUrl }}</div>
-                </el-tooltip>
-              </div>
-            </div>
-            <div class="card-divider"></div>
-            <div class="card-bottom">
-              <span class="card-date">{{ item.createTime }}</span>
-              <div class="card-actions">
-                <el-button size="small" type="primary" link @click="handleVisit(item)">
-                  <el-icon><Link /></el-icon>
-                  访问
-                </el-button>
-              </div>
-            </div>
           </el-card>
         </div>
       </div>
     </div>
-    <div class="pagination-footer">
-      <el-pagination
-        v-model:current-page="pagination.pageNum"
-        v-model:page-size="pagination.pageSize"
-        :page-sizes="[20, 50, 99]"
-        :total="pagination.total"
-        layout="total, sizes, prev, pager, next, jumper"
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-        background
-      />
-    </div>
   </div>
 </template>
 
 <script setup>
-import { ref, reactive, onMounted } from 'vue'
+import { ref } from 'vue'
-import { ElMessage } from 'element-plus'
+import UserTop from './components/UserTop.vue';
-import { Link } from '@element-plus/icons-vue'
+import NoteLeft from './components/Note.vue'
-import { getWebsiteStorageList } from '@/api/bizWebsiteStorage'
+import AlertMain from './components/Alert.vue'
-
+import QuickLogin from './components/Quick.vue'
-const searchForm = reactive({
-  websiteName: ''
-})
-
-const pagination = reactive({
-  pageNum: 1,
-  pageSize: 20,
-  total: 0
-})
-
-const listData = ref([])
-const getDataList = async () => {
-  try {
-    const reqParmas = {
-      ...searchForm,
-      pageNum: pagination.pageNum,
-      pageSize: pagination.pageSize,
-    }
-    const res = await getWebsiteStorageList(reqParmas)
-    listData.value = res.list || []
-    pagination.total = res.total
-  } catch (error) {
-    console.log(error)
-  }
-}
-
-const handleVisit = (item) => {
-  window.open(item.websiteUrl, '_blank')
-}
-
-const handleSearch = () => {
-  pagination.pageNum = 1
-  getDataList()
-}
-
-const handleReset = () => {
-  Object.assign(searchForm, {
-    websiteName: ''
-  })
-  pagination.pageNum = 1
-  getDataList()
-}
-
-const handleSizeChange = (val) => {
-  pagination.pageSize = val
-  getDataList()
-}
-
-const handleCurrentChange = (val) => {
-  pagination.pageNum = val
-  getDataList()
-}
-
-onMounted(() => {
-  getDataList()
-})
 </script>
 
 <style scoped>
-.search-list-page {
+.layout-container {
   width: 100%;
-  height: 100%;
+  height: 100%; 
-  padding: 16px;
-  box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  overflow: hidden !important;
+  padding: 8px;
-}
+  gap: 8px;
-
-.search-section {
-  width: 100%;
-  margin-bottom: 16px;
-  flex-shrink: 0;
-  padding-bottom: 12px;
-  border-bottom: 1px solid #e5e7eb;
-}
-
-.search-wrapper {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  width: 100%;
-}
-
-.search-input {
-  flex: 1;
-}
-
-.search-btn-group {
-  display: flex;
-  gap: 2px;
-  flex-shrink: 0;
-}
-
-.list-wrapper {
-  flex: 1;
-  width: 100%;
   overflow: hidden;
-  min-height: 0;
+  background-color: #f5f7fa;
-  border: 1px solid #e5e7eb;
-  border-radius: 6px;
-  margin-bottom: 12px;
-}
-
-.list-section {
-  width: 100%;
-  height: 100%;
-  overflow-y: auto !important;
-  overflow-x: hidden !important;
-  padding: 12px;
   box-sizing: border-box;
 }
 
-.empty-tip {
+.header-section {
+  height: 10%;
   width: 100%;
+  box-sizing: border-box;
+}
+
+.header-card {
   height: 100%;
   display: flex;
-  align-items: center;
+  align-items: stretch !important;
-  justify-content: center;
+  justify-content: stretch !important;
-}
+  font-size: 16px;
-
+  font-weight: 600;
-.card-list {
+  box-sizing: border-box;
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
-  gap: 16px;
-  padding: 8px;
-}
-
-.list-card {
   transition: all 0.3s ease;
-  cursor: pointer;
-  border-radius: 12px;
-  overflow: hidden;
-  border: 1px solid #f0f0f0 !important;
 }
 
-.list-card:hover {
+.header-content {
-  transform: translateY(-4px);
+  width: 100%;
-  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08) !important;
+  height: 100%;
-  border-color: #409eff !important;
 }
 
-.card-top {
+.main-section {
+  height: 90%;
+  width: 100%;
   display: flex;
-  align-items: flex-start;
+  gap: 8px;
-  gap: 12px;
+  box-sizing: border-box;
-  padding: 6px 12px 4px;
-}
-
-.site-main {
-  flex: 1;
   min-width: 0;
 }
 
-.site-name {
+.left-section {
-  font-weight: 600;
+  width: 35%;
-  font-size: 16px;
+  height: 100%;
-  color: #1f2937;
-  margin-bottom: 2px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.site-url {
-  font-size: 13px;
-  color: #9ca3af;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  cursor: pointer;
-}
-
-.site-url:hover {
-  color: #409eff;
-  text-decoration: underline;
-}
-
-.card-divider {
-  height: 1px;
-  background: #f0f0f0;
-  margin: 0 12px;
-}
-
-.card-bottom {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 8px 12px 8px;
-}
-
-.card-date {
-  font-size: 12px;
-  color: #9ca3af;
-}
-
-.card-actions {
   display: flex;
+  flex-direction: column;
   gap: 8px;
-}
+  box-sizing: border-box;
-
-.pagination-footer {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  padding: 8px 0;
-  border: 1px solid #e5e7eb;
-  border-radius: 6px;
   flex-shrink: 0;
-  background: #fff;
+  overflow: hidden;
-  z-index: 10;
 }
 
-.list-section::-webkit-scrollbar {
+.card-item {
-  width: 6px;
+  flex: 1;
-  height: 6px;
+  display: flex;
+  align-items: stretch !important;
+  justify-content: stretch !important;
+  font-size: 14px;
+  font-weight: 500;
+  box-sizing: border-box;
+  transition: all 0.3s ease;
+  min-height: 80px;
 }
 
-.list-section::-webkit-scrollbar-track {
+.right-section {
-  background: #f1f5f9;
+  flex: 1;
-  border-radius: 3px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  box-sizing: border-box;
+  flex-shrink: 0;
+  overflow: hidden;
 }
 
-.list-section::-webkit-scrollbar-thumb {
+.right-top-section {
-  background: #cbd5e1;
+  height: 50%;
-  border-radius: 3px;
+  width: 100%;
+  box-sizing: border-box;
 }
 
-.list-section::-webkit-scrollbar-thumb:hover {
+.right-bottom-section {
-  background: #94a3b8;
+  height: 50%;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.right-card {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #999;
+  font-size: 16px;
+  box-sizing: border-box;
+  border-radius: 8px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.04);
+  transition: all 0.3s ease;
+  background-color: #fff;
+}
+
+.right-card:hover {
+  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.08);
+  transform: translateY(-2px);
+}
+
+.right-placeholder {
+  padding: 4px;
+  text-align: center;
+}
+
+:deep(.el-card) {
+  border-radius: 8px;
+  height: 100%;
+  padding: 0 !important;
+  margin: 0 !important;
+}
+
+:deep(.el-card__body) {
+  padding: 4px !important;
+  margin: 0 !important;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+:deep(.el-card:hover) {
+  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.08);
+  transform: translateY(-2px);
 }
 
 @media (max-width: 768px) {
-  .card-list {
+  .main-section {
-    grid-template-columns: 1fr;
+    flex-direction: column;
+  }
+  .left-section, .right-section {
+    width: 100%;
+    height: 50%;
+    flex: none;
+  }
+  .left-section {
+    flex-direction: row;
+  }
+  .card-item {
+    min-width: 120px;
+    min-height: auto;
+  }
+  
+  .right-top-section, .right-bottom-section {
+    height: 50%;
   }
 }
 </style>

screen-vue/src/views/system/menu/form.vue

@@ -22,7 +22,7 @@
         <el-form-item label="菜单名称" prop="menuName">
           <el-input 
             v-model="formData.menuName" 
-            placeholder="请输入用户名称"
+            placeholder="请输入菜单名称"
             clearable
           />
         </el-form-item>
@@ -61,14 +61,15 @@
             v-model="formData.sort" 
             placeholder="请输入菜单序号"
             clearable
+            type="number"
           />
         </el-form-item>
       </div>
       <div class="form-col">
-        <el-form-item label="外链类别" prop="isIframe">
+        <el-form-item label="是否外链" prop="isIframe">
           <el-select 
             v-model="formData.isIframe" 
-            placeholder="请选择外链类别"
+            placeholder="请选择是否外链"
             clearable
           >
             <el-option label="否" value="0" />
@@ -83,12 +84,23 @@
         <el-form-item label="菜单图标" prop="menuIcon">
           <el-select 
             v-model="formData.menuIcon" 
-            placeholder="请选择菜单图标"
             clearable
+            filterable
+            placeholder="输入图标名称"
           >
-            <el-option label="模块A" value="0" />
+            <el-option 
-            <el-option label="模块B" value="1" />
+              v-for="iconName in iconList" 
-            <el-option label="模块C" value="2" />
+              :key="iconName" 
+              :label="iconName" 
+              :value="iconName"
+            >
+              <div class="icon-option-item">
+                <el-icon :size="16" class="option-icon">
+                  <component :is="iconName" />
+                </el-icon>
+                <span class="option-text">{{ iconName }}</span>
+              </div>
+            </el-option>
           </el-select>
         </el-form-item>
       </div>
@@ -110,7 +122,8 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 
 const props = defineProps({
   formData: {
@@ -121,8 +134,8 @@ const props = defineProps({
       menuName: '',
       menuType: '',
       path: '',
-      sort: '',
+      sort: 0,
-      isIframe : '',
+      isIframe: '',
       menuIcon: '',
       ustatus: '1',
     })
@@ -135,12 +148,26 @@ const props = defineProps({
 
 const formRef = ref(null)
 
+const iconList = computed(() => {
+  return Object.keys(ElementPlusIconsVue).filter(name => 
+    !name.includes('Internal') && !name.includes('Icon')
+  )
+})
+
 const formRules = {
-  parentId: [ { required: true, message: '请选择父级菜单', trigger: 'blur' } ],
+  parentId: [ { required: true, message: '请选择父级菜单', trigger: 'change' } ],
-  menuName: [ { required: true, message: '请输入菜单名称', trigger: 'blur' } ],
+  menuName: [ 
+    { required: true, message: '请输入菜单名称', trigger: 'blur' },
+  ],
   menuType: [ { required: true, message: '请选择菜单类型', trigger: 'change' } ],
-  path: [ { required: true, message: '请输入路由地址', trigger: 'change' } ],
+  path: [ 
+    { required: true, message: '请输入路由地址', trigger: 'blur' },
+  ],
+  sort: [ 
+    { required: true, message: '请输入菜单序号', trigger: 'blur' },
+  ],
   isIframe: [ { required: true, message: '请选择外链类型', trigger: 'change' } ],
+  menuIcon: [ { required: true, message: '请选择菜单图标', trigger: 'change' } ],
   ustatus: [ { required: true, message: '请选择菜单状态', trigger: 'change' } ],
 }
 
@@ -170,6 +197,7 @@ defineExpose({ validate, resetForm })
   border: 1px solid rgba(64, 158, 255, 0.15);
   border-radius: 8px;
   box-sizing: border-box;
+  background: #fff;
 }
 
 .form-row {
@@ -180,5 +208,31 @@ defineExpose({ validate, resetForm })
   gap: 20px;
 }
 .form-row:last-child { margin-bottom: 0; }
-.form-col { flex: 1; min-width: 180px; }
+.form-col { flex: 1; min-width: 200px; }
+
+.icon-option-item {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 2px 0;
+}
+.option-icon {
+  color: #409eff;
+  flex-shrink: 0;
+}
+.option-text {
+  font-size: 14px;
+  color: #333;
+}
+
+:deep(.el-select), :deep(.el-input) {
+  width: 100%;
+}
+:deep(.el-form-item__label) {
+  font-weight: 500;
+  color: #333;
+}
+:deep(.el-select-dropdown__item) {
+  padding: 6px 12px;
+}
 </style>

screen-vue/src/views/system/menu/list.vue

@@ -51,12 +51,35 @@
 		  >
 			<template #columns>
 			  <el-table-column prop="menuName" label="菜单名称" width="225" :tree-node="true" />
-			  <el-table-column prop="menuType" label="菜单类型" />
+			  <el-table-column label="菜单类型" width="100">
+				<template #default="scope">
+				  <el-tag :type="scope.row.menuType === 'M' ? 'info' : scope.row.menuType === 'C' ? 'primary' : 'warning'">
+					{{ scope.row.menuType === 'M' ? '目录' : scope.row.menuType === 'C' ? '菜单' : '按钮' }}
+				  </el-tag>
+				</template>
+			  </el-table-column>
 			  <el-table-column prop="path" label="路由地址" width="225" />
 			  <el-table-column prop="sort" label="序号" sortable />
-			  <el-table-column prop="isIframe" label="是否外链" />
+			  <el-table-column label="是否外链" width="100">
-			  <el-table-column prop="menuIcon" label="图标" />
+				<template #default="scope">
-			  <el-table-column prop="ustatus" label="状态" sortable />
+				  <span>{{ scope.row.isIframe === '1' ? '是' : '否' }}</span>
+				</template>
+			  </el-table-column>
+			  <el-table-column label="图标" width="80">
+				<template #default="scope">
+				  <el-icon v-if="scope.row.menuIcon" :size="18" class="menu-icon">
+					<component :is="scope.row.menuIcon" />
+				  </el-icon>
+				  <span v-else class="no-icon-tip">-</span>
+				</template>
+			  </el-table-column>
+			  <el-table-column label="状态" width="100" sortable>
+				<template #default="scope">
+				  <el-tag :type="scope.row.ustatus === '1' ? 'success' : scope.row.ustatus === '0' ? 'danger' : 'warning'">
+					{{ scope.row.ustatus === '1' ? '在用' : scope.row.ustatus === '0' ? '停用' : '锁定' }}
+				  </el-tag>
+				</template>
+			  </el-table-column>
 			  <el-table-column label="操作" width="260" fixed="right" align="center">
 				<template #default="scope">
 				  <el-button type="primary" size="small" icon="Edit"
@@ -90,6 +113,7 @@
 
 <script setup>
 import { ref, reactive, watch , onMounted } from 'vue'
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import CSearch from '@/components/Search/proSearch.vue'
 import PDialog from '@/components/Dialog/proDialog.vue'
 import TreeTable from '@/components/Table/proTreeTable.vue'
@@ -145,7 +169,7 @@ const getTreeListData = async () => {
     const res = await getHomeMenuList(reqParams);
 	tableData.value = res || []
   } catch (error) {
-	  console.log(error);
+	console.log(error);
   } finally {
 	  loading.value = false
   }
@@ -168,14 +192,8 @@ const handleDelete = async (row) => {
 		type: 'warning'
 	  }
 	);
-	
-	// 这里调用删除接口
-	// const res = await deleteMenu(row.menuId);
-	// if (res.success) {
 	ElMessage.success('删除成功！');
-	// 删除后重新加载列表
 	getTreeListData();
-	// }
   } catch (error) {
 	console.error('删除失败', error);
   }
@@ -189,10 +207,8 @@ const handleAdd = () => {
 
 const handleExport = () => {
   console.log('导出菜单数据');
-  // 导出逻辑
 }
 
-
 const handleDialogClose = () => {
   formData.value = {}
   isEdit.value = false
@@ -218,7 +234,7 @@ const handleSave = async () => {
   setTimeout(() => {
     ElMessage.success(isEdit.value ? '编辑成功' : '新增成功')
     dialogVisible.value = false
-    getDataList()
+    getTreeListData()
   }, 500)
 }
 
@@ -278,8 +294,21 @@ onMounted(() => {
   margin-right: 4px;
 }
 
-/* 新增：操作按钮样式优化 */
 :deep(.operate-btn) {
   margin: 0 4px;
 }
+
+.menu-icon {
+  color: #409eff;
+}
+
+.no-icon-tip {
+  color: #999;
+  font-size: 12px;
+}
+
+:deep(.el-tag) {
+  font-size: 12px;
+  padding: 2px 8px;
+}
 </style>

screen-vue/src/views/system/role/index.vue

@@ -7,7 +7,15 @@
   >
     <template #sidebar>
       <div class="sidebar-content">
-       
+       <FilterSelect
+		 :list-data="listData"
+		 node-key="roleId"
+		 label-key="roleName"
+		 @item-click="handleItemClick" 
+		 @edit="handleEdit"
+		 @delete="handleDelete"
+		 @view="handleView"
+	   />
       </div>
     </template>
     <template #main>
@@ -19,9 +27,48 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
 import ResizablePage from '@/components/Layout/proResizable.vue'
+import FilterSelect from '@/components/Table/proFilterSelect.vue'
+
+import { getHomeRoleList } from '@/api/bizRole'
 import vUser from './list.vue'
+
+const FormValues = ref({
+  menuId: ''
+});
+
+const listData = ref([]);
+
+const getListData = async () => {
+  try {
+    const res = await getHomeRoleList();
+	listData.value = res || []
+  } catch (error) {
+	  console.log(error);
+  }
+}
+
+const handleItemClick = (item) => {
+  console.log('选中了：', item)
+}
+
+// 操作事件处理
+const handleEdit = (item) => {
+  console.log('编辑', item)
+}
+
+const handleDelete = (item) => {
+  console.log('删除', item)
+}
+
+const handleView = (item) => {
+  console.log('查看', item)
+}
+
+onMounted(() => {
+	getListData();
+})
 </script>
 
 <style scoped>