feat: --

.gitignore

@@ -1,23 +1,22 @@
-.DS_Store
-node_modules
-/dist
-
-
-# local env files
-.env.local
-.env.*.local
-
-# Log files
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-
-# Editor directories and files
-.idea
-.vscode
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+npm-debug.log*
+yarn-error.log
+yarn.lock
+package-lock.json
+
+# production
+/es
+docs-dist
+
+# misc
+.DS_Store
+
+# ide
+/.idea
+
+dist
+dist-node
+build

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode"
+}

README.md

@@ -1,19 +1 @@
-# syjy-bwg
-
-## Project setup
-```
-pnpm install
-```
-
-### Compiles and hot-reloads for development
-```
-pnpm run serve
-```
-
-### Compiles and minifies for production
-```
-pnpm run build
-```
-
-### Customize configuration
-See [Configuration Reference](https://cli.vuejs.org/config/).
+ZHS2411069-1 中国民族博物馆-三亚家园线上展厅项目

package.json

@@ -1,27 +1,16 @@
 {
   "name": "syjy-bwg",
-  "version": "0.1.0",
-  "private": true,
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
   "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build"
+    "test": "echo \"Error: no test specified\" && exit 1"
   },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
   "dependencies": {
-    "core-js": "^3.8.3",
-    "vue": "^3.2.13",
-    "vue-router": "^4.0.3",
-    "vuex": "^4.0.0"
-  },
-  "devDependencies": {
-    "@vue/cli-plugin-babel": "~5.0.0",
-    "@vue/cli-plugin-router": "~5.0.0",
-    "@vue/cli-plugin-vuex": "~5.0.0",
-    "@vue/cli-service": "~5.0.0"
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not dead",
-    "not ie 11"
-  ]
+    "swiper": "^11.1.15",
+    "tslib": "^2.8.0"
+  }
 }

packages/base/index.js

@@ -0,0 +1,59 @@
+export const data = [
+  {
+    title: "前言",
+    content: `
+      <p>习近平总书记指出：“一部中国史，就是一部各民族交
+      融汇聚成多元一体中华民族的历史，就是各民族共同缔造、
+      发展、巩固统一的伟大祖国的历史。</p>
+      <p>中国少数民族传统体育，源自于中华民族从历史走向未
+      来、从传统走向现代、从多元凝聚为一体的发展历程，展现
+      着中华儿女共同的价值理念和生活追求，是中华家园特色鲜
+      明、富有魅力的宝贵文化资源和重要精神标识。</p>
+      <p>今天，在实现中华民族伟大复兴的奋斗征程中，这座蔚
+      为大观的体育文化宝库，正在为培育中华民族大家庭的深厚
+      情感、构筑中华民族共有精神家园发挥独特作用，正在为推
+      进中华民族共同体建设、建设中华民族现代文明贡献力量。</p>
+    `,
+  },
+  {
+    title: "孕育·起源",
+    children: [
+      {
+        title: "源之一：拓疆之始",
+        children: [
+          {
+            title: "一、农耕定居类体育文化的孕生",
+            images: [
+              {
+                url: "",
+                points: [
+                  {
+                    x: 0,
+                    y: 0,
+                    name: "热点名称",
+                    target: "http://xxx.com",
+                  },
+                ],
+              },
+            ],
+            description: `这是一段概要`,
+            content: `
+              <p>我国农耕定居类原始体育形态主要分布在稻耕与旱作农业区，各
+族先民在春种、夏耘、秋收、冬藏的劳动实践中，与土地共生，与自
+然相偕，逐渐产生了赛跑、射箭、摔跤、投掷、博弈等体育文化。</p>
+            `,
+          },
+          {
+            title: "二、草原游牧类体育文化的胎育",
+            description: `这是一段概要2`,
+            content: `
+              <p>草原游牧类体育形态主要分布在我国草原、高原等地区，先民们
+在策马疾驰、与畜角力、与兽搏斗的过程中，逐渐孕育出赛马、射箭、
+摔跤、骑射等体育文化。</p>
+            `,
+          },
+        ],
+      },
+    ],
+  },
+];

packages/base/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "@syjy/base",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC"
+}

packages/pc/.gitignore

@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

packages/pc/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "pc",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build"
+  },
+  "dependencies": {
+    "@syjy/base": "workspace:^",
+    "core-js": "^3.8.3",
+    "element-plus": "^2.8.8",
+    "vue": "^3.2.13",
+    "vue-router": "^4.0.3",
+    "vuex": "^4.0.0"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-router": "~5.0.0",
+    "@vue/cli-plugin-vuex": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "sass": "^1.81.0",
+    "sass-loader": "^16.0.3",
+    "unplugin-auto-import": "0.16.7",
+    "unplugin-vue-components": "^0.25.2"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead",
+    "not ie 11"
+  ]
+}

packages/pc/public/index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
+    <title>中国民族博物馆-三亚家园线上展厅</title>
+  </head>
+  <body>
+    <noscript>
+      <strong
+        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
+        properly without JavaScript enabled. Please enable it to
+        continue.</strong
+      >
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

packages/pc/src/App.vue

@@ -0,0 +1,24 @@
+<template>
+  <router-view />
+</template>
+
+<style lang="scss">
+@import "@/assets/main.css";
+
+body {
+  width: 100%;
+  height: 100vh;
+  min-width: 1600px;
+  overflow: hidden;
+  overflow-x: auto;
+}
+#app {
+  width: 100%;
+  height: 100%;
+  background: url("@/assets/images/bg-min.jpg") no-repeat center / cover;
+}
+.el-popper {
+  color: #999999;
+  font-size: 14px !important;
+}
+</style>

packages/pc/src/assets/main.css

@@ -0,0 +1,167 @@
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+  display: block;
+}
+body,
+input {
+  font-size: 14px;
+  color: #333333;
+  font-family: "Source Han Sans CN-Regular";
+}
+ol,
+ul {
+  list-style: none;
+}
+blockquote,
+q {
+  quotes: none;
+}
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+  content: "";
+  content: none;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+a {
+  color: inherit;
+  text-decoration: none;
+}
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.limit-line {
+  display: -webkit-box;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  word-break: break-all;
+  word-wrap: break-word;
+}
+
+.line-2 {
+  -webkit-line-clamp: 2;
+}
+
+.w100 {
+  width: 100%;
+}
+
+@font-face {
+  font-family: "Source Han Sans CN-Regular";
+  src: url("@/assets/fonts/SourceHanSansCN-Regular.otf");
+}
+@font-face {
+  font-family: "Source Han Serif CN-Bold";
+  src: url("@/assets/fonts/SOURCEHANSERIFCN-BOLD.OTF");
+}
+@font-face {
+  font-family: "Source Han Serif CN-Regular";
+  src: url("@/assets/fonts/SOURCEHANSERIFCN-REGULAR.OTF");
+}

packages/pc/src/main.js

@@ -0,0 +1,6 @@
+import { createApp } from "vue";
+import App from "./App.vue";
+import router from "./router";
+import store from "./store";
+
+createApp(App).use(store).use(router).mount("#app");

packages/pc/src/router/index.js

@@ -0,0 +1,21 @@
+import { createRouter, createWebHashHistory } from "vue-router";
+
+const routes = [
+  {
+    path: "/",
+    name: "home",
+    component: () => import("../views/home/index.vue"),
+  },
+  {
+    path: "/exhibition",
+    name: "exhibition",
+    component: () => import("../views/exhibition/index.vue"),
+  },
+];
+
+const router = createRouter({
+  history: createWebHashHistory(process.env.BASE_URL),
+  routes,
+});
+
+export default router;

packages/pc/src/views/exhibition/index.vue

@@ -0,0 +1,449 @@
+<template>
+  <div class="exhibition">
+    <div class="exhibition-container">
+      <div class="exhibition-header">
+        <h3>家园——中国少数民族传统体育文化展</h3>
+
+        <div class="exhibition-header__search">
+          <ElSelectV2
+            v-model="selected"
+            :options="filteredOptions"
+            :remote-method="handleFilter"
+            filterable
+            remote
+            placeholder="请输入搜索内容"
+            no-data-text="没有数据"
+            style="width: 100%"
+            @change="handleSelect"
+          >
+            <template #default="{ item }">
+              <ElTooltip :content="item.label" placement="left">
+                {{ item.label }}
+
+                <template #content>
+                  <p style="max-width: 300px">{{ item.label }}</p>
+                </template>
+              </ElTooltip>
+            </template>
+          </ElSelectV2>
+          <div class="exhibition-header__search__icon" />
+        </div>
+      </div>
+
+      <div class="exhibition-main">
+        <div class="exhibition-menu">
+          <ElScrollbar class="exhibition-menu-scrollbar">
+            <p
+              v-for="(item, index) in data"
+              :key="index"
+              :class="['limit-line', { active: activeMenu === index }]"
+              @click="
+                () => {
+                  activeSecondMenu = 0;
+                  activeThirdMenu = 0;
+                  activeMenu = index;
+                }
+              "
+            >
+              {{ item.title }}
+            </p>
+          </ElScrollbar>
+
+          <div class="exhibition-menu-footer">
+            <img
+              draggable="false"
+              src="@/assets/images/icon-home-1-min.png"
+              @click="$router.push({ name: 'home' })"
+            />
+            <img
+              draggable="false"
+              src="@/assets/images/icon-quanjing-min.png"
+            />
+          </div>
+        </div>
+
+        <ElScrollbar
+          class="exhibition-inner"
+          :style="{ width: list.length ? '1000px' : '1340px' }"
+        >
+          <div class="exhibition-cover">
+            <ElImage src="" fit="cover" />
+
+            <Swiper
+              class="exhibition-cover-swiper"
+              free-mode
+              :modules="[FreeMode]"
+              slides-per-view="auto"
+            >
+              <SwiperSlide v-for="item in 20" :key="item">
+                <ElImage src="" fit="cover" />
+              </SwiperSlide>
+            </Swiper>
+          </div>
+
+          <div class="exhibition-inner-content" v-html="curDetail.content" />
+        </ElScrollbar>
+
+        <div v-if="list.length" class="exhibition-right">
+          <ElScrollbar height="100%" style="padding: 0 5px">
+            <ElCollapse v-model="collapse">
+              <ElCollapseItem
+                v-for="(item, index) in list"
+                :key="index"
+                :title="item.title"
+                :name="index"
+                :class="{ active: index === activeSecondMenu }"
+              >
+                <ElTooltip
+                  v-for="(subItem, subIndex) in item.children"
+                  :key="subIndex"
+                  :content="subItem.description"
+                  placement="left"
+                  effect="light"
+                >
+                  <p
+                    :class="[
+                      'limit-line',
+                      { active: subIndex === activeThirdMenu },
+                    ]"
+                    @click="
+                      () => {
+                        activeSecondMenu = index;
+                        activeThirdMenu = subIndex;
+                      }
+                    "
+                  >
+                    {{ subItem.title }}
+                  </p>
+                </ElTooltip>
+              </ElCollapseItem>
+            </ElCollapse>
+          </ElScrollbar>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch } from "vue";
+import { data } from "@syjy/base";
+import { FreeMode } from "swiper/modules";
+import { Swiper, SwiperSlide } from "swiper/vue";
+import "swiper/css";
+import { ElTooltip } from "element-plus";
+
+const activeMenu = ref(0);
+const activeSecondMenu = ref(0);
+const activeThirdMenu = ref(0);
+const selected = ref(null);
+const filteredOptions = ref([]);
+const collapse = ref([]);
+
+const list = computed(() => {
+  if (!data[activeMenu.value].children) return [];
+  return data[activeMenu.value].children;
+});
+const curDetail = computed(() => {
+  const firstItem = data[activeMenu.value];
+
+  if (!firstItem.children) return firstItem;
+  else
+    return firstItem.children[activeSecondMenu.value].children[
+      activeThirdMenu.value
+    ];
+});
+
+watch(list, (v) => {
+  const stack = [];
+  for (let i = 0; i < v.length; i++) {
+    stack.push(i);
+  }
+  collapse.value = stack;
+});
+
+const extractText = (html) => {
+  // 提取纯文本，去掉HTML标签
+  const tmpDiv = document.createElement("div");
+  tmpDiv.innerHTML = html;
+  return tmpDiv.innerText.trim();
+};
+
+const findKeywordContext = (text, keyword, radius = 20) => {
+  const index = text.indexOf(keyword);
+  if (index === -1) {
+    return null;
+  }
+
+  const start = Math.max(0, index - radius);
+  const end = Math.min(text.length, index + keyword.length + radius);
+
+  return text.substring(start, end);
+};
+
+const flattenData = (query, list = data, parentTitles = [], path = []) => {
+  const result = [];
+  list.forEach((item, index) => {
+    const titles = [...parentTitles, item.title];
+    const currentPath = [...path, index];
+
+    if (item.content) {
+      const contentText = extractText(item.content).replace(/[\n\s]/g, "");
+
+      if (contentText.indexOf(query) > -1) {
+        result.push({
+          value: currentPath.join(","),
+          label: `${titles.join(" | ")} | ${findKeywordContext(
+            contentText,
+            query
+          )}`,
+        });
+      }
+    }
+    if (item.children) {
+      result.push(...flattenData(query, item.children, titles, currentPath));
+    }
+  });
+  return result;
+};
+
+const handleFilter = (query) => {
+  if (!query) {
+    filteredOptions.value = [];
+    return;
+  }
+  filteredOptions.value = flattenData(query);
+};
+
+const handleSelect = (v) => {
+  const res = v.split(",").map((i) => Number(i));
+  activeMenu.value = res[0];
+  activeSecondMenu.value = res[1] ?? 0;
+  activeThirdMenu.value = res[2] ?? 0;
+};
+</script>
+
+<style lang="scss" scoped>
+.exhibition {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &-container {
+    display: flex;
+    flex-direction: column;
+  }
+  &-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin: 40px 0 25px;
+
+    h3 {
+      color: white;
+      font-family: "Source Han Serif CN-Bold";
+      font-size: 28px;
+    }
+    &__search {
+      display: flex;
+      align-items: center;
+      padding-left: 14px;
+      width: 320px;
+      height: 45px;
+      border-radius: 50px;
+      overflow: hidden;
+      box-sizing: border-box;
+      background: rgba(255, 255, 255, 0.9);
+      border: 2px solid #f5dd8c;
+
+      .el-select {
+        --el-fill-color-blank: none;
+        --el-select-border-color-hover: none;
+        --el-select-input-color: none;
+        --el-select-input-focus-border-color: none;
+        --el-select-multiple-input-color: none;
+        --el-select-font-size: 16px;
+        --el-select-input-font-size: 16px;
+
+        ::v-deep(.el-select__wrapper) {
+          box-shadow: none;
+        }
+      }
+      &__icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 56px;
+        height: 100%;
+        background: #9d222d;
+        border-left: 2px solid #f5dd8c;
+        box-sizing: border-box;
+        cursor: pointer;
+
+        &::after {
+          content: "";
+          width: 26px;
+          height: 24px;
+          background: url("@/assets/images/search-min.png") no-repeat center /
+            contain;
+        }
+      }
+    }
+  }
+  &-main {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    height: 760px;
+  }
+  &-menu {
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 0;
+    padding: 50px 4px 0;
+    width: 240px;
+    height: inherit;
+    background: rgba(255, 255, 255, 0.9);
+    box-shadow: 0px 4px 10px 0px rgba(30, 0, 0, 0.3);
+    border-radius: 10px;
+    box-sizing: border-box;
+
+    &-footer {
+      margin: 24px 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 16px;
+
+      img {
+        cursor: pointer;
+      }
+    }
+    &-scrollbar {
+      flex: 1;
+
+      p {
+        position: relative;
+        padding: 0 30px 0 60px;
+        height: 60px;
+        line-height: 60px;
+        font-size: 18px;
+        cursor: pointer;
+
+        &:hover {
+          color: #f5dd8c;
+          background: #9d222d;
+        }
+        &.active {
+          color: #f5dd8c;
+          background: #9d222d;
+
+          &::before {
+            content: "";
+            position: absolute;
+            top: 50%;
+            left: 20px;
+            width: 28px;
+            height: 30px;
+            background: url("@/assets/images/icon-flower-min.png") no-repeat
+              center / contain;
+            transform: translateY(-50%);
+          }
+        }
+      }
+    }
+  }
+  &-inner {
+    flex: 1;
+    width: 1000px;
+    height: inherit;
+
+    &-content {
+      margin-top: 12px;
+      padding: 0 35px;
+      font-size: 16px;
+      color: white;
+    }
+  }
+  &-cover {
+    position: relative;
+    width: 100%;
+    height: 650px;
+    box-shadow: 0px 4px 10px 0px rgba(30, 0, 0, 0.3);
+    border-radius: 10px;
+    overflow: hidden;
+
+    .el-image {
+      width: 100%;
+      height: 100%;
+    }
+    &-swiper {
+      position: absolute;
+      right: 20px;
+      bottom: 15px;
+      max-width: 50%;
+
+      .swiper-slide {
+        position: relative;
+        margin-left: 10px;
+        width: 100px;
+        height: 60px;
+        border-radius: 5px;
+        overflow: hidden;
+        cursor: pointer;
+
+        &::before {
+          content: "";
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          background: rgba(0, 0, 0, 0.4);
+          z-index: 1;
+        }
+      }
+    }
+  }
+  &-right {
+    padding: 70px 0;
+    flex-shrink: 0;
+    width: 320px;
+    height: inherit;
+    background: rgba(255, 255, 255, 0.9);
+    box-shadow: 0px 4px 10px 0px rgba(30, 0, 0, 0.3);
+    border-radius: 10px;
+    box-sizing: border-box;
+
+    .el-collapse {
+      --el-collapse-header-bg-color: none;
+      --el-collapse-content-bg-color: none;
+      --el-collapse-header-height: 40px;
+      --el-collapse-content-font-size: 14px;
+      --el-collapse-header-font-size: 16px;
+      --el-collapse-header-text-color: #333333;
+      --el-collapse-content-text-color: #999999;
+
+      > .active {
+        ::v-deep(.el-collapse-item__header) {
+          color: #f5dd8c;
+          background: #9d222d;
+        }
+      }
+      ::v-deep(.el-collapse-item__header) {
+        padding-left: 24px;
+      }
+      ::v-deep(.el-collapse-item__content p) {
+        display: block;
+        margin-left: 90px;
+        line-height: 34px;
+        cursor: pointer;
+
+        &.active {
+          color: #9d222d;
+        }
+      }
+    }
+  }
+}
+</style>

