// 在 Console 中執(zhí)行，查找所有可能有滾動(dòng)的元素
Array.from(document.querySelectorAll('*')).filter(el => {
  const style = getComputedStyle(el);
  return style.overflow === 'auto' ||
         style.overflow === 'scroll' ||
         style.overflowY === 'auto' ||
         style.overflowY === 'scroll';
});

# 在 VSCode 中全局搜索
# Ctrl+Shift+F 搜索以下關(guān)鍵詞：
# - overflow
# - scroll
# - 滾動(dòng)
# - file-list (如果是文件列表的滾動(dòng)條)

// frontend/src/assets/styles/main.scss
.file-list-wrapper {
  height: calc(100vh - 200px);  // 固定高度
  overflow-y: auto;              // 垂直滾動(dòng)
  overflow-x: hidden;            // 隱藏水平滾動(dòng)
  // 自定義滾動(dòng)條樣式
  &::-webkit-scrollbar {
    width: 8px;
  }
  &::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
  }
}

<!-- 1. 檢查元素看到 -->
<div class="el-dialog__wrapper" style="z-index: 2001;">
  <div class="el-dialog" style="margin-top: 15vh; width: 500px;">
    <!-- 對(duì)話框內(nèi)容 -->
  </div>
</div>
<!-- 2. 識(shí)別這是 Element Plus 的 el-dialog 組件 -->

<!-- frontend/src/views/main/ShareFile.vue -->
<template>
  <el-dialog
    v-model="dialogVisible"
    title="分享文件"
    width="500px"
    :close-on-click-modal="false"
    :center="true"  <!-- 使對(duì)話框居中 -->
    :top="15vh"     <!-- 距離頂部距離 -->
  >
    <!-- 對(duì)話框內(nèi)容 -->
  </el-dialog>
</template>

/* 使用 !important 查看是否是優(yōu)先級(jí)問(wèn)題 */
.my-component {
  color: red !important;  /* 臨時(shí)測(cè)試用 */
}
/* 檢查是否是 scoped 樣式導(dǎo)致 */
/* 如果需要修改子組件樣式，使用深度選擇器 */
:deep(.child-component-class) {
  color: blue;
}
/* Vue 2 寫法（兼容） */
::v-deep .child-component-class {
  color: blue;
}

frontend/
├── src/
│   ├── views/                 # 頁(yè)面級(jí)組件
│   │   ├── Login.vue          # 登錄頁(yè) (/login)
│   │   ├── Register.vue       # 注冊(cè)頁(yè) (/register)
│   │   └── main/              # 主界面相關(guān)頁(yè)面
│   │       ├── Main.vue       # 主框架容器
│   │       ├── FileList.vue   # 文件列表
│   │       ├── Share.vue      # 分享管理
│   │       ├── Recycle.vue    # 回收站
│   │       └── Settings.vue   # 設(shè)置頁(yè)面
│   │
│   ├── components/            # 可復(fù)用組件
│   │   ├── Table.vue          # 表格組件
│   │   ├── Dialog.vue         # 對(duì)話框組件
│   │   ├── Upload.vue         # 上傳組件
│   │   ├── Icon.vue           # 圖標(biāo)組件
│   │   └── NoData.vue         # 空數(shù)據(jù)提示
│   │
│   ├── router/                # 路由配置
│   │   └── index.js           # 路由定義和守衛(wèi)
│   │
│   ├── store/                 # Vuex 狀態(tài)管理
│   │   ├── index.js           # Store 主文件
│   │   └── modules/           # Store 模塊
│   │       ├── user.js        # 用戶狀態(tài)
│   │       └── file.js        # 文件狀態(tài)
│   │
│   ├── api/                   # API 接口封裝
│   │   ├── index.js           # API 入口
│   │   ├── user.js            # 用戶相關(guān) API
│   │   └── file.js            # 文件相關(guān) API
│   │
│   ├── utils/                 # 工具函數(shù)
│   │   ├── request.js         # Axios 封裝
│   │   ├── validate.js        # 表單驗(yàn)證
│   │   ├── crypto.js          # 加密工具
│   │   └── common.js          # 通用工具
│   │
│   └── assets/                # 靜態(tài)資源
│       ├── styles/            # 樣式文件
│       │   ├── variables.scss # SCSS 變量
│       │   ├── common.scss    # 公共樣式
│       │   └── reset.scss     # 樣式重置
│       └── images/            # 圖片資源

