✨ feat: 完善显示结构，新增主题色控制

hookehuyr
Commit 4fc3e79163c39e7545c875d09a8e13085036f805 4fc3e791 1 parent 24f1c0fd
Showing 5 changed files with 245 additions and 27 deletions
package.json
src/assets/styles/element.scss
src/main.js
src/views/index.vue
yarn.lock
--- a/package.json
View file @4fc3e79
+++ b/package.json
View file @4fc3e79
 {
-  "name": "temple_material_request",
+  "name": "custom-table",
-  "description": "西园寺物资申请系统",
+  "description": "自定义表格",
   "version": "1.0.0",
   "scripts": {
     "dev": "vite",
@@ -36,6 +36,7 @@
   },
   "dependencies": {
     "@dedisuryadi/json-form-data": "^0.1.1",
+    "@element-plus/icons-vue": "^2.3.1",
     "@tinymce/tinymce-vue": "4.0.7",
     "@vant/area-data": "^1.3.1",
     "@vant/touch-emulator": "^1.4.0",
@@ -82,6 +83,7 @@
     "pinia": "^2.0.14",
     "postcss-px-to-viewport": "^1.1.1",
     "qs": "^6.10.3",
+    "sass": "^1.78.0",
     "tslint": "^6.1.3",
     "unplugin-auto-import": "^0.8.8",
     "unplugin-vue-components": "^0.23.0",
--- a/src/assets/styles/element.scss 0 → 100644
View file @4fc3e79
+++ b/src/assets/styles/element.scss 0 → 100644
View file @4fc3e79
+
+@forward 'element-plus/theme-chalk/src/common/var.scss' with (
+  $colors: (
+    'white': #ffffff,
+    'black': #000000,
+    'primary': (
+      'base': #C2915F,
+    ),
+    'success': (
+      'base': #67c23a,
+    ),
+    'warning': (
+      'base': #e6a23c,
+    ),
+    'danger': (
+      'base': #f56c6c,
+    ),
+    'error': (
+      'base': #f56c6c,
+    ),
+    'info': (
+      'base': #909399,
+    ),
+  ),
+);
+
+// 这句非常重要
+@use "element-plus/theme-chalk/src/index.scss" as *;
--- a/src/main.js
View file @4fc3e79
+++ b/src/main.js
View file @4fc3e79
@@ -2,27 +2,35 @@
  * @Author: hookehuyr hookehuyr@gmail.com
  * @Date: 2022-05-31 12:06:19
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-09-06 17:39:52
+ * @LastEditTime: 2024-09-09 13:54:11
  * @FilePath: /custom_table/src/main.js
  * @Description:
  */
 import { createApp } from 'vue';
 import router from './router';
 import ElementPlus from 'element-plus'
-import 'element-plus/dist/index.css'
+// import 'element-plus/dist/index.css'
+import '@/assets/styles/element.scss'  // 这是我的样式路径
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
+import 'dayjs/locale/zh-cn'
 import App from './App.vue';
 // import axios from './utils/axios';
 import axios from '@/utils/axios';
 // import 'default-passive-events'; // 解决Chrome控制台non-passive event listener输出问题
 import { createPinia } from 'pinia';
+import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 const pinia = createPinia();
 const app = createApp(App);
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+  app.component(key, component)
+}
+
 // 屏蔽警告信息
 app.config.warnHandler = () => null;
 app.config.globalProperties.$http = axios; // 关键语句
-app.use(pinia).use(router).use(ElementPlus)
+app.use(pinia).use(router).use(ElementPlus, { locale: zhCn })
 app.mount('#app');
--- a/src/views/index.vue
View file @4fc3e79
+++ b/src/views/index.vue
View file @4fc3e79
 <!--
  * @Date: 2024-07-23 10:34:37
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-09-06 17:35:34
+ * @LastEditTime: 2024-09-09 13:57:21
  * @FilePath: /custom_table/src/views/index.vue
  * @Description: 文件描述
 -->
 <template>
-  <el-table :data="tableData" style="width: 100%">
+  <div style="padding: 1rem;">
+    <el-row justify="space-between">
+      <el-col :span="12">
+        <div>
+          <el-button type="primary" :icon="Plus">添加</el-button>&nbsp;
+          <el-icon style="vertical-align: middle"><Download /></el-icon>&nbsp;<span style="vertical-align: middle">导入</span>&nbsp;
+          <el-icon style="vertical-align: middle"><Upload /></el-icon>&nbsp;<span style="vertical-align: middle">导出</span>&nbsp;
+          <el-icon style="vertical-align: middle"><Delete /></el-icon>&nbsp;<span style="vertical-align: middle">删除</span>
+        </div>
+      </el-col>
+      <el-col :span="12" style="text-align: right;">
+          <el-input
+            v-model="input3"
+            style="width: 200px"
+            placeholder="搜索数据"
+            :prefix-icon="Search"
+          />
+          &nbsp;
+          <el-popover :visible="visible" placement="bottom">
+            123
+            <span @click="visible = false">关闭</span>
+            <template #reference>
+              <div class="tooltip-container">
+                <el-icon style="vertical-align: middle" @click="visible = true"><Filter /></el-icon>
+                <span class="tooltip-text">筛选条件</span>
+              </div>
+            </template>
+          </el-popover>
+          &nbsp;
+          <el-tooltip
+            class="box-item"
+            effect="dark"
+            content="显示字段"
+            placement="bottom"
+          >
+            <el-icon style="vertical-align: middle"><Operation /></el-icon>
+          </el-tooltip>
+          &nbsp;
+          <el-tooltip
+            class="box-item"
+            effect="dark"
+            content="排序"
+            placement="bottom"
+          >
+            <el-icon style="vertical-align: middle"><Sort /></el-icon>
+          </el-tooltip>
+          &nbsp;
+          <el-tooltip
+            class="box-item"
+            effect="dark"
+            content="刷新"
+            placement="bottom"
+          >
+            <el-icon style="vertical-align: middle"><Refresh /></el-icon>
+          </el-tooltip>
+          &nbsp;
+      </el-col>
+    </el-row>
+    <el-table
+      :data="tableData" stripe border height="780"
+      style="width: 100%; margin: 1rem 0;"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" width="55" />
       <el-table-column prop="date" label="Date" width="180" />
       <el-table-column prop="name" label="Name" width="180" />
       <el-table-column prop="address" label="Address" />
     </el-table>
+    <el-row justify="space-between">
+      <el-col :span="8">
+        <el-pagination
+          v-model:current-page="currentPage4"
+          v-model:page-size="pageSize4"
+          :page-sizes="[100, 200, 300, 400]"
+          :size="size"
+          layout="total, sizes"
+          :total="400"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </el-col>
+      <el-col :span="8">
+        <el-pagination
+          v-model:current-page="currentPage4"
+          v-model:page-size="pageSize4"
+          :size="size"
+          layout="prev, pager, next"
+          :total="400"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+        />
+      </el-col>
+      <el-col :span="8">
+        <el-pagination
+          v-model:current-page="currentPage4"
+          v-model:page-size="pageSize4"
+          :size="size"
+          layout="jumper"
+          :total="400"
+          @size-change="handleSizeChange"
+          @current-change="handleCurrentChange"
+          style="display: flex; justify-content: end;"
+        />
+      </el-col>
+    </el-row>
+  </div>
 </template>
 <script setup>
 import { ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-
+import { Plus, Download, Upload, Search } from '@element-plus/icons-vue'
 import { Cookies, $, _, axios, storeToRefs, mainStore, Toast, useTitle } from '@/utils/generatePackage.js'
 //import { } from '@/utils/generateModules.js'
 //import { } from '@/utils/generateIcons.js'
@@ -25,31 +126,76 @@ const $route = useRoute();
 const $router = useRouter();
 useTitle($route.meta.title);
-const tableData = [
+const tableData = ref([])
-  {
+
-    date: '2016-05-03',
+const visible = ref(false);
-    name: 'Tom',
+
-    address: 'No. 189, Grove St, Los Angeles',
+const multipleSelection = ref([])
-  },
+const handleSelectionChange = (val) => {
-  {
+  multipleSelection.value = val
-    date: '2016-05-02',
+  console.log("🚀 ~ file: index.vue:136 ~ handleSelectionChange ~ multipleSelection.value:", multipleSelection.value);
-    name: 'Tom',
+}
-    address: 'No. 189, Grove St, Los Angeles',
+
-  },
+onMounted(() => {
-  {
+  for (let index = 0; index < 50; index++) {
-    date: '2016-05-04',
+    tableData.value.push({
-    name: 'Tom',
+      id: index,
-    address: 'No. 189, Grove St, Los Angeles',
-  },
-  {
       date: '2016-05-01',
       name: 'Tom',
       address: 'No. 189, Grove St, Los Angeles',
-  },
+    })
-]
+  }
+})
+
+const currentPage4 = ref(4)
+const pageSize4 = ref(100)
+
+const handleSizeChange = (val) => {
+  console.log(`${val} items per page`)
+}
+const handleCurrentChange = (val) => {
+  console.log(`current page: ${val}`)
+}
 </script>
 <style lang="less" scoped>
+.tooltip-container {
+  position: relative;
+  display: inline-block;
+  cursor: pointer; /* 悬停时显示手形指针 */
+}
+
+.tooltip-text {
+  font-size: 0.8rem;
+  visibility: hidden;
+  background-color: black;
+  color: #fff;
+  text-align: center;
+  border-radius: 5px;
+  padding: 5px 10px;
+  position: absolute;
+  z-index: 10;
+  top: 125%; /* 使 tooltip 位于触发元素下方 */
+  left: 50%;
+  transform: translateX(-50%);
+  opacity: 0;
+  transition: opacity 0.3s;
+  white-space: nowrap; /* 防止文字换行 */
+  &::after {
+    content: "";
+    position: absolute;
+    top: -10px; /* 三角形放在 Tooltip 上方 */
+    left: 50%;
+    transform: translateX(-50%);
+    border-width: 5px;
+    border-style: solid;
+    border-color: transparent transparent black transparent; /* 创建黑色的小三角形 */
+  }
+}
+.tooltip-container:hover .tooltip-text {
+  visibility: visible;
+  opacity: 1;
+}
 </style>
--- a/yarn.lock
View file @4fc3e79
+++ b/yarn.lock
View file @4fc3e79
@@ -1185,6 +1185,21 @@ chokidar@3.5.3, chokidar@^3.5.3:
   optionalDependencies:
     fsevents "~2.3.2"
+"chokidar@>=3.0.0 <4.0.0":
+  version "3.6.0"
+  resolved "https://mirrors.cloud.tencent.com/npm/chokidar/-/chokidar-3.6.0.tgz#197c6cc669ef2a8dc5e7b4d97ee4e092c3eb0d5b"
+  integrity sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==
+  dependencies:
+    anymatch "~3.1.2"
+    braces "~3.0.2"
+    glob-parent "~5.1.2"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.6.0"
+  optionalDependencies:
+    fsevents "~2.3.2"
+
 chownr@^2.0.0:
   version "2.0.0"
   resolved "https://mirrors.cloud.tencent.com/npm/chownr/-/chownr-2.0.0.tgz"
@@ -2227,6 +2242,11 @@ image-size@~0.5.0:
   resolved "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz"
   integrity sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=
+immutable@^4.0.0:
+  version "4.3.7"
+  resolved "https://mirrors.cloud.tencent.com/npm/immutable/-/immutable-4.3.7.tgz#c70145fc90d89fb02021e65c84eb0226e4e5a381"
+  integrity sha512-1hqclzwYwjRDFLjcFxOM5AYkkG0rpFPpr1RLPMEuGczoS7YA8gLhy8SWXYRAA/XwfEHpfo3cw5JGioS32fnMRw==
+
 indent-string@^4.0.0:
   version "4.0.0"
   resolved "https://mirrors.cloud.tencent.com/npm/indent-string/-/indent-string-4.0.0.tgz"
@@ -3271,6 +3291,15 @@ safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   resolved "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
+sass@^1.78.0:
+  version "1.78.0"
+  resolved "https://mirrors.cloud.tencent.com/npm/sass/-/sass-1.78.0.tgz#cef369b2f9dc21ea1d2cf22c979f52365da60841"
+  integrity sha512-AaIqGSrjo5lA2Yg7RvFZrlXDBCp3nV4XP73GrLGvdRWWwk+8H3l0SDvq/5bA4eF+0RFPLuWUk3E+P1U/YqnpsQ==
+  dependencies:
+    chokidar ">=3.0.0 <4.0.0"
+    immutable "^4.0.0"
+    source-map-js ">=0.6.2 <2.0.0"
+
 sax@^1.2.4:
   version "1.2.4"
   resolved "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz"
@@ -3396,6 +3425,11 @@ snake-case@^3.0.4:
     dot-case "^3.0.4"
     tslib "^2.0.3"
+"source-map-js@>=0.6.2 <2.0.0":
+  version "1.2.1"
+  resolved "https://mirrors.cloud.tencent.com/npm/source-map-js/-/source-map-js-1.2.1.tgz#1ce5650fddd87abc099eda37dcff024c2667ae46"
+  integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==
+
 source-map-js@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz"