feat: 重构样式文件并添加新功能

- 将 main.css 重命名为 main.scss，并移动到 css 目录 - 添加 mixin.scss、vant.scss 和 variables.scss 新样式文件 - 更新样式导入路径 - 新增多个 CSS混入和变量，提升样式可维护性 - 调整部分样式规则，优化页面布局和视觉效果
2025-03-03 15:20:00 +08:00
parent f6f5d82c0d
commit 2195eab28f
21 changed files with 6652 additions and 262 deletions
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -6,7 +6,7 @@ module.exports = {
  plugins: ['vue'],
  extends: ['plugin:vue/vue3-essential'],
  parserOptions: {
-    parser: '@babel/eslint-parser'
+    parser: 'babel-eslint'
  },
  rules: {
    'global-require': 0,
--- a/components.d.ts
+++ b/components.d.ts
@@ -13,6 +13,7 @@ declare module 'vue' {
    ElMain: typeof import('element-plus/es')['ElMain']
    RouterLink: typeof import('vue-router')['RouterLink']
    RouterView: typeof import('vue-router')['RouterView']
+    Van: typeof import('vant/es')['default']
    VanButton: typeof import('vant/es')['Button']
    VanCell: typeof import('vant/es')['Cell']
    VanCellGroup: typeof import('vant/es')['CellGroup']
--- a/index.html
+++ b/index.html
@@ -1,9 +1,9 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
  <head>
-    <meta charset="UTF-8">
-    <link rel="icon" href="/favicon.ico">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
--- a/src/assets/css/base.scss
+++ b/src/assets/css/base.scss
--- a/src/assets/css/logo.svg
+++ b/src/assets/css/logo.svg
--- a/src/assets/css/main.scss
+++ b/src/assets/css/main.scss
@@ -1,6 +1,6 @@
-@import './base.css';
-@import '../fonts/iconfont.css';
-
+@import 'base';
+@import '../../fonts/iconfont.css';
+@import 'vant';

 a,
 .green {
@@ -31,3 +31,18 @@ a,
 .flex-start {
  justify-content: flex-start;
 }
+
+// 宽度设置
+@include set-width($width-list);
+
+// 宽度设置
+@include set-height($width-list);
+
+// 间距设置
+@include set-distance($distance-class-list, $distance-list);
+
+//圆角弧度设置
+@include set-radius($radius);
+
+//透明度设置
+@include set-opacity($opacity);
--- a/src/assets/css/vant.scss
+++ b/src/assets/css/vant.scss
@@ -0,0 +1,3 @@
+.van-cell {
+  padding: 8px !important;
+}
--- a/src/fonts/demo.css
+++ b/src/fonts/demo.css
@@ -2,10 +2,13 @@
@font-face {
  font-family: 'iconfont logo';
  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
-  src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
+  src:
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix')
+      format('embedded-opentype'),
    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
-    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
+    url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont')
+      format('svg');
 }

 .logo {
@@ -48,7 +51,6 @@
  cursor: pointer;
 }

-
 #tabs .active {
  border-bottom-color: #f00;
  color: #222;
@@ -119,9 +121,15 @@
  color: #333;
  font-size: 42px;
  line-height: 100px;
-  -webkit-transition: font-size 0.25s linear, width 0.25s linear;
-  -moz-transition: font-size 0.25s linear, width 0.25s linear;
-  transition: font-size 0.25s linear, width 0.25s linear;
+  -webkit-transition:
+    font-size 0.25s linear,
+    width 0.25s linear;
+  -moz-transition:
+    font-size 0.25s linear,
+    width 0.25s linear;
+  transition:
+    font-size 0.25s linear,
+    width 0.25s linear;
 }

 .icon_lists .icon:hover {
@@ -133,7 +141,7 @@
  vertical-align: -0.15em;

  /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
-          normalize.css 中也包含这行 */
+      normalize.css 中也包含这行 */
  overflow: hidden;

  /* 通过设置 font-size 来改变图标大小 */
@@ -286,7 +294,7 @@
 }

 .markdown > table th {
-  background: #F7F7F7;
+  background: #f7f7f7;
 }

 .markdown blockquote {
@@ -326,7 +334,6 @@
  clear: both;
 }

-
 .hljs {
  display: block;
  overflow-x: auto;
@@ -451,7 +458,7 @@ code[class*='language-'] ::selection {
 /* Code blocks */
 pre[class*='language-'] {
  overflow: auto;
-  margin: .5em 0;
+  margin: 0.5em 0;
  padding: 1em;
 }

@@ -462,8 +469,8 @@ pre[class*='language-'] {

 /* Inline code */
 :not(pre) > code[class*='language-'] {
-  padding: .1em;
-  border-radius: .3em;
+  padding: 0.1em;
+  border-radius: 0.3em;
  white-space: normal;
 }

@@ -479,7 +486,7 @@ pre[class*='language-'] {
 }

 .namespace {
-  opacity: .7;
+  opacity: 0.7;
 }

 .token.property,
@@ -506,7 +513,7 @@ pre[class*='language-'] {
 .token.url,
 .language-css .token.string,
 .style .token.string {
-  background: hsla(0deg, 0%, 100%, .5);
+  background: hsla(0deg, 0%, 100%, 0.5);
  color: #9a6e3a;
 }

@@ -518,7 +525,7 @@ pre[class*='language-'] {

 .token.function,
 .token.class-name {
-  color: #DD4A68;
+  color: #dd4a68;
 }

 .token.regex,
--- a/src/fonts/iconfont.css
+++ b/src/fonts/iconfont.css
--- a/src/fonts/iconfont.js
+++ b/src/fonts/iconfont.js
--- a/src/fonts/iconfont.json
+++ b/src/fonts/iconfont.json
--- a/src/fonts/iconfont.ttf
+++ b/src/fonts/iconfont.ttf
--- a/src/fonts/iconfont.woff
+++ b/src/fonts/iconfont.woff
--- a/src/fonts/iconfont.woff2
+++ b/src/fonts/iconfont.woff2
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,4 +1,4 @@
-import './assets/main.css';
+import './assets/css/main.scss';
 import 'amfe-flexible';
 import { createApp } from 'vue';
 import { createPinia } from 'pinia';
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,7 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router';
 // import HomeView from '../views/HomeView.vue';
 import Design from '@/views/Design/Index.vue';
-import QuestionEdit from '@/views/Design/QuestionEdit.vue';
 const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
@@ -17,11 +16,6 @@ const router = createRouter({
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: Design
-    },
-    {
-      path: '/design/edit',
-      name: 'questionEdit',
-      component: QuestionEdit
    }
  ]
 });
--- a/src/views/Design/Index.vue
+++ b/src/views/Design/Index.vue
@@ -15,7 +15,11 @@
          :chooseQuestionId="chooseQuestionId"
          @get-choose-question-id="getChooseQuestionId"
        >
-          <base-select v-if="element.question_type === 1" :element="element"></base-select>
+          <base-select
+            v-if="element.question_type === 1"
+            :element="element"
+            :active="chooseQuestionId === element.id"
+          ></base-select>
        </choose-question>
        <!--        {{ element.question_type }}-->
        <!--        {{questionInfo.survey.pages.length}}-->
--- a/src/views/Design/QuestionEdit.vue
+++ b/src/views/Design/QuestionEdit.vue
@@ -1,40 +0,0 @@
-<template>
-  <div class="container question-edit-container">
-    <BaseSelectEdit v-if="questionElement.question_type === 1" :element="questionElement"></BaseSelectEdit>
-  </div>
-</template>
-<script setup>
-import { useCounterStore } from '@/stores/counter';
-import { storeToRefs } from 'pinia';
-import { ref, onBeforeMount, defineAsyncComponent } from 'vue';
-import { useRoute } from 'vue-router';
-
-const route = useRoute();
-
-// 组件
-const BaseSelectEdit = defineAsyncComponent(() => import('@/views/Design/components/QuestionsEdit/BaseSelectEdit.vue'));
-
-// 获取 Store 实例
-const counterStore = useCounterStore();
-// 修改访问方式
-const { questionsInfo } = storeToRefs(counterStore);
-const questionIndex = ref(-1);
-const questionElement = ref({});
-
-onBeforeMount(() => {
-// 获取 query 参数
-  if (route.query.id) {
-    // 查找对应数据
-    questionElement.value = questionsInfo.value.questions.find((item, index) => {
-      if (item.id === route.query.id) {
-        questionIndex.value = index;
-        return item;
-      }
-    });
-  }
-});
-
-</script>
-<style scoped lang="scss">
-
-</style>
--- a/src/views/Design/components/ChooseQuestion.vue
+++ b/src/views/Design/components/ChooseQuestion.vue
@@ -7,26 +7,33 @@
    >
      <slot></slot>
      <!--      题目操作-->
-      <div v-if="chooseQuestionId === element.id" class="choose-question-active-container">
-        <div
-          v-for="item in questionAction"
-          :key="item.key"
-          class=""
-          :class="item.class ? item.class : ''"
-          @click="itemAction(item)"
-        >
-          <i class="icon iconfont choose-question-active-container-icon" v-html="item.icon"></i>
-          <div class="choose-question-active-container-name">
-            {{ item.name }}
-          </div>
-        </div>
-      </div>
+      <van-cell v-if="chooseQuestionId === element.id" class="choose-question-active-container">
+        <template v-if="element.question_type === 1" #icon>
+          <van-icon name="add"></van-icon>
+          <span class="ml10">添加选项</span>
+        </template>
+        <template #title>{{}}</template>
+        <template #right-icon> 123 </template>
+        <!--        <div-->
+        <!--          v-for="item in questionAction"-->
+        <!--          :key="item.key"-->
+        <!--          class=""-->
+        <!--          :class="item.class ? item.class : ''"-->
+        <!--          @click="itemAction(item)"-->
+        <!--        >-->
+        <!--          <i class="icon iconfont choose-question-active-container-icon" v-html="item.icon"></i>-->
+        <!--          <div class="choose-question-active-container-name">-->
+        <!--            {{ item.name }}-->
+        <!--          </div>-->
+        <!--        </div>-->
+      </van-cell>
    </div>
  </div>
 </template>
 <script setup>
 import { ref } from 'vue';
-
+// import { useRouter } from 'vue-router';
+// const router = useRouter();
 const props = defineProps({
  element: {
    type: Object,
@@ -47,38 +54,38 @@ const element = ref(props.element);
 // emit 事件

 // 选中题目后出现的操作
-const questionAction = ref([
-  {
-    icon: '&#xe630;',
-    name: '编辑',
-    key: 'edit',
-    class: ''
-  },
-  {
-    icon: '&#xe632;',
-    name: '复制',
-    key: 'copy',
-    class: ''
-  },
-  {
-    icon: '&#xe6a0;',
-    name: '移动',
-    key: 'moveUp',
-    class: 'moverQues'
-  },
-  // {
-  //   icon:'',
-  //   name:'下移',
-  //   key:'moveDown',
-  // class:''
-  // },
-  {
-    icon: '&#xe63f;',
-    name: '删除',
-    key: 'delete',
-    class: ''
-  }
-]);
+// const questionAction = ref([
+//   {
+//     icon: '&#xe630;',
+//     name: '编辑',
+//     key: 'edit',
+//     class: ''
+//   },
+//   {
+//     icon: '&#xe632;',
+//     name: '复制',
+//     key: 'copy',
+//     class: ''
+//   },
+//   {
+//     icon: '&#xe6a0;',
+//     name: '移动',
+//     key: 'moveUp',
+//     class: 'moverQues'
+//   },
+//   // {
+//   //   icon:'',
+//   //   name:'下移',
+//   //   key:'moveDown',
+//   // class:''
+//   // },
+//   {
+//     icon: '&#xe63f;',
+//     name: '删除',
+//     key: 'delete',
+//     class: ''
+//   }
+// ]);
 const emit = defineEmits(['getChooseQuestionId']);

 // 选中题目
@@ -87,20 +94,28 @@ const chooseItem = () => {
  emit('getChooseQuestionId', props.element);
 };

-const itemAction = (item) => {
-  switch (item.key) {
-    case 'edit':
-      break;
-    case 'copy':
-      break;
-    case 'moveUp':
-      break;
-    case 'moveDown':
-      break;
-    case 'delete':
-      break;
-  }
-};
+// const itemAction = (item) => {
+//   switch (item.key) {
+//     case 'edit':
+//       // vue router跳转到/edit
+//
+//       router.push({
+//         path: '/design/edit',
+//         query: {
+//           id: props.element.id
+//         }
+//       });
+//       break;
+//     case 'copy':
+//       break;
+//     case 'moveUp':
+//       break;
+//     case 'moveDown':
+//       break;
+//     case 'delete':
+//       break;
+//   }
+// };
 </script>
 <style scoped lang="scss">
 .choose-question-container {
@@ -115,11 +130,16 @@ const itemAction = (item) => {
    outline: 1px dashed #409eff;
  }

+  & .ml10 {
+    margin-left: 10px;
+  }
+
  & .choose-question-active-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
-    margin: 0 20px;
+
+    //margin: 0 20px;
    color: #666;
    font-size: 12px;

--- a/src/views/Design/components/Questions/BaseSelect.vue
+++ b/src/views/Design/components/Questions/BaseSelect.vue
@@ -20,8 +20,7 @@
            icon-size="0.35rem"
          >
            <template #default>
-              <!--              {{it}}-->
-              <div v-html="it.option"></div>
+              <div class="van-cell" :contenteditable="active" v-html="it.option"></div>
            </template>
          </van-checkbox>
        </template>
@@ -39,8 +38,13 @@ const props = defineProps({
        stem: ''
      };
    }
+  },
+  active: {
+    type: Boolean,
+    default: false
  }
 });
+
 const element = ref(props.element);
 </script>
 <style scoped lang="scss"></style>
--- a/src/views/Design/components/QuestionsEdit/BaseSelectEdit.vue
+++ b/src/views/Design/components/QuestionsEdit/BaseSelectEdit.vue
@@ -1,82 +0,0 @@
-<template>
-  <div class="container base-select-edit-container">
-    <van-field
-      label="题目"
-      required
-      placeholder="请输入题目内容"
-      label-align="top"
-      type="textarea"
-    />
-    <div class="base-select-edit-divider">选项</div>
-    <van-cell-group v-for="(item,index) in props.element.options" :key="index" :name="item.value">
-      <van-field
-        v-for="(it,itIndex) in item" :key="itIndex" v-model="it.option" placeholder="输入选项"
-        label-width="0.25rem"
-      >
-        <template #label>
-          <van-icon name="clear" class="del" />
-        </template>
-      </van-field>
-    </van-cell-group>
-    <van-field label-width="0.25rem" class="flex align-center flex-start" readonly>
-      <template #label>
-        <van-icon name="add" class="plus" />
-      </template>
-      <template #input>
-        <div class="plus" @click="addOption">添加选项</div>
-      </template>
-      <template #button>
-      </template>
-    </van-field>
-  </div>
-</template>
-<script setup>
-import { ref } from 'vue';
-// 或者使用其他 UUID 库
-import { v4 as uuidv4 } from 'uuid';
-const props = defineProps({
-  element: {
-    type: Object,
-    default: () => {
-      return {};
-    }
-  }
-});
-const element = ref(props.element);
-// 增加选项
-const addOption = () => {
-  element.value.options[element.value.options.length - 1].push({
-    id: uuidv4(),
-    is_fixed: 0,
-    is_other: 0,
-    is_remove_other: 0,
-    option: '',
-    option_config: { image_url: [], title: '', instructions: [], option_type: 0, limit_right_content: '' },
-    option_index: 1,
-    parent_id: 0,
-    type: 0,
-    cascade: [],
-    config: []
-  });
-};
-</script>
-<style scoped lang="scss">
-.base-select-edit-container {
-  & .base-select-edit-divider {
-    margin: 5px;
-    text-align: left;
-  }
-
-  & .van-field__value {
-    border: 1px solid #ccc;
-  }
-
-  & .del {
-    color: red
-  }
-
-  & .plus {
-    color: #1989fa
-  }
-}
-</style>