// 1. 在組件中打印數(shù)據(jù)
export default {
  mounted() {
    // 打印所有數(shù)據(jù)
    console.log('組件 data:', this.$data)
    console.log('Props:', this.$props)
    console.log('Computed:', this.$options.computed)
    // 打印路由信息
    console.log('當(dāng)前路由:', this.$route)
    console.log('路由參數(shù):', this.$route.params)
    console.log('查詢參數(shù):', this.$route.query)
    // 打印 Vuex 狀態(tài)
    console.log('Vuex state:', this.$store.state)
  },
  watch: {
    // 監(jiān)聽(tīng)數(shù)據(jù)變化
    'someData': {
      handler(newVal, oldVal) {
        console.log('數(shù)據(jù)變化:', oldVal, '->', newVal)
      },
      deep: true,  // 深度監(jiān)聽(tīng)
      immediate: true  // 立即執(zhí)行
    }
  }
}

/* 1. 顯示所有元素邊界（用于布局調(diào)試） */
* {
  outline: 1px solid red !important;
}
/* 2. 顯示特定組件邊界 */
.debug-border {
  border: 2px solid #409eff !important;
  background: rgba(64, 158, 255, 0.1) !important;
}
/* 3. 檢查 z-index 層級(jí) */
.debug-z-index::after {
  content: attr(style);
  position: absolute;
  top: 0;
  left: 0;
  background: yellow;
  color: black;
  padding: 2px 5px;
  font-size: 12px;
}

// 1. 查看元素上的所有事件
function getEventListeners(element) {
  const listeners = getEventListeners(element);
  console.table(listeners);
  return listeners;
}
// 2. 在模板中調(diào)試事件
<template>
  <button @click="handleClick($event, 'extra data')">
    點(diǎn)擊測(cè)試
  </button>
</template>
<script>
export default {
  methods: {
    handleClick(event, data) {
      console.group('點(diǎn)擊事件調(diào)試');
      console.log('事件對(duì)象:', event);
      console.log('目標(biāo)元素:', event.target);
      console.log('當(dāng)前元素:', event.currentTarget);
      console.log('額外數(shù)據(jù):', data);
      console.log('組件實(shí)例:', this);
      console.trace('調(diào)用棧');
      console.groupEnd();
      // 添加斷點(diǎn)
      debugger;
    }
  }
}
</script>

// frontend/src/utils/request.js
import axios from 'axios'
// 請(qǐng)求攔截器
axios.interceptors.request.use(
  config => {
    console.group(`API Request: ${config.method.toUpperCase()} ${config.url}`);
    console.log('Headers:', config.headers);
    console.log('Params:', config.params);
    console.log('Data:', config.data);
    console.groupEnd();
    return config;
  },
  error => {
    console.error('Request Error:', error);
    return Promise.reject(error);
  }
);
// 響應(yīng)攔截器
axios.interceptors.response.use(
  response => {
    console.group(`API Response: ${response.config.url}`);
    console.log('Status:', response.status);
    console.log('Data:', response.data);
    console.groupEnd();
    return response;
  },
  error => {
    console.error('Response Error:', error.response);
    return Promise.reject(error);
  }
);

## 問(wèn)題描述
在 [文件路徑] 文件的第 [行號(hào)] 行，[組件/元素] 出現(xiàn)了 [問(wèn)題描述]
## 當(dāng)前代碼
?```vue
[粘貼相關(guān)代碼]
?```
## 期望效果
希望實(shí)現(xiàn)像 [參考文件路徑] 第 [行號(hào)] 行那樣的效果
## 已嘗試的方案
1. 嘗試了 [方案1]，結(jié)果 [結(jié)果描述]
2. 嘗試了 [方案2]，結(jié)果 [結(jié)果描述]
## 錯(cuò)誤信息（如果有）
?```
[控制臺(tái)錯(cuò)誤信息]
?```
## 環(huán)境信息
- Vue 版本: 3.3.4
- Element Plus 版本: 2.3.8
- 瀏覽器: Chrome 120