packages/pc/src/views/home/index.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="home">
+    <img
+      class="home__logo"
+      draggable="false"
+      src="@/assets/images/logo-min.png"
+    />
+
+    <div class="home-main">
+      <img src="@/assets/images/logo2-min.png" draggable="false" />
+
+      <div class="home-main__inner">
+        <img
+          src="./images/1-min.jpg"
+          draggable="false"
+          style="margin: 0 40px 0 175px"
+          @click="$router.push({ name: 'exhibition' })"
+        />
+        <img src="./images/2-min.jpg" draggable="false" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.home {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+
+  &__logo {
+    position: absolute;
+    top: 40px;
+    left: 47px;
+  }
+  &-main {
+    display: flex;
+    align-items: center;
+
+    &__inner {
+      img {
+        cursor: pointer;
+        transition: transform linear 0.2s;
+
+        &:hover {
+          transform: scale(1.05);
+        }
+      }
+    }
+  }
+}
+</style>

packages/pc/vue.config.js

@@ -0,0 +1,19 @@
+const { defineConfig } = require("@vue/cli-service");
+const AutoImport = require("unplugin-auto-import/webpack");
+const Components = require("unplugin-vue-components/webpack");
+const { ElementPlusResolver } = require("unplugin-vue-components/resolvers");
+const path = require("path");
+
+module.exports = defineConfig({
+  transpileDependencies: true,
+  configureWebpack: {
+    plugins: [
+      AutoImport({
+        resolvers: [ElementPlusResolver()],
+      }),
+      Components({
+        resolvers: [ElementPlusResolver()],
+      }),
+    ],
+  },
+});

