24 files changed, 506 insertions, 0 deletions
diff --git a/src/App.vue b/src/App.vue
new file mode 100644
index 0000000..e3461f6
--- /dev/null
+++ b/src/App.vue
@@ -0,0 +1,25 @@
+<template>
+  <el-config-provider :locale="locale">
+    <router-view />
+  </el-config-provider>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+import { ElConfigProvider } from 'element-plus'
+import { useI18n } from "vue-i18n"
+import { useMainStore } from '@/store/index'
+import { useTheme } from '@/hooks/useTheme'
+
+const { messages } = useI18n()
+
+// elmentui组件国际化
+const mainStore = useMainStore()
+const locale = computed(() => {
+  return mainStore.language === 'zh' ? messages.value['zh'] : messages.value['en']
+})
+
+// 初始化主题
+const { themeSet } = useTheme()
+themeSet(mainStore.theme)
+</script>
diff --git a/src/assets/vue.svg b/src/assets/vue.svg
new file mode 100644
index 0000000..770e9d3
--- /dev/null
+++ b/src/assets/vue.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
+\ No newline at end of file
diff --git a/src/axios/index.js b/src/axios/index.js
new file mode 100644
index 0000000..e1ab737
--- /dev/null
+++ b/src/axios/index.js
@@ -0,0 +1,8 @@
+import axios from 'axios'
+
+const axiosInstance = axios.create({
+  baseURL: '',
+  timeout: undefined,
+}) 
+
+export default axiosInstance
diff --git a/src/components/jsonDiff.vue b/src/components/jsonDiff.vue
new file mode 100644
index 0000000..7b5a077
--- /dev/null
+++ b/src/components/jsonDiff.vue
@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <CodeDiff
+      :hideHeader="false"
+      language="json"
+      :old-string="oldJson"
+      new-string="{}"
+      output-format="line-by-line"
+      :theme="theme"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+import { CodeDiff } from 'v-code-diff';
+import { useMainStore } from '@/store/index';
+const mainStore = useMainStore();
+
+
+let oldJson = {
+  a: {
+    b: {
+      c: "66666666666666666666666666666666666666666666666",
+    },
+  },
+};
+
+oldJson = ref(JSON.stringify(oldJson, null, 2));
+
+let theme = ref(mainStore.theme);
+
+watch(
+  () => mainStore.theme,
+  (value) => {
+    theme.value = value
+  }
+);
+
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/components/jsonEditor.vue b/src/components/jsonEditor.vue
new file mode 100644
index 0000000..ab62bd0
--- /dev/null
+++ b/src/components/jsonEditor.vue
@@ -0,0 +1,156 @@
+<template>
+  <div class="box" style="width: 100%">
+    <codemirror
+      ref="editor"
+      v-model:value="value"
+      :options="cmOptions"
+      @change="change"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch, onUnmounted } from 'vue';
+import { useMainStore } from '@/store/index';
+const mainStore = useMainStore();
+import Codemirror from 'codemirror-editor-vue3';
+// language
+import 'codemirror/mode/javascript/javascript.js';
+// theme 主题
+import 'codemirror/theme/ttcn.css';
+import 'codemirror/theme/monokai.css';
+// 折叠功能
+import 'codemirror/addon/fold/foldcode.js';
+import 'codemirror/addon/fold/foldgutter.js';
+import 'codemirror/addon/fold/foldgutter.css';
+import 'codemirror/addon/fold/brace-fold.js';
+// 自动提示
+import 'codemirror/addon/hint/show-hint.js';
+import 'codemirror/addon/hint/show-hint.css';
+import 'codemirror/addon/hint/javascript-hint.js';
+
+// 代码校验 lint
+import 'codemirror/addon/lint/lint.js';
+import 'codemirror/addon/lint/lint.css';
+import 'codemirror/addon/lint/json-lint.js';
+import jsonlint from 'jsonlint-mod';
+// 其他
+import 'codemirror/addon/edit/matchbrackets.js';
+import 'codemirror/addon/edit/closebrackets.js';
+window.jsonlint = jsonlint;
+
+let value = {
+  a: {
+    b: {
+      c: 666,
+    },
+  },
+  text: {
+    demo: 999,
+  },
+};
+
+value = JSON.stringify(value, null, 2); // 数组对象格式化的逻辑
+
+
+const hint = (cm, options) => {
+  //获取CodeMirror上面的一个方法
+  const Pos = CodeMirror.Pos;
+  // 获取光标位置
+  const cursor = cm.getCursor();
+  // 获取当前行的内容
+  const cursorLine = cm.getLine(cursor.line)
+  // 获取当前单词的信息
+  const token = cm.getTokenAt(cursor);
+  // 当前正在输入的单词
+  const currentStr = token.string;
+
+  const keyword = [
+    'name', 'nameaaa', 'namebbb', 'text', 'aaa', 
+  ]
+  const replaceStr = currentStr.replace(/"/g, '')
+ 
+  // 用来放提示的单词
+  const found = [];
+  keyword.forEach(item=>{
+    if(item.includes(replaceStr)){
+      found.push(`"${item}"`)
+    }
+  })
+
+  const result = {
+    list: found,
+    from: Pos(cursor.line, token.start),
+    to: Pos(cursor.line, token.end),
+  };
+  return result;
+};
+
+const showHint = (cm, e)=>{
+  const arr = [13,38,40] // 回车 上下箭头不触发提示 防止选择时冲突
+  if(arr.find((item)=>item == e.keyCode)){
+    return
+  }
+  editor.value?.cminstance?.showHint()
+}
+
+onMounted (()=>{
+  editor.value?.cminstance?.on('keyup', showHint)
+})
+onUnmounted(()=>{
+  editor.value?.cminstance?.off('keyup', showHint)
+})
+
+
+// json的配置
+let cmOptions = {
+  mode: 'application/json', //编辑器的编程语言
+  theme: mainStore.theme === 'dark' ? 'monokai' : 'ttcn',
+  readOnly: false, // 只读
+  tabSize: 4, // 缩进单元格为 4 个空格
+  indentUnit: 2,
+  viewportMargin: Infinity, // 指定当前滚动到视图中内容上⽅和下⽅要渲染的⾏数
+  autofocus: false, // 自动聚焦
+  firstLineNumber: 1, // 从哪个数字开始计算行数
+  lineNumbers: true, // 是否显示左边换行数字
+  lineWrapping: true, // 是否应对长行进行滚动或换行
+  lint: true, // 打开json校验
+  matchBrackets: true, // 在光标点击紧挨{、]括号左、右侧时，自动突出显示匹配的括号 }
+  autoCloseBrackets: true, // 自动关闭括号
+  gutters: [
+    'CodeMirror-linenumbers',
+    'CodeMirror-foldgutter',
+    'CodeMirror-lint-markers',
+  ],
+  extraKeys: {
+    // 触发提示按键
+    Ctrl: 'autocomplete',
+  },
+  hintOptions: {
+    // 自定义提示选项
+    completeSingle: false, // 当匹配只有一项的时候是否自动补全
+    hint: hint,
+  },
+};
+
+const editor = ref(null);
+
+watch(
+  () => mainStore.theme,
+  (value) => {
+    let theme = value === 'dark' ? 'monokai' : 'ttcn';
+    editor.value?.cminstance?.setOption('theme', theme);
+  }
+);
+
+const change = (val, cm) => {
+  try {
+    // console.log(jsonlint.parse(val));
+  } catch (error) {
+    console.log(error.message);
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+</style>
diff --git a/src/hooks/useTheme.js b/src/hooks/useTheme.js
new file mode 100644
index 0000000..34ab763
--- /dev/null
+++ b/src/hooks/useTheme.js
@@ -0,0 +1,16 @@
+import { useMainStore } from '@/store/index'
+
+export const useTheme = () => {
+  const mainStore = useMainStore();
+
+  const themeSet = (value) => {
+    document.documentElement.classList.remove('light', 'dark');
+    document.documentElement.classList.add(value);
+    mainStore.theme = value
+    localStorage.setItem('asg-theme', value)
+  };
+
+  return {
+    themeSet,
+  };
+};
diff --git a/src/i18n/en.js b/src/i18n/en.js
new file mode 100644
index 0000000..06c255f
--- /dev/null
+++ b/src/i18n/en.js
@@ -0,0 +1,10 @@
+// en.js
+
+export default {
+  overall: {
+    add: 'Add',
+    edit: 'Edit',
+    save: 'Save',
+    cancel: 'Cancel',
+  }
+}
+\ No newline at end of file
diff --git a/src/i18n/index.js b/src/i18n/index.js
new file mode 100644
index 0000000..aed3699
--- /dev/null
+++ b/src/i18n/index.js
@@ -0,0 +1,25 @@
+import { createI18n } from 'vue-i18n'
+import elEn from 'element-plus/es/locale/lang/en'
+import elZh from 'element-plus/es/locale/lang/zh-cn'
+import en from './en'
+import zh from './zh'
+
+const messages = {
+  en: {
+    ...elEn,
+    ...en
+  },
+  zh: {
+    ...elZh,
+    ...zh
+  }
+}
+
+const i18n= createI18n({
+  legacy: false,
+  globalInjection:true,
+  locale: localStorage.getItem('asg-language') || 'en',
+  messages,
+})
+
+export default i18n
+\ No newline at end of file
diff --git a/src/i18n/zh.js b/src/i18n/zh.js
new file mode 100644
index 0000000..55dfe20
--- /dev/null
+++ b/src/i18n/zh.js
@@ -0,0 +1,10 @@
+// zh.js
+
+export default {
+  overall: {
+    add: '新增',
+    edit: '编辑',
+    save: '保存',
+    cancel: '取消',
+  }
+}
+\ No newline at end of file
diff --git a/src/main.js b/src/main.js
new file mode 100644
index 0000000..4b58229
--- /dev/null
+++ b/src/main.js
@@ -0,0 +1,17 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+
+import './styles/index.scss'
+import './styles/element/index.scss'
+
+import router from "./router"
+import { createPinia } from 'pinia'
+import ElementPlus from 'element-plus'
+import i18n from '@/i18n/index'
+
+const app = createApp(App)
+app.use(router)
+app.use(createPinia())
+app.use(ElementPlus)
+app.use(i18n)
+app.mount('#app')
diff --git a/src/router/index.js b/src/router/index.js
new file mode 100644
index 0000000..74ec6b4
--- /dev/null
+++ b/src/router/index.js
@@ -0,0 +1,19 @@
+import { createRouter, createWebHashHistory } from 'vue-router';
+
+const routerHistory = createWebHashHistory();
+
+const router = createRouter({
+  history: routerHistory,
+  routes: [
+    {
+      path: '/',
+      redirect: '/home',
+    },
+    {
+      path: '/home',
+      component: () => import('../views/home.vue'),
+    },
+  ],
+});
+
+export default router;
diff --git a/src/store/index.js b/src/store/index.js
new file mode 100644
index 0000000..d54d804
--- /dev/null
+++ b/src/store/index.js
@@ -0,0 +1,13 @@
+import { defineStore } from 'pinia';
+
+export const useMainStore = defineStore({
+  id:'mainStore',
+  state: () => {
+    return {
+      language: localStorage.getItem('asg-language') || 'en',
+      theme: localStorage.getItem('asg-theme') || 'light',
+    }
+  },
+  getters: {
+  },
+})
diff --git a/src/styles/components/codemirror.scss b/src/styles/components/codemirror.scss
new file mode 100644
index 0000000..4b21e83
--- /dev/null
+++ b/src/styles/components/codemirror.scss
@@ -0,0 +1,6 @@
+.codemirror-container{
+  display: block !important;
+  .CodeMirror.CodeMirror-wrap{
+    line-height: inherit !important;
+  }
+}
+\ No newline at end of file
diff --git a/src/styles/components/index.scss b/src/styles/components/index.scss
new file mode 100644
index 0000000..c4b5b9a
--- /dev/null
+++ b/src/styles/components/index.scss
@@ -0,0 +1,2 @@
+@import './codemirror.scss';
+@import './jsonDiff.scss';
+\ No newline at end of file
diff --git a/src/styles/components/jsonDiff.scss b/src/styles/components/jsonDiff.scss
new file mode 100644
index 0000000..53e460c
--- /dev/null
+++ b/src/styles/components/jsonDiff.scss
@@ -0,0 +1,8 @@
+.code-diff-view {
+  .diff-table {
+    .blob-code{
+      padding-top: 1px;
+      padding-bottom: 1px;
+    }
+  }
+}
+\ No newline at end of file
diff --git a/src/styles/element/dark.scss b/src/styles/element/dark.scss
new file mode 100644
index 0000000..ee1c780
--- /dev/null
+++ b/src/styles/element/dark.scss
@@ -0,0 +1,9 @@
+@forward 'element-plus/theme-chalk/src/dark/var.scss' with (
+  $colors: (
+    'primary': (
+      'base': #00ccff,
+    ),
+  ),
+);
+
+@use "element-plus/theme-chalk/src/dark/css-vars.scss" as *;
diff --git a/src/styles/element/index.scss b/src/styles/element/index.scss
new file mode 100644
index 0000000..85120b5
--- /dev/null
+++ b/src/styles/element/index.scss
@@ -0,0 +1,2 @@
+@import "./light.scss";
+@import "./dark.scss";
diff --git a/src/styles/element/light.scss b/src/styles/element/light.scss
new file mode 100644
index 0000000..f5861ce
--- /dev/null
+++ b/src/styles/element/light.scss
@@ -0,0 +1,9 @@
+@forward 'element-plus/theme-chalk/src/common/var.scss' with (
+  $colors: (
+    'primary': (
+      'base': pink,
+    ),
+  ),
+);
+
+@use "element-plus/theme-chalk/src/index.scss" as *;
+\ No newline at end of file
diff --git a/src/styles/index.scss b/src/styles/index.scss
new file mode 100644
index 0000000..1435a2d
--- /dev/null
+++ b/src/styles/index.scss
@@ -0,0 +1,3 @@
+/* 加载主题变量 */
+@import './theme/index.scss'; 
+@import './components/index.scss';
+\ No newline at end of file
diff --git a/src/styles/theme/dark.scss b/src/styles/theme/dark.scss
new file mode 100644
index 0000000..a0b7a25
--- /dev/null
+++ b/src/styles/theme/dark.scss
@@ -0,0 +1,9 @@
+html.dark{
+  /* 1.字色 */
+  // 标题字色
+  --color-text-primary: #D8D8D8;
+  // 普通字色
+  --color-text-regular: #BEBEBE;
+  // 次要字色
+  --color-text-secondary: #999999;
+}
diff --git a/src/styles/theme/index.scss b/src/styles/theme/index.scss
new file mode 100644
index 0000000..0e3b9cb
--- /dev/null
+++ b/src/styles/theme/index.scss
@@ -0,0 +1,2 @@
+@import './light.scss';
+@import './dark.scss'; 
diff --git a/src/styles/theme/light.scss b/src/styles/theme/light.scss
new file mode 100644
index 0000000..7ea0c2e
--- /dev/null
+++ b/src/styles/theme/light.scss
@@ -0,0 +1,9 @@
+:root{
+  /* 1.字色 */
+  // 标题字色
+  --color-text-primary: #333333;
+  // 普通字色
+  --color-text-regular: #666666;
+  // 标题字色
+  --color-text-secondary: #999999;
+}
+\ No newline at end of file
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
new file mode 100644
index 0000000..a1544f0
--- /dev/null
+++ b/src/styles/variables.scss
@@ -0,0 +1 @@
+$aaa:green
diff --git a/src/views/home.vue b/src/views/home.vue
new file mode 100644
index 0000000..58a8a8a
--- /dev/null
+++ b/src/views/home.vue
@@ -0,0 +1,104 @@
+<template>
+  <el-switch v-model="isDark" @change="themeChange"/>
+  <el-button type="primary">{{ isDark ? 'Dark' : 'Light' }}</el-button>
+  <p>自定义字体主题</p>
+  <el-table :data="tableData" style="width: 100%">
+    <el-table-column prop="date" label="Date" />
+    <el-table-column prop="name" label="Name" />
+    <el-table-column prop="address" label="Address" />
+  </el-table>
+  <el-date-picker
+    v-model="date"
+    type="datetime"
+  />
+  <el-select
+    v-model="value"
+    placeholder="Select"
+    size="large"
+    style="width: 240px"
+    @change="language"
+  >
+    <el-option
+      v-for="item in options"
+      :key="item.value"
+      :label="item.label"
+      :value="item.value"
+    />
+  </el-select>
+  <p>{{$t('overall.add') }}</p>
+  <p>{{$t('overall.edit') }}</p>
+  <p>{{$t('overall.save') }}</p>
+  <jsonEditor></jsonEditor>
+  <jsonDiff></jsonDiff>
+</template>
+
+<script setup>
+import jsonEditor from '@/components/jsonEditor.vue'
+import jsonDiff from '@/components/jsonDiff.vue'
+import { ref, } from 'vue'
+import { useI18n } from "vue-i18n"
+import { useMainStore } from '@/store/index'
+import { useTheme } from '@/hooks/useTheme'
+
+const { t, locale } = useI18n()
+
+const value = ref(locale.value)
+
+const options = [
+  {
+    value: 'en',
+    label: 'English',
+  },
+  {
+    value: 'zh',
+    label: '中文',
+  },
+]
+
+const mainStore = useMainStore()
+
+const language = (val)=>{
+  locale.value = val
+  mainStore.language = val
+  localStorage.setItem('asg-language', val)
+}
+
+const { themeSet } = useTheme()
+const isDark = ref(mainStore.theme === 'dark' )
+
+const themeChange = (val)=>{
+  themeSet(val? 'dark' : 'light')
+}
+
+const date = ref('')
+
+const tableData = [
+  {
+    date: '2016-05-03',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+  },
+  {
+    date: '2016-05-02',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+  },
+  {
+    date: '2016-05-04',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+  },
+  {
+    date: '2016-05-01',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+  },
+]
+
+</script>
+
+<style lang="scss" scoped>
+p {
+  color: var(--color-text-primary);
+}
+</style>