## 問(wèn)題描述
在 frontend/src/views/main/FileList.vue 文件的第 85-90 行，
.file-list-wrapper 容器的滾動(dòng)條在內(nèi)容超出時(shí)沒(méi)有出現(xiàn)
## 當(dāng)前代碼
?```vue
<template>
  <div class="file-list-wrapper">
    <el-table :data="fileList" height="100%">
      <!-- 表格內(nèi)容 -->
    </el-table>
  </div>
</template>
<style scoped>
.file-list-wrapper {
  height: 100%;
  overflow: auto;
}
</style>
?```
## 期望效果
希望實(shí)現(xiàn)像 front/src/views/FileManager.vue 第 45 行那樣的自定義滾動(dòng)條
## 已嘗試的方案
1. 設(shè)置 overflow: auto，但滾動(dòng)條不出現(xiàn)
2. 設(shè)置固定高度 height: 500px，滾動(dòng)條出現(xiàn)但高度不自適應(yīng)
## 瀏覽器控制臺(tái)無(wú)錯(cuò)誤信息

/* CSS 優(yōu)先級(jí)計(jì)算規(guī)則 */
/*
  內(nèi)聯(lián)樣式: 1000
  ID 選擇器: 100
  類選擇器: 10
  標(biāo)簽選擇器: 1
*/
/* 示例 */
#app .content .file-list-item {  /* 優(yōu)先級(jí): 100 + 10 + 10 = 120 */
  color: blue;
}
.file-list-item {  /* 優(yōu)先級(jí): 10 */
  color: red;  /* 會(huì)被覆蓋 */
}
/* 提高優(yōu)先級(jí)的方法 */
.file-list-item.active {  /* 優(yōu)先級(jí): 10 + 10 = 20 */
  color: green;
}
/* 最后手段 */
.file-list-item {
  color: yellow !important;  /* 最高優(yōu)先級(jí) */
}

// 在 Console 中執(zhí)行
// 查找影響特定元素的所有樣式表
function findStyleSheets(element) {
  const computed = window.getComputedStyle(element);
  const sheets = Array.from(document.styleSheets);
  const affecting = [];
  sheets.forEach(sheet => {
    try {
      const rules = Array.from(sheet.cssRules || sheet.rules);
      rules.forEach(rule => {
        if (element.matches(rule.selectorText)) {
          affecting.push({
            selector: rule.selectorText,
            styles: rule.style.cssText,
            source: sheet.href || 'inline'
          });
        }
      });
    } catch(e) {
      console.warn('Cannot access stylesheet:', sheet.href);
    }
  });
  return affecting;
}
// 使用方法
const element = document.querySelector('.file-list-item');
console.table(findStyleSheets(element));