pnpm-workspace.yaml

@@ -0,0 +1,2 @@
+packages:
+  - "packages/*"

public/index.html

@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html lang="">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
-  </head>
-  <body>
-    <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
-</html>

src/App.vue

@@ -1,30 +0,0 @@
-<template>
-  <nav>
-    <router-link to="/">Home</router-link> |
-    <router-link to="/about">About</router-link>
-  </nav>
-  <router-view/>
-</template>
-
-<style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-}
-
-nav {
-  padding: 30px;
-}
-
-nav a {
-  font-weight: bold;
-  color: #2c3e50;
-}
-
-nav a.router-link-exact-active {
-  color: #42b983;
-}
-</style>

src/components/HelloWorld.vue

@@ -1,59 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router" target="_blank" rel="noopener">router</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex" target="_blank" rel="noopener">vuex</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/main.js

@@ -1,6 +0,0 @@
-import { createApp } from 'vue'
-import App from './App.vue'
-import router from './router'
-import store from './store'
-
-createApp(App).use(store).use(router).mount('#app')

src/router/index.js

@@ -1,25 +0,0 @@
-import { createRouter, createWebHistory } from 'vue-router'
-import HomeView from '../views/HomeView.vue'
-
-const routes = [
-  {
-    path: '/',
-    name: 'home',
-    component: HomeView
-  },
-  {
-    path: '/about',
-    name: 'about',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
-  }
-]
-
-const router = createRouter({
-  history: createWebHistory(process.env.BASE_URL),
-  routes
-})
-
-export default router

src/views/AboutView.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>

src/views/HomeView.vue

@@ -1,18 +0,0 @@
-<template>
-  <div class="home">
-    <img alt="Vue logo" src="../assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
-  </div>
-</template>
-
-<script>
-// @ is an alias to /src
-import HelloWorld from '@/components/HelloWorld.vue'
-
-export default {
-  name: 'HomeView',
-  components: {
-    HelloWorld
-  }
-}
-</script>

vue.config.js

@@ -1,4 +0,0 @@
-const { defineConfig } = require('@vue/cli-service')
-module.exports = defineConfig({
-  transpileDependencies: true
-})