一周小計（1）：實習初體驗

實習的第一周，從最開始的配環境做好準備工作，到拉項目熟悉項目，然后自己去寫需求，每一步都有很大收獲，得到很多人幫助真的好感謝，以下是個人這幾天的記錄與感想。
（這個其實是我寫的周報，有點水，記錄的也不太詳細，有些也是別人幫助我解決的沒有記得很清楚，先發了水一篇，好長時間沒發過了，下周一定好好做筆記呢~）

一、技術環境搭建與配置（前提基礎）

環境配置
首要任務是下載并配置VS Code，安裝Node.js，以及配置yarn和PNPM作為包管理器。

//1. 安裝node
https://nodejs.org/zh-cn/ //官網下載
node -v npm -v //檢查版本
npm config set registry https://registry.npm.taobao.org//配置鏡像源
//2. pnpm
npm install -g pnpm@版本號
//3. 切換node版本
n //查看已安裝的node 版本
ls //查看已安裝
上下鍵選擇要使用的node版本
//4. 必備插件
Auto Rename Tag //自動同步修改閉合標簽
EsLint //語法糾錯
Prettier - Code formatter //格式化代碼
File->Preference->Settings輸入Auto Save選擇afterDelay //自動保存代碼
vue3-snippets-for-vscode //clg快速log輸出

感想

環境搭建是基礎工作，熟練掌握git的一些常用操作，利用好google和chatgpt來輔助開發，做好準備工作。
但是搭環境的時候node跟pnpm版本不匹配導致項目運行不起來，還是讓強哥濤哥堅哥他們幫忙好久，最后還是辛苦一哥幫忙解決了，遇到卡死的點嘗試利用好搜索工具以及盡快尋求他人幫助吧，不能陷入死循環。

二、Git操作練習與項目熟悉（版本控制與協作）

熟悉Git的操作
從GitLab上克隆了公司官網項目，并通過創建本地分支進行了一些小修改的嘗試，把代碼push到遠程，成功遠程部署到jenkins。

項目熟悉
通過閱讀項目代碼，大致理解官網項目的架構和業務邏輯。

* git clone git@gitlab.linctex.com:front-end/style3d_homesite.git //克隆項目代碼到本地
* git checkout -b cgd //創建并切換到新分支cgd
* git pull --rebase //將遠程分支的最新提交合并到本地分支
* git add . //將要上傳的所有代碼存到暫存區
* git commit -m 'xxx' //提交的信息記錄
* git push --force-with-lease //強制推送（force push）本地分支到遠程倉庫
* git rebase cgd //將當前所在分支的提交歷史重新定位到cgd所代表的提交或分支的頂部
* git cherry-pick 123234 // git cherry-pick id .將指定提交（通過其哈希值或commit ID標識）應用于當前分支上，而不是合并整個分支.
* git log //可以查看以前的記錄 查看ID
* git merge dev //合并

感想

工欲善其事必先利其器，先牢固掌握好基礎和一些方法，不要貪圖新的知識，個人職業規劃詳細思考。
利用好AI輔助未嘗不是解決問題的給力工具，真的挺方便。
個人的思維方式，遇到問題只是表面解決了，后面要透過現象看本質，通過不斷追問“為什么”，剝離表象，直達問題的核心，然后從這個核心出發構建解決方案。

三、官網首頁改版（實戰）

首頁Banner修改
英文和中文的文案均縮短，自動滑動速度再慢一點
添加功能判定
在“申請試用”按鈕上添加一個判斷邏輯，需要再寫一個彈框組件，判定是個人用戶還是企業用戶，個人用戶跳轉到studio，企業用戶跳轉到表單。