// frontend/src/assets/styles/element-variables.scss
// 覆蓋 Element Plus 默認(rèn)變量
:root {
  --el-color-primary: #409eff;
  --el-color-success: #67c23a;
  --el-color-warning: #e6a23c;
  --el-color-danger: #f56c6c;
  --el-color-info: #909399;
  // 覆蓋組件樣式
  --el-dialog-padding-primary: 20px;
  --el-dialog-border-radius: 8px;
  // 自定義滾動(dòng)條
  --el-table-border-color: #ebeef5;
}
// 或在組件中局部覆蓋
.my-dialog {
  :deep(.el-dialog) {
    border-radius: 12px;
  }
  :deep(.el-dialog__header) {
    background: linear-gradient(to right, #409eff, #66b1ff);
    color: white;
  }
}

// 1. Chrome DevTools 設(shè)備模擬
// F12 -> Ctrl+Shift+M (Toggle device toolbar)
// 2. 常用斷點(diǎn)
const breakpoints = {
  xs: 0,      // 手機(jī)豎屏
  sm: 768,    // 手機(jī)橫屏/平板豎屏
  md: 992,    // 平板橫屏
  lg: 1200,   // 筆記本
  xl: 1920    // 桌面顯示器
};
// 3. 在 Vue 組件中響應(yīng)屏幕變化
export default {
  data() {
    return {
      screenWidth: window.innerWidth,
      isMobile: false
    }
  },
  mounted() {
    this.handleResize();
    window.addEventListener('resize', this.handleResize);
  },
  beforeUnmount() {
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    handleResize() {
      this.screenWidth = window.innerWidth;
      this.isMobile = this.screenWidth < 768;
      console.log('屏幕寬度:', this.screenWidth, '移動(dòng)端:', this.isMobile);
    }
  }
}

<template>
  <!-- Element Plus 柵格系統(tǒng) -->
  <el-row :gutter="20">
    <el-col
      :xs="24"   <!-- 手機(jī): 占滿 24 格 -->
      :sm="12"   <!-- 平板: 占 12 格 (50%) -->
      :md="8"    <!-- 中屏: 占 8 格 (33.3%) -->
      :lg="6"    <!-- 大屏: 占 6 格 (25%) -->
      :xl="4"    <!-- 超大屏: 占 4 格 (16.7%) -->
    >
      <div class="grid-content">響應(yīng)式內(nèi)容</div>
    </el-col>
  </el-row>
</template>
<style lang="scss">
// 媒體查詢示例
.grid-content {
  padding: 20px;
  background: #f0f0f0;
  // 手機(jī)端樣式
  @media (max-width: 767px) {
    padding: 10px;
    font-size: 14px;
  }
  // 平板樣式
  @media (min-width: 768px) and (max-width: 991px) {
    padding: 15px;
    font-size: 15px;
  }
  // 桌面樣式
  @media (min-width: 992px) {
    padding: 20px;
    font-size: 16px;
  }
}
</style>

// 1. 開(kāi)啟性能監(jiān)控
// Vue DevTools -> Settings -> Performance monitoring
// 2. 組件渲染優(yōu)化
export default {
  // 使用 computed 緩存計(jì)算結(jié)果
  computed: {
    expensiveComputed() {
      console.time('expensive computation');
      const result = this.largeArray.filter(item => item.active)
        .map(item => item.value * 2)
        .reduce((sum, val) => sum + val, 0);
      console.timeEnd('expensive computation');
      return result;
    }
  },
  // 使用 v-memo 優(yōu)化列表渲染 (Vue 3.2+)
  template: `
    <div v-for="item in list" :key="item.id" v-memo="[item.id, item.updated]">
      {{ item.name }}
    </div>
  `
}

// 標(biāo)記性能測(cè)量點(diǎn)
performance.mark('myFeature:start');
// 執(zhí)行操作
doSomethingExpensive();
performance.mark('myFeature:end');
performance.measure('myFeature', 'myFeature:start', 'myFeature:end');
// 獲取測(cè)量結(jié)果
const measures = performance.getEntriesByType('measure');
console.table(measures);

// 監(jiān)控不必要的重渲染
export default {
  renderTracked(e) {
    console.log('Render tracked:', e);
  },
  renderTriggered(e) {
    console.log('Render triggered:', e);
    console.log('Key:', e.key);
    console.log('Old value:', e.oldValue);
    console.log('New value:', e.newValue);
  }
}

# 1. 對(duì)比目錄結(jié)構(gòu)
diff -rq frontend/src front/src | grep "Only in"
# 2. 查找相似文件
find front/src -name "*.vue" -exec grep -l "文件列表" {} \;
# 3. 對(duì)比特定文件
diff frontend/src/views/main/FileList.vue front/src/views/FileManager.vue
# 4. 使用 VSCode 對(duì)比
# 選中兩個(gè)文件 -> 右鍵 -> Select for Compare -> Compare with Selected

// 1. 識(shí)別依賴
// 查看 front 項(xiàng)目的 package.json
// 對(duì)比需要新增的依賴
// 2. 復(fù)制組件時(shí)的檢查清單
const migrationChecklist = {
  imports: '檢查并更新 import 路徑',
  api: '替換 API 接口調(diào)用',
  router: '更新路由名稱',
  store: '適配 Vuex 狀態(tài)結(jié)構(gòu)',
  styles: '檢查樣式變量是否存在',
  assets: '復(fù)制相關(guān)圖片資源',
  i18n: '如果有國(guó)際化，更新語(yǔ)言文件'
};
// 3. 適配數(shù)據(jù)結(jié)構(gòu)
// front 項(xiàng)目的數(shù)據(jù)結(jié)構(gòu)
const frontData = {
  fileId: 'xxx',
  fileName: 'xxx'
};
// 轉(zhuǎn)換為 frontend 項(xiàng)目的結(jié)構(gòu)
const frontendData = {
  id: frontData.fileId,
  name: frontData.fileName
};

// 1. 檢查變量定義
// front/src/styles/variables.scss
$primary-color: #1890ff;  // Ant Design 藍(lán)
// frontend/src/assets/styles/variables.scss
$primary-color: #409eff;  // Element Plus 藍(lán)
// 2. 替換時(shí)需要調(diào)整顏色值
.button {
  // background: $primary-color;  // 直接復(fù)制會(huì)用錯(cuò)顏色
  background: #409eff;  // 使用 frontend 的主色
}
// 3. 組件庫(kù)差異
// front 可能用 Ant Design Vue
<a-button type="primary">按鈕</a-button>
// frontend 使用 Element Plus
<el-button type="primary">按鈕</el-button>

<script setup>
import { ref, reactive, computed, watch, onMounted } from 'vue'
// 響應(yīng)式數(shù)據(jù)
const count = ref(0)
const user = reactive({
  name: 'John',
  age: 30
})
// 計(jì)算屬性
const doubleCount = computed(() => count.value * 2)
// 監(jiān)聽(tīng)器
watch(count, (newVal, oldVal) => {
  console.log(`Count changed: ${oldVal} -> ${newVal}`)
})
// 生命周期
onMounted(() => {
  console.log('Component mounted')
})
// 方法
const increment = () => {
  count.value++
}
</script>
<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double: {{ doubleCount }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

<template>
  <!-- 條件渲染 -->
  <div v-if="isVisible">Visible</div>
  <div v-else-if="isHidden">Hidden</div>
  <div v-else>Default</div>
  <!-- 列表渲染 -->
  <ul>
    <li v-for="(item, index) in items" :key="item.id">
      {{ index }}: {{ item.name }}
    </li>
  </ul>
  <!-- 事件處理 -->
  <button @click="handleClick">Click</button>
  <input @keyup.enter="handleEnter" />
  <!-- 雙向綁定 -->
  <input v-model="inputValue" />
  <input v-model.number="numberValue" />
  <input v-model.trim="trimmedValue" />
  <!-- 動(dòng)態(tài)屬性 -->
  <div :class="{ active: isActive, 'text-danger': hasError }"></div>
  <div :style="{ color: textColor, fontSize: fontSize + 'px' }"></div>
  <!-- 插槽 -->
  <slot name="header" :data="slotData"></slot>
</template>

<!-- 父組件 -->
<template>
  <ChildComponent
    :prop-data="parentData"
    @custom-event="handleChildEvent"
  />
</template>
<script setup>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'
const parentData = ref('Hello from parent')
const handleChildEvent = (data) => {
  console.log('Received from child:', data)
}
</script>
<!-- 子組件 -->
<template>
  <div>
    <p>{{ propData }}</p>
    <button @click="emitEvent">Send to Parent</button>
  </div>
</template>
<script setup>
import { defineProps, defineEmits } from 'vue'
const props = defineProps({
  propData: String
})
const emit = defineEmits(['custom-event'])
const emitEvent = () => {
  emit('custom-event', 'Hello from child')
}
</script>