+
+
+
+
+
+
+
+
+ {{ title }}
+
+
+
+
+
+
+
+
+
+
+
+
+ ![expand code]()
+ ![expand code]()
+
+
+
+
+
+
+
+
diff --git a/site/src/components/api.vue b/site/src/components/api.vue
new file mode 100644
index 000000000..468e73e5b
--- /dev/null
+++ b/site/src/components/api.vue
@@ -0,0 +1,31 @@
+
+
+
+
+
diff --git a/site/src/components/demoContainer.vue b/site/src/components/demoContainer.vue
new file mode 100644
index 000000000..11605a3eb
--- /dev/null
+++ b/site/src/components/demoContainer.vue
@@ -0,0 +1,79 @@
+
+
+
+
+
+
+
+
+
diff --git a/site/src/components/demoSort.jsx b/site/src/components/demoSort.jsx
new file mode 100644
index 000000000..149cec1d9
--- /dev/null
+++ b/site/src/components/demoSort.jsx
@@ -0,0 +1,47 @@
+import { defineComponent, inject } from 'vue';
+import { GLOBAL_CONFIG } from '@/SymbolKey';
+
+export default defineComponent({
+ props: {
+ cols: {
+ type: [Number, String],
+ default: 2,
+ },
+ },
+ setup() {
+ return {
+ demoContext: inject('demoContext', {}),
+ globalConfig: inject(GLOBAL_CONFIG),
+ };
+ },
+ render() {
+ const { cols, globalConfig, $slots } = this;
+ // 手机访问强制开启单行 demo 模式
+ const isSingleCol = cols === 1 || globalConfig.isMobile.value;
+ const leftChildren = [];
+ const rightChildren = [];
+ const children = $slots.default?.() || [];
+ children.forEach((demo, index) => {
+ if (index % 2 === 0 || isSingleCol) {
+ leftChildren.push(demo);
+ } else {
+ rightChildren.push(demo);
+ }
+ });
+ return (
+
+
+
+
+
+ Star
+
+
+
+
+
+
+
diff --git a/site/src/components/rice/GoogleAdsMin.vue b/site/src/components/rice/GoogleAdsMin.vue
new file mode 100644
index 000000000..c2507b015
--- /dev/null
+++ b/site/src/components/rice/GoogleAdsMin.vue
@@ -0,0 +1,43 @@
+
+
+
+
+
+
diff --git a/site/src/components/rice/GoogleAdsTop.vue b/site/src/components/rice/GoogleAdsTop.vue
new file mode 100644
index 000000000..17f705d85
--- /dev/null
+++ b/site/src/components/rice/GoogleAdsTop.vue
@@ -0,0 +1,34 @@
+
+
+
+
+
+
diff --git a/site/src/components/rice/WWAds.vue b/site/src/components/rice/WWAds.vue
new file mode 100644
index 000000000..c4f1f8254
--- /dev/null
+++ b/site/src/components/rice/WWAds.vue
@@ -0,0 +1,27 @@
+
+
+
+
+
+
diff --git a/site/src/components/rice/geektime.vue b/site/src/components/rice/geektime.vue
new file mode 100644
index 000000000..bf98d7e24
--- /dev/null
+++ b/site/src/components/rice/geektime.vue
@@ -0,0 +1,45 @@
+
+
+
+ 
+
+
+
+
+
+
+
diff --git a/site/src/components/rice/geektime_ads.vue b/site/src/components/rice/geektime_ads.vue
new file mode 100644
index 000000000..e23e4b8d2
--- /dev/null
+++ b/site/src/components/rice/geektime_ads.vue
@@ -0,0 +1,63 @@
+
+
+
+
+
+
+
+ 
+
+
+
+
+
+
+
diff --git a/site/src/components/rice/right_bottom_rice.vue b/site/src/components/rice/right_bottom_rice.vue
new file mode 100644
index 000000000..61965eade
--- /dev/null
+++ b/site/src/components/rice/right_bottom_rice.vue
@@ -0,0 +1,62 @@
+
+
+
+
+ 
+
+
+
+
+
+
diff --git a/site/src/components/rice/sponsors.vue b/site/src/components/rice/sponsors.vue
new file mode 100644
index 000000000..bf9372645
--- /dev/null
+++ b/site/src/components/rice/sponsors.vue
@@ -0,0 +1,71 @@
+
+
+
+
+
+
+
+ 如果您有品牌推广、活动推广、招聘推广、社区合作等需求，欢迎联系我们，成为赞助商。
+
+ 您的广告将出现在 And Design Vue 文档所有子页面及 GitHub Readme 等页面。 +
+ 咨询邮箱： + antdv@foxmail.com +
+
+
+
+
diff --git a/site/src/components/rice/top_rice.vue b/site/src/components/rice/top_rice.vue
new file mode 100644
index 000000000..fb4b2091a
--- /dev/null
+++ b/site/src/components/rice/top_rice.vue
@@ -0,0 +1,63 @@
+
+
+
+
+
+
+
diff --git a/site/src/demo.js b/site/src/demo.js
new file mode 100644
index 000000000..ff3209fa1
--- /dev/null
+++ b/site/src/demo.js
@@ -0,0 +1,398 @@
+export default {
+ avatar: {
+ category: 'Components',
+ subtitle: '头像',
+ type: 'Data Display',
+ title: 'Avatar',
+ },
+ badge: {
+ category: 'Components',
+ subtitle: '徽标数',
+ type: 'Data Display',
+ title: 'Badge',
+ },
+ comment: {
+ category: 'Components',
+ subtitle: '评论',
+ type: 'Data Display',
+ title: 'Comment',
+ },
+ configProvider: {
+ category: 'Components',
+ subtitle: '全局化配置',
+ type: 'Other',
+ title: 'ConfigProvider',
+ },
+ empty: {
+ category: 'Components',
+ subtitle: '空状态',
+ type: 'Data Display',
+ title: 'Empty',
+ },
+ breadcrumb: {
+ category: 'Components',
+ subtitle: '面包屑',
+ type: 'Navigation',
+ title: 'Breadcrumb',
+ },
+ button: {
+ category: 'Components',
+ subtitle: '按钮',
+ type: 'General',
+ title: 'Button',
+ },
+ card: {
+ category: 'Components',
+ subtitle: '卡片',
+ type: 'Data Display',
+ title: 'Card',
+ cols: 1,
+ },
+ checkbox: {
+ category: 'Components',
+ subtitle: '多选框',
+ type: 'Data Entry',
+ title: 'Checkbox',
+ },
+ grid: {
+ category: 'Components',
+ subtitle: '栅格',
+ type: 'Layout',
+ title: 'Grid',
+ cols: 1,
+ },
+ icon: {
+ category: 'Components',
+ subtitle: '图标',
+ type: 'General',
+ title: 'Icon',
+ },
+ input: {
+ category: 'Components',
+ subtitle: '输入框',
+ type: 'Data Entry',
+ title: 'Input',
+ },
+ mentions: {
+ category: 'Components',
+ subtitle: '提及',
+ type: 'Data Entry',
+ title: 'Mentions',
+ },
+ select: {
+ category: 'Components',
+ subtitle: '选择器',
+ type: 'Data Entry',
+ title: 'Select',
+ },
+ menu: {
+ category: 'Components',
+ subtitle: '导航菜单',
+ type: 'Navigation',
+ title: 'Menu',
+ cols: 1,
+ },
+ pagination: {
+ category: 'Components',
+ subtitle: '分页',
+ type: 'Navigation',
+ title: 'Pagination',
+ cols: 1,
+ },
+ pageHeader: {
+ category: 'Components',
+ subtitle: '页头',
+ type: 'Navigation',
+ title: 'PageHeader',
+ cols: 1,
+ },
+ popconfirm: {
+ category: 'Components',
+ subtitle: '气泡确认框',
+ type: 'Feedback',
+ title: 'Popconfirm',
+ },
+ popover: {
+ category: 'Components',
+ subtitle: '气泡卡片',
+ type: 'Data Display',
+ title: 'Popover',
+ },
+ radio: {
+ category: 'Components',
+ subtitle: '单选框',
+ type: 'Data Entry',
+ title: 'Radio',
+ },
+ rate: {
+ category: 'Components',
+ subtitle: '评分',
+ type: 'Data Entry',
+ title: 'Rate',
+ cols: 1,
+ },
+ tabs: {
+ category: 'Components',
+ subtitle: '标签页',
+ type: 'Data Display',
+ title: 'Tabs',
+ cols: 1,
+ },
+ tag: {
+ category: 'Components',
+ subtitle: '标签',
+ type: 'Data Display',
+ title: 'Tag',
+ },
+ tooltip: {
+ category: 'Components',
+ subtitle: '文字提示',
+ type: 'Data Display',
+ title: 'Tooltip',
+ },
+ dropdown: {
+ category: 'Components',
+ subtitle: '下拉菜单',
+ type: 'Navigation',
+ title: 'Dropdown',
+ },
+ divider: {
+ category: 'Components',
+ subtitle: '分割线',
+ type: 'Other',
+ title: 'Divider',
+ },
+ collapse: {
+ category: 'Components',
+ subtitle: '折叠面板',
+ type: 'Data Display',
+ title: 'Collapse',
+ cols: 1,
+ },
+ notification: {
+ category: 'Components',
+ subtitle: '通知提醒框',
+ type: 'Feedback',
+ title: 'Notification',
+ },
+ message: {
+ category: 'Components',
+ subtitle: '全局提示',
+ type: 'Feedback',
+ title: 'Message',
+ },
+ spin: {
+ category: 'Components',
+ subtitle: '加载中',
+ type: 'Feedback',
+ title: 'Spin',
+ },
+ result: {
+ category: 'Components',
+ subtitle: '结果',
+ type: 'Feedback',
+ title: 'Result',
+ },
+ switch: {
+ category: 'Components',
+ subtitle: '开关',
+ type: 'Data Entry',
+ title: 'Switch',
+ },
+ autoComplete: {
+ category: 'Components',
+ subtitle: '自动完成',
+ type: 'Data Entry',
+ title: 'AutoComplete',
+ cols: 2,
+ },
+ affix: {
+ category: 'Components',
+ subtitle: '固钉',
+ type: 'Navigation',
+ title: 'Affix',
+ },
+ cascader: {
+ category: 'Components',
+ subtitle: '级联选择',
+ type: 'Data Entry',
+ title: 'Cascader',
+ },
+ backTop: {
+ category: 'Components',
+ subtitle: '回到顶部',
+ type: 'Other',
+ title: 'BackTop',
+ },
+ modal: {
+ category: 'Components',
+ subtitle: '对话框',
+ type: 'Feedback',
+ title: 'Modal',
+ },
+ alert: {
+ category: 'Components',
+ subtitle: '警告提示',
+ type: 'Feedback',
+ title: 'Alert',
+ },
+ timePicker: {
+ category: 'Components',
+ subtitle: '时间选择框',
+ type: 'Data Entry',
+ title: 'TimePicker',
+ },
+ steps: {
+ category: 'Components',
+ subtitle: '步骤条',
+ type: 'Navigation',
+ title: 'Steps',
+ cols: 1,
+ },
+ calendar: {
+ category: 'Components',
+ subtitle: '日历',
+ type: 'Data Display',
+ title: 'Calendar',
+ cols: 1,
+ },
+ datePicker: {
+ category: 'Components',
+ subtitle: '日期选择框',
+ type: 'Data Entry',
+ title: 'DatePicker',
+ },
+ slider: {
+ category: 'Components',
+ subtitle: '滑动输入条',
+ type: 'Data Entry',
+ title: 'Slider',
+ },
+ progress: {
+ category: 'Components',
+ subtitle: '进度条',
+ type: 'Feedback',
+ title: 'Progress',
+ },
+ timeline: {
+ category: 'Components',
+ subtitle: '时间轴',
+ type: 'Data Display',
+ title: 'Timeline',
+ },
+ table: {
+ category: 'Components',
+ subtitle: '表格',
+ type: 'Data Display',
+ title: 'Table',
+ cols: 1,
+ },
+ inputNumber: {
+ category: 'Components',
+ subtitle: '数字输入框',
+ type: 'Data Entry',
+ title: 'InputNumber',
+ },
+ transfer: {
+ category: 'Components',
+ subtitle: '穿梭框',
+ type: 'Data Entry',
+ title: 'Transfer',
+ cols: '1',
+ },
+ upload: {
+ category: 'Components',
+ subtitle: '上传',
+ type: 'Data Entry',
+ title: 'Upload',
+ },
+ carousel: {
+ category: 'Components',
+ type: 'Data Display',
+ title: 'Carousel',
+ subtitle: '走马灯',
+ },
+ tree: {
+ category: 'Components',
+ subtitle: '树形控件',
+ type: 'Data Display',
+ title: 'Tree',
+ },
+ treeSelect: {
+ category: 'Components',
+ subtitle: '树选择',
+ type: 'Data Entry',
+ title: 'TreeSelect',
+ },
+ layout: {
+ category: 'Components',
+ subtitle: '布局',
+ type: 'Layout',
+ title: 'Layout',
+ cols: 1,
+ },
+ form: {
+ category: 'Components',
+ subtitle: '表单',
+ type: 'Data Entry',
+ title: 'Form',
+ cols: 1,
+ },
+ anchor: {
+ category: 'Components',
+ subtitle: '锚点',
+ type: 'Other',
+ title: 'Anchor',
+ cols: 2,
+ },
+ image: {
+ category: 'Components',
+ subtitle: '图片',
+ type: 'Data Display',
+ title: 'Image',
+ cols: 2,
+ },
+ list: {
+ category: 'Components',
+ subtitle: '列表',
+ type: 'Data Display',
+ title: 'List',
+ cols: 1,
+ },
+ drawer: {
+ category: 'Components',
+ type: 'Feedback',
+ title: 'Drawer',
+ subtitle: '抽屉',
+ },
+ skeleton: {
+ category: 'Components',
+ type: 'Feedback',
+ title: 'Skeleton',
+ subtitle: '骨架屏',
+ },
+ statistic: {
+ category: 'Components',
+ subtitle: '统计数值',
+ type: 'Data Display',
+ title: 'Statistic',
+ },
+ descriptions: {
+ category: 'Components',
+ subtitle: '描述列表',
+ type: 'Data Display',
+ title: 'Descriptions',
+ },
+ space: {
+ category: 'Components',
+ subtitle: '间距',
+ type: 'Layout',
+ title: 'Space',
+ },
+ // colorPicker: {
+ // category: 'Components',
+ // subtitle: '取色器',
+ // type: 'Data Entry',
+ // title: 'ColorPicker (Beta)',
+ // },
+};
diff --git a/site/src/directives/clipboard/clipboard-action.js b/site/src/directives/clipboard/clipboard-action.js
new file mode 100644
index 000000000..679e1529d
--- /dev/null
+++ b/site/src/directives/clipboard/clipboard-action.js
@@ -0,0 +1,208 @@
+import select from './select';
+
+/**
+ * Inner class which performs selection from either `text` or `target`
+ * properties and then executes copy or cut operations.
+ */
+class ClipboardAction {
+ /**
+ * @param {Object} options
+ */
+ constructor(options) {
+ this.resolveOptions(options);
+ this.initSelection();
+ }
+
+ /**
+ * Defines base properties passed from constructor.
+ * @param {Object} options
+ */
+ resolveOptions(options = {}) {
+ this.action = options.action;
+ this.container = options.container;
+ this.emitter = options.emitter;
+ this.target = options.target;
+ this.text = options.text;
+ this.trigger = options.trigger;
+
+ this.selectedText = '';
+ }
+
+ /**
+ * Decides which selection strategy is going to be applied based
+ * on the existence of `text` and `target` properties.
+ */
+ initSelection() {
+ if (this.text) {
+ this.selectFake();
+ } else if (this.target) {
+ this.selectTarget();
+ }
+ }
+
+ /**
+ * Creates a fake textarea element, sets its value from `text` property,
+ * and makes a selection on it.
+ */
+ selectFake() {
+ const isRTL = document.documentElement.getAttribute('dir') == 'rtl';
+
+ this.removeFake();
+
+ this.fakeHandlerCallback = () => this.removeFake();
+ this.fakeHandler = this.container.addEventListener('click', this.fakeHandlerCallback) || true;
+
+ this.fakeElem = document.createElement('textarea');
+ // Prevent zooming on iOS
+ this.fakeElem.style.fontSize = '12pt';
+ // Reset box model
+ this.fakeElem.style.border = '0';
+ this.fakeElem.style.padding = '0';
+ this.fakeElem.style.margin = '0';
+ // Move element out of screen horizontally
+ this.fakeElem.style.position = 'absolute';
+ this.fakeElem.style[isRTL ? 'right' : 'left'] = '-9999px';
+ // Move element to the same position vertically
+ let yPosition = window.pageYOffset || document.documentElement.scrollTop;
+ this.fakeElem.style.top = `${yPosition}px`;
+
+ this.fakeElem.setAttribute('readonly', '');
+ this.fakeElem.value = this.text;
+
+ this.container.appendChild(this.fakeElem);
+
+ this.selectedText = select(this.fakeElem);
+ this.copyText();
+ }
+
+ /**
+ * Only removes the fake element after another click event, that way
+ * a user can hit `Ctrl+C` to copy because selection still exists.
+ */
+ removeFake() {
+ if (this.fakeHandler) {
+ this.container.removeEventListener('click', this.fakeHandlerCallback);
+ this.fakeHandler = null;
+ this.fakeHandlerCallback = null;
+ }
+
+ if (this.fakeElem) {
+ this.container.removeChild(this.fakeElem);
+ this.fakeElem = null;
+ }
+ }
+
+ /**
+ * Selects the content from element passed on `target` property.
+ */
+ selectTarget() {
+ this.selectedText = select(this.target);
+ this.copyText();
+ }
+
+ /**
+ * Executes the copy operation based on the current selection.
+ */
+ copyText() {
+ let succeeded;
+
+ try {
+ succeeded = document.execCommand(this.action);
+ } catch (err) {
+ succeeded = false;
+ }
+
+ this.handleResult(succeeded);
+ }
+
+ /**
+ * Fires an event based on the copy operation result.
+ * @param {Boolean} succeeded
+ */
+ handleResult(succeeded) {
+ this.emitter.emit(succeeded ? 'success' : 'error', {
+ action: this.action,
+ text: this.selectedText,
+ trigger: this.trigger,
+ clearSelection: this.clearSelection.bind(this),
+ });
+ }
+
+ /**
+ * Moves focus away from `target` and back to the trigger, removes current selection.
+ */
+ clearSelection() {
+ if (this.trigger) {
+ this.trigger.focus();
+ }
+ document.activeElement.blur();
+ window.getSelection().removeAllRanges();
+ }
+
+ /**
+ * Sets the `action` to be performed which can be either 'copy' or 'cut'.
+ * @param {String} action
+ */
+ set action(action = 'copy') {
+ this._action = action;
+
+ if (this._action !== 'copy' && this._action !== 'cut') {
+ throw new Error('Invalid "action" value, use either "copy" or "cut"');
+ }
+ }
+
+ /**
+ * Gets the `action` property.
+ * @return {String}
+ */
+ get action() {
+ return this._action;
+ }
+
+ /**
+ * Sets the `target` property using an element
+ * that will be have its content copied.
+ * @param {Element} target
+ */
+ set target(target) {
+ if (target !== undefined) {
+ if (target && typeof target === 'object' && target.nodeType === 1) {
+ if (this.action === 'copy' && target.hasAttribute('disabled')) {
+ throw new Error(
+ 'Invalid "target" attribute. Please use "readonly" instead of "disabled" attribute',
+ );
+ }
+
+ if (
+ this.action === 'cut' &&
+ (target.hasAttribute('readonly') || target.hasAttribute('disabled'))
+ ) {
+ throw new Error(
+ 'Invalid "target" attribute. You can\'t cut text from elements with "readonly" or "disabled" attributes',
+ );
+ }
+
+ this._target = target;
+ } else {
+ throw new Error('Invalid "target" value, use a valid Element');
+ }
+ }
+ }
+
+ /**
+ * Gets the `target` property.
+ * @return {String|HTMLElement}
+ */
+ get target() {
+ return this._target;
+ }
+
+ /**
+ * Destroy lifecycle.
+ */
+ destroy() {
+ this.removeFake();
+ }
+}
+
+export default ClipboardAction;
diff --git a/site/src/directives/clipboard/clipboard.js b/site/src/directives/clipboard/clipboard.js
new file mode 100644
index 000000000..ceff0df5d
--- /dev/null
+++ b/site/src/directives/clipboard/clipboard.js
@@ -0,0 +1,134 @@
+import ClipboardAction from './clipboard-action';
+import Emitter from './tiny-emitter';
+import listen from './listen';
+
+/**
+ * Base class which takes one or more elements, adds event listeners to them,
+ * and instantiates a new `ClipboardAction` on each click.
+ */
+class Clipboard extends Emitter {
+ /**
+ * @param {String|HTMLElement|HTMLCollection|NodeList} trigger
+ * @param {Object} options
+ */
+ constructor(trigger, options) {
+ super();
+
+ this.resolveOptions(options);
+ this.listenClick(trigger);
+ }
+
+ /**
+ * Defines if attributes would be resolved using internal setter functions
+ * or custom functions that were passed in the constructor.
+ * @param {Object} options
+ */
+ resolveOptions(options = {}) {
+ this.action = typeof options.action === 'function' ? options.action : this.defaultAction;
+ this.target = typeof options.target === 'function' ? options.target : this.defaultTarget;
+ this.text = typeof options.text === 'function' ? options.text : this.defaultText;
+ this.container = typeof options.container === 'object' ? options.container : document.body;
+ }
+
+ /**
+ * Adds a click event listener to the passed trigger.
+ * @param {String|HTMLElement|HTMLCollection|NodeList} trigger
+ */
+ listenClick(trigger) {
+ this.listener = listen(trigger, 'click', e => this.onClick(e));
+ }
+
+ /**
+ * Defines a new `ClipboardAction` on each click event.
+ * @param {Event} e
+ */
+ onClick(e) {
+ const trigger = e.delegateTarget || e.currentTarget;
+
+ if (this.clipboardAction) {
+ this.clipboardAction = null;
+ }
+
+ this.clipboardAction = new ClipboardAction({
+ action: this.action(trigger),
+ target: this.target(trigger),
+ text: this.text(trigger),
+ container: this.container,
+ trigger: trigger,
+ emitter: this,
+ });
+ }
+
+ /**
+ * Default `action` lookup function.
+ * @param {Element} trigger
+ */
+ defaultAction(trigger) {
+ return getAttributeValue('action', trigger);
+ }
+
+ /**
+ * Default `target` lookup function.
+ * @param {Element} trigger
+ */
+ defaultTarget(trigger) {
+ const selector = getAttributeValue('target', trigger);
+
+ if (selector) {
+ return document.querySelector(selector);
+ }
+ }
+
+ /**
+ * Returns the support of the given action, or all actions if no action is
+ * given.
+ * @param {String} [action]
+ */
+ static isSupported(action = ['copy', 'cut']) {
+ const actions = typeof action === 'string' ? [action] : action;
+ let support = !!document.queryCommandSupported;
+
+ actions.forEach(action => {
+ support = support && !!document.queryCommandSupported(action);
+ });
+
+ return support;
+ }
+
+ /**
+ * Default `text` lookup function.
+ * @param {Element} trigger
+ */
+ defaultText(trigger) {
+ return getAttributeValue('text', trigger);
+ }
+
+ /**
+ * Destroy lifecycle.
+ */
+ destroy() {
+ this.listener.destroy();
+
+ if (this.clipboardAction) {
+ this.clipboardAction.destroy();
+ this.clipboardAction = null;
+ }
+ }
+}
+
+/**
+ * Helper function to retrieve attribute value.
+ * @param {String} suffix
+ * @param {Element} element
+ */
+function getAttributeValue(suffix, element) {
+ const attribute = `data-clipboard-${suffix}`;
+
+ if (!element.hasAttribute(attribute)) {
+ return;
+ }
+
+ return element.getAttribute(attribute);
+}
+
+export default Clipboard;
diff --git a/site/src/directives/clipboard/closest.js b/site/src/directives/clipboard/closest.js
new file mode 100644
index 000000000..d99a0c9fb
--- /dev/null
+++ b/site/src/directives/clipboard/closest.js
@@ -0,0 +1,33 @@
+var DOCUMENT_NODE_TYPE = 9;
+
+/**
+ * A polyfill for Element.matches()
+ */
+if (typeof Element !== 'undefined' && !Element.prototype.matches) {
+ var proto = Element.prototype;
+
+ proto.matches =
+ proto.matchesSelector ||
+ proto.mozMatchesSelector ||
+ proto.msMatchesSelector ||
+ proto.oMatchesSelector ||
+ proto.webkitMatchesSelector;
+}
+
+/**
+ * Finds the closest parent that matches a selector.
+ *
+ * @param {Element} element
+ * @param {String} selector
+ * @return {Function}
+ */
+function closest(element, selector) {
+ while (element && element.nodeType !== DOCUMENT_NODE_TYPE) {
+ if (typeof element.matches === 'function' && element.matches(selector)) {
+ return element;
+ }
+ element = element.parentNode;
+ }
+}
+
+export default closest;
diff --git a/site/src/directives/clipboard/delegate.js b/site/src/directives/clipboard/delegate.js
new file mode 100644
index 000000000..b332695ff
--- /dev/null
+++ b/site/src/directives/clipboard/delegate.js
@@ -0,0 +1,78 @@
+import closest from './closest';
+
+/**
+ * Delegates event to a selector.
+ *
+ * @param {Element} element
+ * @param {String} selector
+ * @param {String} type
+ * @param {Function} callback
+ * @param {Boolean} useCapture
+ * @return {Object}
+ */
+function _delegate(element, selector, type, callback, useCapture) {
+ var listenerFn = listener.apply(this, arguments);
+
+ element.addEventListener(type, listenerFn, useCapture);
+
+ return {
+ destroy: function () {
+ element.removeEventListener(type, listenerFn, useCapture);
+ },
+ };
+}
+
+/**
+ * Delegates event to a selector.
+ *
+ * @param {Element|String|Array} [elements]
+ * @param {String} selector
+ * @param {String} type
+ * @param {Function} callback
+ * @param {Boolean} useCapture
+ * @return {Object}
+ */
+function delegate(elements, selector, type, callback, useCapture) {
+ // Handle the regular Element usage
+ if (typeof elements.addEventListener === 'function') {
+ return _delegate.apply(null, arguments);
+ }
+
+ // Handle Element-less usage, it defaults to global delegation
+ if (typeof type === 'function') {
+ // Use `document` as the first parameter, then apply arguments
+ // This is a short way to .unshift `arguments` without running into deoptimizations
+ return _delegate.bind(null, document).apply(null, arguments);
+ }
+
+ // Handle Selector-based usage
+ if (typeof elements === 'string') {
+ elements = document.querySelectorAll(elements);
+ }
+
+ // Handle Array-like based usage
+ return Array.prototype.map.call(elements, function (element) {
+ return _delegate(element, selector, type, callback, useCapture);
+ });
+}
+
+/**
+ * Finds closest match and invokes callback.
+ *
+ * @param {Element} element
+ * @param {String} selector
+ * @param {String} type
+ * @param {Function} callback
+ * @return {Function}
+ */
+function listener(element, selector, type, callback) {
+ return function (e) {
+ e.delegateTarget = closest(e.target, selector);
+
+ if (e.delegateTarget) {
+ callback.call(element, e);
+ }
+ };
+}
+
+export default delegate;
diff --git a/site/src/directives/clipboard/index.js b/site/src/directives/clipboard/index.js
new file mode 100644
index 000000000..848bb6fda
--- /dev/null
+++ b/site/src/directives/clipboard/index.js
@@ -0,0 +1,92 @@
+import Clipboard from './clipboard'; // FIXME: workaround for browserify
+
+const VueClipboardConfig = {
+ autoSetContainer: false,
+ appendToBody: true, // This fixes IE, see #50
+};
+
+const VueClipboard = {
+ install(app) {
+ // Vue.prototype.$clipboardConfig = VueClipboardConfig;
+ // Vue.prototype.$copyText = function(text, container) {
+ // return new Promise(function(resolve, reject) {
+ // const fakeElement = document.createElement('button');
+ // const clipboard = new Clipboard(fakeElement, {
+ // text() {
+ // return text;
+ // },
+ // action() {
+ // return 'copy';
+ // },
+ // container: typeof container === 'object' ? container : document.body,
+ // });
+ // clipboard.on('success', function(e) {
+ // clipboard.destroy();
+ // resolve(e);
+ // });
+ // clipboard.on('error', function(e) {
+ // clipboard.destroy();
+ // reject(e);
+ // });
+ // if (VueClipboardConfig.appendToBody) document.body.appendChild(fakeElement);
+ // fakeElement.click();
+ // if (VueClipboardConfig.appendToBody) document.body.removeChild(fakeElement);
+ // });
+ // };
+
+ app.directive('clipboard', {
+ mounted(el, binding) {
+ if (binding.arg === 'success') {
+ el._vClipboard_success = binding.value;
+ } else if (binding.arg === 'error') {
+ el._vClipboard_error = binding.value;
+ } else {
+ const clipboard = new Clipboard(el, {
+ text() {
+ return binding.value;
+ },
+ action() {
+ return binding.arg === 'cut' ? 'cut' : 'copy';
+ },
+ container: VueClipboardConfig.autoSetContainer ? el : undefined,
+ });
+ clipboard.on('success', function (e) {
+ const callback = el._vClipboard_success;
+ callback && callback(e);
+ });
+ clipboard.on('error', function (e) {
+ const callback = el._vClipboard_error;
+ callback && callback(e);
+ });
+ el._vClipboard = clipboard;
+ }
+ },
+ updated(el, binding) {
+ if (binding.arg === 'success') {
+ el._vClipboard_success = binding.value;
+ } else if (binding.arg === 'error') {
+ el._vClipboard_error = binding.value;
+ } else {
+ el._vClipboard.text = function () {
+ return binding.value;
+ };
+ el._vClipboard.action = function () {
+ return binding.arg === 'cut' ? 'cut' : 'copy';
+ };
+ }
+ },
+ unmounted(el, binding) {
+ if (binding.arg === 'success') {
+ delete el._vClipboard_success;
+ } else if (binding.arg === 'error') {
+ delete el._vClipboard_error;
+ } else {
+ el._vClipboard.destroy();
+ delete el._vClipboard;
+ }
+ },
+ });
+ },
+};
+
+export default VueClipboard;
diff --git a/site/src/directives/clipboard/is.js b/site/src/directives/clipboard/is.js
new file mode 100644
index 000000000..d1509a4ba
--- /dev/null
+++ b/site/src/directives/clipboard/is.js
@@ -0,0 +1,55 @@
+/**
+ * Check if argument is a HTML element.
+ *
+ * @param {Object} value
+ * @return {Boolean}
+ */
+export const node = function (value) {
+ return value !== undefined && value instanceof HTMLElement && value.nodeType === 1;
+};
+
+/**
+ * Check if argument is a list of HTML elements.
+ *
+ * @param {Object} value
+ * @return {Boolean}
+ */
+export const nodeList = function (value) {
+ var type = Object.prototype.toString.call(value);
+
+ return (
+ value !== undefined &&
+ (type === '[object NodeList]' || type === '[object HTMLCollection]') &&
+ 'length' in value &&
+ (value.length === 0 || node(value[0]))
+ );
+};
+
+/**
+ * Check if argument is a string.
+ *
+ * @param {Object} value
+ * @return {Boolean}
+ */
+export const string = function (value) {
+ return typeof value === 'string' || value instanceof String;
+};
+
+/**
+ * Check if argument is a function.
+ *
+ * @param {Object} value
+ * @return {Boolean}
+ */
+export const fn = function (value) {
+ var type = Object.prototype.toString.call(value);
+
+ return type === '[object Function]';
+};
+
+export default {
+ node,
+ nodeList,
+ string,
+ fn,
+};
diff --git a/site/src/directives/clipboard/listen.js b/site/src/directives/clipboard/listen.js
new file mode 100644
index 000000000..ac9376ab4
--- /dev/null
+++ b/site/src/directives/clipboard/listen.js
@@ -0,0 +1,94 @@
+import is from './is';
+import delegate from './delegate';
+
+/**
+ * Validates all params and calls the right
+ * listener function based on its target type.
+ *
+ * @param {String|HTMLElement|HTMLCollection|NodeList} target
+ * @param {String} type
+ * @param {Function} callback
+ * @return {Object}
+ */
+function listen(target, type, callback) {
+ if (!target && !type && !callback) {
+ throw new Error('Missing required arguments');
+ }
+
+ if (!is.string(type)) {
+ throw new TypeError('Second argument must be a String');
+ }
+
+ if (!is.fn(callback)) {
+ throw new TypeError('Third argument must be a Function');
+ }
+
+ if (is.node(target)) {
+ return listenNode(target, type, callback);
+ } else if (is.nodeList(target)) {
+ return listenNodeList(target, type, callback);
+ } else if (is.string(target)) {
+ return listenSelector(target, type, callback);
+ } else {
+ throw new TypeError(
+ 'First argument must be a String, HTMLElement, HTMLCollection, or NodeList',
+ );
+ }
+}
+
+/**
+ * Adds an event listener to a HTML element
+ * and returns a remove listener function.
+ *
+ * @param {HTMLElement} node
+ * @param {String} type
+ * @param {Function} callback
+ * @return {Object}
+ */
+function listenNode(node, type, callback) {
+ node.addEventListener(type, callback);
+
+ return {
+ destroy: function () {
+ node.removeEventListener(type, callback);
+ },
+ };
+}
+
+/**
+ * Add an event listener to a list of HTML elements
+ * and returns a remove listener function.
+ *
+ * @param {NodeList|HTMLCollection} nodeList
+ * @param {String} type
+ * @param {Function} callback
+ * @return {Object}
+ */
+function listenNodeList(nodeList, type, callback) {
+ Array.prototype.forEach.call(nodeList, function (node) {
+ node.addEventListener(type, callback);
+ });
+
+ return {
+ destroy: function () {
+ Array.prototype.forEach.call(nodeList, function (node) {
+ node.removeEventListener(type, callback);
+ });
+ },
+ };
+}
+
+/**
+ * Add an event listener to a selector
+ * and returns a remove listener function.
+ *
+ * @param {String} selector
+ * @param {String} type
+ * @param {Function} callback
+ * @return {Object}
+ */
+function listenSelector(selector, type, callback) {
+ return delegate(document.body, selector, type, callback);
+}
+
+export default listen;
diff --git a/site/src/directives/clipboard/select.js b/site/src/directives/clipboard/select.js
new file mode 100644
index 000000000..5eb335d7b
--- /dev/null
+++ b/site/src/directives/clipboard/select.js
@@ -0,0 +1,40 @@
+function select(element) {
+ var selectedText;
+
+ if (element.nodeName === 'SELECT') {
+ element.focus();
+
+ selectedText = element.value;
+ } else if (element.nodeName === 'INPUT' || element.nodeName === 'TEXTAREA') {
+ var isReadOnly = element.hasAttribute('readonly');
+
+ if (!isReadOnly) {
+ element.setAttribute('readonly', '');
+ }
+
+ element.select();
+ element.setSelectionRange(0, element.value.length);
+
+ if (!isReadOnly) {
+ element.removeAttribute('readonly');
+ }
+
+ selectedText = element.value;
+ } else {
+ if (element.hasAttribute('contenteditable')) {
+ element.focus();
+ }
+
+ var selection = window.getSelection();
+ var range = document.createRange();
+
+ range.selectNodeContents(element);
+ selection.removeAllRanges();
+ selection.addRange(range);
+
+ selectedText = selection.toString();
+ }
+
+ return selectedText;
+}
+export default select;
diff --git a/site/src/directives/clipboard/tiny-emitter.js b/site/src/directives/clipboard/tiny-emitter.js
new file mode 100644
index 000000000..2b54fca90
--- /dev/null
+++ b/site/src/directives/clipboard/tiny-emitter.js
@@ -0,0 +1,63 @@
+function E() {
+ // Keep this empty so it's easier to inherit from
+ // (via https://github.com/lipsmack from https://github.com/scottcorgan/tiny-emitter/issues/3)
+}
+
+E.prototype = {
+ on: function (name, callback, ctx) {
+ var e = this.e || (this.e = {});
+
+ (e[name] || (e[name] = [])).push({
+ fn: callback,
+ ctx: ctx,
+ });
+
+ return this;
+ },
+
+ once: function (name, callback, ctx) {
+ var self = this;
+ function listener() {
+ self.off(name, listener);
+ callback.apply(ctx, arguments);
+ }
+
+ listener._ = callback;
+ return this.on(name, listener, ctx);
+ },
+
+ emit: function (name) {
+ var data = [].slice.call(arguments, 1);
+ var evtArr = ((this.e || (this.e = {}))[name] || []).slice();
+ var i = 0;
+ var len = evtArr.length;
+
+ for (i; i < len; i++) {
+ evtArr[i].fn.apply(evtArr[i].ctx, data);
+ }
+
+ return this;
+ },
+
+ off: function (name, callback) {
+ var e = this.e || (this.e = {});
+ var evts = e[name];
+ var liveEvents = [];
+
+ if (evts && callback) {
+ for (var i = 0, len = evts.length; i < len; i++) {
+ if (evts[i].fn !== callback && evts[i].fn._ !== callback) liveEvents.push(evts[i]);
+ }
+ }
+
+ // Remove event from queue to prevent memory leak
+ // Suggested by https://github.com/lazd
+ // Ref: https://github.com/scottcorgan/tiny-emitter/commit/c6ebfaa9bc973b33d110a84a307742b7cf94c953#commitcomment-5024910
+
+ liveEvents.length ? (e[name] = liveEvents) : delete e[name];
+
+ return this;
+ },
+};
+
+export default E;
diff --git a/site/src/hooks/useMediaQuery.ts b/site/src/hooks/useMediaQuery.ts
new file mode 100644
index 000000000..3417f366d
--- /dev/null
+++ b/site/src/hooks/useMediaQuery.ts
@@ -0,0 +1,76 @@
+import { ref } from 'vue';
+
+export const MediaQueryEnum = {
+ xs: {
+ maxWidth: 575,
+ matchMedia: '(max-width: 575px)',
+ },
+ sm: {
+ minWidth: 576,
+ maxWidth: 767,
+ matchMedia: '(min-width: 576px) and (max-width: 767px)',
+ },
+ md: {
+ minWidth: 768,
+ maxWidth: 991,
+ matchMedia: '(min-width: 768px) and (max-width: 991px)',
+ },
+ lg: {
+ minWidth: 992,
+ maxWidth: 1199,
+ matchMedia: '(min-width: 992px) and (max-width: 1199px)',
+ },
+ xl: {
+ minWidth: 1200,
+ maxWidth: 1599,
+ matchMedia: '(min-width: 1200px) and (max-width: 1599px)',
+ },
+ xxl: {
+ minWidth: 1600,
+ matchMedia: '(min-width: 1600px)',
+ },
+};
+
+export type MediaQueryKey = keyof typeof MediaQueryEnum;
+
+/**
+ * loop query screen className
+ * Array.find will throw a error
+ * `Rendered more hooks than during the previous render.`
+ * So should use Array.forEach
+ */
+export const getScreenClassName = () => {
+ let className: MediaQueryKey = 'md';
+ // support ssr
+ if (typeof window === 'undefined') {
+ return className;
+ }
+ const mediaQueryKey = (Object.keys(MediaQueryEnum) as MediaQueryKey[]).find(key => {
+ const { matchMedia } = MediaQueryEnum[key];
+ if (window.matchMedia(matchMedia).matches) {
+ return true;
+ }
+ return false;
+ });
+ className = (mediaQueryKey as unknown) as MediaQueryKey;
+ return className;
+};
+
+const useMedia = () => {
+ const colSpan = ref(getScreenClassName());
+ (Object.keys(MediaQueryEnum) as MediaQueryKey[]).forEach(key => {
+ const { matchMedia } = MediaQueryEnum[key];
+ const mediaQuery = window.matchMedia(matchMedia);
+ if (mediaQuery.matches) {
+ colSpan.value = key;
+ }
+ mediaQuery.onchange = e => {
+ if (e.matches) {
+ colSpan.value = key;
+ }
+ };
+ });
+ return colSpan;
+};
+
+export default useMedia;
diff --git a/site/src/hooks/useMenus.ts b/site/src/hooks/useMenus.ts
new file mode 100644
index 000000000..cfe940257
--- /dev/null
+++ b/site/src/hooks/useMenus.ts
@@ -0,0 +1,86 @@
+import { groupBy, sortBy } from 'lodash-es';
+import { computed, ComputedRef, inject } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { GLOBAL_CONFIG } from '../SymbolKey';
+const typeOrder: any = {
+ 组件总览: { order: -1, en: 'Overview' },
+ 通用: { order: 0, en: 'General' },
+ 布局: { order: 1, en: 'Layout' },
+ 导航: { order: 2, en: 'Navigation' },
+ 数据录入: { order: 3, en: 'Data Entry' },
+ 数据展示: { order: 4, en: 'Data Display' },
+ 反馈: { order: 5, en: 'Feedback' },
+ 其他: { order: 6, en: 'Other' },
+ 废弃: { order: 7, en: 'Deprecated' },
+};
+const useMenus = (): {
+ menus: ComputedRef
+
+ {{ isCN ? '赞助商' : 'Sponsors' }}
+
+
+ -
+
+
-
+
+
+
+
+ -
+
+ {{ isCN ? '成为赞助商' : 'Become a Sponsor' }} + +
+
+ 您的广告将出现在 And Design Vue 文档所有子页面及 GitHub Readme 等页面。 +
+ 咨询邮箱： + antdv@foxmail.com +
+
+
+
+
+
diff --git a/site/src/layouts/Demo.vue b/site/src/layouts/Demo.vue
new file mode 100644
index 000000000..363813bd4
--- /dev/null
+++ b/site/src/layouts/Demo.vue
@@ -0,0 +1,49 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/site/src/layouts/header/Ecosystem.vue b/site/src/layouts/header/Ecosystem.vue
new file mode 100644
index 000000000..887111d2d
--- /dev/null
+++ b/site/src/layouts/header/Ecosystem.vue
@@ -0,0 +1,70 @@
+
+ 中文
+
+
+
+
+
+
+
+
+
+ ![logo]()
+ Ant Design Vue
+
+
+
+
+
+
+
diff --git a/site/src/layouts/header/Menu.vue b/site/src/layouts/header/Menu.vue
new file mode 100644
index 000000000..e490aced1
--- /dev/null
+++ b/site/src/layouts/header/Menu.vue
@@ -0,0 +1,80 @@
+
+
+
+
+
diff --git a/site/src/layouts/header/index.less b/site/src/layouts/header/index.less
new file mode 100644
index 000000000..84fd5d0fd
--- /dev/null
+++ b/site/src/layouts/header/index.less
@@ -0,0 +1,83 @@
+@import '../../theme/static/theme.less';
+@import './SearchBox.less';
+
+@header-height: 64px;
+@menu-item-border: 2px;
+@mobile-max-width: 767.99px;
+
+#header {
+ position: relative;
+ z-index: 10;
+ max-width: 100%;
+ background: @component-background;
+ box-shadow: 0 2px 8px rgba(240, 241, 242, 65);
+
+ .menu-row {
+ display: flex;
+ align-items: center;
+ margin: 0;
+
+ > * {
+ flex: none;
+ margin: 0 16px 0 0;
+
+ &:last-child {
+ margin-right: 40px;
+ }
+ }
+ }
+
+ // Adjust github button style
+
+ .ant-row-rtl {
+ .menu-row {
+ > * {
+ &:last-child {
+ margin-right: 16px;
+ margin-left: 40px;
+ }
+ }
+ }
+ }
+
+ // Buttons
+ .header-button {
+ color: @text-color;
+ border-color: @border-color-base;
+ }
+}
+
+@media only screen and (max-width: @mobile-max-width) {
+ #header {
+ text-align: center;
+ }
+}
+
+// Popover menu is only used for mobile
+.popover-menu {
+ width: 300px;
+
+ .ant-popover-inner-content {
+ padding: 0;
+
+ #nav {
+ .ant-menu-item,
+ .ant-menu-submenu {
+ text-align: left;
+ }
+
+ .ant-menu-item-group-title {
+ padding-left: 24px;
+ }
+
+ .ant-menu-item-group-list {
+ padding: 0 16px;
+ }
+
+ .ant-menu-item,
+ a {
+ color: #333;
+ }
+ }
+ }
+}
diff --git a/site/src/layouts/header/index.vue b/site/src/layouts/header/index.vue
new file mode 100644
index 000000000..38014acfc
--- /dev/null
+++ b/site/src/layouts/header/index.vue
@@ -0,0 +1,156 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/site/src/locale/en-US.js b/site/src/locale/en-US.js
new file mode 100644
index 000000000..3be3499c2
--- /dev/null
+++ b/site/src/locale/en-US.js
@@ -0,0 +1,29 @@
+import login from '../views/user/login/locales/en-US';
+import register from '../views/user/register/locales/en-US';
+import registerResult from '../views/user/register-result/locales/en-US';
+import theme from '../theme/en-US';
+export default {
+ ...theme,
+ 'navBar.lang': 'Languages',
+ 'layout.user.link.help': 'Help',
+ 'layout.user.link.privacy': 'Privacy',
+ 'layout.user.link.terms': 'Terms',
+ 'app.preview.down.block': 'Download this page to your local project',
+ 'app.welcome.link.fetch-blocks': 'Get all block',
+ 'app.welcome.link.block-list': 'Quickly build standard, pages based on `block` development',
+ 'app.docs.components.icon.search.placeholder': 'Search icon here, click icon to copy code',
+ 'app.docs.components.icon.pick-theme': 'Select the Icon Theme',
+ 'app.docs.components.icon.outlined': 'Outlined',
+ 'app.docs.components.icon.filled': 'Filled',
+ 'app.docs.components.icon.two-tone': 'Two Tone',
+ 'app.docs.components.icon.category.direction': 'Directional Icons',
+ 'app.docs.components.icon.category.suggestion': 'Suggested Icons',
+ 'app.docs.components.icon.category.editor': 'Editor Icons',
+ 'app.docs.components.icon.category.data': 'Data Icons',
+ 'app.docs.components.icon.category.other': 'Application Icons',
+ 'app.docs.components.icon.category.logo': 'Brand and Logos',
+ 'app.docs.components.icon.pic-searcher.intro': 'AI Search by image is online, welcome to use! 🎉',
+ ...login,
+ ...register,
+ ...registerResult,
+};
diff --git a/site/src/locale/zh-CN.js b/site/src/locale/zh-CN.js
new file mode 100644
index 000000000..6b06beccc
--- /dev/null
+++ b/site/src/locale/zh-CN.js
@@ -0,0 +1,34 @@
+import login from '../views/user/login/locales/zh-CN';
+import register from '../views/user/register/locales/zh-CN';
+import registerResult from '../views/user/register-result/locales/zh-CN';
+import theme from '../theme/zh-CN';
+
+export default {
+ ...theme,
+ 'navBar.lang': '语言',
+ 'layout.user.link.help': '帮助',
+ 'layout.user.link.privacy': '隐私',
+ 'layout.user.link.terms': '条款',
+ 'app.preview.down.block': '下载此页面到本地项目',
+ 'app.welcome.link.fetch-blocks': '获取全部区块',
+ 'app.welcome.link.block-list': '基于 block 开发，快速构建标准页面',
+ 'app.docs.components.icon.search.placeholder': '在此搜索图标，点击图标可复制代码',
+ 'app.docs.components.icon.pick-theme': '选择图标主题风格',
+ 'app.docs.components.icon.outlined': '线框风格',
+ 'app.docs.components.icon.filled': '实底风格',
+ 'app.docs.components.icon.two-tone': '双色风格',
+ 'app.docs.components.icon.category.direction': '方向性图标',
+ 'app.docs.components.icon.category.suggestion': '提示建议性图标',
+ 'app.docs.components.icon.category.editor': '编辑类图标',
+ 'app.docs.components.icon.category.data': '数据类图标',
+ 'app.docs.components.icon.category.other': '网站通用图标',
+ 'app.docs.components.icon.category.logo': '品牌和标识',
+ 'app.docs.components.icon.pic-searcher.intro': 'AI 截图搜索上线了，快来体验吧！🎉',
+ 'app.docs.components.icon.pic-searcher.title': '上传图片搜索图标',
+ 'app.docs.components.icon.pic-searcher.upload-text': '点击/拖拽/粘贴上传图片',
+ 'app.docs.components.icon.pic-searcher.upload-hint':
+ '我们会通过上传的图片进行匹配，得到最相似的图标',
+ ...login,
+ ...register,
+ ...registerResult,
+};
diff --git a/site/src/main.js b/site/src/main.js
new file mode 100644
index 000000000..823a020dc
--- /dev/null
+++ b/site/src/main.js
@@ -0,0 +1,57 @@
+import 'ant-design-vue/dist/antd.less';
+import 'docsearch.js/dist/cdn/docsearch.css';
+import './index.less';
+import 'nprogress/nprogress.css';
+import { createApp, Transition, TransitionGroup } from 'vue';
+import i18n from './i18n';
+import NProgress from 'nprogress';
+import router from './router';
+import Antd from 'ant-design-vue';
+import demoBox from './components/DemoBox.vue';
+import demoContainer from './components/demoContainer.vue';
+import demoSort from './components/demoSort.jsx';
+import store from './store/index.js';
+import clipboard from './directives/clipboard';
+import App from './App.vue';
+
+const app = createApp(App);
+
+app.use(Antd);
+app.use(clipboard);
+app.component('transition', Transition);
+app.component('transition-group', TransitionGroup);
+app.component('demo-box', demoBox);
+app.component('demo-container', demoContainer);
+app.component('demo-sort', demoSort);
+app.component('VNodes', function (_, { attrs: { value } }) {
+ return value;
+});
+
+// app.component('tempVar', {
+// functional: true,
+// render: (h, ctx) => {
+// return ctx.scopedSlots && ctx.scopedSlots.default && ctx.scopedSlots.default(ctx.props);
+// },
+// });
+
+router.beforeEach((to, from, next) => {
+ if (to.path !== from.path) {
+ NProgress.start();
+ }
+ next();
+});
+
+router.afterEach((to, from) => {
+ if (to.path !== from.path) {
+ NProgress.done();
+ document.documentElement.scrollTop = 0;
+ }
+});
+
+app.use(store);
+app.use(router);
+app.use(i18n);
+
+app.config.globalProperties.$i18n = i18n;
+
+app.mount('#app');
diff --git a/site/src/mock/user.js b/site/src/mock/user.js
new file mode 100644
index 000000000..345cf155d
--- /dev/null
+++ b/site/src/mock/user.js
@@ -0,0 +1,52 @@
+// 代码中会兼容本地 service mock 以及部署站点的静态数据
+module.exports = {
+ // 支持值为 Object 和 Array
+ 'GET /api/currentUser': {
+ name: 'Serati Ma',
+ avatar: 'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png',
+ userid: '00000001',
+ email: 'antdesign@alipay.com',
+ signature: '海纳百川，有容乃大',
+ title: '交互专家',
+ group: '蚂蚁金服－某某某事业群－某某平台部－某某技术部－UED',
+ },
+ // GET POST 可省略
+ 'GET /api/users': [
+ {
+ key: '1',
+ name: 'John Brown',
+ age: 32,
+ address: 'New York No. 1 Lake Park',
+ },
+ {
+ key: '2',
+ name: 'Jim Green',
+ age: 42,
+ address: 'London No. 1 Lake Park',
+ },
+ {
+ key: '3',
+ name: 'Joe Black',
+ age: 32,
+ address: 'Sidney No. 1 Lake Park',
+ },
+ ],
+ 'POST /api/login/account': (req, res) => {
+ const { password, userName, type } = req.body;
+ if (password === 'antdv' && userName === 'admin') {
+ res.send({ status: 'ok', type });
+ return;
+ }
+ if (password === 'antdv' && userName === 'user') {
+ res.send({ status: 'ok', type });
+ return;
+ }
+ res.send({ status: 'error', type });
+ },
+ 'GET /api/login/captcha': (req, res) => {
+ return res.json('captcha-xxx');
+ },
+ 'POST /api/register': (req, res) => {
+ res.send({ status: 'ok' });
+ },
+};
diff --git a/site/src/router/index.js b/site/src/router/index.js
new file mode 100644
index 000000000..b17bdb533
--- /dev/null
+++ b/site/src/router/index.js
@@ -0,0 +1,155 @@
+import Layout from '../layouts/index.vue';
+import Iframe from '../layouts/Iframe.vue';
+// import Iframe from '../components/iframe.jsx';
+import demoRoutes from './demoRoutes';
+// import otherRoutes from './otherRoutes';
+import { createRouter, createWebHistory } from 'vue-router';
+const routes = [
+ // ...otherRoutes,
+ {
+ path: '/components',
+ component: Layout,
+ children: [
+ {
+ path: 'overview:lang(.*)',
+ component: () => import('../views/ComponentOverview.vue'),
+ },
+ ...demoRoutes,
+ ],
+ },
+ {
+ path: '/iframe',
+ component: Iframe,
+ children: [
+ {
+ path: 'layout:lang(.*)',
+ meta: {
+ category: 'Components',
+ subtitle: '布局',
+ type: '布局',
+ cols: 1,
+ title: 'Layout',
+ cover: 'https://gw.alipayobjects.com/zos/alicdn/hzEndUVEx/Layout.svg',
+ },
+ props: route => {
+ const hash = route.hash.replace('#', '');
+ return { iframeName: hash };
+ },
+ component: () => import('../docs/layout/demo/index.vue'),
+ },
+ ],
+ },
+ {
+ path: '/docs',
+ component: Layout,
+ // props: route => {
+ // const name = route.path.split('/docs/vue/')[1].split('/')[0];
+ // return { name, showApi: true };
+ // },
+ children: [
+ {
+ path: 'vue/introduce-cn',
+ meta: { enTitle: 'Ant Design of Vue', title: 'Ant Design of Vue', category: 'docs' },
+ component: () => import('../vueDocs/introduce.zh-CN.md'),
+ },
+ {
+ path: 'vue/introduce',
+ meta: { enTitle: 'Ant Design of Vue', title: 'Ant Design of Vue', category: 'docs' },
+ component: () => import('../vueDocs/introduce.en-US.md'),
+ },
+ {
+ path: 'vue/getting-started-cn',
+ meta: { enTitle: 'Getting Started', title: '快速上手', category: 'docs' },
+ component: () => import('../vueDocs/getting-started.zh-CN.md'),
+ },
+ {
+ path: 'vue/getting-started',
+ meta: { enTitle: 'Getting Started', title: '快速上手', category: 'docs' },
+ component: () => import('../vueDocs/getting-started.en-US.md'),
+ },
+ {
+ path: 'vue/customize-theme-cn',
+ meta: { enTitle: 'Customize Theme', title: '定制主题', category: 'docs' },
+ component: () => import('../vueDocs/customize-theme.zh-CN.md'),
+ },
+ {
+ path: 'vue/customize-theme',
+ meta: { enTitle: 'Customize Theme', title: '定制主题', category: 'docs' },
+ component: () => import('../vueDocs/customize-theme.en-US.md'),
+ },
+ {
+ path: 'vue/migration-v2-cn',
+ meta: { enTitle: 'V1 to V2', title: '从 v1 到 v2', category: 'docs' },
+ component: () => import('../vueDocs/migration-v2.zh-CN.md'),
+ },
+ {
+ path: 'vue/migration-v2',
+ meta: { enTitle: 'V1 to V2', title: '从 v1 到 v2', category: 'docs' },
+ component: () => import('../vueDocs/migration-v2.en-US.md'),
+ },
+ {
+ path: 'vue/replace-date-cn',
+ meta: { enTitle: 'Custom Date Library', title: '自定义时间库', category: 'docs' },
+ component: () => import('../vueDocs/replace-date.zh-CN.md'),
+ },
+ {
+ path: 'vue/replace-date',
+ meta: { enTitle: 'Custom Date Library', title: '自定义时间库', category: 'docs' },
+ component: () => import('../vueDocs/replace-date.en-US.md'),
+ },
+ {
+ path: 'vue/i18n-cn',
+ meta: { enTitle: 'Internationalization', title: '国际化', category: 'docs' },
+ component: () => import('../vueDocs/i18n.zh-CN.md'),
+ },
+ {
+ path: 'vue/i18n',
+ meta: { enTitle: 'Internationalization', title: '国际化', category: 'docs' },
+ component: () => import('../vueDocs/i18n.en-US.md'),
+ },
+ {
+ path: 'vue/faq-cn',
+ meta: { enTitle: 'FAQ', title: '常见问题', category: 'docs' },
+ component: () => import('../vueDocs/faq.zh-CN.md'),
+ },
+ {
+ path: 'vue/faq',
+ meta: { enTitle: 'FAQ', title: '常见问题', category: 'docs' },
+ component: () => import('../vueDocs/faq.en-US.md'),
+ },
+ {
+ path: 'vue/download-cn',
+ meta: { enTitle: 'Download Design Resources', title: '下载设计资源', category: 'docs' },
+ component: () => import('../vueDocs/download.zh-CN.md'),
+ },
+ {
+ path: 'vue/download',
+ meta: { enTitle: 'Download Design Resources', title: '下载设计资源', category: 'docs' },
+ component: () => import('../vueDocs/download.en-US.md'),
+ },
+ {
+ path: 'vue/sponsor-cn',
+ meta: { enTitle: 'Sponsor', title: '支持我们', category: 'docs' },
+ component: () => import('../vueDocs/sponsor.zh-CN.md'),
+ },
+ {
+ path: 'vue/sponsor',
+ meta: { enTitle: 'Sponsor', title: '支持我们', category: 'docs' },
+ component: () => import('../vueDocs/sponsor.en-US.md'),
+ },
+ { path: '', redirect: '/docs/vue/introduce/' },
+ ],
+ },
+ { path: '/:lang(.*)', redirect: '/components/overview/' },
+];
+
+export default createRouter({
+ history: createWebHistory(),
+ fallback: false,
+ routes,
+ scrollBehavior: to => {
+ if (to.hash) {
+ return { el: to.hash, top: 80, behavior: 'auto' };
+ }
+ },
+});
diff --git a/site/src/router/otherRoutes.js b/site/src/router/otherRoutes.js
new file mode 100644
index 000000000..e1967a832
--- /dev/null
+++ b/site/src/router/otherRoutes.js
@@ -0,0 +1,56 @@
+import UserLayout from '../layouts/UserLayout';
+import BaseLayout from '../layouts/BaseLayout';
+export default [
+ {
+ path: '/vip',
+
+ component: () => import('../views/vip.vue'),
+ },
+ {
+ path: '/jobs',
+ component: BaseLayout,
+ props: () => {
+ return { name: 'list-cn' };
+ },
+ children: [
+ {
+ path: '/jobs',
+ redirect: '/jobs/list-cn',
+ },
+ {
+ path: '/jobs/list-cn',
+ name: 'list-cn',
+ component: () => import(/* webpackChunkName: "jobs" */ '../views/jobs.vue'),
+ },
+ ],
+ },
+ {
+ path: '/user',
+ component: UserLayout,
+ children: [
+ {
+ path: '/user',
+ redirect: '/user/login',
+ },
+ {
+ path: '/user/login',
+ name: 'login',
+ component: () =>
+ import(
+ /* webpackChunkName: "user" */
+ '../views/user/login'
+ ),
+ },
+ {
+ path: '/user/register',
+ name: 'register',
+ component: () => import(/* webpackChunkName: "user" */ '../views/user/register'),
+ },
+ {
+ path: '/user/register-result',
+ name: 'register.result',
+ component: () => import(/* webpackChunkName: "user" */ '../views/user/register-result'),
+ },
+ ],
+ },
+];
diff --git a/site/src/services/login.js b/site/src/services/login.js
new file mode 100644
index 000000000..306b2b47e
--- /dev/null
+++ b/site/src/services/login.js
@@ -0,0 +1,12 @@
+import request from '../utils/request';
+
+export async function fakeAccountLogin(params) {
+ return request('/api/login/account', {
+ method: 'POST',
+ data: params,
+ });
+}
+
+export async function getFakeCaptcha(mobile) {
+ return request(`/api/login/captcha?mobile=${mobile}`);
+}
diff --git a/site/src/services/user.js b/site/src/services/user.js
new file mode 100644
index 000000000..777b17795
--- /dev/null
+++ b/site/src/services/user.js
@@ -0,0 +1,13 @@
+import request from '../utils/request';
+
+export async function query() {
+ return request('/api/users');
+}
+
+export async function queryCurrent() {
+ return request('/api/currentUser');
+}
+
+export async function queryNotices() {
+ return request('/api/notices');
+}
diff --git a/site/src/store/index.js b/site/src/store/index.js
new file mode 100644
index 000000000..8c871e683
--- /dev/null
+++ b/site/src/store/index.js
@@ -0,0 +1,60 @@
+import { createStore } from 'vuex';
+import user from './user';
+import userAndLogin from '../views/user/login/model';
+import userAndregister from '../views/user/register/model';
+
+const createLoadingPlugin = ({ namespace: NAMESPACE = 'loading' } = {}) => {
+ const SHOW = '@@ANTDV_LOADING/SHOW';
+ const HIDE = '@@ANTDV_LOADING/HIDE';
+ return store => {
+ if (store.state[NAMESPACE]) {
+ throw new Error(`createLoadingPlugin: ${NAMESPACE} exited in current store`);
+ }
+ store.registerModule(NAMESPACE, {
+ namespaced: true,
+ state: {
+ global: false,
+ models: {},
+ effects: {},
+ },
+ mutations: {
+ [SHOW]: (state, { payload: { actionType } }) => {
+ state.global = true;
+ const _namespace = actionType.split('/')[0];
+ state.models = { ...state.models, [_namespace]: true };
+ state.effects = { ...state.effects, [actionType]: true };
+ },
+ [HIDE]: (state, { payload: { actionType } }) => {
+ state.global = false;
+ const _namespace = actionType.split('/')[0];
+ state.models = { ...state.models, [_namespace]: false };
+ state.effects = { ...state.effects, [actionType]: false };
+ },
+ },
+ });
+ store.subscribeAction({
+ before: action => {
+ store.commit(
+ { type: `${NAMESPACE}/${SHOW}`, payload: { actionType: action.type } },
+ { root: true },
+ );
+ },
+ after: action => {
+ store.commit(
+ { type: `${NAMESPACE}/${HIDE}`, payload: { actionType: action.type } },
+ { root: true },
+ );
+ },
+ });
+ };
+};
+
+export default createStore({
+ state: {},
+ plugins: [createLoadingPlugin()],
+ modules: {
+ userAndLogin,
+ userAndregister,
+ user,
+ },
+});
diff --git a/site/src/store/user.js b/site/src/store/user.js
new file mode 100644
index 000000000..4cc416dae
--- /dev/null
+++ b/site/src/store/user.js
@@ -0,0 +1,41 @@
+/* eslint-disable no-unused-vars */
+import { queryCurrent, query as queryUsers } from '../services/user';
+
+export default {
+ namespaced: true,
+ state: {
+ currentUser: {},
+ },
+ actions: {
+ async login({ commit }, payload) {
+ const response = await queryUsers(payload);
+ commit({
+ type: 'save',
+ payload: response,
+ });
+ },
+ async fetchCurrent({ commit }, payload) {
+ const response = await queryCurrent(payload);
+ commit({
+ type: 'saveCurrentUser',
+ payload: response,
+ });
+ },
+ },
+ mutations: {
+ saveCurrentUser(state, { payload }) {
+ Object.assign(state, {
+ currentUser: payload || {},
+ });
+ },
+ changeNotifyCount(state, { payload }) {
+ Object.assign(state, {
+ currentUser: {
+ ...state.currentUser,
+ notifyCount: payload.totalCount,
+ unreadCount: payload.unreadCount,
+ },
+ });
+ },
+ },
+};
diff --git a/site/src/theme/en-US.js b/site/src/theme/en-US.js
new file mode 100644
index 000000000..ae545cfb9
--- /dev/null
+++ b/site/src/theme/en-US.js
@@ -0,0 +1,149 @@
+export default {
+ 'app.theme.switch.default': 'Default theme',
+ 'app.theme.switch.dark': 'Dark theme',
+ 'app.theme.switch.compact': 'Compact theme',
+ 'app.header.search': 'Search...',
+ 'app.header.menu.documentation': 'Docs',
+ 'app.header.menu.components': 'Components',
+ 'app.header.menu.spec': 'Design',
+ 'app.header.menu.resource': 'Resources',
+ 'app.header.menu.more': 'More',
+ 'app.header.menu.mobile': 'Mobile',
+ 'app.header.menu.pro.v4': 'Ant Design Pro',
+ 'app.header.menu.charts': 'Ant Design Charts',
+ 'app.header.menu.ecosystem': 'Ecosystem',
+ 'app.header.menu.store': 'Store',
+ 'app.header.lang': '中文',
+ 'app.content.edit-page': 'Edit this page on GitHub!',
+ 'app.content.edit-demo': 'Edit this demo on GitHub!',
+ 'app.content.contributors': 'contributors',
+ 'app.component.examples': 'Examples',
+ 'app.component.examples.expand': 'Expand all code',
+ 'app.component.examples.collapse': 'Collapse all code',
+ 'app.component.examples.visible': 'Expand debug examples',
+ 'app.component.examples.hide': 'Collapse debug examples',
+ 'app.demo.debug': "Debug only, won't display at online",
+ 'app.demo.type.js': 'Switch to TypeScript',
+ 'app.demo.type.ts': 'Switch to JavaScript',
+ 'app.demo.copy': 'Copy code',
+ 'app.demo.copied': 'Copied!',
+ 'app.demo.code.show': 'Show code',
+ 'app.demo.code.hide': 'Hide code',
+ 'app.demo.codepen': 'Open in CodePen',
+ 'app.demo.codesandbox': 'Open in CodeSandbox',
+ 'app.demo.stackblitz': 'Open in Stackblitz',
+ 'app.demo.riddle': 'Open in Riddle',
+ 'app.home.introduce':
+ 'A design system for enterprise-level products. Create an efficient and enjoyable work experience.',
+ 'app.home.recommend': 'Recommended',
+ 'app.home.popularize': 'Popular',
+ 'app.home.design-and-framework': 'Design language and framework',
+ 'app.home.design-values': 'Design values',
+ 'app.home.design-values-description':
+ 'This is Ant Design\'s internal standard for evaluating design quality. Based on the assumption that "everyone is pursuing happiness at work", we have added the two values of "Meaningfulness" and "Growth" on the basis of "Certainty" and "Naturalness" to guide each designer towards better judgment and decision-making.',
+ 'app.home.certainty': 'Certainty',
+ 'app.home.meaningful': 'Meaningfulness',
+ 'app.home.growth': 'Growth',
+ 'app.home.natural': 'Naturalness',
+ 'app.home.design-guide': 'Guidelines',
+ 'app.home.components': 'Components',
+ 'app.home.detail': 'More details',
+ 'app.home.global-style': 'Global style',
+ 'app.home.design-patterns': 'Design patterns',
+ 'app.home.more': 'Learn More',
+ 'app.home.play-video': 'Play video',
+ 'app.home.qr': '4.0 is out',
+ 'app.home.qr.desc': '4.0 is out',
+ 'app.home.getting-started': 'Getting Started',
+ 'app.home.design-language': 'Design Language',
+ 'app.home.product-antv-slogan': 'A new way to do data visualization',
+ 'app.home.product-pro-slogan': 'Out-of-the-box UI solution for enterprise applications',
+ 'app.home.product-mobile-slogan': 'Mobile UI components with Ant Design',
+ 'app.home.product-hitu': 'HiTu',
+ 'app.home.product-hitu-slogan': 'A new generation of graphical solutions',
+ 'app.home.product-kitchen-slogan': 'A Sketch plugin to enhance designers',
+ 'app.home.product-icons-slogan': 'A set of premium icons',
+ 'app.home.view-more': 'More',
+ 'app.footer.repo': 'GitHub Repository',
+ 'app.footer.awesome': 'Awesome Ant Design',
+ 'app.footer.course': 'Ant Design Practical Tutorial',
+ 'app.footer.chinamirror': 'China Mirror 🇨🇳',
+ 'app.footer.primary-color-changing': 'Changing primary color...',
+ 'app.footer.primary-color-changed': 'Changed primary color successfully!',
+ 'app.footer.scaffold': 'Scaffold',
+ 'app.footer.kitchen': 'Sketch Toolkit',
+ 'app.footer.landing': 'Landing Templates',
+ 'app.footer.scaffolds': 'Scaffold Market',
+ 'app.footer.dev-tools': 'Developer Tools',
+ 'app.footer.umi': 'React Application Framework',
+ 'app.footer.dumi': 'Component doc generator',
+ 'app.footer.remax': 'Mini Program Framework',
+ 'app.footer.hooks': 'React Hooks Library',
+ 'app.footer.resources': 'Resources',
+ 'app.footer.data-vis': 'Data Visualization',
+ 'app.footer.eggjs': 'Enterprise Node Framework',
+ 'app.footer.motion': 'Motion Solution',
+ 'app.footer.design-resources': 'Design Resources',
+ 'app.footer.antd-library': 'Axure library',
+ 'app.footer.antux': 'Sitemap Template',
+ 'app.footer.community': 'Community',
+ 'app.footer.help': 'Help',
+ 'app.footer.change-log': 'Change Log',
+ 'app.footer.faq': 'FAQ',
+ 'app.footer.feedback': 'Feedback',
+ 'app.footer.stackoverflow': 'StackOverflow',
+ 'app.footer.segmentfault': 'SegmentFault',
+ 'app.footer.discussions': 'Discussions',
+ 'app.footer.bug-report': 'Bug Report',
+ 'app.footer.issues': 'Issues',
+ 'app.footer.version': 'Version: ',
+ 'app.footer.author': 'Created by XTech',
+ 'app.footer.work_with_us': 'Work with Us',
+ 'app.footer.more-product': 'More Products',
+ 'app.footer.company': 'XTech',
+ 'app.footer.ant-design': 'UI Design Language',
+ 'app.footer.yuque': 'YuQue',
+ 'app.footer.yuque.slogan': 'Write your document as a team',
+ 'app.footer.fengdie': 'FengDie',
+ 'app.footer.fengdie.slogan': 'Console Applications Builder',
+ 'app.footer.antv.slogan': 'Data Visualization',
+ 'app.footer.egg.slogan': 'Enterprise Node.js Framework',
+ 'app.footer.zhihu': 'Ant Design Blog',
+ 'app.footer.zhihu.xtech': 'Experience Cloud Blog',
+ 'app.footer.seeconf': 'Experience Tech Conference',
+ 'app.footer.xtech': 'Ant Financial Experience Tech',
+ 'app.footer.xtech.slogan': 'Experience The Beauty',
+ 'app.publish.title': 'antd@3.0.0 has been released! 🎉 🎉 🎉',
+ 'app.publish.greeting': 'Hello, ',
+ 'app.publish.intro': ' has been released, so please upgrade. ',
+ 'app.publish.old-version-guide': 'If you need documentation for an older version, please visit ',
+ 'app.publish.old-version-tips': ', or switch the version via the dropdown in the header nav bar.',
+ 'app.docs.color.pick-primary': 'Pick your primary color',
+ 'app.docs.color.pick-background': 'Pick your background color',
+ 'app.docs.components.icon.search.placeholder': 'Search icons here, click icon to copy code',
+ 'app.docs.components.icon.pick-theme': 'Select the Icon Theme',
+ 'app.docs.components.icon.outlined': 'Outlined',
+ 'app.docs.components.icon.filled': 'Filled',
+ 'app.docs.components.icon.two-tone': 'Two Tone',
+ 'app.docs.components.icon.category.direction': 'Directional Icons',
+ 'app.docs.components.icon.category.suggestion': 'Suggested Icons',
+ 'app.docs.components.icon.category.editor': 'Editor Icons',
+ 'app.docs.components.icon.category.data': 'Data Icons',
+ 'app.docs.components.icon.category.other': 'Application Icons',
+ 'app.docs.components.icon.category.logo': 'Brand and Logos',
+ 'app.docs.components.icon.pic-searcher.intro':
+ 'AI Search by image is online, you are welcome to use it! 🎉',
+ 'app.docs.components.icon.pic-searcher.title': 'Search by image',
+ 'app.docs.components.icon.pic-searcher.upload-text':
+ 'Click, drag, or paste file to this area to upload',
+ 'app.docs.components.icon.pic-searcher.upload-hint':
+ 'We will find the best matching icon based on the image provided',
+ 'app.docs.components.icon.pic-searcher.server-error':
+ 'Predict service is temporarily unavailable',
+ 'app.docs.components.icon.pic-searcher.matching': 'Matching...',
+ 'app.docs.components.icon.pic-searcher.modelloading': 'Model is loading...',
+ 'app.docs.components.icon.pic-searcher.result-tip': 'Matched the following icons for you:',
+ 'app.docs.components.icon.pic-searcher.th-icon': 'Icon',
+ 'app.docs.components.icon.pic-searcher.th-score': 'Probability',
+ 'app.components.overview.search': 'Search in components',
+};
diff --git a/site/src/theme/static/colors.less b/site/src/theme/static/colors.less
new file mode 100644
index 000000000..76960e704
--- /dev/null
+++ b/site/src/theme/static/colors.less
@@ -0,0 +1,242 @@
+.make-palette(@color, @index: 1) when (@index <= 10) {
+ .palette-@{color}-@{index} {
+ @background: '@{color}-@{index}';
+
+ background: @@background;
+ }
+ .make-palette(@color, (@index + 1)); // next iteration
+}
+
+@gray-1: #fff;
+@gray-2: #fafafa;
+@gray-3: #f5f5f5;
+@gray-4: #f0f0f0;
+@gray-5: #d9d9d9;
+@gray-6: #bfbfbf;
+@gray-7: #8c8c8c;
+@gray-8: #595959;
+@gray-9: #434343;
+@gray-10: #262626;
+@gray-11: #1f1f1f;
+@gray-12: #141414;
+@gray-13: #000;
+@border-color: rgba(229, 231, 235, 100);
+
+.color-palettes {
+ margin: 0 1%;
+ &-dark {
+ margin: 0;
+ padding: 0 28px;
+ background-color: #141414;
+ .color-title {
+ color: fade(@white, 85);
+ }
+ .color-description {
+ color: fade(@white, 45);
+ }
+ .color-palette {
+ margin: 45px 3.5% 45px 0;
+ &:nth-of-type(3n) {
+ margin-right: 0;
+ }
+ .main-color-item {
+ margin-right: 0;
+ &:hover {
+ margin-right: -8px;
+ }
+ }
+ }
+ }
+}
+.color-palette {
+ display: inline-block;
+ width: 31%;
+ margin: 45px 1%;
+ &-pick {
+ margin: 0 0 20px;
+ font-size: 20px;
+ text-align: center;
+ }
+ &-picker {
+ margin: 24px 0;
+ &-value {
+ position: relative;
+ top: -3px;
+ margin-left: 16px;
+ font-size: 14px;
+ font-family: Consolas, sans-serif;
+ .ant-row-rtl & {
+ margin-right: 16px;
+ margin-left: 0;
+ }
+ }
+ &-validation {
+ position: relative;
+ top: -3px;
+ margin-left: 16px;
+ color: @error-color;
+ font-size: 13px;
+ .ant-row-rtl & {
+ margin-right: 16px;
+ margin-left: 0;
+ }
+ &-dark {
+ margin-left: 0;
+ }
+ }
+ }
+}
+
+.main-color {
+ .make-palette(blue);
+ .make-palette(purple);
+ .make-palette(cyan);
+ .make-palette(green);
+ .make-palette(magenta);
+ .make-palette(red);
+ .make-palette(volcano);
+ .make-palette(orange);
+ .make-palette(gold);
+ .make-palette(yellow);
+ .make-palette(lime);
+ .make-palette(geekblue);
+ .make-palette(gray);
+
+ .palette-gray-11 {
+ background: @gray-11;
+ }
+ .palette-gray-12 {
+ background: @gray-12;
+ }
+ .palette-gray-13 {
+ background: @gray-13;
+ }
+
+ text-align: left;
+
+ &-item {
+ position: relative;
+ height: 44px;
+ margin-right: 4px;
+ padding: 0 12px;
+ font-size: 14px;
+ font-family: Consolas, sans-serif;
+ line-height: 44px;
+ cursor: pointer;
+ transition: all 0.2s;
+ &:first-child {
+ border-radius: 4px 4px 0 0;
+ }
+ &:last-child {
+ border-radius: 0 0 4px 4px;
+ }
+ &:hover {
+ margin-right: -8px;
+ border-radius: 0 4px 4px 0;
+ }
+ }
+ &-item &-text {
+ float: left;
+ transition: all 0.3s;
+ }
+ &-item &-value {
+ position: relative;
+ left: 3px;
+ float: right;
+ transform: scale(0.85);
+ transform-origin: 100% 50%;
+ opacity: 0;
+ transition: all 0.3s;
+ }
+}
+
+.color-title {
+ margin: 0 0 24px;
+ color: #5c6b77;
+ font-weight: 500;
+ font-size: 22px;
+ text-align: center;
+ text-transform: capitalize;
+}
+
+.color-description {
+ display: block;
+ color: #777;
+ font-weight: lighter;
+ font-size: 14px;
+}
+
+.main-color:hover {
+ .main-color-value {
+ left: 0;
+ opacity: 0.7;
+ }
+}
+
+.color-palette-horizontal {
+ width: 100%;
+ &-dark {
+ height: 303px;
+ padding: 32px 28px;
+ background-color: #141414;
+ .color-palette-picker {
+ margin-bottom: 0;
+ }
+ .color-palette-pick {
+ color: fade(@white, 65);
+ text-align: left;
+ &-hex {
+ color: fade(@white, 65);
+ }
+ .ant-row-rtl & {
+ direction: rtl;
+ text-align: right;
+ }
+ }
+ }
+
+ .main-color {
+ display: flex;
+
+ &-item {
+ position: relative;
+ flex: 1;
+ height: 86px;
+ margin-right: 0;
+ padding: 37px 0 0;
+ line-height: normal;
+ text-align: center;
+ border-radius: 0;
+
+ .main-color-text {
+ float: none;
+ }
+
+ &:hover {
+ height: 96px;
+ margin-top: -10px;
+ border-radius: 4px 4px 0 0;
+ }
+ }
+
+ &-value {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ text-align: center;
+ transform-origin: unset;
+ }
+
+ &:hover {
+ .main-color-item {
+ padding-top: 8px;
+ }
+
+ .main-color-value {
+ bottom: 8px;
+ opacity: 0.7;
+ }
+ }
+ }
+}
diff --git a/site/src/theme/static/common.less b/site/src/theme/static/common.less
new file mode 100644
index 000000000..0265e2d04
--- /dev/null
+++ b/site/src/theme/static/common.less
@@ -0,0 +1,263 @@
+html {
+ &.rtl {
+ direction: rtl;
+ }
+}
+
+body {
+ overflow-x: hidden;
+ color: @site-text-color;
+ font-size: @font-size-base;
+ font-family: @font-family;
+ background: @body-background;
+ transition: background 1s cubic-bezier(0.075, 0.82, 0.165, 1);
+}
+
+a {
+ transition: color 0.3s ease;
+}
+
+.main-wrapper {
+ position: relative;
+ padding: 40px 0 0;
+ background: @component-background;
+}
+
+.main-container {
+ position: relative;
+ min-height: 500px;
+ padding: 0 170px 32px 64px;
+ background: @component-background;
+
+ .ant-row-rtl & {
+ padding: 0 64px 144px 170px;
+ }
+}
+
+.main-menu {
+ z-index: 1;
+
+ &-inner {
+ height: 100%;
+ max-height: 100vh;
+ overflow: hidden;
+ }
+
+ &:hover &-inner {
+ overflow-y: auto;
+ }
+
+ > div,
+ > div > div {
+ height: 100%;
+ }
+}
+
+.aside-container {
+ min-height: 100%;
+ padding-bottom: 48px;
+ font-family: Avenir, @font-family, sans-serif;
+
+ &.ant-menu-inline {
+ .ant-menu-submenu-title h4,
+ > .ant-menu-item,
+ .ant-menu-item a {
+ overflow: hidden;
+ font-size: 14px;
+ text-overflow: ellipsis;
+ }
+
+ > .ant-menu-item-group > .ant-menu-item-group-title {
+ margin-top: 16px;
+ margin-bottom: 16px;
+ font-size: 13px;
+
+ &::after {
+ position: relative;
+ top: 12px;
+ display: block;
+ width: calc(100% - 20px);
+ height: 1px;
+ background: @border-color-split;
+ content: '';
+ }
+ }
+
+ > .ant-menu-item,
+ > .ant-menu-submenu > .ant-menu-submenu-title,
+ > .ant-menu-item-group > .ant-menu-item-group-title,
+ > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-item,
+ &.ant-menu-inline > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-item {
+ padding-left: 40px !important;
+
+ .ant-row-rtl & {
+ padding-right: 40px !important;
+ padding-left: 16px !important;
+ }
+ }
+
+ // Nest Category > Type > Article
+ &.ant-menu-inline {
+ .ant-menu-item-group-title {
+ padding-left: 60px;
+
+ .ant-row-rtl & {
+ padding-right: 60px;
+ padding-left: 16px;
+ }
+ }
+
+ .ant-menu-item-group-list > .ant-menu-item {
+ padding-left: 80px !important;
+
+ .ant-row-rtl & {
+ padding-right: 80px !important;
+ padding-left: 16px !important;
+ }
+ }
+ }
+
+ .ant-menu-item-group:first-child {
+ .ant-menu-item-group-title {
+ margin-top: 0;
+ }
+ }
+ }
+
+ a[disabled] {
+ color: #ccc;
+ }
+
+ .menu-item-link-outside {
+ position: relative;
+ .anticon {
+ position: absolute;
+ top: 16px;
+ right: -10px;
+ color: @primary-color;
+ font-size: 12px;
+ opacity: 0;
+ transition: all 0.3s;
+ }
+ &:hover .anticon {
+ opacity: 1;
+ }
+ }
+}
+
+.aside-container .chinese {
+ margin-left: 6px;
+ font-weight: normal;
+ font-size: 12px;
+ opacity: 0.67;
+}
+
+.outside-link {
+ display: inline-block;
+}
+
+.outside-link-icon {
+ margin-left: 5px;
+ color: #aaa;
+ font-size: 12px;
+ .ant-row-rtl & {
+ margin-right: 5px;
+ margin-left: 0;
+ transform: rotate(180deg);
+ }
+}
+
+// reset menu text color
+.menu-site {
+ .ant-menu-item > a {
+ color: @site-text-color;
+ }
+
+ .ant-menu-item-selected > a,
+ .ant-menu-item > a:hover {
+ color: @primary-color;
+ }
+}
+
+#app {
+ height: 100%;
+ transition: transform 0.3s @ease-in-out-circ;
+}
+
+.drawer-content {
+ padding: 40px 0;
+ &-wrapper {
+ background-color: @component-background;
+ }
+}
+
+.drawer {
+ z-index: 1029;
+}
+
+#_hj_feedback_container {
+ [class$='icon_emotion_path1']::before {
+ color: @primary-color !important;
+ }
+}
+
+.fixed-widgets {
+ position: fixed;
+ right: 32px;
+ bottom: 102px;
+ z-index: 2147483640;
+ display: flex;
+ flex-direction: column;
+ cursor: pointer;
+ &-tooltip {
+ .ant-tooltip-inner {
+ min-width: 100px;
+ }
+ }
+ & > div {
+ display: block;
+ }
+ &-active {
+ color: @primary-color;
+ }
+ & &-avatar {
+ color: #000;
+ background-color: #fff;
+ box-shadow: @shadow-2;
+ transition: color 0.3s;
+ &:hover {
+ color: @primary-color;
+ }
+ }
+}
+
+// keep transition consistent to make mode toggle animation be more smooth, include:
+// nav bar background
+// nav search border
+// nav menu background
+// wrapper content
+// sidemenu background
+// sidemenu active background
+// content background
+// affix toc
+#header,
+#header #search-box,
+#header #nav.ant-menu,
+.main-wrapper,
+.main-wrapper > .ant-row > .main-menu .main-menu-inner > .ant-menu,
+.main-wrapper
+ > .ant-row
+ > .main-menu
+ .main-menu-inner
+ > .ant-menu.aside-container.ant-menu-inline
+ > .ant-menu-item-group
+ > .ant-menu-item-group-title::after,
+.main-wrapper .main-container,
+#demo-toc.toc {
+ transition: all 0.3s @ease-in-out-circ;
+}
+
+// remove margin-bottom from dark theme (why need margin-bottom in dark theme?)
+#header > .ant-row > .ant-col h1 {
+ margin-bottom: 0;
+}
diff --git a/site/src/theme/static/contributors.less b/site/src/theme/static/contributors.less
new file mode 100644
index 000000000..004199b56
--- /dev/null
+++ b/site/src/theme/static/contributors.less
@@ -0,0 +1,11 @@
+.contributors-list {
+ display: flex;
+ flex-wrap: wrap;
+ margin-top: 120px !important;
+
+ a,
+ .ant-avatar + .ant-avatar {
+ margin-right: 8px;
+ margin-bottom: 8px;
+ }
+}
diff --git a/site/src/theme/static/dark.less b/site/src/theme/static/dark.less
new file mode 100644
index 000000000..3b560c695
--- /dev/null
+++ b/site/src/theme/static/dark.less
@@ -0,0 +1,369 @@
+[data-theme='dark'] {
+ /* Change autocomplete styles in WebKit */
+ input:-webkit-autofill,
+ input:-webkit-autofill:hover,
+ input:-webkit-autofill:focus,
+ textarea:-webkit-autofill,
+ textarea:-webkit-autofill:hover,
+ textarea:-webkit-autofill:focus,
+ select:-webkit-autofill,
+ select:-webkit-autofill:hover,
+ select:-webkit-autofill:focus {
+ border: 1px solid @border-color-base;
+ -webkit-text-fill-color: @text-color;
+ box-shadow: none;
+ transition: background-color 5000s ease-in-out 0s;
+ }
+
+ #header {
+ box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.65);
+ }
+
+ #search-box input {
+ &::placeholder {
+ color: fade(@white, 30%);
+ }
+ }
+
+ .toc-affix {
+ .ant-affix {
+ background: @component-background;
+ }
+ }
+
+ :not(pre) > code[class*='language-'],
+ pre[class*='language-'] {
+ color: rgba(255, 255, 255, 0.65);
+ background: #262626;
+ }
+
+ .code-box {
+ border: 1px solid @border-color-split;
+ .markdown {
+ pre {
+ margin: 0.5em 0;
+ padding: 6px 12px;
+ }
+ pre code {
+ margin: 0;
+ background: #262626;
+ }
+ }
+ &-debug {
+ border-color: @purple-3;
+ }
+
+ &-expand-trigger {
+ position: relative;
+ margin-left: 12px;
+ color: #fff;
+ font-size: 20px;
+ cursor: pointer;
+ opacity: 0.45;
+ transition: all 0.3s;
+ &:hover {
+ opacity: 0.65;
+ }
+ }
+
+ &-demo {
+ border-bottom: 1px solid @border-color-split;
+ }
+
+ &-actions > &-code-action {
+ color: @site-text-color-secondary;
+
+ &:hover {
+ color: @site-text-color;
+ }
+ }
+ }
+
+ ul.anticons-list {
+ li {
+ color: #acacac;
+ &.TwoTone:hover {
+ background-color: #15395b;
+ }
+ &:hover {
+ .anticon {
+ color: #fff;
+ }
+ }
+ }
+ }
+
+ a[disabled] {
+ color: rgba(255, 255, 255, 0.25);
+ }
+
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6 {
+ color: @heading-color;
+ }
+
+ .markdown {
+ code,
+ pre,
+ pre code {
+ background: #262626;
+ }
+ }
+
+ .markdown.api-container {
+ table {
+ tbody tr {
+ &:hover {
+ background: #262626;
+ }
+ }
+ }
+ }
+
+ .markdown code {
+ background: fade(@white, 8%);
+ }
+
+ .prev-next-nav {
+ > a.prev-page {
+ .footer-nav-icon-before {
+ color: fade(@white, 45%);
+ }
+
+ &:hover .footer-nav-icon-before {
+ color: @primary-color;
+ }
+ }
+
+ > .next-page {
+ .footer-nav-icon-after {
+ color: fade(@white, 45%);
+ }
+
+ &:hover .footer-nav-icon-after {
+ color: @primary-color;
+ }
+ }
+ }
+
+ .grid-demo,
+ [id^='components-grid-demo-'] {
+ .demo-row,
+ .code-box-demo .demo-row {
+ background-image: linear-gradient(
+ 90deg,
+ #1d1d1d 4.16666667%,
+ transparent 4.16666667%,
+ transparent 8.33333333%,
+ #1d1d1d 8.33333333%,
+ #1d1d1d 12.5%,
+ transparent 12.5%,
+ transparent 16.66666667%,
+ #1d1d1d 16.66666667%,
+ #1d1d1d 20.83333333%,
+ transparent 20.83333333%,
+ transparent 25%,
+ #1d1d1d 25%,
+ #1d1d1d 29.16666667%,
+ transparent 29.16666667%,
+ transparent 33.33333333%,
+ #1d1d1d 33.33333333%,
+ #1d1d1d 37.5%,
+ transparent 37.5%,
+ transparent 41.66666667%,
+ #1d1d1d 41.66666667%,
+ #1d1d1d 45.83333333%,
+ transparent 45.83333333%,
+ transparent 50%,
+ #1d1d1d 50%,
+ #1d1d1d 54.16666667%,
+ transparent 54.16666667%,
+ transparent 58.33333333%,
+ #1d1d1d 58.33333333%,
+ #1d1d1d 62.5%,
+ transparent 62.5%,
+ transparent 66.66666667%,
+ #1d1d1d 66.66666667%,
+ #1d1d1d 70.83333333%,
+ transparent 70.83333333%,
+ transparent 75%,
+ #1d1d1d 75%,
+ #1d1d1d 79.16666667%,
+ transparent 79.16666667%,
+ transparent 83.33333333%,
+ #1d1d1d 83.33333333%,
+ #1d1d1d 87.5%,
+ transparent 87.5%,
+ transparent 91.66666667%,
+ #1d1d1d 91.66666667%,
+ #1d1d1d 95.83333333%,
+ transparent 95.83333333%
+ );
+ }
+ .code-box-demo .ant-row > div:not(.gutter-row) {
+ padding: 16px 0;
+ background: #028ac8;
+ &:nth-child(2n + 1) {
+ background: fade(#0088c6, 70%);
+ }
+ }
+ .ant-row .demo-col,
+ .code-box-demo .ant-row .demo-col {
+ margin-top: 0;
+ margin-bottom: 0;
+ padding: 30px 0;
+ color: @black;
+ font-size: 18px;
+ text-align: center;
+ border: none;
+ }
+ .ant-row .demo-col-1 {
+ background: fade(#0088c6, 70%);
+ }
+ .ant-row .demo-col-3,
+ .code-box-demo .ant-row .demo-col-3 {
+ color: @site-text-color-secondary;
+ background: unset;
+ }
+ .ant-row .demo-col-5,
+ .code-box-demo .ant-row .demo-col-5 {
+ color: @site-text-color-secondary;
+ background: unset;
+ }
+ }
+
+ .markdown > table th {
+ color: fade(@white, 65%);
+ background: #1d1d1d;
+ }
+
+ .copied-code {
+ background: fade(@white, 8%);
+ }
+
+ .browser-mockup.with-url::after {
+ background-color: @component-background;
+ }
+
+ .browser-mockup {
+ border-top: 2em solid #262626;
+ }
+
+ .browser-mockup::before {
+ background-color: #fb4742;
+ box-shadow: 0 0 0 2px #fb4742, 1.5em 0 0 2px #99bc2e, 3em 0 0 2px #ffba5a;
+ }
+
+ .browser-mockup.with-tab::after {
+ border-bottom: 2em solid @component-background;
+ }
+
+ .algolia-autocomplete {
+ .ds-dropdown-menu {
+ [class^='ds-dataset-'] {
+ background: @popover-background;
+ .algolia-docsearch-suggestion {
+ background: @popover-background;
+ }
+ }
+ .ds-suggestion.ds-cursor {
+ .algolia-docsearch-suggestion:not(.suggestion-layout-simple) {
+ .algolia-docsearch-suggestion--content {
+ background-color: fade(@white, 8%);
+ }
+ }
+ }
+ }
+ .algolia-docsearch-suggestion--category-header {
+ color: rgba(255, 255, 255, 0.65);
+ border-bottom: 1px solid @border-color-split;
+ }
+ .algolia-docsearch-suggestion--subcategory-column::before {
+ background: @border-color-split;
+ }
+ .algolia-docsearch-suggestion--content {
+ &::before {
+ background: @border-color-split;
+ }
+ }
+ }
+
+ .token.comment,
+ .token.quote {
+ color: #b6b18b;
+ }
+
+ .token.property,
+ .token.variable,
+ .token.template-variable,
+ .token.tag,
+ .token.number,
+ .token.name,
+ .token.selector-id,
+ .token.selector-class,
+ .token.regexp,
+ .token.deletion {
+ color: #eb3c54;
+ }
+
+ .token.built_in,
+ .token.builtin-name,
+ .token.literal,
+ .token.type,
+ .token.params,
+ .token.meta,
+ .token.link {
+ color: #e7ce56;
+ }
+
+ .token.attribute {
+ color: #ee7c2b;
+ }
+
+ .token.string,
+ .token.symbol,
+ .token.bullet,
+ .token.addition {
+ color: @primary-color;
+ }
+
+ .token.title,
+ .token.section {
+ color: #78bb65;
+ }
+
+ .token.function,
+ .token.keyword,
+ .token.selector-tag {
+ color: #b45ea4;
+ }
+
+ .hljs {
+ display: block;
+ padding: 0.5em;
+ overflow-x: auto;
+ color: #c0c5ce;
+ background: #1c1d21;
+ }
+
+ .token.emphasis {
+ font-style: italic;
+ }
+
+ .token.strong {
+ font-weight: bold;
+ }
+
+ .components-overview {
+ &-img {
+ background-color: rgba(255, 255, 255, 0.1);
+ }
+ &-search input {
+ color: rgba(255, 255, 255, 0.65);
+ }
+ }
+}
diff --git a/site/src/theme/static/demo.less b/site/src/theme/static/demo.less
new file mode 100644
index 000000000..2e5256f70
--- /dev/null
+++ b/site/src/theme/static/demo.less
@@ -0,0 +1,359 @@
+.code-boxes-col-1-1 {
+ width: 100%;
+}
+
+.code-boxes-col-2-1 {
+ display: inline-block;
+ vertical-align: top;
+}
+
+.code-box {
+ position: relative;
+ display: inline-block;
+ width: 100%;
+ margin: 0 0 16px;
+ border: 1px solid @site-border-color-split;
+ border-radius: @border-radius-base;
+ transition: all 0.2s;
+ .code-box-title {
+ &,
+ a {
+ color: @site-text-color;
+ background: @component-background;
+ }
+ }
+ &,
+ .code-box-demo {
+ background-color: @component-background;
+ }
+ .markdown {
+ pre {
+ margin: 0.5em 0;
+ padding: 6px 12px;
+ }
+ pre code {
+ margin: 0;
+ background: #f5f5f5;
+ }
+ }
+ &:target {
+ border: 1px solid @primary-color;
+ }
+
+ &-expand-trigger {
+ position: relative;
+ margin-left: 12px;
+ color: #3b4357;
+ font-size: 20px;
+ cursor: pointer;
+ opacity: 0.75;
+ transition: all 0.3s;
+
+ &:hover {
+ opacity: 1;
+ }
+
+ .ant-row-rtl & {
+ margin-right: 8px;
+ margin-left: 0;
+ }
+ }
+
+ &-title {
+ position: absolute;
+ top: -14px;
+ margin-left: 16px;
+ padding: 1px 8px;
+ color: #777;
+ background: @body-background;
+ border-radius: @border-radius-base @border-radius-base 0 0;
+ transition: background-color 0.4s;
+
+ .ant-row-rtl & {
+ margin-right: 16px;
+ margin-left: 0;
+ border-radius: @border-radius-base 0 0 @border-radius-base;
+ }
+
+ a,
+ a:hover {
+ color: @site-text-color;
+ font-weight: 500;
+ font-size: @font-size-base;
+ }
+ }
+
+ &-description {
+ padding: 18px 24px 12px;
+ }
+
+ a.edit-button {
+ position: absolute;
+ top: 7px;
+ right: -16px;
+ padding-right: 6px;
+ font-size: 12px;
+ text-decoration: none;
+ background: inherit;
+ transform: scale(0.9);
+
+ .anticon {
+ color: @site-text-color-secondary;
+ transition: all 0.3s;
+ &:hover {
+ color: @site-text-color;
+ }
+ }
+
+ .ant-row.ant-row-rtl & {
+ right: auto;
+ left: -22px;
+ margin-right: 0;
+ padding-right: 8px;
+ padding-left: 6px;
+ }
+ }
+
+ &-demo {
+ padding: 42px 24px 50px;
+ color: @site-text-color;
+ border-bottom: 1px solid @site-border-color-split;
+ }
+
+ iframe {
+ width: 100%;
+ border: 0;
+ }
+
+ &-meta {
+ &.markdown {
+ position: relative;
+ width: 100%;
+ font-size: @font-size-base;
+ border-radius: 0 0 @border-radius-base @border-radius-base;
+ transition: background-color 0.4s;
+ }
+
+ blockquote {
+ line-height: 1.5;
+ }
+
+ h4,
+ section& p {
+ margin: 0;
+ }
+
+ > p {
+ width: 100%;
+ margin: 0.5em 0;
+ padding-right: 25px;
+ font-size: 12px;
+ word-break: break-word;
+
+ .ant-row-rtl & {
+ padding-right: 0;
+ padding-left: 25px;
+ }
+ }
+ }
+
+ &.expand &-meta {
+ border-bottom: 1px dashed @site-border-color-split;
+ border-radius: 0;
+ }
+
+ .code-expand-icon {
+ cursor: pointer;
+ }
+
+ .code-expand-icon-show,
+ .code-expand-icon-hide {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ max-width: 100%;
+ margin: 0;
+ box-shadow: none;
+ transition: all 0.4s;
+ user-select: none;
+
+ .ant-row-rtl & {
+ right: 0;
+ left: auto;
+ }
+ }
+
+ .code-expand-icon-show {
+ opacity: 0.55;
+ pointer-events: auto;
+ &:hover {
+ opacity: 1;
+ }
+ }
+
+ .code-expand-icon.ant-tooltip-open .code-expand-icon-show {
+ opacity: 1;
+ }
+
+ .code-expand-icon-hide {
+ opacity: 0;
+ pointer-events: none;
+ }
+
+ .highlight-wrapper {
+ display: none;
+ overflow: auto;
+ border-radius: 0 0 @border-radius-base @border-radius-base;
+
+ &-expand {
+ display: block;
+ }
+ }
+
+ .highlight {
+ position: relative;
+
+ .ant-tabs-nav-list {
+ margin: 0 auto;
+ }
+
+ pre {
+ margin: 0;
+ padding: 0;
+ background: @component-background;
+ }
+ &:not(:first-child) {
+ border-top: 1px dashed @site-border-color-split;
+ }
+ }
+
+ &-actions {
+ display: flex;
+ justify-content: center;
+ padding: 12px 0;
+ border-top: 1px dashed @site-border-color-split;
+ opacity: 0.7;
+ transition: opacity 0.3s;
+
+ &:hover {
+ opacity: 1;
+ }
+ }
+
+ &-actions > &-code-action {
+ position: relative;
+ display: flex;
+ align-items: center;
+ width: 16px;
+ height: 16px;
+ margin-left: 16px;
+ color: @site-text-color-secondary;
+ cursor: pointer;
+ transition: all 0.24s;
+
+ .ant-row-rtl & {
+ margin-right: 16px;
+ margin-left: 0;
+ }
+
+ &:first-child {
+ margin-left: 0;
+
+ .ant-row-rtl & {
+ margin-right: 0;
+ }
+ }
+
+ &:hover {
+ color: @site-text-color;
+ }
+ }
+
+ &-code-copy {
+ width: 14px;
+ height: 14px;
+ font-size: 14px;
+ text-align: center;
+ background: @component-background;
+ cursor: pointer;
+ transition: transform 0.24s;
+
+ &:hover {
+ transform: scale(1.2);
+ }
+ &.anticon-check {
+ color: @green-6 !important;
+ font-weight: bold;
+ }
+ }
+
+ &-codepen {
+ width: 14px;
+ height: 14px;
+ overflow: hidden;
+ border: 0;
+ cursor: pointer;
+ }
+
+ &-riddle {
+ width: 14px;
+ height: 14px;
+ overflow: hidden;
+ border: 0;
+ cursor: pointer;
+ }
+
+ &-codesandbox {
+ width: 16px;
+ height: 16px;
+ overflow: hidden;
+ border: 0;
+ cursor: pointer;
+ &:hover {
+ opacity: 1;
+ }
+ }
+
+ .highlight-wrapper:hover &-code-copy,
+ .highlight-wrapper:hover &-codepen,
+ .highlight-wrapper:hover &-codesandbox,
+ .highlight-wrapper:hover &-riddle {
+ opacity: 1;
+ }
+
+ pre {
+ width: auto;
+ margin: 0;
+ code {
+ background: @component-background;
+ border: none;
+ }
+ }
+
+ &-debug {
+ border-color: @purple-3;
+ }
+
+ &-debug &-title a {
+ color: @purple-6;
+ }
+}
+
+.all-code-box-controls {
+ float: right;
+
+ .ant-row-rtl & {
+ float: left;
+ }
+}
+
+.ant-row-rtl {
+ #components-tooltip-demo-placement,
+ #components-popover-demo-placement,
+ #components-popconfirm-demo-placement {
+ .code-box-demo {
+ direction: ltr;
+ }
+ }
+}
diff --git a/site/src/theme/static/design-doc.less b/site/src/theme/static/design-doc.less
new file mode 100644
index 000000000..449ef832a
--- /dev/null
+++ b/site/src/theme/static/design-doc.less
@@ -0,0 +1,18 @@
+.design-inline-cards {
+ display: flex;
+ margin: 0 -20px;
+
+ > * {
+ flex: 10%;
+ margin: 0 20px;
+ }
+
+ img {
+ width: 100%;
+ max-width: 100%;
+ }
+
+ h4 {
+ margin-bottom: 0;
+ }
+}
diff --git a/site/src/theme/static/docsearch.less b/site/src/theme/static/docsearch.less
new file mode 100644
index 000000000..e5bd893e3
--- /dev/null
+++ b/site/src/theme/static/docsearch.less
@@ -0,0 +1,26 @@
+.algolia-autocomplete {
+ .ds-dropdown-menu {
+ border: none;
+ box-shadow: @box-shadow-base;
+
+ [class^='ds-dataset-'] {
+ background: @component-background;
+ border: none;
+ .algolia-docsearch-suggestion {
+ background: @component-background;
+ }
+ }
+
+ &::before {
+ display: none;
+ }
+ }
+
+ .algolia-docsearch-suggestion--title {
+ color: @site-text-color;
+ }
+
+ .algolia-docsearch-suggestion--highlight {
+ color: @primary-color;
+ }
+}
diff --git a/site/src/theme/static/footer.less b/site/src/theme/static/footer.less
new file mode 100644
index 000000000..480764ac8
--- /dev/null
+++ b/site/src/theme/static/footer.less
@@ -0,0 +1,80 @@
+@import './colors';
+
+@padding-space: 144px;
+
+#footer {
+ clear: both;
+ font-size: 14px;
+ background-color: #000;
+ position: relative;
+ z-index: 100;
+ margin-left: -1px;
+ color: rgba(255, 255, 255, 0.65);
+
+ .ant-row {
+ text-align: center;
+ .footer-center {
+ display: inline-block;
+ text-align: left;
+ > h2 {
+ font-size: 16px;
+ margin: 0 auto 24px;
+ font-weight: 500;
+ position: relative;
+
+ > .title-icon {
+ width: 27px;
+ margin-right: 16px;
+ }
+ > .anticon {
+ font-size: 16px;
+ position: absolute;
+ left: -22px;
+ top: 3px;
+ color: #aaa;
+ }
+ }
+ > div {
+ margin: 12px 0;
+ }
+ }
+ }
+ .footer-wrap {
+ position: relative;
+ padding: 86px @padding-space 93px @padding-space;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.25);
+ }
+ .bottom-bar {
+ text-align: center;
+ padding: 16px @padding-space;
+ margin: 0;
+ line-height: 32px;
+ overflow: hidden;
+ font-family: Avenir, @font-family;
+ font-size: 16px;
+ font-variant: tabular-nums;
+ a {
+ color: rgba(255, 255, 255, 0.65);
+ margin-left: 4px;
+ &:hover {
+ color: #fff;
+ }
+ }
+ .translate-button {
+ text-align: left;
+ }
+ .heart {
+ color: #f73f51;
+ font-size: 22px;
+ }
+ }
+ a {
+ color: rgba(255, 255, 255, 0.9);
+ }
+ h2 {
+ color: rgba(255, 255, 255, 1);
+ & > span {
+ color: rgba(255, 255, 255, 1);
+ }
+ }
+}
diff --git a/site/src/theme/static/header.less b/site/src/theme/static/header.less
new file mode 100644
index 000000000..4bd5aca63
--- /dev/null
+++ b/site/src/theme/static/header.less
@@ -0,0 +1,49 @@
+@import '../../../node_modules/ant-design-vue/es/style/themes/default.less';
+
+#header {
+ // ===================== Home Page =====================
+ &.home-header {
+ position: absolute;
+ top: 0;
+ right: 0;
+ left: 0;
+ max-width: 1280px;
+ margin-right: auto;
+ margin-left: auto;
+ background: transparent;
+ box-shadow: none;
+
+ #logo {
+ padding-right: 16px;
+ padding-left: 40px;
+
+ html.rtl & {
+ padding-right: 40px;
+ padding-left: 16px;
+ }
+ }
+
+ .ant-menu {
+ background: transparent;
+ }
+ }
+}
+
+@media (max-width: @screen-sm-min) {
+ #header.home-header {
+ .ant-row {
+ .ant-col {
+ margin: 0 auto;
+
+ a {
+ padding-right: 0;
+ padding-left: 0;
+ }
+
+ &:last-child {
+ display: none;
+ }
+ }
+ }
+ }
+}
diff --git a/site/src/theme/static/highlight.less b/site/src/theme/static/highlight.less
new file mode 100644
index 000000000..4adb492c8
--- /dev/null
+++ b/site/src/theme/static/highlight.less
@@ -0,0 +1,155 @@
+/**
+* prism.js default theme for JavaScript, CSS and HTML
+* Based on dabblet (http://dabblet.com)
+* @author Lea Verou
+*/
+
+pre code {
+ display: block;
+ padding: 16px 32px;
+ color: @site-text-color;
+ font-size: @font-size-base;
+ font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+ line-height: 2;
+ white-space: pre;
+ background: white;
+ border: 1px solid #e9e9e9;
+ border-radius: @border-radius-base;
+}
+
+code[class*='language-'],
+pre[class*='language-'] {
+ color: black;
+ font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+ line-height: 1.5;
+ direction: ltr;
+ white-space: pre;
+ text-align: left;
+ word-wrap: normal;
+ word-break: normal;
+ word-spacing: normal;
+ -moz-tab-size: 4;
+ -o-tab-size: 4;
+ tab-size: 4;
+ -webkit-hyphens: none;
+ -moz-hyphens: none;
+ -ms-hyphens: none;
+ hyphens: none;
+ background: none;
+}
+
+code[class*='css'] {
+ direction: ltr;
+}
+
+pre[class*='language-']::-moz-selection,
+pre[class*='language-'] ::-moz-selection,
+code[class*='language-']::-moz-selection,
+code[class*='language-'] ::-moz-selection {
+ text-shadow: none;
+ background: #b3d4fc;
+}
+
+pre[class*='language-']::selection,
+pre[class*='language-'] ::selection,
+code[class*='language-']::selection,
+code[class*='language-'] ::selection {
+ text-shadow: none;
+ background: #b3d4fc;
+}
+
+@media print {
+ code[class*='language-'],
+ pre[class*='language-'] {
+ text-shadow: none;
+ }
+}
+
+/* Code blocks */
+pre[class*='language-'] {
+ margin: 16px 0;
+ padding: 12px 20px;
+ overflow: auto;
+}
+
+:not(pre) > code[class*='language-'],
+pre[class*='language-'] {
+ background: #f5f5f5;
+}
+
+/* Inline code */
+:not(pre) > code[class*='language-'] {
+ padding: 0.1em;
+ white-space: normal;
+ border-radius: 0.3em;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+ color: slategray;
+}
+
+.token.punctuation {
+ color: #999;
+}
+
+.namespace {
+ opacity: 0.7;
+}
+
+.token.property,
+.token.tag,
+.token.boolean,
+.token.number,
+.token.constant,
+.token.symbol,
+.token.deleted {
+ color: #f81d22;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+ color: #0b8235;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+ color: #0b8235;
+}
+
+.token.atrule,
+.token.attr-value,
+.token.keyword {
+ color: #008dff;
+}
+
+.token.function {
+ color: #f81d22;
+}
+
+.token.regex,
+.token.important,
+.token.variable {
+ color: #e90;
+}
+
+.token.important,
+.token.bold {
+ font-weight: bold;
+}
+.token.italic {
+ font-style: italic;
+}
+
+.token.entity {
+ cursor: help;
+}
diff --git a/site/src/theme/static/home.less b/site/src/theme/static/home.less
new file mode 100644
index 000000000..73f8c847f
--- /dev/null
+++ b/site/src/theme/static/home.less
@@ -0,0 +1,2 @@
+@home-bg-color: #2f54eb;
+@home-text-color: #314659;
diff --git a/site/src/theme/static/icon-pic-searcher.less b/site/src/theme/static/icon-pic-searcher.less
new file mode 100644
index 000000000..95c39c1df
--- /dev/null
+++ b/site/src/theme/static/icon-pic-searcher.less
@@ -0,0 +1,51 @@
+.icon-pic-searcher {
+ display: inline-block;
+ margin: 0 8px;
+
+ .icon-pic-btn {
+ color: @text-color-secondary;
+ cursor: pointer;
+ transition: all 0.3s;
+ &:hover {
+ color: @input-icon-hover-color;
+ }
+ }
+}
+
+.icon-pic-preview {
+ width: 66px;
+ height: 66px;
+ margin-top: 10px;
+ padding: 8px;
+ text-align: center;
+ border: 1px solid @border-color-base;
+ border-radius: 4px;
+
+ > img {
+ max-width: 50px;
+ max-height: 50px;
+ }
+}
+
+.icon-pic-search-result {
+ min-height: 50px;
+ padding: 0 10px;
+ > .result-tip {
+ padding: 10px 0;
+ color: @text-color-secondary;
+ }
+ > table {
+ width: 100%;
+ .col-icon {
+ width: 80px;
+ padding: 10px 0;
+ > .anticon {
+ font-size: 30px;
+
+ :hover {
+ color: @link-hover-color;
+ }
+ }
+ }
+ }
+}
diff --git a/site/src/theme/static/icons.less b/site/src/theme/static/icons.less
new file mode 100644
index 000000000..f5d647c70
--- /dev/null
+++ b/site/src/theme/static/icons.less
@@ -0,0 +1,88 @@
+ul.anticons-list {
+ margin: 10px 0;
+ overflow: hidden;
+ direction: ltr;
+ list-style: none;
+ li {
+ position: relative;
+ float: left;
+ width: 16.66%;
+ height: 100px;
+ margin: 3px 0;
+ padding: 10px 0 0;
+ overflow: hidden;
+ color: #555;
+ text-align: center;
+ list-style: none;
+ background-color: inherit;
+ border-radius: 4px;
+ cursor: pointer;
+ transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
+ .rtl & {
+ margin: 3px 0;
+ padding: 10px 0 0;
+ }
+ .anticon {
+ margin: 12px 0 8px;
+ font-size: 36px;
+ transition: transform 0.3s ease-in-out;
+ will-change: transform;
+ }
+
+ .anticon-class {
+ display: block;
+ font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
+ white-space: nowrap;
+ text-align: center;
+ transform: scale(0.83);
+ .ant-badge {
+ transition: color 0.3s ease-in-out;
+ }
+ }
+
+ &:hover {
+ color: #fff;
+ background-color: @primary-color;
+ .anticon {
+ transform: scale(1.4);
+ }
+ .ant-badge {
+ color: #fff;
+ }
+ }
+
+ &.TwoTone:hover {
+ background-color: #8ecafe;
+ }
+
+ &.copied:hover {
+ color: rgba(255, 255, 255, 0.2);
+ }
+
+ &::after {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ color: #fff;
+ line-height: 110px;
+ text-align: center;
+ opacity: 0;
+ transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
+ content: 'Copied!';
+ }
+
+ &.copied::after {
+ top: -10px;
+ opacity: 1;
+ }
+ }
+}
+
+.copied-code {
+ padding: 2px 4px 2px;
+ font-size: 12px;
+ background: #f5f5f5;
+ border-radius: 2px;
+}
diff --git a/site/src/theme/static/index.less b/site/src/theme/static/index.less
new file mode 100644
index 000000000..2d8af5c9b
--- /dev/null
+++ b/site/src/theme/static/index.less
@@ -0,0 +1,28 @@
+@import './reset.less';
+@import '../../../node_modules/ant-design-vue/es/style/themes/default.less';
+@import './theme';
+@import './common';
+@import './header';
+@import './footer';
+@import './home';
+@import './page-nav';
+@import './markdown';
+@import './design-doc';
+@import './preview-img';
+@import './toc';
+@import './not-found';
+@import './highlight';
+@import './demo';
+@import './colors';
+@import './icons';
+@import './icon-pic-searcher';
+@import './mock-browser';
+@import './new-version-info-modal';
+@import './motion';
+@import './responsive';
+@import './resource';
+@import './docsearch';
+@import './nprogress';
+@import './contributors';
+@import './dark.less';
+@import './rtl.less';
diff --git a/site/src/theme/static/markdown.less b/site/src/theme/static/markdown.less
new file mode 100644
index 000000000..b2d37bac0
--- /dev/null
+++ b/site/src/theme/static/markdown.less
@@ -0,0 +1,490 @@
+.markdown {
+ color: @site-text-color;
+ font-size: 14px;
+ line-height: 2;
+}
+
+.highlight {
+ line-height: 1.5;
+}
+
+.markdown img {
+ max-width: ~'calc(100% - 32px)';
+}
+
+.markdown p > img {
+ margin: 34px 0;
+ box-shadow: 0 8px 20px rgba(143, 168, 191, 0.35);
+}
+
+.markdown p > img.markdown-inline-image {
+ margin: 0;
+ box-shadow: none;
+}
+
+.markdown h1 {
+ margin-top: 8px;
+ margin-bottom: 20px;
+ color: @site-heading-color;
+ font-weight: 500;
+ font-size: 30px;
+ font-family: Avenir, @font-family, sans-serif;
+ line-height: 38px;
+
+ .subtitle {
+ margin-left: 12px;
+ }
+}
+
+.markdown h2 {
+ font-size: 24px;
+ line-height: 32px;
+}
+
+.markdown h2,
+.markdown h3,
+.markdown h4,
+.markdown h5,
+.markdown h6 {
+ clear: both;
+ margin: 1.6em 0 0.6em;
+ color: @site-heading-color;
+ font-weight: 500;
+ font-family: Avenir, @font-family, sans-serif;
+}
+
+.markdown h3 {
+ font-size: 18px;
+}
+.markdown h4 {
+ font-size: 16px;
+}
+.markdown h5 {
+ font-size: 14px;
+}
+.markdown h6 {
+ font-size: 12px;
+}
+
+.markdown hr {
+ clear: both;
+ height: 1px;
+ margin: 56px 0;
+ background: @site-border-color-split;
+ border: 0;
+}
+
+.markdown p,
+.markdown pre {
+ margin: 1em 0;
+ .ant-row-rtl & {
+ direction: rtl;
+ text-align: right;
+ }
+}
+
+.markdown ul > li {
+ margin-left: 20px;
+ padding-left: 4px;
+ list-style-type: circle;
+
+ .rtl & {
+ margin-right: 20px;
+ margin-left: 0;
+ padding-right: 4px;
+ padding-left: 0;
+ }
+ &:empty {
+ display: none;
+ }
+}
+
+.markdown ol > li {
+ margin-left: 20px;
+ padding-left: 4px;
+ list-style-type: decimal;
+
+ .ant-row-rtl & {
+ margin-right: 20px;
+ margin-left: 0;
+ padding-right: 4px;
+ padding-left: 0;
+ }
+}
+
+.markdown ul > li > p,
+.markdown ol > li > p {
+ margin: 0.2em 0;
+}
+
+.markdown code {
+ margin: 0 1px;
+ padding: 0.2em 0.4em;
+ font-size: 0.9em;
+ background: @site-markdown-code-bg;
+ border: 1px solid @border-color-split;
+ border-radius: 3px;
+}
+
+.markdown pre {
+ font-family: @code-family;
+ background: @site-markdown-code-bg;
+ border-radius: @border-radius-base;
+}
+
+.markdown pre code {
+ margin: 0;
+ padding: 0;
+ overflow: auto;
+ color: @site-text-color;
+ font-size: max(@font-size-base - 1px, 12px);
+ direction: ltr;
+ text-align: left;
+ background: #f5f5f5;
+ border: none;
+}
+
+.markdown strong,
+.markdown b {
+ font-weight: 500;
+}
+
+.markdown > table {
+ width: 100%;
+ margin: 8px 0 16px;
+ direction: ltr;
+ empty-cells: show;
+ border: 1px solid @site-border-color-split;
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+
+.markdown > table th {
+ color: #5c6b77;
+ font-weight: 500;
+ white-space: nowrap;
+ background: rgba(0, 0, 0, 0.02);
+}
+
+.markdown > table th,
+.markdown > table td {
+ padding: 16px 24px;
+ text-align: left;
+ border: 1px solid @site-border-color-split;
+}
+
+.markdown table td > a:not(:last-child) {
+ margin-right: 0 !important;
+ &::after {
+ position: relative !important;
+ }
+}
+
+.markdown blockquote {
+ margin: 1em 0;
+ padding-left: 0.8em;
+ color: @site-text-color-secondary;
+ font-size: 90%;
+ border-left: 4px solid @site-border-color-split;
+
+ .rtl & {
+ padding-right: 0.8em;
+ padding-left: 0;
+ border-right: 4px solid @site-border-color-split;
+ border-left: none;
+ }
+}
+
+.markdown blockquote p {
+ margin: 0;
+}
+
+.markdown .anchor {
+ margin-left: 8px;
+ opacity: 0;
+ transition: opacity 0.3s;
+
+ .rtl & {
+ margin-right: 8px;
+ margin-left: 0;
+ }
+}
+
+.markdown .waiting {
+ color: #ccc;
+ cursor: not-allowed;
+}
+
+.markdown a.edit-button {
+ display: inline-block;
+ margin-left: 8px;
+ text-decoration: none;
+
+ .rtl & {
+ margin-right: 8px;
+ margin-left: 0;
+ transform: rotateY(180deg);
+ }
+
+ .anticon {
+ display: block;
+ color: @site-text-color-secondary;
+ font-size: 16px;
+ transition: all 0.3s;
+
+ &:hover {
+ color: @site-text-color;
+ }
+ }
+}
+
+.markdown h1:hover .anchor,
+.markdown h2:hover .anchor,
+.markdown h3:hover .anchor,
+.markdown h4:hover .anchor,
+.markdown h5:hover .anchor,
+.markdown h6:hover .anchor {
+ display: inline-block;
+ opacity: 1;
+}
+
+.markdown > br,
+.markdown > p > br {
+ clear: both;
+}
+
+.markdown.api-container {
+ table {
+ display: block;
+ margin: 2em 0;
+ overflow-x: auto;
+ overflow-y: hidden;
+ font-size: max(@font-size-base - 1px, 12px);
+ font-family: @code-family;
+ line-height: @line-height-base;
+ border: 0;
+ -webkit-overflow-scrolling: touch;
+
+ th,
+ td {
+ padding: 12px;
+ border-color: @border-color-split;
+ border-width: 1px 0;
+
+ &:first-child {
+ border-left: 1px solid @border-color-split;
+ }
+
+ &:last-child {
+ border-right: 1px solid @border-color-split;
+ }
+ }
+
+ th {
+ padding-top: 14px;
+ border-width: 1px 0 2px 0;
+ }
+
+ tbody tr {
+ transition: all 0.3s;
+ &:hover {
+ background: rgba(60, 90, 100, 0.04);
+ }
+ }
+
+ td {
+ &:first-child {
+ width: 18%;
+ color: @gray-8;
+ font-weight: 600;
+ white-space: nowrap;
+ }
+ &:nth-child(2) {
+ width: 55%;
+ }
+ &:nth-child(3) {
+ width: 22%;
+ color: @magenta-7;
+ font-size: max(@font-size-base - 1px, 12px);
+ }
+ &:nth-child(4) {
+ width: 15%;
+ font-size: max(@font-size-base - 1px, 12px);
+ }
+ &:nth-child(5) {
+ width: 8%;
+ font-size: max(@font-size-base - 1px, 12px);
+ }
+ &:nth-last-child(3):first-child {
+ width: 38%;
+ }
+ &:nth-last-child(3):first-child ~ td:nth-last-child(2) {
+ width: 70%;
+ }
+ }
+ }
+
+ hr {
+ margin: 12px 0;
+ }
+}
+
+@demo-grid-color: #0092ff;
+
+.grid-demo,
+[id^='components-grid-demo-'] {
+ .demo-row,
+ .code-box-demo .demo-row {
+ margin-bottom: 8px;
+ overflow: hidden;
+ background-image: linear-gradient(
+ 90deg,
+ #f5f5f5 4.16666667%,
+ transparent 4.16666667%,
+ transparent 8.33333333%,
+ #f5f5f5 8.33333333%,
+ #f5f5f5 12.5%,
+ transparent 12.5%,
+ transparent 16.66666667%,
+ #f5f5f5 16.66666667%,
+ #f5f5f5 20.83333333%,
+ transparent 20.83333333%,
+ transparent 25%,
+ #f5f5f5 25%,
+ #f5f5f5 29.16666667%,
+ transparent 29.16666667%,
+ transparent 33.33333333%,
+ #f5f5f5 33.33333333%,
+ #f5f5f5 37.5%,
+ transparent 37.5%,
+ transparent 41.66666667%,
+ #f5f5f5 41.66666667%,
+ #f5f5f5 45.83333333%,
+ transparent 45.83333333%,
+ transparent 50%,
+ #f5f5f5 50%,
+ #f5f5f5 54.16666667%,
+ transparent 54.16666667%,
+ transparent 58.33333333%,
+ #f5f5f5 58.33333333%,
+ #f5f5f5 62.5%,
+ transparent 62.5%,
+ transparent 66.66666667%,
+ #f5f5f5 66.66666667%,
+ #f5f5f5 70.83333333%,
+ transparent 70.83333333%,
+ transparent 75%,
+ #f5f5f5 75%,
+ #f5f5f5 79.16666667%,
+ transparent 79.16666667%,
+ transparent 83.33333333%,
+ #f5f5f5 83.33333333%,
+ #f5f5f5 87.5%,
+ transparent 87.5%,
+ transparent 91.66666667%,
+ #f5f5f5 91.66666667%,
+ #f5f5f5 95.83333333%,
+ transparent 95.83333333%
+ );
+ }
+ .ant-row > div,
+ .code-box-demo .ant-row > div {
+ min-height: 30px;
+ margin-top: 8px;
+ margin-bottom: 8px;
+ color: #fff;
+ text-align: center;
+ border-radius: 0;
+ }
+ .code-box-demo .ant-row > div:not(.gutter-row) {
+ padding: 16px 0;
+ background: @demo-grid-color;
+ &:nth-child(2n + 1) {
+ background: fade(@demo-grid-color, 75%);
+ }
+ }
+ .ant-row .demo-col,
+ .code-box-demo .ant-row .demo-col {
+ margin-top: 0;
+ margin-bottom: 0;
+ padding: 30px 0;
+ color: @white;
+ font-size: 18px;
+ text-align: center;
+ border: none;
+ }
+ .ant-row .demo-col-1 {
+ background: fade(@demo-grid-color, 75%);
+ }
+ .ant-row .demo-col-2,
+ .code-box-demo .ant-row .demo-col-2 {
+ background: fade(@demo-grid-color, 50%);
+ }
+ .ant-row .demo-col-3,
+ .code-box-demo .ant-row .demo-col-3 {
+ color: #999;
+ background: rgba(255, 255, 255, 0.2);
+ }
+ .ant-row .demo-col-4,
+ .code-box-demo .ant-row .demo-col-4 {
+ background: fade(@demo-grid-color, 60%);
+ }
+ .ant-row .demo-col-5,
+ .code-box-demo .ant-row .demo-col-5 {
+ color: #999;
+ background: rgba(255, 255, 255, 0.2);
+ }
+ .code-box-demo .height-100 {
+ height: 100px;
+ line-height: 100px;
+ }
+ .code-box-demo .height-50 {
+ height: 50px;
+ line-height: 50px;
+ }
+ .code-box-demo .height-120 {
+ height: 120px;
+ line-height: 120px;
+ }
+ .code-box-demo .height-80 {
+ height: 80px;
+ line-height: 80px;
+ }
+}
+
+[id='components-grid-demo-playground'],
+[id='components-grid-demo-gutter'] {
+ > .code-box-demo .ant-row > div {
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+}
+
+// For Changelog
+.markdown ul.ant-timeline {
+ line-height: 2;
+ li.ant-timeline-item {
+ margin: 0;
+ padding: 0 0 30px;
+ list-style: none;
+ .ant-timeline-item-content {
+ position: relative;
+ top: -14px;
+ padding-left: 32px;
+ font-size: 14px;
+ > h2 {
+ margin-top: 0;
+ padding-top: 4px;
+ direction: ltr;
+ span {
+ .ant-row-rtl & {
+ float: right;
+ }
+ }
+ }
+ }
+ }
+ li.ant-timeline-item:first-child {
+ margin-top: 40px;
+ }
+}
diff --git a/site/src/theme/static/mock-browser.less b/site/src/theme/static/mock-browser.less
new file mode 100644
index 000000000..a6d15f166
--- /dev/null
+++ b/site/src/theme/static/mock-browser.less
@@ -0,0 +1,53 @@
+/* Browser mockup code
+ * Contribute: https://gist.github.com/jarthod/8719db9fef8deb937f4f
+ * Live example: https://updown.io
+ */
+
+.browser-mockup {
+ position: relative;
+ border-top: 2em solid rgba(230, 230, 230, 0.7);
+ border-radius: 3px 3px 0 0;
+ box-shadow: 0 0.1em 0.5em 0 rgba(0, 0, 0, 0.28);
+}
+
+.browser-mockup::before {
+ position: absolute;
+ top: -1.25em;
+ left: 1em;
+ display: block;
+ width: 0.5em;
+ height: 0.5em;
+ background-color: #f44;
+ border-radius: 50%;
+ box-shadow: 0 0 0 2px #f44, 1.5em 0 0 2px #9b3, 3em 0 0 2px #fb5;
+ content: '';
+}
+
+.browser-mockup.with-tab::after {
+ position: absolute;
+ top: -2em;
+ left: 5.5em;
+ display: block;
+ width: 20%;
+ height: 0;
+ border-right: 0.8em solid transparent;
+ border-bottom: 2em solid white;
+ border-left: 0.8em solid transparent;
+ content: '';
+}
+
+.browser-mockup.with-url::after {
+ position: absolute;
+ top: -1.6em;
+ left: 5.5em;
+ display: block;
+ width: ~'calc(100% - 6em)';
+ height: 1.2em;
+ background-color: white;
+ border-radius: 2px;
+ content: '';
+}
+
+.browser-mockup > * {
+ display: block;
+}
diff --git a/site/src/theme/static/motion.less b/site/src/theme/static/motion.less
new file mode 100644
index 000000000..c90e1e095
--- /dev/null
+++ b/site/src/theme/static/motion.less
@@ -0,0 +1,39 @@
+.motion-container {
+ height: 190px;
+ margin: 40px 0 20px;
+ line-height: 190px;
+ text-align: center;
+}
+
+.motion-example {
+ display: inline-block !important;
+ width: 180px;
+ height: 180px;
+ color: #fff;
+ font-weight: bold;
+ font-size: 18px;
+ line-height: 180px;
+ text-align: center;
+ background: url(https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg) center/180px;
+ border-radius: 8px;
+ animation-duration: 0.5s !important;
+}
+
+.motion-select-wrapper {
+ margin-bottom: 40px;
+ text-align: center;
+}
+
+.motion-select {
+ width: 180px;
+ text-align: left;
+}
+
+.video-player {
+ position: relative;
+ max-width: 800px;
+ &-right {
+ float: right;
+ width: 616px;
+ }
+}
diff --git a/site/src/theme/static/new-version-info-modal.less b/site/src/theme/static/new-version-info-modal.less
new file mode 100644
index 000000000..6ef556e08
--- /dev/null
+++ b/site/src/theme/static/new-version-info-modal.less
@@ -0,0 +1,24 @@
+.new-version-info-modal {
+ img {
+ position: absolute;
+ top: 36px;
+ left: 34px;
+ width: 100px;
+ }
+ p {
+ margin-top: 1em;
+ }
+ .anticon {
+ display: none;
+ }
+ .ant-confirm-body {
+ .ant-confirm-title {
+ font-size: 18px;
+ }
+
+ margin-left: 120px;
+ .ant-confirm-content {
+ margin-left: 0;
+ }
+ }
+}
diff --git a/site/src/theme/static/not-found.less b/site/src/theme/static/not-found.less
new file mode 100644
index 000000000..6cb6bd98c
--- /dev/null
+++ b/site/src/theme/static/not-found.less
@@ -0,0 +1,34 @@
+#page-404 {
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: 100;
+ width: 100%;
+ height: 100%;
+ background-color: #fff;
+ background-repeat: no-repeat;
+ background-position: center;
+ background-size: 100%;
+ background-attachment: fixed;
+
+ section {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ text-align: center;
+ transform: translate(-50%, -50%);
+ }
+
+ h1 {
+ color: @primary-color;
+ font-weight: 500;
+ font-size: 120px;
+ }
+
+ p {
+ color: @site-text-color;
+ font-size: 18px;
+ }
+}
diff --git a/site/src/theme/static/nprogress.less b/site/src/theme/static/nprogress.less
new file mode 100644
index 000000000..258bb7206
--- /dev/null
+++ b/site/src/theme/static/nprogress.less
@@ -0,0 +1,14 @@
+#nprogress {
+ .bar {
+ background: @primary-color;
+ }
+
+ .peg {
+ box-shadow: 0 0 10px @primary-color, 0 0 5px @primary-color;
+ }
+
+ .spinner-icon {
+ border-top-color: @primary-color;
+ border-left-color: @primary-color;
+ }
+}
diff --git a/site/src/theme/static/page-nav.less b/site/src/theme/static/page-nav.less
new file mode 100644
index 000000000..8706c28a6
--- /dev/null
+++ b/site/src/theme/static/page-nav.less
@@ -0,0 +1,102 @@
+.prev-next-nav {
+ width: ~'calc(100% - 128px)';
+ margin-right: 64px;
+ margin-left: 64px;
+ overflow: hidden;
+ font-size: 14px;
+ border-top: 1px solid @site-border-color-split;
+
+ > .prev-page,
+ > .next-page {
+ float: left;
+ width: 50%;
+ height: 72px;
+ line-height: 72px;
+ text-decoration: none;
+
+ .ant-row-rtl & {
+ float: right;
+
+ .footer-nav-icon-before,
+ .footer-nav-icon-after {
+ transform: rotate(180deg);
+ }
+ }
+ }
+
+ > a.prev-page {
+ .footer-nav-icon-before {
+ position: relative;
+ left: 0;
+ margin-right: 1em;
+ color: @site-text-color-secondary;
+ font-size: 12px;
+ transition: all 0.3s;
+
+ .ant-row-rtl & {
+ right: 0;
+ left: auto;
+ margin-right: 0;
+ margin-left: 1em;
+ }
+ }
+
+ .footer-nav-icon-after {
+ display: none;
+ }
+
+ &:hover .footer-nav-icon-before {
+ left: -3px;
+ color: @primary-color;
+
+ .ant-row-rtl & {
+ right: -3px;
+ left: auto;
+ }
+ }
+ }
+
+ > .next-page {
+ float: right;
+ text-align: right;
+
+ .ant-row-rtl & {
+ float: left;
+ text-align: left;
+ }
+
+ .footer-nav-icon-after {
+ position: relative;
+ right: 0;
+ margin-left: 1em;
+ color: @site-text-color-secondary;
+ font-size: 12px;
+ transition: all 0.3s;
+
+ .ant-row-rtl & {
+ right: auto;
+ left: 0;
+ margin-right: 1em;
+ margin-left: 0;
+ }
+ }
+
+ .footer-nav-icon-before {
+ display: none;
+ }
+
+ &:hover .footer-nav-icon-after {
+ right: -3px;
+ color: @primary-color;
+
+ .ant-row-rtl & {
+ right: auto;
+ left: -3px;
+ }
+ }
+ }
+
+ .chinese {
+ margin-left: 0.5em;
+ }
+}
diff --git a/site/src/theme/static/preview-img.less b/site/src/theme/static/preview-img.less
new file mode 100644
index 000000000..c7dd04b73
--- /dev/null
+++ b/site/src/theme/static/preview-img.less
@@ -0,0 +1,214 @@
+.preview-image-boxes {
+ display: flex;
+ float: right;
+ clear: both;
+ width: 496px;
+ margin: 0 0 70px 64px;
+
+ &-with-carousel {
+ width: 420px;
+
+ .preview-image-box img {
+ padding: 0;
+ }
+ }
+
+ .ant-row-rtl & {
+ float: left;
+ margin: 0 64px 70px 0;
+ }
+}
+
+.preview-image-boxes + .preview-image-boxes {
+ margin-top: -35px;
+}
+
+.preview-image-box {
+ float: left;
+ width: 100%;
+}
+
+.preview-image-box + .preview-image-box {
+ margin-left: 24px;
+
+ .ant-row-rtl & {
+ margin-right: 24px;
+ margin-left: 0;
+ }
+}
+
+.preview-image-wrapper {
+ position: relative;
+ display: inline-block;
+ width: 100%;
+ padding: 16px;
+ text-align: center;
+ background: #f2f4f5;
+}
+
+.preview-image-wrapper.video {
+ display: block;
+ padding: 0;
+ background: 0;
+}
+
+.preview-image-wrapper video {
+ display: block;
+ width: 100%;
+ + svg {
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+}
+
+.preview-image-wrapper.good::after {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ display: block;
+ width: 100%;
+ height: 3px;
+ background: @primary-color;
+ content: '';
+}
+
+.preview-image-wrapper.bad::after {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ display: block;
+ width: 100%;
+ height: 3px;
+ background: @error-color;
+ content: '';
+}
+
+.preview-image-title {
+ margin-top: 20px;
+ color: @site-text-color;
+ font-size: 12px;
+}
+
+.preview-image-description {
+ margin-top: 2px;
+ color: @site-text-color-secondary;
+ font-size: 12px;
+ line-height: 1.5;
+}
+
+.preview-image-description hr {
+ margin: 2px 0;
+ background: none;
+ border: 0;
+}
+
+.preview-image-box img {
+ max-width: 100%;
+ padding: 12px;
+ background: @body-background;
+ border-radius: @border-radius-base;
+ cursor: pointer;
+ transition: all 0.3s;
+ &.no-padding {
+ padding: 0;
+ background: none;
+ }
+}
+
+.preview-image-boxes.preview-image-boxes-with-carousel img {
+ padding: 0;
+ box-shadow: 0 1px 0 0 #ddd, 0 3px 0 0 @body-background, 0 4px 0 0 #ddd, 0 6px 0 0 @body-background,
+ 0 7px 0 0 #ddd;
+}
+
+.preview-image-box img:hover {
+ box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.3);
+}
+
+.image-modal {
+ text-align: center;
+
+ &-container {
+ position: relative;
+ text-align: center;
+ }
+
+ .ant-carousel {
+ .slick-slider {
+ padding-bottom: 24px;
+ img {
+ display: inline;
+ max-width: 100%;
+ }
+ }
+ .slick-dots {
+ bottom: 4px;
+ li button {
+ background: #888;
+ }
+ }
+ }
+
+ .image-modal-single.slick-slider {
+ padding-bottom: 0;
+ }
+
+ .image-modal-single .slick-dots {
+ display: none !important;
+ }
+}
+
+.transition-video-player,
+.motion-video-min {
+ float: right;
+ width: 600px;
+ padding: 0 0 70px 20px;
+
+ .preview-image-wrapper {
+ padding: 0;
+ }
+
+ .ant-row-rtl & {
+ float: left;
+ }
+}
+
+.motion-video-min {
+ width: 390px;
+}
+
+.motion-principle-wrapper {
+ width: 100%;
+ max-width: 900px;
+ margin: 48px 0 24px;
+}
+
+.principle-wrapper {
+ width: 100%;
+
+ .principle {
+ display: inline-block;
+ width: 100%;
+ min-height: 180px;
+ margin-right: 12.5%;
+ margin-bottom: 24px;
+ padding: 24px;
+ font-size: 24px;
+ text-align: center;
+ border: 1px solid #e8e8e8;
+ border-radius: 4px;
+ &:last-child {
+ margin-right: 0;
+ }
+
+ h4 {
+ margin: 16px 0 8px;
+ }
+
+ p {
+ font-size: 12px;
+ line-height: 24px;
+ }
+ }
+}
diff --git a/site/src/theme/static/reset.less b/site/src/theme/static/reset.less
new file mode 100644
index 000000000..dd98cbcaa
--- /dev/null
+++ b/site/src/theme/static/reset.less
@@ -0,0 +1,46 @@
+body,
+div,
+dl,
+dt,
+dd,
+ul,
+ol,
+li,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+pre,
+code,
+form,
+fieldset,
+legend,
+input,
+textarea,
+p,
+blockquote,
+th,
+td,
+hr,
+button,
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+ margin: 0;
+ padding: 0;
+}
+
+ul,
+ol {
+ list-style: none;
+}
diff --git a/site/src/theme/static/resource.less b/site/src/theme/static/resource.less
new file mode 100644
index 000000000..c3b39f0a2
--- /dev/null
+++ b/site/src/theme/static/resource.less
@@ -0,0 +1,83 @@
+.resource-cards {
+ display: flex;
+ flex-flow: wrap;
+ width: 100%;
+}
+
+.resource-card {
+ display: flex;
+ max-width: 500px;
+ width: ~'calc(50% - 24px)';
+ min-width: 400px;
+ height: 130px;
+ border: 1px solid @border-color-base;
+ border-radius: @border-radius-base;
+ font-size: 12px;
+ color: #777;
+ margin: 24px 24px 0 0;
+ vertical-align: middle;
+ transition: all 0.3s ease;
+ position: relative;
+ overflow: hidden;
+}
+
+.resource-card:hover {
+ box-shadow: 0 3px 8px #d3ddeb;
+ border-color: transparent;
+}
+
+.resource-card:hover .resource-card-title {
+ color: @primary-color;
+}
+
+.resource-card.disabled {
+ opacity: 0.45;
+ pointer-events: none;
+}
+
+.resource-card-cover,
+.resource-card-icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+ width: 130px;
+}
+
+.resource-card-cover img {
+ width: 68px;
+}
+
+.resource-card-content {
+ display: flex;
+ flex-flow: column;
+ justify-content: center;
+}
+
+.resource-card-title {
+ display: block;
+ font-size: 16px;
+ color: @site-text-color;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ line-height: 1.2;
+ margin-bottom: 6px;
+}
+
+.resource-card-hot-badge {
+ background: #f50;
+ border-radius: 2px;
+ padding: 0 3px;
+ color: #fff;
+ font-size: 12px;
+ line-height: 20px;
+ margin-left: 2px;
+ vertical-align: top;
+}
+
+.resource-card-description {
+ display: block;
+ color: #697b8c;
+ padding-right: 16px;
+}
diff --git a/site/src/theme/static/responsive.less b/site/src/theme/static/responsive.less
new file mode 100644
index 000000000..bb3237386
--- /dev/null
+++ b/site/src/theme/static/responsive.less
@@ -0,0 +1,295 @@
+@import "../../../node_modules/ant-design-vue/es/style/themes/default.less";
+
+.nav-phone-icon {
+ position: absolute;
+ top: 25px;
+ right: 30px;
+ z-index: 1;
+ display: none;
+ width: 16px;
+ height: 22px;
+ cursor: pointer;
+}
+
+@media only screen and (max-width: @screen-lg) {
+ .main-container {
+ padding-right: 48px;
+ padding-left: 48px;
+
+ .toc-affix {
+ display: none;
+ }
+ }
+ .code-boxes-col-2-1,
+ .code-boxes-col-1-1 {
+ float: none;
+ width: 100%;
+ }
+}
+
+@media only screen and (max-width: 767.99px) {
+ .preview-image-boxes {
+ float: none;
+ width: 100%;
+ margin: 0 !important;
+ }
+ .preview-image-box {
+ width: 100%;
+ margin: 10px 0;
+ padding: 0;
+ }
+
+ .image-wrapper {
+ display: none;
+ }
+
+ div.version {
+ display: block;
+ margin: 29px auto 16px;
+ }
+
+ .toc {
+ display: none;
+ }
+
+ .nav-phone-icon {
+ display: block;
+ }
+
+ .main {
+ height: calc(100% - 86px);
+ }
+
+ .aside-container {
+ float: none;
+ width: auto;
+ padding-bottom: 30px;
+ border-right: 0;
+ }
+
+ .main-container,
+ .ant-row-rtl .main-container {
+ margin-right: 0;
+ margin-left: 0;
+ padding-right: 16px;
+ padding-left: 16px;
+ > .markdown > * {
+ width: 100% !important;
+ }
+ }
+
+ .main-wrapper {
+ width: 100%;
+ margin: 0;
+ border-radius: 0;
+ }
+
+ .prev-next-nav {
+ width: ~'calc(100% - 32px)';
+ margin-left: 16px;
+
+ .ant-row-rtl & {
+ margin-right: 16px;
+ margin-left: 64px;
+ }
+ }
+
+ .drawer {
+ .ant-menu-inline .ant-menu-item::after,
+ .ant-menu-vertical .ant-menu-item::after {
+ right: auto;
+ left: 0;
+ }
+ }
+
+ #_hj_feedback_container {
+ display: none;
+ }
+ /** home 区块 **/
+ .home-page-wrapper {
+ .page {
+ h2 {
+ margin: 80px auto 64px;
+ }
+ }
+ .parallax-bg {
+ display: none;
+ }
+ }
+ .banner {
+ display: block;
+ height: 632px;
+ &-bg-wrapper {
+ display: none;
+ }
+ .img-wrapper,
+ .text-wrapper {
+ display: inline-block;
+ width: 100%;
+ min-width: unset;
+ max-width: unset;
+ margin: auto;
+ text-align: center;
+ }
+ .img-wrapper {
+ position: initial;
+ margin-top: 20px;
+ text-align: center;
+ svg {
+ width: 100%;
+ max-width: 260px;
+ height: auto;
+ margin: 0 auto;
+ }
+ }
+ .text-wrapper {
+ min-height: 200px;
+ margin-top: 32px;
+ padding: 0;
+ h1 {
+ display: none;
+ }
+ p {
+ color: @home-text-color;
+ font-size: 14px;
+ line-height: 28px;
+ }
+ .banner-btns {
+ display: block;
+ min-width: 100%;
+ white-space: nowrap;
+ text-align: center;
+
+ .banner-btn {
+ padding: 0 20px;
+ font-size: 14px;
+ }
+ }
+ .banner-promote {
+ min-width: 100%;
+ margin-top: 32px;
+ .ant-divider {
+ display: none;
+ }
+ a {
+ font-size: 14px;
+ white-space: nowrap;
+ img {
+ width: 20px;
+ }
+ }
+ }
+ }
+ }
+ .page1 {
+ min-height: 1300px;
+ .ant-row {
+ margin: 24px auto 64px;
+ > div {
+ margin-bottom: 48px;
+ }
+ }
+ }
+ .page2 {
+ min-height: 840px;
+ background: @body-background;
+ &-content {
+ box-shadow: none;
+ }
+ &-components {
+ display: none;
+ }
+ &-product {
+ min-height: auto;
+ padding: 0 16px;
+ .product-block {
+ margin-bottom: 34px;
+ padding-bottom: 35px;
+ border-bottom: 1px solid @site-border-color-split;
+ &:last-child {
+ margin-bottom: 32px;
+ border-bottom: none;
+ .block-text-wrapper {
+ height: auto;
+ }
+ }
+ .block-image-wrapper {
+ height: 88px;
+ img {
+ height: 100%;
+ }
+ }
+ .block-text-wrapper {
+ padding-bottom: 0;
+ border-bottom: none;
+ h4 {
+ margin-bottom: 4px;
+ font-size: 18px;
+ line-height: 24px;
+ }
+ p {
+ margin-bottom: 8px;
+ font-size: 12px;
+ line-height: 20px;
+ }
+ a {
+ line-height: 20px;
+ }
+ .components-button-wrapper {
+ margin-top: 16px;
+ font-size: 12px;
+ a {
+ display: block;
+ }
+ }
+ a.more-mobile-react,
+ a.more-mobile-angular {
+ margin-top: 0;
+ color: @link-color;
+ }
+ a.more-mobile-react:hover,
+ a.more-mobile-angular:hover {
+ color: #40a9ff;
+ }
+ }
+ }
+ }
+ }
+ .page3 {
+ min-height: 688px;
+ background: url('https://gw.alipayobjects.com/zos/rmsportal/qICoJIqqQRMeRGhPHBBS.svg') no-repeat;
+ background-size: cover;
+ .ant-row {
+ margin: 0 8px;
+ }
+ .page3-block {
+ margin-bottom: 32px;
+ padding: 24px;
+ background: @body-background;
+ border-radius: 4px;
+ box-shadow: 0 8px 16px rgba(174, 185, 193, 0.3);
+ &:nth-child(2) {
+ .page3-img-wrapper img {
+ display: block;
+ width: 70%;
+ margin: auto;
+ }
+ }
+ p {
+ font-size: 12px;
+ }
+ .page3-img-wrapper {
+ width: 20%;
+ img {
+ width: 100%;
+ }
+ }
+ .page3-text-wrapper {
+ width: 80%;
+ max-width: initial;
+ margin: 0;
+ padding-left: 16px;
+ }
+ }
+ }
+}
diff --git a/site/src/theme/static/rtl.less b/site/src/theme/static/rtl.less
new file mode 100644
index 000000000..57c00ce70
--- /dev/null
+++ b/site/src/theme/static/rtl.less
@@ -0,0 +1,12 @@
+[data-direction='rtl'] {
+ #_hj_feedback_container {
+ > div {
+ right: auto;
+ left: 32px;
+ }
+ }
+ .fixed-widgets {
+ right: auto;
+ left: 32px;
+ }
+}
diff --git a/site/src/theme/static/theme.less b/site/src/theme/static/theme.less
new file mode 100644
index 000000000..259d872a7
--- /dev/null
+++ b/site/src/theme/static/theme.less
@@ -0,0 +1,13 @@
+@import '../../../node_modules/ant-design-vue/es/style/themes/default.less';
+@import './colors.less';
+@import './home.less';
+
+
+@input-icon-hover-color: rgba(0,0,0,.85);
+
+@site-heading-color: @heading-color;
+@site-text-color: @heading-color;
+@site-text-color-secondary: @text-color-secondary;
+@site-border-color-split: @border-color-split;
+@site-header-box-shadow: 0 2px 8px rgba(240, 241, 242, 65);
+@site-markdown-code-bg: #f2f4f5;
diff --git a/site/src/theme/static/toc.less b/site/src/theme/static/toc.less
new file mode 100644
index 000000000..c4b6d4e8d
--- /dev/null
+++ b/site/src/theme/static/toc.less
@@ -0,0 +1,98 @@
+.toc {
+ margin: 16px 0;
+ padding-left: 0;
+ font-size: 12px;
+ list-style: none;
+ border-left: 1px solid @site-border-color-split;
+
+ .ant-row-rtl & {
+ border-right: 1px solid @site-border-color-split;
+ border-left: none;
+ }
+}
+
+ul.toc > li {
+ margin-left: 0;
+ padding-left: 0;
+ line-height: 1.5;
+ list-style: none;
+ &:not(:last-child) {
+ margin-bottom: 4px;
+ }
+
+ .ant-row-rtl & {
+ margin-right: 0;
+ padding-right: 0;
+ }
+
+ &.toc-debug a {
+ color: @purple-6;
+ }
+}
+
+.toc li > ul {
+ display: none;
+ font-size: 12px;
+ text-indent: 8px;
+}
+
+.toc a {
+ display: block;
+ width: 110px;
+ margin-left: -1px;
+ padding-left: 16px;
+ overflow: hidden;
+ color: @site-text-color;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ border-left: 1px solid transparent;
+ transition: all 0.3s ease;
+
+ .ant-row-rtl & {
+ margin-right: -1px;
+ margin-left: 0;
+ padding-right: 16px;
+ padding-left: 0;
+ border-right: 1px solid transparent;
+ border-left: none;
+ }
+}
+
+.toc a:hover {
+ color: @primary-color;
+}
+
+.toc a.current {
+ color: @primary-color;
+ border-color: @primary-color;
+}
+
+.toc-affix {
+ position: absolute;
+ top: 8px;
+ right: 20px;
+ .ant-affix {
+ z-index: 9;
+ max-height: ~'calc(100vh - 16px)';
+ overflow-x: hidden;
+ overflow-y: auto;
+ background: #fff;
+ }
+ .ant-row-rtl & {
+ right: auto;
+ left: 20px;
+ }
+}
+
+.toc-affix-bottom {
+ position: absolute;
+ right: 20px;
+ bottom: 88px;
+ .ant-affix {
+ background: @body-background;
+ }
+ .ant-row-rtl & {
+ right: auto;
+ left: 20px;
+ }
+}
diff --git a/site/src/theme/template/IconDisplay/Category.jsx b/site/src/theme/template/IconDisplay/Category.jsx
new file mode 100644
index 000000000..82da3a83d
--- /dev/null
+++ b/site/src/theme/template/IconDisplay/Category.jsx
@@ -0,0 +1,51 @@
+import { message } from 'ant-design-vue';
+import { defineComponent } from 'vue';
+import CopyableIcon from './CopyableIcon.vue';
+
+const Category = defineComponent({
+ props: ['icons', 'title', 'newIcons', 'theme'],
+ data() {
+ return {
+ justCopied: null,
+ };
+ },
+ methods: {
+ onCopied(type, text) {
+ message.success(
+
+ {text} copied 🎉
+ ,
+ );
+ this.justCopied = type;
+ setTimeout(() => {
+ this.justCopied = null;
+ }, 2000);
+ },
+ },
+ render() {
+ const { icons, title, theme, newIcons } = this.$props;
+ const items = icons.map(name => {
+ return (
+
+
+ );
+ },
+});
+
+export default Category;
diff --git a/site/src/theme/template/IconDisplay/CopyableIcon.vue b/site/src/theme/template/IconDisplay/CopyableIcon.vue
new file mode 100644
index 000000000..88d69fb60
--- /dev/null
+++ b/site/src/theme/template/IconDisplay/CopyableIcon.vue
@@ -0,0 +1,39 @@
+
+ + {this.$t(`app.docs.components.icon.category.${title}`)} +
+- {items}
+
+
+
+
+
+
+
+
+ {this.renderCategories()}
+
+ );
+ },
+});
+
+export default IconDisplay;
diff --git a/site/src/theme/template/IconDisplay/themeIcons.jsx b/site/src/theme/template/IconDisplay/themeIcons.jsx
new file mode 100644
index 000000000..bf1daa199
--- /dev/null
+++ b/site/src/theme/template/IconDisplay/themeIcons.jsx
@@ -0,0 +1,44 @@
+export const FilledIcon = {
+ render() {
+ const path =
+ 'M864 64H160C107 64 64 107 64 160v' +
+ '704c0 53 43 96 96 96h704c53 0 96-43 96-96V16' +
+ '0c0-53-43-96-96-96z';
+ return (
+
+ );
+ },
+};
+
+export const OutlinedIcon = {
+ render() {
+ const path =
+ 'M864 64H160C107 64 64 107 64 160v7' +
+ '04c0 53 43 96 96 96h704c53 0 96-43 96-96V160c' +
+ '0-53-43-96-96-96z m-12 800H172c-6.6 0-12-5.4-' +
+ '12-12V172c0-6.6 5.4-12 12-12h680c6.6 0 12 5.4' +
+ ' 12 12v680c0 6.6-5.4 12-12 12z';
+ return (
+
+ );
+ },
+};
+
+export const TwoToneIcon = {
+ render() {
+ const path =
+ 'M16 512c0 273.932 222.066 496 496 49' +
+ '6s496-222.068 496-496S785.932 16 512 16 16 238.' +
+ '066 16 512z m496 368V144c203.41 0 368 164.622 3' +
+ '68 368 0 203.41-164.622 368-368 368z';
+ return (
+
+ );
+ },
+};
diff --git a/site/src/theme/zh-CN.js b/site/src/theme/zh-CN.js
new file mode 100644
index 000000000..ee558be3f
--- /dev/null
+++ b/site/src/theme/zh-CN.js
@@ -0,0 +1,145 @@
+export default {
+ 'app.theme.switch.default': '默认主题',
+ 'app.theme.switch.dark': '暗黑主题',
+ 'app.theme.switch.compact': '紧凑主题',
+ 'app.header.search': '全文本搜索...',
+ 'app.header.menu.documentation': '文档',
+ 'app.header.menu.components': '组件',
+ 'app.header.menu.spec': '设计',
+ 'app.header.menu.resource': '资源',
+ 'app.header.menu.more': '更多',
+ 'app.header.menu.mobile': '移动版',
+ 'app.header.menu.pro.v4': 'Ant Design Pro',
+ 'app.header.menu.charts': 'Ant Design Charts',
+ 'app.header.menu.ecosystem': '生态',
+ 'app.header.menu.store': '商店',
+ 'app.header.lang': 'English',
+ 'app.content.edit-page': '在 GitHub 上编辑此页！',
+ 'app.content.edit-demo': '在 GitHub 上编辑此示例！',
+ 'app.content.contributors': '文档贡献者',
+ 'app.component.examples': '代码演示',
+ 'app.component.examples.expand': '展开全部代码',
+ 'app.component.examples.collapse': '收起全部代码',
+ 'app.component.examples.visible': '显示调试专用演示',
+ 'app.component.examples.hide': '隐藏调试专用演示',
+ 'app.demo.debug': '此演示仅供调试，线上不会展示',
+ 'app.demo.type.js': '切换到 TypeScript',
+ 'app.demo.type.ts': '切换到 JavaScript',
+ 'app.demo.copy': '复制代码',
+ 'app.demo.copied': '复制成功',
+ 'app.demo.code.show': '显示代码',
+ 'app.demo.code.hide': '收起代码',
+ 'app.demo.codepen': '在 CodePen 中打开',
+ 'app.demo.codesandbox': '在 CodeSandbox 中打开',
+ 'app.demo.stackblitz': '在 Stackblitz 中打开',
+ 'app.demo.riddle': '在 Riddle 中打开',
+ 'app.home.introduce': '企业级产品设计体系，创造高效愉悦的工作体验',
+ 'app.home.recommend': '精彩推荐',
+ 'app.home.popularize': '推广',
+ 'app.home.design-and-framework': '设计语言与研发框架',
+ 'app.home.design-values': '设计价值观',
+ 'app.home.design-values-description':
+ '这是 Ant Design 评价设计好坏的内在标准。基于「每个人都追求快乐工作」这一假定，我们在「确定性」和「自然」的基础上，新增「意义感」和「生长性」两个价值观，指引每个设计者做更好地判断和决策。',
+ 'app.home.certainty': '确定性',
+ 'app.home.meaningful': '意义感',
+ 'app.home.growth': '生长性',
+ 'app.home.natural': '自然',
+ 'app.home.design-guide': '设计指引',
+ 'app.home.components': '组件库',
+ 'app.home.detail': '查看详情',
+ 'app.home.global-style': '全局样式',
+ 'app.home.design-patterns': '设计模式',
+ 'app.home.more': '更多内容',
+ 'app.home.play-video': '播放视频',
+ 'app.home.qr': '4.0 正式版发布',
+ 'app.home.qr.desc': '扫描上方二维码查看',
+ 'app.home.getting-started': '开始使用',
+ 'app.home.design-language': '设计语言',
+ 'app.home.product-antv-slogan': '全新一代数据可视化解决方案',
+ 'app.home.product-pro-slogan': '开箱即用的中台前端/设计解决方案',
+ 'app.home.product-mobile-slogan': '基于 Preact / React / React Native 的 UI 组件库',
+ 'app.home.product-hitu': '海兔',
+ 'app.home.product-hitu-slogan': '全新一代图形化解决方案',
+ 'app.home.product-kitchen-slogan': '一款为设计者提升工作效率的 Sketch 工具集',
+ 'app.home.product-icons-slogan': '一整套优质的图标集',
+ 'app.home.view-more': '查看全部',
+ 'app.footer.repo': 'GitHub 仓库',
+ 'app.footer.awesome': 'Awesome Ant Design',
+ 'app.footer.course': 'Ant Design 实战教程',
+ 'app.footer.chinamirror': '国内镜像站点 🇨🇳',
+ 'app.footer.primary-color-changing': '正在修改主题色...',
+ 'app.footer.primary-color-changed': '修改主题色成功！',
+ 'app.footer.kitchen': 'Sketch 工具集',
+ 'app.footer.landing': '首页模板集',
+ 'app.footer.scaffold': '脚手架',
+ 'app.footer.scaffolds': '脚手架市场',
+ 'app.footer.dev-tools': '开发工具',
+ 'app.footer.umi': 'React 应用开发框架',
+ 'app.footer.dumi': '组件/文档研发工具',
+ 'app.footer.remax': '全新的小程序开发体验',
+ 'app.footer.hooks': 'React Hooks 库',
+ 'app.footer.resources': '相关资源',
+ 'app.footer.data-vis': '数据可视化',
+ 'app.footer.eggjs': '企业级 Node 开发框架',
+ 'app.footer.motion': '设计动效',
+ 'app.footer.antd-library': 'Axure 部件库',
+ 'app.footer.design-resources': '设计资源下载',
+ 'app.footer.antux': '页面逻辑素材',
+ 'app.footer.community': '社区',
+ 'app.footer.help': '帮助',
+ 'app.footer.change-log': '更新日志',
+ 'app.footer.faq': '常见问题',
+ 'app.footer.feedback': '反馈和建议',
+ 'app.footer.stackoverflow': 'StackOverflow',
+ 'app.footer.segmentfault': 'SegmentFault',
+ 'app.footer.discussions': '讨论区',
+ 'app.footer.bug-report': '报告 Bug',
+ 'app.footer.issues': '讨论列表',
+ 'app.footer.version': '文档版本：',
+ 'app.footer.author': '蚂蚁金服体验技术部出品 @ XTech',
+ 'app.footer.work_with_us': '加入我们',
+ 'app.footer.more-product': '更多产品',
+ 'app.footer.company': 'XTech',
+ 'app.footer.ant-design': '蚂蚁 UI 体系',
+ 'app.footer.yuque': '语雀',
+ 'app.footer.yuque.slogan': '知识创作与分享工具',
+ 'app.footer.fengdie': '云凤蝶',
+ 'app.footer.fengdie.slogan': '移动建站平台',
+ 'app.footer.antv.slogan': '数据可视化',
+ 'app.footer.egg.slogan': '企业级 Node 开发框架',
+ 'app.footer.zhihu': 'Ant Design 专栏',
+ 'app.footer.zhihu.xtech': '体验科技专栏',
+ 'app.footer.seeconf': '蚂蚁体验科技大会',
+ 'app.footer.xtech': '蚂蚁体验科技',
+ 'app.footer.xtech.slogan': '让用户体验美好',
+ 'app.publish.title': 'antd@3.0.0 发布！🎉 🎉 🎉',
+ 'app.publish.greeting': '你好，',
+ 'app.publish.intro': ' 已正式发布，欢迎升级。',
+ 'app.publish.old-version-guide': '如果您还需要使用旧版，请查阅 ',
+ 'app.publish.old-version-tips': '，也可通过页面右上角的文档版本选择框进行切换。',
+ 'app.docs.color.pick-primary': '选择你的主色',
+ 'app.docs.color.pick-background': '选择你的背景色',
+ 'app.docs.components.icon.search.placeholder': '在此搜索图标，点击图标可复制代码',
+ 'app.docs.components.icon.pick-theme': '选择图标主题风格',
+ 'app.docs.components.icon.outlined': '线框风格',
+ 'app.docs.components.icon.filled': '实底风格',
+ 'app.docs.components.icon.two-tone': '双色风格',
+ 'app.docs.components.icon.category.direction': '方向性图标',
+ 'app.docs.components.icon.category.suggestion': '提示建议性图标',
+ 'app.docs.components.icon.category.editor': '编辑类图标',
+ 'app.docs.components.icon.category.data': '数据类图标',
+ 'app.docs.components.icon.category.other': '网站通用图标',
+ 'app.docs.components.icon.category.logo': '品牌和标识',
+ 'app.docs.components.icon.pic-searcher.intro': 'AI 截图搜索上线了，快来体验吧！🎉',
+ 'app.docs.components.icon.pic-searcher.title': '上传图片搜索图标',
+ 'app.docs.components.icon.pic-searcher.upload-text': '点击/拖拽/粘贴上传图片',
+ 'app.docs.components.icon.pic-searcher.upload-hint':
+ '我们会通过上传的图片进行匹配，得到最相似的图标',
+ 'app.docs.components.icon.pic-searcher.server-error': '识别服务暂不可用',
+ 'app.docs.components.icon.pic-searcher.matching': '匹配中...',
+ 'app.docs.components.icon.pic-searcher.modelloading': '神经网络模型加载中...',
+ 'app.docs.components.icon.pic-searcher.result-tip': '为您匹配到以下图标：',
+ 'app.docs.components.icon.pic-searcher.th-icon': '图标',
+ 'app.docs.components.icon.pic-searcher.th-score': '匹配度',
+ 'app.components.overview.search': '搜索组件',
+};
diff --git a/site/src/typings.d.ts b/site/src/typings.d.ts
new file mode 100644
index 000000000..9a5389704
--- /dev/null
+++ b/site/src/typings.d.ts
@@ -0,0 +1,25 @@
+interface Window {
+ docsearch: any;
+ notBlockEnabled: any;
+}
+
+interface Header {
+ level: number;
+ title: string;
+ slug: string;
+ content: string;
+}
+interface PageData {
+ title: string;
+ description: string;
+ headers: Header[];
+ frontmatter: Record{this.$t('app.docs.components.icon.pick-theme')}
+{{ isZhCN ? '组件总览' : 'Overview' }}
+
+ ant-design-vue
+ {{
+ isZhCN
+ ? '为 Web 应用提供了丰富的基础 UI 组件，我们还将持续探索企业级应用的最佳 UI 实践。'
+ : 'provides plenty of UI components to enrich your web applications, and we will improve components experience consistently. '
+ }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ isZhCN ? group.title : group.enTitle }}
+ {{ group.children.length }}
+
+
+
+ {{ component.title }}
+ {{ isZhCN ? component.subtitle : '' }}
+
+
+
+ ![]()
+
+
+
+ 如果您正在寻找顶级的 Vue.js 开发者，请联系
+
+
+
+
+
diff --git a/site/src/views/user/login/components/Login.vue b/site/src/views/user/login/components/Login.vue
new file mode 100644
index 000000000..9da8fa88d
--- /dev/null
+++ b/site/src/views/user/login/components/Login.vue
@@ -0,0 +1,96 @@
+
+
+ 如果您正在寻找顶级的 Vue.js 开发者，请联系
+
+ 我们
+
+ ！！！
+
+
+
+
+
+
+
+
+
+
+
+
+ 工作地点：{{ item.location }}
+职位描述
+ +
+
+ + {{ item.company }} + {{ item.title }}(岗位 ID: {{ item.id }}) +
+
+
+
+
+
+ 注：邮件中请注明投递岗位 ID
+
+
+
+
+
+
+
+
+
diff --git a/site/src/views/user/login/components/LoginItem.jsx b/site/src/views/user/login/components/LoginItem.jsx
new file mode 100644
index 000000000..57a9a4720
--- /dev/null
+++ b/site/src/views/user/login/components/LoginItem.jsx
@@ -0,0 +1,43 @@
+import ItemMap from './map';
+import WrapFormItem from './WrapFormItem';
+
+const LoginItem = {};
+Object.keys(ItemMap).forEach(key => {
+ const item = ItemMap[key];
+ LoginItem[key] = {
+ props: {
+ defaultValue: String,
+ name: String,
+ placeholder: String,
+ rules: {
+ type: Array,
+ default: () => item.rules,
+ },
+ getCaptchaButtonText: String,
+ getCaptchaSecondText: String,
+ getCaptcha: Function,
+ countDown: Number,
+ customprops: {
+ type: Object,
+ default: () => item.props,
+ },
+ type: {
+ type: String,
+ default: key,
+ },
+ },
+ inject: {
+ loginContext: { default: () => ({ form: {}, updateActive: () => {} }) },
+ },
+ render() {
+ const {
+ loginContext: { form, updateActive },
+ $props,
+ $listeners,
+ } = this;
+ return
+
+
+
+
+
+
+
+
+
+ {{ $t('userandlogin.login.login') }}
+
+
+
+
+
+
+
+
diff --git a/site/src/views/user/login/locales/en-US.js b/site/src/views/user/login/locales/en-US.js
new file mode 100644
index 000000000..0e63b03a9
--- /dev/null
+++ b/site/src/views/user/login/locales/en-US.js
@@ -0,0 +1,77 @@
+export default {
+ 'userandlogin.login.userName': 'userName',
+ 'userandlogin.login.password': 'password',
+ 'userandlogin.login.message-invalid-credentials': 'Invalid username or password',
+ 'userandlogin.login.message-invalid-verification-code': 'Invalid verification code',
+ 'userandlogin.login.tab-login-credentials': 'Credentials',
+ 'userandlogin.login.tab-login-mobile': 'Mobile number',
+ 'userandlogin.login.remember-me': 'Remember me',
+ 'userandlogin.login.forgot-password': 'Forgot your password?',
+ 'userandlogin.login.sign-in-with': 'Sign in with',
+ 'userandlogin.login.signup': 'Sign up',
+ 'userandlogin.login.login': 'Login',
+ 'userandlogin.register.register': 'Register',
+ 'userandlogin.register.get-verification-code': 'Get code',
+ 'userandlogin.register.sign-in': 'Already have an account?',
+ 'userandlogin.register-result.msg': 'Account：registered at {email}',
+ 'userandlogin.register-result.activation-email':
+ 'The activation email has been sent to your email address and is valid for 24 hours. Please log in to the email in time and click on the link in the email to activate the account.',
+ 'userandlogin.register-result.back-home': 'Back to home',
+ 'userandlogin.register-result.view-mailbox': 'View mailbox',
+ 'userandlogin.email.required': 'Please enter your email!',
+ 'userandlogin.email.wrong-format': 'The email address is in the wrong format!',
+ 'userandlogin.userName.required': 'Please enter your userName!',
+ 'userandlogin.password.required': 'Please enter your password!',
+ 'userandlogin.password.twice': 'The passwords entered twice do not match!',
+ 'userandlogin.strength.msg':
+ "Please enter at least 6 characters and don't use passwords that are easy to guess.",
+ 'userandlogin.strength.strong': 'Strength: strong',
+ 'userandlogin.strength.medium': 'Strength: medium',
+ 'userandlogin.strength.short': 'Strength: too short',
+ 'userandlogin.confirm-password.required': 'Please confirm your password!',
+ 'userandlogin.phone-number.required': 'Please enter your phone number!',
+ 'userandlogin.phone-number.wrong-format': 'Malformed phone number!',
+ 'userandlogin.verification-code.required': 'Please enter the verification code!',
+ 'userandlogin.title.required': 'Please enter a title',
+ 'userandlogin.date.required': 'Please select the start and end date',
+ 'userandlogin.goal.required': 'Please enter a description of the goal',
+ 'userandlogin.standard.required': 'Please enter a metric',
+ 'userandlogin.form.get-captcha': 'Get Captcha',
+ 'userandlogin.captcha.second': 'sec',
+ 'userandlogin.form.optional': ' (optional) ',
+ 'userandlogin.form.submit': 'Submit',
+ 'userandlogin.form.save': 'Save',
+ 'userandlogin.email.placeholder': 'Email',
+ 'userandlogin.password.placeholder': 'Password',
+ 'userandlogin.confirm-password.placeholder': 'Confirm password',
+ 'userandlogin.phone-number.placeholder': 'Phone number',
+ 'userandlogin.verification-code.placeholder': 'Verification code',
+ 'userandlogin.title.label': 'Title',
+ 'userandlogin.title.placeholder': 'Give the target a name',
+ 'userandlogin.date.label': 'Start and end date',
+ 'userandlogin.placeholder.start': 'Start date',
+ 'userandlogin.placeholder.end': 'End date',
+ 'userandlogin.goal.label': 'Goal description',
+ 'userandlogin.goal.placeholder': 'Please enter your work goals',
+ 'userandlogin.standard.label': 'Metrics',
+ 'userandlogin.standard.placeholder': 'Please enter a metric',
+ 'userandlogin.client.label': 'Client',
+ 'userandlogin.label.tooltip': 'Target service object',
+ 'userandlogin.client.placeholder':
+ 'Please describe your customer service, internal customers directly @ Name / job number',
+ 'userandlogin.invites.label': 'Inviting critics',
+ 'userandlogin.invites.placeholder':
+ 'Please direct @ Name / job number, you can invite up to 5 people',
+ 'userandlogin.weight.label': 'Weight',
+ 'userandlogin.weight.placeholder': 'Please enter weight',
+ 'userandlogin.public.label': 'Target disclosure',
+ 'userandlogin.label.help': 'Customers and invitees are shared by default',
+ 'userandlogin.radio.public': 'Public',
+ 'userandlogin.radio.partially-public': 'Partially public',
+ 'userandlogin.radio.private': 'Private',
+ 'userandlogin.publicUsers.placeholder': 'Open to',
+ 'userandlogin.option.A': 'Colleague A',
+ 'userandlogin.option.B': 'Colleague B',
+ 'userandlogin.option.C': 'Colleague C',
+ 'userandlogin.navBar.lang': 'Languages',
+};
diff --git a/site/src/views/user/login/locales/zh-CN.js b/site/src/views/user/login/locales/zh-CN.js
new file mode 100644
index 000000000..ca2b6676c
--- /dev/null
+++ b/site/src/views/user/login/locales/zh-CN.js
@@ -0,0 +1,74 @@
+export default {
+ 'userandlogin.login.userName': '用户名',
+ 'userandlogin.login.password': '密码',
+ 'userandlogin.login.message-invalid-credentials': '账户或密码错误',
+ 'userandlogin.login.message-invalid-verification-code': '验证码错误',
+ 'userandlogin.login.tab-login-credentials': '账户密码登录',
+ 'userandlogin.login.tab-login-mobile': '手机号登录',
+ 'userandlogin.login.remember-me': '自动登录',
+ 'userandlogin.login.forgot-password': '忘记密码',
+ 'userandlogin.login.sign-in-with': '其他登录方式',
+ 'userandlogin.login.signup': '注册账户',
+ 'userandlogin.login.login': '登录',
+ 'userandlogin.register.register': '注册',
+ 'userandlogin.register.get-verification-code': '获取验证码',
+ 'userandlogin.register.sign-in': '使用已有账户登录',
+ 'userandlogin.register-result.msg': '你的账户：{email} 注册成功',
+ 'userandlogin.register-result.activation-email':
+ '激活邮件已发送到你的邮箱中，邮件有效期为24小时。请及时登录邮箱，点击邮件中的链接激活帐户。',
+ 'userandlogin.register-result.back-home': '返回首页',
+ 'userandlogin.register-result.view-mailbox': '查看邮箱',
+ 'userandlogin.email.required': '请输入邮箱地址！',
+ 'userandlogin.email.wrong-format': '邮箱地址格式错误！',
+ 'userandlogin.userName.required': '请输入用户名!',
+ 'userandlogin.password.required': '请输入密码！',
+ 'userandlogin.password.twice': '两次输入的密码不匹配!',
+ 'userandlogin.strength.msg': '请至少输入 6 个字符。请不要使用容易被猜到的密码。',
+ 'userandlogin.strength.strong': '强度：强',
+ 'userandlogin.strength.medium': '强度：中',
+ 'userandlogin.strength.short': '强度：太短',
+ 'userandlogin.confirm-password.required': '请确认密码！',
+ 'userandlogin.phone-number.required': '请输入手机号！',
+ 'userandlogin.phone-number.wrong-format': '手机号格式错误！',
+ 'userandlogin.verification-code.required': '请输入验证码！',
+ 'userandlogin.title.required': '请输入标题',
+ 'userandlogin.date.required': '请选择起止日期',
+ 'userandlogin.goal.required': '请输入目标描述',
+ 'userandlogin.standard.required': '请输入衡量标准',
+ 'userandlogin.form.get-captcha': '获取验证码',
+ 'userandlogin.captcha.second': '秒',
+ 'userandlogin.form.optional': '（选填）',
+ 'userandlogin.form.submit': '提交',
+ 'userandlogin.form.save': '保存',
+ 'userandlogin.email.placeholder': '邮箱',
+ 'userandlogin.password.placeholder': '至少6位密码，区分大小写',
+ 'userandlogin.confirm-password.placeholder': '确认密码',
+ 'userandlogin.phone-number.placeholder': '手机号',
+ 'userandlogin.verification-code.placeholder': '验证码',
+ 'userandlogin.title.label': '标题',
+ 'userandlogin.title.placeholder': '给目标起个名字',
+ 'userandlogin.date.label': '起止日期',
+ 'userandlogin.placeholder.start': '开始日期',
+ 'userandlogin.placeholder.end': '结束日期',
+ 'userandlogin.goal.label': '目标描述',
+ 'userandlogin.goal.placeholder': '请输入你的阶段性工作目标',
+ 'userandlogin.standard.label': '衡量标准',
+ 'userandlogin.standard.placeholder': '请输入衡量标准',
+ 'userandlogin.client.label': '客户',
+ 'userandlogin.label.tooltip': '目标的服务对象',
+ 'userandlogin.client.placeholder': '请描述你服务的客户，内部客户直接 @姓名／工号',
+ 'userandlogin.invites.label': '邀评人',
+ 'userandlogin.invites.placeholder': '请直接 @姓名／工号，最多可邀请 5 人',
+ 'userandlogin.weight.label': '权重',
+ 'userandlogin.weight.placeholder': '请输入',
+ 'userandlogin.public.label': '目标公开',
+ 'userandlogin.label.help': '客户、邀评人默认被分享',
+ 'userandlogin.radio.public': '公开',
+ 'userandlogin.radio.partially-public': '部分公开',
+ 'userandlogin.radio.private': '不公开',
+ 'userandlogin.publicUsers.placeholder': '公开给',
+ 'userandlogin.option.A': '同事甲',
+ 'userandlogin.option.B': '同事乙',
+ 'userandlogin.option.C': '同事丙',
+ 'userandlogin.navBar.lang': '语言',
+};
diff --git a/site/src/views/user/login/model.js b/site/src/views/user/login/model.js
new file mode 100644
index 000000000..9ca999954
--- /dev/null
+++ b/site/src/views/user/login/model.js
@@ -0,0 +1,44 @@
+import router from '../../../router';
+import { parse } from 'query-string';
+import { fakeAccountLogin } from './service';
+
+export default {
+ namespaced: true,
+ state: {
+ status: undefined,
+ },
+ actions: {
+ async login({ commit }, payload) {
+ const response = await fakeAccountLogin(payload);
+ commit({
+ type: 'changeLoginStatus',
+ payload: response,
+ });
+ // Login successfully
+ if (response.status === 'ok') {
+ const urlParams = new URL(window.location.href);
+ let redirect = parse(location.search).redirect;
+ if (redirect) {
+ const redirectUrlParams = new URL(redirect);
+ if (redirectUrlParams.origin === urlParams.origin) {
+ redirect = redirect.substr(urlParams.origin.length);
+ if (redirect.match(/^\/.*#/)) {
+ redirect = redirect.substr(redirect.indexOf('#') + 1);
+ }
+ } else {
+ redirect = null;
+ }
+ }
+ router.replace({ path: redirect || '/' });
+ }
+ },
+ },
+ mutations: {
+ changeLoginStatus(state, { payload }) {
+ Object.assign(state, {
+ status: payload.status,
+ type: payload.type,
+ });
+ },
+ },
+};
diff --git a/site/src/views/user/login/service.js b/site/src/views/user/login/service.js
new file mode 100644
index 000000000..9c5e1f2a0
--- /dev/null
+++ b/site/src/views/user/login/service.js
@@ -0,0 +1,12 @@
+import request from '../../../utils/request';
+
+export async function fakeAccountLogin(params) {
+ return request('/api/login/account', {
+ method: 'POST',
+ data: params,
+ });
+}
+
+export async function getFakeCaptcha(mobile) {
+ return request(`/api/login/captcha?mobile=${mobile}`);
+}
diff --git a/site/src/views/user/login/style.less b/site/src/views/user/login/style.less
new file mode 100644
index 000000000..a16a20428
--- /dev/null
+++ b/site/src/views/user/login/style.less
@@ -0,0 +1,36 @@
+@import '~ant-design-vue/es/style/themes/default.less';
+
+.main {
+ width: 368px;
+ margin: 0 auto;
+ @media screen and (max-width: @screen-sm) {
+ width: 95%;
+ }
+
+ .icon {
+ margin-left: 16px;
+ color: rgba(0, 0, 0, 0.2);
+ font-size: 24px;
+ vertical-align: middle;
+ cursor: pointer;
+ transition: color 0.3s;
+
+ &:hover {
+ color: @primary-color;
+ }
+ }
+
+ .other {
+ margin-top: 24px;
+ line-height: 22px;
+ text-align: left;
+
+ .register {
+ float: right;
+ }
+ }
+}
+.main /deep/ .antd-pro-login-submit {
+ width: 100%;
+ margin-top: 24px;
+}
diff --git a/site/src/views/user/login/utils/utils.js b/site/src/views/user/login/utils/utils.js
new file mode 100644
index 000000000..54f470f48
--- /dev/null
+++ b/site/src/views/user/login/utils/utils.js
@@ -0,0 +1,10 @@
+import { parse } from 'qs';
+
+export function getPageQuery() {
+ return parse(window.location.href.split('?')[1]);
+}
+
+export function setAuthority(authority) {
+ const proAuthority = typeof authority === 'string' ? [authority] : authority;
+ return localStorage.setItem('antd-pro-authority', JSON.stringify(proAuthority));
+}
diff --git a/site/src/views/user/register-result/index.vue b/site/src/views/user/register-result/index.vue
new file mode 100644
index 000000000..6bfbb9c53
--- /dev/null
+++ b/site/src/views/user/register-result/index.vue
@@ -0,0 +1,59 @@
+
+
+
+
+
+
+
+ {{ $t('userandlogin.login.signup') }}
+
+
+
+
+
+
+
+
+
diff --git a/site/src/views/user/register-result/locales/en-US.js b/site/src/views/user/register-result/locales/en-US.js
new file mode 100644
index 000000000..ed75e97ba
--- /dev/null
+++ b/site/src/views/user/register-result/locales/en-US.js
@@ -0,0 +1,23 @@
+export default {
+ 'userandregister-result.login.userName': 'userName',
+ 'userandregister-result.login.password': 'password',
+ 'userandregister-result.login.message-invalid-credentials':
+ 'Invalid username or password（admin/ant.design）',
+ 'userandregister-result.login.message-invalid-verification-code': 'Invalid verification code',
+ 'userandregister-result.login.tab-login-credentials': 'Credentials',
+ 'userandregister-result.login.tab-login-mobile': 'Mobile number',
+ 'userandregister-result.login.remember-me': 'Remember me',
+ 'userandregister-result.login.forgot-password': 'Forgot your password?',
+ 'userandregister-result.login.sign-in-with': 'Sign in with',
+ 'userandregister-result.login.signup': 'Sign up',
+ 'userandregister-result.login.login': 'Login',
+ 'userandregister-result.register.register': 'Register',
+ 'userandregister-result.register.get-verification-code': 'Get code',
+ 'userandregister-result.register.sign-in': 'Already have an account?',
+ 'userandregister-result.register-result.msg': 'Account：registered at {email}',
+ 'userandregister-result.register-result.activation-email':
+ 'The activation email has been sent to your email address and is valid for 24 hours. Please log in to the email in time and click on the link in the email to activate the account.',
+ 'userandregister-result.register-result.back-home': 'Back to home',
+ 'userandregister-result.register-result.view-mailbox': 'View mailbox',
+ 'userandregister-result.navBar.lang': 'Languages',
+};
diff --git a/site/src/views/user/register-result/locales/zh-CN.js b/site/src/views/user/register-result/locales/zh-CN.js
new file mode 100644
index 000000000..eb7736301
--- /dev/null
+++ b/site/src/views/user/register-result/locales/zh-CN.js
@@ -0,0 +1,22 @@
+export default {
+ 'userandregister-result.login.userName': '用户名',
+ 'userandregister-result.login.password': '密码',
+ 'userandregister-result.login.message-invalid-credentials': '账户或密码错误（admin/ant.design）',
+ 'userandregister-result.login.message-invalid-verification-code': '验证码错误',
+ 'userandregister-result.login.tab-login-credentials': '账户密码登录',
+ 'userandregister-result.login.tab-login-mobile': '手机号登录',
+ 'userandregister-result.login.remember-me': '自动登录',
+ 'userandregister-result.login.forgot-password': '忘记密码',
+ 'userandregister-result.login.sign-in-with': '其他登录方式',
+ 'userandregister-result.login.signup': '注册账户',
+ 'userandregister-result.login.login': '登录',
+ 'userandregister-result.register.register': '注册',
+ 'userandregister-result.register.get-verification-code': '获取验证码',
+ 'userandregister-result.register.sign-in': '使用已有账户登录',
+ 'userandregister-result.register-result.msg': '你的账户：{email} 注册成功',
+ 'userandregister-result.register-result.activation-email':
+ '激活邮件已发送到你的邮箱中，邮件有效期为24小时。请及时登录邮箱，点击邮件中的链接激活帐户。',
+ 'userandregister-result.register-result.back-home': '返回首页',
+ 'userandregister-result.register-result.view-mailbox': '查看邮箱',
+ 'userandregister-result.navBar.lang': '语言',
+};
diff --git a/site/src/views/user/register-result/style.less b/site/src/views/user/register-result/style.less
new file mode 100644
index 000000000..09d3dca95
--- /dev/null
+++ b/site/src/views/user/register-result/style.less
@@ -0,0 +1,21 @@
+.registerResult {
+ width: 800px;
+ min-height: 400px;
+ margin: auto;
+ padding: 80px;
+ background: none;
+ /deep/ .anticon {
+ font-size: 64px;
+ }
+ .title {
+ margin-top: 32px;
+ font-size: 20px;
+ line-height: 28px;
+ }
+ .actions {
+ margin-top: 40px;
+ a + a {
+ margin-left: 8px;
+ }
+ }
+}
diff --git a/site/src/views/user/register/index.vue b/site/src/views/user/register/index.vue
new file mode 100644
index 000000000..8a175214d
--- /dev/null
+++ b/site/src/views/user/register/index.vue
@@ -0,0 +1,248 @@
+
+
+ {{ $t('userandregister-result.register-result.msg', { email: account }) }}
+
+
+ {{ $t('userandregister-result.register-result.activation-email') }}
+
+
+
+
+
+ {{ $t('userandregister-result.register-result.back-home') }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ $t('userandregister.register.register') }}
+
+
+ {{ $t('userandregister.register.sign-in') }}
+
+
+
+
+
+
+
diff --git a/site/src/views/user/register/locales/en-US.js b/site/src/views/user/register/locales/en-US.js
new file mode 100644
index 000000000..c01fa4381
--- /dev/null
+++ b/site/src/views/user/register/locales/en-US.js
@@ -0,0 +1,78 @@
+export default {
+ 'userandregister.login.userName': 'userName',
+ 'userandregister.login.password': 'password',
+ 'userandregister.login.message-invalid-credentials':
+ 'Invalid username or password（admin/ant.design）',
+ 'userandregister.login.message-invalid-verification-code': 'Invalid verification code',
+ 'userandregister.login.tab-login-credentials': 'Credentials',
+ 'userandregister.login.tab-login-mobile': 'Mobile number',
+ 'userandregister.login.remember-me': 'Remember me',
+ 'userandregister.login.forgot-password': 'Forgot your password?',
+ 'userandregister.login.sign-in-with': 'Sign in with',
+ 'userandregister.login.signup': 'Sign up',
+ 'userandregister.login.login': 'Login',
+ 'userandregister.register.register': 'Register',
+ 'userandregister.register.get-verification-code': 'Get code',
+ 'userandregister.register.sign-in': 'Already have an account?',
+ 'userandregister.register-result.msg': 'Account：registered at {email}',
+ 'userandregister.register-result.activation-email':
+ 'The activation email has been sent to your email address and is valid for 24 hours. Please log in to the email in time and click on the link in the email to activate the account.',
+ 'userandregister.register-result.back-home': 'Back to home',
+ 'userandregister.register-result.view-mailbox': 'View mailbox',
+ 'userandregister.email.required': 'Please enter your email!',
+ 'userandregister.email.wrong-format': 'The email address is in the wrong format!',
+ 'userandregister.userName.required': 'Please enter your userName!',
+ 'userandregister.password.required': 'Please enter your password!',
+ 'userandregister.password.twice': 'The passwords entered twice do not match!',
+ 'userandregister.strength.msg':
+ "Please enter at least 6 characters and don't use passwords that are easy to guess.",
+ 'userandregister.strength.strong': 'Strength: strong',
+ 'userandregister.strength.medium': 'Strength: medium',
+ 'userandregister.strength.short': 'Strength: too short',
+ 'userandregister.confirm-password.required': 'Please confirm your password!',
+ 'userandregister.phone-number.required': 'Please enter your phone number!',
+ 'userandregister.phone-number.wrong-format': 'Malformed phone number!',
+ 'userandregister.verification-code.required': 'Please enter the verification code!',
+ 'userandregister.title.required': 'Please enter a title',
+ 'userandregister.date.required': 'Please select the start and end date',
+ 'userandregister.goal.required': 'Please enter a description of the goal',
+ 'userandregister.standard.required': 'Please enter a metric',
+ 'userandregister.form.get-captcha': 'Get Captcha',
+ 'userandregister.captcha.second': 'sec',
+ 'userandregister.form.optional': ' (optional) ',
+ 'userandregister.form.submit': 'Submit',
+ 'userandregister.form.save': 'Save',
+ 'userandregister.email.placeholder': 'Email',
+ 'userandregister.password.placeholder': 'Password',
+ 'userandregister.confirm-password.placeholder': 'Confirm password',
+ 'userandregister.phone-number.placeholder': 'Phone number',
+ 'userandregister.verification-code.placeholder': 'Verification code',
+ 'userandregister.title.label': 'Title',
+ 'userandregister.title.placeholder': 'Give the target a name',
+ 'userandregister.date.label': 'Start and end date',
+ 'userandregister.placeholder.start': 'Start date',
+ 'userandregister.placeholder.end': 'End date',
+ 'userandregister.goal.label': 'Goal description',
+ 'userandregister.goal.placeholder': 'Please enter your work goals',
+ 'userandregister.standard.label': 'Metrics',
+ 'userandregister.standard.placeholder': 'Please enter a metric',
+ 'userandregister.client.label': 'Client',
+ 'userandregister.label.tooltip': 'Target service object',
+ 'userandregister.client.placeholder':
+ 'Please describe your customer service, internal customers directly @ Name / job number',
+ 'userandregister.invites.label': 'Inviting critics',
+ 'userandregister.invites.placeholder':
+ 'Please direct @ Name / job number, you can invite up to 5 people',
+ 'userandregister.weight.label': 'Weight',
+ 'userandregister.weight.placeholder': 'Please enter weight',
+ 'userandregister.public.label': 'Target disclosure',
+ 'userandregister.label.help': 'Customers and invitees are shared by default',
+ 'userandregister.radio.public': 'Public',
+ 'userandregister.radio.partially-public': 'Partially public',
+ 'userandregister.radio.private': 'Private',
+ 'userandregister.publicUsers.placeholder': 'Open to',
+ 'userandregister.option.A': 'Colleague A',
+ 'userandregister.option.B': 'Colleague B',
+ 'userandregister.option.C': 'Colleague C',
+ 'userandregister.navBar.lang': 'Languages',
+};
diff --git a/site/src/views/user/register/locales/zh-CN.js b/site/src/views/user/register/locales/zh-CN.js
new file mode 100644
index 000000000..0e0e4b0c9
--- /dev/null
+++ b/site/src/views/user/register/locales/zh-CN.js
@@ -0,0 +1,74 @@
+export default {
+ 'userandregister.login.userName': '用户名',
+ 'userandregister.login.password': '密码',
+ 'userandregister.login.message-invalid-credentials': '账户或密码错误（admin/ant.design）',
+ 'userandregister.login.message-invalid-verification-code': '验证码错误',
+ 'userandregister.login.tab-login-credentials': '账户密码登录',
+ 'userandregister.login.tab-login-mobile': '手机号登录',
+ 'userandregister.login.remember-me': '自动登录',
+ 'userandregister.login.forgot-password': '忘记密码',
+ 'userandregister.login.sign-in-with': '其他登录方式',
+ 'userandregister.login.signup': '注册账户',
+ 'userandregister.login.login': '登录',
+ 'userandregister.register.register': '注册',
+ 'userandregister.register.get-verification-code': '获取验证码',
+ 'userandregister.register.sign-in': '使用已有账户登录',
+ 'userandregister.register-result.msg': '你的账户：{email} 注册成功',
+ 'userandregister.register-result.activation-email':
+ '激活邮件已发送到你的邮箱中，邮件有效期为24小时。请及时登录邮箱，点击邮件中的链接激活帐户。',
+ 'userandregister.register-result.back-home': '返回首页',
+ 'userandregister.register-result.view-mailbox': '查看邮箱',
+ 'userandregister.email.required': '请输入邮箱地址！',
+ 'userandregister.email.wrong-format': '邮箱地址格式错误！',
+ 'userandregister.userName.required': '请输入用户名!',
+ 'userandregister.password.required': '请输入密码！',
+ 'userandregister.password.twice': '两次输入的密码不匹配!',
+ 'userandregister.strength.msg': '请至少输入 6 个字符。请不要使用容易被猜到的密码。',
+ 'userandregister.strength.strong': '强度：强',
+ 'userandregister.strength.medium': '强度：中',
+ 'userandregister.strength.short': '强度：太短',
+ 'userandregister.confirm-password.required': '请确认密码！',
+ 'userandregister.phone-number.required': '请输入手机号！',
+ 'userandregister.phone-number.wrong-format': '手机号格式错误！',
+ 'userandregister.verification-code.required': '请输入验证码！',
+ 'userandregister.title.required': '请输入标题',
+ 'userandregister.date.required': '请选择起止日期',
+ 'userandregister.goal.required': '请输入目标描述',
+ 'userandregister.standard.required': '请输入衡量标准',
+ 'userandregister.form.get-captcha': '获取验证码',
+ 'userandregister.captcha.second': '秒',
+ 'userandregister.form.optional': '（选填）',
+ 'userandregister.form.submit': '提交',
+ 'userandregister.form.save': '保存',
+ 'userandregister.email.placeholder': '邮箱',
+ 'userandregister.password.placeholder': '至少6位密码，区分大小写',
+ 'userandregister.confirm-password.placeholder': '确认密码',
+ 'userandregister.phone-number.placeholder': '手机号',
+ 'userandregister.verification-code.placeholder': '验证码',
+ 'userandregister.title.label': '标题',
+ 'userandregister.title.placeholder': '给目标起个名字',
+ 'userandregister.date.label': '起止日期',
+ 'userandregister.placeholder.start': '开始日期',
+ 'userandregister.placeholder.end': '结束日期',
+ 'userandregister.goal.label': '目标描述',
+ 'userandregister.goal.placeholder': '请输入你的阶段性工作目标',
+ 'userandregister.standard.label': '衡量标准',
+ 'userandregister.standard.placeholder': '请输入衡量标准',
+ 'userandregister.client.label': '客户',
+ 'userandregister.label.tooltip': '目标的服务对象',
+ 'userandregister.client.placeholder': '请描述你服务的客户，内部客户直接 @姓名／工号',
+ 'userandregister.invites.label': '邀评人',
+ 'userandregister.invites.placeholder': '请直接 @姓名／工号，最多可邀请 5 人',
+ 'userandregister.weight.label': '权重',
+ 'userandregister.weight.placeholder': '请输入',
+ 'userandregister.public.label': '目标公开',
+ 'userandregister.label.help': '客户、邀评人默认被分享',
+ 'userandregister.radio.public': '公开',
+ 'userandregister.radio.partially-public': '部分公开',
+ 'userandregister.radio.private': '不公开',
+ 'userandregister.publicUsers.placeholder': '公开给',
+ 'userandregister.option.A': '同事甲',
+ 'userandregister.option.B': '同事乙',
+ 'userandregister.option.C': '同事丙',
+ 'userandregister.navBar.lang': '语言',
+};
diff --git a/site/src/views/user/register/model.js b/site/src/views/user/register/model.js
new file mode 100644
index 000000000..b77d2b81b
--- /dev/null
+++ b/site/src/views/user/register/model.js
@@ -0,0 +1,24 @@
+import { fakeRegister } from './service';
+
+const Model = {
+ namespaced: true,
+ state: {
+ status: undefined,
+ },
+ actions: {
+ async submit({ commit }, { payload }) {
+ const response = await fakeRegister(payload);
+ commit({
+ type: 'registerHandle',
+ payload: response,
+ });
+ },
+ },
+ mutations: {
+ registerHandle(state, { payload }) {
+ state.status = payload.status;
+ },
+ },
+};
+
+export default Model;
diff --git a/site/src/views/user/register/service.js b/site/src/views/user/register/service.js
new file mode 100644
index 000000000..4a599e328
--- /dev/null
+++ b/site/src/views/user/register/service.js
@@ -0,0 +1,8 @@
+import request from '../../../utils/request';
+
+export async function fakeRegister(params) {
+ return request('/api/register', {
+ method: 'POST',
+ data: params,
+ });
+}
diff --git a/site/src/views/user/register/style.less b/site/src/views/user/register/style.less
new file mode 100644
index 000000000..ee1fd6d0f
--- /dev/null
+++ b/site/src/views/user/register/style.less
@@ -0,0 +1,52 @@
+@import '~ant-design-vue/es/style/themes/default.less';
+
+.main {
+ width: 368px;
+ margin: 0 auto;
+ /deep/ .ant-form-item {
+ margin-bottom: 24px;
+ }
+
+ /deep/ .ant-select-selection-selected-value {
+ padding-right: 0;
+ }
+ h3 {
+ margin-bottom: 20px;
+ font-size: 16px;
+ }
+
+ .getCaptcha {
+ display: block;
+ width: 100%;
+ }
+
+ .submit {
+ width: 50%;
+ }
+
+ .login {
+ float: right;
+ line-height: @btn-height-lg;
+ }
+}
+.success,
+.warning,
+.error {
+ transition: color 0.3s;
+}
+
+.success {
+ color: @success-color;
+}
+
+.warning {
+ color: @warning-color;
+}
+
+.error {
+ color: @error-color;
+}
+
+.progress-pass > .progress /deep/ .ant-progress-bg {
+ background-color: @warning-color;
+}
diff --git a/site/src/views/vip.vue b/site/src/views/vip.vue
new file mode 100644
index 000000000..659dd0e1e
--- /dev/null
+++ b/site/src/views/vip.vue
@@ -0,0 +1,6 @@
+
+
+
+
diff --git a/site/src/vueDocs/customize-theme.en-US.md b/site/src/vueDocs/customize-theme.en-US.md
new file mode 100644
index 000000000..448b1cb2c
--- /dev/null
+++ b/site/src/vueDocs/customize-theme.en-US.md
@@ -0,0 +1,200 @@
+# Customize Theme
+
+The structure and styles of ant-design-vue are exactly the same as those of Antd. You can refer to the Antd React customization mode for configuration.
+
+Ant Design allows you to customize some basic design aspects in order to meet the needs of UI diversity from business and brand, including primary color, border radius, border color, etc.
+
+
+
+## Ant Design Vue Less variables
+
+We are using [Less](http://lesscss.org/) as the development language for styling. A set of less variables are defined for each design aspect that can be customized to your needs.
+
+There are some major variables below, all less variables could be found in [Default Variables](https://github.com/vueComponent/ant-design-vue/blob/next/components/style/themes/default.less).
+
+```less
+@primary-color: #1890ff; // primary color for all components
+@link-color: #1890ff; // link color
+@success-color: #52c41a; // success state color
+@warning-color: #faad14; // warning state color
+@error-color: #f5222d; // error state color
+@font-size-base: 14px; // major text font size
+@heading-color: rgba(0, 0, 0, 0.85); // heading text color
+@text-color: rgba(0, 0, 0, 0.85); // major text color
+@text-color-secondary: rgba(0, 0, 0, 0.45); // secondary text color
+@disabled-color: rgba(0, 0, 0, 0.25); // disable state color
+@border-radius-base: 4px; // major border radius
+@border-color-base: #d9d9d9; // major border color
+@box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15); // major shadow for layers
+```
+
+Please report an issue if the existing list of variables is not enough for you.
+
+## How to do it
+
+We will use [modifyVars](http://lesscss.org/usage/#using-less-in-the-browser-modify-variables) provided by less.js to override the default values of the variables. We now introduce some popular way to do it depends on different workflow.
+
+### Customize in webpack
+
+We take a typical `webpack.config.js` file as example to customize it's [less-loader](https://github.com/webpack-contrib/less-loader) options.
+
+```diff
+// webpack.config.js
+module.exports = {
+ rules: [{
+ test: /\.less$/,
+ use: [{
+ loader: 'style-loader',
+ }, {
+ loader: 'css-loader', // translates CSS into CommonJS
+ }, {
+ loader: 'less-loader', // compiles Less to CSS
++ options: {
++ lessOptions: {
++ modifyVars: {
++ 'primary-color': '#1DA57A',
++ 'link-color': '#1DA57A',
++ 'border-radius-base': '2px',
++ },
++ javascriptEnabled: true,
++ }
++ },
+ }],
+ // ...other rules
+ }],
+ // ...other config
+}
+```
+
+Note that do not exclude antd package in node_modules when using less-loader.
+
+### Customize in vue cli 2
+
+Modify the `build/utils.js` file
+
+```diff
+// build/utils.js
+- less: generateLoaders('less'),
++ less: generateLoaders('less', {
++ modifyVars: {
++ 'primary-color': '#1DA57A',
++ 'link-color': '#1DA57A',
++ 'border-radius-base': '2px',
++ },
++ javascriptEnabled: true,
++ }),
+
+```
+
+### Customize in vue cli 3
+
+Create a new file `vue.config.js` in the project directory.
+
+```js
+// vue.config.js for less-loader@6.0.0
+module.exports = {
+ css: {
+ loaderOptions: {
+ less: {
+ lessOptions: {
+ modifyVars: {
+ 'primary-color': '#1DA57A',
+ 'link-color': '#1DA57A',
+ 'border-radius-base': '2px',
+ },
+ javascriptEnabled: true,
+ },
+ },
+ },
+ },
+};
+```
+
+### Customize in less file
+
+Another approach to customize theme is creating a `less` file within variables to override `antd.less`.
+
+```css
+@import '~ant-design-vue/dist/antd.less'; // Import Ant Design Vue styles by less entry
+@import 'your-theme-file.less'; // variables to override above
+```
+
+Note: This way will load the styles of all components, regardless of your demand, which cause `style` option of `babel-plugin-import` not working.
+
+## How to avoid modifying global styles?
+
+Currently ant-design-vue is designed as a whole experience and modify global styles (eg `body` etc). If you need to integrate ant-design-vue as a part of an existing website, it's likely you want to prevent ant-design-vue to override global styles.
+
+While there's no canonical way to do it, you can take one of the following paths :
+
+### Configure webpack to load an alternale less file and scope global styles
+
+It's possible to configure webpack to load an alternate less file:
+
+```js
+new webpack.NormalModuleReplacementPlugin( /node_modules\/ant-design-vue\/lib\/style\/index\.less/, path.resolve(rootDir, 'src/myStylesReplacement.less') )
+
+#antd { @import '~ant-design-vue/lib/style/core/index.less'; @import '~ant-design-vue/lib/style/themes/default.less'; }
+```
+
+Where the src/myStylesReplacement.less file loads the same files as the index.less file, but loads them within the scope of a top-level selector : the result is that all of the "global" styles are being applied with the #antd scope.
+
+### Use a postcss processor to scope all styles
+
+See an example of usage with gulp and [postcss-prefixwrap](https://github.com/dbtedman/postcss-prefixwrap) : https://gist.github.com/sbusch/a90eafaf5a5b61c6d6172da6ff76ddaa
+
+## Not working?
+
+You must import styles as less format. A common mistake would be importing multiple copied of styles that some of them are css format to override the less styles.
+
+- If you import styles by specifying the `style` option of [babel-plugin-import](https://github.com/ant-design/babel-plugin-import), change it from `'css'` to `true`, which will import the `less` version of antd.
+- If you import styles from `'ant-design-vue/dist/antd.css'`, change it to `ant-design-vue/dist/antd.less`.
+
+## Use dark theme
+
+Method 1: Import [antd.dark.less](https://unpkg.com/browse/ant-design-vue@2.0.0/dist/antd.dark.less) in the style file:
+
+```less
+@import '~ant-design-vue/dist/antd.dark.less'; // Introduce the official dark less style entry file
+```
+
+If the project does not use Less, you can import [antd.dark.css](https://unpkg.com/browse/ant-design-vue@2.0.0/dist/antd.dark.css) in the CSS file:
+
+```css
+@import '~ant-design-vue/dist/antd.dark.css';
+```
+
+> Note that you don't need to import `ant-design-vue/dist/antd.less` or `ant-design-vue/dist/antd.css` anymore, please remove it, and remove babel-plugin-import `style` config too. You can't enable two or more theme at the same time by this method.
+
+Method 3: using [less-loader](https://github.com/webpack-contrib/less-loader) in `webpack.config.js` to introduce as needed:
+
+```diff
+const { getThemeVariables } = require('ant-design-vue/dist/theme');
+
+// webpack.config.js
+module.exports = {
+ rules: [{
+ test: /\.less$/,
+ use: [{
+ loader: 'style-loader',
+ }, {
+ loader: 'css-loader', // translates CSS into CommonJS
+ }, {
+ loader: 'less-loader', // compiles Less to CSS
++ options: {
++ lessOptions: { // If you are using less-loader@5 please spread the lessOptions to options directly
++ modifyVars: getThemeVariables({
++ dark: true, // Enable dark mode
++ }),
++ javascriptEnabled: true,
++ },
++ },
+ }],
+ }],
+};
+```
+
+## Related Articles
+
+- [How to Customize Ant Design with React & Webpack… the Missing Guide](https://medium.com/@GeoffMiller/how-to-customize-ant-design-with-react-webpack-the-missing-guide-c6430f2db10f)
+- [Theming Ant Design with Sass and Webpack](https://gist.github.com/Kruemelkatze/057f01b8e15216ae707dc7e6c9061ef7)
diff --git a/site/src/vueDocs/customize-theme.zh-CN.md b/site/src/vueDocs/customize-theme.zh-CN.md
new file mode 100644
index 000000000..de03ba7f2
--- /dev/null
+++ b/site/src/vueDocs/customize-theme.zh-CN.md
@@ -0,0 +1,177 @@
+# 定制主题
+
+ant-design-vue 的组件结构及样式和 Antd React 完全一致，你可以参考 Antd React 的定制方式进行配置。
+
+Ant Design 设计规范上支持一定程度的样式定制，以满足业务和品牌上多样化的视觉需求，包括但不限于主色、圆角、边框和部分组件的视觉定制。
+
+
+
+## Ant Design Vue 的样式变量
+
+antd 的样式使用了 [Less](http://lesscss.org/) 作为开发语言，并定义了一系列全局/组件的样式变量，你可以根据需求进行相应调整。
+
+以下是一些最常用的通用变量，所有样式变量可以在 [这里](https://github.com/vueComponent/ant-design-vue/blob/next/components/style/themes/default.less) 找到。
+
+```less
+@primary-color: #1890ff; // 全局主色
+@link-color: #1890ff; // 链接色
+@success-color: #52c41a; // 成功色
+@warning-color: #faad14; // 警告色
+@error-color: #f5222d; // 错误色
+@font-size-base: 14px; // 主字号
+@heading-color: rgba(0, 0, 0, 0.85); // 标题色
+@text-color: rgba(0, 0, 0, 0.65); // 主文本色
+@text-color-secondary: rgba(0, 0, 0, 0.45); // 次文本色
+@disabled-color: rgba(0, 0, 0, 0.25); // 失效色
+@border-radius-base: 4px; // 组件/浮层圆角
+@border-color-base: #d9d9d9; // 边框色
+@box-shadow-base: 0 2px 8px rgba(0, 0, 0, 0.15); // 浮层阴影
+```
+
+如果以上变量不能满足你的定制需求，可以给我们提 issue。
+
+## 定制方式
+
+我们使用 [modifyVars](http://lesscss.org/usage/#using-less-in-the-browser-modify-variables) 的方式来进行覆盖变量。下面将针对不同的场景提供一些常用的定制方式。
+
+### 在 webpack 中定制主题
+
+我们以 webpack@4 为例进行说明，以下是一个 `webpack.config.js` 的典型例子，对 [less-loader](https://github.com/webpack-contrib/less-loader) 的 options 属性进行相应配置。
+
+```diff
+// webpack.config.js
+module.exports = {
+ rules: [{
+ test: /\.less$/,
+ use: [{
+ loader: 'style-loader',
+ }, {
+ loader: 'css-loader', // translates CSS into CommonJS
+ }, {
+ loader: 'less-loader', // compiles Less to CSS
++ options: {
++ lessOptions: {
++ modifyVars: {
++ 'primary-color': '#1DA57A',
++ 'link-color': '#1DA57A',
++ 'border-radius-base': '2px',
++ },
++ javascriptEnabled: true,
++ }
++ },
+ }],
+ // ...other rules
+ }],
+ // ...other config
+}
+```
+
+注意 less-loader 的处理范围不要过滤掉 `node_modules` 下的 antd 包。
+
+### 在 vue cli 2 中定制主题
+
+修改`build/utils.js`文件
+
+```diff
+// build/utils.js
+- less: generateLoaders('less'),
++ less: generateLoaders('less', {
++ modifyVars: {
++ 'primary-color': '#1DA57A',
++ 'link-color': '#1DA57A',
++ 'border-radius-base': '2px',
++ },
++ javascriptEnabled: true,
++ }),
+
+```
+
+### 在 vue cli 3 中定制主题
+
+项目根目录下新建文件`vue.config.js`
+
+```js
+// vue.config.js for less-loader@6.0.0
+module.exports = {
+ css: {
+ loaderOptions: {
+ less: {
+ lessOptions: {
+ modifyVars: {
+ 'primary-color': '#1DA57A',
+ 'link-color': '#1DA57A',
+ 'border-radius-base': '2px',
+ },
+ javascriptEnabled: true,
+ },
+ },
+ },
+ },
+};
+```
+
+### 配置 less 变量文件
+
+另外一种方式是建立一个单独的 `less` 变量文件，引入这个文件覆盖 `antd.less` 里的变量。
+
+```css
+@import '~ant-design-vue/dist/antd.less'; // 引入官方提供的 less 样式入口文件
+@import 'your-theme-file.less'; // 用于覆盖上面定义的变量
+```
+
+注意，这种方式已经载入了所有组件的样式，不需要也无法和按需加载插件 `babel-plugin-import` 的 `style` 属性一起使用。
+
+## 没有生效？
+
+注意样式必须加载 less 格式，一个常见的问题就是引入了多份样式，less 的样式被 css 的样式覆盖了。
+
+- 如果你在使用 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 的 `style` 配置来引入样式，需要将配置值从 `'css'` 改为 `true`，这样会引入 less 文件。
+- 如果你是通过 `'ant-design-vue/dist/antd.css'` 引入样式的，改为 `ant-design-vue/dist/antd.less`。
+
+## 使用暗黑主题
+
+方式一：在样式文件全量引入 [antd.dark.less](https://unpkg.com/browse/ant-design-vue@2.0.0/dist/antd.dark.less)。
+```less
+@import '~ant-design-vue/dist/antd.dark.less'; // 引入官方提供的暗色 less 样式入口文件
+```
+
+如果项目不使用 Less，可在 CSS 文件中全量引入 [antd.dark.css](https://unpkg.com/browse/ant-design-vue@2.0.0/dist/antd.dark.css)。
+
+```css
+@import '~ant-design-vue/dist/antd.dark.css';
+```
+
+> 注意这种方式下你不需要再引入 `ant-design-vue/dist/antd.less` 或 `ant-design-vue/dist/antd.css` 了，可以安全移除掉。也不需要开启 babel-plugin-import 的 `style` 配置。通过此方式不能同时配置两种及以上主题。
+
+方式二：是用在 `webpack.config.js` 使用 [less-loader](https://github.com/webpack-contrib/less-loader) 按需引入：
+
+```diff
+const { getThemeVariables } = require('ant-design-vue/dist/theme');
+
+// webpack.config.js
+module.exports = {
+ rules: [{
+ test: /\.less$/,
+ use: [{
+ loader: 'style-loader',
+ }, {
+ loader: 'css-loader', // translates CSS into CommonJS
+ }, {
+ loader: 'less-loader', // compiles Less to CSS
++ options: {
++ lessOptions: { // 如果使用less-loader@5，请移除 lessOptions 这一级直接配置选项。
++ modifyVars: getThemeVariables({
++ dark: true, // 开启暗黑模式
++ }),
++ javascriptEnabled: true,
++ },
++ },
+ }],
+ }],
+};
+```
+
+## 社区教程 for Antd React
+
+- [How to Customize Ant Design with React & Webpack… the Missing Guide](https://medium.com/@GeoffMiller/how-to-customize-ant-design-with-react-webpack-the-missing-guide-c6430f2db10f)
+- [Theming Ant Design with Sass and Webpack](https://gist.github.com/Kruemelkatze/057f01b8e15216ae707dc7e6c9061ef7)
diff --git a/site/src/vueDocs/download.en-US.md b/site/src/vueDocs/download.en-US.md
new file mode 100644
index 000000000..045cb9a88
--- /dev/null
+++ b/site/src/vueDocs/download.en-US.md
@@ -0,0 +1,89 @@
+Please find below some of the design resources and tools about Ant Design Vue that we consider valuable. More of this is still being collected.
+
+> The following design resources are developed and maintained by the [Ant Design](https://ant.design).
+
++ {{ $t('userandregister.register.register') }} +
+
+
+
+
+
+
+
+ {{ $t('userandregister.strength.strong') }}
+
+
+ {{ $t('userandregister.strength.medium') }}
+
+
+ {{ $t('userandregister.strength.short') }}
+
+
+
+
+
+ {{ $t('userandregister.strength.msg') }}
+
+
+
+
diff --git a/site/src/vueDocs/download.zh-CN.md b/site/src/vueDocs/download.zh-CN.md
new file mode 100644
index 000000000..5847b7548
--- /dev/null
+++ b/site/src/vueDocs/download.zh-CN.md
@@ -0,0 +1,77 @@
+这里提供 Ant Design Vue 相关设计资源和设计工具的下载，更多设计资源正在整理和完善中。
+
+> 以下设计资源由[Ant Design](https://ant.design)官方开发并维护
+
+
+ 
+
+
+
+
+ RENEW Sketch Symbols
+
+ Sketch Symbols for Desktop
+
+
+
+
+ 
+
+
+
+ Ant Design Pro
+ Common Templates and Pages
+
+
+
+
+ 
+
+
+
+ Ant Design Library
+ A powerful Axure library of Ant Design
+
+
+
+
+ 
+
+
+
+
+ Kitchen
+ HOT
+
+ A Sketch plugin with a collection of great tools
+
+
+
+
+ 
+
+
+
+ Ant UX
+ A series prototypes that help creating application structure and user flow
+
+
+
+
+ 
+
+
+
+ Ant Design Prototype (xiaopiu)
+ Online Ant Design library and interactive prototype
+
+
+
+
+ 
+
+
+
+
+ UI Kit for Figma
+ NEW
+
+ Large library of components and styles for Desktop
+
+
+
+
+ 
+
+
+
+
+ UI Kit for Framer X
+ NEW
+
+ Library of fully customizable components
+
+
+
+
+
diff --git a/site/src/vueDocs/faq.en-US.md b/site/src/vueDocs/faq.en-US.md
new file mode 100644
index 000000000..64be463ba
--- /dev/null
+++ b/site/src/vueDocs/faq.en-US.md
@@ -0,0 +1,55 @@
+# FAQ
+
+Here are the frequently asked questions about Ant Design Vue that you should look up before you ask in community or create new issue.
+
+### Are you going to provide Sass/Stylus(etc...) style file?
+
+No, actually, you can convert Less to Sass/Stylus(etc...) with tools (which you can Google).
+
+### How to use DatePicker with dayjs
+
+We also provide another implementation, which we provide with antd-dayjs-webpack-plugin, replacing dayjs with Day.js directly without changing a line of existing code. More info can be found at [antd-dayjs-webpack-plugin](https://github.com/ant-design/antd-dayjs-webpack-plugin).
+
+### Internationalization does not take effect?
+
+The language pack provided by the component does not affect date formatting. You need to import the dayjs language pack and apply it. Refer to the `ConfigProvider` component.
+
+### `Select Dropdown DatePicker TimePicker Popover Popconfirm` disappear when I click another popup component inside it, How to resolve it?
+
+Use `
+
+
+
+
+
+ 全新 Sketch 组件包
+
+ 桌面组件 Sketch 模板包
+
+
+
+
+
+
+
+
+ Ant Design Pro
+ 典型页面 + 通用业务模板
+
+
+
+
+
+
+
+
+ Ant Design Library @Axure
+ 一套强大的 Axure 部件库
+
+
+
+
+
+
+
+
+
+ Kitchen
+ HOT
+
+ Sketch 工具集
+
+
+
+
+
+
+
+
+ Ant UX
+ 一套页面逻辑原型库，帮你梳理页面逻辑
+
+
+
+
+
+
+
+
+ Ant Design 原型（xiaopiu）
+ 可在线编辑的 Ant Design 组件库和交互原型
+
+
+
+
+
+
+
+
+
+ Figma 组件包
+ NEW
+
+ 在 Figma 使用 Ant Design 进行设计
+
+
+
+ 
+ +
+ 
+
+
+
+
+## Features
+
+- An enterprise-class UI design language for web applications.
+- A set of high-quality Vue components out of the box.
+- Shared [Ant Design of React](https://ant.design/docs/spec/introduce) design resources.
+
+## Environment Support
+
+- Modern browsers. You can use [1.x](https://1x.antdv.com/) for IE9+.
+- Server-side Rendering
+- [Electron](https://electronjs.org/)
+
+| [
+ +
+
+
](http://godban.github.io/browsers-support-badges/)Edge | [
](http://godban.github.io/browsers-support-badges/)Firefox | [
](http://godban.github.io/browsers-support-badges/)Chrome | [
](http://godban.github.io/browsers-support-badges/)Safari | [
](http://godban.github.io/browsers-support-badges/)Opera | [
](http://godban.github.io/browsers-support-badges/)Electron | +| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +|Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions | + +## Version + +- Stable: [](https://www.npmjs.org/package/ant-design-vue) + +You can subscribe to this feed for new version notifications: https://github.com/vueComponent/ant-design-vue/releases.atom + +## Installation + +### Using npm or yarn + +**We recommend using npm or yarn to install**，it not only makes development easier，but also allow you to take advantage of the rich ecosystem of Javascript packages and tooling. + +```bash +$ npm install ant-design-vue@next --save +``` + +```bash +$ yarn add ant-design-vue@next +``` + +If you are in a bad network environment，you can try other registries and tools like [cnpm](https://github.com/cnpm/cnpm). + +### Import in Browser + +Add `script` and `link` tags in your browser and use the global variable `antd`. + +We provide `antd.js` `antd.css` and `antd.min.js` `antd.min.css` under `ant-design-vue/dist` in antd's npm package. You can also download these files directly from [](https://www.jsdelivr.com/package/npm/ant-design-vue) or [unpkg](https://unpkg.com/ant-design-vue/dist/). + +> **We strongly discourage loading the entire files** this will add bloat to your application and make it more difficult to receive bugfixes and updates. Antd is intended to be used in conjunction with a build tool, such as [webpack](https://webpack.github.io/), which will make it easy to import only the parts of antd that you are using. + +> Note: you should import [dayjs](https://day.js.org/) before using antd.js. + +## Usage + +```jsx +import { DatePicker } from "ant-design-vue"; +app.use(DatePicker); +``` + +And import stylesheets manually: + +```jsx +import "ant-design-vue/dist/antd.css"; // or 'ant-design-vue/dist/antd.less' +``` + +### Use modularized antd + +- Use [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) (Recommended) + + ```jsx + // .babelrc or babel-loader option + { + "plugins": [ + ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }] // `style: true` for less + ] + } + ``` + + > Note: Don't set `libraryDirectory` if you are using webpack 1. + + This allows you to import components from antd without having to manually import the corresponding stylesheet. The antd babel plugin will automatically import stylesheets. + + ```jsx + // import js and css modularly, parsed by babel-plugin-import + import { DatePicker } from "ant-design-vue"; + ``` + +- Manually import + + ```jsx + import DatePicker from "ant-design-vue/lib/date-picker"; // for js + import "ant-design-vue/lib/date-picker/style/css"; // for css + // import 'ant-design-vue/lib/date-picker/style'; // that will import less + ``` + +- For Vite + ```js + // vite.config.js + import ViteComponents, { AntDesignVueResolver } from 'vite-plugin-components'; + + export default { + plugins: [ + /* ... */ + ViteComponents({ + customComponentResolvers: [AntDesignVueResolver()], + }), + ], + }; +``` + +## Links + +- [Home Page](https://www.antdv.com/) +- [Ant Design Of React](https://ant.design/) +- [Components](https://www.antdv.com/docs/vue/introduce) +- [Change Log](/docs/vue/changelog) +- [CodeSandbox template](https://codesandbox.io/s/agitated-franklin-1w72v) for bug reports +- [Customize Theme](/docs/vue/customize-theme) +- [FAQ](/docs/vue/faq) +- [Support US](/docs/vue/sponsor) +- [Awesome Ant Design](https://github.com/vueComponent/ant-design-vue-awesome) + +## Contributing + +If you'd like to help us improve antd, just create a [Pull Request](https://github.com/vueComponent/ant-design-vue/pulls). Feel free to report bugs and issues [here](https://vuecomponent.github.io/issue-helper/). + +> If you're new to posting issues, we ask that you read [_How To Ask Questions The Smart Way_](http://www.catb.org/~esr/faqs/smart-questions.html) and [How to Ask a Question in Open Source Community](https://github.com/seajs/seajs/issues/545) and [How to Report Bugs Effectively](http://www.chiark.greenend.org.uk/~sgtatham/bugs.html) prior to posting. Well written bug reports help us help you! + +## About ant-design-vue + +As we all know, Ant Design, as a design language, has gone through many years of iteration and accumulation. Its UI design ideas have become a set of de facto standards and are sought after and loved by many front-end developers and enterprises, and it is also a magic weapon in the hands of React developers. I hope that ant-design-vue will allow Vue developers to enjoy the excellent design of Ant Design. + +The ant-design-vue is the Vue implementation of Ant Design. The style of the component is kept in sync with Ant Design. The html structure and css style of the component are also consistent. The style 0 modification is really achieved, and the component API is kept as consistent as possible. + +Ant Design Vue is committed to providing programmers with a ** pleasant ** development experience. + +## THANK YOU + +[Ant Design Team](https://github.com/ant-design/ant-design/blob/master/AUTHORS.txt) diff --git a/site/src/vueDocs/introduce.zh-CN.md b/site/src/vueDocs/introduce.zh-CN.md new file mode 100644 index 000000000..d94558700 --- /dev/null +++ b/site/src/vueDocs/introduce.zh-CN.md @@ -0,0 +1,160 @@ + +# Ant Design of Vue + +这里是 Ant Design 的 Vue 实现，开发和服务于企业级后台产品。 + +
+
+ +
+
+
+
+
+
+## 特性
+
+- 提炼自企业级中后台产品的交互语言和视觉风格。
+- 开箱即用的高质量 Vue 组件。
+- 共享[Ant Design of React](http://ant-design.gitee.io/docs/spec/introduce-cn)设计工具体系。
+
+## 支持环境
+
+- 现代浏览器, 如果需要支持 IE9，你可以选择使用 [1.x 版本](https://1x.antdv.com/)。
+- 支持服务端渲染。
+- [Electron](https://electronjs.org/)
+
+| [
+ +
+
+](http://godban.github.io/browsers-support-badges/)IE / Edge | [
](http://godban.github.io/browsers-support-badges/)Firefox | [
](http://godban.github.io/browsers-support-badges/)Chrome | [
](http://godban.github.io/browsers-support-badges/)Safari | [
](http://godban.github.io/browsers-support-badges/)Opera | [
](http://godban.github.io/browsers-support-badges/)Electron | +| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions | + +## 版本 + +- 稳定版：[](https://www.npmjs.org/package/ant-design-vue) + +你可以订阅：https://github.com/vueComponent/ant-design-vue/releases.atom 来获得稳定版发布的通知。 + +## 安装 + +### 使用 npm 或 yarn 安装 + +**我们推荐使用 npm 或 yarn 的方式进行开发**，不仅可在开发环境轻松调试，也可放心地在生产环境打包部署使用，享受整个生态圈和工具链带来的诸多好处。 + +```bash +$ npm install ant-design-vue@next --save +``` + +```bash +$ yarn add ant-design-vue@next +``` + +如果你的网络环境不佳，推荐使用 [cnpm](https://github.com/cnpm/cnpm)。 + +### 浏览器引入 + +在浏览器中使用 `script` 和 `link` 标签直接引入文件，并使用全局变量 `antd`。 + +我们在 npm 发布包内的 `ant-design-vue/dist` 目录下提供了 `antd.js` `antd.css` 以及 `antd.min.js` `antd.min.css`。你也可以通过 [](https://www.jsdelivr.com/package/npm/ant-design-vue) 或 [UNPKG](https://unpkg.com/ant-design-vue/dist/) 进行下载。 + +> **强烈不推荐使用已构建文件**，这样无法按需加载，而且难以获得底层依赖模块的 bug 快速修复支持。 + +> 注意：引入 antd.js 前你需要自行引入 [dayjs](https://day.js.org/)。 + +## 示例 + +```jsx +import { DatePicker } from "ant-design-vue"; +app.use(DatePicker); +``` + +引入样式： + +```jsx +import "ant-design-vue/dist/antd.css"; // or 'ant-design-vue/dist/antd.less' +``` + +### 按需加载 + +下面两种方式都可以只加载用到的组件。 + +- 使用 [babel-plugin-import](https://github.com/ant-design/babel-plugin-import)（推荐）。 + + ```jsx + // .babelrc or babel-loader option + { + "plugins": [ + ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }] // `style: true` 会加载 less 文件 + ] + } + ``` + + > 注意：webpack 1 无需设置 `libraryDirectory`。 + + 然后只需从 ant-design-vue 引入模块即可，无需单独引入样式。等同于下面手动引入的方式。 + + ```jsx + // babel-plugin-import 会帮助你加载 JS 和 CSS + import { DatePicker } from "ant-design-vue"; + ``` + +- 手动引入 + + ```jsx + import DatePicker from "ant-design-vue/lib/date-picker"; // 加载 JS + import "ant-design-vue/lib/date-picker/style/css"; // 加载 CSS + // import 'ant-design-vue/lib/date-picker/style'; // 加载 LESS + ``` + +- Vite 按需 + ```js + // vite.config.js + import ViteComponents, { AntDesignVueResolver } from 'vite-plugin-components'; + + export default { + plugins: [ + /* ... */ + ViteComponents({ + customComponentResolvers: [AntDesignVueResolver()], + }), + ], + }; + ``` + +## 链接 + +- [首页](https://www.antdv.com/) +- [Ant Design Of React](https://ant.design/) +- [组件库](https://www.antdv.com/docs/vue/introduce-cn) +- [更新日志](/docs/vue/changelog-cn) +- [CodeSandbox 模板](https://codesandbox.io/s/agitated-franklin-1w72v) for bug reports +- [定制主题](/docs/vue/customize-theme-cn) +- [常见问题](/docs/vue/faq-cn) +- [支持我们](/docs/vue/sponsor-cn) +- [Awesome Ant Design](https://github.com/vueComponent/ant-design-vue-awesome) + +## 如何贡献 + +如果你希望参与贡献，欢迎 [Pull Request](https://github.com/vueComponent/ant-design-vue/pulls)，或给我们 [报告 Bug](https://vuecomponent.github.io/issue-helper/)([国内镜像](http://ant-design-vue.gitee.io/issue-helper/))。 + +> 强烈推荐阅读 [《提问的智慧》](https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way)、[《如何向开源社区提问题》](https://github.com/seajs/seajs/issues/545) 和 [《如何有效地报告 Bug》](http://www.chiark.greenend.org.uk/%7Esgtatham/bugs-cn.html)、[《如何向开源项目提交无法解答的问题》](https://zhuanlan.zhihu.com/p/25795393)，更好的问题更容易获得帮助。 + +## 关于 ant-design-vue + +众所周知，Ant Design 作为一门设计语言面世，经历过多年的迭代和积累，它对 UI 的设计思想已经成为一套事实标准，受到众多前端开发者及企业的追捧和喜爱，也是 React 开发者手中的神兵利器。希望 ant-design-vue 能够让 Vue 开发者也享受到 Ant Design 的优秀设计。 + +ant-design-vue 是 Ant Design 的 Vue 实现，组件的风格与 Ant Design 保持同步，组件的 html 结构和 css 样式也保持一致，真正做到了样式 0 修改，组件 API 也尽量保持了一致。 + +Ant Design Vue 致力于提供给程序员**愉悦**的开发体验。 + +## 特别感谢 + +[Ant Design Team](https://github.com/ant-design/ant-design/blob/master/AUTHORS.txt) diff --git a/site/src/vueDocs/migration-v2.en-US.md b/site/src/vueDocs/migration-v2.en-US.md new file mode 100644 index 000000000..726afcdce --- /dev/null +++ b/site/src/vueDocs/migration-v2.en-US.md @@ -0,0 +1,100 @@ +This document will help you upgrade from ant-design-vue `1.x` version to ant-design-vue `2.x` version. + +## Upgrade preparation + +1. Please upgrade to the latest version of 1.x first, and remove/modify related APIs according to the console warning message. +2. Upgrade the project to Vue 3.0 and above. + +## 2.0 What are the incompatible changes + +### Design specification adjustment + +- Adjust the row height from `1.5`(`21px`) to `1.5715`(`22px`). +- Basic round corner adjustment, changed from `4px` to `2px`. +- The color brightness of the dividing line is reduced, from `#E8E8E8` to `#F0F0F0`. +- The default background color of Table is changed from transparent to white. + +### Compatibility adjustment + +- The minimum supported version of Vue is Vue 3.0. + +#### Adjusted API + +- Removed LocaleProvider, please use `ConfigProvider` instead. +- Removed the afterClose property of Tag. +- Merged FormModel and Form, see the Form refactoring part below for details. +- `tabIndex`, `maxLength`, `readOnly`, `autoComplete`, `autoFocus` are changed to all lowercase. +- In order to use the slot more friendly in template syntax, all related to xxxRender, renderXxxx are changed to single parameter, involving `itemRender`, `renderItem`, `customRender`, `dropdownRender`, `dateCellRender`, `dateFullCellRender`, `monthCellRender`, `monthFullCellRender`, `renderTabBar`. +- All the places where scopedSlots are configured are changed to slots. +- `{ on, props, attrs, ... }` configuration is flattened, such as `{ props: {type:'xxx'}, on: {click: this.handleClick}}` changed to `{ type: 'xxx', onClick: this.handleClick }`, related fields: `okButtonProps`, `cancelButtonProps`. +- Change xxx.sync to v-model:xxx +- v-model is changed to v-model:xxx, which specifically involves components: + + - The components changed from v-model to v-model:checked are: CheckableTag, Checkbox, Switch + - The components changed from v-model to v-model:value are: Radio, Mentions, CheckboxGroup, Rate, DatePicker、Select + - The components changed from v-model to v-model:visible are: Tag, Popconfirm, Popove, Tooltip, Moda, Dropdown + - The components changed from v-model to v-model:activeKey are: Collaps, Tabs + - The components changed from v-model to v-model:current are: Steps + - The components changed from v-model to v-model:selectedKeys are: Menu + +#### Icon Upgrade + +In `ant-design-vue@1.2.0`, we introduced the svg icon ([Why use the svg icon?](https://github.com/ant-design/ant-design/issues/10353)). The icon API that uses string naming cannot be loaded on demand, so the svg icon file is fully introduced, which greatly increases the size of the packaged product. In 2.0, we adjusted the icon usage API to support tree shaking, reducing the default package size by approximately 150 KB (Gzipped). + +The old way of using Icon will be obsolete: + +```html +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+### Backers
+
+Support us with a monthly donation and help us continue our activities. [[Become a backer](https://opencollective.com/ant-design-vue#backer)]
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+If you run a business and are using Ant Design Vue in a revenue-generating product, it makes business sense to sponsor Ant Design Vue development: it ensures the project that your product relies on stays healthy and actively maintained. It can also help your exposure in the Vue community and makes it easier to attract Vue developers.
+
+If you are an individual user and have enjoyed the productivity of using Ant Design Vue, consider donating as a sign of appreciation - like buying me coffee once in a while :)
diff --git a/site/src/vueDocs/sponsor.zh-CN.md b/site/src/vueDocs/sponsor.zh-CN.md
new file mode 100644
index 000000000..205d1d8fe
--- /dev/null
+++ b/site/src/vueDocs/sponsor.zh-CN.md
@@ -0,0 +1,75 @@
+# 赞助 Ant Design Vue 的研发
+
+ant-design-vue 是采用 MIT 许可的开源项目，使用完全免费。 但为了项目能够健康持续的发展下去，我们期望获得相应的资金支持。 你可以通过下列的方法来赞助我们的开发。
+
+## 一次性赞助
+
+你可以通过以下任意一种方式赞助:
+
+
+
+## 购买贴纸
+
+你也可以通过 购买我们官方授权的贴纸 的方式来支持 Ant Design Vue - 每售出一张贴纸，我们将获得 2 元的捐赠。
+
+## 周期性赞助
+
+周期性赞助可以获得额外的回报，比如你的名字会出现在 Vue 的 GitHub 仓库中，再比如你的公司 logo 会出现在我们的官网上。
+
+
+
+## 企业赞助
+
+您可以通过邮件咨询[antdv@foxmail.com](antdv@foxmail.com)。
+
+## 当前的赞助商
+
+### Sponsors
+
+Become a sponsor and get your logo on our README on Github with a link to your site. [[Become a sponsor](https://opencollective.com/ant-design-vue#sponsor)]
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+### Backers
+
+Support us with a monthly donation and help us continue our activities. [[Become a backer](https://opencollective.com/ant-design-vue#backer)]
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+如果你是企业经营者并且将 Ant Design Vue 用在商业产品中，那么赞助 Ant Design Vue 有商业上的益处：可以让你的产品所依赖的框架保持健康并得到积极的维护，也能帮助你在 Vue 社区里获得更高的曝光度，从而更容易地吸引到 Vue 开发者。
+
+如果你是个人开发者并且享受 Ant Design Vue 带来的高开发效率，可以用捐助来表示你的谢意 —— 就好像偶尔给我买杯咖啡 :)
diff --git a/site/src/vueDocs/use-with-vue-cli.en-US.md b/site/src/vueDocs/use-with-vue-cli.en-US.md
new file mode 100644
index 000000000..9ce64d62a
--- /dev/null
+++ b/site/src/vueDocs/use-with-vue-cli.en-US.md
@@ -0,0 +1,167 @@
+# Use in vue-cli 3
+
+[vue-cli](https://github.com/vuejs/vue-cli) is one of the best Vue application development tools. We are going to use `antd` within it and modify the webpack config for some customized needs.
+
+## Install and Initialization
+
+We need to install `vue-cli` first, you may need install [yarn](https://github.com/yarnpkg/yarn/) too.
+
+```bash
+$ npm install -g @vue/cli
+# OR
+$ yarn global add @vue/cli
+```
+
+Create a new project named `antd-demo`.
+
+```bash
+$ vue create antd-demo
+```
+
+And, setup your vue project configuration.
+
+The tool will create and initialize environment and dependencies automatically, please try config your proxy setting or use another npm registry if any network errors happen during it.
+
+Then we go inside `antd-demo` and start it.
+
+```bash
+$ cd antd-demo
+$ npm run serve
+```
+
+Open the browser at http://localhost:8080/. It renders a header saying "Welcome to Your Vue.js App" on the page.
+
+## Import antd
+
+Below is the default directory structure.
+
+```null
+├── README.md
+├── babel.config
+├── package.json
+├── public
+│ ├── favicon.ico
+│ └── index.html
+├── src
+│ ├── assets
+│ │ └── logo.png
+│ ├── components
+│ │ └── HelloWorld.vue
+│ ├── App.vue
+│ └── main.js
+└── yarn.lock
+```
+
+Now we install `ant-design-vue` from yarn or npm.
+
+```bash
+$ yarn add ant-design-vue
+```
+
+Modify `src/main.js`, import Button component from `antd`.
+
+```jsx
+import Vue from 'vue';
+import Button from 'ant-design-vue/lib/button';
+import 'ant-design-vue/dist/antd.css';
+import App from './App';
+
+const app = createApp(App);
+
+/* Automatically register components under Button, such as Button.Group */
+app.use(Button).mount('#app');
+```
+
+Modify `src/App.vue`。
+
+```jsx
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 
+ Button>
+
+
+...
+```
+
+Ok, you should now see a blue primary button displayed on the page. Next you can choose any components of `antd` to develop your application. Visit other workflows of `vue-cli` at its [User Guide ](https://github.com/vuejs/vue-cli/blob/master/README.md).
+
+## Advanced Guides
+
+We are successfully running antd components now but in the real world, there are still lots of problems about antd-demo. For instance, we actually import all styles of components in the project which may be a network performance issue.
+
+Now we need to customize the default webpack config.
+
+### Use babel-plugin-import
+
+[babel-plugin-import](https://github.com/ant-design/babel-plugin-import) is a babel plugin for importing components on demand ([How does it work?](/docs/vue/getting-started/#Import-on-Demand)).
+
+```bash
+$ yarn add babel-plugin-import --dev
+```
+
+#### if you use vue-cli 2
+
+Modify `.babelrc`.
+
+```diff
+ {
+ "presets": [
+ ["env", {
+ "modules": false,
+ "targets": {
+ "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
+ }
+ }],
+ "stage-2"
+ ],
+- "plugins": ["transform-vue-jsx", "transform-runtime"]
++ "plugins": [
++ "transform-vue-jsx",
++ "transform-runtime",
++ ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }]
++ ]
+ }
+```
+
+#### if you use vue-cli 3
+
+Modify `babel.config.js`
+
+```diff
+ module.exports = {
+ presets: ["@vue/app"],
++ plugins: [
++ [
++ "import",
++ { libraryName: "ant-design-vue", libraryDirectory: "es", style: true }
++ ]
++ ]
+};
+```
+
+Remove the `import 'ant-design-vue/dist/antd.css';` statement added before because `babel-plugin-import` will import styles and import components like below:
+
+```diff
+ // src/main.js
+ import Vue from 'vue'
+- import Button from 'ant-design-vue/lib/button';
++ import { Button } from 'ant-design-vue';
+- import 'ant-design-vue/dist/antd.css'
+ import App from './App'
+
+ Vue.component(Button.name, Button)
+
+ Vue.config.productionTip = false
+
+ new Vue({
+ render: h => h(App)
+ }).$mount('#app')
+```
+
+Then reboot with `npm run dev` and visit the demo page, you should not find any [warning messages](https://zos.alipayobjects.com/rmsportal/vgcHJRVZFmPjAawwVoXK.png) in the console, which prove that the `import on demand` config is working now. You will find more info about it in [this guide](/docs/vue/getting-started/#Import-on-Demand).
+
+### Customize Theme
+
+According to the [Customize Theme documentation](/docs/vue/customize-theme), to customize the theme, we need to modify `less` variables with tools such as [less-loader](https://github.com/webpack/less-loader).
diff --git a/site/src/vueDocs/use-with-vue-cli.zh-CN.md b/site/src/vueDocs/use-with-vue-cli.zh-CN.md
new file mode 100644
index 000000000..6b4362fc4
--- /dev/null
+++ b/site/src/vueDocs/use-with-vue-cli.zh-CN.md
@@ -0,0 +1,167 @@
+# 在 vue-cli 3 中使用
+
+[vue-cli](https://github.com/vuejs/vue-cli) 是业界最优秀的 Vue 应用开发工具之一，本文会尝试在 vue-cli 创建的工程中使用 antd 组件，并自定义 webpack 的配置以满足各类工程化需求。
+
+## 安装和初始化
+
+我们需要在命令行中安装 vue-cli 工具，你可能还需要安装 [yarn](https://github.com/yarnpkg/yarn/)。
+
+```bash
+$ npm install -g @vue/cli
+# OR
+$ yarn global add @vue/cli
+```
+
+然后新建一个项目。
+
+```bash
+$ vue create antd-demo
+```
+
+并配置项目。
+
+工具会自动初始化一个脚手架并安装 Vue 项目的各种必要依赖，如果在过程中出现网络问题，请尝试配置代理或使用其他 npm registry。
+
+然后我们进入项目并启动。
+
+```bash
+$ cd antd-demo
+$ npm run serve
+```
+
+此时浏览器会访问 http://localhost:8080/ ，看到 `Welcome to Your Vue.js App` 的界面就算成功了。
+
+## 引入 antd
+
+这是 vue-cli 生成的默认目录结构。
+
+```null
+├── README.md
+├── babel.config
+├── package.json
+├── public
+│ ├── favicon.ico
+│ └── index.html
+├── src
+│ ├── assets
+│ │ └── logo.png
+│ ├── components
+│ │ └── HelloWorld.vue
+│ ├── App.vue
+│ └── main.js
+└── yarn.lock
+```
+
+现在从 yarn 或 npm 安装并引入 ant-design-vue。
+
+```bash
+$ yarn add ant-design-vue
+```
+
+修改 `src/main.js`，引入 antd 的按钮组件以及全部样式文件。
+
+```jsx
+import Vue from 'vue';
+import Button from 'ant-design-vue/lib/button';
+import 'ant-design-vue/dist/antd.css';
+import App from './App';
+
+const app = createApp(App);
+app.config.productionTip = false;
+
+/* 会自动注册 Button 下的子组件, 例如 Button.Group */
+app.use(Button).mount('#app');
+```
+
+修改 `src/App.vue`的 template 内容。
+
+```jsx
+
+
+
+
+ Button>
+
+
+...
+```
+
+好了，现在你应该能看到页面上已经有了 antd 的蓝色按钮组件，接下来就可以继续选用其他组件开发应用了。其他开发流程你可以参考 vue-cli 的[官方文档](https://github.com/vuejs/vue-cli/blob/master/README.md)。
+
+## 高级配置
+
+我们现在已经把组件成功运行起来了，但是在实际开发过程中还有很多问题，例如上面的例子实际上加载了全部的 antd 组件的样式（对前端性能是个隐患）。
+
+此时我们需要对 vue-cli 的默认配置进行自定义。
+
+### 使用 babel-plugin-import
+
+[babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 是一个用于按需加载组件代码和样式的 babel 插件（[原理](/docs/vue/getting-started-cn/#按需加载)）。
+
+```bash
+$ yarn add babel-plugin-import --dev
+```
+
+#### 使用 vue-cli 2 的小伙伴
+
+修改`.babelrc`文件，配置 babel-plugin-import
+
+```diff
+ {
+ "presets": [
+ ["env", {
+ "modules": false,
+ "targets": {
+ "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
+ }
+ }],
+ "stage-2"
+ ],
+- "plugins": ["transform-vue-jsx", "transform-runtime"]
++ "plugins": [
++ "transform-vue-jsx",
++ "transform-runtime",
++ ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": "css" }]
++ ]
+ }
+```
+
+#### 使用 vue-cli 3 的小伙伴
+
+修改`babel.config.js`文件，配置 babel-plugin-import
+
+```diff
+ module.exports = {
+ presets: ["@vue/app"],
++ plugins: [
++ [
++ "import",
++ { libraryName: "ant-design-vue", libraryDirectory: "es", style: true }
++ ]
++ ]
+};
+```
+
+然后移除前面在 `src/main.js` 里全量添加的 `import 'ant-design-vue/dist/antd.css';` 样式代码，并且按下面的格式引入模块。
+
+```diff
+ // src/main.js
+ import Vue from 'vue'
+- import Button from 'ant-design-vue/lib/button';
++ import { Button } from 'ant-design-vue';
+- import 'ant-design-vue/dist/antd.css'
+ import App from './App'
+
+ Vue.component(Button.name, Button)
+
+ Vue.config.productionTip = false
+
+ new Vue({
+ render: h => h(App)
+ }).$mount("#app");
+```
+
+最后重启 `npm run serve` 访问页面，antd 组件的 js 和 css 代码都会按需加载，你在控制台也不会看到这样的[警告信息](https://zos.alipayobjects.com/rmsportal/vgcHJRVZFmPjAawwVoXK.png)。关于按需加载的原理和其他方式可以阅读[这里](/docs/vue/getting-started-cn/#按需加载)。
+
+### 自定义主题
+
+按照 [配置主题](/docs/vue/customize-theme-cn) 的要求，自定义主题需要用到 less 变量覆盖功能。
diff --git a/site/typings/index.d.ts b/site/typings/index.d.ts
new file mode 100644
index 000000000..799016fa7
--- /dev/null
+++ b/site/typings/index.d.ts
@@ -0,0 +1,8 @@
+declare module '*.json' {
+ const value: any;
+ export const version: string;
+ export default value;
+}
+
+export * from '../plugin/docs';
+export * from '../plugin/md';
diff --git a/site/typings/shared.d.ts b/site/typings/shared.d.ts
new file mode 100644
index 000000000..c8da68bd5
--- /dev/null
+++ b/site/typings/shared.d.ts
@@ -0,0 +1,42 @@
+// types shared between server and client
+
+export interface LocaleConfig {
+ lang: string;
+ title?: string;
+ description?: string;
+ head?: HeadConfig[];
+ label?: string;
+ selectText?: string;
+}
+
+export interface SiteData
+