<template><div ref="customAModal" class="custom-a-modal"><AModal v-model:visible="visible" :centered="true" :get-container="() => $refs.customAModal as HTMLElement":footer="null" width="684px" @cancel="handleButtonCancel"><!-- 個人用戶 --><div class="item" @click="toStudio"><img src="./Group 775280.png" /><span class="text">{{ $t('global_link_Individual') }}</span></div><!-- 企業用戶 --><div class="item border" @click="toApplyTrial"><img src="./Group 775281.png" /><span class="text">{{ $t('global_link_Corporate') }}</span></div></AModal></div>
</template><script lang="ts" setup>
import { ifCNLocale } from '~~/composables/useLocale.ts';
import { computed, reactive, onMounted, onUnmounted, ref } from 'vue';defineExpose({ showButton, handleButtonCancel });const isCN = ifCNLocale();
const ifMatched = ref(false);
const visible = ref<boolean>(false);
const { $bus, $lenis } = useNuxtApp();
const isSubmitting = ref<boolean>(false);onMounted(() => {ifMatched.value = matchMobile();// 監聽事件$bus.$on('show:applyButton', () => {showButton();});$bus.$on('close:applyButton', () => {handleButtonCancel();});
});// 打開與關閉彈窗
const showButton = () => {// 滾動阻塞$lenis.stop();visible.value = true;
};const handleButtonCancel = () => {// 滾動啟用$lenis.start();visible.value = false;
};// 個人用戶跳轉
const toStudio = () => {window.open('http://studio.style3d.com/');
};// 企業用戶跳轉
const toApplyTrial = () => {if (ifMatched.value) {// 移動 端，展開Header$bus.$emit('show:mobileNav');} else {// PC 端，打開試用表單$bus.$emit('show:applyModal');handleButtonCancel();}
};
</script><style lang="less">
.custom-a-modal {.apply-for-trial-form.cn.dialog {.ant-input {background-color: transparent;}}.apply-for-trial-form.en.dialog {.ant-input {background-color: transparent;}}
}
</style>
<style lang="less" scoped>
@modal-border-radius: 20px;.custom-a-modal {font-family: Montserrat, 'HarmonyOS Sans SC';user-select: none;:deep(.ant-modal-content) {color: #ffffff;margin: 0 auto;border-radius: @modal-border-radius;background: rgba(0, 0, 0, 1) !important;// backdrop-filter: blur(20px);border: 0;position: relative;.ant-modal-close {// svg {//     color: #fff;// }visibility: hidden;.custom-a-modal-close {height: 100%;width: 100%;display: flex;justify-content: center;align-items: center;font-size: 24px;}& {opacity: 0.5;transition: all 0.5s ease-in-out;&:hover {opacity: 1;}}}.ant-modal-body {width: 684px;height: 170px;display: flex;flex-direction: row;align-items: center;padding: 0px;}}.apply-for-trial-help {position: absolute;border-radius: 0 0 @modal-border-radius @modal-border-radius;bottom: 0;left: 0;height: 40px;width: 100%;background: rgba(255, 255, 255, 0.2);display: flex;justify-content: center;align-items: center;user-select: text;}.loading-mask {position: absolute;left: 0;top: 0;right: 0;bottom: 0;background-color: rgba(0, 0, 0, 0.6);display: flex;align-items: center;justify-content: center;border-radius: 20px;}.item {width: 50%;height: 100%;display: flex;flex-direction: row;align-items: center;justify-content: center;&.border {border-left: 1px solid #262626;}}.item:hover {background-color: blue;border-radius: 20px 0 0 20px;}.item.border:hover {background-color: blue;border-radius: 0 20px 20px 0;}.text {height: 23px;font-size: 20px;font-weight: 500;margin-left: 32px;}.item img {width: 50px;height: 50px;}
}:deep(.ant-modal-mask) {backdrop-filter: blur(20px);
}
</style>
<style lang="less">
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {-webkit-appearance: none !important;
}input[type='number'] {-moz-appearance: textfield;
}
</style>

感想

第一次體會到了理論知識與實際開發之間的差異，雖然自己有思路怎么做，但是去寫的時候找不到在哪以及寫了但是為什么這個功能沒有實現，還好有強哥幫忙，掌握到怎么快速查找和輸出大法。
有思路不代表會做，自己去寫也是有點混亂的，沒有徹底理清思路。在遇到問題之前，必須把思路理清，再一步一步來。
語法規范，優美的寫代碼。

寫在最后

下面這一部分我是不會寫在周報里面的哈哈哈，就是個人的一點小感受記錄了
第一次用mac，真的一點都不懂咋用的，好尷尬啊啊啊，電腦干干凈凈啥都沒有。實習要用mac的小伙伴注意了！提前看一些基本操作！
第一天第二天就配環境拉項目看項目，也還好。但是第三天就給了我兩個小小的需求，我好心虛~。怕自己寫不出來。果不其然，寫的很不順利，第三天就有點小郁悶了。還好帶我的哪個哥人特別好一直在教我！提出表揚！第四天順利寫出來了，又開心了。
第一周剛開始有一個新人介紹會（只是我們組的，挨個自我介紹就好了，大家都很厲害），老大還請我吃新人歡迎餐好感動，幫助了我很多謝謝老大！and周會（要寫周報，以及要表揚誰我沒來得及寫好慚愧要感謝很多人都沒寫）和月會（剛好趕上月末），我是i人啊啊，月會整個研發的都要過來，最后我要自我介紹還有表演才藝，誰懂啊好尷尬，特別尷尬的表演了一個魔術。。不過最后還吃到了一個哥哥的生日蛋糕（好吃祝他生日快樂）！
最后，在實習期間也會不斷學習的，老大還給我搞了學習計劃，會更新自己的學習記錄~